@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
* {
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    box-sizing: border-box;
    transition: all .2s linear;
    text-decoration: none;
}

:root {
   --color-primary:#0D2B54;
   --color-white:#fff;
   --off-white:#F8F7ED;
   --color-grey:#4B5563;
   --color-secondary:#FBBF24;
   --color-light:#E5E7EB;
}

body, html {
    font-size: 90%;
}

html {
    scroll-behavior: smooth;
}

body{
    background-color: var(--off-white);
}

ul {
    list-style: none;
}

section {
    width: 100%;
}

.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

        /* Header Styles */
        .header {
            background-color: var(--color-primary);
            top: 0;
            z-index: 1000;
            width: 100%;
        }

        /* Navbar Styles */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 0;
            position: relative;
        }

        .navbar__logo {
            height: 45px;
            width: auto;
        }

        .navbar__nav {
            display: flex;
            align-items: center;
            gap: 2.5rem;
        }

        .nav__item {
            position: relative;
        }

        .nav__link {
            color: var(--off-white);
            font-weight: 400;
            font-size: 18px;
            padding: 0.5rem 0;
            display: inline-block;
        }

        .nav__link:hover {
            color: var(--color-secondary);
        }

        /* Dropdown Styles */
        .nav__dropdown {
            position: relative;
        }

        .dropdown__content {
            display: none;
            position: absolute;
            background-color: var(--color-white);
            min-width: 220px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            z-index: 1;
            border-radius: 0.5rem;
            top: 100%;
            left: 0;
            padding: 0.5rem 0;
        }

        .dropdown__content a {
            color: var(--color-primary);
            padding: 0.75rem 1.5rem;
            display: block;
            font-weight: 500;
            font-size: 14px;
        }

        .dropdown__content a:hover {
            background-color: var(--color-light);
        }

        .nav__dropdown:hover .dropdown__content {
            display: block;
        }

        /* Button Styles */
        .nav__button, .btn {
            background-color: var(--color-secondary);
            color: var(--color-primary);
            border: 0.5px solid var(--color-light);
            padding: 0.75rem 1.65rem;
            border-radius: 0.5rem;
            font-weight: 600;
            cursor: pointer;
            font-size: 18px;
        }

        .nav__button:hover {
            transform: translateY(-2px);
        }

        .button-final:hover {
            transform: translateY(-2px);
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        /* Mobile Menu */
        .navbar__mobile-toggle {
            display: none;
            cursor: pointer;
            font-size: 1.75rem;
            color: var(--off-white);
            background: none;
            border: none;
            z-index: 1001;
        }

        .bx-menu,
        .bx-x {
            font-size: 3rem;
        }

/*hero*/

.hero {
    background-image: url('/img/bg-hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 6rem 0;
        }

        .hero-content {
            max-width: 450px;
            text-align: left;
        }

        .hero-title {
            font-size: 2.5rem;
            color: var(--color-primary);
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        .hero-description {
            font-size: 1.2rem;
            color: var(--color-primary);
            margin-bottom: 1rem;
            line-height: 1.6;
        }

        .hero-features {
            display: flex;
            justify-content: left;
            gap: 10px;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .hero-feature {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--color-primary);
            background-color: var(--color-light);
            padding: 0.45rem 1.55rem;
            font-weight: 500;
            border-radius: 6px;
            border: 0.25px solid #0d2b547d;
        }

        .hero-buttons {
            display: flex;
            justify-content: left;
            gap: 1.5rem;
        }

         .btn--secondary {
            background-color:transparent;
            color: var(--color-primary);
            border: 0.5px solid var(--color-primary);
        }

        .btn--secondary:hover {
            background-color: var(--color-secondary);
            border-color: var(--off-white);
        }

        /*serviços*/


.service {
    padding: 5rem 0;
}

.heading {
    text-align: center;
    max-width: 450px;
    margin: 0 auto 3rem;
}

.heading .sub {
    display: inline-block;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 1rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
    padding: 2px 28px;
    border-radius: 40px;
}

.heading .title {
    color: var(--color-primary);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 10px;
}

.heading h3 {
    color: var(--color-grey);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
}

.service .container {
    max-width: 900px;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 3rem;
    align-items: stretch;
}

.service-card {
    background: var(--color-white);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.3s ease;
    border: 1px solid var(--color-primary);
    text-align: left;
    display: flex;
    height: 350px;
    flex-direction: column;
}

.card-content {
  flex: 1; /* Cresce para ocupar o espaço disponível */
  display: flex;
  flex-direction: column;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Estilos para o ícone SVG */
.service-card .svg-icon, svg  {
    width: 38px;
    height: 38px;
    margin-top: 1rem;
    margin-bottom: 5px;
    color: var(--color-primary);
}

.svg-iconn {
    display: flex;
}


.service-card i {
    font-size: 38px;
    margin-top: 1rem;
    color: var(--color-primary);
}

/* Primeiro card ativo por padrão */
.service-card:first-child {
  background-color: var(--color-primary);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(13, 43, 84, 0.2);
}

.service-card:first-child .title-card,
.service-card:first-child .description-card,
.service-card:first-child .svg-icon,
.service-card:hover i {
  color: var(--color-white);
}

.service-card:first-child::before {
  opacity: 1;
}

/* Efeito hover para todos os cards */
.service-card:hover {
  background-color: var(--color-primary);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(13, 43, 84, 0.2);
}

.service-card:hover .title-card,
.service-card:hover .description-card,
.service-card:hover .svg-icon,
.service-card:hover i {
  color: var(--color-white);
}


/* Estilos para o título do card */
.title-card {
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 1rem;
    min-height: 3.5em;
    display: flex;
    align-items: center;
}

/* Estilos para a descrição */
.description-card {
    color: var(--color-primary);
    font-size: 16px;
    line-height: 1.6;
    flex-grow: 1; /* Ocupa o espaço restante */
}

/*beneficios*/

.beneficios {
    background: var(--color-primary);
    padding: 5rem 0;
    position: relative;
}

.beneficios-content {
    display: flex;
    grid-template-columns: repeat(2, 1fr);
    gap: 15rem;
    margin-bottom: 25px;
}

.beneficios-text h2 {
    color: var(--off-white);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.beneficios-text h2 b {
    color: var(--color-secondary);
    font-weight: 700;
}

.beneficios-text h3 {
    color: var(--off-white);
    font-size: 20px;
    font-weight: 300;
    line-height: 1.3;
    margin-bottom: 2.5rem;
    max-width: 400px;
}

/* Imagens responsivas */
.beneficios-text img {
    display: none; /* Inicialmente escondidas */
    width: 400px;
    height: auto;
    border-radius: 0.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.beneficios-text img.mosaico-dsk {
    display: block; /* Mostra desktop por padrão */
}

/* Grid de cards de benefícios */
.beneficios-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.benefice-card {
    background: var(--color-white);
    border-radius:20px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
}

.benefice-card:hover {
    transform: translateY(-5px);
}

.benefice-card i {
    font-size: 2.5rem;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.benefice-card p {
    color: var(--color-primary);
    font-size: 18px;
    line-height: 1.5;
}

.benefice-card .check {
    margin-top: 7px;
}

/* Card CTA */
.card-cta {
    background: var(--color-white);
    border-radius: 15px;
    padding: 3rem;
    border: 1px solid var(--color-primary);
    top: -4rem;
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.title-cta {
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
}

.card-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9rem;
}

.btn-b {
    display: inline-block;
    white-space: nowrap; /* Impede a quebra de linha */
    text-align: center;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Impede que o botão encolha */
    min-width: 180px;
}

.btn-b:hover {
    transform: translateY(-3px);
}

/*sobre mim*/

.sobre {
    padding: 5rem 0;
}

.container.sobre-mim {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
}

.sobre .heading .title {
    color: var(--color-primary);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.sobre .heading {
    text-align: left;
    max-width: 1100px
}

.sobre .heading p {
    color: var(--color-primary);
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.sobre .heading img {
    width: 200px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.sobre .img-sobre img {
    width: 100%;
    margin-top: 30px;
}

/*cases*/

.casos {
    padding: 5rem 0;
    max-width: 1000px;
    margin: 0 auto;
    justify-content: center;
}

.casos .heading {
    max-width: 500px;
}

.casos-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.casos-card {
    background: var(--color-white);
    border-radius: 20px;
    padding: 1rem ;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-primary);
    height: 200px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.stars {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.stars i {
    color: var(--color-secondary);
}

.stars-i {
    margin-left: 15px;
}

.stars-content .border {
    width: 50px;/*comprimento*/
    height: 5px; /*grossura*/
    background-color: var(--color-primary);
    margin-top: -17px;
}

.stars h3 {
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.casos-card p {
    color: var(--color-primary);
    font-size: 1rem;
    line-height: 1.6;
    position: relative;
}

.carousel-dots {
    display: none;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-light);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--color-secondary);
    transform: scale(1.2);
}

/*perguntas*/

.faq {
    padding: 5rem 0;
}

.faq-container {
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid #1f1f1f17;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-question {
    width: 100%;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-primary);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.3s ease;
}

.faq-question span {
    color: var(--off-white);
    font-size: 18px;
    font-weight: 500;
    flex: 1;
}

.faq-question i {
    color: var(--color-secondary);
    font-size: 2rem;
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--off-white);
}

.faq-answer p {
    padding: 1.5rem 1.5rem;
    color: #000;
    line-height: 1.4;
    font-size: 16px;
}

/* Estado ativo (aberto) */
.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    max-height: 300px;
}

/*contato*/

.contato {
    position: relative;
    padding: 5rem 0;
    background: url('/img/bg-final.webp');
    background-size: cover;
    color: var(--color-white);
    max-width: 1200px;
    margin: 0 auto;
    height: 400px;
    border-radius: 8px;
     margin-bottom: -150px; /* ou ajuste conforme o quanto quer que sobreponha */
    z-index: 2;
}

.contato .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 0 2rem;
}

/* Heading (lado esquerdo) */
.contato .heading {
    text-align: left;
    max-width: 500px;
}

.contato .sub {
    color: var(--off-white);
    font-size: 14px;
    background: #0d2b5470;
    font-weight: 500;
    margin-bottom: 1rem;
    padding: 2px 15px;
    border: 1px solid var(--off-white);
}

.contato h4 {
    text-align: left;
}

.contato .title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--off-white);
}

.contato .heading p {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 1rem;
    max-width: 350px;
}

.button-final {
    margin-top: 2rem;
}


/* Redes de contato (lado direito) */
.redes {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 90px;
}

.rede {
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.rede i, .rede svg{
    background-color: var(--off-white);
    font-size: 2.5rem;
    color: var(--color-primary);
    padding: 0.5rem;
    border-radius: 10px;
}

.rede svg {
    width: 3.5rem;
    height: 3.5rem;
    padding: 0.5rem;
    margin: 0;
}
.rede p {
    margin: 0;
    font-size: 18px;
    align-items: center;
}

/*footer*/

footer {
    background-color: var(--color-white);
    color: var(--color-primary);
    padding: 3rem 0;
    position: relative;
    z-index: 1;
}

footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

.logo-f {
    margin-top: 150px;
}

/* Logo */
.logo-f img {
    max-height: 50px;
    width: auto;
}

/* Links */
.links, .links1  {
    display: flex;
    gap: 0.8rem;
    text-align: center;
}

.links, .links2 {
    display: flex;
    gap: 0.8rem;
    text-align: center;
}

.links a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.links a:hover {
    color: var(--color-primary);
    transform: translateY(-5px);
}

/* Texto do Footer */
.text-footer {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.text-footer p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

.text-footer a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Estilos para Subpágina */
.subpage-hero {
    background: url('/img/bg-hero-sobre.webp');
    background-size: cover;
    background-position: center;
    color: var(--color-primary);
    padding: 8rem 0;
    text-align: center;
    height: 300px;
}

.subpage-hero h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

.subpage-hero p {
    font-size: 28px;
}

.subpage-sobre .heading {
    margin-top: 50px;
}

.subpage-sobre .img-sobre img {
     max-width: 100%;
}

.subpage-sobre  .sobre-mim {
    display: grid;
    flex-wrap: wrap; /* Permite quebra de linha em telas pequenas */
    gap: 2rem;
    align-items: center;
}

.subpage-sobre .container {
    max-width: 1000px;
}

.subpage-sobre .btn {
    margin-top: 10px;
    padding: 0.45rem 1.5rem;
}


/*diferenciais*/

.diferenciais {
    padding: 5rem 0;
}

@media (max-width: 1920px) {
    .subpage-service .service-card {
    height: 300px;
}
}

.diferenciais-grid {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
}

.diferenciais-card {
    background-color: var(--color-grey);
    border-radius: 10px;
    padding: 1.5rem;
    height: 80px;
    display: flex;          /* Ativa flexbox */
    align-items: center;    /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    text-align: center;
}

.diferenciais-card p {
    color: var(--off-white);
    font-size: 18px;
    font-weight: 400;
}

        /* Responsive Styles */
        @media (max-width: 992px) {
            .navbar__nav {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background-color: var(--color-primary);
                flex-direction: column;
                padding: 6rem 2rem 2rem;
                gap: 1.5rem;
                z-index: 1000;
                overflow-y: auto;
            }

            .navbar__nav.active {
                display: flex;
            }

            .nav__item {
                width: 100%;
            }

            .dropdown__content {
                position: static;
                box-shadow: none;
                display: none;
                width: 100%;
                margin-top: 0.5rem;
                padding-left: 1rem;
                background-color: var(--color-light);
                border-radius: 0.25rem;
            }

            .navbar__mobile-toggle {
                display: block;
            }

            
            .hero {
                padding: 3rem 0;
            }

            .hero-title {
                font-size: 2rem;
            }

            .hero-buttons {
                align-items: center;
            }

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

            .card-cta-content {
                flex-direction: column;
                text-align: center;
                gap: 1.5rem;
            }
            
            .card-cta-content .title-cta {
                margin-right: 0;
                font-size: 1.5rem;
            }
            
            .btn-b {
                width: 100%;
                max-width: 300px;
            }

            .beneficios-text h2 {
                font-size: 2rem;
            }
            
            .beneficios-text h3 {
                font-size: 1.1rem;
            }
            
            .title-cta {
                font-size: 1.5rem;
            }

            .container.sobre-mim {
                grid-template-columns: 1fr;
                gap: 0;
            }
            
            .img-sobre {
                max-width: 500px;
                margin: 0 auto;
            }

            .contato .container {
                grid-template-columns: 1fr;
                gap: 2rem;
                padding: 2rem;
            }

            .contato {
                 height: 100%;
                 background: url('/img/bg-final-mob.webp');
                 background-size: cover;
                 border-radius: 0;
            }
            
        }

        @media (max-width: 576px) {
            .container {
                padding-inline: 1rem;
            }
            
            .navbar {
                padding: 1rem 0;
            }

            .hero {
                background-image: url('/img/bg-hero-mob.webp');
            }

            .subpage-hero .container {
                padding-inline: 3rem;
            }

            .subpage-hero p {
                font-size: 26px;
            }

            .hero-content {
                text-align: center;
            }

            .hero-feature {
                padding: 0.5rem 0.75rem;
            }

            .hero-features {
                flex-wrap: nowrap;
                justify-content: center;
            }

            .hero-buttons {
                justify-content: center;
                flex-direction: column;
            }

            .btn {
                padding: 0.65rem 4.2rem ;
            }

            .navbar img {
                width: 60%;
                height: auto;
            }

            .bx-menu,
            .bx-x {
            font-size: 2rem;
            }

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

            .service-card {
                max-width: 300px;
                margin: 0 auto;
                height: 100%;
                padding: 1.5rem;
            }

            .description-card {
                font-size: 20px;
                font-weight: 500;
            }

            .title-card{
                font-size: 22px;
            }

            .card-cta {
                padding: 2rem;
            }
            
            .card-cta-content .title-cta {
                font-size: 1.3rem;
            }

            .beneficios-text h2 {
                font-size: 1.8rem;
            }
            
            .beneficios-cards {
                grid-template-columns: 1fr;
            }
            
            .card-cta {
                padding: 1.5rem;
            }
            
            .title-cta {
                font-size: 1.3rem;
            }

        }

        @media (max-width:768px) {

            .subpage-hero {
                /* Imagem específica para mobile */
                background: url('../img/bg-sobre-mob.webp') no-repeat;
                background-size: cover;
                padding: 4rem 0;
            }

            .subpage-hero h1 {
                font-size: 1.8rem;
                padding: 0 1rem;
            }
            .service {
                padding: 3rem 0;
            }

            .subpage-service .service-card {
                height: 350px;
            }
            
            .heading .title {
                font-size: 2rem;
            }
            
            .heading h3 {
                font-size: 1.1rem;
            }

            .beneficios {
                padding: 3rem 0;
            }

            .beneficios-text {
                text-align: center ;
            }

            .beneficios-text h3 {
                font-weight: 500;
                font-size: 20px;
            }

            .benefice-card p {
                font-size: 22px;
            }

            .benefice-card .check {
                margin-top: 0;
            }

            .benefice-card .ch {
                margin-top: 4px;
            }
            
            .beneficios-text img.mosaico-dsk {
                display: none;
            }
            
            .beneficios-text img.mosaico-mob {
                display: block;
                text-align: center;
                width: 350px;
                margin: 0 auto;
            }

            .beneficios-content {
                flex-direction: column;
                gap: 0;
            }
            
            .card-cta {
                margin-top: 10px;
                padding: 2rem;
                max-width: 300px;
            }

            .card-cta-content .title-cta {
                font-size: 16px;
                text-align: center;
            }

            .sobre .heading p {
                font-size: 18px;
            }

            .sobre .heading {
                margin: 0 ;
            }

            .sobre .heading .hero-buttons {
                flex-direction: row;
                justify-content: left;
            }


            .sobre .heading .hero-buttons .btn {
                padding: 0.75rem 1.65rem;
            }

            .img-sobre {
                max-width: 500px;
                margin-top: 0;
            }
            
            .casos-carousel {
                display: flex;
                width: 100%;
                transition: transform 0.5s ease;
                margin-top: 0;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch; /* Suave no iOS */
                scrollbar-width: none;
            }

            .casos-grid {
                display: block;
                overflow: hidden;
                max-width: 280px;
                margin: 0 auto;
                height: 300px;
                overflow: visible;
            }
    
            .casos-card {
                min-width: calc(100% - 2rem);
                scroll-snap-align: start;
                flex: 0 0 100%;
            }

         .carousel-dots {
            display: flex;
            justify-content: center;
            gap: 0.8rem;
            margin-top: 1.5rem;
        }
        
        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--color-light);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .dot.active {
            background: var(--color-secondary);
            transform: scale(1.2);
        }

        .faq-container {
            width: 90%;
            margin: 0 auto;
        }
        
        .faq-item {
            margin-left: auto;
            margin-right: auto;
            max-width: 97%; /* Reduz a largura máxima */
        }
        
        .faq-question {
            padding: 0.8rem 1rem; /* Reduz o padding lateral */
        }

        .faq-question span {
            margin-right: 12px;
        }

        .contato {
                 height: 100%;
                 background: url('/img/bg-final-mob.webp');
                 background-size: cover;
                 border-radius: 0;
                  width: 90%; /* Controla a largura do container */
            max-width: 500px; /* Largura máxima no mobile */
            padding: 2rem 0;
            }

        .contato .title {
            font-size: 2.3rem;
        }

        .contato .heading p {
            font-size: 22px;
        }

        .redes {
            padding: 0;
        }

        .links {
            flex-direction: column;
        }

        .links2 {
            gap: 1.9rem;
        }

        .links1 {
            gap: 1.5rem;
            margin-left: 16px;
        }

        .diferenciais-card {
            padding: 1rem;
        }

    }

        @media (width < 1024px) {
            .beneficios-content {
                gap: 1px;
            }

            .beneficios-text h3 {
                max-width: 600px;
                justify-content: center;
                margin: 0 auto;
                margin-bottom: 20px;
            }

             .beneficios-text {
                text-align: center ;
            }

            .beneficios-text h3 {
                font-weight: 500;
                font-size: 20px;
            }

            .benefice-card p {
                font-size: 22px;
            }

            .benefice-card .check {
                margin-top: 0;
            }

            .benefice-card .ch {
                margin-top: 4px;
            }
            
            .beneficios-text img.mosaico-dsk {
                display: none;
            }
            
            .beneficios-text img.mosaico-mob {
                display: block;
                text-align: center;
                width: 350px;
                margin: 0 auto;
            }

            .beneficios-content {
                flex-direction: column;
                gap: 0;
            }
            
            .card-cta {
                margin-top: 10px;
                padding: 2rem;
                max-width: 300px;
            }

            .card-cta-content .title-cta {
                font-size: 16px;
                text-align: center;
            }
        }

        @media (max-width: 480px) {
            .faq-container {
                width: 85%;
            }
            
            .faq-item {
                max-width: 100%; /* Ajuste fino para telas muito pequenas */
            }
            
            .faq-title {
                font-size: 1.5rem; /* Reduz tamanho do título */
                padding: 0 1rem; /* Adiciona padding lateral */
            }
            
            .faq-intro {
                padding: 0 1rem; /* Adiciona padding lateral */
            }
        }