/* =========================================================================
   RAPTOR MÉXICO 2027 · RESEARCH & INSIGHTS · SAMY
   Concepto: LUZ DE TURNO — la chamba a las 4 a.m.; el rojo Raptor es la única
   luz que reconoce a quien está ahí. Lienzo 1920×1080 escalado al viewport.
   ========================================================================= */
:root{
  --rojo-raptor:#CF1317; --rojo-lata:#B31110; --rojo-sombra:#7F0000; --rojo-sticker:#960303;
  --rojo-chispa:#FF3B2F; --halo:#FE8C8C; --brasa:#3B0601; --noche-roja:#1A0605;
  --negro-obra:#0C0808; --negro-raptor:#1D1D1B; --hueso:#F4EFEA; --blanco:#FFFFFF;
  --acero-claro:#C9C1BE; --acero:#9A9290; --acero-oscuro:#5A5352; --linea:rgba(244,239,234,.12);
  --ambar-sodio:#FFC21A; --verde-xtracto:#3B7F25; --lima-xtracto:#8CA41B;
  --mora-tornado:#4A2BDB; --mora-glow:#8F7CFF; --mora-noche:#0F0A2E;
  --f-display:'Saira','Saira Extra Condensed','Arial Narrow',sans-serif;
  --f-tech:'Michroma','Saira',sans-serif;
  --f-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-mono:'Chivo Mono',ui-monospace,Menlo,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --s:1;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--negro-obra);color:var(--hueso);overflow:hidden}
body{font-family:var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
p,h1,h2,h3,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:none}
button{font:inherit;color:inherit}

/* ---------- viewport / stage ---------- */
.viewport{position:fixed;inset:0;display:grid;place-items:center;background:var(--negro-obra);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.stage{position:relative;width:1920px;height:1080px;flex:none;transform:scale(var(--s));transform-origin:center center;overflow:hidden;background:var(--negro-obra);
  view-transition-name:none}
.slide{position:absolute;inset:0;display:none;overflow:hidden;isolation:isolate}
.slide.is-active{display:block}

/* ---------- surfaces ---------- */
.surf-rojo{background:radial-gradient(120% 90% at 30% 40%, #E01B1F 0%, #B31110 38%, #7F0000 70%, #3B0601 100%)}
.surf-noche-roja{background:linear-gradient(160deg,#3B0601 0%,#1A0605 45%,#0C0808 100%)}
.surf-noche-obra{background:radial-gradient(60% 60% at 100% 0%, rgba(207,19,23,.22), transparent 70%), var(--negro-obra)}
.surf-mora{background:radial-gradient(70% 90% at 72% 50%, rgba(74,43,219,.28), #0F0A2E 58%, #0C0808 100%)}
.surf-foto{background:var(--negro-obra)}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:50;mix-blend-mode:overlay;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.surf-rojo.grain::after{opacity:.14}
.steel-bg{position:absolute;inset:0;z-index:0;background:url(../raptor-web/bg_raptor.jpg) center/cover no-repeat;opacity:.16;filter:grayscale(1) contrast(1.2)}

/* content frame: rail is 88px; content from x=160 to x=1824, top 80, bottom 104 */
.frame{position:absolute;left:160px;right:96px;top:84px;bottom:112px;z-index:5;display:flex;flex-direction:column;gap:36px}
.frame.center-v{justify-content:center}
.frame.bottom{justify-content:flex-end}

/* ---------- global chrome: rail, progress, tag ---------- */
.rail{position:absolute;left:0;top:0;bottom:0;width:88px;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:36px 0 34px;border-right:1px solid var(--linea);view-transition-name:rail;pointer-events:none}
.rail .samy{width:18px;height:92px}
.rail .samy text{font-family:var(--f-tech);font-size:13px;letter-spacing:.5em;fill:var(--hueso)}
.rail .tick{width:1px;height:56px;background:var(--linea)}
.rail .iso{width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--rojo-raptor)}
.rail .iso img{height:46px;width:auto;object-fit:cover;object-position:0 50%}
.rail .date{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;color:var(--acero)}
.rail .count{font-family:var(--f-tech);font-size:12px;letter-spacing:.08em;color:var(--hueso);writing-mode:vertical-rl;transform:rotate(180deg)}
.rail .mid{display:flex;flex-direction:column;align-items:center;gap:18px}
.on-rojo .rail{border-right-color:rgba(0,0,0,.25)}
.progress{position:absolute;left:0;right:0;bottom:0;height:6px;z-index:60;background:var(--rojo-sombra);view-transition-name:progress-track}
.progress .fill{position:absolute;left:0;top:0;bottom:0;background:var(--rojo-raptor);width:0;transition:width .42s var(--ease-out)}
.progress .spark{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--rojo-chispa);
  box-shadow:0 0 12px 3px rgba(254,140,140,.75),0 0 2px rgba(255,255,255,.9);transition:left .42s var(--ease-out);view-transition-name:spark}
.on-rojo .progress{background:var(--negro-obra)}
.on-rojo .progress .fill{background:var(--rojo-chispa)}
.still .hud,.still .rotate-hint{display:none}
.corner-tag{position:absolute;right:96px;top:40px;z-index:60;font-family:var(--f-tech);font-size:11px;letter-spacing:.2em;color:rgba(244,239,234,.45);view-transition-name:corner-tag}
.tape{position:absolute;left:0;right:0;bottom:6px;height:18px;z-index:40;background:repeating-linear-gradient(-45deg,var(--rojo-raptor) 0 8px,var(--negro-obra) 8px 16px)}

/* ---------- type ---------- */
.kicker{font-family:var(--f-tech);font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--rojo-chispa)}
.on-rojo .kicker,.surf-rojo .kicker{color:var(--hueso)}
.t-mega{font-family:var(--f-display);font-stretch:56%;font-weight:900;font-size:420px;line-height:.82;letter-spacing:-.02em;text-transform:uppercase}
.t-xxl{font-family:var(--f-display);font-stretch:62%;font-weight:900;font-size:176px;line-height:.86;letter-spacing:-.015em;text-transform:uppercase}
.t-xl{font-family:var(--f-display);font-stretch:62%;font-weight:900;font-size:124px;line-height:.88;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.t-l{font-family:var(--f-display);font-stretch:68%;font-weight:800;font-size:82px;line-height:.9;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance}
.t-m{font-family:var(--f-display);font-stretch:75%;font-weight:800;font-size:50px;line-height:.92;text-transform:uppercase}
.t-s{font-family:var(--f-display);font-stretch:75%;font-weight:800;font-size:34px;line-height:.95;text-transform:uppercase}
.ital{font-style:italic}
.body-l{font-size:30px;line-height:1.36;color:var(--hueso)}
.body{font-size:24px;line-height:1.4;color:var(--hueso)}
.small{font-size:19px;line-height:1.4;color:var(--acero-claro)}
.src{font-family:var(--f-mono);font-size:15px;line-height:1.45;color:var(--acero)}
.mono{font-family:var(--f-mono)}
.tech{font-family:var(--f-tech);letter-spacing:.16em;text-transform:uppercase}
.red{color:var(--rojo-chispa)}
.amber{color:var(--ambar-sodio)}
.ink{color:var(--negro-obra)}
.soft{color:var(--acero-claro)}
.glow{text-shadow:0 0 28px rgba(255,59,47,.5),0 0 2px rgba(255,59,47,.9)}
.surf-rojo .glow{text-shadow:0 0 36px rgba(255,140,140,.45)}
.num{font-variant-numeric:tabular-nums}
.measure{max-width:30ch}

/* footer source line inside slide */
.foot-src{position:absolute;left:160px;right:420px;bottom:28px;z-index:55;font-family:var(--f-mono);font-size:14px;line-height:1.4;color:var(--acero)}
.surf-rojo .foot-src{color:rgba(244,239,234,.72)}

/* ---------- pills, tags, sticker ---------- */
.pill{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:var(--rojo-raptor);color:var(--blanco);
  font-family:var(--f-tech);font-size:13px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;width:max-content}
.pill.outline{background:transparent;border:1.5px solid rgba(244,239,234,.4);color:var(--hueso)}
.pill.dark{background:var(--negro-obra);color:var(--hueso)}
.pill.sm{height:32px;padding:0 14px;font-size:11px}
.tag-data{display:inline-block;font-family:var(--f-mono);font-size:15px;padding:6px 10px;border-radius:6px;background:rgba(244,239,234,.07);color:var(--acero-claro);width:max-content}
.sticker{position:absolute;z-index:30;display:inline-block;padding:10px 22px 12px;font-family:var(--f-display);font-stretch:70%;font-style:italic;font-weight:900;font-size:46px;line-height:1;
  text-transform:uppercase;color:var(--blanco);background:var(--rojo-chispa);border:4px solid var(--blanco);border-radius:10px;box-shadow:7px 7px 0 var(--rojo-sticker);transform:rotate(-4deg);white-space:nowrap}

/* ---------- cards ---------- */
.glass{background:rgba(12,8,8,.48);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border:1px solid rgba(244,239,234,.14);border-radius:16px;padding:30px}
.solid{background:#16100F;border:1px solid var(--linea);border-radius:16px;padding:30px}
.topline{border-top:3px solid var(--rojo-raptor)}
.read-card{background:#16100F;border:1px solid var(--linea);border-top:3px solid var(--rojo-raptor);border-radius:4px 4px 16px 16px;padding:30px 32px;display:flex;flex-direction:column;gap:16px}
.read-card .kicker{font-size:13px}

/* ---------- layout helpers ---------- */
.row{display:flex;gap:32px}
.col{display:flex;flex-direction:column;gap:16px}
.grow{flex:1;min-height:0}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.split{display:grid;grid-template-columns:1fr 470px;gap:56px;min-height:0}
.abs{position:absolute}

/* ---------- photos ---------- */
.bleed{position:absolute;inset:0;z-index:0;overflow:hidden}
.bleed img{width:100%;height:100%;object-fit:cover}
.bleed::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 60% 45%, transparent 55%, rgba(12,8,8,.55)), linear-gradient(rgba(26,6,5,.18),rgba(26,6,5,.18))}
.scrim-l::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,8,8,.94) 0%,rgba(12,8,8,.78) 30%,rgba(12,8,8,0) 62%),linear-gradient(0deg,rgba(12,8,8,.75),transparent 32%)}
.scrim-b::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(12,8,8,.92) 0%,rgba(12,8,8,.6) 30%,transparent 62%)}
.diag{clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.duo{filter:url(#duo-red)}
.portrait{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--linea);background:#140c0b}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,8,8,.95) 0%,rgba(12,8,8,.55) 36%,transparent 62%), linear-gradient(rgba(26,6,5,.16),rgba(26,6,5,.16))}
.portrait .cap{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;display:flex;flex-direction:column;gap:10px}

/* ---------- cans ---------- */
.can{position:absolute;z-index:20;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.can img{height:100%;width:auto}
.logo-out{filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff)}

/* ---------- KPI ---------- */
.kpi{display:flex;flex-direction:column;gap:14px;border-top:2px solid var(--rojo-raptor);padding-top:22px}
.kpi .n{font-family:var(--f-display);font-stretch:62%;font-weight:900;font-size:150px;line-height:.86;letter-spacing:-.015em;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .n.md{font-size:112px}
.kpi .n.sm{font-size:88px}
.kpi .u{color:var(--rojo-chispa)}
.surf-rojo .kpi{border-top-color:var(--negro-obra)}
.surf-rojo .kpi .u{color:var(--negro-obra)}
.kpi .lab{font-size:24px;line-height:1.35;color:var(--acero-claro);max-width:22ch}
.surf-rojo .kpi .lab{color:rgba(244,239,234,.88)}

/* ---------- bars ---------- */
.bars{display:flex;flex-direction:column;gap:18px}
.bar-row{display:grid;grid-template-columns:330px 1fr 270px;align-items:center;gap:28px}
.bar-row .lab{font-family:var(--f-display);font-stretch:75%;font-weight:800;font-size:38px;line-height:1;text-transform:uppercase;white-space:nowrap}
.bar-row .val{font-family:var(--f-mono);font-size:20px;color:var(--acero-claro);white-space:nowrap}
.track{height:var(--th,32px);position:relative}
.bar{height:100%;border-radius:2px;background:var(--acero-oscuro);transform-origin:left center}
.bar.steel{background:#77706E}
.bar.raptor{background:var(--rojo-raptor);box-shadow:0 0 22px rgba(255,59,47,.45)}
.bar-row.me .lab{color:var(--rojo-chispa)}
.bar-row.me .val{color:var(--hueso);font-weight:500}

/* ---------- tables ---------- */
.dtable{width:100%;border-collapse:collapse;font-size:23px;line-height:1.3}
.dtable th{font-family:var(--f-tech);font-size:12px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;text-align:left;color:var(--acero);padding:0 18px 16px;border-bottom:1px solid rgba(244,239,234,.3)}
.dtable td{padding:17px 18px;border-bottom:1px solid var(--linea);vertical-align:middle}
.dtable td.k{font-family:var(--f-display);font-stretch:75%;font-weight:800;font-size:32px;text-transform:uppercase;line-height:1}
.dtable td.n,.dtable th.n{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.dtable tr.me td{background:rgba(207,19,23,.16)}
.dtable tr.me td:first-child{box-shadow:inset 4px 0 0 var(--rojo-raptor)}
.dtable tr.me td.k{color:var(--rojo-chispa)}

/* ---------- section divider ---------- */
.div-num{position:absolute;z-index:3;font-family:var(--f-display);font-stretch:56%;font-weight:900;font-size:560px;line-height:.78;letter-spacing:-.03em;color:var(--blanco)}
.div-num.outline{color:transparent;-webkit-text-stroke:3px rgba(244,239,234,.85)}
.bolt{position:absolute;z-index:4;overflow:visible;pointer-events:none}
.bolt path{fill:none;stroke:var(--rojo-chispa);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(254,140,140,.9))}

/* ---------- light streaks ---------- */
.streak{position:absolute;z-index:2;height:2px;width:900px;background:linear-gradient(90deg,transparent,rgba(255,59,47,.0) 10%,rgba(255,120,100,.9) 70%,#fff 96%,transparent);
  transform:rotate(-14deg);opacity:0;filter:drop-shadow(0 0 6px rgba(255,59,47,.9))}

/* ---------- timecard ---------- */
.timecard{border:2px solid rgba(244,239,234,.6);border-radius:6px;background:rgba(12,8,8,.86);display:flex;flex-direction:column}
.timecard .tc-h{display:flex;justify-content:space-between;font-family:var(--f-tech);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--acero-claro);padding:14px 22px;border-bottom:2px solid rgba(244,239,234,.6)}
.punches{display:grid;grid-template-columns:repeat(6,1fr)}
.punch{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px;border-left:1px dashed rgba(244,239,234,.35)}
.punch:first-child{border-left:none}
.stamp{font-family:var(--f-tech);font-size:40px;letter-spacing:.02em;color:var(--rojo-chispa);line-height:1}
.punch .body{font-size:21px}
.punch.night{background:var(--rojo-raptor);color:var(--blanco)}
.punch.night .stamp{color:var(--blanco)}
.punch.night .body{color:var(--blanco)}

/* ---------- 2x2 map ---------- */
.map{position:relative;height:640px;border:1px solid var(--linea);border-radius:6px;background:rgba(22,16,15,.6)}
.map .ax{position:absolute;background:rgba(244,239,234,.35)}
.map .ax.x{left:0;right:0;top:50%;height:2px}
.map .ax.y{top:0;bottom:0;left:50%;width:2px}
.map .axl{position:absolute;font-family:var(--f-tech);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--hueso);background:var(--negro-obra);padding:6px 12px;border:1px solid rgba(244,239,234,.35);border-radius:4px;white-space:nowrap}
.map .free{position:absolute;right:0;bottom:0;width:50%;height:50%;background:repeating-linear-gradient(-45deg,rgba(207,19,23,.16) 0 14px,transparent 14px 28px)}
.chip{position:absolute;z-index:3;width:300px;padding:12px 16px;border-radius:8px;background:#1d1514;border:2px solid rgba(244,239,234,.7);display:flex;flex-direction:column;gap:4px}
.chip b{font-family:var(--f-display);font-stretch:75%;font-weight:800;font-size:30px;text-transform:uppercase;line-height:1}
.chip span{font-size:18px;color:var(--acero-claro);line-height:1.25}
.chip.ghost{border-style:dashed;border-color:rgba(244,239,234,.45);background:transparent}
.chip.ghost b{color:var(--acero-claro)}
.chip.me{background:var(--rojo-raptor);border-color:var(--rojo-chispa);box-shadow:0 0 40px rgba(255,59,47,.55)}
.chip.me span{color:rgba(255,255,255,.88)}

/* ---------- slang collage ---------- */
.slang-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.slang{font-family:var(--f-display);font-stretch:70%;font-style:italic;font-weight:900;text-transform:uppercase;line-height:.95;display:inline-block}

/* ---------- timeline ---------- */
.tl{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.node{display:flex;flex-direction:column;gap:12px;padding-top:30px;position:relative}
.node::before{content:"";position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--rojo-chispa);box-shadow:0 0 18px rgba(255,59,47,.8)}
.node .yr{font-family:var(--f-display);font-stretch:62%;font-weight:900;font-size:76px;line-height:.9;color:var(--blanco)}
.node .where{font-family:var(--f-tech);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--rojo-chispa)}

/* ---------- calendar ---------- */
.cal{display:grid;grid-template-columns:repeat(6,1fr);gap:22px 18px}
.m{border-top:3px solid rgba(244,239,234,.7);padding-top:14px;display:flex;flex-direction:column;gap:8px;min-height:190px}
.m .mn{font-family:var(--f-display);font-stretch:62%;font-weight:900;font-size:52px;line-height:.9;text-transform:uppercase}
.m p{font-size:19px;line-height:1.3;color:var(--acero-claro)}
.m p b{color:var(--hueso);font-weight:600}
.m.hot{background:radial-gradient(120% 90% at 30% 40%, #E01B1F 0%, #B31110 45%, #7F0000 100%);border-top-color:var(--blanco);padding:14px 16px 16px;border-radius:0 0 12px 12px}
.m.hot p{color:var(--blanco)}
.m .tornado{display:inline-block;border:1.5px solid var(--mora-glow);color:var(--mora-glow);border-radius:999px;padding:2px 10px;font-family:var(--f-mono);font-size:14px;width:max-content}

/* ---------- phone frame for real IG posts ---------- */
.phone{width:200px;border-radius:26px;padding:8px;background:#000;border:1px solid rgba(244,239,234,.25);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.phone img{width:100%;height:auto;border-radius:19px}

/* ---------- shelf (Tornado) ---------- */
.shelf{display:flex;flex-wrap:wrap;gap:12px}
.shelf span{font-size:22px;font-weight:600;padding:10px 18px;border-radius:999px;border:1.5px solid rgba(110,140,200,.6);color:#BFD0F2;background:rgba(60,90,160,.18)}
.shelf span.me{border-color:var(--mora-glow);color:#fff;background:var(--mora-tornado);box-shadow:0 0 30px rgba(143,124,255,.6)}

/* =========================================================================
   MOTION — entrance animations run on first visit to a slide
   ========================================================================= */
@keyframes a-rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes a-fade{from{opacity:0}to{opacity:1}}
@keyframes a-line{from{clip-path:inset(100% 0 0 0);translate:0 30px}to{clip-path:inset(0 0 -20% 0);translate:0 0}}
@keyframes a-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes a-stamp{0%{opacity:0;scale:1.25}60%{opacity:1;scale:.97}100%{opacity:1;scale:1}}
@keyframes a-pop{0%{opacity:0;scale:.6}70%{opacity:1;scale:1.06}100%{opacity:1;scale:1}}
@keyframes a-kb{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes a-drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.045) translate(-1%,-.6%)}}
@keyframes a-sweep{from{transform:translateX(-110%) skewX(-18deg)}to{transform:translateX(120%) skewX(-18deg)}}
@keyframes a-draw{from{stroke-dashoffset:var(--len,1200)}to{stroke-dashoffset:0}}
@keyframes a-flicker{0%,100%{opacity:1}40%{opacity:.45}55%{opacity:1}}
@keyframes a-streak{0%{opacity:0;transform:translateX(-500px) rotate(-14deg)}15%{opacity:1}100%{opacity:0;transform:translateX(1500px) rotate(-14deg)}}
@keyframes a-canin{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes a-glow{0%{filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 0 rgba(255,59,47,0))}50%{filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(255,59,47,.85))}100%{filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 0 rgba(255,59,47,0))}}
@keyframes a-duo2color{from{filter:url(#duo-red)}to{filter:none}}
@keyframes a-slidein{from{opacity:0}to{opacity:1}}

.is-active.fresh [data-a]{animation-fill-mode:both;animation-timing-function:var(--ease-out)}
.is-active.fresh [data-a="rise"]{animation-name:a-rise;animation-duration:.6s}
.is-active.fresh [data-a="fade"]{animation-name:a-fade;animation-duration:.6s}
.is-active.fresh [data-a="line"]{animation-name:a-line;animation-duration:.7s}
.is-active.fresh [data-a="grow"]{animation-name:a-grow;animation-duration:.9s}
.is-active.fresh [data-a="stamp"]{animation-name:a-stamp;animation-duration:.45s}
.is-active.fresh [data-a="pop"]{animation-name:a-pop;animation-duration:.55s}
.is-active.fresh [data-a="can"]{animation:a-canin .9s var(--ease-out) both, a-glow 1.2s .9s ease-in-out 1}
.is-active.fresh [data-a="draw"] path{stroke-dasharray:var(--len,1200);animation:a-draw .5s var(--ease-out) both, a-flicker .35s .55s linear 1}
.is-active.fresh [data-a="duo"] img{animation:a-duo2color .9s ease both}
.is-active .bleed.kb img{animation:a-kb 1.3s var(--ease-out) both, a-drift 16s 1.3s linear forwards}
.is-active .sweep{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.is-active.fresh .sweep::before{content:"";position:absolute;top:-10%;bottom:-10%;width:42%;background:linear-gradient(90deg,transparent,rgba(255,59,47,.35),rgba(255,180,160,.18),transparent);animation:a-sweep 1s .1s var(--ease-io) both}
.is-active .streak{animation:a-streak 2.6s var(--ease-io) infinite}
.is-active .streak.s2{animation-delay:1.3s;animation-duration:3.2s}
.is-active .streak.s3{animation-delay:2.4s;animation-duration:2.9s}
[data-d="1"]{animation-delay:.08s!important}[data-d="2"]{animation-delay:.16s!important}[data-d="3"]{animation-delay:.24s!important}
[data-d="4"]{animation-delay:.32s!important}[data-d="5"]{animation-delay:.40s!important}[data-d="6"]{animation-delay:.48s!important}
[data-d="7"]{animation-delay:.56s!important}[data-d="8"]{animation-delay:.64s!important}[data-d="9"]{animation-delay:.72s!important}
[data-d="10"]{animation-delay:.80s!important}[data-d="12"]{animation-delay:.96s!important}[data-d="14"]{animation-delay:1.12s!important}

/* fallback (no View Transitions): crossfade incoming slide */
.no-vt .slide.is-active.entering{animation:a-slidein .35s ease both}

/* View Transitions — morph shared elements (Magic Move) */
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:var(--ease-io)}
::view-transition-group(*){animation-duration:.75s;animation-timing-function:var(--ease-out)}
::view-transition-group(rail),::view-transition-group(progress-track),::view-transition-group(corner-tag){animation-duration:0s}
::view-transition-group(spark){animation-duration:.45s}

/* reduced motion */
.calm *,.calm *::before,.calm *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* =========================================================================
   OVERVIEW (press G) — grid of all slides
   ========================================================================= */
.overview .viewport{overflow:auto;display:block;padding:40px max(16px,env(safe-area-inset-right,0px)) 80px max(16px,env(safe-area-inset-left,0px))}
.overview .stage{transform:none;width:auto;height:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px;background:transparent;overflow:visible}
.overview .stage > .rail,.overview .stage > .progress,.overview .stage > .corner-tag{display:none}
.overview .slide{display:block;position:relative;inset:auto;width:1920px;height:1080px;zoom:.18;cursor:pointer;outline:6px solid transparent;border-radius:20px}
.overview .slide:hover{outline-color:var(--rojo-chispa)}
.overview .slide.is-active{outline-color:var(--hueso)}
.overview .slide *{animation:none!important}

/* ---------- HUD ---------- */
.hud{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:100;display:flex;gap:6px;align-items:center;
  padding:6px;border-radius:999px;background:rgba(12,8,8,.78);border:1px solid rgba(244,239,234,.14);font-family:var(--f-mono);font-size:13px;opacity:.25;transition:opacity .25s}
.hud:hover,.hud:focus-within,.show-hud .hud{opacity:1}
.hud button{background:transparent;border:1px solid rgba(244,239,234,.22);border-radius:999px;padding:6px 12px;cursor:pointer;color:var(--hueso)}
.hud button:hover{border-color:var(--rojo-chispa)}
.hud button:focus-visible{outline:2px solid var(--rojo-chispa);outline-offset:2px}
.rotate-hint{display:none}
@media (orientation:portrait) and (max-width:700px){
  .rotate-hint{display:block;position:fixed;left:16px;right:16px;bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:100;text-align:center;font-family:var(--f-tech);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--acero-claro)}
}