/* ============================================================
   BitMaxis · Mostro — animación (GSAP) y enlaces entre herramientas
   ============================================================ */

/* enlace a otra herramienta (Swap) en la nav — destacado */
.nav-links a.nav-tool{color:var(--primary-2);font-weight:700}
.nav-links a.nav-tool:hover{color:var(--primary)}

/* GSAP: pre-ocultar el hero (anti-parpadeo). anim.js lo revela.
   Si no hay JS/GSAP, anim.js quita .has-js y el hero se ve igual. */
.has-js .hero-logo,
.has-js .hero .eyebrow,
.has-js .hero h1,
.has-js .hero .lead,
.has-js .hero-cta,
.has-js .hero-badges{opacity:0}

/* ---- Top bar: menú desplegable animado (declutter del nav sobrecargado) ---- */
header.nav .nav-inner{position:relative}
header.nav .menu-btn{display:inline-flex;align-items:center;gap:6px;width:auto;height:auto;
  padding:8px 13px;font-size:.9rem;font-weight:700;line-height:1}
header.nav .menu-btn .chev{display:inline-block;font-size:.8rem;transition:transform .25s ease}
header.nav .menu-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
header.nav .nav-links{
  position:absolute;top:calc(100% + 10px);right:0;left:auto;z-index:60;
  display:flex;flex-direction:column;align-items:stretch;gap:2px;
  width:min(260px,calc(100vw - 32px));
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:10px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-8px);transform-origin:top right;pointer-events:none}
header.nav .nav-links a{padding:10px 12px;border-radius:9px;font-size:.95rem;color:var(--text);white-space:nowrap}
header.nav .nav-links a:hover{background:rgba(255,255,255,.05);color:var(--primary-2)}
header.nav .nav-links a.nav-tool{color:var(--primary-2)}
header.nav .nav-links.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* en móvil pequeño el CTA "Conectar" ya está dentro del menú → ocultarlo para que quepa */
@media (max-width:560px){ header.nav .nav-cta .btn-primary{display:none} }