:root {
    --ob-gold: var(--secondary, #c49511);
    --ob-red: var(--primary, #c41e24);
    --ob-wine: var(--primary-dark, #83171b);
    --ob-dark: var(--primary-dark, #511e20);
    --ob-yellow: var(--gold, #fbbf09);
}

/* A) Fondo “brand” moderno (radiales + degradado) */
.bg-onebillion-a {
    min-height: 100vh;
    background-color: var(--ob-dark);
    background-image:
        radial-gradient(circle at 18% 22%, rgba(251, 191, 9, .25) 0%, rgba(251, 191, 9, 0) 52%),
        radial-gradient(circle at 82% 18%, rgba(var(--secondary-rgb, 196, 149, 17), .22) 0%, rgba(var(--secondary-rgb, 196, 149, 17), 0) 55%),
        radial-gradient(circle at 70% 78%, rgba(214, 16, 22, .20) 0%, rgba(214, 16, 22, 0) 55%),
        linear-gradient(135deg, var(--ob-dark) 0%, var(--ob-wine) 40%, var(--ob-red) 72%, var(--ob-yellow) 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

/* B) Fondo oscuro elegante (sutil, ideal para backoffice) — unificado con el glow tenue de la academia */
.bg-onebillion-b {
    min-height: 100vh;
    background-color: var(--background, var(--background));
    background-image:
        radial-gradient(circle at top left, rgba(var(--primary-rgb, 196, 30, 36), .10), transparent 22%),
        radial-gradient(circle at top right, rgba(var(--gold-rgb, 196, 149, 17), .06), transparent 20%);
    background-repeat: no-repeat;
    background-size: cover;
}

/* C) Fondo con textura (rayas suaves) */
.bg-onebillion-c {
    background-color: var(--ob-dark);
    background-image:
        linear-gradient(135deg, var(--ob-dark) 0%, var(--ob-wine) 55%, var(--ob-red) 100%),
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, .06) 0px,
            rgba(255, 255, 255, .06) 10px,
            rgba(255, 255, 255, 0) 10px,
            rgba(255, 255, 255, 0) 22px);
    background-repeat: no-repeat;
    background-size: cover;
}