@layer layout;

/* ═══════════════════════════════════════════════════════════════
   CAPA 3: LAYOUT
   Primitivas de layout (nomenclatura en inglés).
   Todos los espaciados usan la escala --space-* (mobile-first).
   ─────────────────────────────────────────────────────────── */

/* ── Contenedor central ───────────────────────────────────── */
/* El margen lateral (gutter) es único y global (--gutter): lo comparten
   topbar, cabecera, bandas de título, secciones de contenido y pie, de modo
   que todos los bloques comparten el mismo borde izquierdo y derecho. */
.container {
    width: min(100%, var(--content-width));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* ── Stack (apilado vertical con espaciado) ───────────────── */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Variante compacta del apilado: sin separación entre filas (--space-0 = 0).
   Es la lista de datos de contacto, que va pegada como en producción
   (Xavi 2026-10-16). */
.stack--compact {
    gap: var(--space-0);
}

/* ── Grid (rejilla adaptable) ─────────────────────────────── */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ── Cluster (grupo horizontal con ajuste) ────────────────── */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.cluster--between {
    justify-content: space-between;
}

.cluster--center {
    justify-content: center;
}

/* ── Sección genérica ─────────────────────────────────────── */
.section {
    padding-block: var(--space-4);
}

.section--compact {
    padding-block: var(--space-3);
}

/* Banda de título de página (.section--band, siempre con .section--primary):
   franja de identidad con aire arriba y abajo gracias a su padding vertical
   propio (--section-band-padding-block, token fluido); el tamaño del título
   lo fija --page-title-band-font-size en la capa de componentes. */
.section--band {
    padding-block: var(--section-band-padding-block);
}

/* Fondo azul de identidad: banda de título de página y bloques azules
   (portada, Fase 3). Solo color; el espaciado lo da .section / .section--compact. */
.section--primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

/* El texto de la banda azul es blanco (--color-surface). Los títulos y las
   listas ya lo heredan, pero los párrafos NO: la regla global `p` de la capa
   base fijaría --color-text (gris oscuro) sobre el azul, con contraste
   insuficiente. Se fuerza la herencia en el ámbito de la banda. */
.section--primary p,
.section--primary a {
    color: inherit;
}

/* Fondo suave para bloques secundarios. */
.section--alt {
    background-color: var(--color-surface-alt);
}

/* ── Responsive ──────────────────────────────────────────────
   NOTA: los media queries no admiten `var()`, por lo que los puntos de
   corte se repiten como literales en px y DEBEN coincidir con los tokens
   --bp-desktop (1000px), --bp-tablet (768px) y --bp-mobile (480px). */

@media (max-width: 1000px) {
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid,
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .cluster {
        flex-direction: column;
    }
}