/* Autos Esquivel — navegación directa por categorías.
 * El logotipo funciona como acceso a Inicio. En desktop mantenemos una barra
 * fina, pero con suficiente aire entre categorías para evitar tanto el efecto
 * comprimido como la distribución excesiva a todo lo ancho del viewport.
 */

/* El color y la variante vienen de Configuración general; no pintar un SVG
 * estático por encima del logo administrado. */

@media (min-width: 1281px) {
    .ae-nav-main__inner {
        width: calc(100% - 48px);
        max-width: 1720px;
        min-height: 72px;
        grid-template-columns: 132px minmax(0, 1fr);
        gap: clamp(24px, 1.7vw, 32px);
    }

    .ae-nav-brand {
        width: 132px;
        height: 58px;
    }

    .ae-nav-links {
        justify-content: center;
        align-items: stretch;
        gap: clamp(18px, 1.45vw, 28px);
        overflow: visible;
    }

    .ae-nav-link,
    .ae-nav-dropdown > summary {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 72px;
        padding-inline: 4px;
        font-size: clamp(8.5px, .5vw, 9.5px);
        letter-spacing: .07em;
    }

    .ae-nav-link::after,
    .ae-nav-dropdown > summary::after {
        bottom: 13px;
        width: 24px;
    }

    .ae-nav-link:hover,
    .ae-nav-link:focus-visible,
    .ae-nav-link.is-active,
    .ae-nav-dropdown > summary:hover,
    .ae-nav-dropdown > summary:focus-visible,
    .ae-nav-dropdown[open] > summary,
    .ae-nav-dropdown.is-active > summary {
        letter-spacing: .085em;
    }

    .ae-nav-link.ae-nav-link--sell {
        min-height: 38px;
        align-self: center;
        padding-inline: 13px;
        border: 1px solid color-mix(in srgb, var(--ae-nav-text) 52%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--ae-nav-text) 3%, transparent);
        color: var(--ae-nav-text);
        font-weight: 600;
        letter-spacing: .08em;
        transition: color 190ms ease, border-color 190ms ease, background-color 190ms ease, box-shadow 190ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
    }

    .ae-nav-link.ae-nav-link--sell::after {
        display: none;
    }

    .ae-nav-link.ae-nav-link--sell:hover,
    .ae-nav-link.ae-nav-link--sell:focus-visible {
        border-color: color-mix(in srgb, var(--ae-nav-text) 88%, transparent);
        background: color-mix(in srgb, var(--ae-nav-text) 7%, transparent);
        letter-spacing: .08em;
        transform: translateY(-1px);
    }

    .ae-nav-link.ae-nav-link--sell.is-active {
        border-color: var(--ae-nav-text);
        background: color-mix(in srgb, var(--ae-nav-text) 9%, transparent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ae-nav-text) 6%, transparent);
        letter-spacing: .08em;
    }
}

/* Entre laptop grande y desktop compacto priorizamos legibilidad: si ya no cabe
 * una fila limpia, usamos el menú móvil existente en vez de comprimir texto. */
@media (min-width: 761px) and (max-width: 1280px) {
    .ae-nav-main__inner {
        grid-template-columns: 46px minmax(0, 1fr) 46px;
    }

    .ae-nav-menu-toggle {
        display: grid;
    }

    .ae-nav-brand {
        justify-self: center;
    }

    .ae-nav-links {
        display: none;
    }
}


/* Subcategorías dinámicas: solo la carrocería ocupa espacio permanente en el
 * header; sus clasificaciones reales aparecen en el desplegable. */
.ae-nav-dropdown.is-active > summary {
    color: var(--ae-nav-text);
    font-weight: 600;
}

.ae-nav-dropdown.is-active > summary::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
    box-shadow: 0 0 5px var(--ae-nav-text), 0 0 14px color-mix(in srgb, var(--ae-nav-text) 42%, transparent);
}

.ae-nav-dropdown__list a[aria-current="page"],
.ae-mobile-nav__categories a[aria-current="page"] {
    border-color: var(--ae-nav-border-strong);
    background: var(--ae-nav-hover);
    color: var(--ae-nav-text) !important;
}

.ae-nav-dropdown__list a b,
.ae-mobile-nav__categories a b {
    min-width: 0;
    overflow: hidden;
    font: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 1281px) {
    .ae-nav-dropdown > summary {
        min-height: 72px;
        padding-inline: 4px;
        font-size: clamp(8.5px, .5vw, 9.5px);
        letter-spacing: .07em;
    }
}