/* =========================
   PASTILLA PROMO (IndexSolar)
   Animación al entrar en viewport
   JS agrega/quita .is-inview
   ========================= */

.promo-pill{
  background: #eaf4e3;
  border-radius: 20px;
  padding: clamp(22px, 4vw, 40px) clamp(18px, 4vw, 60px);
  text-align: center;

  /* Estado inicial (cuando NO está en vista) */
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  filter: blur(6px);

  transition:
    opacity 700ms cubic-bezier(.2,.9,.2,1),
    transform 700ms cubic-bezier(.2,.9,.2,1),
    filter 700ms cubic-bezier(.2,.9,.2,1);

  will-change: transform, opacity, filter;
}

/* Cuando entra en la vista */
.promo-pill.is-inview{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.promo-pill__title{
  margin: 0;
  font-weight: 700;
  color: #1d2b53;
  font-size: clamp(28px, 2vw, 58px);
  line-height: 1.0;
  letter-spacing: -0.0em;
}

.promo-pill__highlight{
  color: #5ea33b;
  font-weight: 700;
  white-space: nowrap;
}

.promo-pill__subtitle{
  margin: 10px 0 0;
  color: #3f536e;
  font-size: clamp(14px, 1.2vw, 22px);
  line-height: 1.8;
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .promo-pill{
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}