/* ── Transición gota naranja: Sin Blindafon → Beneficios de Blindafon ── */

.drop-transition {
  position: relative;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}

.drop-transition__stage {
  position: relative;
  width: 100%;
  height: 100dvh;
}

.drop-transition__bg-dark,
.drop-transition__reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.drop-transition__bg-dark {
  background-color: var(--navy);
}

.drop-transition__reveal {
  background-color: var(--cream);
  clip-path: circle(0% at 50% 50%);
  will-change: clip-path;
  z-index: 1;
}

.drop-transition__drop {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 32px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(
    circle at 35% 30%,
    #FFB070 0%,
    var(--orange) 60%,
    #D67328 100%
  );
  box-shadow: 0 0 24px rgba(241, 139, 59, 0.6);
  transform: translate(-50%, -100%);
  will-change: transform, opacity;
  z-index: 2;
}

/* Reduced motion: sección colapsada, sin animación */
@media (prefers-reduced-motion: reduce) {
  .drop-transition {
    height: 0;
    overflow: hidden;
  }
}