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

body{
font-family:Arial,sans-serif;
background:#0a0a0a;
color:white;
overflow-x:hidden;
}

/* HEADER */

.header{
position:fixed;
width:100%;
top:0;
background:rgba(0,0,0,0.8);
z-index:1000;
transition:0.4s;
}

.header.scrolled{
background:rgba(0,0,0,0.95);
}

.container{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px;
}

.logo{
height:110px;
transition:0.4s;
}

.header.scrolled .logo{
height:80px;
}

/* MENU */

nav{
display:flex;
gap:30px;
}

nav a{
color:white;
text-decoration:none;
font-weight:600;
position:relative;
}

nav a::after{
content:"";
position:absolute;
width:0;
height:2px;
background:#ff3c00;
bottom:-5px;
left:0;
transition:0.3s;
}

nav a:hover::after{
width:100%;
}

/* HAMBURGUESA */

.menu-toggle{
display:none;
flex-direction:column;
gap:6px;
cursor:pointer;
}

.menu-toggle .bar{
width:28px;
height:4px;
background:#ff3c00;
border-radius:10px;
}

/* HERO */

.hero{
height:100vh;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;
}

.hero-video{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
z-index:-2;
}

.hero-overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
z-index:-1;
}

/* VIDEO RESPONSIVE */

.desktop-video{
display:block;
}

.mobile-video{
display:none;
}

/* HERO CONTENIDO */

.hero-content{
z-index:2;
max-width:800px;
}

/* ANIMACIÓN HERO */

.hero-title{
opacity:0;
transform:translateY(40px);
animation:fadeUp 1s ease forwards;
animation-delay:0.3s;
}

.hero-sub{
opacity:0;
transform:translateY(40px);
animation:fadeUp 1s ease forwards;
animation-delay:0.6s;
}

.hero-btn{
opacity:0;
transform:translateY(40px);
animation:fadeUp 1s ease forwards;
animation-delay:0.9s;
}

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

/* BOTON */

.btn{
display:inline-block;
margin-top:20px;
padding:14px 30px;
background:#ff3c00;
color:white;
text-decoration:none;
border-radius:6px;
}

/* SECCIONES */

section{
padding:100px 20px;
text-align:center;
}

/* GRID */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.card{
background:#1a1a1a;
padding:30px;
border-radius:10px;
}

/* GALERIA */

.portfolio{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:20px;
}

.portfolio img{
width:100%;
}

/* ANTES */

.compare-container{
position:relative;
max-width:800px;
margin:auto;
overflow:hidden;
}

.after{
position:absolute;
top:0;
left:0;
width:50%;
overflow:hidden;
}

.slider{
position:absolute;
top:50%;
width:100%;
}

/* WHATSAPP */

.whatsapp-float{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
padding:15px;
border-radius:50%;
}

/* ANIMACIONES SCROLL */

.reveal{
opacity:0;
transform:translateY(60px);
transition:0.8s;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* MOBILE */

@media(max-width:768px){

.desktop-video{
display:none;
}

.mobile-video{
display:block;
}

nav{
display:none;
flex-direction:column;
background:#0a0a0a;
position:absolute;
width:100%;
top:100%;
}

nav.active{
display:flex;
}

.menu-toggle{
display:flex;
}

}