/* ==========================================================================
   SISTEMA DE DISEÑO — hoja compartida por todas las páginas
   Fuente de verdad: canvas de diseño (artboards 01–08).
   Tesis: el contenido es procedimiento, no reportaje. La referencia es el
   manual técnico bien compuesto, no la revista de motor.

   Ninguna página debe declarar colores ni tipografías propias: si algo no
   está aquí, es que no pertenece al sistema.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TIPOGRAFÍAS AUTOALOJADAS
   Servidas desde el propio dominio: el sitio no hace ni una sola petición a
   terceros. Subconjunto «latin» (U+0000–00FF más puntuación general), el
   mismo que servía Google Fonts y de sobra para el español.
   Raleway es una fuente variable: un único archivo cubre el 300 del cuerpo
   y el 600 reservado al énfasis. Ambas familias son OFL 1.1.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bebas-neue-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('../fonts/raleway-latin.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Paleta — artboard 01 */
    --papel: #F6F6F3;          /* fondo de página */
    --superficie: #FFFFFF;     /* tarjetas y bloques elevados */
    --tinta: #1C1B22;          /* texto principal · 15.8:1 */
    --tinta-2: #5A5865;        /* secundario · 6.4:1 */
    --tinta-3: #6E6C7A;        /* metadatos · 4.7:1 (mínimo para texto) */
    --regla: #E6E6E1;          /* filetes de 1px */
    --acento: #7B2D8E;         /* enlaces, aviso, estado activo · 7.4:1 */
    --acento-oscuro: #63216F;  /* hover del acento */
    --acento-claro: #D9B8E4;   /* acento sobre fondo tinta · 9.7:1 */

    /* Tipografía — artboard 02.
       --voz: titulares (Bebas Neue, mayúsculas por diseño).
       --instrumental: cuerpo, listas, interfaz — Raleway Light 300; el 600
       cargado junto a ella se reserva para <strong> y las etiquetas que ya
       pedían más peso. */
    --voz: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
    --instrumental: 'Raleway', 'Segoe UI', system-ui, sans-serif;

    /* Escala — 9 pasos, cerrada a propósito */
    --t-display: 3.625rem;  /* 58 */
    --t-h1: 2.5rem;         /* 40 */
    --t-h2: 1.875rem;       /* 30 */
    --t-h3: 1.375rem;       /* 22 */
    --t-entradilla: 1.25rem;/* 20 */
    --t-cuerpo: 1.1875rem;  /* 19 */
    --t-aux: 0.9375rem;     /* 15 */
    --t-meta: 0.8125rem;    /* 13 */
    --t-antetitulo: 0.6875rem; /* 11 */

    /* Espaciado — base 4 */
    --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
    --e-6: 24px;  --e-10: 40px; --e-16: 64px; --e-24: 96px;

    /* Retícula — artboard 03 */
    --ancho-util: 1200px;
    --medida: 68ch;
    --canal: 24px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background-color: var(--papel);
    color: var(--tinta);
    font-family: var(--instrumental);
    font-weight: 300;
    font-size: var(--t-cuerpo);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
    font-family: var(--voz);
    color: var(--tinta);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0;
    text-wrap: pretty;
}

p { margin: 0 0 var(--e-6); }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--acento-oscuro); }

strong { font-weight: 600; color: var(--tinta); }

/* Antetítulo: la etiqueta instrumental que abre cada bloque */
.antetitulo {
    font-family: var(--instrumental);
    font-size: var(--t-antetitulo);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinta-3);
}

.antetitulo--acento { color: var(--acento); }

/* Cifras tabulares: tablas, datos, tiempos, diluciones */
.num { font-variant-numeric: tabular-nums; }

/* Iconos en línea — sustituyen a la librería de iconos */
.ico {
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   3. RETÍCULA
   -------------------------------------------------------------------------- */
.envoltorio {
    width: 100%;
    max-width: var(--ancho-util);
    margin: 0 auto;
    padding: 0 var(--e-10);
}

/* Columna de lectura: 8 de 12 en escritorio, con el margen vivo a la derecha */
.lectura {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 48px;
    align-items: start;
}

.lectura__cuerpo { min-width: 0; max-width: var(--medida); }
.lectura__margen { min-width: 0; }

/* El cuerpo del artículo lee más pequeño y algo más ancho que el resto de
   usos de .lectura__cuerpo (la tarjeta pilar y la comparativa de la
   portada, que se quedan en --medida y en el tamaño de letra del body). No
   se fusiona en la regla de arriba porque esas dos no llevan la clase
   .cuerpo: hacerlo ahí les cambiaría también a ellas el tamaño de letra y
   el ancho. El selector compuesto gana por especificidad (dos clases,
   0,2,0, contra la 0,1,0 de arriba), así que no depende de en qué orden
   queden una respecto a la otra en el archivo.
   76ch a 17px es la misma proporción que 68ch (--medida) a 19px
   (--t-cuerpo) — 68×19 = 76×17. En la rejilla de 1200px de ancho útil esta
   columna la fija hoy .lectura, no el ch: 68ch a 19px ya mide más que esa
   columna, así que en escritorio no cambia nada; por debajo de 1200px,
   donde .lectura__cuerpo sí se ciñe a su ch, reproduce el mismo ancho de
   siempre. */
.lectura__cuerpo.cuerpo {
    font-size: 1.0625rem;
    max-width: 76ch;
}

@media (max-width: 1199px) {
    .lectura { grid-template-columns: minmax(0, 1fr); }
    .lectura__cuerpo { max-width: var(--medida); margin: 0 auto; }
    .lectura__margen { display: none; }
}

@media (max-width: 767px) {
    .envoltorio { padding: 0 20px; }
}

/* --------------------------------------------------------------------------
   4. CABECERA Y NAVEGACIÓN
   Las 4 ramas siempre visibles: en un sitio que vive del tráfico, esconder
   las categorías tras un menú desplegable cuesta páginas por sesión.
   -------------------------------------------------------------------------- */
.cabecera {
    background-color: var(--papel);
    border-bottom: 1px solid var(--regla);
    position: sticky;
    top: 0;
    z-index: 100;
}

.cabecera__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-10);
    min-height: 68px;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: var(--e-3);
    text-decoration: none;
    flex-shrink: 0;
}

/* El filete de acento del logo es el mismo device que abre las secciones */
.marca::before {
    content: '';
    width: 3px;
    height: 20px;
    background-color: var(--acento);
    flex-shrink: 0;
}

.marca__nombre {
    font-family: var(--voz);
    font-size: 1.25rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--tinta);
}

.nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav a {
    font-family: var(--instrumental);
    font-size: 0.875rem;
    color: var(--tinta-2);
    text-decoration: none;
    padding: var(--e-2) 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.nav a:hover { color: var(--tinta); }

.nav a[aria-current="page"] {
    color: var(--tinta);
    border-bottom-color: var(--acento);
}

.nav__sep {
    width: 1px;
    height: 18px;
    background-color: var(--regla);
    flex-shrink: 0;
}

/* En móvil las ramas pasan a una fila desplazable: siguen a un toque */
@media (max-width: 900px) {
    .cabecera__fila { min-height: 56px; }
    .nav {
        gap: 20px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav__sep { display: none; }
}

@media (max-width: 700px) {
    .cabecera__fila {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--e-3) 0;
    }
    .nav {
        padding-top: var(--e-3);
        margin-top: var(--e-3);
        border-top: 1px solid var(--regla);
    }
}

/* --------------------------------------------------------------------------
   5. TIPOGRAFÍA EDITORIAL
   -------------------------------------------------------------------------- */
.display {
    font-size: var(--t-display);
    line-height: 1.05;
    letter-spacing: -0.022em;
}

.titulo-pagina {
    font-size: var(--t-h1);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.entradilla {
    font-size: var(--t-entradilla);
    line-height: 1.6;
    color: var(--tinta-2);
    max-width: 62ch;
}

/* Cuerpo del artículo: el caso de uso principal del sitio.
   Los titulares llevan un matiz sobre la regla global h1,h2,h3,h4: las
   letras que YA eran mayúsculas en el texto original (siglas, la palabra
   tras un punto en "NO usarlo") se ven un poco más grandes que el resto
   una vez todo pasa a caja alta. Lo resuelve marcarVersales() en main.js,
   envolviendo esas tiradas en <span class="versal">; aquí solo se fija su
   tamaño, 1.12em sobre el del titular que las contiene.

   No se usa font-variant-caps:small-caps: exigiría quitar el
   text-transform:uppercase (small-caps ya hace su propia mayúscula), la
   proporción que sintetiza el navegador para la versalita es fija —en
   torno a un 80%, un salto del 25% sobre el resto— y no la elige quien
   escribe el CSS, y con una fuente sin glifos de versalita real cada
   navegador la sintetiza a su manera. El span da control total sobre la
   proporción y el mismo resultado en cualquier navegador.

   El line-height es una longitud fija en rem y no un número sin unidad: un
   line-height sin unidad se hereda como número, así que el span .versal
   recalcularía SU PROPIA altura de línea —más alta, por su font-size
   mayor— y las líneas con versales abrirían más que las que no. Fijado en
   rem, el span hereda la misma longitud que ya usa el resto del titular. */
.cuerpo > h2 {
    font-size: 2.375rem;
    line-height: 2.85rem;    /* 1.2 × 2.375rem */
    letter-spacing: -0.014em;
    margin: var(--e-24) 0 var(--e-6);
    padding-top: var(--e-6);
    border-top: 3px solid var(--tinta);
    color: var(--acento-oscuro);
}

/* El primer titular no necesita los 96px de separación de sección:
   arriba solo tiene la cabecera del artículo. */
.cuerpo > h2:first-of-type { margin-top: 0; }

.cuerpo > h3 {
    font-size: 1.75rem;
    line-height: 2.3625rem;  /* 1.35 × 1.75rem */
    letter-spacing: -0.008em;
    margin: var(--e-16) 0 var(--e-4);
    color: var(--acento-oscuro);
}

.versal { font-size: 1.12em; }

/* Texto corrido del cuerpo: justificado sin partir palabras. Ninguna
   palabra se corta a media línea —si no cabe entera, baja completa a la
   siguiente—, y sin guionado el justificado en español abre huecos entre
   palabras (ríos blancos): es el efecto secundario esperado, no un fallo. */
.cuerpo > p {
    margin: 0 0 var(--e-6);
    text-align: justify;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

/* Mismo justificado en los <li> de nivel superior del cuerpo. Solo los
   directos: las tarjetas de producto, la tabla y el aviso quedan fuera. */
.cuerpo > ul > li,
.cuerpo > ol > li {
    text-align: justify;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

.cuerpo > ul, .cuerpo > ol {
    margin: 0 0 var(--e-6);
    padding-left: 1.4em;
}

.cuerpo li { margin-bottom: var(--e-3); }

.cuerpo li::marker { color: var(--acento); }

/* Tablas: la mitad del valor de estos artículos está aquí */
.tabla-envoltorio {
    overflow-x: auto;
    margin: 0 0 var(--e-6);
    -webkit-overflow-scrolling: touch;
}

.cuerpo table {
    width: 100%;
    border-collapse: collapse;
    min-width: 460px;
}

.cuerpo th {
    font-family: var(--instrumental);
    font-size: var(--t-antetitulo);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-3);
    text-align: left;
    padding: 0 var(--e-6) var(--e-3) 0;
    border-bottom: 1px solid var(--tinta);
}

.cuerpo td {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tinta-2);
    padding: var(--e-3) var(--e-6) var(--e-3) 0;
    border-bottom: 1px solid var(--regla);
    vertical-align: top;
}

.cuerpo td:first-child {
    font-family: var(--instrumental);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--tinta);
    white-space: nowrap;
}

.cuerpo th:last-child, .cuerpo td:last-child { padding-right: 0; }

/* --------------------------------------------------------------------------
   6. BOTONES — artboard 06
   44px de alto, radio 2px, sin sombra. No existe botón de acento relleno:
   en un sitio sin conversión prometería una acción que no hay.
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 44px;
    padding: 0 var(--e-6);
    border-radius: 2px;
    font-family: var(--instrumental);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--primario {
    background-color: var(--tinta);
    color: var(--superficie);
    border: 1px solid var(--tinta);
}

.btn--primario:hover { background-color: #000000; color: var(--superficie); }

.btn--secundario {
    background-color: transparent;
    color: var(--tinta);
    border: 1px solid var(--tinta);
}

.btn--secundario:hover { background-color: var(--tinta); color: var(--superficie); }

.btn--terciario {
    background-color: transparent;
    color: var(--acento);
    border: none;
    padding: 0 var(--e-1);
    font-weight: 600;
}

.btn--terciario:hover { color: var(--acento-oscuro); }

.btn--terciario .ico { transition: transform 0.2s ease; }
.btn--terciario:hover .ico { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   7. TARJETA DE ARTÍCULO — el motor de páginas por sesión
   -------------------------------------------------------------------------- */
.rejilla-articulos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--canal);
}

.rejilla-articulos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 700px) {
    .rejilla-articulos--2 { grid-template-columns: minmax(0, 1fr); }
}

.tarjeta-articulo {
    display: flex;
    flex-direction: column;
    background-color: var(--superficie);
    border: 1px solid var(--regla);
    padding: 28px 26px 26px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.tarjeta-articulo:hover {
    border-color: var(--acento);
    transform: translateY(-2px);
}

.tarjeta-articulo__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
}

.tarjeta-articulo h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 var(--e-3);
}

.tarjeta-articulo p {
    font-family: var(--instrumental);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--tinta-2);
    margin: 0 0 var(--e-6);
    flex-grow: 1;
}

.tarjeta-articulo__pie {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding-top: var(--e-4);
    border-top: 1px solid var(--regla);
    font-family: var(--instrumental);
    font-size: var(--t-meta);
    font-weight: 600;
    color: var(--tinta);
}

.tarjeta-articulo__pie .ico { color: var(--acento); transition: transform 0.2s ease; }
.tarjeta-articulo:hover .tarjeta-articulo__pie .ico { transform: translateX(3px); }

/* Tarjeta destacada: la guía pilar de cada rama */
.tarjeta-articulo--pilar {
    border-top: 3px solid var(--acento);
}

/* --------------------------------------------------------------------------
   8. TARJETA DE PRODUCTO RECOMENDADO — ficha, no escaparate
   -------------------------------------------------------------------------- */
.rejilla-productos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--canal);
    margin: 0 0 var(--e-6);
}

.tarjeta-producto {
    display: flex;
    gap: 22px;
    background-color: var(--superficie);
    border: 1px solid var(--regla);
    padding: 26px;
}

.tarjeta-producto__icono {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border: 1px solid var(--regla);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acento);
}

.tarjeta-producto__cabeza {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e-3);
}

.tarjeta-producto h3 {
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 0;
}

.tarjeta-producto p {
    font-family: var(--instrumental);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--tinta-2);
    margin: 10px 0 0;
}

.tarjeta-producto__datos {
    display: flex;
    gap: var(--e-2);
    flex-wrap: wrap;
    margin-top: var(--e-4);
}

.dato {
    font-family: var(--instrumental);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tinta);
    border: 1px solid var(--regla);
    padding: var(--e-1) 10px;
}

/* --------------------------------------------------------------------------
   9. CALLOUT «EL ERROR MÁS HABITUAL» — artboard 07
   Filete de 3px arriba, no borde izquierdo redondeado (ese patrón concreto
   es el cliché del callout genérico).
   -------------------------------------------------------------------------- */
.aviso {
    background-color: var(--superficie);
    border: 1px solid var(--regla);
    border-top: 3px solid var(--acento);
    padding: 36px 40px;
    margin: 56px 0;
}

.aviso__cabeza {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin-bottom: 18px;
    color: var(--acento);
}

.aviso__entrada {
    font-size: 1.3125rem;
    line-height: 1.55;
    color: var(--tinta);
    margin: 0 0 18px;
    max-width: 62ch;
}

/* Los avisos con tres párrafos existen: todos los que no son la entrada
   comparten tamaño, no solo el último. */
.aviso > p:not(.aviso__entrada) {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--tinta-2);
    margin: 0 0 var(--e-4);
    max-width: 66ch;
}

.aviso > p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
    .aviso { padding: 26px 22px; margin: 40px 0; }
    .aviso__entrada { font-size: 1.1875rem; }
}

/* --------------------------------------------------------------------------
   10. ACORDEÓN DE FAQ — artboard 07
   Filas a sangre separadas por filete. Sin tarjetas flotantes ni sombras.
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--tinta); margin: 0 0 var(--e-6); }

.faq__item {
    border-bottom: 1px solid var(--regla);
    background-color: var(--superficie);
}

/* El <h3> que envuelve al botón es un encabezado real de cara al
   rastreador, pero no debe aportar NINGÚN estilo propio: quien manda en el
   aspecto sigue siendo .faq__pregunta. Sin este reseteo heredaría la regla
   global h1,h2,h3,h4 (Bebas Neue, caja alta, letter-spacing y
   text-wrap:pretty) — y aunque el botón declara su propia tipografía,
   text-wrap SÍ se hereda del padre y cambiaría cómo se parten las líneas
   de la pregunta aunque la familia y el tamaño no se noten distintos. */
.faq__item > h3 {
    margin: 0;
    font: inherit;
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
    text-wrap: wrap;
}

.faq__pregunta {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--voz);
    font-size: 1.1875rem;
    line-height: 1.4;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--tinta);
    position: relative;
}

/* Al desplegar, un barrido de fondo cubre el botón de izquierda a derecha y
   el texto pasa a blanco. Se anima la escala y no el ancho: el ancho rehace
   el diseño en cada fotograma y el barrido sale a tirones. */
.faq__pregunta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--acento);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq__item[data-abierta="true"] .faq__pregunta::before { transform: scaleX(1); }

/* Texto y chevron por encima del barrido. El chevron es --acento: sobre
   morado se perdería, así que pasa a blanco con el texto. */
.faq__pregunta > * { position: relative; z-index: 1; }

.faq__item[data-abierta="true"] .faq__pregunta,
.faq__item[data-abierta="true"] .faq__pregunta:hover,
.faq__item[data-abierta="true"] .faq__pregunta .ico {
    color: var(--superficie);
}

.faq__pregunta:hover { color: var(--acento); }

.faq__pregunta .ico {
    color: var(--acento);
    transition: transform 0.2s ease;
}

.faq__item[data-abierta="true"] .faq__pregunta .ico { transform: rotate(180deg); }

/* La apertura se anima con la fila de la rejilla, de 0fr a 1fr. Antes se
   medía el scrollHeight desde JavaScript y se soltaba el tope con un
   temporizador: pulsando rápido, ese temporizador caía sobre una pregunta ya
   cerrada y la dejaba abierta para siempre. Así no hay nada que medir, y de
   paso el texto deja de recortarse al girar el móvil. */
.faq__respuesta {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;       /* recorta el relleno del hijo mientras está cerrada */
    transition: grid-template-rows 0.3s ease;
}

.faq__item[data-abierta="true"] .faq__respuesta { grid-template-rows: 1fr; }

/* El hijo que se recorta no puede llevar relleno: con la fila a 0fr su alto
   es cero, pero el relleno seguiría ocupando y dejaría un escalón bajo cada
   pregunta cerrada. El relleno se baja a los párrafos, que sí quedan dentro
   de lo recortado. Un elemento de rejilla tampoco baja de su alto mínimo
   automático sin el min-height. */
.faq__respuesta > div { min-height: 0; overflow: hidden; }

/* Mismo criterio de justificado que .cuerpo > p (sección 5): sin partir
   palabras. */
.faq__respuesta p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--tinta-2);
    margin: 0;
    padding: 0 28px;
    max-width: 64ch;
    text-align: justify;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

.faq__respuesta p:last-child { padding-bottom: 26px; }

@media (max-width: 700px) {
    .faq__pregunta { padding: 18px 20px; font-size: 1.0625rem; }
    .faq__respuesta p { padding: 0 20px; }
    .faq__respuesta p:last-child { padding-bottom: 22px; }
}

/* --------------------------------------------------------------------------
   11. HUECOS DE ANUNCIO — artboard 07
   Etiquetados (política de Google + evita el clic por confusión) y con
   altura reservada: sin ella el texto salta al cargar y penaliza el SEO.
   -------------------------------------------------------------------------- */
.anuncio { margin: 72px 0; }

.anuncio__etiqueta {
    display: block;
    font-family: var(--instrumental);
    font-size: var(--t-antetitulo);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: var(--e-2);
}

.anuncio__hueco {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--regla);
    border-bottom: 1px solid var(--regla);
    min-height: 280px;
    font-family: var(--instrumental);
    font-size: 0.75rem;
    color: var(--tinta-3);
    text-align: center;
    padding: var(--e-4);
}

.anuncio--margen { margin: 0; }

.anuncio--margen .anuncio__hueco {
    min-height: 250px;
    border: 1px solid var(--regla);
    background-color: var(--superficie);
}

/* Variante para "Si solo lees una": columna de anuncio más estrecha que
   la proporción genérica de .lectura, estirada a la altura exacta de la
   tarjeta en vez de a su alto natural. Solo activa donde el margen vivo
   existe (>=1200px); por debajo manda el comportamiento normal de .lectura. */
@media (min-width: 1200px) {
    .lectura--pilar {
        grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
        align-items: stretch;
    }
    .lectura--pilar .lectura__margen { display: flex; }
    .lectura--pilar .anuncio--margen {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .lectura--pilar .anuncio--margen .anuncio__hueco {
        flex: 1;
        min-height: 0;
    }
}

@media (max-width: 700px) {
    .anuncio { margin: 48px 0; }
    .anuncio__hueco { min-height: 250px; }
}

/* Barra inferior descartable */
.anuncio-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.anuncio-barra__cerrar {
    width: 46px;
    height: 26px;
    background-color: var(--papel);
    border: 1px solid var(--regla);
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tinta-2);
}

.anuncio-barra__cerrar:hover { color: var(--tinta); }

.anuncio-barra__hueco {
    width: 100%;
    min-height: 90px;
    background-color: var(--papel);
    border-top: 1px solid var(--regla);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--instrumental);
    font-size: 0.75rem;
    color: var(--tinta-3);
    padding: var(--e-3);
    transition: min-height 0.25s ease, padding 0.25s ease;
}

.anuncio-barra[hidden] { display: none; }

.anuncio-barra.cerrada .anuncio-barra__hueco {
    min-height: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border-top: none;
}

body { padding-bottom: 130px; }

@media (max-width: 700px) { body { padding-bottom: 116px; } }

/* --------------------------------------------------------------------------
   12. FOTOGRAFÍA — artboard 05
   La foto no compite con el texto: se desatura, se enfría y se enmarca.
   -------------------------------------------------------------------------- */
.foto {
    filter: saturate(0.62) contrast(1.07) brightness(0.97);
    width: 100%;
    object-fit: cover;
}

.figura { margin: 0 0 var(--e-6); }

.figura img { border: 1px solid rgba(28, 27, 34, 0.12); }

.figura figcaption {
    font-family: var(--instrumental);
    font-size: var(--t-meta);
    line-height: 1.55;
    color: var(--tinta-3);
    margin-top: var(--e-3);
}

.ratio-21-9 { aspect-ratio: 21 / 9; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3  { aspect-ratio: 4 / 3; }

@media (max-width: 767px) {
    .figura img { border: none; }
}

/* Texto + imagen dentro de un subapartado: la imagen ocupa ~30% del ancho
   y el texto el resto, alternando de lado con el modificador --invertido.
   En móvil se apila y la imagen pasa a ancho completo. */
.texto-imagen {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: var(--e-6);
    align-items: start;
    margin: 0 0 var(--e-6);
}

.texto-imagen--invertido { grid-template-columns: 3fr 7fr; }
.texto-imagen--invertido .texto-imagen__imagen { order: -1; }

.texto-imagen__texto p:last-child { margin-bottom: 0; }

.texto-imagen__imagen img {
    width: 100%;
    max-height: 440px;
    object-fit: cover;
    border: 1px solid rgba(28, 27, 34, 0.12);
}

@media (max-width: 767px) {
    .texto-imagen,
    .texto-imagen--invertido {
        grid-template-columns: 1fr;
        gap: var(--e-4);
    }
    .texto-imagen--invertido .texto-imagen__imagen { order: 0; }
    .texto-imagen__imagen img { border: none; }
}

/* Portada: velo local en el tercio inferior, no lavado global */
.portada {
    position: relative;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background-color: var(--tinta);
}

.portada > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portada__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(18, 17, 22, 0.88) 0%,
        rgba(18, 17, 22, 0.55) 26%,
        rgba(18, 17, 22, 0) 58%);
}

.portada__texto {
    position: absolute;
    left: 44px;
    right: 44px;
    bottom: 40px;
}

.portada__texto h1 {
    font-size: 2.875rem;
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--superficie);
    margin: 0;
    max-width: 20ch;
}

.portada .antetitulo { color: var(--acento-claro); display: block; margin-bottom: var(--e-3); }

@media (max-width: 900px) {
    .portada { aspect-ratio: 16 / 10; }
    .portada__texto { left: 20px; right: 20px; bottom: 24px; }
    .portada__texto h1 { font-size: 1.875rem; }
}

/* Comparativa antes / después */
.comparativa {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(28, 27, 34, 0.12);
    cursor: ew-resize;
    touch-action: pan-y;
    user-select: none;
}

.comparativa img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.comparativa__recorte {
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.comparativa__tirador {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: var(--superficie);
    transform: translateX(-1px);
    pointer-events: none;
}

.comparativa__asa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--superficie);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--tinta);
    pointer-events: none;
}

.comparativa-pies {
    display: flex;
    justify-content: space-between;
    margin-top: var(--e-3);
}

/* --------------------------------------------------------------------------
   13. BLOQUES DE PÁGINA
   -------------------------------------------------------------------------- */
.seccion { padding: var(--e-24) 0; }

.seccion--compacta { padding: var(--e-16) 0; }

.seccion__cabeza {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e-6);
    padding-bottom: var(--e-3);
    border-bottom: 1px solid var(--tinta);
    margin-bottom: var(--e-10);
}

.seccion__cabeza h2 {
    font-size: var(--t-h2);
    letter-spacing: -0.014em;
    margin: 0;
}

/* Cabecera de artículo y de página interior */
.cabecera-pieza {
    padding: var(--e-16) 0 var(--e-10);
    border-bottom: 1px solid var(--regla);
}

.cabecera-pieza h1 {
    font-size: var(--t-h1);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: var(--e-3) 0 0;
    max-width: 24ch;
}

.cabecera-pieza__datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-6);
    margin-top: var(--e-6);
}

.cabecera-pieza__datos span {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-family: var(--instrumental);
    font-size: var(--t-meta);
    color: var(--tinta-3);
}

.cabecera-pieza__datos .ico { color: var(--acento); }

@media (max-width: 700px) {
    .cabecera-pieza { padding: var(--e-10) 0 var(--e-6); }
    .cabecera-pieza h1 { font-size: 1.875rem; }
}

/* Tarjeta de contenido genérica (legales, contacto, nosotros) */
.tarjeta-contenido {
    background-color: var(--superficie);
    border: 1px solid var(--regla);
    padding: 44px 48px;
}

.tarjeta-contenido h2 {
    font-size: 1.5rem;
    letter-spacing: -0.012em;
    margin: var(--e-10) 0 var(--e-4);
}

.tarjeta-contenido h2:first-child { margin-top: 0; }

.tarjeta-contenido p, .tarjeta-contenido li {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--tinta-2);
}

.tarjeta-contenido ul { padding-left: 1.3em; margin: 0 0 var(--e-6); }
.tarjeta-contenido li { margin-bottom: var(--e-2); }

@media (max-width: 700px) {
    .tarjeta-contenido { padding: 26px 22px; }
}

/* Aviso de pendiente (páginas legales con datos por rellenar) */
.aviso-pendiente {
    background-color: var(--superficie);
    border: 1px solid var(--regla);
    border-top: 3px solid var(--acento);
    padding: 20px 24px;
    margin-bottom: var(--e-10);
    font-family: var(--instrumental);
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--tinta-2);
}

/* Índice de contenidos del artículo */
.indice {
    background-color: var(--superficie);
    border: 1px solid var(--regla);
    border-left: 3px solid var(--acento);
    padding: 26px 30px;
    margin: 0 0 var(--e-16);
}

.indice ol {
    list-style: none;
    margin: var(--e-4) 0 0;
    padding: 0;
    counter-reset: indice;
}

.indice li {
    counter-increment: indice;
    margin-bottom: 10px;
    display: flex;
    gap: var(--e-3);
}

.indice li:last-child { margin-bottom: 0; }

.indice li::before {
    content: counter(indice, decimal-leading-zero);
    font-family: var(--instrumental);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-meta);
    font-weight: 600;
    color: var(--acento);
    flex-shrink: 0;
    padding-top: 4px;
}

.indice a {
    font-family: var(--instrumental);
    font-size: 1rem;
    font-weight: 600;
    color: var(--tinta-2);
    text-decoration: none;
}

.indice a:hover { color: var(--acento); }

/* Pasos numerados */
.pasos { list-style: none; margin: 0 0 var(--e-6); padding: 0; }

.pasos li {
    display: flex;
    gap: var(--e-4);
    padding: var(--e-4) 0;
    border-bottom: 1px solid var(--regla);
}

.pasos li:first-child { border-top: 1px solid var(--regla); }

.pasos__n {
    font-family: var(--instrumental);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-meta);
    font-weight: 600;
    color: var(--acento);
    letter-spacing: 0.04em;
    flex-shrink: 0;
    padding-top: 6px;
}

/* Datos de rama */
.datos-rama {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-4);
    margin-bottom: var(--e-10);
}

.datos-rama__item {
    flex: 1 1 150px;
    background-color: var(--superficie);
    border: 1px solid var(--regla);
    border-top: 3px solid var(--acento);
    padding: 22px 20px;
}

.datos-rama__cifra {
    display: block;
    font-family: var(--instrumental);
    font-variant-numeric: tabular-nums;
    font-size: 2.125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--tinta);
}

.datos-rama__texto {
    display: block;
    font-family: var(--instrumental);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-top: 10px;
}

/* --------------------------------------------------------------------------
   13 bis. FORMULARIO
   -------------------------------------------------------------------------- */
.campo { margin-bottom: 22px; }

.campo > label {
    display: block;
    font-family: var(--instrumental);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tinta);
    margin-bottom: var(--e-2);
}

.campo input[type="text"],
.campo input[type="email"],
.campo textarea {
    width: 100%;
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--regla);
    border-radius: 2px;
    background-color: var(--papel);
    font-family: var(--instrumental);
    font-size: 1rem;
    color: var(--tinta);
}

.campo textarea { min-height: 150px; resize: vertical; }

.campo--consentimiento {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
}

.campo--consentimiento input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 3px;
    accent-color: var(--acento);
    cursor: pointer;
}

.campo--consentimiento label {
    font-family: var(--instrumental);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--tinta-2);
    margin: 0;
    cursor: pointer;
}

.form-nota {
    font-family: var(--instrumental);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--tinta-3);
    margin: var(--e-4) 0 0;
}

.datos-contacto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--e-4);
    margin-bottom: var(--e-10);
}

.datos-contacto__item {
    background-color: var(--papel);
    border: 1px solid var(--regla);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
}

.datos-contacto__item .ico { color: var(--acento); }

.datos-contacto__item span {
    font-family: var(--instrumental);
    font-size: 0.875rem;
    color: var(--tinta-2);
}

/* --------------------------------------------------------------------------
   14. PIE DE PÁGINA
   -------------------------------------------------------------------------- */
.pie {
    background-color: var(--tinta);
    color: var(--papel);
    padding: var(--e-24) 0 var(--e-10);
    margin-top: var(--e-24);
}

.pie__fila {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    gap: var(--e-10);
    padding-bottom: var(--e-10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pie__marca {
    font-family: var(--voz);
    font-size: 1.375rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--superficie);
}

.pie__lema {
    font-family: var(--instrumental);
    font-size: 0.875rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.66);
    margin: var(--e-3) 0 0;
    max-width: 40ch;
}

.pie__titulo {
    font-family: var(--instrumental);
    font-size: var(--t-antetitulo);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acento-claro);
    margin-bottom: var(--e-4);
}

.pie__enlaces { display: flex; flex-direction: column; gap: 10px; }

.pie__enlaces a {
    font-family: var(--instrumental);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

.pie__enlaces a:hover { color: var(--superficie); }

.pie__legal {
    font-family: var(--instrumental);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: var(--e-6) 0 0;
}

@media (max-width: 767px) {
    .pie { padding: var(--e-16) 0 var(--e-6); margin-top: var(--e-16); }
    .pie__fila { grid-template-columns: minmax(0, 1fr); gap: var(--e-10); }
}

/* --------------------------------------------------------------------------
   15. SIGUE LEYENDO
   -------------------------------------------------------------------------- */
.sigue-leyendo { padding-top: var(--e-10); border-top: 1px solid var(--tinta); }

/* --------------------------------------------------------------------------
   16. INSTRUMENTOS INTERACTIVOS
   Panel oscuro que convierte los datos del artículo (diluciones, pH,
   duraciones, temperaturas) en algo que se puede manipular. Reusa los
   mismos tokens: tinta como superficie, acento para el estado activo.
   -------------------------------------------------------------------------- */
.instrumento {
    position: relative;
    background-color: var(--tinta);
    color: var(--papel);
    padding: 36px 40px;
    margin: 56px 0;
    overflow: hidden;
}

.instrumento::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--acento);
}

.instrumento p {
    font-family: var(--instrumental);
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
}

.instrumento strong { color: var(--superficie); }

.instr-etiqueta {
    display: block;
    font-family: var(--instrumental);
    font-size: var(--t-antetitulo);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acento-claro);
    margin-bottom: var(--e-2);
}

.instr-titulo {
    font-family: var(--voz);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--superficie);
    margin: 0 0 var(--e-6);
}

.instr-segmentos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--e-6);
}

.instr-seg {
    flex: 1 1 auto;
    min-width: 120px;
    min-height: 44px;
    padding: var(--e-3) var(--e-4);
    background-color: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--instrumental);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.instr-seg:hover { background-color: rgba(255, 255, 255, 0.13); }

.instr-seg[aria-pressed="true"] {
    background-color: var(--acento);
    border-color: var(--acento);
    color: #FFFFFF;
}

.instr-lectura {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 26px;
    text-align: center;
    margin-bottom: var(--e-6);
}

.instr-cifra {
    display: block;
    font-family: var(--instrumental);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 3rem;
    line-height: 1;
    color: var(--superficie);
}

.instr-cifra-sub {
    display: block;
    font-family: var(--instrumental);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acento-claro);
    margin-top: 10px;
}

.instr-doble {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}

.instr-doble-sep {
    font-family: var(--instrumental);
    font-size: 1.75rem;
    color: rgba(255, 255, 255, 0.3);
}

.instr-campo { margin-bottom: 22px; }

.instr-campo label {
    display: block;
    font-family: var(--instrumental);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: var(--e-3);
}

.instr-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    background: transparent;
    outline: none;
    margin: 0;
    cursor: pointer;
}

.instr-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
}

.instr-slider::-moz-range-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
}

.instr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -10px;
    border-radius: 50%;
    background: var(--acento);
    border: 3px solid var(--superficie);
    cursor: pointer;
}

.instr-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--acento);
    border: 3px solid var(--superficie);
    cursor: pointer;
}

.instr-escala {
    display: flex;
    justify-content: space-between;
    font-family: var(--instrumental);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.6);
    margin-top: var(--e-1);
}

.instr-nota {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 18px;
    display: flex;
    gap: var(--e-3);
    align-items: flex-start;
}

.instr-nota .ico { color: var(--acento-claro); margin-top: 3px; }

.instr-barras { margin-bottom: var(--e-2); }

.instr-barra-fila {
    display: grid;
    grid-template-columns: 140px 1fr 92px;
    align-items: center;
    gap: var(--e-4);
    margin-bottom: var(--e-4);
}

.instr-barra-nombre {
    font-family: var(--instrumental);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.instr-barra-pista {
    position: relative;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.instr-barra-relleno {
    height: 100%;
    width: 0;
    background-color: var(--acento);
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.instr-barra-fila.destacada .instr-barra-relleno { background-color: var(--acento-claro); }

.instr-barra-valor {
    font-family: var(--instrumental);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: var(--superficie);
    text-align: right;
    white-space: nowrap;
}

.instr-escenario {
    height: 190px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 700px) {
    .instrumento { padding: 26px 22px; margin: 40px 0; }
    .instr-cifra { font-size: 2.25rem; }
    .instr-titulo { font-size: 1.1875rem; }
    .instr-barra-fila { grid-template-columns: 1fr auto; gap: var(--e-2) var(--e-3); }
    .instr-barra-nombre { grid-column: 1 / -1; }
    .instr-seg { min-width: 100%; }
}

/* --------------------------------------------------------------------------
   17. SIMULACIONES DE LOS INSTRUMENTOS
   Los colores de aquí representan reacciones químicas reales descritas en
   los artículos (el morado del sangrado férrico, el ámbar del calor), no
   son colores de marca: por eso viven dentro de la simulación.
   -------------------------------------------------------------------------- */
.sim-llanta {
    width: 150px; height: 150px; border-radius: 50%;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(circle at 38% 32%, #d9dde1 0%, #9aa3ab 45%, #6d757c 75%, #4a5157 100%);
    box-shadow: inset 0 0 18px rgba(0,0,0,0.45);
}
.sim-llanta::before {
    content: ''; position: absolute; inset: 28px; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(0,0,0,0.35) 0deg 12deg, transparent 12deg 45deg);
}
.sim-llanta::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #7B2D8E 0%, #5B1A6B 70%, #3F0F4C 100%);
    opacity: 0; transition: opacity 0.4s ease;
}
.sim-llanta.sangra::after { opacity: var(--sangrado, 0); }

.sim-luna {
    position: absolute; inset: 22px;
    background: linear-gradient(160deg, rgba(120,170,205,0.32), rgba(40,70,95,0.5));
    border: 2px solid rgba(255,255,255,0.2); overflow: hidden;
}
.sim-burbuja {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(190,130,210,0.95), rgba(110,45,140,0.75));
    opacity: 0; transform: scale(0.4);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sim-burbuja.activa { opacity: 1; transform: scale(1); }

.sim-salpicadero { position: absolute; inset: 0; }
.sim-parabrisas {
    position: absolute; top: 0; left: 0; right: 0; height: 58%;
    background: linear-gradient(180deg, rgba(150,195,225,0.28), rgba(90,130,160,0.16));
    border-bottom: 2px solid rgba(255,255,255,0.2); overflow: hidden;
}
.sim-reflejo {
    position: absolute; bottom: 0; left: 12%; right: 12%; height: 60%;
    background: linear-gradient(0deg, rgba(255,255,255,0.75), rgba(255,255,255,0));
    filter: blur(7px); opacity: 0; transition: opacity 0.45s ease;
}
.sim-salpicadero.brillante .sim-reflejo { opacity: 1; }
.sim-tablero {
    position: absolute; bottom: 0; left: 0; right: 0; height: 42%;
    background: linear-gradient(180deg, #3a4046, #23282d); transition: background 0.45s ease;
}
.sim-salpicadero.brillante .sim-tablero { background: linear-gradient(180deg, #6e7780, #2b3036); }
.sim-polvo {
    position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease;
    background-image: radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1px);
    background-size: 13px 13px;
}
.sim-salpicadero.brillante .sim-polvo { opacity: 0.55; }

.sim-pintura {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #1d2b3a 0%, #2f4a63 45%, #16212c 100%);
}
.sim-grano {
    position: absolute; inset: 0; opacity: 1; transition: opacity 0.55s ease;
    background-image:
        radial-gradient(rgba(200,190,170,0.75) 1.5px, transparent 1.6px),
        radial-gradient(rgba(160,120,90,0.6) 1px, transparent 1.2px);
    background-size: 19px 19px, 11px 11px;
    background-position: 0 0, 6px 8px;
}
.sim-pintura.lisa .sim-grano { opacity: 0; }
.sim-brillo-pintura {
    position: absolute; top: -60%; left: -20%; width: 55%; height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
    transform: rotate(18deg); opacity: 0; transition: opacity 0.55s ease;
}
.sim-pintura.lisa .sim-brillo-pintura { opacity: 1; }

.sim-termometro { position: absolute; inset: 26px 40px; background: rgba(255,255,255,0.08); overflow: hidden; }
.sim-mercurio { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width 0.35s ease, background-color 0.35s ease; }
.sim-termometro-texto {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--instrumental); font-variant-numeric: tabular-nums;
    font-size: 1.5rem; letter-spacing: 0.04em; color: var(--superficie);
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.sim-ph {
    position: absolute; inset: 40px 26px;
    background: linear-gradient(90deg, #C0392B 0%, #E67E22 22%, #F1C40F 38%, #27AE60 46%, #27AE60 56%, #2980B9 72%, #6C3483 88%, #4A235A 100%);
}
.sim-ph-aguja {
    position: absolute; top: -14px; bottom: -14px; width: 4px;
    background-color: var(--superficie); transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(0,0,0,0.7); transition: left 0.2s ease;
}

/* Inventario del kit (guía pilar) */
.kit-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0 0 var(--e-10); }

@media (max-width: 700px) { .kit-rejilla { grid-template-columns: 1fr; } }

.kit-item {
    display: flex; align-items: flex-start; gap: 18px;
    background-color: var(--superficie); border: 1px solid var(--regla);
    padding: 22px; cursor: pointer; user-select: none;
    transition: border-color 0.2s ease;
}

.kit-item:hover { border-color: var(--acento); }

.kit-item.marcado { border-color: var(--acento); background-color: #FBF7FC; }

.kit-item.marcado .kit-texto h3 { text-decoration: line-through; opacity: 0.6; }

.kit-casilla { width: 22px; height: 22px; flex-shrink: 0; margin-top: 4px; accent-color: var(--acento); cursor: pointer; }

.kit-numero {
    width: 40px; height: 40px; flex-shrink: 0;
    border: 1px solid var(--regla); color: var(--acento);
    display: flex; align-items: center; justify-content: center;
}

.kit-texto h3 { font-size: 1.0625rem; line-height: 1.35; margin: 0 0 var(--e-2); }

.kit-texto p {
    font-family: var(--instrumental); font-size: 0.875rem; line-height: 1.6;
    color: var(--tinta-2); margin: 0;
}

.kit-progreso-barra { height: 8px; background-color: rgba(255,255,255,0.14); overflow: hidden; margin-top: var(--e-1); }
.kit-progreso-relleno { height: 100%; width: 0; background-color: var(--acento-claro); transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

/* --------------------------------------------------------------------------
   18. UTILIDADES Y ACCESIBILIDAD
   -------------------------------------------------------------------------- */
.progreso-lectura {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background-color: var(--acento); z-index: 200; transition: width 0.1s linear;
}

.salto-contenido {
    position: absolute; left: -9999px; top: 0; z-index: 300;
    background-color: var(--tinta); color: var(--superficie);
    font-family: var(--instrumental); font-weight: 600; font-size: 0.9375rem;
    padding: 14px 22px; text-decoration: none;
}

.salto-contenido:focus { left: 0; }

.volver-arriba {
    position: fixed; right: 22px; bottom: 150px;
    width: 46px; height: 46px; border-radius: 50%;
    background-color: var(--tinta); color: var(--papel);
    border: none; display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
    z-index: 95;
}

.volver-arriba.visible { opacity: 1; visibility: visible; transform: none; }
.volver-arriba:hover { background-color: var(--acento); }

@media (max-width: 700px) { .volver-arriba { bottom: 130px; right: 16px; } }

main:focus { outline: none; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 3px;
}

button, .btn, .nav a, .tarjeta-articulo, .faq__pregunta, .kit-item, .pie__enlaces a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(123, 45, 142, 0.16);
}


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

/* --------------------------------------------------------------------------
   19. MIGAS DE PAN
   Escritas en el HTML de cada página, no generadas por main.js: son señal
   SEO y no pueden depender de que el rastreador ejecute JavaScript.
   En pantallas estrechas la lista se desplaza en horizontal sin barra
   visible —igual que la navegación de la cabecera— en vez de romper a dos
   líneas ni desbordar el ancho. El ajuste de padding solo se aplica donde
   hay migas, así que la portada conserva su cabecera intacta.
   -------------------------------------------------------------------------- */
.migas { padding: var(--e-10) 0 0; margin: 0; }

.migas + .cabecera-pieza { padding-top: var(--e-10); }

.migas__lista {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--e-2);
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    font-family: var(--instrumental);
    font-size: var(--t-meta);
    color: var(--tinta-3);
}

.migas__lista::-webkit-scrollbar { display: none; }

.migas__lista li {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    white-space: nowrap;
}

.migas__lista li + li::before { content: "›"; color: var(--tinta-3); }

.migas a { color: var(--tinta-3); text-decoration: none; }
.migas a:hover { color: var(--acento); text-decoration: underline; }
.migas [aria-current="page"] { color: var(--tinta-2); }

/* --------------------------------------------------------------------------
   20. MARGEN VIVO DEL ARTÍCULO
   La columna de 4fr que sobraba a partir de 1200px: índice que sigue al
   lector, cifra de avance y el único hueco lateral del sitio.
   Por debajo de 1200px .lectura__margen ya está en display:none (sección 3),
   así que aquí solo hace falta esconder el índice en línea por arriba.

   AL ACTIVAR ADSENSE: la unidad de .anuncio--lateral no debe inicializarse
   mientras la columna esté en display:none. Un <ins> dentro de un contenedor
   oculto se rellena con alto 0 y queda quemado para el resto de la sesión:
   cuenta como impresión no visible y no se recupera al ensanchar la ventana.
   -------------------------------------------------------------------------- */
/* Columna en flex para que el hueco del anuncio se quede con todo el alto
   que no usen el índice y la cifra: en un artículo de tres apartados el
   índice es corto y el anuncio llega a 600px; en uno de seis, el mismo
   reparto lo baja solo hasta su mínimo. Sin media query de altura. */
.margen-lectura {
    position: sticky;
    top: 88px;              /* 68px de cabecera pegajosa + aire */
    display: flex;
    flex-direction: column;
    /* Altura real, no solo un tope: con max-height la columna se dimensiona
       por su contenido, no sobra nada que repartir y el hueco del anuncio se
       queda clavado en su mínimo. Con height hay espacio libre que el
       anuncio absorbe hasta su tope de 600. */
    height: calc(100vh - 108px);
    max-height: calc(100vh - 108px);
}

.indice--margen,
.progreso-margen { flex: 0 0 auto; }

/* Con align-items:start el aside mide lo que su contenido, y un sticky sin
   recorrido dentro de su contenedor no se despega nunca. Estirarlo le da la
   altura de la columna del artículo, que es justo donde debe detenerse.
   Se limita a los asides que llevan margen vivo para no tocar los de la
   portada, que se colocan arriba a propósito. */
.lectura__margen:has(.margen-lectura) { align-self: stretch; }

/* Por debajo de 1200px no hay margen que colocar, así que el artículo deja
   de ser elemento de rejilla y vuelve a ser un bloque normal. Como elemento
   de rejilla no encoge por debajo del ancho mínimo de su contenido, y en
   móvil eso ensancha la página y saca el texto fuera de la pantalla. */
@media (max-width: 1199px) {
    .lectura:has(.margen-lectura) { display: block; }
}

/* Un solo índice visible a la vez: el de línea desaparece justo cuando
   aparece la columna del margen. */
@media (min-width: 1200px) {
    .indice--linea { display: none; }
}

.indice--margen {
    margin: 0;
    padding: 20px 22px;
}

.indice--margen ol { margin: var(--e-3) 0 0; }

/* El tamaño y el interlineado van en el <li>, no en el <a>: la altura de
   cada línea la fija el strut del li, que heredaba el line-height 1.7 del
   body y abría 32px entre las dos líneas de un título largo. En el enlace,
   que es en línea, esa declaración no mandaba nada. */
.indice--margen li {
    display: block;         /* anula el flex de la numeración en línea */
    margin: 0;
    padding: 5px 0 5px var(--e-4);
    border-left: 2px solid var(--regla);
    font-size: 0.875rem;
    line-height: 1.35;
}

/* Sin el 01/02 del índice en línea: en una columna estrecha ese número roba
   el ancho que necesita el título del apartado. */
.indice--margen li::before { content: none; }

.indice--margen li.activo { border-left-color: var(--acento); }

/* El font-size y el line-height van tanto en el <li> (para que el strut no
   abra 32px entre las dos líneas de un título largo) como aquí: sin esto,
   .indice a { font-size: 1rem } —misma especificidad, declarado antes en el
   archivo— vuelve a ganar en el propio <a>, que es donde el navegador mide
   la caja de texto. */
.indice--margen a {
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--tinta-2);
}

.indice--margen li.activo a { color: var(--tinta); }

/* Continúa la tarjeta del índice: comparten el filete de 1px. Cuando el
   artículo tiene menos de tres h2 y no hay índice, se sostiene sola. */
.progreso-margen {
    margin-top: -1px;
    padding: var(--e-4) 22px;
    background-color: var(--superficie);
    border: 1px solid var(--regla);
    border-left: 3px solid var(--acento);
    font-family: var(--instrumental);
    font-size: var(--t-meta);
    color: var(--tinta-3);
}

.progreso-margen__cifra {
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    font-weight: 600;
    color: var(--tinta);
}

/* El anuncio se queda con el alto sobrante de la columna. Llega a 300×600
   cuando cabe y baja solo hasta 250 cuando no: un bloque pegajoso más alto
   que la pantalla se corta por abajo, y un anuncio que no se ve entero no
   cuenta como impresión visible. */
.anuncio--lateral {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: var(--e-6) 0 0;
}

.anuncio--lateral .anuncio__hueco {
    flex: 1 1 auto;
    min-height: 250px;
    max-height: 600px;
}

/* --------------------------------------------------------------------------
   21. CONTENIDO DE CATEGORÍA
   Texto de orientación en las páginas de rama, debajo de la rejilla de
   tarjetas. Misma tipografía que .cuerpo (Bebas Neue morado en los
   titulares, Raleway justificado en el cuerpo) pero sin usar esa clase:
   .cuerpo dispara construirIndice(), construirFAQ() y marcarVersales()
   desde main.js, y aquí no hace falta ni un índice ni un acordeón para dos
   o tres apartados de texto.
   -------------------------------------------------------------------------- */
.contenido-rama {
    max-width: 76ch;
    margin-top: var(--e-10);
}

.contenido-rama > h2 {
    font-size: 2.375rem;
    line-height: 2.85rem;
    letter-spacing: -0.014em;
    color: var(--acento-oscuro);
    margin: var(--e-16) 0 var(--e-6);
}

.contenido-rama > h2:first-child { margin-top: 0; }

.contenido-rama > p {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0 0 var(--e-6);
    text-align: justify;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

/* --------------------------------------------------------------------------
   22. FIRMA DEL ARTÍCULO
   Una línea discreta bajo la columna de lectura. Vive fuera de .lectura
   —después de su cierre, antes de "Sigue leyendo"— para no entrar como
   tercer hijo en su rejilla de dos columnas y para no interferir con
   construirIndice() ni construirFAQ(), que solo miran dentro de .cuerpo.
   -------------------------------------------------------------------------- */
.firma-autor {
    max-width: 76ch;
    margin: var(--e-10) 0 0;
    padding-top: var(--e-4);
    border-top: 1px solid var(--regla);
    font-family: var(--instrumental);
    font-size: var(--t-meta);
    color: var(--tinta-3);
}

.firma-autor a { color: var(--tinta-2); }
.firma-autor a:hover { color: var(--acento); }

/* --------------------------------------------------------------------------
   23. INTERRUPTOR DE ANUNCIOS — apagado hasta que AdSense apruebe la cuenta
   Con la solicitud pendiente, un hueco vacío rotulado "336 × 280" se lee
   como página en construcción, motivo de rechazo de Google. Este bloque
   apaga los huecos y la barra fija sin tocar su HTML ni el alto reservado
   (sigue ahí para el día que se activen), y recoloca lo que dejaban: el
   padding del body, el separador entre secciones y el alto del margen vivo.
   PARA REACTIVAR LOS ANUNCIOS: borra este bloque completo (sección 23).
   -------------------------------------------------------------------------- */

/* .anuncio--margen y .anuncio--lateral llevan también la clase base
   .anuncio, así que una sola regla apaga las tres variantes. */
.anuncio,
.anuncio-barra {
    display: none;
}

/* La portada fuerza display:flex en .anuncio--margen a partir de 1200px
   (sección 11, ".lectura--pilar .anuncio--margen") con dos clases de
   especificidad: más que la regla de arriba, así que sin este duplicado
   el anuncio de "Si solo lees una" se quedaría visible en escritorio.
   Y sin él, la columna de 3fr que le reservaba sitio (align-items:stretch)
   se queda vacía junto a la tarjeta pilar: se apaga el margen entero y la
   rejilla vuelve a una sola columna, para que la tarjeta ocupe el ancho
   que antes compartía con el hueco. */
@media (min-width: 1200px) {
    .lectura--pilar {
        grid-template-columns: minmax(0, 1fr);
    }
    .lectura--pilar .lectura__margen {
        display: none;
    }
}

/* Sin la barra fija, el padding que le reservaba sitio al fondo del body
   se queda como hueco muerto en las 21 páginas que la llevan. */
body { padding-bottom: 0; }

/* Los .anuncio del cuerpo hacían también de separador de 72px entre
   secciones. Sin ellos, el elemento que quedaba justo antes se apoya solo
   en su propio margen —que en varios sitios es 0 o casi 0; el caso más
   visible es la entradilla de categoría, que quedaría pegada a
   .datos-rama—. Se le devuelve un cierre de sección razonable solo donde
   había un anuncio justo a continuación: no toca el margen de .anuncio
   (sigue siendo 72px por si se quita este bloque) ni el HTML. */
.cuerpo > :has(+ .anuncio),
.seccion--compacta > :has(+ .anuncio) {
    margin-bottom: var(--e-16);
}

/* El margen vivo reservaba una altura de viewport completo para repartirla
   entre el índice, la cifra de avance y el anuncio (ver nota de la
   sección 20). Sin anuncio no queda nada que absorba ese sobrante, y el
   bloque pegajoso se quedaría con un hueco vacío bajo la cifra. Con
   height:auto mide solo lo que ocupan el índice y la cifra. */
.margen-lectura {
    height: auto;
    max-height: none;
}