:root{
  --paper:#f4f1ea;
  --paper-2:#f7f4ee;
  --ink:#2d2b27;
  --muted:#78736c;
  --line:rgba(45,43,39,.18);
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Manrope", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
button{font:inherit}
.site-header{
  position:absolute;z-index:20;left:0;right:0;top:0;height:92px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 clamp(24px,4vw,64px);color:white;
}
.brand{grid-column:2;text-align:center;line-height:1}
.brand-main{display:block;font-family:var(--serif);font-size:42px;font-weight:300;letter-spacing:.09em}
.brand-sub{display:block;font-size:8px;letter-spacing:.42em;margin-top:5px;transform:translateX(.2em)}
.desktop-nav{grid-column:1;grid-row:1;display:flex;gap:34px;font-size:9px;letter-spacing:.22em;text-transform:uppercase}
.header-actions{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:28px;font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.reserve{border:1px solid rgba(255,255,255,.62);padding:13px 22px;transition:.25s}
.reserve:hover{background:white;color:#292721}
.menu-toggle{display:none;background:none;border:0;color:white;text-transform:uppercase;letter-spacing:.2em;cursor:pointer}
.mobile-nav{display:none}

.hero{position:relative;height:min(100vh,930px);min-height:680px;overflow:hidden;color:white}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,17,.25) 0%,rgba(18,18,17,.02) 42%,rgba(18,18,17,.22) 100%)}
.hero-copy{position:absolute;right:6.2%;top:32%;text-align:right;max-width:690px}
.hero-copy h1{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(54px,5vw,82px);line-height:.93;letter-spacing:-.03em}
.hero-copy h1 em{font-weight:300}
.hero-copy p{margin:25px 0 0;font-size:9px;letter-spacing:.28em;text-transform:uppercase}
.hero-location{position:absolute;left:3.6%;bottom:42px;font-size:9px;line-height:1.45;letter-spacing:.22em;text-transform:uppercase}
.discover{position:absolute;right:4.2%;bottom:42px;font-size:9px;letter-spacing:.22em;text-transform:uppercase}
.discover span{font-size:16px;margin-left:8px}

.section{padding-left:clamp(26px,4vw,68px);padding-right:clamp(26px,4vw,68px)}
.intro{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(50px,8vw,130px);
  padding-top:70px;padding-bottom:48px;background:var(--paper-2)
}
.kicker{margin:0 0 14px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#7c776f}
.kicker.light{color:rgba(255,255,255,.74)}
.intro h2{margin:0;font-family:var(--serif);font-size:clamp(46px,4vw,67px);font-weight:300;line-height:.96;letter-spacing:-.025em}
.intro-copy{padding-top:20px;max-width:600px}
.intro-copy>p{margin:0 0 22px;font-family:var(--serif);font-size:18px;line-height:1.42;color:#6f6a63}
.text-link{display:inline-flex;align-items:center;gap:16px;font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.text-link span{width:28px;overflow:hidden;color:#8c877f}

.destination-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  padding-top:0;padding-bottom:62px;background:var(--paper-2)
}
.card-image-wrap{overflow:hidden;background:#ddd7ce}
.card-image-wrap img{aspect-ratio:1.02/1;object-fit:cover;transition:transform 1s cubic-bezier(.2,.6,.2,1),filter .8s ease}
.destination-card a:hover img{transform:scale(1.018);filter:brightness(1.015)}
.destination-card h3{margin:17px 0 3px;font-family:var(--serif);font-weight:300;font-size:29px;letter-spacing:.01em}
.destination-card p{margin:0 0 18px;color:#8a857d;font-size:8px;letter-spacing:.18em;text-transform:uppercase}
.card-link{display:inline-flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.card-link i,.ritual a i{display:block;width:34px;height:1px;background:currentColor;opacity:.45}

.gastronomy{position:relative;min-height:510px;overflow:hidden;color:white}
.gastronomy>img{position:absolute;inset:0;height:100%;object-fit:cover}
.gastronomy-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,11,10,.85) 0%,rgba(12,11,10,.45) 34%,rgba(12,11,10,.08) 66%,rgba(12,11,10,.35) 100%)}
.gastronomy-copy{position:relative;z-index:2;padding:70px clamp(26px,4vw,68px);max-width:520px}
.gastronomy-copy h2{margin:0;font-family:var(--serif);font-size:clamp(48px,4vw,68px);font-weight:300;line-height:.94;letter-spacing:-.03em}
.gastronomy-copy>p:not(.kicker){margin:22px 0 26px;font-family:var(--serif);font-size:17px;line-height:1.45;color:rgba(255,255,255,.78)}
.light-link{color:white}
.gastronomy-quote{position:absolute;z-index:2;right:4.5%;top:38%;text-align:center;font-family:var(--serif);font-size:19px;line-height:1.35;letter-spacing:.12em;text-transform:uppercase}

.ritual{position:relative;height:240px;overflow:hidden;color:white}
.ritual>img{height:100%;object-fit:cover}
.ritual-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,16,.05),rgba(13,15,16,.35))}
.ritual-left{position:absolute;left:4%;bottom:34px;display:flex;flex-direction:column}
.ritual-left span,.ritual-left small{font-size:8px;letter-spacing:.2em;text-transform:uppercase}
.ritual-left strong{font-family:var(--serif);font-weight:300;font-size:36px;margin:5px 0}
.ritual a{position:absolute;right:4%;bottom:42px;display:flex;gap:14px;align-items:center;font-size:9px;letter-spacing:.2em;text-transform:uppercase}

.footer{padding:46px clamp(26px,4vw,68px) 28px;background:var(--paper-2);border-top:1px solid var(--line)}
.footer-brand span{display:block;font-family:var(--serif);font-size:32px;font-weight:300;letter-spacing:.1em}
.footer-brand small{display:block;margin-top:-3px;font-size:7px;letter-spacing:.38em}
.footer nav{display:flex;gap:30px;flex-wrap:wrap;margin:28px 0 40px;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.footer-bottom{display:flex;justify-content:space-between;padding-top:18px;border-top:1px solid var(--line);font-size:8px;letter-spacing:.08em;color:#8b867e}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width: 980px){
  .desktop-nav{gap:18px}
  .destination-grid{grid-template-columns:repeat(3,1fr);gap:24px 14px}
}
@media (max-width: 760px){
  .site-header{height:78px;padding:0 18px;grid-template-columns:1fr auto 1fr}
  .desktop-nav,.header-actions .lang,.header-actions .reserve{display:none}
  .brand-main{font-size:34px}
  .brand-sub{font-size:7px}
  .menu-toggle{display:block}
  .mobile-nav{
    position:absolute;top:68px;right:16px;display:none;flex-direction:column;
    min-width:190px;background:rgba(247,244,238,.98);color:var(--ink);padding:8px 0;
    box-shadow:0 15px 42px rgba(0,0,0,.16)
  }
  .mobile-nav.open{display:flex}
  .mobile-nav a{padding:13px 18px;font-size:10px;letter-spacing:.17em;text-transform:uppercase}
  .hero{height:84svh;min-height:610px}
  .hero-copy{left:22px;right:22px;top:auto;bottom:105px;text-align:left}
  .hero-copy h1{font-size:46px;max-width:420px}
  .hero-copy p{font-size:8px;line-height:1.5}
  .hero-location{left:22px;bottom:24px}
  .discover{right:22px;bottom:24px}
  .intro{grid-template-columns:1fr;gap:28px;padding-top:52px;padding-bottom:38px}
  .intro h2{font-size:46px}
  .intro-copy{padding-top:0}
  .destination-grid{grid-template-columns:1fr;padding-bottom:50px}
  .destination-card h3{font-size:32px}
  .gastronomy{min-height:620px}
  .gastronomy>img{object-position:58% center}
  .gastronomy-shade{background:linear-gradient(90deg,rgba(12,11,10,.84),rgba(12,11,10,.26))}
  .gastronomy-copy{padding-top:64px}
  .gastronomy-quote{display:none}
  .ritual{height:260px}
  .ritual a{left:22px;right:auto;bottom:22px}
  .ritual-left{left:22px;bottom:88px}
  .footer nav{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
}
@media (max-width: 430px){
  .hero-copy h1{font-size:42px}
  .intro h2{font-size:42px}
  .gastronomy-copy h2{font-size:50px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}


/* -------------------------------------------------------
   DIDA COLLECTION — subtle motion refinement
   ------------------------------------------------------- */

.site-header{
  opacity:0;
  transform:translateY(-8px);
  animation:didaHeaderIn .9s cubic-bezier(.22,.65,.25,1) .12s forwards;
}

.hero-image{
  transform:scale(1.018);
  animation:didaHeroSettle 1.8s cubic-bezier(.22,.65,.25,1) forwards;
  will-change:transform;
}

.hero-copy,
.hero-location,
.discover{
  opacity:0;
  transform:translateY(10px);
  animation:didaCopyIn 1.05s cubic-bezier(.22,.65,.25,1) forwards;
}
.hero-copy{animation-delay:.35s}
.hero-location{animation-delay:.58s}
.discover{animation-delay:.68s}

.discover span{
  display:inline-block;
  animation:didaArrow 2.8s ease-in-out 1.6s infinite;
}

.desktop-nav a,
.footer nav a,
.mobile-nav a{
  position:relative;
}
.desktop-nav a::after,
.footer nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-6px;
  height:1px;
  background:currentColor;
  opacity:.45;
  transition:right .45s cubic-bezier(.22,.65,.25,1);
}
.desktop-nav a:hover::after,
.footer nav a:hover::after{
  right:0;
}


.card-link i{
  transition:width .45s cubic-bezier(.22,.65,.25,1),opacity .45s ease;
}
.destination-card a:hover .card-link i{
  width:45px;
  opacity:.75;
}

.reveal-section{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.22,.65,.25,1);
}
.reveal-section.in{
  opacity:1;
  transform:none;
}

/* Desktop-only, extremely light parallax. The image is oversized slightly so
   no background edge can ever appear during movement. */
@media (min-width: 900px) and (pointer:fine){
  .gastronomy>img{
    height:105%;
    top:-2.5%;
    transform:translate3d(0,var(--gastronomy-shift,0px),0) scale(1.012);
    will-change:transform;
  }
}

.footer-bottom{
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.ritual-credit{
  margin-left:auto;
  color:#8d887f;
  opacity:.58;
  font-size:7px;
  letter-spacing:.13em;
  text-transform:uppercase;
  transition:opacity .3s ease;
}
.ritual-credit:hover{opacity:.88}

@keyframes didaHeaderIn{
  to{opacity:1;transform:none}
}
@keyframes didaHeroSettle{
  to{transform:scale(1)}
}
@keyframes didaCopyIn{
  to{opacity:1;transform:none}
}
@keyframes didaArrow{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(3px)}
}


@media (max-width:760px){
  .ritual-credit{
    width:100%;
    margin-left:0;
    margin-top:3px;
  }
}

@media (prefers-reduced-motion:reduce){
  .site-header,
  .hero-image,
  .hero-copy,
  .hero-location,
  .discover,
  .discover span{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .reveal-section{
    opacity:1!important;
    transform:none!important;
  }
  .gastronomy>img{
    transform:none!important;
  }
}


/* v3 — restrained interaction details */
.destination-card.reveal{
  transition-delay:var(--delay,0ms);
}
.destination-card{
  transition:transform .55s cubic-bezier(.22,.65,.25,1);
}
.destination-card:hover{
  transform:translateY(-3px);
}
.destination-card h3{
  transition:letter-spacing .55s cubic-bezier(.22,.65,.25,1);
}
.destination-card:hover h3{
  letter-spacing:.018em;
}

.text-link{
  position:relative;
  padding-bottom:5px;
}
.text-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:currentColor;
  opacity:.42;
  transition:width .55s cubic-bezier(.22,.65,.25,1);
}
.text-link:hover::after{
  width:calc(100% - 42px);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,.022),transparent 38%,rgba(255,255,255,.012));
  opacity:0;
  animation:didaLightWash 2.4s ease .65s forwards;
}

@media (min-width:900px) and (pointer:fine){
  .hero-image{
    transform:translate3d(0,var(--hero-shift,0px),0) scale(1.02);
  }
  .destination-card .card-image-wrap{
    transition:box-shadow .65s ease;
  }
  .destination-card:hover .card-image-wrap{
    box-shadow:0 13px 30px rgba(39,35,28,.08);
  }
}

.site-header{
  transition:
    background-color .5s ease,
    backdrop-filter .5s ease,
    -webkit-backdrop-filter .5s ease,
    box-shadow .5s ease;
}
.site-header.is-soft{
  position:fixed;
  background:rgba(31,29,26,.24);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}

@keyframes didaLightWash{
  to{opacity:1}
}

@media (max-width:760px){
  .destination-card:hover{transform:none}
  .site-header.is-soft{
    background:rgba(31,29,26,.34);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
}

@media (prefers-reduced-motion:reduce){
  .hero::after{animation:none!important;opacity:1!important}
  .destination-card{transform:none!important}
}


/* v4 — Casa Dida real photo + improved hero text positioning */
.hero-copy{
  top:29%;
  max-width:640px;
}
.hero-copy h1{
  max-width:8.5ch;
}
.hero-copy p{
  margin-top:22px;
}

@media (max-width:760px){
  .hero{
    min-height:650px;
  }
  .hero-overlay{
    background:
      linear-gradient(180deg,rgba(18,18,17,.18) 0%,rgba(18,18,17,.06) 28%,rgba(18,18,17,.18) 55%,rgba(18,18,17,.38) 100%),
      linear-gradient(90deg,rgba(10,10,10,.18) 0%,rgba(10,10,10,0) 45%);
  }
  .hero-copy{
    left:22px;
    right:22px;
    bottom:165px;
    top:auto;
    max-width:320px;
    text-align:left;
  }
  .hero-copy h1{
    max-width:6.8ch;
    font-size:44px;
    line-height:.92;
  }
  .hero-copy p{
    margin-top:18px;
    max-width:295px;
    font-size:8px;
    line-height:1.7;
    letter-spacing:.24em;
  }
  .hero-location{
    bottom:34px;
  }
  .discover{
    bottom:34px;
  }
}
@media (max-width:430px){
  .hero-copy{
    bottom:155px;
    max-width:300px;
  }
  .hero-copy h1{
    font-size:40px;
  }
}


/* v5 — refined mobile hero composition */
@media (max-width:760px){
  .hero-copy{
    left:24px;
    right:24px;
    top:46%;
    bottom:auto;
    max-width:315px;
    text-align:left;
    transform:translateY(-50%);
  }
  .hero-copy h1{
    max-width:7.4ch;
    font-size:38px;
    line-height:.94;
    letter-spacing:-.028em;
  }
  .hero-copy h1 em{
    display:block;
    margin-top:4px;
  }
  .hero-copy p{
    margin-top:17px;
    max-width:300px;
    font-size:7.5px;
    line-height:1.65;
    letter-spacing:.22em;
  }
  .hero-location,
  .discover{
    bottom:30px;
  }
}

@media (max-width:430px){
  .hero-copy{
    top:47%;
    max-width:285px;
  }
  .hero-copy h1{
    font-size:36px;
  }
  .hero-copy p{
    max-width:280px;
  }
}

/* Real Casa Dida imagery: keep sea and loungers visible in the card crop. */
.destination-card:last-child .card-image-wrap img{
  object-position:center 48%;
}