/* ==========================================================================
   nav.css — Navbar de marketing Vanguard (sobre om-css tokens + marca)
   ========================================================================== */
.vl-skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--vl-grad);color:#02122e;
  padding:.6rem 1rem;border-radius:0 0 var(--radius-md) 0;font-weight:700;}
.vl-skip:focus{left:0;}

.vlnav{position:sticky;top:0;z-index:var(--z-sticky,50);
  border-bottom:1px solid transparent;transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;}
.vlnav.is-scrolled{background:rgba(5,8,15,.78);backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--color-border);}
.vlnav-inner{display:flex;align-items:center;gap:var(--space-5);height:4.25rem;}
.vlnav-brand{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;flex:none;text-decoration:none;}
.vlnav-logo{height:30px;width:auto;display:block;}
.vlnav-slogan{font-family:var(--brand-font-display);font-weight:700;font-size:.5rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--vl-turquoise);line-height:1;padding-left:2px;}
@media (max-width:600px){.vlnav-slogan{display:none;}}

/* --- navegación desktop --- */
.vlnav-nav{margin-left:var(--space-4);}
.vlnav-menu{display:flex;align-items:center;gap:var(--space-1);list-style:none;margin:0;padding:0;}
.vlnav-link{display:inline-flex;align-items:center;gap:.35rem;position:relative;
  padding:.55rem .8rem;border:0;background:none;cursor:pointer;
  font-family:var(--brand-font-body);font-size:var(--text-sm);font-weight:600;
  color:var(--color-text-muted);text-decoration:none;border-radius:var(--radius-md);
  transition:color var(--transition-fast),background var(--transition-fast);}
.vlnav-link:hover{color:var(--color-text);background:rgba(255,255,255,.04);}
.vlnav-link[aria-current="page"]{color:var(--color-text);}
.vlnav-link[aria-current="page"]::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.15rem;
  height:2px;border-radius:2px;background:var(--vl-grad);}
.vlnav-chev{transition:transform var(--transition-fast);opacity:.8;}

/* --- dropdown Plataforma --- */
.vlnav-has-drop{position:relative;}
.vlnav-drop{position:absolute;top:calc(100% + .4rem);left:0;min-width:20rem;
  display:grid;gap:2px;padding:var(--space-2);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60;}
.vlnav-drop--end{left:auto;right:0;}
.vlnav-has-drop:hover .vlnav-drop,
.vlnav-has-drop.is-open .vlnav-drop{opacity:1;visibility:visible;transform:translateY(0);}
.vlnav-has-drop:hover .vlnav-chev,
.vlnav-has-drop.is-open .vlnav-chev{transform:rotate(180deg);}
.vlnav-drop-item{display:flex;align-items:center;gap:var(--space-3);padding:.7rem .8rem;
  border-radius:var(--radius-md);text-decoration:none;transition:background var(--transition-fast);}
.vlnav-drop-item:hover{background:rgba(255,255,255,.05);}
.vlnav-drop-ico{display:grid;place-items:center;width:2.4rem;height:2.4rem;flex:none;border-radius:var(--radius-md);
  background:var(--vl-grad-soft);border:1px solid var(--color-border);}
.vlnav-drop-ico img{width:22px;height:22px;object-fit:contain;}
/* el símbolo V (viewBox ancho) debe encajar sin deformarse en tiles cuadradas */
.vl-ico img{object-fit:contain;}
.vlnav-drop-tx strong{display:block;font-size:var(--text-sm);color:var(--color-text);font-weight:700;}
.vlnav-drop-tx small{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:1px;}

/* --- lado derecho: idioma + CTA + burger --- */
.vlnav-end{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;flex:none;}
.vlnav-lang{position:relative;}
.vlnav-lang-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.45rem .6rem;border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);cursor:pointer;
  font-family:var(--brand-font-body);font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;
  transition:color var(--transition-fast),border-color var(--transition-fast);}
.vlnav-lang-btn:hover{color:var(--color-text);border-color:var(--color-border-strong);}
.vlnav-lang-menu{position:absolute;top:calc(100% + .4rem);right:0;min-width:6rem;display:grid;gap:2px;padding:var(--space-2);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60;}
.vlnav-lang.is-open .vlnav-lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.vlnav-lang-menu a{padding:.45rem .6rem;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:600;
  color:var(--color-text-muted);text-decoration:none;}
.vlnav-lang-menu a:hover{background:rgba(255,255,255,.05);color:var(--color-text);}
.vlnav-lang-menu a[aria-current="true"]{color:var(--color-text);background:var(--vl-grad-soft);}

.vlnav-cta{display:inline-flex;align-items:center;padding:.6rem 1.1rem;border-radius:var(--radius-md);
  background:var(--vl-grad);color:#02122e;font-family:var(--brand-font-display);font-weight:700;
  font-size:var(--text-sm);text-decoration:none;box-shadow:0 8px 24px rgba(1,107,252,.28);
  transition:transform var(--transition-fast),box-shadow var(--transition);}
.vlnav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(1,107,252,.40);}

.vlnav-burger{display:none;flex-direction:column;gap:5px;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;border-radius:var(--radius-md);}
.vlnav-burger span{display:block;width:22px;height:2px;background:var(--color-text);border-radius:2px;
  transition:transform .25s ease,opacity .25s ease;}
.vlnav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.vlnav-burger.is-open span:nth-child(2){opacity:0;}
.vlnav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== Móvil ===== */
@media (max-width:900px){
  .vlnav-burger{display:flex;}
  .vlnav-nav{position:fixed;inset:4.25rem 0 auto;margin:0;max-height:0;overflow:hidden;
    background:rgba(5,8,15,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--color-border);
    transition:max-height .3s ease;}
  .vlnav-nav.is-open{max-height:80vh;overflow:auto;}
  .vlnav-menu{flex-direction:column;align-items:stretch;gap:0;padding:var(--space-4) var(--space-6);}
  .vlnav-link{padding:.9rem .4rem;font-size:var(--text-base);width:100%;justify-content:space-between;}
  .vlnav-link[aria-current="page"]::after{display:none;}
  .vlnav-drop{position:static;min-width:0;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;border:0;padding:0 0 .4rem .4rem;max-height:0;overflow:hidden;transition:max-height .25s ease;}
  .vlnav-has-drop.is-open .vlnav-drop{max-height:30rem;}
  .vlnav-cta{display:none;}
  .vlnav-menu .vlnav-cta-mobile{display:inline-flex;margin-top:var(--space-3);justify-content:center;}
}