/*
 * site.css — pegamento entre la maquetacion corporativa y el contenido de WordPress.
 *
 * NO contiene estilos de la cabecera ni del pie: esos viven integros en footer.css, que
 * es copia byte a byte de la entrega del equipo de diseno y no debe tocarse para que una
 * futura entrega sea una sustitucion directa.
 *
 * Aqui solo hay lo que la integracion necesita y el fichero original no podia saber:
 *   1. El wrapper del contenido dentro del layout flex que footer.css impone al body.
 *   2. El hueco superior en escritorio, donde la cabecera flota sobre el contenido.
 *   3. El contenedor del fragmento de Elementor.
 *   4. Las paginas de error.
 */

/* ==========================================================================
   1. STICKY FOOTER
   footer.css declara  body { display:flex; flex-direction:column; min-height:100% }
   y su propio comentario advierte: "al integrar de verdad, el wrapper del contenido
   necesita flex: 1 0 auto". Eso es exactamente lo que hace esta regla, y es lo que
   mantiene el pie abajo cuando el apartado tiene poco contenido.
   ========================================================================== */

.stw-main {
    flex: 1 0 auto;
    min-width: 0;
}

/* ==========================================================================
   2. HUECO SUPERIOR EN ESCRITORIO — RETIRADO

   A partir de 1100px la cabecera pasa a position:absolute y flota sobre el
   contenido en lugar de empujarlo. Aqui se reservaba ese hueco con
   "padding-top: var(--stw-alto-cabecera)" sobre .stw-main, replicando el
   "padding-top: 7.75rem" que el fichero original simulaba sobre .demo-spacer.

   Esa reserva se ha eliminado a peticion expresa: el contenido arranca ahora
   por detras de la cabecera en todos los apartados, no solo en los que traen
   imagen de cabecera. Si en algun apartado el primer bloque queda tapado, la
   solucion es maquetarlo con su propio espacio superior, no devolver el hueco
   global.

   Queda como consecuencia codigo sin efecto, que se conserva para poder
   revertir el cambio sin rehacerlo:
     · La variable --stw-alto-cabecera, ya sin ningun consumidor.
     · El modificador .stw-main--bajo-cabecera y el ViewData
       ["ContenidoBajoHeader"] que lo activa desde Apartado.cshtml: ya no
       distinguen nada, porque ningun apartado reserva hueco.
   ========================================================================== */

:root {
    /* Sin uso desde que se retiro la reserva de hueco. Se conserva como
       referencia del alto real de la cabecera: topbar 2.4375rem + barra 5.3125rem. */
    --stw-alto-cabecera: 7.75rem;
    /* Alto real de la barra en movil: 1rem + 2.625rem (logo) + 1.0625rem.
       footer.css lo lee como var(--sh-mobile-nav-top, 4.5rem) para colocar el
       cajon del menu; sin definirlo, el cajon se solapaba 3px con la cabecera.
       Este si sigue en uso. */
    --sh-mobile-nav-top: 4.6875rem;
}

/* ==========================================================================
   2 bis. BLINDAJE DE LA CABECERA FRENTE AL CSS DE WORDPRESS

   La cabecera corporativa usa la clase .site-header, y resulta que el tema de
   WordPress y el kit de Elementor tambien declaran reglas sobre ese mismo nombre.
   Desde que los estilos del apartado se extraen de la pagina renderizada, esas
   reglas llegan a esta web y descuadraban la cabecera:

     · header-footer.css (tema) le imponia display:flex, con lo que la barra
       superior y la principal pasaban a ser items de flex dimensionados al
       contenido en vez de bloques a todo el ancho. Esa hoja ya se excluye al
       extraer los activos, porque solo estiliza la cabecera y el pie del tema,
       que esta web no renderiza nunca.
     · theme.css (tema) la incluye en el selector ".site-header:not(.dynamic-header)"
       junto a "width:100%; margin-inline:auto" y un "max-width" por breakpoint
       (500, 600, 800 y 1140px). Eso es lo que dejaba la cabecera centrada en una
       columna en vez de ocupar todo el ancho, y a cualquier resolucion.
     · post-6.css (kit de Elementor) le anadia padding lateral.

   Van con !important a proposito. No basta con cargar site.css el ultimo: el
   selector del tema es ".site-header:not(.dynamic-header)", que tiene mas
   especificidad que ".site-header" y gana igualmente. Es el caso en que
   !important esta justificado: afirmar los invariantes de nuestra propia
   maquetacion frente a CSS de terceros que no controlamos y que puede cambiar
   sin previo aviso.

   El pie no necesita blindaje: su clase (.st-footer) no colisiona con la del
   tema (.site-footer).
   ========================================================================== */

.site-header {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-block: 0 !important;
    padding-inline: 0 !important;
}

/* ==========================================================================
   2 ter. BLINDAJE DE LOS BOTONES PROPIOS FRENTE AL RESET DEL TEMA

   reset.css (tema Hello Elementor, extraido de la pagina renderizada) declara

     button:hover, button:focus { background-color: #c36; color: #fff }

   Como selecciona por elemento y no por clase, alcanza a todos los <button>
   de la maquetacion propia: los titulos del acordeon del pie ("Programas",
   "San Telmo"...), la hamburguesa y los chevrones de submenu de la cabecera,
   que al pasar el cursor se pintaban de magenta. Ninguno debe reaccionar al
   cursor: aqui se reafirman sus valores de reposo.

   Excluir reset.css al extraer los activos no es alternativa, porque tambien
   normaliza el contenido de Elementor. El !important sigue la logica del
   blindaje anterior: afirmar los invariantes de la maquetacion propia frente
   a CSS de terceros que puede cambiar sin aviso. El outline no se toca, para
   conservar el indicador de foco del navegador al navegar con teclado.
   ========================================================================== */

.site-header__burger:hover,
.site-header__burger:focus,
.site-header__nav-chevron-btn:hover,
.site-header__nav-chevron-btn:focus,
.st-footer__nav-toggle:hover,
.st-footer__nav-toggle:focus {
    background-color: transparent !important;
    color: inherit !important;
}

/* El titulo del pie no hereda su dorado: lo define su propia clase. */
.st-footer__nav-toggle:hover,
.st-footer__nav-toggle:focus {
    color: var(--stf-color-heading, #ffce65) !important;
}

/* ==========================================================================
   2 quater. APARTADOS DE MENU QUE NO CABEN EN LA BARRA DE ESCRITORIO

   El menu se construye desde la APICMS (seccion 22) y puede traer mas apartados
   de primer nivel de los que caben en la barra. El diseno contempla seis; a
   partir del septimo se ocultan en escritorio.

   No se borran del marcado: en movil la navegacion es un cajon vertical, sin
   limite de espacio, y alli deben salir todos. De ahi que sea una regla dentro
   del media query de escritorio y no un .d-none, que los quitaria siempre.

   El breakpoint es el mismo 68.75em (1100px) que usa footer.css para pasar la
   cabecera de cajon a barra horizontal.
   ========================================================================== */

@media (min-width: 68.75em) {
    .site-header__nav-item--solo-movil {
        display: none;
    }
}

/* ==========================================================================
   2 quinquies. CABECERA FIJA AL HACER SCROLL (todos los tamaños)

   La entrega de diseno deja la barra principal (.site-header__main) en
   position:sticky, pero sticky solo actua dentro de su contenedor, y su
   contenedor (.site-header) mide exactamente lo mismo que ella: en cuanto
   la cabecera sale de pantalla, la barra se va con ella. Es decir, en movil y
   tablet no se quedaba fija. En escritorio la cabecera es position:absolute
   (flota sobre el primer bloque de la pagina) y tampoco se quedaba.

   Solucion pedida por el cliente: la cabecera entera fija arriba en todos los
   tamaños. Se hace sobre .site-header, no sobre la barra:
     · movil y tablet: sticky. Sigue ocupando su sitio en el flujo (la pagina
       no cambia) y se pega al borde superior al desplazarse.
     · escritorio: fixed. Misma geometria que el absolute que sustituye (la
       pagina arranca por detras de la cabecera, como hasta ahora), pero
       acompaña al scroll.
   La regla de escritorio va despues de la general porque ambas tienen la
   misma especificidad que la de footer.css: gana la ultima.

   scroll-padding-top: con la cabecera fija, un enlace a un ancla (#seccion)
   la dejaria escondida debajo; asi el navegador la deja justo por debajo.
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
}

html {
    scroll-padding-top: var(--sh-mobile-nav-top, 4.6875rem);
}

@media (min-width: 68.75em) {
    .site-header {
        position: fixed;
    }

    html {
        scroll-padding-top: var(--stw-alto-cabecera, 7.75rem);
    }
}

/* ==========================================================================
   2 sexies. AJUSTES DEL CAJON DE NAVEGACION MOVIL

   · Tercer nivel con sangria: dentro de un submenu con encabezados (Programas,
     San Telmo), la lista que cuelga de cada encabezado se separa un poco a la
     derecha para que se lea como hijo suyo. Solo afecta a las listas que van
     precedidas de un encabezado; las listas sueltas de dos niveles (Alumni,
     Programas a medida) se quedan como estan.
   · Hueco inferior de los paneles compactos: en movil footer.css da 1.75rem
     bajo las columnas de cualquier panel, pero la regla de escritorio de los
     paneles compactos (.site-header__panel--compact .site-header__mega-columns
     { margin-bottom: 0 }) es mas especifica y la anula, y el ultimo encabezado
     quedaba pegado a la linea divisoria. Se reafirma aqui con la misma
     especificidad, de modo que todos los paneles cierran con el mismo hueco.
   ========================================================================== */

@media (max-width: 68.75em) {
    .site-header__mega-col .site-header__mega-heading ~ ul {
        padding-left: 1rem;
    }

    .site-header__panel--compact .site-header__mega-columns {
        margin-bottom: 1.75rem;
    }
}

/* ==========================================================================
   2 septies. SELECTOR DE IDIOMA (seccion 26)

   Un <details> en la barra superior, detras de los enlaces rapidos: bandera,
   etiqueta (ESP/ENG) y chevron; al abrirse, la lista de idiomas cae por
   debajo. Reutiliza los colores y el padding de los enlaces rapidos para que
   parezca uno mas. Las reglas de la lista van con dos clases porque footer.css
   aplica ".site-header__quicklinks ul" y ".site-header__quicklinks a" a todo
   lo que cuelga de la barra, tambien a esta lista, y hay que ganarles.

   La barra superior recibe position:relative y un z-index por encima de la
   barra principal (20 en footer.css): sin el, la lista desplegada quedaba
   escondida detras del menu.

   En movil la barra superior no existe (footer.css la oculta) y el selector
   se repite al final del cajon, como los enlaces rapidos, en forma de fila de
   idiomas.
   ========================================================================== */

.site-header__topbar {
    position: relative;
    z-index: 25;
}

.site-header__idioma {
    position: relative;
}

.site-header__idioma-selector summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    color: var(--stf-color-text);
    font-size: 1rem;
    line-height: inherit;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.site-header__idioma-selector summary::-webkit-details-marker {
    display: none;
}

.site-header__idioma-selector summary:hover,
.site-header__idioma-selector summary:focus-visible,
.site-header__idioma-selector[open] summary {
    color: #ffffff;
    background: var(--sh-color-divider);
}

.site-header__idioma-bandera {
    display: block;
    flex: none;
    width: 1.25rem;
    height: auto;
    border-radius: 0.125rem;
}

.site-header__idioma-chevron {
    width: 0.3125rem;
    height: 0.4375rem;
    color: var(--stf-color-heading);
    transition: transform 0.2s ease;
}

.site-header__idioma-selector[open] .site-header__idioma-chevron {
    transform: rotate(180deg);
}

.site-header__quicklinks .site-header__idioma-lista {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1;
    display: block;
    min-width: 100%;
    margin: 0;
    padding: 0.375rem 0;
    list-style: none;
    background: var(--stf-color-bg);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
}

.site-header__quicklinks .site-header__idioma-lista a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--stf-color-text);
    white-space: nowrap;
}

.site-header__quicklinks .site-header__idioma-lista a:hover,
.site-header__quicklinks .site-header__idioma-lista a:focus-visible {
    color: #ffffff;
    background: var(--sh-color-divider);
    text-decoration: none;
}

.site-header__quicklinks .site-header__idioma-lista a[aria-current],
.site-header__idiomas-movil a[aria-current] {
    color: var(--stf-color-heading);
    font-weight: 600;
}

.site-header__idiomas-movil {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-header__idiomas-movil a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   2 octies. TITULARES DEL PIE SIN ETIQUETA DE ENCABEZADO

   Los titulares de las columnas del pie (Programas, San Telmo, Comunidad,
   Actualidad) eran <h3> en la entrega de diseno. Se repiten en todas las
   paginas, asi que se han pasado a <div class="st-footer__nav-title"> para
   que no entren en la jerarquia de encabezados del contenido.

   Lo unico que el <h3> aportaba al aspecto era su caja: display:block (un
   <div> ya lo es) y el margen que footer.css declara sobre
   ".st-footer__nav h3" (0 0 1rem, y 0 por debajo en el acordeon de
   tablet/movil). Tipografia, tamaño, peso y color los pone el boton que va
   dentro (.st-footer__nav-toggle) y no dependen de la etiqueta. Aqui se
   reponen esos dos margenes con el mismo breakpoint que footer.css, de modo
   que el resultado es identico pixel a pixel (seccion 11.11).
   ========================================================================== */

.st-footer__nav-title {
    margin: 0 0 1rem;
}

@media (max-width: 68.75em) {
    .st-footer__nav-title {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   3. CONTENEDOR DEL CONTENIDO DE WORDPRESS
   Se alinea con el mismo ancho maximo y los mismos margenes laterales que usan
   la cabecera y el pie (--stf-max-width y los paddings de sus media queries),
   para que las tres piezas queden a eje.
   ========================================================================== */

.stw-contenido {
    max-width: var(--stf-max-width, 75rem);
    margin: 0 auto;
    padding-block: 3rem;
}

/* Respaldo tipografico, solo cuando no se han podido extraer los estilos reales del
   apartado. Fijarlo siempre era contraproducente: pisaba los colores del diseno alli
   donde Elementor los resuelve con variables (--e-global-color-*), y el contenido se
   pintaba en gris oscuro en vez de en los colores corporativos. */
.stw-contenido--sin-activos {
    font-family: var(--stf-font, system-ui, sans-serif);
    color: #24313b;
}

@media (max-width: 77.5em) {
    .stw-contenido {
        padding-left: 2.25rem;
        padding-right: 2.3125rem;
    }
}

/* Apartados marcados con usarAnchoCompletoPantalla en la APICMS. */
.stw-contenido--completo {
    max-width: none;
    padding-inline: 0;
    padding-block: 0;
}

/* El contenido de Elementor trae sus propios anchos; se evita que desborde en
   movil y provoque scroll horizontal en toda la pagina. */
.stw-contenido img,
.stw-contenido iframe,
.stw-contenido video {
    max-width: 100%;
    height: auto;
}

.stw-contenido table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

/* Imagen de cabecera del apartado, cuando la APICMS la define. */
.stw-cabecera-apartado img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

/* ==========================================================================
   4. PAGINAS DE ERROR
   Usan clases de Bootstrap, que es la unica razon por la que el layout sigue
   cargandolo: ni la cabecera ni el pie dependen de Bootstrap.
   ========================================================================== */

.stw-error {
    font-family: var(--stf-font, system-ui, sans-serif);
    padding-block: 5rem;
    text-align: center;
}

.stw-error__codigo {
    color: var(--stf-color-bg, #24346c);
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1rem;
}

.stw-error__titulo {
    color: var(--stf-color-bg, #24346c);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.stw-error__mensaje {
    color: #5b6470;
    margin-bottom: 2rem;
}

.stw-error__accion {
    display: inline-block;
    background: var(--stf-color-bg, #24346c);
    color: #ffffff;
    border-radius: 2.8125rem;
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    text-decoration: none;
}

.stw-error__accion:hover,
.stw-error__accion:focus-visible {
    background: var(--stf-color-accent-shape, #bf9439);
    color: #ffffff;
}

.stw-error__referencia {
    color: #8a929c;
    font-size: 0.8125rem;
    margin-top: 2rem;
}