@charset "UTF-8";
/* CREATIVIDAD DE CAMPAÑA: solo elementos dentro de #promo. */

#promo {
  width: 50%;
}

#bolsa img {
  width: 100%;
  display: block;
  margin: auto;
}

#pegatina {
  margin-right:  -51px !important;
  margin-top:  -10px;
}

#pegatina img {
  position: absolute;
  width: 100%;
}

#instrucciones {
  color: #FFF;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 20px;
  margin: 0 auto;
  width: 100%;
  margin-top: 30px;
}

#promo ol {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding: 0 15px 5px 15px;
}

#promo ol li {
  color: #FFFFFF;
  font-weight: bold;
  font-size: 25px;
  margin: 0 20px 30px 60px;
  counter-increment: my-awesome-counter;
  position: relative;
  line-height: 30px;
}

#promo ol li::before {
  font-size: 50px;
  content: counter(my-awesome-counter) '.';
  position: absolute;
  left: -50px;
  color: #dedc00;
}

/* Diseño móvil de la creatividad */
@media only screen and (max-width: 768px) {
  #promo {
    padding: 0;
    width: 100%;
    margin-top: 10px;
    margin-bottom: -25px;
  }

  #pegatina {
  margin-right: -20px !important;
  }

  #bolsa img { padding: 0 10px 10px 10px; }

  #promo ol { width: 100%; }

  #instrucciones { width: 100%; }

  #promo ol li {
    font-size: 20px;
    line-height: 24px;
    margin: 10px 20px 20px 60px;
  }

  #promo ol li::before { font-size: 40px; }
}

/* Animación específica de la pegatina */
@media (prefers-reduced-motion: no-preference) {
  /* Pegatina: entrada horizontal suave después de aparecer el bloque principal. */
  .js-scroll #promo #pegatina {
    opacity: 0;
    transform: translateX(42px);
    transition: opacity 600ms ease 380ms, transform 600ms cubic-bezier(.2,.7,.25,1) 380ms;
  }
  .js-scroll #promo.is-visible #pegatina {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #pegatina { opacity: 1 !important; transform: none !important; transition: none !important; }
}