/* ═══════════════════════════════════════════════════════════════════
   PAGINAS.CSS — estilos de las páginas de contenido.

   Por qué existe
   ──────────────
   Cada página de la casa traía su propio bloque de CSS dentro del PHP
   (cursosStyles(), los estilos del catálogo, los del diagnóstico…). El
   resultado es que la misma tarjeta se ve distinta en dos páginas y que
   arreglar un margen obliga a tocar cinco ficheros. Las páginas del
   mapa de la web comparten esto y no llevan CSS propio.

   Los colores
   ───────────
   Salen del logotipo, medidos sobre img/logo.png y no aproximados a
   ojo: petróleo #006989 (la A), cian #01A7C2 (el trazo interior) y
   naranja #E94E1B (la P). Antes había por aquí un azul marino #006989
   que no está en el logotipo: venía de la web anterior.

   Y una decisión de fondo
   ───────────────────────
   NADA DE TARJETAS CON BORDE Y ESQUINA REDONDEADA. Ese recuadro gris
   con su sombrita es el sello de las webs hechas en cinco minutos y se
   reconoce a la legua. Aquí los bloques se separan con una línea de un
   píxel y con aire, que es como se ha hecho siempre en papel y sigue
   leyéndose mejor. Los nombres de clase se mantienen —.pg-tarjeta,
   .ix-puerta— para no tener que tocar las ocho páginas que ya los usan.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Los tres del logotipo */
    --pg-teal:     #006989;   /* principal: títulos y botones */
    --pg-cian:     #01A7C2;   /* acento: enlaces y señales */
    --pg-naranja:  #E94E1B;   /* un solo énfasis por página, no más */

    --pg-teal-hondo: #00506A;
    --pg-teal-claro: #EDF6F8;

    /* El cian y el naranja de marca son preciosos como color, pero como
       TEXTO sobre blanco se quedan en 2,87 y 3,77 de contraste, por
       debajo del 4,5 que hace falta para leer. No se cambia el color de
       la casa —el logotipo es el que es— sino que cada uno tiene su
       versión para texto, del mismo tono y con la luz bajada hasta que
       cumple. El cian sigue siendo cian en bordes, iconos y gráficos;
       solo cambia cuando le toca ser una palabra. */
    --pg-cian-texto:    #017b90;   /* 4,64:1 sobre blanco */
    --pg-naranja-texto: #D24314;   /* 4,61:1 sobre blanco */

    /* Neutros tirados hacia el petróleo del logotipo. Un gris puro al
       lado de estos colores se ve muerto; estos son de la misma familia
       y por eso el conjunto parece elegido y no heredado. */
    --pg-tinta:    #10262F;
    --pg-suave:    #46606B;
    --pg-tenue:    #5d747d;
    --pg-linea:    #DCE6EA;
    --pg-linea-fuerte: #B9CCD4;
    --pg-fondo:    #ffffff;
    --pg-fondo-alt:#F3F8F9;

    --pg-ancho:    1120px;
    --pg-gutter:   28px;

    /* Compatibilidad: quedaban reglas apuntando al azul antiguo. */
    --pg-navy:     #006989;
    --pg-radio:    3px;
}

/* ── Contenedor y ritmo vertical ───────────────────────────────── */
.pg-wrap {
    max-width: var(--pg-ancho);
    margin: 0 auto;
    padding: 0 var(--pg-gutter);
}

.pg-main {
    color: var(--pg-tinta);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.pg-main p { margin: 0 0 1.15em; }
.pg-main p:last-child { margin-bottom: 0; }
/* Ojo con la especificidad de esta regla.
   «.pg-main a» pesa una clase MÁS un elemento, y eso le gana a «.pg-btn»,
   que es una clase sola. Resultado: el botón macizo se pintaba con el
   texto en petróleo sobre un fondo petróleo y salía un rectángulo vacío
   en la portada. Se veía en pantalla y no en el código, porque el
   «color:#fff» del botón estaba escrito y simplemente perdía.

   La solución no es subirle el peso al botón —eso empieza una carrera que
   acaba en !important por todas partes— sino decir aquí lo que esta regla
   es: el color de los enlaces DE TEXTO. Los componentes que ya traen su
   color se quedan fuera por su nombre. */
.pg-main a:not(.pg-btn):not(.pg-tarjeta):not(.ix-puerta):not(.pg-flecha) {
    color: var(--pg-teal);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.pg-main a:not(.pg-btn):not(.pg-tarjeta):not(.ix-puerta):not(.pg-flecha):hover {
    color: var(--pg-cian-texto);
}

/* ── Migas ─────────────────────────────────────────────────────── */
.pg-migas {
    font-size: 13px;
    letter-spacing: .01em;
    color: var(--pg-tenue);
    padding: 24px 0 0;
}
.pg-migas a { color: var(--pg-tenue); text-decoration: none; }
.pg-migas a:hover { color: var(--pg-cian-texto); }
.pg-migas span { margin: 0 8px; opacity: .55; }

/* ── Cabecera de página ────────────────────────────────────────────
   El título es una frase, no un rótulo: el rótulo corto vive en el
   menú. Debajo va la frase de apoyo, que remata la promesa y decide si
   alguien sigue leyendo. */
.pg-hero { padding: 34px 0 40px; }
.pg-hero h1 {
    margin: 0 0 16px;
    font-size: clamp(29px, 4.6vw, 45px);
    line-height: 1.12;
    letter-spacing: -.028em;
    font-weight: 700;
    color: var(--pg-teal);
    text-wrap: balance;
    max-width: 19ch;
}
.pg-hero .pg-frase {
    margin: 0;
    font-size: clamp(17px, 2.1vw, 20px);
    line-height: 1.6;
    color: var(--pg-suave);
    max-width: 60ch;
}

/* ── Secciones ─────────────────────────────────────────────────────
   Se separan con una línea de un píxel, no con cajas. */
.pg-seccion { padding: 44px 0; border-top: 1px solid var(--pg-linea); }
.pg-seccion > h2 {
    margin: 0 0 8px;
    font-size: clamp(21px, 2.5vw, 26px);
    line-height: 1.28;
    font-weight: 650;
    color: var(--pg-tinta);
    letter-spacing: -.018em;
    text-wrap: balance;
    max-width: 26ch;
}
.pg-seccion > .pg-entradilla {
    margin: 0 0 6px;
    color: var(--pg-suave);
    max-width: 66ch;
    font-size: 17.5px;
}
.pg-seccion h3 {
    margin: 30px 0 8px;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.005em;
    color: var(--pg-teal);
}

/* Una banda tenue para dar ritmo sin dibujar recuadros. */
.pg-fondo-alt { background: var(--pg-fondo-alt); }
.pg-fondo-alt .pg-seccion { border-top: 0; }

/* ── Bloques en rejilla ────────────────────────────────────────────
   Antes eran tarjetas con borde, esquina redondeada y sombra al pasar
   por encima. Ahora es una línea arriba y aire: se distinguen igual y
   la página deja de parecer un tablero de fichas. */
.pg-rejilla {
    display: grid;
    gap: 34px 40px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin: 30px 0 0;
}
.pg-rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.pg-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px 0 0;
    border-top: 1px solid var(--pg-linea-fuerte);
    background: none;
}
.pg-tarjeta h3 {
    margin: 0;
    font-size: 17.5px;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--pg-tinta);
}
.pg-tarjeta p { margin: 0; font-size: 15.5px; color: var(--pg-suave); line-height: 1.6; }

/* Cuando el bloque entero es un enlace, lo que responde es la línea de
   arriba y la flecha. Nada se mueve de sitio. */
a.pg-tarjeta { text-decoration: none; color: inherit; transition: border-color .18s; }
a.pg-tarjeta:hover { border-top-color: var(--pg-cian); }
a.pg-tarjeta:hover h3 { color: var(--pg-teal); }
a.pg-tarjeta .pg-flecha,
.ix-puerta .pg-flecha {
    margin-top: auto;
    padding-top: 12px;
    color: var(--pg-cian-texto);
    font-weight: 600;
    font-size: 14.5px;
    transition: color .18s;
}
a.pg-tarjeta:hover .pg-flecha { color: var(--pg-teal); }

/* ── Lista de puntos ───────────────────────────────────────────────
   La marca es una raya corta, no un círculo: pesa menos y no compite
   con el texto. */
.pg-puntos { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 15px; }
.pg-puntos li { position: relative; padding-left: 22px; color: var(--pg-suave); max-width: 70ch; }
.pg-puntos li::before {
    content: "";
    position: absolute;
    left: 0; top: .82em;
    width: 11px; height: 1px;
    background: var(--pg-cian);
}
.pg-puntos li b, .pg-puntos li strong { color: var(--pg-tinta); font-weight: 650; }

/* ── Tabla ─────────────────────────────────────────────────────────
   Sin relleno de color en la cabecera: una línea debajo basta para
   separarla, y la tabla deja de parecer una hoja de cálculo. */
.pg-tabla-wrap { overflow-x: auto; margin: 26px 0 0; -webkit-overflow-scrolling: touch; }
.pg-tabla { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15.5px; }
.pg-tabla th, .pg-tabla td {
    text-align: left;
    vertical-align: top;
    padding: 14px 22px 14px 0;
    border-bottom: 1px solid var(--pg-linea);
}
.pg-tabla th {
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pg-tenue);
    border-bottom-color: var(--pg-linea-fuerte);
    white-space: nowrap;
    padding-bottom: 10px;
}
.pg-tabla td { color: var(--pg-suave); }
.pg-tabla td b { color: var(--pg-tinta); font-weight: 650; }
.pg-tabla tr:last-child td { border-bottom: 0; }

/* ── Nota destacada ────────────────────────────────────────────────
   Aquí es donde se gasta el naranja del logotipo, y en ningún otro
   sitio: una sola cosa llamativa por página se ve; cinco no se ve
   ninguna. Sin fondo de color: la línea ya la separa. */
.pg-nota {
    margin: 28px 0 0;
    padding: 2px 0 2px 20px;
    border-left: 2px solid var(--pg-naranja);
    color: var(--pg-tinta);
    font-size: 17.5px;
    line-height: 1.6;
    max-width: 62ch;
}
.pg-nota p { margin: 0; }

/* ── Llamada a la acción ───────────────────────────────────────────
   Cada página tiene que poder responder a «¿qué quiero que haga quien
   llegue aquí?». Si una página no lleva uno de estos bloques, es que
   está mal planteada. */
.pg-cta {
    margin: 8px 0 0;
    padding: 40px 0 8px;
    border-top: 1px solid var(--pg-linea-fuerte);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 22px 40px;
}
.pg-cta-texto { flex: 1 1 340px; }
.pg-cta-texto h2 {
    margin: 0 0 6px;
    font-size: clamp(20px, 2.3vw, 25px);
    line-height: 1.25;
    letter-spacing: -.018em;
    color: var(--pg-teal);
    font-weight: 650;
    text-wrap: balance;
}
.pg-cta-texto p { margin: 0; color: var(--pg-suave); font-size: 16px; max-width: 56ch; }

.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: var(--pg-radio);
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: .005em;
    text-decoration: none;
    border: 1px solid var(--pg-teal);
    background: var(--pg-teal);
    color: #fff;
    transition: background .16s, border-color .16s, color .16s;
    min-height: 46px;
}
.pg-btn:hover { background: var(--pg-teal-hondo); border-color: var(--pg-teal-hondo); color: #fff; }
.pg-btn.ghost { background: transparent; color: var(--pg-teal); border-color: var(--pg-linea-fuerte); }
.pg-btn.ghost:hover { background: transparent; color: var(--pg-cian-texto); border-color: var(--pg-cian); }

.pg-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

/* ═══════════════════ LA PORTADA ═══════════════════════════════════
   Solo la usa index.php, pero vive aquí y no dentro del PHP: el
   problema de esta casa era justamente tener el CSS repartido por las
   páginas, con la misma tarjeta viéndose distinta en dos sitios.
   ═══════════════════════════════════════════════════════════════════ */

.ix-hero { padding: 66px 0 54px; }
.ix-hero h1 {
    margin: 0 0 22px;
    font-size: clamp(32px, 5.6vw, 56px);
    line-height: 1.06;
    letter-spacing: -.038em;
    font-weight: 700;
    color: var(--pg-tinta);
    max-width: 16ch;
    text-wrap: balance;
}
/* La promesa lleva su segunda mitad en el petróleo del logotipo: es la
   parte que compromete —«se acabe usando»— y conviene que se lea
   primero. */
.ix-hero h1 em { font-style: normal; color: var(--pg-teal); }
.ix-hero-sub {
    margin: 0;
    font-size: clamp(17px, 2.2vw, 21px);
    line-height: 1.6;
    color: var(--pg-suave);
    max-width: 56ch;
}
.ix-hero .pg-acciones { margin-top: 34px; }

/* ── Las tres puertas ───────────────────────────────────────────── */
.ix-puertas { padding: 10px 0 56px; }
.ix-puertas-titulo {
    margin: 0 0 4px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pg-tenue);
}
.ix-rejilla {
    display: grid;
    gap: 34px 44px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin: 22px 0 0;
}
.ix-puerta {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 20px 0 0;
    border-top: 2px solid var(--pg-linea-fuerte);
    text-decoration: none;
    color: inherit;
    transition: border-color .18s;
}
.ix-puerta:hover { border-top-color: var(--pg-cian); }
.ix-puerta:hover h3 { color: var(--pg-teal); }
/* La frase del visitante va ARRIBA y el nombre del área debajo: quien
   llega con prisa reconoce su problema antes que el nombre de un
   producto, y esa es toda la gracia de la bifurcación. */
.ix-puerta-pregunta {
    font-size: 14.5px;
    color: var(--pg-cian-texto);
    line-height: 1.45;
}
.ix-puerta h3 {
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.024em;
    color: var(--pg-tinta);
    transition: color .18s;
}
.ix-puerta p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--pg-suave); }

/* ── Los cuatro pasos ──────────────────────────────────────────────
   El número va suelto y grande, sin círculo de color detrás. La
   numeración está aquí porque el contenido SÍ es una secuencia: el
   orden —medir antes de formar— es la tesis entera de la casa. */
.ix-pasos {
    counter-reset: paso;
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    gap: 26px 40px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.ix-pasos li {
    counter-increment: paso;
    position: relative;
    padding: 0 0 0 42px;
    color: var(--pg-suave);
    font-size: 15.5px;
    line-height: 1.6;
}
.ix-pasos li::before {
    content: counter(paso, decimal-leading-zero);
    position: absolute;
    left: 0; top: -2px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--pg-cian-texto);
    font-variant-numeric: tabular-nums;
}
.ix-pasos li b { color: var(--pg-tinta); font-weight: 650; }

/* ── Los datos del catálogo ────────────────────────────────────── */
.ix-datos {
    display: grid;
    gap: 30px 40px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin: 30px 0 0;
}
.ix-datos div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--pg-linea-fuerte);
}
.ix-datos b {
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--pg-teal);
    font-variant-numeric: tabular-nums;
}
.ix-datos span { font-size: 14.5px; line-height: 1.5; color: var(--pg-suave); }

/* ── Móvil ─────────────────────────────────────────────────────────
   El gutter baja a 20px para cuadrar con la cabecera y el pie, que ya
   usan ese valor por debajo de 560px. Si no coinciden, el texto de la
   página y el del menú quedan desalineados y se nota enseguida. */
@media (max-width: 720px) {
    .pg-main { font-size: 16.5px; }
    .pg-seccion { padding: 32px 0; }
    .pg-hero { padding: 26px 0 30px; }
    .ix-hero { padding: 38px 0 34px; }
    .ix-puertas { padding: 4px 0 34px; }
    .pg-rejilla, .ix-rejilla { gap: 26px; }
    .pg-cta { padding-top: 30px; }
    .pg-acciones .pg-btn { flex: 1 1 100%; }
}

@media (max-width: 560px) {
    :root { --pg-gutter: 20px; }
    .pg-hero h1, .ix-hero h1 { max-width: none; }
}

/* Los enlaces táctiles necesitan sitio para el dedo, no solo para el ratón. */
@media (hover: none) and (pointer: coarse) {
    /* El objetivo táctil mínimo de la casa es 44px y la miga se quedaba corta:
       11 de relleno arriba, la línea y 11 abajo no llegaban. Faltaban un par
       de píxeles, que no se ven pero se fallan con el pulgar.

       Se pone el mínimo ESCRITO, igual que en el pie (css/layout.css), y no
       una suma de rellenos. Aquí importa más que en el pie: identidad.css
       carga después y le cambia la letra a la miga (--ap-t-rotulo, hoy 12px
       en monoespaciada, con 15,6 de interlínea). Sumando rellenos saldrían
       39,6 px y el arreglo habría sido falso; con min-height sale 44 aunque
       la letra cambie mañana. */
    .pg-migas a {
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
        min-height: 44px;
        padding: 12px 0;
        line-height: 1.3;
    }
}

/* ═══════════════════ ACCESIBILIDAD ════════════════════════════════ */

/* Foco visible. El contorno por defecto del navegador desaparece sobre
   los botones y sobre las líneas claras, así que quien navega con
   teclado se queda sin saber dónde está. Se usa :focus-visible y no
   :focus para no dibujarlo a quien llega con el ratón. */
.pg-btn:focus-visible,
a.pg-tarjeta:focus-visible,
.ix-puerta:focus-visible,
.pg-migas a:focus-visible,
.pg-main a:focus-visible {
    outline: 2px solid var(--pg-cian);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Movimiento reducido: para quien lo tiene activado en su sistema —por
   vértigo o por migraña— las transiciones no son un detalle bonito. */
@media (prefers-reduced-motion: reduce) {
    a.pg-tarjeta, .ix-puerta, .pg-btn, .pg-flecha { transition: none; }
}

/* ── Impresión ─────────────────────────────────────────────────── */
@media print {
    .pg-cta, .pg-acciones { display: none; }
    .pg-main { font-size: 12pt; }
    .pg-seccion { border-top: 1px solid #ccc; padding: 18pt 0; }
}

/* ═══════════════════ DIAGRAMAS ════════════════════════════════════
   Los dibujos que explican, de php/graficos.php.

   La mayoria son HTML y no imagenes a proposito: un SVG con texto
   dentro no refluye, se encoge entero, y a 335 px de ancho las
   etiquetas quedan en 8 px. Estos se readaptan solos, se seleccionan,
   los lee un lector de pantalla y se imprimen bien.
   ═══════════════════════════════════════════════════════════════════ */

.gr { margin: 34px 0 0; padding: 0; }
.gr figcaption {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--pg-tenue);
    max-width: 58ch;
}
.gr ol { list-style: none; margin: 0; padding: 0; }

/* ── El hexagono de los seis procesos ──────────────────────────── */
.gr-hex { --gr-teal: var(--pg-teal); --gr-cian: var(--pg-cian); --gr-linea: var(--pg-linea-fuerte); }
.gr-hex .gr-svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.gr-hex .gr-etiqueta {
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    fill: var(--pg-tinta);
    dominant-baseline: middle;
}

/* ── El ciclo de cuatro pasos ──────────────────────────────────────
   La linea que los une entra por la izquierda de cada paso y sigue
   hasta el siguiente; el ultimo la curva de vuelta al principio. */
.gr-ciclo ol {
    display: grid;
    gap: 30px 34px;
    /* Cuatro pasos, cuatro columnas fijas. Con auto-fit el navegador
       decidia solo, y entre 900 y 1000 px le salian TRES: «Volver a
       medir» —que es el paso que sostiene todo el discurso de la casa—
       caia solo a una segunda fila. Comprobado midiendo. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gr-ciclo li {
    position: relative;
    padding: 22px 0 0;
    border-top: 2px solid var(--pg-linea-fuerte);
}
.gr-ciclo .gr-num {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--pg-cian-texto);
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}
.gr-ciclo b {
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pg-tinta);
    margin-bottom: 5px;
}
.gr-ciclo .gr-txt { display: block; font-size: 15px; line-height: 1.55; color: var(--pg-suave); }
/* El paso que cierra el circulo se marca en naranja: es el que casi
   nadie hace y el que sostiene todo el discurso de la casa. */
.gr-ciclo .gr-cierra { border-top-color: var(--pg-naranja); }
.gr-ciclo .gr-cierra .gr-num { color: var(--pg-naranja-texto); }

/* ── La escalera de tramites ───────────────────────────────────────
   La barra crece con cada escalon. El primero va tenue porque es el
   suelo: lo hace todo el mundo. */
.gr-escalera {
    /* La altura de la barra más alta. Manda sobre el hueco reservado para
       TODAS: si algún día crece un escalón, se cambia aquí y solo aquí. */
    --gr-barra-alta: 104px;
}
.gr-escalera ol {
    display: grid;
    gap: 26px 26px;
    /* Cuatro columnas fijas, no auto-fit.
       Con «repeat(auto-fit, minmax(180px,1fr))» era el navegador quien
       decidia cuantas caben, y entre 721 y 853 px de ventana le salian
       TRES: los tres primeros escalones en una fila y el cuarto —la barra
       naranja, la mas alta— solo en una segunda. Ahi la escalera pierde
       el suelo comun contra el que se comparan las alturas, que es lo
       unico que la hace escalera. Un iPad en vertical son 768 px, o sea
       que no era un hueco teorico.
       Con cuatro pistas fijas y dos cortes escritos a mano, los cuatro
       escalones van siempre en una fila, o de dos en dos, o uno debajo
       de otro. Nunca tres y uno. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
}

/* Aquí estaba el fallo, y era de bulto: la rejilla llevaba
   «align-items: end», que alinea el FONDO de cada columna, no las barras.
   Como el cuarto texto tiene una línea menos que los otros tres, toda su
   pila —barra y rótulo incluidos— se desplazaba hacia abajo esa línea, y
   la escalera perdía justo lo que la hace escalera: el suelo común contra
   el que se comparan las alturas.

   Ahora cada escalón es una rejilla de tres filas. La primera mide
   siempre lo que la barra más alta y la barra se pega a su fondo: así
   todas las barras arrancan del mismo suelo y todos los rótulos empiezan
   a la misma altura, escriba lo que escriba cada uno debajo. */
.gr-escalera li {
    display: grid;
    grid-template-rows: var(--gr-barra-alta) auto auto;
    gap: 8px;
}
.gr-escalera .gr-barra {
    display: block;
    align-self: end;
    height: 34px;
    background: var(--pg-cian);
    border-radius: 1px;
}
.gr-escalera li:nth-child(2) .gr-barra { height: 56px; }
.gr-escalera li:nth-child(3) .gr-barra { height: 80px; background: var(--pg-teal); }
.gr-escalera li:nth-child(4) .gr-barra { height: var(--gr-barra-alta); background: var(--pg-naranja); }
.gr-escalera .gr-suelo .gr-barra { background: var(--pg-linea-fuerte); }
.gr-escalera b {
    font-size: 16.5px;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--pg-tinta);
}
.gr-escalera .gr-suelo b { color: var(--pg-tenue); }
.gr-escalera .gr-txt { font-size: 14.5px; line-height: 1.5; color: var(--pg-suave); }

/* De dos en dos en cuanto las cuatro dejan de caber comodas. 880 y no
   720: por debajo de 880 el ancho util no da para cuatro pistas
   legibles, y es justo la franja donde antes salia el 3+1. */
@media (max-width: 1060px) {
    /* El ciclo necesita mas ancho que la escalera: sus textos son mas
       largos, asi que se parte antes. */
    .gr-ciclo ol { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
    .gr-escalera ol { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
}

@media (max-width: 720px) {
    .gr { margin-top: 26px; }
    .gr-ciclo ol { gap: 24px; grid-template-columns: 1fr 1fr; }
    /* El SVG se encoge entero, asi que para que la etiqueta se lea a 15 px
       en pantalla hay que declararla mas grande dentro del lienzo. */
    .gr-hex .gr-etiqueta { font-size: 20px; }
}
@media (max-width: 460px) {
    .gr-ciclo ol, .gr-escalera ol { grid-template-columns: 1fr; }
    /* En una sola columna las barras no se pueden comparar entre si, asi
       que dejan de ser escalera y pasan a ser una raya de color sobre
       cada rotulo. Las cuatro miden 8 px.
       Y AQUI ESTA LA CLAVE: hay que bajar tambien la variable. El hueco
       que la fila reserva para la barra sale de --gr-barra-alta, y si se
       queda en 104 px mientras la barra mide 8, quedan 96 px de blanco
       encima de CADA escalon: 384 px de vacio en un diagrama de 800.
       La variable manda sobre el hueco; cambiarla es lo que hay que
       hacer, no fijar las alturas a mano. */
    .gr-escalera { --gr-barra-alta: 8px; }
    .gr-escalera .gr-barra,
    .gr-escalera li:nth-child(2) .gr-barra,
    .gr-escalera li:nth-child(3) .gr-barra,
    .gr-escalera li:nth-child(4) .gr-barra { height: 8px; }
    .gr-hex .gr-etiqueta { font-size: 22px; }
}

@media print {
    .gr-hex .gr-svg { max-width: 300px; }
}

/* ── Lista de espera de los módulos ──────────────────────────────
   Sale en Noti y en Boni, que son las dos páginas que reconocen que el
   módulo todavía no se vende suelto. Sin recuadro: la línea de la
   sección ya separa, y una caja aquí sería una caja más. */
.pg-espera { margin: 18px 0 0; max-width: 460px; }
.pg-espera label { display: block; font-size: 13px; font-weight: 600;
                   color: var(--pg-suave); margin-bottom: 6px; }
.pg-espera-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-espera-fila input {
    flex: 1 1 220px; min-width: 0; padding: 12px 14px;
    border: 1px solid var(--pg-linea-fuerte); border-radius: var(--pg-radio);
    font: inherit; font-size: 15px; color: var(--pg-tinta); background: #fff;
}
.pg-espera-fila input:focus-visible { outline: 2px solid var(--pg-cian); outline-offset: 1px; }
.pg-espera-fila .pg-btn { flex: 0 0 auto; }
.pg-espera-nota { margin: 8px 0 0; font-size: 13px; color: var(--pg-tenue); }
@media (max-width: 560px) { .pg-espera-fila .pg-btn { width: 100%; } }