/* ============================================================
   JurisOne — SISTEMA A · Sección 01 · Hero
   Consume EXCLUSIVAMENTE tokens semánticos y componentes de la librería.
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-block-end: 0;
  isolation: isolate;
}

.hero__lienzo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espacio-capitulo);
  padding-block: var(--espacio-bloque) var(--espacio-capitulo);
}

/* ---------- Composición principal ---------- */
.hero__cuerpo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--espacio-bloque-mayor) var(--espacio-bloque);
  align-items: start;
}

.hero__cinta    { grid-column: 1 / -1; margin-bottom: 0; }
.hero__titular  { grid-column: 1 / -1; max-width: 14ch; }
.hero__discurso { grid-column: 1 / span 6; }
.hero__indice   { grid-column: 8 / -1; align-self: end; }

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-texto);
  margin-top: var(--espacio-grupo);
}

/* ---------- Índice del descenso ----------
   No es decoración: es la tabla de contenidos de la arquitectura real del
   producto y navega a cada capa. Sustituye al típico bloque de métricas. */
.indice-descenso {
  border-top: var(--trazo-hairline) solid var(--color-borde-sutil);
}

.indice-descenso__fila {
  border-bottom: var(--trazo-hairline) solid var(--color-borde-sutil);
}

.indice-descenso__enlace {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--espacio-elemento);
  min-height: var(--toque-minimo);
  padding-block: var(--espacio-texto);
  text-decoration: none;
  color: var(--color-texto-secundario);
  transition:
    color var(--duracion-hover) var(--curva-salida),
    padding-inline-start var(--duracion-hover) var(--curva-salida);
}
.indice-descenso__codigo {
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-utilidad);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-utilidad);
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-secundario);
}
.indice-descenso__nombre {
  font-family: var(--fuente-display);
  font-weight: var(--peso-cuerpo-fuerte);
  font-size: var(--tamano-placa);
  font-variation-settings: "wdth" var(--ancho-placa);
  color: var(--color-texto-principal);
}
@media (hover: hover) and (pointer: fine) {
  .indice-descenso__enlace:hover {
    color: var(--color-texto-principal);
    padding-inline-start: var(--espacio-corto);
  }
}

/* ---------- Pie del hero: la retícula declarada y el andamiaje ---------- */
.hero__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-elemento);
  align-items: center;
  padding-top: var(--espacio-elemento);
  border-top: var(--trazo-hairline) solid var(--color-borde-sutil);
}

/* ---------- Costura inferior del hero ---------- */
.hero__canto { margin-top: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 60rem) {
  .hero__discurso,
  .hero__indice { grid-column: 1 / -1; }
  .hero__titular { max-width: 18ch; }
  .hero__indice { align-self: start; }
}

@media (max-width: 30rem) {
  .hero__acciones .boton { flex: 1 1 100%; }
}