/* ------------------------------------------------------------------
   Layout — grid, contenedores, ritmo vertical
   ------------------------------------------------------------------ */

body {
    overflow-x: hidden;
}

.shell {
    width: 100%;
    max-width: var(--grid-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.shell--narrow { max-width: 1080px; }
.shell--wide   { max-width: 1800px; }

/* Rejilla editorial de 12 columnas. La usan las secciones que quieren
   romper la caja centrada: texto en 5 columnas, imagen a sangre, un
   dato desplazado al margen. */
.grid12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-s);
}

@media (max-width: 900px) {
    .grid12 {
        grid-template-columns: repeat(6, 1fr);
    }
}

.section {
    padding-block: var(--space-xl);
    position: relative;
}

.section--tight { padding-block: var(--space-l); }
.section--tall  { padding-block: var(--space-2xl); }
.section--flush { padding-block: 0; }

/* Cabecera de sección: numeración mono + titular + entradilla.
   Repetirla da al scroll un pulso reconocible, como los capítulos de
   un impreso. */
.section-head {
    display: grid;
    gap: var(--space-s);
    margin-bottom: var(--space-l);
}

.section-head__index {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.section-head__index::after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--rule);
    max-width: 12rem;
}

@media (min-width: 1024px) {
    .section-head--split {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: end;
        gap: var(--space-m);
    }

    .section-head--split .section-head__index {
        grid-column: 1 / -1;
    }
}

.rule {
    height: 1px;
    background: var(--rule);
    border: 0;
    margin: 0;
}

/* Utilidades de flujo — espaciado por relación, no por márgenes sueltos */
.stack > * + * { margin-top: var(--space-s); }
.stack-s > * + * { margin-top: var(--space-xs); }
.stack-l > * + * { margin-top: var(--space-m); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-overlay);
    background: var(--ink);
    color: var(--paper);
    padding: var(--space-xs) var(--space-s);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
}

.skip-link:focus {
    left: var(--gutter);
    top: var(--space-xs);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}