/* ============================================================
   MENU MOVIL COMPARTIDO · On Deck Co. · 22 de agosto de 2026

   POR QUE EXISTE
   Hasta hoy, 27 paginas del sitio escondian TODOS los enlaces del
   nav debajo de 780 px con esta linea, repetida en cada archivo:

       @media(max-width:780px){.nav-links a:not(.nav-cta){display:none}}

   Osea que en celular no habia navegacion: solo sobrevivia el boton
   de la derecha. Y el celular es por donde llega el trafico de
   WhatsApp, que es el canal principal del negocio.

   COMO FUNCIONA
   Esta hoja va DESPUES del <style> propio de cada pagina y toma el
   control del nav debajo de 880 px. El `!important` no es pereza:
   es lo unico que gana contra 27 reglas inline que ya dicen
   display:none con la misma especificidad.

   El boton de hamburguesa lo INYECTA `js/nav-movil.js` si la pagina
   no lo trae, asi que no hubo que tocar el HTML de las 27.

   OJO CON DOS COSAS
   1. `backdrop-filter` en header.nav crea un containing block y rompe
      el position:fixed del cajon. Por eso se apaga en movil. OJO: al
      quitarlo SI cambia como se ve. El desenfoque era lo que tapaba el
      contenido que pasa por debajo; con solo .92 de opacidad el titular
      se lee a traves de la barra (visto en capturas de Omar el 23 ago).
      Por eso aqui el fondo va OPACO, no solo sin desenfoque.
   2. La home (index.html) NO carga esta hoja: trae su propia copia
      inline desde antes. Si algun dia se cambia el diseno del cajon,
      hay que cambiarlo en los dos lados.
   ============================================================ */

.nav-burger{display:none;background:none;border:0;padding:10px 6px;cursor:pointer;flex-direction:column;gap:5px}
.nav-burger span{display:block;width:26px;height:2px;background:var(--ivory,#efe7d7);transition:transform .3s,opacity .2s}
body.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){opacity:0}
body.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:880px){
  header.nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#0d0d0e!important}

  .nav-burger{display:flex!important;order:3;margin-left:auto;z-index:1002;position:relative}

  .nav-links{position:fixed!important;inset:0;background:var(--ink,#0d0d0e);
    display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;
    gap:4px;padding:96px 32px 40px;z-index:1001;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .3s,transform .35s,visibility .3s}
  body.nav-open .nav-links{opacity:1;visibility:visible;transform:none}

  /* aqui esta el arreglo de fondo: las 27 paginas los tenian en display:none */
  .nav-links a,
  .nav-links a:not(.nav-cta){display:flex!important;align-items:center;
    font-family:Anton,Impact,sans-serif;font-size:clamp(1.9rem,7vw,2.7rem);
    letter-spacing:.01em;color:var(--ivory,#efe7d7);padding:8px 0;text-transform:uppercase}
  .nav-links a::before,.nav-links a::after{display:none!important;content:none!important}

  .nav-links a.nav-biz{border:0;padding:8px 0;border-radius:0;color:var(--gold-bright,#e2bd6a)}
  .nav-links a.nav-cta{background:linear-gradient(180deg,var(--gold-bright,#e2bd6a),var(--gold,#c89b4b));
    color:#17150f;border:0;margin-top:14px;font-size:1rem;padding:14px 28px;justify-content:center}
  .nav-links .lang-toggle{margin-top:18px;font-size:.9rem;padding:9px 20px}
}

@media(prefers-reduced-motion:reduce){
  .nav-links{transition:none!important}
  .nav-burger span{transition:none}
}