:root {
            --unimed-green: #007b31;
            --unimed-dark: #00633C;
            --navbar: #ffffff;
            --nav-link: #332c5c;
            --allcare-purple: #1c2c59;
            --allcare-purple-: #5fb88f;
            --allcare-purple-dark: #5394b2;
            --allcare-pink: #c600d2;
            --allcare-pink-clear: #eef4ff;
            --text-dark: #181818;
            --text-black: #3d3d3d;
            --text-shadow: #0201031a;

            --whatsapp: #00D45E;
            /* Amil */
            --1: #4200FF;
            /* Unimed */
            --26: #00995D;
            /* Unimed Guarulhos */
            --52: #00995D;
            /* Unimed Os Bandeirantes */
            --31: #00995D;
            /* Unimed Fortaleza */
            --30: #00995D;
            /* Med Senior */
            --42: #006633;
            /* São Camilo */
            --49: #e1251b;
            --s1-saude-primary: #2A1E97;
            /* S1 Saúde */
            --12: #FF05B5;
            /* São Cristóvão Saúde */
            --14: #00A7A3;
            --sao-cristovao-secondary: #1B306D;
            /* 	Integral Saúde */
            --6: #DF5A28;
            --unihosp: #00AA29;
            /* 	Samp */            
            --13: #03B0DA;
            /* 	Blue Med */
            --4: #1D9BD7;
            /* 	Assim Saúde */            
            --2: #1D9BD7;
            --leve-saude-primary: #4C1A46;
            --leve-saude-secondary: #FD3E00;
            --smile: #0061A8;
            --ameplan-primary: #2A1E97;
            /* 	Ameplan */
            --28: #E21B22;
            /* 	benevida */
            --20: #06CD9A;
            --gndi-primary: #FA4D09;
            /* 	hapvida */
            --5: #005BB9;
            --ativia-primary: #C31312FF;
            --ativia-secondary: #E8B42AFF;
            --sao-bernardo-primary: #0052A0;
            --sao-bernardo-secondary: #BD0D12;
            --humana-saude-primary: #0a0a66ff;
            --humana-saude-secondary: #F9A61AFF;
            --total-medcare-primary: #072F63;
            --total-medcare-secondary: #DF8E05;
            --klini: #34d0ad;
            --santa-casa-maua: #f55a03ff;
            --pessoal-saude-primary: #153657ff;
            --pessoal-saude-secondary: #50b9d3ff;
            --uniodonto:#8e2140;

        }

        body {
            font-family: 'Georama', sans-serif;
            color: var(--text-dark);
            overflow-x: hidden;
            background-color: #f8fafc;
        }

        h1, h2, h3, h4 {
            font-family: 'MuseoModerno', sans-serif;
            font-weight: 700;
        }

        h2 {
            color: var(--text-black);
        }

        .mini-titulo{
            color: var(--text-black);
        }
        .icons{
            color: var(--allcare-purple);
        }
        .fwp-bold {
            font-weight:600!important;
        }

        .border-primary{
            border-color: var(--allcare-purple) !important;
        }

        /* Header */
        .navbar {
            background: var(--navbar) !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            padding: 0.8rem 0;
        }
        .nav-link {
            color: var(--nav-link) !important;
            font-weight: 600;
            margin: 0 10px;
            transition: opacity 0.2s;
        }
        .nav-link:hover {
            opacity: 0.8;
        }
        /* Força o Header a manter tudo em uma linha em telas muito pequenas */
        .navbar > .container {
            flex-wrap: nowrap !important;
        }

        /* Estilo padrão dos logos (Desktop/Tablet) */
        .logo-entidade {
            height: 35px;
            width: auto;
        }

        .logo-allcare {
            height: 30px;
            margin-left: 20px;
            width: auto;
        }

        /* --- AJUSTE PARA TELAS < 418px --- */
        @media (max-width: 418px) {
            /* Diminui o tamanho dos logos para caber na linha */
            .logo-entidade {
                height: 22px !important;
            }
            
            .logo-allcare {
                height: 26px !important;
                margin-left: 10px !important; /* Reduz o espaço entre os logos */
            }

            /* Reduz o padding do container para ganhar mais alguns pixels nas bordas */
            .navbar > .container {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

            /* Ajusta o tamanho do botão sanduíche se necessário */
            .navbar-toggler {
                padding: 4px 8px !important;
                font-size: 1rem !important;
            }
        }
        /* Garante que o menu ocupe a largura total e quebre a linha ao abrir */
        .navbar-collapse {
            flex-basis: 100%;
            flex-grow: 1;
            align-items: center;
        }

        /* Ajuste específico para quando o Flex-Wrap está desativado no container */
        @media (max-width: 991px) {
            .navbar > .container {
                flex-wrap: wrap !important; /* Permite que o conteúdo interno quebre linha */
            }

            /* Mas mantemos os logos e o botão na mesma linha física */
            .navbar-brand {
                display: flex;
                flex: 1; /* Faz o logo ocupar o espaço disponível */
            }

            .navbar-toggler {
                margin-left: auto; /* Garante que o botão fique na direita */
            }

            /* Estilização do menu aberto para não ficar espremido */
            .navbar-collapse.show, 
            .navbar-collapse.collapsing {
                margin-top: 15px;
                padding-bottom: 15px;
                border-top: 1px solid rgba(0,0,0,0.05); /* Linha sutil de separação */
            }

            .navbar-nav {
                padding-top: 10px;
            }
        }
        .btn-whatsapp-top {
            background-color: var(--unimed-green) !important;
            color: var(--navbar) !important;
            border-radius: 50px;
            font-weight: 700;
            padding: 8px 20px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .btn-whatsapp-top:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }

        .btn-whatsapp-bottom {
            background-color: var(--navbar) !important;
            color: var(--unimed-green) !important;
            border-radius: 50px;
            font-weight: 700;
            padding: 8px 20px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .btn-whatsapp-bottom:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }

        /* Hero */
        .hero-section {
            height: 591px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        #home { 
            height: 591px !important; 
        }

        /* Imagem de fundo estilo Background */
        .hero-bg-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        /* Overlay do Gradiente */
        .hero-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.3); /* Película sutil */
            z-index: 2;
        }
        /* Cores Unimed nos Controles */
        .carousel-control-prev-icon, .carousel-control-next-icon {
            background-color: var(--allcare-purple) !important;
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
        }

        .carousel-indicators [button] {
            background-color: var(--allcare-purple) !important;
        }
        /* Estilo das Setas (Cores Unimed) */
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: var(--allcare-purple) !important;
            border-radius: 50%;
            padding: 20px;
            background-size: 50%;
        }

        .carousel-indicators [button] {
            background-color: var(--allcare-purple) !important;
        }
        .text-primary{
            color:#ffffff !important;
        }
        .text-color{
            color:#ffffffd5 !important;
        }
        .text-space{
            padding-top:200px !important;
        }
        .btn-primary-custom {
            background: var(--allcare-purple);
            border: none;
            border-radius: 50px;
            color: white;
            padding: 15px 35px;
            font-weight: 700;
            font-size: 1.1rem;
            transition: transform 0.4s;
        }
        .btn-primary-custom:hover {
            background: var(--allcare-purple-dark);
            border: none;
            border-radius: 50px;
            color: white;
            padding: 15px 35px;
            font-weight: 700;
            font-size: 1.1rem;
            transition: transform 0.4s;
        }

        .btn-primary-light {
            background: var(--allcare-purple);
            border: none;
            border-radius: 50px;
            color: white;
            padding: 8px 20px;
            font-weight: 700;
            font-size: 1.1rem;
            transition: transform 0.4s;
        }
        .btn-primary-light:hover {
            background: var(--allcare-purple-dark);
            border: none;
            border-radius: 50px;
            color: white;
            padding: 8px 20px;
            font-weight: 700;
            font-size: 1.1rem;
            transition: transform 0.4s;
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }
        
        .btn-primary-line {
            background: transparent;
            color: var(--cor-operadora);
            border: solid 2px var(--cor-operadora);   
            border-radius: 50px;
            padding: 8px 20px;
            font-weight: 700;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .btn-primary-line.active {
            background: var(--cor-operadora) !important;
            color: #ffffff !important;
        }
        .btn-primary-line:hover {
            background: var(--cor-operadora);
            color: #ffffff;
        }
 

        /* Cards */
        .organic-card {
            background: white;
            border-radius: 20px;
            padding: 25px;
            border: 1px solid #f0fdf4;
            transition: all 0.3s ease;
            height: 100%;
        }
        .organic-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0, 153, 93, 0.1);
        }
        .premium-card {
            background: white;
            border-radius: 24px;
            padding: 30px;
            text-align: center;
            border: none;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            text-decoration: none;
            display: block;
            color: inherit;
        }
        .premium-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px var(--text-shadow);
        }

        /* CTA Section */
        .cta-container {
            background: linear-gradient(135deg, var(--allcare-pink) 0%, var(--allcare-purple) 100%);
            border-radius: 40px;
            overflow: hidden;
            color: white;
            position: relative;
        }
        .cta-img {
            border-radius: 30px;
            border: 8px solid rgba(255,255,255,0.1);
            object-fit: cover;
            width: 100%;
            height: 400px;
        }

        /* Footer */
        /* Customizações para o novo Footer */
        .footer-modern {
            background-color: var(--allcare-purple);
            color: white;
        }

        .footer-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: white;
            margin-bottom: 1.5rem;
        }

        .footer-link-modern {
            color: rgba(255, 255, 255, 0.8) !important;
            text-decoration: none;
            transition: color 0.2s;
            font-size: 0.95rem;
        }

        .footer-link-modern:hover {
            color: white !important;
            text-decoration: underline;
        }

        .footer-copy p {
            line-height: 1.5;
            margin-bottom: 0.8rem;
        }

        /* Container para garantir o arredondamento perfeito com o border */
        .img-container-sobre {
            border-radius: 40px; 
            overflow: hidden;
        }

        .img-sobre-custom {
            width: 90%;
            /* Define uma altura que seja pouca coisa maior que o bloco de texto */
            height: 380px; 
            object-fit: cover; /* Corta a imagem sem distorcer para caber na altura */
            object-position: center;
            border-radius: 40px !important;
        }

        /* No mobile, voltamos para altura automática para não cortar demais */
        @media (max-width: 991px) {
            .img-sobre-custom {
                height: auto;
                max-height: 300px;
            }
        }

        /* Reutilizando sua ans-box já existente mas com ajuste de alinhamento */
        .ans-box {
            display: inline-block;
            background: #000;
            border: 1px solid #fff;
            padding: 2px 8px;
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            text-align: left; /* Garante o alinhamento do texto interno */
        }

@media (min-width: 768px) {
    .ans-box {
        text-align: right; /* Alinha à direita no desktop */
    }
}

/* Ajuste para mobile: se quiser centralizar apenas no celular, use: */
@media (max-width: 991px) {
    /* Opcional: remover o alinhamento à direita no mobile se o rodapé for centralizado */
    /* .d-flex.flex-column { align-items: center !important; } */
}
        @keyframes bounceSubtle {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        .float-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background-color: #25D366;
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            z-index: 1000;
            animation: bounceSubtle 3s infinite ease-in-out;
            border: 4px solid white;
        }

        /* RdStation */
        /* No Desktop (Acima de 992px) */
        @media (min-width: 992px) {
            /* O Carrossel é o pai relativo */
            #home {
                position: relative;
                z-index: 1;
            }

            /* O formulário vira absoluto e "sobe" sozinho */
            .form-fixed-overlay {
                position: absolute !important;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 10;
                padding-top: 85px !important;
                margin-top: 0 !important; /* Removemos a margem negativa que causa o erro */
                pointer-events: none; /* Deixa as setas do carrossel clicáveis */
            }

            /* O conteúdo interno do form volta a ter clique */
            .form-overlay {
                pointer-events: auto;
                margin-top: -16px
            }

            /* Centraliza o formulário verticalmente dentro dos 591px do banner */
            .form-fixed-overlay .row {
                height: 100%;
                align-items: center; /* Isso substitui a necessidade de margem negativa */
            }
        }

        .form-fixed-overlay {
            position: absolute;
            top: 44px;
            left: 0;
            width: 100%;
            height: 100%;
            margin-top:-15px !important;
            z-index: 10; /* Garante que o form fique acima de tudo */
            pointer-events: none; /* Deixa os cliques passarem para os botões do banner se necessário... */
        }

        /* Reativa cliques apenas para o formulário */
        .form-fixed-overlay .form-overlay {
            pointer-events: auto;
        }

        #rd-form-l6xsqyjp .bricks-form__field {
            position: relative !important;
            margin-bottom: 20px !important;
        }
        #rd-form-l6xsqyjp label.error {
            position: absolute !important;
            bottom: -18px !important;
            left: 4px !important;
            margin: 0 !important;
            white-space: nowrap !important;
        }
        .bricks-form__input{
            border: 1px solid var #cccccc !important;
            box-shadow: 0 0 0 0; outline: 0 !important;
            padding: 23px !important;
            border-radius: 8px !important;
        }
        #rd-email_field-msonncwy{
            border-radius: 8px !important;

        }
        #rd-form-m7nqqtxu .bricks-form__input{
            border-radius: 8px !important;
        }
        .bricks-form__submit{
            margin-top: -15px !important;
        }
        .bricks-form__label {
            display: none !important;
        }
            input::placeholder {
            color: #A1A0A0 !important;
            font-size: .8rem !important;
            opacity: 1 !important;
        }
        #rd-button-m7nqqtxx{
            background-color: var(--allcare-purple) !important;
            border: 1px solid var(--allcare-purple) !important;
            color: #FFF !important;
            font-weight: 600 !important;
            font-size: 15px !important;
        }
        #rd-button-m7nqqtxx:hover{
            background: var(--allcare-purple-dark)!important;
            transition: transform 0.4s !important;
        }

        #rd-static_text-msonncx1{
            color: #A1A0A0 !important;
            font-size: .8rem !important;
            margin-top: 6px !important;
        }
        .bricks-form__static {
            display: flex !important;
            align-items: flex-start; /* Alinha o checkbox com a primeira linha do texto */
            gap: 12px; /* Esta é a forma mais moderna de controlar o espaço entre eles */
        }

        .rd-checkbox-termo {
            margin: 0 !important; /* Remove as margens antigas para usar o gap do flex */
            flex-shrink: 0; /* Impede que o checkbox "esmague" se o texto for grande */
            margin-top: 4px !important; /* Ajuste fino para alinhar com o topo da letra */
        }

        #rd-text_field-mddiqpe1{
            display:none !important;
        }
        #s2id_autogen1{
            display:none !important;
        }
        #s2id_autogen3{
            display:none !important;
        }
        #s2id_autogen4{
            display:none !important;
        }
        #s2id_autogen6{
            display:none !important;
        }
        #s2id_autogen9{
            display:none !important;
        }
        .js-field-cf_mensagem{
            display: none !important
        }
        .bricks-form__label{
        display: none !important;
        }
        .phone{
            width:100% !important;
            color: #A1A0A0 !important;
            font-size: .8rem !important;
            padding: 23px !important;
            border-radius: 8px !important;
        }
            html body #rd-form-l6xsqyjp .with-select-flags > .phone-input-group > .phone {
            border-top-left-radius: 8px !important;
            border-bottom-left-radius: 8px !important;
        }
        .bricks-form__input {
    border: 1px solid #cccccc !important; /* Corrigido a palavra 'var' */
    box-shadow: 0 0 0 0; 
    outline: 0 !important;
    padding: 23px !important;
    border-radius: 8px !important;
}

/* 2. Forçar ocultamento de todo o bloco da bandeira/select2 */
#rd-form-m7nqqtxu .phone-country,
#rd-form-m7nqqtxu .select2-container,
#rd-form-m7nqqtxu .country-field,
.phone-input-group .phone-country,
.phone-input-group .select2-container {
    display: none !important;
}

/* 3. Forçar 100% de largura e bordas arredondadas nos 4 cantos do Input de Celular */
html body #rd-form-m7nqqtxu .with-select-flags > .phone-input-group > .phone,
html body #rd-phone_field-msonncwz,
html body .phone-input-group input.phone {
    width: 100% !important;
    border-radius: 8px !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}
        #rd-form-l6xsqyjp{
            border-top-left-radius: 8px !important;
            border-bottom-left-radius: 8px !important;
        }
        #rd-column-l6xsqyjo > div {
            background-color: transparent !important;
            margin-top:-40px !important;
        }

        #formulario-caasp-projetos-especiais-e5d6e42d13f1d2e49980{
            height:370px !important;
            background-color: transparent !important;
        }
        #rd-section-l6xsqyji{
            background-color: transparent !important;
        }

        .phone-input-group .select2-container .select2-choice,
        .phone-input-group .phone-country,
        .phone-input-group .select2-container {
            border-top-left-radius: 8px !important;
            border-bottom-left-radius: 8px !important;
        }

        /* Garante o arredondamento no lado esquerdo caso o select esteja oculto e só o input apareça */
        .phone-input-group input.phone,
        .phone-input-group .bricks-form__input {
            border-top-left-radius: 8px !important;
            border-bottom-left-radius: 8px !important;
        }

        #rd-form-m7nqqtxu .with-select-flags > .phone-input-group > .phone {
            border-top-left-radius: 8px !important;
            border-bottom-left-radius: 8px !important;
        }

        /* 2. Caso o Select2 (bandeira) reapareça, força a borda esquerda dele também */
        #rd-form-m7nqqtxu .with-select-flags > .phone-input-group > .select2-container > .select2-choice {
            border-top-left-radius: 8px !important;
            border-bottom-left-radius: 8px !important;
        }

        /* 1. Esconde completamente o bloco da bandeira/país */
        #rd-form-m7nqqtxu .phone-country,
        #rd-form-m7nqqtxu .select2-container,
        #rd-form-m7nqqtxu .country-field {
            display: none !important;
        }

        /* 2. Reseta o campo de celular para ocupar 100% e arredonda o lado esquerdo */
        #rd-form-m7nqqtxu .with-select-flags > .phone-input-group > .phone,
        #rd-phone_field-msonncwz {
            width: 100% !important;
            border-top-left-radius: 8px !important;
            border-bottom-left-radius: 8px !important;
        }

        /* Ajuste essencial para o Swiper aceitar elementos "fora" da caixa */
        .swiperDiferenciais {
            overflow: hidden !important; /* Voltamos para hidden para evitar scroll estranho */
            position: relative;
            padding-bottom: 35px !important; /* Reduzido de 60px para 35px (espaço apenas para as bolinhas) */
            margin-top: 20px;
        }
        .swiperDiferenciais .swiper-wrapper {
            padding-top: 10px !important;
            padding-bottom: 15px !important; /* Espaço para a sombra do card não ser cortada */
        }

        /* Ajuste das bolinhas para ficarem mais próximas dos cards */
        .swiperDiferenciais .swiper-pagination {
            bottom: 0px !important;
        }

        /* Removemos o excesso de padding do container pai que o Bootstrap coloca */
        #diferenciais-allcare .container {
            padding-top: 2rem !important;
            padding-bottom: 1rem !important;
        }

        /* Estilização Geral das Setas */
        .custom-swiper-prev, 
        .custom-swiper-next {
            position: absolute !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 45px !important;
            height: 45px !important;
            background: none;
            border: none;
            z-index: 100;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        /* Ícone Interno (Círculo Verde) */
        .custom-swiper-prev .carousel-control-prev-icon,
        .custom-swiper-next .carousel-control-next-icon {
            background-color: var(--unimed-green) !important;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            background-size: 50%;
        }

        /* Posicionamento Desktop (Fora do grid) */
        @media (min-width: 1200px) {
            .custom-swiper-prev { left: -60px !important; }
            .custom-swiper-next { right: -60px !important; }
        }

        /* Posicionamento Tablet/Mobile (Dentro com margem) */
        @media (max-width: 1199px) {
            .swiperDiferenciais {
                overflow: hidden !important; /* Evita scroll lateral no mobile */
            }
            .custom-swiper-prev { left: 0px !important; }
            .custom-swiper-next { right: 0px !important; }
        }

        /* Cor das bolinhas ativas */
        .swiper-pagination-bullet {
            width: 12px !important;
            height: 12px !important;
            opacity: 0.5 !important;
            background: #A1A0A0 !important; /* Cor cinza para as inativas */
            margin: 0 6px !important; /* Espaçamento horizontal entre elas */
            transition: all 0.3s ease; /* Transição suave quando mudar */
        }

        /* Cor e Tamanho da bolinha ATIVA */
        .swiper-pagination-bullet-active {
            width: 14px !important; /* Um pouco maior que as outras */
            height: 14px !important;
            background: var(--allcare-purple) !important;
            opacity: 1 !important;
        }
        /* Estilo da nova seção de Rede Assistencial */
        .rede-card {
            padding: 20px;
            background: transparent;
            transition: transform 0.3s ease;
        }

        .rede-card:hover {
            transform: translateY(-10px);
        }

        .rede-icon {
            height: 75px; /* Tamanho consistente para todos os ícones */
            width: auto;
            filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.1));
        }

        .rede-number {
            color: var(--allcare-purple);
            font-family: 'MuseoModerno', sans-serif;
            font-weight: 700;
            font-size: 2.2rem;
            margin-bottom: 5px;
        }

        .rede-text {
            color: var(--nav-link);
            font-size: 1.1rem;
            font-weight: 500;
            line-height: 1.2;
        }

        /* Ajuste para mobile (2 itens por linha) */
        @media (max-width: 991px) {
            .rede-number {
                font-size: 1.8rem;
            }
            .rede-text {
                font-size: 0.95rem;
            }
            .rede-icon {
                height: 50px;
            }
        }
        /* --- Seção Diferenciais Unimed (Grid de 5 colunas) --- */

        /* Regra para criar as 5 colunas iguais no Desktop */
        @media (min-width: 992px) {
            .col-lg-2-4 {
                flex: 0 0 auto;
                width: 20%; /* Divide 100% por 5 */
            }
        }

        /* Container principal do card */
        .card-unimed-foto {
            background: white;
            border-radius: 8px !important;
            overflow: hidden;
            height: 100%; /* Garante que o card ocupe a altura da coluna */
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            transition: transform 0.3s ease;
            border: none;
            margin-bottom: 10px;
        }

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

        /* Área da Imagem - Ajustada para 200px para caber melhor em 5 colunas */
        .card-img-wrapper {
            width: 100%;
            height: 200px; 
            overflow: hidden;
        }

        .card-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .card-unimed {
            background-color: var(--unimed-green);
            text-align: center;
            flex-grow: 1; /* Força o preenchimento para alinhar os boxes */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Rodapé Verde (Legenda) */
        .card-unimed-footer {
            background-color: var(--unimed-green);
            padding: 15px 10px;
            text-align: center;
            flex-grow: 1; /* Força o preenchimento para alinhar os boxes */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-unimed-footer h5 {
            color: white !important;
            font-size: 0.95rem; /* Reduzi levemente para não apertar em telas menores */
            font-weight: 600;
            margin: 0;
            line-height: 1.2;
        }

        /* Ajuste específico para Mobile para não ficar muito pequeno */
        @media (max-width: 576px) {
            .card-img-wrapper {
                height: 250px; /* Foto um pouco maior no celular */
            }
            .card-unimed-footer h5 {
                font-size: 1.1rem;
            }
        }
        /* Garante que os ícones tenham uma cor visível e tamanho adequado */
        .footer-link-modern i, .nav-link i {
            color: #ffffff; /* Ajuste para a cor do seu rodapé */
            font-size: 1.1rem;
            vertical-align: middle;
        }

        /* Efeito de hover nos ícones */
        .footer-link-modern:hover i {
            transition: 0.3s;
        }
    .swiperUnimed {
        overflow: visible !important; /* Para as setas aparecerem fora no desktop */
        padding-bottom: 50px !important;
    }

    .swiperUnimed .swiper-slide {
        height: auto; /* Mantém a altura baseada no conteúdo */
    }

    
    /* O Card Branco Principal - Agora respeita o container */
    .card-operadoras-container {
        background-color: #ffffff;
        border-radius: 20px; /* Mantendo seu padrão de 8px */
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        padding: 3rem 1.5rem;
        width: 100%;
    }

    .operadoras-header {
        text-align: center;
    }

    /* Logos e Efeitos */
    .parceiro-hover-wrapper {
        padding: 1rem;
    }

    .logo-parceiro-estilizado {
        max-height: 60px;
        width: auto;
        object-fit: contain;
        /* Efeito de tons de cinza inicial */
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        opacity: 0.6;
        transition: all 0.4s ease-in-out;
    }

    .parceiro-hover-wrapper:hover .logo-parceiro-estilizado {
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.08);
    }

    /* Ajuste das 5 colunas para o grid interno */
    @media (min-width: 992px) {
        .col-lg-2-4 {
            flex: 0 0 auto;
            width: 20% !important;
        }
    }

    @media (max-width: 576px) {
        .logo-parceiro-estilizado {
            max-height: 45px;
        }
        .card-operadoras-container {
            padding: 2rem 1rem;
        }
    }
    /* Container do Smartphone */
    .smartphone-container {
        position: relative;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        border-radius: 35px;
        overflow: hidden;
        line-height: 0;
        cursor: pointer;
        background: #000;
    }

    .video-interno {
        position: absolute;
        top: 5px;
        left: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 10px);
        object-fit: cover;
        z-index: 1;
        border-radius: 25px;
        /* Aceleração de hardware para evitar tela preta */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        opacity: 1;
    }

    .smartphone-frame {
        position: relative;
        z-index: 2;
        pointer-events: none; /* Deixa o clique passar direto para o vídeo */
    }

    /* Estilo base da overlay (Como ela aparece quando o vídeo está pausado) */
    .video-overlay {
        position: absolute;
        top: 5px;
        left: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 10px);
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4); /* Escurece um pouco o vídeo parado */
        color: #fff;
        font-size: 60px;
        z-index: 2; /* Fica acima do vídeo (1) e abaixo do frame (3) */
        border-radius: 25px;
        transition: all 0.3s ease; /* Efeito suave ao sumir/aparecer */
        pointer-events: auto; /* Permite clicar nela para dar play */
    }

    /* REGRA CRÍTICA: O que acontece quando o JS adiciona a classe .play-hidden */
    .video-overlay.play-hidden {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important; /* Deixa o clique passar para o vídeo quando sumir */
    }

    /* Efeito de pulso no ícone para chamar atenção (Opcional) */
    .video-overlay i {
        filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
        animation: pulse-play 2s infinite;
    }

    @keyframes pulse-play {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

    /* Overlay do Botão Play */
    .play-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.2); /* Escurece levemente o vídeo parado */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        transition: opacity 0.3s ease;
    }

    .play-overlay img {
        width: 60px; /* Tamanho da sua imagem de play */
        height: auto;
    }

    /* Classe para esconder o play quando o vídeo rodar */
    .play-hidden {
        opacity: 0;
        pointer-events: none;
    }
    .video-interno[poster] {
        object-fit: cover;
        z-index: 1; /* Fica no mesmo nível do vídeo */
    }

    /* Opcional: Se o poster ainda parecer desalinhado, você pode aplicar o mesmo object-fit a ele explicitamente */
    video::poster {
        object-fit: cover;
    }


    /* --- Estilização Depoimentos --- */

    .card-depoimento {
        background: #ffffff;
        padding: 2.5rem;
        border-radius: 12px;
        border-left: 5px solid var(--allcare-purple); /* Substituindo o roxo pelo verde Unimed */
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        height: 100%;
        position: relative;
        transition: transform 0.3s ease;
    }

    .quote-icon {
        font-size: 2.5rem;
        color: var(--allcare-pink-clear);
        opacity: 0.2;
        position: absolute;
        top: 15px;
        right: 20px;
    }

    .texto-depoimento {
        color: #555;
        font-size: 1.05rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
        font-style: italic;
    }

    .cliente-info {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .cliente-avatar {
        width: 45px;
        height: 45px;
        background: var(--allcare-purple);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 0.9rem;
    }

    /* Botões de navegação */
    .btn-outline-unimed {
        border-color: var(--allcare-purple);
        color: var(--allcare-purple);
        border-radius: 50%;
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
    }

    .btn-outline-unimed:hover {
        background: var(--allcare-purple);
        color: white;
    }
    /* Container das operadoras */
    .swiperSelecaoOp {
        padding: 20px 10px !important; 
        width: 100%;
        overflow: hidden;
    }

    /* Centraliza os logos quando há poucos itens e impede que estiquem */
    .swiperSelecaoOp .swiper-wrapper {
        display: flex !important;
        justify-content: center !important; /* Centraliza o grupo de logos */
    }

    /* Garante que o slide não mude de tamanho */
    .swiperSelecaoOp .swiper-slide {
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        /* No Desktop, cada slide deve ter no máximo 1/5 do container (menos o gap) */
        max-width: 220px; 
    }

    /* Se tiver menos de 5 logos, removemos a paginação visualmente para garantir */
    .swiperSelecaoOp .swiper-pagination-lock {
        display: none !important;
    }

    /* Se houver muitos itens, o Swiper volta ao comportamento padrão */
    .swiperSelecaoOp .swiper-wrapper.swiper-wrapper-android, 
    .swiperSelecaoOp .swiper-wrapper.swiper-wrapper-ios {
        justify-content: flex-start;
    }

    /* --- Estilo dos Botões (Logos) --- */
    .btn-select-operator {
        background: white;
        border: 2px solid #f0f0f0; /* Borda leve inicial */
        border-radius: 12px;
        padding: 15px;
        width: 100%;
        transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .btn-select-operator img {
        max-height: 50px;
        width: auto;
        object-fit: contain;
        /* Colorido por padrão */
        filter: grayscale(0%);
        opacity: 1;
        transition: all 0.2s ease;
    }

    /* --- Estado de Seleção e Hover --- */
    .btn-select-operator:hover, 
    .btn-select-operator[aria-expanded="true"] {
        border: 2px solid var(--allcare-purple) !important;
        transform: translateY(-8px); /* Sobe um pouco mais para destaque */
        box-shadow: 0 12px 25px rgba(51, 44, 92, 0.18);
        z-index: 10;
    }

    /* --- Lógica de Foco (Efeito Holofote) --- */

    /* Quando o wrapper TEM uma operadora ativa, todos os logos "apagam" */
    .swiper-wrapper.has-active .btn-select-operator img {
        filter: grayscale(100%);
        opacity: 0.3;
    }

    /* EXCETO a operadora que está com o conteúdo aberto (aria-expanded="true") */
    .swiper-wrapper.has-active .btn-select-operator[aria-expanded="true"] img {
        filter: grayscale(0%);
        opacity: 1;
    }

    /* --- Card de Detalhes (Conteúdo que abre) --- */
    .card-detalhe-operadora {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        animation: fadeInSlide 0.5s ease-out forwards;
    }

    .badge-promo {
        position: absolute;
        top: 20px;
        left: 20px;
        color: white;
        padding: 8px 18px;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 700;
        z-index: 10;
        box-shadow: 0 4px 10px rgba(138, 138, 138, 0.3);
    }

    @keyframes fadeInSlide {
        from { 
            opacity: 0; 
            transform: translateY(30px); 
        }
        to { 
            opacity: 1; 
            transform: translateY(0); 
        }
    }

    /* --- Tabs Internas (Pills) --- */
    .nav-pills .nav-link {
        color: #666;
        background: #f4f4f4;
        font-weight: 600;
        border-radius: 8px;
        margin-right: 5px;
        transition: 0.3s;
    }

    .nav-pills .nav-link.active {
        background-color: var(--unimed-green) !important;
        color: white;
    }



    /* Container que envolve o conteúdo da API */
    .content-api-formatado {
        /* Força a fonte padrão do seu projeto */
        font-family: 'Open Sans', sans-serif !important; 
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
        color: #444 !important;
        text-align: left;
    }

    /* Garante que negritos feitos no banco fiquem destacados */
    .content-api-formatado strong, 
    .content-api-formatado b {
        color: #000 !important;
        font-weight: 700 !important;
        display: inline-block;
        margin-top: 10px;
    }

    /* Ajuste para parágrafos se você usar <p> no banco */
    .content-api-formatado p {
        margin-bottom: 15px !important;
    }

    /* Estilo para listas se você usar <ul> ou <ol> no banco */
    .content-api-formatado ul {
        padding-left: 1.2rem;
        margin-bottom: 1rem;
    }

    .content-api-formatado li {
        margin-bottom: 8px;
    }
    /* --- Ajuste para Imagem Preencher Totalmente a Div --- */

    .wrapper-imagem-operadora {
        /* Define uma altura mínima para o container no Desktop, 
        para garantir que ele tenha corpo mesmo se o texto ao lado for curto. 
        Ajuste conforme necessário (ex: 450px, 500px, 550px). */
        min-height: 500px; 
        height: 100%; /* Tenta preencher a altura da linha (row) */
    }

    .img-operadora-viva {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* O 'cover' é o segredo: ele faz a imagem preencher tudo 
        sem distorcer, cortando as bordas se necessário. */
        object-fit: cover; 
        object-position: center; /* Centraliza a família na visualização */
        z-index: 1; /* Fica atrás do badge */
    }

    /* --- Ajuste do Badge por cima da Imagem --- */

    .badge-operadora-detalhe {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 10; /* Z-index alto para ficar na frente da imagem */
        
        /* Outros estilos para garantir que o badge fique bonito */
        color: white;
        padding: 8px 18px;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 700;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Sombra para dar contraste */
        white-space: nowrap; /* Evita quebra de linha no badge */
    }

    /* Ajuste Responsivo para Mobile */
    @media (max-width: 991px) {
        /* Se você decidir mostrar a imagem no mobile, ela volta ao fluxo normal */
        .col-lg-5.d-lg-block {
            display: block !important;
            min-height: 300px;
            margin-bottom: 1.5rem;
        }
    }

    /* Forçamos a coluna do Bootstrap a se comportar como o container total */
    .wrapper-imagem-viva {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        min-height: 100%; /* Fundamental para acompanhar a coluna vizinha */
    }

    .img-cover-viva {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important; /* Agora ele vai ler os 100% da coluna esticada */
        
        object-fit: cover !important; 
        object-position: center center;
        z-index: 1;
        max-width: none !important;
    }

    .badge-viva-detalhe {
        position: absolute !important;
        top: 20px;
        left: 20px;
        z-index: 10;
        /* ... resto do seu estilo de badge ... */
    }

    /* Garante que o arredondamento funcione apenas do lado esquerdo no desktop */
    @media (min-width: 992px) {
        .wrapper-imagem-viva {
            border-top-left-radius: 1rem !important;
            border-bottom-left-radius: 1rem !important;
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }
    }

    /* --- Seção Oportunidade Infraero (Paleta Allcare) --- */

    .opportunity-section {
        background-image: url('../img/background-cra-ce.png'); 
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
    }

    /* Sobreposição: Degradê Suave e Translúcido */
    .opportunity-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Nova fórmula: Mais transparência e tons pastéis */
        /* Substituí o roxo escuro por um lilás claro e o rosa por um tom páli background: linear-gradient(135deg, rgba(235, 220, 255, 0.85) 0%, rgba(255, 235, 248, 0.75) 100%);do */
    
        z-index: 1;
    }

    .z-index-2 { z-index: 2; }

    /* Texto de destaque em Roxo Escuro (Para contraste no fundo claro) */
    /* Antes era branco, agora mudamos para roxo escuro para ser lido */
    .text-allcare-main {
        color: var(--text-dark); /* Roxo Escuro corporativo */
    }

    /* Texto secundário em Roxo Acinzentado */
    .text-allcare-secondary {
        color: #7a6c9e; /* Um tom mais suave e neutro */
    }
    .text-allcare{
        color: #912cf1
    }
    /* --- Estilo dos Cards de Benefícios --- */

    .benefit-card {
        background-color: #ffffff; /* Branco Puro */
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        border: 1px solid rgba(51, 44, 92, 0.05); /* Borda quase invisível */
        box-shadow: 0 10px 30px rgba(51, 44, 92, 0.03) !important; /* Sombra levíssima */
    }

    .benefit-card:hover {
        transform: translateY(-5px); /* Flutuação menor */
        box-shadow: 0 20px 50px rgba(51, 44, 92, 0.08) !important; /* Sombra suave no hover */
    }

    /* Caixa do Ícone com tom Pastél */
    .icon-box {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--allcare-pink-clear); /* Fundo lilás super pálido */
        border-radius: 15px;
    }

    /* Ícones usando o Roxo Corporativo */
    .icon-box i {
        color: var(--allcare-purple);
    }

    /* Títulos dos cards com o azul escuro original */
    .text-nav-link {
        color: #332c5c;
    }

    /* Pequena linha divisória opcional */
    .border-divider {
        border-bottom: 2px solid #e0d9ff;
        width: 60px;
        margin: 20px 0;
    }
    /* --- CTA Final Clean Style --- */

    .cta-container-clean {
        background-color: #ffffff; /* Fundo branco limpo */
        border: 1px solid #eee; /* Borda bem sutil */
        position: relative;
        overflow: hidden;
    }

    /* Botão WhatsApp Ajustado (Verde no fundo branco) */
    .btn-whatsapp-bottom {
        background-color: #25D366 !important;
        color: white !important;
        border: none;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-whatsapp-bottom:hover {
        background-color: #128C7E !important;
        transform: translateY(-3px);
    }

    /* Botão Telefone (Azul/Roxo Allcare no fundo branco) */
    .btn-phone-bottom {
        background-color: var(--allcare-purple) !important;
        color: white !important;
        border: none;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-phone-bottom:hover {
        background-color: var(--allcare-purple-dark) !important;
        transform: translateY(-3px);
    }

    /* Ajuste da imagem para o estilo clean */
    .cta-img-clean {
        border-radius: 24px;
        width: 100%;
        height: 350px;
        object-fit: cover;
        /* Removemos a borda grossa e branca para algo mais leve */
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    /* Ajuste para o título não grudar no mobile */
    @media (max-width: 991px) {
        .cta-container-clean {
            padding: 3rem 1.5rem !important;
        }
    }

    /* --- Seção Como Funciona com Background --- */

    .tutorial-card {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
        position: relative; /* Necessário para o background absoluto */
    }
    .border-success{
        border: 4px solid var(--allcare-purple)!important;
    }

    /* Configuração da Imagem de Fundo para o Passo 1 */
    .card-passo-1::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Caminho da imagem que criamos */
        background-image: url('../img/como-funciona/escolha-operadora.png'); 
        background-size: cover;
        background-position: center;
        /* Opacidade baixa para ficar clean e sutil como você gosta */
        opacity: 0.15; 
        z-index: 1;
        transition: opacity 0.3s ease;
    }

    /* No hover a imagem pode aparecer um pouco mais */
    .card-passo-1:hover::before {
        opacity: 0.25;
    }

    .z-index-2 {
        z-index: 2;
    }

    .tutorial-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
    }

    .tutorial-number {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-weight: 800;
        margin-bottom: 1rem;
        position: relative;
        z-index: 2;
    }

    .tutorial-title {
        position: relative;
        z-index: 2;

    }

    /* Cores auxiliares */
    .bg-soft-purple { background-color: var(--allcare-pink-clear); }
    .text-allcare { color: var(--allcare-purple) }

    /* --- Background Suave para o Passo 2 --- */

    /* Configuração da Imagem de Fundo para o Passo 2 (Cotação) */
    .card-passo-2::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Caminho da imagem que criamos (tablet e formulário) */
        background-image: url('../img/como-funciona/cotacao.png'); 
        background-size: cover;
        background-position: center;
        /* Opacidade baixa (15%) para ficar clean e sutil como você gosta */
        opacity: 0.15; 
        z-index: 1;
        transition: opacity 0.3s ease;
    }

    /* No hover a imagem pode aparecer um pouco mais */
    .card-passo-2:hover::before {
        opacity: 0.25;
    }

    /* --- Background Suave para o Passo 3 --- */

    /* Configuração da Imagem de Fundo para o Passo 3 (Atendimento/Videochamada) */
    .card-passo-3::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Caminho da imagem que criamos (notebook e videochamada) */
        background-image: url('../img/como-funciona/atendimento.png'); 
        background-size: cover;
        background-position: center;
        /* Opacidade baixa (15%) para ficar clean e sutil como você gosta */
        opacity: 0.15; 
        z-index: 1;
        transition: opacity 0.3s ease;
    }

    /* No hover a imagem pode aparecer um pouco mais */
    .card-passo-3:hover::before {
        opacity: 0.25;
    }
    /* --- Background Suave para o Passo 4 (Destaque) --- */

    /* Configuração da Imagem de Fundo para o Passo 4 (Contratação/Assinatura Digital) */
    .card-passo-4::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Caminho da imagem que criamos (tablet e assinatura digital) */
        background-image: url('../img/como-funciona/contratacao.png'); 
        background-size: cover;
        background-position: center;
        /* Opacidade baixa (15%) para ficar clean e sutil como você gosta */
        opacity: 0.15; 
        z-index: 1;
        transition: opacity 0.3s ease;
    }

    /* No hover a imagem pode aparecer um pouco mais */
    .card-passo-4:hover::before {
        opacity: 0.25;
    }

    /* --- Background Suave para o Passo 5 (Joyful) --- */

    /* Configuração da Imagem de Fundo para o Passo 5 (Bem-estar/Família) */
    .card-passo-5::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Caminho da imagem que criamos (família e bem-estar) */
        background-image: url('../img/como-funciona/aproveite-beneficios.png'); 
        background-size: cover;
        background-position: center;
        /* Opacidade baixa (15%) para ficar clean e sutil como você gosta */
        opacity: 0.15; 
        z-index: 1;
        transition: opacity 0.3s ease;
    }

    /* No hover a imagem pode aparecer um pouco mais */
    .card-passo-5:hover::before {
        opacity: 0.25;
    }

    /* Previne o scroll horizontal na seção de operadoras */
    #operadoras-parceiras {
        overflow-x: hidden;
        width: 100%;
    }

    /* Garante que o container do swiper respeite os limites */
    .swiperSelecaoOp {
        width: 100%;
        max-width: 100vw;
        padding-bottom: 30px !important; /* Espaço para a paginação */
    }

    /* Ajuste fino nos botões das operadoras no mobile */
    .btn-select-operator {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        background: #fff;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.05);
    }
    .mt-10 {
        margin-top:25px !important
    }
    /* --- Jornada de Cliente Allcare Inovadora --- */

    /* Estilo do Card Individual */
    .step-card {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 1px solid rgba(0,0,0,0.02) !important;
    }

    .step-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px var(--text-shadow) !important;
    }

    /* Container do Ícone */
    .step-icon-wrapper {
        position: relative;
        display: inline-block;
    }

    .step-icon-circle {
        width: 70px;
        height: 70px;
        border-radius: 20px; /* Estilo 'Squircle' */
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }

    /* Número Flutuante */
    .step-number-floating {
        position: absolute;
        top: -10px;
        right: -20px;
        font-size: 2.5rem;
        font-family: 'MuseoModerno', sans-serif;
        font-weight: 900;
        opacity: 0.1;
        color: var(--allcare-purple);
    }

    /* Card de Destaque (Passo 4) */
    .step-card-featured {
        background: linear-gradient(135deg, var(--allcare-purple) 0%, var(--allcare-purple-dark) 100%);
        position: relative;
        overflow: hidden;
    }

    /* Efeito de brilho no card de destaque */
    .step-card-featured::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        pointer-events: none;
    }

    /* Ajustes de cores e bordas */
    .bg-soft-purple { background-color: var(--allcare-pink-clear) !important; }
    .rounded-5 { border-radius: 2rem !important; }

    /* Mobile */
    @media (max-width: 768px) {
        .step-number-floating {
            font-size: 1.8rem;
            right: 0;
        }
    }
    /* Ajuste global para todos os números flutuantes (Lado Esquerdo) */
    .step-number-floating {
        position: absolute;
        top: -15px;
        left: 80px; /* Empurra para a direita do ícone */
        right: auto;
        font-size: 3rem;
        font-family: 'MuseoModerno', sans-serif;
        font-weight: 900;
        z-index: 1;
        pointer-events: none;
    }

    /* Cores específicas para os cards brancos */
    .step-card .step-number-floating {
        color: var(--allcare-purple);
        opacity: 0.1;
    }

    /* Cores específicas para o card de destaque (roxo) */
    .step-card-featured .step-number-floating {
        color: #fff;
        opacity: 0.2 !important;
    }

    /* Garante que o container do ícone seja a referência de posição */
    .step-icon-wrapper {
        position: relative;
        display: inline-block;
        z-index: 2;
    }

    .step-icon-circle {
        position: relative;
        z-index: 3; /* Ícone fica por cima do número */
    }
    /* --- Journey Vertical Flow --- */

    .journey-wrapper { padding: 40px 0; }

    /* Linha central */
    .journey-line {
        position: absolute;
        top: 0; bottom: 0;
        left: 50%;
        width: 2px;
        background: linear-gradient(to bottom, var(--allcare-purple), var(--allcare-pink), var(--allcare-purple));
        transform: translateX(-50%);
        z-index: 1;
        opacity: 0.2;
    }

    /* Círculo do Ícone */
    .journey-dot {
        width: 80px; height: 80px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.8rem;
        z-index: 5;
        position: relative;
        background-color: #fff;
        transition: transform 0.3s ease;
    }

    .journey-step:hover .journey-dot { transform: scale(1.1); }

    /* Números sobre o ícone */
    .step-num {
        position: absolute;
        top: -5px; right: -5px;
        font-size: 0.85rem;
        background: var(--allcare-purple);
        color: #fff;
        width: 25px; height: 25px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-weight: bold;
    }

    .step-num-featured {
        position: absolute;
        top: -5px; right: -5px;
        font-size: 0.85rem;
        background: var(--allcare-pink);
        color: #fff;
        width: 25px; height: 25px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }

    /* Estilo do Card V2 */
    .step-card-v2 {
        transition: all 0.3s ease;
        border: 1px solid rgba(0,0,0,0.03);
    }

    .step-card-v2:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
    }

    /* Bordas coloridas para indicar o lado no Desktop */
    @media (min-width: 992px) {
        .border-end-lg-allcare { border-right: 4px solid var(--allcare-purple) !important; }
        .border-start-lg-allcare { border-left: 4px solid var(--allcare-purple) !important; }
        .border-start-lg-unimed { border-left: 4px solid var(--allcare-purple) !important; }
    }

    /* Card Destaque Passo 4 */
    .step-card-featured-v2 {
        background: linear-gradient(135deg, var(--allcare-purple) 0%, var(--allcare-purple-dark) 100%);
        border: none;
        z-index: 6;
    }

    /* Mobile Adjustments */
    @media (max-width: 991px) {
        .journey-dot { margin-bottom: 20px; }
        .journey-step { text-align: center; }
        .step-card-v2 { border-bottom: 4px solid var(--allcare-purple) !important; }
    }

    /* --- Modern Step Cards Design --- */

    /* --- Modern Step Cards Design (ATUALIZADO) --- */

    .modern-step-card {
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Ajuste de transição mais suave */
        border: 1px solid rgba(0,0,0,0.02) !important;
        position: relative;
        overflow: hidden;
        background: #f8fafc; /* Definindo o fundo padrão explicitamente (bg-light) */
    }

    /* Hover padrão para os cards brancos/claros (Passos 1, 2, 3 e 5) */
    /* AJUSTE: Removemos o !important e adicionamos a negação :not() */
    .modern-step-card:not(.featured-step):hover {
        transform: translateX(10px);
        background: #ffffff; /* Fica branco puro */
        box-shadow: 0 15px 30px rgba(145, 44, 241, 0.08) !important;
    }

    /* Caixa do Número (Padrão) */
    .step-num-box {
        min-width: 60px;
        height: 60px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'MuseoModerno', sans-serif;
        font-weight: 800;
        font-size: 1.2rem;
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

    /* --- Card em Destaque (Passo 4) --- */
    .featured-step {
        background: linear-gradient(135deg, var(--allcare-purple) 0%, var(--allcare-pink) 100%) !important;
        transform: scale(1.02);
        z-index: 2;
        border: none !important;
    }

    /* AJUSTE: Hover específico para o card de destaque */
    .featured-step:hover {
        transform: scale(1.03) translateX(5px);
        /* Mantemos o gradiente original, apenas aumentando a sombra */
        box-shadow: 0 25px 50px rgba(145, 44, 241, 0.25) !important;
        /* Opcional: Um leve brilho interno no hover */
        background: linear-gradient(135deg, #a64dff 0%, #d91ad9 100%) !important; /* Cores 10% mais claras do gradiente */
    }

    /* Ajuste da caixa de número dentro do destaque */
    .featured-step .step-num-box {
        background: rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        backdrop-filter: blur(10px);
    }

    /* Badge Allcare Colors */
    .bg-soft-purple { background-color: var(--allcare-pink-clear) !important; }
    .border-allcare { border-color: var(--allcare-purple) !important; }

    /* Ajuste Mobile */
    @media (max-width: 991px) {
        .modern-step-card {
            flex-direction: column;
            text-align: left;
        }
        .step-num-box {
            margin-bottom: 1.5rem;
        }
        .featured-step {
            transform: none;
        }
        .featured-step:hover {
            transform: translateX(5px);
        }
    }
    /* Previne o estouro horizontal na seção de diferenciais */
    #diferenciais-allcare {
        overflow-x: hidden;
        width: 100%;
    }

    /* Garante que o swiper de benefícios ocupe apenas 100% da largura disponível */
    .swiperDiferenciais {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding-bottom: 40px !important; /* Espaço extra para as bolinhas da paginação */
    }

    /* Garante que os cards dentro do slide não forcem largura fixa exagerada */
    .swiperDiferenciais .premium-card {
        width: 100%;
        display: block;
    }
    /* Ajustes para telas entre 992px e 1399px (onde costuma quebrar) */
    @media (max-width: 1399px) and (min-width: 992px) {
        /* Diminui um pouco o tamanho dos logos no header */
        .navbar-brand img:first-child {
            height: 25px !important;
        }
        #logo {
            height: 35px !important; /* Ajuste conforme o tamanho original dele */
            margin-left: 15px !important; /* Reduz o espaço entre logos */
        }

        /* Diminui o tamanho da fonte e o espaçamento entre os links */
        .nav-link {
            font-size: 0.9rem !important;
            margin: 0 5px !important;
        }

        /* Ajusta o tamanho dos botões para caberem na linha */
        .btn-whatsapp-top, .btn-primary-light {
            padding: 6px 12px !important;
            font-size: 0.85rem !important;
        }
        
        /* Reduz a margem lateral que empurra os botões */
        .ms-lg-3 {
            margin-left: 0.5rem !important;
        }
    }

    /* Ajuste específico para o ícone do menu no mobile se ele ainda estiver ruim */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
    .phone-country{
    display: none !important;
    }
    #rd-button-l6z3korp{
        margin-top:15px !important;
    }
    /* --- Ajuste da Paginação (Até 1200px) --- */
    @media (max-width: 1200px) {
        .swiperSelecaoOp {
            /* Dá um respiro para a paginação não colar nos logos */
            padding-bottom: 50px !important; 
        }
        
        .swiperSelecaoOp .swiper-pagination {
            bottom: 0 !important; /* Posiciona no limite inferior do padding */
            margin-top: 20px;
        }
    }

    /* --- Correção do Alinhamento Mobile (< 576px) --- */
    @media (max-width: 575px) {
        .swiperSelecaoOp {
            /* Garante que o container não corte o primeiro slide */
            padding-left: 0 !important;
            padding-right: 0 !important;
            overflow: visible !important; /* Permite ver os logos vizinhos */
        }
        
        .swiperSelecaoOp .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn-select-operator img {
            max-width: 180px; /* Evita que o logo ocupe a tela toda no mobile */
        }
    }
    /* --- Dashboard de Soluções Customizado --- */

    #solucoes-allcare {
        background-color: #ffffff;
    }

    .btn-solucao {
        background: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
        padding: 18px 24px !important;
        color: #6c757d !important;
        transition: all 0.2s ease-in-out !important;
    }

    /* Quando o botão está selecionado (Roxo Allcare) */
    .btn-solucao.active {
        background: #ffffff !important;
        border-color: var(--allcare-purple) !important; /* Seu roxo Allcare */
        border-width: 2px !important;
        box-shadow: 0 8px 15px var(--text-shadow) !important;
        color: var(--allcare-purple-dark) !important;
    }

    .icon-circle {
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        color: #6c757d;
        transition: 0.3s;
    }

    .btn-solucao.active .icon-circle {
        background: var(--allcare-purple) !important;
        color: #fff;
    }

    .dashboard-content {
        background: #ffffff;
        border-radius: 24px;
        min-height: 420px;
        border: 1px solid #eee;
    }

    /* Scroll lateral no mobile para não quebrar o layout */
    @media (max-width: 991px) {
        /* Container dos botões vira um Flexbox que permite quebra de linha */
        #v-pills-tab {
            flex-direction: row !important;
            flex-wrap: wrap !important; /* Permite que os botões pulem de linha */
            justify-content: center;
            gap: 10px; /* Espaçamento entre os botões */
            overflow-x: visible !important; /* Removemos o scroll lateral para usar o grid */
        }

        .btn-solucao {
            margin-right: 0 !important;
            margin-bottom: 10px !important;
            padding: 15px !important;
            display: flex;
            align-items: center;
            min-width: 0 !important; /* Reseta o min-width anterior */
        }

        /* Resolução entre 768px e 991px: EXIBE 2 POR LINHA */
        @media (min-width: 768px) {
            .btn-solucao {
                flex: 0 0 calc(50% - 10px); /* Ocupa metade da largura */
            }
        }

        /* Resolução abaixo de 768px: EXIBE 1 POR LINHA (OCUPA TUDO) */
        @media (max-width: 767px) {
            .btn-solucao {
                flex: 0 0 100%; /* Ocupa a largura total */
            }
            
            /* Diminui um pouco as fontes para não apertar */
            .btn-solucao h5 {
                font-size: 1rem !important;
            }
            .btn-solucao small {
                font-size: 0.8rem !important;
            }
            .icon-circle {
                width: 35px !important;
                height: 35px !important;
                font-size: 0.9rem !important;
            }
        }
    }
    .tab-content.border-top.pt-3 {
        min-height: 200px; /* Ajuste este valor conforme a média do seu maior texto */
        display: flex;
        flex-direction: column;
    }

    /* Garante que a aba ativa ocupe o espaço e não deixe o botão "Contratar" sambando */
    .tab-pane.active {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    /* FAQ Accordion Styling herdando do Como Funciona */
    #faq .accordion-item {
        transition: all 0.3s ease;
    }

    #faq .accordion-button {
        box-shadow: none;
        border-radius: 1rem !important;
        background-color: transparent;
        color: #333;
    }

    #faq .accordion-button:not(.collapsed) {
        background-color: #fff;
        color: var(--allcare-purple);
        box-shadow: none;
    }

    #faq .accordion-button::after {
        /* Troca o ícone para um roxo quando aberto */
        filter: sepia(100%) hue-rotate(240deg) saturate(500%);
    }

    #faq .fundo-moldura-faq {
        border: 8px solid #fff;
        box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
        transition: transform 0.3s ease;
    }

    #faq .fundo-moldura-faq:hover {
        transform: translateY(-10px);
    }

    #faq .accordion-item:hover {
        transform: translateX(10px);
    }

    .carousel-container {
        position: relative;
        width: 100%;
        height: 591px; /* Mantendo a altura padrão do seu projeto */
        background-color: #000;
        overflow: hidden;
        z-index: 1;
    }
    /* Slides */
    .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        display: none;
        align-items: center;
        background-color: #000;
    }

    .slide.active { 
        display: flex; 
        animation: fadeInSlide 0.8s ease forwards; 
    }

    @keyframes fadeInSlide { from { opacity: 0; } to { opacity: 1; } }

    /* Camadas de Fundo e Overlay */
    .bg-layer {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 1;
        pointer-events: none;
    }
    .img-parallax {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.05);
        transition: transform 0.2s ease-out;
    }
    /* Conteúdo de Texto (Z-INDEX ALTO) */
    .banner-content {
        position: relative;
        z-index: 100 !important; /* Na frente de tudo */
        width: 100%;
        pointer-events: none;
    }

    .text-group {
        max-width: 800px;
        pointer-events: auto;
        padding-left: 15px;
    }

    .banner-content h1 {
        font-family: 'Georama', sans-serif;
        font-size: 35px !important;
        color: #ffffff !important;
        line-height: 1.1;
        margin: 0;
        text-transform: uppercase;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    }

    .banner-content .subtitle {
        font-family: 'Georama', sans-serif;
        color: #ffffff !important;
        font-size: 24px !important;
        margin-top: 15px;
        opacity: 0.9;
    }

    /* Botão de Ordem (Substituindo o seu antigo) */
    .btn-order {
        display: inline-block;
        margin-top: 30px;
        padding: 15px 40px;
        background: var(--allcare-purple);
        color: white !important;
        border-radius: 50px;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s;
    }

    /* Controles e Indicadores */
    .control {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: var(--allcare-purple);
        color: white;
        padding: 20px;
        cursor: pointer;
        border: none;
        z-index: 200 !important; /* Acima até do formulário se necessário */
        font-size: 24px;
    }
    .prev { left: 0; border-radius: 0 10px 10px 0; }
    .next { right: 0; border-radius: 10px 0 0 10px; }

    .carousel-indicators-custom {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        z-index: 200 !important;
    }

    .indicator {
        width: 12px; height: 12px;
        border-radius: 50%;
        background: rgba(255,255,255,0.4);
        cursor: pointer;
    }
    .indicator.active { background: var(--allcare-purple); width: 30px; border-radius: 10px; }

    /* Objeto Parallax */
    .object-entrance-wrapper {
        position: absolute;
        bottom: 0;
        right: 20%; /* Ajuste a posição lateral aqui */
        width: 1211px;
        height: 591px; /* Mesma altura do banner */
        z-index: 5; /* Atrás do texto (100) mas na frente da imagem (1) */
        pointer-events: none;
        opacity: 0;
        display: block !important; /* Garante que não está sendo escondido */
    }
    .slide.active .object-entrance-wrapper {
        animation: fadeInUpObject 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        animation-delay: 0.3s;
    }
    .object-layer {
        width: 100%;
        height: 100%;
        background-size: contain; /* Garante que o objeto não seja cortado */
        background-repeat: no-repeat;
        background-position: bottom center;
        transition: transform 0.1s ease-out; /* Suaviza o movimento do mouse */
    }

@keyframes fadeInUpObject {
    from { opacity: 0; transform: translateY(60px); }
    to { opacity: 1; transform: translateY(0); }
}


    /* Responsividade Mobile */
    @media (max-width: 991px) {
        .carousel-container { height: 450px !important; }
        .banner-content h1 { font-size: 35px !important; }
        .banner-content .subtitle { font-size: 16px !important; }
        .control { display: none; }
    }

    .museo-font{
        font-family: 'Georama', sans-serif !important;
        
    }

/* Carousel & Banners */
.object-layer.object-layer-1 {
 background-image: url('img/banner/ban-desktop-objeto-1.webp');
}
.object-layer.object-layer-0 {
 background-image: url('img/banner/ban-desktop-objeto-0.webp');
}
.object-layer.object-layer-2 {
 background-image: url('img/banner/ban-desktop-objeto-2.webp');
}

.text-group.margin-carousel-1 {
 margin-top: 260px;
}
.text-group.margin-carousel-2 {
 margin-top: 195px;
}
.text-group.margin-carousel-3 {
 margin-top: 260px;
}

.text-dynamic-size {
 font-size: 40px;
}

/* Operadoras Parceiras / Dinâmicos */
.badge-promo.badge-viva-detalhe {
 background: var(--cor-operadora, #5e17eb); /* Cor padrão de fallback */
}

/* Criando classes dinâmicas para injetar as variáveis CSS no loop PHP */
.bg-viva-op-5 { background: var(--5) !important; }
.bg-viva-op-31 { background: var(--31) !important; }

.color-op-38 { color: var(--38) !important; }
.color-op-9 { color: var(--9) !important; }
.color-op-4 { color: var(--4) !important; }
.color-op-6 { color: var(--6) !important; }

/* Botões com cores dinâmicas */
.border-color-op-5 { --cor-operadora: var(--5); }
.border-color-op-31 { --cor-operadora: var(--31); }

/* Padrão de bolinhas pontilhadas no FAQ e Como Funciona */
.custom-pattern-dots {
 background-image: radial-gradient(var(--allcare-purple) 0.5px, transparent 0.5px);
 background-size: 20px 20px;
}