/* Nav fija arriba como en ClearPath: sticky de alto 0 para no empujar el hero y quedar bajo la franja al inicio.
   data-on lo pone scripts/nav.js con el data-nav de la sección que pasa por debajo: dark = texto blanco. */
.s-nav { position: sticky; top: 0; z-index: 10; height: 0; color: var(--ink-on-dark); transition: color .6s var(--ease); }
.s-nav[data-on="light"] { color: var(--ink); }
.s-nav[data-on="dark"] :focus-visible { outline-color: var(--ink-on-dark); }

/* DS: alto 44, offset superior 32, padding lateral 64; links centrados y acciones a la derecha. */
.s-nav__bar { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--s24); padding: var(--s32) var(--page-pad) 0; }

/* Logo solo RBLN, sin descriptor (Juanma 20/10): TRAINING es la página en la que estamos y se marca en el menú.
   Lockup copiado de rbln-fuel (mismos vectores y proporciones en em del header de Fuel). */
.s-nav__logo { display: inline-flex; align-items: flex-start; gap: .294em; justify-self: start; font-size: 28.8px; color: inherit; text-decoration: none; }
.s-nav__iso { position: relative; flex: none; width: 1.1714em; height: 1em; margin-right: .147em; }
.s-nav__iso svg { position: absolute; height: .5em; }
.s-nav__iso-top { left: 0; top: 0; width: .7955em; }
.s-nav__iso-bottom { left: .4294em; top: .5em; width: .742em; }
.s-nav__word { flex: none; width: 2.5427em; height: .6667em; margin-top: .1667em; }

.s-nav__links ul { display: flex; gap: var(--s32); margin: 0; padding: 0; list-style: none; }
/* Menú en Data (Geist Mono Light 300 / 14). Todos los links en color pleno: en apoyo no se leían sobre la foto del hero.
   Página actual: en desktop Geist Mono Bold (Juanma 20/10, no le gustó el punto); tablet y móvil siguen con el punto rosa hasta cerrar desktop. */
.s-nav__links a { position: relative; font: 300 var(--data)/1 var(--font-mono); text-decoration: none; text-underline-offset: 4px; }
.s-nav__links a:not([aria-current]):hover { text-decoration: underline; }
.s-nav__links a[aria-current]::before { content: ""; position: absolute; top: 50%; left: -14px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--rose); }
.s-nav__actions { display: flex; gap: var(--s8); justify-self: end; }
@media (min-width: 1200px) {
  .s-nav__links a[aria-current] { font-weight: 700; }
  .s-nav__links a[aria-current]::before { content: none; }
}

/* Entrada de ClearPath: cada pieza sube 20 px y aparece, escalonada de .2 s (logo) a .9 s (botón). */
@keyframes s-nav-in { from { opacity: 0; transform: translateY(20px); } }
.s-nav__logo, .s-nav__links li, .s-nav__actions .btn { animation: s-nav-in 1s cubic-bezier(.2, 0, .2, 1) .2s both; }
.s-nav__links li:nth-child(1) { animation-delay: .4s; }
.s-nav__links li:nth-child(2) { animation-delay: .5s; }
.s-nav__links li:nth-child(3) { animation-delay: .6s; }
.s-nav__links li:nth-child(4) { animation-delay: .7s; }
.s-nav__actions .btn { animation-delay: .8s; }
@media (prefers-reduced-motion: reduce) { .s-nav * { animation: none; } }

@media (max-width: 1199px) {
  .s-nav__bar { column-gap: var(--s16); }
  .s-nav__logo { min-height: 44px; align-items: center; }
  .s-nav__links a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  .s-nav__links ul { gap: var(--s24); }
}

@media (max-width: 809px) {
  .s-nav__bar { grid-template-columns: 1fr auto 44px; gap: var(--s12); padding-top: var(--s16); }
  .s-nav__logo { grid-column: 1; grid-row: 1; }
  .s-nav__actions { grid-column: 2; grid-row: 1; }
  .s-nav__menu { grid-column: 3; grid-row: 1; display: grid; place-content: center; gap: 4px; width: 44px; height: 44px; padding: 12px; border: 1px solid currentColor; border-radius: var(--r-control); background: transparent; color: inherit; cursor: pointer; }
  .s-nav__menu::before, .s-nav__menu::after { content: ""; width: 20px; height: 1px; background: currentColor; }
  .s-nav__menu[aria-expanded="true"]::before { transform: translateY(2.5px) rotate(45deg); }
  .s-nav__menu[aria-expanded="true"]::after { transform: translateY(-2.5px) rotate(-45deg); }
  .s-nav__links { display: none; grid-column: 1 / -1; grid-row: 2; padding: var(--s16) var(--s24); border-radius: var(--r-panel); background: var(--bg-dark); color: var(--ink-on-dark); }
  .s-nav[data-on="light"] .s-nav__links { background: var(--bg); color: var(--ink); }
  .s-nav[data-menu-open] .s-nav__links { display: block; }
  .s-nav__links ul { flex-direction: column; gap: var(--s8); }
  .s-nav__links a { width: 100%; font: 300 14px/1.4 var(--font-mono); text-transform: uppercase; }
  .s-nav__links li { animation: none; }
}

@media (max-width: 1199px) {
  /* Fondo del tema: la barra fija no mezcla sus controles con el contenido. */
  .s-nav__bar { padding-bottom: var(--s16); background: var(--bg-dark); }
  .s-nav[data-on="light"] .s-nav__bar { background: var(--bg); }
  .s-nav__links { max-height: calc(100dvh - 92px); overflow-y: auto; }
}
@media (max-width: 809px) {
  /* El CTA más largo de FUEL comparte la misma fila sin comprimir los controles. */
  .s-nav:has([data-decision="fuel-agenda"]) .s-nav__bar { gap: var(--s8); }
  .s-nav:has([data-decision="fuel-agenda"]) .s-nav__logo { font-size: 24px; }
  .s-nav:has([data-decision="fuel-agenda"]) .s-nav__actions .btn { padding-inline: var(--s12); }
}

/* Header que se esconde · 22/10: solo transform; foco y menú siempre visibles, anclas con espacio para la barra. */
.s-nav__bar { transform: translateY(0); transition: transform .2s var(--ease); }
.s-nav[data-scroll-hidden]:not(:focus-within):not([data-menu-open]) .s-nav__bar { transform: translateY(-100%); pointer-events: none; }
.s-nav:focus-within .s-nav__bar { transform: translateY(0); transition: none; }
/* Escritorio: transparente arriba de todo, sobre el video; al bajar toma el fondo del tema, así al reaparecer a mitad de
   página no se encima con el contenido (tablet y móvil ya lo tenían). data-scrolled lo pone scripts/nav.js. */
@media (min-width: 1200px) {
  .s-nav__bar { transition: transform .2s var(--ease), background-color .2s var(--ease); }
  .s-nav[data-scrolled] .s-nav__bar { padding-bottom: var(--s16); background: var(--bg-dark); }
  .s-nav[data-scrolled][data-on="light"] .s-nav__bar { background: var(--bg); }
}
:where([id]) { scroll-margin-top: calc(2 * var(--s64)); }
@media (prefers-reduced-motion: reduce) {
  .s-nav__bar { transition: none !important; }
}
/* Fin del header que se esconde. */