/* v6: ciclo (lo escribe su agente) */

/* el capítulo es largo y sus tramos, cortos: cada texto llega antes a su opacidad plena y se queda más */
#ciclo .beat { opacity: min(1, calc(var(--v, 0) * 1.6)); }

/* el carbono, etapa a etapa: la lista de módulos, más grande, con jerarquía y luz en el módulo en curso */
#ciclo .beat.modulos { max-width: min(620px, 46vw); }
#ciclo .beat.modulos h3 { margin-bottom: 4px; }
#ciclo .lista-modulos { gap: 8px; margin-top: 22px; }
#ciclo .lista-modulos li {
  padding: 11px 16px 12px; border-radius: 14px; border-left-width: 3px; opacity: .4;
  transition: opacity .35s, border-color .35s, background .35s, transform .35s, box-shadow .35s;
}
#ciclo .lista-modulos li.activo {
  opacity: 1; transform: translateX(6px);
  background: linear-gradient(90deg, rgba(14, 165, 233, .22), rgba(14, 165, 233, .04) 70%, rgba(14, 165, 233, 0));
  box-shadow: inset 0 0 0 1px rgba(86, 220, 230, .16), 0 12px 36px rgba(14, 165, 233, .16);
}
#ciclo .lista-modulos li[data-m="B"].activo { border-left-color: rgba(201, 210, 227, .7); background: linear-gradient(90deg, rgba(201, 210, 227, .14), rgba(201, 210, 227, 0) 70%); }
#ciclo .lista-modulos b { font-size: clamp(18px, 1.45vw, 22px); letter-spacing: -.01em; }
#ciclo .lista-modulos span { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.42; }
#ciclo .lista-modulos li.activo b { color: #fff; }
#ciclo .lista-modulos li.activo span { color: rgba(244, 246, 250, .8); }

/* las tres reglas: numeradas, grandes y con un poco de luz */
#ciclo .beat.reglas { max-width: min(560px, 42vw); }
#ciclo .lista-reglas { gap: 20px; margin-top: 24px; counter-reset: regla; }
#ciclo .lista-reglas li { counter-increment: regla; grid-template-columns: 40px 1fr; gap: 4px 14px; align-items: start; }
#ciclo .lista-reglas li::before {
  content: counter(regla); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(86, 220, 230, .55); display: grid; place-items: center;
  font-size: 14px; font-weight: 600; color: var(--cian); box-shadow: 0 0 20px rgba(86, 220, 230, .25);
}
#ciclo .lista-reglas b { font-size: clamp(19px, 1.55vw, 24px); letter-spacing: -.01em; }
#ciclo .lista-reglas span { font-size: clamp(15px, 1.12vw, 17px); line-height: 1.42; }

@media (max-width: 760px) {
  #ciclo .beat.modulos, #ciclo .beat.reglas { max-width: none; }
  #ciclo .lista-modulos { gap: 3px; margin-top: 12px; }
  #ciclo .lista-modulos li { padding: 6px 12px; }
  #ciclo .lista-modulos li.activo { transform: none; }
  #ciclo .lista-modulos b { font-size: 16px; }
  #ciclo .lista-reglas { gap: 10px; margin-top: 14px; }
  #ciclo .lista-reglas li { grid-template-columns: 30px 1fr; gap: 2px 10px; }
  #ciclo .lista-reglas li::before { width: 24px; height: 24px; font-size: 12px; }
  #ciclo .lista-reglas b { font-size: 17px; }
}