/* Informes Creative Signals (tag `Creative Signals`, slug `creative-signals`).
 *
 * Implementa el contrato de marcado de docs/creative-signals-contract.md (v2). El
 * cuerpo de estos posts lo genera un flujo automatizado, no el editor, y emite
 * solo el vocabulario que hay aquí: si aparece una clase que este fichero no
 * conoce, el contrato se extiende primero (ver §11 del documento).
 *
 * Todo cuelga de `.mag-creative-signals` para aislar el informe del resto del blog,
 * y todos los colores y tamaños salen de los tokens del theme (tokens.css), no
 * de valores sueltos: así el informe sigue al blog si el design system cambia.
 *
 * Los tamaños de la escala de Magnific están medidos sobre el diseño de
 * referencia, no copiados de Tailwind: 28px en un h2 de sección, 32 en el mayor.
 *
 * Se carga solo en los posts con la tag (ver default.hbs).
 */

.mag-creative-signals {
  /* El ámbar de advertencia viene de Perita; el blog no tenía tokens de alerta
     porque no los necesitaba. Se declaran aquí, acotados, en vez de engordar
     tokens.css con dos colores que solo usa un recuadro. */
  --bm-caveat-surface: rgb(253 248 234);
  --bm-caveat-accent: rgb(231 173 22);
  /* Color de serie por defecto, cuando un bloque no trae `--serie`. */
  --serie: var(--color-surface-border-alpha-2);

  color: var(--color-surface-foreground-1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ *
 * Reseteo acotado
 *
 * Dos frentes: los elementos que el informe usa con estructura propia
 * (tablas, listas de definición, figuras) y las reglas de prosa del theme
 * que entran por descendencia — `.article__body > h2` no llega porque el
 * informe va anidado, pero `.article__body ul` o `a` sí.
 * ------------------------------------------------------------------ */

/* Ojo con la especificidad: el theme estila la prosa del post con reglas de
   clase + elemento (`.article__body ul`, `.article__body a:not(.ds-btn)`), que
   ganan a una sola clase por muy específica que parezca su nombre. Por eso
   algunos selectores de aquí van repetidos: es lo que los pone por encima sin
   recurrir a !important. */

.mag-creative-signals *,
.mag-creative-signals *::before,
.mag-creative-signals *::after {
  box-sizing: border-box;
}

.mag-creative-signals figure,
.mag-creative-signals dl,
.mag-creative-signals dd,
.mag-creative-signals dt,
.mag-creative-signals blockquote {
  margin: 0;
}

.mag-creative-signals .mag-creative-signals__kpis,
.mag-creative-signals .mag-creative-signals__legend,
.mag-creative-signals .mag-creative-signals__downloads {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Empata en especificidad con `.article__body a:not(.ds-btn)` del theme (0,2,1)
   y gana por orden: creative-signals.css se carga después de main.css. El
   `font-weight` va explícito porque esa regla pone semibold a todo enlace de la
   prosa, y en un informe eso deja los enlaces de descarga en negrita. */
.mag-creative-signals a:not(.ds-btn) {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mag-creative-signals a:not(.ds-btn):hover {
  color: var(--color-surface-foreground-accent-0);
}

.mag-creative-signals code {
  font-family: var(--font-mono);
  font-feature-settings: var(--font-feature-settings-monospace);
  font-size: 0.9em;
  background: none;
  padding: 0;
  color: inherit;
}

/* ------------------------------------------------------------------ *
 * Ritmo vertical
 *
 * Lo pone el theme a propósito: el flujo emite estructura, no márgenes, así
 * dos informes distintos no respiran distinto. Se usa `> * + *` para no tener
 * que enumerar cada combinación de bloques.
 * ------------------------------------------------------------------ */

.mag-creative-signals > * + * {
  margin-top: 56px;
}

.mag-creative-signals__section > * + * {
  margin-top: 20px;
}

.mag-creative-signals__section > h2 + *,
.mag-creative-signals__section > .mag-creative-signals__section-index + h2 {
  margin-top: 12px;
}

/* Los bloques visuales respiran más que el texto. `__matrix` entra en la lista
   porque el contrato (§7c) permite emitirla suelta, sin figura; y `.table-wrap`
   porque theme.js envuelve toda tabla del post en un div con esa clase, así que
   una matriz suelta acaba siendo `section > div.table-wrap > table` y el margen
   tiene que caer en el envoltorio, no en la tabla. */
.mag-creative-signals__section > .mag-creative-signals__figure,
.mag-creative-signals__section > .mag-creative-signals__callout,
.mag-creative-signals__section > .mag-creative-signals__table-wrap,
.mag-creative-signals__section > .mag-creative-signals__matrix,
.mag-creative-signals__section > .mag-creative-signals__bars,
.mag-creative-signals__section > .table-wrap {
  margin-top: 32px;
}

/* ------------------------------------------------------------------ *
 * §3 Entradilla
 * ------------------------------------------------------------------ */

/* La entradilla se separa del cuerpo con un filete, como en la referencia: es
   lo que marca dónde acaba el resumen y empieza el informe. */
.mag-creative-signals__intro {
  display: block;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-surface-border-alpha-1);
}

.mag-creative-signals__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-surface-foreground-3);
}

/* Los tramos del rótulo se separan con punto medio, sin escribirlo en el HTML:
   el separador es presentación, no contenido. */
.mag-creative-signals__eyebrow span::before {
  content: "·";
  margin: 0 0.6em;
  color: var(--color-surface-foreground-4);
}

.mag-creative-signals__lede {
  margin: 12px 0 0;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-surface-foreground-0);
  max-width: 62ch;
}

.mag-creative-signals__standfirst {
  margin: 16px 0 0;
  max-width: 68ch;
  color: var(--color-surface-foreground-2);
}

/* Tarjetas de cifras. Dos a cuatro: con más no caben en la columna de lectura. */
.mag-creative-signals .mag-creative-signals__kpis {
  margin-top: 32px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .mag-creative-signals .mag-creative-signals__kpis {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.mag-creative-signals__kpi {
  padding: 16px;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-border-alpha-1);
  /* El borde superior identifica la serie. Sin `--serie` sale neutro, que es un
     resultado válido: se pierde la asociación, no el dato. */
  border-top: 2px solid var(--serie);
  border-radius: 8px;
}

.mag-creative-signals__kpi-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-surface-foreground-3);
}

.mag-creative-signals__kpi-value {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-surface-foreground-0);
}

.mag-creative-signals__kpi-delta {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--color-surface-foreground-2);
}

.mag-creative-signals__kpi-note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-surface-foreground-4);
}

/* ------------------------------------------------------------------ *
 * §5 Secciones
 * ------------------------------------------------------------------ */

/* El header del blog es sticky: sin este hueco, saltar desde el índice deja el
   titular debajo de la barra. Va en los encabezados y no solo en la sección
   porque `theme.js` pone el `id` en los `h2` y el índice enlaza ahí. */
.mag-creative-signals__section,
.mag-creative-signals h2,
.mag-creative-signals h3 {
  scroll-margin-top: 112px;
}

.mag-creative-signals__section-index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-surface-foreground-4);
}

.mag-creative-signals__section > h2 {
  font-size: 28px;
  line-height: 1.375;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-surface-foreground-0);
}

.mag-creative-signals__section > h3 {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-surface-foreground-0);
}

.mag-creative-signals__section p {
  max-width: 68ch;
}

.mag-creative-signals__section > ul,
.mag-creative-signals__section > ol {
  max-width: 68ch;
  padding-left: 20px;
}

/* El theme convierte toda lista de la prosa en un flex column con gap. Se
   devuelven a flujo normal para que el ritmo lo marque `li + li`. */
.mag-creative-signals .mag-creative-signals__section > ul,
.mag-creative-signals .mag-creative-signals__section > ol,
.mag-creative-signals .mag-creative-signals__panel ul,
.mag-creative-signals .mag-creative-signals__panel ol {
  display: block;
  gap: normal;
}

.mag-creative-signals__section > ul { list-style: disc; }
.mag-creative-signals__section > ol { list-style: decimal; }
/* Solo las listas de prosa de la sección. Sin el `>`, esto alcanzaba a
   cualquier `li` de dentro —las filas de un ranking, las claves de una
   leyenda—, que se separan con `gap` y acababan con 6px de más encima. */
.mag-creative-signals__section > ul > li + li,
.mag-creative-signals__section > ol > li + li { margin-top: 6px; }

/* ------------------------------------------------------------------ *
 * §4 Gráficos
 * ------------------------------------------------------------------ */

/* Prefijado: `.article__body figcaption` de koenig.css lo centra y le pone su
   propio tamaño, y es clase + elemento (0,1,1). El pie de una figura de informe
   se alinea a la izquierda como el resto del texto. */
.mag-creative-signals .mag-creative-signals__figure-head {
  display: block;
  margin: 0 0 10px;
  text-align: left;
  font-size: inherit;
}

.mag-creative-signals__figure-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-surface-foreground-4);
}

.mag-creative-signals__figure-title {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-surface-foreground-0);
}

.mag-creative-signals__figure-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.3;
  color: var(--color-surface-foreground-3);
}

/* El marco del gráfico y su ancho mínimo.
 *
 * Sin `min-width` el SVG se encoge con la columna y sus etiquetas de 10px
 * acaban ilegibles en móvil: un gráfico a 340px pinta su texto a ~4px. Con él,
 * el marco desborda y scrollea, que es lo que hace la landing de referencia.
 * Ojo: si se quita el mínimo, el `overflow-x` de aquí abajo es código muerto,
 * porque un SVG a `width: 100%` nunca puede desbordar a su contenedor.
 *
 * Dos niveles en vez de un valor por gráfico, porque esto es vocabulario del
 * contrato y no un estilo suelto. Se redondea hacia arriba: antes scrollear de
 * más que encoger las etiquetas. */
.mag-creative-signals__chart {
  padding: 16px;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-border-alpha-1);
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mag-creative-signals__chart svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 520px;
  font-family: var(--font-mono);
  font-feature-settings: var(--font-feature-settings-monospace);
}

/* Para gráficos con más series o etiquetas más largas. */
.mag-creative-signals__chart--wide svg {
  min-width: 600px;
}

/* Tinta del gráfico. Los ejes, la rejilla y las etiquetas de serie pintan con
   `currentColor`, así que el color se decide aquí y sigue saliendo de los
   tokens del blog. Los colores de los datos van en el propio SVG (`fill`), que
   es donde deben estar: son dato, no tema. */
.mag-creative-signals__chart .is-eje { color: var(--color-surface-foreground-3); }
.mag-creative-signals__chart .is-rejilla { color: var(--color-surface-foreground-4); }
.mag-creative-signals__chart .is-serie { color: var(--color-surface-foreground-2); }

/* `flex-direction` va explícito: `.article__body ul` del theme pone `column` a
   toda lista de la prosa, y declarar solo `display: flex` dejaba la leyenda
   apilada en vertical en vez de fluir en una fila que envuelve. */
.mag-creative-signals .mag-creative-signals__legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.15;
  color: var(--color-surface-foreground-2);
}

.mag-creative-signals .mag-creative-signals__legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mag-creative-signals .mag-creative-signals__legend li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--serie);
}

.mag-creative-signals .mag-creative-signals__legend span {
  color: var(--color-surface-foreground-4);
}

/* La descripción larga del gráfico: sustituye al SVG para quien no lo ve, así
   que no se oculta con display:none — los lectores de pantalla la saltarían. */
.mag-creative-signals__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ *
 * §6 Recuadros
 * ------------------------------------------------------------------ */

.mag-creative-signals__callout {
  padding: 16px 20px;
  border-left: 2px solid var(--color-surface-border-alpha-2);
  border-radius: 0 8px 8px 0;
  background: var(--color-surface-2);
}

.mag-creative-signals__callout p {
  margin: 0;
  max-width: 66ch;
}

.mag-creative-signals__callout p + p {
  margin-top: 10px;
}

.mag-creative-signals__callout-label {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-surface-foreground-3);
  margin-bottom: 8px !important;
}

/* Cómo leer el dato de al lado. */
.mag-creative-signals__callout--reading {
  border-left-color: var(--color-emphasis-0);
}

/* Qué NO concluir. Es el que evita que una cifra se lea de más, así que se
   distingue del anterior a simple vista. */
.mag-creative-signals__callout--caveat {
  border-left-color: var(--bm-caveat-accent);
  background: var(--bm-caveat-surface);
}

/* ------------------------------------------------------------------ *
 * §7 Tablas
 * ------------------------------------------------------------------ */

.mag-creative-signals__table-intro {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-surface-foreground-3);
  max-width: 68ch;
}

.mag-creative-signals__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mag-creative-signals__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
}

/* Prefijado para ganar a `.article__body table th|td` de koenig.css, que es
   clase + dos elementos (0,1,2): sin esto las celdas se quedan con su padding
   de 10px y su borde, y la tabla del informe deja de ser nuestra. */
.mag-creative-signals .mag-creative-signals__table th,
.mag-creative-signals .mag-creative-signals__table td {
  padding: 8px 12px 8px 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--color-surface-border-alpha-1);
}

.mag-creative-signals .mag-creative-signals__table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-surface-foreground-3);
  white-space: nowrap;
}

.mag-creative-signals .mag-creative-signals__table td {
  color: var(--color-surface-foreground-1);
}

.mag-creative-signals .mag-creative-signals__table tbody tr:last-child td {
  border-bottom: 0;
}

/* Cifras a la derecha y tabulares: es lo que permite comparar una columna de
   porcentajes de un vistazo en vez de leerla número a número. */
.mag-creative-signals .mag-creative-signals__table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: 0;
}

/* ------------------------------------------------------------------ *
 * §7b Ranking de barras
 *
 * Tres columnas: etiqueta, barra y valor. El ancho de la barra es el dato
 * (`--valor`), no una decisión de diseño, por eso viaja en el marcado.
 * ------------------------------------------------------------------ */

.mag-creative-signals .mag-creative-signals__bars {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 420px;
}

.mag-creative-signals__bars li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr 3.5rem;
  align-items: center;
  gap: 12px;
}

.mag-creative-signals__bar-label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.3;
  color: var(--color-surface-foreground-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mag-creative-signals__bar-track {
  display: block;
  height: 16px;
  background: var(--color-surface-2);
  border-radius: 0 2px 2px 0;
  overflow: hidden;
}

.mag-creative-signals__bar-fill {
  display: block;
  height: 100%;
  width: var(--valor, 0%);
  background: var(--serie);
  border-radius: 0 2px 2px 0;
}

.mag-creative-signals__bar-value {
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-surface-foreground-1);
}

/* ------------------------------------------------------------------ *
 * §7c Matriz
 *
 * Es una tabla de verdad, no una rejilla de divs: los datos son tabulares y
 * así se leen con lector de pantalla y se navegan con teclado. El color de
 * cada celda es el dato (`--celda`), calculado por quien produce el informe.
 * ------------------------------------------------------------------ */

.mag-creative-signals .mag-creative-signals__matrix {
  width: 100%;
  min-width: 600px;
  border-collapse: separate;
  border-spacing: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.mag-creative-signals .mag-creative-signals__matrix th {
  padding: 0 6px 6px 0;
  font-size: 9.5px;
  font-weight: 400;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-surface-foreground-2);
  border: 0;
}

/* La cabecera de cada fila es el modelo: se lee a la izquierda. */
.mag-creative-signals .mag-creative-signals__matrix tbody th {
  padding-right: 12px;
  font-size: 10px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11rem;
}

.mag-creative-signals .mag-creative-signals__matrix td {
  height: 32px;
  padding: 0 4px;
  text-align: center;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  border: 0;
  border-radius: 2px;
  background: var(--celda, var(--color-surface-2));
  color: var(--celda-tinta, var(--color-surface-foreground-4));
}

.mag-creative-signals__swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 2px;
  background: var(--serie);
}

.mag-creative-signals__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--color-surface-2);
  font-size: 9.5px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-surface-foreground-3);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * §8 Metodología
 * ------------------------------------------------------------------ */

.mag-creative-signals__section--method {
  padding-top: 32px;
  border-top: 1px solid var(--color-surface-border-alpha-1);
  color: var(--color-surface-foreground-2);
}

/* Tarjeta dentro de la metodología. El filete y el fondo son los que separan un
   criterio del siguiente cuando el texto es denso y todo se parece. */
.mag-creative-signals__panel {
  padding: 20px;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-border-alpha-1);
  border-radius: 8px;
}

.mag-creative-signals__panel > * + * {
  margin-top: 12px;
}

.mag-creative-signals__panel h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-surface-foreground-0);
}

.mag-creative-signals__panel p,
.mag-creative-signals__panel li {
  font-size: 14px;
  line-height: 1.6;
}

.mag-creative-signals__panel ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}

/* Mismo motivo que en la sección: acotado a las listas del panel. */
.mag-creative-signals__panel ul > li + li,
.mag-creative-signals__panel ol > li + li {
  margin-top: 6px;
}

.mag-creative-signals .mag-creative-signals__defs {
  display: grid;
  gap: 12px 24px;
}

@media (min-width: 768px) {
  .mag-creative-signals .mag-creative-signals__defs {
    grid-template-columns: minmax(0, 11rem) 1fr;
  }
}

.mag-creative-signals .mag-creative-signals__defs dt {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-surface-foreground-3);
}

.mag-creative-signals .mag-creative-signals__defs dd {
  font-size: 14px;
  line-height: 1.6;
  max-width: 66ch;
}

/* Un dt con varios dd: el segundo y siguientes se alinean bajo el primero. */
@media (min-width: 768px) {
  .mag-creative-signals .mag-creative-signals__defs dd + dd {
    grid-column: 2;
  }
}

/* ------------------------------------------------------------------ *
 * §9 Cita y datos
 * ------------------------------------------------------------------ */

.mag-creative-signals__cite {
  padding-top: 32px;
  border-top: 1px solid var(--color-surface-border-alpha-1);
}

.mag-creative-signals__cite > h2 {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-surface-foreground-0);
  margin: 0;
}

/* Prefijado: `.article__body blockquote` lo deja en cursiva, con borde de 3px y
   24px de sangría. Una cita de informe es una frase citable, no un destacado
   literario: recta y con el filete fino del resto del bloque. */
.mag-creative-signals .mag-creative-signals__quote {
  font-style: normal;
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid var(--color-surface-border-alpha-2);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-surface-foreground-1);
  max-width: 62ch;
}

.mag-creative-signals .mag-creative-signals__downloads {
  margin-top: 16px;
  display: grid;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * El informe es un diseño de fondo claro, como su referencia: el blanco de las
 * tarjetas y los grises de las superficies son parte de la lectura del dato. Si
 * algún día entra el modo oscuro del blog (TASKS.md), este bloque se queda en
 * claro a propósito, como hace la landing con `forceLightTheme`.
 * ------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  .mag-creative-signals {
    color-scheme: light;
  }
}