/* ============================================================
   PLAZA VILLARREAL TRES TORRES — Main stylesheet
   Presentación interactiva por estados. No es una página: es un show.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--ink);
  color: var(--warm-white);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

/* Cuerpo NO scrollea: el motor de escenas controla todo */
body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

img, canvas { display: block; }
em { font-style: normal; color: var(--beige); }

::selection { background: var(--bronze); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* ============ LOADER ============ */
.loader {
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  background: var(--ink);
  transition: opacity 0.7s var(--ease-cinema), visibility 0.7s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark {
  font-size: 42px; font-weight: 300; letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--warm-white);
}
.loader__rule { width: 180px; height: 1px; background: var(--hairline); position: relative; overflow: hidden; }
.loader__rule span {
  position: absolute; inset: 0;
  background: var(--bronze);
  transform: scaleX(0); transform-origin: left;
}
.loader__label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.34em; text-indent: 0.34em;
  color: var(--warm-white-dim);
}

/* ============ HUD ============ */
.hud {
  position: fixed; right: 28px; top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-hud);
  display: flex; align-items: center; gap: 14px;
  mix-blend-mode: difference;
}
.hud__counter {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; color: var(--warm-white);
  display: flex; gap: 6px; align-items: baseline;
  line-height: 1;
}
.hud__sep { opacity: 0.45; }
.hud__line {
  width: 1px; height: 96px;
  background: var(--hairline-strong);
  position: relative; overflow: hidden;
}
.hud__line i {
  position: absolute; top: 0; left: 0; width: 1px; height: 96px;
  background: var(--warm-white);
  transform: scaleY(0); transform-origin: top;
}
.hud__scroll-hint {
  position: fixed; left: 50%; bottom: 30px;
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.4em; text-indent: 0.4em;
  color: var(--warm-white-dim); opacity: 0.55;
  animation: hint 2.6s ease-in-out infinite;
  z-index: var(--z-hud);
}
@keyframes hint {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.6; }
}
.hud.is-hidden .hud__scroll-hint { display: none; }

/* ============ ESCENAS ============ */
.stage { position: fixed; inset: 0; }

.scene {
  position: absolute; inset: 0;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  background: var(--ink);
}
.scene.is-active { visibility: visible; opacity: 1; }

/* Cortina de transición entre escenas */
.scene__veil {
  position: fixed; inset: 0;
  z-index: 46;
  background: var(--ink);
  transform: none; /* estado inicial lo gestiona GSAP (yPercent:-102) */
  pointer-events: none;
  will-change: transform;
}
.scene__veil::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
  opacity: 0.8;
}

.scene__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 6vw, 96px);
  gap: clamp(20px, 4vh, 48px);
}
.scene__inner--center { align-items: center; text-align: center; }

/* Metadata */
.kicker {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.42em; text-indent: 0.42em;
  color: var(--bronze);
  text-transform: uppercase;
}
.kicker--gallery { position: absolute; top: clamp(28px, 5vh, 56px); left: clamp(24px, 5vw, 96px); z-index: 5; }

.scene__title {
  font-size: clamp(34px, 6.4vw, 96px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.015em;
  max-width: 14em;
}
.scene__title em { color: var(--warm-white-dim); font-weight: 300; }
.scene__title.center { text-align: center; }

.scene__lede {
  max-width: 34em;
  font-weight: 300;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--warm-white-dim);
  text-align: center;
}

/* ============ PLACEHOLDERS (slot de asset pendiente) ============ */
.ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 26px;
  z-index: var(--z-ph);
  padding: 8vw;
}
.ph__frame {
  position: relative;
  width: min(760px, 82vw);
  border: 1px solid var(--hairline-strong);
  padding: clamp(36px, 6vw, 88px) clamp(24px, 4vw, 56px);
  display: flex; flex-direction: column; gap: 14px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(247,244,236,0.028), transparent 55%);
}
.ph__frame::before, .ph__frame::after {
  content: ""; position: absolute;
  width: 26px; height: 26px;
  border: 1px solid var(--bronze);
}
.ph__frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.ph__frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.ph__tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--bronze);
  text-transform: uppercase;
}
.ph__title {
  font-size: clamp(22px, 3.4vw, 44px);
  font-weight: 300; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-white);
}
.ph__desc {
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 300; line-height: 1.8;
  color: var(--warm-white-dim);
  max-width: 30em;
}
.ph__steps { display: flex; gap: 8px; margin-top: 6px; }
.ph__steps i {
  width: 34px; height: 2px;
  background: var(--hairline-strong);
  animation: phPulse 2.2s ease-in-out infinite;
}
.ph__steps i:nth-child(2) { animation-delay: .18s; }
.ph__steps i:nth-child(3) { animation-delay: .36s; }
.ph__steps i:nth-child(4) { animation-delay: .54s; }
.ph__steps i:nth-child(5) { animation-delay: .72s; }
@keyframes phPulse { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

.ph-note {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.26em; text-indent: 0.26em;
  color: var(--warm-white-dim); opacity: 0.55;
  text-transform: uppercase;
  text-align: center;
}

/* ============ SCENE 01 · HERO ============ */
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: var(--z-media);
  background: var(--ink-deep);
}
.hero__typo {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding-bottom: 11vh;
  text-align: center;
  z-index: var(--z-typo);
  pointer-events: none;
  gap: 18px;
}
.hero__headline {
  font-size: clamp(52px, 10.5vw, 168px);
  font-weight: 200;
  line-height: 0.88;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 60px rgba(0,0,0,0.55);
}
.hero__sub {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.46em; text-indent: 0.46em;
  color: var(--warm-white);
  opacity: 0.8;
}
.hero__scrubbar {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  width: min(420px, 60vw); height: 1px;
  background: var(--hairline-strong);
  z-index: var(--z-typo);
}
.hero__scrubbar i {
  position: absolute; inset: 0;
  background: var(--bronze);
  transform: scaleX(0); transform-origin: left;
}
.hero__scrubbar--dn { bottom: 18px; }

/* ============ SCENE 02 · UBICACIÓN ============ */
.scene__head { display: flex; flex-direction: column; gap: 14px; }
.scene[data-scene="location"] .scene__inner {
  justify-content: flex-start;
  padding-top: 5vh;
  gap: 16px;
  overflow: hidden;
}
.scene[data-scene="location"] .scene__title {
  font-size: clamp(30px, 4.6vw, 66px);
  line-height: 1.02;
}
.loc { position: relative; }
.loc__map {
  width: auto;
  height: min(56vh, 540px);
  max-width: 94vw;
  display: block;
  margin-inline: auto;
  border: 1px solid var(--hairline);
}
.loc-ring { fill: none; stroke: var(--hairline-strong); stroke-width: 1; }
.loc-ring--far { stroke-dasharray: 2 6; opacity: 0.5; }
.loc-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.28em;
  fill: var(--warm-white-dim);
  text-anchor: middle;
}
.loc-label--city { opacity: 0.5; }
.loc-road {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.loc-road--hero {
  stroke: var(--bronze);
  stroke-width: 2;
  stroke-dasharray: 7 7;
}
.loc-label--road { fill: var(--warm-white-dim); opacity: 0.75; }
.loc-label--heroc { fill: var(--bronze); text-anchor: start; }
.loc__marker { fill: var(--bronze); }
.loc__halo { fill: none; stroke: var(--bronze); opacity: 0.5; animation: halo 3s ease-in-out infinite; }
.loc__marker, .loc__halo { transform-box: fill-box; transform-origin: center; }
@keyframes halo {
  0%,100% { opacity: .2; r: 60; }
  50% { opacity: .55; r: 68; }
}
.loc-label--site { fill: var(--warm-white); font-size: 13px; letter-spacing: 0.34em; text-anchor: middle; font-family: var(--font-display); font-weight: 400; }
.loc-label--site-sub { fill: var(--bronze); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; }

/* ============ SCENE 03 · CIFRAS ============ */
.figures { display: flex; flex-direction: column; gap: clamp(18px, 4vh, 44px); align-items: center; }
.figure { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.12; }
.figure.is-active { opacity: 1; }
.figure__value {
  font-size: clamp(54px, 11vw, 190px);
  font-weight: 200;
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.figure__value.has-value { color: var(--warm-white); }
.figure__label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.42em; text-indent: 0.42em;
  color: var(--warm-white-dim);
}
.figure__unit { color: var(--bronze); }

/* ============ SCENE 04 · MASTERPLAN ============ */
.scene[data-scene="masterplan"] .scene__inner {
  justify-content: flex-start;
  padding-top: 4vh;
  gap: 12px;
  overflow: hidden;
}
.scene[data-scene="masterplan"] .scene__title {
  font-size: clamp(28px, 4.2vw, 60px);
  line-height: 1.0;
}
.scene__body--plan { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.plan {
  position: relative;
  width: 100%;
  height: min(58vh, 600px);
  border: 1px solid var(--hairline);
  background: var(--ink-deep);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.plan__img {
  width: 100%; height: 100%;
  object-fit: contain;
  will-change: clip-path;
}
.plan__badge {
  position: absolute; right: 14px; bottom: 12px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.26em; color: var(--bronze);
  background: rgba(20,19,18,0.72);
  padding: 6px 10px;
}
.plan__layer { opacity: 0; }
.plan__stroke {
  fill: none;
  stroke: var(--warm-white-dim);
  stroke-width: 1.4;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}
.plan__stroke--boundary { stroke: var(--bronze); stroke-width: 1.6; }
.plan__stroke--road { stroke: var(--hairline-strong); stroke-width: 3; }
.plan__stroke--build { stroke: var(--warm-white); stroke-width: 1.9; }
.plan__stroke--tree { stroke: var(--beige); stroke-width: 1.2; }
.plan__stroke--ped { stroke: var(--bronze); stroke-width: 1.6; stroke-dasharray: 4 7; stroke-dashoffset: 0; }
.plan__tag {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.24em;
  fill: var(--warm-white-dim); opacity: 0.75;
}
.plan__tag--ctr { fill: var(--bronze); }
.plan__label { fill: var(--warm-white); font-size: 15px; letter-spacing: 0.3em; font-weight: 300; }
.plan__bay { stroke: var(--warm-white-dim); stroke-width: 1; fill: none; opacity: 0.8; }
.plan__bay rect { stroke: inherit; stroke-width: inherit; }
.plan__bay--2 { transform: translate(0, 70px); }

/* ============ SCENE 05 · GALERÍA ============ */
.scene__inner--gallery { overflow: hidden; justify-content: center; }
.gallery {
  display: flex;
  gap: clamp(18px, 3vw, 48px);
  width: max-content;
  align-items: center;
}
.ga__item {
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0.12;
}
.ga__item.is-active { opacity: 1; }
.ga__media {
  position: relative;
  width: clamp(280px, 34vw, 620px);
  aspect-ratio: 16 / 10;
  background: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.ga__media img { width: 100%; height: 100%; object-fit: cover; }
.ga__index {
  position: absolute; top: 18px; left: 20px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.3em; color: var(--warm-white-dim);
  text-shadow: 0 1px 12px rgba(0,0,0,0.8);
}
.ga-note {
  position: absolute; left: 0; right: 0; bottom: 4vh;
}
.ga__cap {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.34em; text-indent: 0.34em;
  color: var(--warm-white-dim);
}

/* ============ SCENE 06 · ÍCONOS ============ */
.icons { position: relative; display: grid; place-items: center; }
.icon-panel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; opacity: 0; pointer-events: none; }
.icon-panel.is-active { opacity: 1; }
.icon-panel__media {
  width: clamp(260px, 32vw, 560px);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hairline);
  background: var(--charcoal);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.icon-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.icon-panel__cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.34em; color: var(--warm-white-dim); }
.icons__title {
  margin-top: clamp(20px, 4vh, 40px);
  font-size: clamp(26px, 4.6vw, 66px);
  font-weight: 200; line-height: 1.02; letter-spacing: 0.03em;
  text-align: center;
}
.icons__title em { color: var(--warm-white-dim); }

/* ============ SCENE 07 · EXPERIENCIA ============ */
.xp {
  display: flex; gap: clamp(16px, 3vw, 44px);
  justify-content: center; flex-wrap: wrap;
}
.xp__media {
  width: clamp(260px, 30vw, 520px);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
  background: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.xp__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============ SCENE 08 · DÍA → NOCHE ============ */
.daynight { position: absolute; inset: 0; overflow: hidden; }
.daynight__sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #9db8d0 0%, #cfe0e6 30%, #f2e3c4 55%, #e8c39a 70%, #c99262 82%, #8a5c42 100%);
  transition: filter 0.4s linear;
}
.daynight__ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16%;
  background: linear-gradient(180deg, #6f5540 0%, #241c15 100%);
}
.daynight__sun {
  position: absolute;
  width: 96px; height: 96px;
  border-radius: 50%;
  left: 18%;
  top: 44%;
  background: radial-gradient(circle at 40% 35%, #ffe9b0, #ecc072 55%, rgba(236,192,114,0) 72%);
  filter: blur(2px);
}
.daynight__stars { position: absolute; inset: 0; opacity: 0; background-image: radial-gradient(1.2px 1.2px at 12% 22%, var(--warm-white) 50%, transparent 60%), radial-gradient(1px 1px at 68% 12%, var(--warm-white) 50%, transparent 60%), radial-gradient(1.4px 1.4px at 84% 34%, var(--warm-white) 50%, transparent 60%), radial-gradient(1px 1px at 34% 8%, var(--warm-white) 50%, transparent 60%), radial-gradient(1.2px 1.2px at 52% 20%, var(--warm-white) 50%, transparent 60%); }
.daynight__lights {
  position: absolute; inset: 0;
  opacity: 0;
  background-image:
    radial-gradient(2px 2px at 30% 84%, #ffd9a0 50%, transparent 60%),
    radial-gradient(1.6px 1.6px at 44% 84%, #ffd9a0 50%, transparent 60%),
    radial-gradient(2px 2px at 61% 84%, #ffd9a0 50%, transparent 60%),
    radial-gradient(1.8px 1.8px at 74% 84%, #ffd9a0 50%, transparent 60%),
    radial-gradient(2.2px 2.2px at 34% 84%, #ffd9a0 50%, transparent 60%),
    radial-gradient(1.6px 1.6px at 55% 84%, #ffd9a0 50%, transparent 60%);
}
.daynight__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: var(--z-media);
  display: none; /* visible cuando haya secuencia de frames */
}
.dn-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s linear;
  z-index: 2;
  pointer-events: none;
}
.dn-img.is-on { opacity: 1; }
.daynight__ph { z-index: var(--z-ph); }
.daynight__title { letter-spacing: 0.24em; }
.daynight__typo {
  position: absolute; z-index: var(--z-typo);
  left: 8vw; bottom: 12vh;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0;
}
.daynight__line {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.4em; color: var(--warm-white-dim);
}
.daynight__line--big {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 72px);
  font-weight: 200; line-height: 1.02;
  letter-spacing: 0.04em;
  color: var(--warm-white);
}

/* ============ SCENE 09 · CIERRE ============ */
.scene[data-scene="closing"] .scene__inner {
  background:
    linear-gradient(rgba(15, 14, 13, 0.78), rgba(15, 14, 13, 0.86)),
    url("../assets/renders/dn-03-night.webp") center / cover no-repeat;
}
.closing { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.closing__title {
  font-size: clamp(44px, 9vw, 150px);
  font-weight: 200; line-height: 0.9; letter-spacing: 0.03em;
}
.closing__line {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.4em; text-indent: 0.4em;
  color: var(--warm-white-dim); line-height: 2;
}
.closing__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 8px;
}
.closing__slot {
  background: var(--ink);
  padding: 18px 26px;
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
}
.closing__slot-label {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.34em; color: var(--bronze);
}
.closing__slot-value {
  font-size: 14px; font-weight: 300; letter-spacing: 0.06em;
  color: var(--warm-white);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .hud { right: 5vw; }
  .hud__line { height: 60px; }
  .scene__inner { padding: 40px 24px; }
  .closing__info { grid-template-columns: 1fr; }
  .loc__map { width: 100%; }
  .ga__media { width: 70vw; }
  .plan { max-height: 54vh; }
}

@media (max-width: 560px) {
  .hero__headline { font-size: 15vw; }
  .daynight__typo { left: 7vw; bottom: 18vh; }
  .hud__scroll-hint { display: none; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .loader__rule span, .ph__steps i, .loc__halo, .hud__scroll-hint { animation: none; }
  .scene { transition: none; }
}