/* =========================
   FIX: LATERAL 100% PANTALLA EN MÓVIL
   ========================= */
@media (max-width: 920px){

  /* La capa del menú ocupa TODA la pantalla (backdrop) */
  .site-nav{
    position: fixed !important;
    inset: 0 !important;              /* top/right/bottom/left: 0 */
    z-index: 100 !important;
    display: none;                    /* oculta por defecto */
    background: rgba(0,0,0,.45);
  }
  /* Mostrar cuando el header tenga .nav-open (tu JS lo pone) */
  .site-header.nav-open .site-nav{ display:block !important; }

  /* ⛳️ AQUÍ ESTABA EL PROBLEMA:
     Tu .container global limita el ancho. Lo anulamos SOLO dentro del nav. */
  .site-nav > .container{
    position: absolute !important;
    inset: 0 !important;              /* ocupa 100% alto y ancho */
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;       /* ← anula el límite global */
    margin: 0 !important;             /* ← anula margin auto centrado */
    border-radius: 0 !important;
    background: #fff !important;      /* panel blanco completo */
    transform: translateX(100%);      /* entra desde la derecha */
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .site-header.nav-open .site-nav > .container{
    transform: translateX(0);
  }

  /* La lista en COLUMNA y ancho completo */
  .site-nav .nav-list{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .4rem !important;
    list-style: none;
    margin: 0;
    padding: 8px 0 24px;
    min-height: auto;
  }
  .site-nav .nav-list > li{ width: 100% !important; }

  .site-nav .nav-list > li > a,
  .site-nav .nav-list > li > button.mega-toggle{
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    text-align: left;
    padding: 14px 12px;
    border-radius: 12px;
    background: transparent;
  }

  /* Submenús/mega como acordeón dentro del flujo */
  .site-nav .has-mega .mega{
    position: static !important;
    display: none;
    margin: 6px 0 0;
    padding: 8px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 10px;
    background: #fff;
  }
  .site-nav .has-mega.open .mega,
  .site-nav .has-mega .mega-toggle[aria-expanded="true"] + .mega{
    display: block;
  }
  .site-nav .mega .mega-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Botón ☰ visible y atajos ocultos en móvil */
  .nav-toggle{
    display: inline-flex !important;
    align-items: center; justify-content: center;
    padding: .6rem .7rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    font-size: 1.4rem;
    z-index: 110; /* por encima del backdrop */
  }
  .h-quick{ display: none !important; }

  /* Asegura jerarquía por encima del contenido */
  .site-header{ z-index: 120 !important; }
}

/* ===== Submenús en móvil: acordeón ===== */
@media (max-width: 920px){
  /* El mega deja de ser flotante y se integra en el flujo */
  .site-nav .has-mega .mega{
    position: static !important;
    display: none;
    margin: 6px 0 0;
    padding: 8px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 10px;
    background: #fff;
  }
  /* Abierto cuando el botón tiene aria-expanded="true" o el <li> tiene .open */
  .site-nav .has-mega .mega-toggle[aria-expanded="true"] + .mega,
  .site-nav .has-mega.open .mega{
    display: block;
  }

  /* Chevron gira al abrir (por si usas un SVG en el botón) */
  .site-nav .has-mega .mega-toggle svg{
    transition: transform .2s ease;
  }
  .site-nav .has-mega .mega-toggle[aria-expanded="true"] svg{
    transform: rotate(180deg);
  }
}

/* (Opcional) En escritorio, también mostrar por hover */
@media (min-width: 921px) and (hover:hover){
  .has-mega:hover .mega{ display:block; }
}


/* ===== SUBMENÚS EN MÓVIL: FORZAR ACORDEÓN ===== */
@media (max-width: 920px){
  /* El mega no flota en móvil y empieza oculto */
  .site-nav .has-mega > .mega{
    position: static !important;
    display: none !important;
    margin: 6px 200px 0;
    padding: 8px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 10px;
    background: #fff;
  }

  /* ✅ Mostrar cuando el botón está expandido o el <li> tiene .open */
  .site-nav .has-mega > .mega-toggle[aria-expanded="true"] + .mega,
  .site-nav .has-mega.open > .mega{
    display: block !important;
  }

  /* Asegura layout del botón (tap area completo) */
  .site-nav .has-mega > .mega-toggle{
    display:flex !important; align-items:center; justify-content:space-between;
    width:100% !important; text-align:left; padding:14px 12px; border-radius:12px;
  }

  /* Chevron (si llevas SVG) gira al abrir */
  .site-nav .has-mega > .mega-toggle svg{ transition: transform .2s ease; }
  .site-nav .has-mega > .mega-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }

  /* Grid interno del mega a una columna */
  .site-nav .mega .mega-grid{
    display:grid !important; grid-template-columns: 1fr !important; gap: 8px !important;
  }
}