/* Componentes do design system On Farm Bio */

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .75em 1.35em;
  border: 1.5px solid transparent; border-radius: var(--r-pilula);
  font-weight: 700; font-size: var(--t-sm); line-height: 1.1; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--duracao), color var(--duracao), border-color var(--duracao);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--folha { background: var(--folha); color: var(--branco); }
.btn--folha:hover { background: var(--folha-escura); color: var(--branco); }
.btn--broto { background: var(--broto); color: var(--solo); }
.btn--broto:hover { background: #bcdd63; color: var(--solo); }
.btn--linha { border-color: currentColor; color: var(--mata); background: transparent; }
.btn--linha:hover { background: var(--mata); border-color: var(--mata); color: var(--branco); }
.secao--mata .btn--linha, .secao--solo .btn--linha, .hero .btn--linha { color: var(--branco); }
.secao--mata .btn--linha:hover, .secao--solo .btn--linha:hover, .hero .btn--linha:hover { background: var(--branco); color: var(--mata); }
.btn--zap { background: #1f8a4c; color: var(--branco); }
.btn--zap:hover { background: #176f3c; color: var(--branco); }
.btn--grande { min-height: 56px; font-size: var(--t-base); padding-inline: 1.6em; }
.btn--bloco { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

/* Link de texto com seta desenhada em CSS (não no texto) */
.mais {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 700; font-size: var(--t-sm); text-decoration: none; color: var(--folha);
}
.mais::after {
  content: ""; width: .5em; height: .5em; border: solid currentColor; border-width: 2px 2px 0 0;
  transform: rotate(45deg); transition: transform var(--duracao);
}
.mais:hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgb(254 254 254 / .94);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--linha);
}
.topo__barra { display: flex; align-items: center; gap: var(--e-5); min-height: 76px; }
.topo__logo { flex: none; display: block; }
.topo__logo img { height: 40px; width: auto; }
.menu { display: flex; align-items: center; gap: var(--e-1); margin-left: auto; }
.menu > li { list-style: none; position: relative; }
.menu__link {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .6em .8em; border: 0; background: none; border-radius: var(--r-controle);
  font-weight: 600; font-size: var(--t-sm); color: var(--mata); text-decoration: none; cursor: pointer;
}
.menu__link:hover, .menu__link[aria-expanded="true"] { background: var(--nevoa); color: var(--mata); }
.menu__link[aria-current="page"] { color: var(--folha); }
.menu__link--abre::after {
  content: ""; width: .38em; height: .38em; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--duracao);
}
.menu__link--abre[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.topo__acoes { display: flex; gap: var(--e-2); margin-left: var(--e-3); }
.topo__abrir { display: none; }

/* Mega menu de produtos */
.painel {
  position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0;
  width: min(92vw, 880px); padding: var(--e-5);
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-bloco);
  box-shadow: var(--sombra-elevada);
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--e-5);
}
.painel[hidden] { display: none; }
.painel h3 { font-size: var(--t-sm); color: var(--texto-suave); font-weight: 600; letter-spacing: 0; margin-bottom: var(--e-3); }
.painel ul { display: grid; gap: 2px; }
.painel li { list-style: none; }
.painel a { display: block; padding: .5em .65em; border-radius: var(--r-controle); text-decoration: none; color: var(--mata); font-weight: 600; font-size: var(--t-sm); }
.painel a:hover { background: var(--nevoa); }
.painel a small { display: block; font-weight: 450; color: var(--texto-suave); font-size: var(--t-xs); line-height: 1.4; }
.painel__destaque { background: var(--mata); border-radius: var(--r-controle); padding: var(--e-4); color: rgb(254 254 254 / .8); font-size: var(--t-sm); }
.painel__destaque strong { display: block; color: var(--branco); font-size: var(--t-base); margin-bottom: var(--e-2); }
.painel__destaque a { color: var(--broto); padding: 0; margin-top: var(--e-3); display: inline-flex; }
.painel__destaque a:hover { background: none; }

@media (max-width: 1080px) {
  .topo__abrir {
    display: inline-flex; margin-left: auto; align-items: center; gap: .5em;
    min-height: 44px; padding: 0 1em; border: 1.5px solid var(--linha); border-radius: var(--r-pilula);
    background: none; font-weight: 700; font-size: var(--t-sm); color: var(--mata); cursor: pointer;
  }
  .topo__nav { display: none; }
  .topo__nav.aberto {
    display: block; position: fixed; inset: 76px 0 0; overflow-y: auto;
    background: var(--branco); padding: var(--e-4) var(--margem) var(--e-7);
  }
  .menu { flex-direction: column; align-items: stretch; margin: 0; }
  .menu__link { width: 100%; justify-content: space-between; padding: .9em .5em; font-size: var(--t-base); }
  .painel { position: static; translate: none; width: auto; grid-template-columns: 1fr; box-shadow: none; border: 0; padding: 0 0 var(--e-4) var(--e-3); }
  .topo__acoes { margin: var(--e-5) 0 0; flex-direction: column; }
  .topo__acoes .btn { width: 100%; }
}

/* ---------- Trilha de navegação ---------- */
.trilha { font-size: var(--t-xs); color: var(--texto-suave); margin-bottom: var(--e-5); }
.trilha ol { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; }
.trilha li + li::before { content: "/"; margin-right: .4em; color: var(--cinza); }
.trilha a { color: inherit; text-decoration: none; }
.trilha a:hover { color: var(--folha); text-decoration: underline; }
.secao--mata .trilha, .hero .trilha { color: rgb(254 254 254 / .65); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; color: var(--branco); background: var(--solo); overflow: hidden; }
.hero__midia { position: absolute; inset: 0; z-index: -2; }
.hero__midia :is(img, video) { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(29 43 30 / .2) 0%, rgb(29 43 30 / 0) 30%),
    linear-gradient(90deg, rgb(29 43 30 / .92) 0%, rgb(29 43 30 / .72) 42%, rgb(29 43 30 / .05) 78%);
}
.hero__conteudo { padding-block: clamp(4rem, 2rem + 8vw, 8.5rem) clamp(3rem, 2rem + 4vw, 5rem); display: grid; gap: var(--e-5); max-width: 44rem; }
.hero h1 { font-size: var(--t-hero); color: var(--branco); letter-spacing: -.03em; line-height: 1.02; }
.hero__texto { font-size: var(--t-md); line-height: 1.5; color: rgb(254 254 254 / .82); max-width: 36rem; }
@media (max-width: 720px) {
  .hero::before { background: linear-gradient(180deg, rgb(29 43 30 / .55) 0%, rgb(29 43 30 / .88) 55%, rgb(29 43 30 / .96) 100%); }
}

/* Hero de página interna */
.hero--pagina .hero__conteudo { padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4rem); max-width: 48rem; }
.hero--pagina h1 { font-size: var(--t-2xl); }

/* ---------- Localizador (cultura + problema) ---------- */
.localizador {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--e-2);
  padding: var(--e-2); margin-top: var(--e-3);
  background: rgb(254 254 254 / .96); border-radius: var(--r-bloco);
  box-shadow: 0 20px 50px -20px rgb(0 0 0 / .5);
  color: var(--grafite); max-width: 40rem;
}
.localizador label { display: grid; gap: 2px; padding: .45em .8em; border-radius: var(--r-controle); }
.localizador label:hover { background: var(--nevoa); }
.localizador span { font-size: var(--t-xs); font-weight: 600; color: var(--texto-suave); }
.localizador select { border: 0; background: transparent; padding: 0; font-weight: 700; color: var(--mata); font-size: var(--t-base); cursor: pointer; appearance: none; }
.localizador select:focus-visible { box-shadow: none; text-decoration: underline; }
.localizador label:focus-within { box-shadow: var(--foco); }
.localizador .btn { align-self: stretch; border-radius: var(--r-controle); }
@media (max-width: 600px) { .localizador { grid-template-columns: 1fr; } }

/* ---------- Números reais ---------- */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--linha); }
.numeros > div { padding: var(--e-5) var(--e-4) var(--e-5) 0; }
.numeros > div + div { padding-left: var(--e-5); border-left: 1px solid var(--linha); }
.numeros dt { font-size: var(--t-xl); font-weight: 800; color: var(--mata); letter-spacing: -.03em; line-height: 1; }
.numeros dd { margin: var(--e-2) 0 0; font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.4; }
@media (max-width: 720px) {
  .numeros { grid-template-columns: 1fr 1fr; }
  .numeros > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .numeros > div:nth-child(n + 3) { border-top: 1px solid var(--linha); }
}

/* ---------- Selo de status de registro ---------- */
.registro {
  position: relative; display: inline-block; max-width: 100%;
  padding: .35em .75em .35em 1.55em; border-radius: var(--r-controle);
  font-size: var(--t-xs); font-weight: 650; line-height: 1.4;
  border: 1px solid; background: var(--branco);
}
.registro::before { content: ""; position: absolute; left: .65em; top: .82em; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.registro .dado { font-weight: 500; }
.registro--registrado { color: var(--folha); border-color: rgb(57 123 53 / .35); }
.registro--protocolado { color: #7a5a1c; border-color: rgb(210 174 109 / .7); }
.registro--consulte { color: var(--texto-suave); border-color: var(--linha); }
.registro--uso-proprio { color: var(--div-laboratorio); border-color: rgb(63 127 166 / .35); }

/* ---------- Placa de Petri (fundo de foto de produto) ---------- */
.placa {
  position: relative; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff 0 58%, #f6f8f3 58.5% 68%, #fff 68.5% 100%);
  box-shadow: inset 0 0 0 1px var(--linha), inset 0 0 0 10px #fff, inset 0 0 0 11px var(--linha);
  display: grid; place-items: center; overflow: hidden;
}
.placa img { width: 74%; height: 74%; object-fit: contain; }
.placa--kit { border-radius: var(--r-bloco); aspect-ratio: 4 / 3; box-shadow: inset 0 0 0 1px var(--linha); background: #f3f5f0; }
.placa--kit img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Cartão de produto ---------- */
.grade-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--e-6) var(--e-5); }
.produto { position: relative; display: grid; gap: var(--e-3); align-content: start; text-decoration: none; color: inherit; }
.produto .placa { margin-bottom: var(--e-2); transition: box-shadow var(--duracao); }
.produto:hover .placa { box-shadow: inset 0 0 0 1px var(--folha), inset 0 0 0 10px #fff, inset 0 0 0 11px var(--broto); }
.produto:hover .placa--kit { box-shadow: inset 0 0 0 2px var(--folha); }
.produto__tipo { font-size: var(--t-xs); font-weight: 600; color: var(--folha); }
.produto__nome { font-size: var(--t-md); font-weight: 800; color: var(--mata); letter-spacing: -.015em; line-height: 1.2; }
.produto:hover .produto__nome { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.produto__micro { font-size: var(--t-sm); color: var(--texto-suave); font-style: italic; line-height: 1.4; }
.produto__resumo { font-size: var(--t-sm); line-height: 1.5; }
.produto .registro { justify-self: start; }

/* ---------- Problema da lavoura (foto) ---------- */
.grade-problemas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--e-4); }
.problema {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 210px; padding: var(--e-4); border-radius: var(--r-bloco); overflow: hidden;
  color: var(--branco); text-decoration: none; background: var(--mata);
}
.problema img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.problema::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(29 43 30 / 0) 30%, rgb(29 43 30 / .9) 100%); }
.problema:hover { color: var(--branco); }
.problema:hover img { transform: scale(1.05); }
.problema strong { color: var(--branco); font-size: var(--t-md); line-height: 1.2; }
.problema span { font-size: var(--t-xs); color: rgb(254 254 254 / .78); margin-top: 2px; }
.grupo-problemas + .grupo-problemas { margin-top: var(--e-6); }
.grupo-problemas h3 { margin-bottom: var(--e-4); font-size: var(--t-base); color: var(--texto-suave); font-weight: 650; }

/* ---------- Culturas ---------- */
.culturas { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e-3); }
.cultura { position: relative; isolation: isolate; aspect-ratio: 3 / 4; border-radius: var(--r-midia); overflow: hidden; display: flex; align-items: flex-end; padding: var(--e-4); text-decoration: none; color: var(--branco); }
.cultura img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cultura::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgb(29 43 30 / .85)); }
.cultura strong { color: var(--branco); font-size: var(--t-lg); letter-spacing: -.02em; }
.cultura small { display: block; color: rgb(254 254 254 / .8); font-size: var(--t-xs); font-weight: 500; }
.cultura:hover { color: var(--branco); }
.cultura:hover strong { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 900px) { .culturas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* ---------- Caminhos (pronto × na fazenda) ---------- */
.caminhos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.caminho { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-midia); overflow: hidden; background: var(--branco); border: 1px solid var(--linha); }
.caminho__foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--nevoa); }
.caminho__foto img { width: 100%; height: 100%; object-fit: cover; }
.caminho__corpo { padding: var(--e-6); display: grid; gap: var(--e-4); align-content: start; }
.caminho__corpo ul { display: grid; gap: var(--e-2); }
.caminho--escuro { background: var(--mata); border-color: var(--mata); color: rgb(254 254 254 / .82); }
.caminho--escuro :is(h3, strong) { color: var(--branco); }
.caminho__nota { margin-top: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--linha); font-size: var(--t-sm); }
.caminho--escuro .caminho__nota { border-color: var(--linha-escura); }
@media (max-width: 820px) { .caminhos { grid-template-columns: 1fr; } }

/* Lista com marcador de broto */
.lista { display: grid; gap: var(--e-2); list-style: none; }
.lista li { position: relative; padding-left: 1.6em; }
.lista li::before {
  content: ""; position: absolute; left: .15em; top: .5em; width: .7em; height: .7em;
  border-radius: 50% 0 50% 0; background: var(--folha); transform: rotate(-45deg) scale(.9);
}
.secao--mata .lista li::before, .caminho--escuro .lista li::before { background: var(--broto); }

/* ---------- Passos do protocolo (sequência real) ---------- */
.passos { counter-reset: passo; display: grid; gap: 0; list-style: none; }
.passos > li { counter-increment: passo; display: grid; grid-template-columns: 3.2rem 1fr; gap: var(--e-4); padding: var(--e-5) 0; border-top: 1px solid var(--linha); }
.passos > li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--fonte-dado); font-size: var(--t-md); color: var(--folha); line-height: 1.2;
}
.passos h3 { margin-bottom: var(--e-2); }
.passos p, .passos li li { font-size: var(--t-sm); }
.passos ul { margin-top: var(--e-2); display: grid; gap: var(--e-1); list-style: disc; padding-left: 1.1em; }
.secao--mata .passos > li { border-color: var(--linha-escura); }
.secao--mata .passos > li::before { color: var(--broto); }
.passos--grade { grid-template-columns: repeat(4, 1fr); gap: var(--e-5); }
.passos--grade > li { grid-template-columns: 1fr; gap: var(--e-3); }
@media (max-width: 900px) { .passos--grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .passos--grade { grid-template-columns: 1fr; } }

/* ---------- Tabela técnica (vira cartões no celular) ---------- */
.tabela-rolagem { border: 1px solid var(--linha); border-radius: var(--r-bloco); overflow: hidden; background: var(--branco); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela caption { text-align: left; padding: var(--e-4); font-weight: 700; color: var(--mata); }
.tabela th, .tabela td { text-align: left; padding: .85em 1em; border-top: 1px solid var(--linha); vertical-align: top; }
.tabela thead th { background: var(--nevoa); font-size: var(--t-xs); font-weight: 650; color: var(--texto-suave); border-top: 0; }
.tabela tbody th { font-weight: 700; color: var(--mata); }
.tabela .num { text-align: right; font-family: var(--fonte-dado); white-space: nowrap; }
@media (max-width: 680px) {
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela tr { display: block; padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linha); }
  .tabela tbody tr:first-child { border-top: 0; }
  .tabela th, .tabela td { display: block; border: 0; padding: .2em 0; }
  .tabela td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-weight: 650; color: var(--texto-suave); font-family: var(--fonte); }
  .tabela .num { text-align: left; }
}

/* ---------- Ficha de produto ---------- */
.ficha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.ficha__midia { position: sticky; top: 100px; }
.ficha__info { display: grid; gap: var(--e-5); }
.ficha__info h1 { font-size: var(--t-2xl); }
.ficha__micro { font-size: var(--t-md); font-style: italic; color: var(--texto-suave); }
.ficha__culturas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.etiqueta { display: inline-block; padding: .3em .8em; border-radius: var(--r-pilula); background: var(--nevoa); font-size: var(--t-xs); font-weight: 650; color: var(--mata); text-decoration: none; }
a.etiqueta:hover { background: var(--mata); color: var(--branco); }
.especificacoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--linha); border-radius: var(--r-bloco); overflow: hidden; }
.especificacoes > div { padding: var(--e-4); border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); margin: 0 -1px -1px 0; }
.especificacoes dt { font-size: var(--t-xs); font-weight: 600; color: var(--texto-suave); }
.especificacoes dd { margin: var(--e-1) 0 0; font-weight: 700; color: var(--mata); }
@media (max-width: 860px) { .ficha { grid-template-columns: 1fr; } .ficha__midia { position: static; max-width: 420px; } }

.ancoras { position: sticky; top: 76px; z-index: 20; background: rgb(254 254 254 / .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.ancoras ul { display: flex; gap: var(--e-1); overflow-x: auto; list-style: none; scrollbar-width: none; }
.ancoras a { display: block; padding: .9em .8em; white-space: nowrap; font-size: var(--t-sm); font-weight: 650; color: var(--texto-suave); text-decoration: none; border-bottom: 2px solid transparent; }
.ancoras a:hover { color: var(--mata); border-color: var(--broto); }

.bloco-duplo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.bloco-duplo--midia { align-items: center; }
.bloco-duplo__foto { border-radius: var(--r-midia); overflow: hidden; }
.bloco-duplo__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 860px) { .bloco-duplo { grid-template-columns: 1fr; } }

/* Modo de ação em etapas */
.modo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e-4); counter-reset: modo; list-style: none; }
.modo li { counter-increment: modo; padding: var(--e-5); border-radius: var(--r-bloco); background: var(--nevoa); }
.modo li::before { content: counter(modo); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mata); color: var(--broto); font-family: var(--fonte-dado); margin-bottom: var(--e-3); }

/* Documentos */
.documentos { display: grid; gap: var(--e-3); }
.documento { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-4); align-items: center; padding: var(--e-4); border: 1px solid var(--linha); border-radius: var(--r-bloco); background: var(--branco); }
.documento svg { width: 28px; height: 28px; color: var(--folha); }
.documento strong { display: block; }
.documento span { font-size: var(--t-sm); color: var(--texto-suave); }
@media (max-width: 560px) { .documento { grid-template-columns: auto 1fr; } .documento .btn { grid-column: 1 / -1; } }

/* Equivalência pronto ↔ kit */
.equivalencia { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--e-4); align-items: center; padding: var(--e-5); border-radius: var(--r-midia); background: var(--mata); color: rgb(254 254 254 / .8); }
.equivalencia h3, .equivalencia strong { color: var(--branco); }
.equivalencia__seta { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--broto); display: grid; place-items: center; color: var(--broto); }
.equivalencia a { color: var(--broto); }
@media (max-width: 680px) { .equivalencia { grid-template-columns: 1fr; } .equivalencia__seta { transform: rotate(90deg); } }

/* ---------- Custo (calculadora) ---------- */
.custo { color: var(--palha-escura); font-family: var(--fonte-dado); font-weight: 500; }
.secao--mata .custo, .secao--solo .custo, .calc__resultado .custo { color: var(--palha); }

.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: var(--r-midia); overflow: hidden; border: 1px solid var(--linha); background: var(--branco); }
.calc__entrada { padding: var(--e-6); display: grid; gap: var(--e-4); align-content: start; }
.calc__resultado { padding: var(--e-6); background: var(--solo); color: rgb(254 254 254 / .8); display: grid; gap: var(--e-5); align-content: start; }
.calc__resultado h3 { color: var(--branco); }
.barras { display: grid; gap: var(--e-4); }
.barra { display: grid; gap: var(--e-2); }
.barra__topo { display: flex; justify-content: space-between; gap: var(--e-3); align-items: baseline; font-size: var(--t-sm); }
.barra__topo strong { color: var(--branco); font-weight: 650; }
.barra__valor { font-family: var(--fonte-dado); font-size: var(--t-lg); color: var(--branco); white-space: nowrap; }
.barra__trilho { height: 14px; border-radius: var(--r-pilula); background: rgb(254 254 254 / .08); overflow: hidden; }
.barra__cheio { height: 100%; border-radius: inherit; background: var(--cinza); width: 0; transition: width 500ms cubic-bezier(.2, .8, .2, 1); }
.barra--onfarm .barra__cheio { background: var(--broto); }
.economia { padding: var(--e-5); border-radius: var(--r-bloco); background: rgb(210 174 109 / .12); border: 1px solid rgb(210 174 109 / .35); }
.economia__valor { font-family: var(--fonte-dado); font-size: var(--t-xl); color: var(--palha); line-height: 1.1; }
.economia p { font-size: var(--t-sm); margin-top: var(--e-2); }
.calc__aviso { font-size: var(--t-xs); color: rgb(254 254 254 / .6); line-height: 1.5; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* ---------- Formulário ---------- */
.form { display: grid; gap: var(--e-4); }
.form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
@media (max-width: 560px) { .form__linha { grid-template-columns: 1fr; } }
.campo { display: grid; gap: var(--e-1); }
.campo label { font-size: var(--t-sm); font-weight: 650; color: var(--mata); }
.campo small { font-size: var(--t-xs); color: var(--texto-suave); }
.campo :is(input, select, textarea) {
  width: 100%; min-height: 48px; padding: .7em .9em;
  border: 1.5px solid var(--linha); border-radius: var(--r-controle); background: var(--branco);
  font-size: var(--t-base); color: var(--grafite);
  transition: border-color var(--duracao);
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo :is(input, select, textarea):hover { border-color: var(--cinza); }
.campo :is(input, select, textarea):focus-visible { border-color: var(--folha); box-shadow: 0 0 0 3px rgb(57 123 53 / .45); }
.campo [aria-invalid="true"] { border-color: var(--alerta); }
.campo__erro { color: var(--alerta); font-size: var(--t-xs); font-weight: 600; }
.campo--isca { position: absolute; left: -9999px; }
.consentimento { display: flex; gap: var(--e-3); align-items: flex-start; font-size: var(--t-sm); color: var(--texto-suave); }
.consentimento input { margin-top: .3em; width: 18px; height: 18px; accent-color: var(--folha); flex: none; }
.form__estado { padding: var(--e-4); border-radius: var(--r-controle); font-size: var(--t-sm); font-weight: 600; }
.form__estado[hidden] { display: none; }
.form__estado--ok { background: rgb(57 123 53 / .1); color: var(--folha-escura); }
.form__estado--erro { background: rgb(163 65 44 / .1); color: var(--alerta); }
.secao--mata .campo label { color: var(--branco); }

/* ---------- Contato ---------- */
.contato { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 1rem + 4vw, 5rem); }
.canais { display: grid; gap: var(--e-4); margin-top: var(--e-6); }
.canal { display: grid; grid-template-columns: 44px 1fr; gap: var(--e-4); align-items: start; }
.canal__icone { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgb(168 207 69 / .14); color: var(--broto); }
.canal__icone svg { width: 20px; height: 20px; }
.canal span { display: block; font-size: var(--t-xs); color: rgb(254 254 254 / .6); }
.canal a, .canal p { color: var(--branco); font-weight: 650; }
.contato__form { background: var(--branco); color: var(--grafite); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-midia); }
.contato__form :is(h2, h3) { color: var(--mata); }
@media (max-width: 860px) { .contato { grid-template-columns: 1fr; } }

/* ---------- Galeria da empresa ---------- */
.galeria { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: var(--e-3); }
.galeria figure { margin: 0; position: relative; border-radius: var(--r-bloco); overflow: hidden; background: var(--nevoa); }
.galeria figure:first-child { grid-row: span 2; }
.galeria img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.galeria figure:first-child img { aspect-ratio: auto; min-height: 100%; }
.galeria figcaption { position: absolute; left: var(--e-3); bottom: var(--e-3); padding: .3em .7em; border-radius: var(--r-pilula); background: rgb(29 43 30 / .78); color: var(--branco); font-size: var(--t-xs); font-weight: 650; }
@media (max-width: 720px) { .galeria { grid-template-columns: 1fr 1fr; } .galeria figure:first-child { grid-column: 1 / -1; grid-row: auto; } }

.cepas { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; }
.cepas li { padding: .4em .85em; border-radius: var(--r-pilula); border: 1px solid var(--linha-escura); font-style: italic; font-size: var(--t-sm); color: rgb(254 254 254 / .88); }

.divisoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
.divisao { padding: var(--e-5); border-radius: var(--r-bloco); background: var(--branco); border: 1px solid var(--linha); border-top: 4px solid var(--cor, var(--folha)); }
.divisao--verde { --cor: var(--div-bioinsumos); }
.divisao--azul { --cor: var(--div-laboratorio); }
.divisao--cinza { --cor: var(--div-reatores); }
.divisao h3 { margin-bottom: var(--e-2); }
.divisao p { font-size: var(--t-sm); }
@media (max-width: 820px) { .divisoes { grid-template-columns: 1fr; } }

/* ---------- Catálogo ---------- */
.catalogo { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--e-7); align-items: start; }
.filtros { position: sticky; top: 96px; display: grid; gap: var(--e-5); }
.filtros fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.filtros legend { font-weight: 700; color: var(--mata); font-size: var(--t-sm); margin-bottom: var(--e-2); }
.filtros label { display: flex; gap: var(--e-2); align-items: center; font-size: var(--t-sm); cursor: pointer; padding: .2em 0; }
.filtros input { accent-color: var(--folha); width: 17px; height: 17px; }
.filtros select { width: 100%; min-height: 44px; padding: .5em .7em; border: 1.5px solid var(--linha); border-radius: var(--r-controle); background: var(--branco); }
.catalogo__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); margin-bottom: var(--e-5); flex-wrap: wrap; }
.catalogo__conta { font-weight: 700; color: var(--mata); }
.catalogo__vazio { padding: var(--e-7); text-align: center; border: 1px dashed var(--linha); border-radius: var(--r-bloco); }
.filtros__abrir { display: none; }
@media (max-width: 900px) {
  .catalogo { grid-template-columns: 1fr; gap: var(--e-5); }
  .filtros { position: static; display: none; padding: var(--e-4); border: 1px solid var(--linha); border-radius: var(--r-bloco); }
  .filtros.aberto { display: grid; }
  .filtros__abrir { display: inline-flex; }
}

/* ---------- Faixa de chamada ---------- */
.chamada { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-midia); padding: clamp(2rem, 1rem + 4vw, 4rem); background: var(--mata); color: rgb(254 254 254 / .82); }
.chamada h2 { color: var(--branco); max-width: 30rem; }
.chamada p { max-width: 34rem; margin-top: var(--e-4); }
.chamada .acoes { margin-top: var(--e-5); }
.chamada canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .55; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--solo); color: rgb(254 254 254 / .7); padding-block: var(--e-8) var(--e-6); font-size: var(--t-sm); }
.rodape__grade { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--e-6); }
.rodape img { height: 64px; width: auto; }
.rodape h2 { font-size: var(--t-sm); color: var(--branco); font-weight: 700; letter-spacing: 0; margin-bottom: var(--e-3); }
.rodape ul { display: grid; gap: var(--e-2); list-style: none; }
.rodape a { color: rgb(254 254 254 / .78); text-decoration: none; }
.rodape a:hover { color: var(--broto); text-decoration: underline; }
.rodape__base { margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--linha-escura); display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); justify-content: space-between; font-size: var(--t-xs); }
@media (max-width: 860px) { .rodape__grade { grid-template-columns: 1fr 1fr; } .rodape__grade > :first-child { grid-column: 1 / -1; } }

/* WhatsApp flutuante */
.zap-flutuante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: #1f8a4c; color: var(--branco); box-shadow: 0 12px 28px -10px rgb(0 0 0 / .45);
}
.zap-flutuante:hover { background: #176f3c; color: var(--branco); }
.zap-flutuante svg { width: 28px; height: 28px; }

/* Aviso de privacidade (sem bloquear a página) */
.aviso {
  position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 45;
  max-width: 380px; padding: var(--e-4) var(--e-5); border-radius: var(--r-bloco);
  background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra-elevada);
  font-size: var(--t-xs); display: grid; gap: var(--e-3);
}
.aviso[hidden] { display: none; }
.aviso .btn { min-height: 38px; justify-self: start; }
@media (max-width: 560px) { .aviso { right: 88px; } }

/* Faixa de órgãos e registros */
.orgaos { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); list-style: none; font-weight: 700; color: var(--mata); }

/* ---------- Perguntas frequentes ---------- */
.faq { display: grid; border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; padding: var(--e-4) 2.5rem var(--e-4) 0; position: relative; font-weight: 700; color: var(--mata); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .5rem; top: 50%; width: .55em; height: .55em; border: solid var(--folha); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform var(--duracao); }
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq details p { padding-bottom: var(--e-5); color: var(--texto-suave); }

/* ---------- Texto longo (privacidade) ---------- */
.texto-longo h2 { font-size: var(--t-lg); margin: var(--e-6) 0 var(--e-3); }
.titulo-form { font-size: var(--t-lg); }
.topo.rolou { box-shadow: 0 8px 24px -18px rgb(29 43 30 / .5); }
.pedido-docs summary { list-style: none; }
.pedido-docs summary::-webkit-details-marker { display: none; }

/* Ajustes da revisão visual */
@media (min-width: 1081px) {
  .topo__nav { display: flex; align-items: center; margin-left: auto; gap: var(--e-2); }
}
.contato__form .campo label { color: var(--mata); }
@media (min-width: 900px) {
  .hero:not(.hero--pagina) .hero__midia { left: 22%; }
}
.ficha__info .registro, .divisao .registro { justify-self: start; }
.menu__link { white-space: nowrap; }
@media (min-width: 1081px) and (max-width: 1240px) { .menu__link { padding-inline: .55em; } .topo__barra { gap: var(--e-3); } }
.sub { display: block; font-weight: 450; font-size: var(--t-xs); color: var(--texto-suave); text-wrap: balance; }
.documento span, .equivalencia strong { display: block; text-wrap: balance; }
@media (max-width: 680px) { .tabela thead { display: none; } .hero__texto { font-size: var(--t-base); } }
.inteira { white-space: nowrap; }
@media (max-width: 860px) {
  .bloco-duplo, .ficha, .contato, .calc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; text-wrap: balance; }
}
.rodape a { overflow-wrap: anywhere; }
@media (max-width: 420px) { .rodape__grade { grid-template-columns: 1fr; } }
@media (max-width: 400px) {
  .topo__barra { gap: var(--e-3); }
  .topo__logo img { height: 30px; }
  .topo__abrir { padding: 0 .8em; }
}
.barra__topo { flex-wrap: wrap; }
.caminho--escuro a:not(.btn) { color: var(--broto); }
@media (max-width: 560px) {
  .grade-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-3); }
  .produto__nome { font-size: var(--t-base); }
  .produto__micro { font-size: var(--t-xs); }
  .grade-problemas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .problema { min-height: 170px; padding: var(--e-3); }
  .problema strong { font-size: var(--t-base); }
}
.registro .dado { white-space: nowrap; }
.produto__micro, .produto__nome { overflow-wrap: anywhere; }
@media (min-width: 1081px) and (max-width: 1360px) {
  .menu__link { padding-inline: .5em; font-size: .875rem; }
  .topo__barra { gap: var(--e-3); }
  .topo__logo img { height: 34px; }
}
@media (max-width: 359px) { .grade-produtos { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) {
  .hero:not(.hero--pagina) .hero__midia { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
}
.placa:not(.placa--kit) img { mix-blend-mode: multiply; }
@media (min-width: 1081px) { .painel { left: 0; translate: none; } }
/* Faixa de entrega acima do cabeçalho */
.faixa-topo { background: var(--solo); color: var(--broto); font-size: var(--t-xs); font-weight: 600; }
.faixa-topo .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em .9em; padding-block: .5em; text-align: center; }
.faixa-topo span[aria-hidden] { color: rgb(168 207 69 / .5); }
@media (max-width: 480px) { .faixa-topo span[aria-hidden] { display: none; } .faixa-topo .wrap { flex-direction: column; gap: 0; } }

/* Ícones dos canais: o círculo não pode virar bloco de texto */
.canal span.canal__icone { display: grid; place-items: center; font-size: inherit; color: var(--broto); }

/* Faixa de chamada com foto da lavoura no fundo */
.chamada__fundo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.chamada::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(29 43 30 / .94) 0%, rgb(29 43 30 / .8) 50%, rgb(29 43 30 / .35) 100%); }
.chamada .btn--linha { color: var(--branco); }
.chamada .btn--linha:hover { background: var(--branco); color: var(--mata); }
.filtros input[type="search"] { width: 100%; min-height: 44px; padding: .5em .7em; border: 1.5px solid var(--linha); border-radius: var(--r-controle); background: var(--branco); }

/* ---------- Busca da home ---------- */
.busca { margin-top: var(--e-3); max-width: 42rem; display: grid; gap: var(--e-3); }
.busca__form {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-2);
  padding: .4rem .4rem .4rem 1.1rem; border-radius: var(--r-pilula);
  background: var(--branco); box-shadow: 0 20px 50px -20px rgb(0 0 0 / .55);
}
.busca__form:focus-within { box-shadow: 0 0 0 3px var(--broto), 0 20px 50px -20px rgb(0 0 0 / .55); }
.busca__lupa { width: 22px; height: 22px; color: var(--folha); }
.busca__form input { border: 0; background: transparent; min-height: 48px; font-size: var(--t-base); color: var(--grafite); width: 100%; outline: none; }
.busca__form input::placeholder { color: var(--texto-suave); }
.busca__form input:focus-visible { box-shadow: none; }
.busca__form .btn { min-height: 48px; }
.busca__sugestoes {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; list-style: none;
  background: var(--branco); border-radius: var(--r-bloco); box-shadow: var(--sombra-elevada); padding: var(--e-2); color: var(--grafite);
  max-height: 60vh; overflow-y: auto;
}
.busca__sugestoes a { display: grid; gap: 2px; padding: .6em .8em; border-radius: var(--r-controle); text-decoration: none; color: var(--mata); }
.busca__sugestoes a:hover, .busca__sugestoes a.ativo { background: var(--nevoa); }
.busca__sugestoes strong { font-size: var(--t-sm); }
.busca__sugestoes span { font-size: var(--t-xs); color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca__todos a { color: var(--folha); font-weight: 700; font-size: var(--t-sm); border-top: 1px solid var(--linha); border-radius: 0; margin-top: var(--e-1); }
.busca__nada { padding: .8em; font-size: var(--t-sm); color: var(--texto-suave); }
.busca__atalhos { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; font-size: var(--t-sm); }
.busca__atalhos span { color: rgb(254 254 254 / .75); margin-right: var(--e-1); }
.busca__atalhos a { padding: .3em .85em; border-radius: var(--r-pilula); border: 1px solid rgb(254 254 254 / .35); color: var(--branco); text-decoration: none; font-weight: 600; }
.busca__atalhos a:hover { background: var(--branco); color: var(--mata); }
@media (max-width: 560px) {
  .busca__form { grid-template-columns: auto 1fr; border-radius: var(--r-bloco); padding: .4rem .4rem .4rem .9rem; }
  .busca__form .btn { grid-column: 1 / -1; }
}
/* Hero da home: lista de sugestões pode passar da borda; título cabe com a busca na primeira tela */
.hero:not(.hero--pagina) { overflow: visible; z-index: 2; }
.hero:not(.hero--pagina) .hero__midia { overflow: hidden; }
.hero:not(.hero--pagina) h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4rem); }
.hero:not(.hero--pagina) .hero__conteudo { padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); gap: var(--e-4); }
.produto__ver { margin-top: var(--e-1); }
.produto:hover .produto__ver::after { transform: translateX(3px) rotate(45deg); }
.placa--frasco img { width: 92%; height: 92%; }

/* Busca da home com efeito vidro: o vídeo vaza desfocado por trás */
.busca__form {
  background: rgb(254 254 254 / .12);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgb(254 254 254 / .55);
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / .6);
}
.busca__form:focus-within { border-color: var(--broto); box-shadow: 0 0 0 2px rgb(168 207 69 / .45), 0 18px 40px -24px rgb(0 0 0 / .6); }
.busca__lupa { color: var(--branco); }
.busca__form input { color: var(--branco); }
.busca__form input::placeholder { color: rgb(254 254 254 / .82); }
.busca__form input::-webkit-search-cancel-button { filter: invert(1); }
.busca__form .btn { background: var(--broto); color: var(--solo); }
.busca__form .btn:hover { background: #bcdd63; color: var(--solo); }

/* ---------- Calculadora simples (topo de funil) ---------- */
.simples { display: grid; gap: var(--e-7); padding: var(--e-6); border: 1px solid var(--linha); border-radius: var(--r-midia); background: var(--branco); }
.simples[hidden], .simples-resultado[hidden] { display: none; }
.simples fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e-3); min-width: 0; }
.simples legend { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-lg); font-weight: 750; color: var(--mata); margin-bottom: var(--e-3); text-wrap: balance; }
.simples__num { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--folha); color: var(--branco); font-size: var(--t-base); }
.opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--e-3); }
.opcoes--cultura { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.opcao { position: relative; display: grid; grid-template-rows: auto 1fr; border: 2px solid var(--linha); border-radius: var(--r-bloco); overflow: hidden; cursor: pointer; background: var(--branco); transition: border-color var(--duracao), box-shadow var(--duracao); }
.opcao[hidden] { display: none; }
.opcao:hover { border-color: var(--cinza); }
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.opcao span { padding: var(--e-2) var(--e-3) var(--e-3); font-weight: 700; color: var(--mata); line-height: 1.3; }
.opcao small { display: block; margin-top: 2px; font-weight: 400; font-size: var(--t-xs); color: var(--texto-suave); }
.opcao:has(input:focus-visible) { box-shadow: 0 0 0 3px rgb(57 123 53 / .45); }
.opcao:has(input:checked) { border-color: var(--folha); box-shadow: 0 0 0 3px rgb(57 123 53 / .2); }
.opcao:has(input:checked)::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--folha); color: var(--branco); font-weight: 800; }
.simples__area { display: flex; align-items: center; gap: var(--e-3); max-width: 18rem; }
.simples__area input { font-size: var(--t-lg); font-family: var(--fonte-dado); }
.simples__area span { font-weight: 700; color: var(--mata); }
.simples > .btn { justify-self: start; }

.caixa { border: 0; padding: var(--e-6); width: min(30rem, calc(100% - 32px)); border-radius: var(--r-midia); background: var(--branco); box-shadow: var(--sombra-elevada); color: var(--grafite); }
.caixa::backdrop { background: rgb(29 43 30 / .6); }
.caixa .form { position: relative; }
.caixa__fechar { position: absolute; top: -12px; right: -12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 28px; line-height: 1; color: var(--texto-suave); cursor: pointer; }
.caixa__fechar:hover { background: var(--nevoa); color: var(--mata); }
.caixa .titulo-form { padding-right: var(--e-6); }

.simples-resultado { display: grid; gap: var(--e-4); padding: var(--e-6); border-radius: var(--r-midia); background: var(--solo); color: rgb(254 254 254 / .85); scroll-margin-top: 96px; }
.simples-resultado:focus { outline: none; }
.simples-resultado__rotulo { font-size: var(--t-sm); font-weight: 650; color: var(--broto); text-transform: uppercase; letter-spacing: .06em; }
.simples-resultado__valor { font-family: var(--fonte-dado); font-size: var(--t-hero); line-height: 1; color: var(--palha); }
.simples-resultado__itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-3); margin-top: var(--e-3); }
.item-economia { display: grid; gap: var(--e-2); align-content: start; padding: var(--e-5); border-radius: var(--r-bloco); background: rgb(254 254 254 / .06); border: 1px solid rgb(254 254 254 / .12); }
.item-economia h3 { color: var(--branco); font-size: var(--t-base); }
.item-economia strong { color: var(--branco); }
.item-economia__pct { font-family: var(--fonte-dado); font-size: var(--t-lg); color: var(--palha); }
.item-economia__nota { font-size: var(--t-sm); color: rgb(254 254 254 / .7); }
.simples-resultado .acoes { margin-top: var(--e-3); }

.modo-tecnico > summary { cursor: pointer; font-weight: 700; color: var(--mata); padding: var(--e-4) 0; }
.modo-tecnico[open] > summary { margin-bottom: var(--e-5); }
@media (max-width: 560px) {
  .simples, .simples-resultado { padding: var(--e-5) var(--e-4); }
  .opcoes, .opcoes--cultura { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}