.text-p {
            color: #d63c21;
        }
        
        .text-whitew{
            color: #f8f9fa;
        }

        h1.text-orange{
            color: #9d2d0b !important;
        }
                
        .section-title {
            font-weight: 700;
            color: #003081;
            margin-bottom: 1.5rem;
        }
        
        .card-feature {
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            height: 100%;
        }
        
        .card-feature:hover {
            transform: translateY(-5px);
        }
        
        .card-icon {
            font-size: 2.5rem;
            color: #bd0c0cff;
            margin-bottom: 1rem;
        }
        
        .feature-list li {
            margin-bottom: 0.5rem;
            padding-left: 1.5rem;
            position: relative;
        }
        .swiper-container {
            padding: 20px 0 40px;
        }

        .bsb-circle.border-warning {
            padding: 2px 2px;
            border-radius: 50%;
            background-color: #ed7a00;
            color: #fff;
            max-height: 10px;
            z-index: 2;
        }

        .text-bluedark{
            color: #0b55a8;
        }
            /* CSS Personalizado para la microinteracción de las tarjetas */
        .card-hover-transition {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }   
        .card-hover-transition:hover {
            transform: translateY(-5px);
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; /* Bootstrap shadow-lg */
        }

            /* CSS Personalizado para interactividad y pulido visual */
        .card-feature {
            border: none;
            border-radius: 12px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
    
        /* Efecto Hover: Eleva la tarjeta ligeramente para dar retroalimentación al usuario */
        .card-feature:hover {
            transform: translateY(-8px);
            box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important; /* Sobrescribe el shadow-sm de Bootstrap */
        }

        /* Contenedor de iconos para darles mayor peso visual */
        .icon-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background-color: #f8f9fa; /* bg-light de Bootstrap */
            border-radius: 50%;
            margin-bottom: 1.5rem;
        }