/* Meu Editor PRO · regras de vini-ramos-designer (R01…), direção do unslop, movimento do blank-page.
   Mundo: sala de edição. Só tema escuro (exceção à R30, decidida em 06/11): o estúdio (#121212) alterna com as
   faixas de "tela" (#070707). Assinatura: os cantos de visor do logo em volta do que é tela. Momentos: o P1 e a pizza. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 75% 100%;
  font-display: optional;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: optional;
}

/* R63: o tint fica fixo em currentColor e só a intensidade anima */
@property --tint { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
*, ::before, ::after { --hover: color-mix(in srgb, currentColor var(--tint), transparent); }

:root {
  color-scheme: dark;
  --ink: 255 255 255;                    /* R07 */
  --text-rgb: 245 245 245;
  --bg: #121212;                         /* R48 */
  --surface: #1B1B1B;
  --glass: rgb(38 38 38 / .72);
  --accent: #FF6A2B;                     /* 6,93:1 com preto */
  --on-accent: #0A0A0A;
  --success: #2EA26A;                    /* R47 */
  --shadow-float: 0 12px 32px rgb(0 0 0 / .24), 0 1px 4px rgb(0 0 0 / .16); /* R09 */
  --r-card: 24px;
  --r-btn: 12px;
  --pad: 24px;
  --nav-h: 64px;
  --ease: cubic-bezier(.65, 0, .35, 1);
  --bounce: cubic-bezier(.34, 1.32, .64, 1); /* R15 */
  --ease-out: cubic-bezier(.2, 0, 0, 1);     /* R63 */
  --dur: 240ms;
  --dur-in: 160ms;
  --blur: blur(24px) saturate(180%);        /* R10 */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", var(--font);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Faixa de tela: um tom mais escuro que o estúdio */
.screen {
  --ink: 255 255 255;
  --text-rgb: 245 245 245;
  --bg: #070707;
  --surface: #141414;
  --glass: rgb(20 20 20 / .72);
  --accent: #FF6A2B;
  --on-accent: #0A0A0A;
  --shadow-float: 0 12px 32px rgb(0 0 0 / .4), 0 1px 4px rgb(0 0 0 / .24);
  background: var(--bg);
  color: var(--text);
}
/* Tokens derivados, recalculados em cada contexto */
:root, .screen {
  --text: rgb(var(--text-rgb));
  --text-2: rgb(var(--text-rgb) / .64);
  --text-3: rgb(var(--text-rgb) / .44);
  --line: rgb(var(--ink) / .10);
  --line-strong: rgb(var(--ink) / .16);
  --fill: rgb(var(--ink) / .05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; } /* vence o display dos componentes */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; }
body {
  font: 400 16px/24px var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  font-feature-settings: "liga" 1, "calt" 1; /* R12 */
  font-variant-numeric: tabular-nums;
}
img, video, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, li, dd { text-wrap: pretty; } /* R40 */
.balance, .center { text-wrap: balance; }
.center { text-align: center; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 50; padding: 12px 20px; border-radius: var(--r-btn); background: var(--surface); box-shadow: var(--shadow-float); }
.skip:focus { top: 16px; }

/* R12: títulos em Title Case, SemiBold/Bold, tracking negativo. Display com caráter para as cenas */
.display { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 80, "opsz" 96; font-size: 80px; line-height: 80px; letter-spacing: -1.5px; }
.display-2 { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 85, "opsz" 96; font-size: 56px; line-height: 60px; letter-spacing: -1px; }
.h2 { font: 600 40px/48px var(--font); letter-spacing: -.75px; }
.h3 { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 90, "opsz" 32; font-size: 32px; line-height: 40px; letter-spacing: -.5px; }
.h4 { font: 600 18px/24px var(--font); letter-spacing: -.25px; }
.lead { font: 400 20px/28px var(--font); color: var(--text-2); }
.body-lg { font: 400 20px/32px var(--font); color: var(--text-2); }
.body { font: 400 16px/24px var(--font); }
.muted { color: var(--text-2); }
.mono { font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.eyebrow { font: 500 14px/20px var(--font); color: var(--text-2); }

/* Assinatura: rótulo de cena com o ponto de gravação (R41: sem pulsar) */
.eyebrow { color: var(--text-2); }
.hl { color: var(--accent); }
/* Assinatura: cantos de visor, os mesmos do logo, em volta do que é tela */
.vf { position: relative; }
.vf::before, .pro::before {
  --c: var(--text-3); --l: 24px; --w: 2px;
  content: ""; position: absolute; inset: -16px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--w), linear-gradient(var(--c), var(--c)) left top / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--w), linear-gradient(var(--c), var(--c)) right top / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--w), linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--w), linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--l);
  background-repeat: no-repeat;
}

/* R13 */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-16 { width: 16px; height: 16px; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: 848px; }

/* R16 · R36 · R54 · R63 */
.btn {
  --b-bg: transparent; --b-fg: var(--text);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 44px; padding: 12px 20px; border-radius: var(--r-btn);
  font: 600 14px/20px var(--font); color: var(--b-fg); background: var(--b-bg);
  box-shadow: inset 0 0 0 999px var(--hover);
  transition: --tint var(--dur-in) var(--ease-out), transform 200ms var(--bounce), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { --tint: 10%; }
.btn:active { --tint: 16%; transform: scale(var(--press, .96)); }
.btn-primary { --b-bg: var(--accent); --b-fg: var(--on-accent); }
.btn-secondary { --b-bg: color-mix(in srgb, var(--accent) 12%, transparent); --b-fg: var(--accent); }
.btn-ghost { --b-fg: var(--text); }
.btn-sm { min-height: 36px; padding: 8px 16px; gap: 8px; }
.btn-sm::before { content: ""; position: absolute; inset: -4px 0; } /* R18 */
.btn-lg { min-height: 48px; padding: 12px 24px; font-size: 16px; line-height: 24px; }
.btn-block { width: 100%; }
/* Botão de compra: maior e com anel pulsando. R41 permite em site de marketing quando é intencional (pedido em 06/11) */
.btn-primary.btn-lg[data-checkout] { min-height: 64px; padding: 20px 40px; font-size: 18px; line-height: 24px; border-radius: 16px; }
.btn-primary.btn-lg[data-checkout]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: cta-pulse 2.4s var(--ease-out) infinite; }
@keyframes cta-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 56%, transparent); }
  70%, 100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* Navegação: barra do monitor, sempre escura (R10: vidro porque o conteúdo passa por trás) */
.nav { position: sticky; top: 0; z-index: 20; height: var(--nav-h); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: inset 0 -1px 0 var(--line); }
.nav-in { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/24px var(--font); letter-spacing: -.25px; }
/* PRO do nome: laranja, com os cantinhos do visor (mesmo desenho do .vf, menor) */
.pro { position: relative; display: inline-block; padding: 0 3px; color: var(--accent); font-weight: 700; }
.pro::before { --c: var(--accent); --l: 5px; --w: 1.5px; inset: 0; z-index: auto; } /* dentro da caixa: nada é recortado */
/* Foco de câmera: o nome entra desfocado e foca; o PRO foca um instante depois */
.js .brand-name { opacity: 0; filter: blur(8px); }
.brand-name.focus { opacity: 1; filter: none; animation: focus-in 900ms var(--ease-out) backwards; } /* backwards: o filtro some ao terminar */
.brand-name.focus .pro { animation: focus-in 900ms 260ms var(--ease-out) backwards; }
@keyframes focus-in { from { opacity: 0; filter: blur(8px); transform: scale(1.04); } to { opacity: 1; filter: blur(0); transform: none; } }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-btn); font: 500 14px/20px var(--font); color: var(--text-2); box-shadow: inset 0 0 0 999px var(--hover); transition: --tint var(--dur-in) var(--ease-out), color var(--dur) var(--ease); }
.nav-links a:hover { --tint: 10%; color: var(--text); }
.nav-links a[aria-current] { --tint: 12%; color: var(--accent); } /* R14: seção em foco, cor e fundo mudam juntos (R70) */
.nav-links a[aria-current]:hover { --tint: 16%; } /* R52 */
.step-pill { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: var(--fill); color: var(--text-2); }

/* Topo */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; min-height: calc(100svh - var(--nav-h)); padding-block: 80px; }
.hero-copy { display: grid; gap: 24px; align-content: center; }
.hero-copy .display { margin-top: -8px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row.center { justify-content: center; }
.trigger { font: 400 14px/20px var(--font); color: var(--text-2); }
.trigger b { font-weight: 600; color: var(--text); }
.proof { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.proof b { font-weight: 600; color: var(--text); }
.proof-star { display: grid; color: var(--accent); }
.proof-star path { fill: currentColor; }
.avatar { width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; flex: none; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); font: 600 22px/28px var(--font); color: var(--text-2); } /* R69 */

/* Título legível na primeira pintura, com entrada palavra por palavra (R15). */
.hero-copy .w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy .w { animation: hero-word-in 360ms var(--ease-out) calc(var(--w) * 45ms) backwards; }
  @keyframes hero-word-in { from { opacity: .85; transform: translateY(8px); } }
}

/* Monitor do topo: o P1 real e os 5 checkpoints */
.monitor { container-type: inline-size; padding: 24px 16px; }
.monitor-in { display: flex; align-items: flex-end; justify-content: flex-end; }
.monitor-in.solo { justify-content: center; }
/* Espaço reservado do vídeo de apresentação */
.intro-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; color: rgb(245 245 245 / .64); }
.intro-play { width: 72px; height: 72px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.intro-play path { fill: currentColor; }
.phone { width: 288px; padding: 8px; border-radius: 48px; background: #0A0A0A; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); flex: none; }
.screen-v { position: relative; aspect-ratio: 9 / 16; border-radius: 40px; overflow: hidden; background: #0E0F12; } /* R06: 48 − 8 */
.screen-v img, .screen-v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 400ms var(--ease); }
.rail-head { display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); margin-bottom: 12px; }
.rail-list { display: grid; gap: 8px; } /* R04 */
.cp { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 32px; } /* R05 */
.cp-name { font: 500 14px/20px var(--font); color: var(--text-2); transition: color var(--dur) var(--ease); }
.cp-meta { color: var(--text-3); transition: color var(--dur) var(--ease); }
.cp.done .cp-name, .case-card .cp-name { color: var(--text); }
.cp.done .cp-meta { color: var(--text-2); }
.tick { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; flex: none; color: #FFFFFF; box-shadow: inset 0 0 0 2px var(--line-strong); transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.tick .i { transform: scale(0); transition: transform 360ms var(--bounce); stroke-width: 2.5; }
.done .tick { background: var(--success); box-shadow: inset 0 0 0 2px transparent; }
.done .tick .i { transform: scale(1); }

/* Ficha do curso: os números do plano numa linha (plano §1, MasterClass) */
/* Apps que o aluno deixa de usar: ícones no formato iOS/macOS, sem logo de terceiro, rasgam ao cruzar o centro */
.apps-sec { padding-block: 0 56px; overflow: hidden; text-align: center; }
.apps-lead { margin-bottom: 24px; font-size: 14px; line-height: 20px; color: var(--text-3); }
.marquee { mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 90s linear infinite; } /* 6 cópias de 9 apps: a emenda do loop fica fora da tela até 3240 px */
@keyframes marquee { to { transform: translateX(-50%); } }
.app { width: 120px; display: grid; justify-items: center; gap: 16px; flex: none; }
.app-icon { position: relative; width: 64px; height: 64px; perspective: 320px; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .4)); }
.half { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: var(--pivot, 50%) 100%; }
.half img { width: 100%; height: 100%; }
.half img.ios { width: 80.5%; height: 80.5%; border-radius: 22.37%; } /* ícone de iPhone no mesmo tamanho e máscara dos do Tahoe */
/* Miolo do papel na borda rasgada, recortado no formato do ícone (a margem transparente não ganha borda) */
.edge { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, #FFFDF8, #E8E0D2); -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.edge.ios { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='9.75' y='9.75' width='80.5' height='80.5' rx='18'/%3E%3C/svg%3E"); }
.app-price { position: relative; min-height: 16px; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; color: var(--text-2); transition: color var(--dur) var(--ease); }
.pen { position: absolute; left: -6%; top: -2px; width: 112%; height: 20px; overflow: visible; pointer-events: none; clip-path: inset(0 100% 0 0); }
.pen path { fill: var(--accent); stroke: var(--accent); stroke-width: .3; stroke-linejoin: round; }
/* Rasgado: o estado final é a base (vale também sem animação). Ao rasgar: o ícone treme, o rasgo abre de cima para baixo
   como um V com a dobra embaixo, a borda de papel aparece e as metades giram em perspectiva e caem. Depois, a canetada.
   Desrasgar não anima: o ícone volta inteiro na hora, fora da vista */
/* Queda, balanço, dobra e duração vêm do style de cada .app-icon (tearOf no build), para nenhum rasgo ser igual ao outro */
.torn .half.l { transform: var(--rip-l); opacity: .6; animation: rip-l var(--rip-d) cubic-bezier(.3, .6, .2, 1) both; }
.torn .half.r { transform: var(--rip-r); opacity: .6; animation: rip-r var(--rip-d) cubic-bezier(.3, .6, .2, 1) both; }
.torn .edge { opacity: 1; animation: edge-in var(--rip-d) both; }
.torn .app-icon { animation: tense 200ms linear; }
.torn .app-price { color: var(--text-3); }
.torn .pen { clip-path: inset(0); animation: pen-draw 380ms calc(var(--rip-d) * .52) cubic-bezier(.4, 0, .2, 1) both; }
.now .half, .now .edge, .now .app-icon, .now .pen { animation: none; } /* já estavam rasgados quando a faixa apareceu */
@keyframes tense { 25% { transform: translateX(-1px) rotate(-1.5deg); } 50% { transform: translateX(1px) rotate(1.5deg); } 75% { transform: translateX(-1px); } }
@keyframes rip-l { 0% { transform: none; opacity: 1; } 14% { transform: rotate(.6deg); } 42% { transform: var(--wob-l); opacity: 1; } 100% { transform: var(--rip-l); opacity: .6; } }
@keyframes rip-r { 0% { transform: none; opacity: 1; } 14% { transform: rotate(-.6deg); } 42% { transform: var(--wob-r); opacity: 1; } 100% { transform: var(--rip-r); opacity: .6; } }
@keyframes edge-in { 0%, 14% { opacity: 0; } 32% { opacity: 1; } }
@keyframes pen-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.facts-sec { padding-block: 56px; }
.facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding-block: 24px; box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.facts > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.facts dt { color: var(--text-3); }
.facts dd { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 85, "opsz" 48; font-size: 28px; line-height: 32px; letter-spacing: -.5px; }

/* Seções */
.sec { padding-block: 128px; }
.sec-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: 56px; }
.card { background: var(--surface); border-radius: var(--r-card); padding: 24px; box-shadow: inset 0 0 0 1px var(--line); } /* R03 R08 R09 */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-2 > * { min-width: 0; } /* R65 */
.row-card { display: flex; align-items: center; gap: 24px; } /* R05 */
.badge-icon { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; flex: none; background: var(--fill); color: var(--text-2); }

/* Problema: os defeitos, no visual do P1. Vermelho = erro, verde = corrigido (R47) */
.defects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 960px; }
.defect { display: grid; gap: 16px; justify-items: center; }
.frame {
  --c: transparent;
  position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden;
  background: #0E0F12; color: #F4F2EC; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .10);
  transition: transform 200ms var(--bounce);
}
.frame:active { transform: scale(.98); }
.marked .frame { --c: #E5484D; }
.fixed .frame { --c: #2EE59D; }
.red { position: relative; }
.red::after { content: ""; position: absolute; inset: -6px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--c); opacity: 0; transform: scale(1.12); transition: opacity 240ms var(--ease), transform 420ms var(--bounce), box-shadow 300ms var(--ease); }
.marked .red::after, .fixed .red::after { opacity: 1; transform: none; }
.person { position: absolute; left: 50%; bottom: 0; width: 72%; transform: translateX(-50%); fill: #2A2D33; }
.cap-wrap { position: absolute; inset: 0; transition: transform 600ms var(--bounce); }
.fixed .cap-wrap { transform: translateY(21%); }
.cap { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); padding: 4px 8px; border-radius: 6px; background: rgb(0 0 0 / .64); font: 600 13px/16px var(--font); white-space: nowrap; }
.margins { position: absolute; inset: 0 11%; box-shadow: inset 1px 0 0 rgb(46 229 157 / .5), inset -1px 0 0 rgb(46 229 157 / .5); opacity: 0; transition: opacity var(--dur) var(--ease); }
.fixed .margins { opacity: 1; }
.big { position: absolute; left: 11%; top: 34%; font: 700 44px/44px var(--font); letter-spacing: -1px; transition: opacity 300ms var(--ease); }
.big.bad-v { white-space: nowrap; }
.big.good-v { right: 11%; font-size: 30px; line-height: 32px; opacity: 0; }
.fixed .big.bad-v { opacity: 0; }
.fixed .big.good-v { opacity: 1; }
.brand-row { position: absolute; left: 50%; top: 44%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; }
.mark-wrap { position: relative; width: 40px; height: 40px; flex: none; }
.blob, .logo-ok { position: absolute; inset: 0; transition: opacity 300ms var(--ease), transform 420ms var(--bounce); }
.blob { fill: #7BC96F; }
.blob text { font: 700 13px var(--font); fill: #0E0F12; }
.logo-ok { display: grid; place-items: center; border-radius: 12px; background: #2EE59D; color: #0E0F12; font: 700 16px/1 var(--font); opacity: 0; transform: scale(.6); }
.handle { position: relative; display: grid; font: 600 16px/24px var(--font); }
.handle > span, .tags > span { grid-area: 1 / 1; transition: opacity 300ms var(--ease), transform 420ms var(--bounce); }
.fixed .bad-v { opacity: 0; }
.fixed .logo-ok { opacity: 1; transform: none; }
.handle .good-v { opacity: 0; }
.fixed .handle .good-v { opacity: 1; }
.tags { display: grid; justify-items: center; }
.tag { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.tag.bad { color: #E5484D; opacity: 0; }
.marked .tag.bad { opacity: 1; }
.tag.good { color: #2EE59D; opacity: 0; transform: translateY(8px); }
.fixed .tag.bad { opacity: 0; transform: translateY(-8px); }
.fixed .tag.good { opacity: 1; transform: none; }
.demo-note { margin-top: 32px; color: var(--text-3); }

/* Método: monitor fixo à esquerda, checkpoints rolando à direita (R31) */
.method-sec { padding-top: 0; }
.method { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: start; }
.viewer { position: sticky; top: calc(var(--nav-h) + 48px); padding: 24px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.viewer-head { display: flex; justify-content: space-between; gap: 16px; color: var(--text-3); margin-bottom: 24px; }
.viewer-body { display: grid; }
.vpane { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--ease), transform 480ms var(--bounce); pointer-events: none; }
.vpane.on { opacity: 1; transform: none; pointer-events: auto; }
.scrub { position: relative; height: 16px; margin-top: 32px; }
.scrub-track { position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: var(--line-strong); overflow: hidden; }
.scrub-fill { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 600ms var(--ease); }
.scrub-mark { position: absolute; top: 0; left: calc(var(--x) * (100% - 16px)); width: 16px; height: 16px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.scrub-mark.done { background: var(--success); box-shadow: inset 0 0 0 2px transparent; }
.steps { display: grid; }
.step { display: grid; gap: 12px; align-content: center; min-height: 64vh; opacity: .32; transition: opacity 400ms var(--ease); }
.step.on { opacity: 1; }
.step-n { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.art-inline { display: none; }
.method-note { margin-top: 48px; max-width: 640px; font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 90, "opsz" 32; font-size: 26px; line-height: 32px; letter-spacing: -.5px; }
.art-head { color: var(--text-3); margin-bottom: 16px; }
.kv > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding-block: 12px; box-shadow: inset 0 -1px 0 var(--line); } /* R68 */
.kv > div:last-child { box-shadow: none; padding-bottom: 0; }
.kv > div:first-child { padding-top: 0; }
.kv dt { color: var(--text-3); padding-top: 2px; }
.kv dd { font-size: 14px; line-height: 20px; }
.boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.board { position: relative; }
.board img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: #0E0F12; }
.js .badge-ok { transform: scale(0); }
.js .in .badge-ok { transform: none; transition: transform 420ms var(--bounce) calc(var(--d, 0ms) + 320ms); }
.badge-ok { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--success); color: #FFFFFF; box-shadow: 0 0 0 2px var(--surface); } /* R62 */
.wave { width: 100%; height: 48px; margin-bottom: 16px; }
.wave rect { fill: var(--text-3); transform-box: fill-box; transform-origin: center; }
.js .wave rect { transform: scaleY(.08); }
.js .wave.in rect { transform: none; transition: transform 420ms var(--bounce) calc(var(--i) * 8ms); }
.wave .hook { fill: var(--accent); }
.blocks { display: grid; gap: 12px; }
.blocks li { display: grid; gap: 4px; font-size: 14px; line-height: 20px; }
.blocks .mono { color: var(--text-3); }
.scenes { display: grid; gap: 8px; }
.scenes li { display: grid; grid-template-columns: 16px minmax(0, 1fr) 24px; align-items: center; gap: 12px; min-height: 32px; font-size: 14px; line-height: 20px; }
.scenes .mono { color: var(--text-3); }
.js .scenes .mark { transform: scale(0); }
.js .scenes.in .mark { transform: none; transition: transform 420ms var(--bounce) calc(var(--d, 0ms) + 200ms); }
.mark { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; flex: none; background: var(--fill); color: var(--text-3); }
.mark.ok { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.file { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.file-name { font: 500 14px/20px var(--mono); overflow-wrap: anywhere; }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 16px; }
.specs dt { color: var(--text-3); }
.specs dd { font: 600 16px/24px var(--font); }

/* Bastidores: o curso como case */
.case-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.case-grid .sec-head { margin-bottom: 0; }
.case-card .cp-name { font-size: 16px; line-height: 24px; }
.case-card .cp { min-height: 40px; }
.case-card .rail-list { gap: 12px; }
.js .case-card .tick .i { transform: scale(0); }
.js .case-card .in .tick .i { transform: none; transition: transform 420ms var(--bounce) calc(var(--d, 0ms) + 240ms); }

/* Entregas como storyboard: P1 é o quadro real; P2 a P4, esboços */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.sb { display: grid; gap: 8px; align-content: start; }
.sb-frame { position: relative; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: #0E0F12; margin-bottom: 8px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.sb-frame img, .sk { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk-fill { fill: #2A2D33; }
.sk-cap { fill: rgb(244 242 236 / .9); }
.sk-rec { fill: var(--accent); }
.sk-line { stroke: rgb(255 255 255 / .2); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.sk-bar { fill: #2EE59D; transform-box: fill-box; transform-origin: bottom; }
.sk-ratio { fill: none; stroke: rgb(244 242 236 / .7); stroke-width: 1.5; }
.sk-ratio:nth-child(2) { stroke: rgb(46 229 157 / .9); }
.sk-ratio:nth-child(3) { stroke: color-mix(in srgb, var(--accent) 90%, transparent); }
.js .strip .sk-bar { transform: scaleY(0); }
.js .strip.in .sk-bar { transform: none; transition: transform 600ms var(--bounce) 400ms; }
.js .strip.in .sk-bar:nth-of-type(2) { transition-delay: 500ms; }
.js .strip.in .sk-bar:nth-of-type(3) { transition-delay: 600ms; }
.sb-code { color: var(--text-3); }

/* Grade: acordeão fechado com os marcos do roteiro (plano §6) */
.acc-n { display: inline-block; width: 32px; color: var(--text-3); font-size: 14px; }
.acc-sub { display: block; margin: 4px 0 0 32px; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.acc-sub b { font-weight: 500; color: var(--accent); }
.lessons { display: grid; gap: 8px; }
.lessons li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 16px; font-size: 14px; line-height: 20px; }
.lessons .mono { color: var(--text-3); padding-top: 2px; }
.lessons.acc-a { padding-left: 32px; }

/* Para quem é */
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cols-3 > * { min-width: 0; }
.seg { display: grid; gap: 12px; align-content: start; padding-top: 24px; box-shadow: inset 0 1px 0 var(--line); }
.seg .badge-icon { margin-bottom: 8px; }
.seg-row { grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 16px; }
.seg-row .badge-icon { margin-bottom: 0; }
.not-for { margin-top: 32px; max-width: 720px; display: grid; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text-3); }
.buy { margin-top: 48px; display: grid; gap: 12px; justify-items: start; }
.buy-lead { font: 500 18px/24px var(--font); color: var(--text); text-wrap: pretty; }
/* Notas de direção dentro do checkpoint: reaproveita as bolhas do funil (.chat, .bubble) */
.notes { margin-top: 24px; }
.notes .bubble { text-wrap: balance; } /* R40: frase curta, linhas parecidas */
.bubble .by { display: block; margin-bottom: 4px; color: var(--text-3); }

/* Mercado */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.stats > li { display: grid; gap: 8px; align-content: start; padding-top: 24px; box-shadow: inset 0 1px 0 var(--line); }
.stat { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 85, "opsz" 96; font-size: 88px; line-height: 88px; letter-spacing: -2px; }
.stats > li:last-child .stat { color: var(--accent); }
.source { margin-top: 32px; display: flex; align-items: center; gap: 4px; color: var(--text-3); }
/* Botão de info com tooltip próprio: R22, R10, R18, R36, R39 */
.info-btn { position: relative; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; color: inherit; box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor var(--tint), transparent); transition: --tint var(--dur-in) var(--ease-out), color var(--dur-in) var(--ease-out); }
.info-btn::before { content: ""; position: absolute; inset: -10px; }
.info-btn:hover, .info-btn[aria-expanded="true"] { --tint: 10%; color: var(--text); }
#tip { position: fixed; z-index: 60; max-width: 280px; padding: 8px 12px; border-radius: 8px; pointer-events: none; font: 500 12px/16px var(--font); color: var(--text); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-float); opacity: 0; transform: translateY(4px) scale(.96); transition: opacity 160ms var(--ease), transform 240ms var(--bounce); }
#tip.show { opacity: 1; transform: none; }

/* Créditos, como no fim de um filme */
.teacher-row { display: flex; align-items: center; gap: 16px; } /* R05: avatar → texto */
.teacher-p { margin-top: 32px; max-width: 720px; }

/* Preço */
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.price-grid.solo { grid-template-columns: minmax(0, 720px); }
/* Vídeo na altura toda da seção, do meio até a borda direita da tela (o vão entre as colunas fica em 50% ± 40 px).
   Só a borda esquerda some até o texto: a máscara mostra o fundo real, sem acertar cor. Em cima e embaixo ele
   encosta no corte para as seções vizinhas (#121212). Lighten: o navegador gerencia a cor do vídeo à parte e o
   preto dele sai mais escuro que o #070707 da faixa */
.price-sec { position: relative; }
.pizza { position: absolute; top: 0; bottom: 0; left: calc(50% - 24px); right: 0; margin: 0; }
.js .pizza[data-reveal]:not([data-stagger]) { transform: none; } /* entra só com opacidade: subir 16 px abriria uma faixa no topo */
.pizza video { width: 100%; height: 100%; max-width: none; object-fit: cover; mix-blend-mode: lighten;
  mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / .2) 16%, rgb(0 0 0 / .6) 32%, #000 48%); }
/* Legenda sobre o vídeo: plus-lighter soma luz ao que está atrás (brilha sobre a pizza, fica cinza legível no escuro;
   color-dodge sumiria nos quadros pretos) */
.pizza-msg { position: absolute; left: 50%; bottom: 48px; translate: -50% 0; white-space: nowrap; font: 500 14px/20px var(--font); color: var(--text-3); mix-blend-mode: plus-lighter; }
.price-copy { position: relative; display: grid; gap: 24px; justify-items: start; } /* relative: fica acima do vídeo */
.price-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px; }
.price-big > span:first-child { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 80, "opsz" 96; font-size: 104px; line-height: 104px; letter-spacing: -2px; color: var(--accent); }
.price-stack { display: grid; gap: 4px; }
.price-was { margin: 0; font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 80, "opsz" 96; font-size: 48px; line-height: 48px; letter-spacing: -1px; color: var(--text-3); }
/* Preço riscado com a mesma canetada do marquee; desenha quando o bloco de preço entra na tela */
.price-was del { position: relative; display: inline-block; text-decoration: none; }
.price-was .pen { top: 25%; height: 50%; clip-path: none; }
.js .price-copy:not(.in) .price-was .pen { clip-path: inset(0 100% 0 0); }
.js .price-copy.in .price-was .pen { animation: pen-draw 480ms 320ms cubic-bezier(.4, 0, .2, 1) both; }
.price-inst { margin: 0; font-size: 18px; line-height: 24px; font-weight: 500; }
.price-inst span { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-2); } /* total na linha de baixo, no tamanho das notas do .fine */
.checks { display: grid; gap: 12px; }
/* Garantia e avisos embaixo do botão: check SVG no lugar do ✓ (R33), centrado na 1ª linha (R13); avisos um degrau menores (R12) */
.price-trust { display: grid; gap: 8px; }
.price-trust .trigger { display: flex; gap: 8px; }
.price-trust .trigger .i { margin-top: 2px; color: var(--success); }
.fine { font: 400 12px/16px var(--font); color: var(--text-3); }
.checks li { display: flex; align-items: flex-start; gap: 16px; }
.checks .mark { margin-top: -2px; }
.amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.amount > .n { font: 600 56px/64px var(--font); letter-spacing: -1px; }
.amount .mono { font-size: 14px; line-height: 20px; color: var(--text-2); }

/* Dúvidas: linhas, sem cards */
.faq { box-shadow: inset 0 1px 0 var(--line); }
.acc { box-shadow: inset 0 -1px 0 var(--line); }
.acc > button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 24px 0; text-align: left; }
.acc.open > button { position: sticky; top: var(--nav-h); z-index: 2; background: var(--bg); } /* R38 */
.acc-t { font: 600 18px/24px var(--font); letter-spacing: -.25px; }
.chev { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; color: var(--text-2); box-shadow: inset 0 0 0 999px var(--hover); transition: --tint var(--dur-in) var(--ease-out), transform 300ms var(--bounce); }
.acc > button:hover .chev { --tint: 10%; color: var(--text); }
.acc.open .chev { transform: rotate(180deg); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease); } /* R32 */
.acc.open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-a { padding: 0 48px 24px 0; }
.help { margin-top: 32px; }
.help > div { flex: 1; min-width: 0; display: grid; gap: 4px; }

/* Fim */
.final-in { display: grid; justify-items: center; gap: 24px; text-align: center; max-width: 960px; }
.final .trigger { text-align: center; }

/* Prazo real */
.urgency { background: var(--accent); color: var(--on-accent); font: 600 14px/20px var(--font); }
.urgency-in { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding-block: 8px; text-align: center; }
/* Contador em plaquinhas de aeroporto: laranja escuro, dígito branco, vinco no meio, vira ao mudar */
.board { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; perspective: 400px; }
.flap-group { display: inline-flex; align-items: center; gap: 2px; }
.flap { position: relative; display: inline-grid; place-items: center; width: 24px; height: 32px; border-radius: 4px; font: 600 20px/1 var(--mono); color: #FFFFFF; background: linear-gradient(#8F2E08 0 50%, #7C2706 50% 100%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2); transform-origin: 50% 50%; }
.flap::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: rgb(0 0 0 / .4); }
.flap.flip { animation: flap 320ms var(--ease-out); }
@keyframes flap { from { transform: rotateX(-90deg); } }
.flap-unit { margin-left: 4px; font: 600 12px/16px var(--font); }
.urgency-tag { white-space: nowrap; padding: 4px 12px; border-radius: 999px; font: 600 12px/16px var(--font); background: color-mix(in srgb, var(--on-accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-accent) 16%, transparent); } /* R21 R08 */

/* WhatsApp, aviso de compra e barra fixa */
.badge-icon.wa, .fab { background: #25D366; color: #FFFFFF; }
.fab { position: fixed; right: 24px; bottom: 24px; z-index: 31; width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; box-shadow: var(--shadow-float), inset 0 0 0 999px var(--hover); transition: transform 400ms var(--bounce), --tint var(--dur-in) var(--ease-out); }
.fab:hover { --tint: 10%; }
body.sticky-on .fab { transform: translateY(-72px); }
.toast {
  position: fixed; left: 24px; bottom: 24px; z-index: 31; display: flex; align-items: center; gap: 12px; max-width: 360px;
  padding: 12px 16px 12px 12px; border-radius: 16px; font-size: 14px; line-height: 20px;
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-float);
  opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform 400ms var(--bounce);
}
.toast.show { opacity: 1; transform: none; }
body.sticky-on .toast { bottom: 96px; }
.toast-dot { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; flex: none; background: var(--success); color: #FFFFFF; } /* R71 */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 var(--line);
  transform: translateY(100%); transition: transform 400ms var(--bounce);
}
.sticky-cta.show { transform: none; }
.sticky-in { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.sticky-urg { margin-right: auto; display: flex; align-items: center; gap: 12px; font: 600 14px/20px var(--font); }
.sticky-left { display: none; }
.board-sm { gap: 4px 8px; }
.board-sm .flap { width: 20px; height: 28px; font-size: 16px; }
.sticky-price { font: 600 18px/24px var(--font); }
.sticky-note { font-size: 14px; line-height: 20px; color: var(--text-2); }
body:has(.sticky-cta) .foot { padding-bottom: 112px; }

/* Rodapé */
.foot { padding-block: 48px; box-shadow: inset 0 1px 0 var(--line); }
.foot-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 32px; margin-bottom: 32px; box-shadow: inset 0 -1px 0 var(--line); }
.foot-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.foot-label { font-size: 14px; line-height: 20px; color: var(--text-3); }
.pay { display: flex; flex-wrap: wrap; gap: 8px; }
.pay li { padding: 4px 12px; border-radius: 999px; font: 500 12px/16px var(--font); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); } /* R21 R08 */
.secure { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.secure li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text-2); } /* R13 */
.secure .i { color: var(--success); } /* R47 */
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.foot-meta { font-size: 14px; line-height: 20px; color: var(--text-3); }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 24px; font-size: 12px; line-height: 16px; color: var(--text-3); }
.foot-legal nav { display: flex; gap: 16px; }
.foot-legal a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }

/* Consentimento opcional: ações equivalentes, sem bloquear a página ou a compra. */
.meta-consent { position: fixed; inset-block-start: calc(var(--nav-h) + 16px); inset-inline-end: 16px; z-index: 80; width: min(400px, calc(100% - 32px)); padding: 16px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 24px; background: #1c1c1c; }
.meta-consent h2 { font: 600 16px/24px var(--font); text-wrap: balance; }
.meta-consent p { margin-block-start: 4px; color: var(--text-2); font: 400 14px/20px var(--font); text-wrap: pretty; }
.meta-consent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
.meta-consent-actions .btn { --b-fg: var(--text-2); }
.meta-consent-settings { --b-fg: var(--text-2); }
.funnel > .meta-consent-settings { margin: 16px; }
.meta-consent[hidden], .meta-consent-settings[hidden] { display: none; }
mark.todo { padding: 0 4px; border-radius: 4px; color: inherit; background: color-mix(in srgb, #F5A524 28%, transparent); } /* R47: âmbar = falta preencher */
/* Páginas legais */
.legal { max-width: 720px; padding-block: 64px 96px; }
.legal h2 { margin: 40px 0 12px; }
.legal p, .legal li { font-size: 16px; line-height: 24px; color: var(--text-2); text-wrap: pretty; }
.legal h1 + p { margin-top: 8px; color: var(--text-3); }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 12px; }
.legal ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.legal b { font-weight: 600; color: var(--text); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal h3 { margin: 32px 0 12px; }
.legal em { font-style: normal; color: var(--text); }
.legal blockquote { margin: 12px 0; padding: 12px 16px; border-radius: 12px; background: var(--fill); box-shadow: inset 2px 0 0 var(--accent); }
.legal blockquote p { color: var(--text); }
.legal blockquote p + p { margin-top: 8px; }
.legal table { width: 100%; margin: 12px 0; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.legal th, .legal td { padding: 8px 12px 8px 0; text-align: left; vertical-align: top; color: var(--text-2); box-shadow: inset 0 -1px 0 var(--line); }
.legal th { font-weight: 600; color: var(--text); }
/* Modal do roteiro: <dialog> nativo (Esc e foco), fundo só escurece (R11), fecha ao clicar fora (R23), abre com leve quique (R15) */
.modal { margin: auto; padding: 0; border: 0; background: transparent; color: var(--text); width: min(720px, calc(100vw - 32px)); max-height: 85vh; }
.modal::backdrop { background: rgb(0 0 0 / .4); }
.modal-box { max-height: 85vh; overflow: auto; overscroll-behavior: contain; padding: 0 32px 32px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-float); }
.modal[open] .modal-box { animation: modal-in 320ms var(--bounce); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0 16px; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.modal-x { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; color: var(--text-2); box-shadow: inset 0 0 0 999px var(--hover); transition: --tint var(--dur-in) var(--ease-out); }
.modal-x::before { content: ""; position: absolute; inset: -4px; } /* R18 */
.modal-x:hover { --tint: 10%; color: var(--text); }
.modal-body { max-width: none; padding: 8px 0 0; }
.modal-body > h3:first-child { margin-top: 16px; }
html:has(.modal[open]) { overflow: hidden; }
button.intro-play { cursor: pointer; transition: transform 200ms var(--bounce); }
button.intro-play:hover { transform: scale(1.06); }
button.intro-play:active { transform: scale(.96); } /* R54 */
.langs { display: flex; align-items: center; gap: 4px; margin-left: auto; color: var(--text-3); }
.langs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--text-2); box-shadow: inset 0 0 0 999px var(--hover); transition: --tint var(--dur-in) var(--ease-out); }
.langs a:hover { --tint: 10%; }
.langs a[aria-current] { color: var(--text); font-weight: 600; }

/* Páginas do funil em pôster (campanha/referencias/justyn-ai.md): faixas inteiras alternando estúdio e tela,
   títulos grandes com uma palavra em laranja, números que contam e só material real do curso */
.sec-f { padding-block: 96px; }
.narrow-f { max-width: 816px; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } /* R65 */
.offer .btn { white-space: normal; text-wrap: balance; } /* rótulo longo quebra em vez de alargar a coluna no celular */
.rule { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); }
.rule::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: currentColor; }
.poster-hero { padding-block: 64px 96px; overflow: hidden; }
.hero-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 64px; align-items: center; }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.hero-copy .display, .sec-f .display-2, .final-f .display { text-wrap: balance; } /* R40 */
.hero-media { display: grid; justify-items: center; gap: 32px; }
.hero-media figcaption { color: var(--text-3); text-align: center; text-wrap: balance; }

/* Pacote: o contexto longo rola sem parar; o pedido curto é digitado */
.duel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; }
.duel > .card { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding: 32px; } /* R03 */
.duel .art-head { margin-bottom: 0; }
.duel-short { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.teleprompter { height: 240px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); }
.tp-track { animation: tp 48s linear infinite; will-change: transform; }
.tp-track p { padding-bottom: 32px; font-size: 14px; line-height: 24px; color: var(--text-2); }
@keyframes tp { to { transform: translateY(-50%); } }
.type-line { align-self: center; min-height: 72px; font-size: 28px; line-height: 36px; font-weight: 500; color: var(--accent); overflow-wrap: anywhere; }
.typing::after { content: ""; display: inline-block; width: 2px; height: 28px; margin-left: 4px; vertical-align: -4px; background: currentColor; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.duel-n { display: grid; gap: 4px; }
.duel-n .big-n { font-size: 64px; line-height: 56px; }
.duel-long .big-n { color: var(--text-2); }
.duel-n .mono { color: var(--text-3); }

/* Números grandes em linhas (inventário, passos): contam até o valor ao aparecer */
.stats-big { margin-top: 48px; box-shadow: inset 0 1px 0 var(--line); }
.stats-big > li { display: grid; grid-template-columns: 176px minmax(0, 1fr) auto; gap: 32px; align-items: start; padding-block: 32px; box-shadow: inset 0 -1px 0 var(--line); }
.stats-big > li > div { min-width: 0; display: grid; gap: 8px; padding-top: 12px; }
.big-n { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: 104px; line-height: 88px; letter-spacing: -3px; color: var(--accent); font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips li { padding: 4px 12px; border-radius: 999px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 20px; color: var(--text-2); } /* R21 */
.stamp { align-self: center; padding: 4px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px currentColor; color: var(--accent); white-space: nowrap; transform: rotate(-3deg); transform-origin: 100% 50%; } /* cresce para a esquerda: não abre rolagem lateral */
.js .stats-big:not(.in) .stamp { opacity: 0; transform: rotate(-3deg) scale(1.6); }
.js .stats-big.in .stamp { transition: opacity 200ms var(--ease) calc(var(--d, 0ms) + 480ms), transform 420ms var(--bounce) calc(var(--d, 0ms) + 480ms); } /* carimbo */
.inv-lead { margin-top: 16px; max-width: 640px; }

/* Vitalício: a conversa com o Claude acontece na tela */
.term { width: 100%; max-width: 440px; padding: 24px; }
.term .bubble { font-size: 16px; line-height: 24px; }
.bubble.dots { display: inline-flex; gap: 4px; width: max-content; }
.bubble.dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--text-3); animation: dot 900ms var(--ease) infinite; }
.bubble.dots span:nth-child(2) { animation-delay: 150ms; }
.bubble.dots span:nth-child(3) { animation-delay: 300ms; }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .4; } }
[data-reply] { transition: opacity 300ms var(--ease), transform 400ms var(--bounce); }
.js [data-reply].wait { opacity: 0; transform: translateY(8px); }
.meaning { display: grid; gap: 24px; }

/* Obrigado: colunas de quadros reais do curso, em ângulo, descendo e subindo devagar */
.thanks-hero { padding-top: 0; }
.mosaic { --g: 16px; position: relative; height: 480px; margin-bottom: -128px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 48%, transparent 92%); mask-image: linear-gradient(#000 48%, transparent 92%); }
.mosaic-in { position: absolute; left: 50%; top: -120px; display: flex; gap: var(--g); transform: translateX(-50%) rotate(-6deg); }
.mcol { width: 168px; flex: none; }
.mtrack { display: grid; gap: var(--g); animation: drift var(--dur) linear infinite; will-change: transform; }
.mcol:nth-child(even) .mtrack { animation-direction: reverse; }
@keyframes drift { to { transform: translateY(calc(-50% - var(--g) / 2)); } }
.tile { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #0E0F12; box-shadow: inset 0 0 0 1px var(--line); }
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile figcaption { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 8px; background: rgb(0 0 0 / .64); color: rgb(245 245 245 / .88); max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-center { position: relative; display: grid; justify-items: center; gap: 24px; text-align: center; }
.hero-center .display { max-width: 960px; text-wrap: balance; }
.hero-center .lead { max-width: 640px; text-wrap: balance; }

/* Linha do tempo: o trilho se desenha, o ponto de agora fica laranja */
.timeline { position: relative; display: grid; gap: 40px; padding-left: 48px; margin-block: 16px 8px; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--line-strong); transform-origin: top; }
.js .timeline:not(.in)::before { transform: scaleY(0); }
.js .timeline.in::before { transition: transform 1200ms var(--ease); }
.tl { position: relative; display: grid; gap: 8px; }
.tl::before { content: ""; position: absolute; left: -48px; top: 2px; width: 24px; height: 24px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line-strong); }
.tl.now::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent); }
.tl-when { display: flex; align-items: center; gap: 12px; min-height: 28px; color: var(--text-3); }
.here { padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font: 600 12px/16px var(--font); }

/* Mesma ideia, dois jeitos: os dois vídeos lado a lado */
.pair-sec { display: grid; justify-items: center; gap: 24px; text-align: center; }
.pair-sec .lead { max-width: 640px; text-wrap: balance; }
.pair { display: grid; grid-template-columns: repeat(2, auto); gap: 48px; margin-top: 24px; }
.pair figure { display: grid; justify-items: center; gap: 16px; }
.pair figcaption { color: var(--text-2); }
.pair figure:last-child figcaption { color: var(--accent); }

.final-f .wrap { display: grid; justify-items: center; gap: 24px; text-align: center; }
.final-f .lead { max-width: 640px; text-wrap: balance; }
.final-f .lead a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.final-f strong { font-weight: 600; color: var(--accent); }
.offer { display: grid; gap: 16px; }
.offer .total { display: grid; gap: 4px; margin-top: 8px; }
.offer .checks li { gap: 24px; } /* R05: card 24 */
.founder { color: var(--text-2); font-size: 14px; line-height: 20px; }
.chat { display: grid; gap: 12px; }
/* Upsell: aviso no topo, perguntas curtas e resumo do pedido */
.confirm { display: flex; align-items: flex-start; gap: 16px; font-size: 16px; line-height: 24px; color: var(--text-2); } /* R05: igual a .checks */
.confirm strong { font-weight: 600; color: var(--text); }
.quick-faq { display: grid; gap: 8px; }
.quick-faq .acc > button { padding: 16px 0; }
.offer .checks + .summary { margin-top: 8px; }
.summary dl { box-shadow: inset 0 1px 0 var(--line); }
.summary dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; box-shadow: inset 0 -1px 0 var(--line); }
.summary dt { min-width: 0; } /* R65 */
.summary dd { flex: none; font-size: 14px; line-height: 20px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.chat .art-head { margin-bottom: 4px; }
.bubble { max-width: 80%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 20px; }
.bubble.me { justify-self: end; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.bubble.ai { background: var(--fill); }
.todo { display: grid; gap: 8px; margin-top: 4px; }
.todo li { position: relative; padding-left: 20px; color: var(--text-2); }
.todo li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--text-3); }
.help-line { font-size: 14px; line-height: 20px; color: var(--text-2); text-align: center; text-wrap: balance; } /* R40 */
.help-line a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* R31 + R15: entra ao rolar, em cascata de 60 ms */
.js [data-reveal]:not([data-stagger]), .js [data-stagger] > * { opacity: 0; transform: translateY(16px); }
.js .in[data-reveal]:not([data-stagger]), .js .in[data-stagger] > * { opacity: 1; transform: none; transition: opacity 400ms var(--ease) var(--d, 0ms), transform 600ms var(--bounce) var(--d, 0ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal]:not([data-stagger]), .js [data-stagger] > * { transform: none; }
  *, ::before, ::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; }
}

/* Tablet */
@media (max-width: 1100px) {
  .display { font-size: 64px; line-height: 68px; letter-spacing: -1.25px; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method { gap: 48px; }
}

/* R34: celular */
@media (max-width: 900px) {
  :root { --pad: 16px; --nav-h: 56px; }
  .nav-links { display: none; }
  .nav-in > .btn { margin-left: auto; }
  .display { font-size: 44px; line-height: 48px; letter-spacing: -.75px; }
  .display-2 { font-size: 36px; line-height: 40px; letter-spacing: -.5px; }
  .h3 { font-size: 26px; line-height: 32px; }
  .lead, .body-lg { font-size: 18px; line-height: 28px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 40px; padding-block: 40px 56px; }
  /* Mantenha o texto e os botões do topo estáveis durante o carregamento das fontes. */
  .hero .hero-copy { --font: system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Bricolage Grotesque", var(--font); font-family: var(--font); }
  .monitor { padding: 16px 0; }
  .vf::before { inset: -8px; --l: 16px; }
  .phone { width: 256px; border-radius: 44px; }
  .screen-v { border-radius: 36px; } /* R06 */
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
  .facts dd { font-size: 22px; line-height: 28px; }
  .sec { padding-block: 80px; }
  .method-sec { padding-top: 0; }
  .sec-head { margin-bottom: 40px; }
  .defects { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--pad) * -1); padding: 8px var(--pad); scrollbar-width: none; }
  .defect { scroll-snap-align: center; }
  .method { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .viewer { display: none; }
  .step { min-height: 0; opacity: 1; padding-block: 32px; box-shadow: inset 0 1px 0 var(--line); }
  .art-inline { display: block; margin-top: 12px; padding: 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .method-note { font-size: 22px; line-height: 28px; }
  .case-grid, .cols-3, .stats, .price-grid, .grid-2, .compare { grid-template-columns: minmax(0, 1fr); }
  .case-grid { gap: 32px; }
  .case-card .cp { grid-template-columns: 24px minmax(0, 1fr); }
  .case-card .cp-meta { grid-column: 2; margin-top: -4px; }
  .strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 56%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; }
  .sb { scroll-snap-align: start; }
  .cols-3 { gap: 24px; }
  .stat { font-size: 64px; line-height: 64px; }
  .price-grid { gap: 32px; }
  /* Celular: vídeo em cima do texto, de borda a borda e encostado no topo da seção (−80 = padding da .sec aqui) */
  .pizza { position: relative; inset: auto; margin: -80px calc(var(--pad) * -1) 0; }
  .pizza video { height: auto; aspect-ratio: 3 / 4; mask-image: linear-gradient(#000 72%, transparent); }
  .pizza-msg { bottom: 32%; }
  .price-big > span:first-child { font-size: 64px; line-height: 64px; letter-spacing: -1px; }
  .price-was { font-size: 32px; line-height: 32px; }
  .acc > button { padding: 16px 0; }
  .acc-a { padding: 0 0 16px; }
  .help { flex-wrap: wrap; }
  .help .btn { width: 100%; }
  .langs { margin-left: 0; }
  .sticky-note, .sticky-lead, .board-sm { display: none; }
  .sticky-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "price btn" "urg btn"; column-gap: 12px; }
  .sticky-price { grid-area: price; }
  .sticky-urg { grid-area: urg; margin: 0; }
  .sticky-left { display: block; font-size: 12px; line-height: 16px; color: var(--accent); }
  .sticky-cta .btn { grid-area: btn; }
  .fab { right: 16px; bottom: 16px; }
  .toast { left: 16px; right: 16px; bottom: auto; top: calc(var(--nav-h) + 8px); max-width: none; transform: translateY(-16px); }
  body.sticky-on .toast { bottom: auto; }
}

/* Funil em pôster no celular */
@media (max-width: 900px) {
  .sec-f { padding-block: 64px; }
  .poster-hero { padding-block: 40px 64px; }
  .hero-split, .duel { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .duel { gap: 16px; }
  .duel > .card { padding: 24px; }
  .type-line { min-height: 64px; font-size: 22px; line-height: 32px; }
  .typing::after { height: 22px; }
  .teleprompter { height: 192px; }
  .stats-big { margin-top: 32px; }
  .stats-big > li { grid-template-columns: 72px minmax(0, 1fr); gap: 12px 16px; padding-block: 24px; }
  .stats-big > li > div { padding-top: 4px; }
  .stats-big .stamp { grid-column: 2; justify-self: start; }
  .big-n { font-size: 56px; line-height: 52px; letter-spacing: -1.5px; }
  .duel-n .big-n { font-size: 48px; line-height: 44px; }
  .mosaic { --g: 12px; height: 400px; margin-bottom: -104px; }
  .mosaic-in { top: -80px; }
  .mcol { width: 120px; }
  .tile { border-radius: 12px; }
  .tile figcaption { left: 6px; bottom: 6px; padding: 2px 6px; font-size: 11px; }
  .timeline { padding-left: 40px; gap: 32px; }
  .tl::before { left: -40px; }
  .pair { gap: 16px; }
  .pair .phone { width: 160px; padding: 4px; border-radius: 28px; }
  .pair .screen-v { border-radius: 24px; } /* R06 */
  .offer .btn-primary.btn-lg[data-checkout] { padding-inline: 24px; }
}