[data-glass] {
  --mov-rapido: 0.18s;
  --mov-normal: 0.28s;
  --mov-lento: 0.42s;
  
  --mov-salida: cubic-bezier(0.32, 0.72, 0, 1);
  --mov-resorte: cubic-bezier(0.34, 1.28, 0.42, 1);
}



[data-glass] img.vs-foto {
  transform: scale(1.03);
  filter: blur(6px);
  transition:
    transform var(--mov-lento) var(--mov-salida),
    filter var(--mov-lento) var(--mov-salida);
}
[data-glass] img.vs-foto.vs-lista {
  transform: scale(1);
  filter: blur(0);
}


[data-glass] .vs-revelar {
  opacity: 0;
  transform: translateY(10px);
}
[data-glass] .vs-revelar.vs-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--mov-normal) var(--mov-salida),
    transform var(--mov-normal) var(--mov-salida);
}


@keyframes vs-entra-derecha {
  from { opacity: 0; transform: translate3d(14px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes vs-entra-izquierda {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
[data-glass] .screen.vs-entra-der { animation: vs-entra-derecha var(--mov-normal) var(--mov-salida); }
[data-glass] .screen.vs-entra-izq { animation: vs-entra-izquierda var(--mov-normal) var(--mov-salida); }


@keyframes vs-sube {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes vs-vela {
  from { opacity: 0; }
  to   { opacity: 1; }
}
[data-glass] .sheet,
[data-glass] .detail-modal,
[data-glass] .compare-modal,
[data-glass] .pm-card,
[data-glass] .pm-box {
  animation: vs-sube 0.32s var(--mov-resorte);
}
[data-glass] .modal,
[data-glass] .detail-overlay,
[data-glass] .compare-overlay,
[data-glass] .pm-backdrop,
[data-glass] .pm-overlay {
  animation: vs-vela var(--mov-normal) var(--mov-salida);
}


[data-glass] .add-btn,
[data-glass] .add-fab,
[data-glass] .checkout-btn,
[data-glass] .btn,
[data-glass] .btn-accent,
[data-glass] .hsp-btn,
[data-glass] .cart-btn,
[data-glass] .mini,
[data-glass] .chip,
[data-glass] .cat-chip,
[data-glass] .filter-pill,
[data-glass] .tab-btn,
[data-glass] .fav-btn,
[data-glass] .p-fav-btn {
  transition:
    transform var(--mov-rapido) var(--mov-resorte),
    background-color var(--mov-normal) var(--mov-salida),
    color var(--mov-normal) var(--mov-salida),
    box-shadow var(--mov-normal) var(--mov-salida),
    filter var(--mov-rapido) var(--mov-salida);
  -webkit-tap-highlight-color: transparent;
}
[data-glass] .add-btn:active,
[data-glass] .add-fab:active,
[data-glass] .checkout-btn:active,
[data-glass] .btn:active,
[data-glass] .hsp-btn:active,
[data-glass] .cart-btn:active,
[data-glass] .mini:active,
[data-glass] .fav-btn:active,
[data-glass] .p-fav-btn:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
}

[data-glass] .chip:active,
[data-glass] .cat-chip:active,
[data-glass] .filter-pill:active,
[data-glass] .tab-btn:active {
  transform: scale(0.975);
  transition-duration: 0.1s;
}


@keyframes vs-golpe {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}
[data-glass] .cart-count.vs-golpea,
[data-glass] .fc-badge.vs-golpea {
  animation: vs-golpe 0.34s var(--mov-resorte);
}


@keyframes vs-late {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
[data-glass] .fav-btn.vs-late,
[data-glass] .p-fav-btn.vs-late { animation: vs-late 0.28s var(--mov-resorte); }


@keyframes vs-barrido {
  0%   { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}
[data-glass] .sk,
[data-glass] .sk-l,
[data-glass] .skeleton {
  background-image: linear-gradient(
    100deg,
    transparent 38%,
    color-mix(in srgb, var(--text, #888) 8%, transparent) 50%,
    transparent 62%
  );
  background-size: 220% 100%;
  animation: vs-barrido 3s linear infinite;
}


[data-glass] {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h, 62px) + 12px);
}




@media (prefers-reduced-motion: reduce) {
  [data-glass] *,
  [data-glass] *::before,
  [data-glass] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  [data-glass] .vs-revelar,
  [data-glass] img.vs-foto {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  [data-glass] .sk,
  [data-glass] .sk-l,
  [data-glass] .skeleton { animation: none !important; }
}


[data-glass="lite"] .sk,
[data-glass="lite"] .sk-l,
[data-glass="lite"] .skeleton { animation: none !important; }
[data-glass="lite"] img.vs-foto { filter: none !important; }


@keyframes vs-plegable-abre {
  from { opacity: .55; transform: translateY(-8px); }
  to   { opacity: 1;   transform: none; }
}
[data-glass] .vs-pl[open] > .vs-pl-cuerpo {
  animation: vs-plegable-abre var(--mov-normal, .28s) var(--glass-spring, cubic-bezier(.34,1.28,.42,1)) both;
}

[data-glass] .vs-pl > summary .vs-pl-fl {
  transition: transform var(--mov-normal, .28s) var(--glass-spring, cubic-bezier(.34,1.28,.42,1));
}

@media (prefers-reduced-motion: reduce) {
  [data-glass] .vs-pl[open] > .vs-pl-cuerpo { animation: none; }
  [data-glass] .vs-pl > summary .vs-pl-fl { transition: none; }
}