/* =========================================================
   PROGRAMAS ORIGINALES — Navegación + Global
   Archivo: assets/css/po-nav-global.css
   Cargado: todas las páginas (global)
========================================================= */

:root {
    --po-dark:      #020617;
    --po-blue:      #1D4ED8;
    --po-blue2:     #2563EB;
    --po-sky:       #38BDF8;
    --po-light:     #EFF6FF;
    --po-radius:    8px;
    --po-radius-lg: 12px;
    --po-trans:     0.18s ease;
}

/* ─────────────────────────────────────────────────────────
   1. NAVBAR — gradiente
───────────────────────────────────────────────────────── */
.col-full-nav {
    background: linear-gradient(
        90deg,
        #020617 0%,
        #1e3a8a 55%,
        #3baef0 100%
    ) !important;
    box-shadow: 0 4px 24px rgba(2,6,23,0.22);
}

.shoptimizer-primary-navigation {
    background: transparent !important;
}

/* ─────────────────────────────────────────────────────────
   2. LINKS PRINCIPALES
   El padre aplica line-height: 72px — lo respetamos
   Solo cambiamos color y peso
───────────────────────────────────────────────────────── */
.menu-primary-menu-container > ul > li > a {
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-shadow: none !important;
    transition: color var(--po-trans) !important;
}

.menu-primary-menu-container > ul > li > a:hover,
.menu-primary-menu-container > ul > li.current-menu-item > a,
.menu-primary-menu-container > ul > li.current-menu-ancestor > a {
    color: #fff !important;
    text-shadow: none !important;
}

/* Span interno del link */
.menu-primary-menu-container > ul > li > a > span {
    color: inherit !important;
}

/* Línea animada del padre (span::before) — la coloreamos en sky */
.menu-primary-menu-container > ul > li > a span::before {
    border-color: var(--po-sky) !important;
    border-bottom: 2px solid var(--po-sky) !important;
}

/* ─────────────────────────────────────────────────────────
   3. BOTÓN "COTIZA AQUÍ"
   El padre fuerza line-height: 72px en el <a>
   Usamos display:flex + altura fija para contenerlo
───────────────────────────────────────────────────────── */
#nav-menu-item-17631 > a {
    background: var(--po-blue) !important;
    border-radius: var(--po-radius) !important;
    /* Neutralizar line-height:72px del padre con padding y line-height propio */
    line-height: 1 !important;
    padding: 8px 18px !important;
    margin: 0 0 0 8px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    box-shadow: 0 2px 8px rgba(29,78,216,0.35) !important;
    transition: background var(--po-trans), box-shadow var(--po-trans) !important;
}

#nav-menu-item-17631 > a,
#nav-menu-item-17631 > a > span {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

#nav-menu-item-17631 > a:hover {
    background: var(--po-blue2) !important;
    box-shadow: 0 4px 14px rgba(37,99,235,0.45) !important;
    color: #fff !important;
}

/* Ocultar la línea animada del padre en el botón */
#nav-menu-item-17631 > a span::before {
    display: none !important;
    content: none !important;
}

#nav-menu-item-17631 > a > span::after {
    content: ' →' !important;
}

/* ─────────────────────────────────────────────────────────
   4. CARRITO
───────────────────────────────────────────────────────── */
.site-header-cart .cart-contents {
    font-weight: 700;
    color: #fff !important;
}

.site-header-cart .count {
    background: var(--po-blue2) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}

/* ─────────────────────────────────────────────────────────
   5. BUSCADOR
───────────────────────────────────────────────────────── */
.site-search .search-field,
.site-search input[type="search"] {
    border-radius: 20px !important;
    border: 1.5px solid rgba(255,255,255,0.15) !important;
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    transition: border-color var(--po-trans), background var(--po-trans) !important;
}

.site-search .search-field:focus,
.site-search input[type="search"]:focus {
    border-color: var(--po-sky) !important;
    background: rgba(255,255,255,0.13) !important;
    outline: none !important;
}

.site-search .search-field::placeholder,
.site-search input[type="search"]::placeholder {
    color: rgba(255,255,255,0.4) !important;
}

/* ─────────────────────────────────────────────────────────
   6. DROPDOWN PREMIUM
   Estructura: .sub-menu-wrapper > .container > ul.sub-menu
───────────────────────────────────────────────────────── */
.sub-menu-wrapper {
    background: #fff !important;
    border: none !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 16px 48px rgba(2,6,23,0.16), 0 2px 8px rgba(2,6,23,0.06) !important;
    padding: 0 !important;
    overflow: visible !important;
    margin-top: 0 !important;
    min-width: 340px !important;
    width: max-content !important;
}

/* Franja azul superior */
.sub-menu-wrapper::before {
    content: '' !important;
    display: block !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--po-blue) 0%, var(--po-sky) 100%) !important;
}

/* Container interno */
.sub-menu-wrapper > .container {
    padding: 10px 10px 14px !important;
    max-width: none !important;
    width: auto !important;
    min-width: 310px !important;
    box-sizing: border-box !important;
}

/* Etiqueta AUTODESK */
.sub-menu-wrapper > .container::before {
    content: 'AUTODESK' !important;
    display: block !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: var(--po-blue2) !important;
    letter-spacing: 0.14em !important;
    padding: 6px 10px 8px !important;
    text-transform: uppercase !important;
}

.sub-menu-wrapper > .container::after {
    display: none !important;
    content: none !important;
}

/* Lista */
.sub-menu-wrapper > .container > ul.sub-menu {
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none !important;
}

/* Items */
.sub-menu-wrapper > .container > ul.sub-menu > li {
    list-style: none !important;
    float: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Links */
.sub-menu-wrapper > .container > ul.sub-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: none !important;
    height: auto !important;
    transition: background var(--po-trans), color var(--po-trans) !important;
}

/* Bolita azul decorativa antes del texto */
.sub-menu-wrapper > .container > ul.sub-menu > li > a::before {
    content: '' !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    border-radius: 50% !important;
    background: #cbd5e1 !important;
    flex-shrink: 0 !important;
    transition: background var(--po-trans) !important;
}

/* Ocultar resto de pseudos del padre */
.sub-menu-wrapper > .container > ul.sub-menu > li > a::after,
.sub-menu-wrapper > .container > ul.sub-menu > li > a span::before,
.sub-menu-wrapper > .container > ul.sub-menu > li > a span::after {
    display: none !important;
    content: none !important;
}

/* Texto */
.sub-menu-wrapper > .container > ul.sub-menu > li > a > span {
    color: #1e293b !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

/* Hover */
.sub-menu-wrapper > .container > ul.sub-menu > li > a:hover {
    background: var(--po-light) !important;
    color: var(--po-blue) !important;
}

.sub-menu-wrapper > .container > ul.sub-menu > li > a:hover::before {
    background: var(--po-blue2) !important;
}

.sub-menu-wrapper > .container > ul.sub-menu > li > a:hover > span {
    color: var(--po-blue) !important;
}

/* Separador sutil */
.sub-menu-wrapper > .container > ul.sub-menu > li + li {
    border-top: 1px solid #f1f5f9 !important;
}

/* ─────────────────────────────────────────────────────────
   7. ELEMENTOR
───────────────────────────────────────────────────────── */
.elementor-background-overlay {
    backdrop-filter: blur(2px);
}

/* ─────────────────────────────────────────────────────────
   8. MOBILE
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .col-full-nav {
        background: linear-gradient(135deg, #020617, #1d4ed8) !important;
    }
    .col-full-nav .shoptimizer-primary-navigation {
        background: transparent !important;
    }
    .col-full-nav ul { background: transparent !important; }
    .col-full-nav li { border-bottom: 1px solid rgba(255,255,255,0.08); }
    .col-full-nav li a,
    .col-full-nav li a span {
        color: #fff !important;
        font-size: 17px !important;
        font-weight: 700 !important;
    }
    .col-full-nav .site-search { padding: 20px 0; }
    .col-full-nav .search-field {
        border-radius: 16px !important;
        height: 60px !important;
        font-size: 18px !important;
    }

    #nav-menu-item-17631 > a {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        box-shadow: none !important;
        line-height: inherit !important;
    }

    .sub-menu-wrapper {
        border-radius: 0 !important;
        box-shadow: none !important;
        background: rgba(0,0,0,0.2) !important;
    }
    .sub-menu-wrapper::before,
    .sub-menu-wrapper > .container::before {
        display: none !important;
        content: none !important;
    }
    .sub-menu-wrapper > .container > ul.sub-menu > li > a,
    .sub-menu-wrapper > .container > ul.sub-menu > li > a > span {
        color: #e2e8f0 !important;
        font-size: 15px !important;
    }
    .sub-menu-wrapper > .container > ul.sub-menu > li > a {
        padding: 10px 16px !important;
        border-radius: 0 !important;
    }
    .sub-menu-wrapper > .container > ul.sub-menu > li > a:hover {
        background: rgba(255,255,255,0.08) !important;
        padding-left: 16px !important;
    }
    .sub-menu-wrapper > .container > ul.sub-menu > li + li {
        border-top: 1px solid rgba(255,255,255,0.06) !important;
    }
}

/* ─────────────────────────────────────────────────────────
   9. FIX OVERFLOW MOBILE
───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    body, html { overflow-x: hidden !important; }
}