/* Barra Psique · Wayne 12-nov-2026 · cabecera y pie comunes de Psique Académica.
   Sin dependencias. Un solo CSS y un solo JS. Espacio reservado con html::before (sin saltos de diseño). */
@font-face{font-family:"PsqF";src:url("https://psiqueacademica.com/psique-barra/fraunces-650-latin.woff2") format("woff2");font-weight:650;font-display:swap}
@font-face{font-family:"PsqI";src:url("https://psiqueacademica.com/psique-barra/instrument-sans-var-latin.woff2") format("woff2");font-weight:400 700;font-display:swap}
:root{--psq-h:56px;--psq-ink:#101f43;--psq-ink2:#17366a;--psq-gold:#efbd4f;--psq-paper:#f8f6f1;--psq-viol:#6f36b5}
@media(max-width:899px){:root{--psq-h:52px}}
/* reserva: el hueco existe antes de que cargue el JS; al montar la barra queda debajo de ella */
html:not(.psq-lab)::before{content:"";display:block;height:var(--psq-h);background:var(--psq-ink)}
.psq-bar,.psq-bar *,.psq-pie,.psq-pie *{box-sizing:border-box}
.psq-bar{position:absolute;top:0;left:0;width:100%;height:var(--psq-h);z-index:2147483000;background:var(--psq-ink);color:#e9edf7;font:500 14px/1.2 "PsqI",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}
.psq-in{max-width:1240px;height:100%;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:14px}
.psq-logo{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:#fff;text-decoration:none;flex:none}
.psq-psi{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--psq-paper);color:var(--psq-ink);font:650 18px/1 "PsqF",Georgia,serif}
.psq-name{font:650 18px/1 "PsqF",Georgia,serif;letter-spacing:-.01em;white-space:nowrap}
.psq-nav{margin-left:auto}
.psq-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.psq-nav li{margin:0;padding:0}
.psq-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 11px;color:#cfd7ea;text-decoration:none;border-radius:10px;font-weight:550;white-space:nowrap}
.psq-nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.psq-nav a[aria-current]{color:#fff}
.psq-nav a[aria-current]::after{content:"";position:absolute;left:11px;right:11px;bottom:5px;height:3px;border-radius:3px;background:var(--psq-gold)}
.psq-nav a.psq-pro{margin-left:6px;background:var(--psq-gold);color:var(--psq-ink);font-weight:700;padding:0 14px}
.psq-nav a.psq-pro:hover{background:#f7cd6c;color:var(--psq-ink)}
.psq-here,.psq-menu{display:none}
.psq-bar a:focus-visible,.psq-bar button:focus-visible,.psq-pie a:focus-visible{outline:3px solid var(--psq-gold);outline-offset:2px}
@media(max-width:899px){
  .psq-in{gap:10px;padding:0 12px}
  .psq-name{font-size:16px}
  .psq-here{display:block;margin-left:auto;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
  .psq-menu{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.28);border-radius:11px;background:transparent;color:#fff;font:650 14px/1 "PsqI",system-ui,sans-serif;cursor:pointer;flex:none}
  .psq-nav{display:none;position:absolute;top:var(--psq-h);left:0;right:0;margin:0;padding:10px 12px 14px;background:var(--psq-ink);border-bottom:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(0,0,0,.45)}
  .psq-bar.psq-abierto .psq-nav{display:block}
  .psq-nav ul{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .psq-nav a{width:100%;min-height:48px;padding:0 14px;background:rgba(255,255,255,.07);font-size:15px}
  .psq-nav a[aria-current]::after{left:14px;right:auto;width:22px;bottom:8px}
  .psq-nav li:last-child{grid-column:1/-1}
  .psq-nav a.psq-pro{margin:0;justify-content:center;min-height:50px}
}
@media(max-width:340px){.psq-name{display:none}}
/* pie */
.psq-pie{position:relative;display:block;width:100%;max-width:none!important;float:none!important;clear:both;background:var(--psq-ink);color:#cfd7ea;font:400 14px/1.55 "PsqI",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:34px 16px 26px;text-align:left;border-top:3px solid var(--psq-gold);margin:0}
.psq-pie .psq-w{max-width:1240px;margin:0 auto}
.psq-pie-top{display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between}
.psq-pie-id{flex:1 1 260px;max-width:380px}
.psq-pie-id b{display:block;font:650 20px/1.2 "PsqF",Georgia,serif;color:#fff;margin-bottom:8px}
.psq-pie-id p{margin:0;color:#aeb9d3}
.psq-cols{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:20px 30px;flex:2 1 560px}
.psq-cols h3{margin:0 0 6px;font:700 12px/1.3 "PsqI",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--psq-gold)}
.psq-cols a{display:block;min-height:36px;padding:7px 0;color:#e3e9f6;text-decoration:none}
.psq-cols a:hover{color:#fff;text-decoration:underline}
.psq-pie-low{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;color:#93a0c0}
.psq-pie-low p{margin:0 0 6px}
.psq-pie-low a{color:#cfd7ea}
@media(max-width:700px){.psq-cols{grid-template-columns:1fr 1fr;flex-basis:100%}.psq-pie{padding:28px 16px 22px}}
/* tejido: estudia el tema del juego */
.psq-tema{margin:0 0 28px;padding:16px 18px;border:1px solid rgba(255,255,255,.2);border-radius:16px;background:rgba(255,255,255,.06);display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.psq-tema b{font:650 17px/1.3 "PsqF",Georgia,serif;color:#fff}
.psq-tema span{display:flex;flex-wrap:wrap;gap:8px}
.psq-tema a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--psq-gold);color:var(--psq-ink);font-weight:700;text-decoration:none}
.psq-tema a:hover{background:#f7cd6c}
.psq-tema-lab{margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,220,180,.22);font:500 13.5px/1.4 "PsqI",system-ui,sans-serif;color:#e9dfcf}
.psq-tema-lab b{display:block;font-weight:700;margin-bottom:2px}
.psq-tema-lab span{display:flex;flex-wrap:wrap;gap:0 14px}
.psq-tema-lab a{display:inline-flex;align-items:center;min-height:44px;color:#ffb85c;text-decoration:underline}
/* el pie propio del ecosistema de juegos queda reemplazado por este */
.psq-on #psique-ecosystem-footer-root{display:none!important}
/* laboratorio 3D: sin reserva; la barra solo vive sobre la portada y la salida va en el menú de estaciones */
html.psq-lab .psq-bar{position:fixed;height:52px;transition:opacity .4s}
html.psq-lab .psq-bar.psq-oculta{opacity:0;pointer-events:none}
html.psq-lab .psq-bar{background:rgba(16,31,67,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html.psq-lab .psq-nav{background:rgba(16,31,67,.97)}
html.psq-lab .psq-fino{position:fixed;left:0;right:0;bottom:0;z-index:2147482000;display:flex;flex-wrap:wrap;gap:2px 4px;justify-content:center;padding:6px 12px;background:rgba(16,31,67,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:500 12.5px/1.2 "PsqI",system-ui,sans-serif;transition:opacity .4s}
html.psq-lab .psq-fino.psq-oculta{opacity:0;pointer-events:none}
html.psq-lab .psq-fino a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:#dfe6f6;text-decoration:none}
html.psq-lab .psq-fino a:hover{color:#fff;text-decoration:underline}
html.psq-lab .psq-fino a:focus-visible{outline:3px solid var(--psq-gold);outline-offset:-3px}
html.psq-lab .psq-salida{margin:10px 0 2px;padding:8px 10px 2px;border-top:1px solid rgba(255,220,180,.25);display:flex;flex-direction:column;gap:2px}
html.psq-lab .psq-salida b{font:700 11px/1.3 "PsqI",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#efbd4f;padding:4px 0}
html.psq-lab .psq-salida a{display:block;min-height:40px;padding:9px 0;color:#f3eadb;text-decoration:none;font:500 14px/1.3 "PsqI",system-ui,sans-serif}
html.psq-lab .psq-salida a:hover{text-decoration:underline}
/* en la portada del lab la barra no tapa el boton de sonido */
html.psq-lab:has(#portada.visible) .btn-sonido{top:64px}
@media(prefers-reduced-motion:reduce){.psq-bar,.psq-fino{transition:none!important}}
@media print{.psq-bar,.psq-pie,html::before{display:none!important}}
