/* Sistema de movimiento de «Entrena como CEO».
   Principios: sobrio y preciso, nunca decorativo. Solo transform y opacity (fluido en el celular).
   Todo se desactiva con «reducir movimiento» del sistema operativo. */

:root {
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);   /* frena suave, se siente caro */
  --ease-entrada: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-suave: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-corta: 240ms;
  --dur-media: 700ms;
  --dur-larga: 1100ms;
  --escalon: 70ms; /* retraso entre elementos hermanos */
}

/* ---------- Revelado al hacer scroll ---------- */
.mov .revelar {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--dur-media) var(--ease-salida),
    transform var(--dur-larga) var(--ease-salida);
  transition-delay: calc(var(--i, 0) * var(--escalon));
}
.mov .revelar.visible { opacity: 1; transform: none; }

/* Líneas que se dibujan de izquierda a derecha */
.mov .encabezado { border-bottom-color: transparent; position: relative; }
.mov .encabezado::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--linea);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-larga) var(--ease-salida) 120ms;
}
.mov .sobre-negro .encabezado::after { background: var(--linea-clara); }
.mov .encabezado.visible::after { transform: scaleX(1); }

/* ---------- Palabras que suben desde una máscara ---------- */
.mov .palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.mov .palabra > span {
  display: inline-block;
  transform: translate3d(0, 108%, 0);
  transition: transform var(--dur-larga) var(--ease-salida);
  transition-delay: calc(var(--p, 0) * 55ms + var(--retraso, 0ms));
}
.mov .enmascarado.visible .palabra > span { transform: none; }

/* ---------- La idea: las palabras se encienden una a una ---------- */
.mov .encender .palabra-luz {
  opacity: 0.14;
  transition: opacity 500ms var(--ease-suave);
  transition-delay: calc(var(--p, 0) * 32ms + 200ms);
}
.mov .encender.visible .palabra-luz { opacity: 1; }
.mov .idea { border-left-color: transparent; position: relative; }
.mov .idea::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--negro);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-larga) var(--ease-salida);
}
.mov .idea.visible::before { transform: scaleY(1); }

/* ---------- Portada ---------- */
.mov .portada__numero {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1600ms var(--ease-salida) 250ms;
  will-change: transform;
}
.mov .portada.visible .portada__numero { clip-path: inset(0 0 0 0); }
.mov .portada__barrido {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--linea-clara);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1400ms var(--ease-salida) 500ms;
}
.mov .portada.visible .portada__barrido { transform: scaleX(1); }
.mov .portada .etiqueta,
.mov .portada__sub,
.mov .portada__meta li {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--dur-media) var(--ease-salida), transform var(--dur-larga) var(--ease-salida);
}
.mov .portada.visible .etiqueta { opacity: 1; transform: none; transition-delay: 100ms; }
.mov .portada.visible .portada__sub { opacity: 1; transform: none; transition-delay: 650ms; }
.mov .portada.visible .portada__meta li { opacity: 1; transform: none; transition-delay: calc(800ms + var(--i, 0) * 90ms); }

/* ---------- Pasos de «Qué hacer»: la línea se dibuja y el número sube ---------- */
.mov .pasos > li { border-top-color: transparent; }
.mov .pasos > li::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--linea);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-larga) var(--ease-salida);
  transition-delay: calc(var(--i, 0) * var(--escalon));
}
.mov .pasos > li.visible::after { transform: scaleX(1); }

/* ---------- Tarjetas que aparecen en cascada (resultados de herramientas) ---------- */
.mov .cascada > * {
  animation: aparecer var(--dur-media) var(--ease-salida) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes aparecer {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
}

/* Cambio de paso en el asistente */
.mov .paso-entra { animation: paso-entra 520ms var(--ease-salida) both; }
.mov .paso-entra.atras { animation-name: paso-entra-atras; }
@keyframes paso-entra { from { opacity: 0; transform: translate3d(28px, 0, 0); } }
@keyframes paso-entra-atras { from { opacity: 0; transform: translate3d(-28px, 0, 0); } }
.mov .asistente__progreso .actual { position: relative; overflow: hidden; background: var(--linea); }
.mov .asistente__progreso .actual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--negro);
  transform-origin: left;
  animation: llenar 700ms var(--ease-salida) both;
}
@keyframes llenar { from { transform: scaleX(0); } }

/* Barras que crecen */
.mov .barras__relleno { transform-origin: left; }

/* Interacciones: respuesta táctil sobria */
.mov .opcion span { transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s var(--ease-salida); }
.mov .opcion:active span { transform: scale(0.97); }
.mov .boton { transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-salida); }
.mov .boton:active { transform: scale(0.98); }
.mov a.recomendado { transition: border-color 0.2s, transform 0.35s var(--ease-salida); }
.mov a.recomendado:hover { transform: translate3d(0, -2px, 0); }
.mov .recomendado__estado svg,
.mov .navegacion__titulo svg { transition: transform 0.35s var(--ease-salida); }
.mov a.recomendado:hover .recomendado__estado svg,
.mov .navegacion a:hover .navegacion__titulo svg { transform: translate3d(4px, 0, 0); }

/* ---------- Gráfico «Cómo funciona la guía»: la línea recorre los 4 pasos ---------- */
.mov .flujo ol::after { transform: scaleY(0); transition: transform 1600ms var(--ease-suave) 200ms; }
.mov .flujo.visible ol::after { transform: scaleY(1); }
@media (min-width: 720px) {
  .mov .flujo ol::after { transform: scaleX(0); }
  .mov .flujo.visible ol::after { transform: scaleX(1); }
}
.mov .flujo li { opacity: 0.25; transition: opacity 500ms var(--ease-suave); transition-delay: calc(250ms + var(--n, 0) * 420ms); }
.mov .flujo.visible li { opacity: 1; }
.mov .flujo__n { transition: background 400ms, color 400ms; transition-delay: calc(250ms + var(--n, 0) * 420ms); }
.mov .flujo.visible .flujo__n { background: var(--negro); color: var(--blanco); }

/* ---------- Las 6 partes del capítulo se encienden en orden ---------- */
.mov .estructura a { position: relative; }
.mov .estructura a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--negro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease-salida);
  transition-delay: calc(200ms + var(--n, 0) * 110ms);
}
.mov .estructura.visible a::after { transform: scaleX(1); }

/* ---------- Estudio del capítulo 10: semanas, dosis y resultados en secuencia ---------- */
.mov .linea-tiempo__fase1,
.mov .linea-tiempo__fase2 { transform: scaleX(0); }
.mov .estudio.visible .linea-tiempo__fase1 {
  transform: none;
  transition: transform 800ms var(--ease-salida);
  transition-delay: calc(300ms + var(--n, 0) * 160ms);
}
.mov .linea-tiempo__fase1 { transition: none; }
.mov .estudio.visible .grupo .linea-tiempo__fase2 {
  transform: none;
  transition: transform 1100ms var(--ease-salida);
  transition-delay: calc(1000ms + var(--n, 0) * 160ms);
}
.mov .grupo { --n: 0; }
.mov .estudio__grupos > li:nth-child(2) { --n: 1; }
.mov .estudio__grupos > li:nth-child(3) { --n: 2; }
.mov .grupo .marca--se-mantiene,
.mov .grupo .marca--casi { background-size: 0 100%; background-repeat: no-repeat; }
.mov .grupo .marca--se-mantiene { background: linear-gradient(var(--negro), var(--negro)) left / 0 100% no-repeat; }
.mov .grupo .marca--casi { background: linear-gradient(90deg, var(--negro) 50%, transparent 50%) left / 0 100% no-repeat; }
.mov .estudio.visible .grupo .marca--se-mantiene,
.mov .estudio.visible .grupo .marca--casi {
  background-size: 100% 100%;
  transition: background-size 500ms var(--ease-salida);
  transition-delay: calc(2100ms + var(--n, 0) * 160ms);
}
.mov .grupo dd { opacity: 0; transform: translate3d(6px, 0, 0); transition: opacity 500ms var(--ease-salida), transform 700ms var(--ease-salida); transition-delay: calc(1900ms + var(--n, 0) * 160ms); }
.mov .estudio.visible .grupo dd { opacity: 1; transform: none; }

/* ---------- O1: cuánto tarda un hábito. El rango se dibuja y las marcas caen en orden ---------- */
.mov .tiempo-habito__rango { transform: scaleX(0); }
.mov .tiempo-habito.visible .tiempo-habito__rango { transform: none; transition: transform 1400ms var(--ease-salida) 200ms; }
.mov .tiempo-habito__marca { opacity: 0; translate: 0 -10px; }
.mov .tiempo-habito.visible .tiempo-habito__marca { opacity: 1; translate: 0 0; transition: opacity 500ms var(--ease-salida), translate 700ms var(--ease-salida); }
.mov .tiempo-habito.visible .tiempo-habito__marca--mito { transition-delay: 500ms; }
.mov .tiempo-habito.visible .tiempo-habito__marca:not(.tiempo-habito__marca--mito):not(.tiempo-habito__marca--ejercicio) { transition-delay: 1100ms; }
.mov .tiempo-habito.visible .tiempo-habito__marca--ejercicio { transition-delay: 1450ms; }
.mov .tiempo-habito__marca--mito b { text-decoration-color: transparent; transition: text-decoration-color 400ms; }
.mov .tiempo-habito.visible .tiempo-habito__marca--mito b { text-decoration-color: currentColor; transition-delay: 900ms; }

/* ---------- O1: el registro aparece día por día y la fase de instalación se llena ---------- */
.mov .registro__grilla--entra .dia { animation: aparecer-dia 420ms var(--ease-salida) both; animation-delay: calc(var(--c, 0) * 6ms + 300ms); }
@keyframes aparecer-dia { from { opacity: 0; transform: scale(0.6); } }
.mov .cascada .instalacion__barra span { animation: llenar 1200ms var(--ease-salida) 400ms both; }

/* ---------- C1: las barras crecen par por par y los números cuentan ---------- */
.mov .estirado__barra span { transform: scaleX(0); }
.mov .estirado.visible .estirado__barra span {
  transform: none;
  transition: transform 1100ms var(--ease-salida);
  transition-delay: calc(250ms + var(--n, 0) * 280ms);
}
.mov .estirado.visible .estirado__barra:not(.estirado__barra--si) span { transition-delay: calc(450ms + var(--n, 0) * 280ms); }
.mov .estirado__barra b, .mov .estirado__barra small { opacity: 0; transition: opacity 500ms var(--ease-suave); }
.mov .estirado.visible .estirado__barra b, .mov .estirado.visible .estirado__barra small { opacity: 1; transition-delay: calc(900ms + var(--n, 0) * 280ms); }

/* ---------- T1: el anillo se arma segmento por segmento ---------- */
.mov .anillo--entra .anillo__seg { animation: segmento 520ms var(--ease-salida) both; animation-delay: calc(200ms + var(--s, 0) * 110ms); }
@keyframes segmento { from { opacity: 0; stroke-width: 2; } }
.mov .test__pregunta { transition: border-color 0.3s, transform 0.3s var(--ease-salida); }
.mov .test__pregunta--respondida { transform: translate3d(0, 0, 0); }

/* ---------- C2: la escalera se arma tramo por tramo; los valores cuentan ---------- */
.mov .escalera__minimo { opacity: 0; transform: translate3d(-12px, 0, 0); transition: opacity 600ms var(--ease-salida), transform 900ms var(--ease-salida); transition-delay: 150ms; }
.mov .escalera.visible .escalera__minimo { opacity: 1; transform: none; }
.mov .escalera__columna { transform: scaleY(0); }
.mov .escalera.visible .escalera__columna { transform: none; transition: transform 900ms var(--ease-salida); transition-delay: calc(500ms + var(--n, 0) * 220ms); }
.mov .escalera__tramo b, .mov .escalera__marca { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 500ms var(--ease-salida), transform 700ms var(--ease-salida); transition-delay: calc(800ms + var(--n, 0) * 220ms); }
.mov .escalera.visible .escalera__tramo b, .mov .escalera.visible .escalera__marca { opacity: 1; transform: none; }
.mov .escalera__tramo small { opacity: 0; transition: opacity 500ms var(--ease-suave); transition-delay: calc(400ms + var(--n, 0) * 220ms); }
.mov .escalera.visible .escalera__tramo small { opacity: 1; }
.mov .escalera__tramo--sin-datos .escalera__columna { transform: none; opacity: 0; }
.mov .escalera.visible .escalera__tramo--sin-datos .escalera__columna { opacity: 1; transition: opacity 700ms var(--ease-suave); transition-delay: calc(500ms + var(--n, 0) * 220ms); }

/* ---------- C3: la escala se llena hacia el fallo y la llave de «Series que cuentan» se dibuja ---------- */
.mov .rir__paso b { opacity: 0; transform: scale(0.72); transition: opacity 500ms var(--ease-salida), transform 800ms var(--ease-salida); transition-delay: calc(250ms + var(--n, 0) * 170ms); }
.mov .rir.visible .rir__paso b { opacity: 1; transform: none; }
.mov .rir__paso small { opacity: 0; transition: opacity 500ms var(--ease-suave); transition-delay: calc(650ms + var(--n, 0) * 170ms); }
.mov .rir.visible .rir__paso small { opacity: 1; }
.mov .rir__cuentan span { opacity: 0; transition: opacity 500ms var(--ease-suave) 1500ms; }
.mov .rir__cuentan span::after { transform: scaleX(0); transition: transform 800ms var(--ease-salida) 1200ms; }
.mov .rir.visible .rir__cuentan span { opacity: 1; }
.mov .rir.visible .rir__cuentan span::after { transform: none; }
.mov .rir__eje { opacity: 0; transition: opacity 600ms var(--ease-suave) 1700ms; }
.mov .rir.visible .rir__eje { opacity: 1; }

/* ---------- C4: la doble progresión se arma sesión por sesión ---------- */
.mov .doble__sesiones li { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 500ms var(--ease-salida), transform 700ms var(--ease-salida); transition-delay: calc(200ms + var(--n, 0) * 380ms); }
.mov .doble.visible .doble__sesiones li { opacity: 1; transform: none; }
.mov .doble__series i { transform: scaleY(0); transition: transform 700ms var(--ease-salida); transition-delay: calc(350ms + var(--n, 0) * 380ms); }
.mov .doble__series i:nth-child(2) { transition-delay: calc(420ms + var(--n, 0) * 380ms); }
.mov .doble__series i:nth-child(3) { transition-delay: calc(490ms + var(--n, 0) * 380ms); }
.mov .doble.visible .doble__series i { transform: none; }
.mov .doble__salto { opacity: 0; transform: scale(0.6); transition: opacity 400ms var(--ease-salida), transform 600ms var(--ease-salida); transition-delay: 2300ms; }
.mov .doble.visible .doble__salto { opacity: 1; transform: none; }

/* ---------- T4: las barras del volumen semanal crecen ---------- */
.mov .volumen-semanal__barras.cascada .volumen-semanal__barra { animation: crecer-y 900ms var(--ease-salida) both; animation-delay: calc(var(--i, 0) * 55ms + 100ms); }
@keyframes crecer-y { from { transform: scaleY(0); } }

/* ---------- T5: el contenido de cada pestaña entra suave ---------- */
.mov .ficha__panel--entra { animation: aparecer 420ms var(--ease-salida) both; }

/* ---------- E y O: gráficos y resultados ---------- */
.mov .cama__barra { transform: scaleX(0); transition: transform 1100ms var(--ease-salida); }
.mov .cama.visible .cama__barra--dormido { transform: none; transition-delay: 200ms; }
.mov .cama.visible .cama__barra--cama { transform: none; transition-delay: 500ms; }
.mov .punto-justo__marca { opacity: 0; transform: translate(-50%, -50%) scale(0.4); transition: opacity 500ms var(--ease-salida), transform 900ms var(--ease-salida); transition-delay: 300ms; }
.mov .punto-justo.visible .punto-justo__marca { opacity: 1; transform: translate(-50%, -50%); }
.mov .contrato--entra { animation: aparecer 800ms var(--ease-salida) both; }
.mov .semaforo--entra .luz { animation: encender 700ms var(--ease-salida) both; }
.mov .semaforo--entra .luz:nth-child(2) { animation-delay: 120ms; }
.mov .semaforo--entra .luz:nth-child(3) { animation-delay: 240ms; }
@keyframes encender { from { opacity: 0.2; transform: scale(0.6); } }
.mov .guion--entra { animation: aparecer 600ms var(--ease-salida) both; }

/* ---------- Inicio: la portada entra en capas; el método y la semana se arman en secuencia ---------- */
.mov .portada--inicio .portada__logo,
.mov .portada__lema,
.mov .portada__acciones { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity var(--dur-media) var(--ease-salida), transform var(--dur-larga) var(--ease-salida); }
.mov .portada.visible .portada__logo { opacity: 1; transform: none; transition-delay: 60ms; }
.mov .portada.visible .portada__lema { opacity: 1; transform: none; transition-delay: 800ms; }
.mov .portada.visible .portada__acciones { opacity: 1; transform: none; transition-delay: 1000ms; }
.mov .metodo__parte { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 600ms var(--ease-salida), transform 900ms var(--ease-salida); transition-delay: calc(100ms + var(--n, 0) * 160ms); }
.mov .metodo.visible .metodo__parte { opacity: 1; transform: none; }
.mov .metodo__letra { display: inline-block; transform: scale(0.6); transition: transform 900ms var(--ease-salida); transition-delay: calc(250ms + var(--n, 0) * 160ms); transform-origin: left bottom; }
.mov .metodo.visible .metodo__letra { transform: none; }
.mov .semana-guia::before { transform: scaleY(0); transition: transform 1600ms var(--ease-salida) 200ms; }
.mov .semana-guia.visible::before { transform: none; }
.mov .semana-guia li { opacity: 0; transform: translate3d(10px, 0, 0); transition: opacity 500ms var(--ease-salida), transform 700ms var(--ease-salida); transition-delay: calc(300ms + var(--n, 0) * 190ms); }
.mov .semana-guia.visible li { opacity: 1; transform: none; }

/* ---------- T3: la explicación aparece al responder ---------- */
.mov .situacion__explicacion--entra { animation: aparecer 520ms var(--ease-salida) both; }

/* ---------- B-roll: el video de la portada entra lento; las franjas, clip por clip ---------- */
.mov .portada__media video { opacity: 0; transform: scale(1.08); transition: opacity 1200ms var(--ease-suave) 100ms, transform 2600ms var(--ease-salida); }
.mov .portada.visible .portada__media video { opacity: 1; transform: none; }
.mov .franja__clip video { opacity: 0; transform: scale(1.14); transition: opacity 900ms var(--ease-suave), transform 1800ms var(--ease-salida); transition-delay: calc(var(--n, 0) * 160ms); }
.mov .franja.visible .franja__clip video { opacity: 1; transform: none; }

/* Desplegables que se abren con altura animada (JS) */
.mov details > :not(summary) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mov .revelar, .mov .palabra > span, .mov .encender .palabra-luz,
  .mov .portada .etiqueta, .mov .portada__sub, .mov .portada__meta li {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .mov .portada__numero { clip-path: none !important; }
  .mov .encabezado::after, .mov .idea::before, .mov .pasos > li::after, .mov .portada__barrido { transform: none !important; }
  .mov .cascada > *, .mov .paso-entra, .mov .asistente__progreso .actual::after { animation: none !important; }
  .mov .flujo ol::after, .mov .estructura a::after, .mov .linea-tiempo__fase1, .mov .linea-tiempo__fase2 { transform: none !important; transition: none !important; }
  .mov .flujo li, .mov .grupo dd { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mov .flujo__n { background: var(--negro) !important; color: var(--blanco) !important; }
  .mov .grupo .marca--se-mantiene, .mov .grupo .marca--casi { background-size: 100% 100% !important; transition: none !important; }
  .mov .tiempo-habito__rango, .mov .tiempo-habito__marca { transform: none !important; translate: none !important; opacity: 1 !important; transition: none !important; }
  .mov .registro__grilla--entra .dia, .mov .cascada .instalacion__barra span { animation: none !important; }
  .mov .estirado__barra span, .mov .estirado__barra b, .mov .estirado__barra small { transform: none !important; opacity: 1 !important; transition: none !important; }
  .mov .anillo--entra .anillo__seg { animation: none !important; }
  .mov .rir__paso b, .mov .rir__paso small, .mov .rir__cuentan span, .mov .rir__cuentan span::after, .mov .rir__eje { transform: none !important; opacity: 1 !important; transition: none !important; }
  .mov .situacion__explicacion--entra, .mov .ficha__panel--entra, .mov .contrato--entra, .mov .semaforo--entra .luz, .mov .guion--entra { animation: none !important; }
  .mov .cama__barra, .mov .punto-justo__marca { opacity: 1 !important; transition: none !important; }
  .mov .portada--inicio .portada__logo, .mov .portada__lema, .mov .portada__acciones, .mov .metodo__parte, .mov .metodo__letra, .mov .semana-guia li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mov .semana-guia::before { transform: none !important; }
  .mov .cama__barra { transform: none !important; }
  .mov .doble__sesiones li, .mov .doble__series i, .mov .doble__salto { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mov .volumen-semanal__barras.cascada .volumen-semanal__barra { animation: none !important; }
  .mov .portada__media video, .mov .franja__clip video { opacity: 1 !important; transform: none !important; transition: none !important; translate: none !important; }
  .mov .escalera__minimo, .mov .escalera__columna, .mov .escalera__tramo b, .mov .escalera__marca, .mov .escalera__tramo small { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* ---------- C6: los niveles entran fila por fila; las sorpresas se arman al verse ---------- */
.mov .tier__fila { opacity: 0; transform: translate3d(-18px, 0, 0); transition: opacity 600ms var(--ease-salida), transform 900ms var(--ease-salida); transition-delay: calc(150ms + var(--n, 0) * 170ms); }
.mov .tier.visible .tier__fila { opacity: 1; transform: none; }
.mov .tier__letra { transform: scale(0.55); transition: transform 900ms var(--ease-salida); transition-delay: calc(300ms + var(--n, 0) * 170ms); }
.mov .tier.visible .tier__letra { transform: none; }
.mov .tier__ejemplos i { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 500ms var(--ease-salida), transform 700ms var(--ease-salida); transition-delay: calc(550ms + var(--n, 0) * 170ms); }
.mov .tier.visible .tier__ejemplos i { opacity: 1; transform: none; }
.mov .sorpresas__barra span { transform: scaleX(0); transition: transform 1100ms var(--ease-salida) 350ms; }
.mov .sorpresas__barra + .sorpresas__barra span { transition-delay: 600ms; }
.mov .sorpresas > li.visible .sorpresas__barra span { transform: none; }
.mov .sorpresas__igual span { opacity: 0; transform: scale(0.4); transition: opacity 400ms var(--ease-salida) 450ms, transform 800ms var(--ease-salida) 450ms; }
.mov .sorpresas > li.visible .sorpresas__igual span { opacity: 1; transform: none; }
.mov .parejas__par i { transform: scale(0) rotate(-90deg); transition: transform 700ms var(--ease-salida); transition-delay: calc(250ms + var(--i, 0) * var(--escalon)); }
.mov .parejas > li.visible .parejas__par i { transform: none; }
.mov .dejar svg { transform: scale(0); transition: transform 600ms var(--ease-salida); transition-delay: calc(200ms + var(--i, 0) * var(--escalon)); }
.mov .dejar > li.visible svg { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mov .tier__fila, .mov .tier__letra, .mov .tier__ejemplos i, .mov .sorpresas__barra span, .mov .sorpresas__igual span,
  .mov .parejas__par i, .mov .dejar svg { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- C7: los puntos de la semana caen día por día; los brazos del plano se dibujan ---------- */
.mov .repartir__dia i { opacity: 0; transform: scale(0.2); transition: opacity 400ms var(--ease-salida), transform 600ms var(--ease-salida); }
.mov .repartir.visible .repartir__dia i { opacity: 1; transform: none; }
.mov .repartir__fila--antes .repartir__dia i { transition-delay: calc(200ms + var(--k, 0) * 60ms); }
.mov .repartir__fila:not(.repartir__fila--antes) .repartir__dia i { transition-delay: calc(1000ms + var(--k, 0) * 60ms); }
.mov .repartir__fila:not(.repartir__fila--antes) .repartir__dia:nth-child(5) i { transition-delay: calc(1350ms + var(--k, 0) * 60ms); }
.mov .planos__brazo { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 900ms var(--ease-salida); }
.mov .planos.visible .planos__brazo--frontal { stroke-dashoffset: 0; transition-delay: 200ms; }
.mov .planos.visible .planos__brazo--escapular { stroke-dashoffset: 0; transition-delay: 800ms; }
.mov .planos__arco, .mov .planos__grados, .mov .planos__etiqueta { opacity: 0; transition: opacity 600ms var(--ease-suave); }
.mov .planos.visible .planos__etiqueta { opacity: 1; transition-delay: 500ms; }
.mov .planos.visible .planos__arco, .mov .planos.visible .planos__grados, .mov .planos.visible .planos__etiqueta--escapular { opacity: 1; transition-delay: 1300ms; }
.mov .tres-partes__estado { opacity: 0; transform: translate3d(-8px, 0, 0); transition: opacity 500ms var(--ease-salida), transform 700ms var(--ease-salida); transition-delay: calc(350ms + var(--i, 0) * var(--escalon)); }
.mov .tres-partes > li.visible .tres-partes__estado { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mov .repartir__dia i, .mov .planos__arco, .mov .planos__grados, .mov .planos__etiqueta, .mov .tres-partes__estado { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mov .planos__brazo { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* ---------- C8: las divisiones se arman fila por fila; las barras de minutos crecen ---------- */
.mov .divisiones__sesiones i { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.9); transition: opacity 500ms var(--ease-salida), transform 700ms var(--ease-salida); transition-delay: calc(200ms + var(--n, 0) * 160ms + var(--k, 0) * 60ms); }
.mov .divisiones.visible .divisiones__sesiones i { opacity: 1; transform: none; }
.mov .minutos-series__barra span { transform: scaleX(0); transition: transform 1000ms var(--ease-salida); transition-delay: calc(250ms + var(--n, 0) * 150ms); }
.mov .minutos-series__barra span:last-child { transition-delay: calc(550ms + var(--n, 0) * 150ms); }
.mov .minutos-series.visible .minutos-series__barra span { transform: none; }
.mov .superseries-pares li { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 500ms var(--ease-salida), transform 700ms var(--ease-salida); }
.mov .minutos-series.visible .superseries-pares li { opacity: 1; transform: none; }
.mov .minutos-series.visible .superseries-pares li:nth-child(1) { transition-delay: 1100ms; }
.mov .minutos-series.visible .superseries-pares li:nth-child(2) { transition-delay: 1220ms; }
.mov .minutos-series.visible .superseries-pares li:nth-child(3) { transition-delay: 1340ms; }

@media (prefers-reduced-motion: reduce) {
  .mov .divisiones__sesiones i, .mov .minutos-series__barra span, .mov .superseries-pares li { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- C9: las barras de la balanza crecen; el año se arma programa por programa ---------- */
.mov .balanza__barras i { transform: scaleX(0); transition: transform 1000ms var(--ease-salida); transition-delay: calc(200ms + var(--n, 0) * 120ms); }
.mov .balanza__col--despues .balanza__barras i { transition-delay: calc(900ms + var(--n, 0) * 120ms); }
.mov .balanza.visible .balanza__barras i { transform: none; }
.mov .anio__programas li { opacity: 0; transform: translate3d(-14px, 0, 0); transition: opacity 600ms var(--ease-salida), transform 800ms var(--ease-salida); transition-delay: calc(150ms + var(--n, 0) * 180ms); }
.mov .anio.visible .anio__programas li { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mov .balanza__barras i, .mov .anio__programas li { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- C11: las aproximaciones crecen; la pierna baja hasta 100° ---------- */
.mov .aproximacion__barra { transform: scaleY(0); transition: transform 900ms var(--ease-salida); transition-delay: calc(200ms + var(--n, 0) * 220ms); }
.mov .aproximacion.visible .aproximacion__barra { transform: none; }
.mov .rodilla__pierna--cien { transform-box: view-box; transform-origin: 150px 60px; transform: rotate(100deg); transition: transform 1200ms var(--ease-salida) 300ms; }
.mov .rodilla.visible .rodilla__pierna--cien { transform: none; }
.mov .rodilla__arco--cien, .mov .rodilla__texto--cien { opacity: 0; transition: opacity 500ms var(--ease-suave) 1200ms; }
.mov .rodilla__pierna--fondo, .mov .rodilla__arco--fondo, .mov .rodilla__texto--fondo { opacity: 0; transition: opacity 600ms var(--ease-suave) 1700ms; }
.mov .rodilla.visible .rodilla__arco--cien, .mov .rodilla.visible .rodilla__texto--cien,
.mov .rodilla.visible .rodilla__pierna--fondo, .mov .rodilla.visible .rodilla__arco--fondo, .mov .rodilla.visible .rodilla__texto--fondo { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mov .aproximacion__barra, .mov .rodilla__pierna--cien, .mov .rodilla__arco--cien, .mov .rodilla__texto--cien,
  .mov .rodilla__pierna--fondo, .mov .rodilla__arco--fondo, .mov .rodilla__texto--fondo { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- C12: las señales suben, las bandas se llenan, los puntos aparecen y la recta se dibuja ---------- */
.mov .certezas3__nivel { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 500ms var(--ease-suave), transform 700ms var(--ease-salida); transition-delay: calc(150ms + var(--n, 0) * 200ms); }
.mov .certezas3.visible .certezas3__nivel { opacity: 1; transform: none; }
.mov .certezas3__senal i { transform: scaleY(0); transition: transform 600ms var(--ease-salida); transition-delay: calc(450ms + var(--n, 0) * 200ms + var(--k, 0) * 90ms); }
.mov .certezas3.visible .certezas3__senal i { transform: none; }
.mov .certezas3__nivel { --n: 0; }
.mov .certezas3__nivel--matiz { --n: 1; }
.mov .certezas3__nivel--no { --n: 2; }

.mov .quien__bloque:nth-of-type(1) .quien__fila:nth-of-type(2) { --q: 1; }
.mov .quien__bloque:nth-of-type(2) .quien__fila:nth-of-type(1) { --q: 2; }
.mov .quien__bloque:nth-of-type(2) .quien__fila:nth-of-type(2) { --q: 3; }
.mov .quien__banda { clip-path: inset(0 100% 0 0); transition: clip-path 1000ms var(--ease-salida); transition-delay: calc(200ms + var(--q, 0) * 220ms); }
.mov .quien.visible .quien__banda { clip-path: inset(0 0 0 0); }
.mov .quien__valor { opacity: 0; transition: opacity 400ms var(--ease-suave); transition-delay: calc(900ms + var(--q, 0) * 220ms); }
.mov .quien.visible .quien__valor { opacity: 1; }

.mov .correlacion__puntos circle { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: opacity 300ms var(--ease-suave), transform 500ms var(--ease-salida); transition-delay: calc(200ms + var(--k, 0) * 14ms); }
.mov .correlacion.visible .correlacion__puntos circle { opacity: 1; transform: none; }
.mov .correlacion__recta { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 900ms var(--ease-salida) 1450ms; }
.mov .correlacion.visible .correlacion__recta { stroke-dashoffset: 0; }
.mov .correlacion__r, .mov .correlacion__lectura li { opacity: 0; transition: opacity 500ms var(--ease-suave) 2000ms; }
.mov .correlacion__lectura li + li { transition-delay: 2250ms; }
.mov .correlacion.visible .correlacion__r, .mov .correlacion.visible .correlacion__lectura li { opacity: 1; }

/* T12: las marcas del avance se llenan y la opción elegida se hunde un instante. */
.mov .t12-avance__marcas li::after { transition: transform 520ms var(--ease-salida); }
.mov .t12-opcion--elegida { animation: t12-pulso 260ms var(--ease-salida); }
@keyframes t12-pulso { 45% { transform: scale(0.95); } }

@media (prefers-reduced-motion: reduce) {
  .mov .certezas3__nivel, .mov .certezas3__senal i, .mov .quien__banda, .mov .quien__valor,
  .mov .correlacion__puntos circle, .mov .correlacion__recta, .mov .correlacion__r, .mov .correlacion__lectura li {
    opacity: 1 !important; transform: none !important; clip-path: none !important; stroke-dashoffset: 0 !important; transition: none !important;
  }
  .mov .t12-avance__marcas li::after, .mov .t12-opcion--elegida { transition: none !important; animation: none !important; }
}

/* ---------- C13: el ejemplo de la planilla se llena celda por celda ---------- */
.mov .como-se-llena td { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 400ms var(--ease-suave), transform 500ms var(--ease-salida); transition-delay: calc(250ms + var(--c, 0) * 260ms + var(--f, 0) * 70ms); }
.mov .como-se-llena.visible td { opacity: 1; transform: none; }
.mov .como-se-llena td:nth-child(2) { --c: 0; }
.mov .como-se-llena td:nth-child(3) { --c: 1; }
.mov .como-se-llena td:nth-child(4) { --c: 2; }
.mov .como-se-llena td:nth-child(5) { --c: 3; }
.mov .como-se-llena tbody tr:nth-child(2) td { --f: 1; }
.mov .como-se-llena tbody tr:nth-child(3) td { --f: 2; }
.mov .como-se-llena tfoot td { --f: 3; }
.mov .como-se-llena__sube { transition: opacity 400ms var(--ease-suave), transform 500ms var(--ease-salida), background 600ms var(--ease-suave) !important; }
.mov .anexos-indice a { transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.35s var(--ease-salida); }
.mov .anexos-indice a:hover { transform: translate3d(0, -2px, 0); }

@media (prefers-reduced-motion: reduce) {
  .mov .como-se-llena td { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mov .anexos-indice a:hover { transform: none; }
}

/* ---------- Página de venta: «Mi plan» se llena fila por fila ---------- */
.mov .venta-plan__filas li { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 450ms var(--ease-suave), transform 600ms var(--ease-salida); transition-delay: calc(250ms + var(--n, 0) * 160ms); }
.mov .venta-plan.visible .venta-plan__filas li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mov .venta-plan__filas li { opacity: 1 !important; transform: none !important; transition: none !important; }
}