/* ================= PRELOAD ================= */

#preloader{
position:fixed;
inset:0;
background:linear-gradient(180deg,#0f1c16,#163326);
display:flex;
align-items:center;
justify-content:center;
z-index:5000;
transition:opacity .8s ease, visibility .8s ease;
}

#preloader.hide{
opacity:0;
visibility:hidden;
}

#loaderLogo{
width:200px;
opacity:.1;
transition:opacity 2.5s ease;
}


/* ================= GENERAL ================= */

body{
margin:0;
padding-top:95px;
font-family:'Inter',sans-serif;
background:#f5f3ee;
scroll-behavior:smooth;
-webkit-font-smoothing:antialiased;
}

.section{
padding:100px 0;
}

.section-title{
font-family:'Cinzel',serif;
font-size:42px;
margin-bottom:20px;
color:#163326;
letter-spacing:1px;
}


/* ================= NAVBAR ================= */

.navbar{
transition:.35s ease;
padding:1rem 0;
background:#000;
}

.navbar.scrolled{
background:rgba(0,0,0,.85);
backdrop-filter:blur(10px);
}

.navbar-nav .nav-link{
color:white;
margin-left:18px;
font-family:'Cinzel',serif;
font-size:13px;
letter-spacing:.5px;
text-transform:uppercase;
position:relative;
transition:.3s;
}

.navbar-nav .nav-link:hover{
color:#fff;
}

.navbar-nav .nav-link::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:1px;
background:white;
transition:.35s ease;
}

.navbar-nav .nav-link:hover::after{
width:100%;
}

.navbar-nav img{
margin-left:6px;
border-radius:2px;
}
/* ================= LOGO ================= */

.main-logo{
height:70px;
transition:.3s ease;
filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

.navbar.scrolled .main-logo{
height:60px;
}


/* ================= HERO ================= */

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

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

.hero-media img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 1.5s ease, transform 8s ease;
}

.hero-media img:first-child{
opacity:1;
}

.hero-media img.active{
opacity:1;
transform:scale(1.05);
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.55);
z-index:2;
}

.hero-content{
position:relative;
z-index:3;
max-width:900px;
padding:0 20px;
}

.hero h1{
font-size:60px;
font-family:'Cinzel',serif;
letter-spacing:3px;
margin-bottom:20px;
}

.hero p{
font-size:20px;
font-weight:300;
}


/* ================= PRODUCTOS ================= */

.product{
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s ease;
height:100%;
}

.product:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.product img{
width:100%;
height:250px;
object-fit:cover;
}

.product h5{
font-family:'Cinzel',serif;
letter-spacing:.5px;
}


/* ================= GALERIA ================= */

.gallery img{
cursor:pointer;
border-radius:10px;
transition:.35s ease;
}

.gallery img:hover{
transform:scale(1.04);
}


/* ================= LIGHTBOX ================= */

#lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,.92);
display:none;
align-items:center;
justify-content:center;
z-index:4000;
padding:30px;
}

#lightbox img{
max-width:90%;
max-height:90%;
border-radius:10px;
}


/* ================= WHATSAPP ================= */

.whatsapp-float{
position:fixed;
right:25px;
bottom:25px;
width:60px;
height:60px;
background:#25D366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:28px;
z-index:3000;
box-shadow:0 8px 20px rgba(0,0,0,.25);
transition:.3s;
}

.whatsapp-float:hover{
transform:scale(1.1);
box-shadow:0 10px 25px rgba(0,0,0,.35);
}


/* ================= FOOTER ================= */

.site-footer{
background:#0f1c16;
color:rgba(255,255,255,.85);
padding:70px 0 30px 0;
}

.footer-title{
font-family:'Cinzel',serif;
font-size:26px;
margin-bottom:15px;
letter-spacing:1px;
}

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

.footer-links li{
margin-bottom:8px;
}

.footer-links a{
color:rgba(255,255,255,.7);
text-decoration:none;
transition:.3s;
}

.footer-links a:hover{
color:white;
}

.footer-social a{
display:inline-flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:50%;
background:rgba(255,255,255,.08);
margin-right:10px;
color:white;
transition:.3s;
}

.footer-social a:hover{
background:rgba(255,255,255,.18);
}

.footer-divider{
border-color:rgba(255,255,255,.1);
margin:40px 0 20px 0;
}

.footer-bottom{
font-size:14px;
color:rgba(255,255,255,.6);
}


/* ================= RESPONSIVE ================= */

@media(max-width:992px){

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

.section-title{
font-size:36px;
}

}

@media(max-width:768px){

.hero{
height:85vh;
}

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

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

.main-logo{
height:60px;
}

.navbar-nav .nav-link{
margin-left:0;
padding:12px 0;
}

}