.ver-mais {
    position: relative;
    overflow: hidden;
    /* background-color: #f0f0f0; */
    /* border: 1px solid #ccc; */
    transition: transform 0.3s ease-in-out;
    border-radius: 10px;
}

.ver-mais::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0.5vw;
    right: 0;
    bottom: 0;
    /* background: rgba(0, 0, 0, 0.5); */
    z-index: 1;
    opacity: 0;
    border-radius: 10px;
    transition: opacity 0.3s ease-in-out;
}

.ver-mais::after {
    /* content: "Ver notícia >"; */
    position: absolute;
    z-index: 1;
    /* Coloca o overlay sobre o conteúdo */
    opacity: 0;
    top: 50%;
    left: 44%;
    transition: opacity 0.3s ease-in-out;
    color: white;
    font-size: 120%;
    /* font-family: 'Patua One', cursive !important; */
}

.ver-mais:hover::before {
    opacity: 1;
    /* Torna o overlay visível no hover */
}

.ver-mais:hover::after {
    opacity: 1;
    /* Torna o overlay visível no hover */
}

.ver-mais:hover {
    transform: scale(1.1);
    /* Ajuste conforme necessário */
}

.ver-mais:hover .ver-noticia {
    opacity: 1;
    /* Torna visível no hover */
}

.ver-noticia {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    /* Cor do texto branco */
    opacity: 0;
    /* Inicialmente invisível */
    z-index: 2;
    /* Coloca o texto sobre o overlay */
    transition: opacity 0.3s ease-in-out;
}

/* .idboxhour_1::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0.6vw;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
    width: 4.5vw;
    border-radius: 11px;
    max-height: 6.9vh;
} */

.idboxhour_1 span {
    z-index: 1;
    color: #959595;
}

.idboxhour_1 img {
    position: absolute;
    max-height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.idboxhour_2 {
    width: 100%;
    margin: 0 5px 0 0;
    float: left;
    padding: 17px;
    vertical-align: baseline;
    text-align: center;
    color: #959494;
    font-size: 1.2em;
    font-weight: 700;
}

.navbar-brand.active {
    border-bottom: solid 2px #027f7c;
}

.cat-link {
    color: #027f7c !important;
    border-radius: 10px;
}

.color-dafault {
    color: #027f7c !important;
}

/* .ver-mais .idtitle_1{
    color: #027f7c!important;
} */

.title-default {
    color: #09467a !important;
}

.cat-color-default {
    color: #92c6c4;
}

.link-hat {
    color: #3f3f3f !important;
    font-weight: 300;
}

.input-contato {
    background: #003f75;
    border: none;
    width: 100%;
    padding: 10px;
    color: white;
    outline: none;
    margin: 5px 0;
}

::placeholder {
    color: white;
    opacity: 1;
    /* Firefox */
}

.submit-contato {
    background: #003f75;
    border: none;
    padding: 10px 10px;
    color: white;
    outline: none;
}

.submit-contato:hover {
    background: #002b50;
}

.anunciar-em {
    background: #003f75;
    color: white;
    padding: 10px 10px;
}

.anunciar-em .input-group label {
    margin-left: 10px;
}

.button-label {
    display: inline-block;
    padding: 5px 8px;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    background-color: #007f7c;
    margin: 5px 0;
    font-weight: 100;
}

/* Oculte os inputs de rádio */
.grupo-comunicacao input[type="radio"] {
    display: none;
}

/* Quando o input de rádio estiver marcado, altere o estilo do rótulo */
.grupo-comunicacao input[type="radio"]:checked+label {
    background-color: #005755;
}

.color-anuncie {
    background-color: #027f7c;
    color: white !important;
    padding: 5px 10px;
    border-radius: 10px;
}

.color-anuncie:hover {
    background-color: white;
    color: #027f7c !important;
}

.cat-link:hover {
    background-color: #027f7c;
    color: white !important;
}

.nav-link {
    color: #027f7c !important;
}


.nav-link:hover {
    background-color: #027f7c;
    color: white !important;
}

.active-cat {
    background-color: #027f7c !important;
    color: white !important;
    padding: 5px 10px;
}

.active-cat:hover {
    background-color: #027f7c;
    color: white !important;
}

.nav-custom {
    display: flex;
    align-items: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    position: relative;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.img_noticia {
    height: 40vh;
    background-position: center;
    /* background-size: 100% auto; */
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
}

.img_noticia_principal {
    height: 50vh;
}

.logo {
    max-height: 70px;
}

@media only screen and (max-width: 768px) {
    .logo {
        max-height: initial;
        width: 100%;
    }
}

#social-links ul li a {
    /* Mantém o estilo base acima */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    transition: all 0.2s;
}

/* Cores ao passar o mouse - Visual Minimalista */
#social-links ul li a:hover {
    color: #fff;
    /* Texto branco */
    border-color: transparent;
}

/* Hack para colorir o fundo baseado no ícone interno (já que a lib não põe classe de rede no <a>) */
#social-links ul li a:has(.fa-facebook),
#social-links ul li a:has(.fa-facebook-f),
#social-links ul li a:has(.fa-facebook-square) {
    hover: bg-[#3b5998];
}

/* Exemplo com CSS nesting */

/* Se seu navegador não suportar :has, use cores genéricas ou JS. 
       Mas aqui vai uma estilização "Clean" que funciona sempre: */

#social-links ul li a:hover {
    background-color: #212529;
    /* Preto suave (Dark mode feel) */
    color: #fff;
}

/* Container principal */
#social-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Espaço entre os botões */
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}

/* Estilo base dos botões */
#social-links ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    /* Faz ficar redondo */
    background-color: #f8f9fa;
    /* Cor de fundo suave (Bootstrap light) */
    color: #495057;
    /* Cor do ícone */
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 1px solid #dee2e6;
}

/* Efeito Hover Moderno */
#social-links ul li a:hover {
    transform: translateY(-3px);
    /* Leve subida ao passar o mouse */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    color: white;
    /* Ícone fica branco */
    border-color: transparent;
}

/* Cores específicas de cada rede no Hover */
#social-links ul li a .fa-facebook:parent,
#social-links ul li a:has(.fa-facebook) {
    /* Modern browsers */
}

/* Maneira compatível de colorir ao passar o mouse (via seletor de atributo gerado pela lib ou classe direta) */

#social-links ul li a:hover .fa-facebook-square,
#social-links ul li a:hover .fa-facebook {
    background-color: #3b5998;
    border-color: #3b5998;
}

/* Como é difícil selecionar o pai baseando-se no filho em CSS puro antigo, 
       vamos usar uma abordagem mais direta para as cores de fundo ao hover 
       se a biblioteca adiciona classes específicas no <li> ou <a>. 
       
       Caso a biblioteca adicione a classe social-button no <a> (versões recentes):
    */