@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', 'Inter', Arial, Helvetica, sans-serif;
}

html {
    scroll-behavior: smooth;
}

:root {
    --principal: #006bc8;
    --secundaria: #2A8BAF;
    --terciaria: #131a29;
    --quartiaria: #3d444d;
    --quintana: #2f95ed;
    --grifo: #142330;
    --bordas: #dbdbdb;
    --texto: #002241;
    --textow: #FFFFFF;
    --texto2: #707070;
    --descricao: #111111;
    --fundo: #f7f7f7;
    --rodape: #eeeeee;
}

::selection {
    background-color: var(--principal);
    color: #FFFFFF;
}

a {
    text-decoration: none;
    color: var(--principal);
}

a, p{
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 13pt;
    line-height: 1.45;
}

.sessao a b, .sessao p b {
    color: var(--principal);
}

.sessao h2 b {
    color: var(--principal);
    font-weight: 600;
}

.sessao p span {
        color: var(--principal);
}

a, p, h1, h2, h3, h4, h5, h6 {
    color: var(--texto);
}

h2 {
    font-weight: 600;
}

input, select, textarea, option {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 11.5pt;
}

label {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 11pt;
    margin-bottom: 5px;
    display: block;
    color: var(--texto);
}

input[type=submit] {
    cursor: pointer;
}

fieldset {
    border: none;
}

textarea {
    resize: none;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

input:active, input:focus, select:active, select:focus, textarea:active, textarea:focus {
    outline: 1px solid var(--principal);
    border: 1px solid var(--principal);
}

header {
    width: 100%;
    height: 100px;
    background: var(--fundo);
    user-select: none;
}

.container {
    width: 100%;
    max-width: 1150px;
    height: auto;
    overflow: hidden;
    margin: auto;
}

.logotipo {
    width: auto;
    height: 40px;
    margin: 31px 50px 31px 0;
    float: left;
}

.logotipo-menu {
    width: auto;
    height: 30px;
    margin: 30px 40px;
    float: left;
}

header nav {
    float: left;
    width: 100%;
    height: auto;
}

header .menu {
    list-style: none;
    float: left;
    position: relative;
}

header .menu li {
    float: left;
    margin-right: 40px;
}

header .menu li a, header .menu li button {
    font-size: 11.5pt;
    font-weight: 500;
    color: var(--terciaria);
    line-height: 105px;
    transition: color ease 0.15s;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    letter-spacing: -0.3px;
}

header .menu li a:hover {
    opacity: 0.9;
}

header .menu-mobile {
    display: block;
    position: fixed;
    z-index: 5;
    background-color: #FFFFFF;
    width: 100%;
    max-width: 500px;
    height: 100vh;
    list-style: none;
    right: -110%;
    top: 0;
    box-shadow: 0px 0 10px #0000001a;
    transition: ease right 0.3s;
}

.blur {
    position: fixed;
    z-index: 4;
    background-color: #0000002d;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    display: none;
    opacity: 0;
    transition: ease opacity 0.2s;
}

.exibir-blur {
    display: block;
}

.transicao-blur {
    opacity: 1;
}

header .menu-mobile li {
    padding: 12px 40px;
}

header .menu-mobile li a {
    font-weight: 500;
    color: var(--terciaria);
}

header .menu-mobile .central {
    width: 100%;
    height: auto;
    overflow: hidden;
}

header .menu-mobile .fechar-mobile {
    float: right;
    padding: 30px 40px;
}

.botoes-mobile {
    margin-top: 40px;
}

.exibir-mobile {
    right: 0!important;
}

.botoes-mobile .bt-primario {
    text-align: center;
    width: 100%;
    color: #FFF;
}

.botoes-mobile .bt-secundario {
    text-align: center;
    width: 100%;
    border: 1px solid var(--principal);
    color: var(--principal);
    border-radius: 100px;
}

header .menu-mobile .botoes-mobile li {
    padding: 8px 40px;
}

header .botoes {
    float: right;
    list-style: none;
}

header .botoes li {
    float: right;
    margin-right: 10px;
}

.bt-primario {
    display: block;
    width: fit-content;
    height: 45px;
    overflow: hidden;
    padding: 12px 25px;
    background: linear-gradient(135deg, var(--principal) 0%, var(--quintana) 100%);
    border: 1px solid var(--principal);
    color: var(--textow);
    font-size: 11.5pt;
    font-weight: 500;
    border-radius: 100px;
    transition: opacity ease 0.15s;
    user-select: none;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    letter-spacing: -0.3px;
}

.bt-primario:hover {
    opacity: 0.9;
    box-shadow: 0px 5px 10px #0000001a;
}

.bt-secundario {    
    display: block;
    width: fit-content;
    height: 45px;
    overflow: hidden;
    padding: 12px 25px;
    background: transparent;
    color: var(--principal);
    font-size: 11.5pt;
    font-weight: 500;
    transition: opacity ease 0.15s;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    letter-spacing: -0.3px;
}

.bt-secundario:hover {
    opacity: 0.9;
}

.bt-margin {
    margin: 30px 0;
}

.bt-margin-top {
    margin-top: 20px;
}


.bt-margin-right {
    margin-right: 5px;
}

.bt-left {
    float: left;
}

.bt-right {
    float: right;
}

.bt-pequeno {
    padding: 7px 15px;
    font-size: 10pt;
    height: 36px;
}

.whatsapp {
    float: left;
    margin: 0 5px 0 0;
}

.esquerda {
    float: left;
    width: 50%;
    height: auto;
    overflow: hidden;
}

.direita {
    float: right;
    width: 50%;
    height: auto;
    overflow: hidden;
}

.bt-whatsapp {
    padding: 13px;
    width: 56px;
    height: 56px;
    border-radius: 100%;
    background-color: #34af23;
    position: fixed;
    z-index: 1;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.bt-whatsapp:hover {
    background-color: #298b1c;
}

.bt-whatsapp svg {
    fill: #FFFFFF;
    width: 30px;
    height: 30px;
}

.sessao {
    margin: 50px 0;
    padding: 45px 0;
}

.cinza {
    background-color: var(--fundo);
}

.sm {
    margin: 0;
}

.entradas {
    width: 100%;
    height: auto;
    overflow: hidden;
    border: 1px solid var(--bordas);
    padding: 12px 15px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.observacao {
    font-size: 10pt;
    color: var(--texto2);
}

.final {
    margin-bottom: 0;
}

footer {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: var(--rodape);
    padding: 25px 0;
}

footer .links a, footer p { 
    color: var(--texto);
    font-size: 9.5pt;
    transition: color 0.15s ease;
}

footer .copyright {
    float: left;
    margin-right: 40px;
}

/* Estilos para o botão 'saiba mais' no bloco de recursos */
.recurso-item.recurso-saibamais {
    background: linear-gradient(135deg, var(--principal) 0%, var(--quintana) 100%);
    color: var(--textow);
    border: none;
    padding: 22px 18px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.recurso-item.recurso-saibamais .recurso-icone {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    transition: all 0.2s ease;
}

.recurso-item.recurso-saibamais .recurso-icone svg {
    stroke: #fff;
    fill: none;
    width: 28px;
    height: 28px;
}

.recurso-item.recurso-saibamais h4 {
    color: #ffffff;
    margin-top: 10px;
    font-weight: 600;
}

.recurso-item.recurso-saibamais:hover {
    opacity: 0.9;
    outline: none;
}

/* Estilos para tarja azul de reforma tributária */
.tarja-azul {
    background: linear-gradient(135deg, var(--principal) 0%, var(--quintana) 100%);
    padding: 40px 0;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.tarja-azul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.08) 2px, transparent 2px);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    pointer-events: none;
}

.tarja-azul .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.tarja-esquerda {
    flex: 1;
    padding-right: 40px;
}

.tarja-esquerda h3 {
    color: rgba(255,255,255,0.85);
    font-size: 11pt;
    font-weight: 600;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.tarja-esquerda p {
    color: #ffffff;
    font-size: 13pt;
    line-height: 1.5;
    margin-bottom: 0;
}

.tarja-direita {
    flex-shrink: 0;
}

.tarja-direita .bt-primario {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: #ffffff;
    padding: 12px 28px;
    font-size: 11.5pt;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tarja-direita .bt-primario:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.6);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Responsividade para tarja-azul */
@media screen and (max-width: 900px) {
    .tarja-azul .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .tarja-esquerda {
        padding-right: 0;
    }

    .tarja-esquerda p {
        font-size: 12pt;
    }

    .tarja-direita {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }

    .tarja-direita .bt-primario {
        width: auto;
    }
}

@media screen and (max-width: 520px) {
    .tarja-azul {
        padding: 24px 0;
    }

    .tarja-esquerda h3 {
        font-size: 9pt;
    }

    .tarja-esquerda p {
        font-size: 11pt;
    }

    .tarja-direita {
        justify-content: stretch;
    }

    .tarja-direita .bt-primario {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 25px;
        font-size: 11pt;
    }

    .tarja-azul::before {
        background-size: 40px 40px;
    }
}

footer .links {
    list-style: none;
    float: left;
}

footer ul li {
    float: left;
    margin-right: 40px;
    line-height: 0;
}

.rodape-esquerda {
    width: fit-content;
    height: auto;
    overflow: hidden;
    float: left;
}

.rodape-direita {
    width: fit-content;
    height: auto;
    overflow: hidden;
    float: right;
}

footer .social {
    list-style: none;
    float: left;
}

footer .social li {
    margin-right: 20px;
}

.social svg {
    fill: #555555;
    width: 18px;
    height: 18px;
    transition: fill 0.15s ease;
}

.topo {
    float: right;
    margin-left: 15px;
    transition: color 0.15s ease;
}

.cookies {
    position: fixed;
    z-index: 2;
    left: 20px;
    bottom: 20px;
    width: 100%;
    max-width: 450px;
    height: auto;
    overflow: hidden;
    background-color: #1b202d;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px #00000031;
    display: none;

}

.cookies .bt-pequeno {
    font-size: 9pt;
}

.cookies p, .cookies a {
    font-size: 10pt;
}

.cookies a {
    color: var(--quintana);
}

.cookies p {
    color: #f0f0f0;
}

.mostrar {
    display: block;
}

.esconder {
    display: none;
}

.loader {
    width: 100%;
    height: 100vh;
    display: block;
    position: fixed;
    z-index: 9999;
    background-color: #FFF;
}

.logotipo-mobile {
    display: none;
}

.hamburger {
    float: right;
    display: none;
}

.exibir {
    display: block;
}

.atalhos {
    width: auto;
    height: auto;
    overflow: hidden;
    background: linear-gradient(135deg, var(--principal) 0%, var(--quintana) 100%);
}

.atalhos p, .atalhos a {
    font-size: 11pt;
    color: #FFFFFF;
    padding: 20px 0;
}

.titulo-pagina {
    margin-bottom: 80px;
}

.descritivo2 {
    text-align: center;
    font-size: 22pt;
    max-width: 800px;
    display: block;
    margin: auto;
    font-weight: 600;
    color: var(--terciaria);
    letter-spacing: -0.5px;
}

.descritivo3 {
    text-align: center;
    font-size: 22pt;
    max-width: 800px;
    display: block;
    margin: auto;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--principal) 0%, var(--quintana) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.bt-centro {
    margin: 30px auto;
}

.inteiro {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-top: 80px;
}

.titulo-pagina h1 {
    font-size: 31pt;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 25px;
}

.titulo-pagina h1 b {
    background: linear-gradient(135deg, var(--principal) 0%, var(--quintana) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.titulo-pagina p {
    font-size: 13pt;
}

.suporte-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.card-suporte {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--bordas);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.card-suporte .icone {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.card-suporte .icone svg {
  width: 48px;
  height: 48px;
  fill: var(--principal);
}

.card-suporte h3 {
  font-size: 18px;
  margin-bottom: 20px;
  color: #333;
}

.card-suporte a {
  background: var(--principal);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity ease 0.15s;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.card-suporte a:hover {
  opacity: 0.9;
}


@media screen and (max-width: 1240px) {
    .container {
        width: calc(100% - 60px);
        margin: 0 30px;
    }

    .titulo-pagina {
        margin-bottom: 60px;
    }
}

@media screen and (max-width: 1150px) {
    header .bt-secundario {
        display: none;
    }
}

@media screen and (max-width: 1070px) {
    header .menu li {
        margin-right: 30px;
    }
}

@media screen and (max-width: 1050px) {
    #inicio .esquerda {
        width: 100%;
    }

    #inicio .direita {
        display: none;
    }

    #inicio-pagina .esquerda {
        width: 100%;
    }

    #inicio-pagina .direita, #inicio-pagina .direita img {
        width: 100%;
    }

    .menu, .botoes {
        display: none;
    }

    .logotipo {
        margin: 25px 0 25px 0;
    }

    .inicio {
        margin-top: 30px;
    }

    .servico img {
        width: 90%;
        height: 125px;
    }

    .projeto-esquerda {
        display: none;
    }

    .projeto-direita {
        width: 100%;
    }

    .missao-esquerda {
        width: 100%;
        padding-left: 0;
    }

    .missao-direita {
        width: 100%;
        display: none;
    }

    .hamburger {
        display: block;
    }

    #projetos {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    header .bt-secundario {
        display: block;
    }
}

@media screen and (max-width: 900px) {
    .inicio h1, .titulo-pagina h1 {
        font-size: 24pt;
    }

    .inicio p, .titulo-pagina p {
        font-size: 11pt;
    }

    p, a {
        font-size: 11pt;
    }

    .bt-primario, .bt-secundario {
        font-size: 10pt;
    }

    .marcas h3 {
        font-size: 14pt;
    }

    .img-marca {
        width: 50px;
    }

    .marca-esquerda {
        width: 30%;
    }

    .marca-direita {
        width: 65%;
    }

    .servico img {
        height: 110px;
    }

    .funcionamento img {
        width: 140px;
    }

    .inteira h1 {
        font-size: 24pt;
    }

    .funcionamento h2 {
        font-size: 16pt;
    }

    .funcionamento p {
        font-size: 10pt;
    }

    .funcionamento {
        padding: 15px;
    }

    .inies {
        padding-right: 0;
    }

    .descritivo2 {
        font-size: 18pt;
    }

   .suporte-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 800px) {
    .funcionamento {
        margin: 0;
    }

    .f1 {
        width: 50%;
        margin-right: 15px;
    }

    .f2 {
        width: calc(50% - 15px);
        margin: 0;
    }

    .f3 {
        width: 100%;
        margin-top: 15px;
    }

    .servico {
        width: 50%;
    }

    .servico img {
        height: 140px;
    }

    .servico h4 {
        margin-top: 5px;
        margin-bottom: 25px;
    }
     
    .marca-esquerda {
        width: 100%;
    }

    .marca-direita {
        width: 100%;
        margin-top: 60px;
    }

    .rodape-esquerda, .rodape-direita {
        width: 100%;
    }

    footer .copyright {
        width: 100%;
        text-align: center;
    }

    .metade {
        margin-bottom: 25px!important;
    }

    footer .links {
        float: none;
        margin: 0 auto;
        display: table;
    }

    footer .links li {
        margin: 0 0 0 5px;
    }

    footer .links li::after {
        content: "•";
        margin-left: 5px;
    }

    footer .links li:last-child::after {
        content: "";
    }

    footer .social li {
        margin: 20px 10px 0 10px;
    }

    .topo {
        display: none;
    }

    footer .social {
        float: none;
        display: table;
        margin: auto;
    }
}

@media screen and (max-width: 650px) {
    .f1, .f2, .f3 {
        width: 100%;
        margin: 0;
        margin-bottom: 35px;
    }

    .recurso {
        width: 100%;
        margin: 0;
        margin-bottom: 30px;
    }

    .servico h4 {
        font-size: 8.5pt;
    }

    .faq-pergunta span {
        font-size: 10pt;
    }

    .atalhos p, .atalhos a {
        padding: 15px 0;
    }

    .suporte-grid {
    grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 520px) {
    .servico img {
        height: 105px;
    }

    .pini {
        font-size: 11pt;
    }

    .container {
        width: calc(100% - 40px);
        margin: 0 20px;
    }

    .sessao {
        margin: 30px 0;
    }

    .final {
        margin-bottom: 0;
    }

    input, select, textarea, option {
        font-size: 10.5pt;
    }

    .bt-primario, .bt-secundario {
        width: 100%;
        text-align: center;
    }

    #inicio .bt-primario, #inicio .bt-secundario {
        text-align: center;
    }

    .cookies {
        width: 100%;
        max-width: none;
        bottom: 0;
        left: 0;
        border-radius: 0;
    }

    .cookies button {
        width: 100%;
    }

    .titulo-pagina {
        margin-bottom: 40px;
    }

    .descritivo3 {
        font-size: 19pt;
        line-height: 1.3;
    }
}

@media screen and (max-width: 460px) {
    .servico img {
        height: 95px;
    }

    .img-marca {
        width: 38px;
    }

    .linha {
        margin-bottom: 25px;
    }

    .servico h4 {
        margin-bottom: 45px;
    }

    header .menu-mobile li {
        padding: 12px 20px;
    }

    header .menu-mobile .botoes-mobile li {
        padding: 8px 20px;
    }

    .logotipo-menu {
        margin: 25px 20px;
    }

    header .menu-mobile .fechar-mobile {
        padding: 25px 20px;
    }
}

@media screen and (max-width: 400px) {
    .img-marca {
        width: 30px;
    }

    .inteira h1 {
        font-size: 19pt;
    }

    .inteira h3 {
        font-size: 9pt;
    }

    .sessao {
        margin: 0;
    }

    .inicio h1, .titulo-pagina h1 {
        font-size: 21pt;
    }
}

@media screen and (max-width: 350px) {
    .servico img {
        height: 75px;
    }

    .inicio h1, .titulo-pagina h1 {
        font-size: 19pt;
    }

    .marcas h3 {
        font-size: 12pt;
    }

    p, a, .inicio a, .inicio p, .recurso p, .pini, .titulo-pagina p {
        font-size: 10pt;
    }

    .inteira h1 {
        font-size: 18pt!important;
    }
}