/* ============================================================
   First-level nav row - one definition for every page except index.html.
   index.html#top is the reference: 40px row, 999px pills, translucent hover
   chips and a 1px currentColor underline that wipes in from the left.
   This file is linked last on the other pages and every selector is .nav
   scoped, so it outranks both the page's own inline block and assets/site.css
   without those files having to be rewritten.
   Palette is dark-theme only: in light mode each page keeps its own tokens,
   which is correct - only index.html sits over a permanently dark hero.
   ============================================================ */
.nav{
  --nv-ink:var(--hero-ink-2,rgba(255,255,255,.72));
  --nv-ink-strong:var(--hero-ink,#FFFFFF);
  --nv-fill:var(--hero-fill,rgba(255,255,255,.10));
  --nv-fill-strong:var(--hero-fill-strong,rgba(255,255,255,.18));
}

/* 1. Geometry - the same row metrics index.html#top uses.
   site.css pages ran 32px links on 3px side padding and 16px CTA padding, which
   is why their row sat 8px shorter and the pills came out wider. */
.nav .nav__links a{display:inline-flex;align-items:center;padding:8px;min-height:40px;font-size:15px}
/* Every page keeps the optional "Casos de uso" link: site.css hid it, the row
   now fits it at 1281px and up once the adaptive script steps down to
   nav--compact / nav--tight. */
.nav .nav__links .nav-opt{display:inline-flex}
.nav .btn{min-height:40px;padding:0 12px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.nav .nav__login{padding:0 10px;border-radius:999px}
.nav .lang{padding:3px;border-radius:999px}
.nav .lang button{min-height:32px;padding:7px 4px;font-size:13px}
@media (min-width:1281px){
  .nav .nav__login{min-width:104px;justify-content:center}
  /* site.css hides the label at every width; index only drops it below 1281 */
  .nav .nav__login span{display:inline}
}

/* Two CTAs and seven section links need ~1197px of row; the 1200px grid hands
   the bar 1104px, which forced nav--tight and made the labels read as cramped.
   Above 1280 the header gets its own 1320px box so both CTAs stay and the links
   keep their 15px / 8px spacing. The page grid below is untouched. */
@media (min-width:1281px){
  .nav .nav__inner{max-width:1320px}
}

/* 2. Hover underline - same stroke, same wipe, same insets as the reference:
   nav labels are inset to the label width, login and pills run the full box. */
.nav .nav__links a,.nav .nav__login,.nav .nav__cta{position:relative}
.nav .nav__links a::after,.nav .nav__login::after,.nav .nav__cta::after{
  content:"";position:absolute;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;pointer-events:none;
  transition:transform .25s cubic-bezier(.22,1,.36,1)}
.nav .nav__links a::after{left:8px;right:8px}
.nav .nav__login::after,.nav .nav__cta::after{left:0;right:0}
.nav .nav__links a:hover::after,.nav .nav__links a:focus-visible::after,
.nav .nav__login:hover::after,.nav .nav__login:focus-visible::after,
.nav .nav__cta:hover::after,.nav .nav__cta:focus-visible::after{transform:scaleX(1)}
/* site.css draws that underline on every anchor inside .nav, so the brand picked
   it up too. index.html keeps the brand plain - no line under the logo. */
.nav .brand::after{content:none}

/* 3. Palette - index.html#top, dark mode only */
[data-theme="dark"] .nav .brand,
[data-theme="dark"] .nav .brand__mx{color:var(--nv-ink-strong)}
[data-theme="dark"] .nav .nav__links a{color:var(--nv-ink)}
[data-theme="dark"] .nav .nav__links a:hover{color:var(--nv-ink-strong);background:var(--nv-fill)}
[data-theme="dark"] .nav .nav__login{color:var(--nv-ink)}
[data-theme="dark"] .nav .nav__login:hover{color:var(--nv-ink-strong);background:var(--nv-fill)}
[data-theme="dark"] .nav .lang{background:var(--nv-fill)}
[data-theme="dark"] .nav .icon-btn{color:var(--nv-ink)}
[data-theme="dark"] .nav .icon-btn:hover{color:var(--nv-ink-strong);background:var(--nv-fill)}
[data-theme="dark"] .nav .nav__cta--quiet{background:var(--nv-fill);color:var(--nv-ink-strong)}
[data-theme="dark"] .nav .nav__cta--quiet:hover{background:var(--nv-fill-strong)}