/* ════════════════════════════════════════════════════════════════
   ATP Final Overrides — força a paleta atp-* em componentes legacy
   Carregado por último; usa !important onde necessário para vencer
   a especificidade do style.css legacy de 779KB.
   ════════════════════════════════════════════════════════════════ */

/* ─── Reset paleta global ─── */
body,
body.atp-body {
    color: var(--atp-text) !important;
    background: var(--atp-bg) !important;
    font-family: var(--atp-font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.title, .sub-title, .sec-title h2, .sec-title h3 {
    font-family: var(--atp-font-heading) !important;
    letter-spacing: -0.02em !important;
}
/* color via .atp-text class context — NÃO forçar globalmente. Hero/dark sections precisam herdar cor inverse */
body { color: var(--atp-text); }
.atp-hero, .atp-hero *, .atp-page-hero, .atp-page-hero *,
.atp-dark-section, .atp-dark-section *,
.atp-cta-prefooter, .atp-cta-prefooter *,
.atp-footer, .atp-footer *,
.atp-404, .atp-404 *,
.page-title, .page-title * {
    color: inherit;
}
.atp-hero__title, .atp-page-hero__title { color: var(--atp-text-inverse) !important; }
.atp-hero__subtitle, .atp-page-hero__subtitle { color: rgba(255,255,255,.85) !important; }

/* Link cores universais */
a { color: var(--atp-brand); }
a:hover { color: var(--atp-accent); }

/* ─── Botões legacy → palette nova ─── */
.theme-btn {
    border-radius: var(--atp-radius-full) !important;
    font-family: var(--atp-font-body) !important;
    font-weight: var(--atp-weight-semibold) !important;
    letter-spacing: var(--atp-tracking-wide) !important;
    transition: transform 250ms var(--atp-ease), box-shadow 250ms var(--atp-ease) !important;
}
.theme-btn.btn-style-one,
.theme-btn.btn-style-two {
    background: var(--atp-grad-accent) !important;
    color: var(--atp-purple-900) !important;
    box-shadow: var(--atp-shadow-gold-glow) !important;
    border: 0 !important;
}
.theme-btn.btn-style-one:hover,
.theme-btn.btn-style-two:hover,
.theme-btn.btn-style-one:focus,
.theme-btn.btn-style-two:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 50px -8px rgba(212,146,47,.6) !important;
    background: var(--atp-grad-accent) !important;
}

.theme-btn.hover-light:hover { color: var(--atp-purple-900) !important; }

/* ─── Banner section antigo (caso renderize) ─── */
.banner-section-three,
.banner-section-two,
.banner-section {
    background: var(--atp-gray-900) !important;
}
.banner-section-three .title,
.banner-section .title {
    color: var(--atp-text-inverse) !important;
}

/* ─── Seções legacy: ajustar background e cores ─── */
.about-section-three,
.about-section-four,
.services-section-twelve,
.services-section-five,
.service-section-seven {
    background: var(--atp-bg) !important;
    color: var(--atp-text) !important;
}
.about-section-three h2,
.services-section-twelve h2,
.services-section-five h2,
.service-section-seven h2 {
    color: var(--atp-brand) !important;
}

/* ─── Service blocks (cards antigos) ─── */
.service-block-twelve .inner-box,
.service-block-five .inner-box,
.service-block-seven .inner-box,
.service-block-thirteen .inner-box {
    border-radius: var(--atp-radius-xl) !important;
    background: var(--atp-bg) !important;
    box-shadow: var(--atp-elev-2) !important;
    padding: var(--atp-space-8) !important;
    border: 1px solid var(--atp-border) !important;
}
.service-block-twelve .inner-box:hover,
.service-block-five .inner-box:hover,
.service-block-seven .inner-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--atp-shadow-card-hover) !important;
    border-color: var(--atp-purple-200) !important;
}
.service-block-twelve .icon-box,
.service-block-five .icon-box {
    color: var(--atp-brand) !important;
    background: var(--atp-purple-50) !important;
    border-radius: var(--atp-radius-lg) !important;
}
.service-block-twelve .title,
.service-block-five .title,
.service-block-seven .title {
    font-family: var(--atp-font-heading) !important;
    color: var(--atp-text) !important;
    font-weight: var(--atp-weight-bold) !important;
}
.service-block-twelve .text,
.service-block-five .text,
.service-block-seven .text {
    color: var(--atp-text-muted) !important;
}

/* ─── Sec title (titulinhos legacy) ─── */
.sec-title .sub-title,
.sec-title.style-two .sub-title {
    color: var(--atp-brand) !important;
    font-family: var(--atp-font-body) !important;
    font-weight: var(--atp-weight-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--atp-tracking-wide) !important;
}

/* ─── Footer legacy (caso ainda apareça) ─── */
.main-footer.footer-style-three {
    background: var(--atp-purple-900) !important;
    color: rgba(255,255,255,.85) !important;
}
.main-footer .widget-title {
    color: var(--atp-gold-300) !important;
    font-family: var(--atp-font-heading) !important;
}
.main-footer a { color: rgba(255,255,255,.75) !important; }
.main-footer a:hover { color: var(--atp-white) !important; }

/* ─── Header legacy (caso renderize) ─── */
.main-header,
.header-style-three {
    background: transparent !important;
}

/* ─── Page-title antigo (banner com page-title-bg.png) ─── */
.page-title {
    background: var(--atp-grad-primary) !important;
    background-image: var(--atp-grad-primary) !important;
    color: var(--atp-text-inverse) !important;
    padding: var(--atp-space-20) var(--atp-space-4) !important;
    position: relative;
    overflow: hidden;
}
.page-title::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, var(--atp-purple-500), transparent 50%);
    opacity: 0.5;
    pointer-events: none;
}
.page-title .title { color: var(--atp-text-inverse) !important; position: relative; z-index: 1; }
.page-title .blog-details__meta li { color: var(--atp-gold-300) !important; }

/* ─── Forms legacy ─── */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
    background: var(--atp-bg) !important;
    border: 1px solid var(--atp-border) !important;
    border-radius: var(--atp-radius-md) !important;
    color: var(--atp-text) !important;
    font-family: var(--atp-font-body) !important;
    padding: var(--atp-space-3) !important;
    transition: border-color 200ms var(--atp-ease), box-shadow 200ms var(--atp-ease) !important;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--atp-brand) !important;
    box-shadow: var(--atp-shadow-glow) !important;
    outline: none !important;
}

/* ─── Pagination ─── */
.styled-pagination ul {
    display: flex !important;
    gap: var(--atp-space-2) !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
}
.styled-pagination li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--atp-space-3) !important;
    border-radius: var(--atp-radius-md) !important;
    background: var(--atp-bg) !important;
    border: 1px solid var(--atp-border) !important;
    color: var(--atp-text) !important;
    text-decoration: none !important;
    font-weight: var(--atp-weight-medium) !important;
    transition: background 200ms var(--atp-ease), color 200ms var(--atp-ease) !important;
}
.styled-pagination li.active a,
.styled-pagination li a:hover {
    background: var(--atp-grad-primary) !important;
    color: var(--atp-text-inverse) !important;
    border-color: transparent !important;
}

/* ─── Outras correções ─── */
.scroll-to-top {
    background: var(--atp-grad-accent) !important;
    color: var(--atp-purple-900) !important;
    border-radius: var(--atp-radius-full) !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--atp-shadow-gold-glow) !important;
}
.scroll-to-top:hover { background: var(--atp-gold-400) !important; }

#chat-whatsapp a {
    background: #25D366 !important;
    color: #fff !important;
    border-radius: var(--atp-radius-full) !important;
    width: 56px !important;
    height: 56px !important;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ─── Bootstrap container fix ─── */
.auto-container,
.container { max-width: var(--atp-container) !important; padding-left: var(--atp-space-4) !important; padding-right: var(--atp-space-4) !important; }

/* ─── Background patterns legacy: ocultar (não premium) ─── */
.banner-section-three .icon,
.about-section-three .icon-dots,
.about-section-three .icon-dots-5,
[class*="bounce-y"] {
    display: none !important;
}

/* ─── Tipografia legacy: aplicar SÓ fora de hero/heroes que já têm clamp próprio ─── */
.atp-content-2col h1,
.atp-content-2col h2,
.atp-content-2col h3,
.atp-section h2,
.atp-section h3 {
    font-family: var(--atp-font-heading) !important;
    letter-spacing: -0.02em !important;
    font-weight: var(--atp-weight-extrabold) !important;
}

/* ─── Garantir page-wrapper não interfere ─── */
.page-wrapper { background: var(--atp-bg); overflow: hidden; }

/* ─── Skip-to-content fix de cor ─── */
.atp-skip-to-content { background: var(--atp-brand) !important; color: var(--atp-white) !important; }

/* ─── Mobile menu legacy hide (NÃO o atp-mobile-menu novo) ─── */
.mobile-menu:not(.atp-mobile-menu) { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   FIXES PÓS-AUDITORIA VISUAL (Sprint 10.1)
   ════════════════════════════════════════════════════════════════ */

/* 1. Scroll hint NÃO sobrepõe os CTAs do hero — mover para borda inferior absoluta */
.atp-hero-scroll__hint {
    position: absolute !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 200px;
    text-align: center !important;
    z-index: 5;
    pointer-events: none;
}
.atp-hero-scroll__content { position: relative; }
@media (max-height: 720px) {
    .atp-hero-scroll__hint { display: none !important; }
}

/* 2. Bento featured card — texto branco SÓLIDO + peso bold */
.atp-bento__card--featured .atp-bento__title,
.atp-bento__card--featured .atp-bento__desc,
.atp-bento__card--featured .atp-bento__link {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.atp-bento__card--featured .atp-bento__title { font-weight: 800 !important; }
.atp-bento__card--featured .atp-bento__desc { color: rgba(255,255,255,.92) !important; }
.atp-bento__card--featured .atp-bento__link { color: var(--atp-gold-300) !important; }

/* 3. FAQ title — contraste forte sobre soft purple bg */
.atp-faq-section .atp-section__title,
#atp-faq-title {
    color: var(--atp-purple-700) !important;
    text-shadow: none;
    opacity: 1 !important;
}
.atp-faq__question { color: var(--atp-text) !important; }

/* 4. Section "Reporting honesto" + "Estratégia full-funnel" — garantir cores firmes (não esperar fade-up) */
.atp-section .atp-section__title,
.atp-section h2 {
    color: var(--atp-brand) !important;
    opacity: 1 !important;
}
/* Atrasar fade-up only para elementos secundários, não h1/h2/badges */
h2.atp-fade-up,
.atp-section__header .atp-fade-up,
.atp-bento__title,
.atp-bento__desc,
.atp-stats__value,
.atp-stats__label {
    opacity: 1 !important;
    transform: none !important;
}

/* 5. CTA pre-footer — botões mais sólidos e legíveis */
.atp-cta-prefooter .atp-btn--ghost {
    background: rgba(255,255,255,0.18) !important;
    border: 2px solid rgba(255,255,255,0.45) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px);
}
.atp-cta-prefooter .atp-btn--ghost:hover {
    background: rgba(255,255,255,0.30) !important;
    border-color: rgba(255,255,255,0.7) !important;
}

/* 6. Trust seals do footer — visíveis sobre fundo escuro */
.atp-footer__seal {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}
.atp-footer__seal svg { color: #10d18a !important; }

/* 7. Logo no nav dark-glass — adicionar drop-shadow para destacar */
.atp-nav--dark-glass .atp-nav__logo img {
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)) brightness(1.1);
}

/* 8. Funnel SVG — limitar largura para não cortar labels */
.atp-section img[src*="funnel.svg"] {
    max-width: 95% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
}

/* 9. Wall of Love — aspas mais visíveis (eram lilás claro) */
.atp-wall-of-love article svg[fill="var(--atp-purple-200)"] {
    fill: var(--atp-purple-400) !important;
    opacity: 0.65;
}

/* 10. Marquee — gradient mask mais forte para esconder transições do loop */
.atp-marquee {
    mask-image: linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%) !important;
}

/* 11. Section badge ("Reporting honesto", "Estratégia full-funnel") — sólido, não translúcido */
.atp-badge,
.atp-badge--gold {
    opacity: 1 !important;
}

/* 12. Hero __metric-value — garantir cor dourada vibrante */
.atp-hero__metric-value {
    color: var(--atp-gold-400) !important;
    opacity: 1 !important;
}
.atp-hero__metric-value span[data-counter] {
    color: inherit !important;
}

/* ─────────────────────────────────────────────────────────────
   13. Sprint 10.9 — Vídeo BG fixed: marquee + bento semi-translúcidos
   Vídeo aparece atrás durante todo o scroll do hero+marquee+bento
   ───────────────────────────────────────────────────────────── */

/* Marquee: TOTALMENTE transparente — vídeo aparece atrás integralmente */
body.home .atp-marquee {
    background: transparent !important;
    position: relative;
    z-index: 2;
}
/* Texto do marquee sobre vídeo escuro: branco com sombra */
body.home .atp-marquee__title {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
body.home .atp-marquee__item {
    color: rgba(255, 255, 255, 0.75) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
body.home .atp-marquee__item:hover {
    color: var(--atp-gold-300) !important;
}

/* Bento section: TOTALMENTE transparente — cards sólidos cobrem onde estão */
body.home .atp-bento-section {
    background: transparent !important;
    position: relative;
    z-index: 2;
}
/* Título "Operação de mídia paga..." sobre vídeo: cor clara legível */
body.home .atp-bento-section h2 {
    color: var(--atp-white) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
body.home .atp-bento-section > div > p,
body.home .atp-bento-section > div > .atp-fade-up + p {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
body.home .atp-bento-section .atp-badge--gold {
    background: rgba(255, 255, 255, 0.92) !important;
}

/* Bento cards continuam sólidos brancos (legibilidade) */
body.home .atp-bento__card {
    background: var(--atp-bg) !important;
}

/* Featured card mantém gradiente roxo */
body.home .atp-bento__card--featured {
    background: var(--atp-grad-primary) !important;
    color: var(--atp-text-inverse) !important;
}

/* Hero scroll wrapper transparente — vídeo aparece via fixed-bg */
body.home .atp-hero-scroll,
body.home .atp-hero-scroll__inner {
    background: transparent !important;
    z-index: 2 !important;
    position: relative !important;
}

/* Page-wrapper na home não pode ter bg branco (cobre vídeo) */
body.home .page-wrapper {
    background: transparent !important;
}

/* Sections após o bento ficam opacas — escondem vídeo */
body.home .atp-bento-section ~ section {
    position: relative;
    z-index: 3;
    background: var(--atp-bg);
}