/* FILOK — estilos propios (lo que Tailwind no resuelve solo). */
:root { --marfil:#FAF9F6; --grafito:#1E2530; --menta:#7ACFC3; --durazno:#FFB870; --lavanda:#A9A2EB; --lavanda-suave:#F1EDF9; }
html { scroll-behavior:smooth; }
body { background:var(--marfil); color:var(--grafito); font-family:'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }

/* Flotacion suave: cada pieza con su propia duracion y demora (no se mueven todas juntas) */
@keyframes flotar { 0%,100% { transform:translateY(0) rotate(var(--rot,0deg)); } 50% { transform:translateY(var(--sube,-10px)) rotate(var(--rot,0deg)); } }
.flota { animation:flotar var(--dur,6s) ease-in-out var(--delay,0s) infinite; will-change:transform; }
.pieza { position:absolute; transition:transform .45s cubic-bezier(.2,.8,.2,1), filter .45s, z-index 0s; }
.pieza:hover, .pieza:focus-visible { z-index:30; }
.pieza:hover .flota, .pieza:focus-visible .flota { animation-play-state:paused; }
.pieza .marco { transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
@media (hover:hover) {
  .pieza:hover .marco { transform:translateY(-8px) scale(1.05); box-shadow:0 26px 50px -18px rgba(30,37,48,.45); }
}

/* Mystery: el pixelado se mantiene SIEMPRE (tambien al agrandar o al pasar el mouse) */
.pixel { image-rendering:pixelated; image-rendering:crisp-edges; }
.mystery-fondo { background:radial-gradient(1200px 500px at 70% 10%, #E7E0FA 0%, var(--lavanda-suave) 55%, #F6F3FC 100%); }
.deco { position:absolute; color:var(--lavanda); opacity:.55; font-weight:800; user-select:none; pointer-events:none; }

/* Fotos de producto: siempre enteras y centradas (object-fit: contain) */
.foto-prod { object-fit:contain; width:100%; height:100%; }

.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); opacity:0; transition:all .35s; z-index:60; }
.toast.ver { opacity:1; transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .flota { animation:none !important; }
  .pieza .marco, .pieza { transition:none !important; }
}