/* ==========================================================================
   ANOVA | Design System
   Baseado no Manual de Marca ANOVA (agosto/2025)
   Paleta oficial: #282929 preto, #2c7557 verde principal
                   #9a9c50 verde secundário, #b98f41 marrom
   Tipografia:     The Seasons (titulos): Playfair Display
                   Montserrat (corpo): Montserrat
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Cores da marca */
  --preto:        #282929;
  --verde:        #2c7557;
  --verde-sec:    #9a9c50;
  --marrom:       #b98f41;

  /* Neutros derivados (fundo creme do manual) */
  --creme:        #f9f1e7;
  --creme-claro:  #fdf8f1;
  --branco:       #ffffff;

  /* Texto */
  --texto:        #282929;
  --texto-suave:  #5f6560;
  --texto-claro:  rgba(255,255,255,.88);

  /* Linhas e superfícies */
  --linha:        rgba(40,41,41,.10);
  --linha-forte:  rgba(40,41,41,.18);
  --sombra:       0 1px 2px rgba(40,41,41,.04), 0 8px 24px rgba(40,41,41,.05);
  --sombra-alta:  0 2px 4px rgba(40,41,41,.05), 0 18px 44px rgba(40,41,41,.09);

  /* Tipografia */
  --fonte-titulo: 'Playfair Display', 'Georgia', serif;
  --fonte-corpo:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Ritmo */
  --raio:         18px;
  --raio-p:       12px;
  --secao:        clamp(72px, 9vw, 128px);
  --largura:      1180px;
  --largura-texto: 760px;

  --transicao:    .45s cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  font-family:var(--fonte-corpo);
  font-weight:400;
  font-size:1rem;
  line-height:1.75;
  color:var(--texto);
  background:var(--branco);        /* fundo geral do site: branco */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }

::selection{ background:var(--verde); color:#fff }

:focus-visible{
  outline:2px solid var(--verde);
  outline-offset:3px;
  border-radius:4px;
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--fonte-titulo);
  font-weight:500;
  line-height:1.14;
  letter-spacing:-.015em;
  color:var(--preto);
}

h1{ font-size:clamp(2.4rem, 5.4vw, 4.2rem) }
h2{ font-size:clamp(1.9rem, 3.6vw, 3rem) }
h3{ font-size:clamp(1.15rem, 1.8vw, 1.45rem) }

/* E-mails e endereços longos não têm onde quebrar e furam o layout em
   telas estreitas. Isto só age quando a palavra realmente não cabe. */
p, li, a, h1, h2, h3, h4, td, th{ overflow-wrap:break-word }

p{ margin-bottom:1.1em }
p:last-child{ margin-bottom:0 }

/* Diagramação: nenhuma palavra sozinha na última linha.
   'balance' distribui os títulos em linhas de peso parecido;
   'pretty' impede que sobre uma palavra solta no fim do parágrafo.
   Onde o navegador não suportar, o anova.js amarra as duas últimas
   palavras com espaço fixo e resolve do mesmo jeito. */
h1, h2, h3, h4,
.olho, .depo blockquote, .roda-titulo{
  text-wrap:balance;
}
p, li, .subtitulo, .complemento, figcaption{
  text-wrap:pretty;
}

/* Olho / label acima dos títulos de seção */
.olho{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--marrom);
  margin-bottom:18px;
}
/* Um traço antes e outro depois do rótulo */
.olho::before,
.olho::after{
  content:'';
  width:22px; height:1px;
  background:currentColor;
  opacity:.55;
  flex-shrink:0;
}
.olho.centro{ justify-content:center }

.subtitulo{
  font-size:clamp(1rem, 1.3vw, 1.1rem);
  color:var(--texto-suave);
  max-width:60ch;
  line-height:1.8;
}

.destaque{ color:var(--verde); font-weight:600 }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 40px);
}
.container-estreito{ max-width:860px }

.secao{ padding-block:var(--secao) }
/* Fundo branco é o padrão. O creme entra só como detalhe pontual. */
.secao-branca,
.secao-clara{ background:var(--branco) }
.secao-creme{ background:var(--creme) }
.secao-verde{ background:var(--verde); color:var(--texto-claro) }
.secao-verde h2,.secao-verde h3{ color:#fff }
.secao-verde .olho{ color:rgba(255,255,255,.75) }

/* Títulos de seção centralizados em todo o site */
.cabecalho-secao{
  margin-bottom:clamp(40px, 5vw, 64px);
  text-align:center;
}
.cabecalho-secao .olho{ justify-content:center }
.cabecalho-secao .subtitulo{ margin-inline:auto }
.cabecalho-secao h2 + .subtitulo{ margin-top:18px }

/* Capa (topo) das páginas internas, também centralizada */
.capa{ text-align:center }
.capa .olho{ justify-content:center }
.capa .subtitulo,
.capa-conteudo{ margin-inline:auto }
.capa .grupo-botoes{ justify-content:center }

/* --------------------------------------------------------------------------
   5. BOTÕES
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 32px;
  border-radius:999px;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:background var(--transicao), color var(--transicao),
             border-color var(--transicao), transform .25s ease;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px) }

.btn-primario{ background:var(--verde); color:#fff }
.btn-primario:hover{ background:#246147 }

.btn-secundario{
  background:transparent;
  color:var(--verde);
  border:1px solid rgba(44,117,87,.35);
}
.btn-secundario:hover{ background:var(--verde); color:#fff; border-color:var(--verde) }

.btn-claro{ background:#fff; color:var(--verde) }
.btn-claro:hover{ background:var(--creme) }

.btn-contorno-claro{ border:1px solid rgba(255,255,255,.4); color:#fff }
.btn-contorno-claro:hover{ background:#fff; color:var(--verde) }

.grupo-botoes{ display:flex; gap:14px; flex-wrap:wrap }
.grupo-botoes.centro{ justify-content:center }

/* --------------------------------------------------------------------------
   6. MENU FLUTUANTE (todas as páginas)
   -------------------------------------------------------------------------- */
.menu-anova{
  /* Centralizado por uma faixa esquerda/direita + margem automática.
     Com left:50% + translateX(-50%) o navegador calculava a largura
     disponível como "do meio da tela até a borda", metade do real, e o
     conteúdo vazava para fora da pílula, sempre pela direita, onde
     fica o botão. Aqui a faixa é a largura inteira e o menu ocupa
     exatamente o que o conteúdo pede. */
  position:fixed;
  top:18px;
  left:14px;
  right:14px;
  margin-inline:auto;
  width:max-content;
  z-index:1000;
  display:flex;
  align-items:center;
  gap:clamp(10px, 2vw, 26px);
  padding:9px 9px 9px 20px;
  border-radius:999px;
  background:rgba(249,241,231,.72);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(40,41,41,.07);
  box-shadow:0 1px 2px rgba(40,41,41,.03);
  transition:box-shadow var(--transicao), background var(--transicao),
             top var(--transicao), padding var(--transicao);
  max-width:100%;
}

/* Estado após rolar a página */
.menu-anova.rolado{
  top:12px;
  background:rgba(249,241,231,.9);
  box-shadow:var(--sombra);
}

.menu-marca{
  display:flex; align-items:center; flex-shrink:0;
  min-height:40px;              /* área de toque confortável */
}
/* Só a gota da marca, em tamanho maior */
.menu-marca img{ height:46px; width:auto; transition:height var(--transicao) }
.menu-anova.rolado .menu-marca img{ height:40px }

.menu-links{
  display:flex;
  align-items:center;
  gap:clamp(4px, 1.4vw, 8px);
}

.menu-links a{
  position:relative;
  padding:9px 12px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--texto-suave);
  white-space:nowrap;
  transition:color .3s ease, background .3s ease;
}
.menu-links a:hover{ color:var(--verde); background:rgba(44,117,87,.07) }

/* Página atual */
.menu-links a.ativo{ color:var(--verde); font-weight:600 }
.menu-links a.ativo::after{
  content:'';
  position:absolute;
  left:50%; bottom:3px;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--marrom);
  transform:translateX(-50%);
}

/* Botão de destaque dentro do menu */
.menu-cta{
  padding:11px 24px !important;
  border-radius:999px;
  background:var(--verde);
  color:#fff !important;
  font-weight:600 !important;
  font-size:.8rem !important;
  transition:background .3s ease, transform .25s ease;
}
.menu-cta:hover{ background:#246147 !important; transform:translateY(-1px) }

/* Botão hambúrguer (mobile) */
.menu-toggle{
  display:none;
  width:42px; height:42px;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .3s ease;
}
.menu-toggle:hover{ background:rgba(44,117,87,.08) }
.menu-toggle span{
  display:block;
  position:relative;
  width:17px; height:1.5px;
  background:var(--verde);
  border-radius:2px;
  transition:background .2s ease;
}
.menu-toggle span::before,
.menu-toggle span::after{
  content:'';
  position:absolute;
  left:0;
  width:17px; height:1.5px;
  background:var(--verde);
  border-radius:2px;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.menu-toggle span::before{ top:-5.5px }
.menu-toggle span::after{ top:5.5px }

.menu-anova.aberto .menu-toggle span{ background:transparent }
.menu-anova.aberto .menu-toggle span::before{ transform:translateY(5.5px) rotate(45deg) }
.menu-anova.aberto .menu-toggle span::after{ transform:translateY(-5.5px) rotate(-45deg) }

/* Com 6 itens de nomes longos, o menu passa a hambúrguer mais cedo */
@media (max-width:1180px){
  .menu-anova{
    width:auto;
    justify-content:space-between;
    padding:8px 8px 8px 18px;
  }
  .menu-toggle{ display:flex }
  .menu-links{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:12px;
    border-radius:22px;
    background:rgba(249,241,231,.97);
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    border:1px solid rgba(40,41,41,.07);
    box-shadow:var(--sombra-alta);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s;
  }
  .menu-anova.aberto .menu-links{ opacity:1; visibility:visible; transform:translateY(0) }
  .menu-links a{ padding:13px 18px; font-size:.92rem; border-radius:14px }
  .menu-links a.ativo::after{ left:14px; transform:none; bottom:50%; translate:0 50% }
  .menu-cta{ margin-top:6px; text-align:center; justify-content:center }
}

/* Espaço para o menu não cobrir o conteúdo */
.topo-pagina{ padding-top:clamp(120px, 14vh, 168px) }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.grade{ display:grid; gap:clamp(18px, 2.2vw, 28px) }
/* Cards com altura natural, sem esticar e criar vazios */
.grade-topo{ align-items:start }
/* O min() deixa a coluna encolher abaixo do mínimo quando a tela é mais
   estreita que ele. Sem isso, em telas de 320px a coluna fica maior que o
   container e a página ganha rolagem lateral. */
.grade-2{ grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr)) }
.grade-3{ grid-template-columns:repeat(auto-fit, minmax(min(280px,100%),1fr)) }
.grade-4{ grid-template-columns:repeat(auto-fit, minmax(min(230px,100%),1fr)) }

.card{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:clamp(26px, 3vw, 38px);
  transition:transform var(--transicao), box-shadow var(--transicao),
             border-color var(--transicao);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sombra);
  border-color:rgba(44,117,87,.22);
}
.card h3{ margin-bottom:12px }
.card p{ color:var(--texto-suave); font-size:.95rem; line-height:1.8 }

.card-numero{
  font-family:var(--fonte-titulo);
  font-size:.9rem;
  color:var(--marrom);
  letter-spacing:.1em;
  margin-bottom:16px;
  display:block;
}

.card-icone{
  width:44px; height:44px;
  margin-bottom:22px;
  color:var(--verde);
}
.card-icone svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.4 }

/* --------------------------------------------------------------------------
   7b. BLOCOS INTERATIVOS
   Cards que reagem ao mouse e ao toque: o ícone se preenche, a borda ganha
   cor e uma linha da marca cresce na base. No celular o efeito é acionado
   pelo toque (classe .ativo aplicada pelo anova.js).
   -------------------------------------------------------------------------- */
.bloco-interativo{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform var(--transicao), box-shadow var(--transicao),
             border-color var(--transicao);
}
.bloco-interativo::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:3px;
  background:linear-gradient(90deg, var(--verde) 0%, var(--marrom) 100%);
  transition:width .55s cubic-bezier(.22,.61,.36,1);
}
.bloco-interativo:hover,
.bloco-interativo:focus-within,
.bloco-interativo.ativo{
  transform:translateY(-6px);
  box-shadow:var(--sombra-alta);
  border-color:rgba(44,117,87,.28);
}
.bloco-interativo:hover::after,
.bloco-interativo:focus-within::after,
.bloco-interativo.ativo::after{ width:100% }

/* Ícone do bloco */
.bloco-icone{
  transition:background var(--transicao), transform var(--transicao);
}
.bloco-icone svg{ transition:stroke var(--transicao), transform var(--transicao) }

.bloco-interativo:hover .bloco-icone,
.bloco-interativo:focus-within .bloco-icone,
.bloco-interativo.ativo .bloco-icone{
  background:var(--verde);
  transform:scale(1.08);
}
.bloco-interativo:hover .bloco-icone svg,
.bloco-interativo:focus-within .bloco-icone svg,
.bloco-interativo.ativo .bloco-icone svg{ stroke:#fff }

/* Blocos sobre fundo escuro (seção verde / preta) */
.secao-verde .bloco-interativo:hover,
.secao-verde .bloco-interativo.ativo{
  border-color:rgba(255,255,255,.35);
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}
.secao-verde .bloco-interativo:hover .bloco-icone,
.secao-verde .bloco-interativo.ativo .bloco-icone{ background:rgba(255,255,255,.16) }
.secao-verde .bloco-interativo:hover .bloco-icone svg,
.secao-verde .bloco-interativo.ativo .bloco-icone svg{ stroke:#fff }

@media (hover:none){
  /* Sem mouse, o toque é quem comanda. Nada de estado preso no hover */
  .bloco-interativo:hover{ transform:none; box-shadow:none }
  .bloco-interativo:hover::after{ width:0 }
  .bloco-interativo.ativo{ transform:translateY(-4px); box-shadow:var(--sombra) }
  .bloco-interativo.ativo::after{ width:100% }
}

/* Lista com marcador de folha */
.lista-marcada li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
  font-size:.95rem;
  color:var(--texto-suave);
  line-height:1.7;
}
.lista-marcada li::before{
  content:'';
  position:absolute;
  left:0; top:.62em;
  width:7px; height:7px;
  border-radius:50% 0 50% 50%;
  background:var(--verde-sec);
  transform:rotate(45deg);
}

/* --------------------------------------------------------------------------
   8. RODAPÉ
   -------------------------------------------------------------------------- */
.rodape{
  background:var(--preto);
  color:rgba(255,255,255,.62);
  padding-block:clamp(56px, 6vw, 84px) 30px;
  font-size:.9rem;
}
.rodape-grade{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(32px, 5vw, 64px);
  padding-bottom:48px;
}
/* Logo em dourado, abaixo do texto institucional */
.rodape-marca img{
  height:56px; width:auto;
  margin-top:26px;
}
.rodape-marca p{ max-width:34ch; line-height:1.8; font-size:.9rem }
/* Nome por extenso da sigla.
   Em branco suave para não competir com os títulos dourados do rodapé. */
.rodape-extenso{
  color:rgba(255,255,255,.82) !important;
  font-size:.85rem !important;
  font-weight:500;
  letter-spacing:.02em;
  margin-bottom:14px;
}

.rodape h4{
  font-family:var(--fonte-corpo);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--marrom);
  margin-bottom:20px;
}
.rodape-lista li{ margin-bottom:12px }
.rodape-lista a{ transition:color .3s ease }
.rodape-lista a:hover{ color:var(--marrom) }

/* Redes sociais: ícone e contorno dourados;
   no hover continuam dourados e ganham um brilho verde. */
.rodape-sociais{ display:flex; gap:12px; margin-top:6px }
.rodape-sociais a{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--marrom);
  border-radius:50%;
  color:var(--marrom);
  transition:box-shadow .35s ease, transform .3s ease, border-color .35s ease;
}
.rodape-sociais a:hover{
  color:var(--marrom);
  border-color:var(--marrom);
  box-shadow:0 0 16px rgba(44,117,87,.65), 0 0 4px rgba(44,117,87,.4);
  transform:translateY(-2px);
}
.rodape-sociais svg{ width:18px; height:18px; fill:currentColor; display:block }

.rodape-base{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  font-size:.8rem;
  color:rgba(255,255,255,.42);
}
.rodape-base a:hover{ color:var(--marrom) }

@media (max-width:780px){
  .rodape-grade{ grid-template-columns:1fr; gap:38px }
  .rodape-base{ justify-content:center; text-align:center }
}

/* --------------------------------------------------------------------------
   9. FORMULÁRIOS
   -------------------------------------------------------------------------- */
.campo{ margin-bottom:22px }
.campo label{
  display:block;
  margin-bottom:9px;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--texto);
}
.campo input,
.campo select,
.campo textarea{
  width:100%;
  padding:14px 17px;
  font-family:var(--fonte-corpo);
  font-size:.95rem;
  color:var(--texto);
  background:var(--branco);
  border:1px solid var(--linha-forte);
  border-radius:var(--raio-p);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  outline:none;
  border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(44,117,87,.12);
}
.campo input::placeholder{ color:#a8afab }

/* --------------------------------------------------------------------------
   10. ANIMAÇÃO DE ENTRADA (leve)
   -------------------------------------------------------------------------- */
/* O conteúdo só começa escondido se o JavaScript estiver ativo.
   Sem JS (ou se algo falhar), tudo aparece normalmente. */
.js .revelar{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1);
}
.js .revelar.visivel{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .revelar{ opacity:1; transform:none }
}

/* --------------------------------------------------------------------------
   10b. AJUSTES DE TOQUE E LEITURA NO CELULAR
   -------------------------------------------------------------------------- */

/* Bolinhas do slider de depoimentos.
   O botão é uma área de toque de 40x40 sem preenchimento; quem aparece na
   tela é o ponto desenhado no ::before. Assim o alvo é confortável no dedo
   e o visual continua discreto. */
.depo-controles{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  margin-top:36px;
}
.depo-ponto{
  width:40px;
  height:40px;
  padding:0;
  border:none;
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.depo-ponto::before{
  content:'';
  display:block;
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(40,41,41,.25);
  transition:width .35s cubic-bezier(.22,.61,.36,1), background .35s ease;
}
.depo-ponto:hover::before{ background:rgba(40,41,41,.45) }
.depo-ponto.ativo::before{ width:24px; background:var(--verde) }

/* Sobre fundo escuro */
.secao-verde .depo-ponto::before,
.roda-secao .depo-ponto::before{ background:rgba(255,255,255,.3) }
.secao-verde .depo-ponto.ativo::before,
.roda-secao .depo-ponto.ativo::before{ background:#fff }

@media (max-width:600px){
  /* Rótulos não descem abaixo de 12px */
  .olho{ font-size:.78rem; letter-spacing:.16em }
  .olho::before,
  .olho::after{ width:16px }

  /* Respiro nas laterais e entre seções */
  .secao{ padding-block:clamp(56px, 12vw, 76px) }
  .cabecalho-secao{ margin-bottom:34px }

  /* Botões ocupam a largura para virar alvo confortável */
  .grupo-botoes{ width:100%; gap:10px }
  .grupo-botoes .btn{ width:100%; padding:16px 24px }

  /* Cards com menos padding interno, mais área de texto */
  .card{ padding:24px 20px }
}

/* --------------------------------------------------------------------------
   11. UTILITÁRIOS
   -------------------------------------------------------------------------- */
.centro{ text-align:center }
.so-leitor{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.divisor{
  height:1px;
  background:var(--linha);
  border:none;
  margin-block:clamp(48px,6vw,80px);
}