.naturalibre-bf {
    --bf-ink: #131816;
    --bf-muted: #59635d;
    --bf-green: #0a5c32;
    --bf-green-dark: #063b22;
    --bf-gold: #f4c95d;
    --bf-cream: #fbf8ef;
    --bf-line: rgba(10, 92, 50, 0.16);
    color: var(--bf-ink);
    margin: 0 auto;
    max-width: 1240px;
    padding: clamp(20px, 4vw, 56px) 20px 80px;
}

.naturalibre-bf *,
.naturalibre-bf *::before,
.naturalibre-bf *::after {
    box-sizing: border-box;
}

.naturalibre-bf__hero {
    background:
        radial-gradient(circle at 85% 15%, rgba(244, 201, 93, 0.24), transparent 30%),
        linear-gradient(135deg, #071d12 0%, #0a5c32 58%, #0b7040 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(7, 29, 18, 0.2);
    color: #fff;
    overflow: hidden;
    padding: clamp(34px, 6vw, 78px);
    position: relative;
}

.naturalibre-bf__hero::after {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    content: "";
    height: 380px;
    position: absolute;
    right: -190px;
    top: -190px;
    width: 380px;
}

.naturalibre-bf__eyebrow,
.naturalibre-bf__kicker {
    color: var(--bf-gold);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.naturalibre-bf__hero h1 {
    color: #fff;
    font-size: clamp(2.25rem, 5.7vw, 4.9rem);
    letter-spacing: -0.045em;
    line-height: 0.98;
    margin: 0;
    max-width: 920px;
}

.naturalibre-bf__lead {
    color: rgba(255, 255, 255, 0.87);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.65;
    margin: 24px 0 0;
    max-width: 780px;
}

.naturalibre-bf__status {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 700;
    gap: 10px;
    margin-top: 24px;
    padding: 10px 15px;
}

.naturalibre-bf__status-dot {
    background: #d9dde0;
    border-radius: 50%;
    height: 9px;
    width: 9px;
}

.naturalibre-bf--live .naturalibre-bf__status-dot {
    animation: naturalibre-bf-pulse 1.8s ease-in-out infinite;
    background: #82f0a9;
    box-shadow: 0 0 0 5px rgba(130, 240, 169, 0.15);
}

.naturalibre-bf__metrics {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 34px;
    max-width: 860px;
}

.naturalibre-bf__metrics > div {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 18px;
}

.naturalibre-bf__metrics strong,
.naturalibre-bf__metrics span {
    display: block;
}

.naturalibre-bf__metrics strong {
    color: var(--bf-gold);
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.1;
}

.naturalibre-bf__metrics span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
    margin-top: 6px;
}

.naturalibre-bf__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.naturalibre-bf__button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
}

.naturalibre-bf__button:hover {
    transform: translateY(-2px);
}

.naturalibre-bf__button--primary {
    background: var(--bf-gold);
    color: #182017;
}

.naturalibre-bf__button--primary:hover {
    background: #ffe08b;
    color: #182017;
}

.naturalibre-bf__button--secondary {
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}

.naturalibre-bf__button--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.naturalibre-bf__section {
    margin-top: clamp(54px, 8vw, 96px);
}

.naturalibre-bf__section > h2 {
    color: var(--bf-ink);
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin: 0 0 18px;
}

.naturalibre-bf__section > p:not(.naturalibre-bf__kicker) {
    color: var(--bf-muted);
    font-size: 1.02rem;
    line-height: 1.7;
    max-width: 780px;
}

.naturalibre-bf__steps {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 30px;
}

.naturalibre-bf__steps article {
    background: #fff;
    border: 1px solid var(--bf-line);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(15, 61, 36, 0.07);
    padding: 26px;
}

.naturalibre-bf__steps article > span {
    align-items: center;
    background: var(--bf-green);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.naturalibre-bf__steps h3 {
    color: var(--bf-ink);
    font-size: 1.18rem;
    margin: 20px 0 8px;
}

.naturalibre-bf__steps p {
    color: var(--bf-muted);
    line-height: 1.6;
    margin: 0;
}

.naturalibre-bf__products .products {
    margin-top: 30px;
}

.naturalibre-bf__products .product {
    background: #fff;
    border: 1px solid var(--bf-line);
    border-radius: 18px;
    overflow: hidden;
    padding: 16px !important;
}

.naturalibre-bf__terms {
    background: var(--bf-cream);
    border: 1px solid rgba(130, 100, 32, 0.16);
    border-radius: 24px;
    padding: clamp(26px, 5vw, 52px);
}

.naturalibre-bf__terms dl {
    display: grid;
    gap: 0;
    margin: 26px 0 0;
}

.naturalibre-bf__terms dl > div {
    border-top: 1px solid rgba(10, 92, 50, 0.13);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(130px, 0.3fr) minmax(0, 1fr);
    padding: 18px 0;
}

.naturalibre-bf__terms dt {
    color: var(--bf-green-dark);
    font-weight: 800;
}

.naturalibre-bf__terms dd {
    color: var(--bf-muted);
    line-height: 1.65;
    margin: 0;
}

.naturalibre-bf__faq details {
    background: #fff;
    border: 1px solid var(--bf-line);
    border-radius: 14px;
    margin-top: 12px;
    padding: 0 20px;
}

.naturalibre-bf__faq summary {
    color: var(--bf-ink);
    cursor: pointer;
    font-weight: 800;
    padding: 18px 0;
}

.naturalibre-bf__faq details p {
    color: var(--bf-muted);
    line-height: 1.65;
    margin: -4px 0 20px;
}

@keyframes naturalibre-bf-pulse {
    50% { opacity: 0.65; transform: scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
    .naturalibre-bf--live .naturalibre-bf__status-dot { animation: none; }
    .naturalibre-bf__button { transition: none; }
}

@media (max-width: 760px) {
    .naturalibre-bf {
        padding-left: 14px;
        padding-right: 14px;
    }

    .naturalibre-bf__hero {
        border-radius: 20px;
        padding: 30px 22px;
    }

    .naturalibre-bf__metrics,
    .naturalibre-bf__steps {
        grid-template-columns: 1fr;
    }

    .naturalibre-bf__metrics {
        gap: 9px;
    }

    .naturalibre-bf__actions,
    .naturalibre-bf__button {
        width: 100%;
    }

    .naturalibre-bf__terms dl > div {
        gap: 5px;
        grid-template-columns: 1fr;
    }
}