/* ---------- TIPOGRAFÍAS (alojadas aquí: sin Google Fonts → una conexión menos y sin bloquear el pintado; solo el subconjunto latino, que
   cubre inglés y español) ---------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url('../fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/worksans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ============================================================
   WILD FoREST — design tokens
   Edit these to reskin the whole site.
   ============================================================ */
:root{
  --forest-deep:#0B1A12;
  --forest:#122A1C;
  --forest-mid:#1D4030;
  --forest-soft:#2E5B40;
  --cream:#F6F1E3;
  --mist:#CBD9CC;
  --gold:#D2A63C;
  --gold-soft:#E6C368;
  --ink:#0A140E;
  --radius:10px;

  /* ---- extended palette ----
     The site was reading as a wall of green. These are the neutrals that
     let the photography carry the colour: charcoal for depth, warm cream
     for text, mist for secondary copy, and two earth tones for accents
     that aren't gold. Greens stay for structure, not for everything. */
  --charcoal:#14181A;
  --charcoal-soft:#1E2426;
  --bark:#3A2E24;
  --clay:#6B5544;
  --fog:#AEBDB4;

  /* ---- type scale (fluid) ---- */
  --step--1:clamp(.78rem,.75rem + .15vw,.86rem);
  --step-0: clamp(.95rem,.9rem + .25vw,1.06rem);
  --step-1: clamp(1.15rem,1.05rem + .5vw,1.4rem);
  --step-2: clamp(1.5rem,1.3rem + 1vw,2.1rem);
  --step-3: clamp(2rem,1.6rem + 2vw,3.2rem);
  --step-4: clamp(2.6rem,1.9rem + 3.4vw,4.6rem);
  --step-5: clamp(3.2rem,2rem + 6vw,7rem);

  /* ---- spacing ---- */
  --space-xs:8px;  --space-sm:16px; --space-md:28px;
  --space-lg:52px; --space-xl:96px; --space-2xl:150px;

  /* ---- motion ----
     One easing for entrances, one for exits, one slow one for ambient
     drift. Durations are named so timing stays consistent everywhere. */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-drift:cubic-bezier(.45,0,.55,1);
  --dur-fast:.25s; --dur-mid:.5s; --dur-slow:.9s; --dur-cine:1.4s;

  /* ---- elevation (tinted, never pure black) ---- */
  --shadow-sm:0 4px 14px -6px rgba(4,12,8,.5);
  --shadow-md:0 18px 40px -14px rgba(4,12,8,.62);
  --shadow-lg:0 40px 80px -28px rgba(3,9,6,.72);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--forest-deep);
  color:var(--cream);
  font-family:'Work Sans',sans-serif;
  /* MUST be clip, never hidden. overflow-x:hidden turns the body into a
     scroll container, which silently kills position:sticky for every
     descendant — that breaks every scroll scene on the page. clip stops
     sideways scroll without creating that container. */
  overflow-x:clip;
}
h1,h2,h3,.display{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-0.015em;}
a{color:inherit;text-decoration:none;}
.rest{color:var(--gold);}
/* frase resaltada con aura dorada, dentro de un párrafo normal */
.gold-highlight{
  color:var(--gold);
  text-shadow:0 0 14px rgba(210,166,60,.55), 0 0 28px rgba(210,166,60,.22);
}

.eyebrow{
  color:var(--gold);text-transform:uppercase;letter-spacing:0.22em;
  font-size:0.72rem;font-weight:600;
}

/* ---------- SPLASH INTRO ---------- */
#splash{
  position:fixed;inset:0;z-index:9999;background:var(--forest-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 1.1s ease,visibility 1.1s ease;
}
#splash.hide{opacity:0;visibility:hidden;pointer-events:none;}
#splash img{
  width:280px;opacity:0;transform:scale(.93);
  animation:splashLogo 1.5s cubic-bezier(.22,.9,.3,1) forwards;
}
#splash .splash-word{
  font-family:'Fraunces',serif;font-size:clamp(2.6rem,7vw,4.6rem);
  margin-top:4px;opacity:0;animation:splashWord 1.2s ease forwards;animation-delay:.9s;
}
#splash .splash-word .rest{
  text-shadow:0 0 34px rgba(210,166,60,.55);
  animation:splashGlow 2.6s ease-in-out .1s infinite;
}
@keyframes splashGlow{
  0%,100%{text-shadow:0 0 22px rgba(210,166,60,.4);}
  50%{text-shadow:0 0 46px rgba(210,166,60,.85);}
}
#splash .splash-sub{
  color:var(--mist);letter-spacing:0.3em;font-size:.72rem;text-transform:uppercase;
  margin-top:10px;opacity:0;animation:splashWord 1s ease forwards;animation-delay:1.5s;
}
#splash .skip{
  /* top-right corner: the bottom edge belongs to the walking cast now */
  position:absolute;top:28px;right:32px;bottom:auto;
  color:rgba(203,217,204,.55);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  padding:8px 14px;border:1px solid rgba(203,217,204,.22);border-radius:999px;
  transition:color .25s,border-color .25s,background .25s;
}
#splash .skip:hover{
  color:var(--cream);border-color:rgba(246,241,227,.5);background:rgba(246,241,227,.06);
}
@keyframes splashLogo{to{opacity:1;transform:scale(1);}}
@keyframes splashWord{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* ---------- HEADER ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 5%;transition:background .4s,padding .4s;
}
header.scrolled{background:rgba(11,26,18,.94);backdrop-filter:blur(8px);padding:11px 5%;}
.brandmark{display:flex;align-items:center;gap:10px;}
.brandmark img{width:64px;}
nav{display:flex;gap:30px;}
nav a{color:#EDE1BE;font-size:.86rem;font-weight:500;transition:color .25s;} /* cream nav (warmer than --cream so it reads clearly as crema) */
nav a:hover,nav a.active{color:var(--gold);}
.btn{
  display:inline-block;border-radius:999px;font-weight:600;font-size:.85rem;
  padding:12px 26px;transition:transform .25s,background .25s,box-shadow .25s;cursor:pointer;
}
.btn-gold{background:var(--gold);color:var(--ink);border:none;}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px);box-shadow:0 10px 24px rgba(210,166,60,.25);}
.btn-ghost{border:1px solid rgba(246,241,227,.5);color:var(--cream);background:transparent;}
.btn-ghost:hover{background:rgba(246,241,227,.08);}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn:disabled:hover{transform:none;box-shadow:none;background:var(--gold);}

.header-actions{display:flex;align-items:center;gap:16px;}
.cart-btn{
  position:relative;background:none;border:none;color:var(--cream);font-size:1.15rem;
  cursor:pointer;padding:6px;line-height:1;font-family:inherit;
}
.cart-badge{
  position:absolute;top:-4px;right:-6px;background:var(--gold);color:var(--ink);
  font-size:.62rem;font-weight:700;border-radius:999px;min-width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}
/* a class rule would otherwise beat the UA [hidden] rule */
.cart-badge[hidden]{display:none;}

/* ---------- HAMBURGER ----------
   Hidden on desktop; the media query at the bottom reveals it. */
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;padding:8px 4px;
  flex-direction:column;gap:5px;width:34px;
}
.nav-toggle span{
  display:block;height:2px;width:100%;background:var(--cream);border-radius:2px;
  transition:transform .3s ease,opacity .2s ease;
}
.nav-toggle.on span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.on span:nth-child(2){opacity:0;}
.nav-toggle.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- MOBILE NAV PANEL ---------- */
#mobile-nav{
  position:fixed;top:0;right:0;bottom:0;width:min(320px,84vw);z-index:750;
  background:var(--forest);border-left:1px solid rgba(210,166,60,.25);
  display:none;flex-direction:column;gap:4px;padding:84px 30px 30px;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.9,.3,1);
}
#mobile-nav.open{transform:translateX(0);}
#mobile-nav a{
  color:var(--mist);font-size:1.05rem;font-weight:500;padding:14px 0;
  border-bottom:1px solid rgba(203,217,204,.08);transition:color .2s;
}
#mobile-nav a:hover{color:var(--gold);}
#mobile-nav .mobile-nav-cta{
  margin-top:26px;text-align:center;color:var(--ink);border-bottom:none;
}
#mobile-nav .modal-close{position:absolute;top:26px;right:26px;font-size:1.1rem;}
/* display:flex above would otherwise beat the [hidden] attribute */
.cart-badge[hidden]{display:none;}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 6%;
  overflow:hidden;
  /* Path is relative to this stylesheet (/css), so it needs the ../ step up.
     This is the base/fallback layer — the video, when playing, sits above
     it (see .hero-media); the darkening gradient lives in .hero-scrim so it
     stays on top of whichever one is currently showing. */
  background:url('../img/sendero.webp') center/cover no-repeat;
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,20,14,.62),rgba(11,26,18,.9) 72%,var(--forest-deep));
}
.hero h1{font-size:clamp(3.2rem,10vw,7.4rem);line-height:.95;font-weight:700;}
.badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:22px 0 20px;}
.badge{
  border:1px solid rgba(210,166,60,.55);color:var(--gold);border-radius:999px;
  padding:7px 18px;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
}
.badge-clickable{background:none;font-family:inherit;cursor:pointer;transition:background .2s,transform .2s;}
.badge-clickable:hover{background:rgba(210,166,60,.14);transform:translateY(-1px);}
.hero p.sub{color:var(--mist);max-width:560px;font-size:1.06rem;line-height:1.65;margin-bottom:32px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.scroll-cue{position:absolute;bottom:32px;color:var(--mist);opacity:.55;font-size:1.5rem;animation:bob 2.2s ease-in-out infinite;z-index:3;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(9px);}}

/* ---------- HERO BACKGROUND VIDEO ----------
   Sits between the section's own CSS background (the sendero photo,
   always the base layer) and the foliage/content on top. Each clip
   fades in only while it's its turn — see rotateHero() in main.js. */
.hero-media{position:absolute;inset:0;overflow:hidden;z-index:0;}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease;
}
.hero-video.show{opacity:1;}

/* ---------- HERO FOLIAGE ----------
   Decorative leaf layers framing the banner. Each layer sways at a
   different speed and amplitude to fake parallax depth. */
.hero > *:not(.foliage):not(.hero-media):not(.hero-scrim){position:relative;z-index:2;}
.foliage{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;}
.foliage-layer{position:absolute;inset:0;width:100%;height:100%;}
/* holds the <defs> only — never painted */
.foliage-defs{position:absolute;width:0;height:0;}
.foliage-back{filter:blur(3px);transform-origin:50% 0;animation:sway 13s ease-in-out infinite;}
.foliage-mid{filter:blur(1.2px);transform-origin:50% 0;animation:sway 9.5s ease-in-out infinite reverse;}
.foliage-front{transform-origin:50% 0;animation:sway 7s ease-in-out infinite;}
@keyframes sway{
  0%,100%{transform:rotate(-.5deg) translateX(-6px);}
  50%{transform:rotate(.5deg) translateX(6px);}
}
@media(prefers-reduced-motion:reduce){
  .foliage-layer{animation:none;}
}

/* ---------- SECTIONS ---------- */
section{padding:104px 6%;position:relative;}
.section-head{max-width:660px;margin:0 auto 56px;text-align:center;}
.section-head h2{font-size:clamp(2.1rem,4.6vw,3.2rem);margin-top:14px;}
.section-head p{color:var(--mist);margin-top:14px;line-height:1.65;}
.alt{background:var(--forest);}
.section-cta{text-align:center;margin-top:56px;}
/* Gives the neighbors scene's CTA a solid landing instead of sitting on
   whatever the scroll-scene's transparent background happens to show. */
.scene-cta-band{background:var(--forest-deep);padding:var(--space-xl) 6%;text-align:center;position:relative;z-index:1;}
.scene-cta-band .section-cta{margin-top:0;}

/* ---------- FULL-BLEED SECTION PHOTOS ----------
   Same idea as the hero: a photo set via --bg-img, darkened by a
   gradient scrim so the cards and text on top stay readable, on any
   section that opts in with class="bg-section".
   NOTE: --bg-img is set inline per-section in index.html and MUST use
   a root-absolute path ('/img/...'), not a relative one. A relative
   url() inside a custom property resolves against the stylesheet that
   USES it (this file, in /css) rather than the HTML page that sets it
   — a real CSS gotcha, not a typo if you go to "fix" it later. */

}

/* A little more editorial than the plain sections — used on Base Camp
   and Tours, where the photo carries more of the mood. */
.bg-section-rich .section-head::before{
  content:"";display:block;width:44px;height:2px;background:var(--gold);
  margin:0 auto 20px;opacity:.8;
}
.bg-section-rich .section-head h2{font-size:clamp(2.3rem,5.2vw,3.5rem);}
.bg-section-rich .section-head p{font-size:1.02rem;}

/* ---------- OFFER GRID ---------- */
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;max-width:1120px;margin:0 auto;background:rgba(203,217,204,.1);}
/* trying a very understated warm-cream tint mixed into the dark card,
   instead of flat forest-deep — subtle on purpose, easy to revert by
   swapping color-mix() back to var(--forest-deep) / var(--forest-mid) */
.offer-cell{background:color-mix(in srgb, var(--forest-deep) 78%, var(--cream) 22%);padding:34px 30px;transition:background .3s;}
.offer-cell:hover{background:color-mix(in srgb, var(--forest-mid) 72%, var(--cream) 28%);}
.offer-cell .ico{
  width:38px;height:38px;border-radius:8px;background:rgba(210,166,60,.14);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:1.1rem;
}
.offer-cell h3{font-size:1.15rem;margin-bottom:9px;}
.offer-cell p{color:var(--mist);font-size:.89rem;line-height:1.6;}
.offer-cell-clickable{cursor:pointer;}
.offer-cell-clickable:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.offer-cell-link{
  display:inline-block;margin-top:12px;color:var(--gold);font-size:.82rem;font-weight:600;
}

/* ---------- WILDLIFE ---------- */
.wild-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1120px;margin:0 auto;}
.wild-card{
  background:var(--forest);border:1px solid rgba(203,217,204,.1);border-radius:var(--radius);
  overflow:hidden;transition:transform .35s,border-color .35s;
}
.wild-card:hover{transform:translateY(-6px);border-color:rgba(210,166,60,.4);}
.wild-photo{height:190px;background-size:cover;background-position:center;position:relative;}
.wild-tag{
  position:absolute;top:12px;right:12px;background:var(--gold);color:var(--ink);
  font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  padding:5px 11px;border-radius:999px;
}
.wild-body{padding:22px;}
.wild-body h3{font-size:1.12rem;margin-bottom:8px;}
.wild-body p{color:var(--mist);font-size:.86rem;line-height:1.55;}

/* ---------- TOURS ---------- */
.tour-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1120px;margin:0 auto;}
.tour-card{
  background:var(--forest-deep);border:1px solid rgba(203,217,204,.12);border-radius:var(--radius);
  overflow:hidden;position:relative;transition:border-color .3s,transform .3s;
}
.tour-card:hover{border-color:rgba(210,166,60,.45);transform:translateY(-4px);}
.tour-photo{height:160px;background-size:cover;background-position:center;}
.tour-card .ico,.tour-card h3,.tour-dur,.tour-card p,.tour-link{margin-left:28px;margin-right:28px;}
.tour-card .ico{margin-top:22px;}
.tour-card .tour-link{display:inline-block;margin-bottom:26px;}
.tour-price{position:absolute;top:14px;right:18px;color:var(--ink);background:var(--gold);
  padding:5px 12px;border-radius:999px;font-size:.76rem;font-weight:700;}
.tour-card .ico{width:38px;height:38px;border-radius:8px;background:rgba(210,166,60,.14);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.tour-card h3{font-size:1.16rem;margin-bottom:4px;}
.tour-dur{color:var(--gold);font-size:.76rem;margin-bottom:12px;}
.tour-card p{color:var(--mist);font-size:.87rem;line-height:1.6;margin-bottom:16px;}
.tour-link{color:var(--gold);font-size:.84rem;font-weight:600;}

/* ---------- MERCH / SHOP ---------- */
.merch-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1120px;margin:0 auto;
}
.merch-card{
  background:var(--forest-deep);border:1px solid rgba(203,217,204,.12);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,border-color .3s;
}
.merch-card:hover{transform:translateY(-5px);border-color:rgba(210,166,60,.4);}
.merch-photo{
  position:relative;height:120px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(210,166,60,.16),transparent 70%),var(--forest-mid);
  background-size:cover;background-position:center;
}
.merch-card.has-photo .merch-photo{height:230px;}
.merch-icon{font-size:2.4rem;}
/* front / back switch, only rendered for products with two photos */
.merch-views{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;background:rgba(10,20,14,.72);border-radius:999px;padding:3px;
  backdrop-filter:blur(4px);
}
.merch-views button{
  border:none;background:transparent;color:var(--mist);font-family:inherit;
  font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;cursor:pointer;transition:.2s;
}
.merch-views button.on{background:var(--gold);color:var(--ink);}
.merch-body{padding:20px;flex:1;display:flex;flex-direction:column;}
.merch-body h3{font-size:1rem;margin-bottom:6px;}
.merch-body p{color:var(--mist);font-size:.82rem;line-height:1.5;margin-bottom:12px;flex:1;}
.merch-price{color:var(--gold);font-family:'Fraunces',serif;font-size:1.3rem;margin-bottom:14px;}
.merch-body .btn{text-align:center;}

/* ---------- REVIEWS ---------- */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1120px;margin:0 auto;}
.review-card{
  background:var(--forest-deep);border:1px solid rgba(203,217,204,.12);border-radius:var(--radius);
  padding:26px;transition:border-color .3s;
}
.review-card:hover{border-color:rgba(210,166,60,.4);}
.review-stars{color:var(--gold);letter-spacing:.1em;margin-bottom:12px;}
.review-quote{color:var(--mist);font-size:.89rem;line-height:1.6;margin-bottom:16px;}
.review-author{font-weight:600;font-size:.88rem;}
.review-author span{display:block;color:var(--mist);font-weight:400;font-size:.78rem;margin-top:2px;}
.review-card.is-yours{border-color:rgba(210,166,60,.5);}

/* ---------- LEAVE A REVIEW ---------- */
.review-form-wrap{
  max-width:660px;margin:46px auto 0;background:var(--forest-deep);
  border:1px solid rgba(210,166,60,.25);border-radius:var(--radius);padding:32px;
}
.review-form-wrap h3{font-size:1.25rem;margin-bottom:22px;text-align:center;}
.review-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
#review-form .field{margin-bottom:16px;}
#review-form textarea{
  width:100%;background:var(--forest);border:1px solid rgba(203,217,204,.2);color:var(--cream);
  padding:12px 14px;border-radius:6px;font-family:inherit;font-size:.9rem;resize:vertical;line-height:1.5;
}
.star-input{display:flex;gap:4px;}
.star-input button{
  background:none;border:none;cursor:pointer;font-size:1.5rem;line-height:1;
  color:rgba(203,217,204,.3);padding:0 2px;transition:color .15s;
}
.star-input button.on{color:var(--gold);}
#review-form .btn{width:100%;text-align:center;}
.review-form-note{color:var(--gold);font-size:.82rem;margin-top:14px;text-align:center;line-height:1.5;}

/* ---------- EMAIL CAPTURE POPUP ---------- */
#capture-modal{
  position:fixed;top:50%;left:50%;z-index:800;width:min(430px,90vw);
  transform:translate(-50%,-44%) scale(.96);opacity:0;visibility:hidden;
  transition:transform .4s cubic-bezier(.2,.9,.3,1),opacity .4s ease,visibility .4s ease;
  background:linear-gradient(170deg,var(--forest-mid),var(--forest-deep));
  border:1px solid rgba(210,166,60,.4);border-radius:var(--radius);
  padding:36px 32px 28px;text-align:center;
}
#capture-modal.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;}
.capture-eyebrow{
  color:var(--gold);text-transform:uppercase;letter-spacing:.22em;
  font-size:.68rem;font-weight:600;margin-bottom:12px;
}
#capture-modal h3{font-size:1.5rem;line-height:1.25;margin-bottom:12px;}
.capture-copy{color:var(--mist);font-size:.88rem;line-height:1.6;margin-bottom:22px;}
#capture-form{display:flex;flex-direction:column;gap:10px;}
#capture-form input{
  background:rgba(11,26,18,.6);border:1px solid rgba(203,217,204,.25);color:var(--cream);
  padding:14px 18px;border-radius:999px;font-family:inherit;font-size:.9rem;text-align:center;
}
#capture-form .btn{width:100%;text-align:center;}
.capture-dismiss{
  background:none;border:none;color:rgba(203,217,204,.55);font-family:inherit;
  font-size:.76rem;margin-top:16px;cursor:pointer;text-decoration:underline;
}
.capture-dismiss:hover{color:var(--mist);}

/* ---------- NEARBY ---------- */
.near-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1000px;margin:0 auto;}
.near-card{background:var(--forest-deep);border:1px solid rgba(203,217,204,.12);border-radius:var(--radius);padding:26px 28px;}
.near-card h3{font-size:1.05rem;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.near-card li{list-style:none;color:var(--mist);font-size:.86rem;padding:7px 0;border-bottom:1px solid rgba(203,217,204,.07);}
.near-card li:last-child{border:none;}
.near-card li a{color:var(--cream);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(210,166,60,.4);transition:color .2s;}
.near-card li a:hover{color:var(--gold);}

/* ---------- MAP ---------- */
.map-embed{
  max-width:1000px;margin:0 auto;border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(203,217,204,.12);box-shadow:var(--shadow-lg);
}
.map-embed{position:relative;height:420px;background:#0d1f16;}
.map-embed iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s ease;}
.map-embed.is-ready iframe{opacity:1;}
/* tarjeta mientras llega el mapa (o si Google no responde): nunca un cuadro vacío */
.map-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px;color:var(--cream);
  background:radial-gradient(120% 90% at 50% 40%,rgba(210,166,60,.10),transparent 60%),linear-gradient(180deg,#10261a,#0b1a12);}
.map-fallback .map-pin{font-size:2.2rem;line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));}
.map-fallback b{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:600;}
.map-fallback small{color:var(--mist);font-size:.88rem;max-width:34ch;}
.map-fallback-cta{margin-top:8px;padding:9px 18px;border-radius:999px;border:1px solid rgba(210,166,60,.55);color:var(--gold);font-size:.84rem;font-weight:600;}
.map-embed.is-ready .map-fallback{visibility:hidden;transition:visibility 0s .5s;}
@media (max-width:600px){ .map-embed{height:300px;} }

/* ---------- BOOKING ---------- */
.book-wrap{max-width:900px;margin:0 auto;}
.book-form{
  background:var(--forest-deep);border:1px solid rgba(210,166,60,.25);border-radius:var(--radius);
  padding:30px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-bottom:44px;
}
.field label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin-bottom:8px;font-weight:600;}
.field input,.field select{
  width:100%;background:var(--forest);border:1px solid rgba(203,217,204,.2);color:var(--cream);
  padding:12px 14px;border-radius:6px;font-family:inherit;font-size:.9rem;
}
.room-type-row{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;}
.room-pill{
  flex:1;min-width:130px;text-align:center;padding:12px;border-radius:6px;cursor:pointer;
  border:1px solid rgba(203,217,204,.2);font-size:.86rem;transition:.25s;
}
.room-pill.active{border-color:var(--gold);background:rgba(210,166,60,.13);color:var(--gold);}
.book-form .btn{grid-column:1/-1;text-align:center;}
.rooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.room-card{
  background:var(--forest-deep);border:1px solid rgba(203,217,204,.13);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,border-color .3s;
}
.room-card.popular{border-color:var(--gold);}
.room-card:hover{transform:translateY(-5px);}
.room-photo{height:150px;background-size:cover;background-position:center;position:relative;}
.pop-tag{position:absolute;top:12px;right:12px;background:var(--gold);color:var(--ink);font-size:.64rem;font-weight:700;text-transform:uppercase;padding:5px 11px;border-radius:999px;}
.room-body{padding:24px;flex:1;display:flex;flex-direction:column;}
.room-body h3{font-size:1.1rem;}
.room-price{color:var(--gold);font-family:'Fraunces',serif;font-size:1.7rem;margin:6px 0 12px;}
.room-price span{font-size:.8rem;color:var(--mist);font-family:'Work Sans',sans-serif;}
.room-body p{color:var(--mist);font-size:.85rem;line-height:1.55;margin-bottom:14px;}
.room-body ul{list-style:none;margin-bottom:20px;}
.room-body li{color:var(--mist);font-size:.82rem;padding:4px 0;}
.room-body li::before{content:"✓ ";color:var(--gold);}
.room-body .btn{margin-top:auto;text-align:center;}
.room-alt-book{display:flex;justify-content:center;gap:14px;margin-top:12px;flex-wrap:wrap;}
.room-alt-book a{color:var(--mist);font-size:.74rem;text-decoration:underline;text-underline-offset:2px;}
.room-alt-book a:hover{color:var(--gold);}

/* ---------- NEWSLETTER ---------- */
.news{text-align:center;}
.news-form{display:flex;gap:10px;max-width:470px;margin:26px auto 0;flex-wrap:wrap;}
.news-form input{
  flex:1;min-width:220px;background:rgba(11,26,18,.6);border:1px solid rgba(203,217,204,.25);
  color:var(--cream);padding:14px 18px;border-radius:999px;font-family:inherit;
}
.news-note{color:var(--mist);font-size:.75rem;margin-top:14px;opacity:.75;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:0 auto;}
.contact-card{background:var(--forest-deep);border:1px solid rgba(203,217,204,.13);border-radius:var(--radius);padding:30px;}
.contact-card h3{font-size:1.15rem;margin-bottom:20px;}
.contact-card li{list-style:none;padding:11px 0;color:var(--mist);font-size:.9rem;border-bottom:1px solid rgba(203,217,204,.07);}
.contact-card li:last-child{border:none;}
.time-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(203,217,204,.1);}
.time-row b{color:var(--gold);font-family:'Fraunces',serif;}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);padding:52px 6% 28px;text-align:center;}
footer .fbrand{font-family:'Fraunces',serif;font-size:1.5rem;margin-bottom:10px;}
footer p{color:rgba(203,217,204,.6);font-size:.82rem;}
.fplatforms{margin-top:22px;font-size:.78rem;color:rgba(203,217,204,.5);}
.fplatforms a{color:var(--gold);font-weight:600;margin:0 4px;}
.fplatforms a:hover{text-decoration:underline;}
.fplatforms-dot{opacity:.5;}
.fsocial{margin-top:16px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
.fsocial a{color:var(--mist);font-size:.82rem;font-weight:500;transition:color .2s;}
.fsocial a:hover{color:var(--gold);}
.contact-social{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;}
.contact-social a{color:var(--gold);font-weight:600;font-size:.85rem;transition:opacity .2s;}
.contact-social a:hover{opacity:.7;text-decoration:underline;}

/* ============ FIND THE FROG BANNER ============ */
.frog-banner{
  display:flex;align-items:center;gap:18px;
  max-width:1100px;margin:0 auto;padding:14px 26px;
  background:linear-gradient(90deg,rgba(212,166,60,.14),rgba(212,166,60,.06));
  border:1px solid rgba(212,166,60,.35);border-radius:14px;
  color:var(--cream);text-decoration:none;
  transition:background .3s,border-color .3s,transform .3s;
}
.frog-banner:hover{background:linear-gradient(90deg,rgba(212,166,60,.22),rgba(212,166,60,.1));border-color:var(--gold);transform:translateY(-1px);}
.frog-banner-icon{
  width:34px;height:22px;flex:none;
  /* ruta absoluta: una relativa aquí resuelve contra css/ (la carpeta de
     este archivo), no contra la página — daba 404 en /css/img/... */
  background-image:url('/img/wildlife/extra/sapo-dorado.webp');
  background-size:1020px 22px;background-position:0 0;background-repeat:no-repeat;
  filter:drop-shadow(0 0 8px rgba(212,166,60,.5));
}
.frog-banner-text{font-size:.88rem;line-height:1.5;}
.frog-banner-text b{color:var(--gold);font-weight:600;}
.frog-banner-sub{display:block;color:var(--mist);font-size:.78rem;margin-top:2px;opacity:.85;}
@media (max-width:640px){
  .frog-banner{margin-left:5%;margin-right:5%;padding:12px 18px;}
  .frog-banner-text{font-size:.82rem;}
}

/* Golden frog sprite floating in the shop section */
.frog-catch{
  position:absolute;z-index:5;cursor:pointer;
  font-size:2.4rem;line-height:1;
  /* es un <button> — sin esto, el navegador le pone su fondo y borde
     por defecto (blanco) detrás del sprite, que sí es transparente */
  background:transparent;border:none;padding:0;
  filter:drop-shadow(0 0 12px rgba(212,166,60,.7)) drop-shadow(0 2px 4px rgba(0,0,0,.4));
  animation:frogPulse 1.6s ease-in-out infinite;
  transition:transform .2s;
}
.frog-catch:hover{transform:scale(1.15);}
@keyframes frogPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}

.checkout-promo-msg{font-size:.78rem;margin-top:6px;min-height:1em;color:var(--mist);}
.checkout-promo-msg.ok{color:var(--gold);}
.checkout-promo-msg.err{color:#e39a9a;}
.fbottom{margin-top:30px;padding-top:20px;border-top:1px solid rgba(246,241,227,.09);font-size:.74rem;color:rgba(246,241,227,.4);}

/* ============================================================
   CART DRAWER / CHECKOUT MODAL / NEW-BEDS LIGHTBOX
   ============================================================ */
.overlay{
  position:fixed;inset:0;background:rgba(6,14,9,.68);backdrop-filter:blur(2px);
  z-index:700;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;
}
.overlay.show{opacity:1;visibility:visible;}

/* -- cart drawer (slide in from right) -- */
#cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:750;
  background:var(--forest);border-left:1px solid rgba(210,166,60,.25);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.9,.3,1);
}
#cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid rgba(203,217,204,.1);}
.cart-head h3{font-size:1.15rem;}
.modal-close{background:none;border:none;color:var(--mist);font-size:1rem;cursor:pointer;padding:4px;}
.modal-close:hover{color:var(--gold);}
.cart-items{flex:1;overflow-y:auto;padding:10px 24px;}
.cart-empty{color:var(--mist);font-size:.88rem;padding:30px 0;text-align:center;}
.cart-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid rgba(203,217,204,.08);}
.cart-item-icon{font-size:1.5rem;width:38px;text-align:center;}
.cart-item-info{flex:1;}
.cart-item-name{font-size:.9rem;font-weight:500;}
.cart-item-price{color:var(--gold);font-size:.82rem;margin-top:2px;}
.cart-item-qty{display:flex;align-items:center;gap:10px;}
.cart-item-qty button{
  width:26px;height:26px;border-radius:6px;border:1px solid rgba(203,217,204,.25);
  background:transparent;color:var(--cream);cursor:pointer;font-size:.9rem;line-height:1;font-family:inherit;
}
.cart-item-qty button:hover{border-color:var(--gold);color:var(--gold);}
.cart-foot{padding:20px 24px 24px;border-top:1px solid rgba(203,217,204,.1);}
.cart-subtotal{display:flex;justify-content:space-between;margin-bottom:16px;font-size:.95rem;}
.cart-subtotal b{color:var(--gold);font-family:'Fraunces',serif;font-size:1.2rem;}

/* -- checkout modal + beds lightbox (centered) -- */
#checkout-modal,#beds-lightbox{
  position:fixed;top:50%;left:50%;z-index:760;
  transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.9,.3,1),opacity .35s ease,visibility .35s ease;
  background:var(--forest);border:1px solid rgba(210,166,60,.3);border-radius:var(--radius);
  padding:32px;max-height:86vh;overflow-y:auto;
}
#checkout-modal.open,#beds-lightbox.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;}
#checkout-modal{width:min(440px,90vw);}
#beds-lightbox{width:min(760px,92vw);}
#checkout-modal h3,#beds-lightbox h3{font-size:1.3rem;margin-bottom:6px;padding-right:28px;}
.checkout-note{color:var(--mist);font-size:.85rem;margin-bottom:20px;}
#checkout-form .field{margin-bottom:16px;}
.checkout-summary{border-top:1px solid rgba(203,217,204,.12);border-bottom:1px solid rgba(203,217,204,.12);margin:18px 0;padding:14px 0;}
.checkout-line{display:flex;justify-content:space-between;font-size:.86rem;color:var(--mist);padding:5px 0;}
.checkout-line.checkout-total{color:var(--cream);font-weight:600;margin-top:6px;border-top:1px solid rgba(203,217,204,.12);padding-top:12px;}

.beds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
.beds-photo{border-radius:8px;overflow:hidden;border:1px solid rgba(203,217,204,.12);}
.beds-img{height:150px;background-size:cover;background-position:center;}
.beds-caption{padding:12px 14px;font-size:.8rem;color:var(--mist);line-height:1.5;}
.beds-caption b{color:var(--gold);font-family:'Fraunces',serif;display:block;font-size:.95rem;margin-bottom:2px;}

/* ============================================================
   WILDLIFE ENGINE — photographic sprite packs
   ------------------------------------------------------------
   Position and travel are driven per-frame from wildlife.js; the
   limb cycle is a generated @keyframes stepping the sprite strip.
   ============================================================ */
#wildlife-layer{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden;}
/* One animal. The strip is stepped by a generated @keyframes; lighting
   and ground shadow come from the pack manifest via --pack-filter, kept
   in a custom property so the hover state can compose on top of it. */
.creature{
  position:absolute;top:0;left:0;pointer-events:none;opacity:0;
  --scale:1;--pack-filter:none;
  /* scale from the top-left so the engine's x/y stay the true left
     edge and top of the sprite — the ground maths depends on it */
  transform-origin:0 0;will-change:transform,opacity;
  background-repeat:no-repeat;filter:var(--pack-filter);
}
/* the tap target — tight to the body, so the transparent corners of the
   frame never swallow a click meant for a button underneath */
.creature-hit{
  position:absolute;padding:0;border:none;background:transparent;
  pointer-events:auto;cursor:pointer;
}
.creature-hit:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
/* subtle "you can touch me" hint, desktop only */
@media(hover:hover){
  .creature:has(.creature-hit:hover){
    filter:var(--pack-filter) brightness(1.5) drop-shadow(0 0 16px rgba(210,166,60,.55));
  }
}
/* Second-batch animals (js/wildlife-extra.js): gold aura ONLY on hover or
   tap, never sitting on by default — toggled via the .aura-on class. */
.creature.aura-on{
  filter:var(--pack-filter) brightness(1.4) drop-shadow(0 0 16px rgba(212,166,60,.55));
  transition:filter .2s ease;
}

/* Aviso de "tocá un animal" — una sola vez por visitante, se desvanece solo */
/* Detalle chico (easter egg al 3er animal), no un aviso protagonista —
   abajo, lejos del header/menú, letra pequeña. */
.animal-hint{
  position:fixed;z-index:10050;opacity:0;
  background:rgba(11,26,18,.82);backdrop-filter:blur(6px);
  border:1px solid rgba(210,166,60,.3);
  color:var(--mist);font-size:.7rem;font-weight:500;letter-spacing:.01em;
  padding:6px 13px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.28);pointer-events:none;
  transition:opacity .5s ease,transform .5s ease;
}
/* aviso de "toca un animal": chico, abajo, centrado */
.animal-hint-fixed{
  bottom:18px;left:50%;transform:translate(-50%,8px);
}
.animal-hint-fixed.show{opacity:1;transform:translate(-50%,0);}
@media (max-width:600px){
  .animal-hint{font-size:.66rem;padding:5px 11px;}
  .animal-hint-fixed{white-space:normal;max-width:74vw;text-align:center;}
}
/* Undergrowth the ground animals walk into. The sprite packs are cut
   from video by threshold, so the very bottom of the paws can show a
   hard edge — this soft band sits in front of them and hides it. It
   only fades in while a sprite is actually on screen. */
#wildlife-layer::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
  background:linear-gradient(to top,rgba(8,20,13,.72),rgba(8,20,13,0));
  opacity:0;transition:opacity .9s ease;pointer-events:none;
}
#wildlife-layer.has-ground::after{opacity:1;}
/* Animals never crawl over an open cart, checkout, or gallery —
   and cannot be clicked through it either. */
body.modal-open #wildlife-layer{opacity:0;transition:opacity .3s ease;}
body.modal-open .creature-hit{pointer-events:none;}

/* ---------- ROOM LIGHTBOX ----------
   Tapping a room's photo opens the same photo bigger, with the full
   write-up and every spec underneath — same shape as the species card. */
#room-lightbox{
  position:fixed;top:50%;left:50%;z-index:760;width:min(480px,92vw);
  transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.9,.3,1),opacity .35s ease,visibility .35s ease;
  background:var(--forest);border:1px solid rgba(210,166,60,.3);border-radius:var(--radius);
  overflow:hidden;max-height:88vh;overflow-y:auto;
}
#room-lightbox.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;}
#room-lightbox .modal-close{
  position:absolute;top:14px;right:16px;z-index:2;
  background:rgba(10,20,14,.6);border-radius:50%;width:30px;height:30px;
}
.room-lb-photo{
  position:relative;height:280px;background-size:cover;background-position:center;
  background-color:var(--forest-mid);
}
.room-lb-thumbs{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;}
.room-lb-body{padding:26px 28px 28px;}
.room-lb-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
.room-lb-head h3{font-size:1.4rem;}
.room-lb-blurb{color:var(--mist);font-size:.9rem;line-height:1.65;margin:14px 0 18px;}
#room-lightbox .room-specs{margin-bottom:22px;}
#room-lightbox .room-actions{flex-direction:column;align-items:stretch;}
#room-lightbox .room-alt-book{justify-content:center;}

/* ---------- SPECIES CARD ----------
   Same shape as a shop product card: photo with a view switcher,
   then the write-up and a single call to action. */
#animal-card{
  position:fixed;top:50%;left:50%;z-index:760;width:min(430px,90vw);
  transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.9,.3,1),opacity .35s ease,visibility .35s ease;
  background:var(--forest);border:1px solid rgba(210,166,60,.3);border-radius:var(--radius);
  overflow:hidden;max-height:88vh;overflow-y:auto;
}
#animal-card.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;}
#animal-card .modal-close{
  position:absolute;top:14px;right:16px;z-index:2;
  background:rgba(10,20,14,.6);border-radius:50%;width:30px;height:30px;
}
.animal-photo{
  position:relative;height:250px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background-repeat:no-repeat;background-position:center;
  background-color:var(--forest-mid);
}
.animal-photo::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 62%,rgba(210,166,60,.14),transparent 70%);
}
.animal-frame{
  position:relative;background-repeat:no-repeat;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));
}
.animal-views{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;background:rgba(10,20,14,.72);border-radius:999px;padding:3px;
  backdrop-filter:blur(4px);
}
.animal-views button{
  border:none;background:transparent;color:var(--mist);font-family:inherit;
  font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 14px;border-radius:999px;cursor:pointer;transition:.2s;
}
.animal-views button.on{background:var(--gold);color:var(--ink);}
.animal-body{padding:26px 28px 28px;}
.animal-body h3{font-size:1.4rem;margin-top:10px;}
.animal-latin{color:var(--gold);font-style:italic;font-size:.85rem;margin-top:4px;}
.animal-fact{color:var(--mist);font-size:.9rem;line-height:1.65;margin:16px 0 22px;}
.animal-fact em{color:var(--cream);font-style:italic;}
#animal-tour{display:block;text-align:center;}

/* ---------- BOOKING FLOW MODAL ---------- */
#booking-modal{
  position:fixed;top:50%;left:50%;z-index:770;width:min(480px,92vw);
  transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.9,.3,1),opacity .35s ease,visibility .35s ease;
  background:var(--forest);border:1px solid rgba(210,166,60,.3);border-radius:var(--radius);
  padding:32px;max-height:88vh;overflow-y:auto;
}
#booking-modal.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;}
#booking-modal h3{font-size:1.3rem;margin-bottom:18px;padding-right:20px;}
.booking-steps{display:flex;gap:8px;margin-bottom:24px;}
.bstep{
  flex:1;text-align:center;padding:8px 4px;border-radius:999px;
  background:rgba(203,217,204,.08);color:var(--mist);
  font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.bstep.on{background:var(--gold);color:var(--ink);}
.booking-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px;}
.booking-photo{height:120px;border-radius:8px;background-size:cover;background-position:center;}
#booking-form .field{margin-bottom:16px;}
/* add-ons (kits + bottle) as tick rows inside the booking form. The ids/extra
   specificity are deliberate: `.field label` / `.field input` would otherwise
   restyle these rows as gold uppercase captions and 100%-wide text inputs. */
#bk-kits-list{display:flex;flex-direction:column;gap:2px;}
#booking-form .bk-kit{display:flex;align-items:center;gap:12px;margin:0;padding:9px 0;cursor:pointer;
  font-size:.92rem;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--cream);
  border-bottom:1px solid rgba(203,217,204,.1);}
#booking-form .bk-kit:last-child{border-bottom:0;}
#booking-form .bk-kit input{width:18px;height:18px;flex:none;padding:0;margin:0;border-radius:3px;
  accent-color:var(--gold);cursor:pointer;}
#booking-form .bk-kit-name{flex:1;}
#booking-form .bk-kit-price{color:var(--gold);font-weight:600;}
.booking-summary{border-top:1px solid rgba(203,217,204,.12);border-bottom:1px solid rgba(203,217,204,.12);margin:16px 0 20px;padding:14px 0;}

@media(prefers-reduced-motion:reduce){
  #wildlife-layer{display:none;}
}

@media(max-width:900px){
  header nav{display:none;}
  #mobile-nav{display:flex;}
  .nav-toggle{display:flex;}
  .offer-grid,.wild-grid,.tour-grid,.rooms-grid{grid-template-columns:1fr;}
  .near-grid,.contact-grid{grid-template-columns:1fr;}
  .merch-grid{grid-template-columns:repeat(2,1fr);}
  .review-grid{grid-template-columns:1fr;}
  .beds-grid{grid-template-columns:1fr;}
  .review-form-row{grid-template-columns:1fr;}
  .book-form{grid-template-columns:1fr;}
  section{padding:76px 6%;}
}
@media(max-width:520px){
  /* Kept at two columns even on small phones — one product per swipe read
     as an endless single-file feed. A narrower gap and card padding keep
     each card legible at half the phone's width instead of just shrinking
     the same layout. */
  .merch-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .merch-photo{height:96px;}
  .merch-card.has-photo .merch-photo{height:150px;}
  .merch-icon{font-size:1.7rem;}
  .merch-body{padding:12px;}
  .merch-body h3{font-size:.86rem;margin-bottom:3px;}
  .merch-body p{
    font-size:.74rem;margin-bottom:8px;
    /* Product copy varies a lot in length, and at two-per-row that made
       neighbouring cards mismatch height, one price sitting far lower
       than the other. Clamped to three lines so every card lands the
       same height. */
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;flex:0 1 auto;
  }
  .merch-views button{padding:4px 9px;font-size:.6rem;}
  .merch-price{font-size:1.05rem;margin-bottom:10px;}
  .merch-body .btn{padding:9px 10px;font-size:.78rem;}
}

/* =====================================================================
   SCROLL REVEALS  (js/reveal.js adds [data-reveal] + .is-revealed)
   Transform + opacity only, so these stay on the GPU.
   ===================================================================== */
[data-reveal]{
  opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
[data-reveal].is-revealed{opacity:1;transform:translate3d(0,0,0);}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* Sub-copy inside the scroll hero's final band (the old rule was scoped
   to .hero, which no longer exists on that markup). */
.hero-band-final .sub,.hero-static .sub{
  color:var(--mist);max-width:560px;font-size:1.06rem;line-height:1.65;margin-bottom:32px;
}

/* =====================================================================
   TRUST BAR — rating + rolling guest quotes, sits under the hero
   ===================================================================== */
.trust-bar{
  border-block:1px solid rgba(210,166,60,.18);
  background:linear-gradient(180deg,rgba(18,42,28,.55),rgba(11,26,18,.55));
  padding:26px 6%;
}
.trust-inner{
  max-width:1240px;margin:0 auto;
  display:grid;gap:22px 40px;align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .trust-inner{grid-template-columns:auto 1fr auto;}
}
.trust-score{display:flex;align-items:center;gap:14px;justify-content:center;}
.trust-stars{display:flex;gap:3px;color:var(--gold);font-size:1rem;line-height:1;}
.trust-score b{
  font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}
.trust-score .trust-count{
  display:block;color:var(--mist);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;margin-top:4px;
}
/* rolling quote */
.trust-quotes{position:relative;min-height:3.6em;text-align:center;}
@media (min-width:900px){.trust-quotes{text-align:left;padding-inline:28px;
  border-inline:1px solid rgba(203,217,204,.12);}}
.trust-quote{
  position:absolute;inset:0;opacity:0;transform:translate3d(0,8px,0);
  transition:opacity .6s ease,transform .6s ease;
}
.trust-quote.is-on{opacity:1;transform:translate3d(0,0,0);}
.trust-quote p{color:var(--cream);font-size:.92rem;line-height:1.5;text-wrap:pretty;}
.trust-quote span{
  display:block;color:var(--mist);font-size:.74rem;margin-top:6px;
  letter-spacing:.08em;text-transform:uppercase;
}
.trust-logos{
  display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap;
  color:var(--mist);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.trust-logos b{color:var(--cream);font-weight:600;letter-spacing:.06em;text-transform:none;font-size:.84rem;}

/* ---- motion ----
   The bar was the one still thing between two moving sections and it read
   as a dead strip. Three quiet, continuous movements fix that without
   competing with the intro: a sheen crossing the bar, the stars lighting
   in sequence, and the quote drifting as it changes. Nothing here is
   scroll-driven — it is ambient, so it is alive even when the reader
   stops. */
.trust-bar{position:relative;overflow:hidden;}
.trust-bar::after{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(210,166,60,.10) 45%,rgba(255,255,255,.06) 55%,transparent);
  animation:trustSheen 9s ease-in-out infinite;
}
@keyframes trustSheen{
  0%,58%  { transform:translate3d(0,0,0); }
  100%    { transform:translate3d(350%,0,0); }
}
/* each star lights a beat after the one before it, then the row rests */
.trust-stars span{
  display:inline-block;
  animation:starLift 4.6s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .13s);
}
.trust-stars span:nth-child(1){--i:0}
.trust-stars span:nth-child(2){--i:1}
.trust-stars span:nth-child(3){--i:2}
.trust-stars span:nth-child(4){--i:3}
.trust-stars span:nth-child(5){--i:4}
@keyframes starLift{
  0%,72%,100% { transform:translate3d(0,0,0) scale(1); filter:none; }
  80%         { transform:translate3d(0,-3px,0) scale(1.14);
                filter:drop-shadow(0 0 6px rgba(210,166,60,.7)); }
}
/* the score breathes very slightly so the number is not a dead weight */
.trust-score b{animation:trustPulse 6s ease-in-out infinite;}
@keyframes trustPulse{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.045); }
}
/* the outgoing quote leaves upward while the incoming one rises in */
.trust-quote{transform:translate3d(0,10px,0);}
.trust-quote.is-on{animation:quoteIn .8s cubic-bezier(.2,.7,.2,1) both;}
@keyframes quoteIn{
  from{ opacity:0; transform:translate3d(0,14px,0); }
  to  { opacity:1; transform:translate3d(0,0,0); }
}
.trust-logos b{
  transition:color .3s ease,transform .3s ease;
  display:inline-block;
  /* era la única pieza quieta de la barra — un brillo pasa por cada
     logo en secuencia, como ya hacen las estrellas de al lado */
  animation:logoGlow 7s ease-in-out infinite;
  animation-delay:calc(var(--li,0) * .6s);
}
.trust-logos b:nth-of-type(1){--li:0}
.trust-logos b:nth-of-type(2){--li:1}
.trust-logos b:nth-of-type(3){--li:2}
@keyframes logoGlow{
  0%,76%,100%{ opacity:.82; text-shadow:none; transform:translate3d(0,0,0); }
  88%{ opacity:1; text-shadow:0 0 10px rgba(210,166,60,.5); transform:translate3d(0,-2px,0); }
}
.trust-logos b:hover{color:var(--gold);transform:translate3d(0,-2px,0);animation-play-state:paused;}

@media (prefers-reduced-motion:reduce){
  .trust-quote{transition:none;animation:none;}
  .trust-bar::after,.trust-stars span,.trust-score b,.trust-logos b{animation:none;}
}

/* ---- availability, now under the rooms ---- */
.avail-head{max-width:1240px;margin:72px auto 18px;text-align:center;}
.avail-head h3{
  font-family:'Fraunces',serif;font-weight:400;font-size:var(--step-2);
  color:var(--cream);margin:0 0 6px;
}
.avail-head p{color:var(--mist);font-size:.92rem;margin:0;}

/* =====================================================================
   SPLASH INTRO — drone flyover
   The video sits behind the mark; both are inside the fixed #splash
   overlay that dissolves away (see hideSplash in js/main.js).
   ===================================================================== */
.splash-media{position:absolute;inset:0;overflow:hidden;z-index:0;
  background:url('../img/sendero.webp') center/cover no-repeat;}
.splash-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease;
  /* a slow push-in so even a still frame feels like flight */
  transform:scale(1.06);animation:splashDrift 7s ease-out forwards;
}
.splash-video.is-playing{opacity:1;}
@keyframes splashDrift{from{transform:scale(1.06);}to{transform:scale(1.14);}}
.splash-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 50% 50%, rgba(11,26,18,.25), rgba(11,26,18,.78) 78%),
    linear-gradient(180deg,rgba(11,26,18,.45),rgba(11,26,18,.72));
}
.splash-inner{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  transform:translateY(-6vh);
}
/* The mark holds back until the flight has established itself. */
#splash img{animation-delay:1.1s;}
#splash .splash-word{animation-delay:1.9s;}
#splash .splash-sub{animation-delay:2.5s;}
#splash .skip{
  background:none;border:none;font-family:inherit;cursor:pointer;z-index:2;
}
#splash .skip:hover{color:var(--cream);}
@media (prefers-reduced-motion:reduce){
  .splash-video{display:none;}
  #splash img,#splash .splash-word,#splash .splash-sub{animation-delay:0s;}
}

/* Page must not scroll behind the intro overlay. */
body.splash-open{overflow:hidden;}

/* Keyboard users need to see where they are — the site had no focus ring. */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}
/* Skip link for keyboard/screen-reader users. */
.skip-to-content{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--gold);color:var(--ink);padding:12px 20px;
  font-weight:600;font-size:.85rem;border-radius:0 0 8px 0;
}
.skip-to-content:focus{left:0;}

/* Photos settle out of a slight zoom as their card reveals. */
[data-reveal-media]{
  transform:scale(1.06);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal].is-revealed [data-reveal-media],
.is-revealed[data-reveal-media]{transform:scale(1);}
@media (prefers-reduced-motion:reduce){
  [data-reveal-media]{transform:none;transition:none;}
}

/* Cards lift on hover — the site had static cards everywhere. */
.wild-card,.room-card,.merch-card,.near-card,.review-card,.offer-cell{
  transition:transform .4s cubic-bezier(.22,1,.36,1),
             box-shadow .4s ease, border-color .3s ease, background .3s ease;
}
.wild-card:hover,.room-card:hover,.merch-card:hover,.near-card:hover{
  transform:translateY(-5px);
  /* tinted rather than black, so it reads as forest shade */
  box-shadow:0 18px 40px -12px rgba(4,12,8,.65);
}

/* =====================================================================
   SPLASH CAST — the residents introduce themselves during the intro
   Each sprite runs its real walk cycle off the same strip the ambient
   wildlife engine uses (steps() over a horizontal sheet).
   ===================================================================== */
.splash-cast{
  /* along the bottom edge, where a forest floor would be — these are
     ground animals, so a walking line reads better than a floating row */
  position:absolute;z-index:1;left:0;right:0;bottom:7vh;
  display:flex;justify-content:center;align-items:flex-end;gap:clamp(26px,7vw,90px);
  pointer-events:none;
}
.splash-cast-item{
  opacity:0;transform:translate3d(0,14px,0);
  animation:castIn .7s cubic-bezier(.22,1,.36,1) forwards;
  text-align:center;
}
.splash-cast-item:nth-child(1){animation-delay:2.5s;}
.splash-cast-item:nth-child(2){animation-delay:2.9s;}
.splash-cast-item:nth-child(3){animation-delay:3.3s;}
@keyframes castIn{to{opacity:1;transform:translate3d(0,0,0);}}
.splash-cast figcaption{
  color:var(--mist);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  margin-top:6px;opacity:.72;white-space:nowrap;
}
.splash-sprite{
  display:block;background-repeat:no-repeat;
  /* the walk cycle: step through the strip one frame at a time */
  animation:spriteWalk var(--cycle,1.3s) steps(var(--frames,30)) infinite;
}
@keyframes spriteWalk{to{background-position:calc(var(--sheet,0px) * -1) 0;}}

/* Sprite strips, scaled down to intro size. --scale keeps the frame box,
   the sheet width and the step count in proportion — change one and the
   others must follow or the cycle drifts. */
[data-cast="coati"] .splash-sprite{
  --frames:32; --cycle:1.333s; --sheet:3328px;
  width:104px;height:106px;background-image:url('../img/wildlife/coati-walk-right.webp');
  background-size:3328px 106px;
  filter:brightness(.72) saturate(.66) contrast(1.12) drop-shadow(0 6px 8px rgba(0,0,0,.45));
}
[data-cast="peccary"] .splash-sprite{
  --frames:18; --cycle:1.1s; --sheet:1980px;
  width:110px;height:62px;background-image:url('../img/wildlife/chancho-walk-right.webp');
  background-size:1980px 62px;
  filter:brightness(.70) saturate(.64) contrast(1.14) drop-shadow(0 6px 8px rgba(0,0,0,.45));
}
[data-cast="monkey"] .splash-sprite{
  --frames:59; --cycle:1.9s; --sheet:6254px;
  width:106px;height:52px;background-image:url('../img/wildlife/mono-walk-right.webp');
  background-size:6254px 52px;
  filter:brightness(.66) saturate(.64) contrast(1.16) drop-shadow(0 6px 10px rgba(0,0,0,.5));
}
@media (max-width:600px){
  .splash-cast{gap:14px;bottom:11vh;}
  .splash-cast figcaption{font-size:.5rem;letter-spacing:.1em;}
}
@media (prefers-reduced-motion:reduce){
  .splash-sprite{animation:none;}
  .splash-cast-item{animation-duration:.01s;}
}

/* Anchor links land under the fixed header without this — every section
   needs to stop short of it when it becomes the scroll target. */
section[id]{scroll-margin-top:84px;}
/* The hero owns the top of the page; no offset wanted there. */
#home{scroll-margin-top:0;}

/* Respect users who ask for less motion at the document level too. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* =====================================================================
   SCROLL PRIMITIVES  (driven by js/scroll.js — see its header)
   The engine only writes --p, --shift and --beat. Motion is authored
   here so each effect reads next to what it moves.
   ===================================================================== */
[data-scene]{position:relative;}
[data-scene-stage]{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
[data-parallax]{transform:translate3d(0,var(--shift,0px),0);will-change:transform;}

/* A beat holds its place in the layout and fades through its window. */
[data-beat]{
  opacity:0;transform:translate3d(0,24px,0);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
  will-change:opacity,transform;
}
[data-beat].is-beat{opacity:1;transform:translate3d(0,0,0);}

/* =====================================================================
   ATMOSPHERE — fog and particles
   Fog is three offset radial fields drifting at different speeds, which
   reads as depth without a video or a heavy image. Particles are a few
   dozen motes on two layers.
   ===================================================================== */
.fog{position:absolute;inset:-10% -10% -10% -10%;pointer-events:none;z-index:2;}
.fog-layer{
  position:absolute;inset:0;
  background-repeat:no-repeat;
  will-change:transform,opacity;
  /* Was opacity:0 with drift animations that only touched transform, so
     the fog was never once visible. It is the whole atmosphere of a
     cloud forest — it needs to render, but at a fifth of full strength:
     any denser and it greys out the photography behind it. */
  opacity:.2;
}
.fog-1{
  background:
    radial-gradient(62% 44% at 20% 66%, rgba(226,236,231,.62), transparent 72%),
    radial-gradient(54% 34% at 76% 46%, rgba(210,226,220,.48), transparent 74%),
    radial-gradient(46% 28% at 48% 84%, rgba(232,240,236,.42), transparent 76%);
  animation:fogDriftA 44s var(--ease-drift) infinite alternate;
}
.fog-2{
  background:
    radial-gradient(70% 40% at 62% 72%, rgba(238,244,240,.55), transparent 72%),
    radial-gradient(46% 30% at 16% 32%, rgba(206,222,214,.40), transparent 76%),
    radial-gradient(38% 24% at 88% 60%, rgba(224,236,230,.34), transparent 78%);
  animation:fogDriftB 62s var(--ease-drift) infinite alternate;
}
.fog-3{
  background:
    radial-gradient(90% 52% at 50% 92%, rgba(226,236,231,.60), transparent 74%),
    radial-gradient(60% 34% at 30% 18%, rgba(214,228,224,.30), transparent 78%);
  animation:fogDriftC 78s var(--ease-drift) infinite alternate;
}
@keyframes fogDriftA{from{transform:translate3d(-6%,2%,0) scale(1.05);}to{transform:translate3d(7%,-3%,0) scale(1.16);}}
@keyframes fogDriftB{from{transform:translate3d(5%,-2%,0) scale(1.12);}to{transform:translate3d(-7%,3%,0) scale(1.02);}}
@keyframes fogDriftC{from{transform:translate3d(-3%,3%,0) scale(1.08);}to{transform:translate3d(4%,-2%,0) scale(1.2);}}

.particles{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden;}
.particle{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(246,241,227,.85),rgba(246,241,227,0) 70%);
  animation:motePath var(--mote-dur,26s) linear var(--mote-delay,0s) infinite;
  will-change:transform,opacity;opacity:0;
}
@keyframes motePath{
  0%{opacity:0;transform:translate3d(0,0,0);}
  12%{opacity:var(--mote-peak,.55);}
  88%{opacity:var(--mote-peak,.55);}
  100%{opacity:0;transform:translate3d(var(--mote-x,30px),var(--mote-y,-140px),0);}
}
@media (prefers-reduced-motion:reduce){
  .fog-layer,.particle{animation:none;}
  .particle{opacity:.25;}
}

/* =====================================================================
   EDITORIAL LAYOUT  (Welcome, and any "big photo + column" section)
   Deliberately asymmetric: the photo runs past the text column so the
   page doesn't read as two equal boxes side by side.
   ===================================================================== */
.welcome{padding:var(--space-2xl) 6% var(--space-xl);background:var(--forest-deep);}
.editorial{
  max-width:1240px;margin:0 auto;
  display:grid;gap:var(--space-lg);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .editorial{grid-template-columns:1.15fr .85fr;gap:var(--space-xl);}
  .editorial-reverse .editorial-media{order:2;}
}
.editorial-media{position:relative;margin:0;}
.editorial-photo{
  aspect-ratio:4/5;background-size:cover;background-position:center;
  border-radius:2px;box-shadow:var(--shadow-lg);
  transform:translate3d(0,var(--shift,0px),0) scale(1.02);
  transition:transform var(--dur-cine) var(--ease-out);
}
@media (max-width:899px){.editorial-photo{aspect-ratio:4/3;}}
.editorial-caption{
  margin-top:var(--space-sm);color:var(--fog);opacity:.7;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
}
.kicker{
  color:var(--gold);text-transform:uppercase;letter-spacing:.24em;
  font-size:.7rem;font-weight:600;margin-bottom:var(--space-sm);
}
.editorial-copy h2{
  font-size:var(--step-4);line-height:1.04;letter-spacing:-.02em;
  text-wrap:balance;margin-bottom:var(--space-md);
}
.lede{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:var(--step-2);line-height:1.35;color:var(--cream);
  margin-bottom:var(--space-md);text-wrap:balance;
}
.editorial-copy p{
  color:var(--fog);font-size:var(--step-0);line-height:1.75;
  max-width:62ch;margin-bottom:var(--space-sm);text-wrap:pretty;
}
.stat-row{
  display:flex;gap:var(--space-lg);flex-wrap:wrap;
  margin-top:var(--space-lg);padding-top:var(--space-md);
  border-top:1px solid rgba(174,189,180,.16);
}
.stat b{
  display:block;font-family:'Fraunces',serif;font-size:var(--step-2);
  color:var(--cream);font-variant-numeric:tabular-nums;line-height:1;
}
.stat span{
  display:block;color:var(--fog);opacity:.75;margin-top:6px;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
}

/* =====================================================================
   SECTION INTRO — shared heading block for the editorial sections
   ===================================================================== */
.section-intro{
  max-width:820px;margin:0 auto var(--space-xl);
  text-align:center;padding:0 6vw;
}
.section-intro h2{
  font-size:var(--step-4);line-height:1.04;letter-spacing:-.02em;
  text-wrap:balance;margin-bottom:var(--space-md);
}
.section-intro .lede{margin:0 auto;max-width:46ch;}

/* =====================================================================
   04 — ROOMS  (editorial rows, not a card grid)
   ===================================================================== */
.rooms{padding:var(--space-2xl) 0 var(--space-xl);background:var(--forest-deep);}
.rooms .book-form{
  max-width:1080px;margin:0 auto var(--space-2xl);
}
.room-rows{
  max-width:1240px;margin:0 auto;padding:0 6vw;
  display:flex;flex-direction:column;gap:var(--space-2xl);
}
.room-row{
  display:grid;gap:var(--space-lg);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .room-row{grid-template-columns:1.1fr .9fr;gap:var(--space-xl);}
  .room-row-reverse .room-shot{order:2;}
}
.room-shot{position:relative;overflow:hidden;border-radius:2px;}
.room-img{
  aspect-ratio:16/11;background-size:cover;background-position:center;
  box-shadow:var(--shadow-lg);
  transform:translate3d(0,var(--shift,0px),0) scale(1.03);
  transition:transform 1.6s var(--ease-out);
}
.room-row:hover .room-img{transform:translate3d(0,var(--shift,0px),0) scale(1.08);}
.room-thumbs{
  position:absolute;left:var(--space-sm);bottom:var(--space-sm);z-index:2;
  display:flex;gap:6px;
}
.room-thumb{
  width:44px;height:32px;border-radius:3px;border:2px solid rgba(246,241,227,.5);
  background-size:cover;background-position:center;cursor:pointer;padding:0;
  opacity:.65;transition:opacity .2s,border-color .2s,transform .2s;
}
.room-thumb:hover{opacity:.9;transform:translateY(-1px);}
.room-thumb.is-on{opacity:1;border-color:var(--gold);}
@media (max-width:600px){
  .room-thumb{width:36px;height:26px;}
}
.room-flag{
  position:absolute;top:var(--space-sm);left:var(--space-sm);z-index:2;
  background:var(--gold);color:var(--ink);
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;
}
.room-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);
  padding-bottom:var(--space-sm);margin-bottom:var(--space-md);
  border-bottom:1px solid rgba(174,189,180,.18);
}
.room-head h3{font-size:var(--step-2);letter-spacing:-.01em;}
.room-rate b{
  font-family:'Fraunces',serif;font-size:var(--step-2);color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.room-rate span{color:var(--fog);font-size:.78rem;margin-left:6px;}
.room-blurb{
  color:var(--fog);font-size:var(--step-0);line-height:1.75;
  max-width:52ch;margin-bottom:var(--space-md);text-wrap:pretty;
}
.room-specs{list-style:none;margin-bottom:var(--space-lg);}
.room-specs li{
  color:var(--cream);font-size:.86rem;padding:9px 0 9px 22px;position:relative;
  border-bottom:1px solid rgba(174,189,180,.09);
}
.room-specs li::before{
  content:"";position:absolute;left:0;top:50%;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  transform:translateY(-50%);opacity:.75;
}
.room-actions{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;}
.room-alt-book{display:flex;gap:var(--space-sm);align-items:center;}
.room-alt-book a{
  color:var(--fog);font-size:.78rem;letter-spacing:.04em;
  padding-bottom:2px;border-bottom:1px solid rgba(174,189,180,.3);
  transition:color var(--dur-fast),border-color var(--dur-fast);
}
.room-alt-book a:hover{color:var(--cream);border-color:var(--gold);}

/* =====================================================================
   05 — MEET THE NEIGHBORS  (immersive scroll scene)
   Depth: canopy behind → animal midground → leaf litter in front.
   Each species gets its own motion (see [data-motion] below) — the doc
   is explicit that no two animals may share a generic animation.
   ===================================================================== */
.neighbors{height:520svh;background:var(--forest-deep);}
.neighbors-stage{background:var(--forest-deep);}
/* Sobre el "se traspasa el fondo" al hacer scroll rápido en computadora:
   --shift de esta capa vale como máximo 0.5 * 0.22 * 100 = 11px (ver
   scroll.js), así que el desplazamiento nunca alcanza a descubrir el
   borde con este margen. Lo que sí pasa es que Chrome, en scroll rápido,
   a veces no alcanza a rasterizar los tiles de una capa grande con
   filter y deja ver el fondo de atrás — por eso el fondo del stage es del
   mismo verde oscuro que el resto de la sección (antes era gris-carbón y
   se notaba como un parche de otro color). No se agranda la capa: eso
   solo sube el costo de raster. */
.neighbors-bg{
  position:absolute;inset:-10%;
  background:url('../img/bg-sunset-clouds.webp') center/cover no-repeat;
  filter:saturate(.72) brightness(.5) contrast(1.08);
  transform:translate3d(0,var(--shift,0px),0) scale(calc(1.1 + var(--p,0) * .1));
}
.neighbors-grade{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(110% 80% at 50% 44%, transparent 38%, rgba(6,14,10,.8) 100%),
    linear-gradient(180deg,rgba(8,16,12,.5),rgba(8,16,12,.34) 40%,rgba(8,16,12,.7));
}
.neighbors-litter{
  position:absolute;left:-6%;right:-6%;bottom:-8%;height:32%;z-index:6;
  pointer-events:none;filter:blur(3px);
  background:radial-gradient(80% 100% at 50% 100%, rgba(5,12,9,.95), transparent 70%);
  transform:translate3d(0,var(--shift,0px),0);
}

.neighbors-title{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 8vw;text-align:center;pointer-events:none;
}
.neighbors-title > *{max-width:900px;}
.neighbors-title h2{
  font-size:var(--step-4);line-height:1.04;letter-spacing:-.02em;
  margin-bottom:var(--space-md);text-shadow:0 4px 40px rgba(4,10,7,.7);
}
.neighbors-title .lede{max-width:44ch;margin:0 auto;}

/* ---- a resident taking the stage ---- */
.neighbor{
  position:absolute;inset:0;z-index:5;margin:0;
  padding:0 8vw;
  display:grid;gap:var(--space-lg);
  align-content:center;align-items:center;
  grid-template-columns:1fr;justify-items:center;text-align:center;
  pointer-events:none;
}
.neighbor.is-beat{pointer-events:auto;}
@media (min-width:900px){
  .neighbor{
    grid-template-columns:1fr 1fr;justify-items:start;text-align:left;
    gap:var(--space-xl);
    /* inset:0 already spans the stage; pad instead of max-width+auto so
       the two columns stay centred as a pair */
    padding-inline:max(8vw,calc((100% - 1240px) / 2));
  }
  .neighbor-right .neighbor-plate,
  .neighbor-right .neighbor-sprite{order:2;}
  .neighbor-right figcaption{order:1;}
}
.neighbor-plate{
  width:min(420px,80vw);aspect-ratio:4/5;
  background-size:cover;background-position:center;
  border-radius:2px;box-shadow:var(--shadow-lg);
  filter:saturate(.86) contrast(1.05);
}
.neighbor figcaption h3{font-size:var(--step-3);line-height:1.08;letter-spacing:-.015em;}
.neighbor-latin{
  color:var(--gold);font-style:italic;font-family:'Fraunces',serif;
  font-size:.92rem;margin:6px 0 var(--space-md);opacity:.9;
}
.neighbor figcaption p{
  color:var(--fog);font-size:var(--step-0);line-height:1.75;
  max-width:44ch;text-wrap:pretty;
}
.neighbor-sprite{
  display:flex;align-items:flex-end;justify-content:center;
  width:min(420px,80vw);height:min(300px,50vw);
}
.neighbor-sprite .splash-sprite{filter:drop-shadow(0 14px 22px rgba(0,0,0,.6));}
.neighbor-sprite[data-cast="monkey"] .splash-sprite{transform:scale(1.9);transform-origin:bottom center;}
.neighbor-sprite[data-cast="coati"]  .splash-sprite{transform:scale(1.7);transform-origin:bottom center;}

/* ---- per-species motion ----
   Each is layered ON TOP of the shared beat fade, and each is genuinely
   different in character: a glide reads as flight, a creep barely reads
   as movement at all, a hover is fast but goes nowhere. */

/* Quetzal — enters on a long lateral glide and settles. */
[data-motion="glide"] .neighbor-plate,[data-motion="glide"] .neighbor-sprite{
  animation:none;
  transform:translate3d(calc(-40px + var(--beat,0) * 40px),
                        calc(14px - var(--beat,0) * 14px),0)
            rotate(calc(-1.4deg + var(--beat,0) * 1.4deg));
  transition:transform 1.2s var(--ease-out);
}
/* Capuchin — short organic entrance from the side, then stillness. */
[data-motion="lateral"] .neighbor-sprite{
  transform:translate3d(calc(70px - var(--beat,0) * 70px),0,0);
  transition:transform 1s var(--ease-out);
}
/* Sloth — micro-movement only. Almost imperceptible, on purpose. */
[data-motion="creep"] .neighbor-plate,[data-motion="creep"] .neighbor-sprite{
  animation:slothCreep 26s var(--ease-drift) infinite alternate;
}
@keyframes slothCreep{
  from{transform:translate3d(0,0,0) rotate(-.35deg);}
  to{transform:translate3d(6px,-5px,0) rotate(.35deg);}
}
/* Hummingbird — fast, tight, goes nowhere. */
[data-motion="hover"] .neighbor-sprite-air{
  animation:hummingHover 1.5s var(--ease-in-out) infinite;
}
@keyframes hummingHover{
  0%,100%{transform:translate3d(0,0,0);}
  25%{transform:translate3d(4px,-7px,0);}
  50%{transform:translate3d(0,-3px,0);}
  75%{transform:translate3d(-4px,-8px,0);}
}
/* Coati — walks across as the scene closes. */
[data-motion="walk"] .neighbor-sprite{
  transform:translate3d(calc(-60px + var(--beat,0) * 120px),0,0);
  transition:transform 1.2s linear;
}

@media (max-width:899px){
  .neighbors{height:420svh;}
  .neighbor-plate{width:min(280px,68vw);}
  .neighbor-sprite{height:180px;}
  .neighbors-title h2{font-size:var(--step-3);}
}
@media (prefers-reduced-motion:reduce){
  /* Becomes a plain stacked list — no scene, nothing hidden. */
  .neighbors{height:auto;}
  .neighbors-stage{position:relative;height:auto;display:block;padding:var(--space-2xl) 0;}
  .neighbors-title,.neighbor{position:relative;margin-bottom:var(--space-2xl);}
  .neighbors-bg,.neighbors-litter{display:none;}
  [data-motion] .neighbor-plate,[data-motion] .neighbor-sprite{
    transform:none;animation:none;
  }
}

/* Hummingbird sprite — 45 frames, native 81×68. Scaled to 96px wide:
   45 × 96 = 4320px sheet, height 68 × (96/81) = 81px. Frame box, sheet
   width and step count must always stay in proportion or the cycle
   drifts against the strip. */
[data-cast="colibri"] .splash-sprite{
  --frames:45; --cycle:2.9s; --sheet:4320px;
  width:96px;height:81px;
  background-image:url('../img/wildlife/colibri-frente.webp');
  background-size:4320px 81px;
  filter:brightness(.95) saturate(.9) contrast(1.05) drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
/* Quetzal y perezoso animados en "Meet the neighbors" — mismas hojas de
   sprite que ya usa el motor ambiental (js/wildlife-extra.js), a pedido
   de Joshua: que los 5 vecinos se vean animados, no solo 3. */
[data-cast="quetzal"] .splash-sprite{
  --frames:13; --cycle:1.95s; --sheet:2860px;
  width:220px;height:238px;
  background-image:url('../img/wildlife/extra/quetzal.webp');
  background-size:2860px 238px;
  filter:brightness(.76) saturate(1.5) contrast(1.05) drop-shadow(0 10px 16px rgba(0,0,0,.4));
}
[data-cast="perezoso"] .splash-sprite{
  --frames:67; --cycle:4.653s; --sheet:17420px;
  width:260px;height:167px;
  background-image:url('../img/wildlife/extra/perezoso.webp');
  background-size:17420px 167px;
  filter:brightness(.78) saturate(.85) contrast(1.12) drop-shadow(0 10px 16px rgba(0,0,0,.4));
}

/* =====================================================================
   06 — TOURS  (three large experiences)
   ===================================================================== */
.tours{padding:var(--space-2xl) 0;background:var(--forest-deep);}
.tour-strip{
  max-width:1240px;margin:0 auto;padding:0 6vw;
  display:grid;gap:var(--space-lg);grid-template-columns:1fr;
}
@media (min-width:900px){.tour-strip{grid-template-columns:repeat(3,1fr);gap:var(--space-md);}}
.tour{
  position:relative;overflow:hidden;background:var(--charcoal-soft);
  display:flex;flex-direction:column;
  transition:transform var(--dur-mid) var(--ease-out);
}
.tour:hover{transform:translateY(-6px);}
.tour-media{position:relative;overflow:hidden;aspect-ratio:4/3;}
.tour-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.02);
  transition:transform 2s var(--ease-out);
}
.tour:hover .tour-img{transform:scale(1.12);}
.tour-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,16,12,.1),rgba(8,16,12,.72));
}
.tour-body{
  padding:var(--space-md);display:flex;flex-direction:column;flex:1;
}
.tour-meta{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:var(--space-sm);
}
.tour-meta span{
  color:var(--fog);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
}
.tour-meta b{
  font-family:'Fraunces',serif;color:var(--gold);font-size:var(--step-1);
  font-variant-numeric:tabular-nums;
}
.tour-body h3{font-size:var(--step-1);margin-bottom:var(--space-sm);letter-spacing:-.01em;}
.tour-body p{
  color:var(--fog);font-size:.9rem;line-height:1.7;flex:1;
  margin-bottom:var(--space-md);text-wrap:pretty;
}
/* Pinned to the bottom so the links form one clean line across the row
   regardless of how long each description runs. */
.tour-link{
  align-self:flex-start;color:var(--cream);font-size:.82rem;font-weight:600;
  letter-spacing:.04em;padding-bottom:3px;
  border-bottom:1px solid rgba(210,166,60,.5);
  transition:color var(--dur-fast),border-color var(--dur-fast);
}
.tour-link span{display:inline-block;transition:transform var(--dur-fast) var(--ease-out);}
.tour-link:hover{color:var(--gold);border-color:var(--gold);}
.tour-link:hover span{transform:translateX(4px);}

/* =====================================================================
   07 — STORIES  (3D review carousel)
   js/carousel.js writes --offset (signed position from the front card)
   and --abs; the transform below turns that into depth.
   ===================================================================== */
.stories{padding:var(--space-2xl) 0;background:var(--forest-deep);}
.carousel{
  max-width:1100px;margin:0 auto;padding:0 6vw;
}
.carousel-stage{
  position:relative;height:340px;
  perspective:1400px;
  display:flex;align-items:center;justify-content:center;
  touch-action:pan-y;cursor:grab;
}
.carousel-stage:active{cursor:grabbing;}
.story-card{
  position:absolute;width:min(560px,86vw);margin:0;
  background:linear-gradient(180deg,var(--charcoal-soft),var(--charcoal));
  border:1px solid rgba(174,189,180,.14);
  padding:var(--space-lg) var(--space-md);
  box-shadow:var(--shadow-md);
  /* Shallow rotation on purpose — elegant, not a spinning cube. */
  transform:
    translateX(calc(var(--offset,0) * 62px))
    translateZ(calc(var(--abs,0) * -190px))
    rotateY(calc(var(--offset,0) * -13deg));
  opacity:calc(1 - var(--abs,0) * .42);
  filter:blur(calc(var(--abs,0) * 1.1px));
  transition:transform var(--dur-slow) var(--ease-out),
             opacity var(--dur-slow) var(--ease-out),
             filter var(--dur-slow) var(--ease-out);
  will-change:transform,opacity;
}
.story-card[aria-hidden="true"]{pointer-events:none;}
.story-card.is-active{border-color:rgba(210,166,60,.4);}
.story-stars{color:var(--gold);letter-spacing:.22em;font-size:.86rem;margin-bottom:var(--space-md);}
.story-card blockquote{
  font-family:'Fraunces',serif;font-size:var(--step-1);font-weight:300;
  line-height:1.55;color:var(--cream);text-wrap:pretty;
  margin-bottom:var(--space-md);
}
.story-card figcaption b{display:block;color:var(--cream);font-size:.9rem;font-weight:600;}
.story-card figcaption span{
  display:block;color:var(--fog);opacity:.75;margin-top:3px;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
}
.carousel-controls{
  display:flex;align-items:center;justify-content:center;gap:var(--space-md);
  margin-top:var(--space-lg);
}
.carousel-btn{
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--cream);
  border:1px solid rgba(174,189,180,.28);font-size:1rem;font-family:inherit;
  transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
}
.carousel-btn:hover{background:rgba(246,241,227,.08);border-color:var(--gold);transform:translateY(-2px);}
.carousel-btn:active{transform:translateY(0) scale(.96);}
.carousel-dots{display:flex;gap:9px;}
.carousel-dot{
  width:7px;height:7px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:rgba(174,189,180,.32);
  transition:background var(--dur-fast),transform var(--dur-fast);
}
.carousel-dot.is-on{background:var(--gold);transform:scale(1.35);}
@media (max-width:600px){
  .carousel-stage{height:400px;}
  .story-card{transform:translateX(calc(var(--offset,0) * 30px)) translateZ(calc(var(--abs,0) * -240px));}
}
@media (prefers-reduced-motion:reduce){
  .story-card{transition:none;filter:none;}
}

/* =====================================================================
   08 — THE FOREST IS WAITING  (closing shot)
   ===================================================================== */
.finale{height:220svh;background:var(--forest-deep);}
.finale-stage{background:var(--charcoal);}
.finale-bg{
  position:absolute;inset:-8%;
  background:url('../img/bg-misty-ridge.webp') center/cover no-repeat;
  filter:saturate(.6) brightness(.4) contrast(1.1);
  transform:translate3d(0,var(--shift,0px),0) scale(calc(1.1 + var(--p,0) * .08));
}
.finale-grade{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(100% 70% at 50% 50%, transparent 30%, rgba(5,12,9,.85) 100%),
    linear-gradient(180deg,var(--forest-deep),rgba(8,16,12,.2) 30%,var(--forest-deep));
}
.finale-copy{position:relative;z-index:5;text-align:center;padding:0 6vw;
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.finale-copy h2{
  font-size:var(--step-5);line-height:.98;letter-spacing:-.025em;
  text-wrap:balance;text-shadow:0 6px 60px rgba(4,10,7,.7);
}
.finale-sub{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:var(--step-2);color:var(--fog);margin-top:var(--space-md);
}
.finale-cta{margin-top:var(--space-xl);}


/* =====================================================================
   09 — FOOTER  (minimal)
   ===================================================================== */
footer{
  background:var(--forest-deep);padding:var(--space-xl) 6% var(--space-lg);
  border-top:1px solid rgba(174,189,180,.12);
}
.foot-grid{
  max-width:1240px;margin:0 auto;
  display:grid;gap:var(--space-lg);grid-template-columns:1fr;
}
@media (min-width:900px){
  .foot-grid{grid-template-columns:1.2fr 1fr 1fr;gap:var(--space-xl);align-items:start;}
}
.fbrand{font-family:'Fraunces',serif;font-size:var(--step-1);margin-bottom:var(--space-sm);}
.foot-brand p{color:var(--fog);font-size:.84rem;line-height:1.7;opacity:.8;}
.foot-nav{display:flex;flex-direction:column;gap:10px;}
.foot-nav a{
  color:var(--fog);font-size:.86rem;width:fit-content;
  padding-bottom:2px;background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--dur-mid) var(--ease-out),color var(--dur-fast);
}
.foot-nav a:hover{color:var(--cream);background-size:100% 1px;}
.foot-reach{display:flex;flex-direction:column;gap:var(--space-sm);align-items:flex-start;}
.foot-reach > a{color:var(--cream);font-size:.86rem;border-bottom:1px solid rgba(210,166,60,.4);}
.fbottom{
  max-width:1240px;margin:var(--space-xl) auto 0;
  padding-top:var(--space-md);border-top:1px solid rgba(174,189,180,.1);
  display:flex;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap;
  color:var(--fog);opacity:.6;font-size:.76rem;
}
.fbottom span:first-child{font-family:'Fraunces',serif;font-style:italic;opacity:.9;}

/* =====================================================================
   MICROINTERACTIONS
   Small, physical, and consistent: every interactive thing should give
   the same kind of feedback so the page feels like one object.
   ===================================================================== */
.btn{transition:transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast),
                box-shadow var(--dur-fast),
                border-color var(--dur-fast);}
.btn:active{transform:translateY(1px) scale(.985);}   /* physical press */

/* Arrow CTAs nudge in the direction they point. */
.btn-arrow span{display:inline-block;transition:transform var(--dur-fast) var(--ease-out);}
.btn-arrow:hover span{transform:translateX(5px);}

/* Text links draw their underline instead of switching it on. */
nav a{
  padding-bottom:3px;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--dur-mid) var(--ease-out),color var(--dur-fast);
}
nav a:hover{background-size:100% 1px;}
nav a.active{color:var(--gold);}

/* Header condenses once the reader leaves the hero. */
header{transition:background var(--dur-mid),padding var(--dur-mid),border-color var(--dur-mid);
       border-bottom:1px solid transparent;}
header.scrolled{border-bottom-color:rgba(174,189,180,.1);}

@media (prefers-reduced-motion:reduce){
  .btn:active{transform:none;}
  nav a{background-size:0 1px !important;}
}

/* =====================================================================
   THE FOREST ENVIRONMENT
   ---------------------------------------------------------------------
   One continuous world behind the whole document. Fixed to the viewport,
   so the reader moves through it rather than past a series of pictures.
   Plates crossfade as the page is descended (js/env.js writes --env-*).

   This replaced per-section background photos. Each section having its
   own picture is precisely what made the site read as stacked panels —
   every boundary became a visible seam. Sections are now transparent and
   carry only local scrims for legibility.
   ===================================================================== */
#forest-env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--forest-deep);
  /* Its own clip. A fixed element is not clipped by an ancestor's
     overflow, so the oversized plate and fog layers inside would push the
     document sideways without this. */
  overflow:hidden;
}
.env-plate{
  position:absolute;inset:-6%;
  background-size:cover;background-position:center;
  opacity:0;
  /* graded so photography, not green paint, carries the colour (el color ya está horneado en img/plate-*.webp) */
  transform:scale(calc(1.06 + var(--env-drift,0) * .06));
  transition:opacity 1.6s var(--ease-in-out);
  will-change:opacity,transform;
}
.env-plate[data-plate="0"]{opacity:1;}
.env-fog{position:absolute;inset:-10%;opacity:.55;}
.env-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(130% 90% at 50% 40%, transparent 32%, rgba(5,12,9,.72) 100%),
    linear-gradient(180deg,rgba(8,16,12,.4),rgba(8,16,12,.26) 45%,rgba(8,16,12,.55));
}

/* Everything above the environment. */
/* Content sits above the environment.
   Only in-flow content is listed here on purpose. A blanket
   `body > *:not(#forest-env)` rule was used first and was a serious
   mistake: `:not(#id)` carries id-level specificity, so it outranked
   #splash, #site-header, #mobile-nav and every modal, forcing their
   position:fixed back to relative. Every overlay dropped into the
   document flow and pushed the page down. Never re-broaden this. */
body > section,
body > #home,
body > .practicals,
body > .frog-banner,
body > .review-form-wrap,
body > footer{
  position:relative;
  z-index:1;
}

/* ---------------------------------------------------------------------
   Sections now float on the environment instead of owning a background.
   A section only darkens what sits directly behind its own text, and the
   darkening fades out at both edges so no boundary is ever a hard line.
   ------------------------------------------------------------------- */
.env-section{
  position:relative;
  padding:var(--space-2xl) 6%;
  background:transparent;
}
.env-section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,19,13,0) 0%,
    rgba(9,19,13,.42) 18%,
    rgba(9,19,13,.5) 50%,
    rgba(9,19,13,.42) 82%,
    rgba(9,19,13,0) 100%);
}
.env-section-rich::before{
  background:linear-gradient(180deg,
    rgba(9,19,13,0) 0%,
    rgba(9,19,13,.55) 20%,
    rgba(9,19,13,.62) 50%,
    rgba(9,19,13,.55) 80%,
    rgba(9,19,13,0) 100%);
}
/* Scenes supply their own environment, so they must stay clear. */
.hero-scene,.enter-scene,.neighbors,.finale{background:transparent;}
.hero-stage,.enter-stage,.neighbors-stage,.finale-stage{background:transparent;}

/* =====================================================================
   PRACTICALITIES
   Useful information, deliberately quiet. It sits after the story and is
   given restrained presentation so it informs without competing with the
   cinematic run (spec §27, §45). Tighter rhythm, smaller type, no scenes.
   ===================================================================== */
.practicals{position:relative;}
.practicals .env-section{padding-block:var(--space-xl);}
.practicals .section-head h2,
.practicals h2{font-size:var(--step-2);letter-spacing:-.01em;}
.practicals .section-head p{font-size:.92rem;}
/* One continuous quiet field behind the whole practical block rather than
   a separate darkened panel per section — the seams are what made the
   page read as stacked boxes. */
.practicals::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,19,13,0), rgba(9,19,13,.62) 8%,
    rgba(9,19,13,.68) 92%, rgba(9,19,13,0));
}
.practicals .env-section::before{display:none;}

/* =====================================================================
   LET THE FOREST THROUGH
   ---------------------------------------------------------------------
   These sections were painted with an opaque forest-deep fill, which
   hid the continuous environment behind them completely — the page went
   back to reading as flat green panels. They are transparent now and
   carry only a soft veil, feathered to nothing at both edges so no
   boundary is ever a hard line and the photography stays visible.

   Any new section must follow the same rule: never fill a section with
   an opaque colour, or it punches a hole in the environment.
   ===================================================================== */
.welcome,.rooms,.tours,.stories{
  position:relative;
  background:transparent;
}
.welcome::before,.rooms::before,.tours::before,.stories::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,19,13,.72)  0%,
    rgba(9,19,13,.55) 14%,
    rgba(9,19,13,.62) 50%,
    rgba(9,19,13,.55) 86%,
    rgba(9,19,13,0)  100%);
}

/* Footer sits at the very bottom of the descent — it can settle, but it
   should still read as the forest floor rather than a solid slab. */
footer{
  background:linear-gradient(180deg,rgba(9,19,13,.55),rgba(9,19,13,.9));
}

/* Cards keep their own fill for legibility, but a touch of translucency
   lets the environment register behind them instead of reading as opaque
   tiles floating on paint. */
.room-card,.near-card,.contact-card,.merch-card,.review-card,
.tour,.story-card,.offer-cell{
  background-color:rgba(11,26,18,.72);
  backdrop-filter:blur(3px);
}
@supports not (backdrop-filter: blur(3px)){
  .room-card,.near-card,.contact-card,.merch-card,.review-card,
  .tour,.story-card,.offer-cell{background-color:rgba(11,26,18,.88);}
}

/* =====================================================================
   SCENES ARE FULL-BLEED
   ---------------------------------------------------------------------
   The generic `section{padding:104px 6%}` was being inherited by the
   scroll scenes, which pushed every sticky stage 104px down and 86px in
   and shrank it to 1267px on a 1440px screen — the hero looked
   permanently mis-framed, with the environment visible around its edges.
   A scene is a camera, not a content block: it must fill the viewport.
   ===================================================================== */
.hero-scene,.enter-scene,.neighbors,.finale{
  padding:0;
}
[data-scene-stage]{
  width:100%;
  /* svh so the stage matches the visible viewport on mobile, where the
     browser chrome changes height as you scroll */
  height:100svh;
}

/* =====================================================================
   EDITORIAL LAYOUT  (Welcome, and any "big photo + column" section)
   Deliberately asymmetric: the photo runs past the text column so the
   page doesn't read as two equal boxes side by side.
   ===================================================================== */
.welcome{padding:var(--space-2xl) 6% var(--space-xl);background:var(--forest-deep);}
.editorial{
  max-width:1240px;margin:0 auto;
  display:grid;gap:var(--space-lg);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .editorial{grid-template-columns:1.15fr .85fr;gap:var(--space-xl);}
  .editorial-reverse .editorial-media{order:2;}
}
.editorial-media{position:relative;margin:0;}
.editorial-photo{
  aspect-ratio:4/5;background-size:cover;background-position:center;
  border-radius:2px;box-shadow:var(--shadow-lg);
  transform:translate3d(0,var(--shift,0px),0) scale(1.02);
  transition:transform var(--dur-cine) var(--ease-out);
}
@media (max-width:899px){.editorial-photo{aspect-ratio:4/3;}}
.editorial-caption{
  margin-top:var(--space-sm);color:var(--fog);opacity:.7;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
}
.kicker{
  color:var(--gold);text-transform:uppercase;letter-spacing:.24em;
  font-size:.7rem;font-weight:600;margin-bottom:var(--space-sm);
}
.editorial-copy h2{
  font-size:var(--step-4);line-height:1.04;letter-spacing:-.02em;
  text-wrap:balance;margin-bottom:var(--space-md);
}
.lede{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:var(--step-2);line-height:1.35;color:var(--cream);
  margin-bottom:var(--space-md);text-wrap:balance;
}
.editorial-copy p{
  color:var(--fog);font-size:var(--step-0);line-height:1.75;
  max-width:62ch;margin-bottom:var(--space-sm);text-wrap:pretty;
}
.stat-row{
  display:flex;gap:var(--space-lg);flex-wrap:wrap;
  margin-top:var(--space-lg);padding-top:var(--space-md);
  border-top:1px solid rgba(174,189,180,.16);
}
.stat b{
  display:block;font-family:'Fraunces',serif;font-size:var(--step-2);
  color:var(--cream);font-variant-numeric:tabular-nums;line-height:1;
}
.stat span{
  display:block;color:var(--fog);opacity:.75;margin-top:6px;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
}

/* =====================================================================
   SECTION INTRO — shared heading block for the editorial sections
   ===================================================================== */
.section-intro{
  max-width:820px;margin:0 auto var(--space-xl);
  text-align:center;padding:0 6vw;
}
.section-intro h2{
  font-size:var(--step-4);line-height:1.04;letter-spacing:-.02em;
  text-wrap:balance;margin-bottom:var(--space-md);
}
.section-intro .lede{margin:0 auto;max-width:46ch;}

/* =====================================================================
   04 — ROOMS  (editorial rows, not a card grid)
   ===================================================================== */
.rooms{padding:var(--space-2xl) 0 var(--space-xl);background:var(--forest-deep);}
.rooms .book-form{
  max-width:1080px;margin:0 auto var(--space-2xl);
}
.room-rows{
  max-width:1240px;margin:0 auto;padding:0 6vw;
  display:flex;flex-direction:column;gap:var(--space-2xl);
}
.room-row{
  display:grid;gap:var(--space-lg);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .room-row{grid-template-columns:1.1fr .9fr;gap:var(--space-xl);}
  .room-row-reverse .room-shot{order:2;}
}
.room-shot{position:relative;overflow:hidden;border-radius:2px;}
.room-img{
  aspect-ratio:16/11;background-size:cover;background-position:center;
  box-shadow:var(--shadow-lg);
  transform:translate3d(0,var(--shift,0px),0) scale(1.03);
  transition:transform 1.6s var(--ease-out);
}
.room-row:hover .room-img{transform:translate3d(0,var(--shift,0px),0) scale(1.08);}
.room-thumbs{
  position:absolute;left:var(--space-sm);bottom:var(--space-sm);z-index:2;
  display:flex;gap:6px;
}
.room-thumb{
  width:44px;height:32px;border-radius:3px;border:2px solid rgba(246,241,227,.5);
  background-size:cover;background-position:center;cursor:pointer;padding:0;
  opacity:.65;transition:opacity .2s,border-color .2s,transform .2s;
}
.room-thumb:hover{opacity:.9;transform:translateY(-1px);}
.room-thumb.is-on{opacity:1;border-color:var(--gold);}
@media (max-width:600px){
  .room-thumb{width:36px;height:26px;}
}
.room-flag{
  position:absolute;top:var(--space-sm);left:var(--space-sm);z-index:2;
  background:var(--gold);color:var(--ink);
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;
}
.room-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);
  padding-bottom:var(--space-sm);margin-bottom:var(--space-md);
  border-bottom:1px solid rgba(174,189,180,.18);
}
.room-head h3{font-size:var(--step-2);letter-spacing:-.01em;}
.room-rate b{
  font-family:'Fraunces',serif;font-size:var(--step-2);color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.room-rate span{color:var(--fog);font-size:.78rem;margin-left:6px;}
.room-blurb{
  color:var(--fog);font-size:var(--step-0);line-height:1.75;
  max-width:52ch;margin-bottom:var(--space-md);text-wrap:pretty;
}
.room-specs{list-style:none;margin-bottom:var(--space-lg);}
.room-specs li{
  color:var(--cream);font-size:.86rem;padding:9px 0 9px 22px;position:relative;
  border-bottom:1px solid rgba(174,189,180,.09);
}
.room-specs li::before{
  content:"";position:absolute;left:0;top:50%;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  transform:translateY(-50%);opacity:.75;
}
.room-actions{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;}
.room-alt-book{display:flex;gap:var(--space-sm);align-items:center;}
.room-alt-book a{
  color:var(--fog);font-size:.78rem;letter-spacing:.04em;
  padding-bottom:2px;border-bottom:1px solid rgba(174,189,180,.3);
  transition:color var(--dur-fast),border-color var(--dur-fast);
}
.room-alt-book a:hover{color:var(--cream);border-color:var(--gold);}

/* =====================================================================
   05 — MEET THE NEIGHBORS  (immersive scroll scene)
   Depth: canopy behind → animal midground → leaf litter in front.
   Each species gets its own motion (see [data-motion] below) — the doc
   is explicit that no two animals may share a generic animation.
   ===================================================================== */
.neighbors{height:520svh;background:var(--forest-deep);}
.neighbors-stage{background:var(--forest-deep);}
/* Sobre el "se traspasa el fondo" al hacer scroll rápido en computadora:
   --shift de esta capa vale como máximo 0.5 * 0.22 * 100 = 11px (ver
   scroll.js), así que el desplazamiento nunca alcanza a descubrir el
   borde con este margen. Lo que sí pasa es que Chrome, en scroll rápido,
   a veces no alcanza a rasterizar los tiles de una capa grande con
   filter y deja ver el fondo de atrás — por eso el fondo del stage es del
   mismo verde oscuro que el resto de la sección (antes era gris-carbón y
   se notaba como un parche de otro color). No se agranda la capa: eso
   solo sube el costo de raster. */
.neighbors-bg{
  position:absolute;inset:-10%;
  background:url('../img/bg-sunset-clouds.webp') center/cover no-repeat;
  filter:saturate(.72) brightness(.5) contrast(1.08);
  transform:translate3d(0,var(--shift,0px),0) scale(calc(1.1 + var(--p,0) * .1));
}
.neighbors-grade{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(110% 80% at 50% 44%, transparent 38%, rgba(6,14,10,.8) 100%),
    linear-gradient(180deg,rgba(8,16,12,.5),rgba(8,16,12,.34) 40%,rgba(8,16,12,.7));
}
.neighbors-litter{
  position:absolute;left:-6%;right:-6%;bottom:-8%;height:32%;z-index:6;
  pointer-events:none;filter:blur(3px);
  background:radial-gradient(80% 100% at 50% 100%, rgba(5,12,9,.95), transparent 70%);
  transform:translate3d(0,var(--shift,0px),0);
}

.neighbors-title{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 8vw;text-align:center;pointer-events:none;
}
.neighbors-title > *{max-width:900px;}
.neighbors-title h2{
  font-size:var(--step-4);line-height:1.04;letter-spacing:-.02em;
  margin-bottom:var(--space-md);text-shadow:0 4px 40px rgba(4,10,7,.7);
}
.neighbors-title .lede{max-width:44ch;margin:0 auto;}

/* ---- a resident taking the stage ---- */
.neighbor{
  position:absolute;inset:0;z-index:5;margin:0;
  padding:0 8vw;
  display:grid;gap:var(--space-lg);
  align-content:center;align-items:center;
  grid-template-columns:1fr;justify-items:center;text-align:center;
  pointer-events:none;
}
.neighbor.is-beat{pointer-events:auto;}
@media (min-width:900px){
  .neighbor{
    grid-template-columns:1fr 1fr;justify-items:start;text-align:left;
    gap:var(--space-xl);
    /* inset:0 already spans the stage; pad instead of max-width+auto so
       the two columns stay centred as a pair */
    padding-inline:max(8vw,calc((100% - 1240px) / 2));
  }
  .neighbor-right .neighbor-plate,
  .neighbor-right .neighbor-sprite{order:2;}
  .neighbor-right figcaption{order:1;}
}
.neighbor-plate{
  width:min(420px,80vw);aspect-ratio:4/5;
  background-size:cover;background-position:center;
  border-radius:2px;box-shadow:var(--shadow-lg);
  filter:saturate(.86) contrast(1.05);
}
.neighbor figcaption h3{font-size:var(--step-3);line-height:1.08;letter-spacing:-.015em;}
.neighbor-latin{
  color:var(--gold);font-style:italic;font-family:'Fraunces',serif;
  font-size:.92rem;margin:6px 0 var(--space-md);opacity:.9;
}
.neighbor figcaption p{
  color:var(--fog);font-size:var(--step-0);line-height:1.75;
  max-width:44ch;text-wrap:pretty;
}
.neighbor-sprite{
  display:flex;align-items:flex-end;justify-content:center;
  width:min(420px,80vw);height:min(300px,50vw);
}
.neighbor-sprite .splash-sprite{filter:drop-shadow(0 14px 22px rgba(0,0,0,.6));}
.neighbor-sprite[data-cast="monkey"] .splash-sprite{transform:scale(1.9);transform-origin:bottom center;}
.neighbor-sprite[data-cast="coati"]  .splash-sprite{transform:scale(1.7);transform-origin:bottom center;}

/* ---- per-species motion ----
   Each is layered ON TOP of the shared beat fade, and each is genuinely
   different in character: a glide reads as flight, a creep barely reads
   as movement at all, a hover is fast but goes nowhere. */

/* Quetzal — enters on a long lateral glide and settles. */
[data-motion="glide"] .neighbor-plate,[data-motion="glide"] .neighbor-sprite{
  animation:none;
  transform:translate3d(calc(-40px + var(--beat,0) * 40px),
                        calc(14px - var(--beat,0) * 14px),0)
            rotate(calc(-1.4deg + var(--beat,0) * 1.4deg));
  transition:transform 1.2s var(--ease-out);
}
/* Capuchin — short organic entrance from the side, then stillness. */
[data-motion="lateral"] .neighbor-sprite{
  transform:translate3d(calc(70px - var(--beat,0) * 70px),0,0);
  transition:transform 1s var(--ease-out);
}
/* Sloth — micro-movement only. Almost imperceptible, on purpose. */
[data-motion="creep"] .neighbor-plate,[data-motion="creep"] .neighbor-sprite{
  animation:slothCreep 26s var(--ease-drift) infinite alternate;
}
@keyframes slothCreep{
  from{transform:translate3d(0,0,0) rotate(-.35deg);}
  to{transform:translate3d(6px,-5px,0) rotate(.35deg);}
}
/* Hummingbird — fast, tight, goes nowhere. */
[data-motion="hover"] .neighbor-sprite-air{
  animation:hummingHover 1.5s var(--ease-in-out) infinite;
}
@keyframes hummingHover{
  0%,100%{transform:translate3d(0,0,0);}
  25%{transform:translate3d(4px,-7px,0);}
  50%{transform:translate3d(0,-3px,0);}
  75%{transform:translate3d(-4px,-8px,0);}
}
/* Coati — walks across as the scene closes. */
[data-motion="walk"] .neighbor-sprite{
  transform:translate3d(calc(-60px + var(--beat,0) * 120px),0,0);
  transition:transform 1.2s linear;
}

@media (max-width:899px){
  .neighbors{height:420svh;}
  .neighbor-plate{width:min(280px,68vw);}
  .neighbor-sprite{height:180px;}
  .neighbors-title h2{font-size:var(--step-3);}
}
@media (prefers-reduced-motion:reduce){
  /* Becomes a plain stacked list — no scene, nothing hidden. */
  .neighbors{height:auto;}
  .neighbors-stage{position:relative;height:auto;display:block;padding:var(--space-2xl) 0;}
  .neighbors-title,.neighbor{position:relative;margin-bottom:var(--space-2xl);}
  .neighbors-bg,.neighbors-litter{display:none;}
  [data-motion] .neighbor-plate,[data-motion] .neighbor-sprite{
    transform:none;animation:none;
  }
}

/* Hummingbird sprite — 45 frames, native 81×68. Scaled to 96px wide:
   45 × 96 = 4320px sheet, height 68 × (96/81) = 81px. Frame box, sheet
   width and step count must always stay in proportion or the cycle
   drifts against the strip. */
[data-cast="colibri"] .splash-sprite{
  --frames:45; --cycle:2.9s; --sheet:4320px;
  width:96px;height:81px;
  background-image:url('../img/wildlife/colibri-frente.webp');
  background-size:4320px 81px;
  filter:brightness(.95) saturate(.9) contrast(1.05) drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
/* Quetzal y perezoso animados en "Meet the neighbors" — mismas hojas de
   sprite que ya usa el motor ambiental (js/wildlife-extra.js), a pedido
   de Joshua: que los 5 vecinos se vean animados, no solo 3. */
[data-cast="quetzal"] .splash-sprite{
  --frames:13; --cycle:1.95s; --sheet:2860px;
  width:220px;height:238px;
  background-image:url('../img/wildlife/extra/quetzal.webp');
  background-size:2860px 238px;
  filter:brightness(.76) saturate(1.5) contrast(1.05) drop-shadow(0 10px 16px rgba(0,0,0,.4));
}
[data-cast="perezoso"] .splash-sprite{
  --frames:67; --cycle:4.653s; --sheet:17420px;
  width:260px;height:167px;
  background-image:url('../img/wildlife/extra/perezoso.webp');
  background-size:17420px 167px;
  filter:brightness(.78) saturate(.85) contrast(1.12) drop-shadow(0 10px 16px rgba(0,0,0,.4));
}

/* =====================================================================
   06 — TOURS  (three large experiences)
   ===================================================================== */
.tours{padding:var(--space-2xl) 0;background:var(--forest-deep);}
.tour-strip{
  max-width:1240px;margin:0 auto;padding:0 6vw;
  display:grid;gap:var(--space-lg);grid-template-columns:1fr;
}
@media (min-width:900px){.tour-strip{grid-template-columns:repeat(3,1fr);gap:var(--space-md);}}
.tour{
  position:relative;overflow:hidden;background:var(--charcoal-soft);
  display:flex;flex-direction:column;
  transition:transform var(--dur-mid) var(--ease-out);
}
.tour:hover{transform:translateY(-6px);}
.tour-media{position:relative;overflow:hidden;aspect-ratio:4/3;}
.tour-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.02);
  transition:transform 2s var(--ease-out);
}
.tour:hover .tour-img{transform:scale(1.12);}
.tour-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,16,12,.1),rgba(8,16,12,.72));
}
.tour-body{
  padding:var(--space-md);display:flex;flex-direction:column;flex:1;
}
.tour-meta{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:var(--space-sm);
}
.tour-meta span{
  color:var(--fog);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
}
.tour-meta b{
  font-family:'Fraunces',serif;color:var(--gold);font-size:var(--step-1);
  font-variant-numeric:tabular-nums;
}
.tour-body h3{font-size:var(--step-1);margin-bottom:var(--space-sm);letter-spacing:-.01em;}
.tour-body p{
  color:var(--fog);font-size:.9rem;line-height:1.7;flex:1;
  margin-bottom:var(--space-md);text-wrap:pretty;
}
/* Pinned to the bottom so the links form one clean line across the row
   regardless of how long each description runs. */
.tour-link{
  align-self:flex-start;color:var(--cream);font-size:.82rem;font-weight:600;
  letter-spacing:.04em;padding-bottom:3px;
  border-bottom:1px solid rgba(210,166,60,.5);
  transition:color var(--dur-fast),border-color var(--dur-fast);
}
.tour-link span{display:inline-block;transition:transform var(--dur-fast) var(--ease-out);}
.tour-link:hover{color:var(--gold);border-color:var(--gold);}
.tour-link:hover span{transform:translateX(4px);}

/* =====================================================================
   07 — STORIES  (3D review carousel)
   js/carousel.js writes --offset (signed position from the front card)
   and --abs; the transform below turns that into depth.
   ===================================================================== */
.stories{padding:var(--space-2xl) 0;background:var(--forest-deep);}
.carousel{
  max-width:1100px;margin:0 auto;padding:0 6vw;
}
.carousel-stage{
  position:relative;height:340px;
  perspective:1400px;
  display:flex;align-items:center;justify-content:center;
  touch-action:pan-y;cursor:grab;
}
.carousel-stage:active{cursor:grabbing;}
.story-card{
  position:absolute;width:min(560px,86vw);margin:0;
  background:linear-gradient(180deg,var(--charcoal-soft),var(--charcoal));
  border:1px solid rgba(174,189,180,.14);
  padding:var(--space-lg) var(--space-md);
  box-shadow:var(--shadow-md);
  /* Shallow rotation on purpose — elegant, not a spinning cube. */
  transform:
    translateX(calc(var(--offset,0) * 62px))
    translateZ(calc(var(--abs,0) * -190px))
    rotateY(calc(var(--offset,0) * -13deg));
  opacity:calc(1 - var(--abs,0) * .42);
  filter:blur(calc(var(--abs,0) * 1.1px));
  transition:transform var(--dur-slow) var(--ease-out),
             opacity var(--dur-slow) var(--ease-out),
             filter var(--dur-slow) var(--ease-out);
  will-change:transform,opacity;
}
.story-card[aria-hidden="true"]{pointer-events:none;}
.story-card.is-active{border-color:rgba(210,166,60,.4);}
.story-stars{color:var(--gold);letter-spacing:.22em;font-size:.86rem;margin-bottom:var(--space-md);}
.story-card blockquote{
  font-family:'Fraunces',serif;font-size:var(--step-1);font-weight:300;
  line-height:1.55;color:var(--cream);text-wrap:pretty;
  margin-bottom:var(--space-md);
}
.story-card figcaption b{display:block;color:var(--cream);font-size:.9rem;font-weight:600;}
.story-card figcaption span{
  display:block;color:var(--fog);opacity:.75;margin-top:3px;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
}
.carousel-controls{
  display:flex;align-items:center;justify-content:center;gap:var(--space-md);
  margin-top:var(--space-lg);
}
.carousel-btn{
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--cream);
  border:1px solid rgba(174,189,180,.28);font-size:1rem;font-family:inherit;
  transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
}
.carousel-btn:hover{background:rgba(246,241,227,.08);border-color:var(--gold);transform:translateY(-2px);}
.carousel-btn:active{transform:translateY(0) scale(.96);}
.carousel-dots{display:flex;gap:9px;}
.carousel-dot{
  width:7px;height:7px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:rgba(174,189,180,.32);
  transition:background var(--dur-fast),transform var(--dur-fast);
}
.carousel-dot.is-on{background:var(--gold);transform:scale(1.35);}
@media (max-width:600px){
  .carousel-stage{height:400px;}
  .story-card{transform:translateX(calc(var(--offset,0) * 30px)) translateZ(calc(var(--abs,0) * -240px));}
}
@media (prefers-reduced-motion:reduce){
  .story-card{transition:none;filter:none;}
}

/* =====================================================================
   08 — THE FOREST IS WAITING  (closing shot)
   ===================================================================== */
.finale{height:220svh;background:var(--forest-deep);}
.finale-stage{background:var(--charcoal);}
.finale-bg{
  position:absolute;inset:-8%;
  background:url('../img/bg-misty-ridge.webp') center/cover no-repeat;
  filter:saturate(.6) brightness(.4) contrast(1.1);
  transform:translate3d(0,var(--shift,0px),0) scale(calc(1.1 + var(--p,0) * .08));
}
.finale-grade{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(100% 70% at 50% 50%, transparent 30%, rgba(5,12,9,.85) 100%),
    linear-gradient(180deg,var(--forest-deep),rgba(8,16,12,.2) 30%,var(--forest-deep));
}
.finale-copy{position:relative;z-index:5;text-align:center;padding:0 6vw;
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.finale-copy h2{
  font-size:var(--step-5);line-height:.98;letter-spacing:-.025em;
  text-wrap:balance;text-shadow:0 6px 60px rgba(4,10,7,.7);
}
.finale-sub{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:var(--step-2);color:var(--fog);margin-top:var(--space-md);
}
.finale-cta{margin-top:var(--space-xl);}


/* =====================================================================
   09 — FOOTER  (minimal)
   ===================================================================== */
footer{
  background:var(--forest-deep);padding:var(--space-xl) 6% var(--space-lg);
  border-top:1px solid rgba(174,189,180,.12);
}
.foot-grid{
  max-width:1240px;margin:0 auto;
  display:grid;gap:var(--space-lg);grid-template-columns:1fr;
}
@media (min-width:900px){
  .foot-grid{grid-template-columns:1.2fr 1fr 1fr;gap:var(--space-xl);align-items:start;}
}
.fbrand{font-family:'Fraunces',serif;font-size:var(--step-1);margin-bottom:var(--space-sm);}
.foot-brand p{color:var(--fog);font-size:.84rem;line-height:1.7;opacity:.8;}
.foot-nav{display:flex;flex-direction:column;gap:10px;}
.foot-nav a{
  color:var(--fog);font-size:.86rem;width:fit-content;
  padding-bottom:2px;background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--dur-mid) var(--ease-out),color var(--dur-fast);
}
.foot-nav a:hover{color:var(--cream);background-size:100% 1px;}
.foot-reach{display:flex;flex-direction:column;gap:var(--space-sm);align-items:flex-start;}
.foot-reach > a{color:var(--cream);font-size:.86rem;border-bottom:1px solid rgba(210,166,60,.4);}
.fbottom{
  max-width:1240px;margin:var(--space-xl) auto 0;
  padding-top:var(--space-md);border-top:1px solid rgba(174,189,180,.1);
  display:flex;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap;
  color:var(--fog);opacity:.6;font-size:.76rem;
}
.fbottom span:first-child{font-family:'Fraunces',serif;font-style:italic;opacity:.9;}

/* =====================================================================
   MICROINTERACTIONS
   Small, physical, and consistent: every interactive thing should give
   the same kind of feedback so the page feels like one object.
   ===================================================================== */
.btn{transition:transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast),
                box-shadow var(--dur-fast),
                border-color var(--dur-fast);}
.btn:active{transform:translateY(1px) scale(.985);}   /* physical press */

/* Arrow CTAs nudge in the direction they point. */
.btn-arrow span{display:inline-block;transition:transform var(--dur-fast) var(--ease-out);}
.btn-arrow:hover span{transform:translateX(5px);}

/* Text links draw their underline instead of switching it on. */
nav a{
  padding-bottom:3px;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--dur-mid) var(--ease-out),color var(--dur-fast);
}
nav a:hover{background-size:100% 1px;}
nav a.active{color:var(--gold);}

/* Header condenses once the reader leaves the hero. */
header{transition:background var(--dur-mid),padding var(--dur-mid),border-color var(--dur-mid);
       border-bottom:1px solid transparent;}
header.scrolled{border-bottom-color:rgba(174,189,180,.1);}

@media (prefers-reduced-motion:reduce){
  .btn:active{transform:none;}
  nav a{background-size:0 1px !important;}
}

/* =====================================================================
   THE FOREST ENVIRONMENT
   ---------------------------------------------------------------------
   One continuous world behind the whole document. Fixed to the viewport,
   so the reader moves through it rather than past a series of pictures.
   Plates crossfade as the page is descended (js/env.js writes --env-*).

   This replaced per-section background photos. Each section having its
   own picture is precisely what made the site read as stacked panels —
   every boundary became a visible seam. Sections are now transparent and
   carry only local scrims for legibility.
   ===================================================================== */
#forest-env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--forest-deep);
  /* Its own clip. A fixed element is not clipped by an ancestor's
     overflow, so the oversized plate and fog layers inside would push the
     document sideways without this. */
  overflow:hidden;
}
.env-plate{
  position:absolute;inset:-6%;
  background-size:cover;background-position:center;
  opacity:0;
  /* graded so photography, not green paint, carries the colour (el color ya está horneado en img/plate-*.webp) */
  transform:scale(calc(1.06 + var(--env-drift,0) * .06));
  transition:opacity 1.6s var(--ease-in-out);
  will-change:opacity,transform;
}
.env-plate[data-plate="0"]{opacity:1;}
.env-fog{position:absolute;inset:-10%;opacity:.55;}
.env-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(130% 90% at 50% 40%, transparent 32%, rgba(5,12,9,.72) 100%),
    linear-gradient(180deg,rgba(8,16,12,.4),rgba(8,16,12,.26) 45%,rgba(8,16,12,.55));
}

/* Everything above the environment. */
/* Content sits above the environment.
   Only in-flow content is listed here on purpose. A blanket
   `body > *:not(#forest-env)` rule was used first and was a serious
   mistake: `:not(#id)` carries id-level specificity, so it outranked
   #splash, #site-header, #mobile-nav and every modal, forcing their
   position:fixed back to relative. Every overlay dropped into the
   document flow and pushed the page down. Never re-broaden this. */
body > section,
body > #home,
body > .practicals,
body > .frog-banner,
body > .review-form-wrap,
body > footer{
  position:relative;
  z-index:1;
}

/* ---------------------------------------------------------------------
   Sections now float on the environment instead of owning a background.
   A section only darkens what sits directly behind its own text, and the
   darkening fades out at both edges so no boundary is ever a hard line.
   ------------------------------------------------------------------- */
.env-section{
  position:relative;
  padding:var(--space-2xl) 6%;
  background:transparent;
}
.env-section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,19,13,0) 0%,
    rgba(9,19,13,.42) 18%,
    rgba(9,19,13,.5) 50%,
    rgba(9,19,13,.42) 82%,
    rgba(9,19,13,0) 100%);
}
.env-section-rich::before{
  background:linear-gradient(180deg,
    rgba(9,19,13,0) 0%,
    rgba(9,19,13,.55) 20%,
    rgba(9,19,13,.62) 50%,
    rgba(9,19,13,.55) 80%,
    rgba(9,19,13,0) 100%);
}
/* Scenes supply their own environment, so they must stay clear. */
.hero-scene,.enter-scene,.neighbors,.finale{background:transparent;}
.hero-stage,.enter-stage,.neighbors-stage,.finale-stage{background:transparent;}

/* =====================================================================
   PRACTICALITIES
   Useful information, deliberately quiet. It sits after the story and is
   given restrained presentation so it informs without competing with the
   cinematic run (spec §27, §45). Tighter rhythm, smaller type, no scenes.
   ===================================================================== */
.practicals{position:relative;}
.practicals .env-section{padding-block:var(--space-xl);}
.practicals .section-head h2,
.practicals h2{font-size:var(--step-2);letter-spacing:-.01em;}
.practicals .section-head p{font-size:.92rem;}
/* One continuous quiet field behind the whole practical block rather than
   a separate darkened panel per section — the seams are what made the
   page read as stacked boxes. */
.practicals::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,19,13,0), rgba(9,19,13,.62) 8%,
    rgba(9,19,13,.68) 92%, rgba(9,19,13,0));
}
.practicals .env-section::before{display:none;}

/* =====================================================================
   LET THE FOREST THROUGH
   ---------------------------------------------------------------------
   These sections were painted with an opaque forest-deep fill, which
   hid the continuous environment behind them completely — the page went
   back to reading as flat green panels. They are transparent now and
   carry only a soft veil, feathered to nothing at both edges so no
   boundary is ever a hard line and the photography stays visible.

   Any new section must follow the same rule: never fill a section with
   an opaque colour, or it punches a hole in the environment.
   ===================================================================== */
.welcome,.rooms,.tours,.stories{
  position:relative;
  background:transparent;
}
.welcome::before,.rooms::before,.tours::before,.stories::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,19,13,.72)  0%,
    rgba(9,19,13,.55) 14%,
    rgba(9,19,13,.62) 50%,
    rgba(9,19,13,.55) 86%,
    rgba(9,19,13,0)  100%);
}

/* Footer sits at the very bottom of the descent — it can settle, but it
   should still read as the forest floor rather than a solid slab. */
footer{
  background:linear-gradient(180deg,rgba(9,19,13,.55),rgba(9,19,13,.9));
}

/* Cards keep their own fill for legibility, but a touch of translucency
   lets the environment register behind them instead of reading as opaque
   tiles floating on paint. */
.room-card,.near-card,.contact-card,.merch-card,.review-card,
.tour,.story-card,.offer-cell{
  background-color:rgba(11,26,18,.72);
  backdrop-filter:blur(3px);
}
@supports not (backdrop-filter: blur(3px)){
  .room-card,.near-card,.contact-card,.merch-card,.review-card,
  .tour,.story-card,.offer-cell{background-color:rgba(11,26,18,.88);}
}

/* =====================================================================
   SCENES ARE FULL-BLEED
   ---------------------------------------------------------------------
   The generic `section{padding:104px 6%}` was being inherited by the
   scroll scenes, which pushed every sticky stage 104px down and 86px in
   and shrank it to 1267px on a 1440px screen — the hero looked
   permanently mis-framed, with the environment visible around its edges.
   A scene is a camera, not a content block: it must fill the viewport.
   ===================================================================== */
.hero-scene,.enter-scene,.neighbors,.finale{
  padding:0;
}
[data-scene-stage]{
  width:100%;
  /* svh so the stage matches the visible viewport on mobile, where the
     browser chrome changes height as you scroll */
  height:100svh;
}

/* =====================================================================
   01 — SCROLL INTRO
   ---------------------------------------------------------------------
   Five drone clips scrubbed by scroll. Restyled onto the site's own
   tokens rather than the drop-in's palette, so the intro belongs to the
   same page as everything below it.

   GEOMETRY IS LOad-BEARING: .stage must be taller than .stage-sticky.
   The difference between them is the scroll travel that becomes the
   video's timeline. Set them to the same height and the travel is zero,
   the progress calculation divides by nothing, and the clip jumps from
   first frame to last instead of scrubbing.
   ===================================================================== */
.intro{position:relative;z-index:1;}
.stage{
  position:relative;
  height:200svh;          /* 100svh of scroll travel per clip */
  padding:0;              /* never inherit the generic section padding */
}
.stage-sticky{
  position:sticky;top:0;
  height:100svh;width:100%;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:0;transition:opacity .6s var(--ease-out);
  /* graded to sit with the rest of the site's photography */
  filter:saturate(.78) contrast(1.02) brightness(.62);
}
.stage video.loaded{opacity:1;}

/* Legibility veil. Darker top and bottom, clearer through the middle, so
   the footage still reads while the type stays solid on it. */
.stage-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,19,14,.62) 0%,
    rgba(9,19,14,.22) 38%,
    rgba(9,19,14,.34) 62%,
    rgba(7,15,11,.78) 100%);
}
.stage-text{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:0 8vw;text-align:center;
  pointer-events:none;
}
.stage-text > *{pointer-events:auto;}
.stage-text h2{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:var(--step-4);line-height:1.12;letter-spacing:-.015em;
  color:var(--cream);max-width:18ch;text-wrap:balance;
  text-shadow:0 4px 40px rgba(4,10,7,.72);
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.stage-text h2.visible{opacity:1;transform:translate3d(0,0,0);}

.intro-cue{
  position:fixed;left:50%;bottom:4svh;z-index:3;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:opacity .6s var(--ease-out);
}
.intro-cue.is-gone{opacity:0;pointer-events:none;}
.intro-cue-rail{
  width:1px;height:52px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(246,241,227,0),rgba(246,241,227,.45));
}
.intro-cue-rail::after{
  content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:linear-gradient(180deg,transparent,var(--gold));
  animation:cueRun 2.6s var(--ease-in-out) infinite;
}
.intro-cue-word{
  color:rgba(246,241,227,.5);font-size:.6rem;
  letter-spacing:.28em;text-transform:uppercase;
}

@media (max-width:899px){
  /* Shorter travel so the intro doesn't become an endurance test on a
     phone, and the type steps down a size. */
  .stage{height:170svh;}
  .stage-text h2{font-size:var(--step-3);}
}

@media (prefers-reduced-motion:reduce){
  /* No scrubbing: each clip shows one held frame and the copy is simply
     present. The story survives, the motion does not. */
  .stage{height:100svh;}
  .stage-sticky{position:relative;}
  .intro-cue-rail::after{animation:none;}
}

/* =====================================================================
   01 — SCROLL INTRO  (one continuous scene)
   ---------------------------------------------------------------------
   A single sticky frame holds for the whole intro while five clips
   crossfade inside it. There is deliberately no per-clip sticky element:
   pinning and unpinning between clips is what made the earlier version
   feel like sliding between blocks.

   Geometry: the track is 600svh and the frame is 100svh, so there is
   500svh of travel — 100svh per clip across five clips.
   ===================================================================== */
.intro{
  position:relative;z-index:1;
  /* The pace that read best: long enough to see the movement, short
     enough that it never feels stalled. A longer track was tried and
     made the scrubbing feel sluggish rather than cinematic. */
  height:600svh;
  padding:0;                     /* never inherit the generic section padding */
}
.intro-stage{
  position:sticky;top:0;
  height:100svh;width:100%;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}

/* All five clips occupy the same frame; only opacity separates them. */
.intro-film{position:absolute;inset:0;}
.stage-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  /* No CSS transition here on purpose — js/intro.js writes opacity every
     frame from scroll position. A transition would fight it and make the
     handover lag behind the reader's finger. */
  filter:saturate(.78) contrast(1.02) brightness(.62);
  will-change:opacity;
}

.stage-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  /* The last stop resolves to the page's own colour rather than a dark
     tint. When the sticky frame releases at the end of the intro, its
     bottom edge meets the page — if the two tones differ at all, that
     edge reads as a hard line and the intro looks like a block sitting
     on top of the site. Matching them makes the release invisible. */
  background:linear-gradient(180deg,
    rgba(9,19,14,.60) 0%,
    rgba(9,19,14,.20) 38%,
    rgba(9,19,14,.34) 62%,
    rgba(9,19,14,.80) 88%,
    var(--forest-deep) 100%);
}

/* A short run of the page colour under the intro, so whatever follows
   emerges out of the same darkness the intro ends in instead of starting
   against a different tone. */
.intro::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22svh;
  z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,26,18,0),var(--forest-deep));
}
/* Fog at a fifth of full strength. It should suggest damp air over the
   canopy, not sit between the viewer and the footage — the drone shot is
   the point and the mist was starting to grey it out. */
.intro-fog{position:absolute;inset:-8%;z-index:3;pointer-events:none;opacity:.2;}

/* ---- copy ----
   Every line sits in the same place and crossfades, so the words change
   without the frame ever moving. */
.intro-copy{position:absolute;inset:0;z-index:4;pointer-events:none;}
.intro-line{
  /* Block, not flex. As a flex container the <br> and the gold <span>
     became flex items and were laid out side by side in a row, which
     scrambled the line ("New beds / year / every"). Centred with a
     translate instead so the text stays normal inline flow. */
  position:absolute;top:50%;left:0;right:0;
  margin:0;padding:0 8vw;text-align:center;
  font-family:'Fraunces',serif;font-weight:300;
  font-size:var(--step-4);line-height:1.14;letter-spacing:-.015em;
  color:var(--cream);text-wrap:balance;
  text-shadow:0 4px 40px rgba(4,10,7,.72);
  opacity:0;
  transform:translate3d(0,calc(-50% + var(--rise,0) * 22px),0);
  will-change:opacity,transform;
}

/* ---- the arrival ---- */
.intro-arrival{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 6vw;text-align:center;
  opacity:0;pointer-events:none;
}
.intro-arrival.is-on{pointer-events:auto;}
.intro-mark{
  font-size:var(--step-5);line-height:.94;font-weight:700;letter-spacing:-.02em;
  text-shadow:0 6px 50px rgba(4,10,7,.6);
}
.intro-arrival .badges{margin:var(--space-md) 0 0;}
.intro-sub{
  color:var(--fog);font-size:var(--step-0);line-height:1.7;
  max-width:52ch;margin:var(--space-md) auto 0;text-wrap:pretty;
  text-shadow:0 2px 20px rgba(4,10,7,.7);
}
.intro-ctas{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  margin-top:var(--space-lg);
}

/* ---- scroll cue ---- */
.intro-cue{
  position:absolute;left:50%;bottom:4svh;z-index:6;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:opacity .6s var(--ease-out);
}
.intro-cue.is-gone{opacity:0;}
.intro-cue-rail{
  width:1px;height:52px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(246,241,227,0),rgba(246,241,227,.45));
}
.intro-cue-rail::after{
  content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:linear-gradient(180deg,transparent,var(--gold));
  animation:cueRun 2.6s var(--ease-in-out) infinite;
}
.intro-cue-word{
  color:rgba(246,241,227,.5);font-size:.6rem;
  letter-spacing:.28em;text-transform:uppercase;
}

@media (max-width:899px){
  .intro{height:500svh;}          /* a little less scrolling on a phone */
  .intro-line{font-size:var(--step-3);}
}
@media (prefers-reduced-motion:reduce){
  /* No scrubbing and no pinning: one held frame, the copy simply present. */
  .intro{height:auto;}
  .intro-stage{position:relative;height:100svh;}
  .stage-video[data-clip="0"]{opacity:1;}
  .intro-line[data-line="3"]{opacity:0;}
  .intro-arrival{opacity:1;position:relative;pointer-events:auto;}
  .intro-cue-rail::after{animation:none;}
}

/* =====================================================================
   INTRO — GOLD KEYWORDS
   One word per line is picked out and given a slow shimmer, so the eye
   lands on the promise rather than reading the whole line evenly.
   ===================================================================== */
.glint{
  color:var(--gold);
  text-shadow:0 0 26px rgba(210,166,60,.45);
  animation:glint 3.4s var(--ease-in-out) infinite;
}
@keyframes glint{
  0%,100%{ text-shadow:0 0 18px rgba(210,166,60,.32); color:var(--gold); }
  50%    { text-shadow:0 0 44px rgba(210,166,60,.85),
                       0 0 90px rgba(230,195,104,.35); color:var(--gold-soft); }
}

@media (prefers-reduced-motion:reduce){
  .glint{animation:none;}
}

/* The arrival announces itself before the mark lands. */
.intro-welcome{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:var(--step-1);color:var(--fog);
  letter-spacing:.02em;margin-bottom:var(--space-xs);
  text-shadow:0 2px 24px rgba(4,10,7,.7);
}

/* =====================================================================
   MOBILE OVERRIDES — kept at the end of the file on purpose.
   styles.css carries a duplicated legacy block (a leftover from an
   earlier redesign pass, still ~1200 lines in) that redeclares
   .room-rows and other selectors outside any media query. Same
   specificity + later source order means that block wins over anything
   placed near its own original rule, no matter what media query wraps
   it. Rather than risk deleting a few hundred lines of legacy CSS
   blind, phone-only overrides go here, after everything, so they are
   the ones that win.
   ===================================================================== */
@media(max-width:900px){
  /* ---- room options, phone ----
     The editorial row (big photo + full spec list) is right for desktop
     but on a phone it meant one room per screen, swiped one at a time.
     Two compact cards side by side let the guest compare all three at a
     glance; the full description and spec list stay on desktop, where
     there is room for them. */
  .room-rows{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:0 4vw;}
  .room-row{gap:8px;}
  .room-shot{border-radius:6px;}
  .room-img{aspect-ratio:4/3;}
  .room-flag{font-size:.55rem;padding:5px 9px;top:8px;left:8px;}
  .room-head{
    flex-direction:column;align-items:flex-start;gap:2px;
    padding-bottom:6px;margin-bottom:8px;
  }
  .room-head h3{font-size:.9rem;}
  .room-rate b{font-size:.9rem;}
  .room-rate span{font-size:.68rem;}
  /* solo en la tarjeta chica de la fila — no en la ventana ampliada,
     que comparte estas mismas clases y sí necesita mostrarlas */
  .room-row .room-blurb,.room-row .room-specs{display:none;}
  .room-actions{flex-direction:column;align-items:stretch;gap:6px;}
  .room-actions .btn{font-size:.76rem;padding:9px 8px;text-align:center;}
  .room-alt-book{justify-content:center;flex-wrap:wrap;gap:8px;}
  .room-alt-book a{font-size:.68rem;}
}

/* =====================================================================
   VISUAL ELEVATION PASS — appended at the very end on purpose.
   styles.css carries a duplicated legacy block partway through (see the
   note above the earlier MOBILE OVERRIDES section) that redeclares a
   few hundred selectors outside any media query. Same specificity +
   later source order wins regardless of where a rule is "supposed" to
   live, so anything meant to win site-wide goes here, last.

   This pass does not touch layout structure, IDs, or anything the JS
   selects — it raises the finish: a floating nav instead of an
   edge-to-edge bar, nested "double-bezel" card framing, button-in-button
   arrow badges with magnetic hover, a heavier glass mobile menu with a
   staggered link reveal, and a softer entrance for scroll reveals. All
   new motion rides the site's own eased curves (--ease-out / --ease-drift)
   — nothing here uses a linear or default ease-in-out timing function.
   ===================================================================== */

/* ---- floating island header ----
   Was a full-width bar glued to the top edge. Detached it into a
   centred glass pill so it reads as a floating control, not a fixed
   toolbar — the header's own children and .scrolled toggle are
   untouched, only the shell around them changes. */
header{
  left:50%;right:auto;top:14px;
  width:min(1180px,92%);
  transform:translateX(-50%);
  border-radius:999px;
  padding:13px 22px 13px 24px;
  background:rgba(11,26,18,.5);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(246,241,227,.09);
  box-shadow:var(--shadow-md);
  transition:background .5s var(--ease-out),padding .5s var(--ease-out),
             box-shadow .5s var(--ease-out),border-color .5s var(--ease-out),
             transform .5s var(--ease-out);
}
header.scrolled{
  background:rgba(11,26,18,.82);padding:11px 22px 11px 24px;
  border-color:rgba(246,241,227,.14);box-shadow:var(--shadow-lg);
}
.brandmark img{width:46px;}
section[id]{scroll-margin-top:104px;}
@media(max-width:520px){
  header{padding:11px 14px 11px 16px;width:95%;}
  .brandmark img{width:38px;}
}

/* ---- button-in-button trailing icon ----
   The arrow never sits bare against the label — it lives in its own
   circular badge flush with the button's inner edge, and the badge
   carries its own kinetic tension on hover independent of the button's
   own lift. Applies to the CTAs that already isolate their arrow in a
   span (.btn-ico from the "Book Now" buttons, and the pre-existing
   .btn-arrow / .tour-link marks). */
.btn{position:relative;}
.btn-ico,.btn-arrow span,.tour-link span{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;margin-left:9px;
  transition:transform .5s var(--ease-out),background .3s var(--ease-out);
}
.btn-gold .btn-ico{background:rgba(10,20,14,.16);color:var(--ink);}
.btn-ghost .btn-arrow span,.tour-link span{background:rgba(246,241,227,.1);}
.btn:hover .btn-ico,.btn-arrow:hover span,.tour-link:hover span{
  transform:translate3d(3px,-2px,0) scale(1.08);
}
.btn:active{transform:scale(.98);}
.btn-gold:active{transform:scale(.98) translateY(0);}

/* ---- double-bezel card framing ----
   Every card below was flat content dropped on a background. Each now
   sits like hardware in a tray: the card itself is the outer shell
   (tinted background, hairline ring, generous radius) and its own photo
   or icon plate is the inner core, one size class down, with a faint
   top highlight so the two surfaces read as concentric rather than
   glued together. No markup changes — this rides the existing
   card/photo pairing already in the DOM. */
.merch-card,.review-card,.offer-cell,.near-card{
  border-radius:1.6rem;
  box-shadow:inset 0 0 0 1px rgba(246,241,227,.07);
}
.merch-card{padding:0;}
.merch-photo{
  border-radius:1.3rem 1.3rem 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.merch-body{padding:22px;}
.review-card,.near-card{
  padding:28px;background:rgba(20,42,29,.4);
  backdrop-filter:blur(2px);
}
.offer-cell{
  background:rgba(20,42,29,.32);padding:34px 28px;
  transition:background .4s var(--ease-out),transform .4s var(--ease-out);
}
.offer-cell:hover{background:rgba(20,42,29,.5);transform:translateY(-3px);}
.offer-cell .ico{
  width:44px;height:44px;border-radius:50%;
  background:rgba(210,166,60,.14);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.room-shot{
  padding:6px;background:rgba(246,241,227,.04);
  border-radius:1.4rem;box-shadow:inset 0 0 0 1px rgba(246,241,227,.07);
}
.room-img{border-radius:1rem;}

/* ---- macro whitespace ----
   Sections breathe more; nothing structural moves, the numbers just
   grow. Scroll-scene tracks (measured in svh) are untouched. */
section{padding-block:132px;}
.section-head{margin-bottom:64px;}
@media(max-width:900px){
  section{padding-block:88px;}
}

/* ---- softer scroll-reveal entrance ----
   Adds a light blur to the existing fade+lift so content resolves into
   focus rather than just sliding up. Kept subtle (6px) and only on the
   one-time entrance transition, never on anything mid-scroll. */
[data-reveal]{filter:blur(6px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out),filter .85s var(--ease-out);}
[data-reveal].is-revealed{filter:blur(0);}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{filter:none;}
}

/* ---- mobile menu: heavier glass + staggered reveal ----
   The panel itself is unchanged (still the right-hand drawer); the
   scrim behind it goes from a light dim to a real glass overlay, and
   the links no longer all land at once — each fades and lifts in a
   beat after the one above it. */
#mobile-nav-overlay{background:rgba(6,14,9,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
#mobile-nav a{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color .2s;
}
#mobile-nav.open a{opacity:1;transform:translate3d(0,0,0);}
#mobile-nav.open a:nth-child(2){transition-delay:.06s;}
#mobile-nav.open a:nth-child(3){transition-delay:.12s;}
#mobile-nav.open a:nth-child(4){transition-delay:.18s;}
#mobile-nav.open a:nth-child(5){transition-delay:.24s;}
#mobile-nav.open a:nth-child(6){transition-delay:.3s;}
#mobile-nav.open a:nth-child(7){transition-delay:.36s;}
@media(prefers-reduced-motion:reduce){
  #mobile-nav a{opacity:1;transform:none;transition:none;}
}

/* ---- fixed film-grain, never on a scrolling container ---- */
.grain-overlay{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:reduce){
  .grain-overlay{display:none;}
}

/* =====================================================================
   MOTION PASS 2 — bigger, harder-to-miss movement.
   Appended last for the same reason as the two sections above (the
   duplicated legacy block earlier in the file wins on source order for
   anything not placed after it). Works with js/motion.js.
   ===================================================================== */

/* ---- reveal, turned up ----
   The first pass was a details-level polish; this one is meant to be
   felt on a first scroll, not just noticed on close inspection. */
[data-reveal]{
  transform:translate3d(0,42px,0) scale(.97);
  filter:blur(12px);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out),filter 1s var(--ease-out);
}
[data-reveal].is-revealed{transform:translate3d(0,0,0) scale(1);filter:blur(0);}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{transform:none;filter:none;}
}

/* ---- buttons, turned up ---- */
.btn-gold:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 16px 34px rgba(210,166,60,.32);
}
.btn:hover .btn-ico,.btn-arrow:hover span,.tour-link:hover span{
  transform:translate3d(4px,-3px,0) rotate(28deg) scale(1.14);
}

/* ---- nav links: lift, not just underline ---- */
header nav a{display:inline-block;transition:transform .4s var(--ease-out),color .25s,background-size var(--dur-mid) var(--ease-out);}
header nav a:hover{transform:translateY(-2px);}

/* ---- magnetic tilt + cursor glow ----
   --tilt-x/--tilt-y/--glow-x/--glow-y are written by js/motion.js on
   pointermove. The glow is a radial gradient masked to the card via
   ::before, so it never leaks outside the rounded corners. */
[data-tilt]{
  --tilt-x:0deg;--tilt-y:0deg;--glow-x:50%;--glow-y:50%;
  position:relative;transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:transform .35s var(--ease-out);
  overflow:hidden;
}
[data-tilt]::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .4s var(--ease-out);
  background:radial-gradient(circle at var(--glow-x) var(--glow-y),rgba(210,166,60,.16),transparent 55%);
}
[data-tilt]:hover::before{opacity:1;}
[data-tilt]:hover{box-shadow:var(--shadow-lg);}
@media(prefers-reduced-motion:reduce),(hover:none){
  [data-tilt]{transform:none !important;}
  [data-tilt]::before{display:none;}
}

/* ---- stat counters: a little weight while they run ---- */
.stat b{font-variant-numeric:tabular-nums;display:inline-block;}

/* ===== FAQ ===== */
.faq-list{max-width:760px;margin:0 auto;padding:0 20px;}
.faq-item{border-bottom:1px solid rgba(203,217,204,.14);}
.faq-item summary{cursor:pointer;list-style:none;padding:20px 32px 20px 0;font-family:'Fraunces',serif;font-size:1.15rem;color:var(--cream);position:relative;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.4rem;transition:transform .3s;}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq-item p{color:var(--mist);line-height:1.7;padding:0 0 22px;}
#faq .section-cta{text-align:center;margin-top:36px;}


/* =====================================================================
   CHOOSE YOUR ROOM · EXPERIENCES · REVIEWS BY DORM · WHATSAPP BUBBLE
   (appended last on purpose: it overrides the older .rooms / .tour rules
   above, which are left in place. js/rooms.js, js/experiences.js,
   js/reviews.js write this markup.)
   ===================================================================== */

/* ---- packages ---- */
.pkg-grid{
  max-width:1100px;margin:0 auto;padding:0 6vw;
  display:grid;gap:var(--space-md);grid-template-columns:1fr;
}
@media (min-width:900px){.pkg-grid{grid-template-columns:1fr 1fr;gap:var(--space-lg);}}
.pkg-card{
  position:relative;display:flex;flex-direction:column;cursor:pointer;
  padding:var(--space-md);background:var(--charcoal-soft);
  border:1px solid rgba(203,217,204,.14);border-radius:var(--radius);
  transition:border-color .3s,background .3s,transform .45s var(--ease-out);
}
.pkg-card:hover{transform:translateY(-4px);border-color:rgba(210,166,60,.4);}
.pkg-card.is-selected{border-color:var(--gold);background:rgba(210,166,60,.07);}
.pkg-card h3{font-size:var(--step-2);}
.pkg-price{margin:6px 0 14px;color:var(--fog);}
.pkg-price b{font-family:'Fraunces',serif;color:var(--gold);font-size:var(--step-3);font-variant-numeric:tabular-nums;}
.pkg-lede{color:var(--mist);line-height:1.65;font-size:.94rem;margin-bottom:18px;}
.pkg-card h4{
  font-family:'Work Sans',sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.pkg-list{list-style:none;flex:1;margin:0 0 22px;}
.pkg-list li{
  position:relative;padding:8px 0 8px 26px;font-size:.9rem;color:var(--cream);
  border-bottom:1px solid rgba(203,217,204,.09);
}
.pkg-list li::before{content:'✓';position:absolute;left:0;color:var(--gold);}
.pkg-choose{width:100%;text-align:center;}

/* ---- dorms ---- */
.dorm-step{max-width:1100px;margin:var(--space-lg) auto 0;padding:0 6vw;scroll-margin-top:90px;animation:rvFade .5s var(--ease-out) both;}
@keyframes rvFade{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.dorm-step[hidden]{display:none;}
.dorm-grid{display:grid;gap:var(--space-md);grid-template-columns:1fr;}
@media (min-width:900px){.dorm-grid{grid-template-columns:1fr 1fr;gap:var(--space-lg);}}
.dorm-card{
  display:flex;flex-direction:column;overflow:hidden;background:var(--charcoal-soft);
  border:1px solid rgba(203,217,204,.14);border-radius:var(--radius);
}
.dorm-photo{aspect-ratio:16/10;background-size:cover;background-position:center;}
.dorm-body{display:flex;flex-direction:column;flex:1;padding:var(--space-md);}
.dorm-body h3{font-size:var(--step-1);}
.dorm-meta{color:var(--gold);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin:6px 0 4px;}
.dorm-rating{color:var(--gold-soft);font-size:.85rem;margin:6px 0 12px;min-height:1.3em;}
.dorm-blurb{color:var(--fog);line-height:1.65;font-size:.92rem;margin-bottom:20px;flex:1;}
.dorm-book{text-align:center;}
.rooms-note{text-align:center;color:var(--fog);font-size:.85rem;margin-top:var(--space-lg);padding:0 6vw;}

/* ---- upgrade suggestion ---- */
.upsell{
  position:fixed;left:50%;bottom:22px;z-index:520;
  width:min(600px,calc(100vw - 190px));
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 20px;background:rgba(11,26,18,.97);
  border:1px solid rgba(210,166,60,.55);border-radius:14px;box-shadow:var(--shadow-lg);
  opacity:0;transform:translate(-50%,24px);
  transition:opacity .35s,transform .4s var(--ease-out);
}
.upsell.show{opacity:1;transform:translate(-50%,0);}
.upsell[hidden]{display:none;}
.upsell p{font-size:.94rem;line-height:1.45;color:var(--cream);}
.upsell p b{color:var(--gold);}
.upsell-actions{display:flex;align-items:center;gap:14px;flex:none;}
.upsell-no{background:none;border:0;color:var(--fog);font:inherit;font-size:.84rem;text-decoration:underline;cursor:pointer;}
@media (max-width:640px){
  .upsell{width:calc(100vw - 32px);bottom:90px;flex-direction:column;align-items:stretch;gap:12px;}
  .upsell-actions{justify-content:space-between;}
}

/* ---- experiences ---- */
.tour-body .tour-cat{
  flex:none;color:var(--gold);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;margin-bottom:10px;
}
.tour-body .tour-desc{flex:1;margin-bottom:var(--space-sm);}
.tour-body .tour-meta{flex:none;margin:0 0 var(--space-sm);}
.tour-cta{
  width:100%;text-align:center;margin-top:auto;
  text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;
}
.tour-more{
  text-align:center;color:var(--fog);font-size:.92rem;margin:var(--space-lg) auto 0;
  max-width:640px;padding:0 6vw;line-height:1.7;
}
.tour-more a{color:var(--gold);font-weight:600;border-bottom:1px solid rgba(210,166,60,.5);white-space:nowrap;}
.tour-more a:hover{border-color:var(--gold);}

/* ---- reviews by dorm ---- */
.rv-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 auto 12px;padding:0 6vw;}
.rv-tabs [role="tab"]{
  background:transparent;border:1px solid rgba(203,217,204,.25);color:var(--mist);
  padding:10px 20px;border-radius:999px;cursor:pointer;font:inherit;font-size:.86rem;
  transition:background .25s,border-color .25s,color .25s;
}
.rv-tabs [role="tab"]:hover{border-color:rgba(210,166,60,.6);}
.rv-tabs [aria-selected="true"]{background:rgba(210,166,60,.14);border-color:var(--gold);color:var(--gold);}
.rv-summary{text-align:center;color:var(--fog);font-size:.9rem;margin-bottom:22px;min-height:1.4em;}
.carousel.is-single .carousel-controls{display:none;}
.rv-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* ---- shop (add-ons) ---- */
.merch-note{color:var(--gold-soft);font-size:.78rem;flex:none;margin:-6px 0 10px;}

/* ---- WhatsApp bubble ---- */
.wa-bubble{
  position:fixed;right:20px;bottom:20px;z-index:510;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#1FA855;color:#fff;box-shadow:var(--shadow-md);
  transition:transform .25s var(--ease-out),opacity .3s;
}
.wa-bubble:hover{transform:scale(1.08);}
.wa-bubble:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
body.modal-open .wa-bubble,body.splash-open .wa-bubble{opacity:0;pointer-events:none;}
@media (prefers-reduced-motion:reduce){.dorm-step{animation:none;}.upsell{transition:none;}}

/* ---- experience cards: generated by scripts/build-tours.js (home, tours.html, tour pages) ---- */
.tour[hidden]{display:none;}
.tour-media{display:block;}
.tour-body h3 a{color:inherit;}
.tour-body h3 a:hover{color:var(--gold);}
.tour-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--space-sm);flex:none;}
.tour-chips li{font-size:.72rem;color:var(--mist);border:1px solid rgba(203,217,204,.22);border-radius:999px;padding:4px 10px;white-space:nowrap;}
.tour-meta b small{color:var(--fog);font-family:'Work Sans',sans-serif;font-size:.68rem;font-weight:400;}
.tour-details{margin-top:14px;}
.tour-all{text-align:center;margin:var(--space-md) auto 0;padding:0 6vw;}

.tour-meta{gap:4px 14px;flex-wrap:wrap;}
.tour-meta span{min-width:0;}

/* A tour card is one big tap target: the title link is stretched over the whole card, so touching the photo,
   the text or the price opens that tour's page. The buttons keep their own action (WhatsApp / "See details"). */
.tour{cursor:pointer;}
.tour-body h3 a::after{content:'';position:absolute;inset:0;z-index:1;}
.tour .tour-cta,.tour .tour-details{position:relative;z-index:2;}
.tour:focus-within{outline:2px solid var(--gold);outline-offset:3px;}
.tour-body h3 a:focus-visible{outline:none;}

/* Shop product photos: the renders are ~square, so a card with a photo gets a square tile (no cropping of the product).
   Cards without a photo keep the compact emoji tile. */
.merch-card.has-photo .merch-photo{height:auto;aspect-ratio:1/1;}
.merch-card:not(.has-photo) .merch-photo{height:150px;}
.merch-icon{font-size:2.6rem;}
@media (max-width:700px){.merch-card:not(.has-photo) .merch-photo{height:110px;}.merch-icon{font-size:2rem;}}
/* Essential package: photo of the mini toiletry kit between the lede and the list */
.pkg-photo{margin:0 0 20px;}
.pkg-photo-img{aspect-ratio:16/10;border-radius:calc(var(--radius) - 4px);background-size:cover;background-position:center 76%;box-shadow:inset 0 0 0 1px rgba(246,241,227,.08);}
.pkg-photo figcaption{margin-top:8px;color:var(--fog);font-size:.78rem;letter-spacing:.06em;}

/* ---------- Share buttons (js/share.js) ---------- */
.share-btn,.share-icon{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font:inherit;color:var(--cream,#F6F1E3);background:rgba(246,241,227,.06);
  border:1px solid rgba(246,241,227,.22);transition:background .25s,border-color .25s,color .25s;
}
.share-btn{padding:10px 18px;border-radius:999px;font-size:.84rem;font-weight:600;letter-spacing:.02em;}
.share-icon{width:40px;height:40px;border-radius:50%;padding:0;background:rgba(8,16,12,.62);backdrop-filter:blur(6px);}
.share-btn:hover,.share-icon:hover,.share-btn:focus-visible,.share-icon:focus-visible,.share-btn[aria-expanded="true"],.share-icon[aria-expanded="true"]{
  background:var(--gold);border-color:var(--gold);color:var(--ink,#0B1A12);outline:none;
}
.share-btn:focus-visible,.share-icon:focus-visible{box-shadow:0 0 0 3px rgba(210,166,60,.45);}
/* card-corner version: sits above the stretched link so a tap on it never opens the page */
.tour>.share-icon,.merch-card>.share-icon{position:absolute;top:12px;right:12px;z-index:5;}
.merch-card{position:relative;}
.merch-card.is-shared{border-color:var(--gold);box-shadow:0 0 0 2px rgba(210,166,60,.5);}
.fplatforms+.share-foot,.share-foot{margin-top:14px;}
.share-pop{
  position:fixed;z-index:10050;min-width:220px;max-width:calc(100vw - 16px);padding:14px 14px 12px;
  background:#10241A;color:var(--cream,#F6F1E3);border:1px solid rgba(210,166,60,.35);border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.share-pop[hidden]{display:none;}
.share-pop-title{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 4px 8px;}
.share-pop-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.share-pop-list a,.share-pop-list button{
  display:block;width:100%;text-align:left;padding:11px 12px;border-radius:10px;border:0;background:transparent;
  color:inherit;font:inherit;font-size:.92rem;cursor:pointer;text-decoration:none;
}
.share-pop-list a:hover,.share-pop-list button:hover,.share-pop-list a:focus-visible,.share-pop-list button:focus-visible{background:rgba(210,166,60,.16);outline:none;}
.share-pop-status{min-height:1.2em;margin:6px 4px 0;font-size:.8rem;color:var(--gold);}
.share-pop.is-sheet{left:8px!important;right:8px;top:auto!important;bottom:8px;max-width:none;border-radius:20px;padding-bottom:16px;}

/* Refresh within the same visit: the welcome splash is not shown again (flag set before first paint, see index.html + js/main.js).
   The scroll scene (#intro) is unaffected. */
html.splash-skip #splash{display:none!important;}

/* ---------- Shop: two paths per card + cart (js/cart.js) ---------- */
.merch-delivery{margin:10px 0 0;font-size:.78rem;color:var(--gold);letter-spacing:.02em;}
.merch-actions{display:grid;gap:10px;margin-top:14px;}
.merch-actions .btn{width:100%;justify-content:center;text-align:center;}
.merch-actions .btn.is-added{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.merch-body .merch-price{margin-top:10px;}
.cart-btn{color:var(--cream);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;}
.cart-btn:hover,.cart-btn:focus-visible{color:var(--gold);outline:none;}
.cart-btn[hidden]{display:none;}
.cart-btn:focus-visible{box-shadow:0 0 0 3px rgba(210,166,60,.45);border-radius:50%;}
#cart-drawer[inert]{visibility:hidden;}
.cart-arrival{margin:0;padding:14px 24px;background:rgba(210,166,60,.1);border-bottom:1px solid rgba(210,166,60,.25);font-size:.86rem;line-height:1.5;color:var(--cream);}
.cart-arrival b{color:var(--gold);}
.cart-items{overscroll-behavior:contain;}
.cart-empty .btn{margin-top:14px;}
.cart-item{align-items:flex-start;}
.cart-item-thumb{flex:0 0 56px;width:56px;height:56px;border-radius:12px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(246,241,227,.12);}
.cart-item-info{min-width:0;}
.cart-item-qty{align-self:center;}
.cart-item-qty button:disabled{opacity:.35;cursor:not-allowed;}
.cart-qty{min-width:1.2em;text-align:center;font-variant-numeric:tabular-nums;}
.cart-line-total{align-self:center;min-width:56px;text-align:right;font-family:'Fraunces',serif;color:var(--gold);}
.cart-field{display:grid;gap:6px;margin-bottom:6px;font-size:.8rem;color:var(--mist);}
.cart-field input{padding:10px 12px;border-radius:10px;border:1px solid rgba(203,217,204,.25);background:rgba(246,241,227,.05);color:var(--cream);font:inherit;color-scheme:dark;}
.cart-field input:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(210,166,60,.35);}
.cart-hint{min-height:1.1em;margin:0 0 8px;font-size:.76rem;color:#ffb4a4;}
.cart-foot .btn{width:100%;text-align:center;justify-content:center;}
.cart-foot[hidden]{display:none;}
.cart-fine{margin:12px 0 4px;font-size:.74rem;line-height:1.5;color:var(--mist);}
.cart-clear{background:none;border:0;color:var(--mist);font:inherit;font-size:.78rem;text-decoration:underline;cursor:pointer;padding:6px 0;}
.cart-clear:hover{color:var(--gold);}
#cart-toast{
  position:fixed;left:50%;bottom:24px;z-index:780;transform:translate(-50%,24px);opacity:0;visibility:hidden;
  display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100vw - 32px);padding:12px 14px 12px 18px;border-radius:999px;
  background:#10241A;color:var(--cream);border:1px solid rgba(210,166,60,.45);box-shadow:0 14px 40px rgba(0,0,0,.45);font-size:.88rem;
  transition:opacity .3s,transform .3s,visibility .3s;
}
#cart-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}
.cart-toast-view{background:var(--gold);color:var(--ink);border:0;border-radius:999px;padding:8px 14px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;}
@media (max-width:560px){#cart-toast{bottom:84px;}}
#cart-drawer{transition:transform .4s cubic-bezier(.2,.9,.3,1),visibility 0s linear .4s;}
#cart-drawer.open{transition:transform .4s cubic-bezier(.2,.9,.3,1),visibility 0s;}

/* ---------- Packages: three cards (Wild / Essential / Explorer) ---------- */
@media (min-width:980px){.pkg-grid{grid-template-columns:repeat(3,1fr);max-width:1180px;margin-left:auto;margin-right:auto;}}
.pkg-badge{align-self:flex-start;margin:0 0 10px;padding:4px 12px;border-radius:999px;background:rgba(210,166,60,.16);border:1px solid rgba(210,166,60,.5);color:var(--gold);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
/* bundles in the shop */
.merch-tag{position:absolute;top:12px;left:12px;z-index:5;padding:5px 12px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:.74rem;font-weight:700;letter-spacing:.04em;}

/* =====================================================================
   WAVE 3 — header icons, hero quick links, The Place, What We Offer, sister café & hotel,
   WhatsApp composer, compact package cards, phone-in-landscape layout
   ===================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}   /* iOS agranda el texto al girar el teléfono */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
@supports (height:100dvh){.hero{min-height:100dvh;}}

/* ---- header: share + shop bag ---- */
.header-actions{gap:8px;}
.hdr-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:var(--cream);cursor:pointer;position:relative;transition:color .25s,background .25s;}
.hdr-icon:hover,.hdr-icon:focus-visible{color:var(--gold);background:rgba(246,241,227,.08);outline:none;}
.hdr-icon:focus-visible{box-shadow:0 0 0 3px rgba(210,166,60,.45);}
.cart-btn.hdr-icon{font-size:inherit;}

/* ---- hero: quick links to every area ---- */
.intro-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px auto 0;max-width:520px;}
.intro-jump a{padding:7px 15px;border-radius:999px;border:1px solid rgba(246,241,227,.3);background:rgba(8,16,12,.4);backdrop-filter:blur(4px);color:var(--cream);font-size:.78rem;letter-spacing:.04em;text-shadow:none;transition:background .25s,border-color .25s,color .25s,transform .25s;}
.intro-jump a:hover,.intro-jump a:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-2px);outline:none;}

/* ---- The Place: one honest photo + the day at the hostel ---- */
.place-layout{max-width:1120px;margin:0 auto;padding:0 6vw;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,60px);align-items:center;}
.place-hero{margin:0;}
.place-hero-img{aspect-ratio:4/5;border-radius:var(--radius);background-size:cover;background-position:center;box-shadow:var(--shadow-lg);}
.place-hero figcaption{margin-top:12px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fog);opacity:.85;}
.place-day{list-style:none;margin:0;padding:0;border-left:1px solid rgba(210,166,60,.38);}
.place-day li{position:relative;display:grid;grid-template-columns:112px 1fr;gap:16px;padding:15px 0 15px 24px;}
.place-day li::before{content:'';position:absolute;left:-5px;top:23px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(210,166,60,.18);}
.pd-time{padding-top:4px;color:var(--gold);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.place-day h3{margin:0 0 4px;font-size:1.12rem;}
.place-day p{margin:0;color:var(--fog);font-size:.92rem;line-height:1.6;}
@media (max-width:860px){.place-layout{grid-template-columns:1fr;}.place-hero-img{aspect-ratio:16/10;}.place-day li{grid-template-columns:92px 1fr;gap:12px;}}

/* ---- What we offer: four simple things ---- */
.offer-list{max-width:980px;margin:0 auto;padding:0 6vw;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.offer-item{display:flex;gap:18px;align-items:flex-start;padding:26px 24px;border-radius:1.4rem;background:rgba(20,42,29,.45);border:1px solid rgba(246,241,227,.1);backdrop-filter:blur(3px);color:inherit;text-decoration:none;transition:transform .35s var(--ease-out),border-color .3s,background .3s;}
a.offer-item:hover,.offer-item-btn:hover,.offer-item-btn:focus-visible,a.offer-item:focus-visible{transform:translateY(-3px);border-color:rgba(210,166,60,.5);background:rgba(20,42,29,.62);outline:none;}
.offer-item-btn{cursor:pointer;}
.offer-ico{flex:0 0 52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(210,166,60,.14);color:var(--gold);}
.offer-item h3{margin:0 0 6px;font-size:1.15rem;}
.offer-item p{margin:0;color:var(--fog);font-size:.92rem;line-height:1.6;}
.offer-item .offer-cell-link{display:inline-block;margin-top:10px;color:var(--gold);font-size:.85rem;font-weight:600;}
@media (max-width:700px){.offer-list{grid-template-columns:1fr;gap:12px;}.offer-item{padding:20px 18px;gap:14px;}}

/* ---- sister café (in "Close by") and sister hotel (last section) ---- */
.sister{max-width:1060px;margin:0 auto 36px;display:grid;grid-template-columns:.95fr 1.05fr;border-radius:1.6rem;overflow:hidden;background:rgba(20,42,29,.55);border:1px solid rgba(210,166,60,.3);box-shadow:var(--shadow-md);}
.sister-media{min-height:300px;}
.sister-img{height:100%;min-height:300px;background-size:cover;background-position:center;}
.sister-body{padding:32px 36px;display:flex;flex-direction:column;gap:12px;justify-content:center;}
.sister-tag{margin:0;color:var(--gold);text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;font-weight:600;}
.sister h2,.sister h3{margin:0;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);line-height:1.1;}
.sister p{margin:0;color:var(--fog);line-height:1.65;font-size:.95rem;}
.sister-deal{color:var(--cream)!important;}
.sister-deal b{color:var(--gold);}
.sister-loc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;}
.sister-loc a{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-weight:600;border-bottom:1px solid rgba(210,166,60,.5);padding-bottom:1px;}
.sister-loc a:hover,.sister-loc a:focus-visible{color:var(--cream);border-color:var(--cream);outline:none;}
.sister-hours{color:var(--mist);font-size:.82rem;}
.sister-facts{margin:0;padding:0;list-style:none;display:grid;gap:7px;color:var(--fog);font-size:.92rem;}
.sister-facts li{position:relative;padding-left:22px;}
.sister-facts li::before{content:'\2713';position:absolute;left:0;color:var(--gold);}
.sister-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.sister-hotel{margin-bottom:0;}
#hotel{padding-top:24px;}
@media (max-width:820px){.sister{grid-template-columns:1fr;}.sister-media,.sister-img{min-height:210px;}.sister-body{padding:24px 22px;}}

/* ---- buttons: shop icon next to every "Book Now", fine print under the shop ---- */
.section-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;padding:12px 15px;}
.merch-fine{margin:18px auto 0;max-width:60ch;text-align:center;color:var(--mist);font-size:.78rem;line-height:1.5;}
.merch-card.has-photo .merch-photo{aspect-ratio:8/7;}
.pkg-photo-img{aspect-ratio:1/1;background-position:center;}
.bk-pkg-photo{aspect-ratio:6/5;background-position:center 30%;}

/* ---- WhatsApp composer ---- */
.wa-chat{position:fixed;right:20px;bottom:90px;z-index:520;width:min(340px,calc(100vw - 24px));padding:16px;border-radius:20px;background:#10241A;color:var(--cream);border:1px solid rgba(31,168,85,.5);box-shadow:0 18px 50px rgba(0,0,0,.5);}
.wa-chat[hidden]{display:none;}
.wa-chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.wa-chat-head b{display:block;font-family:'Fraunces',serif;font-size:1.05rem;}
.wa-chat-head span{color:var(--mist);font-size:.76rem;}
.wa-chat-close{background:none;border:0;color:var(--mist);font-size:1rem;cursor:pointer;padding:4px;line-height:1;}
.wa-chat-close:hover,.wa-chat-close:focus-visible{color:var(--gold);outline:none;}
.wa-chat textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:84px;max-height:180px;padding:11px 12px;border-radius:12px;border:1px solid rgba(203,217,204,.3);background:rgba(246,241,227,.06);color:var(--cream);font:inherit;font-size:.92rem;line-height:1.5;}
.wa-chat textarea:focus-visible{outline:none;border-color:#1FA855;box-shadow:0 0 0 3px rgba(31,168,85,.35);}
.wa-chat-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px;}
.wa-chat-chips button{padding:6px 12px;border-radius:999px;border:1px solid rgba(246,241,227,.25);background:transparent;color:var(--cream);font:inherit;font-size:.76rem;cursor:pointer;transition:background .2s,border-color .2s;}
.wa-chat-chips button:hover,.wa-chat-chips button:focus-visible{background:rgba(31,168,85,.22);border-color:#1FA855;outline:none;}
.wa-chat .btn{width:100%;text-align:center;background:#1FA855;color:#fff;border-color:#1FA855;}
.wa-chat .btn:hover{background:#25bf62;}
.wa-chat-note{margin:8px 2px 0;color:var(--mist);font-size:.72rem;}
body.modal-open .wa-chat,body.splash-open .wa-chat{display:none;}

/* ---- package cards: three compact cards at once on phones; full detail on wide screens ---- */
.pkg-more{flex:1;}
.pkg-more>summary{display:none;list-style:none;}
.pkg-more>summary::-webkit-details-marker{display:none;}
@media (max-width:760px),(max-height:520px){
  .pkg-grid{gap:10px;}
  .pkg-card{padding:16px 16px 14px;}
  .pkg-badge{margin:0 0 8px;}
  .pkg-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
  .pkg-card h3{margin:0;font-size:1.4rem;}
  .pkg-price{margin:0;white-space:nowrap;font-size:.78rem;color:var(--mist);}
  .pkg-price b{font-size:1.55rem;}
  .pkg-more{flex:0 0 auto;}
  .pkg-more>summary{display:flex;align-items:center;gap:6px;margin:6px 0 12px;color:var(--gold);font-size:.82rem;font-weight:600;cursor:pointer;}
  .pkg-more>summary::after{content:'\25BE';transition:transform .2s;}
  .pkg-more[open]>summary::after{transform:rotate(180deg);}
  .pkg-more>summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}
  .pkg-lede{margin-bottom:14px;}
  .pkg-card .btn{padding:11px 18px;}
}

/* ---- phones turned sideways: short screens need their own proportions ---- */
@media (orientation:landscape) and (max-height:520px){
  header{padding:8px 4%;}
  header.scrolled{padding:6px 4%;}
  .brandmark img{width:42px;}
  .header-actions .btn{padding:8px 18px;}
  .hdr-icon{width:36px;height:36px;}
  section{padding-block:56px;}
  .section-head{margin-bottom:26px;}
  .section-head h2{font-size:clamp(1.5rem,5vh,2rem);}
  .section-head p{margin-top:8px;font-size:.9rem;}
  .section-cta{margin-top:30px;}
  /* welcome splash */
  .splash-cast{display:none;}
  .splash-inner{transform:none;}
  #splash img{width:78px;}
  #splash .splash-word{font-size:2rem;}
  /* the arrival: everything between the header and the bottom edge */
  .intro-arrival{justify-content:flex-start;padding-top:70px;padding-bottom:12px;}
  .intro-welcome{display:none;}
  .intro-mark{font-size:2.4rem;}
  .intro-arrival .badges{margin-top:8px;gap:8px;}
  .intro-sub{display:none;}
  .intro-jump{margin-top:10px;gap:6px;}
  .intro-jump a{padding:5px 12px;font-size:.72rem;}
  .intro-ctas{margin-top:12px;gap:10px;}
  .intro-ctas .btn{padding:9px 20px;}
  .intro-cue{display:none;}
  /* grids use the width instead of the height */
  .pkg-grid{grid-template-columns:repeat(3,1fr);max-width:none;padding:0 4vw;gap:10px;}
  .dorm-grid{grid-template-columns:1fr 1fr;}
  .tour-strip{grid-template-columns:repeat(3,1fr);gap:12px;padding:0 4vw;}
  .tour-media{aspect-ratio:16/10;}
  .tour-body{padding:12px;}
  .merch-grid{grid-template-columns:repeat(4,1fr);gap:10px;padding:0 3vw;}
  .near-grid{grid-template-columns:repeat(2,1fr);}
  .editorial{grid-template-columns:1fr 1fr;gap:20px;}
  .editorial-photo,.place-hero-img{aspect-ratio:4/3;}
  .place-layout{grid-template-columns:1fr 1fr;gap:24px;}
  .place-day li{grid-template-columns:96px 1fr;padding:10px 0 10px 20px;}
  .place-day li::before{top:17px;}
  .place-day p{font-size:.84rem;line-height:1.5;}
  .offer-list{grid-template-columns:repeat(2,1fr);gap:12px;}
  .sister{grid-template-columns:1fr 1fr;}
  .sister-media,.sister-img{min-height:100%;}
  .sister-body{padding:18px 20px;gap:8px;}
  .wa-chat{bottom:76px;max-height:calc(100vh - 96px);overflow:auto;}
  .wa-chat textarea{min-height:60px;}
}

/* phone sideways, continued: section headings that were sized for tall screens */
@media (orientation:landscape) and (max-height:520px){
  .section-intro h2,.rooms h2,.editorial-copy h2{font-size:clamp(1.5rem,6.4vh,2.1rem);line-height:1.1;}
  .section-intro .lede,.rooms .lede{font-size:.95rem;margin-top:8px;}
  .section-intro{margin-bottom:22px;}
  .rooms{padding-block:56px;}
  .stat-row{gap:14px;}
}

/* ---------- language switch (EN | ES) — js/i18n.js ---------- */
html.i18n-wait body{visibility:hidden;}
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid rgba(246,241,227,.3);border-radius:999px;background:rgba(8,16,12,.35);}
.lang-opt{border:0;background:none;color:var(--cream);font:600 .7rem/1 'Work Sans',sans-serif;letter-spacing:.06em;padding:6px 9px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s;}
.lang-opt:hover{background:rgba(246,241,227,.12);}
.lang-opt.is-on{background:var(--gold);color:var(--ink);}
.lang-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.lang-switch-mobile{align-self:flex-start;margin-top:18px;}
.bk-right{display:flex;align-items:center;gap:14px;}
@media (orientation:landscape) and (max-height:520px){.lang-opt{padding:5px 8px;}}



/* ---- barra superior en celulares angostos: logo + EN|ES + compartir + bolsa + Reservar + menú tienen que caber (también en español, "Reservar" es más largo que "Book") ---- */
@media (max-width:480px){
  header,header.scrolled{padding-left:3%;padding-right:3%;}
  .brandmark img{width:36px;}
  .header-actions{gap:3px;}
  .lang-opt{padding:5px 7px;font-size:.64rem;}
  .hdr-icon{width:34px;height:34px;}
  .hdr-icon svg{width:20px;height:20px;}
  .header-actions .btn{padding:8px 13px;font-size:.78rem;}
  .nav-toggle{width:28px;padding:8px 2px;}
}
/* por debajo de 360 px el botón de compartir pasa al menú (ahí sí cabe) */
.hdr-share-mobile{display:none;}
@media (max-width:359px){
  .hdr-share{display:none;}
  .hdr-share-mobile{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:14px;padding:8px 14px;border:1px solid rgba(246,241,227,.3);border-radius:999px;background:none;color:var(--cream);font:600 .8rem 'Work Sans',sans-serif;cursor:pointer;}
}


/* ---- Meet the neighbors: las hojas de sprite (~2 MB) se piden cuando la sección está por llegar (js/lazy-bg.js añade .cast-ready), no al abrir la portada ---- */
.neighbor-sprite .splash-sprite{background-image:none;}
.cast-ready .neighbor-sprite[data-cast="quetzal"] .splash-sprite{background-image:url('../img/wildlife/extra/quetzal.webp');}
.cast-ready .neighbor-sprite[data-cast="perezoso"] .splash-sprite{background-image:url('../img/wildlife/extra/perezoso.webp');}
.cast-ready .neighbor-sprite[data-cast="colibri"] .splash-sprite{background-image:url('../img/wildlife/colibri-frente.webp');}
.cast-ready .neighbor-sprite[data-cast="monkey"] .splash-sprite{background-image:url('../img/wildlife/mono-walk-right.webp');}
.cast-ready .neighbor-sprite[data-cast="coati"] .splash-sprite{background-image:url('../img/wildlife/coati-walk-right.webp');}
/* mientras llega la foto de una tarjeta, un fondo suave en vez de un hueco */
[data-bg]{background-color:rgba(246,241,227,.05);}


/* ---- Reseñas: ocultas mientras no haya reseñas reales (js/reviews.js pone html.reviews-on cuando las hay) ---- */
/* la barra de calificación solo sale cuando hay reseñas reales; la sección "Reviews" (con su formulario) SIEMPRE está */
html:not(.reviews-on) .trust-bar{display:none !important;}
.dorm-rating:empty,.bk-rating:empty{display:none;}
.field-help{display:block;margin-top:6px;color:var(--mist);font-size:.76rem;line-height:1.45;}
.story-verified{display:inline-block;margin-top:10px;padding:3px 10px;border-radius:999px;border:1px solid rgba(210,166,60,.5);color:var(--gold);font-size:.68rem;font-weight:600;letter-spacing:.06em;}
.review-google{margin:16px 0 0;text-align:center;font-size:.86rem;} .review-google a{color:var(--gold);border-bottom:1px solid rgba(210,166,60,.5);}


/* ---- equipos modestos (js/viewport.js pone html.lite): menos neblina y sin desenfoques de fondo ---- */
html.lite .fog-2,html.lite .fog-3{display:none;}
html.lite *{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
html.lite header.scrolled{background:rgba(11,26,18,.97);}

.fbottom .fpolicies{color:var(--mist);text-decoration:underline;text-underline-offset:3px;} .fbottom .fpolicies:hover{color:var(--gold);}