html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:'Poppins',sans-serif;
background:#fdf6f0;
color:#5a3e36;
}

/* HERO */
/* .hero{
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:120px 20px;
background:linear-gradient(135deg,#f3d5c0,#f7e2d8);
} */
.hero{
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:70px 20px;
background:linear-gradient(135deg,#f3d5c0,#f7e2d8);
}

/* .logo-header{
width:140px;
border-radius:50%;
margin-bottom:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
} */
.logo-header{
width:120px;
border-radius:50%;
margin-bottom:15px;
box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.hero h1{
font-family:'Playfair Display',serif;
font-size:3em;
margin:0;
}
/* .hero h1{
font-family:'Playfair Display',serif;
font-size:3.5em;
margin:0;
} */

/* MENU */
.menu{
display:flex;
justify-content:center;
gap:35px;
padding:18px;
background:#fff0f3;
flex-wrap:wrap;
position:sticky;
top:0;
z-index:100;
}

.menu a{
text-decoration:none;
color:#8b5e5e;
font-weight:500;
transition:.3s;
}

.menu a:hover{
color:#d63384;
transform:translateY(-2px);
}

/* SECCIONES */
.section{
padding:60px 20px;
max-width:1000px;
margin:auto;
text-align:center;
opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;
}

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

/* GALERIA */
.galeria .grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:30px;
}

.galeria img{
width:100%;
height:220px;
object-fit:cover;
border-radius:18px;
cursor:pointer;
transition:transform .3s ease, box-shadow .3s ease;
}

.galeria img:hover{
transform:scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* TESTIMONIOS */
.testimonios{
background:#fff8f2;
border-radius:25px;
}

.testimonios-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
margin-top:30px;
}

.card{
background:white;
padding:25px;
border-radius:20px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

/* CONTACTO */
.contacto{
background:#fff0f3;
border-radius:30px;
margin-bottom:60px;
}

.btn-instagram{
display:inline-block;
margin-top:20px;
padding:14px 30px;
background:#b5835a;
color:white;
border-radius:30px;
text-decoration:none;
font-weight:bold;
}

footer{
text-align:center;
padding:40px 20px;
background:#f3d5c0;
margin-top:40px;
}

/* LIGHTBOX */
.lightbox{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.85);
justify-content:center;
align-items:center;
z-index:1000;
}

.lightbox-img{
max-width:90%;
max-height:90%;
border-radius:20px;
}

.cerrar{
position:absolute;
top:30px;
right:40px;
font-size:40px;
color:white;
cursor:pointer;
}

/* ============================= */
/* ======= VERSION MOVIL ======= */
/* ============================= */

@media (max-width: 768px){

    /* HERO */
    .hero{
        padding: 80px 20px;
    }

    .hero h1{
        font-size: 2.3em;
    }

    .logo-header{
        width: 110px;
    }

    /* MENU */
/*     .menu{
        gap: 15px;
        font-size: 0.95em;
        padding: 12px;
    } */
	.menu{
		flex-direction: column;
		align-items: center;
	}

    /* SECCIONES */
    .section{
        padding: 60px 20px;
    }

    /* GALERIA */
    .galeria .grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .galeria img{
        height: 160px;
    }

    /* TESTIMONIOS */
    .testimonios-grid{
        grid-template-columns: 1fr;
    }

    /* CONTACTO */
    .contacto{
        padding: 50px 20px;
    }

}

/* ============================= */
/* ======= VERSION MOVIL ======= */
/* ============================= */

@media (max-width: 768px){

    /* Galería tipo Instagram */
    .galeria .grid{
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

	.galeria img{
		aspect-ratio: 1 / 1;
		height: auto;
	}

}

/* ============================= */
/* ===== MENU MOVIL FIJO ======= */
/* ============================= */

.menu-toggle{
    display:none;
}

@media (max-width:768px){

    /* Botón fijo justo debajo del hero */
	.menu-toggle{
		display:block;
		position:sticky;
		top:0;
		width:100%;
		background:#fff0f3;
		padding:15px 0;
		font-size:28px;
		cursor:pointer;
		z-index:1001;

		display:flex;
		justify-content:center;
		align-items:center;
	}

    /* Ocultamos el menú por defecto */
    .menu{
        display:none;
        flex-direction:column;
        align-items:center;
        background:#fff0f3;
        padding:20px 0;
    }

    .menu.active{
        display:flex;
    }

    .menu a{
        padding:12px 0;
        font-size:1.1em;
    }

}