/* =========================================================================
   MENÚ MÓVIL — panel lateral
   =========================================================================
   NO existe en el prototipo aprobado: ahí el menú es una tira horizontal con
   scroll que a 375px se corta a media palabra ("LÍNEA ARQ…") y no avisa que hay
   más. Esto es añadido, por eso vive en su propio archivo y css/style.css sigue
   sin tocarse: así el diff de píxeles contra el prototipo sigue sirviendo de red.

   Medidas: nada tocable por debajo de 44px, y el corte va por PUNTERO además de
   por ancho — un iPad mide 810px y se toca con el dedo. (Lección de Dielec.)
   ====================================================================== */

.mnv__btn{display:none}

@media (max-width:980px){

  /* El menú de escritorio y el botón de contacto se van: viven en el panel. */
  .header__inner .nav,
  .header__inner > .btn{display:none}

  .header__inner{height:92px; padding:0 22px; flex-wrap:nowrap; gap:14px;
    justify-content:space-between; align-items:center}

  /* --- Hamburguesa --- */
  .mnv__btn{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:46px; height:46px; padding:0 10px; margin-right:-8px;
    background:none; border:0; cursor:pointer; flex:0 0 auto;
  }
  .mnv__btn span{
    display:block; height:2.5px; border-radius:2px; background:var(--azul);
    transition:transform .22s ease, opacity .16s ease;
  }
  .mnv__btn span:nth-child(1){width:26px}
  .mnv__btn span:nth-child(2){width:20px; margin-left:auto}
  .mnv__btn span:nth-child(3){width:26px}
  .mnv__btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .mnv__btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mnv__btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* --- El panel ---------------------------------------------------------
   Fondo BLANCO (lo pidió Fer el 21-ago). El navy se quedó sólo en el velo, para
   que el panel se despegue del fondo, y en la tipografía. */

.mnv{position:fixed; inset:0; z-index:100; visibility:hidden}
.mnv.is-on{visibility:visible}

/* visibility, no sólo opacity: un panel a opacity:0 SIGUE recibiendo clics y
   foco de teclado. Ya nos pasó en Kevstore con las diapositivas del hero. */
.mnv__velo{
  position:absolute; inset:0; background:rgba(0,16,34,.62);
  opacity:0; transition:opacity .26s ease; backdrop-filter:blur(2px);
}
.mnv.is-on .mnv__velo{opacity:1}

.mnv__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(372px, 88vw);
  background:#fff;
  display:flex; flex-direction:column;
  transform:translateX(102%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  box-shadow:-24px 0 60px rgba(0,16,34,.20);
  overscroll-behavior:contain;
}
.mnv.is-on .mnv__panel{transform:translateX(0)}

@media (prefers-reduced-motion:reduce){
  .mnv__velo,.mnv__panel{transition:none}
}

/* --- Encabezado del panel --- */
.mnv__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 14px; flex:0 0 auto;
  border-bottom:1px solid #E3EDF6;
}
/* El logo del panel es un enlace al inicio: tiene que cumplir los 44px como
   cualquier otro control. Medía 140×40 y el checador lo cazó. */
.mnv__top > a{display:flex; align-items:center; min-height:44px}
.mnv__top img{height:40px; width:auto}
.mnv__x{
  width:44px; height:44px; border:0; border-radius:12px; cursor:pointer;
  background:#F2FAFF; color:var(--azul);
  display:flex; align-items:center; justify-content:center;
}
.mnv__x svg{width:20px; height:20px}

/* --- Cuerpo --- */
.mnv__body{flex:1 1 auto; overflow-y:auto; padding:16px 20px 18px;
  -webkit-overflow-scrolling:touch}

.mnv__g{
  font-family:var(--display); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#8FA3B8;
  margin:18px 0 6px; padding-left:2px;
}
.mnv__g:first-child{margin-top:0}

.mnv__l{
  display:flex; align-items:center; gap:13px;
  min-height:46px; padding:4px 12px 4px 2px; border-radius:12px;
  font-family:var(--display); font-size:19px; line-height:1.2; color:var(--navy);
  text-decoration:none;
}
.mnv__l small{
  display:block; font-family:var(--body); font-size:13px; font-weight:400;
  color:var(--gris); margin-top:3px; letter-spacing:0;
}
.mnv__l .mnv__p{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--c, var(--azul-bright));
}
.mnv__l.is-active{background:#F2FAFF}
.mnv__l.is-active .mnv__p{box-shadow:0 0 0 4px rgba(2,143,225,.14)}

.mnv__l--simple{font-size:17px}
.mnv__l--simple .mnv__p{width:5px; height:5px; background:#C3D4E4}

/* --- Pie del panel --- */
.mnv__pie{
  flex:0 0 auto; padding:14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid #E3EDF6; background:#F7FBFF;
  display:grid; gap:12px;
}
.mnv__pie .btn{width:100%; justify-content:center; min-height:50px}
.mnv__tel{
  display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px; color:var(--navy); font-size:15.5px; text-decoration:none;
}
.mnv__tel svg{width:18px; height:18px; color:#25D366}

/* Con el panel abierto, el fondo no se mueve. */
body.mnv-abierto{overflow:hidden}