/* Menú móvil con el diseño del sitio actual (iddeasmkt.com): capa negra translúcida a pantalla completa,
   opciones grandes centradas que entran escalonadas y botón de 3 barras que se convierte en X roja.
   Solo aplica en móvil (≤720px, el mismo corte que header.css); en pantallas grandes no cambia nada.
   Se enlaza después de header.css en las páginas que lo usan. */
@media(max-width:720px){
  /* Botón: barras de 35×3 (la del centro de 20), blancas con sombra; abierto → X roja */
  .nav-toggle{position:relative;z-index:100001;padding:8px 0;overflow:hidden}
  .nav-toggle span{width:35px;height:3px;margin:7px auto;background:#fff;box-shadow:0 0 3px 1px rgba(0,0,0,.3);transition:.3s ease-in-out}
  .nav-toggle span:nth-child(2){width:20px}
  .nav-toggle[aria-expanded="true"] span{background:red}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){transform:translateX(50px);opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  /* Capa a pantalla completa */
  .nav{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:170px 0 0;background:rgba(0,0,0,.8);border:0;overflow-y:auto;opacity:0;visibility:hidden;transition:.3s ease-in-out,padding-top .3s ease-in-out;z-index:100000}
  .nav.is-open{display:flex;opacity:1;visibility:visible;padding-top:70px}

  /* Opciones */
  .nav a{display:block;padding:10px 0;font-size:2em;font-weight:700;line-height:1.5;text-align:center;text-transform:uppercase;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5);opacity:0;transform:translateY(50px);transition:.2s ease-in-out}
  .nav a:not(.is-active):hover{color:#e84a5f}
  .nav a.is-active{background:none;border-radius:0;padding:10px 0;color:#e84a5f}
  .nav.is-open a{opacity:1;transform:translateY(0)}
  .nav.is-open a:nth-child(1){transition:.3s cubic-bezier(.6,0,.8,1.5) .1s}
  .nav.is-open a:nth-child(2){transition:.3s cubic-bezier(.6,0,.8,1.5) .2s}
  .nav.is-open a:nth-child(3){transition:.3s cubic-bezier(.6,0,.8,1.5) .3s}
  .nav.is-open a:nth-child(4){transition:.3s cubic-bezier(.6,0,.8,1.5) .4s}
  .nav.is-open a:nth-child(5){transition:.3s cubic-bezier(.6,0,.8,1.5) .5s}
}
@media(max-width:720px) and (prefers-reduced-motion:reduce){
  .nav,.nav a,.nav-toggle span{transition:none!important}
}