/*
 * layout.css
 * ------------------------------------------------------------
 * Estructura general del sitio: container, header, footer,
 * grids principales. Componentes UI reutilizables van en
 * components.css.
 * ------------------------------------------------------------
 */

/* ==========================================================
   Container
   ========================================================== */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* ==========================================================
   Site header (público)
   ========================================================== */
.site-header {
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-xl);
}

.site-header h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

/* ==========================================================
   Site footer (público)
   ========================================================== */
.site-footer {
    padding: var(--space-xl) 0;
    margin-top: var(--space-2xl);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* ==========================================================
   Main content — sin padding-bottom, las secciones controlan su propio espacio
   ========================================================== */