/* =====================================================================
   NAVEGACIÓN · dock orbital (index y proyectos)
   Cada enlace lleva data-nav="…" y el icono se elige con ese atributo,
   así los enlaces pueden apuntar a otra página (index.html#servicios).
   ===================================================================== */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(5,7,12,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(175,195,225,.12);
}
.nav-inner{
  max-width:1280px;margin:0 auto;min-height:74px;padding:10px 28px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
}
.brand{justify-self:start;display:flex;align-items:center;gap:11px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;letter-spacing:.01em;}
.brand-mark{width:36px;height:36px;display:block;flex-shrink:0;border-radius:9px;}
.brand-word{font-size:19px;letter-spacing:.025em;color:var(--ink);}

/* Iconos (máscara: toman el color del texto) */
.ico{display:block;width:20px;height:20px;flex:0 0 20px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;}
[data-nav="inicio"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round'%3E%3Cellipse cx='12' cy='12' rx='8.2' ry='3.4'/%3E%3Cellipse cx='12' cy='12' rx='3.4' ry='8.2' transform='rotate(32 12 12)'/%3E%3Ccircle cx='12' cy='12' r='1.55' fill='%23000' stroke='none'/%3E%3C/svg%3E");}
[data-nav="servicios"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 19 7.4v9.2L12 20.5 5 16.6V7.4z'/%3E%3Ccircle cx='12' cy='12' r='2.1'/%3E%3Cpath d='M12 5.8v4.1M18 8.7l-3.7 2M18 15.3l-3.7-2M12 18.2v-4.1M6 15.3l3.7-2M6 8.7l3.7 2'/%3E%3C/svg%3E");}
[data-nav="metodo"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3Cpath d='M8 9h5M8 12h8M8 15h4M3 9h2M3 15h2M19 9h2M19 15h2M9 3v2M15 3v2M9 19v2M15 19v2'/%3E%3C/svg%3E");}
[data-nav="proyectos"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8c2.9 1.9 4.6 5.3 4.6 9.2l-1.9 3.2H9.3L7.4 12c0-3.9 1.7-7.3 4.6-9.2Z'/%3E%3Ccircle cx='12' cy='9.2' r='1.7'/%3E%3Cpath d='M9.3 15.2 6.6 18.6l3.4-.9M14.7 15.2l2.7 3.4-3.4-.9M12 17.6v3.4'/%3E%3C/svg%3E");}
[data-nav="nosotros"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round'%3E%3Cpath d='M12 12c-2.2-3.1-3.8-4.6-5.8-4.6A4.1 4.1 0 0 0 6.2 15c2 0 3.6-1.5 5.8-4.6 2.2 3.1 3.8 4.6 5.8 4.6a4.1 4.1 0 1 0 0-7.6c-2 0-3.6 1.5-5.8 4.6Z'/%3E%3C/svg%3E");}
[data-nav="contacto"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M7.8 16.2a6 6 0 0 1 0-8.4M16.2 7.8a6 6 0 0 1 0 8.4M5 19a9.9 9.9 0 0 1 0-14M19 5a9.9 9.9 0 0 1 0 14'/%3E%3C/svg%3E");}
[data-nav="acceso"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 7v10l-7 4-7-4V7z'/%3E%3Cpath d='M9 12h8M14 9l3 3-3 3'/%3E%3C/svg%3E");}
[data-nav="app"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cpath d='M9 18h6M12 6v7M9 10l3 3 3-3'/%3E%3C/svg%3E");}

/* ---------- Dock de escritorio ---------- */
nav.links{display:flex;align-items:center;gap:6px;}
nav.links a{
  position:relative;width:60px;height:52px;padding-top:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  color:#aab5c5;border-radius:10px;transition:background .24s ease;
}
nav.links a .ico{
  box-sizing:content-box;width:20px;height:20px;padding:7px;border-radius:10px;
  background:none;position:relative;
}
nav.links a .ico::before{
  content:"";position:absolute;inset:7px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
nav.links a .ico{
  -webkit-mask:none;mask:none;
  border:1px solid rgba(167,192,227,.26);
  box-shadow:inset 0 0 18px rgba(116,157,215,.03);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .25s ease,box-shadow .25s ease,color .25s ease;
}
nav.links a:hover,nav.links a:focus-visible{background:linear-gradient(180deg,rgba(160,190,235,.055),rgba(95,126,176,.018));color:#e4ecf8;}
nav.links a:hover .ico,nav.links a:focus-visible .ico{
  transform:translateY(-5px) scale(1.045);border-color:rgba(207,224,248,.58);
  box-shadow:inset 0 0 20px rgba(121,164,226,.07),0 7px 22px rgba(82,126,186,.13),0 0 16px rgba(159,198,244,.08);
}
nav.links a.active{color:#eef3fb;}
nav.links a.active .ico{border-color:rgba(210,226,248,.5);box-shadow:inset 0 0 18px rgba(118,160,220,.08),0 0 14px rgba(135,177,231,.07);}
nav.links a.active::after{
  content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;border-radius:50%;
  background:#cfe0ff;box-shadow:0 0 8px rgba(160,195,255,.9);transform:translateX(-50%);
}
nav.links .lbl{
  position:absolute;left:50%;top:41px;transform:translate(-50%,5px);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;line-height:1;letter-spacing:.035em;
  color:#c6d0df;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .24s ease;
}
nav.links a:hover .lbl,nav.links a:focus-visible .lbl{opacity:.95;transform:translate(-50%,0);}
nav.links a.active .lbl{opacity:0;}
nav.links a.active:hover .lbl{opacity:.95;}

.nav-right{justify-self:end;display:flex;align-items:center;gap:14px;}
.lang-switch{display:flex;align-items:center;gap:2px;}
.lang-switch button{
  font-family:'IBM Plex Mono',ui-monospace,monospace;min-width:30px;height:30px;padding:0 6px;
  border:1px solid transparent;border-radius:6px;background:transparent;color:#777e89;
  font-size:11px;letter-spacing:.04em;cursor:pointer;transition:color .18s ease,background .18s ease,border-color .18s ease;
}
.lang-switch button:hover{color:#cbd5e2;background:rgba(150,177,214,.035);}
.lang-switch button.on{color:#eef3f9;border-color:rgba(185,205,233,.22);background:rgba(128,158,200,.045);}
.nav-acceso{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 11px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.035em;color:#d6e0ed;
  border:1px solid rgba(188,210,240,.28);border-radius:7px;
  background:linear-gradient(180deg,rgba(152,185,231,.05),rgba(70,104,153,.018));
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.nav-acceso .ico{width:16px;height:16px;flex-basis:16px;opacity:.85;}
.nav-acceso:hover{border-color:rgba(213,229,249,.48);background:linear-gradient(180deg,rgba(159,194,240,.085),rgba(76,113,166,.035));box-shadow:0 5px 16px rgba(0,0,0,.16);}

/* ---------- Menú del móvil ---------- */
.burger{display:none;justify-self:end;background:none;border:none;cursor:pointer;padding:6px;}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0;transition:transform .3s ease,opacity .3s ease;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.mobile-menu{
  display:none;position:fixed;inset:0;z-index:99;overflow-y:auto;
  background:rgba(4,5,10,.96);
  padding:calc(104px + env(safe-area-inset-top,0px)) 28px 40px;flex-direction:column;gap:22px;
}
.mobile-menu.open{display:flex;animation:menuEntra .35s cubic-bezier(.2,.8,.2,1);}
@keyframes menuEntra{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.mobile-menu a{display:flex;align-items:center;gap:14px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:21px;color:var(--ink);}
.mobile-menu a .ico{width:22px;height:22px;flex-basis:22px;color:#aebdd1;}

@media (max-width:1040px) and (min-width:861px){
  nav.links{gap:2px;}
  nav.links a{width:52px;}
  .nav-inner{padding-inline:20px;}
}
@media (max-width:860px){
  .nav-inner{grid-template-columns:auto 1fr auto;}
  nav.links,.nav-acceso{display:none;}
  .burger{display:block;}
}
@media (max-width:520px){
  .brand-mark{width:32px;height:32px;}
  .brand-word{font-size:17px;}
  .nav-inner{padding-inline:18px;gap:10px;}
  .lang-switch button{min-width:26px;padding:0 4px;}
}
@media (prefers-reduced-motion:reduce){
  .mobile-menu.open{animation:none;}
  nav.links a .ico,nav.links .lbl{transition:none;}
}