/* MENU MOVIL — panel negro con acentos dorados (legible sobre la variante clara del sitio)
   Se carga DESPUES de main.css y variant.css, por eso usa !important. */
@media (max-width: 960px) {
  .site-header .nav-menu {
    top: 84px !important;
    height: calc(100vh - 84px) !important;
    height: calc(100dvh - 84px) !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 1.25rem 1.75rem 2rem !important;
    background: linear-gradient(180deg, #0b0809 0%, #130d10 100%) !important;
    border-top: 1px solid #c8a45c !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    overflow-y: auto;
  }
  .site-header .nav-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(200, 164, 92, 0.28);
  }
  .site-header .nav-menu li:last-child { border-bottom: 0; }
  .site-header .nav-menu .nav-link {
    display: block;
    width: 100%;
    padding: 1.15rem 0.25rem !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.16em !important;
    color: #f4ecda !important;
    -webkit-text-fill-color: #f4ecda;
    opacity: 1 !important;
    text-shadow: none;
  }
  .site-header .nav-menu .nav-link:hover,
  .site-header .nav-menu .nav-link:focus-visible,
  .site-header .nav-menu .nav-link.active {
    color: #e3c47e !important;
    -webkit-text-fill-color: #e3c47e;
    text-shadow: 0 0 14px rgba(227, 196, 126, 0.35);
  }
  .site-header .nav-menu .nav-link.active { font-weight: 700 !important; }
  .site-header .nav-menu .nav-link.active::after {
    left: 0.25rem; transform: none;
    bottom: 0.55rem; width: 28px; height: 2px;
    background: linear-gradient(90deg, #e3c47e, #a67c2e) !important;
  }
}
@media (max-width: 700px) {
  .site-header .nav-menu {
    top: 76px !important;
    height: calc(100vh - 76px) !important;
    height: calc(100dvh - 76px) !important;
  }
}