/* ═══════════════════════════════════════════════════════════════════
 * LAYOUT.CSS · cabecera, menú y pie — ORIGEN ÚNICO
 * -------------------------------------------------------------------
 * Antes este CSS vivía dentro de nav_helper.php y solo lo recibían las
 * páginas PHP. Las .html (portada, contacto, aula, legales, 404) usaban
 * las MISMAS clases pero servidas desde styles.css, con otros tamaños y
 * otra tipografía: por eso la cabecera cambiaba de una pantalla a otra.
 *
 * Ahora hay un solo archivo. renderLayoutStyles() enlaza aquí, y las
 * .html llevan el mismo <link>. Si tocas la cabecera, se toca aquí y
 * cambia en todas partes a la vez.
 * ═══════════════════════════════════════════════════════════════════ */

/* Tipografía unificada — misma en TODAS las páginas */
/* El margen que trae el navegador por defecto.
   Los navegadores ponen `body { margin: 8px }` si nadie dice lo contrario.
   Tres páginas —el buscador, el catálogo y el diagnóstico— nunca lo
   quitaron, así que iban 8 px corridas a la derecha: en un móvil de 390
   eso son 16 px regalados, y sobre todo hacía que el logo, el texto y el
   pie empezaran cada uno en una vertical distinta. Se quita aquí, que es
   el sitio que comparten todas. */
body { margin: 0; }

body, button, input, select, textarea {
    font-family: var(--ap-texto, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
    -webkit-font-smoothing: antialiased;
}
/* Ocultar cualquier "Saltar al contenido" heredado de versiones previas */
/* ── Enlace de salto al contenido ──────────────────────────────────
   Estaba en «display:none !important», que es lo mismo que no tenerlo:
   se anadio asi para tapar un enlace roto que apuntaba a #main y a
   #ap-main, ids que no existen en ninguna pagina. El enlace bueno apunta
   a #contenido, que si existe, y este es el patron correcto: fuera de la
   pantalla hasta que recibe el foco, y entonces aparece arriba del todo.
   Sin el, quien navega con teclado pasa por las once entradas del menu
   en CADA pagina antes de llegar al texto.

   Los dos enlaces viejos siguen ocultos: apuntan a ninguna parte. */
a[href="#ap-main"], a[href="#main"] { display: none !important; }

.ap-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    /* Es el primer control de la pagina para quien navega con teclado o
       lector: cuando aparece tiene que medir lo que mide un dedo. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 18px;
    background: #006989;
    color: #fff;
    font-family: var(--ap-texto, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}
.ap-skip:focus {
    left: 0;
    outline: 3px solid #006989;
    outline-offset: 2px;
}

/* ═══════════════════ HEADER + NAVBAR ═══════════════════ */
/* La cabecera fija SU tipografía y SU tamaño en vez de heredarlos de cada
   página. Heredándolos pasaba esto: cursos.php tiene body{font-size:15px} y
   el menú, que iba en em, salía a 14,1 px en vez de 15,04; y catalogo.php
   envuelve todo en .cat-page{font-family:Roboto} y la cabecera salía en otra
   letra. Cualquier página que toque su tipografía base la descuadraba. */
.site-header, .site-header button, .site-header input, .site-header select {
    font-family: var(--ap-texto, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
    font-size: 16px;
    /* También el interlineado: unas páginas lo tenían en 1.55 y otras en
       `normal`, y eso movía la cabecera 2 px en móvil. Todo lo que la
       cabecera pueda heredar de la página, se fija aquí. */
    line-height: 1.55;
}
.site-header {
    background: #fff;
    border-bottom: 1px solid #dce6ea;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.site-header-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.site-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-logo img { display: block; height: 44px; width: auto; }

.main-nav { flex: 1; }
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.main-nav li { position: relative; }
.main-nav a,
.main-nav .nav-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    color: #10262f;
    font: inherit;
    /* 15,04 px fijos: 0.94em dependía del tamaño base de cada página. */
    font-size: 15.04px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.main-nav a:hover,
.main-nav .nav-dropdown-btn:hover { background: #f3f8f9; color: #006989; }
.main-nav a.active,
.main-nav .nav-dropdown-btn.active {
    color: #006989;
    background: #eff7f9;
}
.main-nav .nav-chev { transition: transform .2s; opacity: .6; }
.main-nav .nav-dropdown[data-open] .nav-chev { transform: rotate(180deg); }

/* Dropdown "Recursos formativos" */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    /* Anclado a la DERECHA del disparador: el nav está alineado a la derecha,
       así el panel se despliega hacia dentro y nunca se sale de la pantalla.
       Antes usaba left:0 sin ancho fijo y crecía hasta ~700px, lo que provocaba
       scroll horizontal en TODAS las páginas del sitio. */
    left: auto;
    right: 0;
    background: #fff;
    border: 1px solid #dce6ea;
    border-radius: 10px;
    width: 340px;
    /* ver más abajo: el primero se ancla al revés */
    max-width: calc(100vw - 32px);
    padding: 16px;
    overflow-wrap: anywhere;
    box-shadow: 0 10px 30px rgba(15,23,42,.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .16s, visibility .16s, transform .16s;
    z-index: 200;
}
/* El PRIMER desplegable se ancla a la izquierda, no a la derecha.
   Anclar todos a la derecha resolvía un problema —un panel sin ancho fijo
   que crecía hasta 700 px y provocaba scroll horizontal— pero creaba otro
   en el primero: «Formación» está pegado al logotipo, y un panel de 340 px
   colgando hacia su izquierda no tiene sitio. Medido: se salía 96 px a
   1030 de ventana, 26 a 1100 y 23 incluso a 1280, o sea en casi todo el
   escritorio. Los demás sí tienen sitio a la izquierda, porque el menú va
   alineado a la derecha. */
.main-nav > ul > li.nav-dropdown:first-child > .nav-dropdown-menu {
    left: 0;
    right: auto;
}

.nav-dropdown[data-open] .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-dropdown-intro {
    color: #4d5a71;
    font-size: 0.82em;
    line-height: 1.55;
    margin: 0 0 12px;
    padding: 2px 4px 10px;
    border-bottom: 1px solid #f3f8f9;
}
/* Los elementos del desplegable llevan DOS líneas dentro (título y
   descripción), así que tienen que apilarse y poder cortar.
   Iban en fila y sin cortar porque `.main-nav a` —que es inline-flex y
   nowrap— pesa más en la cascada que `.nav-dropdown-item`: la descripción
   salía al lado del título, en una sola línea, y se desbordaba del panel.
   De ahí venía el `!important` del padding, que tapaba el síntoma.
   Con el selector completo gana esta regla y el !important sobra. */
.main-nav .nav-dropdown-menu a.nav-dropdown-item {
    display: block;
    align-items: initial;
    gap: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    font-size: 1em;
    transition: background .12s;
}
.nav-dropdown-item:hover { background: #f4f8fa; }
.nav-dropdown-item.active { background: #eff7f9; }
.nav-dropdown-item-title {
    color: #006989;
    font-weight: 600;
    font-size: 0.94em;
    margin-bottom: 2px;
}
.nav-dropdown-item-desc {
    color: #5d747d;
    font-size: 0.82em;
    line-height: 1.45;
}

/* Icono usuario */
.nav-user-item { margin-left: 8px; }
.main-nav .nav-user {
    background: #f7fbfc;
    border: 1px solid #dce6ea;
    border-radius: 999px;
    padding: 6px 14px 6px 10px;
    color: #46606b;
    gap: 8px;
}
.main-nav .nav-user svg { width: 20px; height: 20px; }
.main-nav .nav-user.logged {
    background: #006989;
    color: #fff;
    border-color: #006989;
}
.main-nav .nav-user.logged:hover { background: #00506A; }
.nav-user-label { font-size: 0.88em; }

/* Hamburger móvil */
.nav-burger {
    display: none;
    background: none;
    border: 1px solid #dce6ea;
    border-radius: 8px;
    padding: 10px 8px;
    cursor: pointer;
    width: 42px;
    height: 40px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #10262f;
    border-radius: 1px;
    transition: transform .2s, opacity .2s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile ── */
/* El menu pasa a hamburguesa por debajo de 1024 px, no de 880.
   Con las cinco entradas mas el boton de la Radiografia el menu mide 825 px:
   a 900 px de ventana no cabia junto al logotipo y la pagina cogia scroll
   horizontal, que es de las cosas que peor sientan y de las que menos se
   miran. Si algun dia el menu adelgaza, este numero puede volver a bajar,
   pero entonces hay que bajar tambien el matchMedia de nav_helper.php: los
   dos tienen que decir lo mismo o el desplegable se abre con hover en una
   pantalla tactil. */
/* El velo del menú de móvil, apagado por defecto.
   Esto va FUERA de la media query a propósito. El elemento lo crea el
   JavaScript y vive en el <body> en todas las pantallas; si sus estilos
   solo existieran dentro de «max-width:1024px», en escritorio se quedaba
   sin ninguno y el navegador lo pintaba como lo que es —un <button>
   vacío— dejando un rectángulo de 4x44 px colgando al final de la
   página. Se veía. */
.nav-velo { display: none; }

/* ═══ EL MENU EN MOVIL ═════════════════════════════════════════════
   Antes esto era un panel colgando de la cabecera con «position:
   absolute; top:100%». Tres problemas, y los tres se notaban al usarlo:

     · Con un desplegable abierto medía 836 px de alto en una pantalla
       de 812: las últimas entradas quedaban por debajo del borde y el
       panel no tenía scroll propio, así que había que cerrar el
       desplegable para poder llegar a lo de abajo.
     · No se cerraba al tocar fuera. Había que acertar otra vez en el
       botón, que es lo último que espera nadie en un móvil.
     · No había fondo: el menú se leía encima del texto de la página,
       con las dos cosas compitiendo.

   Ahora es un panel lateral: ocupa el alto de la pantalla, tiene su
   propio scroll, oscurece lo de detrás y se cierra tocando fuera, con
   Escape o con la X. Que es como funciona un menú en un teléfono.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .site-header-inner { padding: 12px 18px; }
    .site-logo img { height: 38px; }
    .nav-burger { display: inline-flex; }

    /* El botón de menú, a la derecha del todo.
       Por debajo de 1024 el <ul> pasa a position:fixed —o sea que sale
       del flujo—, así que dentro de <nav class="main-nav"> el único
       hijo que ocupa sitio es el botón. Y .main-nav es un bloque, de
       modo que el botón se quedaba pegado al logotipo: medido a 375 px,
       el logo acaba en x=69 y el botón iba de 93 a 137, con 218 px de
       barra vacía a su derecha. En un teléfono el pulgar va a la
       esquina, no al centro-izquierda. */
    .main-nav { display: flex; justify-content: flex-end; align-items: center; }

    .main-nav ul {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(86vw, 340px);
        /* dvh y no vh: en el móvil la barra del navegador aparece y
           desaparece, y con vh el panel se corta por abajo justo cuando
           la barra está visible. */
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;   /* al llegar al final no arrastra la página */
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        /* el hueco de arriba deja ver el logotipo y la X de la cabecera */
        padding: 76px 16px calc(24px + env(safe-area-inset-bottom, 0px));
        /* En escritorio el <ul> lleva «justify-content: flex-end» para
           empujar el menú a la derecha. Aquí la dirección es columna, así
           que ese mismo flex-end empujaba las entradas hacia ABAJO y
           dejaba media pantalla en blanco encima. Se ve enseguida y no
           tiene ninguna explicación para quien lo mira. */
        justify-content: flex-start;
        border-top: 0;
        border-left: 1px solid #dce6ea;
        box-shadow: -14px 0 40px rgba(16,38,47,.16);
        gap: 2px;
        display: flex;
        z-index: 99;
        transform: translateX(101%);
        visibility: hidden;
        transition: transform .26s cubic-bezier(.4,0,.2,1), visibility 0s .26s;
    }
    .main-nav[data-open] ul {
        transform: none;
        visibility: visible;
        transition: transform .26s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
    }

    /* El velo. Va detrás del panel y delante de la página. */
    .nav-velo {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(16,38,47,.46);
        opacity: 0;
        pointer-events: none;
        transition: opacity .26s ease;
        z-index: 98;
        border: 0;
        padding: 0;
        margin: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-velo[data-open] { opacity: 1; pointer-events: auto; }

    /* Las tres rayas se convierten en una X cuando está abierto: el
       mismo botón abre y cierra, y se ve cuál de las dos cosas hace. */
    .nav-burger span { transition: transform .22s ease, opacity .18s ease; }
    .main-nav[data-open] .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .main-nav[data-open] .nav-burger span:nth-child(2) { opacity: 0; }
    .main-nav[data-open] .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* El botón, por encima del panel para poder cerrarlo desde ahí. */
    .nav-burger {
        position: relative;
        z-index: 101;
        width: 44px;
        height: 44px;   /* 42x40 se queda corto para un pulgar */
    }

    @media (prefers-reduced-motion: reduce) {
        .main-nav ul, .nav-velo, .nav-burger span { transition: none; }
    }
    .main-nav li, .main-nav a, .main-nav .nav-dropdown-btn { width: 100%; }
    .main-nav a, .main-nav .nav-dropdown-btn {
        justify-content: flex-start;
        padding: 12px 14px;
        font-size: 1em;
    }
    .nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 4px 0 10px 14px;
        min-width: 0;
        width: auto;          /* en móvil fluye con el menú, sin ancho fijo */
        max-width: none;
        display: none;
    }
    .nav-dropdown[data-open] .nav-dropdown-menu { display: block; }
    .nav-dropdown-intro { padding: 6px 8px 10px 0; }
    .nav-user-item { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid #f3f8f9; }
    /* Mismo padding que el resto de entradas: iba con 10 px y las demas
       con 14, y el texto de «Acceder» empezaba cuatro pixeles a la
       izquierda de la columna que forman las otras siete. Se ve. */
    .main-nav .nav-user { width: 100%; justify-content: flex-start; padding: 12px 14px; }
}

/* ═══════════════════ PIE DE PÁGINA ═══════════════════
   Un único pie para toda la web. Se defiende solo: declara su propia
   tipografía, su alineación y sus márgenes, porque styles.css todavía
   trae del sitio antiguo `footer { text-align:center }` y
   `footer a { margin: 0 10px }`, que se colaban aquí y descolocaban todo.
   Estructura:  [marca]  ......espacio......  [columnas de enlaces]
                ───────────────────────────────────────────────────
                [legal]                              [aviso/privacidad]
   El bloque de columnas va en flex, así que da igual que una página
   tenga una columna o tres: siempre queda pegado a la derecha.       */
.site-footer {
    --pie-tinta: #10262f;
    --pie-suave: #55647c;
    --pie-tenue: #5b6980;
    --pie-linea: #e3e8ef;
    --pie-navy:  #006989;   /* del logotipo */
    --pie-teal:  #006989;
    background: #f7f9fb;
    border-top: 1px solid var(--pie-linea);
    margin-top: 56px;
    color: var(--pie-suave);
    font-family: var(--ap-texto, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
}
.site-footer a { margin: 0; }
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
/* La cabecera necesita el mismo trato: dentro va el panel de movil, donde
   las entradas llevan relleno propio y ancho completo. Sin border-box el
   relleno se SUMA al ancho y se salen por la derecha. */
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-footer :focus-visible { outline: 2px solid var(--pie-teal); outline-offset: 3px; border-radius: 4px; }

.site-footer-top {
    max-width: 1160px;
    margin: 0 auto;
    padding: 44px 28px 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 56px;
}

/* ── Columna de marca ── */
.site-footer-brand { flex: 0 1 380px; min-width: 0; }
.site-footer-logo { display: inline-flex; margin: 0 0 14px; }
.site-footer-logo img { display: block; height: 36px; width: auto; }
/* El ambito. Va justo debajo del lema y algo mas apagado: no es la promesa,
   es un dato que quita una duda -si desde mi provincia se puede contratar- que
   casi todas las webs del sector dejan sin responder. */
.site-footer-ambito {
    margin: -8px 0 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--pie-tenue);
    max-width: 34ch;
}

.site-footer-tag {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--pie-suave);
    max-width: 34ch;
}
.site-footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.site-footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 7px 14px;
    border: 1px solid var(--pie-linea);
    border-radius: 999px;
    background: #fff;
    color: #2e4a55;
    font-size: 13px;
    text-decoration: none;
    word-break: break-word;
    transition: border-color .15s, color .15s, box-shadow .15s;
}
.site-footer-contact a:hover {
    border-color: #c3d0e0;
    color: var(--pie-navy);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.site-footer-contact svg { color: var(--pie-teal); flex-shrink: 0; width: 14px; height: 14px; }

/* ── Bloque de columnas ── */
.site-footer-nav {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 28px 56px;
}
/* Si alguna página vieja no trae el envoltorio .site-footer-nav,
   la primera columna suelta se empuja igualmente a la derecha. */
.site-footer-brand + .site-footer-col { margin-left: auto; }

.site-footer-col { min-width: 132px; }
/* En escritorio el <details> está siempre abierto y su summary es solo el
   título: ni cursor de mano, ni signo, ni nada que invite a pulsarlo,
   porque ahí no se pliega. */
.site-footer-col > summary { list-style: none; display: block; }
.site-footer-col > summary::-webkit-details-marker { display: none; }
.site-footer-col > summary h2 { margin: 4px 0 12px; }
/* Los titulos de columna del pie son h2 desde la auditoria de las fases 1-4:
   un h4 detras del ultimo h2 de la pagina salta dos niveles y deja un hueco
   para quien navega por encabezados. El selector nombra los dos para que
   nada se vea distinto si en algun sitio queda un h4 sin migrar. */
.site-footer-col h2,
.site-footer-col h4 {
    color: var(--pie-tinta);
    /* 12 px es el minimo de la casa para un rotulo en versalita: con 11 y
       0,09em de espaciado el pie se lee peor que la letra pequena de un
       contrato, y sale en todas las paginas. */
    font-size: 12px;
    font-weight: 700;
    margin: 4px 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.site-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.site-footer-col a {
    color: var(--pie-suave);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.4;
    transition: color .15s;
}
.site-footer-col a:hover { color: var(--pie-navy); }

/* ── Barra inferior ── */
.site-footer-bar {
    border-top: 1px solid var(--pie-linea);
    max-width: 1160px;
    margin: 0 auto;
    padding: 16px 28px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px 24px;
    flex-wrap: wrap;
}
.site-footer-legal {
    color: var(--pie-tenue);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.site-footer-dot { color: #607189; }
.site-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    align-items: center;
}
.site-footer-links a {
    color: var(--pie-suave);
    text-decoration: none;
    font-size: 12px;
    transition: color .15s;
}
.site-footer-links a:hover { color: var(--pie-navy); }

@media (max-width: 900px) {
    .site-footer-top { gap: 30px 40px; }
    .site-footer-nav { gap: 26px 40px; }
    .site-footer-brand { flex: 1 1 100%; max-width: 480px; }
    .site-footer-nav { margin-left: 0; }
    .site-footer-brand + .site-footer-col { margin-left: 0; }
}
/* ── En el móvil se toca con el pulgar, no con un ratón ──────────────
   Medido en un teléfono de 390 px: los enlaces del pie tenían 16 px de
   alto y 9 px de separación. Eso no se acierta: se falla y se acaba en
   la página de al lado. Con padding vertical pasan a 40 px, que es lo
   que pide la norma de accesibilidad para un objetivo táctil, y de paso
   la lista se lee mejor.
   Solo en móvil: en escritorio el ratón acierta y ese aire sobra. */
/* ── Un solo margen lateral en el móvil ──────────────────────────────
   Medido a 390 px: el logo empezaba a 26 px del borde, el texto de la
   página a 24 y el pie a 28. Nadie sabría decir qué falla, pero se ve:
   las tres bandas de la página no arrancan de la misma vertical.
   20 px para las tres. */
@media (max-width: 560px) {
    .site-header-inner { padding-left: 20px; padding-right: 20px; }
    .site-footer-top   { padding-left: 20px; padding-right: 20px; }
    .site-footer-bar   { padding-left: 20px; padding-right: 20px; }
}

@media (hover: none) and (pointer: coarse) {
    /* El objetivo táctil mínimo es 44px y esto se quedaba en 41,6: con 12px de
       letra, 13 de relleno arriba, 15,6 de interlínea y 13 abajo salen 41,6.
       Faltaban 2,4 px, que no se ven pero se fallan con el pulgar —y son
       justo los enlaces legales, que es donde alguien va con prisa—. Se pone
       el mínimo escrito en vez de dejarlo salir de una suma, para que no se
       vuelva a quedar corto si algún día cambia la interlínea. */
    .site-footer-col a,
    .site-footer-links a {
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
        min-height: 44px;
        padding: 13px 0;
        line-height: 1.3;
    }
    .site-footer-col ul { gap: 0; }
    .site-footer-links { gap: 6px 20px; }
    .site-footer-logo img { height: 40px; }
}

@media (max-width: 560px) {
    .site-footer-top { padding: 34px 20px 26px; gap: 26px 32px; }
    .site-footer-nav { gap: 24px 32px; width: 100%; }
    .site-footer-col { min-width: 44%; flex: 1 1 44%; }
    .site-footer-bar {
        padding: 14px 20px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .site-footer-links { gap: 16px; flex-wrap: wrap; }
}

/* ═══════════════════ TELÉFONO Y LLAMADA A LA ACCIÓN EN EL MENÚ ═══════
   Añadidos en la fase 2 del mapa de la web.

   Los dos van dentro del mismo <ul> que las entradas del menú, y no en un
   contenedor aparte: en móvil el CSS de más abajo convierte ese <ul> en el
   panel desplegable, así que todo lo que esté dentro entra solo. Un
   contenedor aparte habría obligado a duplicar la lógica del móvil.
   ═══════════════════════════════════════════════════════════════════ */

.nav-tel-item { margin-left: 6px; }
.main-nav .nav-tel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 650;
    color: #006989;
    white-space: nowrap;
}
.main-nav .nav-tel:hover { background: #eff7f9; color: #006989; }
.main-nav .nav-tel svg { opacity: .75; flex-shrink: 0; }

.nav-cta-item { margin-left: 4px; }
.main-nav .nav-cta {
    background: #006989;
    color: #fff;
    font-weight: 650;
    border-radius: 8px;
    padding: 10px 16px;
    white-space: nowrap;
}
.main-nav .nav-cta:hover { background: #00506A; color: #fff; }
.main-nav .nav-cta.active,
.main-nav .nav-cta:focus-visible { background: #00506A; color: #fff; }

/* Entre los 1025 y los 1180 px caben las cinco entradas, el botón y el icono
   de usuario, pero no además el teléfono: se sale de la barra. Ahí se
   esconde, y sigue estando en el pie de todas las páginas y dentro del
   panel del móvil. */
@media (min-width: 1025px) and (max-width: 1180px) {
    .nav-tel-item { display: none; }
}

/* «Inicio» solo existe en el cajón del móvil: en escritorio el logotipo
   ya lleva a la portada y la barra va justa de sitio. */
.nav-inicio-item { display: none; }

@media (max-width: 1024px) {
    /* En el panel del móvil recuperan el ancho completo y el orden natural:
       primero navegar, luego llamar, luego la Radiografía. */
    .nav-tel-item, .nav-cta-item { margin: 0; width: 100%; }

    .nav-inicio-item { display: block; width: 100%; }
    .main-nav .nav-inicio {
        display: flex;
        align-items: center;
        gap: 11px;
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
        /* La misma sangría y el mismo tamaño que «Formación» o «Catálogo»:
           es una entrada más del menú, no un adorno. */
        padding: 12px 14px;
        font-size: 1em;
        text-decoration: none;
    }
    .main-nav .nav-inicio svg { flex: none; opacity: .75 }
    /* Una raya debajo lo separa del resto: es «volver al principio», no una
       sección del sitio como las de abajo. */
    .nav-inicio-item::after {
        content: "";
        display: block;
        height: 1px;
        margin: 8px 0 4px;
        background: var(--nav-linea, #dce6ea);
    }
    .main-nav .nav-tel {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 14px;
        font-size: 1em;
    }
    .nav-cta-item { margin-top: 8px; }
    .main-nav .nav-cta {
        width: 100%;
        justify-content: center;
        padding: 14px 16px;
        font-size: 1em;
        min-height: 48px;   /* sitio para el dedo, no solo para el ratón */
    }
}

/* ═══════════════════ EL PIE EN MOVIL ══════════════════════════════
   Medido: ocupaba 926 px en una pantalla de 812, un quinto de toda la
   pagina. Las tres columnas de enlaces se apilaban en una sola porque
   habia un rotulo largo que no dejaba entrar dos, asi que se fuerza la
   rejilla a dos columnas y se acorta ese rotulo. Baja a la mitad sin
   quitar ni un enlace y sin tocar el tamano de los objetivos tactiles.
   ═══════════════════════════════════════════════════════════════════ */
/* El pie medía 883 px en una pantalla de 812. Más de una pantalla entera
   de pie, y en la página del catálogo era MÁS ALTO QUE EL CATÁLOGO: 883
   contra 865 de contenido. Un pie es el sótano de la casa, no una planta
   más.

   Lo que ocupaba: bloque de marca 251, enlaces 450, barra legal 105.
   Aquí se recorta cada uno sin quitar ni un enlace ni bajar de los 44 px
   de zona táctil. El objetivo es que quepa en media pantalla. */
@media (max-width: 560px) {
    .site-footer { margin-top: 40px; }

    .site-footer-top { padding: 24px 20px 18px; gap: 18px 24px; }

    /* La marca: el lema y el ámbito son dos párrafos que dicen casi lo
       mismo de seguido. Se juntan en un bloque apretado. */
    .site-footer-brand { max-width: none; }
    .site-footer-logo { margin-bottom: 10px; }
    .site-footer-logo img { height: 30px; }
    .site-footer-tag { margin: 0 0 4px; max-width: none; font-size: 13px; line-height: 1.5; }
    .site-footer-ambito { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; }

    /* Los dos botones de contacto, uno al lado del otro en vez de
       apilados: son cortos y ganan 40 px de alto. */
    .site-footer-contact { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .site-footer-contact a { padding: 9px 13px; font-size: 12.5px; }

    .site-footer-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 20px;
        margin-left: 0;
    }
    .site-footer-col { min-width: 0; }
    /* El rótulo de columna, en la voz de la casa: monoespaciada pequeña
       y espaciada, como la leyenda de un aparato. Antes era el titulito
       en negrita de cualquier pie, que es lo que hace que todos los pies
       se parezcan. */
    .site-footer-col h2, .site-footer-col h4 {
        font-family: var(--ap-dato, ui-monospace, Consolas, monospace);
        font-size: 12px;
        letter-spacing: .1em;
        margin: 0 0 7px;
        color: var(--pie-teal);
    }
    .site-footer-col ul { gap: 4px; padding-top: 6px; }
    .site-footer-col a { font-size: 13.5px; line-height: 1.3; }

    /* Plegable: se ven los tres rótulos y se abre el que interese.
       En escritorio el <details> va con «open» y el summary se comporta
       como el título de siempre; aquí se le añade el signo. */
    .site-footer-col > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        list-style: none;
        cursor: pointer;
        min-height: 44px;          /* la medida minima de un dedo */
        -webkit-tap-highlight-color: transparent;
    }
    .site-footer-col > summary::-webkit-details-marker { display: none; }
    .site-footer-col > summary::after {
        content: "";
        width: 8px; height: 8px;
        border-right: 1.5px solid var(--pie-teal);
        border-bottom: 1.5px solid var(--pie-teal);
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform .18s ease;
        flex: none;
    }
    .site-footer-col[open] > summary::after {
        transform: rotate(-135deg) translate(-2px, -2px);
    }
    .site-footer-col > summary h2 { margin: 0; }

    /* Una línea entre grupos: se ve que son tres cosas y no una lista. */
    .site-footer-nav {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .site-footer-col + .site-footer-col {
        border-top: 1px solid var(--pie-linea);
    }

    @media (prefers-reduced-motion: reduce) {
        .site-footer-col > summary::after { transition: none; }
    }

    /* La barra legal: en una columna apretada, no en dos filas con aire. */
    .site-footer-bar { padding: 12px 20px 16px; gap: 6px; }
    .site-footer-legal, .site-footer-links { font-size: 12px; line-height: 1.45; }
}

/* El botón «Cambiar cookies» del pie: se ve como los enlaces de al lado,
   no como un botón. Es un enlace en todo menos en que abre un panel. */
.site-footer-cookies {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
    text-decoration: none;
}
.site-footer-cookies:hover { color: var(--pie-navy); text-decoration: underline; }