:root{
--red:#C41212;
--dark:#0E0E10;
--dark2:#151518;
}

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

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

h1,h2,h3{
font-family:'Sora',sans-serif;
font-size: 32px;
}

.container{
width:90%;
max-width:1200px;
}

/* NAV */


.header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
padding:20px 0;
transition:.4s ease;
background:transparent;
}

.header.scrolled{
background:rgba(14,14,16,.95);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,.05);
padding:10px 0 !important;
}

.nav{
width:90%;
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo img{
height:42px;
display:block;
transition:.3s ease;
}

.logo img:hover{
opacity:.85;
transform:scale(1.03);
}

.logo-wrap{
display:inline-block;
padding:6px 14px;
border-radius:8px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
transition:.3s ease;
}

.logo-wrap:hover{
background:rgba(255,255,255,.15);
}

.logo-bg{
display:inline-block;
background:rgba(255,255,255,.85);
padding:6px 16px;
border-radius:6px;
backdrop-filter:blur(6px);
}

nav a{
color:#ddd;
margin-left:30px;
text-decoration:none;
font-weight:500;
transition:.3s;
}

nav a:hover{
color:#C41212;
}

.nav-btn{
padding:8px 16px;
background:#C41212;
color:#fff !important;
border-radius:8px;
}

.btn-cta-menu{
  margin-left: 30px;
  text-decoration: none;
  font-weight:500;
  transition: .3s;
}

.nav-btn:hover {
  background: #9e0000;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* HERO */

.hero{
position:relative;
height:100vh;
overflow:hidden;
display:flex;
align-items:center;
padding:0 8%;
}

.hero-slider{
position:absolute;
inset:0;
z-index:1;
}

.slide{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0;
transform:scale(1.3);
transition:opacity 1.2s ease;
}

.slide:first-child{
background-position:center 30%;
}

.slide.active{
opacity:1;
animation:cinemaZoom 14s ease forwards;
}

.slide.exit{
animation:cinemaExit 1.2s ease forwards;
}

@keyframes cinemaZoom{
0%{transform:scale(1.35) translateX(-5%);}
50%{transform:scale(1.2) translateX(5%);}
100%{transform:scale(1.1);}
}

@keyframes cinemaExit{
from{opacity:1;}
to{opacity:0;}
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(120deg,
rgba(0,0,0,.95) 0%,
rgba(0,0,0,.7) 40%,
rgba(196,18,18,.9) 100%);
z-index:2;
}

.hero-content{
position:relative;
z-index:3;
max-width:700px;
opacity:0;
transform:translateY(80px);
animation:textImpact 1.4s cubic-bezier(.16,1,.3,1) forwards;
animation-delay:.8s;
transition:.6s ease;
}

.hero-badge{
display:inline-block;
margin-bottom:20px;
padding:6px 14px;
border-radius:30px;
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
transition:.4s ease;
}

.hero-logos{
margin:30px 0;
display:flex;
gap:25px;
align-items:center;
opacity:0;
transform:translateY(20px);
transition:.6s ease;
}

.hero-logos img{
height:35px;
filter:brightness(0) invert(1);
opacity:.8;
}

.hero-logos.active{
opacity:1;
transform:translateY(0);
}

.align-center .hero-logos{
justify-content:center;
}

.align-right .hero-logos{
justify-content:flex-end;
}

.align-left .hero-logos{
justify-content:flex-start;
}

/* POSIÇÕES DINÂMICAS */

.align-left{
justify-content:flex-start;
text-align:left;
}

.align-center{
justify-content:center;
text-align:center;
}

.align-right{
justify-content:flex-end;
text-align:right;
}

/* OVERLAY VARIÁVEL */

.overlay-red{
background:linear-gradient(120deg,
rgba(0,0,0,.95) 0%,
rgba(196,18,18,.9) 100%);
}

.overlay-dark{
background:linear-gradient(120deg,
rgba(0,0,0,.95) 0%,
rgba(0,0,0,.8) 100%);
}

.overlay-light{
background:linear-gradient(120deg,
rgba(0,0,0,.85) 0%,
rgba(196,18,18,.6) 100%);
}

.overlay-gradiente{
background: linear-gradient(
  90deg,
  rgba(0,0,0,0.65) 0%,
  rgba(200,0,0,0.55) 60%,
  rgba(200,0,0,0.35) 100%
)
}

/* ESTILOS DINÂMICOS */

.badge-light{
background:transparent;
color:white;
}

.badge-red{
background:#C41212;
color:white;
}

.badge-green{
background:#25D366;
color:white;
}

.hero h1{
font-size:56px;
line-height:1.05;
margin-bottom:25px;
max-width:800px;
}

.hero p{
font-size:20px;
line-height:1.6;
color:#e5e5e5;
max-width:650px;
margin-bottom:40px;
}

.hero-buttons{
display:flex;
gap:20px;
margin-top:30px;
}

/* Quando estiver centralizado */
.align-center .hero-buttons{
justify-content:center;
}

/* Quando estiver à direita */
.align-right .hero-buttons{
justify-content:flex-end;
}

/* Quando estiver à esquerda */
.align-left .hero-buttons{
justify-content:flex-start;
}

.btn-outline{
background:transparent;
padding:15px 30px;
border:1px solid white;
color:white;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.btn-outline:hover{
background:white;
color:#000;
}

#hero-title,
#hero-text,
#hero-badge,
#hero-btn{
transition:opacity .4s ease;
}

@keyframes textImpact{
to{
opacity:1;
transform:translateY(0);
}
}

.hero h1{
font-size:52px;
line-height:1.1;
margin-bottom:25px;
}

.hero p{
font-size:20px;
margin-bottom:40px;
color:#e5e5e5;
}

.btn{
display:inline-block;
padding:15px 30px;
background:var(--red);
color:white;
text-decoration:none;
font-weight:600;
transition:.3s;
border-radius:8px;
}

.btn-primary{
background:#C41212;
color:white;
}

.btn-outline:hover{
background:white;
color:#000;
}

.btn-whatsapp{
background:#25D366;
color:white;
}

.btn-whatsapp:hover{
box-shadow:0 10px 30px rgba(37,211,102,.4);
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 30px rgba(196,18,18,.4);
}

/* SECTIONS */

section{
padding:160px 0;
border-bottom:1px solid rgba(255,255,255,.05);
}

.section-light{
background:var(--dark2);
}

.fade{
opacity:0;
transform:translateY(40px);
transition:1s ease;
}

.fade.visible{
opacity:1;
transform:translateY(0);
}

/* SOBRE */

.sobre {
  background-color: #f5f5f5;
  padding: 120px 0;
}

.sobre .container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.sobre-bloco {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 120px;
}

.sobre-bloco.reverse {
  flex-direction: row-reverse;
}

.sobre-img img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.sobre-texto h2{
  font-size: 46px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 25px;
  color: #111;
}

.sobre-texto p{
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 18px;
  color: #444;
}

.numero-destaque{
  font-size: 22px;
  font-weight: 700;
  color: #c40000; /* vermelho Fumeta */
}

.sobre-bloco + .sobre-bloco{
  padding-top: 80px;
  border-top: 1px solid #eee;
}

.sobre-bloco{
  opacity: 0;
  transform: translateY(40px);
  transition: all .6s ease;
}

.sobre-bloco.active{
  opacity: 1;
  transform: translateY(0);
}

.tag-section{
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c40000;
  margin-bottom: 15px;
}

/* NUMBERS */

.numbers{
text-align:center;
background: linear-gradient(135deg, #111111, #1a1a1a);
}

.central{
    margin: 0 auto;
}

.numbers-grid{
margin-top:80px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:50px;
}

.numbers h3{
font-size:52px;
color:#c40000;
}

/* MARCAS */

.marcas {
  background: #f8f8f8;
  padding: 80px 0;
  text-align: center;
  overflow: hidden;
}

.marcas h2 {
  font-size: 32px;
  margin-bottom: 50px;
  color: #111;
}

.marcas-wrapper {
  overflow: hidden;
  position: relative;
}

.marcas-track {
  display: flex;
  gap: 100px;
  width: max-content;
  animation: scroll 60s linear infinite;
}

.marcas-track img {
  height: 100px;
  filter: grayscale(50%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.marcas-track img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marcas-wrapper::before,
.marcas-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
}

.marcas-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #f8f8f8, transparent);
}

.marcas-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #f8f8f8, transparent);
}


.marcas p {
  max-width: 600px;
  margin: 30px auto 30px;
  color: #555;
  line-height: 1.6;
}

.btn-cta {
  display: inline-block;
  background: #c40000;
  color: #fff;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-cta:hover {
  background: #9e0000;
  transform: translateY(-2px);
}

.section-divider {
  height: 1px;
  background: #e5e5e5;
  margin: 0 auto;
}

/* MAP */

.abrangencia {
  background: #f5f5f5;
  padding: 100px 0;
}

.abrangencia-content {
  display: flex;
  align-items: center;
  gap: 80px;
}

.abrangencia-texto {
  flex: 1;
}

.abrangencia-texto h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #111;
}

.abrangencia-texto p {
  color: #555;
  line-height: 1.6;
  margin-bottom: 30px;
}

.indicadores {
  display: flex;
  gap: 40px;
}

.indicadores strong {
  display: block;
  font-size: 28px;
  color: #c40000;
}

.indicadores span {
  font-size: 14px;
  color: #666;
}

.mapa-box {
  flex: 1;
  background: #ffffff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.mapa-box object {
  width: 100%;
  height: auto;
  display: block;
}

.tooltip-mapa {
  position: fixed;
  background: #111;
  color: #fff;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9999;
}

/* Tooltip */
.tooltip {
  position: absolute;
  background: #111;
  color: #fff;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* CTA */

.contato {
  background: #111111;
  padding: 120px 0;
  text-align: center;
  color: #ffffff;
}

.contato-center {
  max-width: 700px;
  margin: 0 auto;
}

.contato h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.contato p {
  color: #cccccc;
  margin-bottom: 40px;
  line-height: 1.6;
}

.btn-whatsapp {
  display: inline-block;
  background: #25D366;
  color: #fff;
  padding: 18px 45px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease;
}

.btn-whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.horario {
  display: block;
  margin-top: 25px;
  font-size: 14px;
  color: #888;
}

/* FOOTER */

.footer {
  background: #0a0a0a;
  color: #cccccc;
  padding-top: 80px;
}

.footer-content {
  display: flex;
  gap: 60px;
  justify-content: space-between;
  padding-bottom: 50px;
}

.footer-col {
  flex: 1;
}

.footer h3 {
  color: #ffffff;
  margin-bottom: 15px;
}

.footer h4 {
  color: #ffffff;
  margin-bottom: 15px;
}

.footer p,
.footer li {
  font-size: 14px;
  line-height: 1.6;
}

.footer ul {
  list-style: none;
  padding: 0;
}

.footer a {
  color: #cccccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #c40000;
}

.footer-bottom {
  border-top: 1px solid #1f1f1f;
  text-align: center;
  padding: 20px 0;
  font-size: 13px;
  color: #777;
}

.footer .fa-whatsapp {
  color: #25D366;
  margin-right: 8px;
}

.footer .fa-envelope {
  margin-right: 8px;
  color: #c40000;
}

.footer a {
  color: #cccccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer .fa-phone {
  margin-right: 8px;
  color: #c40000;
}

.footer .fa-location-dot {
  margin-right: 8px;
  color: #c40000;
}

.endereco{
  font-size: 14px;
}

/* RESPONSIVO */

@media (max-width: 900px) {
  .sobre-bloco,
  .sobre-bloco.reverse {
    flex-direction: column;
  }
}

@media(max-width:768px){

.hero{
padding:0 20px;
text-align:center;
}

.hero h1{
font-size:30px;
}

.map iframe{
height:350px;
}

}


@media (max-width: 1024px){

  section{
    padding:120px 0;
  }

  .hero h1{
    font-size:42px;
  }

  .hero p{
    font-size:18px;
  }

  .abrangencia-content{
    gap:50px;
  }

  .numbers-grid{
    gap:40px;
  }

}

@media (max-width: 768px){

  /* NAV */

  .nav{
    gap:15px;
  }

  nav a{
    margin-left:0;
  }

  /* HERO */

  .hero{
    padding:0 20px;
    text-align:center;
  }

  .hero-content{
    max-width:100%;
  }

  .hero h1{
    font-size:30px;
  }

  .hero p{
    font-size:16px;
  }

  .hero-buttons{
    justify-content:center;
    flex-direction:column;
    align-items:center;
  }

  /* SOBRE */

  .sobre-bloco,
  .sobre-bloco.reverse{
    flex-direction:column;
    gap:40px;
  }

  .sobre{
    padding:60px 0;
  }

  /* NUMBERS */

  .numbers-grid{
    grid-template-columns:1fr 1fr;
    gap:30px;
  }

  .numbers h3{
    font-size:36px;
  }

  /* MARCAS */

  .marcas-track img{
    height:70px;
  }

  /* MAPA */

  .abrangencia-content{
    flex-direction:column;
    gap:50px;
  }

  .mapa-box{
    padding:20px;
  }

  /* CTA */

  .contato{
    padding:80px 0;
  }

  .btn-whatsapp{
    width:100%;
    max-width:320px;
    text-align:center;
  }

  /* FOOTER */

  .footer-content{
    flex-direction:column;
    gap:40px;
  }

}

.menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    pointer-events:none;
    transition:.3s ease;
    z-index:999;
}

.menu-overlay.active{
    opacity:1;
    pointer-events:auto;
}

/* ================= MOBILE ================= */

@media (max-width:768px){

  /* NAV BAR */
  .nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-direction:row;
  }

  /* BOTÃO HAMBURGUER */
  .menu-toggle{
    display:flex;
    flex-direction:column;
    cursor:pointer;
    gap:6px;
    z-index:1200;
  }

  .menu-toggle span{
    width:28px;
    height:3px;
    background:#fff;
    border-radius:2px;
    transition:.3s ease;
  }

  /* MENU LATERAL */
  nav{
    position:fixed;
    top:0;
    right:-100%;
    height:100vh;
    width:80%;
    max-width:340px;
    background:var(--dark);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:120px 30px;
    gap:20px;
    transition:.4s cubic-bezier(.16,1,.3,1);
    box-shadow:-10px 0 40px rgba(0,0,0,.4);
    z-index:1100;
  }

  nav.active{
    right:0;
  }

  nav a{
    margin:0;
    width:100%;
    font-size:16px;
    text-align: center;
  }

  /* ANIMAÇÃO X */
  .menu-toggle.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
  }

  .menu-toggle.active span:nth-child(2){
    opacity:0;
  }

  .menu-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
  }

}

@media (max-width:480px){

  .hero h1{
    font-size:26px;
  }

  .numbers-grid{
    grid-template-columns:1fr;
  }

  .numbers h3{
    font-size:32px;
  }

  .indicadores{
    flex-direction:column;
    gap:20px;
  }

}