/* ============================================
   Frater · Mockup v0.5
   - Fachadas correctas (REV-I24 Llegada + IG48 cuerpo alto + I23 torre nocturna)
   - Amenidades completas (jardín, social, piscina, gimnasio, juegos, cowork, sauna, hidro, agua fría)
   - Animaciones suavizadas (fade in del título hero, scale más blando de la imagen)
   ============================================ */

/* Ocultar badge "Powered by Netlify" en el sitio público */
iframe#nl-badge-frame { display: none !important; }

@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-semibold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Paleta oficial Guido: «Hueso y salvia» (regla 70/20/10) — 22-oct-2026 */
  --cream: #EEEDE9;        /* Hueso — fondo 70% */
  --cream-dark: #DCDAD3;   /* Fondo de imagen mientras carga */
  --ink: #2C2F2A;          /* Tinta — títulos y texto principal */
  --ink-soft: #4F5B4D;     /* Salvia profundo 20% — botones, pestañas, rótulos */
  --ink-mute: #6B7268;     /* Texto suave — apoyo */
  --copper: #4F5B4D;       /* Salvia reaprovechado para section labels */
  --guindo: #4A3A2A;       /* Nogal 10% — acento palabras destacadas */
  --divider: rgba(44, 47, 42, 0.14);

  --serif: 'Newsreader', 'Lyon Display', 'Times New Roman', serif;
  --sans: 'Manrope', 'Söhne', -apple-system, Helvetica, sans-serif;

  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-cinema: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-breath: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-slow: cubic-bezier(0.19, 1, 0.22, 1);     /* easeOutExpo — más blando */

  --dur-screen: 1400ms;
  --dur-flip: 1700ms;
  --dur-image: 2000ms;
  --dur-veil: 900ms;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

em { font-style: italic; color: var(--guindo); }

/* ---------------- Pantallas ---------------- */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-screen) var(--ease-slow);
}
.screen.active { opacity: 1; pointer-events: auto; }

/* Veil crema para transiciones entre pantallas */
.transition-veil {
  position: fixed;
  inset: 0;
  background: var(--cream);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity var(--dur-veil) var(--ease-slow);
}
.transition-veil.active { opacity: 1; pointer-events: auto; }

/* ---------------- Brand bar ---------------- */
.brand-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 28px;
  font-family: var(--sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border-radius: 0 0 10px 10px;
  z-index: 50;
  transition:
    top var(--dur-flip) var(--ease-slow),
    background 240ms var(--ease-soft),
    padding 240ms var(--ease-soft);
}
.brand-bar .wordmark { font-size: 12px; }
.brand-bar img {
  height: 28px; width: auto; opacity: 0.95;
  transition: height 240ms var(--ease-soft), opacity 180ms var(--ease-soft);
}
/* Landing: logo grande en el centro, sin zócalo */
.brand-bar.landing-mode { top: 15%; padding: 0; background: transparent; }
.brand-bar.landing-mode img { height: 108px; opacity: 1; }

/* Zócalo superior cuando el nav está abierto: fondo hueso + blur */
body.nav-open .brand-bar:not(.landing-mode) {
  background: rgba(243, 238, 231, 0.92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(49, 49, 49, 0.08);
  box-shadow: 0 10px 24px -16px rgba(49, 49, 49, 0.14);
}

/* En pantallas de escena, el brand bar sigue al nav: visible cuando nav abierto, oculto cuando nav se auto-oculta */
body.has-nav-mode .brand-bar:not(.landing-mode) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-soft);
}
body.has-nav-mode.nav-open .brand-bar:not(.landing-mode) {
  opacity: 1;
  pointer-events: auto;
}

/* ---------------- Landing ---------------- */
#screen-landing { flex-direction: column; }
#screen-landing .wrap { text-align: center; max-width: 820px; padding: 0 40px; margin-top: 14vh; }

.eyebrow {
  font-family: var(--sans);
  font-size: clamp(12px, 0.95vw, 20px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 36px;
}
#screen-landing h1 {
  font-family: var(--serif);
  font-size: clamp(48px, 6.6vw, 94px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
}
#screen-landing .loc {
  margin-top: 44px;
  font-family: var(--sans);
  font-size: clamp(12px, 0.95vw, 20px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
#screen-landing .loc .dot { display: inline-block; margin: 0 10px; color: var(--copper); }
.btn-enter {
  margin-top: 60px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 34px;
  background: transparent;
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: all 400ms var(--ease-soft);
}
.btn-enter:hover { background: var(--ink); color: var(--cream); }
.btn-enter svg { width: 14px; height: 14px; }

/* ---------------- Captura del cliente — OVERLAY previo (solo asesora) ---------------- */
.captura-overlay {
  position: fixed;
  inset: 0;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 1;
  transition: opacity 600ms var(--ease-slow);
}
.captura-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.captura-overlay .wrap {
  text-align: center;
  max-width: 680px;
  padding: 0 40px;
}
.captura-overlay .eyebrow { margin-bottom: 32px; }
.captura-overlay h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 48px;
}

/* Chip flotante — editar nombre durante la presentación (asesora) */
.cliente-chip {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(243, 238, 231, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(49, 49, 49, 0.1);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease-soft);
}
.cliente-chip.visible { opacity: 0.75; pointer-events: auto; }
.cliente-chip:hover { opacity: 1; color: var(--ink); }
.cliente-chip-label { color: var(--ink-mute); font-size: 12px; }
.cliente-chip-name { color: var(--ink); }

/* ---------------- Pantalla captura (deprecated — ya no se usa como screen) ---------------- */
#screen-captura { flex-direction: column; }
#screen-captura .wrap { text-align: center; max-width: 680px; padding: 0 40px; }
#screen-captura .eyebrow { margin-bottom: 32px; }
#screen-captura h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 48px;
}
.cliente-input {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 18px 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 36px);
  text-align: center;
  color: var(--guindo);
  outline: none;
  transition: border-color 300ms var(--ease-soft);
}
.cliente-input::placeholder {
  color: var(--ink-mute);
  font-style: italic;
  opacity: 0.55;
}
.cliente-input:focus { border-bottom-color: var(--guindo); }

.cliente-actions {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.cliente-btn-skip {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 17px 12px;
  opacity: 0.75;
  transition: opacity 300ms var(--ease-soft);
}
.cliente-btn-skip:hover { opacity: 1; color: var(--ink); }

/* ---------------- Escena ---------------- */
.scene {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 100%;
  height: 100%;
  padding: 6px 2px 36px;    /* padding mínimo — máxima imagen */
  gap: 10px;
  transition: padding 260ms var(--ease-soft);
}
/* Nav visible: brand bar reaparece arriba + espacio izquierdo para el nav */
body.nav-open .scene {
  padding: 44px 10px 40px;
  padding-left: 210px;
}

/* Zócalo limpio: sólo título, sin section ni meta ni counter */
.plinth-section,
.plinth-meta,
#counter { display: none !important; }

/* Botón "A elegir otro apartamento": flotante en esquina inferior derecha,
   superpuesto sobre la imagen de la pantalla final de tipología. */
.choose-another {
  position: absolute;
  right: 26px;
  bottom: 86px;              /* por encima del zócalo (plinth) */
  z-index: 20;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: rgba(243, 238, 231, 0.92);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  color: var(--ink);
  border: 1px solid rgba(49, 49, 49, 0.18);
  border-radius: 999px;
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.35);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms var(--ease-soft), transform 180ms var(--ease-soft), border-color 180ms var(--ease-soft), color 180ms var(--ease-soft);
}
.choose-another:hover { background: var(--guindo); color: var(--cream); border-color: var(--guindo); transform: translateY(-1px); }

/* Imagen "contain" para el isométrico (que no se recorte) */
.scene-image.contain { background: var(--cream-dark); }
.scene-image.contain img { object-fit: contain !important; }

/* Pantalla logo Triara grande centrada */
#screen-logo-triara { display: flex; align-items: center; justify-content: center; }
.logo-hero {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 8vw;
}
.logo-hero-img { max-width: 72vw; max-height: 48vh; width: auto; height: auto; opacity: 0; transform: scale(0.98); transition: opacity 1200ms var(--ease-slow), transform 1600ms var(--ease-slow); }
.screen.active .logo-hero-img { opacity: 1; transform: scale(1); }

/* Drift del cielo: la imagen NO se mueve; sobre el tercio superior corre un
   overlay de nubes CSS (gradients radiales) con mix-blend-mode screen.
   Un mask vertical limita las nubes al cielo y las desvanece antes del edificio. */
.scene-image[data-drift] { position: relative; }
.scene-image[data-drift]::before {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 220%; height: 55%;
  background:
    radial-gradient(ellipse 22% 44% at 10% 55%, rgba(255,255,255,0.45), transparent 62%),
    radial-gradient(ellipse 16% 32% at 26% 32%, rgba(255,255,255,0.38), transparent 65%),
    radial-gradient(ellipse 28% 46% at 42% 58%, rgba(255,255,255,0.40), transparent 60%),
    radial-gradient(ellipse 18% 36% at 58% 36%, rgba(255,255,255,0.34), transparent 65%),
    radial-gradient(ellipse 24% 42% at 72% 55%, rgba(255,255,255,0.42), transparent 60%),
    radial-gradient(ellipse 16% 32% at 88% 42%, rgba(255,255,255,0.36), transparent 62%);
  mix-blend-mode: screen;
  animation: cloud-pass 55s linear infinite;
  pointer-events: none;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 55%, transparent 95%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 55%, transparent 95%);
}
@keyframes cloud-pass {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-55%); }
}

/* ============================================================
   3 Cuerpos · v2 — fachada atenuada + 3 bandas delgadas que
   iluminan el nivel completo del edificio (las ventanas prenden)
   El stage mantiene aspect-ratio fijo del render, así los Y%
   caen siempre sobre el mismo piso (portrait o landscape).
   ============================================================ */

.scene.three-bodies {
  position: relative; width: 100%; height: 100%;
  overflow: hidden; border-radius: 10px; background: #0a0e0d;
}

/* Stage con aspect-ratio del render 1920×1280.
   width:100% + aspect-ratio → height = width/1.5
   max-height:100% + aspect-ratio → width se recalcula si overflow vertical
   Resultado: image letterbox centrado en el scene, mantiene aspecto */
.tb-stage {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1920 / 1280;
}

/* Capa base: fachada atenuada (ventanas apagadas) */
.scene.three-bodies .tb-base {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  filter: brightness(0.28) contrast(1.08) saturate(0.7);
  z-index: 1;
}

/* Capa de iluminación: misma imagen a brillo pleno, recortada a
   3 bandas horizontales delgadas (0.8–1.6% de alto cada una).
   Donde la banda cruza las ventanas → se iluminan.
   Donde cruza cielo oscuro → no se ve nada. */
.scene.three-bodies .tb-bright-layer {
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
  background-image: url('assets/torre-completa.jpg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

  /* Y center de cada banda, en % del STAGE (= % de la imagen 1920×1280) */
  /* Máscara SVG inline: 3 rectángulos (franjas de piso) con blur suave en
     los bordes verticales para que no se vean como "cajas", pero manteniendo
     la forma de PISO (no óvalo).
     x,y,w,h en viewBox 100×100 → % de la imagen. */
  /* Polígonos: cara frontal (horizontal) + cara lateral derecha
     que recibe el ángulo de la perspectiva (sube hacia atrás).
     Puntos: fl-top, fr-top, br-top (slant up), br-bot (slant up), fr-bot, fl-bot */
  /* Perspectiva 2 puntos de fuga, horizonte Y=62.89% del render.
     Nivel 27 (arriba del horizonte): slant DOWN, trapecio angosto.
     Nivel 5 (bajo horizonte): slant UP suave, trapecio medio.
     Zócalo (más bajo): slant UP fuerte, trapecio ancho. */
  /* Perspectiva ajustada:
     - Nivel 27: slant DOWN amplificado a 5% (ángulo más agudo).
     - Nivel 5: rect frontal más corto (fr.x 50.94→47), trapecio arranca antes y es más ancho.
     - Zócalo: rect frontal más corto (fr.x 50.84→47), trapecio arranca antes y es más ancho. */
  /* Perspectiva v3:
     - Nivel 27: rect más corto (fl 42.60→44, fr 49.90→48.5), slant DOWN 5% intacto.
     - Nivel 5 (el más cercano): slant UP 0.6→2% amplificado.
     - Zócalo: rect más corto (fr 47→44), slant UP 1.2→2.5% amplificado. */
  /* Perspectiva v4:
     - Nivel 27: rect extendido a la izq (fl 44→42.5, rect 4.5%→6%).
     - Nivel 5: rect más largo (fr 46→48) + trapecio con TAPER
       (back face más fino que front: 3.1% → 1.8%).
     - Zócalo: rect más largo (fr 44→46) + trapecio con TAPER
       (back face más fino: 4.1% → 2.5%). */
  /* v5: nivel 27 fl 42.5→41 (más izq); nivel 5 fr 48→50 (más der) + trap más corto br 53.24→52.5. */
  /* v6: 27 fl 41→39.5; 5 fr 50→51.5 br 52.5→53.5 (toma esquina); zócalo fr 46→48. */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><defs><filter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'><feGaussianBlur stdDeviation='0.18'/></filter></defs><g fill='white' filter='url(%23b)'><polygon points='44,4.31 48.5,4.31 50.2,9.31 50.2,13.81 48.5,8.81 44,8.81'/><polygon points='36.15,72.73 51.5,72.73 53.5,71.4 53.5,73.2 51.5,75.86 36.15,75.86'/><polygon points='36.46,85.94 48,85.94 53.64,84.22 53.64,86.72 48,90 36.46,90'/></g></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><defs><filter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'><feGaussianBlur stdDeviation='0.18'/></filter></defs><g fill='white' filter='url(%23b)'><polygon points='44,4.31 48.5,4.31 50.2,9.31 50.2,13.81 48.5,8.81 44,8.81'/><polygon points='36.15,72.73 51.5,72.73 53.5,71.4 53.5,73.2 51.5,75.86 36.15,75.86'/><polygon points='36.46,85.94 48,85.94 53.64,84.22 53.64,86.72 48,90 36.46,90'/></g></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;

  filter: brightness(1.9) saturate(1.3);
  animation: tb-bright-pulse 4s ease-in-out infinite alternate;
}

@keyframes tb-bright-pulse {
  0%, 100% { filter: brightness(1.75) saturate(1.2); }
  50%      { filter: brightness(2.1) saturate(1.4); }
}

/* Halo cálido ambiental alrededor de cada banda (solo en la columna de la torre) */
.scene.three-bodies .tb-bright-glow {
  position: absolute; inset: 0;
  z-index: 3; pointer-events: none;
  --b1-y: 6.5625%;
  --b2-y: 74.296875%;
  --b3-y: 87.96875%;
  background:
    radial-gradient(ellipse 9% 4% at 45% var(--b1-y), rgba(255, 215, 160, 0.5), transparent 75%),
    radial-gradient(ellipse 9% 1.8% at 43.541667% var(--b2-y), rgba(255, 210, 150, 0.4), transparent 78%),
    radial-gradient(ellipse 9% 2.2% at 43.645833% var(--b3-y), rgba(255, 210, 150, 0.48), transparent 80%);
  mix-blend-mode: screen;
  animation: tb-bright-pulse 4s ease-in-out infinite alternate;
}

/* Vignette oscuro para que el fondo (cielo y entorno) baje y los textos se lean */
.scene.three-bodies::after {
  content: ''; position: absolute; inset: 0; z-index: 4;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 25%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.75) 100%),
    radial-gradient(ellipse 60% 65% at 50% 50%, transparent 0%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}


/* Heading: esquina sup-izq, chico — no choca con tags que viven cerca de la torre */
.three-bodies-heading {
  position: absolute;
  top: clamp(16px, 2.5vh, 32px);
  left: clamp(24px, 3vw, 48px);
  text-align: left;
  color: var(--cream);
  z-index: 6;
  max-width: 30%;
}
.three-bodies-eyebrow {
  font-family: var(--sans);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-size: clamp(11px, 0.85vw, 18px);
  color: var(--cream);
  opacity: 0.78;
  margin: 0 0 10px;
}
.three-bodies-title {
  display: flex; flex-direction: column;
  gap: 2px;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--cream);
  margin: 0;
  line-height: 1.08;
}
.three-bodies-main { font-size: clamp(28px, 2.6vw, 44px); font-style: italic; letter-spacing: -0.01em; }
.three-bodies-sub  { font-size: clamp(14px, 1.1vw, 20px); font-style: normal; opacity: 0.82; letter-spacing: 0.01em; }

/* Etiquetas de nivel — alternan lados y viven dentro del stage para
   que coincidan con la Y real de la banda */
.three-bodies-tags {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1920 / 1280;
  z-index: 5; pointer-events: none;
}
.tb-tag-band {
  position: absolute;
  display: flex; flex-direction: column;
  gap: 4px;
  color: var(--cream);
  white-space: nowrap;
  transform: translateY(-50%);
  text-shadow: 0 2px 14px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.85);
  padding: 6px 12px;
  border-radius: 6px;
}
/* Centros medidos en 1920×1280: corona (888,84), nivel 5 (836,951), zócalo (838,1126). */
.tb-band-top    { top: 6.5625%;  right: 60%; text-align: right; align-items: flex-end; }
.tb-band-mid    { top: 74.296875%; left:  54%; text-align: left;  align-items: flex-start; }
.tb-band-bottom { top: 87.96875%; right: 66%; text-align: right; align-items: flex-end; }

.tb-tag-eyebrow {
  font-family: var(--sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: clamp(11px, 0.85vw, 18px);
  color: #ffcf8f;
  opacity: 0.95;
}
.tb-tag-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.05;
}
.tb-tag-sub {
  font-family: var(--sans);
  font-size: clamp(12px, 0.9vw, 18px);
  letter-spacing: 0.08em;
  opacity: 0.75;
}

/* Compensar el padding-left extra del scene cuando el nav está abierto,
   para que el título del zócalo quede centrado respecto al viewport */
body.nav-open .scene-plinth { margin-left: -200px; transition: margin-left 240ms var(--ease-soft); }
.scene-plinth { transition: margin-left 240ms var(--ease-soft); }
.scene-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Imagen: fade in más blando con scale más generoso */
.scene-image {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity var(--dur-image) var(--ease-slow),
    transform calc(var(--dur-image) + 1000ms) var(--ease-slow);
}
.scene-image.visible { opacity: 1; transform: scale(1); }
.scene-image img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* Variante cover: usa toda la pantalla recortando */
.scene-image.cover img { object-fit: cover; object-position: center; }
.scene-image.cover-top img { object-fit: cover; object-position: center top; }

/* ---------------- Carousel ---------------- */
/* Múltiples <img> apiladas; la clase .active marca la visible.
   Crossfade suave entre imágenes. app.js cicla cada CAROUSEL_INTERVAL_MS. */
.scene-image.carousel { position: relative; }
.scene-image.carousel img {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease-soft);
}
.scene-image.carousel img.active { opacity: 1; }

/* ---------------- Zócalo ---------------- */
.scene-plinth {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  padding: 18px 40px 0;
  border-top: 1px solid var(--divider);
}
.plinth-section {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper);
  min-width: 180px;
  opacity: 0;
  transition: opacity 800ms var(--ease-slow) 400ms;
}
.plinth-meta {
  text-align: right;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  min-width: 180px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 800ms var(--ease-slow) 400ms;
}
.scene-plinth.text-arrived .plinth-section,
.scene-plinth.text-arrived .plinth-meta { opacity: 1; }

/* Título del zócalo: posición final, siempre chico */
.plinth-title {
  font-family: var(--serif);
  font-size: clamp(24px, 1.8vw, 36px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-align: center;
  min-width: 320px;
  max-width: 640px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 900ms var(--ease-slow),
    transform 900ms var(--ease-slow);
}
.plinth-title.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Título descriptivo (sin frase hero, aparece plano en zócalo) */
.plinth-title[data-descriptive] {
  font-style: normal;
  font-size: clamp(20px, 1.5vw, 30px);
  color: var(--ink);
  letter-spacing: 0;
  font-weight: 400;
}

/* Hero overlay: elemento global fuera del flujo, aparece centro grande */
.hero-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  width: min(1100px, 90vw);
  padding: 0 20px;
  font-family: var(--serif);
  font-size: clamp(44px, 5.2vw, 82px);
  font-weight: 400;
  line-height: 1.08;
  color: var(--ink);
  letter-spacing: -0.015em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition:
    opacity 900ms var(--ease-slow),
    transform 1200ms var(--ease-slow);
}
.hero-overlay.visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.hero-overlay.exiting {
  opacity: 0;
  transform: translate(-50%, calc(-50% - 14px));
}
.hero-overlay em { font-style: italic; color: var(--guindo); }

/* ---------------- Pantalla Saludo (balance Hola > Triara > Copy) ---------------- */
#screen-saludo { flex-direction: column; }
.saludo {
  text-align: center;
  padding: 0 40px;
  max-width: 1200px;
}
.saludo-hola {
  font-family: var(--serif);
  font-size: clamp(72px, 10vw, 140px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
}
.saludo-triara {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--guindo);
  margin: 0 0 56px;
}
.saludo-copy {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.saludo-copy em { font-style: italic; color: var(--guindo); }

/* ---------------- Pantalla Video (concepto Guido) ---------------- */
.video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ink);
}
.video-skip {
  position: absolute;
  bottom: 28px;
  right: 32px;
  background: rgba(238, 237, 233, 0.14);
  border: 1px solid rgba(238, 237, 233, 0.35);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 10px 20px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 300ms var(--ease-soft);
  z-index: 5;
}
.video-skip:hover { background: var(--cream); color: var(--ink); }

/* ---------------- Pantallas Manifiesto / Intro de nivel / Cierre ---------------- */
.manifest {
  text-align: center;
  padding: 0 60px;
  max-width: 1100px;
}
.manifest-para-vos {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--guindo);
  margin: 0 0 36px;
}
.manifest-text {
  font-family: var(--serif);
  font-size: clamp(44px, 6vw, 92px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-top: 36px;
}
.manifest-four {
  margin-top: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.manifest-four.small { font-size: 12px; margin-top: 40px; }
.manifest-four .dot { color: var(--copper); opacity: 0.6; }
.manifest-sign {
  margin-top: 56px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--copper);
  opacity: 0.85;
}

/* Mapa placeholder (mientras Codex entrega) */
.map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    linear-gradient(135deg, rgba(49,49,49,0.04) 0%, rgba(107,31,61,0.03) 100%),
    repeating-linear-gradient(0deg, transparent 0 60px, rgba(49,49,49,0.04) 60px 61px),
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(49,49,49,0.04) 60px 61px),
    var(--cream-dark);
  color: var(--ink-soft);
  font-family: var(--sans);
  text-align: center;
  padding: 40px;
}
.map-placeholder .map-coord {
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--guindo);
}
.map-placeholder .map-area {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.map-placeholder .map-note {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 10px;
}

/* ---------------- Hoja puente de tipologías ---------------- */
#screen-tipologias .bridge {
  width: 100%;
  max-width: 1200px;
  padding: 70px 40px 50px;
  text-align: center;
}
.bridge-eyebrow {
  font-family: var(--sans);
  font-size: clamp(12px, 0.95vw, 20px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 700ms var(--ease-slow) 200ms;
}
.bridge-title {
  font-family: var(--serif);
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 56px;
  opacity: 0;
  transform: translateY(14px);
  transition: all 900ms var(--ease-slow) 400ms;
}
.bridge-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.bridge-card {
  background: none;
  border: 1px solid var(--divider);
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: all 400ms var(--ease-breath);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
}
#screen-tipologias.active .bridge-eyebrow,
#screen-tipologias.active .bridge-title { opacity: 1; transform: translateY(0); }
#screen-tipologias.active .bridge-card { opacity: 1; transform: translateY(0); }
#screen-tipologias.active .bridge-card:nth-child(1) { transition: opacity 800ms var(--ease-slow) 700ms, transform 800ms var(--ease-slow) 700ms, border-color 300ms, background 300ms; }
#screen-tipologias.active .bridge-card:nth-child(2) { transition: opacity 800ms var(--ease-slow) 850ms, transform 800ms var(--ease-slow) 850ms, border-color 300ms, background 300ms; }
#screen-tipologias.active .bridge-card:nth-child(3) { transition: opacity 800ms var(--ease-slow) 1000ms, transform 800ms var(--ease-slow) 1000ms, border-color 300ms, background 300ms; }
.bridge-card:hover {
  border-color: var(--guindo);
  transform: translateY(-4px) !important;
}
.bridge-card-image { aspect-ratio: 4/3; overflow: hidden; }
.bridge-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-breath);
}
.bridge-card:hover .bridge-card-image img { transform: scale(1.04); }
.bridge-card-body { padding: 24px 22px 26px; }
.bridge-card-tag {
  font-family: var(--sans);
  font-size: clamp(12px, 0.9vw, 18px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 10px;
}
.bridge-card-name {
  font-family: var(--serif);
  font-size: clamp(26px, 2vw, 40px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 8px;
}
.bridge-card-desc {
  font-family: var(--sans);
  font-size: clamp(12.5px, 1vw, 20px);
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---------------- Navegador lateral ---------------- */
.navigator {
  position: fixed;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  background: rgba(243, 238, 231, 0.92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(49, 49, 49, 0.08);
  box-shadow: 0 20px 60px -20px rgba(49, 49, 49, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease-soft);
  max-height: 86vh;
  overflow-y: auto;
}
.navigator.visible { opacity: 1; pointer-events: auto; }
body.phase-hero .navigator { opacity: 0 !important; pointer-events: none !important; }

.nav-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.nav-group-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper);
  opacity: 0.9;
  margin-bottom: 2px;
  padding-left: 15px;
}
.nav-item {
  display: flex; align-items: center;
  gap: 12px;
  cursor: pointer;
  background: none; border: none;
  padding: 0; text-align: left;
}
.nav-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-mute); opacity: 0.45;
  transition: all 400ms var(--ease-soft); flex-shrink: 0;
}
.nav-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 1;
  transition: all 400ms var(--ease-soft);
}
.nav-item:hover .nav-label { color: var(--ink); }
.nav-item:hover .nav-dot { opacity: 1; }
.nav-item.active .nav-dot { background: var(--copper); opacity: 1; width: 16px; border-radius: 2px; }
.nav-item.active .nav-label { color: var(--ink); opacity: 1; }

/* ---------------- Controles ---------------- */
.ctrl-group {
  position: fixed;
  bottom: 28px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none; border: none; cursor: pointer; padding: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 400ms var(--ease-soft);
}
.ctrl-group.visible { opacity: 0.7; pointer-events: auto; }
.ctrl-group:hover { opacity: 1; color: var(--ink); }
.prev-ctrl { left: 32px; }
.next-ctrl { right: 32px; }
.arrow-line { width: 42px; height: 1px; background: currentColor; display: inline-block; position: relative; }
.arrow-line.right::after {
  content: ''; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.arrow-line.left::before {
  content: ''; position: absolute; left: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-left: 1px solid currentColor;
  transform: rotate(-45deg);
}
.counter {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  opacity: 0;
  transition: opacity 600ms var(--ease-soft);
}
.counter.visible { opacity: 1; }
.counter .cur { color: var(--ink); }

@media (max-width: 720px) {
  .scene { padding: 70px 14px 70px; }
  .scene-plinth { grid-template-columns: 1fr; gap: 8px; padding: 14px 12px 0; }
  .plinth-section, .plinth-meta { text-align: left; min-width: 0; }
  .plinth-title { min-width: 0; max-width: none; }
  .plinth-title.hero { font-size: 36px; }
  .bridge-cards { grid-template-columns: 1fr; }
  .navigator { left: 14px; }
  .prev-ctrl { left: 20px; }
  .next-ctrl { right: 20px; }
}