/* NoLabel boletera · shell canónico (nav + footer) portado VERBATIM del hub (sitio/public/site.css).
   Misma nav en las 5 superficies de la boletera; idéntica visualmente al hub. No incluye .app-btn/.app-mark
   (Backstage es un link normal aquí). Requiere tokens.css (--text --muted --chip-bg --accent --accent-30
   --ease-out --bg --hairline) y los assets /logo-iso.svg (nav) + /logo-full.svg (footer). */

/* Reset de links que el nav+footer del hub asumen (site.css los define global como
   a{color:inherit; text-decoration:none}). Acotado al shell para no pisar los links
   de contenido de cada superficie de la boletera. */
.nav a,footer a{color:inherit; text-decoration:none}

/* ── Nav fija (portada del hub) ─────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:calc(68px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  background:rgba(11,11,12,.55); border-bottom:1px solid var(--hairline);
}
.nav .inner{max-width:1120px; margin:0 auto; padding:0 24px; height:100%;
  padding-left:max(24px,env(safe-area-inset-left)); padding-right:max(24px,env(safe-area-inset-right));
  display:flex; align-items:center; justify-content:space-between}
/* Brand: SOLO el isotipo en el nav (E5). El wordmark completo vive en el footer.
   Scopeado a .nav .brand: la boletera tiene .ticket.brand (variante sin cartel) que
   colisionaba con un .brand global → el boleto salía flex/horizontal. */
.nav .brand{display:inline-flex; align-items:center; min-height:44px; padding:8px 8px 8px 0}
.nav .brand .iso{display:block; width:27px; height:27px; flex:0 0 auto; background:var(--text);
  -webkit-mask:url(/logo-iso.svg) center/contain no-repeat;
  mask:url(/logo-iso.svg) center/contain no-repeat;
  transition:background 160ms var(--ease-out)}
.nav .brand:hover .iso{background:var(--accent)}
.nav .links{display:flex; gap:4px}
/* Links como componentes: pill con padding real, hover = fondo --chip-bg + texto --text.
   Una sola convención (sin subrayado coral, peleaba con el fondo). */
.nav .links a{position:relative; font-size:15px; color:var(--muted);
  min-height:36px; display:inline-flex; align-items:center; gap:7px; padding:0 14px;
  border-radius:999px;
  transition:color 160ms var(--ease-out), background 160ms var(--ease-out)}
.nav .links a:hover{color:var(--text); background:var(--chip-bg)}
.nav .nav-end{display:flex; align-items:center; gap:10px}
.nav .cta{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:7px; height:44px; padding:0 18px;
  border-radius:999px; border:1px solid var(--hairline); font-size:15px; font-weight:600;
  transition:transform 120ms var(--ease-out), border-color 160ms var(--ease-out);
}
.nav .cta:hover{border-color:var(--accent-30)}
.nav .cta:active{transform:scale(.97)}
.nav .cta .ring{color:var(--accent); transition:transform 200ms var(--ease-out)}
.nav .cta:hover .ring{transform:translate(3px,-3px)}
/* sheen: barrido de brillo que cruza el pill una vez al hover (600ms), sin glow */
.nav .cta::after{content:""; position:absolute; top:0; bottom:0; left:-40%; width:40%;
  background:linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.12), rgba(255,255,255,0));
  transform:translateX(0) skewX(-14deg); pointer-events:none}
.nav .cta:hover::after{animation:ctaSheen 600ms var(--ease-out)}
@keyframes ctaSheen{ from{transform:translateX(0) skewX(-14deg)} to{transform:translateX(420%) skewX(-14deg)} }
@media(max-width:720px){
  .nav .links{gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin:0 6px; flex:1 1 auto; justify-content:flex-end; min-width:0}
  .nav .links::-webkit-scrollbar{display:none}
  .nav .links a{padding:0 10px; font-size:14px; white-space:nowrap; min-height:44px}
  .nav .brand{padding-right:0}
  .nav .nav-end{gap:8px; flex:0 0 auto}
}

/* Reservar la altura de la nav fija (68px) para que el contenido no quede tapado.
   La boletera renderiza el contenido justo bajo la nav; el hub lo hace por sección. */
body{padding-top:calc(68px + env(safe-area-inset-top))}

/* ── Footer (firma de cierre del hub) ───────────────────────────────────────── */
footer{border-top:1px solid var(--hairline); padding:56px 0 max(40px,env(safe-area-inset-bottom))}
/* wordmark grande via mask del logo-full.svg (tinta --muted, firma de cierre) */
footer .fmark{display:block; width:min(100%,560px); aspect-ratio:1192/762; margin-bottom:36px;
  background:var(--muted); opacity:.85;
  -webkit-mask:url(/logo-full.svg) left center/contain no-repeat; mask:url(/logo-full.svg) left center/contain no-repeat}
footer .frow{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  padding-top:28px; border-top:1px solid var(--hairline)}
footer nav{display:flex; gap:24px; flex-wrap:wrap}
footer nav a{min-height:44px; display:inline-flex; align-items:center;
  font-size:14px; color:var(--muted); transition:color 160ms var(--ease-out)}
footer nav a:hover{color:var(--text)}
footer .fine{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}