/* ==========================================================================
   FIGURAS - articulo: bant-meddic-spiced-meddpicc
   Generado por el split de insights.css (2026-08-10). Backup del monolito:
   insights.css.bak-20260810-170215
   NO editar a mano sin leer component-catalog.md.
   ========================================================================== */


/* A framework name reads as a chip (enhancer-added, decorative only). */
.ins-prose table .ins-model {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius);
  padding: 0.22rem 0.5rem;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   B1. SPECIMEN — the four acronyms, letter by letter. Fig. 01
   -------------------------------------------------------------------------- */
.ins-spec { display: grid; }

.ins-spec__row {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.5rem 1.25rem; align-items: start;
  padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--line);
}

.ins-spec__row:last-child { border-bottom: 0; }

.ins-spec__id { display: grid; gap: 0.2rem; }

.ins-spec__name {
  font-family: var(--font-mono); font-size: 0.92rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink);
}

.ins-spec__n {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}

.ins-spec__fit { grid-column: 2; margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-muted); }

.ins-spec__strip {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}

.ins-spec__cell {
  flex: 1 1 4.2rem; min-width: 3.6rem;
  background: var(--bg-raised);
  /* Padding horizontal mínimo a propósito: en la fila de 8 (MEDDPICC) cada
     celda mide ~61px, y palabras de 8 letras como "Economic" o "Champion"
     necesitan casi todo eso para entrar en una sola línea. */
  padding: 0.55rem 0.1rem 0.5rem;
  display: grid; gap: 0.15rem; justify-items: center; text-align: center;
}

.ins-spec__cell b {
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500;
  line-height: 1; color: var(--ink);
}

.ins-spec__cell i {
  font-style: normal; font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.3; color: var(--text-muted);
  /* "Competition" es una sola palabra sin espacio donde partir; en la fila de
     MEDDPICC (8 celdas) no entra en una línea. No alcanza con permitir el
     corte de palabra: tanto la celda (flex item) como su texto (grid item)
     tienen min-width:auto por default, que en CSS se resuelve al ancho del
     CONTENIDO — la caja nunca llegaba a angostarse lo suficiente como para
     que el corte entrara en juego, así que el contenedor (overflow:hidden)
     la recortaba en vez de bajarla a un segundo renglón. */
  min-width: 0;
  /* `break-word` no alcanza: por spec no reduce el tamaño mínimo intrínseco
     que usa el grid para dimensionar la columna, así que la celda seguía
     reportando el ancho completo de "Competition" aunque el corte estuviera
     permitido. `anywhere` sí participa del cálculo de ese mínimo. */
  overflow-wrap: anywhere;
}

.ins-spec__cell--new { background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 8%); }

.ins-spec__cell--new b,
.ins-spec__cell--new i { color: var(--accent); }

.ins-spec__legend {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem;
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}

.ins-spec__swatch {
  width: 0.85rem; height: 0.85rem; flex: none; border-radius: 1px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 12%);
}


/* --------------------------------------------------------------------------
   B2. SELECTOR — mounted ON the real Selection Rule table. Fig. 02
   The table is the AEO asset and always ships in the DOM, citable, unchanged.
   JS only adds a filter that highlights the matching row. With JS off the
   controls stay hidden (hidden attribute) and the reader gets the plain table.
   -------------------------------------------------------------------------- */
.ins-sel { display: grid; border: 1px solid var(--line); border-radius: var(--radius); margin-block: 2.4em 0; background: var(--bg-raised); }

.ins-sel[hidden] { display: none; }

.ins-sel__row {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.65rem 1.25rem; align-items: center;
  padding: 0.9rem 1.25rem;
}

.ins-sel__q {
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); line-height: 1.4;
  margin: 0;
}

.ins-sel__opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ins-sel__opt { position: relative; }

.ins-sel__opt input {
  position: absolute; opacity: 0; margin: 0; cursor: pointer;
  width: 100%; height: 100%; left: 0; top: 0;
}

.ins-sel__opt span {
  display: block; padding: 0.42rem 0.75rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 0.82rem; line-height: 1.3;
  color: var(--text-primary); background: var(--bg-raised);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.ins-sel__opt input:hover + span { border-color: var(--line-strong); }

.ins-sel__opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.ins-sel__opt input:checked + span {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 7%);
  color: var(--accent-ink); font-weight: 500;
}


/* controls sit directly on top of the table they filter */
.ins-sel:not([hidden]) + [data-tablewrap] { margin-top: 0; }

.ins-sel:not([hidden]) + [data-tablewrap] > table {
  border-top-left-radius: 0; border-top-right-radius: 0;
}

.ins-sel:not([hidden]) { border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 0; }


/* --------------------------------------------------------------------------
   B3. TRACK — the Paper Process, decision to signature. Fig. 03
   -------------------------------------------------------------------------- */
.ins-track { padding: 1.5rem 1.25rem 1.25rem; }

.ins-track__ends {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.7rem;
}

.ins-track__ends span:last-child { text-align: right; }

.ins-track__steps {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}

.ins-track__step { background: var(--bg-raised); padding: 0.7rem 0.5rem; display: grid; gap: 0.3rem; align-content: start; }

/* Color en la regla de abajo (seccion 8b): numeral de figura, va en vino. */
.ins-track__n { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; }

.ins-track__label { font-size: 0.82rem; line-height: 1.35; color: var(--text-primary); }

.ins-track__span {
  margin-top: 0.7rem; display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-alt);
}

.ins-track__span::before,
.ins-track__span::after { content: ''; height: 1px; flex: 1; background: color-mix(in srgb, var(--accent-alt) 35%, transparent); }


/* --------------------------------------------------------------------------
   B4. FILTER — declared pipeline, minus what has no evidence. Fig. 04
   Ends on an unknown: the number is the reader's, not ours.
   -------------------------------------------------------------------------- */
.ins-filterfig { display: grid; }

.ins-filterfig__head,
.ins-filterfig__foot {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: 1.1rem 1.25rem;
}

.ins-filterfig__head { border-bottom: 1px solid var(--line); }

.ins-filterfig__foot { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 5%); }

.ins-filterfig__k {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}

.ins-filterfig__v { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 500; line-height: 1; color: var(--ink); }

.ins-filterfig__foot .ins-filterfig__v { color: var(--accent); }

.ins-filterfig__steps { display: grid; }

.ins-filterfig__step {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.85rem;
  align-items: baseline; padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem; line-height: 1.45; color: var(--text-primary);
  margin: 0; max-width: none;
}

.ins-filterfig__step:last-child { border-bottom: 0; }

.ins-filterfig__minus { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-alt); }

@media (max-width: 860px) {

.ins-track__steps { grid-auto-flow: row; grid-auto-columns: auto; }

.ins-track__step { grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; }

.ins-track__label { font-size: 0.86rem; }

.ins-track__ends { flex-direction: column; gap: 0.3rem; }

.ins-track__ends span:last-child { text-align: left; }

}

@media (max-width: 700px) {

.ins-spec__row { grid-template-columns: 1fr; gap: 0.6rem; }

.ins-spec__fit { grid-column: 1; }

.ins-sel__row { grid-template-columns: 1fr; align-items: start; }

}

.ins-prose > .ins-sel { margin-block: 2.4em 0; }


/* selector head + the table it sits on (panel already draws the frame) */
.ins-sel__head {
  position: relative;
  display: flex; align-items: baseline; gap: 0.75rem; margin: 0;
  padding: 0.85rem 1.25rem;
  background: var(--bg-base);
  /* "Fig. 03" vive acá, no dentro de un .ins-fig__cap (el selector no es un
     .ins-fig): sin este `position: relative` el .ins-fig__idx colgado se
     anclaba al ancestro posicionado más cercano, que quedaba a 300px de
     distancia dentro del riel, montado encima del índice. */
}

@media (max-width: 640px) {

  /* table becomes cards, so the controls detach into their own panel */
.ins-sel:not([hidden]) { border-radius: var(--radius); border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }

.ins-sel:not([hidden]) + [data-tablewrap] { margin-top: 1.25rem; }

}

@media (pointer: coarse) {

.ins-sel__opt span {
    min-height: 44px;
    display: flex; align-items: center;
    padding-inline: 0.9rem;
  }

}

@media (prefers-reduced-motion: reduce) {

.ins-progress__bar,
  .ins-prose table tbody tr,
  .ins-prose [data-tablewrap][data-sel-on] tbody tr,
  .ins-sel__opt span,
  .ins-endcta a,
  .ins-card,
  .ins-link-arrow .arrow {
    transition: none !important;
  }

}

@media (max-width: 700px) {

.ins-spec__cell { flex: 1 1 5rem; min-width: 4.4rem; padding: 0.7rem 0.5rem; }

.ins-spec__cell i { font-size: 0.7rem; }

.ins-spec__cell b { font-size: 1.15rem; }

}

.ins-article__body,
.ins-prose > .ins-fig,
.ins-prose > [data-tablewrap],
.ins-prose > .ins-sel,
.ins-tldr,
.ins-faq,
.ins-endcta { max-width: var(--ins-plate); }

.ins-fig--ledger .ins-fig__note { max-width: var(--ins-plate); }


/* --------------------------------------------------------------------------
   7. EL VINO — una gramática, cuatro marcas en 19.500px
   -------------------------------------------------------------------------- */

/* Fig. 02 · el mismo corchete rotado al eje horizontal. Medía 9.6px (por
   debajo del piso del propio archivo) y llegaba al 58% de su figura: el tramo
   invisible entre apretón de manos y firma es la idea más cara de la pieza y
   por fin se ve, acotada de punta a punta. */
.ins-track__span {
  max-width: none;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--accent-alt);
}

.ins-track__span::before,
.ins-track__span::after {
  background: color-mix(in srgb, var(--accent-alt) 55%, transparent);
}


/* Fig. 04 · el MISMO corchete, en el MISMO canal, 17.000px más abajo,
   abrazando las cuatro filas de la resta. Y NO CIERRA: sin brazo inferior, es
   una medición que nadie terminó. Es la tesis del artículo dibujada. */
.ins-fig--ledger .ins-filterfig__steps { position: relative; }

@media (min-width: 1200px) {

.ins-fig--ledger .ins-filterfig__steps::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(100% + var(--ins-gutter) / 3);
    width: 12px;
    border: 1.5px solid var(--accent-alt);
    border-right: 0;
    border-bottom: 0;
  }

}

/* EL REMATE. Dos numerales del MISMO cuerpo y la MISMA alineación, y uno de
   ellos falta. El "?" era azul, o sea estaba pintado con el color que este
   mismo archivo definió como "esta es la respuesta", cuando es exactamente lo
   contrario. Si desaturás la página el argumento sigue en pie: es tipográfico. */
.ins-filterfig__head .ins-filterfig__v,
.ins-fig--ledger .ins-filterfig__foot .ins-filterfig__v {
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}

.ins-fig--ledger .ins-filterfig__foot .ins-filterfig__v { color: var(--accent-alt); }

.ins-filterfig__minus { color: var(--text-muted); }

.ins-sel {
  background: none;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
}

.ins-sel__head { background: none; }

.ins-sel:not([hidden]) + [data-tablewrap] > table {
  border-top: 0;
}


/* El único momento de conversión intermedio, y nace del contenido: el
   párrafo que sigue al ledger es el que lleva a la calculadora. */
.ins-prose > .ins-fig--ledger + p {
  font-size: 1.3125rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}


/* Fig. 01 · CUATRO MÁRGENES IGUALES. El bleed de un solo lado dejaba el texto
   pegado al borde izquierdo (0px) contra 24px del derecho, y encima el panel
   no tenía padding-block propio: el aire de arriba/abajo salía del padding
   de cada fila (18.4px), un tercer valor distinto. Ahora el panel es el único
   que aporta el margen del borde: `--space-3` en los cuatro lados. Las filas
   conservan su padding vertical para el ritmo ENTRE filas, pero la primera y
   la última lo pierden en el borde que da al panel para no duplicarlo. */
.ins-fig--plate .ins-fig__panel { padding: var(--space-3); }

.ins-fig--plate .ins-spec__row:first-child { padding-top: 0; }

.ins-fig--plate .ins-spec__row:last-child  { padding-bottom: 0; }


/* Fig. 01 · la fila de MEDDPICC son OCHO celdas y el flex-basis de 4.2rem
   (67px x 8 = 538px sobre una tira de 508px) mandaba la octava a un renglón
   propio a todo lo ancho. Leído como diseño, ese renglón parecía significar
   algo; no significaba nada, era un desborde. El basis decide el wrap, no el
   min-width, así que se baja el basis y las celdas siguen creciendo parejas. */
.ins-spec__cell { flex: 1 1 3.4rem; min-width: 3.2rem; }


/* --------------------------------------------------------------------------
   8b. TRES FORMAS DE FIGURA + DISCIPLINA DEL ACENTO
   Se conservan de los pases anteriores porque siguen siendo correctas y este
   pase las reemplazó en bloque. Cada figura declara su propia forma: la
   default (.ins-fig__panel) no tiene superficie, y una figura que no declara
   forma no la recibe.
   -------------------------------------------------------------------------- */

/* 1. PLACA (Fig. 01) — sostenida por dos reglas horizontales, dentro de la
      misma columna que el resto de la prosa (sin bleed): una placa encastrada
      en la página, no una tarjeta flotando encima. */
.ins-fig--plate .ins-fig__panel {
  background: var(--bg-raised);
  border-block: 1px solid var(--line);
}

.ins-fig--plate .ins-spec__row { padding-inline: 0; }


/* 2. RECORRIDO (Fig. 02) — un proceso es una estructura: sin superficie, sobre
      el fondo de la página, y las hairlines de la grilla hacen el trabajo. */
.ins-fig--track .ins-track { padding: 0; }

.ins-fig--track .ins-track__steps { border-inline: 0; border-radius: 0; }


/* 3. LEDGER (Fig. 04) — una resta se lee como una cuenta: reglada arriba y
      abajo, filas separadas, nada encajonado. Y sin el tinte azul del pie: es
      justo donde vive el "?" en vino, y el azul ahí contradice la doctrina. */
.ins-fig--ledger .ins-filterfig__head,
.ins-fig--ledger .ins-filterfig__foot,
.ins-fig--ledger .ins-filterfig__step { padding-inline: 0; }

.ins-fig--ledger .ins-filterfig__head { border-top: 1px solid var(--line-strong); }

.ins-fig--ledger .ins-filterfig__foot {
  background: none;
  border-bottom: 1px solid var(--line-strong);
}


/* Un chip azul en CADA fila dejaba a la fila matcheada sin nada con qué ganar.
   Los chips son neutros; sólo el match se pone azul. */
.ins-prose table .ins-model {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  letter-spacing: 0.1em;
}

.ins-prose table tbody tr[data-sel-match] .ins-model {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 6%);
}


/* El contador de paso del Paper Process (Fig. 02) pasa a VINO (2026-08-10).
   Era neutro por la regla vieja de cuota. Es un índice de figura, y además
   numera justo los siete pasos del tramo que el forecast no puede ver: el
   mismo tramo que el corchete de esta figura ya acota en vino. */
.ins-track__n  { color: var(--accent-alt); }

/* letter-spacing de esta etiqueta definido en su regla base (0.03em): a 0.1em
   (la banda mono del sistema) "Economic"/"Champion" no entraban en una línea
   en la fila de 8 celdas. El espacio físico manda sobre el tracking acá. */

/* Las figuras comparan cifras entre filas: los numerales tienen que alinear. */
.ins-prose table,
.ins-spec__n,
.ins-track__n { font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {

  /* En móvil el bleed va de borde a borde del viewport, izquierda Y derecha
     por igual; el padding se pasa a las cuatro direcciones (no sólo inline)
     para que arriba/abajo sigan midiendo lo mismo que los costados. */
.ins-fig--plate .ins-fig__panel {
    margin-inline: calc(var(--container-pad) * -1);
    padding: var(--container-pad);
  }

}