/* ========================================
   NAVAO | Hero — The Horizon Frame
   ======================================== */

.hero {
  position: relative;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  background-color: var(--color-black-deep);
}

/* Imagen de fondo con zoom y parallax */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;

  will-change: transform;
  transform-origin: center center;
}

/* Movimiento cinematográfico independiente */
.hero__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: 65% 55%;

  transform: scale(1.04);
  transform-origin: 65% 55%;

  animation:
    hero-cinematic-drift
    18s
    ease-in-out
    infinite
    alternate;

  will-change: transform;
}

/* Movimiento lento tipo cinemagraph */
@keyframes hero-cinematic-drift {
  0% {
    transform:
      scale(1.04)
      translate3d(0, 0, 0);
  }

  100% {
    transform:
      scale(1.09)
      translate3d(-1.2%, -0.8%, 0);
  }
}

/* Degradados para legibilidad */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      100deg,
      rgba(10, 10, 10, 0.82) 0%,
      rgba(10, 10, 10, 0.45) 34%,
      rgba(10, 10, 10, 0) 62%
    ),
    linear-gradient(
      to top,
      rgba(10, 10, 10, 0.85) 0%,
      rgba(10, 10, 10, 0) 45%
    );
}

/* Contenido principal */
.hero__inner {
  position: relative;
  z-index: 2;

  width: min(
    calc(100% - (var(--page-padding) * 2)),
    var(--content-width)
  );

  margin-inline: auto;

  padding-top: clamp(120px, 18vh, 220px);
  padding-bottom: clamp(48px, 8vh, 110px);
}

.hero__kicker {
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

/* Titular */
.hero__title {
  max-width: 15ch;

  font-family: var(--font-display);
  font-size: clamp(
    2.75rem,
    1.6rem + 5.2vw,
    6.5rem
  );
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;

  color: var(--color-text-light);
}

.hero__title em {
  font-style: italic;
  font-weight: 400;

  color: var(--color-text-light);
}

/* Subtítulo */
.hero__subtitle {
  max-width: 45ch;

  margin-top: clamp(20px, 2.6vw, 30px);

  font-family: var(--font-body);
  font-size: clamp(
    1rem,
    0.95rem + 0.35vw,
    1.2rem
  );
  font-weight: 400;
  line-height: 1.6;

  color: var(--color-text-muted-light);
}

/* Acciones */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: clamp(14px, 1.6vw, 20px);

  margin-top: clamp(30px, 4vw, 46px);
}

/* Botón principal */
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;
  padding-inline: 34px;

  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;

  color: var(--color-black-deep);
  background-color: var(--color-ivory);

  border-radius: var(--radius-pill);

  transition:
    transform var(--transition-hover),
    box-shadow var(--transition-hover);
}

.hero__cta:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-floating);
}

/* Enlace secundario */
.hero__link-secondary {
  display: inline-flex;
  align-items: center;

  min-height: 52px;
  gap: 8px;
  padding-inline: 8px;

  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;

  color: var(--color-text-light);

  transition:
    color var(--transition-hover),
    gap var(--transition-hover);
}

.hero__link-secondary span {
  display: inline-block;

  transition:
    transform var(--transition-hover);
}

.hero__link-secondary:hover {
  color: var(--color-gold);
  gap: 12px;
}

.hero__link-secondary:hover span {
  transform: translateX(2px);
}

/* Ficha flotante glass */
.hero__ticket {
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  bottom: clamp(40px, 8vh, 96px);
  z-index: 2;

  display: grid;
  gap: 8px;

  min-width: 260px;
  padding: 18px 22px;

  background-color: var(--glass-dark);

  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--border-light);
  border-radius: var(--radius-card);

  box-shadow: var(--shadow-floating);
}

/* Coordenadas animadas */
.hero__ticket-coords {
  display: block;

  min-width: 22ch;

  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;

  color: var(--color-text-muted-light);

  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Ruta */
.hero__ticket-route {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;

  color: var(--color-text-light);

  white-space: nowrap;
}

/* Estado */
.hero__ticket-status {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: var(--color-text-muted-light);
}

.hero__ticket-status::before {
  content: "";

  width: 6px;
  height: 6px;

  flex-shrink: 0;

  background-color: var(--color-gold);
  border-radius: 50%;
}

/* Tablets */
@media (max-width: 960px) {
  .hero__title {
    max-width: 13ch;
  }

  .hero__ticket {
    right: var(--page-padding);
    bottom: clamp(32px, 6vh, 64px);

    min-width: 240px;
  }
}

/* Móviles */
@media (max-width: 720px) {
  .hero__media img {
    object-position: 58% 50%;
    transform-origin: 58% 50%;

    animation-duration: 22s;
  }

  .hero__scrim {
    background:
      linear-gradient(
        to top,
        rgba(10, 10, 10, 0.92) 0%,
        rgba(10, 10, 10, 0.48) 56%,
        rgba(10, 10, 10, 0.16) 100%
      );
  }

  .hero__inner {
    padding-top: 140px;
    padding-bottom: 48px;
  }

  .hero__title {
    max-width: 11ch;
  }

  .hero__subtitle {
    max-width: 34ch;
  }

  .hero__ticket {
    display: none;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta,
  .hero__link-secondary {
    justify-content: center;
  }
}

/* Accesibilidad: desactivar movimiento */
@media (prefers-reduced-motion: reduce) {
  .hero__media {
    transform: none !important;
  }

  .hero__media img {
    animation: none;
    transform: scale(1.04);
  }
}