/* Alternativa 2 · «Una semana en un segundo». Intermedia: el loader es el proceso en miniatura (el resaltador
   recorre los seis días mientras carga la página) y en la sección del proceso el mismo resaltador viaja con el scroll,
   con el nombre del día adentro: la línea se lee como una semana que transcurre. */

/* ================= loader ================= */
.ll2 { --ll-salida: 920ms; --out: cubic-bezier(0.22, 1, 0.36, 1); --inout: cubic-bezier(0.65, 0, 0.35, 1);
  display: grid; place-items: center; clip-path: inset(0 0 0 0);
  transition: clip-path calc(760ms * var(--vel)) var(--inout) calc(160ms * var(--vel)); }
.ll2-cuerpo { width: min(760px, 86%); transition: transform calc(420ms * var(--vel)) var(--out), opacity calc(320ms * var(--vel)) var(--out); }
.ll2-k { display: flex; align-items: center; gap: 14px; margin: 0; color: #595959;
  font: 500 11px/1 "JetBrains Mono", Consolas, monospace; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: opacity calc(480ms * var(--vel)) var(--out), transform calc(480ms * var(--vel)) var(--out); }
.ll2-k img { height: 20px; width: auto; }
.ll2-dia, .ll2-fase { margin: 0; overflow: hidden; }
.ll2-dia { --h: 1.08em; height: var(--h); margin-top: 28px; font: 600 clamp(52px, 9vw, 112px)/1.08 "Source Serif 4", Georgia, serif; letter-spacing: -0.025em; color: #111; }
.ll2-fase { --h: 1.5em; height: var(--h); margin-top: 6px; font: 400 18px/1.5 "Geist", Arial, sans-serif; color: #595959; }
.ll2-rollo { display: block; transform: translateY(calc(var(--paso, 0) * -1 * var(--h))); transition: transform calc(560ms * var(--vel)) var(--out); }
.ll2-rollo > span { display: block; height: var(--h); }
.ll2-dia .ll2-rollo { clip-path: inset(0 0 100% 0); transition: transform calc(560ms * var(--vel)) var(--out), clip-path calc(620ms * var(--vel)) var(--out) calc(120ms * var(--vel)); }
.ll2-fase .ll2-rollo { opacity: 0; transition: transform calc(560ms * var(--vel)) var(--out) calc(40ms * var(--vel)), opacity calc(400ms * var(--vel)) var(--out) calc(260ms * var(--vel)); }

.ll2-regla { position: relative; height: 52px; margin-top: 44px; }
.ll2-base, .ll2-tinta { position: absolute; left: 0; right: 0; top: 8px; transform-origin: left; }
.ll2-base { height: 1px; background: rgba(17, 17, 17, 0.14); transform: scaleX(0); transition: transform calc(900ms * var(--vel)) var(--inout); }
.ll2-tinta { height: 2px; top: 7.5px; background: #111; transform: scaleX(calc(var(--paso, 0) / 5)); transition: transform calc(560ms * var(--vel)) var(--inout); }
.ll2-regla b { position: absolute; top: 0; left: calc(var(--k) / 5 * 100%); font-weight: 400; z-index: 1;
  opacity: 0; transform: translateY(6px); transition: opacity calc(360ms * var(--vel)) var(--out) calc((200ms + var(--k) * 60ms) * var(--vel)), transform calc(460ms * var(--vel)) var(--out) calc((200ms + var(--k) * 60ms) * var(--vel)); }
.ll2-regla b i { position: absolute; left: -6px; top: 2px; width: 12px; height: 12px; background: #fff; border: 1.5px solid #111; box-sizing: border-box; transition: background-color calc(200ms * var(--vel)) ease calc(300ms * var(--vel)); }
.ll2-regla b span { position: absolute; top: 24px; left: 0; transform: translateX(-50%); white-space: nowrap; color: #595959; font: 500 11px/1 "JetBrains Mono", Consolas, monospace; letter-spacing: 0.06em; }
/* el resaltador es el cursor: un cuadrado amarillo que va de día en día */
.ll2-cursor { position: absolute; left: 0; top: 0; width: 100%; height: 18px; pointer-events: none;
  transform: translateX(calc(var(--paso, 0) / 5 * 100%)); transition: transform calc(560ms * var(--vel)) var(--inout); }
.ll2-cursor::before { content: ""; position: absolute; left: -11px; top: -3px; width: 22px; height: 22px; background: #ffe14a;
  transform: scale(0); transition: transform calc(420ms * var(--vel)) cubic-bezier(0.34, 1.56, 0.64, 1) calc(500ms * var(--vel)); }

.ll2.entra .ll2-k, .ll2.entra .ll2-regla b { opacity: 1; transform: none; }
.ll2.entra .ll2-base { transform: none; }
.ll2.entra .ll2-dia .ll2-rollo { clip-path: inset(0 0 -10% 0); }
.ll2.entra .ll2-fase .ll2-rollo { opacity: 1; }
.ll2.entra .ll2-cursor::before { transform: none; }
.ll2[data-paso="0"] b:nth-of-type(-n+1) i, .ll2[data-paso="1"] b:nth-of-type(-n+2) i, .ll2[data-paso="2"] b:nth-of-type(-n+3) i,
.ll2[data-paso="3"] b:nth-of-type(-n+4) i, .ll2[data-paso="4"] b:nth-of-type(-n+5) i, .ll2[data-paso="5"] b i { background: #111; }
.ll2:not(.entra) b i { background: #fff !important; }
/* salida: la semana sube y la hoja se abre hacia arriba, destapando la página */
.ll2.sale { clip-path: inset(0 0 100% 0); }
.ll2.sale .ll2-cuerpo { transform: translateY(-24px); opacity: 0; }
@media (max-width: 600px) { .ll2-regla b span { font-size: 10px; } .ll2-k span { letter-spacing: 0.12em; } }

/* ================= línea del proceso ================= */
/* La tinta y los cuadrados los maneja el scroll (--p y .hecho, como antes); lo nuevo es el cursor con el día adentro,
   el día actual resaltado y los que faltan todavía en gris. */
.semana[data-motion="2"]::after { transition: transform 90ms linear; }
.semana[data-motion="2"] li::before { transition: background-color 240ms ease, transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.semana[data-motion="2"] li.actual::before { transform: scale(1.25); }
.semana[data-motion="2"] .ml-d { position: relative; isolation: isolate; }
.semana[data-motion="2"] .ml-d > span { opacity: 0.45; transition: opacity 320ms ease; }   /* #111 al 45 % sobre blanco: 3,3:1, pasa AA de texto grande */
.semana[data-motion="2"] li.hecho .ml-d > span { opacity: 1; }
.semana[data-motion="2"] .ml-d::before { content: ""; position: absolute; z-index: -1; left: -0.06em; right: -0.06em; bottom: 0.08em; height: 0.42em;
  background: var(--resaltador); transform: scaleX(0); transform-origin: left; transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.semana[data-motion="2"] li.actual .ml-d::before { transform: none; }
.semana[data-motion="2"] li p { transition: color 320ms ease; }
.semana[data-motion="2"] li.actual p { color: var(--tinta); }
.ml-cursor { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap;
  padding: 5px 9px; background: var(--resaltador); color: var(--tinta); box-shadow: 0 6px 16px -8px rgb(17 17 17 / 0.45);
  font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.ml-cursor.compacto { padding: 0; width: 14px; height: 14px; font-size: 0; }