@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

/* =========================
   ROOT
========================= */

:root{

  --forest:#5B7349;
  --olive:#617355;
  --sage:#9EA692;
  --light:#ECF2E4;
  --ivory:#F2EDEB;

  --text-dark:#4F5B46;
  --text-soft:#74806C;

  --white:#ffffff;

  --shadow-soft:
    0 10px 30px rgba(91,115,73,0.08);

  --shadow-hover:
    0 20px 40px rgba(91,115,73,0.14);

  --glass:
    rgba(236,242,228,0.58);

  --glass-strong:
    rgba(236,242,228,0.82);

}

/* =========================
   RESET
========================= */

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

html{
  scroll-behavior:smooth;
}

body{

  background:
    var(--ivory);

  color:
    var(--text-dark);

  overflow-x:hidden;

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

  text-rendering:
    optimizeLegibility;

  -webkit-font-smoothing:
    antialiased;

}

/* =========================
   GLOBAL BACKGROUND
========================= */

body::before{

  content:"";

  position:fixed;

  inset:0;

  background:

    radial-gradient(
      circle at top left,
      rgba(236,242,228,.72),
      transparent 40%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(158,166,146,.12),
      transparent 35%
    );

  z-index:-2;

}

/* =========================
   THREE BACKGROUND
========================= */

canvas{

  position:fixed;

  inset:0;

  width:100%;
  height:100%;

  z-index:-1;

}

/* =========================
   PRELOADER
========================= */

#preloader{

  position:fixed;

  inset:0;

  background:
    var(--ivory);

  display:flex;

  justify-content:center;
  align-items:center;

  z-index:999999;

  transition:
    opacity .8s ease,
    visibility .8s ease;

}

#preloader.hide{

  opacity:0;
  visibility:hidden;
  pointer-events:none;

}

.loader-content{
  text-align:center;
}

/* =========================
   FLOWER
========================= */

.flower-loader{

  width:240px;
  height:240px;

  display:flex;

  justify-content:center;
  align-items:center;

  margin:auto;

  animation:
    flowerFloat 4s ease-in-out infinite;

}

.flower-svg{

  width:100%;
  height:100%;

}

.draw{

  fill:none;

  stroke:
    var(--forest);

  stroke-width:2.2;

  stroke-linecap:round;
  stroke-linejoin:round;

  filter:
    drop-shadow(
      0 0 6px rgba(91,115,73,.12)
    );

  stroke-dasharray:1000;
  stroke-dashoffset:1000;

  animation:
    drawFlower 3.6s ease forwards;

}

.stem{ animation-delay:0s; }
.petal1{ animation-delay:.8s; }
.petal2{ animation-delay:1.2s; }
.petal3{ animation-delay:1.6s; }
.leaf{ animation-delay:2s; }

.loader-logo{

  margin-top:30px;

  font-size:
    clamp(2.5rem,8vw,4rem);

  font-family:
    'Cormorant Garamond',
    serif;

  color:
    var(--forest);

  letter-spacing:3px;

}

.loader-text{

  margin-top:12px;

  font-size:.72rem;

  letter-spacing:4px;

  color:
    var(--sage);

}

/* =========================
   HEADER
========================= */

header{

  width:100%;
  height:90px;

  position:fixed;

  top:0;
  left:0;

  display:flex;

  justify-content:
    space-between;

  align-items:center;

  padding:0 7%;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  background:
    rgba(242,237,235,.72);

  border-bottom:
    1px solid rgba(91,115,73,.08);

  z-index:1000;

  transition:
    .35s ease;

}

header.scrolled{

  height:76px;

  background:
    rgba(242,237,235,.94);

  box-shadow:
    0 10px 30px rgba(0,0,0,.06);

}

.logo img{

  width:92px;
  height:auto;

}

/* =========================
   NAV
========================= */

nav{

  display:flex;
  align-items:center;
  gap:30px;

}

nav a{

  position:relative;

  text-decoration:none;

  color:
    var(--olive);

  font-weight:500;

  transition:
    .3s ease;

}

nav a::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-6px;

  width:100%;
  height:1px;

  background:
    var(--forest);

  transform:
    scaleX(0);

  transition:
    transform .3s ease;

}

nav a:hover{

  color:
    var(--forest);

}

nav a:hover::after{

  transform:
    scaleX(1);

}

.menu-toggle{

  display:none;

  background:none;
  border:none;

  color:
    var(--forest);

  font-size:2rem;

  cursor:pointer;

}

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

section{

  padding:
    clamp(100px,10vw,130px)
    7%;

}

.reveal{

  opacity:0;

  transform:
    translateY(30px);

  transition:
    all .8s ease;

}

.reveal.active{

  opacity:1;

  transform:
    translateY(0);

}

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

.hero{

  min-height:100vh;

  display:flex;

  justify-content:center;
  align-items:center;

  position:relative;

  overflow:hidden;

  text-align:center;

}

.hero-content{

  max-width:850px;

  position:relative;
  z-index:2;

}

.hero-subtitle{

  font-size:.78rem;

  letter-spacing:6px;

  color:
    var(--sage);

}

.hero-title{

  margin:
    28px 0;

  font-size:
    clamp(3.2rem,8vw,6rem);

  line-height:.92;

  font-family:
    'Cormorant Garamond',
    serif;

  color:
    var(--forest);

}

.hero-title span{

  display:block;

  opacity:0;

  transform:
    translateY(50px);

  animation:
    revealText 1s forwards;

}

.hero-title span:nth-child(1){
  animation-delay:.2s;
}

.hero-title span:nth-child(2){
  animation-delay:.45s;
}

.hero-title span:nth-child(3){
  animation-delay:.7s;
}

.hero p{

  max-width:720px;

  margin:auto;

  font-size:1.08rem;

  line-height:2;

  color:
    var(--text-soft);

}

.hero-buttons{

  display:flex;

  justify-content:center;

  gap:18px;

  flex-wrap:wrap;

  margin-top:38px;

}
/* =========================
   BUTTONS
========================= */

.btn,
.btn-outline{

  display:inline-flex;

  justify-content:center;
  align-items:center;

  padding:
    15px 34px;

  border-radius:999px;

  text-decoration:none;

  font-weight:500;

  transition:
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease,
    color .35s ease;

}

.btn{

  position:relative;

  overflow:hidden;

  background:
    var(--forest);

  color:
    var(--white);

  box-shadow:
    var(--shadow-soft);

}

.btn::before{

  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:100%;
  height:100%;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.18),
      transparent
    );

  transition:
    .8s ease;

}

.btn:hover::before{
  left:120%;
}

.btn:hover{

  transform:
    translateY(-4px);

  background:
    var(--olive);

  box-shadow:
    var(--shadow-hover);

}

.btn-outline{

  border:
    1px solid rgba(91,115,73,.18);

  background:
    rgba(236,242,228,.35);

  color:
    var(--forest);

  backdrop-filter:
    blur(10px);

}

.btn-outline:hover{

  transform:
    translateY(-4px);

  background:
    rgba(236,242,228,.8);

}

/* =========================
   SCROLL INDICATOR
========================= */

.scroll-indicator{

  position:absolute;

  bottom:35px;
  left:50%;

  transform:
    translateX(-50%);

  display:flex;

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

  gap:10px;

  transition:
    opacity .4s ease;

}

.scroll-indicator.hide{

  opacity:0;

  pointer-events:none;

}

.scroll-indicator span{

  width:1px;

  height:72px;

  background:
    var(--forest);

  animation:
    bounce 2s infinite;

}

.scroll-indicator p{

  font-size:.7rem;

  letter-spacing:3px;

  color:
    var(--forest);

}

/* =========================
   SECTION TITLES
========================= */

.section-title{

  text-align:center;

  margin-bottom:60px;

}

.section-title span{

  text-transform:
    uppercase;

  letter-spacing:4px;

  font-size:.75rem;

  color:
    var(--sage);

}

.section-title h2{

  margin-top:10px;

  font-size:
    clamp(2.4rem,6vw,3.6rem);

  font-family:
    'Cormorant Garamond',
    serif;

  color:
    var(--forest);

}

/* =========================
   SERVICES
========================= */

.services-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

  gap:28px;

}

.service-card{

  padding:40px;

  border-radius:30px;

  background:
    var(--glass);

  border:
    1px solid rgba(91,115,73,.08);

  backdrop-filter:
    blur(14px);

  box-shadow:
    var(--shadow-soft);

  transition:
    transform .4s ease,
    box-shadow .4s ease,
    background .4s ease;

}

.service-card:hover{

  transform:
    translateY(-10px);

  background:
    var(--glass-strong);

  box-shadow:
    var(--shadow-hover);

}

.service-card h3{

  margin-bottom:15px;

  font-size:1.45rem;

  color:
    var(--forest);

}

.service-card p{

  line-height:1.9;

  color:
    var(--text-soft);

}

/* =========================
   GALLERY
========================= */

.gallery-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

  gap:22px;

}

.gallery-item{

  width:100%;
  height:350px;

  border-radius:30px;

  object-fit:cover;

  background:
    linear-gradient(
      135deg,
      #5B7349,
      #9EA692,
      #ECF2E4
    );

  box-shadow:
    var(--shadow-soft);

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

}

.gallery-item:hover{

  transform:
    translateY(-6px)
    scale(1.015);

  filter:
    brightness(1.04);

}

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

.about{

  display:flex;

  justify-content:center;

}

.about-text{

  max-width:820px;

  text-align:center;

}

.about-text span{

  color:
    var(--sage);

  text-transform:
    uppercase;

  letter-spacing:4px;

  font-size:.75rem;

}

.about-text h2{

  margin:20px 0;

  font-size:
    clamp(2.4rem,6vw,3.6rem);

  font-family:
    'Cormorant Garamond',
    serif;

  color:
    var(--forest);

}

.about-text p{

  margin-bottom:18px;

  line-height:2;

  color:
    var(--text-soft);

}

/* =========================
   PROMO
========================= */

.promo{

  display:flex;

  justify-content:center;

}

.promo-card{

  width:100%;

  max-width:780px;

  padding:
    clamp(45px,7vw,70px);

  border-radius:35px;

  text-align:center;

  background:
    linear-gradient(
      135deg,
      #5B7349,
      #617355
    );

  color:
    white;

  box-shadow:
    0 20px 45px rgba(91,115,73,.18);

}

.promo-card h2{

  margin-bottom:20px;

  font-size:
    clamp(2.4rem,6vw,3.5rem);

  font-family:
    'Cormorant Garamond',
    serif;

}

.promo-card p{

  line-height:2;

}

.promo-card a{

  display:inline-block;

  margin-top:24px;

  padding:
    14px 26px;

  border-radius:999px;

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

  color:white;

  text-decoration:none;

  transition:
    .35s ease;

}

.promo-card a:hover{

  transform:
    translateY(-3px);

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

}

/* =========================
   RESERVATION FORM
========================= */

.reservation-form{

  max-width:720px;

  margin:auto;

  display:flex;
  flex-direction:column;

  gap:18px;

}

.reservation-form input,
.reservation-form select{

  width:100%;

  padding:18px 20px;

  border:none;

  border-radius:22px;

  outline:none;

  background:
    rgba(236,242,228,.78);

  color:
    var(--olive);

  border:
    1px solid rgba(91,115,73,.08);

  backdrop-filter:
    blur(10px);

  transition:
    border .3s ease,
    box-shadow .3s ease,
    transform .3s ease,
    background .3s ease;

}

.reservation-form input::placeholder{

  color:
    rgba(97,115,85,.65);

}

.reservation-form input:focus,
.reservation-form select:focus{

  border:
    1px solid rgba(91,115,73,.22);

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

  box-shadow:
    0 0 0 4px rgba(91,115,73,.08);

}

.reservation-form button{

  border:none;

  padding:18px;

  border-radius:22px;

  background:
    var(--forest);

  color:white;

  cursor:pointer;

  font-size:1rem;

  font-weight:600;

  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;

}

.reservation-form button:hover{

  transform:
    translateY(-2px);

  background:
    var(--olive);

  box-shadow:
    var(--shadow-hover);

}

/* =========================
   FAQ
========================= */

.faq-container{

  max-width:920px;

  margin:auto;

  display:flex;
  flex-direction:column;

  gap:24px;

}

.faq-item{

  padding:35px;

  border-radius:28px;

  background:
    var(--glass);

  border:
    1px solid rgba(91,115,73,.08);

  backdrop-filter:
    blur(14px);

  box-shadow:
    var(--shadow-soft);

  transition:
    transform .35s ease,
    box-shadow .35s ease;

}

.faq-item:hover{

  transform:
    translateY(-4px);

  box-shadow:
    var(--shadow-hover);

}

.faq-item h3{

  margin-bottom:10px;

  color:
    var(--forest);

}

.faq-item p{

  line-height:1.9;

  color:
    var(--text-soft);

}

/* =========================
   CONTACT
========================= */

.contact-container{

  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:40px;

  align-items:center;

}

.contact-info{

  background:
    var(--glass);

  padding:40px;

  border-radius:30px;

  border:
    1px solid rgba(91,115,73,.08);

  backdrop-filter:
    blur(14px);

  box-shadow:
    var(--shadow-soft);

}

.contact-info h3{

  font-size:2rem;

  margin-bottom:18px;

  color:
    var(--forest);

  font-family:
    'Cormorant Garamond',
    serif;

}

.contact-info p{

  line-height:2;

  color:
    var(--text-soft);

}

iframe{

  width:100%;

  height:420px;

  border:none;

  border-radius:30px;

  overflow:hidden;

  box-shadow:
    var(--shadow-soft);

}

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

footer{

  text-align:center;

  padding:40px;

  color:
    var(--text-soft);

}

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

.whatsapp-btn{

  position:fixed;

  right:30px;
  bottom:30px;

  padding:
    14px 26px;

  border-radius:22px;

  text-decoration:none;

  color:white;

  font-weight:600;

  letter-spacing:1px;

  background:
    rgba(97,115,85,.35);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

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

  box-shadow:
    0 8px 32px rgba(0,0,0,.18);

  z-index:999;

  transition:
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease;

}

.whatsapp-btn:hover{

  transform:
    translateY(-4px)
    scale(1.03);

  background:
    rgba(97,115,85,.5);

  box-shadow:
    0 14px 40px rgba(0,0,0,.24);

}

/* =========================
   MOBILE NAV
========================= */

@media(max-width:900px){

  .menu-toggle{

    display:block;

  }

  nav{

    position:fixed;

    top:90px;
    left:50%;

    transform:
      translateX(-50%)
      translateY(-20px);

    width:90%;

    flex-direction:column;

    gap:8px;

    padding:24px;

    border-radius:28px;

    background:
      rgba(242,237,235,.94);

    backdrop-filter:
      blur(18px);

    border:
      1px solid rgba(91,115,73,.08);

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

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:
      .35s ease;

  }

  nav.active{

    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transform:
      translateX(-50%)
      translateY(0);

  }

  nav a{

    width:100%;

    text-align:center;

    padding:14px;

    border-radius:18px;

  }

  nav a:hover{

    background:
      rgba(236,242,228,.75);

  }

  .hero-title{

    font-size:
      clamp(3rem,10vw,4rem);

  }

  .contact-container{

    grid-template-columns:
      1fr;

  }

  iframe{

    height:340px;

  }

}

@media(max-width:768px){

  section{

    padding:
      90px 6%;

  }

  .hero-buttons{

    flex-direction:column;

    align-items:center;

  }

  .btn,
  .btn-outline{

    width:100%;

    max-width:320px;

  }

  .gallery-grid{

    grid-template-columns:
      1fr;

  }

  .gallery-item{

    height:300px;

  }

  .logo img{

    width:72px;

  }

}

@media(max-width:480px){

  .hero-subtitle{

    letter-spacing:3px;

    font-size:.68rem;

  }

  .hero p{

    font-size:.95rem;

  }

  .scroll-indicator{

    bottom:20px;

  }

  .scroll-indicator span{

    height:56px;

  }

}

/* =========================
   ANIMATIONS
========================= */

@keyframes revealText{

  to{

    opacity:1;

    transform:
      translateY(0);

  }

}

@keyframes bounce{

  0%,100%{

    transform:
      translateY(0);

  }

  50%{

    transform:
      translateY(10px);

  }

}

@keyframes drawFlower{

  to{

    stroke-dashoffset:0;

  }

}

@keyframes flowerFloat{

  0%,100%{

    transform:
      translateY(0)
      scale(1);

  }

  50%{

    transform:
      translateY(-6px)
      scale(1.01);

  }

}