/* ===== fonts.css ===== */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/bungee.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Monoton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/monoton.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/permanent-marker.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/special-elite.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/vt323.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== fita.css ===== */
/* CODR Studio — Opção 4c (referência): Lado A / Lado B
   A fita é o sistema de interface. Dawn = Lado A, Dusk = Lado B. */

:root{
  --ease-ui: cubic-bezier(0,0.4,0.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-ui: .165s;
  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-hand: "Permanent Marker", "Bricolage Grotesque", cursive;
  --r: 14px;
}
/* LADO A — Synthetic Dawn */
html[data-side="a"]{
  --bg: oklch(93% .045 62);
  --bg-2: oklch(89% .07 52);
  --ink: oklch(25% .05 30);
  --ink-soft: oklch(42% .06 35);
  --paper: oklch(98% .015 85);
  --s1: oklch(70% .19 32);   /* coral */
  --s2: oklch(79% .16 65);   /* laranja */
  --s3: oklch(88% .16 98);   /* amarelo */
  --s4: oklch(74% .11 230);  /* azul-céu */
  --accent: oklch(64% .21 30);
  --glow: transparent;
  --shell: oklch(97% .01 80 / .55);
  color-scheme: light;
}
/* LADO B — Synthetic Dusk */
html[data-side="b"]{
  --bg: oklch(19% .06 290);
  --bg-2: oklch(24% .09 300);
  --ink: oklch(96% .02 320);
  --ink-soft: oklch(80% .06 300);
  --paper: oklch(27% .08 295);
  --s1: oklch(66% .27 350);  /* magenta */
  --s2: oklch(82% .15 200);  /* ciano */
  --s3: oklch(82% .16 75);   /* âmbar */
  --s4: oklch(60% .22 300);  /* violeta */
  --accent: oklch(72% .25 350);
  --glow: oklch(66% .27 350 / .55);
  --shell: oklch(30% .06 290 / .55);
  color-scheme: dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-display);
  font-variation-settings:"wdth" 100;
  font-size:clamp(16px,1.05vw,18px); line-height:1.5;
  overflow-x:hidden;
  transition:background-color .01s;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--s1);color:var(--paper)}

/* ===== tipografia viva (design.google) ===== */
.vf{
  font-variation-settings:"wdth" var(--w,75), "opsz" 96;
  font-weight:var(--wt,700);
  transition:font-variation-settings var(--t-ui) var(--ease-ui), font-weight var(--t-ui) var(--ease-ui), letter-spacing var(--t-ui) var(--ease-ui);
}
.vf:hover,.vf:focus-visible{--w:100;--wt:800}
.hand{font-family:var(--f-hand);font-weight:400;letter-spacing:.01em}

/* ===== riscas: o DNA do label ===== */
.stripes{
  display:flex;flex-direction:column;gap:3px;
}
.stripes i{display:block;height:var(--h,8px);border-radius:2px}
.stripes i:nth-child(1){background:var(--s1)}
.stripes i:nth-child(2){background:var(--s2)}
.stripes i:nth-child(3){background:var(--s3)}
.stripes i:nth-child(4){background:var(--s4)}

/* ===== chrome ===== */
.top{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;align-items:center;gap:14px;
  padding:14px clamp(14px,3vw,36px);
  pointer-events:none;
}
.top > *{pointer-events:auto}
.logo{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  background:var(--paper);padding:8px 14px 8px 10px;border-radius:10px;
  box-shadow:0 1px 0 oklch(0% 0 0 / .08), 0 0 22px var(--glow);
}
.logo .stripes{width:22px}
.logo .stripes i{--h:4px}
.logo b{font-size:20px;letter-spacing:.06em;font-weight:800;font-variation-settings:"wdth" 80}
.logo small{font-family:var(--f-hand);font-size:13px;color:var(--accent)}
.top .sp{flex:1}
.lang{
  display:flex;background:var(--paper);border-radius:999px;padding:4px;
  box-shadow:0 0 18px var(--glow);
}
.lang button{padding:5px 10px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.05em}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

/* botão auto-reverse */
.rev{
  display:flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--bg);
  padding:8px 14px 8px 10px;border-radius:999px;font-weight:800;font-size:13px;letter-spacing:.08em;
  box-shadow:0 0 24px var(--glow);
}
.rev .arrows{display:flex;gap:2px}
.rev .arrows span{width:0;height:0;border:6px solid transparent}
.rev .arrows span:first-child{border-right:9px solid var(--s1);border-left:0}
.rev .arrows span:last-child{border-left:9px solid var(--s2);border-right:0;opacity:.45}
html[data-side="b"] .rev .arrows span:first-child{opacity:.45}
html[data-side="b"] .rev .arrows span:last-child{opacity:1}
.rev:hover .arrows{animation:nudge .5s var(--ease-out)}
@keyframes nudge{50%{transform:translateX(3px) scaleX(-1)}}

.menu-btn{
  background:var(--paper);border-radius:999px;padding:9px 16px;font-weight:800;font-size:13px;letter-spacing:.1em;
  display:flex;align-items:center;gap:8px;box-shadow:0 0 18px var(--glow);
}
.menu-btn .bars{display:grid;gap:3px}
.menu-btn .bars i{display:block;width:16px;height:2px;background:currentColor;border-radius:2px}

/* painel (J-card) */
.scrim{position:fixed;inset:0;background:oklch(10% .03 300 / .55);opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out);z-index:60;backdrop-filter:blur(2px)}
.panel{
  position:fixed;top:0;right:0;bottom:0;width:min(460px,92vw);z-index:61;
  background:var(--paper);transform:translateX(102%);
  transition:transform .5s var(--ease-out);
  display:flex;flex-direction:column;padding:28px 28px 24px;
  border-left:10px solid var(--s1);
  box-shadow:-30px 0 60px oklch(0% 0 0 / .2);
}
body.menu-open .scrim{opacity:1;pointer-events:auto}
body.menu-open .panel{transform:none}
.panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.panel header .hand{color:var(--accent);font-size:18px}
.panel .close{font-size:13px;font-weight:800;letter-spacing:.1em;padding:8px 12px;border:2px solid var(--ink);border-radius:999px}
.panel ol{list-style:none;display:grid;gap:4px}
.panel li{opacity:0;transform:translateX(30px);transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
body.menu-open .panel li{opacity:1;transform:none}
body.menu-open .panel li:nth-child(1){transition-delay:.08s}
body.menu-open .panel li:nth-child(2){transition-delay:.10s}
body.menu-open .panel li:nth-child(3){transition-delay:.12s}
body.menu-open .panel li:nth-child(4){transition-delay:.14s}
body.menu-open .panel li:nth-child(5){transition-delay:.16s}
.panel a{
  display:flex;align-items:baseline;gap:14px;text-decoration:none;
  font-size:clamp(34px,5vw,48px);line-height:1.05;padding:6px 0;border-bottom:1px dashed color-mix(in oklch,var(--ink) 25%,transparent);
}
.panel a .n{font-family:var(--f-hand);font-size:15px;color:var(--accent);min-width:28px}
.panel footer{margin-top:auto;display:grid;gap:12px}
.panel footer .stripes i{--h:6px}

/* ===== cursor = cabeça de leitura ===== */
.head{
  position:fixed;left:0;top:0;z-index:100;pointer-events:none;
  width:34px;height:22px;margin:-11px 0 0 -17px;
  border-radius:4px 4px 8px 8px;
  background:linear-gradient(var(--ink),var(--ink)) center 55%/2px 9px no-repeat, var(--shell);
  border:2px solid var(--ink);
  backdrop-filter:blur(3px);
  transition:width .2s var(--ease-ui), height .2s var(--ease-ui), margin .2s var(--ease-ui), background-color .2s;
  display:grid;place-items:center;
  box-shadow:0 0 14px var(--glow);
}
.head span{opacity:0;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--bg);transition:opacity .15s}
.head.on{width:74px;height:30px;margin:-15px 0 0 -37px;background:var(--accent);border-color:var(--accent)}
.head.on span{opacity:1}
.head.down{transform-origin:center}
@media (hover:hover) and (pointer:fine){
  body.has-head, body.has-head a, body.has-head button, body.has-head textarea{cursor:none}
}
@media not ((hover:hover) and (pointer:fine)){ .head{display:none} }

/* ===== HUD: janela de fita com rolos = progresso ===== */
.hud{
  position:fixed;right:clamp(12px,2.4vw,30px);bottom:clamp(12px,2.4vw,26px);z-index:39;
  width:168px;padding:10px 12px 8px;border-radius:12px;
  background:var(--paper);box-shadow:0 10px 30px oklch(0% 0 0 / .15), 0 0 26px var(--glow);
}
.hud .win{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 6px;border-radius:28px;background:var(--bg-2);position:relative;overflow:hidden}
.hud svg{width:var(--sz,46px);height:var(--sz,46px);overflow:visible}
.hud .tape{position:absolute;left:30%;right:30%;top:50%;height:2px;margin-top:10px;background:oklch(35% .05 40)}
.hud .row{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.12em}
.hud .count{font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace;background:var(--ink);color:var(--bg);padding:1px 6px;border-radius:4px}
.reel .hub{fill:var(--paper)}
.reel .pack{fill:oklch(33% .05 40)}

/* ===== o "deck": tudo que vira ===== */
.deck{transform-origin:50% 50vh;will-change:transform}

/* ===== hero ===== */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero .ph{position:absolute;inset:0;z-index:-2}
.hero .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:opacity .01s}
.hero .ph{animation:kb 26s ease-in-out infinite alternate}
.hero .ph .dusk{opacity:0}
html[data-side="b"] .hero .ph .dawn{opacity:0}
html[data-side="b"] .hero .ph .dusk{opacity:1}
@keyframes kb{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-2%,-1.5%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,color-mix(in oklch,var(--bg) 92%,transparent) 88%)}
.hero .in{padding:clamp(110px,16vh,150px) clamp(18px,5vw,72px) clamp(90px,14vh,140px);display:grid;gap:18px;max-width:min(1500px,52vw)}
.hero h1{
  font-size:clamp(60px,9.5vw,160px);line-height:.86;letter-spacing:-.02em;text-transform:uppercase;
  font-weight:600;
}
.hero h1 .ln{display:block;white-space:nowrap}
.hero h1 .w{display:inline-block;font-weight:800;font-variation-settings:"wdth" 100,"opsz" 96}
.hero h1 .hand{display:inline-block;text-transform:none;font-size:.28em;color:var(--accent);rotate:-6deg;translate:0 -.6em;letter-spacing:0;text-shadow:0 0 18px var(--glow)}
.hero p.lead{font-size:clamp(18px,1.6vw,24px);max-width:36ch;color:var(--ink);font-weight:500}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  padding:14px 22px;border-radius:999px;font-weight:800;letter-spacing:.04em;
  background:var(--ink);color:var(--bg);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), font-variation-settings var(--t-ui) var(--ease-ui);
  font-variation-settings:"wdth" 100;box-shadow:0 0 0 var(--glow);
}
.btn:hover{box-shadow:0 10px 30px var(--glow)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn .tri{width:0;height:0;border:6px solid transparent;border-left:10px solid currentColor;border-right:0}

/* ===== seções ===== */
section{position:relative}
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(18px,4vw,56px)}
.sec{padding:clamp(80px,12vh,150px) 0}
.kicker{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2em;font-size:13px;margin-bottom:18px}
.kicker .stripes{width:40px}
.kicker .stripes i{--h:3px}
h2{font-size:clamp(42px,7vw,110px);line-height:.9;text-transform:uppercase;font-weight:800;letter-spacing:-.01em}
h2 .hand{text-transform:none;color:var(--accent);font-size:.45em;display:inline-block;rotate:-4deg}

/* tracklist */
.tracks{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);margin-top:48px}
.track{
  --c:var(--s1);
  position:relative;display:flex;flex-direction:column;text-decoration:none;
  background:var(--paper);border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 0 oklch(0% 0 0 / .06), 0 18px 40px -20px oklch(0% 0 0 / .35);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  min-height:460px;
}
.track:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 30px 60px -24px oklch(0% 0 0 / .45), 0 0 40px var(--glow)}
.track .pic{aspect-ratio:4/3;overflow:hidden;position:relative}
.track .pic img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.track:hover .pic img{transform:scale(1.07)}
.track .pic .no{position:absolute;left:12px;top:12px;background:var(--paper);border-radius:8px;padding:2px 10px;font-weight:800;font-size:22px;font-variation-settings:"wdth" 75}
.track .lab{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1;
  background:repeating-linear-gradient(180deg,transparent 0 27px,color-mix(in oklch,var(--ink) 9%,transparent) 27px 28px);}
.track .band{display:flex;height:12px;border-radius:3px;overflow:hidden}
.track .band i{flex:1}
.track .band i:nth-child(1){background:var(--s1)}.track .band i:nth-child(2){background:var(--s2)}.track .band i:nth-child(3){background:var(--s3)}.track .band i:nth-child(4){background:var(--s4)}
.track h3{font-size:clamp(28px,2.4vw,38px);line-height:.95;text-transform:uppercase;font-weight:800}
.track .scrawl{font-family:var(--f-hand);font-size:19px;color:var(--accent);line-height:1.2;rotate:-1.5deg}
.track p{font-size:15px;color:var(--ink-soft)}
.track .go{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:13px;letter-spacing:.12em}
.track .go .dur{font-family:ui-monospace,monospace;letter-spacing:0;color:var(--ink-soft)}
/* faixa em branco */
.track.blank{background:transparent;border:2px dashed color-mix(in oklch,var(--ink) 40%,transparent);box-shadow:none}
.track.blank .pic{display:grid;place-items:center;background:repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in oklch,var(--ink) 6%,transparent) 12px 24px)}
.track.blank .rec{width:74px;height:74px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:var(--paper);font-weight:800;letter-spacing:.1em;font-size:13px;animation:rec 1.6s ease-in-out infinite;box-shadow:0 0 30px var(--glow)}
@keyframes rec{50%{transform:scale(.9);opacity:.75}}
.track.blank .band{opacity:.25}
.track.blank h3{color:var(--ink-soft)}

/* oficina: duas bancadas */
.bench{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:clamp(14px,1.6vw,24px);margin-top:48px;align-items:stretch}
.bench .ph{border-radius:var(--r);overflow:hidden;min-height:360px;position:relative}
.bench .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bench .ph .dusk{opacity:0}
html[data-side="b"] .bench .ph .dusk{opacity:1}
.bench .card{background:var(--paper);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:14px;border-top:10px solid var(--c)}
.bench .card h3{font-size:clamp(30px,3vw,46px);text-transform:uppercase;line-height:.95}
.bench .card ul{list-style:none;display:grid;gap:8px}
.bench .card li{display:flex;gap:10px;align-items:baseline;font-weight:600}
.bench .card li::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--c);flex:none;translate:0 1px}

/* bilhete / contato */
.note{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);align-items:center}
.jcard{
  background:var(--paper);border-radius:var(--r);padding:26px 26px 22px;rotate:-1.2deg;
  box-shadow:0 30px 60px -30px oklch(0% 0 0 / .5), 0 0 50px var(--glow);
  display:grid;gap:14px;position:relative;
}
.jcard .stripes i{--h:9px}
.jcard label{font-weight:800;letter-spacing:.14em;font-size:12px}
.jcard textarea{
  font-family:var(--f-hand);font-size:24px;line-height:32px;color:var(--ink);
  background:repeating-linear-gradient(180deg,transparent 0 31px,color-mix(in oklch,var(--ink) 18%,transparent) 31px 32px);
  border:0;resize:none;min-height:160px;outline:none;padding:0 2px;
}
.jcard .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.jcard small{color:var(--ink-soft);font-size:12px}

footer.site{padding:40px 0 120px;border-top:1px solid color-mix(in oklch,var(--ink) 15%,transparent)}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center;font-size:14px;color:var(--ink-soft)}

/* marquee de etiqueta */
.ticker{overflow:hidden;border-block:2px solid var(--ink);background:var(--s3);color:oklch(22% .05 30);padding:10px 0}
html[data-side="b"] .ticker{background:var(--s1);color:oklch(98% .01 0)}
.ticker .row{display:flex;gap:40px;white-space:nowrap;width:max-content;animation:tick 30s linear infinite;font-weight:800;font-size:clamp(20px,2.4vw,34px);text-transform:uppercase;font-variation-settings:"wdth" 75}
.ticker .row span{display:flex;gap:40px;align-items:center}
.ticker .row .hand{text-transform:none;font-variation-settings:normal}
@keyframes tick{to{transform:translateX(-50%)}}

/* entrada no scroll */
.rv{opacity:0;transform:translateY(36px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i,0)*60ms)}
.rv.in{opacity:1;transform:none}

/* ===== responsivo ===== */
@media (max-width:1100px){
  .tracks{grid-template-columns:repeat(2,1fr)}
  .bench{grid-template-columns:1fr 1fr}
  .bench .ph{grid-column:1/-1;min-height:260px}
}
@media (max-width:680px){
  .top{gap:8px;padding:10px 12px}
  .logo small,.rev .lbl-long,.menu-btn .t{display:none}
  .logo b{font-size:17px}
  .lang button{padding:4px 7px;font-size:12px}
  .tracks{grid-template-columns:1fr}
  .track{min-height:0}
  .bench{grid-template-columns:1fr}
  .note{grid-template-columns:1fr}
  .hud{width:124px;padding:7px 9px 6px}
  .hud .win{height:40px}
  .hud svg{--sz:32px}
  .hero .in{padding-bottom:120px}
}

/* ===== movimento reduzido: digno, não morto ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01s !important;transition-delay:0s !important}
  .rv{opacity:1;transform:none}
  .hero .ph img{transition:opacity .4s linear !important}
  html{scroll-behavior:auto}
}

/* legibilidade: véu lateral que segue o lado */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in oklch,var(--bg) 78%,transparent) 0%,color-mix(in oklch,var(--bg) 35%,transparent) 55%,transparent 80%)}
.rev,.menu-btn,.lang button{white-space:nowrap}
@media (max-width:680px){
  .hero::before{background:linear-gradient(0deg,color-mix(in oklch,var(--bg) 85%,transparent) 20%,transparent 75%)}
  .hero h1{font-size:clamp(52px,16.5vw,96px)}
  .hero .in{max-width:none;padding-top:0}
  .hero .ph{bottom:auto;height:54svh;-webkit-mask:linear-gradient(#000 72%,transparent);mask:linear-gradient(#000 72%,transparent)}
  .hero .ph img{object-position:82% 50%}
  .hud{bottom:10px;right:10px}
  .hero .in{padding-bottom:110px}
}
@media (max-width:680px){
  .rev{padding:10px 12px}
  .menu-btn{padding:10px 12px}
}

/* faixas bônus: menores, fora do repertório */
.bonus{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:clamp(14px,1.6vw,24px);margin-top:40px}
.bonus .track{min-height:0}
.bonus .track .pic{aspect-ratio:16/9}
.bonus .track h3{font-size:clamp(22px,1.8vw,28px)}
.bonus-lead{margin-top:18px;max-width:52ch;font-size:18px;color:var(--ink-soft)}
.track .go .bt{font-family:var(--f-hand);letter-spacing:.02em;font-weight:400;color:var(--accent)}
@media (max-width:680px){ .bonus{grid-template-columns:1fr} }

/* 4e: transição do auto-reverse da opção 4 original (faixas largas + cassete no centro) */
.deck{transform-origin:50% 50vh;will-change:transform}
html.flipping .deck{pointer-events:none}
.wipe{
  position:fixed;inset:0;z-index:80;pointer-events:none;display:grid;grid-template-rows:repeat(4,1fr);
  perspective:1400px;
}
.wipe i{transform:scaleX(0);transform-origin:left}
.wipe i:nth-child(1){background:var(--s1)}
.wipe i:nth-child(2){background:var(--s2)}
.wipe i:nth-child(3){background:var(--s3)}
.wipe i:nth-child(4){background:var(--s4)}
.flipcas{
  position:fixed;left:50%;top:50%;z-index:81;width:min(520px,80vw);aspect-ratio:1.58;
  translate:-50% -50%;pointer-events:none;opacity:0;
  perspective:1200px;
}
.flipcas .rotor{position:absolute;inset:0;transform-style:preserve-3d}
.flipcas .face{
  position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;
  background:var(--paper);padding:6%;display:flex;flex-direction:column;gap:6%;
  box-shadow:0 40px 80px oklch(0% 0 0 / .35);
  border:3px solid var(--ink);
}
.flipcas .face.b{transform:rotateY(180deg)}
.flipcas .lbl{display:flex;justify-content:space-between;align-items:center}
.flipcas .lbl b{font-size:clamp(28px,5vw,46px);font-variation-settings:"wdth" 75;font-weight:800}
.flipcas .lbl .hand{font-size:clamp(18px,3vw,28px);color:var(--accent)}
.flipcas .wn{flex:1;border-radius:999px;background:var(--bg-2);display:flex;justify-content:space-around;align-items:center}
.flipcas svg{width:28%;height:auto}
.flipcas .stripes i{--h:10px}

/* 4f: botões com caixa fixa — só o texto respira. Começa condensado, expande no hover.
   A largura de cada botão é medida na versão expandida e fixada (fita.js · fitButtons). */
.btn,.rev,.menu-btn,.lang button,.panel .close{
  font-variation-settings:"wdth" 75 !important;justify-content:center;text-align:center;
  transition:font-variation-settings .3s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s, color .2s;
}
.btn:hover,.rev:hover,.menu-btn:hover,.lang button:hover,.panel .close:hover,
.btn:focus-visible,.rev:focus-visible,.menu-btn:focus-visible,.lang button:focus-visible,.panel .close:focus-visible,
.fit-measure{font-variation-settings:"wdth" 100 !important}
.fit-measure{transition:none !important}
.btn,.rev,.menu-btn,.lang button,.panel .close{transform:none !important}

/* 4f: a cabeça cresce a partir da ponta do cursor, sem margem animada (a margem em transição
   deslocava a etiqueta para cima/esquerda). Normal: centrada. Ativa: a pílula nasce na ponta. */
.head{margin:0 !important;transform:translate(-50%,-50%);transition:width .2s var(--ease-ui), height .2s var(--ease-ui), transform .2s var(--ease-ui), background-color .2s}
.head.on{transform:translate(-6px,-6px)}
/* a posição vem no translate (JS); a âncora no transform. Assim o scale do clique encolhe a cabeça no lugar,
   em vez de escalar a posição inteira (que puxava a cabeça para o canto superior esquerdo). */

/* ===== ia.css ===== */
/* CODR Studio — Opção 6: a IA em 1985.
   Uma gramática de movimento só, de aparelho: LIGAR (entra como tubo esquentando) · RESPIRAR
   (fósforo pulsa, scanline passa, cursor pisca) · SINTONIZAR (desvio RGB que se acerta, a fonte
   expande) · TROCAR DE CANAL (barras de cor + vertical hold). Pouca intensidade, em tudo. */

:root{--f-crt:"VT323",ui-monospace,monospace;--phos:oklch(86% .19 150);--phos-dim:oklch(70% .15 150)}

/* ===== 1. LIGAR: a linha acende, abre, brilha e assenta ===== */
.rv{opacity:0;transform:none;transition:none}
.rv.in{animation:ligar .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*90ms) both}
@keyframes ligar{
  0%{opacity:1;clip-path:inset(50% 50% 50% 50%);filter:brightness(2.6) saturate(.4)}
  20%{clip-path:inset(calc(50% - 1px) 0 calc(50% - 1px) 0);filter:brightness(3) saturate(.3)}
  55%{clip-path:inset(-30px -30px -30px -30px);filter:brightness(1.5) saturate(1.2)}
  99%{clip-path:inset(-30px -30px -30px -30px);filter:brightness(1)}
  100%{opacity:1;clip-path:none;filter:none}
}
/* o hero liga ao abrir a página */
.hero .pwr{position:absolute;inset:0;animation:ligar 1.1s cubic-bezier(.2,.7,.2,1) .15s both}
.hero .pwr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .ph .pwr .dusk{opacity:0}
html[data-side="b"] .hero .ph .pwr .dawn{opacity:0}
html[data-side="b"] .hero .ph .pwr .dusk{opacity:1}
.hero .ph img{object-position:60% 50%}

/* ===== 2. RESPIRAR: toda tela tem fósforo, scanlines e uma faixa que passa ===== */
.crt{position:relative;overflow:hidden;isolation:isolate}
.crt::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg,oklch(0% 0 0 / .10) 0 1px,transparent 1px 3px);
  box-shadow:inset 0 0 60px oklch(0% 0 0 / .35);mix-blend-mode:multiply}
.crt::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent,oklch(100% 0 0 / .07) 60%,oklch(100% 0 0 / .14) 92%,transparent);
  animation:scan 9s linear var(--d,0s) infinite}
@keyframes scan{0%,70%{transform:translateY(0)}100%{transform:translateY(440%)}}
.crt img{animation:fosforo 5s ease-in-out infinite alternate}
@keyframes fosforo{to{filter:brightness(1.06) saturate(1.05)}}
.caret{display:inline-block;width:.55em;height:1em;background:currentColor;vertical-align:-.12em;margin-left:2px;animation:pisca 1.05s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}

/* ===== 3. SINTONIZAR: desvio RGB que se acerta + fonte que sai do condensado e expande ===== */
@keyframes sint-t{0%{text-shadow:3px 0 0 oklch(65% .26 25 / .7),-3px 0 0 oklch(80% .14 210 / .7)}
  55%{text-shadow:-1px 0 0 oklch(65% .26 25 / .45),1px 0 0 oklch(80% .14 210 / .45)}100%{text-shadow:none}}
@keyframes sint-i{0%{transform:translateX(3px);filter:saturate(1.7) hue-rotate(14deg) contrast(1.1)}
  35%{transform:translateX(-2px);filter:saturate(1.3) hue-rotate(-8deg)}100%{transform:none;filter:none}}
.tune:hover h3,.tune:focus-within h3,.btn:hover,.chlist button:hover{animation:sint-t .5s var(--ease-out)}
.tune:hover img{animation:sint-i .5s var(--ease-out)}
.tune .vf{--w:75;--wt:800}
.tune:hover .vf,.tune:focus-within .vf{--w:100}
.tune{transition:box-shadow .4s var(--ease-out)}
.tune:hover{box-shadow:0 0 0 1px color-mix(in oklch,var(--ink) 18%,transparent),0 24px 50px -28px oklch(0% 0 0 / .5),0 0 40px var(--glow)}

/* ===== 4. TROCAR DE CANAL: barras de cor da TV fora do ar, rolando na vertical ===== */
.chan{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden;visibility:hidden;clip-path:inset(100% 0 0 0);background:#111}
.chan.on{visibility:visible}
.chan .roll{position:absolute;left:0;right:0;top:-100vh;height:200vh;display:grid;grid-template-rows:1fr 1fr}
.chan.on .roll{animation:vhold .26s linear infinite}
@keyframes vhold{to{transform:translateY(100vh)}}
.chan .tile{display:grid;grid-template-rows:72% 28%;border-bottom:6px solid #000}
.chan .b7,.chan .b3{display:grid;grid-template-columns:repeat(7,1fr)}
.chan .b7 i:nth-child(1){background:#c9c4b8}.chan .b7 i:nth-child(2){background:#d8c23a}.chan .b7 i:nth-child(3){background:#3cbfc4}
.chan .b7 i:nth-child(4){background:#46b04a}.chan .b7 i:nth-child(5){background:#c043b8}.chan .b7 i:nth-child(6){background:#d0453a}.chan .b7 i:nth-child(7){background:#3046b8}
.chan .b3 i:nth-child(1){background:#3046b8}.chan .b3 i:nth-child(2){background:#161616}.chan .b3 i:nth-child(3){background:#c043b8}
.chan .b3 i:nth-child(4){background:#161616}.chan .b3 i:nth-child(5){background:#3cbfc4}.chan .b3 i:nth-child(6){background:#161616}.chan .b3 i:nth-child(7){background:#c9c4b8}
.chan::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,oklch(0% 0 0 / .18) 0 2px,transparent 2px 4px)}
.chan .osd{position:absolute;right:clamp(18px,5vw,70px);top:clamp(70px,12vh,120px);z-index:2;display:grid;justify-items:end;
  font-family:var(--f-crt);color:#7dff8a;text-shadow:0 0 10px #39ff5a,2px 2px 0 #000;line-height:.9}
.chan .osd .ch{font-size:clamp(56px,9vw,120px);font-weight:400}
.chan .osd .nm{font-size:clamp(28px,4vw,52px)}
html.flipping .deck{pointer-events:none}

/* ===== hero: o terminal onde a IA conversa ===== */
.term{position:absolute;right:clamp(18px,4vw,64px);bottom:clamp(90px,15vh,150px);width:min(400px,34vw);z-index:2;
  background:oklch(18% .03 160 / .88);color:var(--phos);border-radius:14px;padding:14px 16px 16px;
  border:2px solid oklch(30% .03 160);box-shadow:0 0 0 6px oklch(88% .03 80 / .5),0 30px 60px -20px oklch(0% 0 0 / .55),0 0 40px oklch(80% .2 150 / .18);
  font-family:var(--f-crt);font-size:21px;line-height:1.15;text-shadow:0 0 8px oklch(80% .2 150 / .6);
  animation:ligar .9s cubic-bezier(.2,.7,.2,1) .7s both}
html[data-side="b"] .term{box-shadow:0 0 0 6px oklch(40% .1 300 / .5),0 30px 60px -20px oklch(0% 0 0 / .7),0 0 50px var(--glow)}
.term .th{display:flex;align-items:center;gap:8px;font-size:15px;letter-spacing:.12em;color:var(--phos-dim);margin-bottom:8px;border-bottom:1px dashed oklch(70% .15 150 / .35);padding-bottom:6px}
.term .dot{width:8px;height:8px;border-radius:50%;background:var(--phos);box-shadow:0 0 8px var(--phos);animation:fosforo-dot 2.4s ease-in-out infinite}
@keyframes fosforo-dot{50%{opacity:.45}}
.term .tb{height:7.6em;overflow:hidden}
.term p{margin:0 0 4px;white-space:pre-wrap;color:var(--phos-dim)}
.term p.ai{color:var(--phos)}
.term .caret{color:var(--phos)}

/* ===== bloco 2: o CRT com o agente + linhas digitadas ===== */
.bench .ph.crt{border-radius:var(--r)}
.bench .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.typed li{font-family:var(--f-crt);font-size:22px;font-weight:400;line-height:1.15;min-height:1.15em}
.typed li::before{content:">" !important;width:auto !important;height:auto !important;background:none !important;color:var(--c);font-weight:700;translate:0 0 !important}
.typed li.wait{visibility:hidden}
.typed li.typing::after{content:"";display:inline-block;width:.5em;height:.95em;background:currentColor;margin-left:2px;vertical-align:-.1em;animation:pisca .5s steps(1) infinite}
.typed li:last-child:not(.typing):not(.wait)::after{content:"";display:inline-block;width:.5em;height:.95em;background:var(--c);margin-left:4px;vertical-align:-.1em;animation:pisca 1.05s steps(1) infinite}

/* ===== bloco 3: cada passo é uma tela que liga ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);margin-top:48px}
.step{background:var(--paper);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 0 oklch(0% 0 0 / .06),0 18px 40px -20px oklch(0% 0 0 / .35)}
.step .scr{aspect-ratio:4/3;background:oklch(17% .03 160);margin:12px 12px 0;border-radius:18px/24px;
  border:3px solid color-mix(in oklch,var(--ink) 80%,transparent)}
.step .scr img{width:100%;height:100%;object-fit:cover}
.step .scr pre{position:absolute;inset:0;padding:16px 16px;font-family:var(--f-crt);font-size:clamp(19px,1.5vw,23px);line-height:1.2;color:var(--phos);
  text-shadow:0 0 8px oklch(80% .2 150 / .6);white-space:pre-wrap}
.step .no{position:absolute;right:10px;bottom:8px;z-index:4;font-family:var(--f-crt);font-size:34px;line-height:1;color:var(--phos);text-shadow:0 0 10px oklch(80% .2 150 / .7)}
.step .lab{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.step h3{font-size:clamp(26px,2.2vw,34px);line-height:.95;text-transform:uppercase}
.step p{font-size:15px;color:var(--ink-soft)}
.step .tag{margin-top:auto;font-family:var(--f-hand);color:var(--accent);font-size:17px}

/* ===== bloco 4: ▶▶ avanço rápido ===== */
.ff{height:190vh;position:relative;background:#0b0710}
.ff-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.ff-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity}
.ff-pics img:first-child{opacity:1}
.ff-stick::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg,oklch(0% 0 0 / .22) 0 2px,transparent 2px 4px),radial-gradient(ellipse at center,transparent 50%,oklch(0% 0 0 / .65))}
.ff-track{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .25s}
.ff.moving .ff-track{opacity:1}
.ff-track i{position:absolute;left:0;right:0;height:6px;background:linear-gradient(90deg,transparent,oklch(100% 0 0 / .55) 20%,oklch(100% 0 0 / .2) 60%,transparent);filter:blur(.6px);mix-blend-mode:screen}
.ff-osd{position:absolute;inset:clamp(70px,11vh,110px) clamp(18px,4vw,56px) auto;z-index:4;display:flex;justify-content:space-between;
  font-family:var(--f-crt);font-size:clamp(40px,5vw,72px);line-height:1;color:#f2f2f2;text-shadow:3px 3px 0 #000,0 0 14px oklch(100% 0 0 / .5)}
.ff-clock{font-variant-numeric:tabular-nums}
.ff-cap{position:absolute;left:clamp(18px,4vw,56px);bottom:clamp(40px,10vh,100px);z-index:4;display:grid;gap:4px;color:#fff;max-width:min(900px,90vw)}
.ff-cap .hand{color:oklch(80% .17 60);font-size:clamp(18px,2vw,26px);rotate:-2deg}
.ff-cap b{font-size:clamp(48px,8vw,120px);line-height:.9;text-transform:uppercase;font-weight:800;font-variation-settings:"wdth" 75;text-shadow:0 4px 30px oklch(0% 0 0 / .6)}

/* ===== bloco 5: zapping ===== */
.zapw{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,5vw,80px);align-items:start}
.zap-fine{margin-top:12px;font-size:14px;color:var(--ink-soft);max-width:52ch}
.chlist{display:grid;gap:8px;margin-top:28px;max-width:420px}
.chlist button{display:flex;gap:14px;align-items:baseline;text-align:left;padding:10px 14px;border-radius:10px;
  border:2px solid color-mix(in oklch,var(--ink) 20%,transparent);font-weight:700;transition:background-color .2s,border-color .2s}
.chlist button b{font-family:var(--f-crt);font-weight:400;font-size:24px;color:var(--accent);min-width:3.4em}
.chlist button span{font-variation-settings:"wdth" 75;transition:font-variation-settings .3s var(--ease-out)}
.chlist button:hover span,.chlist button[aria-selected="true"] span{font-variation-settings:"wdth" 100}
.chlist button[aria-selected="true"]{background:var(--paper);border-color:var(--ink)}
.tv{display:grid;grid-template-columns:1fr 64px;gap:14px;padding:18px;border-radius:26px;
  background:linear-gradient(90deg,oklch(32% .05 45),oklch(38% .06 50) 30%,oklch(30% .05 45) 60%,oklch(36% .06 50)),oklch(34% .05 45);
  box-shadow:inset 0 2px 0 oklch(100% 0 0 / .15),inset 0 -6px 0 oklch(0% 0 0 / .3),0 40px 80px -30px oklch(0% 0 0 / .6),0 0 60px var(--glow)}
.tv .scr{aspect-ratio:4/3;background:#111;border-radius:22% / 18%;border:10px solid oklch(18% .01 60);box-shadow:inset 0 0 40px #000}
.tv .chn{position:absolute;inset:0;opacity:0;transition:opacity .12s;display:grid;place-items:center}
.tv .chn.on{opacity:1}
.tv .chn img{width:100%;height:100%;object-fit:cover}
.tv .chn.next span{font-family:var(--f-crt);font-size:clamp(28px,3vw,44px);color:#fff;text-shadow:2px 2px 0 #000;z-index:5;position:relative}
.tv .snow{position:absolute;inset:0;width:100%;height:100%;opacity:0;image-rendering:pixelated;z-index:1;mix-blend-mode:screen}
.tv.static .snow{opacity:.55}
.tv-osd{position:absolute;top:14px;right:22px;z-index:5;font-family:var(--f-crt);font-size:44px;line-height:1;color:#7dff8a;text-shadow:0 0 10px #39ff5a,2px 2px 0 #000}
.tv-osd.blink{animation:osd 1.6s steps(1) both}
@keyframes osd{0%,80%{opacity:1}100%{opacity:.0}}
.knobs{display:grid;align-content:start;justify-items:center;gap:16px;padding-top:10px}
.knobs .k{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,oklch(80% .02 80),oklch(45% .02 60));box-shadow:0 3px 0 oklch(0% 0 0 / .4)}
.knobs .k.s{width:34px;height:34px}
.knobs .grill{width:40px;height:90px;border-radius:6px;background:repeating-linear-gradient(180deg,oklch(20% .02 50) 0 3px,transparent 3px 7px)}
.tvcap{margin-top:18px;display:grid;gap:6px;min-height:150px}
.tvcap .scrawl{font-family:var(--f-hand);color:var(--accent);font-size:19px;rotate:-1.5deg;justify-self:start}
.tvcap h3{font-size:clamp(28px,2.6vw,40px);text-transform:uppercase;line-height:.95;--w:100}
.tvcap p{color:var(--ink-soft);max-width:52ch}
.tvcap .go{font-weight:800;font-size:13px;letter-spacing:.12em;text-decoration:none;display:flex;gap:12px;align-items:center}
.tvcap .go .dur{font-family:ui-monospace,monospace;letter-spacing:0;color:var(--ink-soft);font-weight:500}
.tvcap .soon{gap:0}
.tvcap .soon .dots::after{content:"";animation:dots 1.4s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* ===== responsivo ===== */
@media (max-width:1100px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .zapw{grid-template-columns:1fr}
}
@media (max-width:680px){
  .steps{grid-template-columns:1fr}
  .term{left:12px;right:auto;top:calc(54svh - 196px);bottom:auto;width:min(300px,78vw);font-size:15px;padding:10px 12px}
  .term .th{font-size:12px}
  .term .tb{height:8em}
  .hero .in{padding-top:calc(54svh - 10px)}
  .ff{height:170vh}
  .tv{grid-template-columns:1fr 40px;padding:12px;gap:10px}
  .knobs .k{width:30px;height:30px}.knobs .k.s{width:24px;height:24px}.knobs .grill{width:26px;height:60px}
  .tv-osd{font-size:32px}
}

/* ===== movimento reduzido: aparelho ligado, sem esquentar ===== */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1}
  .crt::after{display:none}
  .chan{display:none}
}
/* 6e: vídeo do Dia no fundo do hero */
.hero .ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s linear}
.hero .ph video{object-position:60% 50%}
@media (max-width:760px){.hero .ph video{object-position:82% 50%}}

/* ===== punch.css ===== */
/* 6g: a faixa vira punchline. As letras chegam grandes e assentam, a frase desliza, se desfaz, e as reticências respiram até a próxima. */
.ticker.punch{position:relative;height:calc(clamp(22px,2.6vw,38px) * 1.25 + 24px);padding:0}
.punch .line{position:absolute;left:0;top:50%;margin:0;white-space:nowrap;will-change:transform;
  font-weight:800;font-size:clamp(22px,2.6vw,38px);line-height:1.25;text-transform:uppercase;font-variation-settings:"wdth" 75}
.punch .line.alt{font-family:var(--f-hand);font-weight:400;text-transform:none;font-variation-settings:normal}
.punch .line .c{display:inline-block;white-space:pre;transform-origin:50% 70%}
.punch .line .dots{display:inline-flex;gap:.18em;font-size:1.2em}
.punch .line .dots i{display:inline-block;width:.22em;height:.22em;border-radius:50%;background:currentColor;opacity:.15}
/* 6h: fontes misturadas por palavra, todas na mesma altura ótica */
.punch .line .w{display:inline-block;white-space:nowrap}
.punch .line .sp{width:.32em}
.punch .line .f-disp{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 75}
.punch .line .f-hand{font-family:var(--f-hand);font-weight:400;text-transform:none;font-variation-settings:normal;font-size:1.02em}
.punch .line .f-bung{font-family:"Bungee",var(--f-display);font-weight:400;text-transform:uppercase;font-variation-settings:normal;font-size:.86em}
.punch .line .f-crt{font-family:var(--f-crt);font-weight:400;text-transform:uppercase;font-variation-settings:normal;font-size:1.3em;line-height:.9}
.punch .line .f-type{font-family:"Special Elite",monospace;font-weight:400;text-transform:none;font-variation-settings:normal;font-size:1.04em}
.punch .line .f-neon{font-family:"Monoton",var(--f-display);font-weight:400;text-transform:uppercase;font-variation-settings:normal;font-size:.9em;letter-spacing:.02em}

/* ===== aovivo.css ===== */
/* 6i: AO VIVO — a conversa mora na tela de um CRT de verdade, encaixada na perspectiva do monitor */
.live-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center}
.live-copy p{font-size:clamp(17px,1.4vw,21px);max-width:34ch;color:var(--ink);margin-top:14px}
.crtview{position:relative;aspect-ratio:5/4;border-radius:var(--r,22px);overflow:hidden;background:#120d18;
  box-shadow:0 30px 60px -24px oklch(0% 0 0 / .45)}
.crtview .stage{position:absolute;left:0;top:0;width:1344px;height:768px;transform-origin:0 0;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.crtview .stage img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .4s linear}
.crtview .stage .dusk{opacity:0}
html[data-side="b"] .crtview .stage .dawn{opacity:0}
html[data-side="b"] .crtview .stage .dusk{opacity:1}
.crtview .scr{position:absolute;left:0;top:0;width:520px;height:390px;transform-origin:0 0;box-sizing:border-box;
  padding:26px 30px;color:var(--phos);font-family:var(--f-crt);font-size:30px;line-height:1.12;
  text-shadow:0 0 10px oklch(80% .2 150 / .7),0 0 2px oklch(90% .2 150 / .9);overflow:hidden}
/* varredura + vinheta do vidro curvo */
.crtview .scr::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,oklch(0% 0 0 / .22) 0 2px,transparent 2px 4px),
             radial-gradient(120% 120% at 50% 50%,transparent 55%,oklch(0% 0 0 / .55) 100%)}
.crtview .scr::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;pointer-events:none;
  background:linear-gradient(transparent,oklch(85% .2 150 / .07),transparent);animation:rolar 6s linear infinite}
@keyframes rolar{to{transform:translateY(430%)}}
.crtview .scr .th{display:flex;align-items:center;gap:10px;font-size:22px;letter-spacing:.08em;color:var(--phos-dim);
  padding-bottom:10px;margin-bottom:14px;border-bottom:1px dashed oklch(70% .15 150 / .35)}
.crtview .scr .dot{width:10px;height:10px;border-radius:50%;background:var(--phos);box-shadow:0 0 10px var(--phos);animation:pisca 1.6s steps(2) infinite}
@keyframes pisca{50%{opacity:.25}}
.crtview .scr .tb{height:calc(100% - 52px);overflow:hidden}
.crtview .scr p{margin:0 0 6px;white-space:pre-wrap;color:var(--phos-dim)}
.crtview .scr p.ai{color:var(--phos)}
.crtview .scr .caret{color:var(--phos)}
@media (max-width:760px){
  .live-grid{grid-template-columns:1fr}
  .crtview{order:-1;aspect-ratio:1/1;margin-inline:-4px}
  .crtview .scr{font-size:38px;padding:22px 24px}
  .crtview .scr .th{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.crtview .scr::after,.crtview .scr .dot{animation:none}}
/* 6i: no celular a fitinha do canto espera os botões do hero saírem da tela */
.hud{transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1)}
@media (max-width:760px){html.cta-vista .hud{opacity:0;transform:translateY(24px);pointer-events:none}}
/* 6m: etiqueta da fita — LADO A impresso, Dia escrito à caneta */
.flipcas .lbl .sd{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1}
.flipcas .lbl .sd small{font-family:var(--f-display);font-weight:800;font-size:clamp(10px,1.4vw,13px);letter-spacing:.18em;opacity:.6}
.flipcas .lbl .pen{font-family:var(--f-hand);font-size:clamp(26px,4.4vw,42px);color:var(--accent);rotate:-4deg;text-transform:none}
/* 6n: a fitinha do canto — LADO A impresso pequeno, Dia escrito à caneta */
.hud .row .sd{display:flex;flex-direction:column;line-height:1;gap:3px}
.hud .row .sd small{font-family:var(--f-display);font-weight:800;font-size:9px;letter-spacing:.2em;opacity:.6}
.hud .row .sd .pen{font-family:var(--f-hand);font-weight:400;font-size:20px;letter-spacing:0;text-transform:none;color:var(--accent);rotate:-4deg;transform-origin:left}

/* ===== fita-viva.css ===== */
/* CODR Studio — Opção 6: a fitinha do canto (HUD) é o seletor de canal.
   Hover: as faixas de cor da 4f passam dentro do widget e só ele mostra o outro canal.
   Clique/tap: o site inteiro troca de canal (fita.js). */
.hud{cursor:pointer;overflow:hidden;isolation:isolate;transition:background-color .28s cubic-bezier(.16,1,.3,1),box-shadow .28s}
.hud:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hud.cut,.hud.cut *{transition:none !important}
.hud .win,.hud .row,.hud .count{transition:background-color .28s,color .28s}
/* o widget vestido com o outro lado: as variáveis do tema, só nele */
html[data-side="a"] .hud.flip{
  --bg: oklch(19% .06 290); --bg-2: oklch(24% .09 300); --ink: oklch(96% .02 320);
  --paper: oklch(27% .08 295); --accent: oklch(72% .25 350); --glow: oklch(66% .27 350 / .55);
  color:var(--ink);
}
html[data-side="b"] .hud.flip{
  --bg: oklch(93% .045 62); --bg-2: oklch(89% .07 52); --ink: oklch(25% .05 30);
  --paper: oklch(98% .015 85); --accent: oklch(64% .21 30); --glow: transparent;
  color:var(--ink);
}
.hv-tun{position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit;overflow:hidden}
.hv-tun i{position:absolute;left:-30%;width:160%;border-radius:2vh;filter:blur(1px);box-shadow:0 0 40px currentColor;transform:translateX(-110%) skewX(-24deg);opacity:.95}
.hv-tun i{height:10%;box-shadow:0 0 12px currentColor}
.hv-tun.go i{animation:lights .9s cubic-bezier(.6,0,.2,1) forwards;animation-delay:calc(var(--k)*45ms)}
@keyframes lights{0%{transform:translateX(-110%) skewX(-24deg)}50%{transform:translateX(0) skewX(-24deg)}100%{transform:translateX(110%) skewX(-24deg)}}
@media (prefers-reduced-motion:reduce){.hv-tun{display:none}}

/* ===== neon.css ===== */
/* CODR Studio — Opção 6b: o título do hero é um letreiro de neon com defeito.
   Hover: pisca, engasga com chiado e acende (cor + brilho atrás). Saída: falha de novo e apaga.
   Só cor/brilho/opacidade mudam — a largura da fonte nunca. ~600ms. */
.hero h1 .w{position:relative;--neon:oklch(70% .24 32);--halo:oklch(70% .24 32 / .55)}
html[data-side="b"] .hero h1 .w{--neon:oklch(78% .2 350);--halo:oklch(72% .27 350 / .6)}
.hero h1 .w::after{content:"";position:absolute;inset:-.06em -.04em;pointer-events:none;opacity:0;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask:linear-gradient(#000 0 0);}
.hero h1.lit .w{color:var(--neon);text-shadow:0 0 .04em #fff8,0 0 .18em var(--halo),0 0 .5em var(--halo)}
.hero h1.lit .w,.hero h1.unlit .w{animation:var(--anim) .6s steps(1,end) both}
.hero h1.lit .w::after,.hero h1.unlit .w::after{animation:chiado .6s steps(1,end) both, grao .08s steps(2) infinite}
.hero h1.lit .w{--anim:neon-on}.hero h1.unlit .w{--anim:neon-off}
@keyframes neon-on{
  0%{opacity:1}8%{opacity:.25;color:var(--neon)}14%{opacity:1;color:inherit}22%{opacity:.4;color:var(--neon);text-shadow:0 0 .3em var(--halo)}
  30%{opacity:1;color:inherit;text-shadow:none}44%{opacity:.6;color:var(--neon)}52%{opacity:.15}60%{opacity:1;color:var(--neon);text-shadow:0 0 .18em var(--halo)}
  72%{opacity:.7}80%,100%{opacity:1;color:var(--neon);text-shadow:0 0 .04em #fff8,0 0 .18em var(--halo),0 0 .5em var(--halo)}}
@keyframes neon-off{
  0%{opacity:1;color:var(--neon);text-shadow:0 0 .18em var(--halo),0 0 .5em var(--halo)}12%{opacity:.3}20%{opacity:1;color:var(--neon);text-shadow:0 0 .3em var(--halo)}
  34%{opacity:.5;color:inherit;text-shadow:none}46%{opacity:1;color:var(--neon);text-shadow:0 0 .18em var(--halo)}58%{opacity:.2}70%{opacity:1;color:inherit;text-shadow:none}100%{opacity:1}}
@keyframes chiado{0%{opacity:.5}20%{opacity:.2}35%{opacity:.45}55%{opacity:.3}70%{opacity:.15}85%,100%{opacity:0}}
@keyframes grao{0%{background-position:0 0}50%{background-position:-53px 31px}}
@media (prefers-reduced-motion:reduce){.hero h1.lit .w,.hero h1.unlit .w,.hero h1 .w::after{animation:none}}

/* o rabisco do Dia vira bilhete colado na cena: tira de papel/fita translúcida, torta, sombra curta. A Noite fica como está. */
html[data-side="a"] .hero h1 .hand{
  padding:.12em .55em .18em;color:oklch(52% .2 28);text-shadow:none;rotate:-5deg;
  background:linear-gradient(180deg,oklch(97% .025 85 / .86),oklch(93% .035 80 / .82));
  box-shadow:0 1px 1px oklch(30% .03 50 / .18),0 3px 6px -2px oklch(30% .04 50 / .3);
  clip-path:polygon(1.5% 6%,99% 0,97.5% 50%,100% 96%,2% 100%,0 48%);
}

/* ===== merch.css ===== */
/* Como trabalhamos = merchandising de 1985. Cada header é uma embalagem com linguagem própria:
   a foto dá o objeto, o HTML dá a tipografia (nítida e traduzível). Liga com o .rv do card e respira. */
.step .merch{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/3;margin:12px 12px 0;border-radius:10px;
  box-shadow:inset 0 0 0 1px oklch(0% 0 0 / .25),0 2px 0 oklch(0% 0 0 / .08);container-type:inline-size}
.merch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.merch::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;mix-blend-mode:overlay;opacity:.3;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.merch>span,.merch>b{position:absolute;z-index:2;line-height:1}
.merch .no{right:8px;bottom:7px;font:400 26px/1 var(--f-crt);color:#fff;text-shadow:0 1px 3px #000a;z-index:4}
.merch .mf{font-size:max(10px,3.6cqi)}

/* 1 · dossiê de detetive */
.m-ent img{object-position:30% 50%}
.m-ent .mk{left:7%;top:12%;font:400 max(9px,3.4cqi)/1 "Special Elite",monospace;letter-spacing:.14em;color:oklch(88% .1 90)}
.m-ent .mh{left:7%;top:20%;font:400 max(17px,8.6cqi)/1.02 "Special Elite",monospace;color:oklch(95% .05 90);text-shadow:2px 2px 0 oklch(25% .08 20)}
.m-ent .ms{right:6%;top:9%;font:400 max(11px,5.4cqi)/1 "Special Elite",monospace;letter-spacing:.08em;color:oklch(52% .2 27);
  border:3px double currentColor;padding:.25em .45em;transform:rotate(9deg);background:oklch(96% .02 90 / .85);animation:carimbo 7s ease-in-out var(--d) infinite}
.m-ent .mf{left:7%;bottom:9%;font-family:"Special Elite",monospace;color:oklch(92% .04 90);background:oklch(20% .03 30 / .7);padding:.3em .5em}

/* 2 · kit de montar */
.m-con img{object-position:50% 62%;transform:scale(1.32);transform-origin:50% 70%}
.m-con .mk{left:6%;top:6%;font:400 max(9px,3.4cqi)/1 Bungee,sans-serif;color:#fff;background:oklch(55% .17 255);padding:.3em .5em}
.m-con .mh{left:6%;top:15%;font:400 max(19px,9.4cqi)/.95 Bungee,sans-serif;color:oklch(58% .22 28);text-shadow:3px 3px 0 oklch(50% .17 255)}
.m-con .ms{right:5%;top:5%;width:24cqi;aspect-ratio:1;display:grid;place-items:center;text-align:center;font:400 max(8px,3.1cqi)/1.05 Bungee,sans-serif;
  color:oklch(25% .05 255);background:#fff;clip-path:polygon(50% 0,61% 13%,78% 7%,80% 24%,96% 30%,88% 45%,98% 60%,83% 68%,84% 86%,66% 85%,55% 99%,43% 87%,26% 94%,22% 77%,4% 72%,13% 56%,2% 40%,18% 31%,17% 13%,35% 13%);
  animation:selo 5s ease-in-out var(--d) infinite}
.m-con .mf{left:0;right:0;bottom:0;text-align:center;font-family:Bungee,sans-serif;color:#fff;background:oklch(25% .05 255 / .92);padding:.55em .4em;letter-spacing:.02em}

/* 3 · VHS de aeróbica */
.m-tre img{object-position:50% 70%}
.m-tre::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7%;z-index:2;background:linear-gradient(oklch(20% .02 300),oklch(12% .02 300))}
.m-tre .mk{left:3.5%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;
  font:400 max(8px,3cqi)/1 Bungee,sans-serif;color:oklch(85% .15 200);z-index:3}
.m-tre .mh{left:11%;right:3%;top:6%;font:400 max(16px,7.4cqi)/1.05 Monoton,sans-serif;color:#fff;text-transform:uppercase;
  text-shadow:0 0 6px oklch(75% .25 350),0 0 18px oklch(65% .28 350);animation:neonvhs 5s ease-in-out var(--d) infinite}
.m-tre .ms{left:11%;top:calc(8% + 2.6em);font:italic 800 max(11px,4.2cqi)/1 "Bricolage Grotesque",sans-serif;color:oklch(25% .08 320);background:oklch(88% .14 195);padding:.25em .5em;transform:skewX(-12deg)}
.m-tre .mf{right:4%;bottom:9%;font-family:"Permanent Marker",cursive;color:#fff;text-shadow:0 1px 4px #000c;transform:rotate(-4deg)}

/* 4 · ON AIR */
.m-air .mk{left:0;right:0;top:58%;text-align:center;font:400 max(10px,4cqi)/1 var(--f-crt);letter-spacing:.3em;color:oklch(80% .15 60)}
.m-air .mh{left:0;right:0;top:66%;text-align:center;font:800 max(12px,4.8cqi)/1 "Bricolage Grotesque",sans-serif;font-stretch:75%;text-transform:uppercase;letter-spacing:.25em;color:#fff}
.m-air .ms{left:0;right:0;top:73%;text-align:center;font:800 max(22px,11cqi)/1 "Bricolage Grotesque",sans-serif;font-stretch:75%;text-transform:uppercase;color:oklch(68% .22 28);
  text-shadow:0 0 14px oklch(60% .24 28 / .7)}
.m-air .mf{left:0;right:0;bottom:6%;text-align:center;color:oklch(85% .03 60);font-style:italic}
.m-air::before{content:"";position:absolute;left:34%;top:34%;width:32%;height:24%;z-index:1;pointer-events:none;
  background:radial-gradient(oklch(65% .25 28 / .6),transparent 70%);filter:blur(10px);animation:onair 3.2s ease-in-out infinite}

/* respirar: cada peça no seu gesto, de leve */
@keyframes carimbo{0%,88%,100%{transform:rotate(9deg) scale(1)}92%{transform:rotate(7deg) scale(1.06)}}
@keyframes selo{0%,100%{rotate:0deg}50%{rotate:8deg}}
@keyframes neonvhs{0%,46%,50%,54%,100%{opacity:1}48%{opacity:.55}52%{opacity:.75}}
@keyframes onair{0%,100%{opacity:.7}50%{opacity:1}}
.tune:hover .merch img{animation:sint-i .5s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.merch *,.merch::before{animation:none!important}}

/* ajustes de leitura */
.m-con::before{content:"";position:absolute;left:0;right:0;top:0;height:40%;z-index:1;background:oklch(90% .17 100)}
.m-con .mh{top:16%;font-size:max(18px,8.4cqi)}
.m-con .ms{width:27cqi;font-size:max(7px,2.7cqi)}
.m-con .mf{padding-right:15%}
.m-tre .mf{bottom:17%}
.m-ent::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,oklch(15% .04 20 / .75),transparent 60%)}
.m-tre .mh{font-size:max(15px,6.4cqi)}

/* o texto do hero só aparece com o idioma aplicado: nada de pulo de layout */
html:not(.i18n) .hero .in{visibility:hidden}
/* a fita da virada: lado A é sempre claro (Dia), lado B sempre escuro (Noite), seja qual for o tema da página */
.flipcas .face.a{--bg:oklch(93% .045 62);--bg-2:oklch(89% .07 52);--ink:oklch(25% .05 30);--paper:oklch(98% .015 85);
  --s1:oklch(70% .19 32);--s2:oklch(79% .16 65);--s3:oklch(88% .16 98);--s4:oklch(74% .11 230);--accent:oklch(64% .21 30);color:var(--ink)}
.flipcas .face.b{--bg:oklch(19% .06 290);--bg-2:oklch(24% .09 300);--ink:oklch(96% .02 320);--paper:oklch(27% .08 295);
  --s1:oklch(66% .27 350);--s2:oklch(82% .15 200);--s3:oklch(82% .16 75);--s4:oklch(60% .22 300);--accent:oklch(72% .25 350);color:var(--ink)}