.menu-intro,.nav-icon,.nav-arrow{display:none}

@media(max-width:1320px){
  .js .menu-toggle{
    position:relative;width:44px;height:44px;padding:0;
    border:1px solid var(--line);border-radius:12px;background:var(--sand);
    transition:background .2s,border-color .2s;
  }
  .js .menu-toggle span{
    position:absolute;left:12px;right:12px;height:2px;margin:0;
    border-radius:1px;background:var(--ink);transform:none;
    transition:transform .2s,background .2s;
  }
  .js .menu-toggle span:first-child{top:17px}
  .js .menu-toggle span:last-child{top:25px}
  .js .menu-toggle[aria-expanded="true"]{background:var(--ink);border-color:var(--ink)}
  .js .menu-toggle[aria-expanded="true"] span{background:var(--white)}
  .js .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
  .js .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .js .main-nav{
    --menu-gap:16px;
    inset:calc(100% + var(--menu-gap)) max(var(--menu-gap),env(safe-area-inset-right)) auto auto;
    width:min(520px,calc(100% - max(var(--menu-gap),env(safe-area-inset-left)) - max(var(--menu-gap),env(safe-area-inset-right))));
    max-height:calc(100vh - var(--header-height) - var(--menu-gap) * 2 - env(safe-area-inset-bottom));
    max-height:calc(100dvh - var(--header-height) - var(--menu-gap) * 2 - env(safe-area-inset-bottom));
    padding:16px;border:1px solid var(--line);border-radius:20px;
    background:var(--paper);box-shadow:0 24px 60px #102c2533,0 4px 12px #102c2514;
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
    scrollbar-color:#afb5a3 transparent;scroll-padding-block:16px;
  }
  .js .main-nav.is-open{animation:menu-reveal .2s ease-out}
  .js .main-nav>*{flex-shrink:0}
  .js .menu-intro{
    display:flex;align-items:center;gap:16px;min-width:0;
    margin-bottom:12px;padding:12px;border-radius:12px;
    background:var(--ink);color:var(--paper);
  }
  .js .menu-photo{width:62px;height:62px;flex:none;border-radius:7px;object-fit:cover}
  .js .menu-intro>div{min-width:0}
  .js .menu-intro span{display:block;font:600 11px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#d6dfc9}
  .js .menu-intro strong{display:block;font:600 26px/1.3 var(--sans);letter-spacing:-.04em}
  .js .main-nav>a{
    display:grid;grid-template-columns:22px minmax(0,1fr) 20px;align-items:center;gap:12px;
    min-height:54px;padding:12px;border:0;border-radius:9px;
    font:600 clamp(20px,3vw,24px)/1.4 var(--sans);letter-spacing:-.035em;
    color:var(--ink);transition:background .2s,color .2s;
  }
  .js .main-nav>a+a{margin-top:2px}
  .js .nav-icon{display:flex;align-items:center;justify-content:center;color:var(--olive)}
  .js .nav-icon svg{width:21px;height:21px}
  .js .nav-arrow{display:block;width:20px;height:20px;color:var(--olive)}
  .js .nav-label{min-width:0}
  .js .nav-label .external-small{display:none}
  .js .main-nav>a[aria-current="page"]{background:#eae4d7;color:var(--ink)}
  .js .main-nav>a[aria-current="page"] .nav-icon,.js .main-nav>a[aria-current="page"] .nav-arrow{color:var(--accent)}
  .js .main-nav>a:hover{background:var(--sand)}
  .js .main-nav>a:focus-visible,.js .menu-contact>a:focus-visible{outline-color:var(--accent);outline-offset:-3px}
  .js .menu-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:16px;margin-top:12px;border-top:1px solid var(--line)}
  .js .menu-availability{grid-column:1/-1;min-height:52px;padding:14px 17px;background:var(--ink);border-radius:9px;font-size:15px;gap:12px}
  .js .menu-phone,.js .menu-whatsapp{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font:650 14px/1.5 var(--sans);color:var(--ink);transition:background .2s}
  .js .menu-phone:hover,.js .menu-whatsapp:hover{background:var(--sand)}
  .js .menu-phone svg,.js .menu-whatsapp svg{width:18px;height:18px}
  .menu-backdrop{background:#142c2559;backdrop-filter:blur(5px);touch-action:pan-y pinch-zoom}
}
@media(max-width:640px){
  .js .main-nav{--menu-gap:12px;padding:12px;border-radius:16px;scroll-padding-block:12px}
  .js .menu-intro{gap:13px;padding:10px;margin-bottom:10px}
  .js .menu-photo{width:54px;height:54px}
  .js .main-nav>a{grid-template-columns:20px minmax(0,1fr) 18px;gap:10px;padding:12px 10px;font-size:clamp(19px,5.4vw,23px)}
  .js .nav-arrow{width:18px;height:18px}
  .js .menu-contact{gap:8px;padding-top:13px;margin-top:10px}
}
@media(max-width:359px){
  .js .menu-toggle{width:40px}
  .js .menu-toggle span{left:10px;right:10px}
  .js .main-nav{--menu-gap:10px;padding:10px}
  .js .main-nav>a{grid-template-columns:minmax(0,1fr) 18px;gap:8px;padding-inline:8px;font-size:19px}
  .js .nav-icon{display:none}
  .js .menu-intro strong{font-size:24px}
  .js .menu-phone,.js .menu-whatsapp{gap:6px;padding-inline:7px;font-size:13px}
  .js .menu-phone svg,.js .menu-whatsapp svg{width:16px;height:16px}
}
@media(max-width:1320px) and (max-height:500px){
  .js .main-nav{--menu-gap:10px}
  .js .menu-intro{padding:8px 10px;margin-bottom:8px}
  .js .menu-photo{width:42px;height:42px}
  .js .menu-intro strong{font-size:22px}
}
@keyframes menu-reveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}