/* ============================================================================
   New Clima — design system
   Chave clara (decisão do cliente, CLAUDE.md §3 "decisão em aberto" → resolvida).

   Todo número de contraste neste arquivo foi CALCULADO pela fórmula WCAG 2.1,
   não estimado. Onde há "REPROVA" comentado, é uma combinação proibida: existe
   para impedir que alguém a use adiante achando que passa.
   ========================================================================= */

:root {
  /* --- Marca -------------------------------------------------------------
     Ciano extraído por pixel da logo. NÃO passa AA sobre fundo claro
     (1,90:1 como texto sobre branco, 1,90:1 como fundo sob texto branco).
     Uso permitido: SOMENTE sobre --marca / --marca-fundo, e como preenchimento
     decorativo. Nunca como texto ou botão sobre fundo claro. */
  --marca-cyan:   #00CCFF;   /* 8,70:1 sobre --marca · 10,23:1 sobre --marca-fundo */

  --marca:        #0B2228;   /* institucional — 16,49:1 vs branco */
  --marca-fundo:  #050F12;   /* rodapé e blocos mais escuros — 19,38:1 vs branco */
  --marca-70:     #426B76;   /* meio-tom — 5,84:1 vs branco · 4,98:1 vs --marca-12 */
  --marca-12:     #E3EFF2;   /* wash — fundo de ícone, hover sutil */
  --marca-06:     #F1F7F8;   /* wash claro — alternância de seção */

  /* --- Ação (conversão) --------------------------------------------------
     EXCLUSIVA de CTA. Passa AA nas duas direções sobre branco: 4,95:1.
     ⚠ Como TEXTO, o teto é --marca-06. Sobre --marca-12 dá 4,22:1 → REPROVA.
       Nesse fundo, use --acao-escura (5,91:1). */
  --acao:         #007A99;
  --acao-escura:  #00627A;   /* hover do CTA (6,94:1 sob texto branco) e texto sobre --marca-12 */

  /* --- WhatsApp ----------------------------------------------------------
     ⚠ Verde oficial. Texto branco sobre ele dá 1,98:1 → REPROVA em qualquer
       tamanho. Glifo escuro sobre verde dá 8,31:1 → OK.
     ⚠ Ícone verde DENTRO do botão --acao dá 2,49:1 → REPROVA o mínimo de
       3,0:1 de elemento gráfico. Por isso o ícone do CTA é branco (4,95:1)
       e o verde fica reservado ao botão flutuante, com glifo --marca. */
  --zap:          #25D366;
  --zap-glifo:    #0B2228;   /* 8,31:1 sobre --zap */

  /* --- Neutros tingidos no matiz 192° ------------------------------------ */
  --tinta:        #152326;   /* texto principal — 16,15:1 vs branco */
  --tinta-suave:  #3D4D51;   /* corpo — 8,83:1 vs branco · 7,52:1 vs --marca-12 */
  --apagado:      #57676B;   /* legendas e rótulos — 5,90:1 vs branco · 5,03:1 vs --marca-12 */

  /* --- Linhas ------------------------------------------------------------
     --linha é DECORATIVA (1,33:1 vs branco). Separador visual, nunca a única
     pista de um controle.
     --linha-forte é FUNCIONAL: borda de campo, contorno de botão, qualquer
     traço que identifique um componente. 3,60:1 vs branco, 3,07:1 vs
     --marca-12 — passa 1.4.11 no pior dos quatro fundos claros. */
  --linha:        #D9E1E2;
  --linha-suave:  #E8ECED;
  --linha-forte:  #788A90;

  /* --- Superfícies -------------------------------------------------------- */
  --papel:        #F3F8F9;
  --branco:       #FFFFFF;

  /* Fundo do hero. Existe para o hero não se confundir com o cabeçalho, que é
     branco a 94% — antes os dois eram o mesmo tom e a divisão sumia (1,00:1).
     Agora a separação é 1,14:1, um degrau perceptível sem virar faixa cinza.

     ⚠ Sobre ele, --acao como TEXTO reprova: 4,34:1. Por isso o botão
     secundário do hero tem fundo branco próprio (ver .btn--linha).
     Texto seguro aqui: --tinta 14,16 · --marca 14,45 · --apagado 5,17 ·
     --acao-escura 6,08.

     Matiz 195° em vez dos 206° do #EDF1F4 sugerido: o §3 pede neutros tingidos
     no matiz da marca, e a diferença de luminância entre os dois é de 0,4%. */
  --hero-fundo:   #EBF1F3;

  /* --- Tipografia: fontes do sistema, zero requisição externa ------------- */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, "Noto Sans", sans-serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo,
           Consolas, "Liberation Mono", monospace;

  /* Escala fluida. Os mínimos são os valores em 360px — a largura de teste
     obrigatória do §7.3. */
  --t-rotulo: 0.8125rem;                    /* 13px — mono, versalete */
  --t-mini:   0.9375rem;                    /* 15px */
  --t-corpo:  1.0625rem;                    /* 17px */
  --t-guia:   1.1875rem;                    /* 19px — linha de apoio do hero */
  --t-h4:     clamp(1.25rem, 3.6vw, 1.4375rem);
  --t-h3:     clamp(1.375rem, 4.4vw, 1.625rem);
  --t-h2:     clamp(1.625rem, 5.6vw, 2.25rem);
  /* Mínimo em 30px, não 34px: medido em 360×640, a manchete a 34px ocupava
     cinco linhas e empurrava o CTA para fora da dobra (§1.5). */
  --t-h1:     clamp(1.875rem, 8.2vw, 3.5rem);
  --t-numero: clamp(2.25rem, 9vw, 3.25rem);

  /* --- Espaçamento: escala de 4px ---------------------------------------- */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 20px;  --e6: 24px;  --e8: 32px;  --e10: 40px;
  --e12: 48px; --e16: 64px; --e20: 80px; --e24: 96px;

  --secao-y: clamp(56px, 9vw, 96px);        /* respiro vertical entre seções */

  /* --- Forma -------------------------------------------------------------- */
  --raio-1: 6px;
  --raio-2: 12px;
  --raio-3: 18px;
  --raio-max: 999px;

  --sombra-1: 0 1px 2px rgba(11, 34, 40, .06), 0 2px 8px rgba(11, 34, 40, .05);
  --sombra-2: 0 2px 6px rgba(11, 34, 40, .08), 0 12px 28px rgba(11, 34, 40, .09);
  --sombra-3: 0 4px 12px rgba(11, 34, 40, .12), 0 20px 48px rgba(11, 34, 40, .14);

  /* --- Layout ------------------------------------------------------------- */
  --largura: 1160px;
  --gutter: clamp(16px, 4.5vw, 32px);

  /* --- Movimento ---------------------------------------------------------- */
  --transicao: 180ms cubic-bezier(.2, .6, .3, 1);
  --revelacao: 620ms cubic-bezier(.16, .84, .34, 1);

  /* Altura do cabeçalho fixo. Vira offset de âncora — sem isso, todo
     scroll para um #id enfia o título embaixo da barra. */
  --cabecalho-h: 64px;
}

/* ============================================================================
   Reset — só o que é necessário
   ========================================================================= */

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

html {
  /* scroll-padding: a âncora precisa parar ABAIXO do cabeçalho fixo. */
  scroll-padding-top: calc(var(--cabecalho-h) + var(--e4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.62;
  /* Trava de segurança contra rolagem horizontal (item do §7.1). */
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

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

button { font: inherit; color: inherit; }

/* ============================================================================
   Tipografia
   ========================================================================= */

h1, h2, h3, h4 {
  color: var(--marca);
  line-height: 1.14;
  letter-spacing: -0.021em;
  text-wrap: balance;               /* onde houver suporte; degrada em silêncio */
  font-weight: 800;
}

h1 { font-size: var(--t-h1); letter-spacing: -0.032em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.026em; }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); line-height: 1.28; }

p { text-wrap: pretty; }

/* Rótulo monoespaçado — o contraste com a grotesca é o que dá caráter sem
   custar uma requisição de webfont (§3). */
.rotulo {
  font-family: var(--mono);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apagado);            /* 5,90:1 vs branco · 5,03:1 vs --marca-12 */
}
.rotulo--acao { color: var(--acao-escura); }   /* 6,94:1 — seguro em todo wash claro */

/* Sobre fundo escuro o rótulo troca para o ciano da marca, que ali brilha. */
.escuro .rotulo { color: var(--marca-cyan); }  /* 8,70:1 sobre --marca */

/* ============================================================================
   Layout
   ========================================================================= */

.wrap {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--secao-y); }
.secao--papel { background: var(--papel); }
.secao--wash  { background: var(--marca-06); }

.escuro {
  background: var(--marca);
  color: #FFFFFF;                    /* 16,49:1 */
}
.escuro h1, .escuro h2, .escuro h3, .escuro h4 { color: #FFFFFF; }
.escuro p { color: #DCE8EB; }        /* 13,3:1 sobre --marca — corpo levemente recuado */

.pilha { display: flex; flex-direction: column; }
/* Espaço vertical SEMPRE por gap, nunca por margem solta (§3). */
.pilha--2  { gap: var(--e2); }
.pilha--3  { gap: var(--e3); }
.pilha--4  { gap: var(--e4); }
.pilha--6  { gap: var(--e6); }
.pilha--8  { gap: var(--e8); }
.pilha--12 { gap: var(--e12); }

.grade { display: grid; gap: var(--e4); }

/* ============================================================================
   Botões
   Altura mínima 48px em todos — regra §1.6, inclusive nos secundários.
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 52px;
  padding: var(--e3) var(--e6);
  border: 2px solid transparent;
  border-radius: var(--raio-max);
  font-size: var(--t-corpo);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao),
              color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}
.btn:active { transform: translateY(1px); }

/* CTA principal. Fundo --acao + texto branco = 4,95:1.
   O ícone é BRANCO, não verde: verde sobre --acao mede 2,49:1 e reprova o
   mínimo de 3,0:1 de elemento gráfico (WCAG 1.4.11). */
.btn--acao {
  background: var(--acao);
  color: #FFFFFF;
  box-shadow: var(--sombra-2);
}
.btn--acao:hover { background: var(--acao-escura); color: #FFFFFF; }
.btn--acao svg { fill: currentColor; }

/* CTA secundário, com fundo BRANCO próprio.
   Motivo medido: no hero ele apoia em --hero-fundo, onde --acao como texto dá
   4,34:1 e reprova. Com fundo branco o texto volta a 4,95:1, independente da
   superfície embaixo — e o botão fica legível em qualquer seção clara.
   O contorno em --acao identifica o controle sozinho (1.4.11). */
.btn--linha {
  background: var(--branco);
  color: var(--acao);
  border-color: var(--acao);
}
.btn--linha:hover { background: var(--marca-12); color: var(--acao-escura); border-color: var(--acao-escura); }

/* Sobre fundo escuro os papéis se invertem: o branco vira o CTA e o ciano,
   que ali tem 8,70:1, vira o contorno. */
.escuro .btn--acao  { background: #FFFFFF; color: var(--marca); box-shadow: none; }
.escuro .btn--acao:hover { background: var(--marca-cyan); color: var(--marca); }
/* Sobre fundo escuro o fundo branco do botão precisa ser DESFEITO — senão o
   botão da chamada final fica branco com texto ciano, 1,90:1. Foi exatamente
   essa a regressão que apareceu na primeira vez que dei fundo a .btn--linha. */
.escuro .btn--linha { background: transparent; color: var(--marca-cyan); border-color: var(--marca-cyan); }
.escuro .btn--linha:hover { background: rgba(0, 204, 255, .14); color: #FFFFFF; border-color: #FFFFFF; }

.btn--largo { width: 100%; }

/* ============================================================================
   Foco visível
   Anel em --acao: 4,95:1 sobre branco, bem acima do mínimo de 3,0:1.
   ========================================================================= */

:focus-visible {
  outline: 3px solid var(--acao);
  outline-offset: 3px;
  border-radius: var(--raio-1);
}
.escuro :focus-visible { outline-color: var(--marca-cyan); }  /* 8,70:1 ali */

/* Pular para o conteúdo — visível só quando recebe foco por teclado. */
.pular {
  position: absolute;
  left: var(--e4);
  top: var(--e4);
  z-index: 999;
  transform: translateY(-160%);
  background: var(--marca);
  color: #FFFFFF;
  padding: var(--e3) var(--e5);
  border-radius: var(--raio-1);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--transicao);
}
.pular:focus-visible { transform: none; color: #FFFFFF; }

/* ============================================================================
   Revelação no scroll — o portão do §6.1

   A classe .js-revelar é adicionada por um script inline no <head>. Sem
   JavaScript ela nunca existe, o seletor nunca casa, e o conteúdo nasce
   visível. É essa a diferença entre "anima" e "some para sempre".
   ========================================================================= */

.js-revelar [data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--revelacao), transform var(--revelacao);
}
.js-revelar [data-revelar].visivel {
  opacity: 1;
  transform: none;
}
/* Revelação sem animar: usada pela varredura do §6.2 para o bloco que
   "passou batido" (salto ao rodapé, âncora). Anima seria pior que nada. */
.js-revelar [data-revelar].sem-animar {
  transition: none;
}

/* ── Entrada do hero ────────────────────────────────────────────────────────
   O hero já está na tela quando a página abre, então o IntersectionObserver
   dispara de imediato e isto vira uma animação de ENTRADA, não de scroll.

   ⚠ Divergência declarada do §7.3: o primeiro cenário obrigatório é "carrega
   e fica parado — nada pode animar ainda". Aqui algo anima no carregamento,
   a pedido do cliente. As proteções continuam valendo:
     · o portão do §6.1 — sem JS a classe .js-revelar não existe e o hero
       nasce visível, sem opacity 0;
     · `prefers-reduced-motion` anula tudo;
     · o <img> do hero fica FORA da animação, porque é o LCP.

   O escalonamento é curto de propósito: o último elemento assenta em 380ms.
   Atrasar o CTA além disso seria trocar conversão por enfeite. */
.js-revelar .hero [data-revelar] {
  transition-duration: 460ms;
  transform: translateY(12px);       /* deslocamento menor que os 18px do scroll */
}
.js-revelar .hero [data-revelar].visivel { transform: none; }

/* O atraso vai no estado .visivel, não no inicial: a transição usa o valor do
   estado para o qual ela caminha. Posto na regra base, o escalonamento
   simplesmente não aconteceria. */
.js-revelar .hero h1.visivel       { transition-delay: 0ms; }
.js-revelar .hero__guia.visivel    { transition-delay: 90ms; }
.js-revelar .hero__botoes.visivel  { transition-delay: 180ms; }
.js-revelar .hero__nota.visivel    { transition-delay: 260ms; }

/* ============================================================================
   Movimento reduzido
   Anula TUDO e revela TUDO. Não basta encurtar a transição: o conteúdo
   precisa estar visível mesmo que nenhum observador dispare (§7.3).
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .js-revelar [data-revelar] {
    opacity: 1 !important;
    transform: none !important;
  }
  /* A barra de progresso também: cheia de imediato, sem crescer. */
  .js-revelar [data-revelar] .passos__barra::after {
    width: var(--preenchido) !important;
  }
}

/* ============================================================================
   Utilitários
   ========================================================================= */

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   FLOCOS DE NEVE — ornamento

   Pedido da cliente. São DECORAÇÃO, não elemento de design, e por isso
   obedecem a um contrato estrito:

   · `aria-hidden` no HTML — leitor de tela ignora, porque não dizem nada;
   · `pointer-events: none` — nunca roubam um clique de botão;
   · `z-index: 0` contra `z-index: 1` do conteúdo — sempre ATRÁS do texto;
   · opacidade baixa e posição em área vazia — não alteram contraste de
     leitura nenhum;
   · a seção que os hospeda tem `overflow: hidden`, senão um floco posicionado
     perto da borda cria rolagem horizontal (§7.1);
   · sem animação. "Detalhe" não pisca.
   ========================================================================= */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.floco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--marca-cyan);
  /* Opacidade base baixa, não 1. Cada floco sobrescreve com o seu valor; sem
     esta linha, um floco que estivesse com `display: none` herdaria opacidade
     total e apareceria cheio se alguém trocasse o display depois. */
  opacity: .12;
}

/* O conteúdo de qualquer seção com floco precisa subir uma camada: elemento
   posicionado pinta por cima de conteúdo não posicionado, independente da
   ordem no HTML. */
.hero > .wrap,
.numeros > .wrap,
.empresas > .wrap,
.chamada > .wrap { position: relative; z-index: 1; }

.hero, .numeros, .empresas, .chamada { position: relative; overflow: hidden; }

/* ── Hero: só do tablet para cima, onde existe espaço vazio de verdade.
      No celular a coluna é única e não sobra área livre. ── */
.floco--hero-a, .floco--hero-b { display: none; }

@media (min-width: 768px) {
  .floco--hero-a { display: block; width: 132px; height: 132px; top: 6%;  right: -22px; opacity: .16; }
  .floco--hero-b { display: block; width: 74px;  height: 74px;  bottom: 12%; left: 2%;  opacity: .13; }
}

/* ── Faixas escuras: o ciano da marca aparece bem sobre --marca ── */
.floco--num-a { width: 96px;  height: 96px;  top: -18px;   left: 4%;   opacity: .12; }
.floco--num-b { width: 130px; height: 130px; bottom: -34px; right: 2%;  opacity: .10; }

.floco--emp-a { width: 150px; height: 150px; top: -28px;   right: 5%;  opacity: .10; }
.floco--emp-b { width: 84px;  height: 84px;  bottom: 8%;   left: -14px; opacity: .12; }

.floco--cta-a { width: 116px; height: 116px; top: 10%;     left: 4%;   opacity: .12; }
.floco--cta-b { width: 92px;  height: 92px;  bottom: 8%;   right: 5%;  opacity: .12; }

/* ============================================================================
   PÁGINAS SECUNDÁRIAS — 404 e Política de Privacidade

   Estes estilos moram aqui, e não num <style> dentro de cada página, para a
   CSP poder manter `style-src 'self'`. Um bloco inline exigiria
   'unsafe-inline', que enfraqueceria a política do site inteiro por causa de
   duas páginas.
   ========================================================================= */

/* ── 404 ── */
.erro {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--e16);
  background: var(--marca-fundo);
}
.erro .wrap { max-width: 46ch; }
.erro__codigo {
  font-family: var(--mono);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--marca-cyan);         /* 10,23:1 sobre --marca-fundo */
}
.erro img { margin-inline: auto; }
.erro__botoes { display: flex; flex-direction: column; gap: var(--e3); align-items: stretch; }

/* ── Documento (privacidade) ── */
.doc { padding-block: var(--e12) var(--e16); }
.doc .wrap { max-width: 68ch; }
.doc h2 { font-size: var(--t-h3); margin-top: var(--e10); }
.doc h2:first-of-type { margin-top: var(--e8); }
.doc p, .doc li { color: var(--tinta-suave); }
.doc a { font-weight: 600; }
.doc ul { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e3); }
/* §6.8: marcador no fluxo, como inline-block — não absoluto na borda. */
.doc ul li { display: flex; gap: var(--e2); }
.doc ul li::before {
  content: '—';
  display: inline-block;
  flex: 0 0 auto;
  color: var(--marca-70);           /* 5,84:1 sobre branco */
}
.doc__voltar { margin-top: var(--e10); }
.doc__data {
  font-family: var(--mono);
  font-size: var(--t-rotulo);
  color: var(--apagado);            /* 5,90:1 sobre branco */
}
.doc__creditos {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 600px) {
  .erro__botoes { flex-direction: row; justify-content: center; }
}

/* ============================================================================
   CABEÇALHO
   ========================================================================= */

.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--cabecalho-h);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}
/* §5.2: a sombra só aparece ao sair do topo. */
.cabecalho.rolado {
  box-shadow: var(--sombra-1);
  border-bottom-color: var(--linha);
}

.cabecalho__interno {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
}

/* Placa escura: a arte da logo (lobo ciano + texto branco) só funciona sobre
   fundo escuro — por isso a marca pediu de volta a peça original, com o
   fundo preto que ela sempre teve. Sem essa placa o texto branco desapareceria
   no cabeçalho claro. */
.cabecalho__marca {
  display: flex;
  align-items: center;
  min-height: 48px;              /* alvo de toque (§1.6) */
  flex: 0 0 auto;
  background: var(--marca);
  border-radius: var(--raio-2);
  padding: var(--e2) var(--e3);
}
/* A logo encolhe nas telas estreitas para o botão com rótulo completo caber.
   Medido, com a logo a 106px e o botão cheio:
     360px → cabeçalho pedia 353px num espaço de 345 (botão 8px para fora)
     320px → pedia 353px num espaço de 305 (48px para fora)
   O alvo de toque de 48px é preservado pelo min-height de .cabecalho__marca,
   que não depende do tamanho da imagem.

   Menor que antes: agora a logo mora dentro de uma placa com padding
   (--e2 --e3), e a placa inteira precisa caber nos 64px do cabeçalho. */
.cabecalho__marca img { width: 92px; height: 29px; }

.cabecalho__nav { display: none; }

/* O rótulo completo ("Chamar no WhatsApp") só cabe de 768px em diante, ao
   lado do menu. Abaixo disso o espaço economizado vai para a logo, que
   estava pequena demais no celular — ver medição acima do botão. */
.cabecalho__cta-longo { display: none; }
@media (min-width: 768px) {
  .cabecalho__cta-longo { display: inline; }
}

/* O CTA do cabeçalho aparece em TODAS as larguras, com o rótulo completo.
   Ele já esteve escondido no celular, quando era um círculo só com o ícone —
   ficavam dois círculos de WhatsApp na mesma tela, o dele e o flutuante, e o
   topo parecia bagunçado. Com o rótulo escrito o problema não existe: um é
   botão de cabeçalho, o outro é ação flutuante. */
.cabecalho__cta {
  flex: 0 0 auto;
  min-height: 48px;                 /* §1.6 — mantido em todas as versões */
  padding: var(--e2);
  font-size: 0.8125rem;
  gap: var(--e1);
  box-shadow: none;
  white-space: nowrap;              /* o rótulo não pode quebrar em duas linhas */
}
.cabecalho__cta svg { width: 16px; height: 16px; }

/* Dois degraus de folga, medidos: em 360 cabe com logo de 92px e botão médio;
   de 390 em diante os dois voltam ao tamanho cheio. */
@media (min-width: 360px) {
  .cabecalho__marca img { width: 96px; height: 30px; }
  .cabecalho__cta { padding: var(--e2) var(--e3); font-size: 0.875rem; gap: var(--e2); }
  .cabecalho__cta svg { width: 18px; height: 18px; }
}
@media (min-width: 390px) {
  .cabecalho__marca img { width: 101px; height: 32px; }
  .cabecalho__cta { padding: var(--e2) var(--e4); font-size: var(--t-mini); }
  .cabecalho__cta svg { width: 20px; height: 20px; }
}

main { padding-top: var(--cabecalho-h); }

/* ============================================================================
   1 · HERO
   ========================================================================= */

/* O respiro do topo e o gap interno do hero são apertados de propósito: são
   eles que decidem se o CTA cabe acima da dobra em 360×640 (§1.5). Medido —
   com --e6 no topo e --e6 de gap, o CTA principal terminava em 563,7px de 640,
   folga de 76,3px, insuficiente para a barra do navegador. */
/* Cada valor deste bloco foi apertado para a foto caber ACIMA do texto sem
   empurrar o segundo CTA para fora da dobra em 360×640 (§1.5). Antes do ajuste
   a folga do CTA secundário era de 18px; depois, ver o comentário em
   .hero__botoes. Mexer aqui exige remedir a dobra. */
.hero {
  padding-block: var(--e2) var(--secao-y);
  /* O brilho agora CLAREIA em vez de escurecer: sobre a base cinza, um wash
     de --marca-12 deixaria o canto sujo, porque --marca-12 é mais escuro que
     --hero-fundo. */
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 60%),
    var(--hero-fundo);
}
/* gap ZERO no celular: a distância entre a foto e o título é dada só pela
   margem da figura, que precisa existir de qualquer jeito para o selo caber.
   Antes o gap da grade (24px) SOMAVA com essa margem (20px) e resultava em
   44px de vão — 24px de desperdício puro, que era exatamente o que faltava
   para o CTA caber na dobra. */
.hero__grade { display: grid; gap: 0; }

/* Sem max-width no bloco inteiro. O limite de medida existe para o PARÁGRAFO
   ser legível, e aplicá-lo ao bloco estrangulava a manchete: medido em 768px,
   o container tinha 753px e o texto ficava preso em 366px (40ch) enquanto o
   H1 estava no seu tamanho máximo de 56px — resultado, 6 linhas e 383px de
   altura usando metade da largura disponível. */
.hero__texto { max-width: none; gap: var(--e3); }

.hero__guia {
  max-width: 46ch;                  /* a medida vive aqui, onde importa */
  font-size: var(--t-guia);
  line-height: 1.55;
  color: var(--tinta-suave);        /* 8,83:1 */
}
.hero__guia strong { color: var(--marca); font-weight: 700; }

.hero__botoes { display: flex; flex-direction: column; gap: var(--e3); }

.hero__nota {
  font-size: var(--t-mini);
  color: var(--apagado);            /* 5,90:1 */
}

/* A figura vem PRIMEIRO no celular. A margem inferior existe para o selo, que
   é posicionado por cima da borda de baixo da foto. */
.hero__figura {
  position: relative;
  margin: 0 0 var(--e6);            /* único vão entre foto e título (gap = 0) */
}
/* Imagem única (foto + placa da logo montadas), mesma proporção nativa em
   toda largura — 1280:683. Como a caixa tem a MESMA forma da imagem, ela
   cabe inteira, sem cortar nada e sem sobrar borda (`cover` e `contain`
   dão resultado idêntico aqui). Isso é bem mais baixo que o crop antigo
   (16:10), o que folga a dobra em vez de apertar — ver medição abaixo. */
.hero__figura img {
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 683;
  object-fit: cover;
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-2);
}
/* Recalibrado para a imagem nova (1280:683, já bem mais baixa que o 16:10
   antigo). Testado sem essa regra: 360x640 já sobra +11,2px de dobra —
   só 320x640 quebra, e por só 1,9px (320 nem está no conjunto de telas
   que o protocolo pede testar, mas já que apareceu, corrige). Por isso o
   gatilho ficou bem mais estreito que antes (era 599,98px de largura). */
@media (max-height: 650px) and (max-width: 340px) {
  .hero__figura img {
    aspect-ratio: 2 / 1;
    object-position: center 22%;
  }
}

/* Selo de cobertura, sobreposto à foto — o truque do modelo aprovado: ele
   substitui o rótulo que ficava acima do H1 e, por estar fora do fluxo, custa
   ZERO de altura. Foram os 64px que ele liberou que fizeram a foto caber em
   cima sem derrubar os botões para fora da dobra.

   Fundo branco SÓLIDO: assim o contraste do texto não depende do que passa
   atrás na foto, e nenhum scrim é necessário. --marca sobre branco = 16,49:1. */
.hero__selo {
  position: absolute;
  /* left/right: 0 + width: fit-content + margin auto, e NÃO left: 50%.
     Com `left: 50%`, um elemento absoluto sem `width` encolhe dentro do que
     sobra à direita — ou seja, metade do container. O selo ficava travado em
     156px de largura e quebrava em três linhas mesmo com 280px disponíveis. */
  left: 0;
  right: 0;
  bottom: 0;
  width: fit-content;
  margin-inline: auto;
  transform: translateY(50%);
  max-width: calc(100% - var(--e4));
  padding: var(--e2) var(--e4);
  border-radius: var(--raio-max);
  background: var(--branco);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-2);
  /* Caixa normal, sem versalete e sem letter-spacing — como no modelo.
     O versalete monoespaçado com .08em pedia 336px para o mesmo texto, mais
     que a largura da tela em 360px; em caixa normal ele cabe em ~230px e
     resolve numa linha só.

     Sem `white-space: nowrap`: era ele que fazia o texto vazar da própria
     caixa e dar 5px de rolagem horizontal em 360px.
     Sem `text-wrap: balance`: ele estreitava o bloco de propósito e
     transformava uma linha em três. */
  font-family: var(--fonte);
  font-size: var(--t-rotulo);
  font-weight: 700;
  color: var(--marca);              /* 16,49:1 sobre o branco sólido do selo */
  text-align: center;
  line-height: 1.35;
}

/* ============================================================================
   2 · FAIXA DE NÚMEROS
   ========================================================================= */

.numeros { padding-block: var(--e12); }

/* No celular a nota e a contagem de avaliações dividem a mesma linha: são o
   MESMO dado ("5,0 em 35 avaliações"), e empilhá-los separava a informação.
   "8 anos" é independente, então ocupa a largura toda acima delas. */
.numeros__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e8) var(--e4);
  text-align: center;
}
.numeros__item:first-child { grid-column: 1 / -1; }
.numeros__valor {
  font-size: var(--t-numero);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--marca-cyan);         /* 8,70:1 sobre --marca */
  font-variant-numeric: tabular-nums;
}
.numeros__rotulo {
  margin-top: var(--e2);
  font-size: var(--t-mini);
  color: #DCE8EB;                   /* 13,3:1 sobre --marca */
}

/* ============================================================================
   Cabeça de seção
   ========================================================================= */

.cabeca { max-width: 46ch; }
.cabeca--centro { margin-inline: auto; text-align: center; }
.cabeca__guia { color: var(--tinta-suave); }

/* ============================================================================
   3 · SERVIÇOS
   ========================================================================= */

.servicos { display: grid; gap: var(--e4); }

.cartao {
  padding: var(--e6);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-2);
  box-shadow: var(--sombra-1);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}
.cartao:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
  border-color: var(--marca-12);
}
.cartao__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--raio-2);
  background: var(--marca-12);
  color: var(--marca);              /* currentColor dos SVG (§8) */
}
.cartao p { color: var(--tinta-suave); font-size: var(--t-mini); }

/* Selo de garantia. Fundo --marca-12, então o texto NÃO pode ser --acao
   (4,22:1 nesse wash) — usa --acao-escura, 5,91:1. */
.cartao__selo {
  align-self: flex-start;
  margin-top: auto;
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-max);
  background: var(--marca-12);
  color: var(--acao-escura);
  font-family: var(--mono);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: .01em;
}
.cartao p.cartao__selo { color: var(--acao-escura); font-size: var(--t-rotulo); }

.cartao__nota {
  padding-top: var(--e3);
  border-top: 1px solid var(--linha-suave);
}
.cartao p.cartao__nota { color: var(--apagado); font-size: var(--t-rotulo); line-height: 1.5; }

.servicos__fecho {
  text-align: center;
  color: var(--tinta-suave);
  max-width: 46ch;
  margin-inline: auto;
}

/* ── Serviços que NÃO são climatização ──────────────────────────────────────
   Visual deliberadamente diferente dos cards: são feitos por outra equipe e
   cobrados à parte. Se parecessem iguais, venderiam uma coisa como outra. */
/* Centralizado em TODAS as larguras, inclusive desktop.
   Só `text-align`, nunca `align-items: center`: este é um flex column, e
   `align-items: center` encolheria a grade de dois itens até o tamanho do
   conteúdo, tirando as colunas do lugar. Com text-align, as caixas ficam
   exatamente onde estão e só o texto dentro delas se centraliza. */
.extras {
  padding: var(--e6);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-2);
  background: var(--marca-06);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  text-align: center;
}
.extras__titulo { font-size: var(--t-h4); }
.extras__lista { display: grid; gap: var(--e4); }
.extras__lista li { display: flex; flex-direction: column; gap: var(--e1); }
.extras__lista strong { color: var(--marca); font-size: var(--t-corpo); }
.extras__lista span { color: var(--tinta-suave); font-size: var(--t-mini); }
.extras__nota {
  padding-top: var(--e4);
  border-top: 1px solid var(--linha);
  color: var(--apagado);            /* 5,45:1 sobre --marca-06 */
  font-size: var(--t-mini);
}
.extras__nota em { color: var(--marca); font-style: normal; font-weight: 700; }

/* ============================================================================
   3b · EMPRESAS

   Faixa escura, a pedido da dona, que relata fechar muito serviço por causa
   deste argumento. Herda `.escuro`, então todo o contraste já está resolvido
   ali: branco 16,49:1, corpo #DCE8EB 13,3:1, rótulo em --marca-cyan 8,70:1,
   e o CTA vira branco com texto --marca.
   ========================================================================= */

.empresas__grade { display: grid; gap: var(--e8); }
.empresas__texto { max-width: 46ch; }
.empresas__acao { margin-top: var(--e2); }

.empresas__lista { display: grid; gap: var(--e4); align-content: center; }
.empresas__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  font-size: var(--t-corpo);
  color: #FFFFFF;
}
/* §6.8: o marcador fica NO FLUXO, como caixa inline, e não absoluto na borda. */
.empresas__ok {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin-top: 1px;
  border-radius: var(--raio-max);
  background: rgba(0, 204, 255, .16);
  color: var(--marca-cyan);         /* 8,70:1 sobre --marca — passa 1.4.11 */
}

@media (min-width: 1024px) {
  .empresas__grade {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--e16);
    align-items: center;
  }
}

/* ============================================================================
   4 · SEGURANÇA E CONFIANÇA
   ========================================================================= */

.confianca__grade { display: grid; gap: var(--e10); }

.confianca__figura { margin: 0; display: flex; flex-direction: column; gap: var(--e3); }
.confianca__figura img {
  width: 100%; height: auto;
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-2);
}
.confianca__figura figcaption {
  font-size: var(--t-mini);
  color: var(--apagado);            /* 5,51:1 sobre --papel */
}

.compromissos { display: flex; flex-direction: column; gap: var(--e6); }
.compromissos li {
  display: flex; flex-direction: column; gap: var(--e2);
  padding-left: var(--e5);
  border-left: 3px solid var(--marca-cyan);
}
.compromissos h3 { font-size: var(--t-h4); }
.compromissos p { color: var(--tinta-suave); font-size: var(--t-mini); }

/* ============================================================================
   5 · COMO FUNCIONA
   ========================================================================= */

.passos { display: grid; gap: var(--e8); }
.passos li {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

/* Quanto de cada barra vem preenchido. Fica no <li>, não no ::after, para o
   valor ser herdado pelo pseudo e continuar acessível às regras de revelação
   mais abaixo. */
.passos li:nth-child(1) { --preenchido: 28%; }
.passos li:nth-child(2) { --preenchido: 52%; }
.passos li:nth-child(3) { --preenchido: 76%; }
.passos li:nth-child(4) { --preenchido: 100%; }

/* Barra de progresso.
   Ela CARREGA significado — mostra em que ponto do processo o passo está —
   então cai na regra de 3:1 da WCAG 1.4.11, e não na isenção de elemento
   decorativo. Medido:
     --acao #007A99 sobre o trilho --linha ....... 3,73:1  OK
     --acao sobre o branco da seção .............. 4,95:1  OK
     --marca-cyan sobre o trilho ................. 1,43:1  REPROVA
   Por isso o preenchimento é --acao, e não o ciano da marca: o ciano
   desapareceria dentro do próprio trilho. */
.passos__barra {
  position: relative;
  display: block;
  height: 4px;
  margin-bottom: var(--e3);
  border-radius: var(--raio-max);
  background: var(--linha);
  overflow: hidden;
}
.passos__barra::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--preenchido, 100%);
  border-radius: inherit;
  background: var(--acao);
  transition: width var(--revelacao);
}

.passos__n {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-rotulo);
  font-weight: 700;
  color: var(--acao);               /* 4,95:1 sobre branco */
}
.passos h3 { font-size: var(--t-h4); }
.passos p { color: var(--tinta-suave); font-size: var(--t-mini); }

/* A barra cresce junto com a revelação do bloco.
   Mesmo portão do §6.1: o estado "vazio" só existe dentro de .js-revelar.
   Sem JavaScript a classe nunca aparece, o seletor nunca casa, e as barras
   nascem já preenchidas — nunca ficam quatro trilhos vazios na tela. */
.js-revelar [data-revelar] .passos__barra::after { width: 0; }
.js-revelar [data-revelar].visivel .passos__barra::after { width: var(--preenchido); }

/* ============================================================================
   6 · QUEM SOMOS
   ========================================================================= */

.quem__grade { display: grid; gap: var(--e8); }
.quem__texto p { color: var(--tinta-suave); }
.quem__figura { margin: 0; display: flex; flex-direction: column; gap: var(--e3); }
.quem__figura img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-2);
}
.quem__figura figcaption {
  font-size: var(--t-mini);
  color: var(--apagado);            /* 5,45:1 sobre --marca-06 */
}

/* ============================================================================
   7 · PROVA SOCIAL
   ========================================================================= */

.depoimentos { display: grid; gap: var(--e4); }
.depoimentos li {
  display: flex; flex-direction: column; gap: var(--e4);
  padding: var(--e6);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-2);
  box-shadow: var(--sombra-1);
}
.depoimentos blockquote { margin: 0; }
/* Aspa como marcador NO FLUXO (§6.8): inline-block acompanha a primeira
   palavra em vez de ficar órfã na borda. */
.depoimentos blockquote p::before {
  content: "\201C";
  display: inline-block;
  margin-right: 2px;
  font-size: 1.35em;
  line-height: 0;
  vertical-align: -0.12em;
  color: var(--marca-70);
}
.depoimentos blockquote p { color: var(--tinta); }
.depoimentos__quem { font-weight: 700; color: var(--marca); font-size: var(--t-mini); }
.depoimentos__quem span { font-weight: 400; color: var(--apagado); }

/* Link solitário no bloco é controle, não link no meio de uma frase: vale a
   regra dos 48px (§1.6). Medido em 22,4px antes desta regra. */
.depoimentos__fonte { text-align: center; }
.depoimentos__fonte a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--e4);
  font-weight: 700;
}

/* ============================================================================
   8 · ÁREA DE COBERTURA
   ========================================================================= */

.cobertura {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  justify-content: center;
}
.cobertura li {
  padding: var(--e3) var(--e5);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-max);
  font-weight: 600;
  color: var(--marca);
  font-size: var(--t-mini);
}
.cobertura__nota {
  text-align: center;
  color: var(--tinta-suave);
  max-width: 46ch;
  margin-inline: auto;
}

/* ============================================================================
   9 · DÚVIDAS FREQUENTES
   ========================================================================= */

.faq {
  max-width: 62ch;
  margin-inline: auto;
  width: 100%;
}
/* A régua de topo vive na COLUNA, não no contêiner: assim cada coluna do
   desktop começa com o próprio traço. */
.faq__coluna { border-top: 1px solid var(--linha); }
/* Empilhadas no celular, as duas colunas viram uma lista só — a segunda não
   pode repetir o traço de topo em cima do traço de baixo da última pergunta
   da primeira. */
.faq__coluna + .faq__coluna { border-top: 0; }
.faq details { border-bottom: 1px solid var(--linha); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 64px;                 /* bem acima dos 48px do §1.6 */
  padding: var(--e4) 0;
  font-weight: 700;
  font-size: var(--t-corpo);
  color: var(--marca);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

/* Sinal de abrir/fechar desenhado em CSS: sem ícone, sem requisição. */
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--acao);
  border-bottom: 2.5px solid var(--acao);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transicao);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.faq summary:hover { color: var(--acao-escura); }

.faq__corpo { padding-bottom: var(--e5); }
.faq__corpo p { color: var(--tinta-suave); }

/* Lista de etapas dentro de uma resposta. */
.faq__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-top: var(--e3);
  margin-bottom: var(--e4);
}
.faq__lista li {
  display: flex;
  gap: var(--e3);
  color: var(--tinta-suave);        /* 8,83:1 */
  font-size: var(--t-mini);
  line-height: 1.55;
}
/* §6.8: marcador NO FLUXO, como caixa inline — nunca absoluto na borda. */
.faq__lista li::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 0.58em;
  border-radius: var(--raio-max);
  background: var(--acao);
}

/* ============================================================================
   10 · CHAMADA FINAL
   ========================================================================= */

.chamada { padding-block: var(--secao-y); text-align: center; }

/* A medida vale para o TEXTO, não para o bloco inteiro.
   Estava no `.wrap` como 52ch, e por isso os botões herdavam um teto de
   ~442px: os dois lado a lado não cabiam e os rótulos quebravam em duas
   linhas. Agora o limite vive no h2 e no parágrafo, e a linha de botões usa a
   largura que precisar.

   ⚠ Em `rem`, não em `ch`. `ch` é relativo à fonte do PRÓPRIO elemento: ao
   mudar de lugar, 52ch no h2 (fonte grande) virou 1062px em vez dos 442px que
   valiam no .wrap, e a manchete alargava para quase a tela inteira. 28rem
   preserva a medida original nos dois. */
.chamada h2, .chamada p { max-width: 28rem; margin-inline: auto; }

.chamada__botoes {
  display: flex; flex-direction: column; gap: var(--e3);
  align-items: stretch;
}
/* Rótulo em uma linha só. Medido em 600px, a menor largura onde eles ficam
   lado a lado: os dois somam 482px num container de 546px. */
.chamada__botoes .btn { white-space: nowrap; }

/* ============================================================================
   11 · RODAPÉ
   ========================================================================= */

.rodape {
  background: var(--marca-fundo);
  color: #DCE8EB;                   /* 15,6:1 sobre --marca-fundo */
  padding-block: var(--e16) var(--e6);
}
.rodape__grade { display: grid; gap: var(--e10); }
.rodape__marca img { width: 117px; height: 44px; }
.rodape__marca p { font-size: var(--t-mini); max-width: 34ch; }

.rodape__titulo {
  font-family: var(--mono);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marca-cyan);         /* 10,23:1 sobre --marca-fundo */
  margin-bottom: var(--e3);
}

/* §6.7: dentro do rodapé, `.rodape ul` (0,1,1) vence uma classe simples (0,1,0).
   Estas regras já são escritas contando com isso, em vez de supor que a última
   ganha. */
.rodape ul { display: flex; flex-direction: column; }
.rodape ul a {
  display: flex;
  align-items: center;
  min-height: 48px;                 /* §1.6 vale no rodapé também */
  color: #DCE8EB;
  text-decoration: none;
}
.rodape ul a:hover { color: var(--marca-cyan); text-decoration: underline; }

.rodape__horario {
  margin-top: var(--e5);
  font-size: var(--t-mini);
  line-height: 1.7;
}
.rodape__horario .rotulo { display: block; margin-bottom: var(--e1); color: var(--marca-cyan); }

.rodape__local address {
  font-style: normal;
  font-size: var(--t-mini);
  line-height: 1.7;
  margin-bottom: var(--e4);
}

/* ── Mapa sob clique (§6.6) ─────────────────────────────────────────────────
   Cartão estático no lugar do embed. O iframe só nasce depois do clique, e
   até lá nenhuma requisição sai para o Google. */
.mapa {
  border-radius: var(--raio-2);
  overflow: hidden;
  border: 1px solid rgba(220, 232, 235, .22);
  background: var(--marca);
  aspect-ratio: 16 / 10;
  display: flex;
}
.mapa__aviso {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  min-height: 48px;
  padding: var(--e4);
  color: #DCE8EB;                   /* 13,3:1 sobre --marca */
  text-decoration: none;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  transition: background-color var(--transicao);
}
.mapa__aviso:hover { background: rgba(0, 204, 255, .10); color: #FFFFFF; }
.mapa__icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--raio-max);
  background: rgba(0, 204, 255, .14);
  color: var(--marca-cyan);         /* 8,70:1 sobre --marca */
}
.mapa__texto { display: flex; flex-direction: column; gap: var(--e1); }
.mapa__texto strong { font-size: var(--t-mini); }
.mapa__texto small { font-size: var(--t-rotulo); color: #B7C9CD; line-height: 1.45; }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

.rodape__fim {
  margin-top: var(--e12);
  padding-top: var(--e6);
  border-top: 1px solid rgba(220, 232, 235, .16);
  font-size: var(--t-mini);
  color: #B7C9CD;                   /* 10,9:1 sobre --marca-fundo */
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.rodape__fim a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;                 /* §1.6 */
  color: #DCE8EB;
}

/* ============================================================================
   12 · BOTÃO FLUTUANTE

   Verde oficial com o glifo em --marca: 8,31:1. Branco sobre esse verde daria
   1,98:1 e reprovaria (ver o bloco de tokens no topo).
   O verde contra a página clara mede 1,98:1, então a separação do fundo NÃO
   pode depender da cor — vem do anel escuro e da sombra.
   ========================================================================= */

.flutuante {
  position: fixed;
  right: var(--e4);
  bottom: var(--e4);
  z-index: 200;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--raio-max);
  background: var(--zap);
  color: var(--zap-glifo);
  box-shadow: 0 0 0 2px rgba(11, 34, 40, .18), var(--sombra-3);
  transition: transform var(--transicao), box-shadow var(--transicao), opacity var(--transicao);
}
.flutuante svg { fill: currentColor; }

/* Recolhe enquanto os CTAs do hero estão na tela. Motivo medido: em 360x640 o
   flutuante cobria 60x54px do botão "Ligar: (11) 94089-1349" — bem em cima
   dos últimos dígitos. O flutuante existe para dar um CTA quando o do hero
   sumiu; enquanto ele está visível, o flutuante só atrapalha.

   Atenção ao padrão: o estado PADRÃO é visível, e o JS é que esconde. Sem
   JavaScript o botão continua lá (§1.9). E se o observador nunca disparar —
   página aberta direto numa âncora, hero que nunca intersecta (§6.2) — o
   resultado também é o botão visível, que é o lado seguro da falha. */
.flutuante--recolhida {
  opacity: 0;
  transform: translateY(12px) scale(.85);
  pointer-events: none;
}
.flutuante:hover {
  color: var(--zap-glifo);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 0 2px rgba(11, 34, 40, .28), var(--sombra-3);
}

/* ============================================================================
   BREAKPOINTS — 600 / 768 / 1024 / 1440, mobile-first
   ========================================================================= */

@media (min-width: 600px) {
  .hero__botoes { flex-direction: row; flex-wrap: wrap; }
  .hero__botoes .btn { width: auto; flex: 1 1 auto; }
  .numeros__grade { grid-template-columns: repeat(3, 1fr); gap: var(--e6); }
  .numeros__item:first-child { grid-column: auto; }   /* volta à linha única */
  .servicos { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .chamada__botoes { flex-direction: row; justify-content: center; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .cabecalho__cta { padding: var(--e2) var(--e5); }
  .cabecalho__marca img { width: 110px; height: 35px; }
  .depoimentos { grid-template-columns: repeat(3, 1fr); }
  .rodape__grade { grid-template-columns: repeat(2, 1fr); gap: var(--e10) var(--e8); }
  .extras__lista { grid-template-columns: repeat(2, 1fr); gap: var(--e6); }
}

@media (min-width: 1024px) {
  :root { --cabecalho-h: 76px; }

  .cabecalho__nav { display: flex; align-items: center; gap: var(--e2); }
  .cabecalho__nav a {
    display: flex; align-items: center;
    min-height: 48px;               /* §1.6 na navegação também */
    padding-inline: var(--e3);
    color: var(--marca);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--t-mini);
    border-radius: var(--raio-1);
  }
  .cabecalho__nav a:hover { color: var(--acao-escura); background: var(--marca-12); }

  /* min-height (não padding fixo): a faixa de números vazava para a primeira
     tela em qualquer monitor comum (768 a 1080px de altura) — o hero tinha
     só 669px de conteúdo. Isso também causava um bug real: o contador da
     faixa já entrava no viewport ao carregar, ficava pendente (§6.4), e
     disparava — reiniciando de 0 — no primeiro scroll pequeno, mesmo com
     os números já visíveis o tempo todo. Preenchendo a tela isso não
     acontece mais: a faixa só entra depois que a pessoa já rolou de verdade. */
  .hero { min-height: calc(100vh - var(--cabecalho-h)); padding-block: var(--e12) var(--secao-y); }

  /* A coluna da foto trava em 440px: com origem de 900px, é o limite do
     retina 2x real. Mais larga que isso seria upscale.
     grid-row explícito nos dois: sem ele, um item com grid-column: 2 empurra
     o outro para a linha 2 e deixa a coluna 1 vazia — foi o que aconteceu na
     primeira tentativa. */
  .hero__grade {
    /* 560px: a fonte da imagem aguentaria até 640px (teto do retina), mas
       "Ar-condicionado" sozinho mede 459px em 56px de fonte — 600px de
       imagem sobrava só 400px para o texto e quebrava a palavra no hífen.
       560px devolve ~504px de coluna de texto, folga o bastante. */
    grid-template-columns: minmax(0, 1fr) 560px;
    align-items: center;
    gap: var(--e16);                /* no desktop o gap volta: são colunas */
  }
  .hero__texto { grid-column: 1; grid-row: 1; }
  .hero__figura { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  /* Proporção nativa (1280:683) já é a mesma em toda largura — nada para
     sobrescrever aqui.

     O selo "dentro da foto, no rodapé dela" (regra removida) fazia sentido
     na foto vertical alta de antes — sobrava espaço abaixo do técnico. Com
     a imagem baixa agora, esse espaço virou o painel da logo, e o selo
     tapava o "AR CONDICIONADO". Herda o comportamento do celular (a
     cavalo da borda, para fora), que não colide com nada. */

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

  .confianca__grade { grid-template-columns: 420px minmax(0, 1fr); align-items: center; gap: var(--e16); }
  .quem__grade { grid-template-columns: minmax(0, 1fr) 400px; align-items: center; gap: var(--e16); }

  .rodape__grade { grid-template-columns: 1.3fr 1fr 1.2fr 1.1fr; gap: var(--e8); }

  /* FAQ em duas colunas: onze perguntas numa coluna só liam como um paredão.
     `align-items: start` para cada coluna ter a própria altura — sem isso a
     linha do grid esticaria as duas juntas. */
  .faq {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--e12);
    align-items: start;
  }
  .faq__coluna + .faq__coluna { border-top: 1px solid var(--linha); }
  /* A última pergunta fica com a largura de UMA coluna, centralizada sob as
     duas. Sem ela fora da grade, uma das colunas ficava com um item a mais e o
     bloco terminava desalinhado.
     A largura é calculada a partir da própria grade — (100% menos o gap) / 2 —
     para acompanhar qualquer mudança de `column-gap` sem sair do lugar. */
  .faq__coluna--final {
    grid-column: 1 / -1;
    width: calc((100% - var(--e12)) / 2);
    margin-inline: auto;
  }

  .flutuante { width: 64px; height: 64px; right: var(--e6); bottom: var(--e6); }
}

@media (min-width: 1440px) {
  .hero__grade { gap: var(--e24); }
}

/* ============================================================================
   CENTRALIZAÇÃO ABAIXO DE 1024px

   Único bloco `max-width` do arquivo, e de propósito: a regra vale para uma
   FAIXA — do celular ao tablet — e desfazê-la com min-width exigiria uma lista
   longa de `text-align: left` no desktop, fácil de deixar incompleta.
   Em 1024px começam os layouts de duas colunas, onde texto centralizado numa
   coluna estreita ao lado de uma foto fica ruim; por isso o corte é aqui.

   ⚠ §6.8 — MARCADOR EM TEXTO CENTRALIZADO.
   Dois elementos tinham marcador preso à esquerda e ficariam órfãos:
     · a barra ciana de .compromissos (era border-left)
     · o check de .empresas__lista (era ícone à esquerda do texto)
   Os dois foram movidos para o FLUXO, acima do texto, onde acompanham a
   centralização em vez de ficar pendurados na borda.
   ========================================================================= */

@media (max-width: 1023.98px) {

  /* ── Hero ── */
  .hero__texto { text-align: center; align-items: center; }
  .hero__guia { margin-inline: auto; }
  .hero__botoes { width: 100%; }

  /* ── Cabeças de seção ── */
  .cabeca { text-align: center; margin-inline: auto; }

  /* ── Serviços: cards, textos e ícones ── */
  .cartao { align-items: center; text-align: center; }
  .cartao__selo { align-self: center; margin-top: var(--e2); }

  /* O box do fim dos Serviços já é centralizado na regra base, em todas as
     larguras — não precisa de nada aqui. */

  /* ── Empresas ── */
  .empresas__texto { text-align: center; align-items: center; margin-inline: auto; }
  /* Check ao LADO do texto, e a lista inteira centralizada como bloco.
     `width: fit-content` + `margin-inline: auto` centraliza o conjunto e, ao
     mesmo tempo, dá a todos os itens a MESMA borda esquerda — com
     `justify-content: center` em cada linha, cada item se centralizaria
     sozinho e a coluna ficaria esfarrapada.
     O check continua no fluxo, como item flex, então não há marcador órfão
     (§6.8): ele acompanha a primeira linha em vez de ficar preso na borda. */
  .empresas__lista {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    justify-items: start;
  }
  .empresas__lista li {
    text-align: left;
    max-width: 32ch;
  }

  /* ── Por que confiar ── */
  .confianca__texto { text-align: center; }
  .confianca__figura figcaption { text-align: center; }
  /* A barra ciana era `border-left` e ficaria órfã na borda esquerda com o
     texto centralizado. Vira um traço curto NO FLUXO, acima do título. */
  .compromissos li {
    align-items: center;
    text-align: center;
    padding-left: 0;
    border-left: 0;
  }
  .compromissos li::before {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 40px;
    height: 3px;
    margin-bottom: var(--e1);
    border-radius: var(--raio-max);
    background: var(--marca-cyan);
  }

  /* ── Como funciona ── */
  .passos li { text-align: center; align-items: center; }
  /* A barra PRECISA de align-self: stretch. `align-items: center` no flex
     column encolhe cada filho até o tamanho do conteúdo — e a barra é um
     <span> vazio, então ela ia a ZERO de largura e sumia da tela. Medido:
     0px em 390 contra 250px no desktop, onde a regra não se aplica. */
  .passos__barra { align-self: stretch; width: 100%; }

  /* ── Quem somos ── */
  .quem__texto { text-align: center; }
  .quem__texto p { margin-inline: auto; }
  .quem__figura figcaption { text-align: center; }

  /* ── Depoimentos ── */
  .depoimentos li { text-align: center; align-items: center; }
  .depoimentos blockquote { width: 100%; }

  /* ── Rodapé ──
     Aqui a centralização é feita por `text-align` + `margin-inline: auto`, e
     NÃO por `align-items: center`. O motivo é o bug das barras de progresso:
     `align-items: center` num flex column encolhe cada filho ao tamanho do
     conteúdo, e qualquer caixa sem conteúdo próprio — como o cartão do mapa —
     iria a zero de largura. */
  .rodape__grade { text-align: center; }
  .rodape__marca img { margin-inline: auto; }
  .rodape__marca p { margin-inline: auto; }

  /* Os links do rodapé são flex com min-height de 48px (§1.6): centralizar o
     texto deles exige justify-content, não text-align. */
  .rodape ul a { justify-content: center; }

  /* No cartão do mapa o ícone SOBE para cima do texto. Mantê-lo ao lado, numa
     caixa alta com texto centralizado, deixava o alfinete pendurado na borda
     esquerda — o mesmo defeito que o §6.8 descreve para bullets. */
  .mapa__aviso {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--e2);
  }

  .rodape__fim { align-items: center; text-align: center; }
}