/* ============================================================
   LION DEDETIZADORA — style.css
   Tokens da marca + base + componentes
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Cores da marca (extraídas do logo) */
  --preto:        #0a0a0a;   /* fundo principal */
  --carvao:       #141414;   /* cartões / seções alternadas */
  --grafite:      #232323;   /* bordas e divisores */
  --dourado:      #e0a72e;   /* dourado principal (juba) */
  --dourado-claro:#f2c95c;   /* hover / destaques */
  --ambar:        #b07514;   /* dourado escuro (sombra da juba) */
  --marfim:       #f5f0e6;   /* texto sobre fundo escuro — 15.6:1 sobre --preto */
  --cinza-texto:  #b8b3a8;   /* texto secundário — 10.4:1 sobre --preto */
  --cinza-fraco:  #8a847a;   /* placeholders — 5.1:1 sobre --carvao (mínimo AA) */
  --whatsapp:     #25d366;
  --erro:         #f08b84;   /* 8.2:1 sobre --preto */
  --erro-borda:   #e0574e;

  /* Tipografia */
  --fonte-display: "Cinzel", "Times New Roman", serif;   /* títulos — eco do logo imperial */
  --fonte-texto:   "Inter", system-ui, sans-serif;        /* corpo */

  /* Escala */
  --texto-xs: 0.8rem;
  --texto-sm: 0.95rem;
  --texto-md: 1.1rem;
  --texto-lg: 1.5rem;
  --texto-xl: clamp(1.85rem, 5.5vw, 3.2rem);

  /* Layout */
  --largura-max: 1140px;
  --raio: 10px;
  --espaco-secao: clamp(3.5rem, 8vw, 6.5rem);
  --gutter: clamp(2rem, 5vw, 4rem);   /* margem lateral do conteúdo */

  /* Faixa de tela reservada aos botões flutuantes (acessibilidade à
     esquerda, WhatsApp à direita). Nenhum conteúdo deve terminar aqui. */
  --zona-flutuante: 5.5rem;
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Reserva a altura do cabeçalho fixo ao saltar para uma âncora. Sem
     isto, o alvo do link para debaixo do cabeçalho e o começo do texto
     fica escondido — vale para o "pular para o conteúdo" também. */
  scroll-padding-top: 5.5rem;
  /* Trava de segurança: vídeos de fundo usam transform: scale() no efeito
     de zoom lento (Ken Burns). Em alguns motores, o elemento escalado
     vaza alguns pixels para fora do contêiner mesmo com overflow:hidden
     local, sem aparecer no scrollWidth — e a página ganha rolagem lateral
     que ninguém vê no código, só sente no celular. Isto aqui não afeta a
     rolagem horizontal proposital do calendário (.mapa), que tem seu
     próprio overflow-x:auto interno. */
  overflow-x: hidden;
}

body {
  background: var(--preto);
  color: var(--marfim);
  font-family: var(--fonte-texto);
  font-size: var(--texto-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

a { color: var(--dourado); text-decoration: none; }
a:hover { color: var(--dourado-claro); }

h1, h2, h3 {
  font-family: var(--fonte-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

/* Margem lateral constante em vez de proporcional. Com 92vw, a margem
   variava de 14px no celular a 100px no monitor — no celular ficava
   apertado e no monitor, largo demais sem motivo. */
.container {
  width: min(var(--largura-max), 100% - var(--gutter));
  margin-inline: auto;
}

.secao { padding-block: var(--espaco-secao); }
.secao--alt {
  background: var(--carvao);
  position: relative;
}
/* Fio de luz na emenda das seções: suaviza o corte entre os dois tons de
   fundo, que a olho nu aparece como uma linha dura. */
.secao--alt::before,
.secao--alt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,167,46,0.22), transparent);
  pointer-events: none;
}
.secao--alt::before { top: 0; }
.secao--alt::after  { bottom: 0; }

.eyebrow {
  display: inline-block;
  color: var(--dourado);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 0.75rem;
}

/* ---------- 3. HEADER ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--grafite);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.9rem;
}

.header__marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
  color: var(--marfim);
  font-family: var(--fonte-display);
  font-size: 1.05rem;
}

.header__marca img { height: 44px; width: auto; }

.nav { display: flex; gap: 1.8rem; align-items: center; }
.nav a { color: var(--marfim); font-size: var(--texto-sm); }
/* aria-current="page" = está nesta página; "true" = está numa página filha
   (ex.: /dedetizacao.html destaca o item "Serviços") */
.nav a:hover, .nav a[aria-current] { color: var(--dourado); }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--grafite);
  border-radius: 6px;
  color: var(--marfim);
  font-size: 1.3rem;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}

/* ---------- 4. BOTÕES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.8rem;
  border-radius: var(--raio);
  font-weight: 600;
  font-size: var(--texto-sm);
  transition: transform 0.15s ease, background 0.15s ease;

  /* Rótulo longo quebra linha em vez de vazar para fora do botão.
     Num aparelho de 320px com a preferência de "texto maior" ligada,
     "Orçamento grátis no WhatsApp" não cabe em uma linha — sem isto, o
     texto era cortado no meio da palavra e o botão dizia "no WhatsA".
     `balance` distribui as linhas de forma parelha em vez de deixar uma
     palavra órfã embaixo; onde o navegador não conhece, ignora. */
  text-align: center;
  text-wrap: balance;
  min-width: 0;
}
.btn:active { transform: scale(0.97); }

/* Ícones em SVG, não em emoji: o leitor de tela lê "💬" como "balão de fala"
   no meio da frase do botão. O SVG entra com aria-hidden e some da leitura. */
.btn svg { width: 1.2em; height: 1.2em; fill: currentColor; flex-shrink: 0; }

.btn--dourado { background: var(--dourado); color: var(--preto); }
.btn--dourado:hover { background: var(--dourado-claro); color: var(--preto); }

.btn--contorno {
  border: 1px solid var(--dourado);
  color: var(--dourado);
}
.btn--contorno:hover { background: rgba(224, 167, 46, 0.1); }

/* Texto escuro sobre o verde: branco sobre #25d366 dá só 1,98:1 de contraste
   (a WCAG pede 4,5:1). Com o preto da marca sobe para 10:1 e o botão continua
   sendo lido como "WhatsApp" pela cor de fundo. */
.btn--whatsapp { background: var(--whatsapp); color: var(--preto); }
.btn--whatsapp:hover { background: #43e07f; color: var(--preto); }

/* ---------- 5. HERO COM VÍDEO ---------- */
/* Duas faixas: o conteúdo ocupa a primeira e se centraliza nela; o indicador
   "Role" fica na segunda. Antes o indicador era posicionado de forma absoluta
   no rodapé do hero e, em tela baixa, caía por cima dos selos. Com faixas de
   grade a colisão deixa de ser possível — não depende de acertar o padding. */
.hero {
  position: relative;
  min-height: 88svh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--preto);   /* fundo enquanto o vídeo carrega */
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  /* Movimento lento e contínuo: dá vida à imagem sem competir com o texto */
  animation: cine-zoom 28s ease-in-out infinite alternate;
}

@keyframes cine-zoom {
  from { transform: scale(1);    }
  to   { transform: scale(1.12); }
}

/* Duas camadas de escurecimento: gradiente vertical para a leitura do texto
   e vinheta radial para dar profundidade — o truque de cinema mais barato. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Vinheta + gradiente de leitura na mesma camada, liberando o ::before
   para o grão de filme. */
.hero::after {
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(10,10,10,0.85) 100%),
    linear-gradient(180deg,
      rgba(10,10,10,0.75) 0%,
      rgba(10,10,10,0.55) 35%,
      rgba(10,10,10,0.8) 75%,
      var(--preto) 100%);
}

/* ---------- GRÃO DE FILME ----------
   O detalhe que mais separa "vídeo de fundo" de "cena de cinema". Vídeo
   digital é limpo demais; uma camada finíssima de ruído devolve textura e
   disfarça o banding dos gradientes em telas de 8 bits.

   É ruído gerado pelo próprio navegador (SVG feTurbulence em data URI):
   não baixa arquivo nenhum e o custo é o de pintar uma textura.

   Estático de propósito — grão animado seria mais fiel ao cinema, mas
   é movimento contínuo na tela inteira, justamente o que a WCAG 2.2.2 e
   o prefers-reduced-motion pedem para evitar. */
.hero::before,
.cena::before,
.hero-interno--cena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;              /* acima dos gradientes (-1), abaixo do texto (1) */
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.22'/%3E%3C/svg%3E");
}

/* Padding fluido: em tela alta o hero respira, em tela baixa ele encolhe
   em vez de empurrar o conteúdo para fora. */
.hero__conteudo {
  grid-row: 1;
  position: relative;
  z-index: 1;              /* acima da camada de grão */
  padding-block: clamp(4rem, 10vh, 8rem) clamp(1.8rem, 5vh, 4rem);
}
.hero h1 { font-size: var(--texto-xl); max-width: 18ch; margin-inline: auto; text-wrap: balance; }
.hero p  {
  max-width: 55ch;
  margin: clamp(0.8rem, 1.6vh, 1.2rem) auto clamp(1.4rem, 3vh, 2rem);
  color: var(--cinza-texto);
}
.hero__acoes { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Entrada em cascata do conteúdo do hero */
.hero__conteudo > * { animation: subir 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.hero__conteudo > :nth-child(1) { animation-delay: 0.1s; }
.hero__conteudo > :nth-child(2) { animation-delay: 0.2s; }
.hero__conteudo > :nth-child(3) { animation-delay: 0.3s; }
.hero__conteudo > :nth-child(4) { animation-delay: 0.4s; }
.hero__conteudo > :nth-child(5) { animation-delay: 0.55s; }

@keyframes subir {
  from { opacity: 0; transform: translateY(1.6rem); }
  to   { opacity: 1; transform: none; }
}

/* Indicador de rolagem — segunda faixa da grade, nunca sobreposto */
.hero__rolar {
  grid-row: 2;
  position: relative;
  z-index: 1;
  margin-bottom: 1.6rem;
  color: var(--cinza-texto);
  font-size: var(--texto-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  animation: pulsar 2.4s ease-in-out infinite;
}
.hero__rolar::after {
  content: "";
  width: 1px;
  height: 2.2rem;
  background: linear-gradient(var(--dourado), transparent);
}
@keyframes pulsar {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ---------- 5B. CENA CINEMATOGRÁFICA ----------
   Bloco de tela cheia com o vídeo ao fundo e o texto por cima.
   Substitui o vídeo dentro do card: o vídeo ganha escala e o card
   fica leve. Usado nos "capítulos" da home. */
.cena {
  position: relative;
  min-height: min(94svh, 780px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  /* Fundo de reserva: se o autoplay for bloqueado (iOS em baixo consumo,
     economia de dados), a cena continua sendo um bloco com identidade
     em vez de um retângulo preto vazio. */
  background:
    radial-gradient(ellipse at 20% 30%, rgba(224,167,46,0.16), transparent 55%),
    var(--preto);
}
.cena--direita { background: radial-gradient(ellipse at 80% 30%, rgba(224,167,46,0.16), transparent 55%), var(--preto); }

.cena__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  animation: cine-zoom 34s ease-in-out infinite alternate;
}

.cena::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(10,10,10,0.55) 100%),
    linear-gradient(180deg, var(--preto) 0%, transparent 22%, transparent 45%, rgba(10,10,10,0.92) 88%, var(--preto) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.35) 55%, transparent 100%);
}

/* ---------- Cena com filmagem clara ----------
   Nem toda filmagem serve para um site preto. Céu aberto, parede branca ou
   jardim ensolarado estouram atrás do texto. Este modificador escurece o
   próprio vídeo e reforça o gradiente, em vez de descartar a filmagem.

   ⚠ Use SÓ em mídia de fundo claro — céu, parede branca, sol forte.
     Em imagem de tom médio (pele, concreto, terra) o escurecimento é forte
     demais e apaga o assunto: o mosquito e a barata viraram silhueta preta
     antes de a regra ser retirada dessas duas páginas. Na dúvida, publique
     sem o modificador e confira: o gradiente padrão já cobre a maior parte
     dos casos. */
.cena--claro .cena__video,
.hero-interno--claro .hero-interno__video,
.hero-interno--claro .hero-interno__imagem {
  filter: brightness(0.45) saturate(0.75) contrast(1.05);
}
.cena--claro::after {
  background:
    linear-gradient(180deg, var(--preto) 0%, rgba(10,10,10,0.35) 25%, rgba(10,10,10,0.45) 50%, rgba(10,10,10,0.95) 88%, var(--preto) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.6) 55%, rgba(10,10,10,0.25) 100%);
}
.cena--claro.cena--direita::after {
  background:
    linear-gradient(180deg, var(--preto) 0%, rgba(10,10,10,0.35) 25%, rgba(10,10,10,0.45) 50%, rgba(10,10,10,0.95) 88%, var(--preto) 100%),
    linear-gradient(270deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.6) 55%, rgba(10,10,10,0.25) 100%);
}
.hero-interno--claro::after {
  background:
    linear-gradient(180deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.72) 40%, rgba(10,10,10,0.97) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.6) 60%, rgba(10,10,10,0.2) 100%);
}

/* Cena espelhada: texto à direita, escurecimento invertido */
.cena--direita { justify-items: end; text-align: right; }
.cena--direita::after {
  background:
    radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(10,10,10,0.55) 100%),
    linear-gradient(180deg, var(--preto) 0%, transparent 22%, transparent 45%, rgba(10,10,10,0.92) 88%, var(--preto) 100%),
    linear-gradient(270deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.35) 55%, transparent 100%);
}
.cena--direita .cena__conteudo { margin-left: auto; }
.cena--direita .cena__acoes { justify-content: flex-end; }

/* O bloco de texto da cena carrega as classes `container` e `cena__conteudo`
   ao mesmo tempo. O `margin-inline: auto` do container absorve o espaço livre
   e, em grade, margem automática vence `justify-items` — era por isso que as
   cenas apareciam centralizadas em vez de alternar esquerda e direita.

   A solução mantém a caixa externa do tamanho da coluna do site (assim o
   título da cena alinha com o das outras seções) e empurra os filhos, já
   limitados a 52ch, para um dos lados. */
.cena__conteudo {
  position: relative;
  z-index: 1;              /* acima da camada de grão */
  width: min(var(--largura-max), 100% - var(--gutter));
  margin-inline: auto;
  display: grid;
  justify-items: start;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.cena__conteudo > * { max-width: 52ch; }
.cena--direita .cena__conteudo { justify-items: end; }
.cena__conteudo h2 {
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.05;
  text-wrap: balance;
}
.cena__conteudo p {
  color: var(--marfim);
  margin-top: 1.1rem;
  text-shadow: 0 1px 12px rgba(0,0,0,0.9);   /* legibilidade sobre imagem em movimento */
}
.cena__acoes { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* Numeração das cenas — "capítulo" do filme */
.cena__numero {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--texto-sm);
  color: var(--dourado);
  letter-spacing: 0.3em;
  margin-bottom: 0.9rem;
}

/* Barras de letterbox: fecham a cena como enquadramento de cinema */
.cena__barra {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, var(--grafite), transparent);
  z-index: 1;
}
.cena__barra--topo { top: 0; }
.cena__barra--base { bottom: 0; }

/* ---------- 5C. ENTRADA EM CASCATA ----------
   Os filhos do bloco entram um a um, não o bloco inteiro de uma vez.
   Numa grade de 7 serviços a diferença é grande: em vez de um "salto"
   único, o olho é conduzido pela sequência.

   Só ativa quando o JS marca .js — sem JS, tudo nasce visível. */
.js .revelar > * {
  opacity: 0;
  transform: translateY(1.6rem);
}
.js .revelar.visivel > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .revelar.visivel > :nth-child(1) { transition-delay: 0s;    }
.js .revelar.visivel > :nth-child(2) { transition-delay: 0.07s; }
.js .revelar.visivel > :nth-child(3) { transition-delay: 0.14s; }
.js .revelar.visivel > :nth-child(4) { transition-delay: 0.21s; }
.js .revelar.visivel > :nth-child(5) { transition-delay: 0.28s; }
.js .revelar.visivel > :nth-child(6) { transition-delay: 0.35s; }
.js .revelar.visivel > :nth-child(7) { transition-delay: 0.42s; }
.js .revelar.visivel > :nth-child(n+8) { transition-delay: 0.49s; }

/* Selos de confiança.
   Grade em vez de flex: com flex-wrap, o terceiro selo caía sozinho numa
   linha desalinhada no celular. Em grade eles ou ficam os três lado a lado,
   ou empilham centralizados — nunca num arranjo torto. */
.selos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, auto));
  justify-content: center;
  gap: 1.4rem 2.5rem;
  margin-top: clamp(1.8rem, 4vh, 3rem);
  font-size: var(--texto-sm);
  color: var(--cinza-texto);
  text-wrap: balance;
}
.selos strong { color: var(--dourado); display: block; }

/* ---------- 6. CARDS DE SERVIÇO ---------- */
.grid-servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.card {
  background: var(--carvao);
  border: 1px solid var(--grafite);
  border-radius: var(--raio);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--ambar); transform: translateY(-2px); }

.card video, .card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }

.card__corpo { padding: 1.4rem; }
.card__corpo h3 { color: var(--dourado); margin-bottom: 0.5rem; font-size: var(--texto-lg); }
.card__corpo p  { color: var(--cinza-texto); font-size: var(--texto-sm); }

/* Card clicável inteiro (páginas de serviço) */
.card--link { display: block; color: inherit; }
.card--link:hover { color: inherit; }
.card--link:hover h3 { color: var(--dourado-claro); }
.card__seta { color: var(--dourado); font-size: var(--texto-sm); margin-top: 0.9rem; display: block; }

/* ---------- 7. CTA FINAL ---------- */
.cta-final { text-align: center; }
.cta-final h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 1rem; }

/* ---------- 7B. HERO INTERNO (páginas secundárias) ---------- */
.hero-interno {
  background:
    radial-gradient(ellipse at 50% -20%, rgba(224,167,46,0.14), transparent 60%),
    var(--carvao);
  border-bottom: 1px solid var(--grafite);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.hero-interno h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); max-width: 20ch; }
.hero-interno p { color: var(--cinza-texto); max-width: 60ch; margin-top: 1rem; }
.hero-interno .hero__acoes { justify-content: flex-start; margin-top: 2rem; }

/* Variante com vídeo ao fundo — usada nas páginas de serviço que têm
   filmagem própria. Mesmo enquadramento das cenas da home. */
.hero-interno--cena {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--preto);
  padding-block: clamp(4rem, 11vw, 7.5rem);
  border-bottom: 0;
}
/* Aceita vídeo ou foto. Na foto, o mesmo zoom lento vira efeito Ken Burns —
   é o truque que dá movimento a uma imagem parada sem pesar nada. */
.hero-interno--cena .hero-interno__video,
.hero-interno--cena .hero-interno__imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  animation: cine-zoom 34s ease-in-out infinite alternate;
}
.hero-interno--cena::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.6) 40%, rgba(10,10,10,0.95) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.4) 60%, transparent 100%);
}
.hero-interno--cena h1,
.hero-interno--cena p { text-shadow: 0 1px 12px rgba(0,0,0,0.9); }
.hero-interno--cena > .container { position: relative; z-index: 1; }
.hero-interno--cena p { color: var(--marfim); }

/* Breadcrumb */
.breadcrumb {
  font-size: var(--texto-xs);
  color: var(--cinza-texto);
  margin-bottom: 1.2rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--cinza-texto); }
.breadcrumb a:hover { color: var(--dourado); }
.breadcrumb span[aria-current] { color: var(--dourado); }

/* ---------- 7C. TEXTO LONGO (páginas de serviço) ---------- */
.prosa { max-width: 68ch; }
.prosa h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-top: 2.8rem; margin-bottom: 0.9rem; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { font-size: var(--texto-lg); color: var(--dourado); margin-top: 1.8rem; margin-bottom: 0.5rem; }
.prosa p { color: var(--cinza-texto); margin-bottom: 1rem; }
.prosa ul, .prosa ol { color: var(--cinza-texto); margin: 0 0 1.2rem 1.2rem; }
.prosa li { margin-bottom: 0.5rem; }
.prosa li::marker { color: var(--dourado); }
.prosa strong { color: var(--marfim); }

/* Layout de duas colunas (conteúdo + barra lateral fixa) */
.layout-lateral {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 340px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.lateral {
  position: sticky;
  top: 6rem;
  background: var(--carvao);
  border: 1px solid var(--grafite);
  border-radius: var(--raio);
  padding: 1.6rem;
}
.lateral h3 { font-size: var(--texto-lg); color: var(--dourado); margin-bottom: 0.6rem; }
.lateral p { color: var(--cinza-texto); font-size: var(--texto-sm); margin-bottom: 1.2rem; }
/* flex, não block: block anularia o gap entre o ícone SVG e o texto */
.lateral .btn { display: flex; width: 100%; text-align: center; }
.lateral .btn + .btn { margin-top: 0.7rem; }

/* ---------- 7C-2. DIAGNÓSTICO VISUAL DE PRAGAS ----------
   Cards que listam a praga pelos SINAIS que ela deixa, não pelo nome do
   serviço. É o vocabulário de quem tem o problema, não o de quem vende. */
.grid-pragas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.2rem;
  margin-top: 2.5rem;
}

.praga {
  display: flex;
  flex-direction: column;
  background: var(--carvao);
  border: 1px solid var(--grafite);
  border-radius: var(--raio);
  padding: 1.4rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.praga:hover { border-color: var(--ambar); transform: translateY(-2px); }

.praga__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

/* O nível é indicado por texto, não só por cor — quem não distingue os
   tons continua lendo "Crítico" e "Médio". */
.praga__nivel {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  border: 1px solid;
}
.praga__nivel[data-nivel="crítico"]    { color: #f08b84; border-color: rgba(224,87,78,0.55);  background: rgba(224,87,78,0.12); }
.praga__nivel[data-nivel="estrutural"] { color: #f2c95c; border-color: rgba(224,167,46,0.55); background: rgba(224,167,46,0.12); }
.praga__nivel[data-nivel="sanitário"]  { color: #8ff0b6; border-color: rgba(37,211,102,0.45); background: rgba(37,211,102,0.1); }
.praga__nivel[data-nivel="médio"]      { color: var(--cinza-texto); border-color: var(--grafite); background: rgba(255,255,255,0.04); }

/* Nome científico: sinaliza que existe critério técnico por trás */
.praga__classe {
  font-family: var(--fonte-display);
  font-size: var(--texto-xs);
  font-style: italic;
  color: var(--cinza-fraco);
  letter-spacing: 0.04em;
}

.praga h3 { color: var(--dourado); font-size: var(--texto-lg); margin-bottom: 0.45rem; }
.praga > p { color: var(--cinza-texto); font-size: var(--texto-sm); }

.praga__rotulo {
  color: var(--marfim);
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 1.1rem;
  margin-bottom: 0.5rem;
}

.praga__sinais {
  list-style: none;
  display: grid;
  gap: 0.45rem;
  font-size: var(--texto-sm);
  color: var(--cinza-texto);
  margin-bottom: 1.2rem;
}
.praga__sinais li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  line-height: 1.45;
}
.praga__sinais li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dourado);
  margin-top: 0.55em;
}

.praga__link {
  margin-top: auto;             /* alinha o link no rodapé de todos os cards */
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--texto-sm);
  font-weight: 600;
  min-height: 44px;
}
.praga__link span { transition: transform 0.2s ease; }

/* Serviço que não é praga e por isso não cabe entre os cards acima */
.diagnostico__extra {
  margin-top: 1.8rem;
  padding: 1rem 1.2rem;
  background: var(--carvao);
  border: 1px solid var(--grafite);
  border-left: 3px solid var(--dourado);
  border-radius: var(--raio);
  color: var(--cinza-texto);
  font-size: var(--texto-sm);
  max-width: 70ch;
}
.diagnostico__extra strong { color: var(--marfim); }
.diagnostico__extra a { text-decoration: underline; }
.praga:hover .praga__link span { transform: translateX(4px); }

/* ---------- 7D. PROCESSO (passo a passo) ---------- */
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  counter-reset: passo;
}
.passo {
  position: relative;
  padding-top: 3.2rem;
  border-top: 1px solid var(--grafite);
}
.passo::before {
  counter-increment: passo;
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  top: 1.2rem;
  left: 0;
  font-family: var(--fonte-display);
  font-size: 1.4rem;
  color: var(--dourado);
}
/* Selo de prazo: transforma "a gente atende" em promessa verificável */
.passo__prazo {
  display: inline-block;
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dourado);
  border: 1px solid rgba(224, 167, 46, 0.4);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  margin-bottom: 0.6rem;
}
.passo h3 { font-size: var(--texto-md); margin-bottom: 0.4rem; }
.passo p { color: var(--cinza-texto); font-size: var(--texto-sm); }

/* ---------- 7D-2. CALENDÁRIO SAZONAL DE PRAGAS ----------
   Mapa de calor de 6 pragas por 12 meses.

   Decisão que guia o componente: o nível NÃO é indicado só pela cor.
   Cada célula tem uma barra cuja altura cresce com a intensidade, então
   a leitura funciona em escala de cinza, no modo de alto contraste e
   para quem não distingue tons de dourado (WCAG 1.4.1). */

.agora {
  background: linear-gradient(120deg, rgba(224,167,46,0.14), rgba(224,167,46,0.04));
  border: 1px solid rgba(224, 167, 46, 0.35);
  border-left: 3px solid var(--dourado);
  border-radius: var(--raio);
  padding: 1.2rem 1.4rem;
  margin-top: 2rem;
}
.agora__titulo {
  font-family: var(--fonte-display);
  color: var(--dourado);
  font-size: var(--texto-lg);
  margin-bottom: 0.4rem;
}
.agora__texto { color: var(--marfim); font-size: var(--texto-sm); }
.agora__texto + .agora__texto { margin-top: 0.6rem; }
.agora__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
  list-style: none;
}
.agora__lista a {
  display: inline-block;
  background: var(--dourado);
  color: var(--preto);
  font-size: var(--texto-xs);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  min-height: 32px;
  line-height: 1.6;
}
.agora__lista a:hover { background: var(--dourado-claro); color: var(--preto); }

/* Ajuste pelo clima real, acrescentado pelo JS depois que a página já está
   utilizável. Se a consulta falhar, este bloco simplesmente não aparece. */
.agora__clima {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(224, 167, 46, 0.3);
  color: var(--cinza-texto);
  font-size: var(--texto-sm);
  line-height: 1.6;
}
.agora__clima strong { color: var(--marfim); }
.agora__clima a { text-decoration: underline; }
.agora__selo {
  display: inline-block;
  background: var(--dourado);
  color: var(--preto);
  font-size: var(--texto-xs);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  margin-right: 0.4rem;
  vertical-align: 1px;
}
.agora__clima small {
  display: block;
  margin-top: 0.5rem;
  color: var(--cinza-fraco);
  font-size: var(--texto-xs);
}

/* Área rolável na horizontal. tabindex="0" no HTML para quem navega por
   teclado conseguir rolar a tabela — exigência da WCAG para região rolável. */
.mapa {
  margin-top: 1.8rem;
  overflow-x: auto;
  border: 1px solid var(--grafite);
  border-radius: var(--raio);
  background: var(--carvao);
  scrollbar-width: thin;
}
.mapa:focus-visible { outline: 3px solid var(--dourado); outline-offset: 2px; }

.mapa__tabela {
  border-collapse: collapse;
  width: 100%;
  min-width: 44rem;      /* abaixo disso os meses ficam ilegíveis */
}

.mapa__tabela th,
.mapa__tabela td {
  padding: 0.5rem 0.35rem;
  text-align: center;
  border-bottom: 1px solid var(--grafite);
}

/* Nome da praga fixo na lateral: rolando os meses, não se perde a linha */
.mapa__tabela tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--carvao);
  text-align: left;
  padding: 0.7rem 1rem 0.7rem 1.1rem;
  min-width: 13.5rem;
  border-right: 1px solid var(--grafite);
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--texto-sm);
}
.mapa__tabela tbody th a { color: var(--marfim); }
.mapa__tabela tbody th a:hover { color: var(--dourado); }
.mapa__tabela tbody th small {
  display: block;
  color: var(--cinza-fraco);
  font-weight: 400;
  font-size: var(--texto-xs);
  line-height: 1.4;
  margin-top: 0.15rem;
}

.mapa__tabela thead th {
  background: var(--preto);
  color: var(--cinza-texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-block: 0.7rem;
}
.mapa__tabela thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  padding-left: 1.1rem;
}
.mapa__tabela abbr { text-decoration: none; }

/* A célula é um trilho; a barra cresce de baixo para cima */
.mapa__tabela td { height: 3.1rem; vertical-align: bottom; }
.mapa__barra {
  display: block;
  width: 62%;
  margin: 0 auto;
  border-radius: 3px 3px 0 0;
  background: var(--dourado);
  transition: height 0.25s ease;
}
td[data-nivel="1"] .mapa__barra { height: 22%; opacity: 0.4;  }
td[data-nivel="2"] .mapa__barra { height: 55%; opacity: 0.72; }
td[data-nivel="3"] .mapa__barra { height: 88%; opacity: 1;    }

/* Mês corrente, marcado pelo JS */
.mapa__tabela [data-mes].mes-atual { background: rgba(224, 167, 46, 0.1); }
.mapa__tabela thead th.mes-atual {
  color: var(--dourado);
  background: rgba(224, 167, 46, 0.16);
  box-shadow: inset 0 -2px 0 var(--dourado);
}
.mapa__tabela td.mes-atual .mapa__barra { box-shadow: 0 0 14px rgba(224,167,46,0.6); }

/* Dica de que a tabela rola na horizontal. Só aparece onde ela realmente
   não cabe — sem isso, no celular a pessoa vê meia tabela e acha que é tudo. */
.mapa__rolagem {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: var(--texto-xs);
  color: var(--dourado);
}
.mapa__rolagem::after {
  content: "→";
  animation: deslizar 1.8s ease-in-out infinite;
}
@keyframes deslizar {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(0.35rem); }
}

.mapa__legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin-top: 1.1rem;
  font-size: var(--texto-xs);
  color: var(--cinza-texto);
}
.mapa__chave { display: inline-flex; align-items: center; gap: 0.45rem; }
.mapa__chave i {
  width: 14px;
  border-radius: 2px 2px 0 0;
  background: var(--dourado);
  display: inline-block;
}
.mapa__chave i[data-nivel="1"] { height: 6px;  opacity: 0.4;  }
.mapa__chave i[data-nivel="2"] { height: 12px; opacity: 0.72; }
.mapa__chave i[data-nivel="3"] { height: 18px; opacity: 1;    }
.mapa__nota { flex: 1 1 22rem; color: var(--cinza-fraco); line-height: 1.5; }

/* ---------- 7D-3. PROTOCOLO — OS 4 PONTOS ---------- */
.pontos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
  margin-top: 2.5rem;
  counter-reset: ponto;
}

.ponto {
  position: relative;
  background: var(--preto);
  border: 1px solid var(--grafite);
  border-radius: var(--raio);
  padding: 1.4rem;
  overflow: hidden;
}
/* Faixa dourada que cresce no hover — sugere o ponto sendo verificado */
.ponto::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ambar), var(--dourado-claro));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ponto:hover::after { transform: scaleX(1); }

.ponto__codigo {
  display: inline-block;
  font-family: var(--fonte-display);
  font-size: var(--texto-xs);
  letter-spacing: 0.2em;
  color: var(--preto);
  background: var(--dourado);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  margin-bottom: 0.8rem;
}
.ponto h3 { font-size: var(--texto-md); margin-bottom: 0.4rem; }
.ponto p { color: var(--cinza-texto); font-size: var(--texto-sm); }

.pontos__nota {
  margin-top: 1.6rem;
  color: var(--cinza-texto);
  font-size: var(--texto-sm);
  max-width: 62ch;
}
.pontos__nota strong { color: var(--dourado); }

/* ---------- 7E. FAQ (accordion) ---------- */
.faq { max-width: 75ch; margin-top: 2.5rem; }

.faq details {
  border-bottom: 1px solid var(--grafite);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.2rem 2.5rem 1.2rem 0;
  position: relative;
  font-weight: 600;
  color: var(--marfim);
  transition: color 0.15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--dourado); }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dourado);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq details[open] summary { color: var(--dourado); }
.faq details[open] summary::after { content: "−"; }
.faq details > div {
  padding: 0 2.5rem 1.4rem 0;
  color: var(--cinza-texto);
  font-size: var(--texto-sm);
}
.faq details > div p + p { margin-top: 0.8rem; }

/* Número de ordem nos cards de confiança */
.card__ordem {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--texto-sm);
  letter-spacing: 0.25em;
  color: var(--dourado);
  margin-bottom: 0.6rem;
}

.confianca__nota {
  margin-top: 1.8rem;
  padding: 1.1rem 1.3rem;
  background: var(--preto);
  border: 1px solid var(--grafite);
  border-left: 3px solid var(--dourado);
  border-radius: var(--raio);
  color: var(--cinza-texto);
  font-size: var(--texto-sm);
  max-width: 70ch;
}
.confianca__nota strong { color: var(--marfim); }

/* ---------- 7F. DEPOIMENTOS ---------- */
.grid-depoimentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.depoimento {
  background: var(--carvao);
  border: 1px solid var(--grafite);
  border-left: 3px solid var(--dourado);
  border-radius: var(--raio);
  padding: 1.6rem;
}
.depoimento blockquote { color: var(--marfim); font-size: var(--texto-sm); }
.depoimento footer {
  margin-top: 1rem;
  font-size: var(--texto-xs);
  color: var(--cinza-texto);
  border: 0;
  padding: 0;
}
.depoimento cite { color: var(--dourado); font-style: normal; font-weight: 600; display: block; }
.estrelas { color: var(--dourado); letter-spacing: 0.15em; margin-bottom: 0.8rem; font-size: var(--texto-sm); }

/* ---------- 7F-2. ALERTA (aviso de risco à saúde) ---------- */
.alerta {
  background: rgba(224, 87, 78, 0.08);
  border: 1px solid rgba(224, 87, 78, 0.4);
  border-left: 3px solid #e0574e;
  border-radius: var(--raio);
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.5rem;
}
.alerta h2, .alerta h3 { color: #f08b84; font-size: var(--texto-md); margin: 0 0 0.6rem; }
.alerta p { color: var(--marfim); font-size: var(--texto-sm); margin: 0; }
.alerta strong { color: #f08b84; }

/* ---------- 7G. FORMULÁRIO ---------- */
.form {
  display: grid;
  gap: 1.1rem;
  max-width: 34rem;
  text-align: left;
}
.form--largo { max-width: none; }

.campo { display: grid; gap: 0.4rem; }
.campo label { font-size: var(--texto-sm); font-weight: 600; }

/* Campo que já chegou preenchido porque o visitante veio de uma página de
   serviço (contato.html?servico=aranhas). A borda dourada avisa que a
   escolha veio pronta — mas quem carrega o recado é o texto ao lado, que
   funciona para quem não distingue a cor. Nada pisca nem move a página. */
.campo--preenchido select { border-color: var(--dourado); }
.campo__aviso {
  font-size: var(--texto-xs);
  color: var(--dourado);
}
.campo label .opcional { color: var(--cinza-texto); font-weight: 400; }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  background: var(--carvao);
  border: 1px solid var(--grafite);
  border-radius: var(--raio);
  color: var(--marfim);
  font-family: inherit;
  font-size: var(--texto-sm);
  padding: 0.8rem 0.9rem;
  transition: border-color 0.15s ease;
}
.campo textarea { resize: vertical; min-height: 7rem; }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--cinza-fraco); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--dourado); outline: none; }

.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--dourado) 50%),
                    linear-gradient(135deg, var(--dourado) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.campo select option { background: var(--carvao); color: var(--marfim); }

.campo--erro input,
.campo--erro select,
.campo--erro textarea { border-color: var(--erro-borda); }

/* O erro não é sinalizado só pela cor (WCAG 1.4.1): entra também o ícone "!"
   e a mensagem em texto, para quem não distingue vermelho de cinza. */
.campo__erro { color: var(--erro); font-size: var(--texto-xs); min-height: 1em; }

/* Contador de caracteres: quem escreve muito sabe onde está antes de o
   navegador cortar sem avisar. */
.campo__contador {
  font-size: var(--texto-xs);
  color: var(--cinza-fraco);
  text-align: right;
}
.campo__contador--perto { color: var(--dourado); }
.campo__erro:not(:empty)::before { content: "⚠ "; }

.form__aviso {
  font-size: var(--texto-xs);
  color: var(--cinza-texto);
}
.form__aviso a { text-decoration: underline; }

/* Campo-isca do anti-spam. Fica fora da tela em vez de display:none
   porque robô ignora campo escondido — e leitor de tela ignora este
   graças ao aria-hidden e ao tabindex negativo no HTML. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Consentimento LGPD */
.campo--aceite {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
}
.campo--aceite input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  accent-color: var(--dourado);
  cursor: pointer;
}
.campo--aceite label {
  font-weight: 400;
  font-size: var(--texto-xs);
  color: var(--cinza-texto);
  cursor: pointer;
}
.campo--aceite label a { text-decoration: underline; }
.campo--aceite .campo__erro { grid-column: 1 / -1; }
.campo--aceite.campo--erro input[type="checkbox"] { outline: 2px solid var(--erro-borda); outline-offset: 2px; }

/* Aviso para quem está com o JavaScript desligado */
.sem-js {
  background: var(--carvao);
  border: 1px solid var(--dourado);
  border-radius: var(--raio);
  padding: 1rem;
  font-size: var(--texto-sm);
  margin-bottom: 1.4rem;
}

.form__status {
  border-radius: var(--raio);
  font-size: var(--texto-sm);
  padding: 0.9rem 1rem;
}
.form__status[hidden] { display: none; }
.form__status--ok { background: rgba(37, 211, 102, 0.12); border: 1px solid var(--whatsapp); color: #8ff0b6; }
.form__status--erro { background: rgba(224, 87, 78, 0.12); border: 1px solid var(--erro-borda); color: var(--erro); }

/* Resumo de erros: aparece no topo do formulário e recebe o foco, para quem
   usa leitor de tela ouvir de uma vez tudo o que faltou. */
.form__erros {
  background: rgba(224, 87, 78, 0.12);
  border: 1px solid var(--erro-borda);
  border-radius: var(--raio);
  color: var(--erro);
  font-size: var(--texto-sm);
  padding: 0.9rem 1rem;
}
.form__erros[hidden] { display: none; }
.form__erros ul { margin: 0.5rem 0 0 1.2rem; }
.form__erros a { color: var(--erro); text-decoration: underline; }

/* Grupo de campos lado a lado */
.form__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

button.btn { border: 0; cursor: pointer; font-family: inherit; }
button.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- 7H. ÁREA DE ATENDIMENTO ---------- */
.regioes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}
.regioes li {
  background: var(--carvao);
  border: 1px solid var(--grafite);
  border-radius: 999px;
  color: var(--cinza-texto);
  font-size: var(--texto-xs);
  padding: 0.4rem 0.9rem;
}
/* O mesmo formato serve para lista de serviços clicável (página 404).
   Sem padding próprio no <a>, a área de toque ficaria menor que o
   selo — no celular isso vira erro de clique. */
.regioes li:has(a) { padding: 0; }
.regioes li a {
  display: block;
  padding: 0.55rem 1rem;
  color: var(--cinza-texto);
  border-radius: 999px;
}
.regioes li a:hover,
.regioes li a:focus-visible { color: var(--dourado); background: rgba(224,167,46,0.08); }

/* Bloco de contato rápido */
.contato-blocos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  text-align: left;
}
.contato-bloco {
  background: var(--carvao);
  border: 1px solid var(--grafite);
  border-radius: var(--raio);
  padding: 1.4rem;
}
.contato-bloco h3 { font-size: var(--texto-md); color: var(--dourado); margin-bottom: 0.4rem; }
.contato-bloco p, .contato-bloco a { font-size: var(--texto-sm); color: var(--cinza-texto); }
.contato-bloco a:hover { color: var(--dourado); }

/* ---------- 8. FOOTER ---------- */
.footer {
  border-top: 1px solid var(--grafite);
  padding-block: 2rem;
  font-size: var(--texto-sm);
  color: var(--cinza-texto);
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer__contato { line-height: 1.9; }
.footer__contato a { color: var(--cinza-texto); text-decoration: underline; }
.footer__contato a:hover { color: var(--dourado); }

/* ---------- 9. BOTÃO FLUTUANTE WHATSAPP ---------- */
.zap-flutuante {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--preto);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.15s ease, background 0.15s ease;
}
.zap-flutuante:hover { background: #43e07f; color: var(--preto); transform: scale(1.06); }
.zap-flutuante svg { width: 30px; height: 30px; fill: currentColor; }

/* Botão do menu com ícone SVG */
.nav__toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; display: block; }

/* ============================================================
   10. RESPONSIVO
   Os pontos de quebra abaixo não são números redondos escolhidos no
   chute: cada um veio de um problema visto em ferramentas/telas.html,
   que abre o site em oito tamanhos de aparelho ao mesmo tempo.
   ============================================================ */

/* ---------- Tablet em retrato e abaixo ---------- */
@media (max-width: 980px) {
  .layout-lateral { grid-template-columns: 1fr; }
  .lateral { position: static; }

  /* No tablet a barra lateral vira um bloco no fim do texto. Sem limite
     de largura ela esticaria a linha do parágrafo até ficar cansativa. */
  .lateral { max-width: 40rem; margin-inline: auto; }
}

/* ---------- Celular e tablet em retrato ----------
   O corte é 880px, não 760: em 768px (tablet retrato) o menu horizontal
   até cabia, mas o nome da marca e o botão de orçamento quebravam em
   duas linhas. O hambúrguer resolve melhor essa faixa. */
@media (max-width: 880px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 1.1rem;
    background: var(--carvao);
    padding: 1.2rem var(--gutter) 1.6rem;
    border-bottom: 1px solid var(--grafite);
    max-height: calc(100svh - 5rem);
    overflow-y: auto;                 /* menu longo não corta em tela baixa */
  }
  .nav.aberto { display: flex; }
  .nav__toggle { display: block; }

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

  /* Botão de ação ocupa a largura toda: alvo maior e sem duas colunas
     apertadas lado a lado. */
  .hero__acoes, .cena__acoes { flex-direction: column; align-items: stretch; }
  .hero__acoes .btn, .cena__acoes .btn { width: 100%; }

  /* O conteúdo não pode terminar embaixo dos botões flutuantes */
  .hero__conteudo { padding-bottom: var(--zona-flutuante); }
  .cena__conteudo { padding-bottom: calc(var(--zona-flutuante) + 1rem); }
  .footer { padding-bottom: var(--zona-flutuante); }

  /* No celular não há espaço para alternar lados: tudo à esquerda */
  .cena, .cena--direita { text-align: left; }
  .cena__conteudo,
  .cena--direita .cena__conteudo { justify-items: stretch; }
  .cena__conteudo > * { max-width: none; }
  .cena--direita .cena__acoes { justify-content: stretch; }

  .zap-flutuante { width: 52px; height: 52px; right: 1rem; bottom: 1rem; }
  .zap-flutuante svg { width: 26px; height: 26px; }
  .a11y { left: 1rem; bottom: 1rem; }
  .a11y__abrir { width: 52px; height: 52px; }

  .hero-interno .hero__acoes { justify-content: stretch; }
  .prosa h2 { margin-top: 2.2rem; }

  /* Calendário: a coluna fixa com o nome da praga encolhe, senão sobra
     pouquíssimo espaço para os meses num celular de 360px. */
  .mapa__tabela { min-width: 38rem; }
  .mapa__tabela tbody th { min-width: 8.5rem; padding: 0.6rem 0.7rem; }
  .mapa__tabela tbody th small { display: none; }   /* o motivo está na página do serviço */
  .mapa__tabela td { height: 2.6rem; }
  .mapa__rolagem { display: flex; }
  .agora { padding: 1rem 1.1rem; }
}

/* ---------- Celular pequeno ---------- */
@media (max-width: 400px) {
  /* Abaixo disso o nome por extenso ao lado do logo rouba o espaço do
     botão de menu. O logo sozinho continua identificando a marca. */
  .header__marca span { display: none; }
  .breadcrumb { font-size: 0.72rem; }
}

/* ---------- Tela baixa (celular deitado, notebook pequeno) ----------
   Aqui o problema não é largura, é altura. Um hero de 88svh numa tela de
   360px de altura não cabe o conteúdo, e tudo transborda. */
@media (max-height: 640px) {
  .hero { min-height: auto; }
  .hero__conteudo { padding-block: 4.5rem 2.5rem; }
  .hero__rolar { display: none; }        /* não sobra espaço, e nem faz falta */
  .cena { min-height: auto; }
  .cena__conteudo { padding-block: 3.5rem; }
  .header--rolado .header__inner { padding-block: 0.4rem; }
}

/* ---------- Tela muito alta (tablet em retrato) ---------- */
@media (min-width: 881px) and (max-width: 1024px) {
  /* Em tablet retrato, três colunas deixam o card estreito demais para o
     texto. Duas colunas dão linha confortável. */
  .grid-servicos, .grid-depoimentos, .contato-blocos {
    grid-template-columns: repeat(2, 1fr);
  }
  .passos { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet em retrato também prefere duas colunas a três apertadas */
@media (min-width: 620px) and (max-width: 880px) {
  .grid-servicos, .grid-depoimentos, .contato-blocos, .passos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   10B. EFEITOS DE ROLAGEM

   Regra que vale para tudo aqui: só animamos `transform` e `opacity`.
   São as duas únicas propriedades que o navegador resolve na GPU, sem
   recalcular layout — é o que permite parallax de vídeo em celular
   sem travar a rolagem.

   Tudo abaixo é desligado pelo botão "pausar vídeos e animações" do
   painel de acessibilidade e pelo prefers-reduced-motion do sistema.
   ============================================================ */

/* ---------- 10B.1 Barra de progresso de leitura ----------
   Nas páginas de serviço, que são longas, mostra o quanto falta.
   O valor vem do JS, numa variável CSS — assim a rolagem só toca
   numa propriedade composta, nunca no layout. */
.progresso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 100;
  pointer-events: none;
  transform: scaleX(var(--progresso, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--ambar), var(--dourado) 45%, var(--dourado-claro));
  box-shadow: 0 0 12px rgba(224, 167, 46, 0.5);
  will-change: transform;
}

/* ---------- 10B.2 Cabeçalho que reage à rolagem ----------
   Encolhe e ganha sombra depois dos primeiros pixels: devolve
   espaço de tela para o conteúdo e marca que a página saiu do topo. */
.header {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.header__inner { transition: padding 0.3s ease; }
.header__marca img { transition: height 0.3s ease; }

.header--rolado {
  background: rgba(10, 10, 10, 0.97);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}
.header--rolado .header__inner { padding-block: 0.5rem; }
.header--rolado .header__marca img { height: 34px; }

/* ---------- 10B.3 Parallax das cenas ----------
   Onde o navegador suporta linha do tempo de rolagem (Chrome e Edge
   recentes), o vídeo da cena se desloca mais devagar que a página.
   É o efeito que dá profundidade — e custa zero JavaScript.

   Onde não há suporte, cai no zoom lento de sempre. Ninguém perde nada. */
@supports (animation-timeline: view()) {
  .cena__video,
  .hero-interno--cena .hero-interno__video,
  .hero-interno--cena .hero-interno__imagem {
    animation: cena-parallax linear;
    animation-timeline: view();
    animation-range: cover;
  }

  /* A escala fixa de 1.18 é o que dá margem para o deslocamento sem
     abrir faixa vazia na borda do vídeo. */
  @keyframes cena-parallax {
    from { transform: translateY(-9%) scale(1.18); }
    to   { transform: translateY(9%)  scale(1.18); }
  }

  /* O conteúdo do hero se afasta e desvanece conforme a página sai dele */
  .hero__conteudo {
    animation: hero-saindo linear both;
    animation-timeline: view();
    animation-range: exit -10% exit 90%;
  }
  @keyframes hero-saindo {
    to { opacity: 0; transform: translateY(-3rem) scale(0.97); }
  }

  /* A linha dourada da cena se abre da esquerda para a direita */
  .cena__barra {
    animation: risco-abre linear both;
    animation-timeline: view();
    animation-range: entry 20% entry 90%;
    transform-origin: 0 50%;
  }
  @keyframes risco-abre {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
  }

  /* O indicador "Role" some assim que a pessoa entende o recado */
  .hero__rolar {
    animation: rolar-some linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 25%;
  }
  @keyframes rolar-some { to { opacity: 0; } }
}

/* ---------- 10B.4 FAQ: conteúdo aparece com suavidade ---------- */
.faq details[open] > div {
  animation: faq-abre 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes faq-abre {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   11. ACESSIBILIDADE
   ============================================================ */

/* ---------- 11.1 Foco visível ----------
   Anel duplo: contorno dourado + halo escuro. Assim o foco continua
   visível tanto sobre fundo preto quanto sobre o botão dourado. */
:focus-visible {
  outline: 3px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px rgba(10, 10, 10, 0.9);
}
.btn--dourado:focus-visible { outline-color: var(--marfim); }

/* ---------- 11.2 Conteúdo só para leitor de tela ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 11.3 Pular para o conteúdo ----------
   Primeiro elemento tabulável da página: quem navega por teclado pula
   o menu inteiro em vez de percorrer 5 links em toda página. */
.pular-link {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -120%;
  z-index: 200;
  background: var(--dourado);
  color: var(--preto);
  font-weight: 600;
  padding: 0.9rem 1.6rem;
  border-radius: 0 0 var(--raio) var(--raio);
  transition: translate 0.2s ease;
}
.pular-link:focus {
  translate: -50% 0;
  color: var(--preto);
}

/* ---------- 11.4 Alvos de toque ----------
   WCAG 2.5.8 pede no mínimo 24×24px; 44×44 é o recomendado para
   quem tem tremor, artrite ou usa o celular em movimento. */
.nav a:not(.btn), .footer nav a, .breadcrumb a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}
.nav__toggle { min-width: 44px; min-height: 44px; }
/* Sem `white-space: nowrap` aqui, de propósito. Ele mantinha todo botão em
   uma linha só — bonito na maioria das telas, e destrutivo na pior delas:
   num aparelho de 320px com a preferência "texto maior" ligada, o rótulo
   "Orçamento grátis no WhatsApp" não cabe, e a linha única virava
   "Orçamento grátis no WhatsA", cortada no meio da palavra. Rótulo em duas
   linhas é feio; rótulo cortado é ilegível. A quebra é tratada no .btn, com
   text-wrap: balance. */
.btn { min-height: 44px; }

/* ---------- 11.5 Painel de acessibilidade ---------- */
.a11y {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 70;
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

.a11y__abrir {
  width: 56px;
  height: 56px;
  border: 1px solid var(--grafite);
  border-radius: 50%;
  background: var(--carvao);
  color: var(--dourado);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  transition: background 0.15s ease, transform 0.15s ease;
}
.a11y__abrir:hover { background: var(--grafite); }
.a11y__abrir svg { width: 26px; height: 26px; fill: currentColor; }

.a11y__painel {
  order: -1;                       /* abre para cima, não cobre o botão */
  width: min(19rem, calc(100vw - 2.4rem));
  background: var(--carvao);
  border: 1px solid var(--grafite);
  border-radius: var(--raio);
  padding: 1.1rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.a11y__painel[hidden] { display: none; }
.a11y__painel h2 {
  font-size: var(--texto-sm);
  color: var(--dourado);
  margin-bottom: 0.9rem;
  font-family: var(--fonte-texto);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.a11y__opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  min-height: 44px;
  background: none;
  border: 0;
  border-top: 1px solid var(--grafite);
  color: var(--marfim);
  font-family: inherit;
  font-size: var(--texto-sm);
  text-align: left;
  padding: 0.6rem 0;
  cursor: pointer;
}
.a11y__opcao:hover { color: var(--dourado); }

/* Interruptor: o estado também aparece em texto ("Ligado"/"Desligado"),
   não só na posição da chave — cor e posição sozinhas não bastam. */
.a11y__estado {
  flex-shrink: 0;
  font-size: var(--texto-xs);
  color: var(--cinza-texto);
  border: 1px solid var(--grafite);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
}
.a11y__opcao[aria-pressed="true"] { color: var(--dourado); }
.a11y__opcao[aria-pressed="true"] .a11y__estado {
  background: var(--dourado);
  border-color: var(--dourado);
  color: var(--preto);
  font-weight: 600;
}

.a11y__nota {
  font-size: var(--texto-xs);
  color: var(--cinza-texto);
  border-top: 1px solid var(--grafite);
  padding-top: 0.8rem;
  margin-top: 0.6rem;
}

/* ---------- 11.6 Preferência: sem movimento ----------
   Ativada pelo painel OU pelo prefers-reduced-motion do sistema.
   Congela vídeo, zoom, entradas e rolagem suave. */
/* `transition: none` em vez de duração curta: mudar a duração NÃO cancela
   uma transição já em curso. Quem liga o botão no meio de uma animação
   veria ela terminar mesmo assim. Removendo a propriedade, ela para na hora. */
html.sem-movimento *,
html.sem-movimento *::before,
html.sem-movimento *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.sem-movimento .revelar,
html.sem-movimento .revelar > * { opacity: 1 !important; transform: none !important; }
html.sem-movimento .hero__rolar { animation: none; opacity: 0.8; }

/* Animações de linha do tempo de rolagem ignoram animation-duration —
   a regra geral acima não as alcança. Precisam ser desligadas na unha. */
html.sem-movimento .cena__video,
html.sem-movimento .hero__video,
html.sem-movimento .hero-interno__video,
html.sem-movimento .hero-interno__imagem,
html.sem-movimento .hero__conteudo,
html.sem-movimento .cena__barra {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}
/* A barra de progresso continua: ela não se move sozinha, acompanha a
   rolagem da própria pessoa — é um indicador, como a barra de rolagem. */

/* ---------- 11.7 Preferência: alto contraste ----------
   Zera as imagens de fundo e sobe todos os textos para branco puro. */
html.alto-contraste {
  --preto: #000;
  --carvao: #000;
  --grafite: #fff;
  --marfim: #fff;
  --cinza-texto: #fff;
  --cinza-fraco: #d8d8d8;
  --dourado: #ffd24a;
  --dourado-claro: #ffe89a;
}
html.alto-contraste .hero__video,
html.alto-contraste .cena__video,
html.alto-contraste .hero-interno__video,
html.alto-contraste .hero-interno__imagem { opacity: 0.2; }
html.alto-contraste .hero::before,
html.alto-contraste .cena::before,
html.alto-contraste .hero-interno--cena::before { display: none; }
/* Zera os brilhos decorativos: no alto contraste o fundo é preto liso */
html.alto-contraste .secao--alt::before,
html.alto-contraste .secao--alt::after { display: none; }
html.alto-contraste .hero-interno,
html.alto-contraste .cena,
html.alto-contraste .cena--direita { background: #000; }
html.alto-contraste .card,
html.alto-contraste .lateral,
html.alto-contraste .depoimento,
html.alto-contraste .contato-bloco,
html.alto-contraste .a11y__painel { border-width: 2px; }
html.alto-contraste .cena__conteudo p,
html.alto-contraste .cena__conteudo h2 { text-shadow: 0 0 6px #000, 0 0 14px #000; }

/* ---------- 11.8 Preferência: texto ampliado ----------
   Aumenta a base em 25%; como tudo usa rem/clamp, o layout acompanha. */
html.texto-grande { font-size: 125%; }

/* ---------- 11.9 Modo de alto contraste do sistema (Windows) ---------- */
@media (forced-colors: active) {
  .btn, .a11y__abrir, .zap-flutuante, .card { border: 1px solid ButtonBorder; }
  .hero__video, .cena__video { opacity: 0.15; }
  .a11y__opcao[aria-pressed="true"] .a11y__estado { forced-color-adjust: none; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* ---------- 11.10 Movimento reduzido pelo sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revelar, .js .revelar > * { opacity: 1; transform: none; }

  /* Mesma ressalva do bloco anterior: parallax por linha do tempo de
     rolagem não responde a animation-duration. Desliga explicitamente. */
  .hero__video, .cena__video,
  .hero-interno__video, .hero-interno__imagem,
  .hero__conteudo, .hero__conteudo > *,
  .hero__rolar, .cena__barra {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}

/* ---------- 11.11 Impressão ---------- */
@media print {
  .header, .footer nav, .zap-flutuante, .a11y, .pular-link,
  .hero__video, .cena__video, .hero__rolar { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .cena, .hero-interno { min-height: auto; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  /* No papel, toda resposta da FAQ sai aberta */
  .faq details > div { display: block !important; }
  .faq summary::after { content: none; }
}