/* ==========================================================================
   PB Design System
   CORE · Página
   ========================================================================== */

/* --------------------------------------------------------------
   Raíz visual del tema
-------------------------------------------------------------- */

.pb-root {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--color-fondo);
}

/* --------------------------------------------------------------
   Página
-------------------------------------------------------------- */

.pb-root .pagina {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-7);
    margin-bottom: var(--space-7);
    background: var(--color-fondo);
}

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

.pb-root .seccion {
    padding-block: var(--space-7);
    background: var(--color-fondo);
}

.pb-root .seccion-sm {
    padding-block: var(--space-5);
}

.pb-root .seccion-lg {
    padding-block: var(--space-8);
}

.pb-root .seccion-xl {
    padding-block: var(--space-9);
}

/* --------------------------------------------------------------
   Fondos
-------------------------------------------------------------- */

.pb-root .fondo-claro {
    background: var(--color-fondo);
}

.pb-root .fondo-blanco {
    background: var(--color-blanco);
}

.pb-root .fondo-bordoy {
    background: var(--color-bordoy);
    color: var(--color-blanco);
}

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

@media (max-width: 768px) {
    .pb-root .seccion {
        padding-block: var(--space-6);
    }

    .pb-root .seccion-lg,
    .pb-root .seccion-xl {
        padding-block: var(--space-7);
    }
}