/* ============================================================
   CG · navegación liquid glass (pastilla flotante)
   El blur vive en ::before para poder anidar más blurs dentro.
   ============================================================ */

.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 660px;
  border-radius: 12px;
  overflow: hidden;
  z-index: 100;
  background: rgba(20, 20, 20, 0.05);
  border: 1px solid rgba(20, 20, 20, 0.35);
  transition: background 0.3s, border-color 0.3s;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@supports not (backdrop-filter: blur(1px)) {
  .nav { background: rgba(246, 244, 239, 0.94); }
}

/* Sheen líquido: motivos Bauhaus derivando, licuados por un blur anidado.
   Debajo, una aurora fija de color de marca garantiza que el cristal
   permanezca encendido todo el tiempo que el ratón esté encima. */
.nav__sheen {
  position: absolute;
  inset: -40%;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s var(--estado);
  pointer-events: none;
}

/* La aurora deriva y respira: sin este movimiento el cristal solo
   se veía "un poco más oscuro" mientras el ratón estaba encima. */
.nav__sheen::before {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(58% 90% at 18% 30%, rgba(34, 66, 199, 0.55), transparent 72%),
    radial-gradient(48% 80% at 82% 22%, rgba(224, 52, 44, 0.45), transparent 70%),
    radial-gradient(66% 92% at 58% 86%, rgba(242, 178, 0, 0.55), transparent 72%);
  animation: sheen-aurora 13s var(--estado) infinite alternate;
}

/* El viewBox es cuadrado y la pastilla es ~12:1: con el ajuste por
   defecto de SVG los motivos se encogían a 100x100 en el centro y no
   recorrían nada. Cuadrado que CUBRE la banda: al girar, los motivos
   la cruzan de verdad. */
.nav__sheen svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  opacity: 0.5; /* motivos presentes, sin lavar los enlaces */
  /* 36s era una vuelta de 10°/s: el movimiento no se percibía */
  animation: sheen-deriva 15s linear infinite;
}

/* El blur licua los motivos, pero pasado de vueltas los promedia hasta
   dejar un lavado liso: a 40px sobre una pastilla de 56px el sheen se
   veía inmóvil. 16px licua y deja ver la deriva. */
.nav__glaseado {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateZ(0);
}

.nav:hover .nav__sheen { opacity: 1; }

@keyframes sheen-deriva {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes sheen-aurora {
  from { transform: translate3d(-12%, -7%, 0) scale(1.04) rotate(-5deg); }
  to { transform: translate3d(12%, 7%, 0) scale(1.22) rotate(5deg); }
}

/* ---------- Barra ---------- */

.nav__barra {
  position: relative;
  z-index: 1;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 10px 0 8px;
}

.nav__marca {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--tinta);
}

/* Área táctil ≥44px sin crecer visualmente (la marca mide 40px) */
.nav__marca::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.nav__monograma {
  width: 40px;
  height: 40px;
  background: var(--tinta);
  color: var(--papel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 16px;
  transition: background 0.3s, color 0.3s;
}

.nav__nombre {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s var(--suave);
}

/* Marca al hover: nombre y monograma pasan a cobalto a la vez.
   Gana por especificidad al camaleón, así que también aplica sobre
   las secciones oscuras. */
.nav__marca:hover .nav__nombre { color: var(--cobalto); }

.nav__marca:hover .nav__monograma {
  background: var(--cobalto);
  color: var(--papel);
}

.nav__enlaces {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav__enlaces a {
  position: relative;
  font-family: var(--fuente-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

/* El filete azul es para los enlaces de texto. Contacto queda fuera:
   ya se invierte a tinta al hover y no necesita subrayado. */
.nav__enlaces a:not(.nav__contacto)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1.5px;
  background: var(--cobalto);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--suave);
}

.nav__enlaces a:not(.nav__contacto):hover::after,
.nav__enlaces a:not(.nav__contacto)[aria-current]::after { transform: scaleX(1); }

.nav__contacto {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--tinta);
  border-radius: 8px;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  transition: background 0.25s var(--suave), color 0.25s var(--suave);
}

.nav__contacto:hover { background: var(--tinta); color: var(--papel); }

/* ---------- Hamburguesa y panel ---------- */

.nav__hamburguesa {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.nav__hamburguesa span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--tinta);
  transition: transform 0.3s var(--suave), background 0.3s;
}

.nav--abierta .nav__hamburguesa span:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav--abierta .nav__hamburguesa span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

.nav__panel {
  position: relative;
  z-index: 1;
  height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden; /* cerrado: fuera del orden de tabulación */
  transition: height 0.4s var(--estado), opacity 0.3s, visibility 0s 0.4s;
}

.nav--abierta .nav__panel {
  opacity: 1;
  visibility: visible;
  transition: height 0.4s var(--estado), opacity 0.3s, visibility 0s 0s;
}
.nav--abierta .nav__glaseado {
  background: rgba(246, 244, 239, 0.3);
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px);
}
/* Con el panel abierto el sheen acompaña sin saturar: el texto del
   menú se lee sobre papel con un velo de motivos, no sobre un lavado
   lavanda ajeno a la paleta */
.nav--abierta .nav__sheen { opacity: 0.32; }

.nav__panel-interior {
  padding: 8px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav__panel-interior a {
  padding: 8px 0; /* objetivo táctil ≥44px */
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
}

.nav__panel-interior a:hover { color: var(--cobalto); }

/* ---------- Velo de página ---------- */

.velo {
  position: fixed;
  inset: 0;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  /* lo bastante lechoso para que el título cobalto difuminado no
     asome como una mancha azul pegada al borde del panel */
  background: rgba(246, 244, 239, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: opacity 0.3s;
}

.velo--visible { opacity: 1; pointer-events: auto; }

/* ---------- Camaleón sobre secciones oscuras ----------
   .nav--invertida la pone el observer (nav.js, pie oscuro);
   .nav--invertida-telon la pone el telón (home.js) sincronizada
   con el fundido de Trayectoria. Mismo aspecto, dueños distintos. */

.nav--invertida,
.nav--invertida-telon {
  background: rgba(246, 244, 239, 0.06);
  border-color: rgba(246, 244, 239, 0.35);
}

.nav--invertida .nav__marca,
.nav--invertida .nav__enlaces a,
.nav--invertida .nav__panel-interior a,
.nav--invertida-telon .nav__marca,
.nav--invertida-telon .nav__enlaces a,
.nav--invertida-telon .nav__panel-interior a { color: var(--papel); }

.nav--invertida .nav__monograma,
.nav--invertida-telon .nav__monograma { background: var(--papel); color: var(--tinta); }

.nav--invertida .nav__contacto,
.nav--invertida-telon .nav__contacto { border-color: var(--papel); color: var(--papel); }
.nav--invertida .nav__contacto:hover,
.nav--invertida-telon .nav__contacto:hover { background: var(--papel); color: var(--tinta); }

.nav--invertida .nav__hamburguesa span,
.nav--invertida-telon .nav__hamburguesa span { background: var(--papel); }

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
  .nav__enlaces { display: none; }
  .nav__hamburguesa { display: flex; }
  .nav__nombre { display: none; }
}

@media (min-width: 761px) {
  .nav__panel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Las DOS capas del sheen paran: el svg de motivos y la aurora del
     ::before (esta se quedaba viva y era la única animación que seguía
     corriendo en todo el sitio con reduced-motion). */
  .nav__sheen svg,
  .nav__sheen::before { animation: none; }
  .nav__panel { transition: none; }
}