/* =====================================================================
   Calima 360 · «Show visual» (intro, revelados, hover, parallax)
   Solo transform / opacity (y propiedades individuales translate/scale).
   Los estados ocultos dependen de html.js-show: sin JS todo es visible.
   ===================================================================== */
body[data-page="establecimientos"] .v2-hero-inner{padding-bottom:116px}
@media (max-width:700px){body[data-page="establecimientos"] .v2-hero-inner{padding-bottom:74px}}

/* ---------- Barra de progreso ---------- */
.c360-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:2000;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--lake-2),var(--lime) 55%,var(--sunset));pointer-events:none}

/* ---------- Intro ---------- */
html.intro-pending body::before{content:'';position:fixed;inset:0;background:#0a2b2b;z-index:4000}
.c360-intro{position:fixed;inset:0;z-index:4001;display:grid;place-items:center;color:#fff;overflow:hidden;cursor:pointer}
.c360-intro-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,#0f3a3a 0%,#0a2b2b 60%,#061d1e 100%);transition:opacity .25s}
.c360-intro-water{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.c360-intro.is-draining{cursor:default}
.c360-intro.is-leaving{opacity:0;transition:opacity .4s}
.c360-intro-core{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;will-change:transform}
.c360-intro.is-leaving .c360-intro-core{opacity:0;transform:scale(.94)}
.c360-intro-logo{width:96px;height:96px}
.c360-intro-logo path{stroke-dasharray:48;stroke-dashoffset:48}
.c360-intro-logo circle{opacity:0;transform-origin:25px 23px;transform:scale(.2)}
.c360-intro.is-playing .c360-intro-logo path{animation:c360draw 1s .1s cubic-bezier(.6,0,.2,1) forwards}
.c360-intro.is-playing .c360-intro-logo circle{animation:c360pop .45s .9s cubic-bezier(.3,1.6,.5,1) forwards}
.c360-intro-word{font:800 clamp(34px,6vw,56px)/1 var(--font-display);letter-spacing:-.02em;opacity:0;transform:translateY(16px)}
.c360-intro-word b{color:var(--lime)}
.c360-intro-tag{font:700 13px var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:#cfe0d7;opacity:0}
.c360-intro.is-playing .c360-intro-word{animation:c360rise .7s .55s cubic-bezier(.2,.8,.2,1) forwards}
.c360-intro.is-playing .c360-intro-tag{animation:c360fade .6s 1.1s forwards}
.c360-intro.is-short .c360-intro-logo{width:72px;height:72px}
.c360-intro.is-short.is-playing .c360-intro-logo path{animation-duration:.6s;animation-delay:0s}
.c360-intro.is-short.is-playing .c360-intro-logo circle{animation-delay:.45s}
.c360-intro.is-short.is-playing .c360-intro-word{animation-delay:.25s;animation-duration:.5s}
.c360-intro-skip{position:absolute;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:4;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 16px;font:700 14px var(--font-body);cursor:pointer}
@keyframes c360draw{to{stroke-dashoffset:0}}
@keyframes c360pop{to{opacity:1;transform:scale(1)}}
@keyframes c360rise{to{opacity:1;transform:none}}
@keyframes c360fade{to{opacity:1}}
@keyframes c360wave{0%{transform:translate3d(0,0,0)}55%{transform:translate3d(-4%,-150%,0)}100%{transform:translate3d(-8%,-330%,0)}}

/* ---------- Héroe en cascada ---------- */
.js-show .v2-hero .v2-hero-inner>*{opacity:0;translate:0 26px;transition:opacity .8s ease,translate .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0) * 110ms + 120ms)}
.js-show .v2-hero.hero-in .v2-hero-inner>*{opacity:1;translate:0 0}
.js-show .v2-hero h1 .w,.js-show .v2-hero h2 .w{display:inline-block;clip-path:inset(0 -2em 0 -2em);vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
/* QA: tras el revelado se libera el recorte (con overflow:hidden la sombra del texto quedaba cortada en un recuadro por palabra) */
.js-show .v2-hero.hero-in h1 .w,.js-show .v2-hero.hero-in h2 .w{clip-path:inset(-1em -2em -1em -2em);transition:clip-path 0s linear 1.7s}
.js-show .v2-hero h1 .wi,.js-show .v2-hero h2 .wi{display:inline-block;translate:0 110%;transition:translate .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 55ms + 220ms)}
.js-show .v2-hero.hero-in h1 .wi,.js-show .v2-hero.hero-in h2 .wi{translate:0 0}
.js-show .v2-hero .v2-hero-media>.ph{scale:1.12;transition:scale 2.4s cubic-bezier(.2,.7,.2,1)}
.js-show .v2-hero.hero-in .v2-hero-media>.ph{scale:1}
.js-show .v2-hero .v2-scroll-hint{opacity:0;transition:opacity .6s 1.4s}
.js-show .v2-hero.hero-in .v2-scroll-hint{opacity:1}
.v2-scroll-hint .ic{animation:c360bob 2.2s ease-in-out infinite}
@keyframes c360bob{50%{transform:translateY(5px)}}

/* ---------- Revelados al hacer scroll ---------- */
.js-show [data-reveal="up"]{opacity:0;translate:0 34px;transition:opacity .8s ease,translate .9s cubic-bezier(.2,.75,.2,1);transition-delay:var(--d,0ms)}
.js-show [data-reveal="up"].is-in{opacity:1;translate:0 0}
.js-show [data-reveal="curtain"]::after{content:'';position:absolute;inset:0;z-index:4;background:var(--tone,#0d3b3a);transform-origin:100% 50%;transform:scaleX(1);transition:transform 1s cubic-bezier(.77,0,.18,1);transition-delay:var(--d,0ms)}
.js-show [data-reveal="curtain"].is-in::after{transform:scaleX(0)}
.js-show [data-reveal="curtain"]>.scene,.js-show [data-reveal="curtain"]>.ph-img{scale:1.15;transition:scale 1.6s cubic-bezier(.2,.7,.2,1),opacity .7s}
.js-show [data-reveal="curtain"].is-in>.scene,.js-show [data-reveal="curtain"].is-in>.ph-img{scale:1}

/* ---------- Marquesina ---------- */
.v2-marquee-track{animation:c360marquee 38s linear infinite}
.v2-marquee:hover .v2-marquee-track{animation-play-state:paused}
@keyframes c360marquee{to{transform:translate3d(-50%,0,0)}}

/* ---------- Fondo que cambia por sección ---------- */
body{transition:background-color .8s ease}
body.is-tinted{background-color:var(--tint)}
[data-tint]{background:transparent}

/* ---------- Ruta SVG que se dibuja ---------- */
.v2-trail-line{transition:stroke-dashoffset .12s linear}

/* ---------- Pulso del contador de Mi ruta ---------- */
.v2-bump{animation:c360bump .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes c360bump{30%{scale:1.14}60%{scale:.96}100%{scale:1}}
.route-trigger{transition:translate .35s,box-shadow .3s}

/* ---------- Hover (solo dispositivos con puntero fino) ---------- */
@media (hover:hover) and (pointer:fine){
  .v2-place,.v2-route,.v2-traveler,.v2-cat,.v2-episode,.editorial-card,.v2-plan-card,.partner,.c360-card,.location-card,.v2-near,.essential-card,.c360-route-mini,.v2-dir-tile,.v2-sugg,.metric,.v2-story-panel{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,translate .9s cubic-bezier(.2,.75,.2,1),opacity .8s;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition-delay:0s,0s,var(--d,0ms),var(--d,0ms)}
  .v2-place:hover,.v2-route:hover,.v2-traveler:hover,.v2-cat:hover,.v2-episode:hover,.editorial-card:hover,.v2-plan-card:hover,.partner:hover,.v2-story-panel:hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px) scale(1.025);box-shadow:0 30px 60px rgba(16,41,42,.22)!important;z-index:2}
  .c360-card:hover,.location-card:hover,.v2-near:hover,.essential-card:hover,.c360-route-mini:hover,.v2-dir-tile:hover,.v2-sugg:hover,.metric:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 24px 50px rgba(16,41,42,.18)!important}
  /* brillo que sigue al puntero */
  .v2-place::before,.v2-route::before,.v2-traveler::before,.v2-cat::before,.v2-episode::before,.editorial-card::before,.v2-story-panel::before{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.28),transparent 45%);opacity:0;transition:opacity .4s}
  .v2-place:hover::before,.v2-route:hover::before,.v2-traveler:hover::before,.v2-cat:hover::before,.v2-episode:hover::before,.editorial-card:hover::before,.v2-story-panel:hover::before{opacity:1}
  .editorial-card,.v2-episode,.v2-route,.v2-plan-card{position:relative}
  /* zoom suave de la foto dentro del marco */
  .ph>.scene,.ph>.ph-img,.ph>.ph-video{transition:scale 1.1s cubic-bezier(.2,.7,.2,1),opacity .7s}
  :is(.v2-place,.v2-route,.v2-traveler,.v2-cat,.v2-episode,.editorial-card,.v2-plan-card,.c360-card,.location-card,.v2-near,.v2-story-panel,.v2-sugg):hover .ph>:is(.scene,.ph-img,.ph-video){scale:1.08}
  /* botones: crecen, brillo que recorre y efecto magnético */
  .btn,.c4-action,.soft-button,.v2-gchip,.filter,.v2-chip,.c360-paging button,.essential-go,.c360-cardactions>*,.v2-icon-btn,.hamburger,.c360-card-save,.mini-circle{transition:transform .35s cubic-bezier(.2,.8,.2,1),scale .35s cubic-bezier(.2,.8,.2,1),background .25s,color .25s,box-shadow .3s}
  .btn,.c4-action{position:relative;overflow:hidden;isolation:isolate}
  .btn::after,.c4-action::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);pointer-events:none}
  .btn:hover::after,.c4-action:hover::after{transform:translateX(130%);transition:transform .85s ease}
  .btn:hover,.c4-action:hover,.soft-button:hover,.v2-gchip:hover,.filter:hover,.v2-chip:hover,.essential-go:hover,.c360-cardactions>*:hover,.v2-icon-btn:hover,.c360-paging button:not(:disabled):hover{scale:1.05;box-shadow:0 10px 24px rgba(16,41,42,.18)}
  .c360-card-save:hover,.mini-circle:hover{scale:1.12}
  .btn-lime,.v2-hero .btn,.v2-center .btn,[data-magnetic]{transform:translate(var(--mx,0px),var(--my,0px))}
  .btn:hover .ic,.c4-action:hover .ic,.soft-button:hover .ic,.v2-chip:hover .ic,.c360-cardactions>*:hover .ic,.partner:hover .partner-cta .ic,.v2-plan-card a:hover .ic{animation:c360nudge .6s ease}
  .v2-plan-icon{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
  :is(.v2-plan-card,.v2-cat,.v2-traveler,.partner,.metric,.c360-route-mini,.v2-dir-tile):hover .v2-plan-icon{transform:rotate(-8deg) scale(1.12)}
  /* subrayados animados */
  .v2-foot-links a,.v2-crumbs a,.v2-plan-card a,.v2-note-kpis a,.partner-cta,.v2-map-legend a,.v2-topbar-links a,.c360-card h3 a,.v2-place-body h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .35s ease,color .2s}
  .v2-foot-links a:hover,.v2-crumbs a:hover,.v2-plan-card a:hover,.v2-note-kpis a:hover,.partner:hover .partner-cta,.v2-map-legend a:hover,.v2-topbar-links a:hover,.c360-card h3 a:hover,.v2-place-body h3 a:hover{background-size:100% 1.5px}
  .route-trigger:hover{translate:0 -3px}
}
@keyframes c360nudge{40%{transform:translateX(3px) rotate(-6deg)}}

/* ---------- Móvil: más ligero ---------- */
@media (max-width:700px){
  .js-show [data-reveal="up"]{translate:0 18px;transition-duration:.6s,.6s}
  .js-show [data-reveal="curtain"]::after{transition-duration:.8s}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .v2-marquee-track{animation:none!important;transform:none!important;flex-wrap:wrap;width:auto}
  .v2-hero-media{transform:none!important}
  .c360-intro{display:none!important}
}