:root {
    /* Paleta de colores para alto contraste */
    --bg-color-high: black;
    --hover-high: #FFD700;
    --text-color-high: #FFD700; /* Amarillo más suave */
    --link-color-high: #00ff00; /* Verde brillante */
    --border-color-high: #FFD700;
    --btn-bg-high: #FFD700;
    --btn-text-high: black;
    --white-high: white;


    /* Paleta de colores para Invertir */
    --bg-color-inver: black;
    --hover-inver: #f29102;
    --text-color-inver: white; /* Amarillo más suave */
    --link-color-inver: #f29102; /* Verde brillante */
    --border-color-inver: white;
    --btn-bg-inver: white;
    --btn-text-inver: black;
    --white-high-inver: white;

    /* Paleta de colores para Contraste Ocuro */
    --bg-color-oscuro: #121212; /* Negro intenso, pero no completamente puro */
    --hover-oscuro: #f29102; /* Naranja vibrante para destacar elementos interactivos */
    --text-color-oscuro: #EAEAEA; /* Blanco suave para no ser tan duro con la vista */
    --link-color-oscuro: #FFB300; /* Amarillo anaranjado más cálido para enlaces */
    --border-color-oscuro: #FFFFFF; /* Bordes blancos para separación clara */
    --btn-bg-oscuro: #EAEAEA; /* Fondo de botones con blanco más suave */
    --btn-text-oscuro: #121212; /* Texto negro en botones para contraste */
    --white-high-oscuro: #FFFFFF; /* Blanco puro solo cuando sea necesario */

    /* Paleta de colores para Contraste Claro */
    --bg-color-light: #F9FAFB; /* Blanco suave */
    --hover-light: #b9b9b9; /* Amarillo oro vibrante */
    --text-color-light: #333333; /* Gris oscuro, en lugar de negro puro */
    --link-color-light: #4E4996; /* Azul intenso pero no excesivamente brillante */
    --border-color-light: #E5E7EB; /* Gris claro para bordes */
    --btn-bg-light: #b9b9b9; /* Amarillo oro para botones */
    --btn-text-light: #333333; /* Texto oscuro en botones */
    --white-light: #FFFFFF; /* Blanco puro solo donde sea necesario */

    /* Paleta de colores para Contraste Inteligente */
    --bg-color-inteligente: #1a1a1a; /* Fondo oscuro neutro */
    --hover-inteligente: #FFD700; /* Amarillo vibrante */
    --text-color-inteligente: #FFFFFF; /* Blanco puro para máximo contraste */
    --link-color-inteligente: #00FF00; /* Verde brillante para destacar enlaces */
    --border-color-inteligente: #FFD700; /* Amarillo vibrante para bordes */
    --btn-bg-inteligente: #FFD700; /* Amarillo para botones */
    --btn-text-inteligente: #000000; /* Texto negro en botones */
    --white-inteligente: #FFFFFF; /* Blanco puro donde sea necesario */
}


/* =====================================
   1. Alto Contraste
===================================== */

/* Alto Contraste */
.high-contrast {
    background-color: var(--bg-color-high) !important;
    color: var(--text-color-high) !important; /* Amarillo más suave */
}

.large-text {
    font-size: 1.5em !important;
}

.high-contrast {
    background-color: var(--bg-color-high) !important;
    color: var(--text-color-high) !important; /* Amarillo más suave */
}

.high-contrast a {
    color: var(--text-color-high) !important; /* Verde brillante para enlaces */
}

.high-contrast a:hover {
    color: var(--bg-color-high) !important;
}

.high-contrast .btn-default {
    background: var(--bg-color-high) !important; /* Verde brillante para enlaces */
    border: 2px solid var(--border-color-high);
}

.high-contrast .btn-default::after {
    background: var(--hover-high) !important; /* Verde brillante para enlaces */
    border: 2px solid var(--border-color-high);
}
.high-contrast .our-process-item .icon-box figure {
    filter: invert(1) contrast(2) !important;
}

.high-contrast .our-process-item .icon-box figure::after {
    filter: invert(0) contrast(0) !important;
}

.high-contrast .nav-link:hover {
    background: var(--hover-high) !important; /* Verde brillante para enlaces */

}

/* Asegurar que todos los fondos blancos o claros cambien */
.high-contrast .floating-menu-right,
.high-contrast .hero,
.high-contrast .dropdown-content,
.high-contrast .contact-location-card,
.high-contrast .our-service,
.high-contrast .about-us,
.high-contrast .we-provide,
.high-contrast .our-blog,
.high-contrast .blog-item,
.high-contrast .why-choose-box,
.high-contrast .highlighted-text,
.high-contrast .service-item,
.high-contrast .icon-box,
.high-contrast .experience-counter,
.high-contrast .happy-patients-counter,
.high-contrast .main-footer,
.high-contrast .why-choose-us,
.high-contrast .our-process {
    background-color: var(--bg-color-high) !important;
    color: var(--text-color-high) !important; /* Amarillo más suave */
    border-color: var(--border-color-high) !important; /* Amarillo más suave */
}

.high-contrast .happy-patients-counter .icon-box::before{
    background-color: white !important;
}

.high-contrast .happy-patients-counter .icon-box .img::after{
    color: var(--text-color-high) !important; /* Amarillo más suave */
    border-color: var(--border-color-high) !important; /* Amarillo más suave */

}

/* Botones */
.high-contrast .btn,
.high-contrast button {
    background-color: var(--btn-bg-high) !important; /* Amarillo más suave */
    color: var(--btn-text-high) !important;
    border: 1px solid var(--border-color-high) !important;
}

.high-contrast .btn:hover,
.high-contrast button:hover {
    background-color: var(--btn-bg-high) !important;
    color: var(--btn-text-high) !important;
    border: 2px solid var(--bg-color-high) !important;
}

/* Tarjetas */
.high-contrast .contact-location-card {
    background-color: var(--bg-color-high) !important;
    color: var(--text-color-high) !important; /* Amarillo más suave */
    border: 2px solid var(--border-color-high) !important;
}

/* Iconos y sombras */
.high-contrast .material-symbols-outlined {
    color: var(--btn-text-high) !important;
}

/* Evitar que imágenes se pierdan en fondo oscuro */
.high-contrast img {
    filter: invert(0) contrast(1.2) !important;
}

.high-contrast img.logo,
.high-contrast img.no-invert {
    filter: none !important;
}


/* Alto Contraste para el Header y Navbar */
.high-contrast .main-header {
    background-color: var(--bg-color-high) !important;
    border-bottom: 2px solid var(--border-color-high) !important;
}

.high-contrast .navbar-nav .nav-link {
    color: var(--text-color-high) !important; /* Amarillo más suave */
}

.high-contrast .navbar-nav .nav-link:hover {
    color: var(--bg-color-high) !important; /* Verde brillante al pasar el mouse */
}

.high-contrast .submenu ul {
    background-color: var(--bg-color-high) !important;
    border: 1px solid var(--border-color-high) !important;
}

.high-contrast .submenu ul li a {
    color: var(--text-color-high) !important; /* Amarillo más suave */
}

.high-contrast .submenu ul li a:hover {
    background-color: var(--btn-bg-high) !important; /* Amarillo más suave */
    color: var(--btn-text-high) !important;
}

/* Botón destacado de agendar cita */
.high-contrast .btn-highlighted {
    background-color: var(--btn-bg-high) !important; /* Amarillo más suave */
    color: var(--btn-text-high) !important;
    border: 2px solid var(--bg-color-high) !important;
}

/* Alto contraste para botones destacados */
.high-contrast .btn-default.btn-highlighted {
    background-color: var(--btn-bg-high) !important; /* Amarillo más suave */
    color: var(--btn-text-high) !important;
    border: 2px solid var(--bg-color-high) !important;
}

/* Ajuste de color en pseudo-elementos */
.high-contrast .btn-default.btn-highlighted::before,
.high-contrast .btn-default.btn-highlighted::after {
    border-color: var(--border-color-high) !important; /* Amarillo más suave */ /* Ajusta bordes si es necesario */
    filter: invert(1); /* Invierte el color para mejor visibilidad */
}

/* Modo alto contraste para listas */
.high-contrast ul,
.high-contrast ol {
    background-color: var(--bg-color-high) !important;
    color: var(--text-color-high) !important; /* Amarillo más suave */
    border: none !important;
}

/* Estilos específicos para elementos de lista */
.high-contrast li {
    color: var(--text-color-high) !important; /* Amarillo más suave */
    background-color: var(--bg-color-high) !important;
    /* border-left: 4px solid var(--border-color-high) !important;
    padding: 5px 10px;
    margin-bottom: 5px; */
}

/* Ajustar pseudo-elementos (::before) dentro de la lista */
.high-contrast li::before {
    color: var(--text-color-high) !important; /* Amarillo más suave */
    background-color: var(--bg-color-high) !important;
    border-radius: 50%;
    padding: 5px;
}

/* Resaltar enlaces dentro de listas */
.high-contrast li a {
    color: var(--text-color-high) !important; /* Verde brillante */
}

.high-contrast li a:hover {
    color: var(--btn-text-high) !important;
    background-color: var(--btn-bg-high) !important; /* Amarillo más suave */
}

/* Alto contraste para títulos */
.high-contrast h1,
.high-contrast h2,
.high-contrast h3,
.high-contrast h4,
.high-contrast h5,
.high-contrast h6 {
    color: var(--text-color-high) !important; /* Amarillo más suave */
    background-color: var(--bg-color-high) !important;
}

/* Ajuste para títulos dentro de `.split-line` */
.high-contrast .split-line {
    background-color: var(--bg-color-high) !important;
    color: var(--text-color-high) !important; /* Amarillo más suave */
    /* border-bottom: 2px solid var(--border-color-high) !important; Agrega un borde amarillo */
}

/* Asegurar que elementos dentro de `split-line` sean visibles */
.high-contrast .split-line div {
    background-color: var(--bg-color-high) !important;
    color: var(--text-color-high) !important; /* Amarillo más suave */
}

/* Mejorar contraste en textos con sombras o efectos de animación */
.high-contrast .text-anime-style-3 {
    text-shadow: none !important;
    color: var(--text-color-high) !important; /* Amarillo más suave */
}

/* Modo Alto Contraste */
.high-contrast #floating-menu {
    background-color: var(--bg-color-high) !important;
}

.high-contrast #floating-menu ul {
    background-color: var(--bg-color-high) !important;
}

.high-contrast #floating-menu ul li {
    background-color: var(--bg-color-high) !important;
}

.high-contrast #floating-menu ul li a {
    color: var(--btn-text-high) !important;
    font-weight: bold;
}

.high-contrast #floating-menu ul li:hover {
    background-color: var(--btn-bg-high) !important; /* Amarillo más suave */
    color: var(--btn-text-high) !important;
    width: 280px;

}

/* Asegurar que los iconos sean visibles */
.high-contrast #floating-menu ul li a span {
    color: var(--white-high) !important;
    filter: invert(0) !important; /* Evita que los íconos desaparezcan */
}

.high-contrast #floating-menu ul li .menu-text {
    color: var(--btn-text-high) !important;
}

.high-contrast .our-process-item .icon-box:before {
    background: var(--btn-bg-high) !important;
    color: var(--bg-color-high) !important;
}

.high-contrast .service-item:before {
    background: var(--btn-bg-high) !important;
    color: var(--bg-color-high) !important;
}

.high-contrast .service-item:hover .service-content p {
    color: var(--bg-color-high) !important;
}

.high-contrast .service-item:hover .redmore-btn {
    color: var(--bg-color-high) !important;
}

.high-contrast .happy-patients-counter .icon-box img, .high-contrast .experience-counter .icon-box img {
    filter: invert(1) !important; /* Evita que los íconos desaparezcan */
}


body.high-contrast {
    background: var(--bg-color-high) !important;
    color: var(--text-color-high) !important; /* Amarillo más suave */
}


/* Modo Alto Contraste */
.high-contrast .accessibility-panel {
    background-color: var(--bg-color-high) !important;
    color: var(--text-color-high) !important; /* Amarillo más suave */
}

.high-contrast .accessibility-panel button {
    background: yellow !important;
    color: var(--btn-text-high) !important;
}

/* =====================================
   2. Contraste Invertido
===================================== */


/* Alto Contraste */
.inverted-contrast {
    background-color: var(--bg-color-inver) !important;
    color: var(--text-color-inver) !important; /* Amarillo más suave */
}

.large-text {
    font-size: 1.5em !important;
}

.inverted-contrast {
    background-color: var(--bg-color-inver) !important;
    color: var(--text-color-inver) !important; /* Amarillo más suave */
}

.inverted-contrast a {
    color: var(--link-color-inver) !important; /* Verde brillante para enlaces */
}

.inverted-contrast a:hover {
    color: var(--text-color-inver) !important;
}

.inverted-contrast .btn-default {
    background: var(--bg-color-inver) !important; /* Verde brillante para enlaces */
    border: 2px solid var(--border-color-inver);
}

.inverted-contrast .btn-default::after {
    background: var(--white-high-inver) !important; /* Verde brillante para enlaces */
    border: 2px solid var(--border-color-inver);
}
.inverted-contrast .our-process-item .icon-box figure {
    filter: invert(1) contrast(2) !important;
}

.inverted-contrast .our-process-item .icon-box figure::after {
    filter: invert(0) contrast(0) !important;
}

.inverted-contrast .nav-link:hover {
    background: var(--hover-inver) !important; /* Verde brillante para enlaces */

}

/* Asegurar que todos los fondos blancos o claros cambien */
.inverted-contrast .floating-menu-right,
.inverted-contrast .hero,
.inverted-contrast .dropdown-content,
.inverted-contrast .contact-location-card,
.inverted-contrast .our-service,
.inverted-contrast .about-us,
.inverted-contrast .we-provide,
.inverted-contrast .our-blog,
.inverted-contrast .blog-item,
.inverted-contrast .why-choose-box,
.inverted-contrast .highlighted-text,
.inverted-contrast .service-item,
.inverted-contrast .icon-box,
.inverted-contrast .experience-counter,
.inverted-contrast .happy-patients-counter,
.inverted-contrast .main-footer,
.inverted-contrast .why-choose-us,
.inverted-contrast .our-process {
    background-color: var(--bg-color-inver) !important;
    color: var(--text-color-inver) !important; /* Amarillo más suave */
    border-color: var(--border-color-inver) !important; /* Amarillo más suave */
}

.inverted-contrast .happy-patients-counter .icon-box::before{
    background-color: white !important;
}

.inverted-contrast .happy-patients-counter .icon-box .img::after{
    color: var(--text-color-inver) !important; /* Amarillo más suave */
    border-color: var(--border-color-inver) !important; /* Amarillo más suave */

}

/* Botones */
.inverted-contrast .btn,
.inverted-contrast button {
    background-color: var(--btn-bg-inver) !important; /* Amarillo más suave */
    color: var(--btn-text-inver) !important;
    border: 1px solid var(--border-color-inver) !important;
}

.inverted-contrast .btn:hover,
.inverted-contrast button:hover {
    background-color: var(--btn-bg-inver) !important;
    color: var(--btn-text-inver) !important;
    border: 2px solid var(--bg-color-inver) !important;
}

/* Tarjetas */
.inverted-contrast .contact-location-card {
    background-color: var(--bg-color-inver) !important;
    color: var(--text-color-inver) !important; /* Amarillo más suave */
    border: 2px solid var(--border-color-inver) !important;
}

/* Iconos y sombras */
.inverted-contrast .material-symbols-outlined {
    color: var(--btn-text-inver) !important;
}

/* Evitar que imágenes se pierdan en fondo oscuro */
.inverted-contrast img {
    filter: invert(0) contrast(1.2) !important;
}

.inverted-contrast img.logo,
.inverted-contrast img.no-invert {
    filter: none !important;
}


/* Alto Contraste para el Header y Navbar */
.inverted-contrast .main-header {
    background-color: var(--bg-color-inver) !important;
    border-bottom: 2px solid var(--border-color-inver) !important;
}

.inverted-contrast .navbar-nav .nav-link {
    color: var(--text-color-inver) !important; /* Amarillo más suave */
}

.inverted-contrast .navbar-nav .nav-link:hover {
    color: var(--bg-color-inver) !important; /* Verde brillante al pasar el mouse */
}

.inverted-contrast .submenu ul {
    background-color: var(--bg-color-inver) !important;
    border: 1px solid var(--border-color-inver) !important;
}

.inverted-contrast .submenu ul li a {
    color: var(--text-color-inver) !important; /* Amarillo más suave */
}

.inverted-contrast .submenu ul li a:hover {
    background-color: var(--btn-bg-inver) !important; /* Amarillo más suave */
    color: var(--btn-text-inver) !important;
}

/* Botón destacado de agendar cita */
.inverted-contrast .btn-highlighted {
    background-color: var(--btn-bg-inver) !important; /* Amarillo más suave */
    color: var(--btn-text-inver) !important;
    border: 2px solid var(--bg-color-inver) !important;
}

/* Alto contraste para botones destacados */
.inverted-contrast .btn-default.btn-highlighted {
    background-color: var(--btn-bg-inver) !important; /* Amarillo más suave */
    color: var(--btn-text-inver) !important;
    border: 2px solid var(--bg-color-inver) !important;
}

/* Ajuste de color en pseudo-elementos */
.inverted-contrast .btn-default.btn-highlighted::before,
.inverted-contrast .btn-default.btn-highlighted::after {
    border-color: var(--border-color-inver) !important; /* Amarillo más suave */ /* Ajusta bordes si es necesario */
    filter: invert(1); /* Invierte el color para mejor visibilidad */
}

/* Modo alto contraste para listas */
.inverted-contrast ul,
.inverted-contrast ol {
    background-color: var(--bg-color-inver) !important;
    color: var(--text-color-inver) !important; /* Amarillo más suave */
    border: none !important;
}

/* Estilos específicos para elementos de lista */
.inverted-contrast li {
    color: var(--text-color-inver) !important; /* Amarillo más suave */
    background-color: var(--bg-color-inver) !important;
    /* border-left: 4px solid var(--border-color-inver) !important;
    padding: 5px 10px;
    margin-bottom: 5px; */
}

/* Ajustar pseudo-elementos (::before) dentro de la lista */
.inverted-contrast li::before {
    color: var(--text-color-inver) !important; /* Amarillo más suave */
    background-color: var(--bg-color-inver) !important;
    border-radius: 50%;
    padding: 5px;
}

/* Resaltar enlaces dentro de listas */
.inverted-contrast li a {
    color: var(--text-color-inver) !important; /* Verde brillante */
}

.inverted-contrast li a:hover {
    color: var(--btn-text-inver) !important;
    background-color: var(--btn-bg-inver) !important; /* Amarillo más suave */
}

/* Alto contraste para títulos */
.inverted-contrast h1,
.inverted-contrast h2,
.inverted-contrast h3,
.inverted-contrast h4,
.inverted-contrast h5,
.inverted-contrast h6 {
    color: var(--text-color-inver) !important; /* Amarillo más suave */
    background-color: var(--bg-color-inver) !important;
}

/* Ajuste para títulos dentro de `.split-line` */
.inverted-contrast .split-line {
    background-color: var(--bg-color-inver) !important;
    color: var(--text-color-inver) !important; /* Amarillo más suave */
    /* border-bottom: 2px solid var(--border-color-inver) !important; Agrega un borde amarillo */
}

/* Asegurar que elementos dentro de `split-line` sean visibles */
.inverted-contrast .split-line div {
    background-color: var(--bg-color-inver) !important;
    color: var(--text-color-inver) !important; /* Amarillo más suave */
}

/* Mejorar contraste en textos con sombras o efectos de animación */
.inverted-contrast .text-anime-style-3 {
    text-shadow: none !important;
    color: var(--text-color-inver) !important; /* Amarillo más suave */
}

/* Modo Alto Contraste */
.inverted-contrast #floating-menu {
    background-color: var(--bg-color-inver) !important;
}

.inverted-contrast #floating-menu ul {
    background-color: var(--bg-color-inver) !important;
}

.inverted-contrast #floating-menu ul li {
    background-color: var(--bg-color-inver) !important;
}

.inverted-contrast #floating-menu ul li a {
    color: var(--btn-text-inver) !important;
    font-weight: bold;
}

.inverted-contrast #floating-menu ul li:hover {
    background-color: var(--btn-bg-inver) !important; /* Amarillo más suave */
    color: var(--btn-text-inver) !important;
    width: 280px;

}

/* Asegurar que los iconos sean visibles */
.inverted-contrast #floating-menu ul li a span {
    color: var(--link-color-inver) !important;
    /* filter: invert(1) !important; Evita que los íconos desaparezcan */
}

.inverted-contrast #floating-menu ul li .menu-text {
    color: var(--btn-text-inver) !important;
}

.inverted-contrast .our-process-item .icon-box:before {
    background: var(--btn-bg-inver) !important;
    color: var(--bg-color-inver) !important;
}

.inverted-contrast .service-item:before {
    background: var(--btn-bg-inver) !important;
    color: var(--bg-color-inver) !important;
}

.inverted-contrast .service-item:hover .service-content p {
    color: var(--bg-color-inver) !important;
}

.inverted-contrast .service-item:hover .redmore-btn {
    color: var(--bg-color-inver) !important;
}

.inverted-contrast .happy-patients-counter .icon-box img, .inverted-contrast .experience-counter .icon-box img {
    filter: invert(1) !important; /* Evita que los íconos desaparezcan */
}


body.inverted-contrast {
    background: var(--bg-color-inver) !important;
    color: var(--text-color-inver) !important; /* Amarillo más suave */
}


/* Modo Alto Contraste */
.inverted-contrast .accessibility-panel {
    background-color: var(--bg-color-inver) !important;
    color: var(--text-color-inver) !important; /* Amarillo más suave */
}

.inverted-contrast .accessibility-panel button {
    background: yellow !important;
    color: var(--btn-text-inver) !important;
}

.inverted-contrast .why-choose-item .icon-box::before {
    background-color: var(--hover-inver) !important;
}

/* =====================================
   3. Contraste Oscuro
===================================== */

/* Alto Contraste */
.contrast-dark {
    background-color: var(--bg-color-oscuro) !important;
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
}

.large-text {
    font-size: 1.5em !important;
}

.contrast-dark {
    background-color: var(--bg-color-oscuro) !important;
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
}

.contrast-dark a {
    color: var(--text-color-oscuro) !important; /* Verde brillante para enlaces */
}

.contrast-dark a:hover {
    color: var(--bg-color-oscuro) !important;
}

.contrast-dark .btn-default {
    background: var(--bg-color-oscuro) !important; /* Verde brillante para enlaces */
    border: 2px solid var(--border-color-oscuro);
}

.contrast-dark .btn-default::after {
    background: var(--hover-oscuro) !important; /* Verde brillante para enlaces */
    border: 2px solid var(--border-color-oscuro);
}
.contrast-dark .our-process-item .icon-box figure {
    filter: invert(1) contrast(2) !important;
}

.contrast-dark .our-process-item .icon-box figure::after {
    filter: invert(0) contrast(0) !important;
}

.contrast-dark .nav-link:hover {
    background: var(--hover-oscuro) !important; /* Verde brillante para enlaces */

}



/* Asegurar que todos los fondos blancos o claros cambien */
.contrast-dark .floating-menu-right,
.contrast-dark .hero,
.contrast-dark .dropdown-content,
.contrast-dark .contact-location-card,
.contrast-dark .our-service,
.contrast-dark .about-us,
.contrast-dark .we-provide,
.contrast-dark .our-blog,
.contrast-dark .blog-item,
.contrast-dark .why-choose-box,
.contrast-dark .highlighted-text,
.contrast-dark .service-item,
.contrast-dark .icon-box,
.contrast-dark .experience-counter,
.contrast-dark .happy-patients-counter,
.contrast-dark .main-footer,
.contrast-dark .why-choose-us,
.contrast-dark .our-process {
    background-color: var(--bg-color-oscuro) !important;
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
    border-color: var(--border-color-oscuro) !important; /* Amarillo más suave */
}

.contrast-dark .happy-patients-counter .icon-box::before{
    background-color: white !important;
}

.contrast-dark .happy-patients-counter .icon-box .img::after{
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
    border-color: var(--border-color-oscuro) !important; /* Amarillo más suave */

}

/* Botones */
.contrast-dark .btn,
.contrast-dark button {
    background-color: var(--btn-bg-oscuro) !important; /* Amarillo más suave */
    color: var(--btn-text-oscuro) !important;
    border: 1px solid var(--border-color-oscuro) !important;
}

.contrast-dark .btn:hover,
.contrast-dark button:hover {
    background-color: var(--btn-bg-oscuro) !important;
    color: var(--btn-text-oscuro) !important;
    border: 2px solid var(--bg-color-oscuro) !important;
}

/* Tarjetas */
.contrast-dark .contact-location-card {
    background-color: var(--bg-color-oscuro) !important;
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
    border: 2px solid var(--border-color-oscuro) !important;
}

/* Iconos y sombras */
.contrast-dark .material-symbols-outlined {
    color: var(--btn-text-oscuro) !important;
}

/* Evitar que imágenes se pierdan en fondo oscuro */
.contrast-dark img {
    filter: invert(0) contrast(1.2) !important;
}

.contrast-dark img.logo,
.contrast-dark img.no-invert {
    filter: none !important;
}


/* Alto Contraste para el Header y Navbar */
.contrast-dark .main-header {
    background-color: var(--bg-color-oscuro) !important;
    border-bottom: 2px solid var(--border-color-oscuro) !important;
}

.contrast-dark .navbar-nav .nav-link {
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
}

.contrast-dark .navbar-nav .nav-link:hover {
    color: var(--bg-color-oscuro) !important; /* Verde brillante al pasar el mouse */
}

.contrast-dark .submenu ul {
    background-color: var(--bg-color-oscuro) !important;
    border: 1px solid var(--border-color-oscuro) !important;
}

.contrast-dark .submenu ul li a {
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
}

.contrast-dark .submenu ul li a:hover {
    background-color: var(--btn-bg-oscuro) !important; /* Amarillo más suave */
    color: var(--btn-text-oscuro) !important;
}

/* Botón destacado de agendar cita */
.contrast-dark .btn-highlighted {
    background-color: var(--btn-bg-oscuro) !important; /* Amarillo más suave */
    color: var(--btn-text-oscuro) !important;
    border: 2px solid var(--bg-color-oscuro) !important;
}

/* Alto contraste para botones destacados */
.contrast-dark .btn-default.btn-highlighted {
    background-color: var(--btn-bg-oscuro) !important; /* Amarillo más suave */
    color: var(--btn-text-oscuro) !important;
    border: 2px solid var(--bg-color-oscuro) !important;
}

/* Ajuste de color en pseudo-elementos */
.contrast-dark .btn-default.btn-highlighted::before,
.contrast-dark .btn-default.btn-highlighted::after {
    border-color: var(--border-color-oscuro) !important; /* Amarillo más suave */ /* Ajusta bordes si es necesario */
    filter: invert(1); /* Invierte el color para mejor visibilidad */
}

/* Modo alto contraste para listas */
.contrast-dark ul,
.contrast-dark ol {
    background-color: var(--bg-color-oscuro) !important;
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
    border: none !important;
}

/* Estilos específicos para elementos de lista */
.contrast-dark li {
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
    background-color: var(--bg-color-oscuro) !important;
    /* border-left: 4px solid var(--border-color-oscuro) !important; */
    /* padding: 5px 10px; */
    /* margin-bottom: 5px; */
}

/* Ajustar pseudo-elementos (::before) dentro de la lista */
.contrast-dark li::before {
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
    background-color: var(--bg-color-oscuro) !important;
    border-radius: 50%;
    padding: 5px;
}

/* Resaltar enlaces dentro de listas */
.contrast-dark li a {
    color: var(--text-color-oscuro) !important; /* Verde brillante */
}

.contrast-dark li a:hover {
    color: var(--btn-text-oscuro) !important;
    background-color: var(--btn-bg-oscuro) !important; /* Amarillo más suave */
}

/* Alto contraste para títulos */
.contrast-dark h1,
.contrast-dark h2,
.contrast-dark h3,
.contrast-dark h4,
.contrast-dark h5,
.contrast-dark h6 {
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
    background-color: var(--bg-color-oscuro) !important;
}

/* Ajuste para títulos dentro de `.split-line` */
.contrast-dark .split-line {
    background-color: var(--bg-color-oscuro) !important;
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
    /* border-bottom: 2px solid var(--border-color-oscuro) !important; Agrega un borde amarillo */
}

/* Asegurar que elementos dentro de `split-line` sean visibles */
.contrast-dark .split-line div {
    background-color: var(--bg-color-oscuro) !important;
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
}

/* Mejorar contraste en textos con sombras o efectos de animación */
.contrast-dark .text-anime-style-3 {
    text-shadow: none !important;
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
}

/* Modo Alto Contraste */
.contrast-dark #floating-menu {
    background-color: var(--bg-color-oscuro) !important;
}

.contrast-dark #floating-menu ul {
    background-color: var(--btn-text-light) !important;
}

.contrast-dark #floating-menu ul li {
    background-color: var(--bg-color-oscuro) !important;
}

.contrast-dark #floating-menu ul li a {
    /* color: var(--btn-text-oscuro) !important; */
    font-weight: bold;
}

.contrast-dark #floating-menu ul li:hover {
    background-color: var(--btn-bg-oscuro) !important; /* Amarillo más suave */
    color: var(--btn-text-oscuro) !important;
    width: 280px;

}

/* Asegurar que los iconos sean visibles */
.contrast-dark #floating-menu ul li a span {
    color: var(--white-inver) !important;
    filter: invert(0) !important; /* Evita que los íconos desaparezcan */
}

.contrast-dark #floating-menu ul li .menu-text {
    color: var(--btn-text-oscuro) !important;
}

.contrast-dark .our-process-item .icon-box:before {
    background: var(--btn-bg-oscuro) !important;
    color: var(--bg-color-oscuro) !important;
}

.contrast-dark .service-item:before {
    background: var(--btn-bg-oscuro) !important;
    color: var(--bg-color-oscuro) !important;
}

.contrast-dark .service-item:hover .service-content p {
    color: var(--bg-color-oscuro) !important;
}

.contrast-dark .service-item:hover .redmore-btn {
    color: var(--bg-color-oscuro) !important;
}

.contrast-dark .happy-patients-counter .icon-box img, .contrast-dark .experience-counter .icon-box img {
    filter: invert(1) !important; /* Evita que los íconos desaparezcan */
}


body.contrast-dark {
    background: var(--bg-color-oscuro) !important;
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
}


/* Modo Alto Contraste */
.contrast-dark .accessibility-panel {
    background-color: var(--bg-color-oscuro) !important;
    color: var(--text-color-oscuro) !important; /* Amarillo más suave */
}

.contrast-dark .accessibility-panel button {
    background: yellow !important;
    color: var(--btn-text-oscuro) !important;
}

.contrast-dark .why-choose-item .icon-box::before {
    background-color: var(--hover-oscuro) !important;
}

/* Estilos para cada modo de contraste */
body.contrast-dark {
    background: #222 !important;
    color: white !important;
}


/* =====================================
   4. Contraste de Luz
===================================== */

/* Alto Contraste */
.contrast-light {
    background-color: var(--bg-color-light) !important;
    color: var(--text-color-light) !important; /* Amarillo más suave */
}

.large-text {
    font-size: 1.5em !important;
}

.contrast-light {
    background-color: var(--bg-color-light) !important;
    color: var(--text-color-light) !important; /* Amarillo más suave */
}

.contrast-light a {
    color: var(--text-color-light) !important; /* Verde brillante para enlaces */
}

.contrast-light a:hover {
    color: var(--bg-color-light) !important;
}

.contrast-light .btn-default {
    background: var(--bg-color-light) !important; /* Verde brillante para enlaces */
    border: 2px solid var(--border-color-light);
}

.contrast-light .btn-default::after {
    background: var(--hover-light) !important; /* Verde brillante para enlaces */
    border: 2px solid var(--border-color-light);
}
.contrast-light .our-process-item .icon-box figure {
    filter: invert(1) contrast(2) !important;
}

.contrast-light .our-process-item .icon-box figure::after {
    filter: invert(0) contrast(0) !important;
}

.contrast-light .nav-link:hover {
    background: var(--hover-light) !important; /* Verde brillante para enlaces */

}



/* Asegurar que todos los fondos blancos o claros cambien */
.contrast-light .floating-menu-right,
.contrast-light .hero,
.contrast-light .dropdown-content,
.contrast-light .contact-location-card,
.contrast-light .our-service,
.contrast-light .about-us,
.contrast-light .we-provide,
.contrast-light .our-blog,
.contrast-light .blog-item,
.contrast-light .why-choose-box,
.contrast-light .highlighted-text,
.contrast-light .service-item,
/* .contrast-light .icon-box, */
.contrast-light .experience-counter,
.contrast-light .happy-patients-counter,
.contrast-light .why-choose-us,
.contrast-light .main-footer,
.contrast-light .our-process {
    background-color: var(--bg-color-light) !important;
    color: var(--text-color-light) !important; /* Amarillo más suave */
    border-color: var(--border-color-light) !important; /* Amarillo más suave */
}
.contrast-light .about-us p {
    color: var(--text-color-light) !important;
}

.contrast-light .hero p {
    color: var(--text-color-light) !important;
}
.contrast-light .we-provide p,
.contrast-light .why-choose-us p {
    color: var(--text-color-light) !important;
}

.contrast-light .main-footer p,
.contrast-light .main-footer .icon-box i {
    color: var(--text-color-light) !important;
    border-color: var(--text-color-light) !important;
}

.contrast-light .footer-social-links img {
    filter: invert(1) !important;
}

.contrast-light .happy-patients-counter .icon-box::before{
    background-color: var(--btn-text-light) !important;
    border-color: var(--border-color-light) !important; /* Amarillo más suave */
}

.contrast-light .happy-patients-counter .icon-box img{
    color: var(--text-color-light) !important; /* Amarillo más suave */
    border-color: var(--border-color-light) !important; /* Amarillo más suave */
}

.contrast-light .happy-patients-counter .icon-box .img::after{
    color: var(--text-color-light) !important; /* Amarillo más suave */
    border-color: var(--border-color-light) !important; /* Amarillo más suave */
}


/* Botones */
.contrast-light .btn,
.contrast-light button {
    background-color: var(--btn-bg-light) !important; /* Amarillo más suave */
    color: var(--btn-text-light) !important;
    border: 1px solid var(--border-color-light) !important;
}

.contrast-light .btn:hover,
.contrast-light button:hover {
    background-color: var(--btn-bg-light) !important;
    color: var(--btn-text-light) !important;
    border: 2px solid var(--bg-color-light) !important;
}

/* Tarjetas */
.contrast-light .contact-location-card {
    background-color: var(--bg-color-light) !important;
    color: var(--text-color-light) !important; /* Amarillo más suave */
    border: 2px solid var(--border-color-light) !important;
}

/* Iconos y sombras */
.contrast-light .material-symbols-outlined {
    color: var(--btn-text-light) !important;
}

/* Evitar que imágenes se pierdan en fondo oscuro */
.contrast-light img {
    filter: invert(1) contrast(1.2) !important;
}

.contrast-light img.logo,
.contrast-light img.no-invert {
    filter: invert(1) !important;
}


/* Alto Contraste para el Header y Navbar */
.contrast-light .main-header {
    background-color: var(--bg-color-light) !important;
    border-bottom: 2px solid var(--border-color-light) !important;
}

.contrast-light .navbar-nav .nav-link {
    color: var(--text-color-light) !important; /* Amarillo más suave */
}

.contrast-light .navbar-nav .nav-link:hover {
    color: var(--bg-color-light) !important; /* Verde brillante al pasar el mouse */
}

.contrast-light .submenu ul {
    background-color: var(--bg-color-light) !important;
    border: 1px solid var(--border-color-light) !important;
}

.contrast-light .submenu ul li a {
    color: var(--text-color-light) !important; /* Amarillo más suave */
}

.contrast-light .submenu ul li a:hover {
    background-color: var(--btn-bg-light) !important; /* Amarillo más suave */
    color: var(--btn-text-light) !important;
}

/* Botón destacado de agendar cita */
.contrast-light .btn-highlighted {
    background-color: var(--btn-bg-light) !important; /* Amarillo más suave */
    color: var(--btn-text-light) !important;
    border: 2px solid var(--bg-color-light) !important;
}

/* Alto contraste para botones destacados */
.contrast-light .btn-default.btn-highlighted {
    background-color: var(--btn-bg-light) !important; /* Amarillo más suave */
    color: var(--btn-text-light) !important;
    border: 2px solid var(--bg-color-light) !important;
}

/* Ajuste de color en pseudo-elementos */
.contrast-light .btn-default.btn-highlighted::before,
.contrast-light .btn-default.btn-highlighted::after {
    border-color: var(--border-color-light) !important; /* Amarillo más suave */ /* Ajusta bordes si es necesario */
    filter: invert(1); /* Invierte el color para mejor visibilidad */
}

/* Modo alto contraste para listas */
.contrast-light ul,
.contrast-light ol {
    background-color: var(--bg-color-light) !important;
    color: var(--text-color-light) !important; /* Amarillo más suave */
    border: none !important;
}

/* Estilos específicos para elementos de lista */
.contrast-light li {
    color: var(--text-color-light) !important; /* Amarillo más suave */
    background-color: var(--bg-color-light) !important;
    /* border-left: 4px solid var(--border-color-light) !important;
    padding: 5px 10px;
    margin-bottom: 5px; */
}

/* Ajustar pseudo-elementos (::before) dentro de la lista */
.contrast-light li::before {
    color: var(--text-color-light) !important; /* Amarillo más suave */
    background-color: var(--bg-color-light) !important;
    border-radius: 50%;
    padding: 5px;
}

/* Resaltar enlaces dentro de listas */
.contrast-light li a {
    color: var(--text-color-light) !important; /* Verde brillante */
}

.contrast-light li a:hover {
    color: var(--btn-text-light) !important;
    background-color: var(--btn-bg-light) !important; /* Amarillo más suave */
}

/* Alto contraste para títulos */
.contrast-light h1,
.contrast-light h2,
.contrast-light h3,
.contrast-light h4,
.contrast-light h5,
.contrast-light h6 {
    color: var(--text-color-light) !important; /* Amarillo más suave */
    background-color: var(--bg-color-light) !important;
}

/* Ajuste para títulos dentro de `.split-line` */
.contrast-light .split-line {
    background-color: var(--bg-color-light) !important;
    color: var(--text-color-light) !important; /* Amarillo más suave */
    /* border-bottom: 2px solid var(--border-color-light) !important; Agrega un borde amarillo */
}

/* Asegurar que elementos dentro de `split-line` sean visibles */
.contrast-light .split-line div {
    background-color: var(--bg-color-light) !important;
    color: var(--text-color-light) !important; /* Amarillo más suave */
}

/* Mejorar contraste en textos con sombras o efectos de animación */
.contrast-light .text-anime-style-3 {
    text-shadow: none !important;
    color: var(--text-color-light) !important; /* Amarillo más suave */
}

/* Modo Alto Contraste */
.contrast-light #floating-menu {
    background-color: var(--bg-color-light) !important;
}

.contrast-light #floating-menu ul {
    background-color: var(--bg-color-light) !important;
}

.contrast-light #floating-menu ul li {
    background-color: var(--bg-color-light) !important;
}

.contrast-light #floating-menu ul li a {
    color: var(--btn-text-light) !important;
    font-weight: bold;
}

.contrast-light #floating-menu ul li:hover {
    background-color: var(--btn-bg-light) !important; /* Amarillo más suave */
    color: var(--btn-text-light) !important;
    width: 280px;
}

/* Asegurar que los iconos sean visibles */
.contrast-light #floating-menu ul li a span {
    color: var(--white-inver) !important;
    filter: invert(0) !important; /* Evita que los íconos desaparezcan */
}

.contrast-light #floating-menu ul li .menu-text {
    color: var(--btn-text-light) !important;
}

.contrast-light .our-process-item .icon-box:before {
    background: var(--btn-bg-light) !important;
    color: var(--bg-color-light) !important;
}

.contrast-light .service-item:before {
    background: var(--btn-bg-light) !important;
    color: var(--bg-color-light) !important;
}

.contrast-light .service-item:hover .service-content p {
    color: var(--bg-color-light) !important;
}

.contrast-light .service-item:hover .redmore-btn {
    color: var(--bg-color-light) !important;
}

.contrast-light .happy-patients-counter .icon-box img, .contrast-light .experience-counter .icon-box img {
    filter: invert(0) !important; /* Evita que los íconos desaparezcan */
}


body.contrast-light {
    background: var(--bg-color-light) !important;
    color: var(--text-color-light) !important; /* Amarillo más suave */
}

/* Modo Alto Contraste */
.contrast-light .accessibility-panel {
    background-color: var(--bg-color-light) !important;
    color: var(--text-color-light) !important; /* Amarillo más suave */
}

.contrast-light .accessibility-panel button {
    background: yellow !important;
    color: var(--btn-text-light) !important;
}

.contrast-light .why-choose-item .icon-box {
    border: 1px solid var(--btn-text-light);
}

.contrast-light .why-choose-item .icon-box::before {
    background-color: var(--hover-light) !important;
}

body.contrast-light {
    background: #f9f9f9 !important;
    color: var(--btn-text-high) !important;
}

/* =====================================
   5. Contraste Inteligente
===================================== */

/* Alto Contraste */
.contrast-inteligente {
    background-color: var(--bg-color-inteligente) !important;
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
}

.large-text {
    font-size: 1.5em !important;
}

.contrast-inteligente {
    background-color: var(--bg-color-inteligente) !important;
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
}

.contrast-inteligente a {
    color: var(--text-color-inteligente) !important; /* Verde brillante para enlaces */
}

.contrast-inteligente a:hover {
    color: var(--bg-color-inteligente) !important;
}

.contrast-inteligente .btn-default {
    background: var(--bg-color-inteligente) !important; /* Verde brillante para enlaces */
    border: 2px solid var(--border-color-inteligente);
}

.contrast-inteligente .btn-default::after {
    background: var(--hover-inteligente) !important; /* Verde brillante para enlaces */
    border: 2px solid var(--border-color-inteligente);
}
.contrast-inteligente .our-process-item .icon-box figure {
    filter: invert(1) contrast(2) !important;
}

.contrast-inteligente .our-process-item .icon-box figure::after {
    filter: invert(0) contrast(0) !important;
}

.contrast-inteligente .nav-link:hover {
    background: var(--hover-inteligente) !important; /* Verde brillante para enlaces */

}



/* Asegurar que todos los fondos blancos o claros cambien */
.contrast-inteligente .floating-menu-right,
.contrast-inteligente .hero,
.contrast-inteligente .dropdown-content,
.contrast-inteligente .contact-location-card,
.contrast-inteligente .our-service,
.contrast-inteligente .about-us,
.contrast-inteligente .we-provide,
.contrast-inteligente .our-blog,
.contrast-inteligente .blog-item,
.contrast-inteligente .why-choose-box,
.contrast-inteligente .highlighted-text,
.contrast-inteligente .service-item,
.contrast-inteligente .icon-box,
.contrast-inteligente .experience-counter,
.contrast-inteligente .happy-patients-counter,
.contrast-inteligente .main-footer,
.contrast-inteligente .why-choose-us,
.contrast-inteligente .our-process {
    background-color: var(--bg-color-inteligente) !important;
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
    border-color: var(--border-color-inteligente) !important; /* Amarillo más suave */
}

.contrast-inteligente .happy-patients-counter .icon-box::before{
    background-color: white !important;
}

.contrast-inteligente .happy-patients-counter .icon-box .img::after{
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
    border-color: var(--border-color-inteligente) !important; /* Amarillo más suave */

}

/* Botones */
.contrast-inteligente .btn,
.contrast-inteligente button {
    background-color: var(--btn-bg-inteligente) !important; /* Amarillo más suave */
    color: var(--btn-text-inteligente) !important;
    border: 1px solid var(--border-color-inteligente) !important;
}

.contrast-inteligente .btn:hover,
.contrast-inteligente button:hover {
    background-color: var(--btn-bg-inteligente) !important;
    color: var(--btn-text-inteligente) !important;
    border: 2px solid var(--bg-color-inteligente) !important;
}

/* Tarjetas */
.contrast-inteligente .contact-location-card {
    background-color: var(--bg-color-inteligente) !important;
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
    border: 2px solid var(--border-color-inteligente) !important;
}

/* Iconos y sombras */
.contrast-inteligente .material-symbols-outlined {
    color: var(--btn-text-inteligente) !important;
}

/* Evitar que imágenes se pierdan en fondo oscuro */
.contrast-inteligente img {
    filter: invert(0) contrast(1.2) !important;
}

.contrast-inteligente img.logo,
.contrast-inteligente img.no-invert {
    filter: none !important;
}


/* Alto Contraste para el Header y Navbar */
.contrast-inteligente .main-header {
    background-color: var(--bg-color-inteligente) !important;
    border-bottom: 2px solid var(--border-color-inteligente) !important;
}

.contrast-inteligente .navbar-nav .nav-link {
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
}

.contrast-inteligente .navbar-nav .nav-link:hover {
    color: var(--bg-color-inteligente) !important; /* Verde brillante al pasar el mouse */
}

.contrast-inteligente .submenu ul {
    background-color: var(--bg-color-inteligente) !important;
    border: 1px solid var(--border-color-inteligente) !important;
}

.contrast-inteligente .submenu ul li a {
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
}

.contrast-inteligente .submenu ul li a:hover {
    background-color: var(--btn-bg-inteligente) !important; /* Amarillo más suave */
    color: var(--btn-text-inteligente) !important;
}

/* Botón destacado de agendar cita */
.contrast-inteligente .btn-highlighted {
    background-color: var(--btn-bg-inteligente) !important; /* Amarillo más suave */
    color: var(--btn-text-inteligente) !important;
    border: 2px solid var(--bg-color-inteligente) !important;
}

/* Alto contraste para botones destacados */
.contrast-inteligente .btn-default.btn-highlighted {
    background-color: var(--btn-bg-inteligente) !important; /* Amarillo más suave */
    color: var(--btn-text-inteligente) !important;
    border: 2px solid var(--bg-color-inteligente) !important;
}

/* Ajuste de color en pseudo-elementos */
.contrast-inteligente .btn-default.btn-highlighted::before,
.contrast-inteligente .btn-default.btn-highlighted::after {
    border-color: var(--border-color-inteligente) !important; /* Amarillo más suave */ /* Ajusta bordes si es necesario */
    filter: invert(1); /* Invierte el color para mejor visibilidad */
}

/* Modo alto contraste para listas */
.contrast-inteligente ul,
.contrast-inteligente ol {
    background-color: var(--bg-color-inteligente) !important;
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
    border: none !important;
}

/* Estilos específicos para elementos de lista */
.contrast-inteligente li {
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
    background-color: var(--bg-color-inteligente) !important;
    /* border-left: 4px solid var(--border-color-inteligente) !important; */
    /* padding: 5px 10px; */
    /* margin-bottom: 5px; */
}

/* Ajustar pseudo-elementos (::before) dentro de la lista */
.contrast-inteligente li::before {
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
    background-color: var(--bg-color-inteligente) !important;
    border-radius: 50%;
    padding: 5px;
}

/* Resaltar enlaces dentro de listas */
.contrast-inteligente li a {
    color: var(--text-color-inteligente) !important; /* Verde brillante */
}

.contrast-inteligente li a:hover {
    color: var(--btn-text-inteligente) !important;
    background-color: var(--btn-bg-inteligente) !important; /* Amarillo más suave */
}

/* Alto contraste para títulos */
.contrast-inteligente h1,
.contrast-inteligente h2,
.contrast-inteligente h3,
.contrast-inteligente h4,
.contrast-inteligente h5,
.contrast-inteligente h6 {
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
    background-color: var(--bg-color-inteligente) !important;
}

/* Ajuste para títulos dentro de `.split-line` */
.contrast-inteligente .split-line {
    background-color: var(--bg-color-inteligente) !important;
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
    /* border-bottom: 2px solid var(--border-color-inteligente) !important; Agrega un borde amarillo */
}

/* Asegurar que elementos dentro de `split-line` sean visibles */
.contrast-inteligente .split-line div {
    background-color: var(--bg-color-inteligente) !important;
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
}

/* Mejorar contraste en textos con sombras o efectos de animación */
.contrast-inteligente .text-anime-style-3 {
    text-shadow: none !important;
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
}

/* Modo Alto Contraste */
.contrast-inteligente #floating-menu {
    background-color: var(--bg-color-inteligente) !important;
}

.contrast-inteligente #floating-menu ul {
    background-color: var(--btn-text-light) !important;
}

.contrast-inteligente #floating-menu ul li {
    background-color: var(--bg-color-inteligente) !important;
}

.contrast-inteligente #floating-menu ul li a {
    /* color: var(--btn-text-inteligente) !important; */
    font-weight: bold;
}

.contrast-inteligente #floating-menu ul li:hover {
    background-color: var(--btn-bg-inteligente) !important; /* Amarillo más suave */
    color: var(--btn-text-inteligente) !important;
    width: 280px;

}

/* Asegurar que los iconos sean visibles */
.contrast-inteligente #floating-menu ul li a span {
    color: var(--white-inver) !important;
    filter: invert(0) !important; /* Evita que los íconos desaparezcan */
}

.contrast-inteligente #floating-menu ul li .menu-text {
    color: var(--btn-text-inteligente) !important;
}

.contrast-inteligente .our-process-item .icon-box:before {
    background: var(--btn-bg-inteligente) !important;
    color: var(--bg-color-inteligente) !important;
}

.contrast-inteligente .service-item:before {
    background: var(--btn-bg-inteligente) !important;
    color: var(--bg-color-inteligente) !important;
}

.contrast-inteligente .service-item:hover .service-content p {
    color: var(--bg-color-inteligente) !important;
}

.contrast-inteligente .service-item:hover .redmore-btn {
    color: var(--bg-color-inteligente) !important;
}

.contrast-inteligente .happy-patients-counter .icon-box img, .contrast-inteligente .experience-counter .icon-box img {
    filter: invert(1) !important; /* Evita que los íconos desaparezcan */
}


body.contrast-inteligente {
    background: var(--bg-color-inteligente) !important;
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
}


/* Modo Alto Contraste */
.contrast-inteligente .accessibility-panel {
    background-color: var(--bg-color-inteligente) !important;
    color: var(--text-color-inteligente) !important; /* Amarillo más suave */
}

.contrast-inteligente .accessibility-panel button {
    background: yellow !important;
    color: var(--btn-text-inteligente) !important;
}

.contrast-inteligente .why-choose-item .icon-box::before {
    background-color: var(--hover-inteligente) !important;
}

/* Estilos para cada modo de contraste */
body.contrast-inteligente {
    background: #222 !important;
    color: white !important;
}