/* ═══ Landing do FastList ════════════════════════════════════════════════
   Preto e amarelo, tema escuro. Sem vídeo: o fundo é luz do próprio produto.
   Navbar + hero ocupam exatamente 100vh e o preview transborda por baixo,
   cortado pelo overflow-hidden — é ele que promete que existe mais.        */

:root {
  --bg:#0a0a0a; --surface:#171717; --surface-2:#1f1f1f;
  --line:#262626; --line-2:#333;
  --text:#f4f4f5; --muted:#a1a1aa; --faint:#71717a;
  --primary:#fbbf24; --primary-2:#f59e0b; --primary-fg:#0a0a0a;
  --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --glass-line:rgba(255,255,255,.10);
  --glass-line-top:rgba(255,255,255,.20);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* O reset acima zera margem e padding e PARA AÍ. `<button>` continua com o
   estilo do sistema: `border: 2px outset` e `background: buttonface` — um
   cinza `rgb(107,107,107)`. Medido no olho da senha e no botão Entrar do
   popup, que apareciam com moldura branca e miolo cinza sobre o card de
   vidro. Cada botão que define o próprio fundo escondia metade do problema;
   os que não definem mostravam inteiro.
   
   `font: inherit` junto, senão o texto do botão cai na fonte do sistema. */
button {
  border: 0; background: none; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
html{color-scheme:dark;-webkit-text-size-adjust:100%}

body{
  height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  overflow:hidden;
  background-color:var(--bg);
  /* A mesma receita do painel: grade fina para o vidro ter o que borrar, e
     glows âmbar para o fill translúcido ter o que revelar. Sobre preto
     chapado, `backdrop-filter` não faz nada — média de cor chapada é a
     própria cor. */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    radial-gradient(58rem 34rem at 50% -12%, rgba(251,191,36,.13), transparent 64%),
    radial-gradient(46rem 30rem at 8% 12%, rgba(251,191,36,.05), transparent 62%),
    radial-gradient(52rem 34rem at 96% 22%, rgba(59,130,246,.045), transparent 64%);
  color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ─── Navbar ─────────────────────────────────────────────────────────── */
.nav{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;gap:24px}
@media(min-width:768px){.nav{padding:20px 48px}}
@media(min-width:1024px){.nav{padding:20px 80px}}

.logo{display:inline-flex;align-items:center;gap:8px;font-size:19px;font-weight:600;
  letter-spacing:-.02em;color:var(--text);text-decoration:none}
.logo svg{width:19px;height:19px;fill:var(--primary);stroke:none}

.nav-links{display:none;gap:32px}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{font-size:14px;color:var(--muted);text-decoration:none;transition:color .16s}
.nav-links a:hover{color:var(--text)}

.btn-pill{border-radius:999px;padding:9px 20px;font-size:14px;font-weight:500;
  background:var(--primary);color:var(--primary-fg);text-decoration:none;
  transition:background .16s,transform .16s}
.btn-pill:hover{background:var(--primary-2)}

/* ─── Hero ───────────────────────────────────────────────────────────── */
.hero{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;
  padding:8px 20px 0;overflow:hidden;position:relative}

/* Um só keyframe para os cinco blocos; o atraso vem da --d de cada um. */
.reveal{opacity:0;animation:up .62s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1}}

.badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;
  border:1px solid var(--glass-line);border-top-color:var(--glass-line-top);
  background:rgba(255,255,255,.045);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  padding:7px 15px;font-size:12.5px;color:var(--muted);margin-bottom:22px;
  text-align:center}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--danger);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(239,68,68,.18)}

.headline{font-family:var(--serif);font-weight:400;text-align:center;
  font-size:clamp(2.5rem,7vw,4.6rem);line-height:.97;letter-spacing:-.022em;
  max-width:15ch;color:var(--text)}
.headline em{font-style:italic;color:var(--primary)}

/* O subtítulo NUNCA mais largo que a manchete: era a hierarquia invertida
   que os três juízes apontaram. */
.sub{margin-top:18px;text-align:center;font-size:clamp(.95rem,1.6vw,1.05rem);
  line-height:1.6;color:var(--muted);max-width:44ch}

.ctas{margin-top:24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.btn-primary{border-radius:999px;padding:14px 26px;font-size:14.5px;font-weight:600;
  background:var(--primary);color:var(--primary-fg);text-decoration:none;
  box-shadow:0 8px 26px -8px rgba(251,191,36,.5);transition:background .16s,transform .16s}
.btn-primary:hover{background:var(--primary-2);transform:translateY(-1px)}
.btn-play{width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-line);
  background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;
  display:grid;place-items:center;transition:background .16s}
.btn-play:hover{background:rgba(255,255,255,.1)}
.btn-play svg{width:15px;height:15px;fill:currentColor;stroke:none;margin-left:2px}
.cta-nota{font-size:12px;color:var(--faint)}

/* ─── Preview em vidro ───────────────────────────────────────────────── */
.preview{margin-top:34px;width:100%;max-width:1020px;flex:0 0 auto}
.glass{border-radius:18px;overflow:hidden;padding:11px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-line);border-top-color:var(--glass-line-top);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);
  box-shadow: 0 32px 90px -24px rgba(0,0,0,.9)}

.app{border-radius:11px;overflow:hidden;background:var(--bg);border:1px solid var(--line);
  font-size:11px;user-select:none;pointer-events:none;color:var(--text)}

.app-top{display:flex;align-items:center;gap:12px;padding:9px 12px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.app-brand{display:flex;align-items:center;gap:7px;font-weight:600;flex:0 0 auto}
.brand-mark{width:19px;height:19px;border-radius:6px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--primary),var(--primary-2))}
.brand-mark svg{width:11px;height:11px;fill:var(--primary-fg)}
.chev{width:11px;height:11px;fill:none;stroke:var(--faint);stroke-width:2.4}
.app-search{flex:1 1 auto;display:flex;align-items:center;gap:7px;border-radius:7px;
  border:1px solid var(--line);background:rgba(0,0,0,.3);padding:5px 9px;color:var(--faint)}
.app-search svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
kbd{margin-left:auto;border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;
  font-size:9px;font-family:var(--sans);color:var(--faint)}
.app-top-right{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 9px;font-size:9.5px;font-weight:600}
.chip-live{background:rgba(34,197,94,.14);color:#4ade80}
.chip-live i{width:5px;height:5px;border-radius:50%;background:currentColor}
.avatar{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:9px;font-weight:700;color:var(--primary-fg);
  background:linear-gradient(140deg,var(--primary),var(--primary-2))}

/* Em telefones estreitos, o mock do painel precisa obedecer à largura do
   próprio card. O chip textual de conexão é informação decorativa repetida no
   preview; mantê-lo ao lado da marca e do avatar criava overflow horizontal em
   320/375 px, mesmo estando visualmente recortado pela moldura. */
@media(max-width:420px){
  .app-search{display:none}
  .app-top-right .chip{display:none}
}

.app-body{display:flex;min-height:340px}
.app-side{width:146px;flex:0 0 auto;padding:9px 8px;border-right:1px solid var(--line);
  background:rgba(255,255,255,.015)}
.side-group{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin:11px 0 5px 8px}
.side-item{display:flex;align-items:center;gap:8px;border-radius:6px;padding:5px 8px;
  color:#c9c9cf;margin-bottom:1px}
.side-item .ic{width:11px;height:11px;border-radius:3px;background:rgba(255,255,255,.14);flex:0 0 auto}
.side-active{background:rgba(255,255,255,.08);color:#fff;font-weight:600;
  box-shadow:inset 2px 0 0 0 var(--primary)}
.side-active .ic{background:var(--primary)}
.side-badge{margin-left:auto;background:var(--primary);color:var(--primary-fg);
  border-radius:999px;padding:0 5px;font-size:8.5px;font-weight:700}

.app-main{flex:1 1 auto;min-width:0;padding:14px 15px;background:rgba(255,255,255,.012)}
.greet{font-size:14px;font-weight:600;letter-spacing:-.01em}
.greet-sub{font-size:11px;color:var(--muted);margin-top:2px}

.actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:12px 0 13px}
.act{border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  padding:4px 11px;font-size:10px;color:#d4d4d8}
.act-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-fg);font-weight:600}
.act-more{font-size:10px;color:var(--faint)}

.cards{display:flex;gap:11px;margin-bottom:14px}
.c{flex:1 1 0;min-width:0;border-radius:10px;border:1px solid var(--glass-line);
  border-top-color:var(--glass-line-top);background:rgba(255,255,255,.035);padding:11px 12px;
  box-shadow:}
.c-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.c-title{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted);font-weight:600}
.ok{width:11px;height:11px;fill:none;stroke:var(--ok);stroke-width:3}
.c-dots{font-size:11px;color:var(--faint);letter-spacing:1px}
.c-amount{font-size:21px;font-weight:700;letter-spacing:-.02em}
.c-amount .cents{font-size:12px;color:var(--muted);font-weight:500}
.c-stats{display:flex;gap:11px;margin-top:5px;font-size:9.5px;color:var(--faint)}
.c-stats .up{color:#4ade80}
.c-stats .down{color:#f87171}
.spark{width:100%;height:56px;margin-top:7px;display:block}

.row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;
  font-size:10.5px;color:#d4d4d8}
.row b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.row .low{color:var(--warn)}
.row .serv{color:#7dd3fc;font-size:9.5px;font-weight:600}

.tbl-title{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:6px}
.tbl{width:100%;border-collapse:collapse;font-size:10px}
.tbl th{text-align:left;font-weight:600;color:var(--faint);font-size:9px;
  text-transform:uppercase;letter-spacing:.06em;padding:0 0 6px;border-bottom:1px solid var(--line)}
.tbl td{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.045);color:#d4d4d8}
/* Sem o respiro, "Valor" encosta em "Estado" e o cabeçalho lê VALORESTADO —
   alinhar à direita aproxima a célula da próxima coluna, não afasta. */
.tbl .r{text-align:right;font-variant-numeric:tabular-nums;padding-right:18px}
.tbl th.r{padding-right:18px}
.st{display:inline-block;border-radius:999px;padding:2px 8px;font-size:9px;font-weight:600}
.st-warn{background:rgba(245,158,11,.16);color:#fbbf24}
.st-amber{background:rgba(251,191,36,.2);color:#fde68a}
.st-ok{background:rgba(34,197,94,.15);color:#4ade80}

/* No celular o preview continua sendo o herói: ele cresce e transborda em
   vez de encolher até virar borrão, e não sobra faixa de preto morto. */
@media(max-width:760px){
  .hero{padding-top:4px}
  .badge{font-size:11.5px;margin-bottom:16px;padding:6px 12px}
  /* Sem sangramento lateral. A primeira versão puxava o preview para
     132% com margem negativa "para ele continuar sendo o herói", e o que
     ela fazia era cortar a coluna da esquerda: "Bom dia, Nelson" aparecia
     como "on". O corte que vale é o de BAIXO — ele promete que tem mais;
     o da esquerda só esconde. */
  .preview{margin-top:24px;max-width:none;width:100%}
  .app-side{display:none}
  .app-main{padding:12px 12px}
  .greet{font-size:13px}
  .cards{flex-direction:column}
  .tbl th:nth-child(3),.tbl td:nth-child(3){display:none}
}

/* ═══ Páginas internas (preços) ══════════════════════════════════════════
   O hero da raiz é h-screen e não rola. Estas páginas ROLAM — então body
   precisa soltar o overflow, e é por isso que a classe .pagina existe em
   vez de eu mexer no body global. */
body.pagina{height:auto;min-height:100vh;overflow:auto}

/* ═══ Coorte fundadora · /campanha/50-vagas ══════════════════════════════
   Uma página de campanha não é uma segunda landing genérica. O primeiro
   viewport funciona como pôster: promessa de um lado, produto real do outro;
   o resto explica capacidade, sequência e consentimento sem fabricar urgência. */
.campanha-page{overflow-x:hidden}
.campanha-nav{position:absolute;inset:0 0 auto;z-index:3}
.campanha-nav-acoes{display:flex;align-items:center;gap:16px}
.campanha-edicao{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}

.campanha-hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:104px 24px 56px;overflow:hidden}
.campanha-luz{position:absolute;width:62vw;height:62vw;right:-20vw;top:-19vw;border-radius:50%;
  background:rgba(251,191,36,.15);filter:blur(110px);pointer-events:none}
.campanha-hero-interno{position:relative;z-index:1;width:min(1220px,100%);margin:auto;display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr);gap:clamp(42px,7vw,96px);align-items:center}
.campanha-copy{max-width:590px}
.campanha-kicker{display:flex;align-items:center;gap:10px;color:var(--primary);font-size:.72rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.campanha-kicker span{display:block;width:28px;height:1px;background:currentColor}
.campanha-copy h1{margin-top:25px;font-family:var(--serif);font-size:clamp(3.4rem,6.5vw,6.8rem);
  line-height:.88;letter-spacing:-.045em;font-weight:400;max-width:9ch}
.campanha-resumo{margin-top:28px;max-width:48ch;color:var(--muted);font-size:clamp(.98rem,1.5vw,1.13rem);line-height:1.7}
.campanha-cta{margin-top:30px;display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.campanha-cta span{max-width:22ch;color:var(--faint);font-size:.76rem;line-height:1.45}

.campanha-produto{margin:0;transform:rotate(1.4deg)}
.campanha-moldura{padding:10px;border-radius:24px;background:rgba(255,255,255,.055);
  border:1px solid var(--glass-line);border-top-color:var(--glass-line-top);
  box-shadow:0 42px 100px -30px rgba(0,0,0,.95),0 0 80px -32px rgba(251,191,36,.4)}
.campanha-moldura img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line)}
.campanha-produto figcaption{display:grid;grid-template-columns:.8fr 1.2fr;gap:22px;margin-top:18px;
  padding:0 10px;color:var(--muted);font-size:.78rem;line-height:1.5}
.campanha-produto figcaption strong{color:var(--text);font-weight:600}

.campanha-compromisso{width:min(1040px,calc(100% - 40px));margin:0 auto;padding:112px 0}
.campanha-compromisso h2,.campanha-prova h2,.campanha-final h2{font-family:var(--serif);font-weight:400;
  letter-spacing:-.03em;line-height:.98}
.campanha-compromisso h2{margin-top:22px;max-width:15ch;font-size:clamp(2.9rem,6vw,5.7rem)}
.campanha-intro{margin-top:24px;max-width:58ch;color:var(--muted);line-height:1.7}
.campanha-passos{list-style:none;margin-top:64px;border-top:1px solid var(--line)}
.campanha-passos li{display:grid;grid-template-columns:70px minmax(0,1fr);gap:20px;padding:27px 0;
  border-bottom:1px solid var(--line)}
.campanha-passos>li>span{font-family:var(--serif);font-size:1.6rem;color:var(--primary)}
.campanha-passos h3{font-size:1rem;font-weight:600}
.campanha-passos p{margin-top:6px;color:var(--muted);font-size:.9rem;line-height:1.6}

.campanha-prova{width:min(1220px,100%);margin:auto;padding:112px clamp(24px,7vw,100px);display:grid;
  grid-template-columns:1fr .85fr;gap:clamp(44px,9vw,130px);align-items:end;
  border-block:1px solid var(--line);background:rgba(255,255,255,.018)}
.campanha-prova h2{margin-top:22px;font-size:clamp(3rem,6vw,5.8rem);max-width:8ch}
.campanha-prova>p{color:var(--muted);font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.75;max-width:46ch}

.campanha-final{max-width:860px;margin:0 auto;padding:132px 24px 112px;text-align:center;display:flex;
  flex-direction:column;align-items:center}
.campanha-final .campanha-kicker{justify-content:center}
.campanha-final h2{margin-top:22px;font-size:clamp(3rem,7vw,6.2rem)}
.campanha-final>p{margin-top:24px;max-width:60ch;color:var(--muted);font-size:.9rem;line-height:1.7}
.campanha-final .btn-primary{margin-top:32px}
.campanha-rodape{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;padding:28px 20px 42px;
  border-top:1px solid var(--line)}
.campanha-rodape a{color:var(--faint);font-size:.8rem;text-decoration:none;transition:color .16s}
.campanha-rodape a:hover{color:var(--text)}

@media(max-width:820px){
  .campanha-edicao{display:none}
  .campanha-hero{padding:108px 20px 52px}
  .campanha-hero-interno{grid-template-columns:1fr;gap:50px}
  .campanha-copy h1{font-size:clamp(3.35rem,16vw,5.1rem)}
  .campanha-produto{transform:none}
  .campanha-produto figcaption{grid-template-columns:1fr;gap:4px}
  .campanha-prova{grid-template-columns:1fr;padding:84px 24px}
}
@media(max-width:520px){
  .campanha-nav{padding-inline:20px;gap:12px}
  .campanha-nav-acoes{gap:8px}
  .campanha-nav-acoes .btn-pill{padding-inline:14px}
  .campanha-nav .tema-rot{display:none}
  .campanha-hero{min-height:auto;padding-top:114px}
  .campanha-cta{align-items:flex-start;flex-direction:column}
  .campanha-cta .btn-primary{width:100%;text-align:center}
  .campanha-compromisso{padding:88px 0}
  .campanha-passos li{grid-template-columns:46px minmax(0,1fr)}
  .campanha-final{padding-block:96px 82px}
}

[data-tema="claro"] .campanha-prova{background:rgba(255,255,255,.45)}
[data-tema="claro"] .campanha-moldura{background:rgba(255,255,255,.72);
  box-shadow:0 34px 80px -30px rgba(24,24,27,.35),0 0 70px -36px rgba(217,119,6,.35)}

.conteudo{flex:1 1 auto;width:100%;max-width:1080px;margin:0 auto;padding:24px 20px 72px}
@media(min-width:768px){.conteudo{padding:36px 32px 96px}}

.nav-links a.ativo{color:var(--text);font-weight:500}

.cabeca{text-align:center;max-width:640px;margin:0 auto 44px}
.badge-solo{margin:0 auto 22px}
.badge-dot.verde{background:var(--ok);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.titulo{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,5.2vw,3.4rem);
  line-height:1.02;letter-spacing:-.02em}
.titulo em{font-style:italic;color:var(--primary)}
.chamada{margin-top:14px;font-size:1rem;line-height:1.62;color:var(--muted)}

/* ─── Plano ──────────────────────────────────────────────────────────── */
.planos{display:grid;gap:20px;align-items:start}
@media(min-width:900px){.planos{grid-template-columns:1.15fr .85fr;gap:24px}}

.plano{border-radius:16px;padding:26px 24px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-line);border-top-color:var(--glass-line-top);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);
  box-shadow: 0 26px 70px -26px rgba(0,0,0,.9)}
.plano-nome{font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.plano-sub{font-size:.85rem;color:var(--muted);margin-top:3px}

.preco{display:flex;align-items:baseline;gap:2px;margin:22px 0 4px;
  font-variant-numeric:tabular-nums}
.cifrao{font-size:1.25rem;font-weight:600;color:var(--muted);margin-right:4px}
.valor{font-size:clamp(3rem,8vw,4rem);font-weight:700;letter-spacing:-.035em;line-height:1}
.centavos{font-size:1.35rem;font-weight:600;color:var(--muted)}
.periodo{font-size:.95rem;color:var(--faint);margin-left:8px;align-self:center}
.preco-nota{font-size:.8rem;color:var(--faint);margin-bottom:22px}

.btn-primary.bloco{display:block;text-align:center;width:100%}
.cta-nota.central{display:block;text-align:center;margin-top:9px}

.lista{list-style:none;margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
  display:grid;gap:11px}
.lista li{display:flex;gap:10px;align-items:flex-start;font-size:.885rem;line-height:1.5;color:#d4d4d8}
.lista svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--ok);
  fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lista .obs{display:block;color:var(--faint);font-size:.79rem;margin-top:1px}

/* ─── Blocos laterais ────────────────────────────────────────────────── */
.lado{display:grid;gap:16px}
.bloco-info{border-radius:13px;padding:20px;border:1px solid var(--line);
  background:rgba(255,255,255,.028)}
.bloco-info h2{font-size:.95rem;font-weight:600;margin-bottom:13px}
.bloco-info dt{font-size:.83rem;font-weight:600;color:var(--text);margin-top:13px}
.bloco-info dt:first-of-type{margin-top:0}
.bloco-info dd{font-size:.82rem;line-height:1.55;color:var(--muted);margin-top:3px}
.bloco-info p{font-size:.82rem;line-height:1.6;color:var(--muted)}
.bloco-info.aviso{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.055)}
.bloco-info.aviso h2{color:var(--primary)}

/* ─── Dúvidas ────────────────────────────────────────────────────────── */
.duvidas{margin-top:56px}
.secao-titulo{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.6vw,2.2rem);
  text-align:center;letter-spacing:-.015em;margin-bottom:26px}
.faq{display:grid;gap:11px;max-width:760px;margin:0 auto}
.faq details{border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.025);
  overflow:hidden;transition:border-color .16s}
.faq details[open]{border-color:var(--glass-line)}
.faq summary{cursor:pointer;list-style:none;padding:15px 18px;font-size:.9rem;font-weight:500;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq .resposta{padding:0 18px 16px;font-size:.855rem;line-height:1.62;color:var(--muted)}

/* ─── Rodapé ─────────────────────────────────────────────────────────── */
.rodape-site{margin-top:58px;text-align:center}
.voltar-link{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 1.1rem;
  border-radius:.5rem;color:var(--faint);font-size:.83rem;text-decoration:none;
  transition:color .15s,background .15s}
.voltar-link:hover{color:var(--text);background:rgba(255,255,255,.045)}
.voltar-link svg{width:.9rem;height:.9rem;transition:transform .18s cubic-bezier(.22,1,.36,1)}
.voltar-link:hover svg{transform:translateX(-3px)}

/* ═══ Landing com seções abaixo do hero ═════════════════════════════════
   O hero continua ocupando 100vh exatos — é ele que dá a primeira leitura
   inteira sem rolagem. O que muda é que agora existe mais embaixo, então o
   body solta o overflow e o hero vira altura FIXA em vez de flex:1. */
body.com-secoes{height:auto;min-height:100vh;overflow:auto}
body.com-secoes .hero{height:calc(100vh - 78px);flex:0 0 auto}

.recursos{max-width:1240px;margin:0 auto;padding:96px 24px 0}
@media(min-width:768px){.recursos{padding:132px 48px 0}}

.recursos .secao-cabeca{text-align:left;max-width:920px;margin:0 0 66px}
.secao-sinal{margin-bottom:18px;color:var(--primary);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
.recursos .secao-titulo{font-family:var(--serif);font-weight:400;letter-spacing:-.026em;
  font-size:clamp(2.7rem,7.2vw,5.7rem);line-height:.94;max-width:14ch}
.recursos .secao-titulo em{font-style:italic;color:var(--primary)}
.recursos .secao-sub{margin-top:24px;max-width:58ch;font-size:clamp(.98rem,1.5vw,1.12rem);
  line-height:1.68;color:var(--muted)}

/* Uma operação, não um mosaico de cartões. A linha vertical separa o que
   acontece com o cliente do que fica organizado para a loja. */
.operacao{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.operacao-col{min-width:0}
.operacao-fluxo{padding:24px 64px 16px 0;border-right:1px solid var(--line)}
.operacao-retaguarda{padding:24px 0 16px 48px}
.operacao-rotulo{margin-bottom:8px;color:var(--faint);font-size:.68rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase}

.passo{position:relative;display:grid;grid-template-columns:62px 1fr;gap:18px;
  padding:30px 0;border-bottom:1px solid var(--line)}
.passo:last-child{border-bottom:0}
.passo-num{font-family:var(--serif);font-size:2.1rem;line-height:1;color:var(--faint);
  transition:color .22s,transform .22s cubic-bezier(.22,1,.36,1)}
.passo h3{font-family:var(--serif);font-size:clamp(1.55rem,2.6vw,2.15rem);
  font-weight:400;line-height:1.05;letter-spacing:-.018em;margin-bottom:10px}
.passo p{max-width:58ch;color:var(--muted);font-size:.9rem;line-height:1.65}
.passo::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;
  background:var(--primary);transition:width .34s cubic-bezier(.22,1,.36,1)}
.passo:hover .passo-num,.passo:focus-within .passo-num{color:var(--primary);transform:translateX(5px)}
.passo:hover::after,.passo:focus-within::after{width:100%}

.prova{display:grid;grid-template-columns:82px 1fr;column-gap:18px;row-gap:7px;
  padding:22px 0;border-bottom:1px solid var(--line);transition:padding-left .22s cubic-bezier(.22,1,.36,1)}
.prova:last-child{border-bottom:0}
.prova-chave{grid-row:1 / span 2;padding-top:3px;color:var(--primary);font-size:.68rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.prova h3{font-size:1rem;font-weight:600;line-height:1.32;letter-spacing:-.012em}
.prova p{grid-column:2;color:var(--muted);font-size:.82rem;line-height:1.58}
.prova:hover,.prova:focus-within{padding-left:8px}

@media(max-width:820px){
  .recursos{padding-top:94px}
  .recursos .secao-cabeca{margin-bottom:48px}
  .operacao{grid-template-columns:1fr}
  .operacao-fluxo{padding:18px 0 8px;border-right:0;border-bottom:1px solid var(--line)}
  .operacao-retaguarda{padding:34px 0 8px}
}
@media(max-width:520px){
  .recursos{padding-left:20px;padding-right:20px}
  .passo{grid-template-columns:42px 1fr;gap:12px;padding:24px 0}
  .passo-num{font-size:1.55rem}
  .prova{grid-template-columns:1fr;gap:6px;padding:20px 0}
  .prova-chave{grid-row:auto;padding:0}
  .prova p{grid-column:1}
}

@supports (animation-timeline:view()) {
  .passo,.prova{animation:operacao-entra both linear;animation-timeline:view();
    animation-range:entry 8% cover 28%}
  @keyframes operacao-entra{from{opacity:.25;transform:translateY(18px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){
  .passo,.prova{animation:none!important;transition:none}
  .passo-num,.passo::after{transition:none}
}

/* ─── O bloco honesto ────────────────────────────────────────────────── */
.honesto{display:grid;grid-template-columns:minmax(160px,.32fr) minmax(0,.68fr);gap:36px;
  margin:58px 0 0;padding:28px 0;border-top:1px solid rgba(245,158,11,.34);
  border-bottom:1px solid rgba(245,158,11,.34)}
.honesto h3{font-family:var(--serif);font-size:1.55rem;font-weight:400;line-height:1.05;color:var(--primary)}
.honesto p{font-size:.875rem;line-height:1.68;color:var(--muted)}
.honesto b{color:var(--text);font-weight:600}
@media(max-width:680px){.honesto{grid-template-columns:1fr;gap:12px}}

.fecho{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap;
  margin:52px auto 76px}
.btn-fantasma{border-radius:999px;padding:14px 26px;font-size:14.5px;font-weight:500;
  color:var(--text);text-decoration:none;border:1px solid var(--glass-line);
  background:rgba(255,255,255,.04);transition:background .16s}
.btn-fantasma:hover{background:rgba(255,255,255,.09)}

/* ═══ Popup de login sobre a landing ═════════════════════════════════════
   Mesmo padrão do cadi-auto-agenda: "Entrar" não navega, abre um card de
   vidro por cima do site. Adaptado ao escuro — vidro claro sobre preto vira
   mancha, então aqui o fill é alfa de BRANCO e o que dá cor é o glow. */
body.lm-travado { overflow: hidden; }

/* O overlay ROLA, e o card se centra por `margin: auto`.
   Medido em 375×667 com o markup real do cadastro: o card tem 933px, o topo
   ficava em −133px e o botão "Continuar para o cartão" caía fora da tela — sem
   caminho de rolagem nenhum, porque a raiz não rolava, o card é `overflow:
   hidden` e o `body.lm-travado` está travado de propósito. No celular o funil
   de cadastro simplesmente não fechava.
   `align-items: center` é o que impede a correção: num container de rolagem, um
   filho mais alto que o container transborda IGUALMENTE para os dois lados, e a
   parte de cima fica inalcançável mesmo com `overflow-y: auto`. `flex-start` +
   `margin: auto` no filho dá as duas coisas: centrado quando cabe, rolável a
   partir do topo quando não cabe.
   `overscroll-behavior: contain` evita que a rolagem vaze para a página atrás,
   que é o outro jeito de o modal parecer travado. */
.lm-raiz {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-start; justify-content: center; padding: 16px;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0; transition: opacity .19s ease;
}
.lm-raiz.lm-visivel { opacity: 1; }

.lm-fundo {
  position: absolute; inset: 0;
  background: rgba(6,6,7,.62);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}

.lm-card {
  position: relative; width: 100%; max-width: 404px;
  /* `margin: auto` é o par do `align-items: flex-start` da raiz — ver o
     comentário lá. Sozinho ele não faz nada de errado quando o card cabe: o
     resultado é o mesmo centro de antes. */
  margin: auto;
  border-radius: 22px; overflow: hidden;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  border-top-color: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  box-shadow:
              0 10px 22px rgba(0,0,0,.5), 0 30px 70px -18px rgba(0,0,0,.85);
  transform: translateY(10px) scale(.985);
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}
.lm-visivel .lm-card { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lm-raiz, .lm-card { transition: none; }
}

/* Os dois borrões de cor. É deles que vem a variação de luminância que faz o
   vidro ter o que revelar — sem eles, blur sobre preto chapado é no-op. */
.lm-glow { position: absolute; width: 224px; height: 224px; border-radius: 50%;
  filter: blur(58px); pointer-events: none; }
.lm-glow-1 { top: -80px; right: -64px; background: rgba(251,191,36,.30); }
.lm-glow-2 { bottom: -96px; left: -64px; background: rgba(108,192,189,.20); }

.lm-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: var(--muted);
  transition: background .15s, color .15s;
}
.lm-x:hover { background: rgba(255,255,255,.13); color: var(--text); }

.lm-corpo { position: relative; padding: 34px 30px 30px; }

.lm-marca { display: inline-flex; align-items: center; gap: 8px;
  font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.lm-marca-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--primary), var(--primary-2)); color: #0a0a0a; }

.lm-titulo { margin-top: 18px; font-size: 1.22rem; font-weight: 600; letter-spacing: -.018em; }
.lm-sub { margin-top: 5px; font-size: .845rem; color: var(--muted); }

.lm-form { margin-top: 22px; display: flex; flex-direction: column; gap: 15px; }
.lm-campo { display: block; }
.lm-rotulo { display: block; margin-bottom: 6px;
  font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); }
.lm-wrap { position: relative; display: block; }

.lm-i-esq { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.lm-i14 { width: 14px; height: 14px; }
.lm-i16 { width: 16px; height: 16px; }

.lm-input {
  width: 100%; border-radius: 11px; padding: 11px 14px 11px 38px;
  font-size: .885rem; font-family: inherit; color: var(--text);
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(0,0,0,.5); border-bottom-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
  outline: none; transition: border-color .15s, background .15s;
}
.lm-input::placeholder { color: var(--faint); }
.lm-input:focus { border-color: rgba(251,191,36,.55); background: rgba(0,0,0,.42); }
.lm-input-olho { padding-right: 42px; }

.lm-olho { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  color: var(--faint); transition: color .15s, background .15s; }
.lm-olho:hover { color: var(--text); background: rgba(255,255,255,.07); }

.lm-erro { display: flex; align-items: center; gap: 8px;
  border-radius: 11px; padding: 10px 12px;
  border: 1px solid rgba(239,68,68,.32); background: rgba(239,68,68,.11);
  color: #fca5a5; font-size: .8rem; line-height: 1.4; }
.lm-erro[hidden] { display: none; }

.lm-entrar {
  margin-top: 4px; border-radius: 11px; padding: 12px 16px;
  font-size: .885rem; font-weight: 600; font-family: inherit;
  background: var(--primary); color: var(--primary-fg);
  transition: background .15s, opacity .15s;
}
.lm-entrar:hover:not(:disabled) { background: var(--primary-2); }
.lm-entrar:disabled { opacity: .6; cursor: not-allowed; }

/* ═══ Carrossel 3D das telas ═════════════════════════════════════════════
   O centro nítido e de frente; os vizinhos recuam, giram e borram. O que dá
   a profundidade é a `perspective` no palco — sem ela o `rotateY` vira um
   achatamento lateral, não um giro. */
.telas { max-width: 1240px; margin: 0 auto; padding: 88px 20px 0; }
@media (min-width: 768px) { .telas { padding-top: 112px; } }

.cr-palco {
  position: relative; margin-top: 40px;
  height: clamp(300px, 41vw, 520px);
  perspective: 1700px; perspective-origin: 50% 46%;
  /* Os vizinhos 3D continuam parcialmente visíveis dentro do palco, mas não
     ampliam o documento para além da tela em viewports móveis. */
  overflow: hidden;
}

#carrossel {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  cursor: grab; touch-action: pan-y;
}
#carrossel.cr-pegando { cursor: grabbing; }

.cr-card {
  position: absolute; top: 50%; left: 50%;
  width: clamp(280px, 47vw, 620px);
  margin: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

.cr-moldura {
  border-radius: 13px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-top-color: rgba(255,255,255,.2);
  background: #0d0d0d;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.9),;
}
.cr-moldura img { display: block; width: 100%; height: auto; user-select: none; }

/* O card da frente ganha um halo âmbar. É o que diz "este é o foco" sem
   precisar de borda mais grossa, que brigaria com a moldura dos vizinhos. */
.cr-frente .cr-moldura {
  border-color: rgba(251,191,36,.34);
  box-shadow: 0 34px 80px -20px rgba(0,0,0,.92),
              0 0 0 1px rgba(251,191,36,.14),
              0 0 60px -12px rgba(251,191,36,.28);
}

/* A legenda só existe no card da frente: em todos, viraria uma parede de
   texto borrado atrás do que importa. */
.cr-legenda { margin-top: 16px; text-align: center; opacity: 0; transition: opacity .22s ease .06s; }
.cr-frente .cr-legenda { opacity: 1; }
.cr-titulo { display: block; font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }
.cr-texto  { display: block; margin-top: 4px; font-size: .82rem; color: var(--muted); max-width: 46ch; margin-inline: auto; }

.cr-barra { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; }
.cr-seta {
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; color: var(--text);
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.045);
  transition: background .15s, border-color .15s;
}
.cr-seta:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.cr-seta svg { width: 17px; height: 17px; }
.cr-contador { font-size: .8rem; color: var(--faint); font-variant-numeric: tabular-nums; min-width: 46px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .cr-card { transition: none !important; }
  .cr-legenda { transition: none; }
}

/* ═══ TEMA CLARO NA LANDING ══════════════════════════════════════════════
   Mesma chave do painel (`fastlist-tema`), então quem escolhe aqui já entra
   no painel do jeito que escolheu — e vice-versa. Duas chaves separadas
   fariam a pessoa escolher duas vezes pela mesma coisa. */
[data-tema="claro"] {
  --bg:#f7f7f8; --surface:#ffffff; --surface-2:#f1f1f3;
  --line:#e3e3e7; --line-2:#d3d3d9;
  --text:#18181b; --muted:#52525b; --faint:#71717a;
  --primary:#d97706; --primary-2:#b45309; --primary-fg:#ffffff;
  /* Sobre claro o volume do vidro vem de alfa de PRETO. Com alfa de branco
     sobre #f7f7f8 não sobra contraste e o card some. */
  --glass-line:rgba(0,0,0,.10);
/* No ESCURO a borda de topo é mais clara de propósito: simula luz batendo
     na quina de cima de uma placa de vidro. No CLARO essa mesma receita
     desenha uma linha BRANCA sobre fundo quase branco, ao lado de três
     bordas escuras — e o que se vê não é brilho, é a borda de cima faltando.
     Aqui ela fica na mesma família das outras, só um pouco mais leve. */
  --glass-line-top: rgba(0,0,0,.055);
}
[data-tema="claro"] html, html[data-tema="claro"] { color-scheme: light; }

[data-tema="claro"] body {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.022) 0 1px, transparent 1px 4px),
    radial-gradient(58rem 34rem at 50% -12%, rgba(217,119,6,.10), transparent 64%),
    radial-gradient(46rem 30rem at 8% 12%, rgba(217,119,6,.05), transparent 62%),
    radial-gradient(52rem 34rem at 96% 22%, rgba(59,130,246,.05), transparent 64%);
}

[data-tema="claro"] .badge,
[data-tema="claro"] .glass,
[data-tema="claro"] .plano,
[data-tema="claro"] .btn-fantasma,
[data-tema="claro"] .btn-play,
[data-tema="claro"] .cr-seta { background: rgba(255,255,255,.72); }

[data-tema="claro"] .glass  { box-shadow: inset 0 1px 0 0 rgba(255,255,255,.9), 0 26px 70px -24px rgba(24,24,27,.3); }
[data-tema="claro"] .plano  { box-shadow: inset 0 1px 0 0 rgba(255,255,255,.9), 0 22px 60px -26px rgba(24,24,27,.28); }
[data-tema="claro"] .app    { background: #fff; border-color: var(--line); }
[data-tema="claro"] .app-top, [data-tema="claro"] .app-side, [data-tema="claro"] .app-main { background: rgba(0,0,0,.018); }
[data-tema="claro"] .app-search { background: rgba(0,0,0,.035); }
[data-tema="claro"] .side-item { color: #3f3f46; }
[data-tema="claro"] .side-active { background: rgba(0,0,0,.06); color: #18181b; }
[data-tema="claro"] .c { background: rgba(0,0,0,.028); }
[data-tema="claro"] .act { background: rgba(0,0,0,.04); }
[data-tema="claro"] .row, [data-tema="claro"] .tbl td { color: #3f3f46; }
[data-tema="claro"] .tbl td { border-bottom-color: rgba(0,0,0,.07); }
[data-tema="claro"] .faq details, [data-tema="claro"] .bloco-info { background: rgba(0,0,0,.025); }
[data-tema="claro"] .cr-moldura { border-color: rgba(0,0,0,.12); background: #fff;
  box-shadow: 0 26px 60px -22px rgba(24,24,27,.35), inset 0 1px 0 0 rgba(255,255,255,.9); }
[data-tema="claro"] .cr-frente .cr-moldura {
  border-color: rgba(217,119,6,.4);
  box-shadow: 0 30px 70px -22px rgba(24,24,27,.38), 0 0 0 1px rgba(217,119,6,.16), 0 0 50px -14px rgba(217,119,6,.3); }
[data-tema="claro"] .lm-fundo { background: rgba(244,244,245,.66); }
[data-tema="claro"] .lm-card  { background: rgba(255,255,255,.82); border-color: rgba(0,0,0,.09);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.9), 0 10px 22px rgba(24,24,27,.12), 0 30px 70px -18px rgba(24,24,27,.26); }
[data-tema="claro"] .lm-input { background: #fff; border-color: #dededf; box-shadow: inset 0 1px 2px rgba(24,24,27,.06); }
[data-tema="claro"] .lm-x     { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
[data-tema="claro"] .lm-x:hover { background: rgba(0,0,0,.1); }
[data-tema="claro"] .honesto  { background: transparent; border-color: rgba(217,119,6,.28); }
[data-tema="claro"] .voltar-link:hover, [data-tema="claro"] .cr-seta:hover { background: rgba(0,0,0,.05); }

/* ─── Interruptor de tema ─────────────────────────────────────────────────
   Um botão só com as duas opções, e o botão INTEIRO é o alvo — não há
   "metade que liga" e "metade que desliga". `role="switch"` porque é o que
   ele é: dois estados, e o leitor de tela precisa saber em qual está. */
/* SEM padding, pelo mesmo motivo do controle segmentado do painel: com
   respiro, a bolha flutua e sobra um anel de trilha em volta dela — duas
   curvas concêntricas, que leem como duas peças. Sem padding, a bolha
   encosta em cima e embaixo e o que resta à vista é uma borda só.
   
   A caixa é 62×32 com 1px de borda, então o interior é 60×30: bolha de
   30×30 toca as duas bordas, e o percurso dela é 60−30 = 30px, que é
   exatamente o `translateX` do estado claro. */
.tema-sw {
  position: relative; width: 62px; height: 32px; flex: 0 0 auto;
  border-radius: 999px; padding: 0; overflow: hidden;
  border: 1px solid var(--glass-line); border-top-color: var(--glass-line-top);
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  
  cursor: pointer; transition: background .18s, border-color .18s;
}
.tema-sw:hover { background: rgba(255,255,255,.1); }
[data-tema="claro"] .tema-sw { background: rgba(0,0,0,.05); }
[data-tema="claro"] .tema-sw:hover { background: rgba(0,0,0,.09); }
.tema-sw:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* A trilha mostra os DOIS ícones, apagados. Sem eles o botão diz em que
   estado está e não diz o que o clique faz — e um interruptor cujo destino
   é invisível é um interruptor que ninguém aperta. O puxador cobre o ícone
   do lado em que está, então o que sobra à vista é sempre o DESTINO. */
.tema-trilha {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 9px; pointer-events: none;
}
.tema-trilha svg { width: 13px; height: 13px; color: var(--faint); opacity: .75; transition: opacity .18s; }
/* A que está SOB o puxador some. Sem isto o ícone do puxador e o da trilha
   viram um par repetido — lua+lua no escuro, sol+sol no claro — que foi
   exatamente o defeito da primeira versão. */
.tema-trilha .t-lua { opacity: 0; }
[data-tema="claro"] .tema-trilha .t-lua { opacity: .75; }
[data-tema="claro"] .tema-trilha .t-sol { opacity: 0; }

/* O botão que desliza. Um só, e o ÍCONE dentro dele troca. */
/* Sem sombra externa: ela vazaria pelo `overflow-hidden` da casca, ou seria
   cortada — e sombra cortada pela metade é pior que sombra nenhuma. */
.tema-bolha {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--primary), var(--primary-2));
  color: var(--primary-fg);
  transition: transform .26s cubic-bezier(.34,1.4,.5,1);
}
/* Curva com leve ultrapassagem: o puxador chega e assenta, em vez de parar
   seco. É o que faz o gesto parecer físico. */
[data-tema="claro"] .tema-bolha { transform: translateX(30px); }
/* Puxador na ESQUERDA = escuro = lua; na DIREITA = claro = sol. A posição
   segue a ordem da trilha, senão o puxador cobriria o ícone errado. */
.tema-bolha svg { width: 14px; height: 14px; }
.tema-ic { grid-area: 1 / 1; transition: opacity .16s, transform .26s cubic-bezier(.34,1.4,.5,1); }
.tema-sol { opacity: 0; transform: rotate(-90deg) scale(.5); }
.tema-lua { opacity: 1; transform: none; }
[data-tema="claro"] .tema-sol { opacity: 1; transform: none; }
[data-tema="claro"] .tema-lua { opacity: 0; transform: rotate(90deg) scale(.5); }

@media (prefers-reduced-motion: reduce) {
  .tema-bolha, .tema-ic { transition: none; }
}

/* ─── Rótulo do interruptor ────────────────────────────────────────────── */
.tema-cx { display: inline-flex; align-items: center; gap: 10px; }
.tema-rot { display: none; font-size: .78rem; color: var(--muted); white-space: nowrap; }
@media (min-width: 900px) { .tema-rot { display: inline; } }

/* ─── Interruptor SÓ das telas ───────────────────────────────────────────
   Separado do interruptor do site de propósito: aqui a pergunta é "como o
   PAINEL fica", não "como este site fica". Misturar os dois faria quem quer
   só espiar o painel claro ter de clarear a página inteira. */
.cr-tema { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 28px; }
.cr-tema-rot { font-size: .78rem; color: var(--faint); }

/* O interruptor das telas é a MESMA peça do site — só que o estado dele vem
   de `data-telas` no próprio botão, e não do tema do documento. Duas peças
   com desenhos diferentes para a mesma pergunta seriam duas linguagens. */
.tema-sw[data-telas="claro"] .tema-bolha { transform: translateX(30px); }
.tema-sw[data-telas="claro"] .tema-sol { opacity: 1; transform: none; }
.tema-sw[data-telas="claro"] .tema-lua { opacity: 0; transform: rotate(90deg) scale(.5); }
.tema-sw[data-telas="claro"] .tema-trilha .t-lua { opacity: .75; }
.tema-sw[data-telas="claro"] .tema-trilha .t-sol { opacity: 0; }
.tema-sw[data-telas="escuro"] .tema-bolha { transform: none; }
.tema-sw[data-telas="escuro"] .tema-sol { opacity: 0; transform: rotate(-90deg) scale(.5); }
.tema-sw[data-telas="escuro"] .tema-lua { opacity: 1; transform: none; }
.tema-sw[data-telas="escuro"] .tema-trilha .t-lua { opacity: 0; }
.tema-sw[data-telas="escuro"] .tema-trilha .t-sol { opacity: .75; }


/* ─── Controle segmentado da landing ─────────────────────────────────────
   Mesma gramática do painel: casca em pílula com UMA borda, segmento ativo
   sem borda própria. */
.tabbar { border-radius: 999px; padding: 0; gap: 0; overflow: hidden; }
.tabbar .sub-tab { border-radius: 999px; border: 0; align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center; }
.faq details { border-radius: 14px; }
.cr-seta { border-radius: 999px; }

/* ─── Foco dentro do popup de login ──────────────────────────────────────
   Sem isto o navegador desenha o anel PADRÃO — um retângulo branco grosso —
   em volta do olho e do botão Entrar. Sobre um card de vidro escuro ele lê
   como falha de renderização, não como foco. */
.lm-olho:focus,
.lm-entrar:focus,
.lm-x:focus { outline: none; }
.lm-olho:focus-visible,
.lm-x:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.lm-entrar:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ═══ Cadastro em duas etapas ═════════════════════════════════════════════
   Mesma mecânica de overlay do login-modal (.lm-raiz/.lm-fundo/.lm-x/.lm-glow)
   — não duplicada, reusada. As classes novas (.cm-*) são só o que o cadastro
   tem de diferente: mais campo, duas etapas, e o cartão.

   O cartão é Stripe Elements: três iframes da própria Stripe (número,
   validade, CVC), nunca um <input> nosso. O número digitado não existe no
   nosso DOM — não dá para espelhar dígito a dígito na face do cartão como a
   referência original fazia. O que SIM fica igual: a bandeira troca em tempo
   real (a Stripe manda o evento), o nome do titular é nosso e atualiza ao
   vivo, e o CVC vira o cartão — física idêntica, dado sensível nunca aqui. */

.cm-card { max-width: 460px; }
.cm-card.cm-etapa-cartao { max-width: 520px; }

.cm-passos {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--faint);
}
.cm-passo { display: flex; align-items: center; gap: 6px; }
.cm-passo-bola {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
  font-size: .68rem; color: var(--muted); transition: background .18s, border-color .18s, color .18s;
}
.cm-passo-ativo .cm-passo-bola { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.cm-passo-feito .cm-passo-bola { background: rgba(251,191,36,.18); border-color: rgba(251,191,36,.4); color: var(--primary); }
.cm-passo-ativo .cm-passo-rotulo { color: var(--text); }
.cm-passos-linha { flex: 1; height: 1px; background: rgba(255,255,255,.1); margin: 0 2px; }

.cm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .cm-grid2 { grid-template-columns: 1fr; } }

.cm-voltar {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: 0;
  color: var(--faint); font-size: .78rem; font-family: inherit; cursor: pointer; padding: 2px 0;
  transition: color .15s;
}
.cm-voltar:hover { color: var(--text); }

.cm-cupom-toggle {
  background: none; border: 0; color: var(--faint); font-size: .78rem; font-family: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0; align-self: flex-start;
}
.cm-cupom-toggle:hover { color: var(--primary); }
.cm-cupom-campo[hidden] { display: none; }

/* "(opcional)" dentro do rótulo: mesma linha, sem o caixa-alta e o peso do
   rótulo — quem lê rápido precisa distinguir o campo do adjetivo dele. */
.cm-opcional { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint); }

.cm-fineprint { font-size: .72rem; color: var(--faint); line-height: 1.55; }
.cm-fineprint strong { color: var(--muted); font-weight: 600; }
.cm-legal-check { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: .76rem; line-height: 1.45; cursor: pointer; }
.cm-legal-check input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--yellow); }
.cm-legal-check a { color: var(--yellow); text-underline-offset: 2px; }
.cm-legal-opcional { color: var(--faint); }
.cm-legal-opcional strong { color: var(--muted); }

/* ─── O cartão 3D ─── */
.cm-cena { perspective: 1100px; margin: 4px 0 20px; }
.cm-cartao {
  position: relative; width: 100%; aspect-ratio: 1.586 / 1; max-width: 340px; margin: 0 auto;
  transform-style: preserve-3d; transition: transform .65s cubic-bezier(.34,1.4,.64,1);
}
.cm-cartao.cm-virado { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .cm-cartao { transition: none; } }

.cm-face {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-top-color: rgba(255,255,255,.26);
  box-shadow: 0 16px 38px -10px rgba(0,0,0,.75), 0 4px 14px rgba(0,0,0,.5);
  background: #0d0d0e;
}
.cm-face-verso { transform: rotateY(180deg); }

/* A aurora: conic-gradient girando atrás, mesma técnica da referência, cores
   do FastList (âmbar + um verde-azulado frio para dar profundidade — sem o
   segundo tom o giro vira só "ficar mais e menos amarelo").

   Medido no navegador: a .5/.55 da primeira versão LAVAVA a face inteira — o
   cartão virava um borrão dourado e o texto sumia dentro dele. Baixar a
   opacidade sozinho apagaria a animação; o que resolve é a aurora fraca MAIS
   um véu escuro por cima dela (o ::after), com o conteúdo acima dos dois. Aí
   o giro aparece como um brilho que atravessa a superfície, não como a
   superfície. */
.cm-face::before {
  content: ''; position: absolute; inset: -50%; z-index: 0;
  background: conic-gradient(from 0deg, rgba(251,191,36,.55), rgba(20,20,22,0) 22%,
    rgba(20,20,22,0) 56%, rgba(108,192,189,.4) 74%, rgba(251,191,36,.55) 100%);
  animation: cm-girar 9s linear infinite;
}
/* O véu. Sem ele o texto do cartão fica ilegível sobre o giro. */
.cm-face::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(150deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.88) 55%, rgba(10,10,10,.8) 100%);
}
@media (prefers-reduced-motion: reduce) { .cm-face::before { animation: none; } }
@keyframes cm-girar { to { transform: rotate(360deg); } }

.cm-face-frente { padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; }
.cm-face-frente > * { position: relative; z-index: 2; }

.cm-marca-cartao { display: flex; align-items: center; justify-content: space-between; }
.cm-chip {
  width: 38px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, #e8d38a, #b8934a);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.cm-bandeira { height: 26px; display: flex; align-items: center; opacity: 0; transition: opacity .2s; }
.cm-bandeira.cm-bandeira-visivel { opacity: 1; }
.cm-bandeira svg, .cm-bandeira img { height: 100%; width: auto; display: block; }

.cm-numero-mascara {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 1.24rem;
  letter-spacing: .16em; color: rgba(244,244,245,.62);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.cm-linha-baixo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cm-titular, .cm-validade-vis { text-transform: uppercase; }
.cm-titular-rotulo, .cm-validade-rotulo {
  font-size: .56rem; letter-spacing: .1em; color: rgba(244,244,245,.4); margin-bottom: 3px;
}
.cm-titular-valor {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: .82rem; color: rgba(244,244,245,.85);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-validade-valor { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: .82rem; color: rgba(244,244,245,.85); }

.cm-face-verso { display: flex; flex-direction: column; }
/* A tarja magnética. Precisa ser MAIS ESCURA que a face para ler como tarja —
   a primeira versão usava #101010 sobre uma face #0d0d0e e simplesmente
   sumia. O brilho de cima é o que dá a leitura de fita, não a cor. */
.cm-tarja {
  height: 44px; margin-top: 24px; position: relative; z-index: 2;
  background: linear-gradient(180deg, #000 0%, #0a0a0a 45%, #000 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(255,255,255,.04);
}
.cm-cvc-area { position: relative; z-index: 2; margin: 20px 22px 0; display: flex; align-items: center; gap: 12px; }
.cm-cvc-rotulo { font-size: .56rem; letter-spacing: .1em; color: rgba(244,244,245,.4); text-transform: uppercase; }
.cm-cvc-tarja {
  height: 34px; flex: 1; max-width: 160px; margin-left: auto;
  background: linear-gradient(180deg, #f4f4f5, #d8d8dc); border-radius: 4px;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.cm-cvc-tarja span { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: .9rem; color: #18181b; letter-spacing: .16em; }
/* A bandeira aparece no verso também — é onde o olho procura confirmação
   depois de virar o cartão para digitar o CVC. */
.cm-verso-bandeira { position: relative; z-index: 2; margin: auto 22px 18px; text-align: right;
  font: 600 13px/1 system-ui, sans-serif; opacity: 0; transition: opacity .2s; }
.cm-verso-bandeira.cm-bandeira-visivel { opacity: .75; }

/* ─── Campos do Elements: a MOLDURA é nossa, o miolo é um iframe da Stripe.
   `.stripe-element` é o container que `elements.mount()` recebe; a Stripe
   preenche o retângulo inteiro, então a moldura precisa ter a MESMA receita
   visual do .lm-input para não parecer um componente de outro produto. */
.cm-stripe-campo {
  border-radius: 11px; padding: 12px 14px;
  background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.11);
  transition: border-color .15s, background .15s;
}
.cm-stripe-campo.cm-stripe-focado { border-color: rgba(251,191,36,.55); background: rgba(0,0,0,.42); }
.cm-stripe-campo.cm-stripe-erro { border-color: rgba(239,68,68,.5); }

.cm-cartao-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }

/* ─── Cadastro: telefone com país, força de senha, erro por campo ────────── */

.cm-tel-linha { display: flex; gap: 8px; align-items: stretch; }
.cm-tel-pais {
  flex: 0 0 auto; max-width: 42%;
  border-radius: 11px; padding: 12px 10px;
  background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.11);
  color: var(--text); font-family: inherit; font-size: .85rem;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  /* A seta é desenhada porque `appearance: none` tira a nativa, e a nativa é
     clara demais sobre o vidro escuro. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
  padding-right: 26px;
}
.cm-tel-pais:focus { outline: none; border-color: rgba(251,191,36,.55); }
/* O `<option>` é desenhado pelo sistema, não pelo nosso CSS. Sem estas duas
   linhas, a lista abre com texto branco sobre fundo branco em vários
   navegadores — o menu fica em branco e parece quebrado. */
.cm-tel-pais option { background: #16161a; color: #f4f4f5; }
.cm-tel-numero { flex: 1 1 auto; min-width: 0; }

/* Erro por campo. Vermelho na borda + a frase embaixo: só a borda não diz o
   que fazer, e só a frase se perde num formulário de seis campos. */
.cm-campo-erro .lm-input,
.cm-campo-erro .cm-tel-pais { border-color: rgba(239,68,68,.55); }
.cm-campo-aviso {
  margin-top: 5px; font-size: .74rem; line-height: 1.4; color: #fca5a5;
}

/* Força da senha */
.cm-forca { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.cm-forca[hidden] { display: none; }
.cm-forca-barra {
  flex: 1; height: 4px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.08);
}
.cm-forca-preenche {
  display: block; height: 100%; width: 0; border-radius: 3px;
  transition: width .2s ease, background .2s ease;
  background: #ef4444;
}
.cm-forca[data-nivel="media"] .cm-forca-preenche { background: var(--primary); }
.cm-forca[data-nivel="forte"] .cm-forca-preenche { background: #34d399; }
.cm-forca-texto { font-size: .72rem; color: var(--faint); white-space: nowrap; }
.cm-forca[data-nivel="forte"] .cm-forca-texto { color: #34d399; }

/* ─── Chip e bandeira: as duas peças que denunciam um cartão desenhado ───── */

.cm-chip-svg { width: 42px; height: 32px; display: block; }

/* A bandeira agora é SVG, não texto. `height` fixo e `width:auto` porque os
   logos têm proporções diferentes entre si — Amex é quase quadrado, Visa é
   larga. Travar a largura achataria uns e esticaria outros. */
.cm-bandeira { height: 30px; display: flex; align-items: center;
  opacity: 0; transition: opacity .2s; font: 600 14px/1 system-ui, sans-serif; }
.cm-bandeira.cm-bandeira-visivel { opacity: 1; }
.cm-bandeira.cm-bandeira-logo svg { height: 100%; width: auto; display: block;
  border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.4); }

.cm-verso-bandeira { height: 22px; display: flex; justify-content: flex-end; align-items: center; }
.cm-verso-bandeira.cm-bandeira-logo svg { height: 100%; width: auto; border-radius: 3px; }

/* O nome no cartão é campo próprio: em cartão o nome vem como o banco gravou,
   às vezes abreviado. Monoespaçado e caixa alta, como no cartão físico. */
.cm-titular-input { text-transform: uppercase;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace; letter-spacing: .04em; }

/* ─── O cartão reage enquanto a pessoa digita ────────────────────────────────
   A Stripe não entrega os dígitos, mas entrega {empty, complete} a cada tecla.
   Três estados por campo é feedback de verdade — sem isto o cartão é um
   desenho parado ao lado do formulário, e a pessoa não sabe se está indo. */

.cm-numero-mascara, .cm-titular-valor, .cm-validade-valor, .cm-cvc-tarja span {
  transition: color .2s, opacity .2s, text-shadow .2s;
}

/* Vazio: apagado, mas ainda legível — some demais e o cartão parece quebrado. */
.cm-vazio { color: rgba(244,244,245,.28) !important; }
/* Digitando: acende. */
.cm-digitando { color: rgba(244,244,245,.66) !important; }
/* Completo: acende de vez, com um brilho discreto. */
.cm-completo {
  color: rgba(255,255,255,.95) !important;
  text-shadow: 0 0 12px rgba(251,191,36,.28);
}
/* Em foco: a parte do cartão que corresponde ao campo em foco se destaca —
   liga o que a pessoa digita ao que está mudando. */
.cm-em-foco { color: var(--primary) !important; }

/* O CVC no verso é escuro sobre a tarja branca: as cores acima o apagariam. */
.cm-cvc-tarja span.cm-vazio { color: rgba(24,24,27,.3) !important; }
.cm-cvc-tarja span.cm-digitando { color: rgba(24,24,27,.65) !important; }
.cm-cvc-tarja span.cm-completo { color: #18181b !important; text-shadow: none; }
.cm-cvc-tarja span.cm-em-foco { color: #a16207 !important; }

/* ─── Os blocos da face: o campo inteiro é a unidade ────────────────────────
   O número e a validade são span[data-bloco], um por grupo de dígitos (Amex
   tem 3, o resto 4). A Stripe não diz a POSIÇÃO do cursor, só {empty,
   complete} do campo — então digitando todos os blocos pulsam, e completo
   todos acendem, um depois do outro. A cascata é `--i` (índice do bloco,
   posto pelo JS) virando atraso aqui; o JS não tem timer nenhum.

   Os três estados existem SEM animação também: quem pediu menos movimento
   (prefers-reduced-motion) vê apagado/meio/aceso pela opacidade, parado. */
.cm-numero-mascara { display: flex; gap: .42em; }
.cm-validade-valor { display: inline-flex; }
.cm-bloco { opacity: .35; }
.cm-bloco[data-estado="pulsando"] { opacity: .7; }
.cm-bloco[data-estado="aceso"] {
  opacity: 1;
  /* A cor da bandeira ao completar — o JS põe `--cm-cor-bandeira` no cartão
     quando a Stripe reconhece o BIN. Sem bandeira, o branco da face. */
  color: var(--cm-cor-bandeira, inherit);
  text-shadow: 0 0 12px rgba(251,191,36,.28);
}
/* Em foco, o âmbar do campo em edição ganha da cor da bandeira. */
.cm-em-foco .cm-bloco { color: inherit; }
.cm-bloco-sep { opacity: .35; }

@media (prefers-reduced-motion: no-preference) {
  .cm-bloco { transition: opacity .25s ease, color .25s ease; }
  .cm-bloco[data-estado="pulsando"] {
    animation: cm-pulso 1.1s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 120ms);
  }
  /* Animação, não transição: um bloco RECÉM-CRIADO (a bandeira mudou o
     agrupamento, ou os 4 últimos entraram) também acende em cascata —
     transição precisaria de um estado anterior para partir. */
  .cm-bloco[data-estado="aceso"] {
    animation: cm-acender .45s ease-out both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  /* A bandeira entra crescendo, não só aparecendo. */
  .cm-bandeira, .cm-verso-bandeira { transform: scale(.8); transition: opacity .2s, transform .28s cubic-bezier(.34,1.4,.64,1); }
  .cm-bandeira.cm-bandeira-visivel, .cm-verso-bandeira.cm-bandeira-visivel { transform: scale(1); }
}
@keyframes cm-pulso { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
@keyframes cm-acender { from { opacity: .35; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ─── A tela de sucesso: o mesmo cartão, revelado nos 4 últimos ──────────────
   O formulário sai, o cartão fica — virado para a frente, com `•••• 4242` e a
   validade que o SERVIDOR leu do PaymentMethod. O halo âmbar diz "este é o
   seu", sem mexer na face. */
.cm-cartao.cm-revelado .cm-face {
  box-shadow: 0 16px 38px -10px rgba(0,0,0,.75), 0 4px 14px rgba(0,0,0,.5),
    0 0 0 1px rgba(251,191,36,.35), 0 0 34px rgba(251,191,36,.16);
  transition: box-shadow .6s ease;
}
.cm-sucesso { display: flex; flex-direction: column; gap: 12px; }
.cm-sucesso-cartao { margin: 0; font-size: .9rem; font-weight: 600; color: var(--text); line-height: 1.5; }

/* A moldura do campo completo ganha um tique verde discreto. */
.cm-stripe-campo { position: relative; }
.cm-stripe-campo.cm-stripe-completo { border-color: rgba(52,211,153,.4); }
.cm-stripe-campo.cm-stripe-completo::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 12px; height: 7px;
  border-left: 2px solid #34d399; border-bottom: 2px solid #34d399;
  transform: translateY(-70%) rotate(-45deg); pointer-events: none;
}
/* Focado ganha da moldura de completo: enquanto edita, o âmbar manda. */
.cm-stripe-campo.cm-stripe-focado { border-color: rgba(251,191,36,.55); }

/* Botão esperando: visivelmente inativo, mas não invisível. Um botão que some
   faz a pessoa achar que a tela quebrou; um que fica opaco diz "falta algo". */
.cm-entrar-esperando { opacity: .45; cursor: not-allowed; }

/* ─── Correções da auditoria de acessibilidade ──────────────────────────────

   O vermelho dos avisos era fixo (#fca5a5) — pensado para o card ESCURO. No
   tema claro esse mesmo tom fica ~1,9:1 sobre o card branco: ilegível, e
   justamente na mensagem que explica por que o cadastro não avança. Vira
   token, e o tema claro redefine. */
:root { --erro-texto: #fca5a5; --erro-borda: rgba(239,68,68,.55); }
[data-tema="claro"] { --erro-texto: #b91c1c; --erro-borda: rgba(185,28,28,.55); }

.cm-campo-aviso { color: var(--erro-texto); }
.cm-campo-erro .lm-input,
.cm-campo-erro .cm-tel-pais { border-color: var(--erro-borda); }
.lm-erro { color: var(--erro-texto); }

/* O aviso agora é IRMÃO do label, não filho — sem isto ele herdava o
   `margin-top` do bloco e descolava do campo. */
.lm-campo + .cm-campo-aviso { margin-top: -8px; margin-bottom: 2px; }

/* A borda vermelha do campo da Stripe precisa GANHAR do foco enquanto o erro
   existe. Antes, `.cm-stripe-focado` vinha depois no arquivo e vencia por
   ordem: a pessoa clicava para corrigir e a borda vermelha sumia — o campo
   errado ficava idêntico aos certos exatamente na hora de consertar. */
.cm-stripe-campo.cm-stripe-erro,
.cm-stripe-campo.cm-stripe-erro.cm-stripe-focado { border-color: var(--erro-borda); }
.cm-stripe-campo.cm-stripe-erro.cm-stripe-completo::after { display: none; }

/* `aria-disabled` no lugar de `disabled`: o botão continua focável e clicável
   — o clique é o que explica o que falta. Só o visual diz "ainda não". */
.cm-entrar[aria-disabled="true"] { opacity: .45; }
.cm-entrar[aria-disabled="true"]:hover { background: var(--primary); }