/* ==========================================================================
   Identidade Visual Curtapra.me - Override Mag-News
   ========================================================================== */

/* 1. Variáveis de Cor (Paleta Principal) */
:root {
    --curta-destaque: #8e1479; /* RGB(142, 20, 121) - Botões, Badges, Tags */
    --curta-header: #91158f;   /* RGB(145, 21, 143) - Fundos de Header e Footer */
    --curta-link: #d34ad2;     /* RGB(211, 74, 210) - Links, Efeitos Hover */
}

/* ==========================================================================
   2. CABEÇALHO (HEADER) E NAVEGAÇÃO - CORREÇÃO DE VISIBILIDADE
   ========================================================================== */
.container-menu-desktop, 
.wrap-main-nav, 
.top-bar {
    background-color: var(--curta-header) !important;
}

/* Força a cor branca nos links do menu */
.main-menu > li > a {
    color: #d34ad2 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Cor do item ativo e Hover */
.main-menu > .main-menu-active > a,
.main-menu > li:hover > a {
    color: var(--curta-link) !important;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Ajuste das Categorias para não ficarem lado a lado se não desejado */
.category-card-custom img {
    width: 100%;
    height: 150px; /* Menor que o topo */
    object-fit: cover;
    border-radius: 4px;
}

.logo img {
    max-height: 55px; /* Ajuste para a proporção da logo do curtapra.me */
    width: auto;
}

/* ==========================================================================
   3. RODAPÉ (FOOTER)
   ========================================================================== */
.footer-curta, 
.bg11 {
    background-color: var(--curta-header) !important;
}

.border-top-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Borda dos botões institucionais (Privacidade, Termos, Contato) */
.bocl12 {
    border-color: var(--curta-link) !important; 
}

/* Efeito ao passar o mouse nos botões institucionais */
.hov-btn2:hover {
    background-color: var(--curta-destaque) !important; 
    border-color: var(--curta-destaque) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   4. COMPONENTES: BADGES, BOTÕES E DESTAQUES GERAIS
   ========================================================================== */
.how-active1, 
.bg1, 
.btn-back-to-top, 
.tag-item,
.bg-destaque {
    background-color: var(--curta-destaque) !important;
}

/* ==========================================================================
   5. COMPONENTES: LINKS, TÍTULOS E EFEITOS HOVER EM NOTÍCIAS
   ========================================================================== */
.f1-s-3:hover, 
.hov-cl10:hover, 
.cl11 {
    color: var(--curta-link) !important;
}

/* Títulos dos cards de notícias */
.how1-child2:hover h5 a {
    color: var(--curta-link) !important;
}

/* ==========================================================================
   6. AJUSTES
   ========================================================================== */

/* Correção de Distorção de Imagens */
.wrap1-pic-w img, 
.wrap-pic-w img,
.how1-child2 img {
    width: 100%;
    height: 200px; /* Altura fixa para alinhar os cards */
    object-fit: cover; /* Mantém a proporção sem distorcer */
    object-position: center;
}

/* Ajuste específico para o bloco de 'Mais Clicadas' */
.how1-child2 {
    overflow: hidden;
    border-radius: 8px;
}

/* Efeito Mouseover nos Títulos (Ponto 5) */
.hov-cl10:hover {
    color: var(--curta-link) !important;
    transition: all 0.3s;
}

/* Efeito de Zoom e Overlay nas Imagens (Ponto 5) */
.hov1 {
    display: block;
    overflow: hidden;
    position: relative;
}

.hov1 img {
    transition: all 0.5s;
}

.hov1:hover img {
    transform: scale(1.1);
}

.hov1::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(142, 20, 121, 0.2); /* Cor de destaque com transparência */
    opacity: 0;
    transition: all 0.5s;
}

.hov1:hover::after {
    opacity: 1;
}

/* Remove setas/retângulos do menu (Ponto 2) */
.main-menu > li > a::after {
    display: none !important;
    content: none !important;
}

/* Espaçamento e Fundo da Logo (Ponto 1) */
.wrap-logo {
    background-color: #ffffff;
    border-bottom: 1px solid #f2f2f2;
	justify-content: center;
}

.logo img {
    max-height: 85px; /* Tamanho maior para logo central */
    width: auto;
}

/* Ajuste de margem para o primeiro box de notícias */
section.bg0.p-t-70 {
    padding-top: 40px !important; /* Reduz o espaço excessivo se houver */
}