@import "reset.css";

.caixa{
    background-color: #29618c;
    margin: 80px 0 0 0;
    padding: 0 0 30px 30px;
    font-family: var(--fonte-principal);
}
.sessao-principal{
    position: relative;
    display: flex;
}





.img-sessao{
    position:relative;
    width:calc(100% - 450px);
    height:400px;
    margin:30px 0 0 60px;
    overflow:hidden;
}


.img{
    position:absolute;
    border-radius: 25px;
    inset:0;

    width:100%;
    height:100%;

    
object-fit: cover;   /* mantém proporção e cobre todo espaço */
  object-position: center; /* centraliza a imagem (não fica puxada para direita ou esquerda) */
  display: block;

    opacity:0;

    transition:opacity .8s ease;
}


.img.ativa{
    opacity:1;
}



.texto-sessao{
    position: absolute;

    right: 0;
    bottom: -10px;

    width: 400px;
    min-height: 100%;

    padding: 100px 40px 20px 0;


background: linear-gradient(
    to bottom,
    #085b84 0%,
    #1D3056 100%
);

    color: var(--corBranca);

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

    text-align: right;

    z-index: 2;
}

.texto-sessao::before{

    content:"";

    position:absolute;

    top:0;
    left:-219px;

    width:220px;
    height:100%;

background: linear-gradient(
    to bottom,
     #085b84 0%,
    #1D3056 100%
);



    border-bottom-left-radius:25px;

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

    z-index:-1;
}

.texto-sessao h1{
    font-size:1.9rem;
    font-weight:700;
    margin-bottom:15px;
        line-height: 1.1;
}

.texto-sessao p{
    font-size:0.98rem;
    font-weight:300;
    margin-bottom:35px;
}

.texto-sessao a{
    align-self:flex-end;
    font-size:1.2rem;
    color:var(--corBranca);
    font-weight:300;
    text-decoration:none;
}

.indicadores{

    
    position:absolute;
    left:-160px;
    bottom:20px;

    display:flex;
    gap:12px;
}

.ponto{

    width:13px;
    height:13px;

    border-radius:50%;

    background:#FFFFFF66;

    cursor:pointer;

    transition:.1s;
}

.ponto.ativo{
    background:#F37839;
}


/* Misao prosito */


.missao-visao{

    padding:130px 70px 30px;
     height: 500px;
    


}


.conteudo-missaoVisao{

    display:flex;
    justify-content:center;
    gap:40px;

}


/* Estado inicial escondido */

.card-missao,
.card-visao{

    width:450px;
   

    background:var(--cor-branca);

    border-radius:4px;

    overflow:hidden;

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

    display:none;

}


/* Quando aparecer */

.card-missao.ativo{

    display:flex;

    flex-direction:column;

    animation: esquerda 1.5s ease forwards;

}


.card-visao.ativo{

    display:flex;

    flex-direction:column;

    animation: direita 1.5s ease forwards;

}



/* animação da esquerda */

@keyframes esquerda{

    from{

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

    }

    to{

        transform:translate(0, 0);

    }

}



/* animação da direita */

@keyframes direita{

    from{

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

    }

    to{

        transform:translate(0, 0);

    }

}


.card-conteudo{

    padding:8px 20px;

    flex:1;

}



.card-conteudo h2{

    text-align:center;

    color:var(--azulEscuro);

    font-size:1.5rem;

    margin-bottom:15px;

}



.card-conteudo p{

    text-align:center;

    color:var(--azulEscuro);;

    font-size:.98rem;

    line-height:1.7;

}



.card-rodape{

    height:55px;

    background:var(--azulEscuro);

}


/* estatistica */

/* ===========================
   ESTATÍSTICAS
=========================== */

.estatistica{

    position:relative;

    background:var(--cor-branca);

    padding:10px 0 120px;

}


.titulo-estatistica{

    position:absolute;

    top:55px;

    left:50%;

    transform:translateX(-50%);

    color:var(--corBranca);

    font-size:2.3rem;

    font-weight:700;

    z-index:1;

}


.imagem-estatistica{

    margin:0 105px;

    height:450px;

    overflow:hidden;

}


.imagem-estatistica img{

    width:100%;

    height:100%;

    object-fit:cover;

}



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

.estatisticas-cards{

    position:absolute;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    width:70%;

    display:flex;

    justify-content:center;
    border-radius: 10px;

  
    background:var(--azulEscuro);
    
}


.card-estatistica{

    width:240px;

    padding:30px 20px;

    text-align:center;

   

    

}

.numero{

    --progresso:0%;

    position:relative;

    width:90px;
    height:90px;

    display:flex;

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

    margin:0 auto 30px;

    border-radius:50%;

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

    color:var(--corBranca);

    font-size:1.1rem;

    font-weight:600;

    z-index:1;

}


.numero::before{

    content:"";

    position:absolute;

    inset:5px;

    background:var(--azulEscuro);

    border-radius:50%;

    z-index:-1;

}


.card-estatistica p{

    color:var(--corBranca);

    font-size:0.98rem;

    line-height:1.5;

}


/* destaque */


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

.destaque{

    position:relative;

    width:100%;

    margin:60px 0;

}


.img-destaque{

    width:100%;

    height:520px;

    overflow:hidden;

}


.img-destaque img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/* Título */

.destaque h2{

    position:absolute;

    top:40px;

    left:40px;

    color:var(--corBranca);

    font-size:2.5rem;

    font-weight:800;

    z-index:2;
    padding-left: 60px;

}


/* Conteúdo */

.conteudo-destaque{

    position:absolute;

     left:40px;

    bottom:-20px;

    width:700px;


    padding:35px;

    padding-left: 60px;

    color:var(--corBranca);

    z-index:2;

}


.conteudo-destaque h3{

    font-size:2rem;
     font-weight: 600;
   

}


.conteudo-destaque p{

    line-height:1.5;
    margin-bottom:15px;
    font-size: 1.1rem;
    font-weight: 300;

}


.conteudo-destaque a{

    display:inline-block;

    color:var(--corBranca);

    text-decoration:none;

    font-weight:300;

    padding:2px;

   font-size: 1.2rem;

    transition:.3s;

}


.conteudo-destaque a:hover{

    color:var(--laranjaForte);

}



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

.secao-noticias{

    width:100%;

    padding:2px 40px 40px;

    background:var(--corBranca);

}


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

.titulo-noticias{

    margin-bottom:30px;

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

    font-size:2.5rem;

    font-weight:800;

    color:var(--azulEscuro);
    padding-left: 30px;
    

}


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

.lista-noticias{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}


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

.card-noticia{

    width:390px;

    background:var(--corBranca);

    overflow:hidden;

    transition:.35s;

    cursor:pointer;

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

}


.card-noticia:hover{

    transform:translateY(-8px);

}


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

.imagem-noticia{

    width:100%;

    height:240px;

    overflow:hidden;


}


.imagem-noticia img{

    width:100%;

    height:100%;

  object-fit: cover;   /* mantém proporção e cobre todo espaço */
  object-position: center; /* centraliza a imagem (não fica puxada para direita ou esquerda) */
  display: block;

    transition:.4s;

}


.card-noticia:hover .imagem-noticia img{

    transform:scale(1.05);

}


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

.conteudo-noticia{

    padding:20px 0 0 0;

}


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

.conteudo-noticia h3{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

  
}


.titulo-card{

    flex:1;

    font-size:1.25rem;

    font-weight:700;

    line-height:1.2;

    color:var(--azulEscuro);

}





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

.conteudo-noticia p{

    font-size:1rem;

    line-height:1.5;

    color:var(--azulEscuro);

}

.card-noticia:hover .titulo-card,
.card-noticia:hover .conteudo-noticia p{

    color:var(--corBranca);

    
}

.card-noticia:hover .conteudo-noticia{
    background-color: var(--azulEscuro);
    
}




.card-noticia:hover .botao-ler-mais{
    
    opacity:1;
    
    transform:translateY(0);
    color: var(--corBranca);

}



.conteudo-noticia{

    padding:25px;

    background:var(--corBranca);

    transition:.2s;

}


.botao-ler-mais{

    display:inline-block;

    margin-top:15px;

    color:var(--corBranca);

    text-decoration:none;

    font-weight:300;

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

    padding-bottom:4px;

    opacity:0;

    transform:translateY(15px);

    transition:.4s;

}


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

.rodape-noticias{

    display:flex;

    justify-content:flex-end;

  

}


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

.botao-ver-todas{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:1.1rem;

    font-weight:400;

    text-decoration:none;

    color:var(--azulEscuro);

    transition:.3s;
    padding: 20px 0 0 0;

}



.botao-ver-todas img{

    width:22px;

    height:22px;

}


.botao-ver-todas:hover{

    color:var(--laranjaForte);

}



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

.secao-parceiros{

    width:100%;

    padding:80px 40px;

    background:#f5f3f3;

    box-sizing:border-box;

    text-align:center;

}


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

.conteudo-parceiro{

    max-width:1000px;

    margin:0 auto 40px;

}


.conteudo-parceiro h2{

    color:var(--azulEscuro);

    font-size:2.4rem;

    margin-bottom:15px;

    font-weight:800;

}


.conteudo-parceiro p{

    color:var(--azulEscuro);

    font-size:1.1rem;

    line-height:1.5;

    font-weight:500;

    margin:0;

}


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

.lista-parceiros{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    width:100%;

    padding:25px 40px;

    box-sizing:border-box;

    border:1px solid #ddd;

    border-radius:18px;

    background:var(--corBranca);

}

/* ==========================================
   SETAS DO CARROSSEL — DESKTOP
========================================== */

.seta-noticia {

    display: none;

}


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

.parceiro{
    position:relative;

    width:380px;
    height:130px;

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


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

.parceiro img{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:opacity .3s ease;

}


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

.icone-normal{

    opacity:1;

}


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

.parceiro .icone-cor{

    position:absolute;

    inset:0;

    opacity:0;

}


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

.parceiro:hover .icone-normal{

    opacity:0;

}


.parceiro:hover .icone-cor{

    opacity:1;

}