/* site/css/site.css — página de vendas do Nummus (nummus.app.br).
   Mesma marca do app (DESIGN-SYSTEM.md): bronze de moeda e pátina sobre grafite
   e porcelana; vidro só na navegação; raio de 15px; Inter auto-hospedada (SF nos
   aparelhos Apple). Mobile-first: as regras base são do celular; telas maiores
   ganham colunas nos @media no fim de cada bloco. */

@font-face{font-family:'Inter Nummus';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin-wght-4.1.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Nummus';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin-ext-wght-4.1.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

:root{
  --grafite:#0E0F12;--grafite-2:#16181D;--papel:#1C1E24;--papel-2:#262830;
  --porcelana:#EEF0F3;--porcelana-2:#FFFFFF;--tinta:#15171C;--tinta-2:#4A5363;
  --texto:#F2F4F8;--texto-2:#B4BDCB;--texto-3:#8D98AB;
  --bronze:#E2B65A;--bronze-forte:#C9973A;--bronze-texto:#EBC67A;--bronze-escuro:#8A6420;--sobre-bronze:#2B1D05;
  --patina:#4CC2AE;--vermelho:#FF6B61;--vermelho-claro:#C2362C;
  --borda-escura:rgba(255,255,255,.09);--borda-clara:rgba(21,23,28,.10);
  --r:15px;--r-mini:10px;
  --fonte:'Inter Nummus',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --curva:cubic-bezier(.22,.8,.24,1);
  --topo-altura:64px;
}
@supports (font:-apple-system-body){:root{--fonte:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter Nummus',sans-serif}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo-altura) + 24px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{font-family:var(--fonte);font-size:16px;line-height:1.55;background:var(--grafite);color:var(--texto);
  -webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss01';overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{list-style:none}
b,strong{font-weight:650}
/* Celular deitado (viewport-fit=cover): o respiro lateral cresce até passar do entalhe. */
.largura{width:100%;max-width:1200px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px))}
.largura-texto{max-width:780px}
.pular{position:absolute;left:max(12px,env(safe-area-inset-left,0px));top:-60px;z-index:100;background:var(--bronze);color:var(--sobre-bronze);padding:10px 14px;border-radius:var(--r-mini);font-weight:650}
.pular:focus{top:12px}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:6px}
.num,.cascata b,.plano-valor,.extrato dd{font-variant-numeric:tabular-nums}

/* ── Seções: grafite (produto) e porcelana (leitura) ─────────────────────── */
section{padding:72px 0}
.escuro{background:var(--grafite);color:var(--texto);color-scheme:dark}
.folha,.topo,.rodape,.barra-celular{color-scheme:dark}
.botao:disabled,.botao[aria-disabled="true"]{opacity:.6;cursor:progress}
.porcelana{background:var(--porcelana);color:var(--tinta);color-scheme:light}
/* Anel de foco no claro: o bronze some na porcelana (1,7:1); o bronze escuro passa de 4,5:1. */
.porcelana :focus-visible{outline-color:var(--bronze-escuro)}
h1,h2,h3{font-weight:720;letter-spacing:-.028em;line-height:1.1}
h2{font-size:clamp(1.75rem,5.6vw,2.85rem);max-width:22ch;text-wrap:balance}
h3{font-size:1.15rem;letter-spacing:-.015em}
.secao-lead{font-size:1.06rem;max-width:60ch;margin-top:14px;color:var(--texto-2)}
.porcelana .secao-lead{color:var(--tinta-2)}

/* ── Botões: sempre com nome por extenso ─────────────────────────────────── */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r);
  font:inherit;font-weight:650;font-size:.95rem;text-decoration:none;border:1px solid transparent;cursor:pointer;background:none;color:inherit;
  transition:background .2s var(--curva),border-color .2s var(--curva),transform .2s var(--curva)}
.botao:active{transform:scale(.98)}
.botao-bronze{background:var(--bronze);color:var(--sobre-bronze)}
.botao-contorno{border-color:rgba(255,255,255,.22);color:var(--texto)}
.botao-vidro{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--texto)}
/* Hover só onde o ponteiro paira: no toque (iOS) o :hover gruda depois de tocar e o controle
   fica aceso até tocar em outro lugar. Vale para todo :hover do site (teste em site.test.js). */
@media (hover:hover){
  .botao-bronze:hover{background:#EDC570}
  .botao-contorno:hover{border-color:var(--bronze);color:var(--bronze-texto)}
  .botao-vidro:hover{background:rgba(255,255,255,.14)}
}
.botao-grande{min-height:52px;padding:0 24px;font-size:1rem}
.botao-largo{width:100%}
.botao-texto{background:none;border:0;color:var(--bronze-texto);padding:0;min-height:0;text-decoration:underline;text-underline-offset:3px}

/* ── Topo flutuante (vidro) ──────────────────────────────────────────────── */
.topo{position:fixed;z-index:50;left:0;right:0;top:0;
  padding:calc(10px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px))}
.topo-barra{max-width:1200px;margin:0 auto;height:var(--topo-altura);display:flex;align-items:center;gap:12px;padding:0 10px 0 16px;
  border-radius:var(--r);background:rgba(28,30,36,.62);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 14px 44px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.10)}
.marca{display:inline-flex;align-items:center;gap:10px;font-weight:720;font-size:1.08rem;letter-spacing:-.02em;text-decoration:none;color:var(--texto)}
/* Logo v1.15.0: arquivos em /assets/img/marca/ (moeda cheia abaixo de 48 px; com serrilha acima) */
.marca-logo{display:block;height:32px;width:auto}
@media (max-width:560px){.marca-logo{height:26px}}
@media (max-width:400px){.marca-logo{height:23px}.topo-barra{gap:8px;padding-left:12px}.topo-acoes .botao{padding:0 11px;white-space:nowrap}}
.moeda{--tam:30px;width:var(--tam);height:var(--tam);display:inline-block;flex:none;
  background:url("/assets/img/marca/nummus-moeda.svg") center/contain no-repeat}
.moeda-p{--tam:26px}.moeda-g{--tam:64px;background-image:url("/assets/img/marca/nummus-simbolo.svg")}
.topo-links{display:none}
.topo-acoes{margin-left:auto;display:flex;gap:8px}
.topo-acoes .botao{min-height:40px;padding:0 14px;font-size:.9rem}
@media (min-width:980px){
  .topo-links{display:flex;gap:4px;margin-left:24px}
  .topo-links a{display:block;padding:8px 12px;border-radius:var(--r-mini);text-decoration:none;color:var(--texto-2);font-size:.93rem;font-weight:550}
}
@media (hover:hover) and (min-width:980px){.topo-links a:hover{color:var(--texto);background:rgba(255,255,255,.06)}}

/* ── Abertura ────────────────────────────────────────────────────────────── */
.abertura{padding:calc(var(--topo-altura) + 56px + env(safe-area-inset-top,0px)) 0 0;position:relative;overflow:hidden;
  background:radial-gradient(120% 70% at 85% 0%,rgba(226,182,90,.10),transparent 60%),var(--grafite)}
.abertura-grade{display:grid;gap:44px;align-items:center}
.abertura-apoio{color:var(--bronze-texto);font-weight:600;font-size:.98rem;margin-bottom:16px}
.abertura h1{font-size:clamp(2.15rem,8.4vw,4.05rem);letter-spacing:-.04em;line-height:1.03;max-width:16ch;text-wrap:balance}
.abertura-lead{margin-top:20px;font-size:1.1rem;color:var(--texto-2);max-width:52ch}
.abertura-acoes{display:flex;flex-direction:column;gap:12px;margin-top:30px}
.abertura-promessa{margin-top:20px;color:var(--texto-2);font-size:.97rem}
.abertura-promessa strong{color:var(--texto)}
@media (min-width:560px){.abertura-acoes{flex-direction:row;flex-wrap:wrap}}
@media (min-width:980px){.abertura-grade{grid-template-columns:1.08fr .92fr;gap:56px}}

/* Cascata do DRE: a peça memorável da página */
.cascata{background:linear-gradient(180deg,rgba(38,40,48,.9),rgba(24,26,31,.95));border:1px solid var(--borda-escura);border-radius:calc(var(--r) + 6px);
  padding:18px 16px 14px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.cascata-cabeca{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;color:var(--texto-3);padding:0 4px 12px;border-bottom:1px solid var(--borda-escura)}
.cascata-empresas{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:12px 0 6px;margin:0 -4px}
.cascata-empresas::-webkit-scrollbar{display:none}
.cascata-empresas button{flex:none;font:inherit;font-size:.84rem;font-weight:600;color:var(--texto-2);background:rgba(255,255,255,.05);
  border:1px solid transparent;border-radius:var(--r-mini);padding:7px 12px;cursor:pointer;min-height:36px}
.cascata-empresas button[aria-selected="true"]{background:rgba(226,182,90,.14);border-color:rgba(226,182,90,.4);color:var(--bronze-texto)}
.cascata-linhas{display:grid;gap:2px;margin-top:8px}
.cascata-linhas li{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 8px;border-radius:8px;font-size:.92rem;color:var(--texto-2);isolation:isolate}
/* A barra anima a escala, não a largura: largura refaz o layout a cada quadro; transform fica na GPU. */
.cascata-linhas li::after{content:'';position:absolute;z-index:-1;left:0;top:3px;bottom:3px;width:100%;border-radius:6px;
  background:rgba(255,255,255,.045);transform:scaleX(var(--escala,0));transform-origin:left center;transition:transform .7s var(--curva)}
.cascata-linhas li.total{color:var(--texto);font-weight:650}
.cascata-linhas li.total::after{background:rgba(76,194,174,.12)}
.cascata-linhas li.menos b::before{content:'− '}
.cascata-linhas li.menos::after{background:rgba(255,107,97,.08)}
.cascata-linhas li.final{margin-top:4px;border-top:1px solid var(--borda-escura);border-radius:0 0 8px 8px;padding-top:12px;font-size:1.02rem}
.cascata-linhas li.final b{color:var(--patina);font-size:1.12rem}
.cascata-linhas li.negativo b{color:var(--vermelho)}
.cascata-linhas li.negativo::after{background:rgba(255,107,97,.14)}
.cascata-linhas b{font-weight:650;white-space:nowrap}
.cascata-leitura{margin-top:12px;padding:12px 12px;border-radius:var(--r-mini);background:rgba(226,182,90,.08);color:var(--texto);font-size:.9rem;line-height:1.45;min-height:3.9em}
.cascata-leitura b{color:var(--bronze-texto)}

/* Faixa de recursos (LogoLoop). Só anda com o site/js/faixa.js pronto ([data-anda]: cópias do
   laço sem emenda e botão Pausar à vista) e sem movimento reduzido. Sem JS ela andaria sem ter
   como parar (WCAG 2.2.2): parada, os itens quebram em linhas dentro do respiro da página.
   Para fora da tela, com a aba escondida e no botão Pausar ([data-parada]); o botão fica sobre
   o fio de cima, sem cobrir o texto. */
.faixa{position:relative;margin-top:64px;padding:22px 0 18px;border-top:1px solid var(--borda-escura)}
.faixa-janela{overflow:hidden}
.faixa-trilho{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;padding:0 max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px))}
@media (prefers-reduced-motion:no-preference){
  .faixa[data-anda] .faixa-janela{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .faixa[data-anda] .faixa-trilho{flex-wrap:nowrap;justify-content:flex-start;gap:40px;width:max-content;padding:0;animation:faixa 48s linear infinite}
}
.faixa[data-parada] .faixa-trilho{animation-play-state:paused}
@media (hover:hover){.faixa-janela:hover .faixa-trilho{animation-play-state:paused}}
/* À direita, alinhado com a coluna do conteúdo (.largura: 1200px com 20px de respiro). */
.faixa-pausa{position:absolute;top:0;right:max(20px,env(safe-area-inset-right,0px),calc((100% - 1200px) / 2 + 20px));transform:translateY(-50%);min-height:36px;padding:0 14px;
  font:inherit;font-size:.84rem;font-weight:600;color:var(--texto-2);background:var(--grafite);border:1px solid var(--borda-escura);border-radius:var(--r-mini);cursor:pointer}
.faixa-trilho li{white-space:nowrap;color:var(--texto-3);font-weight:550;font-size:.95rem;display:flex;align-items:center;gap:40px}
.faixa-trilho li::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--bronze-forte);opacity:.7}
@keyframes faixa{to{transform:translateX(-50%)}}

/* ── Argumento central ───────────────────────────────────────────────────── */
.comparacao{display:grid;gap:16px;margin-top:40px}
.comparacao-lado{border-radius:calc(var(--r) + 4px);padding:24px 20px}
.comparacao-lado h3{margin-bottom:18px}
.planilha{background:var(--porcelana-2);border:1px solid var(--borda-clara)}
.extrato{display:grid;gap:2px}
.extrato div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed rgba(21,23,28,.16)}
.extrato dt{color:var(--tinta-2)}
.extrato dd{font-weight:650}
.comparacao-nota{margin-top:18px;color:var(--tinta-2)}
.nummus{background:var(--grafite);color:var(--texto);box-shadow:0 24px 60px rgba(14,15,18,.22)}
.leituras{display:grid;gap:14px}
.leituras li{padding-left:16px;border-left:2px solid var(--bronze);color:var(--texto-2);line-height:1.5}
.leituras li b{color:var(--texto);display:block}
@media (min-width:820px){.comparacao{grid-template-columns:.85fr 1.15fr}.comparacao-lado{padding:30px 28px}}

/* ── Telas reais ─────────────────────────────────────────────────────────── */
.telas{background:linear-gradient(180deg,var(--grafite),var(--grafite-2))}
.vitrine-estatica{display:grid;gap:28px;margin-top:36px}
.vitrine-estatica figcaption{margin-top:10px;color:var(--texto-2);font-weight:600}
.vitrine-estatica img,.janela img{border-radius:0 0 var(--r) var(--r)}
.vitrine{margin-top:32px}
/* As abas vazam até a borda pelo mesmo respiro da .largura (deitado, com o entalhe, a área
   segura): a primeira começa alinhada com o texto e o scroll-padding mantém o encaixe ali. */
.vitrine-abas{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;scroll-snap-type:x proximity;
  --vazar-e:max(20px,env(safe-area-inset-left,0px));--vazar-d:max(20px,env(safe-area-inset-right,0px));
  margin:0 calc(-1 * var(--vazar-d)) 0 calc(-1 * var(--vazar-e));padding:0 var(--vazar-d) 4px var(--vazar-e);scroll-padding:0 var(--vazar-d) 0 var(--vazar-e)}
.vitrine-abas::-webkit-scrollbar{display:none}
.vitrine-abas button{flex:none;scroll-snap-align:start;font:inherit;font-weight:600;font-size:.92rem;color:var(--texto-2);min-height:42px;padding:0 16px;
  border-radius:var(--r);border:1px solid var(--borda-escura);background:rgba(255,255,255,.03);cursor:pointer}
.vitrine-abas button[aria-selected="true"]{color:var(--sobre-bronze);background:var(--bronze);border-color:var(--bronze)}
.vitrine-painel{display:grid;gap:24px;margin-top:22px}
.vitrine-texto h3{font-size:1.35rem}
.vitrine-texto p{margin-top:10px;color:var(--texto-2)}
.vitrine-texto ul{margin-top:16px;display:grid;gap:10px}
.vitrine-texto li{padding-left:22px;position:relative;color:var(--texto-2)}
.vitrine-texto li::before{content:'';position:absolute;left:2px;top:.6em;width:10px;height:6px;border-left:2px solid var(--patina);border-bottom:2px solid var(--patina);transform:rotate(-45deg)}
.janela{border-radius:var(--r);border:1px solid var(--borda-escura);background:var(--papel);box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.janela-barra{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--borda-escura);font-size:.8rem;color:var(--texto-3)}
.janela-barra span{flex:1;text-align:center;background:rgba(255,255,255,.05);border-radius:8px;padding:4px 10px;max-width:280px;margin:0 auto}
.janela img{animation:entrar-tela .45s var(--curva)}
@keyframes entrar-tela{from{opacity:.25;transform:scale(.995)}}
@media (min-width:980px){.vitrine-painel{grid-template-columns:.36fr .64fr;align-items:center;gap:40px}}

.celular-bloco{display:grid;gap:36px;align-items:center;margin-top:72px;padding:32px 20px 0;border-radius:calc(var(--r) + 8px);
  background:linear-gradient(160deg,rgba(226,182,90,.08),rgba(28,30,36,.6) 45%);border:1px solid var(--borda-escura);overflow:hidden}
.celular-texto{display:grid;gap:14px;max-width:52ch}
.celular-texto h3{font-size:clamp(1.4rem,3.6vw,1.9rem)}
.celular-texto>p{color:var(--texto-2)}
.celular-pontos{display:grid;gap:14px;margin-top:8px}
.celular-pontos li{display:grid;gap:2px;padding-left:16px;border-left:2px solid var(--bronze)}
.celular-pontos span{color:var(--texto-2);font-size:.95rem}
.celular{width:min(300px,78vw);justify-self:center;align-self:end;padding:10px 10px 0;border-radius:44px 44px 0 0;border-bottom:0;
  background:#0A0B0D;border:1px solid rgba(255,255,255,.14);box-shadow:0 -10px 60px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,255,255,.04);max-height:540px;overflow:hidden}
.celular img{border-radius:34px 34px 0 0}
@media (min-width:860px){
  .celular-bloco{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;padding:48px 56px 0}
  .celular-texto{align-self:center;padding-bottom:48px}
}

/* ── Estrutura: conta, CNPJs e perfis ────────────────────────────────────── */
.estrutura-grade{display:grid;gap:20px;margin-top:40px}
.organograma{background:var(--porcelana-2);border:1px solid var(--borda-clara);border-radius:calc(var(--r) + 4px);padding:20px;display:grid;gap:14px}
.organograma small{display:block;color:var(--tinta-2);font-size:.86rem;font-weight:450}
.org-conta{display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--r);background:var(--grafite);color:var(--texto)}
.org-conta small{color:var(--texto-2)}
.org-cnpjs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;position:relative}
.org-cnpjs li{padding:14px;border-radius:var(--r);border:1px solid var(--borda-clara);background:var(--porcelana)}
.org-consolidado{padding:14px;border-radius:var(--r);border:1px dashed var(--bronze-escuro);background:rgba(226,182,90,.10)}
.perfis-estatico,.perfis{background:var(--porcelana-2);border:1px solid var(--borda-clara);border-radius:calc(var(--r) + 4px);padding:20px}
.perfis-estatico ul{display:grid;gap:10px;margin-top:14px;color:var(--tinta-2)}
.perfis-estatico b{color:var(--tinta)}
.perfis-lista{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.perfis-lista button{font:inherit;font-size:.88rem;font-weight:600;min-height:38px;padding:0 13px;border-radius:var(--r-mini);cursor:pointer;
  border:1px solid var(--borda-clara);background:var(--porcelana);color:var(--tinta-2)}
.perfis-lista button[aria-selected="true"]{background:var(--grafite);border-color:var(--grafite);color:var(--texto)}
.perfil-detalhe{margin-top:16px;padding-top:16px;border-top:1px solid var(--borda-clara);animation:entrar-tela .35s var(--curva)}
.perfil-detalhe p{color:var(--tinta-2)}
.perfil-acessos{display:grid;gap:8px;margin-top:14px}
.perfil-acessos li{display:flex;justify-content:space-between;gap:12px;font-size:.93rem;padding:8px 0;border-bottom:1px solid var(--borda-clara)}
.perfil-acessos li span:last-child{font-weight:650;white-space:nowrap}
.perfil-acessos .sim{color:#1F7F6F}.perfil-acessos .nao{color:var(--tinta-2);font-weight:500}
@media (min-width:900px){.estrutura-grade{grid-template-columns:1fr 1fr;gap:24px}.org-cnpjs{grid-template-columns:repeat(4,1fr)}.organograma,.perfis,.perfis-estatico{padding:26px}}

/* ── Recursos ────────────────────────────────────────────────────────────── */
.recursos-grade{display:grid;gap:16px;margin-top:40px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.recurso-grupo{padding:24px 20px;border-radius:calc(var(--r) + 4px);background:var(--papel);border:1px solid var(--borda-escura)}
.recurso-grupo h3{color:var(--bronze-texto);margin-bottom:8px}
.recurso-grupo li{padding:14px 0;border-bottom:1px solid var(--borda-escura);display:grid;gap:3px}
.recurso-grupo li:last-child{border-bottom:0;padding-bottom:0}
.recurso-grupo li span{color:var(--texto-2);font-size:.93rem}

/* ── Passos ──────────────────────────────────────────────────────────────── */
.passos-lista{display:grid;gap:12px;margin-top:36px;counter-reset:passo;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
/* align-content:start: os cartões da linha esticam até o mais alto e, sem isso, a sobra se
   espalha entre número, título e texto, e cada título fica numa altura. */
.passos-lista li{counter-increment:passo;padding:22px 20px;border-radius:calc(var(--r) + 4px);background:var(--porcelana-2);border:1px solid var(--borda-clara);display:grid;gap:6px;align-content:start}
.passos-lista li::before{content:counter(passo);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:720;
  background:var(--grafite);color:var(--bronze);margin-bottom:6px}
.passos-lista span{color:var(--tinta-2)}

/* ── Preço ───────────────────────────────────────────────────────────────── */
.preco{background:radial-gradient(90% 60% at 80% 100%,rgba(76,194,174,.10),transparent 60%),var(--grafite)}
.preco-grade{display:grid;gap:36px;align-items:start}
.plano{border-radius:calc(var(--r) + 8px);padding:28px 22px;background:linear-gradient(180deg,rgba(226,182,90,.10),rgba(28,30,36,.92) 40%);
  border:1px solid rgba(226,182,90,.42);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.plano-valor{display:flex;align-items:baseline;gap:8px;margin:16px 0 22px;flex-wrap:wrap}
.plano-moeda{font-size:1.2rem;color:var(--texto-2);font-weight:600}
.plano-numero{font-size:clamp(3rem,13vw,4.2rem);font-weight:760;letter-spacing:-.045em;line-height:1}
.plano-periodo{color:var(--texto-2)}
.plano-itens{display:grid;gap:11px;margin-bottom:26px}
.plano-itens li{padding-left:26px;position:relative}
.plano-itens li::before{content:'';position:absolute;left:3px;top:.5em;width:11px;height:6px;border-left:2px solid var(--bronze);border-bottom:2px solid var(--bronze);transform:rotate(-45deg)}
.plano-nota{margin-top:16px;color:var(--texto-2);font-size:.93rem;text-align:center}
.plano-nota a{color:var(--bronze-texto)}
@media (min-width:980px){.preco-grade{grid-template-columns:1.1fr .9fr;gap:56px}.plano{padding:34px 30px}}

.simulador{margin-top:30px;padding:22px 20px;border-radius:calc(var(--r) + 4px);background:var(--papel);border:1px solid var(--borda-escura);display:grid;gap:22px}
.simulador label{display:grid;gap:10px}
.simulador-rotulo{display:flex;justify-content:space-between;gap:12px;font-weight:600}
.simulador-rotulo output{color:var(--bronze-texto);font-variant-numeric:tabular-nums}
.simulador input[type=range]{width:100%;accent-color:var(--bronze);height:28px}
.simulador-resultado{display:grid;gap:4px;padding-top:18px;border-top:1px solid var(--borda-escura)}
.simulador-resultado b{font-size:1.7rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.simulador-resultado span{color:var(--texto-2)}

/* ── Dúvidas ─────────────────────────────────────────────────────────────── */
.duvidas h2{margin-bottom:28px}
.duvidas details{border-bottom:1px solid var(--borda-clara)}
.duvidas summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:650;font-size:1.05rem;position:relative}
.duvidas summary::-webkit-details-marker{display:none}
.duvidas summary::after{content:'';position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--tinta-2);border-bottom:2px solid var(--tinta-2);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--curva)}
.duvidas details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.duvidas details p{padding:0 0 22px;color:var(--tinta-2);max-width:68ch}

/* ── Fechamento e rodapé ─────────────────────────────────────────────────── */
.fechamento{padding:96px 0}
.fechamento-grade{display:grid;gap:48px;align-items:center}
.fechamento-marca{display:grid;justify-items:center;text-align:center}
.fechamento-logo{width:178px;height:auto}
.fechamento h2.slogan{margin:28px auto 0;max-width:20ch;text-wrap:balance}
.fechamento .secao-lead{margin-left:auto;margin-right:auto}
.fechamento .abertura-acoes{justify-content:center}
.sobre-texto{background:var(--grafite-2);border:1px solid var(--borda-escura);border-radius:calc(var(--r) + 4px);padding:28px}
.sobre-texto h3{margin:0 0 14px;font-size:1.25rem;letter-spacing:-.01em}
.sobre-texto p{margin:0;color:var(--texto-2);line-height:1.62;text-wrap:pretty}
.sobre-texto p+p{margin-top:14px}
@media (min-width:980px){
  .fechamento-grade{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px}
  .sobre-texto{padding:36px}
}
/* No celular o fim da página precisa passar da barra de assinatura fixa (66px a 10px da base),
   senão ela cobre "Fale com o nosso time" e "Condições da assinatura". */
.rodape{background:var(--grafite-2);color:var(--texto-2);padding:40px 0 calc(96px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--borda-escura);font-size:.93rem}
@media (min-width:760px){.rodape{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}}
.rodape-grade{display:grid;gap:16px}
.rodape-marca{display:grid;gap:8px}
.rodape-slogan{margin:0;color:var(--bronze-texto);font-size:.88rem}
.rodape-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.rodape-links a{text-decoration:none}
@media (hover:hover){.rodape-links a:hover{color:var(--bronze-texto)}}
@media (min-width:820px){.rodape-grade{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px 48px}
  .rodape-marca{grid-row:span 2}}

/* ── Barra de contratação no celular ─────────────────────────────────────── */
.barra-celular{position:fixed;z-index:40;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;
  padding:10px 10px 10px 16px;border-radius:var(--r);background:rgba(28,30,36,.78);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:0 14px 44px rgba(0,0,0,.45);
  font-size:.9rem;color:var(--texto-2);transform:translateY(0);transition:transform .3s var(--curva),opacity .3s,visibility .3s}
.barra-celular b{color:var(--texto)}
.barra-celular .botao{margin-left:auto}
.barra-celular[hidden]{display:flex;transform:translateY(140%);opacity:0;visibility:hidden;pointer-events:none}
@media (min-width:760px){.barra-celular,.barra-celular[hidden]{display:none}}

/* ── Folha de contratação ────────────────────────────────────────────────── */
.folha{border:0;padding:0;margin:auto auto 0;width:100%;max-width:100%;max-height:92dvh;background:transparent;color:var(--texto)}
/* Folha aberta trava a página: a roda do mouse sobre o fundo não rola o site por trás.
   O vão da barra de rolagem fica no lugar dela, para nada pular de lado ao travar. */
html:has(dialog.folha[open]){overflow:hidden;scrollbar-gutter:stable}
.folha::backdrop{background:rgba(8,9,11,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.folha-quadro{display:flex;flex-direction:column;max-height:92dvh;border-radius:calc(var(--r) + 6px) calc(var(--r) + 6px) 0 0;overflow:hidden;
  background:rgba(28,30,36,.94);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  box-shadow:0 30px 90px rgba(0,0,0,.55);animation:subir .35s var(--curva)}
@keyframes subir{from{transform:translateY(24px);opacity:.4}}
.folha header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 20px 8px}
.folha header p{color:var(--texto-2);font-size:.93rem;margin-top:6px}
/* O <form> fica entre o quadro e o corpo: sem ser coluna flexível que encolhe (min-height:0),
   ele cresce com os campos, o corpo nunca rola e o botão de enviar sai da tela no celular. */
.folha-quadro>form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.folha-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 20px 4px;display:grid;gap:14px}
.folha footer{display:flex;flex-direction:column-reverse;gap:10px;padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--borda-escura)}
.campo{display:grid;gap:6px;font-size:.9rem;font-weight:600;color:var(--texto-2)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:16px;font-weight:450;color:var(--texto);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-mini);min-height:46px;padding:10px 12px;width:100%}
.campo textarea{min-height:84px;resize:vertical}
/* Lista suspensa no estilo do Nummus: sem o visual padrão do navegador (fundo branco). */
.campo select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:42px;
  background-color:rgba(255,255,255,.06);background-repeat:no-repeat;background-position:right 14px center;background-size:14px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBC67A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
@media (hover:hover){.campo select:hover{background-color:rgba(255,255,255,.09)}}
.campo select::-ms-expand{display:none}
.campo select option{background:#1C1E24;color:#F2F4F8}
.campo select option:checked{background:#3A3122;color:#EBC67A}
.campo input:-webkit-autofill{-webkit-text-fill-color:var(--texto);-webkit-box-shadow:0 0 0 40px #2A2C33 inset;caret-color:var(--texto)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 3px rgba(226,182,90,.2)}
.campo small{font-weight:450;color:var(--texto-3)}
.campos-2{display:grid;gap:14px}
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.folha-erro{color:var(--vermelho);font-size:.92rem}
.folha-ok{display:grid;gap:12px;padding:8px 0 4px}
.folha-ok p{color:var(--texto-2)}
.folha-resumo{display:flex;justify-content:space-between;gap:12px;padding:14px;border-radius:var(--r-mini);background:rgba(226,182,90,.10);border:1px solid rgba(226,182,90,.3);font-size:.93rem}
.folha-resumo b{color:var(--bronze-texto)}
@media (min-width:640px){
  .folha{margin:auto;max-width:560px}
  .folha-quadro{border-radius:calc(var(--r) + 6px)}
  .folha footer{flex-direction:row;justify-content:flex-end}
  .campos-2{grid-template-columns:1fr 1fr}
}

/* ── Movimento reduzido ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .faixa-trilho li[aria-hidden="true"],.faixa-pausa{display:none}
}

/* Itens de grade podem encolher abaixo do conteúdo (abas roláveis não alargam a página). */
.abertura-grade>*,.vitrine-painel>*,.estrutura-grade>*,.preco-grade>*,.comparacao>*,.celular-bloco>*{min-width:0}

/* Folha: título, aceite e nota (v1.11.0, assinatura pelo Stripe) */
.folha-titulo{font-size:1.35rem}
.aceite{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--texto-2);line-height:1.45;cursor:pointer}
.aceite input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--bronze)}
.aceite a,.folha-nota a{color:var(--bronze-texto)}
.folha-nota{font-size:.86rem;color:var(--texto-3)}
.folha-ok h3{font-size:1.1rem}

/* Condições da assinatura */
.documento{padding:calc(var(--topo-altura) + 56px) 0 72px}
.documento h1{font-size:clamp(1.9rem,6vw,2.6rem);letter-spacing:-.03em;margin-bottom:8px}
.documento h2{font-size:1.2rem;margin:32px 0 10px;max-width:none}
.documento p,.documento li{color:var(--texto-2);max-width:70ch}
.documento ul{list-style:disc;padding-left:22px;display:grid;gap:6px}
.documento .versao{color:var(--texto-3);font-size:.9rem}
.duvidas details p a{color:var(--bronze-escuro);font-weight:600}