/* Navbar de la home, con la misma escala y transición que las páginas de cursos. */
body .nav {
  background: transparent !important;
  color: #fff !important;
  border-bottom: 1px solid transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body .nav.is-solid,
body .nav.is-solid.is-dark:not(.menu-open),
body .nav.menu-open {
  background: rgba(255, 255, 255, .94) !important;
  color: var(--black) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
body .nav .logo img { height: 18px; filter: none !important; }
body .nav.is-solid .logo img,
body .nav.menu-open .logo img { filter: invert(1) !important; }
body .nav .nav-inner { min-height: 68px; padding-block: 16px; gap: 24px; }
body .nav .nav-links { gap: clamp(14px, 1.65vw, 26px); }
body .nav .nav-links,
body .nav .nav-cta { font-size: clamp(12px, .95vw, 15px); }
body .nav .nav-cta { margin-left: 4px; }

@media (max-width: 767px) {
  body .nav .logo img { height: 16px; }
  body .nav .nav-inner { min-height: 60px; }
}

@media (max-width: 1100px) {
  .nav .nav-links, .nav .nav-cta { display: none; }
  .nav .burger { display: flex; }
  .menu {
    display: flex;
    justify-content: flex-start;
    gap: clamp(14px, 2.5vh, 26px);
    padding-block: max(82px, env(safe-area-inset-top)) 32px;
    overflow-y: auto;
  }
  .menu a { font-size: clamp(25px, 3.5vw, 32px); }
}
@media (min-width: 1101px) {
  .nav .nav-links { display: flex; }
  .nav .nav-cta { display: block; }
  .nav .burger, .menu { display: none; }
}

/* El Lab tiene fondo claro desde el inicio: conserva contraste con texto oscuro. */
body.lab-page .nav,
body.lab-page .nav.is-solid,
body.lab-page .nav.menu-open {
  background: rgb(245 245 242 / 94%) !important;
  color: var(--black) !important;
  border-bottom: 1px solid rgb(0 0 0 / 8%) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
body.lab-page .nav .logo img { filter: invert(1) !important; }