/* ========================= */
/* RESET */
/* ========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ========================= */
/* VARI�VEIS */
/* ========================= */

:root{

    --azul:#0A4D8F;
    --azul-escuro:#06376D;
    --azul-claro:#EAF4FD;
    --cinza:#F5F7FA;
    --texto:#333;
    --branco:#FFF;

}

/* ========================= */
/* BODY */
/* ========================= */

body{

    margin:0;

    padding:0;

    font-family:'Poppins',sans-serif;

    background:#F5F7FA;

    color:#333;

}

.container{

    width:min(1400px, calc(100% - 100px));

    margin:0 auto;

}


/*======================================
    HEADER FIXO
======================================*/

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:99999;

}

/*======================================
    TOP BAR
======================================*/

.top-bar{

    background:#06376D;

    color:#FFF;

    height:38px;

}

.top-bar-content{

    height:38px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/*=======================================
    MENU
=======================================*/

#menu ul{

    display:flex;

    list-style:none;

    gap:35px;

}

#menu a{

    text-decoration:none;

    color:#333;

    font-weight:500;

    transition:.3s;

    position:relative;

}

#menu a:hover{

    color:#0A4D8F;

}

#menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#0A4D8F;

    transition:.3s;

}

#menu a:hover::after{

    width:100%;

}
#menu a.ativo{

    color:#0A4D8F;

    font-weight:700;

}

#menu a.ativo::after{

    width:100%;

}

/*======================================
    NAVBAR
======================================*/

.navbar{

    background:#FFF;

    height:95px;

    box-shadow:0 3px 15px rgba(0,0,0,.08);

}

.navbar-content{

    display:grid;

    grid-template-columns:auto 1fr auto auto;

    align-items:center;

    gap:50px;

    min-height:120px;

    padding:15px 0;

}
    
/* ========================= */
/* LOGO */
/* ========================= */

.logo{

    display:flex;

    align-items:center;

    gap:22px;

    min-width:420px;

}

.logo img{

    width:180px;

    height:auto;

}

.logo-texto{

    text-decoration: none;

    display:flex;

    flex-direction:column;

    justify-content:center;


}

.logo-texto h1{

    text-decoration: none;

    font-size:15px;

    line-height:1.2;

    margin-bottom:8px;

    color:#0A4D8F;
  

}

.logo-texto span{

    color:#666;

    font-size:14px;

}

a {
    text-decoration: none;
}


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

.btn-consulta{

    background:#0A4D8F;

    color:white;

    padding:12px 16px;

    border-radius:8px;

    text-decoration:none;

    transition:.3s;

    font-weight:600;

}

.btn-consulta:hover{

    background:#06376D;

    transform:translateY(-2px);

}


/* ========================= */
/* MENU MOBILE */
/* ========================= */

#btn-menu{

    display:none;

    background:none;

    border:none;

    font-size:34px;

    color:var(--azul);

    cursor:pointer;

}

/* ========================= */
/* MAIN */
/* ========================= */

main{

    width:90%;

    max-width:1200px;

    margin:60px auto;

}

/* ========================= */
/* FOOTER */
/* ========================= */


.footer{

    background:#06376D;

    color:#FFF;

    padding:30px 0;

    margin-top: 0px;

}

.footer-grid{

    display:grid;

    grid-template-columns: 2fr 0.72fr 0.5fr;

    gap: 90px;

    margin-top: 10px;


}

.footer-logo{

    width:250px;

    margin-bottom:20px;

}

.footer h3{

    margin-bottom:10px;

}

.footer h4{

    margin-bottom:10px;

    margin-top: 80px;

}

.footer ul{

    list-style:none;

    margin-top: 30px;

}

.footer li{

    margin-bottom:10px;

    line-height:1.8;

    margin-top: 30px;

    
}



.footer a{

    color:white;

    text-decoration:none;

}

.footer a:hover{

    color:#9CCBFF;

}


.footer-mapa{

    margin-top: 25px;

}

.footer-mapa iframe{

    width:100%;

    height:200px;

    border:none;

    border-radius:10px;

}

.footer a{

    color:#FFF;

    text-decoration:none;

}

.footer a:hover{

    color:#9CCBFF;

}

.copyright{

    background:#04284F;

    color:white;

    text-align:center;

    padding:20px;

    font-size:14px;
    
}    


/*==================================================
 HERO
==================================================*/

.hero{

    min-height:80vh;

    background:url("../img/banner.jpg") center center/cover no-repeat;

    position:relative;

    display:flex;

    align-items:center;

}

.hero-overlay{

    width:100%;

    min-height:80vh;

    background:linear-gradient(
        rgba(6,55,109,.82),
        rgba(6,55,109,.72)
    );

    display:flex;

    align-items:center;

}

.hero-container{

    display:flex;

    align-items:center;

}

.hero-text{

    max-width:700px;

    color:#FFF;

}

.hero-tag{

    display:inline-block;

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

    border:1px solid rgba(255,255,255,.25);

    padding:10px 22px;

    border-radius:40px;

    margin-bottom:100px;

    font-size:14px;

    letter-spacing:1px;

    backdrop-filter:blur(5px);

}

.hero h1{

    font-size:60px;

    line-height:1.15;

    margin-bottom:15px;

    font-weight:700;

}

.hero p{

    font-size:22px;

    line-height:1.8;

    margin-bottom:15px;

    color:#f2f2f2;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn-primary{

    background:#FFF;

    color:#0A4D8F;

    padding:16px 34px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-secondary{

    border:2px solid #FFF;

    color:#FFF;

    padding:16px 34px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.btn-secondary:hover{

    background:#FFF;

    color:#0A4D8F;

}

/* ======================================
   APRESENTAÇÃO
====================================== */

.apresentacao{

    padding:30px 0;

    background:#fff;

}

.apresentacao-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.apresentacao-imagem img{

    width:60%;

    border-radius:12px;

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.titulo-pequeno{

    color:var(--azul);

    text-transform:uppercase;

    font-size:14px;

    letter-spacing:2px;

    font-weight:600;

}

.apresentacao h2{

    margin:20px 0;

    font-size:38px;

    color:var(--azul);

}

.apresentacao p{

    margin-bottom:20px;

    line-height:1.8;

    color:#555;

}

/*======================================
    SERVIÇOS
======================================*/

.servicos{

    padding:40px 0;

    background:#F7F9FC;

}

.servicos-grid{

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:30px;

    margin-top:60px;

}

.card-servico{

    background:#FFF;

    border-radius:15px;

    padding:35px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.3s;

    min-height:300px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}

.card-servico:hover{

    transform:translateY(-8px);

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

}

.card-servico .icone{

    font-size:50px;

    margin-bottom:25px;

}

.card-servico h3{

    color:#0A4D8F;

    margin-bottom:15px;

    font-size:26px;

}

.card-servico p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.card-servico a{

    margin-top:auto;

    color:#0A4D8F;

    text-decoration:none;

    font-weight:600;

}


.titulo-secao{

    text-align:center;

    margin-bottom:60px;

    margin:60px 0;

}

.titulo-secao span{

    color:#0A4D8F;

    text-transform:uppercase;

    font-weight:600;

    letter-spacing:2px;

}

.titulo-secao h2{

    font-size:40px;

    margin:10px 0;

    color:#0A4D8F;

}

.titulo-secao p{

    max-width:700px;

    margin:auto;

    color:#666;

    line-height:1.8;

}


/*====================================
    ACESSO R�PIDO
=====================================*/

.acesso-rapido{

    padding-top:900px;

    padding-bottom:170px;

    background:#0A4D8F;

}

.acesso-rapido .titulo-secao span,
.acesso-rapido .titulo-secao h2,
.acesso-rapido .titulo-secao p{

    color:white;

}

.grid-acesso{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.acesso-card{

    background:white;

    border-radius:12px;

    padding:35px;

    text-align:center;

    text-decoration:none;

    transition:.3s;

}

.acesso-card:hover{

    transform:translateY(-10px);

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

}

.acesso-card .icone{

    font-size:45px;

    margin-bottom:20px;

}

.acesso-card h3{

    color:#0A4D8F;

    font-size:18px;

}


/*====================================
    MENSAGEM
====================================*/

.mensagem{

    padding:90px 0;

    background:#ffffff;

}

.mensagem-grid{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:60px;

    align-items:center;

}

.mensagem-foto img{

    width:100%;

    border-radius:10px;

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.mensagem-texto h2{

    color:#0A4D8F;

    font-size:38px;

    margin:20px 0;

}

.mensagem-texto p{

    line-height:1.9;

    color:#555;

    margin-bottom:20px;

}

/*======================================
    NAVBAR FIXA
======================================*/

.navbar{

    position:sticky;

    top:0;

    z-index:9999;

    background:#ffffff;

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

}

/*=====================================
    DIFERENCIAIS
=====================================*/

.diferenciais{

    padding:50px 0 20px;

    background:#FFF;

}

.diferenciais-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:180px;

    align-items:center;

}

.diferenciais h2{

    color:#0A4D8F;

    font-size:42px;

    margin:20px 0;

}

.diferenciais p{

    line-height:1.9;

    color:#666;

    margin-bottom:35px;

}

.lista-diferenciais{

    list-style:none;

}

.lista-diferenciais li{

    margin-bottom:18px;

    font-size:18px;

    color:#444;

}

.imagem img{

    width:100%;

    border-radius:15px;

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

/*======================================
    NÚMEROS
======================================*/

.numeros{

    background:#0A4D8F;

    padding:90px 0;

    margin:0;

}

.numeros .titulo-secao{

    text-align:center;

    margin-bottom:20px;

}

.numeros .titulo-secao span{

    color:#9CCBFF;

    text-transform:uppercase;

    font-weight:600;

    letter-spacing:2px;

}

.numeros .titulo-secao h2{

    color:#FFF;

    margin-top:15px;

    font-size:40px;

}

.numeros-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.numero-card{

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

    border:1px solid rgba(255,255,255,.15);

    border-radius:15px;

    padding:40px 25px;

    text-align:center;

    transition:.3s;

}

.numero-card:hover{

    transform:translateY(-8px);

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

}

.numero-card h3{

    font-size:48px;

    color:#FFF;

    margin-bottom:15px;

}

.numero-card p{

    color:#EAF4FD;

    line-height:1.7;

}



/*======================================
  BANNER INTERNO
======================================*/

.banner-interno{

    background:linear-gradient(135deg,#0A4D8F,#06376D);

    color:#FFF;

    padding:170px 0 70px;

    text-align:center;

}

.banner-interno .container{

    max-width:900px;

}

.banner-interno h1{

    font-size:46px;

    font-weight:700;

    margin-bottom:20px;

    line-height:1.2;

}

.banner-interno p{

    font-size:20px;

    line-height:1.7;

    opacity:.95;

    max-width:700px;

    margin:0 auto;

}

/*======================================
    HISTÓRIA
======================================*/

.historia{

    padding:30px 0;

    background:#FFF;

}

.historia-grid{

    display:grid;

    grid-template-columns:3fr 1fr;

    gap:70px;

    align-items:center;

}

.mensagem-foto img{

    width:100%;

    border-radius:10px;

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.historia-texto h2{

    color:#0A4D8F;

    font-size:42px;

    margin: 30px 0;

}

.historia-texto p{


    font-size:30px;

    color:#555;

    margin-bottom:20px;

}


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

.missao{

    padding:10px 0;

    background:#F7F9FC;

}

.missao-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:60px;

}

.missao-card{

    background:#FFF;

    padding:45px;

    border-radius:15px;

    text-align:center;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.missao-card:hover{

    transform:translateY(-10px);

}

.icone{

    width:70px;

    height:70px;

    border-radius:16px;

    background:#EAF4FD;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 25px;

    color:#0A4D8F;

    font-size:34px;

}

.missao-card h3{

    color:#0A4D8F;

    margin-bottom:20px;

    font-size:28px;

}

.missao-card p{

    line-height:1.8;

    color:#666;

}

.card-servico:hover .icone{

    background:#0A4D8F;

    color:white;

}
/*======================================
    LINHA DO TEMPO
======================================*/

.linha-tempo{

    padding:100px 0;

    background:#FFF;

}

.timeline{

    position:relative;

    margin-top:70px;

    margin-left:120px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:4px;

    background:#0A4D8F;

}

.timeline-item{

    position:relative;

    display:flex;

    align-items:flex-start;

    margin-bottom:60px;

    padding-left:50px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

/* Bolinha */

.timeline-item::before{

    content:"";

    position:absolute;

    left:-9px;

    top:58px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#0A4D8F;

    border:4px solid #FFF;

    z-index:2;

}

/* Ano */

.timeline-data{

    width:90px;

    margin-right:30px;
    
    margin-top: 50px;

    font-size:26px;

    font-weight:700;

    color:#0A4D8F;

    flex-shrink:0;
    
}

/* Caixa */

.timeline-conteudo{

    flex:1;

    background:#F7F9FC;

    border-radius:12px;

    padding:30px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.timeline-conteudo h3{

    color:#0A4D8F;

    margin-bottom:15px;

}

.timeline-conteudo p{

    color:#666;

    line-height:1.8;

}

/*======================================
    OFICIAL
======================================*/

.oficial{

    padding:100px 0;

    background:#F7F9FC;

}

.oficial-grid{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:70px;

    align-items:center;

}

.oficial-foto{

    text-align:center;

}

.oficial-foto img{

    width:100%;

    max-width:320px;

    border-radius:15px;

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.oficial-texto h3{

    font-size:34px;

    color:#0A4D8F;

    margin-bottom:25px;

}

.oficial-texto p{

    line-height:1.9;

    color:#555;

    margin-bottom:25px;

}   


/*======================================
P�GINA DE SERVIÇOS
======================================*/

.pagina-servicos{

    padding:100px 0;

    background:#F7F9FC;

}

.pesquisa-servico{

    margin-bottom:50px;

}

.pesquisa-servico input{

    width:100%;

    padding:18px;

    border-radius:10px;

    border:1px solid #DDD;

    font-size:16px;

}

.grid-servicos{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

.servico-item{

    background:#FFF;

    padding:35px;

    border-radius:12px;

    transition:.3s;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.servico-item:hover{

    transform:translateY(-8px);

}

.servico-icone{

    width:70px;

    height:70px;

    border-radius:12px;

    background:#EAF4FD;

    color:#0A4D8F;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:25px;

}

.servico-item h3{

    color:#0A4D8F;

    margin-bottom:15px;

}

.servico-item p{

    color:#666;

    line-height:1.8;

    margin-bottom:20px;

}

.servico-item a{

    color:#0A4D8F;

    font-weight:600;

    text-decoration:none;

}

/*======================================
    CONTATO
======================================*/

.contato{

    padding:10px 0;

    background:#F7F9FC;

}

.contato-grid{

    display:grid;

    grid-template-columns:1fr 1.3fr;

    gap:20px;

    align-items:start;

}

.contato-info{

    display: contents ;

    flex-direction: row;

    gap:20px;

}

.contato-card{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:25px;

    background:#FFFFFF;

    border-radius:12px;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

}

.contato-icone{

    min-width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EAF4FD;

    color:#0A4D8F;

    border-radius:10px;

    font-size:22px;

}

.contato-card h3{

    color:#0A4D8F;

    margin-bottom:7px;

}

.contato-card p,
.contato-card a{

    color:#666;

    line-height:1.6;

    text-decoration:none;

}

.contato-card a:hover{

    color:#0A4D8F;

}

.contato-formulario{

    background:#FFFFFF;

    padding:40px;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.contato-formulario h3{

    color:#0A4D8F;

    font-size:25px;

    margin-bottom:30px;

}

.contato-formulario form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contato-formulario button{

    border:none;

    cursor:pointer;

    align-self:flex-start;

}

.contato-mapa{

    padding:0 0 100px;

    background:#F7F9FC;

}

.mapa-grande{

    width:100%;

    height:400px;

    overflow:hidden;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.10);

}

.mapa-grande iframe{

    width:100%;

    height:100%;

    border:0;

}

/*======================================
PORTAL DE SERVIÇOS
======================================*/

.portal-servicos{

    padding:10px 20;

    background:#ffffff;

}

.portal-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}

.portal-card{

    background:#0A4D8F;

    color:#FFF;

    padding:20px 20px;

    border-radius:12px;

    text-align:center;

    text-decoration:none;

    transition:.3s;

    box-shadow:0 8px 20px rgba(0,0,0,.10);

}

.portal-card:hover{

    transform:translateY(-8px);

    background:#06376D;

}

.portal-card i{

    font-size:42px;

    margin-bottom:20px;


}

.portal-card h3{

    font-size:20px;

    font-weight:600;

}

.portal-card p{

    font-size:12px;

    font-weight:400;

    line-height:1.6;
    
    padding: 12px 10px;

}

.portal-buttons{

    display:flex;

    flex-wrap: wrap;

    gap:20px;

    
}

.btn-azul{

    border:2px solid #FFF;

    color:#FFF;

    background-color: #0A4D8F;

    padding:12px 24px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
    

}

.btn-azul:hover{

    background:#ffffff;

    color:#0A4D8F;

    transform:translateY(-3px);

}



/*======================================
    NOTÍCIAS E COMUNICADOS
======================================*/

.noticias{

    padding:10px 0;

    background:#F7F9FC;

}

.noticias-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.noticia-card{

    background:#FFFFFF;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.3s;

}

.noticia-card:hover{

    transform:translateY(-8px);

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

}

.noticia-data{

    background:#0A4D8F;

    color:#FFFFFF;

    padding:15px 25px;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

}

.noticia-conteudo{

    padding:30px;

}

.noticia-categoria{

    display:inline-block;

    color:#0A4D8F;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:12px;

}

.noticia-conteudo h3{

    color:#0A4D8F;

    font-size:21px;

    line-height:1.4;

    margin-bottom:15px;

}

.noticia-conteudo p{

    color:#666;

    line-height:1.7;

    margin-bottom:20px;

}

.noticia-conteudo a{

    color:#0A4D8F;

    text-decoration:none;

    font-weight:600;

}

.noticia-conteudo a:hover{

    color:#06376D;

}

/*======================================
    FAQ
======================================*/

.faq{

    padding:30px 0;

    background:#FFFFFF;

}

.faq-list{

    max-width:900px;

    margin:0 auto;

}

.faq-item{

    border-bottom:1px solid #DDD;

}

.faq-pergunta{

    width:100%;

    padding:25px 10px;

    border:0;

    background:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-align:left;

    cursor:pointer;

    font-family:inherit;

    font-size:17px;

    font-weight:600;

    color:#0A4D8F;

}

.faq-icone{

    font-size:28px;

    font-weight:400;

    transition:.3s;

}

.faq-resposta{

    max-height:0;

    overflow:hidden;

    transition:max-height .3s ease;

}

.faq-resposta p{

    padding:0 10px 25px;

    color:#666;

    line-height:1.8;

}

.faq-item.ativo .faq-icone{

    transform:rotate(45deg);

}

/*======================================
    CONSULTA
======================================*/

.consulta{

    padding:100px 0;

    background:#F7F9FC;

    min-height:500px;

}

.consulta-box{

    max-width:700px;

    margin:0 auto;

    background:#FFFFFF;

    padding:45px;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.consulta-box form{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.campo{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.campo label{

    font-weight:600;

    color:#333;

}

.campo input{

    width:100%;

    padding:16px;

    border:1px solid #DDD;

    border-radius:8px;

    font-family:inherit;

    font-size:15px;

    outline:none;

}

.campo input:focus{

    border-color:#0A4D8F;

    box-shadow:0 0 0 3px rgba(10,77,143,.10);

}

.consulta-box button{

    border:none;

    cursor:pointer;

    align-self:flex-start;

}

/*======================================
    SOLICITAÇÃO DE CERTIDÃO
======================================*/

.certidao{

    padding:100px 0;

    background:#F7F9FC;

}

.certidao-box{

    max-width:900px;

    margin:0 auto;

    background:#FFFFFF;

    padding:45px;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.certidao-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

    margin-bottom:30px;

}

.campo-completo{

    grid-column:1 / -1;

}

.campo select,
.campo textarea{

    width:100%;

    padding:16px;

    border:1px solid #DDD;

    border-radius:8px;

    font-family:inherit;

    font-size:15px;

    background:#FFFFFF;

    outline:none;

}

.campo select:focus,
.campo textarea:focus{

    border-color:#0A4D8F;

    box-shadow:0 0 0 3px rgba(10,77,143,.10);

}

.campo textarea{

    resize:vertical;

}

.certidao-box button{

    border:none;

    cursor:pointer;

}

/*======================================
    CUSTAS E EMOLUMENTOS
======================================*/

.custas{

    padding:100px 0;

    background:#F7F9FC;

}

.custas-box{

    background:#FFFFFF;

    padding:40px;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.custas-aviso{

    display:flex;

    align-items:center;

    gap:15px;

    padding:20px;

    margin-bottom:30px;

    background:#EAF4FD;

    border-radius:8px;

    color:#0A4D8F;

}

.custas-aviso i{

    font-size:25px;

}

.custas-aviso p{

    margin:0;

}

.tabela-responsiva{

    width:100%;

    overflow-x:auto;

}

.tabela-custas{

    width:100%;

    border-collapse:collapse;

}

.tabela-custas th{

    background:#0A4D8F;

    color:#FFFFFF;

    padding:18px;

    text-align:left;

}

.tabela-custas td{

    padding:18px;

    border-bottom:1px solid #E5E5E5;

    color:#555;

}

.tabela-custas tr:hover td{

    background:#F7F9FC;

}

.custas-rodape{

    margin-top:35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.custas-rodape p{

    color:#666;

    margin:0;

}
.whatsapp-flutuante {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    transition: 0.3s;
}

.whatsapp-flutuante:hover {
    background-color: #20ba5a;
    color: #fff;
    transform: scale(1.1);
}



/* ========================================
   RESULTADO DA CONSULTA
======================================== */


/* ==============================
   AREA PRINCIPAL
============================== */

.resultado-consulta{
    padding:0px 0;
}


/* ==============================
   DADOS DO PROTOCOLO
============================== */

/*
.resultado-box{

    display:grid;

    grid-template-columns: 1fr 1fr;

    gap:1px;

    background:#E2E8F0;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    margin-bottom:10px;

    max-width:1000px;

    margin-left:auto;
    margin-right:auto;

}


.resultado-item{

    background:#FFFFFF;

    padding:12px 15px;

    display:flex;

    flex-direction:column;

    gap:7px;

}


.resultado-item span{

    font-size:13px;

    font-weight:600;

    color:#6B7280;

    text-transform:uppercase;

    letter-spacing:.4px;

}


.resultado-item strong{

    font-size:17px;

    color:#333;

    font-weight:600;

    word-break:break-word;

}


.resultado-item-full{

    grid-column:1 / -1;

}


/* ==============================
   TÍTULOS INTERNOS
============================== */

.resultado-titulo{

    margin-top:20px;

    margin-bottom:30px;

}

/* ==============================
   ANDAMENTOS
============================== */

.andamentos-box{

    position:relative;

    margin-bottom:40px;

    padding-left:0;

}


/* LINHA VERTICAL DA TIMELINE */

.andamentos-box::before{

    content:"";

    position:absolute;

    left:168px;

    top:0;

    bottom:0;

    width:3px;

    background:#C9DCF3;

}


/* CADA ANDAMENTO */

.andamento-item{

    position:relative;

    display:grid;

    grid-template-columns:140px 1fr;

    gap:100px;

    padding:0 0 28px;

}


/* CÎRCULO DA TIMELINE */

.andamento-item::before{

    content:"\2714";

    position:absolute;

    left:140px;

    top:25px;

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFFFFF;

    color:#0A4D8F;

    border:7px solid #FFFFFF;

    border-radius:50%;

    box-shadow:0 0 0 3px #EAF4FD;

    font-size:25px;

    font-weight:700;

    z-index:2;

}


/* DATA */

.andamento-data{

    font-size:16px;

    font-weight:500;

    color:#111827;

    padding-top:53px;

    text-align:left;

}


.andamento-dia{

    display:inline-block;

    white-space:nowrap;

}


/* CARTÃO DO ANDAMENTO */

.andamento-conteudo{

    position:relative;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:10px;

    padding:19px 10px;

    box-shadow:0 5px 18px rgba(0,0,0,.07);

    display:flex;

    align-items:flex-start;

    gap:15px;

    min-width:0;

}


/* REMOVE O ÎCONE QUE ESTAVA DENTRO DO CARTÃO */

.andamento-icone{

    display:none;

}


/* TEXTO */

.andamento-texto{

    flex:1;

    min-width:0;

}


.andamento-conteudo h3{

    margin:0 0 8px;

    font-size:25px;

    line-height:1.3;

    color:#111827;

    font-weight:700;

}


.andamento-conteudo p{

    margin:0;

    font-size:18px;

    line-height:1.6;

    color:#596579;

}


/* ==============================
   LINKS DOS ANDAMENTOS
============================== */

.andamento-links{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:15px;

}


.andamento-links a{

    display:inline-block;

    padding:8px 14px;

    border-radius:6px;

    background:#EAF4FD;

    color:#0A4D8F;

    font-size:13px;

    font-weight:600;

    text-decoration:none;

    transition:.2s;

}


.andamento-links a:hover{

    background:#0A4D8F;

    color:#FFFFFF;

}

/* ==============================
   LINKS DOS ANDAMENTOS
============================== */

.andamento-links{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:15px;

}


.andamento-links a{

    display:inline-block;

    padding:8px 14px;

    border-radius:6px;

    background:#EAF4FD;

    color:#0A4D8F;

    font-size:13px;

    font-weight:600;

    text-decoration:none;

    transition:.2s;

}


.andamento-links a:hover{

    background:#0A4D8F;

    color:#FFFFFF;

}


/* ==============================
   RESULTADO VAZIO
============================== */

.resultado-vazio{

    padding:30px;

    text-align:center;

    background:#F5F7FA;

    border-radius:10px;

    color:#666;

}


/* ==============================
   PAGAMENTOS
============================== */

.pagamentos-grid{

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:25px;

    margin-bottom:60px;

}


.resultado-duas-colunas{

    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:25px;

    align-items:start;

    margin-bottom:60px;

}

.resultado-coluna{

    min-width:0;

}

.pagamento-card{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:15px;

    padding:30px;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

}


.pagamento-card h3{

    margin:0 0 20px;

    color:#0A4D8F;

    font-size:20px;

}


.pagamento-card p{

    color:#555;

    line-height:1.6;

    margin-bottom:12px;

}


.pagamento-card strong{

    color:#333;

}


.pagamento-card input{

    width:100%;

    padding:12px;

    border:1px solid #D9DDE3;

    border-radius:7px;

    margin-bottom:15px;

    font-size:13px;

    box-sizing:border-box;

}


.pagamento-card textarea{

    width:100%;

    min-height:100px;

    resize:none;

    padding:12px;

    border:1px solid #D9DDE3;

    border-radius:7px;

    font-size:13px;

    box-sizing:border-box;

    margin-bottom:15px;

}


/* ==============================
   QR CODE PIX
============================== */

.pix-qrcode{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:20px 0;

}


.pix-qrcode img{

    width:auto;

    height:auto;

    max-width:100%;

    object-fit:contain;

    display:block;

}


/* ==============================
   BOTÃO NOVA CONSULTA
============================== */

.resultado-acoes{

    display:flex;

    justify-content:center;

    margin-top:30px;

}


.resultado-acoes .btn{

    text-decoration:none;

}


/* ========================================
   RESULTADO - TABLET
======================================== */

@media (max-width:1000px){

    .resultado-box{

        grid-template-columns:1fr 1fr;

    }


    .pagamentos-grid{

        grid-template-columns:1fr 1fr;

    }

    .resultado-duas-colunas{

        grid-template-columns:1fr 1fr;

    }

}


/* ========================================
   RESULTADO - CELULAR
======================================== */

@media (max-width:700px){

    .resultado-consulta{

        padding:60px 0;

    }


    /* ==============================
       DADOS DO PROTOCOLO
    ============================== */

    .resultado-box{

        grid-template-columns:1fr;

        margin-bottom:50px;

    }


    .resultado-item-full{

        grid-column:auto;

    }


    .resultado-item{

        padding:20px;

    }


    .resultado-item strong{

        font-size:16px;

    }


    /* ==============================
       ANDAMENTOS
    ============================== */

    .andamentos-box{

        padding-left:25px;

    }


    .andamentos-box::before{

        left:7px;

    }


    .andamento-item{

        display:block;

        padding-bottom:30px;

    }


    .andamento-item::before{

        left:-25px;

    }


    .andamento-data{

        margin-bottom:10px;

        font-size:13px;

    }


    .andamento-conteudo{

        padding:18px;

    }


    /* ==============================
       PAGAMENTOS
    ============================== */

    .pagamentos-grid{

        grid-template-columns:1fr;

        gap:20px;

    }


    .resultado-duas-colunas{

        grid-template-columns:1fr;

        gap:20px;

    }

    .pagamento-card{

        padding:22px;

    }


    /* ==============================
       PIX
    ============================== */

    .pix-qrcode img{

        width:auto;

        height:auto;

    }


    /* ==============================
       BOT�O
    ============================== */

    .resultado-acoes{

        width:100%;

    }


    .resultado-acoes .btn{

        width:100%;

        text-align:center;

        box-sizing:border-box;

    }

}


/* ========================================
   RESULTADO DA CONSULTA
======================================== */


/* ==============================
   STATUS DO PROTOCOLO
============================== */

.status-protocolo{

    display:inline-flex;

    align-items:center;

    width:max-content;

    max-width:100%;

    padding:6px 12px;

    border-radius:20px;

    background:#EAF4FD;

    color:#0A4D8F !important;

    font-size:14px !important;

}


/* ==============================
   ANDAMENTOS
============================== */

.andamento-conteudo{

    display:flex;

    align-items:flex-start;

    gap:15px;

}


.andamento-icone{

    width:38px;

    height:38px;

    min-width:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EAF4FD;

    color:#0A4D8F;

}

.andamento-icone-data{

    width:38px;

    height:68px;

    min-width:68px;
    
    margin-top: -30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EAF4FD;

    color:#0A4D8F;

}


.andamento-texto{

    flex:1;

    min-width:0;

    margin: 10px;

}

.andamento-collapse-botao{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:12px;

    padding:0;

    border:0;

    background:transparent;

    cursor:pointer;

    color:#0A4D8F;

    font-weight:600;

}

.andamento-collapse-botao::before{

    content:"+";

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#EAF4FD;

    color:#0A4D8F;

    font-size:14px;

    line-height:1;

}

.andamento-collapse-botao[aria-expanded="true"]::before{

    content:"−";

}

.andamento-collapse-conteudo{

    margin-top:10px;

    color:#4B5563;

    line-height:1.6;

}


.andamento-dia{

    display:inline-block;

    white-space:nowrap;

}


/* ==============================
   PAGAMENTOS
============================== */

.pagamento-cabecalho{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    margin-bottom:20px;

}


.pagamento-label{

    display:block;

    margin-bottom:5px;

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    color:#6B7280;

}


.pagamento-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

    white-space:nowrap;

}


.pagamento-status.pago{

    background:#E8F7EE;

    color:#18864B;

}


.pagamento-status.pendente{

    background:#FFF5D6;

    color:#9A6B00;

}


.pagamento-status.vencido{

    background:#FDECEC;

    color:#C0392B;

}


.pagamento-valor{

    font-size:28px;

    font-weight:700;

    color:#0A4D8F;

    margin-bottom:8px;

    text-align:left;

}

.pagamento-vencimento{

    margin-bottom:18px;

    text-align:left;

}

.pagamento-vencimento p{

    margin:0;

}


/* ==============================
   PIX
============================== */

.pix-card{

    text-align:left;

}


.pix-qrcode{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:15px 0 25px;

}


.pix-qrcode img{

    width:auto;

    height:auto;

    max-width:100%;

    object-fit:contain;

    display:block;

}


.pix-copia{

    margin-top:15px;

}


.pix-copia label,
.boleto-linha label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:600;

    color:#555;

}


.pix-copia-grupo{

    display:flex;

    align-items:stretch;

    gap:8px;

}


.pix-copia textarea{

    flex:1;

    width:100%;

    min-height:85px;

    resize:none;

    padding:12px;

    border:1px solid #D9DDE3;

    border-radius:8px;

    background:#F8FAFC;

    color:#555;

    font-size:12px;

    line-height:1.5;

    box-sizing:border-box;

}


.btn-copiar-pix{

    border:none;

    border-radius:8px;

    padding:0 16px;

    background:#0A4D8F;

    color:#FFFFFF;

    font-weight:600;

    cursor:pointer;

    white-space:nowrap;

    transition:.2s;

}


.btn-copiar-pix:hover{

    background:#06376D;

}


/* ==============================
   BOLETO
============================== */

.boleto-linha{

    margin:20px 0;

}


.boleto-linha input{

    margin-bottom:0;

}


/* ==============================
   DOCUMENTOS
============================== */

.documentos-pos-registro{

    margin-bottom:60px;

}

.documentos-card{

    min-height:100%;

}

.documentos-card .table-responsive{

    overflow-x:auto;

}

.documentos-tabela{

    width:100%;

    margin-bottom:0;

    border-collapse:separate;

    border-spacing:0 14px;

}

.documentos-tabela tbody tr{

    background:transparent;

}

.documentos-tabela th,
.documentos-tabela td{

    padding:18px 22px;

    vertical-align:middle;

    background:#F8FAFC;

    border-top:1px solid #E5E7EB;

    border-bottom:1px solid #E5E7EB;

}

.documentos-registro{

    width:42%;

    border-left:1px solid #E5E7EB;

    border-radius:14px 0 0 14px;

    color:#0F172A;

    font-size:15px;

    font-weight:700;

    letter-spacing:.2px;

    white-space:nowrap;

}

.documentos-tabela td{

    border-right:1px solid #E5E7EB;

    border-radius:0 14px 14px 0;

    text-align:right;

}

.documentos-tabela td a,
.documentos-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:12px 18px;

    border:1px solid #C9DCF3;

    border-radius:10px;

    background:linear-gradient(180deg, #FFFFFF 0%, #F2F7FC 100%);

    color:#0A4D8F;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;

}

.documentos-tabela td a i,
.documentos-link i{

    font-size:16px;

}

.documentos-tabela td a:hover,
.documentos-link:hover{

    background:#0A4D8F;

    color:#FFFFFF;

    box-shadow:0 10px 22px rgba(10, 77, 143, .18);

    transform:translateY(-2px);

}


/* ==============================
   �CONE DO RESULTADO VAZIO
============================== */

.resultado-vazio i{

    display:block;

    margin-bottom:12px;

    font-size:28px;

    color:#0A4D8F;

}


.resultado-vazio p{

    margin:0;

}


/* ==============================
   AÇÕES
============================== */

.resultado-acoes{

    margin-top:40px;

    padding-top:30px;

    border-top:1px solid #E5E7EB;

}


/* ========================================
   RESULTADO - CELULAR
======================================== */

@media (max-width:700px){

    .resultado-consulta{

        padding:50px 0;

    }


    .resultado-box{

        grid-template-columns:1fr;

    }


    .resultado-item-full{

        grid-column:auto;

    }


    .andamento-conteudo{

        gap:10px;

    }


    .andamento-icone{

        width:34px;

        height:34px;

        min-width:34px;

        font-size:13px;

    }


    .pagamento-cabecalho{

        flex-direction:column;

        gap:10px;

    }


    .pagamento-status{

        align-self:flex-start;

    }


    .pix-copia-grupo{

        flex-direction:column;

    }


    .pix-copia textarea{

        min-height:110px;

    }


    .btn-copiar-pix{

        width:100%;

        min-height:45px;

    }


    .documentos-tabela{

        border-spacing:0 12px;

    }


    .documentos-tabela th,
    .documentos-tabela td{

        display:block;

        width:100%;

        padding:16px 18px;

    }


    .documentos-registro{

        border-right:1px solid #E5E7EB;

        border-radius:14px 14px 0 0;

        white-space:normal;

    }


    .documentos-tabela td{

        border-left:1px solid #E5E7EB;

        border-radius:0 0 14px 14px;

        text-align:left;

    }


    .documentos-tabela td a,
    .documentos-link{

        width:100%;

    }


    .pix-qrcode img{

        width:auto;

        height:auto;

    }


    .pagamento-valor{

        font-size:24px;

    }


    .resultado-acoes .btn{

        width:100%;

        text-align:center;

        box-sizing:border-box;

    }

}