:root {
    /* Colores basados en tus imágenes */
    --nav-bg-color: #f2f2f2; /* Fondo gris muy claro */
    --nav-text-color: #1f2d3d; /* Azul oscuro para el texto y borde del círculo */
    --nav-number-color: #92b0c1; /* Azul claro para el número */
    --nav-active-bar-color: #d8ff00; /* Verde neón/claro para la barra activa */
    --nav-base-line-color: #1f2d3d; /* Línea de base oscura (opcional, si quieres recrearla) */
}

.menu-item {
    overflow: hidden;
}

.div_track_full {
    width: 150vw;
    height: 2px;
    background: #123;
    position: absolute;
    bottom: -20px;
    left: -50vw;
    pointer-events: none;
}

.menu-item.menu-item-has-children {
    overflow: visible;
}

/* Contenedor principal del menú */
.nav-menu-container {
    background-color: var(--nav-bg-color);
    position: relative; /* Importante para el posicionamiento absoluto del indicador */
    padding: 20px 0; /* Ajustar el padding vertical según sea necesario */
    width: 100%;
}

/* El menú ul */
.nav-menu-custom {
    display: flex;
    justify-content: flex-start; /* O center, según prefieras */
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0 40px; /* Padding horizontal */
    width: 100%;
    /* Opcional: Recrear la línea base oscura de fondo */
    border-bottom: 2px solid var(--nav-base-line-color);
}

/* Elementos li */
.nav-menu-custom > li {
    margin: 0 15px; /* Espaciado entre elementos */
}

/* Los enlaces a */
.nav-menu-custom > li > a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--nav-text-color);
    font-size: 14px; /* Ajustar según sea necesario */
    font-weight: 500;
    transition: color 0.3s ease;
    /* Evitar que el texto se ajuste a varias líneas */
    white-space: nowrap;
}

/* El círculo con el número */
.menu-item-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #a2c1c4;
    color: #a2c1c4;
    font-size: 16px;
    font-weight: 700;
    margin-right: 6px; 
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Estilo para el elemento activo (página actual o sección activa) */
.nav-menu-custom > li.current-menu-item > a,
.nav-menu-custom > li.current-active-section > a {
    font-weight: 700;
}

.btn-tecnoparque .uagb-button__link {
    font-family: 'Zalando Sans Expanded', sans-serif !important;
}

/* El círculo en estado activo */
.nav-menu-custom > li.current-menu-item > a .menu-item-number,
.nav-menu-custom > li.current-active-section > a .menu-item-number {
    background-color: var(--nav-number-color); /* El número se llena */
    border-color: var(--nav-number-color);
    color: white; /* El texto del número se vuelve blanco */
}

/* --- La Barra de Seguimiento Dinámica (Añadida por JS) --- */
.nav-tracker-bar {
    position: absolute;
    bottom: -2px; /* Alinear perfectamente sobre la línea base oscura */
    left: 0;
    height: 6px; /* Grosor de la barra verde */
    background-color: var(--nav-active-bar-color);
    z-index: 10;
    transition: all 0.3s ease; /* Esta es la clave para el movimiento suave */
    pointer-events: none; /* Evitar que el clic en la barra impida clics en el menú */
}

.tracker-div {
    width: 100%;
    height: 2px;
    background: #123;
    position: absolute;
    bottom: -20px;
    left: 0;
    pointer-events: none;
}

#tecno-menu {
    position: relative; /* CRUCIAL: Define el origen (0,0) para la barra */
    width: 100%;
}

/* =========================================================
   Submenú del menú #tecno-menu: visibilidad + animación
   ========================================================= */

#tecno-menu .main-navigation,
#tecno-menu ul#tecnoparque-menu {
    position: relative;
}

.wp-block-uagb-advanced-heading .uagb-desc-text{
  font-family: 'Zalando Sans Expanded', sans-serif !important;
}

.zalando, .zalando h1, .zalando h2, .zalando h3, .zalando h4,
.zalando h5, .zalando h6, .zalando p{
   font-family: 'Zalando Sans Expanded', sans-serif !important;
}

.sansation, .sansation h1, .sansation h2, .sansation h3,
.sansation h4, .sansation h5, .sansation h2, .sansation h6,
.sansation p{
      font-family: 'Sansation', sans-serif !important;
}


.main-header-menu .menu-item {
    font-family: 'Zalando Sans Expanded', sans-serif !important;
}
@media (min-width: 768px){
.menu-item.menu-item-has-children{ position: static !important; }
}

#tecno-menu .sub-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 154px;
    left: 50%;
    border: none !important;
    z-index: 999;
    min-width: 100vw;
    width: 100%;
    margin: 0;
    padding: 18px 0;
    list-style: none;
    background: #D8C7BA;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 14px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.4s;
}

#tecno-menu .sub-menu li {
    padding: 0 28px;
    border-left: 1px solid var(--nav-active-bar-color);
}

#tecno-menu .sub-menu li:first-child {
    border-left: none;
}

#tecno-menu .sub-menu .menu-link {
    color: var(--nav-text-color);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

#tecno-menu .sub-menu .menu-link:hover {
    opacity: 0.7;
}
/* Se muestra con hover (desktop) o con la clase que añade el JS (click/teclado) */
#tecno-menu li.menu-item-has-children:hover > .sub-menu,
#tecno-menu li.menu-item-has-children.tecno-submenu-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* Pequeño colchón para que el hover no se pierda entre el link y el submenú */
#tecno-menu li.menu-item-has-children > .sub-menu::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    height: 60px;
}

/* Animación escalonada de cada item del submenú (efecto tipo Webflow) */
#tecno-menu .sub-menu li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

#tecno-menu li.menu-item-has-children:hover > .sub-menu li,
#tecno-menu li.menu-item-has-children.tecno-submenu-open > .sub-menu li {
    opacity: 1;
    transform: translateY(0);
}

#tecno-menu .sub-menu li:nth-child(1) { transition-delay: 0.04s; }
#tecno-menu .sub-menu li:nth-child(2) { transition-delay: 0.08s; }
#tecno-menu .sub-menu li:nth-child(3) { transition-delay: 0.12s; }
#tecno-menu .sub-menu li:nth-child(4) { transition-delay: 0.16s; }
#tecno-menu .sub-menu li:nth-child(5) { transition-delay: 0.20s; }
#tecno-menu .sub-menu li:nth-child(6) { transition-delay: 0.24s; }
#tecno-menu .sub-menu li:nth-child(7) { transition-delay: 0.28s; }
#tecno-menu .sub-menu li:nth-child(8) { transition-delay: 0.32s; }

/* Flechita del toggle: gira al abrir, igual que el burger del sitio de referencia */
#tecno-menu .ast-menu-toggle {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 4px;
}

#tecno-menu .ast-menu-toggle .ast-arrow-svg {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center;
}

#tecno-menu li.menu-item-has-children.tecno-submenu-open > .ast-menu-toggle .ast-arrow-svg {
    transform: rotate(180deg);
}

/* En móvil el hover no aplica: forzamos a que solo funcione por click/JS */
@media (hover: none) and (pointer: coarse) {
    #tecno-menu li.menu-item-has-children:hover > .sub-menu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(14px);
    }
    #tecno-menu li.menu-item-has-children.tecno-submenu-open > .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }
}