:root {
    --ob-gold: #c49511;
    --ob-red: #d61016;
    --ob-wine: #83171b;
    --ob-dark: #511e20;
    --ob-yellow: #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(196, 149, 17, .22) 0%, rgba(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) */
.bg-onebillion-b {
    min-height: 100vh;
    background-color: var(--ob-dark);
    background-image:
        radial-gradient(circle at 25% 30%, rgba(131, 23, 27, .35) 0%, rgba(131, 23, 27, 0) 55%),
        radial-gradient(circle at 75% 20%, rgba(196, 149, 17, .18) 0%, rgba(196, 149, 17, 0) 60%),
        linear-gradient(180deg, #3a1416 0%, var(--ob-dark) 55%, #2a0f10 100%);
    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;
}