/* 
 * DESIGN SYSTEM V3.1 - ESTILO TABLOIDE (ALTO CONTRASTE)
 * Desenvolvido por Michael Dalia para Professor Deveza
 */

:root {
    --vermelho-jornal: #cc0000;
    --preto-tabloide: #000000;
    --branco-papel: #ffffff;
    --cinza-claro: #f0f0f0;
    --borda-grossa: 4px solid #000000;
}

body {
    background-color: var(--cinza-claro) !important;
    font-family: 'Outfit', sans-serif !important;
}

/* 1. TÍTULOS DE SEÇÃO */
.titulo-tabloide h1,
.titulo-tabloide h2,
.titulo-tabloide h3,
h1.titulo-tabloide,
h2.titulo-tabloide,
h3.titulo-tabloide,
.titulo-tabloide .elementor-heading-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 4rem !important;
    background-color: var(--preto-tabloide);
    color: var(--branco-papel) !important;
    display: inline-block;
    padding: 5px 25px !important;
    transform: skewX(-10deg);
    margin-bottom: 30px !important;
    line-height: 1 !important;
}

.titulo-jornal h1,
.titulo-jornal h2,
.titulo-jornal h3,
h1.titulo-jornal,
h2.titulo-jornal,
h3.titulo-jornal,
.titulo-jornal .elementor-heading-title {
    font-family: 'Playfair Display', serif !important;
    font-weight: 900 !important;
    font-size: 3.5rem !important;
    color: var(--preto-tabloide) !important;
    border-top: 10px solid var(--preto-tabloide);
    border-bottom: 4px solid var(--preto-tabloide);
    padding: 10px 0 !important;
    display: block;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
}

/* 1.2 TÍTULO ESTILO CARIMBO (Para Material Didático) */
.titulo-arquivo h1,
.titulo-arquivo h2,
.titulo-arquivo h3,
h1.titulo-arquivo,
h2.titulo-arquivo,
h3.titulo-arquivo,
.titulo-arquivo .elementor-heading-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 3.5rem !important;
    color: var(--vermelho-jornal) !important;
    border: 6px solid var(--vermelho-jornal);
    padding: 10px 30px !important;
    display: inline-block;
    text-transform: uppercase;
    transform: rotate(-2deg);
    /* Efeito de carimbo inclinado */
    margin-bottom: 40px !important;
    line-height: 1 !important;
}

/* 1.3 SUBTÍTULO (Para seções como Devezada) */
.subtitulo-tabloide,
.subtitulo-tabloide p,
.subtitulo-tabloide h2,
.subtitulo-tabloide h3,
.subtitulo-tabloide h4,
.subtitulo-tabloide div {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--vermelho-jornal) !important;
    margin-top: 10px !important;
    /* Espaço positivo para não encavalar */
    margin-bottom: 20px !important;
    display: block;
    text-align: center;
    border: none !important;
}



/* 2. CÍRCULOS DO ANO (SHORTCODE) */
.deveza-year-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.deveza-year-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: var(--vermelho-jornal);
    background-size: cover;
    background-position: center;
    position: relative;
    border: 6px solid var(--preto-tabloide);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 10px 10px 0px var(--vermelho-jornal);
}

.circle-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.deveza-year-circle:hover .circle-overlay {
    background: rgba(204, 0, 0, 0.7);
}

/* O CHARME: Efeito de Giro e Zoom no Hover */
.deveza-year-circle:hover {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 15px 15px 0px var(--preto-tabloide);
}

.circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 2;
    width: 100%;
}

.ano-num {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 5.5rem;
    line-height: 1;
    text-shadow: 3px 3px 0px var(--preto-tabloide);
}

.ano-txt {
    display: block;
    font-weight: 900;
    letter-spacing: 5px;
    font-size: 1.2rem;
}

/* 3. POST DE DESTAQUE (MANCHETE GIGANTE) */
.post-destaque.post-destaque.post-destaque {
    /* Tripla classe para ganhar do Elementor */
    background: white !important;
    border: 8px solid var(--preto-tabloide) !important;
    padding: 0 !important;
    box-shadow: 20px 20px 0px var(--preto-tabloide) !important;
}

.post-destaque h2,
.post-destaque h3,
.post-destaque .eael-entry-title,
.post-destaque .elementor-post__title {
    font-size: 4.5rem !important;
    /* Aumentei ainda mais */
    font-family: 'Playfair Display', serif !important;
    font-weight: 900 !important;
    line-height: 0.8 !important;
    margin: 30px !important;
    text-transform: uppercase;
}

.post-destaque h2 a,
.post-destaque h3 a,
.post-destaque .eael-entry-title a,
.post-destaque .elementor-post__title a {
    color: var(--preto-tabloide) !important;
    text-decoration: none !important;
    font-size: inherit !important;
}

/* 4. CLASSE PARA GRADE DE POSTS (.grade-tabloide) */
.grade-tabloide .eael-post-grid,
.grade-tabloide .elementor-posts-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    /* Espaçamento automático e limpo entre posts */
}

.grade-tabloide .eael-grid-post,
.grade-tabloide .elementor-post {
    background: white !important;
    border: 3px solid var(--preto-tabloide) !important;
    margin: 0 !important;
    /* Removemos o margin fixo que quebrava a linha */
    box-shadow: 8px 8px 0px var(--preto-tabloide) !important;
    transition: all 0.2s ease !important;
    flex: 1 1 calc(25% - 20px) !important;
    /* Força 4 colunas respeitando o gap */
    min-width: 250px;
    /* Garante que no mobile ele não fique espremido */
}

.grade-tabloide .eael-grid-post:hover,
.grade-tabloide .elementor-post:hover {
    box-shadow: 8px 8px 0px var(--vermelho-jornal) !important;
    transform: translate(-3px, -3px);
}

.grade-tabloide .eael-entry-title a,
.grade-tabloide .elementor-post__title a {
    font-family: 'Playfair Display', serif !important;
    font-weight: 900 !important;
    font-size: 1.6rem !important;
    line-height: 1 !important;
    padding: 15px !important;
    display: block;
    color: var(--preto-tabloide) !important;
}

.grade-tabloide .eael-grid-post:hover .eael-entry-title a,
.grade-tabloide .elementor-post:hover .elementor-post__title a {
    background-color: var(--preto-tabloide);
    color: white !important;
}

/* Ajuste de Imagem na Grade */
.grade-tabloide img {
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-bottom: 3px solid var(--preto-tabloide) !important;
}

/* 5. MATERIAL DIDÁTICO (ESTILO FICHA DE ARQUIVO) */
.deveza-material-card {
    background: white;
    border: 4px solid var(--preto-tabloide);
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: 30px;
    box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.05);
}

.deveza-material-card:hover {
    transform: translateY(-10px);
    box-shadow: 12px 12px 0px var(--vermelho-jornal);
}

.deveza-material-card a {
    text-decoration: none;
    color: inherit;
}

.material-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    border-bottom: 4px solid var(--preto-tabloide);
    position: relative;
}

.material-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--vermelho-jornal);
    color: white;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    padding: 5px 15px;
    border: 2px solid var(--preto-tabloide);
    transform: rotate(5deg);
    box-shadow: 3px 3px 0px var(--preto-tabloide);
}

.material-content {
    padding: 20px 12px;
    /* Menor padding lateral para dar mais espaço ao texto */
    text-align: center;
}

.material-content h3 {
    font-family: 'Playfair Display', serif !important;
    font-weight: 900 !important;
    font-size: 1.35rem !important;
    /* Tamanho tabloide responsivo ideal */
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
    text-transform: uppercase;
    word-wrap: break-word !important;
    /* Garante quebra de termos longos como contemporânea */
    overflow-wrap: break-word !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    /* Faz o fundo preto envolver perfeitamente o texto */
    padding: 2px 8px !important;
    background-color: transparent;
}

.deveza-material-card:hover .material-content h3 {
    background-color: var(--preto-tabloide) !important;
    color: white !important;
}

/* 6.1 GRADE DE MATERIAIS RESPONSIVA */
.deveza-materials-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    width: 100% !important;
    margin-bottom: 30px !important;
}

.deveza-materials-grid .deveza-material-card {
    flex: 1 1 calc(25% - 20px) !important;
    /* Padrão: 4 colunas */
    min-width: 250px !important;
    margin-bottom: 0 !important;
}

/* 6.2 DYNAMIC COLUMNS (PORTAL CONFIGURATIONS) */
.deveza-materials-grid.deveza-grid-col-2 .deveza-material-card {
    flex: 1 1 calc(50% - 20px) !important;
}

.deveza-materials-grid.deveza-grid-col-3 .deveza-material-card {
    flex: 1 1 calc(33.333% - 20px) !important;
}

.deveza-materials-grid.deveza-grid-col-4 .deveza-material-card {
    flex: 1 1 calc(25% - 20px) !important;
}

@media (max-width: 991px) {
    .deveza-materials-grid .deveza-material-card {
        flex: 1 1 calc(50% - 20px) !important;
        /* 2 colunas no tablet */
    }
}

@media (max-width: 600px) {
    .deveza-materials-grid .deveza-material-card {
        flex: 1 1 100% !important;
        /* 1 coluna no mobile */
    }
}

.material-btn {
    display: inline-block;
    background: var(--preto-tabloide);
    color: white;
    font-weight: 900;
    font-size: 0.8rem;
    padding: 8px 20px;
    letter-spacing: 2px;
    transition: background 0.3s ease;
}

.deveza-material-card:hover .material-btn {
    background: var(--vermelho-jornal);
}

/* 6. BOTÃO "VER TUDO" (ESTILO TABLOIDE) */
.btn-jornal .elementor-button {
    background-color: var(--vermelho-jornal) !important;
    border-radius: 0 !important;
    border: 3px solid var(--preto-tabloide) !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 1.8rem !important;
    padding: 15px 40px !important;
    color: white !important;
    box-shadow: 8px 8px 0px var(--preto-tabloide) !important;
    transition: all 0.3s ease !important;
}

.btn-jornal .elementor-button:hover {
    background-color: var(--preto-tabloide) !important;
    transform: translate(-3px, -3px) !important;
    box-shadow: 12px 12px 0px var(--vermelho-jornal) !important;
}

/* 7. ANIMAÇÕES DE REVELAÇÃO E CASCATA (TABLOIDE GENTLE MOTION) */
.deveza-reveal {
    opacity: 0 !important;
    transform: translate(-40px, -20px) scale(0.97) !important;
    /* Deslocamento da esquerda para direita, cima para baixo + leve escala */
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity;
}

.deveza-reveal.revealed {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

/* Efeito de Carimbo Tabloide Shaking para títulos especiais */
@keyframes shakeCarimboTabloide {
    0% {
        transform: translate(-50px, -30px) scale(0.9) rotate(-6deg);
        opacity: 0;
    }

    60% {
        transform: translate(5px, 3px) scale(1.05) rotate(1deg);
        opacity: 0.9;
    }

    80% {
        transform: translate(-2px, -1px) scale(0.98) rotate(-3deg);
        opacity: 0.95;
    }

    100% {
        transform: translate(0, 0) scale(1) rotate(-2deg) !important;
        /* Mantém a inclinação de carimbo original */
        opacity: 1;
    }
}

.deveza-reveal-carimbo {
    opacity: 0;
    /* Sem !important para permitir que o keyframes anime de 0 a 1 perfeitamente */
    will-change: transform, opacity;
}

.deveza-reveal-carimbo.revealed {
    opacity: 1 !important;
    /* Mantém a opacidade forçada após o término do carimbo */
    animation: shakeCarimboTabloide 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* 8. BOTÃO "VER TODOS" UNIVERSAL DO SHORTCODE (ESTILO TABLOIDE) */
.deveza-ver-todos-container {
    text-align: center !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    display: block !important;
}

.deveza-btn-jornal {
    display: inline-block !important;
    background-color: var(--vermelho-jornal) !important;
    border-radius: 0 !important;
    border: 3px solid var(--preto-tabloide) !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 1.6rem !important;
    font-weight: normal !important;
    padding: 15px 45px !important;
    color: white !important;
    text-decoration: none !important;
    box-shadow: 8px 8px 0px var(--preto-tabloide) !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
}

.deveza-btn-jornal:hover {
    background-color: var(--preto-tabloide) !important;
    transform: translate(-4px, -4px) !important;
    box-shadow: 12px 12px 0px var(--vermelho-jornal) !important;
    color: white !important;
    text-decoration: none !important;
}

/* =========================================
   10. CABEÇALHO TABLOIDE (ELEMENTOR HEADER)
   ========================================= */

/* Logo Principal (Texto) */
.header-logo-tabloide h1,
.header-logo-tabloide h2,
.header-logo-tabloide a {
    font-family: 'Playfair Display', serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: var(--preto-tabloide) !important;
    letter-spacing: -1px;
    border-top: 6px solid var(--preto-tabloide);
    border-bottom: 2px solid var(--preto-tabloide);
    display: inline-block;
    padding: 5px 0;
}

/* Imagem/Ilustração (Com efeito jornal/sombra) */
.header-imagem-tabloide img {
    filter: grayscale(100%) contrast(120%) !important;
    /* Deixa com aspecto de foto de jornal impresso */
    filter: drop-shadow(8px 8px 0px var(--vermelho-jornal)) grayscale(100%) contrast(120%) !important;
    transition: all 0.3s ease;
}

.header-imagem-tabloide img:hover {
    filter: drop-shadow(10px 10px 0px var(--preto-tabloide)) grayscale(0%) contrast(100%) !important;
    /* Revela as cores originais no hover */
    transform: translate(-2px, -2px);
}

/* Menu de Navegação */
.header-menu-tabloide .elementor-nav-menu a {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 1.5rem !important;
    color: var(--preto-tabloide) !important;
    letter-spacing: 1px !important;
    padding: 10px 15px !important;
    transition: all 0.2s ease;
}

.header-menu-tabloide .elementor-nav-menu a:hover {
    background-color: var(--vermelho-jornal) !important;
    color: white !important;
    transform: skewX(-5deg);
}

.header-menu-tabloide .elementor-nav-menu--main>ul>li {
    border-right: 2px solid var(--preto-tabloide);
}

.header-menu-tabloide .elementor-nav-menu--main>ul>li:last-child {
    border-right: none;
}

/* Bandeirinha (Ribbon vermelho) */
.header-bandeirinha-tabloide {
    background-color: var(--vermelho-jornal) !important;
    color: white !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 1.2rem !important;
    padding: 5px 20px !important;
    display: inline-block;
    transform: rotate(-3deg);
    box-shadow: 4px 4px 0px var(--preto-tabloide) !important;
    letter-spacing: 2px;
}

/* Dedicatória / Texto Pequeno */
.header-dedicatoria-tabloide {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-size: 1.1rem !important;
    color: var(--preto-tabloide) !important;
    border: 2px dashed var(--preto-tabloide);
    padding: 10px;
    background: var(--branco-papel);
    box-shadow: 3px 3px 0px var(--vermelho-jornal);
}

/* =========================================
   11. SHORTCODE [deveza_header] — CABEÇALHO DINÂMICO
   ========================================= */

.deveza-header-tabloide {
    background-color: var(--branco-papel, #ffffff);
    border-bottom: 6px solid var(--preto-tabloide, #000000);
    font-family: 'Outfit', sans-serif;
    position: relative;
    /* overflow: hidden removido — estava cortando o ribbon, dropdowns e a imagem circular */
}

/* Barra preta no topo */
.top-bar-tabloide {
    background-color: var(--preto-tabloide, #000000);
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 5px 20px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 3px;
}

/* Bandeirinha vermelha inclinada */
.ribbon-diario {
    position: absolute;
    top: 35px;
    left: -30px;
    background: var(--vermelho-jornal, #cc0000);
    color: white;
    font-family: 'Bebas Neue', sans-serif;
    padding: 5px 45px;
    font-size: 1.2rem;
    transform: rotate(-12deg);
    box-shadow: 4px 4px 0px var(--preto-tabloide, #000000);
    z-index: 10;
    letter-spacing: 2px;
}

/* Grid principal do header: Ilustração | Logo | Palestina */
.header-main-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 50px;
    max-width: 1400px;
    margin: 0 auto;
    gap: 20px;
}

/* Ilustração com máscara circular */
.header-illustration {
    flex-shrink: 0;
    /* Não deixa a imagem encolher */
}

.header-illustration a {
    display: block;
}

.header-illustration img {
    width: 200px !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    /* Máscara circular — !important para ganhar do WP */
    border: 5px solid var(--preto-tabloide, #000000) !important;
    box-shadow: 6px 6px 0px var(--vermelho-jornal, #cc0000) !important;
    filter: grayscale(100%) contrast(120%) !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

.header-illustration img:hover {
    filter: grayscale(0%) contrast(100%) !important;
    transform: translate(-2px, -2px) rotate(-2deg) !important;
    box-shadow: 8px 8px 0px var(--preto-tabloide, #000000) !important;
}

/* Logo central — link clicável */
.header-logo-container {
    text-align: center;
    flex: 1;
    min-width: 0;
    /* Impede que o flex item estoure o container */
}

.header-logo-link {
    display: inline-block;
    text-decoration: none;
    color: var(--preto-tabloide, #000000);
    line-height: 1;
    max-width: 100%;
}

/* "professor" — pequeno, itálico, acima do nome principal */
.header-logo-professor {
    display: block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.5rem);
    /* Responsivo: cresce com a tela mas tem limites */
    text-transform: lowercase;
    letter-spacing: 4px;
    color: var(--preto-tabloide, #000000);
    margin-bottom: 0;
}

/* "FELIPE DEVEZA" — grande, estilo manchete de jornal */
.header-logo-deveza {
    display: block;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(2rem, 4.5vw, 4rem);
    /* Menor para caber as duas palavras */
    text-transform: uppercase;
    letter-spacing: -1px;
    color: var(--preto-tabloide, #000000);
    border-top: 4px solid var(--preto-tabloide, #000000);
    border-bottom: 2px solid var(--preto-tabloide, #000000);
    padding: 2px 5px;
    line-height: 1;
    transition: color 0.2s ease;
    white-space: nowrap;
    /* Não quebra linha no nome */
}

.header-logo-link:hover .header-logo-deveza,
.header-logo-link:hover .header-logo-professor {
    color: var(--vermelho-jornal, #cc0000);
}

/* Subtítulo abaixo do logo — BLOCO, em linha única */
.header-logo-container>p {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-size: 0.85rem !important;
    color: var(--preto-tabloide, #000000) !important;
    border-top: 2px dashed var(--preto-tabloide, #000000) !important;
    border-bottom: 2px dashed var(--preto-tabloide, #000000) !important;
    display: block !important;
    text-align: center !important;
    padding: 4px 15px !important;
    margin: 8px auto 0 !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    /* Força uma única linha */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /* Caso ainda assim seja muito longo em mobile */
}

/* Mobile: empilha tudo em coluna */
@media (max-width: 768px) {
    .deveza-header-tabloide .header-main-grid {
        flex-direction: column !important;
        padding: 15px 20px !important;
        gap: 15px !important;
        align-items: center !important;
    }

    .header-illustration img {
        width: 90px !important;
        height: 90px !important;
    }

    .header-logo-deveza {
        font-size: clamp(2rem, 12vw, 3rem) !important;
    }

    .header-logo-professor,
    .subtitulo-tabloide {
        font-size: 0.85rem !important;
        letter-spacing: 2px !important;
    }

    .header-palestine {
        display: none !important;
        /* Oculta bandeirinha no mobile para não poluir */
    }

    .ribbon-diario {
        font-size: 0.85rem !important;
        padding: 4px 30px !important;
        top: 25px !important;
        left: -25px !important;
    }

    .top-bar-tabloide {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
        letter-spacing: 1px !important;
    }

    .deveza-header-tabloide .header-nav-tabloide>ul {
        flex-wrap: wrap !important;
    }

    .deveza-header-tabloide .header-nav-tabloide>ul>li {
        border-right: none !important;
        border-left: none !important;
        border-bottom: 2px solid var(--preto-tabloide, #000000) !important;
        width: 50% !important;
        text-align: center !important;
    }

    .deveza-header-tabloide .header-nav-tabloide>ul>li>a {
        padding: 10px 15px !important;
        font-size: 1.2rem !important;
        justify-content: center !important;
    }
}

/* Bloco da Palestina */
.header-palestine {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 130px;
}

.palestine-top {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    font-size: 0.95rem;
    color: var(--preto-tabloide, #000000);
    text-align: center;
}

.palestine-bottom {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--preto-tabloide, #000000);
    text-align: center;
    border-top: 2px solid var(--preto-tabloide, #000000);
    padding-top: 4px;
    width: 100%;
    text-align: center;
}

.flag-palestine {
    width: 90px;
}

/* Navegação / Menu principal */
.deveza-header-tabloide .header-nav-tabloide {
    border-top: 4px solid var(--preto-tabloide, #000000);
    background: var(--branco-papel, #ffffff);
    position: relative;
    /* Necessário para os dropdowns se posicionarem corretamente */
}

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

/* Cada item do menu raiz */
.deveza-header-tabloide .header-nav-tabloide>ul>li {
    border-right: 2px solid var(--preto-tabloide, #000000);
    position: relative;
    /* CRÍTICO: ancora o dropdown abaixo do item pai */
}

.deveza-header-tabloide .header-nav-tabloide>ul>li:first-child {
    border-left: 2px solid var(--preto-tabloide, #000000);
}

/* Links do menu raiz */
.deveza-header-tabloide .header-nav-tabloide>ul>li>a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 30px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    color: var(--preto-tabloide, #000000);
    text-decoration: none;
    letter-spacing: 2px;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

/* Seta indicadora de sub-menu no item pai */
.deveza-header-tabloide .header-nav-tabloide>ul>li.menu-item-has-children>a::after {
    content: '▾';
    font-size: 1.1rem;
    line-height: 1;
}

.deveza-header-tabloide .header-nav-tabloide>ul>li>a:hover {
    background-color: var(--vermelho-jornal, #cc0000);
    color: white;
}

/* ── DROPDOWN (Sub-menu) ── */
.deveza-header-tabloide .header-nav-tabloide ul li ul.sub-menu {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    /* Abre logo abaixo do item pai */
    left: 0;
    min-width: 240px;
    background: var(--preto-tabloide, #000000);
    border: 3px solid var(--vermelho-jornal, #cc0000);
    border-top: none;
    z-index: 9999;
    /* Animação de abertura suave */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Abre o dropdown ao hover */
.deveza-header-tabloide .header-nav-tabloide ul li:hover>ul.sub-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Links dentro do dropdown */
.deveza-header-tabloide .header-nav-tabloide ul li ul.sub-menu li {
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    /* Para sub-menus de 3º nível */
}

.deveza-header-tabloide .header-nav-tabloide ul li ul.sub-menu li:last-child {
    border-bottom: none;
}

.deveza-header-tabloide .header-nav-tabloide ul li ul.sub-menu li a {
    display: block;
    color: white;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    padding: 10px 20px;
    letter-spacing: 2px;
    text-decoration: none;
    transition: background-color 0.15s ease, padding-left 0.15s ease;
}

.deveza-header-tabloide .header-nav-tabloide ul li ul.sub-menu li a:hover {
    background-color: var(--vermelho-jornal, #cc0000);
    padding-left: 30px;
    /* Pequeno deslize para a direita no hover */
}


/* 9. OTIMIZAÇÕES MOBILE */
@media (max-width: 768px) {

    /* Reduz a manchete gigante para não estourar a tela do celular */
    .post-destaque h2,
    .post-destaque h3,
    .post-destaque .eael-entry-title,
    .post-destaque .elementor-post__title {
        font-size: 2.2rem !important;
        /* Tamanho reduzido para caber bem */
        margin: 15px !important;
        line-height: 1 !important;
    }

    .post-destaque {
        border-width: 4px !important;
        box-shadow: 10px 10px 0px var(--preto-tabloide) !important;
    }

    /* Reduz os círculos de ano para caberem 2 por linha se o Elementor estiver em 50% */
    .deveza-year-wrapper {
        padding: 5px;
        /* Menos padding lateral para não empurrar */
    }

    .deveza-year-circle {
        width: 140px !important;
        height: 140px !important;
        border-width: 4px !important;
        box-shadow: 6px 6px 0px var(--vermelho-jornal) !important;
    }

    .deveza-year-circle:hover {
        transform: scale(1.05) rotate(-3deg) !important;
        box-shadow: 8px 8px 0px var(--preto-tabloide) !important;
    }

    .ano-num {
        font-size: 3.5rem !important;
        /* Reduz fonte do número */
    }

    .ano-txt {
        font-size: 0.9rem !important;
        /* Reduz texto "ANO" */
        letter-spacing: 2px !important;
    }

    /* Títulos de seção menores no mobile */
    .titulo-tabloide h1,
    .titulo-tabloide h2,
    .titulo-tabloide h3,
    h1.titulo-tabloide,
    h2.titulo-tabloide,
    h3.titulo-tabloide,
    .titulo-tabloide .elementor-heading-title {
        font-size: 3rem !important;
        /* Desktop = 4rem → Mobile = 3rem */
        padding: 4px 15px !important;
        margin-bottom: 15px !important;
    }

    .titulo-jornal h1,
    .titulo-jornal h2,
    .titulo-jornal h3,
    h1.titulo-jornal,
    h2.titulo-jornal,
    h3.titulo-jornal,
    .titulo-jornal .elementor-heading-title {
        font-size: 2.8rem !important;
        /* Desktop = 3.5rem → Mobile = 2.8rem */
    }

    .titulo-arquivo h1,
    .titulo-arquivo h2,
    .titulo-arquivo h3,
    h1.titulo-arquivo,
    h2.titulo-arquivo,
    h3.titulo-arquivo,
    .titulo-arquivo .elementor-heading-title {
        font-size: 2.8rem !important;
        /* Desktop = 3.5rem → Mobile = 2.8rem */
        padding: 8px 20px !important;
        margin-bottom: 25px !important;
    }
}