/* ============================================================
   JurisOne — SISTEMA D · composición de las secciones
   01 · La portada (hero)   ·   04 · La cuenta (arquitectura)

   La lógica formal del sistema en una regla:
   UNA SOLA COLUMNA, DE ARRIBA A ABAJO. No hay retícula de dos campos, no
   hay margen de códigos, no hay matriz. Nada en esta página se pone al
   lado de otra cosa, porque la tesis es que todo esto es una sola cosa.
   Lo que ordena no es la posición: es el cuerpo de la letra y el aire.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   01 · LA PORTADA
   Un campo de ámbar a sangre completa, de borde a borde de la pantalla.
   Es la mitad de la razón por la que esta propuesta se reconoce a diez
   metros; la otra mitad es que después no vuelve a aparecer hasta el
   cierre, así que el ámbar no se gasta.
   ══════════════════════════════════════════════════════════ */
.portada {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.portada__lienzo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-bloque);
  padding-block: var(--espacio-bloque) var(--espacio-bloque-mayor);
}

.portada__cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--espacio-bloque-mayor);
}
.portada__cuerpo > * + * { margin-top: var(--espacio-grupo); }

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

/* La declaración: la resta, dicha. Va contra el filete inferior de la
   portada, alineada a la derecha en pantalla ancha, porque es una
   conclusión y las conclusiones van al final del renglón. */
.portada__declaracion {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--espacio-bloque);
  border-top: var(--trazo-hairline) solid var(--color-borde-fuerte);
}

.portada__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-elemento);
  padding-top: var(--espacio-elemento);
  border-top: var(--trazo-hairline) solid var(--color-borde-sutil);
}


/* ══════════════════════════════════════════════════════════
   04 · LA CUENTA (arquitectura)
   ══════════════════════════════════════════════════════════ */
.arquitectura__encabezado { margin-block: var(--espacio-bloque-mayor); }

.arquitectura__leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-elemento);
  padding-block: var(--espacio-elemento);
  border-top: var(--trazo-hairline) solid var(--color-borde-fuerte);
  margin-bottom: var(--espacio-capitulo);
}

.descenso > li + li { margin-top: var(--espacio-capitulo); }

.capa { position: relative; }

/* La cabecera de capa: loseta con el número de capa, rótulo de la
   pregunta y respuesta a cuerpo grande. La pregunta va antes que la
   respuesta porque así se lee un formulario y así piensa un comprador. */
.capa__indice { margin-bottom: var(--espacio-bloque); }

.capa__codigo {
  display: inline-block;
  padding: var(--espacio-minimo) var(--espacio-texto);
  background-color: var(--color-marca);
  color: var(--color-texto-inverso);
  font-family: var(--fuente-dato);
  font-weight: var(--peso-display-fuerte);
  font-size: var(--tamano-utilidad);
  letter-spacing: var(--tracking-dato);
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.capa__pregunta {
  display: block;
  margin-top: var(--espacio-elemento);
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-utilidad);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-utilidad);
  text-transform: uppercase;
  color: var(--color-texto-secundario);
}

.capa__nombre {
  display: block;
  margin-top: var(--espacio-minimo);
  font-family: var(--fuente-display);
  font-weight: var(--peso-display-fuerte);
  font-size: var(--tamano-subtitulo);
  line-height: var(--interlinea-subtitulo);
  letter-spacing: var(--tracking-subtitulo);
  color: var(--color-texto-principal);
}

.capa__cuerpo > * + * { margin-top: var(--espacio-bloque); }

/* Capas 01 y 02: están fuera de la plataforma y no son doce cosas, son
   tres o cuatro. Se dicen seguidas, como una sola frase. */
.lista-canal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-texto) var(--espacio-bloque);
}
.lista-canal__item {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tamano-placa);
  line-height: var(--interlinea-placa);
  letter-spacing: var(--tracking-placa);
  color: var(--color-texto-principal);
}

/* Los doce módulos: una sola columna de afirmaciones. Sin celdas, sin
   renglones, sin separadores. Lo que los agrupa es que están en la misma
   columna, que es exactamente lo que dice el producto. */
.rejilla-capa > li + li { margin-top: var(--espacio-bloque-mayor); }

/* Los rieles y el BIN sponsor sí se reparten, porque son tres cosas
   paralelas y no una lista: por ahí el dinero puede ir por cualquiera. */
.rejilla-capa--ancha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ancho-minimo-riel), 1fr));
  gap: var(--espacio-elemento);
}
.rejilla-capa--ancha > li + li { margin-top: 0; }

.modulo__detalle {
  color: var(--color-texto-secundario);
  font-size: var(--tamano-cuerpo-menor);
}

/* ---------- Rieles ---------- */
.riel__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-corto);
}
.riel__red {
  padding: var(--espacio-minimo) var(--espacio-texto);
  border: var(--trazo-hairline) solid var(--color-borde-control);
  border-radius: var(--radio-chip);
  font-family: var(--fuente-texto);
  font-weight: var(--peso-cuerpo-fuerte);
  font-size: var(--tamano-utilidad);
  color: var(--color-texto-principal);
}

/* ---------- Ecosistema abierto ---------- */
.ecosistema {
  margin-top: var(--espacio-capitulo);
  padding-top: var(--espacio-bloque);
  border-top: var(--trazo-hairline) solid var(--color-borde-fuerte);
}
.ecosistema__mecanismos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-corto);
}


/* ══════════════════════════════════════════════════════════
   12 · EL CIERRE — la página vuelve al ámbar y termina ahí
   ══════════════════════════════════════════════════════════ */
.cierre__ranuras { margin-block: var(--espacio-bloque); }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   Casi no hay nada que hacer: la página ya era una sola columna. Solo
   cambia dónde cae la declaración de la portada.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 52rem) {
  .portada__declaracion { justify-content: flex-start; }
}