/* Movimiento de la landing. Es una página de marketing: acá sí se puede tomar medio
   segundo para que las cosas lleguen a su lugar. Nada de esto cambia un color ni una
   medida en reposo: al terminar, cada cosa queda como la dibuja el HTML.

   Los elementos los marca animaciones.js con data-revelar (y --i para el escalonado);
   el HTML solo se oculta si ese script llegó a correr (html.anim), así que sin JS o
   sin IntersectionObserver la página se ve entera desde el principio. */

:root { --ease-salida: cubic-bezier(.23, 1, .32, 1); }

/* --- Aparecer al entrar en pantalla --- */
html.anim [data-revelar] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 500ms var(--ease-salida), transform 500ms var(--ease-salida);
  transition-delay: calc(var(--i, 0) * 60ms);
}
html.anim [data-revelar].visto { opacity: 1; transform: none; }

/* --- Respuestas del FAQ --- */
/* El + ya gira; el texto llegaba de golpe. */
@keyframes faq-abrir {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
details[open] > p { animation: faq-abrir 200ms var(--ease-salida) both; }

/* --- Botones --- */
/* Ya suben 1px al pasar por arriba; al apretar bajan 1px. */
.btn:active { transform: translateY(1px); }

/* --- Tarjetas de planes --- */
/* Se levantan 4px con el mouse arriba. Solo con puntero fino: en el celular el
   hover queda pegado después de tocar. */
@media (hover: hover) and (pointer: fine) {
  #planes [style*="grid"] > div { transition: transform 200ms var(--ease-salida); }
  #planes [style*="grid"] > div:hover { transform: translateY(-4px); }
}

/* --- Impreso --- */
/* Al imprimir no hay scroll que revele nada: va todo. */
@media print { html.anim [data-revelar] { opacity: 1; transform: none; transition: none; } }

/* --- Menos movimiento --- */
/* Se conserva el fundido, que ayuda a leer; se saca el desplazamiento y el levante. */
@media (prefers-reduced-motion: reduce) {
  html.anim [data-revelar] { transform: none; transition-duration: 200ms; transition-delay: 0ms; }
  details[open] > p { animation-duration: 1ms; }
  #planes [style*="grid"] > div:hover { transform: none; }
  .btn:active { transform: none; }
}