/* ============================================================================
   nav-movil.css — menú lateral (off-canvas) para las barras públicas.
   Sirve a las dos: .ld-nav (landing) y .sc-nav (producto, agencias, legales).

   Antes, en 360 px la barra medía 548: la página entera se desplazaba en
   horizontal y los enlaces se ocultaban sin sustituto. Ahora en móvil sólo
   quedan el logo y el botón; TODO lo demás —enlaces, idiomas, tema, entrar y
   la llamada a la acción— se va al panel lateral.

   En escritorio el panel es `display: contents`, así que desaparece del layout
   y sus hijos se colocan como si siguieran colgando del nav. Cero cambios
   visuales por encima del punto de ruptura.
   ========================================================================== */

.mnav-burger { display: none; }
.mnav-fondo { display: none; }
.mnav-panel { display: contents; }

@media (max-width: 860px) {
  /* --- barra: sólo logo + botón --- */
  .ld-nav, .sc-nav { gap: 12px; justify-content: space-between; flex-wrap: nowrap; }

  .mnav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; flex: none;
    /* Por encima del panel (z-index 91): si el botón queda debajo, el usuario
       ve el menú abierto y ninguna forma visible de cerrarlo — en un móvil no
       hay tecla Escape. Aquí es donde se convierte en la X. */
    position: relative; z-index: 92;
    width: 40px; height: 40px; padding: 0;
    /* Fondo sólido: cuando el panel está abierto, el botón se dibuja ENCIMA y
       necesita tapar lo que hay debajo para leerse. */
    background: var(--mr-sf); border: 1px solid var(--mr-bd); border-radius: 10px;
    color: var(--mr-ink); cursor: pointer;
  }
  .mnav-burger:hover { border-color: var(--mr-ink3); }
  .mnav-burger svg { display: block; }
  .mnav-burger .mnav-x { display: none; }
  .mnav-burger[aria-expanded="true"] .mnav-x { display: block; }
  .mnav-burger[aria-expanded="true"] .mnav-lineas { display: none; }

  /* --- fondo oscurecido --- */
  .mnav-fondo {
    display: block; position: fixed; inset: 0; z-index: 90;
    background: rgba(12, 14, 20, .5);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  body.mnav-abierto .mnav-fondo { opacity: 1; pointer-events: auto; }

  /* --- panel lateral --- */
  .mnav-panel {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    position: fixed; z-index: 91; top: 0; right: 0; bottom: 0;
    width: min(310px, 86vw);
    padding: 78px 22px 26px;
    background: var(--mr-sf);
    border-left: 1px solid var(--mr-bd);
    box-shadow: var(--mr-shadow);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  }
  body.mnav-abierto .mnav-panel { transform: translateX(0); }

  /* Los contenedores internos de cada barra se apilan en vertical. */
  .mnav-panel .ld-links,
  .mnav-panel > div {
    display: flex !important; flex-direction: column; align-items: stretch;
    gap: 2px; margin: 0 !important; width: 100%;
  }

  /* Enlaces: área de toque cómoda, no texto de 14 px pegado. */
  .mnav-panel a:not(.ld-btn):not(.sc-btn) {
    display: block; padding: 13px 2px; font-size: 16px; font-weight: 500;
    color: var(--mr-ink); border-bottom: 1px solid var(--mr-bd);
  }
  .mnav-panel a:not(.ld-btn):not(.sc-btn):last-child { border-bottom: none; }

  /* Idiomas y tema: en fila, que son controles, no navegación. */
  .mnav-panel .ld-lang, .mnav-panel .sc-lang {
    flex-direction: row !important; width: auto; align-self: flex-start;
    margin-top: 16px !important;
  }
  .mnav-panel .ld-theme {
    align-self: flex-start; margin-top: 12px !important;
    width: 40px; height: 40px; border: 1px solid var(--mr-bd); border-radius: 10px;
  }

  /* La llamada a la acción, abajo y a lo ancho: es lo que queremos que pulsen. */
  .mnav-panel .ld-btn, .mnav-panel .sc-btn {
    justify-content: center; width: 100%; margin-top: 18px; padding: 14px 18px !important;
    font-size: 15px !important;
  }

  body.mnav-abierto { overflow: hidden; }   /* que no se mueva el fondo al arrastrar */
}

@media (prefers-reduced-motion: reduce) {
  .mnav-panel, .mnav-fondo { transition: none; }
}