/* ═══════════════════════════════════════════════════════════════
   LYMOW BRASIL · Ecletiq · CPS LAB · 21/08/2026
   ───────────────────────────────────────────────────────────────
   A PALETA É OFICIAL, NÃO É INTERPRETAÇÃO MINHA. Saiu do
   "Lymow Brand Visual Guidelines.pdf" que o Danny enviou:
       #0e6040  verde da marca
       #252b2a  cinza-preto
       #000000  preto   ·   #ffffff  branco
   As fontes também são as do kit: Syne (títulos) e Open Sans (texto).

   CONTRASTE MEDIDO ANTES DE USAR (lição do site MagicLab, 20/08, onde a
   cor crua do fabricante REPROVOU e teve que ser corrigida):
       #0e6040 sobre branco .......  7,59:1  ✅
       branco sobre #0e6040 .......  7,59:1  ✅
       #252b2a sobre branco ....... 14,41:1  ✅
   A LYMOW passou em tudo — a identidade deles foi feita por alguém que
   pensou em acessibilidade. Aqui não corrigi nenhuma cor.

   A CARA É A DELES (fundo preto, Open Sans, logo branco centralizado),
   porque o Paul quer que o brasileiro reconheça que está num lugar
   oficial. O TOM é o nosso: consultivo, não promocional — o argumento
   que deu a representação à Ecletiq é que escolher a máquina é
   julgamento técnico sobre um terreno específico.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --verde:        #0e6040;
  /* Tom derivado por nós (o oficial da marca é o --verde). O anterior era
     #17845a e media 4,48:1 sobre preto — reprovava por 0,02 no critério de
     texto pequeno, e caía para 2,59:1 quando pousava sobre o verde translúcido
     do placar. Clareado até passar com folga em todos os fundos do site. */
  --verde-claro:  #22a273;
  --verde-hover:  #0a4a31;
  --grafite:      #252b2a;
  --preto:        #000000;
  --branco:       #ffffff;
  --cinza-texto:  #c9cecd;
  --cinza-linha:  rgba(255,255,255,.14);
  --papel:        #f6f8f7;
  --papel-texto:  #252b2a;
  --max:          1180px;
  --raio:         10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--preto);
  color: var(--branco);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .titulo {
  font-family: Syne, "Open Sans", sans-serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
}

a { color: inherit; text-decoration: none; }

.faixa { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ── barra de representação: a primeira coisa que o brasileiro lê ── */
.oficial {
  background: var(--verde);
  color: var(--branco);
  font-size: 14.5px;
  text-align: center;
  padding: 11px 18px;
  letter-spacing: .01em;
}
.oficial strong { font-weight: 700; }

/* ── topo ── */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--cinza-linha);
}
.topo { display: flex; align-items: center; gap: 26px; height: 72px; }
.marca { display: flex; align-items: center; gap: 13px; }
.marca img { height: 19px; width: auto; display: block; }
.marca .por {
  font-size: 11.5px; color: var(--cinza-texto);
  border-left: 1px solid var(--cinza-linha); padding-left: 13px;
  letter-spacing: .06em; text-transform: uppercase;
}
nav.menu { margin-left: auto; display: flex; gap: 26px; align-items: center; }
nav.menu a { font-size: 15px; color: var(--cinza-texto); white-space: nowrap; }
nav.menu a:hover { color: var(--branco); }
/* entre 1100 e 760 o menu não cabe inteiro: some com o secundário, não com tudo */
/* o menu cresceu com as páginas novas: o secundário some antes, e a
   régua subiu de 1100 para 1400 px. Todos eles seguem no rodapé. */
/* Entre 1000 e 1150 px somem os dois que têm casa no rodapé. */
@media (max-width: 1150px) { nav.menu .opcional { display: none; } nav.menu { gap: 18px; } }

/* ── MENU SANFONA (abaixo de 1000 px) ─────────────────────────────────
   Medido em 21/08: com 5 links + botão o menu estourava em 1024 e em 860,
   e a regra antiga simplesmente escondia tudo a partir de 760 — o site
   ficava SEM navegação no celular. Aqui ele vira painel empilhado. */
.abre-menu {
  display: none; margin-left: auto; cursor: pointer;
  width: 44px; height: 40px; padding: 10px 8px;
  background: transparent; border: 1px solid var(--cinza-linha); border-radius: 8px;
  flex-direction: column; justify-content: space-between;
}
.abre-menu span { display: block; height: 2px; background: var(--branco); border-radius: 2px; }
.abre-menu[aria-expanded="true"] { border-color: var(--verde); }

@media (max-width: 1000px) {
  .abre-menu { display: flex; }
  nav.menu {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 8px 24px 20px;
    background: rgba(0,0,0,.97);
    border-bottom: 1px solid var(--cinza-linha);
    backdrop-filter: saturate(140%) blur(8px);
  }
  nav.menu.aberto { display: flex; }
  nav.menu a {
    padding: 14px 2px; font-size: 16px;
    border-bottom: 1px solid var(--cinza-linha); white-space: normal;
  }
  nav.menu .opcional { display: block; }      /* na sanfona cabe tudo */
  nav.menu a.botao {
    margin-top: 16px; text-align: center; border-bottom: none;
    border-radius: 999px; padding: 14px 20px;
  }
  header .topo { position: relative; }
}

.botao {
  display: inline-block;
  background: var(--verde); color: var(--branco);
  font-weight: 600; font-size: 15.5px;
  padding: 13px 26px; border-radius: 999px;
  border: 1px solid var(--verde);
  transition: background .16s ease;
}
.botao:hover { background: var(--verde-hover); }
.botao.vazado { background: transparent; border-color: var(--cinza-linha); color: var(--branco); }
.botao.vazado:hover { border-color: var(--branco); background: rgba(255,255,255,.06); }

/* ── herói ── */
.heroi { padding: 92px 0 74px; border-bottom: 1px solid var(--cinza-linha); }
.heroi .kicker {
  color: var(--verde-claro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px;
}
.heroi h1 { font-size: clamp(2.4rem, 5.6vw, 4.05rem); max-width: 17ch; }
.heroi p.chamada {
  margin-top: 24px; max-width: 60ch; font-size: 19px; color: var(--cinza-texto);
}
.heroi .acoes { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ── números ── */
/* ⚠️ FLEX, E NÃO GRID — conserto de 23/08/2026, achado do Paul no celular
   ("no mobile dá um problema de diagramação... e no computador fica
   perfeito"). Ele estava certo, e o defeito era MAIOR do que parecia.
   A régua tem CINCO números, e o grid com auto-fit escolhia 2, 3 ou 4
   colunas conforme a largura. Cinco não divide por 2, nem por 3, nem por
   4 — então sobrava célula vazia, e a célula vazia mostrava o fundo da
   grade (que é a cor da LINHA divisória) como um retângulo cinza claro.
   Medido: buraco em 480, 540, 600 (1 vazia), 680, 760 (2 vazias), 860,
   980 (1 vazia). Só a partir de ~1000px, com as 5 colunas, ficava limpo —
   que é exatamente por que no computador dele parecia perfeito.
   Com flex + flex-grow, os itens da ÚLTIMA LINHA se esticam e ocupam o
   que sobra. Não existe célula vazia em largura nenhuma.
   O truque do gap de 1px sobre fundo escuro continua igual: o "fundo" que
   aparece nos vãos é que desenha as linhas divisórias. */
.numeros {
  display: flex; flex-wrap: wrap;
  gap: 1px; background: var(--cinza-linha);
  border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  overflow: hidden; margin-top: 56px;
}
.numeros > .numero { flex: 1 1 178px; min-width: 0; }
/* 26px de lado davam 181px úteis por coluna, e "48.560 m²" precisava de 185.
   Com a quinta coluna (altura de corte) a régua ficou apertada: menos folga
   lateral e letra um pouco menor resolvem sem trocar o desenho. */
.numero { background: var(--preto); padding: 26px 17px; }
/* clamp + nowrap: "48.560 m²" quebrava em duas linhas e desalinhava a régua.
   A unidade vai menor e junto, senão o m² rouba a força do número. */
.numero .v {
  font-family: Syne, sans-serif; font-weight: 800;
  font-size: clamp(21px, 1.95vw, 28px);
  white-space: nowrap; letter-spacing: -.01em;
}
.numero .v .un { font-size: .62em; font-weight: 700; letter-spacing: 0; }
.numero .r { font-size: 13.5px; color: var(--cinza-texto); margin-top: 5px; }
.numero .e { font-size: 12.5px; color: var(--verde-claro); margin-top: 9px; }

/* ── o filme ─────────────────────────────────────────────────────
   O palco é o único lugar do site onde a cor sai do preto chapado:
   um halo verde muito baixo atrás do vídeo, pra ele parecer aceso.
   O botão só existe até o primeiro clique — depois manda o nativo. */
.filme { padding: 84px 0 90px; }
.filme .kicker {
  color: var(--verde-claro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px;
}

.palco {
  position: relative; margin: 44px 0 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--cinza-linha);
  background: #050706;
  box-shadow: 0 0 0 1px rgba(14,96,64,.22), 0 34px 90px -30px rgba(14,96,64,.45);
}
.palco .quadro { position: relative; line-height: 0; }
/* em tela cheia quem vai é o quadro, então o vídeo tem que caber nele */
.palco .quadro:fullscreen { background: #000; display: flex; align-items: center; }
.palco .quadro:fullscreen video { aspect-ratio: auto; max-height: 100vh; object-fit: contain; }
.palco .quadro:fullscreen .legenda { bottom: 8%; }
/* texto de reserva do <video>: só aparece se o navegador não tocar,
   e antes ficava branco sobre branco — invisível justo quando importa. */
.reserva-video { display: block; padding: 24px; color: var(--cinza-texto); font-size: 15px; }
.reserva-video a { color: #5fd6a4; text-decoration: underline; }

.palco video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: #050706; object-fit: cover;
}

/* ── PAINEL DE LEGENDA: separado de vez do vídeo ─────────────────────
   Pedido do Paul em 21/08 — "faz uma separação maior". Não é sobreposição,
   não é filho do <figure>, não tem position absolute, não some em tela
   cheia. É um bloco de texto na página. Se a letra não sair AQUI, o
   problema não é camada: é o texto não estar chegando. */
.painel-legenda {
  margin-top: 22px; padding: 22px 26px;
  background: #0e1110;
  border: 1px solid var(--cinza-linha);
  border-left: 4px solid var(--verde);
  border-radius: var(--raio);
  border-bottom: 1px solid var(--cinza-linha);
}
.painel-legenda .cabeca {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.painel-legenda .rot {
  font-family: Syne, sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--verde-claro);
}
.painel-legenda .relogio {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cinza-texto);
  border: 1px solid var(--cinza-linha); border-radius: 999px; padding: 3px 10px;
}
.painel-legenda .fala {
  font-size: clamp(19px, 2.1vw, 28px); line-height: 1.42;
  color: var(--cinza-texto); min-height: 1.42em;
}
.painel-legenda.viva .fala { color: var(--branco); font-weight: 600; }

.palco .play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; cursor: pointer;
  border: 0; color: var(--branco);
  font-family: Syne, sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.55) 100%);
  transition: opacity .28s ease, visibility .28s ease;
}
.palco .play svg {
  width: 34px; height: 34px; fill: var(--branco);
  padding: 22px; border-radius: 999px;
  box-sizing: content-box;
  background: var(--verde);
  box-shadow: 0 0 0 10px rgba(14,96,64,.28);
  transition: transform .18s ease, background .18s ease, box-shadow .28s ease;
}
.palco .play:hover svg {
  transform: scale(1.06); background: var(--verde-hover);
  box-shadow: 0 0 0 16px rgba(14,96,64,.22);
}
.palco .play.foi { opacity: 0; visibility: hidden; }

/* ── legenda desenhada por nós ──────────────────────────────────────
   O ::cue nativo ficou pra trás de propósito: o Electron não o pinta
   (medido 21/08). Esta div é HTML comum, então aparece em qualquer
   navegador e a letra é do tamanho que a gente decidir.
   Fica ACIMA da barra de controles do player (bottom: 12%), senão o
   controle nativo cobre a frase justo quando o visitante mexe o mouse. */
.palco .legenda {
  position: absolute; left: 0; right: 0; bottom: 12%;
  display: flex; justify-content: center;
  padding: 0 6%; pointer-events: none;
  text-align: center;
}
.palco .legenda span {
  display: inline-block; max-width: 30ch;
  background: rgba(0,0,0,.80);
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: clamp(15px, 1.55vw, 22px);
  font-weight: 600; line-height: 1.45;
  padding: .42em .7em; border-radius: 6px;
  white-space: pre-line;                 /* respeita a quebra do .vtt */
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
/* Sem opacity e sem transição DE PROPÓSITO. A primeira versão escondia a
   frase com `opacity:0` e a acendia com transição — e em aba de segundo
   plano o navegador congela a transição no valor inicial, ou seja, a
   legenda ficava invisível para sempre. Medido em 21/08: a classe .viva
   estava aplicada, o seletor casava, e a opacidade computada continuava 0.
   `display:none` não depende de animação nenhuma. */
.palco .legenda:not(.viva) span { display: none; }

/* botão CC próprio — o nativo não existe quando a faixa está em 'hidden' */
.palco .cc {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  font-family: Syne, sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; cursor: pointer;
  color: var(--branco); background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px; padding: 7px 11px;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.palco .cc:hover { background: var(--verde); border-color: var(--verde); }
.palco .cc.off { color: var(--cinza-texto); border-color: rgba(255,255,255,.18); text-decoration: line-through; }

.palco figcaption {
  padding: 15px 20px; font-size: 13.5px; color: var(--cinza-texto);
  border-top: 1px solid var(--cinza-linha); background: #0b0d0c;
}

@media (prefers-reduced-motion: reduce) {
  .palco .play svg, .palco .play { transition: none; }
}

/* ── seções ── */
section { padding: 84px 0; border-bottom: 1px solid var(--cinza-linha); }
section h2 { font-size: clamp(1.7rem, 3.3vw, 2.5rem); max-width: 22ch; }
section .sub { margin-top: 16px; color: var(--cinza-texto); max-width: 66ch; font-size: 17.5px; }

/* ── OS CASOS ────────────────────────────────────────────────────────
   Modelo Deep Robotics, ideia do Paul 21/08: cada capacidade é um caso
   com o vídeo dela funcionando. Duas colunas em tela larga, uma no
   celular. O vídeo tem proporção fixa pra grade não pular enquanto os
   clipes carregam. */
.casos .kicker {
  color: var(--verde-claro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px;
}
.grade-casos {
  display: grid; gap: 22px; margin-top: 46px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 370px), 1fr));
}
.caso {
  display: flex; flex-direction: column;
  border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  background: #0b0d0c; overflow: hidden;
}
.caso .tela { background: #050706; line-height: 0; }
.caso .tela video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; background: #050706;
}
/* A grade já deixa os cartões da mesma ALTURA, mas o conteúdo é colado no
   topo — então a linha de prova de cada um parava onde o parágrafo acabava,
   e dois parágrafos de tamanhos diferentes davam duas alturas diferentes.
   Aqui o .dito vira coluna flexível e a prova é empurrada pro pé com
   margin-top:auto. Resultado: as réguas de prova ficam niveladas na linha,
   qualquer que seja o tamanho do texto acima. */
.caso .dito {
  padding: 24px 26px 26px;
  display: flex; flex-direction: column; flex: 1 1 auto;
}
.caso .dito > p:not(.prova) { margin-bottom: 16px; }
.caso .dito > p:not(.prova):last-of-type { margin-bottom: 0; }
.caso .tag {
  display: block; margin-bottom: 12px;
  color: var(--verde-claro); font-size: 14.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none;   /* é uma frase, não etiqueta */
}
.caso h3 { font-size: 21px; margin-bottom: 12px; }
.caso p { color: var(--cinza-texto); font-size: 16px; }
.caso .prova {
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--cinza-linha);
  font-family: Syne, sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .03em; color: var(--branco);
}
/* O caso sem vídeo ocupa a linha inteira: sozinho em meia coluna ele parecia
   um cartão órfão com buraco do lado. Em linha cheia vira nota de fechamento,
   que é o papel dele. A barra verde marca que é texto, não falta de vídeo. */
.caso.sem-video {
  grid-column: 1 / -1;
  border-left: 4px solid var(--verde);
}
.caso.sem-video .dito { padding: 28px 30px; max-width: 78ch; }

.claro { background: var(--papel); color: var(--papel-texto); border-bottom: none; }
.claro h2, .claro h3 { color: var(--papel-texto); }
.claro .sub { color: #4a5250; }
.claro .cartao { background: var(--branco); border-color: rgba(0,0,0,.1); }
.claro .cartao p { color: #4a5250; }

/* ── ⚠️ TODO COMPONENTE QUE ENTRA NUMA SEÇÃO .claro PRECISA DE COR CLARA ──
   Achado do Paul em 21/08: "aqui não dá para ver o que está escrito para um
   humano". Ele estava certo, e eu medi depois: quatro reprovações de contraste
   na página de assistência, porque blocos desenhados para o FUNDO PRETO foram
   parar numa seção de fundo papel e continuaram com letra branca/cinza-claro.

       p.franqueza-preco ........ 1,28:1   (mínimo 4,5)
       strong dentro dele ....... 1,24:1
       a.botao.vazado ........... 1,07:1   ← branco sobre quase-branco
   Um deles era um BOTÃO praticamente invisível.

   Antes de mover qualquer bloco para .claro, rodar a medição de contraste. */
.claro .franqueza-preco,
.claro .achado,
.claro .nota-origem,
.claro .conta { color: #3f4745; background: rgba(14,96,64,.08); }
.claro .franqueza-preco strong,
.claro .achado strong,
.claro .nota-origem strong,
.claro .amarra strong { color: var(--verde); }
.claro .item p, .claro .clipe figcaption { color: #4a5250; }
.claro .prova, .claro .item .prova { color: var(--papel-texto); border-top-color: rgba(0,0,0,.12); }
.claro .fonte, .claro .excecao { color: #5c6664; }
.claro .cartao .tag { color: var(--verde); }

/* botão vazado em fundo claro: branco sobre papel é invisível */
.claro .botao.vazado {
  color: var(--papel-texto); border-color: rgba(0,0,0,.24);
}
.claro .botao.vazado:hover {
  border-color: var(--verde); background: rgba(14,96,64,.08); color: var(--verde);
}
/* linhas e bordas herdadas do escuro somem no claro */
.claro .grade .cartao, .claro .item { border-color: rgba(0,0,0,.12); }
.claro .cartao .prova { border-top-color: rgba(0,0,0,.12); }

.grade { display: grid; gap: 20px; margin-top: 42px; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 272px), 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }

.cartao {
  border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  padding: 26px; background: #0b0d0c;
}
.cartao h3 { font-size: 19.5px; margin-bottom: 11px; }
.cartao p { color: var(--cinza-texto); font-size: 15.8px; }
.cartao .tag {
  display: inline-block; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--verde-claro); margin-bottom: 13px;
}

/* ── tabela de terreno: o coração consultivo do site ── */
.terreno { width: 100%; border-collapse: collapse; margin-top: 34px; font-size: 15.5px; }
.terreno th, .terreno td {
  text-align: left; padding: 15px 14px; border-bottom: 1px solid rgba(0,0,0,.09);
}
.terreno th { font-family: Syne, sans-serif; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.terreno tbody tr:hover { background: rgba(14,96,64,.05); }
.terreno .marca-sim { color: var(--verde); font-weight: 700; }

/* ── abertura das páginas internas ───────────────────────────────── */
.heroi-interno { padding: 64px 0 58px; }
.heroi-interno h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); max-width: 20ch; }
.migalha {
  font-size: 13px; color: var(--cinza-texto); margin-bottom: 20px;
  letter-spacing: .02em;
}
.migalha a { color: var(--cinza-texto); text-decoration: underline; text-underline-offset: 3px; }
.migalha a:hover { color: var(--branco); }
/* o item de menu da página onde a pessoa está */
nav.menu a.aqui { color: var(--branco); font-weight: 600; }
nav.menu a.botao.aqui { color: var(--branco); }

/* ── a porta na home para a página comercial ─────────────────────── */
.porta { padding: 78px 0; }
.porta .kicker {
  color: var(--verde-claro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px;
}
.porta-corpo {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1.1fr);
}
.porta-corpo h2 { max-width: 18ch; }
.porta-corpo .sub { margin: 16px 0 28px; }
.porta-corpo img,
.porta-corpo .porta-video {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  background: #0b0d0c;
}
.porta-corpo .porta-video { aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 860px) {
  .porta-corpo { grid-template-columns: 1fr; }
}

/* ── APLICAÇÃO COMERCIAL ─────────────────────────────────────────── */
.comercial .kicker {
  color: var(--verde-claro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px;
}
.comercial h2 { max-width: 26ch; }

.desenho { margin: 46px 0 8px; }
.desenho img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  background: #0b0d0c;
}
.desenho figcaption {
  margin-top: 12px; font-size: 13.5px; color: var(--cinza-texto); max-width: 70ch;
}
.mecanismo { margin-top: 34px; }

/* o bloco da tese: é o coração do argumento, então ganha peso próprio */
.tese {
  margin-top: 52px; padding: 34px 36px;
  border: 1px solid var(--cinza-linha); border-left: 4px solid var(--verde);
  border-radius: var(--raio); background: #0e1110;
}
.tese h3 { font-size: clamp(1.3rem, 2.3vw, 1.85rem); max-width: 30ch; margin-bottom: 18px; }
.tese p { color: var(--cinza-texto); max-width: 74ch; margin-bottom: 14px; font-size: 16.5px; }
.tese .martelo {
  color: var(--branco); font-size: clamp(17px, 1.7vw, 20px); font-weight: 600;
  border-top: 1px solid var(--cinza-linha); padding-top: 18px; margin-top: 20px;
}
.tese .fonte { margin: 18px 0 0; font-size: 12.5px; color: #8b9490; }

.palco-campo { margin-top: 44px; }
.titulo-tabela { margin-top: 58px; font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.comercial .sub { margin-top: 14px; }

/* a tabela do site é feita pra fundo claro; aqui ela vive no escuro */
.terreno-escuro th, .terreno-escuro td { border-bottom-color: var(--cinza-linha); }
.terreno-escuro tbody tr:hover { background: rgba(23,132,90,.10); }
.terreno-escuro .marca-sim { color: #4fbe89; font-weight: 700; }
.terreno-escuro .marca-nao { color: #b9807c; }
.terreno-escuro .marca-talvez { color: #d3b26a; }
/* conteúdo largo nunca empurra a página: rola dentro da própria caixa */
.rolagem { overflow-x: auto; margin-top: 26px; }
.rolagem .terreno { margin-top: 0; min-width: 620px; }

.franqueza { margin-top: 40px; }
.franqueza .cartao p + p { margin-top: 14px; }

/* ── as duas camadas da garantia ─────────────────────────────────── */
.camadas { padding: 78px 0; }
.camadas .kicker {
  color: var(--verde-claro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px;
}
.duas-camadas { margin-top: 32px; }
.duas-camadas .cartao { border-left: 4px solid var(--cinza-linha); }
.duas-camadas .camada-1 { border-left-color: var(--verde); background: rgba(14,96,64,.12); }
.duas-camadas .camada-2 { border-left-color: #8b9490; }
.duas-camadas .cartao p + p { margin-top: 12px; }
.duas-camadas .prova {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--cinza-linha);
  font-family: Syne, sans-serif; font-size: 12.5px; font-weight: 600; color: var(--branco);
}

/* ── AS CENAS ────────────────────────────────────────────────────────
   Fotos grandes, quase sem moldura. É o que a home não tinha: imagem
   que ocupa espaço. A tira sai da faixa de 1.180 px de propósito —
   foto de campo pede largura, e é isso que dá o ar do site do fabricante. */
.cenas { padding: 80px 0 84px; }
.cenas .kicker {
  color: var(--verde-claro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px;
}
.tira-cenas {
  display: grid; gap: 18px; margin-top: 40px;
  max-width: 1480px; padding: 0 24px;
  margin-left: auto; margin-right: auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.cena {
  position: relative; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--cinza-linha); background: #0b0d0c;
  min-height: 260px;
}
.cena.grande { grid-column: span 2; }
.cena img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 16 / 10;
}
/* a legenda deita sobre a foto, com um degradê que garante leitura
   sem escurecer a imagem inteira */
.cena figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 60px 24px 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.90) 100%);
  font-size: 14.5px; line-height: 1.55; color: #dfe4e2;
}
.cena figcaption b {
  display: block; margin-bottom: 6px;
  font-family: Syne, sans-serif; font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700; color: var(--branco); letter-spacing: -.01em;
}
@media (max-width: 780px) {
  .cena.grande { grid-column: span 1; }
  .cena figcaption { padding: 48px 18px 18px; }
}

/* ── PROVA SOCIAL ────────────────────────────────────────────────── */
.prova { padding: 80px 0; }
.prova .kicker {
  color: var(--verde-claro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px;
}
.depoimentos {
  display: grid; gap: 18px; margin-top: 36px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.dep {
  border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  background: #0b0d0c; padding: 24px 26px;
  display: flex; flex-direction: column;
}
/* as aspas grandes fazem o olho reconhecer "isto é fala de gente" antes de ler */
.dep blockquote {
  position: relative; padding-top: 26px;
  font-size: 16px; line-height: 1.6; color: var(--cinza-texto);
}
.dep blockquote::before {
  content: "”"; position: absolute; top: -14px; left: -4px;
  font-family: Syne, sans-serif; font-size: 62px; line-height: 1;
  color: var(--verde); opacity: .55;
}
.dep blockquote strong { color: var(--branco); }
.dep figcaption {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--cinza-linha);
  font-family: Syne, sans-serif; font-size: 14.5px; font-weight: 700; color: var(--branco);
}
.dep figcaption span {
  display: block; margin-top: 3px;
  font-family: "Open Sans", sans-serif; font-size: 12.5px; font-weight: 400;
  color: #8b9490; letter-spacing: 0;
}
.fonte-dep { margin-top: 20px; font-size: 12.5px; color: #8b9490; max-width: 78ch; line-height: 1.7; }
.titulo-imprensa { margin-top: 52px; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.imprensa { margin-top: 22px; }
.imprensa .cartao h3 { font-size: 17.5px; line-height: 1.35; }
.imprensa .tag { color: var(--verde-claro); }

/* ── CARTÃO DE PRODUTO ───────────────────────────────────────────── */
.preco { padding: 82px 0; }
.preco .kicker {
  color: var(--verde-claro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px;
}
.produto {
  display: grid; gap: 0; margin-top: 8px;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr);
  border: 1px solid var(--cinza-linha); border-radius: 14px; overflow: hidden;
  background: #0b0d0c;
}
/* os packshots do fabricante vêm com FUNDO BRANCO assado (não é alfa),
   então a foto mora num painel claro — igual à página da caixa. */
.foto-produto { background: #f2f5f3; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.foto-produto > img {
  width: 100%; height: auto; display: block; margin: auto;
  max-height: 380px; object-fit: contain;
}
.miniaturas { display: flex; gap: 10px; justify-content: center; }
.mini {
  width: 62px; height: 62px; padding: 4px; cursor: pointer;
  background: #fff; border: 1px solid rgba(0,0,0,.14); border-radius: 8px;
  transition: border-color .16s ease;
}
.mini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mini:hover { border-color: var(--verde); }
.mini.ativa { border-color: var(--verde); border-width: 2px; padding: 3px; }

/* container-type faz o `cqw` do preço medir a FICHA, não a tela —
   é o que impede a fonte de crescer numa coluna que não cresce. */
.ficha { padding: 32px 34px; display: flex; flex-direction: column; container-type: inline-size; }
.marca-produto {
  font-family: Syne, sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .22em; color: var(--verde-claro); margin-bottom: 8px;
}
.ficha h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 12px; }
.resumo { color: var(--cinza-texto); font-size: 16px; max-width: 46ch; }

/* O PREÇO EM UMA LINHA SÓ. nowrap + tamanho preso ao container:
   foi a fonte em vw dentro de coluna fixa que estourou a versão anterior. */
.preco-linha {
  margin-top: 22px; white-space: nowrap;
  font-family: Syne, sans-serif; font-weight: 800; letter-spacing: -.025em;
  font-size: clamp(26px, 8.2cqw, 42px); line-height: 1.05; color: var(--branco);
}
.preco-linha .cifrao { font-size: .46em; font-weight: 700; color: var(--cinza-texto); margin-right: .12em; }
.preco-linha .cents { font-size: .48em; }
.ficha .condicao { margin-top: 6px; font-size: 13.5px; color: var(--cinza-texto); }

.lista-sim.compacta { margin-top: 20px; }
.lista-sim.compacta li { font-size: 15px; padding: 8px 0 8px 26px; }
.ficha .nada-depois {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--cinza-linha);
  font-size: 14.5px; color: var(--cinza-texto);
}
.ficha .nada-depois strong { color: var(--branco); }
.ficha .acoes { margin-top: auto; padding-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

.letra-preco {
  margin-top: 22px; font-size: 13px; color: #8b9490; max-width: 84ch; line-height: 1.7;
}
.letra-preco a { color: var(--verde-claro); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .produto { grid-template-columns: 1fr; }
  .foto-produto > img { max-height: 300px; }
}

/* ── garantia e assistência na home ──────────────────────────────── */
.garantia-home { padding: 78px 0; }
.garantia-home .kicker {
  color: var(--verde-claro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px;
}
.garantia-home .amarra { margin-top: 28px; }

/* ── COMO A COMPRA CHEGA: o fluxo ────────────────────────────────── */
.fluxo { padding: 62px 0 78px; }
.fluxo-abre .kicker,
.fluxo .kicker, #impostos .kicker, .claro .kicker.escuro {
  color: var(--verde-claro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px;
}
.claro .kicker.escuro { color: var(--verde); }

/* a linha que liga um passo ao outro é o que faz virar FLUXO e não lista */
.passos-fluxo { list-style: none; margin-top: 40px; position: relative; }
.passos-fluxo::before {
  content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px;
  width: 2px; background: linear-gradient(180deg, var(--verde), rgba(14,96,64,.15));
}
.passos-fluxo li {
  position: relative; display: flex; gap: 22px;
  padding: 0 0 34px 0;
}
.passos-fluxo li:last-child { padding-bottom: 0; }
.bolha {
  position: relative; z-index: 1; flex: none;
  width: 44px; height: 44px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #0b0d0c; border: 2px solid var(--verde); color: var(--branco);
  font-family: Syne, sans-serif; font-size: 17px; font-weight: 800;
}
.passos-fluxo h3 { font-size: clamp(19px, 2vw, 24px); margin: 8px 0 10px; }
.passos-fluxo p { color: var(--cinza-texto); font-size: 16.5px; max-width: 68ch; }
.passos-fluxo .excecao {
  margin-top: 12px; padding-left: 13px;
  border-left: 2px solid var(--cinza-linha);
  font-size: 14.5px; color: #8a938f;
}
/* a versão clara vive nas seções de fundo papel */
.amarra.clara {
  margin-top: 30px; background: rgba(14,96,64,.10);
  color: var(--papel-texto); border-color: var(--verde);
  font-size: clamp(18px, 2.1vw, 25px);
}
.amarra.clara strong { color: var(--verde); }
.amarra {
  margin-top: 44px; padding: 24px 26px;
  border: 1px solid var(--verde); border-radius: var(--raio);
  background: rgba(14,96,64,.14);
  font-family: Syne, sans-serif; font-weight: 700;
  font-size: clamp(19px, 2.4vw, 28px); color: var(--branco);
  text-align: center; letter-spacing: -.01em;
}

/* incluso × não existe */
.incluso { margin-top: 34px; }
.lista-sim, .lista-nao { list-style: none; margin-top: 4px; }
.lista-sim li, .lista-nao li {
  position: relative; padding: 9px 0 9px 28px;
  border-top: 1px solid var(--cinza-linha);
  font-size: 15.5px; color: var(--cinza-texto);
}
.lista-sim li::before, .lista-nao li::before {
  position: absolute; left: 0; top: 9px; font-weight: 700;
}
.lista-sim li::before { content: "✓"; color: #4fbe89; }
.lista-nao li::before { content: "✕"; color: #b9807c; }
.incluso .obs {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--cinza-linha);
  font-size: 15px; color: var(--cinza-texto);
}
.regras { margin-top: 22px; }
.regras h3 { font-size: 23px; }
.franqueza-preco {
  margin-top: 34px; padding: 22px 26px;
  border-left: 3px solid var(--verde-claro);
  background: rgba(14,96,64,.10); border-radius: 0 8px 8px 0;
  font-size: 16px; color: var(--cinza-texto); line-height: 1.65; max-width: 82ch;
}
.franqueza-preco strong { color: var(--branco); }
#duvida .fonte { font-size: 13px; color: #8b9490; max-width: 72ch; }

/* ── VIDEOTECA ───────────────────────────────────────────────────── */
.videoteca { padding: 58px 0 84px; }
.videoteca .titulo-kit:first-of-type { margin-top: 0; }
.destaque-filme { margin: 26px 0 0; }

.grade-videos {
  display: grid; gap: 20px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
}
.clipe {
  border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  overflow: hidden; background: #0b0d0c;
  display: flex; flex-direction: column;
}
.clipe video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: #050706; object-fit: cover;
}
.clipe figcaption {
  padding: 16px 18px 18px; flex: 1 1 auto;
  font-size: 14.5px; color: var(--cinza-texto); line-height: 1.55;
  border-top: 1px solid var(--cinza-linha);
}
.clipe figcaption b {
  display: block; margin-bottom: 5px;
  font-family: Syne, sans-serif; font-size: 16.5px; font-weight: 700;
  color: var(--branco); letter-spacing: -.01em;
}
.clipe figcaption a { color: var(--verde-claro); text-decoration: underline; text-underline-offset: 3px; }

/* ── O QUE VEM NA CAIXA ──────────────────────────────────────────── */
.caixa { padding: 62px 0 84px; }
.titulo-kit {
  font-size: clamp(1.15rem, 2vw, 1.55rem); margin: 52px 0 4px;
  padding-bottom: 14px; border-bottom: 1px solid var(--cinza-linha);
}
.caixa .titulo-kit:first-of-type { margin-top: 0; }
.titulo-kit .sub-kit {
  font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 400;
  color: var(--cinza-texto); letter-spacing: 0;
}

.grade-caixa {
  display: grid; gap: 20px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
}
.item {
  display: flex; flex-direction: column;
  border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  background: #0b0d0c; overflow: hidden;
}
/* Os desenhos do manual são traço PRETO em fundo BRANCO. Num site de fundo
   preto eles sumiriam — então cada peça ganha o seu próprio cartão claro,
   que é como ficha de peça é apresentada de qualquer jeito. */
.item .foto {
  background: #f6f8f7; padding: 14px;
  display: flex; align-items: center; justify-content: center;
  min-height: 148px;
}
.item .foto img { display: block; max-width: 100%; height: auto; max-height: 150px; }
.item.destaque .foto { min-height: 190px; }
.item.destaque .foto img { max-height: 190px; }
.item .dito { padding: 20px 22px 22px; flex: 1 1 auto; display: flex; flex-direction: column; }
.item h3 { font-size: 18px; margin-bottom: 10px; line-height: 1.25; }
.item .qtd {
  font-family: "Open Sans", sans-serif; font-size: 13.5px; font-weight: 700;
  color: var(--verde-claro); white-space: nowrap;
}
.item p { color: var(--cinza-texto); font-size: 15.5px; }
.item .prova {
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--cinza-linha);
  font-family: Syne, sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--branco); letter-spacing: .02em;
}
.grade-caixa.ferramentas { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grade-caixa.ferramentas .foto { min-height: 112px; }
.grade-caixa.ferramentas .foto img { max-height: 96px; }

.nota-origem {
  margin-top: 46px; padding: 22px 26px;
  border: 1px dashed var(--cinza-linha); border-radius: var(--raio);
  font-size: 14.5px; color: var(--cinza-texto); line-height: 1.65;
}
.nota-origem p + p { margin-top: 12px; }
.nota-origem strong { color: var(--branco); }

/* ── COMO FUNCIONA: os seis passos ───────────────────────────────── */
.passos { padding: 70px 0 84px; }
.passo {
  display: grid; gap: 26px; align-items: center;
  grid-template-columns: 56px minmax(280px, 1fr) minmax(280px, 1fr);
  padding: 34px 0; border-bottom: 1px solid var(--cinza-linha);
}
.passo:last-child { border-bottom: none; }
/* os pares invertem: vídeo à direita, texto à esquerda — quebra o ritmo
   de lista e deixa a página respirar */
.passo:nth-child(even) .tela { order: 3; }
.passo:nth-child(even) .dito { order: 2; }

.numero-passo {
  align-self: start;
  width: 46px; height: 46px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--verde); color: var(--verde-claro);
  background: rgba(14,96,64,.14);
  font-family: Syne, sans-serif; font-size: 19px; font-weight: 800;
}
.passo .tela {
  border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  overflow: hidden; background: #0b0d0c; line-height: 0;
}
.passo .tela video, .passo .tela img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; background: #050706;
}
.passo .tela.sem-video img { object-fit: contain; }
.passo .tela.sem-video { display: flex; align-items: center; }
.passo h3 { font-size: clamp(19px, 2vw, 25px); margin-bottom: 12px; }
.passo p { color: var(--cinza-texto); font-size: 16.5px; margin-bottom: 12px; }
.passo .prova {
  margin: 16px 0 0; padding-top: 13px;
  border-top: 1px solid var(--cinza-linha);
  font-family: Syne, sans-serif; font-size: 13px; font-weight: 600;
  color: var(--branco); letter-spacing: .03em;
}

/* o passo do aplicativo não tem vídeo limpo: vira lista */
.lista-app {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; background: var(--cinza-linha); line-height: 1.5;
}
.lista-app span {
  background: #0b0d0c; padding: 15px 20px;
  font-size: 15.5px; color: var(--cinza-texto);
  counter-increment: app;
}
.lista-app span::before {
  content: counter(app) ".  "; color: var(--verde-claro); font-weight: 700;
}
.lista-app { counter-reset: app; }
.lista-app b { color: var(--branco); }

@media (max-width: 820px) {
  .passo { grid-template-columns: 1fr; gap: 18px; }
  .passo:nth-child(even) .tela,
  .passo:nth-child(even) .dito { order: 0; }
}

/* ── ECONOMIA DE MÃO DE OBRA ─────────────────────────────────────── */
.economia { padding: 84px 0; }
.economia .kicker {
  color: var(--verde-claro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px;
}

/* os dois vídeos lado a lado: com gente × sem gente */
.dois-lados {
  display: grid; gap: 20px; margin-top: 44px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.dois-lados figure {
  border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  overflow: hidden; background: #0b0d0c;
}
.dois-lados video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; background: #050706;
}
.dois-lados figcaption {
  padding: 15px 18px; font-size: 14.5px; color: var(--cinza-texto);
  border-top: 1px solid var(--cinza-linha);
}
.dois-lados figcaption strong { color: var(--branco); }

/* a calculadora */
.calculadora {
  margin-top: 44px; padding: 32px 34px;
  border: 1px solid var(--cinza-linha); border-left: 4px solid var(--verde);
  border-radius: var(--raio); background: #0e1110;
}
.calculadora h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); margin-bottom: 14px; }
.calculadora .aviso { color: var(--cinza-texto); font-size: 14.5px; max-width: 76ch; }
.calculadora .aviso strong { color: var(--branco); }

.campos {
  display: grid; gap: 18px; margin: 28px 0 30px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.campos label { display: block; }
.campos label > span {
  display: block; margin-bottom: 8px;
  font-size: 13px; color: var(--cinza-texto); line-height: 1.35;
}
.entrada {
  display: flex; align-items: center; gap: 8px;
  background: #060807; border: 1px solid var(--cinza-linha);
  border-radius: 8px; padding: 0 12px;
}
.entrada:focus-within { border-color: var(--verde); }
.entrada input {
  flex: 1; min-width: 0; width: 100%;
  background: transparent; border: 0; color: var(--branco);
  font-family: Syne, sans-serif; font-size: 20px; font-weight: 700;
  padding: 12px 0;
}
.entrada input:focus { outline: none; }
.entrada i {
  font-style: normal; font-size: 13px; color: var(--cinza-texto);
  white-space: nowrap;
}
.entrada i.antes { order: -1; }
.entrada select {
  flex: 1; min-width: 0; width: 100%;
  background: transparent; border: 0; color: var(--branco);
  font-family: "Open Sans", sans-serif; font-size: 15.5px; font-weight: 600;
  padding: 14px 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.entrada select:focus { outline: none; }
.entrada select option { background: #0b0d0c; color: var(--branco); }
/* seta própria: a nativa some com o appearance:none */
label.largo .entrada { position: relative; padding-right: 30px; }
label.largo .entrada::after {
  content: ""; position: absolute; right: 13px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--cinza-texto); border-bottom: 2px solid var(--cinza-texto);
  transform: rotate(45deg);
}
.campos label.largo { grid-column: span 2; }
@media (max-width: 700px) { .campos label.largo { grid-column: span 1; } }

/* marca do que ainda está em conferência — sai quando a fonte chegar */
.provisorio {
  display: block; margin-top: 10px; padding-left: 11px;
  border-left: 2px solid var(--verde-claro);
  font-size: 13.5px; color: #8a938f;
}

/* o placar */
.placar {
  display: grid; gap: 1px; background: var(--cinza-linha);
  border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.placar .lado { background: #0b0d0c; padding: 24px 26px; }
.placar .lado.robo { background: rgba(14,96,64,.14); }
/* o fundo verde translúcido derruba o contraste do rótulo verde:
   medido 3,75:1. Neste lado o rótulo vai mais claro. */
.placar .lado.robo .rot { color: #5fd6a4; }
.placar .rot {
  display: block; font-family: Syne, sans-serif; font-size: 11.5px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--verde-claro); margin-bottom: 14px;
}
/* dois números grandes por lado: o que CUSTA e o que DEMORA.
   O prazo ganhou tamanho porque é ele que o campo "tamanho da equipe"
   controla — sem isso, mexer na equipe parecia não fazer nada. */
.placar .par {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px;
}
.placar .cifra { border-radius: 8px; padding: 4px 8px 6px; margin: -4px -8px 0; }
.placar .cifra b {
  display: block; font-family: Syne, sans-serif;
  font-size: clamp(26px, 3vw, 38px); font-weight: 800;
  color: var(--branco); line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.placar .cifra span {
  display: block; margin-top: 4px;
  font-size: 13px; color: var(--cinza-texto); line-height: 1.3;
}
/* o realce que diz "ouvi você" quando o número muda */
@keyframes pulsa { from { background: rgba(23,132,90,.30); } to { background: transparent; } }
.placar .cifra.pulsa { animation: pulsa .5s ease-out; }
@media (prefers-reduced-motion: reduce) { .placar .cifra.pulsa { animation: none; } }

/* as barras do prazo */
.barras { margin-top: 22px; }
.barra-linha { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.barra-linha .et {
  flex: none; width: 62px; text-align: right;
  font-family: Syne, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cinza-texto);
}
.barra-linha .trilho {
  flex: 1; height: 14px; border-radius: 999px;
  background: #060807; border: 1px solid var(--cinza-linha); overflow: hidden;
}
.barra-linha .preenche {
  height: 100%; width: 0; border-radius: 999px;
  transition: width .35s cubic-bezier(.22,.7,.3,1);
}
.barra-linha .preenche.manual { background: #7d8a86; }
.barra-linha .preenche.robo { background: var(--verde); }
.barra-linha .vl {
  flex: none; width: 62px;
  font-family: Syne, sans-serif; font-size: 13px; font-weight: 700;
  color: var(--branco); font-variant-numeric: tabular-nums;
}
.barra-nota { margin-left: 74px; font-size: 12.5px; color: #8b9490; }
@media (prefers-reduced-motion: reduce) { .barra-linha .preenche { transition: none; } }

/* a frase da invariância */
.achado {
  margin-top: 22px; padding: 16px 18px;
  border-left: 3px solid var(--verde-claro);
  background: rgba(14,96,64,.10);
  border-radius: 0 8px 8px 0;
  font-size: 15.5px; color: var(--cinza-texto); line-height: 1.6;
}
.placar ul { list-style: none; }
.placar li {
  font-size: 15px; color: var(--cinza-texto);
  padding: 9px 0; border-top: 1px solid var(--cinza-linha);
}
.placar li b, .placar li strong { color: var(--branco); font-weight: 700; }

/* a conta escrita por extenso: é ela que ganha a confiança */
.conta {
  margin-top: 20px; padding: 16px 18px;
  background: #060807; border: 1px dashed var(--cinza-linha);
  border-radius: 8px;
  font-family: ui-monospace, Menlo, monospace; font-size: 13px;
  color: var(--cinza-texto); line-height: 1.7;
  overflow-x: auto;
}
.rodape-calc { margin-top: 20px; }

.rodape { padding: 54px 0 64px; color: var(--cinza-texto); font-size: 14.5px; }
.rodape a { color: var(--cinza-texto); text-decoration: underline; text-underline-offset: 3px; }
.rodape a:hover { color: var(--branco); }
.rodape .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; }
.rodape h4 { font-family: Syne, sans-serif; font-size: 13px; letter-spacing: .08em;
             text-transform: uppercase; color: var(--branco); margin-bottom: 13px; }
.rodape li { list-style: none; margin-bottom: 8px; }
.rodape .legal { margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--cinza-linha);
                 font-size: 13px; line-height: 1.7; }

@media (max-width: 760px) {
  nav.menu { display: none; }
  section { padding: 58px 0; }
  .heroi { padding: 62px 0 52px; }
}

/* ═══ ANATOMIA — as partes da máquina ═════════════════════════════════════
   Duas apresentações do MESMO conteúdo. O SVG dimensiona a fonte em unidades
   do próprio desenho: encolheu o desenho, encolheu a letra junto. Num celular
   de 375px o título de 30 cairia para 5,6px — ilegível. Por isso o corte em
   760px troca o desenho pela lista. Mexeu num, mexe no outro. */
.anatomia { padding: 84px 0 96px; }
.anatomia-svg { margin: 40px 0 0; }
.anatomia-svg svg { width: 100%; height: auto; display: block; }
.ana-tit {
  fill: var(--branco);
  font: 700 34px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.01em;
}
.ana-txt {
  fill: var(--cinza-texto);
  font: 400 24px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.anatomia-lista { display: none; }
.anatomia-lista img {
  width: 100%; height: auto; display: block;
  border-radius: var(--raio); margin-bottom: 24px;
}
.anatomia-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.anatomia-lista li {
  color: var(--cinza-texto); line-height: 1.5;
  border-left: 3px solid var(--verde-claro); padding-left: 14px;
}
.anatomia-lista li b { display: block; color: var(--branco); font-size: 1.05rem; }

@media (max-width: 760px) {
  .anatomia-svg { display: none; }
  .anatomia-lista { display: block; }
}

/* ═══ O QUE ELE RECONHECE — os 12 ícones oficiais da Lymow ═══
   Sissi, 23/08/2026. Entra logo depois de #tecnologia.
   Os SVGs vêm com fill:currentColor, então a cor sai daqui, do `color`
   do <li> — não mexer nos arquivos pra trocar cor. */
.reconhece { background: var(--grafite); padding: 92px 0; }
.reconhece h2 { margin: 10px 0 0; }
.reconhece h2 em { color: var(--verde-claro); font-style: normal; }
.reconhece .sub { max-width: 620px; }

.grade-reconhece {
  list-style: none; margin: 46px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.grade-reconhece li {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 14px; padding: 24px 8px 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--cinza-linha);
  border-radius: var(--raio);
  color: var(--branco);                 /* <- é daqui que o ícone se pinta */
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.grade-reconhece li:hover {
  color: var(--verde-claro);
  background: rgba(34,162,115,.08);
  transform: translateY(-2px);
}
/* altura fixa pro desenho: os 12 vêm com viewBox de proporção diferente,
   e sem isto a fileira fica com ícone grande do lado de ícone pequeno. */
/* O DESENHO É MÁSCARA, NÃO IMAGEM. Medido 23/08/2026: SVG dentro da tag
   img é documento isolado e o currentColor dele resolve pro PRETO — os 12
   ficaram invisíveis no fundo grafite. Aqui o fundo colorido é recortado
   pelo desenho, então a cor vem do `color` do li e o hover verde funciona.
   A altura fixa existe porque os 12 vêm com viewBox de proporção diferente:
   sem ela, ícone grande fica ao lado de ícone pequeno. */
.grade-reconhece .ic {
  display: block; width: 100%; height: 40px;
  background-color: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
          mask: var(--icone) center / contain no-repeat;
}
.grade-reconhece span { font-size: 13px; line-height: 1.2; text-align: center; }

.nota-reconhece {
  margin: 30px 0 0; max-width: 660px;
  font-size: 14px; line-height: 1.6; color: var(--cinza-texto);
}

/* Abaixo de 980px, 6 colunas espremem o ícone a ponto de sumir.
   Medido: com 4 colunas o desenho ainda tem 40px de altura. */
@media (max-width: 980px) {
  .grade-reconhece { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
  .reconhece { padding: 64px 0; }
  .grade-reconhece { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .grade-reconhece li { padding: 18px 6px 14px; gap: 10px; }
  .grade-reconhece .ic { height: 32px; }
  .grade-reconhece span { font-size: 12px; }
}

/* ═══ PONTE ENTRE AS DUAS PÁGINAS DE VÍDEO ═══ Sissi, 23/08/2026.
   Nasceu porque o Paul perguntou 2× "onde estão os vídeos?": ele clicava em
   "Vídeos" no menu e caía na página de demonstração, enquanto os 20 tutoriais
   moram na Central de Ajuda. Bloco de destaque, não linkzinho de rodapé —
   quem se perdeu duas vezes precisa de placa grande. */
.ponte-tutoriais {
  display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
  margin: 26px 0 40px; padding: 30px 32px;
  background: rgba(34,162,115,.08);
  border: 1px solid rgba(34,162,115,.34);
  border-radius: var(--raio);
}
.ponte-tutoriais h3 { margin: 6px 0 10px; font-size: 24px; line-height: 1.25; }
.ponte-tutoriais p { margin: 0 0 18px; max-width: 62ch;
                     font-size: 15.5px; line-height: 1.65; color: var(--cinza-texto); }
.ponte-tutoriais .conta-grande { margin: 0; text-align: center; white-space: nowrap; }
.ponte-tutoriais .conta-grande b {
  display: block; font-family: Syne, system-ui; font-size: 62px; line-height: .9;
  color: var(--verde-claro);
}
.ponte-tutoriais .conta-grande span {
  display: block; margin-top: 8px; font-size: 13px; color: var(--cinza-texto);
}
@media (max-width: 760px) {
  .ponte-tutoriais { grid-template-columns: 1fr; padding: 24px 22px; }
  .ponte-tutoriais h3 { font-size: 20px; }
  .ponte-tutoriais .conta-grande { text-align: left; }
  .ponte-tutoriais .conta-grande b { font-size: 46px; }
}

/* ═══ TIPOS DE GRAMA ═══ Sissi, 23/08/2026 — achado do Paul na página
   oficial da Lymow. Entra logo depois de #terreno, que prometia falar de
   tipo de grama e não falava. */
.gramas { background: var(--papel); color: var(--papel-texto); padding: 92px 0; }
.gramas .kicker { color: var(--verde); }
.gramas h2 { margin: 10px 0 0; color: var(--papel-texto); }
.gramas h2 em { color: var(--verde); font-style: normal; }
.gramas .sub { max-width: 660px; margin-top: 16px; color: #4a5553; }

.duas-estacoes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 44px;
}
.estacao { padding: 26px 26px 22px; border-radius: var(--raio); background: #fff;
           border: 1px solid rgba(0,0,0,.09); }
/* a coluna do Brasil ganha peso: é a que 99% de quem lê vai usar */
.estacao.quente { border-color: rgba(14,96,64,.35); box-shadow: 0 1px 0 rgba(14,96,64,.12); }
.estacao h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
              font-size: 19px; color: var(--papel-texto); }
.estacao h3 small { font-weight: 400; font-size: 14px; color: #6b7573; }
/* o ícone é o oficial da Lymow, "espécie de grama", recortado por máscara —
   mesma lição da grade #reconhece: SVG em <img> não herda cor. */
.ic-grama {
  flex: none; display: block; width: 24px; height: 24px;
  background-color: var(--verde);
  -webkit-mask: url(assets/icones/especie_de_grama.svg) center/contain no-repeat;
          mask: url(assets/icones/especie_de_grama.svg) center/contain no-repeat;
}
.lista-gramas { list-style: none; margin: 0; padding: 0; }
.lista-gramas li { padding: 13px 0; border-top: 1px solid rgba(0,0,0,.08); }
.lista-gramas li:first-child { border-top: 0; padding-top: 0; }
.lista-gramas b { display: block; font-size: 16px; }
.lista-gramas .cient { display: block; margin-top: 2px;
                       font-size: 13px; font-style: italic; color: #6b7573; }
.lista-gramas .obs { display: block; margin-top: 5px;
                     font-size: 13.5px; line-height: 1.5; color: #4a5553; }
.estacao.fria .lista-gramas b { color: #4a5553; }   /* menos peso: raras aqui */

.nota-gramas { margin-top: 30px; padding: 24px 26px; background: #fff;
               border: 1px solid rgba(0,0,0,.09); border-left: 3px solid var(--verde);
               border-radius: 0 var(--raio) var(--raio) 0; }
.nota-gramas p { margin: 0 0 12px; max-width: 78ch;
                 font-size: 15px; line-height: 1.68; color: #4a5553; }
.nota-gramas p:last-child { margin-bottom: 0; }
.nota-gramas strong { color: var(--papel-texto); }
.nota-gramas a { color: var(--verde); }

@media (max-width: 860px) {
  .gramas { padding: 66px 0; }
  .duas-estacoes { grid-template-columns: 1fr; gap: 18px; }
  .estacao { padding: 22px 20px 18px; }
  .nota-gramas { padding: 20px 18px; }
}

/* ═══ FORMULÁRIO DE AVALIAÇÃO DO TERRENO ═══ Sissi, 23/08/2026.
   Achado do Paul: "NÃO TEM FORMULÁRIO". O site empurrava pra avaliação e
   não tinha onde escrever. Duas colunas: o formulário e o veredito ao vivo. */
.form-terreno {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px;
  margin-top: 34px; align-items: start;
}
#formTerreno { display: grid; gap: 18px; }
#formTerreno .linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#formTerreno label { display: block; font-size: 14.5px; font-weight: 600; color: var(--branco); }
#formTerreno .dica { display: block; margin-top: 2px;
                     font-size: 12.5px; font-weight: 400; color: #8b9794; }
#formTerreno input[type=text], #formTerreno input[type=tel],
#formTerreno input[type=number], #formTerreno select, #formTerreno textarea {
  width: 100%; box-sizing: border-box; margin-top: 7px;
  padding: 12px 14px;
  font: inherit; font-size: 15px;      /* 15px+ evita o zoom automático do iOS */
  color: var(--branco); background: rgba(255,255,255,.05);
  border: 1px solid var(--cinza-linha); border-radius: 8px;
}
#formTerreno textarea { resize: vertical; }
#formTerreno ::placeholder { color: #77817f; }
#formTerreno input:focus, #formTerreno select:focus, #formTerreno textarea:focus {
  outline: none; border-color: var(--verde-claro); background: rgba(34,162,115,.07);
}
#formTerreno fieldset { margin: 0; padding: 0; border: 0; }
#formTerreno legend { padding: 0; margin-bottom: 10px;
                      font-size: 14.5px; font-weight: 600; color: var(--branco); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block; padding: 9px 15px; cursor: pointer;
  font-size: 14px; font-weight: 400; color: var(--cinza-texto);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--cinza-linha); border-radius: 100px;
  transition: all .15s;
}
.chip input:checked + span {
  color: var(--branco); background: rgba(34,162,115,.18);
  border-color: var(--verde-claro);
}
.chip input:focus-visible + span { outline: 2px solid var(--verde-claro); outline-offset: 2px; }
.acoes-form { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 4px; }
.acoes-form .botao { cursor: pointer; border: 0; font: inherit; }
.acoes-form .botao.vazado { border: 1px solid var(--cinza-linha); }
.erro-form { margin: 0; padding: 11px 14px; font-size: 14px;
             color: #ffb4a8; background: rgba(255,90,70,.1);
             border: 1px solid rgba(255,90,70,.35); border-radius: 8px; }
.nota-privacidade { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: #8b9794; }

/* O veredito ao vivo — o que separa este formulário de um pedágio */
.veredito {
  position: sticky; top: 20px;
  padding: 26px 26px 24px;
  background: rgba(34,162,115,.07);
  border: 1px solid rgba(34,162,115,.3);
  border-radius: var(--raio);
}
.veredito .kicker { color: var(--verde-claro); }
.veredito h3 { margin: 8px 0 10px; font-size: 21px; line-height: 1.25; }
.veredito p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cinza-texto); }
.veredito ul { margin: 15px 0 0; padding-left: 18px; }
.veredito li { margin-bottom: 8px; font-size: 14px; line-height: 1.55; color: var(--cinza-texto); }
.veredito li b { color: var(--branco); }
.veredito.nao { background: rgba(255,150,60,.07); border-color: rgba(255,150,60,.34); }
.veredito.nao .kicker { color: #ffb570; }

@media (max-width: 900px) {
  .form-terreno { grid-template-columns: 1fr; }
  .veredito { position: static; order: -1; }   /* no celular o veredito vem ANTES */
  #formTerreno .linha-2 { grid-template-columns: 1fr; }
}