/* ============================================================
   JurisOne — SISTEMA A · Sección 04 · Arquitectura (el descenso)
   La sección donde la ausencia de iconos más se nota: aquí el peso lo cargan
   la espina del diagrama, la regla con marcas, el código de capa, la
   etiqueta de familia y la superficie (una placa está más arriba o más
   abajo del apilado).
   ============================================================ */

.arquitectura__encabezado { margin-bottom: var(--espacio-bloque-mayor); }

/* La leyenda estaba encerrada entre dos filetes, arriba y abajo. Era el
   caso más claro de la ronda 5: dos reglas horizontales para decir «esto de
   aquí es un bloque aparte». Se sustituyen por lo que la leyenda ES —un
   panel de mando— dándole la superficie que le corresponde: se hunde un
   plano respecto del campo. En un laminado, un bloque no se pauta, se
   escalona. Y de paso el recuadro hundido explica solo que los chips que hay
   dentro se pulsan, cosa que dos filetes no decían. */
.arquitectura__leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-elemento);
  padding: var(--espacio-grupo);
  background-color: var(--color-superficie-hundida);
  border-radius: var(--radio-panel);
  margin-bottom: var(--espacio-bloque-mayor);
}

/* ══════════════════════════════════════════════════════════
   EL DESCENSO
   ══════════════════════════════════════════════════════════ */
.descenso { position: relative; }

.capa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, var(--ancho-indice-capa)) minmax(0, 1fr);
  gap: var(--espacio-bloque);
  padding-block: var(--espacio-bloque);
  padding-inline-start: var(--espacio-bloque);
}

/* Espina: la línea vertical que se dibuja al descender. */
.capa::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--trazo-hairline);
  background-color: var(--color-trazo-diagrama);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--duracion-espina) var(--curva-descenso);
}
.capa[data-visible]::before { transform: scaleY(1); }

/* Nodo: vértice de diagrama donde una capa entrega a la siguiente. */
.capa::after {
  content: "";
  position: absolute;
  inset-block-start: var(--espacio-bloque);
  inset-inline-start: 0;
  width: var(--espacio-corto);
  height: var(--espacio-corto);
  translate: -50% 0;
  background-color: var(--color-texto-principal);
}

.capa__indice { position: sticky; top: var(--espacio-bloque); align-self: start; }
.capa__codigo { display: block; color: var(--color-texto-secundario); }
.capa__pregunta {
  display: block;
  margin-top: var(--espacio-corto);
  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);
}
.capa__nombre {
  display: block;
  margin-top: var(--espacio-corto);
  color: var(--color-texto-secundario);
  font-size: var(--tamano-cuerpo-menor);
}

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

/* Enunciado de capa (01 y 02): texto separado por hairline, sin placa.
   La ausencia de superficie dice que eso NO es materia de la plataforma. */
.lista-canal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-elemento) var(--espacio-bloque-mayor);
  align-items: baseline;
}
.lista-canal__item {
  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);
}

/* Rejilla de placas de una capa */
.rejilla-capa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ancho-minimo-placa), 1fr));
  gap: var(--espacio-texto);
  align-items: start;   /* al abrir un detalle, las hermanas no se estiran */
}
.rejilla-capa--ancha { grid-template-columns: repeat(auto-fit, minmax(var(--ancho-minimo-placa-ancha), 1fr)); }

/* ---------- Detalle de módulo dentro de la placa ---------- */
.modulo__detalle { color: var(--color-texto-secundario); font-size: var(--tamano-cuerpo-menor); }
.modulo__detalle .lista-llana { margin-top: var(--espacio-texto); }

/* ---------- Capa de rieles ---------- */
.riel__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-corto);
  margin-top: var(--espacio-texto);
}
.riel__red {
  padding: var(--espacio-minimo) var(--espacio-corto);
  border: var(--trazo-hairline) solid var(--color-borde-fuerte);
  border-radius: var(--radio-chip);
  font-family: var(--fuente-utilidad);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-utilidad);
  color: var(--color-texto-principal);
}

/* ══════════════════════════════════════════════════════════
   ECOSISTEMA ABIERTO — nota al pie de la arquitectura, no sección propia.
   Va siempre en el CONTEXTO CONTRARIO al de la página: es «el otro lado».
   En la propuesta oscura es la lámina del cliente sobre el sustrato; en la
   clara es el sustrato de JurisOne bajo la lámina del cliente. Mismo
   marcado, una clase de contexto distinta, y todo el bloque se resuelve.
   ══════════════════════════════════════════════════════════ */
.ecosistema {
  margin-top: var(--espacio-capitulo);
  padding: var(--espacio-bloque-mayor);
  border-radius: var(--radio-seccion);
}
.ecosistema__mecanismos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-corto);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 60rem) {
  .capa {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-grupo);
    padding-block: var(--espacio-bloque);
  }
  .capa__indice { position: static; }
  .ecosistema { padding: var(--espacio-bloque); }
}