/*
 Theme Name: dabliumendes
 Theme URI: https://folhago.com.br
 Author: dabliumendes
 Author URI: https://folhago.com.br
 Description: Tema de portal de noticias profissional. Score 100/100/100 PageSpeed.
 Version: 3.8.5
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: dabliumendes
*/

/* ══════════════════════════════════════════════════════════════
           NEWS BRASIL — DESIGN SYSTEM & ACCESSIBILITY RULES
           Score: 100 Acessibilidade | 100 Práticas | 100 SEO
           ══════════════════════════════════════════════════════════════

           ★★★ REGRA INVIOLÁVEL — LEIA ANTES DE ALTERAR QUALQUER COR ★★★

           Este template passou por auditoria PageSpeed Insights com score
           100/100/100. As cores abaixo foram calculadas com a fórmula WCAG 2.1
           de contraste (https://dequeuniversity.com/rules/axe/4.11/color-contrast).
           O ratio mínimo exigido é 4.5:1 para texto normal e 3:1 para texto grande.

           QUALQUER alteração de cor DEVE ser verificada contra esta tabela.
           Se o ratio cair abaixo de 4.5:1, o score de acessibilidade CAI.

           ── TABELA DE CORES APROVADAS ──────────────────────────────

           DARK THEME (fundo #0E0E0E):
           ┌──────────────────┬───────────┬────────────┬─────────┬───────────────────────────┐
           │ Variável         │ Cor       │ Ratio      │ Status  │ Uso                       │
           ├──────────────────┼───────────┼────────────┼─────────┼───────────────────────────┤
           │ --text-primary   │ #FFFFFF   │ 19.33:1    │ ✓ PASS  │ Títulos, texto principal   │
           │ --text-secondary │ #B0B0B0   │  8.90:1    │ ✓ PASS  │ Corpo do artigo, subtítulo│
           │ --text-muted     │ #999999   │  6.78:1    │ ✓ PASS  │ Datas, metas, captions    │
           │ --red-text       │ #FF4444   │  5.66:1    │ ✓ PASS  │ Links, tags, breadcrumb   │
           │ --red (bg)       │ #CC0000   │  ——        │ ——      │ Background de tags/botões  │
           │ #FFF on --red    │ #FFF→#C00 │  5.89:1    │ ✓ PASS  │ Texto branco em tag/botão │
           └──────────────────┴───────────┴────────────┴─────────┴───────────────────────────┘

           LIGHT THEME (fundo #FFFFFF):
           ┌─────────────────────┬───────────┬────────────┬─────────┬───────────────────────────┐
           │ Variável            │ Cor       │ Ratio      │ Status  │ Uso                       │
           ├─────────────────────┼───────────┼────────────┼─────────┼───────────────────────────┤
           │ --text-primary      │ #111111   │ 18.88:1    │ ✓ PASS  │ Títulos, texto principal  │
           │ --text-secondary    │ #333333   │ 12.63:1    │ ✓ PASS  │ Corpo do artigo, subtítulo│
           │ --text-muted        │ #595959   │  7.00:1    │ ✓ PASS  │ Datas, metas, captions    │
           │ --red-text          │ #B52020   │  6.58:1    │ ✓ PASS  │ Links, tags, breadcrumb   │
           │ --red (bg)          │ #CC0000   │  ———       │ ———     │ Background de tags/botões │
           │ #FFF on --red       │ #FFF→#C00 │  5.89:1    │ ✓ PASS  │ Texto branco em tag/botão │
           └─────────────────────┴───────────┴────────────┴─────────┴───────────────────────────┘

           –– REGRAS DE USO DAS CORES –––––––––––––––––––––––––––––––––––––––

           1. VERMELHO COMO TEXTO (links, tags inline, breadcrumb, "Atualizado"):
              → Usar SEMPRE var(--red-text), NUNCA var(--red)
              → Dark: #FF4444 (5.66:1) | Light: #B52020 (6.58:1)

           2. VERMELHO COMO BACKGROUND (tags, botões, badges "AO VIVO"):
              → Usar SEMPRE var(--red) com color: #FFFFFF
              → #CC0000 em ambos os temas (branco sobre = 5.89:1)

           3. TEXTO SECUNDÁRIO (corpo de artigos, excerpts):
              → Usar var(--text-secondary)
              → Dark: #B0B0B0 (8.90:1) | Light: #333333 (12.63:1)

           4. TEXTO MUTED (datas, horários, captions, contadores):
              → Usar var(--text-muted)
              → Dark: #999999 (6.78:1) | Light: #595959 (7.00:1)
              → NUNCA usar #666 ou menor no dark (falha contraste)
              → NUNCA usar #777 ou maior no light (falha contraste)

           5. CINZA É PROIBIDO ABAIXO DESTES LIMITES:
              → Fundo escuro (#0E0E0E): mínimo #888888 (5.45:1)
              → Fundo branco (#FFFFFF): máximo #767676 (4.54:1)
              → Na dúvida, use var(--text-muted) que já está calibrado

           6. NOVOS ELEMENTOS devem usar APENAS as variáveis acima.
              NÃO inventar cores hardcoded. NÃO usar #777, #888, #aaa
              sem verificar contraste em AMBOS os temas.

           ── REGRAS DE ACESSIBILIDADE HTML ──────────────────────────

           7. Todo <button> sem texto visível PRECISA de aria-label
           8. Todo SVG decorativo PRECISA de aria-hidden="true"
           9. Todo SVG com significado PRECISA de role="img" + aria-label
          10. Landmarks obrigatórios: <header role="banner">,
              <main role="main">, <footer role="contentinfo">,
              <nav aria-label="..."> em cada navegação
          11. Áreas de toque mínimo: 44x44px em mobile
          12. Focus visible: outline 3px var(--red) em todos os interativos
          13. Tema padrão: light (data-theme="light" no <html>)
          14. localStorage 'news-theme' sobrescreve o padrão

           ── FONTES ────────────────────────────────────────────────

          15. --font-sans: Encode Sans (UI, nav, tags, meta)
          16. --font-serif: Merriweather (títulos, corpo editorial)
          17. Pesos carregados: Encode Sans 400,600,700,800
                                Merriweather 400,700,900
          18. Google Fonts com display=swap obrigatório

           ══════════════════════════════════════════════════════════════
        */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --red: #CC0000;
    --red-text: #FF4444;
    --red-dark: #A30000;
    --red-glow: rgba(204, 0, 0, 0.35);
    --dark-bg: #0E0E0E;
    --dark-surface: #161616;
    --dark-card: #1C1C1C;
    --dark-border: #2A2A2A;
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0B0;
    --text-muted: #999999;
    --accent-blue: #1DA1F2;
    --accent-yellow: #FFD600;
    --branch: #2A2A2A;
    --branch-active: #CC0000;
    --font-sans: 'Encode Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Encode Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
    --dark-bg: #FFFFFF;
    --dark-surface: #F5F5F5;
    --dark-card: #FFFFFF;
    --dark-border: #E2E2E2;
    --text-primary: #111111;
    --text-secondary: #333333;
    --text-muted: #595959;
    --red: #CC0000;
    --red-text: #B52020;
    --red-dark: #A30000;
    --branch: #D4D4D4;
    --branch-active: #CC0000;
    --red-glow: rgba(204, 0, 0, 0.15);
}

[data-theme="light"] .site-header {
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .progress-bar {
    box-shadow: 0 0 8px rgba(204, 0, 0, 0.2);
}

[data-theme="light"] .article-body {
    color: #222222;
}

[data-theme="light"] .article-body p {
    color: #2A2A2A;
}

[data-theme="light"] .article-body strong {
    color: #111111;
}

[data-theme="light"] .article-body h2 {
    color: #111111;
}

[data-theme="light"] .article-body blockquote {
    background: #F7F7F5;
    color: #1A1A1A;
    border-left-color: var(--red-text);
}

[data-theme="light"] .article-body blockquote cite {
    color: #555555;
}

[data-theme="light"] .article-body a {
    color: #B52020;
    text-decoration-color: rgba(181, 32, 32, 0.3);
}

[data-theme="light"] .article-subtitle {
    color: #333333;
}

[data-theme="light"] .article-title {
    color: #0A0A0A;
}

[data-theme="light"] .article-author__name {
    color: #111111;
}

[data-theme="light"] .article-date {
    color: #444444;
}

[data-theme="light"] .article-breadcrumb {
    color: #444444;
}

[data-theme="light"] .article-img-caption {
    color: #555555;
}

[data-theme="light"] .sidebar-box {
    background: #FAFAFA;
    border-color: #E8E8E8;
}

[data-theme="light"] .sidebar-related-item__title {
    color: #222222;
}

[data-theme="light"] .sidebar-tag {
    background: #F0F0F0;
    border-color: #DCDCDC;
    color: #555555;
}

[data-theme="light"] .sidebar-tag:hover {
    color: var(--red-text);
}

[data-theme="light"] .share-btn {
    background: #F5F5F5;
    border-color: #E0E0E0;
    color: #555555;
}

[data-theme="light"] .author-box__inner {
    background: #FAFAFA;
    border-color: #E8E8E8;
}

[data-theme="light"] .author-box__bio {
    color: #444444;
}

[data-theme="light"] .comments-teaser__inner {
    background: #FAFAFA;
    border-color: #E8E8E8;
}

[data-theme="light"] .comments-teaser__count {
    color: #111111;
}

[data-theme="light"] .related-card {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
}

[data-theme="light"] .related-card__title {
    color: #1A1A1A;
}

[data-theme="light"] .placeholder-img {
    background: #E8E8E8;
    color: #999;
}

[data-theme="light"] .branch-dot {
    fill: #FFFFFF;
}

[data-theme="light"] .branch-label__pill {
    background: #FFFFFF;
    border-color: #E0E0E0;
}

[data-theme="light"] .latest-item__title,
[data-theme="light"] .most-read-item__title {
    color: #1A1A1A;
}

[data-theme="light"] .section-header {
    border-bottom-color: var(--red-text);
}

/* CSS Part 2 - appended to style.css */

.theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    border-color: var(--red);
    color: var(--red);
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.4s var(--spring), opacity 0.3s;
}

.theme-toggle__sun,
.theme-toggle__moon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle__sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

.theme-toggle__moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="light"] .theme-toggle__sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="light"] .theme-toggle__moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

body,
.site-header,
.sidebar-box,
.article-body blockquote,
.share-btn,
.sidebar-tag,
.related-card,
.author-box__inner,
.comments-teaser__inner,
.site-footer,
.branch-label__pill {
    transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background: var(--dark-bg);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: #FFFFFF;
    z-index: 201;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.site-header {
    background: var(--red);
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 100;
}

[data-theme="light"] .site-header {
    background: var(--red);
    box-shadow: none;
}

.header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    min-height: 44px;
    padding: 0 4px;
}

.back-btn:hover {
    opacity: 0.8;
}

.back-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.5;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.logo-main {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -1px;
    color: #FFFFFF;
    line-height: 1;
}

.logo-sub {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-right button:not(.theme-toggle) {
    background: none;
    border: none;
    cursor: pointer;
    color: #FFFFFF;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.header-right button:not(.theme-toggle):hover {
    opacity: 0.75;
}

.theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #FFFFFF;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
}

.social-proof-bar {
    background: #B50000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
}

.social-proof-bar__icon {
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
}

.social-proof-bar__text {
    color: #FFFFFF;
}

/* CSS Part 3 — Article hero, featured image, article body, sidebar */

.article-hero {
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 24px 0;
}

.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.article-breadcrumb a {
    color: var(--red-text);
    transition: opacity 0.2s;
}

.article-breadcrumb a:hover {
    opacity: 0.7;
}

.article-breadcrumb__sep {
    color: var(--text-muted);
}

.article-tag {
    display: inline-flex;
    align-items: center;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    margin-bottom: 16px;
}

.article-title {
    font-family: var(--font-body);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 900;
    line-height: 1.18;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}

.article-subtitle {
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.55;
    font-weight: 400;
    margin-bottom: 24px;
    max-width: 720px;
}

/* ═══ CLARA HERO PILL — flutuante sobre imagem destacada (mobile) ═══ */
.article-img-wrap {
    position: relative;
}

.clara-hero-pill {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    z-index: 5;
}

.clara-hero-pill:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: scale(1.04);
}

.clara-hero-pill__avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    max-width: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.clara-hero-pill__text {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.clara-hero-pill__dot {
    width: 7px;
    height: 7px;
    background: #22c55e;
    border-radius: 50%;
    animation: claraDotPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes claraDotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/** Desktop: esconder hero pill (Clara está na sidebar) */
@media (min-width: 901px) {
    .clara-hero-pill {
        display: none;
    }
}

/* ═══ CLARA INLINE — Flutuando à direita no 1º parágrafo ═══ */
.dsp-clara-inline {
    float: right;
    width: 200px;
    margin: 0 0 16px 20px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Reset drop-cap leak from parent .has-drop-cap */
.dsp-clara-inline p::first-letter {
    font-size: inherit !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
    initial-letter: normal !important;
    color: inherit !important;
    font-weight: inherit !important;
}

.dsp-clara-inline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red, #cc0000), #ff4444);
    border-radius: 14px 14px 0 0;
}

.dsp-clara-inline:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.dsp-clara-inline:active {
    transform: scale(0.98);
}

.dsp-clara-inline__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.dsp-clara-inline__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.dsp-clara-inline__avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    max-width: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--red, #cc0000);
}

.dsp-clara-inline__online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid #fff;
    animation: dsp-pulse-online 2s ease-in-out infinite;
}

.dsp-clara-inline__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dsp-clara-inline__info strong {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.dsp-clara-inline__info span {
    font-size: 10px;
    color: #22c55e;
    font-weight: 600;
}

.dsp-clara-inline__text {
    font-size: 12px;
    line-height: 1.4;
    color: #444;
    margin: 0 0 10px;
}

.dsp-clara-inline__text strong {
    color: #111;
}

.dsp-clara-inline__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(135deg, var(--red, #cc0000), #e00);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

[data-theme="light"] .dsp-clara-inline {
    background: #fff;
    border-color: #e8e8e8;
}

/** Desktop: esconder inline Clara (Clara está na sidebar) */
@media (min-width: 901px) {
    .dsp-clara-inline {
        display: none;
    }
}

.article-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-top: 1px solid var(--dark-border);
    border-bottom: 1px solid var(--dark-border);
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 12px;
}

.article-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.article-author__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--dark-border);
}

.article-author__avatar img,
.article-author__avatar .placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-author__name {
    font-weight: 700;
    font-size: 14px;
}

.article-author__detail {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-author__col-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
}

.article-author__col-tag--economia {
    background: #00C853;
    color: #0a0a0a;
}

.article-author__col-tag--politica {
    background: var(--accent-blue);
    color: #fff;
}

.article-meta-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.article-date {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.article-date__updated {
    color: var(--red-text);
    font-weight: 600;
}

.article-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 10px;
    background: var(--dark-card);
    border-radius: 20px;
    border: 1px solid var(--dark-border);
}

.article-reading-time svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.share-btns {
    display: flex;
    gap: 8px;
}

.share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--red);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(204, 0, 0, .2);
}

.share-btn:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

.share-btn:active {
    transform: scale(0.95);
}

[data-theme="light"] .share-btn {
    background: var(--red);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(204, 0, 0, .15);
}

.article-featured-img {
    max-width: 960px;
    margin: 0 auto 8px;
    padding: 0 24px;
}

.article-img-wrap {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

@media (max-width: 768px) {
    .article-featured-img {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    .article-img-wrap {
        border-radius: 0;
    }
}

.article-img-wrap img,
.article-img-wrap .placeholder-img {
    width: 100%;
    height: auto;
    display: block;
}

/** Link da imagem — display block para ocupar 100% */
.article-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.article-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/**
         * Caption overlay — sobreposto na imagem (MOBILE).
         * Fundo degradê escuro transparente para legibilidade.
         * No desktop é escondido (usa o caption separado abaixo).
         */
.article-img-caption-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 16px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .3) 60%, transparent 100%);
    font-size: 11px;
    color: rgba(255, 255, 255, .85);
    font-style: italic;
    line-height: 1.4;
    z-index: 2;
    display: none;
}

.article-img-caption-overlay span {
    color: #fff;
    font-style: normal;
    font-weight: 700;
}

@media (max-width: 768px) {
    .article-img-caption-overlay {
        display: block;
    }
}

/** Caption desktop — separado da imagem (escondido no mobile) */
.article-img-caption {
    max-width: 900px;
    margin: 0 auto;
    padding: 8px 24px 32px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.article-img-caption span {
    color: var(--text-secondary);
    font-style: normal;
    font-weight: 600;
}

.article-img-caption--desktop {
    display: block;
}

@media (max-width: 768px) {
    .article-img-caption--desktop {
        display: none;
    }
}

/**
         * CTA Loterias grudado na imagem (MOBILE).
         * Quando .has-lottery-cta está presente, remove gaps entre imagem e CTA.
         */
@media (max-width: 768px) {
    .article-hero-block.has-lottery-cta .article-featured-img {
        margin-bottom: 0;
    }

    .article-hero-block.has-lottery-cta .lottery-cta-card {
        padding: 0;
    }

    .article-hero-block.has-lottery-cta .lottery-cta-card__link {
        border-radius: 0;
        border-top: none;
    }
}

.article-body-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 260px;
    gap: 20px 28px;
    align-items: start;
    overflow: hidden;
}


.reaction-col {
    position: sticky;
    top: 90px;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 8px;
}

.reaction-col .reaction-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
}

.reaction-col .reaction-btn .icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--red);
    border: none;
    box-shadow: 0 3px 10px rgba(204, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

[data-theme="light"] .reaction-col .reaction-btn .icon-circle {
    background: var(--red);
    box-shadow: 0 3px 10px rgba(204, 0, 0, .2);
}

.reaction-col .reaction-btn .icon-circle:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 16px rgba(204, 0, 0, .35);
}

.reaction-col .reaction-btn .icon-circle:active {
    transform: scale(0.9);
}

.reaction-col .reaction-btn .icon-circle svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
}

.reaction-col .reaction-btn.liked .icon-circle {
    background: #fff;
    border: 2px solid var(--red);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

.reaction-col .reaction-btn.liked .icon-circle svg {
    stroke: var(--red);
    fill: var(--red);
}

.reaction-col .reaction-btn .r-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

/** Glow neon sutil no balão de comentários — pisca enquanto o contador incrementa */
@keyframes commentGlow {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(204, 0, 0, .15);
    }

    50% {
        box-shadow: 0 0 14px rgba(204, 0, 0, .55), 0 0 28px rgba(204, 0, 0, .2);
    }
}

.comment-glow .icon-circle {
    animation: commentGlow 1.2s ease-in-out infinite;
}

.comment-glow .r-count {
    color: var(--red-text) !important;
    transition: color .3s;
}

.article-body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.article-body p {
    margin-bottom: 26px;
}

/** Drop cap: apenas nos 2 primeiros parágrafos (classe has-drop-cap adicionada via PHP) */
.has-drop-cap > p:first-of-type::first-letter {
    font-size: 3rem;
    font-weight: 900;
    color: var(--red-text);
    float: left;
    line-height: 1;
    margin: 6px 12px 0 0;
    font-family: var(--font-body);
}
/** Isolar widgets internos da drop-cap */
.has-drop-cap .horo-widget-standalone p::first-letter,
.has-drop-cap .lottery-widget-standalone p::first-letter,
.has-drop-cap .horo-inline-widget p::first-letter {
    font-size: inherit; font-weight: inherit; color: inherit;
    float: none; line-height: inherit; margin: 0;
}

.article-body h2 {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 40px 0 16px;
    padding-left: 16px;
    border-left: 3px solid var(--red);
}

.article-body blockquote {
    margin: 32px 0;
    padding: 24px 28px;
    background: var(--dark-card);
    border-left: 3px solid var(--red);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text-primary);
    font-size: 1.05rem;
    line-height: 1.7;
    position: relative;
}

.article-body blockquote::before {
    content: '\201C';
    position: absolute;
    top: -8px;
    left: 16px;
    font-size: 4rem;
    color: var(--red-text);
    opacity: 0.2;
    font-family: var(--font-body);
    line-height: 1;
}

.article-body blockquote cite {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 12px;
    font-family: var(--font-sans);
}

.article-body a {
    color: var(--red-text);
    text-decoration: underline;
    text-decoration-color: rgba(204, 0, 0, 0.3);
    transition: text-decoration-color 0.2s;
}

.article-body a:hover {
    text-decoration-color: var(--red);
}

.article-body strong {
    color: var(--text-primary);
}

.article-inline-img {
    margin: 32px 0;
    border-radius: 8px;
    overflow: hidden;
}

@media (min-width: 769px) {
    .article-inline-img {
        margin: 32px -40px;
    }
}

.article-inline-img .placeholder-img {
    width: 100%;
    aspect-ratio: 16/9;
}

.article-inline-img figcaption {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 0;
    font-style: italic;
}

/**
         * Proteção anti-overflow: conteúdo dinâmico do WordPress
         * O QUE FAZ: Impede que imagens, iframes, tabelas e embeds estourem o grid.
         * POR QUE EXISTE: Bug de scroll horizontal no mobile causado por conteúdo sem max-width.
         */
.article-body img,
.article-body iframe,
.article-body table,
.article-body figure,
.article-body .wp-block-embed {
    max-width: 100%;
    overflow: hidden;
}

.article-body {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* CSS Part 4 — Sidebar, branches, author, related, comments, footer */

.article-sidebar {
    position: sticky;
    top: 90px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-box {
    background: var(--dark-card);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--dark-border);
}

.sidebar-box__title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--red);
}

.sidebar-related-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--dark-border);
    cursor: pointer;
    transition: opacity 0.2s;
}

.sidebar-related-item:last-child {
    border-bottom: none;
}

.sidebar-related-item:hover {
    opacity: 0.7;
}

.sidebar-related-item__tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--red-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.sidebar-related-item__title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
}

.sidebar-related-item__time {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.sidebar-related-item__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.sidebar-related-item__stats {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-related-item__stat {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.sidebar-related-item__stat svg {
    color: var(--red);
    opacity: 0.7;
}

.sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sidebar-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 100px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.sidebar-tag:hover {
    border-color: var(--red);
    color: var(--red);
}

/* ═══ POLL CTA WIDGET ═══ */
/**
         * Widget de votação ao vivo — fade-in suave anti-FOUC.
         * O QUE FAZ: O widget começa com opacity:0 (via CSS crítico inline no head)
         *   e faz fade-in para opacity:1 em 0.4s após delay de 0.15s.
         * POR QUE EXISTE: No mobile, o CSS externo carrega após o HTML ser pintado,
         *   causando flash visual. O fade-in mascara essa transição.
         */
@keyframes pollFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.poll-cta-widget {
    background: var(--dark-card);
    border: 2px solid var(--red);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(204, 0, 0, 0.15);
    animation: pollFadeIn 0.4s ease 0.15s both, pollWidgetGlow 3s ease 0.6s infinite alternate;
}

@keyframes pollWidgetGlow {
    0% {
        box-shadow: 0 0 20px rgba(204, 0, 0, 0.15);
    }

    100% {
        box-shadow: 0 0 30px rgba(204, 0, 0, 0.3);
    }
}

.poll-cta-widget__header {
    background: linear-gradient(135deg, #CC0000, #A30000);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.poll-cta-widget__badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.poll-cta-widget__live-dot {
    width: 8px;
    height: 8px;
    background: #4ADE80;
    border-radius: 50%;
    animation: pulse 1.5s ease infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.3
    }
}

.poll-cta-widget__votes {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 700;
}

.poll-cta-widget__title {
    padding: 14px 16px 8px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
}

.poll-cta-widget__options {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.poll-cta-widget__option-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.poll-cta-widget__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--dark-border);
}

.poll-cta-widget__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.poll-cta-widget__emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 16px;
    background: var(--dark-surface);
}

.poll-cta-widget__name {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.poll-cta-widget__pct {
    font-size: 14px;
    font-weight: 900;
    color: var(--red-text);
}

.poll-cta-widget__bar {
    height: 5px;
    background: var(--dark-border);
    border-radius: 3px;
    overflow: hidden;
}

/**
         * Barra de progresso do widget de votação.
         * O QUE FAZ: Exibe largura diretamente do inline style PHP (width:X%).
         * POR QUE EXISTE: Animações/transições individuais causavam FOUC no mobile.
         *   O fade-in do container (.poll-cta-widget) já cuida da entrada visual.
         */
.poll-cta-widget__fill {
    height: 100%;
    border-radius: 3px;
}

.poll-cta-widget__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 16px;
    padding: 12px;
    background: var(--red);
    color: #fff;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 0 0 #A30000, 0 6px 16px rgba(204, 0, 0, 0.35);
    transition: all 0.2s;
}

.poll-cta-widget__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 0 #A30000, 0 8px 20px rgba(204, 0, 0, 0.45);
}

.poll-cta-widget__btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 0 #A30000;
}

.poll-cta-widget__btn-pulse {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: btnShine 2.5s ease-in-out infinite;
}

@keyframes btnShine {
    0% {
        transform: translateX(-100%);
    }

    50%,
    100% {
        transform: translateX(100%);
    }
}

.poll-cta-widget__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--green);
}

/* ═══ Estado: Enquete ENCERRADA ═══ */
.poll-cta-widget__badge--closed {
    background: #555;
    animation: none;
}

.poll-cta-widget__btn--result {
    background: linear-gradient(135deg, #e67e22, #d35400);
}

.poll-cta-widget__btn--result:hover {
    background: linear-gradient(135deg, #d35400, #c0392b);
    transform: translateY(-1px);
}

.poll-cta-widget--closed .poll-cta-widget__footer {
    color: #e67e22;
}

[data-theme="light"] .poll-cta-widget {
    border-color: var(--red);
    box-shadow: 0 0 20px rgba(204, 0, 0, 0.1);
}

[data-theme="light"] .poll-cta-widget__avatar {
    border-color: #ddd;
}

/* ═══ POLL CTA — Responsivo mobile/desktop ═══
         * MOBILE-FIRST: .poll-cta-mobile visível por padrão.
         * Em desktop (≥901px), mobile some e desktop aparece.
         * POR QUE: display:none global + reveal via @media causava FOUC (flash) no mobile.
         */
.poll-cta-mobile {
    display: block;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px 16px;
}

.poll-cta-desktop {
    display: none;
}

@media (min-width: 901px) {
    .poll-cta-mobile {
        display: none;
    }

    .poll-cta-desktop {
        display: block;
    }
}

.article-tags-bar {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 24px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.article-tags-bar__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.branch-svg {
    display: block;
    width: 100%;
    height: 100px;
    overflow: visible;
    position: relative;
    z-index: 1;
    margin: -4px 0;
    pointer-events: none;
}

.branch-svg.tall {
    height: 120px;
}

.branch-line {
    fill: none;
    stroke: var(--branch);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.branch-glow {
    fill: none;
    stroke: var(--red);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .25;
    filter: blur(4px);
}

.branch-active {
    fill: none;
    stroke: var(--red);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 6 12;
    animation: branchFlow 2.5s linear infinite;
}

@keyframes branchFlow {
    to {
        stroke-dashoffset: -36;
    }
}

.branch-dot {
    fill: var(--dark-bg);
    stroke: var(--branch);
    stroke-width: 2;
}

.branch-dot-active {
    fill: var(--red);
    stroke: none;
}

.branch-ring {
    fill: none;
    stroke: var(--red);
    stroke-width: 1.5;
}

.branch-svg .reveal-el {
    opacity: 0;
    transition: opacity 0.8s var(--ease);
}

.branch-svg.visible .reveal-el {
    opacity: 1;
}

.branch-svg.visible .reveal-el:nth-child(2) {
    transition-delay: .15s;
}

.branch-svg.visible .reveal-el:nth-child(3) {
    transition-delay: .25s;
}

.reveal-draw {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 1s var(--ease);
}

.branch-svg.visible .reveal-draw {
    stroke-dashoffset: 0;
}

.branch-label {
    display: flex;
    justify-content: center;
    margin: -14px 0 20px;
    position: relative;
    z-index: 2;
}

.branch-label__pill {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 100px;
    padding: 5px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.branch-label__dot {
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
}

.author-box {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    overflow: hidden;
}

.author-box__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    padding: 24px;
    overflow: hidden;
}

.author-box__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--dark-border);
}

.author-box__avatar .placeholder-img {
    width: 100%;
    height: 100%;
}

.author-box__info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.author-box__name {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.author-box__tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    background: #00C853;
    color: #0a0a0a;
    flex-shrink: 0;
}

.author-box__bio {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
}

.author-box__link {
    font-size: 12px;
    font-weight: 700;
    color: var(--red-text);
    margin-top: 6px;
    display: inline-block;
    transition: opacity 0.2s;
}

.author-box__link:hover {
    opacity: 0.7;
}

.related-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 48px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.related-card {
    background: var(--dark-card);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
}

.related-card__img {
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
}

.related-card__img .placeholder-img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
}

.related-card:hover .related-card__img .placeholder-img {
    transform: scale(1.06);
}

.related-card__img .r-tag {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
}

.related-card__img .r-tag--relembre {
    bottom: auto;
    top: 6px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    letter-spacing: 0.5px;
    font-size: 10px;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.related-card__img .r-tag--coview {
    bottom: auto;
    top: 6px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    letter-spacing: 0.3px;
    font-size: 10px;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.related-card__body {
    padding: 14px;
}

.related-card__title {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.25;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card__meta {
    font-size: 11px;
    color: var(--text-muted);
}

.comments-teaser {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px 40px;
}

.comments-teaser__inner {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
}

.comments-teaser__count {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.comments-teaser__count span {
    color: var(--red-text);
}

.comments-teaser__text {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.comments-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.comments-btn:hover {
    background: var(--red-dark);
}

.site-footer {
    background: var(--red);
    border-top: none;
    padding: 32px 0;
}

[data-theme="light"] .site-footer {
    background: var(--red);
}

.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.footer-inner .logo-main {
    color: #FFFFFF;
}

.footer-inner .logo-sub {
    color: #FFFFFF;
}

.footer-inner span {
    color: #FFFFFF;
    font-size: 12px;
}

.footer-inner a {
    color: #FFFFFF;
    transition: opacity 0.2s;
}

.footer-inner a:hover {
    opacity: 0.75;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

[data-theme="light"] .footer-inner {
    color: #fff;
}

[data-theme="light"] .footer-inner a {
    color: #fff;
}

[data-theme="light"] .footer-inner span {
    color: #FFFFFF;
}

.placeholder-img {
    background: var(--dark-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

/* CSS Part 5 — Responsive, progressive read more, reaction bars, chat, accessibility, inline suggestions */

@media (max-width:1024px) {
    .article-body-wrap {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .article-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
        flex-direction: row;
        flex-wrap: wrap;
        grid-column: 1 / -1;
    }

    .sidebar-box {
        flex: 1;
        min-width: 260px;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:768px) {
    .article-body-wrap {
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
    }

    .article-hero {
        padding-top: 32px;
        overflow: hidden;
    }

    .article-title {
        font-size: 1.6rem;
        overflow-wrap: break-word;
    }

    .article-meta-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-inline-img {
        margin: 24px 0;
    }

    .article-body {
        font-family: var(--font-body);
        font-size: 18px;
        line-height: 1.55;
        overflow: visible; /* imagens full-width usam margin negativo */
    }

    /**
     * IMAGENS FULL-WIDTH NO MOBILE — borda a borda.
     * O QUE FAZ: Imagens dentro do corpo do artigo expandem até as bordas da tela.
     * POR QUE EXISTE: Requisito editorial — imagens devem preencher 100% no mobile.
     * COMO: Margem negativa compensa o padding do .article-body-wrap (24px).
     */
    .article-body img:not(.dsp-clara-inline__avatar) {
        width: calc(100% + 48px) !important;
        max-width: calc(100% + 48px) !important;
        margin-left: -24px;
        margin-right: -24px;
        border-radius: 0;
        display: block;
        height: auto !important;
    }

    .dsp-clara-inline img {
        width: 40px !important;
        max-width: 40px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .article-body figure,
    .article-body .wp-block-image {
        margin-left: -24px !important;
        margin-right: -24px !important;
        width: calc(100% + 48px) !important;
        max-width: calc(100% + 48px) !important;
        border-radius: 0;
        overflow: hidden;
    }

    .article-body figure img,
    .article-body .wp-block-image img {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0;
    }

    .article-body figure figcaption {
        padding-left: 24px;
        padding-right: 24px;
    }

    /**
     * Clara/Laura inline widget — full-width no mobile.
     * Sem float, o widget ocupa 100% e o texto segue normalmente abaixo.
     * FIX: Widget flutuante (200px) comprimia o texto em ~150px em telas de 375px.
     */
    .dsp-clara-inline {
        float: none;
        width: 100%;
        margin: 0 0 16px 0;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    /**
             * Fix author-box mobile: flex-direction column + overflow controls
             * O QUE FAZ: Empilha avatar e info verticalmente sem transbordar.
             * POR QUE EXISTE: Bug de layout quebrado no widget de biografia do autor em mobile.
             */
    .author-box__inner {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
        max-width: 100%;
    }

    .author-box__name {
        justify-content: center;
    }

    .author-box__bio {
        text-align: center;
    }

    .footer-inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .branch-svg {
        height: 60px;
        overflow: hidden;
    }


    /**
             * Fix scroll horizontal: conteúdo max-width e overflow hidden em todos containers
             * O QUE FAZ: Impede qualquer elemento de criar scroll horizontal.
             */
    .article-hero,
    .article-featured-img,
    .article-img-caption,
    .article-tags-bar,
    .author-box,
    .comments-preview-section,
    .related-section {
        max-width: 100vw;
        overflow: hidden;
    }
}

.content-block {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.6s ease, max-height 0.8s ease;
}

.content-block.revealed {
    opacity: 1;
    max-height: 25000px;
    overflow: visible;
}

/**
 * Lottery widget standalone — fora do content-block.
 * Escondido por padrão, revelado via CSS sibling selector
 * quando o block-3 recebe classe 'revealed'.
 * Fix: no mobile o overflow:hidden do content-block impedia o widget de aparecer.
 */
.lottery-widget-standalone {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.6s ease, max-height 0.8s ease;
}

.content-block.revealed[data-block="3"] + .lottery-widget-standalone,
.content-block.revealed.js-revealed + .lottery-widget-standalone,
.first-block-wrapper .lottery-widget-standalone {
    opacity: 1;
    max-height: 5000px;
    overflow: visible;
}

/* Widget colado ao conteúdo do bloco 0 (disclaimer) */
.first-block-wrapper .lottery-widget-standalone {
    margin: 0;
    position: relative;
    z-index: 2;
}
.first-block-wrapper .lottery-widget-standalone .lottery-inline-result {
    margin: 8px 0 0;
}

.first-block-wrapper {
    position: relative;
}

.text-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent 0%, var(--dark-bg) 100%);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.5s;
}

[data-theme="light"] .text-fade-overlay {
    background: linear-gradient(to bottom, transparent 0%, #FFFFFF 100%);
}

.read-more-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 4px 0 28px;
    position: relative;
    z-index: 2;
}

.read-more-zone.hidden {
    display: none;
}

.progress-dots {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.progress-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dark-border);
    transition: background 0.3s, transform 0.3s;
}

.progress-dot.filled {
    background: var(--red);
    transform: scale(1.2);
}

.read-more-hook {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.45;
    max-width: 320px;
    margin-bottom: 14px;
    padding: 0 12px;
    position: relative;
}

.read-more-hook::before,
.read-more-hook::after {
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 900;
    color: var(--red);
    line-height: 1;
    position: relative;
    top: 4px;
}

.read-more-hook::before {
    content: '\201C';
    margin-right: 2px;
}

.read-more-hook::after {
    content: '\201D';
    margin-left: 2px;
}

.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 32px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 0 0 var(--red-dark), 0 8px 20px var(--red-glow);
    transform: translateY(0);
    transition: transform 0.15s, box-shadow 0.15s;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 12px;
}

.read-more-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 0 var(--red-dark), 0 2px 6px var(--red-glow);
}

.read-more-btn::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 35px;
    box-shadow: 0 0 20px var(--red-glow);
    animation: glowPulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }
}

.read-more-btn svg {
    width: 16px;
    height: 16px;
    animation: bounceDown 1.5s ease infinite;
}

@keyframes bounceDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

.read-more-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.read-more-social__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.read-more-social__icon {
    font-size: 12px;
    flex-shrink: 0;
    line-height: 1;
}

.read-more-social__num {
    font-weight: 800;
    color: var(--red-text);
}

.read-more-social__sep {
    width: 3px;
    height: 3px;
    background: var(--text-muted);
    border-radius: 50%;
    margin: 0 4px;
    flex-shrink: 0;
}

.read-more-social__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.read-more-social__stat svg {
    width: 12px;
    height: 12px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
}

.read-more-counter {
    font-size: 11px;
    color: var(--text-muted);
}

.reaction-btn--whatsapp .icon-circle {
    background: #25D366 !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(37, 211, 102, .3) !important;
}

.reaction-btn--whatsapp .icon-circle:hover,
.reaction-btn--whatsapp .icon-circle:active {
    box-shadow: 0 5px 16px rgba(37, 211, 102, .45) !important;
}

.reaction-btn--whatsapp .icon-circle svg {
    fill: #fff !important;
    stroke: none !important;
}

.reaction-col__author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: inherit;
}

.reaction-col__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--red);
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.reaction-col__avatar:hover {
    transform: scale(1.1);
    border-color: var(--red-text);
}

.reaction-col__avatar img,
.reaction-col__avatar .placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reaction-col__avatar-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    max-width: 52px;
    line-height: 1.15;
}

.reaction-bar .reaction-col__author .reaction-col__avatar {
    width: 40px;
    height: 40px;
}

.reaction-bar .reaction-col__avatar-label {
    display: none;
}

.reaction-col__name {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.1;
}

/**
         * Reaction-bar mobile — barra fixa de reações
         * O QUE FAZ: Mostra botões de reação no mobile, fixos à direita da tela.
         * POR QUE EXISTE: Substitui a reaction-col (sticky lateral) que é escondida no mobile.
         * FIX: Uma vez visível, NÃO desaparece ao rolar de volta para o topo.
         */
.reaction-bar {
    position: fixed;
    right: 8px;
    bottom: 90px;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 90;
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.4s, transform 0.4s var(--ease);
}

.reaction-bar.visible {
    opacity: 1;
    transform: translateX(0);
}

.reaction-bar .reaction-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
}

.reaction-bar .reaction-btn .icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--red);
    border: none;
    box-shadow: 0 3px 12px rgba(204, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.reaction-bar .reaction-btn .icon-circle:active {
    transform: scale(0.9);
}

.reaction-bar .reaction-btn .icon-circle svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
}

.reaction-bar .reaction-btn.liked .icon-circle {
    background: #fff;
    border: 2px solid var(--red);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .1);
}

.reaction-bar .reaction-btn.liked .icon-circle svg {
    stroke: var(--red);
    fill: var(--red);
}

.reaction-bar .reaction-btn .r-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
}

@media (min-width: 769px) {
    .reaction-col {
        display: flex;
    }

    .reaction-bar {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .reaction-col {
        display: none;
    }

    .reaction-bar {
        display: flex;
    }
}

/* ═══ WHATSAPP WIDGET (notificação Clara) ═══ */
.wa-widget {
    position: fixed;
    top: -200px;
    left: 16px;
    right: 16px;
    max-width: 380px;
    z-index: 150;
    transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.wa-widget.show {
    top: 92px;
    pointer-events: all;
}

@media (min-width: 600px) {
    .wa-widget {
        left: auto;
        right: 24px;
    }
}

.wa-widget-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .08);
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.wa-widget-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
}

.wa-widget-card:active {
    transform: scale(.98);
}

.wa-widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f0f2f5;
    border-bottom: 1px solid #e0e0e0;
}

.wa-widget-wa-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.wa-widget-app-name {
    font-size: 13px;
    font-weight: 600;
    color: #54656F;
    flex: 1;
}

.wa-widget-time {
    font-size: 12px;
    color: #8696A0;
}

.wa-widget-close {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, .05);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.wa-widget-close:hover {
    background: rgba(0, 0, 0, .1);
}

.wa-widget-close svg {
    width: 14px;
    height: 14px;
    stroke: #667781;
    fill: none;
    stroke-width: 2;
}

.wa-widget-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 10px;
}

.wa-widget-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

.wa-widget-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wa-widget-text {
    flex: 1;
    min-width: 0;
}

.wa-widget-name {
    font-size: 15px;
    font-weight: 700;
    color: #075E54;
    margin-bottom: 3px;
}

.wa-widget-msg {
    font-size: 14px;
    color: #111B21;
    line-height: 1.45;
    display: inline;
}

.wa-widget-cursor {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: #25D366;
    margin-left: 1px;
    vertical-align: text-bottom;
    animation: waCursorBlink 0.55s step-end infinite;
}

@keyframes waCursorBlink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

.wa-widget-reply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: #f0f2f5;
    border-top: 1px solid #e0e0e0;
    opacity: 0;
    transition: opacity 0.4s;
}

.wa-widget-reply.show {
    opacity: 1;
}

.wa-widget-reply svg {
    width: 16px;
    height: 16px;
    color: #25D366;
}

.wa-widget-reply span {
    font-size: 14px;
    font-weight: 600;
    color: #075E54;
}

[data-theme="dark"] .wa-widget-card {
    background: #1F2C33;
}

[data-theme="dark"] .wa-widget-header {
    background: #233239;
    border-color: #374045;
}

[data-theme="dark"] .wa-widget-app-name {
    color: #8696A0;
}

[data-theme="dark"] .wa-widget-close svg {
    stroke: #8696A0;
}

[data-theme="dark"] .wa-widget-name {
    color: #00A884;
}

[data-theme="dark"] .wa-widget-msg {
    color: #E9EDEF;
}

[data-theme="dark"] .wa-widget-reply {
    background: #233239;
    border-color: #374045;
}

/* ═══ WHATSAPP CHAT CLONE ═══ */
.wa-chat-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.wa-chat-overlay.open {
    pointer-events: all;
    opacity: 1;
}

/** Esconder barras fixas do bottom quando chat está aberto */
.wa-chat-overlay.open ~ .dsp-bottom-bar,
.wa-chat-overlay.open ~ .bottom-sheet {
    display: none !important;
}

.wa-chat-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity 0.3s;
}

.wa-chat-overlay.open .wa-chat-backdrop {
    opacity: 1;
}

.wa-chat-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 85vh;
    max-width: 420px;
    margin: 0 auto;
    background: #ECE5DD;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(.22, 1, .36, 1);
    overflow: hidden;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, .2);
}

.wa-chat-overlay.open .wa-chat-panel {
    transform: translateY(0);
}

/* Header */
.wa-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px 10px 4px;
    background: #075E54;
    color: #fff;
    flex-shrink: 0;
}

.wa-back-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 6px;
}

.wa-back-btn svg {
    width: 22px;
    height: 22px;
}

.wa-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.wa-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.wa-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #25D366;
    border: 2px solid #075E54;
    border-radius: 50%;
}

.wa-contact-info {
    flex: 1;
    min-width: 0;
}

.wa-contact-name {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .2px;
}

.wa-contact-status {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

.wa-header-actions {
    display: flex;
    gap: 2px;
}

.wa-header-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
}

.wa-header-btn svg {
    width: 20px;
    height: 20px;
}

/* Messages Area */
.wa-messages {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: #ECE5DD;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d4c9b8' fill-opacity='0.25'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='50' cy='30' r='1.5'/%3E%3Ccircle cx='90' cy='15' r='1'/%3E%3Ccircle cx='30' cy='60' r='1.5'/%3E%3Ccircle cx='70' cy='70' r='2'/%3E%3Ccircle cx='110' cy='50' r='1'/%3E%3Ccircle cx='20' cy='100' r='1.5'/%3E%3Ccircle cx='60' cy='110' r='1'/%3E%3Ccircle cx='100' cy='90' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

.wa-messages::-webkit-scrollbar {
    width: 0;
}

/* Date badge */
.wa-date-badge {
    align-self: center;
    margin: 8px 0;
}

.wa-date-badge span {
    background: #E2DDD5;
    color: #54656F;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: .3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
}

/* System message */
.wa-system-msg {
    align-self: center;
    margin: 4px 0 8px;
}

.wa-system-msg span {
    background: #FFEFC3;
    color: #54656F;
    font-size: 11px;
    padding: 6px 16px;
    border-radius: 8px;
    display: block;
    text-align: center;
    line-height: 1.4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
}

/* Chat bubbles — WhatsApp style */
.chat-bubble {
    max-width: 82%;
    padding: 6px 8px 4px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.45;
    position: relative;
}

.chat-bubble.bot {
    background: #fff;
    color: #111B21;
    align-self: flex-start;
    border-top-left-radius: 0;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13);
    margin-left: 2px;
}

.chat-bubble.user {
    background: #D9FDD3;
    color: #111B21;
    align-self: flex-end;
    border-top-right-radius: 0;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13);
    margin-right: 2px;
}

.chat-bubble .bubble-time {
    font-size: 11px;
    color: #667781;
    text-align: right;
    margin-top: 2px;
    float: right;
    margin-left: 8px;
    line-height: 20px;
}

.chat-bubble.bot .bubble-sender {
    font-size: 12.5px;
    font-weight: 600;
    color: #075E54;
    margin-bottom: 2px;
}

.chat-bubble.user .bubble-time::after {
    content: '';
    display: inline;
}

/* Bubble tails */
.wa-bubble-tail {
    display: none;
}

.chat-bubble.bot .wa-bubble-tail {
    display: block;
    position: absolute;
    top: 0;
    left: -8px;
    width: 8px;
    height: 13px;
}

.chat-bubble.bot .wa-bubble-tail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-right: 8px solid #fff;
    border-bottom: 8px solid transparent;
}

/* ═══ Chat Article Card Widget ═══ */
.chat-bubble--widget {
    padding: 0;
    overflow: hidden;
    max-width: 92%;
    background: #fff;
}

.chat-bubble--widget .bubble-sender {
    padding: 6px 10px 0;
}

.chat-bubble--widget .bubble-time {
    padding: 0 8px 4px;
    float: right;
    margin-top: 0;
}

.chat-article-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    overflow: hidden;
}

.chat-article-card:hover {
    opacity: .92;
}

.chat-article-card__thumb {
    width: 100%;
    height: 130px;
    overflow: hidden;
    background: #f0f0f0;
}

.chat-article-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-article-card__body {
    padding: 8px 10px 6px;
}

.chat-article-card__badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #c62828;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.chat-article-card__pulse {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e53935;
    animation: chat-pulse 1.2s ease-in-out infinite;
}

@keyframes chat-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.chat-article-card__cat {
    font-size: 11px;
    font-weight: 700;
    color: #075E54;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 3px;
}

.chat-article-card__title {
    font-size: 14px;
    font-weight: 700;
    color: #111B21;
    line-height: 1.4;
    margin-bottom: 4px;
}

.chat-article-card__meta {
    font-size: 11px;
    color: #667781;
    margin-bottom: 5px;
}

.chat-article-card__reactions {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #54656F;
}

/* Typing indicator */
.typing-indicator {
    display: none;
    align-self: flex-start;
    background: #fff;
    padding: 8px 14px 8px 10px;
    border-radius: 8px;
    border-top-left-radius: 0;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13);
    margin-left: 2px;
    position: relative;
    flex-direction: column;
}

.typing-indicator.show {
    display: flex;
}

.typing-indicator .typing-name {
    font-size: 12px;
    font-weight: 600;
    color: #075E54;
    margin-bottom: 3px;
}

.typing-indicator .typing-dots {
    display: flex;
    gap: 3px;
    align-items: center;
}

.typing-indicator .typing-dots span {
    width: 7px;
    height: 7px;
    background: #90A4AE;
    border-radius: 50%;
    animation: waBounce 1.4s ease-in-out infinite;
}

.typing-indicator .typing-dots span:nth-child(2) {
    animation-delay: .15s;
}

.typing-indicator .typing-dots span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes waBounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
        background: #B0BEC5
    }

    30% {
        transform: translateY(-5px);
        background: #075E54
    }
}

/* Quick questions */
.wa-quick-questions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: flex-start;
    max-width: 90%;
    margin: 4px 0 8px;
}

.wa-quick-label {
    font-size: 11px;
    color: #667781;
    font-weight: 500;
    margin-bottom: 2px;
}

.wa-quick-btn {
    background: transparent;
    border: 1px solid #25D366;
    color: #075E54;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    transition: all .2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.wa-quick-btn:hover {
    background: #25D366;
    color: #fff;
    transform: translateX(4px);
}

.wa-quick-btn:active {
    transform: scale(.97);
}

/* Input bar */
.wa-input-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: #F0F2F5;
    flex-shrink: 0;
}

.wa-emoji-btn {
    background: none;
    border: none;
    color: #54656F;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 6px;
    flex-shrink: 0;
}

.wa-emoji-btn svg {
    width: 24px;
    height: 24px;
}

.wa-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    border: none;
    background: #fff;
    font-size: 15px;
    font-family: var(--font-sans);
    color: #111B21;
    outline: none;
    min-width: 0;
}

.wa-input::placeholder {
    color: #8696A0;
}

.wa-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #00A884;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, transform .15s;
}

.wa-send-btn:hover {
    background: #008069;
}

.wa-send-btn:active {
    transform: scale(.92);
}

.wa-send-btn svg {
    width: 20px;
    height: 20px;
}

/* Desktop: make panel wider */
@media (min-width: 600px) {
    .wa-chat-panel {
        max-width: 440px;
        height: 80vh;
        border-radius: 12px;
        bottom: 20px;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 2px;
}

.sidebar-related-item__tag {
    color: var(--red-text);
    font-weight: 800;
}

.sidebar-tag:hover {
    border-color: var(--red);
    color: var(--red);
}

.author-box__link {
    font-size: 13px;
    font-weight: 800;
    color: var(--red-text);
}

[data-theme="light"] .share-btn {
    background: var(--red);
    color: #fff;
    border: none;
}

[data-theme="light"] .article-breadcrumb {
    color: #333;
}

[data-theme="light"] .article-breadcrumb a {
    color: #B52020;
}

[data-theme="light"] .sidebar-related-item__tag {
    color: #B52020;
}

[data-theme="light"] .sidebar-tag {
    color: #444;
}

[data-theme="light"] .sidebar-related-item__time {
    color: #555;
}

[data-theme="light"] .branch-label__pill {
    color: #444;
}

[data-theme="light"] .comments-teaser__text {
    color: #555;
}

.comments-btn {
    min-height: 44px;
    font-size: 14px;
    font-weight: 800;
    padding: 12px 28px;
}

/**
         * Comments Preview — Sistema de preview progressivo
         * O QUE FAZ: Mostra 2 comentários + 3º sumindo com gradiente fade.
         * O leitor vê uma prévia e é incentivado a clicar para revelar todos.
         */
.comments-preview-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px 40px;
}

.comments-preview__header {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 12px 12px 0 0;
    padding: 28px 28px 16px;
    text-align: center;
}

/** Lista de preview: mostra ~3 comentários com corte */
.comments-preview__list {
    position: relative;
    background: var(--dark-card);
    border-left: 1px solid var(--dark-border);
    border-right: 1px solid var(--dark-border);
    padding: 0 20px;
    max-height: 380px;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.comments-preview__list.expanded {
    max-height: 50000px;
    overflow: visible;
}

/** Overlay fade sobre o 3º comentário — gradiente de transparência */
.comments-preview__fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(to bottom, transparent 0%, var(--dark-card) 90%);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.4s ease;
}

.comments-preview__list.expanded .comments-preview__fade {
    opacity: 0;
    pointer-events: none;
}

[data-theme="light"] .comments-preview__fade {
    background: linear-gradient(to bottom, transparent 0%, #FFFFFF 90%);
}

/** Comentários ocultos (4+) — ficam escondidos até expandir */
.comment-item--hidden {
    display: none;
}

.comments-preview__list.expanded .comment-item--hidden {
    display: flex;
}

/** CTA: botão para revelar todos */
.comments-preview__cta {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 16px 28px 24px;
    text-align: center;
}

.comments-btn--expand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(204, 0, 0, .2);
}

.comments-btn--expand:hover {
    background: var(--red-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(204, 0, 0, .3);
}

.comments-btn--expand:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(204, 0, 0, .15);
}

.comments-btn__arrow {
    transition: transform 0.3s ease;
}

.comments-btn--expand.expanded .comments-btn__arrow {
    transform: rotate(180deg);
}

/** Comment items — estilos visuais dos itens */
.comment-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--dark-border);
}

.comment-item:last-of-type {
    border-bottom: none;
}

.comment-item--reply {
    padding-left: 36px;
}

.comment-item__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.comment-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.comment-item__body {
    flex: 1;
    min-width: 0;
}

.comment-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.comment-item__meta strong {
    color: var(--text-primary);
    font-size: 13px;
}

.comment-item__reply-badge {
    font-size: 11px;
    color: var(--red-text);
    font-weight: 600;
}

.comment-item__text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 6px;
}

.comment-item__actions {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
}

.comment-item__likes {
    cursor: default;
}

.comment-item__reply-link {
    cursor: pointer;
    transition: color 0.2s;
}

.comment-item__reply-link:hover {
    color: var(--red-text);
}

/** Seção expandida — FB comments + CTA final */
.comments-expanded {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 20px 28px;
}

.comments-section__empty {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/** Light theme overrides */
[data-theme="light"] .comments-preview__header {
    background: #FAFAFA;
    border-color: #E8E8E8;
}

[data-theme="light"] .comments-preview__list {
    background: #FAFAFA;
    border-color: #E8E8E8;
}

[data-theme="light"] .comments-preview__cta {
    background: #FAFAFA;
    border-color: #E8E8E8;
}

[data-theme="light"] .comments-expanded {
    background: #FAFAFA;
    border-color: #E8E8E8;
}

[data-theme="light"] .comment-item {
    border-bottom-color: #E8E8E8;
}

[data-theme="light"] .comment-item__text {
    color: #333;
}

/**
         * Saved Posts Section — Seção de curtidos/salvos no menu overlay
         * O QUE FAZ: Estiliza abas, lista de posts, thumbnails e ações no menu.
         * POR QUE EXISTE: Permite que o leitor reveja posts que curtiu/salvou.
         */
.saved-posts-section {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 8px;
}

/** Abas — Curtidos / Salvos */
.saved-posts__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 3px;
}

.saved-posts__tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.saved-posts__tab svg {
    opacity: 0.5;
    transition: opacity 0.2s;
}

.saved-posts__tab.active {
    background: var(--red);
    color: #fff;
}

.saved-posts__tab.active svg {
    opacity: 1;
}

.saved-posts__tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

/** Badge de contagem */
.saved-posts__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
}

.saved-posts__tab.active .saved-posts__badge {
    background: rgba(255, 255, 255, 0.25);
}

/** Content — listas */
.saved-posts__content {
    position: relative;
}

.saved-posts__list {
    display: none;
    max-height: 280px;
    overflow-y: auto;
}

.saved-posts__list.active {
    display: block;
}

.saved-posts__list::-webkit-scrollbar {
    width: 4px;
}

.saved-posts__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

/** Empty state */
.saved-posts__empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
    padding: 24px 12px;
    line-height: 1.5;
}

/** Post item */
.saved-post__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
}

.saved-post__item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.saved-post__item:last-child {
    border-bottom: none;
}

/** Link do post */
.saved-post__link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

/** Thumbnail */
.saved-post__thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.saved-post__thumb--placeholder {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    flex-shrink: 0;
}

.saved-post__thumb--placeholder svg {
    stroke: rgba(255, 255, 255, 0.2);
}

/** Título */
.saved-post__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/** Botão remover */
.saved-post__remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}

.saved-post__remove svg {
    stroke: rgba(255, 255, 255, 0.3);
}

.saved-post__remove:hover {
    background: rgba(255, 0, 0, 0.15);
}

.saved-post__remove:hover svg {
    stroke: var(--red-text);
}

/** Light theme overrides — Saved Posts */
[data-theme="light"] .saved-posts-section {
    border-top-color: #E8E8E8;
}

[data-theme="light"] .saved-posts__tabs {
    background: #F0F0F0;
}

[data-theme="light"] .saved-posts__tab {
    color: #888;
}

[data-theme="light"] .saved-posts__tab.active {
    background: var(--red);
    color: #fff;
}

[data-theme="light"] .saved-posts__tab:hover:not(.active) {
    background: #E8E8E8;
    color: #555;
}

[data-theme="light"] .saved-posts__badge {
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .saved-posts__empty {
    color: #999;
}

[data-theme="light"] .saved-post__item {
    border-bottom-color: #E8E8E8;
}

[data-theme="light"] .saved-post__item:hover {
    background: #F5F5F5;
}

[data-theme="light"] .saved-post__title {
    color: #333;
}

[data-theme="light"] .saved-post__thumb--placeholder {
    background: #F0F0F0;
}

[data-theme="light"] .saved-post__thumb--placeholder svg {
    stroke: #CCC;
}

[data-theme="light"] .saved-post__remove svg {
    stroke: #CCC;
}

[data-theme="light"] .saved-post__remove:hover svg {
    stroke: var(--red);
}

/** Menu — Link Histórico de navegação */
.menu-history-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    margin: 8px 20px 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.menu-history-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.menu-history-link svg {
    stroke: var(--red-text);
    flex-shrink: 0;
}

[data-theme="light"] .menu-history-link {
    background: rgba(0, 0, 0, 0.03);
    border-color: #E8E8E8;
    color: #444;
}

[data-theme="light"] .menu-history-link:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
}

/** Botão limpar todos os dados — reutilizado na página e no menu */
.history-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: rgba(255, 60, 60, 0.12);
    color: #FF6B6B;
    border: 1px solid rgba(255, 60, 60, 0.2);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.history-clear-btn:hover {
    background: rgba(255, 60, 60, 0.25);
    border-color: rgba(255, 60, 60, 0.4);
    color: #FF4444;
}

.history-clear-btn svg {
    stroke: currentColor;
}

[data-theme="light"] .history-clear-btn {
    background: rgba(200, 0, 0, 0.06);
    color: #CC0000;
    border-color: rgba(200, 0, 0, 0.15);
}

[data-theme="light"] .history-clear-btn:hover {
    background: rgba(200, 0, 0, 0.12);
    border-color: rgba(200, 0, 0, 0.25);
}

/**
         * History Page — Página dedicada de histórico
         * O QUE FAZ: Layout completo para a página /historico/
         */
.history-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 0 60px;
}

.history-page__header {
    text-align: center;
    margin-bottom: 28px;
}

.history-page__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(204, 0, 0, 0.1);
    margin-bottom: 16px;
}

.history-page__icon svg {
    stroke: var(--red-text);
}

.history-page__title {
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 6px;
}

.history-page__subtitle {
    font-size: 14px;
    color: var(--text-muted);
}

.history-page__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--dark-border);
}

.history-page__count {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

/** Item da lista de histórico */
.history-page__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 8px;
    border-bottom: 1px solid var(--dark-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    border-radius: 8px;
}

.history-page__item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.history-page__item:last-of-type {
    border-bottom: none;
}

.history-page__item-img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
}

.history-page__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-page__item-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-page__item-info {
    flex: 1;
    min-width: 0;
}

.history-page__item-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--red-text);
    margin-bottom: 3px;
}

.history-page__item-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.history-page__item-time {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
    display: block;
}

.history-page__item-arrow {
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s, transform 0.2s;
    stroke: var(--text-muted);
}

.history-page__item:hover .history-page__item-arrow {
    opacity: 0.5;
    transform: translateX(0);
}

/** Empty state */
.history-page__empty-state {
    text-align: center;
    padding: 48px 16px;
    color: var(--text-muted);
}

.history-page__empty-state p {
    font-size: 16px;
    font-weight: 700;
    margin: 16px 0 6px;
    color: var(--text-secondary);
}

.history-page__empty-state span {
    font-size: 13px;
}

/** Light theme overrides — History page */
[data-theme="light"] .history-page__item:hover {
    background: #F5F5F5;
}

[data-theme="light"] .history-page__item-img {
    background: #F0F0F0;
}

[data-theme="light"] .history-page__icon {
    background: rgba(204, 0, 0, 0.06);
}

/** Paginação do histórico */
.history-page__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 24px 0 8px;
}

.inline-suggestions {
    margin: 8px 0 20px;
    padding: 16px 0;
    border-top: 2px solid var(--red);
    border-bottom: 1px solid var(--dark-border);
}

.inline-suggestions__label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--red-text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inline-suggestions__label::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--red);
    border-radius: 50%;
    flex-shrink: 0;
}

.inline-suggestions__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.inline-suggestion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dark-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.inline-suggestion:last-child {
    border-bottom: none;
}

.inline-suggestion:hover {
    opacity: 0.8;
}

.inline-suggestion__number {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 900;
    color: var(--red);
    line-height: 1;
    min-width: 22px;
    flex-shrink: 0;
    padding-top: 2px;
}

.inline-suggestion__content {
    flex: 1;
    min-width: 0;
}

.inline-suggestion__tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--red-text);
    margin-bottom: 3px;
}

.inline-suggestion__title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inline-suggestion__arrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--red);
    align-self: center;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s, transform 0.2s;
}

.inline-suggestion:hover .inline-suggestion__arrow {
    opacity: 1;
    transform: translateX(0);
}

.inline-suggestion__arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
}

/** ── Inline Rec Premium (Glassmorphism + Mirror) ── */
.inline-rec {
    display: grid;
    grid-template-rows: 1fr;
    text-decoration: none;
    color: inherit;
    margin-bottom: 16px;
    position: relative;
    transition: grid-template-rows 0.5s ease, opacity 0.5s ease;
    opacity: 1;
}

.inline-rec--collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-bottom: 0;
    pointer-events: none;
}

.inline-rec--collapsed>* {
    overflow: hidden;
}

.inline-rec--visible {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-bottom: 16px;
    pointer-events: auto;
}

.inline-rec__glass {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.85), rgba(20, 20, 40, 0.95));
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1) inset;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.inline-rec__glass::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.08), transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(204, 0, 0, 0.06), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.inline-rec:hover .inline-rec__glass {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 0 20px rgba(59, 130, 246, 0.1);
}

.inline-rec__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.inline-rec__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inline-rec__thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a2a4a, #1a1a3a);
    animation: inlineRecShimmer 1.5s ease-in-out infinite;
}

@keyframes inlineRecShimmer {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.inline-rec__body {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.inline-rec__badge-row {
    margin-bottom: 5px;
}

.inline-rec__badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #cc0000, #a00);
    padding: 3px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(204, 0, 0, 0.3);
}

.inline-rec__badge--coview {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.inline-rec__tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 3px;
}

.inline-rec__title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inline-rec__stats {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 7px;
}

.inline-rec__stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
}

.inline-rec__stat svg {
    color: rgba(255, 255, 255, 0.35);
}

.inline-rec__arrow {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.3);
    align-self: center;
    position: relative;
    z-index: 1;
    transition: color 0.2s, transform 0.2s;
}

.inline-rec:hover .inline-rec__arrow {
    color: rgba(255, 255, 255, 0.7);
    transform: translateX(3px);
}

.inline-rec__arrow svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
}

/** Mirror / Reflection effect */
.inline-rec__reflection {
    height: 28px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.5), rgba(20, 20, 40, 0.6));
    transform: scaleY(-1);
    opacity: 0.18;
    filter: blur(2px);
    margin-top: -2px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
    pointer-events: none;
}

/** Light theme */
[data-theme="light"] .inline-rec__glass {
    background: linear-gradient(145deg, rgba(245, 245, 255, 0.9), rgba(230, 230, 250, 0.95));
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

[data-theme="light"] .inline-rec__glass::before {
    background: radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.05), transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(204, 0, 0, 0.04), transparent 50%);
}

[data-theme="light"] .inline-rec:hover .inline-rec__glass {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.06) inset, 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

[data-theme="light"] .inline-rec__tag {
    color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .inline-rec__title {
    color: #1a1a2e;
}

[data-theme="light"] .inline-rec__stat {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .inline-rec__stat svg {
    color: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .inline-rec__arrow {
    color: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .inline-rec:hover .inline-rec__arrow {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .inline-rec__reflection {
    background: linear-gradient(145deg, rgba(245, 245, 255, 0.4), rgba(230, 230, 250, 0.5));
}

[data-theme="light"] .inline-rec__thumb-placeholder {
    background: linear-gradient(135deg, #e8e8f0, #d8d8e8);
}

.quick-q {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 16px;
    font-size: 13px;
    color: #8B0000;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.15s;
    min-height: 40px;
}

.quick-q:hover {
    background: #fef2f2;
    border-color: var(--red);
}

/* ══════════════════════════════════════════════════════════════
   HOME PAGE — CSS EXCLUSIVO (nao duplica regras do single)
   Adicionado em 2026-03-14
   ══════════════════════════════════════════════════════════════ */

/* ═══ Container ═══ */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ═══ HAMBURGER ═══ */
.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #FFFFFF;
}

/* ═══ LIVE BUTTON ═══ */
.live-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: background 0.2s;
    min-height: 44px;
}

.live-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.live-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: blink 1.4s ease infinite;
}

/* ═══ MAIN NAV ═══ */
.main-nav {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    overflow: visible;
}

.main-nav>ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.main-nav li {
    position: relative;
}

.main-nav a {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: color 0.2s, background 0.2s;
    position: relative;
    min-height: 44px;
    text-decoration: none;
}

.main-nav a:hover,
.main-nav a.active {
    color: #fff;
}

.main-nav>ul>li>a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 3px;
    background: #fff;
}

/* Submenu Desktop */
.main-nav ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    background: var(--red);
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 100;
    padding: 0;
    margin: 0;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

[data-theme="light"] .main-nav ul.sub-menu {
    background: #CC0000;
}

[data-theme="dark"] .main-nav ul.sub-menu {
    background: var(--dark-bg);
    border: 1px solid var(--dark-border);
    border-top: none;
}

.main-nav li:hover>ul.sub-menu {
    display: flex;
}

.main-nav ul.sub-menu li {
    width: 100%;
}

.main-nav ul.sub-menu a {
    padding: 12px 18px;
    min-height: auto;
    font-size: 13px;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-nav ul.sub-menu li:last-child a {
    border-bottom: none;
}

.main-nav ul.sub-menu a:hover {
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
}

.main-nav li.menu-item-has-children>a {
    padding-right: 28px;
}

.main-nav li.menu-item-has-children>a::before {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
}

/* ═══ TOP HEADLINES ═══ */
.headlines-section {
    background: var(--dark-surface);
    border-bottom: 1px solid var(--dark-border);
    padding: 32px 0 28px;
}

.headlines-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
}

.headline-main__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--red-text);
    margin-bottom: 12px;
}

.headline-main__tag::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
    animation: blink 1.4s ease infinite;
}

.headline-main__title {
    font-family: var(--font-body);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 900;
    line-height: 1.12;
    margin-bottom: 20px;
    cursor: pointer;
    transition: color 0.2s;
}

.headline-main__title:hover {
    color: var(--red-text);
}

.headline-bullets {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.headline-bullet {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.2s;
}

.headline-bullet:hover {
    color: var(--red-text);
}

.headline-bullet__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background: var(--red);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.headline-bullet__icon svg {
    fill: #fff;
    width: 10px;
    height: 10px;
}

.headline-bullet__author {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.headline-bullet__text {
    color: var(--text-secondary);
}

.headline-bullet__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--dark-border);
    transition: border-color 0.3s;
}

.headline-bullet:hover .headline-bullet__avatar {
    border-color: var(--red);
}

.headline-bullet__avatar img,
.headline-bullet__avatar .placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.headline-bullet__col-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    margin-left: 6px;
    display: inline-flex;
    vertical-align: middle;
}

.headline-bullet__col-tag--economia {
    background: #00C853;
    color: #0a0a0a;
}

.headline-bullet__col-tag--politica {
    background: var(--accent-blue);
    color: #fff;
}

.headline-bullet__col-tag--tech {
    background: #AB47BC;
    color: #fff;
}

/* Headline Live card */
.headline-live {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s;
}

.headline-live:hover {
    border-color: var(--red);
}

.headline-live__video {
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
}

.headline-live__video .placeholder-img {
    width: 100%;
    height: 100%;
}

.headline-live__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.headline-live__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: background 0.3s, border-color 0.3s;
}

.headline-live:hover .headline-live__play {
    background: var(--red);
    border-color: var(--red);
}

.headline-live__play svg {
    fill: #fff;
    width: 18px;
    height: 18px;
    margin-left: 2px;
}

.headline-live__info {
    padding: 14px 16px;
}

.headline-live__program {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}

.headline-live__desc {
    font-size: 13px;
    color: var(--text-muted);
}

.headline-live__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

.headline-live__time::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    animation: blink 1.4s ease infinite;
}

/* ═══ COLUNISTAS BAR ═══ */
.columnists-bar {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--dark-border);
    position: relative;
    text-align: center;
}

.columnists-bar__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
    text-align: center;
}

.columnists-bar__list {
    display: flex;
    gap: 0;
    position: relative;
    justify-content: center;
    margin: 0 auto;
    max-width: 800px;
}

.col-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--dark-card);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
    flex: 1;
    border: 1px solid var(--dark-border);
}

.col-chip+.col-chip {
    margin-left: 12px;
}

.col-chip:hover {
    background: #242424;
    border-color: var(--red);
    transform: translateY(-2px);
}

[data-theme="light"] .col-chip:hover {
    background: #f0f0f0;
}

.col-chip__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--dark-border);
    transition: border-color 0.3s;
    position: relative;
}

.col-chip:hover .col-chip__avatar {
    border-color: var(--red);
}

.col-chip__avatar::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--red);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s, transform 0.3s;
}

.col-chip:hover .col-chip__avatar::after {
    opacity: 0.5;
    transform: scale(1);
}

.col-chip__avatar img,
.col-chip__avatar .placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.col-chip__info {
    flex: 1;
    min-width: 0;
}

.col-chip__name {
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.col-chip__tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 2px;
    display: inline-flex;
}

.col-chip__tag--economia {
    background: #00C853;
    color: #0a0a0a;
}

.col-chip__tag--politica {
    background: var(--accent-blue);
    color: #fff;
}

.col-chip__tag--tech {
    background: #AB47BC;
    color: #fff;
}

.col-chip__title {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.col-chip__connector {
    position: absolute;
    left: -8px;
    top: 50%;
    width: 5px;
    height: 5px;
    background: var(--dark-border);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: background 0.3s;
    z-index: 2;
}

.col-chip:hover .col-chip__connector {
    background: var(--red);
}

.col-chip__connector-line {
    position: absolute;
    left: -14px;
    top: 50%;
    width: 14px;
    height: 1.5px;
    background: var(--dark-border);
    transform: translateY(-50%);
    z-index: 0;
    transition: background 0.3s;
}

.col-chip:hover .col-chip__connector-line {
    background: var(--red);
}

/* ═══ MARKET STRIP ═══ */
.market-strip {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 6px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 28px;
    overflow-x: auto;
    margin: 20px 0;
    scrollbar-width: none;
}

.market-strip::-webkit-scrollbar {
    display: none;
}

.market-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.market-item__name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.market-item__val {
    font-size: 13px;
    font-weight: 600;
}

.market-item__chg {
    font-size: 12px;
    font-weight: 700;
}

.market-item__chg.up {
    color: #4ADE80;
}

.market-item__chg.down {
    color: #FF4444;
}

[data-theme="light"] .market-item__chg.up {
    color: #15803D;
}

[data-theme="light"] .market-item__chg.down {
    color: #B91C1C;
}

.market-div {
    width: 1px;
    height: 18px;
    background: var(--dark-border);
    flex-shrink: 0;
}

/* ═══ HERO ═══ */
.hero {
    padding: 20px 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 16px;
}

.hero-main {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    min-height: 460px;
}

.hero-main__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 0.6s ease;
}

.hero-main:hover .hero-main__img {
    transform: scale(1.03);
}

.hero-main__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .05) 75%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
}

span.tag {
    display: inline-flex;
    align-items: center;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    margin-bottom: 10px;
    width: fit-content;
}

span.tag--blue {
    background: var(--accent-blue);
}

span.tag--yellow {
    background: var(--accent-yellow);
    color: #111;
}

.hero-main__title {
    font-family: var(--font-body);
    font-size: 34px;
    font-weight: 900;
    line-height: 1.12;
    margin-bottom: 8px;
    max-width: 580px;
    color: #FFFFFF;
}

.hero-main__excerpt {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 500px;
    line-height: 1.5;
}

.hero-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hero-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    flex: 1;
    min-height: 140px;
}

.hero-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 0.5s ease;
}

.hero-card:hover .hero-card__img {
    transform: scale(1.05);
}

.hero-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .15) 65%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
}

.hero-card__title {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.2;
    color: #FFFFFF;
}

.hero-card__meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 4px;
}

/** Badge "Para Você" nos hero cards — discreto, rodapé inferior direito */
.hero-personalized-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 8px;
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: heroBadgeFade 0.6s ease both;
    width: fit-content;
    align-self: flex-end;
    margin-top: auto;
}

.hero-personalized-badge--small {
    font-size: 8px;
    padding: 2px 6px;
}

@keyframes heroBadgeFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/** Tag "⏳ Relembre" para matérias antigas (30+ dias) nos hero cards */
.hero-relembre-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    color: #ffd740;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 5;
    width: fit-content;
    align-self: flex-start;
    letter-spacing: 0.3px;
}

.hero-relembre-tag--small {
    font-size: 9px;
    padding: 2px 6px;
}

/** Prova social (curtidas + comentários) nos hero cards personalizados */
.hero-social {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.hero-social--small {
    gap: 8px;
    margin-top: 6px;
}

.hero-social__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.hero-social--small .hero-social__item {
    font-size: 10px;
}

.hero-social__item svg {
    opacity: 0.8;
}

/* ═══ NEWS GRID & CARDS ═══ */
.news-section {
    margin-bottom: 12px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.news-card {
    background: var(--dark-card);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
}

[data-theme="light"] .news-card {
    border: 1px solid var(--dark-border);
}

.news-card__img-wrap {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.news-card__img-wrap .placeholder-img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
}

.news-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.news-card:hover .news-card__img-wrap .placeholder-img,
.news-card:hover .news-card__img-wrap img {
    transform: scale(1.06);
}

.news-card__img-wrap .tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    margin: 0;
}

.news-card__body {
    padding: 14px;
}

.news-card__title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.25;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card__meta {
    font-size: 11px;
    color: var(--text-muted);
}

/* ═══ FEATURED ROW ═══ */
.featured-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

.featured-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    min-height: 300px;
}

.featured-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 0.6s;
}

.featured-card:hover .featured-card__img {
    transform: scale(1.04);
}

.featured-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .15) 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
}

.featured-card__title {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 6px;
    color: #FFFFFF;
}

.featured-card__excerpt {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 400px;
}

/* ═══ LATEST + SIDEBAR ═══ */
.content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    margin-bottom: 12px;
}

.latest-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--dark-border);
    cursor: pointer;
    transition: opacity 0.2s;
}

.latest-item:hover {
    opacity: .8;
}

.latest-item__num {
    font-family: var(--font-body);
    font-size: 32px;
    color: var(--red-text);
    line-height: 1;
}

.latest-item__tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--red-text);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 3px;
}

.latest-item__title {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

.latest-item__time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

[data-theme="light"] .sidebar-widget {
    border: 1px solid var(--dark-border);
}

.most-read-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dark-border);
    cursor: pointer;
    transition: opacity 0.2s;
}

.most-read-item:last-child {
    border-bottom: none;
}

.most-read-item:hover {
    opacity: .75;
}

.most-read-item__rank {
    font-family: var(--font-body);
    font-size: 26px;
    color: var(--red-text);
    line-height: 1;
    flex-shrink: 0;
    width: 26px;
}

.most-read-item__title {
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}

/* ═══ NEWSLETTER ═══ */
.newsletter-bar {
    background: linear-gradient(135deg, var(--red) 0%, #8B0000 100%);
    border-radius: 8px;
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 12px;
}

.newsletter-bar h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 3px;
    color: #FFFFFF;
}

.newsletter-bar p {
    font-size: 13px;
    color: #FFFFFF;
}

.newsletter-form {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.newsletter-input {
    padding: 10px 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 4px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 13px;
    width: 260px;
    outline: none;
    transition: border-color 0.3s;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, .45);
}

.newsletter-input:focus {
    border-color: #fff;
}

.newsletter-btn {
    padding: 10px 22px;
    background: #fff;
    color: var(--red);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.newsletter-btn:hover {
    background: #f0f0f0;
}

/* ═══ VIDEO GRID ═══ */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.video-card {
    cursor: pointer;
    transition: transform 0.3s;
}

.video-card:hover {
    transform: translateY(-3px);
}

.video-card__thumb {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.video-card__thumb .placeholder-img {
    width: 100%;
    height: 100%;
}

.video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .25);
    opacity: 0;
    transition: opacity 0.3s;
}

.video-card:hover .video-card__play {
    opacity: 1;
}

.video-card__play-icon {
    width: 44px;
    height: 44px;
    background: var(--red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-card__play-icon svg {
    fill: #fff;
    width: 16px;
    height: 16px;
}

.video-card__duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, .8);
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.video-card__title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 3px;
}

.video-card__meta {
    font-size: 11px;
    color: var(--text-muted);
}

/* ═══ FOOTER — HOME GRID ═══ */
[data-theme="light"] .site-footer {
    background: var(--red);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 36px;
    margin-bottom: 32px;
}

.footer-brand .logo {
    margin-bottom: 12px;
}

.footer-brand .logo-main {
    color: #FFFFFF;
}

.footer-brand .logo-sub {
    color: #FFFFFF;
}

.footer-brand p {
    font-size: 13px;
    color: #FFFFFF;
    line-height: 1.6;
    max-width: 260px;
}

.footer-social {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.footer-social a {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #FFFFFF;
    transition: all 0.2s;
}

.footer-social a:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.footer-col h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
    color: #FFFFFF;
}

.footer-col a {
    display: block;
    font-size: 13px;
    color: #FFFFFF;
    padding: 5px 0;
    transition: opacity 0.2s;
}

.footer-col a:hover {
    opacity: 0.65;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #FFFFFF;
}

/* ═══ MOBILE MENU OVERLAY ═══ */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.menu-overlay.open {
    pointer-events: all;
    opacity: 1;
}

.menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
}

.menu-overlay.open .menu-backdrop {
    opacity: 1;
}

.menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--dark-bg);
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

[data-theme="light"] .menu-panel {
    background: #FFFFFF;
}

.menu-overlay.open .menu-panel {
    transform: translateX(0);
}

.menu-header {
    background: var(--red);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-header .logo-main {
    color: #fff;
    font-size: 22px;
}

.menu-header .logo-sub {
    color: #fff;
    font-size: 8px;
}

.menu-close {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-close svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.5;
}

.menu-links {
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
}

.menu-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.mobile-nav-list {
    display: flex;
    flex-direction: column;
}

.mobile-nav-list li {
    width: 100%;
    position: relative;
}

.menu-links a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    transition: background 0.15s;
    border-bottom: 1px solid var(--dark-border);
    text-decoration: none;
}

.menu-links a:hover {
    background: var(--dark-surface);
}

.menu-links a.active {
    color: var(--red-text);
    font-weight: 800;
}

.menu-links svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

/* Mobile Submenu Dropdowns */
.menu-links ul.sub-menu {
    display: none;
    background: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid var(--dark-border);
}

[data-theme="dark"] .menu-links ul.sub-menu {
    background: rgba(255, 255, 255, 0.02);
}

.menu-links li.menu-item-has-children.open>ul.sub-menu {
    display: block;
}

.menu-links ul.sub-menu a {
    padding: 12px 20px 12px 40px;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.menu-links ul.sub-menu li:last-child a {
    border-bottom: none;
}

.menu-links .dropdown-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
}

.menu-links .dropdown-toggle::after {
    content: '';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.3s;
}

.menu-links li.menu-item-has-children.open>.dropdown-toggle::after {
    transform: rotate(180deg);
}

.menu-footer-info {
    padding: 16px 20px;
    border-top: 1px solid var(--dark-border);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ═══ HOME RESPONSIVE ═══ */
/* Utilities */
@media (min-width: 1025px) {
    .hide-on-desktop {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media (max-width:1024px) {
    .headlines-grid {
        grid-template-columns: 1fr;
    }

    .headline-live {
        max-width: 500px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-sidebar {
        flex-direction: row;
    }

    .columnists-bar__list {
        flex-wrap: wrap;
    }

    .col-chip+.col-chip {
        margin-left: 0;
        margin-top: 8px;
    }

    .col-chip__connector,
    .col-chip__connector-line {
        display: none;
    }

    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-with-sidebar {
        grid-template-columns: 1fr;
    }

    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:768px) {
    .hero-main {
        min-height: 320px;
    }

    .hero-main__title {
        font-size: 26px;
    }

    .hero-sidebar {
        flex-direction: column;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .featured-row {
        grid-template-columns: 1fr;
    }

    .featured-card {
        min-height: 220px;
    }

    .newsletter-bar {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-form {
        flex-direction: column;
        width: 100%;
    }

    .newsletter-input {
        width: 100%;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

a.hero-main,
a.hero-card,
a.featured-card,
a.news-card,
a.video-card,
a.sidebar-related-item,
a.related-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

a.hero-main:hover,
a.hero-card:hover,
a.featured-card:hover,
a.related-card:hover {
    color: inherit;
}

a.news-card {
    display: flex;
    flex-direction: column;
}

a.video-card {
    display: block;
}

a.sidebar-related-item {
    display: block;
}

/* ═══════════════════════════════════════════════════════════
   CATEGORY PAGE (category.php)
   Hero, filter bar, post cards, sidebar colunistas, paginação
   v3.0.0
═══════════════════════════════════════════════════════════ */

/* ── Light theme overrides para categoria ── */
[data-theme="light"] .cat-hero__overlay {
    background: linear-gradient(to top, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .6) 40%, transparent 70%);
}

[data-theme="light"] .cat-hero__title,
[data-theme="light"] .cat-hero__excerpt {
    color: #111;
}

[data-theme="light"] .cat-hero__meta {
    color: #595959;
}

[data-theme="light"] .post-card {
    background: #fff;
    border: 1px solid #E8E8E8;
}

[data-theme="light"] .post-card__title {
    color: #1A1A1A;
}

[data-theme="light"] .post-card__excerpt {
    color: #444;
}

[data-theme="light"] .filter-btn {
    background: #F0F0F0;
    border-color: #DDD;
    color: #555;
}

[data-theme="light"] .filter-btn.active,
[data-theme="light"] .filter-btn:hover {
    color: #fff;
}

[data-theme="light"] .pagination__btn {
    background: #F0F0F0;
    border-color: #DDD;
    color: #333;
}

[data-theme="light"] .pagination__btn:hover {
    border-color: var(--red);
}

[data-theme="light"] .pagination__btn.active {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* ── Category Hero ── */
.cat-hero-section {
    padding: 32px 0 0;
}

.cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.cat-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cat-header__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    font-weight: 800;
}

.cat-header__title {
    font-family: var(--font-body);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1;
}

.cat-header__count {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.cat-header__desc {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 420px;
    line-height: 1.5;
}

.cat-hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    margin-bottom: 8px;
}

.cat-hero__main {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    min-height: 400px;
    display: block;
    text-decoration: none;
    color: inherit;
}

.cat-hero__main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 0.6s ease;
}

.cat-hero__main:hover .cat-hero__main-img {
    transform: scale(1.03);
}

.cat-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .4) 40%, rgba(0, 0, 0, .05) 70%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
}

.cat-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    margin-bottom: 12px;
    width: fit-content;
}

.cat-hero__tag--live::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: blink 1.4s ease infinite;
}

.cat-hero__title {
    font-family: var(--font-body);
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 8px;
    max-width: 540px;
}

.cat-hero__excerpt {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 480px;
}

.cat-hero__meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.cat-hero__side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cat-hero__side-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    flex: 1;
    min-height: 120px;
    display: block;
    text-decoration: none;
    color: inherit;
}

.cat-hero__side-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 0.5s ease;
}

.cat-hero__side-card:hover .cat-hero__side-card-img {
    transform: scale(1.05);
}

.cat-hero__side-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .15) 65%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
}

.cat-hero__side-title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.cat-hero__side-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Filter Bar ── */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 100px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.filter-btn:hover {
    border-color: var(--red);
    color: var(--red);
}

.filter-btn.active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* ── Post Cards (horizontal) ── */
.cat-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    padding-bottom: 32px;
}

.posts-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post-card {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    background: var(--dark-card);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    color: inherit;
}

.post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    color: inherit;
}

.post-card__img {
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
}

.post-card__img img,
.post-card__img .placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.post-card:hover .post-card__img img,
.post-card:hover .post-card__img .placeholder-img {
    transform: scale(1.05);
}

.post-card__img-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
}

.post-card__body {
    padding: 18px 18px 18px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-card__cat {
    font-size: 11px;
    font-weight: 700;
    color: var(--red-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.post-card__title {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card__excerpt {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.post-card__author {
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-card__author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
}

.post-card__author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card__author-name {
    font-weight: 600;
}

.post-card__dot {
    width: 3px;
    height: 3px;
    background: var(--text-muted);
    border-radius: 50%;
}

/* ── Category Sidebar ── */
.cat-sidebar {
    position: sticky;
    top: 68px;
    align-self: start;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--dark-border) transparent;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cat-sidebar::-webkit-scrollbar {
    width: 4px;
}

.cat-sidebar::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 4px;
}

.sidebar-col {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--dark-border);
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
    color: inherit;
}

.sidebar-col:last-child {
    border-bottom: none;
}

.sidebar-col:hover {
    opacity: .75;
}

.sidebar-col__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--dark-border);
}

.sidebar-col__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-col__name {
    font-size: 13px;
    font-weight: 700;
}

.sidebar-col__last {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Paginação ── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 0 48px;
}

.pagination__btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.pagination__btn:hover {
    border-color: var(--red);
    color: var(--text-primary);
}

.pagination__btn.active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.pagination__btn--arrow {
    font-size: 18px;
}

.pagination__btn--arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ── Responsivo Categoria ── */
@media (max-width:1024px) {
    .cat-hero {
        grid-template-columns: 1fr;
    }

    .cat-hero__main {
        min-height: 320px;
    }

    .cat-hero__side {
        flex-direction: row;
    }

    .cat-content {
        grid-template-columns: 1fr;
    }

    .cat-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cat-sidebar .sidebar-box {
        flex: 1;
        min-width: 260px;
    }
}

@media (max-width:768px) {
    .cat-header__title {
        font-size: 1.5rem;
    }

    .cat-hero__main {
        min-height: 260px;
    }

    .cat-hero__title {
        font-size: 1.3rem;
    }

    .cat-hero__side {
        flex-direction: column;
    }

    .post-card {
        grid-template-columns: 1fr;
    }

    .post-card__body {
        padding: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════
   TAG PAGE (tag.php)
   Hero badge, related tags, sort bar, tag cards, trending, timeline, tag cloud
   v3.0.0
═══════════════════════════════════════════════════════════ */

/* ── Light theme overrides para tag ── */
[data-theme="light"] .tag-card {
    border: 1px solid var(--dark-border);
}

/* ── Tag Hero ── */
.tag-hero {
    padding: 48px 0 32px;
    border-bottom: 1px solid var(--dark-border);
}

.tag-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: #fff;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.tag-hero__badge svg {
    width: 14px;
    height: 14px;
    fill: #fff;
}

.tag-hero__title {
    font-family: var(--font-body);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 8px;
}

.tag-hero__count {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.tag-hero__count strong {
    color: var(--red-text);
    font-weight: 800;
}

.tag-hero__desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 640px;
}

/* ── Related Tags ── */
.related-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.related-tags__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-right: 4px;
    display: flex;
    align-items: center;
}

.tag-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 100px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.tag-pill:hover {
    border-color: var(--red);
    color: var(--red-text);
}

.tag-pill.active {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* ── Content Grid ── */
.tag-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    padding: 32px 0;
}

/* ── Sort Bar ── */
.sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dark-border);
}

.sort-bar__label {
    font-size: 13px;
    color: var(--text-muted);
}

.sort-bar__label strong {
    color: var(--text-primary);
    font-weight: 700;
}

.sort-btns {
    display: flex;
    gap: 6px;
}

.sort-btn {
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-sans);
    text-decoration: none;
}

.sort-btn:hover {
    border-color: var(--red);
}

.sort-btn.active {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* ── Tag Cards (horizontal) ── */
.tag-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tag-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    background: var(--dark-card);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    color: inherit;
}

.tag-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
    color: inherit;
}

.tag-card__img {
    aspect-ratio: 16/10;
    overflow: hidden;
}

.tag-card__img img,
.tag-card__img .placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.tag-card:hover .tag-card__img img,
.tag-card:hover .tag-card__img .placeholder-img {
    transform: scale(1.05);
}

.tag-card__body {
    padding: 16px 16px 16px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tag-card__cat {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--red-text);
    margin-bottom: 6px;
}

.tag-card__title {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tag-card__excerpt {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tag-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.tag-card__author-pic {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.tag-card__author-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tag-card__dot {
    width: 3px;
    height: 3px;
    background: var(--text-muted);
    border-radius: 50%;
}

/* ── Tag Sidebar ── */
.tag-sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Trending Items ── */
.trending-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dark-border);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

.trending-item:last-child {
    border-bottom: none;
}

.trending-item:hover {
    opacity: 0.8;
}

.trending-item__rank {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 900;
    color: var(--red-text);
    line-height: 1;
    min-width: 24px;
    flex-shrink: 0;
}

.trending-item__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.trending-item__time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ── Tag Cloud ── */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-cloud__item {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 100px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    color: var(--text-secondary);
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
}

.tag-cloud__item:hover {
    border-color: var(--red);
    color: var(--red-text);
}

.tag-cloud__item--lg {
    font-size: 14px;
    font-weight: 700;
    padding: 6px 16px;
}

.tag-cloud__item--sm {
    font-size: 11px;
    padding: 4px 10px;
}

/* ── Timeline ── */
.timeline-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

.timeline-item:hover {
    opacity: 0.8;
}

.timeline-item__dot {
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
    position: relative;
}

.timeline-item__dot::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 3px;
    width: 2px;
    height: calc(100% + 8px);
    background: var(--dark-border);
}

.timeline-item:last-child .timeline-item__dot::after {
    display: none;
}

.timeline-item__text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.timeline-item__text strong {
    color: var(--text-primary);
    font-weight: 700;
}

.timeline-item__date {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Responsivo Tag ── */
@media (max-width:1024px) {
    .tag-content {
        grid-template-columns: 1fr;
    }

    .tag-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tag-sidebar .sidebar-box {
        flex: 1;
        min-width: 260px;
    }
}

@media (max-width:768px) {
    .tag-hero {
        padding: 32px 0 24px;
    }

    .tag-hero__title {
        font-size: 1.8rem;
    }

    .tag-card {
        grid-template-columns: 1fr;
    }

    .tag-card__body {
        padding: 16px;
    }

    .sort-bar {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════
   AUTHOR PAGE (author.php)
   Hero com avatar, stats, featured quote, articles grid
   v3.0.0
═══════════════════════════════════════════════════════════ */

/* ── Light theme overrides para author ── */
[data-theme="light"] .author-card {
    border: 1px solid var(--dark-border);
}

[data-theme="light"] .stat-card {
    border: 1px solid var(--dark-border);
}

/* ── Author Hero ── */
.author-hero {
    padding: 48px 0 0;
    text-align: center;
}

.author-hero__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 20px;
    overflow: hidden;
    border: 4px solid var(--red);
    box-shadow: 0 0 0 6px var(--red-glow);
}

.author-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-hero__name {
    font-family: var(--font-body);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 8px;
}

.author-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--red);
    color: #fff;
    padding: 4px 14px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.author-hero__bio {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 24px;
}

.author-hero__social {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.author-social-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s;
    text-decoration: none;
}

.author-social-btn:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* ── Stats ── */
.author-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 28px 0;
    border-bottom: 1px solid var(--dark-border);
}

.stat-card {
    background: var(--dark-card);
    border-radius: 10px;
    padding: 18px 24px;
    text-align: center;
    min-width: 120px;
}

.stat-card__num {
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 900;
    color: var(--red-text);
    line-height: 1;
    margin-bottom: 4px;
}

.stat-card__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

/* ── Featured Quote ── */
.featured-quote {
    max-width: 700px;
    margin: 0 auto 12px;
    text-align: center;
    padding: 32px 24px;
}

.featured-quote__marks {
    font-size: 60px;
    color: var(--red);
    font-family: var(--font-body);
    line-height: 1;
    opacity: 0.3;
}

.featured-quote__text {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 auto 16px;
    max-width: 560px;
}

.featured-quote__source {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}

.featured-quote__source a {
    color: var(--red-text);
    font-weight: 700;
}

.featured-quote__source a:hover {
    text-decoration: underline;
}

/* ── Articles Grid ── */
.author-articles {
    padding: 0 0 40px;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.author-card {
    background: var(--dark-card);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    color: inherit;
}

.author-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .15);
    color: inherit;
}

.author-card__img {
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
}

.author-card__img img,
.author-card__img .placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.author-card:hover .author-card__img img,
.author-card:hover .author-card__img .placeholder-img {
    transform: scale(1.06);
}

.author-card__cat {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
}

.author-card__body {
    padding: 16px;
}

.author-card__title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.author-card__excerpt {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.author-card__meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.author-card__dot {
    width: 3px;
    height: 3px;
    background: var(--text-muted);
    border-radius: 50%;
}

/* ── Responsivo Author ── */
@media (max-width:1024px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:768px) {
    .author-hero__avatar {
        width: 100px;
        height: 100px;
    }

    .author-stats {
        flex-wrap: wrap;
        gap: 10px;
    }

    .stat-card {
        min-width: 100px;
        padding: 14px 18px;
    }

    .stat-card__num {
        font-size: 22px;
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }

    .featured-quote__text {
        font-size: 18px;
    }
}

/* ═══════════════════════════════════════════════════════════
   PAGE TEMPLATE (page.php)
   Hero breadcrumb, prose body, Gutenberg blocks, featured image
   v3.1.0
═══════════════════════════════════════════════════════════ */

/* ── Light theme overrides para page ── */
[data-theme="light"] .page-body blockquote {
    background: #F7F7F5;
    color: #1A1A1A;
}

/* ── Page Hero ── */
.page-hero {
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 24px 0;
}

.page-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.page-hero__breadcrumb a {
    color: var(--red-text);
    transition: opacity 0.2s;
}

.page-hero__breadcrumb a:hover {
    opacity: 0.7;
}

.page-hero__breadcrumb-sep {
    color: var(--text-muted);
}

.page-hero__title {
    font-family: var(--font-body);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 12px;
}

.page-hero__subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 640px;
}

.page-hero__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--dark-border);
}

.page-hero__meta svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
}

/* ── Featured Image ── */
.page-featured-img {
    max-width: 900px;
    margin: 24px auto 0;
    padding: 0 24px;
}

.page-featured-img img {
    border-radius: 10px;
    width: 100%;
}

/* ── Page Body — Prose Content ── */
.page-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 24px 60px;
}

.page-body p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.page-body h2 {
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 800;
    margin: 40px 0 16px;
    padding-left: 14px;
    border-left: 4px solid var(--red);
    line-height: 1.3;
}

.page-body h3 {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 32px 0 12px;
    color: var(--text-primary);
}

.page-body ul,
.page-body ol {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-secondary);
    margin: 0 0 24px 24px;
}

.page-body li {
    margin-bottom: 8px;
}

.page-body li::marker {
    color: var(--red);
}

.page-body strong {
    color: var(--text-primary);
}

.page-body a {
    color: var(--red-text);
    text-decoration: underline;
    text-decoration-color: rgba(204, 0, 0, 0.3);
    transition: text-decoration-color 0.2s;
}

.page-body a:hover {
    text-decoration-color: var(--red);
}

.page-body blockquote {
    background: var(--dark-surface);
    border-left: 4px solid var(--red);
    padding: 20px 24px;
    margin: 32px 0;
    border-radius: 0 8px 8px 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.7;
}

.page-body blockquote cite {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 10px;
    font-family: var(--font-sans);
}

.page-body hr {
    border: none;
    height: 1px;
    background: var(--dark-border);
    margin: 40px 0;
}

.page-body figure {
    margin: 32px 0;
    border-radius: 10px;
    overflow: hidden;
}

.page-body figure img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.page-body figcaption {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 0;
    font-style: italic;
}

.page-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;
}

.page-body th {
    text-align: left;
    padding: 12px 16px;
    background: var(--dark-surface);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--red);
}

.page-body td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--dark-border);
    color: var(--text-secondary);
}

.page-body tr:hover td {
    background: var(--dark-surface);
}

/* ── Gutenberg Blocks ── */
.page-body .wp-block-embed {
    margin: 32px 0;
}

.page-body .wp-block-embed iframe {
    max-width: 100%;
    border-radius: 8px;
}

.page-body .wp-block-image {
    margin: 32px 0;
}

.page-body .wp-block-image img {
    border-radius: 8px;
}

.page-body .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 32px 0;
}

.page-body .wp-block-gallery img {
    border-radius: 6px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-body .wp-block-buttons {
    display: flex;
    gap: 10px;
    margin: 24px 0;
    flex-wrap: wrap;
}

.page-body .wp-block-button a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--red);
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    transition: background 0.2s;
    text-decoration: none;
}

.page-body .wp-block-button a:hover {
    background: var(--red-dark);
    text-decoration: none;
}

.page-body .wp-block-separator {
    border: none;
    height: 1px;
    background: var(--dark-border);
    margin: 40px 0;
}

.page-body .wp-block-code {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 6px;
    padding: 16px 20px;
    font-family: monospace;
    font-size: 13px;
    overflow-x: auto;
    margin: 24px 0;
}

.page-body .has-text-align-center {
    text-align: center;
}

.page-body .has-text-align-right {
    text-align: right;
}

/* ── Responsivo Page ── */
@media (max-width:768px) {
    .page-hero {
        padding: 32px 24px 0;
    }

    .page-hero__title {
        font-size: 1.6rem;
    }

    .page-body {
        padding: 28px 24px 40px;
    }

    .page-body h2 {
        font-size: 1.15rem;
    }

    .page-body table {
        font-size: 12px;
    }

    .page-body th,
    .page-body td {
        padding: 8px 10px;
    }

    .page-featured-img {
        max-width: 100%;
        padding: 0;
    }

    .page-featured-img img {
        border-radius: 0;
    }
}

/* ═══════════════════════════════════════════════════════════
   TAG PILLS — cards de post (category, author, tag)
   Clicáveis, redirecionam para tag.php
   v3.3.0
═══════════════════════════════════════════════════════════ */
.post-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.post-card__tag-pill {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    padding: 3px 10px;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.post-card__tag-pill:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

[data-theme="light"] .post-card__tag-pill {
    background: #F0F0F0;
    border-color: #D8D8D8;
    color: #555;
}

[data-theme="light"] .post-card__tag-pill:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* sidebar-tag como link clicável */
a.sidebar-tag {
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

a.sidebar-tag:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   COMMENTS SECTION — expansível via JS
   Avatares circulares, nomes, tempo relativo, formulário
   v3.4.0
═══════════════════════════════════════════════════════════ */
.comments-section {
    max-width: 740px;
    margin: 0 auto;
    padding: 0 16px;
}

.comments-section__inner {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    padding: 24px;
}

.comments-section__title {
    font-family: 'Encode Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dark-border);
}

.comments-section__empty {
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    padding: 24px 0;
}

.comment-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--dark-border);
}

.comment-item:last-of-type {
    border-bottom: none;
}

.comment-item__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.comment-item__avatar img,
.comment-item__avatar .avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.comment-item__body {
    flex: 1;
    min-width: 0;
}

.comment-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.comment-item__meta strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.comment-item__meta span {
    font-size: 11px;
    color: var(--text-muted);
}

.comment-item__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* Light theme adjustments */
[data-theme="light"] .comments-section__inner {
    background: #fff;
    border-color: #e0e0e0;
}

[data-theme="light"] .comment-item {
    border-color: #f0f0f0;
}

/* Comment form */
.comment-form-wrap {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--dark-border);
}

.comment-form-wrap .comment-form label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comment-form-wrap .comment-form input[type="text"],
.comment-form-wrap .comment-form input[type="email"],
.comment-form-wrap .comment-form input[type="url"],
.comment-form-wrap .comment-form textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--dark-bg);
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Encode Sans', sans-serif;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.comment-form-wrap .comment-form textarea {
    min-height: 80px;
    resize: vertical;
}

.comment-form-wrap .comment-form input:focus,
.comment-form-wrap .comment-form textarea:focus {
    border-color: var(--red);
    outline: none;
}

.comment-form-wrap .comment-submit-btn,
.comment-form-wrap .form-submit input[type="submit"] {
    background: var(--red);
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Encode Sans', sans-serif;
}

.comment-form-wrap .comment-submit-btn:hover,
.comment-form-wrap .form-submit input[type="submit"]:hover {
    background: #e00;
    transform: translateY(-1px);
}

[data-theme="light"] .comment-form-wrap {
    border-color: #e0e0e0;
}

[data-theme="light"] .comment-form-wrap input,
[data-theme="light"] .comment-form-wrap textarea {
    background: #f8f8f8;
    border-color: #ddd;
    color: #222;
}

/* Reaction button — estado "reacted" (já curtiu/salvou) */
.reaction-btn.reacted .icon-circle {
    background: var(--red);
}

.reaction-btn.reacted .icon-circle svg {
    fill: #fff;
    stroke: #fff;
}

/* Comment replies — indentação para respostas */
.comment-item--reply {
    margin-left: 40px;
    padding-left: 12px;
    border-left: 2px solid var(--dark-border);
}

.comment-item__reply-badge {
    font-size: 11px;
    color: var(--red);
    font-weight: 600;
    background: rgba(204, 0, 0, 0.08);
    padding: 1px 8px;
    border-radius: 100px;
}

.comment-item__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}

.comment-item__likes {
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

.comment-item__likes:hover {
    color: var(--red);
}

.comment-item__reply-link {
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

.comment-item__reply-link:hover {
    color: var(--text-primary);
}

.comments-section__total {
    background: var(--red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 100px;
    margin-left: 8px;
    vertical-align: middle;
}

[data-theme="light"] .comment-item--reply {
    border-left-color: #e0e0e0;
}

@media (max-width:600px) {
    .comment-item--reply {
        margin-left: 20px;
    }
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM COMMENT FORM — formulário com avatar, captcha, reply
   v4.0.0
═══════════════════════════════════════════════════════════ */
.dsp-comment-form-wrap {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.dsp-comment-form__header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dark-border);
}

.dsp-comment-form__reply-to {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(204, 0, 0, 0.06);
    border: 1px solid rgba(204, 0, 0, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.dsp-comment-form__reply-to strong {
    color: var(--red);
}

.dsp-comment-form__cancel-reply {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    font-family: var(--font-sans);
}

.dsp-comment-form__cancel-reply:hover {
    background: rgba(255, 0, 0, 0.1);
    color: var(--red);
}

.dsp-comment-form__input,
.dsp-comment-form__textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--dark-bg);
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-sans);
    transition: border-color 0.2s;
    box-sizing: border-box;
    margin-bottom: 12px;
}

.dsp-comment-form__input:focus,
.dsp-comment-form__textarea:focus {
    border-color: var(--red);
    outline: none;
}

.dsp-comment-form__textarea {
    min-height: 80px;
    resize: vertical;
}

.dsp-comment-form__avatars {
    margin-bottom: 12px;
}

.dsp-comment-form__avatars-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 8px;
}

.dsp-comment-form__avatars-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dsp-avatar-option {
    cursor: pointer;
    position: relative;
}

.dsp-avatar-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.dsp-avatar-option__emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    border: 2px solid transparent;
    transition: all 0.2s;
    opacity: 0.6;
}

.dsp-avatar-option.selected .dsp-avatar-option__emoji,
.dsp-avatar-option:hover .dsp-avatar-option__emoji {
    opacity: 1;
    border-color: var(--red);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(204, 0, 0, 0.25);
}

/* Captcha */
.dsp-comment-form__captcha {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    background: var(--dark-bg);
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    padding: 8px 12px;
}

.dsp-comment-form__captcha-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.dsp-comment-form__captcha-input {
    width: 60px;
    padding: 6px 10px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    font-family: var(--font-sans);
}

.dsp-comment-form__captcha-input:focus {
    border-color: var(--red);
    outline: none;
}

.dsp-comment-form__captcha-refresh {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.dsp-comment-form__captcha-refresh:hover {
    opacity: 1;
}

/* Footer */
.dsp-comment-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dsp-comment-form__error {
    font-size: 12px;
    color: #ef4444;
    flex: 1;
}

.dsp-comment-form__submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--red);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-sans);
    white-space: nowrap;
}

.dsp-comment-form__submit:hover {
    background: #e00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
}

.dsp-comment-form__submit:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

/* New comment animation */
.comment-item--new {
    animation: commentGlow 2s ease-out;
}

@keyframes commentGlow {
    0% {
        background: rgba(204, 0, 0, 0.1);
        box-shadow: 0 0 0 2px var(--red);
        border-radius: 8px;
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

/* Light theme */
[data-theme="light"] .dsp-comment-form-wrap {
    background: #fff;
    border-color: #e0e0e0;
}

[data-theme="light"] .dsp-comment-form__input,
[data-theme="light"] .dsp-comment-form__textarea {
    background: #f8f8f8;
    border-color: #ddd;
    color: #222;
}

[data-theme="light"] .dsp-comment-form__captcha {
    background: #f8f8f8;
    border-color: #ddd;
}

[data-theme="light"] .dsp-comment-form__captcha-input {
    background: #fff;
    border-color: #ddd;
    color: #222;
}

/* Responsive */
@media (max-width: 600px) {
    .dsp-comment-form-wrap {
        padding: 16px;
    }

    .dsp-comment-form__avatars-grid {
        gap: 6px;
    }

    .dsp-avatar-option__emoji {
        width: 32px;
        height: 32px;
        font-size: 17px;
    }

    .dsp-comment-form__captcha {
        flex-wrap: wrap;
    }

    .dsp-comment-form__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .dsp-comment-form__submit {
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════════
   LOTERIAS — CSS da page-resultados-loterias-caixa-hoje.php
   Cores por loteria, cards, bolas, filtros, hero, busca
   ══════════════════════════════════════════════════════════════ */

/* Variáveis de cor por loteria (scoped via .loteria-page) */
.loteria-page {
    --mega: #209869;
    --loto: #930089;
    --quina: #260085;
    --lotomania: #F78100;
    --dupla: #A61324;
    --timemania: #00CC3A;
    --diadesorte: #CB8833;
    --super7: #6BA020;
    --federal: #005CA9;
    /** Contenção — evita cards estourarem a viewport */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    overflow-x: hidden;
}

/* ═══ LOTTERY HERO ═══ */
.lottery-hero {
    text-align: center;
    padding: 36px 0 8px;
}

.lottery-hero__icon {
    font-size: 40px;
    margin-bottom: 8px;
}

.lottery-hero__title {
    font-family: 'Merriweather', Georgia, serif;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 900;
    margin-bottom: 6px;
}

.lottery-hero__sub {
    font-size: 14px;
    color: var(--text-muted);
}

.lottery-hero__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 10px;
    background: var(--dark-surface);
    padding: 5px 16px;
    border-radius: 100px;
    border: 1px solid var(--dark-border);
}

.lottery-hero__date svg {
    width: 14px;
    height: 14px;
    stroke: var(--red-text);
    fill: none;
    stroke-width: 2;
}

/* ═══ SEARCH PANEL ═══ */
.search-panel {
    background: var(--dark-card);
    border-radius: 12px;
    padding: 20px;
    margin: 24px auto;
    max-width: 600px;
    display: flex;
    gap: 10px;
    align-items: center;
}

[data-theme="light"] .search-panel {
    border: 1px solid var(--dark-border);
}

.search-panel__input {
    flex: 1;
    padding: 12px 16px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.search-panel__input:focus {
    border-color: var(--red);
}

.search-panel__input::placeholder {
    color: var(--text-muted);
}

.search-panel__btn {
    padding: 12px 20px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    min-height: 44px;
    transition: background 0.2s;
}

.search-panel__btn:hover {
    background: var(--red-dark, #A30000);
}

/* ═══ LOTTERY FILTERS ═══ */
.lottery-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 28px;
}

.filter-pill {
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    font-family: var(--font-sans);
}

.filter-pill:hover,
.filter-pill.active {
    color: #fff !important;
}

.filter-pill--mega {
    color: var(--mega);
    border-color: var(--mega);
}

.filter-pill--mega:hover,
.filter-pill--mega.active {
    background: var(--mega);
}

.filter-pill--loto {
    color: var(--loto);
    border-color: var(--loto);
}

.filter-pill--loto:hover,
.filter-pill--loto.active {
    background: var(--loto);
}

.filter-pill--quina {
    color: var(--quina);
    border-color: var(--quina);
}

.filter-pill--quina:hover,
.filter-pill--quina.active {
    background: var(--quina);
}

.filter-pill--lotomania {
    color: var(--lotomania);
    border-color: var(--lotomania);
}

.filter-pill--lotomania:hover,
.filter-pill--lotomania.active {
    background: var(--lotomania);
}

.filter-pill--dupla {
    color: var(--dupla);
    border-color: var(--dupla);
}

.filter-pill--dupla:hover,
.filter-pill--dupla.active {
    background: var(--dupla);
}

.filter-pill--timemania {
    color: var(--timemania);
    border-color: var(--timemania);
}

.filter-pill--timemania:hover,
.filter-pill--timemania.active {
    background: var(--timemania);
    color: #000 !important;
}

.filter-pill--diadesorte {
    color: var(--diadesorte);
    border-color: var(--diadesorte);
}

.filter-pill--diadesorte:hover,
.filter-pill--diadesorte.active {
    background: var(--diadesorte);
}

.filter-pill--super7 {
    color: var(--super7);
    border-color: var(--super7);
}

.filter-pill--super7:hover,
.filter-pill--super7.active {
    background: var(--super7);
}

.filter-pill--federal {
    color: var(--federal);
    border-color: var(--federal);
}

.filter-pill--federal:hover,
.filter-pill--federal.active {
    background: var(--federal);
}

.filter-pill--all {
    color: var(--text-secondary);
    border-color: var(--dark-border);
}

.filter-pill--all:hover,
.filter-pill--all.active {
    background: var(--red);
    border-color: var(--red);
}

/* ═══ LOTTERY CARDS ═══ */
.lottery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.lottery-card {
    background: var(--dark-card);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    min-width: 0;
}

[data-theme="light"] .lottery-card {
    border: 1px solid var(--dark-border);
}

.lottery-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}

.lottery-card__header {
    padding: 16px 20px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lottery-card__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lottery-card__logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: #fff;
}

.lottery-card__name {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lottery-card__contest {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

.lottery-card__badge {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lottery-card__badge--acumulou {
    background: var(--red);
    color: #fff;
}

.lottery-card__badge--ganhou {
    background: #209869;
    color: #fff;
}

/* Number balls */
.lottery-card__numbers {
    padding: 8px 20px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.ball {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    position: relative;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
}

.ball--mega {
    background: var(--mega);
}

.ball--loto {
    background: var(--loto);
}

.ball--quina {
    background: var(--quina);
}

.ball--lotomania {
    background: var(--lotomania);
}

.ball--dupla {
    background: var(--dupla);
}

.ball--timemania {
    background: var(--timemania);
    color: #000;
}

.ball--diadesorte {
    background: var(--diadesorte);
}

.ball--super7 {
    background: var(--super7);
}

.ball--federal {
    background: var(--federal);
    border-radius: 8px;
    width: auto;
    min-width: 44px;
    padding: 0 12px;
    font-size: 13px;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

/* Prize info */
.lottery-card__prize {
    padding: 0 20px 16px;
    text-align: center;
}

.lottery-card__prize-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 2px;
}

.lottery-card__prize-value {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-primary);
}

.lottery-card__prize-value span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Details row */
.lottery-card__details {
    padding: 12px 20px;
    border-top: 1px solid var(--dark-border);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}

.lottery-card__detail {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lottery-card__detail svg {
    width: 13px;
    height: 13px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
}

.lottery-card__detail strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Next draw */
.lottery-card__next {
    padding: 12px 20px;
    background: var(--dark-surface);
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lottery-card__next-prize {
    font-weight: 800;
    color: var(--red-text);
}

/* ═══ SEARCH RESULT ═══ */
.search-result {
    display: none;
    margin: 20px auto;
    max-width: 600px;
    text-align: center;
    padding: 40px;
    background: var(--dark-card);
    border-radius: 14px;
    border: 1px solid var(--dark-border);
}

.search-result.visible {
    display: block;
}

.search-result__icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.search-result__title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 4px;
}

.search-result__text {
    font-size: 14px;
    color: var(--text-muted);
}

/* ═══ RESPONSIVE LOTERIAS ═══ */
@media(max-width:768px) {
    .lottery-grid {
        grid-template-columns: 1fr;
    }

    .lottery-hero {
        padding: 28px 0 4px;
    }

    .search-panel {
        flex-direction: column;
    }

    .search-panel__btn {
        width: 100%;
    }

    .ball {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .ball--federal {
        width: auto;
        min-width: 42px;
        height: 34px;
        border-radius: 6px;
        padding: 0 8px;
        font-size: 11px;
    }

    .lottery-card__prize-value {
        font-size: 18px;
    }

    .loteria-page {
        padding: 0 12px;
    }
}

@media(max-width:400px) {
    .ball {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .ball--federal {
        width: auto;
        min-width: 38px;
        height: 30px;
        border-radius: 6px;
        padding: 0 6px;
        font-size: 10px;
        letter-spacing: 0.2px;
    }

    .lottery-card__numbers {
        gap: 6px;
    }
}

/* Ball reveal animation */
@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0
    }

    60% {
        transform: scale(1.15)
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.ball {
    animation: popIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ball:nth-child(1) {
    animation-delay: .05s
}

.ball:nth-child(2) {
    animation-delay: .1s
}

.ball:nth-child(3) {
    animation-delay: .15s
}

.ball:nth-child(4) {
    animation-delay: .2s
}

.ball:nth-child(5) {
    animation-delay: .25s
}

.ball:nth-child(6) {
    animation-delay: .3s
}

.ball:nth-child(7) {
    animation-delay: .35s
}

.ball:nth-child(8) {
    animation-delay: .4s
}

.ball:nth-child(9) {
    animation-delay: .45s
}

.ball:nth-child(10) {
    animation-delay: .5s
}

.ball:nth-child(11) {
    animation-delay: .55s
}

.ball:nth-child(12) {
    animation-delay: .6s
}

.ball:nth-child(13) {
    animation-delay: .65s
}

.ball:nth-child(14) {
    animation-delay: .7s
}

.ball:nth-child(15) {
    animation-delay: .75s
}

/* ═══ HEADER DO CARD — ACTIONS (badge + botão refresh) ═══ */
.lottery-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ═══ BOTÃO REFRESH ═══ */
.lottery-card__refresh {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.lottery-card__refresh svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    transition: transform 0.3s;
}

.lottery-card__refresh:hover {
    border-color: var(--red);
    background: var(--red);
}

.lottery-card__refresh:hover svg {
    stroke: #fff;
}

/* Spinning state */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.lottery-card__refresh.spinning svg {
    animation: spin 0.8s linear infinite;
}

.lottery-card__refresh.spinning {
    pointer-events: none;
    opacity: 0.7;
}

/* Card loading state */
.lottery-card--loading {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* ═══ INFO DO BANCO (mini rodapé do card) ═══ */
.lottery-card__db-info {
    padding: 8px 20px;
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid var(--dark-border);
    text-align: right;
    font-style: italic;
}

/* ═══ CTA: CONFIRA SEU JOGO (v2 — alta conversão) ═══ */
.lottery-card__check-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #1a8d00 0%, #27ae0b 50%, #34c91a 100%);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 0 0 14px 14px;
    transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15);
    animation: ctaPulseGlow 2.5s ease-in-out infinite;
}
@keyframes ctaPulseGlow {
    0%,100% { box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15), 0 0 0 0 rgba(39,174,11,0); }
    50% { box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15), 0 0 20px 4px rgba(39,174,11,0.25); }
}
.lottery-card__check-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: ctaShimmer 2.2s ease-in-out infinite;
}
@keyframes ctaShimmer {
    0%,100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}
.lottery-card__check-cta:hover {
    background: linear-gradient(135deg, #158000 0%, #1f9a05 50%, #2bba10 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(39,174,11,0.4);
    color: #fff;
    text-decoration: none;
}
/* Ícone do dedo clicando com animação tap */
.lottery-card__check-cta-icon {
    font-size: 22px;
    position: relative;
    z-index: 1;
    animation: ctaFingerTap 1.5s ease-in-out infinite;
    display: inline-block;
}
@keyframes ctaFingerTap {
    0%,60%,100% { transform: scale(1) rotate(0deg); }
    10% { transform: scale(1.3) rotate(-15deg); }
    25% { transform: scale(0.95) rotate(5deg); }
    40% { transform: scale(1.15) rotate(-8deg); }
}
.lottery-card__check-cta-text {
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 900;
}
.lottery-card__check-cta-arrow {
    position: relative; z-index: 1;
    transition: transform 0.3s;
    font-weight: 900;
    font-size: 18px;
    animation: ctaArrowBounce 1.2s ease-in-out infinite;
}
@keyframes ctaArrowBounce {
    0%,100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}
.lottery-card__check-cta:hover .lottery-card__check-cta-arrow { transform: translateX(8px); }

/* ═══ BLUR OVERLAY NOS NÚMEROS (gera curiosidade e clique) ═══ */
.lottery-card__numbers {
    position: relative;
}
.lottery-card__numbers::after {
    content: '👆 Toque para conferir seus números';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 800;
    color: #1a8d00;
    letter-spacing: 0.3px;
    border-radius: 0;
    z-index: 2;
    cursor: pointer;
    pointer-events: none;
    animation: blurOverlayPulse 3s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}
@keyframes blurOverlayPulse {
    0%,100% { background: rgba(255,255,255,0.75); }
    50% { background: rgba(255,255,255,0.6); }
}
/* Federal NÃO tem blur (ticket, não dezenas sorteadas) */
.lottery-card[data-lottery="federal"] .lottery-card__numbers::after {
    display: none;
}
/* Blur overlay na versão inline também */
.lottery-inline-result__numbers {
    position: relative;
}
.lottery-inline-result__numbers::after {
    content: '👆 Toque para conferir seus números';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 800;
    color: #1a8d00;
    letter-spacing: 0.3px;
    z-index: 2;
    cursor: pointer;
    pointer-events: none;
    animation: blurOverlayPulse 3s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}
.lottery-inline-result__card[data-lottery="federal"] .lottery-inline-result__numbers::after {
    display: none;
}

/* ═══ WIDGET INTERATIVO: CONFIRA SEU JOGO ═══ */
/* ═══ CHECKER PAGE TITLE ═══ */
.lottery-checker__title-bar {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 16px 4px;
}
.lottery-checker__page-title {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 900;
    color: #1a1a2e;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.3px;
}

/* ═══ BEHAVIOR-BASED RECOMMENDATIONS ═══ */
.lottery-checker__recs {
    max-width: 600px;
    margin: 24px auto 0;
    padding: 0 16px 20px;
}
.lottery-checker__recs-title {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #CC0000;
}
.lottery-checker__recs-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lottery-checker__rec-card {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}
.lottery-checker__rec-card:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.lottery-checker__rec-thumb {
    width: 90px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.lottery-checker__rec-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lottery-checker__rec-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.lottery-checker__rec-title {
    font-size: 13px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lottery-checker__rec-cat {
    font-size: 10px;
    font-weight: 700;
    color: #CC0000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ═══ INLINE WIDGET — CARD INTEIRAMENTE CLICÁVEL ═══ */
.lottery-inline-result__card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Overlay invisível que captura TODOS os toques/cliques no card inteiro */
.lottery-inline-result__card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
}
.lottery-inline-result__card-link:active {
    transform: scale(0.98);
}
.lottery-inline-result__card-link .lottery-inline-result__card {
    cursor: pointer;
}

.lottery-checker {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 16px;
}
.lottery-checker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    flex-wrap: wrap;
}
.lottery-checker__back {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
.lottery-checker__back:hover { color: var(--text-primary); }
.lottery-checker__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lottery-checker__emoji {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    background: var(--lc-color, var(--red));
}
.lottery-checker__name {
    font-size: 18px;
    font-weight: 900;
    color: var(--lc-color, var(--text-primary));
    font-family: var(--font-sans);
}
.lottery-checker__contest {
    font-size: 12px;
    color: var(--text-muted);
}
.lottery-checker__badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255,107,0,0.15);
    color: #ff6b00;
}

/* Números Sorteados */
.lottery-checker__drawn {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    margin-bottom: 16px;
}
.lottery-checker__drawn-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.lottery-checker__drawn-balls {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
.lottery-checker__ball {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800;
    color: #fff;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.15);
    animation: popIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
}

/* Feedback */
.lottery-checker__feedback {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    margin-bottom: 16px;
    transition: all 0.4s;
}
.lottery-checker__feedback--partial {
    border-color: #FFD700;
    background: rgba(255,215,0,0.05);
}
.lottery-checker__feedback--success {
    border-color: #00c853;
    background: rgba(0,200,83,0.08);
    animation: successPulse 0.6s ease;
}
@keyframes successPulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}
.lottery-checker__feedback-count {
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    font-family: var(--font-sans);
    transition: color 0.3s;
}
.lottery-checker__feedback-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.lottery-checker__feedback-msg {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    min-height: 24px;
    transition: all 0.3s;
}

/* Instrução */
.lottery-checker__instruction {
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 12px;
    font-family: var(--font-sans);
}
.lottery-checker__instruction strong { color: var(--text-primary); }

/* Grid de Números */
.lottery-checker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 6px;
    margin-bottom: 20px;
    max-width: 100%;
}
.lottery-checker__num {
    aspect-ratio: 1;
    border: 2px solid var(--dark-border);
    border-radius: 10px;
    background: var(--dark-card);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    min-height: 44px;
}
.lottery-checker__num:hover {
    border-color: var(--text-muted);
    background: var(--dark-surface);
}
.lottery-checker__num:active { transform: scale(0.95); }

/* Número selecionado — Acerto */
.lottery-checker__num--hit {
    background: #00c853 !important;
    border-color: #00c853 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(0,200,83,0.4);
    transform: scale(1.05);
    transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
}

/* Número selecionado — Erro */
.lottery-checker__num--miss {
    background: rgba(255,59,48,0.15) !important;
    border-color: rgba(255,59,48,0.4) !important;
    color: var(--text-muted) !important;
    opacity: 0.7;
}

/* Shake animation */
@keyframes numShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
.lottery-checker__num--shake { animation: numShake 0.4s ease-out; }

/* Ações */
.lottery-checker__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding-bottom: 32px;
}
.lottery-checker__reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.lottery-checker__reset:hover {
    background: var(--dark-card);
    border-color: var(--text-muted);
}
.lottery-checker__see-all {
    font-size: 14px;
    font-weight: 700;
    color: var(--red);
    text-decoration: none;
    transition: color 0.2s;
}
.lottery-checker__see-all:hover { color: var(--red-text); text-decoration: underline; }

/* Confetti Canvas */
.lottery-checker__confetti {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 9999;
    display: none;
}

/* Responsive */
@media(max-width:768px) {
    .lottery-checker { padding: 0 12px; }
    .lottery-checker__grid {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 5px;
    }
    .lottery-checker__num {
        min-height: 40px;
        font-size: 13px;
    }
    .lottery-checker__ball {
        width: 38px; height: 38px;
        font-size: 13px;
    }
    .lottery-checker__feedback-count { font-size: 40px; }
    .lottery-checker__name { font-size: 16px; }
}

/* ═══ TOAST DE FEEDBACK ═══ */
.loteria-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}

.loteria-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.loteria-toast--success {
    background: #209869;
    color: #fff;
}

.loteria-toast--error {
    background: var(--red);
    color: #fff;
}

/* ═══ BOTÃO ATUALIZAR TODOS ═══ */
.lottery-refresh-all-wrap {
    text-align: center;
    margin: 20px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.lottery-refresh-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    min-height: 44px;
}

.lottery-refresh-all:hover {
    background: var(--red-dark, #A30000);
    transform: translateY(-1px);
}

.lottery-refresh-all:active {
    transform: translateY(0);
}

.lottery-refresh-all svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
}

.lottery-refresh-all.loading {
    pointer-events: none;
    opacity: 0.8;
}

.spinning-icon {
    animation: spin 0.8s linear infinite;
}

.lottery-refresh-all__status {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    display: none;
    font-family: var(--font-sans);
}

/* ═══ CARD VAZIO (SEM DADOS) ═══ */
.lottery-card--empty {
    border: 2px dashed var(--dark-border);
}

.lottery-card__empty-content {
    padding: 32px 20px;
    text-align: center;
}

.lottery-card__empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.lottery-card__empty-text {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}

.lottery-card__empty-text strong {
    font-size: 18px;
}

/* ═══════════════════════════════════════════════════════════
   LOTTERY CTA CARD — Anti-banner-blindness editorial card
   Neuromarketing: curiosity, FOMO, social proof, micro-commitment
   Aparece apenas em posts da categoria "loterias"
   v2.0.0
═══════════════════════════════════════════════════════════ */

/** Card container */
.lottery-cta-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px 16px;
}

/** Link wrapper — todo o card é clicável */
.lottery-cta-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 4px solid var(--red);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.lottery-cta-card__link:hover {
    border-left-color: var(--red);
    box-shadow: 0 8px 32px rgba(204, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

[data-theme="light"] .lottery-cta-card__link {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/** Header — AO VIVO + viewers counter */
.lottery-cta-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dark-border);
    font-family: var(--font-sans);
}

.lottery-cta-card__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--red);
}

.lottery-cta-card__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    animation: lottCTALivePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(204, 0, 0, .5);
}

@keyframes lottCTALivePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.85);
    }
}

.lottery-cta-card__viewers {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

.lottery-cta-card__viewers svg {
    stroke: var(--text-muted);
    flex-shrink: 0;
}

.lottery-cta-card__viewers-num {
    font-weight: 800;
    color: var(--text-secondary);
}

/** Body — title + subtitle + balls */
.lottery-cta-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    gap: 16px;
}

.lottery-cta-card__text {
    flex: 1;
    min-width: 0;
}

.lottery-cta-card__title {
    display: block;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 6px;
}

.lottery-cta-card__sub {
    display: block;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.45;
    font-family: var(--font-sans);
}

/** Mini lottery balls — visual proof */
.lottery-cta-card__balls {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.lottery-cta-card__ball {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
    animation: lottCTABallPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lottery-cta-card__ball--1 {
    background: #16734a;
    animation-delay: .1s;
}

.lottery-cta-card__ball--2 {
    background: #930089;
    animation-delay: .2s;
}

.lottery-cta-card__ball--3 {
    background: #260085;
    animation-delay: .3s;
}

.lottery-cta-card__ball--4 {
    background: #b86300;
    animation-delay: .4s;
}

.lottery-cta-card__ball--5 {
    background: var(--dark-surface);
    color: var(--text-muted);
    border: 2px dashed var(--dark-border);
    font-size: 16px;
    font-weight: 900;
    animation-delay: .5s;
    box-shadow: none;
}

[data-theme="light"] .lottery-cta-card__ball--5 {
    background: #f0f0f0;
    border-color: #ccc;
}

@keyframes lottCTABallPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/** Footer — CTA action row */
.lottery-cta-card__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    background: var(--red);
    font-family: var(--font-sans);
    transition: background 0.2s;
}

.lottery-cta-card__link:hover .lottery-cta-card__footer {
    background: #e00;
}

.lottery-cta-card__action {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .3px;
}

.lottery-cta-card__footer svg {
    stroke: #fff;
    transition: transform 0.3s;
}

.lottery-cta-card__link:hover .lottery-cta-card__footer svg {
    transform: translateX(4px);
}

/** Mobile responsivo */
@media (max-width:768px) {
    .lottery-cta-card {
        padding: 0 0 12px;
    }

    .lottery-cta-card__link {
        border-radius: 0;
        border-left: none;
        border-top: 4px solid var(--red);
    }

    .lottery-cta-card__body {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .lottery-cta-card__title {
        font-size: 18px;
    }

    .lottery-cta-card__sub {
        font-size: 13px;
    }

    .lottery-cta-card__balls {
        justify-content: center;
    }

    .lottery-cta-card__ball {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LOTTERY INLINE RESULT — Card de resultado dentro do artigo
   Inserido após o 3º parágrafo quando o redator seleciona uma
   loteria no meta box. Mostra números, prêmio, e status.
   ═══════════════════════════════════════════════════════════════ */

/** Container principal */
.lottery-inline-result {
    margin: 20px 0;
    font-family: var(--font-sans);
}

/** Card renderizado (com dados) */
.lottery-inline-result__card {
    background: var(--dark-card, #1e1e2e);
    border: 1px solid var(--dark-border, #2a2a3a);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
    transition: box-shadow 0.3s, transform 0.3s;
}

.lottery-inline-result__card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
    transform: translateY(-1px);
}

[data-theme="light"] .lottery-inline-result__card {
    background: #fff;
    border-color: #e5e5e5;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/** Header — logo + nome + concurso + badge */
.lottery-inline-result__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--dark-border, #2a2a3a);
    flex-wrap: wrap;
}

[data-theme="light"] .lottery-inline-result__header {
    border-bottom-color: #eee;
}

.lottery-inline-result__logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.lottery-inline-result__header-text {
    flex: 1;
    min-width: 0;
}

.lottery-inline-result__name {
    display: block;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.lottery-inline-result__contest {
    display: block;
    font-size: 12px;
    color: var(--text-muted, #888);
    font-weight: 600;
    margin-top: 2px;
}

/** Badge — Acumulou / Ganhadores */
.lottery-inline-result__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.lottery-inline-result__badge--acumulou {
    background: rgba(255, 107, 0, 0.15);
    color: #ff6b00;
}

[data-theme="light"] .lottery-inline-result__badge--acumulou {
    background: #fff3e6;
}

.lottery-inline-result__badge--ganhou {
    background: rgba(32, 152, 105, 0.15);
    color: #209869;
}

[data-theme="light"] .lottery-inline-result__badge--ganhou {
    background: #e8f5ef;
}

/** Números / Bolas */
.lottery-inline-result__numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px;
    justify-content: center;
}

.lottery-inline-result__ball {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .15);
    animation: popIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Federal: bilhetes de 6 digitos precisam de formato retangular */
.lottery-inline-result__ball--federal {
    width: auto !important;
    min-width: 48px !important;
    height: 36px !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}

/** Prêmio */
.lottery-inline-result__prize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--dark-surface, #161625);
    border-top: 1px solid var(--dark-border, #2a2a3a);
}

[data-theme="light"] .lottery-inline-result__prize {
    background: #f8f8f8;
    border-top-color: #eee;
}

.lottery-inline-result__prize-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lottery-inline-result__prize-value {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-primary, #fff);
    font-family: var(--font-serif);
}

[data-theme="light"] .lottery-inline-result__prize-value {
    color: #111;
}

/** Estado: Loading (buscando resultado) */
.lottery-inline-result__loading {
    background: var(--dark-card, #1e1e2e);
    border: 1px solid var(--dark-border, #2a2a3a);
    border-radius: 14px;
    overflow: hidden;
}

[data-theme="light"] .lottery-inline-result__loading {
    background: #fff;
    border-color: #e5e5e5;
}

.lottery-inline-result__spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--text-muted, #888);
    font-size: 14px;
    font-weight: 600;
}

.lottery-inline-result__spinner svg {
    color: var(--text-muted, #888);
    stroke: currentColor;
}

/** Estado: Pendente (sorteio não realizado) */
.lottery-inline-result__pending {
    background: var(--dark-card, #1e1e2e);
    border: 2px dashed var(--dark-border, #2a2a3a);
    border-radius: 14px;
    overflow: hidden;
}

[data-theme="light"] .lottery-inline-result__pending {
    background: #fffdf5;
    border-color: #e5c77d;
}

.lottery-inline-result__pending-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 18px;
}

.lottery-inline-result__pending-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.lottery-inline-result__pending-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary, #aaa);
    margin: 0;
}

.lottery-inline-result__pending-text strong {
    color: var(--text-primary, #fff);
}

[data-theme="light"] .lottery-inline-result__pending-text {
    color: #555;
}

[data-theme="light"] .lottery-inline-result__pending-text strong {
    color: #222;
}

/** Mobile */
@media (max-width: 768px) {
    .lottery-inline-result__ball {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .lottery-inline-result__ball--federal {
        min-width: 44px !important;
        height: 32px !important;
        border-radius: 6px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        letter-spacing: 0.3px;
    }

    .lottery-inline-result__header {
        padding: 12px 14px;
    }

    .lottery-inline-result__numbers {
        padding: 14px;
        gap: 6px;
    }

    .lottery-inline-result__prize {
        padding: 12px 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .lottery-inline-result__prize-value {
        font-size: 16px;
    }

    .lottery-inline-result__pending-body {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }
}

/* ─── Lottery Nav Grid — Links para outras loterias ─── */
.lottery-inline-result__nav {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--dark-border, #2a2a3a);
}
[data-theme="light"] .lottery-inline-result__nav {
    border-top-color: #e5e5e5;
}
.lottery-inline-result__nav-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted, #888);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.lottery-inline-result__nav-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.lottery-inline-result__nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-primary, #fff);
    background: var(--dark-card, #1e1e2e);
    border: 1px solid var(--dark-border, #2a2a3a);
    transition: all 0.2s ease;
}
.lottery-inline-result__nav-item:hover {
    background: var(--lottery-color);
    color: #fff;
    border-color: var(--lottery-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
[data-theme="light"] .lottery-inline-result__nav-item {
    background: #f5f5f5;
    border-color: #e0e0e0;
    color: #333;
}
[data-theme="light"] .lottery-inline-result__nav-item:hover {
    color: #fff;
}
.lottery-inline-result__nav-emoji {
    font-size: 16px;
    line-height: 1;
}
.lottery-inline-result__nav-name {
    white-space: nowrap;
}
.lottery-inline-result__nav-cta {
    display: block;
    text-align: center;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--dark-surface, #252535);
    color: var(--text-muted, #888);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid var(--dark-border, #2a2a3a);
}
.lottery-inline-result__nav-cta:hover {
    background: var(--red, #cc0000);
    color: #fff;
    border-color: var(--red, #cc0000);
}
[data-theme="light"] .lottery-inline-result__nav-cta {
    background: #f0f0f0;
    border-color: #e0e0e0;
    color: #666;
}
[data-theme="light"] .lottery-inline-result__nav-cta:hover {
    background: var(--red, #cc0000);
    color: #fff;
}

@media (max-width: 768px) {
    .lottery-inline-result__nav-grid {
        gap: 6px;
    }
    .lottery-inline-result__nav-item {
        padding: 5px 10px;
        font-size: 12px;
    }
    .lottery-inline-result__nav-emoji {
        font-size: 14px;
    }
}

/** ═══ CTA FUTEBOL — Inline editorial (não parece anúncio) ═══ */

.futebol-cta-inline {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 900px;
    margin: 0 auto 16px;
    padding: 14px 20px;
    background: var(--dark-card, #1C1C1C);
    border: 2px solid var(--red, #CC0000);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary, #fff);
    transition: background 0.2s, box-shadow 0.2s;
}
.futebol-cta-inline:hover {
    background: var(--dark-surface, #161616);
    box-shadow: 0 4px 16px rgba(204, 0, 0, 0.15);
    text-decoration: none;
    color: var(--text-primary, #fff);
}
.futebol-cta-inline__icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}
.futebol-cta-inline__text {
    flex: 1;
    min-width: 0;
}
.futebol-cta-inline__text strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary, #fff);
}
.futebol-cta-inline__text small {
    display: block;
    font-size: 12px;
    color: var(--text-muted, #999);
    margin-top: 2px;
}
.futebol-cta-inline__btn {
    flex-shrink: 0;
    padding: 10px 20px;
    background: var(--red, #CC0000);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.2s;
}
.futebol-cta-inline:hover .futebol-cta-inline__btn {
    background: #e8222a;
}
[data-theme="light"] .futebol-cta-inline {
    background: #fff;
    border-color: var(--red, #CC0000);
}
[data-theme="light"] .futebol-cta-inline:hover {
    background: #fafafa;
}
@media (max-width: 768px) {
    .futebol-cta-inline {
        margin: 0 0 12px;
        padding: 12px 14px;
        gap: 10px;
        border-radius: 0;
    }
    .futebol-cta-inline__icon { font-size: 24px; }
    .futebol-cta-inline__text strong { font-size: 14px; }
    .futebol-cta-inline__text small { font-size: 11px; }
    .futebol-cta-inline__btn { padding: 8px 14px; font-size: 12px; }
}



/**
 * Fix: WordPress adiciona classe 'tag' ao <body> em páginas de arquivo de tag.
 * A classe .tag era usada para badges de categoria e aplicava inline-flex,
 * width:fit-content, padding, text-transform etc ao body, quebrando o layout.
 * Este reset garante que NENHUMA propriedade do .tag vaze para o body.
 */
body.tag {
    display: block !important;
    background: var(--dark-bg) !important;
    color: var(--text-primary) !important;
    font-size: inherit !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: auto !important;
    align-items: initial !important;
    margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   WEB STORIES ARCHIVE PAGE
   Página de listagem de todos os Web Stories
   ══════════════════════════════════════════════════════════════ */

/* ═══ HERO ═══ */
.stories-hero {
    text-align: center;
    padding: 36px 0 12px
}

.stories-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: #fff;
    padding: 5px 16px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px
}

.stories-hero__badge svg {
    width: 14px;
    height: 14px;
    fill: #fff
}

.stories-hero__title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 900;
    margin-bottom: 6px
}

.stories-hero__sub {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 500px;
    margin: 0 auto
}

/* ═══ FEATURED CAROUSEL — horizontal scroll ═══ */
.featured-section {
    padding: 28px 0 8px
}

.featured-section__label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px
}

.featured-section__dot {
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    animation: wsPulse 1.5s ease infinite
}

@keyframes wsPulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.3
    }
}

.carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 20px
}

.carousel::-webkit-scrollbar {
    display: none
}

.carousel-card {
    flex: 0 0 180px;
    scroll-snap-align: start;
    cursor: pointer;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 9/16;
    transition: transform 0.3s
}

.carousel-card:hover {
    transform: scale(1.03)
}

.carousel-card__bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500
}

.carousel-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .3) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px
}

/* Progress bars on carousel card top */
.carousel-card__progress {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 3px
}

.carousel-card__progress-bar {
    height: 2px;
    flex: 1;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px
}

/* Author ring on carousel */
.carousel-card__author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px
}

.carousel-card__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--red);
    overflow: hidden;
    flex-shrink: 0
}

.carousel-card__avatar .placeholder-img {
    width: 100%;
    height: 100%
}

.carousel-card__author-name {
    font-size: 11px;
    font-weight: 700;
    color: #fff
}

.carousel-card__time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6)
}

.carousel-card__title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.carousel-card__cat {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--red);
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 8px;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 8px
}

.carousel-card__new {
    position: absolute;
    top: 16px;
    right: 12px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 2px 7px;
    border-radius: 3px;
    z-index: 2
}

/* ═══ FILTER TABS ═══ */
.filter-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 16px 0 24px;
    border-bottom: 1px solid var(--dark-border);
    margin-bottom: 28px
}

.filter-tab {
    padding: 7px 18px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--dark-border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.2s
}

.filter-tab:hover {
    border-color: var(--red);
    color: var(--red-text)
}

.filter-tab.active {
    background: var(--red);
    color: #fff;
    border-color: var(--red)
}

/* ═══ STORIES GRID ═══ */
.stories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 40px
}

.story-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 9/16;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    background: var(--dark-card)
}

.story-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .2)
}

.story-card__bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500
}

.story-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .25) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px
}

.story-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.story-card__cat {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--red);
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px
}

.story-card__slides {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 4px
}

.story-card__slides svg {
    width: 12px;
    height: 12px;
    fill: rgba(255, 255, 255, 0.6)
}

.story-card__author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px
}

.story-card__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    flex-shrink: 0
}

.story-card__avatar .placeholder-img {
    width: 100%;
    height: 100%
}

.story-card__author-name {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8)
}

.story-card__author-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5)
}

.story-card__title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.story-card__views {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px
}

.story-card__views svg {
    width: 12px;
    height: 12px;
    stroke: rgba(255, 255, 255, 0.6);
    fill: none;
    stroke-width: 2
}

[data-theme="light"] .story-card {
    border: 1px solid var(--dark-border)
}

/* Load more */
.load-more-wrap {
    text-align: center;
    padding: 8px 0 40px
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 0 0 var(--red-dark), 0 6px 14px var(--red-glow);
    transition: transform 0.15s, box-shadow 0.15s;
    text-decoration: none
}

.load-more-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 0 var(--red-dark)
}

.load-more-btn svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.5
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px) {
    .stories-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:768px) {
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    .carousel-card {
        flex: 0 0 150px
    }

    .story-card__title {
        font-size: 13px
    }
}

@media(max-width:400px) {
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px
    }

    .story-card {
        border-radius: 12px
    }

    .carousel-card {
        flex: 0 0 130px;
        border-radius: 12px
    }

    .carousel-card__title {
        font-size: 12px
    }
}

/* Entrance animations */
.story-card {
    opacity: 0;
    transform: translateY(20px);
    animation: wsFadeUp 0.5s var(--ease) forwards
}

@keyframes wsFadeUp {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.story-card:nth-child(1) {
    animation-delay: 0.05s
}

.story-card:nth-child(2) {
    animation-delay: 0.1s
}

.story-card:nth-child(3) {
    animation-delay: 0.15s
}

.story-card:nth-child(4) {
    animation-delay: 0.2s
}

.story-card:nth-child(5) {
    animation-delay: 0.25s
}

.story-card:nth-child(6) {
    animation-delay: 0.3s
}

.story-card:nth-child(7) {
    animation-delay: 0.35s
}

.story-card:nth-child(8) {
    animation-delay: 0.4s
}

/* ══════════════════════════════════════════════════════════════
   FOOTBALL MATCH PAGE — page-futebol.php
   Página de acompanhamento de partidas ao vivo
   ══════════════════════════════════════════════════════════════ */

/* ═══ MATCH HERO ═══ */
.match-hero {
    background: linear-gradient(135deg, #0a0a1a, #1a1a3e, #0f2040);
    padding: 24px 0 20px;
    color: #fff;
    position: relative;
    overflow: hidden
}

.match-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(204, 0, 0, 0.15), transparent 70%);
    pointer-events: none
}

.match-hero__comp {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px
}

.match-hero__comp span {
    color: #fff;
    background: var(--red);
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 6px;
    font-size: 10px
}

.match-hero__round {
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px
}

.match-hero__teams {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    contain: layout style
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    max-width: 140px;
    flex: 1
}

.team__crest {
    width: 64px;
    height: 64px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    border: 2px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    overflow: hidden
}

.team__crest img {
    width: 48px;
    height: 48px;
    object-fit: contain
}

.team__name {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    word-break: break-word
}

.score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0
}

.score {
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 8px
}

.score__sep {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.3)
}

.match-status {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 3px 12px;
    border-radius: 100px
}

.match-status--live {
    background: var(--red);
    color: #fff;
    animation: statusPulse 2s ease infinite
}

.match-status--ft {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7)
}

.match-status--pre {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5)
}

@keyframes statusPulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.6
    }
}

.match-hero__info {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 14px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45)
}

.match-hero__info svg {
    width: 12px;
    height: 12px;
    stroke: rgba(255, 255, 255, 0.45);
    fill: none;
    stroke-width: 2;
    vertical-align: -2px;
    margin-right: 3px
}

.goals-bar {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7)
}

.goal {
    display: flex;
    align-items: center;
    gap: 4px
}

.goal__icon {
    font-size: 10px
}

.goal__time {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600
}

[data-theme="light"] .match-hero {
    background: linear-gradient(135deg, #1a1a2e, #0f3460)
}

/* ═══ MATCH TABS ═══ */
.tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--dark-border);
    position: sticky;
    top: 48px;
    background: var(--dark-bg);
    z-index: 50
}

.tabs::-webkit-scrollbar {
    display: none
}

.tab {
    padding: 12px 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-sans);
    min-height: 44px
}

.tab:hover {
    color: var(--text-primary)
}

.tab.active {
    color: var(--red-text);
    border-bottom-color: var(--red)
}

[data-theme="light"] .tab.active {
    color: var(--red)
}

/* ═══ CARD BASE ═══ */
.card {
    background: var(--dark-card);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px
}

.card__header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--dark-border);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px
}

.card__header svg {
    width: 14px;
    height: 14px;
    stroke: var(--red);
    fill: none;
    stroke-width: 2
}

.card__body {
    padding: 16px
}

[data-theme="light"] .card {
    border: 1px solid var(--dark-border)
}

/* ═══ TAB PANELS ═══ */
.panel {
    display: none
}

.panel.active {
    display: block
}

/* ═══ WATCH HUB ═══ */
.watch-hub {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    margin-bottom: 16px;
    min-height: 420px
}

.watch-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.watch-ad {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s
}

.watch-ad:hover {
    transform: translateY(-2px)
}

.watch-ad__img {
    aspect-ratio: 300/250;
    background: var(--dark-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-muted);
    position: relative
}

.watch-ad__badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 8px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--dark-surface);
    padding: 2px 6px;
    border-radius: 2px
}

.watch-ad__body {
    padding: 10px 12px
}

.watch-ad__title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 3px
}

.watch-ad__cta {
    font-size: 11px;
    color: var(--red-text);
    font-weight: 700
}

.watch-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px
}

.channel-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s
}

.channel-chip:hover {
    border-color: var(--red);
    color: var(--red-text)
}

.channel-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green)
}

/* ═══ LINEUPS ═══ */
.lineups-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--dark-border)
}

.lineup-side {
    background: var(--dark-card);
    padding: 16px
}

.lineup-side__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px
}

.lineup-side__team {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800
}

.lineup-side__crest {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--dark-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800
}

.lineup-side__formation {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600
}

.lineup-side__coach {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px
}

.lineup-side__coach strong {
    color: var(--text-secondary)
}

.lineup-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--dark-border)
}

.lineup-player:last-child {
    border-bottom: none
}

.lineup-player__num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--dark-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0
}

.lineup-player__name {
    flex: 1;
    font-weight: 600
}

.lineup-player__pos {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.lineup-player__event {
    font-size: 10px
}

.lineup-sub {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 2px dashed var(--dark-border)
}

.lineup-sub__title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 8px
}

/* ═══ STATS ═══ */
.stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dark-border)
}

.stat-row:last-child {
    border-bottom: none
}

.stat-row__val {
    font-size: 15px;
    font-weight: 800;
    min-width: 36px;
    text-align: center
}

.stat-row__bar {
    flex: 1;
    height: 6px;
    background: var(--dark-surface);
    border-radius: 3px;
    overflow: hidden;
    display: flex
}

.stat-row__bar--home {
    justify-content: flex-end
}

.stat-row__fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease
}

.stat-row__fill--home {
    background: var(--red)
}

.stat-row__fill--away {
    background: #2563EB
}

.stat-row__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    min-width: 80px;
    text-align: center
}

/* ═══ H2H ═══ */
.h2h-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dark-border);
    align-items: center;
    font-size: 13px
}

.h2h-row:last-child {
    border-bottom: none
}

.h2h-row__home {
    text-align: right;
    font-weight: 600
}

.h2h-row__score {
    background: var(--dark-surface);
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
    min-width: 60px
}

.h2h-row__score--home-win {
    background: var(--red);
    color: #fff
}

.h2h-row__score--away-win {
    background: #2563EB;
    color: #fff
}

.h2h-row__score--draw {
    background: var(--dark-border)
}

.h2h-row__away {
    font-weight: 600
}

.h2h-row__date {
    font-size: 10px;
    color: var(--text-muted)
}

.h2h-summary {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 14px;
    border-bottom: 1px solid var(--dark-border);
    font-size: 13px
}

.h2h-summary__item {
    text-align: center
}

.h2h-summary__num {
    font-size: 22px;
    font-weight: 900;
    line-height: 1
}

.h2h-summary__num--red {
    color: var(--red-text)
}

.h2h-summary__num--blue {
    color: #2563EB
}

.h2h-summary__label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600
}

/* ═══ STANDINGS TABLE ═══ */
.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px
}

.standings-table th {
    text-align: left;
    padding: 8px 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--red)
}

.standings-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--dark-border)
}

.standings-table tr.highlight {
    background: var(--dark-surface)
}

.standings-table tr.highlight td {
    font-weight: 700
}

.standings-table .pos {
    font-weight: 800;
    min-width: 20px
}

.standings-table .pts {
    font-weight: 800;
    color: var(--red-text)
}

.standings-table .form {
    display: flex;
    gap: 3px
}

.form-dot {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    color: #fff
}

.form-dot--w {
    background: var(--green)
}

.form-dot--d {
    background: var(--yellow);
    color: #000
}

.form-dot--l {
    background: var(--red)
}

/* ═══ MATCH DAY STRIP ═══ */
.matchday-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px 0
}

.matchday-strip::-webkit-scrollbar {
    display: none
}

.matchday-game {
    flex: 0 0 200px;
    background: var(--dark-surface);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border: 1px solid var(--dark-border);
    transition: border-color 0.2s
}

.matchday-game:hover {
    border-color: var(--red)
}

.matchday-game.current {
    border-color: var(--red);
    border-width: 2px
}

.matchday-game__time {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between
}

.matchday-game__time span {
    color: var(--red-text);
    font-weight: 800
}

.matchday-game__teams {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.matchday-game__row {
    display: flex;
    justify-content: space-between;
    font-weight: 600
}

.matchday-game__row strong {
    font-weight: 800
}

/* ═══ REFEREE / INFO BAR ═══ */
.match-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 14px 16px;
    font-size: 12px;
    color: var(--text-muted)
}

.match-info-bar__item {
    display: flex;
    align-items: center;
    gap: 6px
}

.match-info-bar__item svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2
}

.match-info-bar__item strong {
    color: var(--text-primary)
}

/* ═══ QUICK LINEUP ═══ */
.quick-lineup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    background: var(--dark-card);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px
}

[data-theme="light"] .quick-lineup {
    border: 1px solid var(--dark-border)
}

.ql-side {
    padding: 14px 16px
}

.ql-side__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px
}

.ql-side__crest {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--dark-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 900;
    flex-shrink: 0
}

.ql-side__name {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.ql-side__formation {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 700;
    margin-left: auto
}

.ql-side__coach {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px
}

.ql-side__coach strong {
    color: var(--text-secondary)
}

.ql-side__coach svg {
    width: 12px;
    height: 12px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2
}

.ql-player {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 3px 0
}

.ql-player__num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dark-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0
}

.ql-player__name {
    font-weight: 600;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ql-player__event {
    font-size: 10px
}

.ql-divider {
    width: 1px;
    background: var(--dark-border)
}

.ql-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    gap: 4px
}

.ql-vs__badge {
    font-size: 9px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px
}

.ql-vs__ref {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
    max-width: 90px
}

.ql-vs__ref strong {
    color: var(--text-secondary)
}

/* ═══ KEY MOMENTS TIMELINE ═══ */
.moments {
    padding: 4px 0
}

.moment {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--dark-border);
    position: relative
}

.moment:last-child {
    border-bottom: none
}

.moment__time {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    min-width: 32px;
    text-align: right;
    padding-top: 1px
}

.moment__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0
}

.moment__icon--goal {
    background: var(--green);
    color: #fff
}

.moment__icon--yellow {
    background: var(--yellow);
    color: #000
}

.moment__icon--red {
    background: var(--red);
    color: #fff
}

.moment__icon--sub {
    background: var(--dark-surface);
    color: var(--text-muted)
}

.moment__icon--var {
    background: #8B5CF6;
    color: #fff;
    font-size: 8px;
    font-weight: 800
}

.moment__text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35
}

.moment__detail {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400
}

.moment__team {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

/* ═══ ODDS WIDGET ═══ */
.odds-bar {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--dark-card);
    border-radius: 12px
}

[data-theme="light"] .odds-bar {
    border: 1px solid var(--dark-border)
}

.odds-bar__label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap
}

.odds-bar__label svg {
    width: 12px;
    height: 12px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2
}

.odds-group {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: center
}

.odd-btn {
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    font-family: var(--font-sans);
    min-width: 70px;
    color: var(--text-primary)
}

.odd-btn:hover {
    border-color: var(--red);
    color: var(--red-text)
}

.odd-btn__team {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px
}

.odd-btn__val {
    font-size: 16px;
    font-weight: 900;
    color: var(--text-primary)
}

.odds-bar__sponsor {
    font-size: 9px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    white-space: nowrap
}

/* ═══ NEWS CARDS ═══ */
.news-related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 16px
}

.news-card {
    background: var(--dark-card);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s
}

.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12)
}

[data-theme="light"] .news-card {
    border: 1px solid var(--dark-border)
}

.news-card__img {
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative
}

.news-card__img img,
.news-card__img .placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s
}

.news-card:hover .news-card__img img,
.news-card:hover .news-card__img .placeholder-img {
    transform: scale(1.05)
}

.news-card__tag {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: var(--red);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px
}

.news-card__body {
    padding: 12px
}

.news-card__title {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.news-card__meta {
    font-size: 11px;
    color: var(--text-muted)
}

/* ═══ LIVE CHAT ═══ */
.live-chat {
    background: var(--dark-card);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 420px
}

[data-theme="light"] .live-chat {
    border: 1px solid var(--dark-border)
}

.live-chat__header {
    background: var(--red);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0
}

.live-chat__header-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px
}

.live-chat__header-info {
    flex: 1
}

.live-chat__header-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff
}

.live-chat__header-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 5px
}

.live-chat__header-dot {
    width: 6px;
    height: 6px;
    background: #4ADE80;
    border-radius: 50%;
    animation: statusPulse 1.5s ease infinite
}

.live-chat__header-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700
}

.live-chat__messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--dark-border) transparent;
    background: var(--dark-surface)
}

[data-theme="light"] .live-chat__messages {
    background: #ECE5DD
}

.live-chat__messages::-webkit-scrollbar {
    width: 4px
}

.live-chat__messages::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 4px
}

.chat-msg {
    max-width: 82%;
    padding: 7px 10px 4px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    position: relative;
    display: flex;
    gap: 8px;
    align-items: flex-start
}

@keyframes msgSlide {
    from {
        opacity: 0;
        transform: translateY(10px)
    }
}

.chat-msg--other {
    background: var(--dark-card);
    align-self: flex-start;
    border-top-left-radius: 2px
}

[data-theme="light"] .chat-msg--other {
    background: #fff
}

.chat-msg--me,
.chat-msg--user {
    background: #DCF8C6;
    color: #111;
    align-self: flex-end;
    border-top-right-radius: 2px;
    flex-direction: row-reverse
}

[data-theme="dark"] .chat-msg--me,
[data-theme="dark"] .chat-msg--user {
    background: #005C4B;
    color: #fff
}

.chat-msg__avatar {
    flex-shrink: 0
}

.chat-msg__avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover
}

.chat-msg__body {
    flex: 1;
    min-width: 0
}

.chat-msg__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px
}

.chat-msg__name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary)
}

.chat-msg__name--red {
    color: var(--red-text)
}

.chat-msg__name--green {
    color: #15803D
}

[data-theme="dark"] .chat-msg__name--green {
    color: #4ADE80
}

.chat-msg__name--blue {
    color: #2563EB
}

.chat-msg__badge {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 3px;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.4
}

.chat-msg__text {
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word
}

.chat-msg__time {
    font-size: 9px;
    color: var(--text-muted);
    text-align: right;
    margin-top: 2px
}

.chat-msg--system {
    background: rgba(204, 0, 0, 0.1);
    color: var(--red-text);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    align-self: center;
    max-width: 90%;
    border-radius: 6px;
    padding: 6px 16px
}

[data-theme="light"] .chat-msg--system {
    background: rgba(204, 0, 0, 0.08)
}

/** Typing indicator — 3 dots animados (hidden by default, .show via JS) */
.typing-indicator {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 12px 16px
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingBounce 1.4s infinite ease-in-out both
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s
}

.typing-dot:nth-child(2) {
    animation-delay: -0.16s
}

@keyframes typingBounce {

    0%,
    80%,
    100% {
        transform: scale(0.4);
        opacity: 0.4
    }

    40% {
        transform: scale(1);
        opacity: 1
    }
}

/** Widget "Para Você" — glassmorphism acima do chat */
.fb-rec-widget {
    margin-bottom: 12px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform .2s, box-shadow .2s
}

[data-theme="light"] .fb-rec-widget {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(0, 0, 0, 0.06)
}

.fb-rec-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15)
}

.fb-rec-widget__link {
    display: flex;
    gap: 12px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    align-items: center
}

.fb-rec-widget__img {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden
}

.fb-rec-widget__img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.fb-rec-widget__content {
    flex: 1;
    min-width: 0
}

.fb-rec-widget__tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--red);
    background: rgba(204, 0, 0, 0.08);
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 4px
}

[data-theme="dark"] .fb-rec-widget__tag {
    color: #ff6b6b;
    background: rgba(255, 100, 100, 0.1)
}

.fb-rec-widget__title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.fb-rec-widget__meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px
}

/** Botão expandir chat */
.live-chat__expand {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
    color: #fff;
    flex-shrink: 0
}

.live-chat__expand:hover {
    background: rgba(255, 255, 255, 0.3)
}

/** Chat fullscreen — overlay cobrindo tela inteira */
.live-chat--fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh !important;
    z-index: 9999;
    border-radius: 0;
    animation: chatExpandIn .3s ease
}

.live-chat--fullscreen .live-chat__messages {
    flex: 1
}

@keyframes chatExpandIn {
    from {
        opacity: 0;
        transform: scale(0.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

/** Botão Gerar debate — no header do chat */
.fb-gen-debate-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap
}

.fb-gen-debate-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05)
}

.fb-gen-debate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none
}

/** chat-msg--ai = mesmo layout que --other */
.chat-msg--ai {
    background: var(--dark-card);
    align-self: flex-start;
    border-top-left-radius: 2px
}

[data-theme="light"] .chat-msg--ai {
    background: #fff
}

/** Avatar como img direta no chat-msg */
img.chat-msg__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0
}

/** Typing dots — indicador de digitação */
.chat-typing {
    padding: 8px 16px;
    align-self: flex-start
}

.typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 8px 12px;
    background: var(--dark-card);
    border-radius: 12px
}

[data-theme="light"] .typing-dots {
    background: #fff
}

.typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingBounce 1.4s infinite ease-in-out both
}

.typing-dots span:nth-child(1) {
    animation-delay: -0.32s
}

.typing-dots span:nth-child(2) {
    animation-delay: -0.16s
}

.live-chat__input {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--dark-border);
    flex-shrink: 0;
    background: var(--dark-card)
}

[data-theme="light"] .live-chat__input {
    background: #F0F0F0
}

.live-chat__input input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 24px;
    border: 1px solid var(--dark-border);
    background: var(--dark-surface);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    outline: none
}

[data-theme="light"] .live-chat__input input {
    background: #fff
}

.live-chat__input input:focus {
    border-color: var(--red)
}

.live-chat__input input::placeholder {
    color: var(--text-muted)
}

.live-chat__send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--red);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s
}

.live-chat__send:hover {
    background: var(--red-dark)
}

.live-chat__send svg {
    width: 18px;
    height: 18px;
    fill: #fff;
    transform: rotate(-30deg) translateX(1px)
}

/* ═══ FOOTBALL PAGE RESPONSIVE ═══ */
@media(max-width:768px) {
    .watch-hub {
        grid-template-columns: 1fr
    }

    .lineups-grid {
        grid-template-columns: 1fr
    }

    .quick-lineup {
        grid-template-columns: 1fr;
        gap: 0
    }

    .ql-divider,
    .ql-vs {
        display: none
    }

    .news-related {
        grid-template-columns: 1fr
    }

    .odds-group {
        flex-wrap: wrap
    }

    .team__crest {
        width: 48px;
        height: 48px;
        font-size: 18px
    }

    .score {
        font-size: 36px
    }

    .h2h-row {
        font-size: 12px
    }

    .standings-table {
        font-size: 11px
    }

    .match-hero__teams {
        gap: 16px
    }

    .live-chat {
        height: 360px
    }

    .chat-msg {
        max-width: 88%;
        font-size: 12px
    }
}

/* ═══════════════════════════════════════════
   WHATSAPP POPUP WIDGET — Avatar pulsante
   Simula notificação de mensagem recebida.
   Configurável via Dabliu Config (ABA 14).
═══════════════════════════════════════════ */

/**
 * Container fixo — bottom-right da viewport.
 * z-index 140 para ficar acima do conteúdo mas abaixo de overlays (z-index 150+).
 */
.wpp-popup {
    position: fixed;
    z-index: 140;
    opacity: 0;
    transform: scale(0.3) translateY(20px);
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wpp-popup.wpp-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: all;
}

/**
 * Avatar circular com borda verde pulsante.
 * A animação simula o indicador de mensagem não lida do WhatsApp.
 */
.wpp-popup__link {
    display: block;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: visible;
    position: relative;
    cursor: pointer;
    text-decoration: none;
}

.wpp-popup__avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #25D366;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    animation: wppPulse 2s ease-in-out infinite;
    transition: transform 0.2s;
}

.wpp-popup__link:hover .wpp-popup__avatar {
    transform: scale(1.08);
}

.wpp-popup__link:active .wpp-popup__avatar {
    transform: scale(0.95);
}

/** Borda pulsante verde — simula "mensagem nova" */
@keyframes wppPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6),
            0 4px 16px rgba(37, 211, 102, 0.35);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0),
            0 4px 16px rgba(37, 211, 102, 0.35);
    }
}

/**
 * Neon verde intenso — pulsa por 3s quando o avatar aparece.
 * A classe wpp-pulse é adicionada/removida via JS.
 * Glow mais forte + scale para chamar atenção imediata.
 */
.wpp-popup.wpp-pulse .wpp-popup__avatar {
    animation: wppNeonPulse 0.6s ease-in-out 5;
}

@keyframes wppNeonPulse {

    0%,
    100% {
        box-shadow: 0 0 8px 2px rgba(37, 211, 102, 0.6),
            0 0 20px 6px rgba(37, 211, 102, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 20px 8px rgba(37, 211, 102, 0.8),
            0 0 40px 16px rgba(37, 211, 102, 0.4);
        transform: scale(1.08);
    }
}

/** Badge de notificação — bolinha vermelha "1" */
.wpp-popup__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FF3B30;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(255, 59, 48, 0.4);
    animation: wppBadgeBounce 2s ease-in-out infinite 0.5s;
}

@keyframes wppBadgeBounce {

    0%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.2);
    }

    30% {
        transform: scale(1);
    }
}

/** Badge bump — micro-animação quando o número sobe */
.wpp-popup__badge.wpp-badge--bump {
    animation: wppBadgeBump 0.3s ease-out;
}

@keyframes wppBadgeBump {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

/**
 * Balão de notificação — estilo WhatsApp.
 * Aparece à esquerda do avatar no formato de bolha de mensagem.
 * O triângulo aponta para o avatar (direita).
 */
.wpp-popup__bubble {
    position: absolute;
    right: 78px;
    bottom: 8px;
    background: #fff;
    border-radius: 10px 10px 0 10px;
    padding: 10px 14px;
    min-width: 180px;
    max-width: 240px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .08);
    opacity: 0;
    transform: scale(0.8) translateX(20px);
    transition: opacity 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 2;
}

/** Triângulo apontando para o avatar */
.wpp-popup__bubble::after {
    content: '';
    position: absolute;
    bottom: 6px;
    right: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.wpp-popup__bubble.wpp-bubble--visible {
    opacity: 1;
    transform: scale(1) translateX(0);
    pointer-events: auto;
}

.wpp-popup__bubble-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    gap: 8px;
}

.wpp-popup__bubble-name {
    font-size: 12px;
    font-weight: 800;
    color: #25D366;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wpp-popup__bubble-time {
    font-size: 10px;
    color: #999;
    flex-shrink: 0;
}

.wpp-popup__bubble-msg {
    font-size: 13px;
    color: #333;
    line-height: 1.35;
}

[data-theme="dark"] .wpp-popup__bubble {
    background: #1f2c33;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
}

[data-theme="dark"] .wpp-popup__bubble::after {
    border-left-color: #1f2c33;
}

[data-theme="dark"] .wpp-popup__bubble-msg {
    color: #e9edef;
}

[data-theme="dark"] .wpp-popup__bubble-time {
    color: #8696a0;
}

/** Mobile — balão ajustado para telas menores */
@media (max-width: 768px) {
    .wpp-popup__bubble {
        right: 68px;
        bottom: 4px;
        min-width: 160px;
        max-width: 200px;
        padding: 8px 12px;
    }

    .wpp-popup__bubble-name {
        font-size: 11px;
    }

    .wpp-popup__bubble-msg {
        font-size: 12px;
    }
}

/** Botão de fechar — X discreto */
.wpp-popup__close {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.wpp-popup:hover .wpp-popup__close {
    opacity: 1;
}

.wpp-popup__close svg {
    width: 12px;
    height: 12px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.5;
}

/** Responsivo mobile — garante mínimo de 80px do topo da barra de navegação */
@media (max-width: 768px) {

    .wpp-popup__link,
    .wpp-popup__avatar {
        width: 60px;
        height: 60px;
    }
}

/* ═══════════════════════════════════════════
   BOTÃO VOLTAR — Barra fixa pós-redirect do popup
   Exibido quando visitante vem do WhatsApp Popup (?from=wpp).
═══════════════════════════════════════════ */
.wpp-back-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 145;
    background: #075E54;
    padding: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    animation: wppBackSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wppBackSlideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.wpp-back-bar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
    min-height: 52px;
}

.wpp-back-bar__link:hover {
    background: rgba(255, 255, 255, 0.1);
}

.wpp-back-bar__link:active {
    background: rgba(255, 255, 255, 0.2);
}

.wpp-back-bar__link svg {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   SEARCH OVERLAY — Busca fullscreen com live search
   Ativado pelo botão .search-btn no header
   ═══════════════════════════════════════════════════════════ */

/** Overlay container — cobre toda a viewport */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.search-overlay.open {
    opacity: 1;
    visibility: visible;
}

/** Backdrop escuro com blur */
.search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/** Painel central — card flutuante premium */
.search-overlay__panel {
    position: relative;
    z-index: 1;
    width: 92%;
    max-width: 680px;
    background: var(--dark-card, #1a1a2e);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
    transform: translateY(-20px) scale(0.98);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.search-overlay.open .search-overlay__panel {
    transform: translateY(0) scale(1);
}

[data-theme="light"] .search-overlay__panel {
    background: #fff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/** Header com form de busca */
.search-overlay__header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px;
}

[data-theme="light"] .search-overlay__header {
    border-bottom-color: #eee;
}

.search-overlay__form {
    display: flex;
    align-items: center;
    gap: 14px;
}

.search-overlay__input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 14px 18px;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

.search-overlay__input-wrap:focus-within {
    border-color: var(--primary, #e53935);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.15), 0 4px 20px rgba(229, 57, 53, 0.1);
}

[data-theme="light"] .search-overlay__input-wrap {
    background: #f2f2f2;
    border-color: #ddd;
}

[data-theme="light"] .search-overlay__input-wrap:focus-within {
    border-color: var(--primary, #e53935);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.1), 0 4px 20px rgba(229, 57, 53, 0.06);
}

.search-overlay__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke: var(--text-muted, #888);
    transition: stroke 0.2s;
}

.search-overlay__input-wrap:focus-within .search-overlay__icon {
    stroke: var(--primary, #e53935);
}

.search-overlay__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-sans, sans-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary, #fff);
    min-width: 0;
}

.search-overlay__input::placeholder {
    color: var(--text-muted, #888);
    font-weight: 400;
}

/** Esconder o X nativo do browser */
.search-overlay__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

.search-overlay__clear {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.search-overlay__clear:hover {
    opacity: 1;
}

.search-overlay__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    opacity: 0.5;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.search-overlay__close:hover {
    opacity: 1;
}

/** Contagem de resultados */
.search-overlay__count {
    padding: 6px 20px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/** Resultados */
.search-overlay__results {
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 0 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/** Empty state */
.search-overlay__empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 8px;
}

.search-overlay__hint {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #ccc);
    margin: 0;
}

.search-overlay__hint-sub {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted, #666);
    margin: 0;
}

/** Card de resultado individual */
.search-result {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--text-primary, #fff);
    transition: background 0.15s;
    animation: searchFadeIn 0.3s ease both;
}

@keyframes searchFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-result:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .search-result:hover {
    background: #f8f8f8;
}

/** Thumbnail */
.search-result__img-wrap {
    flex-shrink: 0;
    width: 88px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--dark-surface, #2a2a2e);
}

.search-result__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.search-result__img--empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.06));
}

/** Info */
.search-result__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/** Categoria badge */
.search-result__cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--primary, #e53935);
    line-height: 1;
}

/** Título */
.search-result__title {
    font-family: var(--font-serif, serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/** Excerpt */
.search-result__excerpt {
    font-size: 12px;
    color: var(--text-muted, #888);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/** Highlight do termo buscado */
.search-highlight {
    background: rgba(255, 213, 0, 0.25);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}

[data-theme="light"] .search-highlight {
    background: rgba(255, 213, 0, 0.4);
}

/** Meta row (data + sinais sociais) */
.search-result__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 1px;
}

.search-result__date {
    font-size: 11px;
    color: var(--text-muted, #888);
}

.search-result__social {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted, #777);
}

.search-result__social span {
    display: flex;
    align-items: center;
    gap: 3px;
}

/** Skeleton loading */
.search-result--skeleton {
    pointer-events: none;
}

.search-result__img--skeleton {
    width: 88px;
    height: 60px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

[data-theme="light"] .search-result__img--skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
}

.skeleton-line {
    height: 14px;
    border-radius: 6px;
    margin-bottom: 6px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

[data-theme="light"] .skeleton-line {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
}

.skeleton-line--small {
    height: 10px;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/** Mobile */
@media (max-width: 768px) {
    .search-overlay {
        padding-top: 0;
    }

    .search-overlay__panel {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    .search-overlay__results {
        max-height: none;
        flex: 1;
    }

    .search-result__img-wrap {
        width: 72px;
        height: 52px;
    }
}


/* ═══════════════════════════════════════════
   SUPER INDICADO — Card TikTok-style na sidebar
   Minimalista com badge pulsante e animação de entrada
═══════════════════════════════════════════ */
.nb-super-card {
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--dark-card);
    border: 1px solid rgba(204, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.nb-super-card--visible {
    opacity: 1;
    transform: translateY(0);
}

.nb-super-card__badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(204, 0, 0, 0.12), rgba(204, 0, 0, 0.04));
    border-bottom: 1px solid rgba(204, 0, 0, 0.15);
}

.nb-super-card__pulse {
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
    animation: superPulse 1.5s ease-in-out infinite;
}

@keyframes superPulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.4);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 6px rgba(204, 0, 0, 0);
    }
}

.nb-super-card__badge-text {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--red);
}

.nb-super-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.nb-super-card__link:hover {
    background: rgba(255, 255, 255, 0.03);
}

.nb-super-card__img {
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
}

.nb-super-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.nb-super-card__link:hover .nb-super-card__img img {
    transform: scale(1.06);
}

.nb-super-card__tag {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 2px 7px;
    border-radius: 2px;
}

.nb-super-card__body {
    padding: 12px;
}

.nb-super-card__title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-primary);
}

.nb-super-card__meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.nb-super-card__reason {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--red);
    font-weight: 600;
}

.nb-super-card__reason-dot {
    width: 5px;
    height: 5px;
    background: var(--red);
    border-radius: 50%;
    flex-shrink: 0;
}

.nb-super-card__reactions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 0;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nb-super-card__reaction {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
    transition: color 0.2s;
}

.nb-super-card__reaction svg {
    color: var(--red);
    opacity: 0.8;
    transition: transform 0.3s;
}

.nb-super-card__link:hover .nb-super-card__reaction svg {
    transform: scale(1.2);
}

.nb-super-card__count {
    min-width: 18px;
}

.nb-super-card--visible .nb-super-card__reaction {
    animation: superStatFadeUp 0.5s ease both;
}

.nb-super-card--visible .nb-super-card__reaction:nth-child(1) {
    animation-delay: 0.6s;
}

.nb-super-card--visible .nb-super-card__reaction:nth-child(2) {
    animation-delay: 0.75s;
}

.nb-super-card--visible .nb-super-card__reaction:nth-child(3) {
    animation-delay: 0.9s;
}

@keyframes superStatFadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-theme="light"] .nb-super-card {
    background: #fff;
    border-color: rgba(204, 0, 0, 0.15);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .nb-super-card__link:hover {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .nb-super-card__title {
    color: #1a1a1a;
}

/* ═══════════════════════════════════════════
   RECOMENDAÇÃO PERSONALIZADA — "Para Você"
   Seção de posts recomendados baseados em comportamento do usuário
═══════════════════════════════════════════ */
.nb-recommendations {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 48px;
}

.nb-recommendations__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--red);
}

.nb-recommendations__title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.nb-recommendations__title-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
}

.nb-recommendations__reason {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: help;
}

.nb-recommendations__reason-dot {
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    animation: dotBlink 1.5s ease-in-out infinite;
}

.nb-recommendations__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.nb-recommendations__card {
    background: var(--dark-card);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s var(--ease), box-shadow 0.3s;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.nb-recommendations__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.nb-recommendations__card-img {
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
}

.nb-recommendations__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.nb-recommendations__card:hover .nb-recommendations__card-img img {
    transform: scale(1.06);
}

.nb-recommendations__card-tag {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
}

.nb-recommendations__card-body {
    padding: 14px;
}

.nb-recommendations__card-title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-primary);
}

.nb-recommendations__card-meta {
    font-size: 11px;
    color: var(--text-muted);
}

/**
 * Score badge — indicador visual de afinidade (debug/dev só).
 * Removível em produção ocultando com display:none.
 */
.nb-recommendations__score {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: #4ADE80;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    display: none;
    /** Oculto por padrão, ativar para debug */
}

/** Skeleton loading — pulsação enquanto carrega recomendações */
.nb-recommendations__skeleton {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.nb-recommendations__skeleton-card {
    background: var(--dark-card);
    border-radius: 8px;
    overflow: hidden;
}

.nb-recommendations__skeleton-img {
    aspect-ratio: 16/9;
    background: var(--dark-border);
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

.nb-recommendations__skeleton-body {
    padding: 14px;
}

.nb-recommendations__skeleton-line {
    height: 12px;
    background: var(--dark-border);
    border-radius: 4px;
    margin-bottom: 8px;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

.nb-recommendations__skeleton-line:nth-child(2) {
    width: 60%;
}

.nb-recommendations__skeleton-line:nth-child(3) {
    width: 40%;
}

@keyframes skeletonPulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

/** Light theme */
[data-theme="light"] .nb-recommendations__card {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
}

[data-theme="light"] .nb-recommendations__card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .nb-recommendations__card-title {
    color: #1A1A1A;
}

[data-theme="light"] .nb-recommendations__skeleton-card {
    background: #fff;
    border: 1px solid #e8e8e8;
}

[data-theme="light"] .nb-recommendations__skeleton-img {
    background: #e8e8e8;
}

[data-theme="light"] .nb-recommendations__skeleton-line {
    background: #e8e8e8;
}

@media (max-width: 1024px) {

    .nb-recommendations__grid,
    .nb-recommendations__skeleton {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .nb-recommendations__grid,
    .nb-recommendations__skeleton {
        grid-template-columns: 1fr;
    }

    .nb-recommendations__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .nb-recommendations {
        max-width: 100vw;
        overflow: hidden;
    }
}

/* ═══ FUTEBOL: Widgets + Refresh ═══ */
/** Botão de atualizar dados na página de futebol */
.fb-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 24px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
}

.fb-refresh-btn:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    transform: scale(1.03);
}

.fb-refresh-btn:hover svg {
    transform: rotate(180deg);
}

.fb-refresh-btn svg {
    transition: transform .4s ease;
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

/** Grid lado a lado para os 2 widgets (comportamento + futebol) */
.fb-widgets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.fb-widget-card {
    margin: 0;
}

@media(max-width:768px) {
    .fb-widgets-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════
   BOTTOM SHEET — "Está Bombando" (drawer deslizante estilo UOL)
   Estados: hidden → peek (aberto parcial) → expanded (tudo visível) → dismissed
═══════════════════════════════════════════ */
.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
    visibility: hidden;
}

/** Peek — parcialmente aberto, conteúdo cortado no último item */
.bottom-sheet--peek {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

/** Expanded — tudo visível */
.bottom-sheet--expanded {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

/** Dismissed — fechado pelo user */
.bottom-sheet--dismissed {
    transform: translateY(100%) !important;
    transition: transform 0.35s ease-in;
}

/** Handle — barra arrastável no topo */
.bottom-sheet__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    cursor: pointer;
    background: var(--dark-card, #1a1a2e);
    border-top: 2px solid rgba(204, 0, 0, 0.8);
    border-radius: 16px 16px 0 0;
    box-shadow:
        0 -4px 15px rgba(204, 0, 0, 0.4),
        0 -8px 30px rgba(204, 0, 0, 0.2),
        0 -2px 40px rgba(255, 50, 50, 0.15);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    animation: neonPulse 2.5s ease-in-out infinite;
}
@keyframes neonPulse {
    0%, 100% {
        box-shadow:
            0 -4px 15px rgba(204, 0, 0, 0.4),
            0 -8px 30px rgba(204, 0, 0, 0.2),
            0 -2px 40px rgba(255, 50, 50, 0.15);
    }
    50% {
        box-shadow:
            0 -4px 20px rgba(204, 0, 0, 0.6),
            0 -8px 40px rgba(204, 0, 0, 0.35),
            0 -2px 60px rgba(255, 50, 50, 0.25);
    }
}

@media (max-width: 768px) {
    .bottom-sheet--desktop-only {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════
   ZONAS DE ENGAJAMENTO — MOBILE ONLY
   No desktop, reaction-col + sidebar continuam normalmente.
   Zona 1, Zona 3 e Clara CTA só aparecem no mobile.
   Zona 2 (comentário destacado) aparece em todos os tamanhos.
═══════════════════════════════════════════════════════ */

/** Desktop: esconder zonas mobile-only */
@media (min-width: 769px) {
    .dsp-engagement-bar,
    .dsp-bottom-bar,
    .dsp-clara-cta,
    .dsp-clara-hero {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .dsp-clara-sidebar {
        display: none !important;
    }
}

/* ─── CTA CLARA — Sidebar Widget (desktop) ─── */
.dsp-clara-sidebar {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 24px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.dsp-clara-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red), #ff4444);
    border-radius: 14px 14px 0 0;
}

.dsp-clara-sidebar:hover {
    border-color: var(--red);
    box-shadow: 0 8px 24px rgba(204, 0, 0, 0.15);
    transform: translateY(-2px);
}

.dsp-clara-sidebar__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.dsp-clara-sidebar__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.dsp-clara-sidebar__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--red);
}

.dsp-clara-sidebar__online {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    background: #4ADE80;
    border-radius: 50%;
    border: 2px solid var(--dark-card);
    animation: dsp-pulse-online 2s ease-in-out infinite;
}

@keyframes dsp-pulse-online {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0); }
}

.dsp-clara-sidebar__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dsp-clara-sidebar__info strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.dsp-clara-sidebar__info span {
    font-size: 11px;
    color: #4ADE80;
    font-weight: 600;
}

.dsp-clara-sidebar__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 14px;
}

.dsp-clara-sidebar__text strong {
    color: var(--text-primary);
}

.dsp-clara-sidebar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--red), #e00);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    transition: all 0.2s;
}

.dsp-clara-sidebar:hover .dsp-clara-sidebar__btn {
    background: linear-gradient(135deg, #e00, #ff2020);
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
}


/* ─── ZONA 1: Barra de Engajamento (abaixo do título) ─── */

/* Clara hero widget — overlay sobre a imagem de destaque (mobile) */
.article-featured-img {
    position: relative;
}

.dsp-clara-hero {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 220px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 14px;
    padding: 14px;
    z-index: 5;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.dsp-clara-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red), #ff4444);
    border-radius: 14px 14px 0 0;
}

.dsp-clara-hero__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.dsp-clara-hero__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.dsp-clara-hero__avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    max-width: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--red);
}

.dsp-clara-hero__online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid #fff;
    animation: dsp-pulse-online 2s ease-in-out infinite;
}

.dsp-clara-hero__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dsp-clara-hero__info strong {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.dsp-clara-hero__info span {
    font-size: 10px;
    color: #22c55e;
    font-weight: 600;
}

.dsp-clara-hero__text {
    font-size: 12px;
    line-height: 1.4;
    color: #444;
    margin: 0 0 10px;
}

.dsp-clara-hero__text strong {
    color: #111;
}

.dsp-clara-hero__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(135deg, var(--red), #e00);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.dsp-clara-hero__btn:active {
    transform: scale(0.97);
    background: linear-gradient(135deg, #e00, #ff2020);
}
.dsp-engagement-bar {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 24px 18px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.dsp-eng-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
}

.dsp-eng-icon {
    width: 16px;
    height: 16px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

.dsp-eng-num {
    color: var(--text-secondary);
    font-weight: 700;
}

/* ─── ZONA 2: Comentário Destacado (inline) ─── */
.dsp-comment-highlight {
    margin: 28px 0;
    padding: 16px 20px;
    background: var(--dark-card);
    border-left: 3px solid var(--red);
    border-radius: 0 10px 10px 0;
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--red);
}

.dsp-comment-highlight__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--red-text);
}

.dsp-comment-highlight__icon {
    width: 14px;
    height: 14px;
    stroke: var(--red-text);
    fill: none;
    stroke-width: 2;
}

.dsp-comment-highlight__body {
    display: flex;
    gap: 12px;
}

.dsp-comment-highlight__avatar {
    flex-shrink: 0;
}

.dsp-comment-highlight__avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.dsp-comment-highlight__content {
    flex: 1;
    min-width: 0;
}

.dsp-comment-highlight__meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dsp-comment-highlight__meta strong {
    color: var(--text-primary);
    font-weight: 700;
}

.dsp-comment-highlight__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 8px;
}

.dsp-comment-highlight__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.dsp-comment-highlight__likes {
    color: var(--text-muted);
    font-weight: 600;
}

.dsp-comment-highlight__cta {
    color: var(--red-text);
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s;
}

.dsp-comment-highlight__cta:hover {
    opacity: 0.7;
}

/* ─── ZONA 3: Barra Fixa Inferior ─── */
.dsp-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--dark-bg, #0a0a0a);
    border-top: 1px solid var(--dark-border, rgba(255,255,255,0.08));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

[data-theme="light"] .dsp-bottom-bar {
    background: #fff;
    border-top-color: rgba(0,0,0,0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.dsp-bottom-bar--visible {
    transform: translateY(0);
}

.dsp-bottom-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 100px;
    border: 1px solid var(--dark-border, rgba(255,255,255,0.12));
    background: transparent;
    color: var(--text-secondary, #bbb);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.dsp-bottom-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

.dsp-bottom-btn:hover {
    background: rgba(204, 0, 0, 0.08);
    border-color: rgba(204, 0, 0, 0.3);
    color: var(--red-text);
}

.dsp-bottom-btn:active {
    transform: scale(0.95);
}

/** Like ativo */
.dsp-bottom-btn--liked,
.dsp-bottom-btn--liked:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.dsp-bottom-btn--liked svg {
    fill: #fff;
    stroke: #fff;
}

/** Share — ícone WhatsApp no mobile */
.dsp-bottom-btn--share:hover {
    border-color: #25D366;
    color: #25D366;
}

@media (max-width: 768px) {
    .dsp-bottom-btn {
        padding: 10px 14px;
        font-size: 12px;
        gap: 5px;
    }

    .dsp-bottom-btn svg {
        width: 16px;
        height: 16px;
    }

    .dsp-bottom-bar {
        gap: 6px;
    }
}

/* ─── CTA CLARA — Fim da matéria ─── */
.dsp-clara-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin: 24px 0;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s;
}

.dsp-clara-cta:hover {
    border-color: var(--red);
    box-shadow: 0 4px 16px rgba(204, 0, 0, 0.12);
    transform: translateY(-1px);
}

.dsp-clara-cta__avatar {
    flex-shrink: 0;
    position: relative;
    width: 44px;
    height: 44px;
}

.dsp-clara-cta__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--red);
}

.dsp-clara-cta__dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    background: #4ADE80;
    border-radius: 50%;
    border: 2px solid var(--dark-card);
}

.dsp-clara-cta__text {
    flex: 1;
    min-width: 0;
}

.dsp-clara-cta__text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.dsp-clara-cta__text span {
    font-size: 12px;
    color: var(--text-muted);
}

.dsp-clara-cta__arrow {
    width: 20px;
    height: 20px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.dsp-clara-cta:hover .dsp-clara-cta__arrow {
    transform: translateX(3px);
    stroke: var(--red-text);
}
.bottom-sheet__handle::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
}

/** Chevron — flipa quando expandido */
.bottom-sheet__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #888);
    transition: transform 0.3s ease, color 0.2s;
    margin-top: 8px;
}

.bottom-sheet__chevron--flipped {
    transform: rotate(180deg);
}

.bottom-sheet__handle:hover .bottom-sheet__chevron {
    color: var(--red, #cc0000);
}

/** Content — controla peek (cortado) vs expanded (completo) */
.bottom-sheet__content {
    background: var(--dark-card, #1a1a2e);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    position: relative;
}
/** Peek — CSS fallback (45vh = 45% da tela, responsivo) */
.bottom-sheet--peek .bottom-sheet__content {
    max-height: 45vh;
}
.bottom-sheet--expanded .bottom-sheet__content {
    max-height: 2000px;
}

/** Gradiente indicando que há mais conteúdo abaixo (peek state) */
.bottom-sheet--peek .bottom-sheet__content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--dark-card, #1a1a2e));
    pointer-events: none;
    z-index: 5;
}

.bottom-sheet--expanded .bottom-sheet__content::after {
    display: none;
}

/** Header — badge + close */
.bottom-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
}

.bottom-sheet__badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--red, #cc0000);
    color: #fff;
    font-family: var(--font-sans, sans-serif);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    border-radius: 4px;
    line-height: 1.2;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(204, 0, 0, 0);
    }
}

.bottom-sheet__close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #dc3545;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
}
.bottom-sheet__close svg {
    width: 22px;
    height: 22px;
}
.bottom-sheet__close:hover {
    background: #c82333;
    transform: scale(1.1);
}

/** List — matérias recomendadas */
.bottom-sheet__list {
    padding: 0 4px 12px;
}

.bottom-sheet__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    transition: background 0.2s;
}

.bottom-sheet__item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/** Thumbnail */
.bottom-sheet__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--dark-surface, #2a2a2e);
}

.bottom-sheet__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.bottom-sheet__item:hover .bottom-sheet__thumb img {
    transform: scale(1.06);
}

.bottom-sheet__thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/** ─── Featured item #1 — Design premium com glassmorphism ─── */
.bottom-sheet__featured {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 8px 8px 4px;
}

.bottom-sheet__featured-glass {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}

.bottom-sheet__featured:hover .bottom-sheet__featured-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    box-shadow: 0 4px 20px rgba(204, 0, 0, 0.12);
    transform: translateY(-1px);
}

.bottom-sheet__featured-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--dark-surface, #2a2a2e);
}

.bottom-sheet__featured-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.bottom-sheet__featured:hover .bottom-sheet__featured-thumb img {
    transform: scale(1.06);
}

.bottom-sheet__featured-body {
    flex: 1;
    min-width: 0;
}

.bottom-sheet__featured-badge-row {
    margin-bottom: 3px;
}

.bottom-sheet__featured-badge {
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, var(--red, #cc0000), #ff3d3d);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 3px;
    line-height: 1.4;
}

.bottom-sheet__featured-badge--coview {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
}

.bottom-sheet__featured-title {
    font-family: var(--font-serif, serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary, #fff);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
}

/** Social proof */
.bottom-sheet__featured-stats {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.bottom-sheet__stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted, #999);
}

.bottom-sheet__stat svg {
    color: rgba(255, 100, 100, 0.6);
}

/** Light theme — featured */
[data-theme="light"] .bottom-sheet__featured-glass {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01));
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .bottom-sheet__featured:hover .bottom-sheet__featured-glass {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02));
}

[data-theme="light"] .bottom-sheet__featured-title {
    color: #1a1a1a;
}

[data-theme="light"] .bottom-sheet__featured-thumb {
    background: #f0f0f0;
}

/** Body */
.bottom-sheet__body {
    flex: 1;
    min-width: 0;
}

.bottom-sheet__tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--red, #cc0000);
    margin-bottom: 3px;
    line-height: 1;
}

.bottom-sheet__title {
    font-family: var(--font-serif, serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary, #fff);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/** Light theme */
[data-theme="light"] .bottom-sheet__handle {
    background: #fff;
    border-top-color: rgba(204, 0, 0, 0.8);
    box-shadow:
        0 -4px 15px rgba(204, 0, 0, 0.3),
        0 -8px 30px rgba(204, 0, 0, 0.15),
        0 -2px 40px rgba(255, 50, 50, 0.1);
}

[data-theme="light"] .bottom-sheet__handle::before {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .bottom-sheet__content {
    background: #fff;
    border-top-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .bottom-sheet--peek .bottom-sheet__content::after {
    background: linear-gradient(to bottom, transparent, #fff);
}

[data-theme="light"] .bottom-sheet__close {
    background: #dc3545;
    color: #fff;
}

[data-theme="light"] .bottom-sheet__close:hover {
    background: #c82333;
}

[data-theme="light"] .bottom-sheet__item:hover {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .bottom-sheet__title {
    color: #1a1a1a;
}

[data-theme="light"] .bottom-sheet__thumb {
    background: #f0f0f0;
}

/** Mobile */
@media (max-width: 768px) {
    .bottom-sheet__thumb {
        width: 60px;
        height: 44px;
    }

    .bottom-sheet__title {
        font-size: 14px;
    }

    .bottom-sheet__item {
        padding: 8px 10px;
        gap: 10px;
    }

    .bottom-sheet__featured-thumb {
        width: 64px;
        height: 52px;
    }

    .bottom-sheet__featured-title {
        font-size: 14px;
    }

    .bottom-sheet__featured-glass {
        padding: 8px;
        gap: 10px;
    }
}

/** Device visibility — controlled via admin panel */
@media (min-width: 769px) {
    .bottom-sheet--mobile-only {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .bottom-sheet--desktop-only {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════
   SISTEMA DE COMENTÁRIOS
═══════════════════════════════════════════ */
.dsp-comments {
    max-width: 900px;
    margin: 48px auto 32px;
    padding: 0 24px;
}

.dsp-comments__header {
    margin-bottom: 20px;
}

.dsp-comments__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dsp-comments__icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--red, #cc0000);
    stroke-width: 2;
    flex-shrink: 0;
}

.dsp-comments__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary, #fff);
    margin: 0;
    line-height: 1.3;
}

.dsp-comments__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red, #cc0000);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    min-width: 26px;
    height: 26px;
    border-radius: 13px;
    padding: 0 8px;
    margin-left: 6px;
    vertical-align: middle;
}

.dsp-comments__subtitle {
    font-size: 14px;
    color: var(--text-muted, #888);
    margin: 6px 0 0;
}

/* ═══ FORM ═══ */
.dsp-comments__form-glass {
    background: rgba(30, 30, 46, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.dsp-comments__avatar-section {
    margin-bottom: 18px;
}

.dsp-comments__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.dsp-comments__avatar-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dsp-avatar-option {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--dark-surface, #252535);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dsp-avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.dsp-avatar-option:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.dsp-avatar-option.dsp-avatar--active {
    border-color: var(--red, #cc0000);
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.3);
    transform: scale(1.1);
}

.dsp-avatar-option--upload {
    flex-direction: column;
    gap: 2px;
    background: var(--dark-surface, #252535);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.dsp-avatar-option--upload svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted, #888);
}

.dsp-avatar-option--upload span {
    font-size: 8px;
    font-weight: 700;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dsp-avatar-option--upload:hover {
    border-color: var(--red, #cc0000);
    border-style: solid;
}

/* Upload preview */
.dsp-comments__upload-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.dsp-comments__upload-preview img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--red, #cc0000);
}

.dsp-comments__upload-remove {
    background: rgba(239, 83, 80, 0.2);
    color: #EF5350;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.dsp-comments__upload-remove:hover {
    background: rgba(239, 83, 80, 0.4);
}

/* Fields */
.dsp-comments__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.dsp-comments__input,
.dsp-comments__textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-primary, #fff);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.dsp-comments__input::placeholder,
.dsp-comments__textarea::placeholder {
    color: var(--text-muted, #888);
}

.dsp-comments__input:focus,
.dsp-comments__textarea:focus {
    border-color: var(--red, #cc0000);
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.15);
}

.dsp-comments__textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.dsp-comments__field {
    position: relative;
}

.dsp-comments__char-count {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 11px;
    color: var(--text-muted, #666);
}

/* Submit button */
.dsp-comments__submit {
    width: 100%;
    padding: 14px;
    background: var(--red, #cc0000);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dsp-comments__submit:hover:not(:disabled) {
    opacity: 0.9;
}

.dsp-comments__submit:active:not(:disabled) {
    transform: scale(0.98);
}

.dsp-comments__submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dsp-comments__submit-loader {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dsp-spinner {
    width: 18px;
    height: 18px;
}

/* Feedback */
.dsp-comments__feedback {
    margin-top: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    animation: dspFeedbackSlide 0.3s ease;
}

.dsp-comments__feedback--success {
    background: rgba(102, 187, 106, 0.15);
    color: #66BB6A;
    border: 1px solid rgba(102, 187, 106, 0.3);
}

.dsp-comments__feedback--error {
    background: rgba(239, 83, 80, 0.15);
    color: #EF5350;
    border: 1px solid rgba(239, 83, 80, 0.3);
}

@keyframes dspFeedbackSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══ COMMENTS LIST ═══ */
.dsp-comments__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dsp-comments__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    color: var(--text-muted, #888);
    font-size: 14px;
}

.dsp-comment {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: rgba(30, 30, 46, 0.4);
    border-radius: 12px;
    transition: background 0.2s;
    animation: dspCommentFade 0.3s ease;
}

.dsp-comment:hover {
    background: rgba(30, 30, 46, 0.6);
}

.dsp-comment--new {
    animation: dspCommentNew 0.5s ease;
    background: rgba(204, 0, 0, 0.08);
    border: 1px solid rgba(204, 0, 0, 0.2);
}

@keyframes dspCommentFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dspCommentNew {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dsp-comment__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.dsp-comment__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dsp-comment__body {
    flex: 1;
    min-width: 0;
}

.dsp-comment__meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.dsp-comment__author {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #fff);
}

.dsp-comment__time {
    font-size: 12px;
    color: var(--text-muted, #888);
}

.dsp-comment__text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary, #ccc);
    word-break: break-word;
}

.dsp-comment__actions {
    margin-top: 8px;
}

.dsp-comment__like-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 4px 10px;
    border-radius: 20px;
    cursor: pointer;
    color: var(--text-muted, #888);
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s, background 0.2s, transform 0.15s;
}

.dsp-comment__like-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: fill 0.2s, stroke 0.2s;
}

.dsp-comment__like-btn:hover {
    color: #EF5350;
    background: rgba(239, 83, 80, 0.1);
}

.dsp-comment__like-btn--liked {
    color: #EF5350;
}

.dsp-comment__like-btn--liked svg {
    fill: #EF5350;
    stroke: #EF5350;
}

.dsp-comment__like-btn--shake {
    animation: dspShake 0.4s ease;
}

@keyframes dspShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* ═══ LOAD MORE ═══ */
.dsp-comments__load-more {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-secondary, #ccc);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.dsp-comments__load-more:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .dsp-comments {
        padding: 0 16px;
        margin: 32px auto 24px;
    }

    .dsp-comments__form-glass {
        padding: 16px;
        border-radius: 12px;
    }

    .dsp-avatar-option {
        width: 38px;
        height: 38px;
    }

    .dsp-comments__title {
        font-size: 19px;
    }

    .dsp-comment {
        padding: 12px;
        gap: 10px;
    }

    .dsp-comment__avatar {
        width: 34px;
        height: 34px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   AUTHOR SIGNATURE — E-E-A-T (Google Discover)
   Texto editorial puro. Sem foto, sem box, sem ícones.
   ═══════════════════════════════════════════════════════════════════ */

.dsp-author-sig {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--dark-border);
}

.dsp-author-sig__text {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
}

.dsp-author-sig__text em {
    font-style: normal;
    font-weight: 700;
    color: var(--red-text);
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.dsp-author-sig__name {
    color: var(--text-primary);
    text-decoration: none;
    font-style: normal;
}

.dsp-author-sig__name:hover {
    color: var(--red-text);
    text-decoration: underline;
}

.dsp-author-sig__name strong {
    font-weight: 800;
}

.dsp-author-sig__more {
    color: var(--red-text);
    font-weight: 700;
    text-decoration: none;
    font-style: normal;
}

.dsp-author-sig__more:hover {
    text-decoration: underline;
}

/* ═══ Desabilitar author box do Rank Math ═══ */
.rank-math-author-box,
.rk-author-box {
    display: none !important;
}