html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

.container {
    max-width: 1500px; /* Defina a largura máxima que deseja */
    margin: 0 auto; /* Centraliza o contêiner */
}

/* NAVBAR */
.modern-navbar {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    background: linear-gradient(90deg, #181c2a 0%, #232946 100%);
    box-shadow: 0 4px 24px rgba(30, 60, 120, 0.12);
    position: sticky;
    top: 0;
    z-index: 9999;
}

.modern-navbar-container {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 72px;
    position: relative;
}

.modern-navbar-logo img {
    height: 48px;
    width: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform .2s;
}

.modern-navbar-logo {
    position: absolute;
    left: 20px;
}

    .modern-navbar-logo:hover img {
        transform: scale(1.08);
    }

.modern-navbar-menu {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

    .modern-navbar-menu li a {
        color: #fff;
        font-size: 1.1rem;
        font-weight: 600;
        text-decoration: none;
        padding: 8px 12px;
        border-radius: 6px;
        transition: background .18s, color .18s, box-shadow .18s;
        position: relative;
    }

    .modern-navbar-menu li {
        flex-shrink: 0;
    }

        .modern-navbar-menu li a:hover,
        .modern-navbar-menu li a:focus {
            background: rgba(255,255,255,0.12);
            color: #ffb703;
            box-shadow: 0 2px 12px rgba(30,60,120,0.08);
        }

.modern-navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 16px;
    z-index: 1100;
}

    .modern-navbar-toggle span {
        display: block;
        width: 28px;
        height: 4px;
        background: #fff;
        margin: 4px 0;
        border-radius: 2px;
        transition: all .3s;
    }

/* Botão especial para o item Planos na navbar */
.modern-navbar-menu .navbar-btn {
    background: #ffb703;
    color: #072f5f !important;
    border-radius: 8px;
    padding: 10px 28px;
    font-weight: 800;
    box-shadow: 0 2px 12px rgba(255,183,3,0.10);
    transition: background .18s, color .18s, box-shadow .18s;
    border: none;
    outline: none;
    margin-left: 8px;
}

    .modern-navbar-menu .navbar-btn:hover,
    .modern-navbar-menu .navbar-btn:focus {
        background: #ffd166;
        color: #181c2a !important;
        box-shadow: 0 4px 18px rgba(255,183,3,0.18);
    }

/* Botão Status na navbar — estilo discreto */
.modern-navbar-menu .navbar-btn-status {
    background: rgba(255, 77, 109, 0.15);
    color: #ff4d6d !important;
    border: 1.5px solid rgba(255, 77, 109, 0.4);
    border-radius: 8px;
    padding: 8px 18px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background .18s, color .18s, box-shadow .18s;
    margin-left: 8px;
}

    .modern-navbar-menu .navbar-btn-status:hover,
    .modern-navbar-menu .navbar-btn-status:focus {
        background: rgba(255, 77, 109, 0.25);
        color: #fff !important;
        box-shadow: 0 2px 12px rgba(255, 77, 109, 0.25);
    }

/* MOBILE */
@media (max-width: 900px) {
    .modern-navbar-container {
        justify-content: space-between;
        height: 64px;
    }

    .modern-navbar-menu {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: #181c2a;
        flex-direction: column;
        gap: 0;
        padding: 18px 0 12px 0;
        box-shadow: 0 8px 32px rgba(0,0,0,0.25);
        display: none;
        border-radius: 0 0 18px 18px;
        animation: fadeIn .3s;
        z-index: 1200;
    }

        .modern-navbar-menu.open {
            display: flex;
        }

        .modern-navbar-menu li {
            width: 100%;
            text-align: center;
            margin: 0 0 6px 0;
        }

            .modern-navbar-menu li a {
                width: 90%;
                margin: 0 auto 8px auto;
                display: block;
                padding: 13px 0;
                font-size: 1.13rem;
                border-radius: 6px;
                background: none;
                color: #fff;
                font-weight: 600;
                transition: background .18s, color .18s;
            }

                .modern-navbar-menu li a:hover,
                .modern-navbar-menu li a:focus {
                    background: #232946;
                    color: #ffb703;
                }

        /* Botão especial para o item Planos */
        .modern-navbar-menu .navbar-btn {
            background: #ffb703;
            color: #072f5f !important;
            border-radius: 8px;
            padding: 13px 0;
            font-weight: 800;
            box-shadow: 0 2px 12px rgba(255,183,3,0.10);
            width: 90%;
            margin: 0 auto 12px auto;
            display: block;
            font-size: 1.13rem;
            border: none;
            outline: none;
            transition: background .18s, color .18s, box-shadow .18s;
        }

            .modern-navbar-menu .navbar-btn:hover,
            .modern-navbar-menu .navbar-btn:focus {
                background: #ffd166;
                color: #181c2a !important;
                box-shadow: 0 4px 18px rgba(255,183,3,0.18);
            }

    .modern-navbar-toggle {
        display: flex;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ajuste para testimonial-container, filtro, container_cliente, etc. */
.testimonial-container,
.filtro,
.container_cliente,
.container-funcao,
.feedback-container {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}


body {
    padding-bottom: 70px; /* Adiciona um preenchimento (espaçamento) de 70 pixels na parte inferior do corpo da página. Isso é útil para evitar que o conteúdo fique escondido atrás de um rodapé fixo ou navbar. */
}


.logo {
    width: auto; /* A largura da imagem se ajusta automaticamente. */
    height: auto; /* A altura da imagem se ajusta automaticamente. */
}

/* Media query para telas menores que 768px */
@media (max-width: 900px) {
    .modern-navbar-logo {
        position: relative; /* remove o absolute */
        left: 0;
    }
}


#mapa {
    margin: 0;
    padding: 0;
}

header > h1 {
    font-weight: 800;
}

::selection {
    background: #1f6a8f;
    color: #fff;
}

::-moz-selection {
    background: #1f6a8f;
    color: #fff;
}

.solucaotexto {
    padding-bottom: 100px;
}

#cliente > .row > .col {
    padding-bottom: 20px;
}

.espaco {
    padding-bottom: 50px;
}

.cliente {
    padding-left: 100px;
    padding-right: 200px;
}

.cabecalho {
    padding-bottom: 50px;
    padding-top: 25px;
}

#contato {
    margin: 0;
    padding-bottom: 20px;
}



body {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    margin-right: 0;
    margin: 0;
    padding: 0;
}

#mapa {
    margin: 0;
    padding: 0;
}

header > h1 {
    font-weight: 800;
}

::selection {
    background: #2E2E2E;
    color: #fff;
}

::-moz-selection {
    background: #1f6a8f;
    color: #fff;
}

#titulo {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 5em;
    font-weight: 700;
}


.solucaotexto {
    padding-bottom: 100px;
}

#cliente > .row > .col {
    padding-bottom: 20px;
}

.espaco {
    padding-bottom: 50px;
}

.cliente {
    padding-left: 100px;
    padding-right: 200px;
}


.cabecalho {
    padding-bottom: 50px;
    padding-top: 25px;
}

#contato {
    margin: 0;
    padding-bottom: 20px;
}


#empresa {
    padding-left: 25px;
    padding-right: 25px;
    color: white;
    background-image: url("/images/empresa.jpg");
    /* Full height */
    height: 100%;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


@media(min-width: 768px) {
    #cliente {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.titulos {
    max-width: 1060px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

@media(min-width: 768px) {

    #empresa {
        padding-left: 200px;
        padding-right: 200px;
    }

    #solucao {
        padding-left: 200px;
        padding-right: 200px;
    }

    #cliente {
        padding-left: 150px;
        padding-right: 200px;
    }

    #suporte {
        padding-left: 200px;
        padding-right: 200px;
    }

    #contato {
        padding-left: 100px;
        padding-right: 100px;
    }
}

p {
    font-size: 125%;
}

a > h2 {
    text-decoration: none;
    color: #fff;
}


.main-text {
    position: absolute;
    top: 150px;
    width: 96.66666666666666%;
    color: #FFF;
}

.btn-min-block {
    min-width: 170px;
    line-height: 26px;
}


#inicio, .item {
    width: 100%;
}

.modal iframe {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.titulo {
    padding: 20px;
}

.formtel {
    padding-top: 40px;
}

select {
    padding: 0;
}


.pulse {
    animation: pulse 0.7s infinite;
    margin: 0 auto;
    display: table;
    margin-top: 50px;
    animation-direction: alternate;
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -webkit-filter: brightness(100%);
    }

    100% {
        -webkit-transform: scale(1.1);
        -webkit-filter: brightness(200%);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        filter: brightness(100%);
    }

    100% {
        transform: scale(1.1);
        filter: brightness(200%);
    }
}

@media(min-width: 768px) {

    #solucao {
        padding-left: 200px;
        padding-right: 200px;
    }

    #cliente {
        padding-left: 150px;
        padding-right: 200px;
    }

    #suporte {
        padding-left: 200px;
        padding-right: 200px;
    }
}

p {
    font-size: 125%;
}

a > h2 {
    text-decoration: none;
    color: #fff;
}

.btn-min-block {
    min-width: 170px;
    line-height: 26px;
}


#inicio, .item {
    width: 100%;
}


.titulo {
    padding: 20px;
}

.formtel {
    padding-top: 40px;
}

select {
    padding: 0;
}


.pulse {
    animation: pulse 0.7s infinite;
    margin: 0 auto;
    display: table;
    margin-top: 50px;
    animation-direction: alternate;
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -webkit-filter: brightness(100%);
    }

    100% {
        -webkit-transform: scale(1.1);
        -webkit-filter: brightness(200%);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        filter: brightness(100%);
    }

    100% {
        transform: scale(1.1);
        filter: brightness(200%);
    }
}

/*  FEEDBACK CLIENTES*/

.testimonial-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    max-width: 1400px;
}

.testimonial {
    background-color: #E0FFFF;
    align-items: center;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 300px;
    flex: 0 0 auto;
}

    .testimonial img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 10px;
    }

    .testimonial p {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .testimonial h3 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .testimonial h4 {
        font-size: 16px;
        margin-bottom: 0;
        color: #999;
    }

.rating span {
    color: #FFD700;
    font-size: 36px;
    margin: 0 2px;
}


.pulsating-button {
    display: inline-block;
    background-color: #ffb703;
    color: #072f5f;
    font-family: "Montserrat", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 24px;
    padding: 20px 40px;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    animation: pulse 1.5s infinite;
}

    .pulsating-button:hover,
    .pulsating-button:focus {
        animation: none;
        transform: scale(1.05);
        box-shadow: 0 8px 22px rgba(0,0,0,0.12);
    }

    .pulsating-button:active {
        transform: scale(0.96);
    }

    .pulsating-button:focus {
        box-shadow: 0 0 0 4px rgba(7,47,95,0.12);
    }

@media (max-width: 768px) {
    .pulsating-button {
        font-size: 18px;
        padding: 12px 22px;
        border-radius: 6px;
    }
}

@media (max-width: 420px) {
    .pulsating-button {
        font-size: 16px;
        padding: 8px 14px;
        width: 92%;
        max-width: 360px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/* Espaçamento consistente entre "Soluções / Funções" e a seção "Empresa" */
#solucoes {
    padding-top: 48px;
    padding-bottom: 24px;
}

.empresa-section {
    padding-top: 48px;
    padding-bottom: 48px;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    #solucoes,
    .empresa-section {
        padding-top: 28px;
        padding-bottom: 18px;
    }
}

@media (max-width: 420px) {
    #solucoes,
    .empresa-section {
        padding-top: 16px;
        padding-bottom: 12px;
    }
}

.txt-novo {
    text-align: left;
    margin-left: 100px;
    flex: 1 0 50%;
}

.img-novo img {
    width: 200px;
}

@media (max-width: 600px) {
    .bloc-zap-novo {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .txt-novo {
        margin-left: 0 !important;
    }
}

.row-centered {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.feedback-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1400px;
    width: 100%; /* Garante que o container utilize toda a largura disponível */
    padding: 0 15px; /* Adiciona padding para evitar que o conteúdo encoste nas bordas */
    box-sizing: border-box; /* Inclui o padding na largura total do elemento */
    border: 10px;
}

#feedback {
    display: flex;
    flex-wrap: wrap; /* Permite a quebra das linhas quando necessário */
    justify-content: center;
}


.feedback-option {
    flex: 1 1 30%; /* Define a largura base das opções */
    margin: 10px; /* Espaçamento entre as opções */
    box-sizing: border-box;
}

/* Media query para telas menores */
@media (max-width: 768px) {
    .feedback-option {
        flex: 1 1 100%; /* Faz as opções ocuparem 100% da largura disponível em telas menores */
        margin: 5px 0; /* Reduz o espaçamento entre as opções */
    }
}

.count1, .count, .count2 {
    font-size: 48px;
    font-weight: bold;
    color: white;
    align-content: center;
    text-align: center;
}

.divider {
    width: 100%;
    margin: auto;
    margin-bottom: 10px;
    border-bottom: 3px solid DarkBlue;
}

.custom-button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Estilos para telas menores */
@media (max-width: 768px) {
    .custom-button {
        padding: 8px 15px;
        font-size: 15px;
        width: 75%; /* Faz o botão ocupar toda a largura do container */
        box-sizing: border-box;
        white-space: normal;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centraliza os itens do menu */
        width: 50%; /* Garante que o menu toggle ocupe toda a largura disponível */
        box-sizing: border-box;
    }
}

/*SIMPLES SEND*/
.simpsend-container {
    width: 100%;
    max-width: 1200px;
    background: rgba(0,0,0,0.18);
    border-radius: 18px;
    padding: 40px 28px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
}

.simpsend-grid {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.simpsend-text {
    flex: 1 1 480px;
    color: #fff;
}

.simpsend-btn,
.btn-youtube {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    transition: all 0.2s ease;
}

.simpsend-btn {
    background: linear-gradient(135deg,#25D366,#128C7E);
    color: #fff;
}

    .simpsend-btn span {
        display: block;
        font-size: 13px;
        font-weight: 400;
        color: #ffe066;
    }

    .simpsend-btn:hover {
        filter: brightness(1.05);
    }

.btn-youtube {
    background: #FF0000;
    color: #fff;
}

    .btn-youtube:hover {
        background: #cc0000;
    }

.botoes-container {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}


.simpsend-text h2 {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 10px;
}

.simpsend-highlight {
    font-size: 18px;
    font-weight: 600;
    color: #25D366;
}

.simpsend-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

    .simpsend-features li {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #dbeafe;
    }

.simpsend-btn {
    margin-top: 20px;
    display: inline-block;
    background: linear-gradient(135deg,#25D366,#128C7E);
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
}

/* ===== VISUAL ===== */

.simpsend-ui {
    flex: 1 1 420px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* fundo */
.ui-main {
    width: 100%;
    max-width: 420px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0,0,0,0.6);
}

    .ui-main img {
        width: 100%;
    }

/* área animação */
.ui-rotate {
    position: absolute;
    right: -30px;
    bottom: 0;
    width: 260px;
    height: 260px;
}

/* cards */
.r-card {
    position: absolute;
    width: 280px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    background: #fff;
}

    .r-card img {
        width: 100%;
    }

/* ===== MOVIMENTO CONTÍNUO (CORRIGIDO) ===== */

.r1 {
    animation: cycle1 10s infinite linear;
}

.r2 {
    animation: cycle2 10s infinite linear;
}

.r3 {
    animation: cycle3 10s infinite linear;
}

/* suaviza animação */
.r-card {
    transition: transform 0.3s, box-shadow 0.3s;
}

/* PAUSA animação + melhora visual */
.ui-rotate:hover .r-card,
.ui-rotate.paused .r-card {
    animation-play-state: paused;
}

/* ciclo circular */
@keyframes cycle1 {
    0% {
        transform: translate(0,0) scale(1);
        z-index: 3;
        opacity: 1;
    }

    33% {
        transform: translate(70px,15px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }

    66% {
        transform: translate(-70px,15px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }

    100% {
        transform: translate(0,0) scale(1);
        z-index: 3;
        opacity: 1;
    }
}

@keyframes cycle2 {
    0% {
        transform: translate(-70px,15px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }

    33% {
        transform: translate(0,0) scale(1);
        z-index: 3;
        opacity: 1;
    }

    66% {
        transform: translate(70px,15px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }

    100% {
        transform: translate(-70px,15px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }
}

@keyframes cycle3 {
    0% {
        transform: translate(70px,15px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }

    33% {
        transform: translate(-70px,15px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }

    66% {
        transform: translate(0,0) scale(1);
        z-index: 3;
        opacity: 1;
    }

    100% {
        transform: translate(70px,15px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }
}

/* responsivo */
@media (max-width:768px) {
    .ui-rotate {
        position: relative;
        right: 0;
        margin-top: 20px;
    }
}

.r1 {
    animation: cycle1 10s infinite linear;
}

.r2 {
    animation: cycle2 10s infinite linear;
}

.r3 {
    animation: cycle3 10s infinite linear;
}

@keyframes cycle1 {
    0% {
        transform: translate(0,0) scale(1);
        z-index: 3;
        opacity: 1;
    }

    33% {
        transform: translate(90px,20px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }

    66% {
        transform: translate(-90px,20px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }

    100% {
        transform: translate(0,0) scale(1);
        z-index: 3;
        opacity: 1;
    }
}

@keyframes cycle2 {
    0% {
        transform: translate(-90px,20px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }

    33% {
        transform: translate(0,0) scale(1);
        z-index: 3;
        opacity: 1;
    }

    66% {
        transform: translate(90px,20px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }

    100% {
        transform: translate(-90px,20px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }
}

@keyframes cycle3 {
    0% {
        transform: translate(90px,20px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }

    33% {
        transform: translate(-90px,20px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }

    66% {
        transform: translate(0,0) scale(1);
        z-index: 3;
        opacity: 1;
    }

    100% {
        transform: translate(90px,20px) scale(0.9);
        z-index: 2;
        opacity: .7;
    }
}

/*LEITOR XML*/
#leitor-xml {
    padding: 80px 0;
    background: linear-gradient(135deg, #0f2a44, #1b4d6b);
    position: relative;
    overflow: hidden;
}

    #leitor-xml::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(28,181,224,0.25), transparent 70%);
        top: -100px;
        right: -100px;
    }

.leitor-xml-container {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 0 20px;
    flex-wrap: wrap;
}

.leitor-xml-box {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.30);
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    width: 100%;
}

.leitor-xml-visual {
    flex: 1 1 380px;
    display: flex;
    justify-content: center;
}

.xml-card {
    background: rgba(255,255,255,0.04);
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    position: relative;
    max-width: 360px;
    width: 100%;
}

.leitor-xml-img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 15px;
    transition: transform .3s ease;
}

    .leitor-xml-img:hover {
        transform: scale(1.03);
    }

.xml-top-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #19c56f;
    color: #fff;
    font-size: 0.75rem;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.xml-text {
    font-size: 0.95rem;
    color: #fff;
    opacity: 0.9;
    margin-bottom: 12px;
}

.xml-tags {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

    .xml-tags span {
        background: rgba(255,255,255,0.08);
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 0.8rem;
        color: #fff;
    }

.badge-free {
    display: inline-block;
    background: linear-gradient(90deg, #19c56f, #00e0ff);
    color: #fff;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
}

.leitor-xml-info {
    flex: 1 1 420px;
    color: #fff;
}

.leitor-xml-title {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.2;
}

    .leitor-xml-title span {
        color: #19c56f;
        font-size: 1.2rem;
        font-weight: 600;
    }

.leitor-xml-desc {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 20px;
}

.leitor-xml-benefits {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

    .leitor-xml-benefits li {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1rem;
    }

        .leitor-xml-benefits li::before {
            content: "✔";
            color: #19c56f;
            font-weight: bold;
        }

.leitor-xml-cta {
    display: inline-block;
    background: linear-gradient(90deg, #19c56f, #00e0ff);
    color: #fff;
    font-weight: 800;
    padding: 16px 28px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 1.1rem;
    box-shadow: 0 10px 30px rgba(0,224,255,0.25);
    transition: all .25s ease;
}

    .leitor-xml-cta:hover {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 15px 40px rgba(0,224,255,0.4);
    }

.excel-note {
    margin-top: 12px;
    color: #00e0ff;
    font-weight: 600;
}

@media (max-width: 900px) {

    .leitor-xml-box {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .leitor-xml-visual {
        justify-content: center;
    }

    .leitor-xml-benefits {
        display: inline-block;
        text-align: left;
    }
}

.xml-excel-preview {
    width: 100%;
    height: 120px;
    background: #f1f5f9;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
}

.excel-header {
    height: 25px;
    background: #19c56f;
}

.excel-lines {
    height: 100%;
    background: repeating-linear-gradient( to bottom, #e2e8f0, #e2e8f0 2px, transparent 2px, transparent 12px );
}

.xml-highlight {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: 12px;
}

.xml-proof {
    font-size: 0.85rem;
    color: #00e0ff;
    margin-bottom: 12px;
}

.xml-card {
    animation: floatCard 4s ease-in-out infinite;
}

@keyframes floatCard {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0px);
    }
}

.xml-impact {
    margin-top: 14px;
    font-size: 0.9rem;
    color: #ffffff;
    opacity: 0.85;
    font-weight: 500;
}

/*INTEGRAÇÕES E APIS */
.api-section {
    background: transparent;
    color: #fff;
}

.api-card {
    background: rgba(255,255,255,0.94);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(2,10,35,0.22);
    padding: 32px 24px;
}

.api-header {
    text-align: center;
    margin-bottom: 32px;
}

    .api-header h2 {
        font-size: 2.2rem;
        font-weight: 800;
        color: #072f5f;
        margin-bottom: 8px;
    }

    .api-header p {
        color: #1a2b6a;
        opacity: 0.85;
        font-size: 1.15rem;
        margin-bottom: 0;
    }

.api-features {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}

.api-feature {
    background: rgb(48, 95, 157);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(2,10,35,0.18);
    padding: 24px 18px;
    min-width: 220px;
    max-width: 320px;
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform .18s, box-shadow .18s;
    color: #f7fafc;
}

    .api-feature:hover, .api-feature:focus {
        transform: translateY(-6px) scale(1.03);
        box-shadow: 0 14px 36px rgba(2,10,35,0.18);
    }

.api-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #ffefc2, #ffd67a);
    color: #072f5f;
    box-shadow: 0 4px 12px rgba(255,183,3,0.10);
}

.api-feature h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.api-feature p {
    color: #e0e6ef;
    opacity: 0.95;
    font-size: 1rem;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .api-features {
        flex-direction: column;
        gap: 18px;
        align-items: center;
    }

    .api-card {
        padding: 18px 8px;
    }
}

/* Seção Principal */
.ss-segments-main {
    padding: 80px 20px;
    background-color: #ffffff;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

.ss-container {
    max-width: 1200px;
    margin: 0 auto;
}

.ss-header-center {
    text-align: center;
    margin-bottom: 60px;
}

/* Título Geral */
.ss-section-title {
    font-size: clamp(28px, 4vw, 36px);
    color: #072f5f;
    font-weight: 900;
    margin-bottom: 15px;
}

    .ss-section-title span {
        color: #0a4da2;
    }

/* MELHORIA NOS TÍTULOS DOS CARDS (MAIS DESTAQUE) */
.ss-card-title {
    color: #072f5f !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    margin-bottom: 20px !important;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.05); /* Leve sombra para profundidade */
}

/* Grid e Card */
.ss-segments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.ss-segment-card {
    background: #D3D3D3;
    padding: 40px 30px;
    border-radius: 24px;
    border: 1px solid #eef2f6;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(7, 47, 95, 0.04);
}

    .ss-segment-card:hover {
        transform: translateY(-10px);
        border-color: #ffb703;
        box-shadow: 0 20px 40px rgba(7, 47, 95, 0.1);
    }

.ss-segment-icon {
    font-size: 52px;
    margin-bottom: 25px;
}

/* Estilo das Listas */
.ss-segment-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

    .ss-segment-card ul li {
        font-size: 15px;
        color: #444;
        margin-bottom: 15px;
        line-height: 1.5;
        position: relative;
        padding-left: 25px;
    }

        .ss-segment-card ul li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #ffb703;
            font-weight: 900;
        }

.ss-segment-card strong {
    color: #072f5f;
    font-weight: 700;
}

/* Controle de Exibição */
.ss-hide {
    display: none;
}

/* Botão Clique e Saiba Mais */
.ss-btn-show-more {
    margin-top: 20px;
    padding: 12px 28px;
    border: 2px solid #ffb703;
    background: transparent;
    color: #072f5f;
    border-radius: 50px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

    .ss-btn-show-more:hover {
        background: #ffb703;
        color: #fff;
    }

/* Ajuste do Botão Pulsante (Margin Top adicionado) */
.button-container {
    margin-top: 60px !important; /* Espaço entre os cards e o botão */
}

@media (max-width: 900px) {
    .modern-navbar-menu.open {
        position: fixed !important;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: calc(100vh - 64px);
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 1200;
        border-radius: 0 0 18px 18px;
        background: #181c2a;
        box-shadow: 0 8px 32px rgba(0,0,0,0.25);
        display: flex;
        flex-direction: column;
        animation: fadeIn .3s;
    }

        .modern-navbar-menu.open .navbar-btn-status {
            display: block !important;
            width: 90%;
            margin: 0 auto 12px auto;
            text-align: center;
            font-size: 1.13rem;
            padding: 13px 0;
            box-sizing: border-box;
        }
}