/* ==========================================================================
   layout.css — Estructura de página: contenedores, rejillas, espaciado
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-6xl);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.page-main {
    padding-block: var(--space-20);
}

/* Separación vertical entre hijos directos (patrón "stack") */
.stack-xl > * + * {
    margin-top: var(--space-32);
}

/* Sección "Sobre mí": 1 columna en móvil, 2 en escritorio */
.about {
    display: grid;
    gap: var(--space-12);
    align-items: center;
}

/* Rejilla genérica de 2 columnas (proyectos, habilidades) */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 768px) {
    .about,
    .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}