/* =========================
   NAVBAR (DESKTOP)
========================= */

.mw-nav{
    background: #fff;
    border-bottom: 1px solid #ececec;
}

/* wrapper dentro del container */
.mw-nav__wrap{
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 10px;
    padding: 10px 0;

    overflow: hidden; /* evita que el fade/scroll se salga */
}

/* =========================
   SCROLLER (viewport)
========================= */

.mw-nav__viewport{
    position: relative;
    z-index: 2; /* contenido encima del fade */

    overflow-x: auto;
    overflow-y: hidden;

    white-space: nowrap;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* ocultar scrollbar */
    scrollbar-width: none;      /* firefox */
    -ms-overflow-style: none;   /* edge viejo */
}
.mw-nav__viewport::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.mw-nav__inner{
    position: relative;
    z-index: 2; /* contenido encima del fade */

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 4px;

    white-space: nowrap;
    scroll-snap-type: x mandatory;

    /* IMPORTANT: NO scroll aquí (mata el overflow-x: scroll que te está metiendo otro css) */
    overflow: visible !important;
}

/* =========================
   LINKS
========================= */

.mw-nav__link{
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;

    text-decoration: none;
    /*font-weight: 800;*/
    font-size: 13px;
    letter-spacing: .02em;

    padding: 10px 14px;
    border-radius: 999px;

    color: #111;
    background: transparent;
    border: 1px solid transparent;

    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.mw-nav__link:hover{
    color: #111;
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.08);
}

/* Active: rojo accent */
.mw-nav__link.is-active{
    color: #e10600;
    font-weight: 800;
    background: rgba(225,6,0,0.08);
    border-color: rgba(225,6,0,0.22);
}

.mw-nav__link.is-active::after{
    content:"";
    position:absolute;
    left: 10px;
    right: 10px;
    bottom: -8px;
    height: 3px;
    border-radius: 999px;
    background: #e10600;
}

/* =========================
   FADE GRADIENT SIDES
   (detrás del contenido)
========================= */

.mw-nav__wrap::before,
.mw-nav__wrap::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width: 56px;
    pointer-events:none;
    z-index: 1; /* fade detrás */
}

.mw-nav__wrap::before{
    left: 40px;
    background: linear-gradient(
            90deg,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,0.85) 40%,
            rgba(255,255,255,0) 100%
    );
}

.mw-nav__wrap::after{
    right: 40px;
    background: linear-gradient(
            270deg,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,0.85) 40%,
            rgba(255,255,255,0) 100%
    );
}

/* =========================
   ARROWS (ICON BUTTONS)
========================= */

.mw-nav__btn{
    position: relative;
    z-index: 3; /* botones encima de todo */

    width: 34px;
    height: 34px;
    border-radius: 999px;

    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.08);
    color: rgba(0,0,0,0.70);

    box-shadow: 0 6px 18px rgba(0,0,0,0.08);

    display: grid;
    place-items: center;

    cursor: pointer;
    transition: transform .12s ease, background .12s ease, opacity .12s ease, color .12s ease;
}

.mw-nav__btn:hover{
    background: rgba(0,0,0,0.10);
    color: rgba(0,0,0,0.90);
    transform: translateY(-1px);
}

.mw-nav__btn:disabled{
    opacity: 0.15;
    box-shadow: none;
    transform: none;
    cursor: default;
}

.mw-nav__ico{
    width: 18px;
    height: 18px;
    display: block;
}

.mw-nav__btn:focus-visible{
    outline: 2px solid rgba(225,6,0,0.45);
    outline-offset: 2px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 980px){
    .mw-nav{ display: none; }
}