/* =========================================================
   WN Engenharia Elétrica – Estilos gerais do site
   - Topbar e Header (menu central e CTA à direita)
   - Slider (correção definitiva)
   - Seções e Footer
   ========================================================= */

/* ----------------- Variáveis ----------------- */
:root{
  --primary:#0b214f;
  --danger:#e5293e;
  --text:#0b214f;
  --text-light:#ffffff;
}

/* ----------------- Reset básico ----------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{color:#111;font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;line-height:1.5}
a{text-decoration:none;color:inherit}

/* ----------------- Utilitários ----------------- */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.section{padding:2rem 0}
.section-title{font-family:"Montserrat",sans-serif;color:#0b214f;margin:0 0 1rem}

/* =========================================================
   TOPBAR
   ========================================================= */
#site-topbar{
  background:var(--primary);
  color:#fff;
  font-size:14px;
  position:relative;
  z-index:60;
}
#site-topbar .topbar__container{
  max-width:1200px;margin:0 auto;padding:.5rem 1rem;
  display:flex;align-items:center;justify-content:center;gap:1.25rem;flex-wrap:wrap;
}
#site-topbar .topbar__item{display:inline-flex;align-items:center;gap:.5rem;color:#fff;white-space:nowrap;opacity:.95}
#site-topbar .topbar__item img{width:20px;height:20px;display:inline-block}

/* =========================================================
   HEADER (Grid 1fr auto 1fr – menu sempre central)
   ========================================================= */
#site-header{
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  position:relative;z-index:20;
}
#site-header .nav-container{
  max-width:1200px;margin:0 auto;padding:.9rem 1rem;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:1rem;
}

/* Logo (coluna esquerda) — maior no desktop */
.brand{
  display:flex;
  align-items:center;
  justify-self:start;
  min-width: 200px;           /* antes 160px — reserva espaço p/ o logo maior */
}
.brand__logo{
  height: 92px;               /* antes 48px */
  width:auto;
  display:block;
}

/* Ajuste fino do padding do header (opcional) */
#site-header .nav-container{
  padding: 1.05rem 1rem;      /* um pouquinho mais alto para acomodar o logo */
}

/* No mobile mantemos menor para não “apertar” o topo */
@media (max-width: 992px){
  .brand__logo{ height: 44px; }
  .brand{ min-width: 160px; }
  #site-header .nav-container{ padding: .85rem 1rem; }
}

/* Menu (coluna central) */
.main-nav{
  justify-self:center;
  display:flex;align-items:center;justify-content:center;gap:2rem;
  text-transform:uppercase;font-weight:700;letter-spacing:.02em;flex-wrap:nowrap;z-index:50;
}
.main-nav a{color:var(--text);font-size:15.5px;white-space:nowrap}
.main-nav a:visited{color:var(--text)}
.main-nav a:hover{color:#1a3375}
.main-nav a[aria-current="page"]{color:var(--danger)}

/* CTA (coluna direita) */
.nav-cta{justify-self:end;display:flex;align-items:center;justify-content:flex-end;z-index:40}
.nav-cta .btn{
  display:inline-block;background:var(--danger);color:#fff;font-weight:700;
  padding:.6rem 1.1rem;border-radius:.5rem;box-shadow:0 3px 0 rgba(0,0,0,.12);transition:filter .2s
}
.nav-cta .btn:hover{filter:brightness(.95)}

/* Botão hambúrguer – oculto no desktop */
.menu-toggle{display:none !important;background:transparent;border:0;padding:.25rem;line-height:1;color:var(--text);font-size:1.7rem}

/* ----------------- Responsivo do Header ----------------- */
@media (max-width:1120px){ .main-nav{gap:1.25rem} }
@media (max-width:992px){
  #site-header .nav-container{grid-template-columns:auto auto 1fr}
  #site-header .main-nav{
    position:absolute;left:0;right:0;top:100%;
    display:none;background:#fff;padding:1rem;box-shadow:0 6px 12px rgba(0,0,0,.1);
    flex-direction:column;gap:1rem;z-index:50
  }
  #site-header .main-nav.active{display:flex}
  #site-header .menu-toggle{display:block !important;margin-left:.5rem}
  .nav-cta{display:none}
}

/* =========================================================
   SLIDER – CORREÇÃO: slides lado a lado + altura responsiva
   ========================================================= */
.slider-section{padding:0}
.slider{
  position:relative;overflow:hidden;background:#eee;
}
.slider .slides{
  display:flex; /* <<< essencial para não empilhar verticalmente */
  width:100%;height:100%;
  transform:translateX(0);transition:transform .6s ease;
}
.slide{
  flex:0 0 100%; /* cada slide ocupa 100% da largura */
  height:clamp(340px, 55vw, 520px); /* altura responsiva */
  position:relative;background-size:cover;background-position:center center;
}
.slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%);
  display:flex;align-items:center;
}
.slide-content .container{max-width:1200px}
.slide-content h2{
  margin:0 0 .5rem 0;font-family:"Montserrat",sans-serif;color:#fff;
  font-size:clamp(1.2rem, 2.2vw + .5rem, 2.1rem);text-shadow:0 0 8px rgba(0,0,0,.6)
}
.slide-content p{
  margin:0;color:#fff;font-size:clamp(.9rem, 1.2vw + .3rem, 1.1rem);text-shadow:0 0 8px rgba(0,0,0,.6)
}

/* Navegação (bolinhas) */
.slider-nav{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;gap:8px;z-index:5
}
.slider-nav button{
  width:10px;height:10px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.6)
}
.slider-nav button.active{background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.15) inset}

/* =========================================================
   CTA BAR (pré-footer) – se usar
   ========================================================= */
.cta-bar{background:#f3f3f3;padding:2.25rem 1rem}
.cta-bar .container-cta{max-width:1200px;margin:0 auto;display:flex;justify-content:center}
.cta-bar .btn{display:inline-block;background:#2ecc71;color:#fff;padding:.75rem 1.25rem;border-radius:.5rem;font-weight:700}

/* =========================================================
   FOOTER (mantém o padrão do site)
   ========================================================= */
#site-footer{background:var(--primary);color:#e6eefb}
#site-footer .footer-container{
  max-width:1200px;margin:0 auto;padding:2rem 1rem;
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem
}
#site-footer h4{color:#fff;margin:0 0 .75rem 0}
#site-footer p{margin:.35rem 0;line-height:1.6}
#site-footer .footer-links{list-style:none;padding:0;margin:0}
#site-footer .footer-links li{margin:.4rem 0}
#site-footer a{color:#fff}
#site-footer a:hover{text-decoration:underline}
#site-footer .footer-cta{margin-top:1rem}
#site-footer .btn{display:inline-block;background:var(--danger);color:#fff;padding:.5rem 1rem;border-radius:.5rem;font-weight:700}
#site-footer .copyright{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:1rem;font-size:.95rem}

/* Ajustes finos mobile */
@media (max-width:520px){
  #site-topbar .topbar__container{padding:.45rem .75rem}
}
/* ===== Correções mobile para fundo preto ===== */

/* 1) Força fundo claro no site inteiro */
html, body {
  background: #ffffff !important;
}

/* 2) Se o seu banner/hero usa classe .hero, ajuste o container */
.hero, .banner, .capa, .header-hero {
  background-color: #ffffff !important;           /* fallback claro */
  background-size: cover;                          /* cobre toda a área */
  background-position: center;                     /* centraliza */
  background-repeat: no-repeat;
  min-height: 260px;                               /* evita "buraco" no mobile */
}

/* 3) Desativa background fixo no mobile (bug comum no iOS/Android) */
@media (max-width: 768px) {
  .hero, .banner, .capa, .header-hero {
    background-attachment: scroll !important;      /* em vez de fixed */
  }
}

/* 4) Se você usa um overlay (camada escura), suavize no mobile */
.hero::before, .banner::before, .capa::before, .header-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* deixe o overlay mais leve, para não “pretear” tudo */
  background: rgba(0,0,0,0.25);
}

/* 5) Neutraliza dark mode automático se estiver escurecendo o fundo */
@media (prefers-color-scheme: dark) {
  html, body,
  .hero, .banner, .capa, .header-hero {
    background-color: #ffffff !important;
    color: #111111;
  }
  /* overlay ainda mais leve no dark mode */
  .hero::before, .banner::before, .capa::before, .header-hero::before {
    background: rgba(0,0,0,0.20);
  }
}

/* 6) Se o banner é IMG dentro do container, garanta cobertura */
.hero img, .banner img, .capa img, .header-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* cobre sem distorcer */
  display: block;
}