/* =========================================================
   NAV (Figma 1081:157114)
   Tres cosas en la misma línea: «Valencia» con el sol a la
   izquierda, el menú en píldora en el centro y, a la derecha, el
   currículum y el email como texto. El resaltado blanco del menú
   no es de cada ítem: es una capa única (.pill__hl) que se desliza
   por detrás hasta el ítem apuntado y vuelve al activo al salir; la
   mueve nav.js escribiendo --hl-x y --hl-w. Al apuntar «currículum»
   se subraya; al apuntar el email aparece el icono de copiar y la
   etiqueta del cursor dice «Copiar»; al pulsarlo se copia y la
   etiqueta pasa a «¡Copiado!» en verde un momento.
   Valencia, currículum y email van con la página; sólo el menú
   queda fijo, y se esconde al bajar y vuelve al subir.

   Strokes, medidos del Figma:
     · píldora: 1px blanco al 30 %, por dentro (border + border-box)
     · ítem activo: 1px negro al 5 %, por fuera (box-shadow con
       spread, que no ocupa sitio) + sombra 0 3 14.8 negro al 5 %
   ========================================================= */

:root {
  --nav-bg:      rgba(241, 240, 238, 0.70);   /* #F1F0EE al 70 % */
  --nav-line:    rgba(255, 255, 255, 0.30);
  --nav-fg:      #282724;
  --nav-fg-2:    #6a6a62;
  --nav-hl:      #ffffff;
  --nav-hl-ring: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 14.8px rgba(0, 0, 0, 0.05);
  --nav-blur:    5px;       /* background blur 10 del Figma */
  --nav-top:     25px;
}

/* Valencia, currículum y email son parte de la página: van arriba del
   todo y se van con el scroll. Sólo la píldora del menú queda fija. */
.nav {
  position: absolute;
  top: var(--nav-top);
  left: 0; right: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding-inline: var(--pad);
  pointer-events: none;          /* sólo lo que se ve recibe el ratón */
  font-family: "Aspekta", var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--nav-fg-2);
}
/* La píldora, fija y centrada; se esconde al bajar y vuelve al subir.
   La animación es la del menú de estrellagracia.com (efecto Scroll
   Direction de Framer): sube 150px y se funde, con un muelle de 0,4 s
   y un rebote ligero al volver. */
.pill {
  position: fixed;
  top: var(--nav-top);
  left: 50%;
  translate: -50% 0;
  z-index: 120;
  transition: transform 400ms cubic-bezier(0.22, 1.25, 0.36, 1), opacity 320ms ease-out;
}
.nav.is-hidden .pill {
  transform: translateY(-150px);
  opacity: 0;
  pointer-events: none;
  transition: transform 400ms cubic-bezier(0.55, 0, 0.6, 1), opacity 220ms ease-in;
}

/* ---------- Iconos ----------
   Los que aparecen al apuntar no ocupan sitio en reposo: el ancho
   va de 0 al suyo, y el texto se desplaza con él. */
.nav__ico {
  flex: none;
  display: grid;
  place-items: center;
  height: 27px;
  overflow: hidden;
}
.nav__ico svg { display: block; }
.nav__ico--pop {
  width: 0;
  margin-right: 0;
  opacity: 0;
  transition: width var(--dur-med) var(--ease-out), margin var(--dur-med) var(--ease-out), opacity var(--dur-fast) linear;
}

/* ---------- Izquierda: Valencia ---------- */
.nav__place {
  pointer-events: auto;
  grid-column: 1;
  justify-self: start;
  margin-top: 6px;               /* alinea la x del texto con el borde */
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.nav__place .nav__ico { width: 15px; }

/* ---------- Centro: menú ---------- */
.pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 1000px;
  background: var(--nav-bg);
  border: 1px solid var(--nav-line);
  -webkit-backdrop-filter: blur(var(--nav-blur));
  backdrop-filter: blur(var(--nav-blur));
}

/* La capa blanca que se desplaza */
.pill__hl {
  position: absolute;
  top: 5px;                       /* 6 de padding menos el borde */
  left: var(--hl-x, 5px);
  width: var(--hl-w, 0px);
  height: 40px;
  border-radius: 37px;
  background: var(--nav-hl);
  box-shadow: var(--nav-hl-ring);
  transition: left 260ms var(--ease-out), width 260ms var(--ease-out);
}
/* Hasta que nav.js la coloca, no se ve: evita el salto desde 0 */
.pill:not(.is-ready) .pill__hl { transition: none; opacity: 0; }

.pill__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 6px 15px;
  border-radius: 37px;
  color: var(--nav-fg-2);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
/* El activo y el apuntado van en negro y un punto más gruesos */
.pill__item.is-on,
.pill__item.is-hot { color: var(--nav-fg); font-weight: 450; }
/* Al apuntar otro, el activo vuelve a gris: el resaltado ya no está encima */
.pill:has(.is-hot) .pill__item.is-on:not(.is-hot) { color: var(--nav-fg-2); font-weight: 400; }
.pill__item:focus-visible { outline: 2px solid var(--nav-fg); outline-offset: 2px; }

/* ---------- Derecha: currículum y email ----------
   Alineados a la derecha: cuando sale un icono, el grupo crece
   hacia la izquierda y el borde derecho no se mueve. */
.nav__links {
  grid-column: 3;
  justify-self: end;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 22px;
  white-space: nowrap;
}
.nav__cv, .nav__mail {
  pointer-events: auto;
  display: flex;
  align-items: center;
  color: var(--nav-fg-2);
  cursor: pointer;
}
.nav__cv:focus-visible, .nav__mail:focus-visible { outline: 2px solid var(--nav-fg); outline-offset: 3px; border-radius: 4px; }

/* currículum: subrayado al apuntar */
.nav__cv:hover span, .nav__cv:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }

/* email: icono de copiar (15) al apuntar. La etiqueta del cursor
   (main.js) dice «Copiar» encima y «¡Copiado!» en verde tras copiar. */
.nav__mail:hover .nav__ico--copy,
.nav__mail:focus-visible .nav__ico--copy { width: 15px; margin-right: 4px; opacity: 1; }

@media (max-width: 860px) {
  :root { --nav-top: 20px; }
  .nav { grid-template-columns: 1fr auto 1fr; }
  .nav__place { display: none; }
}
@media (max-width: 720px) {
  .nav__links { display: none; }   /* sin sitio ni hover: el pie sigue teniendo el email */
}
@media (max-width: 560px) {
  :root { --nav-top: 12px; }
  .nav { font-size: 15px; }
  .pill { height: 46px; padding: 5px; }
  .pill__item { height: 36px; padding: 5px 12px; }
  .pill__hl { top: 4px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .pill, .pill__hl, .pill__item, .nav__ico--pop { transition: none; }
}