html {
    scroll-behavior: smooth;
}

/* Prevents layout shifts */
body {
    overflow-x: hidden;
}

/* Suaviza transições */
* {
    box-sizing: border-box;
}

/* Melhora a renderização */
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.section-main-clt{
    position: relative;
    width: 100%;
    /* height: 590px; */
    color: #fff;    
    background: url(../img/clt/background-main.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding-top: 50px;

}

.float.bar{
    background-color: #0044bb !important;
}

.float.bar .menu .btn{
    color: #fff !important;
    font-size: 16px !important;
}

.main-clt{
    display: flex;
}

.section-main-clt-text{
    display: flex;
    width: 50%;
    color: black;
    justify-content: center;
    align-items: baseline;
    flex-direction: column;
}

.section-main-clt-text h1{
    color: #0063ff;
    font-weight: 500;
    line-height: 70px;
    font-size: 63px;
    letter-spacing: -1px;
}

.section-main-clt-text p{
    color: #001130;
    font-size: 29px;
    FONT-WEIGHT: 300;
    PADDING: 13px 0px 25px 0px;
}

.section-main-clt-img{
    display: flex;
    width: 50%;
    color: black;
}

.clt-img{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
 
.clt-img img{
    display: flex;
}

.navbar {
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(150deg, #00389a, #004bcf);
  z-index: 1000; /* Fica acima do conteúdo */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0; /* Espaçamento interno */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra opcional */
}

.logo {
  color: #fff; /* Texto branco para contraste */
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}
/* Se for imagem, ajuste a altura máxima */
.logo img {
  height: 40px; /* Exemplo */
  width: auto;
}
.botao-clt {
  position: relative;
  padding: 13px 84px;
  font-size: 1.35rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(145deg, #0063ff, #0047b3);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 99, 255, 0.3);
  transition: all 0.3s ease;
  z-index: 1;
  animation: pulse 2s infinite ease-in-out;
}

/* Borda gradiente animada (sempre visível) */
.botao-clt::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, 
    #009fe9, #0051ff, #0047b3, #0063ff);
  background-size: 400% 400%;
  border-radius: 52px;
  opacity: 1; /* sempre visível */
  transition: opacity 0.3s ease; /* útil se quiser mudar algo no hover */
  z-index: -1;
  animation: bordaGradiente 4s ease infinite; /* duração um pouco mais lenta para suavidade */
}

/* Brilho deslizante (hover) */
.botao-clt::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.7s ease;
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* escondido por padrão */
}

/* Hover: mostra brilho e aumenta levemente */
.botao-clt:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 30px rgba(0, 99, 255, 0.5);
  text-shadow: 0 0 8px rgba(255,255,255,0.5);
}

.botao-clt:hover::before {
  left: 100%;
  opacity: 1; /* brilho aparece apenas no hover */
}

/* Animação de pulsação */
@keyframes pulse {
  0% {
    box-shadow: 0 8px 20px rgba(0, 99, 255, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 12px 28px rgba(0, 99, 255, 0.6);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 8px 20px rgba(0, 99, 255, 0.3);
    transform: scale(1);
  }
}

/* Animação da borda gradiente */
@keyframes bordaGradiente {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.section-infos{
    padding: 130px 0px;
}

.section-duvidas{
    padding: 130px 0px;
    background: url(../img/clt/background-mid.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


.infos-clt{
    display: flex;
    justify-content: center;
    align-items: center;
}

.mt-infos{
    margin-top: 45px;
}

.infos-clt-img{
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.infos-clt-img img{
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.infos-clt-text{
    width: 55%;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    flex-direction: column;
    margin-left: 50px;
}

.infos-clt-text h2{
    font-size: 45px;
    color: #001e5d;
    font-weight: 500;
    line-height: 53px;
    margin-bottom: 20px;
}

.infos-clt-text h6{
    font-size: 20px;
    max-width: 590px;
    font-weight: 500;
    padding: 30px 0px 15px 0px;
    color: #0063ff;
}


.infos-description{
    font-size: 20px;
    max-width: 590px;
    font-weight: 300;
    color: #001e5d;
}

.infos-blue-description{
    font-size: 20px;
    max-width: 590px;
    font-weight: 300;
    color: #0063ff;
}

.section-vantagens{
    background: linear-gradient(150deg, #00389a, #125ee2);
    padding: 130px 0px;
}

.h1-vantagens{
    font-size: 52px;
    color: #ffffff;
    font-weight: 400;
    line-height: 55px;
    margin-bottom: 60px;
}

.clt-vantagens{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clt-vantagens-first{
    width: 30%;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    flex-direction: column;
}

.clt-vantagens-first img{
    width: 45%;
}

.clt-vantagens-first h2{
    color: #fff;
    font-weight: 500;
    margin-top: 20px;
    font-size: 29px;
}

.clt-vantagens-first p{
    color: #fff;
    font-weight: 300;
    margin-top: 10px;
    font-size: 19px;
}

.faq-flex {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

.faq-container {
    max-width: 1025px;
    width: 100%;
}

.faq-item {
    background: #e7ecf1;
    border-radius: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.faq-item:hover {
    box-shadow: 0 8px 20px rgba(0, 52, 165, 0.08);
}

.faq-question {
    padding: 23px 35px;
    font-weight: 500;
    color: #1e293b;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question::after {
    content: '';
    width: 10px;
    height: 10px;
    border: solid #1e293b;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: 0.3s;
}

.faq-item.active .faq-question::after {
    transform: rotate(-135deg);
}

.faq-answer-wrapper {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

.faq-answer {
    padding: 0 35px 20px 35px;
    color: #475569;
    line-height: 1.7;
}
    
.faq-contact {
    text-align: center;
    margin-top: 30px;
    color: #64748b;
}

.contact-link {
    color: #0063ff;
    font-weight: 600;
    cursor: pointer;
}


        .header.d{
            background-color: #f1f5f9 !important;
        }

        .privado-title{
            font-size: 45px;
            color: #0063ff;
            font-weight: 500;
            line-height: 53px;
            text-align: center;
            margin-bottom: 15px;
        }

        .privado-description{
            font-size: 18px;
            font-weight: 300;
            color: #001e5d;
            margin-bottom: 0px;
            text-align: center;
        }

        .sim.btn{
            background-color: #0063ff !important;
        }

        .header.g{
            background: linear-gradient(150deg, #00389a, #125ee2);
        }

        .header.g .title:first-child{
            color: #fff;
            font-weight: 500;
        }


        .a-ter, .two.tm {
            color: #ffffff;
            letter-spacing: 0;
            font-size: 19px;
            font-weight: 400;
            background-color: rgb(255 255 255 / 10%);
            margin: 0px 35px 0px 0px;
            padding: 5px 30px 5px 30px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .a-ter:hover{
            color: #ffffff !important;
            background-color: rgb(255 255 255 / 30%);
            transition: 0.4s;
        }

        
        .tm:hover{
            color: #ffffff !important;
            background-color: rgb(255 255 255 / 30%);
            transition: 0.4s;
        }

        .lgpd-description{
            color: #fff;
        }

        .icon-term{
            margin-right: 10px;
        }

        .bottom.nav{
            background-color: #01399d;
        }

        .two.modal{
            height: 570px;
        }

        

        @media (max-width: 1230px) {
            .clt-img img {
                display: flex;
                width: 490px;
            }
            .section-main-clt-text h1 {
                color: #0063ff;
                font-weight: 500;
                font-size: 45px;
                line-height: 50px;
            }
            .section-main-clt-text p{
                font-size: 22px;
            }
            .botao-clt{
                padding: 13px 48px;
                font-size: 1.2rem;
            }
            .infos-clt-text h2{
                font-size: 32px;
                line-height: 35px;
            }
            .infos-clt-text h6{
                font-size: 15px;
                padding: 15px 0px 15px 0px;
            }
            .infos-description{
                font-size: 15px;
            }
            .infos-blue-description{
                font-size: 15px;
            }
            .infos-clt-img img{
                width: 100%;
            }
            .h1-vantagens{
                font-size: 35px;
            }
            .clt-vantagens-first h2{
                font-size: 23px;
            }
            .clt-vantagens-first p{
                font-size: 15px;
            }
            .privado-title{
                font-size: 32px;
            }
            .privado-description{
                font-size: 16px;
            }
            .faq-question{
                font-size: 0.9rem;
                letter-spacing: 1px;
            }
            .a-ter, .two.tm{
                font-size: 16px;
                line-height: 20px;
            }
            .icon-term{
                width: 30px !important;
                height: 30px !important;
            }
        }

        @media (max-width: 800px) {
            .section-main-clt{
                background-image: url('../img/clt/background-main-mobile.png');
            }
            .main-clt {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            .section-main-clt-text{
                width: 90%;
                align-items: center;
            }   
            .section-main-clt-img{
                width: 90%;
            }
            .section-main-clt-text h1{
                text-align: center;
                font-size: 39px;
                line-height: 41px;
            }
            .section-main-clt-text p {
                font-size: 19px;
                text-align: center;
            }
            .clt-img img{
                width: 350px;
            }
            .botao-clt {
                padding: 13px 30px;
                font-size: 1.1rem;
                margin-bottom: 15px;
            }
            .infos-clt{
                flex-direction: column-reverse;
                justify-content: center;
                align-items: center;
            }
            .infos-clt-text{
                width: 95%;
                justify-content: center;
                align-items: center;
                text-align: center;
                margin-left: 0;
            }
            .infos-clt-text h2 {
                font-size: 26px;
                line-height: 32px;
            }
            .infos-clt-img{
                width: 100%;
            }
            .infos-clt-img img{
                margin-top: 40px;
            }
            .section-infos{
                padding: 85px 0px;
            }
            .section-duvidas{
                padding: 85px 0px;
                background-image: url('../img/clt/background-main-mobile.png');
            }
            .section-vantagens{
                padding: 85px 0px;
            }
            .h1-vantagens{
                font-size: 28px;
                line-height: 35px;
            }
            .clt-vantagens{
                flex-direction: column;
                gap: 50px;
            }
            .clt-vantagens-first{
                width: 100%;
            }
            .clt-vantagens-first h2 {
                font-size: 20px;
            }
            .clt-vantagens-first img{
                width: 38%;
            }
            .header.g .description span{
                gap: 15px;
            }
            .a-ter, .two.tm{
                width: 100%;
                margin-right: 0;
                font-size: 15px;
            }
            .header.g .lgpd{
                font-size: 14px;
            }
            .icon-term {
                width: 20px !important;
                height: 20px !important;
            }
            .privado-title {
                font-size: 25px;
                line-height: 33px;
            }
            .privado-description {
                font-size: 15px;
            }
            .faq-flex {
                display: flex;
                justify-content: center;
                padding: 20px 0px;
            }
            .faq-question{
                padding: 23px 20px;
                font-size: 0.8rem;
                gap: 16px;
            }
            .faq-item.active .faq-answer{
                font-size: 0.8rem;
                padding: 23px 20px;
            }
            .faq-question::after{
                width: 13px;
                height: 8px;
            }
        }



        /* Responsividade */
        @media (max-width: 600px) {
            .faq-question {
                font-size: 0.8rem;
                padding: 16px 20px;
            }
            .logo img {
                height: 32px;
                width: auto;
            }
            .faq-answer {
                padding: 0 20px 20px 20px;
            }
            .sim.btn {
                font-size: 16px;
                padding: 8px 12px;
            }
            .header.d {
                padding-top: 90px !important;
                padding-bottom: 60px !important;
                text-align: center;
                line-height: 19px;
            }
        }