/* ============================================================
   INMERZA — Landing oficial · Iteración 4 (resolución comercial)
   Tokens base: paleta documentada (provisional) en Logo Core §7
     Verde INMERZA  #00D066
     Navy INMERZA   #03152F
     Blanco marca   #F9F9F9
   Los tonos de fondo son derivaciones tonales del navy (no son
   colores de marca nuevos).
   ============================================================ */

/* ---------- Fuentes (autoalojadas, variable, latin) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-var-latin.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --c-green: #00D066;
  --c-navy: #03152F;
  --c-ink: #F9F9F9;

  --c-bg: #020917;               /* derivado tonal del navy, más profundo */
  --c-surface: #03152F;          /* navy de marca como superficie */
  --c-muted: rgba(249, 249, 249, .62);
  --c-faint: rgba(249, 249, 249, .38);
  /* Variante con más contraste para texto secundario pequeño sobre
     fondo navy (--c-faint solo cumple WCAG AA en texto grande: ver
     corrección de composición móvil del explorador). */
  --c-faint-aa: rgba(249, 249, 249, .5);
  --c-line: rgba(249, 249, 249, .08);
  --c-line-strong: rgba(249, 249, 249, .16);
  --c-green-soft: rgba(0, 208, 102, .12);

  --f-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Contenedor editorial (texto, FAQ, método, comercial) */
  --container-copy: min(88vw, 1180px);
  /* Contenedor visual (escenario, conceptos, demostraciones, cierre) */
  --container-visual: min(94vw, 1520px);
  --w-max: var(--container-copy); /* alias retrocompatible */
  --pad-x: clamp(20px, 5vw, 64px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Glassmorphism selectivo — navegación, escenario, paneles, modal, CTA */
  --glass-bg: rgba(3, 21, 47, .62);
  --glass-bg-soft: rgba(3, 21, 47, .4);
  --glass-blur: 18px;
  --glass-border: rgba(249, 249, 249, .08);
  --glass-border-green: rgba(0, 208, 102, .18);
}

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
  overflow-anchor: none;
}

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-anchor: none;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

button { font: inherit; color: inherit; }

::selection { background: var(--c-green); color: var(--c-navy); }

:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Utilidades ---------- */
.container {
  max-width: var(--container-copy);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container-visual {
  max-width: var(--container-visual);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: clamp(96px, 15vh, 176px); }
.section--compact { padding-block: clamp(64px, 9vh, 110px); }
/* Ritmo visual: picos en momentos de producto/cierre, calma en el resto.
   Los picos suman un resplandor radial muy sutil (profundidad, no un
   panel de vidrio nuevo) y las secciones calmas un tono de fondo
   apenas distinto, para que el scroll tenga variación sin depender
   de más glassmorphism. */
.section--peak {
  padding-block: clamp(110px, 17vh, 200px);
  position: relative;
  background:
    radial-gradient(900px circle at 15% 0%, rgba(0, 208, 102, .05), transparent 60%),
    radial-gradient(700px circle at 100% 100%, rgba(0, 208, 102, .04), transparent 55%);
}
.section--calm {
  padding-block: clamp(72px, 10vh, 128px);
  background: linear-gradient(to bottom, rgba(249, 249, 249, .015), transparent 40%);
}
section[id] { scroll-margin-top: 92px; }

/* ---------- Glassmorphism (uso selectivo — ver CLAUDE.md) ----------
   ~70% superficies oscuras limpias / ~20% glass funcional / ~10% luz.
   Fallback sólido si backdrop-filter no está disponible. */
.glass {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(249, 249, 249, .06), 0 30px 70px -30px rgba(0, 0, 0, .5);
}
.glass--soft { background: var(--glass-bg-soft); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass--soft { background: rgba(3, 21, 47, .92); }
}

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h2 { font-size: clamp(1.85rem, 4.2vw, 3.15rem); max-width: 22ch; }

.lead {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.55;
  color: var(--c-muted);
  max-width: 48ch;
}

.body {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--c-muted);
  max-width: 52ch;
}

.note {
  font-size: .9rem;
  color: var(--c-faint);
  max-width: 52ch;
}

.accent { color: var(--c-green); }

/* Justificación editorial: solo en párrafos descriptivos largos
   (introducciones de sección, copy comercial de Fundadores, respuestas
   de FAQ). No se aplica a labels, tabs, chips ni UI compacta — allí
   la justificación genera huecos en vez de orden. Se reserva para
   ≥640px porque en columnas angostas produce ríos de espacio en blanco. */
.piloto__content .body,
.piloto__panel .note,
.modalidades__intro .lead,
.metodo__lead,
.faq__a-inner p {
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .piloto__content .body,
  .piloto__panel .note,
  .modalidades__intro .lead,
  .metodo__lead,
  .faq__a-inner p {
    text-align: justify;
  }
}

/* ============================================================
   Jerarquía de movimiento (solo con JS activo):
   .reveal          → aparece por opacidad (texto, titulares)
   .reveal-up       → asciende sutil (bloques visuales, mockups)
   .reveal-stagger  → los hijos entran escalonados (listas)
   ============================================================ */
html.js .reveal {
  opacity: 0;
  transition: opacity 1s var(--ease-out);
}
html.js .reveal.is-in { opacity: 1; }

html.js .reveal-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
html.js .reveal-up.is-in { opacity: 1; transform: none; }

html.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
html.js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
html.js .reveal-stagger > *:nth-child(2) { transition-delay: .08s; }
html.js .reveal-stagger > *:nth-child(3) { transition-delay: .16s; }
html.js .reveal-stagger > *:nth-child(4) { transition-delay: .24s; }
html.js .reveal-stagger > *:nth-child(5) { transition-delay: .32s; }
html.js .reveal-stagger > *:nth-child(6) { transition-delay: .4s; }

/* Red de seguridad: el texto con split nunca puede quedar invisible */
.reveal[data-split] { opacity: 1; transform: none; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 999px;
  padding: 15px 30px;
  transition: transform .35s var(--ease-out), background-color .35s, border-color .35s, color .35s, box-shadow .35s;
  will-change: transform;
}
.btn--primary {
  background: var(--c-green);
  color: var(--c-navy);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(0, 208, 102, .28);
}
.btn--ghost {
  border: 1px solid var(--c-line-strong);
  color: var(--c-ink);
}
.btn--ghost:hover {
  border-color: var(--c-green);
  color: var(--c-green);
  transform: translateY(-2px);
}
.btn--sm { padding: 10px 20px; font-size: .85rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background-color .4s, border-color .4s, backdrop-filter .4s, box-shadow .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled,
.nav.menu-open {
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  border-bottom-color: var(--glass-border);
  box-shadow: 0 12px 40px rgba(2, 6, 15, .28);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-scrolled, .nav.menu-open { background: rgba(2, 9, 23, .94); }
}
.nav__inner {
  max-width: var(--w-max);
  margin-inline: auto;
  padding: 18px var(--pad-x);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
}
.nav__brand { display: inline-flex; flex-shrink: 0; }
.nav__brand img { height: 24px; width: auto; }
.nav__links {
  display: flex;
  gap: clamp(14px, 2.6vw, 36px);
  margin-left: auto;
}
.nav__links a {
  position: relative;
  font-size: .875rem;
  font-weight: 450;
  color: var(--c-muted);
  text-decoration: none;
  transition: color .3s;
  white-space: nowrap;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--c-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav__links a:hover { color: var(--c-ink); }
.nav__links a.is-active { color: var(--c-ink); }
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__cta { flex-shrink: 0; }

/* Botón de menú móvil */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--c-ink);
  transition: transform .3s var(--ease-out), opacity .3s;
}
.nav.menu-open .nav__toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav.menu-open .nav__toggle span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__links { gap: 16px; }
  .nav__links a { font-size: .82rem; }
}
@media (max-width: 760px) {
  .nav__toggle { display: flex; }
  .nav__inner {
    gap: 8px;
    padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  }
  .nav__cta {
    margin-left: auto;
    min-height: 44px;
    padding-inline: 16px;
  }
  .nav__brand img { height: 21px; }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px var(--pad-x) 20px;
    background: rgba(2, 9, 23, .95);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%);
    backdrop-filter: blur(var(--glass-blur)) saturate(115%);
    border-bottom: 1px solid var(--c-line);
  }
  .nav.menu-open .nav__links { display: flex; }
  .nav__links a {
    padding: 14px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--c-line);
  }
  .nav__links a:last-child { border-bottom: none; }
  .nav__links a::after { display: none; }
}

/* ============================================================
   HERO · ANTESALA
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  --mx: 50%;
  --my: 42%;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Retícula arquitectónica revelada por la luz */
.hero__gridlines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--c-line) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%,
    linear-gradient(to bottom, var(--c-line) 1px, transparent 1px) 0 0 / 100% calc(100% / 5);
  opacity: .9;
  -webkit-mask-image: radial-gradient(circle 340px at var(--mx) var(--my), black, transparent 78%);
  mask-image: radial-gradient(circle 340px at var(--mx) var(--my), black, transparent 78%);
  pointer-events: none;
}

/* Halo de luz que sigue al cursor */
.hero__light {
  position: absolute;
  inset: 0;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(0, 208, 102, .06), transparent 65%);
  pointer-events: none;
}

/* ---------- Escenario de la antesala ---------- */
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(.62);
  transform-origin: 50% 38%;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), visibility 0s .9s;
}
html.pre .hero__stage {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), visibility 0s;
}

.hero__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__links line {
  stroke: rgba(0, 208, 102, .26);
  stroke-width: .8;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--ease-out), stroke .6s;
}
.hero__links line.on { stroke-dashoffset: 0; }

/* Piezas dispersas */
.frag {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .82rem;
  font-weight: 450;
  letter-spacing: .06em;
  color: var(--c-faint);
  white-space: nowrap;
  animation: frag-float var(--fd, 11s) ease-in-out var(--fdel, 0s) infinite alternate;
  transition: color .6s;
}
.frag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-faint);
  transition: background-color .6s, box-shadow .6s;
}
.frag.is-lit { color: var(--c-ink); }
.frag.is-linked { color: var(--c-ink); }
.frag.is-linked::before {
  background: var(--c-green);
  box-shadow: 0 0 10px rgba(0, 208, 102, .7);
}
@keyframes frag-float {
  from { translate: 0 -5px; }
  to   { translate: 0 5px; }
}

/* Núcleo: el isotipo como centro de integración */
.hero__core {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(96px, 13vw, 148px);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: none;
}
html.pre .hero__core { pointer-events: auto; }
.hero__core img {
  position: relative;
  width: 100%;
  transition: transform .8s var(--ease-out), filter .8s var(--ease-out);
  filter: drop-shadow(0 0 0 rgba(0, 208, 102, 0));
}
.hero__core-halo {
  position: absolute;
  inset: -46%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 208, 102, calc(.12 + var(--glow, 0) * .2)), transparent 62%);
  transition: opacity .5s;
  pointer-events: none;
}
.hero__core:hover img,
.hero__core.is-charged img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 20px rgba(0, 208, 102, .34));
}
.hero__core:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 8px;
  border-radius: 50%;
}

/* Indicación discreta de primera visita */
.hero__hint {
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(72px, 10vw, 110px));
  translate: -50%;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--c-faint);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .7s ease;
}
html.pre .hero__hint.is-show { opacity: 1; }
html.pre .hero__hint.is-show.is-done { opacity: 0; }

/* Planos translúcidos — sensación de capas detrás del contenido */
.hero__plane {
  position: absolute;
  border-radius: 24px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, rgba(249, 249, 249, .03), transparent 60%);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity 1.1s var(--ease-out) .3s, transform 1.1s var(--ease-out) .3s;
  pointer-events: none;
  z-index: 1;
}
html.pre .hero__plane { opacity: 0; transform: translateY(14px) scale(.98); transition: none; }
.hero__plane--a { width: min(74vw, 620px); height: 340px; top: 14%; left: 50%; translate: -58% 0; rotate: -3deg; }
.hero__plane--b { width: min(60vw, 460px); height: 280px; top: 32%; left: 50%; translate: 32% 0; rotate: 2deg; }
html:not(.pre) .hero__plane { opacity: 1; transform: none; }

/* ---------- Contenido del hero ---------- */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(108px, 15vh, 150px) clamp(64px, 9vh, 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__crest {
  width: clamp(40px, 5vw, 54px);
  margin-bottom: clamp(22px, 3.5vh, 34px);
}
.hero__descriptor {
  font-size: 12px;
  font-weight: 550;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-green);
  margin-bottom: clamp(20px, 3vh, 30px);
}
.hero__title {
  font-size: clamp(2.5rem, 6.4vw, 5.2rem);
  font-weight: 500;
  max-width: 16ch;
  margin-bottom: clamp(24px, 3.5vh, 36px);
}
.hero__title em {
  font-style: normal;
  color: var(--c-green);
}
.hero__sub {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--c-muted);
  max-width: 50ch;
  margin-bottom: clamp(32px, 5vh, 48px);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* Entrada escalonada del hero al disolverse la antesala */
.hero__crest      { transition: opacity 1s var(--ease-out) .12s, transform 1s var(--ease-out) .12s; }
.hero__descriptor { transition: opacity 1s var(--ease-out) .22s, transform 1s var(--ease-out) .22s; }
.hero__title      { transition: opacity 1s var(--ease-out) .32s, transform 1s var(--ease-out) .32s; }
.hero__sub        { transition: opacity 1s var(--ease-out) .46s, transform 1s var(--ease-out) .46s; }
.hero__actions    { transition: opacity 1s var(--ease-out) .6s,  transform 1s var(--ease-out) .6s; }
html.pre .hero__crest,
html.pre .hero__descriptor,
html.pre .hero__title,
html.pre .hero__sub,
html.pre .hero__actions {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .45s ease, transform .45s ease;
}
html.pre .hero__content { pointer-events: none; }

/* ---------- Indicador inferior ---------- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 4;
}
html.pre .hero__scroll { cursor: pointer; }
.hero__scroll-hint {
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--c-faint);
  opacity: 0;
  transition: opacity .6s;
}
html.pre .hero__scroll-hint { opacity: 1; }
.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 52px;
  background: var(--c-line-strong);
  overflow: hidden;
}
.hero__scroll-line span {
  position: absolute;
  top: -40%;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--c-green);
  animation: scroll-hint 2.4s ease-in-out infinite;
}
@keyframes scroll-hint {
  0%   { top: -40%; }
  60%, 100% { top: 110%; }
}

/* ============================================================
   EXPERIENCIA · PRODUCTO UNIFICADO (vista conceptual)
   ============================================================ */
.experiencia { border-top: 1px solid var(--c-line); }

/* Composición editorial: narrativa (izquierda) + explorador (derecha).
   Por debajo de 1100px, narrativa arriba y explorador debajo (ver
   RESPONSIVE DEL EXPLORADOR). */
.experiencia__layout {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vh, 56px);
}
.experiencia__intro {
  text-align: left;
}
.experiencia__intro h2 {
  margin-bottom: clamp(16px, 2.5vh, 22px);
  text-wrap: pretty;
}
.experiencia__intro .lead {
  margin-bottom: 14px;
  text-wrap: pretty;
  hyphens: auto;
}
.experiencia__intro .body {
  margin-bottom: clamp(24px, 3.5vh, 32px);
  text-wrap: pretty;
  hyphens: auto;
}

@media (min-width: 1100px) {
  .experiencia__layout {
    display: grid;
    grid-template-columns: minmax(260px, 30%) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
  .experiencia__intro .lead,
  .experiencia__intro .body { max-width: 34ch; }
}

.demo {
  border-radius: 18px;
  overflow: hidden;
  scroll-margin-top: 92px;
}
.demo__panel {
  display: flex;
  flex-direction: column;
}
/* Barra superior única: identidad + flecha anterior + navegación
   principal en la fila de arriba; navegación secundaria contextual
   del showroom en la fila de abajo. Ambas filas comparten fondo y
   borde, por lo que se perciben como una sola interfaz continua,
   sin mezclar las dos jerarquías en una misma línea. */
.demo__bar {
  border-bottom: 1px solid var(--c-line);
  background: rgba(249, 249, 249, .015);
}
.demo__bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.demo__name {
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--c-muted);
}
.demo__arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color .3s, color .3s;
}
.demo__arrow:hover, .demo__arrow:focus-visible { border-color: var(--glass-border-green); color: var(--c-green); }
.demo__arrow svg { width: 16px; height: 16px; }

.demo__nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.demo__nav::-webkit-scrollbar { display: none; }

/* Modos: tabs editoriales (subrayado + estado luminoso, sin píldoras pesadas) */
.demo__modes {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(10px, 1.3vw, 18px);
}
.demo__mode {
  position: relative;
  background: none;
  border: 0;
  padding: 8px 2px;
  font-family: var(--f-display);
  font-size: .86rem;
  font-weight: 500;
  color: var(--c-faint);
  cursor: pointer;
  transition: color .3s;
  min-height: 44px;
  white-space: nowrap;
  scroll-snap-align: start;
}
.demo__mode::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  border-radius: 1px;
  background: var(--c-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.demo__mode:hover { color: var(--c-ink); }
.demo__mode.is-active { color: var(--c-ink); }
.demo__mode.is-active::after { transform: scaleX(1); }

/* Sub-módulos del showroom — fila propia, contextual (solo cuando el
   modo activo es Showroom), separada de la navegación principal. */
.demo__tabs {
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  border-top: 1px solid var(--c-line);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.demo__tabs::-webkit-scrollbar { display: none; }
.demo__tabs.is-visible { display: flex; }
.demo__tab {
  position: relative;
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 10px 14px 14px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--c-faint);
  cursor: pointer;
  transition: color .3s;
  min-height: 44px;
  white-space: nowrap;
  scroll-snap-align: start;
}
.demo__tab::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--c-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.demo__tab:hover { color: var(--c-ink); }
.demo__tab.is-active { color: var(--c-ink); }
.demo__tab.is-active::after { transform: scaleX(1); }

.demo__stage {
  position: relative;
  aspect-ratio: 720 / 420;
  margin: 8px 20px 0;
  border-radius: 12px;
  overflow: hidden;
  /* Su alto cambia según la escena activa (más en móvil, ver Plantas
     interactivas). Sin esto, el "scroll anchoring" del navegador
     puede reajustar solo window.scrollY para compensar ese cambio de
     tamaño, desplazando la página entera al cambiar de modo. */
  overflow-anchor: none;
}
.demo__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  pointer-events: none;
}
.demo__scene.is-active { opacity: 1; transform: none; pointer-events: auto; }
.demo__scene svg { width: 100%; height: 100%; }

.demo__visual { position: absolute; inset: 0; background: var(--c-bg); display: flex; align-items: center; justify-content: center; }

/* Panel: único lugar con nombre + descripción (máx. 2 líneas) + hasta
   3 indicadores por modo activo — las escenas ya no llevan texto
   superpuesto sobre la imagen. */
.demo__meta {
  margin-top: auto;
  padding: 16px 20px 20px;
}
.demo__meta-title {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-ink);
  margin-bottom: 6px;
}
.demo__meta-desc {
  font-size: .82rem;
  color: var(--c-muted);
  line-height: 1.45;
  max-width: 42ch;
}
.demo__meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  list-style: none;
}
.demo__meta-tags li {
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted);
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ============================================================
   GALERÍAS — niveles, unidades, recorridos 360°: vista principal
   + tira de miniaturas seleccionables. Mismo patrón visual en
   los tres modos.
   ============================================================ */
.gallery {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
}
.gallery__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
}
.gallery__stage picture { display: block; width: 100%; height: 100%; }
.gallery__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery__expand {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--c-ink);
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  transition: border-color .3s;
}
.gallery__expand:hover { border-color: var(--glass-border-green); }
.gallery__expand svg { width: 15px; height: 15px; }

.gallery__thumbs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--c-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 88px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--c-bg);
  min-height: 44px;
  transition: border-color .3s, opacity .3s;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .68; transition: opacity .3s; }
.gallery__thumb:hover img { opacity: .9; }
.gallery__thumb.is-active { border-color: var(--c-green); }
.gallery__thumb.is-active img { opacity: 1; }
.gallery__thumb-label {
  position: absolute;
  left: 4px;
  bottom: 3px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--c-ink);
  text-shadow: 0 1px 3px rgba(2, 6, 15, .8);
}

/* ============================================================
   MODAL GENÉRICO DE GALERÍA — niveles / unidades / recorridos /
   brochure. Mismo lenguaje visual y de accesibilidad que el modal
   de conceptos.
   ============================================================ */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}
.gallery-modal[hidden] { display: none; }
.gallery-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 15, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.gallery-modal__panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 900px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 20px;
  padding: clamp(16px, 3vw, 28px);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.gallery-modal.is-open .gallery-modal__panel { opacity: 1; transform: none; }
.gallery-modal__stage {
  width: 100%;
  max-height: 74vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-modal__stage img { max-width: 100%; max-height: 74vh; width: auto; height: auto; display: block; object-fit: contain; border-radius: 8px; }
.gallery-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(2, 9, 23, .55);
  border: 1px solid var(--glass-border);
  color: var(--c-ink);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}
.gallery-modal__close svg { width: 16px; height: 16px; }
.gallery-modal__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  translate: 0 -50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(2, 9, 23, .55);
  border: 1px solid var(--glass-border);
  color: var(--c-ink);
  cursor: pointer;
}
.gallery-modal__arrow[hidden] { display: none; }
.gallery-modal__arrow svg { width: 16px; height: 16px; }
.gallery-modal__arrow--prev { left: 8px; }
.gallery-modal__arrow--next { right: 8px; }
.gallery-modal__title {
  font-family: var(--f-display);
  font-size: .9rem;
  color: var(--c-muted);
  text-align: center;
}

/* ============================================================
   BROCHURE DIGITAL — grid editorial de 4 piezas
   ============================================================ */
/* Mobile: carrusel horizontal con scroll-snap (una tarjeta grande a la
   vez) en vez de 4 tarjetas diminutas apiladas. Desde 640px se vuelve
   grid de 2 columnas (tablet) y desde 1024px, de 4 (desktop). */
.brochure-grid {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 10px;
  padding: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--c-bg);
}
.brochure-grid::-webkit-scrollbar { display: none; }
.brochure-grid__card {
  position: relative;
  flex: 0 0 78%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(249, 249, 249, .03);
  border: 1px solid var(--c-line);
  padding: 0;
  cursor: pointer;
  min-height: 44px;
  transition: border-color .3s, transform .3s var(--ease-out);
}
.brochure-grid__card:hover { border-color: var(--glass-border-green); transform: translateY(-2px); }
.brochure-grid__card picture {
  display: block;
  flex: 1;
  min-height: 0;
  background: var(--c-bg);
}
.brochure-grid__card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brochure-grid__name {
  font-family: var(--f-display);
  font-size: .78rem;
  color: var(--c-ink);
  padding: 8px 10px 2px;
}
.brochure-grid__cta {
  font-size: .7rem;
  color: var(--c-green);
  padding: 0 10px 10px;
}
/* Indicador de posición del carrusel móvil (1 / 4 …) — no aplica en
   la cuadrícula de tablet/escritorio, donde las 4 piezas ya son
   visibles a la vez. Lo actualiza initBrochureGrid() en main.js. */
.brochure-grid__pager { display: none; }

@media (min-width: 640px) {
  .brochure-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
    overflow-y: auto;
    scroll-snap-type: none;
  }
  .brochure-grid__card { flex: initial; }
}
@media (min-width: 1024px) {
  .brochure-grid { grid-template-columns: repeat(4, 1fr); }
}

/* El explorador ya no divide panel/stage en columnas: la barra
   superior queda horizontal y completa en todos los anchos (ver
   FASE 1 · NUEVA BARRA SUPERIOR), y el 30/70 editorial ocurre un
   nivel arriba, entre narrativa y explorador (.experiencia__layout). */
@media (min-width: 1100px) {
  .demo__stage { aspect-ratio: 16 / 8.6; }
}

/* ============================================================
   CONCEPTOS INMERZA — carrusel dentro de "Vista general"
   ALBA · VÉRTICE · SIENA · MONTEALTO (identidad completa, ver
   CLAUDE.md "Conceptos visuales propios")
   ============================================================ */
.concepts {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(640px circle at 28% 22%, color-mix(in srgb, var(--concept-accent, var(--c-green)) 12%, transparent), transparent 72%),
    var(--c-bg);
  transition: background .6s ease;
}
.concepts__viewport { position: relative; flex: 1; min-height: 0; }
.concept {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  transform: translateY(8px) scale(.99);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
  pointer-events: none;
}
.concept.is-active { opacity: 1; transform: none; pointer-events: auto; }
.concept__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.concept__caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border-radius: 10px;
  max-width: calc(100% - 28px);
}
.concept__tag {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-green);
}
.concept__name {
  font-family: var(--f-display);
  font-size: .86rem;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.concepts__arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  translate: 0 -50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--c-ink);
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  transition: border-color .3s, scale .3s var(--ease-out);
}
/* Nota: el centrado vertical usa la propiedad `translate` (no `transform`)
   a propósito — `translate`/`scale`/`rotate` son propiedades independientes
   que se componen con `transform`, así que si el hover usara
   `transform: translateY(-50%) scale(...)` el desplazamiento se sumaría
   al `translate` base y el botón saltaría de su sitio. Usar `scale` aquí
   evita esa colisión. */
.concepts__arrow:hover { border-color: var(--glass-border-green); scale: 1.06; }
.concepts__arrow svg { width: 16px; height: 16px; }
.concepts__arrow--prev { left: 12px; }
.concepts__arrow--next { right: 12px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .concepts__arrow { background: rgba(3, 21, 47, .9); }
}

.concepts__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--c-line);
  flex-wrap: wrap;
}
.concepts__tabs { display: flex; flex-wrap: wrap; }
.concepts__tab {
  position: relative;
  background: none;
  border: 0;
  padding: 8px 4px;
  margin-right: 16px;
  font-family: var(--f-display);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--c-faint);
  cursor: pointer;
  min-height: 44px;
  transition: color .3s;
}
.concepts__tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--concept-accent, var(--c-green));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.concepts__tab:hover { color: var(--c-ink); }
.concepts__tab.is-active { color: var(--c-ink); }
.concepts__tab.is-active::after { transform: scaleX(1); }

.concepts__explore {
  margin-left: auto;
  background: var(--c-green);
  color: var(--c-navy);
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  min-height: 44px;
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.concepts__explore:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 208, 102, .28); }

@media (max-width: 760px) {
  .concepts__bar { padding: 10px 12px; }
  .concepts__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .concepts__tabs::-webkit-scrollbar { display: none; }
  .concepts__tab { flex: 0 0 auto; scroll-snap-align: center; }
  .concepts__explore { width: 100%; margin-left: 0; order: 3; margin-top: 6px; min-height: 50px; }
  .concept__caption { left: 10px; bottom: 10px; padding: 7px 12px; }
  /* Las flechas se mantienen en 44px incluso en móvil (mínimo táctil). */
}

/* ============================================================
   MODAL · EXPLORAR CONCEPTO
   ============================================================ */
.concept-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}
.concept-modal[hidden] { display: none; }
.concept-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 15, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.concept-modal__panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 1120px);
  max-height: 88vh;
  overflow: auto;
  border-radius: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.concept-modal.is-open .concept-modal__panel { opacity: 1; transform: none; }
@media (min-width: 760px) {
  .concept-modal__panel { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); max-height: 82vh; }
}
.concept-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(2, 9, 23, .55);
  border: 1px solid var(--glass-border);
  color: var(--c-ink);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}
.concept-modal__close svg { width: 16px; height: 16px; }
.concept-modal__stage {
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.concept-modal__stage img { width: 100%; height: auto; display: block; object-fit: contain; }
.concept-modal__info {
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.concept-modal__info h3 { font-size: 1.35rem; }
.concept-modal__note { font-size: .8rem; color: var(--c-faint); line-height: 1.5; }
.concept-modal__switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.concept-modal__switch button {
  border: 1px solid var(--c-line-strong);
  background: none;
  color: var(--c-muted);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: .8rem;
  cursor: pointer;
  min-height: 44px;
  transition: color .3s, border-color .3s, background-color .3s;
}
.concept-modal__switch button:hover { color: var(--c-ink); }
.concept-modal__switch button.is-active { background: var(--c-green); color: var(--c-navy); border-color: var(--c-green); }

body.modal-open { overflow: hidden; }

/* Lenguaje gráfico de las vistas conceptuales */
.d-line       { stroke: rgba(249, 249, 249, .3); stroke-width: 1; }
.d-faint      { stroke: rgba(249, 249, 249, .13); stroke-width: 1; }
.d-green      { stroke: var(--c-green); stroke-width: 1; fill: none; }
.d-dash       { stroke: rgba(0, 208, 102, .45); stroke-width: 1; stroke-dasharray: 4 5; }
.d-fill       { fill: rgba(249, 249, 249, .07); }
.d-fill-green { fill: rgba(0, 208, 102, .13); }
.d-faint-fill { fill: rgba(249, 249, 249, .22); }
.d-faint-rect { fill: rgba(249, 249, 249, .14); }
.d-outline-sq { stroke: rgba(249, 249, 249, .3); fill: none; }
.d-green-fill { fill: var(--c-green); }
.d-green-ring { stroke: rgba(0, 208, 102, .4); fill: none; }
.d-pill       { fill: rgba(0, 208, 102, .85); }
.d-label {
  font-family: var(--f-body);
  font-size: 11px;
  fill: var(--c-muted);
}
.d-label-green { fill: var(--c-green); font-weight: 600; }
.d-label-row { font-size: 12px; fill: var(--c-muted); }
.d-label-pill { fill: var(--c-navy); font-size: 11px; font-weight: 600; text-anchor: middle; }

/* ============================================================
   PLANTAS INTERACTIVAS — planta con hotspots de disponibilidad
   (verde/amarillo/rojo, igual que en la imagen). .plantas__frame
   reproduce el aspect-ratio real de la imagen (16/9) para que los
   hotspots —ubicados en % sobre esas coordenadas— coincidan siempre
   con los puntos reales, sin depender del letterbox del .demo__stage
   exterior (compartido con el resto de escenas; no se toca).
   ============================================================ */
.plantas {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--c-bg);
}
.plantas__frame {
  /* Ancho/alto reales los fija JS en px (ver initPlantas → layout()),
     midiendo el espacio disponible para que coincida exacto con 16:9.
     flex-grow debe quedar en 0: si creciera (flex:1) absorbería el
     espacio sobrante del contenedor cada vez que el ancho —no el
     alto— sea la dimensión limitante, estirando el alto más allá de
     lo que JS calculó y rompiendo la relación de aspecto real de la
     imagen (y con ella, la alineación de los hotspots). */
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  min-height: 0;
  aspect-ratio: 1600 / 900;
  margin-inline: auto;
}
.plantas__img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Superpuesta al frame (no consume alto propio) para dejarle el
   máximo espacio vertical posible a la imagen en móvil. */
.plantas__tag {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  font-size: .64rem;
  letter-spacing: .03em;
  color: var(--c-faint);
  background: rgba(2, 9, 23, .6);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

/* Hotspots — indicador visual pequeño, área táctil >= 44x44px */
.plantas__hotspots { position: absolute; inset: 0; }
.plantas__hotspot {
  position: absolute;
  left: var(--hx);
  top: var(--hy);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
}
.plantas__hotspot:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.plantas__dot {
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(2, 9, 23, .85);
  transition: transform .3s var(--ease-out);
}
.plantas__dot::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: plantas-pulse 2.4s ease-out infinite;
}
.plantas__hotspot:hover .plantas__dot,
.plantas__hotspot:focus-visible .plantas__dot,
.plantas__hotspot.is-active .plantas__dot { transform: scale(1.3); }
.plantas__dot.is-disponible    { background: var(--c-green); color: var(--c-green); }
.plantas__dot.is-reservado     { background: #C9A24C; color: #C9A24C; }
.plantas__dot.is-no-disponible { background: #C9584C; color: #C9584C; }

@keyframes plantas-pulse {
  0%   { transform: scale(.7); opacity: .55; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Ficha — anclada en un panel FIJO debajo de la planta (nunca sobre
   la imagen ni sobre los hotspots), con altura reservada para que
   abrir/cerrar una ficha no desplace el resto del módulo. Solo una
   puede estar visible a la vez; el hint ocupa el mismo espacio
   cuando no hay ninguna activa. */
.plantas__info {
  position: relative;
  flex: 0 0 auto;
  min-height: clamp(68px, 11vh, 92px);
  border-top: 1px solid var(--c-line);
}
.plantas__hint,
.plantas__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 14px;
  opacity: 1;
  transition: opacity .25s var(--ease-out);
}
.plantas__hint {
  font-size: .74rem;
  color: var(--c-faint);
  max-width: 40ch;
  margin-inline: auto;
}
.plantas__hint.is-hidden { opacity: 0; }
.plantas__card {
  opacity: 0;
  pointer-events: none;
}
.plantas__card[hidden] { display: none; }
.plantas__card.is-open { opacity: 1; pointer-events: auto; }
.plantas__card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-display);
  font-size: .84rem;
  font-weight: 500;
  color: var(--c-ink);
  margin-bottom: 4px;
}
.plantas__card-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.plantas__card-status.is-disponible    .plantas__card-dot { background: var(--c-green); }
.plantas__card-status.is-reservado     .plantas__card-dot { background: #C9A24C; }
.plantas__card-status.is-no-disponible .plantas__card-dot { background: #C9584C; }
.plantas__card-detail {
  font-size: .72rem;
  color: var(--c-muted);
  line-height: 1.4;
  max-width: 44ch;
}
.plantas__card-cta {
  margin-top: 8px;
  background: none;
  border: 1px solid var(--c-line-strong);
  color: var(--c-ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  transition: border-color .3s, color .3s;
}
.plantas__card-cta:hover { border-color: var(--c-green); color: var(--c-green); }

.demo__footer {
  padding: 18px 20px 20px;
  border-top: 1px solid var(--c-line);
  margin-top: 18px;
}
.demo__footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  color: var(--c-faint);
}
.demo__chip {
  font-size: .78rem;
  color: var(--c-muted);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 6px 14px;
}
.demo__disclaimer {
  margin-top: 10px;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--c-faint);
  max-width: 62ch;
}
/* Dos variantes del mismo mensaje (no una traducción del copy, solo
   distinta extensión): la completa se lee bien en tablet/escritorio;
   en móvil angosto ocupaba demasiado alto y se reemplaza por una
   frase corta. Solo una es visible a la vez según el ancho. */
.demo__disclaimer--mobile { display: none; }

/* La identidad "Experiencia INMERZA" solo se muestra cuando sobra
   espacio junto a las flechas y los cuatro modos (evita que
   "Brochure digital" quede fuera de la fila y necesite scroll). */
@media (max-width: 1450px) {
  .demo__name { display: none; }
}

@media (max-width: 760px) {
  /* [2] Tarjeta principal: el explorador ocupa casi todo el ancho de
     pantalla en vez de quedar como una columna angosta dentro de la
     columna editorial (.container-visual ya trae su propio padding). */
  .demo {
    width: calc(100vw - 24px);
    max-width: none;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: calc(-50vw + 12px);
    margin-right: calc(-50vw + 12px);
    border-radius: 22px;
  }
  .demo__stage { margin-inline: 10px; }

  /* [3] Barra superior: la primera fila muestra únicamente el nombre
     completo del modo activo entre las dos flechas (los otros tres
     modos quedan ocultos — ya no compiten por espacio ni se recortan).
     Las flechas siguen ciclando los cuatro modos (ver goMode() en
     main.js, sin cambios). La segunda fila (sub-módulos del showroom)
     conserva su carrusel con scroll-snap existente. */
  .demo__bar-row { padding: 8px 10px; gap: 6px; }
  .demo__arrow { width: 44px; height: 44px; flex-shrink: 0; }
  .demo__nav { overflow: visible; flex: 1 1 auto; min-width: 0; }
  .demo__modes { width: 100%; gap: 0; }
  .demo__mode {
    display: none;
    flex: 1 1 auto;
    width: 100%;
    padding: 8px 4px;
    font-size: .92rem;
    text-align: center;
    white-space: normal;
  }
  .demo__mode.is-active { display: block; }
  .demo__mode::after { display: none; }
  .demo__tabs { padding: 0 10px; }
  .demo__tab { padding: 10px 10px 14px; font-size: .8rem; }

  /* [4] Título + descripción: más presencia tipográfica, sin alejarse
     demasiado del visual que tienen justo debajo. */
  .demo__meta { padding: 14px 16px 14px; }
  .demo__meta-title { font-size: clamp(24px, 6vw, 28px); }
  .demo__meta-desc { max-width: none; font-size: clamp(16px, 4vw, 18px); line-height: 1.5; }
  .demo__meta-tags { margin-top: 8px; }

  /* [5-9] Cada escena recibe una altura propia adecuada a su
     contenido en vez de compartir una sola relación de aspecto de
     escritorio (720/420) que comprimía plantas, brochure y galerías
     por igual. Ubicación conserva la relación original: su esquema
     SVG ya encajaba bien con ella. */
  .demo__stage { aspect-ratio: auto; min-height: 340px; }
  .demo__stage:has(.demo__scene[data-view="ubicacion"].is-active) {
    aspect-ratio: 720 / 420;
    min-height: 0;
  }
  .demo__stage:has(.demo__scene[data-view="niveles"].is-active),
  .demo__stage:has(.demo__scene[data-view="unidades"].is-active),
  .demo__stage:has(.demo__scene[data-view="r360"].is-active) {
    min-height: 320px;
  }
  .demo__stage:has(.demo__scene[data-view="loteos"].is-active) {
    min-height: 360px;
  }
  .demo__stage:has(.demo__scene[data-view="brochure"].is-active) {
    min-height: 460px;
  }

  /* [6-7] Niveles, Unidades y Recorridos 360°: miniaturas más grandes
     y con scroll-snap propio (el desplazamiento automático de la
     miniatura activa lo hace initGallery() en main.js). */
  .gallery__thumbs {
    scroll-snap-type: x proximity;
    scroll-padding-inline: 12px;
    padding: 10px 12px;
  }
  .gallery__thumb { width: 96px; height: 64px; scroll-snap-align: center; }
  .gallery__thumb-label { font-size: .66rem; }
  .gallery__expand { width: 44px; height: 44px; }

  /* [8] Brochure digital: una tarjeta completa y centrada a la vez
     (el indicador de paginación lo actualiza initBrochureGrid()). */
  .brochure-grid { scroll-padding-inline: 12px; padding: 12px 12px 34px; }
  .brochure-grid__card { flex-basis: calc(100% - 24px); scroll-snap-align: center; }
  .brochure-grid__pager {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 8px;
    text-align: center;
    font-size: .68rem;
    letter-spacing: .04em;
    color: var(--c-faint-aa);
  }

  /* [9] Plantas interactivas: dock de información compacto al
     iniciar (la planta ya usa el ancho completo vía initPlantas()). */
  .plantas__info { min-height: clamp(64px, 10vh, 80px); }
  .plantas__card-cta { min-height: 44px; }
  .plantas__hint { font-size: .78rem; }

  /* [10] Pie del explorador: una sola fila horizontal desplazable de
     chips y un disclaimer reducido a una frase (ver .demo__disclaimer
     más abajo — la versión completa se conserva para tablet/escritorio). */
  .demo__footer { padding: 14px 16px 16px; margin-top: 14px; }
  .demo__footer-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .demo__footer-row::-webkit-scrollbar { display: none; }
  .demo__footer-row span { flex: 0 0 auto; white-space: nowrap; }
  .demo__disclaimer--full { display: none; }
  .demo__disclaimer--mobile { display: block; }

  /* [11] Contraste: --c-faint (38% opacidad) no cumple WCAG AA en
     texto pequeño sobre el fondo navy del explorador (~3.4:1 medido;
     el mínimo AA es 4.5:1). Se escala solo dentro de #demo — el
     resto de la landing no se toca. */
  #demo .demo__disclaimer,
  #demo .plantas__tag,
  #demo .plantas__hint,
  #demo .demo__footer-row,
  #demo .demo__tab:not(.is-active),
  #demo .concepts__tab:not(.is-active) { color: var(--c-faint-aa); }
}

/* ============================================================
   EL PROBLEMA — pausa breve
   ============================================================ */
.problema__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.problema__inner h2 {
  max-width: 22ch;
  margin-bottom: clamp(28px, 5vh, 48px);
}
.problema__frag {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.4;
  color: var(--c-muted);
}
.frag-word {
  display: inline-block;
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--c-ink);
  margin-top: 6px;
}
/* Las letras nacen dispersas y se integran al entrar en vista
   (solo transform: el texto siempre es legible) */
html.js .frag-word span {
  display: inline-block;
  transition: transform 1s var(--ease-out);
}
html.js .reveal:not(.is-in) .frag-word span:nth-child(1)  { transform: translate(-8px, -10px) rotate(-6deg); }
html.js .reveal:not(.is-in) .frag-word span:nth-child(2)  { transform: translate(4px, 8px) rotate(4deg); }
html.js .reveal:not(.is-in) .frag-word span:nth-child(3)  { transform: translate(-3px, 12px) rotate(-3deg); }
html.js .reveal:not(.is-in) .frag-word span:nth-child(4)  { transform: translate(7px, -8px) rotate(5deg); }
html.js .reveal:not(.is-in) .frag-word span:nth-child(5)  { transform: translate(-6px, 6px) rotate(-4deg); }
html.js .reveal:not(.is-in) .frag-word span:nth-child(6)  { transform: translate(5px, -12px) rotate(3deg); }
html.js .reveal:not(.is-in) .frag-word span:nth-child(7)  { transform: translate(-4px, 9px) rotate(-5deg); }
html.js .reveal:not(.is-in) .frag-word span:nth-child(8)  { transform: translate(8px, 5px) rotate(6deg); }
html.js .reveal:not(.is-in) .frag-word span:nth-child(9)  { transform: translate(-7px, -7px) rotate(-3deg); }
html.js .reveal:not(.is-in) .frag-word span:nth-child(10) { transform: translate(3px, 11px) rotate(4deg); }
html.js .reveal:not(.is-in) .frag-word span:nth-child(11) { transform: translate(-5px, -9px) rotate(-6deg); }
html.js .reveal:not(.is-in) .frag-word span:nth-child(12) { transform: translate(6px, 7px) rotate(5deg); }
html.js .reveal:not(.is-in) .frag-word span:nth-child(13) { transform: translate(-4px, -11px) rotate(-4deg); }
html.js .frag-word span:nth-child(2)  { transition-delay: .04s; }
html.js .frag-word span:nth-child(3)  { transition-delay: .08s; }
html.js .frag-word span:nth-child(4)  { transition-delay: .12s; }
html.js .frag-word span:nth-child(5)  { transition-delay: .16s; }
html.js .frag-word span:nth-child(6)  { transition-delay: .2s; }
html.js .frag-word span:nth-child(7)  { transition-delay: .24s; }
html.js .frag-word span:nth-child(8)  { transition-delay: .28s; }
html.js .frag-word span:nth-child(9)  { transition-delay: .32s; }
html.js .frag-word span:nth-child(10) { transition-delay: .36s; }
html.js .frag-word span:nth-child(11) { transition-delay: .4s; }
html.js .frag-word span:nth-child(12) { transition-delay: .44s; }
html.js .frag-word span:nth-child(13) { transition-delay: .48s; }

/* ============================================================
   QUÉ HACE INMERZA · TRES OPERACIONES
   ============================================================ */
.quehace {
  background: linear-gradient(to bottom, var(--c-bg), var(--c-surface) 30%, var(--c-surface) 70%, var(--c-bg));
}
.quehace h2 { margin-bottom: clamp(24px, 4vh, 36px); }
.quehace__lead { color: var(--c-ink); margin-bottom: 16px; }
.quehace__body { margin-bottom: clamp(48px, 8vh, 88px); }

.ops {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.5vw, 56px);
}
.op { position: relative; }
.op + .op::before {
  content: '→';
  position: absolute;
  left: calc(-1 * clamp(24px, 3.5vw, 56px) / 2);
  top: 4px;
  translate: -50%;
  font-family: var(--f-display);
  font-size: 1.2rem;
  color: var(--c-faint);
}
.op__glyph {
  width: 30px;
  height: 30px;
  color: var(--c-green);
  margin-bottom: 18px;
}
.op h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 8px;
}
.op p {
  font-size: .92rem;
  color: var(--c-muted);
  line-height: 1.55;
  max-width: 28ch;
}

@media (max-width: 760px) {
  .ops { grid-template-columns: 1fr; gap: 36px; }
  .op + .op::before {
    content: '↓';
    left: 4px;
    top: -28px;
    translate: 0;
  }
}

/* ============================================================
   VALOR — Comprender / Explorar / Conectar
   ============================================================ */
.beneficios h2 { margin-bottom: clamp(16px, 2.5vh, 24px); }
.valor__lead { margin-bottom: clamp(44px, 7vh, 72px); }

.valor {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
  counter-reset: valor;
}
.valor__item {
  position: relative;
  border-radius: 16px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--glass-border);
}
.valor__num {
  position: absolute;
  top: clamp(20px, 2.6vw, 28px);
  right: clamp(20px, 2.6vw, 28px);
  font-family: var(--f-display);
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--c-faint);
}
.valor__glyph {
  width: 30px;
  height: 30px;
  color: var(--c-green);
  margin-bottom: 20px;
}
.valor__item h3 {
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.valor__item p {
  font-size: .92rem;
  color: var(--c-muted);
  line-height: 1.55;
  max-width: 32ch;
}

.valor__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 4vh, 40px);
}
.valor__chips li {
  font-size: .82rem;
  color: var(--c-faint);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 7px 16px;
}

@media (max-width: 820px) {
  .valor { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   LA DIFERENCIA · COMPARACIÓN INTERACTIVA
   ============================================================ */
.diferencia { border-top: 1px solid var(--c-line); text-align: center; }
.diferencia__statement {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: clamp(48px, 8vh, 88px);
}

.diff {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(64px, 10vh, 120px);
}
.diff__control {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.diff__btn {
  background: none;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  padding: 10px 22px;
  font-family: var(--f-display);
  font-size: .9rem;
  letter-spacing: .03em;
  color: var(--c-muted);
  cursor: pointer;
  transition: color .3s, border-color .3s, background-color .3s;
  min-height: 44px;
}
.diff__btn:hover { color: var(--c-ink); }
.diff__btn.is-active {
  color: var(--c-navy);
  background: var(--c-green);
  border-color: var(--c-green);
}
.diff__panel {
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 34px) clamp(14px, 2vw, 20px);
  transition: border-color .6s;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .diff__panel { background: rgba(3, 21, 47, .9); }
}
.diff__panel.is-connected { border-color: var(--glass-border-green); }

.diff__field {
  position: relative;
  aspect-ratio: 480 / 260;
}
.diff__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.diff__links path {
  stroke: var(--c-green);
  stroke-opacity: 0;
  stroke-width: 1;
  transition: stroke-opacity .6s var(--ease-out);
}
.diff__panel.is-connected .diff__links path { stroke-opacity: .6; }
html:not(.js) .diff__links path { stroke-opacity: .6; }

.diff__core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(30px, 6vw, 44px);
  height: auto;
  opacity: .9;
}

.diff__piece {
  position: absolute;
  left: var(--px);
  top: var(--py);
  font-family: var(--f-display);
  font-size: .74rem;
  letter-spacing: .02em;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-line-strong);
  background: rgba(2, 9, 23, .55);
  color: var(--c-faint);
  transform: translate(-50%, -50%) translate(var(--sx, 0px), var(--sy, 0px));
  transition: transform .9s var(--ease-out), color .5s, border-color .5s;
}
.diff__panel.is-connected .diff__piece {
  color: var(--c-ink);
  border-color: var(--glass-border-green);
  transform: translate(-50%, -50%);
}

@media (max-width: 560px) {
  .diff__piece { font-size: .64rem; padding: 5px 9px; }
}

.diff__caption {
  display: block;
  font-family: var(--f-display);
  font-size: .88rem;
  color: var(--c-faint);
  padding-block: 14px 10px;
  transition: color .5s;
}
.diff__cap-loose { display: inline; }
.diff__cap-connected { display: none; }
.diff__panel.is-connected .diff__cap-loose { display: none; }
.diff__panel.is-connected .diff__cap-connected { display: inline; color: var(--c-green); }

.soportes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
  text-align: left;
}
.soporte { border-top: 1px solid var(--c-line-strong); padding-top: 22px; }
.sop-num {
  display: block;
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .15em;
  color: var(--c-green);
  margin-bottom: 14px;
}
.soporte h3 {
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.soporte p {
  font-size: .92rem;
  color: var(--c-muted);
  line-height: 1.55;
  max-width: 30ch;
}

@media (max-width: 820px) {
  .soportes { grid-template-columns: 1fr; gap: 32px; }
  .diff__control { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   PROCESO · TRES PASOS — una línea que se construye
   ============================================================ */
.metodo h2 { margin-bottom: clamp(20px, 3vh, 28px); max-width: 30ch; }
.metodo__lead { margin-bottom: clamp(48px, 8vh, 88px); max-width: 62ch; }

.momentos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
  position: relative;
  padding-top: 34px;
}
.momentos::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--c-green), rgba(0, 208, 102, .25));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2s var(--ease-out) .2s;
}
.momentos.is-in::before { transform: scaleX(1); }

.momento { position: relative; }
.momento__node {
  position: absolute;
  top: -46px;
  left: -8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-green);
  background: var(--c-bg);
  color: var(--c-faint);
  transition: color .5s, box-shadow .5s;
}
.momento__node svg { width: 14px; height: 14px; }
.momentos.is-in .momento:nth-child(1) .momento__node { transition-delay: .5s; }
.momentos.is-in .momento:nth-child(2) .momento__node { transition-delay: 1.1s; }
.momentos.is-in .momento:nth-child(3) .momento__node { transition-delay: 1.7s; }
.momentos.is-in .momento__node {
  color: var(--c-green);
  box-shadow: 0 0 12px rgba(0, 208, 102, .5);
}
.momento h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.momento p {
  font-size: .92rem;
  color: var(--c-muted);
  line-height: 1.55;
  max-width: 30ch;
}

@media (max-width: 820px) {
  .momentos {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 0;
    padding-left: 30px;
  }
  .momentos::before {
    top: 6px;
    bottom: 6px;
    left: 5px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom, var(--c-green), rgba(0, 208, 102, .25));
    transform: scaleY(0);
    transform-origin: top;
  }
  .momentos.is-in::before { transform: scaleY(1); }
  .momento__node { top: -3px; left: -38px; }
}

/* ============================================================
   PROCESO · BLOQUE INFERIOR (para quién) — franja integrada al
   final del mismo panel, no una sección aparte.
   ============================================================ */
.metodo__closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
  flex-wrap: wrap;
  margin-top: clamp(56px, 9vh, 100px);
  padding-top: clamp(32px, 5vh, 48px);
  border-top: 1px solid var(--c-line);
}
.metodo__closing-text { max-width: 56ch; }
.metodo__closing-text h3 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 500;
  max-width: 26ch;
  margin-bottom: 14px;
}
.metodo__closing-text .body { font-size: .98rem; }

.stages {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.stages li {
  font-family: var(--f-display);
  font-size: .95rem;
  letter-spacing: .03em;
  color: var(--c-ink);
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  padding: 10px 22px;
  transition: border-color .4s, color .4s;
}
.stages li:hover { border-color: var(--c-green); color: var(--c-green); }

/* ============================================================
   CÓMO IMPLEMENTAMOS INMERZA (antes "Modalidades")
   Desktop: columna izquierda ~35% (título + intro) + columna
   derecha ~65% (tres módulos horizontales). Reutiliza el patrón
   de filas existente (número + icono + texto).
   ============================================================ */
.modalidades__layout {
  margin-bottom: clamp(28px, 4vh, 40px);
}
.modalidades__intro { margin-bottom: clamp(36px, 6vh, 56px); }
.modalidades__intro h2 { margin-bottom: clamp(16px, 2.5vh, 22px); }
@media (min-width: 900px) { .modalidades__intro { margin-bottom: 0; } }

.modalidades__rows { list-style: none; }
.modalidad {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  padding-block: clamp(22px, 3vh, 30px);
  border-top: 1px solid var(--c-line);
  transition: border-color .4s;
}
.modalidad:last-child { border-bottom: 1px solid var(--c-line); }
.modalidad:hover { border-color: var(--glass-border-green); }
.modalidad__num {
  flex-shrink: 0;
  width: 3ch;
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: .06em;
  color: var(--c-green);
  align-self: flex-start;
  margin-top: 4px;
}
.modalidad__glyph {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--c-green);
}
.modalidad h3 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 8px;
}
.modalidad p {
  font-size: .92rem;
  color: var(--c-muted);
  line-height: 1.55;
  max-width: 56ch;
}

@media (max-width: 640px) {
  .modalidad { flex-wrap: wrap; gap: 10px 16px; }
  .modalidad__body { flex: 1 1 100%; }
}

@media (min-width: 900px) {
  .modalidades__layout {
    display: grid;
    grid-template-columns: minmax(240px, 35%) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }
  .modalidades__intro .lead { max-width: 32ch; }
}

/* ============================================================
   PROGRAMA FUNDADORES INMERZA — bloque premium de captación.
   Desktop: contenido a la izquierda, imagen arquitectónica
   integrada a la derecha con degradado que conecta ambas zonas.
   ============================================================ */
.piloto { padding-top: 0; }
.piloto__panel {
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.piloto__panel::after {
  content: '';
  position: absolute;
  top: -160px;
  right: -160px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-green-soft), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.piloto__content {
  position: relative;
  z-index: 1;
  padding: clamp(36px, 6vw, 80px);
}
.piloto__label {
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--c-green);
  margin-bottom: clamp(18px, 3vh, 26px);
}
.piloto__panel h2 { margin-bottom: 24px; }
.piloto__panel .body { margin-bottom: 28px; }

.piloto__list {
  list-style: none;
  margin-bottom: 28px;
  max-width: 52ch;
}
.piloto__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-line);
  font-size: .98rem;
}
.piloto__list li:last-child { border-bottom: none; }
.piloto__check {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--c-green);
}
.piloto__fit {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-ink);
  font-size: 1rem;
  margin-bottom: 16px;
}
.piloto__fit-bar { flex-shrink: 0; width: 3px; height: 20px; border-radius: 2px; background: var(--c-green); }
.piloto__panel .note { margin-bottom: 36px; }

.piloto__cta {
  gap: 10px;
  white-space: nowrap;
}
.piloto__cta svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.piloto__cta:hover svg { transform: translateX(3px); }

.piloto__visual {
  position: relative;
  min-height: 220px;
}
.piloto__visual picture,
.piloto__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.piloto__visual-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: rgba(2, 9, 23, .55);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 5px 12px;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

@media (min-width: 900px) {
  .piloto__panel {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
  }
  .piloto__visual {
    min-height: 0;
  }
  .piloto__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, var(--c-navy) -5%, transparent 30%);
    pointer-events: none;
  }
}

/* ============================================================
   PREGUNTAS FRECUENTES
   ============================================================ */
.faq { border-top: 1px solid var(--c-line); }
.faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq__head h2 { margin-bottom: 18px; }

.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item h3 { font-size: 1rem; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  background: none;
  border: 0;
  padding: 20px 2px;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 500;
  text-align: left;
  color: var(--c-ink);
  cursor: pointer;
  min-height: 44px;
  transition: color .3s;
}
.faq__q:hover { color: var(--c-green); }
.faq__q svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--c-faint);
  transition: transform .3s var(--ease-out), color .3s;
}
.faq__item.is-open .faq__q svg {
  transform: rotate(180deg);
  color: var(--c-green);
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease-out);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a-inner p {
  font-size: .95rem;
  color: var(--c-muted);
  line-height: 1.6;
  max-width: 58ch;
  padding: 0 2px 22px;
}
/* Sin JS: respuestas visibles */
html:not(.js) .faq__a { grid-template-rows: 1fr; }

@media (max-width: 900px) {
  .faq__layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   CIERRE
   ============================================================ */
.cierre {
  position: relative;
  text-align: center;
  border-top: 1px solid var(--c-line);
  overflow: hidden;
}

/* Campo de nodos y líneas — recupera el lenguaje del hero */
.cierre__field { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.cierre__node {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 0 14px rgba(0, 208, 102, .55);
}
.cierre__node--a { left: 18%; top: 26%; }
.cierre__node--b { left: 84%; top: 22%; }
.cierre__node--c { left: 70%; top: 82%; }
.cierre__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cierre__lines line {
  stroke: rgba(0, 208, 102, .3);
  stroke-width: .3;
  vector-effect: non-scaling-stroke;
}

.cierre__panel {
  position: relative;
  z-index: 2;
  border-radius: 28px;
  padding: clamp(48px, 8vw, 96px) clamp(24px, 6vw, 64px);
  margin-inline: auto;
  max-width: 860px;
}
.cierre__crest {
  width: clamp(36px, 4vw, 48px);
  margin-inline: auto;
  margin-bottom: clamp(20px, 3vh, 30px);
}
.cierre h2 {
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  max-width: 16ch;
  margin-inline: auto;
  margin-bottom: 28px;
}
.cierre h2 em { font-style: normal; color: var(--c-green); }
.cierre .lead {
  margin-inline: auto;
  margin-bottom: 44px;
}

/* ============================================================
   FOOTER — con el lockup integrado
   ============================================================ */
.footer {
  border-top: 1px solid var(--c-line);
  padding-block: 52px 40px;
}
.footer__lockup {
  display: block;
  margin: 0 auto 40px;
  width: clamp(180px, 20vw, 220px);
  opacity: .9;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--c-line);
  padding-top: 32px;
}
.footer__desc {
  font-size: .875rem;
  color: var(--c-muted);
}
.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: .8rem;
  color: var(--c-faint);
}
.footer__meta a {
  color: var(--c-muted);
  text-decoration: none;
  transition: color .3s;
}
.footer__meta a:hover { color: var(--c-green); }

/* ============================================================
   Movimiento reducido — la antesala no existe (el bootstrap
   nunca añade html.pre); el contenido siempre es visible y
   se apagan los efectos continuos.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal,
  html.js .reveal-up,
  html.js .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  html.js .frag-word span,
  html.js .reveal:not(.is-in) .frag-word span { transform: none; transition: none; }
  .frag { animation: none; }
  .hero__scroll-line span { animation: none; top: 30%; }
  .momentos::before { transform: none; transition: none; }
  .momento__node { color: var(--c-green); transition: none; }
  .demo__scene { transition: none; }
  .diff__links path { transition: none; }
  .diff__piece { transition: none; }
  .diff__panel { transition: none; }
  .faq__a { transition: none; }
  .faq__q svg { transition: none; }
  .btn { transition: none; }
  .piloto__cta svg { transition: none; }
  .hero__crest, .hero__descriptor, .hero__title, .hero__sub, .hero__actions { transition: none; }
  .hero__hint { transition: none; }
  .hero__plane { transition: none; opacity: 1; transform: none; }
  .concept { transition: none; }
  .concepts__arrow:hover { scale: 1; }
  .concepts { transition: none; }
  .concept-modal__panel { transition: none; }
  .plantas__dot::after { animation: none; display: none; }
  .plantas__dot { transition: none; }
  .plantas__hotspot:hover .plantas__dot,
  .plantas__hotspot:focus-visible .plantas__dot,
  .plantas__hotspot.is-active .plantas__dot { transform: none; }
  .plantas__hint,
  .plantas__card { transition: opacity .2s linear; }
}