/* Hotel Makao · sistema visual v16
   Verde jungla, dorado, crema y terracota. Arcos como motivo. */
:root{
  --jungle-950:#0d1510;
  --jungle-900:#141f18;
  --jungle-800:#1c2e22;
  --jungle-700:#27422f;
  --gold-200:#f0d49c;
  --gold-300:#e4bd78;
  --gold-400:#d9ac5f;
  --gold-500:#b8863b;
  --clay:#a04422;
  --clay-soft:#c76a3d;
  --paper:#f1ecdd;
  --bone:#f8f4ea;
  --ink:#17190f;
  --ink-soft:#50513f;
  --hair-light:rgba(241,236,221,.14);
  --hair-dark:rgba(23,25,15,.13);
  --whats:#1b7a49;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --grad-gold:linear-gradient(120deg,#f0d49c 0%,#d9ac5f 52%,#c76a3d 100%);
  --grad-jungle:linear-gradient(165deg,#1c2e22 0%,#141f18 55%,#0d1510 100%);
  --mesh:radial-gradient(60% 50% at 12% 8%,rgba(217,172,95,.16),transparent 70%),radial-gradient(50% 45% at 92% 92%,rgba(160,68,34,.16),transparent 70%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  --font-display:'Cormorant Garamond','Cormorant','Times New Roman',serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(1.25rem,5vw,3rem);
  --max:1240px;
  --edge:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));
  --sec:clamp(4.5rem,10vw,8.5rem);
  interpolate-size:allow-keywords;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:1rem;line-height:1.65;background:var(--bone);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.lock{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
ul{list-style:none}
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold-400);color:var(--jungle-950)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-4rem;z-index:1000;background:var(--gold-400);color:var(--jungle-950);padding:.7rem 1.1rem;border-radius:999px;font-weight:600;text-decoration:none;transition:top .2s var(--ease-out)}
.skip:focus{top:1rem}

/* iconos */
.i{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i-b{width:1.25em;height:1.25em;fill:currentColor;stroke:none;flex:none}
.i-fill{fill:currentColor;stroke:none}

/* tipografía */
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:.98;letter-spacing:-.012em;text-wrap:balance}
h2{font-size:clamp(2.5rem,5.2vw,4.4rem)}
h2 em,h1 em{font-style:italic;font-weight:400}
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1}
.eyebrow::before{content:"";width:30px;height:1px;background:currentColor;opacity:.7}
.lead{font-size:clamp(1.02rem,1.3vw,1.14rem);color:var(--ink-soft);max-width:54ch}
.on-dark .lead{color:rgba(241,236,221,.74)}
.gold-text{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}

.sec{padding-block:var(--sec);position:relative}
.on-dark{color:var(--paper)}
.bg-950{background:var(--jungle-950)}
.bg-900{background:var(--jungle-900)}
.bg-900,.bg-950{isolation:isolate}
.bg-900::before,.bg-950::before{content:"";position:absolute;inset:0;background:var(--mesh),var(--grain);z-index:-1;pointer-events:none}
.bg-paper{background:var(--paper)}
.bg-bone{background:var(--bone)}
.on-dark .eyebrow{color:var(--gold-400)}
.on-light .eyebrow{color:var(--clay)}

.sec-head{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem 4rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head h2{margin-top:1.1rem;max-width:15ch}
.sec-head .lead{padding-bottom:.4rem;justify-self:end}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;font-weight:600;font-size:.9rem;letter-spacing:.01em;padding:1rem 1.6rem;border-radius:999px;text-decoration:none;white-space:nowrap;transition:transform 160ms var(--ease-out),box-shadow .3s var(--ease-out),background-color .25s ease,border-color .25s ease,color .25s ease;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn .i{width:1.15em;height:1.15em;transition:transform .35s var(--ease-out)}
.btn-gold{background:var(--grad-gold);color:var(--jungle-950);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 30px -10px rgba(217,172,95,.55)}
.btn-line{border:1px solid rgba(241,236,221,.38);color:var(--paper)}
.btn-dark{background:var(--jungle-900);color:var(--paper)}
.btn-lineDark{border:1px solid var(--hair-dark);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 16px 38px -10px rgba(217,172,95,.7)}
  .btn:hover .i-arrow{transform:translateX(4px)}
  .btn-line:hover{border-color:var(--gold-400);color:var(--gold-300)}
  .btn-dark:hover{background:var(--jungle-700)}
  .btn-lineDark:hover{border-color:var(--clay);color:var(--clay)}
}

/* progreso de scroll (solo con soporte nativo) */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:600;background:var(--grad-gold);transform:scaleX(0);transform-origin:0 50%;display:none}
@supports (animation-timeline:scroll()){
  .progress{display:block;animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{to{transform:scaleX(1)}}
}

/* header */
.nav{position:fixed;inset:0 0 auto 0;z-index:500;transition:background-color .4s var(--ease-out),box-shadow .4s var(--ease-out),backdrop-filter .4s}
.nav.scrolled{background:rgba(13,21,16,.84);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 var(--hair-light)}
.nav-in{max-width:var(--max);margin-inline:auto;padding:1rem var(--pad);display:flex;align-items:center;justify-content:space-between;gap:2rem;color:var(--paper);transition:padding .4s var(--ease-out)}
.nav.scrolled .nav-in{padding-block:.6rem}
.brand-logo img{width:64px;height:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));transition:width .4s var(--ease-out)}
.nav.scrolled .brand-logo img{width:50px}
.nav-links{display:flex;gap:2.1rem;font-size:.86rem;font-weight:500}
.nav-links a{position:relative;text-decoration:none;padding:.4rem 0;color:rgba(241,236,221,.82);transition:color .25s ease}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-400);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.nav-links a.active{color:var(--gold-300)}
.nav-links a.active::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--paper)}
  .nav-links a:hover::after{transform:scaleX(1)}
}
.nav-cta{padding:.7rem 1.25rem;font-size:.82rem}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--hair-light);align-items:center;justify-content:center;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--paper);border-radius:2px;transition:transform .35s var(--ease-out),opacity .2s ease}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:490;background:var(--jungle-950);background-image:var(--mesh),var(--grain);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:6rem var(--pad) 2.5rem;visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility 0s linear .35s}
.drawer.open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.drawer a.d-link{font-family:var(--font-display);font-size:clamp(2.2rem,9vw,3.2rem);line-height:1.15;text-decoration:none;padding:.35rem 0;border-bottom:1px solid var(--hair-light);display:flex;justify-content:space-between;align-items:center}
.drawer a.d-link .i{color:var(--gold-400);width:.7em;height:.7em}
.drawer .btn{margin-top:2rem}
.drawer-foot{margin-top:1.8rem;font-size:.82rem;color:rgba(241,236,221,.6)}

/* hero */
.hero{position:relative;background:var(--jungle-950);color:var(--paper);padding:clamp(7.5rem,14vh,10rem) 0 clamp(7rem,12vw,9.5rem);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:var(--mesh),var(--grain);z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.hero .eyebrow{color:var(--gold-400)}
.hero h1{font-size:clamp(3rem,6.1vw,5.7rem);margin:1.5rem 0 1.6rem;line-height:.94;max-width:12.5ch}
.hero h1 em{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.hero .lead{max-width:46ch;margin-bottom:2.2rem;color:rgba(241,236,221,.78)}
.cta-row{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-slogan{margin-top:2.6rem;display:flex;align-items:center;gap:1rem;font-family:var(--font-display);font-style:italic;font-size:1.35rem;color:var(--gold-300)}
.hero-slogan::before{content:"";width:44px;height:1px;background:var(--gold-400);opacity:.6}

.hero-visual{position:relative;justify-self:center;width:min(100%,460px)}
.hero-arch{position:relative;aspect-ratio:3/4;border-radius:999px 999px 6px 6px;overflow:hidden;background:var(--jungle-800);box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.hero-arch img{width:100%;height:100%;object-fit:cover}
.hero-arch::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,21,16,.1),transparent 40%,rgba(13,21,16,.45));pointer-events:none}
.hero-ring{position:absolute;inset:-18px -18px 0;border:1px solid rgba(217,172,95,.42);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none}
.chip{position:absolute;display:flex;align-items:center;gap:.8rem;background:rgba(248,244,234,.94);color:var(--ink);padding:.85rem 1.1rem;border-radius:14px;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chip .i{color:var(--clay);width:1.4em;height:1.4em}
.chip b{display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:500;line-height:1}
.chip small{display:block;font-size:.72rem;color:var(--ink-soft);line-height:1.3;margin-top:.25rem}
.chip-price{left:-2.2rem;bottom:2.6rem}
.chip-rate{right:-1.4rem;top:5.5rem}
.chip-rate[hidden]{display:none}
.chip-rate .i-fill{color:var(--gold-500)}

/* entrada del hero */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes ringIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.hero .rise{animation:rise 1s var(--ease-out) both;animation-delay:calc(var(--i,0)*90ms + 80ms)}
.hero-arch img{animation:settle 1.9s var(--ease-out) both}
.hero-ring{animation:ringIn 1.4s var(--ease-out) .35s both}
.chip{animation:pop .8s var(--ease-out) both}
.chip-price{animation-delay:.9s}.chip-rate{animation-delay:1.1s}
@supports (animation-timeline:scroll()){
  .hero-visual{animation:drift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes drift{to{transform:translateY(54px)}}
}

/* reserva rápida */
.book-wrap{position:relative;z-index:5;margin-top:calc(-1*clamp(3.2rem,6vw,4.4rem))}
.book{background:var(--bone);border:1px solid var(--hair-dark);border-radius:20px;padding:1.5rem 1.6rem 1.3rem;box-shadow:0 40px 80px -40px rgba(13,21,16,.55),0 2px 0 rgba(255,255,255,.7) inset}
.book-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.book-top h2{font-size:1.7rem;line-height:1}
.book-top p{font-size:.8rem;color:var(--ink-soft)}
.book-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.25fr auto;gap:.8rem;align-items:end}
.fld{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.fld > label,.fld > .lbl{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.inp{width:100%;height:52px;border:1px solid var(--hair-dark);background:#fff;border-radius:12px;padding:0 .9rem;font:inherit;font-size:1rem;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease;min-width:0}
.inp:focus-visible{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(217,172,95,.28)}
.stepper{display:flex;align-items:center;justify-content:space-between;height:52px;border:1px solid var(--hair-dark);background:#fff;border-radius:12px;padding:0 .35rem}
.stepper button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background-color .2s ease,transform 160ms var(--ease-out)}
.stepper button:active{transform:scale(.92)}
.stepper output{font-weight:600;font-size:1rem}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;height:52px;border:1px solid var(--hair-dark);background:#fff;border-radius:12px;padding:4px}
.seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--jungle-900);border-radius:8px;transition:transform .45s var(--ease-out)}
.seg[data-v="ac"]::before{transform:translateX(100%)}
.seg button{position:relative;z-index:1;font-size:.86rem;font-weight:600;color:var(--ink-soft);border-radius:8px;transition:color .3s ease}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{color:var(--paper)}
.book .btn{height:52px;padding-inline:1.5rem}
.book-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--hair-dark);font-size:.82rem;color:var(--ink-soft)}
.switch{display:inline-flex;align-items:center;gap:.7rem;font-weight:500;color:var(--ink)}
.switch .track{width:42px;height:24px;border-radius:999px;background:rgba(23,25,15,.2);position:relative;transition:background-color .3s ease;flex:none}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .35s var(--ease-out)}
.switch[aria-checked="true"] .track{background:var(--jungle-700)}
.switch[aria-checked="true"] .track::after{transform:translateX(18px)}
@media (hover:hover) and (pointer:fine){.stepper button:hover{background:var(--paper)}}

/* datos clave */
.facts{background:var(--paper);padding:clamp(3.4rem,6vw,5rem) 0 clamp(3rem,5vw,4.5rem)}
.facts-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--hair-dark)}
.fact{padding:1.6rem 1.4rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.fact + .fact{padding-left:1.4rem;border-left:1px solid var(--hair-dark)}
.fact .i{color:var(--clay);width:1.7rem;height:1.7rem;stroke-width:1.3}
.fact b{font-family:var(--font-display);font-weight:500;font-size:1.6rem;line-height:1.05;display:block}
.fact span{font-size:.84rem;color:var(--ink-soft);line-height:1.4}

/* manifiesto */
.manifest{display:grid;grid-template-columns:.7fr 1.3fr;gap:3rem 5rem}
.manifest .big{font-family:var(--font-display);font-size:clamp(1.9rem,3.6vw,3.15rem);line-height:1.12;letter-spacing:-.01em;text-wrap:pretty}
.manifest .big em{color:var(--clay)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3.2rem}
.pillar .ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--hair-dark);background:var(--paper);color:var(--clay);margin-bottom:1.1rem}
.pillar h3{font-size:1.65rem;margin-bottom:.5rem}
.pillar p{font-size:.95rem;color:var(--ink-soft);line-height:1.6}
.manifest-side{display:flex;flex-direction:column;gap:1.6rem}
.slogan-mark{font-family:var(--font-display);font-style:italic;font-size:1.45rem;color:var(--clay);display:flex;align-items:center;gap:.9rem;margin-top:1.4rem}
.slogan-mark::before{content:"";width:40px;height:1px;background:var(--clay);opacity:.6}

/* habitaciones */
.rooms{display:grid;grid-template-columns:1fr .92fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.stage{display:grid;position:relative}
.pane{grid-area:1/1;position:relative;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out),visibility 0s linear .55s}
.pane.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.shot{display:block;position:relative;overflow:hidden;width:100%;cursor:zoom-in}
.shot img{width:100%;height:100%;object-fit:cover}
.shot-main{aspect-ratio:4/5;border-radius:999px 999px 8px 8px;width:82%;margin-left:auto}
.shot-sub{position:absolute;left:0;bottom:-1.6rem;width:42%;aspect-ratio:3/4;border-radius:12px;border:6px solid var(--jungle-900);box-shadow:0 24px 50px -18px rgba(0,0,0,.6)}
.shot .zoom{position:absolute;right:.8rem;bottom:.8rem;width:38px;height:38px;border-radius:50%;background:rgba(13,21,16,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--paper);opacity:0;transform:scale(.9);transition:opacity .25s ease,transform .3s var(--ease-out)}
.shot .zoom .i{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
  .shot:hover .zoom{opacity:1;transform:none}
  .shot img{transition:transform 1s var(--ease-out)}
  .shot:hover img{transform:scale(1.04)}
}
.room-panel .eyebrow{margin-bottom:1.1rem}
.room-panel h2{margin-bottom:1.4rem;max-width:12ch}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair-light);border-radius:999px;padding:4px;margin:2rem 0 1.8rem;background:rgba(241,236,221,.04)}
.tabs::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--grad-gold);transition:transform .5s var(--ease-out)}
.tabs[data-v="ac"]::before{transform:translateX(100%)}
.tabs button{position:relative;z-index:1;height:46px;border-radius:999px;font-weight:600;font-size:.88rem;display:flex;align-items:center;justify-content:center;gap:.55rem;color:rgba(241,236,221,.75);transition:color .3s ease}
.tabs button[aria-selected="true"]{color:var(--jungle-950)}
.price{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;min-height:4.2rem}
.price .from{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);font-weight:600}
.price .amount{font-family:var(--font-display);font-size:clamp(3.4rem,6vw,4.8rem);line-height:.9;font-weight:400}
.price .per{font-size:.9rem;color:rgba(241,236,221,.7)}
.price .swap{transition:opacity .25s ease,transform .35s var(--ease-out)}
.price.out .swap{opacity:0;transform:translateY(8px)}
.price-note{margin-top:.8rem;min-height:3.1rem;font-size:.92rem;color:rgba(241,236,221,.72);max-width:44ch;transition:opacity .25s ease}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:.95rem 1.4rem;margin:1.6rem 0 1.8rem;padding-top:1.6rem;border-top:1px solid var(--hair-light)}
.feats li{display:flex;align-items:center;gap:.75rem;font-size:.92rem}
.feats .i{color:var(--gold-400);width:1.35rem;height:1.35rem}
.switch-dark{color:var(--paper);margin-bottom:1.8rem}
.switch-dark .track{background:rgba(241,236,221,.22)}
.switch-dark[aria-checked="true"] .track{background:var(--gold-500)}

/* amenidades */
.amen{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hair-dark);border:1px solid var(--hair-dark);border-radius:18px;overflow:hidden}
.amen li{background:var(--bone);padding:1.8rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:1rem;position:relative;isolation:isolate;min-height:168px}
.amen li::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(217,172,95,.22),transparent 65%);opacity:0;transition:opacity .35s ease;z-index:-1}
@media (hover:hover) and (pointer:fine){.amen li:hover::after{opacity:1}}
.amen .i{width:2rem;height:2rem;stroke-width:1.25;color:var(--clay)}
.amen b{font-family:var(--font-display);font-size:1.4rem;font-weight:500;line-height:1.1}
.amen small{font-size:.82rem;color:var(--ink-soft);line-height:1.45;margin-top:-.5rem}
.amen-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.2rem)}
.amen-head h2{margin-top:1.1rem;max-width:16ch}

/* recorrido */
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3rem)}
.rail-head h2{margin-top:1.1rem;max-width:14ch}
.rail-ctrl{display:flex;gap:.6rem}
.round{width:52px;height:52px;border-radius:50%;border:1px solid var(--hair-light);display:grid;place-items:center;color:var(--paper);transition:transform 160ms var(--ease-out),background-color .25s ease,border-color .25s ease,opacity .25s ease}
.round:active{transform:scale(.93)}
.round[disabled]{opacity:.3;pointer-events:none}
@media (hover:hover) and (pointer:fine){.round:hover{border-color:var(--gold-400);background:rgba(217,172,95,.12);color:var(--gold-300)}}
.rail{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--edge) 1rem;scroll-padding-inline:var(--edge);scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail.drag{scroll-snap-type:none;cursor:grabbing;scroll-behavior:auto}
.rail.drag *{pointer-events:none}
.tile{flex:0 0 clamp(250px,26vw,340px);scroll-snap-align:start}
.tile:nth-child(even){margin-top:3rem}
.tile .shot{aspect-ratio:3/4;border-radius:999px 999px 10px 10px}
.tile.flat .shot{border-radius:12px}
.tile figcaption{padding-top:1rem;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.tile figcaption b{font-family:var(--font-display);font-size:1.35rem;font-weight:500}
.tile figcaption span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,236,221,.55)}
.rail-bar{height:2px;background:var(--hair-light);margin:2rem auto 0;max-width:calc(var(--max) - 2*var(--pad));width:calc(100% - 2*var(--pad));position:relative;overflow:hidden;border-radius:2px}
.rail-bar i{position:absolute;inset:0;background:var(--grad-gold);transform-origin:0 50%;transform:scaleX(.1);transition:transform .2s linear}

/* reseñas */
.rev-top{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-bottom:2.4rem}
.rev-score{font-family:var(--font-display);font-size:clamp(4rem,8vw,6rem);line-height:.8;font-weight:400}
.stars{display:flex;gap:.2rem;color:var(--gold-500)}
.stars .i{width:1.1rem;height:1.1rem}
.stars .off{color:rgba(23,25,15,.2)}
.rev-meta small{display:block;font-size:.84rem;color:var(--ink-soft);margin-top:.4rem}
.reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.1rem}
.review{background:var(--bone);border:1px solid var(--hair-dark);border-radius:18px;padding:1.5rem;display:flex;flex-direction:column;gap:.9rem;position:relative;isolation:isolate;overflow:hidden}
.review::after{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(217,172,95,.2),transparent 65%);opacity:0;transition:opacity .35s ease;z-index:-1}
@media (hover:hover) and (pointer:fine){.review:hover::after{opacity:1}}
.review .who{display:flex;align-items:center;gap:.8rem}
.review .av{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--paper);flex:none}
.review .avf{width:42px;height:42px;border-radius:50%;background:var(--jungle-800);color:var(--gold-300);display:grid;place-items:center;font-weight:700;flex:none}
.review .nm{font-weight:600;font-size:.94rem;line-height:1.2}
.review .wh{font-size:.76rem;color:var(--ink-soft)}
.review p{font-size:.94rem;line-height:1.65;color:var(--ink)}
.rev-state{color:var(--ink-soft);font-style:italic}
.rev-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem;align-items:center}
.attrib{font-size:.74rem;color:var(--ink-soft);display:inline-flex;gap:.45rem;align-items:center;margin-left:auto}
.skel{height:190px;border-radius:18px;background:linear-gradient(100deg,rgba(23,25,15,.05) 30%,rgba(23,25,15,.1) 50%,rgba(23,25,15,.05) 70%);background-size:300% 100%;animation:sk 1.6s linear infinite}
@keyframes sk{to{background-position:-300% 0}}

/* ubicación */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.loc h2{margin:1.1rem 0 1.4rem;max-width:13ch}
.loc .lead{margin-bottom:2rem}
.contact{display:grid;gap:0;border-top:1px solid var(--hair-light);margin-bottom:2rem}
.contact li{display:flex;gap:1rem;align-items:flex-start;padding:1.05rem 0;border-bottom:1px solid var(--hair-light);font-size:.96rem}
.contact .i{color:var(--gold-400);margin-top:.15rem;width:1.3rem;height:1.3rem}
.contact small{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(241,236,221,.5);margin-bottom:.2rem}
.contact a{text-decoration:none}
.loc-visual{position:relative}
.loc-photo{aspect-ratio:4/5;border-radius:999px 999px 10px 10px;overflow:hidden;width:86%;margin-left:auto;background:var(--jungle-800)}
.loc-photo img{width:100%;height:100%;object-fit:cover;object-position:82% 50%}
.tri{position:absolute;left:0;bottom:-1.8rem;width:min(62%,300px);background:rgba(248,244,234,.96);color:var(--ink);border-radius:18px;padding:1.1rem 1.1rem .9rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.tri svg{width:100%;height:auto;display:block}
.tri .t-line{stroke:var(--ink);stroke-opacity:.28;stroke-width:1.2;stroke-dasharray:3 5;fill:none}
.tri .t-fill{fill:rgba(217,172,95,.14)}
.tri .t-dot{fill:var(--ink-soft)}
.tri .t-main{fill:var(--clay)}
.tri .t-pulse{fill:var(--clay);opacity:.0;transform-box:fill-box;transform-origin:center;animation:ping 2.6s var(--ease-out) infinite}
@keyframes ping{0%{opacity:.4;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
.tri text{font-family:var(--font-body);font-size:11px;font-weight:600;fill:var(--ink)}
.tri figcaption{font-size:.7rem;color:var(--ink-soft);margin-top:.2rem;line-height:1.4}

/* Rosita / triángulo minero */
.zone{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem 6rem;align-items:start}
.zone h2{margin-top:1.1rem;max-width:13ch;font-size:clamp(2.3rem,4.4vw,3.8rem)}
.zone-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.zone-cols article{padding-top:1.6rem;border-top:1px solid var(--hair-dark)}
.zone-cols .i{color:var(--clay);width:1.8rem;height:1.8rem;stroke-width:1.3;margin-bottom:1rem}
.zone-cols h3{font-size:1.6rem;margin-bottom:.6rem}
.zone-cols p{font-size:.94rem;color:var(--ink-soft);line-height:1.65}
.zone-text{margin-top:0;grid-column:2;max-width:68ch;font-size:1.02rem;color:var(--ink-soft);margin-top:.5rem}
.zone-text strong{color:var(--ink);font-weight:600}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem 6rem;align-items:start}
.faq-side{position:sticky;top:110px}
.faq-side h2{margin:1.1rem 0 1.4rem;max-width:11ch}
.faq-side .lead{margin-bottom:1.8rem}
.qa{border-bottom:1px solid var(--hair-dark)}
.qa:first-child{border-top:1px solid var(--hair-dark)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.45rem 0;font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.2;-webkit-tap-highlight-color:transparent}
.qa summary::-webkit-details-marker{display:none}
.qa .pm{width:38px;height:38px;border-radius:50%;border:1px solid var(--hair-dark);display:grid;place-items:center;flex:none;color:var(--clay);transition:transform .45s var(--ease-out),background-color .25s ease,color .25s ease,border-color .25s ease}
.qa[open] .pm{transform:rotate(135deg);background:var(--clay);border-color:var(--clay);color:#fff}
.qa .ans{padding:0 3.5rem 1.6rem 0;color:var(--ink-soft);font-size:.98rem;max-width:62ch}
.qa::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease-out),content-visibility .45s allow-discrete}
.qa[open]::details-content{block-size:auto}

/* cierre */
.close{position:relative;color:var(--paper);overflow:hidden;isolation:isolate;text-align:center;padding-block:clamp(6rem,13vw,10rem)}
.close .bgimg{position:absolute;inset:0;z-index:-2}
.close .bgimg img{width:100%;height:100%;object-fit:cover;object-position:40% 55%}
.close::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 50%,rgba(13,21,16,.86),rgba(13,21,16,.62)),linear-gradient(180deg,rgba(13,21,16,.55),rgba(13,21,16,.9))}
.close .logo{width:92px;margin:0 auto 1.6rem;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.close .eyebrow{color:var(--gold-400);justify-content:center}
.close h2{font-size:clamp(2.8rem,7vw,6rem);max-width:14ch;margin:1.4rem auto 1rem}
.close h2 em{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.close .slogan{font-family:var(--font-display);font-style:italic;font-size:1.5rem;color:var(--gold-300);margin-bottom:2.2rem}
.close .cta-row{justify-content:center}

footer{background:var(--jungle-950);color:var(--paper);padding:clamp(3.5rem,6vw,5rem) 0 1.6rem;position:relative;isolation:isolate}
footer::before{content:"";position:absolute;inset:0;background:var(--grain);z-index:-1;pointer-events:none}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid var(--hair-light)}
.foot-grid p{font-size:.9rem;color:rgba(241,236,221,.66);max-width:34ch;margin-top:1rem}
.foot-grid h3{font-family:var(--font-body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400);font-weight:600;margin-bottom:1.1rem}
.foot-grid li{margin-bottom:.65rem;font-size:.92rem}
.foot-grid a{text-decoration:none;color:rgba(241,236,221,.8);transition:color .2s ease}
@media (hover:hover) and (pointer:fine){.foot-grid a:hover{color:var(--gold-300)}}
.social{display:flex;gap:.6rem;flex-wrap:wrap}
.social a{width:46px;height:46px;border-radius:50%;border:1px solid var(--hair-light);display:grid;place-items:center;transition:border-color .25s ease,background-color .25s ease,transform 160ms var(--ease-out)}
.social a:active{transform:scale(.93)}
@media (hover:hover) and (pointer:fine){.social a:hover{border-color:var(--gold-400);background:rgba(217,172,95,.12)}}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.4rem;font-size:.78rem;color:rgba(241,236,221,.55)}
.foot-bottom a{color:inherit}

/* whatsapp flotante */
.wa{position:fixed;right:1.2rem;bottom:1.2rem;z-index:450;display:flex;align-items:center;gap:.6rem;background:var(--whats);color:#fff;padding:.95rem 1.2rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.88rem;box-shadow:0 14px 34px -8px rgba(0,0,0,.45);transition:transform 160ms var(--ease-out),opacity .4s var(--ease-out),visibility 0s;opacity:0;visibility:hidden;transform:translateY(14px)}
.wa.show{opacity:1;visibility:visible;transform:none}
.wa:active{transform:scale(.96)}
.wa .i-b{width:1.4rem;height:1.4rem}
@media (hover:hover) and (pointer:fine){.wa:hover{transform:translateY(-3px)}}

/* lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;color:var(--paper);overflow:hidden}
dialog.lb::backdrop{background:rgba(8,13,10,.95)}
.lb-in{position:relative;width:100%;height:100%;display:grid;grid-template-rows:1fr auto;place-items:center;padding:4.5rem 1rem 1.2rem}
.lb-img{max-width:min(94vw,1100px);max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6);touch-action:pan-y}
.lb-img.in{animation:lbIn .35s var(--ease-out)}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lb-cap{display:flex;gap:1rem;align-items:baseline;justify-content:center;padding-top:1rem;font-size:.9rem;color:rgba(241,236,221,.8)}
.lb-cap b{font-family:var(--font-display);font-size:1.4rem;font-weight:500;color:var(--paper)}
.lb-cap span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400)}
.lb-btn{position:absolute;width:50px;height:50px;border-radius:50%;border:1px solid var(--hair-light);background:rgba(13,21,16,.55);display:grid;place-items:center;color:var(--paper);z-index:2;transition:transform 160ms var(--ease-out),border-color .25s ease}
.lb-btn:active{transform:scale(.93)}
.lb-close{top:1rem;right:1rem}
.lb-prev,.lb-next{top:50%;margin-top:-25px}
.lb-prev{left:1rem}.lb-next{right:1rem}
@media (hover:hover) and (pointer:fine){.lb-btn:hover{border-color:var(--gold-400)}}

/* revelado */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .rv-arch{opacity:0;clip-path:inset(18% 6% 0 6% round 999px 999px 0 0);transition:opacity .9s var(--ease-out),clip-path 1.3s var(--ease-out);transition-delay:var(--d,0ms)}
.js .rv-arch.in{opacity:1;clip-path:inset(0 0 0 0 round 999px 999px 0 0)}

/* responsive */
@media (max-width:1060px){
  .book-grid{grid-template-columns:1fr 1fr 1fr}
  .book-grid .fld-room{grid-column:1/3}
  .book-grid .btn{grid-column:3}
  .facts-grid{grid-template-columns:repeat(3,1fr)}
  .fact:nth-child(4){border-left:0;padding-left:0}
  .fact:nth-child(n+4){margin-top:1.4rem}
  .amen{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .chip-price{left:-1rem}.chip-rate{right:-.6rem}
}
@media (max-width:860px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  .brand-logo img{width:54px}
  .hero{padding-top:7rem}
  .hero-grid{grid-template-columns:1fr}
  .hero h1{max-width:12ch}
  .hero-visual{width:min(86%,400px);margin-top:1rem}
  .chip-price{left:-1rem;bottom:2rem}
  .chip-rate{right:-.4rem;top:4.2rem}
  .sec-head,.manifest,.zone,.faq,.loc,.rooms{grid-template-columns:1fr}
  .sec-head .lead{justify-self:start}
  .pillars{grid-template-columns:1fr;gap:1.8rem}
  .rooms{gap:3.5rem}
  .shot-sub{bottom:-1.2rem}
  .zone-cols{grid-template-columns:1fr}
  .zone-text{grid-column:1}
  .faq-side{position:static}
  .tile:nth-child(even){margin-top:1.6rem}
  .loc-photo{width:90%}
  .foot-grid{grid-template-columns:1fr}
  .qa .ans{padding-right:0}
  .wa span{display:none}
  .wa{padding:1rem}
}
@media (max-width:640px){
  .book{padding:1.2rem 1.1rem}
  .book-grid{grid-template-columns:1fr 1fr}
  .book-grid .fld-room{grid-column:1/-1}
  .book-grid .btn{grid-column:1/-1}
  .fld-guests{grid-column:1/-1}
  .facts-grid{grid-template-columns:1fr 1fr}
  .fact{padding:1.3rem .8rem 0 0}
  .fact + .fact{padding-left:0;border-left:0}
  .fact:nth-child(even){padding-left:1rem;border-left:1px solid var(--hair-dark)}
  .fact:nth-child(n+3){margin-top:0}
  .fact:last-child{grid-column:1/-1;border-left:0;padding-left:0}
  .amen{grid-template-columns:1fr 1fr}
  .amen li{padding:1.3rem 1rem;min-height:150px}
  .amen b{font-size:1.2rem}
  .feats{grid-template-columns:1fr}
  .rev-actions .attrib{margin-left:0;width:100%}
  .close .cta-row .btn{width:100%}
  .hero .cta-row .btn{flex:1 1 auto}
  .lb-prev,.lb-next{top:auto;bottom:4.2rem;margin:0}
  .lb-prev{left:calc(50% - 60px)}.lb-next{right:calc(50% - 60px)}
  .lb-in{padding-bottom:5.5rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .rv,.js .rv-arch{opacity:1;transform:none;clip-path:none}
  .hero-visual{animation:none!important}
}