/* favuka.com · pele meta do site (manual v2, aprovado 03/10/2026)
   Design system: agente-sites/IDENTIDADE.md. Fundo branco, azul Meta, Public Sans.
   Moldura da casa: topo com o lockup em curva, rodapé com a logo C e o @ em mono.
   Lei 0: dentro de componente que imita interface (balão do WhatsApp, card do
   Gerenciador) é uma fonte, um tamanho e um peso. Um destaque por página. */

:root{
  /* pele meta */
  --bg:#FFFFFF; --tx:#1C2B33; --tx2:#465A69; --borda:#CBD2D9; --cinza:#F1F4F7; --ac:#0467DF;
  /* casa (moldura) */
  --casa-azul:#2563EB; --casa-verde:#16A34A; --casa-tinta:#111418; --casa-muted:#5B6670;
  --casa-borda:#E3E6EA; --down:#DC2626; --muted2:var(--casa-muted);
  --mono:'JetBrains Mono',monospace;
  --raio:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:#E7F0FD;color:var(--tx)}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:'Public Sans',system-ui,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-underline-offset:2px}
.mono{font-family:var(--mono)}
strong{font-weight:600;color:var(--tx)}

/* ---------------- moldura: topo ---------------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--casa-borda)}
.topo-in{max-width:1080px;margin:0 auto;height:76px;padding:0 20px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;position:relative}
.topo-in::after{content:"";position:absolute;left:20px;bottom:-1px;width:72px;height:3px;background:var(--ac)}
.topo .marca{display:block;line-height:0;flex:none}
.topo .marca img{height:52px;width:auto}
.topo .rot{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--casa-muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.dot{width:8px;height:8px;border-radius:50%;background:var(--casa-verde);flex:none;animation:dotpulse 2.4s infinite}
@keyframes dotpulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
@media (max-width:520px){.topo .marca img{height:38px}.topo .rot{font-size:10px;letter-spacing:.1em}}

/* ---------------- layout ---------------- */
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
section{padding:56px 0}
section+section{border-top:1px solid var(--casa-borda)}
p+p{margin-top:12px}

/* olho, títulos, corpo */
.kicker{font-weight:600;font-size:15px;color:var(--ac);margin-bottom:14px;letter-spacing:.005em}
h1{font-weight:700;letter-spacing:-.03em;line-height:1.06;font-size:clamp(2rem,5.6vw,3.15rem);color:var(--tx)}
h2{font-weight:700;letter-spacing:-.025em;line-height:1.14;font-size:clamp(1.45rem,3.6vw,1.95rem);
  margin-bottom:20px;color:var(--tx)}
.accent{color:inherit}
h1 .accent{color:var(--casa-verde)}   /* o destaque único da página: o ponto verde da logo, no H1 */
.sub{margin-top:20px;color:var(--tx2);font-size:1.1rem}
.sub strong{font-weight:400;color:var(--tx2)}
.lead{color:var(--tx2)}

/* ---------------- botão pílula ---------------- */
.cta{display:flex;align-items:center;justify-content:center;margin:28px 0 0;max-width:460px;
  background:var(--ac);color:#FFFFFF;font-weight:600;font-size:1.06rem;text-align:center;
  text-decoration:none;padding:16px 30px;border-radius:999px;transition:background .15s}
.cta:hover{background:#0359C2}
.cta:focus-visible{outline:3px solid #9DC3F5;outline-offset:2px}
.cta-note{margin-top:12px;font-size:14px;color:var(--tx2)}
.cta-alt{background:#FFFFFF;color:var(--tx);border:2px solid var(--tx)}
.cta-alt:hover{background:var(--cinza)}

/* ---------------- cartões ---------------- */
.cards{display:grid;gap:14px;margin-top:8px}
.card{background:#FFFFFF;border:1px solid var(--borda);border-radius:var(--raio);padding:22px 24px}
.card.cinza{background:var(--cinza);border-color:var(--cinza)}
.card .ck{font-weight:600;font-size:15px;color:var(--ac);margin-bottom:8px}
.card .ct{font-weight:600;font-size:1.04rem;color:var(--tx)}
.card .cd{color:var(--tx2);font-size:.98rem;margin-top:4px}
.card .cq{color:var(--tx);margin-top:8px;font-size:1rem}
.card .cp{margin-top:16px;padding:12px 16px;border-radius:14px;background:var(--cinza);font-weight:600;
  font-size:.98rem;color:var(--tx)}

/* linha com pílula (respondeu sim / não) */
.split{display:grid;gap:14px;margin-top:18px}
@media (min-width:640px){.split{grid-template-columns:1fr 1fr}}
.pilula{display:inline-block;border-radius:999px;padding:5px 14px;font-weight:600;font-size:14px;
  background:#E6EBEF;color:var(--tx);margin-bottom:12px}
.pilula.bom{background:#E7F0FD;color:var(--ac)}
.split .card .ct{font-weight:400;color:var(--tx2);font-size:1rem}

/* esteira: passo numerado em círculo azul */
.esteira .card{position:relative;padding-left:86px}
.esteira .ck{display:flex;align-items:center;min-height:44px;margin-bottom:4px}
.esteira .ck .n{position:absolute;left:24px;top:22px;width:44px;height:44px;border-radius:50%;
  background:var(--ac);color:#FFFFFF;font-weight:700;font-size:15px;display:flex;align-items:center;
  justify-content:center}
.esteira .ck .sep{display:none}
@media (max-width:480px){.esteira .card{padding-left:24px;padding-top:80px}.esteira .ck{min-height:0}}

/* frase explicada: o parágrafo inteiro num cartão cinza */
.quote{margin-top:8px;font-size:1.14rem;font-weight:600;line-height:1.5;color:var(--tx)}
.quote.soft{background:var(--cinza);border-radius:var(--raio);padding:24px 26px;font-weight:400;
  color:var(--tx2);font-size:1.02rem}

/* FAQ */
details{background:var(--cinza);border-radius:var(--raio);margin-bottom:10px}
summary{cursor:pointer;padding:18px 22px;font-weight:600;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:12px;color:var(--tx)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';color:var(--ac);font-weight:600;font-size:1.2rem;flex-shrink:0}
details[open] summary::after{content:'–'}
details .fa{padding:0 22px 18px;color:var(--tx2)}
details .fa strong{font-weight:400;color:var(--tx2)}

/* prova */
.metrics{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-top:8px}
@media (min-width:640px){.metrics{grid-template-columns:repeat(4,1fr)}}
.metric{background:var(--cinza);border-radius:var(--raio);padding:20px 18px}
.metric .ml{font-size:14px;color:var(--tx2);line-height:1.35}
.metric .mv{font-weight:700;letter-spacing:-.02em;font-size:clamp(1.5rem,4vw,1.9rem);margin-top:6px;color:var(--tx)}

/* o que não promete: linha com marca vermelha */
.no-list{display:grid;gap:10px}
.no-item{background:var(--cinza);border-radius:16px;padding:16px 20px 16px 50px;position:relative}
.no-item::before{content:"";position:absolute;left:20px;top:22px;width:14px;height:14px;
  background:linear-gradient(45deg,transparent 43%,var(--down) 43% 57%,transparent 57%),
             linear-gradient(-45deg,transparent 43%,var(--down) 43% 57%,transparent 57%)}
.no-item .nt{font-weight:600;color:var(--tx)}
.no-item .nd{color:var(--tx2);font-size:.97rem;margin-top:2px}
.no-item a{font-weight:600}

/* ---------------- componente: balão do WhatsApp (lei 0: Roboto 400, um tamanho) ---------------- */
.wa-tela{background:#EFEAE2 url("/marca/textura-whatsapp.svg") repeat;background-size:260px 260px;
  border-radius:var(--raio);padding:22px 22px 22px 34px;margin-top:8px;overflow:hidden}
.wa-b{position:relative;max-width:560px;padding:9px 12px 8px;border-radius:10px;background:#FFFFFF;
  border-top-left-radius:0;font-family:'Roboto',system-ui,sans-serif;font-weight:400;font-size:16.5px;
  line-height:1.42;color:#111B21;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-b::before{content:"";position:absolute;top:0;left:-9px;width:10px;height:13px;background:#FFFFFF;
  clip-path:polygon(100% 0,0 0,100% 100%)}
.wa-b .wa-hora{float:right;margin:8px 0 -4px 14px;font-size:11.5px;color:#667781;line-height:1}

/* ---------------- componente: card do Gerenciador (lei 0: Inter 400, um tamanho) ---------------- */
.ads-card{background:#F0F2F5;border-radius:var(--raio);padding:14px;margin-top:2px}
.ads-painel{background:#FFFFFF;border:1px solid #DADDE1;border-radius:10px;overflow:hidden;
  font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:15px;line-height:1.55;color:#1C2B33}
.ads-aba{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid #DADDE1;
  box-shadow:inset 0 -3px 0 #0866FF;color:#0866FF}
.ads-aba svg{width:18px;height:18px;flex:none}
.ads-corpo{padding:16px 18px;color:#1C2B33}
.ads-corpo a{color:#0866FF}

/* ---------------- texto corrido (/radar) ---------------- */
.prose p,.prose ul,.prose ol,.prose pre{margin-top:12px}
.prose p{color:var(--tx2)}
.prose strong{color:var(--tx)}
.prose ul,.prose ol{padding-left:22px;color:var(--tx2)}
.prose li{margin-top:6px}
.prose code{font-family:var(--mono);font-size:.84em;background:var(--cinza);border-radius:6px;
  padding:1px 6px;color:var(--tx)}
.prose pre{background:var(--cinza);border-radius:14px;padding:16px 18px;overflow-x:auto}
.prose pre code{background:none;padding:0;font-size:12.5px;line-height:1.7}
.prose em{color:var(--tx)}
.sub.prose p{font-size:1.08rem}
.radar-top{background:#E7F0FD;border-radius:16px;padding:14px 18px;margin-bottom:28px;color:var(--tx);font-size:15px}
.radar-top strong{color:var(--ac)}
.chap h2{margin-bottom:8px}

/* lista numerada (índice do /radar) */
.list{display:grid;gap:8px;margin-top:8px}
.item{display:flex;gap:14px;align-items:center;background:var(--cinza);border-radius:16px;padding:12px 16px}
.item .n{width:34px;height:34px;border-radius:50%;background:var(--ac);color:#FFFFFF;font-weight:700;
  font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.item .t{font-weight:600}
.item .d{color:var(--tx2);font-size:.95rem;margin-top:2px}
.list a.t{color:var(--tx);text-decoration:none}
.list a.t:hover{color:var(--ac)}

/* ---------------- /infra ---------------- */
.term{background:var(--cinza);border-radius:var(--raio);padding:20px 22px;font-size:.98rem;line-height:1.9;
  color:var(--tx2);overflow-x:auto}
.term .ok{color:var(--casa-verde);font-weight:700}
.term .k{color:var(--tx);font-weight:600}
.price-box{background:var(--cinza);border-radius:var(--raio);padding:30px 24px;text-align:center}
.price-box .cta{margin:24px auto 0}
.price{font-weight:700;letter-spacing:-.02em;font-size:clamp(1.8rem,4.5vw,2.4rem)}
.price small{display:block;font-weight:400;font-size:.98rem;color:var(--tx2);margin-top:6px;letter-spacing:0}

/* ---------------- moldura: rodapé ---------------- */
footer{border-top:1px solid var(--casa-borda);position:relative;padding:28px 20px 36px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--casa-muted);text-align:center}
footer .assina{display:flex;align-items:center;justify-content:center;gap:12px}
footer .assina img{width:36px;height:36px}
footer .at{color:var(--casa-azul)}
footer .badge{text-transform:uppercase;letter-spacing:.12em}
footer .legal{margin-top:16px;font-size:11px;line-height:1.75;letter-spacing:.02em;color:var(--casa-muted)}
footer .legal strong{color:var(--casa-tinta);font-weight:500}
footer .legal a{color:var(--casa-muted)}
footer .legal a:hover{color:var(--ac)}

/* ---------------- páginas legais ---------------- */
main.legal h1{font-size:clamp(28px,4.5vw,42px)}
main.legal .meta{font-family:var(--mono);font-size:12px;color:var(--casa-muted);margin-top:14px;line-height:1.6}
main.legal .meta strong{color:var(--tx);font-weight:500}
main.legal section{padding:36px 0}
main.legal .list{list-style:none;padding:0;margin:12px 0 0;display:block}
main.legal .list li{padding:10px 0;border-top:1px solid var(--casa-borda);color:var(--tx2);font-size:16px}
main.legal .list li:first-child{border-top:0}
main.legal .list li strong,main.legal .lead strong{color:var(--tx)}

@media (prefers-reduced-motion: reduce){.dot{animation:none}html{scroll-behavior:auto}}

/* hero da /homologacao */
.hub{padding:64px 0 56px}
main.legal h1 + .lead{margin-top:16px}
.lead + .term,.lead + .cards{margin-top:16px}
main.legal .list + .lead{margin-top:12px}