/* Menú móvil compartido (home + catálogo + nosotros).
   La página aporta: un <button class="nav-toggle"> y un <nav class="nav-panel">
   dentro de <header>. Los colores salen de los tokens de cada página. */

.nav-toggle{
  display:none;                 /* solo móvil, se activa abajo */
  /* Las barras usan currentColor. Por defecto navy, que sirve para los headers
     claros (home y nosotros); el catálogo, con header navy, lo sobreescribe a
     crema en su propio <style> — si no, quedaban navy sobre navy: invisibles. */
  color:var(--navy,#0A1E3C);
  width:42px;height:42px;flex-shrink:0;
  align-items:center;justify-content:center;
  flex-direction:column;gap:4.5px;
  border-radius:10px;background:transparent;border:0;cursor:pointer;
  margin-left:10px;
}
.nav-toggle span{
  display:block;width:20px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .22s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Panel: siempre navy con texto claro, así funciona igual bajo el header
   claro del home y bajo el header oscuro del catálogo. */
.nav-panel{
  display:none;
  background:var(--navy,#0A1E3C);
  border-top:1px solid rgba(214,164,106,.25);
}
.nav-panel a{
  display:block;padding:15px 20px;
  color:#EAF0F8;font-size:16px;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nav-panel a:last-child{border-bottom:0}
.nav-panel a.act{color:var(--kraft,#D6A46A)}
.nav-panel a:active{background:rgba(255,255,255,.05)}

@media (max-width:760px){
  .nav-toggle{display:flex}
  .nav-panel.open{display:block;animation:navDrop .18s ease}
}
@keyframes navDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .nav-toggle span{transition:none}
  .nav-panel.open{animation:none}
}