/* ─── engine/base.css ─── */
/* 777 Explainer Engine — base.css
 * Tipografía + reset + utilities compartidas por todos los componentes.
 * Cargado SIEMPRE en el <style> del index.html, antes de la palette y del project theme.
 */

:root {
  /* Paleta base — override en theme del proyecto */
  --bg: #0d0d0f;
  --card-bg: #13131a;
  --card-border: #1e1e28;
  --card-hover: #1a1a24;
  --text: #ffffff;
  --text-muted: #6b6b80;
  --text-dim: #3a3a4a;
  --nav-bg: #13131a;
  --nav-border: #1e1e28;

  /* Accent default (override en theme del proyecto) */
  --flame: #f58a2e;
  --flame-soft: rgba(245,138,46,0.15);

  /* Tipografía */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;

  /* Tamaño/peso del cuerpo de lectura — tokens nuevos, valores = los de siempre
     (per README §"Si algo no se puede cambiar con un token": se agrega con el
     valor exacto de hoy, así ningún explainer existente cambia). Antes estaban
     quemados directo en el selector; un proyecto que necesite un cuerpo más
     grande (ej. porque su propio sitio ya usa 17px) no tenía cómo pedirlo sin
     escribir un selector nuevo. */
  --font-weight-hero      : 800;
  --font-size-narrative   : 15.5px;
  --font-size-points      : 14px;
  --font-size-compare     : 14px;

  /* Spacing & radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 100px;

  /* Motion */
  --motion-fast: 200ms;
  --motion-base: 320ms;
  /* Separador vertical entre secciones. */
  --divider-height   : 200px;  /* el keyframe deriva de aca */
  --divider-line-soft: rgba(180,180,210,0.10);  /* extremos del degradado */
  --divider-line-mid : rgba(180,180,210,0.32);  /* centro */
  --divider-glow-core: #ffffff;  /* nucleo del destello */

  /* Sombras y brillos. Son efectos de profundidad, no color de marca, pero se tokenizan igual para que una superficie clara pueda suavizarlos. */
  --shadow-soft   : rgba(0,0,0,0.25);
  --shadow-mid    : rgba(0,0,0,0.35);
  --shadow-strong : rgba(0,0,0,0.45);
  --shadow-drop-sm: rgba(0,0,0,0.4);  /* drop-shadow chico */
  --shadow-drop-md: rgba(0,0,0,0.5);
  --shadow-drop-lg: rgba(0,0,0,0.55);
  --sheen         : rgba(255,255,255,0.03);  /* brillo interior superior */
  --dot-pattern   : rgba(255,255,255,0.04);  /* trama de puntos del diagrama */

  /* Los diez tonos de sección — misma escala que themes/deck.css.
     Se declaran acá porque base.css se carga SIEMPRE y section-palette.css
     los consume también en modo documento, donde deck.css no entra. */
  --deck-hue-1 : #4a9eff;
  --deck-hue-2 : #c89600;
  --deck-hue-3 : #0088ff;
  --deck-hue-4 : #cc3333;
  --deck-hue-5 : #c87820;
  --deck-hue-6 : #00c860;
  --deck-hue-7 : #b040e0;
  --deck-hue-8 : #00c8c8;
  --deck-hue-9 : #e040b0;
  --deck-hue-10: #d4aa00;

  /* Pastilla de navegación activa, por tema. Elegidos a mano: NO son
     derivables del tono (`.s1` activa es #1a1a3e con tono #4a9eff).
     light.css los redefine para fondo claro. */
  --s1-active-bg    : #1a1a3e;
  --s1-active-border: #4a4a9f;
  --s2-active-bg    : #2a1f00;
  --s2-active-border: #8a6000;
  --s3-active-bg    : #001a3a;
  --s3-active-border: #004a9f;
  --s4-active-bg    : #2a0a0a;
  --s4-active-border: #8a2020;
  --s5-active-bg    : #1e1200;
  --s5-active-border: #7a4a00;
  --s6-active-bg    : #001a0e;
  --s6-active-border: #005a30;
  --s7-active-bg    : #1a0028;
  --s7-active-border: #6a009a;
  --s8-active-bg    : #001a1a;
  --s8-active-border: #006a6a;
  --s9-active-bg    : #1a001a;
  --s9-active-border: #8a008a;
  --s10-active-bg    : #1a1500;
  --s10-active-border: #7a6000;

  /* Escala de texto — seis escalones que el motor tenia sin nombre. */
  --text-strong : #f0f0f8;  /* titulos de tarjeta */
  --text-heading: #e8e8f0;  /* titulos de columna */
  --text-body   : #d0d0e0;  /* cuerpo narrativo */
  --text-soft   : #cccccc;  /* pre-titulo y cuerpo de punto */
  --text-em     : #c0c0d8;  /* enfasis dentro del cuerpo */

  /* Superficies y cromo. */
  --bg-deep            : #0a0a0e;  /* fila de cifras */
  --nav-bg-veil        : rgba(13,13,15,0.92);  /* barra superior translucida */
  --section-pill-bg    : #111118;
  --section-pill-border: #222230;
  --section-pill-dot   : #888;
  --nav-pill-border    : #333340;  /* estado hover */
  --nav-pill-active-fg : #fff;  /* pastilla activa */
  /* Por defecto, los mismos del balin en reposo: asi el tema oscuro renderiza
     identico y solo cambian los balines que antes no recibian nada. */
  --nav-pill-active-bg    : transparent;
  --nav-pill-active-border: var(--nav-border);
  --stat-pill-bg       : #14141c;
  --tag-bg             : #1e1e2e;
  --tag-border         : #2a2a3e;
  --card-icon-veil     : rgba(255,255,255,0.06);
  --card-num-color     : #aaaadd;

  /* Degradado del titulo — tokens que el motor usaba SIN declarar. */
  --hero-grad-1: #7c5cbf;
  --hero-grad-2: #4a9eff;
  --hero-grad-3: #00e87a;

  /* Degradado de la palabra destacada DENTRO del bloque de cierre. Por defecto
     es el mismo de la pagina, que es lo que heredaba antes de existir el token. */
  --cta-pop-1: var(--hero-grad-1);
  --cta-pop-2: var(--hero-grad-2);
  --cta-pop-3: var(--hero-grad-3);

  /* Palabras destacadas .hl-*. */
  --pop-coral: #ff6b4a;
  --pop-green: #00e87a;
  --pop-teal : #00d4c8;
  --pop-gold : #e8b84b;

  /* Semanticos de comparativa — significan correcto vs contra-ejemplo. */
  --positive-line  : #00c860;
  --positive-fg    : #50e090;
  --positive-bg    : rgba(0,200,100,0.15);
  --positive-border: rgba(0,200,100,0.3);
  --positive-tag-fg: #7aff9a;  /* etiqueta dentro de tarjeta */
  --negative-line  : #cc3333;
  --negative-fg    : #ff8080;
  --negative-bg    : rgba(220,60,60,0.15);
  --negative-border: rgba(220,60,60,0.3);

  /* Bloque de cierre. */
  /* El arranque del degradado del cierre es un RELLENO que lleva texto blanco
     encima, no un color de texto. Por defecto es el acento, que es lo que hacia
     antes de existir este token; pero una marca cuyo acento sea claro DEBE
     pisarlo o el texto del cierre queda ilegible. Medido con el acento por
     defecto del motor, blanco encima da 2.45:1. */
  --cta-bg-start    : var(--flame);
  --cta-bg-end      : #c84020;  /* fin del degradado */
  --cta-fg          : #fff;
  --cta-body-fg     : rgba(255,255,255,0.92);
  --cta-button-bg   : #fff;
  --cta-button-fg   : #1a0a00;
  --cta-shadow      : rgba(0,0,0,0.25);
  --cta-shadow-hover: rgba(0,0,0,0.35);

  /* Modal del presentador — superficie CLARA a proposito, familia propia. No se cruza con la paleta de pagina: mapearla a --bg/--text la volveria negra sobre negra en el tema oscuro. */
  --modal-backdrop      : rgba(0,0,0,0.72);
  --modal-bg            : #ffffff;
  --modal-border        : #d8d8de;
  --modal-shadow        : rgba(0,0,0,0.55);
  --modal-text          : #2a2a32;
  --modal-text-strong   : #15151b;
  --modal-text-soft     : #3a3a44;
  --modal-text-muted    : #555562;
  --modal-eyebrow       : #8a8a96;
  --modal-close-bg      : #f3f3f5;
  --modal-close-bg-hover: #e6e6ea;
  --modal-close-fg-hover: #1a1a24;
  --modal-code-bg       : #f3f3f5;
  --modal-code-border   : #e6e6ea;
  --modal-code-accent   : #b8741a;

  /* Escala decorativa — decision Q2=A: un solo vocabulario, el del motor. Los diez tonos viven en themes/deck.css; aca se declara la reserva para el modo documento con los mismos valores. */
  --deck-hue-2-bright: #ffc63a;  /* icono aclarado, no es el acento */

  /* Diagrama — tokens que el motor usaba SIN declarar. Caen a var(--flame), NO a un literal: si se quemara el naranja aca, una marca que declare --flame dejaria de gobernar el diagrama. */
  --diagram-accent-1: var(--flame);
  --diagram-accent-2: var(--flame);
  --diagram-accent-3: var(--flame);
  --diagram-accent-4: var(--flame);
  --diagram-accent-5: var(--flame);
  --actor-color     : var(--flame);
  --node-color      : var(--flame);
  --tl-color        : var(--flame);

  /* Imagen destacada. */
  --image-veil: rgba(13,8,32,0.78);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ─── V-DIVIDER (separador corto vertical entre secciones, glow que cae UNA vez en viewport) ─── */
.v-divider {
  display: flex;
  justify-content: center;
  padding: 40px 0 40px;
  position: relative;
}
.v-divider-line {
  position: relative;
  width: 3px;
  height: var(--divider-height);
  background: linear-gradient(to bottom,
    var(--divider-line-soft) 0%,
    var(--divider-line-mid) 50%,
    var(--divider-line-soft) 100%
  );
  border-radius: 3px;
  overflow: visible; /* glow puede salir por encima/abajo de la línea */
}
.v-divider-glow {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: radial-gradient(circle at center,
    var(--divider-glow-core) 0%,
    var(--flame) 40%,
    color-mix(in srgb, var(--flame) 50%, transparent) 70%,
    transparent 100%
  );
  border-radius: 50%;
  box-shadow:
    0 0 8px var(--flame),
    0 0 18px color-mix(in srgb, var(--flame) 40%, transparent);
  opacity: 0;
  pointer-events: none;
}
.v-divider.animate .v-divider-glow {
  animation: divider-fall 1.6s ease-in-out forwards;
}
@keyframes divider-fall {
  0%   { top: -10px; opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  /* Deriva del alto de la linea: antes era 198px calzado a mano contra
     `height: 200px`, y cambiar el alto rompia la animacion en silencio. */
  100% { top: calc(var(--divider-height) - 2px); opacity: 0; }
}

/* ─── WORD HIGHLIGHTS (palabras pop dentro de títulos) ─── */
.pop {
  background: linear-gradient(135deg, var(--hero-grad-1) 0%, var(--hero-grad-2) 50%, var(--hero-grad-3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pop-italic { font-style: italic; }

/* La palabra con degradado DENTRO del bloque de cierre necesita su propio juego:
   el degradado de pagina se posa sobre el fondo del bloque, no sobre la pagina, y
   ahi se evapora (medido: 1.00:1 sobre superficie clara). Los valores por defecto
   son los mismos de `.pop`, asi que el tema oscuro no cambia; `light.css` los pisa.
   Ver `.claude/rules/777-html-output-quality.md` 4.2. */
.cta-block .pop {
  background: linear-gradient(135deg, var(--cta-pop-1) 0%, var(--cta-pop-2) 50%, var(--cta-pop-3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hl-flame  { color: var(--flame); }
.hl-coral  { color: var(--pop-coral); }
.hl-green  { color: var(--pop-green); }
.hl-teal   { color: var(--pop-teal); }
.hl-gold   { color: var(--pop-gold); }

/* ─── SECTION PILL (eyebrow tag con dot + numero + label) ─── */
.section-pill-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0 12px;
}
.section-pill {
  background: var(--section-pill-bg);
  border: 1px solid var(--section-pill-border);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
}
.section-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--section-pill-dot);
  box-shadow: 0 0 6px currentColor;
}

/* ─── NAV TOP ─── */
.nav-top {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 28px;
  background: var(--nav-bg-veil);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nav-border);
  flex-wrap: wrap;
}

.nav-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-right: 6px;
  white-space: nowrap;
}

.nav-pill {
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--motion-fast);
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--nav-border);
  display: inline-block;
}

/* El fondo del balin activo NO puede depender de que su `data-section` calce
   con un nombre de tema: el template emite el id de la seccion, y los ids
   rara vez se llaman s1..s10. Antes solo se pintaba el balin cuyo id
   coincidia por casualidad con un tema. Ahora todo balin activo se pinta, y
   las reglas por tema de section-palette.css siguen ganando donde calzan. */
.nav-pill.active {
  color: var(--nav-pill-active-fg);
  background: var(--nav-pill-active-bg);
  border-color: var(--nav-pill-active-border);
}
.nav-pill:hover { color: var(--text); border-color: var(--nav-pill-border); }

/* ─── HERO ─── */
.hero {
  text-align: center;
  padding: 56px 32px 36px;
  position: relative;
}

.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.hero-super {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.5vw, 20px);
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 10vw, 96px);
  font-weight: var(--font-weight-hero);
  line-height: 0.85;
  letter-spacing: -4px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--hero-grad-1) 0%, var(--hero-grad-2) 50%, var(--hero-grad-3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-tagline {
  font-size: 15px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 28px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.pills-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.stat-pill {
  background: var(--stat-pill-bg);
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.stat-pill b { color: var(--text); font-weight: 600; }

/* ─── SECTION WRAPPER ─── */
.section-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 48px 28px 0;
}

.section-divider {
  display: flex;
  justify-content: center;
  padding: 20px 0 48px;
}

.section-divider-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--nav-border), transparent);
}

/* ─── SECTION HEADER (estilo pill + big title centrado, patrón template_02) ─── */
.section-header {
  text-align: center;
  padding: 0 24px 36px;
  max-width: 880px;
  margin: 0 auto;
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 14px;
  color: var(--text);
}

.section-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
}

/* ─── CARDS GRID ─── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cards-grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 2px solid var(--card-border); /* override per CARD via .cards-grid .card:nth-child(N) */
  border-radius: 12px;
  padding: 24px 22px;
  transition: background var(--motion-fast), transform var(--motion-fast);
  position: relative;
}

.card:hover { background: var(--card-hover); transform: translateY(-2px); }

/* ─── CARD COLOR ROTATION (6 colores cíclicos por card del grid) ─── */
/* Cada card del grid recibe un color de accent distinto, rotando la MISMA escala
   decorativa que los temas de sección (`--deck-hue-*`). La rotación es independiente
   del theme de su sección — dos cosas distintas: comparten vocabulario, no valor.
   Decisión Q2=A de la task 03; antes esta rotación quemaba seis colores propios.
   Aplica a: border-top, card-num, card-icon (bg + foreground). */

.cards-grid .card:nth-child(6n+1) { border-top-color: var(--deck-hue-1); }
.cards-grid .card:nth-child(6n+1) .card-num { color: var(--deck-hue-1); }
.cards-grid .card:nth-child(6n+1) .card-icon { background: color-mix(in srgb, var(--deck-hue-1) 15%, transparent); color: var(--deck-hue-1); }

.cards-grid .card:nth-child(6n+2) { border-top-color: var(--deck-hue-2); }
.cards-grid .card:nth-child(6n+2) .card-num { color: var(--deck-hue-2); }
.cards-grid .card:nth-child(6n+2) .card-icon { background: color-mix(in srgb, var(--deck-hue-2) 15%, transparent); color: var(--deck-hue-2-bright); }

.cards-grid .card:nth-child(6n+3) { border-top-color: var(--deck-hue-8); }
.cards-grid .card:nth-child(6n+3) .card-num { color: var(--deck-hue-8); }
.cards-grid .card:nth-child(6n+3) .card-icon { background: color-mix(in srgb, var(--deck-hue-8) 15%, transparent); color: var(--deck-hue-8); }

.cards-grid .card:nth-child(6n+4) { border-top-color: var(--deck-hue-6); }
.cards-grid .card:nth-child(6n+4) .card-num { color: var(--deck-hue-6); }
.cards-grid .card:nth-child(6n+4) .card-icon { background: color-mix(in srgb, var(--deck-hue-6) 15%, transparent); color: var(--deck-hue-6); }

.cards-grid .card:nth-child(6n+5) { border-top-color: var(--deck-hue-9); }
.cards-grid .card:nth-child(6n+5) .card-num { color: var(--deck-hue-9); }
.cards-grid .card:nth-child(6n+5) .card-icon { background: color-mix(in srgb, var(--deck-hue-9) 15%, transparent); color: var(--deck-hue-9); }

.cards-grid .card:nth-child(6n) { border-top-color: var(--flame); }
.cards-grid .card:nth-child(6n) .card-num { color: var(--flame); }
.cards-grid .card:nth-child(6n) .card-icon { background: var(--flame-soft); color: var(--flame); }

.card-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 10px;
  color: var(--card-num-color);
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--font-mono);
  opacity: 0.7;
}

.card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 12px;
  line-height: 1.25;
  padding-right: 28px;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--card-icon-veil);
  margin-bottom: 14px;
  font-size: 16px;
}

.card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 8px;
}
.card p:last-child { margin-bottom: 0; }

.card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card ul li {
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 12px;
  position: relative;
  line-height: 1.5;
}

.card ul li::before {
  content: '·';
  position: absolute;
  left: 1px;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.15;
}

.card .tag {
  display: inline-block;
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--positive-tag-fg);
}

/* ─── NARRATIVE BODY (section-narrative) ─── */
.narrative-body {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 2px solid var(--card-border); /* themed */
  border-radius: 12px;
  padding: 36px 40px;
  max-width: 820px;
  margin: 0 auto;
}

.narrative-body p {
  font-size: var(--font-size-narrative);
  color: var(--text-body);
  line-height: 1.72;
  margin-bottom: 16px;
}
.narrative-body p:last-child { margin-bottom: 0; }
.narrative-body strong { color: var(--text); font-weight: 600; }
.narrative-body em { color: var(--text-em); }

/* ─── COMPARE SIDE BY SIDE ─── */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; } }

.compare-side {
  background: var(--card-bg);
  padding: 28px 26px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
.compare-side.fail { border-top: 2px solid var(--negative-line); }
.compare-side.pass { border-top: 2px solid var(--positive-line); }
.compare-side .compare-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.compare-side.fail .compare-tag { background: var(--negative-bg); color: var(--negative-fg); border: 1px solid var(--negative-border); }
.compare-side.pass .compare-tag { background: var(--positive-bg); color: var(--positive-fg); border: 1px solid var(--positive-border); }
.compare-side h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 12px;
  line-height: 1.3;
}
.compare-side p {
  font-size: var(--font-size-compare);
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 10px;
}
.compare-side p:last-child { margin-bottom: 0; }

/* ─── QUOTE EDITORIAL ─── */
.quote-block {
  text-align: center;
  padding: 56px 32px;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  margin: 32px 0;
}
.quote-text {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 36px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 16px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.quote-text em { color: var(--flame); font-style: italic; }
.quote-attr {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ─── STAT ROW ─── */
.stat-row {
  display: flex;
  gap: 2px;
  background: var(--bg-deep);
  border-radius: 12px;
  overflow: hidden;
}
.stat-card {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 28px 16px;
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--flame);
  margin-bottom: 6px;
  line-height: 1;
}
.stat-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ─── POINTS LIST ─── */
.points-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.point-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
.point-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--flame);
  min-width: 24px;
}
.point-text { font-size: var(--font-size-points); color: var(--text-soft); line-height: 1.65; }
.point-text strong { color: var(--text); font-weight: 600; }

/* ─── GLOSSARY ─── */
.glossary {
  max-width: 980px;
  margin: 80px auto 0;
  padding: 32px 28px 80px;
  border-top: 1px solid var(--card-border);
}
.glossary h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.glossary .glossary-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 28px;
  font-style: italic;
}
.glossary dl {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 14px 28px;
}
@media (max-width: 720px) { .glossary dl { grid-template-columns: 1fr; gap: 4px 0; } }
.glossary dt {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  padding-top: 4px;
}
.glossary dt .en {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 2px;
}
.glossary dd {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--card-border);
}
@media (max-width: 720px) { .glossary dd { padding-bottom: 18px; margin-bottom: 12px; } }

/* ─── CTA CLOSING ─── */
.cta-closing {
  max-width: 820px;
  margin: 64px auto 0;
  padding: 0 28px;
}
.cta-block {
  background: linear-gradient(135deg, var(--cta-bg-start) 0%, var(--cta-bg-end) 100%);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: center;
}
.cta-block h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--cta-fg);
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.cta-block p {
  font-size: 16px;
  color: var(--cta-body-fg);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.cta-button {
  display: inline-block;
  background: var(--cta-button-bg);
  color: var(--cta-button-fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.01em;
  transition: all var(--motion-fast);
  cursor: pointer;
  box-shadow: 0 8px 32px var(--cta-shadow);
}
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 12px 36px var(--cta-shadow-hover); }

/* ─── PROSE WITHIN BODY (paragraph-narrative + cards bullets) ─── */
.prose strong { color: var(--text); font-weight: 600; }
.prose em { color: var(--text-em); }

/* ─── PRESENTER NOTES — trigger sutil + modal ─── */
.presenter-note-trigger {
  display: flex;
  justify-content: center;
  margin: 32px auto 0;
  max-width: 980px;
}
.presenter-note-link {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid var(--card-border);
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: transparent;
  transition: all var(--motion-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.presenter-note-link::before {
  content: 'i';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--card-border);
  color: var(--text-dim);
  font-style: italic;
  font-family: var(--font-display);
  font-size: 10px;
}
.presenter-note-link:hover {
  color: var(--text-muted);
  border-color: var(--text-muted);
}
.presenter-note-link:hover::before {
  background: var(--text-muted);
  color: var(--card-bg);
}

/* Modal overlay */
.presenter-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.presenter-modal.open { display: flex; }
.presenter-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.presenter-modal-box {
  position: relative;
  width: min(800px, 80vw);
  max-height: 80vh;
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px var(--modal-shadow);
  animation: modal-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.presenter-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--modal-close-bg);
  color: var(--modal-text-muted);
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: all var(--motion-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.presenter-modal-close:hover {
  background: var(--modal-close-bg-hover);
  color: var(--modal-close-fg-hover);
}
.presenter-modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--modal-eyebrow);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 24px 40px 0;
}
.presenter-modal-content {
  padding: 8px 40px 36px;
  overflow-y: auto;
  font-family: var(--font-body);
  color: var(--modal-text);
}
.presenter-modal-content h2,
.presenter-modal-content h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--modal-text-strong);
  margin-top: 8px;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.presenter-modal-content h4 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--modal-text-strong);
  margin-top: 22px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.presenter-modal-content p {
  margin-bottom: 14px;
  line-height: 1.7;
  color: var(--modal-text);
  font-size: 14.5px;
}
.presenter-modal-content ul {
  margin-bottom: 16px;
  padding-left: 4px;
  list-style: none;
}
.presenter-modal-content ul li {
  margin-bottom: 8px;
  color: var(--modal-text-soft);
  line-height: 1.65;
  font-size: 14px;
  padding-left: 18px;
  position: relative;
}
.presenter-modal-content ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--modal-code-accent);
  opacity: 0.85;
}
.presenter-modal-content strong {
  color: var(--modal-text-strong);
  font-weight: 600;
}
.presenter-modal-content em { color: var(--modal-text-muted); }
.presenter-modal-content code {
  background: var(--modal-code-bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--modal-code-accent);
  border: 1px solid var(--modal-code-border);
}

/* ─── DIAGRAM MERMAID (diagram-mermaid) ─── */
/* Container con fondo de puntos sutil (whiteboard moderno) + glow en nodos
   + flechas animadas + tipografía display. La inicialización con themeVariables
   en render.py sincroniza colores con los tokens del proyecto. */
.diagram-wrap {
  position: relative;
  background:
    radial-gradient(circle at 1px 1px, var(--dot-pattern) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--card-bg) 0%, color-mix(in srgb, var(--card-bg) 80%, var(--bg)) 100%);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 48px 32px 40px;
  max-width: 1040px;
  margin: 0 auto;
  overflow: visible;
  box-shadow:
    0 2px 24px var(--shadow-soft),
    inset 0 1px 0 var(--sheen);
}
/* Overflow visible para que el glow del hover no se clipe.
   El SVG ya tiene max-width 100% así que se auto-ajusta al ancho del wrap. */
.diagram-wrap .mermaid {
  overflow: visible;
}
.diagram-wrap .mermaid svg {
  overflow: visible !important;
}
.diagram-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 16%; right: 16%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--flame) 50%,
    transparent 100%);
  opacity: 0.4;
}

.diagram-wrap .mermaid {
  background: transparent;
  text-align: center;
  font-family: var(--font-display, 'Quicksand'), sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
  color: transparent;
}
.diagram-wrap .mermaid[data-processed="true"] {
  color: inherit;
}
.diagram-wrap .mermaid svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 24px var(--shadow-mid));
}

/* Rotación neon multi-color — las clases .node-color-N las asigna el JS post-render
   (ver render.py mermaid_block). Esto garantiza que mismo-actor → mismo-color
   en sequence diagrams (el JS taggea por identidad, no por posición DOM). */
.diagram-wrap .mermaid svg .node-color-0 { --node-color: var(--diagram-accent-1); }
.diagram-wrap .mermaid svg .node-color-1 { --node-color: var(--diagram-accent-2); }
.diagram-wrap .mermaid svg .node-color-2 { --node-color: var(--diagram-accent-3); }
.diagram-wrap .mermaid svg .node-color-3 { --node-color: var(--diagram-accent-4); }
.diagram-wrap .mermaid svg .node-color-4 { --node-color: var(--diagram-accent-5); }

/* Nodos: rectángulos / rombos / círculos — borde y glow del color rotado por nodo */
.diagram-wrap .mermaid svg .node rect,
.diagram-wrap .mermaid svg .node polygon,
.diagram-wrap .mermaid svg .node circle,
.diagram-wrap .mermaid svg .node ellipse,
.diagram-wrap .mermaid svg .node path {
  rx: 10;
  ry: 10;
  stroke: var(--node-color) !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 2px 8px var(--shadow-drop-sm))
          drop-shadow(0 0 14px color-mix(in srgb, var(--node-color) 35%, transparent));
  transition: transform 0.25s ease, filter 0.25s ease;
}
.diagram-wrap .mermaid svg .node:hover rect,
.diagram-wrap .mermaid svg .node:hover polygon,
.diagram-wrap .mermaid svg .node:hover circle,
.diagram-wrap .mermaid svg .node:hover ellipse,
.diagram-wrap .mermaid svg .node:hover path {
  filter: drop-shadow(0 4px 14px var(--shadow-drop-lg))
          drop-shadow(0 0 22px color-mix(in srgb, var(--node-color) 70%, transparent));
}

/* Texto dentro de nodos */
.diagram-wrap .mermaid svg .node text,
.diagram-wrap .mermaid svg .nodeLabel,
.diagram-wrap .mermaid svg foreignObject div {
  font-family: var(--font-display, 'Quicksand'), sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  font-size: 14px !important;
}

/* Flechas / edges */
.diagram-wrap .mermaid svg .flowchart-link,
.diagram-wrap .mermaid svg .edge-thickness-normal,
.diagram-wrap .mermaid svg path.path,
.diagram-wrap .mermaid svg .messageLine0,
.diagram-wrap .mermaid svg .messageLine1 {
  stroke-width: 2px !important;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--flame) 30%, transparent));
}
.diagram-wrap .mermaid svg .flowchart-link {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: diagram-draw 1.6s ease-out forwards;
}
@keyframes diagram-draw {
  to { stroke-dashoffset: 0; }
}

/* Etiquetas de edges — solo aplicar fondo si tienen contenido real.
   Mermaid genera .edgeLabel también para flechas SIN texto, y un rect con bg
   pinta una cajita fantasma flotando. Targeting al div con texto resuelve. */
.diagram-wrap .mermaid svg .edgeLabel {
  font-family: var(--font-display, 'Quicksand'), sans-serif !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  background: transparent !important;
}
.diagram-wrap .mermaid svg .edgeLabel foreignObject div:not(:empty):not(:has(span:empty)) {
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
}
/* Quitar el rect de fondo automático que Mermaid mete en edgeLabels vacíos */
.diagram-wrap .mermaid svg .edgeLabel > rect,
.diagram-wrap .mermaid svg .edgeLabel .labelBkg {
  fill: transparent !important;
  stroke: none !important;
}

/* ─── SEQUENCE DIAGRAM ─── */
/* Actores: cada identidad (Usuario, App, Servidor) recibe SU color consistente
   tanto en su rect-top como en su rect-bottom. El JS post-render asigna actor-color-N. */
.diagram-wrap .mermaid svg .actor-color-0 { --actor-color: var(--diagram-accent-1); }
.diagram-wrap .mermaid svg .actor-color-1 { --actor-color: var(--diagram-accent-2); }
.diagram-wrap .mermaid svg .actor-color-2 { --actor-color: var(--diagram-accent-3); }
.diagram-wrap .mermaid svg .actor-color-3 { --actor-color: var(--diagram-accent-4); }
.diagram-wrap .mermaid svg .actor-color-4 { --actor-color: var(--diagram-accent-5); }

/* Mensajes: cada mensaje rota color por orden — guía visual del progreso temporal */
.diagram-wrap .mermaid svg .msg-color-0 { stroke: var(--diagram-accent-1) !important; }
.diagram-wrap .mermaid svg .msg-color-1 { stroke: var(--diagram-accent-2) !important; }
.diagram-wrap .mermaid svg .msg-color-2 { stroke: var(--diagram-accent-3) !important; }
.diagram-wrap .mermaid svg .msg-color-3 { stroke: var(--diagram-accent-4) !important; }
.diagram-wrap .mermaid svg .msg-color-4 { stroke: var(--diagram-accent-5) !important; }
/* Glow del mensaje correspondiente */
.diagram-wrap .mermaid svg .msg-color-0 { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--diagram-accent-1) 50%, transparent)); }
.diagram-wrap .mermaid svg .msg-color-1 { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--diagram-accent-2) 50%, transparent)); }
.diagram-wrap .mermaid svg .msg-color-2 { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--diagram-accent-3) 50%, transparent)); }
.diagram-wrap .mermaid svg .msg-color-3 { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--diagram-accent-4) 50%, transparent)); }
.diagram-wrap .mermaid svg .msg-color-4 { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--diagram-accent-5) 50%, transparent)); }

/* Timeline / mindmap: secciones por orden */
.diagram-wrap .mermaid svg .tl-color-0 { --tl-color: var(--diagram-accent-1); }
.diagram-wrap .mermaid svg .tl-color-1 { --tl-color: var(--diagram-accent-2); }
.diagram-wrap .mermaid svg .tl-color-2 { --tl-color: var(--diagram-accent-3); }
.diagram-wrap .mermaid svg .tl-color-3 { --tl-color: var(--diagram-accent-4); }
.diagram-wrap .mermaid svg .tl-color-4 { --tl-color: var(--diagram-accent-5); }

.diagram-wrap .mermaid svg .actor {
  stroke: var(--actor-color) !important;
  stroke-width: 2px !important;
  rx: 8;
  ry: 8;
  filter: drop-shadow(0 2px 8px var(--shadow-drop-sm))
          drop-shadow(0 0 14px color-mix(in srgb, var(--actor-color) 35%, transparent));
  transition: filter 0.25s ease;
}
.diagram-wrap .mermaid svg .actor:hover {
  filter: drop-shadow(0 4px 14px var(--shadow-drop-md))
          drop-shadow(0 0 22px color-mix(in srgb, var(--actor-color) 70%, transparent));
}
.diagram-wrap .mermaid svg text.actor > tspan,
.diagram-wrap .mermaid svg .actor-box text,
.diagram-wrap .mermaid svg .actor + text tspan {
  font-family: var(--font-display, 'Quicksand'), sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
/* Lifeline vertical de cada actor — dashed muted */
.diagram-wrap .mermaid svg line.actor-line {
  stroke: color-mix(in srgb, var(--text) 22%, transparent) !important;
  stroke-dasharray: 4 4;
  stroke-width: 1.2px !important;
}
/* Mensajes (flechas horizontales) — el color por orden lo asigna .msg-color-N;
   aquí solo definimos grosor + cap + el patrón dashed para mensajes de respuesta */
.diagram-wrap .mermaid svg .messageLine0,
.diagram-wrap .mermaid svg .messageLine1 {
  stroke-width: 2px !important;
  stroke-linecap: round;
}
.diagram-wrap .mermaid svg .messageLine1 {
  stroke-dasharray: 6 4;
}
/* Texto de los mensajes con pill bg para legibilidad */
.diagram-wrap .mermaid svg .messageText {
  font-family: var(--font-display, 'Quicksand'), sans-serif !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  fill: var(--text) !important;
}
/* Activation boxes (cuando un actor procesa) */
.diagram-wrap .mermaid svg rect.activation0,
.diagram-wrap .mermaid svg rect.activation1,
.diagram-wrap .mermaid svg rect.activation2 {
  fill: color-mix(in srgb, var(--flame) 20%, transparent) !important;
  stroke: var(--flame) !important;
  stroke-width: 1px !important;
}

/* ─── TIMELINE ─── */
/* Headers de período (Q1, Q2, ... o Ene, Feb, ...) = color FUERTE.
   Eventos hijos (Discovery, Brief, Build, ...) = mismo color, variante SUAVE.
   El JS post-render asigna .tl-header al header y .tl-child a los eventos. */

/* Headers: stroke saturado + fill tinted 25% + glow fuerte */
.diagram-wrap .mermaid svg .tl-header rect,
.diagram-wrap .mermaid svg .tl-header > rect,
.diagram-wrap .mermaid svg .tl-header circle,
.diagram-wrap .mermaid svg .tl-header polygon,
.diagram-wrap .mermaid svg .tl-header path {
  fill: color-mix(in srgb, var(--tl-color) 28%, var(--card-bg)) !important;
  stroke: var(--tl-color) !important;
  stroke-width: 2.2px !important;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--tl-color) 55%, transparent));
}
.diagram-wrap .mermaid svg .tl-header text,
.diagram-wrap .mermaid svg .tl-header tspan,
.diagram-wrap .mermaid svg .tl-header foreignObject div {
  fill: var(--tl-color) !important;
  color: var(--tl-color) !important;
  font-family: var(--font-display, 'Quicksand'), sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px;
}

/* Eventos hijos: stroke al 55% de saturación + fill apenas tinted + glow sutil */
.diagram-wrap .mermaid svg .tl-child rect,
.diagram-wrap .mermaid svg .tl-child > rect,
.diagram-wrap .mermaid svg .tl-child circle,
.diagram-wrap .mermaid svg .tl-child polygon,
.diagram-wrap .mermaid svg .tl-child path {
  fill: color-mix(in srgb, var(--tl-color) 10%, var(--card-bg)) !important;
  stroke: color-mix(in srgb, var(--tl-color) 55%, transparent) !important;
  stroke-width: 1.4px !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tl-color) 25%, transparent));
}
.diagram-wrap .mermaid svg .tl-child text,
.diagram-wrap .mermaid svg .tl-child tspan,
.diagram-wrap .mermaid svg .tl-child foreignObject div {
  fill: var(--text) !important;
  color: var(--text) !important;
  font-family: var(--font-display, 'Quicksand'), sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* Cluster / subgraph */
.diagram-wrap .mermaid svg .cluster rect {
  stroke-dasharray: 6 4;
  opacity: 0.85;
  rx: 14;
  ry: 14;
}
.diagram-wrap .mermaid svg .cluster text {
  font-family: var(--font-display, 'Quicksand'), sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 11px !important;
}

.diagram-caption {
  margin-top: 22px;
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
  font-weight: 300;
  letter-spacing: 0.2px;
}

/* ─── HERO de imagen única — per .claude/rules/777-html-image-insertion.md §3 ─── */
/* Cuando una sección visual-asset tiene UNA sola imagen, NUNCA va como thumbnail.
   Ocupa el ancho nativo de la columna principal (~980px max). */
.image-hero {
  margin: 28px auto;
  max-width: 980px;
  padding: 0 24px;
}
.image-hero .image-frame {
  padding: 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow:
    0 4px 18px var(--shadow-mid),
    inset 0 1px 0 var(--sheen);
  cursor: zoom-in;
  position: relative;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.image-hero .image-frame:hover {
  border-color: color-mix(in srgb, var(--flame) 45%, var(--card-border));
  box-shadow:
    0 8px 26px var(--shadow-strong),
    0 0 24px color-mix(in srgb, var(--flame) 25%, transparent);
}
.image-hero .image-frame::after {
  content: "⌖ ampliar";
  position: absolute;
  bottom: 12px; right: 28px;
  font-size: 11px;
  color: var(--text);
  background: var(--image-veil);
  padding: 5px 11px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.image-hero .image-frame:hover::after { opacity: 1; }
.image-hero .image-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
}
.image-hero figcaption {
  text-align: center;
  margin-top: 16px;
  font-family: var(--font-body, 'Inter'), sans-serif;
}
.image-hero figcaption strong {
  display: block;
  color: var(--flame);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.image-hero figcaption span {
  display: block;
  color: var(--text-muted);
  font-size: 12.5px;
  font-style: italic;
  font-weight: 300;
}

/* ─── NAV LOGO + PILL GROUP ───────────────────────────────────────────────
   Aditivo, retrocompatible: sin `slots.logo` el nav-logo no se emite y el
   nav-pill-group ocupa toda la barra igual que antes — cero cambio visual
   para un proyecto que no declare logo. La novedad real es que las pastillas
   ahora quedan agrupadas y centradas en el espacio disponible en vez de
   pegadas a la izquierda: con pocas pastillas (3-4) se nota mucho más. */
.nav-top { gap: 18px; }
.nav-logo { flex: 0 0 auto; display: flex; align-items: center; }
.nav-logo img { height: 26px; width: auto; display: block; }
.nav-pill-group {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* El color de reposo de cada pastilla vive en `section-palette.css`, indexado
   por `[data-section="sN"]` — el MISMO atributo que ya usa el estado activo.
   Así una pastilla SIEMPRE combina con el tema real de la sección a la que
   apunta (no con su posición en la barra, que es lo que rompía cuando el
   plan no declaraba `section_theme` explícito por pastilla). */

/* ─── POINT-LIST — número por punto, un tono distinto cada uno ──────────── */
.point-item:nth-child(10n+1) .point-num { color: var(--deck-hue-1); }
.point-item:nth-child(10n+2) .point-num { color: var(--deck-hue-2); }
.point-item:nth-child(10n+3) .point-num { color: var(--deck-hue-3); }
.point-item:nth-child(10n+4) .point-num { color: var(--deck-hue-4); }
.point-item:nth-child(10n+5) .point-num { color: var(--deck-hue-5); }
.point-item:nth-child(10n+6) .point-num { color: var(--deck-hue-6); }
.point-item:nth-child(10n+7) .point-num { color: var(--deck-hue-7); }
.point-item:nth-child(10n+8) .point-num { color: var(--deck-hue-8); }
.point-item:nth-child(10n+9) .point-num { color: var(--deck-hue-9); }
.point-item:nth-child(10n)   .point-num { color: var(--deck-hue-10); }

/* ─── FOOTER ───────────────────────────────────────────────────────────── */
.site-footer {
  max-width: 980px;
  margin: 0 auto;
  padding: 56px 28px 64px;
  text-align: center;
  border-top: 1px solid var(--card-border);
}
.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.footer-logo { height: 24px; width: auto; display: block; }
.footer-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-heading);
}
.footer-tagline {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 16px;
}
.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.footer-links a {
  font-size: 12.5px;
  color: var(--text-dim);
  text-decoration: none;
}
.footer-links a:hover { color: var(--flame); }
.footer-copy {
  font-size: 11.5px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}


/* ─── engine/section-palette.css ─── */
/* 777 Explainer Engine — section-palette.css
 * 10 temas de color por sección (s1..s10).
 * Cada theme aplica a: section-pill dot (color del theme), narrative-body border-top, nav-pill activo.
 *
 * Los diez tonos NO se queman acá: se consumen de `--deck-hue-1..10`, el mismo
 * contrato que gobierna el modo deck (`render.py::_resolve_deck_hues`). La reserva
 * se declara en `base.css`, que se carga siempre. Un proyecto que declare esos diez
 * tokens en su `explainer-theme.css` cambia los temas de sección sin escribir un solo
 * selector — antes eso solo funcionaba en modo deck.
 *
 * Las CARDS también consumen esta escala (`base.css`, rotación de 6). Decisión Q2=A
 * de la task 03: un solo vocabulario decorativo para todo el motor.
 */

/* 01 — Azul/Púrpura */
.s1 .section-pill { color: var(--deck-hue-1); border-color: color-mix(in srgb, var(--deck-hue-1) 35%, var(--section-pill-border)); }
.s1 .section-pill .dot { background: var(--deck-hue-1); box-shadow: 0 0 6px var(--deck-hue-1); }
.s1 .narrative-body { border-top-color: var(--deck-hue-1); }
.nav-pill[data-section="s1"] { border-color: color-mix(in srgb, var(--deck-hue-1) 40%, var(--nav-border)); color: color-mix(in srgb, var(--deck-hue-1) 65%, var(--text-muted)); }
.nav-pill[data-section="s1"].active { background: var(--s1-active-bg); border-color: var(--s1-active-border); color: var(--nav-pill-active-fg); }

/* 02 — Dorado */
.s2 .section-pill { color: var(--deck-hue-2); border-color: color-mix(in srgb, var(--deck-hue-2) 35%, var(--section-pill-border)); }
.s2 .section-pill .dot { background: var(--deck-hue-2); box-shadow: 0 0 6px var(--deck-hue-2); }
.s2 .narrative-body { border-top-color: var(--deck-hue-2); }
.nav-pill[data-section="s2"] { border-color: color-mix(in srgb, var(--deck-hue-2) 40%, var(--nav-border)); color: color-mix(in srgb, var(--deck-hue-2) 65%, var(--text-muted)); }
.nav-pill[data-section="s2"].active { background: var(--s2-active-bg); border-color: var(--s2-active-border); color: var(--nav-pill-active-fg); }

/* 03 — Azul brillante */
.s3 .section-pill { color: var(--deck-hue-3); border-color: color-mix(in srgb, var(--deck-hue-3) 35%, var(--section-pill-border)); }
.s3 .section-pill .dot { background: var(--deck-hue-3); box-shadow: 0 0 6px var(--deck-hue-3); }
.s3 .narrative-body { border-top-color: var(--deck-hue-3); }
.nav-pill[data-section="s3"] { border-color: color-mix(in srgb, var(--deck-hue-3) 40%, var(--nav-border)); color: color-mix(in srgb, var(--deck-hue-3) 65%, var(--text-muted)); }
.nav-pill[data-section="s3"].active { background: var(--s3-active-bg); border-color: var(--s3-active-border); color: var(--nav-pill-active-fg); }

/* 04 — Rojo/Coral */
.s4 .section-pill { color: var(--deck-hue-4); border-color: color-mix(in srgb, var(--deck-hue-4) 35%, var(--section-pill-border)); }
.s4 .section-pill .dot { background: var(--deck-hue-4); box-shadow: 0 0 6px var(--deck-hue-4); }
.s4 .narrative-body { border-top-color: var(--deck-hue-4); }
.nav-pill[data-section="s4"] { border-color: color-mix(in srgb, var(--deck-hue-4) 40%, var(--nav-border)); color: color-mix(in srgb, var(--deck-hue-4) 65%, var(--text-muted)); }
.nav-pill[data-section="s4"].active { background: var(--s4-active-bg); border-color: var(--s4-active-border); color: var(--nav-pill-active-fg); }

/* 05 — Naranja */
.s5 .section-pill { color: var(--deck-hue-5); border-color: color-mix(in srgb, var(--deck-hue-5) 35%, var(--section-pill-border)); }
.s5 .section-pill .dot { background: var(--deck-hue-5); box-shadow: 0 0 6px var(--deck-hue-5); }
.s5 .narrative-body { border-top-color: var(--deck-hue-5); }
.nav-pill[data-section="s5"] { border-color: color-mix(in srgb, var(--deck-hue-5) 40%, var(--nav-border)); color: color-mix(in srgb, var(--deck-hue-5) 65%, var(--text-muted)); }
.nav-pill[data-section="s5"].active { background: var(--s5-active-bg); border-color: var(--s5-active-border); color: var(--nav-pill-active-fg); }

/* 06 — Verde */
.s6 .section-pill { color: var(--deck-hue-6); border-color: color-mix(in srgb, var(--deck-hue-6) 35%, var(--section-pill-border)); }
.s6 .section-pill .dot { background: var(--deck-hue-6); box-shadow: 0 0 6px var(--deck-hue-6); }
.s6 .narrative-body { border-top-color: var(--deck-hue-6); }
.nav-pill[data-section="s6"] { border-color: color-mix(in srgb, var(--deck-hue-6) 40%, var(--nav-border)); color: color-mix(in srgb, var(--deck-hue-6) 65%, var(--text-muted)); }
.nav-pill[data-section="s6"].active { background: var(--s6-active-bg); border-color: var(--s6-active-border); color: var(--nav-pill-active-fg); }

/* 07 — Púrpura/Magenta */
.s7 .section-pill { color: var(--deck-hue-7); border-color: color-mix(in srgb, var(--deck-hue-7) 35%, var(--section-pill-border)); }
.s7 .section-pill .dot { background: var(--deck-hue-7); box-shadow: 0 0 6px var(--deck-hue-7); }
.s7 .narrative-body { border-top-color: var(--deck-hue-7); }
.nav-pill[data-section="s7"] { border-color: color-mix(in srgb, var(--deck-hue-7) 40%, var(--nav-border)); color: color-mix(in srgb, var(--deck-hue-7) 65%, var(--text-muted)); }
.nav-pill[data-section="s7"].active { background: var(--s7-active-bg); border-color: var(--s7-active-border); color: var(--nav-pill-active-fg); }

/* 08 — Cyan/Teal */
.s8 .section-pill { color: var(--deck-hue-8); border-color: color-mix(in srgb, var(--deck-hue-8) 35%, var(--section-pill-border)); }
.s8 .section-pill .dot { background: var(--deck-hue-8); box-shadow: 0 0 6px var(--deck-hue-8); }
.s8 .narrative-body { border-top-color: var(--deck-hue-8); }
.nav-pill[data-section="s8"] { border-color: color-mix(in srgb, var(--deck-hue-8) 40%, var(--nav-border)); color: color-mix(in srgb, var(--deck-hue-8) 65%, var(--text-muted)); }
.nav-pill[data-section="s8"].active { background: var(--s8-active-bg); border-color: var(--s8-active-border); color: var(--nav-pill-active-fg); }

/* 09 — Rosa/Magenta */
.s9 .section-pill { color: var(--deck-hue-9); border-color: color-mix(in srgb, var(--deck-hue-9) 35%, var(--section-pill-border)); }
.s9 .section-pill .dot { background: var(--deck-hue-9); box-shadow: 0 0 6px var(--deck-hue-9); }
.s9 .narrative-body { border-top-color: var(--deck-hue-9); }
.nav-pill[data-section="s9"] { border-color: color-mix(in srgb, var(--deck-hue-9) 40%, var(--nav-border)); color: color-mix(in srgb, var(--deck-hue-9) 65%, var(--text-muted)); }
.nav-pill[data-section="s9"].active { background: var(--s9-active-bg); border-color: var(--s9-active-border); color: var(--nav-pill-active-fg); }

/* 10 — Dorado amarillo */
.s10 .section-pill { color: var(--deck-hue-10); border-color: color-mix(in srgb, var(--deck-hue-10) 35%, var(--section-pill-border)); }
.s10 .section-pill .dot { background: var(--deck-hue-10); box-shadow: 0 0 6px var(--deck-hue-10); }
.s10 .narrative-body { border-top-color: var(--deck-hue-10); }
.nav-pill[data-section="s10"] { border-color: color-mix(in srgb, var(--deck-hue-10) 40%, var(--nav-border)); color: color-mix(in srgb, var(--deck-hue-10) 65%, var(--text-muted)); }
.nav-pill[data-section="s10"].active { background: var(--s10-active-bg); border-color: var(--s10-active-border); color: var(--nav-pill-active-fg); }


/* ─── proyecto:poolixo explainer-theme.css ─── */
/* Poolixo — tema del explainer.
 *
 * MODO OSCURO — cambio pedido por el dueño (2026-08-28): el piloto en Claro se sentía frío y
 * costaba leerlo. La base de estos tokens es la referencia YA COMPROBADA de la task 05
 * (`TASKS/05-motor-explainer-proyectos-externos/poolixo-modo-oscuro-referencia.css`), que midió
 * cada contraste contra `mi-negocio/brand/diseno.md`. Este archivo la retoma y le suma:
 *   1. Tipografía real de Poolixo (Outfit + Lexend) — el motor traía Syne/DM Sans por defecto.
 *   2. Un degradado de héroe que cruza agua → sol (antes solo tenía un tramo cálido al final).
 *   3. Un cierre (CTA) que repite ese mismo cruce agua → sol, en vez de coral → pizarra.
 * Todo valor de color reutiliza un hex YA medido en este proyecto — cero color nuevo sin medir.
 *
 * Colores leídos de C:/Projects/BizBox_OS/bizbox_poolixo_home/mi-negocio/brand/diseno.md.
 * Ese clon es de SOLO LECTURA para este workspace. Cero selectores: todo es token.
 */

:root {
  /* El motor lee esto y antepone (o no) themes/light.css. El plan no declara nada. */
  --surface: dark;

  /* ── Tipografía — la suya, no la del motor ──────────────────────────────── */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body   : 'Lexend', system-ui, sans-serif;

  /* Tamaño/peso del cuerpo — el motor por defecto es más chico y el título más
     pesado que lo que usa su propio sitio. Medido contra
     `mi-negocio/website/assets/sales-page.css`: su body real es 17px, y sus
     h1/h2/h3 van en peso 600 (nunca 800). Se iguala acá. */
  --font-weight-hero   : 600;   /* su sitio: h1,h2,h3{font-weight:600} */
  --font-size-narrative: 17px;  /* su sitio: body{font-size:17px} */
  --font-size-points   : 15.5px;
  --font-size-compare  : 15.5px;

  /* ── Superficies — su escala tonal grafito-agua ─────────────────────────── */
  --bg          : #0A131C;
  --card-bg     : #11202C;
  --card-border : #22394A;
  --card-hover  : #182A38;
  --nav-bg      : #11202C;
  --nav-border  : #22394A;
  --nav-bg-veil : rgba(10,19,28,0.92);
  --bg-deep     : #182A38;

  /* ── Texto — anclado a sus tres niveles declarados ───────────────────────── */
  --text         : #ECF1F7;   /* 16.47:1 */
  --text-strong  : #e3e9f0;   /* 15.30:1 */
  --text-heading : #d9e0e9;   /* 14.06:1 */
  --text-body    : #D6DEE8;   /* 13.78:1 — su cuerpo */
  --text-soft    : #c3cdd9;   /* 11.63:1 */
  --text-em      : #b7c2d0;   /* 10.37:1 */
  --text-muted   : #9DACBC;   /*  8.07:1 — su apagado */
  --text-dim     : #7489a0;   /*  5.19:1 */

  /* ── Acento ─────────────────────────────────────────────────────────────── */
  --flame      : #F17A4E;   /* 6.80:1 — su coral sobre-oscuro */
  --flame-soft : color-mix(in srgb, var(--flame) 15%, transparent);

  /* ── Degradado del título — agua → sol completo ─────────────────────────── */
  /* La referencia de la task 05 iba azul→teal→dorado (dos tramos fríos, uno
     cálido). Acá el cálido entra antes, para que el título cruce agua → sol de
     punta a punta, no solo al final. */
  --hero-grad-1: #5FB4E0;   /* azul piscina claro, 8.10:1 — agua */
  --hero-grad-2: #F17A4E;   /* coral claro,        6.80:1 — sol */
  --hero-grad-3: #E3A62B;   /* dorado sol,         8.69:1 — sol */

  /* ── Resaltados en línea ────────────────────────────────────────────────── */
  --pop-coral: #F17A4E;   /* 6.80:1 */
  --pop-green: #3FC4B8;   /* 8.73:1 */
  --pop-teal : #5FB4E0;   /* 8.10:1 */
  --pop-gold : #E3A62B;   /* 8.69:1 */

  /* ── Escala decorativa — sus colores en versión sobre-oscuro ────────────── */
  --deck-hue-1 : #5FB4E0;   /* azul piscina claro */
  --deck-hue-2 : #E3A62B;   /* dorado sol */
  --deck-hue-3 : #3FC4B8;   /* teal claro */
  --deck-hue-4 : #F17A4E;   /* coral claro */
  --deck-hue-5 : #C9A87C;   /* travertino */
  --deck-hue-6 : #7E96A6;   /* pizarra-agua clara */
  --deck-hue-7 : #5FB4E0;
  --deck-hue-8 : #3FC4B8;
  --deck-hue-9 : #F17A4E;
  --deck-hue-10: #E3A62B;
  --deck-hue-2-bright: #f0bb52;

  /* ── Bloque de cierre — el mismo cruce agua → sol del título ────────────── */
  /* Antes: coral → pizarra (el dueño lo marcó "horrible" — no tenía relación
     visual con el resto de la pieza). Ahora repite la historia del héroe:
     empieza en agua, termina en sol. Blanco encima ya medido en ambos
     extremos: azul 5.49:1 (calculado, fórmula WCAG estándar) y coral 6.80:1
     (medido en la referencia de la task 05). */
  --cta-bg-start: #0E6FA3;   /* azul piscina base — agua */
  --cta-bg-end  : #C94420;   /* coral base — sol */
  --cta-fg      : #fff;
  --cta-pop-1   : #ffe0cc;
  --cta-pop-2   : #ffffff;
  --cta-pop-3   : #cfeaf7;

  /* ── Separador ──────────────────────────────────────────────────────────── */
  --divider-line-soft: rgba(159,180,200,0.12);
  --divider-line-mid : rgba(159,180,200,0.34);
}