:root {
            /* Colores Base de Bootstrap (se mantienen por si se necesitan) */
            --bs-primary: #0d6efd;
            --bs-secondary: #6c757d;
            --bs-success: #198754;
            --bs-info: #0dcaf0;
            --bs-warning: #ffc107;
            --bs-danger: #dc3545;
            --bs-light: #f8f9fa;
            --bs-dark: #212529;

            /* Colores específicos para el tema MIHORIZONTE */
            --mi-primary: #4F9AFF;
            /* Azul profesional, un poco más oscuro para mejor contraste */
            --mi-secondary: #14C8FF;
            /* Azul cian vibrante para acentos y CTA */
            --mi-blob-color: #d9eeff;
            /* Azul claro para el blob */
            --mi-section-bg-light: #F0F8FF;
            /* Un tono de azul muy claro, casi blanco */
            --mi-section-bg-white: #ffffff;
            /* Blanco puro */
            --mi-text-color: #333d42;
            /* Gris oscuro para texto principal, mejora legibilidad */
            --mi-light-text: #6e7a83;
            /* Gris más claro para texto secundario */
            --mi-success: #5EC0A9;
            /* Tono de verde amigable para checks */
        }

        body {
            font-family: 'Open Sans', sans-serif;
            color: var(--mi-text-color);
            background-color: var(--bs-light);
            line-height: 1.7;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Poppins', sans-serif;
            color: var(--mi-primary);
            line-height: 1.3;
            font-weight: 700;
            /* Generalmente los títulos son más impactantes en negrita */
        }

        .navbar-brand img {
            height: 50px;
            width: auto;
            /* Mantener la proporción de la imagen */
            object-fit: contain;
        }

        .navbar-nav .nav-link {
            font-weight: 500;
            color: var(--mi-text-color);
            opacity: 0.8;
            /* Ligeramente más opaco para mejor visibilidad */
            transition: all 0.3s ease;
            position: relative;
            padding: 10px 15px;
        }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active {
            color: var(--mi-secondary);
            opacity: 1;
        }

        .navbar-nav .nav-link.active::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 30px;
            height: 5px;
            background-color: var(--mi-secondary);
            border-radius: 10px;
        }

        /* Botones Globales */
        .btn {
            padding: 12px 30px;
            font-weight: 600;
            border-radius: 50px !important;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background-color: var(--mi-primary);
            border-color: var(--mi-primary);
        }

        .btn-primary:hover {
            background-color: var(--mi-secondary);
            border-color: var(--mi-secondary);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-outline-primary {
            color: var(--mi-primary);
            border-color: var(--mi-primary);
        }

        .btn-outline-primary:hover {
            background-color: var(--mi-primary);
            color: var(--mi-section-bg-white);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        /* Hero Section */
        .hero-section {
            background-color: var(--mi-section-bg-light);
            padding: 120px 0;
            /* Ajustado para más espacio vertical */
            position: relative;
            overflow: hidden;
            min-height: 600px;
            display: flex;
            align-items: center;
        }

        .hero-section h1 {
            font-size: 3.8rem;
            /* Ligeramente más grande para impacto */
            color: var(--mi-text-color);
            margin-bottom: 25px;
            /* Más espacio */
        }

        .hero-section h1 .highlight {
            color: var(--mi-primary);
            /* Clase para resaltar texto específico */
        }

        .hero-section .lead {
            color: var(--mi-light-text);
            font-size: 1.4rem;
            /* Texto más grande para mejor legibilidad */
            margin-bottom: 30px;
        }

        .hero-blob {
            position: absolute;
            top: 50%;
            right: -5%;
            /* Ajuste para que el blob quede más al borde */
            transform: translateY(-50%);
            width: 700px;
            /* Tamaño ligeramente aumentado */
            height: 700px;
            z-index: 1;
            opacity: 0.5;
            /* Ligeramente más transparente */
        }

        .hero-blob svg path {
            fill: var(--mi-blob-color);
        }

        .hero-illustration {
            position: relative;
            /* Cambiado de absolute a relative para mejor control en el grid */
            z-index: 2;
            max-width: 100%;
            height: auto;
            display: block;
            /* Asegura que ocupe su propio espacio */
        }

        /* General Section Styling */
        .section-padding {
            padding: 150px 0;
        }

        .section-title {
            color: var(--mi-text-color);
            position: relative;
            padding-bottom: 20px;
            margin-bottom: 60px;
            font-size: 2.8rem;
            /* Ajuste de tamaño para títulos de sección */
        }

        .section-title::after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            width: 80px;
            height: 8px;
            background-color: var(--mi-secondary);
            border-radius: 10px;
        }

        /* Por qué Elegirnos - Icon List */
        .why-us-card {
            display: flex;
            align-items: flex-start;
            margin-bottom: 30px;
            background-color: var(--mi-section-bg-white);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            height: 100%;
            /* Asegura que las tarjetas tengan la misma altura */
        }

        .why-us-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        }

        .why-us-card .icon {
            font-size: 3.5rem;
            /* Iconos ligeramente más grandes */
            color: var(--mi-primary);
            margin-right: 25px;
            flex-shrink: 0;
            line-height: 1;
            width: 100%;
        }

        .why-us-card h5 {
            color: var(--mi-text-color);
            margin-top: 0;
            margin-bottom: 10px;
            font-weight: 600;
            font-size: 1.5rem;
            /* Títulos un poco más grandes */
        }

        .why-us-card p {
            margin-bottom: 0;
            color: var(--mi-light-text);
        }

        .card-text.text-justify {
            text-align: justify;
        }

        /* Nuestros Servicios - Cards */
        .service-item {
            background-color: var(--mi-section-bg-white);
            border-radius: 15px;
            padding: 35px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            border: 1px solid rgba(0, 0, 0, 0.05);
            position: relative;
        }

        .service-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        }

        .service-item h4 {
            color: var(--mi-primary);
            margin-top: 20px;
            margin-bottom: 15px;
            font-weight: 600;
            font-size: 1.7rem;
            /* Ajuste de tamaño para títulos de servicio */
        }

        .service-item .icon {
            font-size: 3.8rem;
            /* Iconos de servicio más grandes */
            color: var(--mi-secondary);
            margin-bottom: 15px;
            line-height: 1;
        }

        .service-item p {
            color: var(--mi-light-text);
            font-size: 1.05rem;
            /* Texto de servicio ligeramente más grande */
        }

        /* Última tarjeta de servicio (especial) */
        .service-item.special-card {
            background-color: var(--mi-primary) !important;
            color: var(--mi-section-bg-white) !important;
            box-shadow: 0 10px 30px rgba(var(--bs-primary-rgb), 0.2);
            /* Sombra más pronunciada, usando la variable bs-primary-rgb de Bootstrap */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .service-item.special-card h4 {
            color: var(--mi-section-bg-white) !important;
        }

        .service-item.special-card .icon {
            color: var(--mi-section-bg-white) !important;
        }

        .service-item.special-card p {
            color: rgba(255, 255, 255, 0.8) !important;
        }

        /* Tag for specialized programs */
        .program-tag {
            display: none;
            position: absolute;
            top: 15px;
            right: -10px;
            background-color: var(--mi-primary);
            /* Usar secondary para el tag, contrasta más con el primary del fondo */
            color: var(--mi-section-bg-white) !important;
            padding: 5px 15px;
            border-radius: 5px;
            font-size: 0.9rem;
            /* Ligeramente más grande */
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transform: rotate(2deg);
        }

        /* Modalidades de Atención */
        .modalidad-item {
            background-color: var(--mi-section-bg-white) !important;
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            height: 100%;
            text-align: left;
            border: 1px solid rgba(0, 0, 0, 0.05);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }

        .modalidad-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        }

        .modalidad-item i {
            font-size: 4.2rem;
            /* Iconos más grandes */
            color: var(--mi-primary);
            margin-bottom: 30px;
            display: block;
            text-align: center;
            line-height: 1;
        }

        .modalidad-item h4 {
            color: var(--mi-primary);
            font-weight: 700;
            text-align: center;
            margin-bottom: 25px;
            font-size: 2rem;
            /* Títulos de modalidad más grandes */
        }

        .modalidad-item ul {
            list-style: none;
            padding-left: 0;
            margin-top: 20px;
        }

        .modalidad-item ul li {
            margin-bottom: 15px;
            position: relative;
            padding-left: 35px;
            line-height: 1.6;
            color: var(--mi-light-text);
        }

        .modalidad-item ul li::before {
            content: '\f00c';
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            color: var(--mi-success);
            /* Usar la variable de éxito */
            top: 5px;
            font-size: 1.1rem;
        }

        /* Estilos para Convenios */
        .convenios-section {
            /*padding: 90px 0;*/
            overflow: hidden;
            position: relative;
            background-color: var(--mi-section-bg-white);
        }

        .convenios-section .logo-wrapper {
            display: flex;
            white-space: nowrap;
            animation: scrollLogos 30s linear infinite;
        }

        .convenios-section .logo-wrapper img {
            height: 200px;
            /* Altura fija para consistencia, ajustada para que no sea tan grande */
            object-fit: contain;
            filter: grayscale(80%);
            opacity: 0.7;
            transition: all 0.3s ease;
            margin-right: 40px;
            /* Más espacio entre logos */
            flex-shrink: 0;
        }

        .convenios-section .logo-wrapper img:hover {
            filter: grayscale(0%);
            opacity: 1;
        }

        .convenios-section .static-logo-wrapper img {
            filter: grayscale(80%);
            opacity: 0.7;
            transition: all 0.3s ease;            
        }

        .convenios-section .static-logo-wrapper img:hover {
            filter: grayscale(0%);
            opacity: 1;
        }        

        @keyframes scrollLogos {
            0% {
                transform: translateX(0%);
            }

            100% {
                transform: translateX(-100%);
            }
        }


        /* Estilos para Redes de Apoyo */
        .network-item {
            background-color: var(--mi-section-bg-white);
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .network-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
        }

        .network-item i {
            font-size: 2.8rem;
            /* Iconos de red un poco más grandes */
            color: var(--mi-secondary);
            margin-right: 20px;
            flex-shrink: 0;
        }

        .network-item h5 {
            color: var(--mi-primary);
            font-weight: 600;
            margin-bottom: 0;
            font-size: 1.3rem;
            /* Títulos de red un poco más grandes */
        }


        /* Footer */
        footer {
            background-color: var(--mi-primary);
            color: var(--mi-section-bg-white) !important;
            padding: 60px 0;
            font-family: 'Open Sans', sans-serif;
        }

        footer h5 {
            color: var(--mi-section-bg-white) !important;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            margin-bottom: 25px;
        }

        footer a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        footer a:hover {
            color: var(--mi-secondary);
        }

        footer ul {
            list-style: none;
            padding-left: 0;
        }

        footer ul li {
            margin-bottom: 12px;
        }

        footer ul li i {
            margin-right: 12px;
            font-size: 1.1rem;
        }

        .footer-social-icons {
            display: none;
        }

        .footer-social-icons a {
            font-size: 1.8rem;
            margin-right: 20px;
            color: rgba(255, 255, 255, 0.9);
        }

        .footer-social-icons a:hover {
            color: var(--mi-secondary);
        }

        /* Modal de Agendar Sesión */
        .modal-content {
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            border-bottom: none;
            padding: 25px;
        }

        .modal-title {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            color: var(--mi-primary);
        }

        .modal-body {
            padding: 0 25px 25px;
            color: var(--mi-light-text);
        }

        .modal-footer {
            border-top: none;
            padding: 15px 25px 25px;
        }

        /* Media Queries */
        @media (max-width: 991px) {
            .hero-section {
                padding: 80px 0;
                min-height: auto;
            }

            .hero-illustration,
            .hero-blob {
                position: relative;
                top: auto;
                right: auto;
                transform: none;
                margin: 40px auto 0;
                display: block;
                max-width: 100%;
                height: auto;
            }

            .hero-section .col-lg-6:last-child {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 40px;
            }

            .hero-blob {
                width: 100%;
                height: auto;
            }

            .hero-illustration {
                max-width: 80%;
            }

            .section-title {
                margin-bottom: 40px !important;
                font-size: 2.2rem;
            }

            .why-us-card {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .why-us-card .icon {
                margin-right: 0;
                margin-bottom: 20px;
            }

            .navbar-collapse {
                text-align: center;
            }

            .navbar-nav .nav-item {
                margin-bottom: 10px;
            }

            .navbar-nav .nav-link.active::after {
                width: 50px;
                bottom: -5px;
            }

            .navbar-nav .nav-item:last-child {
                margin-top: 20px;
            }

            .program-tag {
                top: 10px;
                right: 5px;
                transform: none;
            }
        }

        @media (max-width: 767px) {
            .hero-section h1 {
                font-size: 2.5rem;
            }

            .hero-section .lead {
                font-size: 1.2rem;
            }

            .section-padding {
                padding: 90px 0;
            }

            .section-title {
                font-size: 1.8rem;
            }
        }

        @media (min-width: 992px) {
            .why-us-card .icon {
                width: unset;
            }
        }

        /* Footer */
        footer {
            background-color: var(--mi-primary);
            color: var(--mi-section-bg-white) !important;
            padding: 60px 0;
            font-family: 'Open Sans', sans-serif;
            position: relative;
            /* Añadido para posicionar el botón "Back to Top" */
        }

        /* Estilos del botón Back to Top */
        .back-to-top {
            position: absolute;
            top: 0;
            /* Posiciona en el borde superior del footer */
            left: 50%;
            transform: translate(-50%, -50%);
            /* Centra el botón y lo sube la mitad de su altura */
            background-color: var(--mi-secondary);
            color: var(--mi-section-bg-white);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            z-index: 10;
            /* Asegura que esté por encima de otros elementos */
            text-decoration: none;
            /* Eliminar subrayado del enlace */
        }

        .back-to-top:hover {
            background-color: var(--mi-primary);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
            color: var(--mi-section-bg-white);
            /* Mantener el color del icono en hover */
        }

        /* Por qué Elegirnos - Icon List */
        .why-us-card {
            display: flex;
            align-items: flex-start;
            margin-bottom: 30px;
            background-color: var(--mi-section-bg-white);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            height: 100%;
            /* Asegura que las tarjetas tengan la misma altura */
            position: relative;
            /* Importante para posicionar el botón de corazón */
        }

        /* Botón de corazón en la tarjeta "Tu bienestar, nuestra prioridad." */
        .favorite-button {
            position: absolute;
            top: 0;
            /* Posiciona en el borde superior de la tarjeta */
            right: 8%;
            /* Posiciona en el borde derecho de la tarjeta */
            transform: translate(50%, -50%);
            /* Ajusta para que sobresalga por la mitad de su tamaño */
            background-color: var(--mi-primary);
            /* Color de fondo del botón */
            color: var(--mi-section-bg-white);
            /* Color inicial del corazón */
            border: none;
            border-radius: 50%;
            /* Para hacerlo redondo */
            width: 50px;
            /* Tamaño del botón */
            height: 50px;
            /* Tamaño del botón */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            /* Tamaño del icono */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            /* Sombra para que resalte más */
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 5;
            /* Asegura que esté por encima del contenido de la tarjeta */
        }

        .favorite-button:hover {
            background-color: var(--mi-primary);
            /* Cambia de color al pasar el ratón */
            transform: translate(50%, -50%) scale(1.1);
            /* Efecto de crecimiento y mantiene posición */
        }

        /* Estilo para el corazón cuando está "activo" (sólido) */
        .favorite-button .fas.fa-heart {
            color: var(--bs-danger);
            /* Usa el color danger de Bootstrap para un rojo vibrante */
        }

        /* Media Queries */
        @media (max-width: 767px) {

            /* Ajuste el botón de corazón para móviles si es necesario */
            .favorite-button {
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
                transform: translate(40%, -40%);
                /* Ajuste más pequeño para móviles */
            }
        }

        /* Estilos para el botón flotante de WhatsApp */
        .whatsapp-float {
            text-decoration: none;
            position: fixed;
            bottom: 30px; /* Distancia desde abajo */
            right: 30px; /* Distancia desde la derecha */
            background-color: #25D366; /* Color de WhatsApp */
            color: white;
            border-radius: 50%; /* Forma circular */
            width: 60px; /* Ancho del botón */
            height: 60px; /* Alto del botón */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px; /* Tamaño del icono */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Sombra */
            z-index: 99; /* Asegura que esté por encima de otros elementos */
            transition: transform 0.3s ease-in-out; /* Transición suave para el hover */
        }

        .whatsapp-float:hover {
            transform: scale(1.1); /* Efecto de "agrandar" al pasar el ratón */
            color: white; /* Mantiene el color blanco del icono al pasar el ratón */
        }