/* ===== Tokens ===== */
:root{
  --jungle:#0d2a22; --emerald:#1f7a5c; --emerald-d:#155a43; --sand:#e9dfca; --gold:#c9a96a; --gold-d:#a88746;
  --warm:#fbf8f1; --bamboo:#8a7a4a; --wood:#5a3f2b; --ink:#1b2a24;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--warm);line-height:1.65;font-size:1.05rem}
img,iframe{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--jungle);padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1}
h2{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:.6rem}
h3{font-size:1.7rem}

/* ===== Header ===== */
.site-header{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1rem clamp(1rem,4vw,3rem);color:#fff;transition:background .4s,padding .4s}
.site-header.solid{background:rgba(13,42,34,.94);backdrop-filter:blur(8px);padding-block:.6rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--serif);font-size:1.9rem;color:var(--gold)}
nav{display:flex;gap:1.8rem;align-items:center}
nav a{text-decoration:none;font-size:.95rem;letter-spacing:.04em;position:relative}
nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--gold);transition:width .3s var(--ease)}
nav a:hover::after{width:100%}
.nav-cta{border:1px solid var(--gold);padding:.4rem 1.1rem;color:var(--gold)}
.nav-cta:hover{background:var(--gold);color:var(--jungle)}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;color:inherit}
.menu-btn span{display:block;width:26px;height:2px;background:currentColor;margin:6px auto;transition:transform .3s}
.menu-btn[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ===== Hero: bamboo stalks are the signature element ===== */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;color:#fff;background:var(--jungle)}
.hero-bg{position:absolute;inset:-8% 0;background:linear-gradient(180deg,rgba(13,42,34,.35),rgba(13,42,34,.85)),url(images/hero.jpg) center/cover,radial-gradient(ellipse at 70% 20%,#2f8a63,#0d2a22 70%)}
.stalks{position:absolute;top:-10%;bottom:-10%;width:clamp(50px,9vw,150px);opacity:.75;
  background:
    repeating-linear-gradient(180deg,transparent 0 160px,rgba(8,25,19,.9) 160px 166px),
    linear-gradient(90deg,#3c5a2c 0,#7f9a4a 40%,#5a7a38 55%,#2a4120 100%);
  box-shadow:0 0 40px rgba(0,0,0,.5)}
.stalks.left{left:4%;filter:blur(1px)}
.stalks.right{right:2%;width:clamp(30px,5vw,80px);filter:blur(3px);opacity:.55}
.leaf{position:absolute;width:46px;height:20px;background:linear-gradient(90deg,var(--emerald),#6fbf8f);border-radius:100% 0 100% 0;opacity:.7;animation:drift 14s ease-in-out infinite}
.l1{left:22%;top:-5%}.l2{left:62%;top:-10%;animation-delay:-5s;scale:.7}.l3{left:80%;top:-8%;animation-delay:-9s;scale:1.2}
@keyframes drift{0%{transform:translate(0,-10vh) rotate(0)}100%{transform:translate(-30vw,110vh) rotate(540deg)}}
.hero-copy{position:relative;padding:0 clamp(1.5rem,8vw,9rem) clamp(4rem,12vh,8rem);max-width:60rem;animation:rise 1.4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}
.hero h1{font-size:clamp(3rem,8.5vw,7rem);font-weight:400;margin-bottom:1.2rem;text-wrap:balance}
.hero p{max-width:34rem;font-size:1.2rem;margin-bottom:2rem;color:#e8efe9}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* ===== Buttons ===== */
.btn{display:inline-block;padding:.95rem 1.8rem;border:1px solid var(--gold);background:none;color:inherit;font:500 .85rem var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .3s var(--ease),background .3s,color .3s}
.btn.gold{background:var(--gold);color:var(--jungle)}
.btn.gold:hover{background:#dcc185;transform:translateY(-2px)}
.btn.ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn.small{padding:.6rem 1.2rem}

/* ===== Sections ===== */
.section{padding:clamp(4rem,10vw,8rem) 0}
.section.alt{background:var(--sand)}
.section.dark{background:var(--jungle);color:#e8efe9}
.wrap{width:min(1180px,92%);margin:auto}
.lead{max-width:40rem;font-size:1.15rem;margin-bottom:2.5rem;opacity:.85}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===== Booking ===== */
.book{background:var(--warm)}
.search{display:grid;grid-template-columns:repeat(6,1fr) auto;gap:.8rem;align-items:end;background:var(--jungle);padding:1.4rem;color:#fff;box-shadow:0 30px 60px -30px rgba(13,42,34,.6)}
label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;letter-spacing:.05em}
input,select,textarea{font:inherit;padding:.65rem .7rem;border:1px solid #b9b39f;background:#fff;color:var(--ink);width:100%;border-radius:2px}
.search input,.search select{border-color:transparent}
.error{color:#a3261b;min-height:1.5rem;margin:.6rem 0;font-weight:400}
.search+.error{color:#b43c2e}
.results{display:grid;gap:1.2rem;margin-top:1.5rem}
.res-note{font-size:.9rem;background:var(--sand);padding:.7rem 1rem;border-left:3px solid var(--gold)}
.checkout{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;margin-top:2rem;scroll-margin-top:90px}
.checkout form{display:grid;gap:1rem}
.check{flex-direction:row;align-items:flex-start;gap:.6rem}.check input{width:auto;margin-top:.35rem}
.summary{background:var(--jungle);color:#fff;padding:1.8rem;align-self:start;position:sticky;top:90px}
.summary dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin:1rem 0}
.summary dt{opacity:.7}.summary dd{text-align:right}
.summary .total{grid-column:1/-1;border-top:1px solid var(--gold);padding-top:.8rem;font:500 1.8rem var(--serif);color:var(--gold);display:flex;justify-content:space-between}
.note{font-size:.85rem;opacity:.75}
.confirmation{margin-top:2rem;padding:2.5rem;border:1px solid var(--gold);background:#fff;text-align:center}
.confirmation .ref{font:500 2.2rem var(--serif);color:var(--emerald-d);margin:.5rem 0}
.confirmation .badge{display:inline-block;background:var(--sand);padding:.3rem .9rem;font-size:.85rem;margin-bottom:1rem}

/* ===== Room cards ===== */
.rooms{display:grid;gap:2.5rem}
.room{display:grid;grid-template-columns:1.2fr 1fr;background:var(--warm);box-shadow:0 20px 50px -30px rgba(0,0,0,.4)}
.room:nth-child(even){grid-template-columns:1fr 1.2fr}
.room:nth-child(even) .room-media{order:2}
.room-media{position:relative;min-height:340px}
.room-main{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s var(--ease)}
.room:hover .room-main{transform:scale(1.03)}
.room-media{overflow:hidden}
.thumbs{position:absolute;left:1rem;bottom:1rem;display:flex;gap:.4rem}
.thumbs button{width:54px;height:40px;border:2px solid transparent;background-size:cover;cursor:pointer;opacity:.8}
.thumbs button[aria-current=true]{border-color:var(--gold);opacity:1}
.room-body{padding:clamp(1.5rem,3vw,2.6rem);display:flex;flex-direction:column;gap:.8rem}
.room-body ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.room-body li{font-size:.82rem;border:1px solid #cfc7b1;padding:.15rem .7rem}
.price{font:500 1.9rem var(--serif);color:var(--emerald-d)}
.price small{font:300 .9rem var(--sans);color:var(--ink)}
.room-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.results .room{border:1px solid #d8d0b8}
.results .room-media{min-height:260px}

/* ===== Experiences ===== */
.xp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.xp{position:relative;min-height:340px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.xp:nth-child(3n+1){min-height:420px}
.xp::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,25,19,.88),transparent 65%),var(--bg);background-size:cover;transition:transform 1s var(--ease)}
.xp:hover::before{transform:scale(1.07)}
.xp div{position:relative;padding:1.3rem}
.xp h3{font-size:1.5rem}.xp p{font-size:.9rem;max-height:0;opacity:0;overflow:hidden;transition:.5s var(--ease)}
.xp:hover p,.xp:focus-within p{max-height:8rem;opacity:1;margin-top:.4rem}
.xp{outline-offset:-4px}

/* ===== Dining, gallery, contact ===== */
.dishes{list-style:none;padding:0;display:grid;gap:1rem}
.dishes li{padding-left:1.2rem;border-left:2px solid var(--gold)}
.dining-img{min-height:480px;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.35)),url(images/restaurante.jpg) center/cover,linear-gradient(135deg,#5a3f2b,#c9a96a)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:.7rem;margin-top:2rem}
.gallery button{border:0;cursor:zoom-in;background-size:cover;background-position:center;position:relative;overflow:hidden;transition:filter .4s}
.gallery button:nth-child(1),.gallery button:nth-child(6){grid-row:span 2;grid-column:span 2}
.gallery button:hover{filter:brightness(1.15)}
.gallery span{position:absolute;left:0;bottom:0;right:0;padding:.5rem .8rem;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);color:#fff;font-size:.85rem;text-align:left}
address{font-style:normal;margin-bottom:1rem}
.social{display:flex;gap:1.2rem}
.map{width:100%;height:380px;border:0;filter:saturate(.7)}
.site-footer{background:var(--jungle);color:#b9c7bd;text-align:center;padding:2rem;font-size:.85rem}
.wa-float{position:fixed;right:1.2rem;bottom:1.2rem;z-index:60;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .3s var(--ease)}
.wa-float:hover{transform:scale(1.1) rotate(-6deg)}

/* ===== Lightbox ===== */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%}
dialog::backdrop{background:rgba(4,14,10,.93)}
dialog figure{height:100%;display:grid;grid-template-rows:1fr auto;place-items:center;padding:4rem 4rem 1.5rem}
.lb-img{width:100%;height:100%;background-size:contain;background-repeat:no-repeat;background-position:center;animation:fade .4s}
@keyframes fade{from{opacity:0}}
figcaption{color:#fff;font-family:var(--serif);font-size:1.4rem;padding-top:.8rem}
.lb-btn{position:absolute;background:none;border:0;color:#fff;font-size:3rem;cursor:pointer;width:56px;height:56px;line-height:1}
.lb-btn.prev{left:.5rem;top:50%}.lb-btn.next{right:.5rem;top:50%}.lb-btn.close{right:.8rem;top:.6rem}

/* ===== Responsive ===== */
@media(max-width:1000px){
  .search{grid-template-columns:repeat(3,1fr)}.search .btn{grid-column:1/-1}
  .xp-grid{grid-template-columns:repeat(2,1fr)}.gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
  .menu-btn{display:block}
  nav{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:var(--jungle);flex-direction:column;justify-content:center;gap:2rem;transform:translateX(100%);transition:transform .45s var(--ease)}
  nav.open{transform:none}
  .split,.checkout,.room,.room:nth-child(even){grid-template-columns:1fr}
  .room:nth-child(even) .room-media{order:0}
  .summary{position:static}
  dialog figure{padding:4rem 1rem 1rem}
}
@media(max-width:520px){.search{grid-template-columns:1fr 1fr}.xp-grid{grid-template-columns:1fr}.xp p{max-height:8rem;opacity:1}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}


/* =========================================================
   YAXCHÉ SANTUARIO — REFINED GOLD LUXURY EDITION
   Champagne gold • deep emerald • warm ivory
   ========================================================= */
:root{
  --jungle:#071b16;
  --emerald:#174b3b;
  --emerald-d:#0d3529;
  --sand:#e9dfca;
  --gold:#d6b875;
  --gold-d:#a98543;
  --warm:#f8f5ed;
  --bamboo:#9a8652;
  --wood:#493526;
  --ink:#17251f;
  --gold-light:#ead7a5;
  --gold-glow:rgba(214,184,117,.24);
}

/* Overall finish */
body{
  background:var(--warm);
  color:#1b2922;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:var(--jungle)}
h1,h2,h3{letter-spacing:.012em}
h2{
  color:var(--jungle);
  position:relative;
  padding-bottom:1.05rem;
}
h2::after{
  content:"";
  display:block;
  width:68px;
  height:1px;
  margin-top:1rem;
  background:linear-gradient(90deg,var(--gold-d),var(--gold-light));
}
.section.dark h2{color:var(--gold-light)}
.section.dark h2::after{background:linear-gradient(90deg,var(--gold),transparent)}
.lead{color:inherit;opacity:.78;line-height:1.85}

/* Header and wordmark */
.site-header{
  padding-block:1.25rem;
  background:linear-gradient(180deg,rgba(3,17,13,.52),transparent);
}
.site-header.solid{
  background:rgba(5,25,19,.96);
  border-bottom:1px solid rgba(214,184,117,.22);
  box-shadow:0 12px 35px rgba(0,0,0,.16);
}
.logo{
  color:var(--gold-light);
  letter-spacing:.11em;
  text-transform:uppercase;
  font-size:1.55rem;
}
.logo svg{filter:drop-shadow(0 0 8px rgba(214,184,117,.22))}
nav a{
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.72rem;
  transition:color .3s ease;
}
nav a:hover{color:var(--gold-light)}
.nav-cta{
  padding:.62rem 1.25rem;
  border-color:var(--gold);
  color:var(--gold-light);
  letter-spacing:.16em;
}
.nav-cta:hover{
  background:var(--gold);
  color:var(--jungle);
  box-shadow:0 0 22px var(--gold-glow);
}

/* Hero: cinematic, layered and editorial */
.hero{min-height: min(900px,100svh);background:#061811}
.hero-bg{
  background:
    linear-gradient(90deg,rgba(3,17,13,.78) 0%,rgba(3,17,13,.38) 52%,rgba(3,17,13,.15) 100%),
    linear-gradient(0deg,rgba(3,17,13,.78),transparent 58%),
    url(images/hero.jpg) center/cover,
    radial-gradient(ellipse at 70% 20%,#2f8a63,#071b16 70%);
  transform:scale(1.025);
}
.hero::after{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(214,184,117,.34);
  pointer-events:none;
  z-index:1;
}
.hero-copy{
  z-index:2;
  max-width:70rem;
  padding-bottom:clamp(5rem,13vh,9rem);
}
.hero-copy::before{
  content:"SELVA PRIVADA  ·  LUJO NATURAL";
  display:inline-block;
  color:var(--gold-light);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.34em;
  margin-bottom:1.7rem;
}
.hero h1{
  max-width:850px;
  color:#fffaf0;
  font-size:clamp(3.6rem,8vw,7.8rem);
  line-height:.94;
  letter-spacing:-.025em;
  text-shadow:0 8px 35px rgba(0,0,0,.25);
}
.hero h1 em,.hero h1 strong{color:var(--gold-light);font-weight:400}
.hero p{
  max-width:38rem;
  color:rgba(255,250,240,.86);
  font-size:1.08rem;
  line-height:1.9;
}
.hero-actions{gap:1.1rem}
.btn{
  min-height:50px;
  padding:1rem 1.7rem;
  font-size:.72rem;
  letter-spacing:.19em;
  transition:all .35s var(--ease);
}
.btn.gold{
  color:#172319;
  background:linear-gradient(135deg,#ead7a5 0%,#c6a45e 55%,#e4cc91 100%);
  border-color:#d7b978;
  box-shadow:0 10px 30px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.45);
}
.btn.gold:hover{
  background:linear-gradient(135deg,#f4e6bf,#d4b36e);
  box-shadow:0 12px 35px rgba(214,184,117,.25);
  transform:translateY(-3px);
}
.btn.ghost{
  border-color:rgba(234,215,165,.8);
  color:#fff8e9;
  background:rgba(5,25,19,.18);
  backdrop-filter:blur(5px);
}
.btn.ghost:hover{background:rgba(214,184,117,.15);border-color:var(--gold-light)}

/* Section rhythm and gold eyebrow details */
.section{position:relative}
.section.alt{background:#eee7d8}
.section.dark{
  background:
    radial-gradient(ellipse at 85% 15%,rgba(38,94,68,.28),transparent 42%),
    linear-gradient(135deg,#071b16,#0d3025);
}
.section.dark .lead{color:#e8e0cf}
.book{
  background:
    radial-gradient(ellipse at 10% 0%,rgba(214,184,117,.09),transparent 35%),
    var(--warm);
}
.book h2,.section:not(.dark) h2{color:#102a20}
.wrap{width:min(1220px,91%)}

/* Booking panel — elegant gold frame */
.search{
  position:relative;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1rem;
  padding:2rem;
  background:linear-gradient(135deg,#09231b,#123c2e);
  border:1px solid rgba(214,184,117,.62);
  box-shadow:0 28px 65px -35px rgba(5,25,19,.7);
}
.search::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(214,184,117,.16);
  pointer-events:none;
}
.search label{
  position:relative;
  color:#e9d9b4;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.search input,.search select{
  min-height:48px;
  margin-top:.25rem;
  background:#fbf8f0;
  color:#1b2922;
  border:1px solid rgba(214,184,117,.35);
}
.search input:focus,.search select:focus{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
.search .btn{grid-column:1/-1;justify-self:start;margin-top:.35rem}
.error{font-size:.9rem}
.res-note{border-left-color:var(--gold-d);background:#f0e8d7}
.summary{
  background:linear-gradient(145deg,#082219,#123b2d);
  border:1px solid rgba(214,184,117,.55);
  box-shadow:0 20px 45px rgba(0,0,0,.12);
}
.summary h3{color:var(--gold-light)}
.summary .total{color:var(--gold-light)}
.checkout form,.checkout .summary{border-radius:2px}
.confirmation{
  border:1px solid var(--gold-d);
  background:linear-gradient(135deg,#fffdf7,#f0e8d7);
  box-shadow:0 20px 45px rgba(25,35,25,.07);
}
.confirmation .ref{color:var(--gold-d)}

/* Accommodation cards */
.room{
  border:1px solid rgba(169,133,67,.28);
  box-shadow:0 24px 55px -38px rgba(0,0,0,.5);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.room:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 65px -35px rgba(0,0,0,.38);
}
.room-body{padding:clamp(1.7rem,3.6vw,3.2rem)}
.room-body h3{color:var(--jungle);font-size:2rem}
.room-body li{
  border-color:rgba(169,133,67,.4);
  color:#5b503b;
  background:rgba(214,184,117,.08);
}
.price{color:var(--gold-d);font-size:2.1rem}
.price small{color:#645d4e}
.thumbs button[aria-current=true]{border-color:var(--gold-light);box-shadow:0 0 0 1px var(--gold-d)}

/* Experiences */
.xp-grid{gap:1.15rem}
.xp{
  border:1px solid rgba(214,184,117,.32);
  box-shadow:0 16px 35px rgba(0,0,0,.1);
}
.xp::before{
  background:
    linear-gradient(0deg,rgba(4,20,14,.92),rgba(4,20,14,.04) 72%),
    var(--bg);
  background-size:cover;
}
.xp div{padding:1.5rem}
.xp h3{color:#f3dfb0;font-size:1.7rem}
.xp p{color:rgba(255,250,240,.86);line-height:1.7}
.xp:hover{border-color:rgba(234,215,165,.8)}

/* Dining and gallery */
.dishes li{
  border-left-color:var(--gold);
  padding:.4rem 0 .4rem 1.25rem;
  color:#e8e0cf;
}
.dishes strong{color:var(--gold-light);font-weight:500}
.dining-img{
  border:1px solid rgba(214,184,117,.55);
  box-shadow:18px 18px 0 -8px rgba(214,184,117,.17);
}
.gallery{gap:.85rem}
.gallery button{
  outline:1px solid rgba(169,133,67,.28);
  outline-offset:-1px;
}
.gallery button:hover{filter:brightness(1.12) saturate(1.08)}
.gallery span{
  color:#f3dfb0;
  letter-spacing:.06em;
}
.map{border:1px solid rgba(169,133,67,.45);filter:sepia(.12) saturate(.8)}
address a,.social a{
  color:var(--gold-d);
  text-decoration-color:rgba(169,133,67,.45);
  text-underline-offset:4px;
}
address a:hover,.social a:hover{color:var(--emerald)}
.site-footer{
  border-top:1px solid rgba(214,184,117,.35);
  color:#d6c9aa;
  background:#061811;
  letter-spacing:.04em;
}
.wa-float{
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 0 5px rgba(214,184,117,.13);
}

/* Refined mobile navigation */
@media(max-width:800px){
  .site-header{padding:1rem 1.1rem}
  nav{
    background:
      radial-gradient(ellipse at 50% 15%,rgba(40,91,66,.4),transparent 55%),
      #071b16;
    border-left:1px solid rgba(214,184,117,.25);
  }
  nav a{font-size:.8rem}
  .hero::after{inset:10px}
  .hero-copy{padding:0 1.5rem 5rem}
  .hero h1{font-size:clamp(3.2rem,13vw,5.5rem)}
  .search{grid-template-columns:repeat(2,minmax(0,1fr));padding:1.4rem}
  .search .btn{grid-column:1/-1;width:100%}
}
@media(max-width:520px){
  .hero p{font-size:1rem}
  .hero-actions{align-items:stretch;flex-direction:column;max-width:320px}
  .hero-actions .btn{text-align:center}
  .search{grid-template-columns:1fr}
  .search .btn{grid-column:auto}
  .xp-grid{gap:.8rem}
  .gallery{grid-auto-rows:145px}
  .section{padding-block:4.5rem}
}


/* ==========================================
   YAXCHÉ SANTUARIO
   IDENTIDAD VISUAL — SELVA & GOLD LUXURY
========================================== */

:root {
  --jungle: #071b16;
  --jungle-light: #103a2c;
  --emerald: #174b3b;
  --gold: #d6b875;
  --gold-light: #f0dfb2;
  --ivory: #f8f5ed;

  --serif: 'Cormorant Garamond', Georgia, serif;
}

/* TIPOGRAFÍA ELEGANTE */

h1, h2, h3,
.logo,
.room-body h3,
.price {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gold-light);
  font-weight: 500;
}

h1 {
  letter-spacing: .02em;
}

h2 {
  font-size: clamp(2.8rem, 5vw, 4rem);
  color: var(--gold);
  text-shadow: 0 2px 15px rgba(214,184,117,.12);
}

h3 {
  color: var(--gold-light);
}

.logo {
  font-size: 2rem;
  letter-spacing: .08em;
}

/* TODAS LAS SECCIONES EN VERDE SELVA */

.section,
.section.alt,
.book {
  background:
    radial-gradient(
      ellipse at 80% 10%,
      rgba(31,122,92,.20),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      #071b16,
      #103629
    );

  color: var(--ivory);
}

/* SEPARADORES DORADOS */

.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(214,184,117,.65),
    transparent
  );
}

/* TÍTULOS */

.section h2,
.book h2 {
  color: var(--gold-light);
}

h2::after {
  width: 95px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    transparent
  );
}

/* TEXTOS */

.lead,
.section p,
.section li,
address {
  color: #e7e1d2;
}

.hero h1 {
  color: var(--gold-light);
  font-style: italic;
}

/* TARJETAS DE ALOJAMIENTO */

.room {
  background: linear-gradient(
    145deg,
    #10382b,
    #071b16
  );

  border: 1px solid rgba(214,184,117,.55);

  box-shadow:
    0 20px 50px rgba(0,0,0,.25),
    inset 0 0 30px rgba(214,184,117,.025);
}

.room-body h3 {
  color: var(--gold-light);
}

.room-body li {
  color: var(--gold-light);
  border: 1px solid rgba(214,184,117,.4);
  background: rgba(214,184,117,.06);
}

.price {
  color: var(--gold);
}

/* EXPERIENCIAS */

.xp {
  border: 1px solid rgba(214,184,117,.5);
}

.xp h3 {
  color: var(--gold-light);
  font-style: italic;
}

/* GASTRONOMÍA */

.section.dark {
  background:
    radial-gradient(
      ellipse at 70% 30%,
      #174b3b,
      transparent 60%
    ),
    #071b16;
}

.dishes strong {
  color: var(--gold-light);
}

/* GALERÍA */

.gallery button {
  border: 1px solid rgba(214,184,117,.5);
}

.gallery span {
  color: var(--gold-light);
}

/* FORMULARIO DE RESERVAS */

.search,
.summary {
  background: linear-gradient(
    145deg,
    #103a2c,
    #071b16
  );

  border: 1px solid var(--gold);
}

.search label {
  color: var(--gold-light);
}

.search .btn {
  color: #071b16;
}

/* BOTONES DORADOS */

.btn.gold {
  background: linear-gradient(
    135deg,
    #f0dfb2,
    #c6a45e,
    #e7ce91
  );

  color: #071b16;
  border: 1px solid var(--gold-light);
}

.btn.gold:hover {
  box-shadow: 0 0 25px rgba(214,184,117,.35);
}

/* CONTACTO Y PIE DE PÁGINA */

address a,
.social a {
  color: var(--gold-light);
}

.site-footer {
  background: #04130f;
  color: var(--gold-light);
  border-top: 1px solid var(--gold);
}

/* MÓVILES */

@media(max-width:800px) {
  .section h2 {
    font-size: 2.8rem;
  }

  .room {
    background: #0b281e;
  }
}


/* ==========================================
   MACAO LUME — LUXURY CINEMATIC HERO
========================================== */

.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  background: #061810;
}

/* Fondo cinematográfico */

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(3,15,10,.55),
      rgba(3,15,10,.15),
      rgba(3,15,10,.55)
    ),
    linear-gradient(
      0deg,
      rgba(3,15,10,.75),
      transparent 75%
    ),
    url("images/hero.jpg") center/cover no-repeat;

  animation: jungleReveal 2.5s ease both;
}

@keyframes jungleReveal {
  from {
    opacity: 0;
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Marco dorado */

.luxury-frame {
  position: absolute;
  inset: 22px;
  z-index: 2;
  border: 1px solid rgba(226,195,125,.55);
  pointer-events: none;
}

.luxury-frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(226,195,125,.18);
}

/* Contenido */

.luxury-intro {
  z-index: 3;
  width: 100%;
  max-width: 1100px;
  padding: 7rem 2rem 5rem;
  animation: luxuryFade 2s ease both;
}

@keyframes luxuryFade {
  from {
    opacity: 0;
    transform: translateY(35px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Emblema */

.luxury-emblem {
  font-size: 3rem;
  color: #e6c77f;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 25px rgba(226,195,125,.5);
  animation: emblemGlow 4s ease-in-out infinite;
}

@keyframes emblemGlow {
  50% {
    text-shadow: 0 0 35px rgba(226,195,125,.8);
  }
}

/* Letras principales */

.luxury-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(5rem, 12vw, 10rem);
  line-height: .95;
  letter-spacing: .015em;

  background: linear-gradient(
    135deg,
    #fff0c5,
    #d6b875,
    #f8e5ae,
    #a98543
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter: drop-shadow(0 5px 15px rgba(0,0,0,.5));
}

.luxury-title span:last-child {
  font-size: .85em;
  margin-top: .1em;
}

/* Divisor */

.gold-divider {
  width: min(380px,75%);
  height: 1px;
  margin: 2.5rem auto 1.5rem;
  background: linear-gradient(
    90deg,
    transparent,
    #d6b875,
    transparent
  );
  position: relative;
}

.gold-divider span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: #10271b;
  color: #e8cd8d;
  padding: 0 15px;
  font-size: 1.5rem;
}

/* Frase */

.luxury-subtitle {
  color: #f1dca8;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.5rem,3vw,2.2rem);
  letter-spacing: .08em;
}

.luxury-description {
  max-width: 550px;
  margin: 1rem auto 2rem;
  color: rgba(255,250,235,.82);
  font-size: 1rem;
  letter-spacing: .08em;
  line-height: 1.9;
}

/* Botones */

.luxury-intro .hero-actions {
  justify-content: center;
  margin-top: 2rem;
}

/* Destellos decorativos */

.gold-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .65;

  background-image:
    radial-gradient(circle, #f4dfa7 1px, transparent 2px),
    radial-gradient(circle, #d6b875 1px, transparent 2px);

  background-size: 170px 190px, 240px 230px;
  background-position: 20px 30px, 100px 110px;

  animation: sparkle 8s ease-in-out infinite alternate;
}

@keyframes sparkle {
  from { opacity: .2; }
  to { opacity: .75; }
}

/* Móvil */

@media(max-width:600px) {
  .luxury-frame {
    inset: 10px;
  }

  .luxury-intro {
    padding: 6rem 1.2rem 4rem;
  }

  .luxury-title {
    font-size: clamp(4.5rem,17vw,6rem);
  }

  .luxury-subtitle {
    font-size: 1.5rem;
  }

  .luxury-description {
    font-size: .9rem;
  }

  .luxury-intro .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .luxury-intro .btn {
    width: min(100%,320px);
  }
}

@media(prefers-reduced-motion:reduce) {
  .luxury-intro,
  .hero-bg,
  .luxury-emblem,
  .gold-particles {
    animation: none;
  }
}



/* =========================================================
   YAXCHÉ SANTUARIO · DIRECCIÓN DE ARTE FINAL
   Lujo discreto, editorial y cálido. Reglas de acabado.
   ========================================================= */
:root{
  --jungle:#071b16;--jungle-2:#0d3025;--gold:#d6b875;--gold-pale:#f0dfb2;
  --ivory:#f8f5ed;--paper:#eee8dc;--ink:#26342d;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',Arial,sans-serif;
}
html{scroll-padding-top:90px}
body{font-family:var(--sans);font-size:16px;letter-spacing:.025em;-webkit-font-smoothing:antialiased}
.site-header{padding:1.25rem clamp(1.2rem,5vw,5rem);background:linear-gradient(180deg,rgba(3,15,11,.62),transparent);}
.site-header.solid{background:rgba(5,24,18,.97);padding-block:.8rem}
.logo{font-family:var(--serif);font-size:1.8rem;font-style:italic;letter-spacing:.08em;color:var(--gold-pale)}
.logo svg{width:34px;height:34px}
nav{gap:clamp(1rem,2vw,2.2rem)}
nav a{font-size:.68rem;letter-spacing:.16em;font-weight:500}
.nav-cta{padding:.75rem 1.4rem;border:1px solid rgba(214,184,117,.8)}

/* Portada cinematográfica */
.hero{min-height:100svh;min-height: min(980px,100svh);display:flex;align-items:center;justify-content:center;text-align:center;background:#061810;isolation:isolate}
.hero-bg{inset:0;background:linear-gradient(90deg,rgba(3,15,10,.56),rgba(3,15,10,.16),rgba(3,15,10,.56)),linear-gradient(0deg,rgba(3,15,10,.78),rgba(3,15,10,.08) 70%),url('images/hero.jpg') center/cover no-repeat;transform:scale(1.02)}
.hero::after{content:none}
.luxury-frame{position:absolute;inset:22px;z-index:4;border:1px solid rgba(226,195,125,.48);pointer-events:none}
.luxury-frame::before{content:'';position:absolute;inset:7px;border:1px solid rgba(226,195,125,.18)}
.luxury-intro{position:relative;z-index:5;width:min(100%,1000px);padding:8rem 2rem 5.5rem;animation:luxuryFade 1.5s ease both}
.luxury-emblem{font-size:2.2rem;color:var(--gold-pale);margin-bottom:.45rem;text-shadow:0 0 24px rgba(226,195,125,.45)}
.hero-kicker{font-size:.66rem!important;letter-spacing:.34em!important;text-transform:uppercase;color:#ead7a5!important;margin:0 auto 1.4rem!important;font-weight:500}
.luxury-title{display:flex;flex-direction:column;align-items:center;font-family:'Great Vibes',cursive;font-style:normal;font-weight:400;font-size:clamp(5.3rem,12vw,10rem);line-height:.78;letter-spacing:.015em;margin:0;color:transparent;background:linear-gradient(135deg,#fff1c9 5%,#d6b875 45%,#f8e5ae 68%,#a98543 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 6px 18px rgba(0,0,0,.48))}
.luxury-title span+span{font-size:.67em;margin-top:.22em}
.gold-divider{width:min(340px,70%);height:1px;margin:2rem auto 1.3rem;background:linear-gradient(90deg,transparent,#d6b875,transparent);position:relative}
.gold-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 14px;background:#10271b;color:#e8cd8d;font-size:1.1rem}
.luxury-subtitle{font:italic clamp(1.45rem,3vw,2.15rem)/1.3 var(--serif);letter-spacing:.045em;color:#f1dca8;margin:0 auto}
.luxury-description{max-width:540px;margin:1rem auto 2rem;color:rgba(255,250,235,.84);font-size:.93rem;line-height:1.9;letter-spacing:.055em}
.luxury-intro .hero-actions{justify-content:center;gap:1rem;margin-top:1.7rem}
.hero .btn{min-width:220px;min-height:52px;font-size:.66rem;letter-spacing:.17em}
.hero-scroll{display:flex;flex-direction:column;align-items:center;gap:.65rem;margin-top:3.4rem;color:rgba(240,223,178,.75);font-size:.55rem;letter-spacing:.25em}
.hero-scroll i{height:32px;width:1px;background:linear-gradient(var(--gold),transparent);display:block}
.gold-particles{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.26;background-image:radial-gradient(circle,#f4dfa7 1px,transparent 2px),radial-gradient(circle,#d6b875 1px,transparent 2px);background-size:170px 190px,240px 230px;background-position:20px 30px,100px 110px;animation:sparkle 9s ease-in-out infinite alternate}
.stalks{opacity:.28}

/* Secciones: alternancia editorial y aire */
.section{padding:clamp(5rem,9vw,8.5rem) 0;background:var(--ivory);color:var(--ink)}
.section.alt,.book{background:var(--paper);color:var(--ink)}
.section.dark{background:radial-gradient(ellipse at 75% 25%,rgba(36,91,66,.3),transparent 48%),linear-gradient(135deg,#071b16,#103629);color:#eee8dc}
.section h2,.book h2{font:500 clamp(2.8rem,5vw,4.4rem)/.98 var(--serif);font-style:normal;letter-spacing:.005em;color:var(--jungle);margin-bottom:1rem}
.section.dark h2{color:var(--gold-pale)}
h2::after{width:76px;height:1px;margin-top:1.25rem;background:linear-gradient(90deg,var(--gold-d),transparent)}
.section.dark h2::after{background:linear-gradient(90deg,var(--gold),transparent)}
.lead{font-size:1.04rem;line-height:1.9;max-width:44rem;color:inherit;opacity:.78;margin-bottom:2.6rem}
.wrap{width:min(1240px,90%)}

/* Reservas: panel de concierge */
.search{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;padding:2rem;background:linear-gradient(145deg,#09251c,#123b2e);border:1px solid rgba(214,184,117,.65);box-shadow:0 28px 65px -35px rgba(5,25,19,.65)}
.search::before{inset:8px;border-color:rgba(214,184,117,.15)}
.search label{font-size:.68rem;letter-spacing:.13em;color:#ead9b5}
.search input,.search select{min-height:48px;background:#fbf8f0;border:1px solid rgba(214,184,117,.32);border-radius:0;font-family:var(--sans)}
.search .btn{grid-column:1/-1;justify-self:start;margin-top:.35rem}
.btn{border-radius:0;text-transform:uppercase;font-weight:500}
.btn.gold{background:linear-gradient(135deg,#f0dfb2,#c6a45e,#e7ce91);color:#10251b;border:1px solid #ead7a5}
.btn.ghost{border-color:rgba(234,215,165,.75);color:#fff8e9}
input,select,textarea{border-radius:0}
.summary{background:linear-gradient(145deg,#082219,#123b2d);border:1px solid rgba(214,184,117,.55)}
.summary h3,.summary .total{color:var(--gold-pale)}

/* Habitaciones y experiencias */
.rooms{gap:2rem}
.room{background:#fffdf8;border:1px solid rgba(169,133,67,.25);box-shadow:0 22px 55px -38px rgba(0,0,0,.45)}
.room-body h3{font:500 2.15rem/1.05 var(--serif);font-style:normal;color:var(--jungle)}
.room-body p{color:#59645c;line-height:1.8}
.room-body li{font-size:.72rem;letter-spacing:.06em}
.price{font:500 2rem var(--serif);color:#a98543}
.xp-grid{gap:1rem}
.xp{min-height:360px;border:1px solid rgba(214,184,117,.4)}
.xp h3{font:500 1.8rem/1.05 var(--serif);font-style:normal;color:#f3dfb0}
.xp p{font-size:.88rem}
.dining-img{min-height:500px;border:1px solid rgba(214,184,117,.55);box-shadow:16px 16px 0 -7px rgba(214,184,117,.16)}
.dishes{gap:1.15rem}.dishes li{line-height:1.8}
.gallery{gap:.8rem;grid-auto-rows:clamp(145px,18vw,230px)}
.gallery button{border:1px solid rgba(169,133,67,.3)}

/* Contacto y detalles finales */
.map{border:1px solid rgba(169,133,67,.45);filter:saturate(.75)}
address{line-height:2;color:inherit}
address a,.social a{color:#a98543;text-underline-offset:4px}
.site-footer{background:#04130f;color:#d9cba9;border-top:1px solid rgba(214,184,117,.45);letter-spacing:.06em}
.wa-float{width:54px;height:54px}

@keyframes luxuryFade{from{opacity:0;transform:translateY(24px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes sparkle{from{opacity:.12}to{opacity:.38}}
@media(max-width:1000px){.search{grid-template-columns:repeat(2,minmax(0,1fr))}.xp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){
 .site-header{padding:1rem 1.2rem}
 nav{background:radial-gradient(ellipse at 50% 15%,rgba(40,91,66,.4),transparent 55%),#071b16;border-left:1px solid rgba(214,184,117,.25)}
 nav a{font-size:.76rem}
 .luxury-frame{inset:11px}
 .luxury-intro{padding:7rem 1.4rem 4.2rem}
 .luxury-title{font-size:clamp(5rem,16vw,7.5rem)}
 .split,.checkout,.room,.room:nth-child(even){grid-template-columns:1fr}
 .room:nth-child(even) .room-media{order:0}
}
@media(max-width:600px){
 .hero{min-height:92svh}
 .luxury-title{font-size:clamp(4.5rem,18vw,6rem)}
 .luxury-subtitle{font-size:1.45rem}
 .luxury-description{font-size:.86rem;max-width:340px}
 .luxury-intro .hero-actions{flex-direction:column;align-items:center}
 .hero .btn{width:min(100%,320px)}
 .hero-scroll{margin-top:2rem}
 .search{grid-template-columns:1fr;padding:1.4rem}
 .search .btn{grid-column:auto;width:100%}
 .xp-grid{grid-template-columns:1fr}
 .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:145px}
 .section{padding-block:4.5rem}
}
@media(prefers-reduced-motion:reduce){.luxury-intro,.hero-bg,.gold-particles{animation:none!important}}


/* =========================================================
   YAXCHÉ SANTUARIO · BOSQUE ESMERALDA + CRISTAL DORADO
   Fotografías de Unsplash (uso gratuito; requiere internet)
   ========================================================= */
:root{
  --jungle:#061b14;
  --jungle-2:#0a2b20;
  --jungle-3:#123b2d;
  --gold:#d7b979;
  --gold-pale:#f2e2b8;
  --ink:#e9e5d8;
  --ivory:#102b21;
  --paper:#0b241b;
}
html{background:#061810}
body{background:#061810;color:#e9e5d8}

/* Portada: fotografía de selva y piscina */
.hero{background:#061810}
.hero-bg{
  background-image:
    linear-gradient(90deg,rgba(2,16,11,.62),rgba(3,20,14,.18),rgba(2,16,11,.62)),
    linear-gradient(0deg,rgba(2,15,10,.78),rgba(2,15,10,.08) 68%),
    url('https://images.unsplash.com/photo-1445019980597-93fa8acb246c?auto=format&fit=crop&w=2200&q=85') !important;
  background-position:center 52% !important;
  background-size:cover !important;
}

/* Ya no hay grandes bloques blancos: bosque en distintas profundidades */
.section,.section.alt,.section.book,.book{
  color:#e9e5d8;
  background:
    radial-gradient(ellipse at 12% 8%,rgba(49,105,74,.19),transparent 38%),
    linear-gradient(145deg,#0b2b20 0%,#071e17 55%,#0d3024 100%);
}
.section.alt{
  background:
    radial-gradient(ellipse at 88% 12%,rgba(179,145,81,.09),transparent 34%),
    linear-gradient(135deg,#0d3024,#071c15 78%);
}
.section.dark{
  background:
    linear-gradient(rgba(3,19,13,.88),rgba(3,19,13,.94)),
    url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=2000&q=80') center/cover fixed;
  color:#eee8d8;
}
.section h2,.book h2,.section:not(.dark) h2{color:var(--gold-pale)}
.section .lead,.book .lead{color:rgba(239,235,220,.78);opacity:1}
.section h2::after,.book h2::after{background:linear-gradient(90deg,var(--gold),transparent)}

/* Panel de reserva de cristal ahumado */
.search,.checkout form,.summary,.results .room{
  background:linear-gradient(135deg,rgba(18,57,42,.76),rgba(5,27,19,.78)) !important;
  color:#f0ead9;
  border:1px solid rgba(220,190,125,.52) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.07);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.search label,.checkout label{color:#e8d7ad}
.search input,.search select,.checkout input,.checkout select,.checkout textarea{
  color:#f7f0df !important;
  background:rgba(3,24,17,.66) !important;
  border:1px solid rgba(214,184,117,.42) !important;
  outline-color:var(--gold);
}
.search input::placeholder,.checkout input::placeholder,.checkout textarea::placeholder{color:rgba(239,231,211,.48)}
.search input:focus,.search select:focus,.checkout input:focus,.checkout textarea:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(215,185,121,.12)}
.summary h3,.summary .total,.checkout h3{color:var(--gold-pale)}
.summary dl,.summary .note,.checkout p{color:rgba(240,234,217,.78)}

/* Tarjetas de alojamiento: cristal verde sobre fotografía */
.room,.results .room{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(10,43,31,.78),rgba(4,24,17,.88)) !important;
  border:1px solid rgba(215,185,121,.48) !important;
  box-shadow:0 24px 65px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:transform .5s ease,border-color .5s ease,box-shadow .5s ease;
}
.room:hover{transform:translateY(-5px);border-color:rgba(242,226,184,.85)!important;box-shadow:0 30px 75px rgba(0,0,0,.4)}
.room-media{background:#0a241a}
.room-main{filter:saturate(.82) brightness(.82)}
.room-body{position:relative;background:linear-gradient(135deg,rgba(11,43,31,.78),rgba(4,23,17,.9));color:#eee8d8}
.room-body h3{color:var(--gold-pale)!important}
.room-body p,.room-body li{color:rgba(240,234,218,.82)!important}
.room-body li{border-color:rgba(215,185,121,.38)!important;background:rgba(255,255,255,.035)}
.price{color:var(--gold-pale)!important}
.room-foot{border-top:1px solid rgba(215,185,121,.2);padding-top:1rem}

/* Imágenes gratuitas para los alojamientos: se aplican incluso si falta la carpeta local */
.room:nth-child(1) .room-main{background-image:url('https://images.unsplash.com/photo-1449158743715-0a90ebb6d2d8?auto=format&fit=crop&w=1400&q=85')!important}
.room:nth-child(2) .room-main{background-image:url('https://images.unsplash.com/photo-1510798831971-661eb04b3739?auto=format&fit=crop&w=1400&q=85')!important}
.room:nth-child(3) .room-main{background-image:url('https://images.unsplash.com/photo-1445019980597-93fa8acb246c?auto=format&fit=crop&w=1400&q=85')!important}
.room:nth-child(4) .room-main{background-image:url('https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=1400&q=85')!important}

/* Tarjetas de experiencias con fotografía a pantalla completa y vidrio */
.xp{isolation:isolate;border:1px solid rgba(215,185,121,.48)!important;border-radius:2px;box-shadow:0 20px 55px rgba(0,0,0,.25)}
.xp::before{filter:saturate(.8) brightness(.78)}
.xp:nth-child(1){--bg:url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=1000&q=85')!important}
.xp:nth-child(2){--bg:url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&w=1000&q=85')!important}
.xp:nth-child(3){--bg:url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1000&q=85')!important}
.xp:nth-child(4){--bg:url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1000&q=85')!important}
.xp div{
  margin:1rem;
  width:calc(100% - 2rem);
  padding:1.25rem 1.3rem;
  border:1px solid rgba(226,198,139,.52);
  background:linear-gradient(135deg,rgba(5,31,22,.7),rgba(5,23,17,.54));
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}
.xp h3{color:#f4e4bd!important}
.xp p{color:rgba(255,250,237,.88)!important}

/* Gastronomía y galería */
.dining-img{
  background-image:linear-gradient(180deg,rgba(2,18,12,.05),rgba(2,18,12,.28)),url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1500&q=85')!important;
  background-size:cover!important;background-position:center!important;
}
.dishes li{color:rgba(242,236,220,.86);border-bottom:1px solid rgba(215,185,121,.17);padding:.75rem 0}
.dishes strong{color:var(--gold-pale)}
.gallery button{border:1px solid rgba(215,185,121,.48)!important;filter:saturate(.82)}
.gallery button:nth-child(1){background-image:url('https://images.unsplash.com/photo-1445019980597-93fa8acb246c?auto=format&fit=crop&w=1100&q=85')!important}
.gallery button:nth-child(2){background-image:url('https://images.unsplash.com/photo-1510798831971-661eb04b3739?auto=format&fit=crop&w=800&q=85')!important}
.gallery button:nth-child(3){background-image:url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=800&q=85')!important}
.gallery button:nth-child(4){background-image:url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=800&q=85')!important}
.gallery button:nth-child(5){background-image:url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=85')!important}
.gallery button:nth-child(6){background-image:url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&w=1100&q=85')!important}

/* Contacto, mapa y pie en el mismo lenguaje visual */
#contacto address,#contacto p{color:rgba(240,234,218,.82)}
#contacto address a,#contacto .social a{color:var(--gold-pale)}
.map{border:1px solid rgba(215,185,121,.5)!important;filter:grayscale(.45) sepia(.12) brightness(.78)}
.site-footer{background:#03130e!important;border-top:1px solid rgba(215,185,121,.5)!important;color:#d9cba9}
.nav-cta{background:rgba(8,38,27,.42);backdrop-filter:blur(10px)}
.site-header.solid{background:rgba(4,23,16,.94)!important;border-bottom:1px solid rgba(215,185,121,.22)}

@media(max-width:800px){
 .section.dark{background-attachment:scroll}
 .xp div{margin:.65rem;width:calc(100% - 1.3rem);padding:1rem}
}
@media(prefers-reduced-motion:reduce){.room{transition:none}}

/* =========================================================
   YAXCHÉ — CRISTAL, CHAMPÁN Y TONOS TIERRA
   Refinamiento de tarjetas y equilibrio de la paleta
   ========================================================= */
:root{
  --forest:#102d23;
  --forest-deep:#081b15;
  --champagne:#d8bd82;
  --champagne-light:#f0dfb8;
  --ivory-soft:#f5f0e6;
  --sand-soft:#e8dece;
  --coffee:#49382b;
  --coffee-deep:#2b211a;
  --ink-soft:#39342c;
}

/* Secciones alternadas: no todo debe ser verde */
.section,
.section.alt,
.book{
  color:var(--ink-soft);
  background:linear-gradient(135deg,#f7f3eb 0%,#e9dfcf 100%) !important;
}
.section.alt{
  background:linear-gradient(135deg,#eee6d8 0%,#d9cbb6 100%) !important;
}
#reservar.book{
  background:linear-gradient(135deg,#30271f 0%,#51402f 52%,#26372c 100%) !important;
  color:#f5efe3;
}
#experiencias.section{
  background:linear-gradient(135deg,#102d23 0%,#1c4031 58%,#49382b 150%) !important;
  color:#f5efe3;
}
#gastronomia.section.dark{
  background:linear-gradient(120deg,#211c17 0%,#49382b 52%,#172d23 100%) !important;
  color:#f5efe3;
}
#galeria.section{
  background:linear-gradient(135deg,#f7f3eb,#e7ddcd) !important;
}
#contacto.section.alt{
  background:linear-gradient(135deg,#e8dece,#f7f3eb 70%,#d9cbb6) !important;
}

/* Encabezados y textos con contraste fino */
.section h2,.book h2{
  color:var(--coffee) !important;
  text-shadow:none !important;
  letter-spacing:.045em;
  font-weight:400;
}
#experiencias h2,#gastronomia h2,#reservar h2{
  color:var(--champagne-light) !important;
}
.section .lead,.book .lead{
  color:#655746 !important;
  opacity:1;
}
#experiencias .lead,#gastronomia .lead,#reservar .lead{
  color:rgba(248,241,226,.78) !important;
}
.section h2::after,.book h2::after{
  background:linear-gradient(90deg,transparent,var(--champagne),transparent) !important;
}

/* Todas las tarjetas: cristal ahumado transparente */
.room,.results .room,.summary,.checkout form,
.xp div,.search,.confirmation,
#results .room,.room-body{
  background:linear-gradient(135deg,rgba(30,39,31,.58),rgba(43,33,25,.43)) !important;
  border:1px solid rgba(216,189,130,.72) !important;
  color:#fff8eb !important;
  box-shadow:0 18px 48px rgba(25,20,14,.22),inset 0 1px 0 rgba(255,255,255,.22) !important;
  backdrop-filter:blur(17px) saturate(125%);
  -webkit-backdrop-filter:blur(17px) saturate(125%);
}
.room-body{
  background:linear-gradient(135deg,rgba(20,35,27,.55),rgba(43,33,25,.42)) !important;
}
.room-body h3,.xp h3,.summary h3,.checkout h3,
.room-body .price,.room-body strong{
  color:var(--champagne-light) !important;
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-style:italic;
  font-weight:400 !important;
  letter-spacing:.035em;
}
.room-body p,.room-body li,.xp p,.summary p,.summary dd,.checkout p{
  color:rgba(255,250,239,.91) !important;
  font-family:'Jost',sans-serif;
  font-weight:300;
  letter-spacing:.025em;
  line-height:1.8;
}
.room-body li{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(216,189,130,.3) !important;
}
.room-foot{border-color:rgba(216,189,130,.42) !important}

/* Las fotografías se conservan nítidas y protagonistas */
.room-main{filter:none !important}
.room-media{background-color:#1d2e24}
.xp::before{filter:saturate(.9) brightness(.86) !important}
.gallery button{filter:none !important}

/* Tarjetas de experiencias: cristal ligero para no tapar la foto */
.xp{
  border:1px solid rgba(216,189,130,.78) !important;
  box-shadow:0 18px 45px rgba(20,18,13,.24) !important;
}
.xp div{
  background:linear-gradient(135deg,rgba(19,34,27,.54),rgba(48,37,27,.38)) !important;
  border:1px solid rgba(240,223,184,.66) !important;
  box-shadow:0 12px 35px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.2) !important;
}
.xp h3{font-size:clamp(1.55rem,2.4vw,2.1rem);letter-spacing:.04em}

/* Reservación: café profundo con marfil y dorado */
.search,.checkout form,.summary{
  background:linear-gradient(135deg,rgba(36,31,25,.82),rgba(18,39,29,.78)) !important;
}
.search label,.checkout label{color:#f0dfb8 !important;font-weight:300;letter-spacing:.04em}
.search input,.search select,.checkout input,.checkout select,.checkout textarea{
  background:rgba(250,246,237,.09) !important;
  border:1px solid rgba(216,189,130,.52) !important;
  color:#fff9ed !important;
}
.search input:focus,.search select:focus,.checkout input:focus,.checkout textarea:focus{
  border-color:var(--champagne-light) !important;
  box-shadow:0 0 0 3px rgba(216,189,130,.16) !important;
}

/* Navegación y botones: detalles dorados, no bloques verdes */
.site-header.solid{background:rgba(20,29,23,.88) !important;border-bottom:1px solid rgba(216,189,130,.42) !important}
.nav-cta{border:1px solid rgba(216,189,130,.7) !important;color:var(--champagne-light) !important;background:rgba(73,56,43,.36) !important}
.btn.gold{background:linear-gradient(135deg,#e6d09b,#b18a4d) !important;color:#2c241a !important;border:1px solid #f0dfb8 !important;box-shadow:0 8px 25px rgba(88,65,33,.22)}
.btn.ghost{border:1px solid rgba(240,223,184,.78) !important;color:#f5ead0 !important;background:rgba(255,255,255,.07) !important}

/* En secciones claras, títulos y datos en café; detalles dorados */
#alojamientos .room-body h3,#alojamientos .price{color:var(--champagne-light) !important}
#contacto address,#contacto p{color:#514638 !important}
#contacto address a,#contacto .social a{color:#92713d !important}
#galeria .gallery button{border:1px solid rgba(168,133,67,.75) !important;box-shadow:0 10px 28px rgba(45,34,23,.14)}
#contacto .map{border:1px solid rgba(168,133,67,.75) !important}
.site-footer{background:linear-gradient(90deg,#211b16,#10271e) !important;color:#e8dece !important;border-top:1px solid rgba(216,189,130,.6) !important}

@media(max-width:800px){
  .section,.section.alt{background-attachment:scroll !important}
  .room,.xp div,.search,.checkout form,.summary{backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}
}


/* =========================================================
   YAXCHÉ · CRISTAL TRANSPARENTE + INTERFAZ FINA
   Bloque final: ajusta la intensidad con estas variables.
   ========================================================= */
:root{
  --glass-fill-a:rgba(255,255,255,.16);   /* más alto = más lechoso */
  --glass-fill-b:rgba(255,255,255,.05);
  --glass-line:rgba(255,255,255,.28);     /* borde de 1px */
  --glass-blur:22px;
  --glass-radius:16px;
}

/* ---------- Tarjetas: cristal transparente ---------- */
.search,.summary,.checkout form,.confirmation,.xp div,
.room,.results .room,#results .room,.res-note,.dishes li{
  background:linear-gradient(135deg,var(--glass-fill-a),var(--glass-fill-b) 60%,rgba(255,255,255,.09)) !important;
  border:1px solid var(--glass-line) !important;
  border-radius:var(--glass-radius) !important;
  color:#fffaf0 !important;
  box-shadow:0 12px 40px -18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.38) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(170%) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(170%) !important;
}
.search::before{border-radius:calc(var(--glass-radius) - 5px);border-color:rgba(255,255,255,.09)}
.room,.results .room{overflow:hidden}
.room:hover{transform:translateY(-3px);border-color:rgba(240,223,184,.7) !important}
.room-body{background:transparent !important;border:0 !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.room-foot{border-top:1px solid rgba(255,255,255,.2) !important}
.xp{border-radius:var(--glass-radius);border:1px solid rgba(255,255,255,.3) !important;box-shadow:0 14px 40px -20px rgba(0,0,0,.4) !important}
.xp div{margin:.8rem;width:calc(100% - 1.6rem);border-radius:12px !important}
.dishes li{border-bottom:1px solid var(--glass-line) !important;padding:1rem 1.3rem !important}
.res-note{border-left:1px solid var(--glass-line) !important}

/* Alojamientos (fondo claro): cristal claro con texto café */
#alojamientos{
  background:
    radial-gradient(circle at 12% 18%,rgba(31,122,92,.28),transparent 38%),
    radial-gradient(circle at 88% 72%,rgba(216,189,130,.5),transparent 40%),
    linear-gradient(135deg,#eee6d8,#d9cbb6) !important;
}
#alojamientos .room{
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.18)) !important;
  border-color:rgba(255,255,255,.75) !important;
  color:#3b3128 !important;
  box-shadow:0 14px 44px -20px rgba(73,56,43,.4),inset 0 1px 0 rgba(255,255,255,.9) !important;
}
#alojamientos .room-body h3{color:#4a3a2b !important}
#alojamientos .room-body .price{color:#8c6a35 !important}
#alojamientos .room-body p,#alojamientos .room-body li,#alojamientos .price small{color:rgba(59,49,40,.88) !important}
#alojamientos .room-body li{background:rgba(255,255,255,.35) !important;border-color:rgba(140,106,53,.35) !important}
#alojamientos .room-foot{border-top-color:rgba(140,106,53,.25) !important}

/* ---------- Interfaz fina ---------- */
h2,.section h2,.book h2{font-weight:300 !important}
.room-body h3,.xp h3,.summary h3,.checkout h3{font-weight:300 !important}
.search label,.checkout label{font-size:.64rem !important;letter-spacing:.16em !important;font-weight:400 !important}
.search input,.search select,.checkout input,.checkout select,.checkout textarea{
  background:rgba(255,255,255,.07) !important;
  border:0 !important;border-bottom:1px solid rgba(255,255,255,.4) !important;
  border-radius:8px 8px 0 0 !important;
  font-weight:300;
  transition:border-color .3s,background .3s;
}
.search input:focus,.search select:focus,.checkout input:focus,.checkout textarea:focus{
  background:rgba(255,255,255,.14) !important;
  border-bottom-color:var(--gold-pale) !important;
  box-shadow:none !important;outline:none;
}
select option{background:#1d2e24;color:#fff}
.btn{min-height:44px;padding:.8rem 1.5rem;font-weight:400;letter-spacing:.2em;border-radius:999px !important}
.btn.small{padding:.55rem 1.1rem}
.btn.gold{box-shadow:0 6px 20px -8px rgba(88,65,33,.4),inset 0 1px 0 rgba(255,255,255,.5) !important}
.btn.ghost,.nav-cta{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.4) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.nav-cta{border-radius:999px !important;padding:.6rem 1.3rem}
.thumbs button{border-radius:6px;border-width:1px}
.room-body li{border-radius:999px;border-width:1px}
.gallery button,.map,.dining-img{border-radius:var(--glass-radius);border-width:1px !important;box-shadow:none !important}
.site-header.solid{
  background:rgba(14,28,21,.42) !important;
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.18) !important;
}
@media(max-width:800px){
  nav{background:rgba(10,30,22,.55) !important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-left:1px solid rgba(255,255,255,.2) !important}
}
@supports not (backdrop-filter:blur(1px)){
  .search,.summary,.checkout form,.confirmation,.xp div,.room,.results .room,.dishes li{background:rgba(20,35,27,.7) !important}
}


/* =========================================================
   YAXCHÉ · TARJETAS ESTILO "SUITE" (cristal oscuro + foto)
   Foto arriba, cristal ahumado con borde dorado fino abajo.
   ========================================================= */
:root{
  --glass-radius:3px;
  --card-glass:linear-gradient(160deg,rgba(6,22,15,.5),rgba(4,16,11,.66));
  --card-line:rgba(216,189,130,.5);
  --cream:#f6e9c8;
  --gold-soft:#dcc185;
}

/* Fondos con foto para que el cristal se note */
#alojamientos{
  background:linear-gradient(rgba(5,20,14,.38),rgba(5,20,14,.6)),
    url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=2000&q=80') center/cover !important;
}
#alojamientos h2{color:var(--cream) !important}
#alojamientos .lead{color:rgba(248,241,226,.82) !important}
#reservar.book{
  background:linear-gradient(rgba(22,16,10,.5),rgba(10,24,17,.72)),
    url('https://images.unsplash.com/photo-1445019980597-93fa8acb246c?auto=format&fit=crop&w=2000&q=80') center/cover !important;
}

/* Cristal oscuro en todas las tarjetas */
.search,.summary,.checkout form,.confirmation,.xp div,
.room,.results .room,#results .room,#alojamientos .room,.res-note,.dishes li{
  background:var(--card-glass) !important;
  border:1px solid var(--card-line) !important;
  border-radius:var(--glass-radius) !important;
  color:var(--cream) !important;
  box-shadow:0 18px 50px -24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1) !important;
  backdrop-filter:blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(135%) !important;
}
.xp div{border-color:rgba(216,189,130,.4) !important}
.res-note,.dishes li{border-width:1px !important}

/* Alojamientos y resultados: tarjeta vertical */
.rooms,.results{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:1.6rem;counter-reset:suite;
}
.res-note{grid-column:1/-1}
.room,.room:nth-child(even),.results .room{grid-template-columns:1fr !important;counter-increment:suite}
.room:nth-child(even) .room-media{order:0 !important}
.room-media,.results .room-media{min-height:300px}
.room-body{padding:1.6rem 1.7rem 1.8rem;gap:.9rem}
.room-body::before{
  content:"0" counter(suite) "  /  ALOJAMIENTO";
  font:500 .62rem var(--sans);letter-spacing:.3em;color:var(--gold-soft);
}
.room-body h3,.xp h3,.summary h3,.checkout h3,#alojamientos .room-body h3{
  font-family:'Great Vibes',cursive !important;font-style:normal !important;font-weight:400 !important;
  font-size:clamp(2.2rem,3.4vw,2.9rem) !important;line-height:1.05;letter-spacing:.01em;color:var(--cream) !important;
}
.room-body p,#alojamientos .room-body p{color:rgba(246,233,200,.88) !important;font-size:.95rem;line-height:1.75}

/* Características con iconos finos, sin cajas */
.room-body ul{gap:.55rem 1.5rem}
.room-body li,#alojamientos .room-body li{
  background:none !important;border:0 !important;padding:0 !important;border-radius:0;
  font-size:.9rem;color:rgba(246,233,200,.92) !important;
}
.room-body li::before{content:"✧";color:var(--gold-soft);margin-right:.55rem;font-size:.85rem}
.room-body li:nth-child(4n+2)::before{content:"❋"}
.room-body li:nth-child(4n+3)::before{content:"◇"}
.room-body li:nth-child(4n)::before{content:"✦"}

/* Pie: "DESDE" + precio + "/ NOCHE" */
.room-foot,#alojamientos .room-foot{border-top:1px solid rgba(216,189,130,.35) !important;padding-top:1.1rem}
.price,.room-body .price,#alojamientos .room-body .price{
  display:block;font:400 2.5rem/1 var(--serif) !important;font-style:normal;color:var(--cream) !important;
}
.price::before{content:"DESDE";display:block;font:500 .6rem var(--sans);letter-spacing:.3em;color:var(--gold-soft);margin-bottom:.35rem}
.price small,#alojamientos .price small{font-size:0 !important;display:block;margin-top:.35rem}
.price small::after{content:"/ NOCHE";font:500 .6rem var(--sans);letter-spacing:.3em;color:var(--gold-soft)}

/* Experiencias: misma etiqueta y título */
.xp-grid{counter-reset:xp}
.xp div::before{
  counter-increment:xp;content:"0" counter(xp) "  /  EXPERIENCIA";display:block;margin-bottom:.35rem;
  font:500 .58rem var(--sans);letter-spacing:.28em;color:var(--gold-soft);
}
.xp h3{font-size:clamp(2rem,2.8vw,2.5rem) !important}
.xp p{color:rgba(246,233,200,.9) !important}

/* Formularios y resumen */
.search label,.checkout label{color:var(--gold-soft) !important}
.summary h3,.checkout h3{margin-bottom:.4rem}
.summary dd,.summary dt,.summary .note,.checkout p{color:rgba(246,233,200,.88) !important}
.summary .total{color:var(--cream) !important;border-top-color:rgba(216,189,130,.45)}
.dishes li{padding:1rem 1.3rem !important;color:rgba(246,233,200,.9) !important}
.dishes strong{color:var(--cream)}
.confirmation .ref{color:var(--cream)}
.confirmation .badge{background:rgba(255,255,255,.08);color:var(--gold-soft)}


/* =========================================================
   YAXCHÉ · MÓDULO DE RESERVAS PROFESIONAL
   ========================================================= */
#reservar .lead{max-width:46rem}

/* Progreso */
.steps{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;grid-template-columns:repeat(4,1fr)}
.steps li{display:flex;align-items:center;gap:.7rem;font-size:.82rem;letter-spacing:.04em;color:rgba(246,233,200,.5);padding-right:.9rem;transition:color .3s}
.steps li span{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid rgba(216,189,130,.4);display:grid;place-items:center;font:500 .72rem var(--sans);letter-spacing:0;transition:all .3s}
.steps li::after{content:"";flex:1;height:1px;background:rgba(216,189,130,.25)}
.steps li:last-child::after{display:none}
.steps li.is-current{color:var(--cream)}
.steps li.is-current span{background:linear-gradient(135deg,#e6d09b,#b18a4d);color:#2c241a;border-color:transparent}
.steps li.is-done{color:var(--gold-soft)}
.steps li.is-done span{border-color:var(--gold-soft);color:var(--gold-soft);font-size:0}
.steps li.is-done span::before{content:"✓";font-size:.8rem}

/* Buscador */
.search{grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:1.3rem 1.5rem !important;padding:2.1rem 2.3rem !important;align-items:end}
.search label{grid-column:span 2;margin:0}
.search input,.search select{min-height:48px;color-scheme:dark}
.search-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.3rem;padding-top:1.4rem;border-top:1px solid rgba(216,189,130,.25)}
.search-foot .btn{width:auto;margin:0}
.nights{margin:0;font:italic 1.25rem var(--serif);color:var(--gold-soft);min-height:1.4rem}

/* Garantías */
.assurance{list-style:none;padding:0;margin:1.3rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;font-size:.85rem;color:rgba(248,241,226,.8)}
.assurance li::before{content:"✧";color:var(--gold-soft);margin-right:.6rem}

/* Mensajes legibles sobre fondo oscuro */
#reservar .error{color:#ffb9ac !important;font-size:.88rem;margin:.7rem 0 0}

/* Datos del huésped + resumen */
.checkout{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:1.6rem;align-items:start;margin-top:2.2rem}
.checkout form{grid-template-columns:1fr 1fr;gap:1.2rem 1.4rem;padding:2.1rem 2.3rem !important}
.checkout form>h3,.form-sub,.checkout .f-full,.checkout .check,.checkout .error,.checkout form>.btn{grid-column:1/-1}
.checkout form>h3{margin:0}
.form-sub{margin:-.6rem 0 .2rem;font-size:.92rem;color:rgba(246,233,200,.75) !important}
.checkout form>.btn{justify-self:start;min-width:240px}
.check{font-size:.86rem !important;letter-spacing:0 !important;color:rgba(246,233,200,.88) !important}
.check input{accent-color:#d8bd82}
.summary{padding:2rem 2.1rem !important}
.summary dl{gap:0 1.2rem;margin:.8rem 0 1.2rem}
.summary dt,.summary dd{margin:0;padding:.65rem 0;border-bottom:1px solid rgba(216,189,130,.18)}
.summary dt{font-size:.8rem;letter-spacing:.06em;color:var(--gold-soft) !important}
.summary .total{margin-top:.4rem;border-top:1px solid rgba(216,189,130,.45)}
.summary .note{font-size:.84rem;line-height:1.7}

/* Confirmación */
.confirmation{padding:3rem 2rem !important;text-align:center}

@media(max-width:900px){
  .search{grid-template-columns:repeat(2,minmax(0,1fr)) !important;padding:1.6rem !important}
  .search label{grid-column:span 1}
  .search label.f-type{grid-column:1/-1}
  .checkout{grid-template-columns:1fr}
  .steps li{font-size:0}
  .steps li span{font-size:.72rem}
  .steps li.is-done span{font-size:0}
  .steps li.is-current{font-size:.82rem}
}
@media(max-width:520px){
  .search label.f-date{grid-column:1/-1}
  .search-foot{flex-direction:column;align-items:stretch}
  .search-foot .btn{width:100%}
  .checkout form{grid-template-columns:1fr;padding:1.5rem !important}
  .checkout form>.btn{width:100%}
}


/* =========================================================
   YAXCHÉ · RESERVAS · ACABADO PROFESIONAL
   ========================================================= */

/* Selector − / + */
.stepper{display:flex;align-items:center;min-height:48px;background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.4);border-radius:8px 8px 0 0;transition:border-color .3s}
.stepper:focus-within{border-bottom-color:var(--gold-pale)}
.search .stepper input,.search .stepper input:focus{order:1;flex:1;min-width:0;min-height:46px;text-align:center;background:transparent !important;border:0 !important;box-shadow:none !important;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper button{width:42px;align-self:stretch;min-height:46px;background:none;border:0;color:var(--gold-soft);font:300 1.3rem var(--sans);cursor:pointer;transition:background .2s,color .2s}
.stepper .dec{order:0}.stepper .inc{order:2}
.stepper button:hover:not(:disabled){background:rgba(216,189,130,.15);color:var(--cream)}
.stepper button:disabled{opacity:.3;cursor:default}

/* Campos con error */
.search input[aria-invalid=true],.checkout input[aria-invalid=true],.checkout textarea[aria-invalid=true]{border-bottom:1px solid #ff9d8f !important;background:rgba(255,120,100,.08) !important}
.stepper:has(input[aria-invalid=true]){border-bottom-color:#ff9d8f}
.check input[aria-invalid=true]{outline:2px solid #ff9d8f;outline-offset:2px}

/* Resultados */
.res-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.1rem 1.4rem;background:var(--card-glass);border:1px solid var(--card-line);border-radius:var(--glass-radius);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.res-head strong{display:block;font:400 1.8rem/1.1 var(--serif);color:var(--cream)}
.res-head span{font-size:.86rem;color:rgba(246,233,200,.8)}
.link-btn{background:none;border:0;padding:.3rem 0;color:var(--gold-soft);font:300 .9rem var(--sans);letter-spacing:.04em;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(216,189,130,.45);cursor:pointer;transition:color .2s}
.link-btn:hover{color:var(--cream)}
.res-loading{grid-column:1/-1;display:flex;align-items:center;gap:.9rem;margin:0;padding:1.4rem;color:rgba(246,233,200,.88)}
.spinner{width:18px;height:18px;border:1px solid rgba(216,189,130,.3);border-top-color:var(--gold-soft);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.res-note{margin:0;padding:1rem 1.4rem !important;font-size:.9rem;line-height:1.7}
.price.is-total::before{content:"TOTAL ESTIMADO"}
.price.is-total small{font-size:.82rem !important;letter-spacing:.03em;color:rgba(246,233,200,.78);margin-top:.5rem;line-height:1.5}
.price.is-total small::after{content:none}
.results .room.is-selected{border-color:var(--gold-pale) !important;box-shadow:0 0 0 1px rgba(240,223,184,.55),0 24px 60px -24px rgba(0,0,0,.65) !important}
.room.is-selected .room-media::after{content:"Seleccionada";position:absolute;top:1rem;left:1rem;padding:.35rem .9rem;background:rgba(6,22,15,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--gold-soft);color:var(--cream);font:500 .62rem var(--sans);letter-spacing:.2em;text-transform:uppercase}

/* Resumen */
.sum-photo{height:150px;margin:.7rem 0 .9rem;background-size:cover;background-position:center;border:1px solid rgba(216,189,130,.35);border-radius:2px}
.sum-photo[hidden]{display:none}
.summary .link-btn{display:block;margin-top:.9rem}

/* Confirmación */
.confirmation{max-width:760px;margin-inline:auto}
.check-ico{width:58px;height:58px;margin:0 auto 1.2rem;display:grid;place-items:center;border:1px solid var(--gold-soft);border-radius:50%;color:var(--gold-soft);font-size:1.5rem}
.confirmation .badge{background:rgba(255,255,255,.08) !important;border:1px solid rgba(216,189,130,.35);color:var(--gold-soft) !important;font-size:.78rem;letter-spacing:.06em;margin-bottom:1.1rem}
.confirmation h3{font:400 clamp(2.4rem,4vw,3.2rem)/1.1 'Great Vibes',cursive !important;color:var(--cream) !important}
.ref-label{margin:1rem 0 0;font:500 .62rem var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft) !important}
.confirmation .ref{font:400 2.3rem var(--serif);letter-spacing:.1em;margin:.2rem 0 1.4rem}
.conf-list{display:grid;grid-template-columns:auto 1fr;gap:0 1.5rem;max-width:520px;margin:0 auto 1.8rem;text-align:left}
.conf-list dt,.conf-list dd{margin:0;padding:.7rem 0;border-bottom:1px solid rgba(216,189,130,.2)}
.conf-list dt{font-size:.8rem;letter-spacing:.06em;color:var(--gold-soft)}
.conf-list dd{text-align:right;color:var(--cream)}
.next-steps{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;text-align:left}
.next-steps li{display:flex;flex-direction:column;gap:.7rem;font-size:.9rem;line-height:1.65;color:rgba(246,233,200,.88)}
.next-steps li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid rgba(216,189,130,.5);border-radius:50%;font:500 .7rem var(--sans);color:var(--gold-soft)}
.conf-note{font-size:.9rem;color:rgba(246,233,200,.9) !important}
.conf-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}

@media(max-width:700px){
  .next-steps{grid-template-columns:1fr}
  .next-steps li{flex-direction:row;align-items:flex-start}
  .confirmation{padding:2rem 1.3rem !important}
  .res-head strong{font-size:1.5rem}
}


/* =========================================================
   YAXCHÉ · RESPONSIVO PROFESIONAL
   Móvil · tablet · horizontal · pantallas grandes · táctil
   ========================================================= */

/* ---------- Base robusta ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.menu-open{overflow:hidden}
body{overflow-x:clip;-webkit-tap-highlight-color:transparent}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
address,.confirmation,.summary dd,.conf-list dd{overflow-wrap:anywhere}
button,.btn,a{touch-action:manipulation}
img,iframe,video{max-width:100%}

/* ---------- Cabecera: cristal sin romper el menú móvil ----------
   (un backdrop-filter en la cabecera encierra al menú "fixed" y lo colapsa) */
.site-header{padding-top:max(1.1rem,env(safe-area-inset-top));padding-left:max(clamp(1.2rem,5vw,5rem),env(safe-area-inset-left));padding-right:max(clamp(1.2rem,5vw,5rem),env(safe-area-inset-right))}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:rgba(14,28,21,.42);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.18)}
.site-header.solid{background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-bottom:0 !important;box-shadow:none !important;padding-top:max(.7rem,env(safe-area-inset-top))}
.site-header.solid::before{opacity:1}

/* ---------- Menú hamburguesa hasta 1024px (tablets incluidas) ---------- */
@media(max-width:1024px){
  .menu-btn{display:block;position:relative;z-index:2;width:48px;height:48px}
  nav{
    position:fixed;inset:0 0 0 auto;z-index:1;width:min(84vw,340px);height:100dvh;
    flex-direction:column;justify-content:center;align-items:stretch;gap:.2rem;
    padding:5rem max(2rem,env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom)) 2rem;
    background:rgba(8,26,19,.74) !important;backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);
    border-left:1px solid rgba(255,255,255,.2) !important;
    transform:translateX(102%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s;
  }
  nav.open{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
  nav a{display:flex;align-items:center;min-height:50px;font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.1)}
  nav a:not(.nav-cta)::after{display:none}
  nav .nav-cta{justify-content:center;margin-top:1.2rem;border:1px solid rgba(216,189,130,.7) !important;border-radius:999px}
  html.menu-open .site-header::after{content:"";position:fixed;inset:0;z-index:-1;background:rgba(3,12,9,.55)}
}

/* ---------- Tableta (hasta 900px) ---------- */
@media(max-width:900px){
  .summary{position:static !important;order:-1}
  .sum-photo{height:120px}
  .dining-img{min-height:clamp(260px,60vw,440px) !important}
  .map{height:clamp(260px,65vw,380px)}
  .section{padding-block:clamp(3.5rem,11vw,5.5rem)}
  .split{gap:2rem}
}

/* ---------- Móvil (hasta 600px) ---------- */
@media(max-width:600px){
  .wrap{width:min(1240px,92%)}
  .lead{font-size:1rem;line-height:1.8;margin-bottom:2rem}
  .section h2,.book h2{font-size:clamp(2.2rem,10vw,2.9rem) !important}
  .search{padding:1.25rem !important;gap:1rem !important}
  .room-media,.results .room-media{min-height:clamp(220px,64vw,300px)}
  .room-body{padding:1.3rem 1.3rem 1.5rem}
  .room-foot{flex-direction:column;align-items:stretch;gap:1rem}
  .room-foot .btn{width:100%;text-align:center}
  .price,.room-body .price,#alojamientos .room-body .price{font-size:2.2rem !important}
  .thumbs{left:.7rem;bottom:.7rem}
  .thumbs button{width:56px;height:44px}
  .xp{min-height:300px}.xp:nth-child(3n+1){min-height:340px}
  .gallery{grid-auto-rows:clamp(120px,34vw,160px);gap:.5rem}
  .res-head{padding:1rem}
  .res-head .link-btn{padding:.6rem 0}
  .conf-actions .btn{width:100%}
  .conf-list{grid-template-columns:1fr;gap:0}
  .conf-list dt{padding-bottom:0;border:0}.conf-list dd{text-align:left;padding-top:.2rem}
  .site-footer{padding:1.6rem 1.2rem max(1.6rem,env(safe-area-inset-bottom));font-size:.8rem}
  .social{flex-wrap:wrap;gap:.4rem 1.4rem}
  .social a,address a{display:inline-block;padding:.45rem 0}
  /* Etiquetas diminutas: mínimo legible */
  .room-body::before,.xp div::before,.price::before,.price small::after,.ref-label,.hero-kicker,.hero-scroll{font-size:.68rem !important}
  .search label,.checkout label{font-size:.7rem !important}
  /* iOS no hace zoom si el campo mide 16px */
  input,select,textarea{font-size:16px !important}
}

/* ---------- Teléfonos muy pequeños ---------- */
@media(max-width:360px){
  .luxury-title{font-size:4.2rem}
  .luxury-intro{padding-inline:1rem}
  .hero .btn{min-width:0}
  .btn{letter-spacing:.14em}
  .stepper button{width:40px}
}

/* ---------- Teléfono en horizontal / pantallas bajas ---------- */
@media(max-height:560px) and (orientation:landscape){
  .hero{min-height:auto}
  .luxury-intro{padding:5.5rem 2rem 2.5rem}
  .luxury-title{font-size:clamp(3.4rem,13vh,5rem)}
  .luxury-emblem,.hero-scroll,.luxury-description{display:none}
  .gold-divider{margin:1rem auto .8rem}
  .luxury-frame{inset:8px}
  .luxury-intro .hero-actions{flex-direction:row}
  nav{padding-top:3.5rem}
  nav a{min-height:42px}
}

/* ---------- Táctil: sin depender del hover ---------- */
@media(hover:none){
  .xp p{max-height:9rem;opacity:1;margin-top:.4rem}
  .room:hover,.btn.gold:hover,.btn.ghost:hover{transform:none}
  .room:hover .room-main,.xp:hover::before{transform:none}
  .gallery button:hover{filter:none !important}
}
@media(pointer:coarse){
  .stepper button{width:46px;min-height:48px}
  .link-btn{padding:.6rem 0}
  .lb-btn{background:rgba(0,0,0,.35);border-radius:50%}
}

/* ---------- Lightbox a pantalla completa real ---------- */
dialog{height:100dvh;max-height:100dvh}
dialog figure{padding-top:max(4rem,env(safe-area-inset-top));padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}
.lb-btn.close{top:max(.6rem,env(safe-area-inset-top));right:max(.8rem,env(safe-area-inset-right))}
.lb-btn{width:56px;height:56px}

/* ---------- Botón de WhatsApp con áreas seguras ---------- */
.wa-float{right:max(1.2rem,env(safe-area-inset-right));bottom:max(1.2rem,env(safe-area-inset-bottom))}

/* ---------- Pantallas grandes ---------- */
@media(min-width:1500px){
  .wrap{width:min(1400px,88%)}
  .rooms,.results{gap:2rem}
  .xp{min-height:440px}
  .gallery{grid-auto-rows:clamp(200px,15vw,280px)}
}
@media(min-width:1900px){
  body{font-size:18px}
  .wrap{width:min(1560px,84%)}
  .lead{max-width:52rem}
}

/* ---------- Menos movimiento y menos carga en móvil ---------- */
@media(max-width:800px){
  .leaf,.stalks{display:none}
  .gold-particles{animation:none;opacity:.2}
}
@media(prefers-reduced-motion:reduce){
  nav{transition:none !important}
  .spinner{animation:none}
}