/* ============================================================
   HERO — Logo con parallax + rotación, título masivo
   ============================================================ */

.hero {
  text-align: center;
  background: var(--black);
}

/* Logo fantasma girando en el fondo.
   Centrado con la propiedad individual `translate` (la usa el parallax en JS)
   y giro con `transform` — así ambos se componen sin pisarse. */
.hero__ghost {
  position: absolute;
  top: 50%; left: 50%;
  width: min(120vw, 900px);
  max-width: none;
  opacity: .06;
  filter: invert(1);            /* logo blanco sobre negro */
  translate: -50% -50%;
  animation: spin 60s linear infinite;
  pointer-events: none;
  z-index: 0;
  will-change: transform, translate;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__ghost { animation: none; }
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.hero__kicker {
  color: var(--accent);
  margin-bottom: 1.4rem;
}

.hero__title {
  font-family: var(--font-title);
  line-height: .82;
  letter-spacing: -.01em;
  margin: 0;
  display: flex;
  gap: .12em;
  justify-content: center;
  align-items: baseline;
}
.hero__word {
  font-size: clamp(3.6rem, 16vw, 11rem);
  color: var(--white);
  display: inline-block;
}
.hero__word--accent {
  color: var(--accent);
  -webkit-text-stroke: 0;
}

.hero__tagline {
  font-size: clamp(.9rem, 2.2vw, 1.2rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 1.4rem;
  color: var(--white);
}
.hero__place {
  font-size: .82rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: .8rem;
}

.hero__actions {
  margin-top: 2.4rem;
}

/* Indicador de scroll */
.hero__scroll {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gray-500);
  z-index: 2;
}
.hero__scroll-line {
  width: 1px; height: 42px;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollpulse 2s ease-in-out infinite;
}
@keyframes scrollpulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(.4); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line { animation: none; }
}