/* ==========================================================================
   CES numen — hoja de estilo del escaparate estático
   Prototipo del 09/08/2026. Paleta y tipografía tomadas del customcss del
   tema Academi, para que escaparate y campus se vean como el mismo sitio.
   ========================================================================== */

/* --- Open Sans, servida desde este mismo servidor (nada de Google) -------- */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('fuentes/open-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('fuentes/open-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

:root {
    --azul:        #0357af;
    --azul-claro:  #0470d8;
    --azul-oscuro: #024a8f;
    --texto:       #333;
    --texto-suave: #555;
    --gris:        #666;
    --gris-claro:  #f8f9fa;
    --borde:       #e9ecef;
    --ancho:       1140px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--texto);
    background: #fff;
}

img { max-width: 100%; height: auto; }

a { color: var(--azul); }
a:hover { color: var(--azul-oscuro); }

/* Salto al contenido, para teclado y lectores de pantalla */
.saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #fff;
    color: var(--azul);
    font-weight: 700;
    padding: .75rem 1.25rem;
    z-index: 100;
}
.saltar:focus { left: 0; }

/* --- Cabecera ------------------------------------------------------------ */
.cabecera {
    background: var(--azul);
    border-bottom: 1px solid var(--azul-oscuro);
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Más ancha que el resto del sitio: con el logo y ocho enlaces, a 1140px la
   fila se partía en dos y la marca quedaba centrada arriba. */
.cabecera-interior {
    max-width: 1320px;
    margin: 0 auto;
    padding: .7rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.logo img { display: block; height: 40px; width: auto; }

.navegacion ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex-wrap: wrap;
}

/* Sobre la barra azul, los enlaces van en blanco. El estado activo no puede
   distinguirse por color —sería blanco sobre blanco—, así que se marca por
   OPACIDAD y peso: los inactivos al 78 %, el activo blanco pleno, en negrita
   y con la línea inferior. Así se diferencia sin depender del color. */
.navegacion a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    padding: .35rem 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .15s;
}
.navegacion a:hover,
.navegacion a:focus-visible { color: #fff; border-bottom-color: rgba(255, 255, 255, .55); }

.navegacion a[aria-current="page"] {
    color: #fff;
    font-weight: 700;
    border-bottom-color: #fff;
}

/* Desplegable sin JavaScript, con <details>. Accesible de fábrica: el
   navegador le da rol de botón, estado abierto/cerrado y manejo de teclado. */
.desplegable { position: relative; }

.desplegable > summary {
    list-style: none;
    cursor: pointer;
    color: rgba(255, 255, 255, .78);
    font-size: .92rem;
    font-weight: 600;
    padding: .35rem 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after {
    content: "";
    width: .4rem;
    height: .4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}
.desplegable[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.desplegable > summary:hover,
.desplegable[open] > summary { color: #fff; border-bottom-color: rgba(255, 255, 255, .55); }

.desplegable > ul {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: .5rem;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
    padding: .5rem 0;
    min-width: 190px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    z-index: 60;
}
.desplegable > ul a {
    display: block;
    padding: .5rem 1.1rem;
    border-bottom: none;
    font-weight: 400;
    /* El panel es blanco: sin esto heredaban el blanco del menú y no se veían
       hasta pasar el ratón por encima. */
    color: var(--texto-suave);
}
.desplegable > ul a:hover,
.desplegable > ul a:focus-visible { background: var(--gris-claro); color: var(--azul); }

@media (max-width: 860px) {
    /* En móvil el desplegable se abre en el flujo, no flotando */
    .desplegable > ul {
        position: static;
        box-shadow: none;
        border: none;
        margin-top: .25rem;
        min-width: 0;
        padding: .25rem 0;
    }
    .desplegable > ul a { padding: .4rem .5rem; }
}

/* Botón al campus — el enlace más importante de la cabecera.
   Invertido respecto al resto: blanco sobre azul, para que destaque. */
.boton-aula {
    background: #fff;
    color: var(--azul) !important;
    font-weight: 700;
    border-radius: 4px;
    padding: .55rem 1.15rem !important;
    border-bottom: none !important;
}
.boton-aula:hover, .boton-aula:focus-visible {
    background: rgba(255, 255, 255, .88);
    color: var(--azul-oscuro) !important;
    border-bottom-color: transparent !important;
}

/* --- Contenido ----------------------------------------------------------- */
.contenido { min-height: 50vh; }

.staticpage-wrapper,
.container {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3.5rem;
}

.staticpage-title {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--texto-suave);
    margin: 0 0 1.75rem;
}

.staticpage-content p { margin: 0 0 1.1rem; }
.staticpage-content ol,
.staticpage-content ul { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.staticpage-content li { margin-bottom: .65rem; }
.staticpage-content h2 { font-size: 1.5rem; color: var(--azul); margin: 2rem 0 1rem; }
.staticpage-content h3 { font-size: 1.2rem; color: var(--texto-suave); margin: 1.5rem 0 .75rem; }

/* Clases de Bootstrap que traen las páginas del sitio antiguo */
.img-fluid { max-width: 100%; height: auto; }
.text-center { text-align: center; }

/* Las tablas de las páginas viejas deben poder desbordar sin romper la página */
.staticpage-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.staticpage-content th,
.staticpage-content td { border: 1px solid var(--borde); padding: .6rem .8rem; text-align: left; }
.staticpage-content th { background: var(--gris-claro); }

/* --- Pie ----------------------------------------------------------------- */
.pie {
    background: var(--azul);
    color: #fff;
    padding: 3.5rem 1.25rem 2.5rem;
}

.pie-interior {
    max-width: var(--ancho);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
}

.pie h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
    color: #fff;
}

.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .6rem; line-height: 1.6; }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover, .pie a:focus-visible { text-decoration: underline; color: #fff; }
.pie p { margin: 0 0 .9rem; display: flex; gap: .6rem; align-items: flex-start; }

.pie-icono { flex: 0 0 auto; width: 1.1rem; text-align: center; opacity: .85; }

/* Redes sociales */
.redes { display: flex; gap: .75rem; list-style: none; padding: 0; margin: 0; }
.redes a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .15);
    transition: background .15s;
}
.redes a:hover, .redes a:focus-visible { background: rgba(255, 255, 255, .3); }
.redes svg { width: 20px; height: 20px; fill: #fff; }

/* Barra inferior */
.pie-inferior {
    background: #333;
    color: #ddd;
    padding: 1.15rem 1.25rem;
    text-align: center;
    font-size: .9rem;
}
.pie-inferior-interior {
    max-width: var(--ancho);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem 1rem;
}
.pie-inferior a { color: #ddd; text-decoration: none; text-transform: uppercase; font-size: .82rem; letter-spacing: .03em; }
.pie-inferior a:hover, .pie-inferior a:focus-visible { color: #fff; text-decoration: underline; }
.pie-inferior .separador { opacity: .4; }

/* Botón "Configurar cookies": es un <button> pero debe leerse como enlace */
.enlace-boton {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #ddd;
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .03em;
    cursor: pointer;
}
.enlace-boton:hover { color: #fff; text-decoration: underline; }

/* Dentro del pie azul tiene que leerse exactamente igual que los enlaces que
   lo acompañan, no como el texto pequeño en mayúsculas de la barra inferior. */
.pie .enlace-boton {
    color: #fff;
    text-transform: none;
    font-size: inherit;
    letter-spacing: normal;
    line-height: inherit;
    text-align: left;
}
.pie .enlace-boton:hover,
.pie .enlace-boton:focus-visible { color: #fff; text-decoration: underline; }

/* --- Botón del menú en móvil --------------------------------------------- */
/* Oculto en escritorio: ahí la barra entera cabe en una línea. */
.hamburguesa { display: none; }

/* --- Pantallas pequeñas -------------------------------------------------- */
@media (max-width: 860px) {
    .cabecera { position: static; }
    .staticpage-title { font-size: 1.75rem; }
    .pie { padding: 2.5rem 1.25rem 2rem; }

    /* Logo a la izquierda, botón a la derecha, y el menú desplegado ocupando
       una segunda fila completa. El flex-wrap del contenedor ya estaba. */
    .cabecera-interior { justify-content: space-between; gap: .75rem; }

    .hamburguesa {
        display: flex;
        align-items: center;
        gap: .55rem;
        /* 44 px de alto: el mínimo recomendado para tocar con el dedo. */
        min-height: 44px;
        padding: .4rem .7rem;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .45);
        border-radius: 4px;
        color: #fff;
        font: inherit;
        font-size: .92rem;
        font-weight: 600;
        cursor: pointer;
    }
    .hamburguesa:hover { border-color: #fff; }
    .hamburguesa:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

    /* Las tres barras, dibujadas con el propio elemento y sus dos pseudos:
       ni imagen ni SVG ni iconos de terceros que cargar. */
    .hamburguesa-barras,
    .hamburguesa-barras::before,
    .hamburguesa-barras::after {
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
        transition: transform .18s, opacity .18s;
    }
    .hamburguesa-barras {
        position: relative;
    }
    .hamburguesa-barras::before,
    .hamburguesa-barras::after {
        content: "";
        position: absolute;
        left: 0;
    }
    .hamburguesa-barras::before { top: -6px; }
    .hamburguesa-barras::after  { top: 6px; }

    /* Abierto: la barra central desaparece y las otras dos forman una X. */
    .hamburguesa[aria-expanded="true"] .hamburguesa-barras { background: transparent; }
    .hamburguesa[aria-expanded="true"] .hamburguesa-barras::before {
        transform: translateY(6px) rotate(45deg);
    }
    .hamburguesa[aria-expanded="true"] .hamburguesa-barras::after {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* 🔴 El menú se esconde SOLO si hay JavaScript (clase js en <html>, que
       pone menu.js antes de pintar). Sin JS el botón no haría nada y esconder
       aquí los enlaces los dejaría inalcanzables. */
    .js .navegacion { display: none; }
    .js .navegacion.abierta { display: block; }

    /* Fila propia bajo el logo, de lado a lado. */
    .navegacion {
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, .25);
        margin-top: .35rem;
        padding-top: .5rem;
    }
    .navegacion > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    /* Cada opción, una línea tocable de lado a lado en vez de un texto suelto:
       el área de pulsación es toda la fila, no solo las letras. */
    .navegacion > ul > li > a,
    .navegacion > ul > li > .desplegable > summary {
        padding: .7rem .25rem;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        white-space: normal;
    }
    .navegacion > ul > li > a { display: block; }
    .navegacion > ul > li > a[aria-current="page"] { border-bottom-color: #fff; }

    /* ⚠️ El summary se queda en FLEX, no en block: es lo que empuja la flecha
       al extremo derecho. Con display:block el ::after se volvía inline y la
       flecha desaparecía de hecho, dejando "Estudiar fuera" sin ninguna señal
       de que abre un submenú. */
    .navegacion > ul > li > .desplegable > summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* Sin esto, el doble toque para abrir selecciona el texto y deja el
           cursor parpadeando dentro del menú. */
        user-select: none;
        -webkit-user-select: none;
    }

    /* 🔴 El submenú, integrado en la barra y no flotando sobre ella.
       En escritorio es un panel blanco —correcto, cuelga sobre fondo claro—,
       pero dentro del menú azul esa caja blanca parecía pegada de otro sitio.
       La regla de arriba ya le quitaba borde y sombra; faltaba el fondo. */
    .desplegable > ul {
        background: transparent;
        border-radius: 0;
        padding-left: 1rem;
    }
    .desplegable > ul a {
        color: rgba(255, 255, 255, .78);
        padding: .55rem .5rem;
    }
    .desplegable > ul a:hover,
    .desplegable > ul a:focus-visible {
        background: transparent;
        color: #fff;
        text-decoration: underline;
    }

    /* El botón del aula deja de ser un botón pequeño a la derecha y pasa a
       ocupar el ancho, que es como se espera en un menú de móvil. */
    .navegacion .boton-aula {
        display: block;
        text-align: center;
        margin-top: .75rem;
        padding: .8rem 1rem !important;
        border-bottom: none !important;
    }
}

/* Coherente con la decisión del carrusel: quien pide menos movimiento no
   pierde funcionalidad, solo la transición del icono. */
@media (prefers-reduced-motion: reduce) {
    .hamburguesa-barras,
    .hamburguesa-barras::before,
    .hamburguesa-barras::after { transition: none; }
}

/* --- Impresión ----------------------------------------------------------- */
@media print {
    .cabecera, .pie, .pie-inferior { display: none; }
    body { color: #000; }
}

/* ==========================================================================
   PORTADA
   Estética deliberadamente más actual que el tema Academi: más aire,
   tipografía mayor, tarjetas de borde suave y nada de gradientes duros.
   ========================================================================== */

/* --- Hero: carrusel de tres ----------------------------------------------
   Los slides se apilan y se cruzan por fundido, no por desplazamiento. Es
   más robusto que scroll-snap y permite el zoom lento (Ken Burns), que es
   lo que hace que se note que está vivo.
   ------------------------------------------------------------------------ */
.hero { position: relative; background: #05121f; overflow: hidden; }

/* El max() garantiza que nunca sea tan bajo como para cortar el texto,
   por corta que sea la ventana. */
.hero-pista { position: relative; min-height: max(430px, min(74vh, 640px)); }

.hero-slide {
    position: absolute;
    inset: 0;
    display: grid;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s ease, visibility 0s .9s;
}
.hero-slide > * { grid-area: 1 / 1; }
.hero-slide.activa { opacity: 1; visibility: visible; z-index: 1; transition: opacity .9s ease; }

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: center 45%;
}
/* Zoom lento mientras el slide está a la vista */
.hero-slide.activa img { animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.085); } }

/* Velo NEUTRO y lateral: oscurece la banda izquierda, donde va el texto, y
   deja la mitad derecha de la foto en su color. Nada de tinte azul. */
.hero-velo {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, .72) 0%,
            rgba(0, 0, 0, .55) 32%,
            rgba(0, 0, 0, .12) 62%,
            rgba(0, 0, 0, 0)   80%),
        linear-gradient(to top,
            rgba(0, 0, 0, .45) 0%,
            rgba(0, 0, 0, 0)   22%);
}

/* Centrado vertical: es la disposición que funciona con cualquier proporción
   de foto y con cualquier alto de ventana. El texto nunca queda fuera. */
.hero-texto {
    position: relative;
    align-self: center;
    max-width: var(--ancho);
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.25rem;
    color: #fff;
}
.hero-numero {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .75);
    margin: 0 0 .9rem;
}
.hero-texto h2 {
    font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.2rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.015em;
    margin: 0 0 1.75rem;
    max-width: 20ch;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
    text-wrap: balance;
}

/* El texto entra escalonado al cambiar de slide */
.hero-slide.activa .hero-numero { animation: subir .6s .10s both ease-out; }
.hero-slide.activa .hero-texto h2 { animation: subir .7s .18s both ease-out; }
.hero-slide.activa .hero-texto .boton { animation: subir .7s .30s both ease-out; }
@keyframes subir {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/* --- Flechas ------------------------------------------------------------- */
.hero-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(0, 0, 0, .25);
    backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .18s, border-color .18s;
}
.hero-flecha:hover, .hero-flecha:focus-visible { background: var(--azul); border-color: var(--azul); }
.hero-flecha svg { width: 20px; height: 20px; fill: currentColor; }
.hero-flecha.anterior { left: clamp(.75rem, 2vw, 1.75rem); }
.hero-flecha.siguiente { right: clamp(.75rem, 2vw, 1.75rem); }

.boton {
    display: inline-block;
    background: #fff;
    color: var(--azul) !important;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    padding: .85rem 1.9rem;
    border-radius: 4px;
    transition: transform .15s, box-shadow .15s;
}
.boton:hover, .boton:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
.boton-solido { background: var(--azul); color: #fff !important; }
.boton-solido:hover { background: var(--azul-oscuro); }

/* --- Controles: puntos con barra de progreso + pausa ---------------------- */
.hero-controles {
    position: absolute;
    left: 0; right: 0; bottom: 1.75rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.hero-puntos { display: flex; gap: .55rem; }
.hero-puntos button {
    position: relative;
    width: 54px; height: 3px;
    border: none; padding: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    overflow: hidden;
}
.hero-puntos button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
}
/* La barra se llena al ritmo del avance: se ve que el carrusel está vivo.
   Se dispara con una clase, no con [aria-current], porque el JS la quita y
   la vuelve a poner forzando un reflow — así la animación reinicia siempre,
   incluso al volver a la diapositiva en la que ya estaba. */
.hero-puntos button.avanzando::after { animation: progreso 6s linear forwards; }
.hero.en-pausa .hero-puntos button.avanzando::after { animation-play-state: paused; }
@keyframes progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-puntos button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.hero-pausa {
    width: 30px; height: 30px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    background: rgba(0, 0, 0, .25);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
}
.hero-pausa:hover, .hero-pausa:focus-visible { background: var(--azul); border-color: var(--azul); }
.hero-pausa svg { width: 11px; height: 11px; fill: currentColor; }

@media (max-width: 860px) {
    .hero-flecha { display: none; }
    .hero-puntos button { width: 38px; }
}

/* Quien haya pedido reducir movimiento se queda sin zoom ni entradas
   animadas, pero el carrusel sigue rotando con un fundido suave: cambiar de
   contenido no es lo que molesta, lo que molesta es el movimiento. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide.activa img { animation: none; }
    .hero-slide.activa .hero-numero,
    .hero-slide.activa .hero-texto h2,
    .hero-slide.activa .hero-texto .boton { animation: none; }
    .hero-slide { transition: opacity .35s ease; }
    /* La barra de progreso SÍ se mantiene: no es decoración, es el indicador
       de cuánto falta para el siguiente. Son 3 px que se rellenan en 6 s,
       nada que pueda molestar. Desactivarla la dejaba llena de entrada y
       parecía rota. */
}

/* --- Secciones ----------------------------------------------------------- */
.seccion { padding: 5rem 1.25rem; }
.seccion-alt { background: var(--gris-claro); }
.seccion-interior { max-width: var(--ancho); margin: 0 auto; }

.seccion h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--texto);
    margin: 0 0 .75rem;
    text-wrap: balance;
}
.seccion .entradilla {
    color: var(--gris);
    font-size: 1.05rem;
    max-width: 70ch;
    margin: 0 0 3rem;
}
.seccion h2 + .entradilla { margin-top: 0; }

/* --- Tarjetas ------------------------------------------------------------ */
.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.75rem;
}

.tarjeta {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 2rem 1.75rem;
    text-decoration: none;
    color: inherit;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.tarjeta:hover, .tarjeta:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(3, 87, 175, .12);
    border-color: rgba(3, 87, 175, .35);
}
.tarjeta h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--azul);
    margin: 0 0 .85rem;
    line-height: 1.35;
}
.tarjeta p { margin: 0 0 1.25rem; color: var(--gris); font-size: .97rem; }
.tarjeta .flecha { margin-top: auto; color: var(--azul); font-weight: 700; font-size: .92rem; }

/* Tarjetas compactas, para la lista de países */
.tarjetas-compactas { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.tarjetas-compactas .tarjeta { padding: 1.35rem 1.5rem; }
.tarjetas-compactas h3 { font-size: 1.05rem; margin: 0; }

/* --- Texto de "quiénes somos" -------------------------------------------- */
.texto-largo { max-width: 75ch; }
.texto-largo p { margin: 0 0 1.25rem; font-size: 1.05rem; }

/* --- Llamada final ------------------------------------------------------- */
.cta { background: var(--azul); color: #fff; text-align: center; }
.cta h2 { color: #fff; }
.cta .entradilla { color: rgba(255, 255, 255, .85); margin-left: auto; margin-right: auto; }
.cta-botones { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
    .seccion { padding: 3.5rem 1.25rem; }
}

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

/* ==========================================================================
   SECCIONES NUEVAS DE LA PORTADA (09/08/2026)
   ========================================================================== */

/* --- Franja de confianza: sello de la UNED + cifras reales --------------- */
.franja {
    background: var(--gris-claro);
    border-bottom: 1px solid var(--borde);
    padding: 2.25rem 1.25rem;
}
.franja-interior {
    max-width: var(--ancho);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.sello {
    display: flex;
    align-items: center;
    gap: .9rem;
    max-width: 46ch;
}
.sello svg { flex: 0 0 auto; width: 34px; height: 34px; fill: var(--azul); }
.sello p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--texto-suave); }
.sello strong { color: var(--azul); display: block; font-size: .98rem; }

.cifras { display: flex; gap: 2.75rem; flex-wrap: wrap; }
.cifra { text-align: center; }
.cifra b {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--azul);
    line-height: 1.1;
}
.cifra span { font-size: .87rem; color: var(--gris); }

/* --- Tarjetas con fotografía --------------------------------------------- */
.tarjeta-foto { padding: 0; overflow: hidden; }
.tarjeta-foto .foto {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--borde);
}
.tarjeta-foto .foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.tarjeta-foto:hover .foto img { transform: scale(1.04); }
.tarjeta-foto .cuerpo { padding: 1.5rem 1.6rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta-foto h3 { margin-bottom: .6rem; }

/* Variante compacta para los países */
.tarjeta-pais .foto { aspect-ratio: 3 / 2; }
.tarjeta-pais .cuerpo { padding: 1.1rem 1.25rem 1.3rem; }
.tarjeta-pais h3 { font-size: 1.05rem; margin: 0; }

/* --- Cómo funciona: pasos numerados -------------------------------------- */
.pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    counter-reset: paso;
}
.paso { position: relative; padding-top: 3.75rem; }
.paso::before {
    counter-increment: paso;
    content: counter(paso, decimal-leading-zero);
    position: absolute;
    top: 0; left: 0;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--azul);
    opacity: .22;
}
.paso h3 { font-size: 1.08rem; font-weight: 700; color: var(--texto); margin: 0 0 .6rem; }
.paso p { margin: 0; color: var(--gris); font-size: .95rem; }

/* --- Acordeón de preguntas ----------------------------------------------- */
.acordeon { max-width: 90ch; }
.acordeon details {
    border-bottom: 1px solid var(--borde);
}
.acordeon summary {
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 2.5rem 1.15rem 0;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--texto);
    position: relative;
    line-height: 1.5;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary:hover { color: var(--azul); }
.acordeon summary::after {
    content: "";
    position: absolute;
    right: .5rem;
    top: 1.65rem;
    width: .55rem;
    height: .55rem;
    border-right: 2px solid var(--azul);
    border-bottom: 2px solid var(--azul);
    transform: rotate(45deg);
    transition: transform .2s;
}
.acordeon details[open] summary::after { transform: rotate(-135deg); }
.acordeon details[open] summary { color: var(--azul); }
.acordeon .respuesta { padding: 0 2.5rem 1.4rem 0; margin: 0; color: var(--gris); }

/* --- Descargas ----------------------------------------------------------- */
.descargas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.descarga {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: .95rem 1.35rem;
    text-decoration: none;
    color: var(--texto);
    font-weight: 600;
    font-size: .93rem;
    transition: border-color .15s, box-shadow .15s;
}
.descarga:hover, .descarga:focus-visible {
    border-color: var(--azul);
    box-shadow: 0 6px 18px rgba(3, 87, 175, .12);
    color: var(--azul);
}
.descarga svg { flex: 0 0 auto; width: 20px; height: 20px; fill: var(--azul); }
.descarga small { display: block; font-weight: 400; color: var(--gris); font-size: .8rem; }

@media (max-width: 860px) {
    .franja-interior { justify-content: center; text-align: center; }
    .sello { justify-content: center; }
    .cifras { justify-content: center; gap: 1.75rem; width: 100%; }
    .cifra b { font-size: 1.6rem; }
}

/* ==========================================================================
   PÁGINAS INTERIORES
   La foto deja de salir suelta a tamaño completo y pasa a ser el fondo de un
   banner de altura controlada, con el título encima. Debajo, ancho de lectura
   cómodo y, en los documentos largos, índice lateral fijo.
   ========================================================================== */

/* --- Banner de cabecera -------------------------------------------------- */
.banner {
    position: relative;
    display: grid;
    min-height: clamp(230px, 32vh, 330px);
    background: var(--azul);
    overflow: hidden;
}
.banner > * { grid-area: 1 / 1; }

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

.banner-velo {
    background: linear-gradient(to right,
        rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .55) 38%,
        rgba(0, 0, 0, .18) 68%, rgba(0, 0, 0, .05) 100%);
}
/* Sin foto, el azul corporativo basta y no hace falta oscurecer */
.banner.sin-foto .banner-velo { background: none; }

.banner-interior {
    position: relative;
    align-self: end;
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 2rem 1.25rem 2.25rem;
    color: #fff;
}
.banner h1 {
    font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.015em;
    margin: 0;
    max-width: 24ch;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .3);
    text-wrap: balance;
}
.banner h1 em { font-style: italic; }

/* Migas de pan */
.miga {
    font-size: .85rem;
    margin: 0 0 .9rem;
    color: rgba(255, 255, 255, .8);
}
.miga a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.miga a:hover { color: #fff; text-decoration: underline; }
.miga span { opacity: .55; margin: 0 .45rem; }

/* --- Cuerpo -------------------------------------------------------------- */
.pagina {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 3.25rem 1.25rem 4.5rem;
}
.pagina.con-indice {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
}

/* --- Índice de los documentos largos ------------------------------------- */
.indice {
    position: sticky;
    top: 92px;
    font-size: .88rem;
    border-left: 2px solid var(--borde);
    padding-left: 1.15rem;
}
.indice h2 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gris);
    margin: 0 0 .9rem;
    font-weight: 700;
}
.indice ol { list-style: none; margin: 0; padding: 0; }
.indice li { margin-bottom: .5rem; line-height: 1.45; }
.indice a { color: var(--texto-suave); text-decoration: none; }
.indice a:hover, .indice a:focus-visible { color: var(--azul); text-decoration: underline; }

/* --- Texto --------------------------------------------------------------- */
.articulo { max-width: 74ch; }
.pagina.con-indice .articulo { max-width: none; }

.articulo > p, .articulo > ul, .articulo > ol { margin: 0 0 1.15rem; }
.articulo li { margin-bottom: .5rem; }

.articulo h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--texto);
    margin: 2.75rem 0 1rem;
    line-height: 1.3;
    scroll-margin-top: 100px;   /* que el enlace del índice no lo deje bajo la cabecera */
    text-wrap: balance;
}
.articulo h2:first-child { margin-top: 0; }
.articulo h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--azul);
    margin: 2rem 0 .75rem;
    scroll-margin-top: 100px;
}
.articulo h4 { font-size: 1rem; font-weight: 700; color: var(--texto-suave); margin: 1.5rem 0 .6rem; }

.articulo a { color: var(--azul); }
.articulo img { border-radius: 8px; margin: 1.5rem 0; }
.articulo strong { color: var(--texto); }

/* Una tabla ancha debe poder desbordar dentro de su caja, nunca romper la página */
.tabla-scroll { overflow-x: auto; margin: 0 0 1.75rem; -webkit-overflow-scrolling: touch; }
.articulo table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: .93rem;
}
.articulo th, .articulo td {
    border: 1px solid var(--borde);
    padding: .65rem .85rem;
    text-align: left;
    vertical-align: top;
}
.articulo thead th {
    background: var(--azul);
    color: #fff;
    font-weight: 700;
    font-size: .9rem !important;   /* los originales traían font-size en línea */
    border-color: var(--azul-oscuro);
}
.articulo tbody tr:nth-child(even) { background: var(--gris-claro); }

/* --- Cierre de página ---------------------------------------------------- */
.cierre {
    background: var(--gris-claro);
    border-top: 1px solid var(--borde);
    padding: 3rem 1.25rem;
}
.cierre-interior {
    max-width: var(--ancho);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.cierre p { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--texto); }
.cierre small { display: block; font-weight: 400; color: var(--gris); font-size: .92rem; margin-top: .2rem; }

@media (max-width: 900px) {
    .pagina.con-indice { grid-template-columns: 1fr; gap: 2rem; }
    .indice { position: static; border-left: none; border-top: 2px solid var(--borde);
              padding: 1.25rem 0 0; }
    .indice ol { columns: 2; column-gap: 1.5rem; }
}
@media (max-width: 560px) {
    .indice ol { columns: 1; }
}

/* Envoltorios que traían las páginas del tema viejo. No se borran del marcado
   —quitar solo la apertura descuadraba los </div>— sino que se neutralizan:
   display:contents hace que no generen caja y sus hijos se comporten como si
   colgaran directamente del <article>. */
.heredado { display: contents; }

/* El apartado "Estudiar fuera" no puede llevar aria-current (no es un enlace),
   así que su estado activo se marca igual que el de los demás: blanco pleno,
   negrita y línea. */
.desplegable.activo > summary {
    color: #fff;
    font-weight: 700;
    border-bottom-color: #fff;
}

/* --- Mapa bajo demanda ---------------------------------------------------
   El iframe de Google Maps no se carga hasta que el visitante lo pide. Así no
   sale ni una petición a Google —ni IP ni cookies— sin decisión previa. */
.mapa {
    position: relative;
    background: var(--gris-claro);
    border: 1px solid var(--borde);
    border-radius: 10px;
    min-height: 320px;
    display: grid;
    place-items: center;
    padding: 2rem 1.5rem;
    margin: 0 0 2rem;
    overflow: hidden;
}
.mapa-aviso { max-width: 46ch; text-align: center; }
.mapa-aviso p { margin: 0 0 1rem; }
.mapa-aviso p:last-child { margin-bottom: 0; }
.mapa-nota { font-size: .9rem; color: var(--gris); line-height: 1.55; }
.mapa-alternativa {
    display: inline-block;
    margin-left: 1rem;
    font-size: .93rem;
    font-weight: 600;
}
/* Cuando ya se ha cargado, el iframe ocupa toda la caja */
.mapa.cargado { padding: 0; display: block; min-height: 0; }
.mapa.cargado iframe { display: block; width: 100%; height: 420px; border: 0; }

@media (max-width: 560px) {
    .mapa-alternativa { display: block; margin: .9rem 0 0; }
}

/* --- Bloque de datos de contacto ------------------------------------------
   Su CSS propio le pone fondo azul (.inner-container). Los enlaces de dentro
   tienen que ir en blanco, o se pierden contra el fondo. */
.contact-page-section .info-column a,
.contact-page-section .info-column li,
.contact-page-section .info-column p { color: #fff; }
.contact-page-section .info-column a { text-decoration: underline; }
.contact-page-section .info-column a:hover,
.contact-page-section .info-column a:focus-visible { color: #fff; }