/* ======================================================
    FIX DE ESTILOS (Colores de Footer y Fondo de Cursos)
======================================================
*/

/* --- Colores de la paleta --- */
:root {
    --color-azul-oscuro: #142448;
    --color-teal: #029E99;
    --color-azul-claro: #59D2EC;
    --color-casi-blanco: #EBECE8;
}

/* --- 1. FONDO PÁGINA DE CURSOS --- 
(Aplica el fondo gris que pediste en image_3ce797.jpg)
*/
body.body-gray-bg {
    background-color: #f4f4f4 !important; /* Fondo gris claro */
}

/* Anula el fondo azul de .courses-section en courses-blue-cards.css */
body.body-gray-bg .courses-section {
    background: none !important;
    background-color: transparent !important;
}


/* --- 2. COLORES DEL FOOTER --- 
(Aplica los colores de image_4aec58.jpg y image_4af855.png)
*/

/* Títulos de sección (QUICK LINKS, CONTÁCTANOS, etc) */
.footer-heading,
.footer-contact-title {
    color: var(--color-teal) !important;
}

/* Slogan "X-Learning Online" */
.footer-slogan {
    color: var(--color-casi-blanco) !important;
}

/* Links (Inicio, Cursos, etc) y Texto (tel, email) */
.footer-links a,
.footer-contact-item span,
.footer-copyright p {
    color: var(--color-casi-blanco) !important;
}

.footer-links a:hover {
    color: var(--color-azul-claro) !important;
}

/* Iconos de contacto (teléfono, email) */
.footer-contact-item i {
    color: var(--color-teal) !important;
}

/* Iconos de Redes Sociales (Facebook, Insta, etc) */
.footer .social-icons .btn-social {
    background-color: transparent !important;
    border: 1px solid var(--color-casi-blanco) !important;
    color: var(--color-casi-blanco) !important;
}
.footer .social-icons .btn-social i {
    color: var(--color-casi-blanco) !important;
}
.footer .social-icons .btn-social:hover {
    background-color: var(--color-casi-blanco) !important;
}
.footer .social-icons .btn-social:hover i {
    color: var(--color-azul-oscuro) !important;
}