/**
 * NEXUS GAMERS - Cyber-Refined Custom Theme & Utilities
 * High-performance styling, glassmorphism & typography system
 */

:root {
    --color-bg-deep: #0D0D0D;
    --color-surface: #131313;
    --color-on-surface: #e5e2e1;
    --color-on-surface-variant: #e0bdc9;
    --color-primary: #ffb0cf;
    --color-on-primary: #63003b;
    --color-secondary: #d3fbff;
    --color-tertiary: #d1bcff;
    --color-glass: rgba(255, 255, 255, 0.05);
    --border-glow: rgba(232, 30, 147, 0.3);

    /* Safe Area Inset Variables for Native Smart Devices */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

/* Base Body Styles & Mobile Native Adjustments */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg-deep);
    color: var(--color-on-surface);
    overflow-x: hidden;
    font-family: 'Hanken Grotesk', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

/* Em dispositivos móveis, adiciona espaço inferior para a barra dock nativa */
@media (max-width: 767px) {
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}

/* Elimina atraso de toque de 300ms em elementos interativos */
a, button, input, select, textarea, [role="button"] {
    touch-action: manipulation;
}

/* Image Optimization & Responsiveness */
img {
    max-width: 100%;
    height: auto;
}

.article-content img, #editor-container img, .prose img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 1rem;
    margin: 1.5rem auto;
    display: block;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    object-fit: cover;
}

/* Cyber Ambient Background Glow */
.bg-bloom {
    background: radial-gradient(circle at 50% 50%, rgba(255, 176, 207, 0.05) 0%, transparent 60%);
}

/* Cyber-Refined Glassmorphic Cards */
.glass-card {
    background-color: var(--color-glass);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--border-glow);
}

/* Menus Suspensos Escuros com Alto Contraste (Categorias & Central Gamer) */
.dropdown-menu-dark {
    background-color: #121214 !important;
    background: rgba(18, 18, 20, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.8) !important;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #ffb0cf 0%, #d1bcff 100%);
    color: #63003b;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(255, 176, 207, 0.4);
}

.btn-ghost {
    border: 1px solid var(--border-glow);
    color: var(--color-primary);
    font-family: 'JetBrains Mono', monospace;
    background: transparent;
    transition: all 0.3s ease;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--color-primary);
}

/* Divider */
.glow-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 30, 147, 0.3), transparent);
    margin: 80px 0;
}

.text-shadow-hero {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
}

/* ------------------------------------------------------------- */
/* Modo Leitura Avançado (Reader View Controls)                  */
/* ------------------------------------------------------------- */
.reader-theme-oled {
    background-color: #000000 !important;
    color: #f1f1f1 !important;
}

.reader-theme-oled .glass-card {
    background-color: #0a0a0a !important;
    border-color: #222222 !important;
}

.reader-theme-sepia {
    background-color: #1a1612 !important;
    color: #f4ebd9 !important;
}

.reader-theme-sepia .article-content,
.reader-theme-sepia .article-content p {
    color: #e6dac3 !important;
}

.reader-theme-sepia .glass-card {
    background-color: #25201a !important;
    border-color: #3d352b !important;
}

/* Font Size Modifiers */
.font-size-sm .article-content { font-size: 0.95rem; line-height: 1.7; }
.font-size-md .article-content { font-size: 1.125rem; line-height: 1.8; }
.font-size-lg .article-content { font-size: 1.25rem; line-height: 1.85; }
.font-size-xl .article-content { font-size: 1.4rem; line-height: 1.9; }

/* Table of Contents (Sumário Dinâmico) */
.toc-container {
    border-left: 3px solid #ffb0cf;
    transition: all 0.2s ease;
}

.toc-link {
    transition: color 0.15s ease, transform 0.15s ease;
}

.toc-link:hover {
    color: #ffb0cf;
    transform: translateX(4px);
}

/* Spotlight Command Palette (Ctrl+K) */
.spotlight-modal {
    animation: spotlightFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes spotlightFadeIn {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Scrollbar Customizada Cyberpunk */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 4px;
}

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

/* ------------------------------------------------------------- */
/* Utilitários Mobile Avançados (Native Feel iOS & Android)      */
/* ------------------------------------------------------------- */

/* Classes Utilitárias de Safe Area para Smartphones (Notch / Dynamic Island) */
.pt-safe {
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
}
.pb-safe {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
}
.pl-safe {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
}
.pr-safe {
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
}

/* Evita que títulos ou palavras longas estourem a tela em celulares de 320px */
h1, h2, h3, h4, h5, h6, .break-words-mobile {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Barra Inferior Flutuante Cyberpunk (Dock Bar Cápsula Mobile & PWA) */
.mobile-dock-bar,
.mobile-dock-wrapper {
    position: fixed;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    left: 10px;
    right: 10px;
    margin: 0 auto;
    max-width: 480px;
    z-index: 90;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    will-change: transform, opacity;
    user-select: none;
    -webkit-user-select: none;
}

.mobile-dock-hidden {
    transform: translateY(calc(100% + 28px + env(safe-area-inset-bottom, 0px))) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.mobile-dock-pill {
    background: rgba(13, 13, 16, 0.88);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.85),
                0 0 25px -5px rgba(255, 67, 167, 0.15),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
}

/* Micro Equalizador Animado de Som no Dock Mobile */
@keyframes dockWave {
    0%, 100% { height: 4px; }
    50% { height: 13px; }
}
.dock-equalizer-bar {
    width: 2.5px;
    background: #00eefc;
    border-radius: 9999px;
    animation: dockWave 0.75s ease-in-out infinite;
}
.dock-equalizer-bar:nth-child(1) { animation-delay: 0.05s; }
.dock-equalizer-bar:nth-child(2) { animation-delay: 0.25s; }
.dock-equalizer-bar:nth-child(3) { animation-delay: 0.15s; }
.dock-equalizer-bar:nth-child(4) { animation-delay: 0.35s; }

/* Efeito de Destaque Neon ao Pular para um Título/Destaque via Sumário */
.heading-jump-highlight {
    animation: headingPulse 2s ease-out;
    border-left: 3px solid #00eefc !important;
    padding-left: 10px !important;
    border-radius: 4px;
    transition: all 0.3s ease;
}
@keyframes headingPulse {
    0% {
        background-color: rgba(0, 238, 252, 0.25);
        color: #00eefc !important;
    }
    100% {
        background-color: transparent;
    }
}

/* Posicionamento de Banners e Barras Flutuantes Acima da Dock Bar */
@media (max-width: 767px) {
    #pwaInstallBanner {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #dailyQuestsFloatingBtn {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .scroll-progress-widget {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        right: 14px !important;
    }
}

/* Quando o PWA estiver instalado e rodando em modo standalone */
.pwa-standalone .pwa-install-btn,
.pwa-standalone #pwaInstallBanner {
    display: none !important;
}

/* Esconder barra de rolagem mantendo funcionalidade */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Trilha Horizontal Deslizante de Chips (Garantia de Scroll Touch Fluido) */
.horizontal-chips-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: 4px;
    cursor: grab;
}

.horizontal-chips-track:active {
    cursor: grabbing;
}

.horizontal-chip-item {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    touch-action: pan-x pan-y !important;
    user-select: none;
    -webkit-user-select: none;
}

/* Bottom Sheet Deslizante Mobile */
.bottom-sheet-backdrop {
    animation: fadeInBackdrop 0.25s ease-out forwards;
}

.bottom-sheet-panel {
    animation: slideUpBottomSheet 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}

@keyframes fadeInBackdrop {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUpBottomSheet {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Indicador de Pull-to-Refresh com suporte a Safe-Area */
#pullToRefreshIndicator {
    position: fixed;
    top: max(10px, env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ptr-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 176, 207, 0.2);
    border-top-color: #ffb0cf;
    border-radius: 50%;
    animation: ptrSpin 0.8s linear infinite;
}

@keyframes ptrSpin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------- */
/* Cyber-Refined VIP Aura & Neon Effects (DESIGN.md)             */
/* ------------------------------------------------------------- */
.vip-gold-glow {
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.35), inset 0 0 15px rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.6) !important;
}

.vip-card-highlight {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(20, 20, 20, 0.95) 100%);
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.vip-card-legendary {
    background: linear-gradient(135deg, rgba(255, 67, 167, 0.15) 0%, rgba(161, 120, 255, 0.15) 50%, rgba(13, 13, 13, 0.95) 100%);
    border: 1px solid rgba(255, 176, 207, 0.5);
    box-shadow: 0 0 35px rgba(255, 67, 167, 0.25);
}

.cyber-neon-cyan {
    box-shadow: 0 0 20px rgba(0, 238, 252, 0.3);
    border-color: rgba(0, 238, 252, 0.5) !important;
}

.pulse-cyber-glow {
    animation: pulseGlow 2.5s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.3);
        border-color: rgba(251, 191, 36, 0.5);
    }
    50% {
        box-shadow: 0 0 35px rgba(251, 191, 36, 0.65), 0 0 10px rgba(255, 176, 207, 0.4);
        border-color: rgba(251, 191, 36, 0.9);
    }
}

.deal-discount-badge {
    background: linear-gradient(135deg, #ff43a7 0%, #ff0055 100%);
    box-shadow: 0 0 12px rgba(255, 67, 167, 0.5);
}

.tag-cyber {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
}

.btn-cyber-primary {
    background: linear-gradient(135deg, #ffb0cf 0%, #ff43a7 50%, #a178ff 100%);
    color: #230015;
    font-weight: 800;
    letter-spacing: 0.05em;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(255, 67, 167, 0.35);
}

.btn-cyber-primary:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 30px rgba(255, 67, 167, 0.55);
}

.btn-cyber-primary:active {
    transform: translateY(0) scale(0.98);
}

/* ============================================================= */
/* ARTIGO: ESTILIZAÇÃO COMPLETA DE CONTEÚDO RICO & QUILL EDITOR   */
/* ============================================================= */

/* 1. Negrito, Itálico, Sublinhado e Riscado */
.article-content strong,
.article-content b,
#prevContent strong,
#prevContent b,
#prevMobContent strong,
#prevMobContent b {
    font-weight: 700 !important;
    color: #ffffff !important;
}

.article-content em,
.article-content i,
#prevContent em,
#prevContent i,
#prevMobContent em,
#prevMobContent i {
    font-style: italic !important;
}

.article-content u,
#prevContent u,
#prevMobContent u {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.article-content s,
.article-content strike,
.article-content del,
#prevContent s,
#prevContent strike,
#prevContent del,
#prevMobContent s,
#prevMobContent strike,
#prevMobContent del {
    text-decoration: line-through !important;
    opacity: 0.8 !important;
}

/* 2. Listas Não Ordenadas (Bullets / Pontos) */
.article-content ul,
#prevContent ul,
#prevMobContent ul {
    list-style-type: disc !important;
    padding-left: 1.75rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.article-content ul > li,
#prevContent ul > li,
#prevMobContent ul > li {
    list-style-type: disc !important;
    display: list-item !important;
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.75 !important;
}

.article-content ul > li::marker,
#prevContent ul > li::marker,
#prevMobContent ul > li::marker {
    color: #ffb0cf !important;
}

/* Sub-listas */
.article-content ul ul,
#prevContent ul ul,
#prevMobContent ul ul {
    list-style-type: circle !important;
    padding-left: 1.5rem !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}
.article-content ul ul > li,
#prevContent ul ul > li,
#prevMobContent ul > li {
    list-style-type: circle !important;
}

.article-content ul ul ul,
#prevContent ul ul ul,
#prevMobContent ul ul ul {
    list-style-type: square !important;
    padding-left: 1.5rem !important;
}
.article-content ul ul ul > li,
#prevContent ul ul ul > li,
#prevMobContent ul ul ul > li {
    list-style-type: square !important;
}

/* 3. Listas Ordenadas (Numéricas) */
.article-content ol,
#prevContent ol,
#prevMobContent ol {
    list-style-type: decimal !important;
    padding-left: 1.75rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.article-content ol > li,
#prevContent ol > li,
#prevMobContent ol > li {
    list-style-type: decimal !important;
    display: list-item !important;
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.75 !important;
}

.article-content ol > li::marker,
#prevContent ol > li::marker,
#prevMobContent ol > li::marker {
    color: #ffb0cf !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
}

/* 4. Suporte Específico para Listas do Quill.js (data-list="bullet" / data-list="ordered") */
.article-content li[data-list="bullet"],
#prevContent li[data-list="bullet"],
#prevMobContent li[data-list="bullet"] {
    list-style-type: none !important;
    position: relative !important;
    padding-left: 1.5rem !important;
    display: block !important;
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.75 !important;
}

.article-content li[data-list="bullet"]::before,
#prevContent li[data-list="bullet"]::before,
#prevMobContent li[data-list="bullet"]::before {
    content: "•" !important;
    position: absolute !important;
    left: 0.25rem !important;
    top: -0.05em !important;
    color: #ffb0cf !important;
    font-size: 1.35em !important;
    line-height: 1.5 !important;
    font-weight: bold !important;
}

.article-content ol,
#prevContent ol,
#prevMobContent ol {
    counter-reset: ql-counter-0;
}

.article-content li[data-list="ordered"],
#prevContent li[data-list="ordered"],
#prevMobContent li[data-list="ordered"] {
    list-style-type: none !important;
    position: relative !important;
    padding-left: 1.75rem !important;
    display: block !important;
    counter-increment: ql-counter-0;
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.75 !important;
}

.article-content li[data-list="ordered"]::before,
#prevContent li[data-list="ordered"]::before,
#prevMobContent li[data-list="ordered"]::before {
    content: counter(ql-counter-0, decimal) "." !important;
    position: absolute !important;
    left: 0 !important;
    color: #ffb0cf !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    font-size: 0.95em !important;
}

/* Espaçamento entre listas consecutivas */
.article-content ol + ol,
.article-content ul + ul,
.article-content ol + ul,
.article-content ul + ol {
    margin-top: 0.25rem !important;
}

/* Oculta marcador de controle interno do Quill (.ql-ui) */
.article-content .ql-ui,
#prevContent .ql-ui,
#prevMobContent .ql-ui {
    display: none !important;
}

/* Indentação Quill (.ql-indent-1 até .ql-indent-8) */
.article-content .ql-indent-1, #prevContent .ql-indent-1, #prevMobContent .ql-indent-1 { padding-left: 3rem !important; }
.article-content .ql-indent-2, #prevContent .ql-indent-2, #prevMobContent .ql-indent-2 { padding-left: 4.5rem !important; }
.article-content .ql-indent-3, #prevContent .ql-indent-3, #prevMobContent .ql-indent-3 { padding-left: 6rem !important; }
.article-content .ql-indent-4, #prevContent .ql-indent-4, #prevMobContent .ql-indent-4 { padding-left: 7.5rem !important; }

/* 5. Títulos Internos (H1, H2, H3, H4) */
.article-content h1, #prevContent h1, #prevMobContent h1 {
    font-family: 'Sora', sans-serif !important;
    font-size: 1.875rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.25 !important;
}

.article-content h2, #prevContent h2, #prevMobContent h2 {
    font-family: 'Sora', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-top: 2.25rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.35 !important;
    border-left: 4px solid #ffb0cf;
    padding-left: 0.75rem;
}

.article-content h3, #prevContent h3, #prevMobContent h3 {
    font-family: 'Sora', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #ffb0cf !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.4 !important;
}

.article-content h4, .article-content h5, .article-content h6,
#prevContent h4, #prevContent h5, #prevContent h6,
#prevMobContent h4, #prevMobContent h5, #prevMobContent h6 {
    font-family: 'Sora', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #e5e2e1 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* 6. Parágrafos */
.article-content p, #prevContent p, #prevMobContent p {
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.8;
}

/* 7. Citações (Blockquotes) */
.article-content blockquote, #prevContent blockquote, #prevMobContent blockquote {
    border-left: 4px solid #ffb0cf !important;
    background: rgba(255, 176, 207, 0.06) !important;
    padding: 1.25rem 1.5rem !important;
    margin: 1.5rem 0 !important;
    border-radius: 0 1rem 1rem 0 !important;
    font-style: italic !important;
    color: #ffd9e5 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* 8. Código e Blocos de Código */
.article-content code, #prevContent code, #prevMobContent code {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #d3fbff !important;
    font-family: 'JetBrains Mono', monospace !important;
    padding: 0.2rem 0.45rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.9em !important;
}

.article-content pre, .article-content pre.ql-syntax,
#prevContent pre, #prevContent pre.ql-syntax,
#prevMobContent pre, #prevMobContent pre.ql-syntax {
    background: #141416 !important;
    color: #e5e2e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem 1.5rem !important;
    margin: 1.5rem 0 !important;
    overflow-x: auto !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

/* 9. Links */
.article-content a, #prevContent a, #prevMobContent a {
    color: #d3fbff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    transition: color 0.2s ease !important;
}
.article-content a:hover, #prevContent a:hover, #prevMobContent a:hover {
    color: #ffb0cf !important;
}

/* 10. Alinhamento Quill */
.article-content .ql-align-center, #prevContent .ql-align-center, #prevMobContent .ql-align-center { text-align: center !important; }
.article-content .ql-align-right, #prevContent .ql-align-right, #prevMobContent .ql-align-right { text-align: right !important; }
.article-content .ql-align-justify, #prevContent .ql-align-justify, #prevMobContent .ql-align-justify { text-align: justify !important; }

/* 11. Tamanhos Quill */
.article-content .ql-size-small, #prevContent .ql-size-small, #prevMobContent .ql-size-small { font-size: 0.85em !important; }
.article-content .ql-size-large, #prevContent .ql-size-large, #prevMobContent .ql-size-large { font-size: 1.35em !important; font-weight: 600 !important; }
.article-content .ql-size-huge, #prevContent .ql-size-huge, #prevMobContent .ql-size-huge { font-size: 1.85em !important; font-weight: 700 !important; }

/* 12. Vídeos e Embeds Quill */
.article-content iframe.ql-video, .article-content .ql-video,
#prevContent iframe.ql-video, #prevContent .ql-video,
#prevMobContent iframe.ql-video, #prevMobContent .ql-video {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 1.5rem auto !important;
}

/* 13. Divisores Horizontais */
.article-content hr, #prevContent hr, #prevMobContent hr {
    border: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 176, 207, 0.3), transparent) !important;
    margin: 2rem 0 !important;
}

/* 14. Suporte aos Temas de Leitura (Sepia / OLED) */
.reader-theme-sepia .article-content strong,
.reader-theme-sepia .article-content b {
    color: #fff4e0 !important;
}
.reader-theme-sepia .article-content ul > li::marker,
.reader-theme-sepia .article-content ol > li::marker,
.reader-theme-sepia .article-content li[data-list="bullet"]::before,
.reader-theme-sepia .article-content li[data-list="ordered"]::before {
    color: #d4a373 !important;
}
.reader-theme-sepia .article-content h2 {
    border-left-color: #d4a373 !important;
    color: #fff4e0 !important;
}
.reader-theme-sepia .article-content h3 {
    color: #d4a373 !important;
}
.reader-theme-sepia .article-content blockquote {
    border-left-color: #d4a373 !important;
    color: #eeddc5 !important;
    background: rgba(212, 163, 115, 0.1) !important;
}

.reader-theme-oled .article-content strong,
.reader-theme-oled .article-content b {
    color: #ffffff !important;
}

/* ============================================================= */
/* 📱 15. Giroscópio Mobile 3D (Tags, Chips & Botões Gamer)      */
/* ============================================================= */

@media (hover: none) and (pointer: coarse) {
    /* Tags, chips de categorias e botões gamer com efeito 3D reativo */
    .gyro-ready {
        transform: perspective(600px) rotateX(var(--gyro-tilt-x, 0deg)) rotateY(var(--gyro-tilt-y, 0deg));
        transition: transform 0.12s cubic-bezier(0.25, 1, 0.5, 1);
        transform-style: preserve-3d;
        position: relative;
    }

    /* Feixe de reflexo holográfico dinâmico (glare sheen) */
    .gyro-ready::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: radial-gradient(
            circle 90px at var(--gyro-glare-x, 50%) var(--gyro-glare-y, 50%),
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.10) 40%,
            transparent 75%
        );
        mix-blend-mode: overlay;
        opacity: 0.9;
        transition: opacity 0.25s ease;
    }

    /* Imagens dentro dos artigos com Giroscópio 3D (Efeito Janela de Profundidade & Brilho) */
    .gyro-image-wrap,
    .article-hero-figure {
        transform: perspective(900px) rotateX(calc(var(--gyro-tilt-x, 0deg) * 0.75)) rotateY(calc(var(--gyro-tilt-y, 0deg) * 0.75));
        transition: transform 0.12s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.12s ease-out;
        transform-style: preserve-3d;
        position: relative;
        overflow: hidden;
        border-radius: 1rem;
        box-shadow: calc(var(--gyro-shadow-x, 0px) * 1.5) calc(var(--gyro-shadow-y, 0px) * 1.5 + 10px) 30px -5px rgba(0, 0, 0, 0.65), 0 0 25px rgba(255, 176, 207, 0.08);
    }

    /* Imagem interna desliza na direção oposta ao celular, criando paralaxe de profundidade física */
    .gyro-image-wrap img,
    .article-hero-figure img {
        transform: scale(1.06) translate3d(calc(var(--gyro-shadow-x, 0px) * -1.2), calc(var(--gyro-shadow-y, 0px) * -1.2), 0);
        transition: transform 0.12s cubic-bezier(0.25, 1, 0.5, 1);
        will-change: transform;
    }

    /* Brilho especular holográfico sobre as imagens nas matérias */
    .gyro-image-wrap::after,
    .article-hero-figure::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: radial-gradient(
            circle 180px at var(--gyro-glare-x, 50%) var(--gyro-glare-y, 50%),
            rgba(255, 255, 255, 0.26) 0%,
            rgba(255, 255, 255, 0.08) 42%,
            transparent 72%
        );
        mix-blend-mode: overlay;
        opacity: 0.85;
        transition: opacity 0.3s ease;
    }
}

/* ============================================================= */
/* 🖥️ 16. Parallax Desktop (Home Page & Multi-Layer Depth)       */
/* ============================================================= */

@media (min-width: 1024px) and (hover: hover) {
    .hero-parallax-container {
        perspective: 1200px;
        transform-style: preserve-3d;
    }

    .hero-parallax-bg {
        will-change: transform;
        transition: transform 0.12s cubic-bezier(0.2, 0.9, 0.3, 1);
    }

    .hero-parallax-content {
        will-change: transform;
        transform-style: preserve-3d;
        transition: transform 0.12s cubic-bezier(0.2, 0.9, 0.3, 1);
    }

    /* Cards e Imagens interativos com profundidade 3D ao passar o mouse */
    [data-parallax-card="true"],
    .poll-card,
    .gyro-image-wrap,
    .article-hero-figure {
        transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.25s ease;
        will-change: transform;
    }

    [data-parallax-card="true"]:hover,
    .poll-card:hover,
    .gyro-image-wrap:hover,
    .article-hero-figure:hover {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 176, 207, 0.14);
    }
}

/* Orbes de iluminação ambiental cyberpunk de fundo (Parallax Scroll) */
.parallax-orb-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.parallax-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    will-change: transform;
    opacity: 0.55;
    transition: transform 0.1s ease-out;
}

.parallax-orb-1 {
    width: 520px;
    height: 520px;
    top: 40px;
    right: -120px;
    background: radial-gradient(circle, rgba(232, 30, 147, 0.25) 0%, rgba(209, 188, 255, 0.08) 55%, transparent 80%);
}

.parallax-orb-2 {
    width: 460px;
    height: 460px;
    top: 480px;
    left: -140px;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.18) 0%, rgba(56, 189, 248, 0.08) 55%, transparent 80%);
}

/* ============================================================= */
/* 🌈 17. Cartas e Insígnias Holográficas (Foil / Arco-íris)     */
/* ============================================================= */

.holo-card,
.holo-badge {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.25s ease;
    will-change: transform;
}

.holo-card {
    border-radius: 1.5rem;
    overflow: hidden;
}

.holo-badge {
    border-radius: 1rem;
    overflow: hidden;
}

/* Garante que conteúdo interno fique acima da camada de foil */
.holo-card > *,
.holo-badge > * {
    position: relative;
    z-index: 3;
}

/* 1. Camada de Refração Cromática Foil (Arco-Íris / Iridescente) */
.holo-card::before,
.holo-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.04) 0px,
            rgba(255, 255, 255, 0.04) 2px,
            transparent 2px,
            transparent 6px
        ),
        linear-gradient(
            calc(var(--gyro-glare-angle, 125deg) + var(--gyro-tilt-y, 0deg) * 3.5),
            rgba(255, 0, 128, 0.0) 0%,
            rgba(255, 0, 128, 0.32) 16%,
            rgba(255, 140, 0, 0.35) 32%,
            rgba(255, 240, 0, 0.38) 48%,
            rgba(0, 255, 150, 0.35) 64%,
            rgba(0, 210, 255, 0.38) 80%,
            rgba(190, 0, 255, 0.35) 92%,
            rgba(255, 0, 128, 0.0) 100%
        );
    background-size: 200% 200%;
    background-position: var(--gyro-glare-x, 50%) var(--gyro-glare-y, 50%);
    mix-blend-mode: color-dodge;
    opacity: 0.55;
    transition: opacity 0.3s ease, background-position 0.1s ease-out;
}

/* 2. Camada de Brilho Especular Spot (Reflexo de Luz Direcional) */
.holo-card::after,
.holo-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(
        circle 240px at var(--gyro-glare-x, 50%) var(--gyro-glare-y, 50%),
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.15) 30%,
        rgba(255, 255, 255, 0.02) 60%,
        transparent 75%
    );
    mix-blend-mode: overlay;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

/* Variação mais compacta para badges e miniaturas */
.holo-badge::after {
    background: radial-gradient(
        circle 120px at var(--gyro-glare-x, 50%) var(--gyro-glare-y, 50%),
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.20) 35%,
        transparent 70%
    );
}

/* Comportamento no Mobile com Giroscópio Ativo */
@media (hover: none) and (pointer: coarse) {
    .holo-card {
        transform: perspective(900px) rotateX(calc(var(--gyro-tilt-x, 0deg) * 1.15)) rotateY(calc(var(--gyro-tilt-y, 0deg) * 1.15));
        box-shadow: calc(var(--gyro-shadow-x, 0px) * 2) calc(var(--gyro-shadow-y, 0px) * 2 + 10px) 30px -5px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 180, 230, 0.16);
    }

    .holo-badge {
        transform: perspective(600px) rotateX(calc(var(--gyro-tilt-x, 0deg) * 0.9)) rotateY(calc(var(--gyro-tilt-y, 0deg) * 0.9));
    }
}

/* Comportamento no Desktop com Mouse Hover */
@media (min-width: 1024px) and (hover: hover) {
    .holo-card:hover {
        box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 105, 180, 0.3), 0 0 15px rgba(0, 229, 255, 0.2);
    }

    .holo-card:hover::before,
    .holo-badge:hover::before {
        opacity: 0.85;
    }

    .holo-card:hover::after,
    .holo-badge:hover::after {
        opacity: 1;
    }
}

/* ============================================================= */
/* 🌟 18. Modern UI/UX Architecture (2026 Cyber-Refined Upgrades) */
/* ============================================================= */

/* 1. Skip-to-content Acessibilidade (WCAG 2.2) */
.skip-to-content {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 99999;
    background: linear-gradient(135deg, #ffb0cf 0%, #d1bcff 100%);
    color: #3d0023;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    padding: 10px 18px;
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 176, 207, 0.5);
    text-decoration: none;
    transition: top 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.skip-to-content:focus {
    top: 20px;
    outline: 2px solid #ffffff;
}

/* 2. Accessible Glow Focus Rings (:focus-visible) */
:focus-visible {
    outline: 2px solid #00eefc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 12px rgba(0, 238, 252, 0.65) !important;
}

/* 3. Spotlight Cards (Luminous cursor tracking in border & surface) */
.spotlight-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: border-color 0.3s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.spotlight-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        480px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
        rgba(255, 176, 207, 0.10),
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.spotlight-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
        320px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
        rgba(255, 176, 207, 0.65),
        rgba(0, 238, 252, 0.2) 40%,
        transparent 75%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.spotlight-card:hover::before,
.spotlight-card:hover::after {
    opacity: 1;
}

.spotlight-card > * {
    position: relative;
    z-index: 3;
}

/* 4. Border Beam (Feixe Neon Rotativo de Borda para Destaques) */
.border-beam-card {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    padding: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.border-beam-card::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent 0deg, transparent 75deg, #ff43a7 90deg, #00eefc 100deg, transparent 115deg, transparent 360deg);
    animation: borderBeamRotate 5s linear infinite;
    z-index: 0;
    pointer-events: none;
}

.border-beam-inner {
    position: relative;
    z-index: 1;
    border-radius: calc(1.5rem - 1px);
    background: #0f0f10;
    width: 100%;
    height: 100%;
}

@keyframes borderBeamRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 5. Barra Linear de Progresso de Leitura */
.reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #ff43a7, #d1bcff, #00eefc);
    box-shadow: 0 0 12px rgba(255, 67, 167, 0.8), 0 0 6px rgba(0, 238, 252, 0.5);
    z-index: 9999;
    transition: width 0.08s ease-out;
    pointer-events: none;
}

/* 6. Botão Flutuante Circular com Anel SVG de Progresso & Voltar ao Topo */
.scroll-progress-widget {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 90;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(18, 18, 20, 0.90);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px) scale(0.85);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    color: #e5e2e1;
}

@media (max-width: 767px) {
    .scroll-progress-widget {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        right: 18px;
        width: 44px;
        height: 44px;
    }
}

.scroll-progress-widget.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.scroll-progress-widget:hover {
    transform: translateY(-4px) scale(1.08);
    border-color: rgba(255, 176, 207, 0.6);
    color: #ffb0cf;
    box-shadow: 0 14px 40px rgba(255, 67, 167, 0.35);
}

.scroll-progress-widget:active {
    transform: scale(0.95);
}

.scroll-progress-svg {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}

.scroll-progress-circle-bg {
    stroke: rgba(255, 255, 255, 0.08);
}

.scroll-progress-circle-bar {
    stroke: #ffb0cf;
    stroke-dasharray: 138;
    stroke-dashoffset: 138;
    transition: stroke-dashoffset 0.1s ease-out;
}

/* 7. ScrollSpy TOC Link Ativo com Transição Neon */
.toc-link {
    display: block;
    position: relative;
    padding-left: 0.75rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.toc-link.is-active {
    color: #ffb0cf !important;
    font-weight: 700 !important;
    transform: translateX(4px);
    text-shadow: 0 0 10px rgba(255, 176, 207, 0.35);
}

.toc-link.is-active::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 100%;
    background: #ffb0cf;
    box-shadow: 0 0 8px #ffb0cf;
    border-radius: 2px;
}

/* 8. Modern Reader Toolbar (Barra de Leitura Flutuante) */
.reader-toolbar {
    background: rgba(18, 18, 20, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75), 0 0 25px rgba(255, 176, 207, 0.12);
    border-radius: 9999px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reader-toolbar-btn {
    transition: all 0.2s ease;
    border-radius: 9999px;
    color: #e5e2e1;
}

.reader-toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffb0cf;
    transform: scale(1.08);
}

.reader-toolbar-btn:active {
    transform: scale(0.92);
}

.reader-toolbar-btn.is-active {
    background: rgba(255, 176, 207, 0.2);
    color: #ffb0cf;
    box-shadow: 0 0 10px rgba(255, 176, 207, 0.35);
}

/* 9. Partículas de Emojis e Celebração XP */
.floating-reaction-particle {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    font-size: 1.5rem;
    user-select: none;
    animation: particleFloatUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes particleFloatUp {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate3d(var(--drift-x, 0px), -60px, 0) scale(1.35) rotate(var(--rot, 12deg));
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift-x, 0px), -120px, 0) scale(0.8) rotate(var(--rot, 24deg));
    }
}

.xp-burst-particle {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 0.85rem;
    color: #ffb0cf;
    text-shadow: 0 0 10px rgba(255, 67, 167, 0.8);
    background: rgba(255, 67, 167, 0.15);
    border: 1px solid rgba(255, 176, 207, 0.4);
    padding: 3px 8px;
    border-radius: 9999px;
    animation: xpBurstFloat 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes xpBurstFloat {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translate3d(0, -35px, 0) scale(1.15);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, -60px, 0) scale(0.9);
    }
}

/* 10. Live Ticker / Breaking News Marquee */
.live-ticker-wrap {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.live-ticker-track {
    display: inline-flex;
    white-space: nowrap;
    animation: tickerRun 38s linear infinite;
}

.live-ticker-track:hover {
    animation-play-state: paused;
}

@keyframes tickerRun {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* 11. Skeleton Shimmer Loading Tokens */
.skeleton-shimmer {
    position: relative;
    overflow: hidden;
    background: #191818;
    border-radius: 0.75rem;
}

.skeleton-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.07),
        transparent
    );
    animation: skeletonShine 1.5s infinite;
}

    @keyframes skeletonShine {
    100% {
        transform: translateX(100%);
    }
}

/* 12. Mobile Drawer Navigation Menu (100% Opaco & Cyberpunk) */
#mobileDrawer,
.mobile-drawer-panel {
    background-color: #0d0d0d !important;
    background: #0d0d0d !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.95), 0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}

#mobileDrawerBackdrop {
    background-color: rgba(0, 0, 0, 0.85) !important;
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Garante que o topo da navbar no mobile seja sólido */
@media (max-width: 767px) {
    nav.sticky {
        background-color: #0d0d0d !important;
        background: rgba(13, 13, 13, 0.98) !important;
    }
}

/* ============================================================= */
/* ⚡ CORE WEB VITALS & RENDERING PERFORMANCE (GOOGLE SEO 2026)  */
/* ============================================================= */

/* 1. Otimização de renderização diferida para sessões longas */
.content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 1px 400px;
}

/* 2. Prevenção de Cumulative Layout Shift (CLS) */
img {
    font-style: italic;
    shape-margin: 1rem;
}

img[loading="lazy"] {
    content-visibility: auto;
}

/* 3. Estabilidade dimensional em iframes e embeds */
iframe, video {
    aspect-ratio: 16 / 9;
    max-width: 100%;
}

/* 4. Aceleração de GPU para transformações suaves sem trepidação */
.group-hover\:scale-105,
.spotlight-card,
.glass-card {
    will-change: transform, opacity;
    transform: translateZ(0);
}