/* =========================
   Start-UP • stylenew.css
   ========================= */

/* ---------- Variáveis + base ---------- */
:root{
  --bg:#0a0a0a; --bg-2:#111;
  --text:#f5f5f5; --muted:#b3b3b3;
  --red:#fb0000; --border:rgba(0,0,0,.08);

  /* intensidade do escurecimento do banner */
  --hero-dark-top: rgba(0,0,0,.86);
  --hero-dark-bot: rgba(0,0,0,.96);
  --hero-red-1: rgba(251,0,0,.10);  /* quanto menor, mais fraco o glow */
  --hero-red-2: rgba(251,0,0,.06);
}
*{box-sizing:border-box}
html,body{background:#000;color:var(--text);overflow-x:hidden}

/* ---------- Header top (faixa preta) ---------- */
.header-top{background:#000;border-bottom:1px solid rgba(255,255,255,.12)}
.header-top a{color:#fff;opacity:.9}
.header-top a:hover{opacity:1}
@media (max-width:991px){ .header-top{display:none;} }

/* ---------- NAV BRANCA FULL-WIDTH ---------- */
.nav-wrap{
  position:sticky; top:0; z-index:9999;
  width:100%; background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.nav-wrap .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
#logo img{height:44px}
#nav-menu-container ul li a{color:#111 !important;font-weight:600}
#nav-menu-container ul li a:hover{color:var(--red) !important}
/* dropdown */
#nav-menu-container .menu-has-children ul{
  background:#fff; border:1px solid var(--border);
}
#nav-menu-container .menu-has-children ul li a{color:#111}
#nav-menu-container .menu-has-children ul li a:hover{color:var(--red)}

/* ---------- Mobile nav (ícone sempre visível) ---------- */
@media (max-width:991px){ .nav-wrap .inner{ padding-right:64px; } }
#mobile-nav-toggle,
.mobile-nav-toggle{
  position:fixed; right:12px; top:10px;
  width:42px; height:42px; border-radius:999px;
  background:#fff; color:#111 !important;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  z-index:10001;
}
#mobile-nav-toggle:hover,
.mobile-nav-toggle:hover{ color:var(--red) !important; }
.mobile-nav{background:#fff;}
.mobile-nav a{color:#111}
.mobile-nav .menu-has-children i{color:#111}
.mobile-nav-overly{background:rgba(0,0,0,.6)}
@media (min-width:992px){
  #mobile-nav-toggle,.mobile-nav-toggle{display:none!important;}
}

/* ---------- HERO FULL-BLEED + IMAGEM BEM SUAVE ---------- */
/* Arquivo CSS está em /css, por isso o caminho usa ../img/ */
.hero{
  position:relative; min-height:88vh;
  display:flex; align-items:center; text-align:center;

  /* full-bleed sem overflow lateral */
  width:100vw; left:50%; transform:translateX(-50%);

  /* overlays + imagem (ordem = topo -> fundo) */
  background-image:
    radial-gradient(1200px 600px at 15% 20%, var(--hero-red-1), transparent 60%),
    radial-gradient(1000px 600px at 85% 80%, var(--hero-red-2), transparent 60%),
    linear-gradient(180deg, var(--hero-dark-top), var(--hero-dark-bot)),
    url('../img/img_nobreak.jpg');   /* troque se sua imagem tiver outro nome */

  background-size: auto, auto, auto, cover;
  background-position: center center, center center, center center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

  /* parallax leve só na foto; overlays rodam junto */
  background-attachment: scroll, scroll, scroll, fixed;

  isolation:isolate;
}
/* fallback mobile (evita bug do background-attachment: fixed) */
@media (max-width:1024px){
  .hero{ background-attachment: scroll, scroll, scroll, scroll; }
}

/* conteúdo do hero */
.hero-inner{position:relative; z-index:1; width:100%}
.eyebrow{letter-spacing:.35em;text-transform:uppercase;color:#fff;opacity:.85}
.hero h1{
  color:#fff !important;
  font-size:clamp(36px,6vw,72px); line-height:1.05;
  margin:.25rem 0 .75rem; text-shadow:0 6px 24px rgba(0,0,0,.6);
}
.typed-wrap{font-size:clamp(16px,2.4vw,22px); color:#eaeaea}
.cta-wrap{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{padding:12px 22px;border-radius:999px;font-weight:600}
.btn-red{background:var(--red);color:#fff;border:0}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(251,0,0,.35)}
.btn-ghost{background:transparent;border:1px solid #fff;color:#fff}
.btn-ghost:hover{background:#fff;color:#000}

/* “faíscas” (se estiver usando) */
.sparks{position:absolute; inset:0; pointer-events:none; z-index:1}
.spark{position:absolute; width:2px; height:2px; background:var(--red); border-radius:50%;
  opacity:.75; filter:drop-shadow(0 0 8px var(--red)); animation:float 6s linear infinite;}
.spark.s2{animation-duration:8s;opacity:.5}
.spark.s3{animation-duration:10s;opacity:.35}
@keyframes float{
  0%{transform:translate(var(--sx,0),var(--sy,0)) scale(1)}
  50%{transform:translate(calc(var(--sx,0) + 10px), calc(var(--sy,0) - 40px)) scale(1.4)}
  100%{transform:translate(var(--sx,0),calc(var(--sy,0) - 80px)) scale(1)}
}

/* ---------- Seções / títulos ---------- */
.section-gap{padding:80px 0}
.sec-dark{background:var(--bg)}
.sec-darker{background:var(--bg-2)}
.kicker{letter-spacing:.3em;color:#bbb;text-transform:uppercase}
.title-gradient{
  font-size:clamp(28px,3vw,40px); font-weight:700; margin:10px 0 12px;
  background:linear-gradient(90deg,#fff,#ffefef 45%, var(--red) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Cards (serviços) ---------- */
.feature{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:22px; height:100%; transition:.25s;
}
.feature:hover{transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,0,0,.35)}
.feature .icon{font-size:28px; color:var(--red); margin-bottom:10px}
.feature h4{color:#fff; margin:6px 0 8px}
.feature p{color:#bdbdbd; margin:0}

/* ---------- CTA orçamento central ---------- */
.discount-section-area{position:relative; overflow:hidden; text-align:center}
.discount-section-area .overlay{background:linear-gradient(135deg, rgba(251,0,0,.12), rgba(0,0,0,.6))}

/* ---------- Clientes ---------- */
.brands-area{background:linear-gradient(180deg,#0a0a0a,#0c0c0c); padding-top:120px; padding-bottom:120px}
.brands-area h2{text-align:center; margin-bottom:28px}
.brand-wrap .row{justify-content:center !important}
.brands-area img{opacity:.9; transition:.2s; filter:grayscale(100%)}
.brands-area img:hover{opacity:1; filter:none; transform:scale(1.04)}

/* ---------- Footer ---------- */
footer.footer-area{background:#000;color:#ddd;border-top:1px solid rgba(255,255,255,.12)}
footer a{color:#fff}
footer a:hover{color:var(--red)}

/* Footer > Pesquisar (lado a lado) */
.footer-area .single-footer-widget .mail_part{
  display:flex; align-items:center; gap:10px; max-width:100%;
}
.footer-area .single-footer-widget .mail_part input{
  flex:1 1 auto; min-width:0; height:44px; line-height:44px; padding:0 14px;
  border:1px solid rgba(255,255,255,.25); border-radius:10px;
  background:#0e0e0e; color:#fff;
}
.footer-area .single-footer-widget .mail_part input::placeholder{ color:#9da3ae; }
.footer-area .single-footer-widget .mail_part .btn.bb-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:44px; margin:0 !important; border:0; border-radius:10px;
  background:var(--red); color:#fff; position:static !important;
}
.footer-area .single-footer-widget .mail_part .btn.bb-btn .lnr{margin:0; font-size:18px}
@media (max-width:420px){
  .footer-area .single-footer-widget .mail_part{ flex-wrap:wrap; }
  .footer-area .single-footer-widget .mail_part .btn.bb-btn{ width:100%; }
}