/* ============================================================
   SYMBIOTIQ — Nav
   Única fuente de la píldora flotante. La cargan TODAS las páginas
   (index.html incluida) para que el nav no se desincronice.

   Autocontenido a propósito: usa valores literales, no variables,
   porque cada página define sus tokens con nombres distintos
   (--font-body vs --f-body). Si lo cambias aquí, cambia en todo el sitio.
   ============================================================ */

.nav{
  position:fixed;top:16px;left:0;right:0;
  margin-inline:auto;width:fit-content;
  /* 60: por debajo del grano de película (80), como estaba en la home.
     Así la textura sigue pasando por encima del nav y no cambia el look. */
  z-index:60;
  display:flex;align-items:center;gap:6px;
  padding:8px 10px 8px 18px;border-radius:999px;
  background:rgba(10,1,24,.55);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.1);
  transition:background .4s,border-color .4s;
  max-width:calc(100vw - 32px);
}

.nav-logo{display:flex;align-items:center;margin-right:10px;flex-shrink:0}
.nav-logo img{height:30px;width:auto;flex-shrink:0}
.nav-logo .logo-icon{display:none}

.nav-link{
  font-family:'DM Sans',sans-serif;font-weight:400;font-size:.88rem;
  color:rgba(255,255,255,.82);text-decoration:none;
  padding:10px 13px;border-radius:999px;white-space:nowrap;
  transition:color .25s,background .25s;
}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.09)}
.nav-link[aria-current="page"]{color:#fff;background:rgba(255,255,255,.09)}

.nav-cta{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.86rem;
  color:#fff;text-decoration:none;
  padding:11px 20px;border-radius:999px;
  background:linear-gradient(120deg,#ff692f,#ffa426);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;
  display:inline-block;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,105,47,.4)}

/* Interruptor de idioma: dos banderas dentro de una píldora. La activa
   (el idioma en el que ya estás) es un <span>, sin link; la otra es el
   <a> que lleva a la versión traducida. Deliberadamente SIN .nav-opt/
   .nav-opt2/.nav-link: esas clases se ocultan en los cortes de abajo para
   que quepa el CTA, y el interruptor tiene que sobrevivir hasta el nav
   más angosto (logo-icon + CTA). Por eso lleva su propio ajuste en 768px
   en vez de heredar uno. margin-left lo separa del CTA "Hablemos", que
   antes quedaba pegado. */
.nav-lang{
  display:flex;align-items:center;gap:3px;
  padding:4px;border-radius:999px;margin-left:2px;
  border:1px solid rgba(255,255,255,.16);
  transition:border-color .25s;
}
.nav-lang:hover{border-color:rgba(255,255,255,.3)}
.nav-lang-flag{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:20px;border-radius:6px;
  text-decoration:none;
  opacity:.42;filter:grayscale(.4);
  transition:opacity .25s,filter .25s,transform .25s;
}
.nav-lang-flag svg{display:block;width:19px;height:auto;border-radius:2px}
.nav-lang-flag.is-active{opacity:1;filter:none}
a.nav-lang-flag:hover{opacity:.9;filter:none;transform:translateY(-1px)}

/* La píldora no cabe completa en pantallas intermedias: se sueltan los
   links secundarios por etapas antes de ocultarlos todos en 768.
   Sin estos cortes, el CTA "Hablemos" se sale del viewport. */
@media (max-width:1200px){
  .nav-opt{display:none}
}
@media (max-width:980px){
  .nav-opt2{display:none}
}
@media (max-width:768px){
  .nav{gap:2px;padding:7px 8px 7px 12px}
  .nav-link{display:none}
  .nav-logo .logo-full{display:none}
  .nav-logo .logo-icon{display:block;height:28px}
  .nav-lang{padding:3px;gap:2px}
  .nav-lang-flag{width:22px;height:17px}
  .nav-lang-flag svg{width:16px}
}

@media (prefers-reduced-motion:reduce){
  .nav,.nav-link,.nav-cta{transition:none}
}