/* =====================
   LAYOUT GENERAL
   ===================== */

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-background);
}

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

/* =====================
   HEADER
   ===================== */
/* HEADER */
.site-header {
    height: var(--header-height);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    width: 100%; /* ocupa todo el ancho */
    padding: 0 var(--space-md); /* opcional, para un pequeño margen */
    box-sizing: border-box;
}

/* Contenedor: logo a la izquierda, nav a la derecha */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto; /* centra el nav y mantiene el logo a la izquierda */
}

/* Logo */
.logo-img {
    height: 64px; /* tamaño grande, el doble que antes */
    display: block;
}

/* Navegación */
.main-nav {
    display: flex;
    gap: 24px;
}

    .main-nav a {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        transition: color 0.2s ease;
    }

        .main-nav a:hover {
            color: var(--color-text-primary);
        }

/* =====================
   MAIN
   ===================== */

.site-main {
    min-height: calc(100vh - var(--header-height));
    padding: var(--space-xl) 0;
}

/* =====================
   FOOTER
   ===================== */

.site-footer {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--space-md) 0;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.footer-nav a {
    margin-left: var(--space-md);
    transition: color 0.2s ease;
}

    .footer-nav a:hover {
        color: var(--color-text-primary);
    }