/* =======================================
   LADYNASH
   BASE
======================================= */

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

html{
    scroll-behavior:smooth;
}

:root{

    --gold:#BB9B61;
    --gold-light:#E7DBB0;
    --black:#070706;
    --white:#FFFFFF;

}

body{

    font-family:'Montserrat',sans-serif;

    background:var(--black);

    color:var(--white);

    overflow-x:hidden;

}

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

header{

position:fixed;

top:25px;

left:50%;

transform:translateX(-50%);

width:90%;

max-width:1400px;

z-index:9999;

transition:.4s ease;

}

#menu{

display:flex;

list-style:none;

gap:45px;

align-items:center;

opacity:1;

transform:none;

pointer-events:auto;

transition:.35s;

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 30px;

border-radius:60px;

background:rgba(7,7,6,.10);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.logo{

width:150px;

transition:.35s;

cursor:pointer;

filter:drop-shadow(0 0 10px rgba(187,155,97,.10));

}

.logo:hover{

transform:scale(1.05);

filter:

drop-shadow(0 0 15px rgba(187,155,97,.35));

}

#menu a{

display:block;

padding:14px 18px;

border-radius:14px;

font-size:15px;

letter-spacing:.5px;

color:white;

text-decoration:none;

font-weight:600;

transition:.3s;

white-space:nowrap;

}

#menu a:hover{

background:rgba(187,155,97,.15);

color:#BB9B61;

}
.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}

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

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    overflow:hidden;

    padding:0 8%;

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    filter:brightness(.88);

    animation:heroZoom 18s ease-in-out infinite alternate;

}

.overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(7,7,6,.90) 0%,
        rgba(7,7,6,.55) 45%,
        rgba(7,7,6,.20) 100%
    );

}

.hero-content{

    position:relative;

    z-index:5;

    max-width:720px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

}

.badge{

    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.12);

    letter-spacing:2px;

    font-size:13px;

    margin-bottom:35px;

    box-shadow:0 10px 25px rgba(0,0,0,.20);

}

.hero h1{

font-size:82px;

font-weight:800;

line-height:.95;

margin-bottom:30px;

max-width:700px;

text-shadow:0 10px 35px rgba(0,0,0,.45);

}

.hero p{

font-size:22px;

line-height:1.8;

max-width:620px;

color:#E6E6E6;

margin-bottom:50px;

}

/* =======================================
   BOTONES
======================================= */

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:15px;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:60px;

background:linear-gradient(
135deg,
#BB9B61,
#E7DBB0
);

color:#070706;

text-decoration:none;

font-weight:700;

transition:.35s;

letter-spacing:.4px;

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 45px rgba(187,155,97,.35);

}

.btn-outline{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 42px;

border-radius:60px;

border:2px solid #BB9B61;

text-decoration:none;

color:white;

font-weight:700;

transition:.35s;

}

.btn-outline:hover{

    background:#BB9B61;

    color:#070706;

    transform:translateY(-4px);

}

/* =======================================
   ANIMACIONES
======================================= */

@keyframes heroZoom{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.12);

    }

}

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

@media(max-width:900px){

.logo{

width:130px;

}

.menu-toggle{

display:block;

z-index:10001;

}

#menu{

position:fixed;

top:0;

right:-100%;

width:280px;

height:100vh;

background:#070706;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:35px;

transition:.4s;

box-shadow:-20px 0 40px rgba(0,0,0,.35);

}

#menu.active{

right:0;

}

#menu a{

font-size:22px;

}

.hero h1{

font-size:38px;

line-height:1.1;

text-align:center;

}

.hero p{

font-size:18px;

}

.hero-buttons{

    flex-direction:column;

}

.btn,
.btn-outline{

font-size:16px;

min-width:230px;

}

#menu a{

font-size:16px;

}

.gallery img{

    cursor:pointer;

    min-width:230px;

}

.container{

    grid-template-columns:1fr;

}

.about-content h2{

    font-size:42px;

}

.about-list{

    grid-template-columns:1fr;

}

.service-card,
.booking-step,
.why-card{

padding:30px;

}

.gallery-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

}

.gallery-big,
.gallery-small,
.gallery-tall,
.gallery-extra{

    height:260px;

}

}

/*=============================
ABOUT
=============================*/

.about{

padding:170px 8%;

background:#090909;

}

.container{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.about-image img{

width:100%;

border-radius:30px;

box-shadow:0 35px 80px rgba(0,0,0,.35);

transition:.45s;

}

.about-image img:hover{

transform:scale(1.03);

}

.about-content h2{

font-size:60px;

line-height:1.1;

margin:30px 0;

}

.about-content p{

line-height:2;

color:#d6d6d6;

margin-bottom:40px;

}

.about-list{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-bottom:45px;

}

.about-list div{

display:flex;

align-items:center;

gap:15px;

background:#111;

padding:18px;

border-radius:18px;

transition:.35s;

}

.about-list div:hover{

background:#171717;

transform:translateY(-5px);

}

.about-list i{

color:#BB9B61;

font-size:18px;

}

/*==================================
SERVICIOS
==================================*/

.services{

padding:170px 8%;

background:#080808;

position:relative;

overflow:hidden;

}

.services::before{

content:"";

position:absolute;

width:700px;

height:700px;

background-image:url("assets/patron.png");

background-repeat:no-repeat;

background-position:center;

background-size:contain;

top:50%;

right:-180px;

transform:translateY(-50%);

opacity:0.08;

pointer-events:none;

z-index:0;

}

.section-header{

position:relative;

z-index:2;

text-align:center;

max-width:850px;

margin:auto;

margin-bottom:70px;

}

.section-header h2{

font-size:64px;

font-weight:800;

line-height:1.05;

margin:25px 0;

max-width:850px;

margin-left:auto;

margin-right:auto;

}

.section-header p{

font-size:20px;

line-height:1.9;

color:#D8D8D8;

max-width:700px;

margin:auto;

}

.services-grid{

position:relative;

z-index:2;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:24px;

}

.service-card{

padding:40px;

background:rgba(255,255,255,.04);

backdrop-filter:blur(18px);

border-radius:24px;

border:1px solid rgba(255,255,255,.08);

transition:.35s;

min-height:320px;

cursor:default;

will-change:transform;

border:1px solid rgba(255,255,255,.08);

overflow:hidden;

}

.service-card:hover{

    transform:translateY(-8px);

    border-color:#BB9B61;

    box-shadow:0 25px 60px rgba(187,155,97,.18);

}

.service-card i{

font-size:42px;

color:#BB9B61;

margin-bottom:25px;

}

.service-card h3{

font-size:28px;

margin-bottom:18px;

}

.service-card p{

line-height:1.8;

color:#d6d6d6;

}

@media(max-width:900px){

.services-grid{

grid-template-columns:1fr;

}

.section-header h2{

font-size:40px;

}

}

/*==================================
BOOKING
==================================*/

.booking{

padding:170px 8%;

background:#050505;

}

.booking-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:24px;

margin-top:70px;

margin-bottom:60px;

}

.booking-step{

    background:rgba(255,255,255,.04);

    padding:40px 30px;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.08);

    text-align:center;

    transition:.35s;

}

.booking-step:hover{

    transform:translateY(-8px) scale(1.02);

    border-color:#BB9B61;

    box-shadow:0 30px 70px rgba(187,155,97,.18);

}

.number{

width:80px;

height:80px;

border-radius:50%;

margin:auto;

margin-bottom:25px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(
135deg,
#BB9B61,
#E7DBB0
);

color:#070706;

font-size:34px;

font-weight:700;

}

.booking-step h3{

margin-bottom:18px;

font-size:24px;

}

.booking-step p{

line-height:1.8;

color:#d6d6d6;

}

.booking-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

@media(max-width:1000px){

.booking-grid{

grid-template-columns:1fr;

}

}

/*==============================
GALERÍA
==============================*/

.gallery{

padding:170px 8%;

background:#070706;

}

.gallery-grid{

display:grid;

grid-template-columns:2fr 1fr;

grid-template-rows:280px 280px 280px;

gap:15px;

margin-top:70px;

}

.gallery-big{

grid-row:1/3;

overflow:hidden;

border-radius:24px;

}

.gallery-small{

overflow:hidden;

border-radius:24px;

}

.gallery-tall{

grid-row:2 / 4;

overflow:hidden;

border-radius:24px;

}

.gallery-extra{

grid-column:1/3;

overflow:hidden;

border-radius:24px;

height:260px;

}

.gallery img{

width:100%;

height:100%;

object-fit:cover;

display:block;

cursor:pointer;

border-radius:24px;

box-shadow:0 20px 40px rgba(0,0,0,.25);

transform:scale(1);

will-change:transform;

backface-visibility:hidden;

transition: 
transform .5s ease,
filter .5s ease;

}

.gallery img:hover{

    transform:scale(1.04);

    filter:brightness(1.08);

    box-shadow:0 30px 60px rgba(0,0,0,.35);

}

@media(max-width:900px){

.gallery-grid{

grid-template-columns:1fr;

grid-template-rows:auto;

}

.gallery-big,
.gallery-small,
.gallery-wide{

height:320px;

}

} 

/*==================================
WHY LADYNASH
==================================*/

.why{

padding:170px 8%;

background:#0b0b0b;

}

.why-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:70px;

}

.why-card{

background:#111;

padding:45px;

border-radius:24px;

text-align:center;

border:1px solid rgba(255,255,255,.08);

transition:.35s;

border:1px solid rgba(255,255,255,.08);

}

.why-card:hover{

    transform:translateY(-8px) scale(1.02);

    border-color:#BB9B61;

    box-shadow:0 30px 70px rgba(187,155,97,.18);

}

.why-card i{

font-size:46px;

color:#BB9B61;

margin-bottom:25px;

}

.why-card h3{

margin-bottom:18px;

font-size:24px;

}

.why-card p{

color:#d6d6d6;

line-height:1.8;

}

@media(max-width:1000px){

.why-grid{

grid-template-columns:1fr;

}

}

/*==================================
REVIEWS
==================================*/

.reviews{

padding:160px 8%;

background:#050505;

position:relative;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

}

.reviews::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background-image:url("assets/patron.png");

background-repeat:repeat;

background-size:140px;

opacity:.20;

pointer-events:none;

}

.reviews-card{

width:100%;

max-width:1200px;

margin:auto;

padding:80px;

text-align:center;

background:rgba(255,255,255,.05);

backdrop-filter:blur(18px);

border-radius:30px;

border:1px solid rgba(255,255,255,.08);

position:relative;

z-index:2;

}

.stars{

font-size:42px;

letter-spacing:8px;

color:#BB9B61;

margin-bottom:20px;

}

.reviews-card h3{

font-size:34px;

margin-bottom:20px;

}

.reviews-card p{

font-size:18px;

line-height:2;

color:#d8d8d8;

margin-bottom:40px;

}

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

.footer{

padding:140px 8% 70px;

background:#050505;

border-top:1px solid rgba(255,255,255,.08);

position:relative;

overflow:hidden;

}

.footer::before{

content:"";

position:absolute;

top:0;

right:0;

width:50%;

height:100%;

background-image:url("assets/patron.png");

background-repeat:repeat;

background-size:120px;

opacity:.025;

pointer-events:none;

z-index:0;

}

.footer-container,

.footer-brand{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

width:100%;

}

.footer-bottom{

position:relative;

z-index:2;

}

.footer-logo{

width:240px;

display:block;

margin:0 auto 20px;

}

.footer-brand p{

margin-top:10px;

font-size:18px;

color:#d8d8d8;

text-align:center;

max-width:600px;

line-height:1.8;

}

.footer h3{

margin-bottom:25px;

color:#BB9B61;

}

.footer-links,
.footer-contact{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:35px;

}

.footer a{

text-decoration:none;

color:white;

transition:.35s;

position:relative;

}

.footer a::after{

content:"";

position:absolute;

left:0;

bottom:-5px;

width:0;

height:2px;

background:#BB9B61;

transition:.35s;

}

.footer a:hover::after{

width:100%;

}

.footer a:hover{

    color:#BB9B61;

    transform:translateY(-2px);

}

.footer-bottom{

width:100%;

text-align:center;

margin-top:60px;

padding-top:30px;

text-align:center;

border-top:1px solid rgba(255,255,255,.08);

color:#999;

}

@media(max-width:900px){

.footer-container{

max-width:1200px;

margin:auto;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

gap:28px;

position:relative;

z-index:2;

}

.footer-links,
.footer-contact{

align-items:center;

}

.footer-logo{

width:220px;

margin-bottom:15px;

}

}

@media(max-width:900px){

header{

width:100%;

height:auto;

left:0;

top:0;

border-right:none;

padding-top:15px;

}

.hero,
.about,
.services,
.booking,
.gallery,
.why,
.reviews,
.contact,
.footer{

margin-left:0;

}

}

/*==============================
ANIMACIONES
==============================*/

.show{

opacity:1;

transform:translateY(0);

}

.header-scroll .navbar{

background:rgba(7,7,6,.90);

backdrop-filter:blur(25px);

box-shadow:0 20px 45px rgba(0,0,0,.30);

}

header.show{

opacity:1;

pointer-events:auto;

}

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

.lightbox{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.94);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

pointer-events:none;

z-index:99999;

transition:.35s;

}

.lightbox.active{

opacity:1;

visibility:visible;

pointer-events:auto;

}

.lightbox img{

max-width:85%;

max-height:85vh;

border-radius:18px;

box-shadow:0 30px 80px rgba(0,0,0,.45);

}

.lightbox-close,
.lightbox-prev,
.lightbox-next{

position:absolute;

background:rgba(255,255,255,.08);

border:none;

color:white;

font-size:34px;

width:60px;

height:60px;

border-radius:50%;

cursor:pointer;

transition:.3s;

}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{

background:#BB9B61;

color:#070706;

}

.lightbox-close{

top:35px;

right:35px;

}

.lightbox-prev{

left:40px;

top:50%;

transform:translateY(-50%);

}

.lightbox-next{

right:40px;

top:50%;

transform:translateY(-50%);

}

/*==================================
BACK TO TOP
==================================*/

.back-to-top{

position:fixed;

bottom:35px;

right:35px;

width:60px;

height:60px;

border:none;

border-radius:50%;

background:#BB9B61;

color:#070706;

font-size:22px;

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 20px 40px rgba(0,0,0,.30);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9999;

}

.back-to-top.show{

opacity:1;

visibility:visible;

}

.back-to-top:hover{

transform:translateY(-6px);

}

#menu a.active{

color:#BB9B61;

}

#progressBar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:#BB9B61;

z-index:999999;

}

::selection{

background:#BB9B61;

color:#070706;

}

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#070706;

}

::-webkit-scrollbar-thumb{

background:#BB9B61;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#d8c18a;

}

html{

scroll-behavior:smooth;

}

body{

overflow-x:hidden;

}

html{

    scroll-padding-top:120px;

}