/* ============================================================
   RELEVANTE.IA — P03 · HERO
   ============================================================ */

.hero {
  position: relative;
  border-top: none;
}

/* El centro llena el primer viewport menos la nav y menos el
   asomo de la tabla (120px), de modo que la tabla queda cortada
   exactamente por el fold en flujo normal, sin hacks. */
.hero__centro {
  min-height: calc(100svh - 72px - 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 80px;
  padding-bottom: 56px;
}

.hero__h1 {
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.028em;
}
.hero__h1 .hero__linea { display: block; }

/* ---------- Rotor ---------- */
/* inline-grid: los tres valores comparten celda; el ancho del
   contenedor es el del más largo -> la línea 1 jamás se mueve. */
.rotor {
  display: grid;
  justify-items: center;
}
.rotor__valor {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  filter: blur(6px);
  transition:
    opacity 450ms var(--ease-out),
    transform 450ms var(--ease-out),
    filter 450ms var(--ease-out),
    visibility 0s linear 450ms;
}
.rotor__valor.esta-activo {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 450ms var(--ease-out),
    transform 450ms var(--ease-out),
    filter 450ms var(--ease-out),
    visibility 0s;
}
.rotor__valor.esta-saliendo {
  opacity: 0;
  visibility: visible;
  transform: translateY(-20px);
  filter: blur(6px);
}
.rotor__glifo { height: 0.62em; width: auto; }
.rotor__glifo--chatgpt { height: 0.78em; } /* su dibujo tiene aire interno: se compensa óptico */

@media (prefers-reduced-motion: reduce) {
  .rotor__valor { transition: none; }
}

.hero__sub {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}

.hero__ctas {
  margin-top: 32px;
  display: flex;
  gap: 12px;
}

/* ---------- Tabla cortada por el fold ---------- */
.hero__tabla {
  width: 86%;
  margin-inline: auto;
  padding: 24px 32px 32px;
}
.hero__tabla table { width: 100%; border-collapse: collapse; }
.hero__tabla th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
  text-align: left;
  padding: 0 16px 14px 0;
}
.hero__tabla td {
  font-size: 14px;
  color: #FFFFFF;
  padding: 14px 16px 14px 0;
  border-top: 1px solid var(--ink-soft);
  white-space: nowrap;
}
.hero__tabla td.consulta { font-family: var(--font-mono); font-size: 13px; white-space: normal; }
.hero__tabla td.lima { color: var(--accent); }
.hero__tabla td.tendencia { color: var(--on-ink-muted); }

@media (max-width: 767px) {
  .hero__h1 { font-size: clamp(40px, 11vw, 56px); }
  .hero__ctas { flex-direction: column; width: 100%; gap: 8px; padding-inline: var(--gutter); }
  .hero__ctas .boton { width: 100%; justify-content: center; }
  .hero__tabla { width: 100%; padding: 20px; }
  .hero__tabla .col-posicion, .hero__tabla .col-tendencia { display: none; }
}

/* Filas de la tabla: entran escalonadas tras la entrada del hero */
body.con-motion .hero__tabla tbody tr {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 500ms ease, transform 500ms var(--ease-out);
}
body.con-motion.ha-entrado .hero__tabla tbody tr { opacity: 1; transform: none; }
body.con-motion.ha-entrado .hero__tabla tbody tr:nth-child(1) { transition-delay: 950ms; }
body.con-motion.ha-entrado .hero__tabla tbody tr:nth-child(2) { transition-delay: 1080ms; }
body.con-motion.ha-entrado .hero__tabla tbody tr:nth-child(3) { transition-delay: 1210ms; }
body.con-motion.ha-entrado .hero__tabla tbody tr:nth-child(4) { transition-delay: 1340ms; }

/* Barrido: una fila se ilumina cada pocos segundos */
.hero__tabla tbody tr { transition: background 400ms ease; }
.hero__tabla tbody tr.esta-barrida { background: #1A1A1A; }
.hero__tabla tbody tr.esta-barrida td.lima { text-shadow: 0 0 14px rgba(221, 245, 10, 0.8); }