.slicknav_nav ul { list-style: none; padding: 5px 0; margin: 0; } .slicknav_nav li { display: block; } .slicknav_nav a { padding: 12px 20px; text-decoration: none; display: flex; align-items: center; font-size: 1rem; } .slicknav_nav .slicknav_selected > a, .slicknav_nav li.active > a { background-color: #e91e63; /* Rosa para el activo */ color: white !important; font-weight: bold; } .slicknav_nav a .material-icons { font-size: 1.3rem; margin-right: 15px; } .slicknav_nav .slicknav_selected > a, .slicknav_nav li.active > a { background-color: #F57C00; /* Naranja (o el que elegiste) */ color: white !important; font-weight: bold; } .slicknav_btn { /* ... otros estilos ... */ padding: 5px 8px; /* Ajustar padding si el borde cambia el tamaño */ background-color: #4c4c4c!important; text-shadow: none!important; margin-top: 20px!important; } .slicknav_menutxt { /* ... otros estilos ... */ font-size: 1.2rem !important; /* Texto "PRODUCTOS" un poco más pequeño */ margin-right: 6px; /* Espacio ajustado */ line-height: none!important; font-weight: 580!important; text-shadow: 0px!important; } .slicknav_menu{ padding: 10px!important; } .slicknav_menu .slicknav_menutxt{ text-shadow: none!important; } .slicknav_menu .slicknav_icon{ margin: 0px!important; margin-top: 3px!important; } /* ========================================================================== Estilos para la Animación del Logo (MÓVIL EXCLUSIVAMENTE) ========================================================================== */ /* Estilo base del logo en MÓVIL */ @media only screen and (max-width: 600px) { /* Estilo base del logo en MÓVIL cuando el menú está CERRADO */ .logo-area .logo { display: block !important; /* Importante para que height/width y transiciones funcionen bien */ height: 65px !important; /* Tamaño INICIAL del logo */ width: auto !important; margin: right 10px!important; /* Mantiene la proporción */ vertical-align: middle !important; /* Alineación vertical */ /* Transición SUAVE para la propiedad 'height' */ transition: height 0.3s ease-in-out !important; /* Para navegadores más antiguos, podrías necesitar prefijos, aunque para height suelen ser estándar: */ /* -webkit-transition: height 0.3s ease-in-out !important; */ /* -moz-transition: height 0.3s ease-in-out !important; */ /* -o-transition: height 0.3s ease-in-out !important; */ } /* Estilo del logo cuando el menú SlickNav está ABIERTO (y estamos en móvil) */ /* Esta regla se activa cuando tiene 'slicknav-open-logo-large' Y la pantalla es <= 600px */ body.slicknav-open-logo-large .logo-area .logo { height: 115px !important; /* Nuevo tamaño del logo en MÓVIL cuando el menú está ABIERTO */ } /* Opcional: Ajustar la altura de la barra .nav-container en MÓVIL cuando el logo es grande */ /* Base para la transición de .nav-container (si quieres que la barra también se anime) */ .nav-container { min-height: 60px; /* Altura base de tu .nav-container en móvil */ transition: min-height 0.3s ease-in-out; /* Animación para la altura de la barra */ } /* Cuando el logo es grande, la barra también puede crecer */ body.slicknav-open-logo-large .nav-container { min-height: 90px !important; /* Altura para acomodar el logo de 80px. Ajusta este valor. */ } }