@import "reset.css";
/* ==========================================
   ÁREA DO ASSOCIADO
========================================== */

.caixa{

    width:100%;

    padding:60px 0 10px 0;

    background:var(--fundoCinza);

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

    box-sizing:border-box;
    margin:40px 0 85px;

}


.sessao-principal{

    position:relative;

    display:flex;

    align-items:stretch;

    min-height:350px;

}


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

.texto-sessao{

    position:relative;

    width:60%;

    padding:60px 70px 60px 120px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    color:var(--azulEscuro);

    z-index:2;

}



.texto-sessao h1{

    position:relative;

    margin:0 0 15px;

    font-size:2.8rem;

    line-height:1.15;

    font-weight:700;

    color:var(--azulEscuro);

}


.texto-sessao h1::after{

    content:"";

    display:block;

    width:110px;
    height:8px;

    margin:15px 20px;

    background:var(--laranjaForte);

    

}

.texto-sessao p{

    max-width:520px;

    margin:0 0 30px;

    font-size:.87rem;

    line-height:1.7;

    color:var(--azulEscuro);

}





/* ==========================================
   ÁREA DA IMAGEM
========================================== */

.img-sessao {

    position: relative;

    width: 65%;

    height: 400px;

    top: -30px;

    overflow: hidden;
}


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

.img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

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

}


/* ==========================================
   GRADIENTE
   MESMO CORTE DA IMAGEM
========================================== */

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

    /*
       O gradiente acompanha
       exatamente a diagonal da imagem
    */
    clip-path: polygon(
        0 100%,
        45% 0,
        100% 0,
        100% 100%,
        0 100%
    );

    z-index: 1;

    pointer-events: none;
}

/* ==========================================
   DIREITOS E DEVERES
========================================== */

.direito-dever{

    position:relative;

    width:100%;

    padding:40px 0 150px;

    background:var(--corBranca);

    box-sizing:border-box;

}


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

.titulo-direitos{

        text-align:center;

    color:var(--azulEscuro);

    font-size: 3rem;

    font-weight:700;

}


/* ==========================================
   ÁREA DA IMAGEM
========================================== */

.imagem-direitos{

    position:relative;

    width:100%;

    height:520px;

    overflow:hidden;

   

}


/* IMAGEM */

.imagem-direitos > img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:bottom;

    display:block;

}


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

.conteudo-direitos{

    position:absolute;

    top:35px;

    left:140px;

    width:500px;

    padding:25px 30px;

    color:var(--corBranca);

    
    z-index:2;

}

/* =====================================================
   CORREÇÃO — TELAS GRANDES
===================================================== */

@media screen and (min-width: 1600px){

    .imagem-direitos{

        height:520px !important;

        overflow:visible !important;

    }

    .cards-direitos{

        position:absolute !important;

        top:535px !important;

        bottom:auto !important;

        left:50% !important;

        transform:translateX(-50%) !important;

        width:70% !important;

        z-index:3 !important;

    }

}


.conteudo-direitos h3{

    margin:0 0 12px;

    font-size:2.2rem;

    font-weight:700;
    line-height:1;

}


.conteudo-direitos p{

    margin:0;

    font-size:1rem;

    line-height:1.6;

    font-weight:300;

}


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

.cards-direitos{

    position:absolute;

    left:50%;

    bottom:-145px;

    transform:translateX(-50%);

    width:74%;

    display:flex;

    justify-content:center;

    gap:30px;

    z-index:10;

}


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

.card-direito{

    flex:1;

    min-height:230px;

    padding:25px 30px 25px 10px;

    border-radius:8px;

    background:var(--azulClaro);

    box-shadow:0 15px 35px rgba(0,0,0,.2);

    box-sizing:border-box;

    animation:animarCard 8s ease-in-out infinite alternate;

}


/* Segundo card começa ligeiramente diferente */

.card-direito:nth-child(2){

    animation-delay:1.5s;

}


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

.card-direito h4{

    display:table;

   
    padding-bottom:7px;

    color:var(--corBranca);

    font-size:1.3rem;

    font-weight:400;

    
}

.card-direito h4::after{

    content:"";

    display:block;

    width:140px;
    height:2px;

    margin:4px 0;

    background:var(--fundoCinza);

    

}


/* ==========================================
   LISTA
========================================== */

.card-direito ul{

    margin:0;

    padding:0;

    list-style:none;

}


.card-direito li{

    position:relative;

    margin-bottom:7px;

    padding-left:18px;

    color:var(--corBranca);

    font-size:1rem;

    line-height:1.5;
    font-weight: 300

}


/* ponto branco */

.card-direito li::before{

    content:"";

    position:absolute;

    left:0;

    top:.65em;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--corBranca);

}


/* ==========================================
   ANIMAÇÃO DOS CARDS
========================================== */

@keyframes animarCard{

    0%{

        background:var(--azulClaro);

    }

    50%{

        background:#2c79a3;

    }

    100%{

        background:var(--azulEscuro);

    }

}




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

.conteudo-deveres{

    position:absolute;

    left:50%;

    bottom:260px;

    transform:translateX(-50%);

    width:75%;

    display:flex;

    z-index:5;

}


/* ==========================================
   ITEM
========================================== */

.item-dever{

    flex:1;

    padding:0 8px;

    opacity:0;

    color:var(--corBranca);

}


/* linhas verticais */

.item-dever:not(:last-child){

    border-right:1px solid rgba(255,255,255,.35);
    height: 80px;
    

}


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

.item-dever h3{

    margin-bottom:6px;

    font-size:1rem;

    font-weight:700;

}


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

.item-dever p{

    font-size:.90rem;

    line-height:1.4;

}


/* ==========================================
   POSIÇÃO INICIAL
========================================== */

/* primeiro */

.item-dever:nth-child(1){

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

}

/* segundo começa como se viesse do primeiro */

.item-dever:nth-child(2){

    transform:translate(-120px,-20px);

}

/* terceiro começa como se viesse do segundo */

.item-dever:nth-child(3){

    transform:translate(-60px,-20px);

}


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

@keyframes aparecerItem{

    from{

        opacity:0;

    }

    to{

        opacity:1;

        transform:translate(0,0);

    }

}


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

.conteudo-deveres.ativo .item-dever:nth-child(1){

    animation:aparecerItem 1s ease forwards;

}

.conteudo-deveres.ativo .item-dever:nth-child(2){

    animation:aparecerItem 1s ease 1s forwards;

}

.conteudo-deveres.ativo .item-dever:nth-child(3){

    animation:aparecerItem 1s ease 1.5s forwards;

}



/* ==========================================
   PERGUNTAS FREQUENTES
========================================== */

.perguntas{

    position:relative;

    width:100%;
    height:300px;

    margin:40px 0 0;

    overflow:hidden;

    margin-bottom: 0;

    padding-bottom: 0;

}


/* ==========================================
   BACKGROUND COMPLETO
========================================== */

.img-completo{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    }


.img-completo img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

}


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

.conteudo-perguntas{

    position:absolute;

    top:0;
    left:0;

    width:40%;
    height:100%;

    padding:0 40px 0 0 100px;

    box-sizing:border-box;

    z-index:2;

}


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

.conteudo-perguntas h2{

    margin:0 0 30px;

    color:var(--azulEscuro);

    font-size:2.2rem;

    font-weight:700;

    line-height:1.4;

}


/* ==========================================
   LISTA
========================================== */

.lista-perguntas{

    display:flex;

    flex-direction:column;

    gap:22px;

}
/* ==========================================
   PERGUNTAS FREQUENTES
========================================== */

.perguntas{

    position:relative;

    width:100%;

    min-height:1025px;

    margin:250px 0 0;

    overflow:hidden;

}


/* ==========================================
   BACKGROUND COMPLETO
========================================== */

.img-completo{

    position:absolute;

    inset:0;

    width:100%;
    height:1000px;

    z-index:0;

}


.img-completo img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

}


/* ==========================================
   CONTEÚDO DAS PERGUNTAS
========================================== */

.conteudo-perguntas{

    position:relative;

    width:50%;

    min-height:900px;

    padding:90px 50px 0 150px;

    box-sizing:border-box;

    z-index:2;

}


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

.conteudo-perguntas h2{

    margin:10px 0 40px;

    color:var(--azulEscuro);

    font-size:3rem;

    font-weight:700;

    line-height:1.4;

}


/* ==========================================
   LISTA DE PERGUNTAS
========================================== */

.lista-perguntas{

    display:flex;

    flex-direction:column;

    gap:50px;

}


/* ==========================================
   PERGUNTA
========================================== */

.pergunta{

    display:flex;

    align-items:flex-start;

    cursor:pointer;
    gap: 10px;

}


/* ==========================================
   NÚMERO
========================================== */

.pergunta .numeros{

    width:55px;

    height:55px;

    min-width:55px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--laranjaForte);

    color:var(--corBranca);

    font-size:1.25rem;

    font-weight:600;

    transition:transform .3s ease;

}


.pergunta:hover .numeros{

    transform:scale(1.05);

}


/* ==========================================
   CONTEÚDO DA PERGUNTA
========================================== */

.pergunta-conteudo{

    flex:1;

    min-width:0;

}


/* ==========================================
   TEXTO DA PERGUNTA
========================================== */

.pergunta-conteudo p{

    margin:0;

    color:var(--azulEscuro);

    font-size:1.65rem;

    font-weight:500;

    line-height:1.45;

}


/* ==========================================
   RESPOSTA
========================================== */

.pergunta .resposta{

    display:block;

    max-height:0;

    overflow:hidden;

    opacity:0;

    margin-top:0;

    color: var(--azulEscuro);

    background:transparent;

    font-size:1.1rem;

    font-weight:400;

    line-height:1.4;

    transition:
        max-height .5s ease,
        opacity .3s ease,
        margin-top .3s ease;

}


/* ==========================================
   RESPOSTA ABERTA
========================================== */

.pergunta.ativa .resposta{

    max-height:600px;

    opacity:1;

    margin-top:2px;

}


/* ==========================================
   IMAGEM DA DIREITA
========================================== */

.imagem-perguntas{

    position:absolute;

    top:-60px;

    right:-550px;

    width:75%;

    height:950px;

    z-index:3;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    pointer-events:none;

}


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

.imagem-perguntas img{

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    display:block;

}