/* Barra de arriba de todas las landings (las seis generadas y el Reproductor) y su menú lateral del celular.
   El HTML sale de una sola función de landings/build.cjs. La posición y el alto de la barra los pone cada página
   (.site-header en styles.css, .navigation en reproductor/style.css); acá va lo que se ve: vidrio con un degradé
   suave (el mismo de las barras de la app), la tipografía de títulos y el menú. Lineamientos: docs/lineamientos-diseno.md. */
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/chakra-petch-600.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/chakra-petch-700.woff2) format("woff2")}

.topbar,.topbar.scrolled{background:linear-gradient(90deg,rgba(210,142,255,.16),rgba(210,142,255,0) 50%,rgba(214,91,159,.16)),rgba(12,7,19,.78);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.07);box-shadow:none}
.topbar-logo{display:inline-flex;flex:none}
.topbar-logo img{width:155px;height:auto}
.topbar .topbar-nav{display:flex;gap:26px;margin:0 auto;font-family:"Chakra Petch",Inter,Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:.02em;color:#c8bccf}
.topbar-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;transition:color .2s cubic-bezier(.2,0,0,1)}
.topbar-nav a:hover,.topbar-nav a[aria-current]{color:#fff}
.topbar-nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,#b969f6,#d28eff)}
.topbar-cta{display:inline-flex;align-items:center;flex:none;gap:18px;min-height:44px;padding:0 22px;border-radius:30px;background:#e8d9f4;color:#251331;font-size:14px;font-weight:600;transition:background .2s cubic-bezier(.2,0,0,1)}
.topbar-cta:hover{background:#f6ecff}
.topbar-menu,.drawer-close{display:none;place-items:center;flex:none;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#fff;cursor:pointer;transition:background .2s cubic-bezier(.2,0,0,1)}
.topbar-menu:hover,.drawer-close:hover{background:rgba(255,255,255,.14)}
.topbar-menu svg,.drawer-close svg{width:22px;height:22px}

/* Menú lateral: sale del costado en el celular y la tablet, con todas las páginas. */
.drawer{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);height:100dvh;max-width:none;max-height:none;margin:0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));border:0;border-right:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(210,142,255,.14),rgba(210,142,255,0) 46%,rgba(214,91,159,.1)),rgba(18,14,24,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);color:#f7f3fa;flex-direction:column;gap:18px;translate:-100% 0;transition:translate .32s cubic-bezier(.05,.7,.1,1)}
.drawer[open]{display:flex}
.drawer.open{translate:0 0}
.drawer::backdrop{background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s linear}
.drawer.open::backdrop{opacity:1}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-left:6px}
.drawer-close{display:grid}
.drawer nav{display:grid;gap:4px;font-family:"Chakra Petch",Inter,Arial,sans-serif;font-size:19px;font-weight:600}
.drawer nav a{display:flex;align-items:center;min-height:52px;padding:0 14px;border-radius:16px;color:#d8d2de;transition:background .2s cubic-bezier(.2,0,0,1),color .2s cubic-bezier(.2,0,0,1)}
.drawer nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.drawer nav a[aria-current]{background:rgba(202,146,242,.16);color:#f4efff}
.drawer-foot{display:grid;gap:6px;margin-top:auto}
.drawer-join{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:40px;background:linear-gradient(120deg,#b739ef,#8b26bd);color:#fff;font-size:15px;font-weight:600;text-align:center}
.drawer-enter{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;color:#dec0f2;font-size:14px;font-weight:500}
html:has(.drawer[open]){overflow:hidden}

@media(max-width:1100px){
  .topbar .topbar-nav{gap:18px;font-size:13px}
}
@media(max-width:1000px){
  .topbar{justify-content:flex-start;gap:12px}
  .topbar .topbar-nav{display:none}
  .topbar-menu{display:grid;margin-left:-8px}
  .topbar-cta{margin-left:auto}
}
@media(max-width:720px){
  .topbar-logo img{width:130px}
  .topbar-cta{gap:12px;padding:0 18px;font-size:13px}
}
@media(max-width:359px){
  .topbar-cta{padding:0 14px}
}
@media(prefers-reduced-motion:reduce){
  .drawer,.drawer::backdrop,.topbar-nav a,.topbar-cta,.topbar-menu,.drawer-close,.drawer nav a{transition:none}
}