/* Autos Esquivel — navegación comercial móvil compartida por V1 y V2.
 * Orden: Inicio · Vender · Buscar · Comprar · WhatsApp.
 * En escritorio se conserva el CTA flotante contextual existente.
 */

.ae-mobile-commerce-nav,
.ae-mobile-search-sheet {
    display: none;
}

@media (max-width: 767.98px) {
    :root {
        --ae-mobile-nav-height: 70px;
        --ae-mobile-nav-bg: rgba(12, 13, 15, .96);
        --ae-mobile-nav-border: rgba(255, 255, 255, .10);
        --ae-mobile-nav-text: rgba(255, 255, 255, .62);
        --ae-mobile-nav-strong: #fff;
        --ae-mobile-nav-surface: #15171a;
        --ae-mobile-nav-surface-soft: #1d2024;
        --ae-mobile-nav-line: rgba(255, 255, 255, .10);
        --ae-mobile-nav-muted: rgba(255, 255, 255, .58);
        --ae-mobile-nav-accent: var(--ae-brand-primary, #d5232f);
    }

    html[data-theme="light"] {
        --ae-mobile-nav-bg: rgba(255, 255, 255, .97);
        --ae-mobile-nav-border: rgba(17, 19, 21, .10);
        --ae-mobile-nav-text: #71767c;
        --ae-mobile-nav-strong: #14171a;
        --ae-mobile-nav-surface: #fff;
        --ae-mobile-nav-surface-soft: #f4f5f6;
        --ae-mobile-nav-line: rgba(17, 19, 21, .10);
        --ae-mobile-nav-muted: #70757b;
    }

    body.public-site-rebuild {
        padding-bottom: calc(var(--ae-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
    }

    .ae-floating-whatsapp {
        display: none !important;
    }

    .ae-mobile-commerce-nav {
        position: fixed;
        z-index: 1110;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-height: calc(var(--ae-mobile-nav-height) + env(safe-area-inset-bottom));
        padding: 5px max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
        border-top: 1px solid var(--ae-mobile-nav-border);
        background: var(--ae-mobile-nav-bg);
        box-shadow: 0 -12px 34px rgba(0, 0, 0, .20);
        backdrop-filter: blur(20px) saturate(135%);
        -webkit-backdrop-filter: blur(20px) saturate(135%);
        font-family: "Manrope", "Avenir Next", "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
    }

    .ae-mobile-commerce-nav *,
    .ae-mobile-commerce-nav *::before,
    .ae-mobile-commerce-nav *::after,
    .ae-mobile-search-sheet *,
    .ae-mobile-search-sheet *::before,
    .ae-mobile-search-sheet *::after {
        box-sizing: border-box;
    }

    .ae-mobile-commerce-nav__item {
        position: relative;
        min-width: 0;
        min-height: 58px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 4px 2px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--ae-mobile-nav-text);
        font: inherit;
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .18s ease, background-color .18s ease, transform .18s ease;
    }

    .ae-mobile-commerce-nav__item > svg,
    .ae-mobile-commerce-nav__search-mark svg {
        width: 21px;
        height: 21px;
        display: block;
        overflow: visible;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .ae-mobile-commerce-nav__item > span:last-child {
        max-width: 100%;
        overflow: hidden;
        font-size: 10px;
        font-weight: 720;
        line-height: 1.1;
        letter-spacing: -.01em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ae-mobile-commerce-nav__item.is-active {
        color: var(--ae-mobile-nav-strong);
    }

    .ae-mobile-commerce-nav__item.is-active::after {
        content: "";
        position: absolute;
        bottom: 2px;
        left: 50%;
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: var(--ae-mobile-nav-accent);
        transform: translateX(-50%);
    }

    .ae-mobile-commerce-nav__item:active {
        transform: scale(.95);
    }

    .ae-mobile-commerce-nav__item:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--ae-mobile-nav-accent) 62%, transparent);
        outline-offset: -2px;
    }

    .ae-mobile-commerce-nav__item--search {
        cursor: pointer;
    }

    .ae-mobile-commerce-nav__search-mark {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        margin-top: -2px;
        border: 1px solid var(--ae-mobile-nav-border);
        border-radius: 50%;
        background: color-mix(in srgb, var(--ae-mobile-nav-strong) 8%, transparent);
        color: var(--ae-mobile-nav-strong);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
        transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
    }

    .ae-mobile-commerce-nav__item--search[aria-expanded="true"] {
        color: var(--ae-mobile-nav-strong);
    }

    .ae-mobile-commerce-nav__item--search[aria-expanded="true"] .ae-mobile-commerce-nav__search-mark {
        border-color: color-mix(in srgb, var(--ae-mobile-nav-accent) 55%, var(--ae-mobile-nav-border));
        background: color-mix(in srgb, var(--ae-mobile-nav-accent) 18%, transparent);
        transform: translateY(-1px);
    }

    .ae-mobile-commerce-nav__item--whatsapp {
        color: #25d366;
    }

    .ae-mobile-commerce-nav__item--whatsapp > svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
        stroke: none;
    }

    .ae-mobile-search-sheet {
        position: fixed;
        z-index: 1200;
        inset: 0;
        display: block;
        font-family: "Manrope", "Avenir Next", "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
    }

    .ae-mobile-search-sheet[hidden] {
        display: none !important;
    }

    .ae-mobile-search-sheet__backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        background: rgba(0, 0, 0, .58);
        opacity: 0;
        animation: ae-mobile-search-backdrop-in .2s ease forwards;
        -webkit-tap-highlight-color: transparent;
    }

    .ae-mobile-search-sheet__panel {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        max-height: min(84dvh, 760px);
        overflow: auto;
        overscroll-behavior: contain;
        padding: 8px 18px calc(22px + env(safe-area-inset-bottom));
        border: 1px solid var(--ae-mobile-nav-line);
        border-bottom: 0;
        border-radius: 24px 24px 0 0;
        background: var(--ae-mobile-nav-surface);
        box-shadow: 0 -24px 64px rgba(0, 0, 0, .32);
        color: var(--ae-mobile-nav-strong);
        transform: translateY(18px);
        opacity: 0;
        animation: ae-mobile-search-panel-in .28s cubic-bezier(.2, .8, .2, 1) forwards;
        scrollbar-width: thin;
    }

    .ae-mobile-search-sheet__grabber {
        width: 38px;
        height: 4px;
        margin: 0 auto 11px;
        border-radius: 999px;
        background: var(--ae-mobile-nav-line);
    }

    .ae-mobile-search-sheet__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        padding: 4px 0 17px;
    }

    .ae-mobile-search-sheet__eyebrow {
        display: block;
        margin-bottom: 4px;
        color: var(--ae-mobile-nav-muted);
        font-size: 10px;
        font-weight: 760;
        line-height: 1.2;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .ae-mobile-search-sheet__header h2 {
        margin: 0;
        color: var(--ae-mobile-nav-strong);
        font-size: 24px;
        font-weight: 820;
        line-height: 1.05;
        letter-spacing: -.035em;
    }

    .ae-mobile-search-sheet__close {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid var(--ae-mobile-nav-line);
        border-radius: 50%;
        background: var(--ae-mobile-nav-surface-soft);
        color: var(--ae-mobile-nav-strong);
        font: 300 26px/1 Arial, sans-serif;
        cursor: pointer;
    }

    .ae-mobile-search-sheet__form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ae-mobile-search-sheet__form label {
        min-width: 0;
        display: grid;
        gap: 6px;
        color: var(--ae-mobile-nav-muted);
        font-size: 10px;
        font-weight: 760;
        line-height: 1.2;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .ae-mobile-search-sheet__form label:nth-child(3) {
        grid-column: 1 / -1;
    }

    .ae-mobile-search-sheet__form input,
    .ae-mobile-search-sheet__form select {
        width: 100%;
        min-width: 0;
        height: 48px;
        padding: 0 13px;
        border: 1px solid var(--ae-mobile-nav-line);
        border-radius: 13px;
        outline: 0;
        background: var(--ae-mobile-nav-surface-soft);
        color: var(--ae-mobile-nav-strong);
        font: 650 14px/1.2 "Manrope", "Segoe UI", sans-serif;
        letter-spacing: -.01em;
        text-transform: none;
        transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
        appearance: none;
        -webkit-appearance: none;
    }

    .ae-mobile-search-sheet__form input::placeholder {
        color: var(--ae-mobile-nav-muted);
        opacity: .72;
    }

    .ae-mobile-search-sheet__form input:focus,
    .ae-mobile-search-sheet__form select:focus {
        border-color: color-mix(in srgb, var(--ae-mobile-nav-accent) 58%, var(--ae-mobile-nav-line));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ae-mobile-nav-accent) 12%, transparent);
    }

    .ae-mobile-search-sheet__form select {
        background-image:
            linear-gradient(45deg, transparent 50%, currentColor 50%),
            linear-gradient(135deg, currentColor 50%, transparent 50%);
        background-position:
            calc(100% - 17px) 20px,
            calc(100% - 12px) 20px;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        padding-right: 34px;
    }

    .ae-mobile-search-sheet__submit {
        grid-column: 1 / -1;
        min-height: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        margin-top: 2px;
        border: 0;
        border-radius: 14px;
        background: var(--ae-mobile-nav-strong);
        color: var(--ae-mobile-nav-surface);
        font: 800 13px/1 "Manrope", "Segoe UI", sans-serif;
        letter-spacing: -.01em;
        cursor: pointer;
    }

    .ae-mobile-search-sheet__submit svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
    }

    .ae-mobile-search-sheet__quick {
        display: grid;
        gap: 10px;
        margin-top: 20px;
        padding-top: 17px;
        border-top: 1px solid var(--ae-mobile-nav-line);
    }

    .ae-mobile-search-sheet__quick-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    .ae-mobile-search-sheet__quick-head strong {
        font-size: 13px;
        font-weight: 800;
        letter-spacing: -.015em;
    }

    .ae-mobile-search-sheet__quick-head > a {
        color: var(--ae-mobile-nav-muted);
        font-size: 11px;
        font-weight: 720;
        text-decoration: none;
    }

    .ae-mobile-search-sheet__quick-label {
        margin-top: 3px;
        color: var(--ae-mobile-nav-muted);
        font-size: 9px;
        font-weight: 760;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .ae-mobile-search-sheet__quick-row {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding: 1px 1px 3px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .ae-mobile-search-sheet__quick-row::-webkit-scrollbar {
        display: none;
    }

    .ae-mobile-search-sheet__quick-row a {
        min-height: 36px;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        border: 1px solid var(--ae-mobile-nav-line);
        border-radius: 999px;
        background: var(--ae-mobile-nav-surface-soft);
        color: var(--ae-mobile-nav-strong);
        font-size: 11px;
        font-weight: 710;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
    }

    .ae-mobile-search-sheet__promo {
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-top: 2px;
        padding: 11px 14px;
        border: 1px solid var(--ae-mobile-nav-line);
        border-radius: 15px;
        background: var(--ae-mobile-nav-surface-soft);
        color: var(--ae-mobile-nav-strong);
        text-decoration: none;
    }

    .ae-mobile-search-sheet__promo > span:first-child {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .ae-mobile-search-sheet__promo small {
        color: var(--ae-mobile-nav-muted);
        font-size: 9px;
        font-weight: 730;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .ae-mobile-search-sheet__promo strong {
        overflow: hidden;
        font-size: 12px;
        font-weight: 780;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ae-mobile-search-sheet__promo > span:last-child {
        flex: 0 0 auto;
        font-size: 20px;
        font-weight: 400;
    }

    html.ae-mobile-search-open,
    html.ae-mobile-search-open body {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    @keyframes ae-mobile-search-backdrop-in {
        to { opacity: 1; }
    }

    @keyframes ae-mobile-search-panel-in {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 380px) {
        .ae-mobile-commerce-nav {
            padding-left: 3px;
            padding-right: 3px;
        }

        .ae-mobile-commerce-nav__item {
            gap: 3px;
            padding-inline: 0;
        }

        .ae-mobile-commerce-nav__item > span:last-child {
            font-size: 9px;
        }

        .ae-mobile-search-sheet__panel {
            padding-right: 14px;
            padding-left: 14px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .ae-mobile-commerce-nav__item,
        .ae-mobile-commerce-nav__search-mark,
        .ae-mobile-search-sheet__backdrop,
        .ae-mobile-search-sheet__panel {
            transition: none !important;
            animation: none !important;
        }

        .ae-mobile-search-sheet__backdrop,
        .ae-mobile-search-sheet__panel {
            opacity: 1;
            transform: none;
        }
    }
}