/* ============================================================
   MENÚ ÚNICO — mantrapadel.com
   12/sep/2026

   ANTES: cada página llevaba DOS menús escritos a mano (uno de escritorio y
   otro de móvil) × 18 páginas = 36 sitios que tocar para cambiar un enlace.
   Y encima NO coincidían entre sí: index tenía 6 apartados, instalaciones 4
   y el resto 5, así que desde Padel Camps no se podía llegar a Equipos.

   AHORA: una sola lista de enlaces por página, que el CSS presenta de dos
   maneras — en línea en el escritorio y a pantalla completa en el móvil.

   Las clases llevan prefijo `mpn-` a propósito: el CSS viejo del menú sigue
   embebido en las 18 páginas y, con nombres nuevos, sus reglas no encuentran
   nada y no pueden pelearse con estas. Se limpiará cuando toque, sin prisa y
   sin riesgo.
   ============================================================ */

.mpn-nav{
  display:flex; align-items:center; gap:16px;
  width:100%;
}
.mpn-nav .mpn-logo{ display:block; line-height:0; flex:none; }
/* El logo de MANTRA, con presencia. Pequeño se lee como marca de agua. */
.mpn-nav .mpn-logo img{ height:72px; width:auto; }
.mpn-nav .mpn-hueco{ flex:1; }

/* ── Botón hamburguesa (solo móvil) ───────────────────────────────────── */
.mpn-burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer;
  /* 44×44 de área táctil: es la medida mínima para acertar con el pulgar. */
  width:44px; height:44px; align-items:center; justify-content:center;
  padding:0; z-index:101; flex:none;
}
.mpn-burger span{
  width:25px; height:2px; background:var(--light,#F5F5F5);
  transition:transform .3s ease, opacity .3s ease;
}
.mpn-burger[aria-expanded="true"] span:nth-child(1){ transform:rotate(45deg) translate(5px,5px) }
.mpn-burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.mpn-burger[aria-expanded="true"] span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px) }

/* ── El menú, en escritorio ───────────────────────────────────────────── */
.mpn-menu{ display:flex; align-items:center; gap:36px; }
.mpn-menu ul{ display:flex; gap:36px; list-style:none; margin:0; padding:0; }
.mpn-menu a{
  color:var(--light,#F5F5F5); text-decoration:none;
  font-size:.8rem; font-weight:500; letter-spacing:2px; text-transform:uppercase;
  position:relative; padding:5px 0; transition:color .3s ease;
}
.mpn-menu a::after{
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
  background:var(--neon,#E5FF00); transition:width .4s cubic-bezier(.25,.46,.45,.94);
}
.mpn-menu a:hover{ color:var(--neon,#E5FF00) }
.mpn-menu a:hover::after{ width:100% }
/* La página en la que estás, marcada. Antes no se sabía dónde estabas. */
.mpn-menu a[aria-current="page"]{ color:var(--neon,#E5FF00) }
.mpn-menu a[aria-current="page"]::after{ width:100% }

/* «Inicio» solo hace falta en el móvil: en escritorio el logo ya lleva ahí. */
.mpn-solo-movil{ display:none }

/* ── Idiomas ──────────────────────────────────────────────────────────── */
.mpn-lang{ display:flex; align-items:center; gap:4px }
.mpn-lang a{
  color:var(--gray,rgba(245,245,245,.6)); text-decoration:none;
  font-size:.72rem; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  padding:3px 7px; border-radius:3px; transition:color .3s, background .3s;
}
.mpn-lang a::after{ display:none }
.mpn-lang a:hover{ color:var(--neon,#E5FF00) }
.mpn-lang a.is-on{ color:var(--dark,#0A0A0A); background:var(--neon,#E5FF00) }
.mpn-lang .sep{ color:rgba(245,245,245,.25); font-size:.7rem }

/* ── Móvil: la MISMA lista, a pantalla completa ───────────────────────── */
@media (max-width:900px){
  .mpn-nav .mpn-logo img{ height:58px }
  .mpn-burger{ display:flex }
  .mpn-solo-movil{ display:block }

  .mpn-menu{
    position:fixed; inset:0; z-index:99;
    flex-direction:column; justify-content:center; align-items:center; gap:26px;
    background:rgba(10,10,10,.98);
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
    /* Si el menú es más alto que la pantalla (móvil pequeño en horizontal),
       que se pueda desplazar en vez de quedar cortado. */
    overflow-y:auto; padding:80px 24px 40px;
  }
  .mpn-menu.is-open{ opacity:1; visibility:visible }
  .mpn-menu ul{ flex-direction:column; align-items:center; gap:26px }
  .mpn-menu a{
    font-family:'Barlow Semi Condensed',sans-serif;
    font-size:1.5rem; font-weight:600; letter-spacing:3px;
  }
  .mpn-menu a::after{ display:none }
  .mpn-lang{ margin-top:14px; gap:8px }
  .mpn-lang a{ font-size:1rem; padding:6px 14px }
}