/* ==========================================================================
   MS Gramas — sistema visual v2
   Seis movimentos: alternância de formas, protagonista por seção, fotografia
   em escala, escala tipográfica aberta, terra como estrutura, herói reaberto.
   ========================================================================== */

:root{
  /* Cor — amostrada do logotipo */
  --verde:#297335;
  --verde-escuro:#1C5426;
  --verde-fundo:#16401F;
  --verde-claro:#E4EFE5;
  --terra:#BE5734;
  --terra-escuro:#96422A;
  --terra-clara:#F6E7DF;

  /* Neutros com viés verde */
  --tinta:#1B2119;
  --tinta-media:#4A5548;
  --tinta-fraca:#78826F;
  --linha:#DCE2D6;
  --papel:#F7F8F3;
  --papel-2:#EDF0E7;
  --branco:#FFFFFF;

  --fonte-titulo:'Archivo', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-texto:'Public Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala tipográfica — contraste maior entre extremos */
  --t--2:0.78rem;
  --t--1:0.875rem;
  --t-0:1rem;
  --t-1:1.125rem;
  --t-2:1.375rem;
  --t-3:1.75rem;
  --t-4:clamp(2rem, 1.3rem + 2.6vw, 2.9rem);
  --t-5:clamp(2.5rem, 1.4rem + 4.6vw, 4.25rem);

  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px;
  --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px;

  --container:1140px;
  --gutter:24px;
  --raio:6px;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--fonte-texto);
  font-size:var(--t-0);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{ font-family:var(--fonte-titulo); font-weight:700; line-height:1.1; margin:0 0 var(--e-4); text-wrap:balance; letter-spacing:-.02em; }
h1{ font-size:var(--t-5); }
h2{ font-size:var(--t-4); }
h3{ font-size:var(--t-2); letter-spacing:-.01em; }
h4{ font-size:var(--t-1); letter-spacing:-.01em; }
p{ margin:0 0 var(--e-4); max-width:68ch; }
a{ color:var(--verde-escuro); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--verde); }
:focus-visible{ outline:3px solid var(--verde); outline-offset:2px; border-radius:2px; }

/* medidas em m² alinham entre si */
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.secao{ padding-block:var(--e-8); }
@media (min-width:900px){ .secao{ padding-block:var(--e-9); } }
.secao-compacta{ padding-block:var(--e-7); }

.olho{
  font-family:var(--fonte-titulo); font-size:var(--t--2); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--terra);
  margin:0 0 var(--e-3);
}
.intro{ font-size:var(--t-1); color:var(--tinta-media); max-width:58ch; }
.miudo{ font-size:var(--t--1); color:var(--tinta-fraca); }

/* ---------- Cabeçalho ---------- */
.cabecalho{ position:sticky; top:0; z-index:50; background:rgba(247,248,243,.96); border-bottom:1px solid var(--linha); }
.cabecalho-int{ display:flex; align-items:center; gap:var(--e-5); min-height:74px; }
.marca{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.marca img{ height:42px; width:auto; }
.nav{ display:none; margin-left:auto; gap:var(--e-5); align-items:center; }
@media (min-width:900px){ .nav{ display:flex; } }
.nav a{ font-size:.92rem; font-weight:600; color:var(--tinta-media); text-decoration:none; padding-block:6px; border-bottom:2px solid transparent; }
.nav a:hover{ color:var(--verde-escuro); border-bottom-color:var(--verde); }
.nav a[aria-current="page"]{ color:var(--verde-escuro); border-bottom-color:var(--verde); }
.menu-btn{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid var(--linha); border-radius:var(--raio); min-height:44px; padding:10px 14px; font:inherit; font-size:.85rem; font-weight:600; color:var(--tinta-media); cursor:pointer; }
@media (min-width:900px){ .menu-btn{ display:none; } }
.nav-mobile{ display:none; border-top:1px solid var(--linha); background:var(--branco); }
.nav-mobile.aberto{ display:block; }
@media (min-width:900px){ .nav-mobile{ display:none !important; } }
.nav-mobile a{ display:block; padding:14px var(--gutter); font-weight:600; color:var(--tinta); text-decoration:none; border-bottom:1px solid var(--linha); }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:12px 22px;
  font-family:var(--fonte-titulo); font-size:.95rem; font-weight:600;
  border-radius:var(--raio); border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:background-color .15s, border-color .15s, color .15s;
}
.btn svg{ width:19px; height:19px; flex-shrink:0; fill:currentColor; }
.btn-primario{ background:var(--verde); color:#fff; }
.btn-primario:hover{ background:var(--verde-escuro); color:#fff; }
.btn-secundario{ background:transparent; color:var(--verde-escuro); border-color:var(--verde); }
.btn-secundario:hover{ background:var(--verde-claro); color:var(--verde-escuro); }
.btn-claro{ background:#fff; color:var(--verde-escuro); }
.btn-claro:hover{ background:var(--papel-2); color:var(--verde-escuro); }
.btn-contorno-claro{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-contorno-claro:hover{ background:rgba(255,255,255,.12); color:#fff; }
.btn-bloco{ width:100%; }
@media (min-width:560px){ .btn-bloco{ width:auto; } }

/* ==========================================================================
   MOVIMENTO 6 — Herói reaberto: divisão assimétrica, foto sem véu
   ========================================================================== */
.abertura{ background:var(--verde-fundo); color:#fff; }
.abertura-grade{ display:grid; }
@media (min-width:900px){ .abertura-grade{ grid-template-columns:1.15fr 1fr; align-items:stretch; } }

.abertura-texto{ padding:var(--e-8) var(--gutter); }
@media (min-width:900px){
  .abertura-texto{
    padding:var(--e-9) var(--e-8) var(--e-9) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    display:flex; flex-direction:column; justify-content:center;
  }
}
.abertura .olho{ color:#9FCBA9; }
.abertura h1{ color:#fff; max-width:15ch; margin-bottom:var(--e-5); }
.abertura p{ color:#DCE9DB; font-size:var(--t-1); max-width:44ch; }
.abertura-acoes{ display:flex; flex-wrap:wrap; gap:var(--e-3); margin-top:var(--e-6); }

.abertura-foto{ position:relative; min-height:280px; }
.abertura-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:899px){ .abertura-foto{ min-height:0; aspect-ratio:16/10; } .abertura-foto img{ position:static; height:100%; } }

/* faixa de dados encostada no herói — mesmo bloco de abertura */
.abertura-dados{ background:var(--verde-escuro); border-top:1px solid rgba(255,255,255,.14); }
.dados-grade{ display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .dados-grade{ grid-template-columns:repeat(4,1fr); } }
.dado{ padding:var(--e-5) var(--e-4); border-right:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); }
@media (min-width:900px){ .dado{ border-bottom:none; padding:var(--e-6) var(--e-5); } }
.dado:nth-child(2n){ border-right:none; }
@media (min-width:900px){ .dado:nth-child(2n){ border-right:1px solid rgba(255,255,255,.14); } .dado:last-child{ border-right:none; } }
.dado b{ display:block; font-family:var(--fonte-titulo); font-size:var(--t-2); color:#fff; line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.dado span{ display:block; font-size:var(--t--2); letter-spacing:.09em; text-transform:uppercase; color:#9FCBA9; margin-top:7px; }

/* ==========================================================================
   MOVIMENTO 2 — Protagonista por seção: um argumento domina, o resto apoia
   ========================================================================== */
.editorial{ display:grid; gap:var(--e-7); align-items:start; }
@media (min-width:900px){ .editorial{ grid-template-columns:1.4fr 1fr; gap:var(--e-8); } }

.editorial-principal figure{ margin:0; }
.editorial-principal img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--raio); }
.editorial-principal .destaque{ margin-top:var(--e-5); }
.editorial-principal .destaque h3{ font-size:var(--t-3); margin-bottom:var(--e-3); }
.editorial-principal .destaque p{ font-size:var(--t-1); color:var(--tinta-media); margin:0; }

.apoio{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linha); }
.apoio li{ padding:var(--e-4) 0; border-bottom:1px solid var(--linha); }
.apoio b{ display:block; font-family:var(--fonte-titulo); font-size:1rem; letter-spacing:-.01em; margin-bottom:3px; }
.apoio span{ font-size:.93rem; color:var(--tinta-media); }

/* ==========================================================================
   MOVIMENTO 5 — Terra como estrutura: faixa de processo em terracota
   ========================================================================== */
/* fundo no tom mais escuro da terra: garante contraste AA no texto de apoio */
.faixa-processo{ background:var(--terra-escuro); color:#fff; }
.faixa-processo .olho{ color:#F6D9CB; }
.faixa-processo h2{ color:#fff; }
.faixa-processo > .container > p{ color:#FBEDE7; }
.processo-linha{ display:grid; gap:var(--e-6); margin-top:var(--e-7); counter-reset:passo; }
@media (min-width:800px){ .processo-linha{ grid-template-columns:repeat(3,1fr); gap:var(--e-7); } }
.processo-linha li{ counter-increment:passo; list-style:none; position:relative; padding-top:var(--e-6); border-top:2px solid rgba(255,255,255,.35); }
.processo-linha li::before{
  content:counter(passo,decimal-leading-zero);
  position:absolute; top:var(--e-4); right:0;
  font-family:var(--fonte-titulo); font-weight:700; font-size:2.75rem; line-height:1;
  color:rgba(255,255,255,.28); font-variant-numeric:tabular-nums;
}
.processo-linha h3{ color:#fff; font-size:var(--t-1); margin-bottom:var(--e-2); max-width:14ch; }
.processo-linha p{ color:#FBEDE7; font-size:.95rem; margin:0; }

/* ==========================================================================
   MOVIMENTO 3 — Fotografia em escala: uma domina, as outras apoiam
   ========================================================================== */
.prova-principal{ margin-top:var(--e-6); }
.prova-principal figure{ margin:0; }
.prova-principal img{ width:100%; height:clamp(280px, 42vw, 520px); object-fit:cover; }
.prova-principal figcaption{ font-size:var(--t--1); color:var(--tinta-fraca); margin-top:var(--e-3); }
.prova-apoio{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-4); margin-top:var(--e-5); }
@media (max-width:700px){ .prova-apoio{ grid-template-columns:1fr 1fr; } .prova-apoio figure:last-child{ display:none; } }
.prova-apoio figure{ margin:0; }
.prova-apoio img{ width:100%; object-fit:cover; border-radius:var(--raio); }
.prova-apoio figure:nth-child(1) img{ aspect-ratio:4/5; }
.prova-apoio figure:nth-child(2) img{ aspect-ratio:1/1; }
.prova-apoio figure:nth-child(3) img{ aspect-ratio:4/5; }
.prova-apoio figcaption{ font-size:var(--t--2); color:var(--tinta-fraca); margin-top:8px; }

/* elemento que sangra fora do contêiner */
.sangra{ width:100vw; margin-left:calc(50% - 50vw); }

/* ==========================================================================
   MOVIMENTO 1 — Alternância: variedades continua grade (é comparação)
   ========================================================================== */
.grade{ display:grid; gap:var(--e-5); }
.grade-2{ grid-template-columns:1fr; }
.grade-3{ grid-template-columns:1fr; }
.grade-4{ grid-template-columns:1fr 1fr; }
@media (min-width:700px){ .grade-2{ grid-template-columns:1fr 1fr; } .grade-3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .grade-4{ grid-template-columns:repeat(4,1fr); } }

.variedade{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden; display:flex; flex-direction:column; }
.variedade img{ aspect-ratio:4/5; object-fit:cover; width:100%; }
.variedade-corpo{ padding:var(--e-5); display:flex; flex-direction:column; flex:1; }
.variedade .etiqueta{
  align-self:flex-start; font-family:var(--fonte-titulo); font-size:var(--t--2); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--terra);
  background:var(--terra-clara); padding:4px 9px; border-radius:3px; margin-bottom:var(--e-3);
}
.variedade h3{ font-size:var(--t-1); margin-bottom:var(--e-2); }
.variedade p{ font-size:.93rem; color:var(--tinta-media); margin-bottom:var(--e-4); }
.variedade .btn{ margin-top:auto; align-self:flex-start; min-height:44px; padding:10px 18px; font-size:.88rem; }

.bloco{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); padding:var(--e-5); }
.bloco h3{ margin-bottom:var(--e-2); font-size:var(--t-1); }
.bloco p{ margin:0; font-size:.95rem; color:var(--tinta-media); }

.lista-fatos{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-4); }
.lista-fatos li{ display:grid; grid-template-columns:20px 1fr; gap:var(--e-3); font-size:.98rem; color:var(--tinta-media); }
.lista-fatos li b{ color:var(--tinta); }
.lista-fatos .marca-item{ color:var(--verde); font-weight:700; line-height:1.5; }

/* ==========================================================================
   MOVIMENTO 1 — Rotas: dois blocos de fundo cheio, sem cartão
   ========================================================================== */
.rotas{ display:grid; }
@media (min-width:800px){ .rotas{ grid-template-columns:1fr 1fr; } }
.rota{ padding:var(--e-8) var(--e-6); display:flex; flex-direction:column; justify-content:center; gap:var(--e-4); }
@media (min-width:1140px){
  .rota:first-child{ padding-left:max(var(--e-6), calc((100vw - var(--container)) / 2 + var(--gutter))); }
  .rota:last-child{ padding-right:max(var(--e-6), calc((100vw - var(--container)) / 2 + var(--gutter))); }
}
.rota-verde{ background:var(--verde-escuro); color:#fff; }
.rota-verde h2{ color:#fff; font-size:var(--t-3); margin-bottom:var(--e-2); }
.rota-verde p{ color:#DCE9DB; margin:0; }
.rota-papel{ background:var(--papel-2); }
.rota-papel h2{ font-size:var(--t-3); margin-bottom:var(--e-2); }
.rota-papel p{ color:var(--tinta-media); margin:0; }
.rota .btn{ align-self:flex-start; }

/* ---------- Chamada final ---------- */
.chamada{ background:var(--verde-fundo); color:#fff; }
.chamada h2{ color:#fff; }
.chamada p{ color:#DCE9DB; }
.chamada .olho{ color:#9FCBA9; }
.chamada .lista-fatos li{ color:#DCE9DB; }
.chamada .lista-fatos li b{ color:#fff; }
.chamada .lista-fatos .marca-item{ color:#9FCBA9; }
.chamada-grade{ display:grid; gap:var(--e-6); }
@media (min-width:800px){ .chamada-grade{ grid-template-columns:1.2fr 1fr; align-items:start; } }

/* ---------- Tabela ---------- */
.tabela-rolagem{ overflow-x:auto; border:1px solid var(--linha); border-radius:var(--raio); background:var(--branco); }
table.comparativo{ width:100%; border-collapse:collapse; font-size:.93rem; min-width:640px; }
table.comparativo th{ text-align:left; font-family:var(--fonte-titulo); font-size:var(--t--2); letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-fraca); font-weight:600; padding:14px 16px; border-bottom:1px solid var(--linha); white-space:nowrap; }
table.comparativo td{ padding:14px 16px; border-bottom:1px solid var(--linha); color:var(--tinta-media); vertical-align:top; }
table.comparativo tr:last-child td{ border-bottom:none; }
table.comparativo td:first-child{ color:var(--tinta); font-weight:600; white-space:nowrap; }

/* ---------- Formulário ---------- */
.formulario{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); padding:var(--e-6); }
.campo{ display:block; margin-bottom:var(--e-4); }
.campo span{ display:block; font-size:.85rem; font-weight:600; color:var(--tinta); margin-bottom:6px; }
.campo input, .campo select, .campo textarea{ width:100%; min-height:48px; padding:11px 13px; font:inherit; font-size:1rem; color:var(--tinta); background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio); }
.campo textarea{ min-height:110px; resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ border-color:var(--verde); background:#fff; }
.campos-2{ display:grid; gap:0 var(--e-4); }
@media (min-width:640px){ .campos-2{ grid-template-columns:1fr 1fr; } }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- FAQ ---------- */
.faq details{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); margin-bottom:var(--e-3); }
.faq summary{ cursor:pointer; padding:16px 18px; font-weight:600; font-size:.98rem; list-style:none; display:flex; justify-content:space-between; gap:var(--e-4); align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--fonte-titulo); color:var(--verde); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 18px 16px; margin:0; color:var(--tinta-media); font-size:.95rem; }

/* ---------- Rodapé ---------- */
.rodape{ background:var(--tinta); color:#C9D2C5; padding-block:var(--e-8) var(--e-5); font-size:.93rem; }
.rodape-grade{ display:grid; gap:var(--e-6); }
@media (min-width:700px){ .rodape-grade{ grid-template-columns:1.3fr 1fr 1fr; } }
.rodape img{ height:38px; width:auto; margin-bottom:var(--e-4); }
.rodape h3{ font-size:var(--t--2); letter-spacing:.1em; text-transform:uppercase; color:#8C9689; margin-bottom:var(--e-3); font-family:var(--fonte-titulo); }
.rodape a{ color:#E4EBE2; text-decoration:none; }
.rodape a:hover{ color:#fff; text-decoration:underline; }
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.rodape p{ margin:0 0 9px; max-width:36ch; }
.rodape-fim{ margin-top:var(--e-7); padding-top:var(--e-4); border-top:1px solid #333B31; display:flex; flex-wrap:wrap; gap:var(--e-3) var(--e-5); justify-content:space-between; font-size:.83rem; color:#8C9689; }

/* ---------- WhatsApp flutuante ---------- */
.zap-flutuante{ position:fixed; right:18px; bottom:18px; z-index:60; width:56px; height:56px; border-radius:50%; background:var(--verde); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(27,33,25,.28); }
.zap-flutuante svg{ width:28px; height:28px; fill:currentColor; }
.zap-flutuante:hover{ background:var(--verde-escuro); color:#fff; }

/* ---------- Cookies ---------- */
.cookies{ position:fixed; left:12px; right:12px; bottom:12px; z-index:70; background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); box-shadow:0 1px 2px rgba(27,33,25,.06), 0 6px 20px rgba(27,33,25,.10); padding:var(--e-4) var(--e-5); display:none; gap:var(--e-4); align-items:center; flex-wrap:wrap; }
.cookies.visivel{ display:flex; }
@media (min-width:700px){ .cookies{ left:auto; right:18px; max-width:560px; } }
.cookies p{ margin:0; font-size:.86rem; color:var(--tinta-media); flex:1 1 260px; }
.cookies .acoes{ display:flex; gap:var(--e-2); }
.cookies button{ min-height:44px; padding:10px 16px; font-size:.85rem; }

/* ---------- Utilitários ---------- */
.pular{ position:absolute; left:-9999px; }
.pular:focus{ left:12px; top:12px; z-index:100; background:#fff; padding:10px 16px; border-radius:var(--raio); }
.sem-margem{ margin-bottom:0; }