/* ================================================================
   NAV-FIX-DEFINITIVO.css
   
   INSTRUCCIONES:
   1. Elimina nav-fix.css, hamburger-fix.css y nav-cart-fixes.css
   2. Pon SOLO este archivo como el ÚLTIMO <link> antes de </head>:
      <link rel="stylesheet" href="css/nav-fix-DEFINITIVO.css">
   3. En style.css busca ".nav nav { display: none !important" 
      y cámbialo a ".nav nav { display: none" (sin !important)
   ================================================================ */

/* ═══ DESKTOP (768px+) — links visibles en fila ════════════════ */
@media (min-width: 768px) {

  /* El contenedor nav siempre flex en desktop */
  .nav {
    overflow: visible !important;
  }

  /* Forzar visibilidad — gana sobre el display:none del style.css */
  .nav nav,
  .nav #mainNav,
  header nav,
  nav#mainNav {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    max-height: none !important;
    overflow: visible !important;
    width: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    animation: none !important;
  }

  .nav nav a,
  .nav #mainNav a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    color: #7a6155 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    white-space: nowrap !important;
    border: none !important;
    width: auto !important;
  }

  .nav nav a:hover,
  .nav #mainNav a:hover {
    color: #3E1F13 !important;
    background: rgba(90,45,27,0.06) !important;
  }

  .nav nav a.active,
  .nav #mainNav a.active {
    color: #3E1F13 !important;
    background: rgba(90,45,27,0.09) !important;
    font-weight: 600 !important;
  }

  /* Hamburguesa oculta en desktop */
  .hamburger,
  #hamb,
  button.hamburger {
    display: none !important;
  }
}

/* ═══ MÓVIL (<768px) — hamburguesa + menú desplegable ══════════ */
@media (max-width: 767px) {

  .nav {
    overflow: visible !important;
    padding: 0 12px !important;
  }

  /* Links SIEMPRE ocultos por defecto */
  .nav nav,
  .nav #mainNav,
  nav#mainNav {
    display: none !important;
    position: fixed !important;
    top: var(--nav-height, 68px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    flex-direction: column !important;
    background: rgba(250, 247, 244, 0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 8px 0 16px !important;
    margin: 0 !important;
    box-shadow: 0 8px 32px rgba(90,45,27,0.15) !important;
    z-index: 2147483646 !important;
    border-top: 1px solid rgba(90,45,27,0.12) !important;
    max-height: calc(100vh - var(--nav-height, 68px)) !important;
    overflow-y: auto !important;
    animation: none !important;
  }

  /* *** CUANDO .nav tiene clase .open → MOSTRAR *** */
  .nav.open nav,
  .nav.open #mainNav,
  .nav.open nav#mainNav {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Links en el menú móvil */
  .nav nav a,
  .nav #mainNav a,
  .nav.open nav a,
  .nav.open #mainNav a {
    display: block !important;
    width: 100% !important;
    padding: 14px 24px !important;
    color: #3E1F13 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(90,45,27,0.08) !important;
    background: transparent !important;
    box-sizing: border-box !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-radius: 0 !important;
    transition: background 0.18s !important;
  }

  .nav nav a:last-child,
  .nav #mainNav a:last-child {
    border-bottom: none !important;
  }

  .nav nav a:hover,
  .nav #mainNav a:hover,
  .nav nav a.active,
  .nav #mainNav a.active {
    background: rgba(90,45,27,0.06) !important;
    color: #5A2D1B !important;
  }

  /* Hamburguesa visible en móvil */
  .hamburger,
  #hamb,
  button.hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    color: #3E1F13 !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 8px !important;
    z-index: 2147483648 !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }
}

/* ═══ CORRECCIÓN CRÍTICA: quitar overflow:hidden del nav ════════
   El nav no puede tener overflow:hidden porque el menú móvil
   se posiciona como fixed, pero overflow:hidden rompe z-index
   ════════════════════════════════════════════════════════════ */
.nav {
  overflow: visible !important;
}