/* ============================================================
   EXPERIENCIA INMERSIVA (Variante A) — eventos y bodas
   ============================================================ */

/* Botón palpitante */
.xp-btn{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:180;
  display:flex;align-items:center;gap:12px;border:none;cursor:pointer;
  background:linear-gradient(140deg,#2d4536,#16281c);color:#fbf9f3;
  font-family:"Hanken Grotesk",sans-serif;font-size:13.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;padding:18px 34px;border-radius:100px;
  box-shadow:0 14px 44px rgba(23,35,28,.5), 0 0 0 0 rgba(176,141,74,.55);
  animation:xppulse 2.2s cubic-bezier(.4,0,.4,1) infinite}
.xp-btn i{font-style:normal;font-size:17px;animation:xpspark 2.2s ease-in-out infinite}
.xp-btn:hover{animation-play-state:paused;transform:translateX(-50%) scale(1.05)}
@keyframes xppulse{
  0%{box-shadow:0 14px 44px rgba(23,35,28,.5), 0 0 0 0 rgba(176,141,74,.55)}
  70%{box-shadow:0 14px 44px rgba(23,35,28,.5), 0 0 0 22px rgba(176,141,74,0)}
  100%{box-shadow:0 14px 44px rgba(23,35,28,.5), 0 0 0 0 rgba(176,141,74,0)}}
@keyframes xpspark{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(18deg) scale(1.25)}}
@media (max-width:1080px){.xp-btn{bottom:96px}}

/* Overlay */
.xp{position:fixed;inset:0;z-index:400;background:#10190f;display:none;overflow:hidden}
.xp.open{display:block;animation:xpin .8s cubic-bezier(.16,1,.3,1)}
@keyframes xpin{from{opacity:0}to{opacity:1}}
.xp-close{position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:16px;z-index:40;
  width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.35);backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.2);color:#fff;font-size:17px;cursor:pointer}
.xp-mute{position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:72px;z-index:40;
  width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.35);backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.2);color:#fff;font-size:16px;cursor:pointer}
.xp-bars{position:absolute;top:calc(env(safe-area-inset-top) + 16px);left:18px;right:130px;
  display:flex;gap:5px;z-index:40}
.xp-bar{flex:1;height:3px;background:rgba(255,255,255,.22);border-radius:2px;overflow:hidden}
.xp-bar>i{display:block;height:100%;width:0;background:#fff}
.xp-bar.done>i{width:100%}
.xp-bar.act>i{animation:xpbar linear forwards}
@keyframes xpbar{from{width:0}to{width:100%}}

/* Fase 1: la frase */
.xp-frase{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:8vw;z-index:10;
  background:radial-gradient(90vmax 90vmax at 50% 110%, #24382c 0%, #10190f 60%)}
.xp-frase p{font-family:"Fraunces",serif;font-weight:380;font-style:italic;
  font-size:clamp(28px,5vw,58px);line-height:1.25;color:#fbf9f3;max-width:20ch}
.xp-frase p .w{opacity:0;display:inline-block;transform:translateY(14px);
  animation:xpw .9s cubic-bezier(.16,1,.3,1) forwards}
@keyframes xpw{to{opacity:1;transform:none}}
.xp-frase p .oro{color:#d9c194}

/* Fase 2: clips Ken Burns */
.xp-clips{position:absolute;inset:0;z-index:5;display:none}
.xp-clip{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.xp-clip.on{opacity:1}
.xp-clip img{width:100%;height:100%;object-fit:cover}
.xp-clip.on img{animation:kenburns 5.2s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.12) translate(2%, 1%)}to{transform:scale(1) translate(0,0)}}
.xp-clip::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,25,15,.35),transparent 35%,transparent 55%,rgba(16,25,15,.75))}
.xp-cap{position:absolute;left:0;right:0;bottom:12vh;text-align:center;padding:0 8vw;z-index:6}
.xp-cap span{display:inline-block;font-family:"Fraunces",serif;font-weight:400;font-style:italic;
  font-size:clamp(24px,4vw,44px);color:#fbf9f3;text-shadow:0 4px 30px rgba(0,0,0,.5);
  opacity:0;transform:translateY(12px);transition:.8s cubic-bezier(.16,1,.3,1)}
.xp-cap span.on{opacity:1;transform:none}

/* Fase 3: CTA + reserva */
.xp-final{position:absolute;inset:0;z-index:20;display:none;overflow-y:auto;
  background:radial-gradient(90vmax 90vmax at 50% -20%, #24382c 0%, #10190f 62%)}
.xp-final.on{display:block}
.xp-final-in{min-height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:80px 24px 60px}
.xp-final h2{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(30px,5vw,54px);
  color:#fbf9f3;line-height:1.12;max-width:18ch}
.xp-final h2 em{font-style:italic;color:#d9c194}
.xp-final>.xp-final-in>p{color:rgba(251,249,243,.75);font-family:"Hanken Grotesk",sans-serif;
  font-size:15px;max-width:46ch;margin:16px 0 30px}
.xp-slots{background:rgba(251,249,243,.06);backdrop-filter:blur(8px);
  border:1px solid rgba(251,249,243,.14);border-radius:18px;padding:22px;
  width:min(430px,92vw);font-family:"Hanken Grotesk",sans-serif;text-align:left}
.xp-slots h4{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#d9c194;margin:0 0 12px}
.xp-slots .xp-days{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px}
.xp-slots .xp-day{flex:none;border:1px solid rgba(251,249,243,.25);border-radius:12px;
  padding:8px 14px;font-size:13px;cursor:pointer;background:transparent;color:#fbf9f3;font-family:inherit}
.xp-slots .xp-day.on{background:#fbf9f3;color:#24382c;border-color:#fbf9f3}
.xp-slots .xp-hours{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.xp-slots .xp-hour{border:1px solid rgba(251,249,243,.25);border-radius:100px;padding:7px 16px;
  font-size:13px;cursor:pointer;background:transparent;color:#fbf9f3;font-family:inherit}
.xp-slots .xp-hour.on{background:#b08d4a;border-color:#b08d4a;color:#fff}
.xp-slots input{width:100%;border:1px solid rgba(251,249,243,.22);border-radius:11px;
  padding:11px 14px;font-size:14px;margin-top:9px;font-family:inherit;
  background:rgba(0,0,0,.25);color:#fbf9f3;box-sizing:border-box}
.xp-slots input::placeholder{color:rgba(251,249,243,.45)}
.xp-slots input:focus{outline:none;border-color:#d9c194}
.xp-book{width:100%;margin-top:12px;background:#fbf9f3;color:#24382c;border:none;border-radius:100px;
  padding:14px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;font-family:inherit}
.xp-book:disabled{opacity:.45;cursor:default}
.xp-err{color:#e8a196;font-size:12.5px;margin-top:8px;min-height:16px}
.xp-ok{font-family:"Hanken Grotesk",sans-serif;color:#fbf9f3;font-size:15.5px;line-height:1.7;
  max-width:44ch;background:rgba(63,138,90,.18);border:1px solid rgba(169,217,164,.4);
  border-radius:16px;padding:22px 26px}
.xp-alt{margin-top:22px;font-size:12.5px;color:rgba(251,249,243,.55);font-family:"Hanken Grotesk",sans-serif}
.xp-alt a{color:#d9c194;text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .xp-btn{animation:none}
  .xp-clip.on img{animation:none}
  .xp-frase p .w{animation-duration:.01s}
}