/* ── web_tipo.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   SISTEMA TIPOGRÁFICO — no basta con cambiar la familia. Lo que hace que la
   presentación nueva se reconozca es el SISTEMA: titulares enormes en caja
   alta con medida corta, secundarios que bajan la voz, kicker susurrado y
   el aire medido en vh. Eso es lo que se trae aquí.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --D:"Clash","Satoshi",sans-serif;
  --S:"Satoshi",sans-serif;
  --e3:cubic-bezier(.16,.84,.34,1);
  --eb:cubic-bezier(.34,1.46,.44,1);
  --eb2:cubic-bezier(.3,1.8,.5,1);
  --crudo:#F2EDE6;
}

/* ── 1 · TITULARES: grandes, en caja alta, cuatro renglones cortos ──
   La caja alta es el rasgo más reconocible de la presentación y no estaba.
   En mayúsculas hay que cerrar el interlineado: no hay descendentes. */
.chapter .copy h1,
.chapter .copy h2{
  font-family:var(--D);font-weight:700;letter-spacing:-.03em;line-height:.94;
  text-transform:uppercase;text-wrap:balance;
  font-size:clamp(2rem,min(9vw,8.4vh),7rem);
  max-width:15ch}
@media(max-width:820px){
  .chapter .copy h1,.chapter .copy h2{max-width:17ch;line-height:.96}
}
.align-right .copy h1,.align-right .copy h2{margin-left:auto}
.center .copy h1,.center .copy h2{margin-inline:auto}

/* los verbos de producto, mismo tratamiento a menor escala */
.product-strip h3{
  font-family:var(--D);font-weight:700;letter-spacing:-.022em;line-height:1;
  text-transform:uppercase;font-size:clamp(1.2rem,min(1.6vw + .8rem,3.2vh),2.1rem)}

/* las tres frases de la pérdida son titulares, no párrafos */
.scene-lines .lit{
  font-family:var(--D);font-weight:700;letter-spacing:-.022em;line-height:1;
  text-transform:uppercase;font-size:clamp(1.3rem,min(5.6vw,4.6vh),2.9rem);
  max-width:17ch}
.scene-lines span:not(.lit){font-weight:300}

/* ── 2 · KICKER: susurrado, no dorado. El acento se guarda para el valor ── */
.kicker,
.sig-beat .beat-source{
  font-family:var(--S);font-size:.55rem;font-weight:600;letter-spacing:.4em;
  text-transform:uppercase;color:#F2EDE66e;text-shadow:none}
.copy .kicker,
.sig-beat .beat-source{margin-bottom:3vh}
.sig-beat .beat-source:after{
  background:linear-gradient(90deg,transparent,#F2EDE640,transparent);
  width:44px;margin-top:14px}
@media(max-width:650px){
  .kicker,.sig-beat .beat-source{font-size:.52rem;letter-spacing:.36em}
}

/* ── 3 · EL SECUNDARIO BAJA LA VOZ ──
   En la web el .lead llegaba a 28px contra un titular de 63: 2,2 a 1. En la
   presentación el contraste es 5,7 a 1. Ahí está media diferencia. */
.copy .lead{
  font-family:var(--S);font-size:clamp(1rem,.9rem + .55vw,1.22rem)!important;
  font-weight:400;line-height:1.55;margin-top:3.2vh;max-width:34ch;
  color:#F2EDE6ad;letter-spacing:-.004em}
@media(max-width:650px){
  .copy .lead{font-size:1rem!important;max-width:31ch}
}
.center .copy .lead{margin-inline:auto}
.align-right .copy .lead{margin-left:auto}

.pilot-note,.sistema-learn,.final-note,.prod-sub,.row-sub{
  font-family:var(--S);font-weight:400;color:#F2EDE68c;
  font-size:clamp(.82rem,.78rem + .2vw,.92rem);line-height:1.7;max-width:40ch}
.pilot-note,.sistema-learn,.final-note{margin-top:2.6vh}
.center .pilot-note,.center .final-note,.center .sistema-learn{margin-inline:auto}
.row-sub{margin-top:1vh!important;opacity:.82}

/* ── 4 · PESO: la web dejaba caer todo lo display al 300 heredado ── */
.beat-quote{font-family:var(--D);font-weight:500;letter-spacing:-.015em;line-height:1.12}
.difference-row span,.cc-body{font-weight:600}
.tagline{font-family:var(--D);font-weight:700;text-transform:uppercase;letter-spacing:-.02em}
.orbit-core b,.mb-head,.cc-head,.prod-tag{font-family:var(--S)}
.product-strip article small{font-family:var(--S);font-weight:700;letter-spacing:.3em}

/* ── 5 · AIRE en vh: escala con la pantalla, como en la presentación ── */
.product-strip,.product-strip.two,.difference-grid,.orbit{margin-top:3.4vh}
.cta-strong{margin-top:3.4vh}
.tagline{margin-top:3vh}
.coach-card{margin-top:3vh}


/* ── web_formato.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   DISPOSITIVOS DE FORMATO — lo que encuadra la presentación nueva y aquí
   no existía: cotas de escena, palabra gigante de fondo, escalera numerada,
   comparativa a pelo y láminas elevadas. Ni una palabra de copy nueva:
   las cotas salen de un contador CSS y la palabra gigante del propio kicker.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── COTA DE ESCENA · A—00 en la esquina, como en la presentación ── */
main{counter-reset:cap -1}
.chapter{counter-increment:cap}
.frame::before{
  content:"A—" counter(cap,decimal-leading-zero);
  position:absolute;top:clamp(56px,7vh,78px);left:7vw;z-index:3;
  font-family:var(--S);font-size:.5rem;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:#F2EDE642;pointer-events:none}
@media(max-width:650px){.frame::before{left:20px;top:clamp(54px,6.6vh,70px)}}


/* ── ESCALERA NUMERADA · los tres hitos del piloto ── */
.pilot-metric{
  display:grid;width:fit-content;margin:3.4vh auto 0;padding:0;border:0;
  gap:clamp(6px,1.4vh,16px);justify-items:start;text-align:left;
  counter-reset:hito;letter-spacing:normal;text-transform:none;font-size:inherit}
.pilot-metric>i{display:none}
.pilot-metric>span{
  counter-increment:hito;position:relative;padding-left:3.4em;
  font-family:var(--D);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.04;color:var(--crudo);
  font-size:clamp(1.25rem,.9rem + 2.4vw,3.2rem)}
.pilot-metric>span::before{
  content:"0" counter(hito);position:absolute;left:0;top:.42em;
  font-family:var(--S);font-size:.46rem;font-weight:700;letter-spacing:.3em;
  color:#F2EDE659;text-transform:uppercase}

/* ── COMPARATIVA A PELO · fuera la caja, filete y rejilla editorial ── */
.difference-grid,.chapter.active .difference-grid{
  background:transparent;border:0;gap:0;max-width:min(920px,94vw)}
.difference-row,.chapter.active .difference-row{
  background:transparent;border-top:1px solid #F2EDE61f;box-shadow:none;
  padding:2.2vh 0}
.difference-row>b{
  font-family:var(--S);font-size:.52rem;font-weight:600;letter-spacing:.36em;
  text-transform:uppercase;color:#F2EDE666}
.difference-row span{
  font-family:var(--D);font-weight:600;letter-spacing:-.018em;line-height:1.1;
  font-size:clamp(1.2rem,.95rem + 1.5vw,2.1rem);color:var(--crudo)}
.difference-row.veta,.chapter.active .difference-row.veta{
  border-top-color:var(--acc,#E2C067);box-shadow:none}
.difference-row.veta>b{color:var(--acc,#E2C067)}

/* ── LÁMINAS ELEVADAS · el aviso y los resúmenes, como las tarjetas ── */
.coach-card,.mini-brief,
.chapter.active .coach-card,.chapter.active .mini-brief{
  position:relative;border:1px solid #F2EDE61a;border-left-width:1px;
  border-radius:2px;background:#0A0906;box-shadow:0 30px 70px #000000a6;
  padding:clamp(26px,3.4vh,36px) clamp(16px,3vw,24px) clamp(14px,2vh,18px)}
.cc-head,.mb-head{
  position:absolute;top:clamp(13px,1.8vh,17px);left:clamp(18px,3.4vw,26px);
  font-size:.46rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:#F2EDE659;margin:0;padding:0;border:0}
.cc-body{
  font-family:var(--D);font-weight:600;letter-spacing:-.015em;line-height:1.2;
  font-size:clamp(1.05rem,.9rem + .9vw,1.6rem);color:var(--crudo);
  padding:0;border:0;background:none}
.cc-fix,.mb-foot{
  font-family:var(--S);font-size:.78rem;line-height:1.6;color:#F2EDE68c;
  margin-top:2.2vh;padding-top:1.8vh;border-top:1px solid #F2EDE614}
.mb-row{
  font-family:var(--S);font-size:.82rem;line-height:1.5;color:#F2EDE6c4;
  padding:1.5vh 0;border-bottom:1px solid #F2EDE60f}
.mb-row:last-of-type{border-bottom:0}

/* ── FICHAS DE PRODUCTO · sin caja dorada, aire y filete ── */
.product-strip article,.chapter.active .product-strip article{
  background:transparent;box-shadow:none;border:0;border-top:1px solid #F2EDE61f;
  padding-top:2.4vh}

/* ── LAS DOS ESCENAS DENSAS ──
   El .frame es 100svh con overflow:hidden: hay presupuesto fijo. "El sistema"
   y "Producto" llevan diagrama + ejemplos + lámina, así que ahí se aprieta lo
   accesorio (nunca el copy) para que no se recorte nada. */
.chapter:has(.orbit) .copy h2,
.chapter.prod .copy h2{font-size:clamp(1.7rem,min(6.6vw,5.8vh),3.6rem)}
.chapter:has(.orbit) .orbit{margin-top:2.2vh;width:min(58vw,300px);height:auto;aspect-ratio:1}
.chapter:has(.orbit) .sistema-learn{margin-top:1.8vh}
.chapter:has(.orbit) .coach-card{margin-top:2vh}
.chapter:has(.orbit) .coach-card,
.chapter.prod .mini-brief{padding:clamp(22px,3vh,30px) clamp(15px,2.6vw,22px) clamp(12px,1.7vh,16px)}
.chapter.prod .product-strip{margin-top:2.2vh;gap:clamp(14px,2.6vh,28px)}
.chapter.prod .product-strip article{padding-top:1.8vh}
.chapter.prod .mini-brief .mb-row{padding:1vh 0}
@media(min-width:1100px){
  .chapter.prod .product-strip.two{grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,52px)}
}

/* la escalera del piloto: grande, pero dentro del presupuesto de la escena */
.pilot-metric>span{font-size:clamp(1.15rem,min(2.2vw + .5rem,4.4vh),2.3rem)}
.pilot-metric>span::before{top:.5em}

/* Producto en móvil: el sitio ya comprime esta escena; hay que respetarlo */
@media(max-width:650px){
  .chapter.prod .product-strip{margin-top:1.8vh;gap:1.6vh}
  .chapter.prod .product-strip article{padding-top:1.2vh}
  .chapter.prod .product-strip h3{font-size:1.25rem}
  .chapter.prod .mini-brief{padding:19px 13px 11px;margin-top:1vh}
  .chapter.prod .mini-brief .mb-row{padding:.5vh 0;font-size:.7rem}
  .chapter.prod .mb-head{font-size:.42rem;top:8px;left:13px}
  .chapter.prod .mb-foot{margin-top:1vh;padding-top:.9vh;font-size:.68rem}
}
/* y en escritorio, donde van a dos columnas, lo que sobra es la lámina */
@media(min-width:1100px){
  .chapter.prod .mini-brief{padding:24px 20px 14px;margin-top:1.6vh}
  .chapter.prod .mini-brief .mb-row{padding:.9vh 0}
}

/* último ajuste de Producto y Sistema: entra entero sin recortar copy */
.chapter.prod .copy h2{font-size:clamp(1.5rem,min(5.8vw,4.8vh),2.9rem);max-width:18ch}
.chapter:has(.orbit) .copy h2{max-width:17ch}
.chapter.prod .product-strip article>p:not(.prod-tag):not(.prod-sub){
  line-height:1.5;margin-top:1.2vh}
.chapter.prod .prod-tag{margin-top:.6vh}
@media(max-width:650px){
  .chapter.prod .copy h2{font-size:1.45rem}
  .chapter.prod .product-strip article>p:not(.prod-tag):not(.prod-sub){font-size:.74rem}
  .chapter.prod .mini-brief{padding:17px 12px 10px}
}
@media(min-width:1100px){
  .chapter.prod .mini-brief{padding:20px 18px 12px}
  .chapter:has(.orbit) .orbit{width:min(30vw,256px)}
}

/* pantallas de escritorio bajas (1440×900): los últimos 20px */
@media(min-width:1100px) and (max-height:960px){
  .chapter:has(.orbit) .copy h2,.chapter.prod .copy h2{font-size:clamp(1.5rem,4.4vh,2.5rem)}
  .chapter:has(.orbit) .orbit{width:min(26vw,226px)}
  .chapter.prod .mini-brief .mb-row{padding:.7vh 0}
  .copy .kicker{margin-bottom:2.2vh}
  .copy .lead{margin-top:2.4vh}
  .pilot-note,.sistema-learn,.final-note{margin-top:2vh}
  .product-strip,.product-strip.two,.difference-grid,.orbit{margin-top:2.4vh}
  .difference-row,.chapter.active .difference-row{padding:1.7vh 0}
  .pilot-metric{margin-top:2.4vh}
  .chapter:has(.orbit) .coach-card{margin-top:1.5vh}
}

/* ═══════════════════════════════════════════════════════════════════════
   ESCALERA — la composición más reconocible de la presentación: tres frases
   que bajan escalonándose, cada una con su cota numerada encima. En la web
   son las tres líneas de "La pérdida invisible" (.scene-lines .lit).
   ═══════════════════════════════════════════════════════════════════════ */
.scene-lines{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(6px,1.4vh,18px);counter-reset:paso;margin-top:.6vh}
.scene-lines .lit{position:relative;display:block;counter-increment:paso;
  padding-top:1.55em}
.scene-lines .lit::before{
  content:"0" counter(paso) "0";position:absolute;left:0;top:0;
  font-family:var(--S);font-size:.5rem;font-weight:600;letter-spacing:.36em;
  text-transform:uppercase;color:#F2EDE657}
.scene-lines{align-items:flex-end}
.scene-lines .lit{text-align:right}
.scene-lines .lit::before{left:auto;right:0}
.scene-lines .lit:nth-child(2){margin-right:9%}
.scene-lines .lit:nth-child(3){margin-right:18%}
@media(min-width:820px){
  .scene-lines .lit:nth-child(2){margin-right:13%}
  .scene-lines .lit:nth-child(3){margin-right:26%}
}
/* si alguna escena va alineada a la izquierda, la escalera baja al revés */
.frame:not(.align-right):not(.center) .scene-lines{align-items:flex-start}
.frame:not(.align-right):not(.center) .scene-lines .lit{text-align:left}
.frame:not(.align-right):not(.center) .scene-lines .lit::before{left:0;right:auto}
.frame:not(.align-right):not(.center) .scene-lines .lit:nth-child(2){margin:0 0 0 9%}
.frame:not(.align-right):not(.center) .scene-lines .lit:nth-child(3){margin:0 0 0 18%}
/* la última es la que cierra: se lleva el acento */
.scene-lines .lit:last-child{color:var(--acc,#E2C067)}
.scene-lines .lit:last-child::before{color:var(--acc,#E2C067);opacity:.7}

/* ── COMPARATIVA a dos columnas en escritorio, como .cmp de la presentación ── */
@media(min-width:820px){
  .difference-row,.chapter.active .difference-row{
    display:grid;grid-template-columns:1.1fr 2fr;gap:4vw;align-items:baseline}
}

/* ── TITULAR PARTIDO: mitad a la izquierda, mitad a la derecha ── */
.copy h2.partido .hl{display:block;text-align:left}
.copy h2.partido .hr{display:block;text-align:right;margin-top:.06em}
.copy h2.partido{max-width:min(17ch,94%)}
@media(min-width:820px){.copy h2.partido{max-width:min(15ch,88%)}}
.align-right .copy h2.partido{margin-left:auto}
.center .copy h2.partido{margin-inline:auto}

/* ── ESCALERA DE CIFRAS: el número al lado y grande, como .st.big ── */
.pilot-metric>span{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;
  gap:clamp(10px,2vw,18px);padding-left:0}
.pilot-metric>span::before{
  position:static;content:"0" counter(hito);
  font-family:var(--D);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.6rem,min(7vw,5vh),3.4rem);color:var(--acc,#E2C067);opacity:.55}

/* ── ESCALERA DE TRACKING: cuanto más grande, más cerrado ── */
.chapter .copy h1,.chapter .copy h2{letter-spacing:-.03em}
.product-strip h3,.scene-lines .lit{letter-spacing:-.022em}
.tagline{letter-spacing:-.028em}
/* micro-rótulos: un solo canon */
.prod-tag,.cc-head,.mini-brief .mb-head,.product-strip article small,
.orbit-node span,.oc-ej span i{
  font-family:var(--S);font-weight:600;letter-spacing:.34em;text-transform:uppercase}

/* ═══════════════════════════════════════════════════════════════════════
   TITULAR PARTIDO — la figura de la presentación: la primera mitad pegada a
   la izquierda y la segunda a la derecha, con un pequeño desfase vertical.
   ═══════════════════════════════════════════════════════════════════════ */
.chapter .copy h2 .hl{display:block;text-align:left}
.chapter .copy h2 .hr{display:block;text-align:right;margin-top:.06em}
.chapter .copy h2:has(.hl){max-width:none;width:100%}
@media(min-width:820px){
  .chapter .copy h2:has(.hl){max-width:min(920px,86vw)}
}

/* ── ESCALERA DE CIFRAS · el piloto, con el número al lado y grande ── */
.pilot-metric>span{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;
  gap:clamp(10px,2.2vw,18px);padding-left:0}
.pilot-metric>span::before{
  position:static;font-family:var(--D);font-weight:700;
  font-size:clamp(1.3rem,min(6.4vw,4.4vh),2.6rem);letter-spacing:-.02em;
  color:var(--acc,#E2C067);opacity:.85;text-transform:none}

/* ── CANON DE MICRO-RÓTULO · un solo tratamiento para todos los rotulillos ── */
.prod-tag,.mb-head,.cc-head,.oc-ej span i,
.difference-row>b,.product-strip article small{
  font-family:var(--S)!important;font-weight:600!important;
  letter-spacing:.36em!important;text-transform:uppercase!important}
.prod-tag,.orbit-node span,.oc-ej span i{font-size:.5rem!important}
.mb-head,.cc-head{font-size:.46rem!important}

/* ── PALABRA GIGANTE DE FONDO ── */
.giant{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) translateX(var(--gx,0px));
  font-family:var(--D);font-weight:700;letter-spacing:-.05em;line-height:1;
  font-size:clamp(6rem,30vw,22rem);text-transform:uppercase;white-space:nowrap;
  color:#F2EDE60c;pointer-events:none;user-select:none;z-index:0;
  will-change:auto}
@media(max-width:650px){.giant{font-size:clamp(5rem,34vw,14rem)}}

/* El sistema es la escena más densa: el ejemplo y el aviso se aprietan */
.chapter:has(.orbit) .sistema-learn{margin-top:1.4vh}
.chapter:has(.orbit) .coach-card{margin-top:1.6vh}
@media(min-width:1100px) and (max-height:960px){
  .chapter:has(.orbit) .oc-ej{min-height:4.2em;font-size:.78rem}
}

/* ── PRODUCTO: una capa menos. Era demasiada información para una escena ── */
.chapter.prod .prod-sub{display:none!important}
.chapter.prod .mb-foot{display:none!important}
.chapter.prod .mini-brief .mb-row:nth-child(n+4){display:none}

/* ── LAS ÚLTIMAS ESCENAS, con la tipografía nueva ── */
.tagline,.final-note,.vortex-copy .mark,.cta-strong,.recommend{
  font-family:var(--S)}
.tagline{font-family:var(--D)!important;font-weight:700!important;
  text-transform:uppercase!important;letter-spacing:-.025em!important;
  line-height:.98!important;font-size:clamp(1.8rem,min(8vw,7vh),4.6rem)!important;
  max-width:15ch;margin-inline:auto}
.vortex-copy .mark{font-family:var(--D)!important;font-weight:700!important;
  text-transform:uppercase!important;letter-spacing:-.02em!important}
.final-note{font-family:var(--S)!important;font-weight:400!important;
  font-size:clamp(.82rem,.78rem + .2vw,.92rem)!important;color:#F2EDE68c!important}
.chapter.final .copy h2{font-size:clamp(2rem,min(9vw,8vh),6rem)}

/* ── LAS LETRAS GIGANTES, EN MOVIMIENTO ── */
.giant{animation:none}
@keyframes deriva-gigante{
  from{letter-spacing:-.05em;opacity:.55}
  to{letter-spacing:-.028em;opacity:1}}
@media(prefers-reduced-motion:reduce){.giant{animation:none}}

/* ── EL PILOTO: los hitos en diagonal, como la escalera de la presentación ── */
.pilot-metric{justify-items:start!important;margin-inline:auto!important;
  width:fit-content!important;max-width:94%!important}
.pilot-metric>span{white-space:nowrap}
.pilot-metric>span:nth-of-type(2){margin-left:7%}
.pilot-metric>span:nth-of-type(3){margin-left:14%}
@media(min-width:820px){
  .pilot-metric>span:nth-of-type(2){margin-left:15%}
  .pilot-metric>span:nth-of-type(3){margin-left:30%}
}
.pilot-metric>span{font-size:clamp(.82rem,min(3.7vw,3vh),1.75rem)}

/* ── LETRAS GIGANTES: cruzan de izquierda a derecha ── */
.giant{animation:none!important}

/* el titular del sistema deja sitio a la cota 01 del aro */
.chapter:has(.orbit) .copy h2{font-size:clamp(1.5rem,min(6vw,5.2vh),3.2rem)}


/* ── web_motion.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   CAPA DE MOVIMIENTO — el catálogo de efectos de las presentaciones
   nuevas, aplicado sobre la web. Cada pieza entra con el suyo y se retira
   cuando ya se ha leído, para que solo esté encendido lo que se mira.
   ═══════════════════════════════════════════════════════════════════════ */
[data-mx]{will-change:opacity,transform,filter}
/* una vez dentro, se suelta la capa: si no, la costura del compositor dibuja
   un rectángulo del tamaño del bloque sobre el fondo de la película */
[data-mx].mx-hecho{will-change:auto}
[data-mx].mx-hecho .mw{overflow:visible}
[data-mx].mx-hecho .mi{transition:none;transform:none;opacity:1}

/* rise · sube y enfoca */
[data-mx="rise"]{opacity:0;transform:translateY(26px);filter:blur(7px);
  transition:opacity .62s var(--e3),transform .62s var(--e3),filter .62s var(--e3)}
[data-mx="rise"].mx-in{opacity:1;transform:none;filter:blur(0)}

/* cover · el tracking se cierra sobre la palabra */
[data-mx="cover"]{opacity:0;filter:blur(6px);
  letter-spacing:calc(var(--ls0,.4em) + .34em);
  transition:opacity 1.15s var(--e3),letter-spacing 1.15s var(--e3),filter 1.15s var(--e3)}
[data-mx="cover"].mx-in{opacity:1;filter:blur(0);letter-spacing:var(--ls0,.4em)}
.kicker{--ls0:.4em}.prod-tag{--ls0:.28em}

/* words · cada palabra sube desde su propia máscara */
[data-mx="words"] .mw{overflow:hidden;display:inline-block;vertical-align:bottom;
  padding:0 .05em .18em 0;margin:0 -.05em -.18em 0}
[data-mx="words"] .mi{display:inline-block;transform:translateY(118%);opacity:0;
  transition:transform .82s var(--e3),opacity .45s ease;
  transition-delay:calc(var(--i,0) * 26ms)}
[data-mx="words"].mx-in .mi{transform:none;opacity:1}

/* mask · cortina lateral */
[data-mx="mask"]{clip-path:inset(0 100% 0 0);transform:translateX(9px);
  transition:clip-path .9s var(--e3),transform .9s var(--e3)}
[data-mx="mask"].mx-in{clip-path:inset(0 0 0 0);transform:none}

/* curtain · se despliega hacia abajo */
[data-mx="curtain"]{clip-path:inset(0 0 100% 0);opacity:0;filter:blur(5px);
  transition:clip-path 1s var(--e3),opacity .7s ease,filter .7s ease}
[data-mx="curtain"].mx-in{clip-path:inset(0 0 0 0);opacity:1;filter:blur(0)}

/* spring · entra con rebote */
[data-mx="spring"]{opacity:0;transform:scale(.86);
  transition:opacity .5s ease,transform .95s var(--eb)}
[data-mx="spring"].mx-in{opacity:1;transform:none}

/* foco · lo ya leído se retira sin desaparecer */
[data-mx].mx-dim{opacity:.52;filter:blur(0);
  transition:opacity .7s var(--e3),transform .7s var(--e3),filter .7s var(--e3)}
[data-mx="rise"].mx-dim,[data-mx="spring"].mx-dim{transform:scale(.965)}
[data-mx="words"].mx-dim .mi{opacity:.52;transition:opacity .7s var(--e3)}
[data-mx="mask"].mx-dim,[data-mx="curtain"].mx-dim{clip-path:inset(0 0 0 0)}

/* ── ATMÓSFERA: campos de luz que derivan, con temperatura por capítulo ── */
.amb{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.amb i{position:absolute;inset:-30%;display:block;
  background:radial-gradient(40% 34% at var(--p1,22% 26%),var(--c1),transparent 70%),
             radial-gradient(36% 30% at var(--p2,80% 72%),var(--c2),transparent 72%);
  animation:mderiva var(--t,46s) ease-in-out var(--dl,0s) infinite alternate}
.amb i:nth-child(2){animation-name:mderiva2}
.amb.calida i{--c1:#E2C0672b;--c2:#C9A24B1c}
.amb.fria i{--c1:#7E9BC424;--c2:#5D7FA618}
.amb.neutra i{--c1:#F5F2EA14;--c2:#E2C06714}
@keyframes mderiva{from{transform:translate3d(-2%,-1%,0) scale(1.04)}
  to{transform:translate3d(2%,2%,0) scale(1.13)}}
@keyframes mderiva2{from{transform:translate3d(2%,1%,0) scale(1.09)}
  to{transform:translate3d(-2%,-2%,0) scale(1.02)}}
/* OJO: .frame del sitio es position:sticky;top:0 — es lo que mantiene el texto
   pegado a la pantalla mientras el capítulo de 320svh pasa por detrás. Aquí solo
   se toca el z-index: darle position:relative lo desancla y el copy se va. */
.chapter{position:relative}
.chapter>.frame{z-index:2}
/* La atmósfera y las burbujas viven DENTRO del .frame: así heredan su pin,
   las recorta su overflow y no aportan ni un píxel de flujo. Colgadas del
   capítulo se salían de él y aparecían en la escena siguiente. */
.chapter>.frame>.amb,.chapter>.frame>.burbujas{
  position:absolute;inset:0;height:auto;margin:0}

/* ── PARALAJE: sobre la copia, nunca sobre .frame (rompería el sticky) ── */
.chapter .copy{--px:0px}

/* ── CORTINA entre capítulos: siete listones que se retiran ── */
.telon{position:absolute;inset:0;z-index:6;pointer-events:none;display:flex;
  flex-direction:column}
.telon i{flex:1 1 0;display:block;background:var(--tb,#050505);
  transform:translateX(0);
  transition:transform .9s cubic-bezier(.76,0,.24,1) var(--td,0s)}
.chapter.abierto .telon i{transform:translateX(-101%)}
.chapter.abierto .telon{transition:visibility 0s 1.4s;visibility:hidden}

@media(prefers-reduced-motion:reduce){
  [data-mx],[data-mx] .mi{opacity:1!important;transform:none!important;
    filter:none!important;clip-path:none!important;transition:none!important}
  [data-mx].mx-dim{opacity:1!important}
  .amb i,.burbujas{animation:none;display:none}
  .telon{display:none}

}

/* ── MOVIMIENTO EN LA INTRO ──
   El sitio enciende cada beat escribiendo su opacidad. Yo leo esa opacidad y
   disparo la subida palabra a palabra desde su máscara: se suma a su film en
   vez de pelearse con él. */
.beat-quote .mw,.chapter.beats .copy h2 .mw{
  overflow:hidden;display:inline-block;vertical-align:bottom;
  padding:0 .05em .2em 0;margin:0 -.05em -.2em 0}
.beat-quote .mi,.chapter.beats .copy h2 .mi{
  display:inline-block;transform:translateY(115%);opacity:0;
  transition:transform .8s var(--e3),opacity .42s ease;
  transition-delay:calc(var(--i,0) * 42ms)}
.beat-quote.viva .mi,.chapter.beats .copy h2.viva .mi{transform:none;opacity:1}
/* la fuente del beat entra con el tracking cerrándose, como los kickers */
.sig-beat .beat-source{transition:letter-spacing .9s var(--e3),opacity .6s ease}
.sig-beat .beat-source:after{transition:width .9s var(--e3) .25s}

/* ── MÁS MOTION EN EL RESTO ── */
.mb-row,.oc-ej span,.difference-row{--i:0}
.mini-brief.mx-in .mb-row{animation:filaEntra .7s var(--e3) both}
.mini-brief.mx-in .mb-row:nth-child(2){animation-delay:.1s}
.mini-brief.mx-in .mb-row:nth-child(3){animation-delay:.2s}
.mini-brief.mx-in .mb-row:nth-child(4){animation-delay:.3s}
@keyframes filaEntra{
  from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(8px)}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
/* las frases destacadas del sitio (.hl) se encienden con retardo propio */
.lead .hl,.pilot-note .hl,.sistema-learn .hl{
  color:var(--crudo);font-weight:600;
  background-image:linear-gradient(90deg,var(--acc,#E2C067)00,var(--acc,#E2C067)2e);
  background-repeat:no-repeat;background-size:0% 100%;background-position:0 0;
  animation:subraya 1.1s var(--e3) var(--hd,0s) both}
@keyframes subraya{from{background-size:0% 100%}to{background-size:100% 100%}}
@media(prefers-reduced-motion:reduce){
  .beat-quote .mi,.chapter.beats .copy h2 .mi{opacity:1!important;transform:none!important}
  .mini-brief.mx-in .mb-row,.lead .hl{animation:none}
}


/* ── web_sinmarcos.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   NADA DE MARCOS — regla de la casa. Ninguna caja con borde alrededor del
   contenido. Donde hacía falta separar, un filete; donde hacía falta
   destacar, peso, aire o una superficie llena. Nunca un recuadro.
   ═══════════════════════════════════════════════════════════════════════ */

/* láminas: superficie y sombra, sin contorno */
.coach-card,.mini-brief,
.chapter.active .coach-card,.chapter.active .mini-brief{
  border:0!important;border-left:0!important;border-radius:0!important;
  background:#0A0906;box-shadow:0 30px 70px #000000a6}
/* un solo filete superior marca dónde empieza la lámina */
.coach-card::after,.mini-brief::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--acc,#E2C067)8c,transparent 62%)}

/* la tira de producto y sus fichas: sin caja */
.product-strip,.chapter.active .product-strip,
.product-strip.two,.chapter.active .product-strip.two{
  border:0!important;background:transparent!important;box-shadow:none!important;
  border-radius:0!important}
.product-strip article,.chapter.active .product-strip article{
  border:0!important;border-top:1px solid #F2EDE61f!important;
  background:transparent!important;box-shadow:none!important;border-radius:0!important}

/* comparativa: filete, nunca rejilla encajonada */
.difference-grid,.chapter.active .difference-grid,
.difference-row,.chapter.active .difference-row{
  border-radius:0!important;box-shadow:none!important}
.difference-row,.chapter.active .difference-row{
  border:0!important;border-top:1px solid #F2EDE61f!important;background:transparent!important}
.difference-row.veta,.chapter.active .difference-row.veta{
  border-top:1px solid var(--acc,#E2C067)!important}

/* burbujas de la intro: masa translúcida, sin contorno */
.burbujas .bb{border:0!important}
.burbujas .bb.hot{border:0!important}

/* llamada a la acción: superficie llena, no un óvalo dibujado */
.cta-strong,.cta-link{
  border:0!important;background:var(--acc,#E2C067);color:#0A0806!important;
  border-radius:2px;padding:1.05rem 1.9rem;
  font-family:var(--S);font-size:.6rem;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;box-shadow:none;
  transition:background .35s ease,box-shadow .35s ease}
.cta-strong:hover,.cta-link:hover{
  background:#F7E3A8;box-shadow:0 0 40px #E2C06759}

/* el botón de sonido: disco sólido discreto */
.audio-toggle{
  border:0!important;background:#F2EDE614!important;
  backdrop-filter:blur(6px);border-radius:999px}
.audio-toggle:hover{background:#F2EDE626!important}

/* por si queda algo con contorno en las escenas */
.chapter .copy [style*="border"],
.mb-row{border-radius:0}

/* La película se deja EN PAZ: es el fondo original de getveta con sus
   destellos de bronce, y es quien dibuja la V. Bajarla de opacidad y
   desenfocarla fue un error mío — tapaba la marca. */


/* ── web_aro.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   EL ARO — clonado de la presentación, tramo a tramo.
   ═══════════════════════════════════════════════════════════════════════ */
.orbit.aro-nuevo{width:auto!important;height:auto!important;aspect-ratio:auto!important;
  margin:5vh auto 0!important;position:relative;display:block}
.cyc-dia{position:relative;width:min(min(62vw,38vh),282px);aspect-ratio:1;
  margin:0 auto;--R:min(min(24vw,15vh),110px)}
@media(min-width:820px){
  .cyc-dia{width:min(min(21vw,32vh),262px);--R:min(8.4vw,104px)}
}
.cyc-dia svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cyc-dia .arc{fill:none;stroke:#F2EDE61f;stroke-width:2.4;stroke-linecap:round;
  transition:stroke .55s ease,stroke-width .55s ease,opacity .55s ease}
.cyc-dia .arc.dn{stroke:var(--acc,#E2C067);opacity:.32;stroke-width:3}
.cyc-dia .arc.on{stroke:var(--acc,#E2C067);opacity:1;stroke-width:7;
  filter:drop-shadow(0 0 8px #E2C06799)}
.cyc-dia .dots circle{fill:#F2EDE64d;transition:fill .55s ease}
.cyc-dia .dots circle.on{fill:var(--acc,#E2C067)}
.cyc-dia .chev path{fill:none;stroke:#F2EDE659;stroke-width:1.3;opacity:.55;
  stroke-linecap:round;stroke-linejoin:round}
/* cada fase: número encima, nombre debajo, siempre horizontal */
.cyc-dia .ph{position:absolute;left:var(--x);top:var(--y);display:flex;
  flex-direction:column;align-items:center;gap:.5em;white-space:nowrap;
  font:600 .54rem/1 var(--S);letter-spacing:.24em;text-transform:uppercase;
  color:#F2EDE67a;transition:color .5s ease}
.cyc-dia .ph i{font:700 .46rem/1 var(--S);font-style:normal;letter-spacing:.2em;
  opacity:.6;transition:opacity .5s ease}
.cyc-dia .ph::after{content:attr(data-l)}
.cyc-dia .ph.p-up{transform:translate(-50%,-124%)}
.cyc-dia .ph.p-dw{transform:translate(-50%,12%)}
.cyc-dia .ph.p-rt{transform:translate(11px,-50%);align-items:flex-start}
.cyc-dia .ph.p-lf{transform:translate(calc(-100% - 11px),-50%);align-items:flex-end}
.cyc-dia .ph.on{color:var(--acc,#E2C067)}
.cyc-dia .ph.on i{opacity:1}
/* el centro cuenta en qué fase va el sistema */
.cyc-dia .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;width:54%;display:flex;flex-direction:column;
  align-items:center;gap:.5em}
.cyc-dia .core i{font:600 .44rem/1 var(--S);font-style:normal;letter-spacing:.3em;
  text-transform:uppercase;color:var(--acc,#E2C067);opacity:.85}
.cyc-dia .core b{font:500 clamp(1.15rem,4.6vw,1.7rem)/1 var(--D);letter-spacing:-.02em;
  color:var(--crudo);text-transform:none}
.cyc-dia .core u{font:500 .42rem/1 var(--S);letter-spacing:.26em;text-transform:uppercase;
  color:#F2EDE666;text-decoration:none}
/* el ejemplo de la fase, fuera del aro y con aire */
.cyc-ej{font-family:var(--S);font-weight:400;font-size:clamp(.84rem,.8rem + .25vw,.98rem);
  line-height:1.6;color:#F2EDE6a3;max-width:36ch;margin:4.5vh auto 0;text-align:center;
  min-height:4.8em;transition:opacity .4s ease}

/* ── EL SISTEMA EN DOS TIEMPOS ──
   No respiraba porque metía el diagrama, el ejemplo, el aprendizaje y el
   aviso en una sola pantalla. El capítulo se hace el doble de alto: primero
   el ciclo con sus cinco fases, y después el aviso. Cada cosa con su aire. */
.chapter:has(.orbit){min-height:205svh}
/* el segundo tiempo se superpone: si ocupara sitio en el flujo, el marco de
   100svh se desbordaría y recortaría copy */
.chapter:has(.orbit) .copy{position:relative}
.chapter:has(.orbit) .acto-b{
  position:absolute;left:0;right:0;top:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100%;
  opacity:0;transform:translateY(26px);filter:blur(6px);pointer-events:none;
  transition:opacity .7s var(--e3),transform .7s var(--e3),filter .7s var(--e3)}
.chapter:has(.orbit).acto2 .acto-b{opacity:1;transform:none;filter:blur(0);pointer-events:auto}
.chapter:has(.orbit) .acto-a{transition:opacity .7s var(--e3),transform .7s var(--e3),filter .7s var(--e3)}
.chapter:has(.orbit).acto2 .acto-a{opacity:0;transform:translateY(-22px);filter:blur(6px)}
.chapter:has(.orbit) .sistema-learn{margin-top:0}
.chapter:has(.orbit) .coach-card{margin-top:4vh}
@media(prefers-reduced-motion:reduce){
  .chapter:has(.orbit){min-height:0}
  .chapter:has(.orbit) .acto-b{position:static;opacity:1;transform:none;filter:none}
  .chapter:has(.orbit) .acto-a{opacity:1;transform:none;filter:none}
}


/* ── web_destellos.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   DESTELLOS Y BARRIDO — los dos efectos de la presentación que faltaban:
   chispas que ascienden con estela por las escenas, y el barrido de luz que
   cruza el cierre iluminando el techo de la escena al rebotar.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── BARRIDO DEL CIERRE: la luz cruza y enciende el techo de la escena ── */
.chapter.final>.frame{overflow:hidden}
.barrido{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.barrido::before{content:"";position:absolute;top:-30%;left:-60%;width:46%;height:160%;
  transform:rotate(14deg);
  background:linear-gradient(90deg,transparent 0%,#F2EDE61a 42%,#F2EDE62e 52%,transparent 100%);
  animation:barre 7.5s cubic-bezier(.5,0,.3,1) 1.1s infinite}
@keyframes barre{0%{left:-60%}55%,100%{left:130%}}
/* el techo se enciende cuando pasa el barrido */
.barrido::after{content:"";position:absolute;left:0;right:0;top:0;height:34%;
  background:linear-gradient(to bottom,var(--acc,#E2C067)1f,transparent 100%);
  opacity:0;animation:techo 7.5s cubic-bezier(.5,0,.3,1) 1.1s infinite}
@keyframes techo{0%,28%{opacity:0}44%{opacity:1}62%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.barrido{display:none}}


/* ── web_cierre.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   CIERRE — la marca manda. «Value Activated» era más grande y más pesado
   que el lockup: eso no puede ser. En la presentación el lockup ocupa
   min(340px,72vw) y el claim va discreto. Se invierte la jerarquía.
   ═══════════════════════════════════════════════════════════════════════ */
.final-mark{width:min(72vw,340px)!important;margin-inline:auto!important;
  filter:drop-shadow(0 0 24px #E2C06759) drop-shadow(0 0 60px #E2C0672e)}
.tagline{
  font-family:var(--S)!important;font-weight:600!important;
  font-size:.55rem!important;letter-spacing:.42em!important;
  text-transform:uppercase!important;color:#F2EDE68a!important;
  text-shadow:none!important;margin-top:3vh!important;line-height:1.4!important;
  max-width:none!important}
.final-note{margin-top:4vh!important}
.chapter.final .cta-strong{margin-top:5vh!important}


/* ── web_producto.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   PRODUCTO EN DOS ESCENAS — era demasiada información para una pantalla.
   El capítulo se hace el doble de alto y las dos fichas se relevan: una
   ocupa la escena entera, y al seguir bajando entra la segunda. Sin tocar
   ni una palabra ni añadir marcado.
   ═══════════════════════════════════════════════════════════════════════ */
.chapter.prod{min-height:210svh}
.chapter.prod .product-strip.two{
  position:relative;display:grid;margin-top:calc(1.6vh * var(--aire,1));min-height:0}
/* una ficha por pantalla: entra subiendo y enfocando, como todo lo demás de
   la presentación. Sin escenario 3D: era complejo y las dos se pisaban. */
.chapter.prod .product-strip.two article{
  grid-area:1/1;min-width:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(34px);filter:blur(8px);
  transition:opacity .6s var(--e3),transform .72s var(--e3),
             filter .6s var(--e3),visibility 0s linear .72s}
.chapter.prod .product-strip.two article.ficha-on{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:none;filter:blur(0);
  transition:opacity .6s var(--e3),transform .72s var(--e3),
             filter .6s var(--e3),visibility 0s linear 0s}
/* la que ya se ha leído sale por arriba */
.chapter.prod .product-strip.two article.ficha-prev{transform:translateY(-30px)}

/* los ejemplos visuales de cada producto vuelven, con su sitio */
.chapter.prod .prod-visual{display:block!important;margin:2vh 0 1.4vh!important;
  max-height:none!important;opacity:.9}
.chapter.prod .prod-visual svg{width:100%;height:auto;max-height:12vh}
.chapter.prod .prod-sub{display:block!important}
.chapter.prod .mb-foot{display:block!important}
.chapter.prod .mini-brief .mb-row:nth-child(n+4){display:block}
@media(min-width:1100px){
  .chapter.prod .product-strip.two{min-height:0}
  .chapter.prod .prod-visual svg{max-height:9vh}
}
@media(prefers-reduced-motion:reduce){
  .chapter.prod{min-height:0}
  .chapter.prod .product-strip.two{display:grid;min-height:0;perspective:none}
  .chapter.prod .product-strip.two article{position:static;transform:none;opacity:1;
    box-shadow:none;background:none}
}

/* ═══ FACETAS: los planos triangulares de la intro, con su destello ═══ */
.facetas{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.facetas i{position:absolute;left:var(--x);top:var(--y);display:block;
  width:var(--s,26vw);aspect-ratio:1;clip-path:var(--cp);
  transform:rotate(var(--r,0deg));opacity:var(--o,.08);
  background:linear-gradient(142deg,#F7E3A8 0%,#E2C06759 26%,#0000 62%);
  animation:destella var(--t,14s) ease-in-out var(--dl,0s) infinite}
@keyframes destella{
  0%,100%{opacity:calc(var(--o,.08) * .35);filter:brightness(.7)}
  38%{opacity:var(--o,.08);filter:brightness(1)}
  52%{opacity:calc(var(--o,.08) * 1.9);filter:brightness(1.7)}
  66%{opacity:var(--o,.08);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.facetas{display:none}}




/* ── web_producto2.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   PRODUCTO — la tipografía exacta de la escena de producto de la
   presentación: el número grande y ligero (Clash 250), el verbo enorme,
   el rótulo con tracking ancho y la ficha de datos con filete por fila.
   ═══════════════════════════════════════════════════════════════════════ */

/* el rótulo de la ficha: número grande y ligero + la línea de contexto */
.chapter.prod .product-strip article small{
  font-family:var(--D)!important;font-weight:250!important;
  font-size:clamp(1.5rem,min(6.4vw,5vh),1.9rem)!important;
  letter-spacing:0!important;line-height:1!important;
  color:var(--crudo)!important;text-transform:none!important;
  display:block;margin-bottom:.6vh}
.chapter.prod .prod-tag{
  font-family:var(--S)!important;font-weight:600!important;
  font-size:.52rem!important;letter-spacing:.36em!important;line-height:1!important;
  text-transform:uppercase!important;color:#F2EDE672!important;
  margin-top:0!important}

/* el verbo: el tamaño de h3 de la presentación */
.chapter.prod .product-strip h3{
  font-family:var(--D)!important;font-weight:700!important;
  font-size:calc(clamp(2rem,8.6vw,4.6rem) * var(--ajuste,1))!important;
  letter-spacing:-.03em!important;line-height:1!important;
  text-transform:none!important;margin-top:2vh!important}

/* el párrafo principal, con la voz de .sub */
.chapter.prod .product-strip article>p:not(.prod-tag):not(.prod-sub){
  font-family:var(--S)!important;font-weight:400!important;
  font-size:clamp(1rem,.9rem + .5vw,1.18rem)!important;
  line-height:1.55!important;color:#F2EDE6ad!important;
  max-width:34ch;margin-top:2.4vh!important}
.chapter.prod .prod-sub{
  font-family:var(--S)!important;font-size:.8rem!important;line-height:1.75!important;
  letter-spacing:.012em!important;color:#F2EDE682!important;
  max-width:40ch;margin-top:calc(4.5vh * var(--aire,1))!important}

/* la ficha de datos: filete por fila y la cifra en negrita, como .card */
.chapter.prod .mini-brief{
  max-width:460px;margin-top:calc(7vh * var(--aire,1))!important;
  padding:calc(clamp(30px,4vh,42px) * var(--aire,1)) clamp(18px,3.4vw,24px) calc(clamp(14px,2vh,20px) * var(--aire,1))!important}
.chapter.prod .mb-head{
  font-family:var(--S)!important;font-size:.48rem!important;font-weight:600!important;
  letter-spacing:.3em!important;color:#F2EDE666!important}
.chapter.prod .mini-brief .mb-row{
  font-family:var(--S)!important;font-weight:400!important;
  font-size:.94rem!important;line-height:1.45!important;color:#F2EDE6c9!important;
  padding:calc(9px * var(--aire,1)) 0!important;border-bottom:1px solid #F2EDE614!important}
.chapter.prod .mini-brief .mb-row:last-of-type{border-bottom:0!important}
.chapter.prod .mb-foot{
  font-family:var(--S)!important;font-size:.78rem!important;color:#F2EDE682!important;
  margin-top:calc(1.8vh * var(--aire,1))!important;padding-top:calc(1.6vh * var(--aire,1))!important;
  border-top:1px solid #F2EDE614!important}
@media(max-width:650px){
  .chapter.prod .mini-brief .mb-row{font-size:.82rem!important;padding:5px 0!important}
}

/* escritorio bajo: la ficha entra sin recortar */
@media(min-width:1100px) and (max-height:960px){
  .chapter.prod .mini-brief{margin-top:1.4vh!important;padding:22px 18px 12px!important}
  .chapter.prod .mini-brief .mb-row{font-size:.82rem!important;padding:5px 0!important}
  .chapter.prod .mb-foot{margin-top:1.2vh!important;padding-top:1.1vh!important}
}

/* la lámina tiene su propio relleno: el contenido se aprieta un punto */
.chapter.prod .product-strip article>p:not(.prod-tag):not(.prod-sub){
  font-size:clamp(1rem,3.9vw,1.22rem)!important;margin-top:calc(6vh * var(--aire,1))!important}
.chapter.prod .mini-brief{box-shadow:none!important;background:#0A090666!important}
.chapter.prod .mini-brief .mb-row{font-size:.84rem!important;padding:6px 0!important}

@media(max-width:650px){
  .chapter.prod .product-strip.two article{padding:16px 14px}
  .chapter.prod .prod-visual{margin:1.2vh 0 1vh!important}
  .chapter.prod .prod-visual svg{max-height:8.5vh}
  .chapter.prod .prod-sub{display:none!important}
  .chapter.prod .mini-brief{margin-top:1.4vh!important;padding:20px 14px 10px!important}
  .chapter.prod .mini-brief .mb-row{font-size:.78rem!important;padding:5px 0!important}
  .chapter.prod .mb-foot{display:none!important}
}


/* ── web_motores.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   MOTORES QUE FALTABAN
   1) draw — el trazo se dibuja solo, como en la presentación. Los SVG
      entraban en cortina, que no es lo mismo: aquí la línea nace.
   2) el telón entre escenas era negro sobre negro y barría sin verse.
      Ahora cada listón lleva su canto de luz.
   ═══════════════════════════════════════════════════════════════════════ */
[data-mx="draw"]{opacity:0;transition:opacity .5s ease}
[data-mx="draw"].mx-in{opacity:1}
[data-mx="draw"] path,[data-mx="draw"] line,[data-mx="draw"] polyline,
[data-mx="draw"] circle{
  stroke-dashoffset:var(--L,400);
  transition:stroke-dashoffset 1.05s cubic-bezier(.5,0,.2,1);
  transition-delay:calc(var(--i,0) * 90ms)}
[data-mx="draw"].mx-in path,[data-mx="draw"].mx-in line,
[data-mx="draw"].mx-in polyline,[data-mx="draw"].mx-in circle{stroke-dashoffset:0}
/* los rellenos no se dibujan: aparecen */
[data-mx="draw"] [fill]:not([fill="none"]){opacity:0;
  transition:opacity .6s ease calc(var(--i,0) * 90ms + .5s)}
[data-mx="draw"].mx-in [fill]:not([fill="none"]){opacity:1}

/* ── EL TELÓN: siete listones con canto de luz ── */
.telon i{
  background:linear-gradient(90deg,
    var(--tb,#050505) 0%,var(--tb,#050505) 88%,
    #F2EDE60f 96%,var(--acc,#E2C067)4d 100%)!important}
.chapter.abierto .telon i{transform:translateX(-101%)}

/* ── TRANSICIÓN DE ESCENA: la que sale se retira, la que entra sube ── */
.chapter>.frame{--sal:0}
.chapter>.frame>.copy{
  transform:translateY(calc(var(--sal,0) * -4vh)) scale(calc(1 - var(--sal,0) * .04));
  transition:transform .25s linear}
.chapter.final>.frame>.copy{transform:none}


/* ── web_deck.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   LA ESCALA DE LA PRESENTACIÓN, SIN RECORTES
   ───────────────────────────────────────────────────────────────────────
   Medido en las dos a 1440x900, mismo elemento, mismo momento:

     titular      presentación 112px   ·  web 75,6px
     escalera     presentación 57,6px  ·  web 41,4px
     verbo prod.  presentación 73,6px  ·  web 45px
     cifras       presentación 96px    ·  web 27px
     aire lead    presentación 54px    ·  web 21,6px
     aire note    presentación 40,5px  ·  web 12,6px

   Todo ~2/3 de tamaño y ~1/3 de aire. La causa son los topes min(Xvw,Yvh)
   que fui metiendo para que cupiera en el .frame de 100svh. Con los dos
   actos ya hay sitio, así que aquí se ponen los valores de la presentación
   tal cual: los clamp son los suyos, literales, sin cota en vh.
   ═══════════════════════════════════════════════════════════════════════ */

/* el factor que deja el ajuste cuando un acto no cabe (1 = tamaño de la
   presentación, que es lo normal; sólo baja en el acto que se sale) */
.acto-a,.acto-b,.copy{--ajuste:1;--aire:1}

/* ── TITULAR · .huge = 700 clamp(2rem,9vw,7rem)/.98, ls -.03em, 15ch ──── */
.chapter .copy h1,
.chapter .copy h2,
.chapter:has(.orbit) .copy h2,
.chapter.prod .copy h2,
.chapter.final .copy h2{
  font-family:var(--D);font-weight:700;
  font-size:calc(clamp(2rem,9vw,7rem) * var(--ajuste,1));
  line-height:.98;letter-spacing:-.03em;
  text-transform:uppercase;text-wrap:balance;
  overflow-wrap:break-word;hyphens:auto;
  max-width:15ch}
@media(max-width:820px){
  .chapter .copy h1,.chapter .copy h2,
  .chapter:has(.orbit) .copy h2,
  .chapter.prod .copy h2{max-width:17ch}
}
/* el titular partido conserva su medida completa */
.chapter .copy h2:has(.hl){max-width:none;width:100%}
@media(min-width:820px){.chapter .copy h2:has(.hl){max-width:min(920px,86vw)}}

/* ── KICKER · .kick = 600 .54rem/1, ls .4em, margin-bottom 5.5vh ──────── */
.kicker,
.copy .kicker{
  font-family:var(--S);font-size:.54rem;font-weight:600;line-height:1;
  letter-spacing:.4rem;text-transform:uppercase;
  margin-bottom:calc(5.5vh * var(--aire,1));text-shadow:none}
.kicker{--ls0:.4rem}

/* ── SECUNDARIO · .sub = 400 clamp(1rem,3.9vw,1.22rem)/1.55, 6vh, 34ch ── */
.copy .lead{
  font-family:var(--S);font-weight:400;
  font-size:clamp(1rem,3.9vw,1.22rem)!important;
  line-height:1.55;letter-spacing:normal;
  margin-top:calc(6vh * var(--aire,1));max-width:34ch}
@media(max-width:650px){.copy .lead{max-width:31ch}}
@media(max-width:820px){
  .pilot-note,.sistema-learn,.final-note,.prod-sub,.row-sub,
  .chapter.prod .prod-sub{max-width:36ch}
}

/* ── NOTA · .note = .8rem/1.75, ls .012em, 40ch, 4.5vh, opacidad .78 ──── */
.pilot-note,.sistema-learn,.final-note,.prod-sub,.row-sub{
  font-family:var(--S);font-weight:400;
  font-size:.8rem;line-height:1.75;letter-spacing:.012em;
  max-width:40ch;opacity:.78}
.pilot-note,.sistema-learn,.final-note{margin-top:calc(4.5vh * var(--aire,1))}
.row-sub,.prod-sub{margin-top:1vh!important}

/* ── ESCALERA · .st = 700 clamp(1.25rem,5.8vw,3.6rem)/1.06, ls -.02em ─── */
.scene-lines{margin-top:calc(10vh * var(--aire,1));gap:calc(2.2vh * var(--aire,1))}
/* si la escalera es la escena entera (no hay titular que la preceda) el aire
   de cabecera no se ha ganado: se recorta y las lineas se quedan a su tamano */
.copy:not(:has(h1)):not(:has(h2)) .scene-lines{margin-top:calc(2.5vh * var(--aire,1));gap:calc(1.4vh * var(--aire,1))}
.scene-lines .lit{
  font-family:var(--D);font-weight:700;
  font-size:calc(clamp(1.25rem,5.8vw,3.6rem) * var(--ajuste,1));
  line-height:1.06;letter-spacing:-.02em;text-transform:uppercase;
  max-width:none;overflow-wrap:break-word}
/* la cota numerada: .st i = 600 .5rem/1, ls .36em, .85em de aire debajo.
   El aire se mide en el cuerpo de la cota (8px), no en el del titular. */
.scene-lines .lit{padding-top:1.05rem}
.scene-lines .lit::before{
  font-family:var(--S);font-size:.5rem;font-weight:600;line-height:1;
  letter-spacing:.36em;text-transform:uppercase}

/* el sitio capa la escalera en movil con !important: la presentacion no */
@media(max-width:650px){
  .scene-lines .lit,.scene-lines span.lit{
    font-size:calc(clamp(1.25rem,5.8vw,3.6rem) * var(--ajuste,1))!important}
}

/* ── VERBOS DE PRODUCTO · h3 = 700 clamp(2rem,8.6vw,4.6rem)/1, sin caja alta */
.product-strip h3,
.chapter.prod .product-strip h3{
  font-family:var(--D);font-weight:700;
  font-size:calc(clamp(2rem,8.6vw,4.6rem) * var(--ajuste,1));
  line-height:1;letter-spacing:-.03em;
  text-transform:none;margin-top:calc(2vh * var(--aire,1))}

/* ── EL NUMERAL FINO DEL PRODUCTO · .pn i = 250 1.9rem/1 en display ───── */
.chapter.prod .product-strip.two{counter-reset:ficha}
.chapter.prod .product-strip.two article{counter-increment:ficha}
.prod-tag{
  display:flex;align-items:baseline;gap:12px;
  font-family:var(--S);font-size:.52rem;font-weight:600;line-height:1;
  letter-spacing:.36em;text-transform:uppercase;margin-top:0}
.prod-tag::before{
  content:"0" counter(ficha);
  font-family:var(--D);font-weight:250;font-size:1.9rem;line-height:1;
  letter-spacing:0;color:var(--acc,#FFB424);flex:0 0 auto}

/* ── CIFRAS DEL PILOTO · .st.big i = 700 clamp(2.2rem,11vw,6rem)/1 ────── */
.pilot-metric{gap:calc(2.2vh * var(--aire,1));margin-top:calc(10vh * var(--aire,1))}
.pilot-metric>span{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:18px;
  padding-left:0;
  font-family:var(--D);font-weight:700;
  font-size:calc(clamp(1.25rem,5.8vw,3.6rem) * var(--ajuste,1));
  line-height:1.06;letter-spacing:-.02em;text-transform:uppercase}
.pilot-metric>span::before{
  position:static;margin:0;
  font-family:var(--D);font-weight:700;
  font-size:calc(clamp(2.2rem,11vw,6rem) * var(--ajuste,1));
  line-height:1;letter-spacing:-.04em;
  color:var(--acc,#FFB424);opacity:.9;text-transform:uppercase}

/* ── COMPARATIVA · el bloque destacado gana cuerpo, como .cmp ────────── */
.difference-row span{
  font-family:var(--D);font-weight:600;letter-spacing:-.018em;line-height:1.24;
  font-size:clamp(1.15rem,5vw,1.9rem)}

/* ── AIRE GENERAL en vh, la respiración de la presentación ───────────── */
.product-strip,.product-strip.two,.difference-grid{margin-top:calc(7vh * var(--aire,1))}
.coach-card,.mini-brief{margin-top:calc(7vh * var(--aire,1))}
.cta-strong{margin-top:calc(6vh * var(--aire,1))}
.tagline{margin-top:3vh}

/* ── EL REVELADO · la curva y el escalonado de la presentación ────────── */
/*  .rv/.st: opacity .8s ease + transform .9s cubic-bezier(.19,1,.22,1)
    y un relevo de 320 ms entre hermanos. La web venía con .16,.84,.34,1. */
:root{--e3:cubic-bezier(.16,.84,.34,1);
       --eb:cubic-bezier(.34,1.46,.44,1);
       --eb2:cubic-bezier(.3,1.8,.5,1)}
.scene-lines .lit:nth-child(1){transition-delay:.10s}
.scene-lines .lit:nth-child(2){transition-delay:.42s}
.scene-lines .lit:nth-child(3){transition-delay:.74s}
.pilot-metric>span:nth-child(1){transition-delay:.10s}
.pilot-metric>span:nth-child(2){transition-delay:.42s}
.pilot-metric>span:nth-child(3){transition-delay:.74s}

/* el segundo tiempo del aro (aro + aprendizaje + aviso) se pasaba diez
   pixeles del frame en movil: el aviso cede ese aire */
@media(max-width:650px){
  .chapter:has(.orbit) .coach-card{margin-top:2vh}
  .chapter:has(.orbit) .acto-b .orbit{margin-top:1.6vh}
}

/* ═══ LAS COSTURAS RECTANGULARES ═══
   La hoja del sitio deja will-change permanente sobre .copy y le pone un
   blur en reposo:
       .copy{will-change:opacity,transform,filter}
       html.js .copy{opacity:0;filter:blur(8px);transform:translateY(55px)scale(.975)}
   Caja grande + blur + will-change = capa compuesta que Chromium tesela, y
   esas teselas son los recuadros que se ven detras del titular. La
   presentacion revela con opacidad y desplazamiento y ni una gota de blur
   (.rv{opacity:0;transform:translateY(26px)}), asi que se hace igual: se
   quita el blur y se libera la capa. Ademas acerca el motion al del deck. */
.copy,html.js .copy{will-change:auto!important}
html.js .copy{filter:none!important}
.chapter .copy{filter:none!important}

/* ═══ LA PALABRA GIGANTE DEL FONDO ═══
   Lo que se veia como "marcos" detras del titular no era ninguna costura
   del compositor: eran sus propias letras. A 30vw y peso 700 los trazos de
   Clash son losas, y sobre el film y los triangulos se leen como cajas
   rectangulares. Comprobado poniendo color:transparent — los rectangulos
   desaparecian con el elemento, la capa y el z-index intactos.
   Se pasa a contorno: se lee como tipografia, da la misma profundidad y no
   puede confundirse con un marco. */
.giant{
  color:transparent!important;
  -webkit-text-stroke:1.5px #F2EDE61f;
  paint-order:stroke fill}
@media(max-width:820px){
  .giant{-webkit-text-stroke-width:1px}
}

/* ═══ LA ESCENA DEL PILOTO: menos ruido, mas sitio ═══
   Tres cosas la saturaban:

   1 · La nota salia a 16,32 px y competia con el lead y con el titular. La
       hoja del sitio la fija con !important (.pilot-note{font-size:1.02rem
       !important}), asi que mi .8rem nunca llegaba. En la presentacion la
       nota susurra: .8rem al 78 %. Se le devuelve la voz baja.

   2 · La escalera se salia por la derecha 29 px: .pilot-metric es
       width:fit-content, asi que la columna 1fr del texto se dimensiona a
       max-content y no rompe linea. Pasa a ocupar el ancho disponible.

   3 · El escalonado diagonal se comia 57 px de ancho en una pantalla de
       390. Se acorta en movil: sigue leyendose como escalera sin robar
       medida al texto.                                                     */
.pilot-note{font-size:.8rem!important;line-height:1.75!important}
.sistema-learn{font-size:.8rem!important;line-height:1.75!important}

.pilot-metric{width:100%!important;max-width:100%}
/* white-space:nowrap era lo que la desbordaba: el texto no podia romper
   linea, se derramaba fuera de su caja y el frame lo cortaba. La caja medía
   bien —por eso getBoundingClientRect no lo delataba— pero la tinta no. */
.pilot-metric>span{
  max-width:100%;min-width:0;
  white-space:normal!important;overflow-wrap:break-word;hyphens:auto}

/* En movil el escalonado diagonal se come 33 px de medida y obliga a las
   filas 2 y 3 a partirse en dos lineas: mas alto y mas ruidoso. En 390 px
   la escalera se lee igual de bien alineada, con cada hito en un renglon. */
@media(max-width:650px){
  .pilot-metric>span:nth-of-type(2),
  .pilot-metric>span:nth-of-type(3){margin-left:0}
  .pilot-metric>span{
    gap:8px;
    font-size:calc(clamp(1.05rem,4.7vw,3.6rem) * var(--ajuste,1))}
  .pilot-metric>span::before{
    font-size:calc(clamp(1.8rem,7.6vw,6rem) * var(--ajuste,1))}
}

/* ═══ EL ARO, CLONADO DE LA PRESENTACION ═══
   La logica de fases ya era la suya (on = fase actual, dn = recorrido, los
   puntos se encienden al pasar). Lo que fallaba eran las medidas: el aro
   salia a 203 px contra los 273 de la presentacion y el nombre de la fase a
   17,9 contra 25. Por eso se veia pobre. Valores de style.css, literales:

     .cyc-dia   width:min(70vw,330px)
     .core b    500 clamp(1.5rem,6.4vw,2.1rem)/1 en display
     .core i    600 .48rem/1 ls .3em      .core u  500 .46rem/1 ls .26em
     .ph        600 .56rem/1 ls .2em      .ph i    700 .46rem/1 ls .18em
     .arc 2 / .dn 2.6 op .3 / .on 7       (sin resplandor: la presentacion no lo lleva)  */
.cyc-dia{width:min(70vw,330px)!important;--R:min(26vw,124px)}
@media(min-width:820px){
  .cyc-dia{width:min(min(24vw,40vh),330px)!important;--R:min(9vw,124px)}
}
.cyc-dia .arc{stroke-width:2}
.cyc-dia .arc.dn{opacity:.3;stroke-width:2.6}
.cyc-dia .arc.on{opacity:1;stroke-width:7;filter:none}
.cyc-dia .ph{font-size:.56rem;letter-spacing:.2em}
.cyc-dia .ph i{font-size:.46rem;letter-spacing:.18em;opacity:.55}
.cyc-dia .core i{font-size:.48rem;letter-spacing:.3em;opacity:.8}
.cyc-dia .core b{font-size:clamp(1.5rem,6.4vw,2.1rem)}
.cyc-dia .core u{font-size:.46rem;letter-spacing:.26em;opacity:.7}

/* El aro de polvo que giraba detras no era ningun elemento mio: es el film
   de three.js, que dibuja un anillo de particulas inclinado. En esta escena
   compite con el aro de verdad y confunde, asi que se apaga solo aqui. En el
   resto de la pelicula sigue intacto (es el que trae los destellos y la V). */
#webgl-film{transition:opacity .7s ease}
html.aro-a-la-vista #webgl-film{opacity:.1}

/* ═══ PRODUCTO: tiempo para leer cada ficha ═══
   El capitulo media 210svh y el relevo cambiaba de ficha a la mitad: cada
   producto tenia media pantalla de scroll, asi que al llegar a la segunda
   el scroll se iba y no daba tiempo a leerla. Se alarga a 320svh, con lo
   que cada ficha dispone de un recorrido de pantalla completa. */
.chapter.prod{min-height:320svh}

/* El numeral salia dos veces: el <small> del sitio dice "01" y mi etiqueta
   le anadia otro "01" delante. Se queda uno solo, el que va al lado de la
   linea de la etiqueta, como .pn i en la presentacion. */
.chapter.prod .product-strip.two article>small{display:none}

/* ═══ EL ROTULO DE ESCENA, VISIBLE ═══
   "EL SISTEMA", "PRODUCTO", "LA DIFERENCIA" iban a 43 % de blanco, el mismo
   valor que la presentacion usa en sus escenas oscuras. Pero alli el fondo
   es plano y aqui esta la pelicula moviendose detras: a 8,6 px de cuerpo se
   perdian. Pasan al acento, que es lo que hace la presentacion en las
   escenas donde el rotulo tiene que leerse. */
/* (sustituido mas abajo: el rotulo va en blanco, no en dorado) */

/* El efecto "mask" perdia contra la hoja del sitio: [data-mx="mask"] es
   (0,1,0) y .scene-lines .lit es (0,2,0), asi que la escalera entraba en
   0,7 s con la curva del sitio en vez de los 0,9 s y la curva de la
   presentacion. Se sube la especificidad; los retardos escalonados de la
   escalera (.10/.42/.74 s, los de .st en el deck) se mantienen. */
.chapter [data-mx="mask"],
.chapter .scene-lines .lit[data-mx="mask"]{
  transition-property:clip-path,transform;
  transition-duration:.9s;
  transition-timing-function:var(--e3)}

/* ═══ EL ROTULO DE ESCENA: BLANCO QUE SE ENCIENDE ═══
   Fuera el dorado. El rotulo entra en blanco y se ilumina al llegar: el
   resplandor sube con el, y esa subida es lo que lo hace legible sobre la
   pelicula sin recurrir al color. */
.chapter .copy .kicker{
  color:#F2EDE6!important;
  font-size:.6rem;
  text-shadow:0 0 20px #F2EDE642,0 0 52px #F2EDE61f,0 1px 10px #000000a6}
.chapter .copy .kicker.mx-in{animation:rotulo-luz 1.5s var(--e3) both}
@keyframes rotulo-luz{
  0%  {text-shadow:none}
  55% {text-shadow:0 0 26px #F2EDE6a6,0 0 66px #F2EDE64d,0 1px 10px #000000a6}
  100%{text-shadow:0 0 20px #F2EDE642,0 0 52px #F2EDE61f,0 1px 10px #000000a6}}

/* ═══ EL MOTOR DEL SITIO, APAGADO ═══
   Esta era la causa de que los textos no aparecieran como en la
   presentacion por mucho que igualara curvas y tiempos: el sitio corre sus
   PROPIAS animaciones sobre los mismos elementos, y una animacion gana a
   una transicion en la cascada. Mi motor portado no llegaba a mandar.

       .chapter.active .copy>h2          animation: ttl-on 1.6s .35s both
       .chapter.active .product-strip h3 animation: ttl-on 1.3s both (+.9s/+1.5s)
       .chapter.active .scene-lines b    animation: hl-on 1.1s both (+1s/+2.4s/+3.8s)

   Ademas esos retardos de 1 a 5,2 s son lo que hacia la escalera tan lenta:
   la presentacion escalona a 0,32 s. Se apagan y se deja el estado final
   escrito, para que nada quede sin estilo. */
.chapter.active .copy>h2,
.chapter.active .product-strip h3,
.chapter.active .product-strip article:first-child h3,
.chapter.active .product-strip article:nth-child(2) h3,
.chapter.active .scene-lines b,
.chapter.active .scene-lines span:first-child b,
.chapter.active .scene-lines span:nth-child(2) b,
.chapter.active .scene-lines span:nth-child(3) b,
.chapter.active .scene-lines span:nth-child(4) b,
.hl,.hr,.chapter.active .hl,.chapter.active .hr,
.hl b,.hr b,.chapter.active .hl b,.chapter.active .hr b{
  animation:none!important}
/* el estado final que dejaba hl-on, ahora fijo y sin el tinte dorado */
.scene-lines b{color:#FBF3E2;font-weight:inherit}
/* ttl-on solo aportaba un resplandor dorado al titular: fuera el amarillo */
.chapter .copy h2{text-shadow:0 0 30px #F2EDE626}

/* ═══ LA LLAMADA A LA ACCION, LA ORIGINAL ═══
   La habia sustituido por un rectangulo dorado macizo. La de la pagina
   original es una pildora de oro traslucido con filete fino, radio completo
   y un latido de resplandor (cta-late). Se devuelve tal cual. */
.chapter.final .cta-strong,
.cta-strong,.cta-link{
  display:inline-flex!important;align-items:center;gap:.9rem;
  background:#d4aa701f!important;
  border:1px solid #d4aa70d9!important;
  border-radius:999px!important;
  color:var(--ink,#F2EDE6)!important;
  font-family:var(--S)!important;font-size:.94rem!important;font-weight:500!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;
  padding:1.3rem 2.4rem!important;
  box-shadow:0 0 18px #d4aa702e;
  animation:cta-late 2.6s ease-in-out infinite!important;
  transition:background .35s var(--e3),transform .35s var(--e3)}
.cta-strong:hover,.cta-link:hover{
  background:#d4aa7038!important;transform:translateY(-2px)}
@media(max-width:650px){
  .cta-strong,.cta-link{font-size:.82rem!important;padding:1.05rem 1.8rem!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   POR QUE NO SE VEIAN LOS MOTIONS  (la causa raiz, medida)
   ───────────────────────────────────────────────────────────────────────
   La hoja del sitio revela el BLOQUE entero de copy de una vez:

       html.js .copy                { opacity:0; filter:blur(8px);
                                      transform:translateY(55px) scale(.975) }
       html.js .chapter.active .copy{ opacity:1; filter:none; transform:none }

   Medido en el navegador, entrando en el capitulo de "la diferencia":
   .copy estaba en opacity:0 y translateY(84px) mientras el kicker y el
   titular YA estaban en opacity:1 y la fila YA tenia su clip-path puesto.

   O sea: mis efectos por elemento se ejecutaban DENTRO de un contenedor
   invisible. Cuando el bloque acababa de revelarse, los hijos ya habian
   terminado su entrada, y lo que se ve es el bloque llegando de golpe con
   todo colocado. Ni un motion. Por eso igualar curvas y tiempos no servia
   de nada: el problema no estaba en los efectos, sino en quien los tapaba.

   La presentacion no tiene revelado de bloque: cada pieza entra sola al
   alcanzar la franja de lectura. Aqui se hace igual — el bloque deja de
   ocultarse y el unico movimiento lo pone el motor por elemento.
   ═══════════════════════════════════════════════════════════════════════ */
html.js .chapter:not(.beats) .copy,
html.js .chapter:not(.beats).active .copy,
.chapter:not(.beats) .copy{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  transition:none!important}
/* La intro manda sobre lo suyo: su copy no aparece hasta que han pasado los
   tres beats. Al forzar .copy en general se quedaba fijo desde el segundo
   cero, encima de los beats y antes de tiempo. */

/* El sitio ademas revela a mano varios hijos al activarse el capitulo, con
   sus propios tiempos y retardos. Eso pisaba el efecto que les asigna mi
   motor (la escalera hacia un fundido en vez de su barrido, por ejemplo).
   Se les quita el estado oculto: quien los mueve es [data-mx]. */
   Ojo con como se neutraliza: al escribir aqui "transition:none" mate
   tambien MIS transiciones, y getAnimations() lo demostro — se ejecutaban
   cuatro animaciones en la escena y ninguna era del motor. Lo que hay que
   anular es solo el ESTADO OCULTO del sitio (su opacity/transform), nunca
   la transicion, que es justo lo que tiene que correr. */
.scene-lines span:not([data-mx]),
.difference-row:not([data-mx]),
.intel-item:not([data-mx]),
.product-strip article:not([data-mx]){
  opacity:1;transform:none}
/* y donde manda mi motor, el sitio no pone ni estado inicial ni retardos */
.scene-lines span[data-mx],
.difference-row[data-mx],
.intel-item[data-mx],
.product-strip article[data-mx],
.chapter.active .scene-lines span[data-mx],
.chapter.active .difference-row[data-mx],
.chapter.active .intel-item[data-mx],
.chapter.active .product-strip article[data-mx],
.chapter.active .scene-lines span:nth-child(2),
.chapter.active .scene-lines span:nth-child(3),
.chapter.active .scene-lines span:nth-child(4),
.chapter.active .difference-row:nth-child(2),
.chapter.active .difference-row:nth-child(3),
.chapter.active .product-strip article:nth-child(2),
.chapter.active .product-strip article:nth-child(3){
  opacity:1;transform:none;transition-delay:0s}

/* ═══ LA LUZ, DESDE EL PRIMER BEAT Y EN TODO LO QUE SIGUE ═══
   Los titulos se encienden al entrar: el resplandor sube con el texto y se
   asienta. Empieza en los tres beats de la intro (WhatsApp, Llamada, Nota
   de voz) y sigue en todos los titulares y rotulos. Solo es luz: no toca
   como fluyen ni su formato. */
.sig-beat .beat-quote.viva,
.chapter .copy h1.mx-in,
.chapter .copy h2.mx-in,
.product-strip h3.mx-in,
.scene-lines .lit.mx-in{
  animation:luz-titulo 1.6s var(--e3) both}
@keyframes luz-titulo{
  0%  {text-shadow:none}
  50% {text-shadow:0 0 30px #F2EDE68f,0 0 78px #F2EDE63d}
  100%{text-shadow:0 0 22px #F2EDE640,0 0 60px #F2EDE61a}}

/* ═══ LOS TEXTOS PEQUENOS DE LAS ULTIMAS ESCENAS ═══
   Medidos contra sus equivalentes de la presentacion, tres estaban mal
   mapeados por mi: los meti en el grupo de "nota" (.8rem, susurro) cuando
   en el deck son texto de lectura. De ahi que se vieran de otra epoca.

     cierre     web 14,72 px + tracking 0,18   ·  deck 19,52 px, tracking normal
     ficha      web 13,44 px                   ·  deck 15,68 px
     ejemplo    web 15,68 px                   ·  deck 18,56 px

   El cierre no es una nota: en la presentacion es .fin .sub, o sea el mismo
   cuerpo que el secundario de cualquier escena. */
.final-note{
  font-size:clamp(1rem,3.9vw,1.22rem)!important;
  line-height:1.55!important;
  letter-spacing:normal!important;
  max-width:34ch;opacity:1}
/* la lamina de datos: .card li del deck */
.chapter.prod .mini-brief .mb-row,
.mini-brief .mb-row{
  font-size:.98rem!important;line-height:1.45!important;letter-spacing:normal!important}
/* el ejemplo de cada fase del aro: .cyc li del deck */
.cyc-ej{
  font-size:clamp(1rem,4vw,1.16rem)!important;
  line-height:1.5!important;letter-spacing:normal!important}

/* ═══ EL AIRE, ANTES QUE EL CUERPO ═══
   El ajuste al marco cedia primero el AIRE y solo despues bajaba la letra.
   Medido en escritorio, eso dejaba cinco de ocho capitulos con el aire al
   minimo (0,28) y la letra al 61 %: justo lo contrario de lo que hace falta,
   porque lo que se pierde asi es el espacio. Se invierte el orden — cede
   primero un poco de cuerpo, y el aire nunca baja de la mitad. */


/* ═══ CINCO FALLOS MEDIDOS, UNO A UNO ═══

   1 · El rotulo entraba ya en su estado final. De los tres movimientos de
       "cover" (opacidad, tracking y desenfoque) solo sobrevivia el
       desenfoque, porque mis propias reglas le ganaban por especificidad:
       .chapter .copy .kicker es (0,3,0) y [data-mx="cover"] es (0,1,0).
       En la presentacion empatan y gana el efecto por orden. Aqui se le
       sube el peso al efecto para que mande el. */
.chapter .copy .kicker[data-mx="cover"]{
  opacity:0;filter:blur(6px);
  letter-spacing:calc(var(--ls0,.4rem) + .34em);
  transition:opacity 1.15s var(--e3),letter-spacing 1.15s var(--e3),filter 1.15s var(--e3)}
.chapter .copy .kicker[data-mx="cover"].mx-in{
  opacity:1;filter:blur(0);letter-spacing:var(--ls0,.4rem)}

/* 4 · El "draw" de los ejemplos de producto no se veia: el SVG ya estaba al
       90 % antes de que le tocara entrar, porque .chapter.prod .prod-visual
       (0,2,0) gana a [data-mx="draw"]{opacity:0} (0,1,0). El 0,9 pasa a ser
       el estado FINAL del efecto, no el de partida. */
.chapter.prod .prod-visual[data-mx="draw"]{opacity:0!important}
.chapter.prod .prod-visual[data-mx="draw"].mx-in{opacity:.9!important}

/* 5 · El "rise" de la nota y del aprendizaje arrancaba al 78 % en vez de a
       cero, asi que solo se le veia el desplazamiento. Misma historia: el
       0,78 es el estado final, no el inicial. */
.pilot-note[data-mx="rise"],
.sistema-learn[data-mx="rise"],
.final-note[data-mx="rise"],
.prod-sub[data-mx="rise"]{opacity:0}
.pilot-note[data-mx="rise"].mx-in,
.sistema-learn[data-mx="rise"].mx-in,
.final-note[data-mx="rise"].mx-in,
.prod-sub[data-mx="rise"].mx-in{opacity:.78}

/* 3 · Los capitulos eran demasiado cortos para su copy. El sitio los deja en
       min-height:106vh, asi que el marco solo se quedaba clavado 48 px: la
       escena cruzaba la pantalla casi sin pausa y las piezas de abajo
       entraban cuando el capitulo ya se iba (la entradilla del capitulo 2
       aparecia con el marco ya desanclado y subiendo). Con recorrido de
       verdad, cada pieza entra con la escena quieta — y de paso es lo que
       le da sitio para respirar. */
main .chapter:not(.beats):not(.final):not(.prod){min-height:200svh}
.chapter:has(.orbit){min-height:230svh}

/* ═══ EL SISTEMA Y EL PILOTO: UNA SOLA ESCENA ═══
   Partirlas en dos tiempos dejaba el segundo huerfano: el aviso solo, sin
   el aro ni el titular, no se entiende; y los tres hitos sueltos, sin el
   titular del piloto, tampoco. Vuelven a ser una escena.

   Para que quepan sin volver a ser un muro de texto se compone como lo hace
   la presentacion en su escena del sistema (.edit.wide): dos columnas, el
   texto a un lado y el elemento visual al otro. En movil se apila, con el
   aro entre el titular y el aviso. */
.chapter:has(.orbit) .acto-a,
.chapter:has(.orbit) .acto-b{
  display:contents}                 /* los envoltorios dejan de estorbar */

@media(min-width:900px){
  .chapter:has(.orbit) .copy,
  .chapter:has(.pilot-metric) .copy{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    column-gap:5vw;row-gap:0;
    align-items:center;
    max-width:min(1180px,92vw);
    text-align:left}
  /* el sistema: texto a la izquierda, aro a la derecha */
  .chapter:has(.orbit) .copy>.kicker      {grid-column:1;grid-row:1}
  .chapter:has(.orbit) .copy>h2           {grid-column:1;grid-row:2}
  .chapter:has(.orbit) .copy>.sistema-learn{grid-column:1;grid-row:3}
  .chapter:has(.orbit) .copy>.coach-card  {grid-column:1;grid-row:4}
  .chapter:has(.orbit) .copy>.orbit       {grid-column:2;grid-row:1/5;
    justify-self:center;align-self:center;margin:0}
  /* el piloto: titular y entradilla a la izquierda, los hitos a la derecha */
  .chapter:has(.pilot-metric) .copy>.kicker     {grid-column:1;grid-row:1}
  .chapter:has(.pilot-metric) .copy>h2          {grid-column:1;grid-row:2}
  .chapter:has(.pilot-metric) .copy>.lead       {grid-column:1;grid-row:3}
  .chapter:has(.pilot-metric) .copy>.pilot-metric{grid-column:2;grid-row:1/4;
    align-self:center;margin:0}
  .chapter:has(.pilot-metric) .copy>.pilot-note {grid-column:2;grid-row:4;margin-top:3vh}
  /* con dos columnas el titular tiene menos ancho: mide en su columna */
  .chapter:has(.orbit) .copy h2,
  .chapter:has(.pilot-metric) .copy h2{max-width:11ch}
  .chapter:has(.orbit) .copy .sistema-learn,
  .chapter:has(.pilot-metric) .copy .lead{max-width:30ch}
}

/* Al volver a ser una sola escena, en movil el aro tenia que ceder sitio:
   con 273 px de diametro la escena se pasaba 78 px. A 58vw entra y sigue
   leyendose bien, que es lo que importa. */
@media(max-width:650px){
  .cyc-dia{width:min(58vw,300px)!important;--R:min(21.5vw,110px)}
  .chapter:has(.orbit) .sistema-learn{margin-top:2.4vh}
  .chapter:has(.orbit) .coach-card{margin-top:1.6vh}
  .cyc-ej{margin-top:2vh;min-height:0}
}
@media(max-width:900px) and (min-width:651px){
  .cyc-dia{width:min(46vw,300px)!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   TIPOGRAFIA: LA LISTA COMPLETA, ELEMENTO A ELEMENTO
   ───────────────────────────────────────────────────────────────────────
   Inventario de las dos, todas las combinaciones de familia/cuerpo/peso/
   tracking en uso. Lo que se veia "antiguo" en los textos pequenos no era
   la familia (las dos son Clash + Satoshi): era el PESO. La hoja del sitio
   hereda font-weight:300 de la Fraunces original en media pagina, y un 300
   en Satoshi se lee fino y de otra epoca. La presentacion no baja de 400 y
   usa 600/700 en todo lo pequeno.

     titular partido   web 300   ·  deck 700
     destacados .hl    web 300   ·  deck 600/700
     cuerpo tarjeta    web 300   ·  deck 400
     contador          web 300   ·  deck 600
     "desliza"         web 300   ·  deck 600
     nav               web 400   ·  deck 600
     fila secundaria   web tracking .157  ·  deck normal
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · el peso 300 desaparece del copy. Ojo: poner font-weight:inherit fue
      contraproducente — propaga el 300 del body en vez de corregirlo, y de
      paso le quitaba el 600 al rotulo. Van pesos explicitos por rol. */
.chapter .copy h1,.chapter .copy h2,
.chapter .copy h1 .hl,.chapter .copy h2 .hl,
.chapter .copy h1 .hr,.chapter .copy h2 .hr,
.chapter .copy h1 .mi,.chapter .copy h2 .mi,
.chapter .copy h1 b,.chapter .copy h2 b{font-weight:700}
.product-strip h3,.product-strip h3 .mi,.product-strip h3 b{font-weight:700}
.scene-lines .lit,.scene-lines .lit b,.scene-lines .lit .mi{font-weight:700}

/* 2 · los destacados del cuerpo: 600, como el em de la presentacion */
.copy .lead b,.copy .lead .hl,
.pilot-note b,.pilot-note .hl,
.sistema-learn b,.sistema-learn .hl,
.final-note b,.final-note .hl,
.prod-sub b,.prod-sub .hl,
.row-sub b,.row-sub .hl,
.product-strip article>p b,.product-strip article>p .hl{font-weight:600}

/* 3 · texto corrido: nunca por debajo de 400 */
.copy .lead,.pilot-note,.sistema-learn,.final-note,.prod-sub,.row-sub,
.cc-body,.cc-fix,.mb-row,.mb-foot,.cyc-ej,
.product-strip article>p{font-weight:400}
/* .cs de la presentacion no lleva tracking; .row-sub lo tenia */
.row-sub{letter-spacing:normal}
/* .cx de la presentacion: 400 a 13,8 px */
.cc-fix{font-weight:400!important;font-size:.86rem;line-height:1.6}
/* .ch de la presentacion: 600 a 8,32 px con .28em */
.cc-head,.mb-head{font-size:.52rem!important;letter-spacing:.28em!important;font-weight:600!important}

/* 4 · los rotulos de interfaz, con el peso y el tracking de la presentacion
       (.tag y .lb: 600, .3em / .34em, versalitas) */
.film-counter,.film-hint span,.audio-toggle,.nav-link,.lang a,.lang-link{
  font-family:var(--S)!important;font-weight:600!important;
  text-transform:uppercase!important}
.film-counter{font-size:.5rem!important;letter-spacing:.3em!important}
.film-hint span{font-size:.5rem!important;letter-spacing:.34em!important}
.nav-link{font-size:.55rem!important;letter-spacing:.28em!important}
.lang a,.lang-link{font-size:.55rem!important;letter-spacing:.22em!important}

/* 5 · la escalera vuelve a su cuerpo: 57,6 px como .st, no 50,7 */
.scene-lines .lit{font-size:calc(clamp(1.25rem,5.8vw,3.6rem) * var(--ajuste,1))!important}

/* ── los pesos que quedaban en 300, uno a uno ── */
.chapter .copy .kicker{font-weight:600!important}
.pilot-metric>span,.pilot-metric>span .mi{font-weight:700!important}
.difference-row span,.difference-row span .mi{font-weight:600!important}
.cc-body{font-weight:500!important}
.cyc-ej,.mb-foot,.row-sub,.sistema-learn,.pilot-note,.final-note,
.prod-sub,.mb-row,.cc-fix{font-weight:400!important}
.copy .lead .hl,.sistema-learn .hl,.pilot-note .hl,.final-note .hl,
.row-sub .hl,.prod-sub .hl,.difference-row .hl,
.product-strip article>p .hl{font-weight:600!important}
.veta-w{font-weight:600!important}
.sr-only{font-weight:400}


/* ── web_arreglos.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   TRES ARREGLOS SEÑALADOS EN LOS PANTALLAZOS
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · EL SISTEMA: el relevo aro ↔ aviso ═════════════════════════════
   Las dos piezas visuales comparten celda. Mientras el aro recorre sus
   cinco fases ocupa la caja; al cerrar la ultima, se retira y entra el
   aviso en el mismo sitio. La escena mide el mayor de los dos, no la suma,
   y deja de salirse del marco por arriba y por abajo. */
@media(max-width:899px){
  .chapter.sistema-relevo .copy{
    display:grid;
    grid-template-columns:100%;
    justify-items:center}
  .chapter.sistema-relevo .copy>.kicker      {grid-area:1/1}
  .chapter.sistema-relevo .copy>h2           {grid-area:2/1}
  .chapter.sistema-relevo .copy>.orbit       {grid-area:3/1;align-self:center;justify-self:center}
  .chapter.sistema-relevo .copy>.aviso-relevo{grid-area:3/1;align-self:center;width:100%}

  /* el aro se retira encogiendo: el mismo gesto con el que entro */
  .chapter.sistema-relevo .copy>.orbit{
    transition:opacity .72s var(--e3,cubic-bezier(.16,.84,.34,1)),
               transform .72s var(--e3,cubic-bezier(.16,.84,.34,1)),
               filter .72s var(--e3,cubic-bezier(.16,.84,.34,1))}
  .chapter.sistema-relevo.aro-cerrado .copy>.orbit{
    opacity:0;transform:scale(.9);filter:blur(3px);pointer-events:none}

  /* el aviso llega detras, con el retardo justo para que no se pisen */
  .chapter.sistema-relevo .copy>.aviso-relevo{
    opacity:0;transform:translateY(22px);pointer-events:none;
    transition:opacity .78s var(--e3,cubic-bezier(.16,.84,.34,1)) .16s,
               transform .78s var(--e3,cubic-bezier(.16,.84,.34,1)) .16s}
  .chapter.sistema-relevo.aro-cerrado .copy>.aviso-relevo{
    opacity:1;transform:none;pointer-events:auto}
  .chapter.sistema-relevo .aviso-relevo>.sistema-learn{margin-top:0}
}

/* En escritorio no hace falta relevo: caben los dos, uno a cada lado. Pero
   el envoltorio rompe el emparejado por hijo directo —display:contents no
   cambia el arbol para los selectores—, asi que las dos piezas se vuelven a
   colocar desde dentro de el. */
@media(min-width:900px){
  .chapter.sistema-relevo .aviso-relevo{display:contents}
  .chapter.sistema-relevo .aviso-relevo>.sistema-learn{grid-column:1;grid-row:3;max-width:30ch}
  .chapter.sistema-relevo .aviso-relevo>.coach-card   {grid-column:1;grid-row:4;margin-top:1.6vh}
  .chapter.sistema-relevo .copy>.orbit{
    opacity:1;transform:none;filter:none;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){
  .chapter.sistema-relevo .copy>.orbit,
  .chapter.sistema-relevo .copy>.aviso-relevo{transition:none}
}

/* ── el aviso deja de ser una caja ──────────────────────────────────────
   Salia como un rectangulo relleno en medio de la escena: un marco, que es
   justo lo que no puede haber. Se queda solo la luz que lo sostiene: un
   filete dorado a la izquierda y una veladura que se apaga hacia fuera. */
.coach-card,
.chapter .coach-card{
  background:linear-gradient(90deg,#d4aa7014 0%,#d4aa7005 38%,transparent 82%)!important;
  border:0!important;border-radius:0!important;
  box-shadow:inset 2px 0 0 var(--oro,#d4aa70);
  padding:calc(1.6vh * var(--aire,1)) 0 calc(1.4vh * var(--aire,1)) 16px;
  text-align:left}
.coach-card .cc-head{margin-bottom:.5em}
.coach-card .cc-fix{border-top:0!important;
  margin-top:calc(1.3vh * var(--aire,1));padding-top:calc(1.1vh * var(--aire,1));
  position:relative}
.coach-card .cc-fix::before{content:"";position:absolute;left:0;top:0;
  width:3.2em;height:1px;background:#d4aa7059}

/* ── PRODUCTO: en escritorio, titular a un lado y ficha al otro ─────────
   Apilado pedia 976 px de los 730 que hay, y el ajuste lo dejaba todo al
   60 %: titular de 67 px encogido a 40 y la ficha ilegible. Se compone como
   el sistema y el piloto —que es como lo hace la presentacion en su escena
   ancha—: el titular ocupa su columna y la ficha la suya. La altura pasa a
   ser la mayor de las dos, 668, y la letra vuelve a su tamano. */
@media(min-width:900px){
  .chapter.prod .copy{
    display:grid;
    grid-template-columns:.52fr 1.48fr;
    column-gap:4vw;row-gap:0;
    align-items:center;
    max-width:min(1340px,95vw);
    text-align:left}
  .chapter.prod .copy>.kicker         {grid-column:1;grid-row:1;align-self:end}
  .chapter.prod .copy>h2              {grid-column:1;grid-row:2;align-self:start;max-width:12ch}
  .chapter.prod .copy>.product-strip.two{grid-column:2;grid-row:1/3;margin-top:0}
  .chapter.prod .product-strip.two article{text-align:left}
}

/* La ficha por dentro, tambien en dos columnas: a la izquierda lo que se
   lee, a la derecha el ejemplo. Apilada pedia 735 px de los 730 y el ajuste
   la dejaba clavada al 57 %; asi mide lo que mide la columna mas alta. */
@media(min-width:1024px){
  .chapter.prod .product-strip.two article{
    display:grid;
    grid-template-columns:1.12fr .88fr;
    column-gap:2.2vw;
    align-content:center}
  .chapter.prod .product-strip.two article>h3       {grid-column:1;grid-row:1}
  .chapter.prod .product-strip.two article>.prod-tag{grid-column:1;grid-row:2}
  .chapter.prod .product-strip.two article>p:not(.prod-tag):not(.prod-sub){grid-column:1;grid-row:3}
  .chapter.prod .product-strip.two article>.prod-sub{grid-column:1;grid-row:4}
  .chapter.prod .product-strip.two article>.prod-visual{grid-column:2;grid-row:1/3;
    align-self:center;margin:0!important}
  .chapter.prod .product-strip.two article>.mini-brief{grid-column:2;grid-row:3/5;
    align-self:center;margin-top:0}
}

/* En pantallas bajas el dibujo abstracto cede el sitio al ejemplo con datos
   —"214 contactos reactivables", la cita que vence hoy—, que es el ejemplo
   que de verdad cuenta el producto. Son 112 px que la escena no tenia. */
@media(max-height:900px) and (max-width:1023px){
  .chapter.prod .prod-visual{display:none!important}
}

/* ═══ 2 · LA DIFERENCIA: la fila de VETA manda ═══════════════════════════
   Las tres filas pesaban lo mismo y la que importa —la nuestra— se leia
   como una mas. Ahora las dos de arriba se retiran (son el problema) y la
   de VETA se adelanta: mas cuerpo, mas luz, el filete dorado ancho y una
   veladura que sale de el. Sin caja: la jerarquia la hace la luz. */
.difference-grid{background:none!important;border:0!important;gap:0!important}

/* NADA DE MARCOS: los filetes de las hojas anteriores dibujaban una caja
   dorada de tres lados alrededor de la fila. Se quitan los cuatro bordes y
   la jerarquia se hace solo con luz, cuerpo y color. */
.difference-row,
.chapter.active .difference-row,
.difference-row.veta,
.chapter.active .difference-row.veta{
  border:0!important;background:transparent!important;box-shadow:none!important;
  position:relative;
  padding:calc(1.9vh * var(--aire,1)) 0 calc(1.9vh * var(--aire,1)) 18px}
/* el filete de separacion, degradado: linea donde hay texto, nada al final */
.difference-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,#f2ede626 0%,#f2ede610 46%,transparent 88%)}
.difference-row:first-child::before{display:none}

/* las dos primeras, un paso atras */
.difference-row:not(.veta){opacity:.5}
.difference-row:not(.veta) span{font-size:calc(clamp(1.05rem,4.4vw,2.1rem) * var(--ajuste,1))}
.difference-row:not(.veta) b{color:#8f867b}
.difference-row:not(.veta) .row-sub{color:#7d756b}

/* la de VETA, un paso adelante: mas cuerpo, blanca y encendida, con una
   veladura que sale del filete y se apaga hacia fuera */
.difference-row.veta,
.chapter.active .difference-row.veta{
  opacity:1;
  background:linear-gradient(100deg,#f7ead41c 0%,#d4aa700f 34%,transparent 84%)!important;
  padding-top:calc(3vh * var(--aire,1));
  padding-bottom:calc(3vh * var(--aire,1));
  margin-top:calc(1.4vh * var(--aire,1))}
.difference-row.veta::before{
  background:linear-gradient(90deg,#d4aa70b3 0%,#d4aa7040 40%,transparent 86%);
  height:1px}
/* el filete vertical se enciende cuando la fila entra */
.difference-row.veta::after{
  content:"";position:absolute;left:0;top:0;width:3px;height:100%;
  background:linear-gradient(180deg,var(--oro,#d4aa70),#d4aa7040);
  box-shadow:0 0 26px 3px #d4aa7080;
  transform:scaleY(0);transform-origin:0 0;
  transition:transform 1.05s var(--e3,cubic-bezier(.16,.84,.34,1)) .3s}
.difference-row.veta.mx-in::after{transform:scaleY(1)}

/* en blanco y encendida: el amarillo fuera del cuerpo del texto */
.difference-row.veta span,
.difference-row.veta span .mi,
.difference-row.veta span .hl,
.difference-row.veta span b{
  color:var(--ink,#F2EDE6)!important;
  text-shadow:0 0 34px #fff0d63d,0 0 90px #d4aa7024}
.difference-row.veta span{
  font-size:calc(clamp(1.42rem,5.8vw,2.9rem) * var(--ajuste,1));
  line-height:1.08}
.difference-row.veta>b{color:var(--oro,#d4aa70)!important;opacity:1}
.difference-row.veta>b .veta-w{font-size:1.2em;opacity:1}
.difference-row.veta .row-sub{
  color:#f2ede6a6!important;
  font-size:calc(.9rem * var(--ajuste,1));
  margin-top:.6em}

/* ═══ 3 · EL CIERRE: el techo retroiluminado ════════════════════════════
   Al llegar al fondo del todo, el techo del que cuelgan las luces se
   enciende por detras en blanco. La intensidad la lleva --luz-techo, que
   sube con el recorrido: no es un interruptor, es la luz entrando. */
.chapter.final .frame{position:relative;overflow:hidden}
.chapter.final .frame>.copy{position:relative;z-index:3}

.techo{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:190%;height:52svh;pointer-events:none;z-index:1;
  opacity:calc(var(--luz-techo,0) * 1)}
/* la pantalla de luz: sale del techo y se derrama hacia abajo */
.techo::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(118% 96% at 50% -22%,
      rgba(255,253,249,.92) 0%,
      rgba(255,248,236,.52) 20%,
      rgba(255,241,220,.22) 38%,
      rgba(212,170,112,.09) 58%,
      transparent 76%);
  filter:blur(1px)}
/* el filo del techo, encendido de lado a lado */
.techo::after{content:"";position:absolute;left:8%;right:8%;top:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,#fffdf8 22%,#fff 50%,#fffdf8 78%,transparent 100%);
  box-shadow:0 0 30px 8px rgba(255,251,243,.55),
             0 0 90px 26px rgba(255,236,203,.26)}

/* con el techo encendido, el cierre se aclara: la marca y el copy reciben
   esa luz en vez de quedarse planos sobre el negro */
html.techo-vivo .chapter.final .final-mark{
  filter:drop-shadow(0 0 calc(26px * var(--luz-techo,0)) rgba(255,250,240,.5))}
html.techo-vivo .chapter.final .tagline{
  color:color-mix(in srgb,var(--ink,#F2EDE6) calc(60% + 40% * var(--luz-techo,0)),transparent)}

/* barrido lateral: el mismo de la presentacion, tal cual */
.chapter.final .barrido{position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden}
.chapter.final .barrido::before{content:"";position:absolute;
  top:-30%;left:-60%;width:46%;height:160%;transform:rotate(14deg);
  background:linear-gradient(90deg,transparent 0%,
    rgba(250,248,243,.10) 42%,rgba(250,248,243,.18) 52%,transparent 100%);
  animation:barre 7.5s cubic-bezier(.5,0,.3,1) 1.1s infinite}
@keyframes barre{0%{left:-60%}55%,100%{left:130%}}
@media(prefers-reduced-motion:reduce){
  .chapter.final .barrido::before{animation:none;opacity:0}
}

/* El cierre NO lleva recorrido extra: con min-height:190svh el marco se
   despegaba antes de llegar al fondo y la ultima pantalla salia en negro,
   sin marca ni copy. Se queda como estaba y la luz la lleva la cercania al
   fondo de la pagina, que es lo que se pedia. */

/* ═══ 4 · LA TRANSICION ENTRE ESCENAS ════════════════════════════════════
   Copiadas de la presentacion tal cual (.bands): siete bandas del color
   del fondo tapan la escena y se retiran hacia la izquierda escalonadas.
   La escena no aparece de golpe, se destapa. Es la transicion que se veia
   en el enlace y que aqui no existia. */
.bandas{position:absolute;inset:0;z-index:20;pointer-events:none;
  display:flex;flex-direction:column;overflow:hidden}
.bandas i{flex:1 1 0;display:block;background:var(--banda,#050506);
  transform:translateX(0);
  transition:transform .82s cubic-bezier(.76,0,.24,1) var(--bd,0s)}
.chapter.escena-abierta .bandas i{transform:translateX(-101%)}
.bandas i:nth-child(1){--bd:0s}
.bandas i:nth-child(2){--bd:.055s}
.bandas i:nth-child(3){--bd:.11s}
.bandas i:nth-child(4){--bd:.165s}
.bandas i:nth-child(5){--bd:.22s}
.bandas i:nth-child(6){--bd:.275s}
.bandas i:nth-child(7){--bd:.33s}
/* el cierre se destapa sobre luz, no sobre negro */
.chapter.final .bandas i{background:#050403}
@media(prefers-reduced-motion:reduce){
  .bandas i{transition:none;transform:translateX(-101%)}
}

/* ═══ 5 · LA PALABRA GIGANTE, QUE NO VUELVA A PARECER UN MARCO ══════════
   Sus letras en contorno caen justo detras de las filas de la comparativa
   y sus astas verticales y horizontales dibujan rectangulos alrededor del
   texto: exactamente el "hay como un marco" de antes. Se le baja el trazo
   y se apaga hacia abajo, que es donde estan las filas. Sigue estando —da
   profundidad— pero ya no encierra nada. */
.giant{
  -webkit-text-stroke:1px #F2EDE614!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 26%,#0006 52%,transparent 78%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 26%,#0006 52%,transparent 78%)}

/* ═══ 6 · EL TECHO, CON MAS CUERPO ══════════════════════════════════════
   La primera version se leia como una veladura. Se busca lo que dice el
   fundador: que el techo se retroilumine en blanco. Dos capas — la pantalla
   ancha y un nucleo mas apretado— y el filo bien marcado. */
.techo{height:56svh}
.techo::before{
  background:
    radial-gradient(78% 62% at 50% -8%,
      rgba(255,254,251,.62) 0%, rgba(255,250,241,.30) 26%, transparent 62%),
    radial-gradient(126% 104% at 50% -20%,
      rgba(255,253,249,.98) 0%,
      rgba(255,249,238,.60) 18%,
      rgba(255,242,222,.28) 36%,
      rgba(212,170,112,.11) 58%,
      transparent 78%)}
.techo::after{left:5%;right:5%;height:3px;
  box-shadow:0 0 40px 12px rgba(255,252,246,.62),
             0 0 120px 34px rgba(255,238,206,.32)}

/* ═══ 7 · LOS ULTIMOS TEXTOS EN PESO 300 ════════════════════════════════
   Las etiquetas dentro de los SVG («Puedo bajar a 840.», "Conocimiento")
   heredaban el 300 del cuerpo: eran las ultimas letras pequenas con la
   pinta antigua. Pasan al peso de la presentacion. */
.pv-lab,.pv-lab.out,
.conv-visual text,.prod-visual text{
  font-family:var(--S,"Satoshi"),sans-serif!important;
  font-weight:500!important;letter-spacing:.01em}
.pv-lab.out{font-weight:600!important;letter-spacing:.16em}

/* ═══ 8 · LA LUZ, EN TODOS LOS TITULOS ══════════════════════════════════
   Se encendian los titulares y los rotulos de las escenas de texto, pero
   no los de las demas: el rotulo de escena, la palabra grande del aro, las
   cifras del piloto, la fila de VETA, el aviso, el remate del cierre. Ahora
   se enciende todo lo que hace de titulo, desde el primer beat de la intro
   hasta la ultima pantalla. */
.sig-beat .beat-quote.viva,
.chapter.beats .copy h2.viva,
.chapter .copy h1.mx-in,
.chapter .copy h2.mx-in,
.chapter .copy .kicker.mx-in,
.product-strip h3.mx-in,
.scene-lines .lit.mx-in,
.difference-row.veta.mx-in span,
.pilot-metric.mx-in>span,
.chapter .copy .coach-card.mx-in .cc-body,
.chapter.final .tagline.mx-in,
.chapter.final .final-note.mx-in b{
  animation:luz-titulo 1.6s var(--e3,cubic-bezier(.16,.84,.34,1)) both}
/* la palabra grande del aro se enciende en cada fase, no solo al entrar */
.orbit .cyc-fase,.orbit-core>b{
  animation:luz-titulo 1.6s var(--e3,cubic-bezier(.16,.84,.34,1)) both}
/* y la marca del cierre, que es el titulo de la ultima pantalla */
.chapter.final .final-mark.mx-in{
  animation:luz-marca 1.9s var(--e3,cubic-bezier(.16,.84,.34,1)) both}
@keyframes luz-marca{
  0%  {filter:drop-shadow(0 0 0 #F2EDE600)}
  52% {filter:drop-shadow(0 0 26px #F2EDE68a)}
  100%{filter:drop-shadow(0 0 16px #F2EDE644)}}

/* ═══ 9 · LO YA LEIDO SE VA AL GRIS ═════════════════════════════════════
   Cuando el recorrido de la escena ha pasado de largo un bloque, ese bloque
   deja de competir: pierde la luz, pierde el color y se queda en gris. La
   ultima pieza de cada escena no se apaga — es la que remata. */
/* OJO CON LA ESPECIFICIDAD: `.mx-leido{color:...!important}` es (0,1,0) y
   perdia contra las reglas de rol de la hoja maestra —`.chapter .copy
   .kicker{color:...!important}`, (0,3,0)—, asi que la opacidad bajaba pero
   el color se quedaba en blanco. Medido: rgb(242,237,230) @0.40. Se sube el
   peso del selector por encima de todas ellas. */
html body .chapter .copy .mx-leido,
html body .chapter .copy .mx-leido *{
  color:#8b857d!important;
  text-shadow:none!important;
  transition:color .85s var(--e3,cubic-bezier(.16,.84,.34,1)),
             opacity .85s var(--e3,cubic-bezier(.16,.84,.34,1)),
             text-shadow .6s var(--e3,cubic-bezier(.16,.84,.34,1))!important}
html body .chapter .copy .mx-leido{opacity:.4!important}
/* la marca es una mascara, no texto: se apaga con opacidad */
html body .chapter .copy .mx-leido .veta-w{opacity:.5}
/* y sus filetes y veladuras se retiran con el bloque */
html body .chapter .copy .mx-leido::before,
html body .chapter .copy .mx-leido::after{opacity:.24;
  transition:opacity .85s var(--e3,cubic-bezier(.16,.84,.34,1))}
html body .chapter .copy .difference-row.veta.mx-leido{background:none!important}
html body .chapter .copy .coach-card.mx-leido{
  background:none!important;box-shadow:inset 2px 0 0 #8b857d59}
/* mientras esta apagado no se le vuelve a poner la animacion de luz */
html body .chapter .copy .mx-leido,
html body .chapter .copy .mx-leido *{animation:none!important}
@media(prefers-reduced-motion:reduce){
  .mx-leido,[data-mx].mx-leido{opacity:1!important;color:inherit!important}
}

/* Los titulares NO se encendian. La regla que apaga la animacion del sitio
   —`.chapter.active .copy>h2{animation:none!important}`, puesta para matar
   su ttl-on dorado— se llevaba por delante tambien mi luz, porque animation
   es una propiedad sola y no se puede apagar una y dejar la otra. Se
   reafirma por encima, con !important y el mismo peso. Medido: antes de
   esto, encendidos en el capitulo 2 = solo el rotulo. */
html body .chapter .copy h1.mx-in,
html body .chapter .copy h2.mx-in,
html body .chapter.active .copy>h2.mx-in,
html body .chapter .product-strip h3.mx-in,
html body .chapter.active .product-strip h3.mx-in,
html body .chapter.active .product-strip article:first-child h3.mx-in,
html body .chapter.active .product-strip article:nth-child(2) h3.mx-in,
html body .chapter .scene-lines .lit.mx-in b{
  animation:luz-titulo 1.6s var(--e3,cubic-bezier(.16,.84,.34,1)) both!important}

/* ═══ 10 · LAS SIETE COREOGRAFIAS DE TITULAR ════════════════════════════
   Portadas de la hoja de la presentacion tal cual —mismos tiempos, mismas
   curvas, mismos escalonados—, con sus envoltorios .wd/.wi traducidos a los
   nuestros .mw/.mi y disparadas con .mx-in en vez de .on.

   Especificidad: la base es `[data-mx="words"] .mi` (0,2,0), asi que cada
   coreografia se escribe con la clase en el propio titular, (0,3,0), para
   ganarle sin !important. */
[data-mx="words"].co-scatter .mw,
[data-mx="words"].co-blur .mw,
[data-mx="words"].co-scale .mw,
[data-mx="words"].co-flip .mw,
[data-mx="words"].co-track .mw{overflow:visible;padding:0;margin:0}

/* dispersion */
[data-mx="words"].co-scatter .mi{
  opacity:0;filter:blur(10px);
  transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rr,0deg));
  transition:transform .72s cubic-bezier(.19,1,.22,1) calc(var(--i,0)*62ms),
             opacity .5s ease calc(var(--i,0)*62ms),
             filter .6s ease calc(var(--i,0)*62ms)}
[data-mx="words"].co-scatter.mx-in .mi{opacity:1;filter:blur(0);transform:none}

/* tracking que colapsa */
[data-mx="words"].co-track .mi{
  opacity:0;letter-spacing:.22em;
  transition:opacity .42s ease calc(var(--i,0)*70ms),
             letter-spacing .9s cubic-bezier(.19,1,.22,1) calc(var(--i,0)*70ms);
  transform:none}
[data-mx="words"].co-track.mx-in .mi{opacity:1;letter-spacing:0;transform:none}

/* desenfoque sereno */
[data-mx="words"].co-blur .mi{
  opacity:0;filter:blur(14px);transform:scale(1.07);
  transition:opacity 1s ease calc(var(--i,0)*46ms),
             filter 1.1s ease calc(var(--i,0)*46ms),
             transform 1.2s cubic-bezier(.19,1,.22,1) calc(var(--i,0)*46ms)}
[data-mx="words"].co-blur.mx-in .mi{opacity:1;filter:blur(0);transform:none}

/* barrido lateral */
[data-mx="words"].co-wipe .mw{overflow:hidden}
[data-mx="words"].co-wipe .mi{
  clip-path:inset(0 100% 0 0);opacity:1;transform:none;
  transition:clip-path .6s cubic-bezier(.3,.9,.2,1) calc(var(--i,0)*80ms)}
[data-mx="words"].co-wipe.mx-in .mi{clip-path:inset(0 0 0 0)}

/* subida desde el renglon (la que ya teniamos) */
[data-mx="words"].co-mask .mw{overflow:hidden;vertical-align:bottom;
  padding:0 .04em .14em 0;margin:0 -.04em -.14em 0}
[data-mx="words"].co-mask .mi{
  opacity:1;transform:translateY(118%);
  transition:transform .8s cubic-bezier(.19,1,.22,1) calc(var(--i,0)*52ms)}
[data-mx="words"].co-mask.mx-in .mi{transform:none}

/* escala desde el centro */
[data-mx="words"].co-scale .mi{
  opacity:0;transform:scale(.72) translateY(14px);transform-origin:50% 100%;
  transition:opacity .55s ease calc(var(--i,0)*58ms),
             transform .8s cubic-bezier(.34,1.4,.5,1) calc(var(--i,0)*58ms)}
[data-mx="words"].co-scale.mx-in .mi{opacity:1;transform:none}

/* volteo 3D sobre el renglon */
[data-mx="words"].co-flip .mw{perspective:700px;display:inline-block}
[data-mx="words"].co-flip .mi{
  opacity:0;transform:rotateX(-78deg);transform-origin:50% 100%;
  transition:opacity .5s ease calc(var(--i,0)*64ms),
             transform .82s cubic-bezier(.24,1.1,.32,1) calc(var(--i,0)*64ms)}
[data-mx="words"].co-flip.mx-in .mi{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  [data-mx="words"] .mi{opacity:1!important;transform:none!important;
    filter:none!important;clip-path:none!important;letter-spacing:normal!important}
}

/* ═══ 11 · LAS LETRAS GRANDES DEL FONDO ═════════════════════════════════
   Estaban paradas —`.giant{animation:none}`— y sólo se movían de rebote con
   el scroll. Vuelven a derivar en bucle, siempre, y se ven algo más: el
   trazo sube de #F2EDE614 a #F2EDE62b. Sigue apagándose hacia abajo para no
   volver a dibujar rectángulos detrás de los textos. */
.giant,
html .giant{
  -webkit-text-stroke:1.4px #F2EDE62b!important;
  animation:deriva-gigante 42s ease-in-out infinite!important;
  will-change:transform}
@media(max-width:820px){
  .giant,html .giant{-webkit-text-stroke-width:1.1px!important}
}
@keyframes deriva-gigante{
  0%  {transform:translate(-50%,-50%) translateX(-7vw)}
  50% {transform:translate(-50%,-50%) translateX(7vw)}
  100%{transform:translate(-50%,-50%) translateX(-7vw)}}
@media(prefers-reduced-motion:reduce){
  .giant,html .giant{animation:none!important;
    transform:translate(-50%,-50%)!important}
}

/* ═══ 12 · (RETIRADO) ═══════════════════════════════════════════════════
   Aqui hubo una pasada de bronce: mas facetas, mas opacas, con brillo de
   canto, y la pelicula sin apagarse en la escena del aro. El fundador la
   rechaza y se deshace entera.

   Lo importante que deja escrito: subir `html.aro-a-la-vista #webgl-film`
   del 10 % al 45 % DEVUELVE EL CIRCULO GASEOSO. Ese 10 % no es un capricho
   de contraste: es lo unico que apaga el anillo de particulas de la
   pelicula, que ya se elimino por competir con el aro de la escena. No se
   vuelve a tocar. */

/* ═══ 13 · LOS ROTULOS, EN GRIS Y BIEN VISIBLES ════════════════════════
   Se probo bermellon y azul metalico; ninguno cuaja. Se quedan en gris.

   La unica dificultad es que se VEAN: van a 0,6 rem con mucho tracking y
   por detras pasa la pelicula moviendose, asi que un gris flojo desaparece.
   Se usa un gris claro y neutro (#C3BFB8) con un halo tenue que lo separa
   del fondo, y por debajo una sombra que le da filo sobre las zonas
   claras de la pelicula. Nada de degradados ni de relleno transparente:
   color plano, que es lo que se pide.

   Y tiene que quedar por encima del gris de "ya leido" (#8b857d): de un
   vistazo se distingue lo que queda por leer de lo ya leido.

   Especificidad: los rotulos vienen con color !important desde la hoja
   maestra (`.chapter .copy .kicker`, (0,3,0)) y desde el blindaje de la
   intro (`.chapter.beats .sig-beat .beat-source`, (0,4,0)). Se escribe por
   encima de las dos. */
:root{--gris-rotulo:#C3BFB8}

html body .chapter .copy .kicker,
html body .chapter.beats .sig-beat .beat-source,
html body .chapter .copy .cc-head,
html body .chapter .copy .mb-head,
html body .chapter .copy .prod-tag,
html body .chapter.final .tagline{
  color:var(--gris-rotulo)!important;
  background:none!important;
  -webkit-text-fill-color:var(--gris-rotulo)!important;
  text-shadow:0 0 18px #C3BFB840,0 0 46px #C3BFB81c,0 1px 9px #000000b3!important;
  filter:none}

/* el filete bajo los rotulos de la intro, del mismo gris */
html body .chapter.beats .sig-beat .beat-source::after{
  background:linear-gradient(90deg,transparent,#C3BFB88c,transparent)!important}

/* el numeral de la ficha se queda en bronce: es cifra, no rotulo */
html body .chapter .copy .prod-tag::before{
  color:var(--acc,#E2C067)!important;
  -webkit-text-fill-color:var(--acc,#E2C067)!important;
  background:none!important;text-shadow:none!important}
/* y la marca dentro de un rotulo sigue siendo la marca: es mascara, no letra */
html body .chapter .copy .cc-head .veta-w,
html body .chapter .copy .mb-head .veta-w{
  background:var(--oro,#d4aa70)!important;
  -webkit-text-fill-color:transparent!important}

/* la luz de entrada del rotulo: sube y se asienta, sin color */
html body .chapter .copy .kicker.mx-in,
html body .chapter.final .tagline.mx-in{
  animation:rotulo-gris 1.5s var(--e3,cubic-bezier(.16,.84,.34,1)) both!important}
@keyframes rotulo-gris{
  0%  {text-shadow:none}
  48% {text-shadow:0 0 26px #E6E2DB9e,0 0 66px #C3BFB840,0 1px 9px #000000b3}
  100%{text-shadow:0 0 18px #C3BFB840,0 0 46px #C3BFB81c,0 1px 9px #000000b3}}

/* leido, el rotulo baja al gris apagado: la diferencia entre lo que queda
   por leer (#C3BFB8) y lo ya leido (#8b857d) se ve de un vistazo */
html body .chapter .copy .mx-leido .kicker,
html body .chapter .copy .kicker.mx-leido,
html body .chapter .copy .mx-leido .cc-head,
html body .chapter .copy .mx-leido .mb-head,
html body .chapter .copy .mx-leido .prod-tag{
  color:#8b857d!important;
  -webkit-text-fill-color:#8b857d!important;
  background:none!important;
  text-shadow:none!important;filter:none!important;animation:none!important}

/* En la comparativa las astas de la palabra gigante caen justo en los bordes
   de las filas y, al subirle el trazo, volvian a insinuar rectangulos. Solo
   en esta escena se apaga antes. */
.chapter:has(.difference-grid) .giant,
html .chapter:has(.difference-grid) .giant{
  -webkit-text-stroke-color:#F2EDE614!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#0009 18%,#0000 42%)!important;
  mask-image:linear-gradient(to bottom,#000 0%,#0009 18%,#0000 42%)!important}

/* ═══ 14 · LOS TITULOS SE EXPANDEN ═════════════════════════════════════
   Entran comprimidos y se abren hasta su ancho. Se expande mas en X que en
   Y —eso es lo que se lee como "abrirse" y no como "crecer"— con un punto
   de sobrepaso antes de asentar. Del primero al ultimo: los tres beats de
   la intro, todos los titulares, los de ficha, las lineas de escena y el
   remate del cierre.

   El origen depende de como este alineada la escena, que si no el titular
   parece que se desliza en vez de abrirse. */
@keyframes expande{
  0%  {transform:scaleX(.82) scaleY(.94)}
  58% {transform:scaleX(1.022) scaleY(1.005)}
  100%{transform:none}}

html body .chapter .frame.center .copy h2,
html body .chapter .frame.center .copy h3,
html body .chapter .frame.center .copy .lit,
html body .chapter.beats .frame.center .beat-quote,
html body .chapter.final .frame.center .tagline{transform-origin:50% 50%}
html body .chapter .frame:not(.center):not(.align-right) .copy h2,
html body .chapter .frame:not(.center):not(.align-right) .copy h3,
html body .chapter .frame:not(.center):not(.align-right) .copy .lit{transform-origin:0% 50%}
html body .chapter .frame.align-right .copy h2,
html body .chapter .frame.align-right .copy .lit{transform-origin:100% 50%}

/* la expansion se suma a la luz que ya llevaban: las dos en la misma
   declaracion, que animation es una sola propiedad */
html body .chapter .copy h1.mx-in,
html body .chapter .copy h2.mx-in,
html body .chapter.active .copy>h2.mx-in,
html body .chapter .product-strip h3.mx-in,
html body .chapter.active .product-strip h3.mx-in,
html body .chapter.active .product-strip article:first-child h3.mx-in,
html body .chapter.active .product-strip article:nth-child(2) h3.mx-in{
  animation:luz-titulo 1.6s var(--e3,cubic-bezier(.16,.84,.34,1)) both,
            expande 1.05s var(--e3,cubic-bezier(.16,.84,.34,1)) both!important}
html body .chapter .scene-lines .lit.mx-in{
  animation:expande 1.05s var(--e3,cubic-bezier(.16,.84,.34,1)) both!important}
html body .chapter .scene-lines .lit.mx-in b{
  animation:luz-titulo 1.6s var(--e3,cubic-bezier(.16,.84,.34,1)) both!important}
/* la intro: el mismo gesto, sin tocar como fluye ni su formato */
html body .chapter.beats .sig-beat .beat-quote.viva{
  animation:luz-titulo 1.6s var(--e3,cubic-bezier(.16,.84,.34,1)) both,
            expande 1.05s var(--e3,cubic-bezier(.16,.84,.34,1)) both!important}
/* y el remate del cierre */
html body .chapter.final .tagline.mx-in{
  animation:rotulo-gris 1.5s var(--e3,cubic-bezier(.16,.84,.34,1)) both,
            expande 1.05s var(--e3,cubic-bezier(.16,.84,.34,1)) both!important}

@media(prefers-reduced-motion:reduce){
  html body .chapter .copy h2.mx-in,
  html body .chapter .copy h3.mx-in,
  html body .chapter .scene-lines .lit.mx-in,
  html body .chapter.beats .sig-beat .beat-quote.viva,
  html body .chapter.final .tagline.mx-in{animation:none!important;transform:none!important}
}

/* ═══ 15 · EL TECHO: RETROILUMINACION, NO UNA BANDA BLANCA ══════════════
   Se pedia que el techo se retroiluminara y se subio de mas: el filo iba a
   3 px de casi-blanco pegado al borde superior y, con la luz al maximo, el
   tope de la escena se leia como una banda blanca. La luz se queda; lo que
   se va es el filo duro. El nucleo del resplandor sube por encima del borde
   para que dentro de la pantalla solo entre su caida. */
.techo::after{display:none}
.techo{height:62svh}
.techo::before{
  background:
    radial-gradient(74% 54% at 50% -26%,
      rgba(255,253,248,.42) 0%, rgba(255,249,238,.20) 30%, transparent 66%),
    radial-gradient(132% 108% at 50% -40%,
      rgba(255,252,246,.60) 0%,
      rgba(255,248,236,.34) 20%,
      rgba(255,241,220,.18) 40%,
      rgba(212,170,112,.08) 62%,
      transparent 80%);
  filter:blur(2px)}

/* ═══ 16 · LAS LETRAS GRANDES, EN MARQUESINA ════════════════════════════
   En la presentacion no son una palabra quieta: son una marquesina que
   cruza la escena —`.marq span`, 700, hasta 7rem, versales, ls -.03em, con
   translateX(0 → -50%) en 34 s lineales y las orillas fundidas—. Aqui la
   palabra estaba centrada y sólo derivaba ±7vw, asi que ni se movia de
   verdad ni se veia.

   Se copia el device tal cual. Y se vuelve a RELLENO en vez de contorno:
   el contorno era lo que dibujaba rectangulos detras del texto; relleno y
   en movimiento se lee como textura, que es como funciona en el enlace. */
.giant,
html .giant{
  left:0!important;top:50%!important;width:100%!important;
  transform:translateY(-50%)!important;
  display:block!important;overflow:hidden!important;white-space:nowrap!important;
  -webkit-text-stroke:0!important;
  color:transparent!important;
  animation:none!important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)!important;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)!important}
.giant > i{
  display:inline-block;font-style:normal;
  font-family:"Clash","Satoshi",sans-serif;font-weight:700;
  font-size:clamp(2.4rem,11vw,7rem);line-height:1;
  letter-spacing:-.03em;text-transform:uppercase;
  color:#F2EDE614;
  animation:marquesina 34s linear infinite;
  will-change:transform}
@keyframes marquesina{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* en la comparativa baja de voz: ahi las filas son densas */
.chapter:has(.difference-grid) .giant > i{color:#F2EDE60d}
@media(prefers-reduced-motion:reduce){
  .giant > i{animation:none}
}


/* ── web_intro_blindaje.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   BLINDAJE DE LA INTRO
   Los tres beats (WhatsApp / Llamada / Nota de voz) se quedan como están:
   el fundador dice que ahí la web ya es mejor que la presentación. Esta hoja
   va la ÚLTIMA en el ensamblador, así que cualquier port posterior que
   intente cambiarles la tipografía o la colocación se estrella aquí.
   ═══════════════════════════════════════════════════════════════════════ */
.chapter.beats .sig-beat{
  text-align:center!important;
  width:min(920px,88vw)!important;
  position:absolute!important;top:50%!important;left:50%!important}
.chapter.beats .sig-beat .beat-source{
  font-family:var(--S)!important;font-size:.55rem!important;font-weight:600!important;
  letter-spacing:.4em!important;text-transform:uppercase!important;
  color:#F2EDE66e!important;text-shadow:none!important;
  margin-bottom:5.5vh!important;display:block!important}
@media(max-width:650px){
  .chapter.beats .sig-beat .beat-source{font-size:.52rem!important;letter-spacing:.36em!important}
}
.chapter.beats .sig-beat .beat-quote{
  font-family:var(--D)!important;font-weight:500!important;
  letter-spacing:-.015em!important;line-height:1.12!important;
  text-transform:none!important;
  font-size:clamp(2.1rem,4.6vw,4rem)!important;
  max-width:none!important;margin:0!important;color:var(--marfil)!important}


/* ── web_portada.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   LAS DOS PRIMERAS PANTALLAS — que sean de la misma casa
   ───────────────────────────────────────────────────────────────────────
   La de idiomas y la intro venían de otra estética: Fraunces en caja baja,
   cursiva dorada, y de fondo sólo una veladura. Al lado de la principal
   —Clash en versales, grande, con la película y las facetas detrás—
   parecían de otra web.

   TAMAÑOS. No van las tres iguales: las líneas tienen longitudes y papeles
   muy distintos, y a un mismo cuerpo la corta se pierde y la larga aplasta.
   Se compone como compone la principal —un titular de display y una nota en
   Satoshi—, con la línea corta como golpe:
       l1  el titular          display, grande
       l2  «Ahora mismo.»      display, el MÁS grande, en dorado — es el golpe
       l3  la nota             Satoshi, cuerpo de lectura
   ═══════════════════════════════════════════════════════════════════════ */

.entry .l1,
.entry .l2{
  font-family:"Clash","Satoshi",sans-serif!important;
  font-weight:700!important;font-style:normal!important;
  text-transform:uppercase!important;
  letter-spacing:-.03em!important;line-height:1.02!important;
  transform-origin:50% 50%}

.entry .l1{
  font-size:clamp(2rem,8.4vw,4.4rem)!important;
  max-width:14ch!important;color:var(--ink,#F2EDE6)!important;
  text-shadow:0 0 22px #F2EDE640,0 0 60px #F2EDE61a}

.entry .l2{
  font-size:clamp(2.4rem,11vw,5.6rem)!important;
  color:var(--oro,#d4aa70)!important;
  text-shadow:0 0 26px #d4aa7059,0 0 70px #d4aa7024}

.entry .l3{
  font-family:"Satoshi",sans-serif!important;font-weight:400!important;
  font-size:clamp(1rem,3.9vw,1.22rem)!important;
  line-height:1.55!important;letter-spacing:normal!important;
  max-width:34ch!important;color:#F2EDE6b3!important}

/* la llamada, como el CTA de la principal */
.entry .cta{
  font-family:"Satoshi",sans-serif!important;font-weight:600!important;
  letter-spacing:.32em!important}

/* ── la pantalla de idiomas, con el aire de la principal ─────────────── */
.pick .langs a{
  font-family:"Satoshi",sans-serif!important;font-weight:600!important;
  font-size:clamp(.72rem,2.6vw,.9rem)!important;
  letter-spacing:.36em!important;text-transform:uppercase!important;
  color:#C3BFB8!important;
  text-shadow:0 0 18px #C3BFB840,0 0 46px #C3BFB81c,0 1px 9px #000000b3}
.pick .langs a:hover,.pick .langs a:focus-visible{color:var(--ink,#F2EDE6)!important}

/* ── EL FONDO: las mismas capas que la principal ─────────────────────── */
/* los campos de luz que derivan, las facetas de bronce y la palabra
   gigante en contorno. Van detrás de todo lo suyo (.mesh es z-index 1,
   .entry z-index 3), así que se quedan en el 0. */
.pick .amb,.entry-fondo .amb,
.pick .facetas,.entry-fondo .facetas,
.pick .giant,.entry-fondo .giant{z-index:0}
/* Por delante del canvas de la roca (z0) y de las mallas doradas (z1), y por
   detras del contenido (z3). Aqui vive todo lo calido; si queda debajo del
   canvas no se ve nada de ello. */
.veta-fondo{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.veta-fondo .giant{
  position:absolute;left:50%;top:50%;
  font-family:"Clash",sans-serif;font-weight:700;letter-spacing:-.05em;
  line-height:1;font-size:clamp(6rem,30vw,22rem);text-transform:uppercase;
  white-space:nowrap;color:transparent;
  -webkit-text-stroke:1.4px #F2EDE62b;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 26%,#0006 52%,transparent 78%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 26%,#0006 52%,transparent 78%);
  animation:deriva-gigante 42s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .veta-fondo .giant{animation:none;transform:translate(-50%,-50%)}
  .veta-fondo .facetas{display:none}
}


/* ═══ LA SEGUNDA PANTALLA, A UN LATERAL ═════════════════════════════════
   Estaba todo centrado y apilado en el eje: se leia como una portada de
   plantilla. Puesto a un lado hay jerarquia —el texto ocupa su columna y el
   fondo respira en la otra mitad— y ademas la palabra gigante y las facetas
   dejan de pelearse con el texto, porque ya no comparten el centro.

   En movil se queda a la izquierda pero ocupando casi todo el ancho: partir
   una columna de 34ch en una pantalla de 390px no deja nada legible. */
.entry{
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
  padding-inline:clamp(1.6rem,7vw,7rem)!important}
.entry .l1,.entry .l2,.entry .l3,.entry .cta{
  align-self:flex-start!important;
  transform-origin:0% 50%}
.entry .l3{max-width:32ch!important}
@media(min-width:900px){
  .entry{padding-inline:clamp(3rem,9vw,10rem)!important}
  .entry .l1{max-width:15ch!important}
  .entry .l3{max-width:36ch!important}
}

/* Las tres lineas entran con el vocabulario de la principal: suben con un
   punto de sobrepaso y se abren en X, escalonadas. La entrada que ya traia
   la pagina (ln-in) sigue siendo la que sube la opacidad: esto se COMPONE
   con ella, no la sustituye —escribir `animation` entera dejaria el texto
   invisible, que es como se rompio la primera vez—. */
@keyframes entra-lateral{
  0%  {transform:translateX(-18px) scaleX(.9) scaleY(.97)}
  58% {transform:translateX(0) scaleX(1.02) scaleY(1.005)}
  100%{transform:none}}
.entry .l1.ln{animation:ln-in 2s ease var(--d,0s) both,
               entra-lateral 1.05s cubic-bezier(.16,.84,.34,1) var(--d,0s) both}
.entry .l2.ln{animation:ln-in 2s ease var(--d,0s) both,
               entra-lateral 1.05s cubic-bezier(.16,.84,.34,1) var(--d,0s) both,
               luz-titulo 1.6s cubic-bezier(.16,.84,.34,1) var(--d,0s) both}
.entry .l3.ln{animation:ln-in 2s ease var(--d,0s) both,
               entra-lateral .9s cubic-bezier(.16,.84,.34,1) var(--d,0s) both}
@media(prefers-reduced-motion:reduce){
  .entry .l1.ln,.entry .l2.ln,.entry .l3.ln{animation:ln-in 2s ease var(--d,0s) both}
}


/* ── web_secciones.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   PÁGINAS DE SECCIÓN — que se vean de la misma casa
   La veta, Evidencia, El piloto y el Aviso legal comparten la hoja con la
   principal, así que ya heredan Clash + Satoshi y la escala. Aquí sólo se
   afina lo suyo: el rótulo con el mismo gris, los titulares con el mismo
   cuerpo y la misma luz, y el botón con el CTA de siempre.
   ═══════════════════════════════════════════════════════════════════════ */
main .kicker,
main p.kicker,
main div.kicker{
  font-family:var(--S,"Satoshi"),sans-serif!important;
  font-size:.6rem!important;font-weight:600!important;
  letter-spacing:.4em!important;text-transform:uppercase!important;
  color:#C3BFB8!important;
  text-shadow:0 0 18px #C3BFB840,0 0 46px #C3BFB81c,0 1px 9px #000000b3}

main .display,
main h1,main h2{
  font-family:var(--D,"Clash"),sans-serif!important;
  font-weight:700!important;letter-spacing:-.03em!important;line-height:1.02!important;
  text-transform:uppercase}
main h3{font-family:var(--D,"Clash"),sans-serif!important;font-weight:700!important}

/* la luz y la expansión, igual que en la principal */
main .display.mx-in,main h1.mx-in,main h2.mx-in,main h3.mx-in{
  animation:luz-titulo 1.6s var(--e3,cubic-bezier(.16,.84,.34,1)) both,
            expande 1.05s var(--e3,cubic-bezier(.16,.84,.34,1)) both}
main .display,main h1,main h2,main h3{transform-origin:0% 50%}
main .kicker.mx-in{animation:rotulo-gris 1.5s var(--e3,cubic-bezier(.16,.84,.34,1)) both}

main .muted,main p{font-family:var(--S,"Satoshi"),sans-serif!important;font-weight:400}

/* lo ya leído, el mismo gris apagado */
main .mx-leido,main .mx-leido *{
  color:#8b857d!important;text-shadow:none!important;animation:none!important}
main .mx-leido{opacity:.42;transition:opacity .85s var(--e3,cubic-bezier(.16,.84,.34,1)),
  color .85s var(--e3,cubic-bezier(.16,.84,.34,1))}

/* respiración: estas páginas venían muy apretadas al lado de la principal */
main .section-pad{padding-block:clamp(6vh,9vh,12vh)}
main .container-v{max-width:min(920px,92vw)}


/* ── web_tramos.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   LOS TRAMOS DE SECCION — el mismo sistema, sin la maquinaria de la pelicula
   ───────────────────────────────────────────────────────────────────────
   Todo lo nuevo se escribio contra `.chapter`: el brillo de los titulos, su
   expansion, las bandas que destapan y la palabra gigante. Las secciones no
   tienen capitulos, asi que nada de eso les llegaba. Aqui se repite para
   `.tramo`, que es el `main section` que marca web_tramos.js.

   Lo que NO se copia es la maquinaria de escena: nada de `.frame` pegajoso,
   ni alto de pantalla, ni escenas clavadas. Estas son paginas de leer y
   tienen que seguir siendolo — se hereda el lenguaje, no el mecanismo.
   ═══════════════════════════════════════════════════════════════════════ */

.tramo{position:relative}

/* ── las bandas ──────────────────────────────────────────────────────────
   El contenedor ya lo estila la hoja de arreglos; lo que falta es la regla
   que las retira, que estaba escrita solo para `.chapter`. Y `overflow`
   acotado al propio tramo, que si no una banda que se va a la izquierda
   ensancha la pagina y aparece scroll horizontal. */
.tramo{overflow:clip}
.tramo > .bandas{z-index:20}
.tramo.escena-abierta > .bandas i{transform:translateX(-101%)}
/* pasada la transicion dejan de existir para el raton y para el lector */
.tramo.escena-abierta > .bandas{pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .tramo > .bandas i{transition:none;transform:translateX(-101%)}
}

/* ── la palabra gigante ──────────────────────────────────────────────────
   En la pelicula cruza una escena que ocupa la pantalla entera. Aqui cruza
   un bloque de texto, asi que baja de tamano y sobre todo de voz: en una
   pagina de lectura la textura no puede pelearse con lo que se lee. */
.tramo > .giant{
  top:50%;z-index:0;
  font-size:clamp(2rem,9vw,5.5rem)}
.tramo > .giant > i{
  font-size:clamp(2rem,9vw,5.5rem);
  color:#F2EDE60a}
/* el contenido, por delante de la textura */
.tramo > :not(.giant):not(.bandas){position:relative;z-index:1}

/* ── el brillo y la expansion de los titulos ─────────────────────────────
   NO van aqui: web_secciones.css ya los da, con `main h1.mx-in, main h2.mx-in
   …`, que alcanza a estas paginas enteras sin necesidad de `.tramo`.

   Queda escrito porque cuesta un rato volver a descubrirlo: al medirlo
   despues de recorrer la pagina parece que no aplican, y no es verdad. Lo
   que pasa es que para entonces el titular ya esta marcado como leido, y
   `main .mx-leido, main .mx-leido *{animation:none!important}` le apaga la
   animacion a proposito. El brillo corre al entrar, que es cuando toca. Si
   se quiere comprobar, hay que mirarlo mientras entra, no al final. */