/* GLIFO · tokens y componentes compartidos (encabezado, secciones, botones, resolución, modal) */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
:root{--g-sans:"Inter Tight","Inter",system-ui,sans-serif;--g-mono:"JetBrains Mono","DejaVu Sans Mono",ui-monospace,monospace;
--g-r:12px;--g-r-sm:8px;--g-pill:999px;--g-gap:12px;--g-pad:16px;--g-h:52px;
--g-head:#0e0e10;--g-head-ink:#f4f2ee;--g-head-mut:#8d8a93;--g-head-line:rgba(255,255,255,.09);--g-acc:#a78bfa;--g-acc2:#e0612f;
--g-ease:cubic-bezier(.2,.8,.2,1)}
html body.g-app{box-sizing:border-box;padding-top:var(--g-h)!important;height:100dvh!important;min-height:0!important}
.g-head{position:fixed;z-index:1000;top:0;left:0;right:0;height:var(--g-h);display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--g-head);color:var(--g-head-ink);border-bottom:1px solid var(--g-head-line);font-family:var(--g-sans);-webkit-font-smoothing:antialiased}
.g-head *{box-sizing:border-box}
.g-back{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:var(--g-pill);border:1px solid var(--g-head-line);background:rgba(255,255,255,.04);color:var(--g-head-ink)!important;text-decoration:none!important;font:500 12px/1 var(--g-mono);letter-spacing:.04em;white-space:nowrap;transition:background .2s,border-color .2s}
.g-back:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.g-appn{display:flex;align-items:center;gap:9px;font:800 15px/1 var(--g-sans);letter-spacing:.06em;color:var(--g-head-ink)}
.g-appn img,.g-appn svg{width:24px;height:24px;display:block;border-radius:6px;image-rendering:pixelated}
.g-appn small{font:400 10.5px var(--g-mono);letter-spacing:.1em;color:var(--g-head-mut);text-transform:uppercase}
.g-sp{flex:1}
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 15px;border-radius:var(--g-pill);border:1px solid var(--g-line,rgba(127,127,127,.35));background:transparent;color:inherit;font:500 12px/1 var(--g-mono);letter-spacing:.05em;cursor:pointer;transition:transform .15s,background .2s,border-color .2s;white-space:nowrap}
.g-btn:hover{transform:translateY(-1px)}.g-btn:active{transform:none}
.g-btn.pri{background:var(--g-head-ink);color:var(--g-head);border-color:transparent}
.g-head .g-btn{border-color:var(--g-head-line);color:var(--g-head-ink)}.g-head .g-btn.pri{color:var(--g-head)}
/* secciones plegables */
details.g-sec{border-top:1px solid var(--g-line,rgba(127,127,127,.2))}
details.g-sec:first-of-type{border-top:0}
details.g-sec>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:13px 2px;cursor:pointer;font:600 11px/1 var(--g-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g-sec-ink,inherit);user-select:none}
details.g-sec>summary::-webkit-details-marker{display:none}
details.g-sec>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s var(--g-ease);opacity:.7}
details.g-sec[open]>summary::before{transform:rotate(45deg)}
details.g-sec>summary small{margin-left:auto;font-weight:400;letter-spacing:.06em;opacity:.6;text-transform:none}
details.g-sec>.g-sec-b{padding:2px 2px 16px;display:flex;flex-direction:column;gap:14px}
/* selector de resolución */
.g-res{display:flex;flex-direction:column;gap:7px}
.g-res .g-res-l{font:500 10.5px var(--g-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.g-res .g-seg{display:flex;padding:3px;gap:3px;border-radius:var(--g-pill);border:1px solid var(--g-line,rgba(127,127,127,.3))}
.g-res button{position:relative;flex:1;height:30px;border:0;border-radius:var(--g-pill);background:none;color:inherit;font:600 11.5px var(--g-mono);letter-spacing:.06em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.g-res button.on{background:var(--g-res-on,#f4f2ee);color:var(--g-res-onfg,#0e0e10)}
.g-res button.lk{opacity:.5;cursor:not-allowed}
.g-res button.lk svg{width:11px;height:11px}
.g-tip{position:relative}
.g-tip:hover::after,.g-tip:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#0e0e10;color:#f4f2ee;font:500 11px var(--g-mono);letter-spacing:.02em;padding:6px 9px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.35);z-index:50;pointer-events:none;opacity:1}
/* modal */
.g-ov{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;background:rgba(10,10,12,.55);backdrop-filter:blur(6px);animation:gfi .2s ease}
.g-mod{width:min(92vw,380px);background:#16161a;color:#f4f2ee;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:26px 24px 20px;font-family:var(--g-sans);box-shadow:0 30px 80px rgba(0,0,0,.5);animation:gup .3s var(--g-ease)}
.g-mod h3{margin:0 0 6px;font:800 22px var(--g-sans);letter-spacing:-.02em}.g-mod p{margin:0 0 18px;color:#a8a5ad;font-size:14px;line-height:1.45}
.g-goo{width:100%;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#fff;color:#1f1f1f;font:600 14px var(--g-sans);display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.g-goo:hover{background:#f1f1f1}.g-note{margin-top:12px;min-height:18px;font:500 12px var(--g-mono);color:var(--g-acc);text-align:center}
.g-mod .g-x{margin-top:14px;width:100%;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:none;color:#cfccd4;font:500 12px var(--g-mono);cursor:pointer}
@keyframes gfi{from{opacity:0}}@keyframes gup{from{opacity:0;transform:translateY(14px) scale(.98)}}
@media (max-width:560px){.g-head{gap:8px;padding:0 10px}.g-appn small{display:none}.g-back{padding:0 10px}.g-back .g-t{display:none}.g-head .g-btn{padding:0 11px}}
@media (max-width:380px){.g-appn span{display:none}}
@media (pointer:coarse){.g-res button{height:40px}.g-btn{height:40px}}
@media (prefers-reduced-motion:reduce){.g-ov,.g-mod{animation:none}.g-btn:hover{transform:none}}
.g-pro{display:inline-flex;align-items:center;gap:4px;font:600 9.5px/1 var(--g-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:99px;background:linear-gradient(90deg,#a78bfa,#e0612f);color:#fff}.g-pro svg{width:9px;height:9px}
.g-banner{position:fixed;z-index:999;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:min(94vw,620px);padding:10px 12px 10px 14px;border-radius:14px;background:rgba(22,22,26,.94);backdrop-filter:blur(8px);border:1px solid rgba(167,139,250,.35);color:#e9e7ee;font:400 12.5px/1.4 var(--g-sans);box-shadow:0 18px 50px rgba(0,0,0,.45);animation:gup .35s var(--g-ease)}
.g-banner>svg{width:14px;height:14px;flex:none;color:#a78bfa}.g-banner b{font-weight:600}.g-banner button{flex:none;border:0;background:rgba(255,255,255,.08);color:#fff;width:28px;height:28px;border-radius:99px;cursor:pointer}
@media (max-width:560px){.g-pro{font-size:0;padding:4px}.g-banner{bottom:auto;top:calc(var(--g-h) + 8px)}}
.g-mode{display:inline-flex;padding:3px;gap:2px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.g-mode button{border:0;background:none;color:inherit;opacity:.65;font:600 11px/1 var(--g-mono);letter-spacing:.04em;padding:7px 11px;border-radius:99px;cursor:pointer;white-space:nowrap}
.g-mode button.on{opacity:1;background:var(--g-acc);color:#140f22}
body:not(.g-app) .g-mode{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.12)}
.g-wall{position:fixed;inset:var(--g-h) 0 0;z-index:900;display:grid;place-items:center;padding:20px;background:rgba(10,10,12,.55);backdrop-filter:blur(7px) saturate(.7);-webkit-backdrop-filter:blur(7px)}
.g-wall-c{max-width:420px;text-align:center;background:#16161a;color:#ece9f3;border:1px solid rgba(167,139,250,.35);border-radius:18px;padding:28px 24px;box-shadow:0 30px 80px rgba(0,0,0,.5);font:400 14px/1.5 var(--g-sans)}
.g-wall-i{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:rgba(167,139,250,.15);color:#a78bfa}.g-wall-i svg{width:22px;height:22px}
.g-wall-c h3{margin:12px 0 6px;font-size:20px}.g-wall-c p{opacity:.75;margin:0 0 18px}.g-wall-r{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.g-wall-r .g-btn[disabled]{opacity:.55;cursor:not-allowed}
@media (max-width:560px){.g-mode button{padding:6px 8px;font-size:10px}.g-appn small,.g-appn .g-pro{display:none}}