/* ============================================================
   SUPPER-AIR COMPRESSORES — NOVO SITE
   Sistema editorial/corporativo industrial — construído do zero.
   Sem cards genéricos, sem ícone-em-caixa como padrão, sem hero+6cards+CTA.
   Hierarquia por tipografia, proporção, espaço em branco e fotografia real.
   ============================================================ */

:root{
  --azul-oficial:#0090EE;
  --azul-estrutural:#075A96;
  --azul-profundo:#063B63;
  --vermelho:#F4373E;
  --vermelho-escuro:#C42127;
  --grafite:#1E2226;
  --grafite-suave:#4A5157;
  --cinza:#7C858C;
  --linha:#DDE2E6;
  --fundo-claro:#F6F7F8;
  --branco:#FFFFFF;
  --sucesso:#2E7D32;
  --foco:#1E88C7;

  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max-largura: 1240px;
  --max-texto: 62ch;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--fonte); color:var(--grafite);
  background:var(--branco); line-height:1.6; -webkit-font-smoothing:antialiased;
  font-size:16px;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--azul-estrutural); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--foco); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

.container{max-width:var(--max-largura); margin:0 auto; padding:0 24px;}
.container--estreito{max-width:820px; margin:0 auto; padding:0 24px;}

/* ---------- Tipografia editorial ---------- */
h1,h2,h3,h4{line-height:1.15; margin:0; color:var(--grafite); font-weight:800; letter-spacing:-0.01em;}
.display{font-size:clamp(2.4rem, 5vw, 4.2rem); font-weight:800; line-height:1.05; letter-spacing:-0.02em;}
h2{font-size:clamp(1.7rem, 2.6vw, 2.5rem);}
h3{font-size:1.25rem; font-weight:700;}
p{margin:0 0 1em 0; color:var(--grafite-suave);}
.texto-grande{font-size:1.2rem; line-height:1.55; color:var(--grafite-suave); max-width:var(--max-texto);}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--azul-estrutural); margin-bottom:16px;
}
.eyebrow::before{content:""; width:28px; height:2px; background:var(--azul-estrutural); display:block;}
.eyebrow--claro{color:#BFE0F5;}
.eyebrow--claro::before{background:#BFE0F5;}
.eyebrow--urgencia{color:var(--vermelho);}
.eyebrow--urgencia::before{background:var(--vermelho);}

/* ---------- Ritmo de seção — varia, não é o mesmo componente repetido ---------- */
.sec{padding:88px 0;}
.sec--compacta{padding:56px 0;}
.sec--claro{background:var(--fundo-claro);}
.sec--escuro{background:var(--grafite); color:#E7EBEE;}
.sec--escuro h2, .sec--escuro h3, .sec--escuro .eyebrow{color:#fff;}
.sec--escuro p{color:#B7C0C7;}
.regua{border:none; border-top:1px solid var(--linha); margin:0;}

/* ---------- Botões — sem canto arredondado excessivo, linguagem editorial ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; font-weight:700; font-size:.98rem; cursor:pointer;
  border:1.5px solid transparent; border-radius:2px; transition:background .15s, color .15s, border-color .15s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;}
.btn--primario{background:var(--grafite); color:#fff;}
.btn--primario:hover{background:var(--azul-profundo);}
.btn--urgencia{background:var(--vermelho); color:#fff;}
.btn--urgencia:hover{background:var(--vermelho-escuro);}
.btn--linha{background:transparent; border-color:var(--grafite); color:var(--grafite);}
.btn--linha:hover{background:var(--grafite); color:#fff;}
.btn--linha-clara{background:transparent; border-color:rgba(255,255,255,.55); color:#fff;}
.btn--linha-clara:hover{background:#fff; color:var(--grafite);}
.btn__ico{width:18px; height:18px; flex-shrink:0;}

/* ---------- Cabeçalho — barra utilitária + nav, redesenhado ---------- */
.topbar{background:var(--grafite); color:#B7C0C7; font-size:.8rem;}
.topbar .container{display:flex; justify-content:space-between; align-items:center; padding:7px 24px;}
.topbar a{color:#D7DEE3;}
.topbar a:hover{color:#fff;}
.topbar__links{display:flex; gap:18px; align-items:center;}

.cabecalho{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--linha);}
.cabecalho__barra{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.cabecalho__logo img{height:36px; width:auto;}
.cabecalho__nav{display:flex; gap:28px; align-items:center;}
.cabecalho__nav a{color:var(--grafite); font-weight:600; font-size:.92rem;}
.cabecalho__nav a:hover{color:var(--azul-estrutural); text-decoration:none;}
.menu-toggle{display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--grafite); padding:4px;}

@media (max-width:960px){
  .topbar{display:none;}
  .cabecalho__nav{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; align-items:flex-start; padding:16px 24px 20px;
    border-bottom:1px solid var(--linha); display:none; gap:16px;
  }
  .cabecalho__nav.aberto{display:flex;}
  .menu-toggle{display:block;}
  .cabecalho__urgencia span{font-size:.82rem;}
  .cabecalho__urgencia{padding:9px 12px;}
}
@media (max-width:360px){
  .cabecalho__urgencia{padding:8px 10px;}
  .cabecalho__urgencia span{font-size:.74rem;}
}

/* ---------- Hero editorial — assimétrico, foto ampla, sem card sobreposto ---------- */
.hero3{position:relative; min-height:640px; display:flex; align-items:center; background:var(--grafite);}
.hero3__bg{position:absolute; inset:0; background-size:cover; background-position:center;}
.hero3__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(20,23,26,.94) 0%, rgba(20,23,26,.75) 38%, rgba(20,23,26,.25) 68%, rgba(20,23,26,.08) 100%);}
.hero3__conteudo{position:relative; z-index:2; max-width:640px; padding:80px 0;}
.hero3 h1{color:#fff;}
.hero3 .texto-grande{color:#D7DEE3; margin-top:20px;}
.hero3__cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
@media (max-width:760px){
  .hero3{min-height:560px;}
  .hero3__conteudo{padding:60px 0;}
  .hero3__bg::after{background:linear-gradient(180deg, rgba(20,23,26,.5) 0%, rgba(20,23,26,.88) 65%, rgba(20,23,26,.97) 100%);}
}

/* ---------- Faixa de autoridade editorial — numerais grandes, réguas finas, sem caixa ---------- */
.faixa-dados{background:var(--grafite); padding:0;}
.faixa-dados__linha{display:flex; flex-wrap:wrap;}
.faixa-dados__item{
  flex:1 1 220px; padding:34px 28px; border-left:1px solid rgba(255,255,255,.14);
}
.faixa-dados__item:first-child{border-left:none;}
.faixa-dados__numero{display:block; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:800; color:#fff; letter-spacing:-.01em;}
.faixa-dados__rotulo{display:block; font-size:.82rem; color:#9DAAB2; margin-top:6px;}
@media (max-width:700px){
  .faixa-dados__item{flex:1 1 50%; border-left:none; border-top:1px solid rgba(255,255,255,.14);}
}

/* ---------- Split editorial (texto + foto, assimétrico, reutilizável com proporção variável) ---------- */
.split{display:grid; gap:56px; align-items:center;}
.split--60-40{grid-template-columns:1.5fr 1fr;}
.split--40-60{grid-template-columns:1fr 1.5fr;}
.split--50-50{grid-template-columns:1fr 1fr;}
@media (max-width:860px){ .split{grid-template-columns:1fr !important; gap:32px;} }
.split img{width:100%;}
.split__legenda{margin-top:14px; padding-left:16px; border-left:3px solid var(--azul-estrutural); font-size:.9rem; color:var(--cinza);}
.split__legenda strong{display:block; color:var(--grafite); font-size:.95rem; margin-bottom:2px;}

/* ---------- Duas frentes (Compressores / Rede de Ar) — bloco editorial grande, não card ---------- */
.frentes{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--linha);}
@media (max-width:860px){.frentes{grid-template-columns:1fr;}}
.frente{background:#fff; padding:52px 44px; position:relative;}
.frente--escura{background:var(--grafite); color:#fff;}
.frente--escura h3, .frente--escura .eyebrow{color:#fff;}
.frente--escura p{color:#B7C0C7;}
.frente h3{font-size:1.7rem; margin-bottom:14px;}
.frente ul{list-style:none; padding:0; margin:18px 0 26px;}
.frente li{padding:8px 0; border-top:1px solid var(--linha); font-size:.95rem; color:var(--grafite-suave);}
.frente--escura li{border-top-color:rgba(255,255,255,.14); color:#C7CFD5;}
.frente li:first-child{border-top:none;}

/* ---------- Processo — linha horizontal conectada, sem círculo-em-caixa ---------- */
.processo3{display:flex; position:relative; margin-top:44px;}
.processo3::before{content:""; position:absolute; top:9px; left:0; right:0; height:1px; background:var(--linha);}
.processo3__item{flex:1; padding-right:24px; position:relative;}
.processo3__marca{width:18px; height:18px; border-radius:50%; background:var(--grafite); border:3px solid #fff; position:relative; z-index:1; margin-bottom:18px; box-shadow:0 0 0 1px var(--linha);}
.processo3__item h4{font-size:1rem; margin-bottom:6px;}
.processo3__item p{font-size:.88rem; margin:0;}
@media (max-width:760px){
  .processo3{flex-direction:column; gap:26px;}
  .processo3::before{left:9px; top:0; bottom:0; width:1px; height:auto; right:auto;}
  .processo3__item{padding-right:0; padding-left:30px;}
  .processo3__marca{position:absolute; left:0; top:0; margin-bottom:0;}
}

/* ---------- Bloco de dado técnico editorial (substitui tabela crua) ---------- */
.specs{display:flex; flex-wrap:wrap; border-top:1px solid var(--linha); border-bottom:1px solid var(--linha); margin:28px 0;}
.specs__item{flex:1 1 180px; padding:24px 26px; border-left:1px solid var(--linha);}
.specs__item:first-child{border-left:none;}
.specs__numero{display:block; font-size:1.7rem; font-weight:800; color:var(--azul-profundo);}
.specs__rotulo{display:block; font-size:.82rem; color:var(--cinza); margin-top:4px;}
@media (max-width:700px){ .specs__item{flex:1 1 50%; border-left:none; border-top:1px solid var(--linha);} .specs__item:nth-child(even){border-left:1px solid var(--linha);} }

/* ---------- Foto ampla em banda, com legenda sobreposta discreta ---------- */
.banda-foto{position:relative;}
.banda-foto img{width:100%; display:block;}
.banda-foto__legenda{
  position:absolute; left:0; bottom:0; padding:20px 28px;
  background:linear-gradient(0deg, rgba(20,23,26,.86) 0%, rgba(20,23,26,0) 100%);
  color:#fff; width:100%;
}
.banda-foto__legenda strong{display:block; font-size:1rem;}
.banda-foto__legenda span{font-size:.86rem; color:#D7DEE3;}

/* ---------- Galeria de prova (3 fotos, sem card/sombra — só régua) ---------- */
.galeria{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--linha);}
@media (max-width:760px){.galeria{grid-template-columns:1fr;}}
.galeria__item{background:#fff;}
.galeria__item img{width:100%;}
.galeria__legenda{padding:16px 18px;}
.galeria__legenda strong{display:block; font-size:.92rem; color:var(--grafite); margin-bottom:3px;}
.galeria__legenda span{font-size:.84rem; color:var(--cinza);}

/* ---------- Setores — lista editorial, não card ---------- */
.setores{display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--linha);}
.setores__item{flex:1 1 200px; padding:22px 0; border-bottom:1px solid var(--linha); padding-right:20px;}
.setores__item h4{font-size:1.02rem; margin-bottom:4px;}
.setores__item p{font-size:.86rem; margin:0; color:var(--cinza);}

/* ---------- FAQ ---------- */
.faq3 details{border-bottom:1px solid var(--linha); padding:18px 0;}
.faq3 summary{cursor:pointer; font-weight:700; color:var(--grafite); list-style:none; display:flex; justify-content:space-between; gap:14px; font-size:1.02rem;}
.faq3 summary::-webkit-details-marker{display:none;}
.faq3 summary::after{content:"+"; font-size:1.3rem; color:var(--azul-estrutural); flex-shrink:0;}
.faq3 details[open] summary::after{content:"–";}
.faq3 p{margin-top:12px;}

/* ---------- Formulário — editorial, sem sombra pesada ---------- */
.form3{border:1px solid var(--linha); padding:32px;}
.campo3{margin-bottom:18px;}
.campo3 label{display:block; font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:7px; color:var(--grafite);}
.campo3 input, .campo3 select, .campo3 textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--linha); border-radius:2px;
  font-family:var(--fonte); font-size:1rem; color:var(--grafite); background:#fff;
}
.campo3 input:focus, .campo3 select:focus, .campo3 textarea:focus{outline:none; border-color:var(--foco); box-shadow:0 0 0 3px rgba(30,136,199,.15);}
.campo3-erro{color:var(--vermelho-escuro); font-size:.82rem; margin-top:5px; display:none;}
.campo3.invalido input, .campo3.invalido select, .campo3.invalido textarea{border-color:var(--vermelho-escuro);}
.campo3.invalido .campo3-erro{display:block;}
.chips3{display:flex; flex-wrap:wrap; gap:8px;}
.chip3{padding:9px 15px; border:1.5px solid var(--linha); border-radius:2px; background:#fff; font-size:.88rem; font-weight:600; cursor:pointer; color:var(--grafite);}
.chip3[aria-pressed="true"]{background:var(--grafite); border-color:var(--grafite); color:#fff;}
.toggle3{display:flex; gap:10px;}
.toggle3 button{flex:1; padding:12px; border:1.5px solid var(--linha); border-radius:2px; background:#fff; font-weight:700; cursor:pointer;}
.toggle3 button[aria-pressed="true"]{background:var(--grafite); color:#fff; border-color:var(--grafite);}
.form3-nota{font-size:.8rem; color:var(--cinza); margin-top:12px;}

/* ---------- Contato — tipografia, sem ícone gigante ---------- */
.contato-lista{border-top:1px solid var(--linha);}
.contato-lista__item{padding:22px 0; border-bottom:1px solid var(--linha); display:grid; grid-template-columns:140px 1fr; gap:20px; align-items:baseline;}
@media (max-width:560px){.contato-lista__item{grid-template-columns:1fr; gap:4px;}}
.contato-lista__rotulo{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--cinza); font-weight:700;}
.contato-lista__valor{font-size:1.15rem; color:var(--grafite); font-weight:600;}
.contato-lista__valor a{color:var(--grafite);}

/* ---------- Rodapé — editorial, não depósito de link ---------- */
.rodape3{background:var(--grafite); color:#B7C0C7; padding:64px 0 28px;}
.rodape3__topo{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.14);}
@media (max-width:820px){.rodape3__topo{grid-template-columns:1fr 1fr; row-gap:32px;}}
@media (max-width:480px){.rodape3__topo{grid-template-columns:1fr;}}
.rodape3 h4{color:#fff; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; font-weight:700;}
.rodape3 ul{list-style:none; padding:0; margin:0;}
.rodape3 li{margin-bottom:10px; font-size:.92rem;}
.rodape3 a{color:#D7DEE3;}
.rodape3 a:hover{color:#fff;}
.rodape3__marca p{color:#9DAAB2; font-size:.9rem; max-width:32ch; margin-top:16px;}
.rodape3__social{display:flex; gap:12px; margin-top:18px;}
.rodape3__social a{width:34px; height:34px; border:1px solid rgba(255,255,255,.3); border-radius:50%; display:flex; align-items:center; justify-content:center;}
.rodape3__social a:hover{background:rgba(255,255,255,.1);}
.rodape3__base{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:22px; font-size:.78rem; color:#8B98A0;}

.wa-flutuante3{
  position:fixed; bottom:22px; right:22px; z-index:60; background:#25D366; color:#fff;
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.wa-flutuante3:hover{background:#1EBE57; text-decoration:none;}

.breadcrumb3{font-size:.82rem; color:var(--cinza); padding:16px 0 0;}
.breadcrumb3 a{color:var(--cinza);}
.breadcrumb3 a:hover{color:var(--azul-estrutural);}

.lista-limpa{list-style:none; padding:0; margin:0;}
.lista-limpa li{padding:10px 0 10px 22px; position:relative; border-top:1px solid var(--linha); font-size:.95rem; color:var(--grafite-suave);}
.lista-limpa li:first-child{border-top:none;}
.lista-limpa li::before{content:"—"; position:absolute; left:0; color:var(--azul-estrutural);}

.badge-setor{display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--sucesso); border:1px solid var(--sucesso); padding:3px 9px; border-radius:2px;}