/* ============================================================
   LosMorrosScrollWorld — capa de experiencia (escenas, parallax,
   microvida, cards premium, transiciones, cursor magnético)
   Se apoya en las variables :root del index.
   ============================================================ */

/* ---------- base de profundidad / performance ---------- */
[data-depth]{will-change:transform}
.lm-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* ---------- HERO: polvo en suspensión ---------- */
.dust{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,247,235,.7);
  filter:blur(.4px);opacity:0;animation:dustFloat linear infinite}
@keyframes dustFloat{
  0%{opacity:0;transform:translateY(20px) translateX(0)}
  12%{opacity:.7}
  88%{opacity:.5}
  100%{opacity:0;transform:translateY(-120px) translateX(24px)}
}
.scroll-hint2{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.scroll-hint2 .mouse{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.55);border-radius:12px;position:relative}
.scroll-hint2 .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:#fff;transform:translateX(-50%);animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ---------- transiciones entre secciones (crestas / lomas) ---------- */
.sec-ridge{position:absolute;top:-1px;left:0;width:100%;height:70px;z-index:2;pointer-events:none;line-height:0;transform:translateY(-99%)}
.sec-ridge svg{width:100%;height:100%;display:block}
.sec-ridge.flip{top:auto;bottom:-1px;transform:translateY(99%) scaleY(-1)}

/* ---------- reveal cinematográfico de imágenes (máscara) ---------- */
.scene-mask{position:relative;overflow:hidden}
.scene-mask>img{clip-path:inset(0 0 100% 0);transform:scale(1.12);transition:none}
.scene-mask.shown>img{animation:maskIn 1.25s cubic-bezier(.22,.61,.27,1) forwards}
@keyframes maskIn{0%{clip-path:inset(0 0 100% 0);transform:scale(1.12)}100%{clip-path:inset(0 0 0 0);transform:scale(1)}}

/* ---------- ALOJAMIENTO: cards premium ---------- */
.stay-grid{perspective:1200px}
.stay-card{transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.stay-card .stay-photo img{will-change:transform}
.stay-card .stay-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 40%);opacity:0;transition:opacity .5s;mix-blend-mode:overlay}
.stay-card:hover .stay-photo::after{opacity:1}
.stay-body .btn{transition:transform .4s var(--ease),background .35s,color .35s,box-shadow .35s,border-color .35s}
/* huellitas entre cards */
.lm-tracks{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.lm-track{position:absolute;width:9px;height:13px;opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(var(--r,0deg));
  background:radial-gradient(ellipse 60% 100% at 50% 35%,var(--copper),transparent 70%);border-radius:50% 50% 45% 45%;filter:blur(.2px)}
.lm-track.on{animation:trackIn .5s var(--ease) forwards}
@keyframes trackIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(var(--r,0deg))}40%{opacity:.34}100%{opacity:.22;transform:translate(-50%,-50%) scale(1) rotate(var(--r,0deg))}}
/* sombra que cruza por detrás */
.lm-passing{position:absolute;z-index:0;width:120px;height:40px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(30,28,24,.22),transparent 70%);opacity:0;pointer-events:none;filter:blur(3px)}

/* ---------- EXPERIENCIA: micro-escenas cinematográficas ---------- */
.exp-item .ph{position:relative}
.exp-item .ph .glow{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.2s ease}
.exp-item.in .ph .glow{opacity:1}
.glow.dawn{background:radial-gradient(120% 80% at 70% 20%,rgba(255,221,168,.5),transparent 60%)}
.glow.dusk{background:radial-gradient(70% 60% at 32% 64%,rgba(255,170,92,.55),transparent 62%)}
.glow.ember{background:radial-gradient(50% 50% at 50% 92%,rgba(255,110,50,.5),transparent 60%)}
.glow.mount{background:linear-gradient(180deg,rgba(180,200,220,.18),transparent 50%)}
/* humo (chimenea / parrilla) */
.smoke{position:absolute;z-index:2;pointer-events:none}
.smoke i{position:absolute;bottom:0;width:14px;height:14px;border-radius:50%;background:rgba(245,241,234,.5);filter:blur(5px);opacity:0;
  animation:smokeRise var(--sd,5s) ease-in infinite}
.smoke i:nth-child(2){animation-delay:1.6s;left:6px}
.smoke i:nth-child(3){animation-delay:3.1s;left:-5px}
@keyframes smokeRise{0%{opacity:0;transform:translateY(0) scale(.7)}20%{opacity:.5}100%{opacity:0;transform:translateY(-70px) scale(2.1) translateX(10px)}}
.ember-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#ff7a33;filter:blur(.5px);box-shadow:0 0 8px 2px rgba(255,110,40,.7);opacity:.85;animation:emberPulse 2.4s ease-in-out infinite}
@keyframes emberPulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- SERVICIOS: microvida en íconos ---------- */
.serv-list .it{position:relative}
.serv-fx{position:absolute;left:0;top:2px;width:22px;height:22px;pointer-events:none}
.serv-fx.water span{position:absolute;left:50%;top:60%;width:6px;height:6px;border:1.4px solid var(--copper);border-radius:50%;transform:translate(-50%,-50%);opacity:0;animation:ripple 3.4s ease-out infinite}
.serv-fx.water span:nth-child(2){animation-delay:1.7s}
@keyframes ripple{0%{opacity:.6;width:4px;height:4px}100%{opacity:0;width:22px;height:22px}}
.serv-fx.leaf span{position:absolute;left:54%;top:30%;width:5px;height:7px;background:var(--olive);border-radius:0 60% 0 60%;transform-origin:bottom center;animation:leafSway 3.6s ease-in-out infinite}
@keyframes leafSway{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.serv-fx.wifi span{position:absolute;left:50%;bottom:18%;width:4px;height:4px;border-radius:50%;background:var(--copper);transform:translateX(-50%);box-shadow:0 0 0 0 rgba(165,106,67,.5);animation:wifiPulse 2.6s ease-out infinite}
@keyframes wifiPulse{0%{box-shadow:0 0 0 0 rgba(165,106,67,.45)}100%{box-shadow:0 0 0 11px rgba(165,106,67,0)}}
.serv-fx.smoke2 span{position:absolute;left:50%;bottom:24%;width:5px;height:5px;border-radius:50%;background:rgba(110,100,86,.5);filter:blur(2px);transform:translateX(-50%);animation:smokeRise 4s ease-in infinite}
.serv-fx.heat span{position:absolute;left:50%;bottom:24%;width:1.5px;height:10px;background:linear-gradient(transparent,rgba(165,106,67,.6));transform:translateX(-50%);animation:heatWave 2.6s ease-in-out infinite}
@keyframes heatWave{0%,100%{transform:translateX(-50%) skewX(0deg);opacity:.4}50%{transform:translateX(-50%) skewX(10deg);opacity:.8}}

/* ---------- UBICACIÓN: ruta que se dibuja + pin ---------- */
.loc{overflow:hidden}
.loc-route{position:absolute;inset:0;z-index:0;pointer-events:none}
.loc-route svg{position:absolute;inset:0;width:100%;height:100%}
.loc-route .rt{fill:none;stroke:var(--copper);stroke-width:2;stroke-linecap:round;stroke-dasharray:8 9;opacity:.5}
.loc-pin{position:absolute;width:26px;height:26px;transform:translate(-50%,-100%) scale(0);transform-origin:50% 100%}
.loc-pin svg{width:100%;height:100%;fill:var(--copper)}
.loc-pin.drop{animation:pinDrop .6s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes pinDrop{0%{transform:translate(-50%,-160%) scale(0)}70%{transform:translate(-50%,-100%) scale(1.15)}100%{transform:translate(-50%,-100%) scale(1)}}
.poi .p{position:relative;overflow:hidden}
.poi .p .fill{position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--copper);transition:width 1s var(--ease)}
.poi .p.lit .fill{width:100%}

/* ============================================================
   FONDO VIVO — el cielo viaja del amanecer a la noche
   (gradiente sol+cielo en el body via world.js; secciones translúcidas)
   ============================================================ */
html{background:#c9d4dc}
/* el cielo es un MISMO mundo que pasa de mañana a noche (capas fijas, crossfade por scroll en world.js) */
/* body transparente (!important porque el <style> del index pinta body:var(--bg) opaco y taparía el cielo) */
body{background:transparent!important}
/* ===== CIELO VIVO: capas <img> del mismo valle a distinta hora, crossfade por opacity ===== */
#sky-stage{position:fixed;inset:0;z-index:-3;overflow:hidden;background:#c9d4dc}
/* capas <img>: sólo se anima opacity. translateZ+backface = promoción a GPU estable → evita el titileo ("pantalla rota") al cruzar las imágenes. (El borroso que reportaban era el movimiento reducido, NO esto.) */
#sky-stage .sky-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
  opacity:0;will-change:opacity;transform:translateZ(0);backface-visibility:hidden}
/* chivito estático (solo para movimiento reducido): aparece en el hero sin animarse */
.lm-static-goat{position:absolute;right:7%;bottom:9%;width:96px;height:103px;z-index:3;pointer-events:none;
  background:url(assets/chivo-walk.png) no-repeat 0 0;background-size:600% 100%}
@media(max-width:768px){.lm-static-goat{width:72px;height:77px;right:8%;bottom:12%}}
#sky-stage .sky-tint{position:absolute;inset:0;opacity:0;pointer-events:none;will-change:opacity}
/* overlays SIN mix-blend-mode (evita recomposición/flicker); el color lo dan los propios frames */
#sky-stage .sky-warm{background:radial-gradient(120% 90% at 70% 32%,rgba(255,190,115,.55) 0%,rgba(255,150,70,.24) 48%,rgba(255,120,60,0) 100%)}
#sky-stage .sky-cool{background:linear-gradient(180deg,rgba(20,28,66,.60) 0%,rgba(14,18,46,.34) 55%,rgba(8,10,30,.55) 100%)}
#sky-stage .sky-stars{position:absolute;inset:0;opacity:0;pointer-events:none}
#sky-stage .sky-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 3px rgba(255,255,255,.7);animation:skyTwinkle var(--tw,3s) ease-in-out infinite alternate}
@keyframes skyTwinkle{from{opacity:.12}to{opacity:.95}}
/* viñeta atmosférica muy sutil para dar profundidad cinematográfica */
#sky-veil{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(125% 85% at 50% 22%,rgba(0,0,0,0) 58%,rgba(0,0,0,.16) 100%)}
@media(prefers-reduced-motion:reduce){#sky-stage .sky-stars i{animation:none;opacity:.7}}
/* CTA final: overlay nocturno sobre el cielo vivo (continuidad del mundo) */
.cta::after{background:linear-gradient(180deg,rgba(8,10,26,.34) 0%,rgba(8,10,26,.14) 42%,rgba(8,10,26,.5) 100%)!important}
/* secciones flotando translúcidas sobre el cielo
   (!important porque el <style> del index carga después y las pintaría opacas) */
#estancia,#servicios,#faq{background:rgba(245,241,234,.33)!important}
.stays,.loc,.rev{background:rgba(231,221,207,.31)!important}
.exp{background:rgba(20,18,15,.54)!important}
@supports (backdrop-filter:blur(2px)){
  #estancia,#servicios,#faq,.stays,.loc,.rev{backdrop-filter:blur(12px) saturate(1.06)}
  .exp{backdrop-filter:blur(12px) saturate(1.08)}
}
@media(max-width:768px){
  /* MOBILE: SIN backdrop-filter (re-muestrear el cielo que cambia de opacity = flicker).
     Mantengo translucidez por opacity (asoma el paisaje) y subo un poco para legibilidad sin blur. */
  #estancia,#servicios,#faq{background:rgba(245,241,234,.74)!important}
  .stays,.loc,.rev{background:rgba(238,230,217,.72)!important}
  .exp{background:rgba(22,19,16,.62)!important}
  #estancia,#servicios,#faq,.stays,.loc,.rev,.exp{backdrop-filter:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)!important}
  /* hero: overlay liviano y cálido, no oscuro/pesado */
  .hero::after{background:linear-gradient(180deg,rgba(30,28,26,.28) 0%,rgba(30,28,26,.08) 46%,rgba(245,241,234,.28) 100%)!important}
  /* atmósfera/sheen off en mobile → más limpio y liviano */
  #estancia::after,.stays::after{display:none!important}
  /* cards bien claras y livianas */
  .stay-card{box-shadow:0 12px 26px -18px rgba(30,28,24,.20)!important}
  /* CTA: aflojar el negro para que el texto y el WhatsApp respiren */
  .cta::after{background:rgba(20,18,15,.48)!important}
  /* texto blanco del hero siempre legible sobre el fondo más claro */
  .hero h1,.hero .sub,.hero-values{text-shadow:0 1px 14px rgba(20,18,15,.5),0 1px 3px rgba(20,18,15,.4)}
}
/* material glass: borde de luz arriba + sombra interna abajo = vidrio premium con profundidad */
#estancia,#servicios,#faq,.stays,.loc,.rev{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.12), inset 0 -70px 80px -70px rgba(40,34,28,.20)}
.exp{box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(255,255,255,.04)}
/* destello/sheen muy sutil que cruza el panel cada tanto (atmósfera, no gamer) */
#estancia::after,.stays::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.06) 48%,transparent 62%);
  background-size:280% 100%;background-position:120% 0;animation:sheen 14s ease-in-out infinite}
@keyframes sheen{0%{background-position:120% 0}55%,100%{background-position:-60% 0}}
#estancia>.wrap,.stays>.wrap{position:relative;z-index:1}

/* ---------- MASCOTA: el chivito recorre la web (integrado a las escenas) ---------- */
.lm-trek{position:fixed;left:0;top:0;right:auto;width:112px;height:120px;z-index:55;pointer-events:none;will-change:transform}
.lm-goatfix{width:112px;height:120px;background-repeat:no-repeat;background-position:0 0;will-change:transform,background-position;
  filter:drop-shadow(0 11px 12px rgba(20,18,15,.32))}
/* pasto fijo en las cards */
.lm-grass-spot{position:absolute;left:14px;right:auto;bottom:6px;width:30px;z-index:3;pointer-events:none;
  filter:drop-shadow(0 3px 3px rgba(40,50,30,.28))}
.lm-grass-spot svg{display:block;width:100%;height:auto;transform-origin:50% 100%;animation:grassSway 4.6s ease-in-out infinite}
@keyframes grassSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.6deg)}}
/* piedra decorativa del FAQ (la cabra la salta) */
.lm-rock{position:absolute;right:20%;bottom:9%;width:62px;z-index:2;pointer-events:none;filter:drop-shadow(0 5px 6px rgba(30,28,24,.28))}
.lm-rock svg{display:block;width:100%;height:auto}
@media(max-width:768px){.lm-rock{right:10%;bottom:6%;width:46px}}
.lm-trek,.lm-goatfix{backface-visibility:hidden;transform-style:preserve-3d}
.lm-goat-dbg{position:fixed;left:10px;top:72px;z-index:9999;background:rgba(20,18,15,.82);color:#fff;font:600 11px/1.4 ui-monospace,monospace;padding:6px 9px;border-radius:6px;pointer-events:none}
.lm-motion-dbg{position:fixed;right:10px;top:72px;z-index:9999;background:rgba(20,18,15,.86);color:#7CFFB2;font:600 11px/1.5 ui-monospace,monospace;padding:8px 11px;border-radius:7px;pointer-events:none;min-width:120px}
@media(prefers-reduced-motion:reduce){.lm-trek,.lm-grass-spot{display:none!important}}

/* ---------- LA ESTANCIA: datos como hitos de piedra grabada ---------- */
.intro-stats.hitos{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.intro-stats.hitos .s{flex:1 1 0;min-width:120px;margin:0;padding:16px 16px 15px;border-radius:14px;position:relative;
  background:linear-gradient(158deg,#ded1bb,#c6b69f);border:1px solid #b3a087;
  box-shadow:0 16px 32px -22px rgba(35,31,27,.6),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(89,75,58,.18);
  opacity:0;transform:translateY(22px)}
.intro-stats.hitos .s.lit{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease)}
.intro-stats.hitos .s .hito-ic{width:22px;height:22px;display:block;margin-bottom:11px;stroke:var(--leather);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.intro-stats.hitos .s b{font-family:var(--serif);font-size:2rem;color:var(--leather);display:block;line-height:1;margin-bottom:3px;
  text-shadow:0 1px 0 rgba(255,255,255,.6),0 -1px 1px rgba(89,75,58,.4)}
.intro-stats.hitos .s span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#6b5c46}

/* ---------- CTA: cielo estrellado de Malargüe ---------- */
.cta-stars{position:absolute;left:0;right:0;top:0;height:64%;z-index:0;pointer-events:none;overflow:hidden}
.cta-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.2;
  box-shadow:0 0 4px 1px rgba(255,255,255,.5);animation:twinkle var(--tw,4s) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.7)}50%{opacity:.95;transform:scale(1.15)}}

/* ---------- cursor magnético (refuerzo del cursor existente) ---------- */
.mag{transition:transform .35s var(--ease)}

/* ---------- reduced-motion: apagar la microvida ---------- */
@media(prefers-reduced-motion:reduce){
  .dust,.smoke,.ember-dot,.serv-fx,.scroll-hint2 .mouse::after{display:none!important}
  .scene-mask>img{clip-path:none!important;transform:none!important;animation:none!important}
}