@font-face {
    font-family: "futura-bold";
    font-weight: bold;
    src: url('/fonts/futuraBold/futuraBold.eot');
    src: url('/fonts/futuraBold/futuraBold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/FuturaBold/FuturaBold.woff') format('woff'),
         url('/fonts/futuraBold/futura-book.ttf') format('truetype'),
         url('/fonts/futuraBold/futuraBold.svg') format('svg');
}

@font-face {
    font-family: "futura-book";
    font-weight: normal;
    src: url('/fonts/fonts/futuraBook/futuraBook.eot');
    src: url('/fonts/futuraBook/futuraBook.eot?#iefix') format('embedded-opentype'), 
         url('/fonts/futuraBook/futuraBook.woff') format('woff'),
         url('/fonts/futuraBook/futura-book.ttf') format('truetype'),
         url('/fonts/futuraBook/futuraBook.svg') format('svg');
}
.card-destaque {
    border: none !important;
    box-shadow: none !important;
}
.navbar-brand img {
    width: 180px;

}

.navbar-nav {
    align-items: center;
}

.navbar .navbar-nav .nav-link {
    color: #fff;
    font-size: 1.1em;
    padding: 0.5em 1em;
}

@media screen and (min-width: 768px) {
    .navbar-brand img {
        width: 250px;
    }

    .navbar-brand {
        margin-right: 0;
        padding: 0 1em;
    }
}

.h2-destaque {
    font-family: 'futura-bold';
    color: #0066b3 !important;
    margin-bottom: 0;
    font-size: 46px;
    padding-left: 10px;

}

#main-nav-novo {
    top: 0px;
    height: 116px;
    display: flex;
    justify-content: space-between;
    background: rgba(0, 92, 169, 0.9);
    position: absolute;
    z-index: 99999;
    padding-top: 18px;
}


.bn-home {
    background-image: url(bg_institucionalInterno.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    height: 200px;
}

.bg-home {
    font-family: 'futura-book';
    color: #fff !important;
    font-weight: normal;
    font-size: 3.609rem;
    letter-spacing: -.035em;
    clear: both;
}

.sb-home {
    font-family: 'futura-book';
    color: #fff !important;
    font-weight: normal;
    font-size: 1.2rem;
    letter-spacing: -.035em;
    clear: both;
}


.destaques-home {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 0.5vw;
}

.card-destaque {
    position: relative;
    margin-top: 1vw;
}

.destaques-uma-coluna {
    width: 100%;
}

.div {
    display: block;
}

.destaques-duas-colunas {
    width: 49.311%;
    height: 24.306vw;
}

.imagem-destaque {
    overflow: hidden;
    width: 100%;
}

    .imagem-destaque img {
        width: 100%;
        object-fill: fill;
        -moz-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transform: all 0.3s;
    }

.card-destaque:hover img {
    -moz-transition: scale(1.1);
    -webkit-transition: scale(1.1);
    transform: scale(1.1);
}

.card-destaque .informacao-destaque {
    position: absolute;
    left: 42px;
    bottom: 50px;
}

.card-destaque .balao-destaque {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    bottom: 50px;
    background: rgba(0, 92, 169, 0.70);
    border-radius: 10px;
    opacity: 1;
    width: 24.30vw;
    padding: 0 8px 24px 13px;
    min-height: 81px;
}

.card-destaque .titulo h2 {
    text-align: left;
    font-family: 'futura-lt-bold', sans-serif;
    font-size: 3.5vw;
    font-weight: bold;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    margin-bottom: 5px;
}

.card-destaque .titulo h3 {
    text-align: left;
    font-family: 'futura-lt-bold', sans-serif;
    font-size: 2.5vw;
    font-weight: bold;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    margin-bottom: 5px;
}

.saiba-mais-destaque {
    margin-top: 10px;
}

    .saiba-mais-destaque a {
        font-family: 'futura-lt-book', sans-serif;
        font-size: 1.1vw;
        font-weight: bold;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        text-decoration: none !important;
    }

.balao-destaque .texto-destaque p {
    text-align: left;
    font-family: 'futura-lt-book', sans-serif;
    font-size: 1.1vw;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    max-width: 24.22vw;
}

.balao-destaque .fa {
    font-size: 1.04vw;
    color: #FFFFFF;
    margin-right: 10px;
}

.card-destaque {
    cursor: pointer;
}

@media(max-width: 1159px) {
    .balao-destaque {
        display: none !important;
    }

    .card-destaque .informacao-destaque {
        bottom: 12% !important;
        left: 12px;
    }

    .informacao-destaque .titulo h2 {
        font-size: 10vw !important;
    }
}

.imagem-destaque {
    border-radius: 10px;
}

/* =========================
   FIX RESPONSIVO - DESTAQUES
   Cole no FINAL do CSS
========================= */

/* Container: em vez de space-between, use gap e centralização */
.destaques-home {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centraliza o conjunto */
    gap: 32px; /* espaçamento real entre cards */
    padding-top: 16px; /* evita vw aqui */
}

/* Cards em 2 colunas com base flexível (para não encolher demais) */
.destaques-duas-colunas {
    width: auto; /* neutraliza o width fixo */
    flex: 1 1 calc(50% - 32px); /* 2 colunas com gap */
    max-width: 560px; /* limite pra não estourar */
    min-width: 320px; /* evita “mini-card” */
    height: auto; /* neutraliza a altura em vw */
}

/* Altura responsiva e consistente (não fica minúsculo) */
.card-destaque {
    border-radius: 10px; /* você já tem, mas garante */
    overflow: hidden; /* garante recorte */
}

/* Define uma altura boa por breakpoint sem depender de vw */
@media (min-width: 992px) {
    .destaques-duas-colunas {
        min-height: 300px;
    }
}

@media (max-width: 991.98px) {
    .destaques-duas-colunas {
        min-height: 240px;
    }
}

@media (max-width: 575.98px) {
    .destaques-duas-colunas {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 220px;
    }
}

/* Imagem: object-fit cover (object-fill estava te sabotando) */
.imagem-destaque img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* MUITO importante */
    transition: transform 0.3s ease; /* transição certa */
}

/* Hover correto */
.card-destaque:hover .imagem-destaque img {
    transform: scale(1.06);
}

/* Conteúdo sobreposto (posição já é OK, mas ajuste responsivo) */
.card-destaque .informacao-destaque {
    left: 32px;
    bottom: 32px;
}

/* Títulos e textos: use clamp() para não ficar minúsculo */
.card-destaque .titulo h2 {
    font-size: clamp(28px, 3.2vw, 56px);
    margin-bottom: 6px;
}

.card-destaque .titulo h3 {
    font-size: clamp(22px, 2.4vw, 40px);
    margin-bottom: 6px;
}

/* Balão: pare de usar width em vw; use largura relativa ao card */
.card-destaque .balao-destaque {
    width: min(420px, 85%); /* responsivo e bonito */
    padding: 12px 14px 18px 14px;
}

/* Texto/ícones dentro do balão com clamp */
.balao-destaque .texto-destaque p {
    font-size: clamp(14px, 1.2vw, 18px);
    max-width: 100%;
}

.balao-destaque .fa {
    font-size: clamp(14px, 1.1vw, 18px);
}

.saiba-mais-destaque a {
    font-size: clamp(14px, 1.1vw, 18px);
}

/* Se você quiser manter o “esconde balão” em telas menores, ok.
   Mas esse breakpoint estava meio agressivo. Eu ajustei pra 992px. */
@media (max-width: 991.98px) {
    .balao-destaque {
        display: none !important;
    }

    .card-destaque .informacao-destaque {
        left: 16px;
        bottom: 16px;
    }
}
.navbar-caixa-topo {
    top: 0;
    height: 80px;
    display: flex;
    justify-content: space-between;
    background-color: rgba(0, 92, 169, 0.9);
    z-index: 99999;
    padding-top: 18px;
}

.navbar-caixa-banner {
    border-top: 0.3em solid #fff;
}

.link-loterias{

    color:white;
    font-weight:bold;


}
/* Card inteiro como link */
.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

    /* Mantém hover igual ao card antigo */
    .card-link:hover {
        text-decoration: none;
        color: inherit;
    }