/* MM Sonido - estilos complementarios a Tailwind */
html { scroll-behavior: smooth; scroll-padding-top: 9rem; }
body { -webkit-tap-highlight-color: transparent; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: #3a3a44; border-radius: 6px; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.skeleton { background: linear-gradient(90deg, #1e1e24 25%, #26262e 50%, #1e1e24 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.badge-bump { animation: bump .4s ease; }
@keyframes bump { 50% { transform: scale(1.35); } }

select.mm-select {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23918c8c' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem;
}

input[type=number].no-spin::-webkit-outer-spin-button,
input[type=number].no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number].no-spin { -moz-appearance: textfield; }

/* Fondo de precarga de imágenes de productos (logo MM) */
.ph-bg {
    background-color: #1e1e24;
    background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .06) 50%, transparent 65%), url("../img/placeholder.png");
    background-size: 250% 100%, 62% auto;
    background-position: 120% 0, center;
    background-repeat: no-repeat;
    animation: ph-shine 1.8s ease-in-out infinite;
}
@keyframes ph-shine { to { background-position: -20% 0, center; } }
.ph-bg.is-loaded { animation: none; background-image: none; }
/* Cuando el producto no tiene foto (o falla), se muestra el logo entero, sin recortar */
img[src*="img/placeholder.png"] { object-fit: contain !important; padding: 19%; background-color: #1e1e24; }

/* Hero */
.hero-slide { opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide img { transform: scale(1.08); transition: transform 7s ease-out; }
.hero-slide.is-active img { transform: scale(1); }
.hero-slide .hero-copy > * { opacity: 0; transform: translateY(18px); transition: all .7s ease .3s; }
.hero-slide.is-active .hero-copy > * { opacity: 1; transform: none; }

/* Marcas */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { animation: marquee 35s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Zoom de la imagen de producto */
.zoom-box { cursor: zoom-in; }
.zoom-box img { transition: transform .2s ease; }
.zoom-box.is-zoom img { transform: scale(2); }
.zoom-box.is-zoom { cursor: zoom-out; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}