/* ==========================================================================
   Climatizador M32 — landing page
   Mobile first. Sem gradiente, sem sombra pesada, sem brilho.
   Animações permitidas: carrossel, acordeão, contagem e entrada dos blocos.
   Todas desligadas em prefers-reduced-motion.
   ========================================================================== */

:root {
  /* ---- paleta oficial (trocar a cor da página é trocar aqui) ------------ */
  --grafite:        #16202A;  /* fundo do topo, do fechamento e do rodapé */
  --grafite-claro:  #2A3947;  /* bordas e apoios dentro do grafite */
  --petroleo:       #0F766E;  /* botão principal e valor do preço */
  --petroleo-escuro:#0B5A54;  /* botão pressionado / hover */
  --cinza-fundo:    #F4F6F7;  /* fundo dos blocos alternados */
  --branco:         #FFFFFF;
  --texto:          #1C2733;  /* títulos e texto forte */
  --texto-suave:    #5B6B7A;  /* parágrafos e apoio */

  /* ---- paleta ampliada -------------------------------------------------
     REGRA DE SIGNIFICADO, válida na página inteira:
       âmbar    = calor e problema
       petróleo = solução e resultado
     Os dois NUNCA no mesmo elemento.                                      */
  --ambar:          #C2410C;  /* calor, problema, alerta */
  --ambar-claro:    #FFF7ED;  /* fundo do bloco do problema */
  --petroleo-claro: #ECFDF5;  /* fundo de apoio da solução */
  --azul-aco:       #1E3A5F;  /* terceiro acento, neutro */

  /* ---- tons de apoio das superfícies pintadas -------------------------
     Necessários porque agora existe COR DE FUNDO, e fundo pintado precisa
     de um tom mais escuro para faixas internas e de um tom claro para o
     texto de apoio. Todos conferidos por contraste.                      */
  --ambar-escuro:   #9A3412;  /* faixa interna e título no bloco do problema */
  /* Estes dois nasceram mais escuros e REPROVARAM no contraste (4,13 e
     3,99 contra o mínimo de 4,5). Foram clareados até 4,74 e 4,76. Em
     superfície cheia sobra pouca margem: a hierarquia entre valor e
     legenda vem do TAMANHO e do peso, não do tom. */
  --apoio-petroleo: #E2F2EF;  /* texto de apoio sobre petróleo cheio */
  --apoio-ambar:    #FFF3EC;  /* texto de apoio sobre âmbar cheio */
  --apoio-escuro:   #8FA3B4;  /* valor reservado sobre grafite */

  /* ---- derivadas para uso SOBRE o grafite ------------------------------
     O --texto-suave não tem contraste suficiente sobre fundo escuro, então
     o texto de apoio do topo, do fechamento e do rodapé usa estas duas.
     Não são cores novas de marca: são a versão legível no fundo escuro.   */
  --sobre-grafite-apoio: #AEBDC9;  /* ~8,5:1 sobre o grafite */
  --sobre-grafite-linha: #33414F;  /* borda discreta no fundo escuro */

  /* ---- apoios neutros de borda ---------------------------------------- */
  --linha-clara:   #E1E7EB;
  --linha-media:   #DDE3E7;
  --linha-forte:   #C3CDD5;

  /* ---- acabamento unificado --------------------------------------------
     ÚNICAS medidas de canto e de transição permitidas na página. Valor
     solto de border-radius ou de transition fora destas variáveis é bug
     de acabamento. A pílula (999px) é a forma "cápsula" das etiquetas.   */
  --raio-pequeno: 6px;
  --raio-medio:   10px;
  --raio-grande:  14px;
  --raio-pilula:  999px;

  --t-rapida: .18s;   /* hover, foco, pressionar */
  --t-media:  .4s;    /* acordeão, entrada de bloco e de cartão */
  --curva: cubic-bezier(.4, 0, .2, 1);

  /* ---- larguras de leitura ---------------------------------------------
     Estreita = texto de leitura corrida; média = cartões e listas;
     larga = tabela, carrossel e grade de aplicações. No celular as três
     convergem para a mesma coluna com margem lateral. */
  --largura-estreita: 640px;
  --largura-media:    640px;
  --largura-larga:    640px;

  /* ---- escala tipográfica ----------------------------------------------
     ÚNICOS tamanhos e pesos de fonte permitidos na página. Tamanho ou
     peso solto fora destas variáveis é bug de acabamento. Os degraus
     grande, título e gigante crescem no desktop. */
  --fonte-micro:   12px;
  --fonte-pequena: 14px;
  --fonte-base:    17px;
  --fonte-media:   19px;
  --fonte-grande:  22px;
  --fonte-titulo:  32px;
  --fonte-gigante: 68px;

  --peso-semi:  600;
  --peso-forte: 700;
  --peso-extra: 800;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* âncoras do cabeçalho rolam suave; desligado em menos-movimento */
  scroll-behavior: smooth;
}

/* O atributo hidden tem que vencer qualquer display declarado depois.
   Sem isto, o botão (display:block) continuaria visível mesmo escondido
   pelo script. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fonte-base);
  line-height: 1.65;
}

/* Texto corrido não passa de ~70 caracteres por linha no desktop. Os
   contêineres têm 720px (~75ch): esta trava segura o excedente. */
.subtitulo,
.faixa-subtitulo,
.faixa-fecho,
.cartao-texto,
.cartao-acao,
.passo-texto,
.uso-texto,
.acordeao-conteudo p,
.produto-legenda {
  max-width: 70ch;
}

/* ========================================== CABEÇALHO FIXO =============== */
/* Baixo e discreto: gruda no topo sem empurrar a calculadora para fora da
   primeira tela. Mesmo grafite do topo, separado por uma linha fina.      */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--grafite);
  border-bottom: 1px solid var(--sobre-grafite-linha);
}

/* cabeçalho e rodapé usam a MESMA largura máxima (larga), para as bordas
   extremas da página conversarem no desktop */
.cabecalho-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--largura-larga);
  margin: 0 auto;
  padding: 10px 20px;
}

.cabecalho-marca {
  margin: 0;
  font-size: var(--fonte-pequena);
  font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
  color: var(--branco);
}

/* contraste conferido: petróleo-claro sobre grafite passa com folga */
.cabecalho-link {
  font-size: var(--fonte-pequena);
  font-weight: var(--peso-forte);
  white-space: nowrap;
  color: var(--petroleo-claro);
  text-decoration: none;
  transition: color var(--t-rapida) var(--curva);
}

.cabecalho-link:hover {
  text-decoration: underline;
}

.cabecalho-link:focus-visible {
  outline: 2px solid var(--petroleo-claro);
  outline-offset: 3px;
  border-radius: var(--raio-pequeno);
}

.cabecalho-link:active {
  color: var(--sobre-grafite-apoio);
}

/* atalhos de navegação: só no desktop; no celular fica só o contato */
.cabecalho-atalhos {
  display: none;
}

.cabecalho-atalho {
  font-size: var(--fonte-micro);
  font-weight: var(--peso-semi);
  white-space: nowrap;
  color: var(--sobre-grafite-apoio);
  text-decoration: none;
  transition: color var(--t-rapida) var(--curva);
}

.cabecalho-atalho:hover {
  color: var(--branco);
  text-decoration: underline;
}

.cabecalho-atalho:focus-visible {
  outline: 2px solid var(--petroleo-claro);
  outline-offset: 3px;
  border-radius: var(--raio-pequeno);
}

.cabecalho-atalho:active {
  color: var(--petroleo-claro);
}

/* ========================================= PRIMEIRA TELA (HERÓI) ========= */
/* Ocupa a altura visível MENOS o cabeçalho fixo (44px), para o botão sempre
   nascer dentro da tela. min-height, não height: se a fonte do sistema for
   grande ou a tela for muito baixa, o bloco cresce e rola em vez de cortar
   o botão. svh (viewport pequena) é a medida certa no celular: é a altura
   com a barra do navegador ABERTA, então nada some quando ela reaparece.  */

.heroi {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 44px);   /* navegador antigo, sem svh */
  min-height: calc(100svh - 44px);
  color: var(--branco);
  padding: 20px 20px 24px;

  /* FOTO DE GALPÃO REAL SOB VÉU GRAFITE DE 86%.
     O véu sai do próprio --grafite via color-mix, e não de um rgba digitado
     à mão: valor copiado envelhece e um dia deixa de ser o grafite da
     paleta. Se o navegador não conhecer color-mix, a declaração inteira de
     background-image cai e sobra o background-color abaixo — grafite sólido,
     que é exatamente como esta tela era antes. Degrada legível.
     86% foi medido, não chutado: ver o comentário de .heroi-numero. */
  background-color: var(--grafite);
  background-image:
    linear-gradient(color-mix(in srgb, var(--grafite) 86%, transparent),
                    color-mix(in srgb, var(--grafite) 86%, transparent)),
    url('img/galpao-interno-varias-1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Espaçamento apertado a dedo: com estas margens o conteúdo fecha em 505px
   de altura em tela de 380px, e cabe inteiro (com o botão) até num aparelho
   de 640px de altura, o mais baixo que ainda aparece. Afrouxar qualquer uma
   destas margens custa tela e pode empurrar o botão para fora. */
.heroi .titulo    { margin-bottom: 10px; }
.heroi .subtitulo { margin-bottom: 16px; }

.heroi-interno {
  width: 100%;
  max-width: var(--largura-estreita);
  margin: 0 auto;
}

/* a etiqueta inverte em fundo escuro, igual às faixas grafite */
.heroi .tarja {
  margin-bottom: 14px;
  padding: 5px 10px;
  letter-spacing: 0.03em;
  color: var(--grafite);
  background: var(--petroleo-claro);
}

/* O NÚMERO DO CALOR em âmbar, com FUNDO GRAFITE PRÓPRIO.
   O fundo não é enfeite, é a trava de contraste. Medindo a foto do topo:
   ela tem pixels brancos puros (as janelas estouradas), e o âmbar precisa
   de fundo quase preto para chegar aos 3:1 de texto grande. Sobre a foto
   com véu de 86% ele daria 2,06:1 — reprovado. Para o âmbar passar só pelo
   véu seria preciso 98%, e a 98% não existe mais foto nenhuma, só grafite.
   Cravando --grafite atrás do número, ele fica imune ao que passa por trás:
   3,18:1, o mesmo de sempre, independente da foto. Todo o resto do texto
   passa com folga no véu de 86% e continua vendo a foto.
   Se o número quebrar em duas linhas, o fundo acompanha as duas (clone). */
.heroi-numero {
  color: var(--ambar);
  background: var(--grafite);
  padding: 0 0.08em;
  border-radius: var(--raio-pequeno);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* marcadores discretos em linha, separados por ponto médio desenhado em
   CSS (não digitado no HTML, para o leitor de tela não soletrar o ponto) */
.heroi-marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: var(--fonte-micro);
  color: var(--sobre-grafite-apoio);
}

.heroi-marca + .heroi-marca::before {
  content: '·';
  margin-right: 10px;
  color: var(--apoio-escuro);
}

/* o botão é uma âncora: precisa do que o <button> já tinha de graça */
.heroi-botao {
  margin-top: 0;
  text-align: center;
  text-decoration: none;
}

/* o anel de foco padrão do botão é escuro (--texto), pensado para botão em
   fundo claro. Aqui o fundo é grafite e ele sumiria: troca para o tom claro */
.heroi-botao:focus-visible {
  outline-color: var(--petroleo-claro);
}

.heroi-secundario {
  margin: 14px 0 0;
  text-align: center;
}

/* petróleo-claro sobre grafite: mesma dupla do link do cabeçalho */
.heroi-link {
  font-size: var(--fonte-pequena);
  font-weight: var(--peso-semi);
  color: var(--petroleo-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.heroi-link:hover {
  color: var(--branco);
}

.heroi-link:focus-visible {
  outline: 2px solid var(--petroleo-claro);
  outline-offset: 3px;
  border-radius: var(--raio-pequeno);
}

/* ========================================== TOPO (faixa da calculadora) == */

/* Era o bloco de abertura em grafite. Com o herói escuro na frente, virou a
   faixa CLARA que separa dois blocos escuros (herói e "Como funciona") —
   sem isso a página abriria com três telas escuras emendadas.
   Espaçamento apertado de propósito: título, linha de apoio e os DOIS
   campos da calculadora precisam caber juntos. A foto do produto fica
   depois dos selos. */
.topo {
  background: var(--cinza-fundo);
  color: var(--texto);
  padding: 0 20px 44px;
  scroll-margin-top: 64px;  /* âncora do botão do herói para abaixo da barra fixa */
}

/* O corte é a única coisa do topo que sangra de borda a borda: precisa
   furar tanto o max-width dos filhos quanto o padding lateral da seção. */
.topo > .corte {
  max-width: none;
  width: calc(100% + 40px);
  margin: 0 -20px 28px;
}

/* título e linha de apoio da calculadora: mesma tipografia das outras
   faixas, um pouco mais juntos porque o cartão vem logo abaixo */
.topo-titulo    { margin-bottom: 10px; }
.topo-subtitulo { margin-bottom: 20px; }

/* largura máxima de leitura, centralizada, sem precisar de div extra */
.topo > * {
  max-width: var(--largura-estreita);
  margin-left: auto;
  margin-right: auto;
}

/* ETIQUETA sólida, não texto colorido solto. Em fundo claro é petróleo com
   texto branco; em fundo escuro inverte para petróleo-claro com texto
   grafite; no bloco do problema é âmbar com texto branco. */
.tarja {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 16px;
  padding: 6px 12px;
  border-radius: var(--raio-pilula);
  font-size: var(--fonte-micro);
  font-weight: var(--peso-forte);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--branco);
  background: var(--petroleo);
}

/* Título e linha de apoio do HERÓI. Nasceram no topo antigo, que também era
   grafite; com o topo agora claro, quem usa estas duas classes é só a
   primeira tela — as cores continuam sendo as de fundo escuro. */
.titulo {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: var(--fonte-titulo);
  line-height: 1.1;
  font-weight: var(--peso-forte);
  letter-spacing: -0.02em;
  color: var(--branco);
}

.subtitulo {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: var(--fonte-base);
  color: var(--sobre-grafite-apoio);
}

/* ---------------------------------------------------------- calculadora -- */
/* cartão branco sobre o grafite: o campo e o resultado precisam ficar
   no fundo claro para leitura e para o teclado numérico do celular.        */

.calculadora {
  background: var(--branco);
  color: var(--texto);
  border-radius: var(--raio-medio);
  padding: 18px 16px;
}

.calc-titulo {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: var(--fonte-micro);
  font-weight: var(--peso-forte);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--petroleo);
}

.campos {
  display: grid;
  gap: 12px;
}

.campo-rotulo {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fonte-pequena);
  font-weight: var(--peso-semi);
}

.campo-linha {
  position: relative;
}

.campo {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: var(--fonte-media);
  font-weight: var(--peso-semi);
  color: var(--texto);
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-medio);
  appearance: none;
  transition: border-color var(--t-rapida) var(--curva);
}

.campo-linha .campo {
  padding-right: 56px;
}

.campo:hover {
  border-color: var(--texto-suave);
}

.campo:focus {
  outline: 2px solid var(--petroleo);
  outline-offset: 1px;
  border-color: var(--petroleo);
}

/* remove as setinhas do input number — o campo é de digitação */
.campo::-webkit-outer-spin-button,
.campo::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.campo[type="number"] {
  -moz-appearance: textfield;
}

/* seta do seletor desenhada em CSS: nenhum ícone, nenhum arquivo externo */
.campo-select {
  padding-right: 48px;
  background-image: none;
  cursor: pointer;
}

/* cidade antes de escolher o estado: apagada, sem convidar o clique */
.campo-select:disabled {
  color: var(--texto-suave);
  background: var(--cinza-fundo);
  cursor: not-allowed;
}

/* valor inválido no campo de área: borda âmbar + aviso curto, em vez de
   simplesmente não calcular */
.campo--invalido {
  border-color: var(--ambar);
}

.campo--invalido:focus {
  outline-color: var(--ambar);
  border-color: var(--ambar);
}

.campo-erro {
  margin: 6px 0 0;
  font-size: var(--fonte-micro);
  font-weight: var(--peso-semi);
  color: var(--ambar);
}

.campo-grupo {
  position: relative;
}

.campo-grupo--select::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(45deg);
  pointer-events: none;
}

.campo-unidade {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: var(--fonte-base);
  font-weight: var(--peso-semi);
  color: var(--texto-suave);
  pointer-events: none;
}

/* ------------------------------------------------------------ resultado -- */

.resultado {
  margin-top: 18px;
}

.resultado-vazio {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--linha-clara);
  font-size: var(--fonte-pequena);
  color: var(--texto-suave);
}

/* ==== CARTÃO DE RESULTADO ================================================
   É o ponto MAIS colorido da página inteira: superfície petróleo cheia,
   texto todo em branco. Em cidade úmida a mesma superfície vira âmbar.
   A variável --tinta-apoio troca junto, para o texto de apoio continuar
   legível nos dois fundos.                                                */

.resultado-dados {
  --tinta-apoio: var(--apoio-petroleo);
  --tinta-faixa: var(--petroleo-escuro);
  /* as faixas internas sangram até a borda usando esta mesma medida */
  --pad-cartao: 18px;
  display: flex;
  flex-direction: column;
  padding: 22px var(--pad-cartao) 0;
  border-radius: var(--raio-grande);
  background: var(--petroleo);
  color: var(--branco);
  overflow: hidden; /* faz as faixas internas respeitarem os cantos */
  animation: cartao-entra var(--t-media) var(--curva);
}

/* o cartão de resultado entra suave, não de estalo; o atributo hidden
   troca o display, então a animação reinicia a cada aparição */
@keyframes cartao-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.resultado-dados--alerta {
  --tinta-apoio: var(--apoio-ambar);
  --tinta-faixa: var(--ambar-escuro);
  background: var(--ambar);
}

/* ---- números em destaque: a QUEDA manda, a quantidade acompanha -------- */

.destaques {
  display: flex;
  flex-wrap: wrap; /* área gigante não estoura o cartão em 380px */
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 14px;
}

.destaque {
  display: flex;
  flex-direction: column;
}

.destaque-numero {
  font-weight: var(--peso-extra);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; /* o número muda sem dançar */
  color: var(--branco);
}

.destaque-legenda {
  margin-top: 6px;
  font-size: var(--fonte-micro);
  font-weight: var(--peso-forte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-apoio);
}

.destaque--queda .destaque-numero { font-size: var(--fonte-gigante); }
.destaque--qtd   .destaque-numero { font-size: var(--fonte-titulo); }

/* ---- linhas de apoio dentro do cartão --------------------------------- */

.resultado-linha,
.resultado-cobertura {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0;
  padding: 8px 0;
}

.resultado-rotulo {
  font-size: var(--fonte-pequena);
  color: var(--tinta-apoio);
}

.resultado-valor {
  font-size: var(--fonte-base);
  font-weight: var(--peso-forte);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--branco);
}

/* linha do volume do galpão e do volume por M32: apoio pequeno, sem competir */
.resultado-volume {
  margin: 0;
  padding: 0 0 6px;
  font-size: var(--fonte-micro);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-apoio);
}

/* RESSALVA COLADA NO NÚMERO DA QUEDA (13/08/2026).
   Diz que aquele número é condição de projeto, e não o resultado de todo
   dia. Discreta de propósito: menor degrau da escala e o mesmo tom de apoio
   dos rótulos do cartão — não é alarme, é qualificação do número.
   A variável --tinta-apoio troca sozinha quando o cartão vira âmbar (cidade
   úmida), então a ressalva continua legível nos dois fundos sem regra nova.
   Contraste conferido: 4,74:1 sobre o petróleo e 4,76:1 sobre o âmbar, os
   dois acima do mínimo de 4,5 para texto de tamanho normal. */

.resultado-ressalva {
  margin: 0;
  padding: 0 0 10px;
  font-size: var(--fonte-micro);
  line-height: 1.5;
  color: var(--tinta-apoio);
}

/* o link é a única coisa em branco cheio da frase: precisa se destacar do
   texto de apoio para ser reconhecido como clicável */
.resultado-ressalva-link {
  font-weight: var(--peso-semi);
  color: var(--branco);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.resultado-ressalva-link:hover {
  text-decoration: none;
}

.resultado-ressalva-link:focus-visible {
  outline: 2px solid var(--branco);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
}

/* aviso de clima úmido: faixa mais escura dentro do próprio cartão */
.resultado-alerta {
  margin: 12px calc(-1 * var(--pad-cartao)) 0;
  padding: 14px var(--pad-cartao);
  font-size: var(--fonte-pequena);
  color: var(--branco);
  background: var(--tinta-faixa);
}

/* PREÇO: faixa mais escura, colada no pé do cartão. Desde 12/08/2026 ela
   carrega quatro coisas, e não mais só o total — preço por equipamento,
   total, aviso de frete e, quando cabe, o incentivo para a próxima faixa.
   Deixou de herdar .resultado-linha (que era uma linha só, rótulo à
   esquerda e valor à direita) e passou a ser uma pilha própria. */
.resultado-linha--preco {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 calc(-1 * var(--pad-cartao));
  padding: 16px var(--pad-cartao);
  background: var(--tinta-faixa);
}

/* cada linha da faixa: rótulo à esquerda, valor à direita */
.preco-linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 16px;
  margin: 0;
}

/* o total é o número grande: a base do rótulo alinha com o pé do valor */
.preco-linha--total {
  align-items: flex-end;
}

.preco-frete {
  margin: 2px 0 0;
  font-size: var(--fonte-micro);
  color: var(--tinta-apoio);
}

/* Incentivo de volume. Discreto de propósito: é informação de oportunidade,
   não alarme, e não pode competir com o total logo acima. Fica em branco
   cheio (e não no tom de apoio) porque é a única linha da faixa que pede
   uma decisão. Some sozinho quando já se está na melhor faixa. */
.preco-incentivo {
  margin: 8px 0 0;
  font-size: var(--fonte-micro);
  font-weight: var(--peso-semi);
  line-height: 1.5;
  color: var(--branco);
}

.resultado-valor--preco {
  font-size: var(--fonte-titulo);
  letter-spacing: -0.02em;
  color: var(--branco);
}

.resultado-nota {
  order: 1;
  margin: 0;
  padding: 12px 0 18px;
  font-size: var(--fonte-micro);
  color: var(--tinta-apoio);
}

/* duas notas seguidas: a segunda cola na primeira, sem vão duplo */
.resultado-nota + .resultado-nota {
  padding-top: 0;
}

/* ---------------------------------------------- aviso de alimentação ---- */
/* Era alerta âmbar enquanto o trifásico era restrição. Com o inversor de
   frequência confirmado pelo fabricante (11/08/2026), ligar em bifásico
   passou a ser possível: virou INFORMAÇÃO, não problema. Por isso saiu do
   âmbar — a regra de significado da paleta reserva âmbar para calor e
   problema. Ficou nota neutra, legível e sem alarme. Aparece e some JUNTO
   com o resultado (script.js). Contraste: texto-suave sobre cinza-fundo
   (~5:1) e sobre branco (~5,4:1). */

.aviso-trifasico {
  margin: 14px 0 0;
  padding: 12px 14px;
  font-size: var(--fonte-pequena);
  color: var(--texto-suave);
  background: var(--cinza-fundo);
  border-left: 3px solid var(--linha-forte);
  border-radius: var(--raio-medio);
}

/* A regra .calculadora--compacta .aviso-trifasico foi APAGADA em 12/08/2026,
   junto com a calculadora do fechamento. Não existe mais elemento com essa
   classe na página: regra órfã apontando para componente removido é a
   próxima pessoa perdendo tempo procurando o que ela estiliza. */

/* ---------------------------------------------------------------- botão -- */

.botao {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 21px 22px;
  font: inherit;
  font-size: var(--fonte-media);
  font-weight: var(--peso-extra);
  letter-spacing: 0.01em;
  color: var(--branco);
  background: var(--petroleo);
  border: none;
  border-radius: var(--raio-medio);
  cursor: pointer;
  transition: background-color var(--t-rapida) var(--curva),
              transform var(--t-rapida) var(--curva);
}

.botao:hover {
  background: var(--petroleo-escuro);
}

.botao:focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: 2px;
}

/* pressionado: desce de leve, junto com o tom mais escuro */
.botao:active {
  background: var(--petroleo-escuro);
  transform: translateY(2px);
}

/* ---- chamada para a calculadora, ao longo da página --------------------
   Com uma calculadora só (a do topo), estes botões são o caminho de volta
   até ela. São ÂNCORAS, não botões: quem rola é o scroll-behavior do CSS,
   que já se desliga sozinho em prefers-reduced-motion; o script só leva o
   foco ao primeiro campo. Mesmo data-ir-calculadora do botão do herói.   */

/* CENTRALIZADO em 14/08/2026, por ordem do Hamilton (o botão abaixo dos
   quatro selos). A regra já existia no desktop, dentro do @media de 700px;
   subiu para cá para valer em TODA largura e ficar num lugar só — dois
   lugares definindo o mesmo alinhamento é o começo de os dois divergirem.
   No celular o botão é display:block com width:100%, então centralizar não
   muda nada lá; a regra existe para quando ele vira inline-block no desktop. */
/* ⚠️ O `auto` das margens laterais NÃO É ENFEITE — é ele que centraliza o
   bloco na página, e a versão anterior (`margin: 32px 0 0`) o matava.
   MEDIDO no Chrome em 14/08/2026, janela de 1422px: o bloco tem 700px e
   ficava em x=32, com 32px de folga à esquerda e 675px à direita. O botão
   estava perfeitamente centrado DENTRO do bloco — e o bloco inteiro estava
   encostado na esquerda. Por isso duas leituras do CSS disseram "já está
   centralizado" enquanto a tela mostrava o contrário.
   `.topo > *` já mandava `margin-left/right: auto`, mas esta regra vem
   depois no arquivo, com a mesma especificidade, e o `0` vencia. */
.acao-bloco {
  margin: 32px auto 0;
  text-align: center;
}

/* título de bloco centralizado — hoje só "Faz a conta do seu galpão." */
.faixa-titulo--centro {
  text-align: center;
}

.botao--acao {
  margin-top: 0;
  text-align: center;
  text-decoration: none;
}

/* no fechamento o fundo é grafite e o anel de foco escuro sumiria */
.faixa--grafite .botao--acao:focus-visible {
  outline-color: var(--petroleo-claro);
}

/* ---------------------------------------------------------------- selos -- */
/* Quatro caixinhas, agora ABAIXO da foto do produto e MENORES que na versão
   original (12/08/2026). Passaram uma rodada como faixa única com o título
   "O que já vem resolvido"; o título era rótulo vazio para quatro itens que
   se explicam sozinhos, e a faixa voltou a ser caixinha.
   Menores quer dizer: um degrau abaixo na fonte (micro no lugar de pequena)
   e metade do respiro interno. Vivem na faixa da calculadora, que é cinza:
   texto-suave sobre branco dá 5,4:1.                                      */

.selos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.selo {
  padding: 8px 10px;
  font-size: var(--fonte-micro);
  font-weight: var(--peso-semi);
  text-align: center;
  color: var(--texto-suave);
  background: var(--branco);
  border: 1px solid var(--linha-media);
  border-radius: var(--raio-pequeno);
}

/* -------------------------------------------------------- foto do produto */

/* fundo petróleo-claro: o equipamento é branco e precisa de superfície
   colorida atrás para não sumir */
.produto {
  margin-top: 40px;
  margin-bottom: 0;
  padding: 20px;
  background: var(--petroleo-claro);
  border-radius: var(--raio-grande);
}

/* enquadramento 4:3 com corte: o equipamento fica maior dentro da moldura,
   sem arquivo novo — a mesma foto, melhor aproveitada */
.produto-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio-pequeno);
}

.produto-extras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.produto-mini {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--branco);
  border: 1px solid var(--linha-clara);
  border-radius: var(--raio-pequeno);
}

/* centralizada desde 12/08/2026. O margin auto é necessário junto do
   text-align: a legenda tem max-width de 70ch (regra do topo do arquivo),
   e sem ele o texto centralizaria dentro de uma caixa encostada à
   esquerda — pareceria centralizado torto no desktop. */
.produto-legenda {
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fonte-micro);
  text-align: center;
  color: var(--texto-suave);
}

/* ============================================= FAIXAS (blocos) =========== */
/* A alternância é DECLARADA no HTML, não deduzida por posição: cada faixa
   diz se é clara, cinza ou grafite. Inserir uma seção nova no meio não
   inverte silenciosamente as cores das outras.                             */

.faixa--claro   { background: var(--branco); }
.faixa--cinza   { background: var(--cinza-fundo); }
.faixa--ambar   { background: var(--ambar-claro); }
.faixa--grafite { background: var(--grafite); color: var(--branco); }

/* âncora do cabeçalho: parar abaixo da barra fixa */
.faixa[id] {
  scroll-margin-top: 64px;
}

/* ---- respiro progressivo -----------------------------------------------
   O espaço vertical cresce conforme a página desce: início mais compacto,
   meio e fim mais soltos. As bandas contam as seções do main.            */
/* As bandas contam a POSIÇÃO da seção dentro do main. O herói entrou como
   seção 1 e empurrou todo mundo uma casa: por isso n+6 e n+9, e não n+5 e
   n+8 — assim cada bloco fica com o mesmo respiro que já tinha antes.
   Mexer na ordem das seções obriga a revisar estes dois números.          */
.faixa { --respiro: 56px; }
main > .faixa:nth-of-type(n+6) { --respiro: 68px; }
main > .faixa:nth-of-type(n+9) { --respiro: 80px; }

/* ---- cortes entre blocos -----------------------------------------------
   SVG inline no topo da seção, pintado com a cor do bloco ANTERIOR: o
   olho vê um bloco entregando o próximo, sem faixa branca no meio.      */
.corte {
  display: block;
  width: 100%;
  height: 40px;
}

.corte--de-grafite { color: var(--grafite); }
.corte--de-cinza   { color: var(--cinza-fundo); }
.corte--de-ambar   { color: var(--ambar-claro); }
.corte--de-claro   { color: var(--branco); }

.faixa-interna {
  max-width: var(--largura-estreita);
  margin: 0 auto;
  padding: var(--respiro) 20px;
}

.faixa-interna--media { max-width: var(--largura-media); }
.faixa-interna--larga { max-width: var(--largura-larga); }

.faixa-interna--antes-carrossel { padding-bottom: 24px; }
.faixa-interna--continua        { padding-top: 8px; }

/* escala tipográfica: título de bloco MUITO maior e mais pesado que o
   texto corrido (34px contra 17px no celular, 48px no desktop) */
.faixa-titulo {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: var(--fonte-titulo);
  line-height: 1.1;
  font-weight: var(--peso-extra);
  letter-spacing: -0.025em;
  color: var(--texto);
}

/* em bloco escuro o título brilha em petróleo-claro */
.faixa--grafite .faixa-titulo { color: var(--petroleo-claro); }

.faixa-subtitulo {
  margin-top: 0;
  margin-bottom: 32px;
  font-size: var(--fonte-base);
  color: var(--texto-suave);
}

.faixa-fecho {
  margin: 32px 0 0;
  font-size: var(--fonte-base);
  color: var(--texto-suave);
}

/* FECHO QUE ACOMPANHA A LARGURA DA TABELA (14/08/2026, ordem do Hamilton).
   MEDIDO no Chrome, janela de 1422px: a frase tinha 641px e a tabela 954px —
   as duas começando no mesmo x, mas a frase parando bem antes. A causa é a
   trava de leitura de 70ch lá do topo do arquivo, que veste todo texto
   corrido. Aqui ela é solta, e SÓ AQUI, por um modificador próprio.
   ⚠️ O PREÇO, declarado: a 954px a linha passa de 100 caracteres, acima do
   confortável de leitura. É troca deliberada — o alinhamento com a tabela
   ganhou da largura de leitura, porque a frase é a legenda dela.
   Só no desktop: no celular a caixa é estreita e a trava nunca chega a agir. */
.faixa-fecho--largura-tabela {
  max-width: none;
}

/* No bloco do problema a etiqueta é âmbar cheia, para não misturar os dois
   significados na mesma tela. Em bloco escuro ela inverte. */
.faixa--ambar .tarja {
  color: var(--branco);
  background: var(--ambar);
}

.faixa--grafite .tarja {
  color: var(--grafite);
  background: var(--petroleo-claro);
}

/* Trava de legibilidade: sobre o grafite, todo texto de apoio troca para a
   versão clara. Sem isto, um subtítulo ou fecho colocado numa faixa escura
   no futuro nasceria escuro-sobre-escuro, praticamente invisível.
   A etiqueta fica de fora porque tem fundo próprio. */
.faixa--grafite .faixa-subtitulo,
.faixa--grafite .faixa-fecho {
  color: var(--sobre-grafite-apoio);
}

/* ============================== BLOCO: COMO FUNCIONA ===================== */

.passos {
  display: grid;
  gap: 28px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

/* Cada passo virou uma CAIXA em 12/08/2026, no lugar do filete horizontal
   que só marcava o começo. O número já era o primeiro filho, então ele
   nasce no alto da caixa sem precisar de nada novo.
   Três colunas no desktop (regra em min-width: 700px), empilhadas no
   celular. Texto de cada passo inalterado. */
.passo {
  padding: 22px 20px 24px;
  background: var(--cinza-fundo);
  border-radius: var(--raio-medio);
}

/* número grande em petróleo, dentro de um círculo petróleo-claro */
.passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--petroleo-claro);
  font-size: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--petroleo);
}

/* desenhos feitos só com blocos e bordas. Nenhuma imagem, nenhum ícone. */
.passo-desenho {
  display: flex;
  height: 52px;
  margin: 16px 0 14px;
}

.passo-desenho--fluxo,
.passo-desenho--saida {
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

.fluxo-barra {
  display: block;
  height: 4px;
  border-radius: var(--raio-pilula);
  background: var(--linha-forte);
}

.fluxo-barra:nth-child(1) { width: 54px; }
.fluxo-barra:nth-child(2) { width: 38px; }
.fluxo-barra:nth-child(3) { width: 64px; }

.passo-desenho--saida .fluxo-barra { background: var(--petroleo); }

.passo-desenho--colmeia {
  align-items: stretch;
  gap: 5px;
  width: max-content;
  padding: 8px 10px;
  border: 2px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
}

.colmeia-barra {
  display: block;
  width: 4px;
  border-radius: var(--raio-pilula);
  background: var(--petroleo);
}

.passo-titulo {
  margin: 0 0 8px;
  font-size: var(--fonte-media);
  font-weight: var(--peso-forte);
  line-height: 1.3;
}

.passo-texto {
  margin: 0;
  font-size: var(--fonte-base);
  color: var(--texto-suave);
}

/* --- os passos vivem em bloco escuro: número e desenho invertem -------- */

/* em bloco escuro a caixa fica um degrau mais clara que o fundo, nunca
   branca — mesma regra dos cartões de aplicação (.uso) */
.faixa--grafite .passo {
  background: var(--grafite-claro);
}

/* O círculo do número era grafite-claro sobre o fundo grafite. Agora a
   CAIXA é grafite-claro, e o círculo sumiria dentro dela: ele passou a
   usar o grafite cheio, invertendo a relação. Nenhuma cor nova — as duas
   já estavam na paleta, só trocaram de papel. */
.faixa--grafite .passo-numero {
  background: var(--grafite);
  color: var(--petroleo-claro);
}

.faixa--grafite .passo-titulo { color: var(--branco); }
.faixa--grafite .passo-texto  { color: var(--sobre-grafite-apoio); }

/* As barras neutras e a moldura da colmeia usavam --sobre-grafite-linha,
   um tom pensado para aparecer sobre o grafite CHEIO. Com o passo virando
   caixa em grafite-claro, elas quase sumiriam: subiram para --apoio-escuro,
   que já existe na paleta. Continuam claramente mais apagadas que as
   barras de saída em petróleo-claro, que é a distinção que o desenho faz —
   ar neutro entrando, ar tratado saindo. */
.faixa--grafite .fluxo-barra { background: var(--apoio-escuro); }
.faixa--grafite .passo-desenho--saida .fluxo-barra { background: var(--petroleo-claro); }
.faixa--grafite .passo-desenho--colmeia { border-color: var(--apoio-escuro); }
.faixa--grafite .colmeia-barra { background: var(--petroleo-claro); }

/* ========================= BLOCO: O QUE MUDA NO GALPÃO =================== */

/* A classe .cena foi APAGADA em 12/08/2026, junto com a cena de abertura
   fictícia ("Duas da tarde de fevereiro...") que ela vestia. Ela trazia um
   filete lateral de 3px em petróleo: mantida, seria um divisor sem nada
   para dividir. */

/* ---------------------------------------------------------- cartões ------ */

.cartoes {
  display: grid;
  gap: 16px;
}

.cartao {
  padding: 18px;
  border-radius: var(--raio-medio);
  background: var(--branco);
  border-left: 3px solid var(--petroleo);
}

/* ================= COMPARAÇÃO ANTES x DEPOIS ("O que muda") ==============
   Substituiu os três cartões empilhados em 12/08/2026. Cada linha é um
   assunto; dentro dela, duas colunas SEMPRE lado a lado — inclusive no
   celular, onde ficam estreitas. Empilhar no celular mataria a comparação,
   que é o motivo de o bloco existir.

   A cor obedece à regra de significado da paleta, agora por COLUNA:
   esquerda âmbar (hoje, o problema), direita petróleo (com o equipamento,
   a solução). Nenhuma cor nova entrou.

   Contraste conferido: âmbar-escuro sobre âmbar-claro e petróleo sobre
   petróleo-claro passam em texto normal; texto-suave sobre as duas
   superfícies fica acima de 4,5:1.                                        */

.comparacao {
  display: grid;
  gap: 16px;
}

.comparacao-linha {
  padding: 18px;
  border-radius: var(--raio-medio);
  background: var(--branco);
}

.comparacao-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0 0;
}

.comparacao-lado {
  padding: 14px 12px;
  border-radius: var(--raio-pequeno);
}

.comparacao-lado--hoje   { background: var(--ambar-claro); }
.comparacao-lado--depois { background: var(--petroleo-claro); }

.comparacao-rotulo {
  margin: 0 0 8px;
  font-size: var(--fonte-micro);
  font-weight: var(--peso-forte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.comparacao-lado--hoje   .comparacao-rotulo { color: var(--ambar-escuro); }
.comparacao-lado--depois .comparacao-rotulo { color: var(--petroleo); }

/* o número é o que salta: peso extra, entrelinha curta e tamanho de título */
.comparacao-numero {
  margin: 0;
  font-size: var(--fonte-titulo);
  font-weight: var(--peso-extra);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.comparacao-lado--hoje   .comparacao-numero { color: var(--ambar-escuro); }
.comparacao-lado--depois .comparacao-numero { color: var(--petroleo); }

/* "passa dos", "até", "abaixo de": a ressalva anda colada no número, e não
   escondida na legenda — é ela que impede o número de virar promessa */
.comparacao-prefixo {
  display: block;
  font-size: var(--fonte-pequena);
  font-weight: var(--peso-semi);
  letter-spacing: 0;
}

/* linha sem número do lado "hoje": palavra no lugar do algarismo, um degrau
   menor para não fingir que é número */
.comparacao-numero--texto {
  font-size: var(--fonte-grande);
  letter-spacing: -0.01em;
}

/* Variante do prefixo que corre NA MESMA LINHA do número, em vez de ficar
   acima dele. Usada só em "abaixo de 30%", que foi pedido como frase
   única. O número não muda de tamanho: quem encolhe é o prefixo. */
.comparacao-prefixo--inline {
  display: inline;
}

.comparacao-legenda {
  margin: 8px 0 0;
  font-size: var(--fonte-micro);
  line-height: 1.4;
  color: var(--texto-suave);
}

/* o texto explicativo e o acordeão da linha ficam abaixo do par de colunas */
.comparacao-linha .cartao-texto {
  margin-top: 16px;
}

/* --- cartões do bloco do problema: faixa lateral GROSSA em âmbar cheio,
       e título maior, em âmbar escuro ---------------------------------- */
.faixa--ambar .cartao {
  border-left: 6px solid var(--ambar);
}

/* --- marcação de alerta dos três "não é a solução certa" (12/08/2026) ---
   Borda esquerda mais grossa e um sinal de atenção DESENHADO EM CSS —
   triângulo pelas bordas do próprio elemento, barra e ponto pelos
   pseudoelementos. Nenhum ícone, nenhum arquivo externo. aria-hidden no
   HTML: é reforço visual, o leitor de tela já ouve o título.            */

.cartao--alerta {
  border-left-width: 8px;
}

.cartao-cabeca {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cartao-cabeca .cartao-titulo {
  margin-bottom: 0;
}

.cartao-alerta {
  position: relative;
  flex: none;
  width: 0;
  height: 0;
  margin-top: 5px;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 23px solid var(--ambar);
}

/* a caixa de conteúdo tem largura zero e nasce no centro do triângulo:
   por isso o -1,5px centra uma barra de 3px */
.cartao-alerta::before {
  content: "";
  position: absolute;
  left: -1.5px;
  top: 8px;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--branco);
}

.cartao-alerta::after {
  content: "";
  position: absolute;
  left: -1.5px;
  top: 18px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--branco);
}

/* o texto do cartão volta a começar na margem, alinhado com o título */
.cartao--alerta .cartao-texto {
  margin-top: 12px;
}

.faixa--ambar .cartao-titulo {
  font-size: var(--fonte-grande);
  color: var(--ambar-escuro);
}

.faixa--ambar .cartao-acao strong { color: var(--ambar-escuro); }

.cartao-titulo {
  margin: 0 0 10px;
  font-size: var(--fonte-media);
  line-height: 1.3;
  font-weight: var(--peso-forte);
  color: var(--texto);
}

.cartao-texto {
  margin: 0;
  font-size: var(--fonte-base);
  color: var(--texto-suave);
}

/* traço fino separando a explicação da recomendação */
.cartao-acao {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linha-media);
  font-size: var(--fonte-base);
  color: var(--texto);
}

.cartao-acao strong {
  font-weight: var(--peso-forte);
  color: var(--petroleo);
}

/* ================================================= ACORDEÕES ============= */

.acordeao-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  font: inherit;
  font-size: var(--fonte-base);
  font-weight: var(--peso-forte);
  text-align: left;
  color: var(--petroleo);
  background: none;
  border: none;
  cursor: pointer;
}

.acordeao-botao:hover .acordeao-rotulo {
  text-decoration: underline;
}

/* PERGUNTA ABERTA GANHA DESTAQUE (14/08/2026, ordem do Hamilton).
   Como só uma fica aberta por vez, este é o marcador de "você está aqui" —
   e ele precisa se distinguir da cor normal, que já é petróleo.
   Escolhido o petróleo-escuro: é a mesma família da paleta (nenhuma cor
   nova entrou) e é MAIS escuro, então o destaque não custa contraste —
   8,06:1 sobre o branco do bloco, contra 5,47:1 do estado normal.
   O peso sobe junto porque cor sozinha não é sinal acessível: quem não
   distingue os dois tons de petróleo enxerga o negrito e a barra. */
.acordeao[data-aberto="true"] .acordeao-rotulo {
  color: var(--petroleo-escuro);
  font-weight: var(--peso-extra);
}

/* barra vertical à esquerda: o terceiro sinal, independente de cor e de
   peso. Só na caixa das perguntas frequentes — a linha da tabela de
   comparação tem desenho próprio e não leva barra. */
.acordeao--caixa[data-aberto="true"] {
  border-left: 3px solid var(--petroleo-escuro);
}

.acordeao-botao:focus-visible {
  outline: 2px solid var(--petroleo);
  outline-offset: 4px;
  border-radius: var(--raio-pequeno);
}

/* pressionado: o rótulo assume o tom escuro do petróleo */
.acordeao-botao:active .acordeao-rotulo {
  color: var(--petroleo-escuro);
}

/* variação usada dentro dos cartões: "Entender melhor" */
.acordeao-botao--linha {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linha-media);
}

/* variação em caixa: ficha técnica e FAQ */
.acordeao--caixa {
  background: var(--branco);
  border: 1px solid var(--linha-media);
  border-radius: var(--raio-medio);
}

.faixa--claro .acordeao--caixa { background: var(--cinza-fundo); }

.acordeao--caixa .acordeao-botao {
  padding: 20px;
  color: var(--texto);
  font-size: var(--fonte-base);
}

.acordeao--caixa .acordeao-painel > .acordeao-conteudo {
  padding: 0 20px;
}

.acordeao--caixa[data-aberto="true"] .acordeao-conteudo {
  padding-bottom: 4px;
}

/* seta em petróleo que gira meia volta ao abrir */
.acordeao-sinal {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.acordeao-sinal::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--petroleo);
  border-bottom: 2px solid var(--petroleo);
  transform: rotate(45deg);
  transition: transform var(--t-media) var(--curva);
}

.acordeao[data-aberto="true"] .acordeao-sinal::before {
  transform: rotate(-135deg);
}

/* a altura anima de 0fr para 1fr; o conteúdo fica escondido por overflow */
.acordeao-painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-media) var(--curva);
}

.acordeao[data-aberto="true"] .acordeao-painel {
  grid-template-rows: 1fr;
}

.acordeao-conteudo {
  overflow: hidden;
}

.acordeao-conteudo p {
  margin: 14px 0 0;
  font-size: var(--fonte-base);
  color: var(--texto-suave);
}

/* ============================ BLOCO: O QUE ELE NÃO É ===================== */

/* moldura externa: segura o véu da borda direita no celular, que avisa que
   há mais coluna e some quando a rolagem chega ao fim (script.js) */
.tabela-moldura {
  position: relative;
}

.tabela-moldura::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 36px;
  border-radius: 0 var(--raio-medio) var(--raio-medio) 0;
  background: linear-gradient(to left, var(--branco), transparent);
  pointer-events: none;
  transition: opacity var(--t-rapida) var(--curva);
}

.tabela-moldura--fim::after {
  opacity: 0;
}

/* ---- seta de "tem mais para o lado" ------------------------------------
   Substituiu, em 12/08/2026, a frase "role para o lado para ver todas as
   colunas" que ninguém lia. Aviso que APARECE sem ocupar linha: mora na
   borda direita, por cima do esmaecimento, e cutuca de leve para o lado
   de propósito — movimento é o que o olho pega sem ler.
   Some junto com o esmaecimento quando a rolagem chega ao fim, pela mesma
   classe .tabela-moldura--fim que o script já liga.
   z-index: sem ele o esmaecimento (um ::after da moldura) pintaria por
   cima da seta, porque pseudoelemento vem depois dos filhos.
   pointer-events: none para não roubar o toque de quem arrasta a tabela. */

.tabela-seta {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 2;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--grafite);
  background: color-mix(in srgb, var(--grafite) 78%, transparent);
  transition: opacity var(--t-rapida) var(--curva);
  animation: tabela-seta-cutuca 1.8s var(--curva) infinite;
}

.tabela-seta::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--branco);
  border-bottom: 2px solid var(--branco);
  transform: rotate(-45deg);
}

/* deslocamento curto: é um aceno, não um sacode */
@keyframes tabela-seta-cutuca {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

.tabela-moldura--fim .tabela-seta {
  opacity: 0;
}

.tabela-rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--linha-media);
  border-radius: var(--raio-medio);
  background: var(--branco);
}

/* a área de rolagem recebe foco (tabindex no HTML) para o teclado poder
   rolar a tabela com as setas */
.tabela-rolagem:focus-visible {
  outline: 2px solid var(--petroleo);
  outline-offset: 2px;
}

.tabela {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--fonte-pequena);
}

/* A regra .tabela-legenda foi APAGADA em 12/08/2026, junto com o <caption>
   que ela vestia. Ela trazia uma borda inferior: mantida, seria um filete
   atravessando o topo da tabela sem nada acima dele. A descrição da tabela
   para leitor de tela não se perdeu — vive no aria-label da área de
   rolagem, no index.html. */

.tabela th,
.tabela td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linha-clara);
}

.tabela thead th {
  font-size: var(--fonte-pequena);
  font-weight: var(--peso-forte);
  color: var(--texto);
  border-bottom: 2px solid var(--linha-forte);
}

.tabela tbody th {
  font-weight: var(--peso-semi);
  color: var(--texto);
  width: 34%;
}

.tabela td {
  color: var(--texto-suave);
}

.tabela tbody tr:last-child th,
.tabela tbody tr:last-child td {
  border-bottom: none;
}

/* A coluna do nosso equipamento é a única com SUPERFÍCIE pintada: fundo
   petróleo-claro na coluna inteira, cabeçalho petróleo cheio com texto
   branco, mais a moldura. As outras duas colunas ficam brancas, com
   cabeçalho cinza. */
.tabela thead th {
  background: var(--cinza-fundo);
}

.tabela .col-destaque {
  background: var(--petroleo-claro);
  border-left: 2px solid var(--petroleo);
  border-right: 2px solid var(--petroleo);
  color: var(--texto);
  font-weight: var(--peso-semi);
}

.tabela thead .col-destaque {
  background: var(--petroleo);
  border-top: 3px solid var(--petroleo);
  border-bottom-color: var(--petroleo);
  color: var(--branco);
}

.tabela tbody tr:last-child .col-destaque {
  border-bottom: 2px solid var(--petroleo);
}

/* Só a resposta SECA recebe cor, e agora só de TEXTO: pintar o fundo da
   célula por cima brigaria com a cor da coluna. "Sim" é solução, "Não" é
   ausência. Resposta com explicação segue neutra de propósito. */
.tabela .sim {
  color: var(--petroleo);
  font-weight: var(--peso-forte);
}

.tabela .nao {
  color: var(--texto-suave);
}

/* =========================== BLOCO: ONDE ELE TRABALHA ==================== */

.usos {
  display: grid;
  gap: 14px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

/* borda esquerda alternando petróleo, âmbar e azul-aço */
.uso {
  padding: 16px 18px;
  background: var(--cinza-fundo);
  border-radius: var(--raio-medio);
  border-left: 3px solid var(--petroleo);
}

.uso:nth-child(3n+2) { border-left-color: var(--ambar); }
.uso:nth-child(3n+3) { border-left-color: var(--azul-aco); }

.faixa--cinza .uso { background: var(--branco); }

.uso-titulo {
  margin: 0 0 6px;
  font-size: var(--fonte-base);
  font-weight: var(--peso-forte);
  color: var(--texto);
}

.uso-texto {
  margin: 0;
  font-size: var(--fonte-pequena);
  color: var(--texto-suave);
}

/* em bloco escuro os cartões ficam levemente mais claros que o fundo,
   nunca brancos: branco sobre grafite viraria mancha */
.faixa--grafite .uso {
  background: var(--grafite-claro);
}

.faixa--grafite .uso-titulo { color: var(--petroleo-claro); }
.faixa--grafite .uso-texto  { color: var(--sobre-grafite-apoio); }

/* ==================== BLOCO: ONDE ELE JÁ ESTÁ INSTALADO ================== */
/* Era "Quem já usa", com carrossel de nomes de cliente. Virou galeria de
   foto de instalação real (11/08/2026). O CSS do carrossel continua logo
   abaixo, intocado, porque o HTML dele está guardado em comentário e pode
   voltar.                                                                  */

/* ------------------------------------------- galeria de fotos (carrossel) -
   Eram as nove fotos empilhadas numa grade, e o bloco ficava longo demais no
   celular. Virou carrossel de uma foto por vez em 12/08/2026.

   QUEM ROLA É O NAVEGADOR: a trilha é uma faixa com overflow-x e
   scroll-snap. O arrasto do dedo funciona de graça, o teclado também (a
   trilha recebe foco), e sem JavaScript a faixa continua arrastável — só
   somem as setas e as bolinhas. O script mexe em rolagem, nunca em posição.

   A altura de cada quadro é FIXA em 1:1 e a foto entra com object-fit:
   cover. Isso resolve duas coisas de uma vez: as fotos vieram em orientações
   diferentes (retrato de celular e paisagem) e ficariam desalinhadas; e o
   quadro reserva o espaço ANTES de a foto chegar, então a página não pula
   enquanto as 9 carregam.

   --legenda-altura: espaço RESERVADO para a legenda (duas linhas). Ele faz
   duas coisas: mantém todos os slides da mesma altura, mesmo com legendas de
   tamanhos diferentes, e dá às setas um ponto de apoio exato para ficarem no
   meio da FOTO, e não no meio de foto+legenda. Mexer neste valor desalinha
   as setas.                                                                */

.galeria {
  --legenda-altura: 58px;
  margin: 32px 0 0;
}

/* o palco é a referência de posição das setas e o limite de largura da foto:
   no desktop a coluna do bloco é larga demais para uma foto quadrada */
.galeria-palco {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}

.galeria-trilha {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain; /* arrastar a foto não puxa a página */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* a posição é dada pelas bolinhas */
}

.galeria-trilha::-webkit-scrollbar {
  display: none;
}

.galeria-trilha:focus-visible {
  outline: 2px solid var(--petroleo);
  outline-offset: 3px;
  border-radius: var(--raio-medio);
}

.galeria-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;       /* o dedo não passa duas fotos de uma vez */
}

.galeria-figura {
  margin: 0;
}

.galeria-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--linha-clara);   /* cor de espera, no lugar do branco cru */
  border-radius: var(--raio-medio);
}

/* a legenda vive DENTRO do slide: troca junto com a foto sem depender de
   script, e nunca fica dessincronizada */
.galeria-legenda {
  margin: 0;
  padding-top: 10px;
  min-height: var(--legenda-altura);
  font-size: var(--fonte-pequena);
  color: var(--texto-suave);
}

/* ---- setas sobre a foto ------------------------------------------------
   Fundo grafite com véu, pelo mesmo color-mix do herói: se o navegador não
   conhecer color-mix, a linha cai e sobra o grafite sólido da linha de cima
   — a seta continua legível, só perde a transparência.                    */

.galeria-seta {
  position: absolute;
  top: calc((100% - var(--legenda-altura)) / 2);
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--grafite);
  background: color-mix(in srgb, var(--grafite) 74%, transparent);
  transition: background-color var(--t-rapida) var(--curva);
}

.galeria-seta:hover {
  background: var(--grafite);
}

.galeria-seta:focus-visible {
  outline: 2px solid var(--petroleo);
  outline-offset: 3px;
}

.galeria-seta--anterior { left: 10px; }
.galeria-seta--proxima  { right: 10px; }

/* mesma seta desenhada em CSS dos acordeões, girada para cada lado */
.galeria-seta-sinal {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--branco);
  border-bottom: 2px solid var(--branco);
}

.galeria-seta--anterior .galeria-seta-sinal {
  transform: rotate(135deg);
  margin-left: 4px;
}

.galeria-seta--proxima .galeria-seta-sinal {
  transform: rotate(-45deg);
  margin-right: 4px;
}

/* ---- bolinhas de posição ----------------------------------------------- */

.galeria-pontos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

/* o botão tem 26px para o dedo acertar; a bolinha visível tem 9px */
.galeria-ponto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.galeria-ponto::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--linha-forte);
  transition: background-color var(--t-rapida) var(--curva);
}

.galeria-ponto[aria-current="true"]::before {
  width: 11px;
  height: 11px;
  background: var(--petroleo);
}

.galeria-ponto:focus-visible {
  outline: 2px solid var(--petroleo);
  outline-offset: 0;
  border-radius: 50%;
}

/* sem JavaScript não há quem responda ao clique: setas e bolinhas somem, e
   sobra a faixa arrastável com as nove legendas no lugar */
html:not(.js) .galeria-seta,
html:not(.js) .galeria-pontos {
  display: none;
}

/* auto-fit: se um indicador pendente sumir (interruptor desligado), o que
   sobra ocupa a largura inteira sem deixar coluna vazia */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

/* superfície grafite com número em petróleo-claro */
.indicador {
  padding: 24px 16px;
  text-align: center;
  background: var(--grafite);
  border-radius: var(--raio-medio);
}

.indicador-valor {
  display: block;
  font-size: var(--fonte-titulo);
  font-weight: var(--peso-extra);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; /* a contagem não dança */
  color: var(--petroleo-claro);
}

.indicador-rotulo {
  display: block;
  margin-top: 8px;
  font-size: var(--fonte-pequena);
  color: var(--sobre-grafite-apoio);
}

.moldura {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  margin-top: 16px;
  padding: 20px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-medio);
  text-align: center;
  font-size: var(--fonte-pequena);
  color: var(--texto-suave);
}

.empresas-rotulo {
  margin: 32px 0 0;
  font-size: var(--fonte-micro);
  font-weight: var(--peso-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ------------------------------------------ carrossel de empresas -------- */
/* CSS puro. A trilha tem DUAS cópias da lista e desliza exatamente -50%,
   ou seja, o comprimento de uma cópia — ao terminar, o quadro seguinte é
   idêntico ao inicial e o loop não dá salto.                               */

.carrossel {
  /* o esmaecimento usa a cor de fundo do próprio bloco (faixa cinza);
     se o carrossel mudar de faixa, trocar só esta variável */
  --fundo-carrossel: var(--cinza-fundo);
  --largura-esmaecimento: 48px;
  position: relative;
  overflow: hidden;
  padding: 4px 0;
}

/* véus nas duas pontas: os nomes surgem e somem suaves, sem corte seco */
.carrossel::before,
.carrossel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--largura-esmaecimento);
  z-index: 1;
  pointer-events: none;
}

.carrossel::before {
  left: 0;
  background: linear-gradient(to right, var(--fundo-carrossel), transparent);
}

.carrossel::after {
  right: 0;
  background: linear-gradient(to left, var(--fundo-carrossel), transparent);
}

.carrossel-trilha {
  display: flex;
  width: max-content;
  /* uma volta completa (a trilha anda -50%, o comprimento de uma cópia)
     em ~45 segundos */
  animation: desliza-empresas 45s linear infinite;
}

/* pausa com o mouse em cima; a classe .carrossel--tocado é posta pelo
   script enquanto o dedo está tocando */
.carrossel:hover .carrossel-trilha,
.carrossel--tocado .carrossel-trilha {
  animation-play-state: paused;
}

.carrossel-lista {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  /* meia folga de cada lado: somadas, reproduzem o mesmo gap na emenda */
  padding: 0 9px;
  list-style: none;
}

.empresa {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 42px; /* todas as etiquetas com a MESMA altura */
  padding: 9px 20px;
  font-size: var(--fonte-pequena);
  font-weight: var(--peso-forte);
  white-space: nowrap;
  color: var(--grafite);
  background: var(--branco);
  /* borda neutra: petróleo significa solução/resultado, e nome de
     empresa é elemento neutro — regra de significado limpa */
  border: 2px solid var(--linha-forte);
  border-radius: var(--raio-pilula);
}

@keyframes desliza-empresas {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ================================== BLOCO: FICHA TÉCNICA ================= */

.ficha {
  margin: 14px 0 0;
}

.ficha-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha-clara);
}

.ficha-linha:last-child { border-bottom: none; }

.ficha dt {
  font-size: var(--fonte-pequena);
  color: var(--texto-suave);
}

.ficha dd {
  margin: 0;
  font-size: var(--fonte-base);
  font-weight: var(--peso-forte);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

/* ---- caminho para a ficha completa ------------------------------------- */

/* sem borda própria: o divisor vem da última linha visível da ficha, o
   que evita linha dupla quando as pendências estão desligadas */
.ficha-acao {
  margin: 18px 0 0;
  font-size: var(--fonte-pequena);
}

.ficha-acao-link {
  font-weight: var(--peso-forte);
  color: var(--petroleo);
  text-decoration: none;
  transition: color var(--t-rapida) var(--curva);
}

.ficha-acao-link:hover {
  text-decoration: underline;
}

.ficha-acao-link:focus-visible {
  outline: 2px solid var(--petroleo);
  outline-offset: 3px;
  border-radius: var(--raio-pequeno);
}

.ficha-acao-link:active {
  color: var(--petroleo-escuro);
}

/* ========================= BLOCO: DE ONDE VEM ESSE NÚMERO ================
   Metodologia, criado em 13/08/2026. É nota técnica, não argumento de
   venda: título um degrau acima do texto em vez dos 32px dos outros
   blocos, e corpo no tamanho de apoio. Nenhuma cor nova — texto e
   texto-suave sobre o branco da faixa clara, os mesmos de toda a página.
   Contraste conferido: texto sobre branco 15,0:1; texto-suave sobre
   branco 5,5:1, acima do mínimo de 4,5 para texto de tamanho normal.   */

.metodologia-titulo {
  margin: 0 0 16px;
  font-size: var(--fonte-media);
  font-weight: var(--peso-forte);
  line-height: 1.3;
  color: var(--texto);
}

.metodologia-linha {
  margin: 0 0 12px;
  max-width: 70ch;
  font-size: var(--fonte-pequena);
  line-height: 1.65;
  color: var(--texto-suave);
}

/* a citação da fonte fica mais discreta que o corpo, e separada por um
   filete fino — é crédito, não conteúdo */
.metodologia-fonte {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--linha-clara);
  font-size: var(--fonte-micro);
  color: var(--texto-suave);
}

/* caminho de volta para a calculadora (13/08/2026). Link, não botão: o bloco
   é nota técnica e o fim da página não é lugar de chamada de venda nova.
   Petróleo sublinhado — a mesma cor de link do resto da página sobre fundo
   claro. Contraste conferido: 5,5:1 sobre o branco da faixa, acima do mínimo
   de 4,5 para texto de tamanho normal. Alvo de toque garantido pelo padding
   vertical, que leva a área clicável a 44px mesmo no tamanho micro. */
.metodologia-volta {
  margin: 14px 0 0;
}

.metodologia-volta-link {
  display: inline-block;
  padding: 12px 0;
  font-size: var(--fonte-pequena);
  font-weight: var(--peso-semi);
  color: var(--petroleo);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.metodologia-volta-link:hover {
  color: var(--petroleo-escuro);
  text-decoration: none;
}

.metodologia-volta-link:focus-visible {
  outline: 2px solid var(--petroleo);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
}

/* ========================================================= FAQ =========== */

.faq {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}

/* ===================================== APARECIMENTO AO ROLAR ============= */
/* Só esconde quando o JavaScript está ativo (classe .js no <html>). Sem JS,
   nada some. A seção só ESMAECE (sem deslocar), para o corte entre blocos
   não abrir faixa branca durante a entrada; quem desliza são os elementos
   internos, em sequência curta de cima para baixo.                        */

.js .revelar {
  opacity: 0;
  transition: opacity var(--t-media) var(--curva);
}

.js .revelar.revelado {
  opacity: 1;
}

/* ritmo escalonado: poucos centésimos entre um elemento e o seguinte */
.js .revelar .faixa-interna > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-media) var(--curva),
              transform var(--t-media) var(--curva);
}

.js .revelar.revelado .faixa-interna > * {
  opacity: 1;
  transform: none;
}

.js .revelar.revelado .faixa-interna > *:nth-child(2)    { transition-delay: .07s; }
.js .revelar.revelado .faixa-interna > *:nth-child(3)    { transition-delay: .14s; }
.js .revelar.revelado .faixa-interna > *:nth-child(4)    { transition-delay: .21s; }
.js .revelar.revelado .faixa-interna > *:nth-child(n+5)  { transition-delay: .28s; }

/* ============================================ RODAPÉ (fundo grafite) ===== */

.rodape {
  background: var(--grafite);
  color: var(--branco);
  border-top: 1px solid var(--grafite-claro);
}

/* mesma largura do cabeçalho — bordas alinhadas no desktop.
   CENTRALIZADO em 14/08/2026, por ordem do Hamilton: o rodapé inteiro passou
   a alinhar pelo centro. Uma regra só, no contêiner, porque todos os filhos
   herdam o text-align — não há alinhamento próprio em nenhum deles, então
   não existe segundo lugar para lembrar se um dia isso mudar. */
.rodape-interno {
  max-width: var(--largura-larga);
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.rodape-marca {
  margin: 0;
  font-size: var(--fonte-base);
  font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
}

.rodape-linha {
  margin: 6px 0 0;
  font-size: var(--fonte-pequena);
  color: var(--sobre-grafite-apoio);
}

/* ---- identificação cadastral de quem opera o canal --------------------
   Dado de rodapé, não argumento de venda: menor degrau da escala, uma
   linha por item e um respiro antes, para não competir com a marca.
   O <address> vem itálico de fábrica no navegador; aqui é texto normal.
   Contraste: --sobre-grafite-apoio sobre grafite (~8,5:1).              */
.rodape-empresa {
  margin: 18px 0 0;
  font-style: normal;
  font-size: var(--fonte-micro);
  line-height: 1.6;
  color: var(--sobre-grafite-apoio);
}

/* cada item em sua linha; no celular estreito a razão social quebra
   sozinha, sem estourar a coluna */
.rodape-empresa-linha {
  display: block;
}

.rodape-empresa-nota {
  margin: 10px 0 0;
  font-size: var(--fonte-micro);
  color: var(--sobre-grafite-apoio);
}

/* ============================ PENDÊNCIA CONTROLADA ======================= */
/* Marcação ÚNICA de dado ainda não confirmado pela MWM: itálico, tom suave
   e um marcador circular vazado desenhado em CSS. Sempre com a palavra
   padrão "a confirmar". Os elementos [data-pendencia] somem inteiros
   quando MOSTRAR_PENDENCIAS = false no script.js; as ressalvas de texto
   corrido ficam sempre visíveis.                                          */

.pendencia,
.ficha dd.pendencia {
  font-weight: normal; /* único reset fora dos três pesos do sistema */
  font-style: italic;
  color: var(--texto-suave);
}

.pendencia::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  vertical-align: 1px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

/* sobre o grafite o tom suave reprova no contraste: usa o tom claro
   reservado, já conferido */
.faixa--grafite .pendencia,
.indicador .pendencia {
  color: var(--apoio-escuro);
}

/* a pendência no cartão de indicador não finge ser número gigante */
.indicador-valor.pendencia {
  font-size: var(--fonte-media);
  letter-spacing: 0;
  line-height: 2;
}

/* selo curto sob resposta de FAQ que ainda espera número */
.acordeao-conteudo .pendencia--nota {
  margin: 10px 0 0;
  font-size: var(--fonte-micro);
}

/* ========================== BARRA DE RESULTADO (só celular) ============== */
/* Fixa no pé da tela, baixa, entra deslizando de baixo. Mostrada pelo
   script apenas quando há resultado e nenhuma calculadora à vista.        */

.barra-resultado {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--grafite);
  border-top: 1px solid var(--sobre-grafite-linha);
  animation: barra-entra var(--t-media) var(--curva);
}

@keyframes barra-entra {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

.barra-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin: 0;
  font-size: var(--fonte-micro);
  color: var(--sobre-grafite-apoio);
}

.barra-info strong {
  font-size: var(--fonte-base);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
  color: var(--petroleo-claro);
}

/* compacta a herança do .botao para caber numa barra baixa */
.barra-botao {
  flex: none;
  width: auto;
  margin: 0;
  padding: 10px 16px;
  font-size: var(--fonte-pequena);
}

/* no desktop a barra não existe */
@media (min-width: 700px) {
  .barra-resultado {
    display: none;
  }
}

/* ====================================== MENOS MOVIMENTO ================== */
/* Com a preferência do sistema ativa: nada se move e todo conteúdo aparece
   de uma vez.                                                              */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .revelar,
  .js .revelar.revelado,
  .js .revelar .faixa-interna > *,
  .js .revelar.revelado .faixa-interna > * {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }

  .barra-resultado {
    animation: none;
  }

  .acordeao-painel,
  .acordeao-sinal::before,
  .botao,
  .campo {
    transition: none;
  }

  /* nada entra deslizando nem desce ao pressionar */
  .resultado-dados {
    animation: none;
  }

  .botao:active {
    transform: none;
  }

  .carrossel {
    overflow: visible;
    padding: 4px 20px;
  }

  /* lista parada e embrulhada: os véus das pontas saem de cena */
  .carrossel::before,
  .carrossel::after {
    display: none;
  }

  .carrossel-trilha {
    width: auto;
    max-width: 640px;
    margin: 0 auto;
    animation: none;
  }

  .carrossel-lista {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
  }

  .carrossel-lista--copia {
    display: none;
  }

  /* o carrossel da galeria continua funcionando: o que sai é o deslizar.
     A troca de foto passa a ser instantânea, pelas setas, pelas bolinhas
     e pelo dedo. O script usa behavior 'auto' pela mesma preferência. */
  .galeria-trilha {
    scroll-behavior: auto;
  }

  .galeria-seta,
  .galeria-ponto::before {
    transition: none;
  }

  /* a seta da tabela para de cutucar, mas CONTINUA VISÍVEL: ela é o aviso
     de que há mais coluna, e sem movimento o aviso ainda precisa existir */
  .tabela-seta {
    animation: none;
  }
}

/* ================================================================ desktop */

@media (min-width: 700px) {
  :root {
    --largura-estreita: 700px;
    --largura-media:    840px;
    --largura-larga:    1020px;

    --fonte-grande:  24px;
    --fonte-titulo:  46px;
    --fonte-gigante: 84px;
  }

  .cabecalho-interno {
    padding: 12px 32px;
  }

  .cabecalho-atalhos {
    display: flex;
    gap: 20px;
  }

  .heroi {
    padding: 48px 32px 56px;
  }

  /* ---- título do herói em 41px no desktop ----------------------------
     Aos 46px da escala, a primeira frase ("Quantos graus caem no seu
     galpão?") ocupa 16,19 em, ou seja 745px — e a coluna do herói tem 700px.
     O título quebrava em TRÊS linhas visuais, quando o desenho pede duas.
     A 41px ela ocupa 664px e cabe, com 36px de sobra.
     EXCEÇÃO DECLARADA À ESCALA, igual à do celular: 41px não é degrau da
     escala do desktop (12, 14, 17, 19, 24, 46, 84). Está solto aqui de
     propósito, preso a UM seletor. Redefinir --fonte-titulo resolveria a
     linha e encolheria junto os títulos de bloco, o preço, os números da
     comparação e os indicadores.
     Aqui não há risco de contraste como no celular: 41px passa folgado do
     corte de 18,66px que mantém o âmbar de "graus" aprovado.            */
  /* 41px -> 32px em 14/08/2026: o título mudou de texto e ficou 30% mais
     largo ("Descubra quantos GRAUS caem no seu galpão." contra "Quantos
     graus caem no seu galpão?"). A 41px ele mede ~863px contra 700px de
     caixa: quebrava em duas linhas, e o Hamilton quer uma só.
     A 32px, com o aperto de -0.03em, volta a ~661px — praticamente a mesma
     folga de 36px que o desenho original tinha. Encolher só até 34px não
     resolveria: ainda estouraria a caixa.
     A segunda linha ("Calculamos na hora.") encolhe junto, como ele pediu,
     porque as duas vivem no mesmo <h1> e no mesmo font-size.
     Continua acima do corte de contraste de 18,66px que mantém o âmbar de
     GRAUS aprovado, com folga larga. */
  .heroi .titulo { font-size: 32px; letter-spacing: -0.03em; }

  .heroi .tarja { letter-spacing: 0.07em; }

  /* no desktop sobra altura: o aperto do celular pode afrouxar */
  .heroi .titulo    { margin-bottom: 16px; }
  .heroi .subtitulo { margin-bottom: 24px; }
  .heroi-marcas     { margin-bottom: 28px; }

  /* no desktop o botão não precisa da largura toda da coluna */
  .heroi-botao {
    display: inline-block;
    width: auto;
    min-width: 320px;
  }

  .heroi-secundario { text-align: left; }

  .topo {
    padding: 0 32px 88px;
  }

  /* o corte acompanha o padding lateral maior do desktop */
  .topo > .corte {
    width: calc(100% + 64px);
    margin: 0 -32px 40px;
  }

  .titulo    { font-size: var(--fonte-titulo); margin-bottom: 16px; }
  .subtitulo { font-size: var(--fonte-media); margin-bottom: 28px; }

  .topo-titulo    { margin-bottom: 12px; }
  .topo-subtitulo { margin-bottom: 28px; }

  .calculadora { padding: 28px; }

  .campo { padding: 14px 16px; }

  .campo-grupo--select::after { bottom: 20px; }

  .resultado-dados { --pad-cartao: 24px; padding-top: 26px; }

  .destaque--queda .destaque-numero { font-size: var(--fonte-gigante); }
  .destaque--qtd   .destaque-numero { font-size: var(--fonte-titulo); }

  /* cidade e área lado a lado quando há espaço */
  .campos {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

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

  /* a comparação respira mais e o número cresce junto com a escala */
  .comparacao-linha { padding: 24px; }

  .comparacao-par {
    gap: 16px;
    margin-top: 18px;
  }

  .comparacao-lado { padding: 20px 18px; }

  /* o botão de chamada não precisa da largura toda da coluna */
  .acao-bloco { text-align: center; }

  .botao--acao {
    display: inline-block;
    width: auto;
    min-width: 340px;
  }

  /* a foto ganha presença: mais larga que a coluna de texto do topo */
  .topo .produto {
    max-width: var(--largura-media);
  }

  .produto { padding: 28px; }

  .produto-extras { gap: 16px; }

  .corte { height: 70px; }

  /* no desktop a tabela cabe inteira: nem véu de rolagem, nem seta */
  .tabela-moldura::after { display: none; }
  .tabela-seta { display: none; }

  /* mesmo deslocamento de uma casa do celular (ver comentário lá em cima) */
  .faixa { --respiro: 88px; }
  main > .faixa:nth-of-type(n+6) { --respiro: 104px; }
  main > .faixa:nth-of-type(n+9) { --respiro: 120px; }

  .faixa-interna {
    padding-left: 32px;
    padding-right: 32px;
  }

  .faixa-interna--antes-carrossel { padding-bottom: 32px; }
  .faixa-interna--continua        { padding-top: 16px; }

  .faixa-titulo    { font-size: var(--fonte-titulo); }
  .faixa-subtitulo { font-size: var(--fonte-media); }

  .faixa--ambar .cartao-titulo { font-size: var(--fonte-grande); }

  /* os três passos ficam lado a lado */
  .passos {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  /* os três cartões permanecem empilhados, um embaixo do outro */
  .cartao { padding: 24px; }

  /* na largura larga, a grade de aplicações abre em mais colunas */
  .usos {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }

  .indicador-valor { font-size: var(--fonte-titulo); }

  /* esmaecimento mais largo quando há tela sobrando */
  .carrossel { --largura-esmaecimento: 120px; }

  .rodape-interno {
    padding: 48px 32px;
  }
}

/* ============================================= SÓ CELULAR (12/08/2026) ====
   Bloco de ajustes de LEITURA NO CELULAR, pedidos um a um. Está isolado
   num @media (max-width: 699px) de propósito: nada aqui pode alcançar o
   desktop, que ficou exatamente como estava.

   A técnica das linhas únicas é sempre a mesma:
     font-size: min(<tamanho da escala>, <fração da largura da tela>)
   O min() faz a fonte encolher junto com a tela, então a linha CABE em
   qualquer largura em vez de caber só na que foi testada. Acima de certa
   largura o valor da escala volta a ser o menor dos dois e manda — ou
   seja, em celular largo o texto já está no tamanho normal.

   O white-space: nowrap só entra a partir de 360px. Abaixo disso o texto
   volta a quebrar em duas linhas: uma linha só que não cabe vira rolagem
   horizontal na página inteira, que é defeito pior do que a segunda linha.

   As frações foram calculadas com margem para a fonte do sistema ser mais
   larga que a medida (o Android e o iOS não usam a mesma). Preferi sobrar
   um pouco de espaço a arriscar estouro.                                 */

@media (max-width: 699px) {

  /* ---- o título do herói cai para 24px no celular ---------------------
     A 32px a primeira frase ("Seu galpão passa dos 35 graus?") precisa de
     cerca de 440px e não cabia numa linha em nenhum celular: o <br> que
     separa a pergunta da resposta garantia o PONTO da quebra, mas a
     pergunta ainda ocupava duas linhas visuais. A 24px ela pede ~330px e
     cabe em tela de 380px.

     CONTRASTE — o detalhe que quase passa batido: o título é branco sobre
     o grafite (bem acima de qualquer mínimo), mas dentro dele mora o
     "35 graus" em âmbar, que tem 3,18:1. Esse valor só é aprovado na
     regra de TEXTO GRANDE, e o corte para texto grande em negrito é
     18,66px. A 24px em peso 700 o número continua do lado certo do corte,
     com folga. Abaixo de 18,66px ele REPROVARIA — quem pensar em encolher
     mais este título tem de trocar a cor do número antes.

     A FRAÇÃO CAIU DE 6,6vw PARA 5,1vw EM 13/08/2026, quando o título passou
     a ser "Quantos graus caem no seu galpão? / A gente calcula na hora."
     Medido com a fonte do sistema, a primeira frase saltou de 12,60 para
     16,19 em — 29% mais longa. Na fração antiga ela não cabia em uma linha
     em celular nenhum, e o título viraria três linhas visuais em vez das
     duas pretendidas. O tamanho é o preço de a frase ser maior:

       tela 320px -> 16,3px   tela 390px -> 19,9px
       tela 360px -> 18,4px   tela 412px -> 21,0px
       tela 380px -> 19,4px   tela 430px -> 21,9px   (teto: 32px da escala)

     A fração guarda ~7% de folga sobre o limite medido, porque a medição
     saiu na Segoe UI e o celular do visitante desenha em Roboto ou SF.

     ██ O PISO DE 19px NÃO É ENFEITE ██
     Sem ele, a fração de 5,1vw levaria o título a 16,3px numa tela de
     320px — ABAIXO dos 18,66px que separam texto grande de texto normal no
     WCAG. E o "graus"/"?" em âmbar tem 3,18:1, um valor que SÓ é aprovado
     na regra de texto grande. Ou seja: encolher mais reprovaria o contraste
     do próprio elemento que a marca usa como destaque.
     O aviso para não encolher já estava escrito aqui desde 12/08/2026, e
     foi ele que pegou o problema quando o título cresceu em 13/08.
     O preço do piso é que, abaixo de ~350px, a primeira frase volta a
     ocupar duas linhas visuais. Trocar layout por acessibilidade é a
     escolha certa; o contrário não é.

     EXCEÇÃO DECLARADA À ESCALA TIPOGRÁFICA: os valores acima não são
     degraus da escala (12, 14, 17, 19, 22, 32, 68) — o piso, sim, é o
     degrau 19px. A alternativa seria redefinir --fonte-titulo dentro deste
     @media, mas essa variável também veste os títulos de bloco, o preço,
     os números da comparação e os indicadores: encolheria meia página para
     resolver uma linha.                                                  */
  /* AUMENTADO EM 14/08/2026, por ordem do Hamilton: "headline mais chamativa,
     mas não muito grande", SÓ no celular. O desktop não é tocado por isto.

     A fração subiu de 5,1vw para 6,15vw e o teto caiu de 32px para 26px.
     O teto baixou de propósito: a 6,15vw uma tela de 699px (o limite deste
     @media) pediria 43px, e aí o título comeria a primeira dobra inteira.

     ██ MEDIDO NO CHROME, não estimado ██ Renderizando a página dentro de um
     quadro de largura exata (o Chrome no Windows tem largura mínima de
     janela e não faz viewport de 360px por --window-size):

       tela    antes         agora        linhas
       360px   19,0px        22,1px       3  (era 3)
       390px   19,9px        24,0px       3  (era 3)
       430px   21,9px        26,0px       3  (era 3)

     A CONTAGEM DE LINHAS NÃO MUDOU EM NENHUMA DAS TRÊS — é isso que faz o
     aumento ser seguro. Medido também o degrau seguinte: a 26px numa tela
     de 360px o título vira QUATRO linhas. Por isso o teto é 26 e não 28.

     ██ O PISO DE 19px CONTINUA SENDO O QUE ELE ERA ██
     Nada aqui encolhe o título, então o âmbar de GRAUS segue do lado certo
     do corte de 18,66px do WCAG para texto grande — que é o único lugar
     onde os 3,18:1 dele são aprovados. Subir tamanho nunca ameaça esse
     limite; quem um dia pensar em DESCER tem de trocar a cor antes. */
  .heroi .titulo {
    font-size: max(19px, min(26px, 6.15vw));
  }

  /* ---- fecho que precisa caber em uma linha --------------------------
     Só a linha da fábrica ("A fábrica fica em São José do Rio Preto - SP")
     usa isto; os outros fechos da página continuam nos 17px da escala.
     Medido: 19,23 em. A 17px ela ocupa 327px, e sobra tela para isso a
     partir de ~386px — daí a fração, que só entra abaixo disso.        */
  .faixa-fecho--uma-linha {
    font-size: min(var(--fonte-base), 4.4vw);
  }

  /* ---- título de bloco que precisa caber em uma linha -----------------
     Modificador, não regra geral: só o título do FAQ ("Perguntas que
     sempre fazem") usa isto. Os outros títulos de bloco continuam nos
     32px da escala e quebram à vontade — mexer em .faixa-titulo inteiro
     encolheria a página toda para resolver uma linha.
     A 32px esta frase pede ~395px e não cabe em celular nenhum; a fração
     de tela a põe em ~24px numa tela de 380px. Cor intocada.           */
  .faixa-titulo--uma-linha {
    font-size: min(var(--fonte-titulo), 6.4vw);
  }

  /* ---- 1c e 2: os três marcadores do herói, em uma linha e centrados -- */
  /* ~9px em tela de 380px. Contraste intocado: --sobre-grafite-apoio sobre
     o grafite dá 8,5:1, com folga. Centrados desde 12/08/2026 — acompanham
     o link "Falar com um consultor", que já era centrado no celular. */
  .heroi-marcas {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0 6px;
    font-size: min(var(--fonte-micro), 2.4vw);
  }

  .heroi-marca {
    white-space: nowrap;
  }

  .heroi-marca + .heroi-marca::before {
    margin-right: 6px;
  }

  /* ---- o botão do herói VOLTOU AO TAMANHO CHEIO (12/08/2026) ----------
     Ele chegou a ser encolhido para caber numa linha só e ficou em ~13px.
     É a chamada principal da página: pequeno demais custa mais do que a
     segunda linha custava. Não há regra de tamanho aqui de propósito —
     ele usa os 19px da escala, como todo botão, e quebra em duas linhas
     quando precisar. Se alguém pensar em encolher de novo: já foi
     tentado, e foi desfeito no mesmo dia.                                */

  /* ---- os botões de chamada TAMBÉM voltaram ao tamanho cheio ----------
     Eles chegaram a ficar em ~13px para caber numa linha com o texto longo
     ("Descubra quantos graus caem no seu galpão"). Botão de 13px não é
     alvo clicável no celular: em 12/08/2026 o texto virou o curto
     "Calcular meu galpão" e a fonte voltou aos 19px da escala.
     Com 19 caracteres o botão cabe numa linha sobrando espaço até em tela
     de 320px — a linha única saiu de graça, sem custar tamanho.
     Não há regra de fonte aqui de propósito: quem manda é a escala.      */

  /* ---- 2a: a linha de apoio da calculadora em uma linha --------------- */
  .topo-subtitulo {
    font-size: min(var(--fonte-base), 3.2vw);
  }

  /* ---- 2b: o botão de fechar pedido em uma linha ---------------------- */
  /* dimensionado pelo texto MAIS LONGO que este botão exibe, que não é o
     inicial e sim "Falar com o técnico antes de comprar", posto pelo
     script quando a cidade é úmida */
  .calculadora .botao {
    padding-left: 14px;
    padding-right: 14px;
    font-size: min(var(--fonte-media), 3.5vw);
  }

  /* ---- 4: a legenda da foto de produto em uma linha ------------------- */
  /* É a linha mais longa de todas as pedidas (68 caracteres) no lugar mais
     estreito (dentro da moldura da foto). Fica em ~9px numa tela de 380px,
     e por isso a moldura também cede 6px de cada lado. É o item que mais
     custou legibilidade para caber em uma linha. */
  .produto {
    padding-left: 14px;
    padding-right: 14px;
  }

  .produto-legenda {
    font-size: min(var(--fonte-micro), 2.35vw);
  }

  /* O botão do herói ENTROU nesta lista em 12/08/2026, junto com a troca
     do texto longo pelo curto: com 19 caracteres ele cabe numa linha em
     19px sobrando espaço, então a linha única não custa mais tamanho. */
  /* As duas linhas da comparação entraram aqui em 12/08/2026, e não numa
     regra própria: em tela de 320px elas cabem por 1px e 5px, folga que
     não sobrevive à troca de fonte do celular. Abaixo de 360px voltam a
     quebrar, como todo o resto desta lista. */
  @media (min-width: 360px) {
    .heroi-botao,
    .botao--acao,
    .calculadora .botao,
    .topo-subtitulo,
    .produto-legenda,
    .faixa-titulo--uma-linha,
    .faixa-fecho--uma-linha,
    .comparacao-numero--texto,
    .comparacao-numero--frase {
      white-space: nowrap;
    }
  }

  /* ---- 5: o número da comparação nas colunas estreitas ----------------
     No celular cada coluna da comparação tem pouco mais de 120px de
     conteúdo, e o maior valor exibido ("40 a 60%") não cabe nos 32px da
     escala — quebraria em duas linhas no meio da faixa. Mesma técnica das
     linhas únicas: o número encolhe junto com a tela e volta aos 32px
     assim que houver largura para isso. */
  .comparacao-lado {
    padding: 12px 10px;
  }

  .comparacao-numero {
    font-size: min(var(--fonte-titulo), 7vw);
  }

  /* "o mesmo ar" — a regra acima é mais específica na ordem do arquivo que
     o modificador --texto e estava atropelando os 22px dele, jogando a
     palavra para 26,6px: por isso ela quebrava em duas linhas. Devolvido o
     degrau certo, com fração de tela só para telas bem estreitas.
     Medido: "o mesmo ar" ocupa 5,42 em, e a coluna tem ~128px em tela de
     380px — a 22px são 119px, cabe. */
  .comparacao-numero--texto {
    font-size: min(var(--fonte-grande), 5.6vw);
  }

  /* "abaixo de 30%" numa linha: o 30% fica no tamanho do número (a regra
     acima) e só o prefixo encolhe, acompanhando a largura da tela.
     Medido: "abaixo de" 4,28 em + "30%" 1,93 em. */
  .comparacao-prefixo--inline {
    font-size: min(var(--fonte-pequena), 3.2vw);
  }

  /* ---- 7: primeira coluna da tabela fixa ------------------------------
     Ao rolar a tabela para o lado, a coluna do critério fica parada e o
     visitante nunca perde de vista o que está comparando.

     A célula fixa PRECISA de fundo próprio: sem ele as outras colunas
     passariam por baixo dela. O divisor da direita é box-shadow, e não
     border, porque com border-collapse: collapse a borda de uma célula
     grudada some em parte dos navegadores — a sombra não depende do
     modelo de bordas.

     A largura vira fixa em 132px: os 34% de antes comiam quase dois
     terços da tela do celular e não sobrava espaço para comparar nada. */
  .tabela tbody th,
  .tabela thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 132px;
    min-width: 132px;
    background: var(--branco);
    box-shadow: inset -1px 0 0 var(--linha-media);
  }

  /* o canto superior esquerdo fica parado nos DOIS eixos e passa por cima */
  .tabela thead th:first-child {
    z-index: 2;
    background: var(--cinza-fundo);
  }

  .tabela th,
  .tabela td {
    padding: 12px;
  }
}