/* bits.css · efectos de React Bits (reactbits.dev) llevados a vanilla para la landing v3.
   Origen de cada uno: DecryptedText, ShinyText, ClickSpark, ElectricBorder y ScrollStack.
   Aqui no hay React ni build, asi que se han reescrito con la misma matematica y los mismos tiempos.
   Regla de marca: el ambar no lleva glow ni degradado encima. El brillo solo pasa por texto blanco. */

/* 1 · DecryptedText (kickers) */
[data-decrypt] { white-space: pre-wrap }
.bd-on { color: var(--xxx) }

/* 2 · ShinyText (solo el precio) */
.bt-shiny {
  --sh-a: #CFCFCF;
  background-image: linear-gradient(120deg, var(--sh-a, #8a8a8a) 0%, var(--sh-a, #8a8a8a) 35%, var(--sh-b, #ffffff) 50%, var(--sh-a, #8a8a8a) 65%, var(--sh-a, #8a8a8a) 100%);
  background-size: 200% auto;
  background-position: 150% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bt-shine 3.4s linear infinite
}
.bt-shiny span {
  -webkit-text-fill-color: currentColor;
  background: none
}
@keyframes bt-shine {
  from { background-position: 150% center }
  to { background-position: -50% center }
}
html.rm .bt-shiny {
  animation: none;
  background-image: none;
  -webkit-text-fill-color: currentColor
}

/* 3 · ClickSpark (chispas al pulsar) */
#bt-spark {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60
}

/* 4 · ElectricBorder (la caja del precio) */
.bt-electric { position: relative }
.bt-electric > canvas.bt-eb {
  position: absolute;
  inset: -60px;
  width: calc(100% + 120px);
  height: calc(100% + 120px);
  max-width: none;
  pointer-events: none;
  z-index: 0;
  opacity: .85
}
.bt-electric > :not(canvas.bt-eb) { position: relative; z-index: 1 }

/* 5 · ScrollStack (las 4 cards, solo en movil) */
.bt-stack { display: block }
.bt-stack > .bt-stacked { backface-visibility: hidden }
.bt-stack-end { height: 42vh }