/* ======= 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;
    /* Alto propio. Sin el, cada pagina medía lo que midiera su texto: programas
       daba 508px y nosotros 475px, asi que ni siquiera coincidian entre si.
       El contenido se centra dentro de ese alto. */
    min-height: 32rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 1023px) {
    /* En vertical ocupa la pantalla entera, igual que el hero de inicio, que es
       lo que hacia que programas y nosotros desentonaran en movil.
       svh y no vh por el mismo motivo que alli: vh mide la ventana con la barra
       del navegador oculta, asi que el hero se pasaria de largo. El max()
       protege las pantallas muy bajas. */
    .hero-gradient { min-height: max(32rem, 100svh); }
}

.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 va al reves de como estaba: denso en el centro, que es donde vive el
   texto, y abierto hacia los bordes, que es donde interesa ver la fotografia.
   Antes aclaraba justo la zona del texto y cerraba los bordes, de modo que la
   foto no se veia en ninguna parte y el hero se leia como un azul plano: es lo
   que hacia que programas y nosotros desentonaran con el de inicio, que si abre.

   El texto va centrado, asi que la forma que le corresponde es una elipse y no
   una rampa de lado como la del carrusel. */
.hero-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 78% 82% at 50% 50%,
            rgb(var(--marca-navy) / 0.9) 0%,
            rgb(var(--marca-navy) / 0.82) 42%,
            rgb(var(--marca-navy) / 0.5) 72%,
            rgb(var(--marca-navy) / 0.28) 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));
}
/* Desde lg el hero crece para que el panel de cristal quepa entero dentro de
   el. No es capricho de altura: el difuminado del cristal solo tiene algo
   oscuro que promediar si detras hay fotografia, y mientras el panel sobresalia
   hacia la seccion clara habia que subirle la opacidad hasta 0.62 para que el
   texto no cayera por debajo de 4.5:1. Metiendolo dentro del hero, el fondo es
   siempre oscuro y el cristal puede bajar a 0.45.
   El suelo del clamp manda en pantallas bajas: ahi el hero pasa a ser mas alto
   que la ventana y el panel asoma por debajo del pliegue, que es preferible a
   recortarle el sitio al titulo. */
@media (min-width: 1024px) {
    .hero-carrusel { min-height: clamp(63rem, 110vh, 69rem); }
}
@media (max-width: 1023px) {
    /* En vertical el hero ocupa la pantalla entera: la fotografia se ve a
       pantalla completa y el panel de acceso no asoma hasta que se desplaza.

       Se usa svh y no vh: vh mide la ventana con la barra del navegador
       oculta, asi que en movil el hero sobresaldria por debajo y el panel
       seguiria sin verse tras el primer desplazamiento. svh mide con la barra
       a la vista, que es el peor caso, y ademas no cambia cuando esta se
       esconde, de modo que no hay reflujo a mitad de scroll.

       La primera declaracion queda de respaldo para navegadores sin svh: si no
       la entienden, descartan solo la segunda linea. El max() protege las
       pantallas muy bajas, donde 100svh no daria para el titulo. */
    .hero-carrusel {
        min-height: clamp(36rem, 86vh, 48rem);
        min-height: max(36rem, 100svh);
    }
}

.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.

   La rampa esta en su punto mas claro posible. Medido sobre las cinco fotos, con
   el texto oculto y tomando el pixel mas claro de cada caja, el peor caso da
   5.10:1 en el titulo y 4.91:1 en la entrada. Un escalon mas abajo (0.75 / 0.50)
   los deja en 4.28:1 y 3.74:1, fuera de AA.

   Para llegar aqui la entrada tuvo que pasar a blanco puro: con el gris que
   llevaba se quedaba en 4.46:1. Si se cambia una foto por otra mas clara hay que
   volver a medir, porque ya no queda holgura. */
.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.82) 0%,
            rgb(var(--marca-navy) / 0.55) 45%,
            rgb(var(--marca-navy) / 0.15) 80%,
            rgb(var(--marca-navy) / 0) 100%);
}

/* Desde lg el panel de cristal se apoya en el tercio inferior del hero, y a
   0.45 de opacidad depende por completo de que lo que tiene detras sea oscuro.
   Sin esto no lo es siempre: en la diapositiva del atardecer hay una zona
   calida y clara justo ahi que dejaba el blanco del panel en 4.22:1.
   El cierre hacia abajo lo resuelve sin tocar la opacidad del cristal, que es
   lo que se queria conservar. Va hasta el 42% de la altura, que es algo mas de
   lo que ocupa el panel, y se apaga del todo antes de llegar al texto. */
@media (min-width: 1024px) {
    .hero-carrusel__velo {
        background:
            linear-gradient(to top,
                rgb(var(--marca-navy) / 0.55) 0%,
                rgb(var(--marca-navy) / 0.3) 24%,
                rgb(var(--marca-navy) / 0) 46%),
            linear-gradient(to right,
                rgb(var(--marca-navy) / 0.82) 0%,
                rgb(var(--marca-navy) / 0.55) 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 16.5rem;
    text-align: center;
}
@media (min-width: 1024px) {
    .hero-carrusel__texto {
        padding: 8rem 2rem 35.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;
    /* Blanco puro, no un gris. Es lo que permite bajar la rampa del velo hasta
       0.82: con gris la entrada se quedaba en 4.46:1 y con blanco llega a 4.91:1.
       La jerarquia frente al titulo la llevan el cuerpo y la familia, no el
       color. */
    color: #fff;
    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
       en movil ya no sube sobre el hero, asi que aqui solo hace falta el aire
       de rigor; desde lg el panel sube 400px y sin ese hueco los mandos
       quedarian debajo de el. */
    padding: 0 1.5rem 2.75rem;
}
@media (min-width: 1024px) {
    .hero-carrusel__pie { padding: 0 2rem 26rem; }
}

.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.

   La opacidad depende de lo que haya detras, no del gusto. Con el panel
   sobresaliendo hacia la seccion clara, el peor caso caia sobre ese tramo y por
   debajo de 0.6 ni el blanco puro llegaba a 4.5:1 (medido: 5.14:1 a 0.60 y
   4.31:1 a 0.55). Ese es el valor base, el que usan los anchos en los que el
   panel se apila y no cabe dentro del hero.

   Desde lg el panel vive entero sobre la fotografia, siempre oscura, y ahi si
   puede bajar a 0.45 con mas difuminado, que es el aspecto del prototipo. El
   difuminado sube a 20px a proposito: a menor opacidad, la textura de la foto
   se cuela mas y es el desenfoque el que la aplana para que no estorbe al leer. */
/* En vertical el panel no se apoya en la fotografia sino en el fondo claro de
   la pagina. Ahi la translucidez no revela nada -detras solo hay color liso-, de
   modo que lo unico que hace es mezclar el azul con el blanco y aclararlo.

   Medido sobre ese fondo, el azul resultante se aleja del institucional
   rgb(1,10,114) asi: a 0.62 da rgb(94,100,167), que ya es lavanda; a 0.78,
   rgb(55,62,145); a 0.85, rgb(38,46,135); a 0.90, rgb(25,33,128).
   0.85 es el punto donde todavia se lee como el azul de marca sin haber
   renunciado al efecto: por debajo vira, por encima es indistinguible de opaco.
   El difuminado se mantiene para que el cristal siga siendo cristal. */
.panel-cristal {
    background: rgb(var(--marca-navy) / 0.85);
    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);
}

/* Desde lg el panel vive entero sobre la fotografia y es donde el cristal tiene
   sentido: ahi si baja a 0.45 con el difuminado que lo hace legible. */
@media (min-width: 1024px) {
    .panel-cristal {
        background: rgb(var(--marca-navy) / 0.45);
        backdrop-filter: blur(20px) saturate(1.2);
        -webkit-backdrop-filter: blur(20px) saturate(1.2);
        border-color: rgb(255 255 255 / 0.22);
    }

    /* 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. Solo hace falta
       aqui: por debajo de lg el panel ya es opaco. */
    @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 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 los suyos. Los valores por defecto son los de la
   barra.

   Ojo al medir: estos renglones son display:block, asi que getBoundingClientRect
   devuelve el ancho del contenedor y no el del texto. Para comprobar que los dos
   terminan en el mismo punto hay que medir con un Range sobre el contenido. Asi
   se vio que el de abajo acababa siendo 6.5px MAS ancho que el de arriba (186.9
   contra 180.4) pese a ir en un cuerpo menor, y por eso no se leia como bajada.
   Con estos valores queda en 180.4, y el peso 600 frente al 700 de arriba es lo
   que termina de marcar la jerarquia. */
.marca-nombre__linea--bajada {
    font-size: var(--bajada-cuerpo, 0.62em);
    font-weight: var(--bajada-peso, 600);
    letter-spacing: var(--bajada-espaciado, 0.1203em);
    /* 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.1203em) * -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-peso: 700;
    --bajada-espaciado: 0.038em;
}

/* Con el menu desplegado, la barra y el panel tienen que leerse como una sola
   pieza. La barra en reposo va translucida y difuminada (bg-white/95 mas
   backdrop-blur), y sobre el contenido que pasa por debajo eso tira a gris; el
   panel es blanco solido. Juntos se veia el corte entre los dos. Abierta, la
   barra pasa al mismo blanco solido del panel. */
nav.menu-abierto {
    background-color: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.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; }