/* Design system do Papo de Intercâmbio no funil (09/10/2026).

   Cópia das regras do app (app.papodeintercambio.com/estilo.css) para o funil ficar com
   a mesma cara: fonte do sistema, faixa escura de posicionamento, topo branco com o logo,
   botões em pílula (teal, ou dourado com texto escuro), cartões, opções e campos. Os nomes
   das classes são os mesmos do app de propósito: sincronizar é copiar e colar.

   Carregar DEPOIS do marca.css e ANTES do <style> da página. Acrescenta, no fim, o que é
   só do funil: botão fixo no celular, mensagens de incentivo, comemoração e revelação ao
   rolar, todos com prefers-reduced-motion. */
:root{
  --dourado:#f8ae00; --dourado-claro:#ffd76b; --teal:#077881; --teal-escuro:#045b62;
  --azul:#009fe3; --tinta:#0d2a2d; --tinta-fraca:#5c7477; --papel:#fff;
  --areia:#fdf8ef; --linha:#e7eceb; --verde:#1f9d55; --vermelho:#c0392b;
  --sombra:0 1px 2px rgba(13,42,45,.06), 0 10px 30px rgba(13,42,45,.07);
  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --raio:16px;
}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--fonte)}
body.papo{margin:0;background:var(--papel);color:var(--tinta);font:16px/1.6 var(--fonte);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.papo h1,body.papo h2,body.papo h3{font-family:var(--fonte);letter-spacing:-.4px}

/* faixa e topo, iguais ao app */
.faixa-marca{margin:0;background:var(--tinta);color:#fff;text-align:center;font:700 10.5px/1.35 var(--fonte);letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;position:sticky;top:0;z-index:31}
@media (max-width:480px){.faixa-marca{font-size:9.5px;letter-spacing:.03em}}
.topo-papo{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid var(--linha);position:sticky;top:29px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:30}
.topo-papo .marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);min-width:0}
.topo-papo .marca img{width:38px;height:38px;border-radius:50%;flex:none}
.topo-papo .marca span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.topo-papo .marca b{font-size:15px;white-space:nowrap}
.topo-papo .marca small{font-size:11px;color:var(--teal);font-weight:600;white-space:nowrap}
.topo-papo .nav{display:flex;gap:6px;align-items:center}
.topo-papo .nav a.link{white-space:nowrap;color:var(--tinta);text-decoration:none;font-size:14px;font-weight:600;padding:8px 10px;border-radius:10px}
.topo-papo .nav a.link:hover{background:var(--areia)}
.topo-papo .botao-teste{display:inline-flex;align-items:center;gap:6px;background:var(--dourado);color:var(--tinta);text-decoration:none;font:700 13px var(--fonte);padding:9px 14px;border-radius:999px;white-space:nowrap}
.topo-papo .botao-teste:hover{background:#e39f00}
.topo-papo .botao-topo{background:var(--teal);color:#fff;text-decoration:none;font:700 13px var(--fonte);padding:9px 14px;border-radius:999px;white-space:nowrap}
@media (max-width:860px){.topo-papo .nav a.link{display:none}}
@media (max-width:420px){.topo-papo .marca small{display:none}.topo-papo .marca img{width:32px;height:32px}.topo-papo .marca b{font-size:14px}.topo-papo .botao-teste,.topo-papo .botao-topo{padding:9px 11px}}
@media (max-width:360px){.topo-papo .marca b{display:none}}

/* botões do app (classe .bt para não brigar com o .botao de cada página antiga) */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;background:var(--teal);color:#fff;text-decoration:none;font:700 16px var(--fonte);padding:14px 22px;border-radius:999px;min-height:48px;transition:transform .1s,background .15s}
.bt:hover{background:var(--teal-escuro)} .bt:active{transform:scale(.98)}
.bt.dourado{background:var(--dourado);color:var(--tinta)} .bt.dourado:hover{background:#e39f00}
.bt.claro{background:var(--papel);color:var(--teal);border:2px solid var(--teal)}

/* rodapé do app */
.rodape-papo{padding:28px 16px 90px;text-align:center;color:var(--tinta-fraca);font-size:13px;border-top:1px solid var(--linha);margin-top:30px}
.rodape-papo a{color:var(--tinta-fraca);margin:0 6px}

/* ---------- experiência do funil ---------- */

/* revela ao rolar (js/papo-ui.js marca .visivel) */
.revela{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.revela.visivel{opacity:1;transform:none}

/* toque com retorno */
.toque{transition:transform .15s ease,box-shadow .15s ease}
.toque:active{transform:scale(.97)}

/* mensagem de incentivo: aparece sobre o rodapé por 2,6 s */
.incentivo{position:fixed;left:50%;bottom:18px;transform:translate(-50%,20px);opacity:0;z-index:2147482000;width:max-content;max-width:min(92vw,460px);
  background:var(--tinta);color:#fff;font:600 15px/1.4 var(--fonte);padding:12px 16px;border-radius:14px;box-shadow:0 10px 30px rgba(13,42,45,.28);
  display:flex;gap:10px;align-items:center;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.3,1);pointer-events:none}
.incentivo.on{opacity:1;transform:translate(-50%,0)}
.incentivo i{font-style:normal;font-size:20px;flex:none}

/* comemoração discreta: confete leve em transform/opacity */
.festa{position:fixed;inset:0;pointer-events:none;z-index:2147481000;overflow:hidden}
.festa span{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:0;animation:cai 1.6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes cai{0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}100%{opacity:0;transform:translate3d(var(--dx),70vh,0) rotate(var(--rot))}}

/* botão fixo no celular (aparece depois que a primeira dobra passa) */
.cta-fixo{position:fixed;left:12px;right:12px;bottom:12px;z-index:2147480000;display:none;transform:translateY(130%);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.cta-fixo.on{transform:none}
.cta-fixo a{width:100%;box-shadow:0 10px 30px rgba(13,42,45,.3)}
@media (max-width:720px){.cta-fixo{display:block}}

/* número que conta ao aparecer */
[data-contar]{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none;transition:none}
  .incentivo{transition:opacity .2s}
  .festa{display:none}
  .cta-fixo{transition:none}
  .toque:active{transform:none}
}

/* ---------- harmonização das páginas antigas do funil ---------- */
/* uma fonte só, a do sistema (o app não usa Inter nem Playfair) */
body.papo, body.papo *:not(code):not(pre){font-family:var(--fonte)!important}
/* fundo branco como o app; as seções coloridas de cada página continuam */
body.papo{background:var(--papel)}
/* botões em pílula, como no app */
body.papo .botao, body.papo .btn, body.papo .hero-cta, body.papo .tier-cta, body.papo .pricing-cta,
body.papo .rec-alt-btn, body.papo .comecar, body.papo .lock-buy-btn{border-radius:999px}
/* quiz: o topo do app já mostra a marca; fica só o "1 de 7" */
body.papo .shell .header .brand{display:none}
body.papo .shell .header{justify-content:flex-end;margin-top:12px}
/* como no app: em tela estreita o topo fica só com o logo e os botões */
@media (max-width:430px){.topo-papo .marca b{display:none}.topo-papo .marca{flex:none}}
/* faixa de números reais, que contam ao aparecer (js/papo-ui.js, data-contar) */
.numeros-papo{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;margin:8px auto 22px;max-width:640px}
@media (max-width:560px){.numeros-papo{grid-template-columns:1fr 1fr}}
.numeros-papo div{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:12px 8px;box-shadow:var(--sombra)}
.numeros-papo b{display:block;font-size:clamp(24px,6.5vw,34px);font-weight:800;color:var(--teal);line-height:1.05}
.numeros-papo span{display:block;font-size:12.5px;color:var(--tinta-fraca);margin-top:4px;line-height:1.3}