/* ===================================
   06 - Navegacion
   Header, logos de nav/footer, menu movil y pestanas.
   =================================== */

/* ===================================
   Nav flotante de cristal (solo la home)
   Flota sobre el hero, sin barra de fondo. Sobre el hero es casi
   transparente; al salir del hero ui.js le pone .is-scrolled y toma
   cuerpo oscuro para seguir legible sobre las secciones claras.

   Dos formas segun el ancho:
     >= 1024px  columna lateral pegada al borde IZQUIERDO, centrada
                en vertical (el logo del hero manda en el centro arriba).
     <  1024px  barra superior anclada a la izquierda, con la hamburguesa
                como primer control.
   =================================== */

.nav-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: clamp(0.9rem, 2vh, 1.15rem) clamp(1rem, 4vw, 2.5rem) 0;
    pointer-events: none; /* solo la pildora captura el cursor */
}

.nav-shell > * {
    pointer-events: auto;
}

.nav-shell__inner {
    display: flex;
    justify-content: flex-start; /* movil: el menu arranca a la izquierda */
    max-width: 1180px;
    margin: 0 auto;
}

.nav-pill {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 24px);
    padding: 10px clamp(10px, 1.6vw, 18px);
    border-radius: 999px;
    /* Cristal oscuro ya sobre el hero: la foto va limpia, sin scrim, y
       detras del nav puede haber una vitrina iluminada. */
    background: rgba(12, 12, 14, 0.42);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.16),
        inset 0 -1px 1px rgba(255, 255, 255, 0.06),
        0 10px 40px rgba(0, 0, 0, 0.35);
    animation: heroReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

.nav-pill:hover {
    background: rgba(12, 12, 14, 0.55);
}

/* Fuera del hero la pildora pasa sobre secciones claras: ahi si necesita
   cuerpo para que el texto blanco siga legible. La clase la pone ui.js. */
.nav-pill.is-scrolled {
    background: rgba(12, 12, 14, 0.78);
}

.nav-pill.is-scrolled:hover {
    background: rgba(12, 12, 14, 0.86);
}

/* ===== Enlaces ===== */
.nav-pill__links {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.8vw, 26px);
    margin: 0;
    padding: 0 0 0 0.35rem;
    list-style: none;
    font-size: clamp(11px, 0.95vw, 12.5px);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
}

.nav-pill__links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

.nav-pill__links a:hover {
    color: #ffffff;
}

/* Seccion en la que ya esta el visitante (la usa la pagina de catalogo) */
.nav-pill__links a.is-current {
    color: var(--color-gold-light);
}

.nav-pill__links a.is-current::after {
    width: 100%;
}

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

/* ===== Controles (buscar / carrito / menu) ===== */
.nav-pill__controls {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

.nav-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.nav-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

@media (min-width: 1024px) {
    .nav-icon--menu {
        display: none;
    }
}

/* El badge se oculta con .hidden de Tailwind: por eso el :not() */
.nav-cart-count {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-gold);
    color: #16120A;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    align-items: center;
    justify-content: center;
}

.nav-cart-count:not(.hidden) {
    display: flex;
}

/* ===== Menu movil ===== */
.nav-mobile {
    max-width: 1180px;
    margin: 10px auto 0;
    padding: 14px;
    border-radius: 26px;
    background: rgba(14, 14, 16, 0.82);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.14),
        0 20px 60px rgba(0, 0, 0, 0.55);
}

/* Sin animacion de entrada a proposito: el panel arranca en display:none y una
   animacion de opacidad puede dejarlo invisible si el navegador no la reinicia
   al mostrarlo. El panel debe aparecer siempre. */
.nav-mobile:not(.hidden) {
    display: block;
}

.nav-mobile ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-mobile a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 12px;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    transition: color 0.25s ease;
}

.nav-mobile li:last-child a {
    box-shadow: none;
}

.nav-mobile a:hover {
    color: var(--color-gold-light);
}

/* ===================================
   Modo lateral (escritorio >= 1024px)
   La pildora se pone de pie y se ancla al borde izquierdo, centrada en
   vertical. El centro de arriba queda libre para el logo del hero.
   =================================== */
@media (min-width: 1024px) {
    .nav-shell {
        right: auto;
        bottom: 0;
        display: flex;
        /* Arranca arriba, a la altura del logo, no centrado en vertical */
        align-items: flex-start;
        width: var(--nav-rail);
        padding: clamp(1.5rem, 4vh, 2.75rem) 0 0 clamp(1rem, 2vw, 1.75rem);
    }

    .nav-shell__inner {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .nav-pill {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 16px;
        padding: 20px 16px;
        border-radius: 24px;
    }

    .nav-pill__links {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 0 0 0 2px;
        font-size: 11px;
    }

    /* En columna el subrayado deslizante necesita que el <a> tenga el
       ancho de su texto, no el de la fila. Solo el primer nivel: los
       enlaces del submenu son bloques con su propio fondo. */
    .nav-pill__links > li > a {
        display: inline-block;
    }

    .nav-pill__controls {
        justify-content: space-around;
    }
}

/* El contenido cede sitio al nav lateral solo cuando el margen natural de
   la pagina (viewport - 1200px de contenedor) no da para tanto. En
   pantallas anchas la regla no hace nada y todo sigue centrado.
   La clase .has-nav-rail la lleva solo la home: productos y detalle usan
   el nav superior clasico y no deben desplazarse. */
@media (min-width: 1024px) {
    .has-nav-rail .hero__inner,
    .has-nav-rail .sec__inner,
    .has-nav-rail footer .container {
        padding-left: max(1.5rem, calc(var(--nav-rail) + 2rem - max(0px, (100vw - 1200px) / 2)));
    }
}

/* ===================================
   Submenu de Productos (escritorio)
   Se abre al pasar el raton sobre el enlace y sale hacia la derecha,
   fuera de la columna. Con teclado lo abre :focus-within.
   =================================== */
.nav-has-sub {
    position: relative;
}

.nav-has-sub > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-has-sub__caret {
    font-size: 7px;
    opacity: 0.5;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-has-sub:hover > a .nav-has-sub__caret,
.nav-has-sub:focus-within > a .nav-has-sub__caret {
    opacity: 1;
    transform: translateX(2px);
}

.nav-sub {
    position: absolute;
    top: -12px;
    left: calc(100% + 26px);
    z-index: 1;
    min-width: 208px;
    margin: 0;
    padding: 8px;
    border-radius: 18px;
    list-style: none;
    background: rgba(12, 12, 14, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.14),
        0 20px 50px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

/* Puente invisible sobre el hueco entre la columna y el submenu: sin el,
   el submenu se cierra al cruzarlo con el raton. */
.nav-sub::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -26px;
    width: 26px;
}

.nav-has-sub:hover > .nav-sub,
.nav-has-sub:focus-within > .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.nav-sub a {
    display: block;
    padding: 9px 12px;
    border-radius: 11px;
    font-size: 11px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.8);
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-sub a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* Aqui el hover ya se marca con el fondo: fuera el subrayado deslizante */
.nav-sub a::after {
    display: none;
}

.nav-sub__all {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-sub__all a {
    color: var(--color-gold-light);
}

/* ===================================
   Submenu de Productos (movil)
   Sin hover: se despliega al tocar, con <details>.
   =================================== */
.nav-mobile__sub summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 12px;
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
    list-style: none;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.nav-mobile__sub summary::-webkit-details-marker {
    display: none;
}

.nav-mobile__sub summary i {
    font-size: 11px;
    opacity: 0.6;
    transition: transform 0.25s ease;
}

.nav-mobile__sub[open] summary i {
    transform: rotate(180deg);
}

.nav-mobile__sub ul {
    padding: 4px 0 4px 14px;
}

.nav-mobile__sub a {
    min-height: 44px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.78);
}

/* ===================================
   Modo movil (< 1024px)
   Barra superior anclada a la izquierda: la hamburguesa es el primer
   control, tal y como pidio el cliente.
   =================================== */
@media (max-width: 1023px) {
    .nav-icon--menu {
        order: -1;
    }
}

/* ===== Logo del header ===== */
.nav-logo {
    height: 40px;
    width: 40px;
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(201, 169, 110, 0.4);
    padding: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.logo a:hover .nav-logo {
    border-color: rgba(201, 169, 110, 0.75);
    box-shadow: 0 4px 14px rgba(201, 169, 110, 0.22);
}

.logo a:hover span {
    color: #D4BA85;
}

/* ===== Logo del footer ===== */
.footer-logo {
    height: 52px;
    width: 52px;
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(201, 169, 110, 0.35);
    padding: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.footer-logo:hover {
    border-color: rgba(201, 169, 110, 0.65);
    box-shadow: 0 4px 18px rgba(201, 169, 110, 0.2);
}

/* ===== Enlaces de nav: subrayado deslizante ===== */
nav ul a {
    position: relative;
    padding-bottom: 2px;
}

nav ul a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-gold);
    border-radius: 2px;
    transition: width 0.28s ease;
}

nav ul a:hover::after,
nav ul a.text-amber-400::after {
    width: 100%;
}

/* ===== Menu movil ===== */
#mobile-menu {
    transition: all 0.3s ease;
    overflow: hidden;
}

/* ===== Pestanas (tabs) ===== */
/* NOTA: estaba declarado dos veces (base oscuro + parche tema claro).
   Consolidado: gana el color de texto claro y el fondo activo al 0.08. */
.tab-btn {
    position: relative;
    color: #374151;
    transition: all 0.3s ease;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--color-gold);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.tab-btn:hover {
    background: #f9fafb;
}

.tab-btn.active {
    color: var(--color-gold);
    background: rgba(201, 169, 110, 0.08);
}

.tab-btn.active::after {
    width: 100%;
}