/* Dream Pack · folha de estilo do site
   Todos os valores vêm de docs/brandbook/tokens.json (v2, pós-rebrand de 21/10/2026).
   Não invente cor aqui: se precisar de uma nova, ela entra primeiro no brandbook.

   Sincronização v1 -> v2 feita nesta revisão:
   - verde-dream (#005825 claro / #3cdd7f escuro) é a cor de comando. Assumiu o lugar
     que o azul ocupava em --azul: link, foco, .btn-1, .btn-claro, item de navegação
     ativo, número de destaque (.prod .cap, .passo::before). Variável: --verde.
   - --azul-fundo virou --fundo-verde (#005825 claro / #1e3327 escuro): superfície
     sólida de comando de .azulao e .rodape. Não aparece em nenhum HTML como
     var(--azul-fundo), então o nome pôde trocar sem quebrar nada.
   - --azul foi renomeada para --azul-profundo e seu valor corrigido para o azul medido
     no PDF remasterizado (#203670 claro / #6985d3 escuro). Passa a ser apoio
     técnico/link secundário, nunca cor de comando: hoje só em .btn-2.
   - --verde-mata e --ambar-texto (renomeada --laranja-texto) tinham valores antigos,
     fora do PDF remasterizado; corrigidos para os tons medidos no brandbook.
   - --sobre-azul permanece com esse nome porque seis páginas HTML (sobre, produtos,
     index, personalizacao, clientes) usam var(--sobre-azul) em style="" inline no
     .btn-2 dentro de .azulao. O valor já era idêntico a --tinta-clara (texto sobre
     fundo-verde/verde-dream/verde-mata) e segue assim; não é uma cor nova, é alias.
   - --ambar (laranja de preenchimento) foi removida por não ter uso no arquivo e por
     não ser brand-compliant: laranja-inicio/laranja-fim do tokens.json são gradiente
     do símbolo, não servem para preenchimento chapado de UI.
   - Espaçamento, raio e sombra já batiam com o tokens.json; mantidos sem alteração. */

:root{
  --papel:#f7f4ee; --cartao:#ffffff; --sage:#9ecca5; --fundo-verde:#005825;
  --tinta:#14201c; --tinta-media:#4f5d57; --tinta-clara:#ffffff; --borda:#ddd6c8;
  --verde:#005825; --verde-mata:#127F48; --azul-profundo:#203670;
  --laranja-texto:#ad6006; --kraft:#c8a87c;
  --sobre-azul:#ffffff;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  --s12:48px; --s16:64px; --s24:96px;
  --r-sm:4px; --r-md:10px; --r-lg:20px; --r-pote:28px; --r-pill:999px;
  --sombra-baixa:0 1px 2px rgba(20,32,28,.08);
  --sombra-media:0 8px 24px rgba(20,32,28,.12);

  --display:Montserrat,"Helvetica Neue",Arial,sans-serif;
  --texto:Inter,"Helvetica Neue",Arial,sans-serif;

  --coluna:1180px;
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root{
    --papel:#12100d; --cartao:#1b1815; --sage:#1e3327; --fundo-verde:#1e3327;
    --tinta:#f4f1ea; --tinta-media:#b9b3a7; --tinta-clara:#f4f1ea; --borda:#33302a;
    --verde:#3cdd7f; --verde-mata:#5cd699; --azul-profundo:#6985d3;
    --laranja-texto:#f0b775; --kraft:#8a6f4a;
    --sobre-azul:#f4f1ea;
    --sombra-baixa:0 1px 2px rgba(0,0,0,.5);
    --sombra-media:0 8px 24px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);
  font:400 16px/1.6 var(--texto);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--verde)}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:var(--r-sm)}
.pula{position:absolute;left:-9999px}
.pula:focus{left:var(--s4);top:var(--s4);z-index:50;background:var(--cartao);
  padding:var(--s3) var(--s4);border-radius:var(--r-sm);box-shadow:var(--sombra-media)}

.faixa{padding:var(--s24) var(--s6)}
.dentro{max-width:var(--coluna);margin:0 auto}
.estreito{max-width:720px}
.dentro.estreito{max-width:var(--coluna)}
.dentro.estreito > *{max-width:720px}

/* ---------- tipos ---------- */
h1,h2,h3,h4{font-family:var(--display);text-wrap:balance;margin:0}
h1{font-weight:800;font-size:clamp(34px,5.2vw,58px);line-height:1.04;letter-spacing:-.025em}
h2{font-weight:700;font-size:clamp(26px,3.4vw,36px);line-height:1.14;letter-spacing:-.015em;
   margin-bottom:var(--s6)}
h3{font-weight:700;font-size:20px;line-height:1.25;margin-bottom:var(--s3)}
p{margin:0 0 var(--s4);max-width:64ch}
.olho{font:600 12px/1.4 var(--texto);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-media);margin-bottom:var(--s3)}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--tinta-media);max-width:56ch}
.apoio{font-size:14px;line-height:1.5;color:var(--tinta-media)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--s2);font:600 15px var(--texto);
  border:1px solid transparent;border-radius:var(--r-pill);padding:14px 26px;
  cursor:pointer;text-decoration:none;line-height:1.2;transition:filter .15s}
.btn-1{background:var(--verde);color:var(--sobre-azul)}
.btn-1:hover{filter:brightness(1.1)}
/* No escuro --verde inverte para um tom claro (#3cdd7f) e texto branco em cima
   fica ilegível: a tinta do botão primário acompanha a inversão. */
@media (prefers-color-scheme:dark){.btn-1{color:#14201c}}
/* .btn-2 é apoio/secundário: usa azul-profundo, nunca cor de comando */
.btn-2{background:none;color:var(--azul-profundo);border-color:var(--azul-profundo)}
.btn-2:hover{background:var(--cartao)}
.btn-claro{background:var(--cartao);color:var(--verde)}
.btn-claro:hover{filter:brightness(.96)}
.botoes{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}

/* Acesso de membro: utilitário, nunca compete com o CTA de orçamento.
   Pílula fantasma em tom neutro; no foco/hover usa azul-profundo (apoio),
   não verde, para não disputar peso visual com .btn-1/.btn-claro. */
.btn-membros{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--texto);
  color:var(--tinta-media);border:1px solid var(--borda);border-radius:var(--r-pill);
  padding:9px 16px;text-decoration:none;background:none;line-height:1.2;
  transition:border-color .15s,color .15s}
.btn-membros:hover{border-color:var(--azul-profundo);color:var(--tinta)}
.btn-membros svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:30;background:var(--papel);
  border-bottom:1px solid var(--borda)}
.topo .dentro{display:flex;align-items:center;gap:var(--s6);
  padding:var(--s3) var(--s6);max-width:var(--coluna)}
.topo .marca img{width:150px}
.topo nav{margin-left:auto;display:flex;gap:var(--s2);align-items:center}
.topo nav a{font:500 15px var(--texto);color:var(--tinta);text-decoration:none;
  padding:8px var(--s3);border-radius:var(--r-sm)}
.topo nav a:hover{background:var(--cartao)}
.topo nav a[aria-current="page"]{color:var(--verde);font-weight:600}
.topo .btn{padding:10px 20px;font-size:14px;margin-left:var(--s3)}
.topo .btn-membros{margin-left:var(--s2)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--borda);
  border-radius:var(--r-sm);padding:8px 12px;cursor:pointer;color:var(--tinta);
  font:600 14px var(--texto)}

/* ---------- abertura ---------- */
.abertura{padding:var(--s24) var(--s6) var(--s16)}
.abertura .dentro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:var(--s16);align-items:center}
.selo-pill{display:inline-flex;align-items:center;gap:var(--s2);background:var(--sage);
  color:var(--tinta);border-radius:var(--r-pill);padding:7px 16px;
  font:600 12px var(--texto);letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:var(--s6)}
.palco-foto{position:relative}
.palco-foto img{border-radius:var(--r-pote);width:100%}

/* ---------- prova ---------- */
.prova{background:var(--sage);padding:var(--s8) var(--s6)}
.prova .dentro{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s8)}
.prova b{font:600 12px var(--texto);letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta);opacity:.75}
.prova ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);
  margin:0;padding:0}
.prova li{font:700 15px var(--display);color:var(--tinta)}

/* ---------- grades ---------- */
.grade{display:grid;gap:var(--s6)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- cartões ---------- */
.cartao{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r-md);
  padding:var(--s8)}
.cartao h3{margin-bottom:var(--s2)}
.cartao p:last-child{margin-bottom:0}
.cartao .ico{width:52px;height:52px;border-radius:50%;background:var(--sage);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--s4)}
.cartao .ico svg{width:28px;height:28px;fill:none;stroke:#14201c;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}

.prod{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r-pote);
  padding:var(--s8);box-shadow:var(--sombra-baixa);display:flex;flex-direction:column}
.prod .cap{font:700 40px/1 var(--display);letter-spacing:-.02em;color:var(--verde);
  font-variant-numeric:tabular-nums}
.prod h3{margin:var(--s2) 0 var(--s4)}
.prod dl{margin:0 0 var(--s6);display:grid;grid-template-columns:auto 1fr;
  gap:var(--s2) var(--s4);font-size:14px}
.prod dt{font:600 11px var(--texto);letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta-media);align-self:center}
.prod dd{margin:0}
.prod .pe{margin-top:auto}

.chip{display:inline-flex;align-items:center;font:600 12px var(--texto);letter-spacing:.04em;
  border-radius:var(--r-pill);padding:6px 13px}
.chip-verde{background:var(--verde-mata);color:var(--tinta-clara)}
.chip-linha{border:1px solid var(--borda);color:var(--tinta-media)}

/* ---------- passos ---------- */
.passos{counter-reset:passo;display:grid;gap:var(--s8)}
.passo{counter-increment:passo;display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:var(--s6);align-items:start}
.passo::before{content:counter(passo,decimal-leading-zero);font:700 30px var(--display);
  color:var(--verde);font-variant-numeric:tabular-nums;line-height:1}
.passo h3{margin-bottom:var(--s2)}
.passo p{margin-bottom:0}

/* ---------- blocos escuros ---------- */
.azulao{background:var(--fundo-verde);color:var(--sobre-azul);padding:var(--s24) var(--s6)}
.azulao h2,.azulao h3{color:var(--sobre-azul)}
.azulao p{color:var(--sobre-azul);opacity:.88}
.azulao .olho{color:var(--sobre-azul);opacity:.7}
.fatos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8);
  margin-top:var(--s12)}
.fato b{display:block;font:800 40px/1.05 var(--display);letter-spacing:-.02em;
  margin-bottom:var(--s2)}
.fato span{font-size:15px;opacity:.86;line-height:1.45;display:block;max-width:26ch}

/* ---------- foto com palavra ---------- */
.foto-palavra{position:relative;border-radius:var(--r-md);overflow:hidden}
.foto-palavra .palavra{position:absolute;right:20px;top:16px;font:800 clamp(22px,2.6vw,34px) var(--display);
  letter-spacing:.02em;color:#fff;opacity:.92}
.foto-palavra figcaption{background:var(--cartao);border:1px solid var(--borda);border-top:0;
  padding:var(--s3) var(--s4);font-size:13.5px;color:var(--tinta-media)}

/* ---------- formulário ---------- */
.form{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r-md);
  padding:var(--s12);display:grid;gap:var(--s6)}
.linha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font:600 12px var(--texto);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-media)}
.campo input,.campo select,.campo textarea{font:400 15px var(--texto);color:var(--tinta);
  background:var(--papel);border:1px solid var(--borda);border-radius:var(--r-sm);
  padding:12px 13px;width:100%;font-family:var(--texto)}
.campo textarea{min-height:110px;resize:vertical}
.campo .dica{font-size:12.5px;color:var(--tinta-media)}
.campo .erro{font-size:12.5px;color:var(--laranja-texto);font-weight:500}
.campo.ruim input,.campo.ruim select{border-color:var(--laranja-texto)}

/* ---------- rodapé ---------- */
.rodape{background:var(--fundo-verde);color:var(--sobre-azul);padding:var(--s16) var(--s6) var(--s8)}
.rodape a{color:var(--sobre-azul)}
.rodape .dentro{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s12)}
.rodape img.logo{width:170px;margin-bottom:var(--s4)}
.rodape h4{font:600 11px var(--texto);letter-spacing:.14em;text-transform:uppercase;
  opacity:.7;margin-bottom:var(--s3)}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);font-size:15px}
.rodape .legal{border-top:1px solid rgba(255,255,255,.18);margin-top:var(--s12);
  padding-top:var(--s6);font-size:13px;opacity:.75;display:flex;flex-wrap:wrap;
  gap:var(--s4) var(--s8);justify-content:space-between}
/* Link de membro no rodapé: mesma lista dos outros links, só um tanto mais discreto */
.link-membros{display:inline-flex;align-items:center;gap:6px;opacity:.82}
.link-membros:hover{opacity:1}
.link-membros svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- tabela ---------- */
.rolo{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
th{text-align:left;font:600 11px var(--texto);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-media);padding:0 var(--s4) var(--s2) 0;border-bottom:1px solid var(--borda)}
td{padding:12px var(--s4) 12px 0;border-bottom:1px solid var(--borda)}
td.num{font-variant-numeric:tabular-nums}

/* ---------- responsivo ---------- */
@media (max-width:1000px){
  .abertura .dentro{grid-template-columns:1fr;gap:var(--s12)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rodape .dentro{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .faixa,.abertura,.azulao{padding-left:var(--s6);padding-right:var(--s6);
    padding-top:var(--s16);padding-bottom:var(--s16)}
  .g2,.g3,.g4,.linha,.fatos{grid-template-columns:1fr}
  .form{padding:var(--s6)}
  .rodape .dentro{grid-template-columns:1fr;gap:var(--s8)}
  .topo nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--papel);
    border-bottom:1px solid var(--borda);flex-direction:column;align-items:stretch;
    padding:var(--s3) var(--s6) var(--s6);gap:var(--s1)}
  .topo nav.aberto{display:flex}
  .topo nav .btn{margin-left:0;margin-top:var(--s3);justify-content:center}
  .topo nav .btn-membros{margin-left:0;margin-top:var(--s2);justify-content:center}
  .menu-btn{display:block}
  .passo{grid-template-columns:44px minmax(0,1fr);gap:var(--s4)}
  .passo::before{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}