/* ==========================================================================
   CENEAGRO · site institucional · v2 "editorial agro-tech"
   Folha única de todo o site. Herda as decisões de tokens/tokens.css; aqui
   só o que é da web (escala fluida, layout de página, estados).

   A peça de rede é canvas fixo de 1080 px; a página é responsiva, por isso
   a escala tipográfica vira clamp() em vez dos px absolutos dos tokens.
   ========================================================================== */

@font-face { font-family:"Big Shoulders Display"; src:url(fontes/big-shoulders-display-800.woff2) format("woff2");
             font-weight:800; font-display:swap; }
@font-face { font-family:"IBM Plex Sans"; src:url(fontes/ibm-plex-sans-400.woff2) format("woff2");
             font-weight:400; font-display:swap; }
@font-face { font-family:"IBM Plex Sans"; src:url(fontes/ibm-plex-sans-600.woff2) format("woff2");
             font-weight:600; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url(fontes/ibm-plex-mono-500.woff2) format("woff2");
             font-weight:500; font-display:swap; }

:root{
  /* Cores medidas pixel a pixel na logo original (guidelines §3).
     Não são aproximações e não se trocam. */
  --355c:#00843D; --folha:#6FB636; --limao:#B6D427; --ouro:#E4B912;
  --estufa:#0A2117; --verde-fundo:#005C2B;
  --papel:#F2F4EE; --papel-2:#E9EDE4; --tinta:#0B1410;
  /* --tinta-3 era #78887C e dava 3,15:1 no papel-2, abaixo do 4,5:1 da WCAG AA.
     Não é detalhe de rodapé: é a cor do CABEÇALHO DAS TABELAS (thead th), das
     legendas e das notas, ou seja, do dado técnico, que é a tese do site.
     #5A6B61 mede 4,77:1 no papel-2 e 5,11:1 no papel. Não é cor de marca: as
     quatro medidas na logo estão acima e continuam intocadas. Sobre fundo
     escuro ninguém usa este token (há `.escuro` para tudo que o consome). */
  --tinta-2:#4A5A4F; --tinta-3:#5A6B61; --fio:#D7DFD2;
  --alerta:#C0392B; --alerta-fundo:#FDEEEC;
  --claro:#E8EFE9; --claro-2:#8FA593; --claro-3:#BCCCC0;

  --disp:"Big Shoulders Display","Arial Narrow",sans-serif;
  --corpo:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --dado:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --margem:clamp(1.25rem,5vw,6rem);
  --largura:1440px;
  --texto-largura:68ch;
  --filete:4px;
  --raio:0;                      /* a v2 não tem canto arredondado */
  --dur:160ms; --ease:cubic-bezier(.16,1,.3,1);
  --bloco:clamp(3.5rem,9vh,7rem);   /* respiro vertical entre seções */
}
@media (prefers-reduced-motion:reduce){ :root{ --dur:0ms; } }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--papel); color:var(--tinta);
  font-family:var(--corpo); font-size:clamp(1rem,.96rem+.2vw,1.125rem);
  line-height:1.52; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

.faixa{ padding-inline:var(--margem); }
.limite{ max-width:var(--largura); margin-inline:auto; }
.escuro{ background:var(--estufa); color:var(--claro); }

/* Link de pulo: primeiro foco da página, invisível até receber foco. */
.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ouro); color:var(--estufa); padding:.75rem 1.25rem;
  font-family:var(--dado); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
}
.pular:focus{ left:0; }

/* Título que existe para o leitor de tela e não para o olho. Serve quando o
   bloco é óbvio na diagramação mas não tem cabeçalho no HTML, quem navega por
   títulos cai num h3 solto e não sabe do que é a lista. Não usar `display:none`
   nem `visibility:hidden`: os dois tiram o elemento da leitura, que é o oposto
   do que se quer aqui. */
.so-leitor{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ==========================================================================
   1. TIPOGRAFIA
   ========================================================================== */
h1,h2,h3,h4,.numero{
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  line-height:.98;          /* nunca abaixo de .96: em caixa alta condensada
                               o til de Ã/Õ invade a linha de cima */
  letter-spacing:.005em;
}
h1{ font-size:clamp(2.5rem,7vw,6rem); line-height:.94; }
h1.grande{ font-size:clamp(2.75rem,8.5vw,7.5rem); line-height:.92; }
h2{ font-size:clamp(1.9rem,5vw,4rem); }
h3{ font-size:clamp(1.35rem,2.5vw,1.95rem); }
h4{ font-size:clamp(1.05rem,1.6vw,1.25rem); }
em{ font-style:normal; color:var(--limao); }   /* UMA palavra por título. só uma. */
.escuro h1,.escuro h2,.escuro h3{ color:#fff; }

.rotulo{
  font-family:var(--dado); font-weight:500;
  font-size:clamp(.68rem,.9vw,.8rem);
  letter-spacing:.16em; text-transform:uppercase;
}
.rotulo-marca{ color:var(--355c); display:block; margin-bottom:.9rem; }
.escuro .rotulo-marca{ color:var(--limao); }

/* Número de ficha técnica sempre tabular: kg/ha, VC e germinação precisam
   alinhar em coluna para o produtor comparar linha a linha. */
.numero,.num{ font-variant-numeric:tabular-nums lining-nums; }

p{ max-width:var(--texto-largura); }
.lide{ font-size:clamp(1.05rem,1.55vw,1.3rem); color:var(--tinta-2); max-width:58ch; }
.escuro .lide{ color:var(--claro-3); }
.lide strong{ color:var(--tinta); font-weight:600; }
.escuro .lide strong{ color:#fff; }

a{ color:#00713A; }
.escuro a{ color:var(--limao); }

.regua{ height:var(--filete); background:var(--ouro); width:min(180px,40vw); }

/* Marcador de dado regulado pendente. É PARA aparecer: peça com [FALTA]
   visível não publica (guidelines §3, regra 4). */
.falta{
  font-family:var(--dado); font-size:.78em; font-weight:500;
  color:var(--alerta); background:var(--alerta-fundo);
  border:1px solid currentColor; padding:.1em .45em;
  letter-spacing:.02em; text-transform:none;
  /* Já foi `white-space:nowrap`, para o marcador não partir no meio. Só que os
     textos longos ("[FALTA: prazo de guarda do receituário, conferir com a
     Ceneagro]") medem 609px: no celular estouravam 258px além da tela e, como
     o `body` tem `overflow-x:hidden`, ficavam CORTADOS e ilegíveis, sem barra
     de rolagem para alcançar. Marcador que não se lê não cumpre a
     função de barrar a publicação. Agora quebra; o `clone` fecha a borda da
     tarja em cada linha, senão ela abre de um lado e não fecha do outro. */
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.escuro .falta{ background:rgba(192,57,43,.16); color:#F09A90; }

/* Dado de demonstração: número plausível, ainda NÃO confirmado pelo cliente.
   Diferente de [FALTA], aqui existe um valor, ele é que não vale. */
.demo{ border-bottom:2px dotted var(--ouro); cursor:help; }

/* ==========================================================================
   2. AVISO DE DEMONSTRAÇÃO, sai quando os dados reais entrarem
   ========================================================================== */
.demo-aviso{
  background:var(--ouro); color:var(--estufa);
  font-family:var(--dado); font-size:.76rem; letter-spacing:.06em;
  padding:.55rem var(--margem); text-align:center;
}
.demo-aviso b{ font-weight:500; text-transform:uppercase; letter-spacing:.14em; }

/* ==========================================================================
   3. TOPO, fixo porque o telefone é o produto (COMPETIDORES §4.3)
   ========================================================================== */
.topo{
  position:sticky; top:0; z-index:30;
  background:rgba(10,33,23,.95); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.topo-int{
  display:flex; align-items:center; gap:1rem clamp(1rem,2.5vw,2.5rem);
  padding-block:.8rem; flex-wrap:wrap;
}
.marca{ height:clamp(32px,3.4vw,44px); width:auto; flex:none; align-self:center; display:block; }
.topo nav{ display:flex; gap:clamp(.75rem,1.8vw,1.75rem); flex-wrap:wrap;
           align-items:center; margin-inline-start:auto; }
.topo nav a{
  font-family:var(--dado); font-size:.74rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--claro-2); text-decoration:none;
  padding-block:.3rem; border-bottom:2px solid transparent;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.topo nav a:hover,.topo nav a:focus-visible{ color:#fff; border-bottom-color:var(--ouro); }
.topo nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--ouro); }

/* No celular o cabeçalho quebrava em três linhas e ficava com 202 px, 25% da
   tela, grudados, em toda página. O público abre isso no telefone dentro da
   lavoura; um quarto do visor não pode ser menu.

   Logo e telefone ficam na primeira linha (o telefone É o produto, §3 acima);
   o menu vira uma tira de uma linha só que rola de lado. Rolagem horizontal em
   menu é ruim quando esconde o que existe, por isso a máscara em degradê na
   borda direita, que mostra que continua. */
@media (max-width:760px){
  /* Posição explícita: com auto-placement o `nav` ocupa a linha 2 inteira e
     empurra o telefone para uma terceira linha, esticado. */
  .topo-int{ display:grid; grid-template-columns:1fr auto; gap:.5rem .75rem;
             padding-block:.6rem; }
  .topo-int > a:first-child{ grid-area:1 / 1; }
  .fone{ grid-area:1 / 2; padding:.45rem .8rem; font-size:.78rem; }
  .topo nav{ grid-area:2 / 1 / 3 / 3; margin-inline-start:0;
             flex-wrap:nowrap; overflow-x:auto; gap:1.1rem;
             /* O respiro no fim tira o último item de baixo do degradê: sem ele,
                "Contato", que é o último, nasce meio apagado justamente na
                página em que está ativo. */
             padding-inline-end:2.5rem;
             scrollbar-width:none; -webkit-overflow-scrolling:touch;
             -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
                     mask-image:linear-gradient(90deg,#000 88%,transparent); }
  .topo nav::-webkit-scrollbar{ display:none; }
  .topo nav a{ white-space:nowrap; }
}

.fone{
  display:inline-flex; align-items:center; gap:.5rem; flex:none;
  font-family:var(--dado); font-size:.82rem; letter-spacing:.05em;
  color:var(--estufa); background:var(--ouro); text-decoration:none;
  padding:.55rem .95rem; font-variant-numeric:tabular-nums;
  border:2px solid var(--ouro);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fone:hover,.fone:focus-visible{ background:transparent; color:var(--ouro); }

/* ==========================================================================
   4. CAPA E CABEÇALHO DE PÁGINA
   ========================================================================== */
.capa{ position:relative; overflow:hidden; }
.capa canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.capa-int{ position:relative; z-index:1; padding-block:clamp(3rem,10vh,7rem) clamp(2.5rem,7vh,5rem);
           display:grid; gap:clamp(1.5rem,3.5vh,2.5rem); }
.capa h1{ max-width:16ch; }

/* Cabeçalho das páginas internas: mesma gramática, metade da altura. */
.cabeca{ padding-block:clamp(2.5rem,7vh,4.5rem) clamp(2rem,5vh,3.5rem); }
.cabeca h1{ max-width:18ch; }

.migalha{ font-family:var(--dado); font-size:.72rem; letter-spacing:.12em;
          text-transform:uppercase; color:var(--claro-2); margin-bottom:1.25rem; }
.migalha a{ color:var(--claro-2); text-decoration:none; }
.migalha a:hover{ color:var(--ouro); }
.migalha span{ color:var(--ouro); }

/* Placar de números da capa */
.placar{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
         gap:1px; background:rgba(255,255,255,.14);
         border:1px solid rgba(255,255,255,.14); margin-top:.5rem; }
.placar div{ background:var(--estufa); padding:1.2rem 1.3rem; }
.placar .numero{ font-size:clamp(2.4rem,4.6vw,3.5rem); color:var(--ouro);
                 display:block; line-height:.85; }
.placar .numero .falta{ font-size:1rem; }   /* o marcador não vira o assunto da capa */
.placar .rotulo{ display:block; margin-top:.55rem; color:var(--claro-2); }

/* ==========================================================================
   5. SEÇÕES DE CONTEÚDO
   ========================================================================== */
.secao{ padding-block:var(--bloco); }
.secao > .limite > header{ max-width:40ch; margin-bottom:clamp(1.75rem,4.5vh,3rem); }
/* A medida de 40ch existe para o texto do cabeçalho de seção continuar legível.
   Quando o h2 é DISPLAY e não texto, como no
   "C · E · N · E · A · G · R · O", ela vira uma cerca: a fonte chega a 64px no desktop e as 8 letras mais os 7 pontos
   passam de 500px, então quebrava em "C·E·N·E·A·G·" / "R·O", com o ponto
   pendurado no fim da linha. A medida volta no <p>, que é onde ela serve. */
.secao > .limite > header.livre{ max-width:none; }
/* Sem `white-space:nowrap` de propósito: liberar a medida acima já mantém as 8
   letras numa linha só de 320px a 1600px. O nowrap resolvia igual, mas num visor
   impossível (280px) ele CORTAVA o "O" em vez de quebrar, e o body tem
   overflow-x:hidden, então o corte seria silencioso. Quebrar feio é preferível a
   sumir com a última letra do nome da empresa. */
.secao header p{ margin-top:1rem; color:var(--tinta-2); }
.escuro.secao header p{ color:var(--claro-3); }

/* duas colunas: texto corrido + coluna lateral de dados */
.duas{ display:grid; gap:clamp(1.75rem,4vw,3.5rem); }
/* Item de grid nasce com `min-width:auto` e se recusa a encolher abaixo do
   min-content do que tem dentro. Com o `min-width` da tabela (ver §9) isso dava
   uma coluna de 372px onde cabiam 335, a página de insumos vazava 17px no
   celular. Acima de 900px o `minmax(0,…)` já resolvia; faltava embaixo. */
.duas > *{ min-width:0; }
@media (min-width:900px){ .duas{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); } }

.prosa h3{ margin-top:2rem; margin-bottom:.75rem; }
.prosa p + p{ margin-top:1rem; }
.prosa ul{ margin:1rem 0 0 1.1rem; }
.prosa li{ margin-bottom:.5rem; max-width:var(--texto-largura); }

/* ==========================================================================
   6. PASSOS NUMERADOS
   ========================================================================== */
.passos{ list-style:none; display:grid; gap:1px; background:var(--fio);
         border-block:1px solid var(--fio); }
@media (min-width:820px){ .passos{ grid-template-columns:repeat(3,1fr); } }
.passos.quatro{ grid-template-columns:repeat(2,1fr); }
@media (min-width:1100px){ .passos.quatro{ grid-template-columns:repeat(4,1fr); } }
.passo{ background:var(--papel); padding:clamp(1.4rem,3vw,2.4rem) clamp(1.2rem,2.4vw,1.9rem); }
.escuro .passos{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.14); }
.escuro .passo{ background:var(--estufa); }
.passo .numero{ font-size:clamp(2.6rem,4.6vw,4rem); color:var(--ouro);
                line-height:.8; display:block; margin-bottom:.9rem; }
.passo h3{ margin-bottom:.7rem; }
.passo p{ color:var(--tinta-2); font-size:.97rem; }
.escuro .passo p{ color:var(--claro-3); }

/* ==========================================================================
   7. LISTA EDITORIAL DE LINHAS / PRODUTOS
   ========================================================================== */
.linha{ display:grid; gap:.7rem 2.4rem; padding-block:clamp(1.5rem,3.5vh,2.5rem);
        border-top:1px solid var(--fio); align-items:start; }
@media (min-width:900px){
  .linha{ grid-template-columns:clamp(3.5rem,6vw,6rem) minmax(0,22ch) minmax(0,1fr); }
}
.linha:last-of-type{ border-bottom:1px solid var(--fio); }
.linha .numero{ font-size:clamp(1.9rem,3.2vw,2.9rem); color:var(--fio); line-height:.8;
                transition:color var(--dur) var(--ease); }
.linha:hover .numero{ color:var(--ouro); }
.linha p{ color:var(--tinta-2); }
.linha .marcas{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:.85rem 0 0; }
.linha .marcas li{ font-family:var(--dado); font-size:.72rem; letter-spacing:.08em;
                   text-transform:uppercase; border:1px solid var(--fio);
                   padding:.26rem .58rem; color:var(--tinta-2); }
.linha .mais{ display:inline-block; margin-top:1rem; font-family:var(--dado);
              font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
              color:#00713A; text-decoration:none; border-bottom:2px solid var(--ouro);
              padding-bottom:.15rem; }
.linha .mais:hover{ color:var(--tinta); }

/* ==========================================================================
   8. TABELA TÉCNICA, o diferencial. COMPETIDORES §4.1: sete sites do
      setor, zero número publicado.
   ========================================================================== */
.rolagem{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; min-width:640px; }
/* Tabela dentro de coluna estreita não pode herdar o min-width da tabela larga:
   ela cabe em menos e, com 640px fixos, ficava cortada na borda da coluna. */
.duas table{ min-width:min(420px,100%); }
caption{ text-align:left; font-family:var(--dado); font-size:.73rem; letter-spacing:.14em;
         text-transform:uppercase; color:var(--tinta-3); padding-bottom:.85rem; }
.escuro caption{ color:var(--claro-2); }
th,td{ padding:.8rem 1rem; text-align:left; border-bottom:1px solid var(--fio); }
.escuro th,.escuro td{ border-bottom-color:rgba(255,255,255,.13); }
thead th{ font-family:var(--dado); font-weight:500; font-size:.71rem; letter-spacing:.12em;
          text-transform:uppercase; color:var(--tinta-3);
          border-bottom:var(--filete) solid var(--ouro); }
.escuro thead th{ color:var(--claro-2); }
td.num{ font-family:var(--dado); font-variant-numeric:tabular-nums lining-nums; text-align:right; }

/* Alinhar número à direita serve para COMPARAR coluna com coluna, kg/ha de uma
   espécie contra a outra. Em tabela de duas colunas (rótulo → valor) não há o
   que comparar, e o CNPJ sozinho lá na borda direita parece erro de layout.
   Tabela sem `thead` é justamente a de ficha cadastral. */
table:not(:has(thead)) td.num{ text-align:left; }
tbody th{ font-weight:600; }
.escuro tbody th{ color:#fff; }
tbody tr:hover{ background:rgba(0,0,0,.03); }
.escuro tbody tr:hover{ background:rgba(255,255,255,.04); }
.nota{ margin-top:1.15rem; font-size:.87rem; color:var(--tinta-3); max-width:62ch; }
.escuro .nota{ color:var(--claro-2); }

/* ==========================================================================
   9. FOTO, toda foto entra em duotone, sem exceção (guidelines §6)
   ========================================================================== */
.foto{ position:relative; overflow:hidden; background:var(--fio);
       display:grid; place-items:center; border:1px solid var(--fio); }
.foto img{ width:100%; height:100%; object-fit:cover; display:block;
           filter:grayscale(1) contrast(1.06); mix-blend-mode:luminosity; }
.foto::after{ content:""; position:absolute; inset:0;
              background:linear-gradient(180deg,#072016,#C6DA9E);
              mix-blend-mode:color; pointer-events:none; }
.foto .falta,.foto figcaption{ position:relative; z-index:2; }
.foto.retrato{ aspect-ratio:4/5; }
.foto.larga{ aspect-ratio:16/9; }

/* O mapa NÃO é `.foto`: o duotone joga grayscale + blend por cima, e o mapa
   codifica os anéis por cor. Passar ele pelo tratamento de foto apagaria a
   única informação que ele carrega. */
.mapa{ margin-top:2rem; }
.mapa img{ width:100%; height:auto; display:block;
           border:1px solid var(--fio); border-radius:2px; }
.mapa figcaption{ margin-top:.7rem; font-size:.9rem; color:var(--tinta-2);
                  max-width:62ch; }

/* ==========================================================================
   10. CITAÇÃO
   ========================================================================== */
blockquote{
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1; letter-spacing:.005em;
  border-left:var(--filete) solid var(--ouro); padding-left:clamp(1rem,2vw,1.7rem);
  margin-block:1.2rem 1.6rem; max-width:22ch;
}
.assina{ font-family:var(--dado); font-size:.8rem; letter-spacing:.1em;
         text-transform:uppercase; color:var(--tinta-2); }
.escuro .assina{ color:var(--claro-2); }

/* ==========================================================================
   11. PERGUNTAS FREQUENTES, <details>, sem JS
   ========================================================================== */
.faq{ border-top:1px solid var(--fio); max-width:var(--texto-largura); }
.faq details{ border-bottom:1px solid var(--fio); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.15rem 2.5rem 1.15rem 0; position:relative;
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.05rem,1.8vw,1.35rem); line-height:1.05;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:.25rem; top:50%; transform:translateY(-50%);
  font-family:var(--dado); font-size:1.4rem; color:var(--ouro); line-height:1;
}
/* Sinal de menos (U+2212), nao travessao: aqui e glifo de interface,
   o par visual do "+" da linha de cima. */
.faq details[open] summary::after{ content:"\2212"; }
.faq details p{ padding-bottom:1.2rem; color:var(--tinta-2); }

/* ==========================================================================
   12. CIDADES E LISTAS DE ETIQUETA
   ========================================================================== */
.cidades{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.2rem; }
.cidades li{ font-family:var(--dado); font-size:.78rem; letter-spacing:.05em;
             background:var(--papel); border:1px solid var(--fio); padding:.38rem .7rem; }
.escuro .cidades li{ background:transparent; border-color:rgba(255,255,255,.2); color:var(--claro-3); }

/* ==========================================================================
   13. CHAMADA FINAL
   ========================================================================== */
.chamada{ position:relative; overflow:hidden; }
.chamada canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.chamada-int{ position:relative; z-index:1; padding-block:var(--bloco); }
/* 14ch era a medida do titulo curto ("Traga o laudo. Vamos ler junto").
   Com a frase que a revisora pediu em 28/08/2026, 14ch quebrava em SETE
   linhas de tres palavras. E era esse mesmo cap que produzia o "A"
   pendurado sozinho no fim da linha, que foi a reclamacao dela.
   30ch cabe a frase longa em tres linhas e nao muda nada nos CTAs
   curtos das outras paginas, que nem chegam nesse limite. */
.chamada h2{ max-width:30ch; }
.botoes{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
/* A cor do botão é declarada com `a.botao` de propósito. `.escuro a` tem
   especificidade (0,1,1) e vencia `.botao` (0,1,0): dentro de bloco escuro o
   texto virava limão sobre fundo ouro, ilegível, e passou despercebido
   porque o botão continuava lá, só que vazio ao olho. */
a.botao,.botao{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--dado); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.85rem 1.4rem; text-decoration:none; border:2px solid var(--ouro);
  background:var(--ouro); color:var(--estufa);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.botao:hover,a.botao:focus-visible,.botao:hover,.botao:focus-visible{
  background:transparent; color:var(--ouro); }
a.botao.vazado,.botao.vazado{ background:transparent; color:var(--ouro); }
a.botao.vazado:hover,a.botao.vazado:focus-visible,
.botao.vazado:hover,.botao.vazado:focus-visible{ background:var(--ouro); color:var(--estufa); }
/* O mesmo vale para o "saiba mais" e a trilha dentro de bloco escuro. */
.escuro a.mais{ color:var(--limao); }

/* ==========================================================================
   14. CONTATO
   ========================================================================== */
.cartao{ display:grid; gap:2rem clamp(2rem,5vw,4rem); margin-top:clamp(1.75rem,4.5vh,3rem); }
@media (min-width:760px){ .cartao{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); } }
.cartao h3{ font-size:.95rem; font-family:var(--dado); font-weight:500; letter-spacing:.14em;
            color:var(--claro-2); margin-bottom:.7rem; text-transform:uppercase; }
.cartao a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); }
.cartao a:hover,.cartao a:focus-visible{ color:var(--ouro); border-bottom-color:var(--ouro); }
.cartao address{ font-style:normal; color:var(--claro-3); }

/* Formulário */
.form{ display:grid; gap:1.1rem; max-width:38rem; margin-top:1.5rem; }
.campo{ display:grid; gap:.4rem; }
.campo label{ font-family:var(--dado); font-size:.74rem; letter-spacing:.12em;
              text-transform:uppercase; color:var(--tinta-2); }
.campo input,.campo textarea,.campo select{
  font-family:var(--corpo); font-size:1rem; padding:.75rem .85rem;
  border:1px solid var(--fio); background:#fff; color:var(--tinta); border-radius:var(--raio);
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:3px solid var(--ouro); outline-offset:1px; border-color:var(--355c);
}
.campo textarea{ min-height:8rem; resize:vertical; }
.form .aviso{ font-size:.84rem; color:var(--tinta-3); }

/* Retorno do envio. `role="status"` já anuncia no leitor de tela; a cor é para
   quem enxerga. Vermelho só no erro, mensagem de sucesso em vermelho ensina
   o olho a ignorar a faixa. */
.form [data-status]{ font-size:.92rem; color:var(--355c);
                     border-left:3px solid var(--355c); padding-left:.7rem; }
.form [data-status].ruim{ color:#A5231B; border-left-color:#A5231B; }

/* ==========================================================================
   15. RODAPÉ
   ========================================================================== */
.rodape{ background:#061410; color:var(--claro-2); padding-block:clamp(2.5rem,6vh,4rem); }
.rodape-int{ display:grid; gap:2.5rem; }
.rodape-nav{ display:grid; gap:2rem clamp(2rem,5vw,4rem); }
@media (min-width:720px){ .rodape-nav{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } }
.rodape-nav h3{ font-family:var(--dado); font-weight:500; font-size:.74rem;
                letter-spacing:.14em; text-transform:uppercase; color:var(--ouro);
                margin-bottom:.85rem; }
.rodape-nav ul{ list-style:none; display:grid; gap:.45rem; }
.rodape-nav a{ color:var(--claro-2); text-decoration:none; font-size:.92rem; }
.rodape-nav a:hover,.rodape-nav a:focus-visible{ color:#fff; }
.rodape address{ font-style:normal; font-size:.92rem; line-height:1.6; }

.legal{
  border:1px solid rgba(255,255,255,.18); border-left:var(--filete) solid var(--ouro);
  padding:1.1rem 1.3rem; font-size:.83rem; line-height:1.5; color:#B9C9BD;
}
.legal .rotulo{ color:var(--ouro); display:block; margin-bottom:.55rem; }
.legal p{ max-width:none; }
.legal p + p{ margin-top:.55rem; }

/* #4E6355 dava 2,90:1 sobre o #061410 do rodapé. É texto de conteúdo, os
   valores da casa, não ornamento; #6E8676 mede 4,78:1 e mantém o tom apagado
   que o acróstico pede. */
.acrostico{ font-family:var(--dado); font-size:.72rem; letter-spacing:.2em;
            text-transform:uppercase; color:#6E8676; }
.fim{ display:flex; flex-wrap:wrap; gap:.7rem 2rem; justify-content:space-between;
      font-family:var(--dado); font-size:.72rem; letter-spacing:.07em;
      border-top:1px solid rgba(255,255,255,.12); padding-top:1.5rem; }
/* O `a{color:#00713A}` global vazava para cá: "Política de Privacidade" saía em
   verde-escuro sobre o quase-preto do rodapé, 3,07:1, nas oito páginas. É a
   mesma armadilha do `.escuro a` × `.botao` de 15/08, cor de componente precisa
   de especificidade maior que a de contexto. `.rodape .fim a` (0,2,1) ganha do
   `a` global sem atropelar `a.botao`, que também vive no rodapé. */
.rodape .fim a{ color:var(--claro-2); }
.rodape .fim a:hover,.rodape .fim a:focus-visible{ color:#fff; }

/* ==========================================================================
   16. BARRA DE REVISÃO, não vai para produção
   ========================================================================== */
#revisao{
  position:fixed; right:12px; bottom:12px; z-index:50;
  font-family:var(--dado); font-size:.71rem; letter-spacing:.07em;
  background:var(--alerta); color:#fff; padding:.5rem .8rem; border:none; cursor:pointer;
}
body.sem-marcador .falta{ visibility:hidden; }

:focus-visible{ outline:3px solid var(--ouro); outline-offset:2px; }

@media print{
  .topo,.chamada,#revisao,.demo-aviso{ display:none; }
  body{ background:#fff; color:#000; }
}

/* =========================================================================
   UNIDADE DE MEDIDA

   Simbolo de unidade e minusculo: h, kg, ha, mm. "48H" nao existe.
   O problema e que os numeros de destaque sobem para caixa alta por
   `h1,h2,h3,h4,.numero{ text-transform:uppercase }`, la em cima, e o
   simbolo vai junto com o numero.

   Pego pela revisora do cliente em 28/08/2026, no "48 h" da capa. E o
   mesmo defeito que ela ja tinha achado no "KG/HA" da peca das
   braquiarias, agora no site.

   Uso:  <span class="numero">48 <span class="un">h</span></span>

   O !important e intencional: a regra existe para vencer o uppercase que
   vem de fora, senao nao serviria para nada.

   O site nao passa pelo revisao.js, que so conhece peca de canvas fixo,
   entao aqui a conferencia continua sendo manual.
   ========================================================================= */
.un{ text-transform:none !important; font-variant-caps:normal; }

/* =========================================================================
   QUEBRA DE TITULO

   `balance` distribui as linhas do titulo em vez de encher a primeira e
   deixar sobra na ultima. Serve para o que a revisora apontou em
   28/08/2026: em "TRAGA O LAUDO. A / GENTE LE JUNTO." o "A" ficava
   pendurado sozinho no fim da primeira linha, longe do "GENTE".

   Onde o texto nao pode contar so com isso, as palavras curtas vao
   coladas com &nbsp; no HTML.
   ========================================================================= */
h1,h2{ text-wrap:balance; }