@media (min-width: 992px) {
   #banner{
    background: url('http://larissa.wsilab.com.br/wp-content/uploads/2025/12/bg.webp');
    background-position: top;
    background-size: cover;
    padding: 200px 0 10rem}
#doencas-hematologicas .custom-slider-item,#canceres .custom-slider-item {
            background: url(http://larissa.wsilab.com.br/wp-content/uploads/2025/12/bg-cancer.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    color: #fff;
    padding: 5rem;
}
#doencas-hematologicas h3,#doencas-hematologicas p,#canceres  h3,#canceres  p{color:#fff;width:60%}
#cta img{    position: absolute;
    bottom: 0;}
    #banner form{
    padding: 2rem 2.5rem;
}
}

@media (max-width: 991px) {
    #banner{
    background: url('http://larissa.wsilab.com.br/wp-content/uploads/2025/12/bg-mobile.webp');
    background-position: top;
    background-size: cover;
    padding: 6rem 0 4rem}
    #banner form {
    padding: 1.5rem;
}
#doencas-hematologicas .custom-slider-item ,#canceres .custom-slider-item {
    background: url(http://larissa.wsilab.com.br/wp-content/uploads/2025/12/bg-cancer-mobile.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    color: #fff;
    padding: 2rem 2rem 12rem;
}
    #canceres h3, #canceres p,
    #doencas-hematologicas h3, #doencas-hematologicas p{
    color: #fff;
    width: 100%;
}
#cta img {
    position: relative;
    bottom: 0;
    width: 100%;
        margin-top: 2rem;
}
#doencas-hematologicas h2,#canceres h2, #atendimento h2, #depoimentos h2, #cta h2 {
    text-align: center;
}
}
#banner form{
    background: #002A4D8A;
    border-radius: 15px;
}
#banner p{font-size: 1.2rem;
    margin-bottom: 1.5rem;}
#canceres,#depoimentos{
    background: #F0F6F6;
}
#doencas-hematologicas h2,#canceres h2,#atendimento h2,#depoimentos h2,#cta h2{
    font-weight: 700;
}
#cta .row{
    background: var(--color-primary);
    border-radius: 20px;
    position: relative;
}
        .custom-slider-track::-webkit-scrollbar {
            display: none;
        }
        .custom-slider-track {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        .custom-snap-container {
            scroll-snap-type: x mandatory; /* Obriga a parar no slide */
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }
        
        .custom-slider-item {
            scroll-snap-align: center; /* Centraliza o slide ao parar */
            min-width: 100%; /* Garante que o slide ocupe 100% da área visível */
        }

        .custom-slider-wrapper {
        }
        @media (max-width: 768px) {
            .custom-slider-wrapper {
            }
        }
        .custom-gradient-overlay {
            background: linear-gradient(90deg, 
                rgba(32, 201, 151, 1) 25%,       /* Cor sólida na esquerda (#20c997) */
                rgba(32, 201, 151, 0.85) 50%, 
                rgba(32, 201, 151, 0.4) 75%, 
                rgba(32, 201, 151, 0) 100%);     /* Transparente na direita */
        }
        @media (max-width: 768px) {
            .custom-gradient-overlay {
                background: linear-gradient(180deg, 
                    rgba(32, 201, 151, 0.95) 40%, 
                    rgba(32, 201, 151, 0.6) 70%,
                    rgba(32, 201, 151, 0) 100%);
            }
        }
        .btn-custom-nav {
            width: 45px;
            height: 45px;
            background-color: #20c997; /* Bootstrap Teal */
            border: none;
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            font-size: 1.5rem; /* Aumenta o tamanho do ícone Font Awesome */
            line-height: 1; /* Remove espaçamento extra da linha */
        }
        .btn-custom-nav:hover {
            background-color: #198754; /* Green-700 approx */
            transform: translateY(-2px);
        }
        .btn-custom-nav:active {
            transform: scale(0.95);
        }
        
        /* Ajuste fino para os ícones Font Awesome ficarem perfeitamente no centro visualmente */
        .btn-custom-nav .fa-angle-left {
            margin-right: 2px; 
        }
        .btn-custom-nav .fa-angle-right {
            margin-left: 2px;
        }
        .progress-track-bg {
            background-color: #e9ecef; /* Cinza claro */
            height: 3px;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }
        .progress-fill-bar {
            background-color: #20c997; /* Bootstrap Teal */
            height: 100%;
            width: 0%;
            position: absolute;
            left: 0;
            top: 0;
            transition: width 0.3s ease-out; /* Animação suave */
        }

        /* --- ESTILO DO CARD --- */
        .service-card {
            border: 1px solid var(--color-primary);
            border-radius: 20px;
            background: white;
            padding: 2rem 1.5rem;
            text-align: center;
            height: 100%;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .service-card:hover {
            box-shadow: 0 10px 20px rgba(77, 208, 225, 0.15);
            transform: translateY(-5px);
        }
        .service-card h3{
    color: var(--color-primary);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
        .service-card p{font-size: .9rem;}
        .service-card img{margin-bottom:1rem;}

        .icon-wrapper {
            width: 80px;
            height: 80px;
            background-color: var(--color-secondary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
        }

        .icon-wrapper i {
            color: var(--color-primary);
            font-size: 32px;
        }

        .card-title {
            color: var(--color-primary);
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 1rem;
            min-height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-text {
            color: var(--text-gray);
            font-size: 0.9rem;
            line-height: 1.6;
        }

        /* --- CORREÇÃO DO SLIDER NO MOBILE --- */
        
        .responsive-grid-slider {
            /* Mobile First: Força comportamento de Slider */
            display: flex;
            flex-wrap: nowrap !important; /* IMPORTANTE: Impede que o Bootstrap quebre a linha */
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding-bottom: 1.5rem; /* Espaço extra para não cortar a sombra */
            
            /* Suavidade no iOS */
            -webkit-overflow-scrolling: touch;
            
            /* Esconde scrollbar */
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .responsive-grid-slider::-webkit-scrollbar {
            display: none;
        }

        /* Item do slider no Mobile */
        .grid-slider-col {
            flex: 0 0 auto; /* IMPORTANTE: Impede o item de encolher para caber na tela */
            width: 85%; /* Largura fixa relativa à tela do celular */
            max-width: 320px; /* Limite para não ficar gigante em tablets pequenos */
            scroll-snap-align: center;
        }

        /* --- DESKTOP (A partir de 992px) --- */
        @media (min-width: 992px) {
            .responsive-grid-slider {
                flex-wrap: wrap !important; /* Volta a permitir quebra de linha para formar o Grid */
                overflow-x: visible;
                justify-content: center;
                padding-bottom: 0;
            }

            .grid-slider-col {
                flex: 0 0 auto; /* Reseta comportamento flex */
                width: auto; /* Deixa o Bootstrap controlar a largura (col-lg-3) */
                max-width: none;
            }

            .mobile-controls {
                display: none !important;
            }
        }

        /* --- CONTROLES MOBILE --- */
        .mobile-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            margin-top: 0.5rem;
        }
        
        .nav-arrow {
            color: var(--color-primary);
            background: none;
            border: none;
            font-size: 2rem;
            cursor: pointer;
            padding: 0 10px;
            display: flex;
            align-items: center;
        }

        .dots-container {
            display: flex;
            gap: 8px;
        }

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

        .dot.active {
            background: var(--color-primary);
            width: 25px;
            border-radius: 5px;
        }