/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Oct 21 2026 | 18:17:31 */
/* =======================================================================
   1. CONTENEDOR DEL MENÚ: FONDO, SOMBRA Y TRANSICIÓN
======================================================================= */
/* Estado Normal (Tope de página): Transparente */
#menu-flotante, 
#menu-responsive,
#menu-blog {
    background-color: transparent !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease !important;
}

/* Estado Scroll (.active): Fondo Blanco y Sombra */
#menu-flotante.active, 
#menu-responsive.active,
#menu-blog.active {
    background-color: #ffffff !important;
    box-shadow: 0 0 11px 6px rgba(0, 0, 0, 0.14) !important;
}

/* Transición de Padding (Reducción suave al bajar) */
#menu-flotante .et_pb_row,
#menu-responsive .et_pb_row {
    transition: padding 0.3s ease !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
#menu-flotante.active .et_pb_row,
#menu-responsive.active .et_pb_row {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* =======================================================================
   2. TEXTOS Y ENLACES DEL MENÚ DESKTOP
======================================================================= */
/* Estado Normal: Texto Blanco */
.et_pb_menu--without-logo .et_pb_menu__menu > nav > ul > li > a,
#menu-flotante .et_pb_menu__menu > nav > ul > li > a,
#menu-responsive .et_pb_menu__menu > nav > ul > li > a {
    color: #ffffff !important;
    font-family: 'Verdana', sans-serif;
    font-weight: 400;
    font-size: 16px;
    padding-bottom: 8px;
    transition: color 0.3s ease !important;
}

/* Estado Scroll (.active): Texto Negro */
#menu-flotante.active .et_pb_menu__menu > nav > ul > li > a,
#menu-responsive.active .et_pb_menu__menu > nav > ul > li > a {
    color: #000000 !important;
}

/* =======================================================================
   3. INTERCAMBIO DINÁMICO DE LOGOS (TÉCNICA DOM TOGGLE)
======================================================================= */
/* Ocultamos el logo de color por defecto */
.logo-color-header {
    display: none !important;
}
.logo-blanco-header {
    display: block !important;
    animation: fadeInLogo 0.3s ease-in-out;
}

/* Al hacer scroll (.active): Ocultamos el blanco y mostramos el de color */
#menu-flotante.active .logo-blanco-header,
#menu-responsive.active .logo-blanco-header {
    display: none !important;
}
#menu-flotante.active .logo-color-header,
#menu-responsive.active .logo-color-header {
    display: block !important;
    animation: fadeInLogo 0.3s ease-in-out;
}

/* Animación suave para evitar parpadeos visuales (flicker) */
@keyframes fadeInLogo {
    from { opacity: 0; }
    to { opacity: 1; }
}