/* ==============================================================
   Sitio público — encabezado, pie y componentes de contenido
   Depende de base.css
   ============================================================== */

/* ==============================================================
   Encabezado
   ============================================================== */

/* La barra va en el rosa de marca.
   Usa --rosa-boton (#e02350) y no --rosa (#ef2e5a) por contraste: el
   texto del menú mide 14 px en negrita, así que necesita 4,5:1 y sobre
   #ef2e5a el blanco solo da 4,03:1. #e02350 llega a 4,64:1 y cumple.
   Es la misma regla que ya se aplicó a la banda de cifras. */
.encabezado {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--rosa-boton);
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    color: var(--blanco);
    transition: box-shadow var(--transicion);
}

.encabezado--con-sombra {
    box-shadow: 0 4px 18px rgba(168, 26, 60, 0.28);
}

/* El foco global es un contorno rosa: dentro de la barra rosa no se
   vería. Aquí pasa a blanco, que sobre este fondo sí se distingue. */
.encabezado :focus-visible,
.nav :focus-visible {
    outline-color: var(--blanco);
}

.encabezado__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    min-height: 76px;
}

.encabezado__marca {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    text-decoration: none;
    color: var(--blanco);
    flex-shrink: 0;
}

.encabezado__logo {
    height: 46px;
    width: auto;
}

.encabezado__texto-marca {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.encabezado__nombre {
    font-family: var(--fuente-titulos);
    font-size: var(--texto-base);
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* Blanco pleno, no amarillo ni blanco translúcido: sobre este rosa el
   amarillo da 3,94:1 y a 11 px hace falta 4,5:1. La ubicación se
   distingue del nombre por tamaño y rastreo, no por color. */
.encabezado__ubicacion {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blanco);
}

/* ---- Navegación ---- */

.nav {
    display: flex;
    align-items: center;
    gap: var(--e-1);
}

.nav__enlace {
    position: relative;
    padding: var(--e-2) var(--e-3);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--blanco);
    text-decoration: none;
    border-radius: var(--radio-sm);
    transition: color var(--transicion);
}

.nav__enlace::after {
    content: '';
    position: absolute;
    left: var(--e-3);
    right: var(--e-3);
    bottom: 4px;
    height: 3px;
    background: var(--amarillo);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transicion);
}

/* El estado activo NO se marca cambiando el color del texto: el amarillo
   sobre este rosa da 3,94:1 y no llega al 4,5:1 que exige un texto de
   14 px. Lo señala la franja amarilla de ::after, que como elemento
   decorativo solo debe superar 3:1. El texto se queda blanco (4,64:1). */
.nav__enlace:hover,
.nav__enlace.is-active {
    color: var(--blanco);
}

.nav__enlace:hover::after,
.nav__enlace.is-active::after {
    transform: scaleX(1);
}

.encabezado__acciones {
    display: flex;
    align-items: center;
    gap: var(--e-3);
}

/* ---- Menú móvil ---- */

.menu-boton {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-sm);
    color: var(--blanco);
}

.menu-boton__icono,
.menu-boton__icono::before,
.menu-boton__icono::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transicion), opacity var(--transicion);
}

.menu-boton__icono::before,
.menu-boton__icono::after {
    content: '';
    position: absolute;
}

.menu-boton__icono::before { transform: translateY(-7px); }
.menu-boton__icono::after  { transform: translateY(7px); }

.menu-boton[aria-expanded='true'] .menu-boton__icono {
    background: transparent;
}

.menu-boton[aria-expanded='true'] .menu-boton__icono::before {
    transform: rotate(45deg);
}

.menu-boton[aria-expanded='true'] .menu-boton__icono::after {
    transform: rotate(-45deg);
}

@media (max-width: 900px) {
    .menu-boton {
        display: flex;
        position: relative;
    }

    /* El panel desplegable comparte el rosa de la barra: si se quedara
       blanco, los enlaces (ahora blancos) serían invisibles dentro. */
    .nav {
        position: fixed;
        inset: 76px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--e-4);
        background: var(--rosa-boton);
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
        box-shadow: 0 12px 28px rgba(168, 26, 60, 0.30);
        transform: translateY(-120%);
        transition: transform var(--transicion);
        max-height: calc(100vh - 76px);
        overflow-y: auto;
    }

    .nav.is-abierto {
        transform: translateY(0);
    }

    .nav__enlace {
        padding: var(--e-4);
        font-size: var(--texto-base);
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .nav__enlace:last-child {
        border-bottom: none;
    }

    .nav__enlace::after {
        display: none;
    }

}

/* Entre 900 y 1100 px el menú ya es horizontal pero el renglón no da para
   todo: marca (282) + navegación (514) + botones (185) + separaciones se
   pasaban de los 1024 y arrastraban la página en horizontal. Por debajo
   de 1100 los botones del encabezado se ocultan; la navegación, que es lo
   que hace falta para moverse por el sitio, se queda. */
@media (max-width: 1100px) {
    .encabezado__acciones .boton {
        display: none;
    }
}

/* En pantallas muy angostas (320–420 px) el nombre de la marca no cabía
   junto al botón de menú: como .encabezado__marca no se podía encoger,
   el encabezado medía 358 px dentro de una ventana de 320 y arrastraba
   toda la página a un desplazamiento horizontal. Aquí la marca sí cede
   espacio y el nombre puede pasar a dos renglones. */
@media (max-width: 420px) {
    .encabezado__marca {
        flex-shrink: 1;
        min-width: 0;
        gap: var(--e-2);
    }

    .encabezado__logo {
        height: 38px;
    }

    .encabezado__nombre {
        font-size: var(--texto-sm);
    }

    .encabezado__ubicacion {
        font-size: 0.6rem;
        letter-spacing: 0.1em;
    }
}

/* ==============================================================
   Portada

   Rediseño 2026-08. Antes era una foto a sangre con velo oscuro y
   texto centrado encima; ahora es una rejilla de dos columnas sobre
   fondo blanco, con el titular como pieza principal. El carrusel
   sigue siendo el mismo, solo que vive dentro de su columna.
   ============================================================== */

.portada {
    position: relative;
    overflow: hidden;
    padding-block: var(--e-6) var(--e-8);
    background: var(--fondo);
}

/* ---- Manchas de color del fondo ----
   Van en CSS y no como PNG: pesan cero y se recolorean solas si algún
   día cambia la marca. */

.mancha {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.mancha--rosa {
    width: 520px;
    height: 520px;
    top: -240px;
    right: -170px;
    background: radial-gradient(circle at 35% 35%, rgba(239, 46, 90, 0.20), rgba(239, 46, 90, 0) 68%);
    animation: mancha-flota 14s ease-in-out infinite;
}

.mancha--amarilla {
    width: 300px;
    height: 300px;
    bottom: 10px;
    left: -150px;
    background: radial-gradient(circle at 50% 50%, rgba(255, 241, 15, 0.34), rgba(255, 241, 15, 0) 66%);
    animation: mancha-flota 11s ease-in-out infinite reverse;
}

@keyframes mancha-flota {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(0, 26px, 0) scale(1.06); }
}

.portada__rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--e-6);
    align-items: center;
}

@media (min-width: 900px) {
    .portada__rejilla {
        grid-template-columns: 1.05fr 0.95fr;
        gap: var(--e-7);
        padding-block: var(--e-5);
    }
}

/* Las columnas no crecen más allá de su reparto aunque el contenido
   tenga palabras largas */
.portada__rejilla > * {
    min-width: 0;
}

.portada__rotulo {
    display: inline-block;
    margin-bottom: var(--e-3);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-xs);
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rosa-texto);
}

.portada__titulo {
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

/* El rosa de marca como texto grande: a este tamaño da 4,03:1 sobre
   blanco y cumple el mínimo AA de texto grande (3:1). Es lo que le da
   presencia sin usarlo en cuerpos pequeños, donde no cumpliría. */
.titulo-realce {
    font-style: normal;
    color: var(--rosa);
}

.portada__entrada {
    max-width: 46ch;
    margin-top: var(--e-5);
    font-size: var(--texto-lg);
    color: var(--gris);
}

.portada__entrada p + p {
    margin-top: var(--e-3);
}

.portada__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    margin-top: var(--e-6);
}

/* ---- Columna del medio ---- */

.portada__medio {
    position: relative;
}

/* Esquina viva abajo a la izquierda: rompe la simetría del rectángulo
   sin recortar la fotografía. */
.portada__marco {
    position: relative;
    aspect-ratio: 4 / 4.2;
    border-radius: var(--radio-xl) var(--radio-xl) var(--radio-xl) 6px;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 25%, var(--rosa), var(--rosa-hondo) 65%, #7d1230 100%);
    box-shadow: 0 26px 60px rgba(168, 26, 60, 0.28);
}

@media (max-width: 899px) {
    .portada__marco {
        aspect-ratio: 4 / 3;
    }
}

.portada__imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portada__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 700ms ease-in-out;
}

.portada__slide.is-activo {
    opacity: 1;
}

.portada__puntos {
    position: absolute;
    left: 50%;
    bottom: var(--e-4);
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    border-radius: var(--radio-full);
    background: rgba(26, 19, 32, 0.42);
    backdrop-filter: blur(6px);
}

.portada__punto {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: var(--radio-full);
    background: rgba(255, 255, 255, 0.55);
    border: 2px solid transparent;
    transition: background var(--transicion), width var(--transicion);
}

.portada__punto:hover {
    background: rgba(255, 255, 255, 0.85);
}

.portada__punto.is-activo {
    width: 28px;
    background: var(--amarillo);
}

/* Sin imagen cargada, la portada no deja un hueco: el texto ocupa
   todo el ancho y las manchas hacen el trabajo visual. */
.portada--sin-medio .portada__rejilla {
    grid-template-columns: 1fr;
    max-width: 820px;
}

/* ==============================================================
   Sección de texto con imagen
   ============================================================== */

.texto-imagen {
    display: grid;
    gap: var(--e-6);
    align-items: center;
}

@media (min-width: 900px) {
    .texto-imagen {
        grid-template-columns: 1fr 1fr;
        gap: var(--e-7);
    }

    .texto-imagen--invertido .texto-imagen__medio {
        order: -1;
    }
}

/* La foto se ve completa: sin aspect-ratio fijo ni object-fit: cover, que
   era lo que recortaba las fotos verticales por arriba y por abajo. Como
   picture() ya emite width y height, el hueco se reserva igual y no hay
   salto de maquetación mientras carga. */
.texto-imagen__medio img {
    width: 100%;
    height: auto;
    border-radius: var(--radio-xl);
    box-shadow: var(--sombra-md);
}

.texto-imagen__texto .contenido-rico {
    font-size: var(--texto-base);
}

/* ==============================================================
   Tarjetas
   ============================================================== */

.rejilla {
    display: grid;
    gap: var(--e-5);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.tarjeta {
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-xl);
    overflow: hidden;
    transition: transform var(--transicion), box-shadow var(--transicion),
                border-color var(--transicion);
}

/* La sombra del hover es rosada, no gris: la tarjeta se levanta dentro
   del sistema de color y no como una caja neutra flotando. */
.tarjeta:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(168, 26, 60, 0.16);
    border-color: transparent;
}

.tarjeta__medio {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--rosa-lavado);
    overflow: hidden;
}

.tarjeta__imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.tarjeta:hover .tarjeta__imagen {
    transform: scale(1.04);
}

.tarjeta__distintivo {
    position: absolute;
    top: var(--e-3);
    left: var(--e-3);
    z-index: 2;
}

.tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--e-5);
    gap: var(--e-2);
}

.tarjeta__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--texto-xs);
    color: var(--gris);
}

.tarjeta__titulo {
    font-size: var(--texto-xl);
    line-height: 1.25;
}

.tarjeta__titulo a {
    color: inherit;
    text-decoration: none;
}

.tarjeta__titulo a:hover {
    color: var(--rosa-texto);
}

/* El enlace del título cubre toda la tarjeta, sin anidar enlaces */
.tarjeta__titulo a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tarjeta {
    position: relative;
}

.tarjeta__resumen {
    font-size: var(--texto-sm);
    color: var(--gris);
    flex: 1;
}

.tarjeta__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    margin-top: var(--e-3);
    padding-top: var(--e-3);
    border-top: 1px solid var(--borde-suave);
    font-size: var(--texto-xs);
    color: var(--gris);
}

/* Los enlaces del pie deben quedar por encima del enlace envolvente */
.tarjeta__pie a {
    position: relative;
    z-index: 2;
}

/* ==============================================================
   Estado vacío
   ============================================================== */

.vacio {
    padding: var(--e-8) var(--e-4);
    text-align: center;
    border: 2px dashed var(--borde);
    border-radius: var(--radio-lg);
    color: var(--gris);
}

.vacio__icono {
    font-size: 2.5rem;
    margin-bottom: var(--e-3);
    opacity: 0.5;
}

.vacio h3 {
    margin-bottom: var(--e-2);
    color: var(--tinta-suave);
}

/* ==============================================================
   Llamado a la acción
   ============================================================== */

.cta {
    text-align: center;
}

.cta__titulo {
    max-width: 720px;
    margin-inline: auto;
}

.cta__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-3);
    margin-top: var(--e-5);
}

/* Aros del cierre en amarillo. Se salen de la caja a propósito y los
   recorta el overflow:hidden de .seccion--amarilla. */
.cta__aro {
    position: absolute;
    border: 2px solid rgba(26, 19, 32, 0.10);
    border-radius: 50%;
    pointer-events: none;
}

.cta__aro--a { width: 340px; height: 340px; top: -150px; left: -90px; }
.cta__aro--b { width: 220px; height: 220px; bottom: -120px; right: -50px; }

/* ==============================================================
   Bloques con ícono

   Rejilla que se reparte sola: cuatro columnas en escritorio, dos en
   tableta y una en móvil. El auto-fit con minmax lo resuelve sin
   escribir un punto de corte por cada cantidad de bloques, así que
   sirve igual si mañana son tres o cinco.
   ============================================================== */

.bloques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--e-6) var(--e-5);
}

.bloque {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

/* El disco lleva el rosa lavado de fondo y el ícono en rosa fuerte: es
   una forma decorativa, no texto, así que le basta con destacar. */
.bloque__icono {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin-bottom: var(--e-4);
    border-radius: var(--radio-full);
    background: var(--rosa-lavado);
    color: var(--rosa-texto);
    transition: background var(--transicion), transform var(--transicion);
}

.bloque:hover .bloque__icono {
    background: var(--rosa-boton);
    color: var(--blanco);
    transform: translateY(-4px);
}

.bloque__filete {
    display: block;
    width: 46px;
    height: 3px;
    margin-bottom: var(--e-4);
    border-radius: 2px;
    background: var(--amarillo);
}

.bloque__titulo {
    font-size: var(--texto-xl);
    line-height: 1.25;
    margin-bottom: var(--e-3);
    text-wrap: balance;
}

.bloque__texto {
    max-width: 34ch;
    font-size: var(--texto-sm);
    line-height: 1.7;
    color: var(--gris);
}

/* Sobre el fondo oscuro el gris del texto no llegaría a contraste */
.seccion--oscura .bloque__texto {
    color: rgba(255, 255, 255, 0.78);
}

.seccion--oscura .bloque__icono {
    background: rgba(255, 255, 255, 0.10);
    color: var(--amarillo);
}

/* ==============================================================
   Equipo de la fundación

   Se centra con cualquier número de miembros. Es una lista flexible y
   no una rejilla: con `repeat(auto-fit, minmax(...))` un miembro solo
   se estiraría a todo el ancho y cuatro dejarían una columna vacía
   descuadrando la fila. Con flex-wrap + justify-content:center, cada
   tarjeta conserva su ancho y la fila siempre queda centrada.
   ============================================================== */

.equipo {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-6) var(--e-5);
}

.equipo__miembro {
    /* Ni crece ni se encoge más allá de su base: así dos tarjetas no se
       reparten media pantalla cada una. El min() la deja caber en 320 px. */
    flex: 0 1 min(100%, 260px);
    max-width: 260px;
}

.ficha-miembro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.ficha-miembro__retrato {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: var(--e-4);
    overflow: hidden;
    border-radius: var(--radio-xl);
    background: var(--rosa-lavado);
    display: grid;
    place-items: center;
    box-shadow: var(--sombra-sm);
    transition: transform var(--transicion), box-shadow var(--transicion);
}

.ficha-miembro__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ficha-miembro__inicial {
    font-family: var(--fuente-titulos);
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--rosa-texto);
}

/* La animación vive en el retrato, no en toda la tarjeta: el texto no se
   mueve y la foto se acerca, que se lee más tranquilo. */
.equipo__miembro:hover .ficha-miembro__retrato,
.equipo__miembro:focus-within .ficha-miembro__retrato {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(168, 26, 60, 0.20);
}

.equipo__miembro:hover .ficha-miembro__foto,
.equipo__miembro:focus-within .ficha-miembro__foto {
    transform: scale(1.06);
}

.ficha-miembro__nombre {
    font-size: var(--texto-lg);
    line-height: 1.25;
    margin-bottom: var(--e-2);
    text-wrap: balance;
}

/* El cargo es la segunda parte de la tarjeta: se separa del nombre con
   la franja amarilla y va en versalitas pequeñas. */
.ficha-miembro__cargo {
    position: relative;
    padding-top: var(--e-3);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rosa-texto);
}

.ficha-miembro__cargo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: var(--amarillo);
}

.seccion--oscura .ficha-miembro__cargo {
    color: var(--amarillo);
}

@media (max-width: 480px) {
    .equipo {
        gap: var(--e-5);
    }

    .equipo__miembro {
        flex-basis: min(100%, 220px);
    }
}

/* ==============================================================
   Banda de cifras

   El plano usa --rosa-boton y no --rosa: sobre #ef2e5a el blanco da
   4,03:1, que alcanza para las cifras grandes pero deja los rótulos
   pequeños por debajo del mínimo AA. #e02350 es el mismo rosa un punto
   más hondo y sube a 4,64:1, así que todo el texto de la banda cumple.
   ============================================================== */

.cifras {
    position: relative;
    overflow: hidden;
    background: var(--rosa-boton);
    color: var(--blanco);
}

/* Franja compacta: es un separador entre bloques de contenido, no una
   sección de lectura. Con el relleno normal de .seccion (64 px en móvil
   y 96 px en escritorio) el 57 % del alto era aire. Se reduce a la
   mitad, y estos valores tienen que ganarle a .seccion, que va antes
   en la hoja pero tiene la misma especificidad. */
.seccion.cifras {
    padding-block: var(--e-6);
}

@media (min-width: 768px) {
    .seccion.cifras {
        padding-block: var(--e-7);
    }
}

/* Textura para que el plano de color no se lea liso */
.cifras::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.13), transparent 42%),
        radial-gradient(circle at 88% 85%, rgba(168, 26, 60, 0.45), transparent 46%);
    pointer-events: none;
}

.cifras__encabezado {
    position: relative;
    max-width: 640px;
    margin: 0 auto var(--e-5);
    text-align: center;
}

.cifras__encabezado h2 {
    color: var(--blanco);
}

.cifras__rotulo {
    display: inline-block;
    margin-bottom: var(--e-2);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-xs);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--amarillo);
}

.cifras__rejilla {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--e-5) var(--e-5);
    text-align: center;
}

.cifra__valor {
    display: block;
    font-family: var(--fuente-titulos);
    font-weight: 900;
    font-size: clamp(2.8rem, 6vw, 4rem);
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--blanco);
    /* Las cifras se alinean en columna: los dígitos deben medir igual */
    font-variant-numeric: tabular-nums;
}

.cifra__sufijo {
    color: var(--amarillo);
    margin-left: 0.04em;
}

.cifra__nombre {
    display: block;
    margin-top: var(--e-3);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-sm);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blanco);
}

/* ==============================================================
   Pie de página
   ============================================================== */

.pie {
    background: var(--tinta);
    color: rgba(255, 255, 255, 0.72);
    padding-top: var(--e-8);
    font-size: var(--texto-sm);
}

.pie a:not(.boton) {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.pie a:not(.boton):hover {
    color: var(--amarillo);
}

.pie__rejilla {
    display: grid;
    gap: var(--e-6);
    grid-template-columns: 1fr;
    padding-bottom: var(--e-7);
}

@media (min-width: 700px) {
    .pie__rejilla {
        grid-template-columns: 1.6fr 1fr 1.2fr;
        gap: var(--e-7);
    }
}

.pie__titulo {
    margin-bottom: var(--e-4);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amarillo);
}

.pie__logo {
    height: 54px;
    width: auto;
    margin-bottom: var(--e-4);
}

.pie__lista {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
}

.pie__contacto {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
}

.pie__dato {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
}

.pie__dato svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--rosa);
}

/* Mismo motivo que en .contacto-lista: el correo es una palabra larguísima */
.pie__dato > span,
.pie__dato > a {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pie__redes {
    display: flex;
    gap: var(--e-3);
    margin-top: var(--e-4);
}

.pie__red {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radio-full);
    background: rgba(255, 255, 255, 0.08);
    color: var(--blanco);
    transition: background var(--transicion), transform var(--transicion);
}

.pie__red:hover {
    background: var(--rosa);
    color: var(--blanco);
    transform: translateY(-2px);
}

.pie__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding-block: var(--e-4);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--texto-xs);
    color: rgba(255, 255, 255, 0.5);
}

/* Acceso discreto al panel: mismo tono apagado que el texto que lo rodea,
   se aclara solo al pasar el mouse o el foco. Objetivo táctil de 32px
   aunque el ícono mida 14, para que siga siendo fácil de pulsar. */
/* Selector reforzado a propósito: ".pie a:not(.boton)" (0,2,1) es más
   específico que ".pie__acceso" sola (0,1,0) y le pisaría el color. */
.pie a.pie__acceso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: var(--e-2);
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0.7;
    border-radius: var(--radio-full);
    transition: opacity var(--transicion), background var(--transicion), color var(--transicion);
}

.pie a.pie__acceso:hover,
.pie a.pie__acceso:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    color: var(--amarillo);
}

/* ==============================================================
   Botón flotante de WhatsApp
   ============================================================== */

.whatsapp-flotante {
    position: fixed;
    right: var(--e-4);
    bottom: var(--e-4);
    z-index: 90;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radio-full);
    background: #25d366;
    color: var(--blanco);
    box-shadow: var(--sombra-md);
    transition: transform var(--transicion), box-shadow var(--transicion);
}

.whatsapp-flotante:hover {
    transform: scale(1.06);
    box-shadow: var(--sombra-lg);
    color: var(--blanco);
}

/* ==============================================================
   Mensajes flash del sitio público
   ============================================================== */

.flash-zona {
    position: fixed;
    top: 90px;
    right: var(--e-4);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    max-width: min(400px, calc(100vw - 2rem));
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: var(--e-4);
    border-radius: var(--radio);
    background: var(--blanco);
    box-shadow: var(--sombra-lg);
    border-left: 4px solid var(--gris);
    font-size: var(--texto-sm);
    animation: flash-entra 260ms ease-out;
}

.flash--success { border-color: var(--exito); }
.flash--error   { border-color: var(--error); }
.flash--warning { border-color: var(--aviso); }
.flash--info    { border-color: var(--info); }

.flash__cerrar {
    margin-left: auto;
    padding: 0 var(--e-1);
    color: var(--gris-claro);
    font-size: var(--texto-lg);
    line-height: 1;
}

.flash__cerrar:hover {
    color: var(--tinta);
}

@keyframes flash-entra {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ==============================================================
   Página de error
   ============================================================== */

.error-pagina {
    display: grid;
    place-items: center;
    min-height: 70vh;
    padding: var(--e-8) var(--e-4);
    text-align: center;
}

.error-pagina__codigo {
    font-family: var(--fuente-titulos);
    font-size: clamp(5rem, 18vw, 10rem);
    font-weight: 900;
    line-height: 1;
    color: var(--rosa);
    letter-spacing: -0.04em;
}

.error-pagina__mensaje {
    max-width: 520px;
    margin: var(--e-4) auto var(--e-6);
    color: var(--gris);
    font-size: var(--texto-lg);
}

.error-pagina__detalle {
    max-width: 900px;
    margin-top: var(--e-7);
    padding: var(--e-4);
    text-align: left;
    background: var(--fondo-alt);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    font-size: var(--texto-xs);
    line-height: 1.6;
    overflow-x: auto;
}

.error-pagina__detalle strong {
    display: block;
    margin-bottom: var(--e-2);
    color: var(--error);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-sm);
}

.error-pagina__detalle pre {
    margin-top: var(--e-3);
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--gris);
}

/* ==============================================================
   Cabecera de las páginas interiores
   ============================================================== */

.cabecera-pagina {
    padding-block: var(--e-7) var(--e-5);
    background: var(--verde);
    border-bottom: 1px solid var(--borde);
}

.cabecera-pagina__ruta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-3);
    font-size: var(--texto-xs);
    color: var(--gris);
}

.cabecera-pagina__ruta a {
    color: var(--gris);
    text-decoration: none;
}

.cabecera-pagina__ruta a:hover {
    color: var(--rosa-texto);
    text-decoration: underline;
}

.cabecera-pagina__ruta--claro,
.cabecera-pagina__ruta--claro a {
    color: rgba(255, 255, 255, 0.75);
}

.cabecera-pagina__ruta--claro a:hover {
    color: var(--amarillo);
}

.cabecera-pagina__intro {
    max-width: 60ch;
    margin-top: var(--e-3);
    font-size: var(--texto-lg);
    color: var(--gris);
}

/* ==============================================================
   Filtros del sitio público
   ============================================================== */

.filtros-publicos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-bottom: var(--e-6);
}

.filtro-chip {
    padding: 0.45rem 1rem;
    font-size: var(--texto-sm);
    font-weight: 700;
    color: var(--tinta-suave);
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-full);
    text-decoration: none;
    transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}

.filtro-chip:hover {
    border-color: var(--rosa);
    color: var(--rosa-texto);
}

.filtro-chip.is-activo {
    background: var(--rosa-boton);
    border-color: var(--rosa-boton);
    color: var(--blanco);
}

/* ==============================================================
   Portada de artículo
   ============================================================== */

.portada-articulo {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(320px, 48vh, 520px);
    padding-block: var(--e-7);
    background: var(--tinta);
    color: var(--blanco);
    overflow: hidden;
}

.portada-articulo--sin-imagen {
    background:
        radial-gradient(circle at 18% 25%, rgba(239, 46, 90, 0.4), transparent 48%),
        radial-gradient(circle at 82% 78%, rgba(255, 241, 15, 0.22), transparent 48%),
        var(--tinta);
}

.portada-articulo__imagen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portada-articulo__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(26, 19, 32, 0.45) 0%,
        rgba(26, 19, 32, 0.72) 60%,
        rgba(26, 19, 32, 0.88) 100%
    );
}

.portada-articulo__contenido {
    position: relative;
    z-index: 2;
}

.portada-articulo__titulo {
    max-width: 22ch;
    margin-top: var(--e-3);
    color: var(--blanco);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

.portada-articulo__resumen {
    max-width: 62ch;
    margin-top: var(--e-4);
    font-size: var(--texto-lg);
    color: rgba(255, 255, 255, 0.88);
}

/* ==============================================================
   Cuerpo del artículo con lateral
   ============================================================== */

.articulo {
    display: grid;
    gap: var(--e-6);
    align-items: start;
}

@media (min-width: 960px) {
    .articulo {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--e-7);
    }

    .articulo__lateral {
        position: sticky;
        top: 100px;
    }
}

.articulo__cuerpo > * + * {
    margin-top: var(--e-7);
}

/* ---- Ficha técnica ---- */

.ficha-tecnica {
    padding: var(--e-5);
    background: var(--verde);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
}

.ficha-tecnica + .ficha-tecnica {
    margin-top: var(--e-4);
}

.ficha-tecnica--cta {
    background: var(--tinta);
    color: rgba(255, 255, 255, 0.82);
    border-color: var(--tinta);
}

.ficha-tecnica--cta .ficha-tecnica__titulo {
    color: var(--blanco);
}

.ficha-tecnica__titulo {
    margin-bottom: var(--e-4);
    font-size: var(--texto-base);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ficha-tecnica__lista {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    margin: 0;
}

.ficha-tecnica__fila {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: var(--e-3);
    border-bottom: 1px solid var(--borde);
}

.ficha-tecnica__fila:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.ficha-tecnica__fila dt {
    font-size: var(--texto-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rosa-texto);
}

.ficha-tecnica__fila dd {
    margin: 0;
    font-size: var(--texto-sm);
    color: var(--tinta);
}

/* ---- Logros ---- */

.bloque-logros {
    padding: var(--e-5);
    background: var(--amarillo-suave);
    border-left: 4px solid var(--amarillo);
    border-radius: 0 var(--radio) var(--radio) 0;
}

.bloque-logros h2 {
    margin-bottom: var(--e-3);
    font-size: var(--texto-xl);
}

.bloque-logros .contenido-rico {
    font-size: var(--texto-base);
}

/* ==============================================================
   Galería
   ============================================================== */

.galeria__rejilla {
    display: grid;
    gap: var(--e-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

.galeria__item {
    display: block;
    padding: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--borde-suave);
    cursor: zoom-in;
    border: 2px solid transparent;
    transition: border-color var(--transicion), transform var(--transicion);
}

.galeria__item:hover {
    border-color: var(--rosa);
    transform: translateY(-2px);
}

.galeria__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.galeria__item:hover img {
    transform: scale(1.05);
}

/* ==============================================================
   Visor de imágenes ampliadas
   ============================================================== */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e-6) var(--e-5);
    background: rgba(12, 8, 15, 0.94);
}

.lightbox[hidden] {
    display: none;
}

.lightbox__figura {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-3);
    max-width: min(1100px, 92vw);
    max-height: 84vh;
    margin: 0;
}

.lightbox__imagen {
    max-width: 100%;
    max-height: 74vh;
    object-fit: contain;
    border-radius: var(--radio);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox__leyenda {
    max-width: 70ch;
    text-align: center;
    font-size: var(--texto-sm);
    color: rgba(255, 255, 255, 0.82);
}

.lightbox__leyenda:empty {
    display: none;
}

.lightbox__cerrar,
.lightbox__nav {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radio-full);
    background: rgba(255, 255, 255, 0.12);
    color: var(--blanco);
    transition: background var(--transicion);
}

.lightbox__cerrar:hover,
.lightbox__nav:hover {
    background: var(--rosa-boton);
}

.lightbox__cerrar {
    top: var(--e-4);
    right: var(--e-4);
}

.lightbox__nav--anterior { left: var(--e-4); }
.lightbox__nav--siguiente { right: var(--e-4); }

.lightbox__contador {
    position: absolute;
    bottom: var(--e-4);
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--texto-xs);
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 700px) {
    .lightbox {
        padding: var(--e-4) var(--e-2);
    }

    .lightbox__nav {
        width: 40px;
        height: 40px;
    }

    .lightbox__nav--anterior { left: var(--e-2); }
    .lightbox__nav--siguiente { right: var(--e-2); }
}

/* ==============================================================
   Videos
   ============================================================== */

.video + .video {
    margin-top: var(--e-5);
}

.video__marco {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radio-lg);
    background: var(--tinta);
    cursor: pointer;
}

.video__miniatura {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease, filter var(--transicion);
}

.video__miniatura--vacia {
    background:
        radial-gradient(circle at 30% 30%, rgba(239, 46, 90, 0.35), transparent 55%),
        var(--tinta);
}

.video__marco:hover .video__miniatura {
    transform: scale(1.03);
    filter: brightness(0.85);
}

.video__reproducir {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    padding-left: 4px;
    border-radius: var(--radio-full);
    background: var(--rosa-boton);
    color: var(--blanco);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    transition: transform var(--transicion), background var(--transicion);
}

.video__marco:hover .video__reproducir {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--rosa);
}

.video__aviso {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--e-2) var(--e-4);
    font-size: var(--texto-xs);
    color: rgba(255, 255, 255, 0.75);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    text-align: center;
}

.video__iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.video__marco.is-reproduciendo {
    cursor: default;
}

.video__titulo {
    margin-top: var(--e-3);
    font-size: var(--texto-sm);
    font-weight: 700;
    color: var(--tinta);
}

/* ---- Video que solo se enlaza ---- */

.video__externo {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    padding: var(--e-4) var(--e-5);
    background: var(--fondo-alt);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    text-decoration: none;
    color: var(--tinta);
    transition: border-color var(--transicion), background var(--transicion);
}

.video__externo:hover {
    border-color: var(--rosa);
    background: var(--rosa-suave);
    color: var(--tinta);
}

.video__externo-icono {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radio-full);
    background: var(--blanco);
    border: 1px solid var(--borde);
    color: var(--rosa-texto);
}

.video__externo-titulo {
    display: block;
    font-weight: 700;
}

.video__externo-nota {
    display: block;
    font-size: var(--texto-xs);
    color: var(--gris);
}

.video__externo-flecha {
    margin-left: auto;
    font-size: var(--texto-xl);
    color: var(--rosa-texto);
}

/* ==============================================================
   Paginación pública
   ============================================================== */

.paginacion-publica {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--e-3);
    margin-top: var(--e-7);
}

.paginacion-publica__enlace {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 0.6rem 1.2rem;
    font-size: var(--texto-sm);
    font-weight: 700;
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-full);
    text-decoration: none;
}

.paginacion-publica__enlace:hover {
    border-color: var(--rosa);
    color: var(--rosa-texto);
}

.paginacion-publica__numeros {
    display: flex;
    align-items: center;
    gap: var(--e-1);
}

.paginacion-publica__numero {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--e-2);
    font-size: var(--texto-sm);
    font-weight: 700;
    color: var(--tinta-suave);
    border-radius: var(--radio-full);
    text-decoration: none;
}

.paginacion-publica__numero:hover {
    background: var(--borde-suave);
    color: var(--rosa-texto);
}

.paginacion-publica__numero.is-activo {
    background: var(--rosa-boton);
    color: var(--blanco);
}

/* ==============================================================
   Noticias — disposición con lateral
   ============================================================== */

.noticias-disposicion {
    display: grid;
    gap: var(--e-6);
    align-items: start;
}

@media (min-width: 960px) {
    .noticias-disposicion {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: var(--e-7);
    }
}

.rejilla--noticias {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.noticias-lateral {
    display: flex;
    flex-direction: column;
    gap: var(--e-5);
}

.lateral-bloque {
    padding: var(--e-5);
    background: var(--verde);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
}

.lateral-bloque__titulo {
    margin-bottom: var(--e-4);
    font-size: var(--texto-base);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.lateral-lista {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lateral-lista__enlace {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    border-radius: var(--radio-sm);
    color: var(--tinta-suave);
    text-decoration: none;
    font-size: var(--texto-sm);
    transition: background var(--transicion), color var(--transicion);
}

.lateral-lista__enlace:hover {
    background: var(--blanco);
    color: var(--rosa-texto);
}

.lateral-lista__enlace.is-activo {
    background: var(--blanco);
    color: var(--rosa-texto);
    font-weight: 700;
}

.lateral-lista__punto {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: var(--radio-full);
}

.lateral-lista__conteo {
    margin-left: auto;
    font-size: var(--texto-xs);
    color: var(--gris);
}

/* ==============================================================
   Lateral de noticias en color de marca

   Solo el de noticias: la página de contacto reutiliza .lateral-bloque
   para sus datos y ahí el fondo claro se queda como está.

   Reglas de contraste que sostienen este bloque, sobre --lateral
   (#e02350 de fábrica):
     · blanco            → 4,64:1   sirve para todo el texto
     · amarillo #fff10f  → 3,94:1   solo texto grande (≥18,66 px en
                                    negrita) o elementos decorativos
     · tinta sobre amarillo → 15,41:1
   ============================================================== */

.noticias-lateral .lateral-bloque {
    background: var(--lateral);
    border-color: transparent;
    color: var(--blanco);
}

/* El título sube a 1,2 rem (19,2 px) en negrita para poder ir en
   amarillo: por debajo de 18,66 px el amarillo no daría el contraste. */
.noticias-lateral .lateral-bloque__titulo {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--amarillo);
}

.noticias-lateral .lateral-lista__enlace {
    color: var(--blanco);
}

/* El estado activo y el hover pasan a amarillo con texto oscuro, que es
   la combinación de más contraste de toda la marca. */
.noticias-lateral .lateral-lista__enlace:hover,
.noticias-lateral .lateral-lista__enlace.is-activo {
    background: var(--amarillo);
    color: var(--tinta);
}

.noticias-lateral .lateral-lista__conteo {
    color: var(--blanco);
}

.noticias-lateral .lateral-lista__enlace:hover .lateral-lista__conteo,
.noticias-lateral .lateral-lista__enlace.is-activo .lateral-lista__conteo {
    color: var(--tinta);
}

/* Las fichas de etiqueta conservan su caja clara con texto oscuro. Se
   probó ponerlas translúcidas sobre el rosa, pero un blanco al 16 %
   sobre este fondo da un rosa claro donde el texto blanco baja a 3,9:1
   y las etiquetas miden 12 px. La ficha aplicada va en amarillo. */
.noticias-lateral .etiqueta--rosa {
    background: var(--amarillo);
    color: var(--tinta);
}

/* El buscador conserva su caja blanca: es un campo de formulario y se
   tiene que leer como tal. */
.noticias-lateral .buscador-publico {
    border-color: transparent;
}

/* El campo hereda el color del bloque, que ahora es blanco: sin esto se
   escribiría en blanco sobre la caja blanca y no se vería nada. */
.noticias-lateral .buscador-publico input {
    color: var(--tinta);
}

.noticias-lateral .buscador-publico input::placeholder {
    color: var(--gris);
    opacity: 1;
}

.noticias-lateral .buscador-publico button {
    color: var(--rosa-texto);
}

.noticias-lateral .buscador-publico:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

/* El foco global es rosa y sobre este fondo no se vería */
.noticias-lateral :focus-visible {
    outline-color: var(--blanco);
}

.nube-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}

/* ---- Buscador ---- */

.buscador-publico {
    display: flex;
    align-items: center;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-full);
    overflow: hidden;
}

.buscador-publico:focus-within {
    border-color: var(--rosa);
    box-shadow: 0 0 0 3px var(--rosa-suave);
}

.buscador-publico input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0 0.6rem 1rem;
    border: none;
    background: transparent;
    font-size: var(--texto-sm);
}

.buscador-publico input:focus {
    outline: none;
}

.buscador-publico button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    color: var(--gris);
    transition: color var(--transicion);
}

.buscador-publico button:hover {
    color: var(--rosa-texto);
}

/* ==============================================================
   Ficha de la noticia
   ============================================================== */

.articulo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
    margin-top: var(--e-4);
    font-size: var(--texto-sm);
    color: var(--gris);
}

.articulo-imagen {
    margin: 0 0 var(--e-6);
}

.articulo-imagen img {
    width: 100%;
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-md);
}

.articulo-imagen figcaption {
    margin-top: var(--e-3);
    font-size: var(--texto-sm);
    color: var(--gris);
    text-align: center;
}

.articulo-entradilla {
    margin-bottom: var(--e-5);
    padding-left: var(--e-4);
    border-left: 4px solid var(--amarillo);
    font-size: var(--texto-xl);
    line-height: 1.6;
    color: var(--tinta);
    font-weight: 600;
}

.articulo-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-top: var(--e-7);
    padding-top: var(--e-5);
    border-top: 1px solid var(--borde);
}

.articulo-compartir {
    margin-top: var(--e-6);
    padding-top: var(--e-5);
    border-top: 1px solid var(--borde);
}

.articulo-compartir__titulo {
    margin-bottom: var(--e-3);
    font-size: var(--texto-base);
}

.articulo-compartir__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}


/* ==============================================================
   Contacto
   ============================================================== */

.contacto-disposicion {
    display: grid;
    gap: var(--e-6);
    align-items: start;
}

/* Una columna de rejilla nunca baja del contenido más ancho que contiene.
   Sin esto, el correo largo del lateral (una sola «palabra» de 264 px)
   fijaba el ancho mínimo de la columna y empujaba también al formulario,
   que terminaba midiendo 366 px dentro de una ventana de 360. */
.contacto-disposicion > * {
    min-width: 0;
}

@media (min-width: 960px) {
    .contacto-disposicion {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--e-7);
    }
}

.panel-contacto {
    padding: var(--e-6);
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
}

@media (max-width: 600px) {
    .panel-contacto {
        padding: var(--e-4);
    }
}

/* La autorización de datos se separa del resto del formulario: es una
   decisión distinta de «rellenar un dato» y conviene que se lea como tal. */
.panel-contacto .campo--autorizacion {
    margin-top: var(--e-5);
    padding: var(--e-4);
    background: var(--fondo-alt);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.panel-contacto .campo--autorizacion .casilla__texto {
    font-weight: 600;
    color: var(--tinta);
}

.panel-contacto .campo--autorizacion .casilla__descripcion {
    font-weight: 400;
    line-height: 1.55;
}

.panel-contacto__enviar {
    margin-top: var(--e-5);
}

/* Con el dedo, un botón a todo lo ancho es más fácil de acertar que uno
   alineado a la izquierda que ocupa un tercio del renglón. */
@media (max-width: 600px) {
    .panel-contacto__enviar {
        width: 100%;
    }
}

/* El campo trampa: fuera de la vista y del recorrido con teclado, pero
   presente en el HTML para que los programas automáticos lo rellenen. */
.campo-trampa {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.contacto-datos {
    display: flex;
    flex-direction: column;
    gap: var(--e-5);
}

.contacto-lista {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
}

.contacto-lista li {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
}

/* Los correos y las direcciones no tienen espacios donde partirse: se les
   permite cortar dentro de la palabra antes que desbordar la tarjeta. */
.contacto-lista li > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.contacto-lista__icono {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radio-full);
    background: var(--blanco);
    border: 1px solid var(--borde);
    color: var(--rosa-texto);
}

.contacto-lista strong {
    display: block;
    font-size: var(--texto-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gris);
}

.contacto-lista a {
    color: var(--tinta);
    text-decoration: none;
    font-weight: 600;
}

.contacto-lista a:hover {
    color: var(--rosa-texto);
    text-decoration: underline;
}

.contacto-redes {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
}

.contacto-red {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3);
    border-radius: var(--radio);
    background: var(--blanco);
    border: 1px solid var(--borde);
    color: var(--tinta);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--texto-sm);
    transition: border-color var(--transicion), color var(--transicion);
}

.contacto-red:hover {
    border-color: var(--rosa);
    color: var(--rosa-texto);
}

/* ---- Mapa ---- */

.mapa {
    width: 100%;
    height: clamp(300px, 42vh, 460px);
    background: var(--verde);
    overflow: hidden;
}

.mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==============================================================
   Objetivos táctiles

   Solo se aplican donde se navega con el dedo. En un ratón el diseño
   queda igual; con el dedo, los enlaces medían entre 20 y 26 px de alto
   y quedaban por debajo del mínimo cómodo (unos 40 px).
   ============================================================== */

@media (pointer: coarse) {

    /* Migas de pan: el área sensible crece hacia arriba y abajo sin mover
       el texto de sitio, porque el renglón ya reserva ese espacio. */
    .cabecera-pagina__ruta {
        gap: var(--e-3);
    }

    .cabecera-pagina__ruta a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    .cabecera-pagina__ruta,
    .cabecera-pagina__ruta li {
        min-height: 40px;
    }

    /* Enlaces del pie: cada uno ocupa su propio renglón alto */
    .pie__lista a,
    .pie__dato a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    .pie__lista {
        gap: 0;
    }

    /* Fichas de etiquetas y filtros */
    .etiqueta,
    .filtro-chip {
        min-height: 40px;
        padding-inline: var(--e-4);
    }

    /* La casilla de autorización: el área sensible es toda la etiqueta */
    .casilla {
        padding-block: var(--e-2);
    }
}