/* ============================================================================
   Agronet MS — Folha de estilo principal
   "Skin do campo": verde-folha, terra, trigo e creme. Sem azul corporativo.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --verde-900: #22301F; /* tinta / verde quase preto */
  --verde-800: #2F5D3A; /* verde-folha escuro */
  --verde-600: #3E7C4F; /* verde-folha médio */
  --verde-400: #6E9A5B;
  --verde-100: #E4ECDD;
  --terra:     #8B5E34;
  --terra-700: #6E4526;
  --terra-300: #C9A87C;
  --trigo:     #D9A441;
  --trigo-100: #F6E9C8;
  --trigo-200: #F2DCA6;
  --creme:     #F7F3EA;
  --papel:     #FFFDF6;
  --tinta:     #22301F;

  --fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --raio: 14px;
  --raio-grande: 22px;
  --sombra: 0 10px 30px rgba(34, 48, 31, .12);
  --sombra-forte: 0 18px 44px rgba(34, 48, 31, .18);
  --sombra-quente: 0 14px 34px rgba(110, 69, 38, .18);
  --transicao: .25s cubic-bezier(.2, .65, .3, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--creme);
}

img, svg, video { max-width: 100%; height: auto; }
img { border: 0; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--verde-900);
  margin: 0 0 .5em;
  text-wrap: balance; /* evita viúvas feias nas manchetes (navegadores sem suporte ignoram) */
}

p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--verde-600); text-decoration: none; }
a:hover { color: var(--verde-800); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(217, 164, 65, .65);
  outline-offset: 2px;
  border-radius: 6px;
}

section[id], footer[id] { scroll-margin-top: 90px; }

/* ---------- Utilitários ---------- */
.container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 22px;
}

.secao { padding: 88px 0; }
.secao--papel { background: var(--papel); }
.secao--verde {
  background: var(--verde-800) url('../img/textura-linhas.svg');
  color: var(--creme);
}
.secao--verde h2, .secao--verde h3 { color: var(--creme); }
.secao--textura { background: var(--creme) url('../img/textura-linhas.svg'); }

.secao__cab {
  max-width: 660px;
  margin: 0 auto 52px;
  text-align: center;
}
.secao__cab p { color: rgba(34, 48, 31, .78); margin: 0; }
.secao--verde .secao__cab p { color: rgba(247, 243, 234, .82); }

.rotulo {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terra);
  background: rgba(139, 94, 52, .1);
  border: 1px solid rgba(139, 94, 52, .25);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.secao--verde .rotulo {
  color: var(--trigo);
  background: rgba(217, 164, 65, .12);
  border-color: rgba(217, 164, 65, .35);
}

.secao__cab h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }

/* Divisor de seção em formato de colina */
.divisor {
  display: block;
  width: 100%;
  height: 56px;
  margin-bottom: -1px;
}
.divisor svg { display: block; width: 100%; height: 100%; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 15px 28px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transicao), box-shadow var(--transicao),
              background-color var(--transicao), color var(--transicao);
}
.botao:active { transform: translateY(1px); }

.botao--primario {
  background: var(--verde-800);
  color: var(--creme);
  box-shadow: 0 8px 20px rgba(47, 93, 58, .32);
}
.botao--primario:hover {
  background: var(--verde-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(47, 93, 58, .4);
}

.botao--trigo {
  background: var(--trigo);
  color: var(--verde-900);
  box-shadow: 0 8px 20px rgba(217, 164, 65, .4);
}
.botao--trigo:hover {
  background: #c99637;
  color: var(--verde-900);
  transform: translateY(-2px);
}

.botao--contorno {
  background: transparent;
  color: var(--verde-800);
  border: 2px solid var(--verde-800);
}
.botao--contorno:hover {
  background: var(--verde-800);
  color: var(--creme);
  transform: translateY(-2px);
}

.botao--contorno-claro {
  background: transparent;
  color: var(--creme);
  border: 2px solid rgba(247, 243, 234, .75);
}
.botao--contorno-claro:hover { background: rgba(247, 243, 234, .14); color: #fff; }

.botao--pequeno { padding: 11px 20px; font-size: .92rem; }
.botao--bloco { width: 100%; }
.botao[disabled] { opacity: .65; cursor: wait; transform: none; }
.botao__icone { width: 20px; height: 20px; flex: none; }

/* ---------- Barra superior ---------- */
.topbar {
  background: var(--verde-900);
  color: rgba(247, 243, 234, .88);
  font-size: .8rem;
}
.topbar__inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 7px;
}
.topbar a { color: var(--trigo); font-weight: 600; white-space: nowrap; }
.topbar a:hover { color: #fff; }
.topbar__info { display: flex; gap: 18px; flex-wrap: wrap; min-width: 0; }

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 243, 234, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(34, 48, 31, .08);
  transition: box-shadow var(--transicao);
}
.navbar--sombra { box-shadow: 0 6px 24px rgba(34, 48, 31, .12); }
.navbar__inner {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 70px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.marca img { width: 40px; height: 40px; }
.marca__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  color: var(--verde-800);
  line-height: 1.05;
}
.marca__nome span { color: var(--trigo); }
.marca__slogan {
  display: block;
  font-family: var(--fonte-texto);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terra);
}

.menu {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin-left: auto;
}
.menu a {
  color: var(--tinta);
  font-weight: 500;
  font-size: .96rem;
  text-decoration: none;
  padding: 6px 2px;
  position: relative;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2.5px;
  border-radius: 2px;
  background: var(--trigo);
  transition: right var(--transicao);
}
.menu a:hover::after, .menu a.ativo::after { right: 0; }
.menu a.ativo { color: var(--verde-800); font-weight: 700; }
/* CTA do menu: mantém respiro, contraste e sem sublinhado de link */
.menu .botao { margin-left: 6px; padding: 11px 20px; font-size: .92rem; }
.menu .botao::after { display: none; }
.menu .botao--primario { color: var(--creme); }
.menu .botao--primario:hover { color: #fff; }

/* Hambúrguer */
.menu-toggle {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 12px;
  background: var(--verde-100);
  cursor: pointer;
  padding: 12px 11px;
}
.menu-toggle span {
  display: block;
  height: 2.6px;
  border-radius: 2px;
  background: var(--verde-800);
  margin: 5px 0;
  transition: transform var(--transicao), opacity var(--transicao);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--creme) 0%, var(--trigo-100) 62%, var(--trigo-200) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/textura-linhas.svg');
  opacity: .8;
  pointer-events: none;
}
.hero__conteudo {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 830px;
  padding-top: 66px;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde-800);
  background: var(--papel);
  border: 1px solid rgba(47, 93, 58, .2);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(34, 48, 31, .08);
  margin-bottom: 22px;
}
.hero__eyebrow img { width: 18px; height: 18px; }
.hero h1 {
  font-size: clamp(2.35rem, 5.6vw, 4rem);
  font-weight: 600;
  margin-bottom: 20px;
}
.hero h1 .marca-texto {
  background-image: linear-gradient(to top, rgba(217, 164, 65, .5) 34%, transparent 34%);
  padding: 0 .08em;
  white-space: nowrap;
}
.hero__sub {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: rgba(34, 48, 31, .8);
  max-width: 620px;
  margin: 0 auto 26px;
}
.hero__provas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  font-size: .92rem;
  font-weight: 600;
  color: var(--verde-800);
}
.hero__provas li { display: inline-flex; align-items: center; gap: 8px; }
.hero__provas svg { width: 17px; height: 17px; flex: none; }

/* Cartão de consulta de cobertura elevado sobre a dobra */
.hero__consulta {
  position: relative;
  z-index: 3;
  margin-top: 44px;
}
.consulta-card {
  background: var(--papel);
  border: 1px solid rgba(34, 48, 31, .09);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-quente);
  padding: 26px 26px 22px;
  max-width: 820px;
  margin-inline: auto;
}
.consulta-card__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-titulo);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--verde-800);
  margin-bottom: 14px;
}
.consulta-card__titulo img { width: 26px; height: 26px; }
.consulta-form {
  display: grid;
  grid-template-columns: 2.4fr .8fr auto 1.6fr auto;
  align-items: end;
  gap: 12px;
}
.consulta-form .campo { margin: 0; }
.consulta-ou {
  align-self: end;
  margin-bottom: 12px; /* alinha a pelota com os campos, não com o rótulo */
  justify-self: center;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--terra);
  background: var(--trigo-100);
  border-radius: 999px;
  padding: 5px 11px;
}
.hero__campo {
  position: relative;
  z-index: 1;
  margin-top: -72px;
  line-height: 0;
}
.hero__campo img { width: 100%; display: block; }

/* Resultado da consulta de cobertura */
.resultado {
  display: none;
  margin-top: 16px;
  border-radius: var(--raio);
  padding: 16px 18px;
  font-size: .96rem;
  border: 1.5px solid transparent;
}
.resultado.visivel { display: block; animation: surgir .35s ease; }
.resultado strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.resultado--atendida { background: #E6F0E1; border-color: #9dc08f; color: #274D2C; }
.resultado--expansao { background: #F8EFD8; border-color: #dfbe7a; color: #6E4A12; }
.resultado--nao { background: #F5E3D7; border-color: #cf9f7e; color: #6E3A1D; }
.resultado a { font-weight: 700; text-decoration: underline; }

@keyframes surgir {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Faixa de números ---------- */
.numeros { padding: 74px 0; }
.numeros__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  text-align: center;
}
.numero__valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  font-weight: 700;
  color: var(--trigo);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.numero__rotulo {
  margin-top: 8px;
  font-size: .92rem;
  font-weight: 500;
  color: rgba(247, 243, 234, .85);
}
.numero {
  position: relative;
  padding: 6px 4px;
}
.numero + .numero::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 12%;
  height: 76%;
  width: 1px;
  background: rgba(247, 243, 234, .22);
}

/* ---------- "Feito pro agro" (cards) ---------- */
.cartoes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  list-style: none;
}
.cartao {
  background: var(--papel);
  border: 1px solid rgba(34, 48, 31, .08);
  border-radius: var(--raio-grande);
  padding: 28px 24px;
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-forte);
}
.cartao__icone {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--trigo-100);
  border: 1px solid rgba(217, 164, 65, .4);
  border-radius: 18px;
  margin-bottom: 18px;
  transition: transform var(--transicao);
}
.cartao:hover .cartao__icone { transform: rotate(-7deg) scale(1.07); }
.cartao__icone img { width: 40px; height: 40px; }
.cartao h3 { font-size: 1.18rem; margin-bottom: 8px; }
.cartao p { font-size: .94rem; color: rgba(34, 48, 31, .78); margin: 0; }

/* ---------- Planos ---------- */
.planos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}
.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1.5px solid rgba(34, 48, 31, .1);
  border-radius: var(--raio-grande);
  padding: 30px 24px 26px;
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
  overflow: hidden;
}
.plano::after {
  /* marca d'água de espiga no canto */
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 96px;
  height: 96px;
  background: url('../img/icon-espiga.svg') no-repeat center / contain;
  opacity: .06;
  pointer-events: none;
}
.plano:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-forte);
  border-color: rgba(62, 124, 79, .4);
}
.plano--destaque {
  border: 2px solid var(--trigo);
  box-shadow: 0 20px 46px rgba(217, 164, 65, .28);
}
.plano__nome {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 10px;
}
.plano__mega {
  font-family: var(--fonte-titulo);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--verde-800);
}
.plano__mega small {
  font-family: var(--fonte-texto);
  font-size: .95rem;
  font-weight: 600;
  color: rgba(34, 48, 31, .65);
  margin-left: 4px;
}
.plano__preco {
  margin: 16px 0 18px;
  padding: 14px 0;
  border-top: 1px dashed rgba(139, 94, 52, .35);
  border-bottom: 1px dashed rgba(139, 94, 52, .35);
  font-family: var(--fonte-titulo);
  color: var(--verde-900);
}
.plano__preco .cifra { font-size: 1rem; font-weight: 600; vertical-align: super; }
.plano__preco .valor { font-size: 2.15rem; font-weight: 700; letter-spacing: -.02em; }
.plano__preco .centavos { font-size: 1.05rem; font-weight: 700; }
.plano__preco .periodo {
  font-family: var(--fonte-texto);
  font-size: .85rem;
  font-weight: 500;
  color: rgba(34, 48, 31, .6);
}
.plano__lista {
  list-style: none;
  margin: 0 0 22px;
  display: grid;
  gap: 10px;
  font-size: .9rem;
  color: rgba(34, 48, 31, .85);
  flex: 1;
}
.plano__lista li { display: flex; gap: 9px; align-items: flex-start; }
.plano__lista svg { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.plano .botao { position: relative; z-index: 1; }

/* Selo "carimbo de fazenda" */
.selo {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--verde-900);
  background: var(--trigo);
  border: 2.5px dashed rgba(34, 48, 31, .55);
  border-radius: 50%;
  transform: rotate(9deg);
  box-shadow: 0 8px 18px rgba(217, 164, 65, .45);
  padding: 8px;
}
/* compensa a borda de 2px (vs 1.5px dos demais) pra nivelar o conteúdo entre cards */
.plano--destaque { padding: 29.5px 23.5px 25.5px; }

/* ---------- Como funciona (cerca de fazenda) ---------- */
.trilha {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  list-style: none;
  padding-top: 8px;
}
.trilha::before,
.trilha::after {
  /* os dois "fios" da cerca */
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  height: 4px;
  border-radius: 2px;
  background: var(--terra);
  opacity: .85;
}
.trilha::before { top: 24px; }
.trilha::after { top: 40px; opacity: .45; }
.passo { position: relative; text-align: center; padding: 0 8px; }
.passo__estaca {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--creme);
  background: var(--verde-800);
  border: 4px solid var(--creme);
  outline: 3px solid var(--terra);
  border-radius: 50%;
  box-shadow: var(--sombra);
}
.passo h3 { font-size: 1.15rem; margin-bottom: 8px; }
.passo p { font-size: .93rem; color: rgba(34, 48, 31, .78); margin: 0; }

/* ---------- Depoimentos ---------- */
.depoimentos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.depoimento {
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid rgba(34, 48, 31, .08);
  border-radius: var(--raio-grande);
  padding: 30px 26px 24px;
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.depoimento:hover { transform: translateY(-5px); box-shadow: var(--sombra-forte); }
.depoimento__aspas {
  font-family: var(--fonte-titulo);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: .6;
  color: var(--trigo);
  margin-bottom: 14px;
}
.depoimento__estrelas { display: flex; gap: 3px; margin-bottom: 14px; }
.depoimento__estrelas svg { width: 17px; height: 17px; fill: var(--trigo); }
.depoimento blockquote {
  margin: 0 0 20px;
  font-size: .97rem;
  color: rgba(34, 48, 31, .88);
  flex: 1;
}
.depoimento__autor { display: flex; align-items: center; gap: 12px; }
.depoimento__autor span.depoimento__avatar {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .95rem;
  color: var(--creme);
  background: var(--verde-600);
  border-radius: 50%;
  border: 2px solid var(--trigo);
}
.depoimento__autor strong { display: block; font-size: .95rem; color: var(--verde-900); }
.depoimento__autor span { font-size: .82rem; color: var(--terra); font-weight: 600; }

/* ---------- CTA WhatsApp ---------- */
.cta-zap {
  background: linear-gradient(120deg, var(--terra-700), var(--terra) 55%, #9c6c3c);
  color: var(--creme);
  position: relative;
  overflow: hidden;
}
.cta-zap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/textura-linhas.svg');
  opacity: .5;
}
.cta-zap__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
}
.cta-zap h2 { color: var(--creme); font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 10px; }
.cta-zap p { color: rgba(247, 243, 234, .85); margin: 0; max-width: 520px; }
.cta-zap__acoes { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cta-zap__fone { font-family: var(--fonte-titulo); font-size: 1.3rem; font-weight: 700; color: var(--trigo); }
.cta-zap__espiga {
  position: absolute;
  right: -30px;
  bottom: -46px;
  width: 240px;
  opacity: .14;
  transform: rotate(-14deg);
  pointer-events: none;
}

/* ---------- Contato / formulários ---------- */
.contato-grade {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 44px;
  align-items: start;
}
.contato-info h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.contato-info > p { color: rgba(34, 48, 31, .78); }
.info-lista { list-style: none; display: grid; gap: 18px; margin-top: 26px; }
.info-lista li { display: flex; gap: 14px; align-items: flex-start; }
.info-lista__icone {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--verde-100);
  border-radius: 14px;
}
.info-lista__icone img { width: 26px; height: 26px; }
.info-lista strong { display: block; color: var(--verde-900); font-size: .95rem; }
.info-lista span { font-size: .92rem; color: rgba(34, 48, 31, .75); }

.form-card {
  background: var(--papel);
  border: 1px solid rgba(34, 48, 31, .09);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
  padding: 32px;
}
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.campo--cheio { grid-column: 1 / -1; }
.campo label {
  font-size: .86rem;
  font-weight: 600;
  color: var(--verde-900);
}
.campo label .opcional { font-weight: 400; color: rgba(34, 48, 31, .55); }
.campo input, .campo select, .campo textarea {
  font: inherit;
  font-size: .95rem;
  color: var(--tinta);
  background: #fff;
  border: 1.5px solid rgba(34, 48, 31, .18);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
  width: 100%;
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--verde-600);
  box-shadow: 0 0 0 4px rgba(217, 164, 65, .25);
}
.campo input::placeholder, .campo textarea::placeholder { color: rgba(34, 48, 31, .4); }

/* Honeypot anti-spam: invisível para humanos (sem jogar nada pra fora da tela) */
.hp {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.form-status {
  display: none;
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--raio);
  font-size: .92rem;
  border: 1.5px solid transparent;
}
.form-status.visivel { display: block; animation: surgir .3s ease; }
.form-status--ok { background: #E6F0E1; border-color: #9dc08f; color: #274D2C; }
.form-status--erro { background: #F5E3D7; border-color: #cf9f7e; color: #6E3A1D; }
.form-status a { font-weight: 700; text-decoration: underline; }
.form-nota { font-size: .8rem; color: rgba(34, 48, 31, .55); margin: 12px 0 0; }

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--verde-900) url('../img/textura-linhas.svg');
  color: rgba(247, 243, 234, .82);
  font-size: .92rem;
}
.rodape__grade {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 36px;
  padding-block: 70px 44px; /* sem shorthand: preserva o respiro lateral do .container */
}
.rodape .marca__nome { color: var(--creme); }
.rodape__slogan { margin: 14px 0 18px; color: rgba(247, 243, 234, .7); max-width: 260px; }
.rodape h3 {
  color: var(--trigo);
  font-family: var(--fonte-texto);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.rodape ul { list-style: none; display: grid; gap: 10px; }
.rodape a { color: rgba(247, 243, 234, .82); text-decoration: none; }
.rodape a:hover { color: var(--trigo); }
.rodape__contato li { display: flex; gap: 10px; align-items: flex-start; }
.rodape__contato svg { width: 16px; height: 16px; flex: none; margin-top: 4px; fill: var(--trigo); }
.rodape__barra {
  border-top: 1px solid rgba(247, 243, 234, .14);
  padding-block: 20px; /* sem shorthand: preserva o respiro lateral do .container */
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: rgba(247, 243, 234, .6);
}

/* ---------- Botão flutuante do WhatsApp ---------- */
.zap-flutuante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(47, 93, 58, .45);
  transition: transform var(--transicao);
}
.zap-flutuante:hover { transform: scale(1.08) rotate(-4deg); }
.zap-flutuante::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(62, 124, 79, .55);
  animation: pulsar 2.4s ease-out infinite;
  pointer-events: none;
}
.zap-flutuante img { width: 100%; height: 100%; display: block; }
@keyframes pulsar {
  0% { transform: scale(.8); opacity: 1; }
  70%, 100% { transform: scale(1.25); opacity: 0; }
}

/* ---------- Páginas internas (cabeçalho) ---------- */
.pagina-hero {
  background: linear-gradient(180deg, var(--trigo-100), var(--creme));
  border-bottom: 1px solid rgba(34, 48, 31, .07);
  padding: 60px 0 52px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pagina-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/textura-linhas.svg');
  opacity: .7;
}
.pagina-hero > .container { position: relative; }
.pagina-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.pagina-hero p { max-width: 620px; margin: 0 auto; color: rgba(34, 48, 31, .78); }
.trilha-pao {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--terra);
  margin-bottom: 14px;
}
.trilha-pao a { color: var(--verde-600); }

/* ---------- Página de planos: inclusos ---------- */
.inclusos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  list-style: none;
}
.incluso {
  display: flex;
  gap: 13px;
  align-items: center;
  background: rgba(247, 243, 234, .07);
  border: 1px solid rgba(247, 243, 234, .18);
  border-radius: var(--raio);
  padding: 16px 18px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--creme);
}
.incluso img { width: 34px; height: 34px; flex: none; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: 14px; }
.faq details {
  background: var(--papel);
  border: 1px solid rgba(34, 48, 31, .1);
  border-radius: var(--raio);
  box-shadow: 0 4px 14px rgba(34, 48, 31, .06);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--verde-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 2.6px solid var(--terra);
  border-bottom: 2.6px solid var(--terra);
  transform: rotate(45deg);
  transition: transform var(--transicao);
  margin-top: -4px;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq details[open] summary { color: var(--verde-800); }
.faq__resposta {
  padding: 0 22px 20px;
  font-size: .94rem;
  color: rgba(34, 48, 31, .8);
}

/* ---------- Página de cobertura ---------- */
.cobertura-grade {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: start;
}
.cobertura-card { padding: 32px; }
.cobertura-form { display: grid; gap: 16px; }
.cobertura-form__linha { display: grid; grid-template-columns: 2fr .7fr; gap: 12px; }
.cobertura-form__ou {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terra);
}
.cobertura-form__ou::before, .cobertura-form__ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(139, 94, 52, .3);
}

.cidades h2 { font-size: 1.3rem; margin-bottom: 6px; }
.cidades > p { font-size: .92rem; color: rgba(34, 48, 31, .72); }
.cidades__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--papel);
  border: 1px solid rgba(34, 48, 31, .12);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--verde-900);
}
.chip::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--verde-600);
}
.chip--expansao::before { background: var(--trigo); }
.chip--nao::before { background: var(--terra); }
.legenda {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
  font-size: .82rem;
  color: rgba(34, 48, 31, .7);
}
.legenda li { display: inline-flex; align-items: center; gap: 7px; }
.legenda i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.legenda .cor-atendida { background: var(--verde-600); }
.legenda .cor-expansao { background: var(--trigo); }
.legenda .cor-nao { background: var(--terra); }

/* ---------- Página de obrigado ---------- */
.obrigado {
  min-height: 58vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 80px 0;
}
.obrigado__card { max-width: 560px; margin-inline: auto; }
.obrigado__check {
  width: 92px;
  height: 92px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  background: var(--verde-800);
  border-radius: 50%;
  border: 5px solid var(--trigo-200);
  box-shadow: var(--sombra-forte);
}
.obrigado__check svg { width: 44px; height: 44px; stroke: var(--trigo); }
.obrigado h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.obrigado p { color: rgba(34, 48, 31, .78); }
.obrigado__acoes {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* ---------- Animação de entrada (com JS) ---------- */
.js .revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .65, .3, 1);
  transition-delay: var(--atraso, 0ms);
}
.js .revelar.visivel { opacity: 1; transform: none; }

/* ---------- Painel administrativo ---------- */
.admin-fundo {
  min-height: 100vh;
  background: var(--verde-900) url('../img/textura-linhas.svg');
  padding: 40px 0 70px;
}
.admin-login {
  max-width: 420px;
  margin: 8vh auto 0;
  background: var(--papel);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-forte);
  padding: 38px 34px;
  text-align: center;
}
.admin-login .marca { justify-content: center; margin-bottom: 8px; }
.admin-login p { font-size: .9rem; color: rgba(34, 48, 31, .7); }
.admin-login form { display: grid; gap: 14px; margin-top: 20px; text-align: left; }
.admin-erro {
  background: #F5E3D7;
  border: 1.5px solid #cf9f7e;
  color: #6E3A1D;
  border-radius: var(--raio);
  padding: 11px 14px;
  font-size: .88rem;
}

.admin-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.admin-topo .marca__nome { color: var(--creme); }
.admin-topo__acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.admin-stat {
  background: rgba(247, 243, 234, .07);
  border: 1px solid rgba(247, 243, 234, .16);
  border-radius: var(--raio);
  padding: 18px 20px;
  color: var(--creme);
}
.admin-stat strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.9rem;
  color: var(--trigo);
}
.admin-stat span { font-size: .84rem; color: rgba(247, 243, 234, .75); }

.admin-painel {
  background: var(--papel);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-forte);
  padding: 26px;
  margin-bottom: 26px;
}
.admin-painel__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.admin-painel h2 { font-size: 1.25rem; margin: 0; }
.tabela-envolvente { overflow-x: auto; }
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 640px;
}
.tabela th {
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terra);
  padding: 10px 12px;
  border-bottom: 2px solid rgba(139, 94, 52, .3);
  white-space: nowrap;
}
.tabela td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(34, 48, 31, .08);
  vertical-align: top;
}
.tabela tbody tr:hover { background: var(--trigo-100); }
.tabela .vazio { text-align: center; color: rgba(34, 48, 31, .55); padding: 26px; }
.etiqueta {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--verde-100);
  color: var(--verde-800);
  white-space: nowrap;
}
.etiqueta--expansao { background: var(--trigo-100); color: #6E4A12; }
.etiqueta--nao { background: #F5E3D7; color: #6E3A1D; }
.admin-aviso {
  background: var(--trigo-100);
  border: 1.5px solid rgba(217, 164, 65, .5);
  color: #6E4A12;
  border-radius: var(--raio);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: .9rem;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1020px) {
  .cartoes, .planos, .inclusos { grid-template-columns: repeat(2, 1fr); }
  .numeros__grade { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .numero + .numero::before { display: none; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .plano--destaque { transform: none; }
}

@media (max-width: 880px) {
  .menu-toggle { display: block; }
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--creme);
    border-bottom: 1px solid rgba(34, 48, 31, .1);
    box-shadow: 0 18px 30px rgba(34, 48, 31, .14);
    padding: 14px 22px 20px;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  }
  .menu.aberto { transform: none; opacity: 1; visibility: visible; }
  .menu a { display: block; padding: 11px 4px; font-size: 1.02rem; }
  .menu a::after { display: none; }
  .menu .botao { margin: 8px 0 0; }
  .navbar__inner { position: relative; }
  .consulta-form { grid-template-columns: 1fr; }
  .consulta-ou { justify-self: start; align-self: auto; margin-bottom: 0; }
  .contato-grade, .cobertura-grade { grid-template-columns: 1fr; }
  .depoimentos { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .trilha { grid-template-columns: 1fr; gap: 34px; max-width: 460px; margin-inline: auto; }
  .trilha::before, .trilha::after {
    left: 31px;
    right: auto;
    top: 8%;
    bottom: 8%;
    width: 4px;
    height: auto;
  }
  .trilha::after { left: 47px; top: 10%; bottom: 10%; }
  .passo { text-align: left; display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center; }
  .passo__estaca { margin: 0; }
  .topbar__info span:last-child { display: none; }
}

@media (max-width: 560px) {
  .secao { padding: 64px 0; }
  .cartoes, .planos, .inclusos, .numeros__grade, .form-grade, .admin-stats { grid-template-columns: 1fr; }
  .cobertura-form__linha { grid-template-columns: 1fr; }
  .rodape__grade { grid-template-columns: 1fr; gap: 28px; padding-block: 54px 34px; }
  .rodape { padding-bottom: 72px; /* respiro pro botão flutuante não cobrir a barra final */ }
  .hero__conteudo { padding-top: 44px; }
  .hero__campo { margin-top: -56px; }
  .cta-zap__inner { flex-direction: column; align-items: flex-start; }
  .selo { width: 76px; height: 76px; font-size: .56rem; }
  .marca__slogan { display: none; }
  /* topbar: só o telefone, centralizado e sem quebrar no meio do número */
  .topbar__info { display: none; }
  .topbar__inner { justify-content: center; }
  .zap-flutuante { width: 52px; height: 52px; right: 14px; bottom: 14px; }
}

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

/* ---------- Ajustes finos ---------- */
.navbar__inner > nav { margin-left: auto; }
input[data-uf] { text-transform: uppercase; }
/* Medida confortável de leitura nos textos corridos (colunas mais estreitas não mudam) */
main p { max-width: 72ch; }
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nowrap { white-space: nowrap; }