/* ============================================================
   Hero section
   Dark gradient, 100vh desktop, min-height: 100svh mobile,
   centered content, scroll indicator with CSS bounce animation
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;            /* min-height: 100svh on mobile prevents content clipping */
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-carbon);
  background-size: 100% auto;
  background-position: center 30%;
  background-repeat: no-repeat;
  overflow: hidden;
  /* Override section default padding for hero (uses full height instead) */
  padding-block: 0;
}

/* Dark overlay: heavy at top (text legibility) → lightens mid → solid dark at bottom */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(18,18,18,0.82) 0%,
      rgba(18,18,18,0.65) 40%,
      rgba(18,18,18,0.90) 75%,
      rgba(18,18,18,1.00) 100%
    );
  z-index: 0;
}

.hero .hero__container {
  position: relative;
  z-index: 1;
}

.hero .hero__scroll-indicator {
  position: absolute;
  z-index: 1;
}

/* Adjust padding to avoid header overlap on mobile */
@media (max-width: 1023px) {
  .hero {
    height: auto;
    min-height: 100svh;
    padding-block: calc(var(--header-height) + var(--space-2xl)) var(--space-2xl);
  }
}

.hero__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__content {
  max-width: 52rem;   /* ~832px — constrains line length for readability */
}

/* Hero H1 — display scale */
.hero__heading {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  color: var(--color-white);
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-xl);
}

/* Gold accent line under H1 — 48px × 3px, centered */
.hero__heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background-color: var(--color-gold-500);
  margin: var(--space-md) auto 0;  /* centered below heading */
}

.hero__subheadline {
  font-family: var(--font-body);
  font-size: 1.125rem;  /* 18px — slightly larger than body for hero context */
  line-height: var(--lh-body);
  color: var(--color-steel-mid);
  margin-bottom: var(--space-2xl);
  max-width: 40rem;
  margin-inline: auto;
}

/* CTA row — horizontal flex, collapses on very small mobile */
.hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

/* Trayectoria tagline — small text with gold separator line above */
.hero__trayectoria {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-label);   /* 14px */
  font-weight: var(--fw-regular);
  color: var(--color-steel-mid);
  letter-spacing: 0.02em;
}

.hero__trayectoria-line {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-gold-300);
}

/* ============================================================
   Scroll indicator — fixed at bottom center of hero
   Pure CSS bounce animation, no JS required
   ============================================================ */

.hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-gold-500);
  animation: bounce 1.5s ease-in-out infinite;
}

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