@media (min-width: 769px) {
    .mobile-menu-wrapper,
    .mobile-menu-container,
    .menu-mobile-effect,
    #masthead-mobile,
    .menu-mobile-active {
        display: none !important;
        width: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}


/* =========================================================
   EFECTOS VISUALES PREMIUM - FORMAMOS
   ========================================================= */

/* 1. Desplazamiento suave (Smooth Scroll) en toda la página */
html {
    scroll-behavior: smooth !important;
}

/* 2. Barra de desplazamiento (Scrollbar) personalizada con tus colores */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #0a101b; /* Color oscuro que hace juego con tu tema */
}
::-webkit-scrollbar-thumb {
    background: #00e5ff; /* Tu color cyan de marca */
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #00b8cc; /* Cyan un poco más oscuro al pasar el ratón */
}

/* 3. Efecto de elevación y sombra luminosa para los botones */
button, 
.button, 
.btn,
.wp-block-button__link,
.thim-button,
input[type="submit"] {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

button:hover, 
.button:hover, 
.btn:hover,
.wp-block-button__link:hover,
.thim-button:hover,
input[type="submit"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0, 229, 255, 0.3) !important; /* Sombra cyan que brilla */
}

/* 4. Efecto de "Zoom Suave" para las imágenes de los cursos o tarjetas */
.course-thumbnail img,
.post-thumbnail img,
.wpb_single_image img {
    transition: transform 0.5s ease !important;
}

.course-item:hover .course-thumbnail img,
.post-item:hover .post-thumbnail img,
.wpb_single_image:hover img {
    transform: scale(1.05) !important;
}

/* 5. Subrayado animado moderno para los enlaces del menú principal */
#masthead .menu > li > a {
    position: relative;
}
#masthead .menu > li > a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: #00e5ff;
    transition: width 0.3s ease;
}
#masthead .menu > li:hover > a::after,
#masthead .menu > li.current-menu-item > a::after {
    width: 100%;
    left: 0;
    background: #00e5ff;
}