.page-style-1 { margin-top: 15px; font-size: 0.9em; }

/* Arquitectura del sistema: las 4 capas en una sola fila (antes iban una debajo de otra, a todo el ancho) */
.arquitectura { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.arquitectura .layer { margin: 0; padding: 16px; display: flex; flex-direction: column; }
.arquitectura .layer-title { align-self: flex-start; }
.arquitectura .layer-items { display: flex; flex-direction: column; gap: 6px; }
.arquitectura .layer-item { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 0.82em; color: var(--text); }
@media (max-width: 900px) { .arquitectura { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .arquitectura { grid-template-columns: 1fr; } }