/* ====== ROADMAP FULL-BLEED (AION) ====== */

/* Quita bordes/fondo sólo en roadmap, para ir full-bleed */
.panel.panel--fullbleed {
  max-width: none;
  border: none;
  background: transparent;
  padding-left: 0;
  padding-right: 0;

  padding-top: 0;      /* el aire superior lo maneja #roadmap .section-inner */
  padding-bottom: 0;   /* evitamos sumar padding doble abajo */
}

/* Layout vertical específico para la sección ROADMAP */
#roadmap[data-section] {
  align-items: stretch;   /* pisa el align-items:center global */
  justify-content: center;
  box-sizing: border-box;

  --rm-top-offset: -30px;        /* ✅ ajustá a ojo */
  --rm-bottom-clearance: 210px;  /* ✅ ajustá a ojo */

  padding-top: calc(var(--hud-top-height) + var(--rm-top-offset));
  padding-bottom: var(--rm-bottom-clearance);
}

/* Caja interna Roadmap: aire superior/inferior similar a PROTOCOL 
   y variable para la altura del eje */
#roadmap .section-inner {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;

  display: flex;
  align-items: stretch;
}

.roadmap-section {
  width: 100%;
  height: 100%;
  max-width: none;   /* ✅ FULL WIDTH */
  padding: 0;
  margin: 0;

  overflow: hidden;

  display: flex;
  align-items: stretch;
}

/* CONTENEDOR VISIBLE DEL ROADMAP (clamp al ancho de la página) */
.rm-viewport {
  /* ✅ el eje siempre centrado verticalmente dentro del corredor */
  --axis-top: 50%;

  /* ✅ altura máxima permitida para la card activa (relativa al viewport) */
  --rm-card-active-max-h: calc(100% - 26px);

  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;

  margin: 0;
  padding: 0; /* el padding horizontal lo maneja el track */

  overflow: hidden;

  /* ✅ NO “recuadro” */
  background: transparent;
  border: none;
  border-radius: 0;
}

.rm-viewport::-webkit-scrollbar {
  display: none;               /* Chrome/Edge: sin barra */
}


/* Track horizontal de tarjetas: ya no es el referente del eje,
   así la línea cian no se mueve cuando una card se expande */
.rm-track {
  position: absolute;
  top: var(--axis-top);
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;

  gap: var(--rm-gap, 2rem);

  /* ✅ no sumes altura con padding vertical */
  padding: 0 clamp(18px, 6vw, 110px);

  transform: translateY(-50%);
  will-change: transform;
}

.rm-track::-webkit-scrollbar { display: none; }


/* Línea continua del roadmap (sin cortes en los extremos) */
.rm-axis {
  position: absolute;
  left: -50vw;                     /* se extiende bastante más allá del primer card */
  right: -70vw;                    /* y también más allá del último */
  top: var(--axis-top, 255px);
  transform: translateY(-50%);
  height: 3px;

  /* ✅ OFF-WHITE parity (sin cyan puro) */
  background: linear-gradient(
    90deg,
    rgba(var(--rm-off-rgb, 245, 250, 255), 0.26) 0%,
    rgba(var(--rm-off-rgb, 245, 250, 255), 0.26) 100%
  );

  box-shadow: 0 0 10px rgba(var(--rm-off-rgb, 245, 250, 255), 0.22);
  filter: blur(0.28px);
  opacity: 0.92;

  pointer-events: none;
  z-index: 0;
}


.rm-card {
  position: relative;
  width: var(--rm-card-w);
  min-width: var(--rm-card-w);
  max-width: var(--rm-card-w);

  /* ============================
     AION GLASS (match secciones)
     ============================ */
  --rm-holo-rgb: 163, 228, 248; /* #A3E4F8 (Nebula Sky) */
  --rm-off-rgb: 245, 250, 255;  /* Off-White */

  border-radius: 18px;
  padding: 0.8rem 0.8rem 0.8rem; /* NO cambiar */
  overflow: hidden;
  isolation: isolate;

  /* Vidrio: transparente + base sutil (sin placa sólida) */
  background:
    radial-gradient(520px 220px at 18% 10%,
      rgba(var(--rm-off-rgb), 0.05),
      rgba(var(--rm-off-rgb), 0.00) 62%
    ),
    radial-gradient(820px 320px at 50% -10%,
      rgba(var(--rm-holo-rgb), 0.07),
      rgba(var(--rm-holo-rgb), 0.00) 58%
    ),
    radial-gradient(620px 300px at 50% 118%,
      rgba(4, 60, 80, 0.07),
      rgba(4, 60, 80, 0.00) 66%
    ),
    linear-gradient(
      180deg,
      rgba(4, 60, 80, 0.18),
      rgba(10, 15, 20, 0.22)
    );

  border: 1px solid rgba(var(--rm-holo-rgb), 0.18);

  box-shadow:
    0 0 0 1px rgba(var(--rm-holo-rgb), 0.10) inset,
    0 0 22px rgba(var(--rm-holo-rgb), 0.08) inset,
    0 0 24px rgba(var(--rm-holo-rgb), 0.12),
    0 30px 110px rgba(10, 15, 20, 0.62);

  /* “lente” liviana */
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);

  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  transform-origin: center;
  transform: translateY(var(--lift, 0px));

  transition:
    transform 0.85s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.35s ease-out,
    border-color 0.35s ease-out,
    background 0.35s ease-out,
    opacity 0.35s ease-out;

  opacity: 0.94;
}

/* Contenido SIEMPRE arriba del vidrio */
.rm-card > * {
  position: relative;
  z-index: 1;
}

/* Segunda línea interna + sheen */
.rm-card::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: calc(18px - 3px);
  pointer-events: none;

  border: 1px solid rgba(var(--rm-holo-rgb), 0.12);

  background: linear-gradient(
    180deg,
    rgba(var(--rm-holo-rgb), 0.10),
    rgba(var(--rm-holo-rgb), 0.00) 22%
  );

  box-shadow:
    0 0 0 1px rgba(var(--rm-holo-rgb), 0.08) inset,
    0 0 18px rgba(var(--rm-holo-rgb), 0.06) inset;

  z-index: 0;
}

/* Hotspots en esquinas (holograma) */
.rm-card::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: calc(18px + 10px);
  pointer-events: none;

  background:
    radial-gradient(180px 180px at 0% 0%,
      rgba(var(--rm-holo-rgb), 0.32),
      rgba(var(--rm-holo-rgb), 0.00) 58%
    ),
    radial-gradient(180px 180px at 100% 0%,
      rgba(var(--rm-holo-rgb), 0.32),
      rgba(var(--rm-holo-rgb), 0.00) 58%
    ),
    radial-gradient(220px 220px at 0% 100%,
      rgba(var(--rm-holo-rgb), 0.14),
      rgba(var(--rm-holo-rgb), 0.00) 66%
    ),
    radial-gradient(220px 220px at 100% 100%,
      rgba(var(--rm-holo-rgb), 0.14),
      rgba(var(--rm-holo-rgb), 0.00) 66%
    );

  opacity: 0.62;
  z-index: 0;
}

/* =========================================
   ROADMAP — LIMITAR ALTURA DE CARD ACTIVA
   (sin tocar el ancho de la sección)
   ========================================= */

/* En estado normal: recortamos descripción para evitar cards altas */
.rm-card:not(.is-active) .rm-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* ✅ ajustá 2–4 si querés */
  overflow: hidden;
}

/* Card activa: NO puede superar el corredor */
.rm-card.is-active {
  max-height: var(--rm-card-active-max-h);
  overflow: hidden; /* clave: lo que sobre, scrollea adentro */
}

/* La parte expandida se vuelve scrollable (sin centrar el texto) */
.rm-card.is-active .rm-more {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;

  overflow: auto;
  padding-right: 10px;

  align-items: stretch; /* ✅ NO center */
}

/* Scrollbar sutil (Chromium) — OFF-WHITE (parity Devlog) */
.rm-card.is-active .rm-more::-webkit-scrollbar {
  width: 8px;
}
.rm-card.is-active .rm-more::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(245, 250, 255, 0.22),
    rgba(245, 250, 255, 0.10)
  );
  border-radius: 999px;
  border: 1px solid rgba(245, 250, 255, 0.34);
  box-shadow: 0 0 14px rgba(245, 250, 255, 0.08);
}
.rm-card.is-active .rm-more::-webkit-scrollbar-track {
  background: rgba(245, 250, 255, 0.06);
  border-radius: 999px;
}


/* Estado por defecto (no activo) */
.rm-card:not(.is-active) {
  /* ✅ Efecto “lupa”: en el centro queda igual (loupe=1), en los extremos se achica */
  transform: translateY(var(--lift, 0px)) scale(calc(0.82 * var(--rm-loupe, 1)));
  opacity: 0.82;
}

/* Hover en tarjetas no activas */
.rm-card:hover:not(.is-active) {
  transform: translateY(var(--lift, 0px)) scale(calc(0.90 * var(--rm-loupe, 1)));
  border-color: rgba(var(--rm-holo-rgb), 0.42);

  box-shadow:
    0 0 0 1px rgba(var(--rm-holo-rgb), 0.12) inset,
    0 0 28px rgba(var(--rm-holo-rgb), 0.18),
    0 0 80px rgba(var(--rm-holo-rgb), 0.14),
    0 30px 110px rgba(10, 15, 20, 0.62);

  opacity: 1;
  cursor: pointer;
}

.rm-card:hover:not(.is-active)::after {
  opacity: 0.82;
}


/* Estado activo (clickeado) — reducir EXPANSIÓN del glow (50%) */
.rm-card.is-active {
  transform: translateY(var(--lift, 0px)) scale(calc(0.94 * var(--rm-loupe, 1)));

  border-color: rgba(var(--rm-holo-rgb), 0.62);

  background:
    radial-gradient(520px 220px at 18% 10%,
      rgba(var(--rm-off-rgb), 0.06),
      rgba(var(--rm-off-rgb), 0.00) 62%
    ),
    radial-gradient(820px 320px at 50% -10%,
      rgba(var(--rm-holo-rgb), 0.10),
      rgba(var(--rm-holo-rgb), 0.00) 58%
    ),
    radial-gradient(620px 300px at 50% 118%,
      rgba(4, 60, 80, 0.08),
      rgba(4, 60, 80, 0.00) 66%
    ),
    linear-gradient(
      180deg,
      rgba(4, 60, 80, 0.20),
      rgba(10, 15, 20, 0.24)
    );

  /* 🔻 clave: el glow que “expande” era el blur 70px → ahora 35px (50%) */
  box-shadow:
    0 0 0 1px rgba(var(--rm-holo-rgb), 0.14) inset,
    0 0 22px rgba(var(--rm-holo-rgb), 0.10) inset,
    0 0 22px rgba(var(--rm-holo-rgb), 0.14),
    0 0 35px rgba(var(--rm-holo-rgb), 0.08),
    0 30px 110px rgba(10, 15, 20, 0.62);

  opacity: 1;

  width: var(--rm-card-w-active);
  min-width: var(--rm-card-w-active);
  max-width: var(--rm-card-w-active);
}


/* Hotspots de activa — reducir expansión vertical (50%) */
.rm-card.is-active::after {
  /* antes el ::after base usa inset:-10px (todo alrededor)
     acá lo acotamos SOLO arriba/abajo: 10px → 5px */
  inset: -5px -10px;

  /* además achicamos el tamaño de los hotspots (menos “nube” fuera) */
  background:
    radial-gradient(140px 140px at 0% 0%,
      rgba(var(--rm-holo-rgb), 0.26),
      rgba(var(--rm-holo-rgb), 0.00) 58%
    ),
    radial-gradient(140px 140px at 100% 0%,
      rgba(var(--rm-holo-rgb), 0.26),
      rgba(var(--rm-holo-rgb), 0.00) 58%
    ),
    radial-gradient(170px 170px at 0% 100%,
      rgba(var(--rm-holo-rgb), 0.12),
      rgba(var(--rm-holo-rgb), 0.00) 66%
    ),
    radial-gradient(170px 170px at 100% 100%,
      rgba(var(--rm-holo-rgb), 0.12),
      rgba(var(--rm-holo-rgb), 0.00) 66%
    );

  opacity: 0.48;
}


/* Cabecera mini-hud — COLOR PARITY DEVLOG (Off-White + Nebula) */
.rm-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;

  color: rgba(245, 250, 255, 0.70);
  text-shadow: 0 0 10px rgba(245, 250, 255, 0.10);
}

.rm-date {
  opacity: 1;
}

.rm-status {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;

  color: rgba(245, 250, 255, 0.78);

  border: 1px solid rgba(245, 250, 255, 0.22);
  background:
    radial-gradient(140px 70px at 30% 18%,
      rgba(245, 250, 255, 0.08),
      rgba(245, 250, 255, 0.00) 62%
    ),
    linear-gradient(
      180deg,
      rgba(4, 60, 80, 0.22),
      rgba(10, 15, 20, 0.22)
    );

  box-shadow:
    0 0 0 1px rgba(var(--rm-holo-rgb), 0.10) inset,
    0 0 18px rgba(var(--rm-holo-rgb), 0.14);
}

/* Pulso suave al activar (sin cyan) */
.rm-card.is-active .rm-status {
  animation: rm-status-pulse 480ms ease-out 120ms 1;
}

/* Neutralizo colores por estado: todo queda “DEVLOG” */
.rm-card.is-done .rm-status,
.rm-card.is-progress .rm-status,
.rm-card.is-planned .rm-status {
  border-color: rgba(245, 250, 255, 0.22);
  color: rgba(245, 250, 255, 0.78);
}

/* Títulos y descripción */
.rm-title {
  margin-top: 0.35rem;
  font-size: 1.0rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  color: rgba(245, 250, 255, 0.92);
  text-shadow: 0 0 12px rgba(245, 250, 255, 0.08);
}

/* Título entra con slide + fade cuando la card se activa */
.rm-card.is-active .rm-title {
  animation: rm-title-in 320ms ease-out 80ms both;
}


.rm-desc {
  font-size: 0.84rem;
  line-height: 1.45;

  color: rgba(245, 250, 255, 0.78);
}

/* Sección expandible */
.rm-more {
  margin-top: 0.35rem;
  display: none;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;

  color: rgba(245, 250, 255, 0.84);
}

.rm-gif {
  display: block;
  width: 100%;
  border-radius: 14px;

  border: 1px solid rgba(var(--rm-holo-rgb), 0.18);
  box-shadow:
    0 0 8px rgba(var(--rm-holo-rgb), 0.16),
    0 0 22px rgba(var(--rm-holo-rgb), 0.10);
}

/* La imagen/gif aparece con glow progresivo cuando la card está activa */
.rm-card.is-active .rm-gif {
  animation: rm-gif-glow-in 420ms ease-out 180ms both;
}


/* === BOTÓN READ MORE — solo visible en tarjetas activas === */
.rm-btn {
  display: none; /* Oculto por defecto */
  margin-top: 0.7rem;
  padding: 0.45rem 1.25rem;

  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;

  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.10em;

  color: rgba(245, 250, 255, 0.86);

  border: 1px solid rgba(var(--rm-holo-rgb), 0.22);
  background:
    radial-gradient(160px 70px at 22% 0%,
      rgba(245, 250, 255, 0.07),
      rgba(245, 250, 255, 0.00) 62%
    ),
    linear-gradient(
      180deg,
      rgba(4, 60, 80, 0.22),
      rgba(10, 15, 20, 0.24)
    );

  box-shadow:
    0 0 0 1px rgba(var(--rm-holo-rgb), 0.10) inset,
    0 0 18px rgba(var(--rm-holo-rgb), 0.14);

  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

.rm-btn:hover {
  border-color: rgba(var(--rm-holo-rgb), 0.44);
  background:
    radial-gradient(160px 70px at 22% 0%,
      rgba(245, 250, 255, 0.10),
      rgba(245, 250, 255, 0.00) 62%
    ),
    linear-gradient(
      180deg,
      rgba(4, 60, 80, 0.26),
      rgba(10, 15, 20, 0.26)
    );

  box-shadow:
    0 0 0 1px rgba(var(--rm-holo-rgb), 0.12) inset,
    0 0 26px rgba(var(--rm-holo-rgb), 0.18);

  transform: translateY(-2px);
}

/* ✅ Solo se muestra cuando la tarjeta está activa/expandida */
.rm-card.is-active .rm-btn {
  display: inline-block;
}

/* === Microinteracciones card activa (Roadmap) === */

@keyframes rm-title-in {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rm-status-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(var(--rm-holo-rgb), 0.18);
  }
  40% {
    transform: scale(1.06);
    box-shadow: 0 0 22px rgba(var(--rm-holo-rgb), 0.26);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(var(--rm-holo-rgb), 0.20);
  }
}

@keyframes rm-gif-glow-in {
  0% {
    opacity: 0;
    box-shadow:
      0 0 0px rgba(var(--rm-holo-rgb), 0.00),
      0 0 0px rgba(var(--rm-holo-rgb), 0.00),
      0 0 10px rgba(var(--rm-holo-rgb), 0.00);
  }
  100% {
    opacity: 1;
    box-shadow:
      0 0 8px rgba(var(--rm-holo-rgb), 0.16),
      0 0 22px rgba(var(--rm-holo-rgb), 0.10);
  }
}


/* =========================================
   ROADMAP — width tuning (reduce height)
   Pegalo AL FINAL del roadmap.css
   ========================================= */

#roadmap {
  /* ✅ Ancho cards (subí/bajá a ojo) */
  --rm-card-w: 260px;          /* inactivas */
  --rm-card-w-active: 320px;   /* activa */

  /* ✅ Separación horizontal entre cards (evita solape al agrandar) */
  --rm-gap: 30px;             /* si se enciman: 200–230 */
}

/* Inactivas */
.rm-card {
  width: var(--rm-card-w) !important;
}

/* Activa */
.rm-card.is-active {
  width: var(--rm-card-w-active) !important;
}


/* =========================================
   ROADMAP — Scroll solo del texto + CTA fijo
   Pegalo AL FINAL del roadmap.css
   ========================================= */

/* El contenedor expandido NO scrollea (scrollea el texto) */
.rm-card.is-active .rm-more {
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* ✅ ocupa el alto disponible de la card */
  flex: 1 1 auto;
  min-height: 0;

  /* ✅ importante: que NO scrollee el bloque entero */
  overflow: hidden;
}

/* ✅ SOLO el texto scrollea */
.rm-card.is-active .rm-more p {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 10px;
}

/* El media/imagen queda fijo arriba (no en scroll) */
.rm-card.is-active .rm-more img {
  flex: 0 0 auto;
  max-width: 100%;
  height: auto;
}

/* ✅ Botón fijo abajo (no dentro del scroll) */
.rm-card.is-active .rm-btn {
  flex: 0 0 auto;
  margin-top: 8px;
}


/* =========================================
   ROADMAP — Scrollbar HUD (solo texto)
   ========================================= */

.rm-card.is-active .rm-more p {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 250, 255, 0.38) rgba(245, 250, 255, 0.08);
}

/* Chromium (Chrome/Edge) */
.rm-card.is-active .rm-more p::-webkit-scrollbar {
  width: 8px;
}

.rm-card.is-active .rm-more p::-webkit-scrollbar-track {
  background: rgba(245, 250, 255, 0.06);
  border-left: 1px solid rgba(245, 250, 255, 0.10);
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(245, 250, 255, 0.06) inset,
    0 0 22px rgba(245, 250, 255, 0.04) inset;
}

.rm-card.is-active .rm-more p::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(245, 250, 255, 0.22),
    rgba(245, 250, 255, 0.10)
  );
  border: 1px solid rgba(245, 250, 255, 0.42);
  box-shadow:
    0 0 16px rgba(245, 250, 255, 0.10),
    0 0 0 1px rgba(245, 250, 255, 0.10) inset;
}

.rm-card.is-active .rm-more p::-webkit-scrollbar-thumb:hover {
  border-color: rgba(245, 250, 255, 0.58);
  box-shadow:
    0 0 22px rgba(245, 250, 255, 0.14),
    0 0 0 1px rgba(245, 250, 255, 0.12) inset;
}


/* =========================================
   ROADMAP — FIX eje cian infinito + aire simétrico
   Pegalo AL FINAL del roadmap.css
   ========================================= */

#roadmap {
  /* este es el "aire" de inicio/fin (izq/der) — tocá a ojo */
  --rm-edge-space: clamp(18px, 6vw, 110px);
}

/* el viewport tiene que poder scrollear horizontal (sin mostrar scrollbar) */
#roadmap .rm-viewport{
  overflow-x: auto !important;
  overflow-y: hidden !important;

  /* ocultar scrollbar Firefox/Edge legacy */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#roadmap .rm-viewport::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* CLAVE: el track ahora crece con el contenido (y suma aire a ambos lados) */
#roadmap .rm-track{
  width: max-content !important;  /* ✅ crece con las cards */
  min-width: 100% !important;     /* ✅ nunca menor al viewport */

  padding-left: var(--rm-edge-space) !important;
  padding-right: var(--rm-edge-space) !important;
}

/* el eje cian ahora ocupa TODO el track (incluye el aire del final) */
#roadmap .rm-axis{
  left: 0 !important;
  right: 0 !important;
}


/* =========================================
   ROADMAP — MODAL (Leer más) CLEAN + SIZE CONTROL
   Overlay NO dentro del scroller (rm-viewport)
   ========================================= */

/* ✅ ancla para overlay */
.roadmap-section { position: relative; }

/* Cuando el modal está abierto: deshabilito interacción de cards/track
   (NO toca HUD porque todo está dentro de #roadmap) */
#roadmap.rm-modal-open .rm-track {
  pointer-events: none;
  filter: blur(1.25px) brightness(0.72) saturate(0.90) contrast(1.06);
}

/* =========================================
   ROADMAP — MODAL sizing knobs (AJUSTE A OJO)
   + composición (PUNTO 4)
   ========================================= */

#roadmap {
  --rm-modal-w: min(760px, 84vw);   /* 👈 ancho del popup */
  --rm-modal-max-h: 68vh;           /* 👈 alto máximo del popup */

  /* media */
  --rm-modal-media-max-h: 240px;    /* 👈 alto máximo del gif/imagen */

  /* ✅ PUNTO 4: “rail” de lectura + composición */
  --rm-modal-content-max: 700px;    /* 👈 ancho máximo del texto (subí/bajá a ojo) */
  --rm-modal-media-max-w: 520px;    /* 👈 ancho máximo del media (subí/bajá a ojo) */
  --rm-modal-body-gap: 12px;        /* 👈 aire entre bloques */

  /* === AION GLASS TOKENS (parity Devlog) === */
  --rm-holo-rgb: 163, 228, 248; /* #A3E4F8 (Nebula Sky) */
  --rm-off-rgb: 245, 250, 255;  /* Off-White */
}

/* ✅ Overlay: encima del roadmap, PERO debajo del HUD */
#roadmap .rm-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 45; /* ✅ HUD arriba */

  display: flex;
  align-items: center;
  justify-content: center;

  padding: clamp(10px, 2.2vw, 22px);
  overflow: hidden;

  /* === OFF-WHITE + NEBULA (sin cyan puro) === */
  background:
    radial-gradient(1200px 700px at 50% 40%,
      rgba(var(--rm-holo-rgb), 0.10) 0%,
      rgba(0, 6, 12, 0.74) 55%,
      rgba(0, 0, 0, 0.88) 100%
    ),
    linear-gradient(180deg,
      rgba(0, 6, 12, 0.55),
      rgba(0, 0, 0, 0.72)
    );

  backdrop-filter: blur(12px) brightness(0.98) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) brightness(0.98) saturate(1.05);

  /* estado cerrado (animable) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 220ms ease,
    visibility 0s linear 220ms;
}

/* Capa HUD: scanlines sutiles (solo overlay) */
#roadmap .rm-modal-overlay::before{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;

  opacity: 0.14;
  mix-blend-mode: screen;

  background: repeating-linear-gradient(
    180deg,
    rgba(var(--rm-off-rgb), 0.05) 0 1px,
    rgba(0,0,0,0.00) 1px 7px
  );

  animation: rm-overlay-scan 1.25s linear infinite;
}

/* Viñeta + halos suaves para “profundidad” */
#roadmap .rm-modal-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  opacity: 0.55;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0.00) 0 55%,
      rgba(0,0,0,0.55) 100%
    ),
    radial-gradient(900px 420px at 18% 30%,
      rgba(var(--rm-holo-rgb), 0.10),
      transparent 60%
    ),
    radial-gradient(900px 420px at 82% 70%,
      rgba(var(--rm-holo-rgb), 0.08),
      transparent 62%
    );
}

@keyframes rm-overlay-scan{
  from { transform: translateY(0); }
  to   { transform: translateY(28px); }
}

/* estado abierto */
#roadmap .rm-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 220ms ease,
    visibility 0s linear 0s;
}

/* ✅ Modal */
#roadmap .rm-modal {
  width: var(--rm-modal-w);
  max-height: min(
    var(--rm-modal-max-h),
    calc(100% - (2 * clamp(10px, 2.2vw, 22px)))
  );

  display: flex;
  flex-direction: column;

  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;

  /* === AION GLASS (parity cards/devlog) === */
  background:
    radial-gradient(520px 220px at 18% 10%,
      rgba(var(--rm-off-rgb), 0.06),
      rgba(var(--rm-off-rgb), 0.00) 62%
    ),
    radial-gradient(820px 320px at 50% -10%,
      rgba(var(--rm-holo-rgb), 0.10),
      rgba(var(--rm-holo-rgb), 0.00) 58%
    ),
    radial-gradient(620px 300px at 50% 118%,
      rgba(4, 60, 80, 0.10),
      rgba(4, 60, 80, 0.00) 66%
    ),
    linear-gradient(
      180deg,
      rgba(4, 60, 80, 0.22),
      rgba(10, 15, 20, 0.30)
    );

  border: 1px solid rgba(var(--rm-holo-rgb), 0.22);

  box-shadow:
    0 0 0 1px rgba(var(--rm-holo-rgb), 0.12) inset,
    0 0 22px rgba(var(--rm-holo-rgb), 0.08) inset,
    0 0 26px rgba(var(--rm-holo-rgb), 0.12),
    0 50px 140px rgba(10, 15, 20, 0.70);

  backdrop-filter: blur(12px) saturate(1.06);
  -webkit-backdrop-filter: blur(12px) saturate(1.06);

  /* animación de entrada (AAA) */
  opacity: 0;
  transform: translateY(42px) scale(0.90);
  filter: blur(2px);
  will-change: transform, opacity, filter, box-shadow;

  transition:
    transform 320ms cubic-bezier(0.22, 0.9, 0.25, 1),
    opacity 220ms ease,
    filter 240ms ease;
}

/* Línea interna + sheen (como las cards) */
#roadmap .rm-modal::before{
  content:"";
  position:absolute;
  inset: 3px;
  border-radius: calc(18px - 3px);
  pointer-events:none;

  border: 1px solid rgba(var(--rm-holo-rgb), 0.12);

  background: linear-gradient(
    180deg,
    rgba(var(--rm-holo-rgb), 0.10),
    rgba(var(--rm-holo-rgb), 0.00) 22%
  );

  box-shadow:
    0 0 0 1px rgba(var(--rm-holo-rgb), 0.08) inset,
    0 0 18px rgba(var(--rm-holo-rgb), 0.06) inset;

  z-index: 0;
}

/* OPEN: animación AAA con overshoot */
#roadmap .rm-modal-overlay.is-open .rm-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);

  animation: rm-modal-pop 520ms cubic-bezier(0.16, 1, 0.30, 1) both;
}

/* “POP” fuerte (sin cyan) */
@keyframes rm-modal-pop {
  0% {
    transform: translateY(42px) scale(0.90);
    opacity: 0;
    filter: blur(2px);
    box-shadow:
      0 0 0 rgba(var(--rm-holo-rgb), 0),
      inset 0 0 0 rgba(var(--rm-holo-rgb), 0);
  }
  60% {
    transform: translateY(-6px) scale(1.035);
    opacity: 1;
    filter: blur(0);
    box-shadow:
      0 0 34px rgba(var(--rm-holo-rgb), 0.20),
      inset 0 0 28px rgba(var(--rm-holo-rgb), 0.10);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
    box-shadow:
      0 0 26px rgba(var(--rm-holo-rgb), 0.12),
      0 50px 140px rgba(10, 15, 20, 0.70),
      inset 0 0 22px rgba(var(--rm-holo-rgb), 0.08);
  }
}

/* Accesibilidad: si el user pide menos animación */
@media (prefers-reduced-motion: reduce) {
  #roadmap .rm-modal-overlay,
  #roadmap .rm-modal {
    transition: none !important;
    animation: none !important;
  }
}

#roadmap .rm-modal-header{
  position: relative;
  z-index: 1;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding: 12px 14px;

  border-bottom: 1px solid rgba(var(--rm-holo-rgb), 0.14);

  background:
    radial-gradient(circle at 20% 0%,
      rgba(var(--rm-off-rgb), 0.08),
      rgba(var(--rm-holo-rgb), 0.06),
      transparent 58%
    );
}

#roadmap .rm-modal-title{
  font-size: 0.90rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(var(--rm-off-rgb), 0.92);
  text-shadow: 0 0 12px rgba(var(--rm-off-rgb), 0.08);
}

#roadmap .rm-modal-close{
  width:34px; height:34px;
  border-radius: 10px;

  border: 1px solid rgba(var(--rm-holo-rgb), 0.22);
  background:
    radial-gradient(140px 70px at 22% 0%,
      rgba(var(--rm-off-rgb), 0.06),
      rgba(var(--rm-off-rgb), 0.00) 62%
    ),
    linear-gradient(180deg,
      rgba(4, 60, 80, 0.22),
      rgba(10, 15, 20, 0.24)
    );

  color: rgba(var(--rm-off-rgb), 0.88);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;

  box-shadow:
    0 0 0 1px rgba(var(--rm-holo-rgb), 0.10) inset,
    0 0 18px rgba(var(--rm-holo-rgb), 0.12);

  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#roadmap .rm-modal-close:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--rm-holo-rgb), 0.40);
  box-shadow:
    0 0 0 1px rgba(var(--rm-holo-rgb), 0.12) inset,
    0 0 26px rgba(var(--rm-holo-rgb), 0.16);
}

#roadmap .rm-modal-meta{
  position: relative;
  z-index: 1;

  padding: 10px 14px 0;
  display:flex;
  align-items:center;
  gap:10px;

  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: rgba(var(--rm-off-rgb), 0.70);
  text-shadow: 0 0 10px rgba(var(--rm-off-rgb), 0.06);
}

/* body con scroll */
#roadmap .rm-modal-body{
  position: relative;
  z-index: 1;

  padding: 10px 14px 14px;
  overflow: auto;
  min-height: 0;

  display: flex;
  flex-direction: column;
  gap: var(--rm-modal-body-gap);

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--rm-off-rgb), 0.38) rgba(var(--rm-off-rgb), 0.08);
}

/* “rail” legible */
#roadmap .rm-modal-body > *{
  width: min(var(--rm-modal-content-max), 100%);
  margin-left: auto;
  margin-right: auto;
}

#roadmap .rm-modal-body p{
  margin: 0;
  line-height: 1.55;
  color: rgba(var(--rm-off-rgb), 0.84);
}

/* Chromium scrollbar */
#roadmap .rm-modal-body::-webkit-scrollbar { width: 10px; }
#roadmap .rm-modal-body::-webkit-scrollbar-thumb{
  background: linear-gradient(
    180deg,
    rgba(var(--rm-off-rgb), 0.22),
    rgba(var(--rm-off-rgb), 0.10)
  );
  border-radius: 999px;
  border: 1px solid rgba(var(--rm-off-rgb), 0.42);
  box-shadow: 0 0 16px rgba(var(--rm-off-rgb), 0.10);
}
#roadmap .rm-modal-body::-webkit-scrollbar-track{
  background: rgba(var(--rm-off-rgb), 0.06);
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(var(--rm-off-rgb), 0.06) inset,
    0 0 22px rgba(var(--rm-off-rgb), 0.04) inset;
}

/* media */
#roadmap .rm-modal-body img,
#roadmap .rm-modal-body video{
  display:block;
  width: min(var(--rm-modal-media-max-w), 100%);
  height: auto;

  max-height: var(--rm-modal-media-max-h);
  object-fit: contain;

  border-radius: 14px;
  border: 1px solid rgba(var(--rm-holo-rgb), 0.18);

  box-shadow:
    0 0 8px rgba(var(--rm-holo-rgb), 0.14),
    0 0 22px rgba(var(--rm-holo-rgb), 0.10);

  margin: 10px auto;
}

/* ===== MODAL NAV (prev/next) ===== */
#roadmap .rm-modal-navrow{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

#roadmap .rm-modal-title{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#roadmap .rm-modal-nav{
  width: 34px;
  height: 34px;
  border-radius: 10px;

  border: 1px solid rgba(var(--rm-holo-rgb), 0.20);
  background:
    radial-gradient(140px 70px at 22% 0%,
      rgba(var(--rm-off-rgb), 0.05),
      rgba(var(--rm-off-rgb), 0.00) 62%
    ),
    linear-gradient(180deg,
      rgba(4, 60, 80, 0.20),
      rgba(10, 15, 20, 0.22)
    );

  color: rgba(var(--rm-off-rgb), 0.90);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;

  box-shadow:
    0 0 0 1px rgba(var(--rm-holo-rgb), 0.10) inset,
    0 0 18px rgba(var(--rm-holo-rgb), 0.10);

  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#roadmap .rm-modal-nav:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--rm-holo-rgb), 0.42);
  box-shadow:
    0 0 0 1px rgba(var(--rm-holo-rgb), 0.12) inset,
    0 0 26px rgba(var(--rm-holo-rgb), 0.14);
}

#roadmap .rm-modal-meta-count{
  margin-left: auto;
  opacity: 0.92;
  color: rgba(var(--rm-off-rgb), 0.70);
}

/* =========================================
   FINAL LOCK (NO TOCAR)
   ROADMAP — TYPO SYSTEM (MATCH DEVLOG)
   Scope: SOLO #roadmap (cards + modal)
   ========================================= */

#roadmap{
  /* Sistema AION: Headline vs Body/UI */
  --rm-font-head: var(--font-head, "Futura", "Futura PT", system-ui, sans-serif);
  --rm-font-body: var(--font-body, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);

  /* Tracking del sistema */
  --rm-track-ui: 0.14em;     /* labels, chips, botones */
  --rm-track-body: 0.01em;   /* párrafos */
  --rm-track-title: 0.06em;  /* títulos */
  --rm-track-date: 0.12em;   /* fechas */

  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Base: todo el roadmap hereda BODY */
#roadmap,
#roadmap .rm-viewport,
#roadmap .rm-track,
#roadmap .rm-card,
#roadmap .rm-modal{
  font-family: var(--rm-font-body);
  letter-spacing: var(--rm-track-body);
}

/* UI SMALL (meta/date/status/btn) = como Devlog */
#roadmap .rm-meta,
#roadmap .rm-date,
#roadmap .rm-status,
#roadmap .rm-btn,
#roadmap .rm-modal-meta,
#roadmap .rm-modal-meta-date,
#roadmap .rm-modal-meta-status,
#roadmap .rm-modal-meta-count{
  font-family: var(--rm-font-body);
  font-weight: 400;
  text-transform: uppercase;
}

/* Tracking UI */
#roadmap .rm-meta,
#roadmap .rm-status,
#roadmap .rm-btn,
#roadmap .rm-modal-meta{
  letter-spacing: var(--rm-track-ui);
}

/* Fechas un toque menos (DEVLOG parity) */
#roadmap .rm-date,
#roadmap .rm-modal-meta-date{
  letter-spacing: var(--rm-track-date);
}

/* TITULARES = HEAD font */
#roadmap .rm-title{
  font-family: var(--rm-font-head);
  font-weight: 700;
  letter-spacing: var(--rm-track-title);
}

/* Modal header title = HEAD font */
#roadmap .rm-modal-title{
  font-family: var(--rm-font-head);
  font-weight: 700;
  /* mantenemos tu tamaño/transform actual; solo tipografía */
}

/* BODY TEXT (descripciones + contenido) */
#roadmap .rm-desc,
#roadmap .rm-more,
#roadmap .rm-more p,
#roadmap .rm-modal-body,
#roadmap .rm-modal-body p,
#roadmap .rm-modal-desc,
#roadmap .rm-modal-content{
  font-family: var(--rm-font-body);
  font-weight: 400;
  letter-spacing: var(--rm-track-body);
  text-transform: none;
}