@import "reset.css";


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

.caixa {

    background-color: var(--azulEscuro);

    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 0.3s ease;

}

.img-sessao::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to bottom,

            transparent 0%,

            rgba(29, 48, 86, .20) 25%,

            rgba(29, 48, 86, .40) 35%,

            rgba(29, 48, 86, .60) 55%,

            rgba(29, 48, 86, .80) 75%,

            #1D3056 100%);

}


.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.2;

    font-weight: 550;

    margin: 0 0 5px;

    color: var(--corBranca);

    /* Limita o título a no máximo 2 linhas */

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    overflow: hidden;

}


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

.descricao-sessao {

    max-width: 100%;

    margin: 0;

    font-size: .9rem;

    line-height: 1.2;

    font-weight: 300;

    color: var(--corBranca);

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    line-clamp: 2;

    overflow: hidden;

}




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

.noticias {

    width: 100%;

    padding: 20px 25px 10px;

    box-sizing: border-box;

    color: var(--corTexto);

}


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

.titulo-filtro {

    width: 100%;

    margin-bottom: 18px;

}


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

.titulo {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 3px;

    margin-bottom: 16px;

    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.5rem;

    font-weight: 700;

    line-height: 1;

}


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

.titulo::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 140px;

    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: 37px;

    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: .65rem;
    font-weight: 300;

}


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

.filtro input::placeholder {

    color: var(--corTexto);

    opacity: 1;

    font-size: .65rem;

}


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

.filtro button {

    flex-shrink: 0;

    width: 34px;

    height: 32px;

    margin-right: 2px;

    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: 12px;

    height: 12px;

    object-fit: contain;

}

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

.filtro-categoria {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 5px;

    margin: 0;

}


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

.filtro-categoria h3 {

    margin: 0;

    color: var(--corTexto);

    font-size: .9rem;

    font-weight: 550;

    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: .9rem;

    font-weight: 300;

    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: 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: 15px;

    width: 100%;

    padding: 0 4px;

    display: flex;

    align-items: center;

    box-sizing: border-box;

    background: #fff;

    color: var(--corTexto);

    font-family: inherit;

    font-size: .65rem;

    font-weight: 300;

    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 — MOBILE
===================================================== */

.lista-noticias {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr;

    gap: 8px;

}


/* =====================================================
   NOTÍCIA OCULTA PELO CARROSSEL
===================================================== */

.lista-noticias .noticia.oculto {

    display: none;

}


/* =====================================================
   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: 10px;

}


/* =====================================================
   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.2rem;

    line-height: 1.2;

    font-weight: 550;


    /* Limita o título a no máximo 2 linhas */

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    overflow: hidden;

}


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

.conteudo-noticia span {

    margin: 0 0 5px;

    color: var(--corTexto);

    font-size: .78rem;

    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: .78rem;

    line-height: 1.2;

    font-weight: 300;


    /* Limita o título a no máximo 2 linhas */

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 4;

    line-clamp: 4;

    overflow: hidden;

}


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

.ver-noticia {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top: 0;

    color: var(--corTexto);

    font-size: .8rem;

    font-weight: 400;

    font-style: italic;

    text-decoration: none;

    transition: .3s ease;

}




/* =====================================================
   PAGINAÇÃO — MOBILE
===================================================== */

.paginacao {

    width: 100%;

    margin-top: 18px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

}


/* =====================================================
   CONTADOR
===================================================== */

.contador-paginacao {

    color: var(--azulEscuro);

    font-size: .9rem;

    font-weight: 300;

}


/* =====================================================
   BOTÕES
===================================================== */

.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;

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

}


/* =====================================================
   ÍCONE DAS SETAS
===================================================== */

.paginacao button img {

    width: 9px;

    height: 9px;

    object-fit: contain;

}


/* =====================================================
   ANTERIOR
===================================================== */

.pagina-anterior img {

    transform: rotate(180deg);

}


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

.paginacao button:not(:disabled):hover {

    transform: scale(1.05);

}


/* =====================================================
   BOTÃO DESATIVADO
===================================================== */

.paginacao button:disabled {

    opacity: .35;

    cursor: default;

}



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

.proximos-eventos {

    position: relative;

    width: 100%;

    margin: 30px 0;

    box-sizing: border-box;

    overflow: hidden;

    padding: 0 20px;

}


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

.imagem-eventos {

    position: absolute;

    top: 0;

    left: 50%;

    width: 100vw;

    height: 100%;

    transform: translateX(-50%);

    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: 15px 15px 5px;

    text-align: center;

    color: var(--corBranca);

    font-size: 1.5rem;

    font-weight: 500;

}


/* ==========================================
   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: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--azulEscuro);

    border-radius: 50%;

    overflow: visible;

}


.icone-evento img {

    width: 25px;

    height: 25px;

    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.2rem;

    font-weight: 500;

    line-height: 1.2;



box-sizing: border-box;

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;

overflow: hidden;


}


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

.card-evento h3::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 110px;

    height: 1px;

    background: var(--azulEscuro);

}


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

.informacoes-evento {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 3px;

    margin-bottom: 3px;

}


.informacoes-evento span {

    color: var(--azulEscuro);

    font-size: .78rem;

    font-weight: 300;

    line-height: 1.2;

}


.informacoes-evento strong {

    color: var(--azulEscuro);

    font-weight: 450;

}


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

.card-evento p {

    width: 100%;

    margin: 0;

    color: var(--azulEscuro);

    font-size: .78rem;

    font-weight: 300;

    line-height: 1.2;

    /* Limita o título a no máximo 2 linhas */

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 4;

    line-clamp: 4;

    overflow: hidden;

}



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

.galeria {

    width: 100%;

    margin: 0;

    box-sizing: border-box;

    overflow: hidden;

}


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

.toutolo {

    width: 100%;

    padding: 8px 15px 3px;

    margin-bottom: 5px;

    background: var(--corBranca);

    box-sizing: border-box;

}


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

.texto-galeria {

    width: 100%;



}


.texto-galeria h2 {

    margin: 0;

    font-size: 1.5rem;

    font-weight: 500;

    line-height: 1.2;

    text-align: center;
    color: var(--corTexto);

}


/* =====================================================
   OPÇÕES / ÁLBUNS
===================================================== */

.opcoes {

    position: relative;

    width: 100%;

    display: flex;



}


/* =====================================================
   REMOVER SCROLLBAR
===================================================== */

.opcoes::-webkit-scrollbar {

    display: none;

}


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

.opcoes::after {

    content: "";

    position: absolute;

    left: 25%;

    right: 0;

    bottom: 12px;

    width: auto;

    height: 1px;

    background: var(--corTexto);

    opacity: .35;

    z-index: 1;
    width: 60%;

}


/* =====================================================
   GRUPO DOS PRIMEIROS BOTÕES
===================================================== */

.opcoes-destaque {

    position: relative;

    display: flex;

    align-items: center;

    flex: 0 0 auto;

}


.opcoes-destaque button {
    font-size: .9rem;

    font-weight: 300;
}


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

.opcoes-destaque::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -3px;

    width: auto;

    height: 4px;

    background: var(--azulEscuro);

    z-index: 5;
    width: 45px;

}


@media (min-width: 768px) and (max-width: 1200px) {



    .opcoes::after {

        bottom: 12px;

        left: 29%;

        right: 0;

        bottom: 12px;
        width: 43%;
    }

}


/* =====================================================
   BOTÕES
===================================================== */

.opcoes button {

    flex: 0 0 auto;

    padding: 7px 4px;

    margin: 0;

    border: none;

    outline: none;

    background: transparent;

    border-radius: 0;

    font-size: .68rem;

    line-height: 1.3;

    white-space: nowrap;

}


/* =====================================================
   SEPARADORES
===================================================== */

.separador {

    width: 1px;

    height: 8px;

    flex: 0 0 1px;

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

}


/* =====================================================
   BOTÃO ATIVO
===================================================== */

.opcoes button.ativo {

    color: var(--corTexto);

    font-weight: 700;

}


/* =====================================================
   BOTÃO MAIS
===================================================== */

.opcoes .btn-mais {

    width: 35px;

    height: 35px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 17px;

    flex: 0 0 35px;

    cursor: pointer;

    z-index: 10;

}


/* =====================================================
   FILTROS — MOBILE
===================================================== */


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

.titulo-filtro>.filtros>.filtros,
.filtro-categoria {

    width: 100%;

    margin-right: 0 !important;

}


.filtro-categoria {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

}


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

.select-personalizado {

    position: relative;

    width: 100% !important;

    max-width: 100%;

}


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

.select-botao {

    width: 100%;

    padding: 8px 15px;

    box-sizing: border-box;

    border: 1px solid #1d3056;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    cursor: pointer;

}


/* =====================================================
   LISTA DO SELECT
===================================================== */

.select-opcoes {

    display: none;

    position: absolute;

    top: calc(100% + 4px);

    left: 0;

    width: 100% !important;

    max-width: 100%;

    box-sizing: border-box;

    padding: 8px 15px;

    margin: 0;

    background: #ffffff;

    border: 1px solid #d9dfe8;

    border-radius: 8px;

    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);

    z-index: 9999;

}


/* =====================================================
   SELECT ABERTO
===================================================== */

.select-personalizado.aberto .select-opcoes {

    display: block;

}


/* =====================================================
   OPÇÕES DO SELECT
===================================================== */

.select-opcao {

    width: 100%;

    padding: 10px 0;

    box-sizing: border-box;

    font-size: .9rem;

    cursor: pointer;

}


.select-opcao:hover {

    background-color: #f2f6fa;

}


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

.select-opcao.ativa {

    font-weight: 600;

    color: var(--azulEscuro);

}


/* =====================================================
   OPÇÕES DE FILTRO
===================================================== */

.opcoes {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    row-gap: 8px;

    padding-bottom: 12px;

}


/* =====================================================
   DROPDOWN DOS ÁLBUNS
===================================================== */

.wrapper-dropdown {

    position: relative;

    display: inline-flex;

    align-items: center;

}


/* =====================================================
   MENU DOS ÁLBUNS
===================================================== */

.dropdown-albuns {

    display: none;

    position: absolute;

    top: calc(100% + 10px);

    left: 50%;

    right: auto;

    transform: translateX(-50%);

    width: 220px;

    min-width: 220px;

    max-width: calc(100vw - 30px);

    box-sizing: border-box;

    padding: 6px 0;

    margin: 0;

    background: #ffffff;

    border-radius: 8px;

    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);

    z-index: 10000;

}


/* =====================================================
   DROPDOWN ABERTO
===================================================== */

.wrapper-dropdown.ativo .dropdown-albuns {

    display: block;

}


/* =====================================================
   ITENS DOS ÁLBUNS
===================================================== */

.dropdown-albuns .dropdown-item {

    display: block;

    width: 100%;

    min-height: 42px;

    padding: 10px 18px;

    box-sizing: border-box;

    background: transparent;

    border: none;

    text-align: left;

    color: var(--azulEscuro);

    font-size: .9rem;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease;

}


.dropdown-albuns .dropdown-item:hover {

    background-color: #f2f6fa;

    color: var(--corTexto);

}


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

.imgs-galeria {

    width: 100%;

    height: 420px;

    padding: 10px;

    background: var(--azulClaro);

    box-sizing: border-box;

    overflow: hidden;

}


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

.imgs-galeria {

    position: relative;

    width: 100%;

    /*
       Altura suficiente para:

       135px — topo
       5px   — espaço
       280px — centro
       5px   — espaço
       100px — baixo

       Total = 525px
    */

    height: 535px;

    overflow: hidden;

}


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

.imgs-galeria img {

    position: absolute;

    display: block;

    object-fit: cover;

    opacity: 1;

    transition:
        top 1.5s cubic-bezier(.22, 1, .36, 1),
        left 1.5s cubic-bezier(.22, 1, .36, 1),
        right 1.5s cubic-bezier(.22, 1, .36, 1),
        width 1.5s cubic-bezier(.22, 1, .36, 1),
        height 1.5s cubic-bezier(.22, 1, .36, 1),
        transform 1.5s cubic-bezier(.22, 1, .36, 1),
        opacity 1.5s ease;

    will-change:
        top,
        left,
        right,
        width,
        height,
        transform;

}


/* =====================================================
   =====================================================
   5 E 6
   DUAS IMAGENS DO TOPO
   =====================================================
===================================================== */

.galeria-5,
.galeria-6 {

    /*
       Duas imagens mais largas.
    */

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

    height: 135px;

    top: 0;

    z-index: 2;

}


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

.galeria-5 {

    left: 0;

}


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

.galeria-6 {

    right: 0;

}


/* =====================================================
   =====================================================
   IMAGEM 1
   CENTRO
   =====================================================
===================================================== */

.galeria-1 {

    /*
       5px depois do topo.

       Topo:
       0 → 135px

       Espaço:
       135 → 140px

       Centro:
       140 → 420px
    */

    width: 100%;

    height: 280px;

    top: 140px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

}


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

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

    /*
       5px depois do centro.

       Centro:
       140 → 420px

       Espaço:
       420 → 425px

       Baixo:
       425 → 525px
    */

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

    height: 100px;

    top: 425px;

    z-index: 2;

}


/* =====================================================
   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
   =====================================================
===================================================== */

/*
   A imagem 5 entra no centro.

   Durante o movimento ela fica
   acima das outras imagens.
*/

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

    top: 140px;

    left: 50%;

    width: 100%;

    height: 280px;

    transform: translateX(-50%);

    z-index: 30;

}


/*
   A imagem 1 vai para o lugar da 5.
*/

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

    top: 0;

    left: 0;

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

    height: 135px;

    transform: none;

    z-index: 5;

}


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

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

    top: 140px;

    left: 50%;

    right: auto;

    width: 100%;

    height: 280px;

    transform: translateX(-50%);

    z-index: 30;

}


/*
   A imagem 1 vai para o lugar da 6.
*/

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

    top: 0;

    left: auto;

    right: 0;

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

    height: 135px;

    transform: none;

    z-index: 5;

}


/* =====================================================
   =====================================================
   TROCA DE POSIÇÕES
   2 E 3 → TOPO
   5 E 6 → BAIXO
   =====================================================
===================================================== */


/* =====================================================
   2 → TOPO
===================================================== */

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

    top: 0;

    left: 0;

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

    height: 135px;

    z-index: 40;

    transform: none;

}


/* =====================================================
   3 → TOPO
===================================================== */

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

    top: 0;

    left: auto;

    right: 0;

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

    height: 135px;

    z-index: 40;

    transform: none;

}


/* =====================================================
   5 → BAIXO
===================================================== */

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

    top: 425px;

    left: 0;

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

    height: 100px;

    z-index: 5;

    transform: none;

}


/* =====================================================
   6 → BAIXO
===================================================== */

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

    top: 425px;

    left: 50%;

    right: auto;

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

    height: 100px;

    transform: translateX(-50%);

    z-index: 5;

}


/* =====================================================
   4 → BAIXO
===================================================== */

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

    top: 425px;

    right: 0;

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

    height: 100px;

    z-index: 5;

    transform: none;

}


/* =====================================================
   IMAGEM 1 DURANTE A TROCA
===================================================== */

.imgs-galeria.trocar-posicoes .galeria-1 {

    top: 140px;

    left: 50%;

    width: 100%;

    height: 280px;

    transform: translateX(-50%);

    z-index: 20;

}


/* =====================================================
   =====================================================
   EMPILHAR TODAS AS IMAGENS
   =====================================================
===================================================== */

.imgs-galeria.empilhar-mobile img {

    top: 50% !important;

    left: 50% !important;

    right: auto !important;

    width: 45% !important;

    height: 150px !important;

}


/* =====================================================
   IMAGEM 5 — EMPILHADA
===================================================== */

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

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

    z-index: 11;

}


/* =====================================================
   IMAGEM 6 — EMPILHADA
===================================================== */

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

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

    z-index: 12;

}


/* =====================================================
   IMAGEM 1 — EMPILHADA
===================================================== */

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

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

    z-index: 20;

}


/* =====================================================
   IMAGEM 2 — EMPILHADA
===================================================== */

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

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

    z-index: 13;

}


/* =====================================================
   IMAGEM 3 — EMPILHADA
===================================================== */

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

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

    z-index: 14;

}


/* =====================================================
   IMAGEM 4 — EMPILHADA
===================================================== */

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

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

    z-index: 15;

}


/* =====================================================
   =====================================================
   MOBILE PEQUENO
   =====================================================
===================================================== */

@media (max-width: 380px) {

    .galeria {

        width: calc(100% - 20px);

        margin-left: 10px;

        margin-right: 10px;

        padding: 6px;

    }


    .imgs-galeria {

        height: 500px;

    }


    /* -------------------------------
       TOPO
    ------------------------------- */

    .galeria-5,
    .galeria-6 {

        height: 120px;

    }


    /* -------------------------------
       CENTRO
    ------------------------------- */

    .galeria-1 {

        top: 125px;

        height: 260px;

    }


    /* -------------------------------
       BAIXO
    ------------------------------- */

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

        top: 390px;

        height: 95px;

    }


    /* -------------------------------
       5 → CENTRO
    ------------------------------- */

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

        top: 125px;

        height: 260px;

    }


    /* -------------------------------
       6 → CENTRO
    ------------------------------- */

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

        top: 125px;

        height: 260px;

    }


    /* -------------------------------
       TROCA
    ------------------------------- */

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

        height: 120px;

    }


    .imgs-galeria.trocar-posicoes .galeria-5,
    .imgs-galeria.trocar-posicoes .galeria-6,
    .imgs-galeria.trocar-posicoes .galeria-4 {

        top: 390px;

        height: 95px;

    }


    .imgs-galeria.trocar-posicoes .galeria-1 {

        top: 125px;

        height: 260px;

    }

}







.newsletter {

    margin: 80px 0 20px;

}



/* =====================================================
   GALERIA — TABLET
   768px ATÉ 1023px
===================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    .galeria {

        width: calc(100% - 80px);

        margin: 90px 40px 0;

    }


    .toutolo {

        padding: 22px 20px 3px;

    }


    .texto-galeria h2 {

        font-size: 2rem;

    }


    .opcoes {

        justify-content: center;

    }


    .opcoes button {

        padding: 8px 13px;

        font-size: .78rem;

    }


    .imgs-galeria {

        height: 480px;

        padding: 18px;

    }

}


.titulo-sessao,
.descricao-sessao,
.categoria-sessao {
    transition: opacity 0.3s ease;
}




/* =====================================================