/* ==========================================================
   CONFORMIDADE
========================================================== */


.conformidade {

    padding: 8rem 0;

    background: #F1EFE7;

}



.conformidade .container {

    width: min(1100px, 92%);

    margin: 0 auto;

}





/* ==========================================================
   GRID PRINCIPAL
========================================================== */


.conformidade-grid {

    display: grid;

    grid-template-columns: 1fr 380px;

    gap: 5rem;

    align-items: center;

}







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


.conformidade-tag {

    color: #1F4D3A;

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: .18rem;

    text-transform: uppercase;

}



.conformidade-texto h2 {

    margin: 1.2rem 0 1.5rem;

    color: #0D2C3A;

    font-size: clamp(2.2rem, 4vw, 3.5rem);

    line-height: 1.2;

}



.conformidade-texto p {

    color: #56636A;

    font-size: 1.1rem;

    line-height: 1.9;

    margin-bottom: 2rem;

}



.conformidade-texto ul {

    padding-left: 1.2rem;

    color: #56636A;

    line-height: 1.8;

    margin-bottom: 2rem;

}



.conformidade-texto li {

    margin-bottom: .8rem;

}





/* ==========================================================
   LINKS INSTITUCIONAIS
========================================================== */


.conformidade-links {

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

}



.conformidade-links a {

    color:#1F4D3A;

    font-weight:700;

    text-decoration:none;

}



.conformidade-links a:hover {

    text-decoration:underline;

}








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


.conformidade-card {

    padding:1.5rem;

    background:#fff;

    border-radius:24px;

    box-shadow:

        0 20px 50px rgba(0,0,0,.12);

}



.credencial-link {

    border:none;

    background:none;

    padding:0;

    cursor:pointer;

    display:block;

    width:100%;

}



.credencial-link img {

    width:100%;

    display:block;

    border-radius:12px;

    transition:.35s ease;

}



.credencial-link:hover img {

    transform:scale(1.03);

}



.credencial-legenda {

    text-align:center;

    margin-top:1rem;

    color:#56636A;

    font-size:.9rem;

}








/* ==========================================================
   MODAL CADASTUR
========================================================== */


.credencial-modal {

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.78);

    backdrop-filter:blur(8px);

    z-index:9999;

    padding:2rem;

}





.credencial-modal.ativo {

    display:flex;

    animation:aparecerCredencial .3s ease;

}







@keyframes aparecerCredencial {


    from {

        opacity:0;

    }


    to {

        opacity:1;

    }


}








/* ==========================================================
   CONTAINER MODAL
========================================================== */


.credencial-container {

    width:min(720px,100%);

    max-height:90vh;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:

        0 30px 80px rgba(0,0,0,.35);

}








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


.credencial-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    padding:1.5rem 2rem;

    background:#0D2C3A;

    color:#fff;

}



.credencial-titulo {

    display:flex;

    flex-direction:column;

    gap:.3rem;

}



.credencial-titulo strong {

    font-size:1.3rem;

}



.credencial-titulo span {

    font-size:.8rem;

    letter-spacing:.15rem;

    opacity:.8;

}



.credencial-acoes {

    display:flex;

    align-items:center;

    gap:.8rem;

}



.credencial-acoes a {

    padding:.6rem 1rem;

    border-radius:999px;

    background:rgba(255,255,255,.12);

    color:#fff;

    text-decoration:none;

    font-size:.9rem;

}



.credencial-fechar {

    background:none;

    border:none;

    color:#fff;

    font-size:2rem;

    cursor:pointer;

}








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


.credencial-conteudo {

    padding:2rem;

    max-height:60vh;

    overflow:auto;

}



.credencial-conteudo img {

    width:100%;

    display:block;

    border-radius:12px;

}








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


.credencial-footer {

    padding:1.8rem 2rem;

    background:#F5F2EB;

    color:#56636A;

    line-height:1.7;

}



.credencial-footer strong {

    color:#0D2C3A;

}



.credencial-footer small {

    display:block;

    margin-top:1rem;

    opacity:.7;

}








/* ==========================================================
   RESPONSIVO
========================================================== */


@media(max-width:850px){


    .conformidade-grid {

        grid-template-columns:1fr;

        gap:3rem;

    }


}





@media(max-width:600px){


    .credencial-modal {

        padding:1rem;

    }


    .credencial-header {

        padding:1.2rem;

    }


    .credencial-acoes a {

        display:none;

    }


    .credencial-conteudo {

        padding:1rem;

    }


}