/* CTRL MEDIA — NAV
   Contrato: navegación global y panel contextual del menú. */

.cm-nav {
  position: fixed;
  top: calc(var(--cm-space-4) + var(--cm-safe-top));
  right: calc(var(--cm-space-4) + var(--cm-safe-right));
  z-index: var(--cm-z-nav);

  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* CRITICAL: body.is-team-open define prioridad de capa del nav sobre el overlay Team. */
body.is-team-open .cm-nav {
  z-index: 10000;
}

/* CRITICAL: body.is-portfolio-open mantiene acceso al control de salida del nav. */
body.is-portfolio-open .cm-nav {
  z-index: 10000;
}

/* Botón principal del nav con material compartido "liquid glass". */
.cm-nav-toggle {
  width: 78px;
  height: 50px;
  border-radius: 999px;

  /* New Liquid Glass: más translúcido + tinte Control Media (indicio) */
  background:
    linear-gradient(180deg, var(--cm-tint-1), var(--cm-tint-2)),
    rgba(18, 22, 28, var(--cm-glass-a-liquid));

  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(var(--cm-blur-liquid));
  -webkit-backdrop-filter: blur(var(--cm-blur-liquid));

  /* Sombras más silenciosas (menos pigmento, más material) */
  box-shadow:
    0 18px 60px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.22);

  display: grid;
  place-items: center;

  transition:
    transform var(--cm-dur-2) var(--cm-ease),
    opacity var(--cm-dur-2) var(--cm-ease);
}

.cm-nav-toggle:hover {
  transform: translateY(-1px);
}

/* Icono de menú con transición entre estado cerrado y cerrado-forzado. */
.cm-nav-icon {
  width: 40px;
  height: 26px;
  position: relative;
  display: block;
}

/* 3 bars: top + mid + bottom */
.cm-nav-icon::before,
.cm-nav-icon::after,
.cm-nav-icon-mid {
  content: "";
  position: absolute;
  left: 0;
  right: 0;

  height: 7px;
  border-radius: 999px;

  /* líneas igual a identidad tipográfica (títulos/subtítulos) */
  background: var(--cm-text);

  box-shadow:
    0 16px 40px rgba(0,0,0,0.32);

  transition:
    transform var(--cm-dur-3) var(--cm-ease),
    top var(--cm-dur-3) var(--cm-ease),
    opacity var(--cm-dur-3) var(--cm-ease);
}

/* posiciones closed */
.cm-nav-icon::before { top: 0; }
.cm-nav-icon-mid      { top: 9.5px; }
.cm-nav-icon::after  { top: 19px; }

/* CRITICAL: body.is-menu-open controla el morph del ícono a "X". */
body.is-menu-open .cm-nav-icon-mid { opacity: 0; }

body.is-menu-open .cm-nav-icon::before {
  top: 9.5px;
  transform: rotate(45deg);
}

body.is-menu-open .cm-nav-icon::after {
  top: 9.5px;
  transform: rotate(-45deg);
}

/* CRITICAL: body.is-team-open reutiliza el mismo morph para cierre de Team. */
body.is-team-open .cm-nav-icon-mid { opacity: 0; }

body.is-team-open .cm-nav-icon::before {
  top: 9.5px;
  transform: rotate(45deg);
}

body.is-team-open .cm-nav-icon::after {
  top: 9.5px;
  transform: rotate(-45deg);
}

/* CRITICAL: body.is-portfolio-open reutiliza el mismo morph para cierre de Portafolio. */
body.is-portfolio-open .cm-nav-icon-mid { opacity: 0; }

body.is-portfolio-open .cm-nav-icon::before {
  top: 9.5px;
  transform: rotate(45deg);
}

body.is-portfolio-open .cm-nav-icon::after {
  top: 9.5px;
  transform: rotate(-45deg);
}

/* Panel desplegable de navegación. */
.cm-nav-panel {
  margin-top: 12px;
  width: 300px;
  border-radius: 22px;

  background:
    linear-gradient(180deg, var(--cm-tint-1), var(--cm-tint-2)),
    rgba(18, 22, 28, var(--cm-glass-a-liquid));

  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(var(--cm-blur-liquid));
  -webkit-backdrop-filter: blur(var(--cm-blur-liquid));

  box-shadow:
    0 24px 92px rgba(0,0,0,0.56),
    inset 0 1px 0 rgba(255,255,255,0.12);

  padding: 10px;
  overflow: hidden;
}

.cm-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* links */
.cm-nav-link {
  width: 100%;
  text-align: left;

  display: flex;
  align-items: center;

  padding: 14px 14px;
  border-radius: 16px;

  font-size: var(--cm-text-sm);
  font-weight: var(--cm-font-weight-medium);

  color: rgba(255,255,255,0.90);

  background: transparent;
  border: 1px solid transparent;

  transition:
    background var(--cm-dur-2) var(--cm-ease),
    transform var(--cm-dur-2) var(--cm-ease),
    border-color var(--cm-dur-2) var(--cm-ease);
}

.cm-nav-link:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.10);
  transform: translateY(-1px);
}

/* separators */
.cm-nav-list li + li {
  position: relative;
}

.cm-nav-list li + li::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: -5px;
  height: 1px;
  background: rgba(255,255,255,0.09);
}