/* ============ TOKENS ============ */
:root{
  --cream: #F1EADD;
  --cream-2: #E8DFCE;
  --pine: #1F3427;
  --pine-2: #16261B;
  --gold: #E3A63E;
  --rust: #A6512F;
  --ink: #211D17;
  --sage: #8FA893;
  --white: #FFFCF7;

  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --ease: cubic-bezier(.22,.68,0,1);
  --dur-s: .5s;
  --dur-m: .9s;
  --dur-l: 1.4s;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block; width:100%; height:100%; object-fit:cover;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--display); font-weight:450; letter-spacing:-.01em; line-height:1.05;}
em{font-style:italic; font-weight:400;}

.label{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rust);
  margin-bottom:.9rem;
  display:block;
}

/* grain overlay */
.grain{
  position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:999;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.03em;
  padding:.85rem 1.5rem;
  border-radius:100px;
  transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--rust); color:var(--white);
  box-shadow:0 6px 20px -6px rgba(166,81,47,.55);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 26px -6px rgba(166,81,47,.65);}
.btn-ghost{
  color:var(--white); border:1px solid rgba(255,255,255,.4);
}
.btn-ghost:hover{background:rgba(255,255,255,.12); transform:translateY(-2px);}
.btn-nav{
  background:var(--pine); color:var(--cream);
}
.btn-nav:hover{background:var(--pine-2); transform:translateY(-2px);}
.btn-lg{padding:1.05rem 2rem; font-size:.9rem;}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 3rem;
  transition:padding var(--dur-s) var(--ease), background var(--dur-s) var(--ease), backdrop-filter var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.nav.scrolled{
  padding:.85rem 3rem;
  background:rgba(241,234,221,.82);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(33,29,23,.08);
}
.nav.scrolled .nav-logo, .nav.scrolled .nav-links a{color:var(--ink);}
.nav-logo{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-size:1.28rem; color:var(--white);
  transition:color var(--dur-s) var(--ease);
}
.nav-logo-mark{color:var(--gold); flex-shrink:0;}
.nav-logo em{font-style:italic; color:var(--rust);}
.nav-links{display:flex; gap:2.1rem;}
.nav-links a{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--white); position:relative; padding-bottom:3px;
  transition:color var(--dur-s) var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width var(--dur-s) var(--ease);
}
.nav-links a:hover::after{width:100%;}
.nav-burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; z-index:101;}
.nav-burger span{width:22px; height:2px; background:var(--white); transition:all var(--dur-s) var(--ease);}
.nav.scrolled .nav-burger span{background:var(--ink);}

.mnav{
  position:fixed; top:0; right:0; height:100vh; height:100dvh; width:78vw; max-width:320px;
  background:var(--pine); z-index:99;
  display:flex; flex-direction:column; gap:1.6rem;
  padding:7rem 2.4rem;
  transform:translateX(100%);
  transition:transform var(--dur-m) var(--ease);
}
.mnav.open{transform:translateX(0);}
.mnav a{font-family:var(--display); font-size:1.5rem; color:var(--cream);}

/* ============ HERO ============ */
.hero{
  position:relative; height:100vh; height:100svh; min-height:560px;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--pine-2);
}
.hero-media{position:absolute; top:0; left:0; right:0; bottom:0;}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12);
  animation:kenburns 22s var(--ease) forwards;
}
@keyframes kenburns{ to{ transform:scale(1); } }
.hero-scrim{
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, rgba(22,38,27,.55) 0%, rgba(22,38,27,.25) 38%, rgba(22,38,27,.75) 100%);
}
.hero-content{
  position:relative; z-index:2; color:var(--white);
  padding:0 3rem 8rem; max-width:900px;
}
.eyebrow{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem;
}
.hero-title{
  font-size:clamp(3rem, 8vw, 6.2rem);
  color:var(--white);
}
.hero-title em{color:var(--gold); font-style:italic;}
.hero-sub{
  font-size:1.1rem; max-width:480px; margin:1.6rem 0 2.2rem;
  color:rgba(255,252,247,.88); line-height:1.55;
}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap;}

.ridge{width:100%; display:block; fill:none;}
.ridge path{fill:none; stroke:currentColor;}
.ridge-hero{
  position:absolute; bottom:-1px; left:0; z-index:2; height:70px;
  color:var(--cream);
}
.ridge-hero path{stroke:none; fill:var(--cream);}

/* reveal-line for hero staggered text */
.reveal-line{display:block; overflow:hidden;}
.reveal-line > *, h1 .reveal-line{ }
.reveal-line{
  opacity:0; transform:translateY(115%);
}
.hero-content .reveal-line{
  animation:lineUp var(--dur-m) var(--ease) forwards;
}
.eyebrow.reveal-line{animation-delay:.15s;}
.hero-title .reveal-line:nth-child(1){animation-delay:.32s;}
.hero-title .reveal-line:nth-child(2){animation-delay:.46s;}
.hero-sub.reveal-line{animation-delay:.62s;}
.hero-actions.reveal-line{animation-delay:.78s;}
@keyframes lineUp{ to{ opacity:1; transform:translateY(0);} }

/* ============ GENERIC REVEAL (scroll) ============ */
/* Visible by default; only animates once JS confirms it can run the reveal (progressive enhancement) */
html.js .reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
html.js .reveal.in{opacity:1; transform:translateY(0);}

/* ============ DIVIDER RIDGES ============ */
.ridge-divider, .ridge-dark, .ridge-footer{
  height:34px; margin:0 auto; max-width:1440px; color:var(--rust); opacity:.55;
}
.ridge-dark{color:var(--gold); opacity:.5;}
.ridge path{
  stroke-width:1.4; stroke-dasharray:1900; stroke-dashoffset:1900;
}
.ridge.draw path{ animation:draw 2.2s var(--ease) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ============ INTRO ============ */
.intro{padding:7.5rem 3rem 5rem; max-width:1440px; margin:0 auto;}
.intro-wrap{max-width:840px;}
.intro-title{
  font-size:clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight:400; color:var(--ink);
}
.intro-feats{
  display:flex; gap:3.5rem; margin-top:3.5rem; flex-wrap:wrap;
}
.feat{display:flex; align-items:baseline; gap:.85rem;}
.feat-num{font-family:var(--display); font-style:italic; font-size:2.6rem; color:var(--rust);}
.feat-label{font-family:var(--mono); font-size:.74rem; line-height:1.4; color:var(--ink); opacity:.72; letter-spacing:.02em;}

/* ============ ROOMS ============ */
.rooms{padding:2rem 3rem 7rem; max-width:1440px; margin:0 auto;}
.section-head{margin-bottom:3.2rem;}
.section-title{font-size:clamp(2rem, 4vw, 3rem); font-weight:400;}
.section-head--light .label{color:var(--gold);}
.section-head--light .section-title{color:var(--cream);}

.room-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.6rem;
}
.room-card--wide{grid-column:span 2;}
.room-card--wide .room-media{aspect-ratio:21/9;}
.room-card{
  border-radius:18px; overflow:hidden; background:var(--white);
  display:flex; flex-direction:column;
  box-shadow:0 1px 0 rgba(33,29,23,.06);
  transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.room-card:hover{transform:translateY(-6px); box-shadow:0 24px 40px -20px rgba(33,29,23,.28);}
.room-media{aspect-ratio:4/3; overflow:hidden; position:relative;}
.room-media img{transition:transform 1.1s var(--ease);}
.room-card:hover .room-media img{transform:scale(1.07);}
.room-info{padding:1.7rem 1.8rem 2rem;}
.room-tag{
  display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--pine); background:var(--sage); background:rgba(143,168,147,.28);
  padding:.32rem .7rem; border-radius:100px; margin-bottom:.9rem;
}
.room-tag--promo{background:rgba(227,166,62,.22); color:var(--rust);}
.room-info h3{font-size:1.4rem; margin-bottom:.6rem; font-weight:450;}
.room-info p{font-size:.92rem; line-height:1.55; opacity:.75; max-width:46ch;}
.room-meta{
  margin-top:1.2rem; font-family:var(--mono); font-size:.75rem; color:var(--rust);
  display:flex; align-items:center; gap:.5rem;
}
.dot{opacity:.5;}

/* ============ EXPERIENCES ============ */
.experiences{
  background:var(--pine); color:var(--cream);
  padding:6.5rem 3rem 2.5rem; position:relative;
}
.exp-grid{
  max-width:1440px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
  padding-bottom:4rem;
}
.exp-card{
  border:1px solid rgba(241,234,221,.14);
  border-radius:18px; padding:2.4rem 2rem;
  transition:border-color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.exp-card:hover{border-color:rgba(227,166,62,.55); background:rgba(241,234,221,.04); transform:translateY(-4px);}
.exp-icon{width:38px; height:38px; color:var(--gold); margin-bottom:1.6rem;}
.exp-card h3{font-size:1.2rem; margin-bottom:.7rem; font-weight:450; color:var(--cream);}
.exp-card p{font-size:.88rem; line-height:1.6; color:rgba(241,234,221,.72);}

/* ============ GALLERY ============ */
.gallery{padding:7.5rem 3rem 7rem; max-width:1440px; margin:0 auto;}
.gallery-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:170px;
  gap:1.2rem;
}
.g-item{border-radius:16px; overflow:hidden; grid-column:span 2; grid-row:span 2; position:relative;}
.g-tall{grid-row:span 3;}
.gallery-grid .g-item:nth-child(1){grid-column:1/3;}
.gallery-grid .g-item:nth-child(2){grid-column:3/5;}
.gallery-grid .g-item:nth-child(3){grid-column:5/7;}
.gallery-grid .g-item:nth-child(4){grid-column:1/4; grid-row:3/6;}
.gallery-grid .g-item:nth-child(5){grid-column:4/7; grid-row:3/5;}
.g-item img{transition:transform 1.2s var(--ease);}
.g-item:hover img{transform:scale(1.08);}
.g-item::after{
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, transparent 60%, rgba(22,38,27,.35));
  opacity:0; transition:opacity var(--dur-s) var(--ease);
}
.g-item:hover::after{opacity:1;}

/* ============ CTA ============ */
.cta{
  position:relative; background:var(--pine-2); color:var(--cream);
  padding:8.5rem 3rem; text-align:center; overflow:hidden;
}
.cta-lights{position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none;}
.cta-lights::before{
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background-image:
    radial-gradient(2px 2px at 8% 22%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 18% 68%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 28% 15%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 40% 78%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 52% 30%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 63% 60%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 74% 20%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 85% 72%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 93% 40%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 12% 88%, var(--gold), transparent 60%);
  opacity:.5;
  animation:twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes twinkle{ 0%{opacity:.2;} 50%{opacity:.65;} 100%{opacity:.3;} }
.cta-content{position:relative; z-index:1; max-width:640px; margin:0 auto;}
.cta-title{font-size:clamp(2.3rem, 5vw, 3.6rem); color:var(--cream); font-weight:400;}
.cta-sub{margin:1.4rem 0 2.4rem; color:rgba(241,234,221,.75); font-size:1.02rem; line-height:1.6;}
.cta-catalog{
  display:block; margin-top:1.6rem; font-family:var(--mono); font-size:.8rem;
  color:var(--sage); text-decoration:underline; text-underline-offset:4px;
}

/* ============ FOOTER ============ */
.footer{background:var(--ink); color:var(--cream); padding-top:0;}
.ridge-footer{color:var(--rust); opacity:.4; padding-top:2.5rem;}
.footer-wrap{
  max-width:1440px; margin:0 auto; padding:2.5rem 3rem 3rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.4rem;
}
.footer-logo{color:var(--cream);}
.footer-note{font-family:var(--mono); font-size:.76rem; opacity:.6;}
.footer-links{display:flex; gap:1.6rem; font-family:var(--mono); font-size:.78rem;}
.footer-links a{opacity:.75; transition:opacity var(--dur-s);}
.footer-links a:hover{opacity:1;}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .nav{padding:1.1rem 1.4rem;}
  .nav.scrolled{padding:.7rem 1.4rem;}
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .btn-nav span{display:none;}
  .hero-content{padding:0 1.4rem 6rem;}
  .intro, .rooms, .gallery{padding-left:1.4rem; padding-right:1.4rem;}
  .experiences{padding-left:1.4rem; padding-right:1.4rem;}
  .cta{padding:6rem 1.4rem;}
  .footer-wrap{padding:2rem 1.4rem 2.4rem;}
  .room-grid{grid-template-columns:1fr;}
  .room-card--wide{grid-column:span 1;}
  .exp-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
  .gallery-grid .g-item:nth-child(1){grid-column:1/3; grid-row:1/3;}
  .gallery-grid .g-item:nth-child(2){grid-column:1/2; grid-row:3/5;}
  .gallery-grid .g-item:nth-child(3){grid-column:2/3; grid-row:3/5;}
  .gallery-grid .g-item:nth-child(4){grid-column:1/2; grid-row:5/8;}
  .gallery-grid .g-item:nth-child(5){grid-column:2/3; grid-row:5/8;}
  .intro-feats{gap:2rem;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
  .hero-media img{transform:none;}
  .reveal-line{opacity:1; transform:none;}
  .reveal{opacity:1; transform:none;}
}

/* ============ BOOKING SECTION ============ */
.booking-section{
  position:relative; background:var(--pine-2);
  padding:8rem 3rem 7rem; overflow:hidden;
}
.booking-bg{
  position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 8% 22%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 18% 68%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 28% 15%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 40% 78%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 52% 30%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 63% 60%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 74% 20%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 85% 72%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 93% 40%, var(--gold), transparent 60%),
    radial-gradient(2px 2px at 12% 88%, var(--gold), transparent 60%);
  opacity:.35;
  animation:twinkle 4.5s ease-in-out infinite alternate;
}
.booking-wrap{ max-width:1200px; margin:0 auto; }

.label-light{ color:var(--gold); }
.booking-header{ text-align:center; margin-bottom:4rem; }
.booking-title{ font-size:clamp(2.2rem,4.5vw,3.2rem); color:var(--cream); font-weight:400; margin-bottom:1rem; }
.booking-sub{ color:rgba(241,234,221,.7); font-size:1rem; max-width:500px; margin:0 auto; line-height:1.6; }

/* Steps layout */
.booking-body{
  display:grid;
  grid-template-columns:1fr 1.6fr 1fr;
  gap:1.6rem;
  margin-bottom:2.4rem;
}
.bk-step{
  background:rgba(255,252,247,.05);
  border:1px solid rgba(241,234,221,.12);
  border-radius:20px;
  padding:2rem 1.8rem;
}
.step-label{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sage);
  margin-bottom:1.4rem;
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--rust); color:var(--white);
  font-size:.65rem; font-weight:600; flex-shrink:0;
}

/* Room options */
.room-options{ display:flex; flex-direction:column; gap:.75rem; }
.room-opt{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  column-gap:.7rem; row-gap:.1rem;
  padding:.9rem 1rem;
  border-radius:12px;
  border:1.5px solid rgba(241,234,221,.14);
  background:transparent;
  cursor:pointer;
  text-align:left;
  color:var(--cream);
  transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.room-opt:hover{ border-color:rgba(227,166,62,.4); background:rgba(241,234,221,.04); transform:translateX(3px); }
.room-opt.selected{ border-color:var(--gold); background:rgba(227,166,62,.1); }
.room-opt-icon{ font-size:1.15rem; grid-row:span 2; align-self:center; }
.room-opt-name{ font-family:var(--display); font-size:.95rem; font-weight:450; }
.room-opt-cap{ font-family:var(--mono); font-size:.65rem; color:rgba(241,234,221,.55); }
.room-opt-price{ font-family:var(--mono); font-size:.75rem; color:var(--gold); text-align:right; grid-row:span 2; align-self:center; white-space:nowrap; }

/* Calendar */
.calendar-wrap{ margin-bottom:1.2rem; }
.cal-panel{ background:rgba(255,252,247,.04); border-radius:16px; padding:1.2rem; }
.cal-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1rem;
}
.cal-month-label{ font-family:var(--display); font-size:1rem; color:var(--cream); font-weight:450; }
.cal-nav{
  background:none; border:1px solid rgba(241,234,221,.2); color:var(--cream);
  width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.cal-nav:hover{ background:rgba(241,234,221,.12); border-color:rgba(241,234,221,.4); }
.cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:3px;
}
.cal-dow{
  font-family:var(--mono); font-size:.62rem; color:rgba(241,234,221,.45);
  text-align:center; padding:.3rem 0;
  letter-spacing:.04em;
}
.cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.78rem; color:rgba(241,234,221,.85);
  border-radius:8px; cursor:pointer;
  transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), transform .15s var(--ease);
  border:0; background:transparent;
}
.cal-day:hover:not(.past):not(.empty){ background:rgba(227,166,62,.18); color:var(--gold); }
.cal-day.past{ color:rgba(241,234,221,.2); cursor:default; pointer-events:none; }
.cal-day.empty{ cursor:default; pointer-events:none; }
.cal-day.checkin{ background:var(--rust); color:var(--white); font-weight:600; border-radius:8px 0 0 8px; }
.cal-day.checkout{ background:var(--rust); color:var(--white); font-weight:600; border-radius:0 8px 8px 0; }
.cal-day.in-range{ background:rgba(166,81,47,.18); border-radius:0; }
.cal-day.today{ box-shadow:inset 0 0 0 1px rgba(227,166,62,.6); }
.cal-day.checkin.checkout{ border-radius:8px; }

/* Date summary */
.date-summary{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  background:rgba(255,252,247,.04); border-radius:12px; padding:.9rem 1.2rem;
  flex-wrap:wrap;
}
.ds-item{ display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.ds-icon{ font-size:.9rem; }
.ds-label{ font-family:var(--mono); font-size:.62rem; color:rgba(241,234,221,.45); letter-spacing:.06em; }
.ds-item strong{ font-family:var(--display); font-size:.95rem; color:var(--cream); }
.ds-nights strong{ color:var(--gold); }
.ds-sep{ color:rgba(241,234,221,.3); font-size:1.1rem; }

/* Guests & Extras */
.guests-extras{ display:flex; flex-direction:column; gap:1.4rem; }
.counter-row{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(241,234,221,.08);
}
.counter-label{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.78rem; color:rgba(241,234,221,.8);
}
.counter-label svg{ color:var(--sage); }
.counter{ display:flex; align-items:center; gap:.7rem; }
.cnt-btn{
  width:28px; height:28px; border-radius:50%;
  border:1px solid rgba(241,234,221,.25); background:transparent; color:var(--cream);
  font-size:1.1rem; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.cnt-btn:hover{ background:rgba(241,234,221,.12); border-color:rgba(241,234,221,.5); }
#adultCount, #childCount{
  font-family:var(--display); font-size:1.15rem; color:var(--cream);
  min-width:22px; text-align:center;
}
.extras-check{ display:flex; flex-direction:column; gap:.9rem; }
.extra-opt{ display:flex; align-items:center; gap:.75rem; cursor:pointer; }
.extra-opt input{ display:none; }
.extra-box{
  width:18px; height:18px; border-radius:5px; flex-shrink:0;
  border:1.5px solid rgba(241,234,221,.3); background:transparent;
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  position:relative;
}
.extra-opt input:checked + .extra-box{
  background:var(--rust); border-color:var(--rust);
}
.extra-opt input:checked + .extra-box::after{
  content:'✓'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); color:var(--white); font-size:.72rem; font-weight:700;
}
.extra-text{ font-family:var(--mono); font-size:.78rem; color:rgba(241,234,221,.8); }
.extra-text em{ color:var(--gold); font-style:normal; }

/* Summary */
.booking-summary{ max-width:680px; margin:0 auto; }
.summary-card{
  background:rgba(255,252,247,.06);
  border:1px solid rgba(241,234,221,.16);
  border-radius:22px; padding:2.4rem 2.2rem;
}
.summary-rows{ margin-bottom:1.8rem; display:flex; flex-direction:column; gap:.7rem; }
.sum-row{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.82rem;
  color:rgba(241,234,221,.7);
  padding-bottom:.7rem;
  border-bottom:1px solid rgba(241,234,221,.07);
}
.sum-row:last-child{ border-bottom:0; }
.sum-row strong{ color:var(--cream); }
.sum-row--total{ font-size:.95rem; }
.sum-row--total strong{ color:var(--gold); font-size:1.1rem; }
.sum-extras strong{ color:var(--sage); }

.btn-whatsapp{
  width:100%; justify-content:center;
  background:#25D366; color:var(--white);
  box-shadow:0 8px 24px -8px rgba(37,211,102,.5);
  font-size:.9rem;
}
.btn-whatsapp:hover{ background:#1ebe59; transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(37,211,102,.6); }
.summary-note{
  margin-top:1rem; text-align:center;
  font-family:var(--mono); font-size:.72rem;
  color:rgba(241,234,221,.45); line-height:1.5;
}

/* Responsive booking */
@media (max-width:1024px){
  .booking-body{ grid-template-columns:1fr 1fr; }
  #stepDates{ grid-column:span 2; }
}
@media (max-width:680px){
  .booking-section{ padding:6rem 1.4rem 5rem; }
  .booking-body{ grid-template-columns:1fr; }
  #stepDates{ grid-column:span 1; }
  .room-options{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
  .room-opt{ grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; }
  .room-opt-price{ grid-row:auto; text-align:left; }
  .date-summary{ gap:.7rem; }
}

/* ============ PAY BUTTON ============ */
.btn-pay{
  background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%);
  color: var(--white);
  box-shadow: 0 8px 24px -8px rgba(0,119,182,.55);
  justify-content: center; width: 100%; gap: .65rem;
}
.btn-pay:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(0,119,182,.65); }

.btn-ghost-dark{
  background: rgba(255,252,247,.08);
  color: var(--cream);
  border: 1px solid rgba(255,252,247,.2);
  justify-content: center;
}
.btn-ghost-dark:hover{ background: rgba(255,252,247,.14); transform:translateY(-2px); }

/* ============ PAYMENT MODAL ============ */
.pm-overlay{
  position: fixed; top:0; left:0; right:0; bottom:0;
  z-index: 500;
  background: rgba(16,24,18,.72);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.pm-overlay.open{ opacity:1; pointer-events: all; }

.pm-panel{
  background: var(--cream);
  border-radius: 24px;
  width: 100%; max-width: 560px;
  max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  padding: 2.6rem 2.4rem 2.2rem;
  position: relative;
  transform: translateY(32px) scale(.97);
  transition: transform .4s var(--ease);
  scrollbar-width: thin;
  scrollbar-color: var(--cream-2) transparent;
}
.pm-overlay.open .pm-panel{ transform: translateY(0) scale(1); }

.pm-close{
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: var(--cream-2); border: 0; border-radius: 50%;
  width: 34px; height: 34px; cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  color: var(--ink); opacity: .7;
  transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.pm-close:hover{ opacity:1; transform: rotate(90deg); }

/* Progress */
.pm-progress{
  display: flex; align-items: center; gap: 0;
  margin-bottom: .5rem;
}
.pm-step-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cream-2); flex-shrink: 0;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.pm-step-dot.active{ background: #00B4D8; box-shadow: 0 0 0 3px rgba(0,180,216,.25); }
.pm-step-dot.done{ background: #22C55E; }
.pm-step-line{ flex: 1; height: 3px; background: var(--cream-2); border-radius: 3px; overflow: hidden; }
.pm-step-fill{ width: 0; height: 100%; background: #00B4D8; border-radius: 3px; transition: width .6s var(--ease); }
.pm-step-fill.done{ background: #22C55E; }
.pm-step-labels{
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: .65rem; letter-spacing: .06em;
  color: rgba(33,29,23,.45); margin-bottom: 2rem; margin-top: .4rem;
}

/* Screens */
.pm-screen{ display: none; }
.pm-screen.active{ display: block; animation: pmSlideIn .35s var(--ease); }
@keyframes pmSlideIn{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:translateX(0); } }

.pm-title{
  font-family: var(--display); font-size: 1.5rem; font-weight: 450;
  color: var(--ink); margin-bottom: .4rem;
}
.pm-subtitle{ color: rgba(33,29,23,.6); font-size: .88rem; margin-bottom: 1.4rem; line-height: 1.5; }

/* Mini order summary inside modal */
.pm-order-mini{
  background: var(--pine); border-radius: 14px;
  padding: 1rem 1.2rem; margin-bottom: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
}
.pm-order-mini .om-item{
  font-family: var(--mono); font-size: .74rem; color: rgba(241,234,221,.8);
  display: flex; align-items: center; gap: .35rem;
}
.pm-order-mini .om-item strong{ color: var(--gold); }
.pm-order-mini .om-total{
  width: 100%; border-top: 1px solid rgba(241,234,221,.1);
  padding-top: .6rem; margin-top: .3rem;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: .82rem;
  color: var(--cream);
}
.pm-order-mini .om-total strong{ color: var(--gold); font-size: 1rem; }

/* Form */
.pm-form{ display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem; }
.pm-field-row{ display: flex; gap: 1rem; }
.pm-field{ display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.pm-field--sm{ flex: 0 0 90px; }
.pm-field label{
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  color: rgba(33,29,23,.6); text-transform: uppercase;
}
.pm-field label .opt{ text-transform: none; font-size: .7rem; opacity: .6; }
.pm-field input, .pm-field textarea, .pm-field select{
  font-family: var(--body); font-size: .92rem; color: var(--ink);
  background: var(--white); border: 1.5px solid rgba(33,29,23,.15);
  border-radius: 10px; padding: .75rem 1rem;
  transition: border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
  outline: none; resize: none; width: 100%;
}
.pm-field input:focus, .pm-field textarea:focus{
  border-color: #00B4D8; box-shadow: 0 0 0 3px rgba(0,180,216,.18);
}
.pm-input-icon{ position: relative; }
.pm-input-icon input{ padding-right: 4rem; }
.card-brands{ position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); display:flex; gap:.3rem; }
.pp-phone-icon{ position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); }

.pm-back{
  display: block; width: 100%; text-align: center; margin-top: .8rem;
  font-family: var(--mono); font-size: .78rem; color: rgba(33,29,23,.5);
  background: none; border: 0; cursor: pointer;
  transition: color var(--dur-s) var(--ease);
}
.pm-back:hover{ color: var(--ink); }
.pm-legal{
  margin-top: .75rem; text-align: center;
  font-family: var(--mono); font-size: .7rem; color: rgba(33,29,23,.4);
}
.pm-legal a{ color: #0077B6; text-decoration: underline; }

/* ── PayPhone checkout screen ── */
.pp-header{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.2rem;
}
.pp-logo{ height: 36px; border-radius: 8px; }
.pp-amount-badge{
  font-family: var(--display); font-style: italic;
  font-size: 1.5rem; color: var(--pine); font-weight: 450;
}

.pp-card-form{ display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.pp-divider{
  display: flex; align-items: center; gap: .8rem; margin: .4rem 0;
  font-family: var(--mono); font-size: .72rem; color: rgba(33,29,23,.4);
}
.pp-divider::before, .pp-divider::after{
  content:''; flex:1; height:1px; background: rgba(33,29,23,.12);
}

.pp-security{
  display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.sec-badge{
  display: flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .68rem; color: rgba(33,29,23,.5);
  border: 1px solid rgba(33,29,23,.12); border-radius: 100px;
  padding: .3rem .7rem;
}
.pp-pay-btn{ font-size: 1rem; padding: 1rem 1.4rem; }
.cvv-tip{
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(33,29,23,.15); font-size: .65rem;
  cursor: default; margin-left: .3rem;
}

/* ── Processing animation ── */
.pm-processing{ text-align: center; padding: 3rem 0 2rem; }
.processing-anim{ display: flex; justify-content: center; margin-bottom: 1.5rem; }
.proc-ring{
  width: 60px; height: 60px;
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.proc-label{ font-family: var(--display); font-size: 1.3rem; font-weight: 450; color: var(--ink); }
.proc-sub{ font-family: var(--mono); font-size: .78rem; color: rgba(33,29,23,.5); margin-top: .4rem; }

/* ── Confirmation screen ── */
.confirm-anim{ display: flex; justify-content: center; margin-bottom: 1.5rem; }
.confirm-circle{ width: 80px; height: 80px; }
.cc-bg{ fill: #22C55E; }
.cc-check{
  fill: none; stroke: white; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 60; stroke-dashoffset: 60;
}
.pm-screen3-active .cc-check{ animation: drawCheck .55s .2s var(--ease) forwards; }
@keyframes drawCheck{ to{ stroke-dashoffset: 0; } }

.confirm-title{ text-align: center; margin-bottom: .5rem; }
.pm-screen#pmScreen3 .pm-subtitle{ text-align: center; }

.confirm-details{
  background: var(--pine); border-radius: 14px;
  padding: 1.2rem 1.4rem; margin: 1.4rem 0;
  display: flex; flex-direction: column; gap: .6rem;
}
.confirm-details .cd-row{
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: .8rem;
  color: rgba(241,234,221,.7);
  padding-bottom: .6rem; border-bottom: 1px solid rgba(241,234,221,.08);
}
.confirm-details .cd-row:last-child{ border-bottom: 0; padding-bottom: 0; }
.confirm-details .cd-row strong{ color: var(--cream); }
.confirm-details .cd-row.cd-total strong{ color: var(--gold); font-size: .95rem; }

.confirm-actions{ display: flex; flex-direction: column; gap: .8rem; }

/* responsive modal */
@media (max-width: 600px){
  .pm-panel{ padding: 2rem 1.4rem 1.8rem; border-radius: 20px 20px 0 0; max-height: 96vh; }
  .pm-overlay{ align-items: flex-end; }
  .pm-field-row{ flex-wrap: wrap; }
  .pm-field--sm{ flex: 0 0 calc(50% - .5rem); }
}

/* ============ POLISH ============ */

/* Separador "o" entre pagar y WhatsApp */
.summary-or{
  display:flex; align-items:center; gap:1rem;
  margin:1.1rem 0;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(241,234,221,.35);
}
.summary-or::before,
.summary-or::after{
  content:''; flex:1; height:1px;
  background:rgba(241,234,221,.14);
}

/* Tarjeta de resumen: un poco más presente */
.summary-card{
  background:linear-gradient(180deg, rgba(255,252,247,.09) 0%, rgba(255,252,247,.04) 100%);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
}

/* Habitación seleccionada: marca visible */
.room-opt{ position:relative; }
.room-opt.selected{
  box-shadow:0 0 0 1px rgba(227,166,62,.35), 0 8px 22px -12px rgba(227,166,62,.5);
}
.room-opt.selected::after{
  content:'✓';
  position:absolute; top:.55rem; right:.7rem;
  font-size:.7rem; font-weight:700; color:var(--gold);
}

/* Foco visible en todo lo interactivo */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:6px;
}

/* Rango del calendario: bordes más limpios */
.cal-day.in-range{ color:var(--cream); }
.cal-day.checkin,
.cal-day.checkout{ box-shadow:0 4px 12px -6px rgba(166,81,47,.9); }

/* Los items de grid no deben imponer su min-content al track */
.booking-body > .bk-step{ min-width:0; }
.room-opt{ min-width:0; }
.room-opt-name, .room-opt-cap, .room-opt-price{ min-width:0; }

@media (max-width:680px){
  /* "Precio según grupo" con nowrap inflaba la columna a 562px en pantallas de 375 */
  .room-opt-price{ white-space:normal; overflow-wrap:anywhere; line-height:1.3; }
  .room-opt-cap{ white-space:normal; }
  .bk-step{ padding:1.6rem 1.2rem; }
}

/* Desglose del resumen */
.sum-row--sub{ color:rgba(241,234,221,.6); }
.sum-row--sub strong{ color:rgba(241,234,221,.85); font-weight:500; }
.sum-note{
  display:block; font-style:normal; font-size:.66rem;
  color:rgba(241,234,221,.4); margin-top:.15rem;
}
#sumExtrasList{ display:flex; flex-direction:column; gap:.7rem; }
#sumExtrasList:not(:empty){ margin-top:.7rem; }
.om-sub{
  display:flex; justify-content:space-between; align-items:baseline;
  color:rgba(241,234,221,.6); font-size:.72rem;
}
.om-sub strong{ color:rgba(241,234,221,.9); }

/* ============================================================
   SECCIONES NUEVAS
   ============================================================ */

/* ---- Hero: prueba social + ancla de precio ---- */
.hero-rating{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-bottom:1.2rem; padding:.4rem .9rem;
  background:rgba(0,0,0,.28); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18); border-radius:100px;
}
.hr-stars{ color:var(--gold); font-size:.85rem; letter-spacing:.08em; }
.hr-text{ font-family:var(--mono); font-size:.7rem; color:rgba(255,255,255,.85); }
.hr-text em{ font-style:normal; color:rgba(255,255,255,.5); }

.btn-anchor{ flex-direction:column; align-items:flex-start; gap:.1rem; padding-top:.7rem; padding-bottom:.7rem; }
.btn-from{ font-size:.66rem; opacity:.75; letter-spacing:.06em; }

/* ---- Buscador rapido ---- */
.quick-search{
  display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:.7rem;
  align-items:end; margin-top:2rem; padding:1rem;
  background:rgba(0,0,0,.32); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16); border-radius:18px;
  max-width:760px;
}
.qs-field{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.qs-field label{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
}
.qs-field input, .qs-field select{
  width:100%; padding:.6rem .7rem; border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08); color:var(--white);
  font-family:var(--mono); font-size:.78rem;
}
.qs-field select option{ background:var(--pine-2); color:var(--cream); }
.qs-submit{ justify-content:center; height:2.45rem; }

/* ---- Barra de confianza ---- */
.trustbar{ background:var(--cream-2); padding:2.2rem 2rem; }
.trustbar-wrap{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
}
.tb-item{ display:flex; align-items:center; gap:.8rem; }
.tb-item svg{ width:26px; height:26px; flex-shrink:0; color:var(--rust); }
.tb-item strong{ display:block; font-family:var(--display); font-size:1rem; }
.tb-item span{ font-family:var(--mono); font-size:.7rem; color:rgba(33,29,23,.6); }

/* ---- Como reservar ---- */
.howto{ padding:7rem 2rem 5rem; background:var(--cream); }
.howto-grid{
  max-width:1100px; margin:0 auto 4rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
}
.ht-step{
  background:var(--white); border:1px solid rgba(33,29,23,.09);
  border-radius:20px; padding:2rem 1.8rem;
}
.ht-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--pine); color:var(--cream);
  font-family:var(--mono); font-size:.85rem; margin-bottom:1rem;
}
.ht-step h3{ font-size:1.25rem; margin-bottom:.5rem; }
.ht-step p{ font-size:.9rem; color:rgba(33,29,23,.65); line-height:1.6; }

/* ---- Oferta destacada ---- */
.offer-card{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.2fr;
  background:var(--pine); border-radius:24px; overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(31,52,39,.5);
}
.offer-media{ position:relative; min-height:260px; }
.offer-body{ padding:2.6rem 2.4rem; color:var(--cream); }
.offer-flag{
  display:inline-block; margin-bottom:1rem; padding:.35rem .8rem;
  background:var(--gold); color:var(--ink); border-radius:100px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
}
.offer-body h3{ font-size:1.9rem; margin-bottom:.6rem; }
.offer-body p{ font-size:.92rem; color:rgba(241,234,221,.7); line-height:1.6; margin-bottom:1.4rem; }
.offer-price{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.op-old{ font-family:var(--mono); font-size:1rem; color:rgba(241,234,221,.45); text-decoration:line-through; }
.op-new{ font-family:var(--display); font-size:2.6rem; color:var(--gold); line-height:1; }
.op-unit{ font-family:var(--mono); font-size:.78rem; color:rgba(241,234,221,.6); }
.op-save{
  margin-left:.3rem; padding:.25rem .7rem; border-radius:100px;
  background:rgba(227,166,62,.16); color:var(--gold);
  font-family:var(--mono); font-size:.68rem;
}

/* ---- Resenas ---- */
.reviews{ padding:7rem 2rem 5rem; background:var(--cream-2); }
.rv-score{
  max-width:1100px; margin:0 auto 2.6rem;
  display:flex; align-items:center; gap:1.2rem; justify-content:center;
}
.rv-num{ font-family:var(--display); font-size:3rem; color:var(--pine); line-height:1; }
.rv-stars{ display:block; color:var(--gold); letter-spacing:.12em; }
.rv-meta{ font-family:var(--mono); font-size:.72rem; color:rgba(33,29,23,.55); }
.rv-grid{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
}
.rv-card{
  background:var(--white); border:1px solid rgba(33,29,23,.09);
  border-radius:20px; padding:2rem 1.8rem;
}
.rv-card p{ font-size:.95rem; line-height:1.65; color:rgba(33,29,23,.78); margin-bottom:1.4rem; }
.rv-card footer{ display:flex; align-items:center; gap:.7rem; }
.rv-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--sage); color:var(--white); font-family:var(--mono); font-size:.8rem;
}
.rv-card cite{ font-style:normal; font-family:var(--mono); font-size:.78rem; color:rgba(33,29,23,.6); }

/* Marca visual de contenido pendiente (quitar al poner datos reales) */
.rv-card[data-placeholder="true"] p{ color:rgba(33,29,23,.4); font-style:italic; }

/* ---- Ubicacion ---- */
.location{ padding:7rem 2rem; background:var(--pine); color:var(--cream); }
.loc-wrap{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.1fr; gap:3rem; align-items:center;
}
.loc-info .section-title{ color:var(--cream); margin-bottom:1.2rem; }
.loc-info .label{ color:var(--gold); }
.loc-text{ color:rgba(241,234,221,.7); line-height:1.7; margin-bottom:1.8rem; }
.loc-list{ list-style:none; margin-bottom:2rem; display:flex; flex-direction:column; gap:.9rem; }
.loc-list li{ display:flex; flex-direction:column; gap:.15rem; padding-bottom:.9rem; border-bottom:1px solid rgba(241,234,221,.1); }
.loc-list strong{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sage); }
.loc-list span{ font-family:var(--display); font-size:1.05rem; }
.loc-actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.loc-map{ border-radius:24px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.loc-map iframe{ width:100%; height:420px; border:0; display:block; filter:grayscale(.3) contrast(1.05); }

/* ---- CTA final ---- */
.finalcta{
  padding:7rem 2rem; text-align:center;
  background:linear-gradient(135deg, var(--rust) 0%, #7d3a22 100%);
  color:var(--white);
}
.fc-wrap{ max-width:640px; margin:0 auto; }
.fc-wrap h2{ font-family:var(--display); font-size:clamp(2rem,4vw,2.8rem); margin-bottom:1rem; }
.fc-wrap p{ color:rgba(255,255,255,.82); line-height:1.7; margin-bottom:2rem; }
.fc-actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.finalcta .btn-primary{ background:var(--white); color:var(--rust); }
.finalcta .btn-primary:hover{ background:var(--cream); }

/* ---- Footer ampliado ---- */
.footer-cols{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.4rem;
  padding-bottom:2.4rem; margin-bottom:1.6rem;
  border-bottom:1px solid rgba(241,234,221,.12); text-align:left;
}
.fcol h4{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1rem; font-weight:500;
}
.fcol p, .fcol a{ display:block; font-size:.86rem; line-height:1.7; color:rgba(241,234,221,.7); }
.fcol a{ transition:color var(--dur-s) var(--ease); }
.fcol a:hover{ color:var(--gold); }
.fcol--brand .footer-note{ max-width:32ch; margin-top:.9rem; }
.footer-bottom{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.7rem; color:rgba(241,234,221,.45);
}

/* ---- Barra fija movil ---- */
.mobile-bar{ display:none; }
/* 980px, el mismo punto en que el menu pasa a hamburguesa. Antes esto
   estaba en 760 y entre medias no habia ni menu ni barra de reserva. */
@media (max-width:980px){
  .mobile-bar{
    display:flex; align-items:center; gap:.7rem;
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(22,38,27,.96); backdrop-filter:blur(12px);
    border-top:1px solid rgba(241,234,221,.14);
  }
  .mb-price{ display:flex; flex-direction:column; line-height:1.1; }
  .mb-price span{ font-family:var(--mono); font-size:.6rem; color:rgba(241,234,221,.5); }
  .mb-price strong{ font-family:var(--display); font-size:1.25rem; color:var(--gold); }
  .mb-btn{ flex:1; justify-content:center; }
  .mb-wa{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%; flex-shrink:0;
    background:#25D366; color:var(--white);
  }
  /* que la barra no tape el final de la pagina */
  .footer{ padding-bottom:5.5rem; }
}

/* ---- Responsive de lo nuevo ---- */
@media (max-width:1024px){
  .trustbar-wrap{ grid-template-columns:repeat(2,1fr); }
  .loc-wrap{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .howto-grid{ grid-template-columns:1fr; }
  .offer-card{ grid-template-columns:1fr; }
  .offer-media{ min-height:200px; }
  .rv-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .quick-search{ grid-template-columns:1fr 1fr; }
  .qs-submit{ grid-column:1 / -1; }
  .trustbar{ padding:1.8rem 1.4rem; }
  .howto, .reviews, .location, .finalcta{ padding-left:1.4rem; padding-right:1.4rem; }
  .offer-body{ padding:2rem 1.4rem; }
  .footer-cols{ grid-template-columns:1fr; gap:1.8rem; }
  .loc-map iframe{ height:300px; }
  .footer-bottom{ flex-direction:column; }
}

/* ============================================================
   APARTADO COMERCIAL (.pitch)
   Bloque de propuesta, no es contenido del hotel.
   Borrar junto con su HTML antes de publicar el sitio final.
   ============================================================ */
.pitch{
  padding:7rem 2rem;
  background:var(--ink);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.pitch::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 12% -10%, rgba(227,166,62,.14), transparent 62%);
}
.pitch-wrap{ max-width:1060px; margin:0 auto; position:relative; }

/* --- Cabecera --- */
.pitch-head{ max-width:640px; margin-bottom:3.2rem; }
.pitch-eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem;
}
.pitch-head h2{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.12;
  color:var(--cream); margin-bottom:1rem;
}
.pitch-sub{ font-size:1rem; line-height:1.7; color:rgba(241,234,221,.75); }
.pitch-sub a{ color:var(--gold); border-bottom:1px solid rgba(227,166,62,.4); }
.pitch-sub a:hover{ border-bottom-color:var(--gold); }

/* --- El gancho: comisión --- */
/* --- Lo que ya está construido --- */
.built{ margin-bottom:3.2rem; }
.built-head{ margin-bottom:1.4rem; }
.built-head h3{ font-size:1.6rem; color:var(--cream); margin-bottom:.4rem; }
.built-head p{ font-size:.92rem; color:rgba(241,234,221,.7); line-height:1.6; }
.built-list{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:.55rem;
}
.built-list li{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .95rem; border-radius:100px;
  border:1px solid rgba(143,168,147,.32);
  background:rgba(143,168,147,.08);
  font-size:.84rem; color:rgba(241,234,221,.9);
}
.built-list li::before{
  content:'✓'; color:var(--sage);
  font-family:var(--mono); font-size:.75rem; flex-shrink:0;
}

/* --- Etapas (secuencia real, por eso van numeradas) --- */
.stages{
  list-style:none;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
  padding:2.2rem 2.4rem;
  border:1px solid rgba(241,234,221,.13);
  border-radius:20px;
  background:rgba(255,252,247,.03);
}
.stages li{ display:flex; gap:.9rem; align-items:flex-start; }
.st-num{
  flex-shrink:0; width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gold); color:var(--ink);
  font-family:var(--mono); font-size:.82rem; font-weight:500;
}
.stages h4{
  font-family:var(--display); font-weight:450; font-size:1.1rem;
  color:var(--cream); margin-bottom:.3rem;
}
.stages p{ font-size:.86rem; line-height:1.55; color:rgba(241,234,221,.72); }

/* --- Cierre --- */
.pitch-foot{
  margin-top:2.8rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
.pitch-foot p{
  font-family:var(--display); font-size:1.5rem;
  color:var(--cream);
}

/* --- Responsive --- */
@media (max-width:900px){
  .stages{ grid-template-columns:1fr; gap:1.4rem; }
}
@media (max-width:680px){
  .pitch{ padding:5rem 1.4rem; }
  .stages{ padding:1.8rem 1.4rem; }
  .built-list{ gap:.45rem; }
  .built-list li{ font-size:.8rem; padding:.5rem .8rem; }
  .pitch-foot{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   ACABADO · legibilidad y detalle
   Los textos secundarios estaban demasiado tenues para leerse
   comodos en pantalla de movil o con sol. Se suben sin cambiar
   la jerarquia visual.
   ============================================================ */

/* --- Textos secundarios: mas cuerpo --- */
.cal-dow          { color:rgba(241,234,221,.7); }
.ds-label         { color:rgba(241,234,221,.68); }
.room-opt-cap     { color:rgba(241,234,221,.68); }
.rv-meta          { color:rgba(33,29,23,.72); }
.footer-pay       { color:rgba(241,234,221,.62); }
.footer-bottom    { color:rgba(241,234,221,.62); }
.op-old           { color:rgba(241,234,221,.62); }
.summary-note     { color:rgba(241,234,221,.62); }
.sum-note         { color:rgba(241,234,221,.55); }
.hr-text em       { color:rgba(255,255,255,.68); }
.qs-field label   { color:rgba(255,255,255,.75); }
.tb-item span     { color:rgba(33,29,23,.72); }
.ht-step p        { color:rgba(33,29,23,.72); }
.rv-card cite     { color:rgba(33,29,23,.72); }
.loc-text         { color:rgba(241,234,221,.78); }
.pitch-sub        { color:rgba(241,234,221,.75); }
.pitch-foot p     { color:rgba(241,234,221,.78); }
.fcol p, .fcol a  { color:rgba(241,234,221,.78); }
.footer-note      { color:rgba(241,234,221,.72); }
.booking-sub      { color:rgba(241,234,221,.78); }
.sum-row          { color:rgba(241,234,221,.78); }
.sum-row--sub     { color:rgba(241,234,221,.7); }

/* --- Tipografia: aire y ajuste optico --- */
h1, h2 { letter-spacing:-.02em; }
.hero-title { letter-spacing:-.03em; }
.section-title, .booking-title, .pitch-head h2, .fc-wrap h2 { text-wrap:balance; }
.hero-sub, .intro-title, .pitch-sub, .booking-sub { text-wrap:pretty; }
p { text-wrap:pretty; }

/* Cifras alineadas en tablas de precios */
.sum-row strong, .om-item strong, .cd-row strong,
.op-new, .rv-num, .mb-price strong{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

/* --- Detalle: transiciones y elevacion coherentes --- */
.room-card, .exp-card, .ht-step, .rv-card, .g-item{
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.ht-step:hover, .rv-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -24px rgba(33,29,23,.3);
}

/* Imagenes: evitar el salto de layout al cargar */
.room-media, .g-item, .offer-media{ background:rgba(33,29,23,.06); }

/* Foco visible tambien sobre fondos claros */
.trustbar a:focus-visible, .howto a:focus-visible, .reviews a:focus-visible{
  outline-color:var(--rust);
}

/* Seleccion de texto en la marca de la casa */
::selection{ background:var(--gold); color:var(--ink); }



/* Comision de cobro: se muestra pero no compite con el total */
.sum-row--fee span{ display:flex; flex-direction:column; }

/* ============================================================
   RESPONSIVE · pasada de correccion
   Medido en 320, 375, 414, 768, 1024 y 1280.
   ============================================================ */

/* --- Nada se desborda por una palabra larga --- */
h1, h2, h3, h4, p, li, td, th, span, strong, cite { overflow-wrap: break-word; }

/* ------------------------------------------------------------
   1 · iOS amplia la pagina al enfocar un campo de menos de 16px.
   Pasa en el buscador del hero y en todo el formulario de pago:
   el usuario toca "Entrada" y el movil le hace zoom encima.
   ------------------------------------------------------------ */
/* pointer:coarse ademas del ancho: un iPad en horizontal mide 1024 y es
   tactil, asi que sin esto el zoom de iOS volveria justo ahi. */
@media (pointer:coarse), (max-width:980px){
  input, select, textarea,
  .qs-field input, .qs-field select,
  .pm-field input, .pm-field textarea{
    font-size:16px;
  }
  /* Con la fuente mas grande, los campos necesitan algo mas de caja */
  .qs-field input, .qs-field select{ padding:.7rem .75rem; }
  .qs-submit{ height:auto; padding:.85rem 1.5rem; }
}

/* ------------------------------------------------------------
   2 · Zonas tactiles de 44px. Los contadores median 28x28 y los
   enlaces del menu 29px de alto: con el dedo se falla mas de lo
   que se acierta.
   ------------------------------------------------------------ */
@media (pointer:coarse), (max-width:980px){
  .cnt-btn{ width:44px; height:44px; font-size:1.1rem; }
  .counter{ gap:.5rem; }

  .cal-nav{ width:44px; height:44px; }
  /* El calendario son 7 columnas: en 320px, 7 celdas de 44 no caben de
     ninguna manera. Se le da altura solo cuando hay sitio; por debajo
     manda el aspect-ratio o el min-height la desborda. */
  .cal-grid{ min-width:0; }
  .cal-day{ min-width:0; }

  .nav-burger{ width:44px; height:44px; justify-content:center; }
  .mnav a{ padding:.85rem 0; }

  .pm-close{ width:44px; height:44px; }

  /* La casilla entera es tactil, no solo el cuadradito */
  .extra-opt{ min-height:44px; align-items:center; padding:.35rem 0; }

  .fcol a{ padding:.3rem 0; }
  .footer-links a{ display:inline-block; padding:.4rem 0; }
  .nav-logo{ padding:.2rem 0; }
}

/* ------------------------------------------------------------
   3 · Texto minimo legible. Habia etiquetas a 10px, que en un
   movil al sol no se leen.
   ------------------------------------------------------------ */
@media (max-width:980px){
  .room-opt-cap, .cal-dow, .ds-label,
  .step-num, .btn-from, .room-tag, .offer-flag,
  .op-save, .sum-note, .th-note, .extra-text{
    font-size:.75rem;
  }
  .cal-dow{ font-size:.7rem; }
  .label, .pitch-eyebrow, .fee-kicker{ font-size:.7rem; letter-spacing:.12em; }
}

/* ------------------------------------------------------------
   4 · Tablet (681-980). Era la franja peor resuelta: el buscador
   mantenia 4 columnas y las fichas de reserva 2, todo apretado.
   ------------------------------------------------------------ */
@media (max-width:980px){
  .quick-search{ grid-template-columns:1fr 1fr; }
  .qs-submit{ grid-column:1 / -1; }

  .booking-body{ grid-template-columns:1fr; }
  #stepDates{ grid-column:auto; }

  .trustbar-wrap{ grid-template-columns:repeat(2,1fr); gap:1.2rem; }
  .loc-wrap{ grid-template-columns:1fr; }
  .offer-card{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
}

/* ------------------------------------------------------------
   5 · Movil (<=680). Aire y jerarquia.
   ------------------------------------------------------------ */
@media (max-width:680px){
  .hero-content{ padding-bottom:1rem; }
  .hero-actions{ flex-direction:column; align-items:stretch; gap:.6rem; }
  .hero-actions .btn{ justify-content:center; }
  .btn-anchor{ align-items:center; }

  .quick-search{ grid-template-columns:1fr; gap:.6rem; padding:.9rem; }
  .qs-submit{ grid-column:auto; }

  .room-options{ grid-template-columns:1fr; }
  .date-summary{ justify-content:space-between; }

  .fc-actions .btn, .loc-actions .btn, .pitch-foot .btn{ width:100%; justify-content:center; }
  .fc-actions, .loc-actions{ width:100%; }

  .trustbar-wrap{ grid-template-columns:1fr; gap:1rem; }
  .gallery-grid{ gap:.6rem; }
}

/* ------------------------------------------------------------
   6 · Pantallas estrechas de verdad (<=360). Un iPhone SE o un
   Android basico, que es lo que mas se ve en Banos.
   ------------------------------------------------------------ */
@media (min-width:361px) and (max-width:980px){
  .cal-day{ min-height:40px; }
}

@media (max-width:360px){
  .rooms, .gallery, .howto, .reviews, .location, .finalcta, .pitch{
    padding-left:1rem; padding-right:1rem;
  }
  .booking-section{ padding-left:1rem; padding-right:1rem; }
  .bk-step{ padding:1.3rem 1rem; }
  .summary-card{ padding:1.8rem 1.2rem; }
  .cal-day{ font-size:.72rem; }
  .sum-row{ font-size:.76rem; }
  .mb-price strong{ font-size:1.1rem; }
  .mobile-bar{ gap:.5rem; padding-left:.8rem; padding-right:.8rem; }
  .mb-btn{ padding-left:1rem; padding-right:1rem; }
}

/* ------------------------------------------------------------
   7 · Movil en horizontal. El hero pedia 100svh y dejaba el
   titular partido con el teclado o la barra a la vista.
   ------------------------------------------------------------ */
@media (max-height:520px) and (orientation:landscape){
  .hero{ height:auto; min-height:0; padding:6rem 0 3rem; }
  .hero-title{ font-size:clamp(2rem,7vw,3rem); }
  .quick-search{ grid-template-columns:repeat(4,1fr); }
  .qs-submit{ grid-column:auto; }
  .pm-panel{ max-height:94dvh; }
}

/* ------------------------------------------------------------
   8 · La barra fija no debe tapar el final de las secciones a
   las que se salta desde el menu.
   ------------------------------------------------------------ */
@media (max-width:980px){
  section[id]{ scroll-margin-top:5rem; }
  .booking-summary{ margin-bottom:1rem; }
}

/* --- Segunda pasada, sobre lo que la medicion dejo ver --- */
@media (pointer:coarse), (max-width:980px){
  /* Los enlaces del footer se quedaban en 33px: el padding no bastaba
     porque son inline y la caja no crecia hacia arriba. */
  .fcol a, .fcol p a{
    display:inline-flex; align-items:center;
    min-height:44px; padding:.15rem 0;
  }
  .footer-logo{ min-height:44px; }
  .nav-logo{ min-height:44px; align-items:center; }
  .btn-nav{ min-height:44px; }
  .pm-close{ min-width:44px; min-height:44px; }
  /* Enlaces dentro de un parrafo: se agranda la zona sin romper la linea */
  .pitch-sub a, .pm-legal a{
    display:inline-block; padding:.5rem 0;
  }
}

/* Etiquetas que seguian por debajo de lo legible */
@media (max-width:980px){
  .summary-or span{ font-size:.72rem; }
  .pm-step-labels span{ font-size:.68rem; }
  .loc-list strong{ font-size:.72rem; }
  .mb-price span{ font-size:.68rem; }
}

@media (max-width:400px){
  /* El panel del calendario se comia 38px en padding, dejando celdas de 28px.
     Con 8px las celdas suben a ~31px, que es lo maximo que dan 7 columnas
     en una pantalla de 320. */
  .cal-panel{ padding:.6rem; }
  .cal-grid{ gap:2px; }
}

/* ============================================================
   HERO EN MOVIL · visto en pantalla, no medido a ciegas
   ============================================================ */

/* 1 · Cinco estrellas doradas junto a "pendiente de conectar" se leen como
   un error, y encima ocupan el sitio mas visible de la pagina. Vuelve en
   cuanto haya puntuacion real: se quita esta regla y ya. */
.hero-rating{ display:none; }

@media (max-width:980px){
  /* 2 · El hero pedia exactamente una pantalla, pero su contenido medi­a mas:
     el boton del buscador acababa 300px por debajo del borde y no se veia.
     Ahora la pantalla es el minimo, no el maximo. */
  /* El hero era flex con align-items:flex-end. Eso limitaba la altura de
     .hero-content a 771px mientras su contenido llegaba a 1072, y el
     overflow:hidden recortaba el resto: por eso el boton del buscador no
     aparecia. En movil manda el flujo normal y el hero crece con lo que hay. */
  .hero{ display:block; height:auto; min-height:100svh; padding-bottom:2.5rem; }
  .hero-media{ position:absolute; inset:0; height:100%; }
  .hero-content{ position:relative; padding-top:6rem; }

  /* 3 · El buscador ocupaba 299px de los 812 disponibles. Se compacta sin
     quitarle nada: etiquetas mas juntas y menos aire entre campos. */
  .quick-search{ margin-top:1.4rem; padding:.85rem; gap:.5rem; }
  .qs-field label{ font-size:.6rem; letter-spacing:.08em; }
  .qs-field{ gap:.15rem; }
  .qs-field input, .qs-field select{ padding:.6rem .65rem; }
  .qs-submit{ padding:.75rem 1.5rem; margin-top:.15rem; }

  .hero-sub{ margin-bottom:1.2rem; }
  .hero-actions{ margin-bottom:.2rem; }
}

/* .reveal-line lleva display:block para poder recortar la linea de texto al
   animarla, pero .hero-actions es un contenedor flex: al aplanarlo a block
   el gap dejaba de existir y los dos botones salian pegados uno al otro. */
.hero-actions.reveal-line{ display:flex; }