/* ============================================================
   Artimind — golden-sky-reunion funnel clone (pt-BR)
   Design tokens extracted from the live site.
   ============================================================ */

/* 🔴 TRAVA DE CLASSE — `hidden` tem que esconder DE VERDADE (incidente de 29/07/2026).
   Qualquer regra de AUTOR (uma classe como `.cta{display:flex}` ou um `style="display:flex"`
   inline) vence o `[hidden]{display:none}` da folha do NAVEGADOR. Foi assim que o modal do
   upsell ficou 3h03 cobrindo a tela de 154 clientes com o atributo `hidden` ligado — e o mesmo
   já valia, calado, pro botão "Compartilhar" e pros placeholders "+ foto" do modal.
   Esta linha fecha a categoria inteira em vez de remendar caso a caso (é por isso que ela tem
   `!important`: sem ele não vence style inline). Quem precisar mostrar o elemento tira o
   atributo `hidden`, que é o contrato do HTML.
   Guardado por `test/e2e-tela7.mjs`, que varre todo `[hidden]` e reprova display != none. */
[hidden]{display:none !important}
:root{
  --bg:#000000;
  --primary:#F8545D;      /* coral */
  --secondary:#FFA230;    /* amber */
  --maroon:#42050A;       /* card bg */
  --maroon-line:#820813;  /* progress / selected border / badge */
  --text:#FFFFFF;
  --text-dim:rgba(255,255,255,.62);
  --text-dim2:rgba(255,255,255,.45);
  --btn-active-bg:#FFFFFF;
  --btn-active-fg:#000000;
  --btn-dark-bg:#111111;
  --surface:#100F0F;
  --radius:16px;
  --col: 450px;
  --pad: 24px;
  --font: -apple-system, "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font-family:inherit; }
s{ text-decoration:line-through; }

#app{
  width:min(var(--col),100vw);
  /* o `vh` vem ANTES de propósito: sem ele, num navegador que não conhece `dvh` (Chrome ≤107) a
     declaração inteira cai, o #app fica 0px e a página abre EM BRANCO — todas as `.screen` são
     `position:absolute` e dependem da altura do pai. Medido em 31/07/2026. Não juntar numa linha só. */
  height:100vh;
  height:100dvh;
  margin:0 auto;
  position:relative;
  background:var(--bg);
  overflow:hidden;
}

/* ---------- Screens ---------- */
.screen{ position:absolute; inset:0; display:none; flex-direction:column; }
.screen.is-active{ display:flex; animation:screenIn .45s ease; }
@keyframes screenIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.screen__scroll{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:14px var(--pad) 24px;
  -webkit-overflow-scrolling:touch;
}
.screen__scroll.center{ display:flex; flex-direction:column; align-items:center; }
.screen__scroll::-webkit-scrollbar{ width:0; }

/* Tela 1: agrupa logo+card+CTA no centro vertical p/ o botao "abracar" o card
   (some o vao grande em telas altas; em telas curtas volta a rolar normal) */
#screen-1{ justify-content:center; }
#screen-1 .screen__scroll{ flex:0 1 auto; }

/* ---------- Badge ---------- */
.badge{ width:100%; display:flex; justify-content:center; padding:10px 0 16px; }
.badge img{ height:60px; width:auto; max-width:82%; }

/* ---------- Headings ---------- */
.heading{
  font-size:22px; font-weight:700; line-height:1.25; text-align:center;
  letter-spacing:-.01em; margin:8px 0 18px; max-width:380px;
}
.heading .accent{ color:#D32231; } /* measured email-accent red */
.subhead{ font-size:14px; color:var(--text-dim); text-align:center; margin-top:8px; }
.section-title{ font-size:18px; font-weight:700; line-height:1.3; text-align:center; margin:26px 0 16px; }

/* ---------- CTA buttons ---------- */
.cta-dock{
  flex:0 0 auto; padding:12px var(--pad) max(24px,env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--bg) 55%, transparent);
}
.cta{
  width:100%; height:58px; flex-shrink:0; border-radius:999px;
  background:var(--btn-active-bg); color:var(--btn-active-fg);
  font-size:17px; font-weight:700; letter-spacing:.04em;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, opacity .2s ease, background .2s ease;
}
.cta:active{ transform:scale(.98); }
.cta--inline{ margin:4px 0 0; }
.cta--pulse{ animation:pulse 1.4s infinite; }
@keyframes pulse{       /* measured: 1.4s, base shadow .6 -> 8px transparent + scale 1.01 */
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.6); transform:scale(1); }
  100%{ box-shadow:0 0 0 8px rgba(255,255,255,0); transform:scale(1.01); }
}
.cta.is-disabled,.cta:disabled{
  background:rgba(255,255,255,.85); color:rgba(0,0,0,.42);
  animation:none; cursor:not-allowed;
}
.cta.is-hidden{ opacity:0; pointer-events:none; }
/* High-visibility money button: warm coral→amber gradient + glow + pulse */
.cta--subscribe{
  background:linear-gradient(135deg, #FF7A4D 0%, #F8545D 48%, #FFA230 100%);
  color:#fff; font-size:19px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  height:62px; margin-top:8px; border:none;
  box-shadow:0 10px 26px rgba(248,84,93,.42), 0 2px 6px rgba(0,0,0,.35);
  animation:pulseSub 1.6s ease-in-out infinite;
}
@keyframes pulseSub{
  0%{ box-shadow:0 10px 26px rgba(248,84,93,.42), 0 0 0 0 rgba(255,162,48,.55); transform:scale(1); }
  70%{ box-shadow:0 10px 26px rgba(248,84,93,.42), 0 0 0 14px rgba(255,162,48,0); transform:scale(1.015); }
  100%{ box-shadow:0 10px 26px rgba(248,84,93,.42), 0 0 0 0 rgba(255,162,48,0); transform:scale(1); }
}
.cta--subscribe:active{ transform:scale(.985); }

/* ---------- Maroon card + carousel (screen 1) ---------- */
.maroon-card{
  width:100%; max-width:402px; background:var(--maroon);
  border-radius:var(--radius); padding:18px 14px 16px; margin-top:6px;
  overflow:hidden;
}
.maroon-card__title{
  font-size:20px; font-weight:700; line-height:1.25; text-align:center;
  margin:0 4px 14px;
}
.carousel{ width:100%; overflow:hidden; }
.carousel__track{ display:flex; align-items:center; will-change:transform; transition:transform .6s cubic-bezier(.4,.0,.2,1); }
.carousel__slide{
  flex:0 0 76%; padding:0 6px; transition:transform .6s cubic-bezier(.4,.0,.2,1), opacity .6s ease;
  transform:scale(.84); opacity:.45;
}
.carousel__slide.is-center{ transform:scale(1); opacity:1; }
.carousel__slide img{ width:100%; height:auto; border-radius:20px; aspect-ratio:941/1672; object-fit:cover; }
.carousel--mini .carousel__slide{ flex-basis:62%; }

/* ---------- Uploads (screen 2) ---------- */
.uploads{ width:100%; max-width:402px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.upload{
  position:relative; aspect-ratio:118/164; border-radius:15px;
  border:2px dashed #555;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(255,255,255,.02); overflow:hidden; text-align:center;
  transition:border-color .2s ease;
}
.upload.has-photo{ border-style:solid; border-color:transparent; }
.upload__plus{ font-size:34px; font-weight:300; color:#fff; line-height:1; }
.upload__label{ font-size:12px; font-weight:700; letter-spacing:.06em; color:#fff; }
.upload__change{
  position:absolute; inset:0; display:none; align-items:flex-end; justify-content:center;
  padding-bottom:14px; font-size:12px; font-weight:700; letter-spacing:.05em; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
}
.upload.has-photo .upload__plus,.upload.has-photo .upload__label{ display:none; }
.upload.has-photo .upload__change{ display:flex; }
.upload__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- Templates gallery ---------- */
.templates{ position:relative; width:100%; max-width:402px; margin:0 auto; }
.templates img{ width:100%; height:auto; border-radius:12px; }
/* Eterniza icon overlay covering the source app-icon baked into the collage center */
.templates img.templates__logo{ position:absolute; left:50%; top:86.5%; transform:translate(-50%,-50%); width:26.5%; border-radius:0; }

/* ---------- Loading (screen 3) ---------- */
.loading-screen{ justify-content:space-between; min-height:100%; padding-top:40px; padding-bottom:48px; }
.loading-head{ display:flex; flex-direction:column; align-items:center; }
.loading-example{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.loading-example__cap{ font-size:13px; color:var(--text-dim); text-align:center; max-width:280px; line-height:1.4; }
.loading-example__vid{
  height:min(42vh,380px); aspect-ratio:9/16; width:auto; display:block;
  border-radius:16px; object-fit:cover; background:#000;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}

/* ===== 🅱️ A/B da TELA 3 — braço B (`html.t3nova`, sorteado em js/app.js) =====
   Ordem nova: título → barras → vídeo ocupando o resto, EM PÉ.
   🪤 Os seletores começam em `html.t3nova body.restauro` de propósito: a regra que achata o vídeo
   hoje mora num <style> dentro do `reencontro.html` e tem especificidade (0,1,2,1). Sem o `html` e
   o `body` aqui, este bloco perderia e o vídeo continuaria deitado. */
html.t3nova #screen-3 .subhead,
html.t3nova #screen-3 .loading-example__cap { display:none; }

html.t3nova #screen-3 .loading-screen { padding:16px 16px 20px; justify-content:flex-start; gap:10px; }
html.t3nova #screen-3 .loading-head    { order:1; flex:0 0 auto; }
/* 🪤 o `.bars` traz `margin-top` próprio do CSS base: somado ao `gap` do container virava um vão de
   28px entre o título e a primeira barra. No braço B a distância é só o gap. */
html.t3nova #screen-3 .bars            { order:2; flex:0 0 auto; gap:11px; }
/* medido: sobravam 38px mortos entre o título e a 1ª barra — `margin-top:14px` MAIS
   `padding-top:24px`, os dois vindos do bloco `body.restauro`. Precisa do `body.restauro` no
   seletor pra vencer; só `html.t3nova #screen-3 .bars` não derrubava o padding. */
html.t3nova body.restauro #screen-3 .bars { margin-top:0; padding-top:0; }
html.t3nova #screen-3 .loading-example { order:3; flex:1 1 auto; min-height:0; width:100%; margin-top:0;
  position:relative; display:flex; align-items:flex-end; justify-content:center; }

/* A altura reservada existe pra tela não PULAR quando a frase que se escreve passa de 1 pra 2
   linhas. Sem centralizar, a frase de 1 linha encostava no topo e deixava um buraco embaixo dela. */
html.t3nova #screen-3 .heading { font-size:19px; line-height:1.3; max-width:310px;
  min-height:2.4em; margin:0 0 2px; display:flex; align-items:center; justify-content:center; }
html.t3nova #screen-3 .heading .cursor { display:inline-block; width:2px; height:1em; margin-left:2px;
  background:var(--gold, #e9cb8e); vertical-align:-2px; animation:t3pisca 1s steps(1) infinite; }
@keyframes t3pisca { 50% { opacity:0 } }

html.t3nova body.restauro #screen-3 .loading-example__vid{
  flex:1 1 auto; height:100%; width:auto; max-width:100%; aspect-ratio:9/16; min-height:0;
  object-fit:cover; object-position:center center; margin:0 auto;
  border-radius:18px; border:1px solid rgba(233,203,142,.22); box-shadow:0 16px 38px rgba(0,0,0,.55);
}
/* 📐 Celular baixo (a altura ÚTIL é ~512px num aparelho de 640): medido, sobravam só 116×207 pro
   vídeo depois de título, barras e respiros. Aqui as barras encolhem pra devolver altura ao filme —
   elas continuam legíveis, e é o vídeo que a tela existe pra mostrar. */
@media (max-height: 640px) {
  html.t3nova #screen-3 .loading-screen { padding:12px 14px 14px; gap:8px; }
  html.t3nova #screen-3 .heading { font-size:17px; min-height:2.2em; }
  html.t3nova #screen-3 .bars { gap:7px; }
  html.t3nova #screen-3 .bar__top { margin-bottom:2px; }
  html.t3nova #screen-3 .bar__label { font-size:12px; }
}

html.t3nova #screen-3 .selo-exemplo{
  position:absolute; z-index:2; left:50%; transform:translateX(-50%); bottom:10px;
  background:rgba(10,8,6,.58); backdrop-filter:blur(3px); border:1px solid rgba(233,203,142,.28);
  color:#efe6d6; font-size:11px; line-height:1; padding:5px 10px; border-radius:99px; white-space:nowrap;
}

/* ===== Overrides do funil PET (body.pet) — não afeta o funil principal ===== */
/* Tela 1: conteúdo alinhado ao TOPO (em vez de centralizado) */
body.pet #screen-1{ justify-content:flex-start; }
/* Tela 3 (loading): conteúdo flui do topo (vídeo colado no título) + barras no rodapé + vídeo maior */
body.pet .loading-screen{ justify-content:flex-start; }
body.pet .loading-example{ margin-top:18px; }
body.pet .bars{ margin-top:auto; }
body.pet .loading-example__vid{ height:min(50vh,440px); }
.bars{ width:100%; max-width:360px; display:flex; flex-direction:column; gap:20px; }
.bar__top{ display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:600; margin-bottom:8px; }
.bar__pct{ color:var(--text-dim); font-variant-numeric:tabular-nums; }
.bar.is-done .bar__pct{ color:#3ddc6f; }
.bar__track{ height:5px; border-radius:6px; background:rgba(255,255,255,.12); overflow:hidden; }
.bar__fill{ height:100%; width:0; background:var(--maroon-line); border-radius:6px; transition:width .25s linear; }

/* ===== Overrides do funil RESTAURAÇÃO (body.restauro) — vídeo em destaque + tipografia de conversão ===== */
/* fundo com brilho quente sutil atrás do vídeo (tira o preto puro, dá profundidade) */
body.restauro #screen-3{ background:radial-gradient(120% 58% at 50% 32%, rgba(126,90,32,.17), rgba(0,0,0,0) 62%); }
/* fluxo do topo: vídeo colado no título, barras ancoradas no rodapé -> some o espaço vazio */
body.restauro .loading-screen{ justify-content:flex-start; padding-top:30px; padding-bottom:44px; }
body.restauro .loading-head{ gap:7px; }
body.restauro .heading{ font-size:27px; font-weight:800; letter-spacing:-.022em; line-height:1.16; max-width:430px; margin:4px 0 6px; text-wrap:balance; }
body.restauro .subhead{ font-size:14.5px; color:rgba(255,255,255,.74); max-width:340px; line-height:1.45; text-wrap:balance; }
body.restauro .loading-example{ margin-top:22px; gap:14px; }
body.restauro .loading-example__cap{ font-size:13.5px; color:rgba(255,255,255,.72); }
/* vídeo HERO: bem maior + moldura quente com brilho (foco/destaque = conversão) */
body.restauro .loading-example__vid{
  height:min(60vh,580px); border-radius:20px;
  border:1px solid rgba(233,203,142,.28);
  box-shadow:0 0 70px rgba(216,170,88,.22), 0 24px 56px rgba(0,0,0,.62);
}
/* barras no rodapé + preenchimento dourado (a cor "voltando" à foto) */
body.restauro .bars{ margin-top:auto; max-width:400px; padding-top:24px; }
body.restauro .bar__top{ font-size:14.5px; }
body.restauro .bar__track{ height:6px; background:rgba(255,255,255,.10); }
body.restauro .bar__fill{ background:linear-gradient(90deg,#B47B1E,#E8C25A); }

/* Tela 1 (abertura) — prova social em destaque + value prop com presença */
body.restauro #screen-1{ background:radial-gradient(120% 55% at 50% 28%, rgba(126,90,32,.16), rgba(0,0,0,0) 60%); }
body.restauro .badge{ padding:8px 0 12px; }
/* card premium quente (em vez do maroon vermelho) com fio dourado — casa com os slides */
body.restauro .maroon-card{
  max-width:424px; background:linear-gradient(180deg,#1b1512,#131010);
  border:1px solid rgba(233,203,142,.18); box-shadow:0 22px 54px rgba(0,0,0,.5);
  padding:22px 14px 18px;
}
body.restauro .maroon-card__title{
  font-size:23px; font-weight:800; letter-spacing:-.02em; line-height:1.22;
  margin:0 2px 18px; text-wrap:balance;
}
/* slide central maior + brilho quente (mesmo destaque do vídeo da tela de loading) */
body.restauro .carousel__slide{ flex-basis:82%; }

body.restauro .carousel__slide.is-center img{ box-shadow:0 0 52px rgba(216,170,88,.18), 0 16px 40px rgba(0,0,0,.55); }
/* CTA de abertura: um pouco maior e com leve brilho quente (mantém branco p/ contraste) */
body.restauro .cta-dock{ background:linear-gradient(to top, var(--bg) 62%, transparent); }
body.restauro #screen-1 .cta{ height:60px; font-size:17.5px; }

/* ---------- Wheel (screen 4) ---------- */
/* centraliza verticalmente o conteúdo da roleta -> roda no meio + botão mais perto (safe: em tela curta volta pro topo e rola) */
#screen-4 .screen__scroll{ justify-content:safe center; }
.wheel-copy{ font-size:14px; line-height:1.5; text-align:center; color:rgba(255,255,255,.72); max-width:320px; margin:2px auto 12px; }
.wheel-stage{ position:relative; width:min(330px,84vw); aspect-ratio:1; margin:8px auto 6px; display:flex; align-items:center; justify-content:center; }
.wheel-glow{
  position:absolute; inset:-6%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,162,48,.0) 52%, rgba(255,162,48,.65) 66%, rgba(255,162,48,0) 80%);
  opacity:0; transition:opacity .6s ease; pointer-events:none;
}
.wheel-stage.is-won .wheel-glow{ opacity:1; animation:glowPulse 1.6s ease-in-out infinite; }
@keyframes glowPulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.04); opacity:1; } }
.wheel-pointer{
  position:absolute; top:-2px; left:50%; transform:translateX(-50%); z-index:3;
  width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent;
  border-top:20px solid #fff; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.wheel-wrap{ position:relative; width:100%; height:100%; }
.wheel{ width:100%; height:100%; display:block; transform:rotate(0deg); }
.wheel-wrap.is-spinning .wheel{ transition:transform 4.2s cubic-bezier(.17,.67,.16,.99); }
.wheel-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:54px; height:54px; border-radius:50%; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.wheel-hub::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:var(--maroon); }
.wheel-hint{ font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--text-dim); text-align:center; margin:14px 0; transition:opacity .3s; }
.wheel-hint.is-hidden{ opacity:0; }
.win-card{
  position:relative; width:min(340px,88vw); margin:0 auto; border-radius:20px;
  padding:20px 22px 18px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:
    radial-gradient(130% 100% at 50% -12%, rgba(255,199,59,.22), transparent 62%),
    linear-gradient(180deg, rgba(130,8,19,.5), rgba(18,2,5,.55));
  border:1px solid rgba(255,199,59,.55);
  box-shadow:0 14px 44px rgba(0,0,0,.55), 0 0 34px rgba(255,162,48,.18), inset 0 1px 0 rgba(255,255,255,.06);
  animation:winPop .55s cubic-bezier(.2,.85,.25,1.1) both;
}
.win-card[hidden]{ display:none; }
@keyframes winPop{ 0%{ opacity:0; transform:scale(.86) translateY(10px); } 100%{ opacity:1; transform:none; } }
.win-card__eyebrow{ font-size:12px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:#FFD873; }
.win-card__prize{ display:flex; flex-direction:column; align-items:center; line-height:.98; margin:2px 0 3px; }
.win-card__num{ font-size:64px; font-weight:900; letter-spacing:-1.5px; color:#FFC73B; text-shadow:0 3px 22px rgba(255,162,48,.5); }
.win-card__off{ font-size:17px; font-weight:800; letter-spacing:4px; text-transform:uppercase; color:#fff; margin-top:-1px; padding-left:4px; }
.win-card__small{ font-size:11.5px; color:rgba(255,255,255,.58); line-height:1.45; max-width:250px; }

/* Confetti — dispara no fim do giro da roleta */
.confetti-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:60; }
.confetti-piece{
  position:absolute; top:-18px; display:block; background:var(--c);
  border-radius:2px; will-change:transform, opacity;
  animation:confettiFall var(--dur,3s) cubic-bezier(.25,.6,.4,1) var(--delay,0s) forwards;
}
@keyframes confettiFall{
  0%{ transform:translate(0,-18px) rotate(0deg); opacity:1; }
  90%{ opacity:1; }
  100%{ transform:translate(var(--dx,0), 108vh) rotate(var(--rot,360deg)); opacity:.9; }
}

/* ---------- Email (screen 5) ---------- */
.email-input{
  width:100%; max-width:402px; height:54px; border-radius:var(--radius);
  background:var(--surface); border:1px solid rgba(255,255,255,.14); color:#fff;
  font-size:16px; padding:0 18px; margin:4px 0 14px; outline:none;
  transition:border-color .2s;
}
.email-input::placeholder{ color:var(--text-dim2); }
.email-input:focus{ border-color:rgba(255,255,255,.4); }
.help-text{ font-size:12.5px; line-height:1.5; color:var(--text-dim); text-align:center; max-width:380px; }
.help-text strong{ color:rgba(255,255,255,.85); }

/* ============================================================
   Screen 6 — Checkout
   ============================================================ */
.co{ padding:0 var(--pad) 40px; }
.countdown{
  width:calc(100% + var(--pad)*2); margin-left:calc(var(--pad)*-1); margin-bottom:14px;
  background:var(--maroon-line); color:#fff; text-align:center;
  font-size:13px; font-weight:600; padding:10px 12px;
}
.countdown strong{ font-variant-numeric:tabular-nums; }
/* Locked/blurred "your memory is ready" hero — teaser, must stay blurred (unlocks on pay).
   Exact values measured from the live original: blur(10px) brightness(.9), scale(1.04), radius 10px, ratio 468/343 */
.co-hero{ position:relative; width:100%; aspect-ratio:468/343; border-radius:10px; overflow:hidden; margin:0 auto 20px; }
.co-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:blur(10px) brightness(.9); transform:scale(1.04); }
.co-hero__veil{ position:absolute; inset:0; background:radial-gradient(circle at 50% 42%, rgba(0,0,0,.12), rgba(0,0,0,.5)); }
.co-hero__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }
.co-hero__lock{ font-size:42px; line-height:1; margin-bottom:14px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.co-eyebrow{ display:block; font-size:11px; font-weight:700; letter-spacing:.12em; color:rgba(255,255,255,.85); margin-bottom:6px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.co-title{ font-size:26px; font-weight:800; text-shadow:0 2px 6px rgba(0,0,0,.6); }

/* Coupon strip — faixa fina lembrando o cupom da roleta (mesma cor do prêmio 50%: #FFC73B) */
.coupon-strip{
  background:rgba(255,199,59,.12); border:1px solid rgba(255,199,59,.4); border-radius:8px;
  color:#FFC73B; font-size:12.5px; font-weight:700; text-align:center;
  padding:8px 12px; margin:0 0 14px;
}

/* Plans */
.plans{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.plan{
  position:relative; width:100%; text-align:left; border-radius:var(--radius);
  background:var(--surface); border:3px solid #636363; padding:14px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  transition:border-color .2s, background .2s;
}
.plan.is-selected{ background:#000; border-color:var(--maroon-line); }
.plan__pop{
  position:absolute; top:-11px; left:14px; background:var(--maroon-line); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.03em; padding:3px 9px; border-radius:7px;
}
.plan__main{ display:flex; flex-direction:column; gap:5px; }
.plan__name{ font-size:16px; font-weight:700; }
.plan__prices{ font-size:15px; color:var(--text-dim); }
.plan__prices s{ color:var(--text-dim2); margin-right:4px; }
.plan__prices b{ color:#fff; }
.plan__perday{ text-align:right; line-height:1; white-space:nowrap; }
.plan__perday b{ font-size:22px; font-weight:800; }
.plan__perday sup{ font-size:12px; font-weight:700; top:-.7em; }
.plan__perday small{ display:block; font-size:11px; color:var(--text-dim); margin-top:3px; font-weight:500; }
.plan__perday--flat b{ font-size:27px; }

/* Payment card */
.pay-card{ background:#fff; color:#111; border-radius:var(--radius); padding:14px; margin-bottom:14px; }
.pay-card__row{ display:flex; align-items:center; gap:8px; font-size:13px; }
.pay-link{ display:inline-flex; align-items:center; gap:5px; font-weight:700; color:#1a1a1a; }
.pay-link__dot{ width:16px; height:16px; border-radius:50%; background:#00d66f; }
.pay-card__email{ color:#444; flex:1; }
.pay-card__more{ color:#999; letter-spacing:1px; }
.pay-card__method{ display:flex; align-items:center; gap:10px; padding:12px 4px 4px; }
.pay-card__visa{ background:#1434CB; color:#fff; font-size:10px; font-weight:800; padding:4px 6px; border-radius:4px; letter-spacing:.5px; }
.pay-card__card{ flex:1; display:flex; flex-direction:column; }
.pay-card__card b{ font-size:14px; }
.pay-card__card small{ color:#888; letter-spacing:1px; }
.pay-card__chev{ color:#bbb; font-size:18px; }
.pay-card__use{ width:100%; margin-top:12px; background:#1a1a1a; color:#fff; border-radius:12px; height:44px; font-weight:600; font-size:14px; }

.ssl-note{ font-size:11px; color:var(--text-dim2); text-align:center; margin:10px 0 0; }

/* Full access pass */
.pass{ margin:26px 0 6px; }
.pass__title{ font-size:18px; font-weight:700; text-align:center; margin-bottom:14px; }
.pass__list{ list-style:none; display:flex; flex-direction:column; gap:12px; max-width:360px; margin:0 auto; }
.pass__list li{ position:relative; padding-left:30px; font-size:14px; font-weight:600; line-height:1.3; }
.pass__list li::before{ content:"✓"; position:absolute; left:0; top:-1px; color:#fff; font-weight:800; font-size:16px; }

/* Guarantee */
.guarantee{ text-align:center; margin:30px 0 10px; display:flex; flex-direction:column; align-items:center; }
.guarantee__shield{
  height:104px; width:auto; display:block; margin-bottom:10px;
  filter:drop-shadow(0 4px 10px rgba(120,210,60,.4));
}
.guarantee__title{ font-size:24px; font-weight:800; line-height:1.2; margin-bottom:12px; }
.guarantee__text{ font-size:13.5px; line-height:1.5; color:var(--text-dim); max-width:360px; margin-bottom:8px; }

/* Social */
.social{ text-align:center; margin-top:30px; }
.social__rating{ font-size:13px; color:var(--text-dim); margin-bottom:6px; }
.social__title{ font-size:20px; font-weight:800; line-height:1.25; margin-bottom:16px; }

/* Footer */
.footer{ text-align:center; margin-top:34px; display:flex; flex-direction:column; gap:8px; }
.footer a{ color:var(--text-dim); font-size:13px; text-decoration:none; }
.footer__help{ margin-top:10px; font-size:13px; color:var(--text-dim); line-height:1.6; }
.footer__help a{ color:var(--secondary); }
.footer__cnpj{ margin-top:6px; font-size:11.5px; color:var(--text-dim); opacity:.75; line-height:1.5; }

/* ---------- Small phones ---------- */
@media (max-width:380px){
  .heading{ font-size:20px; }
  .co-title{ font-size:23px; }
}

/* ============================================================
   Payment modal (AbacatePay)
   ============================================================ */
.paywrap{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center; }
.paywrap[hidden]{ display:none; }
.paywrap__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.66); backdrop-filter:blur(2px); animation:fade .25s ease; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.paysheet{
  position:relative; width:min(450px,100vw); background:#0f0f10; color:#fff;
  border-radius:22px 22px 0 0; padding:24px 22px max(26px,env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.08); box-shadow:0 -10px 40px rgba(0,0,0,.6);
  animation:sheetUp .32s cubic-bezier(.2,.8,.2,1);
}
@media (min-width:480px){ .paywrap{ align-items:center; } .paysheet{ border-radius:22px; } }
@keyframes sheetUp{ from{ transform:translateY(40px); opacity:.4; } to{ transform:none; opacity:1; } }
.paysheet__x{ position:absolute; top:12px; right:14px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:20px; line-height:1; }
.paysheet__title{ font-size:20px; font-weight:800; text-align:center; margin-bottom:6px; }
.paysheet__plan{ text-align:center; color:var(--secondary); font-weight:700; font-size:14px; margin-bottom:18px; }
.paystep--center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.paystep[hidden]{ display:none !important; }   /* beat .paystep--center's display:flex */

/* method buttons */
.paymethod{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  background:var(--surface); border:1px solid rgba(255,255,255,.1); border-radius:14px;
  padding:16px 16px; margin-bottom:12px; text-align:left; transition:border-color .2s, transform .1s;
}
.paymethod:active{ transform:scale(.99); }
.paymethod:hover{ border-color:rgba(248,84,93,.6); }
.paymethod__ic{ font-size:24px; }
.paymethod__txt{ font-size:16px; font-weight:600; }
.paymethod__hint{ font-size:12px; color:var(--text-dim); }
.paymethod[hidden]{ display:none; }
.paysheet__secure{ text-align:center; font-size:12px; color:var(--text-dim2); margin-top:6px; }

/* PIX */
.pix-amount{ text-align:center; font-size:30px; font-weight:800; color:#fff; margin-bottom:14px; }
.pix-qr{ width:230px; height:230px; margin:0 auto 16px; background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pix-qr img{ width:100%; height:100%; object-fit:contain; }
.pix-qr svg{ width:100%; height:100%; display:block; }
.pix-copy{ width:100%; height:50px; border-radius:14px; background:#fff; color:#000; font-size:15px; font-weight:700; margin-bottom:12px; }
.pix-copy.is-done{ background:#3ddc6f; color:#06320f; }

/* 💚 BOTAO DE COPIAR O PIX — verde vivo, pulso e brilho (27/08/2026, aprovado pelo Lucas).
   🔑 POR QUE AQUI E POR ID: as 17 paginas do funil novo tem este mesmo bloco no <style> proprio
   delas, mas 4 paginas de checkout LEGADO (antes-agora, index, pet, restauracao) nunca tiveram
   override nenhum — ficavam com o .pix-copy BRANCO acima e destoavam de todo o resto. Elas
   carregam esta folha, entao a regra alcanca as 4 sem precisar de <style> em cada uma (duas nem
   tem tag <style>). Nas 17 nada muda: o <style> da pagina vem DEPOIS do <link> desta folha e a
   especificidade e a mesma (#id), entao o local vence — e e identico a este.
   🔴 O is-done PARA a animacao de proposito: o feedback de "copiei" nesta tela sempre foi o botao
   ficar verde; com ele ja nascendo verde, o sinal passa a ser o MOVIMENTO CESSANDO.
   🪤 isolation:isolate e obrigatorio — sem ele o ::after com z-index:-1 cai atras do proprio
   fundo do botao e o facho de luz some. */
#pixCopy{ position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(180deg,#41E877 0%,#25C55B 52%,#17A94B 100%); color:#042812;
  font-weight:900; letter-spacing:.01em; border:none;
  box-shadow:0 10px 26px -10px rgba(47,209,95,.7), inset 0 1px 0 rgba(255,255,255,.45),
             inset 0 -2px 6px rgba(4,40,18,.18);
  animation:pixHalo 2.1s ease-in-out infinite; transition:filter .15s, transform .1s; }
#pixCopy:active{ transform:scale(.985); }
#pixCopy::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:38%; z-index:-1;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);
  transform:translateX(-140%) skewX(-20deg);
  animation:pixShine 2.1s cubic-bezier(.32,.72,0,1) infinite; }
@keyframes pixHalo{
  0%,100%{ box-shadow:0 10px 26px -10px rgba(47,209,95,.7), 0 0 0 0 rgba(65,232,119,.45),
                      inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 6px rgba(4,40,18,.18); }
  70%{ box-shadow:0 10px 26px -10px rgba(47,209,95,.7), 0 0 0 9px rgba(65,232,119,0),
                  inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 6px rgba(4,40,18,.18); } }
@keyframes pixShine{ 0%{ transform:translateX(-140%) skewX(-20deg); }
  60%,100%{ transform:translateX(330%) skewX(-20deg); } }
#pixCopy.is-done{ background:linear-gradient(180deg,#8ff0b3,#6fe09c); color:#06320f; animation:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
#pixCopy.is-done::after{ display:none; }
@media (prefers-reduced-motion:reduce){ #pixCopy{ animation:none; } #pixCopy::after{ display:none; } }
.pix-status{ text-align:center; font-size:14px; color:var(--text-dim); display:flex; align-items:center; justify-content:center; gap:8px; }
.pix-status.is-paid{ color:#3ddc6f; font-weight:700; }
.pix-dot{ width:9px; height:9px; border-radius:50%; background:var(--secondary); animation:blink 1s infinite; }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.pix-sim{ width:100%; margin-top:14px; height:42px; border-radius:12px; background:rgba(255,255,255,.08); color:var(--text-dim); font-size:13px; font-weight:600; border:1px dashed rgba(255,255,255,.25); }

/* spinner */
.pix-spin{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.18); border-top-color:var(--primary); animation:spin .8s linear infinite; }
.pix-spin--lg{ width:46px; height:46px; margin:10px auto 16px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.paysheet__redir{ text-align:center; color:var(--text-dim); font-size:14px; }

/* result */
.payresult__ic{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:800; margin-bottom:6px; }
.payresult__ic--ok{ background:rgba(61,220,111,.15); color:#3ddc6f; border:2px solid #3ddc6f; }
.payresult__ic--err{ background:rgba(248,84,93,.15); color:var(--primary); border:2px solid var(--primary); }
.payresult__txt{ font-size:14px; line-height:1.5; color:var(--text-dim); max-width:320px; margin-top:8px; }
.payresult__txt b{ color:#fff; }

/* v1: 1 foto + preço único */
.uploads--single{grid-template-columns:1fr;justify-items:center}
.uploads--single .upload{width:min(64%,230px)}
.plans--single{display:block}
.plans--single .plan{width:100%}

/* Checkout PIX inline (tela 6) — substitui o modal */
/* 💳 O CARD DE PAGAMENTO GRUDA NO RODAPÉ (30/07/2026).
   Medido antes desta mudança, com a tela de checkout aberta e sem rolar:
     iPhone 12/13/14 (390×844) → botão em 636→692  ✅ aparecia
     iPhone SE / 8   (375×667) → botão em 625→681  ❌ 14px FORA da tela
     Android básico  (360×640) → botão em 614→670  ❌ 30px FORA da tela
   E isso já é o cenário otimista: Safari e Chrome no celular comem ~60px embaixo com a
   própria barra, então na prática o botão nem aparecia nesses aparelhos — a pessoa via uma
   tela que parecia completa (imagem, título, preço, selo de desconto) e ia embora sem
   descobrir que existia um botão logo abaixo da borda.
   Casa com o público 45+, que usa aparelho mais antigo e de tela menor.
   Empurravam o botão pra baixo, nesta ordem: contagem regressiva (37px), imagem do topo
   (229–251px, ~35% da tela), título de 3 linhas (105px), faixa de desconto, prova social e
   card do plano (123px) — ~610px de persuasão antes do único elemento clicável, numa tela
   onde a pessoa JÁ decidiu comprar.
   O sticky também conserta um segundo caso: no estado com o código revelado, o botão de
   copiar ficava em 773→823 e SAÍA da tela assim que a pessoa rolava pra ver o QR ou o
   passo a passo. Agora ele acompanha. */
.cocheck{
  width:100%; max-width:402px; margin:4px auto 8px; background:#15171b;
  border:1px solid #ffffff12; border-radius:18px; padding:18px 16px;
  position:sticky; bottom:0; z-index:5;
  /* o card é opaco e ganha sombra pra ler bem por cima do conteúdo que passa embaixo */
  box-shadow:0 -14px 28px -12px rgba(0,0,0,.75);
  /* respeita a barra de gestos do iPhone sem criar espaço em quem não tem */
  padding-bottom:max(18px, env(safe-area-inset-bottom, 0px));
}
/* espaço extra no fim do scroll pro último conteúdo não morrer atrás do card grudado */
#screen-6 .screen__scroll{ padding-bottom:20px; }
.cocheck__head{ font-size:13.5px; font-weight:700; color:#fff; text-align:center; margin-bottom:14px; }
.cocheck__head b{ color:#ffd54a; }
.cocheck__bolt{ color:#ff8a00; }
.cocheck__body{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; min-height:128px; }
.cocheck__body[hidden]{ display:none; }   /* hidden tem que ganhar do display:flex acima */
.cocheck__center{ text-align:center; }
.cocheck__txt{ font-size:13px; color:#c9c9c9; margin:0; }
.cocheck__okt{ font-size:18px; font-weight:800; color:#fff; margin:2px 0; }

/* ===== MODAL DO 2º VÍDEO (upsell da tela 7) — reforma visual 02/08/2026 =====
   Antes era tudo `style` inline improvisado: fundo roxo (#151021) fora da paleta, fechar com
   `float:right` (que empurrava o título), thumbs com max-width fixo (descentralizava o par) e
   subtítulo longo centralizado quebrando em 3 linhas tortas. Aqui vira classe, na paleta do funil
   (preto + coral + âmbar) e com hierarquia: título > fotos > botão > preço.
   ⚠️ O JS abre com `display:flex` no style inline — por isso `[hidden]` continua vencendo (regra
   global no topo deste arquivo). Não trocar os ids: o e2e e o app.js dependem deles. */
.upsm{ position:fixed; inset:0; z-index:9999; overflow:auto;
  background:rgba(0,0,0,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:16px; align-items:center; justify-content:center; }
.upsm__cx{ position:relative; width:100%; max-width:400px; margin:auto; padding:30px 18px 18px;
  border-radius:20px; text-align:center;
  background:linear-gradient(180deg,#191010 0%,var(--surface) 100%);
  border:1px solid rgba(255,255,255,.10); box-shadow:0 24px 60px rgba(0,0,0,.6); }
.upsm__x{ position:absolute; top:12px; right:12px; width:32px; height:32px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:0; border-radius:50%;
  color:var(--text); font-size:20px; line-height:1; opacity:.75; cursor:pointer; }
.upsm__x:hover{ opacity:1; }
.upsm__h{ margin:0 0 6px; font-size:21px; line-height:1.25; font-weight:800; color:var(--text);
  letter-spacing:-.01em; padding:0 18px; }
.upsm__sub{ margin:0 auto 20px; font-size:14px; line-height:1.45; color:var(--text-dim);
  max-width:30ch; }
/* as duas fotos: grid de colunas IGUAIS — o max-width antigo deixava o par fora do centro */
.upsm__fotos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 14px; }
.upsm__foto{ display:block; cursor:pointer; }
.upsm__moldura{ display:block; position:relative; aspect-ratio:4/5; border-radius:14px;
  overflow:hidden; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14); transition:border-color .15s ease; }
.upsm__foto:hover .upsm__moldura{ border-color:var(--secondary); }
.upsm__moldura img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.upsm__vazio{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--text-dim); }
/* selo "trocar" sempre visível: é a ação que a tela precisa ensinar, e o texto no subtítulo sozinho
   não ensinava (o cliente achava que era só decoração) */
.upsm__trocar{ position:absolute; top:7px; right:7px; width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,.55) center/15px 15px no-repeat;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3.5-3.5M20 16H7l3.5 3.5'/%3E%3C/svg%3E");
  border:1px solid rgba(255,255,255,.28); }
/* vinheta IGUAL nas duas: foto de cliente vem com luz e cor diferentes uma da outra, e sem isso o
   par parecia dois blocos de cor aleatoria em vez de um conjunto */
.upsm__moldura::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.45) 100%); }
.upsm__rot{ display:block; margin-top:8px; font-size:13px; font-weight:600; color:var(--text); }
.upsm__st{ display:block; font-size:11.5px; color:var(--text-dim2); min-height:14px; }
/* preço: uma linha só, âncora riscada colada no valor — some a contradição de ter dois preços
   diferentes na mesma tela (o rótulo do botão e a nota de baixo saem do MESMO valor, via JS) */
.upsm__preco{ display:flex; align-items:center; justify-content:center; gap:10px; margin:4px 0 14px; flex-wrap:wrap; }
.upsm__de{ font-size:14.5px; color:var(--text-dim2); text-decoration:line-through; }
/* valor em BRANCO (o ambar chapado competia com o botao) e o VERDE concentrado no selo: verde de
   desconto e o codigo que o comprador brasileiro le como economia, sem sujar o numero */
.upsm__por{ font-size:30px; font-weight:800; color:var(--text); letter-spacing:-.02em; line-height:1; }
.upsm__off{ padding:4px 9px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.02em;
  color:#04220f; background:#3DDC84; box-shadow:0 0 0 1px rgba(61,220,132,.35), 0 6px 16px rgba(61,220,132,.18); }
.upsm__nota{ margin:10px 0 0; font-size:12.5px; color:var(--text-dim2); }
/* banner do passo 2 — âmbar da paleta, não o amarelo solto de antes */
.upsm__motivo{ margin:0 0 18px; padding:13px 15px; border-radius:14px; text-align:left;
  background:rgba(255,162,48,.10); border:1px solid rgba(255,162,48,.30); }
.upsm__motivo b{ display:block; margin-bottom:4px; font-size:14.5px; color:var(--secondary); }
.upsm__motivo span{ font-size:13px; line-height:1.45; color:var(--text-dim); }
.upsm__code{ width:100%; padding:11px 12px; border-radius:12px; text-align:center; font-size:12.5px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:var(--text); }
.upsm__2nd{ width:100%; margin-top:10px; padding:13px; border-radius:999px; font-size:14.5px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  color:var(--text); cursor:pointer; }
.upsm__2nd:hover{ background:rgba(255,255,255,.12); }

/* 📷 Estado do envio da foto (03/08/2026). O slot só vira `has-photo` — que é o que libera o botão —
   quando o servidor devolve a URL; antes disso ele fica em `is-uploading`. Ver js/app.js:setupUpload. */
/* 🚀 27/08/2026 — O VÉU ESCURO E O SPINNER SAÍRAM (pedido do Lucas: "não precisa dessa animação
   de carregando, pode deixar instantâneo"). A foto aparece nítida no instante da escolha e o botão
   já libera; o upload segue em background e a tela 3 é que o segura, se precisar.
   A classe CONTINUA existindo — é ela que o `checkUploads` lê pra saber que ainda está subindo, e
   que a tela 3 consulta em `esperaUpload`. Só o peso visual saiu: fica a borda dourada sólida,
   que marca "essa já é sua" sem parecer que a tela travou. Falha continua gritando em
   `.upload-erro`, logo abaixo, que é o estado que realmente impede alguém de pagar sem foto. */
.upload.is-uploading{ border-style:solid; border-color:rgba(233,203,142,.55); }
.upload.upload-erro{ border-style:solid; border-color:#c0563f; }
.upload.upload-erro::after{ content:"tentar de novo"; position:absolute; inset:auto 0 0 0;
  background:rgba(140,50,35,.9); color:#fff; font-size:10.5px; padding:3px 0; text-align:center; }
.upload-erro-aviso{ color:#f0a58f; font-size:12.5px; line-height:1.4; margin:6px 0 0; text-align:center; }

/* ============================================================
   🛒 GALERIA DE CENAS DO UPSELL (tela 7) — reformada em 16/08/2026
   Vive aqui, e não no <style> de cada página, porque o mesmo componente entra em TODAS as ofertas
   ativas: duas cópias divergentes do mesmo bloco é como o funil ganha bug que só aparece numa página.
   Tokens são os do funil (--ouro/--pad/--radius): o rascunho com paleta e botão próprios parecia
   widget colado de outro site.

   🔁 O QUE MUDOU E POR QUÊ (o Lucas aprovou a direção "cena grande + miniaturas" em 16/08):
   Antes era uma fileira de 4 cards pequenos que só andava se a pessoa arrastasse ou clicasse na
   seta — ou seja, quem não descobria o gesto via DOIS retângulos parados. Agora UMA cena grande
   roda sozinha e reveza com as outras a cada 3,5s em crossfade; as miniaturas mostram o que ainda
   vem. É o "as opções passando lentamente" que ele pediu, e resolve o mesmo problema que a seta
   tentava resolver (ensinar que existe mais de uma cena) sem depender de gesto nenhum.

   📐 UM EIXO SÓ. O bloco anterior tinha TRÊS bordas esquerdas diferentes (medido em 375px: texto
   30,5 · cards 28,5 · trilho 22,5) porque o `.ups-wrap` usava `margin:0 -6px` pra sangrar e o
   trilho tinha padding próprio. Aqui nada sangra: título, cena, nome, miniaturas, preço, botão e
   nota nascem e morrem na mesma coluna, e a régua é o padding do `.ups`.

   🎯 TUDO CENTRADO (pedido do Lucas, 16/08/2026, olhando a 1ª versão): "o preço tá torto pra
   esquerda". Ele tinha razão e o motivo é geométrico — texto alinhado à esquerda dentro de um card
   estreito, com o selo de % jogado na borda direita por `margin-left:auto`, deixa a linha do preço
   com um buraco no meio. A queixa original NUNCA foi "centralizado", foi "desalinhado": eixos
   diferentes brigando. Aqui o eixo é UM SÓ e é o centro — título, subtítulo, nome da cena, preço,
   botão e nota; a cena grande e as miniaturas ocupam a largura toda, que já é simétrica.
   🪤 `.ups.ups--cenas` (2 classes, especificidade 0-2-0) e não `.ups--cenas`: o <style> inline de
   cada página declara as regras `.ups` com a MESMA especificidade, e nesse empate quem vence é
   quem vem depois — o inline vem depois deste arquivo. Sem as duas classes, nada aqui pega.
   ============================================================ */
/* 🔴 O TAMANHO DESTE CARD NÃO É DETALHE DE ESTILO — MEDIDO EM 16/08/2026.
   A tela 7 inteira mora num `.gen` com `justify-content:center` e conteúdo maior que o container.
   Quando o card do upsell cresce, quem paga a conta é o VÍDEO QUE A CLIENTE COMPROU: ele encolhe
   (604px → 503px na primeira versão desta galeria) e o topo dele sai da tela. Por isso a cena
   grande tem teto em `vh` e os respiros são curtos — "cena grande" aqui significa grande DENTRO
   do card, nunca um card que empurra o entregável pra fora. Mexeu na altura? mede de novo com
   `npm run test:e2e` antes de subir. */
.ups.ups--cenas{ text-align:center; padding:16px; }
.ups--cenas .ups__head{ padding:0; margin-bottom:0; }
.ups--cenas .ups__h{ margin:2px 0 0; font-size:22px; font-weight:700; line-height:1.12;
  letter-spacing:-.5px; text-wrap:balance; }
.ups--cenas .ups__sub{ margin:8px 0 0; font-size:13.5px; line-height:1.35;
  color:var(--text-dim); text-wrap:balance; }
/* os pontinhos eram o indicador do carrossel antigo; a galeria tem contador e miniaturas */
.ups--cenas .ups-pontos{ display:none; }

/* ---- CENA GRANDE — duas camadas de vídeo fazendo crossfade ---- */
/* 🔴 A CENA NÃO PODE SER CORTADA — MEDIDO em 16/08/2026, depois que o Lucas reprovou a 1ª versão.
   Os 4 vídeos de cena são 540×960, ou seja 9:16 VERTICAL (medido por `videoWidth/videoHeight`, não
   pelo nome do arquivo). Enquadrar 9:16 numa caixa larga com `object-fit:cover` corta a diferença:
   a caixa que estava no ar tinha 249×227 (1,09:1) e comia 48,6% da ALTURA da cena — o casal aparecia
   e as asas do anjo ficavam de fora.
   A saída é a caixa nítida ter a MESMA proporção do vídeo (9/16 → corte zero, aritmética, não
   opinião) e o vão que sobra dos lados ser preenchido por uma cópia borrada da própria cena. É o
   enquadramento de player vertical: nada é cortado e mesmo assim a moldura ocupa o card inteiro.
   🪤 A altura tem teto em vh porque quem paga a conta do card alto é o vídeo que a cliente comprou
   (ver o comentário do `#screen-7 .gen` no fim deste bloco). */
.ups-palco{ position:relative; margin:12px 0 0; width:100%;
  height:clamp(250px, 37vh, 330px); border-radius:13px; overflow:hidden;
  background:#0E0D0D; border:1px solid rgba(255,255,255,.07); }
/* fundo: a mesma cena em `cover` (pode cortar à vontade — ninguém lê um blur) */
.ups-fundo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(22px) brightness(.42) saturate(1.1); transform:scale(1.18);
  pointer-events:none; }
/* e uma cortina escura por cima do blur, pra moldura não competir com a cena nítida */
.ups-palco::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(58% 76% at 50% 50%, transparent 38%, rgba(0,0,0,.55) 100%); }

.ups-cenona{ position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:2;
  display:block; -webkit-appearance:none; appearance:none; padding:0; margin:0;
  height:100%; aspect-ratio:9/16; width:auto; max-width:100%;
  border:0; background:transparent; overflow:hidden;
  font:inherit; color:inherit; text-align:left; cursor:pointer; }
/* `cover` aqui NÃO corta: a caixa já é 9/16, igual ao vídeo. Fica como rede de segurança pro dia
   em que alguém publicar uma cena numa proporção diferente. */
.ups-camada{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .62s ease; will-change:opacity; }
.ups-camada.on{ opacity:1; }
/* ⚡ troca por CLIQUE é urgência, não cinema: o js põe .ups-troca-rapida no palco e o fade cai pra
   .18s (o rodízio automático segue no .62s). Pedido do Lucas 18/08 — clicar entre as miniaturas
   demorava ~0,7s por troca e lia como travado. A constante FADE_RAPIDO do js/app.js bate com isto. */
.ups-palco.ups-troca-rapida .ups-camada{ transition-duration:.18s; }
.ups-vinheta{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 22%,transparent 62%,rgba(0,0,0,.45)); }

/* ⏱️ Fio de 2px que enche até a próxima cena. É RITMO DE GALERIA, não contagem de oferta: sem
   número, sem vermelho, sem "acaba em" — e some assim que ela escolhe uma cena. A regra do vault
   proíbe urgência falsa (público em luto), e um fio que só diz "já já troca a imagem" não promete
   que a oferta expira. */
/* o fio e o contador vivem no PALCO (largura cheia), não na cena nítida: presos à faixa de 9/16
   eles virariam um risco de 180px no meio do card */
.ups-trilho{ position:absolute; left:0; right:0; bottom:0; z-index:3; height:2px;
  background:rgba(255,255,255,.10); transition:opacity .25s ease; }
.ups-trilho i{ display:block; height:100%; background:rgba(231,200,107,.6);
  transform:scaleX(0); transform-origin:left center; }
.ups-palco.fixada .ups-trilho{ opacity:0; }

/* selo sobre a cena grande: a escolha não pode depender só de cor */
.ups-marca{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; z-index:3;
  display:none; align-items:center; gap:6px;
  padding:6px 10px 6px 8px; border-radius:999px; background:rgba(10,9,9,.72);
  border:1px solid rgba(231,200,107,.45); backdrop-filter:blur(6px);
  font-size:11.5px; font-weight:600; letter-spacing:.03em; color:#E7C86B; white-space:nowrap; }
.ups-palco.fixada .ups-marca{ display:inline-flex; }

/* ---- NOME DA CENA ---- */
.ups-linha-nome{ margin-top:10px; display:flex; align-items:center; justify-content:center;
  min-height:22px; }
.ups-nome{ margin:0; font-size:16.5px; font-weight:600; letter-spacing:-.2px;
  transition:opacity .18s ease, transform .18s ease; }
.ups-nome.sai{ opacity:0; transform:translateY(4px); }
/* o contador vive SOBRE a cena grande, no canto: numa linha centralizada ele puxaria o nome pro
   lado e recriaria justamente a torção que estamos consertando */
.ups-conta{ position:absolute; top:9px; right:10px; z-index:3;
  padding:3px 8px; border-radius:999px; background:rgba(10,9,9,.62);
  backdrop-filter:blur(4px); font-size:11px; color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums; letter-spacing:.04em; }

/* ---- MINIATURAS — CARROSSEL de UMA linha (21/08/2026) ----
   🩤 ERA UM GRID de 4/5 colunas. Com as 3 cenas de gesto viraram 7 miniaturas, e o grid fez o
   que grid faz: QUEBROU EM DUAS LINHAS (5 em cima, 2 embaixo, penduradas). O Lucas reprovou na
   prévia — e com razão: uma fileira de 2 itens soltos abaixo de uma de 5 lê como layout quebrado,
   não como "tem mais coisa aqui".
   🔁 Agora é uma FITA que rola de lado. A largura de 24% é escolhida pra 4ª miniatura ficar
   CORTADA na borda: é ela que diz "arrasta que tem mais" sem precisar de seta nem de instrução.
   ⚠️ A fita rola, mas NINGUÉM precisa arrastar pra ver as cenas — o rodízio automático continua
   passando sozinho, e o `pintarEstado` (js/app.js) traz a miniatura da vez pra dentro da vista.
   Isto é o que separa esta fita do carrossel que o Lucas reprovou em 16/08: lá, quem não descobria
   o gesto via dois retângulos PARADOS. */
.ups-minis{ margin-top:10px; display:flex; gap:8px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  /* barra de rolagem escondida: no card de 360px ela come 8px de altura e some no mobile de todo
     jeito — deixá-la visível só desalinha a fita das outras bordas do card no desktop. */
  scrollbar-width:none; -ms-overflow-style:none; }
.ups-minis::-webkit-scrollbar{ display:none; }
/* 24% de 264px = ~63px de largura ⇒ 47px de altura no 4:3, acima do `min-height:46px` abaixo.
   Encolher mais quebraria o aspect-ratio (a altura mínima venceria) e desalinharia a fita. */
.ups-mini{ flex:0 0 24%; scroll-snap-align:center; }
.ups-mini{ position:relative; -webkit-appearance:none; appearance:none; padding:0; margin:0;
  border:1px solid rgba(255,255,255,.10); border-radius:10px; overflow:hidden; background:#0E0D0D;
  /* 4:3 e não 1:1 — no card de 360px o quadrado dava 73px de altura só de miniatura, altura que
     sai direto do vídeo da cliente. A largura (~73px) segue muito acima do alvo de toque de 44px. */
  aspect-ratio:4/3; min-height:46px; cursor:pointer; opacity:.42; filter:saturate(.75);
  -webkit-tap-highlight-color:transparent;
  transition:opacity .3s ease, filter .3s ease, border-color .2s ease, transform .18s ease; }
.ups-mini video{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.ups-mini::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.25);
  transition:opacity .3s ease; }
.ups-mini.ativa{ opacity:1; filter:none; border-color:rgba(255,255,255,.28); }
.ups-mini.escolhida{ opacity:1; filter:none; border-color:#E7C86B;
  box-shadow:0 0 0 2px rgba(231,200,107,.9), 0 6px 18px rgba(231,200,107,.18);
  transform:translateY(-1px); }
.ups-mini.ativa::after,.ups-mini.escolhida::after{ opacity:0; }
.ups-mini .ups-check{ position:absolute; top:4px; right:4px; width:19px; height:19px;
  display:none; place-items:center; border-radius:50%; background:#E7C86B; color:#0B0A0A; }
.ups-mini.escolhida .ups-check{ display:grid; }

.ups-mini:focus-visible,.ups-cenona:focus-visible{ outline:2px solid #E7C86B; outline-offset:3px; }

/* ---- PREÇO / BOTÃO ---- */
/* linha fina antes do preço: separa "escolher a cena" de "quanto custa" sem gritar */
.ups--cenas .ups__preco{ position:relative; margin:12px 0 0; padding-top:13px;
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.ups--cenas .ups__preco::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:rgba(255,255,255,.09); }
.ups--cenas .ups__preco s{ font-size:14px; color:var(--text-dim2);
  text-decoration-thickness:1px; }
.ups--cenas .ups__preco b{ font-size:30px; font-weight:700; letter-spacing:-.8px; line-height:1;
  color:#fff; }
/* o selo anda JUNTO do preço, no centro: jogado na borda por `margin-left:auto` ele abria um vão
   no meio da linha e era isso que lia como "torto" */
.ups-off{ padding:6px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.06em; color:#E7C86B;
  background:rgba(231,200,107,.10); border:1px solid rgba(231,200,107,.30); white-space:nowrap; }
/* 🪙 o botão do funil é branco; aqui ele é dourado DE PROPÓSITO: esta é a segunda compra, e o
   branco fazia o CTA do upsell competir de igual pra igual com o "Baixar meu vídeo" logo acima. */
.ups--cenas .cta{ position:relative; overflow:hidden; margin-top:12px; min-height:52px; height:auto;
  border-radius:12px;
  background:linear-gradient(180deg,#F2D890,#E7C86B 52%,#D6B35C); color:#0B0A0A;
  letter-spacing:.08em;
  box-shadow:0 10px 26px rgba(231,200,107,.18), 0 1px 0 rgba(255,255,255,.45) inset;
  transition:transform .12s ease, filter .2s ease; }
.ups--cenas .cta:active{ transform:translateY(1px); filter:brightness(.97); }
/* o texto do botão precisa ficar ACIMA da faixa de luz, senão a luz passa por cima das letras */
.ups--cenas .cta > *{ position:relative; z-index:2; }
.ups--cenas .ups__nota{ margin:10px 0 0; text-align:center; font-size:12px; color:var(--text-dim2); }

/* ✨ BRILHO DO BOTÃO — variação 6 ("respiro + luz"), escolhida pelo Lucas em 16/08/2026 entre as 6
   que ele comparou lado a lado. São dois movimentos somados: o botão respira 1,5% de escala em
   2,6s e uma faixa clara cruza a superfície a cada 3,4s.
   🪤 A faixa tem PAUSA entre as passadas de propósito (o keyframe chega no fim em 62% do ciclo e
   fica parado no resto): sem a pausa vira letreiro de loja, que é o oposto do tom desta oferta. */
@keyframes upsRespiro{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.015); } }
@keyframes upsLuz{ 0%{ transform:translateX(-130%) skewX(-18deg); }
  62%,100%{ transform:translateX(230%) skewX(-18deg); } }
.ups--cenas .cta{ animation:upsRespiro 2.6s ease-in-out infinite; }
.ups--cenas .cta::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:38%; z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);
  animation:upsLuz 3.4s cubic-bezier(.4,0,.2,1) infinite; }
/* o `:active` precisa vencer o respiro, senão o toque não dá retorno nenhum */
.ups--cenas .cta:active{ animation:none; transform:translateY(1px) scale(.995); }

@media (prefers-reduced-motion:reduce){
  /* nada anda sozinho: o JS já não liga o rodízio, e aqui o CSS garante que nem transição sobra */
  .ups-camada,.ups-nome,.ups-mini,.ups--cenas .cta{ transition:none; }
  .ups--cenas .cta,.ups--cenas .cta::after{ animation:none; }
  .ups--cenas .cta::after{ display:none; }
  .ups-trilho{ display:none; }
}

/* ============================================================
   🩹 O VÍDEO DA CLIENTE ESTAVA SENDO CORTADO POR CIMA — achado em 16/08/2026 pelo e2e-tela7
   O `.gen` (no <style> de cada página) é `display:flex; justify-content:center` e o conteúdo da
   tela 7 é MAIOR que ele. Num flex centralizado, o que transborda sai pelos DOIS lados — e o que
   sai por cima fica FORA da área rolável: não existe scroll que alcance.
   MEDIDO no código que está em produção hoje, sem nenhuma mudança minha: `#genVideo` nasce com
   `top:-183px` e rolar o container piora (-406px). O topo do vídeo que a pessoa acabou de comprar
   é inalcançável. Com a galeria nova o card cresceu e o corte ia pra -255px.
   `safe center` é exatamente a regra pra isso: centraliza enquanto couber e, quando não couber,
   alinha pelo início em vez de cortar. A linha sem `safe` fica antes como reserva pra quem não
   entende a palavra-chave (o comportamento nesses navegadores continua sendo o de hoje, não pior).
   🪤 Precisa de `#screen-7` na frente: `.gen` sozinho empata em especificidade com o <style> das
   páginas, que vem depois deste arquivo e venceria.
   ============================================================ */
#screen-7 .gen{ justify-content:center; justify-content:safe center; }

/* ============================================================
   🧾 A/B DO BLOCO DE PREÇO (27/08/2026) — v1 "A Conta" · v4 "Valor Antes do Preço"
   Braço "atual" não tem CSS nenhum aqui de propósito: ele é a régua e não pode
   mudar de aparência por efeito colateral deste bloco.

   🪤 ESPECIFICIDADE, não ordem: o CSS inline de cada página vem DEPOIS deste
   arquivo e venceria no empate (ver o aviso no fim do bloco anterior). Por isso
   todo seletor que reaproveita um nó da produção (`.plan__big`, `.plan__prices s`,
   `.plan__fee b`) é escrito com 3 classes — assim vence `.plan__big{}` das páginas
   sem depender de quem carrega primeiro.
   O markup é montado por `aplicarBlocoArm()` em js/app.js; os nós de preço são
   MOVIDOS pra cá, não recriados.
   ============================================================ */
.plan--bloco{ display:block; text-align:left; }
.plan--bloco > span[style*="none"]{ display:none !important; }

/* tarja "FALTA SÓ O PAGAMENTO" — sangra até a borda do card (compensa padding 14px + borda 3px) */
.plan--bloco .bloco__tarja{
  position:relative; overflow:hidden; display:block; margin:-14px -14px 13px; padding:9px 12px;
  text-align:center; font-size:10.5px; font-weight:800; letter-spacing:.18em; color:#FFD9A8;
  background:linear-gradient(90deg,rgba(130,8,19,0),rgba(130,8,19,.55) 30%,rgba(130,8,19,.55) 70%,rgba(130,8,19,0));
  border-bottom:1px solid rgba(255,162,48,.18);
  border-radius:calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0;
  animation:blocoTarjaBreathe 2.8s ease-in-out infinite;
}
@keyframes blocoTarjaBreathe{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.45) } }
/* facho de luz varrendo, em ciclo alternado com o pulse do CTA pra não estrobar junto */
.plan--bloco .bloco__tarja::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:46%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,217,168,.22) 45%,rgba(255,138,0,.14) 55%,transparent 100%);
  transform:translateX(-130%) skewX(-18deg);
  animation:blocoTarjaSweep 2.8s cubic-bezier(.32,.72,0,1) infinite;
}
@keyframes blocoTarjaSweep{ 0%{ transform:translateX(-130%) skewX(-18deg) } 55%,100%{ transform:translateX(330%) skewX(-18deg) } }
/* 🫀 quem pediu "sem animação" no sistema não leva facho nem respiração — a tarja continua legível */
@media (prefers-reduced-motion:reduce){
  .plan--bloco .bloco__tarja{ animation:none }
  .plan--bloco .bloco__tarja::after{ animation:none; opacity:0 }
}

/* ── V1: o recibo ── */
.plan--bloco-v1 .bloco__rrow{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:7px 0; font-size:13.5px; color:var(--text-dim);
}
.plan--bloco-v1 .bloco__rlab{ flex-shrink:0; }
.plan--bloco-v1 .bloco__rval{ color:#fff; font-variant-numeric:tabular-nums; font-weight:600; text-align:right; }
.plan--bloco-v1 .bloco__rrow--desc .bloco__rlab,
.plan--bloco-v1 .bloco__rrow--desc .bloco__rval{ color:#5fd08a; }
/* a âncora vira valor de linha do recibo: sem risco e sem cinza, senão lê como preço cancelado */
.plan--bloco-v1 .bloco__rval s{ color:#fff; text-decoration:none; margin-right:0; }
.plan--bloco-v1 .bloco__rtot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:9px; padding-top:13px; border-top:1px solid rgba(255,255,255,.14);
}
.plan--bloco-v1 .bloco__rtl{ font-size:14px; font-weight:700; color:#fff; }
.plan--bloco-v1 .bloco__rtl small{ display:block; font-size:11px; font-weight:500; color:var(--text-dim); margin-top:3px; }
.plan--bloco-v1 .bloco__rtv .plan__big{ font-size:33px; font-weight:900; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }

/* ── V4: valor antes do preço ── */
.plan--bloco-v4 .bloco__bullets{ display:flex; flex-direction:column; gap:10px; margin:3px 0 15px; }
.plan--bloco-v4 .bloco__bullet{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px; line-height:1.4; color:rgba(255,255,255,.88);
}
.plan--bloco-v4 .bloco__bic{
  width:19px; height:19px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,199,59,.14); border:1px solid rgba(255,199,59,.45);
  color:var(--gold,#FFC73B); font-size:10.5px; font-weight:900;
}
.plan--bloco-v4 .bloco__v4preco{ display:block; text-align:center; padding:13px 0 2px; border-top:1px solid rgba(255,255,255,.10); }
.plan--bloco-v4 .bloco__de{ display:block; font-size:13px; color:var(--text-dim2); }
.plan--bloco-v4 .bloco__de s{ color:var(--text-dim2); margin-right:0; }
.plan--bloco-v4 .bloco__por .plan__big{ font-size:36px; font-weight:900; letter-spacing:-1px; line-height:1.1; font-variant-numeric:tabular-nums; }
.plan--bloco-v4 .bloco__por{ display:block; margin:3px 0 2px; }
.plan--bloco-v4 .bloco__jacom{ display:block; font-size:11.5px; color:var(--text-dim2); }

/* ── ajustes dos CONTAINERS movidos (27/08/2026) ──────────────────────────────
   `.plan__prices` e `.plan__fee` entram inteiros no desenho novo — é o que mantém
   `applyPriceArm`/`applyServiceFee` achando `.plan__prices s` e `.plan__fee b`.
   O que muda aqui é só como eles se apresentam dentro do recibo/bloco. */
/* a etiqueta "50% OFF" sai nos dois braços: no V1 o desconto já é uma linha explícita
   do recibo, e no V4 o desenho aprovado mostra só "de X por Y" */
.plan--bloco .plan__tag{ display:none; }
.plan--bloco .plan__prices{ font-size:inherit; color:inherit; }
/* no recibo a âncora é um VALOR de linha, não um preço cancelado: sem risco e sem cinza */
.plan--bloco-v1 .bloco__rval .plan__prices s{ color:#fff; text-decoration:none; margin-right:0; }
/* o `.plan__fee` VIRA a linha "Taxa de serviço … R$ 0,91" */
.plan--bloco-v1 .bloco__rrow--fee{ display:block; padding:0; }
.plan--bloco-v1 .bloco__rrow--fee .plan__fee{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  width:100%; padding:7px 0; font-size:13.5px; color:var(--text-dim);
}
.plan--bloco-v1 .bloco__rrow--fee .plan__fee b{ color:#fff; font-weight:600; font-variant-numeric:tabular-nums; }
.plan--bloco-v1 .bloco__rrow--fee .plan__fee svg{ margin-right:auto; }
/* no V4 vira a legenda "já com a taxa de serviço de R$ 0,91", centralizada sob o preço */
.plan--bloco-v4 .bloco__jacom{
  display:flex; align-items:center; justify-content:center; gap:4px;
  font-size:11.5px; color:var(--text-dim2); margin-top:2px;
}
.plan--bloco-v4 .bloco__jacom svg{ display:none; }
.plan--bloco-v4 .bloco__jacom b{ color:inherit; font-weight:600; }
.plan--bloco-v4 .bloco__de .plan__prices{ display:inline; }

/* ── caber na DOBRA do Android básico (360×512) — medido em 27/08/2026 ────────
   O card do V1/V4 é mais alto que a régua e empurrava o `#pixReveal` pra FORA da
   tela: 536px e 608px num viewport de 512. Braço que esconde o botão de comprar
   perde venda por LAYOUT, e o teste leria "o desenho novo converte menos" — mediria
   a dobra, não o desenho. Pego pelo `test/e2e-hero-checkout.mjs` antes de subir.
   Cada corte abaixo existe pra devolver pixel ao CTA, sem descaracterizar o desenho. */
/* o aviso agora mora DENTRO do card: fora dele vira texto repetido e altura perdida */
.etz-bloco .co-eyebrow{ display:none; }
.plan--bloco .bloco__tarja{ margin-bottom:10px; padding:7px 12px; letter-spacing:.14em; }
/* V1: linhas mais justas e total um pouco menor — o recibo continua legível */
.plan--bloco-v1 .bloco__rrow{ padding:5px 0; }
.plan--bloco-v1 .bloco__rrow--fee .plan__fee{ padding:5px 0; }
.plan--bloco-v1 .bloco__rtot{ margin-top:6px; padding-top:9px; }
.plan--bloco-v1 .bloco__rtv .plan__big{ font-size:29px; }
.plan--bloco-v1 .bloco__rtl small{ margin-top:2px; }
/* V4: bullets mais compactos e preço menor — 4 itens + preço é o braço mais alto */
.plan--bloco-v4 .bloco__bullets{ gap:7px; margin:1px 0 11px; }
.plan--bloco-v4 .bloco__bullet{ font-size:13px; line-height:1.32; gap:8px; }
.plan--bloco-v4 .bloco__bic{ width:17px; height:17px; font-size:10px; }
.plan--bloco-v4 .bloco__v4preco{ padding:10px 0 1px; }
.plan--bloco-v4 .bloco__por .plan__big{ font-size:31px; }
/* "⚡ Pague com PIX · aprovação na hora" não existe no desenho aprovado do V1/V4, e ocupava os
   ~37px que faltavam pro CTA caber na dobra. O "aprovação na hora" volta no rodapé seguro,
   escrito pelo js/app.js na montagem. */
.etz-bloco .cocheck__head{ display:none; }
/* últimos 8px pro CTA do V1 caber inteiro na dobra (medido: base 520 de 512) */
.plan--bloco-v1 .bloco__rrow{ padding:4px 0; }
.plan--bloco-v1 .bloco__rrow--fee .plan__fee{ padding:4px 0; }
.plan--bloco-v1 .bloco__rtot{ margin-top:4px; padding-top:7px; }