:root{
  --preto:#0D0D0D;
  --acento:#F00404;
  --apoio:#F5F5F0;
  --branco:#FFFFFF;
  --cinza-texto:#5B5B58;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Inter',sans-serif;
  background:var(--branco);
  color:var(--preto);
  overflow-x:hidden;
}

h1,h2,h3,.headline{
  font-family:'Bebas Neue',sans-serif;
  letter-spacing:0.02em;
  line-height:1.05;
}

img{max-width:100%;display:block;}

a{text-decoration:none;color:inherit;}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:16px 32px;
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:0.9rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border-radius:2px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  cursor:pointer;
  border:2px solid transparent;
}
.btn:hover{
  transform:translateY(-2px);
}
.btn-accent{
  background:var(--acento);
  color:var(--branco);
}
.btn-accent:hover{
  box-shadow:0 8px 24px rgba(240,4,4,0.35);
}
.btn-outline{
  background:transparent;
  color:var(--branco);
  border:2px solid var(--branco);
}
.btn-outline:hover{
  background:var(--branco);
  color:var(--preto);
}
.btn-dark{
  background:var(--preto);
  color:var(--branco);
}
.btn-dark:hover{
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.btn-sm{
  padding:11px 20px;
  font-size:0.78rem;
}

/* ---------- Badge ---------- */
.badge{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  padding:6px 14px;
  border:1px solid currentColor;
  border-radius:20px;
  margin-bottom:16px;
}

/* ---------- NAV ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--preto);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  max-width:1200px;
  margin:0 auto;
}

.nav-logo img{
  height:32px;
  width:auto;
}

.nav-links{
  display:none;
  align-items:center;
  gap:32px;
}

.nav-links a{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:0.88rem;
  color:var(--branco);
  opacity:0.75;
  transition:opacity 0.2s ease, color 0.2s ease;
  position:relative;
  padding:4px 0;
}

.nav-links a:hover{
  opacity:1;
}

.nav-links a.active{
  opacity:1;
  color:var(--acento);
}

.nav-cta{
  display:none;
}

.nav-toggle{
  display:flex;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}

.nav-toggle span{
  width:22px;
  height:2px;
  background:var(--branco);
  display:block;
}

.nav-mobile{
  display:none;
  flex-direction:column;
  background:var(--preto);
  border-top:1px solid rgba(255,255,255,0.08);
  padding:8px 24px 24px;
}

.nav-mobile.is-open{
  display:flex;
}

.nav-mobile a{
  color:var(--branco);
  font-weight:600;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.nav-mobile a.active{
  color:var(--acento);
}

.nav-mobile .btn{
  margin-top:16px;
  justify-content:center;
}

@media (min-width:900px){
  .nav-links{display:flex;}
  .nav-cta{display:inline-flex;}
  .nav-toggle{display:none;}
}

/* ---------- HERO padrão (usado nas páginas internas) ---------- */
.page-hero{
  position:relative;
  background:var(--preto);
  color:var(--branco);
  overflow:hidden;
  padding:88px 0;
}

.page-hero-diagonal{
  position:absolute;
  right:-10%;
  bottom:-40%;
  width:60%;
  height:180%;
  background:var(--acento);
  transform:rotate(-18deg);
  opacity:0.9;
  z-index:0;
}

.page-hero-inner{
  position:relative;
  z-index:2;
  max-width:640px;
}

.page-hero .hero-kicker{
  font-family:'Inter',sans-serif;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-size:0.78rem;
  color:var(--acento);
  margin-bottom:16px;
}

.page-hero h1{
  font-size:clamp(2.4rem, 6vw, 4rem);
  text-transform:uppercase;
  margin-bottom:20px;
}

.page-hero p{
  font-size:1.05rem;
  color:#D9D9D4;
  line-height:1.6;
  margin-bottom:32px;
  max-width:520px;
}

.page-hero .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  position:relative;
  z-index:2;
}

/* ---------- HERO home (2 cards de escolha) ---------- */
.home-hero{
  position:relative;
  background:var(--preto);
  color:var(--branco);
  overflow:hidden;
  padding:80px 0 96px;
}

.home-hero-diagonal{
  position:absolute;
  right:-10%;
  bottom:-30%;
  width:65%;
  height:160%;
  background:var(--acento);
  transform:rotate(-18deg);
  opacity:0.92;
  z-index:0;
}

.home-hero-intro{
  position:relative;
  z-index:2;
  max-width:680px;
  margin-bottom:56px;
}

.home-hero .hero-kicker{
  font-family:'Inter',sans-serif;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-size:0.8rem;
  color:var(--acento);
  margin-bottom:18px;
}

.home-hero h1{
  font-size:clamp(2.4rem, 6.5vw, 4.6rem);
  text-transform:uppercase;
}

.home-hero-intro p{
  font-family:'Inter',sans-serif;
  font-size:1.05rem;
  font-weight:400;
  color:#D9D9D4;
  max-width:480px;
  margin:22px 0 0;
  line-height:1.6;
}

.choice-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

@media (min-width:760px){
  .choice-grid{
    grid-template-columns:1fr 1fr;
  }
}

.choice-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  min-height:360px;
  padding:36px;
  border-radius:6px;
  overflow:hidden;
  color:var(--branco);
  transition:transform 0.25s ease;
}

.choice-card:hover{
  transform:translateY(-4px);
}

.choice-card .badge{
  position:relative;
  z-index:2;
  color:var(--branco);
}

.choice-card h2{
  position:relative;
  z-index:2;
  font-size:clamp(2rem, 4.5vw, 2.7rem);
  text-transform:uppercase;
}

.choice-cta{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:0.82rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  align-self:flex-start;
  padding:12px 22px;
  background:var(--branco);
  color:var(--preto);
  border-radius:2px;
  transition:transform 0.2s ease;
}

.choice-card:hover .choice-cta{
  transform:translateX(4px);
}

.choice-card-automotive{
  background:linear-gradient(155deg, #1a1a1a 0%, var(--preto) 55%, var(--acento) 140%);
}

.choice-card-residential{
  background:linear-gradient(155deg, var(--acento) -20%, #1a1a1a 45%, var(--preto) 100%);
}

.choice-card::after{
  content:"";
  position:absolute;
  top:-30%;
  right:-30%;
  width:80%;
  height:80%;
  background:rgba(255,255,255,0.06);
  transform:rotate(-20deg);
  z-index:1;
}

/* ---------- Split hero (páginas de serviço) ---------- */
.split-hero{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  margin-top:48px;
  border-radius:4px;
  overflow:hidden;
}

@media (min-width:760px){
  .split-hero{grid-template-columns:1fr 1fr;}
}

.split-panel{
  position:relative;
  min-height:220px;
  display:flex;
  align-items:flex-end;
  padding:28px;
  overflow:hidden;
  transition:transform 0.3s ease;
}

.split-panel:hover{
  transform:scale(1.015);
}

.split-panel-automotive{
  background:linear-gradient(155deg, #1a1a1a 0%, var(--preto) 55%, var(--acento) 150%);
}

.split-panel-residential{
  background:linear-gradient(155deg, var(--acento) -30%, #1a1a1a 50%, var(--preto) 100%);
}

.split-panel span.label{
  position:relative;
  z-index:2;
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:0.85rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--branco);
  display:flex;
  align-items:center;
  gap:10px;
}

.split-panel span.label svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.split-panel::after{
  content:"";
  position:absolute;
  top:-30%;
  right:-30%;
  width:80%;
  height:80%;
  background:rgba(255,255,255,0.06);
  transform:rotate(-20deg);
}

/* ---------- Seções gerais ---------- */
.section{
  padding:96px 0;
}

.section-tight{
  padding:72px 0;
}

.section-header{
  max-width:640px;
  margin-bottom:56px;
}

.section-header h2{
  font-size:clamp(2.1rem, 5vw, 3.2rem);
  text-transform:uppercase;
}

.section-header p{
  margin-top:16px;
  color:var(--cinza-texto);
  line-height:1.6;
  font-size:1rem;
}

.bg-white{background:var(--branco); color:var(--preto);}
.bg-dark{background:var(--preto); color:var(--branco);}
.bg-apoio{background:var(--apoio); color:var(--preto);}

.bg-dark .section-header p{color:#B8B8B5;}

/* ---------- Benefícios (ícone + texto) ---------- */
.benefit-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}

@media (min-width:700px){
  .benefit-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

.benefit{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.benefit-icon{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--preto);
  color:var(--acento);
}

.bg-dark .benefit-icon{
  background:var(--acento);
  color:var(--branco);
}

.benefit-icon svg{
  width:22px;
  height:22px;
}

.benefit-text h3{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:1.02rem;
  text-transform:none;
  margin-bottom:6px;
}

.benefit-text p{
  font-size:0.92rem;
  line-height:1.55;
  opacity:0.8;
}

/* ---------- Catálogo de produtos ---------- */
.product-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}

@media (min-width:640px){
  .product-grid{grid-template-columns:1fr 1fr;}
}

@media (min-width:1000px){
  .product-grid{grid-template-columns:repeat(3,1fr);}
}

.product-card{
  background:var(--branco);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 16px rgba(13,13,13,0.08);
  display:flex;
  flex-direction:column;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px rgba(13,13,13,0.14);
}

.product-card img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}

.product-card-body{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}

.product-card-tag{
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--acento);
}

.product-card h3{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.6rem;
  text-transform:uppercase;
}

.product-specs{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:0.86rem;
  color:var(--cinza-texto);
}

.product-specs li{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.product-specs li svg{
  flex:0 0 auto;
  width:16px;
  height:16px;
  color:var(--acento);
  margin-top:2px;
}

.product-warranty{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.78rem;
  font-weight:700;
  color:var(--preto);
  background:var(--apoio);
  border-radius:20px;
  padding:6px 12px;
  align-self:flex-start;
}

.product-card-body .btn{
  margin-top:auto;
  justify-content:center;
}

/* ---------- Diferenciais (grid 2x2) ---------- */
.diff-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  background:rgba(13,13,13,0.08);
}

@media (min-width:680px){
  .diff-grid{grid-template-columns:1fr 1fr;}
}

.diff-card{
  background:var(--apoio);
  padding:36px 32px;
  border-left:4px solid var(--acento);
}

.diff-card h3{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:1.1rem;
  text-transform:none;
  margin-bottom:8px;
}

.diff-card p{
  font-size:0.9rem;
  line-height:1.6;
  color:var(--cinza-texto);
}

/* ---------- Faixa de confiança (garantia) ---------- */
.trust-bar{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  text-align:center;
}

@media (min-width:700px){
  .trust-bar{grid-template-columns:repeat(4,1fr);}
}

.trust-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.trust-item svg{
  width:32px;
  height:32px;
  color:var(--acento);
}

.trust-item strong{
  font-family:'Inter',sans-serif;
  font-size:0.95rem;
}

.trust-item span{
  font-size:0.82rem;
  color:var(--cinza-texto);
}

.bg-dark .trust-item span{color:#B8B8B5;}

/* ---------- Aplicações (grid de cards simples) ---------- */
.app-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

@media (min-width:700px){
  .app-grid{grid-template-columns:repeat(3,1fr);}
}

.app-card{
  padding:32px 28px;
  border-radius:6px;
  background:var(--preto);
  color:var(--branco);
}

.app-card svg{
  width:30px;
  height:30px;
  color:var(--acento);
  margin-bottom:18px;
}

.app-card h3{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:1.05rem;
  margin-bottom:8px;
}

.app-card p{
  font-size:0.88rem;
  line-height:1.6;
  opacity:0.75;
}

/* ---------- CTA final ---------- */
.cta-final{
  background:var(--preto);
  color:var(--branco);
  padding:120px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.cta-diagonal{
  position:absolute;
  left:-15%;
  top:-40%;
  width:60%;
  height:180%;
  background:rgba(240,4,4,0.1);
  transform:rotate(-18deg);
}

.cta-final h2{
  font-size:clamp(2.1rem, 5.5vw, 3.5rem);
  text-transform:uppercase;
  max-width:800px;
  margin:0 auto 36px;
  position:relative;
  z-index:2;
}

.cta-final .btn{
  position:relative;
  z-index:2;
  font-size:1rem;
  padding:18px 40px;
}

/* ---------- Rodapé ---------- */
footer{
  background:var(--preto);
  color:var(--branco);
  padding:48px 0;
}

.footer-inner{
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:flex-start;
  justify-content:space-between;
}

@media (min-width:640px){
  .footer-inner{
    flex-direction:row;
    align-items:center;
  }
}

.footer-logo img{
  height:32px;
  width:auto;
}

.footer-links{
  display:flex;
  gap:24px;
  font-size:0.85rem;
}

.footer-links a{opacity:0.75;}
.footer-links a:hover{opacity:1;}

.footer-right{
  text-align:left;
  font-size:0.9rem;
  opacity:0.75;
  line-height:1.7;
}

@media (min-width:640px){
  .footer-right{text-align:right;}
}

.footer-bottom{
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.12);
  font-size:0.78rem;
  opacity:0.5;
}

/* ---------- WhatsApp flutuante ---------- */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  z-index:90;
  transition:transform 0.2s ease;
}

.whatsapp-float:hover{
  transform:scale(1.08);
}

.whatsapp-float svg{
  width:28px;
  height:28px;
  color:var(--branco);
}