/** Shopify CDN: Minification failed

Line 831:0 Unexpected "}"
Line 840:2 Unexpected "0%"
Line 850:2 Unexpected "53%"
Line 858:2 Unexpected "61%"
Line 866:2 Unexpected "72%"
Line 874:2 Unexpected "86%"

**/
/* =========================================

   M90 - Tarjetas de producto

   ========================================= */



product-card {

  position: relative;

}



/* Permite posicionar correctamente los distintivos */

product-card .product-card__content > div:has(.m90-card-badges) {

  display: contents;

}



/* Ocultar insignias automáticas de Horizon */

.card-gallery .product-badges {

  display: none !important;

}



/* Distintivos superiores */

.m90-card-badges {

  position: absolute;

  z-index: 5;

  top: 10px;

  left: 10px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 6px;

  pointer-events: none;

}



.m90-card-badge {

  display: inline-flex;

  min-height: 25px;

  align-items: center;

  justify-content: center;

  padding: 5px 10px;

  border-radius: 0;

  font-size: 12px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.01em;

  text-transform: uppercase;

}



.m90-card-badge--best {

  color: #ff1616;

  background: #ffffff;

}



.m90-card-badge--4x3,

.m90-card-badge--express {

  color: #ffffff;

  background: #ff1616;

}



.m90-card-badge--sold-out {

  color: #111111;

  background: #ffffff;

  border: 1px solid #d6d6d6;

}



/* Franja promocional */

.m90-card-promotion {

  display: inline-flex;

  width: max-content;

  max-width: 100%;

  align-items: center;

  padding: 5px 8px;

  color: #ffffff;

  background: #ff1616;

  font-size: 12px;

  font-weight: 900;

  line-height: 1.1;

  text-transform: uppercase;

}



/* Precio */

.m90-card-price {

  display: flex;

  align-items: baseline;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 3px;

  font-size: 14px;

  line-height: 1.2;

}



.m90-card-price__compare {

  color: #a5a5a5;

  font-weight: 400;

  text-decoration-thickness: 1px;

}



.m90-card-price__sale {

  color: #ff1616;

  font-weight: 800;

}



.m90-card-price__regular {

  color: #111111;

  font-weight: 600;

}



/* Ajustes para celular */

@media screen and (max-width: 749px) {

  .m90-card-badges {

    top: 6px;

    left: 6px;

    gap: 4px;

  }



  .m90-card-badge {

    min-height: 21px;

    padding: 4px 7px;

    font-size: 10px;

  }



  .m90-card-promotion {

    padding: 4px 6px;

    font-size: 9px;

  }



  .m90-card-price {

    gap: 3px;

    font-size: 12px;

  }

}

/* Botón de compra rápida */

product-card quick-add-component,

product-card .quick-add {

  z-index: 7;

}



product-card quick-add-component button,

product-card .quick-add button {

  border-radius: 999px !important;

  background: #ff1616 !important;

  color: #ffffff !important;

  border-color: #ff1616 !important;

}



product-card quick-add-component button:hover,

product-card .quick-add button:hover {

  background: #dc0000 !important;

  border-color: #dc0000 !important;

}



@media screen and (min-width: 750px) {

  product-card quick-add-component button,

  product-card .quick-add button {

    min-width: 48px;

    min-height: 48px;

  }

}



@media screen and (max-width: 749px) {

  product-card quick-add-component button,

  product-card .quick-add button {

    min-width: 40px;

    min-height: 40px;

  }

}

/* M90 - Botón Elegir solo icono */

.quick-add__button--choose {

  font-size: 0 !important;

  width: 58px !important;

  min-width: 58px !important;

  height: 58px !important;

  min-height: 58px !important;

  padding: 0 !important;

  border-radius: 50% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 0 !important;

}



.quick-add__button--choose .svg-wrapper,

.quick-add__button--choose .add-to-cart-icon {

  width: 24px !important;

  height: 24px !important;

  margin: 0 !important;

  font-size: initial !important;

}



.quick-add__button--choose svg {

  width: 24px !important;

  height: 24px !important;

}

/* =========================================================
   M90 - CONTROLES DE COMPRA / SISTEMA VISUAL UNIFICADO V8
   SOLO CAPA VISUAL:
   - Selector de cantidad
   - Agregar al carrito
   - Comprar ahora

   Cantidad y Comprar ahora se mueven A LA PAR; Agregar al carrito entra a MEDIO CICLO.
   El movimiento se aplica únicamente al control completo:
   NO hay animación independiente en textos, iconos o contenido.

   No modifica formularios, variantes, carrito, checkout,
   eventos, data-attributes ni estructura funcional.
   ========================================================= */


/* =========================================================
   BASE COMPARTIDA
   ========================================================= */

.product-form-buttons .quantity-selector,
.product-form-buttons .add-to-cart-button,
.product-form-buttons .m90-buy-now-button {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;

  transform-origin: center center;

  will-change:
    transform,
    filter;

}


/* =========================================================
   RELOJ VISUAL / FASES
   =========================================================

   Cantidad + Comprar ahora:
   - misma fase
   - se mueven juntos

   Agregar al carrito:
   - mismo ciclo
   - entra exactamente medio ciclo después
   - alterna entre los otros dos movimientos
   ========================================================= */

.product-form-buttons .quantity-selector,
.product-form-buttons .m90-buy-now-button {
  animation-name:
    m90-control-pendulum,
    m90-control-glow;

  animation-duration:
    3.35s,
    3.35s;

  animation-timing-function:
    cubic-bezier(.42, 0, .22, 1),
    ease-in-out;

  animation-delay:
    0s,
    0s;

  animation-iteration-count:
    infinite,
    infinite;

  animation-fill-mode:
    both,
    both;

  animation-play-state:
    running,
    running !important;
}


.product-form-buttons .add-to-cart-button {
  animation-name:
    m90-control-pendulum,
    m90-control-glow;

  animation-duration:
    3.35s,
    3.35s;

  animation-timing-function:
    cubic-bezier(.42, 0, .22, 1),
    ease-in-out;

  /* Medio ciclo de 3.35 s = 1.675 s */
  animation-delay:
    1.675s,
    1.675s;

  animation-iteration-count:
    infinite,
    infinite;

  animation-fill-mode:
    both,
    both;

  animation-play-state:
    running,
    running !important;
}


/* Comprar ahora:
   el wrapper queda únicamente como contenedor visual.
   El movimiento se aplica al botón real. */
.product-form-buttons .accelerated-checkout-block {
  position: relative !important;
  overflow: visible !important;
  border-radius: 13px !important;
}


/* Si quedara cualquier destello local de una versión anterior
   de Comprar ahora, se desactiva para evitar duplicados. */
.product-form-buttons .m90-buy-now-button__shine {
  display: none !important;
  animation: none !important;
}


/* Los efectos decorativos nunca bloquean clics. */
.product-form-buttons .quantity-selector::after,
.product-form-buttons .add-to-cart-button::after,
.product-form-buttons .m90-buy-now-button::after {
  pointer-events: none !important;
}


/* =========================================================
   APARIENCIA — SELECTOR DE CANTIDAD
   ========================================================= */

.product-form-buttons .quantity-selector {
  --m90-glow-rest:
    drop-shadow(0 7px 9px rgba(0, 0, 0, .22));

  --m90-glow-peak:
    drop-shadow(0 10px 13px rgba(0, 0, 0, .46))
    drop-shadow(0 0 10px rgba(0, 0, 0, .28));

  background:
    linear-gradient(
      105deg,
      #020202 0%,
      #121212 52%,
      #030303 100%
    ) !important;

  color: #ffffff !important;

  border: 0 !important;
  border-radius: 13px !important;

  box-shadow:
    0 7px 17px rgba(0, 0, 0, .25) !important;
}


.product-form-buttons .quantity-selector button,
.product-form-buttons .quantity-selector input {
  color: #ffffff !important;
  background: transparent !important;

  position: relative;
  z-index: 3;

  /* IMPORTANTE:
     contenido SIN movimiento independiente */
  animation: none !important;
  transform: none;
}


/* =========================================================
   APARIENCIA — AGREGAR AL CARRITO
   ========================================================= */

.product-form-buttons .add-to-cart-button {
  --m90-glow-rest:
    drop-shadow(0 7px 9px rgba(233, 0, 25, .24));

  --m90-glow-peak:
    drop-shadow(0 11px 14px rgba(233, 0, 25, .48))
    drop-shadow(0 0 10px rgba(255, 42, 76, .30));

  background:
    linear-gradient(
      105deg,
      #df0018 0%,
      #ff151d 50%,
      #ff3840 100%
    ) !important;

  color: #ffffff !important;

  border: 0 !important;
  border-radius: 13px !important;

  box-shadow:
    0 8px 19px rgba(233, 0, 25, .34) !important;

  font-weight: 800 !important;
  letter-spacing: .02em;

  z-index: 3;
}


/* Todo el contenido viaja con el botón.
   No se anima de forma independiente. */
.product-form-buttons .add-to-cart-button > *:not(.add-to-cart__added) {
  position: relative;
  z-index: 3;

  animation: none !important;
}


/* =========================================================
   APARIENCIA — COMPRAR AHORA
   ========================================================= */

.product-form-buttons .m90-buy-now-button {
  --m90-glow-rest:
    drop-shadow(0 7px 9px rgba(233, 0, 25, .24));

  --m90-glow-peak:
    drop-shadow(0 11px 14px rgba(233, 0, 25, .48))
    drop-shadow(0 0 10px rgba(255, 42, 76, .30));

  width: 100%;

  background:
    linear-gradient(
      105deg,
      #df0018 0%,
      #ff151d 50%,
      #ff3840 100%
    ) !important;

  color: #ffffff !important;

  border: 0 !important;
  border-radius: 13px !important;

  box-shadow:
    0 8px 19px rgba(233, 0, 25, .34) !important;

  opacity: 1 !important;
}


/* Todo el contenido viaja con el botón.
   No se anima de forma independiente. */
.product-form-buttons .m90-buy-now-button > * {
  position: relative;
  z-index: 3;

  animation: none !important;
}


/* =========================================================
   DESTELLO — MISMO CICLO EN LOS 3
   ========================================================= */

.product-form-buttons .quantity-selector::after,
.product-form-buttons .add-to-cart-button::after,
.product-form-buttons .m90-buy-now-button:not(:disabled)::after {
  content: "";

  position: absolute;

  top: -60%;
  left: -47%;

  width: 24%;
  height: 220%;

  transform:
    skewX(-22deg);

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .11) 18%,
      rgba(255, 255, 255, .72) 50%,
      rgba(255, 255, 255, .11) 82%,
      rgba(255, 255, 255, 0) 100%
    );

  opacity: 0;

  z-index: 2;

  animation:
    m90-control-shine
    3.35s
    ease-in-out
    0s
    infinite
    both;
}


/* Cantidad + Comprar ahora: misma fase de brillo */
.product-form-buttons .quantity-selector::after,
.product-form-buttons .m90-buy-now-button:not(:disabled)::after {
  animation-delay: 0s !important;
}


/* Agregar al carrito: brillo exactamente a medio ciclo */
.product-form-buttons .add-to-cart-button::after {
  animation-delay: 1.675s !important;
}


/* =========================================================
   MOVIMIENTO PRINCIPAL
   Agitado lateral / péndulo intenso y sincronizado V5.
   Los tres usan exactamente este mismo @keyframes.
   ========================================================= */

  @keyframes m90-control-pendulum {
    0%,
    48%,
    100% {
      transform:
        translate3d(0, 0, 0)
        rotate(0deg)
        scale(1);
    }

    /* pequeño impulso antes de comenzar */
    51% {
      transform:
        translate3d(0, 0, 0)
        rotate(0deg)
        scale(1.035);
    }

    /* serpenteo / péndulo fuerte */
    54% {
      transform:
        translate3d(-11px, 0, 0)
        rotate(-1.45deg)
        scale(1.030);
    }

    57% {
      transform:
        translate3d(12px, 0, 0)
        rotate(1.60deg)
        scale(1.030);
    }

    60% {
      transform:
        translate3d(-11.5px, 0, 0)
        rotate(-1.50deg)
        scale(1.027);
    }

    63% {
      transform:
        translate3d(10.5px, 0, 0)
        rotate(1.35deg)
        scale(1.024);
    }

    66% {
      transform:
        translate3d(-9px, 0, 0)
        rotate(-1.15deg)
        scale(1.021);
    }

    69% {
      transform:
        translate3d(8px, 0, 0)
        rotate(1.00deg)
        scale(1.018);
    }

    72% {
      transform:
        translate3d(-6.5px, 0, 0)
        rotate(-.80deg)
        scale(1.015);
    }

    75% {
      transform:
        translate3d(5.2px, 0, 0)
        rotate(.62deg)
        scale(1.012);
    }

    78% {
      transform:
        translate3d(-3.8px, 0, 0)
        rotate(-.44deg)
        scale(1.009);
    }

    81% {
      transform:
        translate3d(2.6px, 0, 0)
        rotate(.27deg)
        scale(1.006);
    }

    84% {
      transform:
        translate3d(-1.3px, 0, 0)
        rotate(-.12deg)
        scale(1.003);
    }

    87% {
      transform:
        translate3d(0, 0, 0)
        rotate(0deg)
        scale(1);
    }
  }
}


/* =========================================================
   BRILLO / CONTRASTE / HALO
   MISMO MOMENTO PARA LOS 3
   ========================================================= */

@keyframes m90-control-glow {
  0%,
  47%,
  100% {
    filter:
      brightness(1)
      saturate(1)
      contrast(1)
      var(--m90-glow-rest);
  }

  53% {
    filter:
      brightness(1.09)
      saturate(1.15)
      contrast(1.025)
      var(--m90-glow-peak);
  }

  61% {
    filter:
      brightness(1.15)
      saturate(1.25)
      contrast(1.045)
      var(--m90-glow-peak);
  }

  72% {
    filter:
      brightness(1.12)
      saturate(1.20)
      contrast(1.035)
      var(--m90-glow-peak);
  }

  86% {
    filter:
      brightness(1)
      saturate(1)
      contrast(1)
      var(--m90-glow-rest);
  }
}


/* =========================================================
   PASADA DE LUZ — SINCRONIZADA
   ========================================================= */

@keyframes m90-control-shine {
  0%,
  49% {
    left: -47%;
    opacity: 0;
  }

  53% {
    left: -47%;
    opacity: 1;
  }

  79% {
    left: 130%;
    opacity: 1;
  }

  82%,
  100% {
    left: 130%;
    opacity: 0;
  }
}


/* =========================================================
   MEDIDAS / DETALLES VISUALES
   ========================================================= */

.product-form-buttons .quantity-selector,
.product-form-buttons .add-to-cart-button,
.product-form-buttons .m90-buy-now-button {
  min-height: 55px;
}


/* =========================================================
   HOVER — SE CONSERVA EN LOS DOS BOTONES ROJOS
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  /* Cantidad: mismo efecto de halo, pero en negro */
  .product-form-buttons .quantity-selector:hover {
    filter:
      brightness(1.08)
      contrast(1.04)
      drop-shadow(0 11px 14px rgba(0, 0, 0, .50))
      drop-shadow(0 0 12px rgba(0, 0, 0, .34)) !important;

    box-shadow:
      0 13px 31px rgba(0, 0, 0, .48),
      0 0 20px rgba(0, 0, 0, .30) !important;

    opacity: 1 !important;
  }


  /* Botones rojos: conservar halo rojo */
  .product-form-buttons .add-to-cart-button:not(:disabled):hover,
  .product-form-buttons .m90-buy-now-button:not(:disabled):hover {
    filter:
      brightness(1.14)
      saturate(1.22)
      contrast(1.045)
      drop-shadow(0 11px 14px rgba(233, 0, 25, .48))
      drop-shadow(0 0 10px rgba(255, 42, 76, .32)) !important;

    box-shadow:
      0 13px 31px rgba(233, 0, 25, .48),
      0 0 20px rgba(255, 42, 76, .28) !important;

    opacity: 1 !important;
  }
}


/* =========================================================
   INTERACCIÓN / SINCRONÍA
   =========================================================

   No pausamos ni reiniciamos la animación principal al hacer
   hover, clic, + o −. Cantidad y Comprar ahora mantienen la
   misma fase; Agregar al carrito conserva siempre su desfase
   exacto de medio ciclo.

   Los feedbacks nativos internos del tema permanecen intactos.
   ========================================================= */


/* =========================================================
   MÓVIL
   Los tres siguen exactamente sincronizados.
   La amplitud sigue siendo fuerte, pero algo menor que escritorio
   para evitar que el movimiento quede demasiado cerca de los bordes.
   ========================================================= */

@media screen and (max-width: 749px) {
  .product-form-buttons .quantity-selector,
  .product-form-buttons .add-to-cart-button,
  .product-form-buttons .accelerated-checkout-block,
  .product-form-buttons .m90-buy-now-button {
    border-radius: 10px !important;
  }


  @keyframes m90-control-pendulum {
    0%,
    48%,
    100% {
      transform:
        translate3d(0, 0, 0)
        rotate(0deg)
        scale(1);
    }

    51% {
      transform:
        translate3d(0, 0, 0)
        rotate(0deg)
        scale(1.027);
    }

    54% {
      transform:
        translate3d(-8px, 0, 0)
        rotate(-1.05deg)
        scale(1.024);
    }

    57% {
      transform:
        translate3d(8.5px, 0, 0)
        rotate(1.10deg)
        scale(1.024);
    }

    60% {
      transform:
        translate3d(-8px, 0, 0)
        rotate(-1.03deg)
        scale(1.021);
    }

    63% {
      transform:
        translate3d(7.2px, 0, 0)
        rotate(.92deg)
        scale(1.019);
    }

    66% {
      transform:
        translate3d(-6.2px, 0, 0)
        rotate(-.78deg)
        scale(1.016);
    }

    69% {
      transform:
        translate3d(5.2px, 0, 0)
        rotate(.65deg)
        scale(1.014);
    }

    72% {
      transform:
        translate3d(-4.3px, 0, 0)
        rotate(-.52deg)
        scale(1.011);
    }

    75% {
      transform:
        translate3d(3.4px, 0, 0)
        rotate(.40deg)
        scale(1.009);
    }

    78% {
      transform:
        translate3d(-2.3px, 0, 0)
        rotate(-.27deg)
        scale(1.006);
    }

    81% {
      transform:
        translate3d(1.4px, 0, 0)
        rotate(.16deg)
        scale(1.004);
    }

    84% {
      transform:
        translate3d(-.7px, 0, 0)
        rotate(-.07deg)
        scale(1.002);
    }

    87% {
      transform:
        translate3d(0, 0, 0)
        rotate(0deg)
        scale(1);
    }
  }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .product-form-buttons .quantity-selector,
  .product-form-buttons .add-to-cart-button,
  .product-form-buttons .m90-buy-now-button,
  .product-form-buttons .quantity-selector::after,
  .product-form-buttons .add-to-cart-button::after,
  .product-form-buttons .m90-buy-now-button::after {
    animation: none !important;
  }
}

/* M90 - Nombre y dorsal dentro de agregado rápido */



.m90-quick-dorsal {

  width: 100%;

  margin: 10px 0 12px;

}



.m90-quick-dorsal[hidden] {

  display: none !important;

}



.m90-quick-dorsal__label {

  display: block;

  margin-bottom: 7px;

  color: #111111;

  font-size: 13px;

  font-weight: 800;

}



.m90-quick-dorsal__label span {

  color: #ff1616;

}



.m90-quick-dorsal__input {

  display: block;

  width: 100%;

  min-height: 46px;

  padding: 10px 12px;



  color: #111111;

  background: #ffffff;



  border: 1px solid #d5d5d5;

  border-radius: 5px;



  font: inherit;

  font-size: 13px;

  outline: none;

}



.m90-quick-dorsal__input:focus {

  border-color: #111111;

  box-shadow: 0 0 0 1px #111111;

}



.m90-quick-dorsal__input[aria-invalid="true"] {

  border-color: #ff1616;

  box-shadow: 0 0 0 1px #ff1616;

}



.m90-quick-dorsal__help {

  margin: 5px 0 0;

  color: #666666;

  font-size: 11px;

  line-height: 1.35;

}



.m90-quick-dorsal__error {

  margin: 6px 0 0;

  color: #d50000;

  font-size: 11px;

  font-weight: 800;

}

/* M90 - Dorsal nativo en Agregado rápido */



.m90-quick-dorsal-native {

  display: block;

  width: 100%;

  margin: 10px 0 14px;

}



.m90-quick-dorsal-native[hidden] {

  display: none !important;

}



.m90-quick-dorsal-native__label {

  display: block;

  margin-bottom: 7px;

  color: #111;

  font-size: 13px;

  font-weight: 800;

}



.m90-quick-dorsal-native__label span {

  color: #ff1616;

}



.m90-quick-dorsal-native__input {

  display: block;

  width: 100%;

  min-height: 46px;

  padding: 10px 12px;



  background: #fff;

  color: #111;



  border: 1px solid #d5d5d5;

  border-radius: 5px;



  font: inherit;

  font-size: 13px;

  outline: none;

}



.m90-quick-dorsal-native__input:focus {

  border-color: #111;

  box-shadow: 0 0 0 1px #111;

}



.m90-quick-dorsal-native__input[aria-invalid="true"] {

  border-color: #ff1616;

  box-shadow: 0 0 0 1px #ff1616;

}



.m90-quick-dorsal-native__help {

  margin: 5px 0 0;

  color: #666;

  font-size: 11px;

  line-height: 1.35;

}



.m90-quick-dorsal-native__error {

  margin: 6px 0 0;

  color: #d50000;

  font-size: 11px;

  font-weight: 800;

}

/* =========================================================

   M90 - MENÚ MÓVIL LIMPIO / PANTALLA COMPLETA

   ========================================================= */



@media screen and (max-width: 749px) {



  /* Cuando el menú está abierto,

     todo el encabezado pasa por encima de la promo */

  .header-section:has(

    #Details-menu-drawer-container.menu-open

  ) {

    position: relative !important;

    z-index: 9999999 !important;

  }





  /* Panel del menú */

  #Details-menu-drawer-container.menu-open

  > .menu-drawer {

    position: fixed !important;



    top: 0 !important;

    left: 0 !important;



    width: 100vw !important;

    max-width: 100vw !important;



    height: 100dvh !important;

    min-height: 100dvh !important;



    margin: 0 !important;

    padding: 0 !important;



    background: #ffffff !important;



    z-index: 9999999 !important;



    overflow-x: hidden !important;

    overflow-y: auto !important;



    padding-top: env(safe-area-inset-top) !important;

  }





  /* Fondo oscuro detrás del menú */

  #Details-menu-drawer-container.menu-open

  .menu-drawer__backdrop {

    position: fixed !important;



    inset: 0 !important;



    width: 100vw !important;

    height: 100dvh !important;



    z-index: 9999998 !important;

  }





  /* Botón X siempre visible arriba */

  #Details-menu-drawer-container.menu-open

  > .menu-drawer

  > .menu-drawer__close-button {

    position: sticky !important;



    top: 0 !important;

    right: 0 !important;



    margin-left: auto !important;



    width: 56px !important;

    height: 56px !important;



    padding: 16px !important;



    display: flex !important;

    align-items: center !important;

    justify-content: center !important;



    background: #ffffff !important;



    z-index: 20 !important;

  }





  /* Navegación empieza despejada */

  #Details-menu-drawer-container.menu-open

  .menu-drawer__navigation {

    padding-top: 4px !important;

  }





  /* Un poco más de aire a los enlaces */

  #Details-menu-drawer-container.menu-open

  .menu-drawer__menu-item--mainlist {

    min-height: 54px !important;

  }





  /* Evita mover la página que está detrás */

  body:has(

    #Details-menu-drawer-container.menu-open

  ) {

    overflow: hidden !important;

  }

}