/* LDP — Mobile menu. Simple and reliable. */

@media (max-width:980px){

  /* Menú: siempre flex pero oculto via opacity/visibility para poder animar */
  nav.top .menu{
    display:flex !important;
    position:fixed !important;
    top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;
    width:100vw !important;height:100vh !important;height:100dvh !important;
    background:#0C1016 !important;
    z-index:999 !important;
    overflow-y:auto !important;
    padding:80px 32px 40px !important;
    flex-direction:column !important;
    gap:0 !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    border:none !important;
    box-shadow:none !important;
    margin:0 !important;
    /* Estado cerrado */
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-12px) !important;
    transition:
      opacity .35s cubic-bezier(.4,0,.2,1),
      transform .35s cubic-bezier(.4,0,.2,1),
      visibility 0s linear .35s !important;
  }

  /* Mostrar cuando body tiene clase menu-open */
  body.menu-open nav.top .menu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
    transition:
      opacity .35s cubic-bezier(.4,0,.2,1),
      transform .35s cubic-bezier(.4,0,.2,1),
      visibility 0s linear 0s !important;
  }

  /* Links grandes y legibles */
  nav.top .menu > a{
    display:block !important;
    padding:16px 0 !important;
    font-family:'Cormorant Garamond', serif !important;
    font-size:40px !important;
    font-weight:300 !important;
    color:#EDE6D6 !important;
    text-decoration:none !important;
    border-bottom:1px solid rgba(237,230,214,.12) !important;
    width:100% !important;
    letter-spacing:-0.01em !important;
    cursor:pointer !important;
    /* Animación de entrada escalonada */
    opacity:0 !important;
    transform:translateY(10px) !important;
    transition:opacity .3s ease, transform .3s ease !important;
  }
  nav.top .menu > a:first-child{border-top:1px solid rgba(237,230,214,.12)}

  /* Cuando el menú está abierto: animar cada link con delay incremental */
  body.menu-open nav.top .menu > a{
    opacity:1 !important;
    transform:translateY(0) !important;
  }
  body.menu-open nav.top .menu > a:nth-child(1){transition-delay:.10s !important}
  body.menu-open nav.top .menu > a:nth-child(2){transition-delay:.16s !important}
  body.menu-open nav.top .menu > a:nth-child(3){transition-delay:.22s !important}
  body.menu-open nav.top .menu > a:nth-child(4){transition-delay:.28s !important}
  body.menu-open nav.top .menu > a:nth-child(5){transition-delay:.34s !important}
  body.menu-open nav.top .menu > a:nth-child(6){transition-delay:.40s !important}
  nav.top .menu > a.active{color:#A6BFCE !important;font-style:italic !important}
  nav.top .menu > a:active{color:#A6BFCE !important}

  /* Botón hamburger */
  nav.top .menu-toggle{
    display:flex !important;
    width:40px !important;height:40px !important;
    background:transparent !important;
    border:1px solid rgba(237,230,214,.25) !important;
    color:#EDE6D6 !important;
    cursor:pointer !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:1000 !important;
    position:relative !important;
    padding:0 !important;
  }

  /* Botón cerrar cuando está abierto — mostrar X */
  body.menu-open nav.top .menu-toggle svg{display:none}
  body.menu-open nav.top .menu-toggle::after{
    content:"✕";
    font-size:16px;
    color:#EDE6D6;
    line-height:1;
  }

  /* Cuando el menú está abierto: eliminar mask y backdrop-filter del nav
     para que el overlay full-screen no quede recortado/desvanecido */
  body.menu-open nav.top{
    mask-image:none !important;
    -webkit-mask-image:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:transparent !important;
    padding-bottom:0 !important;
  }

  /* Bloquear scroll */
  body.menu-open{overflow:hidden !important}

  /* Cerrar cuando se clickea fuera */
  nav.top .menu .lang-toggle{
    margin-top:32px;
    display:flex !important;
    gap:12px;
    font-family:'Inter',sans-serif;
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:rgba(237,230,214,.6);
  }

  /* Footer meta dentro del menú */
  nav.top .menu .menu-foot{
    margin-top:auto;
    padding-top:32px;
    font-family:'Inter',sans-serif;
    font-size:9px;letter-spacing:.32em;
    text-transform:uppercase;
    color:rgba(237,230,214,.36);
    display:flex;flex-direction:column;gap:12px;
  }
  nav.top .menu .menu-foot .lang{
    display:flex;gap:12px;align-items:center;
    font-size:11px;letter-spacing:.28em;
    color:rgba(237,230,214,.6);
  }
  nav.top .menu .menu-foot .lang button{
    background:transparent;border:none;cursor:pointer;
    color:rgba(237,230,214,.6);font:inherit;letter-spacing:inherit;
    padding:4px 0;min-height:32px;
  }
  nav.top .menu .menu-foot .lang button.on{color:#EDE6D6}
  nav.top .menu .menu-foot .lang .sep{opacity:.3}
}

/* Desktop — ocultar chrome del overlay */
@media (min-width:981px){
  nav.top .menu .menu-decor,
  nav.top .menu .menu-foot{display:none !important}
}