/* =============================================
   HERO — Full-screen indigo / violet gradient
   ============================================= */

.hero {
  background: linear-gradient(145deg, #020b1a 0%, #0a1628 50%, #051525 100%);
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
}

/* Violet / indigo glow blobs — parallax via --px / --py */
.hero::before {
  content: '';
  position: absolute;
  inset: -60px;
  background:
    radial-gradient(ellipse 75% 65% at 90% 10%, rgba(37, 99, 235, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 5%  85%, rgba(14, 165, 233, 0.38) 0%, transparent 55%),
    radial-gradient(ellipse 45% 45% at 50% 50%, rgba(96, 165, 250, 0.07) 0%, transparent 50%);
  pointer-events: none;
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Mesh grid — counter-parallax */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  transform: translate(calc(var(--px, 0px) * -0.3), calc(var(--py, 0px) * -0.3));
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* === Centered layout === */
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-24) var(--space-20);
  position: relative;
  z-index: 1;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7, 1.75rem);
  max-width: 780px;
  width: 100%;
}

/* === Entrada escalonada del hero ===
   En vez de que todo el bloque aparezca de golpe, cada parte entra un
   instante después de la anterior, de arriba hacia abajo. Se anula el
   fade del contenedor (.animate-in) para no duplicar la animación. */
.hero__content.animate-in { animation: none; }

.hero__content > * {
  opacity: 0;
  animation: hero-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero__content > .hero__badge   { animation-delay: 0.05s; }
.hero__content > .hero__title   { animation-delay: 0.15s; }
.hero__content > .hero__desc    { animation-delay: 0.28s; }
.hero__content > .hero__actions { animation-delay: 0.42s; }
.hero__content > .hero__trust   { animation-delay: 0.56s; }

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Badge */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.28);
  color: #bfdbfe;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  background: #60a5fa;
  border-radius: var(--radius-full);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__badge-dot { animation: none; }
  .hero::before,
  .hero::after { transition: none; }
}

/* Title */
.hero__title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: var(--font-extrabold);
  color: white;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.hero__title .highlight {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 45%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Description */
.hero__desc {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--leading-relaxed);
  /* 620px en vez de 520: el mismo texto entra en menos renglones,
     así se lee de un vistazo en vez de parecer un párrafo. */
  max-width: 620px;
  text-wrap: balance;
}

/* Resalta lo gratis: destaca sobre el blanco atenuado del párrafo */
.hero__desc strong {
  color: #fff;
  font-weight: 600;
}

/* CTA buttons */
.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

/* Trust bar */
.hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}

.hero__trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero__trust-value {
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  color: white;
}

.hero__trust-label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.hero__trust-divider {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
}

/* White primary button for dark hero */
.hero__actions .btn--primary {
  background: white;
  color: var(--color-primary);
  border-color: white;
}

.hero__actions .btn--primary:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: white;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

/* Hide old visual column */
.hero__visual { display: none !important; }

/* === Responsive === */
@media (max-width: 768px) {
  .hero__inner { padding-block: var(--space-20) var(--space-16); }
}

@media (max-width: 640px) {
  .hero__title {
    font-size: clamp(var(--text-2xl), 8vw, var(--text-4xl));
    letter-spacing: -0.025em;
  }
  .hero__trust { gap: var(--space-5); }
}

@media (max-width: 380px) {
  .hero__trust {
    flex-wrap: wrap;
    row-gap: var(--space-4);
  }
  .hero__trust-divider { display: none; }
}