/* ==========================================================================
   DESIGN SYSTEM — LP P2P · "1 sistema, N temas" (docs/design-system.md)
   CSS puro com Custom Properties em 3 camadas:
     Camada 1 — primitivos (matéria-prima; inclui DEFAULTS de tema FALHA-FECHADA = TV Pass)
     Camada 2 — semânticos (papéis; é o que os componentes consomem)
     Camada 3 — componente (overrides locais, sempre derivados de semânticos)
   O tema do produto é injetado pelo Worker como um bloco de estilo de marca DEPOIS deste arquivo
   (template.html, slot {{tema}}) → sobrescreve só a paleta de marca. Se a injeção falhar, os
   DEFAULTS abaixo (tema TV Pass, validado §8) seguram texto/CTA/foco legíveis. Nunca falha-aberta.
   Conceito-mãe do motion: CONVERGÊNCIA (§9) — fragmentos dispersos que ASSENTAM num centro.
   ========================================================================== */

/* ==========================================================================
   CAMADA 1 — PRIMITIVOS
   ========================================================================== */
:root {
  /* — Tipografia (famílias) — */
  --ff-display:  'Anton', 'Arial Narrow', system-ui, sans-serif;       /* cartaz duro (kicker/placar curto) */
  --ff-headline: 'Big Shoulders Display', 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif; /* HEADLINE cinema — condensada de cartaz */
  --ff-num:      'Bebas Neue', 'Arial Narrow', system-ui, sans-serif;  /* placar/preço */
  --ff-body:     'Inter', system-ui, -apple-system, Arial, sans-serif; /* corpo/UI */

  /* — Escala tipográfica fluida (mobile→desktop sem media query) — */
  --fs-display: clamp(2.75rem, 11vw, 6rem);
  --fs-h1:      clamp(2.1rem, 7vw, 3.5rem);
  --fs-h2:      clamp(1.6rem, 5vw, 2.6rem);
  --fs-h3:      clamp(1.2rem, 3.5vw, 1.6rem);
  --fs-lead:    clamp(1.05rem, 2.6vw, 1.35rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-caption: .75rem;
  --fs-price:   clamp(3rem, 13vw, 5.5rem);

  /* — Peso / entrelinha / tracking — */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
  --lh-tight: .94; --lh-snug: 1.1; --lh-body: 1.6;
  --tr-display: -.01em; --tr-caps: .06em;

  /* — Espaçamento (escala 4px, ritmo de 8) — */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem;
  --gap-section: clamp(4.5rem, 11vw, 9rem);
  --gap-card: clamp(1rem, 3vw, 1.75rem);

  /* — Raios — */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* — Largura — */
  --container: 1180px; --container-narrow: 760px;

  /* — Sombras NEUTRAS (elevação) — LEGADO, mantidas EXATAS p/ NÃO regredir o visual atual.
     Os componentes ainda consomem --sh-1/2/3; a ONDA 2 migra para a escala --elev-* abaixo.
     Mapa de equivalência (sem mudar pixel): --sh-1≈--elev-1 · --sh-2≈--elev-2 · --sh-3≈--elev-4. */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 8px 24px rgba(0,0,0,.45);
  --sh-3: 0 20px 60px rgba(0,0,0,.55);

  /* — ESCALA DE ELEVAÇÃO --elev-0..5 (plano §1) — par sombra-de-contato (curta/escura) +
     sombra-ambiente (longa/difusa) + halo --accent nos níveis altos (no OLED a sombra preta some;
     a luz própria do tema cria o OBJETO) + inset highlight 1px no topo (borda de luz).
     NÃO consumido ainda — a ONDA 2 troca os --sh-* / box-shadow ad-hoc por estes níveis.
     Halo via --accent-glow (semântico, derivado do tema) → cada tenant carrega o seu sem mexer aqui.
     (custom props resolvem no USO: referenciar --accent-glow da Camada 1 é seguro.) */
  --elev-0: none;                                                        /* assentado: rente à superfície */
  --elev-1:
    0 1px 2px rgba(0,0,0,.40),                                           /* contato */
    inset 0 1px 0 rgba(255,255,255,.05);                                 /* highlight de topo */
  --elev-2:
    0 2px 6px rgba(0,0,0,.42),                                           /* contato */
    0 8px 24px rgba(0,0,0,.45),                                          /* ambiente (= --sh-2) */
    inset 0 1px 0 rgba(255,255,255,.07);                                 /* highlight de topo */
  --elev-3:
    0 4px 10px rgba(0,0,0,.46),                                          /* contato */
    0 14px 40px rgba(0,0,0,.50),                                         /* ambiente */
    0 0 24px var(--accent-glow),                                         /* halo de tema (luz própria no OLED) */
    inset 0 1px 0 rgba(255,255,255,.09);                                 /* highlight de topo */
  --elev-4:
    0 6px 14px rgba(0,0,0,.50),                                          /* contato */
    0 20px 60px rgba(0,0,0,.55),                                         /* ambiente (= --sh-3) */
    0 0 40px var(--accent-glow),                                         /* halo de tema */
    inset 0 1px 0 rgba(255,255,255,.11);                                 /* highlight de topo */
  --elev-5:
    0 10px 22px rgba(0,0,0,.55),                                         /* contato */
    0 32px 90px rgba(0,0,0,.62),                                         /* ambiente */
    0 0 80px var(--accent-glow),                                         /* halo de tema FORTE (clímax/oferta) */
    inset 0 1px 0 rgba(255,255,255,.13);                                 /* highlight de topo */

  /* — Z-INDEX SEMÂNTICO (plano §1) — nomeia os números mágicos atuais (50/55/60 e 1/0) sem mudar
     a ordem de empilhamento real. As camadas ATRÁS do conteúdo do hero (vídeo/aura/scrim) seguem em
     z NEGATIVO local (-1/-2/-3): isso é sub-empilhamento DENTRO do hero (isolation:isolate) e não
     conflita com esta escala. ONDA 2 substitui os literais pelos tokens onde já dá. */
  --z-base:    0;     /* fundo de seção / camadas atmosféricas no fluxo normal */
  --z-raised:  1;     /* conteúdo que assenta acima do fundo da própria seção */
  --z-sticky:  50;    /* header sticky (= z-index:50 atual) */
  --z-overlay: 55;    /* barra de CTA fixa inferior / overlays no fluxo (= 55 atual) */
  --z-float:   60;    /* FAB do WhatsApp e flutuantes acima de tudo (= 60 atual) */

  /* — Cores fixas da identidade (não-tema) — */
  --c-bg: #08070d;
  --c-surface: #13111c;
  --c-surface-2: #1d1a2b;
  --c-surface-3: #221e33;
  --c-line: rgba(255,255,255,.10);
  --c-line-2: rgba(255,255,255,.16);
  --c-white: #ffffff;
  --c-muted: #cfd2e6;
  --c-faint: #8b8ea8;
  --c-gold: #e6c878;  /* champagne sóbrio (croma baixo ~0.10) — lê como dinheiro/prêmio, convive com o teal no OLED sem vibrar; contraste ~12:1 sobre --c-bg p/ preço grande. O escudo .gscene deriva volume via color-mix existente. */
  --c-go: #25d366;
  --c-yes: #2ee6a6;
  --c-no: #ff5d6c;
  --c-alert: #ff6b3d;
  --c-warn: #ffb02e;

  /* — PALETA DE MARCA — DEFAULTS COMPLETOS (FALHA-FECHADA = TV Pass, validado §8) —
     O bloco {{tema}} injetado pelo Worker só SOBRESCREVE estes valores. Se a injeção falhar,
     a página NÃO fica com tokens vazios → texto/CTA/foco continuam LEGÍVEIS. */
  --brand:       #01a875;
  --brand-2:     #00f0a7;
  --brand-ink:   #000000;                 /* texto sobre o CTA (maior contraste) */
  --brand-text:  #01a875;                 /* texto pequeno colorido (passa AA sobre --c-bg) */
  --brand-soft:  rgba(1,168,117,.12);     /* fundo chip/FAQ aberto */
  --brand-glow:  rgba(1,168,117,.35);     /* sombra colorida do tema */
  --brand-focus: #01a875;                 /* anel de foco (≥3:1 em todos os temas) */

  /* — Motion — */
  /* tier rápido cabeado (plano §1): --d-fast já existia (0 usos) — agora documentado p/ a ONDA 2 usar
     em micro-interações; --d-micro é o degrau MAIS curto (press/feedback tátil instantâneo). */
  --d-micro: 90ms;
  --d-fast: 140ms; --d-base: 240ms; --d-slow: 420ms; --d-cinema: 900ms;
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-spring: cubic-bezier(.34,1.56,.64,1);
  --e-inout: cubic-bezier(.65,.05,.36,1);
  /* easings do tier rápido (plano §1):
     --e-press = saída quase-linear, decisiva, p/ o "afundar" do :active (sem overshoot);
     --e-emphasized = aceleração assimétrica (Material emphasized) p/ entradas/lift com presença. */
  --e-press:      cubic-bezier(.3,0,.45,1);
  --e-emphasized: cubic-bezier(.2,0,0,1);

  /* — LIFT / PRESS / FOCO (plano §1) — deltas canônicos da micro-interação. NÃO aplicados ainda;
     a ONDA 2 cabea .fx-lift/.fx-press/.fx-focus nestes tokens (o componente NUNCA improvisa o delta). */
  --lift-sm: -2px;     /* subida sutil no hover/focus (chips, links, planos) */
  --lift-md: -6px;     /* subida de card "objeto pousado" (dor/nicho/catálogo/vídeo) */
  --press:   .97;      /* scale do :active — "afundou" sob o dedo (tira o medo de golpe) */
  /* anel de foco PRONTO (box-shadow) p/ reuso direto — usa --focus-ring (cor semântica, ≥3:1).
     Mantém o :focus-visible global (outline) como está; este é o equivalente em sombra p/ cards. */
  --focus-ring-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);

  /* — RITMO VERTICAL (plano §1) — cadência por ATO (mata o padding 112/112 idêntico das 15 seções).
     A ONDA 2/4 varia o respiro: PROBLEMA comprimido (tight) → SOLUÇÃO/PROVA amplos (open/xl).
     Base = o --gap-section atual (não regride o ritmo médio de hoje). */
  --rhythm-tight: clamp(2.25rem, 6vw, 4rem);    /* Ato 1 frio/comprimido */
  --rhythm-base:  var(--gap-section);            /* cadência padrão (= hoje) */
  --rhythm-open:  clamp(4.5rem, 11vw, 8.5rem);   /* Ato 2/3 amplos/iluminados */
  --rhythm-xl:    clamp(6rem, 14vw, 11rem);      /* clímax / boundary de ato */
}

/* ==========================================================================
   CAMADA 2 — SEMÂNTICOS (papéis — é o que os componentes consomem)
   ========================================================================== */
:root {
  /* superfícies & texto */
  --bg:            var(--c-bg);
  --surface:       var(--c-surface);
  --surface-elev:  var(--c-surface-2);
  --surface-hover: var(--c-surface-3);
  --fg:            var(--c-white);
  --fg-muted:      var(--c-muted);
  --fg-faint:      var(--c-faint);
  --border:        var(--c-line);
  --border-strong: var(--c-line-2);

  /* MARCA — papel semântico (tudo que "pinta de tema" aponta aqui) */
  --accent:      var(--brand);
  --accent-2:    var(--brand-2);
  --accent-soft: var(--brand-soft);
  --accent-glow: var(--brand-glow);

  /* AURA / profundidade do hero — DERIVADA do tema (ambas vêm da cor do tenant) */
  --aura-1: var(--accent-glow);
  --aura-2: color-mix(in oklab, var(--accent-2) 30%, var(--c-bg));

  /* VALOR / CONFIANÇA / ESTADOS (não-tema) */
  --value: var(--c-gold);
  --whats: var(--c-go);
  --ok:    var(--c-yes);
  --bad:   var(--c-no);
  --pain:  var(--c-alert);

  /* CTA — foreground calculado por tema (§8) */
  --cta-bg:   var(--brand);
  --cta-fg:   var(--brand-ink);
  --cta-glow: var(--brand-glow);

  /* texto-de-acento seguro (variante prim/sec validada por tema) */
  --accent-text: var(--brand-text);

  /* estados de interação derivados (o componente NUNCA improvisa o delta) */
  --accent-hover: color-mix(in oklab, var(--accent) 86%, white);
  --accent-press: color-mix(in oklab, var(--accent) 80%, black);

  /* FOCO ACESSÍVEL — usa --brand-focus (≥3:1), nunca --brand-2 cru */
  --focus-ring: var(--brand-focus);
}

/* ==========================================================================
   RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* FUNDO ATMOSFÉRICO GLOBAL (decisão do dono: os halos por-bloco cortavam na emenda das seções). Uma
   camada FIXA atrás de TUDO, com auras de tema que DERIVAM lentamente — contínua na página inteira, sem
   corte entre blocos. position:fixed → cobre a viewport e acompanha o scroll (atmosfera viva, não manchas).
   z-index:-1 fica atrás do conteúdo; só transform/opacity animam → 60fps, custo zero de layout. */
body::before {
  content: ""; position: fixed; inset: -20vh -10vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 18% 22%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 60%),
    radial-gradient(42vw 42vw at 85% 68%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 62%),
    radial-gradient(50vw 50vw at 50% 110%, color-mix(in oklab, var(--accent-2, var(--accent)) 6%, transparent), transparent 60%);
  filter: blur(20px);
  animation: pageAura 26s var(--e-inout, ease-in-out) infinite alternate;
  will-change: transform;
}
@keyframes pageAura {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 1%, 0) scale(1.04); }
}
/* CURSOR SPOTLIGHT — luz na cor do tema que segue o mouse (JS cria o elemento e move via GSAP). Fixo,
   atrás do conteúdo (junto do fundo atmosférico), pointer-events:none. translate(-50%,-50%) centra a luz
   no ponto do cursor (o JS escreve left/top = posição do cursor). Só aparece no desktop (pointer fino). */
.cursor-spot {
  position: fixed; z-index: -1; width: 60vmax; height: 60vmax; left: 50%; top: 50%;
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%);
  filter: blur(40px);
  will-change: left, top, opacity;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0 0 .5em; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--accent); color: var(--cta-fg); }

/* `.lp` é o contexto de posicionamento da CAMADA AMBIENTE (`.ambient`, absolute). relative sem offset
   não muda layout. */
.lp { display: block; position: relative; }
/* O conteúdo (todo filho direto de `.lp`, menos a camada ambiente) paga ACIMA dos ícones de fundo:
   z-index:1 sobre a camada (z-index:0). relative garante que o z-index pegue mesmo em filho que estava
   estático (sem offset = sem deslocamento visual). O hero já é isolado (isolation:isolate) — fica acima
   de qualquer jeito; este guard cobre os demais blocos sem precisar tocar cada um.
   EXCEÇÃO: o header é position:sticky — NÃO sobrescrever a posição dele (só garantir z-index alto, que
   ele já tem via --z-sticky); por isso o `:not(.site-header)`. */
.lp > :not(.ambient):not(.site-header) { position: relative; z-index: 1; }

/* ── CAMADA AMBIENTE (textura "mundo de cinema") ────────────────────────────────────────────────
   Atmosfera de ícones GRANDES e MUITO sutis (teal) flutuando ATRÁS de todo o conteúdo, MENOS o hero.
   Decisão do dono: decorativa, não compete com o texto, não cobre o hero. Markup: 1 `<div class="ambient">`
   emitido 1x como 1º filho de `.lp` (renderAmbientLayer em blocks.ts), com N `.ambient-ico` (SVG duotone
   reusado do vocabulário aprovado, currentColor=teal). HOOKS p/ o MOTION: cada `.ambient-ico` é um alvo
   individual (GSAP faz cada um flutuar devagar a partir de left/top + --r). Custo zero de layout. */
.ambient {
  position: absolute;
  /* começa SÓ depois da 1ª dobra → NÃO cobre o hero (o hero ocupa ~100svh). left/right/bottom colam no
     resto da página; height fica implícito (até o fim de `.lp`). pointer-events:none = não-interativo. */
  inset: 0;
  top: 100svh;
  z-index: 0;            /* acima do fundo atmosférico fixo (body::before, z:-1) e ABAIXO do conteúdo (z:1) */
  overflow: hidden;      /* ícones perto da borda não geram scroll horizontal */
  pointer-events: none;
  /* máscara vertical: a textura nasce e morre em fade nas pontas (não "começa do nada" no fim do hero
     nem "corta seco" no rodapé) — transição suave entre dobra-do-hero e o corpo da página. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ambient-ico {
  position: absolute;
  width: var(--s, 120px);
  height: var(--s, 120px);
  color: var(--accent);
  /* SUTILEZA: opacidade baixíssima — é textura/atmosfera, jamais ilustração que disputa com o texto. */
  opacity: .05;
  transform: translate3d(-50%, -50%, 0) rotate(var(--r, 0deg));
  will-change: transform;        /* pronto p/ o motion (GSAP) animar transform sem repaint de layout */
  /* leve drift autônomo (vivo mesmo antes do GSAP / quando o motion não bootar). O motion pode assumir
     via `html.gsap-on .ambient-ico { animation: none }` e dirigir por GSAP. --d dessincroniza cada ícone. */
  animation: ambientFloat 22s var(--e-inout, ease-in-out) calc(var(--d, 0s) * -1) infinite alternate;
}
.ambient-ico svg { width: 100%; height: 100%; display: block; }
@keyframes ambientFloat {
  0%   { transform: translate3d(-50%, -50%, 0) rotate(var(--r, 0deg)); }
  100% { transform: translate3d(-50%, calc(-50% - 26px), 0) rotate(calc(var(--r, 0deg) + 4deg)); }
}
@media (max-width: 600px) {
  /* mobile: textura ainda mais discreta e ícones menores (tela apertada, performance) — sem sumir. */
  .ambient-ico { opacity: .04; width: calc(var(--s, 120px) * .7); height: calc(var(--s, 120px) * .7); }
}
/* reduce-motion (cenário do dono): a textura PERMANECE (é estática por natureza), só o drift autônomo
   para — coerente com a régua "reduce suaviza, não desliga". O motion da dupla seguirá a mesma regra. */
@media (prefers-reduced-motion: reduce) {
  .ambient-ico { animation: none; }
}

/* Container utilitário (consumido por blocos `... container`) */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.container--narrow { max-width: var(--container-narrow); }

/* Toda <section ... class="section ..."> herda o respiro generoso entre blocos */
.section { padding-block: var(--gap-section); }
.section--alt { background: linear-gradient(180deg, transparent, rgba(255,255,255,.015)); }
/* DIVISÓRIA ELEGANTE entre blocos: hairline transparente→teal(centro)→transparente, no topo de cada
   seção que segue outra. Estreita e centrada (não corre de ponta a ponta), com brilho suave que respira.
   relative+z p/ ficar acima da camada ambiente. */
/* usa ::after (o ::before de várias seções já carrega a aura — não conflitar). top:0 põe a linha no TOPO. */
.section + .section { position: relative; }
.section + .section::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(420px, 62%); height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 70%, transparent) 50%, transparent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 30%, transparent);
  animation: dividerGlow 6s var(--e-inout, ease-in-out) infinite alternate;
}
@keyframes dividerGlow { from { opacity: .5; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .section + .section::after { animation: none; opacity: .7; } }
/* a primeira seção depois do hero NÃO leva divisória (a transição hero→conteúdo já é marcada). */
.hero + .section::after { display: none; }

/* Título e kicker de seção (ritmo editorial) */
.section__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: 1.32;   /* respiro AMPLO: fonte cartaz caixa alta + barra-base + efeito "cai" (barra que escorrega) somam; 1.08/1.22 ainda encavalavam no mobile */
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  text-wrap: balance;
}

/* ==========================================================================
   TIPOGRAFIA — hierarquia de cartaz (Anton/Bebas/Inter)
   ========================================================================== */
/* HEADLINE EDITORIAL (decisão do dono — item 3): display de peso MÉDIO, NÃO black/condensada.
   Bricolage Grotesque (peso 600) — aberta, com personalidade, "editorial de estúdio". O Anton
   (grito barato) saiu da headline. Caixa MISTA (não all-caps) reforça o ar editorial; o "wow"
   vem do CONTRASTE com o <em>-chave, não do peso geral. lh um pouco mais solta que o cartaz duro. */
.hero__title {
  font-family: var(--ff-headline);
  /* item 3: entorno em 500 (médio) p/ ABRIR o delta de peso contra o <em> 800 — dois pesos DIALOGAM
     ("MIX display médio + trecho-chave forte"), não só uma palavra colorida. O 500 mantém presença
     sobre o vídeo via text-shadow de cartaz (abaixo) + a cor branca. (Era 600.) */
  /* Big Shoulders é CONDENSADA → pede peso ALTO (700) p/ presença de cartaz, e o <em> vai a 900.
     Condensada cabe mais por linha → pode crescer (teto maior) sem estourar. */
  font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 5.8rem);
  font-optical-sizing: auto;                         /* opsz da variable → contraste premium em tamanho grande */
  line-height: 1.0;                                  /* mais aberta que o .94 do Anton (respira) */
  letter-spacing: -.018em;                           /* aperto óptico de display, sutil */
  text-wrap: balance;
  margin: 0;
  /* sobre o vídeo: sombra de cartaz curta p/ a headline branca cravar o contraste AA em qualquer frame */
  text-shadow: 0 2px 18px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.55);
}
/* palavra-chave do benefício: o "salto" é por CONTRASTE — peso EXTRA-BOLD (800) contra o entorno
   leve (500) + cor de marca segura. UM único realce gráfico (item 2): uma barra-base fina e limpa
   que desenha da esquerda no reveal — "palavra-chave editorial", não marca-texto de PowerPoint.
   Sem wash de vidro e SEM glow forte (matamos o triplo-teal: cor + wash + barra+glow). */
.hero__title em,
.section__title em {
  font-style: normal;
  font-weight: 900;                                  /* 900 (condensada) contra o 700 do entorno: contraste forte */
  color: var(--accent-text);
  position: relative;
  white-space: nowrap;
  /* leve respiro lateral p/ o realce não colar nas palavras vizinhas */
  padding: 0 .04em;
  /* BLINDAGEM DE CONTRASTE (par-review): a palavra-chave é TEAL — sozinha só passa AA no canto escuro
     do scrim; um frame CLARO do vídeo atrás dela quebraria a leitura. Sombra escura PRÓPRIA e curta
     (além da sombra de cartaz da headline) crava o teal sobre QUALQUER frame, sem mudar a cor de marca. */
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.55);
}
/* UM realce só: barra-base FINA e limpa (sem wash atrás do texto, sem glow). O <em>::before
   (wash de vidro) foi REMOVIDO — um gesto forte, não três. A barra desenha da esquerda no reveal
   via --em-underline (intacto p/ o GSAP). Glow exagerado eliminado: leitura "editorial", elegante. */
.hero__title em::after,
.section__title em::after {
  content: "";
  position: absolute;
  left: -.02em; right: -.02em; bottom: -.04em;
  height: .08em;                                      /* fina (era .14em) — sublinhado de palavra-chave, não marcador */
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: var(--r-pill);
  transform: scaleX(var(--em-underline, 1));
  transform-origin: left center;
  /* sem box-shadow/glow forte — só uma sombra mínima p/ a barra cravar sobre o vídeo claro */
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  /* transição suave da barra no fallback sem GSAP (e em reduce) — o JS sobrepõe quando há GSAP. */
  transition: transform var(--d-cinema, .6s) var(--e-out, ease);
}

/* reveal por palavra (§9): o JS fatia a headline em .word > .word__i. O .word é uma máscara
   (overflow:hidden) e o filho desliza de baixo (yPercent) → efeito "mask reveal" por palavra.
   Sem JS, .word nem existe → a headline é texto normal (LCP visível antes do motion).
   FIX item 3: com line-height .94 (cartaz) o acento das MAIÚSCULAS ("Ó" de "SÓ") fica ACIMA da
   altura de caixa e era CORTADO pela máscara (overflow:hidden) → parecia "SO" sem acento. Damos
   respiro no TOPO da máscara (padding-top) e puxamos o filho de volta (margin-top negativo igual),
   sem mexer no slide por yPercent do GSAP (transform relativo, intacto). */
/* a mesma máscara vale p/ o título do CTA final (.closing__title) — reveal por palavra que ECOA o
   hero (fecha o arco com a abertura). Mesmas regras de respiro do acento (padding/margin). */
.hero__title .word, .closing__title .word { display: inline-block; overflow: hidden; vertical-align: top; padding-top: .18em; padding-bottom: .08em; }
.hero__title .word__i, .closing__title .word__i { display: inline-block; margin-top: -.18em; will-change: transform; }
.hero__title .word--em, .closing__title .word--em { overflow: visible; } /* deixa o sublinhado-bloco do <em> respirar */

/* ==========================================================================
   CAMADA 3 — COMPONENTE: BOTÃO / CTA
   ========================================================================== */
.btn {
  --btn-bg: var(--cta-bg);
  --btn-fg: var(--cta-fg);
  --btn-glow: var(--cta-glow);
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: .9rem 1.9rem;
  /* borda viva (anel de tema + linha clara no topo) p/ o CTA CRAVAR contra o vídeo claro (item 4):
     não mais "verde lavado" — tem contorno e definição em qualquer frame. */
  border: 0;
  border-radius: var(--r-sm);  /* cinema/streaming: cantos firmes (não pílula arredondada) */
  /* gradiente mais PROFUNDO e saturado (topo realçado, base escurecida) → volume real, não chapado. */
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--btn-bg) 78%, white) 0%,
    var(--btn-bg) 52%,
    color-mix(in oklab, var(--btn-bg) 82%, black) 100%);
  color: var(--btn-fg);
  font-family: var(--ff-body);
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  /* glow do tema MAIS presente + anel claro + halo escuro p/ destacar do fundo claro do vídeo. */
  box-shadow:
    0 8px 26px var(--btn-glow),
    0 0 0 1px color-mix(in oklab, var(--btn-bg) 70%, black),
    0 2px 0 0 rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.30);
  transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-out);
  will-change: transform;
}
/* hierarquia LABEL × SUBTEXTO (item 4): o label cresce e fica mais forte; o subtexto recua,
   separado por uma linha fina (não dois textos colados). Lê "aperta em mim" no 1º olhar. */
.btn { font-size: 1.12rem; letter-spacing: .005em; }
.btn__sub {
  font-weight: var(--fw-semibold); font-size: var(--fs-small); line-height: 1.2;
  margin-top: 3px; padding-top: 4px; opacity: .92;
  border-top: 1px solid color-mix(in oklab, var(--btn-fg) 22%, transparent);
}
/* sheen diagonal — microinteração-assinatura */
.btn::before {
  content: "";
  position: absolute;
  top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}
/* hover: sobe com mola, o glow do tema CRESCE e o anel ganha brilho (mantém contorno + ganha vida). */
.btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 16px 40px var(--btn-glow),
    0 0 0 1px color-mix(in oklab, var(--btn-bg) 60%, white),
    0 0 26px color-mix(in oklab, var(--btn-bg) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.34);
}
.btn:hover::before { animation: sheen .65s var(--e-out) forwards; }
.btn:active { transform: scale(.97); }
@keyframes sheen { from { opacity: 0; transform: skewX(-18deg) translateX(0); } 30% { opacity: 1; } to { opacity: 0; transform: skewX(-18deg) translateX(420%); } }

.btn--whats, .btn--go {
  --btn-bg: var(--whats);
  --btn-fg: #06231a;
  --btn-glow: rgba(37,211,102,.4);
}
.btn--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* pulse lento do glow — só no CTA primário do hero/oferta */
.btn--pulse { animation: btnPulse 2.4s var(--e-inout) infinite; }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 6px 22px var(--btn-glow), inset 0 1px 0 rgba(255,255,255,.18); }
  50% { box-shadow: 0 10px 30px var(--accent-glow), 0 0 0 6px color-mix(in oklab, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.22); }
}

/* link secundário (WhatsApp/ver mais) */
.howto__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
  padding: .5rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--e-out);
}
.howto__link:hover { border-color: currentColor; }

/* ==========================================================================
   HEADER STICKY
   ========================================================================== */
/* A BARRA é full-bleed (sticky bar: fundo/blur/borda de ponta a ponta). O CONTEÚDO assenta no MESMO
   container/grid do resto da página (item 1) via .site-header__inner. Estado `scrolled` mais refinado:
   a barra adensa o fundo + ganha hairline de marca + sombra, dando sensação de "produto sério". */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* hairline de marca SEMPRE no topo da barra (acabamento premium, item 3) — quase imperceptível
     parado, ancora a identidade. A borda inferior só aparece no scroll. */
  border-top: 2px solid color-mix(in oklab, var(--accent) 55%, transparent);
  border-bottom: 1px solid transparent;
  /* PISO DE LEGIBILIDADE no estado inicial (sobre o TOPO do vídeo, antes do scroll): além do tom
     translúcido (82% — sobe de 74% p/ não cair abaixo de AA num frame CLARO do vídeo), um scrim
     vertical de reforço (mais denso em cima, onde mora o wordmark/CTA). O blur sozinho NÃO garante
     contraste. is-scrolled adensa ainda mais. */
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.12)),
    color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  transition: background var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}
.site-header.is-scrolled {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  border-bottom-color: var(--border);
  box-shadow: var(--sh-1), 0 10px 30px rgba(0,0,0,.28);
}
/* CONTEÚDO alinhado ao grid (.container dá max-width + padding lateral idênticos ao hero). Altura de
   produto: respiro vertical consistente, hierarquia clara logo↔CTA. */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 68px;
  padding-block: .55rem;
}
/* LOGO = ícone da marca própria + wordmark (item 4). Alinhamento óptico elegante: ícone e wordmark
   na mesma linha de base, gap medido. margin-right:auto empurra o CTA p/ a direita. */
.site-header__logo { display: inline-flex; align-items: center; gap: .55rem; margin-right: auto; min-width: 0; }
.site-header__icon {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-sm);
  object-fit: contain;
  /* halo sutil de marca atrás do ícone → "selo", não imagem solta colada no texto */
  filter: drop-shadow(0 1px 5px color-mix(in oklab, var(--accent) 45%, transparent));
}
.site-header__name { font-family: var(--ff-display); font-size: 1.5rem; line-height: 1; text-transform: uppercase; letter-spacing: var(--tr-display); white-space: nowrap; }
.site-header__seal { font-size: var(--fs-caption); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-muted); display: inline-flex; align-items: center; gap: .35rem; }
.site-header__seal::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--value); box-shadow: 0 0 8px var(--value); }
/* ações do header: badge de oferta + CTA, agrupados à direita. */
.site-header__actions { display: inline-flex; align-items: center; gap: .8rem; }
/* BADGE DE OFERTA no header (decisão do dono: saiu do hero). Pílula viva com ponto pulsante. */
.site-header__offer {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .9rem; border-radius: var(--r-sm);
  font-family: var(--ff-num, inherit); font-size: .82rem; font-weight: var(--fw-bold);
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  color: var(--accent-2);
  background: color-mix(in oklab, var(--bg) 64%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 18px color-mix(in oklab, var(--accent) 22%, transparent);
}
.site-header__offer::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--accent-2); box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-2) 70%, transparent);
  animation: livePulse 2s var(--e-out) infinite;
}
@media (max-width: 760px) { .site-header__offer { display: none; } }  /* mobile: só logo + CTA (espaço) */
.site-header__cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.25rem;
  border-radius: var(--r-sm);  /* cinema: cantos firmes, igual ao CTA principal */
  background: var(--cta-bg); color: var(--cta-fg);
  font-weight: var(--fw-bold); font-size: .95rem;
  letter-spacing: .01em;
  /* acabamento premium do CTA: glow de marca + highlight interno (volume), não botão chapado */
  box-shadow: 0 4px 16px var(--cta-glow), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-out);
  white-space: nowrap;
}
.site-header__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--cta-glow), inset 0 1px 0 rgba(255,255,255,.30); }
@media (max-width: 560px) {
  .site-header__seal { display: none; }
  /* mobile impecável: altura um pouco menor, wordmark e CTA proporcionais, sem aperto */
  .site-header__inner { min-height: 60px; }
  .site-header__name { font-size: 1.3rem; }
  .site-header__icon { width: 28px; height: 28px; }
  .site-header__cta { padding: .5rem 1rem; font-size: .9rem; }
}

/* ícone WhatsApp como data-uri (mask) — SVG inline, zero font-icon */
:root { --ico-wa: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 0 0-8.6 15l-1.4 5 5.1-1.3A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-1.7-.1-.4-.1-.9-.3-1.6-.6-2.8-1.2-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.8 0-1.3.7-2 .9-2.2.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .5l-.4.5c-.1.2-.3.3-.1.6.1.3.7 1.1 1.4 1.7.9.8 1.7 1.1 2 1.2.2.1.4.1.5-.1l.7-.8c.2-.2.3-.2.6-.1l1.9.9c.2.1.4.2.5.3.1.1.1.6-.1 1.2Z"/></svg>'); }

/* ==========================================================================
   HERO + AURA + MÍDIA + CONVERGÊNCIA
   ========================================================================== */
.hero {
  --hero-aura-1: var(--aura-1);
  --hero-aura-2: var(--aura-2);
  position: relative;
  /* ARRANJO DE PÔSTER CINEMA (redesign "parede de pôsters"): o bloco-título ASSENTA na base-esquerda
     (cartaz de cinema) sobre a PAREDE DE CAPAS REAIS escurecida; a AURA viva + os logos de streaming
     flutuam ao redor. Padding assimétrico: pouco em cima, generoso embaixo (margem de pôster). */
  padding-block: clamp(1.25rem, 4vw, 2rem) clamp(2rem, 6vw, 3.5rem);
  /* fundo OLED com um leve degradê de profundidade (a parede + aura entram por cima). NUNCA apagado. */
  background:
    radial-gradient(140% 100% at 80% 0%, color-mix(in oklab, var(--accent) 5%, var(--bg)), var(--bg) 60%),
    var(--bg);
  /* hero OCUPA a dobra inteira menos o header fixo (~64px) → o conteúdo centralizado usa TODA a altura
     útil e os gaps (eyebrow/título/CTA) respiram de verdade, sem espaço ocioso embaixo. svh = barra do
     mobile descontada. Teto p/ não esticar demais em telas altas/desktop largo. */
  min-height: min(calc(100svh - 64px), 860px);
  display: flex;
  align-items: center;          /* bloco de texto centralizado na vertical (decisão do dono) */
  justify-content: center;      /* e na horizontal */
  isolation: isolate;
  overflow: hidden;
}

/* ---- PAREDE DE PÔSTERS (redesign "cinema/streaming", decisão do dono) ------------------------
   O fundo do hero é um MOSAICO de CAPAS REAIS de catálogo (vibe streaming premium) — substitui o
   OLED-vazio-com-ícones-soltos que foi reprovado. 3 colunas de capas 2:3 que driftam em parallax
   leve (JS), escurecidas por um VÉU forte (gradiente + vinheta) p/ o texto ficar AA legível.
   Camada -3 (mais ao fundo); aura -1 e conteúdo +1 entram por cima. */
.hero__wall {
  position: absolute; inset: -12% -6%;
  z-index: -3;
  pointer-events: none;
  display: flex;                         /* colunas lado a lado, largura FIXA (não 1/3 da tela = capa gigante) */
  justify-content: center;
  gap: clamp(.5rem, 1vw, .9rem);
  /* leve inclinação cinematográfica → a parede "corre" em diagonal, não um grid chapado de catálogo */
  transform: rotate(-4deg) scale(1.12);
  transform-origin: 50% 50%;
  opacity: .9;
}
.hero__wall-col {
  display: flex; flex-direction: column;
  flex: 0 0 clamp(120px, 13vw, 168px);   /* capa PEQUENA → mosaico denso de muitas capas, não 1 esticada */
  gap: clamp(.5rem, 1vw, .9rem);
  will-change: transform;
}
/* colunas começam deslocadas em alturas diferentes → o mosaico não alinha em "linhas" (quebra o ar
   de planilha e dá o ar de parede de catálogo "viva"). */
.hero__wall-col[data-wall-col="0"] { margin-top: -2%; }
.hero__wall-col[data-wall-col="1"] { margin-top: -9%; }
.hero__wall-col[data-wall-col="2"] { margin-top: -4%; }
.hero__wall-col[data-wall-col="3"] { margin-top: -11%; }
.hero__wall-col[data-wall-col="4"] { margin-top: -5%; }
.hero__wall-col[data-wall-col="5"] { margin-top: -8%; }
.hero__poster {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  /* cada capa tem leve profundidade (não chapada na parede) — sombra de contato + recorte de luz */
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  /* dessatura/escurece um tris já na capa → o véu por cima fecha o contraste sem matar a cor */
  filter: saturate(.92) brightness(.82);
}
/* VÉU: o overlay forte que garante o contraste AA do texto sobre a parede. Mais denso na base-esq
   (onde mora a coluna do título) e no rodapé; deixa a parede "respirar" no topo-direita. Sobre a
   parede (z -2), abaixo da aura (-1) e do conteúdo (+1). É a peça que torna a parede LEGÍVEL. */
.hero__wall-veil {
  position: absolute; inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* coluna do título (base-esquerda) blindada p/ AA — densa e indo mais à direita, pq a headline
       (com o <em> "num lugar só") avança até ~75% e cairia sobre capa clara/colorida. */
    linear-gradient(100deg, var(--bg) 10%, color-mix(in oklab, var(--bg) 90%, transparent) 46%, color-mix(in oklab, var(--bg) 50%, transparent) 70%, transparent 86%),
    /* piso escuro (assenta o CTA/micro) + teto leve (header) */
    linear-gradient(0deg, var(--bg) 2%, color-mix(in oklab, var(--bg) 60%, transparent) 26%, transparent 58%),
    linear-gradient(180deg, color-mix(in oklab, var(--bg) 55%, transparent), transparent 22%),
    /* véu OLED geral + tinta de marca sutil (não vira azul/verde chapado, só "assina" a luz) */
    radial-gradient(120% 100% at 18% 86%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 55%),
    color-mix(in oklab, var(--bg) 46%, transparent);
}
/* MOBILE: a coluna do título é full-width → a parede vira PANO DE FUNDO de cima (a vibe streaming) e o
   véu fecha o terço inferior p/ a headline+CTA lerem AA. 2 colunas bastam (3 ficam estreitas demais). */
@media (max-width: 760px) {
  .hero__wall {
    transform: rotate(-5deg) scale(1.3);
    inset: -12% -14%;
    opacity: .8;
    justify-content: flex-start;
  }
  .hero__wall-col { flex-basis: clamp(96px, 30vw, 120px); }  /* mobile: capas menores, ~3 colunas visíveis */
  .hero__wall-col[data-wall-col="4"], .hero__wall-col[data-wall-col="5"] { display: none; }  /* 4 colunas bastam no mobile */
  .hero__wall-veil {
    /* no mobile o texto mora embaixo: piso MUITO mais denso (assenta a headline/CTA), topo aberto p/ a
       parede aparecer. Sem o gradiente lateral forte (que no desktop blinda a coluna esquerda). */
    background:
      linear-gradient(0deg, var(--bg) 12%, color-mix(in oklab, var(--bg) 78%, transparent) 44%, color-mix(in oklab, var(--bg) 30%, transparent) 70%, transparent 92%),
      linear-gradient(180deg, color-mix(in oklab, var(--bg) 50%, transparent), transparent 26%),
      radial-gradient(120% 90% at 50% 92%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 56%),
      color-mix(in oklab, var(--bg) 40%, transparent);
  }
}
/* REDUCE-MOTION: a parede não recebe o drift de scroll (o JS já corta o scrub em reduce); aqui só
   garantimos que ela fique estática e calma (sem will-change vivo à toa). */
@media (prefers-reduced-motion: reduce) {
  .hero__wall-col { will-change: auto; }
}

/* o bloco logo após o hero respira (mantém o "espiar" da dobra, mas sem grudar no hero) */
.hero + .section { padding-top: clamp(3rem, 7vw, 5rem); }

/* ---- COSTURA HERO→CONTEÚDO (dissolve, não corte) ----------------------------------------------
   O dono via uma LINHA DE CORTE: a parede/aura do hero terminavam de chão (overflow:hidden) e o
   OLED do conteúdo começava de supetão. Aqui dissolvemos o rodapé do hero NO MESMO --bg do
   conteúdo: um véu transparent→--bg ancorado na base do hero, ACIMA da parede/aura/véu (z 0) e
   ABAIXO do .hero__inner (z 1) → texto/CTA/logos intactos, só o FUNDO some por baixo deles.
   Estático (gradiente): vale igual em reduce-motion. Só pinta um gradiente → custo zero de runtime. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* banda generosa: o vídeo/parede já está ~invisível bem antes da borda → o olho não acha o fim */
  height: clamp(120px, 22vh, 240px);
  z-index: 0;                 /* sobre wall(-3)/veil(-2)/aura(-1); sob o conteúdo (.hero__inner z 1) */
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklab, var(--bg) 55%, transparent) 46%,
    var(--bg) 92%);
}
/* a faixa de logos (1º bloco logo após o hero) SOBE um tris e perde a borda-dura de topo: o OLED
   dela encosta no rodapé já-dissolvido do hero → as duas camadas de --bg se fundem, sem fio de corte.
   O fio de luz de marca migra do topo (borda dura) para um gradiente suave embutido no próprio fundo. */
.hero + .logos-band {
  margin-top: clamp(-72px, -8vh, -44px);   /* puxa o OLED por cima do fim dissolvido do hero */
  border-top: 0;                            /* remove a LINHA dura que marcava o corte */
  position: relative; z-index: 1;           /* a band assenta acima do véu do hero */
  /* o fundo da band ganha um topo --bg sólido (continua o OLED do hero) + os fios de luz que já tinha */
  background:
    linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 50%, transparent) 18%, transparent 40%),
    linear-gradient(180deg, color-mix(in oklab, var(--fg) 4%, transparent), transparent 42%),
    linear-gradient(0deg, color-mix(in oklab, var(--accent) 7%, transparent), transparent 30%);
  /* compensa a subida: o respiro interno cresce p/ a faixa não colar no rodapé do hero */
  padding-top: calc(clamp(2rem, 4.4vw, 3.2rem) + clamp(44px, 8vh, 72px));
}
/* FALLBACK (variante de hero SEM faixa de logos): o 1º bloco é .section direto → mesma costura,
   sobe um tris sobre o rodapé dissolvido do hero (sem o ajuste de background da band). */
.hero + .section {
  margin-top: clamp(-72px, -8vh, -44px);
  position: relative; z-index: 1;
  padding-top: calc(clamp(3rem, 7vw, 5rem) + clamp(44px, 8vh, 72px));
}

/* ---- FUNDO SEM VÍDEO: "O PONTO DE CONVERGÊNCIA" (redesign §5) --------------------------------
   Sem <video> de fundo (some a fonte do CLS): a profundidade vem do OLED + da AURA RADIAL do
   --accent (luz própria, centro de gravidade do conceito junto ao título) + dos estilhaços que
   convergem no load. A aura RESPIRA (breathing) p/ o hero nunca ficar estático — é um corpo vivo
   de luz, não um gradiente parado. Camada -1, atrás do conteúdo (z-index:1 no .hero__inner). */
.hero__aura {
  position: absolute;
  inset: -22% -12% -12% -14%;
  z-index: -1;
  pointer-events: none;
  /* núcleo FORTE (a marca) na base-esquerda, atrás do bloco-título = "centro de gravidade" onde os
     estilhaços convergem; halo secundário dessaturado no topo-direita dá volume/profundidade ao quadro;
     uma terceira camada amplíssima e tênue assenta o todo no OLED (vinheta de luz, não de preto). */
  background:
    radial-gradient(42% 44% at 18% 82%, var(--hero-aura-1), transparent 66%),
    radial-gradient(50% 46% at 86% 20%, var(--hero-aura-2), transparent 70%),
    radial-gradient(120% 120% at 30% 70%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 62%);
  filter: saturate(1.15);
  /* breathing: deriva lenta + pulso de escala/luz (o núcleo "inspira e expira") — vida sem ruído. */
  animation: auraBreathe 9s var(--e-inout) infinite alternate;
  will-change: transform, opacity;
}
@keyframes auraBreathe {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1);    opacity: .92; }
  to   { transform: translate3d(2.5%, 1.5%, 0) scale(1.07); opacity: 1; }
}
/* respiro SUAVE p/ reduce-motion: sem deriva, só um pulso de luz lento e de baixa amplitude. */
@keyframes auraBreatheSoft {
  from { transform: scale(1);    opacity: .9; }
  to   { transform: scale(1.02); opacity: 1; }
}
/* LOGOS DE STREAMING FLUTUANTES (ref. do dono: floating-icons-hero) — substituem os antigos estilhaços
   de ÍCONE-DE-LINHA. Flutuam ao redor do título com sombra suave + drift contínuo (CSS) + parallax
   magnético de mouse (JS). Vivem nos cantos/topo-direita (a base-esq é a coluna do título). Funciona
   sem GSAP (drift CSS puro); a camada interna .hero__logo-i recebe a entrada + parallax do JS.
   O CAMPO é transparente a clique; cada LADRILHO recebe o ponteiro (hover real). z -1 (sob o texto). */
.hero__logos { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* LADRILHO DE VIDRO ESCURO (decisão do dono — estilo ÍCONE DE APP no celular): chip translúcido
   ESCURO + blur + borda sutil + sombra difusa. O fundo escuro é o que impede as cores REAIS das marcas
   de brigarem com a parede de pôsters atrás (cada logo na sua cor, mas assentado num "porta-ícone"
   uniforme e premium). Camadas de transform separadas: o float idle mora aqui (.hero__logo); o parallax
   magnético do JS move a camada interna .hero__logo-i. O ladrilho recebe o ponteiro (hover real). */
.hero__logo {
  position: absolute; display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: var(--r-lg);
  pointer-events: auto;
  /* vidro ESCURO: véu escuro translúcido (cores não brigam com a parede) + highlight de topo sutil */
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.10) 42%, rgba(0,0,0,.30));
  background-color: rgba(10,9,16,.46);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 16px 40px rgba(0,0,0,.50),
    0 4px 12px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: .96;
  transition: box-shadow var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
  /* SEM animação/transform AQUI: o CHIP é movido pelo parallax magnético do mouse (JS) como UMA peça
     (glass + ícone juntos) — antes o ícone deslizava DENTRO do chip parado e "escapava" do vidro. */
}
/* camada interna = o LOGO em si. COLORIDOS: <img.hero__logo-i> na cor real (regras abaixo só de tamanho
   e sombra de leitura). O JS aplica o parallax magnético AQUI (camada separada do float). */
.hero__logo-i {
  width: 50px; height: 50px; display: block;
  object-fit: contain; /* <img> colorido: encaixa sem distorcer */
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.45));
  transition: transform var(--d-base) var(--e-spring);
  /* ÍCONE FIXO no glass: SEM drift próprio. Todo o movimento (float idle + parallax do mouse) acontece
     no CHIP (.hero__logo) — assim o ícone anda JUNTO com o vidro, não "corre" dentro dele. */
}
/* MONOCROMÁTICOS / P&B (apple-tv, max, hbo, globo): o SVG é preto e sumiria no chip escuro. Render em
   BRANCO via CSS mask (silhueta recortada, background branco) — cada marca na sua identidade, sempre
   legível. A URL da máscara entra inline por item (sem cor/nome de provider no CSS). */
.hero__logo-i--mask {
  background: rgba(255,255,255,.96);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* HOVER: o ladrilho acende (borda/halo de tema) e sobe um tris; o logo dá um pop. */
@media (hover: hover) and (pointer: fine) {
  .hero__logo:hover {
    border-color: color-mix(in oklab, var(--accent) 60%, rgba(255,255,255,.2));
    box-shadow:
      0 20px 48px rgba(0,0,0,.56),
      0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent),
      0 0 44px color-mix(in oklab, var(--accent) 46%, transparent),
      inset 0 1px 0 rgba(255,255,255,.22);
    /* SEM translateY aqui: o chip já é movido pelo parallax (JS) — empilhar transform brigaria.
       O "pop" do hover vai no ícone interno (scale). */
  }
  .hero__logo:hover .hero__logo-i { transform: scale(1.14); }
}
/* DISTRIBUIÇÃO EQUILIBRADA pelos 4 CANTOS e bordas (não mais amontoado na direita). 14 logos.
   A coluna do TÍTULO ocupa a BASE-ESQUERDA (headline ~30-62% + CTA embaixo) e o BADGE acima dela →
   o lado esquerdo só recebe logos ACIMA do eyebrow (topo) e ABAIXO do CTA (rodapé), nunca no meio. */
/* TEXTO AGORA CENTRALIZADO → os logos formam um ANEL ao redor, deixando o miolo (~28-72% largura,
   ~26-74% altura) livre p/ a headline/CTA. Distribuídos pelos 2 lados + topo + base, simétrico. */
/* — LADO ESQUERDO (coluna esquerda inteira, fora do miolo) — */
.hero__logo:nth-child(1)  { top: 10%; left: 5%;  animation-delay: 0s; }
.hero__logo:nth-child(2)  { top: 40%; left: 3%;  animation-delay: -3.1s; }
.hero__logo:nth-child(3)  { top: 70%; left: 6%;  animation-delay: -1.6s; }
.hero__logo:nth-child(4)  { top: 22%; left: 17%; animation-delay: -5.7s; }
/* — LADO DIREITO — */
.hero__logo:nth-child(5)  { top: 10%; right: 5%;  animation-delay: -4.4s; }
.hero__logo:nth-child(6)  { top: 40%; right: 3%;  animation-delay: -7.0s; }
.hero__logo:nth-child(7)  { top: 70%; right: 6%;  animation-delay: -2.3s; }
.hero__logo:nth-child(8)  { top: 22%; right: 17%; animation-delay: -8.1s; }
/* — TOPO (cantos/faixa superior, fora do miolo) — */
.hero__logo:nth-child(9)  { top: 5%;  left: 32%; animation-delay: -4.9s; }
.hero__logo:nth-child(10) { top: 5%;  right: 32%; animation-delay: -6.3s; }
/* — RODAPÉ — */
.hero__logo:nth-child(11) { bottom: 7%; left: 22%; top: auto; animation-delay: -1.0s; }
.hero__logo:nth-child(12) { bottom: 7%; right: 22%; top: auto; animation-delay: -2.8s; }
.hero__logo:nth-child(13) { top: 56%; left: 16%;  animation-delay: -6.9s; }
.hero__logo:nth-child(14) { top: 56%; right: 16%; animation-delay: -8.6s; }
/* idle float SUTIL no CHIP inteiro (glass + ícone juntos). O parallax do mouse (JS) é ADITIVO via
   --mx/--my (compõe com o float, sem brigar pela mesma propriedade). */
.hero__logo { animation: logoFloat 9s var(--e-inout) infinite; }
.hero__logo:nth-child(even) { animation-name: logoFloatAlt; animation-duration: 10.5s; }
/* --mx/--my = offset do parallax do mouse (setado pelo JS no .hero__logo). O keyframe SOMA esse offset
   ao drift idle → float + ímã de mouse compõem no MESMO transform, sem brigar. Ícone (inner) fica fixo. */
@keyframes logoFloat {
  0%   { transform: translate3d(calc(var(--mx,0px) + 0px), calc(var(--my,0px) + 0px), 0) rotate(-2deg); }
  33%  { transform: translate3d(calc(var(--mx,0px) + 8px), calc(var(--my,0px) - 16px), 0) rotate(2deg); }
  66%  { transform: translate3d(calc(var(--mx,0px) - 6px), calc(var(--my,0px) - 6px), 0) rotate(3deg); }
  100% { transform: translate3d(calc(var(--mx,0px) + 0px), calc(var(--my,0px) + 0px), 0) rotate(-2deg); }
}
@keyframes logoFloatAlt {
  0%   { transform: translate3d(calc(var(--mx,0px) + 0px), calc(var(--my,0px) + 0px), 0) rotate(3deg); }
  33%  { transform: translate3d(calc(var(--mx,0px) - 10px), calc(var(--my,0px) + 13px), 0) rotate(-2deg); }
  66%  { transform: translate3d(calc(var(--mx,0px) + 7px), calc(var(--my,0px) + 8px), 0) rotate(-4deg); }
  100% { transform: translate3d(calc(var(--mx,0px) + 0px), calc(var(--my,0px) + 0px), 0) rotate(3deg); }
}
/* versão SUAVE p/ reduce-motion: só uma respiração de escala mínima (sem drift/giro) — "vivo, não parado" */
/* respiro suave (reduce-motion) que NÃO mata a repulsão do mouse: soma --mx/--my (offset que o JS
   escreve no chip) ao scale. Decisão do dono: interação provocada pelo cursor é SEMPRE ativa; só o
   motion ambiente é suavizado. translate3d primeiro p/ não brigar com o scale na mesma sub-prop. */
@keyframes logoBreatheSoft {
  0%, 100% { transform: translate3d(var(--mx,0px), var(--my,0px), 0) scale(1); }
  50%      { transform: translate3d(var(--mx,0px), var(--my,0px), 0) scale(1.04); }
}
@media (max-width: 760px) {
  /* MOBILE: 6 logos espalhados pelo TERÇO SUPERIOR + dois no RODAPÉ-DIREITO (sobre a parede, longe da
     headline central) — impacto "tem tudo" sem tapar o texto numa tela estreita (14 não cabem).
     Menores e discretos; entram no load (GSAP). Escondemos os demais. */
  .hero__logo:nth-child(n+7) { display: none; }
  .hero__logo { width: 52px; height: 52px; }
  .hero__logo-i { width: 32px; height: 32px; }
  .hero__logo:nth-child(1) { top: 6%;  left: 5%;   right: auto; bottom: auto; } /* sup-esq */
  .hero__logo:nth-child(2) { top: 5%;  right: 5%;  left: auto;  bottom: auto; } /* sup-dir */
  .hero__logo:nth-child(3) { top: 4%;  left: 38%;  right: auto; bottom: auto; } /* sup-centro */
  .hero__logo:nth-child(4) { top: 19%; left: 6%;   right: auto; bottom: auto; } /* alto-esq */
  .hero__logo:nth-child(5) { top: 18%; right: 6%;  left: auto;  bottom: auto; } /* alto-dir */
  .hero__logo:nth-child(6) { bottom: 5%; right: 6%; top: auto;  left: auto; }   /* inf-dir (abaixo do CTA, lado livre) */
}
/* SEM motion (sem GSAP/sem IO) ou REDUCE no mobile: os ladrilhos não podem ficar grandes sobre o texto.
   Sem o fade controlado do JS, caem para opacidade ambiente mais baixa (sombra suprimida) — presença
   sem competir com a headline numa tela estreita. */
@media (max-width: 760px) {
  html:not(.gsap-on) .hero__logo,
  html.io-on .hero__logo,
  html.reduce-soft .hero__logo {
    opacity: .5;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
  }
}
/* GSAP/IO assentam os logos; sem motion ficam estáticos como decoração premium */
html.gsap-on .hero__logo, html.io-on .hero__logo { will-change: transform, opacity; }
.hero__logo .hero__logo-i { will-change: transform; }
.hero__inner {
  position: relative;
  z-index: 1; /* conteúdo SEMPRE acima do vídeo/scrim/aura */
  display: grid;
  gap: clamp(2.8rem, 6.5vw, 4.8rem);   /* respiro vertical AMPLO entre eyebrow → título → CTA (decisão do dono): a dobra respira, usa o espaço ocioso medido na dobra */
  /* BLOCO DE TEXTO CENTRALIZADO (decisão do dono): título + badge + CTA centrados na vertical E na
     horizontal, com os logos flutuando AO REDOR (parede de pôsters atrás). O .hero usa
     align-items:center (vertical) e aqui justify/text-align center (horizontal). */
  align-content: center;
  justify-items: center;
  text-align: center;
  max-width: 92ch;
  margin-inline: auto;
}
/* a coluna de leitura é LARGA (cartaz que ocupa o espaço, não comprimido) mas com medida de leitura
   confortável p/ o subtítulo (max-width canônico abaixo, na regra de cor). Tudo à esquerda do bloco. */
/* max-width em ch p/ a medida de pôster, mas NUNCA maior que a coluna (100%) — senão a 20ch de
   Bricolage a 40px estoura os 390px da viewport e corta a palavra. min() trava no menor dos dois. */
.hero__title { max-width: 32ch; margin-inline: auto; }   /* headline larga: ocupa mais a horizontal, menos linhas, respira na dobra */
.hero__cta { justify-content: center; margin-top: clamp(1.6rem, 4vw, 3.4rem); } /* CTA centralizado + EXTRA de respiro só aqui: o botão descola bem do título (decisão do dono) */
ul.hero__subtitle { justify-items: center; justify-content: center; }

/* EYEBROW / KICKER (§5): a PRIMEIRA linha da hierarquia limpa, acima da headline. Caps espaçado,
   peso forte, cor de marca com glow sutil — abre o cartaz sem competir com a H1. Anton/Bebas-like
   via os tokens de papel; aqui usa o stack de eyebrow do DS (numeral/caps). */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  width: fit-content;
  font-family: var(--ff-num, inherit);
  font-size: clamp(.8rem, 2.4vw, .95rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent-2) 70%, var(--fg));
  text-shadow: 0 0 16px var(--accent-glow);
}
/* eyebrow centralizado → traço dos DOIS lados (simétrico), cada um desvanecendo p/ fora. */
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: ""; width: 22px; height: 2px; border-radius: 2px; flex: none;
}
.hero__eyebrow::before { background: linear-gradient(90deg, transparent, var(--accent)); }
.hero__eyebrow::after  { background: linear-gradient(90deg, var(--accent), transparent); }
.hero__badge,
.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  padding: .4rem .85rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  backdrop-filter: blur(8px);
}
.hero__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
/* o hero__badge vive sobre a PAREDE DE PÔSTERS (fundo movimentado) — precisa de fundo mais sólido e
   texto mais claro p/ ler. (O .badge genérico segue suave em fundos calmos.) */
.hero__badge {
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  border-color: color-mix(in oklab, var(--accent) 70%, transparent);
  color: var(--accent-2);
  box-shadow: var(--elev-2, 0 4px 12px rgba(0,0,0,.4));
}
/* SEM vídeo: o subtítulo lê sobre OLED + aura. Mantém um halo curto e SUTIL só p/ separar da luz da
   aura quando o título e os bullets pegam o glow (contraste AA garantido sobre o fundo escuro). */
.hero__subtitle { color: color-mix(in oklab, var(--fg) 92%, var(--fg-muted)); font-size: var(--fs-lead); font-weight: var(--fw-medium); max-width: 52ch; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
/* SUBTÍTULO refinado (item 4): linha de PROVAS em PÍLULAS DE VIDRO — não mais bullet-list pobre.
   Cada prova é um chip glass discreto (fundo translúcido + borda fina + blur), com um check em
   "medalha" duotone (disco de tema + traço). Ritmo melhor (gap maior), legível sobre o vídeo (AA). */
ul.hero__subtitle { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .55rem .7rem; max-width: 56ch; }
ul.hero__subtitle li {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem .4rem .5rem;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.18));
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(8px);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: color-mix(in oklab, var(--fg) 94%, var(--fg-muted));
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
/* check em "medalha": disco de tema (accent-soft) com o traço em accent-text → duotone, com volume */
ul.hero__subtitle li::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background:
    var(--ico-check) center/13px 13px no-repeat,
    radial-gradient(120% 120% at 30% 25%, color-mix(in oklab, var(--accent) 36%, transparent), var(--accent-soft));
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 14px color-mix(in oklab, var(--accent) 26%, transparent);
  /* item 4 (orçamento de movimento): o PULSE INFINITO das medalhas foi REMOVIDO — era ruído sem
     propósito competindo com o vídeo + 6 floats + pulse do CTA. A medalha ganha vida só no
     reveal/hover (gestos COM propósito). O único loop "vivo" do hero é o pulse do CTA. */
}
/* o check é mascarado em accent-text dentro do disco (currentColor via mask-image colorida) */
:root { --ico-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>'); }

/* SISTEMA ICONICO das pílulas (item 6): quando a <li> traz um ÍCONE DUOTONE do catálogo, ela ganha
   `.hero__sub--icon` -> suprime o check em "medalha" idêntico (cara de template) e mostra o ícone
   coerente por prova (filme/futebol/multi-tela). O ícone vive numa "medalha" de tema (disco accent-soft
   + borda) p/ manter o peso visual e a coesão com o resto; o SVG é duotone currentColor (multi-tema). */
ul.hero__subtitle li.hero__sub--icon::before { content: none; }
.hero__sub-ico {
  flex: none; display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 25%, color-mix(in oklab, var(--accent) 30%, transparent), var(--accent-soft));
  border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 12px color-mix(in oklab, var(--accent) 22%, transparent);
  color: var(--accent-text);
}
.hero__sub-ico svg { width: 15px; height: 15px; display: block; }

/* (o selo "Ao vivo" do hero saiu junto com o vídeo de fundo: era a etiqueta da CENA filmada, que
   agora vive no bloco `video` como selo "Vídeo real". O hero sem vídeo não tem "ao vivo" a carimbar.) */
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
/* CTA do hero com PRESENÇA (item 4): um pouco maior e mais "convidativo" que os CTAs internos. */
.hero__cta .btn { min-height: 58px; padding: .95rem 2.1rem; font-size: 1.18rem; }

@media (min-width: 900px) {
  /* Desktop: bloco-título de PÔSTER ancorado na BASE-ESQUERDA sobre o vídeo full-bleed. A headline
     de cartaz cresce com PRESENÇA e ocupa largura (não fica espremida), o hero CABE na 1ª dobra
     (~800px = header 64 + min-height 680 + padding), e a cena respira no quadrante superior-direito. */
  .hero__inner {
    align-content: end;
    row-gap: var(--sp-4);
  }
  .hero__title {
    /* HEADLINE editorial ~4.3rem (69px): presença de cartaz com a leveza do peso médio. Bricolage é
       MAIS LARGA que o Anton condensado → max-width MAIOR (27ch) p/ a headline longa fechar em ~3
       linhas mesmo assim — OCUPA o espaço sem espremer e CABE na 1ª dobra (largura↑ = nº de linhas↓). */
    font-size: clamp(3rem, 4.6vw, 4.3rem);
    line-height: .98;
    max-width: 27ch;
  }
  .hero__subtitle { max-width: 52ch; }
}


/* ==========================================================================
   FAIXA DE LOGOS DE STREAMING — agora SEÇÃO PRÓPRIA abaixo do hero (.logos-band)
   Logos MONOCROMÁTICOS BRANCOS via CSS mask (silhueta do SVG recortada sobre um
   background branco-suave) → uniforme/premium, cor original ignorada. Normaliza por
   ALTURA fixa (largura auto por aspect → wordmarks largos e ícones quadrados convivem).
   Marquee em loop contínuo (translateX -50% sobre a lista duplicada) + fade nas pontas
   + pausa no hover. Parallax de scroll: o track ganha --px (px horizontal) via lp.js.
   ========================================================================== */
.logos-band {
  /* ponte hero→conteúdo: respira um pouco mais que antes p/ separar bem o vídeo do hero acima da
     prova abaixo (era 2.4rem teto → 3.2rem). Borda fina só no TOPO + um fio de luz inferior em
     gradiente → "barra de marca" editorial que costura, sem virar caixa fechada. */
  padding-block: clamp(2rem, 4.4vw, 3.2rem);
  border-top: 1px solid var(--border);
  /* respiro inferior: o fio some no centro (luz que vaza) em vez de borda dura → integração com a
     seção abaixo. */
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--fg) 4%, transparent), transparent 42%),
    linear-gradient(0deg, color-mix(in oklab, var(--accent) 7%, transparent), transparent 30%);
  position: relative;
  overflow: hidden;                 /* o full-bleed do track não cria scroll horizontal */
  /* will-change NÃO fica fixo aqui (mantinha uma layer composta viva o tempo todo → custo de memória
     no celular popular). O lp.js liga o will-change na entrada e LIMPA quando assenta. */
}
/* fio de luz inferior sutil (separador editorial que não é borda dura) */
.logos-band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 36%, transparent) 50%, transparent);
  opacity: .6; pointer-events: none;
}
/* rótulo (VoC): NÃO é mais um eyebrow fraco. Display Anton, presença de cartaz, com um TICK de
   acento (régua de marca) à esquerda → conversa com a hierarquia da página. O COPY vem de outro
   agente; aqui só o SLOT ganha peso tipográfico e ancoragem. */
.logos-strip__label {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 clamp(var(--sp-3), 1.6vw, var(--sp-6));
  font-family: var(--ff-display, inherit);
  font-size: clamp(.82rem, 1.8vw, 1rem); font-weight: 400; line-height: 1;
  letter-spacing: var(--tr-caps, .08em); text-transform: uppercase;
  color: color-mix(in oklab, var(--fg) 86%, var(--fg-muted));
}
/* tick de acento: fio curto na cor da marca → assina o rótulo como elemento de identidade */
.logos-strip__label::before {
  content: ""; flex: none; width: 1.6rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  box-shadow: 0 0 10px var(--accent-glow, transparent);
}
/* faixa full-bleed: sangra ponta a ponta (efeito marquee), independente do container do rótulo.
   O lp.js escreve aqui um transform COMPOSTO: translate3d(parallax+scrollVel) skewX(inércia).
   transform-origin central → o skew "inclina" a faixa a partir do meio (lê como velocidade/peso,
   técnica Locomotive), não a partir da borda. transform-box garante referência estável. */
.logos-strip {
  width: 100%; overflow: hidden;
  transform-origin: 50% 50%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* o track desliza no loop; --px é o offset de parallax (somado ao loop pelo lp.js via transform).
   Mantemos o loop no `animation` (translateX) e o parallax + skew de inércia no `transform` do
   .logos-strip (pai), p/ não brigarem pela mesma propriedade. Aqui o track só roda o marquee.
   GAP CALIBRADO: 2.4rem teto (era 3.6rem) → faixa CHEIA, +2 logos por viewport, leitura viva.
   DURAÇÃO CALIBRADA: 36s sobre ~1225px de meia-volta ≈ 34px/s (ritmo de leitura premium; era 30s
   ≈48px/s "apressado"). O loop é exato: a 2ª metade é cópia da 1ª, translateX -50% emenda perfeita. */
.logos-strip__track {
  display: flex; align-items: center; gap: clamp(1.6rem, 3vw, 2.4rem);
  width: max-content;
  /* loop base com DURAÇÃO FIXA (mexer em animation-duration em runtime reinicia a timeline = salto).
     A reação ao scroll NÃO toca esta animação: vem como offset ADITIVO no transform do pai
     (.logos-strip), suavizado por GSAP quickTo no lp.js — mesmo canal do parallax, sem jank. */
  animation: marquee 36s linear infinite;
  will-change: transform;
}
/* cada logo é um <span> pintado de branco-suave via mask (a mask-image vem inline por item).
   ALTURA fixa + largura auto via aspect-ratio herdado da própria máscara: usamos `width` grande
   e `mask: contain` p/ a silhueta caber por ALTURA (logos largos ficam largos, quadrados quadrados,
   sem distorção). Branco ~90% parado (mais elegante que 100%), sobe no hover. */
.logos-strip__item {
  flex: none;
  /* LINHA DE BASE ÓPTICA COMUM (correção de alinhamento): a CAIXA tem ALTURA ÚNICA p/ todos os
     tipos. Antes a altura variava por tipo (icon 32 / base 22 / wide 20) e o align-items:center
     centrava caixas de alturas diferentes → glifos em "níveis" distintos (uns mais altos/baixos),
     parecendo flutuar/desalinhar. Agora a caixa é igual p/ todos (mesma linha central) e a
     EQUALIZAÇÃO DE MASSA é feita só pela ALTURA DO GLIFO via mask-size (não pela caixa).
     mask-size: auto <h> → mantém o aspect e fixa a ALTURA do glifo; centrado na caixa única →
     todos assentam exatamente na mesma linha óptica. */
  height: 34px;            /* altura ÚNICA da linha (acomoda o glifo mais alto, o do ícone) */
  width: 104px;           /* teto de largura do wordmark médio (default) */
  background: color-mix(in oklab, #fff 90%, transparent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  /* GLIFO do wordmark médio: ~21px de altura (massa de referência), largura por aspect. */
  -webkit-mask-size: auto 21px; mask-size: auto 21px;
  opacity: .82;
  transition: opacity var(--d-base, .24s) ease, background var(--d-base, .24s) ease, transform var(--d-base, .24s) ease;
}
/* ícone quadrado: MESMA caixa (mesma linha), mas GLIFO mais alto → massa visual igual à de um
   wordmark (resolve a disparidade ícone-minúsculo × wordmark-largo) SEM mudar a altura da caixa
   (que é o que quebrava o alinhamento). Caixa estreita p/ não abrir espaço lateral. */
.logos-strip__item--icon {
  width: 40px;
  -webkit-mask-size: auto 30px; mask-size: auto 30px;
}
/* wordmark muito largo (7:1, 4.8:1): caixa mais larga (cabe o glifo largo) e GLIFO um pouco mais
   baixo p/ não dominar — mas SEMPRE na mesma linha central (altura da caixa intacta). */
.logos-strip__item--wide {
  width: 120px;
  -webkit-mask-size: auto 17px; mask-size: auto 17px;
}
/* SPOTLIGHT (hover): quando o ponteiro entra na faixa, TODOS os logos recuam (dim + leve down-scale)
   — o olho precisa de um "fundo" pra um logo se destacar. O logo sob o cursor então acende ao branco
   pleno e cresce: vira o foco. Momento memorável sem virar circo (1 logo por vez). */
.logos-strip__track:hover .logos-strip__item {
  opacity: .42;
  transform: scale(.96);
}
.logos-strip__track:hover .logos-strip__item:hover {
  opacity: 1;
  background: #fff;
  transform: translateY(-3px) scale(1.1);
  /* glow sutil de "marca acesa" — monocromático mantido (branco), só ganha presença luminosa */
  filter: drop-shadow(0 0 14px rgba(255,255,255,.28));
}
/* CONVERGÊNCIA na entrada: lp.js liga .logos-band--enter (estado inicial: logos deslocados/transp.),
   força reflow e troca pra .logos-band--in → os logos ASSENTAM em stagger (--i por item, inline) com
   o delay aplicado SÓ aqui. "Tudo num lugar só" se materializando. Depois o lp.js REMOVE essas
   classes (e o --i) → volta à transição-base (hover snappy, sem delay residual de stagger). */
.logos-band--enter .logos-strip__item {
  opacity: 0;
  transform: translateY(14px) scale(.92);
}
.logos-band--enter .logos-strip__item,
.logos-band--in .logos-strip__item {
  transition: opacity .55s var(--e-out, cubic-bezier(.16,1,.3,1)) calc(var(--i, 0) * 38ms),
              transform .6s var(--e-out, cubic-bezier(.16,1,.3,1)) calc(var(--i, 0) * 38ms);
}
.logos-band--in .logos-strip__item {
  opacity: .82;          /* mesma opacity de repouso da base */
  transform: none;
}
/* pausa o loop no hover (premium: o usuário "segura" pra ler) */
.logos-strip:hover .logos-strip__track { animation-play-state: paused; }
/* LOOP SEM SALTO NA EMENDA: o deslocamento NÃO é -50% (que assume metade-do-track ==
   metade-do-conteúdo). Com flex `gap`, a metade do track inclui só MEIO gap entre as
   duas metades, então -50% subdesloca exatamente gap/2 → abre um vão na emenda. O valor
   EXATO é a distância entre o início da 1ª metade e o início da 2ª (= conteúdo de uma
   metade + 1 gap inteiro). O lp.js MEDE essa distância no DOM (offsetLeft do 1º item da
   2ª metade) e a escreve em --marquee-shift, recalculando no resize → loop perfeito em
   QUALQUER viewport (clamp de gap, mobile, etc.). Fallback 50% se o JS não rodar (degrada
   pra movimento contínuo aceitável, nunca pra faixa parada). */
.logos-strip__track {
  --marquee-shift: 50%;
}
/* keyframe compartilhado (logos-strip e catalog): usa var COM fallback embutido (50% =
   trackWidth/2) → seguro mesmo onde --marquee-shift não é definido (ex.: .catalog__track,
   que mantém o comportamento -50% de antes). O lp.js sobrescreve --marquee-shift com o px
   medido só na faixa de logos, onde a emenda precisa ser exata. */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--marquee-shift, 50%) * -1), 0, 0); }
}
/* MOBILE: band compacta — logos menores e gap menor (cabe mais por tela; público 70% mobile). DEVE
   vir DEPOIS da regra base p/ vencer no cascade (mesma especificidade → ordem decide). */
@media (max-width: 760px) {
  /* mesma LINHA ÓPTICA ÚNICA no mobile: caixa de altura igual p/ todos, massa por mask-size. */
  .logos-strip__item { height: 28px; width: 82px; -webkit-mask-size: auto 17px; mask-size: auto 17px; }
  .logos-strip__item--icon { width: 32px; -webkit-mask-size: auto 24px; mask-size: auto 24px; }
  .logos-strip__item--wide { width: 96px; -webkit-mask-size: auto 14px; mask-size: auto 14px; }
  /* mobile: gap menor (clamp 1.2–1.8rem) p/ faixa cheia em tela estreita; 28s sobre ~908px ≈ 32px/s
     (mesma leitura confortável do desktop, não "apressado" como o 24s ficaria com o gap menor). */
  .logos-strip__track { gap: clamp(1.2rem, 5vw, 1.8rem); animation-duration: 28s; }
  .logos-strip__label { font-size: clamp(.74rem, 3.4vw, .86rem); }
  /* fade mais CURTO no mobile (tela estreita: 7% apagava o logo da borda; 4% preserva leitura). */
  .logos-strip {
    -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
}

/* ==========================================================================
   TRUSTBAR (selos de confiança)
   ========================================================================== */
.trustbar { background: var(--surface); border-block: 1px solid var(--border); }
.trustbar__inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-6); padding-block: var(--sp-6); }
.trustbar__item { display: inline-flex; align-items: center; gap: .5rem; font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--fg-muted); }
.trustbar__item::before { content: ""; width: 18px; height: 18px; background: var(--accent); -webkit-mask: var(--ico-check) center/contain no-repeat; mask: var(--ico-check) center/contain no-repeat; flex: none; }
.trustbar__item--link { color: var(--fg); }
.trustbar__item--link::before { background: var(--value); }
.trustbar__item--link:hover { text-decoration: underline; }
@media (min-width: 760px) { .trustbar__inner { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   DOR (PAS) — polaridade dispersar=dor
   ========================================================================== */
.pain__grid { display: grid; gap: var(--gap-card); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--sp-8); }
/* ONDA 2 — CAMADAS: repouso --elev-2 (objeto pousado), hover/focus sobe --elev-4 + lift + borda
   acende (figura×fundo: o card "destaca" do fundo de seção). transition só transform/box-shadow/
   border-color (60fps). O lift fica no .fx-lift (utilitário) — aqui mora a ELEVAÇÃO de repouso. */
.pain__card { padding: var(--sp-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--elev-2); }
.pain__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-md); background: rgba(255,107,61,.12); color: var(--pain); margin-bottom: var(--sp-3); }
.pain__icon svg { width: 30px; height: 30px; animation: iconBreathe 5s var(--e-inout) infinite; }
/* MICRO-ANIMAÇÃO dos ícones de seção (item 2): um "respiro" lento (scale + leve giro) que dá VIDA
   sem distrair. Só transform → 60fps. Cortada em reduce-motion (os ícones ficam GRANDES e parados). */
@keyframes iconBreathe { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } }
.pain__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.pain__text { color: var(--fg-muted); margin: 0; }
.pain__agitacao { margin-top: var(--sp-8); text-align: center; font-size: var(--fs-lead); font-weight: var(--fw-semibold); color: var(--fg); }

/* PIVÔ "aqui é diferente" em bullets escaneáveis (1 ideia por linha) — cada um com check verde de
   confiança. Centralizado, respira após os 3 cards de dor. */
.pain__pivot { list-style: none; margin: var(--sp-8) auto 0; padding: 0; display: grid; gap: var(--sp-3); width: fit-content; max-width: 100%; }
.pain__pivot li {
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--fs-lead); font-weight: var(--fw-semibold); color: var(--fg); text-align: left;
}
.pain__pivot li::before {
  content: ""; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: color-mix(in oklab, var(--value, #1fbf75) 20%, transparent);
  border: 1px solid color-mix(in oklab, var(--value, #1fbf75) 55%, transparent);
  /* check verde (silhueta via mask) — sinal de "seguro/confiança" */
  background-image: none;
  -webkit-mask: none;
  position: relative;
}
/* o "✓" desenhado dentro do círculo via segundo pseudo não é possível em ::before só; usamos um SVG
   inline de check como background do círculo (cor via currentColor do check teal). */
.pain__pivot li::before {
  background:
    color-mix(in oklab, var(--value, #1fbf75) 18%, transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231fbf75' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")
    center / .85rem no-repeat;
}

/* ---- CENA AUTORAL na dor (diretor de arte): a CENA é o protagonista, não o ícone-no-canto. ----
   O card com cena dá o PALCO no topo (.pain__stage) e o título vira legenda abaixo. */
.pain__card--cena { display: flex; flex-direction: column; }
.pain__card--cena .pain__title { margin-top: var(--sp-4); }
/* ALTURA ÚNICA p/ as 3 cenas (decisão do dono): o palco tem a MESMA altura nas 3, independente do
   conteúdo — alinha o grid no desktop e dá ritmo no mobile. A cena interna preenche 100% da altura. */
.pain__stage { position: relative; border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-2); height: var(--cena-h, 248px); }
.pain__stage > * { height: 100%; box-sizing: border-box; }

/* CENA "golpe-chat": mockup de conversa onde o golpista some. Construída só com CSS (sem <img>). */
.chat {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(1,168,117,.06), transparent 70%),
    #0e1512;                                            /* tom "tela de chat" dark, coerente c/ OLED */
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: .5rem .55rem .55rem;
  font-size: .78rem; line-height: 1.22;
  display: flex; flex-direction: column;             /* preenche a altura única; conversa encosta embaixo */
  overflow: hidden;
}
.chat__top { display: flex; align-items: center; gap: .5rem; padding: 0 .15rem .45rem; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: .45rem; flex: none; }
.chat__avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #2a3a34, #14201b); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.chat__who { display: flex; flex-direction: column; line-height: 1.1; }
.chat__who b { font-size: .8rem; color: var(--fg); font-weight: 700; }
.chat__who i { font-size: .66rem; color: var(--fg-muted); font-style: normal; }
/* com a altura maior do palco, as 5 bolhas CABEM sem rolar (decisão do dono: scroll ficou ruim). O
   margin-top:auto no 1º filho cola a conversa embaixo (estilo WhatsApp). overflow:clip é só rede de
   segurança em telas muito estreitas — sem scrollbar visível. */
.chat__body { display: flex; flex-direction: column; gap: .34rem; flex: 1; min-height: 0; overflow: clip; }
.chat__body > :first-child { margin-top: auto; }
.chat__b {
  max-width: 82%; padding: .4rem .55rem; border-radius: .8rem;
  position: relative; word-break: break-word;
}
.chat__b--in  { align-self: flex-start; background: #1d2a25; color: #e7efec; border-bottom-left-radius: .25rem; }
.chat__b--out { align-self: flex-end; background: #114d3a; color: #eafff6; border-bottom-right-radius: .25rem; }
.chat__b--pix { font-variant-numeric: tabular-nums; opacity: .96; }
.chat__tick { color: #53bdeb; font-size: .7rem; margin-left: .15rem; letter-spacing: -1px; } /* "lido" azul */
.chat__sys {
  align-self: center; text-align: center; margin-top: .25rem;
  font-size: .72rem; color: #d98b8b;                   /* alerta vermelho-suave: "número não existe mais" */
  background: rgba(217,139,139,.1); border: 1px solid rgba(217,139,139,.22);
  padding: .3rem .55rem; border-radius: .6rem;
}
/* MOTION (lp.js sobrepõe): as bolhas entram em sequência; a última pergunta fica sem resposta e o
   aviso de "sumiu" aparece por último. Estado inicial (entram via JS) — failsafe: visível sem JS. */
html.gsap-on .pain__stage[data-cena="golpe-chat"] .chat__b,
html.gsap-on .pain__stage[data-cena="golpe-chat"] .chat__sys { opacity: 0; }

/* CENA "tv-trava": a TV (com pé) mostra um lance de gol que CONGELA — "SINAL FRACO" + spinner. */
.tv { display: flex; flex-direction: column; align-items: center; height: 100%; }
.tv__set {
  position: relative; flex: 1; width: 100%; padding: .42rem;
  background: #0a0f0d; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.tv__screen {
  position: relative; height: 100%; border-radius: var(--r-sm); overflow: hidden;
  background: linear-gradient(160deg, #14241d, #0c1411);
}
.tv__pitch { position: absolute; inset: 0; width: 100%; height: 100%; }
.tv__grass { fill: #16312a; }
.tv__line, .tv__post, .tv__net { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1.4; stroke-linecap: round; }
.tv__net { stroke-width: .8; stroke: rgba(255,255,255,.1); }
.tv__player { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tv__phead { fill: #fff; stroke: none; }   /* cabeça cheia → lê como "pessoa", não rabisco */
.tv__ball { fill: #fff; filter: drop-shadow(0 0 3px rgba(255,255,255,.5)); transform-box: fill-box; transform-origin: center; }
.tv__live {
  position: absolute; top: .4rem; left: .45rem; z-index: 2; display: inline-flex; align-items: center; gap: .25rem;
  font-size: .58rem; font-weight: 800; letter-spacing: .06em; color: #ff5a5a;
  background: rgba(0,0,0,.45); padding: .1rem .32rem; border-radius: .3rem;
}
.tv__live i { width: .38rem; height: .38rem; border-radius: 50%; background: #ff5a5a; }
.tv__score { position: absolute; top: .4rem; right: .5rem; z-index: 2; font-size: .72rem; font-weight: 800; color: #eafff6; font-variant-numeric: tabular-nums; }
.tv__score b { color: var(--fg-muted); font-weight: 700; }
.tv__freeze {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  background: rgba(8,12,10,.82); -webkit-backdrop-filter: grayscale(1) blur(1px); backdrop-filter: grayscale(1) blur(1px);
  opacity: 0;                                          /* entra no clímax (JS); failsafe: visível sem JS (regra abaixo) */
}
.tv__spin { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.18); border-top-color: var(--accent-2, #00f0a7); }
.tv__sig {
  font-size: .6rem; font-weight: 800; letter-spacing: .05em; color: var(--pain, #ff6b3d);
  background: rgba(255,107,61,.12); border: 1px solid rgba(255,107,61,.3); padding: .12rem .4rem; border-radius: .3rem;
}
.tv__load { font-size: .58rem; color: var(--fg-muted); letter-spacing: .04em; }
.tv__bar { position: absolute; left: .4rem; right: .4rem; bottom: .4rem; z-index: 2; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.tv__fill { display: block; height: 100%; width: 100%; transform: scaleX(.2); transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px; }
.tv__stand { width: 14%; height: .5rem; background: #0a0f0d; }
.tv__foot { width: 34%; height: .28rem; background: #0a0f0d; border-radius: 0 0 3px 3px; }
/* failsafe sem JS: a cena fica no FRAME DO FREEZE (já comunica "travou") */
html:not(.gsap-on) .pain__stage[data-cena="tv-trava"] .tv__freeze { opacity: 1; }

/* CENA "apps-caos": gaveta de telas-app bagunçada — cada uma com um ícone REAL do catálogo + cadeado. */
.appgrid {
  position: relative; border-radius: var(--r-md);
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,107,61,.05), transparent 70%), #14100e;
  border: 1px solid var(--border); overflow: hidden;
}
.appgrid__tile {
  position: absolute; width: 27%; aspect-ratio: 1; border-radius: var(--r-sm);
  background: linear-gradient(135deg, #2a201c, #1a1410);
  border: 1px solid rgba(255,107,61,.2);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  display: grid; place-items: center;
}
/* logo real do streaming pintado em MONO via mask (silhueta) — tira a cor, fica coerente com o caos dark */
.appgrid__logo {
  width: 62%; height: 42%;
  background: rgba(255,255,255,.9);                    /* a "tinta" da silhueta (mono claro) */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.appgrid__lock {
  position: absolute; top: -5px; right: -5px;          /* cadeado no CANTO da tela-app (senha) */
  width: .62rem; height: .5rem; border-radius: 2px; background: var(--pain, #ff6b3d);
  box-shadow: 0 0 0 2px #14100e;
}
.appgrid__lock::before { content: ""; position: absolute; left: 50%; top: -.24rem; transform: translateX(-50%); width: .38rem; height: .38rem; border: 2px solid var(--pain, #ff6b3d); border-bottom: none; border-radius: 50% 50% 0 0; }
/* posições bagunçadas/desalinhadas (o caos) — cada tile com leve rotação própria */
.appgrid__tile[data-pa="0"] { left: 4%;  top: 8%;  transform: rotate(-6deg); }
.appgrid__tile[data-pa="1"] { left: 38%; top: 4%;  transform: rotate(4deg); }
.appgrid__tile[data-pa="2"] { left: 70%; top: 12%; transform: rotate(-3deg); }
.appgrid__tile[data-pa="3"] { left: 10%; top: 52%; transform: rotate(5deg); }
.appgrid__tile[data-pa="4"] { left: 42%; top: 56%; transform: rotate(-7deg); }
.appgrid__tile[data-pa="5"] { left: 72%; top: 48%; transform: rotate(3deg); }
.appgrid__q {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 1.4rem; font-weight: 800; color: var(--pain, #ff6b3d); opacity: 0;  /* pisca no clímax (JS) */
}

/* estado inicial das cenas com GSAP (failsafe: visíveis sem JS) */
html.gsap-on .pain__stage[data-cena="apps-caos"] .appgrid__tile { opacity: 0; }

/* ==========================================================================
   ANCORAGEM (preços avulsos somados)
   ========================================================================== */
/* ===== EFEITOS POR PALAVRA-CHAVE (em[data-fx]) — micro-cena que ILUSTRA a palavra ====================
   A copy marca `**texto|fx**` → <em data-fx="fx">. O lp.js dispara a animação no scroll-in (e re-dispara
   no hover). Cada fx tem o estado de repouso aqui + a animação no JS. Failsafe: legível sem JS. */

/* fx="separa" — as LETRAS se afastam (ilustra "separado/espalhado"); NÃO usa a barra-base sublinhada. */
.section__title em[data-fx="separa"]::after,
.hero__title em[data-fx="separa"]::after { display: none; }
.section__title em[data-fx="separa"],
.hero__title em[data-fx="separa"] {
  letter-spacing: calc(.01em + var(--sep, 1) * .12em);    /* --sep:0 junto → 1 afastado. Amplitude contida p/ NÃO empurrar/quebrar a linha (era .26em = estourava) */
  white-space: nowrap;                                    /* a palavra-chave nunca quebra em 2 linhas */
}

/* fx="cai" — a palavra "escorrega da mão": a barra-base CAI e some, e o texto dá um micro-tombo. */
.section__title em[data-fx="cai"]::after,
.hero__title em[data-fx="cai"]::after {
  transform: scaleX(var(--em-underline, 1)) translateY(var(--fall, 0));
  opacity: calc(1 - var(--fall-fade, 0));
}

/* fx="grifa" — marca-texto: a barra-base é mais GROSSA (highlighter) e se desenha da esquerda. */
.section__title em[data-fx="grifa"]::after,
.hero__title em[data-fx="grifa"]::after {
  height: .5em; bottom: .02em; opacity: .28; border-radius: .1em;   /* faixa de marca-texto atrás da base */
  z-index: -1;
}

/* fx="tomba" — "fica na mão": a palavra DESPENCA e vira de cabeça pra baixo (JS). Pivota pelo CENTRO e
   cai PRA BAIXO; o segmento que a contém reserva espaço embaixo (.ttl-seg--drop) p/ a queda não invadir
   a linha de cima. A barra não existe; a cor esmaece na queda (--down). */
.section__title em[data-fx="tomba"]::after,
.hero__title em[data-fx="tomba"]::after { display: none; }
.section__title em[data-fx="tomba"],
.hero__title em[data-fx="tomba"] {
  display: inline-block; transform-origin: 50% 50%;    /* gira pelo centro = tomba no lugar */
  /* cor de destaque INTACTA (decisão do dono: o esmaecer ficava ruim de ler) — só a queda/giro conta a dor */
}
/* o segmento com a palavra que tomba ganha CALHA embaixo (a queda precisa de espaço, senão invade). */
.pain .section__title .ttl-seg:last-child { padding-bottom: 1.1em; }

/* REVELAÇÃO PROGRESSIVA: cada segmento do título (data-seg) entra na sua vez (JS), em SUA PRÓPRIA LINHA
   (block) — assim não se sobrepõem (eram inline-block e empilhavam/encavalavam). Failsafe: visível.
   CENTRALIZADO (direção do diretor de arte): frases curtas empilhadas que formam a pergunta leem como
   manifesto centradas, não alinhadas à esquerda. */
.pain .section__title { text-align: center; }
.pain .section__title .ttl-seg { display: block; }
html.gsap-on .pain .section__title .ttl-seg { opacity: 0; }

/* 12 logos fecham CERTINHO: 6 col (6×2) no desktop, 4 (4×3) no tablet, 3 (3×4) no mobile — nunca sobra
   buraco no fim (era auto-fit que deixava 5+2 vazios numa linha de 7). */
.anchor__grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(6, 1fr); margin-block: var(--sp-8); perspective: 900px; }
.anchor__item { display: grid; gap: .5rem; place-items: center; padding: var(--sp-2); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--elev-2); transform-style: preserve-3d; }
/* hover 3D dirigido por vars (JS escreve --rx/--ry/--lift/--mscale): tilt segue o cursor + lift. */
.anchor__item.is-tilt { will-change: transform; box-shadow: var(--elev-4); border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
  transform: translateY(var(--lift, 0)) scale(var(--mscale, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
@media (max-width: 900px) { .anchor__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .anchor__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); } }
/* item 4: logos avulsos MAIORES e enquadrados num chip arredondado (sem "caixa" feia) */
.anchor__item img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r-sm); background: rgba(255,255,255,.04); }
.anchor__price { font-family: var(--ff-num); font-size: 1.55rem; color: var(--fg-faint); }
/* STORYTELLING DE PREÇO (só texto, no mesmo local): 3 beats revelados em sequência —
   (1) somatório CARO, riscado · (2) o preço real aqui (teal) · (3) economia no ano (clímax dourado). */
.anchor__total { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); margin-block: var(--sp-8); }
.anchor__sum { display: inline-flex; align-items: center; gap: .4em; justify-content: center; font-family: var(--ff-num); font-size: var(--fs-h2); color: var(--fg-muted); }
.anchor__sum-txt { position: relative; }
/* o riscado: uma linha que CORTA o R$500 (animada da esquerda no JS via --strike) */
.anchor__sum-txt::after {
  content: ""; position: absolute; left: -.05em; right: -.05em; top: 52%; height: 3px;
  background: var(--pain, #ff6b3d); border-radius: 2px;
  transform: scaleX(var(--strike, 0)); transform-origin: left center;
}
html:not(.gsap-on) .anchor__sum-txt::after { transform: scaleX(1); }   /* sem JS: já riscado */
/* sinal de "ruim/caro" ao lado: seta pra baixo num disco vermelho-alerta (profissional, não emoji). */
.anchor__bad {
  flex: none; width: 1.05em; height: 1.05em; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in oklab, var(--pain, #ff6b3d) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--pain, #ff6b3d) 45%, transparent);
  color: var(--pain, #ff6b3d);
}
.anchor__bad svg { width: .62em; height: .62em; }
.anchor__here { display: block; text-align: center; font-family: var(--ff-num); font-size: var(--fs-h1); color: var(--accent-text); font-weight: 800; }
.anchor__save {
  display: block; text-align: center; font-size: var(--fs-lead); font-weight: var(--fw-bold);
  color: var(--value, #1fbf75);
}
.anchor__save b, .anchor__here b { font-weight: 900; }
html.gsap-on .anchor__here, html.gsap-on .anchor__save { opacity: 0; }   /* entram via JS */
.anchor__resolve { text-align: center; font-size: var(--fs-lead); font-weight: var(--fw-semibold); max-width: 54ch; margin-inline: auto; margin-top: var(--sp-2); }
.anchor__fine { text-align: center; color: var(--fg-faint); font-size: var(--fs-small); }
.anchor__cta { display: flex; justify-content: center; margin-top: var(--sp-6); }

/* ==========================================================================
   NICHO (cards com mídia de fundo)
   ========================================================================== */
/* 6 universos → 3 POR LINHA (3×2) no desktop; 2 no tablet, 1 no mobile (decisão do dono). */
.niche__grid { display: grid; gap: var(--gap-card); grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-8); }
@media (max-width: 900px) { .niche__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .niche__grid { grid-template-columns: 1fr; } }
.niche__card {
  --card-accent: var(--accent); --card-glow: var(--accent-glow);
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--elev-2);
  transition: transform var(--d-base) var(--e-spring), border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.niche__card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 40%; background: radial-gradient(60% 100% at 50% 0, var(--card-glow), transparent 70%); opacity: .5; pointer-events: none; }
.niche__card:hover, .niche__card:focus-within { transform: translateY(var(--lift-md)) scale(1.015); border-color: var(--card-accent); box-shadow: var(--elev-4); }
.niche__bg { position: absolute; inset: 0; z-index: 0; }
.niche__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,7,13,.2), rgba(8,7,13,.92)); }
.niche__media { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out); }
.niche__card--media:hover .niche__media { transform: scale(1.06); }

/* CENAS AUTORAIS de nicho (cards sem capa real) — preenchem o fundo do card como as capas. */
.niche__scene { position: absolute; inset: 0; overflow: hidden; }
/* canais-vivo: grade de mini-telas "ao vivo" + selo AO VIVO. */
.niche__scene[data-cena="canais-vivo"] { background: linear-gradient(160deg, #142a24, #0c1411); }
.chlive__grid { position: absolute; inset: 12% 10% 16%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 7%; }
.chlive__tile { border-radius: var(--r-sm); background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, #16312a), #0e1f1a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); display: grid; place-items: center; overflow: hidden; }
/* logo real do canal COLORIDO (img) — "os canais de sempre", reconhecível */
.chlive__logo { width: 64%; height: 50%; object-fit: contain; }
.chlive__live { position: absolute; top: .55rem; left: .6rem; z-index: 2; display: inline-flex; align-items: center; gap: .25rem; font-size: .6rem; font-weight: 800; letter-spacing: .06em; color: #ff5a5a; background: rgba(0,0,0,.45); padding: .12rem .38rem; border-radius: .3rem; }
.chlive__live i { width: .38rem; height: .38rem; border-radius: 50%; background: #ff5a5a; }
.niche__card--media { min-height: 240px; }
.niche__body { position: relative; z-index: 1; padding: var(--sp-6); display: grid; gap: .5rem; align-content: end; height: 100%; }
.niche__card--media .niche__body { min-height: 240px; }
.niche__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }
.niche__icon svg { width: 30px; height: 30px; animation: iconBreathe 5s var(--e-inout) infinite; animation-delay: -1.5s; }
.niche__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.niche__text { color: var(--fg-muted); margin: 0; }
.niche__cta { display: flex; justify-content: center; margin-top: var(--sp-6); }
/* o CTA já é o fim do bloco — o padding-bottom da seção daria espaço DEMAIS somado ao do próximo bloco.
   Encurta o respiro DEPOIS do CTA do nicho (decisão do dono: botão estava longe do próximo título). */
.section.niche { padding-bottom: var(--sp-6); }

/* ==========================================================================
   CHECKLIST (o que está incluído)
   ========================================================================== */
.checklist__inner { max-width: var(--container); margin-inline: auto; }
/* GRID 3x2 de cards com CENA (cada item ilustrado). 3 col desktop, 2 tablet, 1 mobile. */
.checklist__grid { list-style: none; padding: 0; margin: var(--sp-8) 0 0; display: grid; gap: var(--gap-card); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .checklist__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .checklist__grid { grid-template-columns: 1fr; } }
.check__card { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--elev-2); overflow: hidden; transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out); }
.check__card:hover { transform: translateY(var(--lift-md)); box-shadow: var(--elev-4); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); }
/* PALCO da cena: altura fixa no topo do card (igual ao .pain__stage). */
.check__scene { position: relative; height: 152px; overflow: hidden; background: linear-gradient(160deg, #11201b, #0c1411); }
.check__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: .15rem; }
.check__badge { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--value, #1fbf75) 18%, transparent); color: var(--value, #1fbf75); margin-top: .1rem; }
.check__badge .checklist__check { position: static; width: 14px; height: 14px; }
.check__txt b { display: block; font-weight: var(--fw-bold); line-height: 1.25; }
.check__txt span { display: block; color: var(--fg-muted); font-size: var(--fs-small); margin-top: .15rem; }

/* ===== 6 CENAS DO CHECKLIST (motion no lp.js; failsafe: estado final visível) ===== */
/* 1) FUTEBOL: escudos reais em grade + selo PPV·Premiere */
.cs-fut__pitch { position: absolute; inset: 0; z-index: 0; background: radial-gradient(70% 70% at 50% 45%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 72%); }
.cs-fut__ppv { position: absolute; z-index: 3; top: .6rem; right: .7rem; font-size: .58rem; font-weight: 800; letter-spacing: .06em; color: var(--accent-text); background: color-mix(in oklab, var(--accent) 20%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); padding: .12rem .35rem; border-radius: .3rem; }
/* escudos reais (coloridos via <img>) — grade 3x2 equilibrada que preenche a cena (sem vazio no meio) */
.check__scene[data-cena="futebol"] { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: .4rem; place-items: center; padding: 1.4rem .9rem .9rem; }
.cs-fut__o { position: static; width: 2.6rem; height: 2.6rem; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

/* 2) CONVERGÊNCIA: 4 peças espalhadas → juntam num core central */
.check__scene[data-cena="convergir"] { display: grid; place-items: center; }
.cs-cv__p { position: absolute; width: 2rem; height: 2rem; border-radius: var(--r-sm); background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 20%, #16312a), #0e1f1a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); display: grid; place-items: center; }
.cs-cv__logo { width: 70%; height: 56%; object-fit: contain; }
.cs-cv__p[data-cv="0"] { left: 8%; top: 16%; } .cs-cv__p[data-cv="1"] { right: 10%; top: 14%; }
.cs-cv__p[data-cv="2"] { left: 12%; bottom: 16%; } .cs-cv__p[data-cv="3"] { right: 14%; bottom: 18%; }
.cs-cv__p[data-cv="4"] { left: 50%; top: 12%; transform: translateX(-50%); }
/* core = o "app único" pra onde tudo converge (quadrado de app com brilho), não uma bolha solta */
.cs-cv__core { position: relative; z-index: 2; width: 2.8rem; height: 2.8rem; border-radius: .7rem; background: linear-gradient(150deg, color-mix(in oklab, var(--accent-2, var(--accent)) 55%, #16312a), var(--accent)); box-shadow: 0 0 22px color-mix(in oklab, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.25); opacity: 0; display: grid; place-items: center; }
.cs-cv__core::after { content: ""; width: 0; height: 0; border-left: 11px solid rgba(255,255,255,.92); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }

/* 3) CATÁLOGO: leque de mini-pôsters */
.check__scene[data-cena="catalogo"] { display: grid; place-items: center; }
/* PAREDE DENSA de pôsters (sensação de "milhares") — 5 colunas, cada uma rola devagar (marquee vertical),
   direções alternadas. As capas sangram além do card (overflow do .check__scene esconde as pontas). */
.check__scene[data-cena="catalogo"] { padding: 0; }
.cs-cat__wall { position: absolute; inset: -8% 0; display: flex; gap: 5%; padding: 0 4%; transform: rotate(-3deg) scale(1.12); }
.cs-cat__col { flex: 1; overflow: hidden; }
.cs-cat__track { display: flex; flex-direction: column; gap: 6px; will-change: transform; animation: catScroll 18s linear infinite; }
.cs-cat__col:nth-child(even) .cs-cat__track { animation-direction: reverse; animation-duration: 22s; }
.cs-cat__track img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: .25rem; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
@keyframes catScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* veil pra o texto do card continuar legível sobre a parede + escurece as bordas */
.check__scene[data-cena="catalogo"]::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,12,10,.35), rgba(8,12,10,.78)); }
@media (prefers-reduced-motion: reduce) { .cs-cat__track { animation-duration: 60s; } }   /* deriva BEM lenta, viva */

/* 4) AO VIVO: grade de mini-telas + selo */
.cs-lv__grid { position: absolute; inset: 16% 14%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8%; }
.cs-lv__t { border-radius: var(--r-sm); background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 16%, #16312a), #0e1f1a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); display: grid; place-items: center; }
.cs-lv__logo { width: 62%; height: 50%; object-fit: contain; }
.cs-lv__live { position: absolute; z-index: 2; top: .55rem; left: .6rem; display: inline-flex; align-items: center; gap: .25rem; font-size: .56rem; font-weight: 800; letter-spacing: .05em; color: #ff5a5a; background: rgba(0,0,0,.45); padding: .1rem .35rem; border-radius: .3rem; }
.cs-lv__live i { width: .36rem; height: .36rem; border-radius: 50%; background: #ff5a5a; }

/* 5) NÍTIDO: barra de buffer LISA + selo HD */
.check__scene[data-cena="nitido"] { display: grid; place-items: center; }
.cs-hd__screen { position: relative; width: 74%; height: 70%; border-radius: var(--r-sm); display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 6px 16px rgba(0,0,0,.45); }
.cs-hd__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-hd__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45)); }
.cs-hd__play { position: relative; z-index: 2; width: 1.9rem; height: 1.9rem; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.cs-hd__play svg { width: 100%; height: 100%; }
.cs-hd__bar { position: absolute; left: 10%; right: 10%; bottom: .5rem; height: 5px; border-radius: 4px; background: rgba(255,255,255,.16); overflow: hidden; }
.cs-hd__fill { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; }
.cs-hd__badge { position: absolute; z-index: 2; top: .6rem; right: .7rem; font-size: .58rem; font-weight: 800; letter-spacing: .06em; color: var(--accent-text); background: color-mix(in oklab, var(--accent) 20%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); padding: .12rem .38rem; border-radius: .3rem; }

/* 6) MULTI-TELA: TV + celular + tablet, play salta entre eles */
.cs-mt__dev { position: absolute; color: color-mix(in oklab, var(--accent) 55%, rgba(255,255,255,.4)); }
.cs-mt__dev svg { width: 100%; height: 100%; }
.cs-mt__dev--tv { left: 12%; top: 26%; width: 3.6rem; height: 3rem; }
.cs-mt__dev--tab { left: 47%; bottom: 18%; width: 1.7rem; height: 2.3rem; }
.cs-mt__dev--phone { right: 16%; top: 30%; width: 1.3rem; height: 2.4rem; }
.cs-mt__play { position: absolute; z-index: 2; left: 24%; top: 38%; width: 1.3rem; height: 1.3rem; color: var(--accent-text); }
.cs-mt__play svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px var(--accent-glow)); }

/* estado inicial das cenas com GSAP (failsafe: visível sem JS) */
html.gsap-on .cs-cv__core { opacity: 0; }
html.gsap-on .cs-cv__p { opacity: 0; }
.checklist__reinforce { margin-top: var(--sp-6); text-align: center; font-weight: var(--fw-semibold); color: var(--accent-text); }
.checklist__cta { display: flex; justify-content: center; margin-top: var(--sp-6); }

/* ==========================================================================
   CATÁLOGO — parede de capas (mosaico/marquee) = prova literal da convergência
   ========================================================================== */
.catalog__sub { text-align: center; color: var(--fg-muted); margin: 0 0 var(--sp-6); }
.catalog__counters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8); margin-block: var(--sp-6) var(--sp-8); }
.catalog__count { text-align: center; }
.catalog__count-num { display: block; font-family: var(--ff-num); font-size: var(--fs-price); line-height: .85; color: var(--value); }
.catalog__count-label { color: var(--fg-muted); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tr-caps); }
.catalog__carousel { display: grid; gap: var(--sp-4); }
.catalog__row { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.catalog__track { display: flex; gap: var(--sp-4); width: max-content; animation: marquee 40s linear infinite; }
.catalog__track--reverse { animation-direction: reverse; }
.catalog__row:hover .catalog__track { animation-play-state: paused; }
.catalog__poster { flex: none; width: 150px; aspect-ratio: 2 / 3; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface-elev); }
.catalog__poster img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4); transition: filter var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); }
.catalog__poster:hover img { filter: none; transform: scale(1.05); }
.catalog__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.catalog__grid .catalog__poster { width: 100%; }
@media (max-width: 760px) { .catalog__track { animation-duration: 0s; } /* mobile: sem marquee pesado (montagem por reveal) */ }

/* ==========================================================================
   VÍDEO (lazy)
   ========================================================================== */
.video__subtitle { text-align: center; color: var(--fg-muted); margin: 0 0 var(--sp-6); }
/* PALCO do vídeo (§6): o card é a PROVA do produto (Ato 2). Vive sobre uma AURA de foco (blur de luz
   do --accent ATRÁS do card) que o empurra pra frente — o objeto destaca do fundo OLED sem moldura
   pesada. O .stage centraliza e dá o contexto da aura; o .frame é o objeto pousado. */
.video__stage { position: relative; max-width: 880px; margin-inline: auto; isolation: isolate; }
.video__aura {
  position: absolute; z-index: -1; inset: -8% -6% -14% -6%;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 55%, var(--accent-glow), transparent 70%),
    radial-gradient(80% 60% at 50% 100%, color-mix(in oklab, var(--accent-2) 24%, transparent), transparent 72%);
  filter: blur(34px) saturate(1.1);
  opacity: .7;
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-spring);
}
.video__stage:hover .video__aura, .video__stage:focus-within .video__aura { opacity: 1; transform: scale(1.04); }
/* card de vídeo ELEVADO: repouso --elev-4 (objeto que já chama atenção — é o clímax do Ato 2);
   hover/focus sobe a --elev-5 + lift + borda acende (§6). Conteúdo (play/halo) tem vida própria. */
.video__frame { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; background: var(--surface); box-shadow: var(--elev-4); transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out); }
.video__frame:hover, .video__frame:focus-visible { transform: translateY(var(--lift-md)); box-shadow: var(--elev-5); border-color: var(--accent); }
.video__frame img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.video__frame video { width: 100%; aspect-ratio: 16/9; }
.video__play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 30px var(--accent-glow); }
.video__play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 22px solid var(--cta-fg); border-top: 13px solid transparent; border-bottom: 13px solid transparent; transform: translateX(3px); }
.video__badge { position: absolute; top: .8rem; left: .8rem; padding: .3rem .7rem; border-radius: var(--r-pill); background: rgba(0,0,0,.55); font-size: var(--fs-caption); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tr-caps); }
.video__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-6); }

/* ==========================================================================
   ASSISTENTE ("Funciona na minha TV?")
   ========================================================================== */
.wizard__box { max-width: var(--container-narrow); margin: var(--sp-8) auto 0; padding: var(--sp-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.wizard__steplabel { font-weight: var(--fw-bold); margin-bottom: var(--sp-5); }
/* PASSO 1 (tipo de aparelho): 3 cards iguais lado a lado (grid), ícone em cima + label embaixo. */
.wizard__options--type { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
/* PASSO 2 (marcas): muitas → pílulas que quebram em várias linhas. */
.wizard__options--brand { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.wizard__panel { display: none; }
.wizard__box[data-step="1"] .wizard__panel--type { display: block; }
.wizard__box[data-step="2"] .wizard__panel--brand { display: block; }
.wizard__box[data-step="3"] .wizard__panel--result { display: block; }
/* chip base (passo 2 - marcas): pílula horizontal compacta. */
.wizard__opt { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: var(--r-pill); background: var(--surface-elev); border: 1px solid var(--border); cursor: pointer; min-height: 48px; font-weight: var(--fw-semibold); transition: border-color var(--d-base), background var(--d-base), transform var(--d-base); }
.wizard__opt:hover { border-color: var(--accent); background: var(--surface-hover); }
/* CARD do passo 1 (tipo): vertical, ícone dimensionado num disco + label — proporcional, não gigante. */
.wizard__options--type .wizard__opt { flex-direction: column; justify-content: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-3); border-radius: var(--r-lg); text-align: center; min-height: 130px; }
.wizard__options--type .wizard__opt svg { width: 40px; height: 40px; color: var(--accent-text); flex: none; }
.wizard__options--type .wizard__opt span { font-size: var(--fs-small); color: var(--fg); }
.wizard__opt svg { width: 18px; height: 18px; flex: none; }   /* ícone do chip de marca (se houver) */
@media (max-width: 420px) { .wizard__options--type .wizard__opt { min-height: 110px; padding: var(--sp-4) .4rem; } .wizard__options--type .wizard__opt svg { width: 34px; height: 34px; } }
.wizard__back { margin-top: var(--sp-4); background: transparent; border: 0; color: var(--accent-text); cursor: pointer; font-weight: var(--fw-semibold); }
.wizard__verdict { display: grid; gap: var(--sp-4); justify-items: center; text-align: center; padding: var(--sp-4) 0; }
/* ícone do resultado: disco proporcional + SVG dimensionado (estava ENORME — SVG sem tamanho herdava o
   natural). Veredito OK = VERDE de sucesso (--ok), não o dourado de preço (--value). */
.wizard__verdict-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--ok, #1fbf75) 16%, transparent); color: var(--ok, #1fbf75); }
.wizard__verdict-icon svg { width: 30px; height: 30px; }
/* veredito de aviso (precisa de TV Box / Apple): cor de alerta laranja em vez do verde */
.wizard__verdict--warn .wizard__verdict-icon { background: color-mix(in oklab, var(--pain, #ff6b3d) 16%, transparent); color: var(--pain, #ff6b3d); }
.wizard__verdict p { font-size: var(--fs-lead); font-weight: var(--fw-semibold); max-width: 36ch; }
/* link SECUNDÁRIO de download (já é cliente?) — discreto, abaixo do CTA principal de compra. */
.wizard__download { font-size: var(--fs-small); color: var(--fg-muted); text-decoration: underline; text-underline-offset: 3px; }
.wizard__download:hover { color: var(--accent-text); }
.wizard__honest { display: flex; align-items: flex-start; gap: .5rem; color: var(--fg-faint); font-size: var(--fs-small); max-width: var(--container-narrow); margin: var(--sp-4) auto 0; }
.wizard__honest svg { width: 18px; height: 18px; flex: none; color: var(--accent-text); }

/* ==========================================================================
   PROVA (métricas / prints / depoimentos)
   ========================================================================== */
.proof__sub { text-align: center; color: var(--fg-muted); margin: 0 0 var(--sp-8); }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-6); margin-bottom: var(--sp-12); }
.metric { text-align: center; }
.metric__value { font-family: var(--ff-num); font-size: clamp(2.5rem, 8vw, 4rem); line-height: .85; color: var(--value); }
.metric__label { color: var(--fg-muted); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tr-caps); }
/* CARROSSEL de prints (auto-scroll JS) — sem barra feia, máscara de fade nas bordas. O JS controla o
   scrollLeft (auto + setas + arrastar); o track é só uma faixa flex de cards estreitos e DENSOS. */
.shots-wrap { overflow: hidden; margin-top: var(--sp-6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.shots--track { display: flex; gap: var(--sp-3); width: max-content; will-change: transform; }
.shots-wrap[data-shots-marquee] { cursor: grab; }
.shots-wrap.is-dragging { cursor: grabbing; }
/* container vira scroll JS (auto-scroll + setas + arrastar) — barra nativa ESCONDIDA (era a feia). */
.shots-wrap--js { scrollbar-width: none; -ms-overflow-style: none; }
.shots-wrap--js::-webkit-scrollbar { display: none; height: 0; }
.shot { flex: none; width: 168px; margin: 0; }   /* zera o margin 1em 40px default do <figure> (causava buracos entre os prints) */
/* no desktop os prints crescem para a conversa ficar LEGÍVEL (168px é largura de mobile) */
@media (min-width: 768px) { .shot { width: 232px; } }
@media (min-width: 1100px) { .shot { width: 270px; } }
/* setas de navegação do carrossel de prints (passar pro próximo) */
.shots-caption { text-align: center; color: var(--fg-muted); font-size: var(--fs-small); margin-top: var(--sp-3); }
.shots-nav { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.shots-arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--surface-elev); border: 1px solid var(--border); color: var(--fg); transition: border-color var(--d-base), background var(--d-base), transform var(--d-base); }
.shots-arrow:hover { border-color: var(--accent); background: var(--surface-hover); }
.shots-arrow:active { transform: scale(.92); }
.shots-arrow svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .shots--track { animation-duration: 90s; } }  /* leitura calma, viva */
.shot__img { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.shot__img img { width: 100%; aspect-ratio: 9/16; object-fit: cover; }
.shot__verified { position: absolute; top: .5rem; right: .5rem; padding: .2rem .6rem; border-radius: var(--r-pill); background: var(--accent); color: var(--cta-fg); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.shot__caption { color: var(--fg-muted); font-size: var(--fs-small); margin-top: var(--sp-2); text-align: center; }
.testimonials { display: grid; gap: var(--gap-card); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--sp-8); }
/* CARD DE DEPOIMENTO — é uma FALA de gente real. Micro-interações: aspa autoral que entra,
   hover/tap que LEVANTA o card com glow teal (sinaliza "vivo, é uma pessoa"), estrelas com brilho. */
.testimonial { position: relative; overflow: hidden; padding: var(--sp-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--elev-2);
  transition: transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out); }
/* aspa decorativa de citação (mostra que é uma fala) — visível sempre (acompanha o fade do card no reveal);
   no hover ela ACENDE e cresce um tico, reagindo ao olhar. */
.testimonial::before { content: "\201C"; position: absolute; top: -.15em; right: .35em; font-family: Georgia, "Times New Roman", serif; font-size: 5rem; line-height: 1;
  color: color-mix(in oklab, var(--accent) 16%, transparent); pointer-events: none;
  transition: transform var(--d-base) var(--e-spring), color var(--d-base) var(--e-out); }
.testimonial:hover::before, .testimonial:focus-within::before { transform: scale(1.08); color: color-mix(in oklab, var(--accent) 30%, transparent); }
/* halo teal que acende na borda inferior no hover (a "fala" reage ao olhar) */
.testimonial::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity var(--d-base) var(--e-out); }
.testimonial:hover, .testimonial:focus-within { transform: translateY(-4px); border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); box-shadow: var(--elev-3, var(--elev-2)), 0 0 28px color-mix(in oklab, var(--accent) 14%, transparent); }
.testimonial:hover::after, .testimonial:focus-within::after { opacity: .85; }
.testimonial:active { transform: translateY(-2px) scale(.995); }   /* feedback de TOQUE no mobile (sem hover) */
.testimonial__stars { color: var(--value); letter-spacing: 2px; margin-bottom: var(--sp-3); text-shadow: 0 0 10px color-mix(in oklab, var(--value) 30%, transparent); }
.testimonial__text { margin: 0 0 var(--sp-4); position: relative; }
.testimonial__name { font-weight: var(--fw-bold); }
.testimonial__name::before { content: "— "; color: var(--accent); }   /* travessão de fala, marca de "alguém disse" */
@media (prefers-reduced-motion: reduce) {
  .testimonial { transition: border-color var(--d-base), box-shadow var(--d-base); }
  .testimonial:hover, .testimonial:focus-within { transform: none; }   /* SUAVIZA: sem lift, mantém o glow (interação continua viva) */
}
.seals { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-8); }
.seal { padding: .4rem .9rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.proof__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-8); }

/* ==========================================================================
   GARANTIA
   ========================================================================== */
.guarantee__card { position: relative; max-width: var(--container-narrow); margin-inline: auto; padding: var(--sp-12) var(--sp-8); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border-strong); text-align: center; box-shadow: var(--sh-2); }
.guarantee__text { color: var(--fg-muted); }
.guarantee__note { font-size: var(--fs-small); color: var(--fg-faint); }
.guarantee__note a { color: var(--accent-text); }

/* ==========================================================================
   PASSOS + PAGAMENTO
   ========================================================================== */
.steps__grid { display: grid; gap: var(--gap-card); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--sp-8); counter-reset: step; }
.step { position: relative; padding: var(--sp-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.step__num { counter-increment: step; width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-text); display: grid; place-items: center; font-family: var(--ff-num); font-size: 1.6rem; margin-bottom: var(--sp-3); }
.step__num::before { content: counter(step); }
.step__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.step__text { color: var(--fg-muted); margin: 0; }
.steps__trust { text-align: center; margin-top: var(--sp-8); color: var(--accent-text); }
/* ---- CENA "AVISO ANTECIPADO" — sino que toca antes de vencer (ao lado da frase de confiança) ---- */
.steps__trustrow { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-8); flex-wrap: wrap; }
.steps__trustrow .steps__trust { margin-top: 0; max-width: 46ch; text-align: left; }
@media (max-width: 520px) { .steps__trustrow .steps__trust { text-align: center; } }
.trustbell { position: relative; display: inline-grid; place-items: center; width: 88px; aspect-ratio: 1 / 1; flex: 0 0 auto; color: var(--accent); }
@media (max-width: 520px) { .trustbell { width: 72px; } }
.trustbell__svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 18px color-mix(in oklab, var(--accent) 34%, transparent)); }
.trustbell__aura { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 30%, transparent), transparent 66%); opacity: .55; }
.tb-ring { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: 32px 29px; }
.tb-bell, .tb-badge, .tb-ch { transform-box: fill-box; transform-origin: center; }
.tb-bell { transform-origin: 32px 11px; }   /* pivô NO topo (balança como sino real) */
.tb-badge__n { font-family: var(--ff-num); font-size: 11px; font-weight: 800; fill: var(--cta-fg, #061616); }
.tb-ch__draw { stroke-dasharray: 40; stroke-dashoffset: 0; }   /* FAILSAFE: cheio sem JS */
/* só esconde p/ animar QUANDO há motor; sem JS fica tudo visível (estado final) */
html.gsap-on .tb-ring, html.io-on .tb-ring,
html.gsap-on .tb-ch, html.io-on .tb-ch { opacity: 0; }
html.gsap-on .tb-badge, html.io-on .tb-badge { transform: scale(0); }
html.gsap-on .tb-ch__draw, html.io-on .tb-ch__draw { stroke-dashoffset: 40; }
.steps__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.paybar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.paybar__item { display: inline-grid; place-items: center; padding: .4rem .6rem; border-radius: var(--r-sm); background: #fff; }
.paybar__item img { height: 24px; width: auto; }
/* PIX recebe leve presença (glow sutil abaixo, em .paybar__item--hl no bloco de motion) — SEM outline,
   que dava ar de "selecionado/marcado". */
.pay__seals { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ==========================================================================
   COMO FUNCIONA
   ========================================================================== */
.howto__inner { display: grid; gap: var(--sp-8); align-items: center; }
.howto__inner--split { grid-template-columns: 1fr; }
@media (min-width: 880px) { .howto__inner--split { grid-template-columns: 1.05fr 1fr; gap: var(--sp-12); } }
.howto__text { color: var(--fg-muted); font-size: var(--fs-lead); }
/* imagem-fallback (sem vídeo): mantém o tratamento simples de cartão. */
.howto__media img, .howto__img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--border); object-fit: cover; aspect-ratio: 4/3; }

/* — ARTE "A JANELA DA SALA" — vídeo conceitual como display OLED sem bezel ----------------------
   Palco 3D: perspectiva dá presença de OBJETO ao vídeo (não imagem colada). bloom atrás funde no
   OLED; reflexo embaixo = "TV apoiada na sala". Mobile-first: empilha (o grid já põe acima/abaixo). */
.howto__frame {
  position: relative;
  isolation: isolate;
  perspective: 1400px;
  padding-block: var(--sp-6);
}
/* BLOOM — aura teal + SOMBRA AMBIENTE atrás do display (camada NÃO mascarada). Mora aqui de
   propósito: o .howto__media--video usa mask-image, que CLIPA o próprio box-shadow externo; então a
   profundidade do "objeto na sala" (drop-shadow escuro + halo teal) vive nesta camada de trás, que
   nada clipa. Eco do DNA do hero, difuso, sem corte. */
.howto__bloom {
  position: absolute; inset: -8% -6% 6%;
  z-index: 0; pointer-events: none;
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 55% at 50% 42%, var(--accent-glow), transparent 70%),
    radial-gradient(70% 60% at 50% 60%, color-mix(in oklab, var(--accent-2) 22%, transparent), transparent 72%);
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 60px var(--accent-glow);  /* sombra ambiente + halo */
  filter: blur(8px);
  opacity: .9;
  transition: box-shadow var(--d-slow, .6s) var(--e-out, cubic-bezier(.2,.7,.2,1));
}
.howto__frame:hover .howto__bloom {
  box-shadow: 0 38px 84px rgba(0,0,0,.62), 0 0 92px var(--accent-glow);
}
/* DISPLAY — o vídeo dentro de uma moldura OLED: borda fina de glow teal, cantos generosos,
   leve tilt 3D, e bordas que DISSOLVEM no fundo via mask (sem corte duro). Só INSET shadow aqui
   (inset sobrevive ao mask); a sombra externa fica no .howto__bloom (ver acima). */
.howto__media--video {
  position: relative;
  z-index: 1;
  border-radius: var(--r-xl);
  padding: 4px;                                  /* "bezel" mínimo iluminado */
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--accent) 55%, transparent),
      color-mix(in oklab, var(--accent-2) 28%, transparent) 38%,
      rgba(255,255,255,.04) 60%,
      transparent 100%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent);
  transform: rotateX(3deg) rotateY(-7deg);        /* tilt 3D sutil (presença de objeto) */
  transform-origin: 70% 50%;
  transition: transform var(--d-slow, .6s) var(--e-out, cubic-bezier(.2,.7,.2,1)),
              box-shadow var(--d-slow, .6s) var(--e-out, cubic-bezier(.2,.7,.2,1));
  /* dissolve as bordas no OLED (eco do hero, sem retângulo seco) */
  -webkit-mask-image: radial-gradient(125% 125% at 50% 45%, #000 62%, transparent 100%);
          mask-image: radial-gradient(125% 125% at 50% 45%, #000 62%, transparent 100%);
}
.howto__frame:hover .howto__media--video {
  transform: rotateX(1.5deg) rotateY(-3deg);      /* "endireita" ao olhar = convida a assistir */
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent);
}
.howto__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: calc(var(--r-xl) - 4px);
  background: var(--surface);
}
/* GLASS — brilho diagonal sutil sobre o display (vidro real, não foto chapada) */
.howto__glass {
  position: absolute; inset: 4px;
  border-radius: calc(var(--r-xl) - 4px);
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 40%);
  mix-blend-mode: screen;
}
/* REFLEXO — luz-piso curta embaixo: o display "apoiado" na sala. */
.howto__reflect {
  position: absolute; left: 8%; right: 8%; bottom: -2%;
  z-index: 0; height: 14%;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, var(--accent-glow), transparent 75%);
  filter: blur(10px);
  opacity: .7;
}
@media (prefers-reduced-motion: reduce) {
  .howto__media--video { transition: none; }
}

/* — REVEAL CINEMATOGRÁFICO no scroll (decisão do dono: "momento cinema") -------------------------
   Quando o bloco entra na viewport, o vídeo é REVELADO por uma CORTINA (clip-path inset que abre de
   baixo→cima) + leve ZOOM que assenta (scale 1.08→1) + opacity, e a copy à esquerda desliza em
   sincronia (um tico antes). Inspiração: Awwwards "image reveal mask" + Codrops layered zoom scroll.

   CANAIS DE TRANSFORM (anti-briga, igual o diretor de arte separou):
     - clip-path .... no <video> (.howto__video)            ← cortina (propriedade PRÓPRIA, não é transform)
     - scale ........ no <video> (.howto__video), via JS     ← zoom de chegada (transform do vídeo)
     - tilt 3D ...... no .howto__media--video (CSS/hover)     ← outro nó, outro transform (não colide)
     - parallax ..... no .howto__frame[data-howto-media]      ← outro nó ainda (translateY no scroll)
   Como o scale vive no <video> e o tilt no PAI, e o parallax no AVÔ, nenhum sobrescreve o outro.

   ESTADO INICIAL (cortina fechada) mora SÓ sob html.gsap-on / html.io-on — classes que o lp.js crava
   no boot, ANTES de qualquer trigger. FAILSAFE (sem JS): html nunca ganha essas classes → o vídeo
   fica 100% aberto/visível (clip-path natural, opacity 1). Nunca esconde o conteúdo esperando JS. */
/* registra --reveal como <number> p/ o browser INTERPOLAR (WAAPI/transition o tweenam suave; sem isto
   uma custom property "salta" 0→1). GSAP não precisa disto (re-seta a cada frame), mas a camada de
   fallback (WAAPI) e qualquer transição CSS futura sim. Falha graciosa: browser sem @property ignora
   a regra e a custom property vira não-animável → o JS GSAP ainda anima; o fallback ainda mostra. */
@property --reveal {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;   /* default ABERTO (failsafe filosófico: na dúvida, visível) */
}
html.gsap-on .howto__video,
html.io-on .howto__video {
  /* cortina dirigida por --reveal (0=fechada, 1=aberta): o JS só tween-a UM número → GSAP/WAAPI
     interpolam liso (sem o problema de interpolar string inset(...)+calc). A FORMA mora aqui:
     - topo:    86% → 0%  (a fenda embaixo SOBE, descobrindo de baixo→cima como uma cortina)
     - laterais: 8% → 0%  (abrem junto, dando o "spread" central→fora)
     o raio acompanha o cantinho do vídeo (mesma curva do CSS base). */
  --reveal: 0;
  clip-path: inset(
    calc((1 - var(--reveal)) * 86%)
    calc((1 - var(--reveal)) * 8%)
    0%
    calc((1 - var(--reveal)) * 8%)
    round calc(var(--r-xl) - 4px));
  opacity: 0;
  will-change: clip-path, transform, opacity;       /* o JS LIMPA ao assentar (não deixa layer viva) */
}
/* DECISÃO DO DONO: o reveal cinematográfico (cortina) foi a direção escolhida e o dono RODA reduce no
   SO — então a cortina ABRE também em reduce (o JS só encurta a duração/zoom). NÃO forçamos --reveal:1
   aqui: o estado-base é --reveal:0 (fechada) e o JS anima até 1 em qualquer cenário. */

/* COPY à esquerda: desliza/entra em sincronia leve com o reveal do vídeo (swipe coordenado). Estado
   inicial gated sob JS-on (failsafe: sem JS aparece normal). O título tem motion próprio (section
   reveal/em-fx) — aqui movemos o WRAPPER da copy como um todo (translate+fade), canal separado. */
html.gsap-on .howto__copy[data-howto-copy],
html.io-on .howto__copy[data-howto-copy] {
  opacity: 0;
  transform: translate3d(-26px, 0, 0);
  will-change: transform, opacity;
}
@media (min-width: 880px) {
  /* no split desktop a copy entra da esquerda; mobile (empilhado) entra mais reto, amplitude menor. */
  html.gsap-on .howto__copy[data-howto-copy],
  html.io-on .howto__copy[data-howto-copy] { transform: translate3d(-38px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  html.gsap-on .howto__copy[data-howto-copy],
  html.io-on .howto__copy[data-howto-copy] { transform: translate3d(-12px, 0, 0); }  /* suave */
}

/* ==========================================================================
   OFERTA (pico de conversão — maior elevação + colapso de preço)
   ========================================================================== */
.offer__card { position: relative; max-width: var(--container-narrow); margin-inline: auto; padding: var(--sp-12) var(--sp-8); border-radius: var(--r-xl); background: var(--surface-elev); border: 2px solid var(--accent); text-align: center; box-shadow: var(--sh-3), 0 0 80px var(--accent-glow); }
.offer__urgency { display: inline-block; padding: .35rem .9rem; border-radius: var(--r-pill); background: rgba(255,107,61,.15); color: var(--pain); font-weight: var(--fw-bold); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tr-caps); margin-bottom: var(--sp-4); }
.offer__price { display: flex; flex-direction: column; align-items: center; gap: .2rem; margin-block: var(--sp-4); }
.offer__from { font-family: var(--ff-num); font-size: 2rem; color: var(--fg-faint); text-decoration: line-through; }
.offer__amount { font-family: var(--ff-num); font-size: var(--fs-price); line-height: .85; color: var(--value); }
.offer__period { color: var(--fg-muted); margin-bottom: var(--sp-6); }
.offer__bullets { list-style: none; padding: 0; margin: 0 auto var(--sp-8); max-width: 36ch; display: grid; gap: .6rem; text-align: left; }
.offer__bullets li { position: relative; padding-left: 1.8rem; }
.offer__bullets li::before { content: ""; position: absolute; left: 0; top: .25em; width: 18px; height: 18px; background: var(--ok); -webkit-mask: var(--ico-check) center/contain no-repeat; mask: var(--ico-check) center/contain no-repeat; }
.offer__guarantee { margin-top: var(--sp-6); color: var(--value); font-weight: var(--fw-semibold); }

/* ==========================================================================
   PLANOS (pico de conversão — layout 2 colunas: "vem junto" + linhas de plano)
   Herda o UX da referência e supera: preço dourado universal, plano em destaque
   tematizado (--accent/--accent-glow), CTA por plano. design-system §4.3/§9.
   ========================================================================== */
.plans { position: relative; }
.plans__aura { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 50% at 50% 35%, var(--aura-1), transparent 70%); opacity: .5; }
.plans__title, .plans__sub, .plans__grid, .plans__fine { position: relative; z-index: 1; }
.plans__title { text-align: center; }
.plans__sub { text-align: center; max-width: 52ch; margin: 0 auto var(--sp-8); color: var(--fg-muted); font-size: var(--fs-lead); }

.plans__grid { display: grid; gap: var(--gap-card); margin-top: var(--sp-8); }
.plans__grid--split { grid-template-columns: 1fr; }
@media (min-width: 920px) {
  .plans__grid--split { grid-template-columns: minmax(280px, 5fr) 7fr; align-items: stretch; }
}

/* PAINEL ESQUERDO — "o que vem junto" + selo de compra segura. */
.plans__aside { position: relative; display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-8) var(--sp-6); border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-2); }
.plans__aside-top { position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--accent), transparent 80%); }
.plans__aside-title { font-family: var(--ff-display); font-weight: var(--fw-regular);
  font-size: var(--fs-h3); line-height: 1; text-transform: uppercase; letter-spacing: var(--tr-display); }
/* cada item vira uma FAIXA/card: no desktop a lista ESTICA e distribui as faixas pela altura toda
   (preenche o vazio ao lado dos 3 planos). No mobile fica compacta. */
.plans__inclusos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.plans__incluso { position: relative; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 3rem; border-radius: var(--r-md);
  background: color-mix(in oklab, var(--accent) 5%, var(--surface)); border: 1px solid var(--border);
  color: var(--fg); font-weight: var(--fw-medium); line-height: 1.25;
  transition: transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out); }
.plans__incluso::before { content: ""; position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  border-radius: 50%; background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.plans__incluso::after { content: ""; position: absolute; left: calc(var(--sp-3) + 7px); top: 50%; transform: translateY(-50%); width: 14px; height: 14px;
  background: var(--accent-text); -webkit-mask: var(--ico-check) center/contain no-repeat; mask: var(--ico-check) center/contain no-repeat; }
.plans__incluso:hover { transform: translateX(3px); border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); background: color-mix(in oklab, var(--accent) 9%, var(--surface)); }
.plans__secure { margin: 0; padding-top: var(--sp-4); border-top: 1px solid var(--border);
  color: var(--value); font-weight: var(--fw-semibold); font-size: var(--fs-small); }
/* no desktop: a lista de faixas estica para igualar a altura dos 3 planos (acaba com o vazio). */
@media (min-width: 920px) {
  .plans__inclusos { flex: 1; justify-content: space-between; }
  .plans__incluso { flex: 1; }   /* cada faixa cresce igualmente para preencher a coluna */
  html.gsap-on .plans__incluso, html.io-on .plans__incluso { will-change: auto; }
}

/* COLUNA DIREITA — linhas de plano empilhadas. */
.plans__list { display: grid; gap: var(--sp-4); align-content: center; }
.plan { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--elev-2);
  transition: transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out); }
.plan:hover, .plan:focus-within { transform: translateY(var(--lift-sm)); border-color: var(--accent); box-shadow: var(--elev-4); }
/* plano em DESTAQUE = a "figura" do bloco (plano §2: blur de foco no card destaque). Repouso já em
   --elev-3 (halo de tema) p/ pousar acima dos irmãos; hover sobe a --elev-5 (clímax). */
.plan--hl { background: var(--surface-elev); border: 2px solid var(--accent);
  box-shadow: var(--elev-3); transform: scale(1.015); }
.plan--hl:hover, .plan--hl:focus-within { transform: scale(1.015) translateY(var(--lift-sm)); box-shadow: var(--elev-5); }
.plan__badge { position: absolute; top: -.7rem; left: var(--sp-6); padding: .25rem .7rem;
  border-radius: var(--r-pill); background: var(--accent); color: var(--cta-fg);
  font-size: var(--fs-caption); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tr-caps);
  box-shadow: 0 0 16px var(--accent-glow); }
.plan__head { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.plan__icon { flex: none; width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }
.plan__icon svg { width: 30px; height: 30px; animation: iconBreathe 5s var(--e-inout) infinite; animation-delay: -3s; }
.plan__name { font-size: var(--fs-h3); margin: 0; line-height: 1.1; }
.plan__desc { margin: .15rem 0 0; color: var(--fg-faint); font-size: var(--fs-small); }
.plan__buy { display: flex; align-items: center; gap: var(--sp-6); margin-left: auto; }
.plan__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.plan__from { font-family: var(--ff-num); font-size: 1.15rem; color: var(--fg-faint); text-decoration: line-through; }
.plan__amount { font-family: var(--ff-num); font-size: clamp(2.2rem, 6vw, 3rem); line-height: .85; color: var(--value); }
.plan__per { color: var(--fg-muted); font-size: var(--fs-small); margin-top: .15rem; }
.plan__buy .btn { white-space: nowrap; }

.plans__fine { text-align: center; margin-top: var(--sp-6); color: var(--fg-faint); font-size: var(--fs-small); }

@media (max-width: 560px) {
  .plan { flex-direction: column; align-items: stretch; text-align: center; }
  .plan__head { justify-content: center; }
  .plan__buy { flex-direction: column; gap: var(--sp-3); margin-left: 0; }
  .plan__price { align-items: center; }
  .plan__buy .btn { width: 100%; }
}

/* ==========================================================================
   COMPARAÇÃO
   ========================================================================== */
.compare__table { width: 100%; border-collapse: collapse; margin-top: var(--sp-8); }
.compare__table th, .compare__table td { padding: var(--sp-3) var(--sp-4); text-align: center; border-bottom: 1px solid var(--border); }
.compare__table thead th { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-muted); }
.compare__table tbody th { text-align: left; font-weight: var(--fw-semibold); }
.compare__col--hl { background: var(--accent-soft); }
.compare__yes { color: var(--ok); font-weight: var(--fw-bold); }
.compare__no { color: var(--bad); font-weight: var(--fw-bold); }

/* ==========================================================================
   DEVICES (info)
   ========================================================================== */
.devices__grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: var(--sp-8); }
.device { padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); text-align: center; font-weight: var(--fw-semibold); }

/* ==========================================================================
   FAQ (accordion) — "+" gira para "×"
   ========================================================================== */
.faq__list { max-width: var(--container-narrow); margin: var(--sp-8) auto 0; display: grid; gap: var(--sp-3); }
.faq__item { --faq-marker: var(--accent); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--elev-1); overflow: hidden; transition: border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out); }
.faq__item:hover { box-shadow: var(--elev-2); }
.faq__item[open] { box-shadow: var(--elev-2); }
.faq__item[open] { border-color: var(--accent); background: var(--accent-soft); }
.faq__q { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 3rem var(--sp-4) var(--sp-4); font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: ""; position: absolute; right: var(--sp-4); top: 50%; width: 16px; height: 16px; background: var(--faq-marker); -webkit-mask: var(--ico-plus) center/contain no-repeat; mask: var(--ico-plus) center/contain no-repeat; transform: translateY(-50%) rotate(0deg); transition: transform var(--d-base) var(--e-out); }
.faq__item[open] .faq__q::after { transform: translateY(-50%) rotate(45deg); }
.faq__a { padding: 0 var(--sp-4) var(--sp-4); color: var(--fg-muted); }
:root { --ico-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>'); }

/* ==========================================================================
   FECHAMENTO (closing)
   ========================================================================== */
.closing { text-align: center; }
.closing__title { font-family: var(--ff-display); font-size: var(--fs-h1); line-height: .98; text-transform: uppercase; letter-spacing: var(--tr-display); }
.closing__subtitle { color: var(--fg-muted); font-size: var(--fs-lead); }
.closing__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-8); }

/* ==========================================================================
   REVENDEDORES (copy v3 §17) — porta DISCRETA de revenda, abaixo do CTA final.
   Princípio: NÃO competir com a venda ao consumidor. Por isso é sóbrio e menor que
   o resto da página — ritmo CURTO (--rhythm-tight), card de elevação BAIXA (--elev-1),
   tipografia headline (não display gigante), CTA secundário discreto (link/botão fantasma,
   não o pulse dourado da venda). Consome tokens existentes (--elev/--rhythm/--press/--lift).
   ========================================================================== */
.resellers { padding-block: var(--rhythm-tight); }
.resellers__inner {
  max-width: var(--container-narrow); margin-inline: auto;
  padding: var(--sp-8); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--elev-1); text-align: center;
}
.resellers__eyebrow {
  display: block; font-family: var(--ff-headline); font-weight: var(--fw-bold);
  font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: var(--sp-2);
}
/* headline sóbria (h2, não display) — fica MENOR que os títulos de venda de propósito. */
.resellers__title {
  font-family: var(--ff-headline); font-weight: var(--fw-bold);
  font-size: var(--fs-h3); line-height: 1.1; letter-spacing: var(--tr-display);
}
.resellers__text {
  color: var(--fg-muted); font-size: var(--fs-body); line-height: 1.55;
  max-width: 52ch; margin: var(--sp-3) auto var(--sp-6);
}
/* CTA discreto (fantasma): borda sutil, NÃO o botão de venda dourado. */
.resellers__cta {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 2px; padding: .7rem 1.4rem; border-radius: var(--r-pill);
  background: transparent; color: var(--fg);
  border: 1px solid var(--border-strong); font-weight: var(--fw-semibold);
  transition: transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out);
}
.resellers__cta:hover { transform: translateY(var(--lift-sm)); border-color: var(--accent); background: var(--surface-hover); }
.resellers__cta:active { transform: scale(var(--press)); }
.resellers__cta .btn__sub { color: var(--fg-muted); border-top-color: color-mix(in oklab, var(--fg) 16%, transparent); }

/* ==========================================================================
   FLUTUANTES — WhatsApp + barra sticky de CTA
   ========================================================================== */
.wa-float {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60; width: 56px; height: 56px; border-radius: 50%;
  background: var(--whats); display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(37,211,102,.45);
  transform: translateY(140%); opacity: 0;
  transition: transform var(--d-slow) var(--e-spring), opacity var(--d-slow) var(--e-out);
}
.wa-float::before { content: ""; width: 30px; height: 30px; background: #06231a; -webkit-mask: var(--ico-wa) center/contain no-repeat; mask: var(--ico-wa) center/contain no-repeat; }
.wa-float.is-visible { transform: translateY(0); opacity: 1; }
.wa-float:hover { transform: translateY(-3px) scale(1.05); }
/* no mobile, quando a barra fixa de CTA está visível, o WhatsApp SOBE pra não ficar por cima dela. */
@media (max-width: 899px) {
  body:has(.sticky-cta.is-visible) .wa-float { bottom: calc(72px + env(safe-area-inset-bottom) + .75rem); }
}
.wa-float__badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--c-no); color: #fff; font-size: .7rem; font-weight: var(--fw-bold); display: grid; place-items: center; }

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: .7rem clamp(1rem, 4vw, 2rem) calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px); border-top: 1px solid var(--border);
  transform: translateY(110%); transition: transform var(--d-slow) var(--e-spring);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__price { display: flex; flex-direction: column; line-height: 1; margin-right: auto; }
.sticky-cta__price b { font-family: var(--ff-num); font-size: 1.8rem; color: var(--value); }
.sticky-cta__price span { font-size: var(--fs-caption); color: var(--fg-muted); }
.sticky-cta .btn { min-height: 46px; padding: .6rem 1.4rem; font-size: 1rem; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ==========================================================================
   MOTION — CONVERGÊNCIA (§9). Estado inicial só quando JS ativa o motion (.gsap-on / .io-on no
   <html>). Sem JS / reduced-motion → tudo já visível e na posição final (falha-fechada do motion).
   Só transform/opacity (compositor). Posição final = layout correto.
   ========================================================================== */
/* base: elementos que assentam por reveal */
.reveal { opacity: 1; transform: none; }

/* camada 2 (IntersectionObserver puro, sem GSAP) — classe .io-on no <html>.
   Movimento CLARO: slide 44px + leve scale (não os antigos 18px imperceptíveis). */
html.io-on .reveal { opacity: 0; transform: translateY(44px) scale(.965); transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-spring); }
html.io-on .reveal.is-in { opacity: 1; transform: none; }

/* hero: fragmentos assentam (convergência). Animado via JS (GSAP ou IO). */
html.io-on .hero__eyebrow,
html.io-on .hero__badge,
html.io-on .hero__title,
html.io-on .hero__subtitle,
html.io-on .hero__cta { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity var(--d-cinema) var(--e-out), transform var(--d-cinema) var(--e-spring); }
html.io-on .hero.is-in .hero__eyebrow,
html.io-on .hero.is-in .hero__badge,
html.io-on .hero.is-in .hero__title,
html.io-on .hero.is-in .hero__subtitle,
html.io-on .hero.is-in .hero__cta { opacity: 1; transform: none; }
html.io-on .hero.is-in .hero__title em { --em-underline: 1; }
html.io-on .hero__title em { --em-underline: 0; transition: --em-underline var(--d-cinema) var(--e-out); }
/* logos flutuantes no fallback (sem GSAP): aparecem visíveis (não fantasma) quando o hero entra. A
   ENTRADA anima a camada INTERNA (.hero__logo-i) — assim o float idle do .hero__logo (CSS) não é
   zerado pela transição (camadas separadas). */
html.io-on .hero__logo { opacity: 0; transition: opacity var(--d-cinema) var(--e-out); }
html.io-on .hero.is-in .hero__logo { opacity: .94; }
@media (max-width: 760px) { html.io-on .hero.is-in .hero__logo { opacity: .5; } } /* mobile: mais discreto */
html.io-on .hero__logo-i { transform: scale(.6); transition: transform var(--d-cinema) var(--e-spring); }
html.io-on .hero.is-in .hero__logo-i { transform: none; }
/* grade do catálogo no fallback: capas convergem pro grid ao entrar */
html.io-on .catalog__grid .catalog__poster { opacity: 0; transform: translateY(36px) scale(.7); transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-spring); }
html.io-on .catalog__grid.is-in .catalog__poster { opacity: 1; transform: none; }
/* parede de capas do tvpass no fallback (crítico b): capas reais convergem; duplicatas (aria-hidden)
   só aparecem (sem transform — evita brigar com o marquee). */
html.io-on .catalog__carousel--wall .catalog__poster:not([aria-hidden="true"]) { opacity: 0; transform: translateY(36px) scale(.7); transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-spring); }
html.io-on .catalog__carousel--wall.is-in .catalog__poster:not([aria-hidden="true"]) { opacity: 1; transform: none; }
html.io-on .catalog__carousel--wall .catalog__poster[aria-hidden="true"] { opacity: 0; transition: opacity var(--d-slow) var(--e-out); }
html.io-on .catalog__carousel--wall.is-in .catalog__poster[aria-hidden="true"] { opacity: .85; }

/* GSAP assume → o estado inicial é setado pelo próprio GSAP (gsap.set), então o CSS acima fica
   neutralizado para não duplicar. Marcamos com .gsap-on. */
html.gsap-on .reveal,
html.gsap-on .hero__eyebrow,
html.gsap-on .hero__badge,
html.gsap-on .hero__title,
html.gsap-on .hero__subtitle,
html.gsap-on .hero__cta { transition: none; }
/* o card de depoimento é .reveal (GSAP zera a transition na ENTRADA), mas a micro-interação de HOVER
   precisa de transition viva — restaura por cima (mesmo padrão de html.gsap-on .fx-lift:hover). */
html.gsap-on .testimonial { transition: transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out); }
/* títulos de seção animados pelo GSAP (entrada chamativa): hint de compositor p/ 60fps */
html.gsap-on .section__title { will-change: transform, opacity; }

/* MOTION BASE SEMPRE (decisão do dono): em prefers-reduced-motion NÃO desligamos tudo.
   Cortamos só o PESADO — animações CSS contínuas/em loop (auras, marquees, pulse, "ao vivo")
   e o scroll suave. Mantemos um fade/reveal SUAVE de entrada (driven por GSAP ou pela transição
   curta abaixo no caminho .io-on). Assim nunca fica 100% estático pra quem tem reduce-motion. */
@media (prefers-reduced-motion: reduce) {
  /* MOTION BASE: a aura não fica 100% morta (decisão do dono "reduce suaviza, não desliga"): troca o
     breathing AMPLO por um respiro MUITO lento e de baixa amplitude (só opacidade/escala mínimas). */
  .hero__aura { animation: auraBreatheSoft 14s var(--e-inout) infinite alternate; }
  .catalog__track { animation: none; }
  /* MARQUEE = MOTION BASE, não movimento vestibular agressivo (decisão do dono): em reduce-motion
     NÃO desaceleramos a 90s (=16px/s = "morto/lento", o erro de antes). Mantemos a faixa numa
     velocidade de LEITURA contínua, só ~10% mais calma que o ativo (≈30px/s vs ≈34px/s). O que de
     fato suaviza em reduce é a AMPLITUDE do parallax/skew (cortados no JS), não a leitura do logo. */
  .logos-strip__track { animation-duration: 40s; }
  .btn--pulse { animation: none; }
  /* MOTION BASE SEMPRE (decisão do dono p/ os logos): em reduce-motion os logos flutuantes NÃO ficam
     100% parados — trocamos o drift AMPLO (2 eixos + giro) por um "respiro" MUITO SUAVE (só escala
     mínima, lento), respeitando sensibilidade a movimento mas mantendo VIDA. Opacidade base intacta
     (os logos REAIS leem claros). */
  .hero__logo { animation: logoBreatheSoft 7s var(--e-inout) infinite; }
  .hero__logo:nth-child(even) { animation-name: logoBreatheSoft; animation-duration: 8s; }
  .pain__icon svg, .niche__icon svg, .plan__icon svg { animation: none; }
  html { scroll-behavior: auto; }

  /* sem JS algum (nem .gsap-on nem .io-on): tudo já visível e estático (falha-fechada do motion) */
  html:not(.gsap-on):not(.io-on) .reveal,
  html:not(.gsap-on):not(.io-on) .hero__eyebrow,
  html:not(.gsap-on):not(.io-on) .hero__badge,
  html:not(.gsap-on):not(.io-on) .hero__title,
  html:not(.gsap-on):not(.io-on) .hero__subtitle,
  html:not(.gsap-on):not(.io-on) .hero__cta { opacity: 1; transform: none; }

  /* caminho fallback (.io-on) com reduce: mantém o fade/reveal mas SUAVE e curto (motion base) */
  html.io-on.reduce-soft .reveal,
  html.io-on.reduce-soft .hero__eyebrow,
  html.io-on.reduce-soft .hero__badge,
  html.io-on.reduce-soft .hero__title,
  html.io-on.reduce-soft .hero__subtitle,
  html.io-on.reduce-soft .hero__cta,
  html.io-on.reduce-soft .catalog__grid .catalog__poster {
    transition-duration: var(--d-slow) !important;
    transition-timing-function: var(--e-out) !important;
    transform: translateY(12px); /* amplitude pequena, perceptível */
  }
  html.io-on.reduce-soft .reveal { transform: translateY(12px) scale(1); }
  html.io-on.reduce-soft .reveal.is-in,
  html.io-on.reduce-soft .hero.is-in .hero__eyebrow,
  html.io-on.reduce-soft .hero.is-in .hero__badge,
  html.io-on.reduce-soft .hero.is-in .hero__title,
  html.io-on.reduce-soft .hero.is-in .hero__subtitle,
  html.io-on.reduce-soft .hero.is-in .hero__cta,
  html.io-on.reduce-soft .catalog__grid.is-in .catalog__poster { transform: none; }
  /* CRÍTICO: o LOGO em reduce-soft só faz um fade suave de entrada — entra PRESENTE, sem pop de
     escala. A camada .hero__logo-i fica neutra (sem scale .6) p/ não encolher; o float idle já foi
     trocado pelo respiro suave acima (logoBreatheSoft). */
  html.io-on.reduce-soft .hero__logo-i { transform: none !important; }
}

/* ==========================================================================
   ONDA 2 — MICRO-INTERAÇÕES: biblioteca de classes utilitárias (CSS primeiro)
   --------------------------------------------------------------------------
   Diretor de arte + motion (mesa). CSS é a CAMADA BASE da micro-interação — funciona no mobile (70%),
   sem JS e em reduce-motion. O GSAP (lp.js) só ENRIQUECE no desktop/ponteiro fino. Três utilitários:
     .fx-press  → :active scale(--press) em TODO alvo tocável (mobile-first; o "afundar sob o dedo"
                  que tira o medo de golpe). Antes só o .btn tinha — agora é universal.
     .fx-lift   → hover/focus-within sobe --elev + translateY(--lift-*) + borda acende (objeto pousado).
     .fx-focus  → :focus-visible com anel pronto (--focus-ring-shadow) por componente (teclado/AT).
   O componente NUNCA improvisa o delta: tudo sai dos tokens --press/--lift-*/--elev-*/--focus-ring.
   ORÇAMENTO MOBILE/3G: press é barato (1 transform). lift/elev custam sombra+blur → no hover (desktop)
   e cortados/suaves no mobile via as regras de !reduce e da query estreita mais abaixo.
   ANTI-CONFLITO COM GSAP: no desktop o lp.js dirige y/scale dos cards/btn por transform INLINE
   (quickTo). Para o .fx-lift NÃO brigar com o inline, o lift CSS dos cards é suprimido sob
   html.gsap-on (o JS assume o hover); o :active (press) e o :focus (foco) seguem CSS sempre — o
   GSAP não toca neles. Em mobile/sem-JS/reduce o CSS é o único motor. ========================== */

/* ---- .fx-press — feedback tátil universal (mobile-first) ----------------------------- */
/* scale ao tocar/clicar. transform-origin center; só transform (60fps, GPU). NÃO atrelado a REDUCE
   (interação de toque/clique é resposta direta do dedo, não "movimento decorativo" — o dono roda
   reduce e PRECISA sentir o toque). transition curta (--d-micro / --e-press = decisiva, sem overshoot). */
.fx-press { transition: transform var(--d-micro) var(--e-press); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fx-press:active { transform: scale(var(--press)); }
/* alvo que já é transformado por outra regra (ex.: .plan--hl scale 1.015): o press compõe via var
   local --press-extra quando precisar; por padrão o scale puro basta (a maioria dos alvos repousa em
   transform:none). Onde o GSAP dirige inline (cards/btn no desktop) o :active CSS é sobrescrito pelo
   inline só DURANTE o pointer — em toque (mobile) não há pointer hover, então o :active aparece. */

/* ---- .fx-lift — elevação no hover/focus (objeto que sobe pra "mão") ------------------- */
/* repouso herda a --elev do componente; no hover/focus-within sobe um degrau + translateY + borda
   acende no --accent. transition só das props compositáveis. O delta vem do token (--lift-md default;
   chips/links pedem --lift-sm via .fx-lift--sm). */
.fx-lift { transition: transform var(--d-base) var(--e-emphasized), box-shadow var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out); }
.fx-lift:hover, .fx-lift:focus-within { transform: translateY(var(--lift-md)); box-shadow: var(--elev-4); border-color: var(--accent); }
.fx-lift--sm:hover, .fx-lift--sm:focus-within { transform: translateY(var(--lift-sm)); }
/* DESKTOP + GSAP ligado: o lp.js dirige y/scale dos cards por transform inline (quickTo) — então
   suprimimos o translateY do .fx-lift CSS p/ não haver dois donos do transform (o inline venceria,
   mas a transition CSS criaria jitter). A SOMBRA/BORDA do .fx-lift continua (o GSAP só mexe transform).
   Em mobile/touch (sem html.gsap-on OU ponteiro grosso) o CSS volta a ser o motor — mas lá o lift é
   suprimido pela query de toque mais abaixo (orçamento). Sobra: foco por teclado sempre eleva. */
html.gsap-on .fx-lift:hover { transform: none; }
html.gsap-on .fx-lift:focus-within { transform: translateY(var(--lift-md)); } /* teclado: GSAP não cobre foco → CSS mantém */

/* ---- .fx-focus — anel de foco acessível por componente ------------------------------- */
/* :focus-visible com o anel PRONTO em box-shadow (--focus-ring-shadow, ≥3:1 por tema). Tira o outline
   default (que cortaria no overflow:hidden de cards) e dá um anel que respeita o border-radius. */
.fx-focus:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); }
/* quando o alvo já carrega elevação, o foco SOMA o anel à sombra do --elev-4 (não some a profundidade). */
.fx-lift.fx-focus:focus-visible { box-shadow: var(--elev-4), var(--focus-ring-shadow); }

/* ---- BINDINGS POR COMPONENTE (markup congelado por teste) ----------------------------- */
/* Alguns blocos têm o class= ASSERIDO por igualdade nos testes (.plan/.plan--hl/.step/.video__frame —
   contrato de markup). Não podemos APENDAR `.fx-*` nessas strings sem quebrar o teste. Então damos a elas
   o MESMO comportamento das utilitárias direto pelo SELETOR do componente (CSS não é asserido — só o
   markup é). Resultado idêntico ao .fx-press/.fx-lift, sem tocar no HTML congelado. Os blocos com markup
   LIVRE recebem as classes .fx-* de verdade (links/chips/wizard/header/FAQ summary), abaixo no blocks.ts. */
/* PRESS universal (mobile-first) em TODO alvo tocável dos blocos congelados + interativos. */
.plan, .step, .pain__card, .anchor__item, .niche__card, .testimonial, .shot,
.video__frame, .faq__q, .wizard__opt, .wizard__back, .site-header__cta, .anchor__item,
.trustbar__item--link, .catalog__poster {
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.plan:active, .step:active, .pain__card:active, .anchor__item:active,
.video__frame:active, .faq__q:active, .wizard__opt:active, .wizard__back:active,
.site-header__cta:active, .trustbar__item--link:active {
  transition: transform var(--d-micro) var(--e-press);
}
/* o press dos cards/btns congelados — o GSAP no desktop sobrescreve via inline durante o pointer;
   no TOQUE (mobile, sem pointer hover) este :active é o feedback tátil. .plan--hl repousa em scale
   1.015 → o press multiplica (scale menor que o repouso = "afunda" mesmo partindo do destaque). */
.pain__card:active, .anchor__item:active, .video__frame:active,
.faq__q:active, .wizard__opt:active, .wizard__back:active,
.site-header__cta:active, .trustbar__item--link:active, .catalog__poster:active { transform: scale(var(--press)); }
.plan:active { transform: scale(var(--press)); }
.plan--hl:active { transform: scale(calc(1.015 * var(--press))); }
.step:active { transform: scale(var(--press)); }
/* LIFT/FOCO dos blocos congelados já moram nas regras de cada componente (.plan:hover, .niche__card:hover,
   .video__frame:hover acima — todas migradas p/ --elev/--lift). Aqui só garantimos o FOCO acessível por
   teclado nos tocáveis sem anel próprio (cards/links): anel pronto que respeita o raio. */
.plan:focus-visible, .step:focus-visible, .pain__card:focus-visible, .anchor__item:focus-visible,
.faq__q:focus-visible, .wizard__opt:focus-visible, .site-header__cta:focus-visible,
.trustbar__item--link:focus-visible, .catalog__poster:focus-visible {
  outline: none; box-shadow: var(--focus-ring-shadow);
}

/* ---- MICRO-FEEDBACK DE VALOR — pop no preço/contador ao ENTRAR + no HOVER --------------- */
/* o número que VENDE (preço do plano, somatório, métrica, contador) ganha um "respiro de valor":
   no hover do card-pai o preço dá um leve scale+glow (dopamina de "isso vale a pena"). O pop de
   ENTRADA mora no lp.js (count-up + scale); aqui é o realce de HOVER (CSS, barato). Só transform/
   filter → 60fps. transform-origin nas pontas certas p/ não empurrar layout. */
.plan__amount, .anchor__sum, .metric__value, .catalog__count-num, .offer__amount {
  transition: transform var(--d-base) var(--e-spring), filter var(--d-base) var(--e-out);
  transform-origin: center; will-change: auto;
}
.plan:hover .plan__amount, .plan:focus-within .plan__amount,
.offer__card:hover .offer__amount {
  transform: scale(1.06); filter: drop-shadow(0 0 14px var(--accent-glow));
}

/* ---- ORÇAMENTO MOBILE / TOQUE (70% / 3G) ---------------------------------------------- */
/* em ponteiro GROSSO (toque) não existe hover real → o :hover do .fx-lift "gruda" no último toque
   (sombra presa). Cortamos o lift no hover p/ toque; o que importa no mobile é o .fx-press (toque)
   e o foco. As sombras --elev de REPOUSO seguem (são a CAMADA, não o motion) — mas sem o degrau extra
   custoso de hover. O foco por teclado/AT continua elevando (raro no mobile, barato). */
@media (hover: none) {
  .fx-lift:hover { transform: none; box-shadow: inherit; border-color: inherit; }
  .plan:hover .plan__amount, .offer__card:hover .offer__amount { transform: none; filter: none; }
}

/* ---- reduce-motion: micro-interações SUAVIZAM, não somem (decisão do dono) -------------- */
/* o PRESS é resposta direta de toque → mantém (não é movimento vestibular). O LIFT troca a SUBIDA por
   um realce de borda/sombra mais sutil (sem translateY); o pop de valor vira um glow estático suave.
   Nunca fica morto: o foco/hover ainda "acendem", só sem deslocamento. */
@media (prefers-reduced-motion: reduce) {
  .fx-lift:hover, .fx-lift:focus-within { transform: none; box-shadow: var(--elev-3); }
  .plan:hover .plan__amount, .plan:focus-within .plan__amount,
  .offer__card:hover .offer__amount { transform: none; filter: drop-shadow(0 0 10px var(--accent-glow)); }
}

/* ==========================================================================
   ONDA 2 — ATMOSFERA POR SEÇÃO (figura × fundo): cada ATO ganha um fundo próprio
   --------------------------------------------------------------------------
   Hoje todas as seções dividem o mesmo --bg liso → os cards "flutuam no vazio". Damos um FUNDO
   atmosférico sutil por seção (radial-gradient de tema MUITO baixo + surface alternado) p/ o conteúdo
   "pousar" sobre um plano. Custo: 1 gradiente fixo por seção (sem blur, sem animação) → barato no 3G.
   O parallax/blur de atmosfera fica SÓ fora de reduce (regras existentes do hero/aura cobrem o pesado).
   Não toca classes asseridas (atua via :nth-of-type / classe de bloco que o teste não verifica como
   contrato de markup). ========================================================================== */

/* alternância de superfície por seção no fluxo (ritmo de respiração claro/escuro, bem sutil). O
   .section--alt já existe (gradiente claro) — aqui as seções de ATO de SOLUÇÃO/PROVA ganham um halo
   de tema baixo no topo, como se a luz da marca "subisse" no clímax. */
/* ATMOSFERA POR BLOCO sem CORTE (decisão do dono): os halos retangulares ::before com inset:0 cortavam
   na emenda das seções. Trocados por um acento radial MUITO DIFUSO que SANGRA pra fora dos limites do
   bloco (inset negativo amplo + transparent cedo) — funde com o fundo global fixo, sem linha de corte.
   Isolation REMOVIDO p/ o sangramento não ser clipado. */
.section.plans, .section.offer, .section.guarantee,
.section.pain, .section.anchor { position: relative; }
.section.plans::before, .section.offer::before, .section.guarantee::before,
.section.pain::before, .section.anchor::before {
  content: ""; position: absolute; inset: -30% -20%; z-index: -1; pointer-events: none;
  filter: blur(50px); opacity: .6;
}
/* solução (teal, luz que "sobe"). O CLOSING saiu do grupo: como é o último bloco (pouco conteúdo, antes
   do footer), o halo descentralizado parecia uma mancha/bug — fica com o fundo limpo das seções neutras. */
.section.plans::before, .section.offer::before, .section.guarantee::before {
  background: radial-gradient(45% 40% at 50% 30%, var(--accent-glow), transparent 70%);
}
/* dor + ancoragem — a aura DERIVA viva (não estática), funde com o fundo global. Usa a cor da PALETA
   (teal, --accent-glow), não laranja: o "alerta" fica no conteúdo/cenas dos cards, não no fundo do bloco. */
.section.pain::before, .section.anchor::before {
  background: radial-gradient(45% 40% at 50% 60%, var(--accent-glow), transparent 70%);
  animation: blockAura 22s var(--e-inout, ease-in-out) infinite alternate;
}
@keyframes blockAura {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .section.pain::before, .section.anchor::before { animation-duration: 40s; }  /* deriva BEM lenta, viva */
}

/* ==========================================================================
   ELEMENTOS ANIMADOS AUTORAIS — ONDA P0 (dupla motion-designer)
   Cada elemento NARRA o bloco. Só transform/opacity (+ drop-shadow/dashoffset pontual). O motion
   forte vive no lp.js (GSAP/WAAPI); aqui mora o ESTADO BASE + o FAILSAFE (degrada pra VISÍVEL, nunca
   pra apagado/quebrado) + a versão SUAVE de reduce-motion. Nenhum nome de provider em id/classe.
   ========================================================================== */

/* ---- 10. GARANTIA — escudo de proteção que se monta (CSS da cena abaixo) ---------------- */

/* ---- CENA "ESCUDO DE PROTEÇÃO" — escudo dourado FORTE que se monta (contorno → preenche → ✓) ---- */
.guarantee__scene { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin: 0 auto var(--sp-6); }
.gscene__badge { position: relative; width: 168px; height: 185px; }
@media (max-width: 520px) { .gscene__badge { width: 140px; height: 154px; } }
.gscene__svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 26px color-mix(in oklab, var(--value) 30%, transparent)); }
.gscene__svg path { transform-box: fill-box; transform-origin: center; }
.gscene__g0 { stop-color: color-mix(in oklab, var(--value) 92%, white); }   /* topo claro do gradiente */
.gscene__g1 { stop-color: color-mix(in oklab, var(--value) 70%, black); }   /* base mais escura (volume) */
/* aura: halo dourado FORTE que pulsa atrás do escudo */
.gscene__aura { fill: color-mix(in oklab, var(--value) 55%, transparent); filter: blur(14px); transform: scale(1.06); }
/* corpo do escudo — gradiente dourado SÓLIDO (presença real, não translúcido apagado) */
.gscene__fill { fill: url(#gsGold); }
/* contorno brilhante. FAILSAFE: offset 0 = borda cheia sem JS. */
.gscene__edge { fill: none; stroke: color-mix(in oklab, var(--value) 92%, white); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
/* ✓ que carimba DENTRO do escudo, na metade de baixo (teal = aprovado). FAILSAFE: ✓ cheio sem JS. */
.gscene__check { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 60%, transparent)); }
/* "7" GRANDE na metade de cima do escudo (escuro p/ contrastar com o dourado) */
.gscene__num { position: absolute; top: 14%; left: 0; right: 0; text-align: center; pointer-events: none;
  font-family: var(--ff-num); font-size: 4.2rem; line-height: .8; color: #1a1206; font-weight: 900; text-shadow: 0 1px 0 color-mix(in oklab, var(--value) 80%, white); }
@media (max-width: 520px) { .gscene__num { font-size: 3.4rem; } }
/* "dias de garantia" — legenda FORA do escudo (não vaza mais) */
.gscene__cap { font-family: var(--ff-num); font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--value); }
/* com motion ligado: contorno e ✓ começam "apagados" → lp.js desenha. aura sem pulso até o JS. */
html.gsap-on .gscene__edge, html.io-on .gscene__edge,
html.gsap-on .gscene__check, html.io-on .gscene__check { stroke-dashoffset: 100; }
html.gsap-on .gscene__aura, html.io-on .gscene__aura { opacity: 0; }

/* ---- 7. VÍDEO — play que pulsa + barra de buffering fluida + selo que carimba --------- */
.video__play { z-index: 2; }
/* halo de pulso: anel que expande e some, em loop suave (convite "toca aqui"). Atrás do play. */
.video__halo { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; pointer-events: none;
  animation: videoHalo 2.4s var(--e-out) infinite; }
@keyframes videoHalo {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
/* barra de buffering FLUIDA na base do poster — corre lisa de ponta a ponta (demonstra "não trava").
   É o contraponto ao "sinal que engasga" do bloco dor: aqui NUNCA trava. */
.video__buffer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 2;
  background: color-mix(in oklab, var(--cta-fg) 14%, transparent); overflow: hidden; pointer-events: none; }
.video__buffer-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, transparent, var(--accent) 60%, color-mix(in oklab, var(--accent) 40%, #fff));
  transform: translateX(-110%); animation: videoBuffer 2.6s var(--e-inout) infinite; }
@keyframes videoBuffer {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}
.video__frame:hover .video__buffer-fill { animation-duration: 1.4s; }

/* ---- 5. CHECKLIST — check que se DESENHA por item (cascata) --------------------------- */
/* no item --draw o check VIRA o SVG inline traçado, CENTRADO na medalha (::before = círculo
   accent-soft, flex child em x≈48px, 22px). Suprimimos só o ::after (o check estático em mask) e
   desenhamos o nosso por cima do círculo → UMA marca (medalha + check que se traça), não duas.
   A medalha (::before) é o badge; o SVG é o check vetorial que o lp.js desenha em cascata. */
.checklist__item--draw::after { display: none; }
.checklist__item--draw { position: relative; }
/* o ::before (medalha) é flex child em x≈48–70px, alinhado ao topo (≈16–38px → centro ≈27px). O
   check (16px) assenta CENTRADO nessa medalha: left ≈51px, top ≈19px. Coords fixas (não % do LI de
   2 linhas, que jogava o check pra baixo do círculo). */
.checklist__check { position: absolute; left: 3.2rem; top: 1.2rem; width: 16px; height: 16px;
  color: var(--accent-text); overflow: visible; z-index: 1; }
.checklist__check path {
  /* comprimento do traço do "V" ≈ 22 — FAILSAFE: dashoffset 0 = check CHEIO visível sem JS. */
  stroke-dasharray: 22; stroke-dashoffset: 0; }
/* com motion ligado, o check começa "por desenhar" (offset cheio); o lp.js traça em cascata. */
html.gsap-on .checklist__check path, html.io-on .checklist__check path { stroke-dashoffset: 22; }
html.gsap-on .checklist__item--draw .checklist__check { will-change: stroke-dashoffset; }

/* ---- 3. ANCORAGEM — pilha que soma e COLAPSA no preço único -------------------------- */
/* hints de compositor só quando o motion está ligado (limpos pelo lp.js ao assentar). */
html.gsap-on [data-anchor] .anchor__item { will-change: transform, opacity; }
.anchor__sum[data-anchor-count] { display: inline-flex; }   /* mantém o ícone "ruim" ao LADO do número (não block) */
/* o "tcham" final: a resolução verde (quebra) entra com peso quando o colapso termina. */
html.gsap-on .anchor__resolve { will-change: transform, opacity; }

/* ---- 2. DOR — cenas que encenam a dor (apps pesam · sinal engasga · anzol fisga) ------ */
/* a respiração base do ícone (iconBreathe) é PAUSADA durante a cena autoral e religada ao fim
   (lp.js controla via animationPlayState). will-change só durante o gesto. */
html.gsap-on .pain__icon[data-pain] { will-change: transform; }
html.gsap-on .pain__icon[data-pain] svg { transform-box: fill-box; transform-origin: center; }

/* ==========================================================================
   reduce-motion + sem-JS: versões SUAVES / FAILSAFE dos elementos autorais P0.
   Regra do dono: reduce SUAVIZA (amplitude menor / loop calmo), NUNCA desliga nem deixa apagado.
   Interação por mouse/hover (halo, hover do buffer) NÃO se atrela a reduce.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* VÍDEO: o halo NÃO é loop vestibular agressivo — vira glow estático suave (não pisca). A barra
     de buffering fica num movimento bem lento (motion base, "não trava" continua sugerido), sem
     correr rápido. O play segue clicável. */
  .video__halo { animation: none; opacity: .3; transform: scale(1.5); }
  .video__buffer-fill { animation-duration: 6s; }
  /* CHECKLIST: check já desenhado (sem traçar) — sempre visível. */
  html.gsap-on .checklist__check path, html.io-on .checklist__check path { stroke-dashoffset: 0; }
  /* CENA ESCUDO: reduce mantém o ✓ acontecendo, mas escudo já montado (sem traçar) e aura estática. */
  html.gsap-on .gscene__edge, html.io-on .gscene__edge { stroke-dashoffset: 0; }
  html.gsap-on .gscene__aura, html.io-on .gscene__aura { opacity: 1; }
}
/* sem JS algum: tudo no estado FINAL VISÍVEL (escudo/check cheios, buffer some) — falha-fechada. */
html:not(.gsap-on):not(.io-on) .checklist__check path,
html:not(.gsap-on):not(.io-on) .gscene__edge,
html:not(.gsap-on):not(.io-on) .gscene__check { stroke-dashoffset: 0; }
html:not(.gsap-on):not(.io-on) .video__halo { animation: none; opacity: 0; }

/* ==========================================================================
   ELEMENTOS AUTORAIS — ONDA P1 (passos · nicho · prova · como funciona · cta)
   Mesma doutrina dos P0: só transform/opacity (+ dashoffset pontual); estado FINAL VISÍVEL sem JS
   (failsafe); reduce SUAVIZA (nunca apaga); interação de mouse NÃO atrelada a reduce. Sem nome de
   provider em id/classe. currentColor/--accent → multi-tema.
   ========================================================================== */

/* ---- 12. PASSOS — linha conectora que se desenha 1→2→3 + números que acendem ---------- */
.steps__grid { position: relative; }
/* a linha mora ATRÁS dos cards, na faixa dos números (topo dos cards). full-width, fina. */
.steps__line { position: absolute; left: 0; right: 0; top: calc(var(--sp-6) + 23px); height: 3px;
  width: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.steps__line-track { stroke: color-mix(in oklab, var(--accent) 22%, transparent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.steps__line-draw { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke;
  /* path "M2 1 H98" no viewBox 100 → comprimento 96; usamos dasharray 100 (cobre com folga). FAILSAFE:
     offset 0 = linha CHEIA sem JS. O lp.js seta offset=100 e anima pra 0 (desenha) ao entrar. */
  stroke-dasharray: 100; stroke-dashoffset: 0; }
html.gsap-on .steps__line-draw, html.io-on .steps__line-draw { stroke-dashoffset: 100; }
.step { position: relative; z-index: 1; }            /* cards acima da linha */
.step__num { position: relative; z-index: 2; transform-origin: 50% 50%; }
/* no mobile (1 coluna) a linha horizontal não faz sentido — escondemos (os passos empilham). */
@media (max-width: 700px) { .steps__line { display: none; } }

/* ---- 4. NICHO — gesto do ícone ao entrar (transform-box p/ origem no próprio ícone) --- */
html.gsap-on .niche__icon[data-niche] svg, html.io-on .niche__icon[data-niche] svg {
  transform-box: fill-box; transform-origin: center; }

/* ---- 9. PROVA — métricas count-up · estrelas que preenchem · selo que carimba --------- */
html.gsap-on .metric__value[data-metric-count] { will-change: contents; }
/* estrelas: cada uma é um <span>; a "on" é dourada, a "off" some (clientes reais = nota 5, mas o
   markup é robusto a qualquer nota). FAILSAFE: as `nota` primeiras já visíveis sem JS. */
.testimonial__stars { display: inline-flex; gap: 2px; }
.testimonial__star { color: color-mix(in oklab, var(--value) 22%, transparent); display: inline-block;
  transform-origin: center bottom; }
.testimonial__star.is-on { color: var(--value); }
/* prints em leque: estado inicial neutro (o lp.js dá o gesto). FAILSAFE: visíveis sem JS. */
.shot { transform-origin: bottom center; }
/* selo "Verificado" com o check que se desenha à esquerda do texto. */
.shot__verified { display: inline-flex; align-items: center; gap: .25rem; transform-origin: top right; }
.shot__check { width: 13px; height: 13px; flex: none; color: var(--cta-fg); overflow: visible; }
.shot__check path { stroke-dasharray: 22; stroke-dashoffset: 0; }   /* FAILSAFE: cheio sem JS */
html.gsap-on .shot__verified[data-shot-stamp] .shot__check path, html.io-on .shot__verified[data-shot-stamp] .shot__check path { stroke-dashoffset: 22; }
/* selo das CÓPIAS do marquee (--static, sem data-shot-stamp): check sempre cheio (o JS não as carimba). */
.shot__verified--static .shot__check path { stroke-dashoffset: 0 !important; }

/* ---- 6. CATÁLOGO — contadores com peso (máscara) + parallax por fileira --------------- */
/* máscara: o número sobe de baixo clipado (overflow:hidden). FAILSAFE: estático e visível sem JS. */
.catalog__count-mask { display: block; overflow: hidden; line-height: .85; }
.catalog__count-num { will-change: auto; }
html.gsap-on .catalog__count-num[data-count], html.io-on .catalog__count-num[data-count] { will-change: transform; }
/* parallax por fileira: o canal de transform do .catalog__row é SEPARADO do loop do .catalog__track
   (que vive no translateX da animação CSS) → não brigam. will-change ligado pelo lp.js. */
.catalog__carousel--wall[data-rows-parallax] .catalog__row { will-change: transform; }

/* ---- 15. COMO FUNCIONA — split reveal direcional + cena de devices (faísca que salta) -- */
html.gsap-on [data-howto-media] { will-change: transform; }
/* ARTE — a cena de devices não disputa com o VÍDEO ao lado: vira MICRO-LEGENDA ancorada ao texto
   ("o mesmo app, em qualquer tela"). Compacta, com rótulo, dentro de um cartão sutil. */
.howto__screens {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: inline-flex; flex-direction: column; gap: var(--sp-3);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-elev) 60%, transparent);
}
.howto__screens-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--accent-text);
}
.howto__screens-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
}
.howto__devices-svg { width: 100%; max-width: 280px; height: auto; color: var(--fg-muted); }
/* a tela acende em --accent; o lp.js controla a opacity (0 → acesa). FAILSAFE sem JS: telas apagadas
   é aceitável aqui (a cena é decorativa/aria-hidden e o texto do bloco já diz "qualquer tela"). */
.howto__scr { transform-box: fill-box; }
.howto__spark { transform-box: view-box; }           /* coords da faísca no espaço do viewBox */

/* ---- 16. CTA FINAL — fragmentos que convergem pro botão (eco do hero) ----------------- */
.closing { position: relative; overflow: hidden; }
.closing > .container { position: relative; z-index: 1; }    /* conteúdo acima dos frags */
.closing__frags { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.closing__frag { position: absolute; opacity: .12;
  /* posições orbitando o bloco; float ambiente suave (loop calmo). Reaproveita o logoFloat do hero
     (o antigo fragFloat saiu junto com os estilhaços de ícone-de-linha do hero). */
  animation: logoFloat 9s var(--e-inout) infinite; }
.closing__frag:nth-child(1) { top: 12%; left: 8%; animation-delay: -1s; }
.closing__frag:nth-child(2) { top: 22%; right: 10%; animation-delay: -3s; }
.closing__frag:nth-child(3) { bottom: 18%; left: 14%; animation-delay: -5s; }
.closing__frag:nth-child(4) { bottom: 14%; right: 16%; animation-delay: -2s; }
.closing__frag:nth-child(5) { top: 46%; left: 4%; animation-delay: -4s; }
.closing__frag:nth-child(6) { top: 50%; right: 5%; animation-delay: -6s; }
.closing__fl { display: block; }
.closing__fl svg { width: 40px; height: 40px; color: var(--accent); }
@media (max-width: 760px) { .closing__fl svg { width: 28px; height: 28px; } }
html.gsap-on .closing__frag { will-change: transform, opacity; }

/* ==========================================================================
   reduce-motion + sem-JS: versões SUAVES / FAILSAFE dos elementos autorais P1.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* PASSOS: linha já desenhada (sem traçar) — fluxo visível e estável. */
  html.gsap-on .steps__line-draw, html.io-on .steps__line-draw { stroke-dashoffset: 0; }
  /* PROVA: check do selo já desenhado. */
  html.gsap-on .shot__check path, html.io-on .shot__check path { stroke-dashoffset: 0; }
  /* CTA: frags em float bem lento e discreto (não vestibular agressivo). */
  .closing__frag { animation-duration: 16s; opacity: .1; }
}
/* sem JS algum: P1 no estado FINAL VISÍVEL — falha-fechada. */
html:not(.gsap-on):not(.io-on) .steps__line-draw,
html:not(.gsap-on):not(.io-on) .shot__check path { stroke-dashoffset: 0; }

/* ==========================================================================
   ELEMENTOS AUTORAIS — ONDA P2 (13.faq · 14.pagamento). currentColor/--accent → multi-tema.
   Sem nome de provider em id/classe. Só transform/opacity (+ dashoffset/drop-shadow pontual).
   ========================================================================== */

/* ---- 13. FAQ — abertura suave da resposta (o lp.js anima o .faq__a-inner; o chevron já gira via CSS) */
/* o wrapper interno é o nó que recebe o scaleY/opacity do lp.js. transform-origin top = "abre de cima".
   FAILSAFE: sem JS o details nativo abre/fecha normal (inner sem transform = visível). */
.faq__a-inner { transform-origin: top; }
html.gsap-on .faq__a-inner, html.io-on .faq__a-inner { will-change: auto; }
/* o chevron (::after) gira de + para × ao abrir — já definido acima (.faq__item[open] .faq__q::after).
   reforço de microinteração: o summary "acende" o marcador no hover (sem mexer em layout). */
.faq__q:hover::after { background: var(--accent); }

/* ---- 14. PAGAMENTO — PIX que acende · bandeiras em stagger · check nos selos que se desenha -------- */
/* bandeiras: estado neutro; o lp.js dá o gesto de entrada (stagger). will-change ligado só no efeito. */
html.gsap-on .paybar[data-paybar] .paybar__item,
html.io-on .paybar[data-paybar] .paybar__item { transform-origin: center bottom; }
/* PIX em destaque: o lp.js pulsa o glow em loop (não-reduce). Aqui só garantimos a origem do filtro. */
.paybar__item--hl { transform-origin: center; }
/* selo com check que se desenha — MESMA linguagem do checklist/garantia/prova (coesão "ambiente seguro"). */
.seal--check { display: inline-flex; align-items: center; gap: .4rem; }
.seal__check { width: 14px; height: 14px; flex: none; color: var(--accent); overflow: visible; }
.seal__check path { stroke-dasharray: 22; stroke-dashoffset: 0; }   /* FAILSAFE: cheio sem JS */
html.gsap-on .seal__check path, html.io-on .seal__check path { stroke-dashoffset: 22; }
html.gsap-on .seal__check[data-seal-check] path,
html.io-on .seal__check[data-seal-check] path { will-change: stroke-dashoffset; }

/* reduce-motion: o check do selo já desenhado (sem traçar) e o PIX recebe um GLOW ESTÁTICO suave
   (o pulso em loop fica só fora de reduce — o motion base não some, só não vibra). */
@media (prefers-reduced-motion: reduce) {
  html.gsap-on .seal__check path, html.io-on .seal__check path { stroke-dashoffset: 0; }
  .paybar__item--hl { filter: drop-shadow(0 0 8px var(--accent-glow)); }
  /* CENA AVISO: em reduce o sino ainda toca (JS suave); se IO/gsap falhar, selos não somem. */
  html.gsap-on .tb-ch, html.io-on .tb-ch { opacity: 0; }
}
/* sem JS algum: P2 no estado FINAL VISÍVEL — falha-fechada. */
html:not(.gsap-on):not(.io-on) .seal__check path { stroke-dashoffset: 0; }
html:not(.gsap-on):not(.io-on) .tb-badge { transform: scale(1); }
html:not(.gsap-on):not(.io-on) .tb-ch { opacity: 1; }
html:not(.gsap-on):not(.io-on) .tb-ring--2 { opacity: .4; }   /* 1 anel estático visível */

/* ==========================================================================
   DIFERENCIAIS — "Por que somos a escolha certa": 3 diferenciais (com cena) + mosaico bento.
   ========================================================================== */
.why__grid { display: grid; gap: var(--sp-10); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 920px) { .why__grid { grid-template-columns: 1fr 1.05fr; gap: var(--sp-12); } }
.why__eyebrow { color: var(--accent-text); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tr-caps); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-3); }
.why__title { margin-bottom: var(--sp-8); }
.why__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-6); }
.why__diff { display: flex; align-items: flex-start; gap: var(--sp-4); }
.why__diff-title { font-size: var(--fs-h3); font-weight: var(--fw-bold); margin: 0 0 var(--sp-1); }
.why__diff-text { color: var(--fg-muted); margin: 0; line-height: 1.5; }
/* moldura comum das 3 cenas (a COR distingue a família) */
.why__icon { position: relative; width: 60px; height: 60px; flex: 0 0 auto; display: inline-grid; place-items: center; }
@media (max-width: 520px) { .why__icon { width: 54px; height: 54px; } }
.why__disc { position: absolute; inset: 0; border-radius: 18px; background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--why-c, var(--accent)) 42%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px color-mix(in oklab, var(--why-c, var(--accent)) 20%, transparent); }
.why__svg { position: relative; width: 34px; height: 34px; display: block; color: var(--why-c, var(--accent));
  filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--why-c, var(--accent)) 35%, transparent)); }
/* ícone LIMPO (estilo referência) dentro do disco da família */
.why__ic { position: relative; width: 30px; height: 30px; display: grid; place-items: center; color: var(--why-c, var(--accent));
  filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--why-c, var(--accent)) 35%, transparent)); }
.why__ic svg { width: 30px; height: 30px; display: block; }
/* micro-motion no hover da linha do diferencial (limpo + vivo, não atrelado a reduce) */
.why__diff .why__ic { transition: transform var(--d-base) var(--e-out); }
.why__diff:hover .why__icon--p2p .why__ic { transform: translateY(-3px); }          /* foguete sobe */
.why__diff:hover .why__icon--fresh .why__ic { transform: rotate(180deg); transition-duration: .5s; }  /* refresh gira */
.why__diff:hover .why__icon--chat .why__ic { transform: scale(1.12); }              /* suporte pulsa */
@media (prefers-reduced-motion: reduce) { .why__diff:hover .why__icon--fresh .why__ic { transform: rotate(90deg); } }
.why__icon svg * { transform-box: fill-box; transform-origin: center; }
.why__icon--p2p { --why-c: var(--accent); }
.why__icon--fresh { --why-c: var(--value); }
.why__icon--chat { --why-c: var(--whats); }
.why__icon--fresh .why__disc { background: color-mix(in oklab, var(--value) 12%, transparent); }
.why__icon--chat .why__disc { background: color-mix(in oklab, var(--whats) 12%, transparent); }
/* failsafe das cenas (sem JS = estado final visível); com motor o lp.js esconde o de-onde-vem */
.p2p-edge { stroke-dasharray: 40; stroke-dashoffset: 0; }
.ch-tick { stroke-dasharray: 40; stroke-dashoffset: 0; }
html.gsap-on .p2p-edge, html.io-on .p2p-edge, html.gsap-on .ch-tick, html.io-on .ch-tick { stroke-dashoffset: 40; }
html.gsap-on .p2p-node, html.io-on .p2p-node, html.gsap-on .fr-new, html.io-on .fr-new { opacity: 0; }
html.gsap-on .fr-plus, html.io-on .fr-plus, html.gsap-on .ch-out, html.io-on .ch-out { transform: scale(0); }
.fr-plus { transform-origin: 47px 17px; } .ch-out { transform-origin: 42px 46px; }
/* MOSAICO BENTO (coluna direita) — DUAS COLUNAS escalonadas (ref site-ref.html
   "Por que ... é a escolha certa?"): ESQUERDA = card grande (jogo, 2 linhas) em cima
   + card menor (catalogo, 1 linha) embaixo; DIREITA = card menor (quali, 1 linha) em
   cima + card grande (cinema, 2 linhas) embaixo. 3 linhas iguais em cada coluna → as
   somas casam (mosaico equilibrado). Gap generoso. A diagonal grande↘grande dá o ritmo. */
/* Fiel à ref (glass-panel p-6 rounded-2xl): card com FUNDO claro, PADDING, SOMBRA e hover-lift;
   a cena vive numa MOLDURA de altura fixa DENTRO do card; o título fica EMBAIXO (fora da cena). */
.bento { display: grid; grid-template-columns: 1fr 1fr; align-items: start;
  grid-template-areas: "a b" "a d" "c d"; gap: var(--sp-6); }
.bento__card { grid-area: var(--ga); display: flex; flex-direction: column; padding: var(--sp-5);
  border-radius: var(--r-xl, 1.25rem); border: 1px solid var(--border-strong, var(--border));
  background: var(--surface-elev, var(--surface)); box-shadow: var(--elev-2);
  transition: transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out); }
.bento__card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); box-shadow: var(--elev-3, var(--elev-2)), 0 0 28px color-mix(in oklab, var(--accent) 12%, transparent); }
.bento__card--a { --ga: a; } .bento__card--b { --ga: b; }
.bento__card--c { --ga: c; } .bento__card--d { --ga: d; }
/* moldura da cena: altura fixa (como a img h-32 da ref), cantos arredondados, cena contida (não sangra o card) */
.bento__frame { position: relative; width: 100%; height: 132px; border-radius: var(--r-md); overflow: hidden;
  margin-bottom: var(--sp-4); background: #060d0b; }
.bento__card--a .bento__frame, .bento__card--d .bento__frame { height: 210px; }   /* cards grandes: moldura mais alta */
.bento__scene { position: absolute; inset: 0; overflow: hidden; }
/* títulos discretos (ref: font-bold text-white, NÃO display gigante) — premium = sóbrio */
.bento__cap { font-weight: var(--fw-bold); font-size: var(--fs-base, 1rem); color: var(--fg); margin: 0; line-height: 1.25; letter-spacing: -.01em; }
.bento__card--a .bento__cap, .bento__card--d .bento__cap { font-size: var(--fs-lead, 1.125rem); }
.bento__sub { color: var(--fg-muted); font-size: var(--fs-small); margin-top: var(--sp-1); }
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; }
  .bento__frame { height: 150px; }
  .bento__card--a .bento__frame, .bento__card--d .bento__frame { height: 180px; }
}
.bento__card--img:has(.bento__scene)::after { z-index: 0; }
/* --- CENA "Todos os jogos": estádio + gol + bola --- */
.cs-jogo { color: var(--accent); background: radial-gradient(120% 80% at 50% 12%, color-mix(in oklab, var(--accent) 16%, #0a1714), #060d0b 72%); }
.cs-jogo__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-jogo__pitch { fill: color-mix(in oklab, var(--accent) 24%, #0c1f18); }
.cs-jogo__line, .cs-jogo__circle { stroke: rgba(255,255,255,.5); stroke-width: 1; fill: none; }
.cs-jogo__post { stroke-width: 2.5; stroke: rgba(255,255,255,.85); }
.cs-jogo__net { stroke-width: .8; }
.cs-jogo__trail { stroke-width: 2; stroke-dashoffset: 0; opacity: .55; }
.cs-jogo__ball { filter: drop-shadow(0 0 5px rgba(255,255,255,.7)); }
.cs-jogo__beam { position: absolute; top: -12%; width: 46%; height: 130%; mix-blend-mode: screen; filter: blur(8px); opacity: .5; transform-origin: top center;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent-2, var(--accent)) 34%, transparent), transparent 64%); animation: jgSweep 7s ease-in-out infinite; }
.cs-jogo__beam--l { left: -6%; } .cs-jogo__beam--r { right: -6%; animation-duration: 8.5s; animation-direction: reverse; }
@keyframes jgSweep { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.cs-jogo__live { position: absolute; top: .6rem; left: .6rem; z-index: 3; display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-caption); font-weight: var(--fw-bold); color: #fff; background: rgba(0,0,0,.45); padding: .15rem .5rem; border-radius: var(--r-pill); letter-spacing: .04em; }
.cs-jogo__live i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a5a; animation: livePulse 1.4s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.cs-jogo__score { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: .45rem; background: rgba(0,0,0,.5); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); border-radius: var(--r-sm); padding: .15rem .5rem; }
.cs-jogo__pts { font-family: var(--ff-num); color: #fff; font-size: 1rem; line-height: 1; }
.cs-jogo__crest { width: .7rem; height: .7rem; border-radius: 3px; }
.cs-jogo__crest--a { background: var(--accent); } .cs-jogo__crest--b { background: var(--value); }
/* --- CENA "Imagem em 4K": barras de resolução que sobem + selo 4K --- */
.cs-q { color: var(--accent); background: radial-gradient(90% 80% at 30% 30%, color-mix(in oklab, var(--accent) 14%, #0a1714), #060d0b 72%); }
.cs-q__svg { position: absolute; left: 8%; bottom: 18%; width: 52%; height: 50%; }
.cs-q__bar { opacity: .85; transform-box: fill-box; transform-origin: bottom; }
.cs-q__glow { position: absolute; right: 8%; top: 16%; width: 46%; height: 46%; border-radius: 50%; opacity: .5;
  background: radial-gradient(circle, color-mix(in oklab, var(--value) 40%, transparent), transparent 68%); filter: blur(6px); }
.cs-q__badge { position: absolute; right: 10%; top: 18%; z-index: 2; font-family: var(--ff-num); font-size: 2.2rem; color: var(--value); line-height: 1; filter: drop-shadow(0 0 8px color-mix(in oklab, var(--value) 50%, transparent)); }
.cs-q__sub { position: absolute; right: 10%; top: calc(18% + 2.2rem); z-index: 2; font-size: var(--fs-caption); letter-spacing: var(--tr-caps); color: var(--fg-muted); }
/* --- CENA "Catálogo": parede de mini-pôsters deslizando (muito pra ver, sem número) --- */
.cs-cat { color: var(--accent); background: #070d0b; }
.cs-cat__wall { position: absolute; inset: -12% -4%; display: flex; gap: 6px; opacity: .5; transform: rotate(-4deg) scale(1.12); }
.cs-cat__col { display: flex; flex-direction: column; gap: 6px; flex: 1; animation: catUp 20s linear infinite; }
.cs-cat__col--mid { animation-direction: reverse; animation-duration: 26s; }
@keyframes catUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.cs-cat__p { flex: 0 0 auto; aspect-ratio: 2/3; border-radius: 3px; background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 28%, #11201b), #0c1713); }
.cs-cat__p--1 { background: linear-gradient(150deg, color-mix(in oklab, var(--value) 24%, #1c1810), #14110a); }
.cs-cat__p--2 { background: linear-gradient(150deg, color-mix(in oklab, var(--accent-2, var(--accent)) 28%, #122420), #0c1814); }
.cs-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0,0,0,.55)); }
/* --- CENA "Cinema em casa": sala de cinema — cortina + tela protagonista + facho de projetor + poltronas --- */
.cs-cine { color: var(--accent); background: radial-gradient(120% 90% at 50% 8%, #122019, #070d0b 68%); }
/* moldura de cortina: bandô em cima + cortinas laterais com pregas */
.cs-cine__valance { position: absolute; top: 0; left: 0; right: 0; height: 16%; z-index: 2;
  background: linear-gradient(180deg, color-mix(in oklab, var(--value) 30%, #2a0f10), color-mix(in oklab, var(--value) 14%, #150708) 70%, transparent);
  -webkit-mask: radial-gradient(10px 14px at 10px 100%, transparent 96%, #000) repeat-x bottom / 22px 16px; mask: radial-gradient(10px 14px at 10px 100%, transparent 96%, #000) repeat-x bottom / 22px 16px; }
.cs-cine__curtain { position: absolute; top: 0; bottom: 0; width: 20%; z-index: 2; opacity: .9;
  background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--value) 30%, #1c0a0b), color-mix(in oklab, var(--value) 12%, #0d0405) 7px, color-mix(in oklab, var(--value) 34%, #240c0d) 14px); }
.cs-cine__curtain--l { left: 0; -webkit-mask: linear-gradient(90deg, #000 55%, transparent); mask: linear-gradient(90deg, #000 55%, transparent); }
.cs-cine__curtain--r { right: 0; -webkit-mask: linear-gradient(270deg, #000 55%, transparent); mask: linear-gradient(270deg, #000 55%, transparent); }
/* facho de projetor: cone que desce do alto-fundo e abre sobre a tela */
.cs-cine__beam { position: absolute; top: -6%; left: 50%; width: 86%; height: 96%; transform: translateX(-50%); z-index: 1;
  mix-blend-mode: screen; filter: blur(4px); opacity: .5; transform-origin: top center;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent-2, var(--accent)) 34%, transparent), transparent 78%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); animation: cineFlick 5.5s ease-in-out infinite; }
@keyframes cineFlick { 0%,100% { opacity: .42; } 47% { opacity: .6; } 52% { opacity: .5; } }
/* poeira flutuando no facho */
.cs-cine__dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cs-cine__mote { position: absolute; left: var(--mx); top: 18%; width: 3px; height: 3px; border-radius: 50%;
  background: color-mix(in oklab, var(--accent-2, var(--accent)) 70%, #fff); opacity: 0; transform: scale(var(--ms));
  animation: cineDust 6s ease-in-out var(--md) infinite; }
@keyframes cineDust { 0% { opacity: 0; transform: translateY(0) scale(var(--ms)); } 20% { opacity: .7; } 80% { opacity: .35; } 100% { opacity: 0; transform: translateY(34px) scale(var(--ms)); } }
/* TELA PROTAGONISTA — maior, centrada, com leve perspectiva */
.cs-cine__screen { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); width: 76%; aspect-ratio: 16/9; z-index: 1;
  border-radius: var(--r-sm); background: linear-gradient(180deg, #04130e, #020806);
  box-shadow: 0 14px 36px rgba(0,0,0,.6), 0 0 0 3px color-mix(in oklab, var(--value) 22%, #120606), inset 0 0 0 1px rgba(255,255,255,.12);
  display: grid; place-items: center; overflow: hidden; }
.cs-cine__glow { position: absolute; inset: 0; opacity: 0; background: radial-gradient(70% 90% at 50% 45%, color-mix(in oklab, var(--accent-2, var(--accent)) 60%, transparent), color-mix(in oklab, var(--accent) 26%, transparent) 55%, transparent 78%); }
.cs-cine__scan { position: absolute; left: 0; right: 0; top: 0; height: 26%; opacity: .5; mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent); animation: cineScan 4.2s ease-in-out infinite; }
@keyframes cineScan { 0%,100% { transform: translateY(-30%); opacity: 0; } 50% { transform: translateY(330%); opacity: .5; } }
.cs-cine__play { position: relative; z-index: 2; width: 30%; color: var(--accent-2, var(--accent)); filter: drop-shadow(0 0 10px var(--accent-glow)); }
/* poltronas em silhueta — primeiro plano, recortam a base */
.cs-cine__seats { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30%; z-index: 3;
  color: #030705; filter: drop-shadow(0 -2px 6px rgba(0,0,0,.5)); opacity: .96; }
/* failsafe das cenas do bento (sem JS = visível); com motor o lp.js esconde só o que revela */
html.gsap-on .cs-jogo__ball, html.io-on .cs-jogo__ball, html.gsap-on .cs-jogo__trail, html.io-on .cs-jogo__trail { opacity: 0; }
html.gsap-on .cs-cine__glow, html.io-on .cs-cine__glow { opacity: 0; }
html.gsap-on .cs-cine__play, html.io-on .cs-cine__play { opacity: 0; }
html.gsap-on .cs-cine__scan, html.io-on .cs-cine__scan { opacity: 0; }
html.gsap-on .cs-q__bar, html.io-on .cs-q__bar { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; }
@media (prefers-reduced-motion: reduce) {
  .cs-jogo__beam--l { animation-duration: 18s; } .cs-jogo__beam--r { animation-duration: 20s; }
  .cs-cine__beam { animation-duration: 11s; } .cs-cine__scan { animation-duration: 9s; } .cs-cine__mote { animation-duration: 12s; }
}
html:not(.gsap-on):not(.io-on) .cs-jogo__ball, html:not(.gsap-on):not(.io-on) .cs-cine__glow, html:not(.gsap-on):not(.io-on) .cs-cine__play { opacity: 1; }
/* sem JS: cenas no estado final visível */
html:not(.gsap-on):not(.io-on) .p2p-edge, html:not(.gsap-on):not(.io-on) .ch-tick { stroke-dashoffset: 0; }
html:not(.gsap-on):not(.io-on) .p2p-node, html:not(.gsap-on):not(.io-on) .fr-new { opacity: 1; }
html:not(.gsap-on):not(.io-on) .fr-plus, html:not(.gsap-on):not(.io-on) .ch-out { transform: none; }

/* ==========================================================================
   RODAPÉ — marca + colunas de links + suporte + legal + barra de pagamento/segurança.
   Realoca o antigo bloco "pagamento" (fraco e órfão) para o fim, em estrutura de footer real.
   ========================================================================== */
.site-footer { border-top: 1px solid var(--border); margin-top: var(--sp-24); }
/* padding-BLOCK só (o padding-inline vem do .container) — senão o footer cola na borda no mobile. */
.footer__inner { display: grid; gap: var(--sp-10) var(--sp-8); padding-block: var(--sp-16) var(--sp-12);
  grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-8); } }
/* coluna da marca */
.footer__brand { max-width: 42ch; }
.footer__logo { display: inline-flex; align-items: center; gap: var(--sp-2); }
.footer__icon { border-radius: var(--r-sm); }
.footer__name { font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: var(--fw-regular); letter-spacing: var(--tr-display); text-transform: uppercase; color: var(--fg); }
.footer__tagline { margin: var(--sp-3) 0 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.5; }
/* prova de confiança na coluna da marca: LINHA leve, sem caixa (tom baixo) — substitui o bloco 2x2
   pesado. Ocupa o lugar dos ícones sociais da referência (que não temos). */
.footer__trust { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5); }
.footer__trust-item { display: inline-flex; align-items: center; gap: .4rem; color: var(--fg-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold); white-space: nowrap; }
.footer__trust-item .seal__check { color: var(--accent); }
/* colunas de links */
.footer__col-title { font-family: var(--ff-display); font-weight: var(--fw-regular); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg); margin-bottom: var(--sp-4); }
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.footer__link { color: var(--fg-muted); font-size: var(--fs-small); text-decoration: none; transition: color var(--d-base) var(--e-out); }
.footer__link:hover, .footer__link:focus-visible { color: var(--accent-text); }
/* barra inferior: (copyright + selos de pagamento/privacidade) à esquerda + bandeiras à direita */
.footer__bar { border-top: 1px solid var(--border); }
.footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-8); padding-block: var(--sp-6); }
.footer__bar-left { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.footer__copy { margin: 0; color: var(--fg-faint); font-size: var(--fs-caption); }
/* selos de pagamento/privacidade realocados do bloco 2x2 para o contexto certo (junto às bandeiras) */
.footer__bar-trust { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.footer__bar-trust .footer__trust-item { color: var(--fg-faint); }
.footer__pay { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.footer__pay-label { color: var(--fg-faint); font-size: var(--fs-caption); }
.footer__pay .paybar { margin-top: 0; }
@media (max-width: 520px) { .footer__bar-inner { flex-direction: column; align-items: flex-start; } }
/* no mobile a barra fixa de CTA cobre o rodapé do footer — reserva espaço pra não esconder o pagamento. */
@media (max-width: 899px) { .site-footer { padding-bottom: 84px; } }

/* ==========================================================================
   /renovar — página única de renovação (cliente existente). Shell próprio, simples,
   direto. Reusa os tokens do design system; cada card pinta a borda/acento com a cor
   do produto via --card-cor (inline, validada como hex no servidor; fallback --accent).
   ========================================================================== */
.renovar-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); }
.renovar-header { padding: var(--sp-4) var(--sp-4) 0; }
.renovar-home { color: var(--fg-muted); text-decoration: none; font-size: var(--fs-caption); }
.renovar-home:hover { color: var(--fg); }
.renovar-main { flex: 1; padding: var(--sp-6) var(--sp-4); max-width: 880px; margin: 0 auto; width: 100%; }
.renovar-title { font-family: var(--ff-display, inherit); font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0 0 var(--sp-2); }
.renovar-intro { color: var(--fg-muted); margin: 0 0 var(--sp-6); font-size: var(--fs-lead, 1.05rem); }
.renovar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.renovar-card {
  --card-cor: var(--accent);
  position: relative; display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5); border-radius: var(--radius, 14px);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.renovar-card:hover { transform: translateY(-2px); border-color: var(--card-cor); }
.renovar-card--destaque { border-color: var(--card-cor); box-shadow: 0 0 0 1px var(--card-cor), 0 8px 32px -12px var(--card-cor); }
.renovar-card__selo {
  position: absolute; top: calc(-1 * var(--sp-2)); left: var(--sp-4);
  background: var(--card-cor); color: var(--cta-fg, #08121f);
  font-size: var(--fs-caption); font-weight: 700; padding: 2px 10px; border-radius: 999px;
}
.renovar-card__head { display: flex; align-items: center; gap: var(--sp-3); }
.renovar-card__logo { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; flex: none; }
.renovar-card__logo--generico { display: inline-flex; align-items: center; justify-content: center; color: var(--card-cor); }
.renovar-card__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.renovar-card__nome { font-size: 1.15rem; margin: 0; }
/* badge de código público (HX, P2BR...): UM chip por código, referência pro cliente reconhecer
   o app que comprou. */
.renovar-card__codigo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--fg-muted); line-height: 1.2;
}
.renovar-card__chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.renovar-card__chip {
  color: var(--card-cor); font-weight: 700; letter-spacing: .02em; font-size: .78rem;
  background: color-mix(in oklab, var(--card-cor) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--card-cor) 30%, transparent);
  padding: 2px 8px; border-radius: var(--r-pill, 999px); white-space: nowrap;
}
.renovar-card__cta {
  margin-top: auto; text-align: center; text-decoration: none; font-weight: 700;
  padding: var(--sp-3) var(--sp-4); border-radius: 10px;
  background: var(--card-cor); color: var(--cta-fg, #08121f);
}
.renovar-card__cta:hover { filter: brightness(1.06); }
.renovar-foot { padding: var(--sp-5) var(--sp-4); border-top: 1px solid var(--border); }
.renovar-foot__copy { margin: 0; color: var(--fg-faint); font-size: var(--fs-caption); }

/* ==========================================================================
   HOME-SELETOR (porta de entrada da venda) — lobby de cinema digital
   Reusa tokens do design system; nenhuma paleta nova. Mobile-first.
   ========================================================================== */
.home { position: relative; isolation: isolate; overflow-x: hidden; }

/* --- HERO --- */
.home-hero { position: relative; padding-block: clamp(3.5rem, 12vw, 7rem) clamp(2.5rem, 8vw, 4.5rem); overflow: hidden; }
.home-hero__aura {
  position: absolute; inset: -20% -10% auto -10%; height: 120%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 18%, var(--aura-1), transparent 70%),
    radial-gradient(45% 40% at 78% 0%, var(--aura-2), transparent 72%);
  opacity: .9;
  animation: homeAuraBreathe 9s var(--e-inout) infinite alternate;
}
@keyframes homeAuraBreathe { from { opacity: .65; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }
/* inner ocupa a largura do container e alinha o conteúdo à esquerda (não estrangula em 40ch — isso
   centralizava/espremia a coluna no desktop). A medida de leitura é controlada POR ELEMENTO abaixo. */
.home-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); width: 100%; }
.home-hero__eyebrow, .home-hero__title, .home-hero__lead, .home-hero__cues { width: 100%; }
/* headline cartaz (Bebas condensada cabe MUITO texto por linha): medida larga p/ usar o espaço
   horizontal e reduzir quebras desnecessárias. text-wrap balance equilibra. Mobile usa a tela toda. */
.home-hero__title { max-width: 26ch; }
.home-hero__lead { max-width: 46ch; }
.home-hero__eyebrow { margin: 0; }
.home-hero__title {
  font-family: var(--ff-headline); font-weight: 700; font-size: clamp(2.3rem, 8.5vw, 4.6rem);
  line-height: 1.02; letter-spacing: -.018em; margin: 0; text-wrap: balance;
  font-optical-sizing: auto;
}
.home-hero__title em {
  font-style: normal; font-weight: 900; color: var(--accent-text); position: relative; white-space: nowrap; padding: 0 .04em;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.home-hero__title em::after {
  content: ""; position: absolute; left: -.02em; right: -.02em; bottom: -.04em; height: .08em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: var(--r-pill);
}
.home-hero__lead { color: var(--fg-muted); font-size: var(--fs-lead); font-weight: var(--fw-medium); max-width: 46ch; margin: 0; }
.home-hero__cues { display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.home-cue {
  display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem .4rem .55rem;
  border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: color-mix(in oklab, var(--fg) 92%, var(--fg-muted));
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16));
  border: 1px solid var(--border-strong); backdrop-filter: blur(8px);
}
.home-cue::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent);
  background-image: linear-gradient(135deg, transparent 46%, var(--accent-text) 46%, var(--accent-text) 54%, transparent 54%);
}
.home-hero__cta { margin-top: var(--sp-2); }

/* --- HEAD DE SEÇÃO --- */
.home-section-head { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 44ch; margin-bottom: clamp(2rem, 6vw, 3rem); }
.home-section-head .eyebrow { color: color-mix(in oklab, var(--accent-2) 70%, var(--fg)); }
.home-section-sub { color: var(--fg-muted); font-size: var(--fs-lead); margin: 0; }

/* --- POR QUE TV POR INTERNET (benefícios) --- */
/* grid mobile-first: 1 coluna no celular, 2 a partir de 600px, 4 no desktop. Sem o grid o <ul>
   esticava cada item na largura toda do container (bug de largura no desktop). */
.home-why__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-card); grid-template-columns: 1fr; }
.home-why__item {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: clamp(1.25rem, 4vw, 1.5rem); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--elev-1);
}
.home-why__title { font-family: var(--ff-headline); font-weight: 700; font-size: var(--fs-h3); line-height: 1.15; margin: 0; letter-spacing: -.01em; }
.home-why__text { color: var(--fg-muted); font-size: var(--fs-body); line-height: 1.5; margin: 0; }
@media (min-width: 600px) { .home-why__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .home-why__grid { grid-template-columns: repeat(4, 1fr); } }

/* --- SELETOR DE APPS (o coração) --- */
.home-apps__grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-card);
  grid-template-columns: 1fr;
}
.home-app { display: flex; }
.home-app__card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-5); width: 100%;
  padding: clamp(1.25rem, 5vw, 1.75rem);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--surface-elev) 92%, var(--accent) 8%), var(--surface));
  border: 1px solid var(--border); box-shadow: var(--elev-2);
  overflow: hidden;
  transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
/* faixa de luz de marca no topo do card (objeto de cinema, não card cinza chapado) */
.home-app__card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: .55; transition: opacity var(--d-base) var(--e-out);
}
.home-app__card:hover, .home-app:focus-within .home-app__card {
  transform: translateY(var(--lift-md));
  box-shadow: var(--elev-4);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
}
.home-app__card:hover::before, .home-app:focus-within .home-app__card::before { opacity: 1; }

.home-app__top { display: flex; flex-direction: column; gap: var(--sp-2); }
.home-app__name { font-family: var(--ff-headline); font-weight: 700; font-size: var(--fs-h3); line-height: 1.1; margin: 0; letter-spacing: -.01em; }
.home-app__desc { color: var(--fg-muted); font-size: var(--fs-body); line-height: 1.45; margin: 0; }

.home-app__feats { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.home-app__feat {
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tr-caps);
  color: var(--fg-muted); padding: .3rem .6rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
}

.home-app__actions { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.home-app__more, .home-app__buy { width: 100%; }
.home-app__more { min-height: 48px; }

/* --- AJUDA SOB O SELETOR --- */
.home-apps__help { margin-top: clamp(1.5rem, 5vw, 2.25rem); color: var(--fg-faint); font-size: var(--fs-small); text-align: center; }
.home-apps__help strong { color: var(--fg-muted); font-weight: var(--fw-semibold); }

/* --- COMPRAR vs RENOVAR --- */
.home-paths__title { margin-bottom: clamp(1.5rem, 5vw, 2.5rem); }
.home-paths__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-card); }
.home-path {
  display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start;
  padding: clamp(1.5rem, 5vw, 2rem); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--elev-1);
}
.home-path--renew { background: linear-gradient(180deg, color-mix(in oklab, var(--surface-elev) 88%, var(--accent) 12%), var(--surface)); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
.home-path__tag { font-size: var(--fs-caption); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--accent-text); }
.home-path__title { font-family: var(--ff-headline); font-weight: 700; font-size: var(--fs-h3); margin: 0; }
.home-path__text { color: var(--fg-muted); font-size: var(--fs-body); line-height: 1.5; margin: 0; }
.home-path__cta { margin-top: var(--sp-2); }

/* --- REVENDA (discreto) --- */
.home-reseller__card {
  display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start;
  padding: clamp(1.5rem, 5vw, 2.25rem); border-radius: var(--r-lg);
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in oklab, var(--value) 10%, transparent), transparent 60%),
    var(--surface);
  border: 1px dashed color-mix(in oklab, var(--value) 35%, var(--border));
}
.home-reseller__copy { display: flex; flex-direction: column; gap: var(--sp-2); }
.home-reseller__copy .eyebrow { color: color-mix(in oklab, var(--value) 70%, var(--fg)); }
.home-reseller__title { font-family: var(--ff-headline); font-weight: 700; font-size: var(--fs-h3); margin: 0; }
.home-reseller__text { color: var(--fg-muted); font-size: var(--fs-body); margin: 0; }

/* --- RODAPÉ --- */
.home-footer { border-top: 1px solid var(--border); padding-block: clamp(2.5rem, 8vw, 4rem) 2rem; margin-top: var(--gap-section); }
.home-footer__inner { display: flex; flex-direction: column; gap: var(--sp-8); }
.home-footer__wordmark { font-family: var(--ff-headline); font-weight: 800; font-size: 1.6rem; letter-spacing: -.01em; }
.home-footer__wordmark span { color: var(--accent-text); }
.home-footer__tagline { color: var(--fg-muted); font-size: var(--fs-small); margin: .4rem 0 0; max-width: 38ch; }
.home-footer__nav { display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; }
.home-footer__nav a { color: var(--fg-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); border-bottom: 1px solid transparent; transition: color var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out); }
.home-footer__nav a:hover { color: var(--fg); border-bottom-color: var(--accent); }
.home-footer__legal { color: var(--fg-faint); font-size: var(--fs-caption); margin-top: var(--sp-8); }

/* --- RESPONSIVO (mobile-first → expande) --- */
@media (min-width: 600px) {
  .home-app__actions { grid-template-columns: 1fr 1fr; }
  .home-paths__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 760px) {
  .home-apps__grid { grid-template-columns: repeat(2, 1fr); }
  .home-reseller__card { flex-direction: row; align-items: center; justify-content: space-between; }
  .home-reseller__cta { flex: none; }
  .home-footer__inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .home-footer__nav { justify-content: flex-end; max-width: 60%; }
}
@media (min-width: 1040px) {
  .home-apps__grid { grid-template-columns: repeat(3, 1fr); }
  /* desktop: a headline cartaz usa medida BEM larga (cabe ~3-4 palavras por linha sem espremer);
     o espaço horizontal existe, então menos quebras. O inner segue 100% alinhado à esquerda. */
  .home-hero__title { max-width: 32ch; }
  .home-hero__lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); max-width: 52ch; }
}

/* --- MOTION BASE (entrada sutil) + reduce-motion --- */
@media (prefers-reduced-motion: no-preference) {
  .home-app { opacity: 0; transform: translateY(18px); animation: homeCardIn .6s var(--e-out) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
  @keyframes homeCardIn { to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero__aura { animation: none; }
  .home-app { opacity: 1; transform: none; animation: none; }
}