/* ================= RESET ================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}

body{
background:#f5f7fb;
color:#1f2d3d;
padding-top:80px;
}

/* ================= NAVBAR ================= */
nav{
position:fixed;
top:0;
width:100%;
height:80px;
background:rgb(255, 255, 255);
display:flex;
justify-content:space-between;
align-items:center;
padding:0 8%;
box-shadow:0 5px 20px rgba(0,0,0,.05);
z-index:1000;
}

nav ul{
display:flex;
list-style:none;
gap:30px;
}

nav ul li a{
text-decoration:none;
color:#1f2d3d;
font-weight:500;
transition:.3s;
}

nav ul li a:hover{
color:#4a90e2;
}

/* LOGO */
.logo{
display:flex;
align-items:center;
gap:12px;
font-size:1.3rem;
font-weight:700;
color:#4a90e2;
}

.logo img{
width:150px;
}

/* ================= HERO ================= */
.hero{
    position:relative;
    height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    text-align:center;
}

.hero-bg-container{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0;
    transition:opacity 1s ease-in-out;
}

.slide.active{
    opacity:1;
}

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

.hero-text{
    position:relative;
    z-index:2;
    max-width:900px;
}

.hero-text h1{
    font-size:3.5rem;
    margin-bottom:20px;
}

.hero-text p{
    font-size:1.2rem;
    opacity:0.9;
}

/* BOTON */
.btn{
display:inline-block;
background:#4a90e2;
color:white;
padding:15px 35px;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:.3s;
box-shadow:0 10px 25px rgba(74,144,226,.3);
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(74,144,226,.4);
}

/* ================= SECCIONES ================= */
section{
padding:100px 8%;
}

/* ================= CARDS ================= */
.info-container,
.contacto-container{
display:flex;
gap:40px;
background:white;
padding:60px;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,.04);
}

.col-izq,.col-der{
flex:1;
}

h2{
font-size:2rem;
margin-bottom:20px;
}

/* ================= SERVICIOS ================= */
.servicio-item{
display:flex;
gap:15px;
margin-bottom:20px;
padding:15px;
border-radius:12px;
background:#f8faff;
transition:.3s;
}

.servicio-item:hover{
background:#eef4ff;
transform:translateX(5px);
}

.servicio-icon{
width:50px;
height:50px;
background:#4a90e2;
color:white;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
}

/* ================= INSTAGRAM ================= */
.instagram-box{
margin-top:50px;
}

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

.instagram-grid img{
width:100%;
height:250px;
object-fit:cover;
border-radius:15px;
transition:.4s;
}

.instagram-grid img:hover{
transform:scale(1.05);
}

/* ================= FORM ================= */
.form-contacto input,
.form-contacto textarea{
width:100%;
padding:14px;
border:1px solid #e5e9f2;
border-radius:8px;
margin-bottom:10px;
}

/* ================= CANALES ================= */
.canal-link{
display:flex;
gap:15px;
padding:15px;
border-radius:10px;
text-decoration:none;
color:white;
margin-bottom:10px;
transition:.3s;
}

.canal-link:hover{
transform:translateY(-3px);
}

.whatsapp{background:#25d366;}
.gmail{background:#ea4335;}
.instagram{background:#E4405F;}

/* ================= FOOTER ================= */
footer{
background:#1f2d3d;
color:white;
text-align:center;
padding:10px;
margin-top:10px;
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){

.menu-toggle{
display:block;
}

nav ul{
position:fixed;
top:0;
right:-100%;
width:260px;
height:100vh;
background:white;

display:flex;
flex-direction:column;

padding:100px 30px 30px 30px;
gap:25px;

transition:.4s ease-in-out;
box-shadow:-10px 0 30px rgba(0,0,0,.1);

z-index:1000;
}

nav ul.active{
right:0;
}

/* CENTRAR LOGO */
.menu-logo{
align-items:center;
text-align:center;
}

/* EMPUJAR FOOTER ABAJO */
.menu-footer{
margin-top:auto;
text-align:center;
width:100%;
}

}
/* logo dentro menu */
.menu-logo{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
margin-bottom:20px;
}

.menu-logo img{
width:120px;
margin-bottom:10px;
}

.menu-logo span{
font-weight:700;
color:#4a90e2;
}

/* MENU HAMBURGUESA */
.menu-toggle{
display:none;
font-size:1.8rem;
cursor:pointer;
z-index:1100;
}

/* OVERLAY */
.nav-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
opacity:0;
pointer-events:none;
transition:.3s;
z-index:900;
}

.nav-overlay.active{
opacity:1;
pointer-events:all;
}
/* ocultar elementos solo-movil en escritorio */
.menu-logo,
.menu-footer{
display:none;
}
/* MOBILE */
@media(max-width:900px){

.menu-toggle{
display:block;
}

/* PANEL MENU */
nav ul{
position:fixed;
top:0;
right:-100%;
width:75%;
max-width:320px;
height:100vh;
background:white;

display:flex;
flex-direction:column;
align-items:center;

padding:40px 20px;
gap:20px;

transition:.35s ease;
box-shadow:-10px 0 40px rgba(0,0,0,.15);

z-index:1000;
}

nav ul.active{
right:0;
}

/* LOGO MENU */
/* ocultar en escritorio */
.menu-logo,
.menu-footer{
display:none;
}

/* MENU HAMBURGUESA */
.menu-toggle{
display:none;
font-size:1.8rem;
cursor:pointer;
z-index:1100;
}

/* OVERLAY */
.nav-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
opacity:0;
pointer-events:none;
transition:.3s;
z-index:900;
}

.nav-overlay.active{
opacity:1;
pointer-events:all;
}


/* ================= MOBILE ================= */
@media(max-width:900px){

.menu-toggle{
display:block;
}

/* PANEL */
nav ul{
position:fixed;
top:0;
right:-100%;
width:80%;
max-width:320px;
height:100vh;
background:white;

display:flex;
flex-direction:column;

padding:40px 25px;
gap:20px;

transition:.35s ease;
box-shadow:-10px 0 40px rgba(0,0,0,.15);
z-index:1000;
}

nav ul.active{
right:0;
}

/* LOGO ARRIBA */
.menu-logo{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
margin-bottom:15px;
}

.menu-logo img{
width:130px;
margin-bottom:8px;
}

/* LINKS */
nav ul li{
width:100%;
text-align:center;
}

nav ul li a{
display:block;
padding:12px;
font-size:1.05rem;
}

/* FOOTER ABAJO */
.menu-footer{
display:block;
margin-top:auto;
text-align:center;
padding-top:15px;
border-top:1px solid #eee;
}

}
}
@media(max-width:900px){

/* NAV */
nav{
padding:0 20px;
}

.logo img{
width:120px;
}

/* HERO */
.hero-text{
padding:0 20px;
}

.hero-text h1{
font-size:2.2rem;
}

.hero-text p{
font-size:1rem;
}

/* SECCIONES */
section{
padding:70px 20px;
}


/* CONTENEDORES EN COLUMNA */
.info-container,
.contacto-container{
flex-direction:column;
padding:30px 20px;
gap:25px;
}

/* COLUMNAS */
.col-izq,
.col-der{
width:100%;
}

/* SERVICIOS */
.servicio-item{
flex-direction:row;
align-items:flex-start;
}

/* INSTAGRAM GRID */
.instagram-grid{
grid-template-columns:1fr;
}

/* FORM */
.form-contacto input,
.form-contacto textarea{
font-size:16px;
}

/* TITULOS */
h2{
font-size:1.6rem;
text-align:center;
}

/* FOOTER */
footer{
padding:20px;
font-size:.9rem;
}

}