/* ============================================================
   DYRECO · p-articulo.css
   PLANTILLA DE ARTÍCULO del blog. La comparten los SIETE artículos
   del plan editorial (_material/blog-plan.json). Aquí no entra nada
   que sea de un texto concreto: si un artículo necesita una pieza
   que no está en esta hoja, o la pieza sube aquí para todos o el
   artículo se escribe con las que hay.

   NOMBRES (comprobados contra §29 de estilos.css con el grep del
   propio registro, 8-sep-2026): las familias `art` y `sumario`
   estaban LIBRES en las doce hojas. `blog` queda para el índice,
   que es del otro agente; `indice` NO se usa aquí porque
   p-maquinaria.css ya tiene `.indice-fam` y dos familias que
   empiezan igual se leen como la misma.
     art      → el artículo entero (cabecera, cuerpo, cierre, relacionados)
     sumario  → el índice navegable del artículo
   Si alguna sube al sistema, cambia de nombre y se apunta en §29.

   ESTÉTICA: contrato de la casa. Fondo carbón, el amarillo solo como
   LUZ (cotas, numeración, filetes, viñetas en diagonal, foco),
   display condensada en mayúsculas contra Public Sans muy aireada,
   filetes de 1 px y ritmo vertical generoso. Cero superficies
   rellenas de amarillo.

   LO QUE SE REUTILIZA Y NO SE REESCRIBE: `.cont`, `.kicker`, `.h2`,
   `.cabecera-sec`, `.num`, `.btn`, `.fila-botones`, `.enlace-flecha`,
   `.media`, `.faq` (§18), `.sec-cota` (§34), `[data-reveal]` y
   `.enlace-pendiente` (§03).

   ------------------------------------------------------------
   CONTRATO PARA LOS SEIS ARTÍCULOS QUE FALTAN
   (revisado el 8-sep-2026 con los cinco cambios del cliente)
   ------------------------------------------------------------
   El artículo nº 1 (blog-discos-para-amoladora.html) es la referencia
   VIVA: se copia ese fichero, se cambia el contenido y no se toca nada
   más. Esta hoja NO se edita para escribir un artículo. Si de verdad
   falta una pieza, sube aquí con su comentario y se avisa, porque a
   partir de ese momento la comparten los siete.

   1 · ORDEN DE BLOQUES — obligatorio y sin saltarse ninguno:
       art__cab
         └ div.cont > div.art__cab-int
             kicker (con el enlace a la división) · h1 · entrada
           SIN MIGA DE PAN Y SIN FICHA DE COTAS (8-sep-2026, segunda
           ronda del cliente). Una sola columna, en orden de lectura y
           sin retícula: lo que va debajo en el DOM va debajo en la
           pantalla. La entradilla va DEBAJO del titular.
       → art__rej [ sumario  +  art__cuerpo ]
         art__cuerpo = art__resumen + N × art__sec + LA FAQ
         La FAQ es la ÚLTIMA `art__sec` del cuerpo, no una sección
         aparte: `<section class="art__sec art__sec--faq" id="faq">`
         con su H2 numerado y su `<div class="faq__lista">` de seis
         `<details class="faq__item">`. Entra en el sumario como una
         más, con su número (08 si hay siete secciones).
       → section.art__cierre.sec-cota        (el ÚNICO geo del artículo)
       → section.art__rel.sec-cota           (TRES artículos + art__volver)
       → JSON-LD: TechArticle + FAQPage + BreadcrumbList
       NO HAY BLOQUE DE FUENTES. Las citas viven en el cuerpo.

   2 · LO QUE SE PARAMETRIZA (y solo esto):
       · title, meta description, canonical, h1, entradilla
       · kicker  = «<División> · <familia del catálogo>», escrito así:
           <p class="kicker art__kicker"><span><a href="<división>.html">
           <División></a> · <familia></span></p>
         🔴 LA PALABRA DE LA DIVISIÓN ES UN ENLACE A SU COMERCIAL. Sin
            miga y sin ficha, es el único escalón hacia arriba que le
            queda al artículo y es lo que mantiene honrado el
            BreadcrumbList del JSON-LD (Inicio = el logotipo · División
            = este enlace · página actual = el H1). El <span> envuelve
            TODO el texto: `.kicker` es inline-flex y sin él el enlace y
            la familia serían dos ítems separados por el `gap` en vez
            de un texto seguido.
         🔴 NO HAY FICHA: ni fecha, ni tiempo de lectura, ni norma en la
            cabecera. Fuera del marcado. Si un artículo la trae, se
            borra; no se «adapta».
       · los `art__sec` (uno por H2 del plan, en su orden, con id s1…sN)
       · la FAQ como sección final del cuerpo y su copia LITERAL en el
         FAQPage
       · el sumario: una entrada por sección + «Preguntas frecuentes»
       · el anchor comercial del cierre y su destino
       · las tres tarjetas de `art__rel` — TRES ARTÍCULOS DE VERDAD,
         ninguna al índice del blog
       · las citas del cuerpo y su lista `citation` en el JSON-LD

   3 · LO QUE NO SE TOCA: los nombres de clase, el orden de bloques, la
       medida de lectura, la cabecera y el pie del sitio, el bloque de
       cookies, `estilos.css` y `tokens.css`.

   4 · REGLAS DURAS
       🔴 GEO: ni en title, ni en H1, ni en H2, ni en el slug, ni en la
          meta. Vive SOLO dentro del anchor de `.art__cierre-p`, y el
          plan da un anchor distinto para cada artículo: no se repite,
          no se abrevia y no se parte en dos enlaces.
       🔴 RESUMEN CITABLE: 60-80 palabras, primera frase = la respuesta,
          SIN coletilla («En resumen», «TL;DR», «Lo importante»).
       🔴 FAQ: las respuestas del `<details>` y las del JSON-LD son el
          MISMO texto, carácter a carácter. 50-90 palabras cada una.
       🔴 UN SOLO <h1>. Los H2 llevan `<span class="num art__n">NN</span>`
          y su `id` casa con el `href` del sumario. También el de la FAQ.
       🔴 LAS CITAS VAN EN EL CUERPO, DENTRO DE LA FRASE QUE AFIRMA EL
          DATO. Cada fuente verificada se enlaza sobre el sintagma que
          sostiene —«el <a>folleto de seguridad de FEPA</a>», «la norma
          <a>EN 12413</a>», «a un máximo de <a>80 metros por segundo</a>»—
          y NUNCA como nota al pie disfrazada («según X», «como recuerda
          Y en sus FAQ»). Formato: `target="_blank" rel="noopener"`, SIN
          `nofollow`: son fuentes que se avalan, y el enlace saliente a
          fuente oficial es señal de E-E-A-T y de citabilidad.
          Las mismas URL se declaran en `citation` del TechArticle.
          Regla de reparto: una cita por afirmación, repartidas por
          secciones distintas, y como mucho dos en la misma frase.
       🔴 DATOS: los técnicos se verifican antes de citarlos; los de
          negocio de Dyreco salen SOLO de _material/dyreco-hechos.md.
          Cero plazos, precios, marcas o cifras inventados.
       🔴 TUTEO siempre y ninguna frase de restricción («no hacemos X»).

   5 · ANTES DE DAR UN ARTÍCULO POR BUENO
       · `_tools/qa_maqueta.py <fichero>`  → cero desbordes
       · `_tools/pulido.py <fichero> 1440` → cero viudas y cero filetes dobles
       · `_tools/medida_lectura.py <fichero> 1920 1440 1280 1024 834 620 390`
         → ≤ 66 CARACTERES REALES. La unidad `ch` miente en esta
         tipografía y no vale como prueba. Si `faq__p` asoma en la lista
         de peores líneas, la pregunta se ha pasado: NO se toca esta
         hoja, se acorta la pregunta.
       · la cabecera por debajo de 450 px a 1440 (getBoundingClientRect
         sobre `.art__cab`). El titular cabe en DOS líneas a ≥1024 px
         con los siete títulos del plan (59-74 caracteres); si uno cae
         a tres, se sigue cumpliendo (3 líneas → 443 px medidos), pero
         se mira: normalmente es una palabra suelta que se puede mover.
       · `.art__rej`, `.art__cab .cont`, `.art__cierre-int` y `.art__rel
         .cont` empiezan y acaban donde `.cont` en ferreteria.html:
         40 → 1400 a 1440 y 140 → 1780 a 1920. Se comprueba con
         getBoundingClientRect, no a ojo.
       · el JSON-LD parsea, sus respuestas coinciden con el cuerpo y
         cada URL de `citation` tiene su <a> en el cuerpo
       · capturas a 1440, 1024 y 390 MIRADAS, no solo generadas
   ============================================================ */


/* ------------------------------------------------------------
   0 · Variables de la plantilla
   ------------------------------------------------------------
   --art-med es la MEDIDA DE LECTURA y va en PÍXELES a propósito.
   🔴 La unidad `ch` MIENTE en Public Sans: es el ancho del «0», más
   ancho que la letra media, así que 52ch renderiza 68 caracteres.
   La cifra de aquí abajo NO está elegida: está medida en el
   navegador reconstruyendo las líneas con `Range.getClientRects()`
   sobre el peor párrafo del artículo, a 1920/1440/1280/1024/834/620
   y 390 px. El tope es 66 caracteres reales por línea.
   Es la misma lección que p-legal.css dejó escrita. El valor no es el
   mismo (520 y no 470) porque el texto tampoco lo es: este artículo va
   lleno de cifras y de palabras cortas —«1,6 mm», «rpm», «disco»— y en
   la misma caja mete menos caracteres que la prosa jurídica. Medido: a
   470 px el peor caso se quedaba en 56, ocho líneas de menos por
   página; a 520 sube a 62 y sigue por debajo del tope.
   PEOR CASO MEDIDO, 8-sep-2026: 62 caracteres (1440, 1280, 1024, 834 y
   620 px) · 60 a 1920 · 52 a 390.

   --art-gut es el sangrado del cuerpo que deja colgar la
   numeración amarilla del H2 fuera de la columna de texto, como la
   cota de un plano. Cuando no hay sitio (móvil) vale 0 y el número
   pasa a ir encima del titular.
   ------------------------------------------------------------ */
.art {
  --art-fs:   clamp(1.1875rem, 1.35vw, 1.25rem);  /* 19 → 20 px */
  /* ⚠️ DECISIÓN DE JUAN, 9-sep-2026: títulos y prosa van AL MISMO ANCHO que
     tablas e imágenes (--art-ancho, 900 px) «para que se vea todo más
     uniforme». Deroga a sabiendas la medida de 66 caracteres medida abajo:
     a 900 px la prosa a 19-20 px se va a ~105 caracteres por línea. Las
     tres medidas apuntan ahora a la misma variable; los valores medidos
     (520 / 440 / 400) quedan en el comentario por si se vuelve atrás. */
  --art-med:  var(--art-ancho);
  /* La medida NO es una sola cifra: depende del cuerpo. 66 caracteres a
     19 px no ocupan lo mismo que 66 a 15 px, y la web tiene tres cuerpos
     en juego. Los tres valores están MEDIDOS con Range, no deducidos:
       --art-med    520 px  · prosa a --art-fs      (19-20 px)
       --art-med-b  440 px  · texto a --fs-body     (16-18 px) → FAQ
       --art-med-s  400 px  · texto a --fs-sm       (14-15 px) → pies,
                              notas al pie de tabla, fuentes, fichas
     Un texto pequeño necesita una caja MÁS ESTRECHA para el mismo número
     de caracteres, no más ancha: es el error que deja los pies de foto a
     85 caracteres mientras la prosa de encima va a 60. */
  --art-med-b: var(--art-ancho);
  --art-med-s: var(--art-ancho);
  --art-gut:  clamp(0px, 4.4vw, 66px);
  --art-linea: 1px solid var(--linea);
  /* Ancho de la columna del sumario. 260 px hasta ~1575 de ventana y
     de ahí crece hasta 320 a 1920. NO es una segunda columna de
     lectura: crece lo justo para que los rótulos de dos líneas
     («Las RPM del disco y las de la máquina») pasen a una cuando la
     caja de la página se ensancha y el aire entre la prosa y el
     sumario se dispara. Medido: a 1920 el sumario pasa de 487 a 397
     px de alto con la misma lista (siete de los ocho rótulos en una
     línea) y a 1440 sigue midiendo 260 × 457. */
  --art-sum:  clamp(260px, 16.5vw, 320px);
  /* Tope de las PRUEBAS anchas —figura y tablas—. Desde que la caja del
     cuerpo mide lo que `.cont` (8-sep-2026), la columna izquierda da
     965 px a 1440 y 1.218 a 1920: una foto a 3:2 a ese ancho medía 812
     px de alto y la tabla de decisión repartía cinco columnas en 1.218.
     900 es lo que ya medían a 1440 con la caja vieja (882), redondeado.
     La prosa NO usa esta variable: sigue en --art-med. */
  --art-ancho: 900px;
}


/* ============================================================
   1 · CABECERA DEL ARTÍCULO
   ------------------------------------------------------------
   La cabecera del sitio es `cab--over` (flota sobre el contenido),
   así que el relleno superior paga su alto además del aire.

   🔴 REHECHA POR SEGUNDA VEZ EL 8-sep-2026 (tres cambios del cliente):
     · FUERA LA FICHA DE CUATRO COTAS (División · Publicado · Lectura ·
       Norma). No queda ni el marcado ni una regla suya en esta hoja.
     · LA ENTRADILLA BAJA DEBAJO DEL TITULAR. Ya no hay dos columnas:
       kicker → H1 → entradilla, una sola columna, en el orden del DOM
       y sin `grid-row`. Lo que se lee segundo está segundo.
     · LA CAJA MIDE LO QUE `.cont`: el H1 arranca en x=40 a 1440 y en
       x=140 a 1920, igual que el H1 del hero de ferreteria.html, y no
       en los 80/320 de la retícula vieja de 1.280 px.
   Y SIGUE SIENDO DYRECO sin la ficha: el kicker con su diagonal, la
   condensada en mayúsculas contra la Public Sans aireada, la banda
   `--sup` con su filete de 1 px y, en el hueco de la derecha —que la
   entradilla dejó vacío al bajar—, los cinco filetes en diagonal de la
   marca, los mismos de la cabecera del índice del blog (p-blog.css,
   `.blogcab__titular::after`): luz, no relleno, y cero píxeles de alto.

   EL ENLACE A LA DIVISIÓN VIVE AHORA EN EL KICKER. La cota «División»
   era el único escalón hacia arriba y el que mantenía honrado el
   BreadcrumbList del JSON-LD; al irse la ficha, la palabra de la
   división del kicker pasa a ser ese enlace. El schema se QUEDA: sus
   tres escalones siguen pinchables (logotipo · kicker · H1) y es lo
   que hace que Google pinte «dyreco.com › ferreteria» bajo el
   resultado en vez de la URL pelada.

   ALTO, medido con getBoundingClientRect sobre `.art__cab` (8-sep-2026,
   segunda ronda): 1920 → 439 · 1440 → 421 · 1280 → 397 · 1024 → 370 ·
   390 → 445. Antes (dos columnas + ficha): 460 · 415 · 385 · 423 · 609.
   La cuenta a 1440: 76 de cabecera fija + 27 de aire + 12 de kicker +
   19 + 101 de H1 (DOS líneas de 49,6 px) + 21 + 124 de entradilla
   (cuatro líneas) + 30 abajo = 421.
   ⚠️ EL TOPE DE 450 SE CUMPLE CON EL TITULAR A DOS LÍNEAS. A tres
   (forzado con la caja a 700 px) sube a 472. Por eso se comprobaron
   LOS SIETE TÍTULOS DEL PLAN (59-74 caracteres) inyectados en este H1
   a 1440 y 1280: los siete caben en dos líneas (101 y 90 px). Lo que
   lo consigue es la CAJA del H1 —de 30ch (784 px) a 860 px, lo que
   necesita el título de 74 caracteres, el de andamios, para partir en
   dos a 49,6 px— y el cuerpo, que baja de 3,45 a 3,1rem (55 → 49,6):
   con la entradilla debajo el titular ya no compite con nada a su
   derecha y no necesita gritar tanto. Si un artículo cambia el título
   y se va a tres líneas, NO se toca esta hoja: se acorta el título o
   se avisa.
   ============================================================ */

.art__cab {
  position: relative;
  background: var(--sup);
  border-bottom: var(--art-linea);
  /* Los filetes diagonales del hueco se salen de la caja por arriba a
     la derecha (van sesgados −30°): la banda los recorta. */
  overflow: clip;
  padding-block: calc(var(--alto-cab) + clamp(22px, 1.85vw, 30px)) clamp(24px, 2vw, 30px);
}

/* --- 1.1 · La caja ------------------------------------------
   Sin retícula y sin tope propio: `.cont` la pone en el borde estándar
   del sitio. `position: relative` es para el adorno de la derecha.
   ------------------------------------------------------------ */
.art__cab-int { position: relative; }

/* --- 1.2 · (kicker del hero retirado el 9-sep-2026 a petición de Juan) --- */

/* --- 1.3 · Titular y entradilla, en columna -------------- */

.art__h1 {
  font-family: var(--display);
  font-weight: 800;
  /* 3,1rem y no 3,45: con la entradilla debajo, el titular es lo único
     que hay en su franja y a 55 px con tres líneas la cabecera se iba a
     los 470 px. A 49,6 px los siete títulos del plan (59-74 caracteres)
     caben en DOS líneas dentro de los 860 px de caja. */
  font-size: clamp(2rem, 3.45vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--texto);
  text-wrap: balance;
  /* EN PÍXELES, no en `ch`: lo que se fija aquí es un NÚMERO DE LÍNEAS.
     860 px es lo que necesita el título más largo del plan (74 car.,
     el de andamios) para partir en dos a 49,6 px: 74 × 22,3 px de
     tinta media ≈ 1.650 → 825 por línea. A 1024 la caja es de 944 y el
     cuerpo de 35 px, así que también caben en dos. */
  max-width: min(100%, var(--art-ancho));
}

.art__entrada {
  margin-top: clamp(16px, 1.5vw, 22px);
  /* La misma medida que la prosa (520 px) y el mismo SUELO de cuerpo
     (19 px): con 18 px de suelo, por debajo de 1.400 px la entradilla
     se hacía más pequeña que el texto y en la misma caja metía 70
     caracteres. Cuerpo más pequeño = caja más estrecha, o la medida se
     rompe justo donde nadie mira. Peor línea medida con Range: 60
     caracteres (1440, 1280 y 1024), 53 (1920), 40 (390). */
  max-width: var(--art-med);
  font-size: clamp(1.1875rem, 1.35vw, 1.3125rem);
  line-height: 1.6;
  color: var(--apagado);
}

/* --- 1.4 · Los filetes en diagonal de la marca --------------
   El hueco que deja la entradilla al bajar es la mitad derecha de la
   banda. Ahí van los cinco filetes de 1 px a −30° —el ángulo del
   wordmark y de la diagonal del kicker— con la misma escalera de
   opacidades que la cabecera del índice del blog, para que las dos
   cabeceras del blog se lean como de la misma familia.
   Anclados al borde derecho estándar (`right: 0` de `.art__cab-int`,
   que es el de `.cont`) y con el ORIGEN DEL SESGO EN LA ESQUINA
   SUPERIOR DERECHA: así la esquina de arriba se queda clavada en el
   borde y las líneas caen hacia la izquierda, dentro de la caja, sin
   salirse al margen. Medido a 1440: la caja es de 216 × 289 px y con
   el sesgo pinta entre x=1.017 y 1.400; el titular acaba, como mucho,
   en 900. A 1920: 220 × 302, entre 1.386 y 1.780.
   Solo mientras hay hueco de verdad: por debajo de 1.081 px se retiran
   —a 1024 la caja de 860 del H1 ya llega a x=900 sobre 984—. Entre
   1.081 y 1.200 el cuerpo del H1 es de 37-41 px y ningún título del
   plan pasa de x≈700, así que las dos líneas más flojas (.08 y .05),
   que son las únicas que bajan de x=900, no cruzan letra alguna.
   Es luz, no relleno: el más fuerte va al 50 % y los dos de la
   izquierda al 8 y al 5 %. Cero alto, cero texto debajo.
   ------------------------------------------------------------ */
@media (min-width: 1081px) {
  .art__cab-int::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: clamp(160px, 15vw, 220px);
    pointer-events: none;
    transform: skewX(-30deg);
    transform-origin: 100% 0;
    background:
      linear-gradient(180deg, transparent, rgb(var(--am-rgb) / .50) 32%, rgb(var(--am-rgb) / .50) 64%, transparent) 100% 0 / 1px 100% no-repeat,
      linear-gradient(180deg, transparent, rgb(var(--am-rgb) / .26) 32%, rgb(var(--am-rgb) / .26) 64%, transparent)  84% 0 / 1px 100% no-repeat,
      linear-gradient(180deg, transparent, rgb(var(--am-rgb) / .14) 32%, rgb(var(--am-rgb) / .14) 64%, transparent)  62% 0 / 1px 100% no-repeat,
      linear-gradient(180deg, transparent, rgb(var(--am-rgb) / .08) 32%, rgb(var(--am-rgb) / .08) 64%, transparent)  32% 0 / 1px 100% no-repeat,
      linear-gradient(180deg, transparent, rgb(var(--am-rgb) / .05) 32%, rgb(var(--am-rgb) / .05) 64%, transparent)   0% 0 / 1px 100% no-repeat;
  }
}


/* ============================================================
   2 · RETÍCULA DEL CUERPO — lectura a la izquierda, sumario a la
   derecha
   ------------------------------------------------------------
   El sumario va PRIMERO en el DOM (es la navegación del documento y
   así la encuentra quien tabula o lee con lector de pantalla) y
   SEGUNDO en la retícula. Colocación explícita, nunca `order`:
   `order` cambia el orden visual sin cambiar el de foco y deja la
   tabulación saltando por la página.

   🔴 SIN TOPE PROPIO (8-sep-2026, cambio del cliente). La retícula
   iba a 1.280 px y dejaba el cuerpo 40 px más estrecho por lado que
   el resto de la web a 1440 (80 → 1.360 contra 40 → 1.400) y 180 a
   1920 (320 → 1.600 contra 140 → 1.780). Ahora la caja es la de
   `.cont`: ARRANCA en el borde estándar izquierdo y ACABA en el
   derecho, como cualquier sección de ferreteria.html.
   Lo que se ensancha es la CAJA, no la lectura: la prosa sigue en
   --art-med (520 px, 60-62 caracteres medidos) y las pruebas anchas
   (figura, tablas) en --art-ancho (900). El aire que aparece entre la
   columna y el sumario se reparte así: el sumario se queda pegado al
   borde derecho estándar (es el borde que el cliente pide) y crece
   de 260 a 320 px con la ventana para que sus rótulos dejen de partir;
   el resto es aire, que es lo mismo que hace el sitio entero en una
   pantalla ancha: las cabeceras partidas (`cabecera-sec--split`)
   separan titular y entrada 120 px y nadie lo lee como un hueco.
   La otra opción —acercar el sumario a la prosa y dejar el aire a la
   derecha— rompía lo que se pide: que el conjunto acabe en el borde.
   ============================================================ */

.art__rej {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--art-sum));
  column-gap: clamp(40px, 5vw, 96px);
  /* El relleno inferior es corto a propósito: debajo viene la FAQ, que
     ya trae el suyo. Sumar los dos dejaba 330 px de nada entre el último
     paso y la cota de la FAQ. */
  padding-block: clamp(44px, 4.6vw, 76px) clamp(36px, 3.6vw, 60px);
  align-items: start;
}
.art__cuerpo { grid-column: 1; grid-row: 1; padding-left: var(--art-gut); }
.sumario     { grid-column: 2; grid-row: 1; }

@media (max-width: 1080px) {
  .art__rej { grid-template-columns: minmax(0, 1fr); }
  .art__cuerpo { grid-column: 1; grid-row: 2; }
  .sumario { grid-column: 1; grid-row: 1; margin-bottom: clamp(38px, 4vw, 56px); }
}


/* ============================================================
   3 · SUMARIO
   ------------------------------------------------------------
   Mecanismo propio y sin una línea de JS, que es lo que pide el
   contrato de la dirección: ninguna pieza deslizante del sitio se
   mueve como otra.
     · El RAÍL marca cuánto llevas leído con una animación
       enganchada al scroll del documento (`animation-timeline`).
     · El EPÍGRAFE ACTIVO lo resuelve `:has(:target)` cuando se
       llega por un salto de ancla.
   Los dos degradan a NADA donde no estén soportados: el raíl se
   queda en el filete gris y la lista, en lista. Nada se esconde
   esperando a un motor que quizá no llegue.
   ============================================================ */

.sumario {
  position: sticky;
  top: calc(var(--alto-cab) + 24px);
  align-self: start;
}

.sumario__t {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  line-height: 1;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
  margin-bottom: 18px;
}

/* El raíl y la lista comparten la misma caja: el raíl es absoluto y
   la lista se aparta con su relleno izquierdo. */
.sumario__l { position: relative; }
.sumario__rail {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--linea);
  overflow: hidden;
}
.sumario__prog {
  display: block;
  width: 1px;
  height: 100%;
  background: var(--amarillo);
  transform: scaleY(0);
  transform-origin: 50% 0;
}
@supports (animation-timeline: scroll()) {
  .sumario__prog {
    animation: art-avance linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes art-avance {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.sumario__l li + li { margin-top: 2px; }
.sumario__l a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  /* Objetivo táctil de 44 px por el relleno más la línea. */
  min-height: 44px;
  padding: 10px 0 10px 20px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--apagado);
  transition: color var(--dur-ui) var(--ease), padding-left var(--dur-ui) var(--ease);
}
.sumario__l a:hover { color: var(--texto); padding-left: 26px; }
.sumario__n {
  font-family: var(--display);
  font-weight: 600;
  font-size: .625rem;
  letter-spacing: .18em;
  color: var(--amarillo);
}

/* Epígrafe activo. La condición se cuelga de `body` —y no del propio
   sumario— para que las ocho se escriban igual; desde el 8-sep-2026
   `#faq` es una sección más del cuerpo y la octava ya no es un caso
   aparte, pero la forma se conserva porque funciona y porque el
   sumario sigue sin saber cuántas secciones trae cada artículo. */
body:has(#s1:target) .sumario__l a[href="#s1"],
body:has(#s2:target) .sumario__l a[href="#s2"],
body:has(#s3:target) .sumario__l a[href="#s3"],
body:has(#s4:target) .sumario__l a[href="#s4"],
body:has(#s5:target) .sumario__l a[href="#s5"],
body:has(#s6:target) .sumario__l a[href="#s6"],
body:has(#s7:target) .sumario__l a[href="#s7"],
body:has(#faq:target) .sumario__l a[href="#faq"] {
  color: var(--texto);
}
body:has(#s1:target) .sumario__l a[href="#s1"]::before,
body:has(#s2:target) .sumario__l a[href="#s2"]::before,
body:has(#s3:target) .sumario__l a[href="#s3"]::before,
body:has(#s4:target) .sumario__l a[href="#s4"]::before,
body:has(#s5:target) .sumario__l a[href="#s5"]::before,
body:has(#s6:target) .sumario__l a[href="#s6"]::before,
body:has(#s7:target) .sumario__l a[href="#s7"]::before,
body:has(#faq:target) .sumario__l a[href="#faq"]::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--amarillo);
  transform: translateY(-50%) skewX(-30deg);
}

@media (max-width: 1080px) {
  /* Apilado, el sumario deja de ser una barra lateral y pasa a ser una
     tabla de contenidos. Y el RAÍL SE RETIRA: una barra de avance de
     lectura solo dice algo mientras el sumario está pegado a la ventana;
     colocada arriba del todo y estática, se sale de pantalla en el primer
     gesto y lo único que deja es un filete suelto. */
  .sumario { position: static; border-top: var(--art-linea); padding-top: clamp(20px, 2.4vw, 28px); }
  .sumario__rail { display: none; }
  .sumario__l a { padding-left: 0; }
  .sumario__l a:hover { padding-left: 6px; }
}
@media (max-width: 1080px) and (min-width: 620px) {
  /* Diez líneas seguidas antes de empezar a leer son diez líneas que
     nadie lee: a dos columnas se abarca de un vistazo. */
  .sumario__l { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .sumario__l li + li { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sumario__prog { animation: none; transform: scaleY(0); }
}


/* ============================================================
   4 · RESUMEN CITABLE
   ------------------------------------------------------------
   60-80 palabras, SIN coletilla («En resumen», «TL;DR»), empezando
   directo por la respuesta. Es el bloque que extraen los AI
   Overviews y ChatGPT y el activo nº 1 de este blog: si alguien
   solo lee esto, ya sabe qué comprar y qué comprobar.
   No lleva rótulo porque un rótulo lo convertiría en «un apartado
   más»: lo que lo distingue es el cuerpo, el color de texto pleno y
   el filete amarillo, que es luz y no relleno.
   ============================================================ */

.art__resumen {
  position: relative;
  margin-bottom: clamp(40px, 4vw, 62px);
  padding-left: clamp(20px, 1.9vw, 28px);
  border-left: 1px solid var(--amarillo);
  max-width: var(--art-ancho);
  font-size: clamp(1.25rem, 1.55vw, 1.4375rem);
  line-height: 1.58;
  color: var(--texto);
  text-wrap: pretty;
}


/* ============================================================
   5 · EPÍGRAFES Y PROSA
   ============================================================ */

.art__sec {
  position: relative;
  padding-block: clamp(38px, 3.8vw, 58px);
  border-top: var(--art-linea);
  /* Con la cabecera fija, un salto por ancla mete el titular debajo.
     La regla del sistema solo cubre `main > section[id]` y estos van
     dentro de un <article>, así que la medida se repite aquí. */
  scroll-margin-top: calc(var(--alto-cab) + 24px);
}

.art__h2 {
  position: relative;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.35vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--texto);
  text-wrap: balance;
  /* En px y no en `ch` por lo mismo que la medida de lectura: la `ch`
     de la condensada tampoco dice lo que parece. 620 px deja estos
     titulares —que el plan fija largos— en dos o tres líneas. */
  max-width: min(100%, var(--art-ancho));
  margin-bottom: clamp(18px, 1.8vw, 26px);
}
/* La numeración cuelga FUERA de la columna de texto, en el sangrado
   de `--art-gut`: el titular y los párrafos arrancan en el mismo
   borde y el número queda como la cota de un plano. */
.art__n {
  position: absolute;
  left: calc(-1 * var(--art-gut));
  top: .34em;
  font-size: clamp(.8125rem, 1vw, .9375rem);
  line-height: 1;
}
@media (max-width: 900px) {
  .art__n { position: static; display: block; margin-bottom: 10px; }
  /* Con el número dentro de la columna, el sangrado que lo alojaba se
     queda vacío y desplazaba el cuerpo 37 px respecto de la cabecera y
     del sumario. Aquí vale cero y todo arranca en el mismo borde. */
  .art { --art-gut: 0px; }
}

.art__h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto);
  text-wrap: balance;
  max-width: var(--art-ancho);
  margin-top: clamp(30px, 3vw, 44px);
  margin-bottom: 14px;
}

.art__p {
  max-width: var(--art-med);
  font-size: var(--art-fs);
  color: var(--apagado);
}
.art__p + .art__p,
.art__lista + .art__p,
.art__p + .art__lista { margin-top: 1.05em; }

.art__p strong,
.art__lista strong { color: var(--texto); font-weight: 600; }

/* Viñeta: el filete de 1 px en diagonal de la marca, no un punto. */
.art__lista { display: grid; gap: .85em; }
.art__lista li {
  position: relative;
  max-width: var(--art-med);
  padding-left: 28px;
  font-size: var(--art-fs);
  color: var(--apagado);
}
.art__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--lh-body) * .5em);
  width: 14px;
  height: 1px;
  background: var(--amarillo);
  transform: skewX(-30deg);
}

/* Enlaces dentro del texto: subrayado amarillo de 1 px, nunca relleno.
   Mismo tratamiento que en las páginas legales, para que un enlace de
   prosa se lea igual en todo el sitio. */
.art__p a,
.art__lista a,
.art__cierre-p a,
.art__pie-figura a {
  color: var(--texto);
  border-bottom: 1px solid rgb(var(--am-rgb) / .55);
  transition: border-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.art__p a:hover,
.art__lista a:hover,
.art__cierre-p a:hover,
.art__pie-figura a:hover { color: var(--amarillo); border-bottom-color: var(--amarillo); }

/* Utilidad local: un par de datos del cierre no pueden partirse. */
.art__nw { white-space: nowrap; }


/* ============================================================
   6 · FIGURA
   ------------------------------------------------------------
   Ancha, no del ancho de la prosa: el contraste entre una columna
   de lectura estrecha y una prueba ancha es el ritmo de la página.
   Usa `.media` del sistema (§04) para el tratamiento de imagen.
   ============================================================ */

.art__figura {
  margin-block: clamp(30px, 3vw, 44px);
  /* 900 y no 100 %: desde que la columna mide 965 a 1440 y 1.218 a 1920,
     sin tope la foto a 3:2 crecía hasta 812 px de alto. El `sizes` del
     <img> lleva el mismo tope. */
  max-width: var(--art-ancho);
}
/* ⚠️ EL PIE VA FUERA DE `.media`, NO DENTRO. `.media` recorta y tapa a sus
   hijos con dos capas (viñeta z-index 1 y barrido z-index 2) que cubren
   `inset: 0`: con el <figcaption> dentro, el pie de foto salía por debajo
   de la viñeta y se leía apagado sobre un rectángulo oscuro. Por eso la
   caja de imagen es un <div> y el <figure> solo compone.
   Y la caja lleva `aspect-ratio` declarado porque `.media img` va a
   `height: 100%`: sin altura de referencia esa regla no resuelve y el alto
   lo acaba fijando el fichero. Es la lección que este proyecto ya tiene
   escrita tres veces. */
.art__figura-caja { aspect-ratio: 3 / 2; }
.art__figura-caja img { position: absolute; inset: 0; }
.art__pie-figura {
  margin-top: 14px;
  max-width: var(--art-med-s);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--apagado);
}


/* ============================================================
   7 · TABLAS
   ------------------------------------------------------------
   Escritorio: tabla de verdad, con scroll propio si no cabe (el
   body del sitio va en `overflow-x: clip`; una tabla ancha sin caja
   propia arrastraría la página entera).
   Móvil (≤820 px): la tabla se convierte en fichas apiladas y cada
   celda recupera su rótulo desde `data-et`. Sin scroll lateral.
   El corte va en 820 y no en 760 porque la de decisión tiene CINCO
   columnas: a 800 px de ancho de tabla las celdas de la última
   quedaban en dos palabras por línea.
   ============================================================ */

.art__tabla-caja {
  margin-block: clamp(26px, 2.6vw, 40px);
  /* Mismo tope que la figura: la tabla de decisión tiene cinco columnas
     y a 1.218 px de caja las repartía a 240 px cada una. */
  max-width: var(--art-ancho);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid var(--linea-alta);
}
.art__tabla {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  /* Un escalón por debajo de la prosa: la tabla es consulta, no
     lectura seguida. */
  font-size: clamp(.9375rem, 1vw, 1rem);
  text-align: left;
  /* Reparto FIJO. Con el reparto automático la columna de la nota se
     come todo el sobrante y sus celdas pasan de los 66 caracteres de
     la prosa que tienen encima. */
  table-layout: fixed;
}
/* Cinco columnas — tabla de decisión */
.art__tabla--decision th:nth-child(1), .art__tabla--decision td:nth-child(1) { width: 21%; }
.art__tabla--decision th:nth-child(2), .art__tabla--decision td:nth-child(2) { width: 21%; }
.art__tabla--decision th:nth-child(3), .art__tabla--decision td:nth-child(3) { width: 13%; }
.art__tabla--decision th:nth-child(4), .art__tabla--decision td:nth-child(4) { width: 18%; }
.art__tabla--decision th:nth-child(5), .art__tabla--decision td:nth-child(5) { width: 27%; }
/* Tres columnas — tabla de datos corta */
/* Cuatro filas de tres datos cortos: estirada a 885 px es aire, no tabla. */
.art__tabla--rpm { min-width: 460px; max-width: 620px; }
.art__tabla--rpm th:nth-child(1), .art__tabla--rpm td:nth-child(1) { width: 34%; }
.art__tabla--rpm th:nth-child(2), .art__tabla--rpm td:nth-child(2) { width: 34%; }
.art__tabla--rpm th:nth-child(3), .art__tabla--rpm td:nth-child(3) { width: 32%; }

.art__tabla caption {
  text-align: left;
  padding-bottom: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto);
}
.art__tabla th {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  line-height: 1.4;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
  padding: 14px 22px 14px 0;
  border-bottom: var(--art-linea);
  vertical-align: bottom;
}
.art__tabla td {
  padding: 16px 22px 16px 0;
  border-bottom: var(--art-linea);
  color: var(--apagado);
  line-height: 1.55;
  vertical-align: top;
  overflow-wrap: break-word;
}
.art__tabla td:last-child, .art__tabla th:last-child { padding-right: 0; }
.art__tabla tbody tr:hover td { color: var(--texto); }

/* La nota al pie de una tabla: mismo papel que un pie de figura. */
.art__pie-tabla {
  max-width: var(--art-med-s);
  margin-top: -6px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--apagado);
}

@media (max-width: 820px) {
  .art__tabla-caja { overflow-x: visible; border-top: 0; }
  .art__tabla, .art__tabla tbody, .art__tabla tr, .art__tabla td { display: block; }
  /* ⚠️ El <caption> NO entra en esa lista por accidente: con la tabla en
     `display: block` sigue siendo `table-caption` y se le aplica un ancho
     ajustado al contenido, así que el título salía a UNA PALABRA POR
     LÍNEA. Medido a 390 px. */
  .art__tabla caption { display: block; }
  .art__tabla { min-width: 0; table-layout: auto; }
  .art__tabla td[class], .art__tabla td { width: auto !important; }
  .art__tabla thead { display: none; }
  .art__tabla tr {
    border: var(--art-linea);
    background: var(--sup);
    max-width: 520px;
    padding: 6px clamp(16px, 4vw, 22px) 14px;
    margin-bottom: 14px;
  }
  .art__tabla tbody tr:hover td { color: var(--apagado); }
  .art__tabla td {
    border-bottom: 0;
    padding: 10px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 108px) minmax(0, 1fr);
    gap: 4px 16px;
    align-items: baseline;
  }
  .art__tabla td + td { border-top: var(--art-linea); padding-top: 10px; }
  .art__tabla td::before {
    content: attr(data-et);
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--fs-micro);
    line-height: 1.7;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--amarillo);
  }
}
/* Muy estrecho: el rótulo se pone encima del dato o no cabe ninguno. */
@media (max-width: 430px) {
  .art__tabla td { grid-template-columns: 1fr; gap: 2px; }
}


/* ============================================================
   8 · LISTA NUMERADA DE COMPROBACIÓN
   ------------------------------------------------------------
   No es una lista con viñeta: es una secuencia y el orden importa.
   Por eso cada paso lleva su cifra amarilla sobre un filete propio
   y ocupa el ancho ancho, no el de la prosa: se lee de un vistazo
   con la máquina delante.
   ============================================================ */

.art__pasos {
  display: grid;
  margin-top: clamp(18px, 1.8vw, 26px);
  border-top: var(--art-linea);
  counter-reset: art-paso;
}
.art__pasos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px clamp(16px, 1.6vw, 24px);
  padding: clamp(15px, 1.5vw, 20px) 0;
  border-bottom: var(--art-linea);
  /* El filete acaba cerca del texto: 26 px de cifra + el hueco + la
     medida de lectura. Con 720 px las rayas seguían 150 px más allá de
     la última palabra de cada paso. */
  max-width: calc(var(--art-med) + 26px + clamp(16px, 1.6vw, 24px));
  font-size: var(--art-fs);
  line-height: 1.6;
  color: var(--apagado);
}
.art__paso-n {
  grid-row: 1 / span 2;
  align-self: start;
  min-width: 26px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--amarillo);
}
.art__paso-t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto);
}
/* La descripción va en su propio <span> y no como nodo de texto suelto:
   un nodo suelto dentro de un contenedor `grid` funciona (se convierte en
   ítem anónimo) pero no se le puede dar estilo ni la ven las seis páginas
   que van a copiar este bloque. Explícito. */
.art__paso-d { max-width: var(--art-med); }


/* ============================================================
   9 · NOTA DE MOSTRADOR
   ------------------------------------------------------------
   La voz de la casa dentro del artículo técnico: lo que se dice al
   otro lado del mostrador y no está en ninguna ficha. Se distingue
   por la superficie elevada y por el rótulo, no por un icono.
   ============================================================ */

.art__nota {
  margin-block: clamp(26px, 2.6vw, 38px);
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 30px);
  background: var(--sup);
  border: var(--art-linea);
  border-left: 1px solid var(--amarillo);
  border-radius: var(--radio);
  /* La caja es el ancho de la prosa más los dos rellenos: por dentro, la
     nota mide exactamente lo mismo que el párrafo que tiene encima. */
  max-width: calc(var(--art-med) + 2 * clamp(20px, 2vw, 30px) + 2px);
  font-size: var(--art-fs);
  line-height: 1.62;
  color: var(--apagado);
}
.art__nota-et {
  display: block;
  margin-bottom: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  line-height: 1;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
}


/* ============================================================
   10 · PREGUNTAS FRECUENTES — sección 08 DEL CUERPO
   ------------------------------------------------------------
   🔴 CAMBIO DEL 8-sep-2026. La FAQ era una `section.faq.sec-cota`
   a ancho completo DESPUÉS del artículo, con su propia cabecera
   pegada y su lista a 7/12 de la retícula: se leía como un anexo.
   Ahora es una `.art__sec` más, dentro de `.art__cuerpo`, con su H2
   numerado (08) y su entrada en el sumario. Del componente
   compartido (§18) se conserva lo que hace falta —el acordeón
   nativo, sus filetes y el aspa amarilla— y se le quita todo lo que
   lo hacía «otro bloque»: el `.faq__cont` de doce columnas, la
   cabecera pegajosa y el cuerpo de titular de sección.

   POR QUÉ SIGUE SIENDO `<details>` y no seis respuestas abiertas:
     · es el mecanismo nativo, accesible y sin una línea de JS;
     · el contenido de un `<details>` cerrado VA EN EL HTML SERVIDO,
       así que un motor generativo lo cita igual — no se pierde nada
       de lo que hace de la FAQ el bloque más citable del artículo;
     · abiertas, las seis respuestas añaden ~1.300 px justo antes del
       cierre comercial, en un artículo que ya mide 12.000 px de
       cuerpo. Cerradas, la sección 08 funciona como lo que es: el
       índice de dudas sueltas del que cada lector abre la suya.

   ⚠️ NADA DE ESTO SE ESCRIBE EN `estilos.css`. Son ajustes con el
   alcance de esta hoja sobre un componente del sistema, que es
   exactamente lo que §29 permite hacer a una hoja de página.
   ============================================================ */

/* EL FILETE DEL ACORDEÓN MIDE LO MISMO QUE EL DE LA LISTA DE PASOS de
   la sección de arriba, y por la misma cuenta: la medida de lectura MÁS
   la columna de mobiliario que lleva al lado. En los pasos esa columna
   es la cifra amarilla, a la izquierda (`--art-med + 26 + hueco` = 569);
   aquí es el aspa, a la derecha (`--art-med + 52` = 572). Tres píxeles
   de diferencia entre dos listas separadas por un H2: invisibles.
   Probado a 520 clavado —que alineaba los filetes con la PROSA— y se
   veía: 49 px de escalón contra los pasos, justo encima. */
.art__sec--faq .faq__lista { max-width: var(--art-ancho); }

/* La pregunta baja del cuerpo de titular de sección (23 px a 1440) al
   escalón del `.art__h3`, que es el sitio que le corresponde dentro de
   una sección numerada: por encima de la prosa y por debajo del H2.
   🔴 Y SE LE ENSANCHA EL RELLENO DERECHO, que es lo que le pone tope a
   la línea. La pregunta va en CONDENSADA y mete más caracteres en la
   misma caja que la prosa: con los 52 px de §18 rendía 64 caracteres
   reales a 1280/1024/834/620 —dos por debajo del tope de 66, sin margen
   para la pregunta más larga de los otros seis artículos—. El relleno
   no cambia el ancho de la caja, así que el aspa sigue clavada al final
   del filete y solo se estrecha el texto. Medido después: 60 como peor
   caso (620 px), 55-58 en el resto. Con `Range`, no con `ch`. */
.art__sec--faq .faq__p {
  font-size: var(--fs-h4);
  line-height: 1.24;
  padding-block: clamp(16px, 1.6vw, 22px);
  padding-right: 52px;
}
/* En cuanto la caja llega a su tope (572 px), el relleno derecho sube a
   134 y la línea de la pregunta se queda en 438 px de texto: 56
   caracteres reales, los mismos que la prosa a 1920. Por debajo de
   620 px la caja ya es más estrecha que el tope y sobra con el aspa. */
@media (min-width: 620px) {
  .art__sec--faq .faq__p { padding-right: 134px; }
}

/* ⚠️ LA MEDIDA DE LA RESPUESTA, AJUSTADA SOLO AQUÍ. `.faq__r p` va a
   `var(--medida)` (66ch) en la hoja compartida, y esa `ch` es la que
   miente: medido con Range, la respuesta rendería 86 caracteres reales
   por línea, veinte por encima del tope.
   440 px y no 520 porque la respuesta va a `--fs-body` (16-18 px) y no a
   `--art-fs`: cuerpo más pequeño, caja más estrecha. */
.art__sec--faq .faq__r p { max-width: var(--art-med-b); }
.art__sec--faq .faq__r { padding-bottom: clamp(18px, 1.8vw, 26px); }

/* El primer filete del acordeón sobra: la sección ya trae el suyo y el
   H2 va entre los dos. Dos líneas de 1 px separadas por un titular se
   leen como un error de maqueta. */
.art__sec--faq .faq__item:first-child { border-top: 0; }


/* ============================================================
   11 · CIERRE COMERCIAL
   ------------------------------------------------------------
   🔴 ES EL ÚNICO SITIO DEL ARTÍCULO DONDE APARECE EL GEO, y dentro
   del anchor que baja hacia la página comercial. El plan fija un
   anchor DISTINTO para cada uno de los siete artículos: no se
   reutiliza, no se abrevia y no se reparte en dos enlaces.
   Composición: texto a la izquierda, ficha de contacto a la
   derecha, separadas por el filete de 1 px.
   ============================================================ */

.art__cierre {
  background: var(--sup);
  padding-block: var(--sec-y);
}
/* Sin `max-width` propio (8-sep-2026): iba a 1.400 y dejaba el cierre 20
   px por dentro del borde estándar a 1440 y 160 a 1920. Es un `.cont`
   y mide lo que `.cont`. */
.art__cierre-int {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 4vw, 88px);
  align-items: start;
}
.art__cierre-h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--texto);
  text-wrap: balance;
  max-width: 20ch;
}
.art__cierre-p {
  margin-top: clamp(18px, 1.8vw, 26px);
  max-width: var(--art-med);
  font-size: var(--art-fs);
  color: var(--apagado);
}
.art__cierre-acciones {
  border-top: 1px solid var(--linea-alta);
  padding-top: clamp(20px, 2vw, 28px);
}
.art__cierre-k {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  line-height: 1;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
}
.art__cierre-tel {
  display: inline-block;
  /* 37 px de alto medidos; con este relleno llega a 45 y cumple el
     objetivo táctil de 44. */
  padding-block: 10px;
  margin: 2px 0 clamp(20px, 2vw, 28px);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-tel-pie);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--texto);
  transition: color var(--dur-ui) var(--ease);
}
.art__cierre-tel:hover { color: var(--amarillo); }
.art__cierre-nota {
  margin-top: clamp(18px, 1.8vw, 24px);
  max-width: var(--art-med-s);
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--apagado);
}

@media (max-width: 900px) {
  .art__cierre-int { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   12 · SEGUIR LEYENDO
   ------------------------------------------------------------
   Tres fichas de texto, sin foto. Es deliberado: las fotos de este
   proyecto son de tienda y de material, y ninguna ilustra «tipos de
   tuerca» sin mentir. Con foto se convertiría en la venta cruzada
   entre divisiones (`.otras`, §35), que es otro bloque y otro sitio.
   ============================================================ */

/* El `.h2` del sistema va a 20ch y aquí lo dejaba en cuatro líneas: es el
   mismo ajuste que `.otras` (§35) hace con su propia cabecera. */
.art__rel { padding-block: var(--sec-y); }
.art__rel .h2 { max-width: 26ch; }
.art__rel-l {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.art__rel-i {
  border-top: 1px solid var(--linea-alta);
  padding-top: clamp(18px, 1.8vw, 26px);
}
/* El rótulo amarillo de la ficha ya no es un número: es la DIVISIÓN
   del artículo enlazado. `.num` no lleva versales —sus usos son
   cifras— y una palabra en caja mixta con .22em de interletra se lee
   rota, así que aquí sí. */
.art__rel-n {
  display: block;
  margin-bottom: clamp(14px, 1.4vw, 20px);
  text-transform: uppercase;
}
.art__rel-t {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--texto);
  text-wrap: balance;
  margin-bottom: 12px;
}
.art__rel-t a {
  /* Igual que la miga: relleno en línea para llegar a los 44 px de zona
     sensible sin descuadrar la tarjeta. El de una sola línea medía 38. */
  padding-block: 7px;
  transition: color var(--dur-ui) var(--ease);
}
.art__rel-t a[href]:hover { color: var(--amarillo); }
.art__rel-p {
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--apagado);
  max-width: var(--art-med-s);
}
.art__volver { margin-top: clamp(30px, 3vw, 46px); }

@media (max-width: 900px) {
  .art__rel-l { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   13 · MOVIMIENTO REDUCIDO
   §27 ya anula toda transición con `!important`. Se escribe
   igualmente porque esta hoja viaja a siete páginas y no puede
   depender de que esa línea siga ahí.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .sumario__l a,
  .art__cierre-tel,
  .art__rel-t a { transition: none; }
}