/* ═══════════════════════════════════════════════════════════════════════════
   ORMION · ormion.com · hoja única de la portada
   Sistema de tokens de la marca (grafito, blanco calibrado, gris instrumental,
   acero y un solo rojo de calibración por vista) + Instrument Sans / IBM Plex.
   Escala tipográfica con techo duro de 64 px.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* paleta */
  --grafito:#0E1116;
  --blanco:#FFFFFF;
  --instrumental:#EDEFF1;
  --acero:#5B6472;
  --calibra:#DA291C;
  /* derivados admitidos */
  --hairline:#E3E6E9;
  --acero-suave:#8A94A2;
  --hairline-inv:#23282F;

  /* tipografía */
  --display:"Instrument Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --texto:"IBM Plex Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* retícula de 4 px */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s24:96px; --s32:128px;
  --radio:2px;
  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --aire:clamp(72px,8vw,120px);

  /* escala tipográfica — techo duro 64 px */
  --t-hero:clamp(2rem,4.2vw,3.75rem);
  --t-lead:clamp(1.0625rem,1.35vw,1.1875rem);
  --t-h2:clamp(1.5rem,3vw,2.5rem);
  --t-h3:1.1875rem;
  --t-dato:clamp(1.875rem,3.6vw,3.5rem);
  --t-manif:clamp(1.375rem,2.4vw,2rem);
  --t-remate:clamp(1.5rem,2.6vw,2.25rem);
  --t-body:1.0625rem;
  --t-micro:.8125rem;
  --t-rotulo:.6875rem;

  --ease:cubic-bezier(.16,1,.3,1);

  /* la I del wordmark hereda la tinta: el logotipo nunca es el índice rojo */
  --acc:currentColor;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--blanco); color:var(--grafito);
  font-family:var(--texto); font-weight:400; font-size:var(--t-body); line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
::selection{background:var(--grafito);color:var(--blanco)}
:focus-visible{outline:2px solid var(--calibra);outline-offset:3px;border-radius:1px}
.dark :focus-visible{outline-color:var(--blanco)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:-9999px;top:0;z-index:99;background:var(--grafito);color:var(--blanco);padding:12px 18px;font-family:var(--display);font-size:14px}
.saltar:focus{left:var(--gut);top:12px}

h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.015em;margin:0}
h2{font-size:var(--t-h2);line-height:1.12;letter-spacing:-.012em;text-wrap:balance;max-width:20ch}
h3{font-size:var(--t-h3);line-height:1.32;letter-spacing:-.008em}
.lead{font-size:var(--t-lead);line-height:1.58;letter-spacing:-.002em;color:var(--acero);max-width:54ch;font-weight:300}
.lead strong{color:var(--grafito);font-weight:500}
.micro{font-size:var(--t-micro);line-height:1.55;color:var(--acero);font-weight:300}

/* ── firma visual: la escala se repite, el índice es único ── */
.escala{height:9px;background:repeating-linear-gradient(90deg,var(--grafito) 0 1px,transparent 1px 13px);opacity:.55}
.escala--inv{background:repeating-linear-gradient(90deg,var(--blanco) 0 1px,transparent 1px 13px);opacity:.30}
.escala--fina{height:8px;background:repeating-linear-gradient(90deg,var(--grafito) 0 1px,transparent 1px 5px);opacity:.42}
.indice{width:1px;height:17px;background:var(--calibra);display:block;flex:none}

.rot{font-family:var(--display);font-weight:500;font-size:var(--t-rotulo);line-height:1.45;letter-spacing:.10em;text-transform:uppercase;color:var(--acero);font-variant-numeric:tabular-nums;margin:0}
.rot--inv{color:var(--acero-suave)}

/* cabecera de sección: filete graduado + índice rojo de esa vista */
.cab{position:relative;padding-top:var(--s6);border-top:1px solid var(--hairline)}
.cab::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:repeating-linear-gradient(90deg,var(--hairline) 0 1px,transparent 1px 13px)}
.cab--idx::after{content:"";position:absolute;top:-4px;left:0;width:1px;height:17px;background:var(--calibra)}
.cab--inv{border-top-color:var(--hairline-inv)}
.cab--inv::before{background:repeating-linear-gradient(90deg,var(--hairline-inv) 0 1px,transparent 1px 13px)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
section{position:relative}
.aire{padding-block:var(--aire)}
.dark{background:var(--grafito);color:var(--blanco)}
.dark h2,.dark h3{color:var(--blanco)}
.dark .lead{color:var(--acero-suave)}
.dark .lead strong{color:var(--blanco)}
.dark .micro{color:var(--acero-suave)}
.instrumental{background:var(--instrumental)}

.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s12);align-items:end}
.head__t{grid-column:1/2}
.head__p{grid-column:2/3}
@media (max-width:1080px){
  .head{grid-template-columns:1fr;gap:var(--s8)}
  .head__t,.head__p{grid-column:1/-1}
}

/* ── botones ── */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.005em;padding:13px 22px;border-radius:var(--radio);border:1px solid var(--grafito);background:var(--grafito);color:var(--blanco);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);cursor:pointer}
.btn:hover{background:var(--blanco);color:var(--grafito)}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--sm{padding:10px 17px;font-size:13px}
.btn--ghost{background:transparent;color:var(--grafito);border-color:var(--hairline)}
.btn--ghost:hover{background:var(--grafito);color:var(--blanco);border-color:var(--grafito)}
.btn--inv{background:var(--blanco);color:var(--grafito);border-color:var(--blanco)}
.btn--inv:hover{background:transparent;color:var(--blanco)}
.btn--linea{background:transparent;color:var(--blanco);border-color:var(--hairline-inv)}
.btn--linea:hover{background:var(--blanco);color:var(--grafito);border-color:var(--blanco)}

/* ── revelado ── */
.rv{opacity:0;transform:translateY(14px)}
.rv-in{opacity:1;transform:none;transition:opacity .66s var(--ease) var(--d,0s),transform .76s var(--ease) var(--d,0s)}

/* ═══ WORDMARK ORM-G07 ═══
   Trazado (DIN Pro Bold contorneada, interletrado 0,0700 em y kerning por
   pares ya resuelto en la geometría). Se dimensiona por ANCHO: la altura de
   la tinta es 0,724 em y la relación ancho/alto es 5,49324, de modo que
   font-size = ancho objetivo × 0,25134, igual que en el sistema de la marca. */
.wmk{display:inline-block;line-height:1;color:var(--grafito)}
.wmk--inv{color:var(--blanco)}
.wmk svg{display:block;height:.724em;width:auto;fill:currentColor}
.wmk .wm-i{fill:var(--acc,currentColor)}
.wmk--nav{font-size:32.67px}    /* 130 px de ancho */
.wmk--pie{font-size:32.67px}
.wmk--firma{font-size:32.67px}
.wmk--hero{                     /* 26 % del ancho útil */
  font-size:clamp(24.13px,calc((min(100vw,1240px) - 2 * var(--gut)) * 0.0653484),72.66px);
  margin-bottom:.725em;         /* margen de respeto: la altura de la O */
}

/* ═══════════ 01 · NAVEGACIÓN ═══════════ */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:72px;display:flex;align-items:center;border-bottom:1px solid transparent;transition:background .45s var(--ease),border-color .45s var(--ease)}
.nav.stuck{background:rgba(255,255,255,.93);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom-color:var(--hairline)}
.nav__in{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);display:flex;align-items:center;gap:var(--s8)}
.nav__marca{display:flex;align-items:center;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
.nav.stuck .nav__marca{opacity:1;transform:none;pointer-events:auto}
.nav__links{display:flex;gap:var(--s8);margin-left:auto;align-items:center}
.nav__links a:not(.btn){position:relative;font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--acero);transition:color .3s var(--ease);padding-block:4px}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--grafito);transition:right .32s var(--ease)}
.nav__links a:not(.btn):hover{color:var(--grafito)}
.nav__links a:not(.btn):hover::after{right:0}
/* por debajo de 900 px el hero cede el wordmark a la barra: nunca hay dos a la vez */
@media (max-width:900px){
  .nav__links a:not(.btn){display:none}
  .nav__marca{opacity:1;transform:none;pointer-events:auto}
  .wmk--hero{display:none}
}

/* ═══════════ 02 · HERO ═══════════ */
.hero{position:relative;min-height:clamp(600px,100svh,940px);display:flex;flex-direction:column;justify-content:center;padding-top:96px;padding-bottom:80px;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 60%;transform:scale(1.08) translate3d(0,calc(var(--hp,0) * 44px),0);will-change:transform}
.hero__veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(96deg,#fff 0%,#fff 30%,rgba(255,255,255,.94) 44%,rgba(255,255,255,.55) 62%,rgba(255,255,255,.06) 82%),
  linear-gradient(#fff 0%,rgba(255,255,255,0) 22%),
  linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 26%)}
.hero__grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,var(--hairline) 0 1px,transparent 1px 100%);background-size:calc(100% / 6) 100%;opacity:.5;-webkit-mask-image:linear-gradient(#fff,rgba(255,255,255,.2) 70%,transparent);mask-image:linear-gradient(#fff,rgba(255,255,255,.2) 70%,transparent)}
.hero__in{position:relative;z-index:1}
.hero__eyebrow{display:flex;align-items:flex-start;gap:14px;margin-bottom:var(--s6)}
.hero__eyebrow .tick{width:1px;height:15px;background:var(--acero);flex:none;margin-top:1px}
.hero h1{font-family:var(--display);font-weight:500;font-size:var(--t-hero);line-height:1.05;letter-spacing:-.018em;margin:0 0 var(--s6);max-width:17ch;text-wrap:balance}
/* la traza que se dibuja bajo la palabra: en Ormion es la escala graduada del instrumento */
.medida{position:relative;display:inline-block;white-space:nowrap}
.medida::after{content:"";position:absolute;left:0;right:0;bottom:-.10em;height:7px;
  background:repeating-linear-gradient(90deg,var(--grafito) 0 1px,transparent 1px 11px);
  opacity:.55;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.15s var(--ease) .55s}
.hero.trazada .medida::after{transform:scaleX(1)}
.hero .lead{max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
.hero__foot{position:absolute;left:0;right:0;bottom:0;z-index:1;padding-inline:var(--gut);padding-bottom:26px}
.hero__foot-in{width:100%;max-width:var(--wrap);margin-inline:auto;display:flex;align-items:flex-end;gap:var(--s6)}
.hero__rule{position:relative;flex:1;min-width:0}
.hero__rule .escala{opacity:.45}
.hero__en{white-space:nowrap;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:-.015em;color:var(--grafito)}
@media (max-width:860px){
  .hero{min-height:clamp(560px,92svh,860px)}
  .hero__bg img{object-position:70% 62%}
  /* si falta contraste se aumenta el blanco, nunca se oscurece la imagen */
  .hero__veil{background:linear-gradient(#fff 0%,rgba(255,255,255,.96) 38%,rgba(255,255,255,.80) 60%,rgba(255,255,255,.24) 86%),linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 24%)}
  .hero__foot-in > .rot{display:none}
}
@media (max-width:560px){ .hero__en{display:none} }

/* ═══════════ 03 · MARQUESINA DE SECTORES ═══════════ */
.mq{border-block:1px solid var(--hairline);padding-block:var(--s8);background:var(--blanco)}
.mq__rot{text-align:center;margin-bottom:var(--s6)}
.mq__win{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#fff 12%,#fff 88%,transparent);mask-image:linear-gradient(90deg,transparent,#fff 12%,#fff 88%,transparent)}
.mq__track{display:flex;width:max-content;animation:mq-desliza 52s linear infinite}
.mq__win:hover .mq__track{animation-play-state:paused}
.mq__set{display:flex;flex:none}
.mq__set span{font-family:var(--display);font-weight:500;font-size:clamp(.9375rem,1.5vw,1.1875rem);letter-spacing:-.01em;color:var(--grafito);padding-inline:var(--s8);display:flex;align-items:center;gap:var(--s8);white-space:nowrap}
.mq__set span::after{content:"";width:3px;height:3px;background:var(--acero-suave);flex:none}
@keyframes mq-desliza{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ═══════════ 04 · EL INTERVALO (el problema) ═══════════
   Fusión: la retícula torcida y el negativo sobre grafito, los fragmentos que
   se encienden en cascada al entrar en pantalla, y los cuatro actos. */
.disp{position:relative;margin-top:var(--s16);padding-block:var(--s6);display:flex;flex-wrap:wrap;gap:10px;overflow:hidden}
.disp::before{content:"";position:absolute;inset:-16% -8%;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 100%),linear-gradient(180deg,rgba(255,255,255,.055) 0 1px,transparent 1px 100%);
  background-size:58px 58px;transform:rotate(-1.4deg) skewX(-2deg);
  -webkit-mask-image:radial-gradient(90% 80% at 40% 50%,#000,transparent 80%);mask-image:radial-gradient(90% 80% at 40% 50%,#000,transparent 80%)}
.frag{position:relative;z-index:1;font-family:var(--texto);font-weight:300;font-size:14.5px;line-height:1.4;color:var(--acero-suave);background:rgba(255,255,255,.035);border:1px solid var(--hairline-inv);border-radius:var(--radio);padding:11px 15px;
  opacity:0;transform:rotate(var(--rot,0deg)) translate3d(0,16px,0);
  transition:opacity .6s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s),border-color .4s var(--ease),color .4s var(--ease)}
.disp.on .frag{opacity:1;transform:rotate(var(--rot,0deg)) translate3d(0,var(--dy,0px),0)}
.frag:hover{border-color:#39414C;color:var(--blanco)}
.disp__cierre{position:relative;z-index:1;width:100%;display:flex;align-items:flex-start;gap:14px;margin-top:var(--s12);opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease) .5s,transform .7s var(--ease) .5s}
.disp.on .disp__cierre{opacity:1;transform:none}
/* sin índice rojo: en el acto del problema todavía no hay instrumento que medir */
.disp__cierre .indice{margin-top:.32em;background:var(--acero-suave)}
.disp__cierre p{font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,2vw,1.625rem);letter-spacing:-.012em;line-height:1.3;color:var(--blanco);max-width:30ch}
.actos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s8) var(--s12);margin-top:var(--s16);border-top:1px solid var(--hairline-inv);padding-top:var(--s8)}
.actos h3{margin:0 0 var(--s2)}
.actos p{color:var(--acero-suave);font-size:15px;line-height:1.62;font-weight:300;max-width:34ch}
.actos .rot{display:block;margin-bottom:var(--s4)}
@media (max-width:1080px){ .actos{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .actos{grid-template-columns:1fr;gap:var(--s8)} }

/* ═══════════ marco de navegador (la captura es el dato) ═══════════ */
.chrome{border:1px solid var(--hairline);border-radius:var(--radio);background:var(--blanco);overflow:hidden;margin:0;box-shadow:0 26px 44px -28px rgba(14,17,22,.34),0 62px 110px -56px rgba(14,17,22,.26);transform:translateY(var(--py,0px))}
.chrome__bar{display:flex;align-items:center;gap:var(--s3);height:36px;padding-inline:var(--s3);background:var(--instrumental);border-bottom:1px solid var(--hairline)}
.chrome__dots{display:flex;gap:5px;flex:none}
.chrome__dots i{width:7px;height:7px;border:1px solid var(--acero-suave);border-radius:50%;opacity:.7}
.chrome__url{flex:1;min-width:0;height:20px;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--blanco);border:1px solid var(--hairline);border-radius:1px;font-family:var(--display);font-size:10.5px;font-weight:500;letter-spacing:.045em;color:var(--acero);text-transform:lowercase;overflow:hidden;white-space:nowrap}
.chrome__url svg{flex:none;opacity:.62}
.chrome img{width:100%;height:auto}
.instrumental .chrome__bar{background:var(--blanco)}
.cap{display:flex;gap:12px;margin-top:var(--s6);align-items:flex-start}
.cap .escala{width:34px;flex:none;margin-top:7px}
.cap p{font-size:14.5px;line-height:1.6;color:var(--acero);font-weight:300;max-width:58ch}
.cap p b{color:var(--grafito);font-weight:500}
@media (max-width:640px){ .chrome__url{display:none} }

/* ═══════════ 05 · LA SALA ═══════════ */
.showcase{margin-top:var(--s16)}

/* ═══════════ 06 · EL PANEL ═══════════ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);gap:var(--s12);align-items:start;margin-top:var(--s16)}
.lista{border-top:1px solid var(--hairline)}
.lista__i{padding-block:var(--s8);border-bottom:1px solid var(--hairline)}
.lista__i .rot{display:block;margin-bottom:10px}
.lista__i h3{margin-bottom:var(--s2)}
.lista__i p{color:var(--acero);font-size:15px;line-height:1.62;font-weight:300;max-width:46ch}
.stack{display:grid;gap:var(--s12)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8);margin-top:var(--s24)}
.trio .chrome{box-shadow:0 14px 26px -20px rgba(14,17,22,.34)}
.trio .cap{margin-top:var(--s4)}
.trio .cap p{font-size:13.5px}
@media (max-width:1080px){ .split{grid-template-columns:1fr;gap:var(--s16)} }
@media (max-width:860px){ .trio{grid-template-columns:1fr;gap:var(--s12)} }

/* ═══════════ 07 · DENTRO DE LA SALA ═══════════ */
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s16) var(--s12);margin-top:var(--s16)}
.duo__i h3{margin:var(--s6) 0 var(--s2)}
.duo__i p{color:var(--acero);font-size:15px;line-height:1.62;font-weight:300;max-width:44ch}
.duo .chrome{box-shadow:0 18px 32px -24px rgba(14,17,22,.34)}
.tresmas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:var(--s16);border-top:1px solid var(--hairline);padding-top:var(--s8)}
.tresmas h3{font-size:1.0625rem;margin-bottom:var(--s2)}
.tresmas p{color:var(--acero);font-size:14.5px;line-height:1.6;font-weight:300;max-width:36ch}
@media (max-width:860px){ .duo{grid-template-columns:1fr;gap:var(--s12)} .tresmas{grid-template-columns:1fr;gap:var(--s6)} }

/* ═══════════ 08 · DIVISOR DE TRAZA ═══════════ */
.senal{position:relative;padding-block:clamp(48px,7vw,86px);overflow:hidden}
.senal__rot{text-align:center;display:block;margin-bottom:var(--s8)}
.senal__lienzo{margin-inline:calc(50% - 50vw);width:100vw}
.senal svg{width:100%;height:clamp(70px,9vw,130px);display:block;overflow:visible}
.senal path,.senal line{fill:none;vector-effect:non-scaling-stroke}
.senal__base{stroke:var(--hairline);stroke-width:1}
.senal__traza{stroke:var(--grafito);stroke-width:1.3;stroke-opacity:.72;stroke-linecap:round;stroke-linejoin:round}
.senal__idx{stroke:var(--calibra);stroke-width:1;opacity:0;transition:opacity .5s var(--ease)}
.senal__idx.on{opacity:1}

/* ═══════════ 09 · LA LECTURA ═══════════ */
.lec__cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s8) var(--s6);margin-top:var(--s16)}
.lec__c{position:relative;padding-top:var(--s4);border-top:1px solid var(--hairline-inv)}
.lec__c::before{content:"";position:absolute;left:0;top:-1px;width:0;height:1px;background:var(--acero-suave);transition:width 1.15s var(--ease) .2s}
.lec.on .lec__c::before{width:42%}
.lec__v{display:block;font-family:var(--display);font-weight:500;font-size:var(--t-dato);line-height:1;letter-spacing:-.02em;color:var(--blanco);font-variant-numeric:tabular-nums}
.lec__v .u{color:var(--acero-suave)}
.lec__l{display:block;margin-top:var(--s3);font-size:14px;line-height:1.45;color:var(--acero-suave);font-weight:300;max-width:26ch}
.lec__graf{margin-top:var(--s24)}
.lec__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s8)}
.lec__plot{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(6px,1.4vw,20px);align-items:end;height:clamp(150px,22vw,240px)}
.bar{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bar__v{width:100%;height:0;background:var(--acero);transition:height 1.25s var(--ease) var(--bd,0s)}
.bar--max .bar__v{background:var(--blanco)}
/* el único rojo de esta vista: la aguja que marca el máximo de la escala */
.lec__aguja{position:absolute;left:0;right:0;top:0;height:1px;background:var(--calibra);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease) 1.15s}
.lec__aguja::after{content:"";position:absolute;right:0;top:-8px;width:1px;height:17px;background:var(--calibra)}
.lec.on .lec__aguja{transform:scaleX(1)}
.lec.on .bar__v{height:var(--h)}
.lec__x{display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(6px,1.4vw,20px);margin-top:var(--s3);border-top:1px solid var(--hairline-inv);padding-top:10px}
.lec__x span{display:block;font-family:var(--display);font-size:10.5px;font-weight:500;letter-spacing:.04em;color:var(--acero-suave);text-transform:uppercase;line-height:1.3}
.lec__x b{display:block;font-weight:500;color:var(--blanco);font-variant-numeric:tabular-nums;letter-spacing:.02em;margin-top:3px}
.lec__x .is-max span{color:var(--blanco)}
.lec__nota{margin-top:var(--s12);max-width:78ch;padding-left:var(--s4);border-left:1px solid var(--hairline-inv)}
@media (max-width:860px){
  .lec__cifras{grid-template-columns:repeat(2,1fr);gap:var(--s8)}
  .lec__plot,.lec__x{gap:5px}
  .lec__x span{font-size:0;letter-spacing:0}
  .lec__x .is-max span{font-size:9px;letter-spacing:.03em}
  .lec__x b{font-size:10px;margin-top:0}
}

/* ═══════════ 10 · MANIFIESTO ═══════════ */
.manif{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:var(--s16);margin-top:var(--s12);align-items:start}
.manif__lado{display:flex;flex-direction:column;gap:var(--s8)}
.pulso{position:relative;height:44px;width:100%;max-width:180px}
.pulso__escala{position:absolute;inset:auto 0 0 0;height:9px;background:repeating-linear-gradient(90deg,var(--grafito) 0 1px,transparent 1px 13px);opacity:.4}
.pulso__idx{position:absolute;left:34%;bottom:0;width:1px;height:26px;background:var(--calibra);transform-origin:50% 100%;animation:calibra 4.2s var(--ease) infinite}
@keyframes calibra{0%,100%{transform:scaleY(.62)}45%{transform:scaleY(1)}}
.manif__t{font-family:var(--display);font-weight:500;font-size:var(--t-manif);line-height:1.30;letter-spacing:-.008em;max-width:26ch;text-wrap:balance}
.manif__b{margin-top:var(--s12);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s12)}
.manif__b p{font-size:var(--t-lead);line-height:1.68;color:var(--acero);font-weight:300}
.manif__cierre{margin-top:var(--s16);padding-top:var(--s8);border-top:1px solid var(--hairline);font-family:var(--display);font-weight:500;font-size:var(--t-remate);line-height:1.15;letter-spacing:-.012em;color:var(--grafito)}
.manif__firma{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s8);flex-wrap:wrap}
.manif__firma .escala{width:96px;flex:none}
.manif__firma small{font-size:var(--t-micro);line-height:1.5;color:var(--acero);font-weight:300}
@media (max-width:1080px){
  .manif{grid-template-columns:1fr;gap:var(--s8)}
  .manif__b{grid-template-columns:1fr;gap:var(--s6)}
  .manif__t{max-width:30ch}
}

/* ═══════════ 11 · CIERRE ═══════════ */
.cierre{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(84px,9vw,132px)}
.cierre__campo{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cierre__campo i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--blanco) 0 1px,transparent 1px 13px);opacity:.16;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 50%,#000 20%,transparent 78%);mask-image:radial-gradient(120% 90% at 50% 50%,#000 20%,transparent 78%)}
.cierre__idx{position:absolute;top:12%;bottom:12%;left:0;width:1px;background:var(--calibra);opacity:0}
.is-listo .cierre__idx{animation:idx-recorre 14s linear infinite}
@keyframes idx-recorre{
  0%{transform:translateX(4vw);opacity:0}
  8%{opacity:.9}
  86%{opacity:.9}
  96%,100%{transform:translateX(96vw);opacity:0}
}
.cierre__in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:var(--s16);align-items:end}
.cierre__marca{margin-bottom:var(--s8)}
.cierre h2{max-width:19ch}
.cierre__acc{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
.cierre__regla{margin-top:var(--s16)}
@media (max-width:960px){ .cierre__in{grid-template-columns:1fr;gap:var(--s12);align-items:start} }

/* ═══════════ 12 · PIE ═══════════ */
.pie{background:var(--grafito);color:var(--blanco);border-top:1px solid var(--hairline-inv);padding-block:var(--s24) var(--s12)}
.pie__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:var(--s16);align-items:start}
.pie__marca p{margin-top:var(--s4);max-width:30ch;font-size:14.5px;color:var(--acero-suave);font-weight:300;line-height:1.6}
.pie__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8)}
.pie__col h3{font-family:var(--display);font-size:var(--t-rotulo);font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--acero-suave);margin-bottom:var(--s4)}
.pie__col li{margin-bottom:10px}
.pie__col a{font-size:14.5px;color:var(--blanco);font-weight:300;transition:color .3s var(--ease)}
.pie__col a:hover{color:var(--acero-suave)}
.pie__bot{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s8);justify-content:space-between;align-items:center;margin-top:var(--s24);padding-top:var(--s6);border-top:1px solid var(--hairline-inv);font-size:13px;color:var(--acero-suave);font-weight:300}
.pie__dom{font-family:var(--display);font-weight:500;letter-spacing:.04em;color:var(--blanco)}
@media (max-width:960px){ .pie__top{grid-template-columns:1fr;gap:var(--s12)} }
@media (max-width:640px){ .pie__cols{grid-template-columns:1fr;gap:var(--s8)} }

@media (max-width:560px){ body{font-size:16px} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .rv-in{transition:none}
  .frag{opacity:1;transform:rotate(var(--rot,0deg));transition:none}
  .disp.on .frag{transform:rotate(var(--rot,0deg))}
  .disp__cierre{opacity:1;transform:none;transition:none}
  .hero__bg img{transform:none !important}
  .chrome{transform:none !important}
  .mq__track{animation:none}
  .pulso__idx{animation:none}
  .medida::after{transition:none;transform:scaleX(1)}
  .bar__v{transition:none}
  .lec__aguja{transition:none}
  .is-listo .cierre__idx{animation:none;opacity:.6;left:34%}
}