/* Vaca Cheia — landing + páginas legais. CSS puro, fontes do sistema. Tokens em ../DESIGN.md */
:root{
  --bg:#F5F9F6;--surface:#FFFFFF;--ink:#14201A;--ink-2:#45524B;
  --green:#2E7D32;--green-ink:#1B5E20;--tint:#DCEFE0;--line:#C9D6CD;
  --round:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:40px;--s8:48px;--s9:64px;--s10:80px;--s11:96px;
  --gutter:16px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:400 16px/24px var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--green-ink);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--round);font-weight:700;color:var(--ink);text-wrap:balance;margin:0}
p,li,dd{text-wrap:pretty}
p{margin:0 0 var(--s4)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Páginas legais (marcação antiga, texto intocado) ---------- */
body:not(.lp)>header{background:var(--green-ink);color:#fff;padding:var(--s4) var(--gutter)}
body:not(.lp)>header>a{color:#fff;text-decoration:none;font:700 20px/28px var(--round)}
body:not(.lp) nav{margin-top:var(--s1);display:flex;flex-wrap:wrap;gap:0 var(--s2)}
body:not(.lp) nav a,body:not(.lp) .lang a{color:#E8F5E9;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);font-size:16px}
body:not(.lp) nav a:first-child{padding-left:0}
body:not(.lp) .lang{margin:0;font-size:14px}
body:not(.lp) .lang a{padding-left:0}
body:not(.lp) header :focus-visible{outline-color:#fff}
body:not(.lp) main{max-width:720px;margin:0 auto;padding:var(--s6) var(--gutter) var(--s8)}
body:not(.lp) h1{font-size:30px;line-height:36px;margin:0 0 var(--s5)}
body:not(.lp) h2{font-size:20px;line-height:28px;margin:var(--s6) 0 var(--s3)}
body:not(.lp) h3{font-size:18px;line-height:28px;margin:var(--s5) 0 var(--s2)}
body:not(.lp) ul{padding-left:var(--s5)}
body:not(.lp) li{margin-bottom:var(--s2)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s4) var(--s5);margin:var(--s4) 0}
.card>h2:first-child{margin-top:var(--s2)}
.aviso{background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:var(--s3) var(--s4);margin:var(--s4) 0}
body:not(.lp)>footer{max-width:720px;margin:0 auto;padding:var(--s5) var(--gutter) var(--s8);color:var(--ink-2);font-size:14px;line-height:20px;border-top:1px solid var(--line)}
table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}
th,td{border:1px solid var(--line);padding:var(--s2);text-align:left;vertical-align:top}

/* ---------- Landing ---------- */
.pular{position:absolute;left:var(--s4);top:-100px;z-index:10;background:var(--ink);color:#fff;padding:var(--s3) var(--s4);border-radius:8px;font-weight:600}
.pular:focus{top:var(--s4)}
.pular:focus-visible{outline-color:#fff}
.topo,.lp main>section,.rodape{max-width:1040px;margin-inline:auto;padding-inline:var(--gutter)}
.topo{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding-block:var(--s2)}
.marca{display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;color:var(--ink);text-decoration:none;font:700 18px/28px var(--round)}
.marca img{border-radius:8px}
.idioma{display:inline-flex;align-items:center;min-height:48px;padding-inline:var(--s2);font-size:14px;line-height:20px}

.hero{display:grid;gap:var(--s7);padding-block:var(--s5) var(--s9)}
.hero h1{font-size:36px;line-height:40px;letter-spacing:-.01em;max-width:15ch}
.sub{font-size:18px;line-height:28px;color:var(--ink-2);max-width:34em;margin:var(--s4) 0 var(--s5)}
.botao{display:flex;align-items:center;justify-content:center;min-height:56px;padding:var(--s2) var(--s5);border-radius:12px;background:var(--green);color:#fff;text-decoration:none;font:600 16px/24px var(--sans);transition:background-color .2s var(--ease),transform .2s var(--ease);-webkit-tap-highlight-color:transparent}
.botao:hover{background:var(--green-ink)}
.botao:active{transform:scale(.98)}
.preco{font-size:14px;line-height:20px;color:var(--ink-2);margin:var(--s3) 0 0}

.meta{margin-top:var(--s6);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s4)}
.meta-rotulo{display:flex;justify-content:space-between;gap:var(--s3);font-weight:600;margin-bottom:var(--s3)}
.meta-rotulo .num{color:var(--green-ink);white-space:nowrap}
.meta-trilho{height:16px;border-radius:8px;background:var(--tint);overflow:hidden}
.meta-cheio{height:100%;width:70%;background:var(--green);border-radius:8px;transform-origin:left center;animation:encher .9s var(--ease) .2s both}
.meta-nota{font-size:14px;line-height:20px;color:var(--ink-2);margin:var(--s2) 0 0}
@keyframes encher{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.tela{margin:0;justify-self:center}
.tela img{border-radius:28px;border:1px solid var(--line);background:var(--surface)}
.tela-hero img{width:260px}
.tela-pix img,.tela-cartao img{width:220px}

.lp h2{font-size:24px;line-height:32px;margin-bottom:var(--s5)}
.lp main>section+section{border-top:1px solid var(--line)}
.passos,.recursos,.faq{padding-block:var(--s8)}
.passos ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);counter-reset:passo}
.passos li{counter-increment:passo;display:grid;grid-template-columns:40px 1fr;column-gap:var(--s4)}
.passos li::before{content:counter(passo);grid-row:span 2;width:40px;height:40px;border-radius:20px;background:var(--tint);color:var(--green-ink);font:700 18px/40px var(--round);text-align:center}
.passos h3{font-size:18px;line-height:28px;margin:var(--s1) 0 var(--s1)}
.passos p{margin:0;color:var(--ink-2);max-width:60ch}

.lp main>section.dinheiro{background:var(--green-ink);color:#E8F5E9;border-top:0;padding-block:var(--s9);max-width:none;display:grid;gap:var(--s6);justify-items:start}
.dinheiro>*{width:100%;max-width:1008px;margin-inline:auto}
.dinheiro .frase{color:#fff;font-size:30px;line-height:36px;max-width:1008px;margin-bottom:0}
.dinheiro .frase span{display:inline}
.dinheiro p{font-size:18px;line-height:28px;max-width:min(1008px,40em);margin-inline:auto;margin-block:0}
.dinheiro p{width:100%}
.tela-pix{justify-self:center;width:auto}
.tela-pix img{border-color:#2E7D32}

.recursos-grade{display:grid;gap:var(--s7)}
.recursos ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);max-width:60ch}
.recursos li{color:var(--ink-2)}
.recursos strong{display:block;color:var(--ink);font:700 18px/28px var(--round);margin-bottom:var(--s1)}

.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:var(--s3);max-width:720px}
.faq summary{cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s4);font-weight:600;list-style:none;border-radius:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--green-ink);border-bottom:2px solid var(--green-ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq details p{padding:0 var(--s4) var(--s4);margin:0;color:var(--ink-2);max-width:65ch}

.final{padding-block:var(--s9);display:grid;justify-items:stretch;text-align:center}
.final h2{font-size:30px;line-height:36px}
.final .botao{width:100%;max-width:400px;margin-inline:auto}

.rodape{border-top:1px solid var(--line);padding-block:var(--s5) var(--s8);color:var(--ink-2);font-size:14px;line-height:20px}
.rodape nav{display:flex;flex-wrap:wrap;gap:0 var(--s4);margin-bottom:var(--s3)}
.rodape nav a{display:inline-flex;align-items:center;min-height:48px;font-size:16px;line-height:24px}
.rodape p{max-width:72ch;margin:0}

/* Palavras da frase acendem com a rolagem (CSS scroll-driven, sem JS) */
@supports (animation-timeline:view()){
  .dinheiro .frase span{animation:acender linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
  .dinheiro .frase span:nth-child(n+4){animation-range:entry 30% cover 50%}
  .dinheiro .frase span:nth-child(n+7){animation-range:entry 40% cover 55%}
  .dinheiro .frase span:nth-child(n+10){animation-range:entry 50% cover 60%}
}
@keyframes acender{from{color:#B7D3BA}to{color:#FFFFFF}} /* início 4,89:1 sobre #1B5E20: legível durante toda a animação */

@media (min-width:600px){
  :root{--gutter:24px}
  .hero h1{font-size:48px;line-height:48px;max-width:22ch}
  .botao{display:inline-flex}
  .hero .botao{min-width:280px}
  .lp h2{font-size:30px;line-height:36px}
  .dinheiro .frase{font-size:36px;line-height:40px}
}
@media (min-width:960px){
  .hero{grid-template-columns:1fr auto;align-items:center;column-gap:var(--s9);padding-block:var(--s8) var(--s10)}
  .tela-hero img{width:300px}
  .lp main>section.dinheiro{grid-template-columns:1fr auto;column-gap:var(--s9);padding-inline:max(var(--gutter),calc((100% - 1008px)/2))}
  .dinheiro>*{margin-inline:0}
  .lp main>section.dinheiro{grid-template-rows:min-content 1fr;align-items:start;row-gap:var(--s5)}
  .dinheiro .frase,.dinheiro p{grid-column:1}
  .dinheiro .frase{align-self:end}
  .tela-pix{grid-column:2;grid-row:1 / span 2;align-self:center}
  .recursos-grade{grid-template-columns:1fr auto;column-gap:var(--s9);align-items:start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}