/* ===================== Roadmap / grafo del curso ===================== */
.rm-hero { margin-bottom: var(--sp-5); }
.rm-hero h1 { font-size: var(--fs-2xl); }

.rm-wrap { position: relative; width: 100%; min-height: 300px; margin-top: var(--sp-4); }
.rm-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rm-edge { fill: none; stroke: var(--c-gold-deep); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55;
  filter: drop-shadow(0 0 4px rgba(30,144,255,.4)); animation: rmDraw .9s ease forwards; }
@keyframes rmDraw { to { stroke-dashoffset: 0; } }

.rm-nodes { position: absolute; inset: 0; }

/* Cada lección = TARJETA glass con el número como "medalla" que asoma arriba.
   La tarjeta (opaca) enmascara la línea del grafo que pasa por detrás: el
   conector solo se ve en el hueco entre tarjetas. Nada de cortar texto. */
.rm-node { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 170px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center;
  padding: 1.6rem .7rem .7rem; cursor: pointer;
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-glass);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; animation: rmPop .45s ease backwards; }
@keyframes rmPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.rm-node.locked { opacity: .9; }
/* Franja de acento superior según estado */
.rm-node::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 4px 4px;
  background: var(--c-border-strong); }
.rm-node.open::before  { background: linear-gradient(90deg, transparent, var(--c-gold), transparent); }
.rm-node.done::before  { background: linear-gradient(90deg, transparent, var(--c-success), transparent); }
.rm-node:hover { transform: translate(-50%, calc(-50% - 4px)); border-color: color-mix(in srgb, var(--c-gold) 45%, var(--glass-border));
  box-shadow: var(--shadow-md), 0 0 26px rgba(37,99,235,.28); }

/* Medalla con el número/estado, mitad fuera del borde superior */
.rm-bullet { position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 1rem; border: 2px solid var(--c-border-strong);
  background: var(--glass-bg-strong); backdrop-filter: blur(6px); box-shadow: 0 3px 12px rgba(0,0,0,.35);
  transition: transform .15s, box-shadow .15s; }
.rm-node .ico { width: 1.2em; height: 1.2em; }
.rm-node.open .rm-bullet { border-color: var(--c-gold); color: var(--c-gold); box-shadow: 0 0 14px rgba(37,99,235,.45); }
.rm-node.done .rm-bullet { border-color: var(--c-success); color: var(--c-success); background: color-mix(in srgb, var(--c-success) 16%, var(--glass-bg-strong)); }
.rm-node.locked .rm-bullet { color: var(--c-text-muted); }
.rm-node:hover .rm-bullet { transform: translateX(-50%) scale(1.12); box-shadow: 0 0 20px rgba(37,99,235,.55); }

.rm-title { font-size: var(--fs-xs); color: var(--c-text); line-height: 1.3; font-weight: 600;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.rm-price, .rm-tag { font-size: .68rem; font-family: var(--font-mono); font-weight: 700; padding: .12rem .55rem; border-radius: var(--r-pill); }
.rm-price { color: var(--c-gold-soft); background: color-mix(in srgb, var(--c-gold) 12%, transparent); border: 1px solid var(--c-gold-deep); }
.rm-tag.gratis { color: var(--c-success); background: color-mix(in srgb, var(--c-success) 14%, transparent); border: 1px solid var(--c-success); }
.rm-tag.done { color: var(--c-text-muted); border: 1px solid var(--c-border); }

/* Panel */
.rm-panel-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(5px);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: var(--sp-4); }
.rm-panel-backdrop.show { display: flex; animation: rmFade .2s ease; }
@keyframes rmFade { from { opacity: 0; } to { opacity: 1; } }
.rm-panel { max-width: 480px; width: 100%; position: relative;
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border);
  border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-glass); animation: rmPanelIn .25s ease; }
@keyframes rmPanelIn { from { opacity: 0; transform: scale(.92) translateY(12px); } to { opacity: 1; transform: none; } }
.rm-panel h2 { font-size: var(--fs-xl); margin: var(--sp-3) 0; }
.rm-panel-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.rm-close { position: absolute; top: 12px; right: 12px; background: var(--c-surface-2); border: 1px solid var(--glass-border);
  color: var(--c-text); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rm-close:hover { color: var(--c-gold); border-color: var(--c-gold); }

@media (max-width: 560px) {
  .rm-node { width: 140px; padding: 1.4rem .5rem .6rem; }
  .rm-bullet { width: 40px; height: 40px; top: -20px; font-size: .9rem; }
  .rm-title { -webkit-line-clamp: 2; line-clamp: 2; }
  .rm-panel { align-self: flex-end; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}