/* =====================================================================
   PUENTE DE TOKENS MOONSHARD + VARIANTES DE FONDO
   - Valores de marca: /assets/css/design-tokens.css (equipo Visual, marca/web/).
     NO editar ese archivo; este solo mapea los nombres usados por styles.css.
   - Fondo definitivo: <html class="fondo-c con-textura" data-theme="light"> (variante C
     con textura, elegida por Astharot el 2 nov 2026). A y B archivadas en moonshard_backup_v3.
   ===================================================================== */
:root{
  --bg:var(--ms-bg); --bg2:var(--ms-surface); --card:var(--ms-surface-2); --line:var(--ms-border);
  --text:var(--ms-text); --text-body:var(--ms-text); --muted:var(--ms-text-muted);
  --accent:var(--ms-accent); --accent-strong:var(--ms-accent-strong); --accent-soft:var(--ms-link);
  --on-accent:var(--ms-on-accent);
  --accent-glow:rgba(125,87,175,.22);
  --brand-purple-700:var(--ms-morado-profundo); --brand-purple-300:var(--ms-morado-300);
  --font-body:var(--ms-font-body); --font-display:var(--ms-font-display); --font-mono:var(--ms-font-mono);
  --radius:var(--ms-radius-md);
  /* Pendientes (funcional, no marca) */
  --pending:var(--ms-alerta); --pending-text:#F7CF7A; --pending-bg:rgba(242,179,61,.08);
  /* Categorías editorial (Visual): valor oscuro en zonas moradas, claro en zonas claras */
  --ms-cat-tecnologia:#5BB8F0; --ms-cat-datos:#3CC9B4; --ms-cat-podcast:#F2915F;
  --ms-cat-tecnologia-claro:#09608F; --ms-cat-datos-claro:#0B6E62; --ms-cat-podcast-claro:#A3461A;
  --ms-bruma-a:#B5B0C6;
  --cat-tecnologia:var(--ms-cat-tecnologia);
  --cat-datos:var(--ms-cat-datos);
  --cat-podcast:var(--ms-cat-podcast);
  --header-bg:rgba(14,11,20,.85);
  --section-alt:rgba(14,11,20,.35);
}
  --pending-text:#7A4A00; --pending-bg:#FFF6E0; --pending:#B7791F;
  --ms-cat-tecnologia:var(--ms-cat-tecnologia-claro); --ms-cat-datos:var(--ms-cat-datos-claro); --ms-cat-podcast:var(--ms-cat-podcast-claro);
  /* Texto de categoría en B solo sobre superficie blanca (tarjetas). Datos/Podcast en #E6DDF4 quedan a 4,68/4,64: no usar ahí. */
  --header-bg:rgba(255,255,255,.88);
  --section-alt:rgba(244,240,250,.6);
}
.logo-img img.logo-claro{display:none}
/* ---------- VARIANTE C: morado → gris claro (zonas con su propio texto) ----------
   html class="fondo-c" data-theme="light". Zona oscura (cabecera, hero, cabecera de página): texto claro, logo _oscuro.
   El degradado funde a gris claro solo en el relleno inferior del hero (sin texto). Resto: texto oscuro, logo _claro. */
.fondo-c{
  color-scheme:light;
  --ms-bg:#ECEBEF; --ms-surface:#FFFFFF; --ms-surface-2:#FFFFFF;
  --ms-border:#D6D3DE; --ms-text:var(--ms-tinta); --ms-text-muted:#4F4A5E;
  --ms-accent:var(--ms-morado-profundo); --ms-accent-strong:var(--ms-morado-700); --ms-on-accent:#FFFFFF;
  --ms-link:var(--ms-morado-profundo);
  --ms-cat-tecnologia:var(--ms-cat-tecnologia-claro); --ms-cat-datos:var(--ms-cat-datos-claro); --ms-cat-podcast:var(--ms-cat-podcast-claro);
  --accent-glow:rgba(157,117,205,.14);
  --c-morado-1:#3C265C; --c-morado-2:#4A3270; --c-gris:#E7E6EA;
  --page-bg:linear-gradient(180deg,#E7E6EA 0%,#EEEDF1 45%,#F5F5F7 100%);
  --pending-text:#7A4A00; --pending-bg:#FFF6E0; --pending:#B7791F;
  --header-bg:rgba(48,32,74,.94);
  --section-alt:rgba(255,255,255,.55);
}
.fondo-c :is(.header,.hero,.page-head){
  --text:#ECEAF2; --text-body:#ECEAF2; --muted:#ECEAF2; /* Visual: con degradado más claro, texto secundario #ECEAF2 */
  --line:rgba(236,234,242,.22); --accent:#9D75CD; --accent-strong:#7D57AF; --accent-soft:#C9B3E8; --on-accent:#0E0B14;
  --card:rgba(14,11,20,.35); --accent-glow:rgba(157,117,205,.28);
  --pending-text:#F7CF7A; --pending-bg:rgba(14,11,20,.45); --pending:#F2B33D;
  --cat-tecnologia:#5BB8F0; --cat-datos:#3CC9B4; --cat-podcast:#F2915F;
  color:var(--text);
}
.fondo-c .hero{background:radial-gradient(ellipse at top right,var(--accent-glow),transparent 60%),linear-gradient(180deg,var(--c-morado-1) 0%,var(--c-morado-2) calc(100% - 3.5rem),var(--c-gris) 100%)}
.fondo-c .page-head{background:radial-gradient(ellipse at top right,var(--accent-glow),transparent 60%),linear-gradient(180deg,var(--c-morado-1) 0%,var(--c-morado-2) calc(100% - 1.6rem),var(--c-gris) 100%)}
.fondo-c .logo-img img.logo-oscuro{display:none}
.fondo-c .logo-img img.logo-claro{display:block}
.fondo-c .header .logo-img img.logo-oscuro{display:block}
.fondo-c .header .logo-img img.logo-claro{display:none}
.fondo-c .post{background:#FFFFFF}
/* ---------- Modificador con-textura (sobre fondo-c) ----------
   Capa sutil (3–6 %) como primera capa de fondo: debajo del contenido, sin pointer-events ni repintados. */
.con-textura{--tex-oscuro:url(/assets/img/textura/grano-sombra.svg); --tex-claro:url(/assets/img/textura/grano-oscuro.svg); --tex-size:180px}
.con-textura.fondo-c body{background:var(--tex-claro) 0 0/var(--tex-size) repeat,var(--page-bg)}
.con-textura.fondo-c .hero{background:var(--tex-oscuro) 0 0/var(--tex-size) repeat,radial-gradient(ellipse at top right,var(--accent-glow),transparent 60%),linear-gradient(180deg,var(--c-morado-1) 0%,var(--c-morado-2) calc(100% - 3.5rem),var(--c-gris) 100%)}
.con-textura.fondo-c .page-head{background:var(--tex-oscuro) 0 0/var(--tex-size) repeat,radial-gradient(ellipse at top right,var(--accent-glow),transparent 60%),linear-gradient(180deg,var(--c-morado-1) 0%,var(--c-morado-2) calc(100% - 1.6rem),var(--c-gris) 100%)}
/* ---------- Menú en fondo-c (fix 2 nov 2026) ----------
   Causa: en .header --muted/--text = #ECEAF2 (claro) y el desplegable móvil usa --bg2 = #FFFFFF → texto blanco sobre blanco.
   Escritorio (cabecera oscura): plata #E8E6E1; actual/hover: blanco + subrayado.
   Móvil (desplegable claro): morado de marca #3C265C; hover/actual: morado más vivo #5B3A8C + subrayado. */
.fondo-c .header .nav-links a:not(.btn){color:#E8E6E1;text-underline-offset:.3em;text-decoration-thickness:2px}
.fondo-c .header .nav-links a:not(.btn):hover{color:#FFFFFF;text-decoration-line:underline}
.fondo-c .header .nav-links a:not(.btn)[aria-current]{color:#FFFFFF;font-weight:700;text-decoration-line:underline;text-decoration-color:#C9B3E8}
@media (max-width:900px){
  .fondo-c .header .nav-links{background:#FFFFFF;border-bottom-color:#D6D3DE;box-shadow:0 8px 20px rgba(14,11,20,.18)}
  .fondo-c .header .nav-links a:not(.btn){color:#3C265C}
  .fondo-c .header .nav-links a:not(.btn):hover{color:#5B3A8C;text-decoration-line:underline}
  .fondo-c .header .nav-links a:not(.btn)[aria-current]{color:#5B3A8C;font-weight:700;text-decoration-line:underline;text-decoration-color:#5B3A8C}
}