/* ============================================
   PÁGINA MATERIAIS - REDESIGN v4 (Visual Figma)
   Paleta: #1B3A6B (primário), #F59E0B (accent)
   Preserva toda lógica v3 + adiciona novas seções
   ============================================ */

/* Safeguard: evita scroll horizontal do full-bleed header (em html/body p/ não quebrar sticky) */
html, body { overflow-x: hidden; }

/* Full-bleed fix: containers do Astra recortam o sangramento de largura do header sticky */
#content.site-content,
.ast-container {
    overflow-x: visible !important;
}

/* ── Variáveis locais da página ── */
.materiais-page {
    --mp-primary:      #1B3A6B;
    --mp-primary-dark: #14305a;
    --mp-accent:       #F59E0B;
    --mp-accent-dark:  #D97706;
    --mp-bg:           #F5F6FA;
    --mp-card:         #FFFFFF;
    --mp-border:       rgba(27, 58, 107, 0.12);
    --mp-text:         #0F1A2E;
    --mp-muted:        #637090;

    background: var(--mp-bg);
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Nunito', 'Segoe UI', sans-serif;
}

.materiais-page *,
.materiais-page *::before,
.materiais-page *::after {
    box-sizing: border-box;
}

/* Remove flash preto do tap em dispositivos móveis */
.materiais-page * {
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
   FILTER DRAWER (overlay + aside)
   ============================================ */

.mp-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.mp-filter-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mp-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    background: white;
    z-index: 100001;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
}

.admin-bar .mp-filter-drawer {
    top: 32px;
    height: calc(100vh - 32px);
}

.mp-filter-drawer.active {
    transform: translateX(0);
}

.mp-filter-drawer-header {
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef2f6;
    flex-shrink: 0;
}

.mp-filter-drawer-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mp-filter-drawer-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 800;
    color: var(--mp-text);
}

.mp-filter-drawer-title svg {
    color: var(--mp-primary);
    flex-shrink: 0;
}

.mp-filter-drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f1f4f9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mp-text);
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
    font-family: inherit;
}

.mp-filter-drawer-close:hover {
    background: var(--mp-primary);
    color: white;
}

.mp-filter-drawer-close svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    pointer-events: none;
}

.mp-filter-drawer-subtitle {
    font-size: 12px;
    color: var(--mp-muted);
    margin: 6px 0 0;
    font-weight: 600;
}

.mp-filter-drawer-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 24px 24px;
}

.mp-filter-group {
    padding: 18px 0;
    border-bottom: 1px solid #f1f4f9;
}

.mp-filter-group:last-child {
    border-bottom: none;
}

.mp-filter-group-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--mp-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
}

.mp-filter-count {
    font-weight: 600;
    opacity: 0.6;
    margin-left: 2px;
}

.mp-filter-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mp-filter-row-2 {
    display: flex;
    gap: 10px;
}

.mp-filter-row-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mp-filter-row-3 .mp-filter-pill {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

.mp-filter-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border: 1.5px solid var(--mp-border);
    border-radius: 10px;
    background: white;
    color: var(--mp-text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    line-height: 1;
    text-align: left;
    width: 100%;
}

.mp-filter-pill svg {
    flex-shrink: 0;
    color: var(--mp-primary);
}

.mp-filter-pill:hover {
    border-color: var(--mp-primary);
    background: #f8faff;
    color: var(--mp-text);
}

.mp-filter-pill.active {
    background: var(--mp-primary);
    border-color: var(--mp-primary);
    color: white;
}

.mp-filter-pill.active svg {
    color: white;
}

.mp-filter-pill.active:hover {
    background: var(--mp-primary-dark);
    color: white;
}

/* Acesso pills - Gratuito / Pago */
.mp-filter-pill-acesso.gratis:hover {
    border-color: #10b981;
    background: #f0fdf4;
    color: var(--mp-text);
}

.mp-filter-pill-acesso.pago:hover {
    border-color: var(--mp-primary);
    background: #f8faff;
    color: var(--mp-text);
}

.mp-filter-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mp-filter-tag {
    padding: 6px 14px;
    border: 1.5px solid var(--mp-border);
    border-radius: 20px;
    background: white;
    color: var(--mp-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    line-height: 1;
}

.mp-filter-tag:hover {
    border-color: var(--mp-primary);
    color: var(--mp-primary);
    background: #f8faff;
}

.mp-filter-tag.active {
    background: var(--mp-primary);
    border-color: var(--mp-primary);
    color: white;
}

.mp-filter-checklist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
}

.mp-filter-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--mp-text);
}

.mp-filter-check-row:hover {
    background: #f8faff;
}

.mp-filter-check-row input[type="checkbox"] {
    display: none;
}

.mp-filter-check-box {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.mp-filter-check-box svg {
    opacity: 0;
    transition: opacity 0.15s;
    color: white;
}

.mp-filter-check-row input:checked + .mp-filter-check-box {
    background: var(--mp-primary);
    border-color: var(--mp-primary);
}

.mp-filter-check-row input:checked + .mp-filter-check-box svg {
    opacity: 1;
}

.mp-filter-check-label {
    flex: 1;
}

.mp-filter-drawer-footer {
    padding: 16px 24px 24px;
    border-top: 1px solid #eef2f6;
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.mp-filter-btn-limpar {
    flex: 1;
    padding: 12px 16px;
    border: 1.5px solid var(--mp-border);
    border-radius: 9px;
    background: white;
    color: var(--mp-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    line-height: 1;
    text-align: center;
}

.mp-filter-btn-limpar:hover {
    border-color: #d1d5db;
    background: #f9fafb;
    color: var(--mp-muted);
}

.mp-filter-btn-aplicar {
    flex: 2;
    padding: 12px 16px;
    border: none;
    border-radius: 9px;
    background: var(--mp-primary);
    color: white;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    line-height: 1;
    text-align: center;
}

.mp-filter-btn-aplicar:hover {
    background: var(--mp-primary-dark);
}

/* ============================================
   FAB + DRAWER SEARCH + CHIPS + REGION
   ============================================ */

/* ── FAB button ── */
.materiais-page .mp-filter-fab {
    position: fixed;
    bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    right: 28px;
    /* Acima de todas as camadas globais fixas do tema (barra inferior mobile
       9999, header fixo 99999), mas abaixo do drawer de filtros (100000/100001). */
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mp-primary);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(13,31,61,0.3);
    transition: background 0.2s, transform 0.15s;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
}

.mp-filter-fab:hover {
    background: var(--mp-accent);
    color: #1a1200;
    transform: translateY(-2px);
}

.mp-filter-fab-label {
    line-height: 1;
}

.mp-filter-fab-badge {
    background: var(--mp-accent);
    color: #1a1200;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.2;
    min-width: 18px;
    text-align: center;
}

/* ── Favoritos count badge (hero) ── */
.mp-fav-count-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
}

/* ── Autocomplete suggest (now inside drawer) ── */
.mp-search-suggest {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(13,31,61,.18);
    overflow-y: auto;
    max-height: 320px;
    z-index: 60;
}

.mp-search-suggest.active { display: block; }

.mp-suggest-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0F1A2E;
    border-bottom: 1px solid #f0f2f7;
    cursor: pointer;
}

.mp-suggest-item:last-child { border-bottom: none; }
.mp-suggest-item:hover { background: #f8faff; }
.mp-suggest-item small { color: #637090; font-weight: 600; flex-shrink: 0; white-space: nowrap; }

/* ── Drawer search ── */
.mp-filter-search-wrap {
    position: relative;
    margin-top: 10px;
}

.mp-filter-search-input {
    width: 100%;
    padding: 12px 54px 12px 20px;
    border-radius: 999px;
    border: 1.5px solid var(--mp-border);
    font-size: 14px;
    background: #ffffff;
    color: #0F1A2E;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.mp-filter-search-input::placeholder {
    color: #8892A6;
}

.mp-filter-search-input:focus {
    border-color: var(--mp-primary);
    box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.08);
}

.mp-filter-search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--mp-primary);
    color: #fff;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.mp-filter-search-btn:hover {
    background: var(--mp-accent);
    color: #1a1200;
}

/* ── Selected chips (dropdown) ── */
.mp-filter-selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    min-height: 0;
}

.mp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--mp-primary);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.2;
}

.mp-filter-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    color: white;
    transition: background 0.15s;
}

.mp-filter-chip-x:hover {
    background: rgba(255,255,255,0.45);
}

/* ── Região toggles wrap (drawer) ── */
.mp-filter-regiao-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================
   HERO SECTION
   ============================================ */

.mp-hero {
    background: var(--mp-primary);
    position: relative;
    overflow: hidden;
    padding: 36px 24px 70px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.mp-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=1400&h=500&fit=crop&auto=format');
    background-size: cover;
    background-position: center;
    opacity: 0.10;
}

.mp-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--mp-primary) 40%, transparent);
}

.mp-hero-inner {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.mp-hero-pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.mp-hero-titulo {
    font-size: 46px;
    font-weight: 900;
    color: #fff;
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin-bottom: 12px;
}

.mp-hero-accent { color: var(--mp-accent); }

.mp-hero-sub {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.6;
    max-width: 520px;
    margin: 0 auto;
}

.mp-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.mp-hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mp-accent);
    color: #1a1200;
    font-size: 13px;
    font-weight: 800;
    padding: 12px 26px;
    border-radius: 9px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    border: none;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.02em;
}

.mp-hero-btn-primary:hover {
    background: var(--mp-accent-dark);
    transform: translateY(-1px);
    text-decoration: none;
    color: #1a1200;
}

.mp-hero-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: white;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 26px;
    border-radius: 9px;
    border: 1.5px solid rgba(255,255,255,0.35);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    font-family: inherit;
}

.mp-hero-btn-outline:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.55);
}

.mp-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 30px;
}

.mp-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 28px;
}

.mp-hero-stat-val {
    font-size: 20px;
    font-weight: 900;
    color: white;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.mp-hero-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mp-hero-stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.15);
    flex-shrink: 0;
}

/* ============================================
   TRUST BAR
   ============================================ */

.mp-trust-bar {
    background: transparent;
    position: relative;
    z-index: 10;
    margin-top: -28px;
    margin-bottom: 12px;
}

.mp-trust-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(13, 31, 61, 0.12);
    border: 1px solid var(--mp-border);
}

.mp-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mp-text);
    line-height: 1.3;
}

.mp-trust-item svg {
    color: var(--mp-primary);
    flex-shrink: 0;
}



/* ============================================
   BANNER DE CONTEXTO DE CONCURSO
   ============================================ */

.mp-concurso-banner {
    background: linear-gradient(135deg, var(--mp-primary) 0%, #2563eb 100%);
    border-bottom: 3px solid var(--mp-primary-dark);
    position: sticky;
    top: var(--header-height, 70px);
    z-index: 101;
    box-shadow: 0 3px 12px rgba(27, 58, 107, 0.35);
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.mp-concurso-banner-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mp-concurso-banner-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mp-concurso-banner-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.mp-concurso-banner-text strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: white;
    line-height: 1.2;
}

.mp-concurso-banner-text span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
}

.mp-concurso-banner-limpar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mp-concurso-banner-limpar:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

/* ============================================
   SEÇÕES DE PRODUTOS
   ============================================ */

.mp-section {
    background: white;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

.mp-section-header {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Novo: wrapper com barra lateral colorida */
.mp-section-titulo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mp-section-titulo-bar {
    width: 4px;
    height: 28px;
    background: var(--mp-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.mp-section-titulo-bar.accent { background: var(--mp-accent); }

.mp-section-titulo {
    font-size: 22px;
    font-weight: 800;
    color: var(--mp-text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    line-height: 1.2;
}

.mp-section-titulo svg { color: var(--mp-primary); flex-shrink: 0; }

.mp-section-subtitulo {
    font-size: 12px;
    color: var(--mp-muted);
    margin: 2px 0 0;
    font-weight: 600;
}

.mp-section-ver-mais {
    font-size: 13px;
    font-weight: 700;
    color: var(--mp-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.mp-section-ver-mais:hover { gap: 8px; }

/* Específica */
.mp-section-especifica {
    border-top: 3px solid var(--mp-primary);
    position: relative;
}

.mp-section-especifica::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mp-primary), #3b82f6, #60a5fa);
}

.mp-section-badge-especifico {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #DBEAFE;
    color: var(--mp-primary);
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.mp-section-tag-generico {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #F0FDF4;
    color: #059669;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid #BBF7D0;
}

/* ============================================
   GRID DE PRODUTOS
   ============================================ */

.mp-produtos-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: transparent;
}

/* ============================================
   CARD DE PRODUTO
   ============================================ */

.materiais-page a.mp-produto-card,
.materiais-page a.mp-produto-card.wp-dark-mode-bg-image {
    background: white;
    border-radius: 14px;
    padding: 0;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    flex-direction: unset !important;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(27, 58, 107, 0.08);
    border: 1px solid var(--mp-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    background-image: none !important;
}

.mp-produto-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mp-primary), #3b82f6);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    z-index: 2;
    border-radius: 14px 14px 0 0;
}

.materiais-page a.mp-produto-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(27, 58, 107, 0.16) !important;
    border-color: #DBEAFE !important;
}

.materiais-page a.mp-produto-card:hover::before { transform: scaleX(1); }

/* Imagem */
.materiais-page a.mp-produto-card .mp-produto-img-wrap,
.materiais-page a.mp-produto-card.wp-dark-mode-bg-image .mp-produto-img-wrap {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 200px !important;
    flex-shrink: unset !important;
    border-radius: 14px 14px 0 0 !important;
    background-color: #1a1a2e !important;
    background-image: none !important;
    overflow: hidden;
    position: relative;
}

.materiais-page .mp-produto-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transition: transform 0.5s ease;
    display: block;
}

.materiais-page .mp-card-curso .mp-produto-img-wrap img {
    object-fit: cover !important;
}

.materiais-page a.mp-produto-card:hover .mp-produto-img-wrap img { transform: scale(1.05); }

.mp-produto-card[data-plataforma="gran"]   .mp-produto-img-wrap { background: #0f0f1a !important; }
.mp-produto-card[data-plataforma="amazon"] .mp-produto-img-wrap { background: #ffffff !important; }
.mp-produto-card:not([data-plataforma])   .mp-produto-img-wrap,
.mp-produto-card[data-plataforma=""]      .mp-produto-img-wrap { background: #EEF2FF !important; }

.mp-produto-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #EEF2FF, #DBEAFE);
    color: var(--mp-primary);
    opacity: 0.5;
}

.mp-produto-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 9px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.mp-produto-badge.mais-vendido { background: #F59E0B; color: #0F1A2E; }
.mp-produto-badge.oferta       { background: #DC2626; color: white; }
.mp-produto-badge.novo         { background: var(--mp-primary); color: white; }
.mp-produto-badge.gratis       { background: #10B981; color: white; }

.mp-produto-card[data-plataforma="gran"]   .mp-produto-badge { background: #DC2626 !important; color: #fff !important; }
.mp-produto-card[data-plataforma="amazon"] .mp-produto-badge { background: #146EB4 !important; color: #fff !important; }

/* Meta row: dot + status + area dentro do card body */
.mp-produto-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mp-muted);
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.mp-produto-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mp-produto-status-dot.gratis {
    background: #10B981;
}

.mp-produto-status-dot.pago {
    background: var(--mp-accent);
}

.mp-produto-status-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--mp-text);
}

.mp-produto-meta-sep {
    color: #d1d5db;
    margin: 0 2px;
}



/* Tipo tag (Curso Online) dentro da imagem */
.mp-produto-tipo-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    background: rgba(27, 58, 107, 0.8);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 2;
    line-height: 1;
}

/* Botão de ação no card */
.mp-produto-add-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    color: var(--mp-primary);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 2;
    line-height: 0;
    padding: 0;
}

.mp-produto-add-btn svg { display: block; flex-shrink: 0; pointer-events: none; }

.mp-produto-add-btn:hover {
    background: var(--mp-primary);
    color: white;
    transform: scale(1.12);
}

/* Corpo */
.materiais-page a.mp-produto-card .mp-produto-card-body,
.materiais-page a.mp-produto-card.wp-dark-mode-bg-image .mp-produto-card-body {
    grid-row: 2 !important;
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 14px 16px 18px;
    justify-content: space-between;
}

.mp-produto-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.45;
    margin-bottom: 8px;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex-grow: 0;
    min-height: calc(1.45em * 4);
}

.mp-produto-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.mp-stars { color: var(--mp-accent); font-size: 11px; letter-spacing: -1px; }
.mp-rating-count { font-size: 11px; color: #94a3b8; }

.mp-produto-preco {
    font-size: 20px;
    font-weight: 900;
    color: var(--mp-text);
    line-height: 1;
    margin-bottom: 5px;
}

.mp-produto-preco.gratis-preco { color: #059669; }

.mp-produto-preco-original {
    font-size: 13px;
    color: var(--mp-muted);
    text-decoration: line-through;
    margin-right: 6px;
}

.mp-produto-frete {
    font-size: 11px;
    color: #059669;
    font-weight: 600;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* CTA btn dentro do card */
.materiais-page .mp-produto-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto !important;
    padding: 10px 14px;
    background: var(--mp-accent);
    color: #1a1200;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.materiais-page .mp-produto-cta-btn svg { flex-shrink: 0; pointer-events: none; }
.materiais-page .mp-produto-cta-btn:hover { background: var(--mp-accent-dark); transform: translateY(-1px); color: #1a1200; }

/* Card destaque */
.materiais-page .mp-produto-card[data-destaque="1"] {
    border: 2px solid var(--mp-accent) !important;
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.18), 0 2px 8px rgba(0,0,0,0.08) !important;
}

.materiais-page .mp-produto-card[data-destaque="1"]::before {
    background: linear-gradient(90deg, var(--mp-accent), #FCD34D) !important;
    transform: scaleX(1) !important;
}

.materiais-page .mp-produto-card[data-destaque="1"] .mp-produto-img-wrap::before {
    content: 'DESTAQUE';
    position: absolute;
    top: 18px;
    right: -28px;
    width: 110px;
    background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent-dark));
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-align: center;
    text-transform: uppercase;
    padding: 5px 0;
    transform: rotate(35deg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    z-index: 4;
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    line-height: 1;
}

/* ============================================
   CARROSSEL
   ============================================ */

.mp-carousel-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 20px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}

.mp-carousel-track {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 12px 12px;
    flex: 1;
    scroll-behavior: smooth;
}

.mp-carousel-track::-webkit-scrollbar {
    display: none;
}

.mp-carousel-track .mp-produto-card {
    flex: 0 0 calc((100% - 60px) / 6);
    scroll-snap-align: start;
    min-width: 170px;
}

@media (max-width: 1200px) {
    .mp-carousel-track .mp-produto-card {
        flex: 0 0 calc((100% - 48px) / 5);
    }
}

@media (max-width: 960px) {
    .mp-carousel-track .mp-produto-card {
        flex: 0 0 calc((100% - 24px) / 3);
    }
}

@media (max-width: 640px) {
    .mp-carousel-track .mp-produto-card {
        flex: 0 0 calc((100% - 10px) / 2);
        min-width: 0;
    }
}

.mp-carousel-arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mp-accent);
    border: none;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    z-index: 5;
    color: #ffffff;
    font-family: inherit;
}

.mp-carousel-arrow:hover {
    background: var(--mp-accent-dark);
    color: #ffffff;
    transform: scale(1.08);
}

.mp-carousel-arrow svg {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    pointer-events: none;
}

.mp-carousel-arrow.prev {
    margin-right: 6px;
}

.mp-carousel-arrow.next {
    margin-left: 6px;
}

.mp-filter-drawer-close,
.mp-carousel-arrow {
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
}

/* ── Carousel pagination dots ── */
.mp-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 4px 0 20px;
}

.mp-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mp-border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.25s ease;
}

.mp-carousel-dot:hover {
    background: var(--mp-accent);
    opacity: 0.6;
}

.mp-carousel-dot.active {
    width: 22px;
    border-radius: 4px;
    background: var(--mp-accent);
}

/* ── Carousel drag scroll ── */
#mpApostilasTrack {
    cursor: grab;
}

#mpApostilasTrack.mp-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

/* Divisor simples entre seções */
.mp-divisor-simples {
    height: 8px;
    background: var(--mp-bg);
}

/* ============================================
   CURSOS GRID
   ============================================ */

.mp-cursos-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

@media (max-width: 960px) {
    .mp-cursos-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 640px) {
    .mp-cursos-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SEÇÃO DE CONTINUAÇÃO (Cursos em Tamanho Original)
   Fica colada na seção anterior (sem faixa cinza entre as duas) e
   separada por um filete, para ler como continuação da mesma seção.
   ============================================ */
.materiais-page .mp-section-continuacao {
    margin-top: -12px;
    border-top: 1px solid var(--mp-border);
}

.materiais-page .mp-section-continuacao .mp-section-header {
    padding-top: 24px;
}

html[data-theme="dark"] .materiais-page .mp-section-continuacao,
html.wp-dark-mode-active .materiais-page .mp-section-continuacao {
    border-top-color: var(--dm-border);
}

.materiais-page .mp-card-curso .mp-produto-img-wrap {
    aspect-ratio: 4 / 3;
    height: auto !important;
}

.materiais-page .mp-card-mentoria .mp-produto-img-wrap {
    aspect-ratio: 4 / 3;
    height: auto !important;
}
.materiais-page .mp-card-mentoria .mp-produto-img-wrap img {
    object-fit: cover !important;
}

.materiais-page .mp-card-apostila .mp-produto-img-wrap {
    aspect-ratio: 3 / 4;
    height: auto !important;
}

.materiais-page .mp-card-apostila .mp-produto-img-wrap img {
    object-fit: cover !important;
}

/* ── Card de Curso Online com "Tamanho original" marcado no admin ──
   A arte do curso é quadrada e legível: a caixa vira 1:1 (ex.: 1081×1081),
   a imagem entra inteira (contain), sem zoom no hover e sem a moldura
   escura específica de plataforma. Só entra quem tem o campo
   "Tamanho original" marcado (data-tamanho-original="1"): os demais
   cursos seguem o formato antigo (4/3 recortado, com moldura).
   O seletor usa data-tipo-produto porque simulados e mentorias também
   recebem a classe .mp-card-curso, e exclui os cards mini (72×72). */
.materiais-page .mp-produto-card[data-tipo-produto="outro"][data-tamanho-original="1"]:not(.mp-card-mini-curso) .mp-produto-img-wrap {
    aspect-ratio: 1 / 1;
    height: auto !important;
    max-height: none !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.materiais-page .mp-produto-card[data-tipo-produto="outro"][data-tamanho-original="1"]:not(.mp-card-mini-curso) .mp-produto-img-wrap img {
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    transition: none;
}

/* Sem imagem: o placeholder ocupa a caixa quadrada inteira */
.materiais-page .mp-produto-card[data-tipo-produto="outro"][data-tamanho-original="1"]:not(.mp-card-mini-curso) .mp-produto-placeholder {
    aspect-ratio: 1 / 1;
}

/* ── Card de Apostila (carrossel principal): ajuste de espaçamento ── */
/* Títulos de apostila são curtos (1-2 linhas); reduz o min-height */
.materiais-page a.mp-card-apostila .mp-produto-card-body {
    justify-content: flex-start;
}

.materiais-page .mp-card-apostila .mp-produto-titulo {
    min-height: calc(1.45em * 2);
    -webkit-line-clamp: 2 !important;
}

/* Anula margin-top:auto do CTA — botão fica logo abaixo do título */
.materiais-page .mp-card-apostila .mp-produto-cta-btn {
    margin-top: 12px !important;
}

/* Oculta linha de área no carrossel de apostilas para manter altura uniforme */
.materiais-page .mp-card-apostila .mp-produto-area {
    display: none;
}

/* ── Cursos extras (Ver Todos) ── */

/* ── Simulados grid (mesmo layout de cursos) ── */
.mp-simulados-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

@media (max-width: 960px) {
    .mp-simulados-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 640px) {
    .mp-simulados-grid {
        grid-template-columns: 1fr;
    }
}

.mp-simulados-grid-extra {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.mp-cursos-grid-extra {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.mp-ver-todos-wrap {
    text-align: center;
    padding: 0 24px 28px;
}

.mp-ver-todos-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--mp-primary);
    color: white;
    border: none;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, transform 0.2s;
    line-height: 1;
}

.mp-ver-todos-btn:hover {
    background: var(--mp-primary-dark);
    transform: translateY(-2px);
}

.mp-ver-todos-btn svg {
    flex-shrink: 0;
}

/* ============================================
   SEÇÃO POR CONCURSO
   ============================================ */

.mp-concurso-section {
    background: white;
    margin-bottom: 12px;
}

.mp-concurso-section-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px 32px;
}

.mp-concurso-header {
    margin-bottom: 24px;
}

.mp-concurso-titulo {
    font-size: 22px;
    font-weight: 800;
    color: var(--mp-text);
    margin: 0 0 6px;
    line-height: 1.2;
}

.mp-concurso-subtitulo {
    font-size: 13px;
    color: var(--mp-muted);
    margin: 0;
    font-weight: 600;
}

.mp-concurso-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.mp-concurso-tab {
    padding: 8px 18px;
    border: 1.5px solid var(--mp-border);
    border-radius: 8px;
    background: white;
    color: var(--mp-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    line-height: 1;
}

.mp-concurso-tab:hover {
    border-color: var(--mp-primary);
    color: var(--mp-primary);
    background: #f8faff;
}

.mp-concurso-tab.active {
    background: var(--mp-primary);
    border-color: var(--mp-primary);
    color: white;
}

.mp-concurso-painel {
    display: none;
}

.mp-concurso-painel.active {
    display: block;
}

.mp-concurso-grid-cols {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
}

.mp-concurso-col {
    flex: 1;
    min-width: 280px;
}

.mp-concurso-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mp-text);
    margin-bottom: 14px;
}

.mp-concurso-col-header svg {
    color: var(--mp-primary);
    flex-shrink: 0;
}

.mp-concurso-col-count {
    color: var(--mp-muted);
    font-size: 13px;
    font-weight: 600;
}

.mp-concurso-col-full {
    flex: 1 1 100%;
    min-width: 100%;
}

.mp-carousel-track-taxo,
.mp-cursos-grid-taxo {
    padding-left: 0;
    padding-right: 0;
}

.mp-concurso-mini-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 1200px) {
    .mp-concurso-mini-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 960px) {
    .mp-concurso-mini-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .mp-concurso-mini-row {
        grid-template-columns: 1fr;
    }
}

.mp-concurso-mini-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 640px) {
    .mp-concurso-mini-col {
        grid-template-columns: 1fr;
    }
}

/* Mini cards na seção Por Concurso */
.materiais-page a.mp-card-mini-apostila,
.materiais-page a.mp-card-mini-curso {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 14px;
    padding: 14px !important;
    border-radius: 12px;
    background: white;
    border: 1px solid var(--mp-border);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}

.materiais-page a.mp-card-mini-apostila:hover,
.materiais-page a.mp-card-mini-curso:hover {
    border-color: var(--mp-primary);
    box-shadow: 0 4px 14px rgba(27, 58, 107, 0.1);
    transform: translateY(-2px);
    color: inherit;
}

.materiais-page .mp-card-mini-apostila .mp-produto-img-wrap,
.materiais-page .mp-card-mini-curso .mp-produto-img-wrap {
    width: 72px !important;
    height: 72px !important;
    border-radius: 10px !important;
    flex-shrink: 0;
    grid-row: unset !important;
    grid-column: unset !important;
    background: #EEF2FF !important;
}

.materiais-page .mp-card-mini-apostila .mp-produto-img-wrap img,
.materiais-page .mp-card-mini-curso .mp-produto-img-wrap img {
    object-fit: cover !important;
}

.materiais-page .mp-card-mini-apostila .mp-produto-card-body,
.materiais-page .mp-card-mini-curso .mp-produto-card-body {
    flex: 1;
    padding: 0 !important;
    grid-row: unset !important;
    grid-column: unset !important;
    display: block !important;
    min-height: 0 !important;
}

.materiais-page .mp-card-mini-apostila .mp-produto-titulo,
.materiais-page .mp-card-mini-curso .mp-produto-titulo {
    font-size: 12px;
    margin-bottom: 6px;
    -webkit-line-clamp: 2 !important;
    min-height: 0;
}

.materiais-page .mp-card-mini-apostila .mp-produto-titulo {
    font-size: 13px;
}

.materiais-page .mp-card-mini-apostila .mp-produto-cta-btn,
.materiais-page .mp-card-mini-curso .mp-produto-cta-btn {
    font-size: 10px;
    padding: 6px 10px;
    margin-top: 0 !important;
    width: auto;
    white-space: nowrap;
}

.materiais-page .mp-card-mini-apostila .mp-produto-badge,
.materiais-page .mp-card-mini-curso .mp-produto-badge {
    display: none;
}

.materiais-page .mp-card-mini-apostila .mp-produto-access-badge,
.materiais-page .mp-card-mini-curso .mp-produto-access-badge {
    display: none;
}

.materiais-page .mp-card-mini-apostila .mp-produto-area,
.materiais-page .mp-card-mini-curso .mp-produto-area {
    display: none;
}

.materiais-page .mp-card-mini-apostila .mp-produto-subtitulo,
.materiais-page .mp-card-mini-curso .mp-produto-subtitulo {
    display: none;
}

.materiais-page .mp-card-mini-apostila .mp-produto-rating,
.materiais-page .mp-card-mini-curso .mp-produto-rating {
    display: none;
}

/* ============================================
   FAIXA CTA
   ============================================ */

.mp-faixa-cta {
    background: linear-gradient(135deg, var(--mp-primary) 0%, #2563EB 100%);
    margin: 0 0 12px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    transition: filter 0.2s;
    max-width: 100%;
}

.mp-faixa-cta:hover { filter: brightness(1.06); }

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

.mp-faixa-icon {
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.mp-faixa-text strong { display: block; font-size: 18px; font-weight: 800; margin-bottom: 3px; color: white; }
.mp-faixa-text span   { font-size: 13px; opacity: 0.85; color: white; }

.mp-faixa-btn {
    background: white;
    color: var(--mp-primary);
    font-weight: 700;
    font-size: 13px;
    padding: 11px 22px;
    border-radius: 8px;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.mp-faixa-btn:hover { transform: scale(1.04); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* ============================================
   DIVISORES E AVISOS (modo concurso)
   ============================================ */

.mp-divisor-genericos {
    background: #f8fafc;
    padding: 28px 24px;
}

.mp-divisor-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.mp-divisor-linha { flex: 1; height: 1px; background: #e2e8f0; }

.mp-divisor-texto {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mp-divisor-texto svg { color: #94a3b8; flex-shrink: 0; }

.mp-aviso-genericos {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
}

.mp-aviso-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.mp-aviso-icon { color: #3b82f6; flex-shrink: 0; margin-top: 2px; }

.mp-aviso-texto strong { display: block; font-size: 14px; font-weight: 800; color: #1e293b; margin-bottom: 3px; }
.mp-aviso-texto span   { font-size: 13px; color: #475569; line-height: 1.5; }

/* ============================================
   BUSCA
   ============================================ */

.mp-busca-resultados { display: none; background: white; min-height: 60vh; }
.mp-busca-resultados.ativo { display: block; }

.mp-busca-header {
    padding: 20px 24px 12px;
    border-bottom: 1px solid #f1f5f9;
    max-width: 1400px;
    margin: 0 auto;
}

.mp-busca-header p { font-size: 14px; color: #64748b; }
.mp-busca-header strong { color: #0f172a; }

/* ============================================
   ESTADO VAZIO
   ============================================ */

.mp-vazio {
    text-align: center;
    padding: 70px 20px;
    background: white;
}

.mp-vazio svg   { color: #cbd5e1; margin-bottom: 20px; }
.mp-vazio h3    { font-size: 18px; font-weight: 700; color: #1e293b; margin-bottom: 10px; }
.mp-vazio p     { font-size: 14px; color: #64748b; margin-bottom: 24px; }

.mp-vazio-btn {
    background: var(--mp-primary);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.mp-vazio-btn:hover { background: var(--mp-primary-dark); transform: translateY(-1px); }

/* ============================================
   CTA FINAL (modo normal)
   ============================================ */

.mp-cta-final-simplificado {
    padding: 40px 24px 56px;
}

.mp-cta-final-simplificado-inner {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.mp-cta-final-simplificado-titulo {
    font-size: 24px;
    font-weight: 800;
    color: var(--mp-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 8px;
}

.mp-cta-final-simplificado-sub {
    color: var(--mp-muted);
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 24px;
}

.mp-cta-final-simplificado-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mp-accent);
    color: #1a1200;
    font-size: 14px;
    font-weight: 800;
    padding: 13px 28px;
    border-radius: 9px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.mp-cta-final-simplificado-btn:hover {
    background: var(--mp-accent-dark);
}

/* ============================================
   SCROLL MARGIN para seções âncora
   ============================================ */

/* ============================================
   A.4 — BREADCRUMB DE ORIGEM
   ============================================ */
.mp-origin-breadcrumb {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mp-muted);
}
.mp-origin-breadcrumb a {
    color: var(--mp-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mp-origin-breadcrumb a:hover {
    text-decoration: underline;
}

/* ============================================
   B.2 — CHIPS DE FILTROS ATIVOS
   ============================================ */
.mp-chips-row {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #EEF2FF;
    border: 1px solid #DBEAFE;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mp-primary);
    line-height: 1;
}
.mp-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mp-primary);
    color: white;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 10px;
    line-height: 0;
    transition: background 0.2s;
}
.mp-chip-remove:hover {
    background: var(--mp-primary-dark);
}
.mp-chip-remove svg {
    display: block;
    pointer-events: none;
}



/* ============================================
   C.1 — FAVORITOS / COMPARTILHAR (no card)
   ============================================ */
.mp-produto-img-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 5;
}
.mp-produto-fav-btn,
.mp-produto-share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: none;
    box-shadow: 0 1px 6px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6B7280;
    transition: all 0.2s;
    font-family: inherit;
    line-height: 0;
    padding: 0;
}
.mp-produto-fav-btn:hover {
    color: #DC2626;
    background: #FEE2E2;
    transform: scale(1.1);
}
.mp-produto-fav-btn.is-fav {
    color: #DC2626;
}
.mp-produto-share-btn:hover {
    color: #10B981;
    background: #D1FAE5;
    transform: scale(1.1);
}
.mp-produto-fav-btn svg,
.mp-produto-share-btn svg {
    display: block;
    pointer-events: none;
    flex-shrink: 0;
}



/* ============================================
   D — MOBILE GRID 2 COLUNAS
   ============================================ */
@media (max-width: 640px) {
    .mp-produtos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
        padding-left: 16px;
        padding-right: 16px;
    }
    /* Cards de cursos, simulados e mentorias ficam largos em uma coluna. */
    .mp-cursos-grid,
    .mp-simulados-grid,
    .mp-cursos-grid-extra,
    .mp-simulados-grid-extra {
        grid-template-columns: 1fr !important;
        gap: 12px;
        padding-left: 16px;
        padding-right: 16px;
    }
    /* Mentoria mantém o formato panorâmico; curso online segue o formato
       antigo (16/8) a menos que tenha "Tamanho original" marcado, caso em
       que vale a caixa 1:1 do bloco "Card de Curso Online". */
    .materiais-page .mp-card-curso:not([data-tamanho-original="1"]) .mp-produto-img-wrap,
    .materiais-page .mp-card-mentoria .mp-produto-img-wrap {
        aspect-ratio: 16 / 8;
        height: auto !important;
        max-height: 180px;
    }
    .mp-concurso-mini-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .mp-hero-titulo {
        font-size: 28px;
    }
    .mp-hero-stats {
        flex-wrap: wrap;
        gap: 8px;
    }
    .mp-hero-stat {
        padding: 0 12px;
    }
    
}

/* ============================================
   SEÇÃO POR TAXONOMIA (concurso / matéria)
   ============================================ */

.mp-taxo-section {
    background: white;
    margin-bottom: 12px;
}

.mp-taxo-section .mp-concurso-section-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px 32px;
}

.mp-taxo-section .mp-concurso-header {
    margin-bottom: 20px;
}

/* ── Esfera toggles (apenas concurso) ── */

.mp-esfera-toggles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.mp-esfera-btn {
    padding: 7px 18px;
    border: 1.5px solid var(--mp-border);
    border-radius: 20px;
    background: white;
    color: var(--mp-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    line-height: 1.4;
}

.mp-esfera-btn:hover {
    border-color: var(--mp-primary);
    color: var(--mp-primary);
    background: #f8faff;
}

.mp-esfera-btn.active {
    background: var(--mp-primary);
    border-color: var(--mp-primary);
    color: white;
}

/* ── Região toggles ── */

.mp-regiao-toggles {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.mp-regiao-btn {
    width: auto;
    height: auto;
    padding: 6px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--mp-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    position: relative;
    flex-shrink: 0;
}

.mp-regiao-btn:hover {
    background: rgba(245, 158, 11, 0.08);
}

.mp-regiao-btn.active {
    background: rgba(245, 158, 11, 0.16);
}

.mp-regiao-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #f1f4f9;
    box-shadow: none;
    border-radius: 50%;
    overflow: hidden;
}

.mp-regiao-icon img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    display: block;
}

.mp-regiao-btn.active .mp-regiao-icon {
    background: rgba(245, 158, 11, 0.16);
    box-shadow: 0 0 0 3px var(--mp-accent);
}

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

/* ── Dropdown de busca ── */

.mp-taxo-dropdown-row {
    margin-bottom: 20px;
    max-width: 460px;
}

.mp-taxo-dropdown-wrap {
    position: relative;
}

.mp-taxo-dropdown-input {
    width: 100%;
    padding: 11px 16px;
    border: 1.5px solid var(--mp-border);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: white;
    color: var(--mp-text);
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.mp-taxo-dropdown-input:focus {
    outline: none;
    border-color: var(--mp-primary);
    box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.08);
}

.mp-taxo-dropdown-input::placeholder {
    color: var(--mp-muted);
}

.mp-taxo-dropdown-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1.5px solid var(--mp-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
}

.mp-taxo-dropdown-list.active {
    display: block;
}

.mp-taxo-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f1f5f9;
}

.mp-taxo-dropdown-item:last-child {
    border-bottom: none;
}

.mp-taxo-dropdown-item:hover {
    background: #f8faff;
}

.mp-taxo-dropdown-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--mp-text);
    flex: 1;
    min-width: 0;
}

.mp-taxonomy-emblem {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, hsl(var(--tax-hue, 212) 70% 52% / 0.16), hsl(calc(var(--tax-hue, 212) + 40) 70% 55% / 0.07));
    box-shadow: inset 0 0 0 1.5px hsl(var(--tax-hue, 212) 55% 45% / 0.22);
}

.mp-taxonomy-emblem img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.mp-taxonomy-emblem-iniciais {
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    color: hsl(var(--tax-hue, 212) 62% 38%);
    letter-spacing: 0.02em;
}

.mp-taxo-dropdown-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--mp-muted);
    background: #f1f5f9;
    padding: 2px 9px;
    border-radius: 10px;
    white-space: nowrap;
}

.mp-taxo-dropdown-empty {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--mp-muted);
    font-weight: 600;
}

/* ── Resultados da taxonomia ── */

.mp-taxo-resultados {
    min-height: 60px;
}

.mp-taxo-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: var(--mp-muted);
    font-size: 14px;
    font-weight: 600;
    background: #fafbfc;
    border-radius: 12px;
    border: 1.5px dashed var(--mp-border);
}

/* ── Acordeão ── */

.mp-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mp-accordion-item {
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s;
}

.mp-accordion-item:hover {
    box-shadow: 0 2px 8px rgba(13,31,61,0.06);
}

.mp-accordion-item.active {
    box-shadow: 0 4px 12px rgba(13,31,61,0.08);
}

.mp-accordion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s;
}

.mp-accordion-header:hover {
    background: #fafbfc;
}

.mp-accordion-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--mp-text);
    flex: 1;
}

.mp-accordion-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--mp-muted);
    white-space: nowrap;
}

.mp-accordion-arrow {
    flex-shrink: 0;
    color: var(--mp-muted);
    transition: transform 0.25s ease;
}

.mp-accordion-item.active .mp-accordion-arrow {
    transform: rotate(180deg);
}

.mp-accordion-body {
    border-top: 1px solid var(--mp-border);
    padding: 12px 16px 16px;
}

.mp-accordion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

/* ── Accordion search ── */
.mp-accordion-search-wrap {
    margin-bottom: 16px;
    max-width: 420px;
}
.mp-accordion-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--mp-border);
    border-radius: 9px;
    font-size: 14px;
    font-family: inherit;
    color: var(--mp-text);
    background: #fff;
    outline: none;
}
.mp-accordion-search-input:focus {
    border-color: var(--mp-primary);
    box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.08);
}
.mp-accordion-search-input::placeholder {
    color: var(--mp-muted);
}

/* ── Chevron indicator on dropdown/accordion search fields ── */
.mp-taxo-dropdown-wrap,
.mp-accordion-search-wrap {
    position: relative;
}

.mp-taxo-dropdown-wrap::after,
.mp-accordion-search-wrap::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--mp-muted);
    border-bottom: 2px solid var(--mp-muted);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.mp-taxo-dropdown-input,
.mp-accordion-search-input {
    padding-right: 40px;
}

/* ============================================
   NEUTRALIZA :active/:focus HERDADOS DE FORA
   (provavelmente do tema/plugin — as regras abaixo
   forçam os botões a manterem a aparência normal
   mesmo quando pressionados/focados)
   ============================================ */

.materiais-page a,
.materiais-page button {
    -webkit-tap-highlight-color: transparent;
}

.materiais-page .mp-hero-btn-primary:active,
.materiais-page .mp-hero-btn-primary:focus,
.materiais-page .mp-hero-btn-primary:visited {
    background: var(--mp-accent) !important;
    color: #1a1200 !important;
    text-decoration: none !important;
}

.materiais-page .mp-hero-btn-outline:active,
.materiais-page .mp-hero-btn-outline:focus {
    background: transparent !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.materiais-page .mp-filter-drawer-close:active,
.materiais-page .mp-filter-drawer-close:focus {
    background: #f1f4f9 !important;
    color: var(--mp-text) !important;
}

.materiais-page .mp-filter-btn-limpar:active,
.materiais-page .mp-filter-btn-limpar:focus {
    background: #ffffff !important;
    color: var(--mp-muted) !important;
    border-color: var(--mp-border) !important;
}

.materiais-page .mp-filter-btn-aplicar:active,
.materiais-page .mp-filter-btn-aplicar:focus {
    background: var(--mp-primary) !important;
    color: #ffffff !important;
}

.materiais-page .mp-filter-fab:active,
.materiais-page .mp-filter-fab:focus {
    background: var(--mp-primary) !important;
    color: #ffffff !important;
}

.materiais-page .mp-carousel-arrow:active,
.materiais-page .mp-carousel-arrow:focus {
    background: var(--mp-accent) !important;
    color: #ffffff !important;
}

.materiais-page .mp-carousel-dot:active,
.materiais-page .mp-carousel-dot:focus {
    background: var(--mp-border) !important;
}
.materiais-page .mp-carousel-dot.active:active,
.materiais-page .mp-carousel-dot.active:focus {
    background: var(--mp-accent) !important;
}

.materiais-page .mp-ver-todos-btn:active,
.materiais-page .mp-ver-todos-btn:focus {
    background: var(--mp-primary) !important;
    color: #ffffff !important;
}

.materiais-page .mp-vazio-btn:active,
.materiais-page .mp-vazio-btn:focus {
    background: var(--mp-primary) !important;
    color: #ffffff !important;
}

.materiais-page .mp-cta-final-simplificado-btn:active,
.materiais-page .mp-cta-final-simplificado-btn:focus {
    background: var(--mp-accent) !important;
    color: #1a1200 !important;
}

.materiais-page .mp-section-ver-mais:active,
.materiais-page .mp-section-ver-mais:focus {
    color: var(--mp-primary) !important;
    background: transparent !important;
}

.materiais-page .mp-esfera-btn:active,
.materiais-page .mp-esfera-btn:focus {
    background: #ffffff !important;
    color: var(--mp-muted) !important;
    border-color: var(--mp-border) !important;
}
.materiais-page .mp-esfera-btn.active:active,
.materiais-page .mp-esfera-btn.active:focus {
    background: var(--mp-primary) !important;
    color: #ffffff !important;
}

.materiais-page .mp-accordion-header:active,
.materiais-page .mp-accordion-header:focus {
    background: transparent !important;
}

.materiais-page .mp-filter-pill:active,
.materiais-page .mp-filter-pill:focus {
    background: #ffffff !important;
    color: var(--mp-text) !important;
    border-color: var(--mp-border) !important;
}
.materiais-page .mp-filter-pill.active:active,
.materiais-page .mp-filter-pill.active:focus {
    background: var(--mp-primary) !important;
    color: #ffffff !important;
}

.materiais-page .mp-filter-tag:active,
.materiais-page .mp-filter-tag:focus {
    background: #ffffff !important;
    color: var(--mp-muted) !important;
    border-color: var(--mp-border) !important;
}
.materiais-page .mp-filter-tag.active:active,
.materiais-page .mp-filter-tag.active:focus {
    background: var(--mp-primary) !important;
    color: #ffffff !important;
}

.materiais-page .mp-produto-cta-btn:active,
.materiais-page .mp-produto-cta-btn:focus {
    background: var(--mp-accent) !important;
    color: #1a1200 !important;
}

.materiais-page .mp-concurso-banner-limpar:active,
.materiais-page .mp-concurso-banner-limpar:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.materiais-page .mp-chip-remove:active,
.materiais-page .mp-chip-remove:focus {
    background: var(--mp-primary) !important;
}

.materiais-page .mp-produto-fav-btn:active,
.materiais-page .mp-produto-fav-btn:focus,
.materiais-page .mp-produto-share-btn:active,
.materiais-page .mp-produto-share-btn:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #6B7280 !important;
}
.materiais-page .mp-produto-fav-btn.is-fav:active,
.materiais-page .mp-produto-fav-btn.is-fav:focus {
    color: #DC2626 !important;
}

/* ============================================
   RESPONSIVO
   ============================================ */

@media (max-width: 1200px) {
    .mp-produtos-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}

@media (max-width: 960px) {
    .mp-hero-titulo { font-size: 36px; }
    .mp-hero-stat { padding: 0 18px; }
    .mp-hero-stat-val { font-size: 17px; }
    .mp-trust-inner { grid-template-columns: repeat(2, 1fr); }
    .mp-produtos-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

@media (max-width: 640px) {
    .mp-hero { padding: 28px 16px 64px; }
    .mp-hero-titulo { font-size: 30px; }
    .mp-hero-pill { font-size: 10px; padding: 5px 12px; }
    .mp-hero-sub { font-size: 14px; max-width: 100%; }
    .mp-hero-btn-primary,
    .mp-hero-btn-outline { font-size: 12px; padding: 10px 18px; width: 100%; justify-content: center; }
    .mp-hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .mp-hero-actions > *:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 240px;
        margin: 0 auto;
    }

    /* ── Compact theme header on materiais page ── */
    body.materiais-page .site-header,
    body.materiais-page .ast-primary-header-bar {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    body.materiais-page .ast-site-identity img,
    body.materiais-page .custom-logo {
        max-height: 30px;
        width: auto;
    }

    .mp-hero-stats { flex-direction: column; gap: 8px; margin-top: 22px; }
    .mp-hero-stat { flex-direction: row; gap: 6px; padding: 0; }
    .mp-hero-stat-divider { display: none; }
    .mp-hero-stat-val { font-size: 15px; }
    .mp-hero-stat-label { font-size: 10px; }
    .mp-trust-inner { grid-template-columns: 1fr 1fr; gap: 12px; }
    .mp-produtos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 10px 20px; }
    .mp-section-titulo { font-size: 17px; }
    .mp-section-header { padding: 20px 16px 12px; flex-wrap: wrap; gap: 8px; }
    .mp-faixa-cta { padding: 18px 16px; flex-direction: column; align-items: flex-start; gap: 14px; }
    .mp-cta-final-simplificado-titulo { font-size: 20px; }
    .mp-cta-final-simplificado { padding: 28px 16px 40px; }
    .mp-concurso-banner-icon { display: none; }
    .mp-concurso-banner-text strong { font-size: 13px; }
    .mp-concurso-banner-text span { font-size: 11px; }
    .mp-concurso-banner-limpar { font-size: 11px; padding: 6px 10px; }
    .mp-divisor-genericos { padding: 20px 16px; }
    .mp-aviso-inner { padding: 14px 16px; gap: 10px; }
    .mp-aviso-icon { display: none; }
    .mp-section-badge-especifico,
    .mp-section-tag-generico { font-size: 10px; padding: 3px 8px; }
    .materiais-page .mp-produto-img-wrap { height: 150px !important; }

    /* Mobile apostila carousel: hide arrows, snap scrolling */
    #mpApostilasPrev,
    #mpApostilasNext { display: none; }
    .mp-carousel-wrap { padding: 0 16px 16px; }
    .mp-carousel-track { gap: 10px; padding: 8px 2px 12px; }

    /* ── Mobile: Por Concurso / Por Matéria: esfera + região toggles ── */
    .mp-esfera-toggles,
    .mp-regiao-toggles {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        padding: 0 0 4px;
        gap: 5px;
    }
    .mp-esfera-toggles::-webkit-scrollbar { display: none; }
    .mp-regiao-toggles::-webkit-scrollbar { display: none; }
    .mp-esfera-btn { white-space: nowrap; flex: 1 1 0; min-width: 0; flex-shrink: 1; font-size: 11px; padding: 5px 7px; }
    .mp-regiao-btn { white-space: nowrap; flex-shrink: 0; width: auto; height: auto; padding: 3px; }
    .mp-regiao-icon { width: 38px; height: 38px; }
    .mp-regiao-icon img { width: 36px; height: 36px; }
    .mp-taxo-dropdown-row { max-width: 100%; }
    .mp-accordion-header { padding: 12px 14px; }
    .mp-accordion-body { padding: 10px 12px 14px; }
    .mp-accordion-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* ── Mobile: esconde "Ver Todos" do cabeçalho na seção Cursos ── */
    .mp-ver-todos-cursos { display: none; }
    .mp-ver-todos-wrap { padding: 4px 16px 24px; }
    .mp-ver-todos-btn { font-size: 13px; padding: 11px 22px; width: 100%; justify-content: center; }
}



/* ── Skeleton ── */
@keyframes mp-sk-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.mp-skeleton-wrap {
    display: contents;
}

.mp-skeleton-card {
    pointer-events: none;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(13,31,61,0.06);
}

.mp-sk-img {
    height: 150px;
    background: linear-gradient(90deg, #f0f2f5 25%, #e6e9ef 50%, #f0f2f5 75%);
    background-size: 800px 100%;
    animation: mp-sk-shimmer 1.5s infinite ease-in-out;
}

.mp-sk-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f2f5 25%, #e6e9ef 50%, #f0f2f5 75%);
    background-size: 800px 100%;
    animation: mp-sk-shimmer 1.5s infinite ease-in-out;
    margin: 8px 12px 0;
}

.mp-sk-line-sm { width: 40%; }
.mp-sk-line-lg { width: 85%; height: 14px; margin-top: 10px; }
.mp-sk-line-md { width: 60%; }
.mp-sk-btn {
    height: 36px;
    border-radius: 8px;
    margin: 14px 12px 12px;
    background: linear-gradient(90deg, #f0f2f5 25%, #e6e9ef 50%, #f0f2f5 75%);
    background-size: 800px 100%;
    animation: mp-sk-shimmer 1.5s infinite ease-in-out;
}

/* ── Mobile: hero, trust bar, FAB ── */
@media (max-width: 767px) {
    .mp-hero { padding: 28px 14px 64px; }
    .mp-hero-titulo { font-size: 28px; }
    .mp-hero-sub { font-size: 14px; }
    .mp-trust-bar-inner { grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 14px; }
    .mp-filter-fab {
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        padding: 12px 18px;
        font-size: 14px;
        gap: 6px;
    }
}

/* A barra inferior global (.bc-mobile-bottom-bar) aparece até 768px e tem
   z-index 9999; o FAB precisa do mesmo offset já nessa largura, senão fica
   atrás dela (era o que o "cortava" na borda inferior). */
@media (max-width: 768px) {
    .materiais-page .mp-filter-fab {
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 380px) {
    .mp-search-input { font-size: 14px; }
    .materiais-page .mp-produto-img-wrap { height: 130px !important; }
    .mp-hero-titulo { font-size: 24px; }
    .mp-trust-bar-inner { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ── Scroll margin para seções âncora ── */
#secaoPorConcurso,
#secaoPorMateria,
#secaoApostilas,
#secaoCursos,
#secaoSimulados {
    scroll-margin-top: 20px;
}

/* ── Animação spin para download ── */
@keyframes mp-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.animate-spin { animation: mp-spin 1s linear infinite; display: inline-block; }

/* ============================================
   POR ÁREA — pílulas com avatar + painel de matérias
   ============================================ */

.mp-area-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.mp-area-header-info {
    min-width: 0;
}

.mp-area-busca {
    margin-left: auto;
}

.materiais-page .mp-area-busca .mp-concurso-busca-input {
    width: 260px;
    height: 38px;
    padding: 0 16px 0 38px;
    border: 1.5px solid var(--mp-border);
    border-radius: 999px;
    font-size: 13px;
    background: #fff;
}

.materiais-page .mp-area-busca .mp-busca-icon {
    left: 14px;
}

.materiais-page .mp-area-busca .mp-concurso-busca-input:focus {
    border-color: var(--mp-primary);
    box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.1);
}

.mp-area-pills-wrap {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.mp-area-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.materiais-page .mp-area-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    max-width: 100%;
    padding: 0 14px 0 6px;
    background: #fff;
    border: 1.5px solid var(--mp-border);
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    animation: mp-area-pill-in 0.38s ease backwards;
    animation-delay: calc(var(--i, 0) * 28ms);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s;
}

@keyframes mp-area-pill-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .materiais-page .mp-area-pill {
        animation: none;
    }
}

.materiais-page .mp-area-pill:hover {
    transform: translateY(-2px);
    border-color: hsl(var(--area-hue) 65% 48%);
    box-shadow: 0 6px 16px hsl(var(--area-hue) 65% 45% / 0.18);
    background: #fff;
    color: var(--mp-text);
}

.materiais-page .mp-area-pill:focus {
    transform: translateY(-2px);
    border-color: hsl(var(--area-hue) 65% 48%);
    background: #fff;
    color: var(--mp-text);
}

.materiais-page .mp-area-pill:focus-visible {
    outline: 2px solid hsl(var(--area-hue) 65% 48%);
    outline-offset: 2px;
}

.materiais-page .mp-area-pill.open {
    background: linear-gradient(135deg, hsl(var(--area-hue) 70% 52% / 0.13), hsl(calc(var(--area-hue) + 40) 70% 55% / 0.05));
    border-color: hsl(var(--area-hue) 65% 48%);
    box-shadow: 0 0 0 3px hsl(var(--area-hue) 70% 50% / 0.18);
}

.materiais-page .mp-area-emblem {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, hsl(var(--area-hue) 70% 55%), hsl(calc(var(--area-hue) + 40) 70% 60%));
}

.materiais-page .mp-area-emblem::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: #f3f5f9;
}

.materiais-page .mp-area-emblem img {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.materiais-page .mp-area-emblem-iniciais {
    position: relative;
    z-index: 1;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    color: hsl(var(--area-hue) 65% 42%);
}

.materiais-page .mp-area-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.materiais-page .mp-area-count {
    flex-shrink: 0;
    padding: 2px 7px;
    background: #f1f4f9;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mp-muted);
}

.materiais-page .mp-area-pill.open .mp-area-label {
    color: hsl(var(--area-hue) 65% 38%);
}

.materiais-page .mp-area-pill.open .mp-area-count {
    background: hsl(var(--area-hue) 70% 55% / 0.18);
    color: hsl(var(--area-hue) 65% 38%);
}

.mp-area-empty {
    margin: 4px 0 0;
    padding: 20px;
    background: #fff;
    border: 1.5px dashed var(--mp-border);
    border-radius: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--mp-muted);
}

.mp-area-pills-fade {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 36px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 80%);
    transition: opacity 0.25s;
}

.mp-area-pills-wrap--recolhido .mp-area-pills-fade {
    opacity: 1;
}

.mp-ver-todos-wrap--areas {
    margin-top: 14px;
}

.mp-ver-todos-wrap--areas .mp-ver-todos-icone {
    transition: transform 0.25s;
}

.mp-area-pills-wrap--expandido ~ .mp-ver-todos-wrap--areas .mp-ver-todos-icone {
    transform: rotate(45deg);
}

.mp-subject-panel {
    position: relative;
    max-width: 1400px;
    margin: 20px auto;
    padding: 18px 24px;
    background: #fff;
    border: 1.5px solid var(--mp-border);
    border-top: 3px solid hsl(var(--area-hue, 212) 65% 48%);
    border-radius: 14px;
    animation: mp-subject-panel-in 0.28s ease both;
}

@keyframes mp-subject-panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .materiais-page .mp-subject-panel {
        animation: none;
    }
}

.materiais-page #mpSubjectResultsWrap {
    margin-top: 24px;
}

.mp-subject-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mp-text);
    margin: 0 0 12px;
}

.mp-subject-panel-title::before {
    content: 'Matérias de';
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mp-muted);
}

.mp-subject-panel-avatar {
    position: relative;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, hsl(var(--area-hue, 212) 70% 55%), hsl(calc(var(--area-hue) + 40) 70% 60%));
}

.mp-subject-panel-avatar::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: #fff;
}

.mp-subject-panel-avatar img {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.mp-subject-panel-avatar .mp-area-emblem-iniciais {
    position: relative;
    z-index: 1;
    font-size: 9px;
}

.mp-subject-panel-nome {
    font-size: 13px;
    font-weight: 700;
    color: var(--mp-text);
}

.mp-subject-results-title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 800;
    color: var(--mp-text);
}

.mp-subject-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.materiais-page .mp-subject-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: #fff;
    border: 1.5px solid var(--mp-border);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mp-text);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.materiais-page .mp-subject-chip:hover {
    border-color: hsl(var(--area-hue, 212) 65% 55%);
}

.mp-subject-chip-count {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--mp-muted);
}

.materiais-page .mp-subject-chip.sel {
    background: hsl(var(--area-hue, 212) 65% 48%);
    border-color: hsl(var(--area-hue, 212) 65% 48%);
    color: #fff;
}

.materiais-page .mp-subject-chip.sel .mp-subject-chip-count {
    color: rgba(255, 255, 255, 0.85);
}

/* ── Drawer: Area Mini Grid ── */

.mp-area-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.mp-area-mini {
    border: 1.5px solid var(--mp-border);
    background: #fafbfc;
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mp-text);
    cursor: pointer;
    font-family: inherit;
}

.mp-area-mini.on,
.mp-area-mini.active {
    border-color: var(--mp-accent);
    background: #fff7ea;
}

.materiais-page .mp-area-mini:hover,
.materiais-page .mp-area-mini:focus {
    background: #fafbfc !important;
    color: var(--mp-text) !important;
    border-color: var(--mp-primary) !important;
}

.mp-area-mini-emblem {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef0f4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
}

.mp-area-mini-emblem-iniciais {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: hsl(var(--area-hue, 212) 65% 42%);
}

.mp-subject-mini-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    max-height: 180px;
    overflow-y: auto;
}

/* ── Responsivo: Por Área ── */

@media (max-width: 960px) {
    .mp-area-header {
        flex-direction: column;
        align-items: stretch;
    }
    .materiais-page .mp-area-busca {
        margin-left: 0;
        width: 100%;
    }
    .materiais-page .mp-area-busca .mp-concurso-busca-input {
        width: 100%;
    }
    .mp-area-pills {
        gap: 8px;
    }
    .materiais-page .mp-area-pill {
        height: 40px;
        gap: 8px;
        padding: 0 12px 0 5px;
    }
    .materiais-page .mp-area-emblem {
        width: 28px;
        height: 28px;
    }
    .materiais-page .mp-area-emblem img {
        width: 16px;
        height: 16px;
    }
    .materiais-page .mp-area-emblem-iniciais {
        font-size: 10px;
    }
    .materiais-page .mp-area-label {
        font-size: 12px;
        max-width: 150px;
    }
    .mp-area-mini-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .mp-area-pills-wrap {
        padding: 0 14px;
    }
    .mp-area-pills-fade {
        left: 14px;
        right: 14px;
    }
    .materiais-page .mp-area-label {
        max-width: 120px;
    }
    .mp-subject-panel {
        padding: 14px 16px;
        margin: 12px 14px 0;
    }
    .materiais-page .mp-subject-chip {
        font-size: 11.5px;
        padding: 7px 12px;
    }
    .mp-subject-panel-title {
        flex-wrap: wrap;
    }
}

/* ── Scroll margin for new sections ── */
#secaoGratuitos,
#secaoDestaque {
    scroll-margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   FULL-BLEED HEADER (pagina-materiais-fullbleed)
   Remove as restrições de max-width/padding do Astra para que
   o hero ocupe toda a largura da janela.
   ═══════════════════════════════════════════════════════════════════ */

body.pagina-materiais-fullbleed .site-header,
body.pagina-materiais-fullbleed .ast-primary-header-bar {
    max-width: 100% !important;
}

/* O container INTERNO do header mantém respiro horizontal (hamburguer
   não fica colado na borda/scrollbar) enquanto o max-width continua 100%. */
body.pagina-materiais-fullbleed .site-header .ast-container,
body.pagina-materiais-fullbleed .ast-primary-header-bar .ast-container {
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Só o container do CONTEÚDO mantém padding zero (necessário para o
   full-bleed do hero, que usa width:100vw + margem negativa). */
body.pagina-materiais-fullbleed .site-content .ast-container,
body.pagina-materiais-fullbleed .content-area .ast-container,
body.pagina-materiais-fullbleed #primary .ast-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CONCURSO TOPO (carrossel de bolinhas)
   Exibido logo abaixo da trust bar, antes do conteúdo principal.
   ═══════════════════════════════════════════════════════════════════ */

.materiais-page .mp-concurso-topo {
    background: transparent;
    padding: 16px 24px;
}

.materiais-page .mp-concurso-topo-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Filtros row (abrangência à esquerda, busca à direita) ── */

.materiais-page .mp-concurso-filtros-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.materiais-page .mp-concurso-filtros-row .mp-esfera-toggles {
    margin-bottom: 0;
    gap: 6px;
}

.materiais-page .mp-concurso-filtros-row .mp-esfera-btn {
    padding: 5px 14px;
    font-size: 12px;
}

/* ── Busca input (à direita da row de abrangência) ── */

.materiais-page .mp-concurso-busca-input-wrap {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}

.materiais-page .mp-concurso-busca-input-wrap .mp-busca-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mp-muted);
    pointer-events: none;
}

.materiais-page .mp-concurso-busca-input {
    width: 220px;
    padding: 7px 12px 7px 32px;
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    font-size: 13px;
    background: var(--mp-surface, #fff);
    color: var(--mp-text);
    outline: none;
    transition: border-color 0.2s;
}

.materiais-page .mp-concurso-busca-input:focus {
    border-color: var(--mp-primary);
}

.materiais-page .mp-concurso-busca-input::placeholder {
    color: var(--mp-muted);
}

/* ── Região toggles no topo (base .mp-regiao-toggles + botão "Todas") ── */

.materiais-page #secaoConcursoTopo .mp-regiao-toggles {
    margin-bottom: 0;
}

.materiais-page .mp-regiao-btn-todas {
    padding: 7px 18px;
    border-radius: 20px;
    border: 1.5px solid var(--mp-border);
    background: white;
    color: var(--mp-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    line-height: 1.4;
}

.materiais-page .mp-regiao-btn-todas:hover {
    border-color: var(--mp-primary);
    color: var(--mp-primary);
    background: #f8faff;
}

.materiais-page .mp-regiao-btn-todas.active {
    background: rgba(245, 158, 11, 0.16);
    border-color: var(--mp-accent);
    color: var(--mp-accent-dark);
}

/* No topo, o "Todas" da região acompanha o tamanho compacto da abrangência */
.materiais-page #secaoConcursoTopo .mp-regiao-btn-todas {
    padding: 5px 14px;
    font-size: 12px;
}

/* ── Carrossel (scroll horizontal) ── */

.materiais-page .mp-concurso-carousel-section {
    padding: 16px 24px 8px;
    background: transparent;
}

.materiais-page .mp-concurso-carousel-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.materiais-page .mp-concurso-carousel {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.materiais-page .mp-concurso-carousel::-webkit-scrollbar {
    height: 4px;
}

.materiais-page .mp-concurso-carousel::-webkit-scrollbar-thumb {
    background: var(--mp-border);
    border-radius: 2px;
}

/* ── Bolinha ── */

.materiais-page .mp-concurso-bolinha {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.2s;
    min-width: 80px;
    height: auto;
    flex-shrink: 0;
    font-family: inherit;
}

.materiais-page .mp-concurso-bolinha:hover {
    background: var(--mp-primary-light, #eef2ff);
}

.materiais-page .mp-concurso-bolinha.selected {
    background: var(--mp-primary);
}

.materiais-page .mp-concurso-bolinha.selected .mp-concurso-bolinha-circle {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.materiais-page .mp-concurso-bolinha.selected .mp-concurso-bolinha-label {
    color: #fff;
}

.materiais-page .mp-concurso-bolinha.selected .mp-concurso-bolinha-count {
    color: rgba(255,255,255,0.8);
}

.materiais-page .mp-concurso-bolinha-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mp-primary-light, #eef2ff);
    color: var(--mp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    overflow: hidden;
    transition: all 0.2s;
}

.materiais-page .mp-concurso-bolinha-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.materiais-page .mp-concurso-bolinha-label {
    font-size: 11px;
    color: var(--mp-text);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 88px;
    word-break: break-word;
    text-align: center;
    line-height: 1.25;
    transition: color 0.2s;
}

.materiais-page .mp-concurso-bolinha-count {
    font-size: 10px;
    color: var(--mp-muted);
    transition: color 0.2s;
}

/* ── Responsivo ── */

@media (max-width: 960px) {
    .materiais-page .mp-concurso-topo {
        padding: 12px 16px;
    }
    .materiais-page .mp-concurso-carousel-section {
        padding: 12px 16px 8px;
    }
    .materiais-page .mp-concurso-filtros-row {
        display: block;
    }
    .materiais-page .mp-concurso-filtros-row .mp-esfera-toggles,
    .materiais-page #secaoConcursoTopo .mp-regiao-toggles,
    .materiais-page .mp-concurso-busca-input-wrap {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        box-sizing: border-box;
    }
    .materiais-page .mp-concurso-busca-input-wrap {
        order: 3;
        margin-top: 2px;
    }
    .materiais-page .mp-concurso-busca-input {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 640px) {
    .materiais-page .mp-concurso-topo {
        padding: 10px 12px;
    }
    .materiais-page .mp-concurso-carousel-section {
        padding: 10px 12px 8px;
    }
    .materiais-page .mp-concurso-bolinha-circle {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
    .materiais-page .mp-concurso-bolinha {
        min-width: 68px;
        padding: 6px 8px;
    }
    .materiais-page .mp-concurso-bolinha-label {
        font-size: 10px;
        max-width: 72px;
    }
    .materiais-page #secaoConcursoTopo .mp-regiao-btn-todas {
        padding: 5px 10px;
        font-size: 11px;
    }
    .materiais-page #secaoConcursoTopo .mp-concurso-busca-input {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .materiais-page .mp-concurso-filtros-row .mp-esfera-btn {
        flex: 1 1 0;
        max-width: none;
        white-space: nowrap;
        padding: 5px 10px;
        font-size: 11px;
    }
    .materiais-page .mp-concurso-filtros-row .mp-esfera-toggles {
        gap: 4px;
    }
}

/* ── Ajustes solicitados — etapa 2 ── */
@media (max-width: 640px) {
    /* Resultados de Por Área quase encostam nas laterais da viewport. */
    .materiais-page #mpSubjectResultsWrap #mpSubjectProdutosGrid {
        grid-template-columns: 1fr !important;
        padding-left: 4px;
        padding-right: 4px;
        gap: 12px;
    }

    .materiais-page #mpSubjectResultsWrap .mp-cursos-grid,
    .materiais-page #mpSubjectResultsWrap .mp-simulados-grid {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Duas apostilas visíveis no carrossel mobile. */
    .materiais-page #mpApostilasTrack .mp-produto-card {
        flex-basis: calc((100% - 10px) / 2) !important;
        min-width: 0 !important;
    }
}

/* O botão Todas de região usa a mesma geometria do botão Todas de abrangência;
   somente o estado ativo conserva a identidade laranja da região. */
.materiais-page #secaoConcursoTopo .mp-regiao-btn-todas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    border: 1.5px solid var(--mp-border);
    border-radius: 20px;
    background: #fff;
    color: var(--mp-muted);
    font-family: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s;
    padding: 5px 14px;
    font-size: 12px;
}

.materiais-page #secaoConcursoTopo .mp-regiao-btn-todas:hover {
    border-color: var(--mp-primary);
    color: var(--mp-primary);
    background: #f8faff;
}

.materiais-page #secaoConcursoTopo .mp-regiao-btn-todas.active {
    background: var(--mp-accent);
    border-color: var(--mp-accent);
    color: #fff;
}

@media (max-width: 640px) {
    .materiais-page #secaoConcursoTopo .mp-regiao-btn-todas {
        flex: 0 0 auto;
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* ── Correções etapa 3 ── */
.materiais-page #secaoConcursoTopo .mp-regiao-btn-todas {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box;
    padding: 5px 14px !important;
    border-radius: 20px !important;
}

@media (max-width: 640px) {
    /* Cursos Online: dois cards lado a lado (4 por tela), sem a regra geral
       de uma coluna. Só quem tem "Tamanho original" marcado recebe a caixa
       1:1 (bloco "Card de Curso Online"); os demais mantêm o 4/3 antigo. */
    .materiais-page #secaoCursos .mp-cursos-grid,
    .materiais-page #secaoCursos .mp-cursos-grid-extra {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .materiais-page #secaoCursos .mp-card-curso:not([data-tamanho-original="1"]) .mp-produto-img-wrap {
        aspect-ratio: 4 / 3;
        height: auto !important;
        max-height: 170px;
    }

    /* Continuação de Cursos Online: mesma grade de 2 colunas, arte inteira
       em 1:1 (nada de max-height, como em #secaoCursos). No mobile a seção
       ainda dispensa título: a grade entra direto abaixo de Cursos Online,
       separada só pelo filete. */
    .materiais-page #secaoCursosOriginais .mp-cursos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
        padding: 14px 8px 24px;
    }

    .materiais-page #secaoCursosOriginais .mp-section-header {
        display: none;
    }

    /* Destaque vira carrossel: trilho horizontal com 2 por tela, snap e
       sem barra de rolagem. A grade de desktop continua valendo acima.
       Os cards extras são movidos para este mesmo trilho pelo botão
       "Ver Todos", formando um carrossel contínuo. */
    .materiais-page #secaoDestaque .mp-cursos-grid {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        padding: 8px 12px 12px;
        max-width: 1400px;
        margin: 0 auto;
    }

    .materiais-page #secaoDestaque .mp-cursos-grid::-webkit-scrollbar {
        display: none;
    }

    .materiais-page #secaoDestaque .mp-cursos-grid > * {
        flex: 0 0 calc((100% - 10px) / 2) !important;
        min-width: 0 !important;
        max-width: calc((100% - 10px) / 2) !important;
        scroll-snap-align: start;
    }

    .materiais-page #secaoConcursoTopo .mp-regiao-btn-todas {
        padding: 5px 10px !important;
        font-size: 11px;
    }
}

/* As bolinhas do carrossel do Destaque só existem no mobile (onde a seção
   é carrossel); no desktop a grade continua sendo uma grade. */
.materiais-page #secaoDestaque .mp-carousel-dots {
    display: none;
}

@media (max-width: 640px) {
    .materiais-page #secaoDestaque .mp-carousel-dots {
        display: flex;
    }
}

/* O plugin/tema define display:grid !important nos cards; esta classe garante
   que os filtros consigam ocultar os produtos que não correspondem. */
.materiais-page .mp-produto-card.mp-filtro-oculto,
.materiais-page a.mp-produto-card.mp-filtro-oculto,
.materiais-page a.mp-produto-card.wp-dark-mode-bg-image.mp-filtro-oculto {
    display: none !important;
}

/* O botão regional Todas deve ter exatamente a mesma caixa do Todas azul. */
.materiais-page #secaoConcursoTopo .mp-regiao-btn-todas {
    width: auto !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}

@media (max-width: 640px) {
    .materiais-page #secaoConcursoTopo .mp-regiao-btn-todas {
        height: 29px !important;
        min-height: 29px !important;
        padding: 5px 10px !important;
    }
}

/* Ajuste final do grupo de filtros: o deslocamento do botão regional é
   exclusivamente vertical; sua origem horizontal volta a coincidir com a
   origem do grupo azul. */
.materiais-page #secaoConcursoTopo .mp-regiao-toggles {
    margin-left: 0 !important;
}
@media (max-width: 640px) {
    .materiais-page #secaoConcursoTopo .mp-regiao-btn-todas {
        width: calc((100% - 18px) / 4) !important;
        min-width: calc((100% - 18px) / 4) !important;
        max-width: calc((100% - 18px) / 4) !important;
        transform: translateY(6px);
    }
}

/* Limite inicial de nove Cursos Online durante filtros ativos. */
.materiais-page .mp-produto-card.mp-limite-filtro,
.materiais-page a.mp-produto-card.mp-limite-filtro,
.materiais-page a.mp-produto-card.wp-dark-mode-bg-image.mp-limite-filtro {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — PÁGINA MATERIAIS (marketplace)
   Redefine os tokens locais --mp-* e trata literais claros soltos.
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .materiais-page,
html.wp-dark-mode-active .materiais-page {
    --mp-primary: #3b82f6;
    --mp-primary-dark: #2563eb;
    --mp-bg: #0f172a;
    --mp-card: #1e293b;
    --mp-border: #475569;
    --mp-text: #f1f5f9;
    --mp-muted: #94a3b8;
}

/* Fundos de marca voltam à cor naval original (primary virou azul claro) */
html[data-theme="dark"] .materiais-page .mp-hero,
html.wp-dark-mode-active .materiais-page .mp-hero {
    background: #1B3A6B;
}
html[data-theme="dark"] .materiais-page .mp-hero-bg::after,
html.wp-dark-mode-active .materiais-page .mp-hero-bg::after {
    background: linear-gradient(to right, #1B3A6B 40%, transparent);
}
html[data-theme="dark"] .materiais-page .mp-concurso-banner,
html.wp-dark-mode-active .materiais-page .mp-concurso-banner {
    background: linear-gradient(135deg, #1B3A6B 0%, #2563eb 100%);
}
html[data-theme="dark"] .materiais-page .mp-faixa-cta,
html.wp-dark-mode-active .materiais-page .mp-faixa-cta {
    background: linear-gradient(135deg, #1B3A6B 0%, #2563EB 100%);
}
/* Botão VER MATERIAIS (hero): texto branco no dark em todos os estados */
html[data-theme="dark"] .materiais-page .mp-hero-btn-primary,
html[data-theme="dark"] .materiais-page .mp-hero-btn-primary:link,
html[data-theme="dark"] .materiais-page .mp-hero-btn-primary:visited,
html[data-theme="dark"] .materiais-page .mp-hero-btn-primary:hover,
html[data-theme="dark"] .materiais-page .mp-hero-btn-primary:active,
html[data-theme="dark"] .materiais-page .mp-hero-btn-primary:focus,
html.wp-dark-mode-active .materiais-page .mp-hero-btn-primary,
html.wp-dark-mode-active .materiais-page .mp-hero-btn-primary:link,
html.wp-dark-mode-active .materiais-page .mp-hero-btn-primary:visited,
html.wp-dark-mode-active .materiais-page .mp-hero-btn-primary:hover,
html.wp-dark-mode-active .materiais-page .mp-hero-btn-primary:active,
html.wp-dark-mode-active .materiais-page .mp-hero-btn-primary:focus {
    color: #ffffff !important;
}
/* CTA do single de material (+ cards): texto branco no dark em todos os estados */
html[data-theme="dark"] .materiais-page .mp-produto-cta-btn,
html[data-theme="dark"] .materiais-page .mp-produto-cta-btn:link,
html[data-theme="dark"] .materiais-page .mp-produto-cta-btn:visited,
html[data-theme="dark"] .materiais-page .mp-produto-cta-btn:hover,
html[data-theme="dark"] .materiais-page .mp-produto-cta-btn:active,
html[data-theme="dark"] .materiais-page .mp-produto-cta-btn:focus,
html[data-theme="dark"] .materiais-page .bc-material-btn,
html[data-theme="dark"] .materiais-page .bc-material-btn:link,
html[data-theme="dark"] .materiais-page .bc-material-btn:visited,
html[data-theme="dark"] .materiais-page .bc-material-btn:hover,
html[data-theme="dark"] .materiais-page .bc-material-btn:active,
html[data-theme="dark"] .materiais-page .bc-material-btn:focus,
html.wp-dark-mode-active .materiais-page .mp-produto-cta-btn,
html.wp-dark-mode-active .materiais-page .mp-produto-cta-btn:link,
html.wp-dark-mode-active .materiais-page .mp-produto-cta-btn:visited,
html.wp-dark-mode-active .materiais-page .mp-produto-cta-btn:hover,
html.wp-dark-mode-active .materiais-page .mp-produto-cta-btn:active,
html.wp-dark-mode-active .materiais-page .mp-produto-cta-btn:focus,
html.wp-dark-mode-active .materiais-page .bc-material-btn,
html.wp-dark-mode-active .materiais-page .bc-material-btn:link,
html.wp-dark-mode-active .materiais-page .bc-material-btn:visited,
html.wp-dark-mode-active .materiais-page .bc-material-btn:hover,
html.wp-dark-mode-active .materiais-page .bc-material-btn:active,
html.wp-dark-mode-active .materiais-page .bc-material-btn:focus {
    color: #ffffff !important;
}

/* Bolinhas do carrossel de concursos (primary-light caí em #eef2ff) */
html[data-theme="dark"] .materiais-page .mp-concurso-bolinha:hover,
html.wp-dark-mode-active .materiais-page .mp-concurso-bolinha:hover,
html[data-theme="dark"] .materiais-page .mp-concurso-bolinha-circle,
html.wp-dark-mode-active .materiais-page .mp-concurso-bolinha-circle {
    background: var(--dm-bg-input);
    color: var(--dm-blue);
}
/* Ícones de região (círculo) — consistência com as bolinhas de concurso */
html[data-theme="dark"] .materiais-page .mp-regiao-icon,
html.wp-dark-mode-active .materiais-page .mp-regiao-icon {
    background: var(--dm-bg-input);
}
html[data-theme="dark"] .materiais-page .mp-regiao-btn.active .mp-regiao-icon,
html.wp-dark-mode-active .materiais-page .mp-regiao-btn.active .mp-regiao-icon {
    background: rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 0 3px var(--dm-blue);
}

/* ── Filter drawer ── */
html[data-theme="dark"] .materiais-page .mp-filter-drawer,
html.wp-dark-mode-active .materiais-page .mp-filter-drawer {
    background: var(--dm-bg-card);
}
html[data-theme="dark"] .materiais-page .mp-filter-drawer-header,
html.wp-dark-mode-active .materiais-page .mp-filter-drawer-header,
html[data-theme="dark"] .materiais-page .mp-filter-drawer-footer,
html.wp-dark-mode-active .materiais-page .mp-filter-drawer-footer {
    border-color: var(--dm-border);
}
html[data-theme="dark"] .materiais-page .mp-filter-group,
html.wp-dark-mode-active .materiais-page .mp-filter-group {
    border-color: var(--dm-border-lt);
}
html[data-theme="dark"] .materiais-page .mp-filter-drawer-close,
html.wp-dark-mode-active .materiais-page .mp-filter-drawer-close {
    background: var(--dm-bg-hover);
}
html[data-theme="dark"] .materiais-page .mp-filter-drawer-close:active,
html.wp-dark-mode-active .materiais-page .mp-filter-drawer-close:active,
html[data-theme="dark"] .materiais-page .mp-filter-drawer-close:focus,
html.wp-dark-mode-active .materiais-page .mp-filter-drawer-close:focus {
    background: var(--dm-bg-hover) !important;
    color: var(--dm-txt-main) !important;
}
html[data-theme="dark"] .materiais-page .mp-filter-check-box,
html.wp-dark-mode-active .materiais-page .mp-filter-check-box {
    border-color: var(--dm-border);
}

/* ── Pills / tags / checklists ── */
html[data-theme="dark"] .materiais-page .mp-filter-pill,
html.wp-dark-mode-active .materiais-page .mp-filter-pill,
html[data-theme="dark"] .materiais-page .mp-filter-tag,
html.wp-dark-mode-active .materiais-page .mp-filter-tag,
html[data-theme="dark"] .materiais-page .mp-filter-btn-limpar,
html.wp-dark-mode-active .materiais-page .mp-filter-btn-limpar {
    background: var(--dm-bg-card);
}
html[data-theme="dark"] .materiais-page .mp-filter-pill:hover,
html.wp-dark-mode-active .materiais-page .mp-filter-pill:hover,
html[data-theme="dark"] .materiais-page .mp-filter-tag:hover,
html.wp-dark-mode-active .materiais-page .mp-filter-tag:hover,
html[data-theme="dark"] .materiais-page .mp-filter-check-row:hover,
html.wp-dark-mode-active .materiais-page .mp-filter-check-row:hover,
html[data-theme="dark"] .materiais-page .mp-filter-pill-acesso.pago:hover,
html.wp-dark-mode-active .materiais-page .mp-filter-pill-acesso.pago:hover {
    background: var(--dm-bg-hover);
}
html[data-theme="dark"] .materiais-page .mp-filter-pill-acesso.gratis:hover,
html.wp-dark-mode-active .materiais-page .mp-filter-pill-acesso.gratis:hover {
    background: rgba(16, 185, 129, 0.12);
}
html[data-theme="dark"] .materiais-page .mp-filter-btn-limpar:hover,
html.wp-dark-mode-active .materiais-page .mp-filter-btn-limpar:hover {
    background: var(--dm-bg-hover);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .materiais-page .mp-filter-pill:active,
html.wp-dark-mode-active .materiais-page .mp-filter-pill:active,
html[data-theme="dark"] .materiais-page .mp-filter-pill:focus,
html.wp-dark-mode-active .materiais-page .mp-filter-pill:focus,
html[data-theme="dark"] .materiais-page .mp-filter-tag:active,
html.wp-dark-mode-active .materiais-page .mp-filter-tag:active,
html[data-theme="dark"] .materiais-page .mp-filter-tag:focus,
html.wp-dark-mode-active .materiais-page .mp-filter-tag:focus,
html[data-theme="dark"] .materiais-page .mp-filter-btn-limpar:active,
html.wp-dark-mode-active .materiais-page .mp-filter-btn-limpar:active,
html[data-theme="dark"] .materiais-page .mp-filter-btn-limpar:focus,
html.wp-dark-mode-active .materiais-page .mp-filter-btn-limpar:focus {
    background: var(--dm-bg-card) !important;
}

/* ── Busca (autocomplete + input) ── */
html[data-theme="dark"] .materiais-page .mp-search-suggest,
html.wp-dark-mode-active .materiais-page .mp-search-suggest {
    background: var(--dm-bg-card);
}
html[data-theme="dark"] .materiais-page .mp-suggest-item,
html.wp-dark-mode-active .materiais-page .mp-suggest-item {
    color: var(--dm-txt-main);
    border-color: var(--dm-border-lt);
}
html[data-theme="dark"] .materiais-page .mp-suggest-item small,
html.wp-dark-mode-active .materiais-page .mp-suggest-item small {
    color: var(--dm-txt-muted);
}
html[data-theme="dark"] .materiais-page .mp-suggest-item:hover,
html.wp-dark-mode-active .materiais-page .mp-suggest-item:hover {
    background: var(--dm-bg-hover);
}
html[data-theme="dark"] .materiais-page .mp-filter-search-input,
html.wp-dark-mode-active .materiais-page .mp-filter-search-input {
    background: var(--dm-bg-input);
    color: var(--dm-txt-main);
}
html[data-theme="dark"] .materiais-page .mp-filter-search-input::placeholder,
html.wp-dark-mode-active .materiais-page .mp-filter-search-input::placeholder {
    color: var(--dm-txt-faint);
}

/* ── Trust bar / seções ── */
html[data-theme="dark"] .materiais-page .mp-trust-inner,
html.wp-dark-mode-active .materiais-page .mp-trust-inner,
html[data-theme="dark"] .materiais-page .mp-section,
html.wp-dark-mode-active .materiais-page .mp-section,
html[data-theme="dark"] .materiais-page .mp-concurso-section,
html.wp-dark-mode-active .materiais-page .mp-concurso-section,
html[data-theme="dark"] .materiais-page .mp-taxo-section,
html.wp-dark-mode-active .materiais-page .mp-taxo-section,
html[data-theme="dark"] .materiais-page .mp-busca-resultados,
html.wp-dark-mode-active .materiais-page .mp-busca-resultados,
html[data-theme="dark"] .materiais-page .mp-vazio,
html.wp-dark-mode-active .materiais-page .mp-vazio {
    background: var(--dm-bg-card);
}
html[data-theme="dark"] .materiais-page .mp-busca-header,
html.wp-dark-mode-active .materiais-page .mp-busca-header {
    border-color: var(--dm-border-lt);
}
html[data-theme="dark"] .materiais-page .mp-busca-header p,
html.wp-dark-mode-active .materiais-page .mp-busca-header p,
html[data-theme="dark"] .materiais-page .mp-vazio p,
html.wp-dark-mode-active .materiais-page .mp-vazio p {
    color: var(--dm-txt-muted);
}
html[data-theme="dark"] .materiais-page .mp-busca-header strong,
html.wp-dark-mode-active .materiais-page .mp-busca-header strong,
html[data-theme="dark"] .materiais-page .mp-vazio h3,
html.wp-dark-mode-active .materiais-page .mp-vazio h3 {
    color: var(--dm-txt-main);
}
html[data-theme="dark"] .materiais-page .mp-vazio svg,
html.wp-dark-mode-active .materiais-page .mp-vazio svg {
    color: var(--dm-border);
}

/* ── Cards de produto ── */
html[data-theme="dark"] .materiais-page a.mp-produto-card,
html.wp-dark-mode-active .materiais-page a.mp-produto-card,
html[data-theme="dark"] .materiais-page a.mp-produto-card.wp-dark-mode-bg-image,
html.wp-dark-mode-active .materiais-page a.mp-produto-card.wp-dark-mode-bg-image {
    background: var(--dm-bg-card);
}
html[data-theme="dark"] .materiais-page a.mp-produto-card:hover,
html.wp-dark-mode-active .materiais-page a.mp-produto-card:hover {
    border-color: var(--dm-border-lt) !important;
}
html[data-theme="dark"] .materiais-page .mp-produto-titulo,
html.wp-dark-mode-active .materiais-page .mp-produto-titulo {
    color: var(--dm-txt-main);
}
html[data-theme="dark"] .materiais-page .mp-produto-meta-sep,
html.wp-dark-mode-active .materiais-page .mp-produto-meta-sep {
    color: var(--dm-border);
}
/* Placeholder de produto sem foto: gradiente azul-claro → escuro */
html[data-theme="dark"] .materiais-page .mp-produto-placeholder,
html.wp-dark-mode-active .materiais-page .mp-produto-placeholder {
    background: linear-gradient(135deg, var(--dm-bg-accent), var(--dm-bg-card));
}

/* ── Mini cards (Por Concurso) ── */
html[data-theme="dark"] .materiais-page a.mp-card-mini-apostila,
html.wp-dark-mode-active .materiais-page a.mp-card-mini-apostila,
html[data-theme="dark"] .materiais-page a.mp-card-mini-curso,
html.wp-dark-mode-active .materiais-page a.mp-card-mini-curso {
    background: var(--dm-bg-card);
}

/* ── Faixa CTA (botão) ── */
html[data-theme="dark"] .materiais-page .mp-faixa-btn,
html.wp-dark-mode-active .materiais-page .mp-faixa-btn {
    background: var(--dm-bg-card);
    color: var(--dm-blue);
}

/* ── Divisores / avisos ── */
html[data-theme="dark"] .materiais-page .mp-divisor-genericos,
html.wp-dark-mode-active .materiais-page .mp-divisor-genericos {
    background: var(--dm-bg-root);
}
html[data-theme="dark"] .materiais-page .mp-divisor-linha,
html.wp-dark-mode-active .materiais-page .mp-divisor-linha {
    background: var(--dm-border);
}
html[data-theme="dark"] .materiais-page .mp-divisor-texto,
html.wp-dark-mode-active .materiais-page .mp-divisor-texto {
    color: var(--dm-txt-muted);
}
html[data-theme="dark"] .materiais-page .mp-divisor-texto svg,
html.wp-dark-mode-active .materiais-page .mp-divisor-texto svg {
    color: var(--dm-txt-faint);
}
html[data-theme="dark"] .materiais-page .mp-aviso-genericos,
html.wp-dark-mode-active .materiais-page .mp-aviso-genericos {
    background: var(--dm-bg-accent);
    border-left-color: var(--dm-blue);
}
html[data-theme="dark"] .materiais-page .mp-aviso-icon,
html.wp-dark-mode-active .materiais-page .mp-aviso-icon {
    color: var(--dm-blue);
}
html[data-theme="dark"] .materiais-page .mp-aviso-texto strong,
html.wp-dark-mode-active .materiais-page .mp-aviso-texto strong {
    color: var(--dm-txt-main);
}
html[data-theme="dark"] .materiais-page .mp-aviso-texto span,
html.wp-dark-mode-active .materiais-page .mp-aviso-texto span {
    color: var(--dm-txt-muted);
}

/* ── Chips de filtros ativos / badges ── */
html[data-theme="dark"] .materiais-page .mp-chip,
html.wp-dark-mode-active .materiais-page .mp-chip {
    background: var(--dm-bg-accent);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .materiais-page .mp-section-badge-especifico,
html.wp-dark-mode-active .materiais-page .mp-section-badge-especifico {
    background: var(--dm-bg-accent);
}
html[data-theme="dark"] .materiais-page .mp-section-tag-generico,
html.wp-dark-mode-active .materiais-page .mp-section-tag-generico {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.25);
}
html[data-theme="dark"] .materiais-page .mp-produto-frete,
html.wp-dark-mode-active .materiais-page .mp-produto-frete,
html[data-theme="dark"] .materiais-page .mp-produto-preco.gratis-preco,
html.wp-dark-mode-active .materiais-page .mp-produto-preco.gratis-preco {
    color: #34d399;
}

/* ── Tabs / toggles / dropdowns / acordeão ── */
html[data-theme="dark"] .materiais-page .mp-concurso-tab,
html.wp-dark-mode-active .materiais-page .mp-concurso-tab,
html[data-theme="dark"] .materiais-page .mp-esfera-btn,
html.wp-dark-mode-active .materiais-page .mp-esfera-btn,
html[data-theme="dark"] .materiais-page .mp-regiao-btn-todas,
html.wp-dark-mode-active .materiais-page .mp-regiao-btn-todas,
html[data-theme="dark"] .materiais-page #secaoConcursoTopo .mp-regiao-btn-todas,
html.wp-dark-mode-active .materiais-page #secaoConcursoTopo .mp-regiao-btn-todas {
    background: var(--dm-bg-card);
}
html[data-theme="dark"] .materiais-page .mp-concurso-tab:hover,
html.wp-dark-mode-active .materiais-page .mp-concurso-tab:hover,
html[data-theme="dark"] .materiais-page .mp-esfera-btn:hover,
html.wp-dark-mode-active .materiais-page .mp-esfera-btn:hover,
html[data-theme="dark"] .materiais-page .mp-regiao-btn-todas:hover,
html.wp-dark-mode-active .materiais-page .mp-regiao-btn-todas:hover,
html[data-theme="dark"] .materiais-page #secaoConcursoTopo .mp-regiao-btn-todas:hover,
html.wp-dark-mode-active .materiais-page #secaoConcursoTopo .mp-regiao-btn-todas:hover {
    background: var(--dm-bg-hover);
}
html[data-theme="dark"] .materiais-page .mp-esfera-btn:active,
html.wp-dark-mode-active .materiais-page .mp-esfera-btn:active,
html[data-theme="dark"] .materiais-page .mp-esfera-btn:focus,
html.wp-dark-mode-active .materiais-page .mp-esfera-btn:focus {
    background: var(--dm-bg-card) !important;
}
html[data-theme="dark"] .materiais-page .mp-taxo-dropdown-input,
html.wp-dark-mode-active .materiais-page .mp-taxo-dropdown-input,
html[data-theme="dark"] .materiais-page .mp-accordion-search-input,
html.wp-dark-mode-active .materiais-page .mp-accordion-search-input {
    background: var(--dm-bg-input);
}
html[data-theme="dark"] .materiais-page .mp-taxo-dropdown-list,
html.wp-dark-mode-active .materiais-page .mp-taxo-dropdown-list,
html[data-theme="dark"] .materiais-page .mp-accordion-item,
html.wp-dark-mode-active .materiais-page .mp-accordion-item {
    background: var(--dm-bg-card);
}
html[data-theme="dark"] .materiais-page .mp-taxo-dropdown-item,
html.wp-dark-mode-active .materiais-page .mp-taxo-dropdown-item {
    border-color: var(--dm-border-lt);
}
html[data-theme="dark"] .materiais-page .mp-taxo-dropdown-item:hover,
html.wp-dark-mode-active .materiais-page .mp-taxo-dropdown-item:hover,
html[data-theme="dark"] .materiais-page .mp-accordion-header:hover,
html.wp-dark-mode-active .materiais-page .mp-accordion-header:hover {
    background: var(--dm-bg-hover);
}
html[data-theme="dark"] .materiais-page .mp-taxo-dropdown-count,
html.wp-dark-mode-active .materiais-page .mp-taxo-dropdown-count {
    background: var(--dm-bg-hover);
}
html[data-theme="dark"] .materiais-page .mp-taxonomy-emblem,
html.wp-dark-mode-active .materiais-page .mp-taxonomy-emblem {
    background: linear-gradient(135deg, hsl(var(--tax-hue, 212) 60% 60% / 0.22), hsl(calc(var(--tax-hue, 212) + 40) 60% 62% / 0.1));
    box-shadow: inset 0 0 0 1.5px hsl(var(--tax-hue, 212) 55% 65% / 0.32);
}
html[data-theme="dark"] .materiais-page .mp-taxonomy-emblem-iniciais,
html.wp-dark-mode-active .materiais-page .mp-taxonomy-emblem-iniciais {
    color: hsl(var(--tax-hue, 212) 70% 78%);
}
html[data-theme="dark"] .materiais-page .mp-taxo-placeholder,
html.wp-dark-mode-active .materiais-page .mp-taxo-placeholder {
    background: var(--dm-bg-hover);
}

/* ── Por Área (pílulas / painel de matérias) ── */
html[data-theme="dark"] .materiais-page .mp-area-pill,
html.wp-dark-mode-active .materiais-page .mp-area-pill,
html[data-theme="dark"] .materiais-page .mp-subject-panel,
html.wp-dark-mode-active .materiais-page .mp-subject-panel,
html[data-theme="dark"] .materiais-page .mp-subject-chip,
html.wp-dark-mode-active .materiais-page .mp-subject-chip,
html[data-theme="dark"] .materiais-page .mp-area-empty,
html.wp-dark-mode-active .materiais-page .mp-area-empty {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .materiais-page .mp-area-pill:hover:not(.open),
html.wp-dark-mode-active .materiais-page .mp-area-pill:hover:not(.open),
html[data-theme="dark"] .materiais-page .mp-area-pill:focus:not(.open),
html.wp-dark-mode-active .materiais-page .mp-area-pill:focus:not(.open) {
    background: var(--dm-bg-card) !important;
    border-color: hsl(var(--area-hue) 60% 62%) !important;
}
html[data-theme="dark"] .materiais-page .mp-area-pill.open,
html.wp-dark-mode-active .materiais-page .mp-area-pill.open {
    background: linear-gradient(135deg, hsl(var(--area-hue) 45% 32% / 0.55), hsl(calc(var(--area-hue) + 40) 45% 34% / 0.3));
    border-color: hsl(var(--area-hue) 60% 62%);
    box-shadow: 0 0 0 3px hsl(var(--area-hue) 60% 55% / 0.22);
}
html[data-theme="dark"] .materiais-page .mp-area-pill.open .mp-area-label,
html.wp-dark-mode-active .materiais-page .mp-area-pill.open .mp-area-label,
html[data-theme="dark"] .materiais-page .mp-area-pill.open .mp-area-count,
html.wp-dark-mode-active .materiais-page .mp-area-pill.open .mp-area-count {
    color: hsl(var(--area-hue) 70% 80%);
}
html[data-theme="dark"] .materiais-page .mp-area-pill.open .mp-area-count,
html.wp-dark-mode-active .materiais-page .mp-area-pill.open .mp-area-count {
    background: hsl(var(--area-hue) 60% 60% / 0.22);
}
html[data-theme="dark"] .materiais-page .mp-area-label,
html.wp-dark-mode-active .materiais-page .mp-area-label,
html[data-theme="dark"] .materiais-page .mp-subject-panel-nome,
html.wp-dark-mode-active .materiais-page .mp-subject-panel-nome,
html[data-theme="dark"] .materiais-page .mp-subject-results-title,
html.wp-dark-mode-active .materiais-page .mp-subject-results-title {
    color: var(--dm-txt-main);
}
html[data-theme="dark"] .materiais-page .mp-area-count,
html.wp-dark-mode-active .materiais-page .mp-area-count,
html[data-theme="dark"] .materiais-page .mp-subject-chip-count,
html.wp-dark-mode-active .materiais-page .mp-subject-chip-count {
    color: var(--dm-txt-muted);
}
html[data-theme="dark"] .materiais-page .mp-area-count,
html.wp-dark-mode-active .materiais-page .mp-area-count {
    background: var(--dm-bg-hover);
}
html[data-theme="dark"] .materiais-page .mp-area-emblem::before,
html.wp-dark-mode-active .materiais-page .mp-area-emblem::before,
html[data-theme="dark"] .materiais-page .mp-subject-panel-avatar::before,
html.wp-dark-mode-active .materiais-page .mp-subject-panel-avatar::before {
    background: var(--dm-bg-card);
}
html[data-theme="dark"] .materiais-page .mp-area-emblem-iniciais,
html.wp-dark-mode-active .materiais-page .mp-area-emblem-iniciais,
html[data-theme="dark"] .materiais-page .mp-area-mini-emblem-iniciais,
html.wp-dark-mode-active .materiais-page .mp-area-mini-emblem-iniciais {
    color: hsl(var(--area-hue, 212) 70% 72%);
}
html[data-theme="dark"] .materiais-page .mp-subject-panel,
html.wp-dark-mode-active .materiais-page .mp-subject-panel {
    border-top-color: hsl(var(--area-hue, 212) 60% 60%);
}
html[data-theme="dark"] .materiais-page .mp-subject-chip.sel,
html.wp-dark-mode-active .materiais-page .mp-subject-chip.sel {
    background: hsl(var(--area-hue, 212) 55% 52%);
    border-color: hsl(var(--area-hue, 212) 55% 52%);
    color: #fff;
}
html[data-theme="dark"] .materiais-page .mp-subject-chip.sel .mp-subject-chip-count,
html.wp-dark-mode-active .materiais-page .mp-subject-chip.sel .mp-subject-chip-count {
    color: rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] .materiais-page .mp-area-pills-fade,
html.wp-dark-mode-active .materiais-page .mp-area-pills-fade {
    background: linear-gradient(to bottom, rgba(30, 41, 59, 0), var(--dm-bg-card) 80%);
}
html[data-theme="dark"] .materiais-page .mp-area-mini,
html.wp-dark-mode-active .materiais-page .mp-area-mini {
    background: var(--dm-bg-hover);
}
html[data-theme="dark"] .materiais-page .mp-area-mini:hover,
html.wp-dark-mode-active .materiais-page .mp-area-mini:hover,
html[data-theme="dark"] .materiais-page .mp-area-mini:focus,
html.wp-dark-mode-active .materiais-page .mp-area-mini:focus {
    background: var(--dm-bg-hover) !important;
}
html[data-theme="dark"] .materiais-page .mp-area-mini.on,
html.wp-dark-mode-active .materiais-page .mp-area-mini.on,
html[data-theme="dark"] .materiais-page .mp-area-mini.active,
html.wp-dark-mode-active .materiais-page .mp-area-mini.active {
    background: rgba(245, 158, 11, 0.12);
}
html[data-theme="dark"] .materiais-page .mp-area-mini-emblem,
html.wp-dark-mode-active .materiais-page .mp-area-mini-emblem {
    background: var(--dm-bg-hover);
}

/* ── Skeleton ── */
html[data-theme="dark"] .materiais-page .mp-skeleton-card,
html.wp-dark-mode-active .materiais-page .mp-skeleton-card {
    background: var(--dm-bg-card);
}
html[data-theme="dark"] .materiais-page .mp-sk-img,
html[data-theme="dark"] .materiais-page .mp-sk-line,
html[data-theme="dark"] .materiais-page .mp-sk-btn,
html.wp-dark-mode-active .materiais-page .mp-sk-img,
html.wp-dark-mode-active .materiais-page .mp-sk-line,
html.wp-dark-mode-active .materiais-page .mp-sk-btn {
    background-image: linear-gradient(90deg, #263148 25%, #2d3f5e 50%, #263148 75%);
}

/* ═══════════════════════════════════════════════════════════
   HERO CONTEXTUAL — Materiais de um Concurso Específico
   Substitui o Hero genérico + Trust Bar + navegação de
   instituições quando a página é acessada via ?concurso=slug
════════════════════════════════════════════════════════════ */

.mp-hero-concurso-especifico {
    padding: 56px 24px 48px;
    background: linear-gradient(145deg, var(--mp-primary-dark, #0f1c3f) 0%, var(--mp-primary, #1E3A8A) 100%);
    text-align: center;
}

.mp-hero-concurso-especifico-inner {
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mp-hero-concurso-emblema {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 18px;
}

.mp-hero-concurso-emblema img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-hero-concurso-emblema--iniciais {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.02em;
}

.mp-hero-concurso-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 99px;
    margin-bottom: 14px;
}

.mp-hero-concurso-titulo {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    line-height: 1.3;
}

.mp-hero-concurso-nome {
    color: #ffb020;
}

.mp-hero-concurso-sub {
    margin: 0 0 22px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    max-width: 480px;
}

.mp-hero-concurso-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--mp-primary, #1E3A8A);
    font-size: 14px;
    font-weight: 800;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mp-hero-concurso-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.24);
    color: var(--mp-primary, #1E3A8A);
    text-decoration: none;
}

@media (max-width: 640px) {
    .mp-hero-concurso-especifico {
        padding: 40px 16px 32px;
    }
    .mp-hero-concurso-titulo {
        font-size: 22px;
    }
}