/* ============================================================
   Luna Andes — demo cinematografico para agencia de viajes
   Direccion: lujo editorial. Serif ancha, fotografia a sangre,
   tinta calida y crema alternandose. Nada de negro plano.
   ============================================================ */

:root{
  --ink:#12100d; --ink-2:#1b1713; --ink-3:#272119;
  --cream:#f4efe6; --cream-2:#e9e1d3; --cream-3:#d8cdba;
  --gold:#c19a45; --gold-2:#e0c281; --terra:#a55e3c;
  --on-dark:#efe8dc; --on-dark-mut:#a79c8b;
  --on-cream:#191510; --on-cream-mut:#6a6055;
  --wrap:1320px; --gut:clamp(1.25rem,4vw,3.5rem);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --e:cubic-bezier(.19,1,.22,1); --e2:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis{scroll-behavior:auto}
body{
  margin:0; background:var(--ink); color:var(--on-dark);
  font-family:var(--sans); font-size:clamp(.95rem,.9rem+.2vw,1.02rem);
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.lock{overflow:hidden}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
.wrap{width:min(100% - var(--gut)*2, var(--wrap)); margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:-999px;top:0;z-index:200;background:var(--gold);color:var(--ink);padding:.8rem 1.2rem;font-weight:600}
.skip:focus{left:1rem;top:1rem}

/* ---------- tipografia ---------- */
.dsp{
  font-family:var(--serif); font-weight:300; line-height:.98;
  letter-spacing:-.015em; margin:0; text-wrap:balance;
}
.dsp em{font-style:italic; color:var(--gold-2)}
.h-xl{font-size:clamp(3rem,9.5vw,9.5rem)}
.h-lg{font-size:clamp(2.4rem,6.4vw,6rem)}
.h-md{font-size:clamp(1.9rem,4.2vw,3.6rem)}
.kicker{
  font-family:var(--sans); font-size:.68rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.9rem; margin:0 0 1.8rem;
}
.kicker::before{content:""; width:2.4rem; height:1px; background:currentColor}
.lede{font-size:clamp(1rem,.95rem+.35vw,1.2rem); color:var(--on-dark-mut); max-width:56ch; text-wrap:pretty}
.on-cream .lede{color:var(--on-cream-mut)}

/* ---------- secciones ---------- */
section{position:relative; padding:clamp(5rem,11vh,10rem) 0}
.on-cream{background:var(--cream); color:var(--on-cream)}
.on-cream .kicker{color:var(--terra)}
.on-cream .dsp em{color:var(--terra)}
.on-ink-2{background:var(--ink-2)}

/* ---------- preloader ---------- */
#pre{
  position:fixed; inset:0; z-index:300; background:var(--ink);
  display:grid; place-items:center; transition:opacity .8s var(--e),visibility .8s;
}
#pre.done{opacity:0; visibility:hidden}
.pre-in{text-align:center}
.pre-in img{width:70px; margin:0 auto 1.3rem; opacity:.9}
.pre-in span{
  display:block; font-family:var(--serif); font-size:1.5rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--on-dark); margin-bottom:1.4rem;
}
.pre-bar{width:150px; height:1px; background:rgba(255,255,255,.16); margin:0 auto; overflow:hidden}
.pre-bar i{display:block; height:100%; width:0; background:var(--gold); transition:width .3s linear}

/* ---------- cursor ---------- */
.cur,.cur-r{position:fixed; top:0; left:0; z-index:250; pointer-events:none; border-radius:50%; mix-blend-mode:difference}
.cur{width:6px; height:6px; background:var(--cream); margin:-3px 0 0 -3px}
.cur-r{width:34px; height:34px; border:1px solid rgba(244,239,230,.5); margin:-17px 0 0 -17px; transition:width .3s var(--e),height .3s var(--e),margin .3s var(--e),opacity .3s}
.cur-r.big{width:70px; height:70px; margin:-35px 0 0 -35px; border-color:var(--gold)}
@media (hover:none),(pointer:coarse){.cur,.cur-r{display:none}}

/* ---------- navegacion ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:100; padding:1.5rem 0;
  transition:background .5s var(--e),padding .5s var(--e),border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(18,16,13,.9); backdrop-filter:blur(18px); padding:.85rem 0; border-color:rgba(239,232,220,.1)}
.nav-in{display:flex; align-items:center; gap:1.5rem}
.brand{display:flex; align-items:center; gap:.75rem; margin-right:auto}
.brand img{width:40px; height:40px; object-fit:contain; transition:transform .5s var(--e)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.brand b{font-family:var(--serif); font-size:1.2rem; font-weight:400; letter-spacing:.14em; text-transform:uppercase; line-height:1}
.brand i{display:block; font-style:normal; font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--on-dark-mut); margin-top:.3rem}
.nav-links{display:flex; gap:2.1rem}
.nav-links a{font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--on-dark); opacity:.72; position:relative; padding:.4rem 0; transition:opacity .3s}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .45s var(--e)}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{width:100%}
@media (max-width:1080px){.nav-links{display:none}}

.lang{display:flex; gap:.15rem; align-items:center; font-size:.7rem; letter-spacing:.12em}
.lang button{background:none; border:0; color:var(--on-dark); opacity:.45; padding:.35rem .3rem; transition:opacity .3s}
.lang button[aria-pressed="true"]{opacity:1; color:var(--gold)}
.lang span{opacity:.3}

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.9rem; border:1px solid var(--gold); background:transparent; color:var(--gold);
  font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  overflow:hidden; min-height:46px; border-radius:0; isolation:isolate;
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--gold); z-index:-1;
  transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--e);
}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:scaleY(1); transform-origin:top}
.btn.solid{background:var(--gold); color:var(--ink)}
.btn.solid::before{background:var(--cream)}
.on-cream .btn{border-color:var(--on-cream); color:var(--on-cream)}
.on-cream .btn::before{background:var(--on-cream)}
.on-cream .btn:hover{color:var(--cream)}
.on-cream .result .btn{border-color:var(--gold); color:var(--gold)}
.on-cream .result .btn::before{background:var(--gold)}
.on-cream .result .btn:hover{color:var(--ink)}
.burger{display:none; width:44px; height:44px; background:none; border:0; position:relative}
.burger i{position:absolute; left:11px; width:22px; height:1px; background:var(--on-dark); transition:transform .4s var(--e),opacity .3s}
.burger i:nth-child(1){top:18px} .burger i:nth-child(2){top:25px}
.burger.on i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.on i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:1080px){.burger{display:block}}

#menu{
  position:fixed; inset:0; z-index:99; background:var(--ink); display:grid; place-items:center;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--e); visibility:hidden;
}
#menu.on{clip-path:inset(0 0 0 0); visibility:visible}
#menu nav{display:flex; flex-direction:column; gap:.4rem; text-align:center}
#menu a{
  font-family:var(--serif); font-size:clamp(2rem,8vw,3.4rem); font-weight:300; line-height:1.25;
  opacity:0; transform:translateY(24px); transition:opacity .6s var(--e),transform .6s var(--e),color .3s;
}
#menu.on a{opacity:1; transform:none}
#menu a:hover{color:var(--gold-2); font-style:italic}

/* ---------- hero ---------- */
.hero{height:100svh; min-height:600px; padding:0; display:flex; align-items:flex-end; overflow:hidden}
.hero-bg{position:absolute; inset:0; overflow:hidden}
.hero-bg img{
  width:100%; height:120%; object-fit:cover; will-change:transform;
  animation:kb 26s var(--e2) infinite alternate;
}
@keyframes kb{from{transform:scale(1.06) translateY(0)} to{transform:scale(1.2) translateY(-2%)}}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(18,16,13,.72) 0%,rgba(18,16,13,.22) 38%,rgba(18,16,13,.55) 72%,var(--ink) 100%);
}
.hero-in{position:relative; z-index:2; padding-bottom:clamp(3.5rem,9vh,7rem)}
.hero h1{max-width:16ch}
.hero .lede{margin:1.8rem 0 2.4rem}
.hero-cta{display:flex; gap:1rem; flex-wrap:wrap; align-items:center}

/* revelado de titulo por lineas */
.rl{display:block; overflow:hidden}
.rl>span{display:block; transform:translateY(105%); transition:transform 1.1s var(--e)}
.on .rl>span{transform:none}
.rl:nth-child(2)>span{transition-delay:.11s}
.rl:nth-child(3)>span{transition-delay:.22s}

.scroller{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--on-dark-mut);
}
.scroller i{display:block; width:1px; height:52px; background:linear-gradient(var(--gold),transparent); animation:sc 2.4s var(--e2) infinite}
@keyframes sc{0%{transform:scaleY(0); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}51%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* ---------- marquesina ---------- */
.mq{border-block:1px solid rgba(239,232,220,.12); padding:1.5rem 0; overflow:hidden; background:var(--ink-2)}
.mq-t{display:flex; gap:3.5rem; width:max-content; animation:mv 42s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
@keyframes mv{to{transform:translateX(-50%)}}
.mq-t span{font-family:var(--serif); font-size:clamp(1.4rem,3vw,2.3rem); font-weight:300; letter-spacing:.02em; color:var(--on-dark-mut); display:flex; align-items:center; gap:3.5rem; white-space:nowrap}
.mq-t span::after{content:"◆"; font-size:.42em; color:var(--gold)}

/* ---------- manifiesto con parallax ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.pfig{position:relative; overflow:hidden; aspect-ratio:4/5}
.pfig img{width:100%; height:118%; object-fit:cover; will-change:transform}
.pfig.tall{aspect-ratio:3/4}
.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--cream-3)}
.on-cream .stats-row{border-color:rgba(25,21,16,.14)}
.stat b{display:block; font-family:var(--serif); font-size:clamp(2.3rem,5vw,3.6rem); font-weight:300; line-height:1; color:var(--terra)}
.stat span{display:block; font-size:.64rem; letter-spacing:.19em; text-transform:uppercase; color:var(--on-cream-mut); margin-top:.7rem}

/* ---------- explorador de destinos ---------- */
.tabs{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:3rem}
.tab{
  background:none; border:1px solid rgba(239,232,220,.2); color:var(--on-dark); opacity:.6;
  padding:.7rem 1.35rem; font-size:.67rem; letter-spacing:.17em; text-transform:uppercase;
  min-height:42px; transition:all .45s var(--e);
}
.tab:hover{opacity:1; border-color:var(--gold)}
.tab[aria-selected="true"]{background:var(--gold); border-color:var(--gold); color:var(--ink); opacity:1}
.dest{display:flex; flex-wrap:wrap; gap:1px; background:rgba(239,232,220,.12)}
.dcard{
  flex:1 1 290px; position:relative; min-height:clamp(340px,46vh,470px); overflow:hidden; background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:flex-end; padding:2rem 1.7rem;
  opacity:0; transform:translateY(30px); transition:opacity .8s var(--e),transform .8s var(--e);
}
.dcard.in{opacity:1; transform:none}
.dcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--e),filter 1s; filter:saturate(.75) brightness(.62)}
.dcard:hover img{transform:scale(1.09); filter:saturate(1) brightness(.72)}
.dcard>*{position:relative; z-index:1}
.dcard::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(18,16,13,.96) 12%,rgba(18,16,13,.72) 45%,rgba(18,16,13,.15) 80%); z-index:0}
.dcard h3{font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.4rem); font-weight:300; margin:0 0 .4rem; line-height:1.05}
.dcard .rg{font-size:.63rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 .9rem}
.dcard .ds{font-size:.83rem; color:var(--on-dark-mut); margin:0 0 1.2rem; max-width:38ch}
.dcard .go{display:inline-flex; align-items:center; gap:.6rem; background:none; border:0; padding:0;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark); transition:color .3s}
.dcard .go:hover{color:var(--gold-2)}
.dcard .go svg{width:20px; transition:transform .5s var(--e)}
.dcard:hover .go svg{transform:translateX(7px)}

/* ---------- constructor de viaje ---------- */
.bld{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem)}
@media (max-width:980px){.bld{grid-template-columns:1fr}}
.step{margin-bottom:2.3rem}
.step>p{font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-cream-mut); margin:0 0 1rem}
.step>p b{color:var(--terra); font-weight:500; margin-right:.5rem}
.opts{display:flex; flex-wrap:wrap; gap:.5rem}
.opt{
  background:none; border:1px solid rgba(25,21,16,.2); color:var(--on-cream);
  padding:.72rem 1.25rem; font-size:.76rem; letter-spacing:.03em; min-height:44px;
  transition:all .4s var(--e);
}
.opt:hover{border-color:var(--terra)}
.opt[aria-pressed="true"]{background:var(--on-cream); border-color:var(--on-cream); color:var(--cream)}
.result{
  background:var(--ink); color:var(--on-dark); padding:clamp(1.8rem,4vw,2.8rem);
  position:sticky; top:6rem; align-self:start; min-height:340px;
}
.result .rk{font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 1.4rem}
.result h3{font-family:var(--serif); font-size:clamp(1.8rem,3.4vw,2.7rem); font-weight:300; line-height:1.05; margin:0 0 .7rem}
.result .rm{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-mut); margin:0 0 1.5rem}
.rlist{list-style:none; margin:0 0 1.8rem; padding:0}
.rlist li{display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid rgba(239,232,220,.12); font-size:.83rem}
.rlist li span:last-child{color:var(--gold-2); white-space:nowrap}
.rswap{animation:fade .6s var(--e)}
@keyframes fade{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.alt-list{margin-top:1.4rem; font-size:.76rem; color:var(--on-dark-mut)}
.alt-list b{color:var(--on-dark); font-weight:500}

/* ---------- carrusel horizontal ---------- */
.rail{display:flex; gap:1.2rem; overflow-x:auto; padding-bottom:2rem; scroll-snap-type:x mandatory; scrollbar-width:thin}
.rail::-webkit-scrollbar{height:2px}
.rail::-webkit-scrollbar-track{background:rgba(239,232,220,.12)}
.rail::-webkit-scrollbar-thumb{background:var(--gold)}
.xc{flex:none; width:min(80vw,380px); scroll-snap-align:start}
.xc figure{position:relative; margin:0 0 1.2rem; overflow:hidden; aspect-ratio:3/4}
.xc img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e)}
.xc:hover img{transform:scale(1.07)}
.xc .n{position:absolute; top:1rem; left:1rem; font-family:var(--serif); font-size:2.6rem; font-weight:300; color:var(--cream); mix-blend-mode:difference}
.xc h3{font-family:var(--serif); font-size:1.5rem; font-weight:300; margin:0 0 .4rem}
.xc p{font-size:.8rem; color:var(--on-dark-mut); margin:0}

/* ---------- escalera de altitud ---------- */
.ladder{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:rgba(239,232,220,.13)}
.rung{background:var(--ink); padding:2.2rem 1.5rem; position:relative; overflow:hidden}
.rung .rn{font-size:.6rem; letter-spacing:.22em; color:var(--gold); margin:0 0 1.6rem}
.rung .rh{font-family:var(--serif); font-size:clamp(2.4rem,4.6vw,3.4rem); font-weight:300; line-height:1; margin:0}
.rung .rh small{font-size:.3em; letter-spacing:.14em; color:var(--on-dark-mut); margin-left:.35rem}
.rung .rt{margin:.7rem 0 .3rem; font-size:.95rem}
.rung .rd{font-size:.74rem; color:var(--on-dark-mut); margin:0}
.rung .rb{position:absolute; left:0; bottom:0; height:2px; background:var(--gold); width:0; transition:width 1.6s var(--e)}

/* ---------- libro de visitas ---------- */
.bookrow{display:flex; gap:1.4rem; width:max-content; animation:mv 70s linear infinite}
.bookwrap{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bookwrap:hover .bookrow{animation-play-state:paused}
.pg{flex:none; width:230px; background:#f7f3ea; padding:7px; box-shadow:0 18px 40px rgba(0,0,0,.5); transform:rotate(var(--r)); transition:transform .6s var(--e)}
.pg:hover{transform:rotate(0) scale(1.06)}
.pg img{width:100%; height:290px; object-fit:cover; object-position:top}

/* ---------- formulario ---------- */
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
@media (max-width:700px){.fgrid{grid-template-columns:1fr}}
.f{position:relative}
.f label{display:block; font-size:.62rem; letter-spacing:.19em; text-transform:uppercase; color:var(--on-cream-mut); margin-bottom:.55rem}
.f input,.f select,.f textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(25,21,16,.25);
  color:var(--on-cream); font:400 1rem/1.6 var(--sans); padding:.7rem 0; min-height:46px;
  transition:border-color .4s;
}
.f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:var(--terra)}
.f textarea{resize:vertical; min-height:90px}
.f.wide{grid-column:1/-1}
.note{font-size:.74rem; color:var(--on-cream-mut); margin:1rem 0 0}
.sent{background:rgba(165,94,60,.1); border-left:2px solid var(--terra); padding:1.1rem 1.3rem; margin-top:1.4rem; font-size:.85rem; animation:fade .5s var(--e)}

/* ---------- pie ---------- */
footer{background:var(--ink-2); padding:clamp(4rem,8vh,7rem) 0 2.5rem; border-top:1px solid rgba(239,232,220,.1)}
.fcols{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:2.5rem; margin-bottom:3.5rem}
@media (max-width:900px){.fcols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fcols{grid-template-columns:1fr}}
footer h4{font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 1.3rem; font-weight:500}
footer a,footer address{display:block; color:var(--on-dark-mut); font-size:.85rem; font-style:normal; padding:.28rem 0; transition:color .3s}
footer a:hover{color:var(--gold-2)}
.certs{display:flex; gap:1rem; margin-top:1.6rem}
.certs img{width:44px; height:44px; object-fit:contain; opacity:.4; filter:grayscale(1); transition:all .4s}
.certs img:hover{opacity:1; filter:none}
.legal{border-top:1px solid rgba(239,232,220,.1); padding-top:1.8rem; display:flex; gap:1.2rem; justify-content:space-between; flex-wrap:wrap; font-size:.72rem; color:var(--on-dark-mut)}
.credits{margin-top:1rem; font-size:.68rem; color:rgba(167,156,139,.75); line-height:1.8}
.credits a{display:inline; color:inherit; text-decoration:underline; text-underline-offset:2px; padding:0}

/* ---------- cinta de demo ---------- */
.ribbon{
  position:fixed; right:0; bottom:0; z-index:90; background:var(--gold); color:var(--ink);
  font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; padding:.5rem 1rem; font-weight:500;
}
@media (max-width:640px){.ribbon{font-size:.54rem; padding:.4rem .7rem}}

/* ---------- revelado al hacer scroll ---------- */
.rev{opacity:0; transform:translateY(34px); transition:opacity 1s var(--e),transform 1s var(--e)}
.rev.in{opacity:1; transform:none}
.rev.d1{transition-delay:.1s}.rev.d2{transition-delay:.2s}.rev.d3{transition-delay:.3s}

/* ---------- movil ---------- */
@media (max-width:760px){
  .scroller{display:none}   /* se solapaba con los botones del hero */
  .nav .btn{display:none}          /* el menu ya lleva "Empezar" */
  .result{position:static}
  .stats-row{grid-template-columns:1fr; gap:1.6rem; text-align:left}
  .hero{min-height:540px}
  .pg{width:180px}
  .pg img{height:225px}
  .xc{width:78vw}
}
@media (max-width:420px){
  .brand i{display:none}
  .brand b{font-size:1rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .rev,.dcard{opacity:1!important; transform:none!important}
  .rl>span{transform:none!important}
  .hero-bg img{animation:none; height:100%}
  .mq-t,.bookrow{animation:none}
}