/* ============================================================
   ZPX Forge — landing de producto y modelo de delivery

   Se carga después de css/styles.css y reutiliza sus tokens
   (:root), la navegación, los botones y el footer del landing.
   Los componentes propios de estas páginas usan el prefijo `fx-`
   para no colisionar con las clases del landing.

   Reglas del sistema visual:
     · una sola jerarquía de borde y sombra;
     · el color siempre significa algo — morado = capacidad y Forge
       Units, turquesa = validado o listo, ámbar = espera una decisión
       humana, rojo = devuelto;
     · el texto largo nunca pasa de ~70 caracteres por línea.
   ============================================================ */

.forge-page {
  --fx-line: var(--line);
  --fx-line-strong: #D9DEE7;
  --fx-teal: #3FD5C2;
  --fx-ok: #0A7160;
  --fx-warn: #8A5A0B;
  --fx-bad: #B33A44;
}

/* Etiqueta de producto: misma tipografía de marca, sin mayúsculas forzadas. */
.fx-product-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--purple-100);
  color: var(--purple-dark);
  font-family: var(--font-brand);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.2;
}

/* ============================================================
   HERO — mismas clases que el landing (.hero, .hero-copy, .hero-proof)
   ============================================================ */
.fx-hero-plain { min-height: 640px; }
/* Halo de marca en lugar de fotografía: ZPX Forge es multisector y el artwork
   de utilities del landing no le corresponde. */
.fx-hero-glow {
  position: absolute;
  z-index: 0;
  top: -12%;
  right: -8%;
  width: min(62vw, 780px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(123,47,255,.16), rgba(123,47,255,.05) 45%, transparent 70%);
  pointer-events: none;
}
.fx-hero-plain .hero-layout { position: relative; z-index: 2; }

.fx-backlink { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; color: #B7B2C1; font-size: .8rem; font-weight: 700; transition: color .25s ease; }
.fx-backlink svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform .25s var(--ease); }
.fx-backlink:hover { color: white; }
.fx-backlink:hover svg { transform: translateX(-4px); }
/* Variante para fondo claro */
.fx-backlink-dark { color: var(--muted); }
.fx-backlink-dark:hover { color: var(--purple); }

/* ============================================================
   ESTRUCTURA DE SECCIONES
   ============================================================ */
.fx-section { padding: clamp(64px, 8vw, 120px) 0; background: var(--paper); }
.fx-section-soft { background: var(--surface); }
.fx-section-dark { color: white; background: var(--night); }

.fx-head { max-width: 860px; margin-bottom: 40px; }
/* Segundo titular dentro de una misma sección (dos bloques seguidos) */
.fx-head-second { margin-top: 64px; }
.fx-title { margin-bottom: 18px; font-size: clamp(2.25rem, 3.4vw, 3.25rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.08; }
.fx-lead { max-width: 70ch; color: var(--ink-soft); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.65; }
.fx-section-dark .fx-lead { color: #ADA9B6; }
.fx-section-dark .fx-title { color: white; }

.fx-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.fx-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.fx-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }

.fx-card {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--fx-line);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.fx-card h3 { margin-bottom: 10px; font-size: 1.08rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.fx-card p { color: var(--muted); font-size: .9rem; line-height: 1.65; }
.fx-card > .fx-pill + h3 { margin-top: 14px; }
.fx-card.dark { border-color: #302D3A; background: var(--night-soft); color: white; }
.fx-card.dark p { color: #A6A2AE; }
.fx-section-soft .fx-card { box-shadow: var(--shadow-sm); }
.fx-section-dark .fx-card { border-color: #302D3A; background: var(--night-soft); color: white; }
.fx-section-dark .fx-card p { color: #A6A2AE; }
.fx-section-dark .fx-card h3 { color: white; }

/* Métrica destacada dentro de una tarjeta: un solo nivel jerárquico. */
.fx-card-metric { margin-top: auto; padding-top: 16px; color: var(--purple); font-size: 1.6rem; font-weight: 700; letter-spacing: -.04em; }
.fx-card-metric span { display: block; margin-top: 4px; color: var(--muted); font-size: .74rem; font-weight: 400; letter-spacing: 0; }

.fx-num { margin-bottom: 14px; color: var(--purple); font-size: 2.35rem; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.fx-card.dark .fx-num { color: #B996FF; }

.fx-pill { display: inline-flex; align-self: flex-start; padding: 6px 11px; border-radius: 999px; background: var(--purple-50); color: var(--purple); font-size: .66rem; font-weight: 700; letter-spacing: .04em; }
.fx-section-dark .fx-pill { background: #251A42; color: #B99AFF; }

.fx-quote {
  max-width: 70ch;
  padding: 26px;
  border: 1px solid rgba(123,47,255,.34);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--purple-50), var(--paper));
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.4;
}
.fx-section-dark .fx-quote { border-color: #4B2A91; background: var(--night-soft); color: white; }
.fx-spacer { height: 30px; }

.fx-note, .fx-card .fx-note { color: var(--muted); font-size: .78rem; line-height: 1.65; }
.fx-note-block { max-width: 76ch; margin-top: 20px; }
.fx-note a { color: var(--purple); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fx-section-dark .fx-note, .fx-note-light { color: #918D9B; }

/* ============================================================
   FLUJO POR PASOS — riel con nodos, sin cajas
   ============================================================ */
.fx-flow { margin-top: 34px; }
.fx-flow-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0 18px;
  list-style: none;
}
.fx-flow-step { position: relative; padding-right: 8px; }
/* El riel se dibuja por segmentos, de un nodo al siguiente: así termina
   exactamente en el último nodo sin depender de cálculos de ancho. */
.fx-flow-step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 31px;
  left: 5.5px;
  width: calc(100% + 18px);
  height: 1px;
  background: rgba(123,47,255,.24);
}
.fx-flow-step:nth-child(6)::before { background: linear-gradient(90deg, rgba(123,47,255,.24), rgba(63,213,194,.5)); }
/* El Go es una puerta de decisión humana: se marca en ámbar, el color que
   en todo el sitio significa "espera una persona". */
.fx-flow-step-gate .fx-flow-dot { border-color: var(--amber); }
.fx-flow-step-gate:hover .fx-flow-dot { background: var(--amber); }
.fx-flow-num { display: block; height: 16px; color: #A9A5B4; font-size: .64rem; font-weight: 700; letter-spacing: .12em; }
.fx-flow-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 11px;
  height: 11px;
  margin: 9px 0 16px;
  border: 1.5px solid var(--purple);
  border-radius: 50%;
  background: var(--surface);
  transition: transform .25s var(--ease), background .25s ease;
}
.fx-flow-step:hover .fx-flow-dot { transform: scale(1.35); background: var(--purple); }
/* El último paso cierra el ciclo: nodo lleno y en el color de acento. */
.fx-flow-step-loop .fx-flow-dot { border-color: var(--fx-teal); background: var(--fx-teal); }
.fx-flow-step-loop .fx-flow-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(63,213,194,.45);
  border-radius: 50%;
}
.fx-flow-step b { display: block; margin-bottom: 6px; font-size: .95rem; letter-spacing: -.01em; }
.fx-flow-desc { display: block; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.fx-flow-loop-note { margin-top: 22px; color: var(--muted); font-size: .76rem; text-align: right; }
.fx-flow-loop-note::before { content: '↺ '; color: var(--fx-teal); font-weight: 700; }

/* ============================================================
   LISTAS DE CHEQUEO Y DESCARTE
   ============================================================ */
.fx-check, .fx-cross { list-style: none; }
.fx-check li, .fx-cross li { position: relative; margin: 12px 0; padding-left: 28px; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.fx-check li::before { content: '✓'; position: absolute; left: 0; color: var(--fx-ok); font-weight: 700; }
.fx-cross li::before { content: '×'; position: absolute; left: 0; color: var(--fx-bad); font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.fx-section-dark .fx-check li, .fx-section-dark .fx-cross li { color: #A6A2AE; }
.fx-section-dark .fx-check li::before { color: var(--fx-teal); }
.fx-check-two { columns: 2; column-gap: 40px; }
.fx-check-two li { break-inside: avoid; }
.fx-card .fx-check li { font-size: .88rem; }

/* ============================================================
   TABLAS — escala de Forge Units, comparativas, RACI y estados
   ============================================================ */
.fx-table-wrap { overflow-x: auto; border: 1px solid var(--fx-line); border-radius: var(--radius-md); background: var(--paper); }
.fx-section-soft .fx-table-wrap { box-shadow: var(--shadow-sm); }
.fx-section-dark .fx-table-wrap { border-color: #302D3A; background: var(--night-soft); }

.fx-table { width: 100%; border-collapse: collapse; text-align: left; }
.fx-table-caption { padding: 16px 20px 0; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.fx-section-dark .fx-table-caption { color: #918D9B; }
.fx-table thead th {
  padding: 14px 20px;
  border-bottom: 1px solid var(--fx-line);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fx-table tbody th, .fx-table tbody td { padding: 14px 20px; border-bottom: 1px solid var(--fx-line); font-size: .92rem; line-height: 1.55; vertical-align: top; }
.fx-table tbody tr:last-child th, .fx-table tbody tr:last-child td { border-bottom: 0; }
.fx-table tbody th { font-weight: 700; }
.fx-table tbody td { color: var(--ink-soft); }
.fx-table .num { width: 92px; text-align: right; }
.fx-table .num b { color: var(--purple); font-size: 1.15rem; letter-spacing: -.03em; }
.fx-section-dark .fx-table thead th { border-color: #302D3A; color: #918D9B; }
.fx-section-dark .fx-table tbody th, .fx-section-dark .fx-table tbody td { border-color: #302D3A; }
.fx-section-dark .fx-table tbody th { color: white; }
.fx-section-dark .fx-table tbody td { color: #A6A2AE; }

/* La comparativa marca la columna de ZPX Forge sin atacar al otro modelo. */
.fx-table-compare thead th:last-child { color: var(--purple); }
.fx-table-compare tbody td:last-child { background: var(--purple-50); color: var(--ink); font-weight: 500; }

.fx-table-raci td { font-variant-numeric: tabular-nums; font-weight: 700; }
.fx-table-raci thead th:not(:first-child), .fx-table-raci tbody td { width: 210px; }

/* Variables que considera la estimación: chips, no otra tabla. */
.fx-fu-vars { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; list-style: none; }
.fx-fu-vars li {
  padding: 9px 14px;
  border: 1px solid var(--fx-line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 600;
}
.fx-fu-vars-inline { margin-top: 4px; gap: 5px; }
.fx-fu-vars-inline li { padding: 4px 8px; font-size: .62rem; }

/* ============================================================
   FORGE PLAN — Capacity + Velocity
   ============================================================ */
.fx-plan { padding: 34px; border: 1px solid #302D3A; border-radius: var(--radius-lg); background: linear-gradient(150deg, rgba(123,47,255,.12), rgba(255,255,255,.02) 60%); }
.fx-plan-title { margin-bottom: 22px; color: #C7AEFF; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.fx-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.fx-plan-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid #3A3547; border-radius: var(--radius-md); background: rgba(13,11,19,.55); }
.fx-plan-question { margin-bottom: 12px; color: var(--fx-teal); font-size: .76rem; font-weight: 700; }
.fx-plan-card h3 { margin-bottom: 10px; font-size: 1.5rem; font-weight: 500; letter-spacing: -.035em; }
.fx-plan-def { max-width: 46ch; color: #A6A2AE; font-size: .9rem; line-height: 1.6; }
.fx-plan-metric { margin-top: auto; padding-top: 24px; }
.fx-plan-metric b { display: block; color: white; font-size: 2.9rem; font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.fx-plan-metric span { display: block; margin-top: 7px; color: #918D9B; font-size: .74rem; }

.fx-plan-meter { overflow: hidden; height: 8px; margin-top: 18px; border-radius: 999px; background: rgba(255,255,255,.09); }
.fx-plan-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--fx-teal)); }
.fx-plan-lanes { display: flex; gap: 6px; margin-top: 18px; }
.fx-plan-lanes i { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.09); }
.fx-plan-lanes i.on { background: linear-gradient(90deg, var(--purple), var(--fx-teal)); }
.fx-plan-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; font-size: .74rem; }
.fx-plan-legend span { display: inline-flex; align-items: center; gap: 7px; color: #918D9B; }
.fx-plan-legend span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.fx-plan-legend .used::before { background: var(--purple); }
.fx-plan-legend .free::before { background: rgba(255,255,255,.22); }
.fx-plan-note { margin-top: 22px; color: #918D9B; font-size: .76rem; }

/* Tiers de velocidad: una sola jerarquía, sin precios ni símbolos de moneda. */
.fx-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; align-items: stretch; }
.fx-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 26px;
  border: 1px solid #302D3A;
  border-radius: var(--radius-md);
  background: var(--night-soft);
}
.fx-tier::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: rgba(123,47,255,.5); }
.fx-tier-mid::before { background: linear-gradient(90deg, var(--purple), var(--fx-teal)); }
.fx-tier-max::before { background: var(--fx-teal); }
.fx-tier-x { color: white; font-size: 2.6rem; font-weight: 700; letter-spacing: -.06em; line-height: 1; }
.fx-tier h3, .fx-tier h4 { margin: 8px 0 14px; color: #C7AEFF; font-size: 1rem; font-weight: 700; letter-spacing: .02em; }
.fx-tier-lanes { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #302D3A; color: var(--fx-teal); font-size: .86rem; font-weight: 700; }
.fx-tier > p:last-child { color: #A6A2AE; font-size: .88rem; line-height: 1.6; }

/* Variante clara, para la página de detalle. */
.fx-tiers-light .fx-tier { border-color: var(--fx-line); background: var(--paper); }
.fx-tiers-light .fx-tier-x { color: var(--ink); }
.fx-tiers-light .fx-tier h3, .fx-tiers-light .fx-tier h4 { color: var(--purple); }
.fx-tiers-light .fx-tier-lanes { border-color: var(--fx-line); color: var(--fx-ok); }
.fx-tiers-light .fx-tier > p:last-child { color: var(--muted); }

/* Árbol Forge Plan / configuración operativa */
.fx-plan-tree { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; margin-top: 8px; align-items: start; }
.fx-plan-tree-col { padding: 24px; border: 1px solid var(--fx-line); border-radius: var(--radius-md); background: var(--paper); }
.fx-plan-tree-title { margin-bottom: 16px; color: var(--purple); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fx-plan-tree-col ul { display: grid; gap: 10px; list-style: none; }
.fx-plan-tree-col-wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-plan-tree-col li { padding-left: 16px; border-left: 2px solid var(--purple-100); }
.fx-plan-tree-col-wide li { border-left-color: var(--fx-line); }
.fx-plan-tree-col b { display: block; font-size: .88rem; }
.fx-plan-tree-col span { color: var(--muted); font-size: .78rem; line-height: 1.5; }

/* ============================================================
   LA FÓRMULA — Capacity × Velocity + Governance
   ============================================================ */
.fx-formula { padding: 34px; border: 1px solid var(--fx-line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
.fx-formula-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: stretch; }
.fx-formula-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--fx-line); border-radius: var(--radius-md); background: var(--surface); }
.fx-formula-card-gov { border-color: rgba(63,213,194,.45); background: rgba(63,213,194,.06); }
.fx-formula-q { margin-bottom: 10px; color: var(--purple); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fx-formula-card-gov .fx-formula-q { color: var(--fx-ok); }
.fx-formula-card h3 { margin-bottom: 10px; font-size: 1.25rem; font-weight: 500; letter-spacing: -.03em; }
.fx-formula-card p:last-child { color: var(--muted); font-size: .88rem; line-height: 1.6; }
.fx-formula-op { display: grid; place-items: center; color: var(--purple); font-size: 1.6rem; font-weight: 700; }
.fx-formula-note { max-width: 76ch; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--fx-line); color: var(--muted); font-size: .86rem; line-height: 1.6; }

/* ============================================================
   PIPELINE DE ESTIMACIÓN — pasos encadenados
   ============================================================ */
.fx-pipeline { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; list-style: none; counter-reset: pipe; }
.fx-pipeline li {
  position: relative;
  padding: 16px 14px;
  border: 1px solid var(--fx-line);
  border-radius: 13px;
  background: var(--paper);
}
.fx-pipeline li:not(:last-child)::after {
  content: '→';
  position: absolute;
  top: 50%;
  right: -9px;
  z-index: 1;
  color: var(--purple);
  font-size: .8rem;
  font-weight: 700;
  transform: translateY(-50%);
}
.fx-pipeline b { display: block; margin-bottom: 5px; font-size: .82rem; }
.fx-pipeline span { color: var(--muted); font-size: .72rem; line-height: 1.45; }

/* ============================================================
   FAQ — desplegables del documento
   ============================================================ */
.fx-faq { display: grid; gap: 8px; }
.fx-faq details { border: 1px solid var(--fx-line); border-radius: var(--radius-md); background: var(--paper); }
.fx-faq summary {
  padding: 18px 22px;
  cursor: pointer;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
}
.fx-faq summary::-webkit-details-marker { display: none; }
.fx-faq summary::after { content: '+'; float: right; margin-left: 16px; color: var(--purple); font-size: 1.2rem; line-height: 1; }
.fx-faq details[open] summary::after { content: '−'; }
.fx-faq summary:hover { color: var(--purple); }
.fx-faq details[open] summary { padding-bottom: 8px; }
.fx-faq details > p { padding: 0 22px 20px; max-width: 74ch; color: var(--ink-soft); font-size: .92rem; line-height: 1.65; }

/* ============================================================
   QUÉ INCLUYE EL MODELO OPERATIVO
   ============================================================ */
.fx-includes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--fx-line); border-radius: var(--radius-md); background: var(--fx-line); list-style: none; overflow: hidden; }
.fx-includes li { padding: 22px 24px; background: var(--paper); }
.fx-includes b { display: block; margin-bottom: 6px; font-size: .95rem; }
.fx-includes span { color: var(--muted); font-size: .84rem; line-height: 1.55; }

/* ============================================================
   RESPONSABILIDADES, ENCAJE Y ACTIVACIÓN
   ============================================================ */
.fx-split, .fx-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fx-split-col, .fx-fit-col { padding: 28px; border: 1px solid var(--fx-line); border-radius: var(--radius-md); background: var(--paper); }
.fx-section-dark .fx-split-col { border-color: #302D3A; background: rgba(255,255,255,.022); }
.fx-split-col > header, .fx-fit-col > h3 { padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--fx-line); }
.fx-section-dark .fx-split-col > header { border-color: #302D3A; }
.fx-split-col h3 { margin-top: 10px; font-size: 1.2rem; font-weight: 500; letter-spacing: -.03em; }
.fx-fit-col > h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -.03em; }
.fx-split-tag { display: inline-flex; padding: 5px 11px; border-radius: 999px; background: rgba(123,47,255,.22); color: #C7AEFF; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fx-split-tag-fo { background: rgba(63,213,194,.16); color: #7FE3D5; }
.fx-fit-col-no { background: var(--surface); }

.fx-ownership-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 30px; border: 1px solid #302D3A; border-radius: var(--radius-md); background: rgba(255,255,255,.022); }
.fx-ownership-band h3 { margin-bottom: 8px; font-size: 1.25rem; font-weight: 500; letter-spacing: -.03em; }
.fx-ownership-band p { max-width: 70ch; color: #A6A2AE; font-size: .9rem; line-height: 1.6; }
.fx-ownership-band .button-secondary { flex-shrink: 0; border-color: rgba(255,255,255,.2); background: transparent; color: white; }
.fx-ownership-band .button-secondary:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }

.fx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.fx-steps li { padding: 28px; border: 1px solid var(--fx-line); border-radius: var(--radius-md); background: var(--paper); }
.fx-steps-num { display: block; margin-bottom: 16px; color: var(--purple); font-size: .78rem; font-weight: 700; letter-spacing: .14em; }
.fx-steps h3 { margin-bottom: 10px; font-size: 1.2rem; font-weight: 500; letter-spacing: -.03em; }
.fx-steps p { color: var(--muted); font-size: .9rem; line-height: 1.6; }

/* ============================================================
   SIMULACIONES EN LIENZO
   Mismo patrón siempre: el lienzo es la mejora y el texto es el
   contenido accesible que lo respalda.
   ============================================================ */
.fx-sim { margin-top: 26px; }
.fx-sim-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.fx-sim-hint { max-width: 62ch; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.fx-sim-dark .fx-sim-hint { color: #918D9B; }
.fx-sim-controls { display: flex; align-items: center; gap: 10px; }
.fx-sim-btn {
  flex-shrink: 0;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--fx-line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 700;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.fx-sim-btn:hover { border-color: var(--purple); background: var(--purple-50); color: var(--purple); }
.fx-sim-dark .fx-sim-btn { border-color: #3A3547; background: rgba(255,255,255,.04); color: #C7C2CF; }
.fx-sim-dark .fx-sim-btn:hover { border-color: #6B52A0; background: rgba(123,47,255,.14); color: white; }

/* Selector de Forge Velocity */
.fx-sim-speeds { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--fx-line); border-radius: 999px; background: var(--paper); }
.fx-sim-dark .fx-sim-speeds { border-color: #3A3547; background: rgba(255,255,255,.04); }
.fx-sim-speeds button {
  min-width: 52px;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  transition: background .25s ease, color .25s ease;
}
.fx-sim-speeds button:hover { color: var(--purple); }
.fx-sim-speeds button.active { background: var(--purple); color: white; }
.fx-sim-dark .fx-sim-speeds button { color: #A6A2AE; }
.fx-sim-dark .fx-sim-speeds button:hover { color: white; }
/* El estado activo no depende solo del color: también lleva subrayado. */
.fx-sim-speeds button.active { box-shadow: inset 0 -2px 0 rgba(255,255,255,.55); }

.fx-sim-stage {
  overflow: hidden;
  padding: 22px 26px;
  border: 1px solid #2E2B38;
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 50% 40%, rgba(123,47,255,.11), transparent 66%),
    linear-gradient(160deg, #14121C, #0D0B13);
}
.fx-sim-stage canvas { display: block; width: 100%; height: auto; }

/* La narrativa en texto es el contenido accesible; el lienzo es la mejora. */
.fx-sim-fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sim-viz-static .fx-sim-btn { display: none; }

/* En pantallas estrechas el lienzo no da para leer las etapas: se entrega
   la misma información en texto, que además es el contenido accesible. */
@media (max-width: 860px) {
  /* Sin lienzo no hay nada que controlar: manda el respaldo en texto. */
  .fx-sim-stage, .fx-sim-controls, .fx-sim-hint { display: none; }
  .fx-sim-bar { margin-bottom: 0; }
  .fx-backlink, .fx-toc-cta { min-height: 44px; }
  .fx-sim-fallback {
    position: static;
    display: grid;
    width: auto;
    height: auto;
    gap: 12px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.65;
  }
  .fx-sim-dark .fx-sim-fallback { color: #A6A2AE; }
  .fx-sim-dark .fx-sim-fallback strong { color: white; }
}

/* ============================================================
   SUPERFICIES DE PRODUCTO — Product Studio y Delivery Cockpit

   Maquetas de alta fidelidad en HTML/CSS, en modo claro: chasis blanco,
   lienzo gris muy tenue y tarjetas blancas, como una aplicación real.
   Las dos comparten chasis, paneles y chips (`.fx-ck-*`) para hablar el
   mismo idioma visual; `.fx-st-*` son las piezas propias del Studio.
   ============================================================ */
.fx-mock { margin: 0; }
.fx-mock-caption { margin-top: 12px; color: var(--muted); font-size: .74rem; }

.fx-cockpit {
  --fx-panel-line: #E7E5EE;
  overflow: hidden;
  border: 1px solid var(--fx-line);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}

/* --- Barra superior --------------------------------------------------- */
.fx-ck-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--fx-panel-line);
  background: #FCFCFE;
}
.fx-ck-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .95rem; }
.fx-ck-brand img { width: 24px; }
.fx-ck-tenant {
  padding: 3px 9px;
  border: 1px solid var(--fx-panel-line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .66rem;
}
.fx-ck-session { display: flex; align-items: center; gap: 8px; }
.fx-ck-live { display: inline-flex; align-items: center; gap: 6px; color: var(--fx-ok); font-size: .66rem; font-weight: 700; }
.fx-ck-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--fx-teal); animation: fx-ck-pulse 2s ease-in-out infinite; }
@keyframes fx-ck-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.8); } }
.fx-ck-mfa { padding: 3px 8px; border: 1px solid rgba(63,213,194,.55); border-radius: 6px; color: var(--fx-ok); font-size: .6rem; font-weight: 700; letter-spacing: .06em; }
.fx-ck-user { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--purple); color: white; font-size: .62rem; font-weight: 700; }

/* --- Cuerpo: lienzo gris con tarjetas blancas -------------------------- */
.fx-ck-body { padding: 18px 20px 20px; background: #F7F7FA; }

.fx-ck-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.fx-ck-kpi { padding: 14px 15px; border: 1px solid var(--fx-panel-line); border-radius: 13px; background: var(--paper); }
.fx-ck-kpi > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fx-ck-kpi > b { display: block; font-size: 1.62rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.fx-ck-kpi > b em { color: var(--muted); font-size: .8rem; font-style: normal; font-weight: 700; letter-spacing: 0; }
.fx-ck-kpi > b.ok { color: var(--fx-ok); }
.fx-ck-kpi > b.warn { color: var(--fx-warn); }
.fx-ck-kpi > small { display: block; margin-top: 7px; color: var(--muted); font-size: .64rem; }

.fx-ck-meter { overflow: hidden; height: 5px; margin-top: 10px; border-radius: 999px; background: #EAEAF1; }
.fx-ck-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--fx-teal)); }
.fx-ck-meter.sm { height: 3px; margin-top: 8px; }

.fx-ck-grid { display: grid; grid-template-columns: 268px 1fr; gap: 10px; }
.fx-ck-grid-thirds { grid-template-columns: 1.25fr 1fr 1fr; }
.fx-ck-grid-low { grid-template-columns: repeat(3, 1fr); margin-top: 10px; }

.fx-ck-panel { padding: 14px 15px; border: 1px solid var(--fx-panel-line); border-radius: 13px; background: var(--paper); }
.fx-ck-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fx-ck-panel h4 { font-size: .82rem; font-weight: 700; }
.fx-ck-panel > header > span { color: var(--muted); font-size: .62rem; }
.fx-ck-inline-note { margin-top: 10px; color: var(--muted); font-size: .64rem; line-height: 1.5; }

/* --- Chips comunes ---------------------------------------------------- */
.fx-ck-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0; }
.fx-ck-chips span { padding: 3px 7px; border: 1px solid transparent; border-radius: 6px; font-size: .6rem; font-weight: 700; }
.fx-ck-chips .fu { border-color: var(--purple-100); background: var(--purple-50); color: var(--purple); }
.fx-ck-chips .tipo, .fx-ck-chips .fase { border-color: var(--fx-panel-line); color: var(--muted); }
.fx-ck-chips .fase.warn { border-color: rgba(244,166,65,.6); background: rgba(244,166,65,.14); color: var(--fx-warn); }
.fx-ck-chips .gate { border-color: var(--fx-panel-line); color: var(--muted); }
.fx-ck-chips .gate.ok { border-color: rgba(63,213,194,.5); background: rgba(63,213,194,.12); color: var(--fx-ok); }
.fx-ck-chips .gate.warn { border-color: rgba(244,166,65,.6); background: rgba(244,166,65,.14); color: var(--fx-warn); }

/* --- Demanda, lanes y evidencia --------------------------------------- */
.fx-ck-demand, .fx-ck-lanes { display: grid; gap: 8px; list-style: none; }
.fx-ck-demand li, .fx-ck-lanes li { padding: 11px 12px; border: 1px solid var(--fx-panel-line); border-radius: 11px; background: #FBFBFD; }
.fx-ck-demand b, .fx-ck-lanes b { font-size: .78rem; }
.fx-ck-demand small, .fx-ck-lanes small { color: var(--muted); font-size: .63rem; }
.fx-ck-demand small.warn { color: var(--fx-warn); }
.fx-ck-lanes li.libre { border-style: dashed; background: transparent; }
.fx-ck-lanes li.libre b { color: var(--muted); font-weight: 400; }

/* --- Tablero por etapa (solo en la página de detalle) ------------------ */
.fx-ck-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fx-ck-col-title { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fx-ck-col-title i { display: grid; min-width: 17px; height: 17px; place-items: center; border-radius: 5px; background: #EEEDF3; color: var(--ink-soft); font-size: .58rem; font-style: normal; }
.fx-ck-card { padding: 11px 12px; margin-bottom: 8px; border: 1px solid var(--fx-panel-line); border-left: 2px solid #CFCBDD; border-radius: 10px; background: #FBFBFD; }
.fx-ck-card:last-child { margin-bottom: 0; }
.fx-ck-card b { display: block; font-size: .76rem; line-height: 1.3; }
.fx-ck-card small { color: var(--muted); font-size: .62rem; }
.fx-ck-card small.warn { color: var(--fx-warn); }
.fx-ck-card small.bad { color: var(--fx-bad); }
.fx-ck-card.is-ok { border-left-color: var(--fx-teal); }
.fx-ck-card.is-back { border-left-color: #F06C75; }
.fx-ck-chips .gate.bad { border-color: rgba(240,108,117,.55); background: rgba(240,108,117,.12); color: var(--fx-bad); }

/* --- Ejecución de Zynplex Code y aprendizajes -------------------------- */
.fx-ck-agentlist { display: grid; gap: 9px; list-style: none; }
.fx-ck-agentlist li { display: grid; grid-template-columns: 84px 1fr 32px; gap: 9px; align-items: center; }
.fx-ck-agentlist b { font-size: .68rem; font-weight: 700; }
.fx-ck-agentlist span { color: var(--muted); font-size: .62rem; text-align: right; }
.fx-ck-agentlist .fx-ck-meter { margin-top: 0; }

.fx-ck-brain { display: grid; gap: 9px; list-style: none; }
.fx-ck-brain li { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--fx-panel-line); }
.fx-ck-brain li:last-child { padding-bottom: 0; border-bottom: 0; }
.fx-ck-brain span { color: var(--muted); font-size: .62rem; }
.fx-ck-brain b { color: var(--ink); font-size: .68rem; }

.fx-ck-evidence { display: grid; gap: 7px; list-style: none; }
.fx-ck-evidence li { position: relative; padding-left: 18px; color: var(--ink-soft); font-size: .7rem; }
.fx-ck-evidence li::before { content: '✓'; position: absolute; left: 0; color: var(--fx-ok); font-weight: 700; }
.fx-ck-evidence li.pend { color: var(--muted); }
.fx-ck-evidence li.pend::before { content: '○'; color: var(--muted); }

/* ============================================================
   PRODUCT STUDIO — piezas propias de la especificación
   ============================================================ */
.fx-st-module { padding: 3px 9px; border-radius: 999px; background: var(--purple-100); color: var(--purple-dark); font-size: .64rem; font-weight: 700; }
.fx-st-draft { padding: 3px 9px; border: 1px solid rgba(244,166,65,.6); border-radius: 999px; background: rgba(244,166,65,.12); color: var(--fx-warn); font-size: .62rem; font-weight: 700; }

.fx-st-layout { display: grid; grid-template-columns: 268px 1fr; gap: 10px; align-items: start; }

.fx-st-rail dl { display: grid; gap: 0; }
.fx-st-rail dt { color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fx-st-rail dd { margin-bottom: 12px; font-size: .8rem; font-weight: 700; line-height: 1.35; }
.fx-st-rail dd .fx-ck-chips { margin: 4px 0 0; }

.fx-st-decision { padding-top: 12px; border-top: 1px solid var(--fx-panel-line); }
.fx-st-decision > p { margin-bottom: 9px; color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fx-st-go, .fx-st-back { display: block; margin-bottom: 6px; padding: 9px 11px; border-radius: 9px; font-size: .72rem; font-weight: 700; text-align: center; }
.fx-st-go { border: 1px solid rgba(63,213,194,.6); background: rgba(63,213,194,.14); color: var(--fx-ok); }
.fx-st-back { border: 1px solid var(--fx-panel-line); color: var(--ink-soft); }
.fx-st-decision > small { display: block; margin-top: 8px; color: var(--muted); font-size: .62rem; line-height: 1.45; }

.fx-st-main { display: grid; align-content: start; gap: 10px; }

/* ============================================================
   PÁGINA DE DETALLE — portada, índice sticky y cuerpo del documento
   ============================================================ */
.forge-doc .navbar {
  background: rgba(255,255,255,.92);
  border-color: rgba(17,17,26,.08);
  box-shadow: 0 8px 30px rgba(17,17,26,.05);
  backdrop-filter: blur(16px);
}

.fx-detail-head {
  padding: 132px 0 60px;
  color: white;
  background:
    radial-gradient(circle at 78% 24%, rgba(123,47,255,.26), transparent 40%),
    linear-gradient(140deg, #0D0B16 0%, var(--night) 60%, #17102A 100%);
}
.fx-detail-head h1 { margin-bottom: 18px; font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.05; }
.fx-detail-head > .container > p:last-child { max-width: 70ch; color: #ADA9B6; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.65; }

.fx-breadcrumb { margin-bottom: 26px; }
.fx-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.fx-breadcrumb li { color: #918D9B; font-size: .76rem; font-weight: 600; }
.fx-breadcrumb li + li::before { content: '/'; margin-right: 8px; color: #565064; }
.fx-breadcrumb a { color: #B7B2C1; transition: color .25s ease; }
.fx-breadcrumb a:hover { color: white; }
.fx-breadcrumb [aria-current] { color: white; }

.fx-detail-layout { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 40px; }

.fx-toc { position: sticky; top: 96px; padding-top: 56px; }
.fx-toc-title { margin-bottom: 14px; color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fx-toc ol { list-style: none; counter-reset: toc; }
.fx-toc li { counter-increment: toc; }
/* El contador solo vive dentro de la lista: el CTA del pie no lleva número. */
.fx-toc ol a {
  display: block;
  padding: 8px 0 8px 30px;
  position: relative;
  border-left: 2px solid var(--fx-line);
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
  transition: color .2s ease, border-color .2s ease;
}
.fx-toc ol a::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 10px; color: var(--muted); font-size: .66rem; font-weight: 700; }
.fx-toc ol a:hover { color: var(--purple); border-left-color: var(--purple-100); }
.fx-toc ol a.is-active { border-left-color: var(--purple); color: var(--ink); font-weight: 700; }
.fx-toc ol a.is-active::before { color: var(--purple); }
.fx-toc-cta { display: inline-block; margin-top: 22px; padding: 12px 0; color: var(--purple); font-size: .82rem; font-weight: 700; }

.fx-doc-section { padding: 56px 0; border-top: 1px solid var(--fx-line); }
.fx-doc-section:first-child { padding-top: 56px; border-top: 0; }
.fx-doc-section > .fx-lead { margin-bottom: 28px; }
.fx-doc-section > .fx-title { margin-bottom: 16px; }
.fx-doc-section > .fx-grid-2,
.fx-doc-section > .fx-grid-3,
.fx-doc-section > .fx-grid-4,
.fx-doc-section > .fx-table-wrap,
.fx-doc-section > .fx-fit,
.fx-doc-section > .fx-steps,
.fx-doc-section > .fx-tiers,
.fx-doc-section > .fx-controls,
.fx-doc-section > .fx-plan-tree,
.fx-doc-section > .fx-quote { margin-top: 8px; }
.fx-doc-section > .fx-quote { margin-top: 28px; }
.fx-doc-section > p { max-width: 74ch; color: var(--ink-soft); font-size: .96rem; line-height: 1.7; }
.fx-doc-kicker { margin-bottom: 14px; color: var(--purple); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fx-doc-sub { margin: 40px 0 16px; font-size: 1.3rem; font-weight: 500; letter-spacing: -.03em; }
.fx-doc-close { padding-bottom: 20px; }

/* Caja "En 60 segundos": la respuesta rápida antes del detalle. */
.fx-brief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-bottom: 28px;
  border: 1px solid rgba(123,47,255,.3);
  border-radius: var(--radius-md);
  background: rgba(123,47,255,.16);
}
.fx-brief > div { padding: 20px 22px; background: var(--paper); }
.fx-brief dt { margin-bottom: 6px; color: var(--purple); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fx-brief dd { color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }

/* Controles de seguridad verificables */
.fx-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--fx-line); border-radius: var(--radius-md); background: var(--fx-line); list-style: none; }
.fx-controls li { padding: 20px 22px; background: var(--paper); }
.fx-controls b { display: block; margin-bottom: 6px; font-size: .92rem; }
.fx-controls span { color: var(--muted); font-size: .82rem; line-height: 1.55; }

/* Banda de cierre de la página de detalle */
.fx-closing { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px; border: 1px solid var(--fx-line); border-radius: var(--radius-md); background: var(--surface); }
.fx-closing h2 { margin-bottom: 8px; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.fx-closing p { color: var(--muted); font-size: .92rem; }
.fx-closing .fx-cta-actions { margin-top: 0; flex-shrink: 0; }

/* ============================================================
   CIERRE
   ============================================================ */
.fx-cta { padding: 52px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #0A0D12, #14122A 68%, #251249); color: white; }
.fx-cta h2 { margin: 12px 0 14px; font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.05; }
.fx-cta > p { max-width: 68ch; color: #B7B2C1; font-size: 1rem; line-height: 1.7; }
.fx-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.fx-cta .button-secondary { border-color: rgba(255,255,255,.2); background: transparent; color: white; }
.fx-cta .button-secondary:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .fx-detail-layout { grid-template-columns: 1fr; gap: 0; }
  .fx-toc { display: none; }
  .fx-doc-section:first-child { padding-top: 44px; }
}

@media (max-width: 1050px) {
  .fx-st-layout { grid-template-columns: 1fr; }
  .fx-ck-grid, .fx-ck-grid-thirds { grid-template-columns: 1fr; }
  .fx-ck-grid-low { grid-template-columns: repeat(3, 1fr); }
  .fx-grid-4, .fx-includes, .fx-controls { grid-template-columns: repeat(2, 1fr); }
  .fx-formula-row { grid-template-columns: 1fr; }
  .fx-formula-op { padding: 4px 0; }
  .fx-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-pipeline li::after { display: none; }
  .fx-flow-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; }
  .fx-flow-step::before { display: none !important; }
  .fx-flow-loop-note { text-align: left; }
  .fx-plan-tree { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .fx-grid-3, .fx-grid-2, .fx-tiers, .fx-steps, .fx-split, .fx-fit, .fx-plan-grid, .fx-brief { grid-template-columns: 1fr; }
  .fx-flow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-ck-kpis { grid-template-columns: repeat(2, 1fr); }
  .fx-ck-board { grid-template-columns: 1fr; }
  .fx-check-two { columns: 1; }
  .fx-ownership-band { flex-direction: column; align-items: flex-start; gap: 20px; }
  .fx-plan-tree-col-wide ul { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* Las tablas se convierten en tarjetas: cada fila es una unidad legible. */
  .fx-table-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .fx-table-caption { padding: 0 0 12px; }
  .fx-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fx-table, .fx-table tbody, .fx-table tr, .fx-table th, .fx-table td { display: block; }
  .fx-table tbody tr {
    padding: 16px 18px;
    margin-bottom: 10px;
    border: 1px solid var(--fx-line);
    border-radius: 14px;
    background: var(--paper);
  }
  .fx-section-dark .fx-table tbody tr { border-color: #302D3A; background: var(--night-soft); }
  .fx-table tbody th, .fx-table tbody td { padding: 5px 0; border-bottom: 0; }
  .fx-table tbody th[scope="row"] { margin-bottom: 6px; font-size: 1rem; }
  .fx-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .fx-table .num { width: auto; text-align: left; }
  .fx-table-compare tbody td:last-child { padding: 8px 12px; margin-top: 6px; border-radius: 10px; }
  .fx-table-raci thead th:not(:first-child), .fx-table-raci tbody td { width: auto; }
}

@media (max-width: 580px) {
  .fx-flow-track, .fx-grid-4, .fx-includes, .fx-controls, .fx-pipeline { grid-template-columns: 1fr; }
  .fx-formula { padding: 24px 20px; }
  .fx-faq summary { padding: 16px 18px; }
  .fx-faq details > p { padding: 0 18px 18px; }
  .fx-ck-kpis, .fx-ck-grid-low { grid-template-columns: 1fr; }
  .fx-ck-agentlist li { grid-template-columns: 74px 1fr 30px; }
  /* En una sola columna el riel se vuelve vertical y conecta los nodos. */
  .fx-flow-step:not(:last-child)::before {
    display: block !important;
    top: 36px;
    bottom: -26px;
    left: 5px;
    width: 1px;
    height: auto;
    background: rgba(123,47,255,.24);
  }
  .fx-flow-step:nth-child(6)::before { background: rgba(123,47,255,.24); }
  .fx-detail-head { padding: 112px 0 48px; }
  .fx-closing { align-items: flex-start; flex-direction: column; gap: 20px; padding: 26px 22px; }
  .fx-title { font-size: 2.05rem; }
  .fx-cta { padding: 32px 24px; }
  .fx-plan { padding: 24px 20px; }
  .fx-plan-card, .fx-tier, .fx-steps li, .fx-split-col, .fx-fit-col, .fx-card { padding: 22px 20px; }
  .fx-ck-chrome { padding: 12px 16px; }
  .fx-ck-body { padding: 14px; }
  .fx-doc-section { padding: 40px 0; }
  .fx-sim-bar { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* ============================================================
   MODELO v3 — precios públicos, variables y Studio
   ============================================================ */

/* Franja de tarifas en el hero: el precio se ve antes de pedir nada. */
.fx-price-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.fx-price-strip span {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 15px; border: 1px solid var(--fx-line); border-radius: 999px;
  background: var(--paper); font-size: .84rem; font-weight: 600; color: var(--ink-soft);
}
.fx-price-strip b { color: var(--purple); font-size: .9rem; }

/* Las cinco variables del precio */
.fx-variables { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; list-style: none; counter-reset: none; }
.fx-variables li { padding: 22px 20px; border: 1px solid var(--fx-line); border-radius: var(--radius-md); background: var(--paper); }
.fx-variables-num { display: block; margin-bottom: 12px; color: var(--purple); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.fx-variables h3 { margin-bottom: 8px; font-size: 1rem; font-weight: 500; letter-spacing: -.02em; }
.fx-variables p { color: var(--muted); font-size: .84rem; line-height: 1.55; }

/* Precio dentro de cada tier */
.fx-tier-precio { margin: 6px 0 10px; color: white; font-size: 1.6rem; font-weight: 700; letter-spacing: -.04em; }
.fx-tier-precio .fx-tier-unidad { color: #918D9B; font-size: .8rem; font-weight: 400; letter-spacing: 0; }
.fx-tiers-light .fx-tier-precio { color: var(--ink); }
.fx-tiers-light .fx-tier-precio .fx-tier-unidad { color: var(--muted); }

/* Mezcla de velocidades dentro de un mes */
.fx-mix { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; margin-top: 30px; padding: 28px; border: 1px solid #302D3A; border-radius: var(--radius-md); background: rgba(255,255,255,.022); }
.fx-mix h3 { margin-bottom: 10px; font-size: 1.25rem; font-weight: 500; letter-spacing: -.03em; }
.fx-mix p { max-width: 60ch; color: #A6A2AE; font-size: .9rem; line-height: 1.6; }
.fx-mix-lista { display: grid; gap: 8px; list-style: none; }
.fx-mix-lista li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 15px; border: 1px solid #3A3547; border-radius: 11px; }
.fx-mix-lista b { color: white; font-size: 1.05rem; }
.fx-mix-lista span { color: #918D9B; font-size: .78rem; }
.fx-mix-total { border-color: var(--purple) !important; background: rgba(123,47,255,.12); }

/* Flujo de ZPX Forge Studio */
.fx-studio-flow { margin-bottom: 30px; }
.fx-studio-flow ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; list-style: none; counter-reset: studio; }
.fx-studio-flow li { position: relative; padding: 18px 16px; border: 1px solid var(--fx-line); border-radius: 13px; background: var(--paper); counter-increment: studio; }
.fx-studio-flow li::before { content: counter(studio, decimal-leading-zero); display: block; margin-bottom: 8px; color: var(--purple); font-size: .64rem; font-weight: 800; letter-spacing: .1em; }
.fx-studio-flow li:not(:last-child)::after { content: '→'; position: absolute; top: 50%; right: -8px; z-index: 1; color: var(--purple); font-size: .8rem; transform: translateY(-50%); }
.fx-studio-flow b { display: block; margin-bottom: 5px; font-size: .88rem; }
.fx-studio-flow span { color: var(--muted); font-size: .74rem; line-height: 1.45; }

/* Cuatro pasos de arranque */
.fx-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Chip de tipo dentro de los mockups */
.fx-ck-kpi > b em { font-style: normal; }

@media (max-width: 1050px) {
  .fx-variables { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-studio-flow ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-studio-flow li::after { display: none; }
  .fx-steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .fx-variables, .fx-mix { grid-template-columns: 1fr; }
  .fx-studio-flow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .fx-variables, .fx-studio-flow ol, .fx-steps-4 { grid-template-columns: 1fr; }
  .fx-price-strip span { font-size: .78rem; }
}

/* ============================================================
   PRECIO: BASE + PRIMA DE ACELERACIÓN

   El error que corrige este bloque: tres tarjetas de tarifa se leen
   como tres planes mensuales entre los que se elige. No lo son. Se
   paga siempre la base y la aceleración es incremental y aprobada.
   ============================================================ */
.fx-base-precio {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
  padding: 30px 32px; margin-bottom: 8px;
  border: 1px solid var(--purple); border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(123,47,255,.16), rgba(255,255,255,.02) 70%);
}
.fx-base-kicker { margin-bottom: 10px; color: #C7AEFF; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fx-base-precio h3 { margin-bottom: 10px; font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 500; letter-spacing: -.035em; }
.fx-base-precio h3 strong { color: white; font-weight: 700; }
.fx-base-precio p:not(.fx-base-kicker) { max-width: 62ch; color: #A6A2AE; font-size: .9rem; line-height: 1.6; }
.fx-base-tarifa { flex-shrink: 0; padding: 18px 24px; border: 1px solid #3A3547; border-radius: 14px; background: rgba(13,11,19,.5); text-align: right; }
.fx-base-tarifa span { display: block; margin-bottom: 6px; color: #918D9B; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fx-base-tarifa strong { display: block; color: white; font-size: 1.7rem; letter-spacing: -.04em; line-height: 1; }
.fx-base-tarifa small { display: block; margin-top: 5px; color: #918D9B; font-size: .7rem; }

/* Factura de ejemplo: base primero, primas después, total al final. */
.fx-ejemplo-factura { margin-top: 30px; padding: 28px; border: 1px solid #302D3A; border-radius: var(--radius-md); background: rgba(255,255,255,.022); }
.fx-ejemplo-head { margin-bottom: 18px; }
.fx-ejemplo-head h3 { margin-bottom: 6px; font-size: 1.25rem; font-weight: 500; letter-spacing: -.03em; }
.fx-ejemplo-head p { color: #A6A2AE; font-size: .88rem; }
.fx-factura { width: 100%; border-collapse: collapse; }
.fx-factura th, .fx-factura td { padding: 14px 0; border-bottom: 1px solid #302D3A; font-size: .92rem; text-align: left; vertical-align: top; }
.fx-factura th { font-weight: 500; }
.fx-factura th small { display: block; margin-top: 3px; color: #918D9B; font-size: .74rem; font-weight: 400; }
.fx-factura .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-factura-total th, .fx-factura-total td { border-bottom: 0; border-top: 2px solid var(--purple); color: white; font-size: 1.1rem; font-weight: 700; }
.fx-ejemplo-factura .fx-note { margin-top: 16px; color: #918D9B; }

@media (max-width: 820px) {
  .fx-base-precio { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px 22px; }
  .fx-base-tarifa { align-self: stretch; text-align: left; }
  .fx-ejemplo-factura { padding: 22px 20px; }
  .fx-factura th, .fx-factura td { font-size: .86rem; }
}

/* Forge Units por encima del compromiso: la duda comercial más frecuente
   merece su propio bloque, no una línea perdida en una nota. */
.fx-extra-fu {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: center;
  margin-top: 18px; padding: 28px 32px;
  border: 1px solid rgba(63,213,194,.4); border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(63,213,194,.1), rgba(255,255,255,.02) 70%);
}
.fx-extra-fu h3 { margin-bottom: 10px; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -.035em; }
.fx-extra-fu p:not(.fx-base-kicker) { max-width: 60ch; color: #A6A2AE; font-size: .92rem; line-height: 1.65; }
.fx-extra-fu strong { color: white; }
.fx-extra-fu .fx-base-kicker { color: #7FE3D5; }
.fx-extra-lista { display: grid; gap: 8px; list-style: none; }
.fx-extra-lista li { padding: 13px 16px; border: 1px solid #3A3547; border-radius: 11px; background: rgba(13,11,19,.4); }
.fx-extra-lista b { display: block; margin-bottom: 3px; color: white; font-size: .88rem; }
.fx-extra-lista span { color: #918D9B; font-size: .78rem; line-height: 1.45; }

@media (max-width: 820px) {
  .fx-extra-fu { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
}

/* Banda de acompañamiento: el arquitecto asignado es el diferenciador de
   servicio frente a cualquier lectura de ZPX Forge como autoservicio. */
.fx-arquitecto-band { border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(123,47,255,.05), transparent 60%); }
.fx-arquitecto-inner {
  display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 26px; align-items: center; padding-block: 34px;
}
.fx-arquitecto-icono {
  display: grid; place-items: center; width: 52px; height: 52px;
  border: 1px solid rgba(123,47,255,.3); border-radius: 14px;
  background: rgba(123,47,255,.08); color: var(--purple);
}
.fx-arquitecto-icono svg { width: 26px; height: 26px; }
.fx-arquitecto-texto h2 { margin-bottom: 9px; font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 500; letter-spacing: -.035em; }
.fx-arquitecto-texto p { max-width: 62ch; color: var(--muted); font-size: .89rem; line-height: 1.65; }
.fx-arquitecto-texto strong { color: var(--ink); font-weight: 500; }
.fx-arquitecto-hitos { display: grid; gap: 7px; list-style: none; }
.fx-arquitecto-hitos li { padding: 10px 14px; border-left: 2px solid rgba(123,47,255,.35); background: rgba(123,47,255,.03); }
.fx-arquitecto-hitos b { display: block; color: var(--ink); font-size: .82rem; font-weight: 500; }
.fx-arquitecto-hitos span { color: #696877; font-size: .75rem; line-height: 1.4; }

@media (max-width: 980px) {
  .fx-arquitecto-inner { grid-template-columns: auto 1fr; }
  .fx-arquitecto-hitos { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .fx-arquitecto-inner { grid-template-columns: 1fr; gap: 20px; padding-block: 28px; }
  .fx-arquitecto-hitos { grid-template-columns: 1fr; }
}

/* Escenarios de facturación: tres meses de la misma cuenta. El botón
   activo es la única pista de estado, así que tiene que leerse sin duda. */
.fx-escenario-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.fx-escenario-boton {
  padding: 9px 16px; border: 1px solid #3A3547; border-radius: 999px;
  background: rgba(13,11,19,.5); color: #A6A2AE;
  font-family: inherit; font-size: .8rem; cursor: pointer;
  transition: border-color var(--ease-fast), background var(--ease-fast), color var(--ease-fast);
}
.fx-escenario-boton:hover { border-color: #5A5270; color: white; }
.fx-escenario-boton.activo { border-color: var(--purple); background: rgba(123,47,255,.16); color: white; }
.fx-escenario-boton:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* La línea de Forge Units adicionales es el argumento del escenario:
   se distingue sin romper la lectura de la factura. */
.fx-factura-extra th { color: #7FE3D5; }
.fx-factura-extra th small { color: #5FBBAE; }
.fx-factura-extra td { color: #7FE3D5; }

/* Diferencial de acompañamiento experto */
.fx-expertos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.fx-experto {
  padding: 22px; border: 1px solid #3A3547; border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(123,47,255,.07), rgba(255,255,255,.015) 60%);
}
.fx-experto-rol { margin-bottom: 10px; color: #B98CFF; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fx-experto h3 { margin-bottom: 9px; font-size: 1.02rem; font-weight: 500; letter-spacing: -.02em; }
.fx-experto p { color: #A6A2AE; font-size: .85rem; line-height: 1.6; }
.fx-experto-cuando { display: block; margin-top: 12px; padding-top: 11px; border-top: 1px solid #2E2A3A; color: #7A7688; font-size: .76rem; }

@media (max-width: 900px) { .fx-expertos { grid-template-columns: 1fr; } }

/* Nota de fondo dentro del documento de evaluación: contexto que sostiene
   la sección, no un aparte decorativo. */
.fx-doc-nota { margin-top: 26px; padding: 22px 26px; border-left: 2px solid var(--purple); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: rgba(123,47,255,.05); }
.fx-doc-nota h3 { margin-bottom: 10px; font-size: .98rem; font-weight: 500; letter-spacing: -.02em; }
.fx-doc-nota p { max-width: 78ch; color: var(--muted); font-size: .87rem; line-height: 1.68; }
.fx-doc-nota p + p { margin-top: 10px; }

/* ============================================================
   Modelo comercial sin precios públicos

   La web ya no publica tarifas: en el lugar donde antes iba la cifra va
   ahora la naturaleza del cargo, y el detalle económico se cierra en la
   conversación de descubrimiento.
   ============================================================ */

.fx-base-tarifa strong { font-size: 1.25rem; letter-spacing: -.03em; }

/* Sustituye a .fx-tier-precio en las tarjetas de Velocity. */
.fx-tier-precio-nota {
  margin: 10px 0; padding-bottom: 12px; border-bottom: 1px solid #2E2A3A;
  color: #7FE3D5; font-size: .82rem; font-weight: 500; line-height: 1.4;
}

/* Qué determina la tarifa: sustituye a la factura de ejemplo. */
.fx-cotizacion {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 30px;
  margin-top: 22px; padding: 28px 32px;
  border: 1px solid #3A3547; border-radius: var(--radius-md);
  background: linear-gradient(150deg, rgba(123,47,255,.09), rgba(255,255,255,.015) 62%);
}
.fx-cotizacion h3 { margin-bottom: 10px; font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 500; letter-spacing: -.035em; }
.fx-cotizacion > div > p:not(.fx-base-kicker) { max-width: 56ch; color: #A6A2AE; font-size: .88rem; line-height: 1.65; }
.fx-cotizacion-lista { display: grid; gap: 8px; list-style: none; counter-reset: cot; }
.fx-cotizacion-lista li {
  position: relative; padding: 12px 16px 12px 44px;
  border: 1px solid #3A3547; border-radius: 11px; background: rgba(13,11,19,.42);
  counter-increment: cot;
}
.fx-cotizacion-lista li::before {
  content: counter(cot, decimal-leading-zero);
  position: absolute; left: 16px; top: 13px;
  color: #B98CFF; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
}
.fx-cotizacion-lista b { display: block; margin-bottom: 3px; color: white; font-size: .87rem; font-weight: 500; }
.fx-cotizacion-lista span { color: #918D9B; font-size: .77rem; line-height: 1.5; }

@media (max-width: 900px) {
  .fx-cotizacion { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
}

/* La fórmula sin desglose numérico necesita su propio ritmo. */
.fx-formula > p { margin: 0; text-align: center; font-size: clamp(.95rem, 2vw, 1.28rem); line-height: 1.9; letter-spacing: -.02em; }
.fx-formula > p b { color: var(--purple); font-weight: 600; }

/* Sobre fondo claro el turquesa pierde contraste: en el documento la nota
   de tarifa usa el morado de marca, que sí cumple. */
.fx-tiers-light .fx-tier-precio-nota { color: var(--purple); border-bottom-color: var(--fx-line); }