@import "reset.css";

.caixa{

    background-color:#29618c;

    margin:60px 0 20px;

    padding:60px 30px 30px;

    font-family:var(--fonte-principal);

}


.sessao-principal{

    position:relative;

    width:100%;

    height:350px;

}


/* =========================================
   IMAGENS
========================================= */

.img-sessao{

    position:relative;

    width:calc(100% - 60px);

    height:100%;

    margin-left:30px;

    overflow:hidden;

    border-radius:25px;

}


.img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    opacity:0;

    transition:opacity 1.4s ease;

}


.img.ativa{

    opacity:1;

}


/* =========================================
   TEXTO SOBRE A IMAGEM
========================================= */

.texto-sessao{

    position:absolute;

    left:80px;

    bottom:30px;

    width:1000px;
    

    color:var(--corBranca);

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    text-align:left;

    z-index:3;

}


/* =========================================
   CATEGORIA
========================================= */

.categoria-sessao{

    display:inline-block;

    background:var(--laranjaForte);

    color:var(--corBranca);

    padding:0 20px;
     margin: 0 0 4px;
   
    font-size:.85rem;

    font-weight:200;

    }


/* =========================================
   TÍTULO
========================================= */

.titulo-sessao{

    font-size:2.1rem;

    line-height:1.1;

    font-weight:700;

    margin:0 0 5px;

    color:var(--corBranca);

}


/* =========================================
   DESCRIÇÃO
========================================= */

.descricao-sessao{

    max-width:500px;

    font-size:1rem;

    line-height:1.6;

    font-weight:300;

    color:var(--corBranca);

}



/* =========================================================
   SECÇÃO DE NOTÍCIAS
========================================================= */

.noticias{

    width:100%;

    padding:80px 100px 70px;

    box-sizing:border-box;

    font-family:Montserrat, Arial, Helvetica, sans-serif;

    color:#1d3056;

}


/* =========================================================
   CABEÇALHO
========================================================= */

.titulo-filtro{

    width:100%;

    margin-bottom:55px;

}



/* =========================================================
   TÍTULO
========================================================= */

.titulo{

    width:100%;

    display:flex;

    align-items:center;

    gap:7px;

    margin-bottom:25px;

    position:relative;

}


/* =========================================================
   ÍCONE
========================================================= */

.titulo img{

    width:40px;

    height:40px;

    object-fit:contain;

}


/* =========================================================
   TÍTULO
========================================================= */

.titulo h2{

    position:relative;

    margin:0;

    padding:0 0 10px;

    color:#1d3056;

    font-size:3rem;

    font-weight:700;

    line-height:1;

}


/* =========================================================
   LINHA GROSSA
   COMEÇA DESDE O ÍCONE E TERMINA NO FINAL DO TEXTO
========================================================= */

.titulo::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:calc(100px + 50px + 100px);

    height:6px;

    background:#1d3056;

}


/* =========================================================
   LINHA FINA
   CONTINUA ATÉ AO FINAL DA SECÇÃO
========================================================= */

.titulo::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:5px;

    height:1px;

    background:rgba(29,48,86,.35);

    z-index:-1;

}





/* =========================================================
   ÁREA DOS FILTROS
========================================================= */

.titulo-filtro > .filtros{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:5px;

    padding:0;

    margin:0;

}


/* =========================================================
   PESQUISA
========================================================= */

.filtro{

    width:100%;

    max-width:600px;

    height:44px;

    display:flex;

    align-items:center;

    border:1.5px solid #1d3056;

    border-radius:30px;

    overflow:hidden;

    background:#fff;

    box-sizing:border-box;

}


/* INPUT */

.filtro input{

    flex:1;

    width:100%;

    height:100%;

    padding:0 20px;

    border:none;

    outline:none;

    background:transparent;

    color:#1d3056;

    font-family:inherit;

    font-size:0.96rem;

}


/* PLACEHOLDER */

.filtro input::placeholder{

    color:#1d3056;

    opacity:1;

    font-size:14px;

}


/* BOTÃO */

.filtro button{

    height:40px;

    margin-right:3px;

    padding:0 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:none;

    border-radius:25px;

    background:#1d3056;

    color:#fff;

    font-family:inherit;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.3s ease;

}


/* ÍCONE DO BOTÃO */

.filtro button img{

    width:12px;

    height:12px;

    object-fit:contain;

}


/* HOVER */

.filtro button:hover{

    background:#3798CA;

}


/* =========================================================
   FILTRO DE CATEGORIA
========================================================= */

.titulo-filtro > .filtros > .filtros{

    display:flex;

    align-items:center;

    
    margin-right:370px;

    padding:0;

    width:auto;

}


/* TEXTO FILTRAR */



/* =====================================================
   FILTRO CATEGORIA
===================================================== */

.filtro-categoria {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-right: 280px;

}


/* =====================================================
   TÍTULO
===================================================== */

.filtro-categoria h3 {

    margin: 0;

    color: #1d3056;

    font-size: 1.2rem;

    font-weight: 700;

}


/* =====================================================
   SELECT PERSONALIZADO
===================================================== */

.select-personalizado {

    position: relative;

    width: 130px;

}


/* =====================================================
   BOTÃO DO SELECT
===================================================== */

.select-botao {

    width: 100%;

    height: 44px;

    padding: 8px 21px 0 7px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: none;

    outline: none;

    background: #fff;

    color: var(--corTexto);

    font-family: inherit;

    font-size: 1rem;

    font-weight: 400;

    cursor: pointer;

 

}


/* =====================================================
   SETA
===================================================== */

.select-seta {


    color: var(--corTexto);

    transition: transform 0.25s ease;

}
.select-seta img{
    width: 10px;
    height: 10px;
}


/* =====================================================
   SETA QUANDO ABERTO
===================================================== */

.select-personalizado.aberto .select-seta {

    transform: rotate(180deg);

}


/* =====================================================
   CAIXA DAS OPÇÕES
===================================================== */

.select-opcoes {

    position: absolute;

    top: calc(100% - 10px);

    left: 0;

    width: 100%;

    background: #fff;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-8px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    z-index: 10;

}


/* =====================================================
   ABRIR OPÇÕES
===================================================== */

.select-personalizado.aberto .select-opcoes {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* =====================================================
   CAIXA DAS OPÇÕES
===================================================== */

.select-opcoes {

    width: 350px;
    padding: 8px 25px;
    border-radius: 4px;

}


/* =====================================================
   CADA OPÇÃO
===================================================== */

.select-opcao {

    min-height: 20px;

    width: 100%;

    display: flex;

    align-items: center;

    box-sizing: border-box;

    background: #fff;

    color: var(--corTexto);

    font-family: inherit;

    font-size: 0.95rem;

    font-weight: 450;

    cursor: pointer;

    border-bottom: 1px solid #d9dfe8;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


/* =====================================================
   ÚLTIMA OPÇÃO
===================================================== */

.select-opcao:last-child {

    border-bottom: none;

}


/* =====================================================
   HOVER
===================================================== */

.select-opcao:hover {

    background: #f2f6fa;

    color: var(--corTexto);

}


/* =====================================================
   OPÇÃO SELECIONADA
===================================================== */

.select-opcao.ativa {

    font-weight: 600;

}
/* =========================================================
   LISTA DE NOTÍCIAS
========================================================= */

.lista-noticias {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    column-gap: 10px;

    row-gap: 25px;

}


/* =========================================================
   CARD
========================================================= */

.noticia {

    width: 95%;

    min-height: 150px;

    display: flex;

    align-items: flex-start;

    box-sizing: border-box;

    padding: 10px;

    border: none;

    border-radius: 20px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

}


/* =========================================================
   IMAGEM
========================================================= */

.cards-noticia {

    width: 160px;

    height: 160px;

    flex-shrink: 0;

    overflow: hidden;

}


.cards-noticia img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 16px;

}


/* =========================================================
   CONTEÚDO DO CARD
========================================================= */

.conteudo-noticia {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding: 0 10px;

    box-sizing: border-box;

}


/* =========================================================
   TÍTULO
========================================================= */

.conteudo-noticia h3 {

    width: 100%;

    margin: 10px 0 4px;

    color: var(--corTexto);

    font-size: 1.2rem;

    line-height: 1.2;

    font-weight: 700;

}


/* =========================================================
   DATA
========================================================= */

.conteudo-noticia span {

    margin-bottom: 5px;

    color: var(--corTexto);

    font-size: .73rem;

    font-weight: 500;

    font-style: italic;

}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.conteudo-noticia p {

    width: 100%;

    margin: 0 0 4px;

    color: var(--corTexto);

    font-size: .73rem;

    line-height: 1.2;

    font-weight: 400;

}


/* =========================================================
   LINK
========================================================= */

.ver-noticia {

    display: inline-flex;

    align-items: center;


    margin-top: auto;

    color: var(--corTexto);

    font-size: .8rem;

    font-weight: 400;

    font-style: italic;

    text-decoration: none;

    transition: .3s ease;

}





/* =========================================================
   PAGINAÇÃO
========================================================= */



.paginacao{

    width:100%;

    margin-top:55px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    
}


/* 1 DE 2 */

.paginacao span{

    color:var(--azulEscuro);

    font-size:1.5rem;

    font-weight:500;

}


.paginacao-botoes {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

}


/* =========================================================
   BOTÃO DA SETA
========================================================= */

.paginacao button{

    width:24px;

    height:24px;

    padding:0;

    margin:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    outline:none;

    border-radius:50%;

    background-color:var(--azulEscuro);

    cursor:pointer;

    transition:background-color .3s ease;

}


/* =========================================================
   ÍCONE DA SETA
========================================================= */

.paginacao button img{

    width:10px;

    height:10px;

    object-fit:contain;

    background:transparent;

    transition:transform .3s ease;

}


/* =========================================================
   HOVER
========================================================= */

/* .paginacao button:hover{

    background-color:#3798CA;

} */


/* .paginacao button:hover img{

    transform:translateY(3px);

} */

 /* ==========================================
   PRÓXIMOS EVENTOS
========================================== */

.proximos-eventos{

    position:relative;

    width:100%;
    margin-bottom: 30px;
    background:var(--corBranca);

    box-sizing:border-box;

}


/* ==========================================
   TÍTULO
========================================== */

.titulo-eventos{

    margin:0 0 70px;

    text-align:center;

    color:var(--azulEscuro);

    font-size: 3rem;

    font-weight:700;

}


/* ==========================================
   IMAGEM DE FUNDO
========================================== */

.imagem-eventos{

    width:100%;

    height:300px;

    overflow:hidden;

}


.imagem-eventos img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

}


/* ==========================================
   LISTA DE EVENTOS
========================================== */

.lista-eventos{

    position:absolute;

    left:50%;

    bottom:90px;

    transform:translateX(-50%);

    width:80%;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:10px;

    z-index:3;

}


/* ==========================================
   CARD
========================================== */

.card-evento{

    flex:1;

    min-height:260px;

    padding:25px;

    box-sizing:border-box;

    background:var(--corBranca);

    border-radius:15px;

    box-shadow:0 15px 35px rgba(0,0,0,.22);

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


/* ==========================================
   ÍCONE
========================================== */

.icone-evento {
    width: 45px;
    height: 45px;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--azulEscuro);
    border-radius: 50%;

    /* não deixa o círculo cortar a imagem */
    overflow: visible;
}

.icone-evento img {
    width: 25px;
    height: 25px;

    object-fit: contain;

    /* imagem mantém o formato original */
    border-radius: 0;
}

/* ==========================================
   TÍTULO DO EVENTO
========================================== */

.card-evento h3{

    position:relative;

    margin:0 0 8px;

    

    color:var(--azulEscuro);

    font-size:1.55rem;

    font-weight:700;

    line-height:1.1;

}


/* linha abaixo do título */

.card-evento h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:150px;

    height:1.3px;
    border-radius: 50px;

    background:#ccc;

}


.informacoes-evento{

    display:flex;

    flex-direction:column;

    margin-bottom:7px;

}


.informacoes-evento span{

    color:var(--azulEscuro);

    font-size:.88rem;

    font-weight:450;

    line-height:1.2;

}


/* Destaque dos rótulos */

.informacoes-evento strong{

    font-weight:650;

    color:var(--azulEscuro);

}


/* ==========================================
   DESCRIÇÃO
========================================== */

.card-evento p{

    margin:0;

    color:var(--azulEscuro);

    font-size:.9rem;

    font-weight:400;

    line-height:1.2;

}


/* =====================================================
   GALERIA
===================================================== */

.galeria{

    width:calc(100% - 180px);

    margin:120px 100px 0;

    background:var(--azulClaro);

    box-sizing:border-box;

    overflow:hidden;
    padding: 10px;

}


/* =====================================================
   ÁREA
===================================================== */

.imgs-galeria{

    position:relative;

    width:100%;

    height:525px;

    overflow:hidden;

}


/* =====================================================
   IMAGENS
===================================================== */

.imgs-galeria img{

    position:absolute;

    width:calc((100% - 20px) / 3);

    height:calc((100% - 10px) / 2);

    object-fit:cover;

    display:block;

    opacity:1;

    z-index:1;

    transition:
        top 1.2s ease,
        left 1.2s ease,
        width 1.2s ease,
        height 1.2s ease,
        transform 1.2s ease,
        opacity 1.2s ease;

}


/* =====================================================
   POSIÇÕES NORMAIS

   5 | 6 | 1
   2 | 3 | 4
===================================================== */


/* 5 */

.galeria-5{

    top:0;

    left:0;

}


/* 6 */

.galeria-6{

    top:0;

    left:calc((100% + 10px) / 3);

}


/* 1 */

.galeria-1{

    top:0;

    left:calc(2 * (100% + 10px) / 3);

}


/* 2 */

.galeria-2{

    top:calc((100% + 10px) / 2);

    left:0;

}


/* 3 */

.galeria-3{

    top:calc((100% + 10px) / 2);

    left:calc((100% + 10px) / 3);

}


/* 4 */

.galeria-4{

    top:calc((100% + 10px) / 2);

    left:calc(2 * (100% + 10px) / 3);

}


/* =====================================================
   GALERIA 5
   VEM PARA A FRENTE
===================================================== */

.imgs-galeria.animar-5 .galeria-5{

    top:0;

    left:0;

    width:100%;

    height:100%;

    transform:none;

    z-index:20;

}


/* =====================================================
   GALERIA 6
   VEM PARA A FRENTE
===================================================== */

.imgs-galeria.animar-6 .galeria-6{

    top:0;

    left:0;

    width:100%;

    height:100%;

    transform:none;

    z-index:20;

}


/* =====================================================
   ENCONTRO GALERIA 1 + 2
=====================================================

   1 vem da parte superior direita.

   2 vem da parte inferior esquerda.

   As duas encontram-se no centro.
===================================================== */


/* -----------------------------------------------------
   GALERIA 1
----------------------------------------------------- */

.imgs-galeria.cruzar-1-2 .galeria-1{

    top:50%;

    left:50%;

    transform:
        translate(
            0,
            -92%
        );

    z-index:10;

}


/* -----------------------------------------------------
   GALERIA 2
----------------------------------------------------- */

.imgs-galeria.cruzar-1-2 .galeria-2{

    top:50%;

    left:50%;

    transform:
        translate(
            -100%,
            -8%
        );

    z-index:11;

}


/* -----------------------------------------------------
   ESCONDER AS OUTRAS
----------------------------------------------------- */

.imgs-galeria.cruzar-1-2 .galeria-3,
.imgs-galeria.cruzar-1-2 .galeria-4,
.imgs-galeria.cruzar-1-2 .galeria-5,
.imgs-galeria.cruzar-1-2 .galeria-6{

    opacity:0;

}


/* =====================================================
   ENCONTRO GALERIA 3 + 4
=====================================================

   3 fica do lado esquerdo.

   4 fica do lado direito.

   As duas aproximam-se pelo centro.
===================================================== */


/* -----------------------------------------------------
   GALERIA 3
----------------------------------------------------- */

/* -----------------------------------------------------
   GALERIA 3
   Sobe um pouco
----------------------------------------------------- */

.imgs-galeria.cruzar-3-4 .galeria-3{

    top:50%;

    left:50%;

    transform:
        translate(
            -100%,
            -8%
        );

    z-index:10;

}


/* -----------------------------------------------------
   GALERIA 4
   Desce um pouco
----------------------------------------------------- */

.imgs-galeria.cruzar-3-4 .galeria-4{

    top:50%;

    left:50%;

    transform:
        translate(
            0,
            -92%
        );

    z-index:11;

}

/* -----------------------------------------------------
   ESCONDER AS OUTRAS
----------------------------------------------------- */

.imgs-galeria.cruzar-3-4 .galeria-1,
.imgs-galeria.cruzar-3-4 .galeria-2,
.imgs-galeria.cruzar-3-4 .galeria-5,
.imgs-galeria.cruzar-3-4 .galeria-6{

    opacity:0;

}


/* =====================================================
   EMPILHAR — GRUPO CENTRAL COMPACTO
===================================================== */

.imgs-galeria.empilhar img{

    top:50%;
    left:50%;

    width:32%;
    height:32%;

}


/* =====================================================
   GALERIA 5
   Superior esquerda
===================================================== */

.imgs-galeria.empilhar .galeria-5{

    transform:
        translate(-50%, -50%)
        translate(-115px, -75px);

    z-index:11;

}


/* =====================================================
   GALERIA 6
   Superior direita
===================================================== */

.imgs-galeria.empilhar .galeria-6{

    transform:
        translate(-50%, -50%)
        translate(115px, -75px);

    z-index:12;

}


/* =====================================================
   GALERIA 1
   Inferior esquerda
===================================================== */

.imgs-galeria.empilhar .galeria-1{

    transform:
        translate(-50%, -50%)
        translate(-115px, 75px);

    z-index:13;

}


/* =====================================================
   GALERIA 2
   Inferior direita
===================================================== */

.imgs-galeria.empilhar .galeria-2{

    transform:
        translate(-50%, -50%)
        translate(115px, 75px);

    z-index:14;

}


/* =====================================================
   GALERIA 3
   Centro superior
===================================================== */

.imgs-galeria.empilhar .galeria-3{

    transform:
        translate(-50%, -50%)
        translate(0, -145px);

    z-index:15;

}


/* =====================================================
   GALERIA 4
   Centro inferior
===================================================== */

.imgs-galeria.empilhar .galeria-4{

    transform:
        translate(-50%, -50%)
        translate(0, 145px);

    z-index:16;

}
/* =====================================================
   NEWSLETTER
===================================================== */



.newsletter {

    margin: 120px 0 40px;

}