/* ===== RESET ===== */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#0b0f14;
color:#e5e7eb;
overflow-x:hidden;
}

/* ===== ESTRUTURA ===== */
section{
padding:100px 20px;
position:relative;
}

.container{
max-width:1200px;
margin:auto;
}

/* ===== TIPOGRAFIA ===== */
h1{
font-size:48px;
font-weight:700;
letter-spacing:-1px;
}

h2{
font-size:34px;
font-weight:600;
margin-bottom:20px;
}

h3{
font-size:22px;
margin-bottom:10px;
}

p{
line-height:1.7;
color:#9ca3af;
}

/* ===== HEADER ===== */
header{
position:fixed;
width:100%;
top:0;
left:0;
background:rgba(11,15,20,0.85);
backdrop-filter:blur(8px);
border-bottom:1px solid rgba(255,255,255,0.05);
z-index:1000;
transition:0.3s;
}

.header-content{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
}

.logo img{
height:65px;
transition:0.3s;
}

.logo img:hover{
transform:scale(1.05);
}

/* ===== BOTÃO PERFORMANCE ===== */
.btn{
display:inline-block;
padding:14px 32px;
background:#e10600;
color:#fff;
font-weight:600;
border-radius:50px;
text-decoration:none;
transition:0.3s ease;
box-shadow:0 10px 25px rgba(225,6,0,0.3);
}

.btn:hover{
background:#ff1a14;
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(225,6,0,0.5);
}

/* ===== HERO ===== */
.hero{
background:linear-gradient(to right, rgba(11,15,20,0.9), rgba(11,15,20,0.6)),
url('../../assets/img/hero.jpg') center/cover no-repeat;
padding:180px 20px 140px;
margin-top:80px;
display:flex;
align-items:center;
}

.hero-content{
max-width:650px;
animation:fadeUp 1s ease forwards;
opacity:0;
}

.hero h1{
margin-bottom:20px;
}

.hero p{
margin-bottom:30px;
font-size:18px;
}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
from{
opacity:0;
transform:translateY(40px);
}
}

/* ===== SEÇÃO COM IMAGEM LADO ===== */
.image-side{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.image-side img{
width:100%;
border-radius:20px;
box-shadow:0 25px 50px rgba(0,0,0,0.4);
transition:0.4s;
}

.image-side img:hover{
transform:scale(1.03);
}

/* ===== VIDEO ===== */
.video-container{
position:relative;
padding-bottom:50%;
height:0;
overflow:hidden;
border-radius:20px;
margin:60px auto 0 auto;
max-width:1000px;
box-shadow:0 25px 60px rgba(0,0,0,0.5);
}

.video-container iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/* ===== CARROSSEL ===== */
.carousel{
position:relative;
overflow:hidden;
margin-top:80px;
border-radius:20px;
}

.carousel-track{
display:flex;
transition:transform 0.6s ease;
}

.carousel-track img{
min-width:100%;
border-radius:20px;
}

.carousel button{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(255,255,255,0.1);
border:none;
color:#fff;
padding:12px 18px;
cursor:pointer;
border-radius:50%;
font-size:18px;
backdrop-filter:blur(5px);
transition:0.3s;
}

.carousel button:hover{
background:#e10600;
}

.prev{left:20px;}
.next{right:20px;}

.dots{
text-align:center;
margin-top:25px;
}

.dot{
height:10px;
width:10px;
margin:0 6px;
background:#374151;
border-radius:50%;
display:inline-block;
cursor:pointer;
transition:0.3s;
}

.dot.active{
background:#e10600;
}

/* ===== FOOTER ===== */
.footer{
background:#070a0f;
text-align:center;
padding:70px 20px;
border-top:1px solid rgba(255,255,255,0.05);
color:#6b7280;
}

/* ===== WHATSAPP ===== */
.whatsapp{
position:fixed;
bottom:20px;
right:20px;
color:#fff;
display:flex;
align-items:center;
gap:10px;
font-weight:bold;
text-decoration:none;
}
.whatsapp:hover{transform:scale(1.05);}
.whatsapp img{width:60px;height:60px;}

/* ===== RESPONSIVO ===== */
@media(max-width:768px){

section{
padding:70px 20px;
}

h1{font-size:30px;}
h2{font-size:24px;}
h3{font-size:18px;}

.hero{
padding:140px 20px 100px;
}

.image-side{
grid-template-columns:1fr;
gap:40px;
}

.video-container{
padding-bottom:56%;
}

}