/* ════════════════════════════════════════════════════════════
   PIVOT · COMPONENTES Y OVERRIDES
   ════════════════════════════════════════════════════════════
   Lo exclusivo de este case y sus ajustes sobre los componentes
   compartidos. Carga DESPUÉS de todas las hojas de shared/, por eso puede
   sobrescribirlas. Enlazada en esa posición exacta en index.html.
   ════════════════════════════════════════════════════════════ */

/* Pivot brand #1A36B8 · shells pastel atenuados (~10–24% tinta) */
  :root {
    --case-accent: #1A36B8;
    --case-ui-grad: linear-gradient(
      148deg,
      #F1F3FB 0%,
      #E3E6F6 38%,
      #D5DAF2 68%,
      #F4F6FC 100%
    );
    --case-spotlight-radial: rgba(90, 120, 220, 0.22);
    --case-spotlight-wash: rgba(26, 54, 184, 0.32);
    --case-spotlight-wash-mid: rgba(26, 54, 184, 0.16);
  }

/* Rail de tres, no de dos.
   El compartido es 1fr 1fr; con tres tarjetas la última caía sola en una
   segunda fila a media anchura —el mismo huérfano que se corrigió en el
   .stack-grid del home—. Con tres columnas la fila cierra.
   Solo Pivot tiene tres compactas; Kivo y Prestio siguen con dos y no les
   afecta porque el override está en esta hoja. */
@media (min-width: 900px) {
  .decision-rail {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Dato derivado dentro de la copy de una decisión.
   Se marca en gris y con filete para que no se confunda con las cifras
   medidas de los párrafos vecinos: la diferencia entre medido y estimado
   tiene que verse antes de leerla, no solo decirse en el texto. */
.estimacion {
  margin-top: 1.1rem;
  padding: 0.75rem 0 0.75rem 0.9rem;
  border-left: 2px solid var(--color-border-strong);
  font-size: calc(var(--text-body) * 0.94);
  color: var(--color-body);
}

/* Cierre honesto · "Qué supe después".
   Va entre las tres tarjetas de impacto y el bloque de aprendizaje. Sin caja
   ni fondo propio: es prosa, y una tarjeta más ahí competiría con las tres
   que acaba de leer. Solo una regla superior para separarlo y una medida
   corta para que se lea como nota de autor, no como sección nueva.
   Exclusivo de Pivot: es el único case con un después que contar. */
.impact-after {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(24px, 3.5vw, 36px);
  border-top: 1px solid var(--color-border);
  max-width: 46rem;
}

.impact-after__title {
  margin: 0 0 0.7rem;
  font-family: var(--font-display, "Inter", system-ui, sans-serif);
  font-size: clamp(1.05rem, 1.1vw + 0.7rem, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.impact-after p {
  margin: 0 0 0.85rem;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-body);
  text-wrap: pretty;
}

.impact-after p:last-child {
  margin-bottom: 0;
}

/* El "qué haría distinto" se despega del relato: es la conclusión, no otro
   párrafo del mismo. */
.impact-after__next {
  margin-top: 1.1rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--case-accent);
}

/* Design system · dos boards de proporción muy distinta.
   El shell es vertical (678×1020, ratio 0.66) y la hoja del kit es cuadrada
   (1200×1200). A columnas iguales el shell salía un 50% más alto y el frame
   del kit quedaba medio vacío de fondo oscuro. Repartiendo 0.62 / 1 los dos
   terminan casi a la misma altura sin recortar ninguna imagen.
   Solo Pivot usa .decision-ds-finale__frames; Kivo y Prestio llevan un frame
   suelto, así que este override no los toca. */
@media (min-width: 640px) {
  .decision-ds-finale__frames {
    grid-template-columns: 0.62fr 1fr;
    align-items: start;
    gap: clamp(12px, 1.6vw, 20px);
  }
}

/* Pivot · cierre con tinte de marca #1A36B8 */
  .impact--finale .impact-takeaway.impact-takeaway--hero-close {
    --takeaway-deep: #0c0e16;
    --takeaway-em: #7B93E8;
}

  .story-context__grid {
    display: grid;
    gap: clamp(28px, 4vw, 40px);
    align-items: start;
}
  .story-context__copy h2 { margin: 0 0 1rem;
}
  .story-context__copy p {
    margin: 0 0 1rem;
    max-width: 42ch;
}
  .story-context__copy p:last-child { margin-bottom: 0;
}
  .story-context__copy .surface-list { margin-top: 0.5rem;
}
  @media (min-width: 900px) {
    .story-context__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: clamp(32px, 4.5vw, 56px);
}
  }
  /* Scoped: ".story-section p" (0,1,1) le ganaba a ".act-head__lead"
     (0,1,0) y el lead del acto salía a tamaño de cuerpo. */
  .act-head .act-head__lead {
    margin: 0;
    max-width: 48ch;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.011em;
    color: var(--color-body, #52525B);
    text-wrap: pretty;
}

  /* Ritmo del head de Decisiones · igual al master (KIVO) */
  .decisions-act > .act-head {
    margin-bottom: clamp(36px, 5.5vw, 52px);
    max-width: 44rem;
    gap: 14px;
}

  /* Tabla antes/después · .check es texto plano (14px / 600) sobre
     --color-surface (#FFF). #C2410C da 4.96:1 sobre el fondo y más sobre
     blanco, por encima del mínimo AA de 4.5:1 para texto normal.
     (luminancia relativa WCAG, no a ojo). El token global no se toca. */
  .data-table-wrap {
    --color-accent-ink: #C2410C;
}

  /* Impacto · misma medida de lead y grid de 3 (no 2 + huérfana) que el master */
  .impact--finale .impact-head__lead {
    max-width: 46ch;
}

  .impact--finale .impact-grid {
    grid-template-columns: 1fr;
}

  @media (min-width: 768px) {
    .impact--finale .impact-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
}
  }

  /* Decisión 02 · Antes/después — pantallas grandes arriba, texto abajo.
     Son screenshots densos de tabla; en el zigzag lado-a-lado se leían
     muy chicos para el punto que están probando. */
  @media (min-width: 900px) {
    .decision--split--with-evidence {
      grid-template-columns: 1fr;
      grid-template-areas:
        "stage"
        "caption"
        "copy"
        "evidence";
      row-gap: clamp(16px, 2.4vw, 28px);
}
    .decision--split--with-evidence .decision__copy {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
      column-gap: clamp(24px, 4vw, 48px);
      align-items: start;
      max-width: none;
      margin-inline: 0;
}
    .decision--split--with-evidence .decision__copy-head {
      grid-column: 1;
}
    .decision--split--with-evidence .decision__copy-body {
      grid-column: 2;
      display: flex;
      flex-direction: column;
      gap: 1em;
}
    /* La regla compartida .decision--split .decision__copy h3/p trae
       max-width en ch pensado para la columna angosta del zigzag —
       aquí el heading y los párrafos ya tienen su propia columna. */
    .decision--split--with-evidence .decision__copy h3 {
      max-width: none;
}
    .decision--split--with-evidence .decision__copy p {
      max-width: 48ch;
}
    /* Marco del board oscuro — 32px fijo. Más que eso encoge demasiado
       la imagen y no se lee el texto de los recuadros de anotación. */
    .decision--split--with-evidence .decision__stage--spotlight {
      padding: 32px;
}
  }