/* Shared navigation styles — used by every page via <link rel="stylesheet" href="css/nav.css">
   Keep this the single source of truth for the header/menu; do not re-inline
   nav rules into a page's own <style> block, or pages will drift apart again. */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1.5rem 0;
    transition: all 0.5s var(--ease-out);
}

.nav.scrolled {
    background: rgba(8, 7, 11, 0.9);
    backdrop-filter: blur(30px);
    padding: 1rem 0;
}

/* Backdrop-filter on .nav creates a new containing block for the
   fixed-position .nav__menu, which breaks inset:0 (menu collapses
   to the nav bar height). Disable it while the mobile menu is open. */
.nav.menu-open {
    backdrop-filter: none;
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav__logo {
    display: flex;
    align-items: center;
}

.nav__logo img {
    height: 56px;
    width: auto;
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: 3rem;
    list-style: none;
}

.nav__link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    transition: all 0.3s;
    position: relative;
}

.nav__link--active { color: var(--white); }

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--orange), var(--purple-light));
    transition: width 0.4s var(--ease-out);
}

.nav__link--active::after { width: 100%; }
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { width: 100%; }

/* Dropdown Menu */
.nav__dropdown-wrapper { position: relative; }
.nav__dropdown-head { display: flex; align-items: center; gap: 0.375rem; }
.nav__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 260px;
    background: rgba(8, 7, 11, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 0.75rem 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--ease-out);
    z-index: 1001;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.nav__dropdown-wrapper:hover .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav__dropdown-item {
    display: block;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    color: var(--text);
    transition: all 0.2s ease;
}
.nav__dropdown-item:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.05);
}
.nav__dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.375rem;
    margin: -0.375rem;
}
.nav__dropdown-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}
.nav__dropdown-wrapper:hover .nav__dropdown-toggle svg,
.nav__dropdown-wrapper.open .nav__dropdown-toggle svg {
    transform: rotate(180deg);
}

.nav__cta {
    background: var(--orange);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s var(--ease-out);
}

.nav__cta:hover {
    background: var(--orange-light);
    transform: translateY(-2px);
}

.nav__toggle {
    display: none;
    width: 32px;
    height: 24px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
}

.nav__toggle span {
    width: 100%;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: all 0.3s;
    transform-origin: center;
}

.nav__toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__toggle.active span:nth-child(2) { opacity: 0; }
.nav__toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

@media (max-width: 900px) {
    .nav__menu {
        position: fixed;
        inset: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 0.9375rem;
        background: rgba(8, 7, 11, 0.98);
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s var(--ease-out);
        z-index: 100;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Reserve the scrollbar's width even when content doesn't
           overflow yet, so expanding "Oferta" (which makes the list
           tall enough to scroll) doesn't shift everything left when
           the scrollbar appears. */
        scrollbar-gutter: stable;
        padding: 7rem 1.5rem 3rem;
    }

    .nav__menu::before {
        content: '';
        position: fixed;
        inset: 0;
        background: var(--ink);
        z-index: -1;
    }

    .nav__menu.open { opacity: 1; visibility: visible; }

    .nav__menu .nav__link {
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 1.3125rem;
        color: var(--white);
    }

    .nav__cta {
        display: none;
    }

    .nav__toggle { display: flex; z-index: 101; }

    .nav__dropdown {
        position: static;
        transform: none;
        width: 100%;
        opacity: 1;
        visibility: visible;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        padding: 0.5rem 0;
        min-width: auto;
        display: none;
    }
    .nav__dropdown-wrapper.open .nav__dropdown { display: block; }

    /* The li's width shrinks to fit its widest child, which differs
       between the closed state (head only) and open state (dropdown
       panel). Locking the li to the full menu width and mirroring
       the toggle's width on both sides of the text (via grid) keeps
       it centered regardless of open/closed state. */
    .nav__dropdown-wrapper { width: 100%; }

    .nav__dropdown-head {
        width: 100%;
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
    }

    .nav__dropdown-head .nav__link--dropdown {
        grid-column: 2;
        text-align: center;
    }

    .nav__dropdown-item { font-size: 0.75rem; padding: 0.35rem 0; text-align: center; }
    .nav__dropdown-item:hover { background: transparent; }

    .nav__dropdown-toggle {
        grid-column: 3;
        justify-self: center;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
    }

    .nav__dropdown-toggle svg {
        width: 22px;
        height: 22px;
    }
}