/*
Theme Name: Sótano Gamer — Salient Child
Description: Child theme de Salient con el design system Pixel Quest. Las páginas se montan en WPBakery con las clases sg-* de este archivo. Referencia visual: design-system/pixel-quest/.
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: Kevin Sánchez
Template: salient
Version: 1.0
*/

/* ============================================================
   SÓTANO GAMER — Pixel Quest sobre Salient
   Retro-arcade morado · save slots · barras de vida · pixel UI
   Reglas de oro (MASTER.md):
   - CERO border-radius en componentes sg-*
   - Borde pixel = box-shadow en cruz de 4px
   - VT323 nunca < 17px · máx. 1 elemento parpadeante por página
   ============================================================ */

:root {
  --sg-bg:         #0F0F23;
  --sg-surface:    #1A1A35;
  --sg-surface-2:  #242444;
  --sg-border:     #2E2E55;
  --sg-primary:    #7C3AED;
  --sg-primary-lit:#A78BFA;
  --sg-cta:        #F43F5E;
  --sg-text:       #E2E8F0;
  --sg-muted:      #94A3B8;

  /* dificultad (barra de vida) */
  --sg-d-easy: #06D6A0;
  --sg-d-mid:  #F59E0B;
  --sg-d-hard: #EF4444;
  --sg-d-max:  #A78BFA;

  --sg-px: 4px; /* unidad del borde pixel */
}

/* ============================================================
   BASE — pelea con Salient
   Los colores/tipos principales se configuran en Theme Options;
   esto los refuerza para que no haya flashes ni herencias raras.
   ============================================================ */

html,
body,
#ajax-content-wrap,
.container-wrap {
  /* html incluido a propósito: si Salient (header sticky/resize por JS) deja
     un hueco transitorio o hay overscroll, se ve este fondo oscuro y NO el
     blanco default del elemento raíz (franja blanca intermitente bajo header). */
  background-color: var(--sg-bg);
}

/* Contención del scroll horizontal. Los pseudo-elementos full-bleed
   (.sg-hero__inner::before, bordes de sección) usan width:100vw, que
   incluye el ancho del scrollbar → sin esto aparece barra horizontal y
   rebote lateral en pantallas angostas/móvil. Va en #ajax-content-wrap
   (NO en body) para no romper el header sticky, que vive fuera de él. */
#ajax-content-wrap { overflow-x: hidden; }

body {
  color: var(--sg-text);
  /* Fuente base = Rubik (diseño). Imprescindible tras quitar el Open Sans
     de Salient: si no, el texto que no es .sg-* cae a fuente de sistema. */
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

::selection { background: var(--sg-primary); color: #fff; }

:focus-visible {
  outline: 2px solid var(--sg-primary-lit);
  outline-offset: 3px;
}

/* Salient mete border-radius por defecto en varios sitios — fuera en lo nuestro */
[class*="sg-"] ,
[class*="sg-"] * {
  border-radius: 0 !important;
}

/* ============================================================
   HEADER — Salient lo pinta blanco por defecto. Lo oscurecemos
   al fondo del sitio + borde pixel inferior, textos claros.
   (El logo pixel definitivo y el buscador inline van después;
   esto es para que el header se VEA y case con el fondo.)
   ============================================================ */
#header-outer,
#header-outer.scrolled-down,
.material #header-outer,
#header-outer[data-transparent-header="false"],
html #header-outer:not([data-transparent="true"]) {
  background-color: var(--sg-bg) !important;
  border-bottom: 2px solid var(--sg-border);
}
#search-outer { background-color: var(--sg-bg) !important; }

/* logo nativo de Salient oculto: lo reemplaza .sg-header-logo (functions.php) */
#header-outer #logo,
#header-outer #logo.no-image { display: none !important; }

/* logo pixel del header (réplica del footer: trofeo + SÓTANO/GAMER) */
.sg-header-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sg-text) !important;
  text-decoration: none;
}
.sg-header-logo b { color: var(--sg-primary-lit); font-weight: 700; }
.sg-header-logo .sg-logo-mark { width: 34px; height: 34px; }
.sg-header-logo .sg-logo-mark svg { width: 18px; height: 18px; image-rendering: pixelated; }
/* móvil chico: reducir el logo para que no se apriete con hamburguesa + lupa */
@media (max-width: 480px) {
  .sg-header-logo { font-size: 16px; gap: 8px; }
  .sg-header-logo .sg-logo-mark { width: 28px; height: 28px; }
  .sg-header-logo .sg-logo-mark svg { width: 14px; height: 14px; }
}

/* Altura/centrado del header — RESIZE-SAFE: no pelea con el shrink-on-scroll
   de Salient (solo añade aire en estado no-scrolled) y NO toca .sf-menu>li
   (no rompe submenús desplegables). Solo centra el logo en su columna. */
#header-outer:not(.scrolled-down) #top { padding-top: 7px; padding-bottom: 7px; }
#header-outer #top .col.span_3 { display: flex; align-items: center; }

/* enlaces del menú */
#header-outer #top nav > ul > li > a,
#header-outer .sf-menu > li > a,
#header-outer .menu-title-text {
  color: var(--sg-text) !important;
  font-family: 'VT323', monospace !important;
  font-size: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#header-outer #top nav > ul > li > a:hover,
#header-outer .sf-menu > li > a:hover,
#header-outer .sf-menu > li.current-menu-item > a {
  color: var(--sg-primary-lit) !important;
}

/* iconos (buscador, hamburguesa) en claro */
#header-outer .nectar-search-icon,
#header-outer .slide-out-widget-area-toggle a,
#header-outer .slide-out-widget-area-toggle .lines-button,
#header-outer a[href="#searchbox"],
#header-outer .icon-salient-search,
#header-outer span[class*="search"],
#header-outer .slide_out_area_close { color: var(--sg-text) !important; }
#header-outer .slide-out-widget-area-toggle .lines,
#header-outer .slide-out-widget-area-toggle .lines:before,
#header-outer .slide-out-widget-area-toggle .lines:after { background-color: var(--sg-text) !important; }

/* corchetes [ GUÍAS ] — markup real (.sg-br via filtro), gris visible, hover cta */
#header-outer .sf-menu .sg-br { color: var(--sg-muted) !important; transition: color 180ms ease; }
#header-outer .sf-menu > li > a:hover .sg-br { color: var(--sg-cta) !important; }

/* buscador inline del nav — replica exacta de .nav__search del diseño */
#header-outer .sf-menu > li.sg-nav-search { display: flex; align-items: center; padding: 0; margin-right: 22px; }
.sg-nav-search form {
  display: flex;
  align-items: center;
  background: var(--sg-surface);
  margin: 3px;
  box-shadow:
    3px 0 0 var(--sg-border),
    -3px 0 0 var(--sg-border),
    0 3px 0 var(--sg-border),
    0 -3px 0 var(--sg-border);
  transition: box-shadow 160ms ease;
}
.sg-nav-search form:focus-within {
  box-shadow:
    3px 0 0 var(--sg-primary),
    -3px 0 0 var(--sg-primary),
    0 3px 0 var(--sg-primary),
    0 -3px 0 var(--sg-primary);
}
.sg-nav-search__icon { display: grid; place-items: center; padding-left: 12px; color: var(--sg-muted); flex: none; }
.sg-nav-search__icon svg { width: 15px; height: 15px; }
.sg-nav-search input {
  width: 180px;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  padding: 7px 14px 7px 9px;
  margin: 0;
  color: var(--sg-text) !important;
  font-family: 'VT323', monospace !important;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: none !important;
  height: auto;
  line-height: 1.2;
}
.sg-nav-search input::placeholder { color: var(--sg-muted); text-transform: uppercase; opacity: 1; }

/* ocultar lupa y hamburguesa nativas de Salient EN DESKTOP
   (el diseño no las tiene; en móvil se conservan para el off-canvas) */
@media (min-width: 1000px) {
  #header-outer .mobile-search,
  #header-outer #search-btn,
  #header-outer .slide-out-widget-area-toggle { display: none !important; }
}
/* el botón de búsqueda del menú (lupa) sobra siempre: tenemos el inline */
#header-outer #search-btn { display: none !important; }
/* en móvil: ocultar el buscador inline (colapsa, como el diseño).
   Global (no solo en #header-outer) porque Salient renderiza el menú
   top_nav varias veces, incl. el off-canvas: si no, el <form> se cuela
   sin estilo en el menú hamburguesa. */
@media (max-width: 999px) {
  .sg-nav-search { display: none !important; }
}
#slide-out-widget-area .sg-nav-search { display: none !important; }

/* ============================================================
   OFF-CANVAS (menú hamburguesa móvil) — tema Pixel Quest
   Salient lo pinta con su AZUL de acento y deja los items sin
   estilo (se ven perdidos). Lo forzamos a fondo oscuro + items
   grandes y tappables. Selector con [data-...] para ganar a la
   especificidad del CSS de Theme Options.
   ============================================================ */
body[data-slide-out-widget-area-style] #slide-out-widget-area,
body[data-slide-out-widget-area-style] #slide-out-widget-area .inner-wrap,
body[data-slide-out-widget-area-style] #slide-out-widget-area .inner {
  background-color: var(--sg-bg) !important;
}
/* capa de oscurecimiento detrás del panel */
#slide-out-widget-area-bg.dark { background-color: rgba(10, 10, 24, 0.92) !important; }
/* borde pixel en el canto del panel */
#slide-out-widget-area { box-shadow: inset 4px 0 0 var(--sg-border); }
/* aire alrededor del menú + separación del header */
#slide-out-widget-area .off-canvas-menu-container { padding: 90px 30px 40px !important; }

/* tipografía Pixel Quest (no heredan el body de Salient) */
#slide-out-widget-area,
#slide-out-widget-area .off-canvas-menu-container li a,
#slide-out-widget-area .menu-title-text {
  font-family: 'VT323', monospace !important;
  letter-spacing: 0.06em;
}
/* items: grandes, tappables, con separador pixel */
#slide-out-widget-area .off-canvas-menu-container ul.menu > li > a {
  display: block;
  color: var(--sg-text) !important;
  text-transform: uppercase;
  font-size: 26px;
  line-height: 1.2;
  padding: 16px 0 !important;
  border-bottom: 2px solid var(--sg-border);
}
#slide-out-widget-area .off-canvas-menu-container ul.menu > li > a:hover,
#slide-out-widget-area .off-canvas-menu-container ul.menu > li > a:focus { color: var(--sg-primary-lit) !important; }
#slide-out-widget-area .sg-br { color: var(--sg-primary-lit) !important; }
/* botón cerrar: círculo morado (Salient lo pinta rojo #ff1053) + X clara */
#slide-out-widget-area .slide_out_area_close:before { background-color: var(--sg-primary) !important; }
#slide-out-widget-area .slide_out_area_close .close-line { background-color: #fff !important; }
#search-box input[type="search"],
#search-outer input {
  font-family: 'VT323', monospace !important;
  color: var(--sg-text) !important;
}
.nectar-button,
#header-outer .nectar-button { font-family: 'Pixelify Sans', sans-serif !important; }

/* tipografías de los componentes (independientes de Theme Options)
   NOTA: Salient/WPBakery NO propaga el el_class de los vc_row al DOM,
   así que NO se puede anclar a .sg-hero / .sg-section (clases de row).
   Todo se ancla a clases que viven DENTRO del Text Block (sí renderizan):
   .sg-hero__inner, .sg-section-head, .sg-step, .sg-card... */
.sg-hero__inner h1,
.sg-section-head h2,
.sg-card__title,
.sg-step h3,
.sg-btn {
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--sg-text);
}


/* ============================================================
   ETIQUETA / EYEBROW
   ============================================================ */
.sg-tag {
  font-family: 'VT323', monospace !important;
  font-size: 19px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sg-primary-lit);
  display: block;
  margin-bottom: 14px;
}
.sg-tag .blink { animation: sg-blink 1.1s steps(1) infinite; }
@keyframes sg-blink { 50% { opacity: 0; } }

/* ============================================================
   BOTONES
   ============================================================ */
.sg-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--sg-cta);
  color: #fff !important;
  padding: 13px 26px;
  border: 0;
  font-size: 17px;
  cursor: pointer;
  margin: var(--sg-px);
  box-shadow:
    var(--sg-px) 0 0 var(--sg-cta),
    calc(var(--sg-px) * -1) 0 0 var(--sg-cta),
    0 var(--sg-px) 0 var(--sg-cta),
    0 calc(var(--sg-px) * -1) 0 var(--sg-cta);
  transition: transform 120ms ease, filter 150ms ease;
}
.sg-btn:hover {
  color: #fff !important;
  filter: brightness(1.12);
  transform: translateY(-2px);
}
.sg-btn:active { transform: translateY(1px); }
.sg-btn svg { width: 17px; height: 17px; }

.sg-btn--ghost {
  background: transparent;
  color: var(--sg-text) !important;
  box-shadow:
    var(--sg-px) 0 0 var(--sg-border),
    calc(var(--sg-px) * -1) 0 0 var(--sg-border),
    0 var(--sg-px) 0 var(--sg-border),
    0 calc(var(--sg-px) * -1) 0 var(--sg-border);
}
.sg-btn--ghost:hover {
  color: var(--sg-primary-lit) !important;
  filter: none;
  box-shadow:
    var(--sg-px) 0 0 var(--sg-primary),
    calc(var(--sg-px) * -1) 0 0 var(--sg-primary),
    0 var(--sg-px) 0 var(--sg-primary),
    0 calc(var(--sg-px) * -1) 0 var(--sg-primary);
}

/* ============================================================
   HERO — anclado a .sg-hero__inner (el row no propaga el_class).
   Glow morado + estrellas + borde inferior = full-bleed vía pseudos
   con width:100vw, sin depender de la clase del row.
   ============================================================ */
.sg-hero__inner {
  position: relative;
  z-index: 0;
  max-width: 840px;
  padding: 90px 0 72px;
}
/* glow morado + estrellas pixel, full-bleed detrás del contenido */
.sg-hero__inner::before {
  content: '';
  position: absolute;
  top: -40px; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  opacity: 1;
  background:
    radial-gradient(900px 420px at 70% -10%, rgba(124, 58, 237, 0.20), transparent 62%),
    radial-gradient(rgba(167, 139, 250, 0.45) 1px, transparent 1px),
    radial-gradient(rgba(226, 232, 240, 0.22) 1px, transparent 1px);
  background-size: auto, 190px 170px, 120px 140px;
  background-position: center top, 10px 20px, 70px 90px;
  pointer-events: none;
}
.sg-hero__inner h1 {
  font-size: clamp(36px, 5.2vw, 60px) !important;
  line-height: 1.12 !important;
  margin: 0 0 24px;
}
.sg-hero__inner h1 .accent { color: var(--sg-primary-lit); }
.sg-hero__inner p {
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--sg-muted);
  max-width: 58ch;
  margin: 0 0 36px;
}
.sg-hero__inner p strong { color: var(--sg-text); font-weight: 600; }
.sg-hero__actions { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 64px; }

/* HUD de stats — cierra el hero. border-top = línea sobre el HUD;
   ::after full-bleed = borde inferior del hero (separa de "Últimas guías"). */
.sg-hud {
  position: relative;
  border-top: 2px solid var(--sg-border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 8px;
  margin-bottom: 0;
}
.sg-hud::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 2px;
  transform: translateX(-50%);
  background: var(--sg-border);
}
.sg-hud__item {
  padding: 24px 28px 38px 0;
  border-right: 2px solid var(--sg-border);
}
.sg-hud__item:last-child { border-right: 0; }
.sg-hud__item + .sg-hud__item { padding-left: 28px; }
.sg-hud__num {
  font-family: 'VT323', monospace;
  font-size: 44px;
  line-height: 1;
  color: var(--sg-text);
  display: block;
  margin-bottom: 4px;
}
.sg-hud__num .u { color: var(--sg-primary-lit); }
.sg-hud__label {
  font-family: 'VT323', monospace;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-muted);
}

/* ============================================================
   SECCIONES
   El espaciado vertical lo da el top_padding/bottom_padding NATIVO
   de cada vc_row (Salient sí lo respeta). La línea divisoria entre
   secciones se ancla a .sg-section-head--line (clase interna que sí
   renderiza), no al el_class del row.
   ============================================================ */
.sg-section-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 42px;
}
/* divisor full-bleed sobre la sección (método / ahora en el sótano) */
.sg-section-head--line::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  width: 100vw;
  height: 2px;
  transform: translateX(-50%);
  background: var(--sg-border);
}
.sg-section-head h2 {
  font-size: clamp(26px, 3.2vw, 36px) !important;
  line-height: 1.2 !important;
  margin: 0;
}
.sg-section-head .sg-tag { margin-bottom: 10px; }

/* ============================================================
   GRID DE SAVE SLOTS (lo genera [sg_guides_grid])
   ============================================================ */
.sg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.sg-card {
  display: flex;
  flex-direction: column;
  background: var(--sg-surface);
  padding: 22px 22px 20px;
  min-height: 218px;
  cursor: pointer;
  margin: var(--sg-px);
  box-shadow:
    var(--sg-px) 0 0 var(--sg-border),
    calc(var(--sg-px) * -1) 0 0 var(--sg-border),
    0 var(--sg-px) 0 var(--sg-border),
    0 calc(var(--sg-px) * -1) 0 var(--sg-border);
  transition: transform 150ms ease, background 180ms ease, box-shadow 180ms ease;
}
.sg-card:hover {
  background: var(--sg-surface-2);
  transform: translateY(-3px);
  box-shadow:
    var(--sg-px) 0 0 var(--sg-primary),
    calc(var(--sg-px) * -1) 0 0 var(--sg-primary),
    0 var(--sg-px) 0 var(--sg-primary),
    0 calc(var(--sg-px) * -1) 0 var(--sg-primary);
}

.sg-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.sg-card__game {
  font-family: 'VT323', monospace;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-muted);
}
.sg-card__save {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--sg-primary-lit);
}
.sg-card__title {
  font-size: 21px !important;
  line-height: 1.28 !important;
  margin: 0 0 20px !important;
  flex: 1;
  transition: color 180ms ease;
  /* títulos largos: máx 3 líneas, el grid no se descuadra (premortem 1, regla 1) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.sg-card:hover .sg-card__title { color: var(--sg-primary-lit) !important; }
/* metadatos legibles sobre surface-2 en hover (premortem 1, regla 5) */
.sg-card:hover .sg-card__game,
.sg-card:hover .sg-card__time,
.sg-card:hover .sg-hp__val { color: #AAB6C8; }

.sg-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 2px solid var(--sg-border);
  padding-top: 14px;
}

/* barra de vida = dificultad (la genera sg_hp_markup en functions.php) */
.sg-hp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sg-hp__blocks { display: inline-flex; gap: 2px; }
.sg-hp__blocks i {
  width: 8px; height: 12px;
  background: var(--sg-bg);
}
.sg-hp--easy i.on { background: var(--sg-d-easy); }
.sg-hp--mid  i.on { background: var(--sg-d-mid); }
.sg-hp--hard i.on { background: var(--sg-d-hard); }
.sg-hp--max  i.on { background: var(--sg-d-max); }
.sg-hp__val {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--sg-muted);
}
.sg-hp--easy .sg-hp__val b { color: var(--sg-d-easy); font-weight: 400; }
.sg-hp--mid  .sg-hp__val b { color: var(--sg-d-mid);  font-weight: 400; }
.sg-hp--hard .sg-hp__val b { color: var(--sg-d-hard); font-weight: 400; }
.sg-hp--max  .sg-hp__val b { color: var(--sg-d-max);  font-weight: 400; }

.sg-card__time {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--sg-muted);
  white-space: nowrap;
}

.sg-empty {
  font-family: 'VT323', monospace;
  font-size: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-muted);
}

/* ============================================================
   EL MÉTODO (3 columnas WPBakery, cada una con un .sg-step)
   ============================================================ */
.sg-step {
  background: var(--sg-surface);
  padding: 24px 24px 22px;
  margin: var(--sg-px);
  height: 100%;
  box-shadow:
    var(--sg-px) 0 0 var(--sg-border),
    calc(var(--sg-px) * -1) 0 0 var(--sg-border),
    0 var(--sg-px) 0 var(--sg-border),
    0 calc(var(--sg-px) * -1) 0 var(--sg-border);
}
.sg-step__num {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 22px;
  color: var(--sg-cta);
  margin-bottom: 10px;
}
.sg-step h3 {
  font-size: 20px !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
}
.sg-step p {
  font-family: 'Rubik', sans-serif;
  color: var(--sg-muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   QUEST LOG (HTML editable en un Text Block)
   ============================================================ */
.sg-quest {
  background: var(--sg-surface);
  padding: 20px 26px;
  margin: var(--sg-px);
  font-family: 'VT323', monospace;
  font-size: 18px;
  line-height: 1.9;
  overflow-x: auto;
  box-shadow:
    var(--sg-px) 0 0 var(--sg-border),
    calc(var(--sg-px) * -1) 0 0 var(--sg-border),
    0 var(--sg-px) 0 var(--sg-border),
    0 calc(var(--sg-px) * -1) 0 var(--sg-border);
}
.sg-quest__head {
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-primary-lit);
  margin-bottom: 8px;
}
.sg-quest .row { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.sg-quest .row > span:nth-child(2) { flex: 1 1 12ch; min-width: 0; } /* nombre: fluye y parte línea, no desborda */
.sg-quest .ok   { color: var(--sg-d-easy); flex: none; }
.sg-quest .wip  { color: var(--sg-d-mid); flex: none; }
.sg-quest .todo { color: var(--sg-muted); flex: none; }
.sg-quest .where { color: var(--sg-muted); margin-left: auto; flex: none; }

/* AHORA EN EL SÓTANO: copy lateral */
.sg-now-copy p {
  font-family: 'Rubik', sans-serif;
  color: var(--sg-muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 48ch;
}
.sg-now-copy p:last-child { margin-bottom: 0; }
.sg-now-copy strong { color: var(--sg-text); }

/* ============================================================
   SLOT DE PUBLICIDAD (para archivo y single, ya listo)
   min-height SIEMPRE reservada = cero CLS.
   ============================================================ */
.sg-adslot { margin: 36px var(--sg-px); }
.sg-adslot__label {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sg-muted);
  opacity: 0.7;
  margin-bottom: 8px;
}
.sg-adslot__box {
  min-height: 280px;
  background: var(--sg-surface);
  display: grid;
  place-items: center;
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--sg-muted);
  box-shadow:
    var(--sg-px) 0 0 var(--sg-border),
    calc(var(--sg-px) * -1) 0 0 var(--sg-border),
    0 var(--sg-px) 0 var(--sg-border),
    0 calc(var(--sg-px) * -1) 0 var(--sg-border);
}

/* ============================================================
   FOOTER (lo renderiza el footer.php del child, no widgets Salient)
   ============================================================ */
#footer-outer {
  background-color: var(--sg-bg) !important;
}
#footer-outer .row,
#footer-outer #footer-widgets,
#footer-outer .copyright { display: none; } /* por si Salient inyecta restos */

.sg-footer {
  border-top: 2px solid var(--sg-border);
  background: var(--sg-bg);
}
.sg-footer__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
}
.sg-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Pixelify Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--sg-text) !important;
}
.sg-footer__logo b { color: var(--sg-primary-lit); font-weight: 700; }
.sg-logo-mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--sg-surface);
  color: var(--sg-primary-lit);
  flex: none;
  margin: 3px 4px;
  box-shadow:
    3px 0 0 var(--sg-primary),
    -3px 0 0 var(--sg-primary),
    0 3px 0 var(--sg-primary),
    0 -3px 0 var(--sg-primary);
}
.sg-logo-mark svg { width: 14px; height: 14px; }

.sg-footer__links { margin-left: auto; }
.sg-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.sg-footer__menu li { margin: 0; }
.sg-footer__menu a {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--sg-muted) !important;
}
.sg-footer__menu a:hover { color: var(--sg-primary-lit) !important; }
.sg-footer__note {
  width: 100%;
  font-family: 'VT323', monospace;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--sg-muted);
  opacity: 0.75;
  margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  .sg-grid { grid-template-columns: repeat(2, 1fr); }
  .sg-hud { grid-template-columns: 1fr; }
  .sg-hud__item {
    border-right: 0;
    border-bottom: 2px solid var(--sg-border);
    padding: 18px 0;
  }
  .sg-hud__item + .sg-hud__item { padding-left: 0; }
  .sg-hud__item:last-child { border-bottom: 0; padding-bottom: 30px; }
}

@media (max-width: 600px) {
  .sg-grid { grid-template-columns: 1fr; }
  .sg-hero__inner { padding-top: 44px; }
  .sg-hero__actions { margin-bottom: 48px; }
  /* Quest log "más pequeño" en móvil: baja font y aprieta padding para que no haga scroll lateral */
  .sg-quest { font-size: 15px; line-height: 1.7; padding: 16px 18px; }
  .sg-quest__head { font-size: 15px; }
  .sg-quest .where, .sg-quest__where { margin-left: 0; width: 100%; } /* la etiqueta cae a su propia línea */
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [class*="sg-"],
  [class*="sg-"]::before,
  [class*="sg-"]::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .sg-tag .blink { animation: none !important; }
}

/* ============================================================
   SINGLE POST — LA GUÍA (diseño Pixel Quest)
   Anclado a clases sg-* del template single.php del child.
   El cuerpo (.sg-prose) = the_content() editable; se auto-estiliza.
   ============================================================ */

.sg-post { padding: 56px 0 30px; }
.sg-post__col { max-width: 780px; margin: 0 auto; }

/* breadcrumbs */
.sg-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: 'VT323', monospace;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sg-muted);
  margin-bottom: 18px;
}
.sg-crumbs a { color: var(--sg-muted); text-decoration: none; }
.sg-crumbs a:hover { color: var(--sg-primary-lit); }
.sg-crumbs .sep { color: var(--sg-border); }
.sg-crumbs [aria-current="page"] { color: var(--sg-text); }

/* eyebrow tag (juego — SAVE) */
.sg-tag {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 19px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sg-primary-lit);
  margin-bottom: 16px;
}

/* título */
.sg-post__title {
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(30px, 4.2vw, 48px) !important;
  line-height: 1.1 !important;
  color: var(--sg-text) !important;
  margin: 0 0 32px !important;
  max-width: 22ch;
}

/* panel de status RPG */
.sg-status {
  background: var(--sg-surface);
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  margin: var(--sg-px) var(--sg-px) 18px;
  box-shadow:
    var(--sg-px) 0 0 var(--sg-border),
    calc(var(--sg-px) * -1) 0 0 var(--sg-border),
    0 var(--sg-px) 0 var(--sg-border),
    0 calc(var(--sg-px) * -1) 0 var(--sg-border);
}
.sg-status__cell {
  padding: 16px 26px 18px;
  border-right: 2px solid var(--sg-border);
}
.sg-status__cell:last-child { border-right: 0; }
.sg-status__cell .sg-hp__val { font-size: 19px; }
.sg-status__label {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-muted);
  margin-bottom: 6px;
}
.sg-status__value {
  font-family: 'VT323', monospace;
  font-size: 21px;
  color: var(--sg-text);
}

/* tiempo de lectura (discreto, fuera del panel) */
.sg-readtime {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'VT323', monospace;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-muted);
  margin: 0 var(--sg-px) 40px;
}
.sg-readtime svg { width: 15px; height: 15px; flex: none; opacity: 0.8; }

/* slot de publicidad (cero CLS) */
.sg-adslot { margin: 36px var(--sg-px); }
.sg-adslot__label {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sg-muted);
  opacity: 0.7;
  margin-bottom: 8px;
}
.sg-adslot__box {
  min-height: 280px;
  background: var(--sg-surface);
  display: grid;
  place-items: center;
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--sg-muted);
  box-shadow:
    var(--sg-px) 0 0 var(--sg-border),
    calc(var(--sg-px) * -1) 0 0 var(--sg-border),
    0 var(--sg-px) 0 var(--sg-border),
    0 calc(var(--sg-px) * -1) 0 var(--sg-border);
}

/* ---------- PROSE (cuerpo editable) ---------- */
.sg-prose {
  /* mismo ancho e inset (var(--sg-px)) que el ad / status / readtime →
     texto, imagen y publicidad quedan alineados al mismo borde */
  max-width: none;
  margin: 0 var(--sg-px);
  font-family: 'Rubik', sans-serif;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--sg-text);
  counter-reset: sg-h2;
}
.sg-prose p { margin: 0 0 1.25em; }

/* h2 auto-numerada: el editor solo escribe el título (##) */
.sg-prose h2 {
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--sg-text) !important;
  margin: 50px 0 18px !important;
  font-size: 27px !important;
  display: flex;
  align-items: baseline;
  gap: 14px;
  counter-increment: sg-h2;
}
.sg-prose h2::before {
  content: counter(sg-h2, decimal-leading-zero);
  font-family: 'VT323', monospace;
  font-weight: 400;
  font-size: 22px;
  color: var(--sg-cta);
  flex: none;
}
.sg-prose h3 {
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 600 !important;
  color: var(--sg-text) !important;
  margin: 34px 0 12px !important;
  font-size: 21px !important;
}
.sg-prose a {
  color: var(--sg-primary-lit);
  text-decoration: underline;
  text-decoration-color: rgba(167, 139, 250, 0.45);
  text-underline-offset: 3px;
}
.sg-prose a:hover { color: var(--sg-text); }
.sg-prose ul, .sg-prose ol { padding-left: 22px; margin: 0 0 1.25em; }
.sg-prose li { margin-bottom: 9px; }
.sg-prose strong { color: var(--sg-text); font-weight: 600; }
.sg-prose em { color: var(--sg-primary-lit); font-style: normal; font-weight: 600; }
.sg-prose code {
  font-family: 'VT323', monospace;
  font-size: 17px;
  background: var(--sg-bg);
  padding: 1px 8px;
  color: var(--sg-d-easy);
  box-shadow: 0 0 0 2px var(--sg-border);
}
.sg-prose img {
  display: block;
  width: 100%;          /* la imagen ocupa el ancho de la columna de texto */
  height: auto;
  box-sizing: border-box;
  box-shadow:
    var(--sg-px) 0 0 var(--sg-border),
    calc(var(--sg-px) * -1) 0 0 var(--sg-border),
    0 var(--sg-px) 0 var(--sg-border),
    0 calc(var(--sg-px) * -1) 0 var(--sg-border);
  margin: 18px 0;       /* solo vertical, ya no desborda la columna */
}
/* imágenes sueltas (sin caption) que WP envuelve en <p>: pega el gap al de figure */
.sg-prose p > img:only-child { margin: 18px 0; }
.sg-prose figure { margin: 18px 0; }
.sg-prose figure img { margin: 0; }
.sg-prose figcaption {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--sg-muted);
  margin-top: 12px;
  text-align: center;
}
.sg-prose blockquote {
  border-left: 4px solid var(--sg-primary);
  margin: 30px var(--sg-px);
  padding: 4px 0 4px 22px;
  color: var(--sg-muted);
  font-style: normal;
}

/* quest log / checklist  → [sg_quest] */
.sg-quest {
  background: var(--sg-surface);
  padding: 20px 26px;
  margin: 30px var(--sg-px);
  font-family: 'VT323', monospace;
  font-size: 18px;
  line-height: 1.9;
  overflow-x: auto;
  box-shadow:
    var(--sg-px) 0 0 var(--sg-border),
    calc(var(--sg-px) * -1) 0 0 var(--sg-border),
    0 var(--sg-px) 0 var(--sg-border),
    0 calc(var(--sg-px) * -1) 0 var(--sg-border);
}
.sg-quest__head {
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-primary-lit);
  margin-bottom: 8px;
}
.sg-quest__row { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.sg-quest__row > span:nth-child(2) { flex: 1 1 12ch; min-width: 0; }
.sg-quest__row .ok { color: var(--sg-d-easy); flex: none; }
.sg-quest__row .wip { color: var(--sg-d-mid); flex: none; }
.sg-quest__row .todo { color: var(--sg-muted); flex: none; }
.sg-quest__where { color: var(--sg-muted); margin-left: auto; flex: none; }

/* caja de diálogo RPG (tip)  → [sg_dialog] */
.sg-dialog {
  background: var(--sg-surface);
  padding: 18px 24px;
  margin: 30px var(--sg-px);
  box-shadow:
    var(--sg-px) 0 0 var(--sg-primary),
    calc(var(--sg-px) * -1) 0 0 var(--sg-primary),
    0 var(--sg-px) 0 var(--sg-primary),
    0 calc(var(--sg-px) * -1) 0 var(--sg-primary);
}
.sg-dialog p { margin: 0 0 1em; }
.sg-dialog p:last-child { margin-bottom: 0; }
.sg-dialog__label {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sg-cta);
  margin-bottom: 8px;
}
.sg-dialog__label::before { content: '» '; }

/* ---------- MÁS GUÍAS DEL MISMO JUEGO ---------- */
.sg-more { border-top: 2px solid var(--sg-border); margin-top: 70px; }
.sg-more__col { max-width: 780px; margin: 0 auto; padding: 58px 0 70px; }
.sg-more h2 {
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--sg-text) !important;
  font-size: 26px !important;
  margin: 0 0 26px !important;
}
.sg-more__list { list-style: none; margin: 0; padding: 0; }
.sg-more__item a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 4px;
  border-bottom: 2px solid var(--sg-border);
  color: var(--sg-text);
  text-decoration: none;
  transition: color 180ms ease, padding-left 200ms ease;
}
.sg-more__item:first-child a { border-top: 2px solid var(--sg-border); }
.sg-more__item a:hover { color: var(--sg-primary-lit); padding-left: 12px; }
.sg-more__item a::before {
  content: '▶';
  font-size: 11px;
  color: var(--sg-border);
  transition: color 180ms ease;
}
.sg-more__item a:hover::before { color: var(--sg-cta); }
.sg-more__item .t {
  font-family: 'Pixelify Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  flex: 1;
  min-width: 220px;
}
.sg-more__item .m {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--sg-muted);
}
.sg-more__item a:hover .m { color: var(--sg-text); }

/* ---------- RESPONSIVE SINGLE ---------- */
@media (max-width: 600px) {
  .sg-post { padding: 36px 0 20px; }
  .sg-status { grid-template-columns: 1fr; }
  .sg-status__cell {
    border-right: 0;
    border-bottom: 2px solid var(--sg-border);
  }
  .sg-status__cell:last-child { border-bottom: 0; }
}

/* ============================================================
   ARCHIVO DE CATEGORÍA / PLATAFORMA (diseño Pixel Quest "Archivo")
   Anclado a clases sg-* de category.php. Reusa sg-grid / sg-card.
   ============================================================ */

.sg-arch-head {
  border-bottom: 2px solid var(--sg-border);
  padding: 64px 0 52px;
  background:
    radial-gradient(700px 300px at 85% -30%, rgba(124, 58, 237, 0.14), transparent 60%),
    var(--sg-bg);
}
.sg-arch-head .sg-crumbs { margin-bottom: 18px; }
.sg-arch-head .sg-tag { display: block; margin-bottom: 18px; }
.sg-arch-head__title {
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--sg-text) !important;
  font-size: clamp(32px, 4.4vw, 52px) !important;
  line-height: 1.05 !important;
  margin: 0 0 16px !important;
}
.sg-arch-head__desc {
  color: var(--sg-muted);
  max-width: 58ch;
  margin: 0;
  font-family: 'Rubik', sans-serif;
}
.sg-arch-head__desc .count {
  font-family: 'VT323', monospace;
  font-size: 1.2em;
  color: var(--sg-primary-lit);
}
.sg-arch-head__seo {
  color: var(--sg-muted);
  max-width: 58ch;
  margin: 12px 0 0;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  opacity: 0.85;
}
.sg-arch-head__seo p { margin: 0; font-size: inherit; }

/* filtros de plataforma (y paginación, que reusa .sg-filters) */
.sg-filters {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.sg-filters a,
.sg-filters .page-numbers {
  font-family: 'VT323', monospace;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-muted);
  background: var(--sg-surface);
  padding: 7px 16px;
  margin: 3px;
  text-decoration: none;
  display: inline-block;
  box-shadow:
    3px 0 0 var(--sg-border),
    -3px 0 0 var(--sg-border),
    0 3px 0 var(--sg-border),
    0 -3px 0 var(--sg-border);
  transition: color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.sg-filters a:hover,
.sg-filters a.page-numbers:hover {
  color: var(--sg-primary-lit);
  box-shadow:
    3px 0 0 var(--sg-primary),
    -3px 0 0 var(--sg-primary),
    0 3px 0 var(--sg-primary),
    0 -3px 0 var(--sg-primary);
}
.sg-filters a.active,
.sg-filters .page-numbers.current {
  color: #fff;
  background: var(--sg-primary);
  box-shadow:
    3px 0 0 var(--sg-primary),
    -3px 0 0 var(--sg-primary),
    0 3px 0 var(--sg-primary),
    0 -3px 0 var(--sg-primary);
}

/* paginación: misma estética, centrada */
.sg-pager { margin-top: 44px; justify-content: center; }

.sg-section { padding: 64px 0 84px; }

.sg-empty {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: var(--sg-muted);
  text-align: center;
  padding: 40px 0;
}

/* ============================================================
   PÁGINA LEGAL / SOBRE (plantilla tpl-legal.php)
   ============================================================ */

.sg-legal { padding: 64px 0 30px; }
.sg-legal__col { max-width: 720px; margin: 0 auto; }
.sg-legal .sg-tag { display: block; margin-bottom: 18px; }
.sg-legal__title {
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--sg-text) !important;
  font-size: clamp(30px, 4.2vw, 46px) !important;
  line-height: 1.08 !important;
  margin: 0 0 12px !important;
}
.sg-legal__sub {
  color: var(--sg-muted);
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  margin: 0 0 42px;
}
.sg-legal__body {
  max-width: 66ch;
  font-family: 'Rubik', sans-serif;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--sg-text);
}
.sg-legal__body p { margin: 0 0 1.25em; }
.sg-legal__body h2 {
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--sg-text) !important;
  font-size: 24px !important;
  margin: 44px 0 14px !important;
}
.sg-legal__body h3 {
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 600 !important;
  color: var(--sg-text) !important;
  font-size: 20px !important;
  margin: 30px 0 12px !important;
}
.sg-legal__body ul,
.sg-legal__body ol { padding-left: 22px; margin: 0 0 1.25em; }
.sg-legal__body li { margin-bottom: 9px; }
.sg-legal__body strong { color: var(--sg-text); font-weight: 600; }
.sg-legal__body a {
  color: var(--sg-primary-lit);
  text-decoration: underline;
  text-decoration-color: rgba(167, 139, 250, 0.45);
  text-underline-offset: 3px;
}
.sg-legal__body a:hover { color: var(--sg-text); }

/* ============================================================
   404 — GAME OVER (diseño Pixel Quest)
   ============================================================ */

.sg-nf {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 72px 28px;
  background:
    radial-gradient(620px 340px at 50% 32%, rgba(124, 58, 237, 0.13), transparent 65%),
    var(--sg-bg);
}
.sg-nf__inner { max-width: 560px; }
.sg-nf__code {
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(64px, 13vw, 120px) !important;
  line-height: 1 !important;
  color: var(--sg-text) !important;
  margin: 0 0 6px !important;
}
.sg-nf__code .accent { color: var(--sg-primary-lit); }
.sg-nf__title {
  font-family: 'Pixelify Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 5vw, 40px);
  color: var(--sg-cta);
  margin: 0 0 18px;
}
.sg-nf__text {
  color: var(--sg-muted);
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  max-width: 42ch;
  margin: 0 auto 30px;
}
.sg-nf__continue {
  font-family: 'VT323', monospace;
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sg-text);
  margin: 0 0 26px;
}
.sg-nf__continue .blink {
  color: var(--sg-primary-lit);
  animation: sg-blink 1.1s steps(1) infinite;
}
@keyframes sg-blink { 50% { opacity: 0; } }