/* ============================================================
   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__ficha    { grid-column: 8 / -1; align-self: end; }

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

/* ---------- La ficha del hero (ronda 5) ----------
   El índice del descenso se fue al header convertido en agenda de la página,
   y el hero se quedaba cojo: titular enorme a la izquierda y medio lienzo
   vacío a la derecha. Lo que ocupa ese sitio no puede ser un bloque de
   métricas de marketing —el default de cualquier landing— sino lo que la
   página ya declara de sí misma: de cuántas piezas se compone el sistema y
   sobre qué norma está trazada la retícula. La leyenda de un plano.

   Va sobre superficie hundida y con radio de panel. Ese es el dispositivo
   con el que esta ronda separa sin líneas: en un laminado los bloques no se
   pautan, se apilan — uno sube de plano o se hunde. */
.hero__ficha {
  padding: var(--espacio-grupo);
  background-color: var(--color-superficie-hundida);
  border-radius: var(--radio-panel);
}
.hero__cuenta {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tamano-subtitulo);
  font-variation-settings: "wdth" var(--ancho-subtitulo);
  line-height: var(--interlinea-subtitulo);
  letter-spacing: var(--tracking-subtitulo);
  color: var(--color-texto-principal);
}
.hero__norma {
  margin-top: var(--espacio-elemento);
  color: var(--color-texto-secundario);
}

/* ---------- Pie del hero: solo el andamiaje de comparación ----------
   Perdió el filete superior con el resto de reglas de la ronda 5, y perdió
   también la retícula declarada, que subió a la ficha. Lo que queda es el
   selector de propuestas, que no es de la página: se retira al elegir una.
   Por eso se va al margen y no reclama nada. */
.hero__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--espacio-elemento);
  align-items: center;
  padding-top: var(--espacio-grupo);
}

/* ---------- Costura inferior del hero ---------- */

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

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