/* ---------- Puntos de etapas (aside izquierdo) ---------- */
.rail-nav { flex: 1; min-height: 0; display: grid; align-items: center; justify-items: center; width: 100%; }
.rail-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2px, .9vh, 9px); position: relative; justify-items: center; }
.rail-nav ol::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1px; background: var(--line); transform: translateX(-.5px); }
.rail-fill { position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1px; transform: translateX(-.5px) scaleY(0); transform-origin: top; background: linear-gradient(var(--sky), var(--mint)); box-shadow: 0 0 8px var(--sky); transition: transform var(--d3) var(--ease); }
.rail-dot { position: relative; display: grid; place-items: center; width: 34px; height: clamp(16px, 3.3vh, 28px); text-decoration: none; border-radius: 10px; }
.rail-dot .dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 55%, var(--card)); border: 1px solid var(--line-2); transition: transform var(--d2) var(--ease), background-color var(--d2) var(--ease), box-shadow var(--d2) var(--ease), width var(--d2) var(--ease), height var(--d2) var(--ease); }
.rail-dot:hover .dot,
.rail-dot:focus-visible .dot { transform: scale(1.5); border-color: var(--accent); }
.rail-dot.is-done .dot { background: var(--mint); border-color: transparent; box-shadow: 0 0 9px color-mix(in srgb, var(--mint) 70%, transparent); }
.rail-dot.is-active .dot { width: 13px; height: 13px; background: var(--sky); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sky) 20%, transparent), 0 0 20px var(--sky); }
.rail-dot.is-active .dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--sky); opacity: 0; animation: dot-ring 3.6s ease-out infinite; }
@keyframes dot-ring { 0% { opacity: .8; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.5); } }
.rail-tip { position: absolute; left: calc(100% + 16px); top: 50%; z-index: 6; width: 268px; display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--card) 96%, transparent); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .85); text-align: left; opacity: 0; pointer-events: none; transform: translate(-10px, -50%); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.rail-tip b { font-size: 13.5px; color: var(--strong); letter-spacing: -.02em; }
.rail-tip span { display: block; font-size: 12px; line-height: 1.45; color: var(--text); font-weight: 500; }
.rail-tip em { display: block; font: 600 9px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.rail-tip .y em { color: var(--accent); }
.rail-dot:hover .rail-tip,
.rail-dot:focus-visible .rail-tip,
.rail-cta:hover .rail-tip,
.rail-cta:focus-visible .rail-tip { opacity: 1; transform: translate(0, -50%); }
button.rail-dot { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.rail-tip--right { width: auto; white-space: nowrap; padding: 8px 12px; font: 600 12px/1.2 var(--font); color: var(--strong); }

/* ---------- Aside izquierdo: el nuevo «encabezado». Logo, etapas (puntos) y herramientas ---------- */
.rail { position: fixed; left: 10px; top: 12px; bottom: 12px; width: 68px; z-index: 48; display: none; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px 0 14px; border-radius: 24px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 58%, transparent); box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .85); opacity: 0; transition: opacity .5s var(--ease) .12s; }
.rail.is-on { opacity: 1; }
.rail-logo,
.logo-fab { display: block; width: 44px; height: 44px; border-radius: 22%; flex: none; box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .8); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.rail-logo .logo,
.logo-fab .logo { width: 100%; height: 100%; }
.rail-logo:hover,
.logo-fab:hover { transform: scale(1.06) rotate(-3deg); }
.rail-logo { opacity: 0; transform: translateY(-10px) scale(.85); pointer-events: none; }
.past-hero .rail-logo { opacity: 1; transform: none; pointer-events: auto; }
.rail-foot { display: grid; gap: 8px; justify-items: center; flex: none; }
.rail-count { margin: 0 0 6px; display: grid; justify-items: center; gap: 2px; text-align: center; line-height: 1; }
.rail-count b { font: 700 13px/1 var(--mono); color: var(--strong); letter-spacing: .04em; }
.rail-count small { font: 500 8.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); max-width: 62px; }
.rail-foot .icon-btn { width: 40px; height: 40px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .28s, color .28s; position: relative; }
.past-hero .rail-foot .icon-btn { opacity: 1; transform: none; pointer-events: auto; }
.rail-cta { background: var(--btn-bg); color: var(--btn-ink); border-color: transparent; }
.rail-cta:hover { background: var(--btn-hover); color: var(--btn-ink); }
.rail-cta .rail-tip { left: calc(100% + 14px); }
@media (min-width: 1180px) and (min-height: 600px) {
  .rail:not([hidden]) { display: flex; }
}
@media (max-height: 640px) {
  .rail-count small { display: none; }
  .rail-foot { gap: 6px; }
  .rail-foot .icon-btn { width: 36px; height: 36px; }
}

/* Logo suelto (sin texto) cuando no hay riel: pantallas chicas */
.logo-fab { position: fixed; left: 12px; top: max(12px, env(safe-area-inset-top)); z-index: 62; display: none; opacity: 0; transform: scale(.8); pointer-events: none; }
@media (max-width: 1179px), (max-height: 599px) {
  .logo-fab { display: block; }
  .past-hero .logo-fab { opacity: 1; transform: none; pointer-events: auto; }
}

/* Aside izquierdo: etapas en puntos, sin imágenes */
.rail--creator { position: fixed; left: max(12px, calc(50% - 780px + 14px)); top: 50%; transform: translateY(-50%); z-index: 40; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0 14px; border-radius: 24px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 58%, transparent); box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .85); }
.rail--creator .rail-nav ol { gap: clamp(16px, 4vh, 34px); }
.rail--creator .rail-dot { height: 30px; }
.rail-count { margin: 0; display: grid; justify-items: center; gap: 2px; text-align: center; line-height: 1; }
.rail-count b { font: 700 13px/1 var(--mono); color: var(--strong); letter-spacing: .04em; }
.rail-count small { font: 500 8.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); max-width: 54px; }
@media (max-width: 1180px), (max-height: 640px) {
  .rail { display: none; }
}
@media (max-width: 1180px), (max-height: 640px) {
  .rail--creator { display: none; }
}