/* =====================================================================
   [C-01] NAVBAR — "Morphing Scroll Navbar" (21st) portado.
   Arriba: transparente y de ancho completo sobre el panel del hero.
   .is-floating (scroll ≥ 8 px): cápsula crema desenfocada alineada al contenedor.
   .is-compact (bajando): se estrecha, los enlaces se pliegan; al subir se restaura.
   Barra de progreso de lectura arriba y subrayado de la sección activa.
   ===================================================================== */
.progress {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--ac-hi), var(--blue-light));
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}
.site-header {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  display: flex; justify-content: center; padding: 0 var(--gutter);
  pointer-events: none;
}
.site-header .nav {
  pointer-events: auto;
  width: 100%; max-width: 2400px; height: 70px; margin-top: var(--gutter);
  padding: 0 43px 0 46px;
  display: flex; align-items: center; position: relative;
  border: 1px solid transparent; border-radius: 20px; background: transparent;
  transition:
    max-width .55s var(--ease-spring), height .38s var(--ease-spring),
    margin-top .38s ease, padding .38s ease,
    background-color .3s ease, border-color .3s ease, box-shadow .4s ease;
}
.site-header.is-floating .nav {
  max-width: var(--container); height: 58px; margin-top: 12px; padding: 0 10px 0 20px;
  border-color: rgba(27, 31, 36, .10);
  background: rgba(246, 248, 250, .78);
  -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .56), 0 14px 40px -20px rgba(27, 31, 36, .45);
}
.site-header.is-compact .nav { max-width: 640px; height: 52px; }

.nav__logo { display: flex; align-items: center; gap: 10px; transition: transform .18s ease; }
.nav__logo:hover { transform: translateY(-1px); }
.nav__logo img { width: 36px; height: 36px; transition: width .38s var(--ease-spring), height .38s var(--ease-spring); }
.wordmark { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); line-height: 1; transition: font-size .38s var(--ease-spring); }
.wordmark b { font-weight: 600; color: #fff; transition: color .3s ease; } /* «Dev» blanco sobre el hero… */
.site-header.is-floating .wordmark b { color: var(--btn); }            /* …y gris (el de los botones) cuando la barra flota */
.site-header.is-compact .nav__logo img { width: 30px; height: 30px; }
.site-header.is-compact .wordmark { font-size: 21px; }

.nav__links {
  position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 50px;
  transition: opacity .28s ease, transform .3s ease, gap .35s ease;
}
.site-header.is-floating .nav__links { gap: 36px; }
.site-header.is-compact .nav__links { opacity: 0; transform: translate(-50%, -8px); pointer-events: none; }
.nav__links a { position: relative; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); line-height: 1; transition: color .15s ease; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px;
  background: var(--ac); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.nav__links a:hover { color: var(--ac-hi); }
.nav__links a:hover::after, .nav__links a[aria-current="location"]::after { transform: scaleX(1); }
.site-header.is-floating .nav__links a { font-size: 16px; }

.site-header .btn--nav { margin-left: auto; transition: height .38s ease, font-size .38s ease, padding .38s ease, background-color .2s ease, transform .18s ease, box-shadow .22s ease; }
.site-header .btn--nav:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(var(--btn-shadow), .6); }
.site-header .btn--nav:active { transform: translateY(0) scale(.97); }
.site-header.is-floating .btn--nav { height: 38px; font-size: 15px; padding: 0 16px; }
.site-header.is-compact .btn--nav { height: 36px; font-size: 14px; padding: 0 14px; }

@media (max-width: 1719px) {
  .site-header.is-floating .nav { max-width: calc(100% - 0px); }
  .site-header.is-compact .nav { max-width: 640px; }
}
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .site-header .nav { padding: 0 16px 0 18px; height: 60px; }
  .site-header.is-floating .nav, .site-header.is-compact .nav { height: 52px; max-width: 100%; padding: 0 8px 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav, .nav__links, .wordmark, .nav__logo img, .site-header .btn--nav, .progress { transition-duration: .01ms; }
}