/* ═══════════════════════════════════════════════════════════════════
   IDENTIDAD.CSS — la voz visual de la casa.

   Se carga LA ÚLTIMA, después de styles.css, layout.css, paginas.css y
   ap-panel.css. Por eso gana sin tener que inventar selectores absurdos
   ni sembrar !important: a igualdad de especificidad manda el último que
   habla. Así el panel, el área de cliente, el diagnóstico y las páginas
   públicas acaban con la misma voz sin reescribir las cuatro hojas.

   ── La idea ────────────────────────────────────────────────────────
   Esta empresa mide cosas. Mide si una formación aguantaría una
   inspección y mide en qué punto está una organización en seis
   procesos. Así que la web se comporta como un instrumento de medida:

     · las secciones se separan con una regla milimetrada, no con un
       recuadro;
     · los rótulos van en monoespaciada espaciada, como la leyenda de
       un aparato;
     · las cifras van en tabular, alineadas en columna;
     · el color pleno se guarda para los dos o tres momentos que
       importan, en vez de repartirse en tarjetas por todas partes.

   ── La tipografía ──────────────────────────────────────────────────
   Antes ponía Inter y la traía de Google. Dos problemas: Inter es
   exactamente la tipografía que lleva todo lo generado por IA —se
   reconoce a la legua—, y el enlace hacía que el navegador de cada
   visitante contactara con Google y le entregara su IP, cosa que hay
   que declarar cuando tienes una política de privacidad publicada.

   Ahora, alojadas aquí y con tres papeles distintos:

     Archivo · los titulares. Grotesca ancha y contundente en los pesos
       altos: se lee como rótulo de organismo, no como revista. Aquí va
       en 700 y muy apretada, que es donde tiene carácter.
     Public Sans · el texto. Es la del sistema de diseño del gobierno de
       EE.UU., hecha para formularios y trámites, que es literalmente lo
       que se cuenta en esta web. Sobria, sin gestos, muy legible en
       cuerpo pequeño.
     IBM Plex Mono · los rótulos, las cifras y las REF AP. Es la voz
       del instrumento: técnica, precisa, y visualmente distinta del
       texto, que es lo que hace que un dato se lea como un dato.

   Nota: solo se descarga el estilo NORMAL de las dos. Nada de cursivas:
   si se pide una cursiva que no existe, el navegador la falsifica
   inclinando las letras, y una grotesca inclinada a la fuerza se ve
   exactamente como lo que es, un apaño.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Los tres papeles de la tipografía ────────────────────────── */
    --ap-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
    --ap-texto:   'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --ap-dato:    'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

    /* ── Escala fluida ─────────────────────────────────────────────
       clamp() en lugar de media queries para el cuerpo: el tamaño va
       creciendo con la pantalla en vez de dar tres saltos bruscos.
       Esto es la mitad de la optimización para móvil, y no se ve. */
    --ap-t-rotulo: clamp(.75rem, .70rem + .18vw, .82rem);
    --ap-t-menor:  clamp(.86rem, .83rem + .16vw, .94rem);
    --ap-t-base:   clamp(1rem,   .97rem + .18vw, 1.09rem);
    --ap-t-guia:   clamp(1.1rem, 1.02rem + .42vw, 1.35rem);
    --ap-t-h3:     clamp(1.14rem, 1.06rem + .4vw,  1.35rem);
    --ap-t-h2:     clamp(1.45rem, 1.24rem + 1.05vw, 2.1rem);
    --ap-t-h1:     clamp(2rem,   1.52rem + 2.4vw,  3.4rem);
    --ap-t-cifra:  clamp(2.2rem, 1.6rem + 3vw,     4rem);

    /* ── Ritmo vertical ───────────────────────────────────────────── */
    --ap-aire-s:   clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
    --ap-aire:     clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
    --ap-aire-l:   clamp(3.6rem, 2.4rem + 5vw,  6.4rem);

    /* Margen lateral: en un móvil de 360 px, 28 px por lado se comen
       el 16 % del ancho. Baja a 18 y crece con la pantalla. */
    --pg-gutter:   clamp(18px, 3.2vw, 32px);
}

/* ═══ 1. La voz base ══════════════════════════════════════════════ */

body {
    font-family: var(--ap-texto);
    font-size: var(--ap-t-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* El desbordamiento lateral es el fallo de móvil más común y el más
   difícil de ver desde un escritorio: una tabla ancha o una palabra
   larga y la página entera se va de lado. Se corta aquí, de raíz. */
html, body { overflow-x: clip; max-width: 100%; }

.pg-main, .ap-main, .ap-shell, .dgp-wrap, main {
    font-family: var(--ap-texto);
    font-size: var(--ap-t-base);
}

h1, h2, h3, h4, .pg-h1, .pg-h2, .ap-h1, .ap-titulo, .dgp-h1 {
    font-family: var(--ap-display);
    font-weight: 700;
    letter-spacing: -.02em;
    text-wrap: balance;              /* que no caiga una palabra sola */
    color: var(--pg-tinta, #10262F);
}

h1, .pg-h1, .ap-h1, .dgp-h1 { font-size: var(--ap-t-h1); line-height: 1.04; letter-spacing: -.035em; }
h2, .pg-h2 { font-size: var(--ap-t-h2); line-height: 1.18; }
h3         { font-size: var(--ap-t-h3); line-height: 1.3; }

p, li { text-wrap: pretty; }

/* Ancho de lectura. Una línea de 130 caracteres en un portátil obliga a
   buscar el principio del renglón siguiente y se abandona el párrafo. */
.pg-main p, .pg-main li { max-width: 68ch; }
.pg-centro p, .pg-hero p { margin-inline: auto; }

/* ═══ 2. El rótulo: la leyenda del aparato ════════════════════════ */

.ap-rotulo,
.pg-rotulo,
.pg-eyebrow,
.ap-eyebrow {
    font-family: var(--ap-dato);
    font-size: var(--ap-t-rotulo);
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pg-teal, #006989);
    display: flex;
    align-items: center;
    gap: .6em;
    margin: 0 0 .9em;
}
/* La rayita que lo precede: firma discreta, cuesta 0 bytes de imagen. */
.ap-rotulo::before,
.pg-rotulo::before,
.pg-eyebrow::before {
    content: "";
    width: 1.6em; height: 2px;
    background: currentColor;
    flex: none;
}

/* ═══ 3. La regla milimetrada ════════════════════════════════════
   El motivo de la casa. Separa secciones en lugar del recuadro gris de
   siempre, y dice algo verdadero de lo que se vende: aquí se mide.
   Es un degradado repetido, no una imagen: no pesa ni se pixela. */

/* Las marcas iban cada 11 px y medían 5 de alto: de lejos eso no es una
   regla, es un peine gris repetido por toda la página, y cantaba más que
   la idea que quería contar. Ahora van cada 22, miden 3 y son casi del
   color de la línea. Se ven al acercarse, que es cuando aportan. */
.ap-regla {
    height: 9px;
    border-bottom: 1px solid var(--pg-linea, #DCE6EA);
    background-image: repeating-linear-gradient(
        to right,
        var(--pg-linea, #DCE6EA) 0 1px,
        transparent 1px 22px);
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: 100% 3px;
    margin: var(--ap-aire) 0;
}
.ap-regla-corta { width: 68px; margin-inline: 0; }

/* Sobre fondo oscuro la regla se invierte sola. */
.ap-hondo .ap-regla {
    border-bottom-color: rgba(255,255,255,.28);
    background-image: repeating-linear-gradient(
        to right, rgba(255,255,255,.3) 0 1px, transparent 1px 22px);
}

/* ═══ 4. Las cifras ══════════════════════════════════════════════ */

.ap-cifra, .ap-dato, .pg-cifra,
td.num, th.num, .ap-num {
    font-family: var(--ap-dato);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -.01em;
}
.ap-cifra, .pg-cifra {
    font-size: var(--ap-t-cifra);
    font-weight: 600;
    line-height: 1;
    color: var(--pg-teal, #006989);
    display: block;
}
/* La REF AP y los códigos: monoespaciada para que se lean carácter a
   carácter, que es como se dictan por teléfono. */
.ref-ap, .ap-ref, code, kbd, samp {
    font-family: var(--ap-dato);
    font-size: .92em;
    letter-spacing: .01em;
}

/* Cualquier tabla con números se alinea en columna sin tener que
   marcar celda por celda. */
table { font-variant-numeric: tabular-nums; }

/* ═══ 5. El color, usado de verdad ═══════════════════════════════
   Un bloque a sangre en petróleo cada varias secciones ancla la página
   mucho mejor que veinte tarjetas con borde de color. */

.ap-hondo {
    background: var(--pg-teal-hondo, #00506A);
    color: #EAF4F7;
    padding: var(--ap-aire-l) 0;
    /* A sangre aunque esté dentro de un contenedor con ancho máximo. */
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}
.ap-hondo h1, .ap-hondo h2, .ap-hondo h3 { color: #fff; }
.ap-hondo .ap-rotulo, .ap-hondo .pg-rotulo { color: #8FD2E2; }
.ap-hondo a { color: #A8DFEB; }

/* Y el naranja: UNO por página, donde hay que mirar. Nunca de adorno. */
.ap-acento { color: var(--pg-naranja, #E94E1B); }
.ap-subraya {
    background-image: linear-gradient(var(--pg-naranja, #E94E1B), var(--pg-naranja, #E94E1B));
    background-size: 100% 3px;
    background-position: 0 88%;
    background-repeat: no-repeat;
    padding-bottom: .06em;
}

/* ═══ 6. Móvil ═══════════════════════════════════════════════════ */

/* Nada de zonas de toque de 30 px: el pulgar medio necesita 44.
   Se aplica solo en pantalla táctil para no engordar los menús del
   escritorio, donde el ratón acierta en 20 px sin problema. */
@media (hover: none) and (pointer: coarse) {
    /* Ojo: .pg-cta NO va en esta lista. Es el <div> que envuelve la
       llamada final de la página (php/pagina.php:129), no un botón, y
       aquí se le estaba dando display:inline-flex con justify-content
       :center. Efecto en las 18 páginas que la usan: el bloque entero
       se encogía y se centraba —medido a 375 px, el botón quedaba en
       x=99 con 177 px de ancho, cuando la columna va de 18 a 357—, con
       el titular y el párrafo alineados a la izquierda y el botón
       flotando en medio. El botón de dentro ya es .pg-btn. */
    a.btn, .ap-btn, .nav-cta,
    input[type="submit"], input[type="button"],
    [role="button"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Los enlaces del menú van aparte, y sin justify-content.
       Cuando iban en la regla de arriba pasaba esto: «.site-header nav a»
       pesa una clase y dos elementos, y le ganaba a «.main-nav a» de
       layout.css, que en el panel del móvil alinea a la izquierda a
       propósito. Pero a los desplegables no les ganaba, porque esos son
       <button> y los pilla un selector más fuerte. Resultado: en el mismo
       menú, «Catálogo» centrado y «Formación» y «Bonificada» a la
       izquierda. Aquí solo se pide la altura de toque; dónde se alinea el
       texto lo decide layout.css, que es quien sabe si es el menú de
       escritorio o el panel del móvil. */
    .site-header nav a,
    .site-header nav button {
        min-height: 44px;
        align-items: center;
    }
    /* 16 px o iOS hace zoom al enfocar el campo y descoloca la página.
       Y no lo deshace al salir del campo: te quedas con la web ampliada,
       moviendola de lado para leer. Es una de las cosas que mas se siente
       como «esto va raro» sin saber decir por que.

       Los selectores sueltos pesan (0,0,1) y pierden contra cualquier
       regla con clase, aunque esta hoja cargue la ultima —una media query
       no suma especificidad—. Habia cinco pantallas comiendoselo: los
       filtros del catalogo, el formulario de reserva de cursos, sus
       filtros, el aviso de plazas y los campos de «Mi cuenta». Por eso
       aqui se nombran tambien esas clases: empatan en especificidad con
       las suyas y ganan por orden de carga, sin un solo !important.

       El campo del codigo de acceso no se toca: .ap-fld.code-input input
       pesa (0,2,1) y conserva su tamaño grande a proposito. */
    input, select, textarea,
    .ap-fld input, .ap-fld select, .ap-fld textarea,
    .ap-diag-sel,
    .s2-fbar .s2-fg input, .s2-fbar .s2-fg select,
    .c-form input, .c-form textarea,
    .c-filters select,
    .c-inline-form input[type=email],
    .kt-field input, .kt-field textarea, .kt-field select,
    .pg-espera-fila input { font-size: 16px; }
}

/* Las tablas anchas se desplazan dentro de su caja; la página, nunca. */
.tabla-scroll, .ap-tabla-scroll, .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

@media (max-width: 720px) {
    /* Una rejilla de tres columnas en 360 px son tres columnas de 100 px
       llenas de palabras partidas. En móvil, una debajo de otra. */
    .pg-rejilla, .pg-grid, .ap-grid, .ix-puertas, .ix-rejilla, .pg-cols {
        grid-template-columns: 1fr;
    }
    /* Titulares muy largos partidos por sílabas antes que desbordados. */
    h1, h2 { overflow-wrap: break-word; hyphens: auto; }
    .pg-main p, .pg-main li { max-width: none; }
}

/* ═══ 7. Detalles que se notan sin verse ═════════════════════════ */

/* El foco del teclado: visible, y del color de la casa. */
:focus-visible {
    outline: 2px solid var(--pg-cian, #01A7C2);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Al llegar desde un enlace de índice, que el título no quede pegado
   al borde superior de la pantalla. */
:target { scroll-margin-top: 5rem; }

/* Sin scroll-behavior:smooth en el documento entero.
   Lo puse pensando en los enlaces de índice, pero afecta a TODO: al
   volver atrás, al pulsar «arriba», a cualquier salto que haga el
   navegador. En el móvil se nota como un arrastre que no responde
   —el dedo levanta y la página sigue moviéndose sola— y se lee como
   que el scroll va mal. El suave se pide solo donde aporta, que es al
   saltar a un ancla, y respetando a quien tenga el movimiento
   reducido activado en su sistema. */
@media (prefers-reduced-motion: no-preference) {
    html:focus-within { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Al imprimir —y esto se imprime: son trámites— sobra la navegación. */
@media print {
    .site-header, .site-footer, .ap-skip, .nav-cta, .ap-regla { display: none; }
    body { font-size: 11pt; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ═══ 8. Cómo se aplica todo esto a lo que ya existe ══════════════
   Las clases de arriba no sirven de nada si ninguna página las usa. En
   vez de entrar a las veintiocho páginas a cambiar el marcado —que es
   donde se rompen las cosas— el motivo se engancha aquí, sobre las
   clases que esas páginas YA llevan. Cambiar una regla cambia la web
   entera, y si algo queda mal se deshace en un sitio.
   ══════════════════════════════════════════════════════════════════ */

/* La línea que separa secciones pasa a ser la regla milimetrada.
   Esta sola regla mete el motivo en las veintiocho páginas de golpe,
   porque .pg-seccion ya estaba en todas con su border-top. */
.pg-seccion {
    border-top: 0;
    position: relative;
    padding-top: calc(44px + 4px);
}
.pg-seccion::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    border-top: 1px solid var(--pg-linea);
    background-image: repeating-linear-gradient(
        to right, var(--pg-linea) 0 1px, transparent 1px 22px);
    background-repeat: repeat-x;
    background-size: 100% 3px;
    background-position: top;
}
/* La primera sección de la página no lleva regla, porque no separa de
   nada. Pero OJO con cómo se dice eso.

   Estaba escrito «.pg-wrap > .pg-seccion:first-child», y ahí falla:
   en la portada cada sección va metida en su PROPIO .pg-wrap, así que
   todas eran primer hijo del suyo y ninguna llevaba regla. Resultado: la
   página principal, que es la que más se mira, era la única del sitio sin
   una sola marca entre bloques —de ahí que se leyera como cajas sueltas
   una detrás de otra—. En /tramites no se notaba porque allí las cuatro
   secciones comparten un solo .pg-wrap y solo la primera se quedaba sin.

   Ahora se pide lo que de verdad se quiere decir: la regla sobra cuando
   el envoltorio es lo primero que hay dentro de <main>. Si antes hay un
   hero, la sección sí separa y sí lleva su marca. */
main > .pg-wrap:first-child > .pg-seccion:first-child::before { content: none; }

/* Dentro de la banda de color la regla NO se quita: se invierte.
   Antes se quitaba, y el resultado era que el paso de blanco a petróleo
   quedaba como un canto pelado —un rectángulo de color pegado al blanco,
   que es justo lo que hace que se lea como una caja y no como una
   sección—. Con la regla clara arriba, el cambio de color lleva la
   misma marca que todas las demás transiciones del sitio: se reconoce
   como el mismo gesto y deja de parecer un bloque metido con calzador. */
.pg-fondo-alt .pg-seccion::before {
    content: "";
    border-top-color: rgba(255,255,255,.30);
    background-image: repeating-linear-gradient(
        to right, rgba(255,255,255,.34) 0 1px, transparent 1px 22px);
}
.pg-fondo-alt .pg-seccion { padding-top: 44px; }

/* ── Las cifras: la voz del instrumento ──────────────────────────
   +59.000 cursos, 8.800 revisados, 71 familias. Son datos, y un dato
   se lee como dato cuando va en monoespaciada y en tabular: las cifras
   ocupan lo mismo y quedan alineadas en columna una debajo de otra. */
/* Las cifras grandes NO van en monoespaciada, y esto se aprende
   mirándolo: en una mono el punto ocupa una casilla igual que un dígito,
   así que «+59.000» se lee «+59 . 000» y «8.800» se lee «8 . 800». El
   separador de miles parece un hueco y el número parece roto.
   Van en la display, que es estrecha y contundente, con cifras tabulares
   para que sigan alineando en columna. La monoespaciada se queda donde sí
   aporta: rótulos, REF AP y códigos, que se leen carácter a carácter. */
.ix-datos b {
    font-family: var(--ap-display);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--pg-teal);
}
.ix-datos span {
    font-family: var(--ap-texto);
    display: block;
    margin-top: .55em;
}

/* ── Las preguntas de las tres puertas ───────────────────────────
   «Necesito formar a mi equipo» es una frase de una persona, no una
   etiqueta de sistema. En la serif y en cursiva se lee como lo que es:
   alguien hablando. Ahí está la mitad del tono de la portada. */
.ix-puerta-pregunta {
    /* Sin cursiva: no se descarga y el navegador la falsificaría.
       Que sea una frase de alguien se marca con las comillas angulares
       que ya trae el texto y con el color, no inclinando letras. */
    font-family: var(--ap-texto);
    font-size: clamp(1rem, .95rem + .3vw, 1.12rem);
    font-weight: 500;
    color: var(--pg-teal);
    letter-spacing: -.005em;
    text-transform: none;
}

/* La puerta: la marca de la regla se enciende al pasar por encima.
   Es el mismo motivo respondiendo, no un efecto nuevo. */
.ix-puerta {
    background-image: repeating-linear-gradient(
        to right, var(--pg-linea) 0 1px, transparent 1px 22px);
    background-repeat: repeat-x;
    background-size: 100% 3px;
    background-position: top;
    transition: background-image .18s ease, border-top-color .18s ease;
}
/* Al pasar por encima la marca se enciende: es el mismo motivo
   respondiendo, no un efecto nuevo. Aquí sí sube el contraste, porque
   aquí sí quiere decir algo. */
.ix-puerta:hover, .ix-puerta:focus-visible {
    background-image: repeating-linear-gradient(
        to right, var(--pg-cian) 0 1px, transparent 1px 22px);
    background-size: 100% 5px;
}

/* ── El bloque de color ──────────────────────────────────────────
   Un solo tramo a sangre en petróleo en toda la portada. Ancla la
   página de un modo que no consiguen veinte tarjetas de colores, y
   deja claro dónde está el centro de lo que se cuenta. */
.pg-fondo-alt {
    background: var(--pg-teal-hondo);
    color: #DCEAEF;

    /* Aquí está la clave, y me costó una portada ilegible aprenderla.
       Al poner fondo oscuro yo iba invirtiendo el color clase por clase
       —los p, los h2, los enlaces— y me dejé fuera las de los diagramas
       (.gr-txt, .gr-num…). Esas seguían con el gris de texto sobre papel
       blanco, o sea gris medio sobre petróleo: contraste 1,4 a 1, que es
       no ver nada.

       En vez de perseguir clases una a una, se redefinen las VARIABLES.
       Todo lo que dentro de esta banda pinte con var(--pg-suave) o
       var(--pg-tenue) queda invertido de golpe, incluido lo que se
       escriba mañana. Perseguir clases es una carrera que se pierde. */
    --pg-tinta:  #FFFFFF;
    --pg-suave:  #C3DDE5;
    --pg-tenue:  #9DC4D1;
    --pg-teal:   #8FD2E2;
    --pg-cian:   #A8DFEB;
    /* Las variantes de texto también, o dentro de la banda quedarían
       oscuras sobre oscuro: aquí el problema es justo el contrario. */
    --pg-cian-texto:    #A8DFEB;
    --pg-naranja-texto: #FFAB82;
    --pg-linea:  rgba(255,255,255,.22);
    --pg-linea-fuerte: rgba(255,255,255,.38);
    --pg-fondo:      var(--pg-teal-hondo);
    --pg-fondo-alt:  var(--pg-teal-hondo);
    --pg-teal-claro: rgba(255,255,255,.08);

    /* El naranja de marca sobre el petróleo hondo da 2,36 a 1: se ve,
       pero se lee mal, y es justo el color que se usa para señalar «mira
       aquí». Sobre oscuro se aclara hasta que pasa de 4,5. Es el mismo
       naranja, con la luz que hace falta para que cumpla su función. */
    --pg-naranja: #FFAB82;   /* 4,84:1 sobre el petróleo hondo; #FF9166 se
                                quedaba en 4,03 y el mínimo legible es 4,5 */
}
.pg-fondo-alt h2,
.pg-fondo-alt h3 { color: #fff; }
.pg-fondo-alt .pg-entradilla,
.pg-fondo-alt p,
.pg-fondo-alt li { color: #C3DDE5; }
.pg-fondo-alt a:not(.pg-btn) { color: #8FD2E2; }
.pg-fondo-alt .pg-nota {
    border-color: rgba(255,255,255,.22);
    color: #C3DDE5;
    background: rgba(255,255,255,.05);
}
/* El botón fantasma sobre fondo oscuro necesita su propio trazo, o
   desaparece: era un borde de color petróleo sobre petróleo. */
.pg-fondo-alt .pg-btn.ghost {
    border-color: rgba(255,255,255,.5);
    color: #fff;
    background: transparent;
}
.pg-fondo-alt .pg-btn.ghost:hover {
    border-color: #fff;
    background: rgba(255,255,255,.1);
}
.pg-fondo-alt .pg-btn:not(.ghost) {
    background: var(--pg-naranja);
    border-color: var(--pg-naranja);
    color: #fff;
}

/* ── El titular de la portada ────────────────────────────────────
   «se acabe usando» va en cursiva de la serif y con el subrayado
   naranja: es la promesa de la casa y es el único naranja de la
   página. Un énfasis por página, y este es el suyo. */
.ix-hero h1 em {
    font-style: normal;
    color: var(--pg-teal);
    background-image: linear-gradient(var(--pg-naranja), var(--pg-naranja));
    background-size: 100% 3px;
    background-position: 0 92%;
    background-repeat: no-repeat;
    padding-bottom: .04em;
}
.ix-hero-sub {
    font-size: var(--ap-t-guia);
    line-height: 1.55;
    color: var(--pg-suave);
    max-width: 46ch;
}

/* ── Migas y notas: la voz pequeña ───────────────────────────────
   En monoespaciada las migas dejan de competir con el titular y se
   leen como lo que son: la posición en el aparato, no contenido. */
.pg-migas {
    font-family: var(--ap-dato);
    font-size: var(--ap-t-rotulo);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ── Que se note que la tabla se desplaza ────────────────────────
   La tabla ya se desplazaba dentro de su caja, pero nada lo decía: en
   un móvil se ve una tabla cortada por el borde y parece que falta
   contenido. El degradado de la derecha se apoya en el propio scroll
   del contenedor, así que desaparece solo al llegar al final. */
.pg-tabla-wrap, .tabla-scroll, .ap-tabla-scroll {
    background-image:
        linear-gradient(to right, var(--pg-fondo) 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), var(--pg-fondo) 70%),
        linear-gradient(to right, rgba(16,38,47,.14), rgba(16,38,47,0)),
        linear-gradient(to left,  rgba(16,38,47,.14), rgba(16,38,47,0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ═══ 9. Que la portada no sea cinco pantallas de texto ═══════════
   Medido en un móvil de 375: la portada eran 4.045 px —cinco pantallas—
   con CERO imágenes y cero gráficos. Todo texto sobre blanco menos una
   banda. Eso es lo que se siente como «soso»: no falta contenido, falta
   textura. Y no se arregla metiendo una ilustración de banco de imágenes,
   que es lo que hace que una web parezca comprada hecha.
   Se arregla con lo que ya hay: un icono que distinga cada puerta, y las
   cifras tratadas como cifras y no como frases.
   ══════════════════════════════════════════════════════════════════ */

/* El icono de cada puerta. Pequeño y en cian: no compite con el titular,
   pero da un punto de entrada visual a cada bloque y hace que los tres se
   distingan de un vistazo en vez de leerse como tres párrafos seguidos. */
/* El icono, a pelo. Lo puse dentro de un cuadrado de color y era
   exactamente lo contrario de lo que hay que hacer aquí: tres cuadraditos
   más en una página de la que ya se decía que era «cuadrado tras
   cuadrado». El icono solo, en cian, distingue igual y no añade una caja. */
.ix-puerta-icono {
    display: block;
    margin: 0 0 10px;
    color: var(--pg-cian);
}
.ix-puerta:hover .ix-puerta-icono,
.ix-puerta:focus-visible .ix-puerta-icono { color: var(--pg-teal); }
@media (prefers-reduced-motion: no-preference) {
    .ix-puerta-icono { transition: color .18s ease; }
}

/* ── Las cifras, como una hoja de características ────────────────
   Antes eran tres frases con un número en negrita delante. En móvil se
   leían como tres párrafos más. Ahora cada una es una fila: el número a
   la izquierda, en monoespaciada y alineado por la derecha para que las
   unidades caigan en la misma columna, y la explicación al lado. Es la
   forma en que se lee una ficha técnica, y encaja con lo que vende la
   casa: aquí se mide. */
.ix-datos {
    display: grid;
    /* UNA columna, explicita. Este bloque se rediseño como una lista de
       filas —cifra a la derecha, explicacion al lado, un filete entre
       cada dos—, pero se quedo sin decir cuantas columnas tiene, y la
       de paginas.css (repeat(auto-fit, minmax(190px,1fr))) seguia viva:
       misma propiedad, nadie la pisaba. Resultado: el diseño de filas
       se pintaba DENTRO de tres columnas estrechas. Medido a 768 px,
       los textos caian en tiras de 80-105 px y hasta seis renglones
       («cursos SCORM del mercado» a una palabra por linea), el filete
       de separacion salia sobre la segunda y la tercera pero no sobre
       la primera, y a 560 px justos quedaban dos arriba y una sola
       debajo. */
    grid-template-columns: 1fr;
    gap: 0;
    margin: 26px 0 0;
}
.ix-datos > div {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr;
    align-items: baseline;
    gap: 4px 18px;
    padding: 14px 0;
    border-top: 1px solid var(--pg-linea);
}
/* Sin borde abajo en la última: con borde arriba en todas Y abajo en la
   última, el conjunto se cierra y vuelve a ser una caja. Solo líneas
   ENTRE filas, que es lo que separa sin encerrar. */
.ix-datos > div:first-child { border-top: 0; }
.ix-datos b {
    text-align: right;
    font-variant-numeric: tabular-nums;
    /* Ancho minimo para que las tres cifras compartan canto derecho y
       las explicaciones arranquen todas en la misma vertical, que es lo
       que hace que se lea como una ficha tecnica y no como tres datos
       sueltos. Es un suelo, no un ancho fijo: si una cifra es mas larga,
       manda ella. */
    min-width: 6.5ch;
}
.ix-datos span { margin-top: 0; max-width: 46ch; }

@media (max-width: 560px) {
    /* En pantalla estrecha el número va encima: a 375 px, «+59.000» más
       la frase al lado dejaría la frase en columnas de tres palabras. */
    .ix-datos > div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
    .ix-datos b { text-align: left; min-width: 0; }
}

/* ═══ 10. Menos rectángulos en móvil ══════════════════════════════
   Medido en la portada a 375 px: catorce cajas, y SIETE de ellas eran
   botones a todo el ancho de 339×54 apilados. Cada sección termina con
   dos, uno encima de otro. Eso es lo que se ve como «cuadrado tras
   cuadrado»: no son las tarjetas, son los botones.

   La jerarquía real de esas parejas es que uno es la acción principal y
   el otro la alternativa. Aquí se dice con la forma: el principal sigue
   siendo un botón macizo, y el secundario pasa a ser un enlace con
   flecha. Se pierden cuatro rectángulos y se gana una jerarquía que
   antes no se veía, porque dos botones iguales no dicen cuál pulsar.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
    /* Con el nombre de la sección delante: «.pg-seccion .pg-acciones»
       fija align-items:center más abajo, fuera de media query, y pesa
       (0,2,0). Una regla «.pg-acciones» a secas pesa (0,1,0) y perdía
       aunque esté dentro del @media. Resultado: debajo de un botón a
       todo lo ancho salía el enlace con flecha centrado, fuera de la
       vertical donde empieza todo lo demás de la página. */
    .pg-acciones,
    .pg-seccion .pg-acciones,
    .pg-fondo-alt .pg-acciones {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        /* «stretch» estira a los hijos dentro de la caja, pero la caja
           en si se ajustaba a su contenido: 149 px. Asi que el boton
           salia «a todo lo ancho» de 149 px, no de la columna. */
        width: 100%;
    }
    .pg-acciones .pg-btn:not(.ghost) { width: 100%; }

    .pg-acciones .pg-btn.ghost {
        background: none;
        border: 0;
        padding: 12px 0;
        min-height: 44px;          /* sigue siendo pulsable con el dedo */
        justify-content: flex-start;
        color: var(--pg-cian-texto);
        font-weight: 600;
    }
    .pg-acciones .pg-btn.ghost::after {
        content: " →";
        white-space: pre;
    }
    /* Sobre el fondo oscuro, el enlace se aclara para seguir leyéndose. */
    .pg-fondo-alt .pg-acciones .pg-btn.ghost { color: #A8DFEB; }
}

/* ═══ 11. El aire de móvil, a la medida de un móvil ═══════════════
   Medido en la portada a 375 px: 785 px repartidos en huecos entre
   bloques, sobre una página de 4.077. Casi una quinta parte de la
   portada era espacio vacío. Los peores: 124 px antes de «Cómo
   trabajamos», 80 y 71 antes de otros títulos, y 72 entre una puerta y
   la siguiente.

   Ese aire está bien en un monitor, donde se ve media página de golpe y
   los huecos agrupan. En un móvil solo se ve una pantalla, así que un
   hueco de 124 px es una pantalla en blanco entre dos cosas que van
   juntas: en vez de separar, desorienta. Se recorta a la mitad larga y
   se deja el escritorio como está, que ahí funciona.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
    :root {
        --ap-aire-s: 1.2rem;
        --ap-aire:   1.8rem;
        --ap-aire-l: 2.2rem;
    }

    /* La separación entre secciones. 44 arriba y 44 abajo entre dos
       bloques son 88 px de nada seguidos.

       Se puede apretar tanto porque el hueco no es lo único que separa:
       cada sección lleva su regla dibujada encima. Cuando hay una línea
       que dice «aquí empieza otra cosa», el aire ya no tiene que decirlo
       también, y 20 px bastan. Sin la regla haría falta el triple. */
    .pg-seccion { padding-top: calc(20px + 4px); padding-bottom: 20px; }
    /* La banda de color, al contrario que el resto: aquí SÍ hace falta
       aire. Un cambio de color a sangre es un corte fuerte, y si el texto
       arranca a 26 px del canto parece pegado al borde y el bloque se lee
       como un recuadro de relleno en vez de como una sección. Con 44 el
       color se lee como un fondo y no como una caja. */
    .pg-fondo-alt .pg-seccion { padding-top: 44px; padding-bottom: 40px; }

    .ix-hero { padding: 26px 0 22px; }
    .ix-hero .pg-acciones { margin-top: 22px; }
    .ix-puertas { padding-bottom: 24px; }
    .ix-puertas-titulo { margin-bottom: 18px; }

    /* Entre puerta y puerta. Con 72 px cada una parecía una sección. */
    .ix-rejilla { gap: 20px; }
    .ix-puerta { padding-top: 14px; }
    .ix-puerta p { margin-bottom: 8px; }
    .ix-puerta-icono { margin-bottom: 6px; }
    .ix-puerta-pregunta { margin-bottom: 2px; }
    .ix-puerta h3 { margin: 2px 0 6px; }

    .pg-acciones { margin-top: 18px; }
    .pg-seccion > .pg-entradilla { margin-bottom: 16px; }
    .gr { margin-top: 18px; }
    .pg-nota { margin-top: 18px; }

    /* Los párrafos, algo más juntos: en columna estrecha las líneas ya
       son cortas y no hace falta tanto respiro entre ellos. */
    .pg-main p { margin-bottom: 12px; }
}

/* ═══ 12. Romper el patrón de plantilla ═══════════════════════════
   Medido en la portada a 1280: las CINCO secciones tienen el mismo
   esqueleto —título, párrafo, N elementos todos del mismo ancho, dos
   botones— y CUATRO DE CINCO acaban en un par de botones. Todo alineado
   a la izquierda en una única columna de 1120 px.

   Eso es lo que se lee como «hecho con plantilla», y no son los colores
   ni la tipografía: es que la página tiene un solo ritmo repetido cinco
   veces y cada grupo es una rejilla perfecta de celdas idénticas. Una
   página diseñada por alguien varía: no todo pesa lo mismo ni todo
   termina igual.

   Dos cambios, los dos de forma y ninguno de contenido:
   ══════════════════════════════════════════════════════════════════ */

/* 1. Dejan de ser cuatro pares de botones.
      Los botones macizos se quedan donde hay una acción de verdad que
      pedir —el titular de la portada y la llamada final— y en medio la
      alternativa pasa a ser un enlace. Además de quitar repetición, dice
      cuál de las dos pulsar, que con dos botones iguales no se sabía. */
.pg-seccion .pg-acciones .pg-btn.ghost,
.pg-fondo-alt .pg-acciones .pg-btn.ghost {
    background: none;
    border: 0;
    padding: 13px 0;
    min-height: 0;
    color: var(--pg-cian-texto);
    font-weight: 600;
}
.pg-seccion .pg-acciones .pg-btn.ghost::after,
.pg-fondo-alt .pg-acciones .pg-btn.ghost::after { content: " →"; white-space: pre; }
.pg-seccion .pg-acciones .pg-btn.ghost:hover,
.pg-fondo-alt .pg-acciones .pg-btn.ghost:hover { color: var(--pg-teal); background: none; }
.pg-fondo-alt .pg-acciones .pg-btn.ghost { color: #A8DFEB; }
.pg-fondo-alt .pg-acciones .pg-btn.ghost:hover { color: #fff; }
/* Y con un botón menos, el que queda no necesita compartir fila.
   Con puerta de ancho MINIMO: esta regla pesa lo mismo (0,2,0) que la
   del bloque de móvil de más arriba y va después, así que le ganaba y
   dejaba el enlace con flecha centrado en mitad de la columna, fuera de
   la vertical donde arranca todo lo demás. Centrar sólo tiene sentido
   cuando los dos van en la misma fila, que es de 561 px para arriba. */
@media (min-width: 561px) {
    .pg-seccion .pg-acciones,
    .pg-fondo-alt .pg-acciones { align-items: center; gap: 6px 22px; }
}

/* 2. Las tres puertas dejan de ser tres tarjetas sueltas.
      Eran tres rectángulos idénticos uno al lado del otro, que es LA
      forma de la plantilla. Ahora se leen como tres opciones de una
      misma tabla: comparten la línea de arriba y van separadas entre sí
      por un filete vertical, como las columnas de una ficha técnica.
      Es el mismo gesto que la regla milimetrada del resto del sitio. */
@media (min-width: 721px) {
    /* TRES columnas, dichas. Este diseño da por hecho que las tres van
       en la misma fila: comparten el filete de arriba y se separan con
       una línea vertical entre ellas. La rejilla de paginas.css es
       auto-fit con minmax(230px,1fr), y entre 721 y ~810 px sólo caben
       dos: salían dos arriba y una suelta debajo, con el filete cortado
       y una línea vertical a media asta. Justo el ancho de una tableta
       en vertical. */
    .ix-rejilla { gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ix-puerta {
        padding: 22px 26px 0;
        background-size: 0 0;          /* la marca de arriba pasa al grupo */
    }
    .ix-puerta + .ix-puerta { border-left: 1px solid var(--pg-linea); }
    .ix-puerta:first-child { padding-left: 0; }
    .ix-puerta:last-child  { padding-right: 0; }
    .ix-rejilla {
        border-top: 1px solid var(--pg-linea);
        background-image: repeating-linear-gradient(
            to right, var(--pg-linea) 0 1px, transparent 1px 22px);
        background-repeat: repeat-x;
        background-size: 100% 3px;
        background-position: top;
    }
    .ix-puerta:hover { background-size: 0 0; }
}

/* ═══ 13. El catálogo en móvil: la tabla deja de ser tabla ════════
   Medido a 375 px con una búsqueda hecha: la tabla de resultados mide
   763 px dentro de un contenedor de 290. Se desplaza a lo ancho, así que
   no se pierde nada, pero se ve el 38 % y hay que arrastrar 473 px para
   leer UN curso. Y son siete columnas: casilla, REF AP, denominación,
   familia, subfamilia, horas y fichas.

   Una tabla de datos en un móvil no se arregla con scroll horizontal: se
   arregla dejando de ser tabla. Cada fila pasa a ser un bloque con el
   nombre del curso arriba y el resto debajo, etiquetado. Se lee de una
   vez, sin arrastrar, y no se pierde ni un dato.

   La cabecera no se borra: se saca de la vista pero sigue en el árbol,
   porque un lector de pantalla la necesita para relacionar cada valor
   con su columna.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    .s2-t, table.s2-t tbody, table.s2-t tr, table.s2-t td { display: block; width: auto; }

    table.s2-t thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* La fila, en flex con orden explícito. Hace falta porque en el HTML
       las celdas vienen en el orden de la TABLA —casilla, REF, nombre,
       familia, subfamilia, horas, fichas— y ahí la REF y las horas están
       separadas por tres celdas. Puestas tal cual, cada una se llevaba su
       propia línea de 40 px. Con el orden cambiado van juntas en una sola,
       que es como se leen: «102003165 · 30 h». */
    table.s2-t tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 10px;
        padding: 13px 46px 13px 15px;
        border-top: 1px solid var(--pg-linea);
    }
    table.s2-t td.t-den     { order: 1; flex: 1 0 100%; }
    table.s2-t td.t-code    { order: 2; }
    table.s2-t td.t-h       { order: 3; }
    table.s2-t td[data-col] { order: 4; }
    table.s2-t td.t-f       { order: 5; flex: 1 0 100%; }
    table.s2-t td.t-sel     { order: 0; }
    table.s2-t tr:first-child { border-top: 0; }

    table.s2-t td {
        border: 0;
        padding: 0;
        text-align: left !important;
    }

    /* El nombre del curso manda: es lo que se busca. */
    table.s2-t td.t-den {
        font-size: 15.5px;
        line-height: 1.35;
        margin-bottom: 5px;
        min-width: 0;
    }

    /* REF AP y horas, juntas en una línea y en la voz del instrumento. */
    table.s2-t td.t-code, table.s2-t td.t-h {
        font-family: var(--ap-dato);
        font-size: 12px;
        line-height: 1.5;
        color: var(--pg-tenue);
        margin: 0;
    }
    table.s2-t td.t-code::after { content: " ·"; }

    /* Familia y subfamilia: dicen de qué son, que sin cabecera no se sabe. */
    /* Familia y subfamilia, seguidas en una sola línea en vez de dos
       bloques etiquetados. Eran 57 px cada uno —114 de los 351 que medía
       la ficha— para decir una clasificación que se entiende sola. */
    table.s2-t td[data-col] {
        flex: 1 0 100%;
        font-size: 12.5px;
        color: var(--pg-suave);
        line-height: 1.4;
        margin: 3px 0 0;
    }
    table.s2-t td[data-col] + td[data-col] { margin-top: 1px; }
    /* Una celda vacía no merece su etiqueta: sería una línea que solo dice
       «Subfamilia: —», que es ruido. */
    table.s2-t td[data-col]:has(.t-none) { display: none; }

    /* Las dos fichas, como enlaces de verdad y con sitio para el dedo. */
    table.s2-t td.t-f { margin-top: 6px; display: flex; gap: 16px; }
    table.s2-t td.t-f a { min-height: 36px; display: inline-flex; align-items: center; font-size: 13px; }
    table.s2-t td.t-f:has(.t-none) { display: none; }

    /* La casilla, arriba a la derecha: no estorba la lectura y se alcanza
       con el pulgar sin tener que apuntar. */
    table.s2-t td.t-sel {
        position: absolute;
        top: 8px; right: 2px;
        width: 44px; height: 44px;
        display: flex; align-items: center; justify-content: center;
        padding: 0;
    }

    /* Y el contenedor ya no necesita desplazarse a lo ancho. */
    .s2-res, .s2-tabla-wrap { overflow-x: visible; }
}

/* ═══ 14. Las tablas de comparación, en el teléfono ═══════════════
   .pg-tabla lleva min-width:560px y compara tres columnas con hasta
   dos párrafos por celda. En un móvil de 375 eso son 560 px dentro de
   324: se lee arrastrando de lado, y al llegar al borde el gesto
   seguía y movía la página de detrás. Está en seis páginas (trámites,
   chequeo, modelo, cómo trabajamos, contenidos y el índice del
   diagnóstico), así que se arregla una vez y en todas.

   La clase .pg-tabla-fichas y los data-col los pone el script del pie,
   que copia el rótulo de cada columna en su celda. Sin JavaScript no
   se pone ninguna de las dos y la tabla se queda desplazándose de
   lado, como antes: una tabla partida en fichas SIN rótulos no se
   entendería, y eso sería peor que el arrastre.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    /* Si el script no llegó a correr, que al menos no arrastre la
       página que hay detrás al terminarse la tabla. */
    .pg-tabla-wrap { overscroll-behavior-x: contain; }

    /* Y si corrió, ya no hay nada que desplazar: fuera el scroll y
       fuera el degradado que avisaba de que lo había. */
    .pg-tabla-wrap.sin-arrastre {
        overflow-x: visible;
        background-image: none;
    }

    table.pg-tabla-fichas { min-width: 0; }
    table.pg-tabla-fichas,
    table.pg-tabla-fichas tbody,
    table.pg-tabla-fichas tr,
    table.pg-tabla-fichas td { display: block; width: auto; }

    /* La cabecera se queda en el documento, invisible: el lector de
       pantalla sigue leyendo una tabla con sus columnas. */
    table.pg-tabla-fichas thead {
        position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }

    table.pg-tabla-fichas tr {
        padding: 18px 0;
        border-top: 1px solid var(--pg-linea);
    }
    table.pg-tabla-fichas tbody tr:first-child { border-top: 0; padding-top: 4px; }
    table.pg-tabla-fichas tbody tr:last-child td { border-bottom: 0; }

    table.pg-tabla-fichas td {
        border: 0;
        padding: 0;
        font-size: 15px;
        line-height: 1.55;
    }
    table.pg-tabla-fichas td + td { margin-top: 13px; }

    /* La primera columna es de qué va la fila: hace de título */
    table.pg-tabla-fichas td:first-child {
        font-size: 1.08em;
        font-weight: 700;
        color: var(--pg-tinta);
        line-height: 1.3;
    }
    table.pg-tabla-fichas td:first-child b { font-weight: 700; }

    /* Las demás llevan escrito de qué columna vienen */
    table.pg-tabla-fichas td + td::before {
        content: attr(data-col);
        display: block;
        margin-bottom: 4px;
        font-family: var(--ap-dato, ui-monospace, monospace);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--pg-suave);
    }
}

/* ═══ 15. Lo que hay que poder tocar con el dedo ══════════════════
   Medido en un móvil de verdad (no en una ventana estrecha: la regla
   que agranda los enlaces del pie pregunta por «pointer: coarse», y
   una ventana estrecha de escritorio no lo es; ahí salían 16 px y
   parecía un fallo que no existe).

   Con emulación táctil real quedaban cinco objetivos por debajo de
   los 30 px. Tres se arreglan aquí. Los otros dos son enlaces dentro
   de una frase, y esos se dejan: subrayar y engordar una palabra en
   mitad de un párrafo rompe la línea y no ayuda a nadie.
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

    /* «Cambiar cookies» es un botón, no un enlace, así que se quedaba
       fuera de la regla del pie que sí agranda a los de al lado. Y su
       propio padding:0 gana a esa regla por especificidad. */
    .site-footer-cookies {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 12px 0;
        line-height: 1.3;
    }

    /* La ficha de curso: «Volver al catálogo» es la salida de esta
       pantalla y está en 8.215 páginas. Con 19 px de alto se falla el
       toque. Se le da altura al enlace y se le quita a la barra, para
       que la barra mida lo mismo que medía. */
    .cu-top-inner { padding-top: 3px; padding-bottom: 3px; }
    .cu-back,
    .cu-crumbs a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
}

/* ═══ 16. Lo que faltaba por poder tocar ══════════════════════════
   Medido con emulación táctil real, pantalla por pantalla:
   los dos enlaces de contacto del pie se quedaban en 39 px y el
   logotipo del pie en 30. Están en las 33 páginas del sitio.
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    .site-footer-contact a {
        min-height: 44px;
        align-items: center;
    }
    .site-footer-logo {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Y los últimos que se quedaban cortos, medidos uno a uno con el dedo:
   los dos botones de la cabecera de resultados (38 px), los enlaces a la
   ficha corta y larga dentro de cada resultado (36) y el logotipo de la
   cabecera (38). */
@media (hover: none) and (pointer: coarse) {
    .s2-res-cp, .s2-res-dl { min-height: 44px; }
    .s2-t .t-f a { min-height: 44px; display: inline-flex; align-items: center; }
    .site-logo { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ═══ 17. Enlaces sueltos que no se podían tocar ══════════════════
   Medidos con el dedo, pantalla por pantalla. Todos son enlaces que
   ocupan su propia línea —no van dentro de una frase—, así que aquí
   sí toca darles altura:
     · las migas del generador de SEO, en 14 px de alto
     · los enlaces a los navegadores en la política de cookies, en 18
     · el pie del panel de acceso, en 18 y 21
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    ol.breadcrumbs a,
    .breadcrumbs li a {
        display: inline-block;
        padding: 12px 0;
        min-height: 44px;
    }
    .lg-body li > a:only-child {
        display: inline-block;
        padding: 11px 0;
        min-height: 44px;
    }
    .ap-form-panel .foot a,
    .ap-form-inner .alt-salida a {
        display: inline-block;
        padding: 11px 0;
        min-height: 44px;
    }
}

/* ═══ 18. Rejillas sin piezas huérfanas ═══════════════════════════
   Una rejilla de auto-fit reparte por el ancho que le cabe, no por
   cuántas piezas tiene. Con cuatro piezas y tres columnas salen tres
   arriba y una sola debajo, con dos huecos vacíos al lado; con cinco
   piezas y cuatro columnas, cuatro y una. Se ve como si faltara algo.

   Medido: /tramites y /formacion a 900 y 1024 px daban 3+1 (cuatro
   piezas), y el «paso a paso» de /diagnostico/chequeo y
   /tramites/formacion-bonificada daba 4+1 a 1280 px (cinco pasos).

   `:has()` deja contar las piezas desde el CSS. Si el navegador no lo
   entiende, no aplica ninguna de estas reglas y todo queda como estaba:
   nunca al revés.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 721px) {
    /* Cuatro piezas: dos y dos, hasta que quepan las cuatro en fila. */
    .pg-rejilla:has(> :nth-child(4):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1100px) {
    .pg-rejilla:has(> :nth-child(4):last-child) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Cinco pasos son una secuencia: o van los cinco en fila, o se lee
   como si el quinto sobrara. */
@media (min-width: 1000px) {
    .ix-pasos:has(> :nth-child(5):last-child) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ═══ 19. Una sola vertical para toda la página ═══════════════════
   La cabecera, el texto y el pie usaban tres medidas distintas —1240,
   1120 y 1160 px— con tres rellenos distintos —24, el canalillo y 28—.
   Resultado, medido a 1280: el logotipo empieza en el píxel 37, el
   título de la página en el 105 y el logotipo del pie en el 81. Tres
   arranques distintos en la misma pantalla. A 1440: 117, 185 y 161.

   No se nota como un fallo, se nota como desorden: la página no tiene
   una vertical de la que colgar. Con la misma medida y el mismo
   canalillo, todo arranca donde arranca el título.
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --ap-medida: 1120px;   /* la del texto, que es la que manda al leer */
}
.site-header-inner,
.site-footer-top,
.site-footer-bar {
    max-width: var(--ap-medida);
    padding-left: var(--pg-gutter);
    padding-right: var(--pg-gutter);
}

/* Con la cabecera a la misma medida que el texto (apartado 19) el menú
   de escritorio se quedó 23 px largo: ocho entradas a 14 px de relleno
   a cada lado no caben en 1.120. Se recortan 2 px por lado —16 px en
   total de los ocho— y sobra sitio. Solo donde hay menú horizontal:
   por debajo de 1024 el menú es un panel y este relleno no estorba. */
@media (min-width: 1025px) {
    .main-nav a,
    .main-nav .nav-dropdown-btn { padding-left: 11px; padding-right: 11px; }
    .main-nav ul { gap: 2px; }
}

/* ═══ 20. La alternativa por WhatsApp no es un segundo botón ══════
   La llamada final de cada página ofrece dos cosas: hacer la
   Radiografía y, si prefieres hablarlo, escribirnos. En el escritorio
   van en fila —uno macizo y otro perfilado— y se entiende. En el
   teléfono los dos se ponen a todo el ancho y quedaba botón encima de
   botón; y el segundo decía sólo «674 32 89 77», que ni parece un
   botón ni dice a dónde lleva (lleva a WhatsApp desde hace tiempo).

   Aquí el segundo deja de ser un botón: es una línea con el glifo de
   WhatsApp, separada por un filete. Se lee como «o, si lo prefieres,
   escríbenos», que es exactamente lo que es.
   ═══════════════════════════════════════════════════════════════════ */
.pg-acciones .pg-btn.pg-btn-wa {
    gap: 9px;
}
.pg-acciones .pg-btn.pg-btn-wa svg { flex: 0 0 auto; }
/* Sin flecha: el glifo ya dice a dónde va. */
.pg-acciones .pg-btn.pg-btn-wa::after,
.pg-seccion .pg-acciones .pg-btn.pg-btn-wa::after,
.pg-fondo-alt .pg-acciones .pg-btn.pg-btn-wa::after { content: none; }

@media (max-width: 560px) {
    .pg-acciones .pg-btn.pg-btn-wa,
    .pg-seccion .pg-acciones .pg-btn.pg-btn-wa,
    .pg-fondo-alt .pg-acciones .pg-btn.pg-btn-wa {
        margin-top: 8px;
        padding: 15px 0 4px;
        border: 0;
        border-top: 1px solid var(--pg-linea);
        border-radius: 0;
        background: none;
        justify-content: flex-start;
        color: var(--pg-cian-texto);
        font-weight: 600;
        min-height: 44px;
    }
    .pg-fondo-alt .pg-acciones .pg-btn.pg-btn-wa { color: #A8DFEB; }
}

/* ═══ 21. Lo pegado abajo se aparta del aviso de cookies ══════════
   El aviso va fijo al pie de la ventana. El relleno del body aparta el
   contenido normal, pero no lo que está pegado a la ventana: en el
   catálogo se plantaba encima de la caja de escribir —que es toda la
   pantalla— y en la Radiografía encima de «Siguiente». Quien llega por
   primera vez no podía usar la página hasta decidir sobre las cookies.

   La altura la publica el propio aviso en --ap-consent-h, medida de
   verdad porque cambia al desplegar «Configurar». Sin aviso vale 0 y
   nada se mueve.
   ═══════════════════════════════════════════════════════════════════ */
.s2-comp { bottom: var(--ap-consent-h, 0px); }
.s2-bar  { bottom: calc(var(--s2-comp-h, 0px) + var(--ap-consent-h, 0px)); }
.dgp-nav { bottom: var(--ap-consent-h, 0px); }
.sc-comp { bottom: var(--ap-consent-h, 0px); }

/* Y los cajones laterales de alto completo: se acortan lo que ocupe el
   aviso, o su pie —el botón «Ver catálogo completo»— queda debajo de él. */
.s2-side { height: calc(100vh - 77px - var(--ap-consent-h, 0px)); }
.sc-side { max-height: calc(100vh - 88px - var(--ap-consent-h, 0px)); }


/* ══════════════════════════════════════════════════════════════════
   22. CASILLAS QUE SE PUEDAN TOCAR
   Una casilla de 18x18 px es la mitad de lo que mide la yema de un
   dedo. Aqui no se agranda el cuadrito —quedaria basto— sino que se
   ensancha la ETIQUETA, que es lo que de verdad se toca: el <label>
   asociado alterna la casilla igual que ella misma.
   ══════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        flex: none;
    }

    /* La etiqueta cubre los 44 px de alto aunque el cuadrito mida 22. */
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]),
    .kt-check label,
    .ap-check label {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
    }
}