/* =========================================================================
   NutriCafé — landing comercial (/conheca)

   Escrita à mão, sem framework: a página inteira precisa abrir rápido em
   4G no meio da lavoura, e o Flutter NÃO é carregado aqui.

   TEMA
   A página assume o tema claro de propósito — é material de marketing, e a
   identidade do produto é verde sobre branco. Por isso `color-scheme: light`
   e toda cor pintada explicitamente: nada fica no escuro se o aparelho do
   visitante estiver em modo noturno.

   MOBILE FIRST
   Os estilos base são os do celular. As media queries só acrescentam a
   partir de 768px. Nenhum elemento tem largura mínima maior que a tela.
   ========================================================================= */

:root {
  color-scheme: light;

  /* Marca — as duas cores vêm do aplicativo, não foram inventadas aqui. */
  --verde-escuro: #1B5E20;
  --verde: #25613A;
  --verde-vivo: #2E7D32;
  --verde-claro: #4CAF50;

  /* Neutros puxados para o verde: cinza puro ao lado de verde parece sujo. */
  --papel: #FFFFFF;
  --papel-tinta: #F2F5EE;
  --papel-hero: #F6FAF2;
  --tinta: #151B12;
  --tinta-2: #3F4A39;
  --tinta-3: #6B7563;
  --linha: #E1E7D9;
  --linha-forte: #CBD4BE;


  --fonte-titulo: Figtree, "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-texto: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --faixa-max: 1180px;
  --gutter: 20px;

  --raio: 12px;
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px; /* o cabeçalho é fixo: sem isso a âncora fica atrás dele */
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Trava contra rolagem lateral. As duas linhas são de propósito:
     `clip` não cria contexto de rolagem e por isso NÃO quebra o
     `position: sticky` do cabeçalho — `hidden` quebraria. Quem não
     entende `clip` ignora a segunda linha e fica com a primeira. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--verde); }

/* Foco visível em tudo que recebe teclado — obrigatório, não enfeite. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--verde-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--verde-escuro);
  color: #FFFFFF;
  padding: 12px 18px;
  z-index: 100;
  text-decoration: none;
  border-radius: 0 0 var(--raio) 0;
}
.pular:focus {
  left: 0;
}

/* A faixa é o único lugar que define a margem lateral da página.
   Padding-block separado para a lateral nunca ser zerada por engano. */
.faixa {
  width: 100%;
  max-width: var(--faixa-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.centralizado { text-align: center; }

/* Trecho de texto que só cabe a partir do tablet. Fica fora da tela em vez
   de `display: none` para continuar sendo lido em voz alta: quem usa leitor
   de tela ouve "Já sou cliente — Entrar" inteiro, em qualquer largura. */
.so-largo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border-radius: var(--raio);
  border: 2px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  min-height: 48px;            /* alvo de toque confortável */
  padding: 13px 26px;
  font-size: 16px;
  letter-spacing: .01em;
}

.botao--pequeno {
  min-height: 44px;
  padding: 9px 18px;
  font-size: 15px;
}

.botao--grande {
  min-height: 56px;
  padding: 16px 34px;
  font-size: 17px;
  width: 100%;                 /* no celular o botão ocupa a largura toda */
}

.botao--solido {
  background: var(--verde-escuro);
  color: #FFFFFF;
  border-color: var(--verde-escuro);
}
.botao--solido:hover {
  background: var(--verde-vivo);
  border-color: var(--verde-vivo);
}
.botao--solido:active { transform: translateY(1px); }

.botao--vazado {
  background: transparent;
  color: var(--verde-escuro);
  border-color: var(--linha-forte);
}
.botao--vazado:hover {
  border-color: var(--verde);
  background: var(--papel-tinta);
}

/* Sobre fundo verde, os papéis se invertem. */
.secao--verde .botao--vazado,
.secao--fechamento .botao--vazado {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .45);
}

/* ---------- cabeçalho ---------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px); /* o Safari ainda exige o prefixo */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
  padding-block: 10px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.cabecalho.rolou {
  border-bottom-color: var(--linha);
  box-shadow: 0 1px 12px rgba(21, 27, 18, .05);
}

.cabecalho__faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tinta);
  flex-shrink: 0;
}
.marca__selo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(21, 27, 18, .12);
}
.marca__nome {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.02em;
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Atalhos do cabeçalho — escondidos no celular, onde o espaço pertence ao
   "Entrar". Aparecem a partir de 1024px. */
.cabecalho__atalhos { display: none; }
.cabecalho__atalhos a {
  color: var(--tinta-2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 2px;
}
.cabecalho__atalhos a:hover { color: var(--verde); }

/* No celular este link é o único caminho de volta para o sistema. O padding
   existe para o alvo de toque chegar aos 44px de altura — o texto sozinho
   daria 24px, que é onde o dedo erra. */
.link-entrar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  font-weight: 600;
  font-size: 15px;
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
}
.link-entrar:hover { color: var(--verde); text-decoration: underline; }

/* No celular só o link de entrar aparece: dois botões lado a lado
   espremeriam a marca e nenhum dos dois ficaria confortável de tocar. */
#header_cta { display: none; }

/* ---------- hero ---------- */

.hero {
  background: linear-gradient(180deg, var(--papel-hero) 0%, var(--papel) 88%);
  padding-block: 44px 52px;
  border-bottom: 1px solid var(--linha);
}

.hero__grade {
  display: grid;
  gap: 40px;
}

.hero h1 {
  font-size: clamp(2rem, 8.4vw, 2.65rem);
  margin-bottom: 14px;
}

.hero__sub {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.1rem, 4.6vw, 1.3rem);
  color: var(--verde);
  line-height: 1.3;
  margin-bottom: 18px;
}

.hero__corpo {
  color: var(--tinta-2);
  font-size: 17px;
  max-width: 34em;
  margin-bottom: 28px;
}

.hero__acoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

/* "Teste grátis · Sem cartão para começar" — vem logo abaixo dos botões e
   responde a objeção antes que ela apareça. Verde, não cinza: é argumento. */
.hero__nota {
  font-size: 15px;
  color: var(--verde);
  font-weight: 700;
  font-family: var(--fonte-titulo);
  margin-bottom: 6px;
}

.hero__publico {
  font-size: 14.5px;
  color: var(--tinta-3);
  font-weight: 600;
}

/* ---------- composição do hero ----------
   Notebook com o painel e, sobreposto, um recorte do calendário de nutrição.
   No celular a composição aparece abaixo do texto, reduzida — o briefing
   pede para não espremer um notebook gigante em 390px. */

.hero__visual {
  position: relative;
  margin-top: 8px;
}

.notebook {
  margin: 0;
  position: relative;
}

/* A "tela" é só uma moldura escura com cantos arredondados. Nada de imagem
   de notebook: uma moldura desenhada em CSS pesa zero e nunca fica datada. */
.notebook__tela {
  background: var(--tinta);
  border-radius: 10px;
  padding: 8px 8px 0;
  box-shadow: 0 18px 44px rgba(21, 27, 18, .16);
  overflow: hidden;
}
.notebook__tela img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px 4px 0 0;
}

/* A base dá a leitura de "notebook" sem desenhar um: um trapézio claro,
   levemente mais largo que a tela. */
.notebook__base {
  height: 10px;
  margin-inline: -4%;
  background: linear-gradient(180deg, #C9CFC0 0%, #A9B29C 100%);
  border-radius: 0 0 7px 7px;
}

/* O celular encosta no canto do notebook e sangra um pouco para fora: é o
   que faz a composição ler como "o mesmo sistema nos dois lugares" em vez
   de duas imagens soltas lado a lado. */
.celular {
  margin: 0;
  position: absolute;
  right: 2%;
  bottom: -12%;
  width: 30%;
  max-width: 150px;
}
.celular img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 5px solid var(--tinta);
  box-shadow: 0 14px 34px rgba(21, 27, 18, .26);
  background: var(--papel);
}

/* ---------- seções ---------- */

.secao { padding-block: 56px; }

.secao--branca { background: var(--papel); }
.secao--tinta  { background: var(--papel-tinta); }

.secao--verde {
  background: linear-gradient(160deg, var(--verde-escuro) 0%, var(--verde) 100%);
  color: #FFFFFF;
}
.secao--verde .secao__titulo { color: #FFFFFF; }
.secao--verde .secao__apoio  { color: rgba(255, 255, 255, .84); }

.secao__titulo {
  font-size: clamp(1.55rem, 6.2vw, 2.15rem);
  max-width: 19ch;
  margin-bottom: 18px;
}
.secao--tinta .secao__titulo,
.secao--branca .secao__titulo { max-width: 22ch; }

.secao__apoio {
  color: var(--tinta-2);
  max-width: 56ch;
  font-size: 17px;
  margin-bottom: 34px;
}

.secao__fecho {
  margin-top: 34px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.15rem, 4.8vw, 1.4rem);
  color: var(--verde-escuro);
  line-height: 1.35;
  max-width: 24ch;
  padding-top: 26px;
  border-top: 3px solid var(--verde-claro);
  display: inline-block;
}

/* ---------- 2. assuntos espalhados ---------- */
/* Lista, não cartões: oito caixas com borda e sombra viram ruído. */

.assuntos {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linha);
}

.assunto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-block: 15px;
  border-bottom: 1px solid var(--linha);
}

.assunto__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--tinta);
  flex: 1 1 auto;
}

.assunto__onde {
  font-size: 15px;
  color: var(--tinta-3);
  font-style: italic;
}

/* ---------- 3. benefícios ---------- */

.beneficios {
  display: grid;
  gap: 34px;
}

.beneficio h3 {
  font-size: 19px;
  font-weight: 700;
  margin-block: 14px 7px;
}

.beneficio p {
  color: var(--tinta-2);
  font-size: 16px;
  max-width: 34ch;
}

.icone {
  width: 34px;
  height: 34px;
  color: var(--verde);
  display: block;
}

/* ---------- 4. como funciona ---------- */
/* A numeração aqui é informação: a ordem dos passos importa de verdade. */

.passos {
  display: grid;
  gap: 0;
  margin-bottom: 38px;
  counter-reset: passo;
}

.passo {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-block: 18px;
  position: relative;
}

/* O fio que liga um passo ao seguinte — some no último. */
.passo:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 58px;
  bottom: -4px;
  width: 2px;
  background: var(--linha-forte);
}

.passo__numero {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--verde-escuro);
  color: #FFFFFF;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 18px;
  position: relative;
  z-index: 1;
}

.passo__texto {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.4;
  color: var(--tinta);
  padding-top: 9px;
}

/* ---------- 5. conilon e arábica ---------- */

.variedades {
  display: grid;
  gap: 28px;
}

.variedade {
  padding-top: 22px;
  border-top: 3px solid rgba(255, 255, 255, .28);
}

.variedade h3 {
  font-size: 20px;
  color: #FFFFFF;
  margin-bottom: 10px;
}

.variedade p {
  color: rgba(255, 255, 255, .84);
  font-size: 16.5px;
  max-width: 40ch;
}

/* =========================================================================
   6. PLANOS

   Nada aqui inventa hierarquia: o cartão em destaque é o Gestão porque ele
   é o recomendado, e o Pro fica numa faixa à parte justamente para não
   disputar atenção com os três.
   ========================================================================= */

/* Só para leitor de tela, em qualquer largura. Diferente de .so-largo,
   que reaparece no tablet. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cartoes {
  display: grid;
  gap: 18px;
  margin-bottom: 26px;
}

.cartao {
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 26px 24px;
}

/* O destaque é uma borda verde e um pouco mais de ar — não um cartão
   maior, que empurraria os outros dois para fora de escala. */
.cartao--destaque {
  border: 2px solid var(--verde);
  padding-block: 30px;
  box-shadow: 0 10px 30px rgba(27, 94, 32, .09);
}

.cartao__topo { margin-bottom: 18px; }

/* O selo não depende só de cor: ele é uma palavra. */
.selo {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--verde-escuro);
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.cartao__nome {
  font-size: 23px;
  margin-bottom: 6px;
}

.cartao__para {
  color: var(--tinta-3);
  font-size: 15.5px;
  line-height: 1.45;
}

.cartao__preco {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--linha);
  min-height: 62px;  /* reserva a altura: o preço chega depois e não pode empurrar o cartão */
}

.cartao__valor {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -.03em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.cartao__periodo {
  font-size: 16px;
  color: var(--tinta-3);
  font-weight: 600;
}

.cartao__carregando,
.cartao__preco--sem {
  font-size: 16.5px;
  color: var(--tinta-3);
  font-weight: 600;
}

.cartao__recursos {
  display: grid;
  gap: 11px;
  margin-bottom: 24px;
  flex: 1 1 auto;   /* empurra o botão para a base, alinhando os três cartões */
}

.recurso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--tinta-2);
}

.recurso--limite {
  font-weight: 600;
  color: var(--tinta);
}

/* "Tudo do Produtor, e mais:" — não é um recurso, é o fio que liga um
   plano ao anterior. Sem marca de confirmação e com um respiro acima. */
.recurso--heranca {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 14px;
  color: var(--verde);
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--linha);
}

.recurso__marca {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  color: var(--verde);
}

.botao--bloco { width: 100%; }

/* ---------- estado de falha ---------- */

.planos__falha {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 34px 26px;
  text-align: center;
}
.planos__falha h3 { font-size: 21px; margin-bottom: 10px; }
.planos__falha p {
  color: var(--tinta-2);
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: 22px;
}

/* ---------- faixa do Pro ---------- */

.faixa-pro {
  display: grid;
  gap: 18px;
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  border-left: 4px solid var(--verde);
  border-radius: var(--raio);
  padding: 24px;
  margin-bottom: 26px;
}

.faixa-pro h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.faixa-pro__nome {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 21px;
  color: var(--verde-escuro);
  margin-bottom: 4px;
}

.faixa-pro__limites {
  color: var(--tinta-2);
  font-size: 15.5px;
}

.faixa-pro__lado {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.faixa-pro__preco {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.faixa-pro__preco .cartao__valor { font-size: 27px; }

/* ---------- comparação ---------- */

.comparacao { margin-top: 4px; }

.comparar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 16px;
  color: var(--verde-escuro);
  border-bottom: 2px solid var(--verde-claro);
  border-radius: 0;
}
.comparar:hover { color: var(--verde-vivo); }

.comparar__seta {
  width: 15px;
  height: 15px;
  transition: transform .2s ease;
}
.comparar[aria-expanded="true"] .comparar__seta { transform: rotate(180deg); }

.tabela-planos { margin-top: 26px; }

.seletor-coluna {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.coluna-btn {
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid var(--linha-forte);
  background: var(--papel);
  border-radius: 999px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--tinta-2);
  cursor: pointer;
}
.coluna-btn--ativa {
  background: var(--verde-escuro);
  border-color: var(--verde-escuro);
  color: #FFFFFF;
}
.coluna-btn:focus-visible {
  outline: 3px solid var(--verde-claro);
  outline-offset: 2px;
}

.tabela-planos__rolagem { overflow-x: auto; }

#grade_planos {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
}

#grade_planos th,
#grade_planos td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}

#grade_planos thead th {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 16px;
  color: var(--tinta);
  border-bottom: 2px solid var(--linha-forte);
  padding-top: 0;
}

.grade__preco {
  display: block;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 14px;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.grade__categoria th {
  font-family: var(--fonte-titulo);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde);
  padding-top: 26px;
  border-bottom: 1px solid var(--linha-forte);
}

.grade__rotulo {
  font-weight: 400;
  color: var(--tinta-2);
}

.grade__valor {
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.grade__sim { color: var(--verde); font-weight: 700; }
.grade__nao { color: var(--linha-forte); }

.tabela-planos__nota {
  margin-top: 16px;
  font-size: 14px;
  color: var(--tinta-3);
}

/* No celular, uma coluna por vez: seis colunas em 375px não se leem. */
@media (max-width: 767px) {
  #grade_planos [data-col] { display: none; }
  #tabela_planos[data-coluna="BASICO"]      [data-col="BASICO"],
  #tabela_planos[data-coluna="BASICO_PLUS"] [data-col="BASICO_PLUS"],
  #tabela_planos[data-coluna="INTER_PLUS"]  [data-col="INTER_PLUS"],
  #tabela_planos[data-coluna="INTER_PRO"]   [data-col="INTER_PRO"],
  #tabela_planos[data-coluna="PRO"]         [data-col="PRO"] {
    display: table-cell;
  }
  #grade_planos thead th[data-col] { display: none; }
  #tabela_planos[data-coluna="BASICO"]      thead th[data-col="BASICO"],
  #tabela_planos[data-coluna="BASICO_PLUS"] thead th[data-col="BASICO_PLUS"],
  #tabela_planos[data-coluna="INTER_PLUS"]  thead th[data-col="INTER_PLUS"],
  #tabela_planos[data-coluna="INTER_PRO"]   thead th[data-col="INTER_PRO"],
  #tabela_planos[data-coluna="PRO"]         thead th[data-col="PRO"] {
    display: table-cell;
  }
  .grade__categoria th { display: table-cell !important; }
}

/* =========================================================================
   VEJA O NUTRICAFÉ FUNCIONANDO

   Cinco blocos de texto + captura, alternando o lado da imagem. Sem moldura
   de cartão: a própria captura já tem borda e sombra, e empilhar cartão
   sobre cartão engrossaria a página sem acrescentar leitura.
   ========================================================================= */

.demos {
  display: grid;
  gap: 52px;
}

.demo {
  display: grid;
  gap: 20px;
}

.demo__texto h3 {
  font-size: clamp(1.25rem, 5vw, 1.55rem);
  margin-bottom: 10px;
  max-width: 20ch;
}

.demo__texto p {
  color: var(--tinta-2);
  font-size: 16.5px;
  max-width: 46ch;
}

.demo__figura { margin: 0; }

/* A imagem é um <button> porque abre a ampliação: clicável por mouse, por
   toque e por teclado, sem JavaScript inventando um alvo acessível. */
.ampliar {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--papel);
  cursor: zoom-in;
  box-shadow: 0 6px 20px rgba(21, 27, 18, .08);
  transition: box-shadow .2s ease, transform .2s ease;
}
.ampliar:hover {
  box-shadow: 0 12px 30px rgba(21, 27, 18, .14);
  transform: translateY(-2px);
}
.ampliar img { width: 100%; height: auto; }

/* ---------- ampliação ---------- */

.lupa {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 14, 8, .88);
  border: 0;
}
/* Um <dialog> fechado é `display: none` por padrão do navegador — mas a
   regra acima, com `display: flex`, sobrepõe isso e fazia o botão de fechar
   aparecer solto no meio do hero. Só mostra quando está aberto. */
.lupa:not([open]) { display: none; }

.lupa img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

/* Fechar grande e no canto: no celular, o gesto natural é tocar fora, mas
   quem não descobre isso precisa de um botão que o dedo acerte. */
.lupa__fechar {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 10px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .92);
  color: var(--tinta);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lupa__fechar:focus-visible {
  outline: 3px solid var(--verde-claro);
  outline-offset: 3px;
}

/* =========================================================================
   FAZENDA MODELO

   A seção anterior alterna imagem à esquerda e à direita. Esta usa um fio
   vertical com etapas numeradas: repetir o mesmo recurso duas vezes faria a
   página inteira parecer uma coisa só, e aqui a ORDEM é o conteúdo — cada
   etapa depende da anterior.
   ========================================================================= */

.selo-demo {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde-escuro);
  background: #FFFFFF;
  border: 1.5px solid var(--verde-claro);
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* ---------- indicadores ---------- */

.indicadores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  margin: 0 0 44px;
}

.indicador {
  background: var(--papel);
  padding: 18px 16px;
}

.indicador dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-3);
  margin-bottom: 4px;
}

.indicador dd {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -.02em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.indicador dd span {
  font-size: 15px;
  font-weight: 700;
  color: var(--tinta-3);
}

/* ---------- a jornada ---------- */

.jornada {
  display: grid;
  gap: 42px;
  counter-reset: etapa;
  margin-bottom: 48px;
  position: relative;
}

.passo-fm {
  display: grid;
  gap: 16px;
  position: relative;
  padding-left: 34px;
}

/* O fio que liga uma etapa à seguinte. Some no último, senão parece que
   falta alguma coisa depois do resultado. */
.passo-fm::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 26px;
  bottom: -42px;
  width: 2px;
  background: var(--linha-forte);
}
.passo-fm:last-child::before { display: none; }

.passo-fm::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 4px var(--papel-tinta);
}

.passo-fm__etapa {
  font-family: var(--fonte-titulo);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 5px;
}

.passo-fm__texto h3 {
  font-size: clamp(1.2rem, 4.8vw, 1.45rem);
  margin-bottom: 9px;
}

.passo-fm__texto p {
  color: var(--tinta-2);
  font-size: 16.5px;
  max-width: 44ch;
}

/* A pergunta do custo por saca é o ponto em que a narrativa fecha. Merece
   peso tipográfico, não um cartão. */
.passo-fm__pergunta {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 18px;
  color: var(--verde-escuro) !important;
  margin-top: 16px;
  margin-bottom: 8px;
}

.passo-fm__figura { margin: 0; }

/* Análise, nutrição e "quanto de adubo" já apareceram em tamanho cheio na
   seção anterior. Aqui elas são referência, não apresentação: entram
   menores para a Fazenda Modelo parecer uma história e não uma segunda
   galeria das mesmas telas. Continuam clicáveis, e a ampliação mostra a
   versão @2x inteira. */
.passo-fm__figura--menor .ampliar {
  max-width: 340px;
}

/* ---------- fechamento ---------- */

.fm-fechamento {
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid var(--linha);
}

.fm-fechamento h3 {
  font-size: clamp(1.4rem, 5.6vw, 1.85rem);
  margin-bottom: 22px;
  max-width: 20ch;
  margin-inline: auto;
}

.fm-fechamento__nota {
  margin-top: 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tinta-3);
}

/* ---------- seções preparadas (dentro de <template>) ---------- */
/* O CSS já existe para que, ao publicar, baste mover o markup para fora. */

.videos { display: grid; gap: 22px; }
.video__quadro {
  aspect-ratio: 16 / 10;
  background: var(--linha);
  border-radius: var(--raio);
}
.video figcaption {
  margin-top: 10px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 16px;
}
.planos { display: grid; gap: 22px; }

/* ---------- fechamento ---------- */

.secao--fechamento {
  background: var(--papel-tinta);
  border-top: 1px solid var(--linha);
  padding-block: 62px;
}

.fechamento__titulo {
  font-size: clamp(1.6rem, 6.6vw, 2.3rem);
  max-width: 17ch;
  margin-inline: auto;
  margin-bottom: 16px;
}

.fechamento__texto {
  color: var(--tinta-2);
  font-size: 17px;
  max-width: 42ch;
  margin-inline: auto;
  margin-bottom: 30px;
}

/* ---------- rodapé ---------- */

.rodape {
  background: var(--tinta);
  color: rgba(255, 255, 255, .72);
  padding-top: 48px;
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  font-size: 15.5px;
}

.rodape__grade {
  display: grid;
  gap: 32px;
  padding-bottom: 34px;
}

.marca--rodape { color: #FFFFFF; }
.marca--rodape .marca__nome { color: #FFFFFF; }

.rodape__frase {
  margin-top: 12px;
  color: rgba(255, 255, 255, .6);
  max-width: 32ch;
  font-size: 15px;
}

.rodape__titulo {
  font-family: var(--fonte-titulo);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde-claro);
  margin-bottom: 12px;
}

.rodape__coluna li { margin-bottom: 9px; }

.rodape a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
}
.rodape a:hover { color: #FFFFFF; text-decoration: underline; }

.rodape__base {
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .55);
}
.rodape__base p { margin: 0; }
.rodape__entrar { font-weight: 600; }

/* =========================================================================
   Movimento

   Não há animação de entrada ao rolar: o conteúdo todo nasce visível, e o
   único movimento da página são as transições de hover dos botões e a
   rolagem do "Ver como funciona". Quem pediu menos movimento no sistema
   operacional não recebe nem isso.
   ========================================================================= */

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

/* =========================================================================
   A PARTIR DE 768px — tablet
   ========================================================================= */

@media (min-width: 768px) {
  :root { --gutter: 32px; }

  body { font-size: 17.5px; }

  .botao--grande { width: auto; }

  #header_cta { display: inline-flex; }

  .so-largo {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .hero { padding-block: 72px 80px; }
  .hero__acoes { flex-direction: row; flex-wrap: wrap; }

  .assuntos {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }

  .beneficios {
    grid-template-columns: 1fr 1fr;
    gap: 44px 40px;
  }

  .variedades { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* Texto e imagem lado a lado, alternando o lado a cada bloco. A inversão
     é só de ordem visual: no HTML o texto vem sempre antes, que é a ordem
     em que o leitor de tela deve encontrar as coisas. */
  .demo {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 40px;
  }
  .demo.ao-contrario .demo__texto { order: 2; }
  .demo.ao-contrario .demo__figura { order: 1; }
  /* A inversão é só de lado, não de proporção: sem trocar também as trilhas,
     a captura cai na coluna estreita e sai menor que a das outras demos. */
  .demo.ao-contrario { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

  .demos { gap: 72px; }

  .indicadores { grid-template-columns: repeat(4, 1fr); }
  .indicador { padding: 22px 20px; }

  /* Texto à esquerda, tela à direita, com o fio correndo pela margem. Não
     alterna como as demonstrações: aqui a leitura é de cima para baixo e
     inverter o lado atrapalharia a sensação de sequência. */
  .passo-fm {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 36px;
    padding-left: 44px;
  }
  .passo-fm::before { bottom: -52px; }

  .jornada { gap: 52px; }

  /* Três cartões lado a lado já no tablet: empilhados em 768px eles ficam
     largos demais e o preço perde a comparação. `align-items: start` impede
     que os dois normais estiquem até a altura do destacado. */
  .cartoes {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
  }
  .cartao { padding: 24px 20px; }
  .cartao--destaque { padding-block: 28px; }
  .cartao__nome { font-size: 21px; }
  .cartao__valor { font-size: 29px; }

  .faixa-pro {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 26px 28px;
  }
  .faixa-pro__lado { align-items: flex-end; }

  /* No desktop as cinco colunas aparecem juntas: o seletor não faz sentido. */
  .seletor-coluna { display: none; }

  .secao { padding-block: 76px; }

  .videos { grid-template-columns: repeat(3, 1fr); }

  .rodape__grade {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 40px;
  }

  .rodape__base {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* =========================================================================
   A PARTIR DE 1024px — desktop
   ========================================================================= */

@media (min-width: 1024px) {
  .hero { padding-block: 92px 104px; }

  .hero__grade {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: 56px;
  }

  .cabecalho__atalhos {
    display: flex;
    gap: 26px;
    margin-left: auto;
    margin-right: 26px;
  }

  .hero h1 { font-size: clamp(2.65rem, 3.8vw, 3.35rem); }
  .hero__corpo { font-size: 18px; }

  /* No desktop o card de meses pode sair mais para fora da tela do
     notebook: há espaço na coluna e a sobreposição fica mais evidente. */
  /* No desktop o celular pode crescer e sair mais para fora da tela do
     notebook: há espaço na coluna e a sobreposição fica mais evidente. */
  .celular {
    right: -4%;
    bottom: -16%;
    width: 32%;
    max-width: 200px;
  }

  .beneficios { grid-template-columns: repeat(3, 1fr); gap: 52px 44px; }

  .cartoes { gap: 22px; }
  .cartao { padding: 30px 26px; }
  .cartao--destaque { padding-block: 36px; }
  .cartao__nome { font-size: 24px; }
  .cartao__valor { font-size: 36px; }
  #grade_planos { font-size: 15.5px; }

  /* 9 seções: cada 16px daqui vale ~290px de rolagem. 80px ainda respira
     no desktop e a página para de exigir três rolagens a mais só de vazio. */
  .secao { padding-block: 80px; }

  .secao__titulo { font-size: clamp(2.15rem, 2.9vw, 2.6rem); }

  /* No desktop os quatro passos ficam lado a lado, e o fio passa a ser
     horizontal — a leitura vira da esquerda para a direita. */
  .passos {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }

  .passo {
    flex-direction: column;
    gap: 16px;
    padding-block: 0;
  }

  .passo:not(:last-child)::before {
    left: 52px;
    right: -28px;
    top: 21px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .passo__texto {
    padding-top: 0;
    font-size: 17px;
    max-width: 22ch;
  }

  .fechamento__titulo { font-size: 2.6rem; }
}

/* =========================================================================
   A PARTIR DE 1440px — telas largas
   ========================================================================= */

@media (min-width: 1440px) {
  :root { --gutter: 40px; }
  .hero h1 { font-size: 3.5rem; }
}

/* =========================================================================
   CONSENTIMENTO DE ANALYTICS

   Barra fixa embaixo, discreta. Nasce com [hidden] no HTML e só aparece
   quando ainda não há decisão gravada.

   Os dois botões são o MESMO componente: mesma altura, mesmo padding,
   mesmo tamanho e peso de fonte, mesma borda. A única diferença é o
   preenchimento do "Aceitar". Recusar não pode custar mais esforço nem
   atenção do que aceitar — isso é regra, não estilo.
   ========================================================================= */

.consentimento {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--papel);
  border-top: 1px solid var(--linha-forte);
  box-shadow: 0 -6px 24px rgba(21, 27, 18, .10);
}

.consentimento[hidden] { display: none; }

.consentimento__texto {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 62ch;
}

.consentimento__texto a {
  color: var(--verde);
  text-decoration: underline;
}

.consentimento__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.consentimento__botao {
  flex: 1 1 auto;
  min-height: 44px;           /* alvo de toque confortável */
  padding: 11px 20px;
  border: 1px solid var(--verde);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--verde);
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.consentimento__botao--sim {
  background: var(--verde);
  color: #FFFFFF;
}

.consentimento__botao:focus-visible {
  outline: 3px solid var(--verde-claro);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .consentimento {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-inline: max(var(--gutter), calc((100vw - var(--faixa-max)) / 2));
  }

  .consentimento__acoes { flex: 0 0 auto; }

  .consentimento__botao { flex: 0 0 auto; }
}