.container{ max-width:var(--container); margin:0 auto; padding:0 var(--sp-5); }
.container-narrow{ max-width:var(--container-narrow); margin:0 auto; padding:0 var(--sp-5); }

/* ---------- Header — hamburguer + logo central + telefone, igual à
   referência (nada de menu horizontal desktop; o hub é mobile-first e
   a navegação é sempre pelo menu deslizante). ---------- */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  display:grid; grid-template-columns:44px 1fr 44px; align-items:center;
  padding:var(--sp-3) var(--sp-5);
  background:rgba(255,255,255,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .brand{ display:flex; align-items:center; justify-content:center; }
.site-header .brand img{ height:30px; width:auto; }
.menu-toggle{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:19px; color:var(--accent); transition:background var(--dur-fast) var(--ease);
}
.menu-toggle:hover{ background:var(--gray-100); }
.header-call{
  justify-self:end;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff;
  font-size:16px; transition:transform var(--dur-fast) var(--ease);
}
.header-call:hover{ transform:scale(1.08); }

.mobile-menu{
  max-height:0; overflow:hidden; background:var(--surface); border-bottom:1px solid transparent;
  transition:max-height var(--dur-normal) var(--ease);
  position:sticky; top:57px; z-index:calc(var(--z-header) - 1);
}
.mobile-menu.open{ max-height:220px; border-bottom-color:var(--border); }
.mobile-menu a{ display:block; padding:var(--sp-4) var(--sp-5); font-weight:700; font-size:var(--fs-small); color:var(--text-soft); border-top:1px solid var(--border); }
.mobile-menu a.active{ color:var(--accent-2); }

/* ---------- Hero — versão escura "landing page de conversão": grid de
   blueprint + foto de painel elétrico (banco de imagens, uso livre/
   comercial — Pexels) tingida de azul + marca d'água. ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:var(--sp-10) var(--sp-5) var(--sp-8);
  text-align:left;
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(47,95,214,0.35), transparent 60%),
    linear-gradient(155deg, var(--navy-900), var(--navy-800) 55%, var(--navy-700));
  color:#fff;
}
.hero-media{
  position:absolute; top:0; right:0; bottom:0; width:55%;
  background-image:url('../assets/hero-panel.png');
  background-size:cover; background-position:right center;
  -webkit-mask-image:linear-gradient(to left, black 55%, transparent 100%);
  mask-image:linear-gradient(to left, black 55%, transparent 100%);
  pointer-events:none;
}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(10,21,51,0.72), rgba(47,95,214,0.38));
  mix-blend-mode:multiply;
}
.hero-media::before{
  content:''; position:absolute; inset:0; background:var(--navy-900); opacity:0.15;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(160deg, black, transparent 75%);
  mask-image:linear-gradient(160deg, black, transparent 75%);
  pointer-events:none;
}
.hero::after{
  content:''; position:absolute; bottom:-8%; right:-10%; width:60%; height:70%;
  background-image:url('../assets/logo-alt.png');
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:0.07; filter:brightness(0) invert(1); pointer-events:none;
}
.hero-dots{
  position:absolute; top:0; right:0; width:55%; height:70%;
  background-image:radial-gradient(rgba(255,255,255,0.25) 1.4px, transparent 1.4px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(ellipse at top right, black 30%, transparent 72%);
  mask-image:radial-gradient(ellipse at top right, black 30%, transparent 72%);
  pointer-events:none;
}
.hero-curve-svg{ position:absolute; left:0; right:0; top:8%; width:100%; height:120px; opacity:0.5; pointer-events:none; }
.hero .brand-logo{
  width:min(600px, 90%); margin:0 0 var(--sp-6); position:relative;
  filter:drop-shadow(0 4px 22px rgba(255,255,255,0.30)) drop-shadow(0 0 40px rgba(255,255,255,0.12));
}
.hero h1{ color:#fff; margin-bottom:var(--sp-3); position:relative; }
.hero h1 .gold{ color:var(--gold); display:block; }
.hero .lede{ max-width:460px; margin:0 0 var(--sp-6); font-size:1.02rem; color:rgba(255,255,255,0.72); position:relative; }

.hero-specialties{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3) var(--sp-6);
  margin-bottom:var(--sp-7); max-width:460px;
}
.hero-specialties div{ display:flex; align-items:center; gap:var(--sp-2); font-size:0.9rem; font-weight:600; }
.hero-specialties .ic{ color:var(--gold); width:19px; height:19px; }

.cta-row{ position:relative; display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-8); }
.cta-btn{
  display:inline-flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-6);
  border-radius:var(--radius-md); font-weight:800; font-size:0.95rem;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  box-shadow:var(--shadow-md);
}
.cta-btn:hover{ transform:translateY(-2px) scale(1.02); }
.cta-btn .ic{ width:20px; height:20px; }
.cta-btn small{ display:block; font-weight:600; font-size:0.72rem; opacity:0.85; }
.cta-btn.gold{ background:linear-gradient(135deg, var(--gold), var(--gold-600)); color:var(--navy-900); }
.cta-btn.whatsapp{ background:#25D366; color:#fff; }

.trust-row{ position:relative; display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; padding-top:var(--sp-6); border-top:1px solid rgba(255,255,255,0.14); }
.trust-stars{ color:var(--gold); font-size:1rem; letter-spacing:2px; }
.trust-badges{ display:flex; flex-wrap:wrap; gap:var(--sp-5); }
.trust-badges div{ display:flex; align-items:center; gap:var(--sp-2); font-size:0.82rem; color:rgba(255,255,255,0.75); font-weight:600; }
.trust-badges .ic{ width:18px; height:18px; color:var(--gold); flex:none; }
@media (max-width:520px){ .hero-specialties{ grid-template-columns:1fr; } }

/* ---------- Link buttons (hub) ---------- */
.link-list{ display:flex; flex-direction:column; gap:var(--sp-3); max-width:var(--container-narrow); margin:0 auto; padding:0 var(--sp-5); }

/* ---------- Grids ---------- */
.grid-services{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.grid-clients{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.grid-certs{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.grid-diff{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6); text-align:center; }
@media (max-width:820px){
  .grid-services{ grid-template-columns:repeat(2,1fr); }
  .grid-clients{ grid-template-columns:repeat(2,1fr); }
  .grid-certs{ grid-template-columns:repeat(1,1fr); }
  .grid-diff{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:420px){
  .grid-services{ grid-template-columns:1fr; }
  .grid-clients{ grid-template-columns:repeat(2,1fr); }
}

section{ padding:var(--sp-16) 0; }
section.alt{ background:var(--surface-alt); }

/* ---------- Rodapé ---------- */
/* Faixa de conformidade — CNPJ real, CREA sem número (não temos o
   registro real ainda) e um selo genérico de compromisso. */
.footer-compliance{
  background:var(--navy-950, #06102a); padding:var(--sp-5);
  display:flex; justify-content:center; gap:var(--sp-8); flex-wrap:wrap; text-align:left;
}
.compliance-item{ display:flex; align-items:center; gap:var(--sp-3); color:#fff; }
.compliance-item .icon{ width:38px; height:38px; flex:none; border-radius:var(--radius-sm); background:rgba(240,180,41,0.14); color:var(--gold); display:flex; align-items:center; justify-content:center; }
.compliance-item .t{ font-weight:800; font-size:0.82rem; }
.compliance-item .s{ font-size:var(--fs-tiny); color:rgba(255,255,255,0.6); }

.site-footer{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--navy-900), var(--navy-800));
  color:#fff; padding:calc(var(--sp-16) + 20px) var(--sp-5) var(--sp-10); text-align:center;
}
.footer-wave{ position:absolute; top:0; left:0; width:100%; height:40px; }
.site-footer .brand-logo{ max-width:140px; margin:0 auto var(--sp-4); filter:brightness(0) invert(1); }
.site-footer .tagline{ font-size:1.05rem; font-weight:700; margin-bottom:var(--sp-6); }
.site-footer .tagline .gold{ color:var(--gold); }
.site-footer .socials{ display:flex; justify-content:center; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.site-footer .socials a{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08); font-size:18px; transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.site-footer .socials a:hover{ background:var(--gold); transform:translateY(-3px); }
.site-footer .legal{ font-size:var(--fs-tiny); color:rgba(255,255,255,0.55); }

/* Colunas de navegação do rodapé (opcional — só usada no index.html,
   onde tem seções suficientes pra justificar) */
.footer-cols{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:var(--sp-6); text-align:left; margin-bottom:var(--sp-8); }
.footer-cols .brand-logo{ margin:0 0 var(--sp-3); max-width:120px; }
.footer-cols p{ color:rgba(255,255,255,0.6); font-size:var(--fs-small); }
.footer-cols h5{ color:#fff; font-size:0.82rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:var(--sp-3); }
.footer-cols ul{ display:flex; flex-direction:column; gap:var(--sp-2); }
.footer-cols a{ color:rgba(255,255,255,0.65); font-size:var(--fs-small); transition:color var(--dur-fast) var(--ease); }
.footer-cols a:hover{ color:var(--gold); }
.footer-cols .socials{ justify-content:flex-start; margin-bottom:0; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-3);
  border-top:1px solid rgba(255,255,255,0.12); padding-top:var(--sp-5); text-align:left; }
@media (max-width:820px){ .footer-cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-cols{ grid-template-columns:1fr; text-align:center; } .footer-cols .socials{ justify-content:center; } .footer-bottom{ justify-content:center; text-align:center; } }

/* ---------- Floating WhatsApp ---------- */
.fab-whatsapp{
  position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:var(--z-header);
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:26px; box-shadow:var(--shadow-lg);
  transition:transform var(--dur-fast) var(--ease);
}
.fab-whatsapp:hover{ transform:scale(1.08); }

.page-header{ text-align:center; padding:var(--sp-12) var(--sp-5) var(--sp-6); }

/* ---------- Seção escura (Diferenciais) — fundo navy com textura de
   rede/pontos, cortada por uma onda + linha dourada no topo, igual à
   referência. ---------- */
.section-dark{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 100% at 20% 0%, var(--navy-700), var(--navy-900) 65%);
  color:#fff; padding-top:calc(var(--sp-16) + 30px);
}
.section-dark::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 40%, black 0%, transparent 75%);
  mask-image:radial-gradient(ellipse at 30% 40%, black 0%, transparent 75%);
  pointer-events:none;
}
.section-wave-top{ position:absolute; top:0; left:0; width:100%; height:52px; }