/* ============================================================
   BESTIAL MZL — Nosotros / Historia · estilos propios de la página
   Reutiliza de styles.css: tokens, .d/.ext, botones, ticker, .pat, .fin (cierre),
   letras en diagonal [data-rv="wave"], reveals [data-rv] y el apilado .stk.

   Movimiento propio de esta página (todo transform/translate/rotate/scale/opacity):
   · --c / --p   progreso de scroll de cada [data-scrub] (lo escribe main.js)
   · --sp        progreso del escenario fijado «Kiosco → Milán» (solo html.stage-on)
   Sin --sp / --c (móvil, sin JS, movimiento reducido) cada pieza queda en una
   composición estática completa y legible.
   ============================================================ */

/* ---------- rayo decorativo (CSS). El rayo OFICIAL es siempre rayo-mascota.webp ---------- */
.n-bolt{position:absolute;z-index:1;display:block;aspect-ratio:.7;background:var(--k);pointer-events:none;clip-path:polygon(62% 0,18% 58%,46% 58%,30% 100%,86% 36%,56% 36%,80% 0)}

/* ============ 1 · HERO ============ */
.n-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--k);color:#fff;--fc:var(--y);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,56px);align-items:center;
  padding:clamp(28px,4vw,64px) var(--pad) clamp(56px,7vw,110px);
  min-height:calc(var(--vh,100vh) - var(--hh,77px))}
.n-hero .eyebrow{background:var(--y);color:var(--k)}
.n-hero .eyebrow .bolt{color:var(--k)}
.n-h1{margin:clamp(14px,1.8vw,28px) 0 0;color:#fff;position:relative;z-index:3}
.nl1{font-size:11vw;--ec:var(--od)}
.nl2{font-size:12.2vw;color:var(--y);--ec:var(--o)}
.nl3{font-size:8.6vw;--ec:var(--od)}
.n-copy{position:relative;z-index:3;margin-top:clamp(18px,2.4vw,36px)}
.n-lead{margin:0 0 22px;max-width:30em;font-weight:500;font-size:clamp(18px,1.7vw,26px);line-height:1.4;color:#ecece6}
.n-cue{display:inline-flex;align-items:center;gap:.7em;min-height:48px;font-family:var(--f-c);font-weight:800;font-size:19px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--y);border-bottom:3px solid var(--y)}
.n-cue svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:translate var(--t-ui) var(--ease)}
@media (hover:hover){.n-cue:hover svg{translate:0 4px}}
.n-cue:active svg{translate:0 4px}
.n-hero .n-copy>*{animation:hlUp 700ms var(--ease) backwards;animation-delay:var(--d,0ms)}
.n-hero-vis{position:relative;align-self:stretch;display:grid;place-items:center;min-height:clamp(260px,38vw,640px)}
.n-hero-slab{position:absolute;inset:0 -14% 0 6%;background:var(--o);clip-path:polygon(24% 0,100% 0,100% 100%,0 100%);translate:calc(var(--c,0) * 5vw) 0}
.n-hero-mascot{position:relative;z-index:2;width:min(100%,540px);height:auto;rotate:calc(-8deg + var(--c,0) * 14deg);translate:0 calc(var(--c,0) * -24px)}
/* solo transform: el elemento más grande de la página se pinta desde el primer fotograma (LCP) */
.hero-anim .n-hero-mascot{animation:nRise 900ms var(--ease) 150ms backwards}
@keyframes nRise{from{transform:translate3d(0,12%,0) scale(.92)}to{transform:none}}
.n-bolt-a{width:clamp(56px,8vw,130px);left:2%;bottom:6%;background:var(--y);rotate:calc(var(--c,0) * 34deg)}

/* ============ 2 · FUNDADORES ============ */
.fnd{position:relative;background:var(--w);color:var(--k);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(64px,8vw,128px) var(--pad);overflow:hidden}
.fnd-h{font-size:clamp(38px,5.2vw,100px);line-height:.92;--ec:var(--y)}
.fnd-h .l{display:block}
.fnd-p{margin:1.1em 0 0;max-width:28em;font-size:clamp(17px,1.4vw,21px)}
.fnd-names{margin:0;container-type:inline-size;display:grid;gap:.05em;justify-items:start;font-family:var(--f-d);text-transform:uppercase;line-height:.9}
.fn{display:block;width:max-content;max-width:100%;font-size:clamp(34px,7.4vw,118px)}
.fn-a{background:var(--y);padding:.02em .14em .05em;rotate:-2deg;translate:calc(var(--c,0) * -3vw) 0}
.fn-amp{position:relative;z-index:2;justify-self:center;color:var(--od);font-size:.9em;line-height:1;margin:.04em 0 .02em}
.fn-b{justify-self:end;background:var(--k);color:var(--y);padding:.02em .14em .05em;rotate:1.6deg;translate:calc(var(--c,0) * 3vw) 0}
.fnd-names .fn-s{justify-self:start;margin-top:.7em;background:var(--o);color:var(--k);padding:.4em .8em;rotate:-1deg;font-family:var(--f-c);font-weight:800;font-size:clamp(15px,1.8vw,26px);letter-spacing:.06em;line-height:1.1}
@supports (font-size:1cqw){.fn{font-size:12.4cqw}}

/* ============ 3 · DE UN KIOSCO A MILÁN ============ */
.km{position:relative;isolation:isolate;z-index:var(--z,4);background:var(--y);color:var(--k);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,72px);padding:clamp(64px,8vw,128px) var(--pad);overflow:clip}
.km .pat{inset:0}
.km-stage{position:relative;align-self:start}
.km-stage-in{display:grid;justify-items:start;gap:.04em;font-family:var(--f-d);text-transform:uppercase;line-height:.86;font-size:clamp(64px,12.4vw,210px)}
.km-a{color:transparent;-webkit-text-stroke:.028em var(--k);scale:calc(1 - var(--sp,.5) * .4);opacity:calc(1 - var(--sp,.5) * .5);transform-origin:0 100%}
.km-b{color:var(--k);text-shadow:.03em .03em 0 var(--w),.06em .06em 0 var(--w);scale:calc(.6 + var(--sp,.5) * .4);opacity:calc(.35 + var(--sp,.5) * .65);transform-origin:0 0}
.km-bolt{display:block;width:.34em;aspect-ratio:.7;background:var(--od);clip-path:polygon(62% 0,18% 58%,46% 58%,30% 100%,86% 36%,56% 36%,80% 0);rotate:calc(var(--sp,.5) * 40deg - 20deg);translate:.7em 0}
.km-bar{display:none}
.km-copy{display:flex;flex-direction:column;position:relative}
.km-h{font-size:clamp(40px,5.2vw,100px);line-height:.92;--ec:#FFFDF5}
.km-step{margin:1.1em 0 0;max-width:22em;font-size:clamp(19px,1.8vw,29px);line-height:1.42;font-weight:500}
.km-end{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3.6vw,60px);line-height:1}
/* escritorio: el escenario se queda fijo mientras se leen los pasos */
.stage-on .km-stage{position:sticky;top:calc(var(--hh,77px) + 24px);height:calc(var(--vh,100vh) - var(--hh,77px) - 48px);display:grid;align-content:center;gap:22px}
.stage-on .km-step{min-height:56vh;margin:0;display:flex;align-items:center}
.stage-on .km-h{padding:12vh 0 4vh}
.stage-on .km-bar{display:block;width:min(100%,420px);height:6px;background:rgba(11,11,11,.18)}
.stage-on .km-bar i{display:block;height:100%;background:var(--k);transform-origin:0 50%;scale:var(--sp,0) 1}

/* ============ 4 · QUÉ SIGNIFICA ============ */
.sg{position:relative;isolation:isolate;background:var(--k);color:#fff;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(72px,9vw,150px) var(--pad);overflow:hidden;--fc:var(--y)}
.sg-mark{position:absolute;z-index:-1;left:-2vw;bottom:-.22em;font-family:var(--f-d);font-size:clamp(120px,27vw,480px);line-height:1;text-transform:uppercase;color:transparent;-webkit-text-stroke:2px rgba(255,214,0,.13);white-space:nowrap;translate:calc(var(--c,0) * -10vw) 0;pointer-events:none}
.sg-h{font-size:clamp(38px,5.6vw,108px);line-height:.94;color:#fff;--ec:var(--od)}
.sg-h .l{display:block}
.sg-p{margin:1em 0 0;max-width:30em;font-size:clamp(17px,1.45vw,22px);color:#ecece6}
.sg-q{margin:.5em 0 .1em;max-width:15em;font-family:var(--f-d);text-transform:uppercase;font-size:clamp(30px,4.2vw,80px);line-height:.98;color:var(--y);text-wrap:balance}
.sg-media{position:relative;display:grid;place-items:center;padding:4% 0}
.sg-slab{position:absolute;inset:4% -14% 4% 8%;background:var(--y);rotate:3deg;translate:calc(var(--c,0) * 5vw) 0}
.sg-fig{position:relative;z-index:1;margin:0;width:104%;margin-left:-6%;rotate:calc(var(--c,0) * -4deg);translate:0 calc(var(--c,0) * -18px)}
.sg-fig img{width:100%;height:auto}

/* ============ 5 · EL RAYO ============ */
.ry{position:relative;isolation:isolate;background:var(--y);color:var(--k);display:grid;justify-items:center;text-align:center;gap:clamp(4px,1.6vw,24px);padding:clamp(56px,7vw,110px) var(--pad) clamp(64px,8vw,120px);overflow:hidden;--d:clamp(300px,60vw,800px)}
.ry-stage{position:relative;width:min(100%,1000px);height:calc(var(--d) * .8);display:grid;place-items:center;overflow:hidden}
.ry-rays{position:absolute;left:50%;top:50%;width:var(--d);aspect-ratio:1;translate:-50% -50%;rotate:calc(var(--p,.5) * 70deg);
  background:repeating-conic-gradient(from 0deg,var(--k) 0 4.5deg,transparent 4.5deg 15deg);
  -webkit-mask-image:radial-gradient(circle closest-side,#000 0,#000 28%,transparent 74%);mask-image:radial-gradient(circle closest-side,#000 0,#000 28%,transparent 74%)}
.ry-stage::before{content:'';position:absolute;left:50%;top:50%;width:calc(var(--d) * .56);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#FFF7B5 0,rgba(255,247,181,.85) 38%,rgba(255,214,0,0) 70%)}
.ry-mascot{position:relative;z-index:2;width:calc(var(--d) * .44);height:auto;rotate:calc(var(--c,0) * 10deg);scale:calc(.92 + var(--p,.5) * .12)}
.n-bolt-b{width:clamp(40px,6vw,96px);left:8%;top:14%;rotate:calc(var(--c,0) * 40deg - 14deg)}
.n-bolt-c{width:clamp(30px,4.4vw,70px);right:10%;bottom:12%;rotate:calc(var(--c,0) * -40deg + 16deg)}
.ry-txt{position:relative;z-index:2}
.ry-h{font-size:clamp(46px,8.2vw,156px);line-height:.9;--ec:var(--w)}
.ry-h .l{display:block}
.ry-p{margin:1em auto 0;max-width:30em;font-size:clamp(18px,1.6vw,24px);font-weight:500}

/* ============ 6 · RAÍCES DE CALLE ============ */
.rz{position:relative;background:var(--w);color:var(--k);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(64px,8vw,128px) var(--pad);overflow:hidden}
.rz-h{font-size:clamp(40px,6vw,116px);line-height:.92;--ec:var(--y)}
.rz-h .l{display:block}
.rz-p{margin:1em 0 1.4em;max-width:34em;font-size:clamp(17px,1.4vw,21px)}
.rz-card{position:relative;max-width:34em;margin:0 0 1.7em;padding:clamp(18px,2vw,28px);color:#fff;background:linear-gradient(rgba(4,28,92,.86),rgba(4,28,92,.86)),url(../img/fondo-azul.webp) center/320px;box-shadow:6px 6px 0 var(--k);rotate:-1deg}
.rz-card p{margin:0 0 .7em;font-size:clamp(16px,1.3vw,19px);line-height:1.5}
.rz-card p:last-child{margin-bottom:0}
.rz-card .rz-tag{display:inline-block;margin:0 0 .9em;padding:.3em .75em;background:var(--y);color:var(--k);font-family:var(--f-c);font-weight:800;font-size:15px;letter-spacing:.07em;text-transform:uppercase;line-height:1.1}
.rz-card .rz-fine{font-weight:600;font-size:15px;color:#d6e4ff}
.rz-media{position:relative;display:grid;place-items:center;padding:4% 2%}
.rz-slab{position:absolute;inset:0 -14% 0 12%;background:var(--y);transform:rotate(-3deg);translate:calc(var(--c,0) * -5vw) 0}
.rz-fig{position:relative;margin:0;width:88%;clip-path:polygon(0 0,100% 4%,96% 100%,3% 96%);rotate:calc(2deg + var(--c,0) * 4deg);translate:0 calc(var(--c,0) * -22px)}
.rz-fig img{width:100%;height:auto}

/* ============ 7 · PERSONALIDAD ============ */
.ps{position:relative;isolation:isolate;background:var(--o);color:var(--k);border-block:3px solid var(--k);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:start;padding:clamp(64px,8vw,128px) var(--pad);overflow:hidden}
.ps-h{font-size:clamp(40px,6vw,116px);line-height:.92;--ec:#FFF3E0}
.ps-h .l{display:block}
.ps-p{margin:1.1em 0 0;max-width:32em;font-size:clamp(17px,1.45vw,22px);font-weight:500}
.ps-lead{font-family:var(--f-d);text-transform:uppercase;font-weight:400;font-size:clamp(28px,3.4vw,60px);line-height:1;margin-top:0}
.ps-h3{margin:0 0 .5em;font-family:var(--f-c);font-weight:800;font-size:clamp(18px,1.6vw,24px);letter-spacing:.1em;text-transform:uppercase}
.ps-list{list-style:none;margin:0;padding:0}
.ps-list li{display:grid;gap:.05em;padding:.5em 0 .6em;border-top:3px solid var(--k)}
.ps-list li:last-child{border-bottom:3px solid var(--k)}
.ps-list strong{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(34px,4.4vw,80px);line-height:.95}
.ps-list span{max-width:28em;font-size:clamp(16px,1.3vw,20px);font-weight:600;line-height:1.4}
@media (hover:hover){.ps-list li{transition:translate 220ms var(--ease)}.ps-list li:hover{translate:12px 0}}

/* ============ RESPONSIVE ============ */
@media (max-width:860px){
  .n-hero,.fnd,.km,.sg,.rz,.ps{grid-template-columns:1fr}
  .n-hero{min-height:0;padding-bottom:clamp(40px,8vw,72px)}
  .nl1{font-size:19vw}.nl2{font-size:21.5vw}.nl3{font-size:15vw}
  .n-hero-vis{min-height:260px;margin-top:8px}
  .n-hero-mascot{width:min(62%,330px)}
  .n-hero-slab{inset:6% -8% 0 14%}
  .fnd-names{margin-top:8px}
  .km-stage{order:0}
  .km-stage-in{font-size:clamp(60px,21vw,120px)}
  .km-step{max-width:none}
  .sg-media{margin-top:12px}
  .sg-fig{width:100%;margin-left:0}
  .ry{--d:clamp(280px,92vw,560px)}
  .rz-media{margin-top:8px}
  .ps-list-wrap{margin-top:8px}
}
@media (max-width:640px){
  .n-cue{font-size:17px}
  .fn-b{justify-self:start}
  .rz-card{rotate:0deg}
}