/* KO TAO PLAYA · capa de movimiento (opcional).
   Solo actúa con <html class="fx">: Ajustes → «Animaciones», o ?fx=1 / ?fx=0 en la dirección para probarlo. */
.fx{--fx-ease:cubic-bezier(.2,.7,.2,1)}

/* Barra de progreso de lectura */
.fx-progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:90;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--gold),var(--sunset));pointer-events:none}

/* ── Portada ─────────────────────────────────────────── */
.fx .hero-media{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.fx .hero-img{transform-origin:62% 55%;animation:fx-kb 26s var(--fx-ease) both}
@keyframes fx-kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.fx .hero-inner{opacity:calc(1 - var(--hp,0)*1.15);transform:translate3d(0,calc(var(--hp,0)*-36px),0)}
/* luz cálida que sigue al cursor (solo ratón) */
.fx .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--glow,0);transition:opacity .6s;background:radial-gradient(460px circle at var(--cx,70%) var(--cy,30%),rgba(255,184,104,.2),transparent 62%)}
.fx .hero:hover{--glow:1}

/* titular palabra a palabra */
.fx-ready .hero h1 .wi{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(7px);transition:opacity .9s ease,transform 1s var(--fx-ease),filter .9s ease;transition-delay:calc(.15s + var(--i,0)*.08s)}
.fx-ready.fx-in .hero h1 .wi{opacity:1;transform:none;filter:none}
.fx-ready .hero-kicker,.fx-ready .hero-sub,.fx-ready .hero-cta,.fx-ready .hero-hours{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s var(--fx-ease)}
.fx-ready.fx-in .hero-kicker{opacity:1;transform:none;transition-delay:.05s}
.fx-ready.fx-in .hero-sub{opacity:1;transform:none;transition-delay:.75s}
.fx-ready.fx-in .hero-cta{opacity:1;transform:none;transition-delay:.9s}
.fx-ready.fx-in .hero-hours{opacity:1;transform:none;transition-delay:1.05s}

/* cinta de palabras */
.fx-marquee{position:absolute;left:0;right:0;bottom:calc(var(--wave-h,60px) + .6rem);overflow:hidden;white-space:nowrap;pointer-events:none;color:rgba(255,255,255,.66);font-size:.7rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.fx-track{display:inline-flex;align-items:center;animation:fx-marq 52s linear infinite;will-change:transform}
.fx-track span{padding:0 1.3rem}
.fx-track i{font-style:normal;color:var(--gold)}
@keyframes fx-marq{to{transform:translateX(-50%)}}

/* ── Secciones ───────────────────────────────────────── */
.fx .sec-head h2 em,.fx .sobre-txt h2 em{background:linear-gradient(currentColor,currentColor) 0 96%/0 .055em no-repeat;transition:background-size 1.1s .4s var(--fx-ease)}
.fx .is-in h2 em{background-size:100% .055em}

.fx .sobre-media .frame{overflow:hidden}
.fx .sobre-media .cover{scale:1.14;translate:0 var(--py,0px);will-change:translate}
.fx .sobre-mark{rotate:calc(var(--rot,0)*1deg)}

/* tarjetas de zonas: inclinación y brillo con el ratón */
.fx .z-media{position:relative;overflow:hidden}
.fx .z-media::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.24),transparent 55%)}
.fx .z-card:hover .z-media img{transform:scale(1.07)}
.fx .z-card.is-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);transition:transform .18s ease-out,box-shadow .3s;box-shadow:0 28px 50px -26px rgba(24,31,23,.6)}
.fx .z-card.is-tilt .z-media::after{opacity:1}

/* galería */
.fx .g-btn{overflow:hidden}
.fx .g-btn img{transition:transform .9s var(--fx-ease),filter .5s}
.fx .g-btn:hover img{transform:scale(1.08);filter:saturate(1.12) brightness(1.05)}

/* botones con imán y respuesta al toque */
.fx .btn-primary,.fx .wa-float{transition:translate .25s var(--fx-ease),transform .2s,background-color .2s,box-shadow .2s,color .2s,border-color .2s}
.fx .btn:active{transform:scale(.97)}
.fx .wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;animation:fx-pulse 3.6s ease-out infinite}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 rgba(19,138,75,.5)}70%,100%{box-shadow:0 0 0 18px rgba(19,138,75,0)}}

/* formulario de reserva */
.fx .rstep:not([hidden]){animation:fx-step .5s var(--fx-ease) both}
@keyframes fx-step{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.fx .cal-d:not(:disabled){transition:transform .15s,background-color .15s,color .15s}
.fx .cal-d:not(:disabled):hover{transform:scale(1.1)}

@media (prefers-reduced-motion:reduce){
  .fx *,.fx *::before,.fx *::after{animation:none!important;transition:none!important}
  .fx-marquee,.fx-progress{display:none}
}