/* ============================================================
   HERO.CSS — Sección principal con enfoque cinematográfico.
   ============================================================ */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-sm);
  scroll-margin-top: 80px;
  background-image:
    radial-gradient(circle at top center, rgba(111, 175, 95, 0.12), transparent 24%),
    var(--overlay-gradient),
    url("../assets/images/general/image-hero.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-text-primary);
  position: relative;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: min(100%, var(--max-width-narrow));
  padding-block: var(--space-4xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.hero__eyebrow {
  /* Tamaño, tracking, mayúsculas y color ya los da la utilidad
     compartida ".eyebrow" (aplicada también en el HTML). Aquí solo
     se ajusta el peso para que sea el más marcado de la página,
     ya que es la primera etiqueta que lee la persona. */
  font-weight: var(--fw-bold);
}

.hero__title {
  width: 100%;
  max-width: var(--max-width-narrow);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0;
}

.hero__description {
  margin: 0;
  max-width: 100%;
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-button);
  background-color: var(--color-green);
  color: var(--color-bg-primary);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-fast);
}

.hero__cta:hover {
  transform: translateY(-1px) scale(1.01);
  background-color: var(--color-green-hover);
  box-shadow: var(--shadow-glow-green);
}

.hero__scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: var(--space-xl);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.35rem;
  opacity: 0.92;
  animation: hero-scroll 2.8s ease-in-out infinite;
}

@keyframes hero-scroll {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}


/* ---------- Ajustes de estabilidad (no rediseño) ---------- */

.hero__title {
  font-size: clamp(2.25rem, 6vw + 1rem, var(--fs-4xl));
}

@media (max-width: 480px) {
  .hero__content {
    padding-block: var(--space-2xl);
  }
}