/* «Cómo va esto» (/como-funciona) y «Comunidad Game Pass» (/comunidad-game-pass) — 02-10-2026.
   Lienzo «El Nexo 3», página «producto», tablero «Guía y Comunidad». Móvil primero; en PC, rejilla de dos columnas.
   La cabecera del Jefe Maestro en móvil la pone header.php (gpu_section_head); en PC va .gg-hero-pc. */
@font-face{font-family:"XF";src:url(/assets/fonts/xbox-fluent-gt.woff2?v=2) format("woff2");font-display:block}
.gg{--cy:#00d4ff;--cy2:#7ee7ff;--pan:#0b1119;--pan2:#111821;--bg0:#05080d;--t:#dfe7ef;--t2:#aab6c3;--mut:#7a899a;--fd:"Bebas Neue",Impact,sans-serif;--fs:Barlow,"Segoe UI",system-ui,-apple-system,sans-serif;
  max-width:1100px;margin:0 auto;padding:12px 12px 20px;font-family:var(--fs);color:var(--t);box-sizing:border-box}
.gg *{box-sizing:border-box}
.gg a{text-decoration:none}
.gg-x{font-family:"XF";font-style:normal;font-weight:400;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em}
.gg-rayo{display:inline-block;width:1em;height:1em;fill:currentColor;vertical-align:-.12em}
.gg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Cabecera en PC (en móvil la pone header.php) */
.gg-hero-pc{display:none}
@media (min-width:769px){
  .gg-hero-pc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:220px;margin:6px 0 4px;padding:26px 36px;border-radius:22px;overflow:hidden;isolation:isolate;
    background:url(/assets/img/nexo-desktop/nexo-unified-hero-r4.webp) 70% 40%/cover}
  .gg-hero-pc::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#080d14 8%,rgba(8,13,20,.7) 55%,rgba(8,13,20,.15)),linear-gradient(0deg,#05080d,rgba(5,8,13,0) 50%)}
  .gg-hero-pc h1,.gg-hero-pc .gg-h1{margin:0;font:400 62px/.92 var(--fd);color:#fff;letter-spacing:.01em}
  .gg-hero-pc p{margin:8px 0 0;font:500 17px/1.4 var(--fs);color:#c3ccd6;max-width:620px}
}

.gg-grid{display:flex;flex-direction:column;gap:14px;margin-top:14px}
@media (min-width:900px){.gg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.gg-full{grid-column:1/-1}}

.gg-card{border-radius:18px;background:var(--pan);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
@media (min-width:900px){.gg-card{padding:20px}}
.gg-eye{display:flex;align-items:center;gap:7px;margin:0;font:800 11.5px/1 var(--fs);letter-spacing:.14em;text-transform:uppercase;color:var(--cy2)}
.gg-eye .gg-x,.gg-eye .gg-rayo{font-size:14px}
.gg-h2{margin:0;font:400 28px/.95 var(--fd);color:#fff;letter-spacing:.01em;text-wrap:balance}
.gg-p{margin:0;font:500 14.5px/1.55 var(--fs);color:var(--t2)}
.gg-p b,.gg-p strong{color:#fff}
.gg-p a{color:var(--cy2);text-decoration:underline;text-underline-offset:2px}

/* Bloques con icono */
.gg-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:900px){.gg-tiles.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gg-tile{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;background:var(--pan);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:var(--t);transition:box-shadow .2s,transform .2s}
a.gg-tile:hover{box-shadow:inset 0 0 0 1px rgba(0,212,255,.45);transform:translateY(-2px)}
.gg-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(0,212,255,.12);color:var(--cy2);font-size:20px;box-shadow:inset 0 0 0 1px rgba(0,212,255,.3)}
.gg-tile b{font:800 15.5px/1.15 var(--fs);color:#fff}
.gg-tile small{font:500 12.5px/1.4 var(--fs);color:var(--mut)}

/* Rangos */
.gg-ranks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 6px}
@media (min-width:480px){.gg-ranks{grid-template-columns:repeat(6,minmax(0,1fr))}}
.gg-rk{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.gg-rk b{font:800 11px/1 var(--fs);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.gg-rk small{font:600 11.5px/1 var(--fs);color:var(--mut);font-variant-numeric:tabular-nums}
.gg-hx{position:relative;display:inline-block;flex:none;width:44px;height:48px;filter:drop-shadow(0 0 8px var(--g,rgba(0,212,255,.5)))}
.gg-hx::before{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--r,#00d4ff)}
.gg-hx::after{content:"";position:absolute;inset:4px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--pan)}
.gg-hx img{position:absolute;inset:3px;z-index:1;width:calc(100% - 6px);height:calc(100% - 6px);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);object-fit:cover}
.gg-yo{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(0,212,255,.08);box-shadow:inset 0 0 0 1px rgba(0,212,255,.3);font:600 14px/1.35 var(--fs);color:var(--t)}
.gg-yo b{color:#fff}

/* Tabla de XP */
.gg-xp{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.gg-xp li{display:flex;align-items:center;gap:12px;min-height:46px;border-top:1px solid rgba(255,255,255,.06)}
.gg-xp li:first-child{border-top:0}
.gg-xp .gg-x{flex:none;width:22px;font-size:18px;color:var(--cy2)}
.gg-xp span{flex:1;min-width:0;font:600 14.5px/1.3 var(--fs);color:var(--t)}
.gg-xp em{flex:none;padding:5px 8px 3px;border-radius:8px;font:400 22px/1 var(--fd);font-style:normal;color:#04121a;background:var(--cy);font-variant-numeric:tabular-nums}
.gg-xp em.is-sm{background:rgba(0,212,255,.14);color:var(--cy2)}

/* Pulsos */
.gg-big{display:flex;align-items:center;gap:14px}
.gg-big .gg-rayo{flex:none;width:54px;height:54px;color:var(--cy);filter:drop-shadow(0 0 14px rgba(0,212,255,.6))}
.gg-big .gg-n{flex:none;font:400 72px/.8 var(--fd);color:#fff}
.gg-chips{display:flex;flex-wrap:wrap;gap:6px}
.gg-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;font:800 11.5px/1 var(--fs);letter-spacing:.06em;text-transform:uppercase;background:var(--pan2);color:#c3ccd6}
.gg-chip.is-cy{background:rgba(0,212,255,.14);color:var(--cy2)}

/* Desbloqueos */
.gg-lock{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--bg0)}
.gg-lock .gg-hx{width:38px;height:42px}
.gg-lock b{display:block;font:800 14.5px/1.2 var(--fs);color:#fff}
.gg-lock small{font:500 12.5px/1.4 var(--fs);color:var(--mut)}

/* Insignias */
.gg-bdg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gg-bdg figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:14px;background:var(--bg0);text-align:center}
.gg-bdg img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.gg-bdg figcaption{font:700 12px/1.25 var(--fs);color:var(--t)}

/* Preguntas */
.gg-faq{display:flex;flex-direction:column}
.gg-faq details{border-top:1px solid rgba(255,255,255,.07)}
.gg-faq details:first-child{border-top:0}
.gg-faq summary{display:flex;align-items:center;gap:10px;min-height:52px;list-style:none;cursor:pointer;font:700 14.5px/1.3 var(--fs);color:#fff}
.gg-faq summary::-webkit-details-marker{display:none}
.gg-faq summary .gg-x{margin-left:auto;flex:none;color:var(--mut);font-size:13px;transition:transform .2s}
.gg-faq details[open] summary .gg-x{transform:rotate(180deg)}
.gg-faq details p{margin:0 0 14px;font:500 14px/1.55 var(--fs);color:var(--t2)}
.gg-faq details p a{color:var(--cy2)}

/* Llamada final */
.gg-cta{border-radius:18px;padding:18px;background:radial-gradient(circle at 85% 0,rgba(0,212,255,.28),transparent 60%),var(--pan);box-shadow:inset 0 0 0 1px rgba(0,212,255,.35);display:flex;flex-direction:column;gap:12px}
.gg-btns{display:flex;gap:10px;flex-wrap:wrap}
.gg-btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:14px;font:800 15px/1 var(--fs);background:var(--cy);color:#04121a!important}
.gg-btn.is-gh{background:var(--pan2);color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
@media (min-width:900px){.gg-btn{flex:none}}

/* Comunidad */
.gg-hero{border-radius:20px;padding:18px;background:radial-gradient(circle at 90% -10%,rgba(0,212,255,.3),transparent 55%),var(--pan);box-shadow:inset 0 0 0 1px rgba(0,212,255,.3);display:flex;flex-direction:column;gap:14px}
.gg-hero h1{margin:0;font:400 40px/.92 var(--fd);color:#fff;letter-spacing:.01em;text-wrap:balance}
@media (min-width:900px){.gg-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:center;padding:26px}.gg-hero h1{font-size:58px}.gg-hero>div{display:flex;flex-direction:column;gap:14px}}
.gg-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gg-kpi{border-radius:14px;background:var(--bg0);padding:12px 10px}
.gg-kpi b{display:block;font:400 34px/.9 var(--fd);color:#fff;font-variant-numeric:tabular-nums}
.gg-kpi small{font:600 12px/1.25 var(--fs);color:var(--mut)}
.gg-caras{display:flex;align-items:center;min-width:0}
.gg-caras .gg-hx{width:38px;height:42px;margin-left:-8px}
.gg-caras .gg-hx:first-child{margin-left:0}
.gg-caras span{margin-left:10px;font:600 13px/1.35 var(--fs);color:var(--t2)}
.gg-chan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:900px){.gg-chan{grid-template-columns:repeat(5,minmax(0,1fr))}}
.gg-cb{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;background:var(--bg0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--t);transition:box-shadow .2s}
.gg-cb:hover{box-shadow:inset 0 0 0 1px rgba(0,212,255,.45)}
.gg-cb .i{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
.gg-cb .i svg{width:19px;height:19px;fill:currentColor}
.gg-cb .i.is-tg{background:#229ed9}.gg-cb .i.is-dc{background:#5865f2}.gg-cb .i.is-cy{background:var(--cy);color:#04121a}
.gg-cb b{font:800 15px/1.15 var(--fs);color:#fff}
.gg-cb small{font:500 12.5px/1.4 var(--fs);color:var(--mut)}
.gg-cb .go{margin-top:auto;font:800 12.5px/1 var(--fs);color:var(--cy2)}
.gg-rank{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.gg-rank li{display:flex;align-items:center;gap:12px;min-height:58px;border-top:1px solid rgba(255,255,255,.06)}
.gg-rank li:first-child{border-top:0}
.gg-rank .pos{width:22px;font:400 24px/1 var(--fd);color:var(--mut);text-align:center}
.gg-rank li:first-child .pos{color:var(--cy)}
.gg-rank .gg-hx{width:40px;height:44px}
.gg-rank .tx{flex:1;min-width:0}
.gg-rank .tx a{display:block;font:800 15px/1.2 var(--fs);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-rank .tx small{font:600 12px/1 var(--fs);color:var(--mut)}
.gg-rank em{font:400 22px/1 var(--fd);font-style:normal;color:var(--cy2);font-variant-numeric:tabular-nums}
.gg-seo h2{margin:0;font:400 26px/1 var(--fd);color:#fff}
.gg-seo p{margin:0;font:500 15px/1.65 var(--fs);color:var(--t2);max-width:72ch}
@media (prefers-reduced-motion:reduce){.gg-tile,.gg-faq summary .gg-x{transition:none}}