/* =============================================
   HERO — WEPY.AI
   Pantalla completa, contenido centrado (max 780px),
   manchas decorativas, texto rotativo con gradiente,
   animaciones de entrada escalonadas.
   ============================================= */


/* =============================================
   KEYFRAMES
   ============================================= */

/* Entrada de cada elemento del hero */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Texto rotativo — salida hacia arriba */
@keyframes rotateOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-16px);
  }
}

/* Texto rotativo — entrada desde abajo */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Punto pulsante del badge */
@keyframes heroPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.25;
    transform: scale(0.7);
  }
}


/* =============================================
   SECCIÓN PRINCIPAL
   ============================================= */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
  overflow: hidden;
  padding-top: calc(var(--navbar-height-mobile) + var(--space-12));
  padding-bottom: var(--space-16);
  padding-inline: var(--container-px);
}

@media (min-width: 1024px) {
  .hero {
    padding-top: calc(var(--navbar-height-desktop) + var(--space-16));
    padding-bottom: var(--space-20);
  }
}


/* =============================================
   MANCHAS DECORATIVAS DE FONDO
   ============================================= */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Mancha azul — esquina superior izquierda */
.hero__blob--blue {
  width: 480px;
  height: 480px;
  top: -160px;
  left: -180px;
  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.14) 0%,
    transparent 70%
  );
}

/* Mancha turquesa — esquina inferior derecha */
.hero__blob--teal {
  width: 420px;
  height: 420px;
  bottom: -140px;
  right: -150px;
  background: radial-gradient(
    circle,
    rgba(34, 211, 163, 0.13) 0%,
    transparent 70%
  );
}

/* Recortar manchas en móvil para no dominar la pantalla */
@media (max-width: 767px) {
  .hero__blob--blue {
    width: 280px;
    height: 280px;
    top: -80px;
    left: -100px;
  }

  .hero__blob--teal {
    width: 240px;
    height: 240px;
    bottom: -80px;
    right: -80px;
  }
}


/* =============================================
   BLOQUE DE CONTENIDO
   ============================================= */
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}


/* =============================================
   BADGE / PÍLDORA
   ============================================= */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.875rem;
  background-color: rgba(139, 92, 246, 0.09);
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-violet);
  letter-spacing: 0.01em;

  /* Animación de entrada */
  animation: heroFadeUp 550ms ease 500ms both;
}

/* Punto pulsante lila */
.hero__badge-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background-color: #8B5CF6;
  flex-shrink: 0;
  animation: heroPulse 2.2s ease-in-out infinite;
}


/* =============================================
   TITULAR PRINCIPAL
   ============================================= */
.hero__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-size: clamp(2.125rem, 5vw + 0.5rem, 4.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;

  /* Animación de entrada */
  animation: heroFadeUp 550ms ease 660ms both;
}

/* Línea estática: "Tu negocio merece" */
.hero__heading-static {
  display: block;
  color: var(--color-text);
}

/* Línea 2: contenedor con altura fija para evitar layout shift */
.hero__heading-line2 {
  display: block;
  /* Altura basada en una línea del heading — ajustada por breakpoint */
  min-height: calc(clamp(2.125rem, 5vw + 0.5rem, 4.5rem) * 1.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Texto rotativo con gradiente de marca */
.hero__rotating-text {
  display: block;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Clases añadidas/removidas por JS para el ciclo de rotación */
.hero__rotating-text.is-exiting {
  animation: rotateOut 320ms ease forwards;
}

.hero__rotating-text.is-entering {
  animation: rotateIn 320ms ease forwards;
}


/* =============================================
   SUBTÍTULO
   ============================================= */
.hero__subtitle {
  max-width: 620px;
  font-size: clamp(1rem, 1.5vw + 0.25rem, 1.125rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-muted);

  /* Animación de entrada */
  animation: heroFadeUp 550ms ease 830ms both;
}

/* MÁS / MENOS — Playfair Display Italic */
.hero__em {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  color: var(--color-text);
  font-synthesis: none;
}


/* =============================================
   CTA PRINCIPAL
   ============================================= */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.9375rem 2rem;
  background: var(--gradient-brand);
  color: #ffffff;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-full);
  white-space: nowrap;
  border: none;
  outline-offset: 3px;

  /* Animación de entrada */
  animation: heroFadeUp 550ms ease 1000ms both;

  transition:
    transform    280ms ease,
    box-shadow   280ms ease;
}

.hero__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.32);
}

.hero__cta:focus-visible {
  outline: 2px solid var(--color-primary);
}

/* Flecha: se desplaza a la derecha en hover */
.hero__cta-arrow {
  display: inline-block;
  transition: transform 280ms ease;
}

.hero__cta:hover .hero__cta-arrow {
  transform: translateX(5px);
}


/* =============================================
   ACCESIBILIDAD — prefers-reduced-motion
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .hero__badge,
  .hero__heading,
  .hero__subtitle,
  .hero__cta {
    animation: none;
    opacity: 1;
  }

  .hero__badge-dot {
    animation: none;
  }

  .hero__rotating-text.is-exiting,
  .hero__rotating-text.is-entering {
    animation: none;
    opacity: 1;
  }

  .hero__cta,
  .hero__cta-arrow {
    transition: none;
  }
}