/* ======= SETEGUA - Shared Styles ======= */

/* ======= Identidad =======
   Un solo sitio define paleta y tipografias: los tokens de Tailwind apuntan a
   estas variables, asi que cambiarlas aqui cambia el sitio entero.
   Los valores van en canales RGB sueltos para que Tailwind pueda aplicarles
   opacidad (bg-brand-navy/50 y similares). */
:root {
    /* Paleta institucional 2027 (Resumen Ejecutivo del proyecto):
       AZUL #010A72, BLANCO #FFFFFF, AMARILLO #FADF1A. */
    --marca-navy: 1 10 114;          /* #010a72  azul institucional */
    --marca-navy-claro: 26 37 163;   /* #1a25a3  el mismo azul aclarado, para
                                        degradados y fondos secundarios */
    --marca-oro: 250 223 26;         /* #fadf1a  amarillo institucional */
    --marca-oro-hover: 230 203 10;   /* #e6cb0a  un punto mas hondo, para que el
                                        boton amarillo acuse el puntero */
    /* El amarillo institucional da 1.34:1 sobre blanco: es ilegible como texto
       en fondo claro, y el propio documento lo define como "acento y resaltador
       de ideas clave, no gran masa permanente". Sobre azul luce entero (12.14:1);
       sobre blanco se usa esta entintada, que llega a 6.07:1. */
    --marca-oro-tinta: 111 99 0;     /* #6f6300 */
    --marca-claro: 245 246 252;      /* #f5f6fc  blanco con una gota del azul */
    --fuente-display: 'Cormorant Garamond', Georgia, serif;
    --fuente-sans: 'DM Sans', system-ui, sans-serif;
}

/* Typography */
.font-display { font-family: var(--fuente-display); }

/* ======= Palabra resaltada dentro de un titulo =======
   El recurso del prototipo: dentro de un titular, la palabra que carga el
   mensaje se pone en cursiva y se tine de amarillo. No cambia de tipografia
   -sigue siendo la display del sitio-, solo de corte y de color: mezclar dos
   serif dentro de un mismo renglon se leeria como un descuadre, porque cada una
   tiene su propia altura de x.

   El amarillo institucional es "acento y resaltador de ideas clave", y aqui
   siempre cae sobre azul, donde da 12.14:1. No usarlo sobre fondo claro.

   Va igual en el hero de inicio, en el de programas y en el de nosotros: es lo
   que mantiene los tres encabezados reconocibles como uno solo. */
.acento-titulo {
    font-style: italic;
    /* La cursiva de Cormorant esta cargada hasta el peso 500; pedir 600 haria
       que el navegador la inclinara a mano y se veria mas basta. */
    font-weight: 500;
    color: rgb(var(--marca-oro));
}

/* ======= Hero interior (programas.html y nosotros.html) =======
   Foto velada sobre el navy de marca. Va en tres capas y no en un solo
   background-image apilado, porque la foto tiene que poder moverse (el
   acercamiento lento) sin arrastrar consigo el velo, que debe quedarse quieto.

   El background-color queda de respaldo: si la imagen no carga, el hero sigue
   siendo navy solido en vez de transparente. Sin background-attachment: fixed,
   que provoca saltos de scroll en iOS. */
.hero-gradient {
    position: relative;
    /* Crea contexto de apilado propio: asi las dos capas con z-index negativo
       quedan detras del contenido de la seccion y no detras de la pagina. */
    isolation: isolate;
    overflow: hidden;
    background-color: #010a72;
}

.hero-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('../Image/BachTeologia.jpg');
    background-size: cover;
    background-position: center;
    /* El mismo acercamiento lento del carrusel de inicio, para que los tres
       heros del sitio se muevan igual. Termina en su sitio (forwards) y no se
       repite: un vaiven continuo distrae al leer. */
    transform: scale(1.09);
    animation: acercamiento-lento 14s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* El velo ya no es un tapado parejo: se aclara en el centro, donde vive el
   texto, y se cierra hacia los bordes. Deja ver la fotografia sin soltar el
   contraste: en el punto mas claro el blanco sigue dando 7.9:1 y el gris claro
   de la entrada, 6.3:1. */
.hero-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(130% 100% at 50% 50%,
            rgb(var(--marca-navy) / 0.70) 0%,
            rgb(var(--marca-navy) / 0.92) 100%);
}

@keyframes acercamiento-lento {
    from { transform: scale(1.09); }
    to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-gradient::before { animation: none; transform: none; }
}

/* ======= Carrusel del hero =======
   Cinco mensajes, cada uno con su foto a sangre completa. Las diapositivas van
   en fila dentro de una pista que se desplaza de lado: la que entra empuja a la
   anterior, en vez de cruzarse por opacidad. */
.hero-carrusel {
    position: relative;
    /* Alto fijo y no dependiente del contenido: si midiera lo que mide cada
       mensaje, la seccion entera daria un salto en cada cambio y arrastraria
       consigo a las tarjetas que van debajo. */
    min-height: clamp(36rem, 84vh, 48rem);
    overflow: hidden;
    background-color: rgb(var(--marca-navy));
}
@media (max-width: 1023px) {
    /* En vertical el texto ocupa lo mismo pero el ancho es un tercio, de modo
       que sin altura extra la franja de foto limpia se queda en un filo. */
    .hero-carrusel { min-height: clamp(36rem, 86vh, 48rem); }
}

.hero-carrusel__marco {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-carrusel__pista {
    display: flex;
    height: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.hero-carrusel__diapo {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    /* La foto entra escalada y se sale de la diapositiva por los cuatro lados.
       Sin este recorte, lo que sobresale de la diapositiva vecina se asoma por
       el canto de la pantalla, y ademas sin su velo encima: se veia una franja
       de fotografia cruda en el borde derecho. */
    overflow: hidden;
}

/* La foto entra un punto mas grande y se va asentando mientras el mensaje esta
   a la vista: el hero deja de ser una imagen quieta sin que nada se mueva lo
   bastante rapido como para estorbar la lectura.
   Solo la diapositiva activa lleva transicion; las demas vuelven al tamano de
   partida de golpe, para que el efecto empiece de cero cada vez que les toca. */
.hero-carrusel__foto {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.08);
    will-change: transform;
}
.hero-carrusel__diapo.es-activa .hero-carrusel__foto {
    transform: scale(1);
    transition: transform 9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* El velo se abre hacia la derecha: denso donde vive el texto y tenue donde se
   quiere ver la foto. Es lo que sostiene el contraste, de modo que cambiar una
   foto nunca puede dejar un titulo ilegible.

   Ya no llega a azul solido en ningun punto, y la rampa es la del prototipo: el
   lado izquierdo deja de leerse como un bloque de color plano y la fotografia se
   ve tambien detras del texto.

   Medido sobre las cinco fotos, con el texto oculto y tomando el pixel mas claro
   de cada caja, el peor caso da 5.94:1 en el titulo y 5.14:1 en la entrada. Si
   se cambia una foto por otra mas clara conviene volver a medirlo: aflojar mas
   esta rampa es lo que primero tumbaria la entrada por debajo de 4.5:1. */
.hero-carrusel__velo {
    position: absolute;
    inset: 0;
    background:
        /* Misma curva que el prototipo (0.95 al 0%, 0.6 al 45%, 0.15 al 80%),
           con el arranque un punto mas bajo: nuestro azul institucional esta
           mas saturado que el pizarra del prototipo, asi que a igual opacidad
           se lee mas como un bloque de color y menos como foto oscurecida. */
        linear-gradient(to right,
            rgb(var(--marca-navy) / 0.9) 0%,
            rgb(var(--marca-navy) / 0.6) 45%,
            rgb(var(--marca-navy) / 0.15) 80%,
            rgb(var(--marca-navy) / 0) 100%);
}

/* En movil el texto ocupa todo el ancho, de modo que el degradado no puede ir
   de lado: la ultima palabra de cada renglon caeria sobre la parte clara de la
   foto. Se aplica la misma idea girada 90 grados, que es lo que corresponde a
   una pantalla vertical: limpio arriba, solido abajo donde vive el texto. */
@media (max-width: 1023px) {
    .hero-carrusel__velo {
        background:
            /* Se afloja igual que el de lado: el tope baja de 0.94 a 0.8,
               que sobre una foto blanca sigue dando 10.9:1 al texto blanco. */
            linear-gradient(to bottom,
                rgb(var(--marca-navy) / 0) 0%,
                rgb(var(--marca-navy) / 0.05) 20%,
                rgb(var(--marca-navy) / 0.34) 30%,
                rgb(var(--marca-navy) / 0.68) 40%,
                rgb(var(--marca-navy) / 0.8) 52%);
    }

}

.hero-carrusel__texto {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 80rem;
    margin: 0 auto;
    /* El hueco de abajo reserva sitio para los botones y los puntos, que no
       viajan con la pista sino que se quedan fijos encima. */
    padding: 7rem 1.5rem 19rem;
    text-align: center;
}
@media (min-width: 1024px) {
    .hero-carrusel__texto {
        padding: 8rem 2rem 17.5rem;
        text-align: left;
    }
}

/* En movil el texto se pega abajo, junto a los botones. Centrado dejaba un
   hueco muerto entre el parrafo y los botones y subia el texto justo encima de
   la parte de la foto que se quiere dejar limpia.
   Va despues del bloque de arriba a proposito: tiene su misma especificidad,
   asi que si fuera antes no se aplicaria. */
@media (max-width: 1023px) {
    .hero-carrusel__texto { justify-content: flex-end; }
}

.hero-carrusel__titulo {
    /* Estrecho a proposito: el texto tiene que caber en el tramo solido del
       velo. Si se pasara al degradado, la ultima palabra de cada renglon
       quedaria sobre la foto sin nada que le sostenga el contraste. */
    max-width: 17ch;
    margin: 0 auto 1.25rem;
    font-family: var(--fuente-display);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 600;
    line-height: 1.1;
    color: #fff;
    text-wrap: balance;
    /* El velo ya no es un bloque opaco, asi que el texto lleva su propia sombra:
       le da un borde propio contra cualquier detalle claro de la fotografia. */
    text-shadow: 0 2px 12px rgb(1 10 114 / 0.55);
}
.hero-carrusel__entrada {
    max-width: 28rem;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.65;
    /* Con el velo aflojado, el gris de antes (#e5e7eb) caia a 4.57:1: pasa, pero
       tan al filo que cambiar una foto por otra mas clara lo tumbaria. Este gris
       casi blanco sube a 5.25:1 y deja margen. La jerarquia frente al titulo la
       llevan el cuerpo y la familia, no el color. */
    color: #f3f4f6;
    text-shadow: 0 1px 8px rgb(1 10 114 / 0.5);
}
@media (min-width: 1024px) {
    .hero-carrusel__titulo,
    .hero-carrusel__entrada { margin-left: 0; margin-right: 0; }
}

/* ---- Pie fijo: botones y mandos ---- */
.hero-carrusel__pie {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    max-width: 80rem;
    margin: 0 auto;
    /* El hueco de abajo deja los mandos por encima del panel de acceso, que
       sube 56px sobre el hero en movil y 112px desde lg, y si no los taparia. */
    padding: 0 1.5rem 5.5rem;
}
@media (min-width: 1024px) {
    .hero-carrusel__pie { padding: 0 2rem 8.5rem; }
}

.hero-carrusel__acciones {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}
@media (min-width: 640px) {
    .hero-carrusel__acciones { flex-direction: row; }
}
@media (min-width: 1024px) {
    .hero-carrusel__acciones { justify-content: flex-start; }
}

.hero-carrusel__mandos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}
/* Desde lg el velo deja limpia la mitad derecha, asi que los puntos se alinean
   con el texto: centrados caerian sobre la fotografia. */
@media (min-width: 1024px) {
    .hero-carrusel__mandos { justify-content: flex-start; }
}

.hero-carrusel__puntos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hero-carrusel__punto {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    background: rgb(255 255 255 / 0.35);
    border: 0;
    border-radius: 9999px;
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
}
.hero-carrusel__punto:hover { background: rgb(255 255 255 / 0.6); }
.hero-carrusel__punto[aria-current="true"] {
    width: 1.75rem;
    background: rgb(var(--marca-oro));
}
/* Los puntos miden 8px, muy por debajo del blanco de 24px que necesita un
   destino tactil: se les cuelga un area invisible alrededor. */
.hero-carrusel__punto::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.75rem;
    height: 2.75rem;
    transform: translate(-50%, -50%);
}

.hero-carrusel__pausa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: 0.5rem;
    font-size: 1rem;
    color: #fff;
    background: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.3);
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.hero-carrusel__pausa:hover {
    color: rgb(var(--marca-navy));
    background: rgb(var(--marca-oro));
}

@media (prefers-reduced-motion: reduce) {
    .hero-carrusel__pista,
    .hero-carrusel__punto { transition: none; }
    .hero-carrusel__diapo .hero-carrusel__foto {
        transform: none;
        transition: none;
    }
}

/* ======= Cristal =======
   Una sola definicion del efecto para todo el sitio: el panel de acceso de
   inicio, los sellos de los heros interiores y los sellos de las tarjetas beben
   de aqui, de modo que el vidrio se ve igual en las tres paginas.

   El fondo va a 0.72 y no a la transparencia casi total del prototipo: el
   difuminado promedia la fotografia, pero no la oscurece, y por debajo de esa
   opacidad el texto blanco baja de 4.5:1 sobre una foto clara. A 0.72 el peor
   caso queda en 7.5:1. */
.panel-cristal {
    background: rgb(var(--marca-navy) / 0.72);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    border: 1px solid rgb(255 255 255 / 0.18);
    box-shadow: 0 25px 50px -12px rgb(1 10 114 / 0.55);
}

/* Firefox con el difuminado desactivado, y navegadores viejos, no aplican
   backdrop-filter: sin este respaldo el panel se veria translucido de verdad y
   el texto caeria sobre la foto sin nada que lo sostenga. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .panel-cristal { background: rgb(var(--marca-navy) / 0.94); }
}

/* Cada columna del panel se ilumina al pasar por encima: da a entender que la
   columna entera es una unidad, aunque lo que se pulsa sea el enlace. */
.panel-cristal__parte {
    border-radius: 1rem;
    transition: background-color 0.3s ease;
}
.panel-cristal__parte:hover,
.panel-cristal__parte:focus-within {
    background: rgb(255 255 255 / 0.08);
}

/* La version pequena: los sellos en pildora de los heros interiores. */
.cristal-sello {
    background: rgb(255 255 255 / 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / 0.3);
    box-shadow: 0 8px 24px -10px rgb(0 0 0 / 0.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cristal-sello { background: rgb(255 255 255 / 0.22); }
}

@media (prefers-reduced-motion: reduce) {
    .panel-cristal__parte { transition: none; }
}

/* ======= La barra sobre el hero =======
   Mientras el hero esta detras, la barra se vuelve transparente y el logotipo
   pasa al blanco: la foto llega hasta arriba y la marca se lee sobre ella.

   El estado normal de la barra es solido, y esta clase la pone el JavaScript.
   Nunca al reves: si el guion fallara, quedaria una barra blanca legible en vez
   de texto blanco sobre fondo blanco.

   Los selectores llevan nav delante para ganarle en especificidad a las
   utilidades de Tailwind sin recurrir a !important. */

/* ======= El nombre en la barra =======
   Los dos renglones median lo mismo de alto pero no de ancho: "Seminario
   Biblico" daba 180px y "Teologico de Guatemala", 256px. Puestos uno encima del
   otro al mismo cuerpo, esa diferencia del 42% no se lee como dos lineas
   iguales sino como dos tamanos distintos.

   Se arma entonces como un logotipo: el nombre arriba y la bajada debajo, mas
   pequena y mas espaciada, calibrada para terminar donde termina la de arriba.
   Todo va en em, asi que la proporcion aguanta en los tres cuerpos que usa la
   barra (14px, 16px y 18px). */
/* Por debajo de 360px el nombre se queda a 6px del boton del menu. Tailwind no
   tiene un corte ahi (el primero es sm, en 640px, y usarlo dejaria en el cuerpo
   pequeno a casi todos los telefonos de hoy), asi que el ajuste va aqui: solo
   las pantallas mas estrechas bajan un punto y recuperan 27px de holgura. */
@media (max-width: 359px) {
    /* Con nav delante, igual que el resto del archivo: styles.css se enlaza
       antes que el guion de Tailwind, asi que a igual especificidad gana la
       utilidad text-base y esta regla no llegaria a aplicarse. */
    nav .marca-nombre { font-size: 0.875rem; }
}

.marca-nombre__linea {
    display: block;
    letter-spacing: 0.025em;
}
/* Los dos valores salen por variable porque el calibrado depende de la caja:
   la barra va en versalitas, donde un espaciado ancho se lee natural; el pie va
   en caja alta y baja, donde ese mismo espaciado se veria forzado. La regla es
   la misma; cada contexto fija su par. Los valores por defecto son los de la
   barra. */
.marca-nombre__linea--bajada {
    font-size: var(--bajada-cuerpo, 0.665em);
    letter-spacing: var(--bajada-espaciado, 0.088em);
    /* El espaciado se aplica tambien despues de la ultima letra: sin descontarlo
       el renglon de abajo sobresaldria por la derecha. */
    margin-right: calc(var(--bajada-espaciado, 0.088em) * -1);
}

/* Pie de pagina. Medidos a la misma altura y sin espaciado, "Teologico de
   Guatemala" es 1.4 veces mas ancho que "Seminario Biblico" (1084.8 contra
   775.0 a 100px). Con estos dos valores los dos renglones terminan en el mismo
   punto, igual que en la barra. */
.marca-nombre--pie {
    --bajada-cuerpo: 0.7em;
    --bajada-espaciado: 0.038em;
}

.marca-logo-blanco { display: none; }

nav.sobre-hero:not(.menu-abierto) {
    background: transparent;
    /* El difuminado de Tailwind (backdrop-blur-md) solo alcanza el alto de la
       barra: dejaba una franja de fotografia borrosa con un canto recto justo
       debajo, y era lo que mas delataba que ahi habia una barra. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* El apoyo de contraste ya no vive en el fondo de la barra, que medía 80px y
   por tanto terminaba siempre en un filo recto. Vive en una sombra que la
   desborda muy por debajo y se apaga sin canto: la foto llega limpia hasta
   arriba y lo que queda es un oscurecido de ambiente, no una franja.
   Va en ::before y con z-index negativo para quedar detras del contenido de la
   barra; pointer-events: none para que no se coma los clics del hero. */
nav.sobre-hero:not(.menu-abierto)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 13rem;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgb(var(--marca-navy) / 0.5) 0%,
        rgb(var(--marca-navy) / 0.42) 30%,
        rgb(var(--marca-navy) / 0.18) 62%,
        rgb(var(--marca-navy) / 0) 100%);
}

/* La sombra se queda a media fuerza a proposito: sola no basta sobre una foto
   blanca (3.6:1). Lo que cierra el contraste es la sombra del propio texto, que
   le da un borde sin oscurecer la imagen. Las dos juntas sostienen el peor caso
   por encima de 4.5:1 sea cual sea la fotografia. */
nav.sobre-hero:not(.menu-abierto) .marca-nombre,
nav.sobre-hero:not(.menu-abierto) [role="menuitem"],
nav.sobre-hero:not(.menu-abierto) .text-gray-600,
nav.sobre-hero:not(.menu-abierto) .text-brand-navy:not(.bg-brand-mustard),
nav.sobre-hero:not(.menu-abierto) #mobile-menu-btn {
    text-shadow: 0 1px 3px rgb(1 10 114 / 0.9), 0 2px 14px rgb(1 10 114 / 0.65);
}

/* El logotipo blanco es una imagen, asi que le toca su equivalente. */
nav.sobre-hero:not(.menu-abierto) .marca-logo-blanco {
    filter: drop-shadow(0 2px 6px rgb(1 10 114 / 0.6));
}

nav.sobre-hero:not(.menu-abierto) .marca-logo-color { display: none; }
nav.sobre-hero:not(.menu-abierto) .marca-logo-blanco { display: block; }
nav.sobre-hero:not(.menu-abierto) .marca-nombre { color: #fff; }

nav.sobre-hero:not(.menu-abierto) [role="menuitem"],
nav.sobre-hero:not(.menu-abierto) .text-gray-600 { color: #e5e7eb; }
nav.sobre-hero:not(.menu-abierto) [role="menuitem"]:hover,
nav.sobre-hero:not(.menu-abierto) .text-gray-600:hover { color: rgb(var(--marca-oro)); }

/* "Inscribete Hoy" lleva a la vez bg-brand-mustard y text-brand-navy: sin
   excluirlo se pintaria de blanco sobre el boton amarillo y desapareceria. */
nav.sobre-hero:not(.menu-abierto) .text-brand-navy:not(.bg-brand-mustard) { color: #fff; }
nav.sobre-hero:not(.menu-abierto) .text-brand-navy:not(.bg-brand-mustard):hover { color: rgb(var(--marca-oro)); }

nav.sobre-hero:not(.menu-abierto) .enlace-activo { color: #fff; }
nav.sobre-hero:not(.menu-abierto) #mobile-menu-btn { color: #fff; }

/* La pagina en la que estas se marca con un trazo amarillo bajo el enlace: el
   amarillo institucional funciona aqui como resaltador, que es su papel, y el
   texto se queda en azul, donde si se lee (16.31:1). */
.enlace-activo {
    position: relative;
}
.enlace-activo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.4rem;
    height: 3px;
    background: rgb(var(--marca-oro));
    border-radius: 2px;
}

/* En el menu movil los enlaces ocupan todo el ancho: ahi un subrayado se leeria
   como separador entre filas, asi que el trazo se pone al costado. */
#mobile-menu .enlace-activo::after {
    top: 0.25rem;
    bottom: 0.25rem;
    left: -0.75rem;
    right: auto;
    width: 3px;
    height: auto;
}

/* ======= Carrusel de programas =======
   Diez tarjetas en el mismo orden que programas.html. La pista es un contenedor
   con desplazamiento horizontal y anclaje, no un carrusel movido por guion: asi
   funciona con el dedo, con la rueda y con el teclado aunque el JavaScript no
   cargue, y las flechas solo llaman a scrollBy. */
.carrusel-programas__pista {
    display: grid;
    grid-auto-flow: column;
    /* Una tarjeta por pantalla en movil; el ancho se reparte descontando los
       huecos para que la ultima no quede cortada por medio pixel. */
    grid-auto-columns: 100%;
    gap: 2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* El realce de .card-hover-md levanta la tarjeta 6px y proyecta sombra: sin
       este margen interno el contenedor con overflow los recortaria. */
    padding: 0.75rem 0.25rem 2rem;
    /* La barra de desplazamiento propia estorba bajo las tarjetas; el recorrido
       queda a cargo de las flechas, los puntos, el dedo y el teclado. */
    scrollbar-width: none;
}
.carrusel-programas__pista::-webkit-scrollbar { display: none; }

.carrusel-programas__pista > .tarjeta-programa {
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .carrusel-programas__pista { grid-auto-columns: calc((100% - 2rem) / 2); }
}
@media (min-width: 1024px) {
    .carrusel-programas__pista { grid-auto-columns: calc((100% - 4rem) / 3); }
}

/* La pista recibe el foco para poder recorrerla con las flechas del teclado, de
   modo que necesita un foco visible propio. */
.carrusel-programas__pista:focus-visible {
    outline: 2px solid rgb(var(--marca-navy));
    outline-offset: 4px;
    border-radius: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .carrusel-programas__pista { scroll-behavior: auto; }
}

/* ---- Mandos ---- */
.carrusel-programas__mandos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.carrusel-programas__flecha,
.carrusel-programas__pausa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.125rem;
    color: rgb(var(--marca-navy));
    background: #fff;
    border: 2px solid rgb(var(--marca-navy));
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.carrusel-programas__flecha:hover,
.carrusel-programas__pausa:hover {
    color: #fff;
    background: rgb(var(--marca-navy));
}

/* La pausa va un poco separada: no recorre el carrusel, lo detiene. */
.carrusel-programas__pausa { margin-left: 0.5rem; }

.carrusel-programas__puntos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem;
}
.carrusel-programas__punto {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    background: rgb(var(--marca-navy) / 0.25);
    border: 0;
    border-radius: 9999px;
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
}
.carrusel-programas__punto:hover { background: rgb(var(--marca-navy) / 0.5); }
.carrusel-programas__punto[aria-current="true"] {
    width: 1.75rem;
    background: rgb(var(--marca-oro));
}
/* Los puntos miden 8px, muy por debajo del blanco de 24px que necesita un
   destino tactil: se les cuelga un area invisible alrededor. */
.carrusel-programas__punto::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.75rem;
    height: 2.75rem;
    transform: translate(-50%, -50%);
}

/* ---- Fotos de las tarjetas ----
   Un mismo velo azul suave para las cuatro: armoniza fotos de temperaturas
   distintas y deja ver la imagen. Hay diez programas y cuatro fotos, asi que se
   reparten en ciclo para que no se repitan dentro de una misma pantalla; al
   llegar las fotos propias de SETEGUA basta cambiar cada url aqui. */
.tarjeta-foto {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: rgb(var(--marca-navy));
    /* La tarjeta recorta (overflow-hidden), asi que la foto puede crecer al
       pasar el puntero sin desbordar la esquina redondeada. */
    transform: scale(1);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* focus-within y no solo hover: quien recorre con el teclado llega al enlace de
   la tarjeta y ve el mismo realce que con el raton. */
.tarjeta-programa:hover .tarjeta-foto,
.tarjeta-programa:focus-within .tarjeta-foto {
    transform: scale(1.08);
}

/* Al acercarse la foto se le cierra el pie en azul: separa la imagen del
   cuerpo blanco de la tarjeta y evita que el acercamiento se lea como un
   descuadre. */
.tarjeta-foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(var(--marca-navy) / 0.75) 0%, rgb(var(--marca-navy) / 0) 62%);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.tarjeta-programa:hover .tarjeta-foto::after,
.tarjeta-programa:focus-within .tarjeta-foto::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tarjeta-foto,
    .tarjeta-foto::after { transition: none; }
    .tarjeta-programa:hover .tarjeta-foto,
    .tarjeta-programa:focus-within .tarjeta-foto { transform: none; }
}

/* ---- Sello sobre la foto de la tarjeta ----
   El "a quien va dirigido" pasa de ser una linea mas dentro del cuerpo a un
   sello de cristal sobre la imagen: se lee de un vistazo al recorrer el
   carrusel, sin tener que entrar en el texto de cada tarjeta. */
.tarjeta-sello {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    max-width: calc(100% - 2rem);
    padding: 0.35rem 0.7rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: #fff;
    background: rgb(var(--marca-navy) / 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 0.5rem;
    box-shadow: 0 6px 16px -6px rgb(1 10 114 / 0.5);
}
/* Sin backdrop-filter el sello quedaria casi transparente sobre la foto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tarjeta-sello { background: rgb(var(--marca-navy) / 0.88); }
}

/* Cuando la tarjeta lleva ademas el destacado, los dos sellos comparten fila:
   en el ancho mas justo (dos columnas a 768px) quedan a 13px uno de otro, y una
   etiqueta un poco mas larga los juntaria. El tope obliga al de la izquierda a
   partirse en dos renglones antes que invadir al otro. */
.tarjeta-foto:has(.tarjeta-sello--destacado) .tarjeta-sello:not(.tarjeta-sello--destacado) {
    max-width: 55%;
}

/* El destacado de un solo programa: mismo sitio y misma forma que el sello de
   cristal, pero en amarillo, que es su papel de resaltador. */
.tarjeta-sello--destacado {
    left: auto;
    right: 1rem;
    color: rgb(var(--marca-navy));
    background: rgb(var(--marca-oro));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgb(var(--marca-oro));
}
.tarjeta-foto--curso {
    background-image: linear-gradient(rgb(var(--marca-navy) / 0.3), rgb(var(--marca-navy) / 0.3)),
                      url('../Image/CursoLibre.jpg');
}
.tarjeta-foto--biblias {
    background-image: linear-gradient(rgb(var(--marca-navy) / 0.3), rgb(var(--marca-navy) / 0.3)),
                      url('../Image/DipEstudiosBiblicos.jpg');
}
.tarjeta-foto--grupo {
    background-image: linear-gradient(rgb(var(--marca-navy) / 0.3), rgb(var(--marca-navy) / 0.3)),
                      url('../Image/BachTeologia.jpg');
}
.tarjeta-foto--lectura {
    background-image: linear-gradient(rgb(var(--marca-navy) / 0.3), rgb(var(--marca-navy) / 0.3)),
                      url('../Image/hero-lectura-atardecer.jpg');
}

/* Destino de las anclas.
   El navbar es fijo y mide 80px, asi que al saltar a #contacto (12 enlaces) o
   a un programa, el destino quedaba debajo de la barra: se perdian 82px, justo
   el encabezado de la seccion. scroll-margin-top lo respetan tanto la
   navegacion por hash como el scrollIntoView del script de programas.html. */
#inicio,
#programas,
#contacto,
.accordion-trigger {
    scroll-margin-top: 6rem;
}

/* Floating WhatsApp button */
.floating-whatsapp { animation: bounce-soft 2s infinite; }
@keyframes bounce-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Card hover */
.card-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(1, 10, 114, 0.25);
}
.card-hover-md {
    box-shadow: 0 10px 25px -5px rgba(1, 10, 114, 0.12);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover-md:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -12px rgba(1, 10, 114, 0.35);
}

/* Animations */
.fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.text-reveal { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Gradient text */
.text-gradient {
    background: linear-gradient(135deg, #fadf1a, #fff4a1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Skip to content */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.focus\:not-sr-only:focus {
    position: static; width: auto; height: auto; padding: 0.5rem 1rem; margin: 0;
    overflow: visible; clip: auto; white-space: normal;
}

/* Accordion */
.accordion-content {
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.3s ease;
    max-height: 0; opacity: 0; overflow: hidden;
}
.accordion-content.active { max-height: 2000px; opacity: 1; }
.accordion-icon { transition: transform 0.3s ease; }
.accordion-icon.active { transform: rotate(180deg); }

/* Selection */
::selection { background: #fadf1a; color: #010a72; }

/* ======= Cursos libres: ficha y panel de detalle =======
   Las descripciones son largas (hasta ~700 caracteres), asi que el detalle no
   puede ser un title nativo: no se estiliza, no funciona al tocar y se corta.
   Es un panel propio que abre con puntero, teclado y toque.
   Lleva el nombre del curso y su descripcion, nada mas. */
.curso-chip {
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    color: #374151;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.curso-chip:hover,
.curso-chip[aria-expanded="true"] {
    border-color: #fadf1a;
    background: #fffaf1;
    color: #010a72;
}

.curso-detalle {
    position: absolute;
    z-index: 70;
    width: min(21rem, calc(100vw - 1.5rem));
    max-height: min(24rem, 70vh);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: 4px solid #fadf1a;
    border-radius: 0.75rem;
    box-shadow: 0 18px 40px -12px rgba(1, 10, 114, 0.35);
    padding: 1rem 1.1rem;
    text-align: left;
}
.curso-detalle__titulo {
    font-size: 1rem;
    font-weight: 700;
    color: #010a72;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.curso-detalle__desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}
/* Focus visible */
/* El foco lleva doble anillo a proposito: el amarillo institucional da 1.34:1
   sobre blanco, asi que por si solo seria un indicador invisible justo para
   quien navega con teclado. El aro azul se ve sobre fondo claro (16.31:1) y el
   halo amarillo se ve sobre el azul (12.14:1); juntos funcionan en cualquier
   parte del sitio. */
a:focus-visible, button:focus-visible {
    outline: 2px solid #010a72;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fadf1a;
    border-radius: 2px;
}

/* Modal */
.modal-scroll::-webkit-scrollbar { width: 8px; }
.modal-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.modal-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.modal-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.modal-overlay { transition: opacity 0.3s ease; }
.modal-content { transition: transform 0.3s ease, opacity 0.3s ease; }