/* ==========================================================================
   CBE Agro — folha de estilo única
   Sem dependências externas: a Montserrat é auto-hospedada em /fonts e não
   há ícone nem script de terceiros. Motivo: o servidor é Apache simples e o
   site precisa carregar rápido em conexão móvel rural, onde CDN externo
   costuma ser o gargalo.

   Paleta extraída do vetor da marca (ver CONTEUDO-RECEBIDO.md, bloco 5).
   O dourado da versão anterior foi descartado junto com a paleta provisória.
   ========================================================================== */

/* Fonte variável: um único arquivo cobre os pesos 100–900.
   O subset latin inclui toda a acentuação do pt-BR. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta terrosa, escolhida pelo Paulo em 26/08/2026 (variação B da amostra
     saidas/propostas-20260826/paleta.html). Os verdes da marca deram lugar a
     um sálvia mais suave; o vetor da marca segue com as cores originais.
     Todo par cor/fundo abaixo foi medido — os números estão nos comentários. */
  --verde-vivo:    #6E8B5A;   /* sálvia: traços, bordas, ícones — nunca texto miúdo */
  --verde-escuro:  #40573C;   /* texto verde e fundos escuros: 6,6:1 sobre o fundo */
  --marrom:        #69241F;
  --marrom-escuro: #471B1A;
  --grafite:       #2A211A;   /* 13,1:1 sobre o fundo */

  /* Faixa escura: transita de verde profundo a terroso em vez do verde chapado.
     Branco sobre ela vai de 7,1:1 na ponta verde a 5,9:1 na terrosa. */
  --escuro-1:     #4A5E41;
  --escuro-2:     #7A5F41;

  /* Neutros de apoio (não são da marca; papel de fundo, superfície e borda) */
  --fundo:        #F2E9DA;
  --fundo-suave:  #E5D8C3;
  --cartao:       #FAF4E9;   /* superfície de cartão; era branco puro */
  --borda:        rgba(120, 95, 65, 0.24);
  --texto-suave:  #665847;   /* 4,9:1 no pior fundo; o #7A6A57 da amostra reprovava */

  --fonte: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;

  --largura: 1180px;
  --raio: 6px;
  --transicao: 200ms ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--fonte);
  /* 16 px no celular → 17 px no desktop; entrelinha generosa para leitura longa */
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.75;
  color: var(--grafite);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hierarquia por peso e escala: títulos grandes levam tracking negativo
   discreto — a Montserrat é larga e fecha bem em corpos grandes. */
h1, h2, h3, h4 {
  color: var(--grafite);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1 { font-size: clamp(2.2rem, 1.2rem + 4.5vw, 4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; max-width: 65ch; /* medida confortável de leitura */ }
p:last-child { margin-bottom: 0; }

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

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

/* Acessibilidade: foco sempre visível para navegação por teclado */
:focus-visible {
  outline: 3px solid var(--verde-vivo);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--verde-escuro);
  color: #fff;
  padding: 12px 20px;
  z-index: 300;
}
.pular-para-conteudo:focus { left: 0; color: #fff; }

/* ---------- Aviso de prévia ----------------------------------------------
   Barra fixa no topo enquanto o site não for aprovado. Remover no lançamento,
   junto com a meta noindex.
   ------------------------------------------------------------------------ */

/* Marrom da marca, não o grafite: a faixa institucional logo abaixo é escura,
   e duas faixas do mesmo tom empilhadas viravam um bloco só. Este tom lê como
   aviso e deixa claro o que sai no lançamento e o que fica. */
.aviso-previa {
  margin: 0;
  max-width: none; /* anula a medida de leitura do p global */
  background: var(--marrom);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 16px;
}

/* ---------- Cabeçalho ----------------------------------------------------
   Duas peças: a faixa marrom, fina e sem conteúdo, e a barra clara com a
   marca, o tempo e o menu. A marrom veio da barra de prévia — a página tinha
   esse remate no alto e ele fazia falta quando o aviso saísse.

   As duas acompanham a rolagem, empilhadas: a faixa gruda em 0 e o cabeçalho
   logo abaixo dela, em 24px. Por isso a faixa fica FORA do <header> — dentro
   dele, `sticky` só grudaria dentro dos limites do próprio header, que é o
   que fazia a barra clara descolar do topo.
   ------------------------------------------------------------------------ */

.faixa-topo {
  position: sticky;
  top: 0;
  z-index: 101;   /* acima do cabeçalho: é ela que encosta na borda da tela */
  height: 24px;
  background: var(--grafite);
}

.cabecalho {
  position: sticky;
  top: 24px;      /* a altura da faixa, que fica grudada acima */
  z-index: 100;
  /* Mesmo bege do corpo, com a translucidez que deixa o conteúdo passar por
     baixo. Ficou para trás na troca de paleta: era o branco frio #FCFCFA e
     destoava do resto da página nas três páginas de uma vez. */
  background: rgba(242, 233, 218, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
}

/* Com a faixa e o cabeçalho grudados, o topo fixo passou de 76px para 100px:
   sem esta margem, clicar em "Produção" no menu levaria o título da seção
   para debaixo do cabeçalho. */
section[id] { scroll-margin-top: 112px; }
@media (max-width: 760px) { section[id] { scroll-margin-top: 0; } }

.cabecalho .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 24px);
  min-height: 76px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Acima da faixa em que o cabeçalho empilha, tudo cabe numa linha só. O
   nowrap é o que garante isso: sem ele, faltando um punhado de pixels o menu
   inteiro descia para uma segunda linha em vez de apertar os vãos. */
@media (min-width: 901px) {
  .cabecalho .container { flex-wrap: nowrap; }
  .cabecalho .navegacao { flex-wrap: nowrap; }
  .marca { flex: none; }
}

/* Tempo agora, entre a marca e o menu. Discreto de propósito: é informação de
   apoio, não chamada — por isso sem fundo colorido, sem borda grossa e com a
   temperatura no mesmo peso do menu. O `margin: auto` o centraliza no espaço
   que sobra entre os dois vizinhos, sem precisar de posicionamento absoluto. */
.clima-topo {
  display: flex;
  align-items: center;
  flex: none;
  gap: 8px;
  margin: 0 auto;
  padding: 5px 12px 5px 9px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  text-decoration: none;
  color: var(--grafite);
  background: rgba(250, 244, 233, 0.62);
  transition: border-color var(--transicao), background var(--transicao);
}
.clima-topo:hover,
.clima-topo:focus-visible {
  border-color: var(--verde-vivo);
  background: var(--cartao);
}
.clima-topo[hidden] { display: none; }

.clima-topo__icone {
  width: 23px;
  height: 23px;
  flex: none;
  color: var(--verde-escuro);
}
.clima-topo__icone svg { width: 100%; height: 100%; display: block; }

.clima-topo__dados { display: flex; flex-direction: column; line-height: 1.15; }
.clima-topo__temp {
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  font-weight: 700;
  white-space: nowrap;
}
.clima-topo__local {
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}

/* Some abaixo de 1000px: entre 900 e 1000 os três blocos ainda cabem na conta,
   mas sem folga nenhuma — e a condição do tempo muda de largura ao longo do
   dia. O dado continua na seção, a um clique do menu. */
@media (max-width: 1000px) { .clima-topo { display: none; } }

.marca { display: inline-flex; align-items: center; }
/* Encolhe com a janela em vez de quebrar o cabeçalho em duas linhas: marca,
   quadro do tempo e menu somavam ~1171px contra 1132px úteis do contêiner. */
.marca img { width: clamp(168px, 15vw, 196px); height: auto; }

.navegacao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px clamp(12px, 1.7vw, 21px);
}

.navegacao a {
  color: var(--grafite);
  font-size: clamp(0.80rem, 0.9vw, 0.87rem);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.navegacao a:hover { color: var(--verde-escuro); }

.navegacao__contato {
  background: var(--verde-escuro);
  color: #fff !important;
  border-radius: 999px;
  padding: 9px 20px;
  transition: background var(--transicao);
}
/* O hover escurece em vez de clarear: sobre o sálvia, o grafite dá 4,1:1 e
   o branco 3,8:1 — nenhum dos dois passa em corpo pequeno. */
.navegacao__contato:hover { background: #35492F; border-color: #35492F; }

/* Em telas estreitas a navegação vira uma fileira de "chips" rolável no
   toque — projeto próprio de mobile, não o desktop espremido. O cabeçalho
   deixa de ser fixo (duas linhas fixas roubariam espaço demais). */
@media (max-width: 760px) {
  .cabecalho { position: static; }
  .faixa-topo { position: static; }
  .cabecalho .container {
    flex-direction: column;
    flex-wrap: nowrap; /* com wrap + column, o logo pulava para uma 2ª coluna */
    align-items: stretch;
    gap: 10px;
  }
  .marca { justify-content: center; }
  .navegacao {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .navegacao::-webkit-scrollbar { display: none; }
  .navegacao a {
    flex: 0 0 auto;
    font-size: 0.84rem;
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 7px 14px;
    white-space: nowrap;
  }
  .navegacao__contato { border-color: var(--verde-escuro); padding: 7px 14px; }
}

/* ---------- Hero ----------------------------------------------------------
   Capa com o logo integrado, como o cliente pediu: a assinatura em versão
   clara (texto branco) sobre o canavial com os sulcos convergindo para o
   centro — a composição da foto pede conteúdo centralizado. O degradê
   garante contraste AA do texto branco sobre o céu claro. O zoom lento e o
   parallax são desligados por prefers-reduced-motion.
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(94vh, 860px);
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* Capa de página interna: mesma construção da principal, com metade da altura.
   A da home ocupa a tela inteira porque é a primeira impressão; aqui o
   visitante já entrou por um link e quer chegar ao conteúdo. */
.hero--interna {
  min-height: min(52vh, 460px);
}
.hero--interna .container {
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(40px, 6vw, 64px);   /* sem a faixa em arco da home */
}
.hero--interna .hero__foto {
  object-position: center 50%;
}

/* O véu da capa principal é pesado porque lá ele segura logo, título, texto e
   dois botões sobre um canavial claro. Aqui há só um título — e o véu daquela
   força apagava a cor da foto. Este é bem mais leve. */
.hero--interna::after {
  background: linear-gradient(to top,
    rgba(15, 28, 20, 0.58) 0%,
    rgba(15, 28, 20, 0.24) 52%,
    rgba(15, 28, 20, 0.32) 100%);
}

/* Escurecimento localizado atrás do texto. Existe porque o problema não era a
   foto estar clara: era texto branco caindo em cima de gado branco. Escurecer
   a imagem toda resolveria a leitura e mataria a cor — este foco resolve só
   onde o texto pousa e deixa o resto da foto viva. */
.hero--interna::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 76% 68% at 50% 50%,
    rgba(15, 28, 20, 0.68) 0%,
    rgba(15, 28, 20, 0.36) 54%,
    rgba(15, 28, 20, 0) 78%);
}
/* A capa do Mercado é uma aérea fechada no canavial, e o verde do meio-dia é
   claro demais para texto branco: com o foco centrado da História o pior caso
   media 2,3:1. Aqui o foco desce para 30% da largura, onde o texto pousa, e
   ganha alcance. Medido depois: pior caso 5,4:1, média 10,8:1. */
.hero--mercado::before {
  background: radial-gradient(ellipse 92% 88% at 30% 50%,
    rgba(15, 28, 20, 0.86) 0%,
    rgba(15, 28, 20, 0.48) 56%,
    rgba(15, 28, 20, 0) 100%);
}

.hero--interna h1 { margin-bottom: 18px; }
.hero--interna .hero__resumo { margin-bottom: 0; }

.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  will-change: transform;
}

.hero__foto {
  position: absolute;
  left: 0;
  top: -12%;             /* folga para o parallax deslocar sem abrir fresta */
  width: 100%;
  height: 124%;
  object-fit: cover;
  /* privilegia a metade de baixo da foto: os sulcos que convergem ao centro */
  object-position: center 68%;
}

/* Zoom lento de abertura (Ken Burns contido). A propriedade `scale` não
   conflita com o translate do parallax, que age no wrapper. */
@keyframes hero-zoom { from { scale: 1.07; } to { scale: 1; } }
html.anima .hero__foto { animation: hero-zoom 12s ease-out both; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
      rgba(17, 31, 22, 0.88) 0%,
      rgba(24, 38, 29, 0.48) 45%,
      rgba(24, 32, 27, 0.55) 100%);
}

.hero .container {
  padding-top: clamp(56px, 8vw, 88px);
  /* a faixa de indicadores sobe em arco por cima da base da foto */
  padding-bottom: calc(clamp(26px, 5vw, 60px) + clamp(48px, 7vw, 80px));
}

.hero__conteudo {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__logo {
  width: clamp(250px, 42vw, 430px);
  height: auto;
  margin-bottom: clamp(22px, 4vw, 40px);
  filter: drop-shadow(0 3px 16px rgba(0, 0, 0, 0.4));
}

.hero__local {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
}
.hero__local::before,
.hero__local::after {
  content: "";
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--verde-vivo);
}

.hero h1 {
  color: #fff;
  margin-bottom: 20px;
  font-size: clamp(2rem, 1.1rem + 3.8vw, 3.4rem);
}
.hero h1 em { font-style: normal; color: var(--verde-vivo); }

.hero__resumo {
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.2rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  max-width: 620px;
  margin-bottom: 34px;
}

/* As quatro linhas do resumo são blocos, e não <br>: cada uma quebra sozinha
   quando a tela é estreita, em vez de forçar quebra onde o texto não cabe.
   O <br> daria linhas órfãs de duas palavras no celular. */
.hero__resumo-linha { display: block; }

/* Quebra de linha declarada, usável em qualquer parágrafo do site. É bloco e
   não <br> porque cada linha ainda pode quebrar sozinha em tela estreita — com
   <br> o celular ganharia linhas órfãs de duas palavras. */
.linha { display: block; }
.hero__resumo-linha--fecho {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.94em;
}

.hero__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---------- Transição em arco entre seções ---------------------------------
   Cantos superiores arredondados que avançam sobre a seção anterior — um
   eco discreto dos arcos da marca. Só em seções de fundo opaco.
   ------------------------------------------------------------------------ */

.secao--arco {
  position: relative;
  z-index: 2;
  border-radius: clamp(26px, 5vw, 60px) clamp(26px, 5vw, 60px) 0 0;
  margin-top: calc(clamp(26px, 5vw, 60px) * -1);
}

/* ---------- Botões ------------------------------------------------------- */

.botao {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao);
}

/* O sálvia não serve de fundo para botão: grafite sobre ele dá 4,1:1 e branco
   3,8:1 — os dois reprovam. O verde escuro com texto branco dá 7,9:1. */
.botao--primario {
  background: var(--verde-escuro);
  color: #fff;
  border-color: var(--verde-escuro);
}
.botao--primario:hover { background: #35492F; border-color: #35492F; }

/* Contorno claro: existe para o hero e qualquer fundo escuro. Sobre fundo
   claro ele fica branco no branco — 1,03:1, invisível. Use o par escuro
   abaixo em toda seção de fundo claro. */
.botao--contorno {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.botao--contorno:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* Contorno escuro: o mesmo botão para fundo claro. Verde escuro sobre o fundo
   da página dá 10,4:1 — folgado no AAA. */
.botao--contorno-escuro {
  border-color: var(--verde-escuro);
  color: var(--verde-escuro);
}
.botao--contorno-escuro:hover {
  background: var(--verde-escuro);
  color: #fff;
}

/* ---------- Faixa de indicadores ----------------------------------------- */

.indicadores {
  background: var(--verde-escuro);
  color: #fff;
  padding: 44px 0;
}

.indicadores__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px 24px;
  text-align: center;
}

/* Números grandes em verde vivo sobre verde escuro: 3,5:1 — passa no AA
   para texto grande (≥ 24 px em negrito), que é o caso. */
.indicador__numero {
  display: block;
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--verde-escuro);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.indicador__rotulo {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 8px;
}

/* ---------- Seções ------------------------------------------------------- */

.secao { padding: clamp(64px, 9vw, 112px) 0; }

/* Fundo explícito para a seção que emenda em arco sobre a escura: sem ele o
   recorte do arco deixa ver a seção de baixo. Passou a ser necessário quando
   o Mercado saiu da home e o Contato virou o vizinho da Socioambiental. */
.secao--clara { background: var(--fundo); }
.secao--suave { background: var(--fundo-suave); }
.secao--escura {
  background: linear-gradient(105deg, var(--escuro-1) 0%, var(--escuro-2) 100%);
  color: rgba(255, 255, 255, 0.88);
}
.secao--escura h2, .secao--escura h3 { color: #fff; }

.secao__topo { max-width: 720px; margin-bottom: clamp(40px, 6vw, 64px); }
.secao__topo--centro { margin-left: auto; margin-right: auto; text-align: center; }
.secao__topo--centro p { margin-left: auto; margin-right: auto; }

.secao__etiqueta {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--verde-escuro);
  margin-bottom: 14px;
}
/* Na seção escura a etiqueta fica branca; o verde vivo em corpo pequeno
   não alcança contraste AA sobre o verde escuro. */
.secao--escura .secao__etiqueta { color: #fff; }
.secao__etiqueta::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--verde-vivo);
  vertical-align: middle;
  margin-right: 10px;
}

.secao__intro { font-size: 1.08rem; color: var(--texto-suave); }
.secao--escura .secao__intro { color: rgba(255, 255, 255, 0.8); }

/* ---------- O grupo -------------------------------------------------------
   A coluna de texto tem quatro parágrafos e passa de 500px; a foto sozinha
   parava em 340px e deixava um vazio branco do tamanho de um parágrafo ao
   lado da leitura. Duas fotos empilhadas fecham a altura sem esticar nem
   deformar nenhuma delas.
   ------------------------------------------------------------------------ */

.sobre {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(36px, 6vw, 72px);
  align-items: start;
}
@media (max-width: 880px) { .sobre { grid-template-columns: 1fr; } }

/* Entrada da seção: um corpo acima do normal e a cor cheia do texto. */
.sobre__lide {
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--grafite);
}
@media (max-width: 560px) { .sobre__lide { font-size: 1.05rem; } }

.sobre__midia {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.5vw, 26px);
}

.sobre__foto { margin: 0; }
.sobre__foto img {
  border-radius: var(--raio);
  width: 100%;
  height: auto;
}
.sobre__foto figcaption {
  font-size: 0.8rem;
  color: var(--texto-suave);
  margin-top: 10px;
}

/* ---------- Números da operação -------------------------------------------
   Os mesmos que a capa mostra em movimento, aqui parados. No HTML o dt vem
   antes do dd, como a especificação exige; column-reverse põe o número acima
   do rótulo sem mexer na ordem do documento.
   ------------------------------------------------------------------------ */

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px clamp(16px, 3vw, 32px);
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding: clamp(22px, 3vw, 30px) 0;
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}

.numeros__item {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.numeros dd {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--verde-escuro);
  font-variant-numeric: tabular-nums;
}

.numeros dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ---------- As três fazendas, em linha do tempo ---------------------------
   Crescimento por aquisição é cronologia, e três cartões de peso igual não
   contam isso. O trilho liga os anos; no celular a pilha já é a ordem, e a
   linha só atrapalharia — por isso ela some abaixo de 700px.
   ------------------------------------------------------------------------ */

.fazendas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: clamp(40px, 6vw, 56px) 0 0;
  padding: 46px 0 0;   /* o 0 à esquerda tira o recuo nativo do <ol> */
  list-style: none;
}

/* O trilho começa e termina sob o centro da primeira e da última coluna:
   com três colunas iguais, isso é 1/6 da largura de cada lado. */
.fazendas::before {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: linear-gradient(to right,
    rgba(110, 139, 90, 0.20),
    rgba(110, 139, 90, 0.70),
    rgba(110, 139, 90, 0.20));
}

.fazenda {
  position: relative;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px 22px;
  background: var(--cartao);
}

/* O ano sai do cartão e vira o nó da linha do tempo. */
.fazenda__ano {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--verde-escuro);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Só a Princípio tem foto — as outras duas não têm imagem equivalente. Para a
   assimetria não virar buraco, os cartões param na sua própria altura em vez
   de esticarem até a do mais alto. */
.fazendas { align-items: start; }

.fazenda__foto { margin: 14px 0 0; }
.fazenda__foto img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.fazenda h3 { margin: 2px 0 6px; font-size: 1.05rem; }
.fazenda p { font-size: 0.88rem; color: var(--texto-suave); margin: 0; }

@media (max-width: 700px) {
  .fazendas { padding-top: 0; gap: 34px; }
  .fazendas::before { display: none; }
  .fazenda { padding-top: 26px; }
  .fazenda__ano { top: -14px; left: 22px; transform: none; }
}

/* ---------- A marca -------------------------------------------------------
   Bloco curto: o símbolo nasceu de fotos aéreas da própria fazenda.
   Os chips de degradê repetem exatamente os gradientes do vetor.
   ------------------------------------------------------------------------ */

.marca-historia {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 880px) { .marca-historia { grid-template-columns: 1fr; } }

/* A prova visual: a foto aérea do pivô em máscara circular — a própria
   geometria que gerou os arcos — com o símbolo sobreposto no canto. */
.marca-comparacao {
  position: relative;
  margin: 0;
  justify-self: center;
  width: min(460px, 100%);
}

.marca-comparacao__foto {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 18px 44px rgba(90, 70, 45, 0.20);
}

.marca-comparacao__simbolo {
  position: absolute;
  right: -2%;
  bottom: 12%;
  width: clamp(96px, 30%, 150px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(36, 34, 39, 0.18);
}
.marca-comparacao__simbolo img { width: 62%; height: auto; }

.marca-comparacao__legenda {
  margin-top: 18px;
  font-size: 0.8rem;
  color: var(--texto-suave);
  text-align: center;
}

.marca-legenda {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.marca-legenda li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.95rem;
}

.marca-legenda__cor {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 3px;
}
/* Cores literais do vetor da marca, de propósito: esta bolinha ilustra o que
   o logo É, e não a paleta do site. Ela não acompanha a troca dos tokens. */
.marca-legenda__cor--arcos { background: linear-gradient(160deg, #10AB4B, #19472C); }
.marca-legenda__cor--graos { background: linear-gradient(160deg, var(--marrom), var(--marrom-escuro)); }

/* ---------- História ------------------------------------------------------ */

.geracoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: clamp(48px, 7vw, 72px);
}

.geracao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 28px 26px;
}

.geracao__papel {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde-escuro);
  margin-bottom: 8px;
}

.geracao h3 { margin-bottom: 8px; }
.geracao p { font-size: 0.93rem; color: var(--texto-suave); }

/* Linha do tempo: coluna única com régua à esquerda. Os marcos fortes
   (1982 e a sequência 2004→2008) levam o ponto em verde vivo. */
.tempo {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
  border-left: 2px solid var(--borda);
}

.tempo li {
  position: relative;
  padding: 0 0 30px 34px;
}
.tempo li:last-child { padding-bottom: 0; }

.tempo li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fundo);
  border: 2px solid var(--verde-escuro);
}
.tempo li.tempo--marco::before {
  background: var(--verde-vivo);
  border-color: var(--verde-vivo);
}

.tempo__ano {
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--verde-escuro);
  font-variant-numeric: tabular-nums;
}

.tempo p { font-size: 0.95rem; color: var(--texto-suave); margin: 4px 0 0; }

/* Destaque narrativo: de um teste a uma destilaria em quatro anos */
.tempo-destaque {
  margin: 40px 0 0;
  max-width: 760px;
  border-left: 4px solid var(--verde-vivo);
  background: var(--fundo-suave);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 22px 28px;
  font-size: 1.05rem;
  color: var(--grafite);
}

/* ---------- Produção ------------------------------------------------------ */

.frentes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.frente {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.frente:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(90, 70, 45, 0.12);
}

.frente__foto {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.frente__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Espaço de foto pendente dentro do cartão segue a mesma proporção */
.frente .espaco-imagem { aspect-ratio: 16 / 10; min-height: 0; border-radius: 0; border-width: 0 0 1px; }

.frente__corpo { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.frente__medida {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde-escuro);
}

.frente h3 { margin-bottom: 2px; }
.frente p { font-size: 0.93rem; color: var(--texto-suave); }

.frente__dados {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.frente__dados li {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--verde-escuro);
  background: var(--fundo-suave);
  border-radius: 999px;
  padding: 4px 12px;
}
/* O subscrito do CO₂ aumentaria a altura da linha e deixaria esse chip mais
   alto que os vizinhos; o line-height zerado o tira do cálculo. */
.frente__dados sub { font-size: 0.75em; line-height: 0; }

/* Selo da madeireira: único lugar onde o marrom da marca aparece como cor
   de interface — com parcimônia, como pede o manual. */
.frente__selo {
  align-self: flex-start;
  margin-top: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marrom);
  border: 1px solid rgba(105, 36, 31, 0.35);
  border-radius: 999px;
  padding: 4px 12px;
}

.nota-validacao {
  margin-top: 28px;
  font-size: 0.85rem;
  color: var(--texto-suave);
  max-width: none;
  text-align: center;
}

/* ---------- Socioambiental ------------------------------------------------ */

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px 32px;
}

.pilar { border-top: 2px solid var(--verde-vivo); padding-top: 22px; }

.pilar h3 { font-size: 1.05rem; margin-bottom: 8px; }

.pilar p { font-size: 0.93rem; color: rgba(255, 255, 255, 0.78); }

.pilar strong { color: #fff; font-weight: 700; }

/* Credencial COPAM: cargo público verificável, merece moldura própria */
.credencial {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 880px) { .credencial { grid-template-columns: 1fr; } }

.credencial__texto {
  border-left: 4px solid var(--verde-vivo);
  padding-left: 24px;
  font-size: 1.08rem;
  line-height: 1.6;
  color: #fff;
}
.credencial__texto small {
  display: block;
  margin-top: 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Contato ------------------------------------------------------- */

.contato {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(36px, 6vw, 72px);
}
@media (max-width: 880px) { .contato { grid-template-columns: 1fr; } }

.contato__lista { list-style: none; margin: 0; padding: 0; }

.contato__lista > li {
  padding: 20px 0;
  border-bottom: 1px solid var(--borda);
}
.contato__lista > li:first-child { padding-top: 0; }
.contato__lista > li:last-child { border-bottom: 0; }

.contato__rotulo {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 6px;
}

.contato__valor { font-size: 1.05rem; font-weight: 500; color: var(--grafite); }
.contato__valor a { color: var(--grafite); text-decoration: none; }
.contato__valor a:hover { color: var(--verde-escuro); }

.contato__telefones { list-style: none; margin: 0; padding: 0; }
.contato__telefones li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 2px 0;
}
.contato__telefones small { font-size: 0.78rem; color: var(--texto-suave); }

.contato__mapa {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.88rem;
  font-weight: 600;
}

/* ---------- Rodapé -------------------------------------------------------- */

.rodape {
  border-top: 1px solid var(--borda);
  background: var(--fundo-suave);
  padding: 48px 0 32px;
  font-size: 0.88rem;
  color: var(--texto-suave);
}

.rodape__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--borda);
}

.rodape__topo img { width: 72px; height: auto; }

.rodape__frentes { max-width: 420px; }

.rodape__base {
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
}

/* ---------- Marcadores de conteúdo pendente -------------------------------
   Tudo que depende de confirmação do cliente fica visualmente evidente,
   para não haver risco de aprovar a prévia sem perceber a lacuna.
   Remover classe e regras quando o dado for confirmado.
   ------------------------------------------------------------------------ */

.pendente {
  background: repeating-linear-gradient(
    45deg,
    rgba(105, 36, 31, 0.07) 0 10px,
    rgba(105, 36, 31, 0.14) 10px 20px
  );
  border: 1px dashed var(--marrom);
  border-radius: var(--raio);
  padding: 2px 8px;
  font-style: italic;
  font-size: 0.85em;
  color: inherit;
}

/* Variante curta, para marcar um dado dentro de frase corrida */
.a-confirmar {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marrom);
  border: 1px dashed var(--marrom);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
  /* sem nowrap: selos longos precisam quebrar em telas de 360 px */
}
.secao--escura .a-confirmar,
.secao--escura .pendente {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.espaco-imagem {
  background: repeating-linear-gradient(
    45deg,
    rgba(25, 71, 44, 0.05) 0 12px,
    rgba(25, 71, 44, 0.1) 12px 24px
  );
  border: 1px dashed rgba(25, 71, 44, 0.4);
  border-radius: var(--raio);
  min-height: 300px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 28px;
  color: var(--texto-suave);
  font-size: 0.85rem;
  line-height: 1.5;
}
.secao--escura .espaco-imagem {
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.04) 0 12px,
    rgba(255, 255, 255, 0.08) 12px 24px
  );
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- Carrossel ------------------------------------------------------
   CSS scroll-snap: funciona sem JavaScript (arrasto no toque e no trackpad).
   As setas e os pontos são injetados pelo js/site.js como melhoria — sem
   script, o trilho continua rolável nativamente.
   ------------------------------------------------------------------------ */

.carrossel { position: relative; }

.carrossel__trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .carrossel__trilho { scroll-behavior: auto; }
}

.carrossel__item {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.carrossel__trilho--16x10 .carrossel__item { aspect-ratio: 16 / 10; }
.carrossel__trilho--4x3  .carrossel__item { aspect-ratio: 4 / 3; }

.carrossel__item picture { display: block; width: 100%; height: 100%; }
.carrossel__trilho--16x10 .carrossel__item img,
.carrossel__trilho--4x3  .carrossel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Controles injetados por JS */
.carrossel__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 244, 233, 0.9);
  color: var(--verde-escuro);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(36, 34, 39, 0.25);
  transition: background var(--transicao), color var(--transicao);
}
.carrossel__seta:hover { background: var(--verde-vivo); color: var(--grafite); }
.carrossel__seta svg { width: 18px; height: 18px; }
.carrossel__seta--ant { left: 10px; }
.carrossel__seta--prox { right: 10px; }

.carrossel__pontos {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(36, 34, 39, 0.35);
}

.carrossel__ponto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background var(--transicao), width var(--transicao);
}
.carrossel__ponto[aria-current="true"] { background: #fff; width: 20px; }

/* ---------- Galeria "Terra e trabalho" ------------------------------------
   Trilho de altura fixa e larguras livres: cada foto mantém a proporção,
   inclusive a vertical da floresta plantada. O trilho sangra até a borda
   da tela, alinhado à esquerda com o container.
   ------------------------------------------------------------------------ */

.galeria {
  padding: clamp(64px, 9vw, 112px) 0 clamp(72px, 10vw, 128px);
  background: var(--fundo);
  overflow: hidden;
}






/* ---------- Vídeo do plantio ----------------------------------------------
   O arquivo é 832×464: contido ele fica nítido; esticado em tela cheia
   borraria. Toca sem som, em loop, só quando visível (via JS) e nunca
   automaticamente em tela pequena ou com reduced-motion.
   ------------------------------------------------------------------------ */

.video-bloco {
  margin: clamp(44px, 7vw, 72px) auto 0;
  max-width: 832px;
}

.video-bloco video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--raio);
  background: #000;
  box-shadow: 0 14px 34px rgba(90, 70, 45, 0.14);
}

.video-bloco figcaption {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--texto-suave);
  text-align: center;
}

/* ---------- Clima e mercado -----------------------------------------------
   Preenchido por js/site.js. Sem JavaScript os cartões ficam com o aviso
   do <noscript>; com falha de rede, a mensagem de indisponibilidade.
   ------------------------------------------------------------------------ */

.painel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 880px) { .painel { grid-template-columns: 1fr; } }

/* Três colunas para os preços de referência. O mínimo de 260px impede que a
   coluna fique estreita demais para os valores — abaixo disso o navegador
   reduz para duas e depois para uma sozinho. */
.painel--tres {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 8px;
  /* O .painel usa align-items:start, que encolhe cada cartão até o próprio
     conteúdo. Aqui os três precisam terminar na mesma linha, então esticam. */
  align-items: stretch;
}
.painel--tres .painel__cartao {
  display: flex;
  flex-direction: column;
}
/* A fonte desce para o rodapé do cartão. Sem isto, o cartão mais curto ficaria
   com a citação no meio e um vão branco embaixo — o que denuncia o
   alinhamento forçado em vez de escondê-lo. */
.painel--tres .painel__fonte { margin-top: auto; padding-top: 14px; }

/* O cartão do tempo passou a trazer condições atuais, seis medidas do dia e a
   previsão de 16 dias — não cabe em meia largura. */
.painel--empilhado { grid-template-columns: 1fr; }

/* Separa o que é cotação ao vivo do que é referência publicada de tempos em
   tempos. Sem essa divisão os cinco cartões pareciam ter todos a mesma
   frescura, e três deles não têm. */
.painel__grupo {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde-escuro);
  margin: 34px 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.painel__grupo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borda);
}
.painel__grupo:first-of-type { margin-top: 0; }

.painel__cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: clamp(22px, 3vw, 32px);
}

.painel__titulo {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-escuro);
  margin-bottom: 18px;
}

.painel__fonte {
  margin: 18px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--texto-suave);
  max-width: none;
}

.painel__aviso {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--texto-suave);
  margin: 0;
}

/* ---- Tempo agora ---- */

.clima__agora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 4vw, 44px);
  padding: 18px 20px;
  margin-bottom: 20px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

/* Mesma pintura do cartão de dia, mais suave: aqui o bloco é largo e o
   gradiente atravessa na horizontal em vez de na diagonal. */
.clima__agora--sol        { background: linear-gradient(100deg, #FFF6E6 0%, #FFE0B4 100%); }
.clima__agora--solNuvem   { background: linear-gradient(100deg, #FDF6EC 0%, #E2ECF5 100%); }
.clima__agora--nuvem      { background: linear-gradient(100deg, #F2F2EF 0%, #DCDFE2 100%); }
.clima__agora--neblina    { background: linear-gradient(100deg, #EFEFEA 0%, #D8DBD5 100%); }
.clima__agora--chuva      { background: linear-gradient(100deg, #E7EFF5 0%, #C2D5E3 100%); }
.clima__agora--tempestade { background: linear-gradient(100deg, #DCE1E8 0%, #B1BAC6 100%); }

.clima__agora[class*="clima__agora--"] .clima__agora-desc,
.clima__agora[class*="clima__agora--"] .clima__medidas dt,
.clima__agora[class*="clima__agora--"] .clima__medidas dd { color: #463C30; }
.clima__agora[class*="clima__agora--"] .clima__agora-icone { color: #3D342A; }

.clima__agora-topo { display: flex; align-items: center; gap: 14px; }
.clima__agora-icone { width: 54px; height: 54px; flex: none; color: var(--verde-vivo); }
.clima__agora-icone svg { width: 100%; height: 100%; display: block; }
.clima__agora-temp {
  display: block;
  font-size: clamp(2.1rem, 5vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.clima__agora-desc { font-size: 0.9rem; color: var(--texto-suave); }

/* Medidas em linha: cada uma é um par rótulo/valor. auto-fit com mínimo baixo
   deixa a fileira acomodar de 6 medidas no desktop a 2 no celular sem
   media query. */
.clima__medidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 12px 18px;
  margin: 0;
  flex: 1 1 380px;
}
.clima__medidas--dia {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--borda);
}
.clima__medida dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.clima__medida dd {
  margin: 2px 0 0;
  font-size: 1.02rem;
  font-weight: 600;
}
.clima__medida dd span { font-size: 0.76rem; font-weight: 500; color: var(--texto-suave); }

/* ---- Previsão dos 16 dias ---- */

/* Os 16 dias em duas linhas de 8. A rolagem horizontal que havia aqui antes
   estourava a largura da página e escondia metade da previsão atrás de um
   gesto que ninguém adivinha. Com `1fr` as colunas dividem exatamente o
   espaço disponível — nunca sobra nem falta. */
.clima__grade {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  text-align: center;
}
/* Sempre um número de colunas que divide 16, para não deixar a última linha
   com um cartão solto. */
@media (max-width: 1080px) { .clima__grade { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .clima__grade { grid-template-columns: repeat(2, 1fr); } }

.clima__dia {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 13px 6px 12px;
  display: grid;
  gap: 5px;
  justify-items: center;
  align-content: start;
}

/* ---- A condição pintada no cartão -----------------------------------------
   O cartão de dia tem ~125px de largura e sete linhas de texto: foto de fundo
   aqui exigiria um véu que apagaria a própria foto. O gradiente diz a mesma
   coisa sem custo de requisição e sem disputar espaço com o texto — e o ícone
   de traço continua onde estava, porque cor sozinha não é informação
   acessível: quem não distingue as cores lê o desenho e a descrição.

   Um par por condição, na ordem das seis que o traduzirWMO() distingue.
   Todos claros o bastante para manter o texto escuro: o pior par medido é o
   secundário sobre a ponta escura da tempestade, 4,8:1. */
.clima__dia--sol        { background: linear-gradient(160deg, #FFF3DC 0%, #FFD79B 100%); }
.clima__dia--solNuvem   { background: linear-gradient(160deg, #FDF4E6 0%, #D9E6F2 100%); }
.clima__dia--nuvem      { background: linear-gradient(160deg, #EFEFEC 0%, #D3D7DA 100%); }
.clima__dia--neblina    { background: linear-gradient(160deg, #ECECE6 0%, #CFD3CC 100%); }
.clima__dia--chuva      { background: linear-gradient(160deg, #DFE9F1 0%, #B4CADB 100%); }
.clima__dia--tempestade { background: linear-gradient(160deg, #D4DAE3 0%, #A3AEBC 100%); }

/* Sobre o gradiente, o texto secundário do site (#665847) cairia a 3,1:1 na
   tempestade. Dentro do cartão pintado ele escurece — 4,8:1 no pior caso. */
.clima__dia[class*="clima__dia--"] .clima__desc,
.clima__dia[class*="clima__dia--"] .clima__chuva,
.clima__dia[class*="clima__dia--"] .clima__extra,
.clima__dia[class*="clima__dia--"] .clima__nome,
.clima__dia[class*="clima__dia--"] .clima__temp small { color: #463C30; }

/* O ícone acompanha: sálvia sobre o gradiente perderia definição. */
.clima__dia[class*="clima__dia--"] .clima__icone { color: #3D342A; }

.clima__nome {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.clima__icone { color: var(--verde-escuro); line-height: 0; }
.clima__icone svg { width: 40px; height: 40px; }

.clima__temp { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.clima__temp small { font-weight: 500; color: var(--texto-suave); font-size: 0.85em; }

.clima__desc { font-size: 0.78rem; color: var(--texto-suave); line-height: 1.35; }
.clima__chuva { font-size: 0.75rem; color: var(--verde-escuro); font-weight: 600; }
/* Dizer "sem chuva" em vez de omitir a linha: a ausência do dado e a previsão
   de tempo seco pareciam a mesma coisa, e não são. */
.clima__chuva--seco { color: var(--texto-suave); font-weight: 500; }

.clima__extra {
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--texto-suave);
  white-space: nowrap;
}

.mercado__tabela { width: 100%; border-collapse: collapse; }
.mercado__tabela td { padding: 10px 0; border-bottom: 1px solid var(--borda); vertical-align: baseline; }
.mercado__tabela tr:last-child td { border-bottom: 0; }

.mercado__produto { font-size: 0.92rem; font-weight: 600; }
.mercado__produto small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--texto-suave); }

.mercado__valor {
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 1rem;
}
.mercado__valor small { font-weight: 500; font-size: 0.72rem; color: var(--texto-suave); }

.mercado__atualizado { margin: 12px 0 0; font-size: 0.78rem; color: var(--texto-suave); }

/* ---------- Revelar ao rolar ----------------------------------------------
   A classe `anima` só entra no <html> via js/site.js quando há suporte a
   IntersectionObserver e o usuário não pediu menos movimento. Sem ela,
   nada fica oculto — o site inteiro funciona com JS desligado.
   ------------------------------------------------------------------------ */

html.anima .revelar {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s ease var(--atraso, 0s),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--atraso, 0s);
}

html.anima .revelar.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.anima .revelar { opacity: 1; transform: none; transition: none; }
}

/* ---------- Dois vídeos lado a lado (Produção) -----------------------------
   O do plantio é paisagem (832×464) e o dos cavalos é vertical (960×1706):
   alturas casadas no desktop, empilhados e contidos no celular. Nenhum dos
   dois estica além da resolução nativa.
   ------------------------------------------------------------------------ */

.videos {
  margin: clamp(44px, 7vw, 72px) auto 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 32px);
  flex-wrap: wrap;
}

.video-bloco { margin: 0; }
.video-bloco--paisagem { flex: 1 1 480px; max-width: 700px; }
.video-bloco--vertical { flex: 0 1 260px; max-width: 300px; }

/* ---------- Fauna e vereda (Socioambiental) --------------------------------
   Evidência, não decoração: tiles de altura igual, proporção livre,
   legenda sóbria. O vídeo do tamanduá só baixa se o usuário der o play
   (preload="none" + pôster).
   ------------------------------------------------------------------------ */

.fauna { margin-top: clamp(48px, 7vw, 80px); }

.fauna__topo { max-width: 640px; margin-bottom: clamp(24px, 4vw, 40px); }
.fauna__topo p { color: rgba(255, 255, 255, 0.8); font-size: 0.97rem; }

/* Galeria justificada por construção: as colunas do grid são proporcionais
   à razão de aspecto de cada registro (3:4, 4:3, 3:4 e 464:832) — com
   largura 100% e aspect-ratio fixado, as quatro alturas saem idênticas. */
.fauna__grade {
  display: grid;
  grid-template-columns: 0.75fr 1.333fr 0.75fr 0.558fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: start;
}

.fauna__item { margin: 0; min-width: 0; }

.fauna__item img,
.fauna__item video {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--raio);
  display: block;
  background: rgba(0, 0, 0, 0.3);
}
.fauna__item:nth-child(1) img { aspect-ratio: 3 / 4; }
.fauna__item:nth-child(2) img { aspect-ratio: 4 / 3; }
.fauna__item:nth-child(3) img { aspect-ratio: 3 / 4; }

.fauna__item figcaption {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* Mobile: a paisagem das emas atravessa as duas colunas; as duas verticais
   dividem uma linha; o vídeo fica contido e centrado. */
@media (max-width: 700px) {
  .fauna__grade { grid-template-columns: 1fr 1fr; }
  /* As emas (paisagem) abrem a grade em largura cheia; sem o order, elas
     separariam as duas verticais e sobrariam meias-colunas vazias. */
  .fauna__item:nth-child(2) { grid-column: 1 / -1; order: -1; }
  .fauna__item:nth-child(4) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(260px, 72%);
  }
  .fauna__item:nth-child(4) figcaption { text-align: center; }
}

/* Proporção explícita dos vídeos: com preload="none" o navegador não sabe o
   tamanho real até o play e usaria 300×150 — o que quebrava o layout da
   fauna. Também evita salto de layout (CLS) nos demais. */
.video-bloco--paisagem video { aspect-ratio: 832 / 464; }
.video-bloco--vertical video { aspect-ratio: 960 / 1706; }
.fauna__item--video video { aspect-ratio: 464 / 832; }

/* ==========================================================================
   PÁGINAS INTERNAS (historia.html)
   Sem capa de imagem: o topo é tipográfico, e o respiro superior compensa
   a ausência do hero, que na home separa o cabeçalho do conteúdo.
   ========================================================================== */

/* .pagina-topo, .pagina-titulo e .pagina-resumo foram removidos em 07/08/2026:
   a abertura da História virou capa com foto (.hero--interna) e nenhum HTML
   os usava mais. */

.volta-home { margin-top: clamp(40px, 6vw, 64px); }


/* ==========================================================================
   FAIXA CONTÍNUA DA GALERIA
   Rolagem infinita, sem controles: as fotos atravessam a tela sozinhas.
   O trilho tem o conteúdo duplicado e a animação corre até -50% — no
   instante em que a primeira cópia termina, a segunda está exatamente na
   posição inicial, e o salto de volta a 0 é invisível.
   Classe .faixa (e não .carrossel) de propósito: o JS controla .carrossel
   com setas, pontos e teclado, e não deve tocar aqui.
   ========================================================================== */

.faixa {
  overflow: hidden;
  padding: clamp(24px, 4vw, 40px) 0;
  /* Esfumaça as bordas: as fotos entram e saem em vez de aparecerem cortadas. */
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.faixa__trilho {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  width: max-content;
  animation: faixa-desliza 72s linear infinite;
}

/* Pausa quando o visitante quer olhar: passar o mouse ou chegar pelo teclado. */
.faixa:hover .faixa__trilho,
.faixa:focus-within .faixa__trilho { animation-play-state: paused; }

@keyframes faixa-desliza {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.faixa__item {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
  width: clamp(260px, 34vw, 460px);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--verde-escuro);
}

.faixa__item img {
  display: block;
  width: 100%;
  height: clamp(200px, 26vw, 320px);
  object-fit: cover;
}

/* A legenda vive dentro da imagem, sobre um véu que escurece só a base —
   texto branco sobre foto clara seria ilegível sem ele. */
.faixa__legenda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 18px 16px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #fff;
  background: linear-gradient(to top,
              rgba(10, 26, 17, 0.88) 0%,
              rgba(10, 26, 17, 0.62) 45%,
              rgba(10, 26, 17, 0) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Sem movimento: a faixa vira uma tira que o visitante rola no dedo ou na
   roda. Parar a animação e deixar tudo estático esconderia metade das fotos. */
@media (prefers-reduced-motion: reduce) {
  .faixa { overflow-x: auto; scrollbar-width: thin; }
  .faixa__trilho { animation: none; }
}

/* ==========================================================================
   COTAÇÃO ESTÁTICA (mogno africano)
   Os outros dois cartões do painel são preenchidos por JavaScript; este vem
   pronto do HTML, porque a fonte é um PDF quinzenal e não uma API. O visual
   é o mesmo para o visitante não precisar saber dessa diferença — a data no
   rodapé do cartão é que diz de quando o número é.
   ========================================================================== */

.cotacao { margin: 4px 0 0; }

.cotacao__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--borda);
}
.cotacao__linha:last-child { border-bottom: 0; }

.cotacao__linha dt {
  font-size: 0.9rem;
  color: var(--texto-suave);
}

.cotacao__linha dd {
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cotacao__linha dd strong {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--verde-escuro);
}
.cotacao__linha dd span {
  font-size: 0.82rem;
  color: var(--texto-suave);
  margin-left: 2px;
}

.cotacao__nota {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--texto-suave);
}

/* ==========================================================================
   BOTÃO DO WHATSAPP
   Verde do próprio WhatsApp em vez do verde da marca: aqui o reconhecimento
   instantâneo vale mais que a coerência de paleta — e os dois verdes são
   próximos o bastante para não brigar. O ícone é SVG inline; carregar o
   script oficial do WhatsApp só para desenhar um botão traria rastreamento
   de terceiro para dentro do site.
   ========================================================================== */

.botao-whats {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 13px 22px;
  border-radius: 999px;
  background: #25D366;
  color: #0B2016;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.botao-whats:hover,
.botao-whats:focus-visible {
  background: #1EBE5A;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.32);
  color: #0B2016;
}

.botao-whats__icone {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .botao-whats { transition: none; }
  .botao-whats:hover, .botao-whats:focus-visible { transform: none; }
}