/* =========================================================
   LAVISTA — capa de motion
   Intro, capas de luz, tarjetas Liquid Glass, grano de película
   y transiciones encadenadas. Misma paleta y tipografía.
   ========================================================= */

@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --water: #3D5A5E;
  --amber: #E8B27A;
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --inout: cubic-bezier(0.87, 0, 0.13, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* resorte con un solo rebote corto: impacto rápido, asentamiento controlado */
    --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  }
}

/* ---------- Grano de película: encima de todo, sin tocar la nitidez del texto ---------- */
.grain {
  position: fixed; inset: -120px; z-index: 90; pointer-events: none;
  opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.8s steps(1) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 16% { transform: translate(-46px, 28px); } 33% { transform: translate(34px, -52px); }
  50% { transform: translate(-22px, -30px); } 66% { transform: translate(58px, 40px); } 83% { transform: translate(-60px, 12px); }
}

/* ---------- Liquid Glass ---------- */
.glass {
  --gx: 30%; --gy: 0%;
  position: relative; isolation: isolate; border-radius: 22px; color: var(--paper);
  background:
    radial-gradient(120% 90% at var(--gx) var(--gy), rgba(255, 255, 255, 0.2), transparent 55%),
    linear-gradient(140deg, rgba(242, 237, 228, 0.15), rgba(242, 237, 228, 0.04) 42%, rgba(20, 17, 15, 0.3));
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 28px rgba(255, 255, 255, 0.05),
    0 30px 80px -24px rgba(0, 0, 0, 0.7), 0 0 60px -22px rgba(217, 138, 85, 0.55);
}
/* borde con luz que lo recorre */
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang), rgba(242, 237, 228, 0.16) 0 52%, rgba(217, 138, 85, 0.95) 66%, #FFF1E2 74%, rgba(217, 138, 85, 0.7) 82%, rgba(242, 237, 228, 0.16) 96%);
  -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 7s linear infinite;
}
@keyframes spin { to { --ang: 360deg; } }

/* ---------- Intro ---------- */
.intro { position: fixed; inset: 0; z-index: 80; pointer-events: none; color: var(--paper); }
.intro-half { position: absolute; left: 0; right: 0; height: 50.3%; background: var(--night); overflow: hidden; }
.intro-half.top { top: 0; background: radial-gradient(70% 130% at 50% 100%, #3B2A1E 0%, #1D1713 45%, var(--night) 75%); }
.intro-half.bot { bottom: 0; background: radial-gradient(70% 130% at 50% 0%, #2B3A3A 0%, #171613 45%, var(--night) 75%); }
.intro-line {
  position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, var(--terracota-glow) 18%, #fff 50%, var(--terracota-glow) 82%, transparent);
  box-shadow: 0 0 26px 2px rgba(217, 138, 85, 0.85), 0 0 90px 10px rgba(217, 138, 85, 0.35);
}
.intro-logo { position: fixed; left: 0; top: 0; transform-origin: 0 0; height: auto; will-change: transform, clip-path, filter; }
.intro-meta {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(50% + 1.4rem);
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(242, 237, 228, 0.7);
  font-variant-numeric: tabular-nums;
}
.intro-meta b { font-weight: 500; color: var(--terracota-glow); }

/* ---------- Estados previos a la entrada (solo con JS y sin "reducir movimiento") ---------- */
.js-motion:not(.is-live) :is(.nav > *, .tower-tag, .hero-side > *, .plan-card, .chip, .hero-fx) { opacity: 0; }

.is-live .nav > * { animation: dropIn 0.8s var(--expo) backwards; }
.is-live .nav > :nth-child(2) { animation-delay: 0.08s; }
.is-live .nav > :nth-child(3) { animation-delay: 0.16s; }
.is-live .nav > :nth-child(4) { animation-delay: 0.24s; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-18px); } }

.is-live .hero-art img { animation: heroPunch 2.6s var(--expo) backwards; }
@keyframes heroPunch { from { transform: scale(1.24); filter: brightness(0.55) saturate(0.7); } }

.is-live .tower-tag { animation: tagIn 0.75s var(--spring) backwards; animation-delay: calc(0.34s + var(--i, 0) * 0.085s); }
@keyframes tagIn { from { opacity: 0; transform: translate(-50%, -40%) scale(0.3); } }

.is-live .hero-fx { animation: fadeIn 1.6s ease backwards 0.2s; }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- Portada: capas de luz ---------- */
.hero-art { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -9px); scale: 1.035; }
.hero-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.aurora { position: absolute; border-radius: 50%; filter: blur(80px); mix-blend-mode: screen; will-change: transform; }
.hero .a1 { right: -6%; top: 22%; width: 46vw; height: 46vw; background: radial-gradient(circle, rgba(217, 138, 85, 0.45), transparent 65%); animation: drift1 16s ease-in-out infinite alternate; }
.hero .a2 { left: 8%; bottom: -22%; width: 44vw; height: 34vw; background: radial-gradient(circle, rgba(61, 90, 94, 0.4), transparent 65%); animation: drift2 21s ease-in-out infinite alternate; }
.hero .a3 { left: 38%; top: -18%; width: 34vw; height: 26vw; background: radial-gradient(circle, rgba(232, 178, 122, 0.2), transparent 65%); animation: drift1 26s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(-9vw, 6vw) scale(1.25); } }
@keyframes drift2 { to { transform: translate(11vw, -5vw) scale(0.82); } }
.hero-sun {
  position: absolute; right: 2%; top: 40%; width: 30vw; height: 30vw; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 214, 160, 0.5), rgba(217, 138, 85, 0.16) 38%, transparent 62%);
  animation: sun 6.5s ease-in-out infinite alternate;
}
@keyframes sun { from { opacity: 0.55; transform: scale(0.9); } to { opacity: 1; transform: scale(1.12); } }
.hero-sweep {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%; transform: translateX(-160%) skewX(-18deg); mix-blend-mode: overlay;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 220, 0.5) 45%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 240, 220, 0.5) 55%, transparent);
}
.is-live .hero-sweep { animation: sweep 11s var(--inout) 0.15s infinite; }
@keyframes sweep { 0% { transform: translateX(-160%) skewX(-18deg); } 13%, 100% { transform: translateX(520%) skewX(-18deg); } }

/* barrido de niveles al entrar: sube por las cuatro torres y el indicador lo sigue */
.band.is-scan { fill: rgba(217, 138, 85, 0.42); stroke: rgba(255, 241, 226, 0.7); transition-duration: 0.05s; }

/* ---------- Portada: tarjetas de interfaz ---------- */
.hero-side {
  position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; z-index: 2;
  display: flex; align-items: center; gap: 0.9rem; pointer-events: none;
}
.hero .hero-copy {
  position: relative; right: auto; top: auto; transform: none; width: min(26.5rem, 31vw);
  padding: clamp(1.4rem, 2.2vw, 2.1rem); pointer-events: none;
  translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 7px);
}
.hero .hero-copy h1 { font-size: clamp(2.1rem, 3.2vw, 3.3rem); }
.is-live .hero-copy { animation: cardIn 1.1s var(--expo) backwards 0.3s; }
@keyframes cardIn { from { opacity: 0; transform: perspective(1200px) translateY(70px) rotateX(-16deg) scale(0.92); filter: blur(12px); } }
.is-live .hero-copy > :is(.eyebrow, .hero-sub, .hero-hint) { animation: lineIn 0.9s var(--expo) backwards; }
.is-live .hero-copy > .eyebrow { animation-delay: 0.55s; }
.is-live .hero-copy > .hero-sub { animation-delay: 1.05s; }
.is-live .hero-copy > .hero-hint { animation-delay: 1.25s; }
@keyframes lineIn { from { opacity: 0; transform: translateY(16px); } }

/* palabras con máscara: suben desde su renglón */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.w > span { display: inline-block; }
.js-motion:not(.is-live) .hero-copy .w > span { opacity: 0; }
.is-live .hero-copy .w > span { animation: wordIn 0.95s var(--expo) backwards; animation-delay: calc(0.62s + var(--i, 0) * 0.055s); }
@keyframes wordIn { from { opacity: 0; transform: translateY(112%) rotate(5deg); } }

.gauge {
  flex: none; width: 4.4rem; padding: 0.9rem 0.6rem 0.8rem; border-radius: 18px;
  display: grid; justify-items: center; gap: 0.45rem;
  font-size: 0.6rem; letter-spacing: 0.18em; color: rgba(242, 237, 228, 0.75);
  translate: calc(var(--px, 0) * 18px) calc(var(--py, 0) * 12px);
}
.is-live .gauge { animation: gaugeIn 0.9s var(--spring) backwards 0.5s; }
@keyframes gaugeIn { from { opacity: 0; transform: translateX(34px) scaleY(0.5); } }
.gauge-ticks { display: grid; gap: 5px; justify-items: center; padding: 0.2rem 0; }
.gauge-ticks i {
  display: block; width: 14px; height: 2px; border-radius: 2px; background: rgba(242, 237, 228, 0.3);
  transition: width 0.45s var(--spring), background 0.25s, box-shadow 0.25s;
}
.gauge-ticks i.is-on { width: 34px; background: var(--terracota-glow); box-shadow: 0 0 14px 2px rgba(217, 138, 85, 0.9); }
.gauge-ticks i.is-near { width: 22px; background: rgba(242, 237, 228, 0.6); }
.gauge-code { margin-top: 0.2rem; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0; color: var(--paper); font-variant-numeric: lining-nums; white-space: nowrap; }

.plan-card {
  position: absolute; left: var(--gutter); bottom: clamp(1.5rem, 6.5vh, 4rem); z-index: 2;
  display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 1.2rem 0.6rem 0.6rem; border: 0; cursor: pointer; text-align: left;
  translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * 14px);
  transition: scale 0.5s var(--spring);
}
.plan-card:hover { scale: 1.04; }
.is-live .plan-card { animation: planIn 1s var(--spring) backwards 0.85s, bob 7s ease-in-out 2s infinite; }
@keyframes planIn { from { opacity: 0; transform: translateY(50px) rotate(-6deg) scale(0.8); } }
@keyframes bob { 50% { transform: translateY(-7px) rotate(0.4deg); } }
.plan-thumb { flex: none; width: 8.6rem; aspect-ratio: 2 / 1; border-radius: 14px; overflow: hidden; background: #0c0a09; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.plan-thumb img { width: 100%; height: 100%; object-fit: cover; scale: 1.18; transition: scale 1.2s var(--expo); }
.plan-card:hover .plan-thumb img { scale: 1.32; }
.plan-txt { display: grid; gap: 0.05rem; font-size: 0.8rem; color: rgba(242, 237, 228, 0.82); }
.plan-txt strong { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.05; color: var(--paper); font-variant-numeric: lining-nums; }
.plan-eyebrow { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); }
.plan-go { margin-top: 0.3rem; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); }
.plan-go i { display: inline-block; font-style: normal; transition: translate 0.4s var(--spring); }
.plan-card:hover .plan-go i { translate: 6px 0; }

.chip {
  position: absolute; left: var(--gutter); top: calc(var(--nav-h) + 1.1rem); z-index: 2;
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; border-radius: 999px;
  font-size: 0.64rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * 8px);
}
.is-live .chip { animation: planIn 0.9s var(--spring) backwards 1.05s, bob 8s ease-in-out 2.4s infinite reverse; }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px 3px rgba(232, 178, 122, 0.8); animation: pulse 2.2s infinite; }

.hero .hero-tip {
  position: absolute; min-width: 13.5rem; padding: 1rem 1.2rem 1.05rem; border-radius: 18px; color: var(--paper);
  background: linear-gradient(140deg, rgba(40, 32, 26, 0.72), rgba(20, 17, 15, 0.6));
  animation: tipIn 0.32s var(--spring);
}
@keyframes tipIn { from { opacity: 0; scale: 0.82; } }
.hero-tip .tip-where, .hero-tip .tip-meta { color: rgba(242, 237, 228, 0.75); }
.hero-tip .tip-go { border-top-color: var(--line-light); color: var(--amber); }

/* ---------- Sonido ---------- */
.snd {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 42px; padding: 0 0.9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(242, 237, 228, 0.3); background: rgba(20, 17, 15, 0.35); color: var(--paper);
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color 0.25s, background 0.25s, box-shadow 0.4s;
}
.snd:hover { border-color: var(--paper); }
.snd[aria-pressed="true"] { border-color: var(--terracota-glow); box-shadow: 0 0 26px -6px rgba(217, 138, 85, 0.9); }
.snd-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.snd-bars i { width: 2px; height: 3px; border-radius: 1px; background: currentColor; transition: height 0.3s; }
.snd[aria-pressed="true"] .snd-bars i { animation: bars 0.9s ease-in-out infinite alternate; background: var(--terracota-glow); }
.snd-bars i:nth-child(2) { animation-delay: -0.3s !important; }
.snd-bars i:nth-child(3) { animation-delay: -0.6s !important; }
.snd-bars i:nth-child(4) { animation-delay: -0.15s !important; }
@keyframes bars { from { height: 3px; } to { height: 12px; } }

/* ---------- Botones: luz y destello ---------- */
.btn { position: relative; overflow: hidden; }
.btn-accent { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 14px 44px -14px rgba(217, 138, 85, 0.95); }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; transform: translateX(-180%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); pointer-events: none;
}
.btn:hover::after { transform: translateX(330%) skewX(-20deg); transition: transform 0.9s var(--expo); }

/* ---------- Transición portada → departamento ---------- */
.xfer {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  background:
    radial-gradient(50% 60% at 30% 70%, rgba(217, 138, 85, 0.4), transparent 70%),
    radial-gradient(45% 55% at 78% 25%, rgba(61, 90, 94, 0.55), transparent 70%), var(--night);
}
.xfer-token {
  position: fixed; left: 0; top: 0; z-index: 71; pointer-events: none; white-space: nowrap; transform-origin: 0 0;
  font-family: var(--font-display); font-weight: 300; font-size: 160px; line-height: 0.9; color: var(--paper);
  font-variant-numeric: lining-nums; text-shadow: 0 0 60px rgba(217, 138, 85, 0.75);
}
.xfer-ring {
  position: fixed; left: 0; top: 0; z-index: 71; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none;
  border: 1px solid var(--terracota-glow); box-shadow: 0 0 30px 4px rgba(217, 138, 85, 0.8);
}

/* ---------- Departamento: profundidad y entrada en cadena ---------- */
.depto-stage::before {
  content: ""; position: absolute; left: -35%; right: -35%; bottom: -8%; height: 78%; pointer-events: none;
  background:
    linear-gradient(rgba(242, 237, 228, 0.17) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(242, 237, 228, 0.17) 1px, transparent 1px) 0 0 / 48px 100%;
  transform: perspective(640px) rotateX(63deg); transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 50% 62%, #000 8%, transparent 68%); mask-image: radial-gradient(ellipse 55% 75% at 50% 62%, #000 8%, transparent 68%);
  animation: gridMove 4.5s linear infinite;
}
@keyframes gridMove { to { background-position: 0 48px, 0 0; } }
.depto-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(38% 34% at 26% 74%, rgba(217, 138, 85, 0.34), transparent 70%),
    radial-gradient(34% 30% at 78% 24%, rgba(61, 90, 94, 0.5), transparent 70%);
  animation: sun 9s ease-in-out infinite alternate;
}
.stage-model, .stage-spots, .stage-tools, .stage-hint { z-index: 1; }
.stage-tools, .stage-hint { z-index: 2; }

.js-motion .depto:not(.is-in) :is(.depto-panel > *, .rooms > *, .stage-tools, .stage-hint) { opacity: 0; }
.js-motion .depto:not(.is-in) .stage-model { visibility: hidden; }
.depto.is-in .stage-model { animation: stageIn 1.5s var(--expo) backwards 0.1s; }
@keyframes stageIn { from { opacity: 0; transform: perspective(1400px) rotateX(24deg) translateY(90px) scale(0.78); filter: blur(10px); } }
.depto.is-in .depto-panel > * { animation: riseIn 0.9s var(--expo) backwards; animation-delay: calc(0.18s + var(--i, 0) * 0.07s); }
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } }
.depto.is-in .depto-panel > h2 { animation: codeIn 1s var(--spring) backwards 0.2s; }
@keyframes codeIn { from { opacity: 0; transform: translateY(40px) scale(0.86); } }
.depto.is-in .rooms > button { animation: tagPop 0.6s var(--spring) backwards; animation-delay: calc(0.5s + var(--i, 0) * 0.045s); }
@keyframes tagPop { from { opacity: 0; transform: translateY(22px) scale(0.7); } }
.depto.is-in :is(.stage-tools, .stage-hint) { animation: fadeIn 0.9s ease backwards 0.9s; }

.depto-panel { position: relative; overflow: hidden; }
.depto-panel::before {
  content: ""; position: absolute; left: -30%; top: -10%; width: 90%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(217, 138, 85, 0.22), transparent 62%); filter: blur(30px);
  animation: drift2 18s ease-in-out infinite alternate;
}
.depto-panel > * { position: relative; }
.depto-panel h2 { text-shadow: 0 0 46px rgba(217, 138, 85, 0.35); }
#unit-code { display: inline-block; }
.picker { padding: 0.9rem; border-radius: 20px; }
.picker.glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 24px 60px -30px rgba(0, 0, 0, 0.8); }
.seg button, .stepper button { transition: background 0.25s, color 0.25s, scale 0.45s var(--spring); }
.seg button[aria-pressed="true"] { scale: 1.04; box-shadow: 0 6px 22px -6px rgba(242, 237, 228, 0.6); }
.picker.is-pulse::before { animation: spin 0.9s linear, flash 0.9s ease; }
@keyframes flash { 30% { filter: brightness(2.2) drop-shadow(0 0 10px rgba(217, 138, 85, 0.9)); } }

/* pestañas: una sola píldora que viaja de un espacio a otro */
.rooms { isolation: isolate; }
.rooms-pill {
  position: absolute; left: 0; top: 14px; height: 44px; width: 0; border-radius: 999px; z-index: -1; pointer-events: none;
  background: var(--paper); box-shadow: 0 0 30px -4px rgba(242, 237, 228, 0.7);
  transition: transform 0.6s var(--spring), width 0.5s var(--spring);
}
.rooms.has-pill button[aria-selected="true"] { background: transparent; border-color: transparent; }
.rooms button { transition: background 0.2s, color 0.35s, border-color 0.2s; }

/* render: se abre como diafragma desde su punto en la maqueta */
.js-motion .stage-render {
  --rx: 50%; --ry: 60%; opacity: 1;
  clip-path: circle(0% at var(--rx) var(--ry)); transition: clip-path 0.55s var(--inout);
}
.js-motion .stage-render.is-in { clip-path: circle(150% at var(--rx) var(--ry)); transition: clip-path 1.05s var(--expo); }
.js-motion .stage-render img { transform: scale(1.16); transition: transform 2.2s var(--expo); }
.js-motion .stage-render.is-in img { transform: none; }
.js-motion .stage-render figcaption > * { display: block; opacity: 0; transform: translateY(28px); transition: opacity 0.3s, transform 0.3s; }
.js-motion .stage-render.is-in figcaption > * { opacity: 1; transform: none; transition: opacity 0.7s var(--expo) 0.35s, transform 0.9s var(--spring) 0.35s; }
.js-motion .stage-render.is-in figcaption > .render-note { transition-delay: 0.5s; }

/* ---------- Secciones claras: máscaras, escala y cadena ---------- */
.js-motion :is(.vista, .amen, .agenda, .bleed) .w > span { transform: translateY(112%) rotate(5deg); transition: transform 1s var(--expo); transition-delay: calc(var(--i, 0) * 0.05s); }
.js-motion .is-read .w > span { transform: none; }
.js-motion .eyebrow.terracota, .js-motion .agenda-text .eyebrow { position: relative; padding-left: 0; transition: padding 0.9s var(--expo) 0.1s; }
.js-motion :is(.eyebrow.terracota, .agenda-text .eyebrow)::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 2.2rem; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--expo) 0.1s;
}
.js-motion .is-read :is(.eyebrow.terracota, .eyebrow) { padding-left: 3rem; }
.js-motion .is-read :is(.eyebrow.terracota, .eyebrow)::before { transform: scaleX(1); }

.vista-img { position: relative; }
.vista-clip { display: block; overflow: hidden; }
.js-motion .vista-img.reveal { opacity: 1; transform: none; }
.js-motion .vista-clip { clip-path: inset(16% 14% 16% 14% round 3px); transition: clip-path 1.5s var(--expo); }
.js-motion .vista-clip img { transform: scale(1.3); transition: transform 2.2s var(--expo); }
.js-motion .vista-img.is-in .vista-clip { clip-path: inset(0 round 3px); }
.js-motion .vista-img.is-in .vista-clip img { transform: none; }
.vista-card {
  position: absolute; left: -1.5rem; bottom: -1.5rem; display: grid; gap: 0.1rem; padding: 1rem 1.25rem 1.05rem; max-width: 16rem;
  background: linear-gradient(140deg, rgba(40, 32, 26, 0.7), rgba(20, 17, 15, 0.55)); font-size: 0.82rem; color: rgba(242, 237, 228, 0.85);
}
.vista-card strong { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; color: var(--paper); }
.js-motion .vista-card { opacity: 0; transform: translateY(46px) rotate(-5deg) scale(0.86); transition: opacity 0.5s 0.55s, transform 1.1s var(--spring) 0.55s; }
.js-motion .vista-img.is-in .vista-card { opacity: 1; transform: none; animation: bob 7.5s ease-in-out 2s infinite; }

.numbers { position: relative; }
.js-motion .numbers { border-top-color: transparent; }
.js-motion .numbers::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--expo); }
.js-motion .numbers.is-read::before { transform: scaleX(1); }
.js-motion .numbers div.reveal { opacity: 1; transform: none; }
.js-motion .numbers div.reveal > * { opacity: 0; transform: translateY(40px); transition: opacity 0.6s, transform 1s var(--spring); transition-delay: inherit; }
.js-motion .numbers div.reveal.is-in > * { opacity: 1; transform: none; }
.numbers dd { font-variant-numeric: lining-nums tabular-nums; }
.numbers dd.is-hit { animation: hit 0.6s var(--spring); }
@keyframes hit { from { transform: scale(1.14); color: var(--terracota); } }

.bleed img { scale: 1.12; }
@supports (animation-timeline: view()) {
  .js-motion .bleed img { animation: bleedPan linear both; animation-timeline: view(); }
  @keyframes bleedPan { from { transform: translateY(-7%) scale(1.06); } to { transform: translateY(7%) scale(1); } }
}
.bleed::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(40% 55% at 82% 38%, rgba(255, 200, 140, 0.4), transparent 70%);
  animation: sun 7s ease-in-out infinite alternate;
}

.amen-item { position: relative; transform-style: preserve-3d; }
.js-motion .amen-item.reveal { opacity: 1; transform: perspective(900px) rotateX(calc(var(--ty, 0) * -7deg)) rotateY(calc(var(--tx, 0) * 9deg)); transition: transform 0.5s var(--expo); }
.js-motion .amen-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--expo); transition-delay: inherit; border-radius: 4px; position: relative; }
.js-motion .amen-item.is-in .amen-img { clip-path: inset(0 0 0 0 round 4px); }
.js-motion .amen-img img { transform: scale(1.28); transition: transform 1.9s var(--expo); transition-delay: inherit; }
.js-motion .amen-item.is-in .amen-img img { transform: none; }
.js-motion .amen-item.is-in:hover .amen-img img { transform: scale(1.06); transition-delay: 0s; }
.amen-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s; mix-blend-mode: soft-light;
  background: radial-gradient(60% 60% at calc(50% + var(--tx, 0) * 50%) calc(50% + var(--ty, 0) * 50%), rgba(255, 255, 255, 0.9), transparent 70%);
}
.amen-item:hover .amen-img::after { opacity: 1; }
.amen-item:hover .amen-img { box-shadow: 0 0 0 1px rgba(184, 97, 44, 0.55), 0 30px 60px -30px rgba(140, 69, 32, 0.7); }
.js-motion .amen-item > :is(.amen-num, h3, p) { opacity: 0; transform: translateY(18px); transition: opacity 0.7s, transform 0.9s var(--expo); }
.js-motion .amen-item.is-in > :is(.amen-num, h3, p) { opacity: 1; transform: none; }
.js-motion .amen-item.is-in > .amen-num { transition-delay: 0.35s; }
.js-motion .amen-item.is-in > h3 { transition-delay: 0.42s; }
.js-motion .amen-item.is-in > p { transition-delay: 0.5s; }

/* ---------- Agenda ---------- */
.agenda { position: relative; overflow: hidden; }
.agenda-fx { position: absolute; inset: 0; pointer-events: none; }
.agenda .a1 { right: -8%; top: 4%; width: 44vw; height: 44vw; background: radial-gradient(circle, rgba(217, 138, 85, 0.4), transparent 65%); animation: drift1 18s ease-in-out infinite alternate; }
.agenda .a2 { left: 30%; bottom: -30%; width: 40vw; height: 34vw; background: radial-gradient(circle, rgba(61, 90, 94, 0.6), transparent 65%); animation: drift2 23s ease-in-out infinite alternate; }
.agenda-grid { position: relative; }
.form.glass { padding: clamp(1.25rem, 2.6vw, 2.25rem); }
.js-motion .form.glass { opacity: 0; transform: perspective(1200px) translateY(60px) rotateX(-12deg) scale(0.94); transition: opacity 0.6s, transform 1.2s var(--expo); }
.js-motion .is-read .form.glass { opacity: 1; transform: none; }
.js-motion .agenda-contact li { opacity: 0; transform: translateX(-24px); transition: opacity 0.6s, transform 0.9s var(--expo); }
.js-motion .is-read .agenda-contact li { opacity: 1; transform: none; }
.js-motion .is-read .agenda-contact li:nth-child(1) { transition-delay: 0.35s; }
.js-motion .is-read .agenda-contact li:nth-child(2) { transition-delay: 0.43s; }
.js-motion .is-read .agenda-contact li:nth-child(3) { transition-delay: 0.51s; }

/* ---------- Pie: el logo aparece por máscara y lo cruza un destello ---------- */
.footer-logo-wrap { position: relative; width: min(86vw, 68rem); margin: clamp(2.5rem, 6vw, 5rem) auto clamp(2rem, 5vw, 4rem); }
.footer-logo-wrap .footer-logo { width: 100%; margin: 0; }
.footer-clip { position: relative; }
/* la máscara va en el hijo: un elemento recortado por completo no dispara su propia aparición */
.js-motion .footer-logo-wrap.reveal { opacity: 1; transform: none; }
.js-motion .footer-clip { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--expo); }
.js-motion .footer-logo-wrap.is-in .footer-clip { clip-path: inset(0 0 0 0); }
.footer-shine {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("assets/logo-footer.png") center / contain no-repeat; mask: url("assets/logo-footer.png") center / contain no-repeat;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 214, 170, 0.95) 50%, transparent 58%) 0 0 / 300% 100% no-repeat;
  animation: shine 6s var(--inout) infinite;
}
@keyframes shine { 0% { background-position: 150% 0; } 45%, 100% { background-position: -50% 0; } }

/* ---------- Tablet y celular: la interfaz flotante se simplifica ---------- */
@media (max-width: 1100px) {
  .hero-art { translate: none; scale: 1; }
  .hero-side { position: relative; right: auto; top: auto; translate: none; display: block; padding: 0 var(--gutter) 3rem; margin-top: -3.5rem; pointer-events: auto; }
  .hero .hero-copy { width: auto; max-width: 40rem; padding: 1.6rem; translate: none; pointer-events: auto; }
  .hero .hero-copy h1 { font-size: clamp(2.1rem, 6.2vw, 3.4rem); }
  .gauge, .plan-card, .chip { display: none; }
  .hero-fx { bottom: 0; }
  .vista-card { left: 0.75rem; bottom: 0.75rem; }
  .snd-txt { display: none; }
  .snd { padding: 0 0.8rem; }
}
@media (max-width: 760px) {
  .grain { animation: none; opacity: 0.07; }
  .aurora { filter: blur(50px); }
  .hero .a1, .hero .a2, .hero .a3 { width: 90vw; height: 90vw; }
  .rooms-pill { top: 14px; }
  .xfer-token { font-size: 96px; }
  .snd { margin-left: auto; }
  .nav-cta { margin-left: 0; }
  .nav { gap: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .hero-sweep, .footer-shine { display: none; }
}

/* Agenda: video de fondo (torres / garza al atardecer) */
.agenda-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2.2s ease; }
.agenda-vid.is-on { opacity: 0.62; }
.agenda-vid.v-torres { object-position: 50% 64%; }
.agenda-vid.v-garza { object-position: 50% 46%; }
.agenda-fx::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(22, 20, 19, 0.9) 0%, rgba(22, 20, 19, 0.5) 48%, rgba(22, 20, 19, 0.72) 100%), linear-gradient(to bottom, rgba(22, 20, 19, 0.85), transparent 22%, transparent 78%, rgba(22, 20, 19, 0.9)); }