/* =========================================================================
   micvlisto.css — Decisiones LOCAL del case study de MiCVListo.

   docs/DESIGN_SYSTEM.md declara explícitamente que estas composiciones NO
   deben convertirse en componentes globales:

     - secuencia de producto con evidencia;
     - línea de stack;
     - anchos concretos de la secuencia.

   La unidad narrativa de esta página es la FILA DE RECORRIDO: un ordinal,
   una etapa y la evidencia que la demuestra, siempre en la misma
   orientación. No es el alternado texto/evidencia de Varmo, y no debe
   unificarse con él aunque ambas páginas muestren capturas junto a texto.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Largos de pauta — Local
   Rango del contrato: 24–240px en desktop, 24–60px en mobile.
   Ritmo visual, no categoría: los valores mobile no se derivan de los
   desktop. Segmento más largo en 02, que es el corazón de la página.
   Pendiente de aprobación visual humana.
   ------------------------------------------------------------------------- */
.seccion--problema-micv {
  --pauta-seg: 50px;
}
.seccion--recorrido {
  --pauta-seg: 58px;
}
.seccion--criterio-ia {
  --pauta-seg: 38px;
}
.seccion--privacidad {
  --pauta-seg: 46px;
}
.seccion--publicado {
  --pauta-seg: 32px;
}
.seccion--portfolio-micv {
  --pauta-seg: 26px;
}

@media (min-width: 900px) {
  .seccion--problema-micv {
    --pauta-seg: 184px;
  }
  .seccion--recorrido {
    --pauta-seg: 232px;
  }
  .seccion--criterio-ia {
    --pauta-seg: 108px;
  }
  .seccion--privacidad {
    --pauta-seg: 144px;
  }
  .seccion--publicado {
    --pauta-seg: 76px;
  }
  .seccion--portfolio-micv {
    --pauta-seg: 48px;
  }
}

/* -------------------------------------------------------------------------
   Secuencia de producto con evidencia — Local
   Cada etapa es una fila: ordinal, título y su evidencia. La orientación
   no alterna: el recorrido se lee siempre en la misma dirección, que es
   justamente lo que lo distingue de una composición alternada.
   Sin cards, sin timeline genérico, sin stepper, sin JavaScript.
   ------------------------------------------------------------------------- */
.recorrido {
  list-style: none;
  margin-top: var(--s7);
  border-bottom: 1px solid var(--border);
}

.recorrido__paso {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: var(--s3);
  align-items: start;
  padding-block: var(--s6);
  border-top: 1px solid var(--border);
}

.recorrido__ordinal {
  color: var(--accent);
  padding-top: 0.3em;
}

.recorrido__titulo {
  margin-bottom: var(--s5);
}

/* En mobile la evidencia ocupa el ancho completo de la fila. Sin esto caería
   en la columna del ordinal, de 30px, y la superficie colapsaría. */
.recorrido__evidencia {
  grid-column: 1 / -1;
  margin-top: var(--s5);
  min-width: 0;
}

@media (min-width: 900px) {
  /* La secuencia no ocupa todo el ancho: cada etapa aporta un ordinal, un
     título y su evidencia, sin cuerpo propio. Una fila a sangre completa
     dejaría una columna de texto vacía enorme. */
  .recorrido {
    max-width: 840px;
  }

  .recorrido__paso {
    grid-template-columns: 44px minmax(0, 1fr) 380px;
    column-gap: var(--s6);
    padding-block: var(--s7);
    /* Ordinal y título se alinean con el centro óptico de la evidencia. */
    align-items: center;
  }

  /* El título encabeza la columna de texto; la evidencia ocupa la tercera. */
  .recorrido__cuerpo {
    grid-column: 2;
  }

  .recorrido__evidencia {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0;
  }

  .recorrido__ordinal {
    font-size: var(--fs-9);
    padding-top: 0;
  }

  /* El título ya no encabeza un bloque de texto: es la etiqueta de la etapa. */
  .recorrido__titulo {
    margin-bottom: 0;
  }
}

/* -------------------------------------------------------------------------
   Ritmo interno del caso — Local
   ------------------------------------------------------------------------- */
.micv__cuerpo {
  margin-top: var(--s4);
  color: var(--text-secondary);
}

.micv__cuerpo > * + * {
  margin-top: var(--s4);
}

.micv__subbloque {
  margin-top: var(--s7);
}

.micv__lista {
  margin-top: var(--s5);
}

/* Cierre de sección con peso tipográfico, sin gastar una cita destacada:
   el contrato admite como máximo dos por página. */
.micv__afirmacion {
  margin-top: var(--s6);
  color: var(--text-primary);
}

/* -------------------------------------------------------------------------
   Línea de stack — Local
   El Design System declara la línea de stack Local en Varmo y en
   MiCVListo por separado. Se escribe dos veces a propósito: unificarlas
   sería exactamente el error que D-026 prohíbe.
   ------------------------------------------------------------------------- */
.micv__stack {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}

.micv__stack-rotulo {
  color: var(--text-secondary);
}

.micv__stack-nota {
  margin-top: var(--s3);
  color: var(--text-secondary);
}

.micv__stack-lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s4);
  color: var(--text-secondary);
}