/* Menú en compu: mono en mayúsculas, separado por comas, con un resaltado que barre
   el link al pasar el mouse. Lo usan la home, Sumate y las dos páginas de servicios. */
:root {
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-nav: cubic-bezier(0.87, 0, 0.13, 1);
}
.nav-links, .nav-clock {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav .nav-links, #main-nav .nav-links { gap: 0.2em; align-items: center; }
.nav-links a[href] {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  padding: 3px 4px;
  line-height: 1.05;
  font-size: inherit;
  font-weight: inherit;
  color: #f2f2ee;
  transition: none;
}
.nav-links a[href]::before {
  content: '';
  position: absolute;
  inset: 1px 0;
  z-index: 1;
  background: #f2f2ee;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--ease-nav);
}
/* El texto se invierte solo donde pasa el resaltado */
.nav-links a[href] > span { position: relative; z-index: 2; color: #f2f2ee; mix-blend-mode: difference; }
.nav-links a[href]:not(:last-child) > span::after { content: ','; }
.nav-links a[href].active > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nav-links a[href].active > span::after { display: inline-block; }
.nav-links a[href]:focus-visible { outline: none; }
.nav-links a[href]:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }
@media (hover: hover) {
  .nav-links a[href]:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
}

/* Reloj con la hora de Argentina al lado del logo */
.nav-clock { display: inline-flex; align-items: center; gap: 0.7em; color: #a3a3a0; font-variant-numeric: tabular-nums; }
.nav-clock i { width: 5px; height: 5px; background: #8da9f2; }
/* En servicios los links quedan centrados: el reloj va fuera del flujo, al lado del logo */
#main-nav .nav-clock { position: absolute; left: 136px; top: 50%; transform: translateY(-50%); }
@media (max-width: 1180px) { .nav-clock { display: none; } }
@media (max-width: 1320px) { #main-nav .nav-clock { display: none; } }

@media (min-width: 1025px) {
  .nav-cta { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: -0.03em; text-transform: uppercase; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a[href]::before { transition: none; }
}