/* ════════════════════════════════════════════════════════════════════
   ATP — Fixes da Auditoria 2026-07-18 (sobre o design ORIGINAL v1.8.2)
   Identidade visual intacta (roxo + dourado, Jost/Kumbh, astronauta).
   Este arquivo só conserta bugs de renderização confirmados no browser.
   Carrega DEPOIS de atp-overrides.css.
   ════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Seções escuras ficavam texto-branco-sobre-branco quando o
   vídeo de fundo desaparecia. Fundo sólido roxo profundo garantido. ── */
.atp-dark-section {
    background:
        radial-gradient(1000px 500px at 80% 0%, rgba(109, 58, 154, .35), transparent 60%),
        linear-gradient(160deg, #1c0633 0%, #0e031a 100%) !important;
    color: #fff;
}
.atp-dark-section h2, .atp-dark-section h3 { color: #fff; }

/* CTA pre-footer com mesmo seguro (gradiente roxo sempre presente) */
.atp-cta-prefooter {
    background: linear-gradient(135deg, var(--atp-purple-600), var(--atp-purple-800)) !important;
    color: #fff !important;
}

/* ── FIX 2: Wall of Love e outros .atp-fade-up presos em opacity:0
   quando o IntersectionObserver não disparava. Cinto de segurança:
   CSS força visibilidade após 2.2s aconteça o que acontecer.
   Quando o motion-pro assume (html.atp-mpro), ele é o dono dos reveals
   com scroll — o cinto vale só pra no-JS / falha de script. ── */
html:not(.atp-mpro) .atp-fade-up:not(.is-visible),
html:not(.atp-mpro) .atp-blur-reveal:not(.is-visible),
html:not(.atp-mpro) [data-reveal]:not(.is-visible) {
    animation: atpForceVisible 0s linear 2.2s forwards;
}
@keyframes atpForceVisible {
    to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    .atp-fade-up, .atp-blur-reveal, [data-reveal] {
        opacity: 1 !important; transform: none !important; animation: none !important;
    }
}

/* ── FIX 3: Vídeo do hero (mp4 ausente no backup) — o poster do
   astronauta assume como fundo estático, sem requisição quebrada. ── */
.atp-video-bg {
    background: url('../../../../uploads/atp-hero/astronaut-poster.jpg') center / cover no-repeat, #0e031a;
}

/* ── FIX 4: Logo do header vinha de imagem ACF quebrada (renderizava
   minúscula). O lockup tipográfico do próprio tema assume. ── */
.atp-nav__logo img { display: none !important; }

/* ── FIX 5: contraste mínimo dos nomes no marquee quando o fundo
   escuro não está presente (páginas internas). ── */
body:not(.home) .atp-marquee__item { opacity: 1 !important; }

/* ── FIX 6: no mobile a bottombar já tem WhatsApp; o float do plugin
   duplicava o botão e cobria CTA. ── */
@media (max-width: 767px) {
    .ht-ctc.ht-ctc-chat { display: none !important; }
}

/* ── FIX 7: paginação sem FontAwesome carregado em algumas rotas ── */
.styled-pagination .prev a, .styled-pagination .next a { font-size: 1.2em; line-height: 1; }

/* ── FIX 8: shortcode [atp_cta_inline] — o h3/p herdavam cor escura de
   regras globais de heading e sumiam sobre o gradiente roxo. ── */
.atp-cta-inline h3, .atp-cta-inline p { color: #fff !important; }

/* ── FIX 9: faixa preta vazia entre o CTA e o footer nas páginas internas
   (prefooter mora DENTRO do <footer>, que tem padding-top escuro). ── */
.atp-footer:has(> .atp-cta-prefooter) { padding-top: 0 !important; }
.atp-footer > .atp-cta-prefooter { margin-top: 0 !important; }
.atp-footer:has(> .atp-cta-prefooter) .atp-footer__grid { padding-top: var(--atp-space-16); }

/* ── FIX 10: contraste sobre o hero roxo — breadcrumb apagado e botão
   fantasma ilegível. ── */
.atp-page-hero__breadcrumb,
.atp-page-hero__breadcrumb a,
.atp-page-hero__breadcrumb span { color: rgba(255, 255, 255, .78) !important; }
.atp-page-hero__breadcrumb a:hover { color: #fff !important; }
.atp-page-hero .atp-btn--ghost {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .45) !important;
}

/* ── FIX 11: eyebrow-pill do hero interno sumia — a regra global
   '.atp-page-hero * { color: inherit }' (atp-overrides) anula o dourado
   do token. Contraste era 1,33:1. ── */
.atp-page-hero .atp-hero__eyebrow,
.atp-hero .atp-hero__eyebrow { color: var(--atp-gold-300) !important; }

/* ── FIX 12: botão .atp-btn--ghost (glass escuro) usado sobre seções
   CLARAS virava pill cinza fora da paleta. Em contexto claro, vira
   contorno roxo. ── */
.atp-section .atp-btn--ghost,
.atp-bento-section .atp-btn--ghost {
    background: transparent !important;
    color: var(--atp-brand) !important;
    border: 1.5px solid var(--atp-brand) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.atp-section .atp-btn--ghost:hover,
.atp-bento-section .atp-btn--ghost:hover {
    background: rgba(64, 12, 109, .06) !important;
    color: var(--atp-brand) !important;
}

/* ── FIX 13: no mobile o CTA do header exibia DUAS setas (o SVG inline +
   um ::after '→') e quebrava em 2 linhas. Mata a seta duplicada e
   trava numa linha. ── */
@media (max-width: 640px) {
    .atp-nav__cta::after { content: none !important; }
    .atp-nav__cta {
        white-space: nowrap;
        font-size: 0.8125rem;
        padding: 10px 14px !important;
        gap: 6px;
    }
    .atp-nav__cta svg { width: 13px; height: 13px; }
}

/* ── FIX 14: valor "R$ 6.000" da calculadora transbordava o card — mono
   text-5xl é largo demais pro minmax(180px). Escopado só na calculadora
   (a home usa .atp-stats__value, não afetada). ── */
#atp-roas-result {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}
#atp-roas-result .atp-stat__number {
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

/* ── FIX 15: páginas full-width de seção (.atp-sections-flow) — o texto
   solto (parágrafo de intro, headings) colava na borda esquerda. Ganha
   container centralizado; as seções-shortcode seguem full-bleed. ── */
.atp-sections-flow { padding-top: var(--atp-space-10); }
.atp-sections-flow > p,
.atp-sections-flow > h1,
.atp-sections-flow > h2,
.atp-sections-flow > h3,
.atp-sections-flow > ul,
.atp-sections-flow > ol,
.atp-sections-flow > blockquote {
    max-width: var(--atp-container);
    margin-inline: auto;
    padding-inline: var(--atp-space-4);
    box-sizing: border-box;
}

/* ── FIX 16: <em> destacado do título do hero sumia (color:transparent +
   background-clip:text) quando o Splitting.js quebrava o texto em spans —
   o clip do gradiente não sobrevive à fragmentação, restando texto
   invisível. Cor dourada sólida é robusta com e sem Splitting, e cobre
   também os spans .word/.char gerados. ── */
.atp-hero__title em,
.atp-page-hero__title em,
.atp-hero__title em .word, .atp-hero__title em .char,
.atp-page-hero__title em .word, .atp-page-hero__title em .char {
    background: none !important;
    -webkit-text-fill-color: var(--atp-gold-300) !important;
    color: var(--atp-gold-300) !important;
}

/* ── FIX 17: thumbnails de post sem imagem (backup local não trouxe alguns
   crops) mostravam o alt-text cru sobre fundo cinza. Fallback de marca:
   gradiente roxo + nome centralizado. A imagem real, quando carrega,
   cobre por cima (z-index). ── */
.atp-post-card__thumb {
    position: relative;
    background: linear-gradient(135deg, var(--atp-purple-600), var(--atp-purple-800));
    overflow: hidden;
}
.atp-post-card__thumb::after {
    content: "Agência Tráfego Pago";
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    font-family: var(--atp-font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.45);
}
.atp-post-card__thumb img {
    position: relative;
    z-index: 1;
    color: transparent; /* esconde o alt-text quando a imagem falha */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── FIX 18: grids inline de 2 colunas fixas (home dashboard + funil, e
   similares) não colapsavam no mobile — ficavam 2 colunas espremidas a
   390px. Força 1 coluna. Grids auto-fit já colapsam sozinhos e não são
   afetados. ── */
@media (max-width: 767px) {
    [style*="grid-template-columns:1.1fr"],
    [style*="grid-template-columns: 1.1fr"],
    [style*="grid-template-columns:1fr 1.1fr"],
    [style*="grid-template-columns:1.25fr"],
    [style*="grid-template-columns:1.2fr"],
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:repeat(2,"],
    [style*="grid-template-columns: repeat(2,"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── FIX 19: parágrafo de marca do rodapé era #3d3f44 sobre o footer
   quase-preto (#0e031a) — contraste ~1,8:1, ilegível. ── */
.atp-footer__brand p { color: rgba(255, 255, 255, 0.6) !important; }
.atp-footer__bottom, .atp-footer__bottom > div, .atp-footer__bottom a { color: rgba(255, 255, 255, 0.5) !important; }
.atp-footer__bottom a:hover { color: rgba(255, 255, 255, 0.8) !important; }

/* ── FIX 20: no mobile o H2 do bento da home ficava branco sobre branco —
   a regra força branco pro vídeo escuro do desktop, mas no mobile o vídeo
   é loop e o fundo fica claro. Restaura fundo branco + texto roxo. ── */
@media (max-width: 767px) {
    body.home .atp-bento-section { background: var(--atp-bg) !important; }
    body.home .atp-bento-section h2 { color: var(--atp-brand) !important; text-shadow: none !important; }
    body.home .atp-bento-section > div > p,
    body.home .atp-bento-section > div > .atp-fade-up + p {
        color: var(--atp-text-muted) !important;
        text-shadow: none !important;
    }
}

/* ── FIX 21: <strong> na prosa vinha com font-weight 400 (sem destaque) —
   os rótulos de lista e nomes próprios perdiam o negrito. ── */
.atp-content-2col strong,
.atp-content-2col__main strong,
.atp-sections-flow strong,
article .entry-content strong,
.atp-prose strong { font-weight: 700 !important; }

/* ── FIX 22: no mobile os logos-texto do marquee ficavam apagados demais
   (grayscale + opacity 0.65, sem hover pra "acender"). ── */
@media (max-width: 767px) {
    .atp-marquee__item {
        opacity: 0.92;
        color: var(--atp-gray-600);
        filter: grayscale(0.25);
    }
    .atp-marquee__title { color: var(--atp-text-muted); }
}

/* ── FIX 23: no mobile os overlays de base (cookie banner, newsletter)
   colidiam com a barra fixa de CTA. Enquanto o cookie banner está visível,
   a bottombar recua. ── */
@media (max-width: 767px) {
    body:has(.atp-cookie-banner) .atp-bottombar,
    body:has(.atp-newsletter-modal.is-visible) .atp-bottombar {
        transform: translateY(120%);
        transition: transform .3s var(--atp-ease);
    }
}

/* ── FIX 24: seções largas ([atp_cta_inline], marquee, trust, stats)
   embutidas na coluna de texto das páginas editoriais (geo/pillar) ficavam
   confinadas a ~66% da largura, com a direita vazia abaixo do aside. Como
   sempre vêm depois do aside (mais abaixo na página), estendem-se pra cobrir
   o container inteiro (main 2fr + gap + aside 1fr = +50% + gap). ── */
@media (min-width: 1024px) {
    .atp-content-2col__main .atp-cta-inline,
    .atp-content-2col__main .atp-marquee,
    .atp-content-2col__main .atp-trust-strip,
    .atp-content-2col__main .atp-stats {
        width: calc(150% + var(--atp-space-12));
        max-width: calc(150% + var(--atp-space-12));
        position: relative;
        z-index: 1;
    }
    /* garante que wrappers do wpautop não recortem o break-out */
    .atp-content-2col__main,
    .atp-content-2col__main > div { overflow: visible; }
}

/* ── FIX 25: botões de pergunta do FAQ com pergunta de 1 linha tinham só
   32px de altura (padding:0), abaixo do alvo de toque mínimo de 44px no
   mobile. Garante área clicável adequada sem mexer no visual. ── */
.atp-faq__question { min-height: 44px; }

/* ── FIX 26: banner de cookies era translúcido demais (glass 0.55) e o hero
   vazava por trás no mobile. Opacifica mantendo o blur. ── */
.atp-cookie-banner { background: rgba(19, 19, 19, 0.94) !important; }

/* ── FIX 27: links do rodapé tinham ~19px de área de toque (só line-height).
   Amplia pra 44px no mobile sem alterar o espaçamento visual. ── */
@media (max-width: 767px) {
    .atp-footer__col a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 2px 0;
    }
}

/* ── FIX 28: no mobile o título/logos do marquee encostavam e cortavam nas
   bordas da viewport (390px). Reduz a fonte do eyebrow, garante padding
   lateral e adiciona fade nas bordas da esteira. ── */
@media (max-width: 767px) {
    .atp-marquee__title {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        letter-spacing: 0.02em;
        padding: 0 20px;
    }
    .atp-marquee { overflow: hidden; }
    .atp-marquee__track {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
}

/* ── FIX 29: faixa branca de 80px abaixo do rodapé escuro no mobile — o
   body reserva padding-bottom pra bottombar fixa, mas o overscroll ficava
   branco. Pinta o fundo do documento de escuro (footer). ── */
html { background: #0e031a; }

/* ── FIX 30: gap grande demais entre "R$" e o valor nas métricas
   ("R$   50M+"). Aproxima o prefixo. ── */
.atp-hero__metric-value,
.atp-stats__value,
.atp-stat__number { word-spacing: -0.12em; }

/* ── FIX 31: IMAGEM DESTACADA DO POST — as fotos são 1024×1024 (IA) e eram
   esticadas pra largura total do container (~1200px), gerando upscale +
   pixelização + quadrado esmagado full-bleed. Aqui viram uma moldura
   EDITORIAL PREMIUM: largura contida (860px = downscale nítido), proporção
   cinematográfica 16:9 com object-fit cover, borda fina + sombra suave +
   brilho sutil no topo. Cara de revista, dá vontade de ler. ── */
.atp-post-hero-img {
    max-width: 860px;
    /* margin-inline auto em declarações separadas: se o calc do topo falhar
       (token indefinido), a centralização NÃO é descartada junto. */
    margin-top: calc(var(--atp-space-12) * -1);
    margin-bottom: var(--atp-space-12);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--atp-space-4);
    position: relative;
    z-index: 2;
}
.atp-post-hero-img img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--atp-radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 24px 60px -18px rgba(0, 0, 0, 0.55),
        0 4px 16px -6px rgba(90, 30, 160, 0.35);
    image-rendering: auto;
}
@media (max-width: 640px) {
    .atp-post-hero-img { margin-top: calc(var(--atp-space-10) * -1); }
    .atp-post-hero-img img { aspect-ratio: 4 / 3; border-radius: var(--atp-radius-xl); }
}
/* fallback de marca quando o arquivo da imagem destacada sumiu do backup
   (404): em vez do ícone feio de imagem quebrada dentro do frame premium,
   mostra um bloco com gradiente roxo + título do post. */
.atp-post-hero-img__fallback { display: none; }
.atp-post-hero-img.is-broken img { display: none; }
.atp-post-hero-img.is-broken .atp-post-hero-img__fallback {
    display: flex;
    aspect-ratio: 16 / 9;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--atp-space-8);
    background: linear-gradient(135deg, var(--atp-purple-600), var(--atp-purple-800));
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--atp-font-heading);
    font-weight: 800;
    font-size: clamp(1.05rem, 2.4vw, 1.6rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    border-radius: var(--atp-radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 24px 60px -18px rgba(0, 0, 0, 0.55),
        0 4px 16px -6px rgba(90, 30, 160, 0.35);
}
@media (max-width: 640px) {
    .atp-post-hero-img.is-broken .atp-post-hero-img__fallback { aspect-ratio: 4 / 3; border-radius: var(--atp-radius-xl); }
}

/* ── FIX 32: imagens DENTRO do corpo do post — premium, contidas, sempre
   CENTRADAS na coluna de leitura. Antes, imagens grandes (1103px) eram
   esticadas até preencher a coluna toda e colavam na esquerda, enquanto as
   dos posts com várias imagens (632px) ficavam centradas — inconsistência
   que o Bruno apontou. Agora TODAS têm o mesmo teto de largura (640px) e
   margin auto, então a primeira imagem centraliza igual às demais. ── */
.atp-content-2col__main img {
    display: block;
    max-width: min(100%, 640px);
    height: auto;
    margin: var(--atp-space-8) auto;
    border-radius: var(--atp-radius-xl);
    border: 1px solid var(--atp-border);
    box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.30);
}
/* o <p> que embrulha a imagem também centraliza (caso a imagem herde
   alinhamento de texto do parágrafo pai) */
.atp-content-2col__main p:has(> img:only-child) { text-align: center; }
.atp-content-2col__main figure {
    margin: var(--atp-space-8) auto;
    max-width: min(100%, 640px);
    text-align: center;
}
.atp-content-2col__main figure img { margin: var(--atp-space-4) auto; max-width: 100%; }
.atp-content-2col__main figcaption {
    text-align: center;
    font-size: var(--atp-text-sm);
    color: var(--atp-text-muted);
    margin-top: var(--atp-space-3);
    font-style: italic;
}

/* ── FIX 33: thumbs da listagem cósmica + relacionados também 16:9 nítidos,
   sem estourar resolução (downscale de 1024px). ── */
.atp-post-card__thumb img,
.atp-cosmos-card__thumb img { image-rendering: auto; }

/* ── FIX 34: tabelas dentro do conteúdo do post (benchmarks das páginas de
   nicho) renderizavam cruas, sem borda nem zebra. Estilo editorial premium:
   header roxo da marca, zebra sutil, cantos arredondados, scroll horizontal
   no mobile. ── */
.atp-content-2col__main table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--atp-space-6) 0;
    font-size: var(--atp-text-sm);
    line-height: 1.45;
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg);
    overflow: hidden;
}
.atp-content-2col__main table th {
    background: var(--atp-grad-primary);
    color: #fff;
    font-family: var(--atp-font-heading);
    font-weight: var(--atp-weight-bold);
    text-align: left;
    padding: var(--atp-space-3) var(--atp-space-4);
    white-space: nowrap;
}
.atp-content-2col__main table td {
    padding: var(--atp-space-3) var(--atp-space-4);
    border-top: 1px solid var(--atp-border);
    vertical-align: top;
    color: var(--atp-text);
}
.atp-content-2col__main table tbody tr:nth-child(even) td {
    background: var(--atp-bg-soft);
}
/* números e faixas destacados na 3ª coluna (faixa observada) */
.atp-content-2col__main table td:nth-child(3) {
    font-family: var(--atp-font-mono);
    font-weight: var(--atp-weight-semibold);
    color: var(--atp-brand);
    white-space: nowrap;
}
@media (max-width: 640px) {
    .atp-content-2col__main table { display: block; overflow-x: auto; }
}