:root{
  --amarelo:#FDD805; --amarelo-2:#FFE646; --amarelo-escuro:#E8C300; --creme:#FFF8D6;
  --preto:#141414; --texto:#141414; --texto-2:#3a3500; --borda:rgba(20,20,20,.14);
  --e1:4px; --e2:8px; --e3:16px; --e4:24px; --e5:32px; --e6:48px; --e7:64px;
  --raio:24px; --fonte:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--texto);font:400 17px/1.55 var(--fonte);-webkit-text-size-adjust:100%;
  background:radial-gradient(900px 500px at 50% -10%,var(--amarelo-2),transparent 70%),var(--amarelo)}
.pular{position:absolute;left:var(--e3);top:-100px;background:var(--preto);color:#fff;padding:var(--e2) var(--e3);border-radius:8px;z-index:20}
.pular:focus{top:var(--e2)}
.wrap{max-width:560px;margin:0 auto;padding:var(--e4) var(--e3) var(--e7)}
.hero{text-align:center}
.logo{display:block;margin:0 auto var(--e3);width:min(260px,70vw);height:auto;aspect-ratio:678/667}
.logo-mini{display:block;margin:0 auto var(--e3);width:96px;height:auto;aspect-ratio:678/667}
.pill{display:inline-block;margin:0;padding:var(--e2) var(--e3);border-radius:999px;background:rgba(255,255,255,.55);border:1px solid var(--borda);font-size:15px;font-weight:700;backdrop-filter:blur(6px)}
.pill-marca{background:var(--preto);color:var(--amarelo);border-color:var(--preto);letter-spacing:.08em;text-transform:uppercase;font-size:13px}
h1{margin:var(--e3) 0;font-size:clamp(2.3rem,10vw,3.5rem);line-height:1.04;font-weight:900;letter-spacing:-.03em}
.marca-txt{display:inline-block;background:var(--preto);color:var(--amarelo);padding:0 var(--e3);border-radius:14px;transform:rotate(-1.5deg)}
.lead{margin:0 auto var(--e4);font-size:18px;max-width:30em;color:var(--texto-2)}
.badges{list-style:none;margin:0 0 var(--e5);padding:0;display:flex;flex-wrap:wrap;gap:var(--e2);justify-content:center}
.cta{display:flex;align-items:center;justify-content:center;gap:var(--e2);min-height:60px;padding:var(--e3) var(--e4);background:var(--preto);color:var(--amarelo);font-size:19px;font-weight:800;text-decoration:none;border-radius:18px;box-shadow:0 10px 0 rgba(20,20,20,.18),0 18px 32px rgba(20,20,20,.22);transition:transform .15s,box-shadow .15s}
.cta::before{content:"💬"}
.cta::after{content:"→";transition:transform .15s}
.cta:hover{transform:translateY(-2px)}
.cta:hover::after{transform:translateX(4px)}
.cta:active{transform:translateY(4px);box-shadow:0 4px 0 rgba(20,20,20,.18)}
a:focus-visible{outline:4px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px var(--preto)}
.micro{margin:var(--e4) 0 0;font-size:14px;color:var(--texto-2)}
section{margin-top:var(--e7)}
.eyebrow{margin:0 0 var(--e3);font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.cards{display:grid;gap:var(--e3)}
.card{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e4);background:var(--creme);border:2px solid var(--preto);border-radius:var(--raio);box-shadow:6px 6px 0 var(--preto)}
.ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--amarelo);border:2px solid var(--preto);font-size:24px}
.card h2{margin:0 0 var(--e1);font-size:19px;letter-spacing:-.01em}
.card p{margin:0;color:var(--texto-2)}
.close{text-align:center;padding:var(--e6) var(--e3);background:var(--preto);color:var(--creme);border-radius:32px}
.close h2{margin:0 0 var(--e2);font-size:clamp(1.7rem,6vw,2.2rem);line-height:1.12;letter-spacing:-.02em;color:var(--amarelo)}
.close p{margin:0 0 var(--e4);color:var(--creme)}
.close .cta{background:var(--amarelo);color:var(--preto);box-shadow:0 8px 0 rgba(253,216,5,.25)}
.close a:focus-visible{outline-color:var(--amarelo);box-shadow:none}
footer{margin-top:var(--e7);padding-top:var(--e4);border-top:2px solid var(--preto);text-align:center;font-size:14px;color:var(--texto-2)}
footer p{margin:0 0 var(--e2)}
.sticky{position:fixed;left:0;right:0;bottom:0;padding:var(--e2) var(--e3) calc(var(--e2) + env(safe-area-inset-bottom));background:rgba(253,216,5,.94);backdrop-filter:blur(8px);border-top:2px solid var(--preto);transform:translateY(110%);transition:transform .25s;z-index:10}
.sticky.on{transform:none}
.sticky .cta{max-width:528px;margin:0 auto;min-height:56px;box-shadow:none}
@media (min-width:768px){.wrap{padding-top:var(--e6)}.logo{width:300px}.sticky{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}