@import "reset.css";


/* =====================================================
   DESTAQUE PRINCIPAL
===================================================== */

.caixa {

    background-color: #29618c;

    margin: 0 0 15px;

    padding: 10px 10px 20px;

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

}


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

.sessao-principal {

    position: relative;

    width: 100%;

    height: 320px;

}


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

.img-sessao {

    position: relative;

    width: 100%;

    height: 100%;

    margin-left: 0;

    overflow: hidden;

    border-radius: 12px;

}


.img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

    display: block;

    opacity: 0;

    transition: opacity 1.4s ease;

}


.img.ativa {

    opacity: 1;

}


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

.texto-sessao {

    position: absolute;

    left: 20px;

    bottom: 20px;

    width: calc(100% - 40px);

    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: 1px 10px;

    margin: 0 0 4px;

    font-size: .8rem;

    font-weight: 400;

}


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

.titulo-sessao {

    font-size: 1.5rem;

    line-height: 1.15;

    font-weight: 700;

    margin: 0 0 5px;

    color: var(--corBranca);

}


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

.descricao-sessao {

    max-width: 100%;

    margin: 0;

    font-size: .9rem;

    line-height: 1.4;

    font-weight: 400;

    color: var(--corBranca);

}




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

.noticias {

    width: 100%;

    padding: 35px 25px 40px;

    box-sizing: border-box;

    color:var(--corTexto);

}


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

.titulo-filtro {

    width: 100%;

    margin-bottom: 30px;

}


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

.titulo {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 3px;

    margin-bottom: 20px;

    position: relative;

}


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

.titulo img {

    width: 34px;

    height: 34px;

    object-fit: contain;
    padding: 0 0 8px;

}


/* =========================================================
   H2
========================================================= */

.titulo h2 {

    position: relative;

    margin: 0;

    padding: 0 0 8px;

    color: var(--corTexto);

    font-size: 1.9rem;

    font-weight: 700;

    line-height: 1;

}


/* =========================================================
   LINHA GROSSA
========================================================= */

.titulo::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 165px;

    height: 6px;

    background: var(--azulEscuro);

}


/* =========================================================
   LINHA FINA
========================================================= */

.titulo::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 6px;

    height: 0.5px;

    background: var(--azulEscuro);

    z-index: -1;

}


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

.titulo-filtro > .filtros {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    gap: 20px;

    padding: 0;

    margin: 0;

}


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

.filtro {

    width: 100%;

    max-width: none;

    height: 40px;

    display: flex;

    align-items: center;

    border: 1px solid var(--azulEscuro);

    border-radius: 25px;

    overflow: hidden;

    box-sizing: border-box;

}


/* =========================================================
   INPUT
========================================================= */

.filtro input {

    flex: 1;

    min-width: 0;

    width: 100%;

    height: 100%;

    padding: 0 15px;

    border: none;

    outline: none;

    background: transparent;

    color: var(--corTexto);

    font-family: inherit;

    font-size: .8rem;

}


/* =========================================================
   PLACEHOLDER
========================================================= */

.filtro input::placeholder {

    color: var(--corTexto);

    opacity: 1;

    font-size: .75rem;

}


/* =========================================================
   BOTÃO PESQUISAR — MOBILE
========================================================= */

.filtro button {

    flex-shrink: 0;

    width: 36px;

    height: 34px;

    margin-right: 3px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 20px;

    background: var(--azulEscuro);

    color: #fff;

    font-size: 0;

    cursor: pointer;

}


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

.filtro button img {

    width: 14px;

    height: 14px;

    object-fit: contain;

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

.filtro-categoria {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    margin: 0;

}


/* =========================================================
   TEXTO "FILTRAR:"
========================================================= */

.filtro-categoria h3 {

    margin: 0;

    color: var(--corTexto);

    font-size: 1rem;

    font-weight: 700;

    white-space: nowrap;

}


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

.select-personalizado {

    position: relative;

    width: 100px;

    flex-shrink: 0;

}


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

.select-botao {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0;

    border: none;

    outline: none;

    background: var(--corBranca);

    color: var(--corTexto);

    font-family: inherit;

    font-size: 1rem;

    font-weight: 400;

    cursor: pointer;

    box-sizing: border-box;

}


/* =========================================================
   TEXTO DO SELECT
========================================================= */

.select-texto {

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}


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

.select-seta {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: transform .25s ease;

}


.select-seta img {

    width: 9px;

    height: 9px;

}

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

.select-personalizado.aberto .select-seta {

    transform: rotate(180deg);

}


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

.select-opcoes {

    position: absolute;

    top: calc(100% + 4px);

    left: 0;

    width: 100%;

    padding: 5px 0;

    background: var(--corBranca);

    border-radius: 5px;

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

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-8px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index: 20;

    box-sizing: border-box;

}


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

.select-personalizado.aberto .select-opcoes {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


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

.select-opcao {

    min-height: 35px;

    width: 100%;

    padding: 0 12px;

    display: flex;

    align-items: center;

    box-sizing: border-box;

    background: #fff;

    color: var(--corTexto);

    font-family: inherit;

    font-size: .75rem;

    font-weight: 450;

    cursor: pointer;

    border-bottom: 1px solid #d9dfe8;

}


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

.select-opcao:last-child {

    border-bottom: none;

}


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

.select-opcao:hover {

    background: #f2f6fa;

}


/* =========================================================
   OPÇÃO ATIVA
========================================================= */

.select-opcao.ativa {

    font-weight: 600;

}








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

.lista-noticias {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr;

    gap: 20px;

}


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

.noticia {

    width: 100%;

    min-height: 0;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    box-sizing: border-box;

    padding: 8px;

    border: 1px solid var(--corTexto);

    border-radius: 15px;

    box-shadow: none;

    background: var(--corBranca);

}


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

.cards-noticia {

    width: 100%;

    height: 210px;

    flex-shrink: 0;

    overflow: hidden;

    margin: 0;

}


.cards-noticia img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
    

    border-radius: 14px;

}


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

.conteudo-noticia {

    width: 100%;

    flex: none;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding: 0;

    box-sizing: border-box;

}


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

.conteudo-noticia h3 {

    width: 100%;

    margin: 5px 0 5px;

    padding: 0;

    color: var(--corTexto);

    font-size: 1.23rem;

    line-height: 1.25;

    font-weight: 700;

}


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

.conteudo-noticia span {

    margin: 0 0 5px;

    color: var(--corTexto);

    font-size: .85rem;

    line-height: 1.2;

    font-weight: 300;

    font-style: italic;

}


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

.conteudo-noticia p {

    width: 100%;

    margin: 0 0 5px;

    color: var(--corTexto);

    font-size: .85rem;

    line-height: 1.2;

    font-weight: 400;

}


/* =========================================================
   LER MAIS
========================================================= */

.ver-noticia {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top: 0;

    color: var(--corTexto);

    font-size: 1rem;

    font-weight: 400;

    font-style: italic;

    text-decoration: none;

    transition: .3s ease;

}





.paginacao {

    width: 100%;

    margin-top: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

}


.paginacao span {

    color: var(--azulEscuro);

    font-size: 1.25rem;

    font-weight: 500;

}


.paginacao-botoes {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

}


.paginacao button {

    width: 30px;

    height: 30px;

    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;

}


.paginacao button img {

    width: 9px;

    height: 9px;

    object-fit: contain;

}


/* VOLTAR */

.pagina-anterior img {

    transform: rotate(180deg);

}


/* BOTÃO DESATIVADO */

.paginacao button:disabled {

    opacity: .4;

    cursor: default;

}


/* ==========================================
   PRÓXIMOS EVENTOS — MOBILE
========================================== */

.proximos-eventos {

    position: relative;

    width: 100%;

    margin-bottom: 30px;

    box-sizing: border-box;

    overflow: hidden;
    padding: 0 20px ;

}


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

.imagem-eventos {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: 0;

}


.imagem-eventos img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


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

.titulo-eventos {

    position: relative;

    z-index: 3;

    margin: 0;

    padding: 35px 15px 5px;

    text-align: center;

    color: var(--corBranca);

    font-size: 1.9rem;

    font-weight: 700;

}


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

.lista-eventos {

    position: relative;

    left: auto;

    bottom: auto;

    transform: none;

    z-index: 3;

    width: 100%;

    padding: 0 15px 35px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 15px;

}


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

.card-evento {

    width: 100%;

    min-height: 0;

    padding: 20px;

    box-sizing: border-box;

    background: var(--corBranca);

    border-radius: 15px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .120);

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


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

.icone-evento {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--azulEscuro);

    border-radius: 50%;

    overflow: visible;

}


.icone-evento img {

    width: 28px;

    height: 28px;

    object-fit: contain;

    border-radius: 0;

}


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

.card-evento h3 {

    position: relative;

    width: 100%;

    margin: 5px 0 5px;

    padding-bottom: 5px;

    color: var(--azulEscuro);

    font-size: 1.5rem;

    font-weight: 700;

    line-height: 1.2;

}


/* ==========================================
   LINHA DO TÍTULO
========================================== */

.card-evento h3::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 120px;

    height: 1px;

    background: var(--azulEscuro);

}


/* ==========================================
   INFORMAÇÕES
========================================== */

.informacoes-evento {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 3px;

    margin-bottom: 5px;

}


.informacoes-evento span {

    color: var(--azulEscuro);

    font-size: .9rem;

    font-weight: 400;

    line-height: 1.3;

}


.informacoes-evento strong {

    color: var(--azulEscuro);

    font-weight: 550;

}


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

.card-evento p {

    width: 100%;

    margin: 0;

    color: var(--azulEscuro);

    font-size: .85rem;

    font-weight: 400;

    line-height: 1.2;

}

/* =====================================================
   GALERIA — MOBILE
===================================================== */

.galeria {

    width: calc(100% - 40px);

    margin: 60px 20px 0;

    padding: 10px;

    background: var(--azulClaro);

    box-sizing: border-box;

    overflow: hidden;

}


/* =====================================================
   ÁREA DAS IMAGENS
===================================================== */

.imgs-galeria {

    position: relative;

    width: 100%;

    height: 700px;

    overflow: hidden;

}


/* =====================================================
   CONFIGURAÇÃO GERAL
===================================================== */

.imgs-galeria img {

    position: absolute;

    object-fit: cover;

    display: block;

    opacity: 1;

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

}


/* =====================================================
   5 E 6
   DUAS IMAGENS DE CIMA
===================================================== */

.galeria-5,
.galeria-6 {

    width: calc((100% - 8px) / 2);

    height: 150px;

    top: 0;

}


/* IMAGEM 5 */

.galeria-5 {

    left: 0;

}


/* IMAGEM 6 */

.galeria-6 {

    right: 0;

}


/* =====================================================
   IMAGEM 1
   CENTRO — MAIOR
===================================================== */

.galeria-1 {

    width: 100%;

    height: 340px;

    top: 160px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 5;

}


/* =====================================================
   2, 3 E 4
   TRÊS IMAGENS DE BAIXO
===================================================== */

.galeria-2,
.galeria-3,
.galeria-4 {

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

    height: 150px;

    top: 510px;

}


/* IMAGEM 2 */

.galeria-2 {

    left: 0;

}


/* IMAGEM 3 */

.galeria-3 {

    left: 50%;

    transform: translateX(-50%);

}


/* IMAGEM 4 */

.galeria-4 {

    right: 0;

}

/* =====================================================
   ANIMAÇÃO 1
   5 → CENTRO

   5 sai do topo e vai para o centro.
   1 sobe para ocupar o lugar de 5.
===================================================== */

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

    top: 130px;

    left: 50%;

    width: 100%;

    height: 320px;

    transform: translateX(-50%);

    z-index: 20;

}


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

    top: 0;

    left: 0;

    width: calc((100% - 5px) / 2);

    height: 125px;

    transform: none;

    z-index: 10;

}


/* =====================================================
   ANIMAÇÃO 2
   6 → CENTRO

   6 vai para o centro.
   1 ocupa o lugar de 6.
===================================================== */

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

    top: 130px;

    left: 50%;

    right: auto;

    width: 100%;

    height: 320px;

    transform: translateX(-50%);

    z-index: 20;

}


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

    top: 0;

    left: auto;

    right: 0;

    width: calc((100% - 5px) / 2);

    height: 125px;

    transform: none;

    z-index: 10;

}


/* =====================================================
   TROCA DE POSIÇÕES

   5 e 6 descem.

   2 e 3 sobem.

   4 continua em baixo.
===================================================== */

.imgs-galeria.trocar-posicoes .galeria-5 {

    top: 500px;

    left: 0;

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

    height: 125px;

}


.imgs-galeria.trocar-posicoes .galeria-6 {

    top: 500px;

    right: auto;

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

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

    height: 125px;

}


/* 2 sobe */

.imgs-galeria.trocar-posicoes .galeria-2 {

    top: 0;

    left: 0;

    width: calc((100% - 5px) / 2);

    height: 125px;

}


/* 3 sobe */

.imgs-galeria.trocar-posicoes .galeria-3 {

    top: 0;

    left: auto;

    right: 0;

    width: calc((100% - 5px) / 2);

    height: 125px;

}


/* 4 permanece em baixo */

.imgs-galeria.trocar-posicoes .galeria-4 {

    top: 500px;

    right: 0;

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

    height: 125px;

}


/* =====================================================
   AGRUPAR TODAS
===================================================== */

.imgs-galeria.empilhar-mobile img {

    top: 50% !important;

    left: 50% !important;

    right: auto !important;

    width: 45% !important;

    height: 150px !important;

}


/* =====================================================
   5
===================================================== */

.imgs-galeria.empilhar-mobile .galeria-5 {

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

    z-index: 11;

}


/* =====================================================
   6
===================================================== */

.imgs-galeria.empilhar-mobile .galeria-6 {

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

    z-index: 12;

}


/* =====================================================
   1
===================================================== */

.imgs-galeria.empilhar-mobile .galeria-1 {

    transform:
        translate(-50%, -50%);

    z-index: 16;

}


/* =====================================================
   2
===================================================== */

.imgs-galeria.empilhar-mobile .galeria-2 {

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

    z-index: 13;

}


/* =====================================================
   3
===================================================== */

.imgs-galeria.empilhar-mobile .galeria-3 {

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

    z-index: 14;

}


/* =====================================================
   4
===================================================== */

.imgs-galeria.empilhar-mobile .galeria-4 {

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

    z-index: 15;

}













.newsletter {

    margin: 80px 0 20px;

}