/* ============================================================
   Casa Cana — elegant Caribbean villa theme (serif + sand/teal)
   Multi-page (Home · Gallery · Villa · Punta Cana · Book)
   ============================================================ */
:root{
  --sand:#f7f2ea;        /* page background       */
  --sand-2:#efe7d9;      /* alt sections          */
  --cream:#fffdf9;
  --ink:#26332f;         /* deep green-black text */
  --ink-soft:#56645f;
  --teal:#0e7c7b;
  --teal-deep:#0a5c5b;
  --aqua:#37b3ad;
  --leaf:#5a7d3c;
  --rattan:#c69a6d;
  --gold:#cda349;
  --line:rgba(38,51,47,.13);
  --shadow:0 18px 50px -24px rgba(20,40,38,.5);
  --shadow-sm:0 10px 26px -16px rgba(20,40,38,.42);
  --radius:16px;
  --radius-lg:22px;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Poppins","Helvetica Neue",Arial,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--sans);color:var(--ink);background:var(--sand);line-height:1.65;
  font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;color:var(--ink)}
h2{font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:.3px}
h3{font-size:1.45rem}
.kicker{font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.28em;
  font-size:.72rem;color:var(--teal);margin-bottom:.7rem;display:inline-block}
.lead{font-size:1.08rem;color:var(--ink-soft);max-width:64ch;font-weight:300}
.center{text-align:center}.center .lead{margin-inline:auto}
.muted{color:var(--ink-soft)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--sans);
  font-weight:500;font-size:.95rem;letter-spacing:.02em;padding:.9rem 1.8rem;border-radius:999px;
  cursor:pointer;border:1.5px solid transparent;transition:.25s ease;white-space:nowrap}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-deep);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:#f3ede2;transform:translateY(-2px)}
.btn-ghost-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.7);backdrop-filter:blur(4px)}
.btn-ghost-light:hover{background:rgba(255,255,255,.26)}

/* ---------- nav ---------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:.35s ease;padding:.8rem 0}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{font-family:var(--serif);font-size:1.75rem;font-weight:600;letter-spacing:.5px;color:#fff;transition:color .35s}
.nav-links{display:flex;align-items:center;gap:1.9rem;list-style:none}
.nav-links a{color:#fff;font-size:.92rem;font-weight:400;position:relative;transition:color .35s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:currentColor;transition:.3s}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:1rem}

.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:999px;padding:.4rem .8rem;
  font-size:.82rem;cursor:pointer;font-family:var(--sans);transition:.3s}
.lang-btn:hover{background:rgba(255,255,255,.26)}
.lang-menu{position:absolute;right:0;top:122%;background:#fff;border-radius:14px;box-shadow:var(--shadow);
  overflow:hidden;min-width:152px;display:none;border:1px solid var(--line)}
.lang-menu.open{display:block}
.lang-menu button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:none;
  border:none;padding:.7rem 1rem;font-family:var(--sans);font-size:.9rem;color:var(--ink);cursor:pointer}
.lang-menu button:hover,.lang-menu button.active{background:var(--sand-2)}
.flag{font-size:1.05rem;line-height:1}

header.nav.scrolled{background:rgba(255,253,249,.96);backdrop-filter:blur(10px);
  box-shadow:0 2px 18px -12px rgba(0,0,0,.3);padding:.5rem 0}
header.nav.scrolled .brand,header.nav.scrolled .nav-links a{color:var(--ink)}
header.nav.scrolled .lang-btn{background:var(--sand-2);border-color:var(--line);color:var(--ink)}
header.nav.scrolled .btn-ghost-light{color:var(--ink);border-color:var(--ink);background:transparent}
header.nav.scrolled .btn-ghost-light:hover{background:var(--ink);color:#fff}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:#fff;transition:.3s;border-radius:2px}
header.nav.scrolled .burger span{background:var(--ink)}

/* ---------- hero (crossfade slideshow) ---------- */
.hero{height:100vh;min-height:620px;position:relative;display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#1a2c28}
.hero-bg .slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.6s ease;transform:scale(1.05);animation:kenburns 16s ease-in-out infinite alternate}
.hero-bg .slide.active{opacity:1}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.14)}}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,30,28,.5),rgba(12,30,28,.2) 40%,rgba(12,30,28,.62))}
.hero-inner{position:relative;z-index:2;padding:0 22px;max-width:780px}
.hero-inner .kicker{color:#ffe6bd}
.hero h1{font-size:clamp(3.4rem,11vw,7rem);color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.4);line-height:.95}
.hero .hero-sub{font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:300;margin:1.1rem auto 2rem;max-width:36ch;
  text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ---------- facts strip ---------- */
.facts{background:var(--cream);border-bottom:1px solid var(--line)}
.facts .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1.5rem;
  padding:1.4rem 24px;font-size:1rem;color:var(--ink);font-weight:400}
.facts .dot{width:5px;height:5px;border-radius:50%;background:var(--rattan)}
.facts .rate{color:var(--gold);font-weight:500}

/* ---------- sections ---------- */
.section{padding:clamp(4rem,8vw,6.5rem) 0}
.section.soft{background:var(--sand-2)}
.section-head{margin-bottom:2.6rem}
.section-head h2{margin-bottom:.5rem}
.intro p{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.4;color:var(--ink);
  max-width:54ch;margin:0 auto;font-weight:500}
.page-top{padding-top:120px}
.page-intro{margin-bottom:2.6rem}

/* ---------- mosaic ---------- */
.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;
  border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:2/1;box-shadow:var(--shadow)}
.mosaic a{position:relative;overflow:hidden;display:block;background:var(--sand-2)}
.mosaic a.m0{grid-row:1 / span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mosaic a:hover img{transform:scale(1.06)}
.mosaic .more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:rgba(20,40,38,.42);color:#fff;font-family:var(--sans);font-weight:500;font-size:.95rem}
.mosaic .more svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- gallery grid ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2.2rem}
.filter{background:transparent;border:1.5px solid var(--line);color:var(--ink-soft);padding:.5rem 1.2rem;
  border-radius:999px;font-family:var(--sans);font-size:.85rem;cursor:pointer;transition:.25s}
.filter:hover{border-color:var(--teal);color:var(--teal)}
.filter.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid .tile{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;aspect-ratio:4/3;
  background:var(--sand-2);box-shadow:var(--shadow-sm)}
.grid .tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.grid .tile:hover img{transform:scale(1.07)}
.grid .tile .cap{position:absolute;inset:auto 0 0 0;padding:1.4rem .9rem .7rem;color:#fff;font-size:.82rem;
  background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:0;transition:.3s}
.grid .tile:hover .cap{opacity:1}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(14,24,22,.94);z-index:200;display:none;
  align-items:center;justify-content:center;flex-direction:column}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:82vh;border-radius:8px;box-shadow:0 30px 80px -20px #000}
.lb .lb-cap{color:#fff;margin-top:1rem;font-size:.95rem}
.lb .lb-x{position:absolute;top:22px;right:28px;color:#fff;font-size:2rem;cursor:pointer;background:none;border:none;line-height:1}
.lb .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.13);border:none;
  color:#fff;font-size:1.8rem;width:54px;height:54px;border-radius:50%;cursor:pointer;transition:.25s}
.lb .lb-nav:hover{background:rgba(255,255,255,.28)}
.lb .lb-prev{left:24px}.lb .lb-next{right:24px}

/* ---------- amenities ---------- */
.amen-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem}
.amen{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1rem;
  text-align:center;transition:.28s ease;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.amen:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:transparent}
.amen .ic{width:40px;height:40px;color:var(--teal)}
.amen .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6}
.amen span:last-child{font-size:.86rem;color:var(--ink)}

/* ---------- sleep cards ---------- */
.sleep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.sleep-card{background:var(--cream);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.sleep-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.sleep-card h3{font-size:1.3rem;margin:.9rem 1.2rem .1rem}
.sleep-card p{color:var(--ink-soft);font-size:.92rem;margin:0 1.2rem 1.3rem}

/* ---------- beaches band ---------- */
.beach-band{position:relative;min-height:440px;display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;background-size:cover;background-position:center;background-attachment:fixed}
.beach-band::after{content:"";position:absolute;inset:0;background:rgba(14,30,28,.45)}
.beach-band .inner{position:relative;z-index:1;max-width:620px;padding:3rem 24px}
.beach-band h2{color:#fff}.beach-band p{color:rgba(255,255,255,.92);margin-top:.6rem}
.beach-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.beach-strip img{width:100%;height:250px;object-fit:cover}

/* ---------- attractions ---------- */
.attr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.attr{border-radius:16px;overflow:hidden;background:var(--cream);box-shadow:var(--shadow-sm);transition:.28s}
.attr:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.attr img{aspect-ratio:3/2;object-fit:cover;width:100%}
.attr h3{font-size:1.3rem;margin:1rem 1.3rem .3rem}
.attr p{font-size:.9rem;color:var(--ink-soft);margin:0 1.3rem 1.4rem}

/* ---------- location ---------- */
.loc-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:2.5rem;align-items:stretch}
.loc-list{list-style:none;display:flex;flex-direction:column;gap:.9rem}
.loc-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:1rem 1.3rem}
.loc-list .place{display:flex;align-items:center;gap:.8rem;font-weight:400}
.loc-list .place svg{width:22px;height:22px;color:var(--teal);stroke:currentColor;fill:none;stroke-width:1.6}
.loc-list .time{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--teal);white-space:nowrap}
.loc-map{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);min-height:330px}
.loc-map iframe{width:100%;height:100%;min-height:330px;border:0;display:block}

/* ---------- availability calendar ---------- */
.cal-wrap{max-width:430px;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:var(--cream)}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.cal-head strong{font-family:var(--serif);font-size:1.3rem;text-transform:capitalize}
.cal-head button{background:var(--sand-2);border:1px solid var(--line);width:36px;height:36px;border-radius:9px;
  cursor:pointer;font-size:1rem;color:var(--ink)}
.cal-head button:hover{background:#e6dcc9}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:.9rem}
.cal-grid .dow{color:var(--ink-soft);text-align:center;font-size:.72rem;padding:.2rem 0;font-weight:600}
.cal-grid .day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:9px;
  background:#e3f3ec;color:#0b6b4f;font-weight:500;border:1px solid #cdeadd}
.cal-grid .day.booked{background:#f2efe9;color:#bdb6a8;text-decoration:line-through;border-color:var(--line);font-weight:300}
.cal-grid .day.past{background:#f7f4ee;color:#cfc8ba;border-color:transparent;font-weight:300}
.cal-grid .day.empty{background:transparent;border:none}
.cal-legend{display:flex;gap:1.6rem;justify-content:center;margin-top:1.1rem;font-size:.84rem;color:var(--ink)}
.cal-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:.45rem;vertical-align:middle}
.cal-legend .av{background:#e3f3ec;border:1px solid #cdeadd}
.cal-legend .bk{background:#f2efe9;border:1px solid var(--line)}

/* ---------- booking page ---------- */
.book-layout{display:grid;grid-template-columns:1.3fr .9fr;gap:2.6rem;align-items:start}
.reserve-card{position:sticky;top:100px;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.8rem;box-shadow:var(--shadow);background:var(--cream)}
.reserve-card .rating{display:flex;align-items:center;justify-content:center;gap:.4rem;color:var(--gold);
  font-weight:500;font-size:.95rem;margin-bottom:.9rem}
.reserve-card h3{font-size:1.5rem;margin-bottom:.3rem;text-align:center}
.reserve-card .sub{color:var(--ink-soft);font-size:.92rem;margin-bottom:1.2rem;text-align:center}
.reserve-card .btn{width:100%;margin-bottom:.7rem}
.reserve-card .note{font-size:.78rem;color:var(--ink-soft);text-align:center}
.cta{text-align:center}
.cta .liverates{font-family:var(--serif);font-size:1.7rem;color:var(--ink);margin:.4rem 0 1.4rem;font-weight:500}
.inquiry{max-width:560px;margin:2.6rem auto 0;border-top:1px solid var(--line);padding-top:2.2rem}
.inquiry form{display:grid;gap:.85rem}
.inquiry .two{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.inquiry label{font-size:.78rem;color:var(--ink-soft);display:block;margin-bottom:.25rem}
.inquiry input,.inquiry textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;
  font-family:var(--sans);font-size:.92rem;color:var(--ink);background:#fff}
.inquiry input:focus,.inquiry textarea:focus{outline:none;border-color:var(--teal)}

/* ---------- reviews / ratings ---------- */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1rem}
.review-card{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:2rem 1.6rem;
  text-align:center;box-shadow:var(--shadow-sm)}
.review-card .big{font-family:var(--serif);font-size:3.4rem;font-weight:600;color:var(--teal);line-height:1}
.review-card .stars{color:var(--gold);letter-spacing:.12em;font-size:1.05rem;margin:.4rem 0 .2rem}
.review-card h3{font-size:1.35rem;margin-bottom:.4rem}
.review-card p{font-size:.92rem;color:var(--ink-soft)}
.review-card .badge{display:inline-flex;align-items:center;gap:.45rem;background:var(--teal);color:#fff;
  border-radius:999px;padding:.45rem 1.1rem;font-family:var(--sans);font-weight:500;font-size:.92rem;margin-bottom:.6rem}
.review-card .badge svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
@media(max-width:760px){.reviews-grid{grid-template-columns:1fr}}

/* ---------- floating book pill ---------- */
.book-pill{position:fixed;right:20px;bottom:20px;z-index:80;box-shadow:0 12px 32px rgba(20,40,38,.3);
  opacity:0;transform:translateY(18px);transition:.3s ease;pointer-events:none}
.book-pill.show{opacity:1;transform:none;pointer-events:auto}

/* ---------- footer ---------- */
footer.foot{background:var(--ink);color:rgba(255,255,255,.8);padding:4rem 0 1.6rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem;margin-bottom:2.4rem}
footer.foot .brand{font-family:var(--serif);color:#fff;margin-bottom:.9rem;display:inline-block}
footer.foot p{font-size:.92rem;max-width:42ch}
footer.foot h4{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;
  color:#fff;margin-bottom:1rem;font-weight:600}
footer.foot ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;font-size:.92rem}
footer.foot a:hover{color:var(--aqua)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.13);padding-top:1.4rem;text-align:center;font-size:.82rem;opacity:.65}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:.8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .amen-grid{grid-template-columns:repeat(3,1fr)}
  .grid,.attr-grid{grid-template-columns:repeat(2,1fr)}
  .loc-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .book-layout{grid-template-columns:1fr}
  .reserve-card{position:static;order:-1}
}
@media(max-width:760px){
  .nav-links,.nav-right .btn{display:none}
  .burger{display:flex}
  .nav-links.mobile{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--cream);padding:1.2rem 24px;gap:1.1rem;box-shadow:var(--shadow);border-top:1px solid var(--line)}
  .nav-links.mobile a{color:var(--ink)}
  .sleep-grid{grid-template-columns:1fr}
  .amen-grid{grid-template-columns:repeat(2,1fr)}
  .beach-strip{grid-template-columns:1fr}
  .beach-band{background-attachment:scroll}
  .foot-grid{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:560px){
  .grid,.attr-grid{grid-template-columns:1fr}
  .inquiry .two{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto;aspect-ratio:auto}
  .mosaic a.m0{grid-column:1 / -1;aspect-ratio:16/10}
  .mosaic a:not(.m0){aspect-ratio:1}
}