/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 15 2026 | 20:44:54 */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

/* Este CSS mejora el menú desplegable para un look profesional y de lujo.
   - Añade transiciones suaves al abrir/cerrar.
   - Usa colores premium: fondo negro sutil, texto oro.
   - Asegura responsividad y seguridad (no bloquea clics accidentales).
   - Colócalo en CSS adicional para no editar archivos del tema directamente. */

.main-navigation .sub-menu {  /* Estilo para el desplegable */
    background-color: #000000;  /* Fondo negro para elegancia */
    border: 1px solid #A28200;  /* Borde oro para toque de lujo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  /* Sombra sutil para profundidad */
    opacity: 0;  /* Inicialmente invisible para animación */
    transition: opacity 0.3s ease, transform 0.3s ease;  /* Transición suave */
    transform: translateY(-10px);  /* Efecto de "caída" desde arriba */
}

.main-navigation .menu-item-has-children:hover > .sub-menu {  /* Al hover en desktop */
    opacity: 1;  /* Muestra con fade-in */
    transform: translateY(0);  /* Baja suavemente */
}

.main-navigation .sub-menu li a {  /* Estilo de los subítems */
    color: #A28200;  /* Texto oro */
    padding: 10px 20px;  /* Espacio para comodidad */
    font-size: 14px;  /* Tamaño legible */
    transition: background-color 0.2s ease;  /* Hover suave */
}

.main-navigation .sub-menu li a:hover {  /* Efecto al pasar el mouse */
    background-color: #1a1a1a;  /* Fondo más oscuro para resaltar */
    color: #ffffff;  /* Texto blanco para contraste */
}

/* Para móviles: Asegura que el desplegable se abra al clic, manteniendo seguridad */
@media (max-width: 768px) {
    .main-navigation .sub-menu {
        position: static;  /* Adapta a menú hamburguesa */
        opacity: 1;  /* Siempre visible al togglear */
        transform: none;  /* Sin animación extra en mobile para velocidad */
    }
}