/* ============================================================
   BLOGSDIF.CSS — RD Consulting / Posiciona y Convierte
   Versión 1.0 | Junio 2026
   ============================================================

   ARQUITECTURA DE ARCHIVOS
   ─────────────────────────────────────────────────────────────
   visibilidad.css  →  Variables globales del sistema
                       (--color-primary, --font-heading, etc.)
   medias.css       →  Media queries globales del sistema
   blogsdif.css     →  Este archivo. Clases fijas para todos
                       los blogs. No se modifica por artículo.
   <style> interno  →  Variaciones únicas por artículo.
                       Ver sección "VARIACIÓN POR ARTÍCULO"
                       al final de este archivo.

   REGLA FUNDAMENTAL
   ─────────────────────────────────────────────────────────────
   Este archivo NO se edita al crear un nuevo blog.
   Las únicas diferencias entre blogs van en el <style>
   interno del HTML de cada artículo.

   ============================================================ */

/* ============================================================
   01 | VARIABLES BASE
   ============================================================ */

:root {
  /* Fondo editorial */
  --article-bg: #f8f5ef;
  --article-bg-soft: #fbfaf7;
  --article-surface: rgba(255, 255, 255, 0.72);
  --article-surface-solid: #ffffff;

  /* Texto */
  --article-text: #343941;
  --article-muted: #687684;
  --article-heading: var(--color-primary, #14304b);

  /* Bordes */
  --article-border: rgba(91, 117, 137, 0.18);
  --article-border-strong: rgba(91, 117, 137, 0.28);

  /* Acento — se sobreescribe por artículo en el <style> interno */
  --article-accent: var(--color-secondary, #2f6da4);
  --article-accent-soft: rgba(47, 109, 164, 0.12);

  /* Medidas editoriales */
  --article-max: 760px; /* ancho máximo del cuerpo de lectura */
  --article-wide: 1080px; /* ancho máximo de elementos extendidos */

  /* Radios */
  --article-radius-pill: var(--radius-pill, 999px);
  --article-radius-lg: var(--radius-lg, 18px);
  --article-radius-xl: var(--radius-xl, 28px);

  /* Tipografía — hereda del sistema si las variables existen */
  --article-font-body: var(
    --font-body,
    "Hanken Grotesk",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif
  );

  --article-font-heading: var(
    --font-heading,
    "Fraunces",
    Georgia,
    "Times New Roman",
    serif
  );

  --article-font-mono: var(
    --font-mono,
    "IBM Plex Mono",
    ui-monospace,
    SFMono-Regular,
    Consolas,
    "Liberation Mono",
    monospace
  );

  /* Orbe de fondo — posición y tamaño del degradado radial sutil.
     Se sobreescribe por artículo en el <style> interno. */
  --article-bg-orb-x: 12%;
  --article-bg-orb-y: 8%;
  --article-bg-orb-size: 28%;
}

/* ============================================================
   02 | RESET Y BASE DE PÁGINA
   ============================================================ */

html {
  scroll-behavior: smooth;
}

.article-page,
.article-page *,
.article-page *::before,
.article-page *::after {
  box-sizing: border-box;
}

.article-page {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(
      circle at var(--article-bg-orb-x) var(--article-bg-orb-y),
      var(--article-accent-soft) 0%,
      transparent var(--article-bg-orb-size)
    ),
    linear-gradient(
      180deg,
      var(--article-bg) 0%,
      var(--article-bg-soft) 42%,
      var(--article-bg) 100%
    );
  color: var(--article-text);
  font-family: var(--article-font-body);
  font-size: 18px;
  line-height: 1.78;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.article-page main {
  padding-top: 0;
}

/* Links globales dentro de la página */
.article-page a {
  color: inherit;
  text-decoration: none;
}

/* Imágenes y medios */
.article-page img,
.article-page svg,
.article-page video {
  max-width: 100%;
}

.article-page img {
  height: auto;
}

/* Focus visible — accesibilidad */
.article-page :where(a, button):focus-visible {
  outline: 2px solid var(--article-accent);
  outline-offset: 4px;
}

/* Selección de texto */
.article-page ::selection {
  background: var(--article-accent-soft);
  color: var(--article-heading);
}

/* ============================================================
   03 | ACCESIBILIDAD
   ============================================================ */

/* Skip link — aparece al tabular desde teclado */
.article-skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 999;
  transform: translateY(-140%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: var(--article-radius-pill);
  background: var(--article-heading);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  transition: transform 180ms ease;
}

.article-skip-link:focus {
  transform: translateY(0);
}

/* Elemento visualmente oculto pero legible por lectores de pantalla */
.article-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   04 | NAVBAR
   ============================================================ */

.article-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition:
    background-color 240ms ease,
    border-color 240ms ease;
}

/* Estado al hacer scroll — añadido por JS */
.article-nav.is-scrolled {
  border-bottom: 1px solid rgba(91, 117, 137, 0.14);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}

.article-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(100% - 32px, 1080px);
  min-height: 54px;
  margin-inline: auto;
}

.article-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: var(--article-radius-pill);
  color: rgba(249, 250, 251, 0.82);
  font-family: var(--article-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.article-nav__link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transform: translateY(-1px);
}

.article-nav__link--current,
.article-nav__link--next {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Cuando el navbar es sólido — links oscuros */
.article-nav.is-scrolled .article-nav__link {
  color: var(--article-muted);
}

.article-nav.is-scrolled .article-nav__link:hover {
  background: rgba(20, 48, 75, 0.055);
  color: var(--article-heading);
}

.article-nav.is-scrolled .article-nav__link--current,
.article-nav.is-scrolled .article-nav__link--next {
  background: rgba(20, 48, 75, 0.055);
  color: var(--article-heading);
  border: 1px solid rgba(20, 48, 75, 0.1);
}

/* ============================================================
   05 | BREADCRUMB
   ============================================================ */

.article-breadcrumb {
  width: min(100% - 40px, var(--article-wide));
  margin: 0 auto;
  padding-top: 24px;
}

.article-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--article-muted);
  font-family: var(--article-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.article-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.article-breadcrumb__item + .article-breadcrumb__item::before {
  content: "/";
  color: rgba(91, 117, 137, 0.52);
}

.article-breadcrumb a {
  color: var(--article-muted);
}

.article-breadcrumb a:hover {
  color: var(--article-heading);
}

/* ============================================================
   06 | CONTENEDORES EDITORIALES
   ============================================================ */

/* Contenedor ancho — para hero, imágenes extendidas y paginación */
.article-shell {
  width: min(100% - 40px, var(--article-wide));
  margin-inline: auto;
}

/* Contenedor de lectura — para cuerpo del artículo */
.article-readable {
  width: min(100%, var(--article-max));
  margin-inline: auto;
}

/* ============================================================
   07 | HERO DEL ARTÍCULO
   ============================================================ */

.article-hero {
  padding: 72px 0 46px;
}

/* Eyebrow — etiqueta de categoría sobre el título */
.article-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: var(--article-accent);
  font-family: var(--article-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.article-hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--article-accent);
}

/* Título H1 */
.article-hero__title {
  max-width: 880px;
  margin: 0;
  color: var(--article-heading);
  font-family: var(--article-font-heading);
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-align: left;
  text-wrap: balance;
}

/* Lead — frase introductoria bajo el título */
.article-hero__lead {
  max-width: 720px;
  margin: 26px 0 0;
  color: var(--article-text);
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.62;
  text-align: left;
}

/* Metadatos — autor, fecha, tiempo de lectura */
.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 30px;
  color: var(--article-muted);
  font-family: var(--article-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.article-hero__meta span,
.article-hero__meta time {
  display: inline-flex;
  align-items: center;
}

.article-hero__meta span + span::before,
.article-hero__meta span + time::before,
.article-hero__meta time + span::before {
  content: "·";
  margin-right: 14px;
  color: rgba(91, 117, 137, 0.55);
}

/* ============================================================
   08 | IMAGEN DESTACADA
   ============================================================ */

.article-featured {
  width: min(100% - 40px, var(--article-wide));
  margin: 0 auto 34px;
  border: 1px solid var(--article-border);
  border-radius: var(--article-radius-xl);
  overflow: hidden;
  background: var(--article-surface-solid);
  box-shadow: 0 24px 52px -38px rgba(20, 48, 75, 0.34);
}

.article-featured img {
  display: block;
  width: 100%;
  height: auto;
}

.article-featured figcaption {
  padding: 14px 20px 16px;
  color: var(--article-muted);
  font-family: var(--article-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  line-height: 1.55;
  text-transform: uppercase;
}

/* ============================================================
   09 | CUERPO DE LECTURA
   ============================================================ */

.article-content {
  width: min(100% - 40px, var(--article-wide));
  margin-inline: auto;
  padding: 34px 0 96px;
}

.article-content > * {
  max-width: var(--article-max);
  margin-inline: auto;
}

.article-content > :first-child {
  margin-top: 0;
}

/* Scroll offset para anclas internas — compensa el navbar sticky */
.article-content :where(h2, h3, h4, section, [id]) {
  scroll-margin-top: 86px;
}

/* Párrafos */
.article-content p {
  margin: 0;
  color: var(--article-text);
  font-size: 18.5px;
  line-height: 1.82;
  text-align: left;
}

.article-content p + p {
  margin-top: 24px;
}

/* Encabezados de sección — H2 */
.article-content h2 {
  margin-top: 68px;
  margin-bottom: 22px;
  color: var(--article-heading);
  font-family: var(--article-font-heading);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-align: left;
  text-wrap: balance;
}

/* Encabezados secundarios — H3 */
.article-content h3 {
  margin-top: 42px;
  margin-bottom: 14px;
  color: var(--article-heading);
  font-family: var(--article-font-heading);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-align: left;
}

/* H4 — uso excepcional */
.article-content h4 {
  margin-top: 34px;
  margin-bottom: 12px;
  color: var(--article-heading);
  font-family: var(--article-font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}

/* Énfasis tipográfico */
.article-content strong {
  color: var(--article-heading);
  font-weight: 700;
}

.article-content em {
  font-style: italic;
}

.article-content small {
  color: var(--article-muted);
  font-size: 0.86em;
  line-height: 1.6;
}

/* Links en el cuerpo del artículo */
.article-content a {
  color: var(--article-heading);
  border-bottom: 1px solid rgba(20, 48, 75, 0.22);
  transition:
    color 180ms ease,
    border-color 180ms ease;
}

.article-content a:hover {
  color: var(--article-accent);
  border-color: var(--article-accent);
}

/* Superíndices para citas bibliográficas */
.article-content sup {
  font-size: 0.68em;
  line-height: 0;
  vertical-align: super;
}

.article-content sup a {
  border-bottom: 0;
  color: var(--article-accent);
  font-weight: 700;
}

/* Código inline */
.article-content code {
  padding: 0.14em 0.35em;
  border: 1px solid var(--article-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--article-heading);
  font-family: var(--article-font-mono);
  font-size: 0.9em;
}

/* Bloque de código */
.article-content pre {
  max-width: 860px;
  padding: 22px;
  margin-top: 32px;
  overflow-x: auto;
  border: 1px solid var(--article-border);
  border-radius: var(--article-radius-lg);
  background: rgba(20, 48, 75, 0.96);
  color: #ffffff;
}

.article-content pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

/* ============================================================
   10 | LISTAS
   ============================================================ */

.article-content ul,
.article-content ol {
  padding-left: 1.2em;
  margin-top: 24px;
  margin-bottom: 0;
}

.article-content li {
  padding-left: 0.35em;
  color: var(--article-text);
  font-size: 18.5px;
  line-height: 1.75;
}

.article-content li + li {
  margin-top: 12px;
}

.article-content li::marker {
  color: var(--article-accent);
}

/* ============================================================
   11 | TABLAS
   ============================================================ */

/* Wrapper con scroll horizontal en móvil */
.article-table {
  max-width: var(--article-wide);
  margin: 42px auto;
  overflow-x: auto;
  border: 1px solid var(--article-border);
  border-radius: var(--article-radius-lg);
  background: var(--article-surface-solid);
  box-shadow: 0 16px 38px -32px rgba(20, 48, 75, 0.3);
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: 15.5px;
  line-height: 1.55;
}

.article-content th,
.article-content td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--article-border);
  text-align: left;
  vertical-align: top;
}

.article-content th {
  color: var(--article-heading);
  font-family: var(--article-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(20, 48, 75, 0.045);
}

.article-content tr:last-child td {
  border-bottom: 0;
}

/* ============================================================
   12 | BLOQUES DESTACADOS
   ============================================================ */

/* Nota informativa y resumen */
.article-note,
.article-summary {
  max-width: 820px;
  margin-top: 42px;
  margin-bottom: 42px;
  padding: 30px 34px;
  border: 1px solid var(--article-border);
  border-left: 4px solid var(--article-accent);
  border-radius: 0 var(--article-radius-lg) var(--article-radius-lg) 0;
  background: var(--article-surface);
  box-shadow: 0 16px 38px -30px rgba(20, 48, 75, 0.28);
}

.article-note p,
.article-summary p {
  max-width: none;
  font-size: 18px;
  line-height: 1.72;
}

/* Cita con énfasis editorial */
.article-quote {
  max-width: 820px;
  margin-top: 42px;
  margin-bottom: 42px;
  padding: 30px 34px;
  border: 1px solid var(--article-border);
  border-left: 4px solid var(--article-accent);
  border-radius: 0 var(--article-radius-lg) var(--article-radius-lg) 0;
  background: var(--article-surface);
  box-shadow: 0 16px 38px -30px rgba(20, 48, 75, 0.28);
}

.article-quote p {
  max-width: none;
  color: var(--article-heading);
  font-family: var(--article-font-heading);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.01em;
}

/* Etiquetas de tipo para nota y resumen */
.article-note__label,
.article-summary__label {
  display: block;
  margin-bottom: 12px;
  color: var(--article-accent);
  font-family: var(--article-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Blockquote nativo */
.article-content blockquote {
  max-width: 820px;
  margin: 42px auto;
  padding: 30px 34px;
  border-left: 4px solid var(--article-accent);
  border-radius: 0 var(--article-radius-lg) var(--article-radius-lg) 0;
  background: var(--article-surface);
  color: var(--article-heading);
  box-shadow: 0 16px 38px -30px rgba(20, 48, 75, 0.28);
}

.article-content blockquote p {
  max-width: none;
  color: inherit;
  font-family: var(--article-font-heading);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.01em;
}

/* ============================================================
   13 | SEPARADORES
   ============================================================ */

.article-divider,
.article-content hr {
  width: min(100%, var(--article-max));
  height: 1px;
  margin: 64px auto;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--article-border-strong) 18%,
    var(--article-border-strong) 82%,
    transparent 100%
  );
}

/* ============================================================
   14 | FUENTES BIBLIOGRÁFICAS
   ============================================================ */

.article-sources {
  max-width: var(--article-max);
  margin: 72px auto 0;
  padding-top: 34px;
  border-top: 1px solid var(--article-border);
}

.article-sources h2 {
  margin: 0 0 18px;
  color: var(--article-heading);
  font-family: var(--article-font-heading);
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.article-sources ol {
  margin: 0;
  padding-left: 1.15em;
}

.article-sources li {
  color: var(--article-muted);
  font-size: 15px;
  line-height: 1.7;
}

.article-sources li + li {
  margin-top: 8px;
}

/* Links de fuente — solo nombre de organización y año */
.article-sources a {
  color: var(--article-accent);
  border-bottom: 0;
  font-family: var(--article-font-mono);
  font-size: 11px;
  text-decoration: none;
}

.article-sources a:hover {
  color: var(--article-heading);
}

/* ============================================================
   15 | CTA FINAL
   ============================================================ */

.article-cta {
  max-width: 860px;
  margin: 84px auto 0;
  padding: 42px;
  border: 1px solid var(--article-border);
  border-radius: var(--article-radius-xl);
  background:
    radial-gradient(
      circle at 14% 20%,
      var(--article-accent-soft) 0%,
      transparent 34%
    ),
    rgba(255, 255, 255, 0.7);
  box-shadow: 0 24px 52px -38px rgba(20, 48, 75, 0.34);
}

.article-cta h2 {
  max-width: 640px;
  margin: 0;
  color: var(--article-heading);
  font-family: var(--article-font-heading);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-align: left;
}

.article-cta p {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--article-text);
  font-size: 18px;
  line-height: 1.7;
  text-align: left;
}

.article-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Botón principal — cobre quemado, reservado exclusivamente para CTA */
.article-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 22px;
  border-radius: var(--article-radius-pill);
  background: var(--color-cta, #c2671e);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transition:
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.article-cta__button:hover {
  background: var(--color-cta-hover, #9e5214);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -20px rgba(20, 48, 75, 0.42);
}

/* ============================================================
   16 | PAGINACIÓN ENTRE ARTÍCULOS
   ============================================================ */

.article-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: var(--article-wide);
  margin: 72px auto 0;
}

.article-pagination__link {
  min-height: 120px;
  padding: 24px;
  border: 1px solid var(--article-border);
  border-radius: var(--article-radius-lg);
  background: rgba(255, 255, 255, 0.58);
  color: var(--article-heading);
  box-shadow: 0 18px 42px -36px rgba(20, 48, 75, 0.34);
  transition:
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.article-pagination__link:hover {
  background: rgba(255, 255, 255, 0.82);
  transform: translateY(-2px);
  box-shadow: 0 22px 48px -36px rgba(20, 48, 75, 0.42);
}

.article-pagination__label {
  display: block;
  color: var(--article-muted);
  font-family: var(--article-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.article-pagination__title {
  display: block;
  margin-top: 10px;
  font-family: var(--article-font-heading);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

/* ============================================================
   17 | BOTÓN REGRESAR STICKY
   ============================================================ */

.article-back-sticky {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid rgba(20, 48, 75, 0.14);
  border-radius: var(--article-radius-pill);
  background: rgba(255, 255, 255, 0.78);
  color: var(--article-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 16px 36px -24px rgba(20, 48, 75, 0.42);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.article-back-sticky:hover {
  background: rgba(255, 255, 255, 0.94);
  color: var(--article-accent);
  transform: translateY(-2px);
}

/* ============================================================
   18 | FOOTER
   ============================================================ */

.article-footer {
  padding: 52px 0 72px;
  border-top: 1px solid var(--article-border);
  color: var(--article-muted);
  font-family: var(--article-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

/* ============================================================
   19 | MOTION SAFETY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .article-page *,
  .article-page *::before,
  .article-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   20 | PRINT
   ============================================================ */

@media print {
  html {
    scroll-behavior: auto;
  }

  .article-page {
    background: #ffffff !important;
    color: #000000;
    font-size: 12pt;
    line-height: 1.55;
  }

  .article-nav,
  .article-back-sticky,
  .article-cta,
  .article-pagination {
    display: none !important;
  }

  .article-page main {
    padding-top: 0;
  }

  .article-shell,
  .article-readable,
  .article-content > *,
  .article-featured,
  .article-sources {
    width: 100%;
    max-width: none;
  }

  .article-hero {
    padding: 0 0 24pt;
  }

  .article-hero__title,
  .article-content h2,
  .article-content h3 {
    color: #000000;
  }

  .article-content a {
    color: #000000;
    border-bottom: 0;
    text-decoration: underline;
  }

  .article-featured {
    box-shadow: none;
  }
}

/* ============================================================
   21 | RESPONSIVE — TABLET / MÓVIL
   ============================================================ */

@media (max-width: 760px) {
  .article-page {
    font-size: 17px;
  }

  .article-page main {
    padding-top: 0;
  }

  /* Navbar compacta para artículos en móvil */
  .article-nav {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(91, 117, 137, 0.16);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
  }

  .article-nav__inner {
    justify-content: space-between;
    gap: 4px;
    overflow-x: visible;
    width: 100%;
    min-height: 54px;
    padding: 0 10px;
    scrollbar-width: none;
  }

  .article-nav__inner::-webkit-scrollbar {
    display: none;
  }

  .article-nav__link {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    padding: 6px 7px;
    color: var(--article-muted);
    font-size: 9px;
    letter-spacing: 0.055em;
    white-space: nowrap;
  }

  .article-nav__link:hover {
    background: rgba(20, 48, 75, 0.055);
    color: var(--article-heading);
  }

  .article-nav__link--next {
    flex: 0 0 auto;
    padding-right: 10px;
    padding-left: 10px;
    background: rgba(20, 48, 75, 0.055);
    color: var(--article-heading);
    border: 1px solid rgba(20, 48, 75, 0.1);
  }

  .article-breadcrumb {
    width: min(100% - 36px, var(--article-wide));
    padding-top: 18px;
  }

  .article-shell {
    width: min(100% - 36px, var(--article-wide));
  }

  .article-hero {
    padding: 54px 0 32px;
  }

  .article-hero__title {
    font-size: clamp(38px, 12vw, 54px);
  }

  .article-hero__lead {
    margin-top: 22px;
    font-size: 18px;
  }

  .article-featured {
    width: min(100% - 36px, var(--article-wide));
    margin-bottom: 24px;
    border-radius: var(--article-radius-lg);
  }

  .article-content {
    width: min(100% - 36px, var(--article-wide));
    padding-bottom: 76px;
  }

  .article-content p,
  .article-content li {
    font-size: 17px;
    line-height: 1.78;
  }

  .article-content h2 {
    margin-top: 56px;
  }

  .article-note,
  .article-quote,
  .article-summary,
  .article-content blockquote {
    padding: 26px 24px;
  }

  .article-cta {
    padding: 32px 26px;
  }

  .article-cta__actions {
    flex-direction: column;
  }

  .article-cta__button {
    width: 100%;
  }

  .article-pagination {
    grid-template-columns: 1fr;
  }

  .article-back-sticky {
    right: 18px;
    bottom: 18px;
    min-height: 42px;
    padding: 11px 15px;
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .article-nav__inner {
    gap: 3px;
    padding: 0 7px;
  }

  .article-nav__link {
    padding: 6px 5px;
    font-size: 8.4px;
    letter-spacing: 0.045em;
  }

  .article-nav__link--next {
    padding-right: 8px;
    padding-left: 8px;
  }
}

/* ============================================================
   22 | HERO CON DEGRADADO TEMÁTICO
   ============================================================ */

/*
   Variables de hero — se definen en el <style> interno de cada blog:
   --hero-grad-a  color dominante oscuro (base del degradado)
   --hero-grad-b  color de acento (segundo punto de luz)
   --hero-grad-c  color de cierre (borde inferior)
*/

.post-hero {
  position: relative;
  width: 100%;
  min-height: clamp(320px, 58vh, 480px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.post-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 70% 60% at 8% -5%,
      var(--hero-grad-a, rgba(20, 48, 75, 0.92)) 0%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 55% 55% at 92% 105%,
      var(--hero-grad-b, rgba(47, 109, 164, 0.55)) 0%,
      transparent 58%
    ),
    linear-gradient(
      170deg,
      var(--hero-grad-c, rgba(20, 48, 75, 0.72)) 0%,
      rgba(14, 34, 56, 0.88) 100%
    );
  pointer-events: none;
}

.post-hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, var(--article-wide));
  margin: 0 auto;
  /* padding-top compensa navbar fijo (54px) + espacio visual */
  padding: calc(54px + clamp(2.4rem, 6vw, 4rem)) 0 clamp(2.4rem, 5vw, 3.2rem);
  color: #f9fafb;
}

/* Breadcrumb dentro del hero */
.post-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 20px;
  list-style: none;
  font-family: var(--article-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(249, 250, 251, 0.55);
}

.post-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.post-breadcrumb li + li::before {
  content: "/";
  color: rgba(249, 250, 251, 0.35);
}

.post-breadcrumb a {
  color: rgba(249, 250, 251, 0.55);
  transition: color 180ms ease;
}

.post-breadcrumb a:hover {
  color: rgba(249, 250, 251, 0.9);
}

/* Kicker — etiqueta de categoría */
.post-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 5px 12px 5px 10px;
  border-radius: var(--article-radius-pill);
  border: 1px solid rgba(249, 250, 251, 0.18);
  background: rgba(14, 34, 56, 0.52);
  backdrop-filter: blur(12px);
  color: rgba(249, 250, 251, 0.82);
  font-family: var(--article-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.post-hero__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--article-accent, #2f6da4);
  box-shadow: 0 0 0 3px rgba(47, 109, 164, 0.3);
}

/* Título H1 dentro del hero */
.post-hero__title {
  max-width: 820px;
  margin: 0 0 18px;
  color: #ffffff;
  font-family: var(--article-font-heading);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-align: left;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

/* Lead */
.post-hero__lead {
  max-width: 680px;
  margin: 0 0 22px;
  color: rgba(229, 231, 235, 0.92);
  font-family: var(--article-font-body);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.65;
  text-align: left;
}

/* Meta — autor, fecha, tiempo */
.post-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: rgba(203, 213, 225, 0.82);
  font-family: var(--article-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.post-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.post-hero__meta span + span::before {
  content: "·";
  margin-right: 10px;
  color: rgba(203, 213, 225, 0.4);
}

/* ============================================================
   23 | LAYOUT DOS COLUMNAS — ARTÍCULO + ASIDE
   ============================================================ */

.post-layout {
  width: min(100% - 40px, var(--article-wide));
  margin-inline: auto;
  padding-top: 52px;
  padding-bottom: 80px;
}

.post-layout__inner {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

/* ============================================================
   24 | ARTÍCULO PRINCIPAL (post-main)
   ============================================================ */

.post-main {
  min-width: 0; /* previene overflow en grid */
}

.post-main p {
  margin: 0;
  color: var(--article-text);
  font-size: 18.5px;
  line-height: 1.82;
  text-align: left;
}

.post-main p + p {
  margin-top: 24px;
}

.post-main h2 {
  margin-top: 64px;
  margin-bottom: 20px;
  color: var(--article-heading);
  font-family: var(--article-font-heading);
  font-size: clamp(1.55rem, 2.8vw, 2rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-align: left;
  text-wrap: balance;
}

.post-main h3 {
  margin-top: 40px;
  margin-bottom: 12px;
  color: var(--article-heading);
  font-family: var(--article-font-heading);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-align: left;
}

.post-main strong {
  color: var(--article-heading);
  font-weight: 700;
}

.post-main a {
  color: var(--article-heading);
  border-bottom: 1px solid rgba(20, 48, 75, 0.22);
  transition:
    color 180ms ease,
    border-color 180ms ease;
}

.post-main a:hover {
  color: var(--article-accent);
  border-color: var(--article-accent);
}

.post-main sup a {
  border-bottom: 0;
  color: var(--article-accent);
  font-size: 0.68em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
}

.post-main ul,
.post-main ol {
  padding-left: 1.25em;
  margin-top: 22px;
  margin-bottom: 0;
}

.post-main li {
  padding-left: 0.3em;
  margin-bottom: 10px;
  color: var(--article-text);
  font-size: 18.5px;
  line-height: 1.75;
}

.post-main li::marker {
  color: var(--article-accent);
}

/* Separador horizontal */
.post-main hr {
  width: 100%;
  height: 1px;
  margin: 56px 0;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--article-border-strong) 20%,
    var(--article-border-strong) 80%,
    transparent 100%
  );
}

/* ============================================================
   25 | FAQ — <details> nativo
   ============================================================ */

.post-faq {
  margin-top: 52px;
  padding: clamp(1.4rem, 2.5vw, 1.8rem);
  border: 1px solid var(--article-border);
  border-radius: var(--article-radius-xl);
  background:
    radial-gradient(
      ellipse 60% 50% at 0% 0%,
      var(--article-accent-soft) 0%,
      transparent 60%
    ),
    var(--article-surface-solid);
}

.post-faq h2 {
  margin: 0 0 20px;
  color: var(--article-heading);
  font-family: var(--article-font-heading);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: left;
}

.post-faq details {
  border-radius: var(--article-radius-lg);
  border: 1px solid var(--article-border);
  padding: 14px 18px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.82);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.post-faq details[open] {
  border-color: var(--article-accent);
  box-shadow: 0 8px 24px -14px rgba(20, 48, 75, 0.18);
}

.post-faq details:last-child {
  margin-bottom: 0;
}

.post-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--article-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--article-heading);
  line-height: 1.4;
  padding: 2px 0;
  text-align: left;
}

.post-faq summary::-webkit-details-marker {
  display: none;
}
.post-faq summary::marker {
  display: none;
}

.post-faq__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--article-border);
  background: rgba(255, 255, 255, 0.9);
  color: var(--article-accent);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  transition:
    transform 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease;
}

details[open] .post-faq__icon {
  transform: rotate(45deg);
  background-color: var(--article-accent);
  border-color: var(--article-accent);
  color: #ffffff;
}

.post-faq details p {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--article-border);
  color: var(--article-muted);
  font-size: 16px;
  line-height: 1.72;
  text-align: left;
}

/* ============================================================
   26 | FUENTES BIBLIOGRÁFICAS (post-sources)
   ============================================================ */

.post-sources {
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--article-border);
}

.post-sources h2 {
  margin: 0 0 14px;
  color: var(--article-heading);
  font-family: var(--article-font-heading);
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  text-align: left;
}

.post-sources ol {
  margin: 0;
  padding-left: 1.15em;
}

.post-sources li {
  color: var(--article-muted);
  font-size: 14.5px;
  line-height: 1.65;
}

.post-sources li + li {
  margin-top: 7px;
}

.post-sources a {
  color: var(--article-accent);
  font-family: var(--article-font-mono);
  font-size: 11px;
  text-decoration: none;
  border-bottom: 0;
}

.post-sources a:hover {
  color: var(--article-heading);
}

/* ============================================================
   27 | FOOTER DEL ARTÍCULO + PAGINACIÓN
   ============================================================ */

.post-article-footer {
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--article-border);
}

.post-article-footer > p {
  margin: 0 0 28px;
  color: var(--article-muted);
  font-size: 14.5px;
  line-height: 1.65;
  text-align: left;
}

.post-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.post-pagination__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--article-border);
  border-radius: var(--article-radius-lg);
  background: rgba(255, 255, 255, 0.6);
  color: var(--article-heading);
  transition:
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.post-pagination__link:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -28px rgba(20, 48, 75, 0.38);
  color: var(--article-heading);
  border-bottom: 0;
}

.post-pagination__label {
  color: var(--article-muted);
  font-family: var(--article-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.post-pagination__title {
  font-family: var(--article-font-heading);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

/* ============================================================
   28 | ASIDE STICKY
   ============================================================ */

.post-aside {
  align-self: start;
  position: sticky;
  top: 80px; /* compensa el navbar */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.post-aside__card {
  padding: clamp(1.3rem, 2.2vw, 1.6rem);
  border: 1px solid var(--article-border);
  border-radius: var(--article-radius-xl);
  background:
    radial-gradient(
      ellipse 65% 55% at 0% 0%,
      var(--article-accent-soft) 0%,
      transparent 58%
    ),
    var(--article-surface-solid);
  box-shadow: 0 18px 44px -30px rgba(20, 48, 75, 0.22);
}

.post-aside__card--secondary {
  background:
    radial-gradient(
      ellipse 60% 50% at 100% 100%,
      var(--article-accent-soft) 0%,
      transparent 60%
    ),
    var(--article-surface-solid);
  box-shadow: 0 12px 32px -22px rgba(20, 48, 75, 0.16);
}

.post-aside__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--article-accent);
  font-family: var(--article-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.post-aside__title {
  margin: 0 0 10px;
  color: var(--article-heading);
  font-family: var(--article-font-heading);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-align: left;
}

.post-aside__title--sm {
  margin: 0 0 10px;
  color: var(--article-heading);
  font-family: var(--article-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: left;
}

.post-aside__text {
  margin: 0 0 14px;
  color: var(--article-muted);
  font-size: 14px;
  line-height: 1.65;
  text-align: left;
}

.post-aside__list {
  padding-left: 1.1em;
  margin: 0 0 18px;
  list-style: none;
  padding-left: 0;
}

.post-aside__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  color: var(--article-text);
  font-size: 13.5px;
  line-height: 1.5;
  border-bottom: 1px solid var(--article-border);
}

.post-aside__list li:last-child {
  border-bottom: 0;
}

.post-aside__list li::before {
  content: "→";
  color: var(--article-accent);
  font-family: var(--article-font-mono);
  font-size: 11px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.post-aside__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: var(--article-radius-pill);
  background: var(--color-cta, #c2671e);
  color: #ffffff;
  font-family: var(--article-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition:
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.post-aside__cta:hover {
  background: var(--color-cta-hover, #9e5214);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -16px rgba(194, 103, 30, 0.52);
  border-bottom: 0;
}

.post-aside__cta--outline {
  background: transparent;
  border: 1px solid var(--article-border-strong);
  color: var(--article-heading);
}

.post-aside__cta--outline:hover {
  background: var(--article-surface-solid);
  color: var(--article-accent);
  box-shadow: 0 8px 20px -12px rgba(20, 48, 75, 0.22);
}

/* ============================================================
   29 | RESPONSIVE NUEVOS COMPONENTES
   ============================================================ */

@media (max-width: 900px) {
  /* En tablet y móvil el artículo se lee primero; el aside baja al final */
  .post-layout__inner {
    display: flex;
    flex-direction: column;
  }

  .post-main {
    order: 1;
  }

  .post-aside {
    order: 2;
    position: static;
    width: 100%;
    margin-top: clamp(2rem, 8vw, 4rem);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
  }

  .post-aside__card {
    flex: 1 1 280px;
  }
}

@media (max-width: 760px) {
  .post-layout {
    width: min(100% - 36px, var(--article-wide));
    padding-top: 36px;
  }

  .post-hero__inner {
    width: min(100% - 36px, var(--article-wide));
  }

  .post-hero__title {
    font-size: clamp(1.6rem, 8vw, 2.2rem);
  }

  .post-hero__lead {
    font-size: 1rem;
  }

  .post-main p,
  .post-main li {
    font-size: 17px;
    line-height: 1.78;
  }

  .post-main h2 {
    margin-top: 48px;
    font-size: clamp(1.35rem, 6vw, 1.65rem);
  }

  .post-faq {
    padding: 1.2rem 1rem;
  }

  .post-pagination {
    grid-template-columns: 1fr;
  }

  .post-aside {
    flex-direction: column;
  }

  .post-aside__card {
    flex: none;
  }
}

@media (max-width: 480px) {
  .post-layout {
    width: min(100% - 30px, var(--article-wide));
  }

  .post-hero__inner {
    width: min(100% - 30px, var(--article-wide));
  }

  .post-hero__title {
    font-size: clamp(1.45rem, 7.5vw, 1.9rem);
  }

  .post-breadcrumb {
    display: none; /* se mueve al kicker en pantallas pequeñas */
  }

  .post-faq summary {
    font-size: 15px;
  }
}

/* ============================================================
   REFERENCIA DE VARIACIÓN POR ARTÍCULO
   ============================================================

   Este bloque NO va aquí. Va en el <style> interno de cada
   HTML. Se incluye solo como referencia y guía de producción.

   INSTRUCCIÓN PARA o5
   ─────────────────────────────────────────────────────────────
   Al crear cada blog, añade en el <style> interno del HTML
   el siguiente bloque, sustituyendo los valores según el
   número de artículo. No inventes colores fuera de la paleta
   definida. No añadas más variables que las cinco indicadas.

   Estructura obligatoria del <style> interno:

   <style>
     .article-page--blog-XX {
       --article-accent:      [hex de la tabla];
       --article-accent-soft: [mismo hex al 12% de opacidad en rgba];
       --article-bg-orb-x:    [valor % entre 0% y 90%];
       --article-bg-orb-y:    [valor % entre 0% y 90%];
       --article-bg-orb-size: [valor % entre 22% y 36%];
       --hero-grad-a: [color dominante oscuro del degradado hero];
       --hero-grad-b: [color de acento del degradado hero];
       --hero-grad-c: [color de cierre inferior del degradado hero];
     }
   </style>

   PALETA DE ACENTOS POR TEMA (10 temas, 5 artículos c/u)
   ─────────────────────────────────────────────────────────────
   Todos los artículos de un mismo tema comparten el mismo
   acento. El orbe cambia de posición en cada artículo.

   Tema 01 — Presencia         #2f6da4   rgba(47, 109, 164, 0.12)
   Tema 02 — Presencia (IA)    #3a7fbf   rgba(58, 127, 191, 0.12)
   Tema 03 — Impacto           #1e4d72   rgba(30,  77, 114, 0.12)
   Tema 04 — Decisión          #4a7a96   rgba(74, 122, 150, 0.12)
   Tema 05 — Autoridad         #3d5a8a   rgba(61,  90, 138, 0.12)
   Tema 06 — Alcance           #2a5980   rgba(42,  89, 128, 0.12)
   Tema 07 — Decisión          #2e6e8e   rgba(46, 110, 142, 0.12)
   Tema 08 — Autoridad         #2c5f7a   rgba(44,  95, 122, 0.12)
   Tema 09 — Impacto           #1f5470   rgba(31,  84, 112, 0.12)
   Tema 10 — Alcance           #3b6b82   rgba(59, 107, 130, 0.12)

   POSICIONES DE ORBE POR SUBTEMA (referencia sugerida)
   ─────────────────────────────────────────────────────────────
   Subtema 1  →  orb-x: 12%   orb-y:  8%   size: 28%
   Subtema 2  →  orb-x: 82%   orb-y: 14%   size: 26%
   Subtema 3  →  orb-x: 50%   orb-y:  6%   size: 30%
   Subtema 4  →  orb-x: 18%   orb-y: 72%   size: 24%
   Subtema 5  →  orb-x: 76%   orb-y: 58%   size: 32%

   ============================================================ */