/* ==========================================================================
   AgroEPI — landing
   Três mundos: lavoura (verde, curva de nível), sinalização de segurança
   (amarelo sempre como preenchimento) e prova jurídica (hash, carimbo).
   ========================================================================== */

/* ---------- Fontes (subsets latin, servidos localmente) ----------
   Archivo instanciada em largura 112 com eixo de peso 700–800;
   JetBrains Mono só com 0-9 e a-f, porque só aparece nos hashes. */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-112.woff2') format('woff2');
  font-weight: 700 800; font-stretch: 112%; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans.woff2') format('woff2');
  font-weight: 400 600; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-hex.woff2') format('woff2');
  font-weight: 500; font-display: swap;
  unicode-range: U+30-39, U+61-66;
}

/* ---------- Tokens ---------- */
:root {
  /* fixos nos dois temas */
  --mata: #0E2A1E;
  --mata-2: #17392A;
  --mata-linha: rgba(233, 239, 230, .16);
  --sobre-mata: #E9EFE6;
  --sobre-mata-2: #A9BDB0;
  --escudo: #2F8A57;
  --sinal: #F2C230;
  --sinal-2: #FFD457;
  --zebra: #151A14;

  /* tema claro */
  --fundo: #EDF1EA;
  --folha: #F8FAF6;
  --tinta: #13241A;
  --musgo: #4B5F52;
  --linha: #C9D4C6;
  --linha-forte: #8FA294;
  --icone: #24683F;
  --campo-fundo: #FFFFFF;
  --foco: #0E2A1E;
  --sombra-doc: 0 1px 0 rgba(14, 42, 30, .05), 0 22px 44px -28px rgba(14, 42, 30, .45);

  --f-titulo: 'Archivo', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --f-corpo: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --sec: clamp(72px, 10vw, 136px);
  --topo-h: 64px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0C1A14;
    --folha: #13261D;
    --tinta: #E3EAE0;
    --musgo: #A3B5A8;
    --linha: #26402F;
    --linha-forte: #4A6656;
    --icone: #7CC59A;
    --campo-fundo: #0E2018;
    --foco: #F2C230;
    --sombra-doc: 0 1px 0 rgba(0, 0, 0, .25), 0 22px 44px -26px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --fundo: #0C1A14;
  --folha: #13261D;
  --tinta: #E3EAE0;
  --musgo: #A3B5A8;
  --linha: #26402F;
  --linha-forte: #4A6656;
  --icone: #7CC59A;
  --campo-fundo: #0E2018;
  --foco: #F2C230;
  --sombra-doc: 0 1px 0 rgba(0, 0, 0, .25), 0 22px 44px -26px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topo-h) + 16px);
}
/* Sem scroll suave de propósito: com content-visibility nas seções, a rolagem animada
   recalcula alturas no meio do caminho e a âncora para no lugar errado. */
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 1.0625rem/1.55 var(--f-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ico {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
.topo, .hero, .depo, .rodape, .ponto { --foco: var(--sinal); }
.final { --foco: var(--mata); }

.pular {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--sinal); color: var(--mata); padding: 12px 16px;
  border-radius: 6px; font-weight: 600; text-decoration: none;
}
.pular:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sec { padding-block: var(--sec); }

/* Seções abaixo da dobra: o navegador pula layout e pintura até chegarem perto da tela.
   "auto" no tamanho intrínseco guarda a altura real depois da primeira renderização. */
.modulos, .campo-real, .como, .depo, .faq, .final { content-visibility: auto; }
.modulos { contain-intrinsic-size: auto 2700px; }
.campo-real { contain-intrinsic-size: auto 760px; }
.como { contain-intrinsic-size: auto 900px; }
.depo { contain-intrinsic-size: auto 560px; }
.faq { contain-intrinsic-size: auto 820px; }
.final { contain-intrinsic-size: auto 560px; }
@media (max-width: 720px) {
  .modulos { contain-intrinsic-size: auto 5200px; }
  .campo-real { contain-intrinsic-size: auto 1500px; }
  .como { contain-intrinsic-size: auto 1700px; }
  .depo { contain-intrinsic-size: auto 600px; }
  .faq { contain-intrinsic-size: auto 1100px; }
  .final { contain-intrinsic-size: auto 640px; }
}

/* ---------- Tipografia ---------- */
.titulo {
  font-family: var(--f-titulo);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.875rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
  max-width: 20ch;
}
.lead {
  margin-top: 20px;
  max-width: 46ch;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--musgo);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 2px solid transparent; border-radius: 8px;
  font: 600 1rem/1.1 var(--f-corpo);
  text-decoration: none; text-align: center; white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn--p { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn--g { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.btn--bloco { width: 100%; }
.btn--sinal { background: var(--sinal); color: var(--mata); }
.btn--sinal:hover { background: var(--sinal-2); }
.btn--fantasma { color: var(--sobre-mata); border-color: rgba(233, 239, 230, .42); }
.btn--fantasma:hover { border-color: var(--sobre-mata); background: rgba(233, 239, 230, .06); }
.btn--mata { background: var(--mata); color: var(--sobre-mata); }
.btn--mata:hover { background: var(--mata-2); }
.btn--contorno-mata { color: var(--mata); border-color: var(--mata); }
.btn--contorno-mata:hover { background: rgba(14, 42, 30, .08); }

.link-botao {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 4px;
  background: none; border: 0; cursor: pointer;
  font-weight: 600; font-size: .9375rem;
  color: var(--tinta);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.link-botao .ico { width: 18px; height: 18px; }
.link-botao--claro { color: var(--sobre-mata); }

/* ---------- Placas (normas) ---------- */
.placas { display: flex; flex-wrap: wrap; gap: 8px; }
.placas li {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: .8125rem; line-height: 1; letter-spacing: .01em;
  padding: 7px 10px 6px;
  border: 1.5px solid var(--linha-forte); border-radius: 4px;
  color: var(--tinta);
}
.placas--escuro li { border-color: rgba(233, 239, 230, .38); color: var(--sobre-mata); }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--mata); color: var(--sobre-mata);
  border-bottom: 1px solid var(--mata-linha);
  padding-top: env(safe-area-inset-top, 0px);
}
.topo__in {
  display: flex; align-items: center; gap: clamp(12px, 3vw, 32px);
  height: var(--topo-h);
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto; padding-inline: var(--gutter);
}
.topo__marca { display: block; color: var(--sobre-mata); flex: none; }
.logo { height: 30px; width: auto; }
.topo__nav { display: flex; gap: 4px; margin-right: auto; }
.topo__nav a {
  padding: 8px 12px; border-radius: 6px;
  color: var(--sobre-mata-2); text-decoration: none; font-size: .9375rem; font-weight: 500;
}
.topo__nav a:hover { color: var(--sobre-mata); background: rgba(233, 239, 230, .06); }
.topo__acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topo__entrar {
  padding: 8px 10px; border-radius: 6px;
  color: var(--sobre-mata); font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.topo__entrar:hover { text-decoration: underline; text-underline-offset: 4px; }

.tema {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 1.5px solid var(--mata-linha); border-radius: 8px;
  color: var(--sobre-mata-2); cursor: pointer;
}
.tema:hover { color: var(--sobre-mata); border-color: rgba(233, 239, 230, .4); }
.tema .ico { width: 20px; height: 20px; grid-area: 1 / 1; }
.tema__sol { display: none; }
:root[data-tema="escuro"] .tema__sol { display: block; }
:root[data-tema="escuro"] .tema__lua { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema__sol { display: block; }
  :root:not([data-tema="claro"]) .tema__lua { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: min(880px, calc(100svh - var(--topo-h)));
  color: var(--sobre-mata);
  /* fallback sem WebGL: fileiras em nível desenhadas em SVG + luz verde */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='420' viewBox='0 0 1600 420' fill='none' stroke='%233C9E66' stroke-opacity='.7' stroke-width='2.4' stroke-dasharray='.5 9' stroke-linecap='round'%3E%3Cpath d='M0 60C260 20 420 110 700 70S1200 10 1600 60'/%3E%3Cpath d='M0 110C260 70 420 160 700 120S1200 60 1600 110'/%3E%3Cpath d='M0 165C260 125 420 215 700 175S1200 115 1600 165'/%3E%3Cpath d='M0 225C260 185 420 275 700 235S1200 175 1600 225'/%3E%3Cpath d='M0 290C260 250 420 340 700 300S1200 240 1600 290'/%3E%3Cpath d='M0 360C260 320 420 410 700 370S1200 310 1600 360'/%3E%3C/svg%3E") center bottom / 1600px auto no-repeat,
    radial-gradient(ellipse 70% 55% at 72% 100%, rgba(47, 138, 87, .38), transparent 70%),
    linear-gradient(180deg, #0E2A1E 0%, #0C2419 100%);
}
.hero__cena { position: absolute; inset: 0; z-index: -2; }
/* Sem a cena 3D (sem WebGL, sem GPU ou economia de dados): escudo estático sobre o pino de GPS */
.hero--sem-3d .hero__cena::after {
  content: ''; position: absolute;
  right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + 40px));
  top: 50%; transform: translateY(-46%);
  width: clamp(200px, 20vw, 280px); aspect-ratio: 48 / 84;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 84' fill='none' stroke='%23F2C230' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14C12 14 16 12.5 19.5 11L24 14.5L28.5 11C32 12.5 36 14 41 14V26C41 35.5 33.5 42.5 24 46C14.5 42.5 7 35.5 7 26Z' fill='%232F8A57' fill-opacity='.45' stroke-width='1.1'/%3E%3Cpath d='M11 23.5Q24 18 37 23.5M11.5 30.5Q24 25 36.5 30.5M15 37.5Q24 32 33 37.5M24 17V7.5M24 11C21.5 6.8 17.6 5.2 13.8 5.6C14.2 9.4 18.2 11.6 24 11ZM24 8.8C26.4 4.4 30.4 2.6 34.4 3C34 6.8 29.6 9.4 24 8.8Z' stroke-width='.9'/%3E%3Cpath d='M24 48V76' stroke-width='.35'/%3E%3Cellipse cx='24' cy='77' rx='3' ry='1' fill='%23F2C230' stroke='none'/%3E%3Cellipse cx='24' cy='77' rx='9' ry='2.6' stroke-width='.5' stroke-opacity='.7'/%3E%3Cellipse cx='24' cy='77' rx='16' ry='4.4' stroke-width='.4' stroke-opacity='.35'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero__cena canvas {
  width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.4s ease;
}
.hero__cena canvas.pronto { opacity: 1; }
.hero__veu {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 42, 30, .94) 0%, rgba(14, 42, 30, .78) 34%, rgba(14, 42, 30, 0) 64%),
    linear-gradient(180deg, rgba(14, 42, 30, .55) 0%, rgba(14, 42, 30, 0) 22%);
}
.hero__in {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(48px, 9vh, 104px) var(--gutter) clamp(96px, 16vh, 168px);
}
.hero .placas { margin-bottom: 28px; }
.hero__titulo {
  position: relative;
  max-width: 15.5ch;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800;
  font-size: clamp(2.125rem, 1rem + 4.4vw, 4.375rem);
  line-height: 1.0;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.hero__sub {
  margin-top: 28px; max-width: 44ch;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55;
  color: var(--sobre-mata-2);
}
.hero__sub strong { color: var(--sobre-mata); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.garantias {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  margin-top: 28px; font-size: .9375rem; color: var(--sobre-mata-2);
}
.garantias li { display: flex; align-items: center; gap: 8px; }
.garantias .ico {
  width: 20px; height: 20px; padding: 3px;
  background: var(--sinal); color: var(--mata); border-radius: 50%;
  stroke-width: 2.6;
}

/* Entrada orquestrada: uma varredura amarela passa pelo título (sem esconder o texto,
   para não atrasar o LCP) e o resto do bloco sobe em sequência. */
@media (prefers-reduced-motion: no-preference) {
  .hero__titulo::after {
    content: ''; position: absolute; inset: -.08em -1em -.08em 0; pointer-events: none;
    background: linear-gradient(90deg,
      transparent calc(50% - 6em), rgba(242, 194, 48, .16) calc(50% - 2px),
      var(--sinal) calc(50% - 2px), var(--sinal) calc(50% + 2px), transparent calc(50% + 2px));
    transform: translateX(-50%);
    animation: varrer 1.15s .2s cubic-bezier(.65, 0, .25, 1) both;
  }
  .entra { animation: entrar .8s var(--d, 0s) cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes varrer {
  0% { transform: translateX(-50%); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(50%); opacity: 0; }
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Régua de números ---------- */
.regua {
  background: var(--folha);
  border-bottom: 1px solid var(--linha);
}
.regua__lista {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto; padding-inline: var(--gutter);
}
.regua__lista > div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px;
  padding: 28px 20px 30px;
  border-left: 1px solid var(--linha);
  /* marcas de régua no topo */
  background: repeating-linear-gradient(90deg, var(--linha-forte) 0 1px, transparent 1px 10px) top left / 100% 6px no-repeat;
}
.regua__lista > div:first-child { border-left: 0; padding-left: 0; }
.regua dd {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.regua dt { font-size: .9375rem; color: var(--musgo); line-height: 1.35; }

/* ---------- Riscos: auto de infração ---------- */
.riscos__grade {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.riscos__intro { position: sticky; top: calc(var(--topo-h) + 40px); }
.auto {
  background: var(--folha);
  border: 1px solid var(--linha); border-radius: 6px;
  box-shadow: var(--sombra-doc);
  overflow: hidden;
}
.auto__fita {
  height: 12px;
  background: repeating-linear-gradient(-45deg, var(--sinal) 0 12px, var(--zebra) 12px 24px);
}
.auto__topo {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  padding: 22px clamp(18px, 3vw, 32px) 18px;
  border-bottom: 2px solid var(--tinta);
}
.auto__nome {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800;
  font-size: 1.375rem; line-height: 1.1;
}
.auto__nota { font-size: .9375rem; color: var(--musgo); }
.auto__cab,
.auto__linha {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 11rem;
  gap: 24px; padding-inline: clamp(18px, 3vw, 32px);
}
.auto__cab {
  padding-block: 12px;
  font-size: .8125rem; font-weight: 600; color: var(--musgo);
  border-bottom: 1px solid var(--linha);
}
.auto__cab span:last-child { text-align: right; }
.auto__linha { padding-block: 24px; }
.auto__linha + .auto__linha { border-top: 1px dashed var(--linha-forte); }
.auto__orgao { display: flex; flex-direction: column; gap: 4px; font-size: .9375rem; color: var(--musgo); }
.auto__orgao b {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800;
  font-size: 1.0625rem; color: var(--tinta);
}
.auto__fato h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; margin-bottom: 6px; }
.auto__fato p { font-size: .9375rem; line-height: 1.55; color: var(--musgo); max-width: 52ch; }
.auto__multa { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.auto__multa strong {
  display: inline-block;
  background: var(--sinal); color: var(--mata);
  padding: 6px 10px 5px; border-radius: 3px;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.625rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.auto__multa--texto strong { font-size: 1.125rem; line-height: 1.15; }
.auto__multa span { font-size: .875rem; color: var(--musgo); line-height: 1.35; }

/* ---------- Módulos ---------- */
.modulos { border-top: 1px solid var(--linha); }
.modulos__intro { margin-bottom: clamp(48px, 7vw, 88px); }
.modulo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 6vw, 88px); align-items: start;
}
.modulo + .modulo {
  margin-top: clamp(72px, 10vw, 128px);
  padding-top: clamp(72px, 10vw, 128px);
  border-top: 1px solid var(--linha);
}
.modulo--inv { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.modulo--inv .modulo__demo { order: -1; }
.modulo__nome {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800;
  font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.05; letter-spacing: -.012em;
}
.modulo__texto .placas { margin-top: 16px; }
.modulo__desc { margin-top: 20px; max-width: 48ch; color: var(--musgo); }
.recursos { margin-top: 28px; border-top: 1px solid var(--linha); }
.recursos li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--linha);
}
.recursos .ico { color: var(--icone); margin-top: 1px; }
.recursos p { font-size: .9375rem; line-height: 1.45; color: var(--musgo); }
.recursos strong { display: block; color: var(--tinta); font-size: 1rem; }

.selo-demo {
  display: inline-block;
  background: var(--sinal); color: var(--mata);
  font-size: .8125rem; font-weight: 600; line-height: 1;
  padding: 6px 10px; border-radius: 3px;
}

/* Demo 1: comprovante em papel */
.comprovante {
  position: relative;
  background: var(--folha);
  border: 1px solid var(--linha); border-radius: 6px;
  box-shadow: var(--sombra-doc);
  padding: clamp(20px, 3vw, 32px);
  display: grid; gap: 18px;
}
.comprovante .selo-demo { position: absolute; top: -12px; left: clamp(20px, 3vw, 32px); }
.comprovante__topo { padding-bottom: 16px; border-bottom: 2px solid var(--tinta); }
.comprovante__topo h4 {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800;
  font-size: 1.25rem; line-height: 1.15;
}
.comprovante__topo p { margin-top: 4px; font-size: .875rem; color: var(--musgo); }
.campos { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: 14px; }
.campos--leitura { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.campo label, .campo__rot { font-size: .8125rem; font-weight: 600; color: var(--musgo); }
.campo input, .campo select {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--campo-fundo); color: var(--tinta);
  border: 1.5px solid var(--linha-forte); border-radius: 6px;
}
.campo input[readonly] {
  background: transparent; border-color: transparent; border-bottom-color: var(--linha);
  border-radius: 0; padding-left: 0; font-weight: 600;
}
.campo input:focus-visible, .campo select:focus-visible { outline-offset: 1px; }
.select { position: relative; display: block; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select::after {
  content: ''; position: absolute; right: 16px; top: 50%; pointer-events: none;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--musgo); border-bottom: 2px solid var(--musgo);
  transform: rotate(45deg);
}
.campo--ca input { font-variant-numeric: tabular-nums; }
.campos--leitura .campo { padding: 12px 14px; background: var(--fundo); border-radius: 6px; }
.campo__valor {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-variant-numeric: tabular-nums; font-size: .9375rem;
}
.campo__valor .ico { width: 18px; height: 18px; color: var(--icone); }
.campo__nota { font-size: .8125rem; color: var(--musgo); }

.assinatura__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.assinatura canvas {
  width: 100%; height: 150px;
  background: var(--campo-fundo);
  border: 1.5px dashed var(--linha-forte); border-radius: 6px;
  color: var(--tinta);
  touch-action: none; cursor: crosshair;
}
.assinatura__dica { margin-top: 6px; font-size: .8125rem; color: var(--musgo); }

.recibo { min-height: 56px; }
.recibo__vazio { font-size: .875rem; color: var(--musgo); padding-top: 4px; }
.recibo__ok {
  position: relative;
  display: grid; gap: 10px;
  padding: 18px 18px 16px;
  border: 1.5px solid var(--tinta); border-radius: 6px;
}
.recibo__status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.recibo__status .ico { width: 20px; height: 20px; color: var(--icone); stroke-width: 2; }
.carimbo {
  position: absolute; top: -14px; right: 14px;
  background: var(--sinal); color: var(--mata);
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800; font-size: .8125rem;
  padding: 6px 10px; border-radius: 3px;
  transform: rotate(-3deg);
}
@media (prefers-reduced-motion: no-preference) {
  .carimbo { animation: carimbar .45s cubic-bezier(.3, 1.4, .5, 1) both; }
}
@keyframes carimbar {
  from { opacity: 0; transform: rotate(-3deg) scale(1.6); }
  to { opacity: 1; transform: rotate(-3deg) scale(1); }
}
.hash {
  display: block;
  font-family: var(--f-mono); font-weight: 500;
  font-size: clamp(.78rem, .7rem + .3vw, .9375rem); line-height: 1.6;
  letter-spacing: .02em; word-spacing: .3em;
  overflow-wrap: anywhere;
}
.recibo__nota { font-size: .8125rem; color: var(--musgo); }
.recibo--alterado .recibo__ok { border-style: dashed; border-color: var(--linha-forte); }
.recibo--alterado .hash { color: var(--musgo); text-decoration: line-through; text-decoration-thickness: 1px; }

/* Demo 2: ponto no aparelho */
.modulo__demo:has(.ponto) { display: flex; justify-content: center; }
.ponto {
  position: relative;
  width: 100%; max-width: 440px;
  background: var(--mata); color: var(--sobre-mata);
  border-radius: 24px;
  padding: 28px clamp(16px, 3vw, 24px) 20px;
  box-shadow: 0 0 0 1px var(--mata-linha), 0 30px 60px -30px rgba(5, 20, 12, .7);
}
.ponto .selo-demo { position: absolute; top: -12px; left: 24px; }
.ponto__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ponto__nome {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800;
  font-size: 1.1875rem; line-height: 1.15;
}
.ponto__turno { margin-top: 4px; font-size: .875rem; color: var(--sobre-mata-2); }
.ponto__hora {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800;
  font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.ponto__rede {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 6px 10px 6px 8px;
  border: 1px solid var(--mata-linha); border-radius: 6px;
  font-size: .8125rem; font-weight: 500; color: var(--sobre-mata);
}
.ponto__rede .ico { width: 18px; height: 18px; color: var(--sobre-mata-2); }

.ponto__botoes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin-top: 18px;
}
.bat {
  display: grid; grid-template-rows: auto 1fr auto; justify-items: start; gap: 6px;
  min-height: 112px; padding: 14px;
  border: 2px solid transparent; border-radius: 14px;
  text-align: left; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.bat__ico { width: 28px; height: 28px; stroke-width: 1.75; }
.bat__nome {
  align-self: end;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800;
  font-size: 1.0625rem; line-height: 1.1;
}
.bat__info { font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.bat[data-estado="feita"] {
  background: var(--mata-2); color: var(--sobre-mata);
  border-color: var(--mata-linha); cursor: default;
}
.bat[data-estado="feita"] .bat__info { color: var(--sobre-mata-2); }
.bat[data-estado="proxima"] { background: var(--sinal); color: var(--mata); }
.bat[data-estado="proxima"]:hover { background: var(--sinal-2); }
.bat[data-estado="bloqueada"] {
  background: transparent; color: var(--sobre-mata-2);
  border: 2px dashed rgba(233, 239, 230, .22); cursor: not-allowed;
}
@media (prefers-reduced-motion: no-preference) {
  .bat[data-estado="proxima"] { animation: chamar 2.4s ease-in-out infinite; }
}
@keyframes chamar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 194, 48, .0); }
  50% { box-shadow: 0 0 0 6px rgba(242, 194, 48, .22); }
}

.ponto__registro { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--mata-linha); }
.ponto__rot { font-size: .8125rem; font-weight: 600; color: var(--sobre-mata-2); margin-bottom: 6px; }
.ponto__lista li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--mata-linha);
  font-size: .9375rem;
}
.ponto__lista time { font-weight: 600; font-variant-numeric: tabular-nums; }
.ponto__lista code {
  font-family: var(--f-mono); font-weight: 500; font-size: .8125rem;
  padding: 3px 7px; border-radius: 4px;
  background: rgba(233, 239, 230, .08); color: var(--sobre-mata);
}
@media (prefers-reduced-motion: no-preference) {
  .ponto__lista li.nova { animation: nova 1.2s ease-out both; }
}
@keyframes nova {
  from { background: rgba(242, 194, 48, .22); }
  to { background: transparent; }
}
.ponto__resumo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px;
  margin-top: 14px; font-size: .9375rem;
}
.ponto__resumo > div { display: contents; }
.ponto__resumo dt { color: var(--sobre-mata-2); }
.ponto__resumo dd { font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ponto__resumo .extra dd { justify-self: end; align-self: start; background: var(--sinal); color: var(--mata); padding: 1px 8px; border-radius: 3px; }
#ponto-reiniciar { margin-top: 10px; }

/* ---------- Feito para o campo ---------- */
.campo-real { background: var(--folha); border-block: 1px solid var(--linha); }
.campo-real__grade {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.pontos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.pontos li { padding: 28px 0 32px; border-top: 1px solid var(--linha); }
.pontos li:nth-child(-n+2) { border-top: 2px solid var(--tinta); }
.pontos .ico { width: 32px; height: 32px; color: var(--icone); stroke-width: 1.4; }
.pontos h3 {
  margin-top: 18px;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: 1.25rem; line-height: 1.15;
}
.pontos p { margin-top: 8px; color: var(--musgo); font-size: 1rem; max-width: 40ch; }

/* ---------- Como funciona ---------- */
.passos {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(48px, 6vw, 72px);
}
/* a sequência corre sobre uma fileira tracejada */
.passos::before {
  content: ''; position: absolute; left: 0; right: 0; top: 31px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--linha-forte) 0 10px, transparent 10px 18px);
}
.passo { position: relative; }
.passo__n {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  background: var(--sinal); color: var(--mata);
  border-radius: 6px;
  box-shadow: 0 0 0 8px var(--fundo);
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800;
  font-size: 2rem; line-height: 1;
}
.passo h3 {
  margin-top: 28px;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800;
  font-size: 1.625rem; line-height: 1.05;
}
.passo > p { margin-top: 10px; color: var(--musgo); max-width: 36ch; }
.checks { margin-top: 18px; display: grid; gap: 8px; }
.checks li { position: relative; padding-left: 28px; font-size: .9375rem; line-height: 1.4; }
.checks li::before {
  content: ''; position: absolute; left: 2px; top: .3em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--icone); border-bottom: 2px solid var(--icone);
  transform: rotate(-45deg);
}

/* ---------- Depoimento ---------- */
.depo { background: var(--mata); color: var(--sobre-mata); padding-block: clamp(72px, 10vw, 128px); }
.depo__fig { display: grid; gap: 36px; }
.depo__citacao {
  max-width: 30em;
  padding-left: clamp(20px, 3vw, 36px);
  border-left: 6px solid var(--sinal);
}
.depo__citacao p {
  font-size: clamp(1.375rem, .9rem + 2vw, 2.625rem);
  line-height: 1.28; font-weight: 500; letter-spacing: -.015em;
  text-wrap: pretty;
}
.depo__autor {
  display: flex; align-items: center; gap: 14px;
  padding-left: calc(clamp(20px, 3vw, 36px) + 6px);
  color: var(--sobre-mata-2); font-size: .9375rem;
}
.depo__autor strong { display: block; color: var(--sobre-mata); font-size: 1.0625rem; }
.depo__avatar {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--sinal); color: var(--mata);
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 800; font-size: 1.0625rem;
}

/* ---------- FAQ ---------- */
.faq__grade {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.faq__titulo { position: sticky; top: calc(var(--topo-h) + 40px); }
.faq__lista { border-top: 2px solid var(--tinta); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px; padding: 16px 0;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.4;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--icone); }
.faq summary .ico { width: 22px; height: 22px; color: var(--musgo); transition: transform .2s; }
.faq details[open] summary .ico { color: var(--tinta); transform: rotate(45deg); }
.faq details > p { padding: 0 48px 24px 0; color: var(--musgo); max-width: 64ch; }

/* ---------- CTA final ---------- */
.final { background: var(--sinal); color: var(--mata); padding-block: clamp(72px, 10vw, 128px); }
.final__in { display: grid; justify-items: center; text-align: center; }
.final__titulo { max-width: 18ch; font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); }
.final__texto { margin-top: 20px; max-width: 52ch; font-size: 1.125rem; }
.final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.final__nota { margin-top: 20px; font-size: .9375rem; }

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--mata); color: var(--sobre-mata-2);
  padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px));
}
.rodape__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.rodape__marca { color: var(--sobre-mata); }
.rodape .logo { height: 28px; }
.rodape__copy { font-size: .875rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .auto__cab, .auto__linha { grid-template-columns: 8rem minmax(0, 1fr) 9.5rem; gap: 18px; }
}

@media (max-width: 960px) {
  .riscos__grade, .campo-real__grade, .faq__grade,
  .modulo, .modulo--inv { grid-template-columns: minmax(0, 1fr); }
  .riscos__intro, .faq__titulo { position: static; }
  .modulo--inv .modulo__demo { order: 0; }
  .modulo__demo { max-width: 600px; }
  .modulo__demo:has(.ponto) { justify-content: flex-start; }
  .regua__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .regua__lista > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .regua__lista > div:nth-child(n+4) { border-top: 1px solid var(--linha); }
}

@media (max-width: 860px) {
  .topo__nav { display: none; }
}

@media (max-width: 720px) {
  :root { --topo-h: 60px; }
  .hero { align-items: start; min-height: calc(100svh - var(--topo-h)); }
  /* no celular a cena fica embaixo do texto; o véu escurece a faixa onde os dois se cruzam */
  .hero__cena { top: auto; height: max(62%, 520px); }
  .hero--sem-3d .hero__cena::after { width: 150px; top: auto; bottom: 24px; transform: none; right: 18%; }
  .hero__veu {
    background: linear-gradient(180deg,
      rgba(14, 42, 30, 1) 0%, rgba(14, 42, 30, .96) 50%, rgba(14, 42, 30, .7) 62%, rgba(14, 42, 30, 0) 76%);
  }
  .hero__in { padding-top: 32px; padding-bottom: 300px; }
  .hero .placas { margin-bottom: 20px; }
  .hero__ctas .btn { flex: 1 1 100%; }

  .regua__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regua__lista > div { padding: 22px 0 24px 16px; }
  .regua__lista > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .regua__lista > div:nth-child(4) { border-left: 1px solid var(--linha); padding-left: 16px; }
  .regua__lista > div:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .regua__lista > div:last-child { grid-column: 1 / -1; }

  .auto__cab { display: none; }
  .auto__linha { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .auto__orgao { flex-direction: row; align-items: baseline; gap: 8px; }
  .auto__multa { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; text-align: left; }

  .campos { grid-template-columns: minmax(0, 1fr) 7.5rem; }
  .pontos { grid-template-columns: minmax(0, 1fr); }
  .pontos li:nth-child(2) { border-top: 1px solid var(--linha); }

  .passos { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .passos::before { left: 31px; right: auto; top: 0; bottom: 0; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--linha-forte) 0 10px, transparent 10px 18px); }
  .passo { padding-left: 92px; }
  .passo__n { position: absolute; left: 0; top: 0; }
  .passo h3 { margin-top: 12px; }

  .faq details > p { padding-right: 0; }
  .final__ctas .btn { flex: 1 1 100%; }
  .rodape__in { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .so-largo { display: none; }
  .logo { height: 26px; }
  .topo__acoes { gap: 4px; }
  .topo__entrar { padding-inline: 8px; }
  .tema { width: 36px; height: 36px; }
  .campos, .campos--leitura { grid-template-columns: minmax(0, 1fr); }
  .bat { min-height: 104px; padding: 12px; }
}

@media (max-width: 380px) {
  .logo { height: 22px; }
  .btn--p { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}