/* ═══════════════════════════════════════════════════════════════
   NAV OPCIÓN A — menú desplegable debajo del nav
   Carga DESPUÉS de nav-wipe.css para sobreescribir el wipe lateral.
   No aplicar en el-metodo.html (mantiene diagonal).
═══════════════════════════════════════════════════════════════ */

/* El panel aparece desde arriba (fade + translateY) */
.nav__mobile {
  top: var(--nav-h) !important;
  height: calc(100dvh - var(--nav-h)) !important;
  transform: translateX(0) translateY(-14px) !important;
  opacity: 0 !important;
  transition: opacity 0.30s ease, transform 0.30s ease !important;
}
.nav__mobile.open {
  transform: translateX(0) translateY(0) !important;
  opacity: 1 !important;
  /* Encima del lightbox (3500) y modal (2000), debajo del nav (5000) */
  z-index: 4000 !important;
}

/* Ocultar EN + dark/light cuando el menú está abierto */
.nav__controls { transition: opacity 0.22s ease; }
.nav.menu-open .nav__controls {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Nav siempre oscura cuando el menú está abierto (sin importar scroll) */
.nav.menu-open {
  background: rgba(8, 12, 11, 0.98) !important;
  backdrop-filter: blur(12px) !important;
}

/* Panel: franja teal sólida, sin diagonal */
.nav-wipe {
  clip-path: none !important;
  background: linear-gradient(
    to right,
    rgb(17, 171, 161)  0px,
    rgb(12, 110, 104)  4px,
    rgb(8,   22,  20)  10px,
    rgb(8,   12,  11)  20px,
    rgb(8,   12,  11)  100%
  ) !important;
}