/* ============================ 01 · HEADER + ACCESOS RÁPIDOS ============================ */
#top.nav-argo{position:fixed;inset:0 0 auto;z-index:var(--z-header);border-bottom:1px solid transparent;
  transition:background-color .6s var(--ease),border-color .6s var(--ease),backdrop-filter .6s var(--ease)}
#top.nav-argo.fijo{background:rgba(4,7,14,.74);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line)}
#top .nav-fila{display:flex;align-items:center;gap:24px;height:78px}

#top .nav-marca{display:flex;align-items:center;gap:12px;margin-right:auto;min-height:44px}
#top .nav-marca .logo-argo{--logo:16px}

#top .nav-menu{display:flex;align-items:center;gap:2px}
#top .nav-menu a:not(.btn){position:relative;padding:10px 14px;font-size:.84rem;color:var(--mist);border-radius:8px;transition:color .4s var(--ease)}
#top .nav-menu a:not(.btn)::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
#top .nav-menu a:not(.btn):hover,#top .nav-menu a.on{color:var(--white)}
#top .nav-menu a.on::after{transform:scaleX(1)}
#top .nav-cta-movil{display:none}

#top .nav-acciones{display:flex;align-items:center;gap:10px}
#top .nav-qr-btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--line-2);color:var(--silver);font-size:.8rem;transition:border-color .5s var(--ease),color .5s var(--ease),background-color .5s var(--ease)}
#top .nav-qr-btn svg{width:17px;height:17px}
#top .nav-qr-btn:hover,#top .nav-qr-btn[aria-expanded="true"]{border-color:rgba(46,123,255,.4);color:var(--white);background:rgba(46,123,255,.08)}

#top .nav-hamb{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);place-items:center}
#top .nav-hamb i{display:block;width:16px;height:1px;background:var(--silver);position:relative;transition:background .4s var(--ease)}
#top .nav-hamb i::before,#top .nav-hamb i::after{content:"";position:absolute;left:0;width:16px;height:1px;background:var(--silver);transition:transform .5s var(--ease),top .5s var(--ease)}
#top .nav-hamb i::before{top:-5px}#top .nav-hamb i::after{top:5px}
#top.menu-abierto .nav-hamb i{background:transparent}
#top.menu-abierto .nav-hamb i::before{top:0;transform:rotate(45deg)}
#top.menu-abierto .nav-hamb i::after{top:0;transform:rotate(-45deg)}

/* panel de accesos rápidos */
#top .nav-qr{position:absolute;top:calc(100% + 10px);right:max(var(--gutter),calc((100vw - var(--maxw))/2));width:360px;padding:20px;border-radius:var(--r-lg);
  background:rgba(12,13,16,.88);box-shadow:0 40px 90px -30px rgba(0,0,0,.95);transform-origin:100% 0;
  opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .2s var(--ease),transform .24s var(--ease)}
#top .nav-qr.abierto{opacity:1;transform:none}
#top .nav-qr-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
#top .nav-qr-cab p{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--white);letter-spacing:-.01em}
#top .nav-qr-x{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--mist-2);transition:color .18s var(--ease),background-color .18s var(--ease)}
#top .nav-qr-x svg{width:16px;height:16px}
@media (hover:hover){ #top .nav-qr-x:hover{color:var(--white);background:rgba(255,255,255,.05)} }
#top .nav-qr-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#top .nav-qr-tarj{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 12px;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.02);transition:border-color .5s var(--ease),transform .5s var(--ease)}
#top .nav-qr-tarj:hover{border-color:var(--line-2);transform:translateY(-3px)}
#top .nav-qr-img{width:100%;max-width:132px;aspect-ratio:1/1;border-radius:12px;background:#02040C;border:1px solid rgba(46,123,255,.35);overflow:hidden;margin-bottom:11px;box-shadow:0 0 22px -8px rgba(46,123,255,.8)}
#top .nav-qr-img img{width:100%;height:100%;object-fit:cover;display:block}
#top .nav-qr-tarj b{font-size:.82rem;font-weight:500;color:var(--white)}
#top .nav-qr-tarj small{font-size:.72rem;color:var(--mist-2);margin-top:2px}
#top .nav-qr-pie{font-size:.72rem;color:var(--mist-2);text-align:center;margin-top:12px}

@media (max-width:1080px){
  #top .nav-qr-txt{display:none}
  #top .nav-qr-btn{padding:0;width:44px;justify-content:center}
}
@media (max-width:1000px){
  #top .nav-cta{display:none}
  #top .nav-hamb{display:grid}
  #top .nav-menu{position:fixed;top:78px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:14px var(--gutter) 28px;
    background:rgba(5,5,6,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:transform .6s var(--ease),opacity .5s var(--ease),visibility 0s linear .6s}
  #top.menu-abierto .nav-menu{transform:none;opacity:1;visibility:visible;transition:transform .6s var(--ease),opacity .5s var(--ease),visibility 0s}
  #top .nav-menu a:not(.btn){padding:16px 4px;border-bottom:1px solid var(--line);font-size:1rem}
  #top .nav-menu a:not(.btn)::after{display:none}
  #top .nav-cta-movil{display:flex;margin-top:22px}
  /* hoja inferior en móvil */
  #top .nav-qr{position:fixed;top:auto;right:0;left:0;bottom:0;width:auto;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:22px var(--gutter) calc(22px + env(safe-area-inset-bottom));
    transform:translateY(24px);transform-origin:50% 100%}
  #top .nav-qr.abierto{transform:none}
}
@media (max-width:380px){ #top .nav-marca .logo-argo{--logo:14px} }

/* ---------- logotipo animado de la esquina ----------
   · el chevron cambia de tono en un ciclo lento (SMIL en el degradado)
   · cada 5 s un barrido de luz recorre todo el logotipo
   · la A late con un resplandor suave
   · al pasar el mouse (o al tocar) R, G y O se vuelven a escribir */
#top .logo-anim{filter:drop-shadow(0 0 12px rgba(46,123,255,.35))}
#top .logo-anim .ln-a{transform-box:fill-box;transform-origin:50% 100%;animation:ln-late 4s ease-in-out infinite}
@keyframes ln-late{0%,100%{filter:drop-shadow(0 0 4px rgba(46,123,255,.5))}50%{filter:drop-shadow(0 0 16px rgba(95,208,255,.95))}}
#top .logo-anim .ln-brillo{transform:translateX(-80px) skewX(-18deg);animation:ln-barre 5s cubic-bezier(.5,0,.3,1) 1.2s infinite}
@keyframes ln-barre{0%{transform:translateX(-80px) skewX(-18deg)}28%,100%{transform:translateX(620px) skewX(-18deg)}}
#top .logo-anim .ln-l{stroke-dasharray:1.02 1;stroke-dashoffset:0}
#top .nav-marca:hover .ln-l,#top .nav-marca:focus-visible .ln-l,#top .nav-marca:active .ln-l{animation:ln-escribe .9s cubic-bezier(.65,0,.35,1) both}
#top .nav-marca:hover .ln-l:nth-child(2){animation-delay:.12s}
#top .nav-marca:hover .ln-l:nth-child(3){animation-delay:.24s}
#top .nav-marca:hover .ln-a{animation:ln-salta .7s var(--ease)}
@keyframes ln-escribe{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}
@keyframes ln-salta{0%{transform:none}40%{transform:translateY(-6px) scaleY(1.04)}100%{transform:none}}
/* al terminar la intro el logotipo del menú se escribe una vez */
#top .logo-anim.escribe .ln-l{animation:ln-escribe 1s cubic-bezier(.65,0,.35,1) both}
#top .logo-anim.escribe .ln-l:nth-child(2){animation-delay:.12s}
#top .logo-anim.escribe .ln-l:nth-child(3){animation-delay:.24s}

@media (min-width:640px){#top .nav-qr-rejilla{grid-template-columns:repeat(3,1fr)}}
@media (max-width:639px){#top .nav-qr-rejilla>.nav-qr-tarj:last-child{grid-column:1/-1;max-width:50%;justify-self:center}}