/** Shopify CDN: Minification failed

Line 12:37 Unexpected "-->"
Line 68:0 Unexpected "<"
Line 95:42 Unterminated string token
Line 96:29 Unterminated string token
Line 170:28 Comments in CSS use "/* ... */" instead of "//"
Line 171:28 Comments in CSS use "/* ... */" instead of "//"
Line 172:28 Comments in CSS use "/* ... */" instead of "//"

**/
<!-- Decoración de octubre Diosa BQ -->
<style>
  #diosa-octubre {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 20;
  }

  #diosa-octubre .diosa-figura {
    position: absolute;
    top: -130px;
    left: var(--x);
    width: var(--tamano);
    opacity: 0;
    pointer-events: none;
    animation: diosa-caida var(--duracion) linear
      var(--espera) infinite;
  }

  #diosa-octubre svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  @keyframes diosa-caida {
    0% {
      transform: translate3d(0, 0, 0) rotate(-8deg);
      opacity: 0;
    }
    7% { opacity: .9; }
    92% { opacity: .9; }
    100% {
      transform: translate3d(
        var(--desvio), calc(100vh + 260px), 0
      ) rotate(12deg);
      opacity: 0;
    }
  }

  @media (max-width: 749px) {
    #diosa-octubre .diosa-figura {
      width: calc(var(--tamano) * .75);
    }

    #diosa-octubre .diosa-figura:nth-child(n+9) {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #diosa-octubre { display: none; }
  }
</style>

<div id="diosa-octubre" aria-hidden="true"></div>

<script>
(() => {
  const contenedor = document.getElementById('diosa-octubre');
  if (!contenedor || contenedor.dataset.iniciado) return;
  contenedor.dataset.iniciado = 'true';

  function calabaza(id) {
    return `
      <svg viewBox="0 0 70 70"
        xmlns="http://www.w3.org/2000/svg">
        <defs>
          <radialGradient id="diosa-calabaza-${id}"
            cx="30%" cy="25%" r="80%">
            <stop offset="0%" stop-color="#FFD06B"/>
            <stop offset="48%" stop-color="#FFA32A"/>
            <stop offset="100%" stop-color="#E77916"/>
          </radialGradient>
        </defs>

        <path d="M35 20 C31 12 35 7 39 10 L38 21"
          fill="#895124" stroke="#6E411E"
          stroke-width="1.5"/>

        <path d="M39 16 C48 10 51 19 44 20
          C39 21 43 13 47 15"
          fill="none" stroke="#895124"
          stroke-width="1.8" stroke-linecap="round"/>

        <g fill="url(#diosa-calabaza-${id})"
          stroke="#ED891D" stroke-width="1">
          <ellipse cx="23" cy="42" rx="15" ry="21"/>
          <ellipse cx="47" cy="42" rx="15" ry="21"/>
          <ellipse cx="29" cy="42" rx="13" ry="23"/>
          <ellipse cx="41" cy="42" rx="13" ry="23"/>
          <ellipse cx="35" cy="42" rx="10" ry="24"/>
        </g>

        <path d="M30 25 C25 32 25 43 27 51"
          fill="none" stroke="#FFE1A0"
          stroke-width="2.5" stroke-linecap="round"
          opacity=".6"/>
      </svg>`;
  }

  function arana(color, claro, id) {
    return `
      <svg viewBox="0 0 70 108"
        xmlns="http://www.w3.org/2000/svg">
        <defs>
          <radialGradient id="diosa-arana-${id}"
            cx="30%" cy="25%" r="85%">
            <stop offset="0%" stop-color="${claro}"/>
            <stop offset="100%" stop-color="${color}"/>
          </radialGradient>
        </defs>

        <!-- Hilito de la arañita -->
        <path d="M35 0 V54"
          stroke="${color}" stroke-width="1.2"
          opacity=".65"/>

        <!-- Patitas -->
        <g fill="none" stroke="${color}"
          stroke-width="3.4" stroke-linecap="round">
          <path d="M23 67 C14 58 7 64 5 69"/>
          <path d="M21 73 C10 68 5 74 4 80"/>
          <path d="M22 79 C12 78 8 85 9 91"/>
          <path d="M25 85 C17 88 17 96 19 99"/>
          <path d="M47 67 C56 58 63 64 65 69"/>
          <path d="M49 73 C60 68 65 74 66 80"/>
          <path d="M48 79 C58 78 62 85 61 91"/>
          <path d="M45 85 C53 88 53 96 51 99"/>
        </g>

        <!-- Cuerpito con volumen -->
        <ellipse cx="35" cy="74" rx="19" ry="20"
          fill="url(#diosa-arana-${id})"/>

        <!-- Carita -->
        <ellipse cx="29" cy="73" rx="2.2" ry="3"
          fill="#211B25"/>
        <ellipse cx="41" cy="73" rx="2.2" ry="3"
          fill="#211B25"/>
        <circle cx="28.4" cy="72" r=".7" fill="white"/>
        <circle cx="40.4" cy="72" r=".7" fill="white"/>

        <ellipse cx="24" cy="79" rx="3" ry="1.8"
          fill="#F28DB4" opacity=".75"/>
        <ellipse cx="46" cy="79" rx="3" ry="1.8"
          fill="#F28DB4" opacity=".75"/>

        <path d="M31 81 Q35 85 39 81"
          fill="none" stroke="#211B25"
          stroke-width="1.5" stroke-linecap="round"/>
      </svg>`;
  }

  const colores = [
    ['#AA71B8', '#E6C9EF'], // Lila
    ['#DF83AC', '#FFD2E6'], // Rosada
    ['#39333F', '#8A7D91']  // Negra
  ];

  for (let i = 0; i < 12; i++) {
    const figura = document.createElement('span');
    figura.className = 'diosa-figura';

    const esCalabaza = i % 2 === 0;
    const color = colores[Math.floor(i / 2) % 3];

    figura.innerHTML = esCalabaza
      ? calabaza(i)
      : arana(color[0], color[1], i);

    figura.style.setProperty('--x', `${(i * 37 + 4) % 94}%`);
    figura.style.setProperty(
      '--tamano', `${esCalabaza ? 36 : 39}px`
    );
    figura.style.setProperty(
      '--duracion', `${20 + (i % 4) * 3}s`
    );
    figura.style.setProperty('--espera', `${-i * 3.7}s`);
    figura.style.setProperty(
      '--desvio', `${i % 2 ? -22 : 22}px`
    );

    contenedor.appendChild(figura);
  }
})();
</script>
<!-- Fin decoración de octubre Diosa BQ -->@media screen and (max-width: 749px) {
  .collection .grid__item:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 989px) {
  .collection .slider.slider--tablet {
    margin-bottom: 1.5rem;
  }
}

.collection .loading-overlay {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

@media screen and (max-width: 749px) {
  .collection .loading-overlay {
    top: 0;
    right: 0;
  }
}

@media screen and (min-width: 750px) {
  .collection .loading-overlay {
    left: 0;
  }
}

.collection .loading-overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  padding: 0 1.5rem;
  opacity: 0.7;
}

@media screen and (min-width: 750px) {
  .collection .loading-overlay {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.collection.loading .loading-overlay {
  display: block;
}

.collection--empty .title-wrapper {
  margin-top: 10rem;
  margin-bottom: 15rem;
}

@media screen and (max-width: 989px) {
  .collection .slider--tablet.product-grid {
    scroll-padding-left: 1.5rem;
  }
}

.collection__description > * {
  margin: 0;
}

.collection__title.title-wrapper {
  margin-bottom: 2.5rem;
}

.collection__title .title:not(:only-child) {
  margin-bottom: 1rem;
}

@media screen and (min-width: 990px) {
  .collection__title--desktop-slider .title {
    margin-bottom: 2.5rem;
  }

  .collection__title.title-wrapper--self-padded-tablet-down {
    padding: 0 5rem;
  }

  .collection slider-component:not(.page-width-desktop) {
    padding: 0;
  }

  .collection--full-width slider-component:not(.slider-component-desktop) {
    padding: 0 1.5rem;
    max-width: none;
  }
}

.collection__view-all a:not(.link) {
  margin-top: 1rem;
}