/* ColdAir Rio: estilo único. Tokens do DESIGN.md. Mobile primeiro (375 px). */

:root {
  --azul: #0A57E6;
  --azul-escuro: #0846B8;
  --tinta: #0D1B3E;
  --branco: #FFFFFF;
  --cinza: #F2F5FA;
  --tinta-suave: #44527A;
  --gelo: #D6E2FF;
  --linha: #0A57E6;
  --linha-clara: rgba(10, 87, 230, .3);
  --linha-escura: rgba(10, 87, 230, .6);
  --f-titulo: "Outfit", "Montserrat", "Segoe UI", Arial, sans-serif;
  --f-texto: "Public Sans", "Segoe UI", Arial, sans-serif;
  --gutter: 16px;
  --raio: 4px;
  --topo-h: 64px;
  --fundo-secao: var(--branco);
}
@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 960px) { :root { --gutter: 48px; --topo-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font: 400 17px/1.6 var(--f-texto);
  overflow-x: hidden;
}
@media (min-width: 640px) { body { font-size: 18px; } }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--f-titulo); color: inherit; margin: 0; overflow-wrap: break-word; }
h1 { font-size: 34px; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: 29px; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
h3 { font-size: 21px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
@media (min-width: 960px) {
  h1 { font-size: 58px; }
  h2 { font-size: 44px; }
  h3 { font-size: 26px; }
}
p { margin: 0 0 16px; max-width: 38rem; }
a { color: var(--azul); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--azul-escuro); }
ul, ol { margin: 0; padding: 0; }
.lista-limpa { list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.hero :focus-visible, .rodape :focus-visible, .cta-final :focus-visible, .porta-eletrica :focus-visible,
.nav :focus-visible { outline-color: var(--branco); }

.pular {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: var(--tinta); color: var(--branco); padding: 12px 16px; border-radius: var(--raio);
  font-weight: 700; text-decoration: none;
}
.pular:focus { top: 8px; }

.cont { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  background: var(--azul); color: var(--branco);
  font: 700 17px/1 var(--f-titulo); text-decoration: none; text-align: center;
  border: 1px solid var(--azul); border-radius: var(--raio);
  cursor: pointer;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); color: var(--branco); }
.btn:active { transform: translateY(1px); }
@media (min-width: 640px) { .btn { font-size: 18px; } }
.btn-bloco { width: 100%; }
@media (min-width: 640px) { .btn-bloco { width: auto; } }
.hero .btn, .cta-final .btn { border-color: var(--branco); }
.btn-branco { background: var(--branco); color: var(--azul); border-color: var(--branco); }
.btn-branco:hover { background: var(--gelo); border-color: var(--gelo); color: var(--azul-escuro); }
.link-sec { font-weight: 700; color: var(--gelo); }
.link-sec span { display: inline-block; }
.link-sec:hover { color: var(--branco); }
.link-sec:hover span { transform: translateX(4px); }
.micro { font: 500 14px/1.4 var(--f-texto); color: var(--tinta-suave); margin: 12px 0 0; }
.hero .micro, .cta-final .micro { color: var(--gelo); }
.cta-bloco { margin-top: 32px; }
.cta-bloco .link-sec { display: inline-block; margin-top: 24px; min-height: 48px; padding-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .btn, .nav a, .link-sec, .link-sec span, .rodape a, .menu-btn, .topo {
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  }
}

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--branco); border-bottom: 1px solid var(--linha); }
/* única exceção ao "sem sombra": o cabeçalho fixo precisa se separar do que passa por baixo */
.topo.rolou { box-shadow: 0 8px 24px rgba(13, 27, 62, .08); }
.topo-in { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: var(--topo-h); }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--tinta); margin-right: auto; min-height: 48px; }
.logo img { display: block; width: 75px; height: 36px; }
.logo-txt { display: flex; flex-direction: column; line-height: 1; }
.logo-nome { font: 800 22px/1 var(--f-titulo); color: var(--tinta); }
.logo-nome span { color: var(--azul); }
.logo-rio { font: 700 11px/1 var(--f-titulo); letter-spacing: .38em; color: var(--azul); margin-top: 3px; text-transform: uppercase; }
.btn-compacto { min-height: 48px; padding: 0 14px; font-size: 16px; gap: 8px; }
.btn-compacto svg { width: 18px; height: 18px; }
.menu-btn {
  display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: transparent; color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--raio); cursor: pointer;
}
.js .menu-btn { display: inline-flex; }
.menu-fechar { display: none; }

/* sem JS: links em uma linha abaixo do topo */
.nav { order: 5; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 24px; padding-bottom: 8px; }
.nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 48px; color: var(--tinta);
  font-weight: 500; font-size: 16px; text-decoration: none; border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover { color: var(--azul); border-bottom-color: var(--azul); }
.nav a[aria-current="page"] { border-bottom-color: var(--azul); }
.nav-btn { display: none; }

/* com JS no mobile: painel em tela cheia */
.js .nav { display: none; order: 0; flex-basis: auto; }
.js .nav.aberto {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px;
  position: fixed; inset: 0; z-index: 70; background: var(--tinta); padding: 80px var(--gutter) 32px;
}
.js .nav.aberto a:not(.btn):hover { color: var(--branco); }
.js .nav.aberto a:not(.btn) { color: var(--branco); font: 700 24px/1.2 var(--f-titulo); min-height: 56px; }
.js .nav.aberto a[aria-current="page"] { border-bottom-color: var(--azul); }
.js .nav.aberto .nav-btn { display: inline-flex; margin-top: 16px; border-color: var(--branco); width: 100%; }
.js .nav.aberto .menu-fechar {
  display: inline-flex; position: absolute; top: 8px; right: var(--gutter); width: 48px; height: 48px;
  align-items: center; justify-content: center; background: transparent; color: var(--branco);
  border: 1px solid var(--linha-escura); border-radius: var(--raio); cursor: pointer;
}
body.menu-aberto { overflow: hidden; }

@media (max-width: 959px) {
  .logo img { width: 64px; height: 31px; }
  .logo-nome { font-size: 20px; }
  .btn-compacto { padding: 0 12px; }
}
@media (min-width: 960px) {
  .topo-in { flex-wrap: nowrap; gap: 32px; }
  .btn-compacto, .menu-btn, .js .menu-btn { display: none; }
  .nav, .js .nav { display: flex; order: 0; flex-basis: auto; flex-wrap: nowrap; gap: 32px; padding: 0; align-items: center; }
  .nav a:not(.btn) { min-height: var(--topo-h); border-bottom-width: 2px; padding-top: 2px; }
  .nav-btn, .js .nav .nav-btn { display: inline-flex; margin-left: 0; }
  .logo { margin-right: auto; }
  .topo-in { justify-content: space-between; }
  .logo-nome { font-size: 24px; }
}

/* ---------- Seções ---------- */
/* Ritmo vertical por tipo: hero e prova respiram mais; serviços e FAQ são compactos; a faixa é fina */
.secao { padding: 64px 0; scroll-margin-top: var(--topo-h); --fundo-secao: var(--branco); }
.secao-cinza { background: var(--cinza); --fundo-secao: var(--cinza); }
.secao-servicos { padding: 72px 0; }
@media (min-width: 960px) {
  .secao { padding: 96px 0; }
  .secao-portas { padding: 112px 0; }
  .secao-servicos, .secao-faq { padding: 72px 0; }
  .secao-prova { padding: 128px 0; }
  .secao-contrato { padding: 112px 0; }
}
.tit-secao { position: relative; padding-bottom: 16px; margin-bottom: 24px; }
.tit-secao::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 2px; background: var(--azul); }
.rotulo { font: 700 13px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 16px; }
.abertura { font-size: 19px; line-height: 1.5; }
@media (min-width: 960px) { .abertura { font-size: 20px; } }
.sub-tit { margin: 48px 0 16px; font-size: 21px; }
.duas { display: grid; gap: 8px; }
@media (min-width: 960px) {
  .duas { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .duas > :first-child { position: sticky; top: calc(var(--topo-h) + 24px); }
}
.tit-ico { display: flex; align-items: flex-start; gap: 16px; }
.tit-ico .ico { color: var(--azul); flex: none; margin-top: 2px; }
.tit-ico .tit-secao { flex: 1; }
.tit-ico .tit-secao::after { width: 56px; }
.ico { flex: none; display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--tinta); color: var(--branco); padding: 48px 0 64px; }
.hero .diag { position: absolute; right: 0; bottom: 0; width: 60%; height: 35%; pointer-events: none; }
@media (min-width: 960px) { .hero .diag { top: 0; bottom: auto; width: 70%; height: 100%; } }
.hero-in { position: relative; display: grid; gap: 40px; }
.hero h1 { max-width: 18ch; }
.hero .sub, .cta-final .sub { font-size: 19px; line-height: 1.5; color: var(--gelo); margin: 24px 0 0; max-width: 34rem; }
.selo {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px;
  padding: 10px 14px; border: 1px solid var(--azul); border-radius: var(--raio);
  font: 700 13px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--gelo);
}
.selo .ico { color: var(--gelo); }
@media (min-width: 960px) {
  .hero { padding: 120px 0 128px; }
  .hero-in { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .hero h1 { max-width: none; }
  .hero .sub, .cta-final .sub { font-size: 22px; }
}

/* ---------- Bloco de foto placeholder: prancha técnica ---------- */
.foto { margin: 0; position: relative; width: 100%; }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--raio); }
.foto.ph {
  --c: var(--azul);
  position: relative; display: block; overflow: hidden;
  background-color: var(--cinza); color: var(--tinta-suave);
  border: 1px solid var(--linha-clara); border-radius: var(--raio);
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0V32H0' fill='none' stroke='%230A57E6' stroke-opacity='.09'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position:
    left 8px top 8px, left 8px top 8px,
    right 8px top 8px, right 8px top 8px,
    left 8px bottom 8px, left 8px bottom 8px,
    right 8px bottom 8px, right 8px bottom 8px, 0 0;
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 32px 32px;
}
.foto.ph .foto-ico { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; color: var(--azul); }
.foto.ph figcaption {
  position: absolute; left: 20px; right: 20px; bottom: 18px; text-align: left;
  font: 500 14px/1.35 var(--f-texto); color: var(--tinta-suave); max-width: 32ch;
}
.foto.ph .inicial {
  position: absolute; left: 20px; top: 50%; transform: translateY(-62%);
  font: 800 72px/1 var(--f-titulo); color: var(--azul); letter-spacing: -0.02em;
}
.hero .foto.ph {
  --c: rgba(214, 226, 255, .7);
  background-color: var(--tinta); color: var(--gelo); border-color: rgba(214, 226, 255, .4);
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0V32H0' fill='none' stroke='%23D6E2FF' stroke-opacity='.1'/%3E%3C/svg%3E");
}
.hero .foto.ph .foto-ico { color: var(--gelo); width: 40px; height: 40px; }
.hero .foto.ph figcaption { color: var(--gelo); font-size: 15px; }
.foto-rotulo { display: none; position: absolute; left: 22px; top: 18px; font: 500 12px/1 var(--f-texto); color: var(--azul); text-transform: none; letter-spacing: 0; }
.hero .foto-rotulo { color: var(--gelo); opacity: .8; }
.rascunho .foto-rotulo { display: block; }
.r16x9 { aspect-ratio: 16 / 9; }
.r4x3 { aspect-ratio: 4 / 3; }
.r1x1 { aspect-ratio: 1 / 1; }
.rA4 { aspect-ratio: 210 / 297; }
.foto.r1x1 figcaption, .foto.rA4 figcaption { font-size: 13px; }
.foto.r1x1 .foto-ico { width: 24px; height: 24px; top: 18px; right: 18px; }
.rascunho .foto.r1x1 .foto-rotulo { display: none; }
.foto.rA4 .foto-rotulo { top: 58px; }
@media (min-width: 640px) { .foto.rA4 .foto-rotulo { top: 18px; } }
@media (min-width: 640px) { .foto.r1x1 .foto-ico { width: 32px; height: 32px; top: 20px; right: 20px; } }
@media (max-width: 639px) {
  .foto.ph .inicial { font-size: 56px; left: 16px; }
  .foto.ph figcaption { left: 16px; right: 12px; bottom: 14px; }
}

/* ---------- Duas portas ---------- */
.portas { display: grid; gap: 24px; margin-top: 8px; }
.porta { display: flex; flex-direction: column; padding: 32px 24px; border-radius: var(--raio); }
.porta .porta-ico { margin-bottom: 24px; }
.porta h3 { margin-bottom: 8px; }
.porta .chamada { font: 700 19px/1.35 var(--f-titulo); max-width: none; margin-bottom: 16px; }
.porta .btn { margin-top: auto; align-self: flex-start; }
.porta p:last-of-type { margin-bottom: 32px; }
.porta-eletrica { background: var(--azul); color: var(--branco); border-top: 2px solid var(--azul); }
.porta-eletrica .porta-ico { color: var(--branco); }
.porta-clima { background: var(--cinza); border-top: 2px solid var(--azul); }
.porta-clima .porta-ico { color: var(--azul); }
.porta-clima h3, .porta-clima .chamada { color: var(--tinta); }
@media (max-width: 639px) { .porta .btn { align-self: stretch; } }
@media (min-width: 960px) {
  .portas { grid-template-columns: 7fr 5fr; gap: 0; position: relative; }
  .porta { padding: 48px; }
  .porta-eletrica { margin-right: 32px; }
  .porta-clima { margin-left: 32px; }
  .portas::before { content: ""; position: absolute; left: 58.33%; top: 0; bottom: 0; width: 1px; background: var(--linha); }
}

/* ---------- Passos ---------- */
.passos { list-style: none; position: relative; display: grid; gap: 32px; margin-bottom: 40px; }
.passos li { position: relative; padding-left: 72px; min-height: 64px; }
.passos li::before { content: ""; position: absolute; left: 24px; top: 0; bottom: -32px; width: 1px; background: var(--linha); }
.passos li:last-child::before { bottom: 0; }
.passo-n {
  position: absolute; left: 0; top: 0; width: 49px; padding: 0 0 4px; text-align: left;
  font: 800 56px/1 var(--f-titulo); color: var(--azul); background: var(--fundo-secao);
  font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.passos h3 { margin-bottom: 8px; }
.passos p { margin: 0; }
@media (min-width: 960px) {
  .passos { grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .passos::before { content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 1px; background: var(--linha); }
  .passos li { padding: 80px 0 0; min-height: 0; }
  .passos li::before { display: none; }
  .passo-n { width: 80px; padding: 0 16px 0 0; }
}

/* ---------- Pessoas ---------- */
.pessoas { display: grid; gap: 48px; margin: 32px 0; }
.pessoa { display: grid; gap: 16px; align-content: start; }
.pessoa .foto { max-width: 160px; }
.pessoa h3 { margin-bottom: 8px; }
.pessoa p { margin: 0; }
@media (min-width: 640px) {
  .pessoa { grid-template-columns: 200px 1fr; gap: 24px; }
  .pessoa .foto { max-width: none; }
  .pessoa.destaque { grid-template-columns: 240px 1fr; }
}
@media (min-width: 960px) {
  .pessoas { grid-template-columns: 1fr 1fr; gap: 64px; }
  .pessoa { grid-template-columns: 180px 1fr; }
  .pessoa.destaque { grid-template-columns: 220px 1fr; }
}
.formacao { font: 500 14px/1.4 var(--f-texto); letter-spacing: .04em; color: var(--tinta-suave); border-top: 1px solid var(--linha); padding-top: 16px; max-width: none; }

/* ---------- Contatos ---------- */
.contatos { display: grid; gap: 0; align-self: start; }
.contatos li { border-top: 1px solid var(--linha-clara); padding: 16px 0; display: grid; gap: 8px; }
.contatos li:last-child { border-bottom: 1px solid var(--linha-clara); }
.contatos a { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1.3 var(--f-titulo); overflow-wrap: anywhere; font-feature-settings: "tnum"; }
.contatos svg { width: 22px; height: 22px; flex: none; }
.cta-final .contatos { margin-top: 40px; max-width: 34rem; }
.cta-final .contatos a { color: var(--branco); }
.cta-final .contatos li, .cta-final .contatos li:last-child { border-color: rgba(214, 226, 255, .25); }
.cta-final .contatos .rotulo { color: var(--gelo); }
.contatos .rotulo { margin: 0; color: var(--tinta-suave); }
.duas > div > .btn { margin-top: 8px; }
[hidden] { display: none !important; }

/* ---------- Problema, serviços, normas ---------- */
.fecho { font: 700 22px/1.3 var(--f-titulo); color: var(--tinta); border-left: 3px solid var(--azul); padding-left: 16px; margin-top: 32px; }
@media (min-width: 960px) { .fecho { font-size: 26px; } }
.dores li { font: 700 19px/1.4 var(--f-titulo); padding: 16px 0; border-top: 1px solid var(--linha-clara); }
.dores li:last-child { border-bottom: 1px solid var(--linha-clara); }
@media (min-width: 960px) { .dores li { font-size: 21px; padding: 20px 0; } .dores { padding-top: 8px; } }
.servicos li { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--linha-clara); }
.servicos li:last-child { border-bottom: 1px solid var(--linha-clara); }
.servicos .ico { color: var(--azul); margin-top: 4px; }
.servicos strong { display: block; font: 700 19px/1.3 var(--f-titulo); margin-bottom: 4px; }
.servicos span { display: block; max-width: 38rem; }
.linha-unica { margin-top: 24px; font-weight: 500; }
.secao-cinza .servicos li { border-top-color: var(--linha-clara); }
.prova-listas { display: grid; gap: 8px; margin-top: 16px; }
@media (min-width: 960px) { .prova-listas { grid-template-columns: 1fr 1fr; gap: 64px; } }
.normas li { padding: 12px 0; border-top: 1px solid var(--linha-clara); }
.normas li:last-child { border-bottom: 1px solid var(--linha-clara); }
.grade-laudos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 520px; }
.grade-fotos { display: grid; gap: 16px; }
@media (min-width: 640px) { .grade-fotos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .grade-fotos { grid-template-columns: repeat(3, 1fr); gap: 24px; } .grade-laudos { gap: 24px; } }

/* ---------- Depoimento (escondido até haver conteúdo) ---------- */
.depoimento { margin: 48px 0 0; padding: 0 0 0 24px; border-left: 3px solid var(--azul); }
.depoimento p { font: 700 28px/1.25 var(--f-titulo); max-width: 30ch; }
.depoimento footer { font: 500 14px/1.4 var(--f-texto); color: var(--tinta-suave); }

/* ---------- FAQ ---------- */
.faq-item { border-top: 1px solid var(--linha-clara); }
.faq-item:last-child { border-bottom: 1px solid var(--linha-clara); }
.faq-item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 12px 0; cursor: pointer;
  font: 700 19px/1.3 var(--f-titulo); color: var(--tinta);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2V18M2 10H18' stroke='%230A57E6' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.faq-item[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 10H18' stroke='%230A57E6' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq-resp { padding: 0 36px 20px 0; }
.faq-resp p { margin: 0; }

/* ---------- CTA final ---------- */
.cta-final { background: var(--tinta); color: var(--branco); padding: 64px 0; position: relative; }
.cta-final h2 { max-width: 26ch; }
.cta-final-in { position: relative; }
.cta-final .sub { margin-top: 16px; }
@media (min-width: 960px) { .cta-final { padding: 112px 0; } }
/* TROCAR: quando existirem os fundos abstratos (até 300 KB cada), descomentar:
   .cta-eletrica { background-image: url("../img/fundo-eletrica.webp"); background-size: cover; background-blend-mode: soft-light; }
   .cta-clima { background-image: url("../img/fundo-refrigeracao.webp"); background-size: cover; background-blend-mode: soft-light; }
   .rodape { background-image: url("../img/fundo-rodape.webp"); background-size: cover; background-blend-mode: soft-light; }
   Textura a 15% a 25%, nunca atrás de texto pequeno. */

/* ---------- Rodapé ---------- */
.rodape { background: var(--tinta); color: var(--gelo); border-top: 1px solid var(--linha); padding: 48px 0 104px; }
.logo-rodape { margin: 0 0 32px; width: max-content; }
.logo-rodape .logo-nome { color: var(--branco); }
.logo-rodape .logo-nome span, .logo-rodape .logo-rio { color: var(--gelo); }
.rodape-in { display: grid; gap: 32px; border-top: 1px solid rgba(214, 226, 255, .2); padding-top: 32px; }
.rodape .rotulo { color: var(--branco); margin-bottom: 8px; }
.rodape a { color: var(--branco); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.rodape a:hover { color: var(--gelo); text-decoration: underline; }
.rodape svg { width: 20px; height: 20px; flex: none; }
.rodape li { display: flex; align-items: center; min-height: 44px; font-feature-settings: "tnum"; }
.rodape-nome { font: 800 22px/1.2 var(--f-titulo); color: var(--branco); margin-bottom: 8px; }
.rodape p { max-width: 30rem; margin-bottom: 8px; }
.rodape .rodape-nota { font-size: 15px; margin-top: 4px; }
@media (min-width: 640px) { .rodape-in { grid-template-columns: 1fr 1fr; gap: 32px 48px; } }
@media (min-width: 960px) {
  .rodape { padding: 72px 0 56px; }
  .logo-rodape { margin-bottom: 40px; }
  .rodape-in { grid-template-columns: 1fr 1.5fr .8fr 1.3fr; gap: 48px; padding-top: 40px; }
}

/* ---------- Barra fixa de CTA (mobile) ---------- */
.barra-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--branco);
  border-top: 1px solid var(--linha); padding: 8px var(--gutter);
  transform: translateY(100%); visibility: hidden;
}
.barra-cta.visivel { transform: none; visibility: visible; }
.barra-cta .btn { width: 100%; min-height: 56px; }
@media (min-width: 960px) { .barra-cta { display: none; } }

/* =====================================================================
   Lote B: matéria própria, fotos reais, laudo, linha do tempo, motion
   ===================================================================== */

/* grade técnica no hero e no CTA final (papel de engenharia) */
.hero::before, .cta-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0V32H0' fill='none' stroke='%230A57E6' stroke-opacity='.26'/%3E%3C/svg%3E");
}
.cta-final { overflow: hidden; }

/* título de seção: sem sublinhado quando a coluna já é fixa */
.duas .tit-secao { padding-bottom: 0; margin-bottom: 24px; }
.duas .tit-secao::after { display: none; }

/* ---------- Foto real: moldura limpa ---------- */
.quadro { margin: 0; }
.quadro-img { position: relative; overflow: hidden; aspect-ratio: var(--ar, 4 / 3); background: var(--cinza); border: 1px solid var(--linha-clara); border-radius: var(--raio); }
.quadro-img img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.quadro figcaption { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--azul); font: 500 14px/1.4 var(--f-texto); color: var(--tinta-suave); max-width: 42ch; }
.hero .quadro-img { border-color: rgba(214, 226, 255, .4); }
.hero .quadro figcaption { color: var(--gelo); }
.hero-foto { min-width: 0; }

/* varredura térmica sutil por cima da foto do hero: uma passada, sem conteúdo */
.varre::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(214, 226, 255, 0), rgba(214, 226, 255, .22) 70%, rgba(214, 226, 255, .55));
  border-right: 1px solid rgba(214, 226, 255, .7);
}
@keyframes varre { 0% { transform: translateX(-100%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(460%); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .varre::after { animation: varre 2.6s 900ms ease-in-out 1 both; } }

/* composição da home: uma foto por frente */
.comp { position: relative; padding-bottom: 27%; }
.comp-a { margin: 0 0 0 auto; width: 84%; }
.comp-b { margin: 0; position: absolute; left: 0; bottom: 0; width: 58%; }
.comp-b .quadro-img { border: 6px solid var(--tinta); outline: 1px solid rgba(214, 226, 255, .45); }
.chip {
  position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: rgba(13, 27, 62, .88); color: var(--gelo);
  font: 700 13px/1 var(--f-titulo); border-radius: var(--raio);
}
.chip .ico { color: var(--gelo); }

/* ---------- Faixa de fatos ---------- */
.fatos { background: var(--cinza); border-bottom: 1px solid var(--linha-clara); }
.fatos-lista { display: grid; }
.fato { display: grid; align-content: start; grid-template-columns: 36px 1fr; gap: 16px; align-items: start; padding: 20px 0; border-top: 1px solid var(--linha-clara); }
.fato:first-child { border-top: 0; }
.fato .ico { color: var(--azul); margin-top: 2px; }
.fato strong { display: block; font: 700 19px/1.25 var(--f-titulo); margin-bottom: 2px; }
.fato span { display: block; font-size: 15px; line-height: 1.45; color: var(--tinta-suave); }
@media (min-width: 960px) {
  .fatos-lista { grid-template-columns: repeat(4, 1fr); }
  .fato { grid-template-columns: 1fr; gap: 14px; padding: 40px 28px; border-top: 0; border-left: 1px solid var(--linha-clara); }
  .fato:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- Portas com foto, desenho e "para quem" ---------- */
.porta { overflow: hidden; }
.porta-foto { margin: -32px -24px 24px; }
.porta-foto .quadro-img { border: 0; border-radius: 0; }
.porta-topo { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.porta-topo .porta-ico { margin-bottom: 0; }
.porta-desenho { width: 120px; height: auto; flex: none; opacity: .32; }
.porta p.pq-t { font: 700 15px/1.2 var(--f-titulo); margin: 4px 0 8px; max-width: none; }
.para-quem { margin: 0 0 28px; border-top: 1px solid rgba(255, 255, 255, .35); }
.para-quem li { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .35); font: 500 16px/1.35 var(--f-texto); }
.porta-clima .para-quem, .porta-clima .para-quem li { border-color: var(--linha-clara); }
@media (min-width: 960px) {
  .porta-foto { margin: -48px -48px 32px; }
  .porta-desenho { width: 150px; }
}

/* ---------- Passos com arte animada ---------- */
.arte { margin-top: 20px; max-width: 360px; }
.arte-svg { display: block; width: 100%; height: auto; border-radius: var(--raio); border: 1px solid rgba(10, 87, 230, .35); }
.passos p { margin-bottom: 0; }
/* estado padrão = estado final, legível sem JS. A animação só roda com .anim (JS) e sem reduced motion. */
.arte .a-scan { opacity: 0; }
@keyframes a-scan { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(200px); opacity: 0; } }
@keyframes a-surge { 0% { opacity: 0; transform: scale(.35); } 100% { opacity: 1; transform: none; } }
@keyframes a-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes a-sobe { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes a-pop { 0% { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes a-fluxo { to { stroke-dashoffset: -26; } }
.arte svg .a-b, .arte svg .a-r, .arte svg .a-m, .arte svg .a-ok, .arte svg .a-mira { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .anim .a-scan { animation: a-scan 2s var(--base, 0s) ease-in-out both; }
  .anim .a-b { animation: a-surge 800ms calc(var(--base, 0s) + 1.1s + var(--i) * 110ms) cubic-bezier(.2, .7, .2, 1) both; }
  .anim .a-mira { animation: a-pop 500ms calc(var(--base, 0s) + 1.9s) ease-out both; }
  .anim .a-lab { animation: a-fade 500ms calc(var(--base, 0s) + 2.3s) ease-out both; }
  .anim .a-r { animation: a-sobe 500ms calc(var(--base, 0s) + var(--i) * 260ms) cubic-bezier(.2, .7, .2, 1) both; }
  .anim .a-ok { animation: a-pop 500ms calc(var(--base, 0s) + 2.6s) ease-out both; }
  .anim .a-m { animation: a-pop 500ms calc(var(--base, 0s) + .5s + var(--i) * 420ms) ease-out both; }
  .anim .a-fl { animation: a-fade 600ms calc(var(--base, 0s) + 1.6s + var(--i) * 140ms) ease-out both, a-fluxo 1.6s linear calc(var(--base, 0s) + 2.2s) infinite; }
}
@media (prefers-reduced-motion: reduce) { .arte * { animation: none !important; } }

/* ---------- Bloco da medição (foto ao lado do texto) ---------- */
.bloco-medicao { display: grid; gap: 24px; margin-top: 56px; align-items: center; }
.bloco-medicao h3 { margin-bottom: 8px; }
.bloco-medicao .btn { margin-top: 8px; }
@media (min-width: 960px) { .bloco-medicao { grid-template-columns: 5fr 6fr; gap: 64px; margin-top: 80px; } }

/* ---------- Linha do tempo do contrato ---------- */
.linha-tempo { display: grid; gap: 32px; margin-top: 48px; position: relative; }
.linha-tempo li { position: relative; padding-left: 44px; }
.linha-tempo li::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: -32px; width: 1px; background: var(--linha); }
.linha-tempo li:last-child::before { display: none; }
.linha-tempo li::after { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--branco); border: 3px solid var(--azul); }
.linha-tempo li:last-child::after { background: var(--azul); }
.lt-quando { display: block; font: 700 15px/1.2 var(--f-titulo); color: var(--azul); margin-bottom: 6px; }
.linha-tempo h3 { font-size: 22px; margin-bottom: 6px; }
.linha-tempo p { margin: 0; font-size: 16px; line-height: 1.5; max-width: 30ch; color: var(--tinta-suave); }
@media (min-width: 960px) {
  .linha-tempo { grid-template-columns: repeat(4, 1fr); gap: 40px; }
  .linha-tempo::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--linha); }
  .linha-tempo li { padding: 40px 0 0; }
  .linha-tempo li::before { display: none; }
  .linha-tempo li::after { left: 0; top: 0; }
}

/* ---------- Laudo desenhado (A4 com tarjas) ---------- */
.prova-laudos { display: grid; gap: 32px; margin: 8px 0 24px; }
.laudos-par { display: grid; gap: 24px; }
.laudo-fig { margin: 0; }
.laudo-wrap { container-type: inline-size; max-width: 360px; }
.laudo {
  position: relative; aspect-ratio: 210 / 297; background: var(--branco); border: 1px solid var(--linha-clara); border-radius: var(--raio);
  padding: 6cqw; font-size: 11px; font-size: 3.3cqw; line-height: 1.3; color: var(--tinta); overflow: hidden;
  display: flex; flex-direction: column; gap: 4.2cqw;
}
.laudo .foto-rotulo { left: auto; right: 8px; top: 6px; }
.l-cab { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; border-bottom: 1px solid var(--linha-clara); padding-bottom: 3.5cqw; }
.l-cab img { width: 28cqw; height: auto; display: block; }
.l-cab b { font: 700 3.4cqw/1.1 var(--f-titulo); text-align: right; }
.l-tit { font: 700 3.4cqw/1 var(--f-titulo); color: var(--azul); margin: 0 0 2.2cqw; max-width: none; }
.l-bloco { min-width: 0; }
.l-lin { display: flex; align-items: center; gap: 2.5cqw; margin-bottom: 1.8cqw; color: var(--tinta-suave); font-size: 3cqw; }
.l-lin span { width: 17cqw; flex: none; }
.tarja { display: block; width: var(--w, 60%); height: 3.2cqw; background: var(--tinta); border-radius: 1px; }
.l-lin .tarja { flex: none; width: calc(var(--w) * .6); }
.l-termo svg { display: block; width: 100%; height: auto; border-radius: 2px; }
.l-cinza { height: 2.4cqw; width: var(--w); background: var(--linha-clara); border-radius: 1px; margin-bottom: 1.8cqw; }
.l-tab { display: grid; grid-template-columns: 1fr 0.7fr 1fr; gap: 3cqw; align-items: center; padding: 1.6cqw 0; border-bottom: 1px solid rgba(10, 87, 230, .15); }
.l-tab .tarja { width: 100%; }
.l-tab-h { color: var(--tinta-suave); font-size: 3cqw; border-bottom-color: var(--linha-clara); }
.l-pe { margin-top: auto; display: flex; justify-content: space-between; color: var(--tinta-suave); font-size: 2.8cqw; border-top: 1px solid var(--linha-clara); padding-top: 2.4cqw; }
.laudo-fig figcaption { margin-top: 10px; font: 500 14px/1.4 var(--f-texto); color: var(--tinta-suave); }
.laudo-txt p { max-width: 30rem; }
.laudo-txt ul { margin-bottom: 16px; }
.laudo-txt li { padding: 12px 0; border-top: 1px solid var(--linha-clara); font-weight: 500; }
.laudo-txt li:last-child { border-bottom: 1px solid var(--linha-clara); }
.laudo-txt .nota { font: 500 14px/1.4 var(--f-texto); color: var(--tinta-suave); }
@media (min-width: 640px) { .laudos-par { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .prova-laudos { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; } }

.galeria { display: grid; gap: 28px 24px; margin-bottom: 32px; }
.galeria > .foto { align-self: start; }
@media (min-width: 640px) { .galeria { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .galeria { grid-template-columns: repeat(3, 1fr); } }

/* ---------- CTA final em duas colunas, com painel ---------- */
.cta-final-in { display: grid; gap: 40px; }
.cta-final h2 { max-width: 20ch; }
.painel { border: 1px solid rgba(214, 226, 255, .3); border-top: 2px solid var(--azul); padding: 28px 24px; align-self: center; border-radius: var(--raio); background: rgba(13, 27, 62, .6); }
.painel-tit { font: 700 21px/1.2 var(--f-titulo); color: var(--branco); margin: 0 0 12px; max-width: none; }
.painel li { display: grid; grid-template-columns: 20px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(214, 226, 255, .2); color: var(--gelo); font-size: 17px; line-height: 1.4; }
.painel li .ico { color: var(--gelo); margin-top: 3px; }
.painel-nota { font-size: 15px; color: var(--gelo); margin: 12px 0 0; padding-top: 14px; border-top: 1px solid rgba(214, 226, 255, .2); max-width: none; }
@media (min-width: 960px) {
  .cta-final-in { grid-template-columns: 7fr 5fr; gap: 80px; align-items: center; }
  .painel { padding: 36px 36px 28px; }
}

/* ---------- Entrada do hero (só CSS; sem reduced motion) ---------- */
@keyframes entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-txt > * { animation: entra 560ms cubic-bezier(.2, .7, .2, 1) both; }
  .hero-txt > :nth-child(2) { animation-delay: 80ms; }
  .hero-txt > :nth-child(3) { animation-delay: 160ms; }
  .hero-txt > :nth-child(4) { animation-delay: 240ms; }
  .hero-foto { animation: entra 700ms cubic-bezier(.2, .7, .2, 1) 300ms both; }
}

/* ---------- Revelar ao rolar (JS adiciona .rv-pre; sem JS nada fica escondido) ---------- */
.rv-pre { opacity: 0; transform: translateY(14px); }
.rv-in { opacity: 1; transform: none; transition: opacity 520ms ease var(--d, 0ms), transform 520ms cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
@media (prefers-reduced-motion: reduce), print { .rv-pre { opacity: 1; transform: none; } }

.hero h1 { text-wrap: pretty; }
@media (min-width: 960px) { .hero h1 { max-width: 15em; } }

/* =====================================================================
   Lote C: foto da equipe em campo, serviços reais, acabamento
   ===================================================================== */
.quem-grid { display: grid; gap: 32px; margin: 32px 0; align-items: start; }
.quem-grid > .quadro .quadro-img { --ar: 4 / 3; }
.quem-grid .pessoas { grid-template-columns: 1fr; gap: 32px; margin: 0; }
@media (min-width: 960px) {
  .quem-grid { grid-template-columns: 5fr 7fr; gap: 64px; margin-top: 40px; }
  .quem-grid .pessoas { grid-template-columns: 1fr; gap: 40px; }
}
.galeria-reais { margin-top: 32px; margin-bottom: 0; }
@media (min-width: 640px) { .galeria-reais { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .galeria-reais { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* Lote C: acabamento de respiro */
.hero { padding: 40px 0 48px; }
@media (min-width: 960px) { .hero { padding: 80px 0 88px; } }
.secao-prova { padding: 72px 0; }
@media (min-width: 960px) { .secao-prova { padding: 96px 0; } }
.sub-tit { margin-top: 40px; }
.quem-grid .pessoa, .quem-grid .pessoa.destaque { grid-template-columns: 1fr; }
@media (min-width: 640px) { .quem-grid .pessoa, .quem-grid .pessoa.destaque { grid-template-columns: 140px 1fr; gap: 24px; } }
.quem-grid .pessoa .foto { max-width: 140px; }
.comp-b { width: 50%; }