@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:600;
    margin-bottom:10px;
        line-height: 1.2;
}

.texto-sessao p{
    font-size:0.95rem;
    font-weight:300;
    margin-bottom:35px;
    line-height: 1.4;
}

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

.texto-sessao a:hover{

    color: var(--laranjaForte);

}

.indicadores{

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

    display:flex;
    gap:9px;
}

.ponto{

    width:12px;
    height:12px;

    border-radius:50%;

    background:var(--corBranca);

    cursor:pointer;

    transition:.1s;
}

.ponto.ativo{
    background:#F37839;
}


/* Misao prosito */


.missao-visao{

    padding:50px 70px 0;
     height: 350px;
    


}


.conteudo-missaoVisao{

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

}


/* Estado inicial escondido */

.card-missao,
.card-visao{

    width:420px;
   

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

    flex:1;

}



.card-conteudo h2{

    text-align:center;

    color:var(--azulEscuro);

    font-size:1.5rem;
    font-weight: 500;

    margin-bottom:5px;

}



.card-conteudo p{

    text-align:center;

    color:var(--azulEscuro);;

    font-size:.95rem;
    font-weight: 300;

    line-height:1.4;
    padding-bottom: 10px;

}



.card-rodape{

    height:50px;

    background:var(--azulEscuro);

}


/* estatistica */

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

.estatistica{

    position:relative;

    background:var(--cor-branca);

    padding: 0 0 80px;

}


.titulo-estatistica{

    position:absolute;

    top:55px;

    left:50%;

    transform:translateX(-50%);

    color:var(--corBranca);

    font-size:2.3rem;

    font-weight:600;

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

    text-align:center;

   

    

}

.numero{

    --progresso:0%;

    position:relative;

    width:80px;
    height:80px;

    display:flex;

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

    margin:0 auto 10px;

    border-radius:50%;

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

    color:var(--corBranca);

    font-size:.95rem;

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

    line-height:1.4;

}


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

.destaque {
    position: relative;
    width: 100%;
    margin: 30px 0;
    overflow: hidden;
}


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

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

.img-destaque img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ===========================
   DEGRADÊ SOBRE TODA A IMAGEM
=========================== */

.destaque::after {

    content: "";

    position: absolute;

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

    width: 100%;
    height: 100%;

    background: linear-gradient(
        to bottom,
        rgba(55, 152, 202, 0.10) 0%,
        rgba(29, 48, 86, 1) 100%
    );

    z-index: 1;

    pointer-events: none;

}

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

.destaque h2 {
    position: absolute;

    top: 40px;
    left: 40px;

    color: var(--corBranca);

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

    padding-left: 50px;

    z-index: 3;
}


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

.conteudo-destaque {
    position: absolute;

    left: 40px;
    bottom: 20px;

    width: 700px;

    padding: 35px;
    padding-left: 60px;

    color: var(--corBranca);

    z-index: 3;
}


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

.conteudo-destaque h3 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;

        display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-bottom: 5px;

    
}


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

.conteudo-destaque p {
    line-height: 1.4;
    margin-bottom: 15px;

    font-size: .95rem;
    font-weight: 300;

        display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}


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

.conteudo-destaque a {
    display: inline-block;

    color: var(--corBranca);

    text-decoration: none;

    font-weight: 400;

    padding: 2px;

    font-size: .95rem;

    transition: .3s;
    border-bottom: 2px solid var(--laranjaForte);
}

.conteudo-destaque a:hover {
    color: var(--laranjaForte);
    border-bottom: 2px solid var(--corBranca);
}



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

.secao-noticias{

    width:100%;
  margin-bottom: 10px;
    padding:2px 25px ;

    background:var(--corBranca);

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


}


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

.titulo-noticias{

    margin-bottom:5px;

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

    font-size:2.3rem;

    font-weight:600;

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

}


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

.lista-noticias{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}


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

.card-noticia{

    width:360px;

    background:var(--corBranca);

    overflow:hidden;

    transition:.35s;

    cursor:pointer;


}


.card-noticia:hover{

    transform:translateY(-8px);

}


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

.imagem-noticia{

    width:100%;

    height:230px;

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

    background: var(--corBranca);

    transition: background-color .3s ease;

    box-sizing: border-box;

}


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

.conteudo-noticia h3 {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    min-height: 1.5rem;
     font-weight: 500;
    margin: 0 0 8px;

}


/* ==========================================
   TÍTULO DO CARD
========================================== */

.titulo-card {

    flex: 1;

    margin: 0;

    font-size: 1.2rem;

    font-weight: 600;

    line-height: 1.2;

    color: var(--corTexto);


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

}


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

.conteudo-noticia p {

    margin: 0;

    font-size: .95rem;
    font-weight: 300;

    line-height: 1.4;

    color: var(--corTexto);


        display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;

}


/* ==========================================
   HOVER DO CARD
========================================== */

.card-noticia:hover .conteudo-noticia {

    background-color: var(--azulEscuro);

}


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

    color: var(--corBranca);

}


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

.botao-ler-mais {

    display: inline-block;

    margin-top: 15px;
    font-size: .95rem;

    color: var(--corBranca);

    text-decoration: none;

    font-weight: 300;

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

    padding-bottom: 4px;

    opacity: 0;

    transform: translateY(15px);

    transition:
        opacity .4s ease,
        transform .4s ease;

}


.card-noticia:hover .botao-ler-mais {

    opacity: 1;

    transform: translateY(0);

}


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

.rodape-noticias {

    display: flex;

    justify-content: right;
    margin-right: 50px;

}


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

.botao-ver-todas {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 0;

    font-size: .95rem;

    font-weight: 400;

    text-decoration: none;

    color: var(--azulEscuro);

    transition: .3s;
    gap:5px;

}

.botao-ver-todas img {
    width: 12px;
    height: 12px;
    filter: brightness(0) saturate(100%)
            invert(18%) sepia(15%)
            saturate(1300%) hue-rotate(180deg)
            brightness(85%);
}




.botao-ver-todas:hover {

    color: var(--laranjaForte);

    filter: brightness(0) saturate(100%)
        invert(52%) sepia(91%)
        saturate(2300%) hue-rotate(345deg)
        brightness(101%) contrast(95%);

}


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

.secao-parceiros{

    width:100%;

    padding:40px 40px;

    background:#f5f3f3;

    box-sizing:border-box;

    text-align:center;

}


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

.conteudo-parceiro{

    max-width:900px;

    margin:0 auto 20px;

}


.conteudo-parceiro h2{

    color:var(--azulEscuro);

    font-size:2.3rem;

    

    font-weight:600;

}


.conteudo-parceiro p{

    color:var(--azulEscuro);

    font-size: .95rem;

    line-height:1.4;

    font-weight:300;

    margin:0;

}


/* =====================================================
   LISTA DOS PARCEIROS — DESKTOP
===================================================== */

.lista-parceiros {
    position: relative;

    width: 100%;
    padding: 25px 40px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    border: 1px solid #ddd;
    border-radius: 18px;

    background: var(--corBranca);

    overflow: hidden;
}


/* =====================================================
   ÁREA DE MOVIMENTO
===================================================== */

.lista-parceiros-track {
    display: flex;
    align-items: center;

    width: max-content;

    gap: 30px;

    animation: carrosselParceiros 18s linear infinite;
}


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

.parceiro {
    position: relative;

    flex: 0 0 380px;

    width: 380px;
    height: 130px;

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


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

.parceiro a {
    position: relative;

    width: 100%;
    height: 100%;

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


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

.parceiro img {
    width: 100%;
    height: 100%;

    display: block;

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


/* =====================================================
   GRADIENTE NAS EXTREMIDADES
===================================================== */

.lista-parceiros::before,
.lista-parceiros::after {
    content: "";

    position: absolute;
    top: 0;

    width: 80px;
    height: 100%;

    z-index: 5;

    pointer-events: none;
}

.lista-parceiros::before {
    left: 0;

    background: linear-gradient(
        to right,
        var(--corBranca),
        transparent
    );
}

.lista-parceiros::after {
    right: 0;

    background: linear-gradient(
        to left,
        var(--corBranca),
        transparent
    );
}


/* =====================================================
   ANIMAÇÃO INFINITA
===================================================== */

@keyframes carrosselParceiros {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(
            calc(-50% - 15px)
        );
    }

}


.lista-parceiros-track:hover {
    animation-play-state: paused;
}