/* =====================================================================================
   Viver de Comprinha · componentes das páginas de produto (/como-funciona, /funcionalidades, /planos).
   Só usa os tokens de marca.css: nenhuma cor, fonte, raio ou sombra nova.
   ===================================================================================== */

/* ---------- herói compacto das páginas internas ---------- */
.hero-pg .numeros{margin-top:var(--e8)}
.hero-pg .numero{padding:var(--e4)}
.hero-pg .numero b{font-size:clamp(32px,4vw,44px)}
.hero-pg .quadro-hero{position:relative;z-index:1}
.migalha{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--t-pequeno);color:var(--texto-apoio);margin-bottom:var(--e3)}
.migalha a{color:var(--texto-apoio)}
.migalha a:hover{color:var(--violeta)}

/* ---------- tutorial: índice lateral + história ---------- */
.tutorial{display:grid;gap:var(--e8)}
@media(min-width:1200px){.tutorial{grid-template-columns:200px 1fr;gap:var(--e6)}}
.indice{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e4)}
.indice b{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-apoio);margin-bottom:var(--e2)}
.indice ol{list-style:none;display:grid;gap:2px;counter-reset:ind}
@media(min-width:600px) and (max-width:1199px){.indice ol{grid-template-columns:repeat(2,1fr);column-gap:var(--e4)}}
.indice a{display:flex;gap:10px;align-items:center;min-height:44px;padding:4px 8px;border-radius:var(--r-sm);text-decoration:none;color:var(--texto);font-weight:600;font-size:15px;line-height:1.25}
.indice a::before{counter-increment:ind;content:counter(ind);flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lavanda-2);color:var(--violeta);font:800 13px/1 var(--f-texto)}
.indice a:hover{background:var(--lavanda)}
@media(min-width:1200px){.indice{position:sticky;top:96px;align-self:start}}
.historia .etapa{scroll-margin-top:96px}
.historia .etapa h3{font-size:clamp(24px,2.6vw,30px)}

/* palco: várias molduras empilhadas; aparece a que tem a imagem ativa (motion.js troca .ativa) */
.palco{display:grid;align-items:center;justify-items:center;min-height:620px}
.palco>.quadro{grid-area:1/1;width:100%;opacity:0;visibility:hidden;transform:translateY(12px) scale(.98);transition:opacity .6s var(--ease),transform .7s var(--ease),visibility .6s}
.palco>.quadro:has(img.troca.ativa){opacity:1;visibility:visible;transform:none}
.palco .celular .tela img.troca{position:static;opacity:1}
.palco .navegador img.troca{opacity:1}
.palco .rotulo-quadro{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--texto-apoio);margin-bottom:var(--e3)}

/* "o que clicar" e "o que acontece" dentro de cada etapa */
.faca{display:grid;gap:var(--e3);margin-top:var(--e4);max-width:480px}
.faca>div{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-md);padding:var(--e3) var(--e4)}
.faca dt{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--violeta);margin-bottom:4px}
.faca dd{font-size:15px;color:var(--texto-apoio)}
.faca dd ol{padding-left:20px;display:grid;gap:4px}
.bt-nome{display:inline-block;font-weight:700;font-size:.92em;color:var(--violeta);background:var(--lavanda-2);border-radius:var(--r-sm);padding:1px 8px;white-space:nowrap}
.etapa .nota-honesta{margin-top:var(--e4);max-width:480px}

/* ---------- cartões de dica e de erro ---------- */
.dica-c .ic-num{font:800 14px/1 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--violeta)}
.erro-c{display:grid;gap:var(--e3)}
.erro-c h3{margin:0}
.erro-c .aviso-app{background:var(--lavanda);border:1px solid var(--lavanda-3);border-radius:var(--r-md);padding:var(--e3) var(--e4);font-size:14px;color:var(--texto)}
.erro-c .aviso-app b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--violeta);margin-bottom:4px}
.cartao-ameixa .ic-num{color:var(--lavanda)}

/* ---------- painéis das abas ---------- */
.painel-aba .dividir{gap:var(--e8)}
.painel-aba h3{margin-bottom:var(--e3)}
.lista-ok{list-style:none;display:grid;gap:12px;margin:var(--e4) 0}
.lista-ok li{display:flex;gap:10px;color:var(--texto-apoio)}
.lista-ok li svg{color:var(--violeta);margin-top:1px}
.lista-ok li b{color:var(--texto)}
.secao-ameixa .lista-ok li{color:#D9CEF5}
.secao-ameixa .lista-ok li b{color:var(--lavanda)}
.secao-ameixa .lista-ok li svg{color:var(--lilas)}
.lista-nao li svg{color:var(--texto-suave)}

/* ---------- barras da nota (pesos reais do score) ---------- */
.pesos{display:grid;gap:var(--e3)}
.peso{display:grid;grid-template-columns:1fr auto;gap:4px var(--e3);align-items:baseline}
.peso b{font-weight:700}
.peso span{font:800 18px/1 var(--f-titulo);color:var(--violeta)}
.peso small{grid-column:1/-1;font-size:14px;color:var(--texto-apoio)}
.peso i{grid-column:1/-1;height:10px;border-radius:var(--r-pill);background:var(--lavanda-2);overflow:hidden;position:relative}
.peso i::after{content:"";position:absolute;inset:0;width:calc(var(--w,0) * 4%);background:var(--violeta);border-radius:var(--r-pill);
  transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease) .2s}
.visivel .peso i::after,.pesos.visivel i::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.peso i::after{transform:none}}

/* ---------- tabelas ---------- */
.tabela-s td.c,.tabela-s th.c{text-align:center}
.tabela-s .grupo-linha td{background:var(--lavanda);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--violeta)}
.tabela-s td b{color:var(--texto)}
.tabela-s small{display:block;color:var(--texto-suave);font-size:13px;margin-top:2px}
.marca-sim,.marca-nao,.marca-breve{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;white-space:nowrap}
.marca-sim{color:var(--sucesso)}
.marca-nao{color:var(--texto-suave)}
.marca-breve{color:var(--violeta)}
.tabela-larga{min-width:720px}
.tabela-media{min-width:560px}
.dica-rolar{display:block;font-size:13px;color:var(--texto-suave);margin-top:var(--e2)}
@media(min-width:960px){.dica-rolar{display:none}}

/* ---------- planos ---------- */
.plano-s .tit-plano{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.plano-s h3{font-size:24px}
.plano-s .para{font-size:15px;color:var(--texto-apoio)}
.plano-s .btn{width:100%}
.plano-s.extra{background:var(--lavanda);border-style:dashed;border-color:var(--borda-forte)}
.nota-preco{text-align:center;margin-top:var(--e6)}

/* linha do tempo do teste */
.linha-tempo{list-style:none;display:grid;gap:var(--e4);position:relative}
@media(min-width:900px){.linha-tempo{grid-template-columns:repeat(4,1fr)}}
.linha-tempo li{position:relative;background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e6)}
.linha-tempo .dia{display:inline-flex;align-items:center;gap:8px;font:800 20px/1.1 var(--f-titulo);color:var(--texto);margin-bottom:var(--e3)}
.linha-tempo .dia::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--violeta);flex:none}
.linha-tempo li.fim .dia::before{background:var(--ameixa)}
.linha-tempo p{font-size:15px;color:var(--texto-apoio)}
.linha-tempo p + p{margin-top:var(--e2)}

/* calculadora */
.calc{display:grid;gap:var(--e6)}
@media(min-width:900px){.calc{grid-template-columns:1.1fr .9fr;align-items:start}}
.calc fieldset{border:0;display:grid;gap:var(--e3)}
.calc legend{font-weight:700;margin-bottom:var(--e3)}
.calc .opcoes{display:grid;gap:var(--e2)}
@media(min-width:560px){.calc .opcoes{grid-template-columns:repeat(3,1fr)}}
.calc .opcao{position:relative}
.calc .opcao input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.calc .opcao label{display:flex;flex-direction:column;gap:2px;min-height:64px;justify-content:center;padding:var(--e3) var(--e4);border-radius:var(--r-md);border:2px solid var(--borda);background:var(--branco);font-weight:700;cursor:pointer;transition:border-color .2s,background .2s}
.calc .opcao label small{font-weight:600;color:var(--texto-apoio)}
.calc .opcao input:checked + label{border-color:var(--violeta);background:var(--lavanda)}
.calc .opcao input:focus-visible + label{box-shadow:var(--foco)}
.contador-n{display:flex;align-items:center;gap:var(--e3)}
.contador-n button{width:48px;height:48px;border-radius:50%;border:2px solid var(--violeta);background:var(--branco);color:var(--violeta);font:800 22px/1 var(--f-texto);cursor:pointer}
.contador-n button:disabled{opacity:.4;cursor:not-allowed}
.contador-n output,.contador-n .valor{min-width:48px;text-align:center;font:800 32px/1 var(--f-titulo)}
.total-calc{background:var(--ameixa);color:var(--lavanda);border-radius:var(--r-lg);padding:var(--e6)}
.total-calc .rot{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#D9CEF5}
.total-calc .valor-total{display:block;font:800 clamp(40px,6vw,56px)/1 var(--f-titulo);margin:var(--e2) 0;color:var(--lavanda)}
.total-calc p{color:#D9CEF5;font-size:15px}
.total-calc ul{list-style:none;margin-top:var(--e4);display:grid;gap:6px;font-size:15px;color:#D9CEF5}
.total-calc ul li{display:flex;justify-content:space-between;gap:var(--e3);border-bottom:1px solid #3A2C5E;padding-bottom:6px}
.sem-js .so-js{display:none}
.exemplos-calc{margin-top:var(--e4)}
.exemplos-calc summary{cursor:pointer;font-weight:700;color:var(--violeta);min-height:48px;display:flex;align-items:center}

/* ---------- "o que não fazemos" ---------- */
.nao-fazemos .cartao h3{font-size:20px}
.nao-fazemos .icone-bloco{background:var(--lavanda-2)}

/* ---------- utilidades ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.par-celulares{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);max-width:560px;margin:0 auto}
.par-celulares .celular{width:100%;border-radius:32px;padding:8px}
.par-celulares .celular::before{top:16px;width:56px;height:16px}
.par-celulares .celular .tela{border-radius:26px}
.nota-tabela{margin-top:var(--e6)}
.oferta-c .faq-s details{margin:0}
.oferta-c .faq-s summary{font-size:15px;padding:14px 48px 14px 14px}
.oferta-c .faq-s .resp{padding:0 14px 14px;font-size:14px}
.oferta-c .faq-s .lista-ok{gap:4px;margin:0}
.oferta-c .tit-plano{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.oferta-c{margin:0 auto}
.migalha-centro,.ctas-centro{justify-content:center}
.pequeno-claro{font-size:var(--t-pequeno);margin-top:var(--e4)}
.dividir-topo{align-items:start}
.campo-extra{margin-top:var(--e6)}
.contador-n input.valor{width:88px;height:56px;border:2px solid var(--borda-forte);border-radius:var(--r-md);background:var(--branco);color:var(--texto);-moz-appearance:textfield}
.contador-n input.valor::-webkit-inner-spin-button,.contador-n input.valor::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.contador-n input.valor:focus-visible{border-color:var(--violeta)}
.secao:has(>.textura-sorriso){position:relative;overflow:hidden}
.secao:has(>.textura-sorriso)>.c{position:relative}
.hero-pg>.c{position:relative}
@media (prefers-reduced-motion:reduce){.historia .etapa{opacity:1}}
.secao-ameixa .tabela-s{color:var(--texto)}
.secao-ameixa .tabela-s td{color:var(--texto-apoio)}
.secao-ameixa .dica-rolar{color:#D9CEF5}
.oferta-c .img .ic{width:56px;height:56px;stroke-width:1.5}
.tabela-s tbody th{text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;color:var(--texto);background:var(--branco);width:46%}
.tabela-s thead th.c{width:18%}
.tabela-planos{table-layout:fixed}
.tabela-planos thead th:first-child{width:46%}
.exemplos-calc details{margin-top:var(--e6)}
.exemplos-calc summary{color:var(--violeta)}
@media(max-width:719px){.tabela-planos{min-width:540px}.tabela-planos thead th:first-child{width:40%}.tabela-planos th,.tabela-planos td{padding:12px 10px}}