/* ============================================================================
   00 · nav.  Extracted verbatim from headers/b-tablero/index.html: the white
   bar, the wordmark, three links, Entrar, the coral button and the CSS burger.
   Nothing here is shared, so nothing here belongs in materials.css.
   ========================================================================= */
.nav{
  position:relative;z-index:var(--z-nav);
  height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(18px,3vw,44px);
  padding:0 clamp(16px,2vw,30px);
  background:#fff;
  border-bottom:1px solid #E6E3DE;
}
.wordmark{
  font-family:var(--display);
  font-size:clamp(19px,1.7vw,25px);
  letter-spacing:-.02em;
  color:#111110;
  text-decoration:none;
  white-space:nowrap;
  margin-right:auto;
}
.nav-links{display:flex;align-items:center;gap:clamp(20px,2.4vw,34px)}
.nav-links a{
  font-size:15px;font-weight:500;color:var(--nav-ink);
  text-decoration:none;white-space:nowrap;
}
.nav-links a:hover{color:#111110}
.nav-right{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px)}
.login{font-size:15px;font-weight:500;color:var(--nav-ink);text-decoration:none;white-space:nowrap}
.login:hover{color:#111110}
.nav-cta{
  font-size:15px;font-weight:700;color:#fff;
  background:var(--coral);
  border:0;border-radius:var(--r-btn);
  padding:11px 18px;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 0 rgba(0,0,0,.14);
}
.nav-cta:hover{background:var(--coral-press)}
.nav-cta:active{transform:translateY(1px)}

/* three bars, drawn in CSS. It is a <button> rather than the hero's decorative
   <span> so the label reaches a screen reader; the box is the same 22x2. */
.burger{
  display:none;width:22px;height:2px;background:#111110;position:relative;flex:0 0 auto;
  padding:0;border:0;-webkit-appearance:none;appearance:none;cursor:pointer;
}
.burger::before,.burger::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#111110}
.burger::before{top:-7px}
.burger::after{top:7px}

.nav :focus-visible{outline-color:#111110;outline-offset:2px}

@media (prefers-reduced-motion: no-preference){
  .nav-links a,.login,.nav-cta{transition:color .15s ease, background-color .15s ease}
}

@media (max-width: 899px){
  .nav{gap:10px;padding:0 12px}
  .wordmark{font-size:17px}
  .nav-links{display:none}
  .nav-right{gap:10px}
  .login{display:none}
  .nav-cta{font-size:12.5px;padding:9px 12px}
  .burger{display:block;margin-left:2px}
}

@media (max-width: 380px){
  .nav-cta{font-size:11.5px;padding:8px 10px}
  .wordmark{font-size:16px}
}