/* =====================================================================
   Centro Educativo Marie Curie — Menú móvil (drawer) + botón hamburguesa
   Se añade a la maqueta original sin alterar el diseño de escritorio.
   ===================================================================== */

/* Botón hamburguesa: oculto en escritorio, visible en móvil */
.nav-toggle{
  display:none;
  width:44px; height:44px; flex-shrink:0;
  align-items:center; justify-content:center;
  border-radius:var(--r-pill);
  color:var(--navy);
  transition:background .18s ease;
}
.nav-toggle:hover{ background:rgba(15,42,77,.06); }
.nav-toggle svg{ width:24px; height:24px; }
.nav-toggle .ico-close{ display:none; }

/* Drawer móvil */
.mobile-menu{
  position:fixed; inset:0; z-index:60;
  visibility:hidden; pointer-events:none;
}
.mobile-menu__overlay{
  position:absolute; inset:0;
  background:rgba(8,26,51,.5);
  opacity:0; transition:opacity .28s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.mobile-menu__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(86vw, 360px);
  background:var(--navy-deep); color:var(--cream);
  padding:24px 24px 32px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.mobile-menu.is-open{ visibility:visible; pointer-events:auto; }
.mobile-menu.is-open .mobile-menu__overlay{ opacity:1; }
.mobile-menu.is-open .mobile-menu__panel{ transform:translateX(0); }

.mobile-menu__head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:18px; margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.mobile-menu__head .brand-text .top{ color:var(--cream-2); }
.mobile-menu__head .brand-text .bot{ color:rgba(244,239,227,.5); }
.mobile-menu__close{
  width:40px; height:40px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--cream); background:rgba(255,255,255,.06);
}
.mobile-menu__close:hover{ background:rgba(255,255,255,.12); }
.mobile-menu__close svg{ width:20px; height:20px; }

.mobile-menu__nav{ display:flex; flex-direction:column; }
.mobile-menu__nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 4px; font-family:var(--f-display);
  font-size:22px; font-weight:600; letter-spacing:-.01em;
  color:var(--cream-2);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:color .15s ease, padding .2s ease;
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus{ color:var(--lime-2); padding-left:10px; }
.mobile-menu__nav a::after{
  content:""; width:8px; height:8px; flex-shrink:0;
  border-right:1.5px solid currentColor; border-top:1.5px solid currentColor;
  transform:rotate(45deg); opacity:.5;
}
.mobile-menu__nav .current-menu-item > a{ color:var(--lime-2); }

.mobile-menu__cta{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.mobile-menu__cta .btn{ justify-content:center; padding:14px 18px; font-size:15px; }

/* Bloquea scroll del body cuando el drawer está abierto */
body.menu-open{ overflow:hidden; }

@media (max-width: 880px){
  .nav-toggle{ display:flex; }
  /* El CTA "Inscríbete" del header se oculta en móvil; vive dentro del drawer */
  .nav-cta .btn-inscribe-desktop{ display:none; }
}