/* ==========================================================================
   CAPA «FLUIDO» — las animaciones de Movimiento, rehechas para Ilustrado (Candidato 1).
   Todo entra con la misma curva suave; nada rebota de más; lo que se anima es solo
   opacidad y posición (no hace saltar la página). «Reducir movimiento» lo apaga todo.
   Las entradas usan `animation-fill-mode: backwards`: al terminar, el elemento vuelve a sus
   estilos normales y los efectos al pasar el mouse de Ilustrado siguen funcionando.
   ========================================================================== */
html[data-anim="fluido"] { --suave: cubic-bezier(0.22, 0.68, 0.18, 1); }

@keyframes fl-sube { from { opacity: 0; transform: translateY(26px); } }
@keyframes fl-aparece { from { opacity: 0; transform: translateY(14px) scale(0.94); } }
@keyframes fl-palabra { from { opacity: 0; transform: translateY(0.5em); filter: blur(6px); } }
@keyframes fl-tarjeta { from { opacity: 0; transform: translateY(28px) scale(0.97); } }
@keyframes fl-ficha { from { opacity: 0; transform: translateX(-18px); } }
@keyframes fl-cinta { to { transform: translateX(-50%); } }

/* --- portada: la tarjeta sube, el título entra palabra por palabra, la foto se acerca --- */
html[data-anim="fluido"] .hero-slider .slide { transform: scale(1.06); transition: opacity 1s ease, transform 8s ease-out; }
html[data-anim="fluido"] .hero-slider .slide.active { transform: scale(1); }
html[data-anim="fluido"] .slide.active .slide-content { animation: fl-tarjeta 0.9s var(--suave) 0.1s backwards; }
html[data-anim="fluido"] .mv-palabra { display: inline-block; }
html[data-anim="fluido"] .slide.active .mv-palabra { animation: fl-palabra 0.75s var(--suave) backwards; animation-delay: calc(var(--i) * 80ms + 350ms); }
html[data-anim="fluido"] .slide.active .slide-subtitle { animation: fl-sube 0.8s var(--suave) 0.65s backwards; }
html[data-anim="fluido"] .slide.active .btn { animation: fl-sube 0.8s var(--suave) 0.8s backwards; }

/* --- lo que aparece al bajar: oculto solo hasta que el script lo ve en pantalla --- */
html[data-anim="fluido"] .fl:not(.fl-visto) { opacity: 0; }
html[data-anim="fluido"] .fl.fl-visto { animation: fl-sube 0.85s var(--suave) backwards; animation-delay: calc(var(--i, 0) * 75ms); }

/* beneficios: las fichas entran de a una desde la izquierda */
html[data-anim="fluido"] .feature-item.fl.fl-visto { animation-name: fl-ficha; }
html[data-anim="fluido"] .feature-item.fl-visto .feature-icon { animation: fl-aparece 0.7s var(--suave) backwards; animation-delay: calc(var(--i, 0) * 75ms + 250ms); }

/* paneles de tratamiento: el panel sube y después sus fotos se asoman una tras otra */
html[data-anim="fluido"] .ama-panel.fl-visto .ama-panel__icono { animation: fl-aparece 0.7s var(--suave) backwards; animation-delay: calc(var(--i, 0) * 75ms + 200ms); }
html[data-anim="fluido"] .ama-panel.fl-visto .ama-panel__foto { animation: fl-aparece 0.75s var(--suave) backwards; }
html[data-anim="fluido"] .ama-panel.fl-visto .ama-panel__foto--3 { animation-delay: calc(var(--i, 0) * 75ms + 260ms); }
html[data-anim="fluido"] .ama-panel.fl-visto .ama-panel__foto--2 { animation-delay: calc(var(--i, 0) * 75ms + 340ms); }
html[data-anim="fluido"] .ama-panel.fl-visto .ama-panel__foto--1 { animation-delay: calc(var(--i, 0) * 75ms + 420ms); }
html[data-anim="fluido"] .ama-panel { transition: transform 0.45s var(--suave); }
html[data-anim="fluido"] .ama-panel:hover { transform: translateY(-4px); }

/* títulos: una línea de la marca se dibuja debajo */
html[data-anim="fluido"] .section-title.fl::after {
  content: ""; display: block; width: 0; height: 3px; margin-top: 12px; border-radius: 3px; background: var(--color-brand);
  transition: width 0.9s var(--suave) 0.3s;
}
html[data-anim="fluido"] .text-center > .section-title.fl::after, html[data-anim="fluido"] .ama-marcas__cab .section-title.fl::after, html[data-anim="fluido"] .ama-resenas__cab .section-title.fl::after,
html[data-anim="fluido"] section.bg-\[\#1a1a2e\] .section-title.fl::after { margin-left: auto; margin-right: auto; }
html[data-anim="fluido"] .section-title.fl-visto::after { width: 44px; }

/* tarjetas de producto y blog: suben escalonadas; la foto se acerca al pasar el mouse */
html[data-anim="fluido"] .pcard img { transition: transform 0.6s var(--suave); }
html[data-anim="fluido"] .pcard:hover img { transform: scale(1.06); }
html[data-anim="fluido"] .pcard { transition: box-shadow 0.4s var(--suave), transform 0.4s var(--suave) !important; }
html[data-anim="fluido"] .pcard:hover { transform: translateY(-4px) !important; }

/* opiniones: la tarjeta entra y las comillas aparecen */
html[data-anim="fluido"] #testiSlider.fl-visto > div::before { animation: fl-aparece 0.8s var(--suave) 0.3s backwards; }

/* blog: en el celular la fila se desliza de costado, así que entra la fila entera y sus
   tarjetas se escalonan solas */
html[data-anim="fluido"] .blog-scroller.fl.fl-visto { animation: none; }
html[data-anim="fluido"] .blog-scroller.fl-visto > article { animation: fl-sube 0.85s var(--suave) backwards; }
html[data-anim="fluido"] .blog-scroller.fl-visto > article:nth-child(2) { animation-delay: 90ms; }
html[data-anim="fluido"] .blog-scroller.fl-visto > article:nth-child(3) { animation-delay: 180ms; }

/* portada: el logo entra suave */
html[data-anim="fluido"] .slide.active .slide-title--logo img { animation: fl-aparece 0.9s var(--suave) 0.3s backwards; }

/* cifras: cada ficha sube (el número ya cuenta solo) */
html[data-anim="fluido"] .ama-cifra.fl.fl-visto { animation-name: fl-aparece; }

/* cinta de fotos: se desliza sola y se frena al pasar el mouse */
html[data-anim="fluido"] .mv-cinta { display: flex !important; width: max-content; animation: fl-cinta 45s linear infinite; }
html[data-anim="fluido"] .mv-cinta > a { width: clamp(150px, 16vw, 250px); flex: none; }
html[data-anim="fluido"] .mv-cinta:hover, html[data-anim="fluido"] .mv-cinta.ama-quieto { animation-play-state: paused; }
html[data-anim="fluido"] section:has(> .mv-cinta) { overflow: hidden; }

/* botones: un empujoncito al pasar el mouse */
html[data-anim="fluido"] .btn { transition: transform 0.3s var(--suave), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
html[data-anim="fluido"] .btn:hover { transform: translateY(-2px); }
html[data-anim="fluido"] .btn:active { transform: translateY(0) scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  html[data-anim="fluido"] *, html[data-anim="fluido"] *::before, html[data-anim="fluido"] *::after { animation: none !important; transition: none !important; }
  html[data-anim="fluido"] .fl:not(.fl-visto) { opacity: 1; }
  html[data-anim="fluido"] .hero-slider .slide { transform: none; }
  html[data-anim="fluido"] .section-title.fl::after { width: 44px; }
  html[data-anim="fluido"] .ama-panel:hover, html[data-anim="fluido"] .pcard:hover, html[data-anim="fluido"] .btn:hover { transform: none !important; }
}