/* =========================================================
   BIOTECH — Controle Integrado de Pragas
   Folha de estilo única. Sem framework, sem fonte externa,
   sem biblioteca: o site inteiro é HTML + CSS + um arquivo
   de JavaScript. Isso é o que faz ele abrir em menos de um
   segundo num 4G ruim do interior — que é onde o cliente
   dele está.

   As cores não foram escolhidas: foram MEDIDAS dentro do
   arquivo da logo, pixel a pixel. Por isso o site e a marca
   combinam exatamente.
   ========================================================= */

:root {
  /* Marca */
  --azul: #004166;
  --azul-escuro: #00304c;
  --azul-claro: #00abdc;
  --verde: #94ba33;
  --verde-escuro: #4baa2f;

  /* Escuro executivo — azul-marinho profundo, não preto.

     O fundo é o PRÓPRIO AZUL DA LOGO (#004166) aprofundado. Não é
     escolha de gosto: todas as fotos da Biotech têm a van branca com
     azul. Sobre um fundo preto elas flutuam e parecem recortadas e
     coladas; sobre o azul da marca elas assentam, porque são da mesma
     família de cor.

     O verde continua sendo o verde da logo. Sobre o azul profundo ele
     é o par de maior contraste possível dentro da própria marca — daí
     o ar de painel de instrumento, sem inventar cor nenhuma. */
  --preto: #062a3f;
  --grafite: #0d3a54;
  --grafite-claro: #154a68;
  --borda-escura: rgba(0, 171, 220, .26);
  --texto-escuro: #cfe2ec;
  --texto-escuro-fraco: #8fb0c4;
  --verde-claro: #a8d94a;

  /* Texto e superfícies */
  --tinta: #14242e;
  --tinta-media: #4d616d;
  --tinta-fraca: #6d818c;
  --linha: #dbe5eb;
  --fundo: #ffffff;
  --fundo-suave: #f3f8fa;

  /* WhatsApp — cor oficial, para o botão ser reconhecido de relance */
  --zap: #25d366;
  --zap-escuro: #128c7e;

  --largura: 1140px;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(0, 48, 76, .06), 0 8px 24px rgba(0, 48, 76, .07);
  --sombra-alta: 0 2px 4px rgba(0, 48, 76, .08), 0 18px 40px rgba(0, 48, 76, .13);
  --transicao: .18s ease;
}

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

/* Os cartões são "flex", e "flex" ganha de "hidden". Sem esta linha, o
   filtro de pragas esconderia e o cartão continuaria aparecendo. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--azul-claro); }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--azul);
  text-wrap: balance;
}
h1 { font-size: clamp(1.95rem, 1.25rem + 2.7vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--azul-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- estrutura ---------- */

.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: 22px;
}

.secao { padding: clamp(40px, 5vw, 64px) 0; }

/* ---------- a vibe da marca nos espaços claros ----------

   O material publicitário da Biotech tem três assinaturas: a malha de
   hexágonos ao fundo, as ondas azul-e-verde e o degradê que sai do
   azul-marinho para o claro. O site tinha a cor certa mas nenhuma das
   três — por isso as seções claras pareciam papel em branco, e não
   peça da mesma marca.

   A malha é DESENHADA aqui, não baixada: são 575 caracteres de
   texto dentro da própria folha de estilo. Não é mais um arquivo para
   o celular buscar no 4G do interior, e ela fica nítida em qualquer
   tela porque é traço, não foto. */
:root {
  --malha-hexagonos: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2241.6%22%20height=%2272.0%22%20viewBox=%220%200%2041.6%2072.0%22%3E%3Cpath%20d=%22M0.0,24.0L-20.8,12.0L-20.8,-12.0L-0.0,-24.0L20.8,-12.0L20.8,12.0Z%20M41.6,24.0L20.8,12.0L20.8,-12.0L41.6,-24.0L62.4,-12.0L62.4,12.0Z%20M20.8,60.0L0.0,48.0L0.0,24.0L20.8,12.0L41.6,24.0L41.6,48.0Z%20M0.0,96.0L-20.8,84.0L-20.8,60.0L-0.0,48.0L20.8,60.0L20.8,84.0Z%20M41.6,96.0L20.8,84.0L20.8,60.0L41.6,48.0L62.4,60.0L62.4,84.0Z%22%20fill=%22none%22%20stroke=%22%23004166%22%20stroke-opacity=%22.10%22%20stroke-width=%221.1%22/%3E%3C/svg%3E");
}

/* Toda seção clara ganha a malha. Bem fraca de propósito: ela é para
   ser sentida, não lida. Se você reparar nela conscientemente, está
   forte demais.

   O :not() não é firula. A seção escura já usa o ::before dela para o
   clarão azul, com uma geometria própria (right/top/width/height e
   left/bottom soltos). Se a malha entrasse aqui com inset:0, o left:0
   herdado venceria o right:-12% — porque quando left, right e width
   estão os três definidos, o navegador ignora o right — e o clarão
   pularia da direita para a esquerda da seção. */
.secao:not(.secao--escura) { position: relative; }
.secao:not(.secao--escura)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--malha-hexagonos);
  pointer-events: none;
}
.secao > * { position: relative; z-index: 1; }

/* Os clarões do banner — verde entrando por cima à direita, azul por
   baixo à esquerda. Só nas seções acinzentadas, para o site continuar
   alternando entre respiro e cor em vez de ficar tudo igual. */
.secao--suave {
  background:
    radial-gradient(130% 84% at 92% -6%, rgba(148, 186, 51, .16), transparent 58%),
    radial-gradient(104% 76% at -6% 106%, rgba(0, 171, 220, .16), transparent 60%),
    var(--fundo-suave);
}

/* Seção escura. Substitui o azul-marinho chapado que havia antes: o
   grafite com o clarão verde tem profundidade e faz o bloco parecer
   uma peça à parte, e não mais uma faixa colorida. */
.secao--escura {
  position: relative;
  overflow: hidden;
  background: var(--preto);
  color: var(--texto-escuro);
}
.secao--escura::before {
  content: "";
  position: absolute;
  right: -12%;
  top: -40%;
  width: 62%;
  height: 180%;
  background: radial-gradient(closest-side, rgba(0, 171, 220, .18), transparent 70%);
  pointer-events: none;
}
.secao--escura > * { position: relative; z-index: 1; }
.secao--escura h2, .secao--escura h3, .secao--escura h4 { color: #fff; }
.secao--escura .olho { color: var(--verde-claro); }
.secao--escura .linha-fina { color: var(--texto-escuro); }
.secao--escura a { color: var(--verde-claro); }
.secao--escura strong { color: #fff; }
.secao--escura .lista-tique li { color: var(--texto-escuro); }
.secao--escura .lista-tique li::before { background: var(--verde); }
.secao--escura .fichas li {
  background: rgba(255, 255, 255, .045);
  border-color: var(--borda-escura);
  color: var(--texto-escuro);
}
.secao--escura .botao--contorno { color: #fff; }
.secao--escura .botao--contorno:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.secao--escura .figura { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.secao--escura .figura figcaption {
  background: var(--grafite);
  border-top-color: var(--verde);
  color: var(--texto-escuro-fraco);
}
.secao--escura .cartao {
  background: var(--grafite);
  border-color: var(--borda-escura);
  box-shadow: none;
}
.secao--escura .cartao p { color: var(--texto-escuro-fraco); }
.secao--escura .cartao__icone { background: rgba(0, 171, 220, .14); }
.secao--escura .cartao__icone svg { color: var(--verde-claro); }
.secao--escura .passo {
  background: var(--grafite);
  border-color: var(--borda-escura);
  border-left-color: var(--verde);
}
.secao--escura .passo p { color: var(--texto-escuro-fraco); }

/* Divisória entre blocos que moram na MESMA seção. Sem ela, dois
   assuntos com o mesmo fundo viram um texto só; com uma faixa nova,
   viriam dois respiros grandes seguidos e pareceria buraco. */
.divisoria {
  height: 1px;
  margin: 44px 0 38px;
  border: 0;
  background: linear-gradient(90deg, var(--linha), transparent 78%);
}

.secao__topo { max-width: 720px; margin-bottom: 30px; }
.secao__topo--centro { margin-inline: auto; text-align: center; }

.olho {
  display: block;
  margin-bottom: 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde-escuro);
}

.linha-fina { color: var(--tinta-media); font-size: 1.06rem; }

/* Pular para o conteúdo: primeira parada de quem navega por teclado
   ou leitor de tela. Fica escondido até receber foco. */
.pular {
  position: absolute; left: -9999px;
  background: var(--azul); color: #fff;
  padding: 12px 18px; border-radius: 0 0 var(--raio) 0; z-index: 200;
}
.pular:focus { left: 0; top: 0; }

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

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transicao), background var(--transicao),
              border-color var(--transicao), box-shadow var(--transicao);
}
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0); }
/* Os ícones são desenhados com "currentColor": herdam a cor do texto
   onde estiverem. Um só arquivo serve o site inteiro, em qualquer cor. */
.botao svg { flex: none; width: 20px; height: 20px; }

.botao--zap { background: var(--zap); color: #08341c; box-shadow: var(--sombra); }
.botao--zap:hover { background: #1fbe5b; color: #08341c; }

.botao--principal { background: var(--azul-claro); color: #00232f; box-shadow: var(--sombra); }
.botao--principal:hover { background: #29bde9; color: #00232f; }

.botao--contorno { border-color: currentColor; color: var(--azul); background: transparent; }
.botao--contorno:hover { background: rgba(0, 65, 102, .07); color: var(--azul); }

.capa .botao--contorno { color: #fff; }
.capa .botao--contorno:hover { background: rgba(255, 255, 255, .13); color: #fff; }

.botoes { display: flex; flex-wrap: wrap; gap: 14px; }
.botoes--centro { justify-content: center; }

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

/* Cabeçalho grafite, do mesmo tom da capa.

   Uma barra branca em cima de uma capa preta corta a tela em duas e
   entrega o truque: dá a impressão de um tema colado por cima de um
   modelo pronto. Com o cabeçalho no mesmo tom, a primeira tela vira
   uma peça só — que é o que faz um site parecer feito sob medida.

   Sem "backdrop-filter": ele custava GPU em celular simples, que é o
   aparelho de boa parte de quem vai abrir este site, e com o fundo
   100% opaco não fazia diferença nenhuma na tela. */
.topo {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--preto);
  border-bottom: 1px solid var(--borda-escura);
}
.topo__caixa {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 76px;
}
.topo__logo { flex: none; margin-right: auto; }
.topo__logo img { width: 176px; }

.menu { display: flex; align-items: center; gap: 4px; }
.menu a {
  padding: 9px 13px;
  border-radius: 7px;
  color: var(--texto-escuro);
  font-size: .97rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
.menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu a[aria-current="page"] {
  color: var(--verde-claro);
  box-shadow: inset 0 -2px 0 var(--verde);
}

.topo__acoes { display: flex; align-items: center; gap: 12px; }
.topo__fone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-weight: 700;
  font-size: .97rem;
  text-decoration: none;
  white-space: nowrap;
}
.topo__fone svg { width: 17px; height: 17px; color: var(--verde-claro); }
.topo__acoes .botao { padding: 11px 18px; font-size: .95rem; }

.abrir-menu {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--borda-escura);
  border-radius: 8px;
  cursor: pointer;
}
.abrir-menu svg { width: 24px; height: 24px; margin: auto; color: #fff; }

/* ---------- capa ---------- */

/* A capa é grafite, não azul.

   O azul-marinho da marca continua no rodapé e nos detalhes, mas a
   primeira tela é escura de propósito: fundo escuro com um acento
   claro é o que separa, de relance, site de empresa grande de site
   feito em modelo pronto. Não é moda — é que o escuro obriga a haver
   respiro e hierarquia, coisas que o fundo branco perdoa. */
.capa {
  position: relative;
  overflow: hidden;
  background: var(--preto);
  color: var(--texto-escuro);
}

/* Malha técnica: linhas finíssimas, sumindo nas bordas. É o que dá o
   ar de painel de instrumento sem custar um arquivo de imagem. */
.capa::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 171, 220, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 171, 220, .07) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(125% 95% at 22% 0%, #000 32%, transparent 76%);
  mask-image: radial-gradient(125% 95% at 22% 0%, #000 32%, transparent 76%);
  pointer-events: none;
}

/* Clarão verde atrás do texto, bem aberto e fraco. */
.capa::after {
  content: "";
  position: absolute;
  left: -14%;
  top: -55%;
  width: 78%;
  height: 165%;
  background: radial-gradient(closest-side, rgba(0, 171, 220, .20), transparent 72%);
  pointer-events: none;
}

/* ---------- capa das páginas internas: foto ao fundo ---------- */

/* A foto entra como <img> de verdade, e não como imagem de fundo do
   CSS, por dois motivos: o navegador escolhe sozinho a versão pequena
   no celular — economiza dados de quem está no 4G — e a imagem entra
   na fila de carregamento com prioridade, em vez de esperar o CSS ser
   lido inteiro. */
.capa__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Dois véus somados, e cada um faz uma coisa.

   O primeiro é horizontal: escurece muito onde a letra passa e abre do
   meio para a direita, para a foto continuar sendo foto. O segundo é
   uma lavagem azul por cima de tudo, que amarra a foto à cor da marca
   — sem ela, cada página interna teria uma temperatura de cor
   diferente e o site pareceria remendado. */
.capa--fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(97deg,
      rgba(4, 28, 42, .93) 0%,
      rgba(4, 28, 42, .86) 42%,
      rgba(4, 28, 42, .76) 100%),
    linear-gradient(rgba(6, 42, 63, .62), rgba(6, 42, 63, .62));
}
/* ---------- topo das páginas internas ----------

   Três tentativas até aqui, e vale registrar por quê:

   1. título POR CIMA da foto — nenhum véu resolvia. Escuro o bastante
      para a letra ler é escuro o bastante para apagar a foto;
   2. foto em faixa larga, título embaixo — a faixa é 3:1 e as fotos
      são 16:9, então o navegador descartava 70% da altura e levava a
      cabeça do técnico junto;
   3. esta. A foto fica INTEIRA, do lado do título, na proporção dela.

   Numa tela larga, mostrar uma foto 16:9 inteira em faixa cheia daria
   mais de mil pixels de altura — uma tela inteira só de imagem. Em
   metade da largura, a mesma foto cabe em trezentos e poucos, sem
   cortar nada. */
.topo-pagina { padding-top: clamp(30px, 4vw, 46px); padding-bottom: 0; }
.topo-pagina__grade {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
}
.topo-pagina h1 { max-width: 620px; margin-bottom: .4em; }

/* Título longo pede corpo menor — é regra velha de tipografia, e existe
   por uma razão prática: o corpo do h1 do site foi calibrado para
   frases de 4 a 6 palavras. A frase da página Empresa tem 146
   caracteres e, no corpo cheio, virava uma parede de 8 linhas ocupando
   61% da tela antes de o visitante ler qualquer coisa.

   Diminuir a letra não é diminuir a importância: o título continua
   sendo o maior texto da página e o primeiro que se lê. O que muda é
   que ele cabe em cinco linhas em vez de oito.

   Mas existe um piso: o corpo do h2 (2.2rem). Título principal menor
   que os subtítulos da mesma página inverte a hierarquia e o leitor
   perde a referência do que é mais importante — foi o que aconteceu na
   primeira tentativa, com 2.15rem. Daí o 2.45rem: o menor valor que
   ainda ganha do h2 com folga. */
.topo-pagina__grade--texto-longo { grid-template-columns: 1.45fr 1fr; }
.topo-pagina__grade--texto-longo h1 {
  max-width: none;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.45rem);
  line-height: 1.24;
}
.topo-pagina__sub { max-width: 560px; margin-bottom: 0; }
.topo-pagina__foto {
  margin: 0;
  overflow: hidden;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-alta);
}
/* No celular a grade de duas colunas tem de virar uma.

   Sem esta regra, as duas colunas continuam existindo numa tela de
   375px e ficam com uns 160px cada: o título quebra numa palavra por
   linha e a foto encolhe até virar miniatura de selo, espremida ao
   lado do texto. A foto passa a vir DEPOIS do texto porque, no celular,
   o que resolve a visita é a frase — a foto ilustra. */
@media (max-width: 760px) {
  .topo-pagina__grade { grid-template-columns: 1fr; gap: 26px; }
  .topo-pagina__grade > :first-child { order: 1; }
  .topo-pagina__foto { order: 2; }
  .topo-pagina h1, .topo-pagina__sub { max-width: none; }
}

/* "contain" e não "cover": é isto que garante a foto inteira. Como a
   moldura já vem na proporção da imagem, não sobra tarja nenhuma. */
.capa__retrato { width: 100%; height: auto; display: block; object-fit: contain; }

.local-claro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 15px 6px 11px;
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: 100px;
  /* Azul, e não o verde da marca, por medida: verde-escuro sobre o
     cinza-claro do fundo dá 2,8:1 de contraste, e o mínimo para texto
     é 4,5:1. Numa tela de celular no sol, esta linha sumia. O verde
     continua no ícone ao lado, que é decorativo — a mesma divisão que
     o resto do site já usa em componente claro. */
  color: var(--azul);
  font-size: .81rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.local-claro svg { width: 15px; height: 15px; }

.capa--fundo::before { opacity: .5; }        /* a malha técnica recua */
.capa--fundo .capa__caixa { padding: clamp(48px, 6vw, 78px) 0; }

/* A capa da página inicial é a única em tela cheia com a foto inteira.
   Ela pede três coisas diferentes das internas: mais altura, para a
   foto respirar; um véu que abre mais para a direita, porque é lá que
   está o técnico e ele precisa aparecer; e o texto ocupando pouco mais
   de metade da largura, para não invadir a figura. */
.capa--principal { min-height: clamp(440px, 60vh, 580px); display: grid; align-items: center; }
.capa--principal .capa__caixa { padding: clamp(44px, 5vw, 68px) 0 clamp(32px, 4vw, 48px); }
.capa--principal .capa__texto { max-width: 620px; }
.capa--principal::after {
  background:
    linear-gradient(96deg,
      rgba(4, 28, 42, .95) 0%,
      rgba(4, 28, 42, .88) 40%,
      rgba(4, 28, 42, .52) 74%,
      rgba(4, 28, 42, .34) 100%),
    linear-gradient(rgba(6, 42, 63, .38), rgba(6, 42, 63, .38));
}

.capa__caixa { position: relative; z-index: 2; padding: clamp(56px, 7.5vw, 104px) 0; }
.capa__texto { max-width: 760px; }
.capa h1 { color: #fff; }
.capa h1 strong { color: var(--verde-claro); font-weight: inherit; }

.capa__local {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  padding: 7px 16px 7px 12px;
  background: rgba(0, 171, 220, .10);
  border: 1px solid var(--borda-escura);
  border-radius: 100px;
  color: var(--verde-claro);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.capa__local svg { width: 15px; height: 15px; }
.capa__sub {
  max-width: 620px;
  margin-bottom: 32px;
  font-size: clamp(1.04rem, .97rem + .35vw, 1.18rem);
  color: var(--texto-escuro);
}
/* A linha de prova: nota do Google + tempo de mercado, logo abaixo dos
   botões. É o padrão clássico de conversão — chamada, ação e prova no
   mesmo campo de visão. As estrelas são texto, não imagem: escalam,
   pesam zero e ficam na cor da marca. */
.capa__prova {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 22px 0 0;
  font-size: .95rem;
  color: var(--texto-escuro);
}
.capa__prova strong { color: #fff; }
.capa__estrelas { color: var(--verde-claro); letter-spacing: 2px; }

.capa__nota {
  margin: 10px 0 0;
  font-size: .9rem;
  color: var(--texto-escuro-fraco);
}




/* ---------- faixa de dados sob a capa ---------- */

/* Os três públicos da Biotech, no lugar mais visto do site inteiro:
   colados na capa, logo abaixo dos botões.

   Aqui havia uma faixa com "2 estados / CRQ / ANVISA / 6 serviços", e
   ela saiu porque repetia o que já estava em volta: CRQ e ANVISA
   aparecem por extenso na faixa de credenciais logo abaixo, "2 estados"
   está na pílula do topo da própria capa e "6 serviços" abre a seção
   seguinte. Trocar repetição por informação nova é o único jeito de dar
   destaque sem a página crescer. */
.segmentos {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--borda-escura);
  border-top: 1px solid var(--borda-escura);
  border-bottom: 1px solid var(--borda-escura);
  list-style: none;
}
.segmentos li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 22px;
  background: var(--preto);
}
.segmentos svg {
  flex: none;
  width: 29px; height: 29px;
  color: var(--verde-claro);
}
.segmentos b {
  display: block;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.segmentos span {
  display: block;
  margin-top: 3px;
  color: var(--texto-escuro-fraco);
  font-size: .84rem;
  line-height: 1.45;
}



/* Foto em bloco, ao lado de um texto. */
.figura {
  margin: 0;
  overflow: hidden;
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
}
.figura img { width: 100%; display: block; }
.figura figcaption {
  padding: 13px 18px;
  background: var(--fundo-suave);
  border-top: 3px solid var(--verde);
  color: var(--tinta-media);
  font-size: .88rem;
  line-height: 1.5;
}

/* ---------- esteira das pragas ---------- */

/* Uma faixa em que as pragas desfilam da direita para a esquerda e vão
   sumindo ao chegar na névoa do pulverizador. É a única peça do site
   que existe para ser vista, e não lida: ela conta em três segundos o
   que a página inteira explica em texto.

   Tudo é CSS. Nenhuma biblioteca de animação, nenhum vídeo — o que
   roda é uma única translação, que o navegador resolve na placa de
   vídeo e não custa bateria. */
.esteira {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--preto), #041f2f);
  border-top: 1px solid var(--borda-escura);
  border-bottom: 1px solid var(--borda-escura);
  display: flex;
  align-items: center;
  padding: 0;

  /* A ALTURA DA FAIXA NÃO ACOMPANHA O BONECO — quem manda no tamanho
     dele é só a altura em .esteira__tecnico. Mas existe um piso: a
     faixa é a caixa e ele é o conteúdo, então ela nunca fica menor do
     que ele. Para encolher a faixa, encolhe o boneco antes. */
  min-height: 324px;

  /* Onde o técnico fica. Vira variável porque a MÁSCARA que dissolve
     as pragas precisa usar exatamente a mesma conta — antes a máscara
     estava em pixels fixos e, em tela larga, as pragas atravessavam o
     técnico inteiro antes de sumir. */
  --esteira-x: max(18px, calc((100vw - var(--largura)) / 2 + 190px));
}

/* Chão da esteira: uma linha de luz, para as pragas parecerem andar
   sobre alguma coisa em vez de flutuar. */
.esteira::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent,
              rgba(0, 171, 220, .35) 22%, rgba(0, 171, 220, .35) 88%, transparent);
}

/* A fila fica na camada 1 e o boneco na 2: sem isso a lança dele
   passava POR TRÁS do primeiro cartão, e ele parecia estar apontando
   para dentro da foto em vez de para a praga. */
.esteira__trilho {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 44px;
  width: max-content;
  padding-left: calc(var(--esteira-x) + 700px);
  /* Devagar de propósito: a esteira é para ser notada de canto de olho
     enquanto a pessoa lê o resto, não para disputar a atenção.

     A conta é invertida: para a esteira andar 28% MAIS RÁPIDO, a
     duração tem de CAIR — 78 / 1,28 = 61s. Quem aumenta o número aqui
     achando que acelera, desacelera. */
  animation: desfilar 61s linear infinite;

  /* Antes a máscara apagava a praga antes de ela chegar no técnico.
     Agora ela PASSA e leva o X — quem elimina é o jato, não a máscara.
     Aqui sobram só as bordas, para a fila não começar cortada em bloco. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px,
                      #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 80px,
              #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(90deg,
      transparent 0,
      transparent calc(var(--esteira-x) + 70px),
      #000 calc(var(--esteira-x) + 300px),
      #000 calc(100% - 40px), transparent 100%);
}
.esteira:hover .esteira__trilho { animation-play-state: paused; }

@keyframes desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* -50% porque a fila é duplicada */
}

.esteira__item {
  flex: none;
  margin: 0;
  width: 200px;
  text-align: center;
}
.esteira__item img {
  width: 200px; height: 200px;
  border-radius: 18px;
  border: 1px solid var(--borda-escura);
  object-fit: cover;
  filter: saturate(.94);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
/* O X que marca a praga eliminada. Ele aparece quando o bicho cruza a
   ponta da lança — e quem decide isso é o JavaScript, medindo posição
   de verdade, porque a posição do técnico muda com a largura da tela e
   nenhuma animação de tempo fixo acerta em todas. */
.esteira__foto { position: relative; }
.esteira__x {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.5) rotate(-14deg);
  transition: opacity .22s ease, transform .28s cubic-bezier(.2, 1.5, .4, 1);
}
.esteira__x svg { width: 58%; height: 58%; color: #ff3b30; }
.esteira__item--morto .esteira__x { opacity: 1; transform: scale(1) rotate(0); }
/* Um tranco curto no momento da pancada. Sem ele o X só "aparece"; com
   ele, a praga é atingida. */
.esteira__item--morto .esteira__foto { animation: levar-jato .42s ease-out 1; }
@keyframes levar-jato {
  0%   { transform: translateX(0) rotate(0); }
  25%  { transform: translateX(-5px) rotate(-5deg); }
  55%  { transform: translateX(4px) rotate(4deg); }
  100% { transform: translateX(0) rotate(0); }
}
.esteira__item--morto img { filter: saturate(.2) brightness(.72); }
.esteira__item--morto figcaption { color: #7d94a3; text-decoration: line-through; }
.esteira__item img, .esteira__item figcaption { transition: filter .3s ease, color .3s ease; }

.esteira__item figcaption {
  margin-top: 11px;
  color: var(--texto-escuro-fraco);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.3;
}

/* O técnico, parado à esquerda, com a névoa saindo da lança. */
/* ESTE NÚMERO, E SÓ ELE, MANDA NO TAMANHO DO BONECO.
   Para aumentar ou diminuir o mascote, mexa aqui e em mais lugar
   nenhum: a faixa tem altura própria e não segue este valor.
   Agora ele é honesto — desde que a viewBox da <svg> da página seja
   a mesma do símbolo, 292px de altura são 292px de desenho pintado.

   Se mexer aqui, confira a min-height da faixa: ela não pode ser
   menor que este valor mais os 20px do pé. */
.esteira__tecnico {
  position: absolute;
  left: var(--esteira-x);
  bottom: 20px;
  z-index: 2;
  height: 292px;
  pointer-events: none;
}
/* O mascote é DESENHO, não foto — foto não dobra o braço.

   As animações dele (braço, mira, piscar, respirar, jato) moram dentro
   do próprio SVG, com nomes prefixados. Aqui só se diz o tamanho. */
.esteira__tecnico > svg { height: 100%; width: auto; display: block; overflow: visible; }





@media (max-width: 760px) {
  /* No celular a faixa encolhe junto com as pragas, mas continuam
     sendo dois números independentes — a faixa nunca é calculada a
     partir da altura do boneco. */
  .esteira { min-height: 214px; padding: 0; }
  .esteira__tecnico { height: 194px; bottom: 12px; }
  .esteira::after { bottom: 10px; }
  .esteira__item { width: 76px; }
  .esteira__item img { width: 76px; height: 76px; }
  .esteira__item figcaption { font-size: .66rem; }
  .esteira__trilho {
    gap: 28px;
    padding-left: calc(var(--esteira-x) + 400px);
  }
}

/* ---------- faixa de credibilidade ---------- */

.selos {
  border-top: 4px solid var(--verde);
  background: var(--fundo-suave);
  padding: 24px 0;
}
.selos__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 26px;
}
.selo { display: flex; gap: 13px; align-items: flex-start; }
.selo svg { flex: none; width: 27px; height: 27px; margin-top: 2px; color: var(--verde-escuro); }
.selo b { display: block; color: var(--azul); font-size: .99rem; }
.selo span { display: block; color: var(--tinta-media); font-size: .89rem; line-height: 1.5; }

/* ---------- grades e cartões ---------- */

.grade { display: grid; gap: 22px; }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }

/* O guia tem 17 fichas. Em três colunas são seis fileiras; em quatro,
   cinco — e como a ficha abre em sanfona, ela é curta o bastante para
   caber numa coluna mais estreita. */
.grade--pragas { grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); }

/* Os serviços na home: atalhos com ícone, não texto solto.

   A versão anterior era uma fileira de pílulas pequenas e cinzas — o
   olho passava batido. Aqui cada serviço ganha ícone, nome em negrito
   e uma linha do que ele resolve. Continua ocupando duas fileiras, mas
   agora É VISTO: o ícone dá âncora visual, e o alvo de clique passa de
   um texto de 100 px para um bloco inteiro, o que muda tudo no
   celular. */
.atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 12px;
  margin-bottom: 6px;
}
.atalho {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 14px;
  background: #fff;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio);
  text-decoration: none;
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}
.atalho:hover {
  transform: translateY(-2px);
  border-color: var(--azul-claro);
  border-left-color: var(--verde);
  box-shadow: var(--sombra);
}
.atalho__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  background: rgba(0, 171, 220, .10);
  border-radius: 10px;
}
.atalho__icone svg { width: 25px; height: 25px; color: var(--azul); }
.atalho__texto { display: block; line-height: 1.3; }
.atalho__texto strong { display: block; color: var(--azul); font-size: 1rem; }
.atalho__texto small { color: var(--tinta-fraca); font-size: .84rem; }
/* A seta só aparece no hover: parada, ela viraria ruído seis vezes. */
.atalho::after {
  content: "→";
  margin-left: auto;
  color: var(--verde-escuro);
  font-weight: 700;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--transicao), transform var(--transicao);
}
.atalho:hover::after { opacity: 1; transform: translateX(0); }

.cartao {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}
.cartao h3 { margin-bottom: .35em; }
.cartao p { margin-bottom: 0; color: var(--tinta-media); font-size: .97rem; }

/* Cartão que é um link inteiro: o sublinhado do navegador estragaria
   o título. O cartão todo já se comporta como botão. */
a.cartao { text-decoration: none; color: inherit; }

.cartao__icone {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 18px;
  background: rgba(0, 171, 220, .1);
  border-radius: 12px;
}
.cartao__icone svg { width: 30px; height: 30px; color: var(--azul); }
.cartao--verde .cartao__icone { background: rgba(148, 186, 51, .18); }
.cartao--verde .cartao__icone svg { color: var(--verde-escuro); }

/* Cartão de serviço. Antes cada serviço ocupava uma seção inteira de
   largura total — seis serviços, 6,5 telas de rolagem. Em cartão, os
   seis cabem em duas telas e dá para comparar um com o outro sem
   rolar, que é como a pessoa realmente escolhe. */
.servico h3 { margin-bottom: .25em; }

.servico__resumo {
  margin-bottom: .8em;
  color: var(--azul);
  font-weight: 600;
  font-size: 1rem;
}
/* "Indicado para" fecha por padrão: quem já sabe o que quer não
   precisa ler a lista, e quem está em dúvida abre. */
.servico__mais { margin-top: auto; padding-top: 14px; }
.servico__mais summary {
  cursor: pointer;
  list-style: none;
  color: var(--verde-escuro);
  font-size: .88rem;
  font-weight: 700;
}
.servico__mais summary::-webkit-details-marker { display: none; }
.servico__mais summary::before { content: "+ "; }
.servico__mais[open] summary::before { content: "– "; }
.servico__mais .fichas { margin-top: 12px; }
.servico__mais .fichas li { font-size: .86rem; padding: 5px 12px; }


/* ---------- lista de conferência ---------- */

.lista-tique { margin: 0; padding: 0; list-style: none; }
.lista-tique li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 32px;
  color: var(--tinta-media);
}
.lista-tique li::before {
  content: "";
  position: absolute;
  left: 0; top: .34em;
  width: 19px; height: 19px;
  background: var(--verde-escuro);
  /* O tique é desenhado em máscara: uma cor só, nenhum arquivo. */
  -webkit-mask: var(--tique) center / 12px no-repeat;
  mask: var(--tique) center / 12px no-repeat;
  border-radius: 50%;
}
.lista-tique {
  --tique: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.4 2 8.2l1.5-1.5 2.7 2.7L12.5 3l1.5 1.5z' fill='%23fff'/%3E%3C/svg%3E");
}

/* ---------- passos do método ---------- */

.passos { counter-reset: passo; display: grid; gap: 18px; }
.passo {
  position: relative;
  padding: 20px 22px 20px 72px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--azul-claro);
  border-radius: var(--raio);
}
.passo::before {
  counter-increment: passo;
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: 24px; top: 24px;
  color: var(--verde);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.passo h3 { margin-bottom: .3em; }
.passo p { margin-bottom: 0; color: var(--tinta-media); font-size: .97rem; }

/* ---------- segmentos atendidos ---------- */

.fichas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fichas li {
  padding: 8px 15px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 100px;
  font-size: .92rem;
}
.secao:not(.secao--escura) .fichas li {
  background: #fff;
  border-color: var(--linha);
  color: var(--azul);
}

/* ---------- pragas ---------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 34px;
  padding: 0;
  list-style: none;
}
.filtro {
  padding: 9px 17px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 100px;
  color: var(--azul);
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.filtro:hover { border-color: var(--azul-claro); }
.filtro[aria-pressed="true"] {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

.praga { padding: 24px 22px; }

/* Foto da espécie em faixa no topo do cartão, sangrando até as bordas.
   Miniatura de 66 px não mostra o bicho: quem chega no guia quer
   RECONHECER o que viu na cozinha, e para isso precisa ver a cor, o
   tamanho relativo e o desenho das costas. */
.praga__foto {
  margin: -24px -22px 18px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--fundo-suave);
  border-radius: calc(var(--raio) - 1px) calc(var(--raio) - 1px) 0 0;
}
.praga__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.praga:hover .praga__foto img { transform: scale(1.04); }

/* NO CELULAR o cartão de praga vira ficha compacta: foto quadrada
   pequena à esquerda, nome e resumo ao lado, sanfona embaixo.

   O motivo é rolagem: com a foto em faixa cheia, o guia de 17 pragas
   media 9.400px de altura — o dobro de qualquer outra página do site.
   Ninguém rola isso tudo no polegar. A miniatura de 92px aqui não
   repete o erro que o comentário lá de cima proíbe: quem quer VER o
   bicho toca no cartão e a sanfona abre com o texto — e a foto grande
   continua a um toque, no próprio arquivo dela.

   O :has() existe porque três cartões não têm foto (usam desenho): sem
   ele, a grade reservaria uma coluna vazia de 92px nesses três. */
@media (max-width: 760px) {
  .praga:has(> .praga__foto) {
    display: grid;
    grid-template-columns: 92px 1fr;
    column-gap: 14px;
    align-items: start;
  }
  .praga:has(> .praga__foto) .praga__foto {
    margin: 0;
    grid-row: 1 / span 2;
    aspect-ratio: 1;
    border-radius: 8px;
  }
  .praga:has(> .praga__foto) .praga__cabeca { margin-bottom: 6px; }
  .praga:has(> .praga__foto) .praga__mais { grid-column: 1 / -1; }
}
.praga__cabeca { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 16px; }
/* O ícone desenhado de praga saiu em 17/08/2026: as três espécies que
   ainda o usavam (formiga fantasma, pernilongo e pulga) ganharam foto
   com licença livre, e agora as 17 do guia têm foto. Se um dia entrar
   espécie sem foto, o caminho é achar foto — no meio de dezesseis
   fotografias, um desenho lê como cartão pela metade. */

/* Créditos das fotos de fora. Não é rodapé decorativo: a licença das
   imagens do Wikimedia Commons EXIGE que autor e licença apareçam. */
.promessa {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 620px;
  margin: 0 0 30px;
  padding: 14px 18px;
  background: rgba(0, 171, 220, .10);
  border: 1px solid rgba(0, 171, 220, .34);
  border-radius: var(--raio);
  /* Esta caixa fica numa seção CLARA, e as cores tinham ficado de uma
     versão em que ela ficava no escuro: texto claro e negrito branco
     sobre fundo azul-clarinho davam 1,2:1 de contraste — o mínimo é
     4,5:1. Na prática a frase mais importante da página, a que promete
     laudo e certificado, estava invisível. Agora segue a mesma
     combinação de todo componente claro do site: ícone verde-escuro,
     negrito azul, texto tinta. */
  color: var(--tinta);
  font-size: .96rem;
}
.promessa svg { flex: none; width: 24px; height: 24px; color: var(--verde-escuro); }
.promessa strong { color: var(--azul); }

/* "Indicado para" perdeu a moldura de cartão: ela só fazia sentido
   quando havia dois cartões lado a lado. Sozinho, o cartão virava uma
   caixa em volta de uma lista curta. */
.indicado h3 { font-size: 1.05rem; margin-bottom: .5em; }

.creditos {
  margin-top: 44px;
  padding: 22px 24px;
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-size: .82rem;
  /* Letra miúda pede MAIS contraste, não menos: em .82rem o
     tinta-fraca dava 3,8:1 sobre o fundo acinzentado. */
  color: var(--tinta-media);
  line-height: 1.7;
}
.creditos summary {
  cursor: pointer;
  margin-bottom: .6em;
  color: var(--tinta-media);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.creditos[open] summary { margin-bottom: 1em; }
.creditos p { margin: 0; }
.creditos a { color: var(--tinta-media); }
.praga h3 { margin-bottom: .18em; font-size: 1.14rem; }
.praga__ciencia { color: var(--tinta-fraca); font-size: .87rem; font-style: italic; }

.praga__resumo {
  margin: 0 0 14px;
  color: var(--tinta-media);
  font-size: .96rem;
}

/* A sanfona. É <details> puro: abre e fecha sem JavaScript nenhum,
   responde ao teclado e ao leitor de tela de graça, e o Google lê o
   conteúdo fechado do mesmo jeito — o texto não sai do site, só sai
   da frente. */
.praga__mais { margin-top: auto; border-top: 1px solid var(--linha); padding-top: 12px; }
.praga__mais summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--verde-escuro);
  font-size: .88rem;
  font-weight: 700;
}
.praga__mais summary::-webkit-details-marker { display: none; }
.praga__mais summary::after {
  content: "";
  width: 8px; height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transicao);
}
.praga__mais[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.praga__mais summary:hover { color: var(--azul-claro); }

.praga dl { margin: 14px 0 0; font-size: .94rem; }
.praga dt {
  margin-top: 13px;
  color: var(--verde-escuro);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.praga dt:first-child { margin-top: 0; }
.praga dd { margin: 3px 0 0; color: var(--tinta-media); line-height: 1.58; }

.alerta {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  margin: 0 0 34px;
  background: #fff6e8;
  border: 1px solid #f0c67a;
  border-left: 4px solid #e08e1a;
  border-radius: var(--raio);
}
.alerta svg { flex: none; width: 25px; height: 25px; margin-top: 2px; color: #b96f06; }
.alerta p { margin: 0; font-size: .95rem; color: #6b4407; }
.alerta strong { color: #4d3105; }

/* ---------- formulário ---------- */

.formulario {
  padding: 30px 28px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.campo { margin-bottom: 18px; }
.campo label {
  display: block;
  margin-bottom: 6px;
  color: var(--azul);
  font-size: .93rem;
  font-weight: 700;
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo textarea { min-height: 118px; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(0, 171, 220, .18);
  outline: none;
}
.campo__dica { display: block; margin-top: 5px; color: var(--tinta-fraca); font-size: .84rem; }
.campo--erro input,
.campo--erro select,
.campo--erro textarea { border-color: #d13d3d; }
.campo__erro { display: none; margin-top: 5px; color: #b32b2b; font-size: .86rem; font-weight: 600; }
.campo--erro .campo__erro { display: block; }

.formulario .botao { width: 100%; }
.formulario__rodape { margin: 14px 0 0; font-size: .86rem; color: var(--tinta-fraca); }

/* ---------- blocos de contato ---------- */

.contato-item {
  display: flex;
  gap: 15px;
  padding: 20px 0;
  border-bottom: 1px solid var(--linha);
}
.contato-item:last-child { border-bottom: 0; }
.contato-item svg { flex: none; width: 25px; height: 25px; margin-top: 3px; color: var(--verde-escuro); }
.contato-item b { display: block; color: var(--azul); }
.contato-item a { font-weight: 600; }
.contato-item span { color: var(--tinta-media); font-size: .94rem; }

/* ---------- clientes atendidos ----------

   Prova social. Em serviço contratado por confiança, três marcas
   reconhecidas na cidade convencem mais do que qualquer texto que eu
   escreva sobre a empresa.

   A faixa fica em FUNDO CLARO de propósito: cada logo tem a cor que
   tem, e uma delas é verde-escura — sobre o azul do site ela sumiria.
   Faixa de clientes onde um cliente não se vê é pior que faixa
   nenhuma. */
/* As colunas foram reequilibradas quando o texto do portfólio cresceu:
   antes era .8fr contra 2fr, o que dava 303 px à coluna de texto e
   empilhava o parágrafo em linhas curtas e altas. Agora o texto tem
   largura de leitura confortável e as quatro marcas continuam cabendo
   numa linha só. */
.clientes {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.5fr;
  gap: 34px;
  align-items: center;
}
.clientes__rotulo p {
  margin: 0 0 .9em;
  color: var(--tinta-media);
  font-size: .94rem;
}
.clientes__rotulo p:last-child { margin-bottom: 0; }
.clientes__rotulo strong { color: var(--azul); }

/* O lema fecha o bloco. Fica em itálico e um pouco menor para ler como
   assinatura, e não como continuação do parágrafo de cima — são duas
   ideias diferentes coladas, e sem essa separação viram um texto só.

   Nasceu na faixa de clientes da home e virou geral quando a página
   Empresa ganhou o dela: mesma função, mesma aparência, uma regra só. */
.lema {
  font-style: italic;
  font-size: .89rem;
  color: var(--azul);
  border-left: 3px solid var(--verde);
  padding-left: 13px;
}
.clientes__marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 22px 34px;
}
.cliente { margin: 0; text-align: center; }
.cliente img {
  height: 62px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  /* Descoloridas em repouso e coloridas no hover é o tratamento usual,
     mas com três marcas só ele empobrece: em cor, cada uma é
     reconhecida de relance por quem é da cidade — que é o ponto. */
  opacity: .92;
  transition: opacity var(--transicao), transform var(--transicao);
}
.cliente:hover img { opacity: 1; transform: translateY(-2px); }
.cliente figcaption {
  margin-top: 8px;
  color: var(--tinta-fraca);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .clientes { grid-template-columns: 1fr; gap: 22px; }
  .cliente img { height: 48px; }
}

/* ---------- chamada final ---------- */

.chamada { text-align: center; }
.chamada h2 { margin-bottom: .4em; }
.chamada p { max-width: 620px; margin-inline: auto; }

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

.rodape {
  background: var(--azul-escuro);
  color: #a9c6d5;
  padding: 54px 0 0;
  font-size: .94rem;
}
.rodape__grade {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
}
.rodape img { width: 208px; margin-bottom: 16px; }
.rodape h4 {
  margin-bottom: 14px;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rodape a { color: #cfe3ee; text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape ul { margin: 0; padding: 0; list-style: none; }
.rodape li { margin-bottom: 9px; }
.rodape__fim {
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #7f9dae;
  font-size: .85rem;
}
.rodape__fim div { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* A assinatura de quem fez o site. Fica no rodapé, discreta — nunca
   competindo com a marca do cliente —, mas com o link sublinhado e em
   branco para ser reconhecido COMO link. Antes ele tinha a mesma cor do
   texto ao redor e sem sublinhado: quem não passasse o mouse por cima
   não descobria que dava para clicar. */
.credito a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--verde);
  text-decoration-thickness: 2px;
}
.credito a:hover { color: var(--verde-claro); }

/* ---------- botão flutuante do WhatsApp ---------- */

.zap-flutua {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 14px 17px;
  background: var(--zap);
  border-radius: 100px;
  color: #08341c;
  font-weight: 700;
  font-size: .97rem;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .26);
  transition: transform var(--transicao), background var(--transicao);
}
.zap-flutua:hover { transform: translateY(-2px); background: #1fbe5b; color: #08341c; }
.zap-flutua svg { width: 25px; height: 25px; }

/* ---------- telas menores ---------- */

@media (max-width: 1040px) {
  .topo__fone { display: none; }
}

@media (max-width: 900px) {
  .abrir-menu { display: grid; place-items: center; order: 3; }
  .topo__acoes { order: 2; }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 22px 20px;
    background: var(--preto);
    border-bottom: 1px solid var(--borda-escura);
    box-shadow: var(--sombra-alta);
  }
  .menu[data-aberto="sim"] { display: flex; }
  .menu a { padding: 14px 12px; border-bottom: 1px solid var(--borda-escura); border-radius: 0; }
  .menu a:last-child { border-bottom: 0; }
  .menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--verde); }

  .rodape__grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  /* No celular o texto ocupa a largura toda, então o véu da capa deixa
     de ser um degradê para o lado e passa a ser de cima para baixo —
     senão a última linha do parágrafo cai em cima da parte clara da
     foto e some. */
  /* NO CELULAR A FOTO SAI DE TRÁS DO TEXTO.

     No computador a capa funciona em camadas: foto ao fundo, véu por
     cima, texto na metade esquerda. Na tela do celular o texto ocupa a
     largura inteira e passa por cima do técnico — e aí não existe véu
     bom. Escuro o bastante para a letra ficar legível, a foto some;
     claro o bastante para a foto aparecer, a letra some. Tentei os dois
     e os dois ficam ruins.

     Então aqui a foto deixa de ser fundo e vira um bloco na fila: a
     chamada fica sobre o azul chapado, e a foto aparece INTEIRA logo
     abaixo, sem corte e sem nada por cima. O texto ganha contraste de
     azul cheio e a foto ganha de volta o que o véu tirava dela.

     Como a foto é bem mais larga que alta, ela cabe na largura da tela
     na altura natural (375 x 211) — não precisa recortar nada. */
  .capa--principal {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .capa--fundo::after { display: none; }
  .capa__fundo {
    position: static;
    order: 2;
    width: 100%;
    height: auto;
    margin-top: 6px;
  }
  .capa__caixa { order: 1; }
  .capa--principal > .container:last-child { order: 3; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .topo__logo img { width: 142px; }
  .topo__acoes .botao span { display: none; }
  .topo__acoes .botao { padding: 12px 14px; }
  .botoes .botao { width: 100%; }
  .rodape__grade { grid-template-columns: 1fr; gap: 30px; }
  /* Na tela pequena o botão flutuante vira só o ícone: ocupar meia
     largura da tela atrapalharia a leitura em vez de ajudar. */
  .zap-flutua { padding: 15px; }
  .zap-flutua span { display: none; }
}

@media print {
  .topo, .zap-flutua, .filtros, .botoes, .abrir-menu { display: none !important; }
  body { font-size: 12pt; }
  .capa { background: none; color: #000; }
  .capa h1, .capa__sub, .capa__nota { color: #000; }
}