/* Hero vanguard — contador lateral 3·2·1 */

#vista-rmiestilo .hero-section {
  overflow: visible;
}

#vista-rmiestilo .hero-vanguard-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

#vista-rmiestilo .hero-side-count {
  position: absolute;
  right: clamp(-60px, -6%, -8px);
  top: 50%;
  transform: translateY(-48%);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  overflow: visible;
}

#vista-rmiestilo .hero-side-count.is-active {
  opacity: 1;
}

#vista-rmiestilo .hero-side-count.is-done {
  opacity: 0;
}

#vista-rmiestilo .hero-side-count-num {
  display: block;
  font-family: 'Syne', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(16rem, 54vw, 40rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.09em;
  color: var(--rmiestilo-accent-bg);
  opacity: 0.18;
  text-shadow: 0 0 120px rgba(159, 232, 112, 0.2);
  user-select: none;
}

#vista-rmiestilo .hero-side-count-num.is-pop {
  animation: heroSideCountPop 0.9s cubic-bezier(0.22, 1.12, 0.32, 1);
}

#vista-rmiestilo .hero-side-count-num.is-hold {
  animation: heroSideCountHold 0.5s ease-out forwards;
}

@keyframes heroSideCountHold {
  50% { transform: scale(1.12); opacity: 0.28; }
  100% { transform: scale(1.08); opacity: 0.2; }
}

@keyframes heroSideCountPop {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }
  30% {
    transform: scale(1);
    opacity: 0.26;
  }
  65% {
    transform: scale(1.03);
    opacity: 0.22;
  }
  100% {
    transform: scale(1.06);
    opacity: 0.16;
  }
}

@media (max-width: 700px) {
  #vista-rmiestilo .hero-side-count {
    right: 50%;
    transform: translate(50%, -20%);
    top: auto;
    bottom: 10%;
  }

  #vista-rmiestilo .hero-side-count-num {
    font-size: clamp(13rem, 78vw, 20rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  #vista-rmiestilo .hero-side-count {
    display: none !important;
  }
}