/* ─── MENÚ MÓVIL (compartido: inicio, catálogo, cotizador) ─────
   En pantallas chicas los links no caben junto al logo: se esconden
   detrás de un botón "Menú" que abre una capa a pantalla completa.
   El botón lo inserta js/main.js. */
.nav-toggle{display:none;}

@media (max-width:720px){
  nav .nav-logo{font-size:1.05rem;letter-spacing:.22em;white-space:nowrap;position:relative;z-index:2;}
  .nav-toggle{display:inline-flex;align-items:center;gap:10px;position:relative;z-index:2;background:transparent;border:1px solid rgba(200,137,74,.35);color:#F2EAD8;font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;padding:10px 14px;min-height:44px;}
  .nav-toggle-bars{width:16px;height:10px;position:relative;display:inline-block;}
  .nav-toggle-bars::before,.nav-toggle-bars::after{content:'';position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .25s,top .25s;}
  .nav-toggle-bars::before{top:1px;}
  .nav-toggle-bars::after{top:8px;}
  nav.open .nav-toggle-bars::before{top:5px;transform:rotate(45deg);}
  nav.open .nav-toggle-bars::after{top:5px;transform:rotate(-45deg);}

  nav .nav-links{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px !important;background:rgba(10,8,4,.97);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;margin:0;padding:0;}
  nav.open .nav-links{opacity:1;visibility:visible;}
  nav .nav-links a{display:block;padding:16px 24px;font-size:.85rem !important;letter-spacing:.3em;color:#F2EAD8;}
  nav .nav-links a:hover,nav .nav-links a:focus-visible{color:#C8894A;}
  body.nav-open{overflow:hidden;}
}
@media (prefers-reduced-motion:reduce){nav .nav-links,.nav-toggle-bars::before,.nav-toggle-bars::after{transition:none !important;}}

/* Áreas táctiles cómodas en el pie de página */
@media (max-width:720px){
  .footer-links a,.footer-legal a,.footer-legal button{display:inline-block;padding:10px 4px;}
}

/* El botón flotante de WhatsApp no debe tapar el menú ni el pie */
body.nav-open .whatsapp-float{opacity:0;pointer-events:none;}
@media (max-width:720px){
  footer.has-legal{padding-bottom:110px !important;}
  .footer-legal{gap:4px 18px;}
  .footer-legal .copy{width:100%;text-align:center;}
}