/* ============================================================
   JurisOne — SISTEMA C · composición de las secciones
   01 · El tablero (hero)   ·   04 · La matriz (arquitectura)

   La lógica formal del sistema en una regla:
   TODO LO QUE SE PUEDE CONTAR SE DIBUJA COMO MATRIZ. Los cinco puertos
   del hero, los doce módulos de la plataforma, los tres rieles: la misma
   retícula de celdas con filete compartido, a tres escalas. Nada se
   apila, nada flota, nada se separa con aire.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   01 · EL TABLERO
   ══════════════════════════════════════════════════════════ */
.tablero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

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

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

/* El titular pisa el filete del rótulo: la señal empieza antes de que
   termine la barra de estado. Es el único sitio de la página donde algo
   se sale de su casilla. */
.tablero__cuerpo .titular-mayor { margin-inline-start: var(--sangria-optica-titular); }

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

/* ---------- La matriz de puertos: el índice de las cinco capas ---------- */
.tablero__matriz > * + * { margin-top: var(--espacio-texto); }

.matriz-puertos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ancho-puerto), 1fr));
  border-block-start: var(--trazo-hairline) solid var(--color-borde-fuerte);
  border-inline-start: var(--trazo-hairline) solid var(--color-borde-fuerte);
}
.matriz-puertos__celda {
  border-block-end: var(--trazo-hairline) solid var(--color-borde-fuerte);
  border-inline-end: var(--trazo-hairline) solid var(--color-borde-fuerte);
}
.matriz-puertos__enlace {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-minimo);
  height: 100%;
  min-height: var(--toque-minimo);
  padding: var(--espacio-elemento);
  text-decoration: none;
  color: var(--color-texto-principal);
  transition: background-color var(--duracion-hover) var(--curva-salida);
}
.matriz-puertos__codigo { color: var(--color-texto-secundario); }
.matriz-puertos__nombre {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tamano-placa);
  line-height: var(--interlinea-placa);
  text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
  .matriz-puertos__enlace:hover {
    background-color: color-mix(in srgb, var(--color-marca) 10%, transparent);
  }
}

/* ---------- Pie del tablero ---------- */
.tablero__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 MATRIZ (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-block: var(--trazo-hairline) solid var(--color-borde-fuerte);
  margin-bottom: var(--espacio-bloque-mayor);
}

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

.capa {
  position: relative;
  padding-block: var(--espacio-bloque);
}

/* La cabecera de capa es una placa de equipo: arriba el renglón de
   referencia (código a la izquierda, pregunta a la derecha) y debajo, a
   plomo con el código, el nombre de la capa. Las tres cosas que hay que
   saber, en dos renglones y sin sangrías. */
.capa__indice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--espacio-elemento) var(--espacio-grupo);
  padding-bottom: var(--espacio-elemento);
  border-bottom: var(--trazo-marca) solid var(--color-borde-fuerte);
  margin-bottom: var(--espacio-bloque);
}
.capa__codigo   { grid-area: 1 / 1; color: var(--color-texto-secundario); }
.capa__nombre   {
  grid-area: 2 / 1 / 3 / 3;
  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);
  text-transform: uppercase;
  color: var(--color-texto-principal);
}
.capa__pregunta {
  grid-area: 1 / 2;
  justify-self: end;
  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__cuerpo > * + * { margin-top: var(--espacio-elemento); }

/* ---------- EL CAMPO VERDE: la capa 03 ----------
   El elemento firma de la propuesta. La plataforma —lo único que JurisOne
   realmente es— se inunda de verde a sangre completa y todo lo demás
   queda en papel. El color no decora la sección: dice dónde empieza y
   dónde termina el producto. */
.capa[data-superficie="elevada"] {
  padding-block: var(--espacio-capitulo);
  padding-inline: var(--espacio-borde-pantalla);
}
.capa[data-superficie="elevada"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(50% - 50vw);
  background-color: var(--color-plataforma);
  z-index: -1;
}

/* ---------- Capas 01 y 02: los puertos de entrada ----------
   Están FUERA de la plataforma, así que no se empacan en celdas: se
   enuncian en fila, como los puertos rotulados de un panel. */
.lista-canal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.lista-canal__item {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tamano-subtitulo);
  line-height: var(--interlinea-subtitulo);
  text-transform: uppercase;
  color: var(--color-texto-principal);
  padding-inline-end: var(--espacio-grupo);
  margin-inline-end: var(--espacio-grupo);
  border-inline-end: var(--trazo-hairline) solid var(--color-borde-fuerte);
}
.lista-canal__item:last-child {
  padding-inline-end: 0;
  margin-inline-end: 0;
  border-inline-end: 0;
}

/* ---------- La matriz de módulos ----------
   Celdas de filete compartido: un panel de puertos, no una rejilla de
   tarjetas. Ninguna celda tiene fondo propio, ninguna tiene esquina y
   ninguna se separa de la de al lado. */
.rejilla-capa {
  display: grid;
  /* auto-fit y no auto-fill: cuando una capa tiene una sola entrada (el BIN
     sponsor) la celda ocupa el ancho completo en vez de dejar tres pistas
     vacías con su filete dibujado. La retícula se ajusta al contenido. */
  grid-template-columns: repeat(auto-fit, minmax(var(--ancho-celda), 1fr));
  border-block-start: var(--trazo-hairline) solid var(--color-borde-fuerte);
  border-inline-start: var(--trazo-hairline) solid var(--color-borde-fuerte);
}
.rejilla-capa > li {
  display: flex;
  border-block-end: var(--trazo-hairline) solid var(--color-borde-fuerte);
  border-inline-end: var(--trazo-hairline) solid var(--color-borde-fuerte);
}
.rejilla-capa--ancha { --ancho-celda: var(--ancho-minimo-placa-ancha); }

.modulo__detalle {
  color: var(--color-texto-secundario);
  font-size: var(--tamano-cuerpo-menor);
}
.modulo__detalle .lista-llana { margin-top: var(--espacio-corto); }

/* ---------- Rieles ---------- */
.riel__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-corto);
}
.riel__red {
  padding: var(--espacio-minimo) var(--espacio-corto);
  border: var(--trazo-hairline) solid var(--color-borde-control);
  font-family: var(--fuente-dato);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-dato);
  color: var(--color-texto-principal);
}

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


/* ══════════════════════════════════════════════════════════
   12 · EL CIERRE — la página termina dentro de la plataforma
   ══════════════════════════════════════════════════════════ */
.cierre__ranuras { margin-block: var(--espacio-bloque); }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   La matriz no desaparece: se estrecha hasta una sola columna, que sigue
   siendo una matriz de una columna. La retícula nunca se rompe.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 52rem) {
  .capa__indice {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-minimo);
  }
  .capa__codigo   { grid-area: 1 / 1; }
  .capa__pregunta { grid-area: 2 / 1; justify-self: start; }
  .capa__nombre   { grid-area: 3 / 1; }
  /* Los puertos de entrada dejan de ir en fila: en una columna estrecha el
     filete vertical queda colgando al final de cada línea rota. Pasan a
     renglones separados por filete horizontal — la misma idea, girada. */
  .lista-canal { display: block; }
  .lista-canal__item {
    padding: var(--espacio-corto) 0;
    margin-inline-end: 0;
    border-inline-end: 0;
  }
  .lista-canal__item + .lista-canal__item {
    border-block-start: var(--trazo-hairline) solid var(--color-borde-fuerte);
  }
}

@media (max-width: 30rem) {
  .tablero__cuerpo .titular-mayor { margin-inline-start: 0; }
}