/**
 * LAYOUT / LAYOUT
 * -----------------------------------------------------------------------------
 * Contenedores, secciones y rejillas genéricas. Estas clases no tienen estética
 * propia salvo el fondo de sección: solo resuelven ancho y ritmo vertical.
 */

/* --- Contenedor -------------------------------------------------------- */

.container {
    width: 100%;
    max-width: calc(var(--container) + var(--container-pad) * 2);
    margin: 0 auto;
    padding-inline: var(--container-pad);
}

.container--wide {
    max-width: calc(var(--container-wide) + var(--container-pad) * 2);
}

.container--narrow {
    max-width: calc(var(--container-narrow) + var(--container-pad) * 2);
}

/* --- Secciones --------------------------------------------------------- */

.section {
    padding: var(--section-padding) 0;
}

.section--compact {
    padding: var(--section-padding-md) 0;
}

.section--white {
    background: var(--bg);
}

.section--alt {
    background: var(--bg-alt);
}

/* Secciones oscuras: se combinan con la clase .is-dark de typography */
.section--dark {
    background: var(--gradient-dark-diag);
}

.section--navy {
    background: var(--navy);
}

.section--divided {
    border-bottom: 1px solid var(--border-soft);
}

/*
 * Capa de halo azul para las secciones oscuras. El contenido debe ir dentro
 * de un contenedor con .section__inner para quedar por encima.
 */
.section--glow {
    position: relative;
    overflow: hidden;
}

.section--glow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--glow-cta);
    pointer-events: none;
}

.section__inner {
    position: relative;
    z-index: var(--z-content);
}

/* --- Rejillas reutilizables -------------------------------------------- */

.grid {
    display: grid;
    gap: var(--gap-grid);
}

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

.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid--gap-lg {
    gap: 26px;
}

/* Dos columnas asimétricas (imagen + texto) */
.grid--split {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--gap-grid-lg);
    align-items: center;
}

.grid--split-reverse {
    grid-template-columns: 1.05fr 0.95fr;
}

/* --- Helpers de flujo -------------------------------------------------- */

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

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

/* --- Compensación del header fijo -------------------------------------- */

/*
 * La portada abre con un hero que ya incluye su propio espacio superior.
 * El resto de plantillas se separa del header fijo.
 */
body:not(.home) .site-main {
    padding-top: var(--header-height);
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1000px) {

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

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

    .grid--split,
    .grid--split-reverse {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

@media (max-width: 700px) {

    .container {
        padding-inline: var(--container-pad-md);
    }

    .section {
        padding: var(--section-padding-md) 0;
    }

    .grid--2,
    .grid--3,
    .grid--4,
    .grid--5 {
        grid-template-columns: 1fr;
    }

    body:not(.home) .site-main {
        padding-top: var(--header-height-md);
    }
}