/* ==========================================================================
   Santana Agro Gestão — folha de estilo principal
   Mobile-first. Breakpoints: 640px (tablet pequeno), 768px (tablet), 1024px (desktop)
   Direcao visual "Terra e Luz" (v2): ARCHIVO (a grotesque do logo v2) em titulo e
   corpo; verde institucional #104A35 amostrado do proprio logotipo, mel e terracota
   sobre papel cor de areia. Gradientes com direcao de luz (sol no alto a direita),
   sombras em 3 camadas caindo sempre para baixo-esquerda, grao de papel a 4,2%
so nos fundos claros. Divisorias entre secoes RETAS.
   FOTOGRAFIA REAL em 3 pontos (hero, "Como funciona" e contato). Onde entra foto,
   o gradiente sintetico SAI: quem faz luz e sombra e a fotografia, e o CSS so
   garante a leitura por cima dela. Cada veu tem opacidade MEDIDA contra o
   percentil 95 de luminancia da foto na faixa onde o texto cai.
   PUBLICO: produtor rural, celular, a ceu aberto sob sol forte. Toda decisao de
   cor prioriza contraste alto; nada de branco muito translucido sobre gradiente.
   Regra de acessibilidade adotada: o dourado/laranja NUNCA é usado em texto pequeno
   sobre fundo claro (contraste insuficiente). Ele aparece em fundos de botão,
   elementos grandes/decorativos ou texto sobre fundo verde escuro.
   ========================================================================== */

/* ---------- 1. Tokens — direção visual "Terra e Luz" ----------
   Página clara e quente: papel cor de areia no lugar do branco puro, verde-floresta
   reservado a títulos e blocos-âncora, terracota entrando como cor de apoio.
   Todos os contrastes abaixo foram calculados (WCAG 2.1, fórmula de luminância
   relativa) e estão anotados por token. */
:root {
  /* --- Verdes (frios só o suficiente para não puxar para o oliva sujo) --- */
  /* Verde institucional retirado por amostragem do próprio logo v2: #104A35.
     Ganho duplo — bate exatamente com o wordmark E sobe o contraste de 9,15:1
     para 10,23:1 no branco, o que ajuda sob sol forte. */
  --verde-profundo: #0A2E20;   /* fundos escuros: hero, footer, seção verde */
  --verde-escuro:   #0D3B2A;   /* meio do gradiente escuro, hover de botão */
  --verde:          #104A35;   /* títulos e links — 10,23:1 no branco */
  --verde-claro:    #175C42;
  --salvia:         #8AA47C;   /* decorativo: blobs, ícones, bordas */
  --salvia-suave:   #C3D2B9;

  /* --- Quentes: mel (luz) + terracota (terra) --- */
  --mel:            #E8A13A;   /* destaque sobre escuro — 6,53:1 no verde-profundo */
  --mel-claro:      #F2B45C;
  --mel-profundo:   #C4830F;
  --terracota:      #B4552E;   /* acento — 4,91:1 no branco (passa AA em texto normal) */
  --terracota-texto:#8F3F1E;   /* texto pequeno quente — 7,25:1 no branco */

  /* Aliases da paleta antiga. Mantidos porque dezenas de regras nesta folha ainda
     os referenciam; assim a troca de direção acontece só aqui, num lugar só. */
  --dourado:        #E8A13A;
  --laranja:        #C4830F;
  --laranja-texto:  #8F3F1E;   /* 7,25:1 no claro (antes era 5,8:1) */
  --dourado-claro:  #FBDCA8;   /* TEXTO dourado sobre verde - 7,1:1 no rodape iluminado */

  /* --- Gradientes --- */
  --grad-dourado: linear-gradient(103deg, #F2B45C 0%, #E8A13A 48%, #C4830F 100%);
  --grad-cta:     linear-gradient(103deg, #F2B45C 0%, #E8A13A 48%, #C4830F 100%);
  --grad-texto:   linear-gradient(100deg, #FFD79B 0%, #E8A13A 100%);
  --grad-escuro:  linear-gradient(163deg, #175C42 0%, #0D3B2A 45%, #0A2E20 100%);
  --grad-claro:   linear-gradient(180deg, #FBF8F1 0%, #F4EFE4 100%);
  /* Luz de fim de tarde: brilho ambar difuso entrando pelo alto a direita.
     PICO EM 18%, nao mais 28%: acima disso o halo clareia tanto o verde que o
     texto dourado por cima dele cai para ~2,6:1. Este e o teto que mantem todo
     texto sobre fundo verde em AA mesmo no ponto mais claro do gradiente. */
  --luz-tarde: radial-gradient(70% 55% at 78% 18%,
                 rgba(232, 161, 58, 0.18) 0%,
                 rgba(232, 161, 58, 0.05) 42%,
                 rgba(232, 161, 58, 0) 68%);

  /* --- Papel --- */
  --branco:   #FFFFFF;   /* só cards: papel branco sobre a mesa cor de areia */
  --bone:     #FBF8F1;   /* fundo geral da página */
  --offwhite: #F4EFE4;   /* seções alternadas */
  --areia:    #EDE5D5;   /* chips, hover, estados */

  --texto:       #201C16;          /* preto-marrom, não preto azulado — 15,98:1 */
  --texto-suave: #4A443A;          /* 9,08:1 no fundo bone (era 7,16:1) */
  --texto-claro: rgba(255, 255, 255, 0.95);   /* alto contraste p/ leitura ao sol */
  --borda:       #E4DCCB;

  --erro: #B3261E;
  --wpp: #1EA65A;
  --wpp-hover: #178C4B;

  /* ARCHIVO — a mesma grotesque do logo v2, em título E corpo.
     Uma família só: metade dos bytes de fonte, o que importa para quem abre o
     site com sinal fraco no meio da lavoura. */
  --fonte-titulo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fonte-corpo: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --raio: 10px;
  --raio-g: 16px;
  --raio-gg: 22px;   /* cards: canto mais generoso, leitura mais macia */
  /* Raio assimétrico derivado da curva do símbolo do logo — usado nos blobs. */
  --raio-organico: 58% 42% 47% 53% / 43% 51% 49% 57%;

  /* Sombras difusas com tom terra. O spread negativo é o que dá a sensação de
     "flutuando"; sem ele a sombra encosta na borda e vira contorno de cartaz.
     Três camadas em vez de uma: fio de contato, sombra média e sombra ampla. */
  --sombra: -1px 1px 2px rgba(32, 28, 22, 0.04),
            -2px 4px 10px -3px rgba(16, 74, 53, 0.07),
            -6px 12px 32px -8px rgba(16, 74, 53, 0.13);
  --sombra-forte: -1px 2px 4px rgba(32, 28, 22, 0.05),
                  -5px 10px 24px -8px rgba(16, 74, 53, 0.13),
                  -12px 24px 56px -16px rgba(16, 74, 53, 0.22);
  --sombra-lift: -1px 2px 4px rgba(32, 28, 22, 0.05),
                 -7px 14px 28px -10px rgba(16, 74, 53, 0.16),
                 -15px 30px 60px -18px rgba(16, 74, 53, 0.26);
  --glow-mel: -3px 6px 20px -4px rgba(196, 131, 15, 0.45);
  --glow-mel-forte: -5px 10px 30px -6px rgba(196, 131, 15, 0.55);

  /* TEXTURA - grao de papel, e SO nos fundos claros.
     Substituiu os "sulcos de plantio" (linhas diagonais) da rodada anterior: um
     padrao geometrico repetitivo e justamente o tipo de textura sintetica que a
     referencia do setor manda evitar. Isto e ruido fractal fino, que le como
     fibra de papel e nao como desenho.
     A opacidade (4,2%) vai EMBUTIDA no proprio SVG, no atributo opacity do rect.
     E o que permite usa-lo como camada de `background` direta: camadas de
     background nao aceitam opacidade individual, entao sem esse truque seria
     preciso um pseudo-elemento so para carregar a textura. */
  --grao-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.042'/%3E%3C/svg%3E");

  --header-h: 66px;
  --container: 1180px;
  --gutter: 20px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--grao-papel), var(--bone);
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

/* Títulos em Archivo Bold 700, o peso e o desenho do wordmark do logo.
   O tracking negativo reproduz o aperto das maiúsculas do logotipo; em grotesque
   bold, sem ele o título fica frouxo. Peso 700 (e não 500, como era na serifada)
   também joga a favor da leitura sob sol forte: haste grossa sobrevive ao
   "estouro" de contraste que a claridade provoca na tela do celular. */
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.18;
  color: var(--verde);
  margin: 0 0 .6em;
  letter-spacing: -0.022em;
}
/* h3/h4 são pequenos: menos tracking negativo, senão as letras se tocam. */
h3, h4 { line-height: 1.28; letter-spacing: -0.012em; }

p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--verde); text-decoration-thickness: 1px; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Foco visível e consistente (navegação por teclado).
   Anel de duas cores, de propósito: o mel sozinho dá 6,5:1 no fundo escuro mas
   só 2,2:1 no claro. O halo verde translúcido por fora garante o contraste
   sobre papel; o mel garante sobre os blocos verdes. Assim o foco é sempre
   visível independentemente da seção. */
:focus-visible {
  outline: 3px solid var(--mel);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px rgba(10, 46, 32, 0.30);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--verde);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 3. Layout base ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--estreito { max-width: 820px; }

.section { padding: 72px 0; }
.section--tight { padding: 60px 0; }

/* Seção clara alternada: gradiente vertical de bone para areia em vez de tom
   sólido. A variação é de ~3% de luminância — não se enxerga como "gradiente",
   só tira a chapação e sugere luz vindo de cima. */
.section--offwhite {
  background: var(--grao-papel), var(--grad-claro);
  border-top: 1px solid rgba(228, 220, 203, 0.7);
  border-bottom: 1px solid rgba(228, 220, 203, 0.7);
}

/* Bloco-ancora escuro: gradiente diagonal + luz de tarde (sem textura).
   O limite com a secao clara vizinha e RETO.
   O limite com a seção clara vizinha é RETO — as ondas de transição em SVG que
   existiam aqui foram removidas a pedido dos donos da marca. */
.section--verde {
  position: relative;
  isolation: isolate;
  background:
    var(--luz-tarde),
    var(--grad-escuro);
  color: var(--texto-claro);
  overflow: hidden;
}
.section--verde > .container { position: relative; z-index: 1; }
.section--verde h2,
.section--verde h3 { color: #fff; }
.section--verde .section__lead { color: rgba(255, 255, 255, 0.93); }

.section__head { margin-bottom: 44px; }
.section__head--center { text-align: center; max-width: 720px; margin-inline: auto; }

.section__title {
  font-size: clamp(1.6rem, 5.3vw, 2.4rem);
  letter-spacing: -0.026em;
  margin-bottom: .45em;
}

.section__lead {
  font-size: 1.02rem;
  color: var(--texto-suave);
  margin-bottom: 0;
}

.eyebrow {
  font-family: var(--fonte-corpo);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--laranja-texto);
  margin-bottom: .7em;
}
.eyebrow--claro { color: var(--dourado-claro); }

/* Traço decorativo sob os títulos de seção (referência à curva do logo).
   A máscara faz a ponta direita perder densidade: lê como traço de pincel
   secando, não como barra de régua. */
.section__title::after {
  content: "";
  display: block;
  width: 84px;
  height: 5px;
  border-radius: 999px;
  background: var(--grad-dourado);
  margin-top: 16px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0, 0, 0, .3) 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0, 0, 0, .3) 100%);
}
.section__head--center .section__title::after { margin-inline: auto; }

.grad-text {
  background: var(--grad-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

/* Marcador dos conteúdos que o cliente ainda precisa substituir */
[data-editar] {
  background: rgba(232, 161, 58, 0.15);
  outline: 1px dashed rgba(143, 63, 30, 0.45);
  outline-offset: 1px;
  border-radius: 3px;
}

/* ---------- 4. Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: var(--raio);
  font-family: var(--fonte-corpo);
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
/* Hover: sobe, cresce de leve e o gradiente clareia — como se a luz batesse
   mais forte no elemento levantado. `scale` fica em 1.02: acima disso o texto
   do botão reamostra e serrilha. O :active volta ao repouso sem transição
   perceptível, dando resposta tátil imediata ao toque. */
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(.99); }

.btn--lg { min-height: 58px; padding: 17px 30px; font-size: 1.05rem; }
.btn--bloco { width: 100%; }

/* Botão dourado: texto VERDE ESCURO sobre gradiente claro.
   Branco sobre dourado dá ~2:1 e reprova em qualquer critério — verde sobre
   dourado é a combinação do próprio logo e fica entre 5.4:1 e 7.7:1.
   A sombra é um GLOW âmbar (a própria cor do botão, difusa), não cinza: dá a
   leitura de luz saindo do elemento em vez de peso caindo dele. */
.btn--gold {
  background: var(--grad-cta);
  color: var(--verde-profundo);
  box-shadow: var(--glow-mel);
}
.btn--gold:hover {
  background: linear-gradient(103deg, #FFC776 0%, #F2B04B 48%, #D8921A 100%);
  box-shadow: var(--glow-mel-forte);
}

/* Verde também deixa de ser chapado e ganha sombra da própria família. */
.btn--green {
  background: linear-gradient(160deg, #175C42 0%, #104A35 55%, #0D3B2A 100%);
  color: #fff;
  box-shadow: -3px 6px 20px -6px rgba(16, 74, 53, 0.5);
}
.btn--green:hover {
  background: linear-gradient(160deg, #1C6B4D 0%, #12523B 55%, #0A2E20 100%);
  box-shadow: -5px 10px 28px -8px rgba(16, 74, 53, 0.6);
}

/* WhatsApp também sai do chapado e ganha glow na própria cor. */
.btn--wpp {
  background: linear-gradient(160deg, #25BE68 0%, #1EA65A 55%, #178C4B 100%);
  color: #fff;
  box-shadow: -3px 6px 20px -6px rgba(30, 166, 90, 0.50);
}
.btn--wpp:hover {
  background: linear-gradient(160deg, #2CCB72 0%, #23B463 55%, #1A9853 100%);
  box-shadow: -5px 10px 28px -8px rgba(30, 166, 90, 0.62);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(3px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.2); }

.btn--outline-claro {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.btn--outline-claro:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

.ico-wpp { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }

/* ---------- 5. Header + navegação ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(251, 248, 241, 0.92);   /* bone translúcido, não branco puro */
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(228, 220, 203, 0.8);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.header.is-scrolled {
  background: rgba(251, 248, 241, 0.97);
  box-shadow: -3px 6px 24px -10px rgba(16, 74, 53, 0.22);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

/* Logo do header — responsivo por art direction (ver o <picture> no HTML).
   Até 1279px o navegador carrega o SÍMBOLO (223x172, 1,30:1); a partir de 1280px,
   o LOCKUP horizontal (988x114, 8,67:1). Por isso o `max-height` muda de faixa:
   44/48px valem para o símbolo, 56px para o lockup deitado (485px de largura —
   cabe na barra junto do menu, que em 1280px pede ~655px).

   As duas artes são recortadas na TINTA, sem moldura quadrada em volta: assim o
   `max-height` é a altura do desenho, e não a de um quadrado com ar sobrando.

   `flex: 0 1 auto` + `min-width: 0` deixam o logo ceder espaço ao menu, e
   width/height em `auto` garantem que o navegador só reduza mantendo a proporção —
   nunca achata o logotipo, qualquer que seja a arte carregada. */
.header__logo { display: block; flex: 0 1 auto; min-width: 0; }
.header__logo picture { display: block; }
.header__logo img {
  width: auto;
  height: auto;
  max-height: 44px;
  max-width: 100%;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 11px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background: var(--verde);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav {
  position: fixed;
  top: var(--header-h);
  right: 0;
  width: min(320px, 86vw);
  height: calc(100dvh - var(--header-h));
  padding: 24px var(--gutter) 40px;
  background: var(--bone);
  border-left: 1px solid var(--borda);
  box-shadow: var(--sombra-forte);
  overflow-y: auto;
  transform: translateX(105%);
  transition: transform .28s ease;
  visibility: hidden;
}
.nav.is-open { transform: translateX(0); visibility: visible; }

.nav__list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; }

.nav__link {
  display: block;
  padding: 13px 12px;
  border-radius: var(--raio);
  font-weight: 600;
  color: var(--verde);
  text-decoration: none;
  transition: background-color .18s ease;
}
.nav__link:hover { background: var(--areia); }
.nav__link.is-active { background: var(--areia); }
.nav__link.is-active::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  margin-right: 9px;
  border-radius: 3px;
  background: var(--grad-dourado);
  vertical-align: -3px;
}

.nav__cta { width: 100%; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(10, 46, 32, 0.55);
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

body.nav-aberto { overflow: hidden; }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* 86svh, nao 92svh: a linha de estatisticas saiu do hero e levou ~104px de
     conteudo. Sem reduzir a altura minima, sobraria justamente o vazio que o
     ajuste pediu para nao deixar. */
  min-height: 86vh;   /* fallback para navegadores sem unidades dinamicas */
  min-height: 86svh;
  padding: calc(var(--header-h) + 48px) 0 96px;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
/* FOTO 1 - trator pulverizador em lavoura de soja, luz rasante dourada vindo da
   esquerda, ceu claro a direita, fileiras convergindo em perspectiva. Substituiu o
   gradiente sintetico que SIMULAVA essa luz enquanto a foto real nao existia.

   DUAS ARTES, uma por faixa de tela, de proposito: o publico abre isso no meio da
   lavoura com sinal ruim, e mandar 1280px de largura para um aparelho de 390px
   desperdicaria ~62KB de dado movel. As media queries sao mutuamente exclusivas
   (max-width X min-width), entao cada aparelho baixa UMA das duas artes.
   A cor chapada por baixo evita clarao branco enquanto a foto nao chegou. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--verde-profundo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (max-width: 767px) {
  /* 720px de largura, ~40KB. No celular o `cover` mostra so a faixa central da
     foto - que e exatamente onde esta o trator. */
  .hero__bg { background-image: url("../assets/images/hero-fundo-lavoura-poente-mobile.jpg"); }
}
@media (min-width: 768px) {
  .hero__bg { background-image: url("../assets/images/hero-fundo-lavoura-poente.jpg"); }
}
/* Camadas do hero, de baixo para cima:
     z -2  .hero__bg    a FOTO
     z -1  .hero::after o veu escuro, que e o que garante a leitura do texto branco

   O veu do CELULAR e vertical e forte (82% no topo -> 92% embaixo): ali o texto
   ocupa a largura toda, entao nao existe "lado escuro" onde escondê-lo. No
   DESKTOP ele vira horizontal (ver a media query de 768px): escuro a esquerda,
   onde ficam titulo e CTAs, dissolvendo a direita para a foto e a luz dourada
   aparecerem.

   As paradas nao foram escolhidas no olho. Para cada faixa da foto mediu-se o
   percentil 95 de luminancia e resolveu-se o alpha minimo que mantem branco em
   7:1; os valores abaixo ficam acima desse minimo em toda a zona de texto.
   Pior caso medido: 9,48:1 no celular, 7,97:1 no desktop - AAA nos dois. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(10, 46, 32, 0.82) 0%,
      rgba(10, 46, 32, 0.86) 40%,
      rgba(10, 46, 32, 0.92) 100%);
}

.hero__inner { max-width: 780px; }

.hero__eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  /* --dourado-claro, não --mel: em texto pequeno o mel cai para ~4,5:1 sobre o
     ponto mais claro do véu do hero. Este fica em 7,5:1. */
  color: var(--dourado-claro);
  margin-bottom: 14px;
}

/* Headline em Archivo Bold 700 com o tracking apertado do logotipo. Tipografia
   fluida via clamp(), sem tamanho fixo por breakpoint.
   O text-shadow preto continua fora — a legibilidade vem do véu de gradiente do
   .hero::after, que escurece o fundo em vez de sujar a borda da letra. */
.hero__title {
  font-size: clamp(2.05rem, 8.6vw, 3.7rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: #fff;
  margin-bottom: .4em;
}

.hero__sub {
  font-size: clamp(1rem, 4.2vw, 1.18rem);
  color: rgba(255, 255, 255, 0.96);
  max-width: 620px;
  margin-bottom: 28px;
}

/* margin-bottom 0: os 34px separavam os CTAs da linha de estatisticas, que nao
   existe mais. O fechamento da secao passa a ser o padding-bottom do .hero. */
.hero__actions { display: flex; flex-direction: column; gap: 12px; }

/* A linha de estatisticas (28 anos / 18 anos / 17.800 ha) foi REMOVIDA daqui:
   os mesmos numeros ja aparecem na secao Sobre, que tem os quatro completos
   (inclusive os 36.900 ha em parceria). Repetir no hero era redundancia. */

/* ---------- 7. Dor / problema ---------- */
/* Cards da seção Dor: papel branco com um brilho radial quente vindo do topo
   esquerdo — tira a sensação de caixa branca plana sem virar gradiente visível. */
.card-dor {
  position: relative;
  padding: 26px 22px 22px;
  background:
    /* brilho no canto ALTO-DIREITA: mesma origem de luz do resto do site */
    radial-gradient(85% 60% at 88% 0%, rgba(232, 161, 58, 0.10), rgba(232, 161, 58, 0) 62%),
    var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-gg);
  box-shadow: var(--sombra);
  transition: transform .28s cubic-bezier(.22, .8, .3, 1), box-shadow .28s ease;
}
.card-dor:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-lift);
}
.card-dor::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  background: var(--grad-dourado);
}
.card-dor__num {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--salvia-suave);   /* numeral fantasma agora em sálvia, não bege neutro */
  margin-bottom: 10px;
}
.card-dor h3 { font-size: 1.15rem; margin-bottom: .5em; }
.card-dor p { color: var(--texto-suave); margin-bottom: 0; font-size: .96rem; }

.dor__cta { text-align: center; margin: 32px 0 0; }

/* ---------- 8. Sobre / autoridade ---------- */
.sobre__grid { display: grid; gap: 30px; }

/* Foto do consultor — card retangular, não mais círculo.
   marco-antonio.jpg é a foto de escritório (1460x1024), com o logo na parede à
   esquerda e o Marco à direita. Um recorte circular ou 4:5 comeria justamente o
   logo e o contexto do escritório, então aqui NÃO forçamos proporção nenhuma:
   `height: auto` exibe o enquadramento original inteiro, corte zero.
   `object-fit: cover` fica declarado só para o caso de a foto ser trocada
   depois por outra de proporção diferente junto com um `aspect-ratio`. */
/* A COLUNA inteira da foto: retrato em cima, assinatura da marca embaixo. */
.sobre__foto {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

/* O RETRATO ganhou um nível próprio nesta rodada. É dele que pendem os dois
   enfeites da foto — o blob sálvia atrás e o traço dourado reto embaixo. Eles
   pendiam de .sobre__foto, o que funcionava enquanto a foto era filha única;
   com a assinatura entrando abaixo, o traço desceria para o pé da coluna e
   deixaria de marcar a foto. */
.sobre__retrato {
  position: relative;
  /* cria contexto de empilhamento próprio: o blob em z-index:-1 fica atrás da
     foto mas continua acima do fundo da seção */
  isolation: isolate;
}
.sobre__retrato img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--raio-g);
  box-shadow:
    0 0 0 1px rgba(232, 161, 58, 0.30),
    var(--sombra-forte);
}
/* Blob sálvia atrás da foto: quebra o retângulo perfeito sem cortar a imagem. */
.sobre__retrato::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -22px;
  top: -22px;
  width: 58%;
  aspect-ratio: 1;
  border-radius: var(--raio-organico);
  background: radial-gradient(closest-side, rgba(138, 164, 124, 0.34), rgba(138, 164, 124, 0));
  pointer-events: none;
}
/* Traco dourado da identidade: RETO, horizontal, fino. Era um arco em SVG, que
   entrava por baixo da imagem e destoava da decisao de manter o site todo
   retilineo - a mesma razao pela qual as ondas entre secoes sairam.
   Barra reta nao precisa de SVG: o gradiente vai direto no background, e o
   border-radius apenas arredonda as pontas. */
.sobre__retrato::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: -16px;
  width: 140px;
  height: 5px;
  border-radius: 3px;
  background: var(--grad-dourado);
  pointer-events: none;
}

/* Assinatura da marca fechando a coluna da foto. Oculta por padrão: ela só faz
   sentido de 768px para cima, onde as duas colunas correm lado a lado e a de
   texto é bem mais alta, sobrando um vão embaixo da foto. No celular as colunas
   empilham, vão nenhum sobra, e o lockup viraria repetição pura. Ligada no
   breakpoint de 768px. */
.sobre__assinatura { display: none; }

.sobre__cargo {
  font-weight: 600;
  color: var(--laranja-texto);
  margin-top: -.4em;
  margin-bottom: 1.1em;
}
.sobre__texto p { color: var(--texto-suave); }
.sobre__texto strong { color: var(--texto); }

/* Bloco da missão: areia quente com um brilho âmbar difuso saindo da barra
   dourada da esquerda — luz encostando no papel, em vez de retângulo chapado. */
.missao {
  margin: 26px 0;
  padding: 22px 24px;
  background:
    radial-gradient(55% 120% at 0% 50%, rgba(232, 161, 58, 0.16), rgba(232, 161, 58, 0) 70%),
    var(--offwhite);
  border-left: 5px solid;
  border-image: var(--grad-dourado) 1;
  border-radius: 0 var(--raio) var(--raio) 0;
}
.missao p {
  font-family: var(--fonte-titulo);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--verde);
  margin-bottom: .5em;
}
.missao cite {
  font-style: normal;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* Rótulo "VALORES" abrindo os selos. Herda a aparência inteira de .eyebrow, a
   mesma de "Quem vai atender você" — aqui só o espaçamento é reajustado: colado
   no quadro da missão ele lia como legenda da citação, e o .7em padrão do
   eyebrow o deixava encostado nas pílulas. O 30px vence a margem de 26px do
   .missao no colapso, que é o que abre o respiro. */
.valores__rotulo { margin-top: 30px; margin-bottom: 12px; }

.valores { display: flex; flex-wrap: wrap; gap: 8px; }
.valores li {
  padding: 7px 15px;
  border: 1px solid rgba(138, 164, 124, 0.45);   /* borda sálvia, não bege neutro */
  border-radius: 999px;
  background: linear-gradient(180deg, #FBF8F1 0%, #F1EBDD 100%);
  font-size: .86rem;
  font-weight: 500;
  color: var(--verde);
}

/* Faixa de números: ganha um blob sálvia de baixa opacidade por trás, com o
   raio assimétrico derivado da curva do símbolo do logo. É a forma orgânica
   mais visível da página — fica atrás dos numerais, sem competir com eles. */
.numeros {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* O gap sobre o fundo da grade É a divisória entre os números — por isso o
     container mantém a cor de borda e as células é que ficam claras. */
  gap: 1px;
  margin-top: 44px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.numeros::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -8%;
  top: -55%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: var(--raio-organico);
  background: radial-gradient(closest-side, rgba(138, 164, 124, 0.30), rgba(138, 164, 124, 0));
  pointer-events: none;
}
.numeros::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -12%;
  bottom: -60%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 47% 53% 58% 42% / 51% 43% 57% 49%;
  background: radial-gradient(closest-side, rgba(232, 161, 58, 0.22), rgba(232, 161, 58, 0));
  pointer-events: none;
}
/* Célula translúcida (não opaca): é o que deixa o blob sálvia/mel aparecer por
   baixo sem apagar as divisórias do gap. */
.numero {
  position: relative;
  z-index: 1;
  padding: 26px 16px;
  background: rgba(251, 248, 241, 0.86);
  text-align: center;
  transition: background-color .28s ease;
}
.numero:hover { background: rgba(255, 253, 249, 0.94); }
.numero__valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.9rem, 8vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--verde);
  margin-bottom: 8px;
}
.numero__valor[data-editar] { font-size: clamp(1rem, 4vw, 1.3rem); }
.numero__label { font-size: .84rem; color: var(--texto-suave); line-height: 1.4; display: block; }

/* ---------- 9. Soluções ---------- */
.solucoes__grid { align-items: stretch; }

/* Cards sobre o bloco escuro: vidro fosco com um leve degradê de cima para
   baixo e um fio de luz na borda superior — simula luz caindo sobre a face. */
.card-sol {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.045) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--raio-gg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform .28s cubic-bezier(.22,.8,.3,1), box-shadow .28s ease,
              border-color .28s ease;
}
.card-sol:hover {
  transform: translateY(-5px);
  border-color: rgba(232, 161, 58, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              -13px 26px 54px -18px rgba(8, 24, 15, 0.6);
}
/* Produto-âncora: borda em GRADIENTE dourado de verdade, não um anel de cor
   chapada. Feito com dois backgrounds e `background-clip` — a camada de baixo
   (padding-box) e a de cima (border-box) deixam o gradiente aparecer apenas na
   faixa da borda. É a técnica que funciona junto com border-radius; usar
   `border-image` aqui cancelaria o arredondamento dos cantos. */
/* Produto-ancora. A luz aqui e DIRECIONAL, nao um halo uniforme: um poco de luz
   quente entrando pelo canto alto-direita, um fio de luz na aresta que recebe esse
   sol, e a sombra caindo para baixo-esquerda como no resto do site. O halo dourado
   uniforme anterior lia como "brilho de botao", nao como luz incidindo. */
.card-sol--destaque {
  background:
    radial-gradient(115% 85% at 92% -6%, rgba(255, 247, 228, 0.95) 0%, rgba(255, 247, 228, 0) 58%) padding-box,
    linear-gradient(168deg, #FFFDF7 0%, #F7F1E5 100%) padding-box,
    var(--grad-dourado) border-box;
  border: 2px solid transparent;
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.95),
    -14px 30px 64px -20px rgba(8, 24, 15, 0.55),
    -8px 16px 44px -16px rgba(232, 161, 58, 0.34);
}
.card-sol--destaque:hover {
  border-color: transparent;
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.95),
    -18px 38px 76px -22px rgba(8, 24, 15, 0.60),
    -10px 20px 56px -16px rgba(232, 161, 58, 0.44);
}
.card-sol--destaque .card-sol__titulo { color: var(--verde); }
.card-sol--destaque .card-sol__desc { color: var(--texto-suave); }
.card-sol--destaque .lista-check li { color: var(--texto); }

.card-sol__selo {
  position: absolute;
  top: -13px;
  left: 24px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--grad-cta);
  color: var(--verde-escuro);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.card-sol__titulo { font-size: 1.32rem; margin-bottom: .45em; }
.card-sol__desc { font-size: .97rem; color: rgba(255, 255, 255, 0.93); margin-bottom: 1.2em; }
.card-sol__cta { margin-top: auto; }

.lista-check { display: grid; gap: 10px; margin-bottom: 24px; }
.lista-check li {
  position: relative;
  padding-left: 30px;
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.97);
}
.lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  /* 1ª camada (topo) = a FOLHA branca (identidade rural, no lugar do check
     genérico); 2ª camada = o gradiente dourado de fundo. A nervura vai no tom
     escuro do próprio gradiente, para o desenho não fechar num borrão a 12px. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20.6 3.4C9.6 3.4 3.4 9.6 3.4 20.6c11 0 17.2-6.2 17.2-17.2z'/%3E%3Cpath fill='none' stroke='%23C4830F' stroke-width='1.7' stroke-linecap='round' d='M7 17 16.4 7.6'/%3E%3C/svg%3E"),
    linear-gradient(103deg, #F2B45C 0%, #C4830F 100%);
  background-size: 12px 12px, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.lista-check--claro li { color: rgba(255, 255, 255, 0.97); }

/* ---------- 10. Processo ---------- */
/* FOTO 2 - pulverizador visto de cima, com a sombra longa e nitida projetada no
   verde. E a mais grafica das tres, e entra aqui como TEXTURA, nao como imagem:
   convertida em duotone (verde-escuro -> branco, assado no proprio JPEG, sem
   filtro nem blend-mode em tempo de execucao).

   OPACIDADE 16%, contra os 10% anteriores - a textura estava imperceptivel.
   16% e o TETO: quem manda no limite e o olho-magico "Como funciona", laranja
   escuro sobre fundo claro, que cai de 5,18:1 (nos 10%) para 4,63:1. Em 18% ele
   iria a 4,45:1 e reprovaria o AA por 0,05.

   A rodada 5 tinha baixado de 14% para 10% supondo que a textura ameacava os 4
   passos. Nao ameacava, e a suposicao estava errada: os cards tem fundo BRANCO
   OPACO e a textura nao passa por baixo deles. Sobre a textura fica so o
   cabecalho da secao. Por isso ha muito mais folga do que aquela rodada calculou.

   O ARQUIVO tambem mudou: a rodada 5 o desfocou antes de comprimir (a 10% o
   detalhe fino era invisivel e custava 34KB). A 16% ele deixa de ser invisivel -
   era esse desfoque, e nao o CSS, a causa do borrao. Refeito do original sem
   desfoque, a acutancia sobe 4,2x. Ampliar alem de 900px nao adianta: a origem
   tem 612px de largura e ai acaba a informacao. */
.processo {
  position: relative;
  isolation: isolate;   /* o ::before em z-index:-1 fica atras do conteudo, nao do body */
  overflow: hidden;
}
.processo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/images/textura-fundo-pulverizador-sombra.jpg") center / cover no-repeat;
  opacity: .16;
  pointer-events: none;
}

.passos { display: grid; gap: 18px; counter-reset: passo; }

.passo {
  position: relative;
  padding: 24px 22px 22px 22px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-gg);
  box-shadow: var(--sombra);
  transition: transform .28s cubic-bezier(.22,.8,.3,1), box-shadow .28s ease;
}
.passo:hover { transform: translateY(-5px); box-shadow: var(--sombra-lift); }
/* O numeral do passo deixa de ser círculo perfeito e passa a usar o raio
   assimétrico do logo — é a forma orgânica repetida em escala pequena. */
.passo__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: var(--raio-organico);
  background: var(--grad-cta);
  color: var(--verde-profundo);
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  box-shadow: var(--glow-mel);
}
.passo h3 { font-size: 1.12rem; margin-bottom: .4em; }
.passo p { font-size: .95rem; color: var(--texto-suave); margin-bottom: 0; }

/* ---------- 11. Prova social ---------- */
.parceiros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  /* Sem margem embaixo: os 44px daqui separavam a fileira dos cards de
     depoimento, que saíram para o lançamento. Com a fileira virando o último
     elemento da seção, aqueles 44px viravam vão morto entre a última marca e o
     fim da seção — o fecho passa a ser o padding da própria .section, que é o
     mesmo das outras. Quando os depoimentos voltarem, esta margem volta junto. */
  margin-bottom: 0;
}
/* Card branco atrás de cada marca. Os arquivos vieram com fundo branco chapado,
   e sobre o creme da seção isso deixaria um retângulo visível em cada logo — o
   card resolve isso encostando branco em branco, sem emenda aparente. */
.parceiros li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  min-height: 88px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  transition: transform .28s cubic-bezier(.22,.8,.3,1), box-shadow .28s ease;
}
.parceiros li:hover { transform: translateY(-4px); box-shadow: var(--sombra-lift); }

/* Caixa idêntica para todas as marcas + `contain`: nenhuma é cortada nem
   esticada, e todas ocupam o mesmo espaço. O 11:5 é a proporção dos sete
   arquivos, que são exatamente 440x200 — o CSS não faz conta de escala aqui.
   O equilíbrio de TAMANHO entre marcas de formatos tão diferentes (selo redondo
   x logotipo deitado) foi resolvido dentro do arquivo, escalando cada uma pela
   área da tinta — o CSS só apresenta. Medida no tamanho de tela, a área de
   tinta das sete varia 30% em torno da média; sem essa normalização o selo
   redondo pesaria bem menos que os logotipos deitados. */
.parceiros img {
  width: 100%;
  height: auto;
  aspect-ratio: 11 / 5;
  object-fit: contain;
}

/* CORES ORIGINAIS, SEMPRE — decisão do Marco Antonio. Aqui existia o padrão
   "clientes que confiam" (cinza por baixo, cor no hover, e só onde há cursor).
   Saiu inteiro: não há mais `filter` nem `opacity` sobre estas marcas em estado
   nenhum, nem no hover, nem por media query.

   Com o cinza fora, quem segura a uniformidade da fileira é só a moldura — e
   ela não é sombra própria desta seção: é a MESMA receita dos outros cards do
   site (.passo, .depo, .acc__item) — fundo var(--branco), fio de 1px em
   var(--borda), var(--sombra) parada e var(--sombra-lift) no hover. Some com o
   card e a fileira vira colagem, porque os arquivos têm fundo branco chapado e
   o creme da seção denunciaria o retângulo de cada um.

   O que o cinza escondia, medido com a cor ligada: a saturação média das sete
   vai de 0,18 (o selo preto da Fazenda Londrina) a 0,49 (Agro Herrero). A
   variedade de cor é menor do que parecia — seis das sete marcas são verdes,
   que é a própria cor da casa; quem destoa de verdade é o selo preto. */

/* Depoimento: brilho radial quente no canto superior direito, para o card não
   ler como retângulo branco liso. (O CONTEÚDO placeholder segue intocado.) */
/* CARDS DE DEPOIMENTO — DORMENTES. Os dois <figure class="depo"> saíram do HTML
   no lançamento porque os textos reais ainda não chegaram. Estas regras ficam de
   pé de propósito: os cards voltam numa rodada futura e reescrevê-las custaria
   mais do que mantê-las. Nada aqui casa com nenhum elemento da página hoje. */
.depo {
  margin: 0;
  padding: 28px 26px;
  background:
    radial-gradient(80% 65% at 100% 0%, rgba(232, 161, 58, 0.10), rgba(232, 161, 58, 0) 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(138, 164, 124, 0.10), rgba(138, 164, 124, 0) 62%),
    var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-gg);
  box-shadow: var(--sombra);
  transition: transform .28s cubic-bezier(.22,.8,.3,1), box-shadow .28s ease;
}
.depo:hover { transform: translateY(-4px); box-shadow: var(--sombra-lift); }
.depo blockquote { margin: 0 0 18px; }
/* Aspa decorativa em terracota. Em mel puro ela dava ~2,2:1 sobre o card branco
   e sumia; terracota fica em 4,91:1 e ainda introduz o tom de terra da paleta. */
.depo blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 3.4rem;
  line-height: .6;
  color: var(--terracota);
  margin-bottom: 12px;
}
.depo blockquote p { font-size: 1.02rem; color: var(--texto); margin-bottom: 0; }
.depo figcaption { display: flex; align-items: center; gap: 12px; }
.depo figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.depo figcaption strong { display: block; color: var(--verde); font-size: .95rem; }
.depo figcaption small { display: block; color: var(--texto-suave); font-size: .84rem; }

/* ---------- 12. FAQ ---------- */
.accordion {
  border: 1px solid var(--borda);
  border-radius: var(--raio-gg);
  overflow: hidden;
  background: var(--branco);
  box-shadow: var(--sombra);
}
.acc__item + .acc__item { border-top: 1px solid var(--borda); }
.acc__head { margin: 0; font-size: 1rem; }

.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 18px 18px;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--fonte-titulo);
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--verde);
  cursor: pointer;
  transition: background-color .18s ease;
}
.acc__btn:hover { background: var(--offwhite); }
.acc__btn[aria-expanded="true"] { background: var(--offwhite); }

.acc__icone {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grad-dourado);
}
.acc__icone::before,
.acc__icone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2.5px;
  border-radius: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform .22s ease;
}
.acc__icone::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__icone::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Abertura fluida sem alterar o JS. O painel continua sendo escondido pelo
   atributo [hidden] (display:none) — que é o que o remove da árvore de
   acessibilidade; trocar isso por max-height deixaria o conteúdo fechado ainda
   visível para leitores de tela. `transition-behavior: allow-discrete` +
   @starting-style permitem animar opacidade/deslocamento mesmo com display
   discreto. Navegador sem suporte abre e fecha instantâneo, exatamente como hoje. */
.acc__painel {
  padding: 0 18px 22px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.8,.3,1), display .3s;
  /* declarado à parte de propósito: `allow-discrete` dentro do shorthand
     invalida a declaração inteira em navegador que não conhece a palavra —
     e aí opacidade e transform também parariam de animar. */
  transition-behavior: allow-discrete;
}
.acc__painel[hidden] {
  display: none;
  opacity: 0;
  transform: translateY(-8px);
}
@starting-style {
  .acc__painel:not([hidden]) { opacity: 0; transform: translateY(-8px); }
}
.acc__painel p { color: var(--texto-suave); margin-bottom: 0; font-size: .97rem; }

/* ---------- 13. Formulário ---------- */
.contato__grid { display: grid; gap: 34px; }

.contato__direto {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.contato__direto p { color: rgba(255, 255, 255, 0.92); font-size: .95rem; margin-bottom: 12px; }
.contato__tel { margin: 14px 0 0; font-size: .95rem; }
.contato__tel a { color: var(--dourado-claro); font-weight: 700; }

/* FOTO 3 - milharal com o sol no horizonte, ceu com nuvens douradas. E a mais
   atmosferica das tres e fecha o site com a mesma luz que o abre.
   Sobrepoe o gradiente de .section--verde (seletor de id ganha em especificidade),
   e com isso o --luz-tarde sintetico sai daqui: com foto real, luz simulada por
   cima e efeito sobre efeito.

   O veu e mais escuro NO TOPO, nao embaixo. Testados os dois sentidos: o ceu claro
   da foto esta no terco superior e e justamente ali que fica o titulo branco, e o
   milharal na base ja e escuro por natureza. Escurecer embaixo seria gastar
   opacidade onde nao precisa e apagar a hora dourada onde ela aparece.
   No meio o veu abre para 70% - e a faixa do poente, a parte que vale ver.
   Pior contraste medido em texto: 9,34:1 (AAA). O formulario nao depende disso:
   e um cartao branco opaco.

   NITIDEZ: o arquivo de origem tem 612px de largura e esta secao ocupa a tela
   inteira - de 2,4x (1440px) a 3,1x (1920px) de ampliacao. Isso e um teto de
   informacao, nao um problema de CSS: nenhum ajuste aqui inventa pixel.
   O que deu para fazer foi ampliar do original com LANCZOS e passar mascara de
   nitidez DEPOIS de ampliar, em vez de largar a ampliacao para o navegador. Isso
   levou a acutancia de 1,72 para 2,47 - o teto medido desta foto, +44%.
   A entrega e em 900px porque a medicao mostrou que ali a curva satura: acima
   disso os bytes compram ampliacao, nao nitidez.
   Para ficar de fato nitida em tela cheia, precisa do MESMO arquivo em 1600px
   ou mais - o que se tem hoje e uma previa de banco de imagens. */
#contato {
  background:
    linear-gradient(180deg,
      rgba(10, 46, 32, 0.86) 0%,
      rgba(10, 46, 32, 0.83) 32%,
      rgba(10, 46, 32, 0.70) 60%,
      rgba(10, 46, 32, 0.80) 100%),
    url("../assets/images/fundo-contato-milharal-poente.jpg") center / cover no-repeat,
    var(--verde-profundo);
}


.form {
  padding: 26px 20px 24px;
  background:
    radial-gradient(70% 45% at 100% 0%, rgba(232, 161, 58, 0.10), rgba(232, 161, 58, 0) 60%),
    var(--branco);
  border-radius: var(--raio-gg);
  box-shadow:
    0 0 0 1px rgba(232, 161, 58, 0.16),
    -15px 30px 64px -22px rgba(8, 24, 15, 0.5);
  color: var(--texto);
}
.form__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.34rem;
  font-weight: 700;
  color: var(--verde);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}

.campo { margin-bottom: 16px; }
.campo--fieldset { border: 0; padding: 0; margin-inline: 0; }

.campo label,
.campo legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--verde);
}
.campo label small,
.campo legend small { font-weight: 400; color: var(--texto-suave); }
.campo label span[aria-hidden],
.campo legend span[aria-hidden] { color: var(--erro); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  background: var(--offwhite);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  font-size: 16px; /* evita zoom automático no iOS */
  transition: border-color .18s ease, background-color .18s ease;
}
.campo textarea { min-height: 88px; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { background: #fff; border-color: var(--verde); }
.campo input::placeholder,
.campo textarea::placeholder { color: #9AA69F; }

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23104A35' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}

.campo.tem-erro input,
.campo.tem-erro select,
.campo.tem-erro textarea { border-color: var(--erro); background: #FDF4F3; }

.erro { display: none; margin-top: 5px; font-size: .84rem; font-weight: 500; color: var(--erro); }
.campo.tem-erro .erro { display: block; }

.campo-duplo { display: grid; gap: 0; }

.opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opcao {
  position: relative; /* prende o input visualmente oculto dentro do label */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 6px;
  background: var(--offwhite);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  font-size: .9rem;
  font-weight: 600;
  color: var(--verde);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
  margin-bottom: 0;
}
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao:hover { border-color: var(--verde); }
/* .is-checked é o fallback aplicado pelo JS em navegadores sem suporte a :has() */
.opcao.is-checked,
.opcao:has(input:checked) { background: var(--verde); border-color: var(--verde); color: #fff; }
.opcao:has(input:focus-visible) { outline: 3px solid var(--dourado); outline-offset: 2px; }
.opcao input:focus-visible + span { outline: 3px solid var(--dourado); outline-offset: 4px; border-radius: 4px; }

.form__nota {
  margin: 14px 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--texto-suave);
  text-align: center;
}
.form__nota.is-erro { color: var(--erro); font-weight: 600; }
.form__nota.is-ok { color: var(--verde); font-weight: 600; }

/* ---------- 14. Footer ---------- */
/* Rodapé fecha a página com o mesmo tratamento do bloco escuro: gradiente
   diagonal e luz de tarde, com uma folha em marca d'agua no canto. */
.footer {
  position: relative;
  isolation: isolate;
  /* verdes migrados para a paleta amostrada do logo (antes eram os antigos
     #17402B/#12301F/#0D2416, que sobraram da troca de paleta) */
  background: var(--luz-tarde), linear-gradient(163deg, #0D3B2A 0%, #0A2E20 55%, #071F16 100%);
  color: rgba(255, 255, 255, 0.90);
  padding-top: 48px;
  overflow: hidden;
}
/* Marca d'agua organica no canto do rodape: a mesma folha dos itens de lista,
   ampliada, a 5%. Elemento unico e discreto - nao um padrao repetido. */
.footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -46px;
  bottom: -54px;
  width: 340px;
  height: 340px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20.6 3.4C9.6 3.4 3.4 9.6 3.4 20.6c11 0 17.2-6.2 17.2-17.2z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='.9' stroke-linecap='round' d='M7 17 16.4 7.6'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}
.footer > * { position: relative; z-index: 1; }
.footer__grid { display: grid; gap: 34px; padding-bottom: 38px; }

/* Marca do rodapé: ícone + wordmark, medida por LARGURA e não por altura.
   O lockup é 3,2:1 — travar a altura em 64px como antes deixaria as maiúsculas
   com ~11px, ilegíveis. Em 275px de largura elas ficam com ~15px.
   A tagline logo abaixo continua sendo TEXTO (.footer__tagline), não pixel:
   por isso a arte usada aqui é a versão sem tagline, senão a frase apareceria
   duas vezes seguidas. */
.footer__marca img { width: 275px; max-width: 100%; height: auto; margin-bottom: 16px; }
.footer__tagline {
  font-family: var(--fonte-titulo);
  font-size: 1.08rem;
  font-weight: 700;
  /* --dourado-claro, não --mel: o rodapé tem o halo âmbar do --luz-tarde, e mel
     sobre mel iluminado dava ~3,5:1. Assim fica em 7,0:1. */
  color: var(--dourado-claro);
  margin-bottom: .5em;
}
.footer__desc { font-size: .92rem; max-width: 340px; margin-bottom: 0; }

.footer__titulo {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.1em;
}
.footer__nav ul,
.footer__contato ul { display: grid; gap: 10px; margin-bottom: 20px; }
.footer a { color: rgba(255, 255, 255, 0.93); text-decoration: none; font-size: .95rem; }
.footer a:hover { color: var(--dourado-claro); text-decoration: underline; }
.footer__contato ul li { font-size: .94rem; }

.footer__base {
  padding: 20px 0 90px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: .84rem;
  text-align: center;
}
.footer__base p { margin: 0; }

/* ---------- 15. CTA fixo mobile ---------- */
.cta-fixo {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 248, 241, 0.96);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-top: 1px solid rgba(228, 220, 203, 0.8);
  /* barra fixa inferior: sombra para CIMA de proposito - e o que sinaliza que
     ela flutua sobre o conteudo. O X negativo mantem a direcao da luz. */
  box-shadow: -2px -8px 26px -10px rgba(16, 74, 53, 0.28);
  transform: translateY(120%);
  transition: transform .3s ease;
}
.cta-fixo.is-visivel { transform: translateY(0); }
.cta-fixo .btn { width: 100%; }

/* ==========================================================================
   16. Breakpoints
   ========================================================================== */

/* --- >= 560px --- */
@media (min-width: 560px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .hero__actions .btn { flex: 1 1 auto; min-width: 230px; }
  .campo-duplo { grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .parceiros { grid-template-columns: repeat(3, 1fr); }
}

/* --- >= 768px (tablet) --- */
@media (min-width: 768px) {
  :root { --gutter: 32px; }

  .section { padding: 112px 0; }
  .section--tight { padding: 96px 0; }
  .section__head { margin-bottom: 60px; }

  .grid { gap: 24px; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }

  .form { padding: 34px 32px 30px; }
  .numeros { grid-template-columns: repeat(4, 1fr); }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .parceiros { grid-template-columns: repeat(4, 1fr); gap: 16px; }

  .sobre__grid { grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: start; }

  /* A coluna da foto passa a ocupar a altura da LINHA inteira — que é ditada
     pela coluna de texto, bem mais alta. Só assim existe um vão medido embaixo
     da foto para a assinatura ocupar; com `align-items: start` sozinho, a coluna
     terminava junto com a foto e não havia onde centralizar nada.
     A margem no retrato é o piso do vão: o traço dourado pende 16px abaixo dele,
     e sem essa folga a assinatura encostaria no traço quando o texto fosse curto. */
  .sobre__foto { align-self: stretch; display: flex; flex-direction: column; }
  .sobre__retrato { margin-bottom: 40px; }
  .sobre__assinatura {
    display: block;
    /* 190px no desktop (~39% da coluna) — assinatura, não segundo logotipo.
       O teto de 62% é para o tablet: em 768px a coluna da foto cai para ~280px,
       e 190px fixos ali passariam de assinatura a protagonista. Nessa faixa a
       arte fica em ~174px. */
    width: min(190px, 62%);
    height: auto;
    margin: auto;          /* centraliza no vão, na horizontal e na vertical */
    /* 82%: testado contra 100%, 90% e 70% sobre o bone. Em 100% disputa atenção
       com a foto; em 70% some. Em 82% lê como assinatura e a tagline ainda
       aparece. */
    opacity: .82;
  }
  .contato__grid { grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }

  .header__logo img { max-height: 48px; }   /* ainda o símbolo isolado */

  .hero { min-height: 82svh; }
  /* No desktop o veu deita: escuro onde esta o texto (esquerda), dissolvendo a
     direita para a foto aparecer. Paradas validadas faixa por faixa contra a
     foto - toda a zona de texto (0-65% da largura) fica em AAA. */
  .hero::after {
    background:
      linear-gradient(90deg,
        rgba(10, 46, 32, 0.93) 0%,
        rgba(10, 46, 32, 0.90) 32%,
        rgba(10, 46, 32, 0.76) 66%,
        rgba(10, 46, 32, 0.46) 100%);
  }
  .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
  .footer__base { padding-bottom: 24px; }
}

/* --- >= 1024px (desktop) --- */
@media (min-width: 1024px) {
  :root { --header-h: 78px; }

  body { font-size: 17px; }

  .nav-toggle { display: none; }
  .nav-backdrop { display: none !important; }

  .nav {
    position: static;
    display: flex;
    align-items: center;
    flex: 0 0 auto;   /* o menu nunca encolhe; quem cede espaço é o logo */
    gap: 18px;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
    visibility: visible;
  }
  .nav__list { flex-direction: row; gap: 4px; margin-bottom: 0; }
  .nav__link { padding: 9px 11px; font-size: .95rem; white-space: nowrap; }
  .nav__link.is-active { background: transparent; color: var(--verde); }
  .nav__link.is-active::before { display: none; }
  .nav__link.is-active::after {
    content: "";
    display: block;
    height: 3px;
    margin-top: 4px;
    border-radius: 3px;
    background: var(--grad-dourado);
  }
  .nav__cta { width: auto; min-height: 46px; padding: 11px 18px; font-size: .93rem; }



  .section { padding: 136px 0; }
  .grid { gap: 28px; }
  .passos { grid-template-columns: repeat(4, 1fr); }
  /* Os 7 parceiros em fileira única. Em 1024px isso deixa 127px por card, então
     o respiro lateral aperta um pouco aqui para a marca não ficar espremida —
     a partir de 1280px o container trava em 1180px, o card fica em 146px e o
     padrão de 14px volta sozinho.
     O respiro é o MESMO nos sete cards em qualquer faixa; o que muda de faixa
     para faixa é o valor, não a diferença entre um card e outro. */
  .parceiros { grid-template-columns: repeat(7, 1fr); gap: 12px; }
  .parceiros li { padding: 12px 10px; }

  .card-dor { padding: 32px 28px 28px; }
  .card-sol { padding: 34px 28px; }
  .card-sol--destaque { transform: scale(1.04); z-index: 2; }
  /* precisa repetir o scale: `.card-sol:hover` tem especificidade maior e
     substituiria o transform inteiro, fazendo o card-âncora ENCOLHER no hover */
  .card-sol--destaque:hover { transform: scale(1.04) translateY(-5px); }

  .hero { min-height: 84svh; padding-bottom: 104px; }

  .cta-fixo { display: none; }
  .footer__base { padding-bottom: 26px; }
}

/* --- >= 1280px --- */
@media (min-width: 1280px) {
  .section__title { font-size: 2.5rem; }
  .hero__title { font-size: 3.7rem; }
  /* aqui o <picture> troca para o lockup horizontal (8,67:1) */
  .header__logo img { max-height: 56px; }
  .parceiros { gap: 16px; }
  .parceiros li { padding: 14px; }   /* volta o respiro cheio: o card cresce p/ 146px */
  .nav { gap: 20px; }
  .nav__link { padding: 9px 12px; font-size: .95rem; }
}

/* ---------- 17. Impressão ---------- */
@media print {
  .header, .cta-fixo, .nav, .hero__bg { display: none !important; }
  .processo::before { display: none !important; }   /* textura nao vai para o papel */
  body { color: #000; }
  .section--verde { background: #fff !important; color: #000 !important; }
}