/*
 * 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
   A partir de 1100px la cabecera pasa a position:absolute y flota sobre el
   contenido en lugar de empujarlo. El fichero original lo simulaba con
   "padding-top: 7.75rem" sobre .demo-spacer (topbar 2.4375rem + barra 5.3125rem).

   Por defecto se aplica ese hueco, que es la opcion segura: garantiza que el
   contenido nunca queda tapado. Cuando un apartado empiece con un hero disenado
   para verse por detras de la cabecera, la vista debe fijar
   ViewData["ContenidoBajoHeader"] = true y el layout anade el modificador.
   ========================================================================== */

:root {
    --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. */
    --sh-mobile-nav-top: 4.6875rem;
}

@media (min-width: 68.75em) {
    .stw-main {
        padding-top: var(--stw-alto-cabecera);
    }

    /* El apartado se hace cargo del hueco: su primer bloque va bajo la cabecera. */
    .stw-main--bajo-cabecera {
        padding-top: 0;
    }
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   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;
}