@keyframes rueda { 60% { transform: translateY(9px); opacity: 0; } }
@keyframes salto { 40% { transform: scale(1.35) rotate(-8deg); } }
@keyframes latido { 50% { box-shadow: 0 0 0 8px transparent; } }
@keyframes entra { from { opacity: 0; transform: translateY(18px) scale(0.97); } }

.pista i::after { animation: rueda 1.4s ease-in-out infinite; }
.insignia-punto { animation: latido 2s ease-in-out infinite; }
.boton-carrito.salta b { animation: salto 450ms var(--ease-rebote); }

.con-js .reveal { opacity: 0; transform: translateY(28px); }
.reveal { transition: opacity 700ms var(--ease-estudio), transform 700ms var(--ease-estudio); transition-delay: var(--retraso, 0ms); }
.con-js .reveal.visible { opacity: 1; transform: none; }

.boton { transition: background var(--dur-rapida), transform var(--dur-base) var(--ease-estudio), box-shadow var(--dur-base) var(--ease-estudio); }
.boton::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms var(--ease-suave); }
.boton:hover { transform: translateY(-3px); box-shadow: var(--boton-brillo), 0 16px 30px rgba(109, 74, 255, 0.36); }
.boton:hover::after { transform: translateX(120%); }
.boton:active { transform: translateY(0) scale(0.98); }
.boton-vidrio:hover { box-shadow: var(--boton-brillo), var(--sombra-hover); }
.boton.ok { background: color-mix(in srgb, var(--cat-fidgets) 85%, transparent); color: var(--color-tinta); }

.nav-links a { transition: background var(--dur-rapida); }
.nav-links a:hover { background: var(--color-superficie); }


.producto { transition: transform var(--dur-lenta) var(--ease-estudio), box-shadow var(--dur-lenta) var(--ease-estudio), opacity var(--dur-base); }
.producto:nth-child(odd):hover { transform: translateY(-8px) rotate(-1.2deg); }
.producto:nth-child(even):hover { transform: translateY(-8px) rotate(1.2deg); }
.producto:hover { box-shadow: var(--sombra-hover), var(--sombra-acento); }
.producto-foto { transition: background-color var(--dur-lenta) var(--ease-estudio); }
.producto-foto img, .producto-foto .icono-producto { transition: transform 700ms var(--ease-estudio); }
.producto:hover .producto-foto img { transform: scale(1.06); }
.producto:hover .icono-producto { transform: scale(1.1) rotate(-6deg); }
.producto.entra { animation: entra 500ms var(--ease-estudio) backwards; animation-delay: calc(var(--i, 0) * 45ms); }

.filtro { transition: background var(--dur-rapida), border-color var(--dur-rapida), transform var(--dur-base) var(--ease-rebote); }
.filtro:hover { transform: translateY(-2px); }
.color { transition: transform var(--dur-base) var(--ease-rebote), box-shadow var(--dur-rapida); }
.color:hover { transform: scale(1.15); }

.envio, .testimonio { transition: transform var(--dur-lenta) var(--ease-estudio), box-shadow var(--dur-lenta) var(--ease-estudio); }
.envio:hover, .testimonio:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }

@keyframes ilu-latido { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18) translateY(-4px); } 60% { transform: scale(0.96); } }
@keyframes ilu-titila { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: 0.3; transform: scale(0.6) rotate(45deg); } }
@keyframes ilu-viaje { 0% { transform: translateX(0); } 45% { transform: translateX(10px) rotate(-2deg); } 70% { transform: translateX(6px); } 100% { transform: translateX(0); } }
@keyframes ilu-viento { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -40; } }
@keyframes ilu-tarjeta { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-14px, -10px) rotate(-10deg); } 100% { transform: translate(0, 0) rotate(0); } }
@keyframes ilu-tilde { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes ilu-salto { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-12px) rotate(-3deg); } 55% { transform: translateY(0) rotate(2deg); } 70% { transform: translateY(-4px); } }
@keyframes ilu-tapa { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-8px) rotate(-8deg); } }
@keyframes ilu-confeti { 0% { transform: translateY(6px) scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-14px) scale(1); opacity: 0; } }

.paso { transition: transform var(--dur-lenta) var(--ease-estudio), box-shadow var(--dur-lenta) var(--ease-estudio), border-color var(--dur-base); }
.paso:hover { transform: translateY(-8px); box-shadow: var(--sombra-hover), var(--sombra-acento); border-color: color-mix(in srgb, var(--c) 60%, var(--color-borde)); }
.paso-ilu svg * { transform-box: fill-box; transform-origin: center; }
.ilu-bolsa, .ilu-celu { transition: transform var(--dur-lenta) var(--ease-rebote); }
.paso:hover .ilu-bolsa { transform: rotate(-4deg) scale(1.03); }
.paso:hover .ilu-corazon { animation: ilu-latido 900ms var(--ease-suave) infinite; }
.paso:hover .ilu-brillo { animation: ilu-titila 1.1s ease-in-out infinite; }
.paso:hover .ilu-brillo-2 { animation-delay: 300ms; }
.paso:hover .ilu-caja { animation: ilu-viaje 1.2s var(--ease-suave) infinite; }
.ilu-lineas path { stroke-dasharray: 10 10; }
.paso:hover .ilu-lineas path { animation: ilu-viento 600ms linear infinite; }
.paso:hover .ilu-celu { transform: translateY(-4px); }
.paso:hover .ilu-tarjeta { animation: ilu-tarjeta 1.4s var(--ease-estudio) infinite; }
.ilu-tilde { stroke: var(--color-tinta); stroke-dasharray: 30; }
.paso:hover .ilu-tilde { animation: ilu-tilde 700ms var(--ease-suave) both; }
.paso:hover .ilu-regalo { animation: ilu-salto 1.1s var(--ease-suave) infinite; transform-origin: center bottom; }
.paso:hover .ilu-tapa { animation: ilu-tapa 1.1s var(--ease-suave) infinite; }
.ilu-confeti { opacity: 0; }
.paso:hover .ilu-confeti { animation: ilu-confeti 1.1s ease-out infinite; }
.paso:hover .ilu-confeti-2 { animation-delay: 200ms; }
.paso:hover .ilu-confeti-3 { animation-delay: 400ms; }
.ilu-sombra { transition: transform var(--dur-lenta) var(--ease-estudio); }
.paso:hover .ilu-sombra { transform: scaleX(0.85); }

.faq-respuesta { transition: max-height var(--dur-lenta) var(--ease-estudio); }
.faq-signo { transition: transform var(--dur-base) var(--ease-estudio), background var(--dur-rapida); }
.faq-signo::after { transition: transform var(--dur-base) var(--ease-estudio); }
.faq-item button[aria-expanded="true"] .faq-signo { transform: rotate(180deg); background: var(--cat-clickers); }
.faq-item button[aria-expanded="true"] .faq-signo::after { transform: rotate(0deg); }
.faq-item button:hover .faq-signo { background: var(--cat-clickers); }

.carrito { transition: transform var(--dur-lenta) var(--ease-estudio), visibility 0s linear var(--dur-lenta); }
.carrito.abierto { transition: transform var(--dur-lenta) var(--ease-estudio), visibility 0s; }
.item { animation: entra 350ms var(--ease-estudio) backwards; }
.toast { transition: transform var(--dur-lenta) var(--ease-rebote), opacity var(--dur-base); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pista i::after, .insignia-punto, .boton-carrito.salta b, .producto.entra, .item { animation: none; }
  .con-js .reveal { opacity: 1; transform: none; transition: none; }
  .boton::after { display: none; }
  .producto:hover, .paso:hover, .envio:hover, .testimonio:hover { transform: none; }
  .paso:hover * { animation: none !important; }
  .ilu-confeti { opacity: 1; }
  body { transition: none; }
}

@keyframes detalle-entra { from { opacity: 0; transform: scale(0.9) translateY(12px); } }
@keyframes hoja-entra { from { transform: translateY(100%); } }
@keyframes fundido { from { opacity: 0; } }
.detalle[open] { animation: detalle-entra 420ms var(--ease-estudio); transform-origin: var(--origen-x, 50%) var(--origen-y, 50%); }
.detalle[open]::backdrop, .visor[open] { animation: fundido 300ms var(--ease-suave); }
.detalle-foto img, .relacionado img { transition: transform 600ms var(--ease-estudio); }
.detalle-foto:hover img { transform: scale(1.04); }
.relacionado:hover img { transform: scale(1.05); }
.relacionado:hover strong { color: var(--color-primario-hover); }
@media (max-width: 760px) { .detalle[open] { animation: hoja-entra 420ms var(--ease-estudio); } }
@media (prefers-reduced-motion: reduce) { .detalle[open], .detalle[open]::backdrop, .visor[open] { animation: none; } }