@import "reset.css";


/* =====================================================
   CAIXA PRINCIPAL
===================================================== */

.caixa {

    width: 100%;

    margin: 0;

    padding: 45px 0 0;

    box-sizing: border-box;

    background: #1D3056;

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

}


/* =====================================================
   SESSÃO PRINCIPAL
===================================================== */

.sessao-principal {

    position: relative;

    width: 100%;

    min-height: 580px;

}

.img-sessao {
    position: relative;
    width: 100%;
    height: 580px;
    overflow: hidden;
    
}

.img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /* enquadramento */
    object-position: bottom center;

    display: block;

    opacity: 0;

    clip-path: polygon(
        0 10%,
        20% 0%,
        100% 20%,
        100% 100%,
        0 100%
    );

    transition: opacity .8s ease;
}



.img.ativa {
    opacity: 1;
}

/* =====================================================
   GRADIENTE SOBRE A IMAGEM
===================================================== */
.img-sessao::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 90%;

    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%
    );

    z-index: 1;

    pointer-events: none;
}

.texto-sessao {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 30%;

    padding: 80px 0 80px 15px;

    box-sizing: border-box;

color: var(--corBranca);

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    z-index: 2;
}


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

.texto-sessao h1 {

    width: 100%;

    margin: 0 0 18px;

    font-size: 1.8rem;

    line-height: 1.15;

    font-weight: 800;

}


/* =====================================================
   PARÁGRAFO
===================================================== */

.texto-sessao p {

    width: 100%;

    margin: 0 0 8px;

    font-size: .95rem;

    line-height: 1.5;

    font-weight: 300;

}


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

.texto-sessao a {

      font-size: 1rem;

    color: var(--corBranca);

    font-weight: 400;

    text-decoration: none;

   



}


/* =====================================================
   INDICADORES
===================================================== */

.indicadores {

    position: absolute;

    left: 50%;

    bottom: 5px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 5px;
    margin-bottom: 30px;

}


/* =====================================================
   PONTOS
===================================================== */

.ponto {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #FFFFFF66;

    cursor: pointer;

    transition: .3s ease;

}


/* =====================================================
   PONTO ATIVO
===================================================== */

.ponto.ativo {

    background: #F37839;

}



/* =====================================================
   MISSÃO E PROPÓSITO — MOBILE
===================================================== */

.missao-visao {

    width: 100%;

    min-height: auto;

    padding: 70px 10px 40px;

    box-sizing: border-box;

}


/* =====================================================
   CONTEÚDO DOS CARDS
===================================================== */

.conteudo-missaoVisao {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;

}


/* =====================================================
   CARDS
===================================================== */

.card-missao,
.card-visao {

    width: 100%;

    max-width: 400px;

    min-height: 180px;

    background: var(--cor-branca);

    border-radius: 6px;

    overflow: hidden;

    box-shadow: 0 15px 35px rgba(19, 19, 19, 0.12);

    box-sizing: border-box;

    /*
       O espaço permanece reservado.
       O card apenas fica invisível.
    */
    opacity: 0;

}


/* =====================================================
   MISSÃO
===================================================== */

.card-missao.ativo {

    opacity: 1;

    animation: esquerdaMobile 1.2s ease forwards;

}


/* =====================================================
   PROPÓSITO
===================================================== */

.card-visao.ativo {

    opacity: 1;

    animation: direitaMobile 1.2s ease forwards;

}


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

.card-conteudo {

    width: 100%;

    padding: 18px 20px;

    box-sizing: border-box;

    flex: 1;

}


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

.card-conteudo h2 {

    width: 100%;

    margin: 0 0 5px;

    text-align: center;

    color: var(--azulEscuro);

    font-size: 1.5rem;

    line-height: 1.2;

    font-weight: 700;

}


/* =====================================================
   PARÁGRAFO
===================================================== */

.card-conteudo p {

    width: 100%;

    margin: 0;

    text-align: center;

    color: var(--azulEscuro);

    font-size: .9rem;

    line-height: 1.4;

    font-weight: 400;

}


/* =====================================================
   RODAPÉ
===================================================== */

.card-rodape {

    width: 100%;

    height: 45px;

    flex-shrink: 0;

    background: var(--azulEscuro);

}


/* =====================================================
   ANIMAÇÃO — MISSÃO
   ENTRA PELA ESQUERDA
===================================================== */

@keyframes esquerdaMobile {

    from {

        opacity: 0;

        transform: translate(-200px, -80px);

    }

    to {

        opacity: 1;

        transform: translate(0, 0);

    }

}


/* =====================================================
   ANIMAÇÃO — PROPÓSITO
   ENTRA PELA DIREITA
===================================================== */

@keyframes direitaMobile {

    from {

        opacity: 0;

        transform: translate(200px, -80px);

    }

    to {

        opacity: 1;

        transform: translate(0, 0);

    }

}




/* =====================================================
   ESTATÍSTICAS — MOBILE
===================================================== */
.estatistica {

    position: relative;

    width: 100%;

    padding-bottom: 50px;

    background: var(--cor-branca);

}

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

.titulo-estatistica {

    position: absolute;

    top: 30px;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    margin: 0;

    color: var(--corBranca);

    font-size: 1.8rem;

    font-weight: 700;

    text-align: center;

    z-index: 2;

}


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

.imagem-estatistica {

    width: 95%;

    height: 350px;

    margin: 0 auto;

    overflow: hidden;
    border-radius: 10px;


}


.imagem-estatistica img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


/* =====================================================
   ÁREA AZUL DAS ESTATÍSTICAS
===================================================== */

.estatisticas-cards {

    position: relative;

    width: 85%;

    margin: -140px auto 0;

    padding: 25px 10px 30px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    background: var(--azulEscuro);

    border-radius: 10px;

    z-index: 2;

}

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

.card-estatistica {

    width: 100%;

    max-width: 280px;

    padding: 10px 15px;

    text-align: center;

    box-sizing: border-box;

}


/* =====================================================
   CÍRCULO DO NÚMERO
===================================================== */

.numero {

    --progresso: 0%;

    position: relative;

    width: 85px;

    height: 85px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto 18px;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--laranjaForte) var(--progresso),
            var(--corBranca) 0
        );

    color: var(--corBranca);

    font-size: 1rem;

    font-weight: 600;

    z-index: 1;

}


/* =====================================================
   CENTRO DO CÍRCULO
===================================================== */

.numero::before {

    content: "";

    position: absolute;

    inset: 5px;

    background: var(--azulEscuro);

    border-radius: 50%;

    z-index: -1;

}


/* =====================================================
   TEXTO
===================================================== */

.card-estatistica p {

    margin: 0;

    color: var(--corBranca);

    font-size: .92rem;

    line-height: 1.5;

    text-align: center;

}




/* =====================================================
   DESTAQUE — MOBILE
===================================================== */

.destaque {

    position: relative;

    width: 100%;

    box-sizing: border-box;

}


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

.img-destaque {

    width: 100%;

    height: 320px;

    margin: 0 auto;

    overflow: hidden;

}


.img-destaque img {

    width: 100%;

    height: 100%;

    object-fit: cover;

      object-position:center;

    display: block;

}


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

.destaque h2 {

    position: absolute;

    top: 25px;

    left: 0;

    width: 100%;

    padding: 0 16px;

    box-sizing: border-box;

    color: var(--corBranca);

    font-size: 2rem;

    font-weight: 700;

    text-align: left;

    z-index: 2;

}


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

.conteudo-destaque {

    position: absolute;

    left: 3%;

    right: 3%;

    bottom: 20px;

    width: auto;

    padding: 40px 0 0 14px;

    box-sizing: border-box;

    color: var(--corBranca);

    z-index: 2;

}


/* =====================================================
   TÍTULO DO CONTEÚDO
===================================================== */

.conteudo-destaque h3 {

    margin: 0 0 3px;

    font-size: 1.3rem;

    line-height: 1.3;

    font-weight: 600;

}


/* =====================================================
   PARÁGRAFO
===================================================== */

.conteudo-destaque p {

    margin: 0 0 5px;

    font-size: .92rem;

    line-height: 1.3;

    font-weight: 300;

}


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

.conteudo-destaque a {

    display: inline-block;

    padding: 2px;

    color: var(--corBranca);

    text-decoration: none;

    font-size: 1rem;

    font-weight: 400;

    transition: .3s ease;

}


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

.conteudo-destaque a:hover {

    color: var(--laranjaForte);

}



/* =====================================================
   SEÇÃO DE NOTÍCIAS — MOBILE
===================================================== */

.secao-noticias {

    width: 100%;

    padding: 50px 16px 40px;

    background: var(--corBranca);

    box-sizing: border-box;

}


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

.titulo-noticias {

   
    padding: 0 10px;

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

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--azulEscuro);

  

}


/* =====================================================
   CARROSSEL
===================================================== */

.lista-noticias {

    position: relative;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 0;

    overflow: hidden;

    padding: 0 10px;

    box-sizing: border-box;

}


/* =====================================================
   CARD
===================================================== */
.card-noticia {

    width: 100%;

    max-width: 800px;

    flex: 0 0 100%;

    background: var(--azulEscuro);

    overflow: hidden;

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

    cursor: default;

    box-sizing: border-box;

    display: none;

}


.card-noticia.ativo {

    display: block;

}


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

.imagem-noticia {

    width: 100%;

    height: 200px;

    overflow: hidden;

}


.imagem-noticia img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: left;

    display: block;

}


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

.conteudo-noticia {

    width: 100%;

    padding:5px 5px 10px 10px;

    background: var(--azulEscuro);

    box-sizing: border-box;

}


/* =====================================================
   TÍTULO DA NOTÍCIA
===================================================== */

.conteudo-noticia h3 {

    display: block;

    margin: 0 0 5px;

}


.titulo-card {

    display: block;

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.3;

    color: var(--corBranca);

}


/* =====================================================
   TEXTO
===================================================== */

.conteudo-noticia p {

    margin: 0;

    font-size: .7rem;

    line-height: 1.6;
    
    color: var(--corBranca);

    font-weight: 400;

}


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

.botao-ler-mais {

    display: inline-block;

    margin-top: 5px;

    color: var(--corBranca);

    text-decoration: none;

    font-size: .8rem;

    font-weight: 300;

    border-bottom: 1px solid var(--laranjaForte);

   
    opacity: 1;

    transform: none;

}


/* =====================================================
   SETAS
===================================================== */

.seta-noticia {

    position: absolute;

    top: 60%;

    transform: translateY(-50%);

    width: 25px;

    height: 25px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: var(--azulClaro);

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    z-index: 5;

    transition: .3s ease;

}


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

.seta-anterior {

    left: -2px;

}


/* =====================================================
   SETA PRÓXIMA
===================================================== */

.seta-proxima {

    right:-2px ;

}


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

.seta-noticia img {

    width: 12px;

    height: 12px;

    display: block;

}


/* =====================================================
   EFEITO AO TOCAR
===================================================== */

.seta-noticia:active {

    transform: translateY(-50%) scale(.90);

}


/* =====================================================
   HOVER DAS SETAS
===================================================== */

.seta-noticia:hover {

    background: var(--laranjaFraco);

}


/* =====================================================
   RODAPÉ
===================================================== */

.rodape-noticias {

    width: 100%;

    display: flex;

    justify-content: center;

    box-sizing: border-box;

}


/* =====================================================
   BOTÃO VER TODAS
===================================================== */

.botao-ver-todas {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 15px 0 0;

    font-size: .9rem;

    font-weight: 400;

    text-decoration: none;

    color: var(--corTexto);

    transition: .3s ease;

}


/* =====================================================
   ÍCONE VER TODAS
===================================================== */

.botao-ver-todas img {

    width: 15px;

    height: 15px;

    display: block;

}


/* =====================================================
   HOVER — VER TODAS
===================================================== */

.botao-ver-todas:hover {

    color: var(--laranjaForte);

}


/* =====================================================
   SEÇÃO PARCEIROS — MOBILE
===================================================== */

.secao-parceiros {

    width: 100%;

    padding: 45px 20px 45px;

    background: var(--fundoCinza);

    box-sizing: border-box;

    text-align: center;

    margin: 0 0 30px;

}


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

.conteudo-parceiro {

    width: 100%;

    margin: 0 auto 20px;

}


.conteudo-parceiro h2 {

    margin: 0 0 5px;

    color: var(--azulEscuro);

    font-size: 1.9rem;

    font-weight: 700;

}


.conteudo-parceiro p {

    margin: 0;

    color: var(--azulEscuro);

    font-size: .9rem;

    line-height: 1.4;

    font-weight: 400;

}


/* =====================================================
   LISTA DOS PARCEIROS
===================================================== */

.lista-parceiros {

    position: relative;

    width: 100%;

    height: 170px;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    border: 1px solid #ddd;

    border-radius: 10px;

    

    box-sizing: border-box;

}


/* =====================================================
   PARCEIRO
===================================================== */

.parceiro {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    transform: translateX(100%);

    transition:

        transform .6s ease,

        opacity .6s ease;

}


/* =====================================================
   PARCEIRO ATIVO
===================================================== */

.parceiro.ativo {

    opacity: 1;

    transform: translateX(0);

}


/* =====================================================
   PARCEIRO QUE SAI
===================================================== */

.parceiro.saindo {

    opacity: 0;

    transform: translateX(-100%);

}


/* =====================================================
   IMAGEM NORMAL
   NÃO APARECE NO MOBILE
===================================================== */

.parceiro .icone-normal {

    display: none;

}


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

.parceiro .icone-cor {

    display: block;

    width: 100%;

    max-width: 450px;

    height: 160px;

    object-fit: contain;

}