/* Hero: el mapa del corredor se dibuja conforme bajas y se deshace al subir. */

.hero {
  position: relative;
  /* Pista de scroll: el sobrante sobre 100svh es lo que dura la animación. */
  height: 200svh;
  background: var(--night);
  color: var(--night-ink);
  --grain: oklch(100% 0 0 / 0.028);
  background-image:
    radial-gradient(110% 65% at 82% 8%, oklch(30% 0.07 258 / 0.9), transparent 64%),
    repeating-linear-gradient(0deg, var(--grain) 0 1px, transparent 1px 3px);
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  /* La fila se acota a la altura del sticky; si no, el contenido la estira
     y el escenario se sale de pantalla. */
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.hero__inner {
  width: min(100% - 2.5rem, 1180px);
  height: 100%;
  min-height: 0;
  margin-inline: auto;
  padding-block: var(--space-5);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-content: center;
}

.hero__copy { display: grid; gap: var(--space-4); justify-items: start; align-content: center; }

.hero__title {
  font-size: var(--text-hero);
  font-weight: 800;
  font-variation-settings: 'wdth' 78;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 15ch;
}
.hero__title em {
  font-family: var(--font-text);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: normal;
  letter-spacing: -0.01em;
  color: var(--ambar);
}

/* ── Contexto de hoy ──────────────────────────────────────────────────── */
.hero__today {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0.7rem 1.1rem;
  border-left: 3px solid var(--ambar);
  background: oklch(100% 0 0 / 0.05);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.hero__today-day {
  display: flex;
  align-items: baseline;
  gap: 0.4ch;
  font-size: var(--text-lg);
  font-weight: 800;
  font-variation-settings: 'wdth' 88;
  letter-spacing: -0.01em;
}
.hero__today-meta {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ambar);
}

/* Rodillo de tragamonedas: la tira se desliza y frena en el día de hoy. */
.dayroll {
  display: inline-block;
  height: 1.15em;
  overflow: hidden;
  vertical-align: baseline;
}
.dayroll__strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.dayroll__item {
  height: 1.15em;
  line-height: 1.15em;
  white-space: nowrap;
  color: var(--ambar);
}
.dayroll__item:last-child { color: var(--night-ink); }

/* ── Escenario del mapa ───────────────────────────────────────────────── */
/* Mapa y rótulo van juntos y se centran como un bloque, sin hueco entre ambos. */
.hero__stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 0;
}

/* La caja del SVG toma la proporción del dibujo: así no reserva alto muerto. */
.corridor {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 340;
  max-height: 100%;
  min-height: 0;
  flex: 0 1 auto;
  overflow: visible;
}

.hero__caption {
  margin: 0;
  min-height: 2.6em;
  max-width: 34ch;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: oklch(72% 0.06 258);
  text-align: center;
  transition: color var(--duration-normal) ease;
}
.hero__caption--payoff { color: var(--ambar); }

/* Pesos del dibujo: en CSS porque dependen de cuánto se escala el SVG,
   y eso lo decide la orientación, no el ancho de la ventana. */
.corridor__ghost {
  fill: none;
  stroke: oklch(52% 0.035 258);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}
.corridor__track {
  fill: none;
  stroke: oklch(93% 0.02 258);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.corridor__dot {
  r: 3.6;
  fill: oklch(96% 0.01 258);
  stroke: var(--night);
  stroke-width: 1.5;
}
.corridor__dot--terminal { r: 6; fill: var(--ambar); stroke-width: 2.5; }
.corridor__label {
  fill: oklch(86% 0.03 258);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.corridor__span { stroke-width: 6; stroke-linecap: round; }
.corridor__fan-dot { r: 2.4; fill: oklch(97% 0.01 258); opacity: 0.85; }

@media (min-width: 62rem) {
  .hero__title { font-size: clamp(2.5rem, 4vw, 4.25rem); }
  .hero__copy { gap: var(--space-3); }
}

@media (max-width: 61.99rem) {
  .hero__title { font-size: clamp(2rem, 7vw, 3rem); }
}