/* ============================================================
   NAV — Minimalista, invierte color según sección
   ============================================================ */

.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  z-index: 1000;
  background: transparent;
  transition: background-color .4s var(--ease), color .3s, border-color .3s;
  border-bottom: 2px solid transparent;
}

/* Tema según sección detrás (JS pone on-dark / on-light / on-accent) */
.nav.on-dark   { color: var(--white); }
.nav.on-light  { color: var(--black); }
.nav.on-accent { color: var(--black); }

/* Al scrollear: fondo sólido invertido */
.nav.is-scrolled { border-bottom-color: currentColor; }
.nav.is-scrolled.on-dark   { background: rgba(0,0,0,.92); }
.nav.is-scrolled.on-light  { background: rgba(255,255,255,.94); }
.nav.is-scrolled.on-accent { background: var(--accent); }

/* Marca */
.nav__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.nav__logo {
  width: 40px; height: 40px;
  object-fit: contain;
  /* fondo del logo es negro; en secciones claras lo enmarcamos */
  transition: filter .3s;
}
.nav.on-light .nav__logo,
.nav.on-accent .nav__logo {
  background: transparent;
}
.nav__brand-text {
  font-family: var(--font-title);
  font-size: 1.15rem;
  letter-spacing: .06em;
}

/* Links */
.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
  margin-right: 2rem;
}
.nav__link {
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: relative;
  padding: .3rem 0;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width .3s var(--ease);
}
.nav__link:hover::after { width: 100%; }

/* Acciones */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Selector de idioma segmentado */
.lang-switch {
  display: inline-flex;
  border: 2px solid currentColor;
}
.lang-switch__opt {
  background: transparent;
  color: inherit;
  border: none;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .35rem .55rem;
  transition: background-color .2s, color .2s;
  min-height: 32px;
}
.lang-switch__opt.is-active {
  background: currentColor;
}
.nav.on-dark   .lang-switch__opt.is-active { color: var(--black); }
.nav.on-light  .lang-switch__opt.is-active { color: var(--white); }
.nav.on-accent .lang-switch__opt.is-active { color: var(--accent); }

/* CTA WhatsApp */
.nav__cta {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .6rem 1rem;
  background: var(--accent);
  color: var(--black);
  border: 2px solid var(--accent);
  transition: transform .2s var(--ease);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.nav__cta:hover { transform: translateY(-2px); }

/* Hamburguesa */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  padding: 6px;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
}
.burger span {
  display: block;
  width: 26px; height: 2.5px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
  .nav__links {
    position: fixed;
    top: var(--nav-h); right: 0;
    width: min(78vw, 320px);
    height: calc(100vh - var(--nav-h));
    height: calc(100svh - var(--nav-h));
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.6rem;
    margin: 0;
    padding: 2rem;
    background: var(--black);
    color: var(--white);
    transform: translateX(105%);
    transition: transform .4s var(--ease);
    border-left: 3px solid var(--accent);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__link { font-size: 1.3rem; }
  .nav__cta { display: none; }
  .burger { display: flex; }
}

@media (max-width: 420px) {
  .nav__brand-text { display: none; }
}