/* =========================================================
   BLACK NOVEMBER
   Tema promocional - Maria Flor Ateliê

   IMPORTANTE:
   Carregar DEPOIS do CSS principal.

   Preto/Grafite = campanha
   Rosa          = promoção
   Verde         = preço / CTA / conversão
   Branco        = textos
========================================================= */


/* =========================================================
   1. VARIÁVEIS
========================================================= */

:root {
    /* Base */
    --bg: #0D0D0D;
    --surface: #171717;

    /* Black November */
    --brand: #FF2D8D;
    --brand-2: #E81974;

    /* Preços e CTA principal */
    --offer-green: #00FF00;

    /* Textos */
    --ink: #F8F8F8;
    --muted: rgba(255, 255, 255, .72);

    /* Bordas / sombras */
    --border: rgba(255, 255, 255, .12);
    --shadow-offer: 0 22px 60px rgba(0, 0, 0, .45);

    /* Escola */
    --es-bg: #171717;
    --es-border: rgba(255, 255, 255, .12);
    --es-border-soft: rgba(255, 255, 255, .08);
    --es-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    --es-shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);
    --es-ink: #F8F8F8;
    --es-text: rgba(255, 255, 255, .82);
    --es-muted: rgba(255, 255, 255, .62);
    --es-brand: #FF2D8D;
    --es-brand-2: #E81974;
    --es-accent: #FF2D8D;
    --es-soft: rgba(255, 45, 141, .12);

    /* Ebooks */
    --eb-bg: #171717;
    --eb-border: rgba(255, 255, 255, .12);
    --eb-border-soft: rgba(255, 255, 255, .08);
    --eb-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    --eb-shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);
    --eb-ink: #F8F8F8;
    --eb-text: rgba(255, 255, 255, .82);
    --eb-muted: rgba(255, 255, 255, .62);
    --eb-brand: #FF2D8D;
    --eb-brand-2: #E81974;
    --eb-accent: #FF2D8D;
    --eb-soft: rgba(255, 45, 141, .12);
}


/* =========================================================
   2. BASE
========================================================= */

body {
    background: #0D0D0D;
    color: var(--ink);
}

a {
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

::selection {
    background: #FF2D8D;
    color: #FFF;
}

hr {
    border-color: rgba(255, 255, 255, .10);
}


/* =========================================================
   3. FAIXAS / SEÇÕES
========================================================= */

.band-a,
.band-b,
.band-c {
    border-top: 1px solid #222;
}

.band-a {
    background: #0B0B0B;
}

.band-b {
    background: #181818;
}

.band-c {
    background: #101010;
}


/* =========================================================
   4. HERO
========================================================= */

.hero {
    background:
        radial-gradient(
        900px 520px at 8% 12%,
        rgba(255, 45, 141, .12),
        transparent 60%
        ),
        radial-gradient(
        1100px 700px at 92% 18%,
        rgba(255, 45, 141, .07),
        transparent 68%
        ),
        linear-gradient(
        180deg,
        #070707 0%,
        #121212 100%
        );
}

.h1,
.section-title {
    color: #F8F8F8;
}

.h1 .accent,
.section-title b,
.section-title strong,
.section-kicker,
.hero-kicker {
    color: #FF2D8D;
}

.sub,
.section-sub {
    color: rgba(255, 255, 255, .76);
}

.sub b {
    color: #FF2D8D !important;
}

.hero-benefits i {
    color: #FF2D8D;
    margin-top: 2px;
}

.list-clean li {
    color: #FFF;
}


/* =========================================================
   5. ELEMENTOS GERAIS
========================================================= */

.badge,
.tag,
.kicker {
    border-color: rgba(255, 45, 141, .30);
}

.card {
    background: #171717;
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .22);
}

.mini {
    color: rgba(255, 255, 255, .76);
}

.ic {
    background: rgba(95, 120, 82, .10);
}

.sub-color {
    color: #FF2D8D !important;
}


/* =========================================================
   6. PREÇO / CTA
========================================================= */

.price,
.offer-price {
    color: var(--offer-green);
}

/* Botões secundários / suporte */
.btn-primary,
.btn-buy,
.btn-cta {
    background: #202020 !important;
    border-color: rgba(255, 45, 141, .45) !important;
    color: #F8F8F8 !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-buy:hover,
.btn-cta:hover {
    background: #292929 !important;
    border-color: #FF2D8D !important;
    color: #FFF !important;
}


/* CTA principal de compra — verde de alto contraste */
.formation-offer-button {
    background: var(--offer-green) !important;
    border-color: var(--offer-green) !important;
    color: #0D0D0D !important;
}

.formation-offer-button:hover,
.formation-offer-button:focus-visible {
    background: #00E600 !important;
    border-color: #00E600 !important;
    color: #0D0D0D !important;
}


/* Verde de conversão: sobrescreve as variáveis locais do CSS original */
.formation-offer-section {
    --offer-green: #00FF00;
    --offer-green-dark: #00E600;
    --offer-green-soft: rgba(0, 255, 0, .08);
    --offer-green-border: rgba(0, 255, 0, .24);
    --offer-green-shadow: rgba(0, 255, 0, .18);
}

/* Contraste do texto sobre os fundos verde-lima */
.formation-offer-section .formation-offer-button,
.formation-offer-section .formation-offer-button:hover,
.formation-offer-section .formation-offer-button:focus-visible,
.formation-offer-section .formation-offer-badge {
    color: #0D0D0D !important;
}

/* =========================================================
   7. OFERTA PRINCIPAL
========================================================= */

.formation-offer-card {
    background: #171717;
    color: #F8F8F8;
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.formation-offer-title {
    color: #F8F8F8;
}

.formation-offer-access,
.formation-offer-card p {
    color: rgba(255, 255, 255, .82);
}

.formation-offer-list {
    color: rgba(255, 255, 255, .88);
}

.formation-offer-list i {
    color: #FF2D8D;
}

.formation-offer-security {
    color: rgba(255, 255, 255, .72);
}

.formation-offer-video-intro,
.social-text {
    color: #FFF;
}


/* =========================================================
   8. BOX DE PREÇO
========================================================= */

.formation-offer-price-box {
    position: relative;
    margin: 30px 0 21px;
    padding: clamp(25px, 4vw, 36px);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 22px;
    background: #202020;
    box-shadow: none;
    text-align: center;
}

.formation-offer-installments strong,
.formation-offer-installments .price-main {
    color: var(--offer-green);
    text-shadow: none;
}

.formation-offer-anchor-price {
    color: #FFF;
}

.formation-offer-anchor-price del {
    text-decoration-color: #FF2D8D;
}

.countdown-inline-two .time p {
    color: #F8F8F8;
}

.countdown-inline-two .time,
.section-sub b {
    color: #FF2D8D;
}


/* =========================================================
   9. CARDS DE MATERIAIS / SUPORTE
========================================================= */

.eb-materials-card,
.es-support-card {
    background: #171717;
    border-color: rgba(255, 255, 255, .10);
    box-shadow: none;
}


/* =========================================================
   10. FAQ
========================================================= */

#faq .accordion-item {
    background: #171717 !important;
    border-color: rgba(255, 255, 255, .10) !important;
}

#faq .accordion-button {
    background: #171717 !important;
    color: #F8F8F8 !important;
}

#faq .accordion-button:not(.collapsed) {
    background: #202020 !important;
    color: #FF2D8D !important;
}

#faq .accordion-body {
    background: #121212 !important;
    color: rgba(255, 255, 255, .78) !important;
}

#faq .accordion-button:hover {
    background: #222 !important;
    color: #FF2D8D !important;
}

#faq .accordion-button:not(.collapsed):hover {
    background: #242424 !important;
    color: #FF2D8D !important;
}


/* =========================================================
   11. TOPBAR
========================================================= */

.topbar {
    background: #080808 !important;
    border-bottom: 1px solid rgba(255, 45, 141, .45);
    box-shadow: 0 4px 18px rgba(255, 45, 141, .22);
    color: #F8F8F8 !important;
}

.topbar .msg {
    color: #F8F8F8 !important;
}

.topbar .msg b {
    color: #FF2D8D !important;
}


/* =========================================================
   12. LOGO
========================================================= */

.logo img {
    filter: brightness(0) invert(1);
}


/* =========================================================
   13. BOTÃO GALERIA
========================================================= */

.btn-gallery-highlight {
    background: #FF2D8D;
    border: 1px solid #FF2D8D;
    color: #FFF;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 14px 18px;
    border-radius: 12px;
    transition: all .2s ease;
    animation: galleryPulseBtn 2.8s ease-in-out infinite;
}

.btn-gallery-highlight:hover {
    background: #E81974;
    border-color: #E81974;
    color: #FFF;
    transform: translateY(-1px);
}

.btn-gallery-highlight:active {
    background: #D91669;
    border-color: #D91669;
    transform: scale(.97);
}

.btn-gallery-highlight:focus {
    color: #FFF;
    box-shadow: 0 0 0 .25rem rgba(255, 45, 141, .20);
}

.es-modal-dialog{
    background: #0D0D0D;
}

.es-modal-bottom {
    background: linear-gradient(
        180deg,
        rgba(23, 23, 23, 0) 0%,
        rgba(23, 23, 23, .95) 16%,
        #171717 100%
    );  
}

/* =========================================================
   BOTÃO FECHAR MODAL — BLACK NOVEMBER
========================================================= */

.eb-modal-close,
.es-modal-close {
    background: #202020;
    color: #FF2D8D;
    border: 1px solid rgba(255, 45, 141, .45);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .30);
    transition: all .2s ease;
}

.eb-modal-close:hover,
.es-modal-close:hover {
    background: #FF2D8D;
    color: #FFF;
    border-color: #FF2D8D;
    transform: scale(1.05);
}

.eb-modal-close:active,
.es-modal-close:active {
    transform: scale(.95);
}

.eb-modal-close:focus-visible,
.es-modal-close:focus-visible {
    outline: 2px solid #FF2D8D;
    outline-offset: 3px;
}

/* =========================================================
   BULLETS DO MODAL — BLACK NOVEMBER
========================================================= */

.es-modal-pill {
    background: #202020;
    color: #F8F8F8;
    border: 1px solid rgba(255, 45, 141, .30);
    box-shadow: none;
}

.es-modal-pill i {
    color: #FF2D8D;
}

/* =========================================================
   14. FOOTER
========================================================= */

footer {
    color: rgba(255, 255, 255, .75);
}

footer strong {
    color: #F8F8F8;
}

footer .footer-links span {
    color: rgba(255, 255, 255, .72) !important;
}

footer .footer-links i,
footer .mb-2 strong i {
    color: #FF2D8D !important;
}

footer .footer-links span:hover {
    color: #FF2D8D !important;
}


/* =========================================================
   15. SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0D0D0D;
}

::-webkit-scrollbar-thumb {
    background: #353535;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #FF2D8D;
}


/* =========================================================
   16. RESPONSIVO
========================================================= */

@media (max-width: 768px) {

    .hero {
        background:
            radial-gradient(
            600px 400px at 50% 0%,
            rgba(255, 45, 141, .12),
            transparent 65%
            ),
            linear-gradient(
            180deg,
            #070707 0%,
            #121212 100%
            );
    }

}

@media (max-width: 520px) {

    .topbar {
        font-size: clamp(16px, 3.85vw, 20px);
    }

}