@font-face{font-family:"Upheaval";src:url("fonts/Upheaval.ttf") format("truetype");font-display:block}
@font-face{font-family:"Pixelon";src:url("fonts/Pixelon.ttf") format("truetype");font-display:block}
:root{
  --noche:#050a1c;--noche-2:#0b1638;--panel:#0d1a3f;--panel-2:#13265c;--linea:#24407a;
  --azul:#1677ff;--rojo:#d70c19;--rosa:#ff4f9a;--sol:#ff8a3d;--violeta:#7b4dff;--carbon:#252728;
  --atardecer:linear-gradient(100deg,#ff4f9a 0%,#ff8a3d 48%,#ffd23f 100%);
  --oceano:linear-gradient(100deg,#54e1ff 0%,#1677ff 100%);--azul-2:#0f4fc0;--cian:#54e1ff;--hielo:#bfe9ff;--papel:#f4f7ff;--gris:#93a6cf;
  --oro:#ffd23f;--menta:#7cf7c6;--tinta:#02060f;--naranja:#ff6b2b;
  --pix:"Montserrat","Arial Black",system-ui,sans-serif;--arcade:"Upheaval",ui-monospace,monospace;--pix-s:"Pixelon",ui-monospace,monospace;
  --lectura:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,72px);
  --t1:clamp(40px,7.2vw,124px);--t2:clamp(30px,4.6vw,78px);--t3:clamp(20px,2.1vw,36px);
  --lead:clamp(17px,1.55vw,26px);--body:clamp(15px,1.12vw,19px);--small:clamp(12px,.9vw,15px);
  --sombra:6px 6px 0 var(--tinta);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--noche);color:var(--papel);font:var(--body)/1.5 var(--lectura);-webkit-font-smoothing:antialiased;overflow:hidden}
img,video{display:block;max-width:100%}
a{color:var(--cian)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cian);outline-offset:3px}
.pix{font-family:var(--pix);letter-spacing:-.01em;font-weight:900;line-height:.95;text-transform:uppercase}
.arcade{font-family:var(--arcade);font-weight:400;letter-spacing:.02em}
.sunset{background:var(--atardecer);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0}
.ocean{background:var(--oceano);-webkit-background-clip:text;background-clip:text;color:transparent}
.pix-s{font-family:var(--pix-s);letter-spacing:.04em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- deck shell ---------- */
.deck{position:fixed;inset:0;z-index:2;background:var(--noche)}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(64px,8vh,110px) var(--gutter) clamp(84px,11vh,120px);visibility:hidden;opacity:0;overflow:hidden}
.slide.is-active{visibility:visible;opacity:1;z-index:2}
.slide.is-leaving{visibility:visible;z-index:1}
.slide-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(1200px 600px at 85% -10%,rgba(22,119,255,.22),transparent 60%),
  radial-gradient(900px 500px at -10% 110%,rgba(84,225,255,.10),transparent 60%),var(--noche)}
.slide-bg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);pointer-events:none}
.grid-floor{position:absolute;left:-20%;right:-20%;bottom:-2%;height:42%;z-index:-1;opacity:.55;
  background:linear-gradient(transparent 0,rgba(5,10,28,.6) 100%),
  repeating-linear-gradient(90deg,rgba(84,225,255,.16) 0 1px,transparent 1px 80px),
  repeating-linear-gradient(0deg,rgba(84,225,255,.16) 0 1px,transparent 1px 44px);
  transform:perspective(420px) rotateX(58deg);transform-origin:bottom;mask:linear-gradient(transparent,#000 60%)}

/* wipe transition: a slanted blue slab crosses the screen, like the in-game title cards */
.wipe{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.wipe i{position:absolute;top:-10%;bottom:-10%;width:160%;left:-180%;background:var(--atardecer);transform:skewX(-14deg);box-shadow:26px 0 0 var(--azul),52px 0 0 var(--tinta)}
.wipe.run i{animation:wipe .62s cubic-bezier(.7,0,.3,1) forwards}
@keyframes wipe{0%{left:-180%}100%{left:130%}}

/* entrance animations, staggered */
.slide.is-active [data-in]{animation:rise .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 90ms + 220ms)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.slide.is-active [data-in="left"]{animation-name:fromleft}
@keyframes fromleft{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
.slide.is-active [data-in="pop"]{animation-name:pop;animation-timing-function:steps(6)}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{transform:none}}

/* ---------- chrome: top tag, controls ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:clamp(10px,2vh,22px) var(--gutter);pointer-events:none}
.brand{display:flex;align-items:center;gap:12px;font-size:clamp(14px,1.2vw,20px)}
.brand .byd{height:clamp(14px,1.3vw,20px);width:auto}
.brand .sep{width:2px;height:22px;background:var(--rojo)}
.brand .mark{font-style:italic;letter-spacing:.02em}
.brand .mark span{display:inline-block;transform:skewX(12deg)}
.badge{font-family:var(--pix-s);font-size:var(--small);letter-spacing:.08em;padding:6px 10px;border:2px solid var(--linea);background:rgba(11,22,56,.8);color:var(--hielo)}
.badge.interno{border-color:var(--oro);color:var(--oro)}
.controls{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:clamp(8px,1.2vw,16px);padding:10px var(--gutter) clamp(12px,2vh,20px);background:linear-gradient(transparent,rgba(5,10,28,.92) 45%)}
.ctl{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 14px;border:2px solid var(--linea);background:var(--panel);color:var(--papel);cursor:pointer;font-family:var(--pix);font-weight:800;font-size:14px;letter-spacing:.08em;box-shadow:3px 3px 0 var(--tinta)}
.ctl:hover{border-color:var(--cian)}
.ctl:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinta)}
.ctl svg{width:18px;height:18px}
.ctl.play{background:var(--atardecer);border-color:#ffd9a8;color:var(--tinta)}
.progress{flex:1;display:flex;gap:4px;align-items:center;min-width:0}
.progress button{flex:1;height:10px;min-width:6px;padding:0;border:0;background:#1b2b5a;cursor:pointer}
.progress button[aria-current="true"]{background:var(--cian)}
.progress button.done{background:var(--azul)}
.count{font-family:var(--arcade);font-size:16px;color:var(--hielo);min-width:64px;text-align:right}
.hint{font-family:var(--pix-s);font-size:var(--small);color:var(--gris);white-space:nowrap}
kbd{display:inline-block;font-family:var(--arcade);font-size:.82em;line-height:1;padding:5px 7px 3px;background:#fff4db;color:var(--tinta);box-shadow:0 3px 0 #b9a98e,0 5px 0 var(--tinta);margin:0 2px;border-radius:2px}

/* ---------- type ---------- */
.eyebrow{font-family:var(--pix);font-weight:800;font-size:clamp(13px,1.05vw,18px);color:var(--hielo);letter-spacing:.22em;margin:0 0 14px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:4px;background:var(--atardecer)}
h1,h2,h3{margin:0;font-weight:400}
.h1{font-size:var(--t1);font-style:italic}
.h2{font-size:var(--t2);font-style:italic;margin-bottom:.35em;filter:drop-shadow(5px 5px 0 var(--tinta))}
.h3{font-size:var(--t3)}
.lead{font-size:var(--lead);line-height:1.45;color:var(--hielo);max-width:34em;margin:0}
p{margin:0 0 .8em}
.muted{color:var(--gris)}
.small{font-size:var(--small);line-height:1.45}
.src{font-size:var(--small);color:var(--gris);margin-top:auto}
.src a{color:var(--hielo)}
.accent{color:var(--cian)}

/* ---------- layouts ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,4vw,72px);align-items:center;width:100%;max-width:1680px;margin:0 auto}
.split.rev{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.wrap{width:100%;max-width:1680px;margin:0 auto}
.cards{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(12px,1.6vw,26px)}
.card{position:relative;background:linear-gradient(180deg,var(--panel),#0a1532);border:2px solid var(--linea);padding:clamp(14px,1.5vw,24px);box-shadow:var(--sombra)}
.card h3{font-family:var(--pix);font-size:clamp(18px,1.6vw,28px);margin-bottom:.4em}
.card p{color:var(--hielo);font-size:var(--body);margin:0}
.card .num{font-family:var(--pix);color:var(--tinta);background:var(--cian);display:inline-block;padding:4px 8px 2px;margin-bottom:12px;font-size:16px}
.frame{position:relative;border:3px solid var(--linea);background:#000;box-shadow:10px 10px 0 var(--tinta)}
.frame::before{content:"";position:absolute;left:-3px;right:-3px;top:-7px;height:4px;background:var(--azul)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;left:12px;bottom:12px;font-family:var(--pix-s);font-size:var(--small);letter-spacing:.06em;background:rgba(2,6,15,.82);color:var(--hielo);padding:6px 10px;border-left:3px solid var(--cian)}
.tag.oro{border-color:var(--oro)}
.corner{position:absolute;width:26px;height:26px;border:3px solid var(--cian)}
.corner.tl{left:10px;top:10px;border-right:0;border-bottom:0}.corner.tr{right:10px;top:10px;border-left:0;border-bottom:0}
.corner.bl{left:10px;bottom:10px;border-right:0;border-top:0}.corner.br{right:10px;bottom:10px;border-left:0;border-top:0}

/* ---------- 0 · boot ---------- */
.boot{padding:0;justify-content:flex-start}
.road{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#080e22 0 14%,#0c1530 14% 28%,#112044 28% 42%,#142852 42% 54%,#1a3267 54% 64%,#22427f 64% 100%);image-rendering:pixelated}
.road .layer{position:absolute;left:0;right:0;background-repeat:repeat-x;image-rendering:pixelated;background-size:auto 100%}
.road .stars{top:0;height:calc(120px * var(--s));background-image:url(road/stars-a.png)}
.road .stars.b{background-image:url(road/stars-b.png);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.road .moon{position:absolute;right:16%;top:calc(10px * var(--s));width:calc(16px * var(--s));height:calc(16px * var(--s));background:url(road/moon.png) 0 0/100% 100%;image-rendering:pixelated}
.road .far{bottom:calc(28px * var(--s));height:calc(78px * var(--s));background-image:url(road/far.png);animation:scroll calc(320s / 6) steps(320) infinite}
.road .near{bottom:calc(30px * var(--s));height:calc(54px * var(--s));background-image:url(road/near.png);animation:scroll calc(320s / 22) steps(320) infinite}
.road .props{bottom:calc(30px * var(--s));height:calc(92px * var(--s));background-image:url(road/props.png);animation:scroll calc(320s / 150) steps(320) infinite}
.road .ground{bottom:0;height:calc(36px * var(--s));background-image:url(road/ground.png);animation:scroll calc(320s / 150) steps(320) infinite;background-color:#1c1a28}
@keyframes scroll{from{background-position-x:0}to{background-position-x:calc(-320px * var(--s))}}
.road .car{position:absolute;left:50%;bottom:calc(16px * var(--s));width:calc(144px * var(--s));height:calc(74px * var(--s));margin-left:calc(-72px * var(--s));background:url(byd-atto-2-alado.png) no-repeat;background-size:calc(1944px * 144 / 1340 * var(--s)) auto;background-position:calc(-288px * 144 / 1340 * var(--s)) calc(-50px * 144 / 1340 * var(--s));image-rendering:pixelated;animation:bob .5s steps(2) infinite,sway 7s ease-in-out infinite}
@keyframes bob{50%{translate:0 calc(-1px * var(--s))}}
@keyframes sway{0%,100%{transform:translateX(calc(-14px * var(--s)))}50%{transform:translateX(calc(14px * var(--s)))}}
.boot-ui{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(80px,13vh,150px) var(--gutter) 0;gap:clamp(10px,2vh,22px)}
.presenta{font-family:var(--pix);font-size:clamp(13px,1.3vw,20px);letter-spacing:.2em;color:var(--hielo)}
.slab{position:relative;display:inline-block;padding:clamp(14px,2.2vh,26px) clamp(34px,5vw,90px);background:var(--azul);transform:skewX(-14deg);border-top:5px solid var(--cian);box-shadow:14px 14px 0 var(--tinta)}
.slab .h1{display:block;transform:skewX(14deg)}
.slide.is-active .slab{animation:slam .55s steps(7) both .35s}
@keyframes slam{0%{transform:skewX(-14deg) translateX(-120vw)}70%{transform:skewX(-14deg) translateX(3vw)}100%{transform:skewX(-14deg)}}
.boot .tagline{font-size:var(--lead);color:var(--papel);max-width:36em;text-shadow:3px 3px 0 var(--tinta)}
.press{font-family:var(--pix);font-size:clamp(16px,1.6vw,26px);margin-top:clamp(4px,2vh,20px);text-shadow:3px 3px 0 var(--tinta);animation:blink 1.1s steps(2) infinite}
.press-btn{background:none;border:0;cursor:pointer;color:inherit;padding:8px}

/* ---------- concept ---------- */
.ref{margin-top:clamp(16px,3vh,32px);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:16px 18px;border:2px solid var(--linea);background:rgba(11,22,56,.7);max-width:40em}
.ref .date{font-family:var(--pix);text-align:center;background:var(--papel);color:var(--tinta);padding:10px 12px 8px;line-height:1;box-shadow:4px 4px 0 var(--tinta)}
.ref .date b{display:block;font-size:clamp(28px,2.6vw,44px);font-weight:400}
.ref .date span{font-size:13px}
.steps-inline{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(14px,2.5vh,28px) 0 0}
.chip{font-family:var(--pix);font-size:clamp(14px,1.1vw,18px);padding:9px 14px 7px;background:var(--panel-2);border-left:4px solid var(--cian)}

/* ---------- experience ---------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,30px);margin-top:clamp(18px,3vh,36px)}
.trio figure{margin:0}
.trio .frame{aspect-ratio:16/9}
.trio figcaption{margin-top:14px}
.trio figcaption b{display:block;font-family:var(--pix);font-weight:400;font-size:clamp(18px,1.6vw,28px);margin-bottom:4px}
.trio figcaption b i{font-style:normal;color:var(--tinta);background:var(--cian);padding:2px 7px 0;margin-right:8px;font-size:.8em}
.trio figcaption span{color:var(--hielo)}

/* ---------- missions ---------- */
.mission{padding-left:0;padding-right:0}
.mission .art{position:absolute;inset:0;z-index:-1}
.mission .art img,.mission .art video{width:100%;height:100%;object-fit:cover}
.mission .art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,28,.96) 0%,rgba(5,10,28,.86) 34%,rgba(5,10,28,.15) 62%,rgba(5,10,28,0) 100%),linear-gradient(0deg,rgba(5,10,28,.85),transparent 30%)}
.mission .copy{max-width:min(46vw,760px);padding:0 var(--gutter);display:flex;flex-direction:column}
.mission .num-big{font-family:var(--pix);font-size:clamp(16px,1.4vw,24px);color:var(--tinta);background:var(--m,var(--cian));align-self:flex-start;padding:6px 12px 4px;margin-bottom:16px;box-shadow:4px 4px 0 var(--tinta)}
.mission .h2{color:var(--papel)}
.mission ol{list-style:none;margin:clamp(14px,2.6vh,30px) 0 0;padding:0;display:grid;gap:clamp(8px,1.4vh,14px)}
.mission li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:rgba(11,22,56,.78);border:2px solid var(--linea);padding:12px 14px}
.mission li .k{font-family:var(--pix);font-size:22px;color:var(--m,var(--cian));text-align:center;line-height:1.1}
.mission li b{display:block;font-family:var(--pix);font-weight:400;font-size:clamp(17px,1.35vw,23px);margin-bottom:2px}
.mission li span{color:var(--hielo);font-size:var(--body)}
.inset{position:absolute;right:var(--gutter);bottom:clamp(96px,13vh,130px);width:min(30vw,460px);z-index:2}
.inset .frame{aspect-ratio:16/9}
.inset .label{font-family:var(--pix);font-size:14px;background:var(--m,var(--cian));color:var(--tinta);display:inline-block;padding:5px 9px 3px;margin-bottom:8px;box-shadow:3px 3px 0 var(--tinta)}
.concept-tag{position:absolute;right:var(--gutter);top:clamp(70px,10vh,100px);font-family:var(--pix-s);font-size:var(--small);background:rgba(2,6,15,.75);padding:6px 10px;color:var(--hielo);letter-spacing:.06em}
.jump .art::after{background:linear-gradient(90deg,rgba(5,10,28,.92) 0%,rgba(5,10,28,.55) 32%,rgba(5,10,28,0) 58%),linear-gradient(0deg,rgba(5,10,28,.92),transparent 34%)}
.jump .h2{font-size:clamp(40px,6.4vw,112px)}
.jump .playclip{position:absolute;right:var(--gutter);top:50%;translate:0 -50%;width:76px;height:76px;border-radius:0;background:var(--azul);border:3px solid var(--cian);box-shadow:6px 6px 0 var(--tinta);cursor:pointer;display:none;align-items:center;justify-content:center}
.jump.paused .playclip{display:flex}
.score{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.score span{font-family:var(--pix);font-size:14px;padding:6px 10px 4px;background:var(--panel-2)}
.score span b{font-weight:400;color:var(--m,var(--cian))}

/* ---------- value: station, regions, funnel, roi ---------- */
.station{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,22px);margin-top:clamp(16px,3vh,34px)}
.station .card h3{font-size:clamp(17px,1.4vw,24px)}
.ico{width:46px;height:46px;margin-bottom:12px;color:var(--cian)}
.regions{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(18px,3vw,48px);align-items:start;margin-top:clamp(14px,2.6vh,30px)}
.region-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.region-tabs button{font-family:var(--pix);font-size:clamp(14px,1.15vw,19px);padding:10px 14px 8px;border:2px solid var(--linea);background:var(--panel);cursor:pointer;box-shadow:3px 3px 0 var(--tinta)}
.region-tabs button[aria-selected="true"]{background:var(--azul);border-color:var(--cian)}
.layers{display:grid;gap:10px}
.layers .row{display:grid;grid-template-columns:clamp(150px,13vw,210px) 1fr;gap:14px;align-items:center;padding:12px 14px;background:rgba(11,22,56,.8);border:2px solid var(--linea)}
.layers .row b{font-family:var(--pix);font-weight:400;font-size:clamp(15px,1.2vw,20px);color:var(--cian)}
.layers .row span{color:var(--hielo)}
.mock{position:relative;aspect-ratio:16/10;border:3px solid var(--linea);background:linear-gradient(#0a1838,#050a1c);box-shadow:10px 10px 0 var(--tinta);overflow:hidden}
.mock .sky{position:absolute;inset:0 0 38% 0;background:linear-gradient(#22427f,#0c1530)}
.mock .store{position:absolute;left:8%;right:8%;bottom:30%;height:38%;background:#e9eef7;border-bottom:8px solid #9aa6bb}
.mock .store::before{content:"";position:absolute;left:6%;right:6%;top:30%;bottom:0;background:linear-gradient(90deg,#9fd8ff 0 30%,#7cc0ee 30% 32%,#9fd8ff 32% 64%,#7cc0ee 64% 66%,#9fd8ff 66%)}
.mock .sign{position:absolute;left:50%;top:6%;translate:-50% 0;background:var(--azul);color:var(--papel);font-family:var(--pix);font-size:clamp(14px,1.4vw,24px);padding:6px 16px 4px;white-space:nowrap;box-shadow:4px 4px 0 var(--tinta)}
.mock .street{position:absolute;left:0;right:0;bottom:0;height:30%;background:repeating-linear-gradient(90deg,#f0a92a 0 40px,transparent 40px 80px) 0 50%/100% 5px no-repeat,#151a2c}
.mock .qr{position:absolute;right:5%;bottom:8%;width:22%;aspect-ratio:1;background:var(--papel);padding:6px;box-shadow:5px 5px 0 var(--tinta)}
.mock .qr i{display:block;width:100%;height:100%;background:
  conic-gradient(from 90deg at 30% 30%,var(--tinta) 25%,transparent 0) 0 0/33% 33%,
  linear-gradient(var(--tinta),var(--tinta)) 70% 70%/20% 20% no-repeat}
.mock .model{position:absolute;left:12%;bottom:12%;font-family:var(--pix);font-size:clamp(12px,1vw,16px);background:rgba(2,6,15,.85);padding:5px 9px 3px;border-left:3px solid var(--cian)}
.mock .flag{position:absolute;left:4%;top:5%;font-family:var(--pix-s);font-size:var(--small);background:rgba(2,6,15,.75);padding:4px 8px}
.funnel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:clamp(18px,3.4vh,40px)}
.funnel .step{position:relative;padding:clamp(14px,1.5vw,22px) clamp(14px,1.4vw,22px) clamp(14px,1.5vw,22px) clamp(26px,2.2vw,36px);background:var(--panel);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,22px 50%);min-height:clamp(180px,26vh,260px)}
.funnel .step:first-child{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);padding-left:clamp(14px,1.4vw,22px)}
.funnel .step:nth-child(odd){background:var(--panel-2)}
.funnel .step .n{font-family:var(--pix);color:var(--cian);font-size:15px}
.funnel .step h3{font-family:var(--pix);font-size:clamp(20px,2vw,34px);margin:6px 0 8px}
.funnel .step p{color:var(--hielo);font-size:var(--small);margin:0 0 10px}
.funnel .step .m{font-family:var(--pix-s);font-size:var(--small);color:var(--papel);border-top:2px solid var(--linea);padding-top:8px}
.funnel .step .m b{color:var(--cian);font-weight:400}
.formula{font-family:var(--pix);font-size:clamp(16px,1.35vw,22px);line-height:1.35;background:var(--tinta);border-left:4px solid var(--cian);padding:14px 16px;margin:10px 0 0}
.formula .op{color:var(--cian)}
.calc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:6px}
.calc label{display:grid;gap:6px;font-family:var(--pix-s);font-size:var(--small);color:var(--hielo);letter-spacing:.04em}
.calc input{font:600 clamp(16px,1.3vw,21px) var(--lectura);background:var(--tinta);color:var(--papel);border:2px solid var(--linea);padding:9px 10px;width:100%}
.calc input:focus{border-color:var(--cian);outline:none}
.out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.out div{background:var(--azul);padding:12px 14px;box-shadow:5px 5px 0 var(--tinta)}
.out div:nth-child(2){background:var(--panel-2);border:2px solid var(--cian)}
.out small{display:block;font-family:var(--pix-s);font-size:var(--small);letter-spacing:.04em;color:var(--hielo)}
.out b{font-family:var(--pix);font-weight:400;font-size:clamp(26px,2.6vw,44px)}
.ilustrativo{display:inline-block;font-family:var(--pix);font-size:13px;background:var(--oro);color:var(--tinta);padding:5px 9px 3px;margin-bottom:10px}

/* ---------- fee (internal) ---------- */
.fee{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center;width:100%;max-width:1600px;margin:0 auto}
.price{background:var(--azul);border-top:6px solid var(--cian);box-shadow:14px 14px 0 var(--tinta);padding:clamp(20px,3vw,44px);transform:skewX(-4deg)}
.price>*{transform:skewX(4deg)}
.price .amount{font-family:var(--pix);font-size:clamp(64px,10vw,176px);line-height:.9;text-shadow:7px 7px 0 var(--tinta)}
.price .what{font-family:var(--pix);font-size:clamp(16px,1.5vw,24px);margin-top:12px}
.price p{color:var(--papel);margin:12px 0 0;font-size:var(--body)}
.covers{display:grid;gap:10px}
.covers .row{display:grid;grid-template-columns:clamp(160px,14vw,230px) 1fr;gap:14px;padding:12px 14px;background:rgba(11,22,56,.85);border:2px solid var(--linea)}
.covers .row b{font-family:var(--pix);font-weight:400;font-size:clamp(15px,1.15vw,19px);color:var(--cian)}
.covers .row span{color:var(--hielo);font-size:var(--body)}
.evidence{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.evidence div{background:var(--tinta);border:2px solid var(--linea);padding:10px 12px}
.evidence b{display:block;font-family:var(--pix);font-weight:400;font-size:clamp(20px,2vw,34px);color:var(--papel)}
.evidence span{font-size:var(--small);color:var(--gris);line-height:1.35;display:block}

/* ---------- play ---------- */
.play-wrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:center;width:100%;max-width:1680px;margin:0 auto}
.screen{position:relative;aspect-ratio:16/9;border:3px solid var(--linea);background:#000;box-shadow:12px 12px 0 var(--tinta);overflow:hidden}
.screen::before{content:"";position:absolute;left:-3px;right:-3px;top:-7px;height:4px;background:var(--azul);z-index:3}
.screen img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.screen .over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:linear-gradient(rgba(5,10,28,.25),rgba(5,10,28,.7))}
.enter{font-family:var(--pix);font-size:clamp(20px,2.4vw,40px);padding:clamp(14px,1.8vw,22px) clamp(24px,3vw,46px) clamp(12px,1.6vw,18px);background:var(--azul);color:var(--papel);border:3px solid var(--cian);cursor:pointer;box-shadow:8px 8px 0 var(--tinta);transform:skewX(-10deg)}
.enter span{display:inline-block;transform:skewX(10deg)}
.enter:hover{background:#2d86ff}
.enter:active{transform:skewX(-10deg) translate(3px,3px);box-shadow:5px 5px 0 var(--tinta)}
.enter[disabled]{opacity:.55;cursor:wait}
.status{display:flex;align-items:center;gap:10px;font-family:var(--pix-s);font-size:var(--small);letter-spacing:.05em;background:rgba(2,6,15,.82);padding:8px 12px;color:var(--hielo)}
.status i{width:10px;height:10px;background:var(--oro);animation:blink .8s steps(2) infinite}
.status.ok i{background:var(--menta);animation:none}
.status.err i{background:#ff4d5e;animation:none}
.meter{width:min(360px,70%);height:12px;background:#1b2140;border:2px solid var(--tinta);display:none}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--azul),var(--cian));transition:width .3s}
.keys{display:grid;gap:8px}
.keys .row{display:grid;grid-template-columns:clamp(120px,9vw,150px) 1fr;align-items:center;gap:12px;padding:8px 12px;background:rgba(11,22,56,.8);border:2px solid var(--linea)}
.keys .row span{color:var(--hielo);font-size:var(--body)}
.flow{font-family:var(--pix);font-size:clamp(13px,1vw,16px);color:var(--hielo);display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0 0}
.flow b{font-weight:400;background:var(--panel-2);padding:6px 9px 4px;color:var(--papel)}

/* game layer: fixed iframe behind the deck, brought forward to play */
#game-layer{position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--noche)}
#game-layer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--noche)}
body.playing #game-layer{z-index:50;pointer-events:auto}
body.playing .deck,body.playing .topbar,body.playing .controls{visibility:hidden}
.game-bar{position:fixed;top:0;left:0;right:0;z-index:60;display:none;align-items:center;gap:12px;padding:8px 12px;background:linear-gradient(rgba(2,6,15,.92),rgba(2,6,15,.6));font-family:var(--pix-s);font-size:13px;color:var(--hielo)}
body.playing .game-bar{display:flex}
.game-bar .back{font-family:var(--pix);font-size:15px;background:var(--azul);color:var(--papel);border:2px solid var(--cian);padding:8px 12px 6px;cursor:pointer;box-shadow:3px 3px 0 var(--tinta)}
.game-bar .keys-mini{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-left:auto}
.game-bar .focus-note{color:var(--oro)}

/* ---------- responsive ---------- */
@media (max-aspect-ratio:4/3),(max-width:1000px){
  .split,.split.rev,.fee,.play-wrap,.regions{grid-template-columns:1fr}
  .station{grid-template-columns:repeat(2,minmax(0,1fr))}
  .funnel{grid-template-columns:1fr}
  .funnel .step,.funnel .step:first-child{clip-path:none;min-height:0;padding-left:18px;border-bottom:3px solid var(--noche)}
  .mission .copy{max-width:100%}
  .mission .art::after{background:linear-gradient(0deg,rgba(5,10,28,.98) 0%,rgba(5,10,28,.9) 55%,rgba(5,10,28,.3) 100%)}
  .inset{position:relative;right:auto;bottom:auto;width:auto;margin:18px var(--gutter) 0}
  .evidence{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  html,body{overflow:hidden}
  .slide{justify-content:flex-start;overflow-y:auto;padding-top:76px;padding-bottom:110px;-webkit-overflow-scrolling:touch}
  .mission{padding-top:0}
  .mission .art{position:relative;inset:auto;height:42vh;z-index:0}
  .mission .art::after{background:linear-gradient(0deg,var(--noche),transparent 50%)}
  .mission .copy{margin-top:-40px;position:relative}
  .trio{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .station{grid-template-columns:1fr}
  .calc,.out{grid-template-columns:1fr}
  .hint,.count{display:none}
  .covers .row,.layers .row,.keys .row{grid-template-columns:1fr;gap:4px}
  .concept-tag{position:static;display:inline-block;margin:10px var(--gutter) 0}
  .jump .playclip{top:20vh}
  .brand .label{display:none}
  .boot-ui{padding-top:110px}
}
@media (max-height:620px) and (min-width:761px){
  .slide{padding-top:56px;padding-bottom:78px}
  .trio .frame{aspect-ratio:21/9}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .wipe{display:none}
}

/* ===== BYD × open-world direction (Montserrat, sunset gradient, key-art collage) ===== */
.card h3,.chip,.trio figcaption b,.mission li b,.num-big,.funnel .step h3,.region-tabs button,.layers .row b,.covers .row b,.evidence b,.price .what,.enter,.mock .sign,.mock .model,.ref .date,.inset .label,.ilustrativo,.out b,.presenta,.press,.game-bar .back,.flow b,.ref b{font-weight:800}
.funnel .step h3,.price .amount,.enter,.mission .h2,.trio figcaption b{font-style:italic}
.price .amount{font-weight:900}
.formula{font-family:var(--lectura);font-weight:800;letter-spacing:.01em}
.chip{border-left:0;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.14);letter-spacing:.06em}
.chip:nth-child(4){background:var(--atardecer);color:var(--tinta);border-color:transparent}
.card .num,.mission .num-big,.inset .label{font-family:var(--pix);font-weight:900;font-style:italic}
.mission .num-big{background:var(--m,var(--cian))}
.tag{font-family:var(--pix);font-weight:700;letter-spacing:.12em;font-size:11px}
.concept-tag{font-family:var(--pix);font-weight:700;letter-spacing:.14em;font-size:11px}
.enter{background:var(--atardecer);color:var(--tinta);border-color:#ffe3bf}
.enter:hover{background:linear-gradient(100deg,#ff6aad,#ff9d57 48%,#ffe066)}
.price{background:linear-gradient(135deg,#1677ff 0%,#7b4dff 55%,#ff4f9a 100%);border-top-color:#ffd23f}
.frame::before,.screen::before{background:var(--atardecer)}
.progress button[aria-current="true"]{background:var(--atardecer)}
.out div{background:var(--oceano)}

/* boot: key-art collage + logo lockup */
.boot{padding:0;justify-content:center;background:#0b0820}
.collage{position:absolute;inset:-12% -8%;display:grid;grid-template-columns:1.25fr 1fr 1.1fr;grid-template-rows:1fr 1fr;gap:clamp(8px,1vw,16px);transform:rotate(-7deg) scale(1.06);background:var(--tinta);padding:clamp(8px,1vw,16px)}
.collage figure{margin:0;position:relative;overflow:hidden;background:#111}
.collage figure img,.collage figure video{width:100%;height:100%;object-fit:cover;transform:rotate(7deg) scale(1.28)}
.collage .c1{grid-row:1 / span 2}
.collage .c3{grid-row:1 / span 2}
.slide.is-active .collage figure{animation:panel .9s cubic-bezier(.2,.8,.2,1) both}
.slide.is-active .collage .c2{animation-delay:.12s}.slide.is-active .collage .c3{animation-delay:.24s}.slide.is-active .collage .c4{animation-delay:.36s}
@keyframes panel{from{opacity:0;transform:translateY(40px) scale(1.04)}to{opacity:1;transform:none}}
.boot .shade{position:absolute;inset:0;background:
  radial-gradient(70% 60% at 50% 55%,rgba(11,8,32,.15),rgba(11,8,32,.78) 100%),
  linear-gradient(0deg,rgba(255,79,154,.30),transparent 40%),
  linear-gradient(180deg,rgba(5,10,28,.65),transparent 30%)}
.boot-ui{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--gutter);gap:clamp(10px,1.8vh,20px)}
.lockup{display:flex;align-items:center;gap:16px}
.lockup img{height:clamp(18px,2vw,30px);width:auto}
.lockup .x{font-weight:300;opacity:.7;font-size:clamp(14px,1.4vw,22px)}
.presenta{font-family:var(--pix);font-size:clamp(11px,1vw,16px);letter-spacing:.28em;color:var(--papel)}
.logo-game{margin:0;line-height:.82;font-family:var(--pix);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.03em;display:flex;flex-direction:column;align-items:center}
.logo-game .a{font-size:clamp(34px,5vw,84px);color:var(--papel);letter-spacing:.06em;filter:drop-shadow(4px 4px 0 var(--tinta))}
.logo-game .b{font-size:clamp(96px,17vw,300px);background:linear-gradient(180deg,#ffe8a3 0%,#ff9d57 38%,#ff4f9a 70%,#7b4dff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(8px 8px 0 var(--tinta)) drop-shadow(0 0 30px rgba(255,79,154,.35));padding:0 .08em}
.slide.is-active .logo-game{animation:slam2 .7s cubic-bezier(.2,1.4,.3,1) both .25s}
@keyframes slam2{from{opacity:0;transform:scale(1.35) translateY(-10px)}to{opacity:1;transform:none}}
.boot .tagline{font-size:var(--lead);font-weight:600;color:var(--papel);max-width:34em;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.press{font-family:var(--arcade);font-size:clamp(15px,1.4vw,22px);letter-spacing:.06em;margin-top:clamp(4px,1.5vh,16px);text-shadow:3px 3px 0 var(--tinta);animation:blink 1.1s steps(2) infinite}
.boot .tagline,.boot .presenta{text-wrap:balance}
@media (max-width:760px){
  .collage{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;inset:-10% -25%}
  .collage .c1,.collage .c3{grid-row:auto}
  .boot{overflow:hidden!important;justify-content:center!important}
}
/* type scale for Montserrat Black (wider than the pixel face) */
:root{--t2:clamp(26px,3.5vw,62px);--lead:clamp(15px,1.3vw,22px)}
.slide{justify-content:safe center}
.split .h2{font-size:clamp(24px,3vw,54px)}
.mission .h2{font-size:clamp(30px,4vw,72px)}
.jump .h2{font-size:clamp(32px,4.6vw,84px)}
.h2{line-height:.98;text-wrap:balance}
.lead{text-wrap:pretty}
.mock .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.85)}
.mock .sign{top:auto;bottom:62%;left:50%;background:var(--atardecer);color:var(--tinta)}
.mock .flag{left:4%;top:5%;font-family:var(--pix);font-weight:800;letter-spacing:.12em;font-size:11px;background:rgba(2,6,15,.85);padding:6px 10px;border-left:3px solid var(--rojo)}
.mock .qr{width:18%;right:4%;bottom:6%}
.mock .model{left:4%;bottom:6%}
@media (max-width:760px){
  .topbar{background:linear-gradient(var(--noche) 55%,rgba(5,10,28,0));padding-bottom:18px}
  .badge{font-size:10px;padding:4px 7px}
  .mission .concept-tag{position:absolute;top:calc(42vh - 36px);right:var(--gutter);margin:0;z-index:3}
}
/* the game sits under its control bar, so nothing in the game is covered */
#game-layer iframe{top:48px;height:calc(100% - 48px)}
.game-bar{height:48px;background:#02060f}
.price .amount{font-size:clamp(46px,6.2vw,118px);white-space:nowrap}
.ctl.sound{font-family:var(--lectura);font-size:18px}
.ctl.sound[aria-pressed="false"]{opacity:.5;text-decoration:line-through}
.card .thumb{width:100%;aspect-ratio:16/7;object-fit:cover;margin:-4px 0 12px;border:2px solid var(--linea)}
@media (max-height:820px) and (min-width:761px){.card .thumb{aspect-ratio:16/5}}
.slide[data-title="Lo que lo hace distinto"] .card{padding:clamp(10px,1.1vw,18px)}
.slide[data-title="Lo que lo hace distinto"] .card p{font-size:var(--small);line-height:1.4}
.slide[data-title="Lo que lo hace distinto"] .card h3{font-size:clamp(15px,1.25vw,22px)}
.slide[data-title="Lo que lo hace distinto"] .card .num{margin-bottom:6px}
.card .thumb,.card .thumb{aspect-ratio:16/4.2}
@media (max-height:820px) and (min-width:761px){.card .thumb{aspect-ratio:16/3.6}}

/* ===== Misión BYD identity + playful motion ===== */
.brand .lockup-h{height:clamp(20px,2.4vw,34px);width:auto;image-rendering:pixelated}
.logo-pixel{margin:0;position:relative;line-height:0}
.logo-pixel canvas{width:min(70vw,calc(111px * 7));height:auto;image-rendering:pixelated;filter:drop-shadow(0 10px 30px rgba(255,79,154,.35))}
.logo-pixel .logo-fallback{display:none;width:min(70vw,777px);image-rendering:pixelated}
.no-canvas .logo-pixel canvas{display:none}.no-canvas .logo-pixel .logo-fallback{display:block}
.slide.is-active .logo-pixel.jump canvas{animation:jump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes jump{0%{transform:none}40%{transform:translateY(-22px) scale(1.04)}100%{transform:none}}
/* identity */
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(14px,2.4vh,26px) 0}
.swatches span{font-family:var(--arcade);font-size:13px;padding:34px 10px 8px;min-width:84px;background:var(--c);border:2px solid rgba(255,255,255,.18);box-shadow:4px 4px 0 var(--tinta);color:#fff;text-shadow:1px 1px 0 var(--tinta)}
.swatches span:nth-child(6){color:var(--tinta);text-shadow:none}
.typespec p{display:flex;align-items:baseline;gap:14px;margin:0 0 8px;border-bottom:1px dashed var(--linea);padding-bottom:6px}
.typespec b{font-size:clamp(20px,2vw,32px);font-weight:900;min-width:9ch}
.typespec .arcade{font-family:var(--arcade);font-weight:400}
.typespec .pix-s{font-weight:400}
.typespec span{color:var(--gris);font-size:var(--small)}
.logo-board{display:grid;gap:22px;justify-items:center;padding:clamp(18px,3vw,40px);background:repeating-conic-gradient(#0b1638 0 25%,#0d1a42 0 50%) 0 0/40px 40px;border:3px solid var(--linea);box-shadow:12px 12px 0 var(--tinta)}
.logo-board .logo-big{width:min(100%,560px);image-rendering:pixelated;animation:float 3.2s ease-in-out infinite}
.logo-board .logo-row{width:min(100%,520px);image-rendering:pixelated}
@keyframes float{50%{transform:translateY(-8px) rotate(-1deg)}}
/* race slide: start lights + speed lines */
.lights{position:absolute;right:var(--gutter);top:clamp(110px,16vh,150px);display:flex;gap:12px;padding:12px 14px;background:rgba(2,6,15,.85);border:3px solid var(--linea);box-shadow:6px 6px 0 var(--tinta);z-index:3}
.lights i{width:34px;height:34px;border-radius:50%;background:#3a1420;box-shadow:inset 0 0 0 3px var(--tinta)}
.lights.l1 i:nth-child(1),.lights.l2 i:nth-child(-n+2),.lights.l3 i{background:#ff2e4d;box-shadow:inset 0 0 0 3px var(--tinta),0 0 18px #ff2e4d}
.lights.go i{background:#7cf7c6;box-shadow:inset 0 0 0 3px var(--tinta),0 0 22px #7cf7c6}
.speedlines{position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(100deg,transparent 0 46px,rgba(255,255,255,.07) 46px 48px,transparent 48px 130px);background-size:260px 100%;animation:speed .35s linear infinite;mix-blend-mode:screen}
@keyframes speed{to{background-position:-260px 0}}
/* sparkles drifting on every slide */
.sparkles{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sparkles i{position:absolute;width:6px;height:6px;background:var(--cian);box-shadow:0 0 10px var(--cian);animation:drift linear infinite;opacity:.7}
.sparkles i:nth-child(3n){background:var(--rosa);box-shadow:0 0 10px var(--rosa)}
.sparkles i:nth-child(4n){background:var(--oro);box-shadow:0 0 10px var(--oro)}
@keyframes drift{from{transform:translateY(110vh) rotate(0)}to{transform:translateY(-10vh) rotate(360deg)}}
/* tactile cards and frames */
.card,.frame,.trio .frame,.funnel .step,.layers .row,.covers .row{transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s}
.card:hover,.layers .row:hover,.covers .row:hover{transform:translate(-3px,-5px) rotate(-.4deg);box-shadow:10px 12px 0 var(--tinta)}
.frame:hover{transform:translateY(-6px) rotate(.5deg) scale(1.01)}
.funnel .step:hover{transform:translateY(-8px)}
.ctl:hover,.enter:hover{animation:wiggle .35s}
@keyframes wiggle{30%{transform:rotate(-3deg) scale(1.05)}60%{transform:rotate(2deg)}}
/* progress racer: the winged BYD runs along the slide progress */
.progress{position:relative}
.racer{position:absolute;top:-22px;left:0;width:44px;height:23px;background:url(byd-atto-2-alado.png) -9px -2px/48px auto no-repeat;image-rendering:pixelated;transition:left .6s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
.racer.zoom{animation:bob .25s steps(2) 3}
/* keys light up when pressed on the play slide */
kbd.hit{background:var(--cian);transform:translateY(3px);box-shadow:0 0 0 #b9a98e,0 2px 0 var(--tinta)}
/* counters */
.count-up{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.speedlines,.sparkles{display:none}.racer{transition:none}}
.logo-pixel canvas,.logo-pixel .logo-fallback{width:min(70vw,777px,88vh)}

/* ===== Game typography: Upheaval titles, Pixelon labels, Montserrat for reading ===== */
.h1,.h2,.h3,.pix,.eyebrow,.chip,.card h3,.card .num,.num-big,.mission li b,.trio figcaption b,.funnel .step h3,.region-tabs button,.layers .row b,.covers .row b,.evidence b,.price .amount,.price .what,.enter,.ctl,.count,.ilustrativo,.formula,.out b,.inset .label,.tag,.concept-tag,.presenta,.flow b,.ref b,.ref .date,.mock .sign,.mock .model,.game-bar .back,.bar-row .lbl,.bar-row b,.hours b,.big-number b,.swatches span,.typespec .pix{font-family:var(--arcade)!important;font-style:normal!important;font-weight:400!important;letter-spacing:.03em;text-transform:uppercase}
.h2{line-height:1.02;filter:drop-shadow(4px 4px 0 var(--tinta))}
.mission .h2,.jump .h2{font-size:clamp(34px,4.4vw,80px)}
.price .amount{letter-spacing:0}
.eyebrow{letter-spacing:.12em}
.tag,.concept-tag,.presenta,.chip,.layers .row b,.covers .row b{font-family:var(--pix-s)!important}
.typespec .pix{font-family:var(--lectura)!important;text-transform:none;font-weight:800!important}

/* value: bars, hours, big number */
.bars{display:grid;gap:14px}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.bar-row .lbl{font-size:clamp(12px,1vw,16px);color:var(--hielo);grid-column:1/-1}
.bar-row .track{height:26px;background:#101c3f;border:2px solid var(--tinta);box-shadow:4px 4px 0 var(--tinta);position:relative}
.bar-row .track i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#1677ff,#54e1ff);transition:width 1.1s cubic-bezier(.2,.9,.2,1)}
.slide.is-active .bar-row .track i{width:var(--w)}
.bar-row b{font-size:clamp(18px,1.8vw,30px);color:var(--papel);min-width:7ch;text-align:right}
.bar-row.win .track i{background:var(--atardecer);min-width:10px}
.bar-row.win b{color:var(--oro)}
.bar-row.win .lbl{color:var(--oro)}
.hours{background:rgba(2,6,15,.75);border:2px solid var(--linea);padding:10px 14px;box-shadow:6px 6px 0 var(--tinta)}
.hours p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:7px 0;border-bottom:1px dashed var(--linea);font-size:var(--small);color:var(--hielo)}
.hours p b{color:var(--cian);font-size:clamp(14px,1.2vw,19px)}
.hours .total{border:0;color:var(--papel)}
.hours .total b{color:var(--oro);font-size:clamp(18px,1.6vw,26px)}
.big-number{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:clamp(16px,3vh,32px);padding:14px 18px;background:var(--atardecer);color:var(--tinta);box-shadow:8px 8px 0 var(--tinta);transform:skewX(-6deg);width:fit-content}
.big-number>*{transform:skewX(6deg)}
.big-number b{font-size:clamp(34px,4vw,68px)}
.big-number span{font-weight:700}
.slide[data-title="Lo que viene"] .card p{font-size:var(--small)}
.slide[data-title="Lo que viene"] .card h3{font-size:clamp(15px,1.2vw,21px)}
.racer{background-image:url(byd-atto-2.png);background-size:76px auto;background-position:-15px -7px;height:22px;top:-21px}

/* ===== visual direction ===== */
.pillars{display:grid;gap:10px;margin-top:clamp(12px,2.4vh,24px)}
.pillars p{margin:0;display:grid;grid-template-columns:clamp(150px,13vw,220px) 1fr;gap:12px;align-items:center;padding:10px 12px;background:rgba(11,22,56,.8);border:2px solid var(--linea);border-left:6px solid var(--c,var(--cian))}
.pillars p:has(b[style]){border-left-color:transparent}
.pillars b{font-family:var(--arcade);font-weight:400;font-size:clamp(14px,1.15vw,19px);color:var(--c)}
.pillars span{color:var(--hielo);font-size:var(--small)}
.mood{position:relative;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr auto;gap:10px;transform:rotate(-1.5deg)}
.mood img{width:100%;height:100%;object-fit:cover;border:3px solid var(--tinta);box-shadow:6px 6px 0 var(--tinta);aspect-ratio:16/9}
.mood .m1{grid-row:1/span 2;aspect-ratio:auto;height:100%}
.mood .m3{transform:rotate(2deg)}
.mood .m4{transform:rotate(-1.5deg)}
.mood .strip{grid-column:1/-1;display:flex;align-items:center;gap:0;background:var(--tinta);padding:6px;box-shadow:6px 6px 0 rgba(0,0,0,.4)}
.mood .strip i{flex:1;height:26px;background:var(--c)}
.mood .strip img{width:auto;height:30px;border:0;box-shadow:none;aspect-ratio:auto;margin-left:10px;image-rendering:pixelated}
/* ===== data ===== */
.insights{display:grid;gap:8px;margin-top:clamp(12px,2.4vh,24px)}
.insights p{margin:0;padding:10px 12px;background:rgba(11,22,56,.8);border:2px solid var(--linea)}
.insights b{display:block;font-family:var(--arcade);font-weight:400;color:var(--cian);font-size:clamp(14px,1.15vw,19px)}
.insights span{color:var(--hielo);font-size:var(--small)}
.dash{background:#070d22;border:3px solid var(--linea);box-shadow:12px 12px 0 var(--tinta);padding:clamp(14px,1.6vw,24px)}
.dash-t{font-family:var(--arcade);color:var(--papel);margin:6px 0 10px;font-size:clamp(14px,1.2vw,20px)}
.pref{display:grid;grid-template-columns:90px 1fr 58px;align-items:center;gap:10px;margin-bottom:8px;font-family:var(--arcade)}
.pref span{color:var(--hielo);font-size:14px}
.pref i{display:block;height:22px;width:0;background:var(--atardecer);transition:width 1.1s cubic-bezier(.2,.9,.2,1)}
.slide.is-active .pref i{width:var(--w)}
.pref b{font-weight:400;color:var(--papel);text-align:right}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.kpis div{background:var(--panel-2);padding:10px;text-align:center;border:2px solid var(--linea)}
.kpis b{display:block;font-family:var(--arcade);font-weight:400;font-size:clamp(20px,1.9vw,32px);color:var(--cian)}
.kpis small{font-family:var(--pix-s);font-size:11px;color:var(--gris);letter-spacing:.05em}
.moment .h2{font-size:clamp(26px,3.1vw,54px)}
@media (max-width:1000px),(max-aspect-ratio:4/3){.kpis{grid-template-columns:repeat(2,1fr)}.mood{transform:none}}

.hours .next{border-top:2px solid var(--oro);margin-top:4px}
.hours .next span{color:var(--oro)}
.hours .next b{color:var(--menta)}
/* mobile polish: hour figures never wrap; progress rides on its own row above the buttons */
.hours p b,.bar-row b{white-space:nowrap}
@media (max-width:760px){
  .controls{flex-wrap:wrap;row-gap:14px}
  .progress{order:-1;flex:1 0 100%;margin-top:18px}
  .slide{padding-bottom:140px}
}

/* ===== closing trailer: full-bleed video, chrome fades while it plays ===== */
.slide.trailer-slide{padding:0;background:#000;justify-content:center;align-items:center}
.trailer-slide video.trailer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.trailer-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:18px;padding:18px 34px 16px;border:4px solid var(--tinta,#02060f);background:linear-gradient(90deg,#ff4f9a,#ff8a3d 55%,#ffd23f);color:#02060f;font-family:var(--arcade);font-size:clamp(22px,2.4vw,40px);letter-spacing:.04em;box-shadow:8px 8px 0 rgba(2,6,15,.85);cursor:pointer;z-index:3}
.trailer-play b{font-size:1.1em}
.trailer-play:hover{transform:translate(-50%,-50%) scale(1.04)}
.trailer-slide.playing .trailer-play{opacity:0;pointer-events:none}
body.trailer-on .topbar,body.trailer-on .controls{opacity:0;transition:opacity .6s}
body.trailer-on .controls:hover,body.trailer-on.moved .controls{opacity:1}
@media (max-width:760px){.slide.trailer-slide{padding:0;justify-content:center!important}}