@import url('fuentes.css');

/* ═══════════════════════════════════════════════════════════════════════════
   KÓRDEL — «PLANO TÉCNICO VIVO»
   La identidad no decora el oficio: lo enseña. La retícula no es un fondo,
   es el sistema de medida. El óxido no es un acento: es la marca de revisión
   que alguien hizo sobre el plano.

   Tres voces de una sola familia (IBM Plex):
     · Condensed 600/700 → titulares. Industrial, sin adorno.
     · Sans 300/400/500  → lectura.
     · Mono 400/500      → anotaciones, cotas, cifras.

   Diales: VARIANCE 9 · MOTION 8 · DENSITY 5
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* papel técnico frío — deliberadamente NO crema */
  --papel:#EDEDE8;
  --papel-alto:#F6F6F2;
  --papel-hondo:#E2E2DB;
  --tinta:#101010;
  --tinta-2:#232322;
  --tinta-3:#3A3A36;

  --oxido:#A4451F;
  --oxido-vivo:#C4552A;

  --linea:#C9C9C0;
  --linea-fuerte:#A8A89D;
  --apagado:#6E6E64;

  --cond:'IBM Plex Sans Condensed',Impact,sans-serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --ancho:1320px;
  --gutter:clamp(1.25rem,4vw,3.5rem);
  --modulo:clamp(3rem,6.5vw,6.5rem);          /* ritmo vertical, en múltiplos */

  --t-nano:clamp(.625rem,.7vw,.6875rem);
  --t-micro:clamp(.6875rem,.8vw,.75rem);
  --t-s:clamp(.8125rem,.95vw,.875rem);
  --t-base:clamp(1rem,1.15vw,1.0625rem);
  --t-l:clamp(1.125rem,1.6vw,1.375rem);
  --t-xl:clamp(1.5rem,2.6vw,2.125rem);
  --t-2xl:clamp(2rem,4.4vw,3.5rem);
  --t-3xl:clamp(2.75rem,7vw,5.5rem);
  --t-4xl:clamp(3.5rem,11vw,9rem);          /* el titular del hero sangra */
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:var(--t-base);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* clip recorta igual que hidden pero NO crea contenedor de scroll, que es lo que
   rompe position:sticky en un ancestro. Es la corrección, no un parche. */
@supports (overflow:clip){
  body{overflow-x:clip}
}

/* ── la retícula: el sistema de medida, no un fondo ───────────────────── */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, var(--linea) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(0deg, var(--linea) 0 1px, transparent 1px var(--modulo));
  opacity:.42;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35));
}
body > *{position:relative;z-index:1}

/* ── tipografía ───────────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--cond);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--t-4xl);letter-spacing:-.035em;font-weight:700;line-height:.88}
h2{font-size:var(--t-3xl);letter-spacing:-.03em;line-height:.92}
h3{font-size:var(--t-xl);line-height:1.04;font-weight:600}
h4{font-size:var(--t-l);font-weight:600;letter-spacing:-.01em;line-height:1.15}

p{margin:0 0 1.1em;max-width:64ch}
p:last-child{margin-bottom:0}
a{color:inherit;text-decoration:none}
strong{font-weight:500}
em{font-style:normal;color:var(--oxido)}

/* el subrayado de cota: un trazo que no llega a ser decoración */
.cota{
  position:relative;display:inline-block;
  padding-bottom:.06em;
}
.cota::after{
  content:"";position:absolute;left:0;right:-.04em;bottom:0;
  height:.055em;background:var(--oxido);
}

/* ── anotaciones de plano ─────────────────────────────────────────────── */
.ano{
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--apagado);
  display:inline-flex;align-items:center;gap:.6em;
  font-variant-numeric:tabular-nums;
}
.ano::before{
  content:"";width:clamp(1rem,3vw,2.25rem);height:1px;
  background:currentColor;opacity:.6;flex:none;
}
.ano--oxido{color:var(--oxido)}
.ano--sin::before{display:none}
.ano--fina{letter-spacing:.08em;text-transform:none}

.cifra{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* franja de datos: cuatro medidas del sistema, en una sola línea de plano */
.lamina--datos{padding-block:clamp(2rem,3.5vw,3rem);background:var(--papel-alto)}
.datos{
  display:grid;gap:1px;background:var(--linea);
  border:1px solid var(--linea);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:48rem){ .datos{grid-template-columns:repeat(4,minmax(0,1fr))} }
.dato{
  background:var(--papel-alto);padding:clamp(1.1rem,2.4vw,1.75rem);
  display:flex;flex-direction:column;gap:.45rem;
}
.dato__cifra{
  font-family:var(--cond);font-weight:700;
  font-size:clamp(2.25rem,5vw,3.75rem);line-height:.85;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.dato__etq{
  font-family:var(--mono);font-size:var(--t-nano);
  letter-spacing:.13em;text-transform:uppercase;color:var(--apagado);
  line-height:1.4;
}

/* ── estructura ───────────────────────────────────────────────────────── */
.contenedor{
  width:100%;max-width:var(--ancho);margin-inline:auto;
  padding-inline:var(--gutter);
}
.lamina{
  position:relative;
  padding-block:var(--modulo);
  border-top:1px solid var(--linea);
}
.lamina:first-of-type{border-top:0}

/* número de lámina gigante, hueco, en el margen */
.lamina__num{
  font-family:var(--cond);font-weight:700;
  font-size:clamp(4rem,16vw,13rem);
  line-height:.7;
  color:transparent;
  -webkit-text-stroke:1px var(--linea-fuerte);
  position:absolute;
  top:calc(var(--modulo) * .55);
  right:var(--gutter);
  z-index:-1;
  user-select:none;
  pointer-events:none;
  opacity:.75;
}

.rejilla{display:grid;gap:clamp(1.25rem,2.5vw,2.5rem)}
@media(min-width:56rem){
  .rejilla--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rejilla--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rejilla--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rejilla--ancha{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .rejilla--estrecha{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
}

/* ── cabecera ─────────────────────────────────────────────────────────── */
.cabecera{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--papel) 92%,transparent);
  border-bottom:1px solid var(--linea);
}
@supports not (background:color-mix(in srgb,#000 50%,transparent)){
  .cabecera{background:var(--papel)}
}
.cabecera__interior{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;min-height:64px;padding-block:.6rem;
}
.marca{display:inline-flex;flex-direction:column;gap:.16rem;line-height:1}
.marca__principal{
  font-family:var(--cond);font-weight:700;
  font-size:1.5rem;letter-spacing:.02em;
}
.marca__principal .tilde{color:var(--oxido)}
.marca__secundaria{
  font-family:var(--mono);font-size:.4375rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--apagado);
}
.nav{display:flex;align-items:center;gap:clamp(.5rem,1.5vw,1.5rem);flex-wrap:nowrap}
.nav a{
  font-size:var(--t-s);color:var(--tinta-3);
  padding-block:.3rem;border-bottom:1px solid transparent;
  white-space:nowrap;
  transition:color .18s ease,border-color .18s ease;
}
.nav a:hover{color:var(--tinta);border-bottom-color:var(--oxido)}
.nav a[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--oxido)}
.idiomas{display:flex;gap:.15rem;font-family:var(--mono);font-size:var(--t-micro)}
.idiomas a{
  padding:.25rem .4rem;color:var(--apagado);
  text-transform:uppercase;letter-spacing:.1em;
  border:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.idiomas a:hover{color:var(--tinta)}
.idiomas a[aria-current="true"]{color:var(--tinta);border-color:var(--linea-fuerte)}
@media(max-width:60rem){
  .nav{display:none}
}
@media(max-width:26rem){
  .marca__secundaria{display:none}
}

/* ── héroe: la lámina de apertura ─────────────────────────────────────── */
.heroe{
  position:relative;
  background:var(--tinta);
  color:var(--papel);
  overflow:hidden;
  border-bottom:1px solid var(--tinta);
}
.heroe::before{ /* retícula propia del héroe, sobre negro */
  content:"";position:absolute;inset:0;z-index:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 8.3333%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 72px);
}
.heroe::after{ /* halo cálido: el óxido iluminando el plano por una esquina */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 90% at 88% 105%, rgba(164,69,31,.34), transparent 62%);
}
.heroe__lienzo{position:absolute;inset:0;z-index:1;pointer-events:none}
.heroe__interior{
  position:relative;z-index:2;
  padding-block:clamp(3rem,7vw,6.5rem) clamp(2.5rem,5vw,4.5rem);
}
.heroe .ano{color:rgba(244,244,240,.5)}
.heroe .ano::before{background:rgba(244,244,240,.4)}
.heroe .ano--oxido{color:var(--oxido-vivo)}

.heroe h1{
  color:var(--papel);
  margin-block:.35em .32em;
  max-width:18ch;
}
.heroe h1 .rev{display:block;overflow:hidden}
.heroe h1 .rev > span{
  display:block;
  transform:translateY(105%);
  animation:subir .95s cubic-bezier(.16,.84,.28,1) forwards;
}
.heroe h1 .rev:nth-child(2) > span{animation-delay:.11s}
.heroe h1 .rev:nth-child(3) > span{animation-delay:.22s}
@keyframes subir{to{transform:translateY(0)}}

.heroe__entrada{
  font-size:var(--t-l);font-weight:300;line-height:1.42;
  color:rgba(244,244,240,.8);
  max-width:46ch;
  margin:0;
}
.heroe__pie{
  display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;
  margin-top:clamp(2rem,4vw,3.25rem);
}

/* héroe a dos columnas: el texto manda, el plano lo sostiene */
.heroe__dos{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media(min-width:62rem){
  .heroe__dos{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .heroe h1{max-width:14ch}
}
.heroe__plano{position:relative;margin:0 -1rem}
.heroe__plano::before{
  content:"";position:absolute;inset:-8%;z-index:-1;
  background:radial-gradient(50% 50% at 60% 45%, rgba(164,69,31,.20), transparent 70%);
}
.plano-svg{width:100%;height:auto;display:block;overflow:visible}

/* ── MATERIA ──────────────────────────────────────────────────────────
   Grano de plano sacado de una textura generada y reducida a luminancia.
   Regla: si se ve a tamaño normal, sobra. Sólo se percibe como material. */
.heroe__grano{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url('grano.webp');
  background-size:512px 512px;
  opacity:.42;
  mix-blend-mode:overlay;
}

/* ── INSTRUMENTO ──────────────────────────────────────────────────────
   La aguja del comparador no aparece: busca el cero y se detiene. Es el
   único gesto animado del héroe. «Self-drawing» de líneas ya lo hace todo
   el mundo; esto es movimiento de instrumento. */
.heroe__dial{
  position:absolute;right:-6%;bottom:-8%;width:clamp(84px,13vw,132px);
  color:rgba(244,244,240,.5);pointer-events:none;
  filter:drop-shadow(0 0 24px rgba(164,69,31,.25));
}
.dial{width:100%;height:auto;display:block}
.dial .aguja{
  transform-box:view-box;transform-origin:50% 50%;
  animation:asentar 1.9s cubic-bezier(.2,.9,.16,1) .35s both;
}
@keyframes asentar{
  0%{transform:rotate(-44deg)}
  52%{transform:rotate(7deg)}
  74%{transform:rotate(-3deg)}
  89%{transform:rotate(1.2deg)}
  100%{transform:rotate(0deg)}
}

/* ── CAPA DE REVISIÓN ─────────────────────────────────────────────────
   El óxido no es un acento decorativo: es una tinta aparte que sólo existe
   donde alguien corrigió. Se mezcla con multiply, como una segunda pasada
   de riso. Prueba del algodón: quita las revisiones y el óxido desaparece
   de la página entera. */
.revision{
  position:relative;
  padding:.35rem .6rem;
  margin-inline:-.6rem;
}
.revision::before{
  content:"";position:absolute;inset:-.35rem -.15rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M14 8c-6 0-9 5-8 10-3 3-2 8 2 9-1 5 3 8 7 8 2 4 8 4 10 1 4 3 9 1 10-3 5 2 9-1 9-6 4-1 5-6 1-9 2-5-2-9-7-8-2-4-7-4-9-1-3-2-8-2-9 1z' fill='none' stroke='%23A4451F' stroke-width='1.6' opacity='.9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:100% 100%;
  mix-blend-mode:multiply;pointer-events:none;
}
.pieza__ins{display:block;color:var(--oxido);width:1.85rem;height:1.85rem;margin-bottom:.2rem}
.pieza__ins svg{width:100%;height:100%;display:block}
.pieza--tinta .pieza__ins{color:var(--oxido-vivo)}

/* los hilos se dibujan al cargar: el sistema se está construyendo */
.plano-svg .hilos path{
  stroke-dasharray:5 4;
  animation:hilo 1.1s cubic-bezier(.16,.84,.28,1) both;
}
.plano-svg .hilos path:nth-child(1){animation-delay:.30s}
.plano-svg .hilos path:nth-child(2){animation-delay:.42s}
.plano-svg .hilos path:nth-child(3){animation-delay:.54s}
.plano-svg .hilos path:nth-child(4){animation-delay:.66s}
.plano-svg .hilos path:nth-child(5){animation-delay:.78s}
.plano-svg .hilos path:nth-child(6){animation-delay:.90s}
@keyframes hilo{
  from{stroke-dasharray:0 900;opacity:0}
  to{stroke-dasharray:5 4;opacity:.9}
}
.plano-svg .nodo{opacity:0;animation:aparece .6s ease forwards}
.plano-svg .nodo:nth-child(1){animation-delay:.18s}
.plano-svg .nodo:nth-child(2){animation-delay:.26s}
.plano-svg .nodo:nth-child(3){animation-delay:.34s}
.plano-svg .nodo:nth-child(5){animation-delay:.70s}
.plano-svg .nodo:nth-child(6){animation-delay:.78s}
.plano-svg .nodo:nth-child(7){animation-delay:.86s}
@keyframes aparece{to{opacity:1}}
.plano-svg .nucleo{opacity:0;animation:aparece .7s ease .5s forwards}
.plano-svg .pulso{
  animation:pulso 3.4s ease-in-out infinite;
  transform-origin:center;
}
@keyframes pulso{
  0%,100%{opacity:.15;stroke-width:1.6}
  50%{opacity:.7;stroke-width:2.4}
}
@media(max-width:62rem){
  .heroe__plano{margin-top:.5rem;max-width:34rem}
}

/* acciones ── */
.acciones{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.boton{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.11em;text-transform:uppercase;
  padding:.95rem 1.5rem;
  border:1px solid var(--tinta);
  background:var(--tinta);color:var(--papel);
  transition:background .2s ease,color .2s ease,transform .1s ease;
}
.boton:hover{background:var(--oxido);border-color:var(--oxido);color:#fff}
.boton:active{transform:translateY(1px)}
.boton--fantasma{background:transparent;color:var(--tinta)}
.boton--fantasma:hover{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.heroe .boton{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.heroe .boton:hover{background:var(--oxido);border-color:var(--oxido);color:#fff}
.heroe .boton--fantasma{background:transparent;color:var(--papel);border-color:rgba(244,244,240,.32)}
.heroe .boton--fantasma:hover{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.boton__flecha{font-family:var(--sans);font-size:1.05em;line-height:1}

/* ── bloques de contenido ─────────────────────────────────────────────── */
.cabeza-lamina{margin-bottom:clamp(2rem,4vw,3.5rem);max-width:none}
.cabeza-lamina h2{max-width:22ch}
.cabeza-lamina .entradilla{
  font-size:var(--t-l);font-weight:300;line-height:1.45;
  color:var(--tinta-3);max-width:52ch;margin-top:1.1rem;
}

/* revelado al entrar en pantalla */
/* si el navegador no ejecuta JS, nada se oculta: la página se lee entera */
.js .rev-in{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.16,.84,.28,1),transform .8s cubic-bezier(.16,.84,.28,1);
}
.js .rev-in.visto{opacity:1;transform:none}
.js .rev-in:nth-child(2){transition-delay:.08s}
.js .rev-in:nth-child(3){transition-delay:.16s}
.js .rev-in:nth-child(4){transition-delay:.24s}
.js .rev-in:nth-child(5){transition-delay:.32s}
.js .rev-in:nth-child(6){transition-delay:.4s}

/* síntoma / entrada numerada ── retícula + cota de medida */
.sintoma{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem 1.1rem;
  padding-block:clamp(1.25rem,2.4vw,1.9rem);
  border-top:1px solid var(--linea-fuerte);
}
.sintoma__n{
  font-family:var(--mono);font-size:var(--t-micro);
  color:var(--oxido);letter-spacing:.1em;padding-top:.42em;
  font-variant-numeric:tabular-nums;
}
.sintoma h3{grid-column:2;font-size:var(--t-xl);margin-bottom:.15rem}
.sintoma p{grid-column:2;font-size:var(--t-s);color:var(--tinta-3);margin:0;max-width:46ch}

/* tarjeta / módulo ── sin sombra, sin radio: borde y medida */
.pieza{
  position:relative;
  padding:clamp(1.15rem,2.2vw,1.75rem);
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-top:2px solid var(--tinta);
  display:flex;flex-direction:column;gap:.55rem;
  transition:border-color .2s ease,background .2s ease;
}
.pieza:hover{border-top-color:var(--oxido);background:var(--papel)}
.pieza h3{font-size:var(--t-l);font-weight:600;margin:0}
.pieza p{margin:0;font-size:var(--t-s);color:var(--tinta-3);line-height:1.5}
.pieza__meta{
  margin-top:auto;padding-top:.85rem;
  font-family:var(--mono);font-size:var(--t-nano);
  letter-spacing:.13em;text-transform:uppercase;color:var(--apagado);
  display:flex;align-items:center;gap:.5rem;
}
.pieza__meta::before{content:"";width:.4rem;height:.4rem;background:var(--oxido);flex:none}
.pieza--tinta{background:var(--tinta);border-color:var(--tinta-2);border-top-color:var(--papel)}
.pieza--tinta h3{color:var(--papel)}
.pieza--tinta p{color:rgba(244,244,240,.72)}
.pieza--tinta .pieza__meta{color:rgba(244,244,240,.55)}

/* pasos ── la secuencia como una cota continua */
.pasos{counter-reset:paso;display:grid}
.paso{
  counter-increment:paso;
  display:grid;gap:.4rem clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.4rem,2.8vw,2.2rem);
  border-top:1px solid var(--linea);
  position:relative;
}
@media(min-width:46rem){ .paso{grid-template-columns:clamp(3rem,6vw,5.5rem) 1fr} }
.paso__n{
  font-family:var(--mono);font-size:var(--t-micro);
  color:var(--oxido);letter-spacing:.1em;padding-top:.5em;
  font-variant-numeric:tabular-nums;
}
.paso__n::before{content:"— " counter(paso,decimal-leading-zero)}
.paso h3{font-size:var(--t-2xl);font-weight:700;margin:0;letter-spacing:-.025em}
.paso p{margin:.15rem 0 0;color:var(--tinta-3);max-width:56ch;font-size:var(--t-base)}
@media(min-width:46rem){ .paso p{grid-column:2} }

/* precios ── tabla de mediciones, no tarjetas de SaaS */
.precio{
  display:flex;flex-direction:column;gap:1rem;
  padding:clamp(1.25rem,2.4vw,1.9rem);
  background:var(--papel-alto);
  border:1px solid var(--linea);
}
.precio--destacado{
  background:var(--tinta);color:var(--papel);
  border-color:var(--tinta);
}
.precio__nombre{
  font-family:var(--cond);font-weight:600;font-size:var(--t-xl);
  letter-spacing:-.02em;line-height:1;
}
.precio__cifra{
  font-family:var(--mono);font-weight:500;
  font-variant-numeric:tabular-nums;
  font-size:clamp(2.25rem,5vw,3.5rem);line-height:.9;letter-spacing:-.045em;
  display:block;
}
.precio__cifra span{
  font-size:var(--t-micro);font-weight:400;letter-spacing:.06em;
  color:var(--apagado);display:block;margin-top:.55rem;font-family:var(--mono);
}
.precio--destacado .precio__cifra span{color:rgba(244,244,240,.6)}
.precio ul{
  list-style:none;margin:0;padding:1rem 0 0;
  border-top:1px solid var(--linea);
  display:grid;gap:.5rem;
}
.precio--destacado ul{border-top-color:rgba(244,244,240,.2)}
.precio li{
  font-size:var(--t-s);color:var(--tinta-3);
  display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:baseline;
}
.precio li::before{
  content:"·";color:var(--oxido);font-weight:700;line-height:1;
}
.precio--destacado li{color:rgba(244,244,240,.78)}
.precio__nota{font-size:var(--t-s);color:var(--apagado);margin:0;line-height:1.45}
.precio--destacado .precio__nota{color:rgba(244,244,240,.62)}
.precio s{color:var(--apagado)}

/* preguntas ── tipo ficha técnica */
.pregunta{border-top:1px solid var(--linea)}
.pregunta summary{
  cursor:pointer;list-style:none;
  display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:baseline;
  padding-block:1.15rem;
  font-family:var(--cond);font-weight:600;font-size:var(--t-l);
  letter-spacing:-.01em;
}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{
  content:"+";font-family:var(--mono);font-weight:400;
  color:var(--oxido);font-size:1.25rem;line-height:1;
}
.pregunta[open] summary::after{content:"−"}
.pregunta p{
  margin:0 0 1.4rem;padding-left:clamp(0rem,2vw,2.5rem);
  color:var(--tinta-3);max-width:60ch;font-size:var(--t-s);
}

/* aviso / nota al margen */
.nota{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;
  padding:1.1rem 1.25rem;
  border-left:2px solid var(--oxido);
  background:rgba(164,69,31,.045);
  margin-block:1.75rem;
}
.nota p{margin:0;font-size:var(--t-s);color:var(--tinta-3)}
.nota__marca{
  font-family:var(--mono);font-size:var(--t-nano);
  letter-spacing:.14em;text-transform:uppercase;color:var(--oxido);
  padding-top:.15em;white-space:nowrap;
}

/* llamada final */
.cierre{
  background:var(--tinta);color:var(--papel);
  padding-block:clamp(3rem,7vw,6rem);
  position:relative;overflow:hidden;
}
.cierre::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 12% 0%, rgba(164,69,31,.3), transparent 60%);
}
.cierre .contenedor{position:relative;z-index:1}
.cierre h2{color:var(--papel);max-width:24ch}
.cierre p{color:rgba(244,244,240,.75);max-width:46ch;font-weight:300;font-size:var(--t-l)}
.cierre .ano{color:var(--oxido-vivo)}
.cierre .ano::before{background:var(--oxido-vivo)}
.cierre .boton{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.cierre .boton:hover{background:var(--oxido);border-color:var(--oxido);color:#fff}
.cierre .boton--fantasma{background:transparent;color:var(--papel);border-color:rgba(244,244,240,.3)}
.cierre .boton--fantasma:hover{background:var(--papel);color:var(--tinta);border-color:var(--papel)}

/* ── pie ──────────────────────────────────────────────────────────────── */
.pie{
  background:var(--tinta-2);color:rgba(244,244,240,.62);
  padding-block:clamp(2.5rem,5vw,4rem) 1.5rem;
  font-size:var(--t-s);
  border-top:1px solid rgba(244,244,240,.12);
}
.pie a{color:rgba(244,244,240,.86);transition:color .18s ease}
.pie a:hover{color:var(--oxido-vivo)}
.pie h4{
  font-family:var(--mono);font-size:var(--t-nano);
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,244,240,.5);margin-bottom:1.1rem;font-weight:400;
}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pie__marca{
  font-family:var(--cond);font-weight:700;font-size:2rem;
  color:var(--papel);letter-spacing:.01em;line-height:1;
}
.pie__marca .tilde{color:var(--oxido-vivo)}
.pie__lema{
  font-family:var(--mono);font-size:var(--t-nano);
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,244,240,.45);margin-top:.5rem;
}
.pie__base{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.25rem;
  border-top:1px solid rgba(244,244,240,.12);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--t-nano);
  letter-spacing:.06em;color:rgba(244,244,240,.4);
}

/* ── tabla de datos ───────────────────────────────────────────────────── */
.tabla-envoltura{overflow-x:auto;margin-top:1.5rem}
table{
  width:100%;max-width:100%;table-layout:fixed;
  border-collapse:collapse;font-size:var(--t-s);
}
th,td{
  text-align:left;padding:.75rem .85rem;
  border-bottom:1px solid var(--linea);
  word-break:break-word;
}
th{
  font-family:var(--mono);font-size:var(--t-nano);
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--apagado);font-weight:400;
}
td.cifra{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── utilidades ───────────────────────────────────────────────────────── */
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.salto-contenido{
  position:absolute;left:-9999px;top:0;
  background:var(--tinta);color:var(--papel);
  padding:.8rem 1.1rem;z-index:100;
  font-family:var(--mono);font-size:var(--t-micro);
}
.salto-contenido:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--oxido);outline-offset:3px}

/* la cota vertical que se dibuja al hacer scroll */
.cota-viva{
  position:absolute;left:calc(var(--gutter) * .42);top:0;bottom:0;width:1px;
  background:var(--linea);pointer-events:none;
}
.cota-viva__relleno{
  position:absolute;left:0;top:0;width:100%;
  height:0;background:var(--oxido);
  transition:height .18s linear;
}

@media(max-width:40rem){
  .lamina__num{font-size:clamp(3rem,22vw,7rem);opacity:.5}
  .heroe h1{max-width:none}
  .cota-viva{display:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   ESCALA — el recorrido de la marca (N3)
   El scroll no secuestra nada: el usuario manda. Lo que cambia es la escala
   de lo que mira. Una línea que ya estaba ahí, y la cámara que se acerca.
   ═══════════════════════════════════════════════════════════════════════════ */
.escala{
  position:relative;
  height:340vh;
  background:var(--tinta);
  color:var(--papel);
  border-block:1px solid var(--tinta);
}
.escala__fijo{
  position:sticky;top:0;height:100vh;
  display:grid;place-items:center;
  overflow:clip;
}
@supports (height:100svh){ .escala__fijo{height:100svh} }
.escala__lienzo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.escala__capa{
  position:absolute;
  width:100%;height:auto;max-height:86vh;
  max-width:1320px;
  padding-inline:clamp(1rem,5vw,5rem);
  color:rgba(244,244,240,.62);
  opacity:0;
  /* papel de calco: la luz se suma, no se tapa. Cada hoja se añade a la anterior
     y la obra se ve crecer. Sobre negro, screen == superposición de film. */
  mix-blend-mode:screen;
  transition:opacity .38s ease;
  will-change:opacity,transform;
}
.escala__capa[data-capa="2"]{color:rgba(244,244,240,.55)}

.escala__textos{
  position:relative;z-index:2;
  display:grid;place-items:center;
  text-align:center;
  padding-inline:var(--gutter);
  max-width:44rem;
}
.escala__fase{
  grid-area:1/1;
  opacity:0;
  will-change:opacity,transform;
}
.escala__fase .ano{justify-content:center;color:var(--oxido-vivo)}
.escala__fase .ano::before{background:var(--oxido-vivo)}
.escala__fase h3{
  font-size:clamp(1.75rem,4.6vw,3.75rem);
  line-height:.98;letter-spacing:-.03em;
  margin:.6rem 0 .9rem;
  color:var(--papel);
}
.escala__fase p{
  margin:0 auto;max-width:40ch;
  color:rgba(244,244,240,.72);
  font-weight:300;font-size:var(--t-l);line-height:1.45;
}

/* la regla de progreso: una cota que dice por dónde vas */
.escala__regla{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(1.5rem,4vh,3rem);
  height:1px;background:rgba(244,244,240,.16);
}
.escala__regla-fill{
  height:100%;width:0;background:var(--oxido-vivo);
  transition:width .12s linear;
}

/* sin JS: tres figuras apiladas y los textos seguidos. Nada se pierde. */
html:not(.js) .escala,
.escala--estatica{height:auto}
html:not(.js) .escala__fijo,
.escala--estatica .escala__fijo{position:static;height:auto;display:block;padding-block:var(--modulo)}
html:not(.js) .escala__lienzo,
.escala--estatica .escala__lienzo{position:static;display:grid;gap:1.5rem;margin-bottom:2.5rem}
html:not(.js) .escala__capa,
.escala--estatica .escala__capa{position:static;opacity:.55;max-height:none}
html:not(.js) .escala__textos,
.escala--estatica .escala__textos{display:grid;gap:2.5rem;max-width:none;text-align:left}
html:not(.js) .escala__fase,
.escala--estatica .escala__fase{grid-area:auto;opacity:1}
html:not(.js) .escala__fase p,
.escala--estatica .escala__fase p{margin:0}
html:not(.js) .escala__fase .ano,
.escala--estatica .escala__fase .ano{justify-content:flex-start}
html:not(.js) .escala__regla,
.escala--estatica .escala__regla{display:none}

@media(max-width:40rem){
  .escala{height:260vh}
  .escala__capa{max-height:52vh}
}