/* Custom CSS para desactivar el efecto de subrayado verde del menú */

/* ELIMINAR COMPLETAMENTE EL SUBRAYADO VERDE */

/* Desactivar el pseudo-elemento ::after que crea el subrayado verde */
.tt-menu-nav > li > a::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
    content: none !important;
}

/* Desactivar el efecto hover del subrayado */
.tt-menu-nav > li > a:hover::after,
.tt-menu-nav > li.active > a::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
    content: none !important;
}

/* Desactivar las reglas de opacidad relacionadas */
#header.header-transparent.header-filled .tt-menu-nav > li > a::after,
#header.header-transparent.header-transparent-dark .tt-menu-nav > li > a::after,
#header.header-transparent .tt-menu-nav > li > a::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
    content: none !important;
}

/* Eliminar TODAS las variaciones del pseudo-elemento ::after */
.tt-menu-nav > li > a::after,
.tt-menu-nav > li > a:hover::after,
.tt-menu-nav > li.active > a::after,
#header.header-transparent .tt-menu-nav > li > a::after,
#header.header-transparent.header-filled .tt-menu-nav > li > a::after,
#header.header-transparent.header-transparent-dark .tt-menu-nav > li > a::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    position: static !important;
    transform: none !important;
}

/* HACER EL LOGO MÁS GRANDE */

/* Logo extra grande para pantallas grandes */
#header #logo img {
    max-height: 50px !important; /* Cambiado a 50px para extra grande */
}

/* Logo extra grande para móviles */
@media (max-width: 991px) {
    #header #logo img {
        max-height: 45px !important; /* Cambiado a 45px para extra grande */
    }
}

/* Ajustar la posición del logo para el tamaño extra grande */
#logo {
    top: 15px !important; /* Ajustado para compensar el logo más grande */
}

@media (max-width: 991px) {
    #header #logo {
        top: 8px !important; /* Ajustado para compensar el logo más grande */
    }
}

/* CAMBIAR HEADER A FONDO NEGRO AL HACER SCROLL */

/* Header con fondo negro al hacer scroll */
#header.header-transparent.header-filled {
    background-color: #000000 !important; /* Fondo negro en lugar de blanco */
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

/* Mantener logo claro cuando el header tiene fondo negro */
#header.header-transparent.header-filled #logo .logo-light {
    display: block !important;
}

#header.header-transparent.header-filled #logo .logo-dark {
    display: none !important;
}

/* Cambiar color del texto del menú a blanco cuando header es negro */
#header.header-transparent.header-filled .tt-menu-nav > li > a,
#header.header-transparent.header-filled .header-attributes > ul > li > a {
    color: #ffffff !important; /* Texto blanco */
}

/* REGLAS ESPECÍFICAS PARA MÓVILES CON HEADER NEGRO */

/* En móviles, mostrar logo claro cuando header tiene fondo negro */
@media (max-width: 991px) {
    #header.header-transparent.header-filled #logo .logo-light-m {
        display: block !important; /* Logo claro móvil visible */
    }
    
    #header.header-transparent.header-filled #logo .logo-dark-m {
        display: none !important; /* Logo oscuro móvil oculto */
    }
    
    /* Forzar que siempre se use el logo claro en móviles */
    #logo .logo-light-m {
        display: block !important;
    }
    
    #logo .logo-dark-m {
        display: none !important;
    }
    
    /* Sobrescribir todas las variaciones */
    #header.header-transparent #logo .logo-light-m,
    #header.header-transparent-dark #logo .logo-light-m,
    #header.header-transparent.header-filled #logo .logo-light-m {
        display: block !important;
    }
    
    #header.header-transparent #logo .logo-dark-m,
    #header.header-transparent-dark #logo .logo-dark-m,
    #header.header-transparent.header-filled #logo .logo-dark-m {
        display: none !important;
    }
}

/* SOLUCIÓN AGRESIVA PARA MÓVILES - MÁXIMA ESPECIFICIDAD */
@media (max-width: 991px) {
    body #header #logo .logo-light-m {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    body #header #logo .logo-dark-m {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Sobrescribir cualquier regla del tema */
    body #header.header-transparent #logo .logo-light-m,
    body #header.header-transparent-dark #logo .logo-light-m,
    body #header.header-transparent.header-filled #logo .logo-light-m {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    body #header.header-transparent #logo .logo-dark-m,
    body #header.header-transparent-dark #logo .logo-dark-m,
    body #header.header-transparent.header-filled #logo .logo-dark-m {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* CAMBIAR COLOR DEL BOTÓN DEL MENÚ MÓVIL A BLANCO */

/* Botón del menú móvil en color blanco */
#tt-m-menu-toggle-btn span,
#tt-m-menu-toggle-btn span::before,
#tt-m-menu-toggle-btn span::after {
    background-color: #ffffff !important; /* Color blanco */
}

/* Botón del menú móvil en color blanco para todos los estados */
@media (max-width: 991px) {
    #tt-m-menu-toggle-btn span,
    #tt-m-menu-toggle-btn span::before,
    #tt-m-menu-toggle-btn span::after {
        background-color: #ffffff !important; /* Color blanco */
    }
    
    /* Mantener blanco incluso cuando el menú está abierto */
    body.tt-m-menu-open #tt-m-menu-toggle-btn span::before,
    body.tt-m-menu-open #tt-m-menu-toggle-btn span::after {
        background-color: #ffffff !important; /* Color blanco */
    }
}

/* CAMBIAR COLOR DEL SELECTOR DE IDIOMA A BLANCO EN MÓVILES */

/* Selector de idioma en color blanco para móviles */
@media (max-width: 991px) {
    .header-attributes > ul > li > a {
        color: #ffffff !important; /* Texto blanco */
    }
    
    /* Específicamente para el selector de idioma */
    .h-attr-dropdown-wrap.h-attr-dropdown-master.h-attr-lang > a {
        color: #ffffff !important; /* Texto blanco */
    }
    
    /* Para todos los elementos de header attributes */
    #header .header-attributes > ul > li > a {
        color: #ffffff !important; /* Texto blanco */
    }
    
    /* Sobrescribir cualquier regla del tema */
    body #header .header-attributes > ul > li > a {
        color: #ffffff !important; /* Texto blanco */
    }
}

/* ELIMINAR TODOS LOS EFECTOS DE HOVER EN EL NAVBAR */

/* Eliminar transiciones de hover en enlaces principales del navbar */
.tt-menu-nav > li > a {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
}

/* Eliminar efectos de hover en enlaces principales del navbar */
.tt-menu-nav > li > a:hover,
.tt-menu-nav > li.active > a {
    color: inherit !important;
    background: none !important;
    text-decoration: none !important;
}

/* Eliminar efectos de hover en enlaces de submenús */
.tt-submenu .tt-submenu-list li > a:hover {
    color: inherit !important;
    background: none !important;
    text-decoration: none !important;
}

/* Eliminar transiciones en enlaces de submenús */
.tt-submenu .tt-submenu-list li > a {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
}

/* Eliminar efectos de hover en enlaces activos de submenús */
.tt-submenu .tt-submenu-list > li.active > a {
    color: inherit !important;
    background: none !important;
    text-decoration: none !important;
}

/* Eliminar efectos de hover en submenús */
.tt-submenu {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
}

/* Eliminar efectos de hover en submenús */
.tt-submenu {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* Eliminar efectos de hover en submenús anidados */
.tt-submenu .tt-submenu-wrap:hover > .tt-submenu {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* Eliminar efectos de hover en submenús de tercer nivel */
.tt-submenu .tt-submenu {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* Eliminar efectos de hover en submenús de tercer nivel */
.tt-submenu .tt-submenu-wrap:hover > .tt-submenu {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* CAMBIAR COLOR DEL FOOTER DE MORADO/AZUL A NEGRO */

/* Cambiar el color de fondo del footer a negro */
#footer {
    background-color: #000000 !important; /* Negro */
}

/* Cambiar el color de fondo del footer-bottom a un gris muy oscuro */
.footer-bottom {
    background-color: #1a1a1a !important; /* Gris muy oscuro */
}

/* Cambiar el color de los enlaces del footer a blanco */
#footer ul.f-block-links > li > a {
    color: #ffffff !important; /* Blanco para texto */
}

#footer ul.f-block-links > li > a:hover {
    color: #cccccc !important; /* Gris claro en hover */
}

/* Cambiar el color de los enlaces de texto del footer */
#footer .f-block-text a {
    color: #ffffff !important; /* Blanco */
}

#footer .f-block-text a:hover {
    color: #cccccc !important; /* Gris claro en hover */
    border-bottom-color: #cccccc !important;
}

/* Cambiar el color de los títulos del footer */
#footer .f-block-heading {
    color: #ffffff !important; /* Blanco para títulos */
}

/* Cambiar el color del texto del footer */
#footer .f-block-text {
    color: #cccccc !important; /* Gris claro para texto */
}

/* Cambiar el color del copyright */
.footer-bottom-col-left,
.footer-bottom-col-right {
    color: #cccccc !important; /* Gris claro */
}

.footer-bottom-col-right a {
    color: #ffffff !important; /* Blanco para enlaces */
}

.footer-bottom-col-right a:hover {
    color: #cccccc !important; /* Gris claro en hover */
}

/* Eliminar cualquier efecto de subrayado de color en el footer */
#footer ul.f-block-links > li > a::after {
    background: transparent !important; /* Sin color de fondo */
    opacity: 0 !important; /* Completamente transparente */
}

#footer ul.f-block-links > li > a:hover::after {
    background: transparent !important; /* Sin color de fondo */
    opacity: 0 !important; /* Completamente transparente */
}

/* CAMBIAR COLOR DEL BODY A NEGRO */

/* Cambiar el color de fondo del body a negro */
body {
    background-color: #000000 !important; /* Negro */
}

/* Asegurar que el texto del body sea blanco para contraste */
body {
    color: #ffffff !important; /* Blanco */
}

/* MOSTRAR LOGO CLARO EN EL FOOTER CON FONDO NEGRO */

/* Mostrar logo claro en el footer para pantallas grandes */
#footer .f-block-logo .logo-light {
    display: block !important; /* Mostrar logo claro */
}

#footer .f-block-logo .logo-dark {
    display: none !important; /* Ocultar logo oscuro */
}

/* Mostrar logo claro móvil en el footer para pantallas pequeñas */
@media (max-width: 767px) {
    #footer .f-block-logo .logo-light-m {
        display: block !important; /* Mostrar logo claro móvil */
    }
    
    #footer .f-block-logo .logo-dark-m {
        display: none !important; /* Ocultar logo oscuro móvil */
    }
}