/*
 * Estilos exclusivos de la portada pública (/index.php).
 *
 * Carga: <link rel="stylesheet" href="/assets/css/portada.css"> al
 * principio de index.php, después de base.css, para que pueda
 * sobrescribir lo que sea necesario solo en la home.
 *
 * Decisiones:
 *  - Hero con imagen real de fondo + capa oscura semi-transparente
 *    para garantizar contraste 4.5:1 (WCAG AA) del texto blanco sea
 *    cual sea la zona de la imagen.
 *  - Cabeceras de sección con línea de acento y CTA "Ver más" al lado.
 *  - Cards modernizadas: más aire, sombras suaves, hover sutil.
 *  - Animaciones de entrada respetan prefers-reduced-motion: si está
 *    activo, todo aparece estático sin transiciones.
 *
 * Lo que NO está aquí: estilos compartidos con otras páginas
 * (.tarjeta-noticia, .proximo-tarjeta, .comite-tarjeta, etc.). Esos
 * están en base.css y se reusan. Aquí solo lo específico de la home.
 */

/* Estado vacío de un bloque de la portada (cuando aún no hay noticias o
   eventos que mostrar). Mantiene el bloque con presencia, sin dejar un
   hueco, hasta que haya contenido real. */
.portada-vacio {
    margin: 0;
    padding: var(--espacio-4);
    text-align: center;
    color: var(--color-texto-claro);
    background: var(--color-fondo);
    border: 1px dashed var(--color-borde);
    border-radius: var(--radio-borde);
    font-size: 1.05rem;
}


/* ====================================================================
   LA CJS-CNSE EN CIFRAS
   Franja compacta bajo el hero. Fondo claro que contrasta con el hero
   oscuro de arriba; números en teal (contraste AA de sobra sobre claro)
   con un pequeño acento naranja decorativo.
   ==================================================================== */
.portada-cifras {
    background: var(--color-fondo-alterno);
    border-bottom: 1px solid var(--color-borde);
    /* Padding vertical contenido para no alargar el scroll. */
    padding: clamp(1.5rem, 4vw, 2.5rem) var(--espacio-3);
}

.portada-cifras__inner {
    max-width: 75rem;
    margin: 0 auto;
}

/* Título discreto tipo "etiqueta de sección": no roba protagonismo a
   los números y ocupa poca altura. */
.portada-cifras__titulo {
    margin: 0 0 clamp(1rem, 3vw, 1.5rem);
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primario-claro);
}

.cifras-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Móvil: 2 columnas (2x2) para no crear una columna muy alta. */
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 3vw, 1.5rem);
}

/* A partir de tablet, las 4 cifras en una sola fila. */
@media (min-width: 720px) {
    .cifras-lista {
        grid-template-columns: repeat(4, 1fr);
    }
    /* Separadores verticales finos entre cifras (solo en fila de 4). */
    .cifra + .cifra {
        border-left: 1px solid var(--color-borde);
    }
}

.cifra {
    text-align: center;
    padding: 0 0.5rem;
}

.cifra__numero {
    display: block;
    font-family: var(--fuente-titulos);
    font-size: clamp(2rem, 6vw, 3.25rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-primario);
    font-variant-numeric: tabular-nums; /* dígitos de ancho fijo: no "bailan" al animar */
}

/* Pequeña barra naranja decorativa bajo cada número: aporta el color de
   marca sin usarlo como texto (el naranja no cumple contraste como texto
   sobre fondo claro, pero como elemento decorativo es perfecto). */
.cifra__numero::after {
    content: "";
    display: block;
    width: 32px;
    height: 3px;
    margin: 0.6rem auto 0.5rem;
    background: var(--color-acento);
    border-radius: 2px;
}

.cifra__etiqueta {
    display: block;
    color: var(--color-texto-claro);
    font-size: 0.9rem;
    line-height: 1.3;
    max-width: 12rem;
    margin: 0 auto;
}


/* ====================================================================
   HERO
   ==================================================================== */

/* Sobrescribe el .hero genérico de base.css con la versión "portada
   de revista": imagen de fondo + capa oscura para contraste +
   tipografía grande. */
/* Hero ocupa siempre toda la pantalla visible al cargar, menos lo que
   ocupa el header sticky. Uso 100svh (small viewport height) en lugar
   de 100vh para que en móvil con barra de navegación dinámica el hero
   no quede tapado al hacer scroll. Fallback a 100vh para navegadores
   sin soporte de svh (caen razonablemente: el hero queda un pelín más
   alto que la pantalla, no peor experiencia). */
.portada-hero {
    position: relative;
    isolation: isolate;
    margin: 0;
    padding: clamp(3rem, 8vw, 5rem) var(--espacio-3);
    min-height: calc(100vh - var(--alto-header));
    min-height: calc(100svh - var(--alto-header));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    /* Color sólido de reserva DEBAJO de la imagen: (1) si la imagen no
       carga, el texto blanco sigue sobre un fondo oscuro legible; (2) los
       verificadores automáticos de contraste no evalúan imágenes ni la
       capa ::before, así que sin este color leerían "fondo transparente"
       y marcarían un falso "sin contraste". Con él miden blanco sobre
       teal oscuro y el contraste real (que ya cumple AA) queda verificado. */
    background-color: var(--color-primario);
    background-image: url('/assets/img/CJS-CNSE_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Capa oscura por encima de la imagen para garantizar el contraste
   del texto. Linear-gradient en lugar de color plano para añadir un
   sutil degradado de "atardecer" en vez de un velo uniforme. */
.portada-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        135deg,
        rgba(5, 65, 80, 0.82) 0%,
        rgba(5, 65, 80, 0.66) 60%,
        rgba(10, 106, 130, 0.62) 100%
    );
}

.portada-hero__contenido {
    max-width: 48rem;
    margin: 0 auto;
}

.portada-hero__titulo {
    margin: 0 0 var(--espacio-2);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.portada-hero__subtitulo {
    margin: 0 auto var(--espacio-3);
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.55;
    max-width: 36rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.portada-hero__ctas {
    display: flex;
    justify-content: center;
    gap: var(--espacio-2);
    flex-wrap: wrap;
}

/* CTAs del hero: tamaño táctil cómodo (>= 48 px de alto), borde
   blanco que contrasta con la imagen sea cual sea, y variante
   "naranja" para el principal. */
.portada-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radio-borde);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    border: 2px solid #fff;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.portada-hero__cta--principal {
    background: var(--color-acento);
    border-color: var(--color-acento);
    color: #1a1a1a; /* contraste 7:1 sobre #f8952a */
}

.portada-hero__cta--principal:hover,
.portada-hero__cta--principal:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--color-primario);
    transform: translateY(-2px);
}

.portada-hero__cta--secundario {
    background: transparent;
    color: #fff;
}

.portada-hero__cta--secundario:hover,
.portada-hero__cta--secundario:focus-visible {
    background: #fff;
    color: var(--color-primario);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .portada-hero__cta { transition: none; }
    .portada-hero__cta:hover,
    .portada-hero__cta:focus-visible { transform: none; }
}


/* ====================================================================
   INDICADOR DE SCROLL
   ==================================================================== */

/* Flecha animada en la parte inferior del hero: "hay más abajo".
   Es un ancla a #tras-hero (el primer bloque de contenido tras el
   hero) para que también sirva como atajo accesible por teclado.
   El área táctil (44×44 px por WCAG 2.5.8) la garantiza el propio
   <a> con su min-width/min-height, aunque visualmente solo se ve
   la flecha rebotando.

   La animación tiene DOS niveles superpuestos:
    - .portada-hero__scroll        → bote suave del contenedor
    - .portada-hero__scroll-flecha → bote más rápido y grande de la
                                     flecha en sí
   Los dos juntos dan sensación de "algo se mueve claramente" sin
   ser molesto. Respetan prefers-reduced-motion. */
.portada-hero__scroll {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    color: #fff;
    text-decoration: none;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
    z-index: 1;
}

.portada-hero__scroll:hover,
.portada-hero__scroll:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    outline: none;
}

/* La flecha por sí misma: grande y con "bote" pronunciado. 1s de
   ciclo (más rápido que antes), 12 px de recorrido y un salto rápido
   con retorno lento simulando gravedad. */
.portada-hero__scroll-flecha {
    font-size: 1.75rem;
    line-height: 1;
    display: inline-block;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    animation: portada-hero-scroll-bote 1s ease-in-out infinite;
}

@keyframes portada-hero-scroll-bote {
    0%   { transform: translateY(-4px); opacity: 0.85; }
    40%  { transform: translateY(10px); opacity: 1; }
    60%  { transform: translateY(10px); opacity: 1; }
    100% { transform: translateY(-4px); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .portada-hero__scroll,
    .portada-hero__scroll-flecha {
        animation: none;
        transition: none;
    }
}

/* En pantallas cortas (móvil apaisado, portátil pequeño) el
   indicador puede solaparse con el CTA. Bajamos algo la posición y
   reducimos el tamaño de la flecha. */
@media (max-height: 640px) {
    .portada-hero__scroll {
        bottom: 0.5rem;
    }
    .portada-hero__scroll-flecha {
        font-size: 1.35rem;
    }
}


/* ====================================================================
   CABECERAS DE SECCIÓN
   ==================================================================== */

/* Cabecera estándar de cada bloque (Equipo, Próximos eventos, etc.):
   título grande con línea de acento a la izquierda + CTA "Ver más"
   al lado. Reemplaza los headers heterogéneos que tenía cada bloque
   por uno unificado, para que la portada se sienta como una unidad.

   Sin max-width ni padding lateral propio: los pone el wrapper
   .portada-bloque__inner de fuera. Si se dejasen aquí, se acumularían
   con los del inner y el contenido saldría descentrado a la izquierda
   (bug que había en la primera versión). */
.portada-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--espacio-2);
    flex-wrap: wrap;
    margin: 0 0 var(--espacio-3);
}

.portada-cabecera__titulo {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--color-primario);
    position: relative;
    padding-left: 0.85rem;
}

/* Línea de acento naranja a la izquierda del título — un toque
   editorial que ata visualmente las secciones. */
.portada-cabecera__titulo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 4px;
    background: var(--color-acento);
    border-radius: 2px;
}

.portada-cabecera__cta {
    flex-shrink: 0;
}


/* ====================================================================
   BLOQUES DE LA PORTADA — contenedor común
   ==================================================================== */

/* Ritmo vertical entre secciones de la portada. Responsive: ~40 px en
   móvil y hasta 64 px en escritorio, para que respiren sin dejar
   huecos enormes. Si algún día se quiere MÁS o MENOS aire entre TODAS
   las secciones a la vez, se cambia SOLO este valor. */
:root {
    --ritmo-seccion: clamp(2.5rem, 5vw, 4rem);
}

/* Patrón "bloque de portada" — dos capas:

   .portada-bloque         → capa exterior, siempre a todo el ancho.
                             Su PADDING vertical es lo que separa una
                             sección de la siguiente. Uso padding y no
                             margin a propósito: los márgenes verticales
                             de dos bloques contiguos "colapsan" entre sí
                             y el hueco real acababa siendo la mitad de
                             lo esperado (por eso antes se veía todo
                             pegado). El padding no colapsa: el aire es
                             real y predecible.

   .portada-bloque__inner  → capa interior, con max-width para que el
                             contenido quede centrado (margin: 0 auto) y
                             no se estire en pantallas anchas. Su padding
                             lateral da aire respecto a los bordes de la
                             ventana en pantallas pequeñas.

   Los <section> ya NO llevan las clases antiguas (.ultimas-noticias,
   .proximos-eventos, .comite-portada): esas traían su propio max-width
   y margen desde base.css / agenda.css y competían con este sistema,
   ganando por orden de carga. Ahora el espaciado y el centrado los
   controla SOLO este par de clases, sin peleas de especificidad. */
.portada-bloque {
    padding-top: var(--ritmo-seccion);
    padding-bottom: var(--ritmo-seccion);
}

/* Bloque con fondo alterno (gris muy claro): "Próximos eventos". El
   fondo llega de borde a borde de la ventana porque .portada-bloque no
   tiene max-width; el contenido sigue centrado gracias al __inner. El
   padding vertical heredado de .portada-bloque hace de aire interior
   del gris. */
.portada-bloque--tono {
    background: var(--color-fondo-alterno);
}

.portada-bloque__inner {
    max-width: 75rem;
    margin: 0 auto;
    padding-left: var(--espacio-3);
    padding-right: var(--espacio-3);
}


/* ====================================================================
   ÚLTIMAS NOTICIAS / PRÓXIMOS EVENTOS
   ==================================================================== */

/* El grid de tarjetas va directamente dentro de .portada-bloque__inner,
   que ya aporta el max-width, el centrado y el padding lateral. Aquí NO
   se repiten: si se repitieran, las tarjetas quedarían más metidas que
   la cabecera y se vería desalineado (bug que había antes). Esta clase
   solo sirve de "gancho" para el efecto de elevación de las tarjetas. */

/* Sutil elevación al hacer hover sobre las tarjetas, para que el
   cursor sienta interactividad. Sin sombra agresiva. */
.portada-grid .tarjeta-noticia,
.portada-grid .proximo-tarjeta {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.portada-grid .tarjeta-noticia:hover,
.portada-grid .proximo-tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .portada-grid .tarjeta-noticia,
    .portada-grid .proximo-tarjeta { transition: none; }
    .portada-grid .tarjeta-noticia:hover,
    .portada-grid .proximo-tarjeta:hover { transform: none; }
}

/* Cards de "Próximos eventos" con la MISMA altura dentro de cada fila,
   independientemente de cuánto texto tenga cada una. El elemento de la
   rejilla es el <li>; lo hacemos flex para que la tarjeta (el <a> de
   dentro) se estire a toda la altura de la fila. Como la tarjeta ya es
   flex en columna con el botón "Ver detalle" empujado abajo
   (margin-top: auto en agenda.css), el resultado es que todos los
   botones quedan alineados en la base. */
.proximos-eventos__tarjetas > li {
    display: flex;
}

.proximos-eventos__tarjetas > li > .proximo-tarjeta {
    width: 100%;
}


/* ====================================================================
   EVENTO DESTACADO — bloque opcional entre hero y noticias
   ==================================================================== */

/* Layout base:
   - Sin imagen de fondo: fondo con degradado sutil (teal claro) y
     bloque a dos columnas cuando hay imagen destacada.
   - Con imagen de fondo: la imagen ocupa todo el bloque como
     background-image (definido inline en el HTML). Añadimos una capa
     oscura por encima con ::before para asegurar contraste 4.5:1 del
     texto blanco.
   El grid se apila en móvil para que texto e imagen queden legibles. */
.destacado {
    background: linear-gradient(135deg,
        rgba(5, 65, 80, 0.06) 0%,
        rgba(248, 149, 42, 0.08) 100%);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.destacado--con-fondo {
    /* Color sólido de reserva bajo la imagen (misma razón que en el hero:
       robustez si la imagen falla + que los verificadores midan el texto
       blanco sobre teal oscuro y no sobre el body blanco). */
    background-color: var(--color-primario);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

/* Capa oscura solo cuando hay imagen de fondo: garantiza contraste
   del texto blanco sea cual sea la imagen que se ponga (WCAG AA). */
.destacado--con-fondo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg,
        rgba(5, 65, 80, 0.78) 0%,
        rgba(5, 65, 80, 0.58) 100%);
}

.destacado__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--espacio-4);
    align-items: center;
    min-height: 260px;
}

/* Si NO hay imagen destacada, el grid pasa a una sola columna para
   que el texto no quede pegado al lateral izquierdo. */
.destacado__inner:has(.destacado__texto:only-child) {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 44rem;
}

@media (max-width: 760px) {
    .destacado__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.destacado__titulo {
    margin: 0 0 var(--espacio-2);
    color: var(--color-primario);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.15;
}

.destacado--con-fondo .destacado__titulo {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.destacado__subtitulo {
    margin: 0 0 var(--espacio-3);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.55;
    color: var(--color-texto);
}

.destacado--con-fondo .destacado__subtitulo {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.destacado__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
}

/* Sobre fondo oscuro (con imagen), el botón principal ya cumple
   contraste porque es naranja sobre gradiente teal. */

.destacado__imagen {
    justify-self: end;
    /* Contenedor con proporción para que la imagen no se estire; el
       object-fit contain permite ver el póster completo aunque tenga
       proporción rara. */
    width: 100%;
    max-width: 320px;
    aspect-ratio: 4 / 5;
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radio-borde);
    overflow: hidden;
}

.destacado__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 760px) {
    .destacado__imagen {
        justify-self: center;
        max-width: 240px;
    }
}


/* ====================================================================
   CTA DE TRANSPARENCIA (sobre la versión actual)
   ==================================================================== */

/* Refinar el banner existente: más altura visual, icono más grande,
   color de fondo cálido para destacar como "callout". */
.portada-transparencia.cta-transparencia {
    /* Anulamos el margin y el max-width propios que trae .cta-transparencia
       en base.css: aquí el espaciado y el ancho los da el sistema de
       .portada-bloque / __inner, para que el banner respete el mismo
       ritmo vertical que el resto de secciones. */
    margin: 0;
    max-width: none;
    /* background-color sólido además del gradiente: el color plano es el
       que leen los verificadores de contraste (no evalúan gradientes),
       de modo que miden el texto blanco sobre teal oscuro correctamente. */
    background-color: var(--color-primario);
    background-image: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-claro) 100%);
    color: #fff;
    border: 0;
}

.portada-transparencia.cta-transparencia h2,
.portada-transparencia.cta-transparencia p {
    color: #fff;
}

.portada-transparencia .cta-transparencia__icono {
    color: var(--color-acento);
    font-size: 2.5rem;
}