/* ═══ Nav Wipe — Diagonal slide-in overlay para el menú móvil ═══════════
   Un panel oscuro entra desde la derecha con el borde izquierdo diagonal.
   Los links aparecen con stagger fadeUp DESPUÉS de que el panel cubre.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Contenedor: z-index por encima del nav (1000) para cubrir el logo ── */
.nav__mobile {
  background:              transparent !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
  /* Desactiva el transform del container — el wipe maneja todo el movimiento */
  transform:               none !important;
  /* CRÍTICO: sin esto el overlay transparente (position:fixed; inset:0) bloquea
     TODOS los eventos táctiles en móvil aunque sea invisible.
     Se activa SOLO mientras el nav está abierto (.open lo sobreescribe abajo). */
  pointer-events:          none !important;
  transition:              opacity 0.01s linear 0.68s !important;
  z-index:                 1001 !important;   /* nav = 1000, wipe lo cubre */
}

/* APERTURA: pointer-events activos al instante, sin ninguna transición que lo retrase */
.nav__mobile.open {
  pointer-events:          all !important;
  transition:              opacity 0.01s linear 0s !important;
}

/* ── Panel de wipe ────────────────────────────────────────────────────── */
.nav-wipe {
  position: absolute !important;
  inset:    0 !important;
  z-index:  0 !important;

  /* Borde diagonal izquierdo: top=10%, bottom=0% — el "orgánico" */
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);

  /* Fondo: sutil teal en el borde de entrada, oscuro el resto */
  background: linear-gradient(
    to right,
    rgba(17, 171, 161, 0.25)  0%,
    rgba(17, 171, 161, 0.06)  3%,
    rgba(8,  12,  11,  0.97)  10%,
    rgba(8,  12,  11,  0.97)  100%
  );
  backdrop-filter:         blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* Empieza fuera de pantalla a la derecha */
  transform: translateX(103%);

  /* Entrada: rápida y con inercia */
  transition: transform 0.68s cubic-bezier(0.76, 0, 0.24, 1) !important;

  /* Anula cualquier stagger del inline style */
  opacity:    1 !important;
  transform-origin: right center;
}

/* Línea de acento teal sobre el borde diagonal superior */
.nav-wipe::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(17, 171, 161, 0.35) 0%,
    transparent 18%
  );
  pointer-events: none;
}

/* ── Abierto: wipe cubre pantalla ────────────────────────────────────── */
.nav__mobile.open .nav-wipe {
  transform: translateX(0%) !important;
}

/* ── Links encima del wipe ───────────────────────────────────────────── */
.nav__mobile .nav__link,
.nav__mobile .nav__cta,
.nav__mobile .nav__mobile-controls {
  position: relative;
  z-index: 1;
}

/* ── Items: default invisible, sin transición (reset instantáneo al cerrar) */
.nav__mobile > *:not(.nav-wipe) {
  opacity: 0;
  transform: translateY(22px);
}

/* ── Abierto: añadir transición + mover a posición final con stagger ── */
/* (la transición se agrega solo en estado open → al cerrar se quita
    y el reset es instantáneo, cubierto por el wipe que sale) */
.nav__mobile.open > *:not(.nav-wipe) {
  opacity: 1;
  transform: translateY(0);
  transition: opacity  0.32s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Delays escalonados — empiezan mientras el wipe todavía entra (0.40s)
   para que las letras aparezcan casi al mismo tiempo que la cortina.   */
.nav__mobile.open > *:not(.nav-wipe):nth-child(2) { transition-delay: 0.40s; } /* X */
.nav__mobile.open > *:not(.nav-wipe):nth-child(3) { transition-delay: 0.40s; } /* link 1 */
.nav__mobile.open > *:not(.nav-wipe):nth-child(4) { transition-delay: 0.46s; }
.nav__mobile.open > *:not(.nav-wipe):nth-child(5) { transition-delay: 0.52s; }
.nav__mobile.open > *:not(.nav-wipe):nth-child(6) { transition-delay: 0.58s; }
.nav__mobile.open > *:not(.nav-wipe):nth-child(7) { transition-delay: 0.64s; }
.nav__mobile.open > *:not(.nav-wipe):nth-child(8) { transition-delay: 0.70s; }
.nav__mobile.open > *:not(.nav-wipe):nth-child(9) { transition-delay: 0.76s; } /* nav__mobile-controls */