/* ══════════════════════════════════════════════════════════════
   SECTION: HERO
   ══════════════════════════════════════════════════════════════ */

#hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(60px, 8vw, 100px);
}

/* ── Slideshow de fondo ─────────────────────────────────────── */

.hero__slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: -10%;          /* margen extra para el parallax */
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: high-quality;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.hero__slide--active {
  opacity: 1;
}

/* ── Posición individual de cada foto ───────────────────────── */

/* Foto 1: alineada arriba, cubre todo */
.hero__slide:nth-child(1) {
  background-position: center top;
  background-size: cover;
}

/* Foto 2 (hero-bg-3): alineada arriba, cubre todo */
.hero__slide:nth-child(2) {
  background-position: center top;
  background-size: cover;
}


/* ── Gradient overlay ───────────────────────────────────────── */

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 11, 13, 0.05) 0%,
    rgba(10, 11, 13, 0.40) 40%,
    rgba(10, 11, 13, 0.85) 75%,
    rgba(10, 11, 13, 0.96) 100%
  );
  z-index: 1;
}

/* ── Hero content ──────────────────────────────────────────── */

.hero__content {
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  display: none;
}

.hero__name {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: 0;
}

.hero__tagline {
  margin-bottom: 0;
  line-height: var(--leading-relaxed);
}

.hero__actions {
  display: none;
}

/* ── Scroll indicator ───────────────────────────────────────── */

.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* ── Decorative corner accent ───────────────────────────────── */

#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8,10,15,0.45) 0%,
    rgba(8,10,15,0.30) 40%,
    rgba(8,10,15,0.12) 65%,
    rgba(8,10,15,0.02) 85%
  );
  z-index: 1;
  pointer-events: none;
}

#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 30% at 100% 0%,
    rgba(8,10,15,0.55) 0%,
    transparent 70%
  );
  z-index: 1;
  pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__actions .btn-primary,
  .hero__actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}