/* scenes.css — secuencias ancladas al scroll: "La vista como eje" y "Amenidades".
   Las variables --t / --e / --q (y --u) las escribe scenes.js según el avance de cada tramo. */

.has-scenes .vista, .has-scenes .amen, .has-scenes .bleed { display: none; }

.scene { position: relative; height: calc(var(--len) * 100vh); background: var(--night); color: var(--paper); }
.scene-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }

.scene .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.1em 0.06em 0.16em; margin: -0.1em -0.06em -0.16em; }
.scene .w > span { display: inline-block; transform: translateY(118%) rotate(6deg); transition: transform 0.95s var(--expo); transition-delay: calc(var(--i, 0) * 0.07s); }

/* Gradientes vivos de fondo */
.sc-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sc-aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; will-change: transform; }
.sc-aurora i:nth-child(1) { width: 60vw; height: 60vw; left: -18vw; top: -22vw; background: radial-gradient(circle, rgba(184, 97, 44, 0.75), transparent 65%); animation: scA 19s ease-in-out infinite alternate; }
.sc-aurora i:nth-child(2) { width: 52vw; height: 52vw; right: -14vw; bottom: -24vw; background: radial-gradient(circle, rgba(62, 82, 66, 0.9), transparent 65%); animation: scB 23s ease-in-out infinite alternate; }
.sc-aurora i:nth-child(3) { width: 34vw; height: 34vw; left: 38vw; top: 30vh; background: radial-gradient(circle, rgba(217, 138, 85, 0.4), transparent 65%); animation: scA 27s ease-in-out infinite alternate-reverse; }
@keyframes scA { to { transform: translate(14vw, 10vh) scale(1.25); } }
@keyframes scB { to { transform: translate(-16vw, -12vh) scale(0.85); } }

@keyframes svSlam { from { opacity: 0; transform: translateX(-34vw) skewX(-16deg); filter: blur(14px); } 60% { opacity: 1; } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes svPunch { from { opacity: 0; transform: scale(2.8); filter: blur(26px); } 35% { opacity: 1; } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes svSweep { from { transform: translateX(-40vw) skewX(-18deg); opacity: 0; } 20% { opacity: 1; } to { transform: translateX(140vw) skewX(-18deg); opacity: 0; } }
@keyframes scFade { from { opacity: 0; transform: translateY(14px); } }
@keyframes scBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* =====================================================================
   ESCENA 1 · LA VISTA COMO EJE
   ===================================================================== */
.sv { --ft: 14vh; --fr: 5vw; --fb: 27vh; --fl: 50vw; }

/* La foto: pantalla completa → ventana a la derecha (y luego el video de las torres) */
.sv-photo {
  --k: var(--e, 0);
  position: absolute; overflow: hidden; background: #0c0a09;
  inset: calc(var(--k) * var(--ft)) calc(var(--k) * var(--fr)) calc(var(--k) * var(--fb)) calc(var(--k) * var(--fl));
  border-radius: calc(var(--k) * 24px);
  transform: perspective(1500px) rotateY(calc(var(--t, 0) * (1 - var(--t, 0)) * -30deg)) scale(calc(1 - var(--t, 0) * (1 - var(--t, 0)) * 0.22));
}
.sv-photo img, .sv-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-photo img { animation: svDrift 22s ease-in-out infinite alternate; }
@keyframes svDrift { from { transform: scale(1.14) translate(-1.6%, 1%); } to { transform: scale(1.04) translate(1.6%, -1%); } }
.sv-photo video { opacity: var(--u, 0); }
.sv-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(12, 10, 9, 0.78), transparent 55%), linear-gradient(to right, rgba(12, 10, 9, 0.45), transparent 50%);
  opacity: calc(1 - var(--k) * 0.75);
}

/* marco de luz de la ventana */
.sv-frame {
  position: absolute; inset: var(--ft) var(--fr) var(--fb) var(--fl); border-radius: 24px; pointer-events: none; opacity: var(--t, 0);
  box-shadow: inset 0 0 0 1px rgba(242, 237, 228, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 40px 120px -30px rgba(0, 0, 0, 0.9), 0 0 90px -20px rgba(217, 138, 85, 0.75);
}
.sv-frame::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ang), transparent 0 55%, rgba(217, 138, 85, 0.95) 68%, #FFF1E2 75%, rgba(217, 138, 85, 0.6) 82%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin 6s linear infinite;
}

/* línea del horizonte protegido */
.sv-horizon { position: absolute; left: 0; right: 0; top: 35.5%; height: 0; z-index: 2; }
.sv-h-line {
  position: absolute; left: 0; right: 0; top: 0; height: 1.5px; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, var(--terracota-glow) 12%, #FFF1E2 50%, var(--terracota-glow) 88%, transparent);
  box-shadow: 0 0 22px 3px rgba(217, 138, 85, 0.85); transition: transform 0.5s var(--ease), opacity 0.4s; opacity: 0;
}
.sv-horizon.is-on .sv-h-line { transform: none; opacity: 1; transition: transform 1.3s var(--expo) 0.25s, opacity 0.3s 0.25s; }
.sv-h-scan {
  position: absolute; left: 0; top: -30vh; width: 22vw; height: 30vh; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 241, 226, 0.16) 60%, rgba(255, 241, 226, 0.5)); border-right: 1px solid rgba(255, 241, 226, 0.9);
  -webkit-mask: linear-gradient(to top, #000, transparent); mask: linear-gradient(to top, #000, transparent);
}
.sv-horizon.is-on .sv-h-scan { animation: svScan 2.6s var(--ease) 0.5s both; }
@keyframes svScan { from { transform: translateX(-24vw); opacity: 1; } 85% { opacity: 1; } to { transform: translateX(102vw); opacity: 0; } }
.sv-h-tag {
  position: absolute; right: 6vw; top: -2.6rem; padding: 0.55rem 0.95rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper);
  background: rgba(20, 17, 15, 0.5); border: 1px solid rgba(217, 138, 85, 0.7); box-shadow: 0 0 30px -6px rgba(217, 138, 85, 0.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(14px) scale(0.9); transition: opacity 0.3s, transform 0.4s;
}
.sv-h-tag b { font-weight: 600; color: #FFE3CB; }
.sv-horizon.is-on .sv-h-tag { opacity: 1; transform: none; transition: opacity 0.5s 1s, transform 0.8s var(--spring) 1s; }
.sv-h-dot { position: absolute; right: calc(6vw + 5.5rem); top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #FFF1E2; box-shadow: 0 0 0 0 rgba(217, 138, 85, 0.9); opacity: 0; }
.sv-horizon.is-on .sv-h-dot { opacity: 1; transition: opacity 0.3s 0.9s; animation: svPing 1.8s ease-out 1s infinite; }
@keyframes svPing { to { box-shadow: 0 0 0 22px rgba(217, 138, 85, 0); } }

/* Gancho: la presa se ve a través de las letras; al avanzar, las letras crecen hasta abrir la imagen */
.sv-mask {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none;
  background: var(--night); mix-blend-mode: multiply; opacity: clamp(0, calc((1 - var(--t, 0)) * 2.3), 1);
}
.sv-mask-txt {
  text-align: center; color: #fff; font-family: var(--font-display); will-change: transform;
  transform: scale(calc(1 + var(--q, 0) * 15)); transform-origin: 57% 67%;
}
.sv-mask-txt span { display: block; }
.sv-mask-txt b { display: inline-block; font-weight: 500; opacity: 0; }
.m1 b { font-size: 11.5vw; line-height: 0.92; letter-spacing: -0.02em; }
.m2 b { font-size: 31vw; line-height: 0.78; font-style: italic; letter-spacing: -0.03em; }
.sv.is-enter .m1 b { animation: svSlam 0.7s var(--expo) forwards; }
.sv.is-enter .m2 b { animation: svPunch 0.95s var(--spring) 0.16s forwards; }
/* contorno de luz sobre las mismas letras */
.sv-glow { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; opacity: clamp(0, calc(1 - var(--t, 0) * 6), 1); }
.sv-glow .sv-mask-txt { transform: none; will-change: auto; color: transparent; -webkit-text-stroke: 1px rgba(255, 226, 200, 0.8); text-shadow: 0 0 26px rgba(217, 138, 85, 0.55); }
.sv.is-enter .sv-glow .m1 b { animation-name: svSlamLite; }
.sv.is-enter .sv-glow .m2 b { animation-name: svPunchLite; }
@keyframes svSlamLite { from { opacity: 0; transform: translateX(-34vw) skewX(-16deg); } to { opacity: 1; transform: none; } }
@keyframes svPunchLite { from { opacity: 0; transform: scale(2.8); } to { opacity: 1; transform: none; } }

.sv-hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: calc(1 - var(--t, 0) * 1.5); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(242, 237, 228, 0.8); }
.sv-hud > span { position: absolute; opacity: 0; }
.sv.is-enter .sv-hud > span { opacity: 1; animation: scFade 0.9s var(--expo) backwards; }
.sv-hud-a { left: var(--gutter); top: calc(var(--nav-h) + 2.2vh); color: var(--terracota-glow) !important; animation-delay: 0.5s !important; }
.sv-hud-a::before { content: ""; display: inline-block; vertical-align: middle; width: 2.6rem; height: 1px; margin-right: 0.9rem; background: currentColor; box-shadow: 0 0 12px currentColor; }
.sv-hud-b { right: var(--gutter); top: calc(var(--nav-h) + 2.2vh); animation-delay: 0.6s !important; font-variant-numeric: tabular-nums; }
.sv-hud-c { left: var(--gutter); bottom: 4.5vh; animation-delay: 0.7s !important; }
.sv-hud-d { right: var(--gutter); bottom: 4.5vh; animation-delay: 0.8s !important; display: inline-flex; align-items: center; gap: 0.7rem; }
.sv-hud-d i { width: 1px; height: 2.4rem; background: linear-gradient(var(--terracota-glow), transparent); animation: svTick 1.6s var(--ease) infinite; transform-origin: 50% 0; }
@keyframes svTick { from { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } to { transform: scaleY(1); opacity: 0; } }
.sv-sweep {
  position: absolute; top: -10vh; left: 0; width: 16vw; height: 120vh; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(217, 138, 85, 0.35) 40%, rgba(255, 241, 226, 0.95) 50%, rgba(217, 138, 85, 0.35) 60%, transparent);
}
.sv.is-enter .sv-sweep { animation: svSweep 0.95s var(--ease) 0.1s both; }

/* Texto: la frase gigante se encoge y se acomoda como título de la columna */
.sv-copy { position: absolute; z-index: 5; left: var(--gutter); top: 13vh; width: min(38vw, 35rem); }
.sv-eyebrow { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracota-glow); opacity: 0; transform: translateX(-18px); transition: opacity 0.6s, transform 0.9s var(--expo); }
.sv-eyebrow::before { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 1px; margin-right: 0.9rem; background: currentColor; transition: width 0.9s var(--expo) 0.15s; }
.sv-eyebrow.is-on { opacity: 1; transform: none; }
.sv-eyebrow.is-on::before { width: 2.6rem; }
.sv-claim {
  margin: 0.9rem 0 1.5rem; font-size: clamp(2.3rem, 4.4vw, 4.2rem); line-height: 1.04; white-space: nowrap; transform-origin: 0 0;
  transform: translateY(calc((1 - var(--e, 0)) * 31vh)) scale(calc(1 + (1 - var(--e, 0)) * 1.8));
}
.sv-pre { display: block; opacity: var(--e, 0); }
.sv-claim em { display: block; color: var(--terracota-glow); text-shadow: 0 0 calc(18px + (1 - var(--e, 0)) * 30px) rgba(217, 138, 85, 0.5); }
.sv-claim.is-on .w > span { transform: none; }
.sv-ps { position: relative; }
.sv-p { position: absolute; left: 0; top: 0; max-width: 46ch; font-size: clamp(0.95rem, 1.15vw, 1.08rem); line-height: 1.75; color: rgba(242, 237, 228, 0.8); opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 0.45s, transform 0.6s var(--ease), filter 0.45s; }
.sv-p.is-on { opacity: 1; transform: none; filter: none; transition: opacity 0.8s 0.15s, transform 1s var(--expo) 0.15s, filter 0.8s 0.15s; }

/* tarjetas de cristal */
.scene .glass.sv-card {
  position: absolute; z-index: 6; left: calc(var(--fl) - 3.2vw); bottom: calc(var(--fb) - 4.5vh); display: grid; gap: 0.25rem; padding: 1.25rem 1.5rem 1.35rem; max-width: 20rem;
  font-size: 0.92rem; color: rgba(242, 237, 228, 0.85);
  opacity: 0; transform: translateY(50px) rotate(-6deg) scale(0.82); transition: opacity 0.35s, transform 0.5s var(--ease);
}
.sv-card strong { font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; line-height: 1.1; color: var(--paper); }
.sv-card .plan-eyebrow { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracota-glow); }
.scene .glass.sv-card.is-on { opacity: 1; transform: none; transition: opacity 0.4s, transform 1.1s var(--spring); animation: scBob 7s ease-in-out 1.2s infinite; }

.scene .glass.sv-chip {
  position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.25rem 0.85rem 1rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase;
  opacity: 0; transform: translateY(30px) scale(0.6); transition: opacity 0.3s, transform 0.45s var(--ease);
}
.sv-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--terracota-glow); box-shadow: 0 0 14px 3px rgba(217, 138, 85, 0.9); }
.scene .glass.sv-chip.is-on { opacity: 1; transform: none; transition: opacity 0.4s, transform 0.95s var(--spring); }
.sv-k1 { right: calc(var(--fr) - 1.4vw); top: calc(var(--ft) - 2.4vh); animation: scBob 6.5s ease-in-out infinite; }
.sv-k2 { left: calc(var(--fl) - 2.6vw); bottom: calc(var(--fb) + 3.5vh); animation: scBob 8s ease-in-out 0.8s infinite reverse; }

/* cifras */
.scene .glass.sv-nums {
  position: absolute; z-index: 6; left: var(--gutter); right: var(--fr); bottom: 4.2vh; display: grid; grid-template-columns: repeat(4, 1fr); padding: 1.25rem 0.6rem 1.3rem; border-radius: 26px;
  opacity: 0; transform: perspective(1300px) translateY(90px) rotateX(-24deg) scale(0.92); transform-origin: 50% 100%; transition: opacity 0.35s, transform 0.5s var(--ease);
}
.scene .glass.sv-nums.is-on { opacity: 1; transform: none; transition: opacity 0.45s, transform 1.15s var(--spring); }
.sv-nums div { position: relative; padding: 0 1.4rem; }
.sv-nums div + div::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px; background: linear-gradient(transparent, var(--terracota-glow), transparent); box-shadow: 0 0 12px rgba(217, 138, 85, 0.8); transform: scaleY(0); transition: transform 0.9s var(--expo) 0.5s; }
.sv-nums.is-on div + div::before { transform: none; }
.sv-nums dd { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.3rem, 4.3vw, 4.1rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.sv-nums dd small { font-size: 0.32em; margin-left: 0.25em; }
.sv-nums dd.is-hit { animation: svHit 0.6s var(--spring); }
@keyframes svHit { from { transform: scale(1.16); color: var(--terracota-glow); text-shadow: 0 0 30px rgba(217, 138, 85, 0.9); } }
.sv-nums dt { margin-top: 0.45rem; font-size: 0.76rem; line-height: 1.4; color: rgba(242, 237, 228, 0.72); max-width: 20ch; }

/* =====================================================================
   ESCENA 2 · AMENIDADES
   ===================================================================== */
.sa { --ts: clamp(3rem, 7vw, 6.8rem); --th: calc(var(--ts) * 1.12); --base: 8.2rem; }
.sa-shots { position: absolute; inset: 0; }
.sa-shot { position: absolute; inset: 0; margin: 0; z-index: var(--z); overflow: hidden; }
.sa-shot-in { position: absolute; inset: 0; transform: scale(calc(1.3 - var(--e, 0) * 0.3)); }
.sa-shot img { width: 100%; height: 100%; object-fit: cover; animation: saDrift 20s ease-in-out infinite alternate; }
.sa-shot:nth-child(4n + 1) img { animation-direction: alternate-reverse; }
@keyframes saDrift { from { transform: scale(1.1) translate(-1.5%, 1%); } to { transform: scale(1.02) translate(1.5%, -1%); } }
.sa-shot.is-first { clip-path: inset(calc((1 - var(--e, 0)) * 30%) calc((1 - var(--e, 0)) * 34%) round calc((1 - var(--e, 0)) * 22px)); opacity: 0; }
.sa.is-enter .sa-shot.is-first { opacity: 1; animation: saCard 1s var(--spring) backwards; }
@keyframes saCard { from { opacity: 0; scale: 0.35; rotate: -10deg; } 40% { opacity: 1; } }
.sa-shot.is-odd { clip-path: polygon(calc(118% - var(--e, 0) * 150%) 0, 100% 0, 100% 100%, calc(150% - var(--e, 0) * 150%) 100%); }
.sa-shot.is-even { clip-path: polygon(0 0, calc(-18% + var(--e, 0) * 150%) 0, calc(-50% + var(--e, 0) * 150%) 100%, 0 100%); }
/* video vivo de la amenidad: franja vertical con borde diagonal, del mismo ángulo que los barridos */
.sa-live {
  position: absolute; z-index: 1; top: 0; bottom: 0; right: -6vw; width: calc(100vh * 0.5625 + 15vw); pointer-events: none;
  filter: drop-shadow(-2px 0 0 rgba(255, 241, 226, 0.8)) drop-shadow(-16px 0 36px rgba(217, 138, 85, 0.55));
  transform: translateX(104%); transition: transform 0.45s var(--ease);
}
.sa-shot.is-live .sa-live { transform: none; transition: transform 1.25s var(--spring) 0.6s; }
.sa-live-in { position: absolute; inset: 0; overflow: hidden; background: #1b1714; clip-path: polygon(9vw 0, 100% 0, 100% 100%, 0 100%); }
.sa-live video { position: absolute; left: 0; top: 0; width: calc(100% - 6vw); height: 100%; object-fit: cover; }
/* filo de luz que acompaña el barrido */
.sa-edge {
  position: absolute; z-index: 20; top: -25vh; height: 150vh; width: 3px; pointer-events: none;
  background: linear-gradient(transparent, #FFF1E2 28%, var(--terracota-glow) 50%, #FFF1E2 72%, transparent);
  box-shadow: 0 0 46px 10px rgba(217, 138, 85, 0.7); opacity: calc(4 * var(--t, 0) * (1 - var(--t, 0)));
}
.sa-edge.is-odd { left: calc(134% - var(--e, 0) * 150%); rotate: calc(-1 * atan2(32vw, 100vh)); }
.sa-edge.is-even { left: calc(-34% + var(--e, 0) * 150%); rotate: atan2(32vw, 100vh); }
.sa-shade {
  position: absolute; inset: 0; z-index: 25; pointer-events: none; opacity: var(--t, 0);
  background: linear-gradient(to top, rgba(12, 10, 9, 0.9) 0%, rgba(12, 10, 9, 0.35) 34%, transparent 56%), linear-gradient(to bottom, rgba(12, 10, 9, 0.55), transparent 22%);
}

/* Gancho */
.sa-hook { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; opacity: clamp(0, calc((1 - var(--t, 0)) * 1.7), 1); }
.sa-hook-eye { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 3vh); text-align: center; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--terracota-glow); opacity: 0; }
.sa.is-enter .sa-hook-eye { opacity: 1; animation: scFade 0.9s var(--expo) 0.5s backwards; }
.sa-hook h2 { position: relative; text-align: center; transform: scale(calc(1 + var(--q, 0) * 2.4)); will-change: transform; }
.sa-big { display: block; font-size: 30vw; font-style: italic; line-height: 0.82; letter-spacing: -0.03em; text-shadow: 0 0 90px rgba(217, 138, 85, 0.55), 0 4px 60px rgba(0, 0, 0, 0.5); }
.sa-big b { display: inline-block; font-weight: 300; opacity: 0; }
.sa.is-enter .sa-big b { animation: svPunch 0.95s var(--spring) 0.05s forwards; }
.sa-rest { display: block; margin-top: 1.2vw; font-size: clamp(1.5rem, 3.5vw, 3.3rem); line-height: 1.1; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.7); }
.sa-rest em { color: var(--terracota-glow); }
.sa.is-enter .sa-rest .w > span { transform: none; transition-delay: calc(0.45s + var(--i, 0) * 0.07s); }
.sa-deck { position: absolute; inset: 0; }
.sa-deck i {
  position: absolute; left: 50%; top: 50%; width: 21vw; aspect-ratio: 3 / 2; margin: -7vw 0 0 -10.5vw; border-radius: 16px; background: center / cover #221D19;
  box-shadow: 0 30px 80px -20px #000, inset 0 0 0 1px rgba(242, 237, 228, 0.28), 0 0 60px -12px rgba(217, 138, 85, 0.75);
  transform: translate(calc(var(--dx) * (1 + var(--q, 0) * 2.6)), calc(var(--dy) * (1 + var(--q, 0) * 2.6))) rotate(calc(var(--dr) * (1 + var(--q, 0) * 3)));
  opacity: 0;
}
.sa.is-enter .sa-deck i { animation: saBurst 0.95s var(--spring) calc(0.14s + var(--i) * 0.07s) forwards; }
@keyframes saBurst { from { opacity: 0; scale: 0.2; translate: calc(var(--dx) * -0.9) calc(var(--dy) * -0.9); } 30% { opacity: 1; } to { opacity: 1; scale: 1; translate: 0 0; } }

/* Interfaz del recorrido de amenidades */
.sa-ui { position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.sa-ui.is-on { opacity: 1; transition: opacity 0.7s; }
.sa-top { position: absolute; left: var(--gutter); top: calc(var(--nav-h) + 1.4rem); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(242, 237, 228, 0.82); }
.sa-top b { font-weight: 600; color: var(--terracota-glow); }
.sa-count { position: absolute; inset: 0; }
.sa-roll { position: absolute; left: var(--gutter); bottom: calc(var(--base) + var(--th) + 0.7rem); height: 1em; overflow: hidden; font: 300 2.9rem/1 var(--font-display); color: var(--terracota-glow); font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 0 26px rgba(217, 138, 85, 0.7); }
.sa-roll b { display: block; font-weight: 300; transform: translateY(calc(var(--n, 0) * -1em)); transition: transform 0.85s var(--spring); }
.sa-roll i { display: block; height: 1em; font-style: normal; }
.sa-of { position: absolute; left: calc(var(--gutter) + 3.9rem); bottom: calc(var(--base) + var(--th) + 1.05rem); font-size: 0.7rem; letter-spacing: 0.2em; color: rgba(242, 237, 228, 0.7); }
.sa-bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.35rem; height: 1px; background: rgba(242, 237, 228, 0.18); }
.sa-bar i { position: absolute; inset: -0.5px 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--terracota), #FFF1E2); box-shadow: 0 0 14px 1px rgba(217, 138, 85, 0.9); }

.sa-titles { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--base); }
.sa-titles h3 { position: absolute; left: 0; bottom: 0; font-size: var(--ts); font-style: italic; font-weight: 300; line-height: 1.05; white-space: nowrap; text-shadow: 0 2px 50px rgba(0, 0, 0, 0.45); }
.sa-titles h3.is-past .w > span { transform: translateY(-118%) rotate(-6deg); }
.sa-titles h3.is-on .w > span { transform: none; transition: transform 1.05s var(--spring); transition-delay: calc(0.12s + var(--i, 0) * 0.08s); }

.scene .glass.sa-card {
  position: absolute; right: var(--gutter); bottom: var(--base); width: min(25rem, 31vw); display: grid; padding: 1.3rem 1.5rem 1.4rem; border-radius: 22px; pointer-events: auto;
}
.sa-card p { grid-area: 1 / 1; font-size: 0.95rem; line-height: 1.65; color: rgba(242, 237, 228, 0.9); opacity: 0; transform: translateY(16px); filter: blur(5px); transition: opacity 0.3s, transform 0.4s, filter 0.3s; }
.sa-card p.is-on { opacity: 1; transform: none; filter: none; transition: opacity 0.7s 0.2s, transform 0.9s var(--expo) 0.2s, filter 0.7s 0.2s; }
.sa-card.is-bump { animation: saBump 0.9s var(--spring); }
@keyframes saBump { from { transform: perspective(900px) translateY(26px) rotateX(-16deg) scale(0.93); } }

.sa-rail { position: absolute; left: var(--gutter); bottom: 2.5rem; display: flex; gap: 0.55rem; list-style: none; pointer-events: auto; }
.sa-rail button {
  position: relative; display: block; width: 78px; height: 50px; padding: 0; border-radius: 11px; overflow: hidden; cursor: pointer; background: #221D19;
  border: 1px solid rgba(242, 237, 228, 0.3); opacity: 0.62; transition: transform 0.6s var(--spring), opacity 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.sa-rail img { width: 100%; height: 100%; object-fit: cover; }
.sa-rail span { position: absolute; left: 6px; bottom: 4px; font-size: 0.58rem; letter-spacing: 0.14em; color: #fff; text-shadow: 0 1px 6px #000; }
.sa-rail button:hover { opacity: 1; transform: translateY(-3px); }
.sa-rail button.is-on { opacity: 1; transform: translateY(-7px) scale(1.12); border-color: var(--terracota-glow); box-shadow: 0 0 0 1px rgba(217, 138, 85, 0.6), 0 12px 34px -8px rgba(217, 138, 85, 0.95); }

/* =====================================================================
   ESCENA · ASÍ SE VIVE (tríptico de videos verticales)
   Tres videos 9:16 lado a lado llenan una pantalla horizontal a su tamaño real.
   ===================================================================== */
.sl-cols { --g: calc((1 - var(--ue, 0)) * 14px); position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); padding: calc(var(--g) * 1.2); }
.sl-col {
  position: relative; margin: 0; overflow: hidden; border-radius: calc((1 - var(--ue, 0)) * 22px); background: #1b1714;
  transform: translateY(calc((1 - var(--ue, 0)) * var(--off)));
  box-shadow: 0 0 0 1px rgba(242, 237, 228, calc((1 - var(--ue, 0)) * 0.22)), 0 0 70px -18px rgba(217, 138, 85, calc((1 - var(--ue, 0)) * 0.8));
  opacity: 0;
}
.sl-col:nth-child(1) { --off: 7vh; }
.sl-col:nth-child(2) { --off: -6vh; }
.sl-col:nth-child(3) { --off: 10vh; }
.sl-col video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sl.is-enter .sl-col { opacity: 1; animation: slRise 1.15s var(--spring) calc(var(--i) * 0.11s) backwards; }
@keyframes slRise { from { opacity: 0; translate: 0 70vh; scale: 0.82; rotate: calc((var(--i) - 1) * 7deg); clip-path: inset(0 0 70% 0 round 22px); } 30% { opacity: 1; } to { translate: 0 0; scale: 1; rotate: 0deg; clip-path: inset(0 0 0 0 round 22px); } }
.sl-col::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(12, 10, 9, 0.7), transparent 34%); }

.scene .glass.sl-tag {
  position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1.1rem; border-radius: 18px;
  opacity: 0; transform: translateY(34px) scale(0.86); transition: opacity 0.3s, transform 0.45s var(--ease);
}
.scene .glass.sl-tag.is-on { opacity: 1; transform: none; transition: opacity 0.45s calc(0.6s + var(--i) * 0.12s), transform 1s var(--spring) calc(0.6s + var(--i) * 0.12s); }
.sl-tag b { font: 300 2.1rem/1 var(--font-display); color: var(--terracota-glow); font-variant-numeric: lining-nums; text-shadow: 0 0 22px rgba(217, 138, 85, 0.7); }
.sl-tag span { display: grid; gap: 0.15rem; font-size: 0.74rem; line-height: 1.35; color: rgba(242, 237, 228, 0.8); }
.sl-tag strong { font: italic 400 1.35rem/1.1 var(--font-display); color: var(--paper); }

/* filos de luz entre columnas: se apagan cuando las tres se funden en un solo muro */
.sl-seam { position: absolute; top: 6vh; bottom: 6vh; width: 1px; pointer-events: none; opacity: calc((1 - var(--ue, 0)) * 0.9); background: linear-gradient(transparent, var(--terracota-glow) 30%, #FFF1E2 50%, var(--terracota-glow) 70%, transparent); box-shadow: 0 0 22px 2px rgba(217, 138, 85, 0.8); transform: scaleY(0); }
.sl.is-enter .sl-seam { transform: none; transition: transform 1.2s var(--expo) 0.7s; }
.sl-seam.s1 { left: 33.333%; }
.sl-seam.s2 { left: 66.666%; }

.sl-shade { position: absolute; inset: 0; pointer-events: none; opacity: var(--t, 0); background: linear-gradient(to top, rgba(12, 10, 9, 0.88), rgba(12, 10, 9, 0.35) 45%, rgba(12, 10, 9, 0.5)); }
.sl-eye { position: absolute; left: var(--gutter); top: calc(var(--nav-h) + 1.4rem); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(242, 237, 228, 0.85); opacity: var(--t, 0); }
.sl-eye b { font-weight: 600; color: var(--terracota-glow); }
.sl-quote {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 9vh; max-width: 17ch; margin: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(2.6rem, 6.4vw, 6.2rem); line-height: 1.02; letter-spacing: -0.01em;
  text-shadow: 0 2px 50px rgba(0, 0, 0, 0.6); transform-origin: 0 100%; transform: scale(calc(1 + var(--t, 0) * 0.08));
}
.sl-quote em { color: var(--terracota-glow); text-shadow: 0 0 40px rgba(217, 138, 85, 0.55); }
.sl-quote.is-on .w > span { transform: none; transition: transform 1.1s var(--spring); transition-delay: calc(var(--i, 0) * 0.06s); }

@media (max-width: 760px) {
  /* en celular cada video ya es vertical: ocupan la pantalla completa, uno tras otro */
  .sl-cols { display: block; padding: 0; }
  .sl-col { position: absolute; inset: 0; border-radius: 0; transform: none; box-shadow: none; }
  .sl-col:nth-child(n + 2) { clip-path: inset(0 0 calc((1 - var(--e, 0)) * 100%) 0); }
  .sl.is-enter .sl-col { animation: none; }
  .sl.is-enter .sl-col:first-child { animation: slRiseM 1s var(--spring) backwards; }
  @keyframes slRiseM { from { opacity: 0; scale: 1.25; } }
  .sl-seam { display: none; }
  .scene .glass.sl-tag { left: var(--gutter); right: auto; bottom: 2rem; }
  .sl-quote { font-size: 2.7rem; bottom: 7vh; }
  .sl-eye { font-size: 0.56rem; letter-spacing: 0.14em; }
}

/* =====================================================================
   Celular
   ===================================================================== */
@media (max-width: 760px) {
  .sv { --ft: 12vh; --fr: 5vw; --fb: 51vh; --fl: 5vw; }
  .m1 b { font-size: 17vw; }
  .m2 b { font-size: 46vw; }
  .sv-hud { font-size: 0.56rem; letter-spacing: 0.16em; }
  .sv-hud-b { display: none; }
  .sv-copy { top: 50.5vh; width: auto; right: var(--gutter); }
  .sv-claim { font-size: 2.15rem; margin: 0.5rem 0 0.9rem; transform: translateY(calc((1 - var(--e, 0)) * -9vh)) scale(calc(1 + (1 - var(--e, 0)) * 0.72)); }
  .sv-p { font-size: 0.9rem; line-height: 1.6; }
  .sv-h-tag { right: 4vw; font-size: 0.54rem; letter-spacing: 0.12em; }
  .scene .glass.sv-card { left: 8vw; bottom: calc(var(--fb) - 2.5vh); padding: 0.85rem 1.1rem 0.95rem; font-size: 0.8rem; max-width: 15.5rem; }
  .sv-card strong { font-size: 1.35rem; }
  .scene .glass.sv-chip { font-size: 0.56rem; letter-spacing: 0.12em; padding: 0.65rem 0.9rem 0.65rem 0.75rem; }
  .sv-k1 { right: 3vw; top: calc(var(--ft) - 1.8vh); }
  .sv-k2 { left: 3vw; bottom: calc(var(--fb) - 1.6vh); }
  .scene .glass.sv-nums { right: var(--gutter); bottom: 2.4vh; grid-template-columns: 1fr 1fr; gap: 0.9rem 0; padding: 1rem 0.3rem; border-radius: 20px; }
  .sv-nums div { padding: 0 0.9rem; }
  .sv-nums div:nth-child(3)::before { display: none; }
  .sv-nums dd { font-size: 2.1rem; }
  .sv-nums dt { font-size: 0.68rem; }
  .sv-nums.is-on ~ .sv-copy .sv-p { opacity: 0; transform: translateY(-14px); transition: opacity 0.4s, transform 0.5s; }

  .sa { --ts: 2.7rem; --th: calc(var(--ts) * 2.15); --base: 13.6rem; }
  .sa-big { font-size: 40vw; }
  .sa-deck i { width: 40vw; margin: -13.3vw 0 0 -20vw; }
  .sa-shot.is-first { clip-path: inset(calc((1 - var(--e, 0)) * 37%) calc((1 - var(--e, 0)) * 24%) round calc((1 - var(--e, 0)) * 18px)); }
  .sa-live { right: 0; left: 0; width: auto; filter: none; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 0.4s; }
  .sa-shot.is-live .sa-live { clip-path: inset(0); transition: clip-path 1.1s var(--expo) 1.2s; }
  .sa-live-in { clip-path: none; }
  .sa-live video { left: 0; width: 100%; }
  .sa-top { font-size: 0.56rem; letter-spacing: 0.14em; right: var(--gutter); }
  .sa-titles h3 { white-space: normal; }
  .scene .glass.sa-card { left: var(--gutter); width: auto; bottom: 6.3rem; padding: 0.95rem 1.1rem 1rem; min-height: 6.4rem; }
  .sa-card p { font-size: 0.84rem; line-height: 1.55; }
  .sa-rail { gap: 0.4rem; bottom: 2.2rem; }
  .sa-rail button { width: 48px; height: 34px; border-radius: 8px; }
  .sa-rail span { display: none; }
  .sa-edge.is-odd, .sa-edge.is-even { width: 2px; }
}