/* ZZZ LATAM · capa compartida: ajustes, navegación común, pie y modo ligero.
   Va después de la hoja de cada sección. html[data-fx=lite] lo decide /fx.js. */

/* ---------- ajustes (los inserta /site.js) ---------- */
.site-prefs{position:relative;flex:none;font:600 12px/1.3 "JetBrains Mono",ui-monospace,monospace}
.site-prefs>summary{display:grid;place-items:center;width:34px;height:34px;border:1px solid #ffffff26;color:#f2efe6;cursor:pointer;list-style:none;border-radius:2px}
.site-prefs>summary::-webkit-details-marker{display:none}
.site-prefs>summary:hover,.site-prefs[open]>summary{border-color:#ffd400;color:#ffd400}
.site-prefs>summary:focus-visible{outline:2px solid #ffd400;outline-offset:2px}
.site-prefs svg{width:17px;height:17px}
.site-prefs__panel{position:absolute;right:0;top:calc(100% + 10px);z-index:200;width:min(290px,86vw);padding:14px 16px;background:#111315;border:1px solid #ffffff2e;box-shadow:0 14px 34px #000000b3;color:#d9d6cc;text-align:left}
.site-prefs__panel p{margin:0 0 8px;letter-spacing:.06em;text-transform:uppercase;color:#ffd400;font-size:11px}
.site-prefs__panel label{display:flex;gap:9px;align-items:center;padding:5px 0;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:500}
.site-prefs__panel input{accent-color:#ffd400;margin:0}
.site-prefs__panel small{color:#8d8a82;font-size:11px}
.site-prefs__panel .site-prefs__note{margin:10px 0 0;color:#8d8a82;text-transform:none;letter-spacing:0;font-weight:500;font-size:11px;line-height:1.45}
.site-prefs__sep{height:1px;margin:8px 0;background:#ffffff1a}

/* ---------- navegación: activa y móvil sin desbordes ---------- */
.bar__nav a[aria-current=page]{color:#ffd400}
.bar>nav:not(.bar__nav) a[href='/guias/']{display:flex!important}
@media (max-width:760px){
  .bar{flex-wrap:wrap;height:auto!important;min-height:var(--bar,56px);row-gap:0!important;column-gap:10px!important;padding-top:6px;padding-bottom:0}
  .bar .brand{order:1}
  .bar .brand img{display:none}
  .bar .site-prefs{order:2;margin-left:auto}
  .site-prefs__panel{position:fixed;left:12px;right:12px;top:auto;width:auto;margin-top:10px}
  .bar>.btn,.bar .discord-button{order:3;padding-left:12px!important;padding-right:12px!important}
  .bar .qz-audio-btn{order:2;margin-left:auto}
  .bar details.preferences{order:2}
  .bar .qz-audio-btn~.site-prefs,.bar .qz-audio-btn~.preferences{margin-left:0}
  .bar__tag,.bar .live-pill{display:none!important}
  .bar .bar__nav{display:flex!important;order:9;flex:0 0 100%;width:100%;gap:16px!important;margin:4px 0 0!important;padding:8px 0 10px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;border-top:1px solid #ffffff12;font-size:11px!important;letter-spacing:.04em!important;justify-content:flex-start}
  .bar .bar__nav::-webkit-scrollbar{display:none}
  .bar .bar__nav a{display:block!important;flex:none;font-size:11px!important}
  /* Tier list y editor: su <nav> no lleva .bar__nav y el botón de Discord vive dentro. */
  .bar>nav:not(.bar__nav){display:flex!important;order:9;flex:0 0 100%;width:100%;max-width:none!important;flex-wrap:nowrap!important;gap:16px!important;margin:4px 0 0!important;padding:4px 0 6px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;border-top:1px solid #ffffff12;justify-content:flex-start!important;font-size:11px!important}
  .bar>nav:not(.bar__nav)::-webkit-scrollbar{display:none}
  .bar>nav:not(.bar__nav) a{flex:none}
  .bar>nav:not(.bar__nav) .join{position:absolute;top:8px;right:15px;min-height:34px!important;font-size:11px!important;padding:4px 12px!important}
  .bar>nav:not(.bar__nav) .join img{display:none}
  .bar:has(>nav:not(.bar__nav) .join) .brand{min-height:42px;display:flex;align-items:center}
  .ed-bar nav{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;white-space:nowrap;gap:16px!important}
  .ed-bar nav::-webkit-scrollbar{display:none}
  .ed-bar nav a{flex:none}
}
/* Guías: la rejilla de 3 columnas pasa a una sola sin que el título o el arte fuercen el ancho. */
@media (max-width:820px){
  .stage:has(>.char-showcase){grid-template-columns:minmax(0,1fr)!important}
  .stage:has(>.char-showcase)>*{min-width:0;max-width:100%}
  .stage:has(>.char-showcase) .title{font-size:clamp(34px,11.5vw,64px)!important;overflow-wrap:anywhere}
  .stage:has(>.char-showcase) .kicker{flex-wrap:wrap}
  .hdd-table{display:block;max-width:100%;overflow-x:auto}
}
/* Portada de guías: "ENCICLOPEDIA" no cabe a 38 px en 390 px y se partía en dos líneas. */
@media (max-width:560px){
  .intro>.title .title__a{font-size:clamp(28px,8.6vw,38px)}
  .intro>.title .title__b{font-size:clamp(26px,7.6vw,32px)}
}

/* ---------- pie común ---------- */
.foot .site-foot__nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot .site-foot__legal{opacity:.85}

/* ---------- enlaces que conectan secciones ---------- */
.pnl__more{display:inline-block;margin:12px 0 0 14px;font:700 12px/1.4 "JetBrains Mono",ui-monospace,monospace;color:#ffd400;text-underline-offset:3px}
.site-practical{max-width:1240px;margin:56px auto 0;padding:0 var(--gutter,24px)}
.site-practical__kicker{margin:0 0 6px;font:700 11px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;color:#29e6ff}
.site-practical h2{margin:0 0 18px;font:400 clamp(30px,4vw,46px)/1 Anton,Impact,sans-serif;text-transform:uppercase;color:#f2efe6}
.site-practical__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.site-practical__grid a{display:block;padding:16px 18px;border:1px solid #ffffff1f;border-left:3px solid #ffd400;background:#0f1115;color:#d9d6cc;text-decoration:none}
.site-practical__grid a:hover,.site-practical__grid a:focus-visible{border-color:#ffd400;background:#15181d}
.site-practical__grid b{display:block;margin-bottom:4px;font:800 16px/1.3 Archivo,system-ui,sans-serif;color:#f2efe6}
.site-practical__grid span{font:500 13px/1.5 Archivo,system-ui,sans-serif;color:#a9a59c}

/* ---------- valores iniciales del sorter (antes en atributos style, que la CSP bloquea) ---------- */
#sorter-stage{--left-accent:#ff4d29;--right-accent:#10b981;--clash-accent:#7c3aed}
#sr-progress-fill{width:2%}
#sr-card-a{--card-accent:#ff4d29;--char-scale:1.22;--char-x:0%;--char-y:6%}
#sr-card-b{--card-accent:#10b981;--char-scale:1.18;--char-x:0%;--char-y:5%}

/* ---------- movimiento reducido (preferencia del sistema o del sitio) ---------- */
html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}

/* ---------- modo ligero: sin aceleración por hardware ----------
   Nada de capas que se recalculan en cada frame: sin WebGL, partículas, desenfoques de fondo,
   mezclas, marquesinas ni ruido a pantalla completa. Se conserva la composición y el arte. */
html[data-fx=lite] #v3-rain-gl,html[data-fx=lite] #v3-crt-gl,html[data-fx=lite] #v3-motes-canvas,
html[data-fx=lite] .noise,html[data-fx=lite] .weather__mist,html[data-fx=lite] .counter-art__rain{display:none!important}
html[data-fx=lite] *,html[data-fx=lite] *::before,html[data-fx=lite] *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-fx=lite] .bar{background:#0a0b0e!important;box-shadow:none!important}
html[data-fx=lite] .street-nav,html[data-fx=lite] .intro__digest,html[data-fx=lite] .result-panel,html[data-fx=lite] .sr-poster-quote{background-color:#0d0f13f2!important}
html[data-fx=lite] .band-track,html[data-fx=lite] .vfd__track,html[data-fx=lite] .v3-cordon,html[data-fx=lite] .v3-cordon__track,
html[data-fx=lite] .live-pill i::after,html[data-fx=lite] .btn--xl::after,html[data-fx=lite] .eous-fallback,html[data-fx=lite] .sr-neo-ambience,
html[data-fx=lite] .stage__band{animation:none!important}
html[data-fx=lite] .v3-cordon,html[data-fx=lite] .char-showcase__closeup,html[data-fx=lite] .char-showcase__shadow,html[data-fx=lite] .mind-stage__art{filter:none!important}
html[data-fx=lite] .char-showcase__closeup,html[data-fx=lite] .sr-print-grain,html[data-fx=lite] .sr-fighter__poster::before,html[data-fx=lite] .sr-fighter__poster::after,
html[data-fx=lite] .sr-fighter__plaque::after{mix-blend-mode:normal!important}
html[data-fx=lite] .sr-print-grain{display:none!important}
html[data-fx=lite] [data-depth],html[data-fx=lite] .tv,html[data-fx=lite] .vcr{translate:none!important}
html[data-fx=lite] .will-change,html[data-fx=lite] .band-track,html[data-fx=lite] .v3-cordon__track,html[data-fx=lite] .tape{will-change:auto!important}