/* =============================================================================
   motion.css — El movimiento.

   PRINCIPIO INNEGOCIABLE: nada se esconde por defecto. Todos los realces
   viven dentro de `html.motion`, y esa clase solo la pone el JavaScript
   cuando una persona de verdad ya hizo un gesto deliberado. Sin JS, sin
   gesto, o con el sistema pidiendo menos movimiento, la página se ve
   COMPLETA y quieta. Google, WhatsApp y un lector de pantalla ven el 100 %.
   ========================================================================== */

/* --- Estado de reposo: absolutamente todo visible ------------------------- */
.reveal { opacity: 1; transform: none; }

/* --- Con JavaScript y con un gesto humano detectado ---------------------- */
.motion .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur-larga) var(--ease-entra),
    transform var(--dur-larga) var(--ease-entra);
  will-change: opacity, transform;
}
.motion .reveal.dentro {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Escalonado. Proximidad + jerarquía temporal: lo que aparece primero pesa
   más. Máximo 4 pasos: más que eso se siente lento, no elegante.            */
.motion .reveal[data-delay="1"] { transition-delay:  80ms; }
.motion .reveal[data-delay="2"] { transition-delay: 160ms; }
.motion .reveal[data-delay="3"] { transition-delay: 240ms; }
.motion .reveal[data-delay="4"] { transition-delay: 320ms; }

/* La lámina del inicio entra con un flote muy corto, no con un salto.       */
.motion .reveal--flota { transform: translateY(34px) scale(0.985); }

/* El resaltador se pinta de izquierda a derecha cuando la lista entra.      */
.motion .razon .marca {
  background-image: linear-gradient(var(--verde-hoja), var(--verde-hoja));
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size var(--dur-larga) var(--ease-entra) 140ms;
}
.motion .razon.dentro .marca { background-size: 100% 100%; }

/* --- Freno de emergencia -------------------------------------------------
   Quien pidió menos movimiento en su sistema operativo no recibe NADA de
   esto. El JavaScript ni siquiera enciende la puerta; esto es la red debajo
   de la red.                                                                */
@media (prefers-reduced-motion: reduce) {
  .motion .reveal,
  .motion .reveal.dentro,
  .motion .reveal--flota {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .motion .razon .marca {
    background-color: var(--verde-hoja) !important;
    background-image: none !important;
    background-size: auto !important;
    transition: none !important;
  }
  .btn:hover, .tarjeta:hover, .tarjeta:focus-within { transform: none !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}