/* ════════════════════════════════════════════════════════════════════════════
   ALLPRIME BOMBAS — CSS diferido (seções abaixo da dobra)
   Servido com ?v=<hash> para furar o cache immutable da borda (playbook §29).

   Linguagem visual: prancha técnica. Fio de 1px, numeral tabular, rótulo em
   mono caixa-alta, cotas em laranja. Nada de cartão fofo com sombra grande.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── casca de seção ────────────────────────────────────────────────────────── */
.sec { padding-block: var(--sec-y); position: relative; }
.sec--papel { background: var(--papel); }
.sec--branca { background: var(--papel-2); }
.sec--cinza { background: var(--papel-3); }

/* seção escura: o navy da marca ancora a página nos pontos de peso */
.sec--escura, .escuro { background: var(--navy-900); color: #fff; }
.sec--escura h2, .sec--escura h3, .escuro h2, .escuro h3 { color: #fff; }
.sec--escura .cab p, .escuro .cab p { color: var(--claro-dim); }
.sec--escura .olho, .escuro .olho { color: #ff9b63; }

/* malha de prancha, discretíssima, só nas seções claras de conteúdo denso */
.sec--malha { background-color: var(--papel-2); background-image: var(--malha); background-size: 26px 26px; }

.grao { position: relative; }
.grao > * { position: relative; z-index: 1; }
.grao::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grao); opacity: 0.05; mix-blend-mode: overlay;
}

/* ── cabeçalho de seção ────────────────────────────────────────────────────── */
.cab { margin-bottom: clamp(38px, 4.6vw, 60px); display: grid; gap: 16px; }
.cab h2 { margin: 0; letter-spacing: -0.028em; }
.cab p { font-size: var(--fs-lead); color: var(--txt-dim); max-width: 56ch; text-wrap: pretty; }

@media (min-width: 940px) {
  .cab { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 18px 56px; align-items: end; }
  .cab__t { grid-column: 1; }
  .cab p { grid-column: 2; padding-bottom: 5px; }
  .cab--centro { grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: 780px; margin-inline: auto; }
  .cab--centro p { grid-column: 1; }
}

/* olho com índice e fio */
.olho {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-family: var(--ff-m); font-size: var(--fs-lbl); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--lar);
}
.olho::before { content: ''; width: 26px; height: 1px; background: currentColor; opacity: 0.6; flex: none; }
.olho b { font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.55; }
.cab--centro .olho { justify-content: center; }

.link-lar {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--ff-d); font-weight: 700; color: var(--lar); text-decoration: none;
}
.link-lar svg { width: 18px; height: 18px; transition: transform 160ms var(--e); }
.link-lar:hover svg { transform: translateX(4px); }
.escuro .link-lar { color: #ff9b63; }

/* ═══ 01 · COMPRAR × ALUGAR — as duas portas do negócio ════════════════════ */
.portas { display: grid; gap: 22px; }
.porta {
  position: relative; display: flex; flex-direction: column;
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color 240ms var(--e), transform 240ms var(--e), box-shadow 240ms var(--e);
}
.porta:hover { border-color: var(--navy-500); transform: translateY(-3px); box-shadow: var(--sh-2); }
.porta__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-800); }
.porta__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.86) contrast(1.05);
  transition: transform 600ms var(--e);
}
.porta:hover .porta__img img { transform: scale(1.035); }
.porta__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(1, 26, 53, 0.1) 0%, rgba(1, 26, 53, 0.72) 100%);
}
.porta__marca {
  position: absolute; z-index: 1; left: 20px; bottom: 16px; right: 20px;
  color: #fff; font-family: var(--ff-d); font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.05;
}
.porta__marca em { display: block; font-style: normal; color: #ffb488; font-size: var(--fs-lbl); font-family: var(--ff-m); font-weight: 600; letter-spacing: 0.14em; margin-bottom: 6px; }
.porta__body { padding: 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.porta__body p { color: var(--txt-dim); }
.porta__body ul { list-style: none; padding: 0; display: grid; gap: 9px; font-size: 0.96rem; }
.porta__body ul li { display: flex; gap: 10px; align-items: flex-start; color: var(--txt-dim); }
.porta__body ul svg { width: 18px; height: 18px; flex: none; color: var(--lar); margin-top: 3px; }
.porta__cta { margin-top: auto; padding-top: 4px; }
@media (min-width: 860px) { .portas { grid-template-columns: 1fr 1fr; gap: 26px; } }

/* ═══ 02 · LINHAS DE BOMBA ═════════════════════════════════════════════════ */
.linhas { display: grid; gap: 22px; }
.linha {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r);
  transition: border-color 240ms var(--e), box-shadow 240ms var(--e);
}
.linha:hover { border-color: var(--navy-500); box-shadow: var(--sh-2); }
/* render de produto: painel branco com vinheta POR CIMA da foto.
   ⚠️ NÃO usar `mix-blend-mode: multiply` na <img> para casar o fundo branco do
   render com o painel: em Chrome headless (e em qualquer caminho de compositing
   com overflow:hidden no ancestral) o blend às vezes resolve como se a imagem
   fosse branca — o card aparece VAZIO. Verificado aqui: as 4 fotos carregavam
   (naturalWidth 880) e ainda assim não pintavam. Vinheta em ::after resolve o
   mesmo problema visual sem depender de blend. */
.linha__img {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center;
  padding: 18px 18px 8px;
  background: #ffffff;
  border-bottom: 1px solid var(--linha-2);
}
.linha__img img { width: 100%; height: 100%; object-fit: contain; }
.linha__img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(128% 100% at 50% 16%, rgba(255, 255, 255, 0) 44%, rgba(1, 26, 53, 0.08) 100%);
}
.linha__cod {
  position: absolute; z-index: 1; top: 12px; left: 14px;
  font-family: var(--ff-m); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--navy-500); background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--linha-2); border-radius: 3px; padding: 3px 7px;
}
.linha__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.linha__body h3 { margin: 0; }
.linha__body > p { color: var(--txt-dim); font-size: 0.96rem; }

/* ficha: dado técnico em mono, separado por fios — não é "chip" decorativo */
.ficha { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--linha-2); }
.ficha li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--linha-2);
}
.ficha b {
  font-family: var(--ff-m); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-dim); flex: none;
}
.ficha span {
  font-family: var(--ff-d); font-weight: 700; font-size: 0.9375rem;
  font-variant-numeric: tabular-nums; text-align: right;
}
.linha__cta { margin-top: auto; padding-top: 4px; }

/* ⚠️ 4 linhas de produto NÃO cabem num grid de 3 colunas: o 4º cartão fica
   sozinho na segunda fileira e sobram DUAS células vazias — um buraco branco do
   tamanho de dois cartões. O portfólio tem 4 itens, então a grade é 2×2.
   A partir de 1040px o cartão vira horizontal (foto à esquerda, ficha à
   direita): fecha a grade, aproveita a largura e ainda corta ~1 tela de altura. */
@media (min-width: 620px) { .linhas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .linhas { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .linha { flex-direction: row; align-items: stretch; }
  .linha__img {
    flex: 0 0 43%; aspect-ratio: auto; padding: 16px;
    border-bottom: none; border-right: 1px solid var(--linha-2);
  }
  .linha__img img { height: 100%; max-height: 300px; }
  .linha__body { flex: 1 1 auto; min-width: 0; padding: 22px 24px 24px; }
}

/* tabela de modelos (vazão × altura) e bloco de construção */
.modelos { margin-top: clamp(30px, 3.6vw, 44px); }
.modelos__t { display: block; color: var(--lar); margin-bottom: 14px; }
.constr { margin-top: clamp(26px, 3vw, 38px); }
.constr .lbl { display: block; color: var(--lar); margin-bottom: 12px; }
.constr .ficha { border-top: 1px solid var(--linha); }
/* aqui o valor é uma frase, não um número: fica logo depois do rótulo e
   alinhado à esquerda (com text-align:right sobrava um vão enorme no meio) */
.constr .ficha li {
  border-bottom: 1px solid var(--linha-2); padding: 9px 0;
  display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 4px 14px; align-items: baseline;
}
.constr .ficha span { text-align: left; font-weight: 500; font-size: 0.9375rem; }
@media (min-width: 900px) {
  .constr .ficha { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; }
}

/* nota de rodapé de seção (aviso honesto sobre variação de modelo) */
.nota {
  margin-top: 26px; padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start;
  border: 1px dashed var(--linha); border-radius: var(--r-sm); background: rgba(1, 26, 53, 0.02);
  font-size: 0.9375rem; color: var(--txt-dim);
}
.nota svg { width: 20px; height: 20px; flex: none; color: var(--lar); margin-top: 2px; }
.escuro .nota { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04); color: var(--claro-dim); }
.escuro .nota svg { color: var(--lar-esc); }

/* ═══ 03 · VANTAGENS TÉCNICAS (faixa escura) ═══════════════════════════════ */
.vant { display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.vant__i {
  padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  display: grid; gap: 12px; align-content: start;
}
.vant__n {
  font-family: var(--ff-m); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--lar-esc);
}
.vant__i h3 { margin: 0; font-size: 1.14rem; }
.vant__i p { color: var(--claro-dim); font-size: 0.96rem; }
.vant__ic { color: #fff; opacity: 0.9; }
.vant__ic svg { width: 30px; height: 30px; stroke-width: 1.3; }

@media (min-width: 720px) {
  .vant { grid-template-columns: 1fr 1fr; column-gap: 44px; }
  .vant__i { padding-inline: 0; }
}
@media (min-width: 1080px) {
  .vant { grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
}

/* ═══ 04 · SETORES ═════════════════════════════════════════════════════════ */
.setores { display: grid; gap: 0; border-top: 1px solid var(--linha); border-left: 1px solid var(--linha); }
@media (min-width: 620px) { .setores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .setores { grid-template-columns: repeat(4, 1fr); } }

.setor {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 28px 26px; text-decoration: none; color: inherit;
  border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  transition: background-color 240ms var(--e);
}
.setor::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--lar); transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--e);
}
.setor:hover, .setor:focus-visible { background: rgba(2, 49, 99, 0.045); }
.setor:hover::after, .setor:focus-visible::after { transform: scaleX(1); }
.setor__ic { color: var(--navy-700); }
.setor__ic svg { width: 34px; height: 34px; stroke-width: 1.3; }
.setor h3 { margin: 0; font-size: 1.16rem; }
.setor p { color: var(--txt-dim); font-size: 0.94rem; flex: 1; margin: 0; }
.setor__seta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 2px;
  font-family: var(--ff-m); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lar);
}
.setor__seta svg { width: 16px; height: 16px; transition: transform 260ms var(--e); }
.setor:hover .setor__seta svg { transform: translateX(5px); }

/* ═══ 05 · APLICAÇÕES / FORNECIMENTOS ═════════════════════════════════════ */
.casos { display: grid; gap: 0; border-top: 1px solid var(--linha); }
.caso {
  display: grid; gap: 8px 26px; padding: 24px 0;
  border-bottom: 1px solid var(--linha);
  align-items: baseline;
}
.caso__n {
  font-family: var(--ff-m); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--lar); font-variant-numeric: tabular-nums;
}
.caso h3 { margin: 0; font-size: clamp(1.1rem, 1.7vw, 1.32rem); }
.caso p { color: var(--txt-dim); font-size: 0.96rem; margin: 0; }
.caso__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.caso__tags span {
  font-family: var(--ff-m); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--navy-500);
  border: 1px solid var(--linha); border-radius: 3px; padding: 3px 8px;
}
.caso__corpo h3 { margin-bottom: 6px; }
.caso__meta { display: grid; gap: 8px; align-content: start; }
.caso__eq { font-size: 0.9375rem; }
.caso__eq b {
  display: block; font-family: var(--ff-m); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt-dim); margin-bottom: 2px;
}
@media (min-width: 860px) {
  .caso { grid-template-columns: 52px minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 10px 32px; }
}

/* fornecimentos com memorial (títulos publicados, sem detalhamento) */
.forn { margin-top: clamp(34px, 4vw, 52px); padding-top: 28px; border-top: 1px solid var(--linha); }
.forn .lbl { display: block; color: var(--lar); margin-bottom: 14px; }
.forn ul { list-style: none; padding: 0; display: grid; gap: 10px 30px; margin-bottom: 14px; }
.forn li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.95rem; color: var(--txt-dim); }
.forn svg { width: 18px; height: 18px; flex: none; color: var(--navy-500); margin-top: 3px; }
@media (min-width: 900px) { .forn ul { grid-template-columns: 1fr 1fr; } }

/* como sai uma cotação — 3 passos (mata a fricção do processo) */
.passos { margin-top: clamp(34px, 4vw, 52px); padding-top: 28px; border-top: 1px solid var(--linha); }
.passos .lbl { display: block; color: var(--lar); margin-bottom: 18px; }
.passos ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; counter-reset: p; }
.passos li { display: flex; gap: 16px; align-items: flex-start; }
.passos b {
  flex: none; width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--navy-700); color: #fff;
  font-family: var(--ff-m); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.passos strong { display: block; font-family: var(--ff-d); font-weight: 700; margin-bottom: 2px; }
.passos span { font-size: 0.95rem; color: var(--txt-dim); }
@media (min-width: 900px) { .passos ol { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

/* reserva antecipada de locação */
.reserva {
  margin-top: clamp(30px, 3.6vw, 44px); padding: 24px 26px;
  background: var(--papel-2); border: 1px solid var(--linha); border-left: 3px solid var(--lar);
  border-radius: var(--r-sm);
}
.reserva .lbl { display: block; color: var(--lar); margin-bottom: 10px; }
.reserva p { color: var(--txt-dim); max-width: 72ch; margin-bottom: 8px; }
.reserva strong { color: var(--txt); }

/* ═══ 06 · EMPRESA ════════════════════════════════════════════════════════ */
.sobre__grid { display: grid; gap: clamp(30px, 4.4vw, 56px); align-items: center; }
.sobre__foto { position: relative; }
.sobre__foto img { width: 100%; border-radius: var(--r); filter: saturate(0.86) contrast(1.04); }
.sobre__selo {
  position: absolute; right: -8px; bottom: -18px; max-width: 230px;
  background: var(--navy-700); color: #fff;
  border-radius: var(--r-sm); padding: 16px 18px; box-shadow: var(--sh);
}
.sobre__selo strong { display: block; font-family: var(--ff-d); font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.sobre__selo span { font-family: var(--ff-m); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aco-300); }

.checks { list-style: none; padding: 0; display: grid; gap: 14px; margin-block: 24px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks svg { width: 22px; height: 22px; flex: none; color: var(--lar); margin-top: 2px; }
.checks strong { display: block; font-family: var(--ff-d); font-weight: 700; }
.checks span { font-size: 0.95rem; color: var(--txt-dim); }
.escuro .checks svg { color: var(--lar-esc); }
.escuro .checks span { color: var(--claro-dim); }

@media (min-width: 920px) { .sobre__grid { grid-template-columns: 5fr 6fr; } }

/* ficha de fatos: numeral grande em tabular, fio fino — não são cartõezinhos */
.fatos { display: grid; gap: 0; border-top: 1px solid var(--linha); }
@media (min-width: 620px) { .fatos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fatos { grid-template-columns: repeat(4, 1fr); } }
.fato { padding: 24px 24px 24px 0; border-bottom: 1px solid var(--linha); }
@media (min-width: 620px) {
  .fato { padding-left: 24px; border-left: 1px solid var(--linha); }
  .fato:first-child, .fato:nth-child(3) { padding-left: 0; border-left: none; }
}
@media (min-width: 1000px) {
  .fato:nth-child(3) { padding-left: 24px; border-left: 1px solid var(--linha); }
  .fato { border-bottom: none; }
}
/* Dentro da coluna de texto do bloco "empresa" a ficha tem ~520px: em 4 colunas
   cada rótulo virava uma torre de 6 linhas. Ali ela fica 2×2. */
@media (min-width: 1000px) {
  .fatos--duo { grid-template-columns: repeat(2, 1fr); }
  .fatos--duo .fato { border-bottom: 1px solid var(--linha); }
  .fatos--duo .fato:nth-child(odd) { padding-left: 0; border-left: none; }
  .fatos--duo .fato:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--linha); }
  .fatos--duo .fato:nth-last-child(-n + 2) { border-bottom: none; }
}
.fato strong {
  display: block; font-family: var(--ff-d); font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; color: var(--navy-700); margin-bottom: 10px;
  white-space: nowrap;
}
.fato span {
  display: block; font-size: 0.8125rem; font-weight: 500; line-height: 1.5;
  color: var(--txt-dim); max-width: 28ch;
}
.escuro .fatos, .escuro .fato { border-color: rgba(255, 255, 255, 0.16); }
.escuro .fato strong { color: #fff; }
.escuro .fato span { color: var(--claro-dim); }

/* ═══ 07 · FAQ ════════════════════════════════════════════════════════════ */
.faq { max-width: 840px; margin-inline: auto; }
.faq details {
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r-sm);
  margin-bottom: 10px; overflow: hidden;
}
.faq details[open] { border-color: var(--navy-500); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; min-height: 56px; cursor: pointer; list-style: none;
  font-family: var(--ff-d); font-weight: 700; font-size: 1.03rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__mais { position: relative; width: 18px; height: 18px; flex: none; }
.faq__mais::before, .faq__mais::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 2px;
  border-radius: 2px; background: var(--lar); transition: transform 180ms var(--e);
}
.faq__mais::after { transform: rotate(90deg); }
.faq details[open] .faq__mais::after { transform: rotate(0); }
.faq__resp { padding: 0 20px 20px; color: var(--txt-dim); }
.faq__resp p + p { margin-top: 10px; }
.faq__fecho { text-align: center; margin-top: 26px; }

/* ═══ 08 · CONTATO ════════════════════════════════════════════════════════ */
.contato__grid { display: grid; gap: clamp(28px, 4vw, 48px); }
.dados { list-style: none; padding: 0; display: grid; gap: 18px; }
.dados li { display: flex; gap: 14px; align-items: flex-start; }
.dados__ic {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center;
  border: 1px solid var(--linha); color: var(--navy-700); background: var(--papel-2);
}
.dados__ic svg { width: 20px; height: 20px; stroke-width: 1.35; }
.dados strong {
  display: block; font-family: var(--ff-m); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt-dim); margin-bottom: 3px;
}
.dados a, .dados p { font-size: 1.0625rem; text-decoration: none; }
.dados a:hover { color: var(--lar); }
.dados__link { display: inline-flex; align-items: center; min-height: 44px; font-variant-numeric: tabular-nums; }
.dados__horario { display: grid; gap: 3px; font-size: 1rem; }
.dados__horario span { display: flex; justify-content: space-between; gap: 18px; max-width: 320px; color: var(--txt-dim); }
.dados__horario b { color: var(--txt); font-weight: 600; }

.cta-box {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--navy-700) 0%, var(--navy-850) 62%, var(--navy-900) 100%);
  color: #fff; border-radius: var(--r); padding: clamp(26px, 3.6vw, 38px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.cta-box::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grao); opacity: 0.06; mix-blend-mode: overlay;
}
.cta-box > * { position: relative; z-index: 1; }
.cta-box h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 12px; color: #fff; }
.cta-box p { margin-bottom: 20px; color: var(--claro-dim); }
.cta-box .btn { width: 100%; margin-bottom: 10px; }
/* ⚠️ A caixa é ESCURA mas não tem a classe .escuro: sem isto o .btn--linha
   herda `color: var(--txt)` (navy) e o botão "Enviar e-mail" fica INVISÍVEL
   sobre o gradiente navy — texto sumido, não é hipótese: aconteceu. */
.cta-box .btn--linha { color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.cta-box .btn--linha:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.cta-box small { display: block; margin-top: 12px; font-size: 0.875rem; color: var(--aco-300); }

@media (min-width: 920px) { .contato__grid { grid-template-columns: 6fr 5fr; align-items: start; } }

/* mapa: iframe só entra depois do clique (zero requisição externa no load) */
.mapa {
  position: relative; margin-top: 26px; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--linha); background: var(--papel-3);
  aspect-ratio: 16 / 9;
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ═══ RODAPÉ ══════════════════════════════════════════════════════════════ */
.rp { background: var(--navy-900); padding-block: 54px 26px; color: rgba(232, 238, 248, 0.76); }
.rp .rp__titulo, .rp strong { color: #fff; }
.rp a { color: rgba(232, 238, 248, 0.86); text-decoration: none; }
.rp a:hover { color: #ff9b63; }
.rp__grid { display: grid; gap: 32px; }
.rp__marca img { width: 152px; margin-bottom: 16px; }
.rp__marca p { font-size: 0.94rem; max-width: 40ch; }
.rp__titulo {
  font-family: var(--ff-m); font-weight: 600; font-size: 0.6875rem; line-height: 1.4;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px;
}
.rp ul { list-style: none; padding: 0; display: grid; gap: 2px; font-size: 0.94rem; }
.rp ul a { display: inline-flex; align-items: center; min-height: 44px; }
.rp__redes { display: flex; gap: 10px; margin-top: 18px; }
.rp__redes a {
  width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center;
  border: 1px solid rgba(232, 238, 248, 0.22);
}
.rp__redes a:hover { border-color: var(--lar-esc); color: var(--lar-esc); }
.rp__redes svg { width: 19px; height: 19px; }
/* padding-bottom reserva a faixa onde o botão flutuante pousa — sem isso ele
   cobre os links do fim do rodapé e o clique não passa */
.rp__fim {
  margin-top: 38px; padding-top: 20px; padding-bottom: 76px;
  border-top: 1px solid rgba(232, 238, 248, 0.18);
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between;
  font-size: 0.84rem;
}
.rp__fim a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 760px) { .rp__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }

/* ═══ botão flutuante de WhatsApp (padrão consolidado da casa) ═════════════ */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 20px 0 16px; border-radius: var(--r-sm);
  background: var(--wa); color: var(--on-wa); text-decoration: none;
  font-family: var(--ff-d); font-weight: 700; font-size: 1rem;
  box-shadow: 0 14px 30px -10px rgba(37, 211, 102, 0.6);
  opacity: 1; visibility: visible;
  transition: transform 180ms var(--e), background-color 180ms var(--e),
              opacity 200ms var(--e), visibility 200ms;
}
.wa-float svg { width: 26px; height: 26px; flex: none; }
/* sem color:#fff no hover — branco sobre #1da851 dá 3,10:1 e reprova AA */
.wa-float:hover { background: var(--wa-esc); transform: translateY(-3px); }
/* enquanto o hero está na tela o botão fica escondido: ali é redundante e em
   telas baixas pousa em cima do CTA do próprio hero */
.js .wa-float.oculto { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
@media (max-width: 639.98px) {
  .wa-float { right: 14px; bottom: 14px; width: 56px; height: 56px; padding: 0; justify-content: center; }
  .wa-float span { display: none; }
}

/* ═══ reveal ══════════════════════════════════════════════════════════════ */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--e), transform 420ms var(--e); }
.rv.visto { opacity: 1; transform: none; }
.rv:not(.js-armado) { opacity: 1; transform: none; }

/* ═══ páginas de apoio ════════════════════════════════════════════════════ */
.erro { min-height: 74vh; display: grid; place-items: center; text-align: center; padding-block: 80px; }
.erro__in { max-width: 44rem; }
.erro img { width: 168px; margin-inline: auto; margin-bottom: 26px; }
.erro__num {
  font-family: var(--ff-d); font-weight: 800; font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1; color: var(--navy-700); opacity: 0.16; margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.erro h1 { font-size: var(--fs-h2); margin-bottom: 14px; }
.erro p { color: var(--txt-dim); margin-inline: auto; max-width: 46ch; margin-bottom: 26px; }
.erro__acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.doc { padding-block: 70px 96px; }
.doc__in { max-width: 70ch; margin-inline: auto; }
.doc h1 { font-size: var(--fs-h2); margin-bottom: 24px; }
.doc h2 { font-size: 1.28rem; margin-top: 36px; margin-bottom: 12px; }
.doc p, .doc li { color: var(--txt-dim); margin-bottom: 12px; }
.doc ul { padding-left: 22px; }
.doc a { color: var(--lar); }

/* ═══ complementos das seções ═════════════════════════════════════════════ */

/* título de linha em duas alturas: nome + designação da série */
.linha__sub { color: var(--lar); font-weight: 800; }
.linha__modelos { color: var(--txt-dim); font-size: 0.6875rem; letter-spacing: 0.1em; }

/* faixas de pressão da escorva a seco */
.pressoes { margin-top: 34px; }
.pressoes__t { display: block; color: var(--lar); margin-bottom: 14px; }
.pressoes__grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .pressoes__grid { grid-template-columns: repeat(3, 1fr); } }
.pressao { background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r-sm); padding: 20px; }
.pressao__tag {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
  font-family: var(--ff-d); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em;
  color: var(--navy-700);
}
.pressao__tag span {
  font-family: var(--ff); font-weight: 600; font-size: 0.875rem; letter-spacing: 0;
  color: var(--txt-dim);
}
.pressao ul { list-style: none; padding: 0; display: grid; gap: 0; }
.pressao li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--linha-2);
}
.pressao b {
  font-family: var(--ff-m); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--txt-dim);
}
.pressao span { font-weight: 600; font-size: 0.9375rem; font-variant-numeric: tabular-nums; text-align: right; }

/* facilidades + sistema de vácuo, dentro da faixa escura */
.facil { display: grid; gap: 34px; margin-top: clamp(40px, 5vw, 64px); padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
@media (min-width: 900px) { .facil { grid-template-columns: 1fr 1fr; gap: 56px; } }
.facil .lbl { display: block; color: #ff9b63; margin-bottom: 16px; }
.facil__lista ul { list-style: none; padding: 0; display: grid; gap: 16px; }
.facil__lista li { display: flex; gap: 12px; align-items: flex-start; }
.facil__lista svg { width: 20px; height: 20px; flex: none; color: var(--lar-esc); margin-top: 4px; }
.facil__lista strong { display: block; font-family: var(--ff-d); font-weight: 700; }
.facil__lista span { font-size: 0.95rem; color: var(--claro-dim); }
.facil__vacuo ul { list-style: none; padding: 0; display: grid; gap: 0; }
.facil__vacuo li {
  padding: 12px 0 12px 28px; position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.95rem; color: var(--claro-dim);
}
.facil__vacuo li::before {
  content: ''; position: absolute; left: 4px; top: 21px;
  width: 8px; height: 1px; background: var(--lar-esc);
}

/* ═══ bloco recolhível de aprofundamento ══════════════════════════════════
   A página tinha 32,8 telas de celular. O que é ficha profunda (tabela de 10
   modelos, materiais de construção, sistema de vácuo, casos secundários) mora
   aqui: continua no HTML — indexa e o comprador técnico abre — sem cobrar
   rolagem de quem só quer pedir orçamento. */
.dobra {
  margin-top: clamp(26px, 3.2vw, 40px);
  border: 1px dashed var(--linha); border-radius: var(--r-sm);
  background: rgba(1, 26, 53, 0.015);
}
.dobra > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; min-height: 56px; cursor: pointer; list-style: none;
  font-family: var(--ff-d); font-weight: 700; font-size: 1rem;
}
.dobra > summary::-webkit-details-marker { display: none; }
.dobra[open] { border-style: solid; border-color: var(--navy-500); background: var(--papel-2); }
.dobra__in { padding: 2px 20px 24px; }
/* os blocos internos já têm respiro do <details> */
.dobra__in > .modelos:first-child, .dobra__in > .casos:first-child { margin-top: 0; }
.dobra__in > .forn { border-top: 1px solid var(--linha); }

.dobra--escura { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.03); }
.dobra--escura[open] { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.05); }
.dobra--escura > summary { color: #fff; }
.dobra--escura .faq__mais::before, .dobra--escura .faq__mais::after { background: var(--lar-esc); }
@media (min-width: 900px) {
  .dobra--escura .facil__vacuo { columns: 2; column-gap: 44px; }
  .dobra--escura .facil__vacuo li { break-inside: avoid; }
}

/* ── locação ──────────────────────────────────────────────────────────────── */
.loc { display: grid; gap: clamp(30px, 4vw, 48px); }
/* ⚠️ min-width:0 nos filhos é OBRIGATÓRIO: a tabela da frota tem min-width de
   640px e, sem isto, o track do grid vira max-content e a PÁGINA INTEIRA passa a
   rolar na horizontal no celular (767px num viewport de 390). Playbook §2. */
.loc > * { min-width: 0; max-width: 100%; }
/* A tabela da frota tem 7 colunas. Numa coluna de grid ela ficava com metade
   das colunas escondidas atrás do overflow no desktop (parecia truncada, não
   rolável). Então no desktop a seção NÃO se divide: os argumentos vão em duas
   colunas e a tabela ocupa a largura inteira do container. */
.loc__args { display: grid; gap: 22px; }
@media (min-width: 900px) { .loc__args { grid-template-columns: 1fr 1fr; gap: 24px 40px; } }
.arg { display: flex; gap: 14px; align-items: flex-start; }
.arg__ic {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--papel-2); border: 1px solid var(--linha); color: var(--navy-700);
}
.arg__ic svg { width: 22px; height: 22px; stroke-width: 1.35; }
.arg h3 { margin: 0 0 4px; font-size: 1.08rem; }
.arg p { color: var(--txt-dim); font-size: 0.95rem; }

.loc__frota { margin-top: 8px; }
.loc__frota .lbl { display: block; color: var(--lar); margin-bottom: 14px; }
/* tabela larga: rola dentro da própria caixa, o body NUNCA rola na horizontal.
   O gradiente na borda direita avisa que há mais coluna para o lado (sem ele o
   usuário de celular acha que a tabela está cortada). */
.tabela-rolo {
  position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--linha); border-radius: var(--r-sm); background: var(--papel-2);
  background-image: linear-gradient(to left, rgba(1, 26, 53, 0.09), rgba(1, 26, 53, 0));
  background-size: 26px 100%; background-position: right center; background-repeat: no-repeat;
  background-attachment: local, scroll;
}
.frota { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.9375rem; }
.frota th, .frota td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--linha-2); white-space: nowrap; }
.frota thead th {
  font-family: var(--ff-m); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--txt-dim); background: var(--papel-3);
  border-bottom: 1px solid var(--linha);
}
.frota tbody th { font-family: var(--ff-d); font-weight: 800; color: var(--navy-700); }
.frota td { font-variant-numeric: tabular-nums; color: var(--txt-dim); }
.frota tbody tr:last-child th, .frota tbody tr:last-child td { border-bottom: none; }
.loc__nota { margin-top: 10px; font-size: 0.84rem; color: var(--txt-dim); }

.apl { margin-top: clamp(30px, 3.6vw, 44px); padding-top: 26px; border-top: 1px solid var(--linha); }
.apl .lbl { display: block; color: var(--lar); margin-bottom: 10px; }
/* as 9 aplicações numa frase corrida: mantém os termos (que são keyword) sem
   empilhar 9 linhas no celular */
.apl__linha { color: var(--txt-dim); max-width: 92ch; margin-bottom: 20px; }

/* aplicações dentro do card de setor */
.setor__apl { list-style: none; padding: 0; margin: 2px 0 0; display: grid; gap: 5px; }
.setor__apl li {
  position: relative; padding-left: 14px; font-size: 0.875rem; color: var(--txt-dim);
}
.setor__apl li::before {
  content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 1px; background: var(--lar); opacity: 0.7;
}

/* tira de fotos de operação */
.tiras { display: grid; gap: 14px; margin-top: clamp(36px, 4.4vw, 56px); }
.tiras figure { margin: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--papel-3); }
.tiras img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; filter: saturate(0.86) contrast(1.04); }
@media (min-width: 760px) { .tiras { grid-template-columns: repeat(2, 1fr); } }
.tiras img { aspect-ratio: 16 / 10; }

/* e-mails são longos: quebram o grid no celular se não puderem partir */
.canal__mail, .dados__mail, .rp__mail { word-break: break-word; overflow-wrap: anywhere; }
.canal__mail { font-size: 0.9375rem !important; letter-spacing: -0.01em; }
.rp__legais { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* ═══ movimento reduzido ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .rv { opacity: 1; transform: none; }
}