/* Lab Filmes — sistema visual
   Conceito: ilha de edição. Branco de estúdio, faixas cinza-escuro de sala de cor, vermelho da marca como o ponto de gravação.
   Motivos: timeline com keyframes (◆), timecode, o ponto vermelho do logo. */
:root {
  --white: #FFFFFF;
  --paper: #EDEEEE;
  --paper2: #F6F6F5;
  --ink: #222222;
  --ink2: #171717;
  --ink3: #2E2E2E;
  --red: #EF3742;
  --red-ink: #C8202C;
  --red-soft: #FDE3E5;
  --muted: #656565;
  --muted-d: #A9A9A9;
  --line: #D9D9D9;
  --line-d: #3A3A3A;
  --f-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ink2); }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
img, video, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--red); color: #fff; }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.band { padding-block: clamp(72px, 10vw, 140px); position: relative; }
.dark { background: var(--ink); color: var(--white); }
.paper { background: var(--paper2); }

.kicker { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink); display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.kicker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; }
.dark .kicker { color: var(--red); }
.h2 { font-family: var(--f-display); font-weight: 850; font-stretch: 112%; font-size: clamp(2.2rem, 5.6vw, 4.4rem); line-height: .95; letter-spacing: -.03em; text-wrap: balance; margin-top: 16px; text-transform: uppercase; }
.h2 em { font-style: normal; color: var(--red); }
.lead { font-size: clamp(1.06rem, 1.5vw, 1.24rem); color: var(--muted); max-width: 58ch; margin-top: 20px; }
.dark .lead { color: var(--muted-d); }
.lead b { color: var(--ink); font-weight: 600; }
.dark .lead b { color: var(--white); }

/* reveal: só transform, conteúdo sempre visível */
.rv { transition: transform 1s cubic-bezier(.16,1,.3,1); }
.rv.pre { transform: translateY(40px); }
.rv.d1 { transition-delay: .07s; } .rv.d2 { transition-delay: .14s; } .rv.d3 { transition-delay: .21s; }

/* botões */
.btn { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; cursor: pointer; border: 0; font-family: var(--f-display); font-weight: 750; font-stretch: 105%; font-size: 1rem; letter-spacing: .01em; text-transform: uppercase; padding: 16px 24px; border-radius: 999px; background: var(--red); color: #fff; position: relative; overflow: hidden; isolation: isolate; transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--ink); border-radius: inherit; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.16,1,.3,1); z-index: -1; }
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: scale(.97); }
.btn .ar { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.btn:hover .ar { transform: translateX(5px); }
.dark .btn::before, .btn.inv::before { background: var(--white); }
.dark .btn:hover, .btn.inv:hover { color: var(--ink); }
.btn.line { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn.line::before { background: var(--red); }
.btn.line:hover { color: #fff; box-shadow: inset 0 0 0 2px var(--red); }
.btn.white { background: var(--white); color: var(--ink); }
.btn.white::before { background: var(--red); }
.btn.white:hover { color: #fff; }
.btn.sm { padding: 11px 18px; font-size: .86rem; }
.play-dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.play-dot::after { content: ""; border-left: 8px solid var(--red); border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }

/* header */
.top { position: fixed; z-index: 50; top: env(safe-area-inset-top, 0px); left: 0; right: 0; transition: background .3s, transform .4s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }
.top.solid { background: rgba(23,23,23,.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.top.hide { transform: translateY(-110%); }
.top.light-page:not(.solid) .nav a { color: var(--ink); }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 26px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: rgba(255,255,255,.82); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 9px 13px; border-radius: 999px; transition: color .2s, background .2s; }
.nav a:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav a.ext::after { content: " ↗"; color: var(--red); }
.nav a.cur { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--red); cursor: pointer; position: relative; }
.burger i { position: absolute; left: 14px; right: 14px; height: 2px; background: #fff; transition: transform .3s, top .3s; }
.burger i:nth-child(1) { top: 18px; } .burger i:nth-child(2) { top: 26px; }
.menu-open .burger i:nth-child(1) { top: 22px; transform: rotate(45deg); } .menu-open .burger i:nth-child(2) { top: 22px; transform: rotate(-45deg); }
.mnav { position: fixed; inset: 0; z-index: 45; background: var(--ink2); color: #fff; display: grid; align-content: center; gap: 6px; padding: 100px max(24px, env(safe-area-inset-left, 0px)) 40px; transform: translateY(-100%); transition: transform .55s cubic-bezier(.16,1,.3,1); }
.menu-open .mnav { transform: none; }
.mnav a { font-family: var(--f-display); font-weight: 850; font-stretch: 115%; text-transform: uppercase; font-size: clamp(2rem, 10vw, 3.2rem); text-decoration: none; line-height: 1.1; letter-spacing: -.02em; }
.mnav a:hover { color: var(--red); }
.mnav .small { font-family: var(--f-mono); font-size: 13px; color: var(--muted-d); margin-top: 24px; }

/* HUD de timecode (canto) */
.tc-hud { position: fixed; z-index: 40; left: max(20px, env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; padding: 8px 12px; border-radius: 999px; background: rgba(23,23,23,.9); color: #fff; font-variant-numeric: tabular-nums; transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s; backdrop-filter: blur(8px); }
.tc-hud.hide { transform: translateY(160%); opacity: 0; }
.tc-hud .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.1s steps(1) infinite; }
.tc-hud .sec { color: var(--red); text-transform: uppercase; }
@keyframes blink { 50% { opacity: 0; } }
.progress { position: fixed; z-index: 55; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }

/* cursor-label (cards de vídeo) */
.cur-label { position: fixed; z-index: 70; left: 0; top: 0; pointer-events: none; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; text-align: center; font-family: var(--f-display); font-weight: 800; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.cur-label.on { transform: scale(1); }

/* HERO */
.hero { position: relative; min-height: min(92vh, 900px); background: var(--ink2); color: #fff; overflow: hidden; display: grid; align-items: end; isolation: isolate; }
.hero video.bg, .hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,23,23,.55) 0%, rgba(23,23,23,.2) 35%, rgba(23,23,23,.85) 80%, var(--ink2) 100%); }
.hero .wrap { padding-top: 140px; padding-bottom: 36px; }
.hero .sig { font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); display: inline-flex; gap: 10px; align-items: center; }
.hero .sig::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: blink 1.1s steps(1) infinite; }
.h1 { font-family: var(--f-display); font-weight: 900; font-stretch: 118%; text-transform: uppercase; font-size: clamp(2.8rem, 10vw, 9.4rem); line-height: .86; letter-spacing: -.035em; margin-top: 18px; }
.h1 .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.h1 .ln > span { display: inline-block; animation: rise 1.1s cubic-bezier(.16,1,.3,1) both; }
.h1 .ln:nth-child(2) > span { animation-delay: .12s; }
.h1 .red { color: var(--red); }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin-top: 28px; }
.hero-row p { max-width: 46ch; font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: rgba(255,255,255,.82); }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* timeline do reel */
.tl { margin-top: 40px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; font-family: var(--f-mono); font-size: 12px; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.tl-track { position: relative; height: 34px; cursor: pointer; }
.tl-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(255,255,255,.22); }
.tl-fill { position: absolute; left: 0; top: 50%; height: 2px; background: var(--red); width: 0; }
.tl-head { position: absolute; top: 4px; bottom: 4px; width: 2px; background: var(--red); left: 0; }
.tl-head::before { content: ""; position: absolute; top: -6px; left: -6px; width: 14px; height: 10px; background: var(--red); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tl-kf { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--ink2); border: 1.5px solid rgba(255,255,255,.7); transform: rotate(45deg); transition: background .2s, border-color .2s, transform .2s; }
.tl-kf.past { background: var(--red); border-color: var(--red); }
.tl-track:hover .tl-kf { transform: rotate(45deg) scale(1.25); }

/* modal do reel */
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(10,10,10,.94); display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); opacity: 0; pointer-events: none; transition: opacity .35s; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal video { width: min(100%, 1200px); max-height: 82vh; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; transform: scale(.94); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.modal.open video { transform: none; }
.modal .x { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--red); color: #fff; font-size: 22px; cursor: pointer; }

/* marquee de clientes */
.clients { background: var(--ink2); color: #fff; padding-block: 26px 30px; overflow: hidden; border-top: 1px solid var(--line-d); }
.clients .cap { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d); margin-bottom: 16px; }
.track { display: flex; width: max-content; will-change: transform; }
.track span { font-family: var(--f-display); font-weight: 850; font-stretch: 118%; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.8rem); letter-spacing: -.02em; white-space: nowrap; padding-right: 48px; display: inline-flex; align-items: center; gap: 48px; }
.track span::after { content: ""; width: 12px; height: 12px; background: var(--red); transform: rotate(45deg); }
.track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.7); }

/* números */
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); margin-top: 56px; }
.num { padding: 26px 20px 4px 0; border-right: 1px solid var(--line); }
.num:last-child { border-right: 0; }
.num + .num { padding-left: 20px; }
.num b { display: block; font-family: var(--f-display); font-weight: 900; font-stretch: 112%; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.num b sup { color: var(--red); font-size: .5em; vertical-align: .7em; margin-left: 2px; }
.num span { display: block; color: var(--muted); margin-top: 10px; font-size: .97rem; }

/* craft (palavra a palavra) */
.craft { font-family: var(--f-display); font-weight: 800; font-stretch: 108%; font-size: clamp(2rem, 5.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.03em; max-width: 20ch; }
.craft .w { color: #D2D2D2; transition: color .35s; }
.craft .w.on { color: var(--ink); }
.craft-ans { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: clamp(4rem, 15vw, 13rem); line-height: .82; letter-spacing: -.05em; color: var(--red); text-transform: uppercase; margin-top: 28px; display: block; }
.craft-ans .dot { width: .16em; height: .16em; border-radius: 50%; background: var(--ink); display: inline-block; margin-left: .06em; }

/* serviços */
.svc { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sv { position: relative; background: var(--ink); color: #fff; border-radius: 22px; padding: 22px; min-height: 420px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; transition: transform .5s cubic-bezier(.16,1,.3,1), background .3s; }
.sv:hover { transform: translateY(-8px); background: var(--red); }
.sv .no { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--muted-d); display: flex; justify-content: space-between; }
.sv:hover .no { color: rgba(255,255,255,.85); }
.sv h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 118%; text-transform: uppercase; font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: .95; letter-spacing: -.02em; }
.sv p { color: rgba(255,255,255,.75); margin-top: 10px; font-size: .97rem; }
.sv:hover p { color: rgba(255,255,255,.92); }
.sv .art { display: grid; place-items: center; min-height: 170px; }
/* mini animações */
.a-film { width: 120px; height: 86px; position: relative; }
.a-film .b { position: absolute; left: 0; right: 0; height: 18px; background: repeating-linear-gradient(-58deg, #fff 0 12px, transparent 12px 24px); border: 2px solid #fff; border-radius: 4px 4px 0 0; }
.a-film .b.t { top: 0; transform-origin: 0 100%; animation: clap 2.4s cubic-bezier(.6,0,.4,1) infinite; }
.a-film .b.m { top: 20px; border-radius: 0; }
.a-film .body { position: absolute; top: 40px; left: 0; right: 0; bottom: 0; border: 2px solid #fff; border-top: 0; border-radius: 0 0 6px 6px; }
@keyframes clap { 0%, 55% { transform: rotate(-24deg); } 62% { transform: rotate(0); } 100% { transform: rotate(0); } }
.a-2d { width: 140px; height: 110px; position: relative; }
.a-2d i { position: absolute; display: block; background: #fff; }
.a-2d i:nth-child(1) { width: 44px; height: 44px; border-radius: 50%; left: 6px; top: 30px; animation: sq 2.6s ease-in-out infinite; }
.a-2d i:nth-child(2) { width: 40px; height: 40px; left: 52px; top: 32px; animation: sq 2.6s .2s ease-in-out infinite; background: var(--red); }
.sv:hover .a-2d i:nth-child(2) { background: var(--ink); }
.a-2d i:nth-child(3) { width: 0; height: 0; background: none; border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 42px solid #fff; left: 92px; top: 30px; animation: sq 2.6s .4s ease-in-out infinite; }
@keyframes sq { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-34px) scale(.9, 1.1); } 50% { transform: translateY(0) scale(1.2, .8); } 65% { transform: translateY(0) scale(1, 1); } }
.a-3d { width: 90px; height: 90px; perspective: 400px; }
.a-3d .cube { width: 90px; height: 90px; position: relative; transform-style: preserve-3d; animation: spin3 7s linear infinite; }
.a-3d .f { position: absolute; inset: 0; border: 2px solid #fff; background: rgba(255,255,255,.06); }
.a-3d .f1 { transform: translateZ(45px); } .a-3d .f2 { transform: rotateY(180deg) translateZ(45px); }
.a-3d .f3 { transform: rotateY(90deg) translateZ(45px); } .a-3d .f4 { transform: rotateY(-90deg) translateZ(45px); }
.a-3d .f5 { transform: rotateX(90deg) translateZ(45px); background: rgba(239,55,66,.55); } .a-3d .f6 { transform: rotateX(-90deg) translateZ(45px); }
@keyframes spin3 { from { transform: rotateX(-22deg) rotateY(0); } to { transform: rotateX(-22deg) rotateY(360deg); } }
.a-ia { display: grid; grid-template-columns: repeat(10, 10px); gap: 4px; }
.a-ia i { width: 10px; height: 10px; border-radius: 2px; background: rgba(255,255,255,.12); animation: noise 4.2s steps(1) infinite; }
.a-ia i.on { animation-name: born; }
@keyframes noise { 0% { background: rgba(255,255,255,.12); } 8% { background: rgba(255,255,255,.55); } 16% { background: rgba(239,55,66,.8); } 24%, 100% { background: rgba(255,255,255,.12); } }
@keyframes born { 0% { background: rgba(255,255,255,.12); } 8% { background: rgba(239,55,66,.9); } 16% { background: rgba(255,255,255,.5); } 30%, 85% { background: #fff; } 92%, 100% { background: rgba(255,255,255,.12); } }
.sv:hover .a-ia i { animation-duration: 2.4s; }
.sv:hover .a-ia i:not(.on) { background: rgba(255,255,255,.12); animation-name: noise2; }
@keyframes noise2 { 0%, 100% { background: rgba(255,255,255,.14); } 12% { background: rgba(34,34,34,.7); } 24% { background: rgba(255,255,255,.14); } }
.sv-link { display: inline-block; margin-top: 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; }
.sv-link:hover { border-color: #fff; }
.sv p b { color: #fff; }

/* trabalhos em destaque (placeholders) */
.works-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.bento { margin-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.wk { position: relative; grid-column: span 4; text-decoration: none; color: #fff; border-radius: 20px; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 11; display: grid; cursor: none; isolation: isolate; }
.wk.big { grid-column: span 8; aspect-ratio: auto; min-height: 420px; }
.wk.tall { grid-row: span 2; aspect-ratio: auto; }
.wk .ph { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(120% 90% at var(--gx, 80%) var(--gy, 10%), rgba(239,55,66,.55), transparent 55%),
  repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px), var(--ink); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.wk:hover .ph { transform: scale(1.06); }
.wk video, .wk img.thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.wk .ph-tag { position: absolute; top: 16px; right: 16px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); border: 1px dashed rgba(255,255,255,.35); padding: 5px 9px; border-radius: 6px; }
.wk .in { align-self: end; padding: 20px; display: grid; gap: 6px; }
.wk .cl { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.wk h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: .95; letter-spacing: -.02em; }
.wk.big h3 { font-size: clamp(2rem, 4.4vw, 3.8rem); }
.wk .bar { height: 3px; background: var(--red); width: 0; transition: width .6s cubic-bezier(.16,1,.3,1); margin-top: 8px; }
.wk:hover .bar { width: 100%; }
@media (hover: none) { .wk { cursor: pointer; } }

/* índice do repertório */
.index { margin-top: 64px; border-top: 2px solid var(--ink); }
.index-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; flex-wrap: wrap; }
.index-head b { font-family: var(--f-display); font-weight: 850; font-stretch: 112%; text-transform: uppercase; font-size: 1.3rem; letter-spacing: -.01em; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1.5px solid var(--ink); background: transparent; border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .2s, color .2s; }
.chip[aria-pressed="true"], .chip:hover { background: var(--ink); color: #fff; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { border-top: 1px solid var(--line); }
.row a { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto 40px; gap: 20px; align-items: center; padding: 16px 0; text-decoration: none; position: relative; transition: padding .35s cubic-bezier(.16,1,.3,1), color .2s; }
.row a::before { content: ""; position: absolute; inset: 0 -12px; background: var(--red); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.16,1,.3,1); z-index: -1; border-radius: 10px; }
.row a:hover { color: #fff; padding-left: 14px; }
.row a:hover::before { transform: scaleY(1); }
.rows { position: relative; z-index: 0; isolation: isolate; }
.row .c { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.row a:hover .c { color: rgba(255,255,255,.85); }
.row .t { font-family: var(--f-display); font-weight: 750; font-stretch: 105%; font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -.01em; }
.row .go { justify-self: end; font-size: 1.3rem; transition: transform .3s; }
.row a:hover .go { transform: translateX(-6px) rotate(-45deg); }
.row[hidden] { display: none; }
.tgs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tg { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 9px; color: var(--muted); white-space: nowrap; transition: border-color .2s, color .2s; }
.row a:hover .tg { border-color: rgba(255,255,255,.6); color: #fff; }
.row.empty .t { color: var(--muted); }
.more { margin-top: 18px; }

/* frentes (tabs) */
.tabs { margin-top: 44px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }
.tablist { display: grid; gap: 6px; }
.tab { text-align: left; border: 0; background: transparent; cursor: pointer; padding: 16px 0; border-bottom: 1px solid var(--line-d); font-family: var(--f-display); font-weight: 850; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.02em; color: #6E6E6E; display: flex; align-items: center; justify-content: space-between; transition: color .2s; }
.tab::after { content: "◆"; font-size: .6em; color: transparent; transition: color .2s, transform .3s; }
.tab[aria-selected="true"] { color: #fff; }
.tab[aria-selected="true"]::after { color: var(--red); transform: rotate(90deg); }
.tab:hover { color: #fff; }
.panel { background: var(--ink3); border-radius: 22px; padding: clamp(24px, 3vw, 40px); min-height: 300px; display: grid; gap: 18px; align-content: start; }
.panel[hidden] { display: none; }
.panel .big { font-family: var(--f-display); font-weight: 800; font-stretch: 105%; font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.08; letter-spacing: -.02em; }
.panel .big em { font-style: normal; color: var(--red); }
.panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.panel li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--muted-d); }
.panel li::before { content: ""; width: 9px; height: 9px; background: var(--red); transform: rotate(45deg); margin-top: 8px; }
.panel.in { animation: pin .5s cubic-bezier(.16,1,.3,1); }
@keyframes pin { from { transform: translateY(14px); } to { transform: none; } }

/* átomos teaser */
.atom-band { background: var(--red); color: #fff; overflow: hidden; }
.atom-band .kicker { color: #fff; } .atom-band .kicker::before { background: #fff; }
.atom-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.atom-band .lead { color: rgba(255,255,255,.9); }
.atom-band .lead b { color: #fff; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pills span { border: 1.5px solid rgba(255,255,255,.7); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: .95rem; }
.atom-art { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; }
.atom-art .orb { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; transform: rotate(var(--r)) scaleY(.36); }
.atom-art .orb::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #fff; left: 50%; top: -11px; margin-left: -11px; }
.atom-art .spin { position: absolute; inset: 0; animation: rot 14s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.atom-art .core { position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; margin: -15% 0 0 -15%; border-radius: 50%; background: var(--ink); display: grid; place-items: center; font-family: var(--f-display); font-weight: 900; font-stretch: 120%; color: #fff; font-size: clamp(1.2rem, 3vw, 2rem); letter-spacing: -.02em; box-shadow: 0 0 0 10px rgba(34,34,34,.15); }
.atom-art .e { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px rgba(255,255,255,.8); }

/* ponte IA */
.ia { background: #1C1530; color: #F4F0FF; border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 32px; align-items: center; padding: clamp(28px, 4vw, 56px); position: relative; isolation: isolate; }
.ia::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(138,77,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(138,77,255,.18) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 80% 40%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 80% 40%, #000, transparent 70%); }
.ia .kicker { color: #C9F23A; } .ia .kicker::before { background: #27D4F5; }
.ia .h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
.ia .h2 em { color: #27D4F5; }
.ia p { color: #BDB4DC; margin-top: 16px; max-width: 52ch; }
.ia .btn { background: #27D4F5; color: #1B1433; margin-top: 26px; }
.ia .btn::before { background: #fff; }
.ia img { width: 100%; max-width: 380px; height: auto; justify-self: center; animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* processo */
.steps { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--line); }
.steps .fill { position: absolute; left: 0; top: 13px; height: 2px; background: var(--red); width: var(--p, 0%); transition: width .2s linear; }
.step { padding-right: 32px; position: relative; }
.step .kf { width: 18px; height: 18px; transform: rotate(45deg); background: var(--white); border: 2px solid var(--ink); margin: 4px 0 26px 4px; position: relative; z-index: 1; transition: background .3s, border-color .3s; }
.step.on .kf { background: var(--red); border-color: var(--red); }
.step .n { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.step h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: .98; letter-spacing: -.02em; margin-top: 8px; }
.step p { color: var(--muted); margin-top: 10px; max-width: 34ch; }

/* sobre */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.about-media { border-radius: 22px; overflow: hidden; background: #000; position: relative; }
.about-media video { width: 100%; aspect-ratio: 2412 / 400; object-fit: cover; }
.about-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-d); border-top: 1px solid var(--line-d); }
.about-facts div { background: var(--ink); padding: 18px; }
.about-facts b { font-family: var(--f-display); font-weight: 900; font-stretch: 112%; font-size: 2rem; display: block; line-height: 1; letter-spacing: -.03em; }
.about-facts span { font-size: .92rem; color: var(--muted-d); }
.quote { font-family: var(--f-display); font-weight: 750; font-stretch: 100%; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.2; letter-spacing: -.015em; margin-top: 24px; border-left: 4px solid var(--red); padding-left: 18px; }

/* CTA final */
.final { text-align: center; overflow: hidden; }
.final .giant { font-family: var(--f-display); font-weight: 900; font-stretch: 122%; text-transform: uppercase; font-size: clamp(2.8rem, 11vw, 10rem); line-height: .84; letter-spacing: -.045em; }
.final .giant .red { color: var(--red); }
.final .lead { margin-inline: auto; }
.final .row-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.contacts { margin-top: 40px; display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; font-family: var(--f-mono); font-size: 14px; }
.contacts a { color: inherit; text-decoration: none; border-bottom: 1.5px solid var(--red); padding-bottom: 2px; }
.contacts a:hover { color: var(--red); }
.copy { cursor: pointer; border: 1.5px solid currentColor; background: transparent; border-radius: 999px; padding: 4px 12px; font-family: var(--f-mono); font-size: 12px; margin-left: 6px; }
.copy:hover, .copy.done { background: var(--red); border-color: var(--red); color: #fff; }

/* rodapé */
footer { background: var(--ink2); color: #fff; padding-block: 56px 40px; }
.foot { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot img { height: 26px; width: auto; }
.foot p { color: var(--muted-d); font-size: .94rem; margin-top: 14px; max-width: 36ch; }
.foot h4 { margin: 0 0 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { color: #fff; text-decoration: none; opacity: .85; }
.foot a:hover { opacity: 1; color: var(--red); }
.foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--line-d); padding-top: 20px; margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; color: var(--muted-d); }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, calc(100% + 60px)); visibility: hidden; z-index: 95; background: var(--red); color: #fff; border-radius: 999px; padding: 11px 20px; font-weight: 700; transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
.toast.show { transform: translate(-50%, 0); visibility: visible; }

/* ===== Página interna: cabeçalho ===== */
.page-hero { background: var(--ink2); color: #fff; padding-top: calc(140px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(56px, 8vw, 100px); position: relative; overflow: hidden; }
.crumbs { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--muted-d); display: flex; gap: 10px; flex-wrap: wrap; }
.crumbs a { color: #fff; text-decoration: none; } .crumbs a:hover { color: var(--red); }

/* ===== Átomos ===== */
.at-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; margin-top: 28px; }
.at-hero .h1 { font-size: clamp(2.3rem, 5.4vw, 5.4rem); font-stretch: 108%; }
.at-hero .atom-art .orb { border-color: rgba(255,255,255,.5); }
.at-hero .atom-art .core { background: var(--red); }
.coin { display: inline-flex; align-items: center; gap: 8px; }
.coin::before { content: ""; width: .9em; height: .9em; border-radius: 50%; background: var(--red); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); }
.how { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: h; }
.how li { list-style: none; counter-increment: h; background: var(--white); border: 1.5px solid var(--line); border-radius: 20px; padding: 22px; display: grid; gap: 10px; align-content: start; transition: border-color .2s, transform .4s cubic-bezier(.16,1,.3,1); }
.how li:hover { border-color: var(--red); transform: translateY(-6px); }
.how li::before { content: counter(h, decimal-leading-zero); font-family: var(--f-display); font-weight: 900; font-stretch: 118%; font-size: 2.6rem; line-height: 1; color: var(--red); letter-spacing: -.04em; }
.how b { font-family: var(--f-display); font-weight: 800; font-stretch: 105%; font-size: 1.2rem; letter-spacing: -.01em; }
.how span { color: var(--muted); font-size: .97rem; }
.how { padding: 0; }
.gain { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-d); border-radius: 22px; overflow: hidden; }
.gain div { background: var(--ink); padding: clamp(22px, 3vw, 34px); display: grid; gap: 8px; }
.gain b { font-family: var(--f-display); font-weight: 850; font-stretch: 110%; text-transform: uppercase; font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -.02em; line-height: 1; }
.gain b::before { content: "◆ "; color: var(--red); font-size: .7em; vertical-align: .15em; }
.gain span { color: var(--muted-d); }
.sim { background: var(--white); color: var(--ink); border-radius: 22px; padding: 22px; border: 1.5px solid var(--line); }
.sim-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sim h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 110%; text-transform: uppercase; font-size: 1.2rem; letter-spacing: -.01em; }
.ab { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--paper); }
.ab button { border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--muted); transition: background .25s, color .25s; }
.ab button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.chart { margin-top: 24px; position: relative; height: 220px; border-bottom: 2px solid var(--ink); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end; }
.chart .gridl { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to top, transparent 0 54px, var(--line) 54px 55px); }
.chart .bar { position: relative; height: var(--v); border-radius: 8px 8px 2px 2px; background: var(--ink); transition: height .7s cubic-bezier(.3,1.4,.5,1), background .3s; }
.chart.flat .bar { background: var(--red); }
.chart .avg { position: absolute; left: 0; right: 0; bottom: var(--avg); border-top: 2px dashed var(--red-ink); transition: bottom .7s; }
.chart .avg span { position: absolute; right: 0; top: -22px; font-family: var(--f-mono); font-size: 11px; color: var(--red-ink); letter-spacing: .06em; }
.months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding-top: 8px; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.sim-say { margin-top: 16px; min-height: 3em; }
.sim-say b { font-family: var(--f-display); font-weight: 800; color: var(--red-ink); }
.note { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cat { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ct { border-radius: 20px; padding: 22px; background: var(--paper2); border: 1.5px solid transparent; display: grid; gap: 8px; align-content: start; transition: border-color .2s, background .2s, transform .4s cubic-bezier(.16,1,.3,1); }
.ct:hover { border-color: var(--ink); background: var(--white); transform: translateY(-4px); }
.ct .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.ct .ic svg { width: 24px; height: 24px; }
.ct:hover .ic { background: var(--red); }
.ct b { font-family: var(--f-display); font-weight: 850; font-stretch: 108%; font-size: 1.25rem; letter-spacing: -.01em; }
.ct span { color: var(--muted); font-size: .96rem; }
.ct.ia-ct .ic { background: #1C1530; } .ct.ia-ct:hover .ic { background: #5723BC; }
.plans { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.plan { border-radius: 24px; padding: clamp(24px, 3vw, 34px); border: 2px solid var(--ink); display: grid; gap: 14px; align-content: start; position: relative; }
.plan.hero-plan { background: var(--ink); color: #fff; border-color: var(--ink); }
.plan .lbl { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.plan.hero-plan .lbl { color: var(--muted-d); }
.plan h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 118%; text-transform: uppercase; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; line-height: .9; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
.plan li::before { content: "✓"; font-weight: 800; color: var(--red); }
.plan .badge { position: absolute; top: -14px; right: 22px; background: var(--red); color: #fff; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; padding: 6px 12px; border-radius: 999px; transform: rotate(3deg); }
.out { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: .95rem; }
.out span { border: 1.5px dashed var(--line); border-radius: 999px; padding: 5px 12px; }
.faq { margin-top: 40px; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; gap: 20px; align-items: center; font-family: var(--f-display); font-weight: 800; font-stretch: 105%; font-size: clamp(1.1rem, 1.8vw, 1.4rem); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-size: 1.4rem; transition: transform .3s, background .2s, color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--red); color: #fff; }
.faq details p { color: var(--muted); padding: 0 0 22px; max-width: 70ch; }
.join { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; margin-top: 44px; }
.join .box { border-radius: 24px; padding: clamp(24px, 3vw, 34px); display: grid; gap: 14px; align-content: start; }
.join .box.main { background: var(--red); color: #fff; }
.join .box.alt { background: var(--ink3); color: #fff; }
.join h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.02em; line-height: .95; }
.join p { opacity: .88; }
.mailbox { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mailbox code { font-family: var(--f-mono); font-size: 1rem; background: rgba(0,0,0,.14); border: 1.5px dashed rgba(255,255,255,.6); border-radius: 10px; padding: 9px 12px; user-select: all; word-break: break-all; }
.mailbox .copy { color: #fff; }
.join .box.main .btn { background: #fff; color: var(--ink); }
.join .box.main .btn::before { background: var(--ink); }
.join .box.main .btn:hover { color: #fff; }

/* Extrato (saldo que acumula) */
.legend { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.legend li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.lg-in { background: var(--ink); } .lg-out { background: transparent; border: 2px dashed var(--red); } .lg-bal { background: var(--red); }
.ledger { background: var(--white); border-radius: 24px; border: 1.5px solid var(--line); padding: 22px; box-shadow: 0 30px 60px -40px rgba(0,0,0,.35); }
.lg-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lg-title { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lg-months { display: flex; gap: 4px; background: var(--paper); border-radius: 999px; padding: 4px; }
.lg-months button { border: 0; background: transparent; border-radius: 999px; padding: 6px 10px; font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; cursor: pointer; color: var(--muted); transition: background .2s, color .2s; }
.lg-months button[aria-selected="true"] { background: var(--red); color: #fff; }
.lg-bal-big { display: flex; align-items: baseline; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.lg-bal-big b { font-family: var(--f-display); font-weight: 900; font-stretch: 118%; font-size: clamp(3rem, 7vw, 4.6rem); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lg-bal-big span:last-child { color: var(--muted); font-weight: 600; }
.coin-big { width: 30px; height: 30px; border-radius: 50%; background: var(--red); box-shadow: inset 0 0 0 5px rgba(255,255,255,.35); align-self: center; }
.lg-rows { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.lg-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .96rem; animation: pin .45s cubic-bezier(.16,1,.3,1) both; }
.lg-rows li:nth-child(2) { animation-delay: .06s; } .lg-rows li:nth-child(3) { animation-delay: .12s; } .lg-rows li:nth-child(4) { animation-delay: .18s; }
.lg-rows li span { color: var(--muted); min-width: 0; }
.lg-rows li b { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-rows li.r-in b { color: var(--ink); } .lg-rows li.r-out b { color: var(--red-ink); }
.lg-rows li.r-tot span { color: var(--ink); font-weight: 700; } .lg-rows li.r-tot b { font-weight: 700; color: var(--red-ink); }
.lg-bars { margin-top: 20px; height: 110px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; }
.lg-col { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 6px; align-items: end; }
.lg-b { display: block; background: var(--paper); border-radius: 6px 6px 2px 2px; transition: background .4s, transform .5s cubic-bezier(.3,1.4,.5,1); transform-origin: 50% 100%; transform: scaleY(.15); }
.lg-col.on .lg-b { background: var(--ink); transform: scaleY(1); }
.lg-col.cur .lg-b { background: var(--red); }
.lg-m { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; color: var(--muted); text-align: center; }

/* ===== Case (modelo) ===== */
.case-hero h1 { font-family: var(--f-display); font-weight: 900; font-stretch: 118%; text-transform: uppercase; font-size: clamp(2.4rem, 8vw, 6.6rem); line-height: .88; letter-spacing: -.035em; margin-top: 20px; }
.case-hero .cl { font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-top: 18px; display: block; }
.player { margin-top: -60px; position: relative; z-index: 2; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); display: grid; place-items: center; color: #fff; isolation: isolate; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); }
.player .ph { position: absolute; inset: 0; z-index: -1; background: radial-gradient(100% 80% at 70% 20%, rgba(239,55,66,.5), transparent 60%), repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 16px), var(--ink); }
.player .big-play { width: 110px; height: 110px; border-radius: 50%; background: var(--red); display: grid; place-items: center; border: 0; cursor: pointer; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.player .big-play:hover { transform: scale(1.08); }
.player .big-play::after { content: ""; border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; margin-left: 6px; }
.player .hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 12px; color: rgba(255,255,255,.7); white-space: nowrap; }
.player .vf { position: absolute; inset: 18px; pointer-events: none; }
.player .vf i { position: absolute; width: 28px; height: 28px; border: 2.5px solid rgba(255,255,255,.75); }
.player .vf i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; } .player .vf i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.player .vf i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; } .player .vf i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.ficha-tec { margin-top: 48px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.ficha-tec div { padding: 18px 16px 18px 0; display: grid; gap: 4px; }
.ficha-tec div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.ficha-tec dt { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ficha-tec dd { margin: 0; font-weight: 700; }
.story { margin-top: 72px; display: grid; gap: 56px; }
.chap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
.chap .n { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--red-ink); padding-top: 10px; border-top: 2px solid var(--red); align-self: start; }
.chap h2 { font-family: var(--f-display); font-weight: 850; font-stretch: 110%; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: .95; letter-spacing: -.02em; }
.chap p { color: var(--muted); margin-top: 14px; max-width: 64ch; font-size: 1.08rem; }
.frames { margin-top: 72px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.fr { border-radius: 16px; overflow: hidden; background: var(--paper); position: relative; aspect-ratio: 16 / 9; grid-column: span 4; display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.fr.w8 { grid-column: span 8; } .fr.sq { aspect-ratio: 1; }
.fr::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed #C9C9C9; border-radius: 10px; }
.fr.dk { background: var(--ink); color: var(--muted-d); } .fr.dk::before { border-color: #444; }
.fr.rd { background: var(--red); color: #fff; } .fr.rd::before { border-color: rgba(255,255,255,.5); }
.results { margin-top: 72px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.res { background: var(--ink); color: #fff; border-radius: 20px; padding: 24px; }
.res b { font-family: var(--f-display); font-weight: 900; font-stretch: 115%; font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: .9; letter-spacing: -.04em; display: block; color: var(--red); }
.res span { color: var(--muted-d); display: block; margin-top: 10px; }
/* Ficha técnica (créditos) */
.credits-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.clap-mini { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--muted-d); border: 1.5px solid var(--line-d); border-radius: 8px; padding: 8px 12px; background: repeating-linear-gradient(-58deg, transparent 0 10px, rgba(255,255,255,.04) 10px 20px); }
.credit-list { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.credit-list li { display: grid; gap: 4px; padding: 20px 0; border-top: 1px solid var(--line-d); align-content: start; }
.credit-list .fn { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.credit-list b { font-family: var(--f-display); font-weight: 800; font-stretch: 108%; font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -.01em; line-height: 1.1; }
.credit-list .co { color: var(--muted-d); font-size: .95rem; }
.credits-text { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-d); white-space: pre-line; columns: 2 320px; column-gap: 56px; font-size: 1.05rem; line-height: 1.85; color: #E8E8E8; }
.credits-text.empty { color: var(--muted-d); columns: auto; }
.res.ph-res { background: var(--paper); color: var(--muted); border: 1.5px dashed #C9C9C9; }
.res.ph-res b { color: #BDBDBD; }
.chap p.soon { color: #A3A3A3; font-style: italic; }
.player img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
@media (max-width: 1080px) { .credit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .credit-list { grid-template-columns: minmax(0, 1fr); } }

.next { display: block; text-decoration: none; background: var(--red); color: #fff; padding-block: clamp(56px, 8vw, 100px); overflow: hidden; position: relative; }
.next .lbl { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.next .t { font-family: var(--f-display); font-weight: 900; font-stretch: 122%; text-transform: uppercase; font-size: clamp(2.4rem, 9vw, 8rem); line-height: .86; letter-spacing: -.04em; margin-top: 14px; display: flex; align-items: center; gap: .2em; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.next:hover .t { transform: translateX(24px); }
.model-note { background: var(--red-soft); color: var(--red-ink); border-radius: 14px; padding: 12px 16px; font-family: var(--f-mono); font-size: 12.5px; margin-top: 22px; display: inline-block; }

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv { min-height: 340px; }
  .wk, .wk.big { grid-column: span 6; } .wk.big { min-height: 360px; }
  .tabs, .atom-grid, .ia, .about, .at-hero, .duo, .join { grid-template-columns: minmax(0, 1fr); }
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .num:nth-child(2) { border-right: 0; } .num:nth-child(3) { padding-left: 0; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-tec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ficha-tec div:nth-child(4) { padding-left: 0; border-left: 0; }
  .atom-art { max-width: 340px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .svc, .steps, .plans, .cat, .how, .results, .gain { grid-template-columns: minmax(0, 1fr); }
  .steps { gap: 28px; } .steps::before, .steps .fill { display: none; }
  .wk, .wk.big { grid-column: span 12; } .wk.big { min-height: 300px; }
  .row a { grid-template-columns: minmax(0, 1fr) 30px; gap: 4px 12px; }
  .row .c { grid-column: 1 / -1; }
  .row .go { grid-row: 2; grid-column: 2; }
  .row .tgs { grid-column: 1 / -1; justify-content: flex-start; }
  .tl { grid-template-columns: minmax(0, 1fr); } .tl .t0, .tl .t1 { display: none; }
  .tc-hud { display: none; }
  .top .wrap > .btn { display: none; }
  .craft-ans { font-size: 22vw; }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .chap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ficha-tec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-tec div:nth-child(odd) { padding-left: 0; border-left: 0; } .ficha-tec div:nth-child(4) { padding-left: 16px; border-left: 1px solid var(--line); }
  .fr, .fr.w8 { grid-column: span 12; }
  .player { margin-top: -30px; } .player .big-play { width: 80px; height: 80px; }
  .chart { height: 180px; gap: 8px; } .months { gap: 8px; }
  .nums { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tab { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rv.pre { transform: none; }
}

/* Mais vídeos do projeto (página do case) */
.more-vids { margin-top: 22px; }
.more-vids[hidden] { display: none; }
.mv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mv-count { font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mv { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 10px; }
.mv-media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--ink); }
.mv-media img, .mv-media video, .mv-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; background: #000; }
.mv.on .mv-media video { object-fit: contain; }
.mv-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--red); box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.mv-play::after { content: ""; position: absolute; left: 22px; top: 17px; border-left: 16px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.mv:hover .mv-play, .mv:focus-visible .mv-play { transform: scale(1.12); }
.mv:focus-visible .mv-media { outline: 3px solid var(--red); outline-offset: 3px; }
.mv-t { font-weight: 600; font-size: .98rem; display: flex; gap: 10px; align-items: baseline; }
.mv-n { font-family: var(--f-mono); font-size: 12px; color: var(--red); }
.mv-ext { color: var(--muted); }

/* case: blocos vazios somem; capa do vídeo no player */
.player[hidden], .story[hidden], .frames[hidden], .results[hidden], section[hidden], .player .ph[hidden], .player .hint[hidden], .player .big-play[hidden], .player .vf[hidden] { display: none !important; }
.player video.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.player:has(.poster)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)); pointer-events: none; }
#moreRows[hidden] { display: none; }
/* Topo sem o reel: fundo escuro com brilho vermelho (até entrar o loop novo) */
.hero { background:
  radial-gradient(70% 90% at 85% 15%, rgba(239,55,66,.28), transparent 60%),
  radial-gradient(50% 60% at 10% 100%, rgba(239,55,66,.12), transparent 70%),
  repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 16px),
  var(--ink2); }
.hero .wrap { padding-bottom: 72px; }