/* ══ generadorsolarplus.com · la hoja de toda la web ══════════════════════════
   Opción A, «Escaparate», elegida por Rubén el 09/10/2026. Esta es la ÚNICA hoja:
   el generador la copia a web/css/sitio.css y auditoria-web.py falla si una página
   enlaza otra, si aparece un <style> o un style="", o si esta hoja carga algo de
   fuera del dominio. No editar la copia de web/: se sobrescribe.

   COLOR (CONTEXTO §10). Azul PMS 299 #00A3DD, principal, y verde PMS 3395
   #00C993, secundario. Los dos son claros: sobre blanco no valen para texto (2,9:1
   y 2,2:1), así que en claro hacen de RELLENO con letra oscura encima (6,6:1 y
   8,8:1) y el texto azul o verde usa su versión oscura, --azul-texto y
   --verde-texto. En oscuro valen tal cual. Nunca uno encima del otro (1,3:1).

   TEMA (Rubén, 18/10/2026). LA WEB SALE SIEMPRE EN CLARO, diga lo que diga el
   dispositivo: aquí no hay ni un prefers-color-scheme. El oscuro existe, pero solo
   lo pone el botón de la luna de la cápsula, que deja data-tema="oscuro" en <html>
   y lo recuerda en el navegador de quien lo pulsa (js/fondo.js). auditoria-web.py
   falla si vuelve un prefers-color-scheme, y auditoria-diseno.py abre la web con
   el dispositivo en oscuro y exige que salga en claro.

   VIDRIO (CONTEXTO §10 y trabajo/diseno-propuestas/vidrio.md). Solo en la cápsula
   del menú y en su panel: es la capa de controles. Los datos van siempre sobre
   fondo opaco. Hay versión opaca para «reducir transparencia», «más contraste»,
   colores forzados y navegadores sin backdrop-filter. auditoria-diseno.py lo lee
   aquí y mide el contraste del vidrio con blanco, negro, azul y verde debajo.

   MOVIMIENTO. Poco y corto: el botón que se hunde al pulsarlo y el menú que
   aparece. Solo transform y opacity, por debajo de 300 ms, nada infinito, y todo
   dentro de prefers-reduced-motion: no-preference. También lo comprueba
   auditoria-diseno.py.
   LA EXCEPCIÓN, el fondo de puntos (Rubén, 18/10/2026): una rejilla de puntos que
   crecen y menguan en ondas lentas, detrás de todas las páginas. Lo pinta
   js/fondo.js en un <canvas>, no esta hoja. Va quieto si el sistema pide menos
   movimiento, se para con un botón del menú (la WCAG 2.2.2 lo exige para lo que se
   mueve solo más de cinco segundos), y desaparece al imprimir, con colores forzados
   y con «más contraste». Sus colores están topados: ningún texto que vaya sobre el
   fondo de la página baja de 4,6:1 contra el punto más fuerte. Lo mide
   auditoria-diseno.py, y si alguien sube el color, rompe el build.            */

@font-face {
  font-family: "Texto";
  src: url("../fonts/texto.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  --familia: "Texto", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --azul: #00A3DD; --verde: #00C993;            /* marca, tal cual */
  --azul-hover: #33B5E4;                         /* 8,0:1 con --sobre-marca */
  --verde-hover: #33D4A9;                        /* 10,1:1 con --sobre-marca */
  --sobre-marca: #04121B;                        /* letra sobre azul 6,6:1, sobre verde 8,8:1 */

  --fondo: #FFFFFF; --fondo-2: #F3F6F9; --panel: #FFFFFF;
  --tinta: #0E1620; --tinta-2: #475466; --tinta-3: #5B6879;
  --filete: #E2E8EF; --filete-2: #C7D1DC;
  --borde-control: #6E7B8B;                      /* 4,3:1: un campo de formulario se ve (WCAG 1.4.11) */
  --azul-texto: #097098;                         /* 5,5:1 sobre blanco, 5,1:1 sobre --fondo-2. Hasta
                                                    el 18/10/2026 era #0A77A2 (5,0:1): se oscureció
                                                    un poco para dar margen al fondo de puntos */
  --verde-texto: #047857;
  --tinte-azul: #E3F4FB;                         /* fondo de lo elegido */
  --trama: #C9D2DC;
  --foco: #0E1620;
  --sombra: rgb(14 22 32 / .08);

  /* vidrio de la cápsula: el peor caso, con negro debajo, da 9,7:1 */
  --vidrio: rgb(255 255 255 / .74);
  --vidrio-panel: rgb(255 255 255 / .88);
  --vidrio-tinta: #0E1620; --vidrio-tinta-2: #475466;
  --vidrio-borde: rgb(14 22 32 / .09);
  --vidrio-luz: rgb(255 255 255 / .85);
  --vidrio-hover: rgb(14 22 32 / .07);
  --vidrio-opaco: #FFFFFF;

  --ilu-linea: #0E1620; --ilu-cuerpo: #FFFFFF; --ilu-pantalla: #0E1620;
  --ilu-hueco: #E8EEF4; --ilu-sombra: rgb(14 22 32 / .10); --ilu-celda: rgb(255 255 255 / .6);
  --ilu-suelo: #F3F6F9;

  /* EL FONDO DE PUNTOS (js/fondo.js los lee de aquí). Los colores van topados: el
     punto más fuerte, --punto-cresta, deja todo texto que vaya sobre el fondo de la
     página en 4,6:1 o más. En claro manda el verde de los nombres de modelo (5,5:1
     sobre blanco) y el azul de los enlaces (5,5:1 desde el 18/10/2026): por eso los
     puntos son suaves. El tope en claro está en #D6F0FA. Medidas en px y segundos.
     Rubén, 18/10/2026, segunda vuelta: «que se vean un pelín más» (eran #EBF8FC y
     2,8 px) y que se aparten un poco al pasar el cursor. */
  --punto: #F2FAFD; --punto-cresta: #DBF2FA;
  --punto-paso: 22;                              /* distancia entre puntos */
  --punto-radio: .8; --punto-radio-cresta: 3.2;  /* en el valle y en la cresta */
  --onda-largo: 760; --onda-periodo: 16; --onda-angulo: 35;
  /* el cursor: los puntos a menos de --cursor-radio se apartan de él hasta
     --cursor-empuje px. Solo con ratón; auditoria-diseno.py topa el empuje en 8 px */
  --cursor-radio: 150; --cursor-empuje: 6;

  --ancho: 76rem; --lectura: 44rem; --margen: clamp(1rem, 4vw, 2.5rem);
  --cuerpo: 1.0625rem;
  --radio: 28px; --radio-2: 20px;
  --salida: cubic-bezier(.23, 1, .32, 1);
  /* lo que tapa el menú flotante cuando la página baja a algo: el scroll-padding de html
     y el aire que hay encima del resultado de cada herramienta salen de aquí */
  --bajo-menu: 6rem;
}

/* El oscuro, solo si se ha pulsado el botón (ver TEMA, arriba), y solo en pantalla:
   al imprimir sale siempre el claro, que gasta menos tinta. */
@media screen {
  :root[data-tema="oscuro"] {
    color-scheme: dark;
    --fondo: #0A1016; --fondo-2: #111A23; --panel: #0F171F;
    --tinta: #E9EEF4; --tinta-2: #A7B3C1; --tinta-3: #8C99A8;
    --filete: #1E2A36; --filete-2: #2C3B4A;
    --borde-control: #7D8A9A;
    --azul-texto: #00A3DD; --verde-texto: #00C993;   /* en oscuro valen tal cual */
    --tinte-azul: #0C2633;
    --trama: #2C3B4A;
    --foco: #E9EEF4;
    --sombra: rgb(0 0 0 / .35);
    --vidrio: rgb(15 23 31 / .74);
    --vidrio-panel: rgb(15 23 31 / .86);
    --vidrio-tinta: #E9EEF4; --vidrio-tinta-2: #A7B3C1;
    --vidrio-borde: rgb(255 255 255 / .10);
    --vidrio-luz: rgb(255 255 255 / .08);
    --vidrio-hover: rgb(255 255 255 / .08);
    --vidrio-opaco: #0F171F;
    --ilu-linea: #E9EEF4; --ilu-cuerpo: #16212C; --ilu-pantalla: #04080C;
    --ilu-hueco: #0B1218; --ilu-sombra: rgb(0 0 0 / .45); --ilu-celda: rgb(255 255 255 / .42);
    --ilu-suelo: #111A23;
    --punto: #091C26; --punto-cresta: #083346;     /* tope: 4,6:1 con el texto más débil */
  }
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--bajo-menu); }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--familia); font-size: var(--cuerpo); line-height: 1.62; font-weight: 450;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
svg { display: block; }
h1, h2, h3, h4 { margin: 0; color: var(--tinta); font-weight: 800; line-height: 1.1;
  letter-spacing: -.03em; text-wrap: balance; }
h2 { font-size: clamp(1.875rem, 4vw, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.2; }
h4 { font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.3; font-weight: 750; }
p, ul, ol, dl, dd, figure { margin: 0; }
strong { font-weight: 750; }
small { font-size: .875rem; }
em { font-style: italic; }
code { font-size: .9em; }
a { color: var(--azul-texto); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
/* El nombre de cada modelo en artículos y perfiles, enlazado a Amazon y siempre del
   mismo color, para que se lea de un vistazo (Rubén, 11/10/2026). Verde de texto:
   5,5:1 sobre blanco y 8,9:1 sobre el fondo oscuro. Ver trabajo/enlaces_modelo.py. */
a.modelo { color: var(--verde-texto); font-weight: 650; text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--azul) 35%, transparent); color: var(--tinta); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
.saltar { position: absolute; left: 1rem; top: -6rem; z-index: 100; background: var(--tinta);
  color: var(--fondo); padding: .75rem 1.25rem; border-radius: 999px; font-weight: 700;
  text-decoration: none; }
.saltar:focus { top: 1rem; }
main { display: block; }
/* Lo que lleva hidden no se ve, aunque su clase le dé un display: los dos botones de
   ajustes salen ocultos en el HTML y js/fondo.js los muestra. Sin JavaScript no
   harían nada, así que no se enseñan. */
[hidden] { display: none !important; }

/* ── el fondo de puntos: un lienzo detrás de todo (lo pinta js/fondo.js) ────── */
/* El fondo de la página va en el <body> y el navegador lo pinta en el lienzo raíz,
   por debajo de este; los paneles y las tarjetas, con su fondo opaco, lo tapan.
   PEGADO A LA PÁGINA, no a la pantalla (Rubén, 18/10/2026: «que la red fuera
   infinita y variara al bajar»). Va en posición absoluta, así que sube con el texto
   al bajar y lo mueve el propio navegador, sin tirones. Cubre la ventana y un colchón
   por arriba y por abajo; js/fondo.js le pone su top y su altura y lo recoloca al
   bajar, sin pasar nunca del final de la página. auditoria-diseno.py falla si deja
   de ir en position: absolute. */
.fondo { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh;
  pointer-events: none; }
@media (forced-colors: active), (prefers-contrast: more) {
  .fondo { display: none; }
}

/* ── la cápsula: menú centrado y flotante, con vidrio ────────────────────── */
.cab { position: sticky; top: 12px; z-index: 50; height: 0; display: flex; align-items: flex-start;
  justify-content: center; padding: 0 12px; pointer-events: none; }
/* El vidrio va en un ::before y no en la cápsula: así la cápsula no es «raíz de
   fondo» y el panel del menú, que va dentro, desenfoca la página y no solo la
   cápsula. */
.capsula {
  pointer-events: auto; position: relative; z-index: 0; display: flex; align-items: center; gap: 2px;
  padding: 6px; margin-top: 12px; border-radius: 999px;
}
.capsula::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--vidrio-borde);
  box-shadow: inset 0 1px 0 var(--vidrio-luz), 0 14px 36px -18px rgb(4 18 27 / .45);
}
.marca { display: inline-flex; align-items: center; gap: 3px; min-height: 44px; padding: 0 14px 0 12px;
  font-weight: 800; letter-spacing: -.025em; font-size: 1.0625rem; color: var(--vidrio-tinta);
  text-decoration: none; white-space: nowrap; border-radius: 999px; }
.m2 { display: inline-flex; align-items: center; height: 1.5em; padding: 0 .5em; border-radius: 999px;
  background: var(--azul); color: var(--sobre-marca); font-weight: 800; letter-spacing: -.01em; }
.capsula-tramos ul { display: flex; gap: 2px; padding: 0; list-style: none; }
.capsula-tramos a, .desplegable > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; color: var(--vidrio-tinta); font-weight: 650; text-decoration: none;
  font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
}
.capsula-tramos a:hover, .desplegable > summary:hover { background: var(--vidrio-hover); }
/* el tramo en el que estás, en píldora llena, como el «Home» de Linsa */
.capsula-tramos a[aria-current="page"] { background: var(--vidrio-tinta); color: var(--vidrio-opaco); }
/* el panel se coloca respecto a la cápsula, no al botón: desde el 11/10/2026 el Menú va
   a la izquierda y un panel colgado de él se saldría de la pantalla por la derecha */
.desplegable { position: static; }
.desplegable > summary { list-style: none; }
.desplegable > summary::-webkit-details-marker { display: none; }
.ico-menu { display: none; }
.ico-caret { width: 1rem; height: 1rem; }
.desplegable[open] .ico-caret { transform: rotate(180deg); }
.desplegable-panel {
  position: absolute; left: 0; right: 0; margin-inline: auto; top: calc(100% + 8px);
  width: min(calc(100vw - 24px), 52rem);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px 24px; padding: 22px;
  border-radius: 28px; background: var(--vidrio-panel);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--vidrio-borde);
  box-shadow: inset 0 1px 0 var(--vidrio-luz), 0 24px 60px -24px rgb(4 18 27 / .5);
}
.desplegable-panel ul { padding: 0; list-style: none; display: grid; gap: 2px; }
.menu-tit { font-size: .8125rem; font-weight: 700; color: var(--vidrio-tinta-2); padding: 0 12px 6px; }
.desplegable-panel a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px;
  border-radius: 14px; color: var(--vidrio-tinta); text-decoration: none; font-weight: 600;
  line-height: 1.3; }
.desplegable-panel a:hover { background: var(--vidrio-hover); }
.desplegable-panel a[aria-current="page"] { background: var(--vidrio-hover); font-weight: 750; }
.desplegable-panel .ico { color: var(--azul-texto); }

/* el botón del tema, el último de la cápsula: arriba a la derecha (Rubén, 18/10/2026).
   La luna pone el oscuro; en oscuro sale el sol, que vuelve al claro. */
.capsula button.tema { display: inline-grid; place-items: center; flex: none; width: 44px; min-height: 44px;
  padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--vidrio-tinta); }
.capsula button.tema:hover { background: var(--vidrio-hover); }
.tema .ico { width: 20px; height: 20px; }
.tema .ico-sol, :root[data-tema="oscuro"] .tema .ico-luna { display: none; }
:root[data-tema="oscuro"] .tema .ico-sol { display: block; }
/* y en el panel, a todo lo ancho y al final, el que para el fondo animado */
.menu-ajustes { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--vidrio-borde); }
.desplegable-panel button.fondo-pausa { display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 6px 12px; border: 0; border-radius: 14px; background: transparent; color: var(--vidrio-tinta);
  font-weight: 600; font-size: 1rem; line-height: 1.3; text-align: left; }
.desplegable-panel button.fondo-pausa:hover { background: var(--vidrio-hover); }
.fondo-pausa .ico-mover, :root[data-fondo="quieto"] .fondo-pausa .ico-parar { display: none; }
:root[data-fondo="quieto"] .fondo-pausa .ico-mover { display: block; }

/* el vidrio no se puede dar por hecho: versión opaca si el sistema lo pide */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .capsula::before, .desplegable-panel { background: var(--vidrio-opaco); }
}
@media (prefers-reduced-transparency: reduce) {
  .capsula::before, .desplegable-panel { background: var(--vidrio-opaco);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .capsula::before, .desplegable-panel { background: var(--vidrio-opaco);
    -webkit-backdrop-filter: none; backdrop-filter: none; border: 2px solid var(--vidrio-tinta); }
}
@media (forced-colors: active) {
  .capsula::before, .desplegable-panel { background: Canvas; border: 1px solid CanvasText;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .m2 { forced-color-adjust: none; }
}

/* ── botones ──────────────────────────────────────────────────────────────── */
.boton { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; }
.boton-principal, .boton-amazon, button[type="submit"] {
  background: var(--azul); color: var(--sobre-marca); padding: 6px 6px 6px 26px; }
.boton-principal:hover, .boton-amazon:hover, button[type="submit"]:hover { background: var(--azul-hover); }
.boton-secundario { color: var(--tinta); border: 1.5px solid var(--tinta); padding: 0 24px; }
.boton-secundario:has(.boton-circulo) { padding: 4px 4px 4px 24px; }
.boton-secundario:hover { background: var(--tinta); color: var(--fondo); }
.boton-circulo { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--tinta); color: var(--fondo); flex: none; }
.boton-principal .boton-circulo, .boton-amazon .boton-circulo { background: var(--sobre-marca); color: var(--azul); }
.boton-secundario:hover .boton-circulo { background: var(--azul); color: var(--sobre-marca); }
.boton-circulo .ico { width: 20px; height: 20px; }
.boton-mini { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; border-radius: 999px;
  font-weight: 700; font-size: .875rem; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.boton-mini.boton-amazon { padding: 3px 3px 3px 16px; }
.boton-mini .boton-circulo { width: 36px; height: 36px; }
.boton-mini .boton-circulo .ico { width: 18px; height: 18px; }
.botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.enlace-datos { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }
.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
/* los dos botones de la portada, en verde y más grandes (Rubén, 11/10/2026). La
   letra va oscura: blanca sobre este verde no llega a 2,2:1 */
.boton-heroe { background: var(--verde); color: var(--sobre-marca); min-height: 60px;
  padding: 6px 6px 6px 30px; font-size: 1.125rem; font-weight: 750; gap: 16px; }
.boton-heroe:hover { background: var(--verde-hover); }
.boton-heroe .boton-circulo { width: 48px; height: 48px; background: var(--sobre-marca); color: var(--verde); }
.boton-heroe .boton-circulo .ico { width: 22px; height: 22px; }

/* los botones de los formularios */
button { font: inherit; cursor: pointer; }
button[type="submit"] { display: inline-flex; align-items: center; min-height: 52px; border: 0;
  border-radius: 999px; padding: 0 28px; font-weight: 750; font-size: 1rem; }
button[type="button"] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1.5px solid var(--borde-control); background: var(--panel);
  color: var(--tinta); font-weight: 650; font-size: .9375rem; }
button[type="button"]:hover { border-color: var(--tinta); }

/* ── la cabecera de cada página ───────────────────────────────────────────── */
.lema { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 16px;
  border: 1px solid var(--tinta); border-radius: 18px; font-size: .9375rem; font-weight: 650;
  line-height: 1.3; color: var(--tinta); }
.lema::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 28%, transparent); }
.heroe-pagina { max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto;
  padding: calc(80px + clamp(2.25rem, 6vw, 4.5rem)) var(--margen) 0; text-align: center; }
.heroe-pagina h1 { font-size: clamp(2.375rem, 6vw, 4.25rem); letter-spacing: -.04em; line-height: 1.02;
  margin: 22px auto 0; max-width: 18ch; }
.heroe-pagina .lema + h1 { margin-top: 22px; }
.heroe-pagina h1:first-child { margin-top: 0; }
.heroe-pagina > p:not(.lema):not(.acciones) { max-width: 60ch; margin: 20px auto 0; color: var(--tinta-2);
  font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.heroe-pagina > p small { font-size: .9375rem; }
.heroe-pagina strong { color: var(--tinta); }
.heroe-tramo h1 { font-size: clamp(1.625rem, 3.4vw, 2.5rem); letter-spacing: -.03em; max-width: none; }
.heroe-tramo.con-dibujo .acciones { justify-content: flex-start; }
.h1-cifra { display: block; font-size: clamp(4.25rem, 13vw, 9rem); letter-spacing: -.055em; line-height: .95;
  margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ── bloques ──────────────────────────────────────────────────────────────── */
.bloque { max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--margen) 0; }
.bloque > h2 + * { margin-top: 1.5rem; }
.bloque-texto { max-width: calc(var(--lectura) + 2 * var(--margen)); }
.bloque-texto p { color: var(--tinta-2); font-size: 1.0625rem; }
.bloque-texto p + p, .bloque-texto p + ul, .bloque-texto ul + p, .bloque-texto h2 + p { margin-top: 1rem; }
.bloque-texto strong { color: var(--tinta); }
.titulo-suave { font-size: clamp(1.25rem, 2.4vw, 1.625rem); letter-spacing: -.02em; text-align: center; }
.texto p + p, .herramienta p + p, .cara-texto p + p, .hallazgo p + p { margin-top: 1em; }
.texto { max-width: 62ch; }
.texto-corto { max-width: 60ch; color: var(--tinta-2); margin-top: 1rem; }
.texto p, .columnas-texto p { color: var(--tinta-2); }
.texto strong, .columnas-texto strong, .herramienta strong, .hallazgo strong, .cara-texto strong { color: var(--tinta); }

/* las marcas de los datos: lo oficial va limpio; la marca es para la excepción */
.muestra-np { display: inline-flex; align-items: center; padding: .15em .6em; border-radius: 10px;
  border: 1.5px dashed var(--tinta-3); color: var(--tinta-2); font-weight: 700; font-size: .875em;
  background: repeating-linear-gradient(135deg, var(--trama) 0 2px, transparent 2px 9px);
  white-space: nowrap; line-height: 1.35; }
.marca-nivel, .marca-conflicto { display: inline; padding: .1em .5em; border-radius: 999px; border: 1px solid;
  font-size: .75rem; font-weight: 700; line-height: 1.9; white-space: nowrap;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.marca-nivel { color: var(--tinta-2); border-color: var(--tinta-3); }
.marca-conflicto { color: var(--azul-texto); border-color: currentColor; text-decoration: none; }
/* al pasar por encima se invierte: azul oscuro sobre el tinte azul se quedaba en 4,46:1 */
a.marca-conflicto:hover { background: var(--azul-texto); border-color: var(--azul-texto); color: var(--fondo); }

/* avisos: lo que hay que saber antes de pulsar */
.avisos { display: grid; gap: 12px; }
.avisos p, #avisos p { position: relative; padding: 16px 20px 16px 52px; border: 1.5px solid var(--filete-2);
  border-radius: 18px; background: var(--panel); color: var(--tinta-2); font-size: .9375rem; }
.avisos p strong, #avisos p strong { color: var(--tinta); }
.avisos p::before, #avisos p::before { content: ""; position: absolute; left: 18px; top: 18px; width: 20px; height: 20px;
  background: var(--tinta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ── la declaración de afiliado: a la vista, al final de la página ────────── */
#declaracion-afiliado { width: min(52rem, calc(100% - 2 * var(--margen))); margin: clamp(2.5rem, 6vw, 3.5rem) auto 0;
  padding: 24px clamp(1.25rem, 3vw, 2rem) 26px; border-radius: var(--radio); background: var(--fondo-2); text-align: left; }
#declaracion-afiliado h2 { font-size: 1.125rem; letter-spacing: -.01em; }
#declaracion-afiliado p { color: var(--tinta-2); font-size: .9375rem; margin-top: .6rem; max-width: 72ch; }
#declaracion-afiliado strong { color: var(--tinta); }

/* ── tablas: siempre en su caja, que se desplaza ella sola ────────────────── */
/* position: relative hace de la caja el bloque contenedor de lo que va en posición
   absoluta dentro (el texto oculto .vh de los botones): sin eso, ese texto se escapa
   del desplazamiento de la caja y hace que la PÁGINA se mueva de lado en el móvil. */
.tabla-caja { position: relative; margin-top: 2rem; overflow-x: auto; max-width: 100%; border: 1px solid var(--filete);
  border-radius: 24px; background: var(--panel); scrollbar-color: var(--filete-2) transparent; }
.tabla-caja:focus-visible { outline-offset: 2px; }
/* La caja es un contenedor: así el pie de la tabla (su <caption>) se puede ceñir al
   ancho que se VE de la caja y no al de la tabla entera, que se desplaza. Sin esto, en
   una tabla ancha el pie se cortaba por la derecha. */
.tabla-caja { container-type: inline-size; }
.tabla-caja caption { max-width: 100cqi; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9375rem;
  line-height: 1.45; }
/* Con cinco columnas o más, en el móvil la tabla se desplaza en su caja en vez de
   partir cada nombre de modelo en tres líneas. Las de cuatro columnas o menos llevan
   texto largo y leen mejor ajustándose. */
table:has(tr > :nth-child(5)) { min-width: 42rem; }
caption { caption-side: bottom; text-align: left; padding: 14px 20px 16px; color: var(--tinta-2);
  font-size: .8125rem; line-height: 1.5; border-top: 1px solid var(--filete); }
th, td { padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filete); }
thead th { background: var(--fondo-2); color: var(--tinta-2); font-weight: 700; font-size: .8125rem;
  padding-top: 13px; padding-bottom: 13px; vertical-align: bottom; }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 650; color: var(--tinta); }
td small, th small { display: block; color: var(--tinta-2); font-size: .8125rem; line-height: 1.35; margin-top: 3px; }
td br, th br { display: none; }
td .v { font-weight: 700; color: var(--tinta); }
td .u { color: var(--tinta-2); }
.pie-tabla { margin-top: 1rem; color: var(--tinta-2); max-width: 75ch; }
/* Un nombre que enlaza solo en su celda: la línea mide 22 px y el dedo necesita 44.
   El relleno agranda la zona que se pulsa sin mover la fila, porque el margen
   negativo devuelve lo que el relleno ocupa. Vale también para las tablas que pinta
   el JavaScript de las herramientas, que no llevan clases. */
td > a:not([class]), th > a:not([class]), td > a.modelo, th > a.modelo {
  display: inline-block; padding-block: 12px; margin-block: -12px; }
.pie-tabla small { font-size: .875rem; }
/* la primera columna se queda quieta al desplazar: es la que dice qué es cada fila */
.tabla-tramo tbody th, .tabla-tramo thead th:first-child { position: sticky; left: 0; z-index: 1;
  background: var(--panel); box-shadow: 1px 0 0 var(--filete); }
.tabla-tramo thead th:first-child { background: var(--fondo-2); }
.tabla-tramo thead th { min-width: 9.5rem; color: var(--tinta); font-size: .875rem; }
.tabla-tramo thead th a { display: inline-flex; align-items: flex-end; min-height: 44px; color: var(--tinta);
  text-decoration: none; }
.tabla-tramo thead th a:hover { text-decoration: underline; }
.tabla-tramo tbody th { min-width: 9rem; font-size: .875rem; }
.tabla-tramo td { min-width: 9.5rem; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 1.25rem; color: var(--tinta-2); font-size: .875rem;
  line-height: 1.5; }
.ley { display: inline; }

/* ── la página de un tramo ────────────────────────────────────────────────── */
.entradilla-tramo { padding-top: clamp(2.5rem, 6vw, 4rem); }
.entradilla-tramo p:first-child { font-size: clamp(1.1875rem, 2vw, 1.375rem); line-height: 1.5; color: var(--tinta);
  font-weight: 500; }
.indice-modelos { padding-top: clamp(2.5rem, 6vw, 4rem); }
.titulo-indice { font-size: .9375rem; letter-spacing: 0; font-weight: 700; color: var(--tinta-2); text-align: center; }
.indice-modelos ol { list-style: none; padding: 0; margin-top: 14px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 10px; }
.indice-modelos a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
  min-height: 64px; height: 100%; padding: 12px 14px 12px 18px; border-radius: var(--radio-2); background: var(--fondo-2);
  color: var(--tinta); text-decoration: none; }
.indice-modelos a:hover { background: var(--tinte-azul); }
.im-nombre { font-weight: 750; line-height: 1.25; letter-spacing: -.01em; }
.im-dato { grid-column: 1; color: var(--tinta-2); font-size: .875rem; font-variant-numeric: tabular-nums; }
.im-flecha { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--azul-texto); }
#fichas > h2, .pag-tramo #comparativa > h2 { text-align: center; }

/* la ficha de un modelo */
.ficha { margin-top: 2rem; padding: clamp(1.375rem, 4vw, 2.75rem); border: 1px solid var(--filete);
  border-radius: 32px; background: var(--panel); box-shadow: 0 18px 40px -32px var(--sombra); }
#fichas > .ficha:first-of-type { margin-top: 2.5rem; }
.ficha-cab h3 { font-size: clamp(1.625rem, 3.4vw, 2.375rem); letter-spacing: -.035em; line-height: 1.08; }
.variante { margin-top: .75rem; color: var(--tinta-2); font-size: .9375rem; max-width: 70ch; }
.lecturas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 1.5rem; }
.lectura { padding: 16px 20px 18px; border-radius: var(--radio-2); background: var(--fondo-2); }
.lectura dt { font-size: .8125rem; font-weight: 700; color: var(--tinta-2); }
.lectura dd { margin-top: 4px; }
.lectura .v { font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums; }
.lectura .u { font-size: 1rem; font-weight: 700; color: var(--tinta-2); }
.lectura .proc { display: block; margin-top: 8px; font-size: .8125rem; color: var(--tinta-2); line-height: 1.35; }
.lectura.np dd { margin-top: 10px; }
.ficha-foto { margin-top: 1.5rem; }
.ficha-foto img { display: block; max-width: 100%; height: auto; border-radius: var(--radio-2); }
.ficha > .avisos { margin-top: 1.25rem; }
.ficha h4 { margin-top: 2rem; }
.ficha h4 + p, .ficha h4 + ul, .ficha h4 + dl, .ficha h4 + details, .ficha h4 + .tabla-caja { margin-top: .75rem; }
.ficha h4 + p { color: var(--tinta-2); font-size: .9375rem; max-width: 75ch; }
.ficha p + .pendientes, .ficha p + .conflictos { margin-top: .875rem; }
.ficha .ayuda { margin-top: 1rem; color: var(--tinta-2); }
.ficha .categoria { color: var(--tinta-2); font-size: .9375rem; }
.packs-intro, .pack-nota { color: var(--tinta-2); font-size: .9375rem; max-width: 75ch; }
.pack-nota { margin-top: .75rem; }
.tabla-packs td:last-child { min-width: 17rem; }
/* En el móvil la tabla de packs se desplaza en su caja en vez de estrujar sus columnas:
   «panel de 200 W» salía una palabra por línea. */
.tabla-packs { min-width: 46rem; }
.ficha .tabla-caja { margin-top: 1rem; border-radius: var(--radio-2); }

/* el bloque de compra: el precio con su fecha, y «Ver en Amazon» como botón principal */
.compra { margin-top: 1.25rem; padding: 22px 24px 24px; border-radius: 24px; background: var(--fondo-2);
  display: grid; gap: 14px 28px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.compra .compra-tit { grid-column: 1 / -1; margin: 0; font-size: .8125rem; font-weight: 700; color: var(--tinta-2);
  letter-spacing: 0; }
.ficha .compra .compra-tit { margin-top: 0; }
.compra .precio strong { display: block; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--tinta); }
.compra .precio small { display: block; margin-top: 8px; color: var(--tinta-2); max-width: 46ch; line-height: 1.45; }
.compra .botones { justify-content: flex-end; }
.compra.sin-precio { grid-template-columns: minmax(0, 1fr); }
.compra.sin-precio p { color: var(--tinta-2); }
.compra.sin-precio strong { color: var(--tinta); }

/* dónde las cifras no cuadran: las dos versiones y lo que se publica */
.conflictos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 12px; }
.conflicto { padding: 18px 20px 20px; border: 1px solid var(--filete); border-radius: var(--radio-2);
  background: var(--panel); display: flex; flex-direction: column; gap: 10px; }
.conflicto:target { border-color: var(--azul-texto); box-shadow: 0 0 0 3px var(--tinte-azul); }
.conflicto dt { display: flex; align-items: center; gap: 10px; font-weight: 750; color: var(--tinta); line-height: 1.3; }
.conflicto dt .ico { color: var(--azul-texto); }
.conflicto dd { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.version { color: var(--tinta-2); font-size: .875rem; line-height: 1.45; padding-top: 8px; border-top: 1px dashed var(--filete-2); }
.version-valor { display: block; font-size: 1rem; font-weight: 750; color: var(--tinta); }
.version em { font-style: normal; }
.en-esta-web { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--filete-2); color: var(--tinta-2);
  font-size: .875rem; line-height: 1.45; }
.en-esta-web strong { color: var(--tinta); font-weight: 750; }

/* lo que no está documentado: el hueco a la vista */
.pendientes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pendientes li { padding: 5px 12px; border-radius: 12px; border: 1.5px dashed var(--tinta-3); color: var(--tinta-2);
  font-size: .875rem; font-weight: 650;
  background: repeating-linear-gradient(135deg, var(--trama) 0 2px, transparent 2px 9px); }

/* de dónde sale cada dato: plegado, agrupado por documento */
.fuentes > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px;
  border-radius: 24px; border: 1.5px solid var(--borde-control); font-weight: 650; font-size: .9375rem;
  cursor: pointer; list-style: none; color: var(--tinta); line-height: 1.3; }
.fuentes > summary::-webkit-details-marker { display: none; }
.fuentes > summary:hover { border-color: var(--tinta); }
.fuentes > summary .ico { color: var(--azul-texto); }
.fuentes > summary .ico-caret { color: var(--tinta-2); }
.fuentes[open] > summary .ico-caret { transform: rotate(180deg); }
.fuentes ul { list-style: none; padding: 0; margin-top: 12px; border-radius: var(--radio-2); border: 1px solid var(--filete); }
.fuente { padding: 14px 18px; }
/* «Dónde las cifras no cuadran», plegado como las fuentes (Rubén, 11/10/2026) */
.plegado-conflictos { display: block; margin-top: 1rem; }
.plegado-intro { color: var(--tinta-2); font-size: .9375rem; margin: 14px 0 12px; max-width: 75ch; }
.fuente + .fuente { border-top: 1px solid var(--filete); }
.fuente-doc { font-weight: 650; font-size: .9375rem; }
.fuente-campos { color: var(--tinta-2); font-size: .875rem; margin-top: 4px; }
.volver { margin-top: 1.75rem; }
.volver a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 650; font-size: .9375rem; }
.volver .ico { width: 18px; height: 18px; transform: rotate(-45deg); }

.metodo-corto { text-align: left; }
#errores-documentados ul { margin-top: 1rem; padding-left: 1.25rem; color: var(--tinta-2); }
#errores-documentados li + li { margin-top: .6rem; }
#errores-documentados li::marker { color: var(--azul-texto); }

/* ── lectura: artículos y páginas legales ─────────────────────────────────── */
/* El texto va en una columna de lectura; las tablas pueden ser más anchas que ella. */
.pag-articulo main > article > section, .pag-legal main > section,
.pag-articulo main > article > h2, .pag-articulo main > article > p, .pag-articulo main > article > ul,
.pag-articulo main > article > .tabla-caja, .pag-legal main > p:not(.lema) {
  max-width: calc(64rem + 2 * var(--margen)); margin-left: auto; margin-right: auto;
  padding-left: var(--margen); padding-right: var(--margen); }
.pag-articulo main > article > section > :not(.tabla-caja), .pag-legal main > section > *,
.pag-articulo main > article > h2, .pag-articulo main > article > p, .pag-articulo main > article > ul,
.pag-legal main > p:not(.lema) {
  max-width: var(--lectura); margin-left: auto; margin-right: auto; }
.pag-articulo main > article > h2, .pag-articulo main > article > p, .pag-articulo main > article > ul,
.pag-legal main > p:not(.lema) { max-width: calc(var(--lectura) + 2 * var(--margen)); }
.pag-articulo main > article > section, .pag-legal main > section { padding-top: clamp(2.75rem, 6vw, 4rem); }
.pag-articulo main > article > h2 { padding-top: clamp(2.75rem, 6vw, 4rem); }
.pag-articulo main > article > p, .pag-articulo main > article > ul { margin-top: 1rem; color: var(--tinta-2);
  font-size: 1.125rem; line-height: 1.7; }
.pag-articulo main > article > .tabla-caja { padding: 0; max-width: 64rem; width: calc(100% - 2 * var(--margen));
  margin-top: 1.5rem; }
.pag-articulo section h2, .pag-legal section h2, .pag-articulo main > article > h2 {
  font-size: clamp(1.625rem, 3.2vw, 2.25rem); letter-spacing: -.03em; }
.pag-articulo section h3, .pag-legal section h3 { margin-top: 2rem; font-size: 1.25rem; }
.pag-articulo section p, .pag-legal section p, .pag-legal main > p:not(.lema) { color: var(--tinta-2); font-size: 1.125rem; line-height: 1.7; }
.pag-articulo section p + p, .pag-legal section p + p, .pag-articulo section h2 + p, .pag-legal section h2 + p,
.pag-articulo section h2 + ul, .pag-articulo section h2 + ol, .pag-legal section h2 + ul,
.pag-articulo section p + ul, .pag-articulo section p + ol, .pag-articulo section ul + p, .pag-articulo section ol + p,
.pag-legal section p + ul, .pag-legal section ul + p,
.pag-articulo section .tabla-caja + p, .pag-articulo section h3 + p { margin-top: 1rem; }
.pag-articulo section strong, .pag-legal section strong, .pag-articulo main > article > p strong { color: var(--tinta); }
.pag-articulo section ul, .pag-articulo section ol, .pag-legal section ul, .pag-legal section ol {
  padding-left: 1.4rem; color: var(--tinta-2); font-size: 1.0625rem; line-height: 1.65; }
.pag-articulo section li + li, .pag-legal section li + li { margin-top: .55rem; }
.pag-articulo li::marker, .pag-legal li::marker { color: var(--azul-texto); font-weight: 800; }
.pag-articulo section .tabla-caja { margin-top: 1.5rem; }
.pag-articulo #seguir, .pag-legal main > p:last-child { margin-top: clamp(3rem, 7vw, 4.5rem); }
.pag-articulo #seguir { padding-top: 0; }
.pag-articulo #seguir > * { position: relative; }
.pag-articulo #seguir { padding-bottom: 0; }
.pag-articulo #seguir h2 { font-size: 1.375rem; }
.pag-articulo #fuentes ul { font-size: .9375rem; }
.pag-legal main > p:last-child { color: var(--tinta-3); font-size: .875rem; }
.pag-legal #titular ul { list-style: none; padding: 0; margin-top: 1rem; border: 1px solid var(--filete);
  border-radius: var(--radio-2); }
.pag-legal #titular li { padding: 12px 18px; margin: 0; }
.pag-legal #titular li + li { border-top: 1px solid var(--filete); }

/* ── comparativas ─────────────────────────────────────────────────────────── */
.pag-comparativa main > article > section, .pag-indice-comparativas main > section,
.pag-indice-comparativas main > p:not(.lema) {
  max-width: calc(var(--ancho) + 2 * var(--margen)); margin-left: auto; margin-right: auto;
  padding: clamp(3rem, 7vw, 5rem) var(--margen) 0; }
.pag-comparativa .heroe-pagina h1 { font-size: clamp(2rem, 5vw, 3.75rem); max-width: 22ch; }
.pag-comparativa #resumen { max-width: calc(52rem + 2 * var(--margen)); }
.pag-comparativa #resumen > * { max-width: none; }
.pag-comparativa #resumen { display: grid; gap: 1rem; }
.pag-comparativa #resumen h2, .pag-comparativa #comprar h2, .pag-comparativa #fichas h2, .pag-comparativa #avisos h2,
.pag-comparativa #tabla h2 { text-align: center; }
.pag-comparativa #resumen p { color: var(--tinta-2); font-size: 1.125rem; line-height: 1.65; }
.pag-comparativa #resumen p:first-of-type { padding: 24px 28px; border-radius: var(--radio); background: var(--fondo-2);
  color: var(--tinta); font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.55; }
.pag-comparativa #resumen strong { color: var(--tinta); }
.pag-comparativa #tabla table { min-width: 40rem; }
.pag-comparativa #tabla tbody th { width: 22%; }
.pag-comparativa #tabla td { width: 26%; }
.pag-comparativa #tabla > p, .pag-comparativa #comprar > p { max-width: 70ch; margin: 1rem auto 0; text-align: center; color: var(--tinta-2); }
td.no-comparable { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--trama) 55%, transparent) 0 2px, transparent 2px 9px); }
td.no-comparable strong { color: var(--tinta); }
.pag-comparativa #avisos h3 { margin-top: 1.75rem; }
.pag-comparativa #avisos h3 + p, .pag-comparativa #avisos p + p { margin-top: 12px; }
.pag-comparativa #avisos { max-width: calc(52rem + 2 * var(--margen)); }
.pag-comparativa #fichas ul { list-style: none; padding: 0; margin-top: 1.5rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 12px; }
.pag-comparativa #fichas li a { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; height: 100%; padding: 16px 22px; border-radius: var(--radio-2); background: var(--fondo-2);
  color: var(--tinta); font-weight: 700; text-decoration: none; }
.pag-comparativa #fichas li a:hover { background: var(--tinte-azul); }
.pag-comparativa #fichas li a .ico { color: var(--azul-texto); }
.pag-comparativa #fichas > p { text-align: center; color: var(--tinta-2); max-width: 64ch; margin-inline: auto; }
.compras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 14px; margin-top: 1.5rem; }
.compras .compra { margin-top: 0; grid-template-columns: minmax(0, 1fr); align-content: start; }
.compras .compra h3 { font-size: 1.25rem; }
.compras .compra .botones { justify-content: flex-start; }

/* el índice de comparativas y el comparador */
.pag-indice-comparativas main > p:not(.lema) { max-width: calc(var(--lectura) + 2 * var(--margen)); color: var(--tinta-2);
  padding-top: 1.25rem; font-size: 1.0625rem; }
.pag-indice-comparativas main > p:not(.lema) strong { color: var(--tinta); }
.lista-parejas { list-style: none; padding: 0; margin-top: 1.5rem; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 0 28px; }
.lista-parejas li { padding: 10px 0; border-bottom: 1px solid var(--filete); color: var(--tinta-2); font-size: .875rem;
  line-height: 1.45; }
.lista-parejas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); font-weight: 650;
  font-size: .9375rem; text-decoration: none; }
.lista-parejas a:hover { text-decoration: underline; }
.pareja-precio { display: block; font-variant-numeric: tabular-nums; }
.pag-indice-comparativas #mismo-tramo > p, .pag-indice-comparativas #mismo-precio > p,
.pag-indice-comparativas #como-se-eligen > p { color: var(--tinta-2); max-width: 64ch; margin-top: 1rem; }

/* ── formularios: test, calculadoras y comparador ─────────────────────────── */
/* main > section: la portada también tiene un #test, la tarjeta que lleva al test */
main > section:is(#calculadora, #selector, #test) {
  max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--margen) 0; }
main > section:is(#calculadora, #selector, #test) > h2 { text-align: center; }
main > section:is(#calculadora, #selector) > p { max-width: 64ch; margin: 1rem auto 0; color: var(--tinta-2); text-align: center; }
form { margin-top: 2rem; padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--filete); border-radius: 32px;
  background: var(--panel); box-shadow: 0 18px 40px -32px var(--sombra); }
fieldset { margin: 0 0 1.75rem; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: .875rem; font-weight: 800; font-size: 1.1875rem; letter-spacing: -.02em; color: var(--tinta); }
form ul { list-style: none; padding: 0; display: grid; gap: 8px; }
form label { color: var(--tinta); }
form ul label { display: flex; align-items: center; gap: 12px; min-height: 52px; height: 100%; padding: 12px 16px;
  border: 1.5px solid var(--filete-2); border-radius: 16px; cursor: pointer; line-height: 1.35; font-weight: 550; }
form ul label:hover { border-color: var(--borde-control); }
form ul label:has(input:checked) { border-color: var(--azul-texto); background: var(--tinte-azul); }
/* una casilla con su texto es un solo objetivo, y de 44 px aunque vaya en una frase */
/* :where() deja esto sin especificidad: donde ya manda «form ul label», sigue mandando */
:where(label:has(> input[type="radio"]), label:has(> input[type="checkbox"])) { display: inline-flex;
  align-items: center; gap: 10px; min-height: 44px; vertical-align: middle; }
input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--azul-texto); }
input[type="text"], input[type="number"] { font: inherit; font-size: 1rem; min-height: 48px; padding: 0 14px;
  border: 1.5px solid var(--borde-control); border-radius: 12px; background: var(--panel); color: var(--tinta);
  max-width: 100%; }
input[type="number"] { font-variant-numeric: tabular-nums; }
input:hover { border-color: var(--tinta); }
form > p { margin-top: 1rem; color: var(--tinta-2); }
form > p:last-child { margin-top: 1.75rem; }
form > p label { display: block; font-weight: 700; margin-bottom: 6px; }
form > p small { display: block; margin-top: 6px; color: var(--tinta-2); max-width: 64ch; }
form .tabla-caja { border: 0; border-radius: 0; background: none; margin-top: 0; }
form .tabla-caja caption { padding-left: 0; border-top: 0; }
form table thead th { background: none; padding-left: 0; }
form table td { padding-left: 0; border-bottom: 0; white-space: nowrap; }
form table td input[type="text"] { width: 100%; min-width: 9rem; }
form table td input[type="number"] { width: 7rem; }
/* Encima del resultado, más aire que lo que tapa el menú: cuando la página baja hasta él,
   detrás del menú queda fondo, y no medio botón cortado (18/10/2026; auditoria-diseno.py
   lo mide al pulsar en cada herramienta). */
#resultado { position: relative; margin-top: calc(var(--bajo-menu) + .75rem); padding: clamp(1.25rem, 4vw, 2rem); border-radius: 28px;
  background: var(--fondo-2); overflow-x: auto; }
#resultado > :first-child { margin-top: 0; }
#resultado > * + * { margin-top: 1rem; }
#resultado h3 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); letter-spacing: -.03em; }
#resultado h4 { margin-top: 1.75rem; font-size: 1.125rem; }
#resultado p { color: var(--tinta-2); }
#resultado strong { color: var(--tinta); }
#resultado table { background: var(--panel); border-radius: var(--radio-2); overflow: hidden; }
#resultado ul { padding-left: 1.25rem; color: var(--tinta-2); }
#resultado li + li { margin-top: .5rem; }
#resultado .compra { background: var(--panel); }
#resultado .enlace-datos { font-size: .9375rem; }

/* el comparador: las casillas, en dos rejillas */
#fs-modelos > ul { gap: 1.25rem; }
.grupo-tit { font-weight: 750; color: var(--tinta-2); font-size: .875rem; margin-bottom: .5rem; }
.grupo-modelos ul, #fs-datos ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
#fs-modelos label, #fs-datos label { min-height: 48px; padding: 10px 14px; font-size: .9375rem; }
#fs-modelos > p, #fs-datos > p { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* el aviso de antes de empezar y las explicaciones de las herramientas */
.pag-herramienta #aviso, .pag-herramienta #umbrales, .pag-herramienta #como, .pag-herramienta #donde,
.pag-herramienta #publicado, .pag-herramienta #por-euro, .pag-herramienta #ciclos {
  max-width: calc(var(--lectura) + 2 * var(--margen)); margin: 0 auto; padding: clamp(3rem, 7vw, 4.5rem) var(--margen) 0; }
.pag-herramienta #publicado, .pag-herramienta #por-euro { max-width: calc(var(--ancho) + 2 * var(--margen)); }
.pag-herramienta #publicado > p, .pag-herramienta #por-euro > p { max-width: 64ch; }
.pag-herramienta section > h2 { font-size: clamp(1.625rem, 3.2vw, 2.25rem); }
.pag-herramienta section > p { color: var(--tinta-2); margin-top: 1rem; }
.pag-herramienta section > p strong { color: var(--tinta); }
.pag-herramienta section > ul, .pag-herramienta section > ol { margin-top: 1rem; padding-left: 1.4rem; color: var(--tinta-2); }
.pag-herramienta section > ul li + li, .pag-herramienta section > ol li + li { margin-top: .55rem; }
.pag-herramienta li::marker { color: var(--azul-texto); font-weight: 800; }
.pag-herramienta #aviso { max-width: calc(var(--ancho) + 2 * var(--margen)); }
.pag-herramienta #aviso h2 { text-align: center; }
.pag-herramienta #aviso { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.pag-herramienta #aviso h2 { grid-column: 1 / -1; margin-bottom: 1.5rem; }
.pag-herramienta #aviso p { margin: 0; padding: 22px 24px; border-radius: 24px; background: var(--fondo-2); font-size: .9375rem; }
/* «Cómo funciona» y «Qué hace» iban sin caja y salían pegados al borde izquierdo de la
   pantalla. Visto el 18/10/2026; auditoria-diseno.py falla ya si un texto se pega al
   borde en un ordenador. */
.pag-herramienta #como-funciona, .pag-herramienta #que-hace {
  max-width: calc(var(--lectura) + 2 * var(--margen)); margin: 0 auto; padding: clamp(3rem, 7vw, 4.5rem) var(--margen) 0; }

/* ── las herramientas por dentro, desde el 18/10/2026 (trabajo/formularios.py) ───
   Rubén: «que las cuatro preguntas salgan prácticamente en toda la pantalla al mismo
   tiempo», «que salgan en blanco y que al clicar se marquen» y que al pulsar «te
   aparezca el modelo directamente en la pantalla». La cabecera de las herramientas,
   más baja, para que las preguntas quepan debajo en la misma pantalla. */
.heroe-pagina.con-dibujo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 19rem);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; text-align: left; }
.heroe-pagina.con-dibujo h1 { margin-left: 0; max-width: 20ch; }
.heroe-texto > p:not(.lema) { max-width: 60ch; margin: 18px 0 0; color: var(--tinta-2); font-size: 1.125rem;
  line-height: 1.55; text-wrap: pretty; }
.heroe-texto > p small { font-size: .9375rem; }
.heroe-dibujo { width: 100%; }
/* en los perfiles y los artículos, que se leen centrados, el dibujo va encima del título */
:is(.pag-perfil, .pag-articulo) .heroe-pagina.con-dibujo { grid-template-columns: minmax(0, 1fr); gap: 1.25rem;
  text-align: center; }
:is(.pag-perfil, .pag-articulo) .heroe-pagina.con-dibujo .heroe-dibujo { order: -1; width: min(100%, 17rem);
  margin-inline: auto; }
:is(.pag-perfil, .pag-articulo) .heroe-pagina.con-dibujo h1,
:is(.pag-perfil, .pag-articulo) .heroe-texto > p:not(.lema) { margin-inline: auto; }
.pag-herramienta .heroe-pagina { padding-top: calc(80px + clamp(1.25rem, 3vw, 2rem)); }
.pag-herramienta .heroe-pagina h1 { font-size: clamp(2.125rem, 4.4vw, 3.25rem); }
.pag-herramienta .heroe-pagina .heroe-texto > p:not(.lema) { font-size: 1.0625rem; margin-top: 12px; }
.pag-herramienta .heroe-pagina .lema + h1 { margin-top: 14px; }
main > section#test, .pag-herramienta main > section#calculadora { padding-top: clamp(1.25rem, 3vw, 2rem); }
form.formulario-test { margin-top: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }

/* las preguntas: tarjetas, dos por fila en un ordenador */
.preguntas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pregunta { margin: 0; padding: 16px 16px 18px; border: 1.5px solid var(--filete); border-radius: 24px;
  background: var(--panel); box-shadow: 0 14px 30px -26px var(--sombra); }
.pregunta legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  padding: 0; font-size: 1.0625rem; line-height: 1.25; }
.pregunta-n { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--tinta); color: var(--fondo); font-size: .875rem; font-weight: 800; }
.pregunta:has(input:checked) .pregunta-n { background: var(--verde); color: var(--sobre-marca); }
.opciones { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opcion { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-height: 108px; height: 100%; padding: 12px; border: 1.5px solid var(--filete-2); border-radius: 16px;
  background: var(--panel); cursor: pointer; color: var(--tinta); text-align: left; hyphens: manual; }
.opcion:hover { border-color: var(--borde-control); }
.opcion:has(input:checked) { border-color: var(--azul-texto); background: var(--tinte-azul); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.opcion-ico .ico { width: 26px; height: 26px; color: var(--azul-texto); }
.opcion-tit { margin-top: 6px; font-weight: 750; font-size: 1rem; line-height: 1.2; }
.opcion-txt { font-size: .8125rem; line-height: 1.35; color: var(--tinta-2); }
/* la casilla, como una redonda que se rellena: se ve que se puede marcar y que está marcada */
.opcion input[type="radio"] { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; margin: 0;
  appearance: none; -webkit-appearance: none; border: 2px solid var(--borde-control); border-radius: 50%;
  background: var(--panel); }
.opcion input[type="radio"]:checked { border-color: var(--azul-texto); background: var(--azul-texto);
  box-shadow: inset 0 0 0 3px var(--panel); }
.opcion input[type="radio"]:focus-visible { outline: none; }
/* lo que falta, cuando se pulsa el botón sin haberlo respondido */
[data-falta] { border-color: var(--tinta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 35%, transparent); }
fieldset[data-falta] > legend { display: flex; align-items: center; gap: 10px; }
fieldset[data-falta] > legend::after, .casilla[data-falta] > label::after, [data-falta] > .herr-tit::after {
  content: "Falta"; margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--tinta);
  color: var(--fondo); font-size: .75rem; font-weight: 750; }
#f-comparar fieldset[data-falta] { border-radius: 18px; padding: 10px 12px; }

/* el botón, con la cuenta de lo respondido al lado */
.enviar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; margin-top: 16px; }
.progreso { color: var(--tinta-2); font-weight: 600; font-size: .9375rem; }
.progreso strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.progreso[data-listo] strong { color: var(--verde-texto); }
button.boton-enviar { gap: 14px; min-height: 60px; padding: 6px 6px 6px 28px; background: var(--verde);
  color: var(--sobre-marca); font-size: 1.0625rem; }
button.boton-enviar:hover { background: var(--verde-hover); }
.boton-enviar .boton-circulo { width: 48px; height: 48px; background: var(--sobre-marca); color: var(--verde); }

/* las calculadoras: el formulario sin caja, con sus tarjetas dentro */
form.formulario-herramienta { margin-top: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.herr-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem); gap: 14px; align-items: start; }
.herr-tarjeta { padding: 16px 18px 14px; border: 1.5px solid var(--filete); border-radius: 24px; background: var(--panel);
  box-shadow: 0 14px 30px -26px var(--sombra); }
.herr-tit { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.0625rem; color: var(--tinta); }
.herr-lado { display: grid; gap: 14px; }
.herr-lado .enviar { margin-top: 0; }
.herr-lado button.boton-enviar { width: 100%; justify-content: space-between; }
.tabla-aparatos td { padding-top: 5px; padding-bottom: 5px; }
.tabla-aparatos input[type="text"], .tabla-aparatos input[type="number"] { min-height: 44px; }
.herr-nota { padding: 16px 18px; border-radius: 20px; background: var(--fondo-2); font-size: .9375rem; color: var(--tinta-2); }
.herr-nota strong { color: var(--tinta); }
/* «Añade rápido»: un toque pone el nombre del aparato; los vatios, los pones tú */
.atajos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.atajos > span { margin-right: 4px; font-size: .875rem; font-weight: 650; color: var(--tinta-2); }
.atajos .atajo { padding: 0 14px; font-size: .875rem; }
.tabla-aparatos { margin-top: 6px; }
.con-unidad { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--tinta-2); }
/* la unidad del tirón: dos botones, ninguno marcado de serie */
.unidades { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.unidades legend { float: left; width: 100%; margin: 0 0 2px; padding: 0; font-size: .8125rem; font-weight: 650;
  letter-spacing: 0; color: var(--tinta-2); }
.unidades label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border: 1.5px solid var(--filete-2); border-radius: 999px; font-weight: 650; cursor: pointer; }
.unidades label:has(input:checked) { border-color: var(--azul-texto); background: var(--tinte-azul); }

/* las casillas de las calculadoras: una tarjeta por dato, en fila */
.casillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 14px; }
.casilla { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; border: 1.5px solid var(--filete);
  border-radius: 24px; background: var(--panel); box-shadow: 0 14px 30px -26px var(--sombra); }
.casilla > label { display: flex; align-items: center; gap: 10px; font-weight: 750; line-height: 1.25; color: var(--tinta); }
.casilla-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--tinte-azul); color: var(--azul-texto); }
.casilla-ico .ico { width: 20px; height: 20px; }
.casilla-opc { margin-left: auto; font-size: .75rem; font-weight: 650; color: var(--tinta-2); }
.casilla-campo { display: flex; align-items: center; gap: 8px; }
.casilla-campo input { flex: 1; min-width: 0; font-size: 1.125rem; }
.casilla-unidad { font-weight: 700; color: var(--tinta-2); white-space: nowrap; }
.casilla small { color: var(--tinta-2); font-size: .8125rem; line-height: 1.4; }

/* EL RESULTADO: arriba lo que has pedido, debajo la tarjeta de lo que sale */
.tus-respuestas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.tus-respuestas p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tus-tit { font-weight: 750; color: var(--tinta); }
.chip-r { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--filete-2); background: var(--panel);
  color: var(--tinta); font-size: .875rem; font-weight: 650; }
.destacado { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); gap: 12px clamp(1rem, 3vw, 2.25rem);
  align-items: center; padding: clamp(1.25rem, 3vw, 2rem); border: 2px solid var(--verde); border-radius: 28px;
  background: var(--panel); box-shadow: 0 22px 44px -34px var(--sombra); }
.destacado-cerca { border-color: var(--azul); }
.destacado-cuerpo > * + * { margin-top: 12px; }
.destacado-eti { font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--verde-texto); }
.destacado-cerca .destacado-eti { color: var(--azul-texto); }
#resultado .destacado h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); letter-spacing: -.02em; line-height: 1.25; }
#resultado .destacado h3:focus { outline: none; }
#resultado .destacado h3:focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; }
.destacado-nombre { display: block; margin-top: 4px; font-size: clamp(1.75rem, 3.6vw, 2.5rem); letter-spacing: -.035em; line-height: 1.05; color: var(--tinta); }
.cifras { display: flex; flex-wrap: wrap; gap: 8px; }
.cifras div { padding: 8px 14px; border-radius: 14px; background: var(--fondo-2); }
.cifras dt { font-size: .75rem; font-weight: 650; color: var(--tinta-2); }
.cifras dd { margin: 0; font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--tinta); }
#resultado .destacado .compra { margin-top: 14px; background: var(--fondo-2); }
.le-falta { padding: 14px 18px; border-radius: 18px; background: var(--tinte-azul); }
.le-falta p { color: var(--tinta); }
#resultado .le-falta ul { margin-top: 6px; color: var(--tinta); }
.aviso-falta { padding: 14px 18px; border-radius: 18px; background: var(--panel); border: 1.5px solid var(--tinta); }
#resultado .aviso-falta { color: var(--tinta); }

/* ── perfiles ─────────────────────────────────────────────────────────────── */
.pag-perfil main > article > section {
  max-width: calc(var(--ancho) + 2 * var(--margen)); margin-left: auto; margin-right: auto;
  padding: clamp(3rem, 7vw, 5rem) var(--margen) 0; }
.pag-perfil #intro { max-width: calc(var(--lectura) + 2 * var(--margen)); padding-top: 1.5rem; text-align: center; }
.pag-perfil #intro p { color: var(--tinta-2); font-size: 1.125rem; line-height: 1.6; }
.pag-perfil #intro p:first-child { color: var(--tinta); font-size: clamp(1.1875rem, 2vw, 1.375rem); font-weight: 500; }
.pag-perfil #intro p + p { margin-top: 1rem; }
.pag-perfil section > h2 { text-align: center; }
.pag-perfil section > p { max-width: 64ch; margin: 1rem auto 0; color: var(--tinta-2); text-align: center; }
.pag-perfil section > p strong { color: var(--tinta); }
.pag-perfil #que-pedimos ul { list-style: none; padding: 0; margin-top: 1.75rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 12px; }
.pag-perfil #que-pedimos li { padding: 20px 22px; border-radius: var(--radio-2); background: var(--fondo-2); color: var(--tinta-2); }
.pag-perfil #que-pedimos li strong { color: var(--tinta); }
.pag-perfil #cumplen h3 { margin-top: 2.5rem; text-align: center; }
.pag-perfil #descartados ul { margin-top: 1.5rem; padding: 0; list-style: none; columns: 2 22rem; column-gap: 28px; }
.pag-perfil #descartados li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--filete); color: var(--tinta-2);
  font-size: .9375rem; }
.pag-perfil #descartados li a { font-weight: 700; }
.pag-perfil #afinar { max-width: calc(var(--lectura) + 2 * var(--margen)); }
.pag-perfil #afinar p { text-align: left; }
.lista-perfiles { list-style: none; padding: 0; margin: clamp(2.5rem, 6vw, 4rem) auto 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 14px;
  max-width: calc(var(--ancho) + 2 * var(--margen)); padding-inline: var(--margen); }
.lista-perfiles a { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 44px; padding: 24px;
  border-radius: var(--radio); background: var(--fondo-2); color: var(--tinta); text-decoration: none; }
.perfil-dibujo { width: min(100%, 13rem); margin: -6px 0 6px; }
.lista-perfiles a:hover { background: var(--tinte-azul); }
.perfil-tit { font-weight: 800; font-size: 1.1875rem; letter-spacing: -.02em; line-height: 1.25; }
.perfil-n { color: var(--tinta-2); font-size: .9375rem; }
.pag-indice-perfiles main > p:not(.lema) { max-width: calc(var(--lectura) + 2 * var(--margen)); margin: 2rem auto 0;
  padding-inline: var(--margen); color: var(--tinta-2); text-align: center; }

/* ── «Lo más relevante»: los artículos por fecha (11/10/2026) ─────────────── */
.biblio-orden { display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  width: min(52rem, calc(100% - 2 * var(--margen))); margin: clamp(2rem, 5vw, 3rem) auto 0; }
.biblio-orden label { font-weight: 650; color: var(--tinta-2); }
.biblio-orden select { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--borde-control);
  background: var(--panel); color: var(--tinta); font: inherit; font-weight: 650; cursor: pointer; }
.biblioteca { list-style: none; padding: 0; display: grid; gap: 14px;
  width: min(52rem, calc(100% - 2 * var(--margen))); margin: 16px auto 0; }
.biblioteca li { padding: 22px clamp(1.25rem, 3vw, 1.75rem) 24px; border-radius: var(--radio-2); background: var(--fondo-2);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 11rem); gap: 8px 24px; align-items: center; }
.biblioteca li[hidden] { display: none; }
@media (max-width: 36rem) {
  .biblioteca li { grid-template-columns: minmax(0, 1fr); }
  .biblio-dibujo { order: -1; width: min(100%, 10rem); }
}
.biblio-fecha { color: var(--tinta-3); font-size: .875rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.biblioteca h2 { font-size: clamp(1.1875rem, 2.4vw, 1.375rem); letter-spacing: -.02em; line-height: 1.25; margin-top: .35rem; }
.biblioteca h2 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); text-decoration: none; }
.biblioteca h2 a:hover { text-decoration: underline; }
.biblioteca p:not(.biblio-fecha) { color: var(--tinta-2); font-size: .9375rem; margin-top: .5rem; max-width: 70ch; }

/* ── índice de tramos ─────────────────────────────────────────────────────── */
.tramos-indice { display: grid; gap: 16px; }
.tramo-indice { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem 3rem; padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--filete); border-radius: 32px; background: var(--panel); }
.tramo-indice-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tramo-indice-cab h2 { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -.05em; }
.tramo-indice-cab h2 a { color: var(--tinta); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.tramo-indice-cab h2 a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.tramo-indice-cab p { color: var(--tinta-2); }
.lista-modelos { list-style: none; padding: 0; }
.lista-modelos li { padding: 10px 0; border-bottom: 1px solid var(--filete); color: var(--tinta-2); font-size: .9375rem;
  font-variant-numeric: tabular-nums; }
.lista-modelos li:last-child { border-bottom: 0; }
.lista-modelos a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); font-weight: 700; text-decoration: none; }
.lista-modelos a:hover { text-decoration: underline; }
.lista-modelos small { font-size: .8125rem; }

/* ── la portada ───────────────────────────────────────────────────────────── */
.pag-portada .bloque { padding-top: clamp(4.5rem, 10vw, 8rem); }
.pag-portada .heroe { padding: calc(80px + clamp(3rem, 8vw, 6rem)) 0 0; text-align: center; overflow: hidden; }
.pag-portada .heroe-dentro { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.pag-portada h1 { font-size: clamp(3rem, 7.6vw, 5.75rem); letter-spacing: -.04em; line-height: .98;
  margin: 24px auto 0; max-width: 12ch; }
.pag-portada .entradilla { margin: 24px auto 0; max-width: 30ch; font-size: clamp(1.1875rem, 2.2vw, 1.5rem);
  line-height: 1.4; color: var(--tinta-2); font-weight: 500; text-wrap: balance; }
.pag-portada .acciones { margin-top: 36px; }
.pag-portada h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); }

.ilustracion { max-width: 920px; margin: clamp(2rem, 6vw, 3.5rem) auto 0; padding: 0 var(--margen); }
.ilustracion svg { width: 100%; height: auto; overflow: visible; }
.i-suelo { fill: var(--ilu-suelo); }
.i-sombra { fill: var(--ilu-sombra); }
.i-cuerpo { fill: var(--ilu-cuerpo); stroke: var(--ilu-linea); stroke-width: 4; }
.i-asa, .i-asa-dentro, .i-pata, .i-cable, .i-boton-raya { fill: none; stroke: var(--ilu-linea); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round; }
.i-frente { fill: var(--azul); stroke: var(--ilu-linea); stroke-width: 4; }
.i-pantalla { fill: var(--ilu-pantalla); }
.i-pila { fill: none; stroke: var(--verde); stroke-width: 3; }
.i-pila-borne, .i-pila-carga { fill: var(--verde); }
.i-luz { fill: var(--verde); stroke: var(--ilu-linea); stroke-width: 3; }
.i-luz-2 { fill: var(--ilu-cuerpo); stroke: var(--ilu-linea); stroke-width: 3; }
.i-enchufe, .i-usb { fill: var(--ilu-hueco); stroke: var(--ilu-linea); stroke-width: 4; }
.i-usb { stroke-width: 3; }
.i-polo, .i-pie { fill: var(--ilu-linea); }
.i-boton { fill: var(--ilu-cuerpo); stroke: var(--verde); stroke-width: 4; }
.i-placa-marco { fill: var(--azul); stroke: var(--ilu-linea); stroke-width: 4; }
.i-placa-celdas { fill: none; stroke: var(--ilu-celda); stroke-width: 2; }
.i-caja { fill: var(--ilu-cuerpo); stroke: var(--ilu-linea); stroke-width: 3; }
.i-sol circle { fill: var(--verde); stroke: var(--ilu-linea); stroke-width: 4; }
.i-sol path { stroke: var(--ilu-linea); stroke-width: 4; stroke-linecap: round; }

/* ── los dibujos pequeños (trabajo/dibujos.py, Rubén, 18/10/2026: «más visual») ──
   La misma familia que el de la portada, con el trazo un poco más fino porque se ven
   más pequeños. Los colores salen de las variables del tema: en oscuro se pintan
   solos. auditoria-web.py falla si un dibujo usa una clase que no está aquí. */
.dibujo svg { display: block; width: 100%; height: auto; overflow: visible; }
.d-sombra { fill: var(--ilu-sombra); }
.d-cuerpo, .d-azul, .d-verde, .d-hueco, .d-rueda { stroke: var(--ilu-linea); stroke-width: 3; stroke-linejoin: round; }
.d-cuerpo { fill: var(--ilu-cuerpo); }
.d-azul { fill: var(--azul); }
.d-verde { fill: var(--verde); }
.d-hueco { fill: var(--ilu-hueco); }
.d-rueda { fill: var(--ilu-pantalla); }
.d-pantalla { fill: var(--ilu-pantalla); }
.d-relleno { fill: var(--ilu-linea); }
.d-pila { fill: none; stroke: var(--verde); stroke-width: 2; }
.d-pila-carga { fill: var(--verde); }
.d-luz { fill: var(--verde); stroke: var(--ilu-linea); stroke-width: 2; }
.d-luz-2 { fill: var(--ilu-cuerpo); stroke: var(--ilu-linea); stroke-width: 2; }
.d-boton { fill: var(--ilu-cuerpo); stroke: var(--verde); stroke-width: 3; }
.d-celdas { fill: none; stroke: var(--ilu-celda); stroke-width: 2; }
.d-linea, .d-linea-gruesa, .d-fina, .d-verde-linea, .d-mango, .d-marca, .d-marca-fina {
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
.d-linea { stroke: var(--ilu-linea); stroke-width: 3; }
.d-linea-gruesa { stroke: var(--ilu-linea); stroke-width: 4; }
.d-fina { stroke: var(--ilu-linea); stroke-width: 2; }
.d-verde-linea { stroke: var(--verde); stroke-width: 5; }
.d-mango { stroke: var(--ilu-linea); stroke-width: 9; }
/* la marca sobre el verde o el azul: siempre oscura, que blanca sobre verde no se lee */
.d-marca { stroke: var(--sobre-marca); stroke-width: 4; }
.d-marca-fina { stroke: var(--sobre-marca); stroke-width: 3; }

/* títulos de bloque, centrados como en las plantillas */
.pag-portada #que-hacemos-distinto > h2, .pag-portada #por-potencia > h2, .pag-portada #perfiles > h2,
.pag-portada #todos > h2, .pag-portada #hallazgos > h2, .pag-portada #metodologia > h2 {
  text-align: center; max-width: 22ch; margin-inline: auto; }
.pag-portada #perfiles .texto-corto { margin-inline: auto; text-align: center; }
.pag-portada .nota { margin-inline: auto; }

/* antes de nada: título a un lado, texto al otro */
.bloque-partido { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 4rem; align-items: start; }
.bloque-partido > h2 + * { margin-top: 0; }
.pag-portada .bloque-partido h2 { font-size: clamp(2rem, 4vw, 3rem); }
.pag-portada .bloque-partido .texto p { font-size: 1.125rem; }

/* cifras en tarjetas grises */
.tarjetas-cifra { list-style: none; padding: 0; margin-top: 3rem; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tarjeta { background: var(--fondo-2); border-radius: var(--radio); padding: 32px 30px 34px; }
.tarjeta-cifra { min-height: 4.5rem; display: flex; align-items: flex-end; font-size: clamp(3rem, 5.4vw, 4.5rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tinta); }
.tarjeta-cifra .muestra-np { font-size: 1.375rem; letter-spacing: 0; margin-bottom: .35rem; }
.tarjeta-tit { margin-top: 12px; font-weight: 750; font-size: 1.125rem; letter-spacing: -.01em; }
.tarjeta p:last-child { margin-top: 12px; color: var(--tinta-2); }
.nota { display: flex; gap: 12px; align-items: flex-start; max-width: 64ch; margin-top: 2.5rem;
  padding: 16px 20px; border: 1.5px solid var(--filete-2); border-radius: 18px; color: var(--tinta-2);
  font-size: .9375rem; }
.nota .ico { color: var(--tinta); margin-top: .1em; }
.nota strong { color: var(--tinta); }

/* tramos: anillos de línea fina que se solapan (en la portada y en el 404) */
.tramos-portada { list-style: none; padding: 0; display: flex; justify-content: center; margin-top: 3.5rem; }
.tramos-portada li + li { margin-left: -30px; }
.tramo { width: clamp(13rem, 21vw, 16rem); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--tinta); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; padding: 2.25rem 2.1rem; text-align: center; position: relative;
  color: var(--tinta); text-decoration: none; }
.tramo:hover { background: color-mix(in srgb, var(--azul) 14%, transparent); }
.ico-tramo { width: 30px; height: 30px; color: var(--azul-texto); margin-bottom: 4px; }
.tramo-w { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 800; letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums; }
.tramo-n { font-size: .9375rem; font-weight: 700; }
.tramo-txt { font-size: .8125rem; line-height: 1.35; max-width: 15ch; color: var(--tinta-2); }
.tramo-flecha { display: none; }

/* usos */
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 2rem; }
.chips a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 14px;
  border-radius: 999px; color: var(--tinta); font-weight: 650; text-decoration: none; background: var(--fondo-2); }
.chips a:hover { background: var(--tinte-azul); }
.chips .ico { width: 22px; height: 22px; color: var(--azul-texto); }

/* herramientas: tarjetas con insignia verde */
.herramientas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 24px; }
.herramienta { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--panel);
  border: 1px solid var(--filete); border-radius: var(--radio); padding: 54px 32px 32px; }
.herramienta h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.herramienta p { color: var(--tinta-2); }
.herramienta .herramienta-accion { margin-top: auto; padding-top: 10px; }
/* el título de cada herramienta, con su dibujo al lado (18/10/2026) */
.herramienta-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, 10.5rem); gap: 12px 18px;
  align-items: center; }
.herramienta-dibujo { margin-top: -12px; }
.insignia { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: var(--verde); color: var(--sobre-marca); }
.insignia .ico { width: 28px; height: 28px; }
.herramienta .insignia { position: absolute; top: -28px; left: 30px; box-shadow: 0 0 0 6px var(--fondo); }

/* cara a cara: la cifra grande y su banda gris */
.bloque-cara { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem 3.5rem; align-items: center; }
.cara-cifra { font-weight: 800; letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums;
  font-size: clamp(5rem, 13vw, 10rem); color: var(--azul-texto); text-align: center; }
.cara-texto { background: var(--fondo-2); border-radius: var(--radio); padding: 36px 36px 32px; }
.cara-texto p { color: var(--tinta-2); max-width: 60ch; }
.cara-texto h2 { margin-bottom: 1.25rem; }
.cara-accion { margin-top: 1.75rem; }

/* la tabla de los 25, agrupada por tramo */
.pag-portada .tabla-caja table { min-width: 46rem; }
.pag-portada th, .pag-portada td { padding: 4px 16px; text-align: right; white-space: nowrap; vertical-align: middle; }
.pag-portada thead th { padding-top: 14px; padding-bottom: 14px; }
.pag-portada thead th:first-child, .pag-portada tbody th { text-align: left; }
.pag-portada tbody th { position: sticky; left: 0; background: var(--panel); }
.pag-portada tbody th a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); text-decoration: none; }
.pag-portada tbody th a:hover { text-decoration: underline; }
.pag-portada td small { padding-bottom: 6px; }
tr.grupo th { position: static; text-align: left; padding: 0; background: var(--fondo-2); }
.grupo-dentro { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 12px; padding: 0 16px; }
tr.grupo a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); text-decoration: none;
  font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em; }
tr.grupo a:hover { text-decoration: underline; }
tr.grupo span { color: var(--tinta-2); font-weight: 600; font-size: .875rem; }
.pag-portada .pie-tabla { margin-inline: auto; text-align: center; }

/* casos: tres tarjetas como las de opiniones de Proland */
.casos { list-style: none; padding: 0; margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.caso { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--radio);
  border: 1px solid var(--filete); background: var(--panel); }
.caso-modelo { display: block; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; color: var(--tinta); }
.caso-campo { display: block; color: var(--tinta-2); font-weight: 600; }
.caso-versiones { display: grid; gap: 14px; }
.caso-versiones div + div { padding-top: 14px; border-top: 1px dashed var(--filete-2); }
.caso-versiones dt { color: var(--tinta-2); font-size: .875rem; font-weight: 600; line-height: 1.35; }
.caso-versiones dd { font-weight: 800; letter-spacing: -.02em; color: var(--tinta); line-height: 1.2; font-size: 1.5rem; margin-top: 2px; }
/* lo que va en la web, sin píldora verde y en pequeño (Rubén, 11/10/2026) */
.caso-en-esta-web { color: var(--tinta-2); font-size: .9375rem; }
.caso-en-esta-web strong { color: var(--tinta); font-weight: 750; }
.caso-enlace { margin-top: auto; }
.caso-enlace a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 650; }
.caso-enlace .ico { width: 1rem; height: 1rem; }
.hallazgos { columns: 2; column-gap: 20px; margin-top: 20px; }
.hallazgo { break-inside: avoid; background: var(--fondo-2); border-radius: 24px; padding: 28px; margin-bottom: 20px; }
.hallazgo h3 a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--tinta);
  text-decoration-color: var(--filete-2); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.hallazgo h3 a:hover { text-decoration-color: currentColor; }
.hallazgo p { color: var(--tinta-2); margin-top: .75rem; }

/* método: pasos con flecha entre medias */
.pasos { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; text-align: center; }
.paso { position: relative; }
.paso dt { display: flex; flex-direction: column; align-items: center; gap: 18px; font-weight: 800; font-size: 1.25rem;
  letter-spacing: -.02em; color: var(--tinta); }
.ico-paso { width: 76px; height: 76px; padding: 20px; border-radius: 50%; border: 1.5px solid var(--tinta); color: var(--azul-texto); }
.paso dd { color: var(--tinta-2); margin-top: .75rem; max-width: 32ch; margin-inline: auto; }
.paso + .paso::before { content: ""; position: absolute; top: 31px; left: -1.95rem; width: 13px; height: 13px;
  border-top: 2px solid var(--tinta-3); border-right: 2px solid var(--tinta-3); transform: rotate(45deg); }
.contradice { max-width: 62ch; margin: 3.5rem auto 0; text-align: center; padding: 28px 32px; border-radius: var(--radio);
  border: 1.5px solid var(--filete-2); }
.contradice h3 { font-size: 1.375rem; }
.contradice p { color: var(--tinta-2); margin-top: .75rem; }
.pag-portada #declaracion-afiliado { margin-top: clamp(4.5rem, 10vw, 8rem); }

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.pag-error .tramos-portada { margin-top: 2rem; }
.pag-error .tramo { width: clamp(11rem, 18vw, 13.5rem); padding: 1.75rem 1.5rem; }
.pag-error .tramo-n { font-size: .8125rem; font-weight: 650; color: var(--tinta-2); }
.salidas { list-style: none; padding: 0; margin: 1.75rem auto 0; display: grid; gap: 10px; max-width: 44rem; }
.salidas a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 20px; border-radius: var(--radio-2);
  background: var(--fondo-2); color: var(--tinta); font-weight: 650; text-decoration: none; line-height: 1.35; }
.salidas a:hover { background: var(--tinte-azul); }
.salidas .ico { color: var(--azul-texto); }
.nota-404 { max-width: 44rem; margin: 1.5rem auto 0; text-align: center; color: var(--tinta-2); }

/* ── el pie ───────────────────────────────────────────────────────────────── */
.pie { max-width: calc(var(--ancho) + 2 * var(--margen)); margin: clamp(4.5rem, 10vw, 7rem) auto 0;
  padding: 2.75rem var(--margen) 3rem; color: var(--tinta-2); font-size: .875rem; }
.pie-dentro { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem;
  padding-top: 2.75rem; border-top: 1px solid var(--filete); }
.pie-quien p + p { margin-top: .5rem; }
.pie-marca { font-weight: 800; letter-spacing: -.025em; color: var(--tinta); font-size: 1.0625rem;
  display: flex; gap: 3px; align-items: center; margin-bottom: .75rem; }
.pie-tit { font-weight: 750; color: var(--tinta); margin-bottom: .25rem; }
.pie-col ul { list-style: none; padding: 0; }
.pie-col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta-2); text-decoration: none; line-height: 1.3; }
.pie-col a:hover { color: var(--tinta); text-decoration: underline; }
.pie-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: 2rem;
  padding-top: 1.5rem; border-top: 1px solid var(--filete); }
.pie a { color: var(--tinta-2); }
.pie-creditos { max-width: 60ch; }

/* ── movimiento: poco, corto, y nada si el sistema pide menos ─────────────── */
@media (prefers-reduced-motion: no-preference) {
  .boton, .boton-mini, .chips a, .tramo, .capsula-tramos a, .desplegable > summary, .caso-enlace a,
  .desplegable-panel a, .indice-modelos a, .salidas a, .lista-perfiles a, button,
  .pag-comparativa #fichas li a { transition: transform 160ms var(--salida); }
  .boton:active, .boton-mini:active, .chips a:active, .tramo:active, .capsula-tramos a:active,
  .desplegable > summary:active, .desplegable-panel a:active, .indice-modelos a:active, .salidas a:active,
  .lista-perfiles a:active, button:active, .pag-comparativa #fichas li a:active { transform: scale(.97); }
  .desplegable[open] .desplegable-panel { animation: aparece 220ms var(--salida); transform-origin: top center; }
  .desplegable .ico-caret, .fuentes .ico-caret { transition: transform 200ms var(--salida); }
  /* el resultado de una herramienta entra subiendo un poco, una vez (formularios.py) */
  #resultado.aparece > * { animation: entra 280ms var(--salida) both; }
  #resultado.aparece > :nth-child(2) { animation-delay: 60ms; }
}
@keyframes aparece { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }

/* ── estrecho ─────────────────────────────────────────────────────────────── */
@media (max-width: 64rem) {
  .tramos-portada { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tramos-portada li + li { margin-left: 0; }
  .tramo, .pag-error .tramo { width: 100%; aspect-ratio: auto; border-radius: var(--radio); padding: 22px 20px;
    align-items: flex-start; text-align: left; }
  .tramo-txt { max-width: none; }
  .casos, .tarjetas-cifra { grid-template-columns: minmax(0, 1fr); }
  .herramientas { grid-template-columns: minmax(0, 1fr); }
  .bloque-cara { grid-template-columns: minmax(0, 1fr); }
  .cara-cifra { text-align: left; }
  .pie-dentro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie-quien { grid-column: 1 / -1; }
  .tramo-indice { grid-template-columns: minmax(0, 1fr); }
}
/* La cápsula entera (marca, Menú, cuatro tramos, «Lo más relevante» y el botón del
   tema) pide unos 940 px: por debajo de 60rem se queda en marca, Menú y tema. La
   marca a la izquierda; el Menú y el botón del tema, juntos a la derecha.
   auditoria-diseno.py mide que quepa de 320 px en adelante. */
@media (max-width: 60rem) {
  .capsula { width: 100%; max-width: 40rem; }
  .marca { margin-right: auto; }
  .capsula-tramos { display: none; }
  .ico-menu { display: block; }
}
@media (max-width: 56rem) {
  .desplegable-panel { grid-template-columns: minmax(0, 1fr); max-height: calc(100dvh - 96px);
    overflow-y: auto; }
  .desplegable-panel .menu-grupo:first-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desplegable-panel .menu-grupo:first-child li:last-child { grid-column: 1 / -1; }   /* «Los 25 modelos», en una línea */
  .compra { grid-template-columns: minmax(0, 1fr); }
  .compra .botones { justify-content: flex-start; }
  /* en el móvil, el botón de compra a todo el ancho: se pulsa mejor */
  .compra .botones .boton { width: 100%; justify-content: space-between; white-space: nowrap; }
  .pag-herramienta #aviso { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pag-herramienta #aviso h2 { margin-bottom: .5rem; }
  /* las preguntas, una por fila; las respuestas siguen en tres columnas */
  .preguntas { grid-template-columns: minmax(0, 1fr); }
  .herr-rejilla { grid-template-columns: minmax(0, 1fr); }
  .destacado { grid-template-columns: minmax(0, 1fr); }
  .destacado-dibujo { width: min(100%, 15rem); margin-inline: auto; }
}
@media (max-width: 48rem) {
  /* la cabecera con dibujo: el dibujo arriba, pequeño, y el texto centrado */
  .heroe-pagina.con-dibujo { grid-template-columns: minmax(0, 1fr); gap: 1rem; text-align: center; }
  .heroe-pagina.con-dibujo .heroe-dibujo { order: -1; width: min(100%, 15rem); margin-inline: auto; }
  .heroe-pagina.con-dibujo h1, .heroe-texto > p:not(.lema) { margin-inline: auto; }
  .heroe-tramo.con-dibujo .acciones { justify-content: center; }
  .herramienta-cabeza { grid-template-columns: minmax(0, 1fr) 6.5rem; }
  .enviar { justify-content: stretch; }
  .enviar .progreso { width: 100%; text-align: center; }
  button.boton-enviar { width: 100%; justify-content: space-between; }
}
@media (max-width: 36rem) {
  /* en el teléfono, cada respuesta en su fila: icono, título y detalle */
  .opciones { grid-template-columns: minmax(0, 1fr); }
  .opcion { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px;
    min-height: 56px; padding: 8px 40px 8px 12px; }
  .opcion-ico { grid-row: 1 / span 2; }
  .opcion-tit { margin-top: 0; }
  .opcion-txt { grid-column: 2; }
  .opcion input[type="radio"] { top: 50%; margin-top: -10px; }
  /* en el teléfono, los dibujos más pequeños: lo que importa es lo de debajo */
  .heroe-pagina.con-dibujo .heroe-dibujo { width: min(100%, 12rem); }
  .destacado-dibujo { width: min(100%, 11rem); }
}
@media (max-width: 48rem) {
  .bloque-partido { grid-template-columns: minmax(0, 1fr); }
  .tramos-portada { grid-template-columns: minmax(0, 1fr); }
  .hallazgos { columns: 1; }
  .pasos { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
  .paso + .paso::before { top: -1.85rem; left: 50%; margin-left: -6px; transform: rotate(135deg); }
  .herramienta { padding: 50px 22px 24px; }
  .caso, .tarjeta { padding: 24px 22px; }
  .cara-texto { padding: 28px 22px; }
  .contradice { padding: 24px 22px; }
  .pag-portada h1 { max-width: 10ch; }
  .lecturas { grid-template-columns: minmax(0, 1fr); }
  .lectura { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 14px 18px; }
  .lectura dd { margin-top: 0; text-align: right; }
  .lectura .proc { grid-column: 1 / -1; text-align: left; margin-top: 2px; }
  .lectura.np dd { margin-top: 0; }
  .pie-dentro { grid-template-columns: minmax(0, 1fr); }
  .ficha { border-radius: var(--radio); }
}
@media (max-width: 30rem) {
  /* en el teléfono, sitio para el botón del tema: la flecha del Menú sobra al lado
     de sus tres rayas, y la marca encoge un poco */
  .marca { padding: 0 8px 0 6px; font-size: 1rem; }
  .desplegable > summary { padding: 0 12px; gap: 6px; }
  .desplegable > summary .ico-caret { display: none; }
  .lema { font-size: .8125rem; padding-inline: 12px; }
  .boton { gap: 10px; font-size: .9375rem; }
  .boton-secundario:has(.boton-circulo), .boton-principal, .boton-amazon { padding-left: 18px; }
  .boton-circulo { width: 36px; height: 36px; }
  .herramienta .boton, .cara-accion .boton { font-size: .875rem; }
  .acciones .boton-heroe { width: 100%; justify-content: space-between; font-size: 1.0625rem;
    padding-left: 22px; }
  .acciones .boton-heroe .boton-circulo { width: 44px; height: 44px; }
  form { border-radius: var(--radio); }
}
@media (max-width: 23rem) {
  .compra .botones .boton { white-space: normal; }
  .marca { padding: 0 6px; font-size: .9375rem; }
  .desplegable > summary { padding: 0 12px; gap: 4px; }
  .desplegable > summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── imprimir: los datos, sin el menú ─────────────────────────────────────── */
@media print {
  .cab, .saltar, .pie-col, .acciones, .indice-modelos, .fondo { display: none; }
  body { background: #fff; color: #000; }
  .heroe-pagina, .pag-portada .heroe { padding-top: 0; }
  .tabla-caja { overflow: visible; border: 0; }
  .ficha, form { box-shadow: none; break-inside: auto; }
  details.fuentes > ul, details.plegado-conflictos > dl { display: block; }
}