/**
 * BT Components — buttons, cards, links, forms, hover states
 * Aplicado globalmente. Pode brigar com tema antigo via specificity + alguns !important críticos.
 *
 * @version 1.0
 */

/* ============ TYPOGRAPHY refinement ============ */
.bt-system, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, .entry-title, .bt-hero-title, .categorytitle, .widgettitle,
.title, .bt-folha-cat, .heading {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
    letter-spacing: -0.022em !important;
    font-feature-settings: 'opsz' on, 'kern' on, 'liga' on !important;
    font-optical-sizing: auto !important;
}

h1, .entry-title { font-weight: 800 !important; line-height: 1.08 !important; }
h2 { font-weight: 700 !important; line-height: 1.20 !important; }
h3 { font-weight: 700 !important; line-height: 1.30 !important; }

/* 1.3.1: HIERARQUIA FRAUNCES com 3 tiers de opsz por tamanho.
 *
 * Decisão Marcelo 2026-05-15 v2 (gravada em memória/feedback_fonte_titulos_materia.md):
 * substitui regra anterior "opsz 144 em tudo" (1.2.8) que dava ilegibilidade
 * em corpo pequeno. Fraunces é variable font: opsz 36 é otimizado pra subhead/corpo,
 * opsz 144 é display. Usar a variação certa pra cada tamanho.
 *
 * Tier 1 (cards de lista 14-15px):   opsz 36,  wght 700, ls -0.012em
 * Tier 2 (cards display 18-22px):    opsz 72,  wght 700, ls -0.018em
 * Tier 3 (hero/single 40-60px):      opsz 144, wght 800, ls -0.025em
 */

/* BASE: family + cor + smoothing — comum a TODOS os .ed-title */
.ed-title,
h1.ed-title,
h2.ed-title,
h3.ed-title,
span.ed-title,
.ed-title.heading {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
    font-optical-sizing: auto !important;
    color: var(--bt-fg) !important;
}

/* TIER 1 — CARDS DE LISTA (Mais Lidas, Últimas, sidebar widgets).
 * Contexto: dentro de .story-link, aside, .mais-lidas, .widget, ou span.ed-title.
 * Tamanho típico: 14-15px. opsz 36 otimiza letterforms pra esse range. */
.story-link .ed-title,
.story-link.flex .ed-title,
aside .ed-title,
.mais-lidas .ed-title,
.widget .ed-title,
.bt-sidebar .ed-title,
li .ed-title,
span.ed-title.heading {
    font-variation-settings: 'opsz' 36, 'SOFT' 30, 'WONK' 0 !important;
    font-weight: 700 !important;
    letter-spacing: -0.012em !important;
}

/* TIER 2 — CARDS DE COBERTURA EDITORIAL.
 * Contexto: dentro de .ed-card (mas NÃO sendo .display-tight do hero).
 * Tamanho típico: 17-22px. opsz 72 é intermediário — não tão denso quanto display,
 * mas com mais peso visual que opsz 36. */
.ed-card .ed-title.heading:not(.display-tight),
article.ed-card a.block h3.ed-title {
    font-variation-settings: 'opsz' 72, 'SOFT' 30, 'WONK' 0 !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
}

/* TIER 3 — HERO E SINGLE H1.
 * Contexto: h1 do hero da home, h1 da página single, qualquer .display-tight.
 * Tamanho típico: 40-60px+. opsz 144 é display puro — máximo contraste,
 * letterforms desenhadas pra tamanho grande. */
.ed-title.display-tight,
h1.ed-title,
h1.ed-title.display-tight,
.ed-title-link h1.ed-title,
.ed-title-link .ed-title {
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0 !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

p, li, td, blockquote { font-feature-settings: 'kern' on, 'liga' on; }

::selection { background: #7C3AED; color: #fff; }
::-moz-selection { background: #7C3AED; color: #fff; }

/* ============ LINKS ============ */
/* Reset global. :link/:visited garante que vence o UA stylesheet
 * (que tem :any-link com especificidade maior). */
a, a:link, a:visited {
    text-decoration: none;
    color: inherit;
    transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Wrappers de card (<a class="block"> envolvendo h1/h3 + img + categoria):
 * ZERO underline, ZERO gradient, ZERO border. !important em 1.2.3 pra
 * vencer regra concorrente não-diagnosticada que estava aplicando
 * text-decoration:underline no <a class="block"> em produção
 * (provável WP plugin legacy CSS).
 *
 * 1.3.4: estendido pra incluir .story-link e .ed-title-link que estavam
 * vazando underline do UA stylesheet (resultava em "linha duplicada"
 * nos cards de Mais Lidas/Últimas — UA underline + .ed-title-fx
 * gradient = 2 linhas). */
article > a,
article a.block,
.ed-card > a,
.ed-card a.block,
a.block,
a.story-link,
.story-link,
a.ed-title-link,
.ed-title-link {
    text-decoration: none !important;
    background-image: none !important;
    border-bottom: 0 !important;
}

/* 1.3.5: Filhos inline desses wrappers — ZERO underline. */
a.story-link *,
.story-link *,
a.ed-title-link *,
.ed-title-link *,
.ed-card > a *,
.ed-card a.block * {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
}

/* 1.3.8/1.3.10: ESTADO :HOVER do <a> reativa text-decoration via UA.
 * Reset explícito pra :hover state em todos os wrappers de card +
 * nav menu (adicionado em 1.3.10). */
a.story-link:hover,
.story-link:hover,
a.ed-title-link:hover,
.ed-title-link:hover,
.ed-card > a:hover,
.ed-card a.block:hover,
a.bt-nav-link:hover,
.bt-nav-link:hover,
a.story-link:hover *,
.story-link:hover *,
a.ed-title-link:hover *,
.ed-title-link:hover *,
.ed-card > a:hover *,
.ed-card a.block:hover *,
a.bt-nav-link:hover *,
.bt-nav-link:hover *,
a.bt-nav-trigger,
a.bt-nav-trigger:hover,
a.bt-nav-trigger:hover * {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
}

/* Exceção crítica: .ed-title-fx PRECISA manter seu background-image
 * gradient (não usa text-decoration, então não conflita com !important
 * acima, mas reforça explicitamente pra documentação). */

/* ============================================================
 * 1.4.0: NAV DROPDOWNS — estrutura Notícias/Mercados/Certificação
 * Estilo Bankless: dropdown vertical com section header, items
 * com ícone Lucide outline + título + descrição curta.
 * ============================================================ */

.bt-nav-group {
    position: relative;
    display: inline-flex;
}

.bt-nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    font-family: 'Inter', sans-serif;
    transition: color .2s ease;
    position: relative;
}

.bt-nav-trigger:hover,
.bt-nav-group[data-dropdown="open"] .bt-nav-trigger {
    color: var(--bt-accent) !important;
}

/* 1.4.9: underline animado lilás esq→dir nos triggers Notícias/Mercados.
 * Aparece no hover do grupo (não só do trigger) pra ficar consistente
 * com a doutrina dos cards. Posicionado entre o texto e o chevron,
 * cobre só o label (não o chevron) usando `right` calculado. */
.bt-nav-trigger::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 24px; /* deixa o chevron de fora */
    bottom: 4px;
    height: 1px;
    background: var(--bt-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.bt-nav-trigger:hover::after,
.bt-nav-group[data-dropdown="open"] .bt-nav-trigger::after,
.bt-nav-group:hover .bt-nav-trigger::after {
    transform: scaleX(1);
}

.bt-chevron {
    transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.7;
}

.bt-nav-group[data-dropdown="open"] .bt-chevron {
    transform: rotate(180deg);
}

.bt-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bt-bg-2);
    border: 1px solid var(--bt-divider);
    border-radius: 16px;
    padding: 8px;
    min-width: 320px;
    margin-top: 4px;
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.25), 0 8px 16px -4px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition: opacity .22s ease, transform .22s cubic-bezier(0.22, 1, 0.36, 1), visibility .22s ease;
    z-index: 60;
    pointer-events: none;
}

/* 2.3.0: Bridge invisível entre trigger e dropdown.
 * Evita perda de hover quando o cursor cruza o gap visual entre
 * trigger e o card do dropdown. A bridge se estende 16px pra cima,
 * cobrindo o margin-top + qualquer padding extra do header. */
.bt-dropdown::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
    background: transparent;
}

.bt-nav-group[data-dropdown="open"] .bt-dropdown {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

/* 1.4.7: AUTO-ABRIR NO HOVER.
 * Em dispositivos com pointer fino (mouse/trackpad), o dropdown
 * abre automaticamente ao hover no grupo — sem precisar clicar.
 * Para touch/mobile, o JS de click continua funcionando (esses
 * dispositivos não acionam hover persistente).
 *
 * Hover no grupo INTEIRO (não só no trigger) — assim ao mover
 * o cursor do trigger pra dentro do dropdown ele continua aberto. */
@media (hover: hover) and (pointer: fine) {
    .bt-nav-group:hover .bt-dropdown {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }
    .bt-nav-group:hover .bt-chevron {
        transform: rotate(180deg);
    }
    .bt-nav-group:hover .bt-nav-trigger {
        color: var(--bt-accent) !important;
    }
}

.bt-dropdown-section {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--bt-fg-3);
    padding: 12px 16px 8px;
}

.bt-dropdown-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 14px;
    align-items: start;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--bt-fg);
    transition: background .15s ease, color .15s ease;
    position: relative;
}

.bt-dropdown-item:hover {
    background: rgba(111, 78, 255, 0.06);
    color: var(--bt-accent);
}

/* 1.4.9: SUPRIMIR ::after vindo de regras legacy.
 * O <a class="bt-dropdown-item"> vive dentro de <nav>, então as
 * regras `nav a::after` (components.css) e `header nav a::after`
 * (editorial.css) pegam ele por padrão e desenham uma linha preta
 * embaixo do item INTEIRO no hover. Matamos aqui pra a linha
 * aparecer só embaixo do TÍTULO (regra logo abaixo). */
.bt-dropdown-item::after,
.bt-dropdown-item:hover::after {
    content: none !important;
    display: none !important;
    background: none !important;
    height: 0 !important;
}

.bt-dropdown-icon {
    width: 20px;
    height: 20px;
    color: var(--bt-fg-2);
    margin-top: 2px;
    transition: color .15s ease;
    flex-shrink: 0;
}

.bt-dropdown-item:hover .bt-dropdown-icon {
    color: var(--bt-accent);
}

.bt-dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bt-dropdown-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--bt-fg);
    line-height: 1.2;
    transition: color .15s ease;
    position: relative;
    /* 1.4.11: width: fit-content + align-self: flex-start.
     * Antes era display: inline-block, mas .bt-dropdown-title é
     * filho de .bt-dropdown-text (flex column). Em flex item,
     * inline-block ignora intrinsic width e estica até o container.
     * Resultado: a linha lilás esq→dir do ::after estendia até o
     * fim do dropdown. fit-content + flex-start encolhe o span
     * ao tamanho do texto, e a linha acompanha. */
    display: inline-block;
    width: fit-content;
    align-self: flex-start;
    max-width: 100%;
}

.bt-dropdown-item:hover .bt-dropdown-title {
    color: var(--bt-accent);
}

/* 1.4.9: underline lilás esq→dir SÓ no título quando hover do item.
 * Doutrina sistêmica do tema: hover dos cards → linha esq→dir embaixo
 * do título. Replicamos pros dropdowns pra coerência. */
.bt-dropdown-title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--bt-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.bt-dropdown-item:hover .bt-dropdown-title::after {
    transform: scaleX(1);
}

.bt-dropdown-desc {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--bt-fg-3);
    line-height: 1.4;
}

/* ============================================================
 * 1.4.10: BLINDAGEM TEXT-DECORATION NOS HOVERS
 *
 * Bug observado por Marcelo 2026-05-15:
 *   - dropdown item Tecnologia (hover): linha lilás embaixo do
 *     título OK, mas tbm aparecia text-decoration: underline
 *     embaixo das palavras da DESCRIÇÃO ("IA, software e
 *     startups").
 *   - link QR ASSET MANAGEMENT (hover): linha do .bt-link-anim
 *     OK, mas tbm aparecia text-decoration: underline grossa
 *     embaixo do texto inteiro.
 *
 * Causa raiz: regra do CSS base (`.bt-dropdown-item { text-
 * decoration: none !important }` e `.bt-link-anim { text-
 * decoration: none !important }`) só está no estado base.
 * Algum stylesheet legacy (WP core, plugin, ou UA stylesheet
 * via cascade quirky) reativa `text-decoration: underline`
 * no estado :hover do <a>, vazando pros filhos via inheritance.
 *
 * Solução: blindar :hover/:focus/:active explicitamente em
 * todos os <a> relevantes E nos descendentes que herdam.
 * ============================================================ */

.bt-dropdown-item,
.bt-dropdown-item:link,
.bt-dropdown-item:visited,
.bt-dropdown-item:hover,
.bt-dropdown-item:focus,
.bt-dropdown-item:active,
.bt-dropdown-item:hover .bt-dropdown-title,
.bt-dropdown-item:hover .bt-dropdown-desc,
.bt-dropdown-item:focus .bt-dropdown-title,
.bt-dropdown-item:focus .bt-dropdown-desc,
.bt-dropdown-title,
.bt-dropdown-desc {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: solid !important;
    text-decoration-color: transparent !important;
}

.bt-link-anim,
.bt-link-anim:link,
.bt-link-anim:visited,
.bt-link-anim:hover,
.bt-link-anim:focus,
.bt-link-anim:active,
a.bt-link-anim,
a.bt-link-anim:link,
a.bt-link-anim:visited,
a.bt-link-anim:hover,
a.bt-link-anim:focus,
a.bt-link-anim:active,
.ulink,
.ulink:hover,
.ulink:focus,
.ulink:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: solid !important;
    text-decoration-color: transparent !important;
}

/* 1.4.18: DOUTRINA HOVER DE LINKS INLINE (Marcelo).
 *
 * Base:  cor roxa estável (--bt-accent), SEM underline visível
 * Hover: MESMA cor (não muda), underline esq→dir aparece via
 *        background-size: 0% → 100%
 *
 * Substitui a regra antiga que tinha underline 1px em base e
 * fazia mudança de cor + underline 2px no hover.
 *
 * NÃO usa "article a" porque isso pegaria o <a class="block">
 * wrapper de card — bug 1.2.0 corrigido em 1.2.1. */
.entry-content a:not(.btn):not(.button):not(.bt-btn):not(.bt-link-anim),
.prose-v6 a:not(.btn):not(.button):not(.bt-btn):not(.bt-link-anim) {
    color: var(--bt-accent);
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    text-decoration: none;
    transition: background-size 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.entry-content a:not(.btn):not(.button):not(.bt-btn):not(.bt-link-anim):hover,
.prose-v6 a:not(.btn):not(.button):not(.bt-btn):not(.bt-link-anim):hover {
    background-size: 100% 1px;
    color: var(--bt-accent);
}

/* ============ NAV / MENU underline animado ============ */
nav a, .menu-item a, .c-menu a {
    position: relative;
    transition: color 180ms;
}
nav a::after, .menu-item a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: #7C3AED;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
nav a:hover::after, .menu-item a:hover::after,
nav .current-menu-item > a::after, .menu-item.current-menu-item > a::after {
    transform: scaleX(1);
}

/* ============================================================
 * 1.4.4: BUTTONS — doutrina sistêmica Bankless-style (refinada)
 *
 * Decisão Marcelo 2026-05-15 (correções pós-1.4.3):
 *   #1 Lógica "um botão é o negativo do outro" PRESERVADA:
 *      INSCREVER-SE (solid lilás + texto branco)
 *      ENTRAR       (transparent + border lilás + texto lilás)
 *      = mesma família visual, inversão figure-ground.
 *   #2 Cor roxa solid no primary FORÇADA com !important
 *      (rules legacy `header nav a { color: ... }` em editorial.css
 *      vazavam pro INSCREVER-SE em light mode).
 *   #3 Tamanho original restaurado: padding 0.5rem 1rem, 14px
 *      vertical clearance — perto do `px-4 py-2` original.
 *   #4 Pill border-radius FORÇADO com !important (alta pregnância
 *      visual na página é parte da identidade do header).
 *   #6 Hover doctrine pra 4 cenários explicitamente cobertos:
 *      i)   Solid primary @ light mode → bg accent-2 + glow lilás
 *      ii)  Solid primary @ dark mode  → bg accent-2 + glow + brilho
 *      iii) Outline      @ light mode  → vira solid + glow
 *      iv)  Outline      @ dark mode   → vira solid + glow + brilho
 *
 * Arquitetura:
 *   .bt-btn               → base (padding, family, font, pill, transition)
 *   .bt-btn--primary      → solid lilás, texto branco (CTA principal)
 *   .bt-btn--outline      → border lilás transparente, texto lilás
 *   .bt-btn--ghost        → sem border/bg, texto fg-2 (admin discreto)
 *
 * Hover universal:
 *   - transition 180ms cubic-bezier(0.22, 1, 0.36, 1)
 *   - translateY(-1px) (lift sutil)
 *   - box-shadow glow 0 0 0 1px accent-50 + 0 8px 24px accent-35
 *   - :active translateY(0) — feedback tátil
 *   - :focus-visible outline accent — acessibilidade
 *
 * Forms (input[type=submit], button[type=submit]) continuam com
 * tratamento próprio em bloco "LEGACY BUTTONS" abaixo (dark solid),
 * porque são CTAs de formulário e não compartilham paleta header.
 * ============================================================ */

.bt-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.5rem 1rem;
    min-height: 32px;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    border-radius: 9999px !important;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    background: transparent;
    color: var(--bt-fg);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
                background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
                color 180ms cubic-bezier(0.22, 1, 0.36, 1);
    box-sizing: border-box;
    white-space: nowrap;
}

.bt-btn:active {
    transform: translateY(0);
}

.bt-btn:focus-visible {
    outline: 2px solid var(--bt-accent);
    outline-offset: 3px;
}

/* ----------------------------------------------------------
 * PRIMARY — CTA principal (Inscrever-se, Premium upgrade)
 * Solid lilás, texto branco. !important porque regras legacy
 * de editorial.css `header nav a` (que tem hover #0F172A em
 * light mode) podem alcançar e quebrar a cor do texto.
 * ---------------------------------------------------------- */
.bt-btn--primary,
a.bt-btn--primary,
a.bt-btn.bt-btn--primary {
    background: var(--bt-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--bt-accent) !important;
}

/* Cenário (i): primary @ light mode — hover NEGATIVO CROMÁTICO.
 * 1.4.5: decisão Marcelo 2026-05-15: em vez do hover ir pro tom
 * lilás mais escuro (--bt-accent-2), pula pra AMARELO DOURADO
 * #FBBF24 (cor accent do dark mode do tokens.css legado, usada
 * aqui como inversão complementar do roxo no color wheel).
 * Texto continua branco — legibilidade preservada em amarelo
 * dourado. Glow muda pra glow âmbar pra coerência cromática. */
.bt-btn--primary:hover,
a.bt-btn--primary:hover {
    background: #FBBF24 !important;
    border-color: #FBBF24 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.45),
                0 10px 26px rgba(251, 191, 36, 0.38);
}

.bt-btn--primary:active,
a.bt-btn--primary:active {
    background: #F59E0B !important;
    border-color: #F59E0B !important;
    transform: translateY(0);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.5),
                0 2px 8px rgba(245, 158, 11, 0.25);
}

/* Cenário (ii): primary @ dark mode — hover.
 * Mantém o comportamento lilás (dark já tem o amarelo como cor
 * accent default — inverter pra amarelo aqui seria redundante).
 * Glow amplificado pra brilho visível em fundo escuro. */
html[data-bt-theme="dark"] .bt-btn--primary:hover,
html[data-bt-theme="dark"] a.bt-btn--primary:hover {
    background: var(--bt-accent-2) !important;
    border-color: var(--bt-accent-2) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.55),
                0 0 18px rgba(124, 92, 255, 0.30),
                0 12px 32px rgba(124, 92, 255, 0.45);
}

html[data-bt-theme="dark"] .bt-btn--primary:active,
html[data-bt-theme="dark"] a.bt-btn--primary:active {
    background: var(--bt-accent-2) !important;
    border-color: var(--bt-accent-2) !important;
    box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.55),
                0 2px 8px rgba(124, 92, 255, 0.30);
}

/* ----------------------------------------------------------
 * OUTLINE — secundário (Entrar, Minha Área, Premium logged-in)
 * Transparente com border lilás + texto lilás.
 * Hover: vira primary solid (com glow). É o "negativo" do
 * primary — o usuário enxerga a inversão.
 * ---------------------------------------------------------- */
.bt-btn--outline,
a.bt-btn--outline,
a.bt-btn.bt-btn--outline {
    background: transparent !important;
    color: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
}

/* Cenário (iii): outline @ light mode — hover */
.bt-btn--outline:hover,
a.bt-btn--outline:hover {
    background: var(--bt-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--bt-accent) !important;
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(111, 78, 255, 0.45),
                0 10px 26px rgba(111, 78, 255, 0.38);
}

.bt-btn--outline:active,
a.bt-btn--outline:active {
    transform: translateY(0);
    box-shadow: 0 0 0 1px rgba(111, 78, 255, 0.5),
                0 2px 8px rgba(111, 78, 255, 0.25);
}

/* Cenário (iv): outline @ dark mode — hover.
 * Mesma lógica do dark primary: glow amplificado. */
html[data-bt-theme="dark"] .bt-btn--outline:hover,
html[data-bt-theme="dark"] a.bt-btn--outline:hover {
    background: var(--bt-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--bt-accent) !important;
    box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.55),
                0 0 18px rgba(124, 92, 255, 0.30),
                0 12px 32px rgba(124, 92, 255, 0.45);
}

/* ----------------------------------------------------------
 * GHOST — terciário discreto (Painel admin)
 * Sem border/bg, texto fg-2. Hover suave bg accent-tinted.
 * ---------------------------------------------------------- */
.bt-btn--ghost,
a.bt-btn--ghost {
    background: transparent !important;
    color: var(--bt-fg-2) !important;
    border-color: transparent !important;
}

.bt-btn--ghost:hover,
a.bt-btn--ghost:hover {
    background: rgba(111, 78, 255, 0.08) !important;
    color: var(--bt-accent) !important;
    border-color: transparent !important;
    transform: translateY(-1px);
}

.bt-btn--ghost:active,
a.bt-btn--ghost:active {
    transform: translateY(0);
    background: rgba(111, 78, 255, 0.12) !important;
}

/* ----------------------------------------------------------
 * 1.4.7: OVERRIDE DEFENSIVO BLINDADO.
 *
 * Regras legacy podem reativar underline/border-bottom no
 * estado :hover/:focus do <a>, ou tentar empurrar pseudo-
 * elementos via nav-related selectors. Este bloco mata
 * todas as possibilidades em TODOS os estados.
 * ---------------------------------------------------------- */
.bt-btn,
a.bt-btn,
.bt-btn:link,
.bt-btn:visited,
.bt-btn:hover,
.bt-btn:focus,
.bt-btn:active,
a.bt-btn:link,
a.bt-btn:visited,
a.bt-btn:hover,
a.bt-btn:focus,
a.bt-btn:active {
    /* 1.4.8: REMOVIDO `border-bottom: 0 !important` daqui.
     * Era erro: a regra estava pensada pra zerar underline
     * via border-bottom (padrão legacy de links), mas o
     * .bt-btn usa border: 1px solid em TODOS os lados (forma
     * pill). Zerar border-bottom apagava a base do oval e
     * deixava os botões visualmente "cortados embaixo".
     *
     * O reset de text-decoration permanece (caso real de
     * underline via UA stylesheet). */
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: solid !important;
    text-decoration-color: transparent !important;
    text-underline-offset: 0 !important;
    background-image: none;
}

/* Pseudo-elementos: mata em todos os estados. */
.bt-btn::before,
.bt-btn::after,
.bt-btn:hover::before,
.bt-btn:hover::after,
.bt-btn:focus::before,
.bt-btn:focus::after,
.bt-btn:active::before,
.bt-btn:active::after,
a.bt-btn::before,
a.bt-btn::after,
a.bt-btn:hover::before,
a.bt-btn:hover::after,
a.bt-btn:focus::before,
a.bt-btn:focus::after,
a.bt-btn:active::before,
a.bt-btn:active::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

/* ============================================================
 * 1.4.7: VARIANTE --asset (verde QR Asset)
 *
 * Replica a doutrina do .bt-btn--outline mas com cor
 * --bt-asset (#00B86B verde). Usado pelos pills QBTC11/
 * QETH11/QSOL11 no sponsor bar.
 *
 * Tamanho menor (--xs) pra caber no sponsor bar de altura 36px:
 *   padding: 0.25rem 0.75rem
 *   font-size: 10px
 *   min-height: 22px
 * ============================================================ */
.bt-btn--asset,
a.bt-btn--asset {
    background: transparent !important;
    color: var(--bt-asset) !important;
    border-color: var(--bt-asset) !important;
}

.bt-btn--asset:hover,
a.bt-btn--asset:hover {
    background: var(--bt-asset) !important;
    color: #FFFFFF !important;
    border-color: var(--bt-asset) !important;
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(0, 184, 107, 0.45),
                0 10px 26px rgba(0, 184, 107, 0.38);
}

.bt-btn--asset:active,
a.bt-btn--asset:active {
    transform: translateY(0);
    box-shadow: 0 0 0 1px rgba(0, 184, 107, 0.5),
                0 2px 8px rgba(0, 184, 107, 0.25);
}

html[data-bt-theme="dark"] .bt-btn--asset:hover,
html[data-bt-theme="dark"] a.bt-btn--asset:hover {
    box-shadow: 0 0 0 1px rgba(0, 220, 130, 0.55),
                0 0 18px rgba(0, 220, 130, 0.30),
                0 12px 32px rgba(0, 220, 130, 0.45);
}

/* Modifier --xs: tamanho compacto pra sponsor bar / inline tickers. */
.bt-btn--xs {
    padding: 0.25rem 0.75rem !important;
    min-height: 22px !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    gap: 4px !important;
}

/* ============ LEGACY BUTTONS (.btn, .button, forms) ============
 * Mantidos pra compatibilidade com conteúdo legado (.btn em prose,
 * .button em widgets, submit em forms). Cor dark sólida — não usar
 * em header. Para CTAs novos, use .bt-btn + variantes acima. */
.btn, .button, .relatorio-button,
input[type=submit], button[type=submit] {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
    background: #0F172A;
    color: #fff !important;
}
.btn:hover, .button:hover, input[type=submit]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
    background: #1F2937;
}
.btn:active, .button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
}
.btn:focus-visible, .button:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 3px;
}
.btn--accent, .button--accent {
    background: #7C3AED;
}
.btn--accent:hover, .button--accent:hover {
    background: #6D28D9;
}
.btn--ghost-legacy, .button--ghost-legacy {
    background: transparent;
    color: #0F172A !important;
    border: 1px solid #E5E7EB;
}
.btn--ghost-legacy:hover, .button--ghost-legacy:hover {
    border-color: #0F172A;
    background: #F4F2EE;
}

/* ============ CARDS ============ */
.bt-card, article.card, .card, .widget article {
    background: #FFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 200ms;
    cursor: pointer;
}
.bt-card:hover, article.card:hover, .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .10);
    border-color: #C4B5FD;
}

/* ============ ARTICLE CARD HOVER (em listings) ============ */
article a img, .post img.wp-post-image, .entry-thumb img {
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
article:hover a img, .post:hover img.wp-post-image, .entry-thumb:hover img {
    transform: scale(1.03);
}

/* ============ TAGS / CATEGORY PILLS ============ */
.bt-tag, .post-categories a, .tag, .categorytitle, a[rel="category tag"] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #F4F2EE;
    color: #475569 !important;
    transition: all 180ms;
}
.bt-tag:hover, .post-categories a:hover, a[rel="category tag"]:hover {
    background: #7C3AED;
    color: #fff !important;
    transform: translateY(-1px);
}

/* ============ FORMS ============ */
input[type=text], input[type=email], input[type=number], input[type=search],
input[type=password], select, textarea {
    font-family: 'Inter', sans-serif !important;
    padding: 10px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    transition: border-color 150ms, box-shadow 150ms;
    font-size: 14px;
}
input[type=text]:focus, input[type=email]:focus, input[type=number]:focus,
input[type=search]:focus, input[type=password]:focus,
select:focus, textarea:focus {
    outline: none;
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

/* ============ READING PROGRESS BAR ============ */
.bt-reading-progress-fixed {
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    z-index: 99999;
    pointer-events: none;
}
.bt-reading-progress-fixed__bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #1E40AF 0%, #7C3AED 50%, #F59E0B 100%);
    transition: width 80ms linear;
}

/* ============ FLOATING SHARE (desktop sidebar fixo) ============ */
.bt-floating-share {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}
.bt-floating-share button, .bt-floating-share a {
    width: 44px; height: 44px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #E5E7EB;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 180ms;
    color: #475569;
}
.bt-floating-share button:hover, .bt-floating-share a:hover {
    border-color: #7C3AED;
    color: #7C3AED;
    transform: translateX(2px);
    box-shadow: 0 6px 16px rgba(124, 58, 237, .15);
}
@media (max-width: 1100px) {
    .bt-floating-share {
        left: auto; right: 0; bottom: 0; top: auto;
        flex-direction: row;
        transform: none;
        background: #fff;
        border-top: 1px solid #E5E7EB;
        padding: 8px;
        width: 100%;
        justify-content: space-around;
    }
}

/* ============ BLOCKQUOTE ============ */
.entry-content blockquote, article blockquote {
    border-left: 4px solid #7C3AED;
    background: #F4F2EE;
    padding: 18px 24px;
    margin: 28px 0;
    border-radius: 0 10px 10px 0;
    font-style: normal;
    font-family: 'Fraunces', serif !important;
    font-size: 22px;
    line-height: 1.45;
    color: #1F2937;
}

/* ============ TABLE ZEBRA + HOVER ============ */
.entry-content table, article table {
    border-collapse: collapse;
    width: 100%;
    margin: 22px 0;
    font-size: 14px;
}
.entry-content table thead th {
    background: #0F172A;
    color: #fff;
    font-weight: 700;
    text-align: left;
    padding: 12px;
}
.entry-content table tbody tr {
    transition: background 120ms;
}
.entry-content table tbody tr:nth-child(even) { background: #FAFAF7; }
.entry-content table tbody tr:hover { background: #F4F2EE; }
.entry-content table tbody td {
    padding: 12px;
    border-bottom: 1px solid #E5E7EB;
}

/* ============ CUSTOM SCROLLBAR ============ */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #F4F2EE; }
::-webkit-scrollbar-thumb {
    background: #C4B5FD;
    border-radius: 999px;
    border: 2px solid #F4F2EE;
}
::-webkit-scrollbar-thumb:hover { background: #7C3AED; }

/* ============ FOCUS VISIBLE GLOBAL ============ */
*:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============ SIDEBAR WIDGETS HOVER ============ */
.widget li, .mais-lidas li {
    padding: 12px 0;
    border-bottom: 1px solid #E5E7EB;
    transition: padding-left 180ms ease, color 180ms;
}
.widget li:hover, .mais-lidas li:hover {
    padding-left: 6px;
    color: #7C3AED;
}
.widget li:last-child, .mais-lidas li:last-child { border-bottom: 0; }

/* ============ IMAGE WITH CAPTION ============ */
.wp-caption, figure {
    margin: 24px auto;
}
.wp-caption-text, figcaption {
    font-size: 12px;
    color: #94A3B8;
    text-align: center;
    margin-top: 8px;
    font-style: italic;
    font-family: 'Inter', sans-serif !important;
}

/* ============ DARK MODE BUTTON ============ */
.bt-theme-toggle {
    width: 38px; height: 38px;
    border-radius: 999px;
    border: 1px solid #E5E7EB;
    background: #fff;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 180ms;
    color: #475569;
}
.bt-theme-toggle:hover {
    border-color: #7C3AED;
    color: #7C3AED;
    transform: rotate(15deg);
}

/* ============ DARK MODE OVERRIDE ============ */
html[data-bt-theme="dark"] {
    background: #0B0E13;
}
html[data-bt-theme="dark"] body,
html[data-bt-theme="dark"] .entry-content {
    background: #0B0E13 !important;
    color: #F1F5F9 !important;
}
html[data-bt-theme="dark"] h1,
html[data-bt-theme="dark"] h2,
html[data-bt-theme="dark"] h3,
html[data-bt-theme="dark"] h4 {
    color: #F1F5F9 !important;
}
html[data-bt-theme="dark"] .bt-card,
html[data-bt-theme="dark"] article.card {
    background: #141821 !important;
    border-color: #2A3142 !important;
}
html[data-bt-theme="dark"] .bt-tag,
html[data-bt-theme="dark"] a[rel="category tag"] {
    background: #1E2330 !important;
    color: #94A3B8 !important;
}
html[data-bt-theme="dark"] input,
html[data-bt-theme="dark"] textarea,
html[data-bt-theme="dark"] select {
    background: #141821 !important;
    border-color: #2A3142 !important;
    color: #F1F5F9 !important;
}
html[data-bt-theme="dark"] .entry-content blockquote {
    background: #141821 !important;
    color: #F1F5F9 !important;
}
html[data-bt-theme="dark"] ::-webkit-scrollbar-track { background: #141821; }
html[data-bt-theme="dark"] ::-webkit-scrollbar-thumb { background: #5B21B6; border-color: #141821; }

/* ============================================================
 * 1.5.0: CARDS DE CATÁLOGO (/cursos/ + /relatorios/)
 * ============================================================
 * Reusado em archive-crashcourse.php e archive-relatorio.php.
 * Visual unificado: thumb 16:9, badge FREE/PREMIUM no canto,
 * cadeado central quando user não tem acesso (locked state),
 * título Fraunces + excerpt Inter, footer com CTA.
 * Hover Bankless: border accent + lift 3px + underline esq→dir no título.
 * ============================================================ */

.bt-course-card {
    /* 1.5.6: SEM transform/box-shadow no hover (sem salto, sem glow).
     * Border vira lilás solid no hover (mantém visual de feedback).
     * Apenas o TÍTULO reage também: cor + underline esq→dir. */
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bt-bg-2);
    border: 1px solid var(--bt-divider);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bt-course-card:hover {
    border-color: var(--bt-accent);
}

/* 1.5.6: BLINDAGEM contra `article:hover a img { transform: scale(1.03) }`
 * (regra genérica em components.css linha ~900). Sem isso a imagem do
 * card escala 1.03x no hover, dando sensação visual de shift. Marcelo
 * pediu zero animação no conteúdo do card além do título. */
.bt-course-card:hover .bt-course-card__img,
.bt-course-card:hover .bt-course-card__thumb img,
article.bt-course-card:hover a img {
    transform: none !important;
}

/* Bloqueia transform em descendentes do card no hover.
 * NÃO zera padding/margin (preserva padding base do .__body etc). */
.bt-course-card:hover .bt-course-card__body,
.bt-course-card:hover .bt-course-card__thumb,
.bt-course-card:hover .bt-course-card__eyebrow,
.bt-course-card:hover .bt-course-card__excerpt,
.bt-course-card:hover .bt-course-card__cta,
.bt-course-card:hover .bt-course-card__badge,
.bt-course-card:hover .bt-course-card__date {
    transform: none !important;
}

.bt-course-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none !important;
    color: inherit;
}

/* 1.5.6: BLINDAGEM simplificada — text-decoration: none !important.
 * Removido `text-decoration-color: transparent` da 1.5.5 que reservava
 * espaço pro underline mesmo invisível, causando shift horizontal
 * dos elementos no hover. `text-decoration: none` é suficiente e
 * não reserva espaço algum. */
.bt-course-card__link,
.bt-course-card__link:hover,
.bt-course-card__link:focus,
.bt-course-card__link *,
.bt-course-card__link:hover *,
.bt-course-card__link:focus * {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
}

.bt-course-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bt-bg-3, var(--bt-bg-2));
}

.bt-course-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease;
}

/* 1.5.5: removido zoom da imagem no hover.
 * Marcelo pediu comportamento igual ao card de matéria da home, que
 * NÃO tem zoom. Apenas o título reage. */

.bt-course-card__img.is-locked,
.bt-course-card__placeholder.is-locked {
    filter: blur(2px) brightness(0.55);
}

.bt-course-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bt-fg-3);
    font-family: 'Fraunces', serif;
    font-size: 56px;
    font-weight: 700;
}

/* Badge FREE/PREMIUM no canto superior esquerdo */
.bt-course-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 2;
}

.bt-course-card__badge.is-premium {
    background: #6F4EFF;
    color: #fff;
}

.bt-course-card__badge.is-free {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Cadeado central (locked state) */
.bt-course-card__lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.bt-course-card__lock > div,
.bt-course-card__lock {
    /* O div interno é setado inline mas garante fallback */
}

.bt-course-card__lock svg {
    width: 24px;
    height: 24px;
}

.bt-course-card__lock::before {
    content: '';
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: rgba(111, 78, 255, 0.95);
    position: absolute;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Corpo do card */
.bt-course-card__body {
    padding: 20px 20px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bt-course-card__eyebrow {
    font-family: 'Inter', sans-serif !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bt-accent);
}

.bt-course-card__title {
    font-family: 'Fraunces', serif !important;
    font-size: 20px;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.018em;
    color: var(--bt-fg) !important;
    margin: 0;
    font-variation-settings: 'opsz' 72 !important;
}

/* 1.5.5: doutrina hover de TÍTULO DE MATÉRIA — igual à home.
 * Só o título reage: cor lilás + underline esq→dir lilás. Nada
 * mais no card muda. */
.bt-course-card .ed-title-fx {
    background-image: linear-gradient(var(--bt-accent), var(--bt-accent));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    display: inline;
    transition: background-size 320ms cubic-bezier(0.22, 1, 0.36, 1),
                color 220ms cubic-bezier(0.22, 1, 0.36, 1);
    color: inherit;
}

.bt-course-card:hover .ed-title-fx,
.bt-course-card:hover .bt-course-card__title {
    background-size: 100% 1px;
    color: var(--bt-accent) !important;
}

.bt-course-card__excerpt {
    /* 1.5.7: font reduzida 14 → 13px pra caber lide inteira sem
     * estourar altura do card. line-height compactada também. */
    font-size: 13px;
    line-height: 1.5;
    color: var(--bt-fg-2);
    margin: 0;
}

.bt-course-card__cta {
    /* 1.5.6: removido border-top (a "linha branca" / sombra que Marcelo
     * apontou). CTA agora flota no fim do card sem separador visual.
     * Espaço respira via margin-top auto + padding-top. */
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bt-course-card__cta-text {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bt-fg-2);
}

.bt-course-card__cta-text.is-locked {
    color: var(--bt-accent);
}

.bt-course-card__date {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--bt-fg-3);
}

/* CTA Premium no final do archive (deslogado / non-premium) */
.bt-archive-cta {
    margin-top: 64px;
    padding: 40px 32px;
    border-radius: 14px;
    border: 1px solid var(--bt-divider);
    background: var(--bt-bg-2);
    text-align: center;
}

.bt-archive-cta__eyebrow {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bt-accent);
    margin: 0 0 8px;
}

.bt-archive-cta__title {
    font-family: 'Fraunces', serif !important;
    font-size: 32px;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.022em;
    color: var(--bt-fg) !important;
    margin: 0 0 12px;
}

.bt-archive-cta__copy {
    font-size: 15px;
    line-height: 1.55;
    color: var(--bt-fg-2);
    max-width: 520px;
    margin: 0 auto 24px;
}

/* Light mode tweaks */
html[data-bt-theme="light"] .bt-course-card__badge.is-free {
    background: rgba(255, 255, 255, 0.85);
    color: #1F2937;
    backdrop-filter: blur(4px);
}

/* =================================================================
 * 2.6.2 — Header & sponsor responsive CSS puro (não depende de
 * classes Tailwind responsive não-compiladas como md:hidden,
 * sm:hidden, sm:inline-flex, sm:h-10, md:h-[52px]).
 *
 * Histórico: 2.5.0 tentou usar dessas classes pra duplicar elementos
 * mobile/desktop. Tailwind purged build não tinha elas — resultado
 * foram elementos duplicados aparecendo em ambos viewports.
 * ================================================================= */

/* ========= SPONSOR STRIP (QR Asset) ========= */

/* Desktop: tudo numa linha, layout horizontal */
.bt-sponsor-inner {
    height: 36px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.bt-sponsor-brand { flex-shrink: 0; }
.bt-sponsor-tagline { display: none; }
.bt-sponsor-pills {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bt-sponsor-cta {
    margin-left: auto;
}

/* tablet+ mostra tagline */
@media (min-width: 1024px) {
    .bt-sponsor-tagline { display: inline; }
    .bt-sponsor-tagline::before {
        content: '·';
        color: hsla(0, 0%, 100%, 0.15);
        margin-right: 12px;
    }
}

/* MOBILE (<640px): empilhado em 2 linhas */
@media (max-width: 639px) {
    .bt-sponsor-inner {
        height: auto;
        flex-wrap: wrap;
        padding-top: 6px;
        padding-bottom: 6px;
        gap: 8px 12px;
    }
    .bt-sponsor-brand { flex: 1 1 auto; }
    .bt-sponsor-cta {
        order: 2;
        margin-left: 0;
        font-size: 11px;
    }
    /* Esconde CTA "Investir Agora" e troca por texto curto via JS opcional.
       Por simplicidade: mantém o texto, fica visível como tag à direita. */
    .bt-close-sponsor {
        order: 3;
        margin-left: auto;
    }
    .bt-sponsor-pills {
        flex-basis: 100%;
        gap: 8px;
        flex-wrap: wrap;
    }
    .bt-sponsor-pills .bt-btn--asset.bt-btn--xs {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }
}

/* ========= HEADER PILL ========= */

/* Logo SVG responsivo via CSS custom (independe de Tailwind responsive classes) */
@media (max-width: 639px) {
    .brand-logo .bt-brand-svg { height: 36px !important; }
}
@media (min-width: 640px) and (max-width: 767px) {
    .brand-logo .bt-brand-svg { height: 40px !important; }
}
@media (min-width: 768px) {
    .brand-logo .bt-brand-svg { height: 52px; }
}

/* Header wrapper padding responsivo */
@media (max-width: 639px) {
    .bt-header-wrapper {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 12px;
        padding-bottom: 8px;
    }
    .bt-header-pill {
        padding: 6px 12px;
        gap: 8px;
    }
}

/* ========= COINBASE BANNER ========= */

/* Banner Coinbase some em viewports muito pequenos (<400px / iPhone SE).
   Ocupa altura demais sem trazer valor proporcional. */
@media (max-width: 400px) {
    .bt-coinbase-banner { display: none; }
}

/* ========= MOBILE DRAWER ========= */

/* Drawer com scroll quando conteúdo passa da altura da viewport. */
.bt-drawer-content {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}