/* Animaciones y detalles visuales para Ubicar.club */

.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: .12s;
}

.delay-2 {
  transition-delay: .22s;
}

.hero-copy,
.hero-visual,
.service-card,
.benefit-card,
.download-card,
.contact-form,
.contact-cards article,
.testimonial-card,
.trust-grid > div,
.faq-list details {
  will-change: transform;
}

.service-card:hover,
.benefit-card:hover,
.download-card:hover,
.contact-cards article:hover,
.trust-grid > div:hover,
.faq-list details:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 124, 134, 0.38);
  background: rgba(255,255,255,0.06);
}

.hero-card,
.contact-form,
.testimonial-card {
  position: relative;
  overflow: hidden;
}

.hero-card::before,
.contact-form::before,
.testimonial-card::before {
  content: "";
  position: absolute;
  inset: -20% auto auto -20%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 68%);
  pointer-events: none;
}

.hero-card::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,38,56,0.22), transparent 70%);
  pointer-events: none;
}

.whatsapp-float {
  animation: pulse-green 2.2s infinite;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.42), 0 20px 40px rgba(37, 211, 102, 0.28);
  }
  70% {
    box-shadow: 0 0 0 18px rgba(37, 211, 102, 0), 0 20px 40px rgba(37, 211, 102, 0.28);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 20px 40px rgba(37, 211, 102, 0.28);
  }
}

@keyframes floatY {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.hero-visual .hero-card {
  animation: floatY 6s ease-in-out infinite;
}

.status-pill {
  position: relative;
}

.status-pill::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.35);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  filter: blur(6px);
}

.hero-metrics article strong,
.contact-cards strong,
.download-card strong,
.brand strong {
  letter-spacing: -0.02em;
}

.section-head h2,
.hero-copy h1,
.feature-copy h2,
.contact-copy h2 {
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal-up {
    opacity: 1 !important;
    transform: none !important;
  }
}