/* ============================================================
   Shared responsive navigation — works over all three design
   systems (wattimize /ds/, Gesto /dsg/, Grupo Gesto heritage).
   Below --nav-bp the inline links collapse into a panel behind
   a Menu button. Above it, nothing here applies.
   ============================================================ */

.navbtn{display:none}

@media (max-width:1040px){
  header .navbtn{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:inherit;background:transparent;border:1px solid rgba(0,0,0,.14);
    border-radius:8px;padding:9px 13px;line-height:1;cursor:pointer;
    -webkit-appearance:none;appearance:none;
  }
  header .navbtn:hover{border-color:rgba(0,0,0,.34)}
  header .navbtn .bars{position:relative;width:14px;height:10px;flex:0 0 auto}
  header .navbtn .bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;
    border-radius:2px;transition:transform .22s ease,opacity .18s ease}
  header .navbtn .bars i:nth-child(1){top:0}
  header .navbtn .bars i:nth-child(2){top:4.25px}
  header .navbtn .bars i:nth-child(3){top:8.5px}
  header .navbtn[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(4.25px) rotate(45deg)}
  header .navbtn[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
  header .navbtn[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-4.25px) rotate(-45deg)}

  /* the header row itself: logo left, button right, nothing wrapping.
     position:static so the panel's containing block is the <header>. */
  header .wrap.in,header .container.in,header .hw{
    display:flex !important;align-items:center;justify-content:space-between;
    flex-direction:row !important;gap:14px;flex-wrap:nowrap;
    height:auto;padding-top:14px;padding-bottom:14px;
    position:static !important;
  }
  header .lock{min-width:0;flex:0 1 auto;overflow:hidden}
  header .lock svg{max-width:100%}
  header .navbtn{flex:0 0 auto}

  header nav{
    display:none !important;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--nav-panel-bg,#fff);
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 22px 44px -22px rgba(0,0,0,.28);
    padding:8px 0 14px;
    max-height:calc(100dvh - 78px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  header.nav-open nav{display:flex !important}
  header nav > a{
    display:block !important;width:100%;box-sizing:border-box;
    padding:15px 28px !important;margin:0 !important;
    border:0 !important;border-radius:0 !important;
    font-size:16px !important;letter-spacing:.005em !important;text-transform:none !important;
    text-align:left !important;line-height:1.3;justify-content:flex-start;
  }
  header nav > a + a{border-top:1px solid rgba(0,0,0,.055) !important}
  header nav > a.lang{
    display:inline-block !important;width:auto;margin:16px 28px 2px !important;
    padding:9px 14px !important;
    border:1px solid rgba(0,0,0,.16) !important;border-radius:6px !important;
    font-size:11px !important;letter-spacing:.14em !important;text-transform:uppercase !important;
    align-self:flex-start;
  }
  header nav > a.btn,header nav > a.btn.sm{
    display:block !important;width:auto;align-self:stretch;
    margin:12px 28px 6px !important;padding:16px 20px !important;
    border-radius:10px !important;
    text-align:center !important;font-size:14px !important;letter-spacing:.05em !important;
  }
}

/* Grupo Gesto heritage header keeps its own type scale in the panel */
@media (max-width:1040px){
  .hh nav > a{color:#555}
  .hh nav > a:hover,.hh nav > a.on{color:var(--h-teal,#009DAC);border-bottom-color:transparent !important}
  .hh .navbtn{border-color:#E1E1E1;color:#555}
}

@media (prefers-reduced-motion:reduce){
  header .navbtn .bars i{transition:none}
}