/* ===========================================================
   ODENZE · navegación
   =========================================================== */

/* --- Cabecera: logo, botón de menú, WhatsApp --- */
header.site .bar{gap:18px;}
header.site nav .link{display:none!important;}          /* fuera los enlaces en línea */
header.site{
  z-index:1300!important;                 /* la cabecera manda sobre el panel */
  transition:background .5s ease, border-color .5s ease, padding .4s ease;
}
body.menu-open header.site{background:transparent!important; border-color:transparent!important; backdrop-filter:none!important;}
body.menu-open header.site .wa-btn{opacity:0; pointer-events:none; transition:opacity .3s ease;}
header.site.shrunk{background:rgba(2,16,10,.82); backdrop-filter:blur(16px);}

/* --- Botón de menú: tres trazos que se vuelven aspa --- */
.nav-btn{
  position:relative; z-index:1200; margin-left:auto;
  display:inline-flex; align-items:center; gap:13px;
  background:none; border:0; cursor:pointer; padding:10px 4px;
  font-family:var(--disp); font-size:.95rem; font-weight:500;
  color:var(--ink); letter-spacing:0;
}
.nav-btn .bars{position:relative; width:30px; height:15px; flex:none;}
.nav-btn .bars i{
  position:absolute; left:0; height:2px; border-radius:2px;
  background:var(--emerald);
  transition:transform .55s cubic-bezier(.65,0,.25,1), width .45s ease, opacity .3s ease;
}
.nav-btn .bars i:nth-child(1){top:0;    width:30px;}
.nav-btn .bars i:nth-child(2){top:6.5px; width:20px;}
.nav-btn .bars i:nth-child(3){top:13px;  width:26px;}
.nav-btn:hover .bars i{width:30px;}
.nav-btn .lbl{min-width:52px; text-align:left;}
body.menu-open .nav-btn .bars i:nth-child(1){transform:translateY(6.5px) rotate(45deg); width:28px;}
body.menu-open .nav-btn .bars i:nth-child(2){opacity:0; transform:scaleX(.2);}
body.menu-open .nav-btn .bars i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg); width:28px;}

/* --- Panel a pantalla completa --- */
.nav-panel{
  position:fixed; inset:0; z-index:1100;
  background:
    radial-gradient(70% 90% at 82% 24%, rgba(16,114,85,.42), transparent 60%),
    radial-gradient(60% 70% at 12% 86%, rgba(25,224,166,.12), transparent 62%),
    linear-gradient(168deg,#02100A,#051A12 52%,#02100A);
  clip-path:circle(0% at calc(100% - 86px) 42px);
  transition:clip-path .85s cubic-bezier(.76,0,.24,1);
  display:flex; flex-direction:column; justify-content:center;
  pointer-events:none; overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(92px,12vh,130px) 0 clamp(36px,6vh,64px);
}
body.menu-open .nav-panel{clip-path:circle(150% at calc(100% - 86px) 42px); pointer-events:auto;}

.nav-panel .np-wrap{
  width:min(1240px,100%); margin:0 auto;
  padding:0 max(clamp(20px,5.2vw,78px),env(safe-area-inset-left));
}

/* Lista de secciones en tipografía grande */
.np-list{list-style:none; display:flex; flex-direction:column;}
.np-list li{overflow:hidden;}
.np-list a{
  position:relative; display:flex; align-items:baseline; gap:clamp(16px,2.4vw,34px);
  padding:clamp(5px,1.1vh,11px) 0;
  font-family:var(--disp); font-weight:600;
  font-size:clamp(1.75rem,min(5.4vw,7.4vh),3.9rem); line-height:1.08; letter-spacing:-.035em;
  color:var(--ink);
  transform:translateY(112%);
  transition:transform .9s cubic-bezier(.19,.9,.22,1), color .4s ease;
  transition-delay:var(--d,0ms);
}
body.menu-open .np-list a{transform:none;}
.np-list a .idx{
  font-size:clamp(.78rem,1.1vw,.95rem); font-weight:500;
  color:var(--emerald); opacity:.7; flex:none; width:2.4em;
}
.np-list a .txt{position:relative; display:inline-block;}
.np-list a .txt::after{
  content:''; position:absolute; left:0; bottom:.12em; height:2px; width:100%;
  background:linear-gradient(90deg,#5CF6CC,#19E0A6 50%,#0B7A5B);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.2,.8,.3,1);
}
.np-list a:hover .txt,.np-list a:focus-visible .txt{
  background:linear-gradient(96deg,#5CF6CC,#19E0A6 50%,#0FA87C);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.np-list a:hover .txt::after,.np-list a:focus-visible .txt::after{transform:scaleX(1);}
.np-list a .arw{
  margin-left:clamp(10px,1.4vw,20px); font-size:clamp(.95rem,1.5vw,1.35rem); color:var(--emerald);
  opacity:0; transform:translateX(-18px);
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.9,.3,1.2);
}
.np-list a:hover .arw,.np-list a:focus-visible .arw{opacity:1; transform:none;}
.np-list a.here .idx{opacity:1;}
.np-list a.here .txt::after{transform:scaleX(1); opacity:.45;}

/* Pie del panel */
.np-foot{
  margin-top:clamp(30px,4.4vw,56px); padding-top:clamp(20px,2.6vw,30px);
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 30px;
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease .5s, transform .7s cubic-bezier(.2,.8,.3,1) .5s;
}
body.menu-open .np-foot{opacity:1; transform:none;}
.np-foot .tag{font-family:var(--disp); color:var(--ink-dim); font-size:.95rem;}
.np-foot .tag b{
  color:var(--ink); font-weight:600;
  background:linear-gradient(96deg,#5CF6CC,#19E0A6 50%,#0B7A5B);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}


@media(max-width:700px){
  .nav-btn .lbl{display:none;}
  .nav-panel{clip-path:circle(0% at calc(100% - 46px) 40px);}
  body.menu-open .nav-panel{clip-path:circle(150% at calc(100% - 46px) 40px);}
  .np-list a .arw{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .nav-panel{transition:opacity .25s ease; clip-path:none!important; opacity:0;}
  body.menu-open .nav-panel{opacity:1;}
  .np-list a,.np-foot{transform:none!important; transition:none!important;}
}

/* El símbolo de fondo se retiró del panel */
.np-mark{display:none!important;}

/* --- Cabecera en una sola fila también en móvil --- */
header.site .bar{flex-wrap:nowrap!important;}
header.site nav{
  margin-left:auto!important; display:flex!important; align-items:center!important;
  gap:14px!important; overflow:visible!important; flex:0 0 auto!important;
}
@media(max-width:700px){
  header.site .bar{gap:10px; padding:12px 0;}
  header.site .brand .role,header.site .brand .divider{display:none;}
  .nav-btn{padding:8px 2px;}
  header.site nav .wa-btn{padding:9px 15px; font-size:.86rem; box-shadow:none!important;}
}
@media(max-width:380px){
  header.site nav .wa-btn span{display:none;}
  header.site nav .wa-btn{padding:9px;}
}

/* --- Objetivos táctiles mínimos de 44px --- */
.nav-btn{min-width:44px; min-height:44px; justify-content:center;}
@media(max-width:700px){ .nav-btn{padding:12px 6px;} }