/* Pulso Vinanti: movimiento opt-in, accesible y sin dependencias. */

.motion-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.motion-word {
  display: inline-block;
  opacity: 0;
  filter: blur(var(--motion-word-blur, 6px));
  white-space: pre;
  transform: translateY(var(--motion-word-distance, 14px));
  will-change: opacity, filter, transform;
}

.is-motion-visible .motion-word,
.motion-words.is-motion-visible .motion-word {
  animation: vinanti-word-reveal 600ms cubic-bezier(.2, .75, .25, 1) forwards;
  animation-delay: calc(var(--motion-index) * var(--motion-word-stagger, 60ms));
}

.motion-words--quote {
  --motion-word-blur: 4px;
  --motion-word-distance: 10px;
  --motion-word-stagger: 45ms;
}

.motion-sequence > :not([data-campaign-title]) {
  opacity: 0;
  transform: translateY(10px);
}

.motion-sequence.is-motion-visible > :not([data-campaign-title]) {
  animation: vinanti-support-reveal 480ms cubic-bezier(.2, .75, .25, 1) forwards;
}

.motion-sequence.is-motion-visible > [data-campaign-label] { animation-delay: 40ms; }
.motion-sequence.is-motion-visible > [data-campaign-text] { animation-delay: 520ms; }
.motion-sequence.is-motion-visible > [data-campaign-cta] { animation-delay: 620ms; }

@keyframes vinanti-word-reveal {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes vinanti-support-reveal {
  to { opacity: 1; transform: translateY(0); }
}

.motion-petal {
  --motion-petal-fill: var(--vinanti-vino, #8e3a54);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.motion-petal::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 1.05rem;
  width: .55rem;
  height: .55rem;
  background: var(--vinanti-ambar, #c98a52);
  border-radius: 50% 45% 52% 48%;
  content: '';
  transform: translateY(-50%) scale(1) rotate(12deg);
  transition: background 380ms ease, transform 380ms cubic-bezier(.2, .8, .2, 1);
}

.motion-petal__label,
.motion-petal__arrow {
  position: relative;
  z-index: 1;
}

.motion-petal__label { margin-left: .8rem; }
.motion-petal__arrow { transition: transform 240ms ease; }

.motion-petal:hover::before,
.motion-petal:focus-visible::before {
  background: var(--motion-petal-fill);
  transform: translateY(-50%) scale(48) rotate(12deg);
}

.motion-petal:hover,
.motion-petal:focus-visible { color: #fff; }

.motion-petal:hover .motion-petal__arrow,
.motion-petal:focus-visible .motion-petal__arrow { transform: translateX(4px); }

.may-button--primary.motion-petal {
  --motion-petal-fill: var(--vinanti-tinta, #2d1b2e);
}

.btn-agregar,
.pmodal-btn-primary,
.catalog-filter-trigger,
.btn-cantidad,
#btn-aplicar-codigo,
.may-tab,
.carousel-arrow,
.motion-petal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --motion-ripple-color: rgba(142, 58, 84, .22);
}

.btn-agregar,
.pmodal-btn-primary,
.motion-petal,
#btn-aplicar-codigo { --motion-ripple-color: rgba(255, 255, 255, .36); }

.btn-agregar:active:not(:disabled),
.pmodal-btn-primary:active:not(:disabled),
.catalog-filter-trigger:active:not(:disabled),
.btn-cantidad:active:not(:disabled),
#btn-aplicar-codigo:active:not(:disabled),
.may-tab:active:not(:disabled),
.carousel-arrow:active:not(:disabled),
.motion-petal:active { transform: scale(.97); }

.motion-ripple {
  position: absolute;
  z-index: 3;
  background: var(--motion-ripple-color);
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  animation: vinanti-ripple 420ms ease-out forwards;
}

@keyframes vinanti-ripple {
  to { opacity: 0; transform: scale(1); }
}

.editorial-card__content b > [aria-hidden],
.commercial-path__content b > i {
  display: inline-block;
  transition: transform 220ms ease;
}

.editorial-card:hover .editorial-card__content b > [aria-hidden],
.editorial-card:focus-visible .editorial-card__content b > [aria-hidden],
.commercial-path:hover .commercial-path__content b > i,
.commercial-path:focus-visible .commercial-path__content b > i { transform: translateX(4px); }

.btn-finalizar[data-state='loading']::before {
  width: .9rem;
  height: .9rem;
  border: 2px solid rgba(255,255,255,.42);
  border-top-color: #fff;
  border-radius: 50%;
  content: '';
  animation: vinanti-checkout-spin 650ms linear infinite;
}

.btn-finalizar[data-state='success']::before {
  content: '\2713';
  font-size: 1.05rem;
  font-weight: 900;
  animation: vinanti-check-pop 260ms cubic-bezier(.2, .9, .3, 1.35) both;
}

@keyframes vinanti-checkout-spin { to { transform: rotate(360deg); } }
@keyframes vinanti-check-pop { from { opacity: 0; transform: scale(.5); } }

/* Microilustraciones promocionales: geometría, color y coreografía del
   prototipo aprobado. En una etiqueta cambia la escala, nunca se eliminan
   capas. La entrada corre una vez y sigue un bucle suave (más abajo). */
.vi--promo { overflow: visible; transform-box: fill-box; }
.vi--promo :is(.vi-fire-shell, .vi-fire-middle, .vi-fire-core),
.vi--promo :is(.vi-star-main, .vi-star-ray, .vi-star-particle),
.vi--promo :is(.vi-tag-body, .vi-tag-ribbon, .vi-petal-live, .vi-tag-shine) {
  transform-box: fill-box;
}
.vi-fire-shell,
.vi-fire-middle,
.vi-fire-core { transform-origin: 50% 96%; }
.vi-ember,
.vi-star-particle,
.vi-petal-live { opacity: 0; transform-origin: center; }
.vi-star-main,
.vi-star-ray,
.vi-tag-ribbon { transform-origin: center; }
.vi-tag-body { transform-origin: 45% 50%; }

[data-vi-motion].is-motion-visible .vi-fire-halo { animation: vi-promo-halo-breathe 2.4s ease-in-out 1; transform-origin: center; }
[data-vi-motion].is-motion-visible .vi-fire-shell { animation: vi-fire-shell 1.55s ease-in-out 1; }
[data-vi-motion].is-motion-visible .vi-fire-middle { animation: vi-fire-middle 1.16s ease-in-out 1 alternate; }
[data-vi-motion].is-motion-visible .vi-fire-core { animation: vi-fire-core .92s ease-in-out 1 alternate; }
[data-vi-motion].is-motion-visible .vi-ember--1 { animation: vi-ember-rise 2.2s ease-out 1; }
[data-vi-motion].is-motion-visible .vi-ember--2 { animation: vi-ember-rise 2.6s .7s ease-out 1; }
[data-vi-motion].is-motion-visible .vi-ember--3 { animation: vi-ember-rise 2.35s 1.25s ease-out 1; }

[data-vi-motion].is-motion-visible .vi-star-halo { animation: vi-promo-halo-breathe 3.1s ease-in-out 1; transform-origin: center; }
[data-vi-motion].is-motion-visible .vi-star-main { animation: vi-star-bloom 3.4s cubic-bezier(.2,.8,.2,1) 1; }
[data-vi-motion].is-motion-visible .vi-star-ray { animation: vi-star-ray-pop 3.4s ease-in-out 1; }
[data-vi-motion].is-motion-visible .vi-star-ray--2 { animation-delay: .18s; }
[data-vi-motion].is-motion-visible .vi-star-ray--3 { animation-delay: .34s; }
[data-vi-motion].is-motion-visible .vi-star-ray--4 { animation-delay: .52s; }
[data-vi-motion].is-motion-visible .vi-star-particle--1 { animation: vi-star-particle-1 3.4s .1s ease-in-out 1; }
[data-vi-motion].is-motion-visible .vi-star-particle--2 { animation: vi-star-particle-2 3.4s .4s ease-in-out 1; }
[data-vi-motion].is-motion-visible .vi-star-particle--3 { animation: vi-star-particle-3 3.4s .7s ease-in-out 1; }
[data-vi-motion].is-motion-visible .vi-star-particle--4 { animation: vi-star-particle-4 3.4s 1s ease-in-out 1; }

[data-vi-motion].is-motion-visible .vi-tag-body { animation: vi-tag-arrive 5.2s cubic-bezier(.2,.8,.2,1) 1; }
[data-vi-motion].is-motion-visible .vi-tag-ribbon { animation: vi-tag-ribbon-open 5.2s cubic-bezier(.2,.85,.2,1.2) 1; }
[data-vi-motion].is-motion-visible .vi-petal-live--1 { animation: vi-petal-burst-1 5.2s ease-out 1; }
[data-vi-motion].is-motion-visible .vi-petal-live--2 { animation: vi-petal-burst-2 5.2s .08s ease-out 1; }
[data-vi-motion].is-motion-visible .vi-petal-live--3 { animation: vi-petal-burst-3 5.2s .15s ease-out 1; }
[data-vi-motion].is-motion-visible .vi-petal-live--4 { animation: vi-petal-burst-4 5.2s .22s ease-out 1; }
[data-vi-motion].is-motion-visible .vi-tag-shine { animation: vi-tag-shine 5.2s ease-in-out 1; }

@keyframes vi-promo-halo-breathe { 50% { transform: scale(1.14); opacity: .6; } }
@keyframes vi-fire-shell {
  0%, 100% { transform: translateY(0) scale(1) rotate(-1deg); }
  35% { transform: translateY(-3%) scale(.94,1.07) rotate(2deg); }
  70% { transform: translateY(-1%) scale(1.04,1.02) rotate(-2deg); }
}
@keyframes vi-fire-middle {
  from { transform: translateY(1%) scale(1.02,.96) skewX(-3deg); }
  to { transform: translateY(-3%) scale(.9,1.13) skewX(4deg); }
}
@keyframes vi-fire-core {
  from { transform: scale(1,.9) rotate(2deg); }
  to { transform: translateY(-2%) scale(.83,1.13) rotate(-3deg); }
}
@keyframes vi-ember-rise {
  0% { opacity: 0; transform: translate(0,0) scale(.5); }
  18% { opacity: .85; }
  78% { opacity: .2; }
  100% { opacity: 0; transform: translate(320%,-1450%) scale(1.15); }
}
@keyframes vi-star-bloom {
  0%, 18%, 100% { transform: scale(.92) rotate(0); opacity: .82; }
  8% { transform: scale(1.18) rotate(8deg); opacity: 1; }
  58% { transform: scale(1) rotate(-3deg); opacity: .95; }
}
@keyframes vi-star-ray-pop {
  0%, 28%, 100% { transform: scale(.4); opacity: 0; }
  10%, 18% { transform: scale(1); opacity: 1; }
}
@keyframes vi-star-particle-1 {
  0%, 100% { opacity: 0; transform: translate(0,125%) scale(.3); }
  18% { opacity: 1; }
  55% { opacity: .7; transform: translate(-440%,-500%) scale(1); }
  80% { opacity: 0; transform: translate(-625%,-750%) scale(.4); }
}
@keyframes vi-star-particle-2 {
  0%, 100% { opacity: 0; transform: translate(0,77%) scale(.3); }
  22% { opacity: 1; }
  60% { opacity: .7; transform: translate(650%,-425%) scale(1.1); }
  84% { opacity: 0; transform: translate(960%,-690%) scale(.4); }
}
@keyframes vi-star-particle-3 {
  0%, 100% { opacity: 0; transform: translate(0,0) scale(.3); }
  25% { opacity: 1; }
  62% { opacity: .7; transform: translate(-790%,460%) scale(.9); }
  86% { opacity: 0; transform: translate(-1125%,710%) scale(.4); }
}
@keyframes vi-star-particle-4 {
  0%, 100% { opacity: 0; transform: translate(0,0) scale(.3); }
  26% { opacity: 1; }
  64% { opacity: .8; transform: translate(900%,700%) scale(1); }
  88% { opacity: 0; transform: translate(1200%,1000%) scale(.3); }
}
@keyframes vi-tag-arrive {
  0%, 100% { transform: translateY(8%) rotate(-4deg); opacity: .75; }
  8%, 70% { transform: translateY(0) rotate(0); opacity: 1; }
  76% { transform: rotate(2deg); }
  82% { transform: rotate(0); }
}
@keyframes vi-tag-ribbon-open {
  0%, 5%, 100% { transform: scale(.4); opacity: 0; }
  13%, 72% { transform: scale(1); opacity: 1; }
}
@keyframes vi-petal-burst-1 {
  0%, 10%, 100% { opacity: 0; transform: translate(0,0) rotate(0) scale(.5); }
  18% { opacity: 1; }
  45% { opacity: .65; transform: translate(-110%,-105%) rotate(-55deg) scale(1); }
  58% { opacity: 0; transform: translate(-140%,-145%) rotate(-78deg) scale(.7); }
}
@keyframes vi-petal-burst-2 {
  0%, 10%, 100% { opacity: 0; transform: translate(0,0) rotate(0) scale(.5); }
  20% { opacity: 1; }
  47% { opacity: .65; transform: translate(117%,-95%) rotate(64deg) scale(1); }
  60% { opacity: 0; transform: translate(156%,-135%) rotate(90deg) scale(.7); }
}
@keyframes vi-petal-burst-3 {
  0%, 10%, 100% { opacity: 0; transform: translate(0,0) rotate(0) scale(.5); }
  20% { opacity: 1; }
  49% { opacity: .65; transform: translate(-160%,83%) rotate(-40deg) scale(.9); }
  62% { opacity: 0; transform: translate(-210%,122%) rotate(-68deg) scale(.6); }
}
@keyframes vi-petal-burst-4 {
  0%, 10%, 100% { opacity: 0; transform: translate(0,0) rotate(0) scale(.5); }
  22% { opacity: 1; }
  51% { opacity: .65; transform: translate(167%,94%) rotate(44deg) scale(.9); }
  64% { opacity: 0; transform: translate(217%,133%) rotate(70deg) scale(.6); }
}
@keyframes vi-tag-shine {
  0%, 17%, 100% { stroke-dashoffset: 24; opacity: 0; }
  22% { opacity: 1; }
  37%, 62% { stroke-dashoffset: 0; opacity: 1; }
  70% { opacity: 0; }
}

[data-vi-motion].is-motion-done * { animation: none !important; }
[data-vi-motion].is-motion-done :is(.vi-fire-shell, .vi-fire-middle, .vi-fire-core, .vi-star-main, .vi-tag-body, .vi-tag-ribbon) {
  opacity: 1;
  transform: none;
}
[data-vi-motion].is-motion-done :is(.vi-ember, .vi-star-particle, .vi-petal-live, .vi-tag-shine) { opacity: 0; }
[data-vi-motion].is-motion-done .vi-star-ray { opacity: .72; transform: none; }

/* Entrada de la etiqueta: un destello cruza la cápsula y el ícono da un
   saltito. Va con background-position y no con transform para no tener que
   recortar la cápsula: las chispas del ícono salen por fuera de ella. */
.badge-corner.is-badge-intro::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .78) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  content: '';
  pointer-events: none;
  animation: vi-badge-destello 1.1s ease-in-out both;
}
.badge-corner.is-badge-intro .vi--promo { animation: vi-badge-pop 700ms cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes vi-badge-destello { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes vi-badge-pop { 40% { scale: 1.35; rotate: -8deg; } 70% { scale: .95; rotate: 0deg; } }

/* Bucle continuo y liviano después de la entrada: solo las capas grandes, sin
   chispas y sin el desenfoque SVG (a 16-30 px no se distingue y recalcularlo
   en cada cuadro es lo que cuesta). motion.js lo pausa fuera de pantalla. */
[data-vi-motion].is-motion-loop :is(.vi-fire-shell, .vi-fire-middle, .vi-fire-core, .vi-star-main, .vi-star-ray, .vi-tag-body, .vi-tag-ribbon) {
  filter: none;
  animation-duration: var(--vi-loop-dur, 3s);
  animation-delay: var(--vi-loop-delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
[data-vi-motion].is-motion-loop .vi-fire-shell { animation-name: vi-loop-fuego; }
[data-vi-motion].is-motion-loop .vi-fire-middle { animation-name: vi-loop-fuego-medio; }
[data-vi-motion].is-motion-loop .vi-fire-core { animation-name: vi-loop-fuego-centro; }
[data-vi-motion].is-motion-loop .vi-star-main { animation-name: vi-loop-estrella; }
[data-vi-motion].is-motion-loop .vi-star-ray { animation-name: vi-loop-rayo; }
[data-vi-motion].is-motion-loop .vi-tag-body { animation-name: vi-loop-etiqueta; }
[data-vi-motion].is-motion-loop .vi-tag-ribbon { animation-name: vi-loop-lazo; }
[data-vi-motion].is-motion-loop :is(.vi-ember, .vi-star-particle, .vi-petal-live, .vi-tag-shine) { opacity: 0; }
[data-vi-motion].is-motion-paused,
[data-vi-motion].is-motion-paused * { animation-play-state: paused !important; }

@keyframes vi-loop-fuego {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  30% { transform: translateY(-3%) scale(.93, 1.09) rotate(3deg); }
  65% { transform: translateY(-1%) scale(1.05, .98) rotate(-3deg); }
}
@keyframes vi-loop-fuego-medio {
  0%, 100% { transform: scale(1.02, .96) skewX(-3deg); }
  25%, 75% { transform: translateY(-4%) scale(.88, 1.15) skewX(4deg); }
  50% { transform: translateY(-1%) scale(1, 1.02) skewX(-2deg); }
}
@keyframes vi-loop-fuego-centro {
  0%, 100% { transform: scale(1, .9) rotate(2deg); }
  20%, 60% { transform: translateY(-3%) scale(.8, 1.16) rotate(-4deg); }
  40%, 80% { transform: scale(.95, 1) rotate(1deg); }
}
@keyframes vi-loop-estrella {
  0%, 100% { transform: scale(.9) rotate(0); }
  50% { transform: scale(1.12) rotate(12deg); }
}
@keyframes vi-loop-rayo {
  0%, 100% { opacity: .35; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes vi-loop-etiqueta {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: translateY(-3%) rotate(4deg); }
}
@keyframes vi-loop-lazo {
  0%, 100% { transform: scale(.92); }
  50% { transform: scale(1.06); }
}

/* Entrada al bajar ("se enfocan"): solo lo que estaba bajo la primera
   pantalla al cargar (motion.js). Al terminar, motion.js quita las clases y
   el elemento vuelve a sus transiciones de siempre. */
.motion-enfoque {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
}
.motion-enfoque.is-motion-visible {
  opacity: 1;
  filter: none;
  transform: none;
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .75, .25, 1), filter 600ms ease;
  transition-delay: var(--motion-delay, 0ms);
}

/* Las tarjetas que pintan los filtros (.reveal de filtros.js) toman el mismo
   aspecto, para que filtrar se vea igual que bajar por la página. */
.producto-card.reveal {
  filter: blur(6px);
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .75, .25, 1), filter 600ms ease, box-shadow 300ms ease;
}
.producto-card.reveal.visible { filter: none; transform: none; }
.producto-card.reveal.visible:hover { transition-delay: 0s !important; }
/* Esta regla pesa más que el :hover/:active de siempre; se repiten aquí. */
@media (hover: hover) { .producto-card.reveal.visible:hover { transform: translateY(-6px); } }
@media (hover: none) { .producto-card.reveal.visible:active { transform: scale(.97); } }

/* Fotos que llegan tarde: aparecen con un fundido en vez de golpe. Es una
   animación (no una transición) para no pisar las transiciones de zoom que
   ya tienen esas imágenes; sin "to" llega a la opacidad que le toque. */
.motion-img-cargando { opacity: 0 !important; }
.motion-img-lista { animation: vinanti-img-fundido 500ms ease both; }
@keyframes vinanti-img-fundido { from { opacity: 0; } }

/* Tarjeta de producto: en computador un reflejo de luz cruza la foto; en
   celular se hunde un poco al tocarla. Las etiquetas (z-index 2) quedan
   por encima del reflejo. */
@media (hover: hover) {
  .producto-card .product-image::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%);
    content: '';
    pointer-events: none;
    transform: translateX(-110%);
  }
  .producto-card:hover .product-image::after {
    transform: translateX(110%);
    transition: transform 800ms ease;
  }
}

@media (hover: none) {
  .producto-card { transition: transform 150ms ease; }
  .producto-card:active { transform: scale(.97); }
}

@media (hover: none) {
  .motion-petal::before { display: none; }
  .motion-petal__label { margin-left: 0; }
}

@media (max-width: 640px) {
  .motion-words--hero {
    --motion-word-blur: 4px;
    --motion-word-distance: 10px;
    --motion-word-stagger: 52ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-word,
  .motion-sequence > :not([data-campaign-title]) {
    opacity: 1;
    filter: none;
    transform: none;
    will-change: auto;
  }

  .is-motion-visible .motion-word,
  .motion-words.is-motion-visible .motion-word,
  .motion-sequence.is-motion-visible > :not([data-campaign-title]),
  .btn-finalizar[data-state='loading']::before,
  .btn-finalizar[data-state='success']::before {
    animation: none;
  }

  .motion-petal::before,
  .motion-ripple { display: none; }

  [data-vi-motion] *,
  [data-vi-motion].is-motion-visible *,
  [data-vi-motion].is-motion-loop * { animation: none !important; opacity: 1; transform: none; }
  .badge-corner::after { display: none; }
  .badge-corner .vi--promo { animation: none !important; }

  .motion-enfoque,
  .producto-card.reveal {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .motion-img-cargando { opacity: 1 !important; }
  .motion-img-lista { animation: none; }
  .producto-card .product-image::after { display: none; }
  .producto-card:active { transform: none; }
  .vi-ember, .vi-star-particle, .vi-petal-live { display: none; }
}