/*
 * Camada final do site Beegray: aplica o DS (bx-*) sobre as classes legadas das rotas.
 * Carrega depois do CSS da rota e só no site da matriz (#bx-root / #bx-site no doctype).
 * O prefixo com dois ids precisa vencer as regras antigas com id e !important de home e plataforma.
 */

/*: Ritmo de seção: */
#bx-root #bx-site :is(.bee-lp-section, .bee-lp-services, .bee-lp-clients-band) {
    padding-block: var(--bx-section-y) !important;
}

#bx-root #bx-site .bee-lp-section--cta-final {
    padding-top: 0 !important;
}

#bx-root #bx-site .bee-lp-container {
    padding-inline: var(--bx-gutter);
}

/*: Cabeçalho de seção: */
#bx-root #bx-site .bee-lp-eyebrow {
    display: block;
    margin: 0 0 var(--bx-space-3) !important;
    font-size: var(--bx-fs-eyebrow) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    color: var(--bx-accent) !important;
}

#bx-root #bx-site :is(.bee-lp-h2, .bee-lp-propositos__title) {
    margin: 0 0 var(--bx-space-4) !important;
    font-family: var(--bx-font);
    font-size: var(--bx-fs-h2) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
    text-wrap: balance;
}

#bx-root #bx-site .bee-lp-h3 {
    margin: 0 0 var(--bx-space-2) !important;
    font-size: var(--bx-fs-h3) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -.01em !important;
}

#bx-root #bx-site .bee-lp-lead {
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: var(--bx-section-head-gap) !important;
    font-size: var(--bx-fs-lead) !important;
    line-height: 1.55 !important;
}

/*: Cards: */
#bx-root #bx-site :is(.bee-lp-card, .bee-lp-services-card, .bee-lp-team-card, .bee-lp-propositos__box, .bee-lp-cta-card, .bee-home-card) {
    background: var(--bx-surface) !important;
    border: 1px solid var(--bx-border) !important;
    border-radius: var(--bx-radius-lg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: border-color var(--bx-duration-normal) var(--bx-ease), transform var(--bx-duration-normal) var(--bx-ease);
}

#bx-root #bx-site :is(.bee-lp-card, .bee-lp-services-card) {
    padding: var(--bx-space-6) !important;
}

@media (hover: hover) and (min-width: 1024px) {
    #bx-root #bx-site :is(.bee-lp-card, .bee-lp-services-card, .bee-home-card):hover {
        border-color: var(--bx-border-strong) !important;
        transform: translateY(-2px);
    }
}

#bx-root #bx-site .bee-lp-card .bee-lp-p {
    font-size: var(--bx-fs-small) !important;
    line-height: 1.55 !important;
    color: var(--bx-text-muted) !important;
}

#bx-root #bx-site .bee-lp-card__logo {
    width: 44px;
    height: 44px;
    margin-bottom: var(--bx-space-4) !important;
    border: 0 !important;
    border-radius: var(--bx-radius-md) !important;
    background: var(--bx-accent-soft) !important;
    box-shadow: none !important;
    color: var(--bx-accent);
}

#bx-root #bx-site .bee-lp-card__outcome {
    margin: 0 0 var(--bx-space-2) !important;
    font-size: var(--bx-fs-small) !important;
    color: var(--bx-accent) !important;
}

#bx-root #bx-site :is(.bee-lp-faq-item, .bee-lp-accordion .accordion-item) {
    background: var(--bx-surface) !important;
    border: 1px solid var(--bx-border) !important;
    border-radius: var(--bx-radius-md) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/*: Métricas: */
#bx-root #bx-site .bee-lp-results-metric__value {
    font-size: var(--bx-fs-metric) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    #bx-root #bx-site .bee-lp-results-metrics:not(.bee-lp-about-metrics) .bee-lp-results-metric__value {
        font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
        white-space: nowrap;
    }
}

#bx-root #bx-site .bee-lp-results-metric__label {
    font-size: var(--bx-fs-small) !important;
    color: var(--bx-text-muted) !important;
}

/*: Ações e botões: */
#bx-root #bx-site :is(.bee-lp-actions, .hero-actions, .bee-lp-cta-card__actions) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bx-space-3) !important;
}

#bx-root #bx-site .bee-lp-actions {
    margin-top: var(--bx-space-8) !important;
}

#bx-root #bx-site :is(.bee-btn-primary, .bee-btn-ghost, .bee-btn--compact) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bx-space-2);
    min-height: var(--bx-control-lg) !important;
    padding: 0 var(--bx-space-6) !important;
    border-radius: var(--bx-radius-md) !important;
    font-family: var(--bx-font);
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none;
    transition: background var(--bx-duration-normal) var(--bx-ease),
        border-color var(--bx-duration-normal) var(--bx-ease),
        color var(--bx-duration-normal) var(--bx-ease),
        transform var(--bx-duration-fast) var(--bx-ease);
}

#bx-root #bx-site .bee-btn-primary {
    background: var(--bx-accent) !important;
    border: 1px solid transparent !important;
    color: var(--bx-on-accent) !important;
}

#bx-root #bx-site .bee-btn-primary:hover {
    background: var(--bx-accent-hover) !important;
    color: var(--bx-on-accent) !important;
}

#bx-root #bx-site .bee-btn-ghost {
    background: transparent !important;
    border: 1px solid var(--bx-border-strong) !important;
    color: var(--bx-text) !important;
}

#bx-root #bx-site .bee-btn-ghost:hover {
    background: var(--bx-hover-tint) !important;
    color: var(--bx-text) !important;
}

#bx-root #bx-site :is(.bee-btn-primary, .bee-btn-ghost, .bee-btn--compact):active {
    transform: scale(.98);
}

#bx-root #bx-site :is(.bee-btn-primary, .bee-btn-ghost, .bee-btn--compact, .bee-lp-services-card__cta, .beegray-header__btn--cta):focus-visible {
    outline: none !important;
    box-shadow: var(--bx-focus-ring) !important;
}

#bx-root #bx-site .bee-lp-services-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--bx-space-2);
    min-height: var(--bx-control-sm);
    padding: 0 var(--bx-space-4) !important;
    border: 1px solid var(--bx-border-strong) !important;
    border-radius: var(--bx-radius-md) !important;
    background: transparent !important;
    color: var(--bx-accent) !important;
    font-size: var(--bx-fs-small) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

#bx-root #bx-site .bee-lp-services-card__cta:hover {
    border-color: var(--bx-accent) !important;
}

#bx-root #bx-site .beegray-header__btn--cta {
    border-radius: var(--bx-radius-md) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

#bx-root #bx-site .beegray-header__btn--cta:hover {
    background: var(--bx-accent-hover) !important;
}

@media (max-width: 767.98px) {
    #bx-root #bx-site :is(.bee-lp-actions, .hero-actions, .bee-lp-cta-card__actions) {
        flex-direction: column;
        align-items: stretch;
    }

    #bx-root #bx-site :is(.bee-lp-actions, .hero-actions, .bee-lp-cta-card__actions) :is(.bee-btn-primary, .bee-btn-ghost) {
        width: 100% !important;
    }
}