/* =========================================================================
   varmo.css — Decisiones LOCAL del case study de Varmo.

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

     - composición alternada texto / evidencia;
     - línea de stack;
     - anchos concretos de layout.

   MiCVListo tendrá su propia composición Local. La línea de stack aparece
   en los dos casos y el contrato la declara Local en ambos: se escribe dos
   veces a propósito, no se unifica.
   ========================================================================= */

/* -------------------------------------------------------------------------
   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. Pendiente de aprobación visual humana.
   ------------------------------------------------------------------------- */
.seccion--problema-varmo {
  --pauta-seg: 52px;
}
.seccion--interior {
  --pauta-seg: 40px;
}
.seccion--estado {
  --pauta-seg: 48px;
}
.seccion--construccion {
  --pauta-seg: 34px;
}
.seccion--portfolio {
  --pauta-seg: 28px;
}

@media (min-width: 900px) {
  .seccion--problema-varmo {
    --pauta-seg: 200px;
  }
  .seccion--interior {
    --pauta-seg: 120px;
  }
  .seccion--estado {
    --pauta-seg: 168px;
  }
  .seccion--construccion {
    --pauta-seg: 88px;
  }
  .seccion--portfolio {
    --pauta-seg: 56px;
  }
}

/* -------------------------------------------------------------------------
   Composición alternada texto / evidencia — Local
   En mobile apila siempre en orden de DOM: texto y después su evidencia.
   En desktop el texto y la evidencia conviven, y el lado de la evidencia
   alterna entre secciones para dar ritmo.
   ------------------------------------------------------------------------- */
.alternado {
  display: grid;
  gap: var(--s7);
  margin-top: var(--s6);
}

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

.alternado__evidencia {
  min-width: 0;
}

@media (min-width: 900px) {
  .alternado {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--s8);
    align-items: start;
  }

  /* Evidencia a la izquierda, sin alterar el orden del DOM ni el de
     tabulación: ninguno de los dos bloques contiene elementos focusables. */
  .alternado--invertido {
    grid-template-columns: 380px minmax(0, 1fr);
  }

  .alternado--invertido .alternado__texto {
    order: 2;
  }

  .alternado--invertido .alternado__evidencia {
    order: 1;
  }
}

/* -------------------------------------------------------------------------
   Evidencia a ancho completo — Local
   La superficie de tres figuras de la sección 03 necesita todo el ancho.
   ------------------------------------------------------------------------- */
.evidencia-ancha {
  margin-top: var(--s7);
}

/* -------------------------------------------------------------------------
   Bloques internos del caso — Local
   ------------------------------------------------------------------------- */
.caso__cuerpo > * + * {
  margin-top: var(--s4);
}

/* Cuerpo que arranca inmediatamente después del título de sección. */
.caso__cuerpo--tras-titulo {
  margin-top: var(--s4);
}

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

.caso__lista {
  list-style: none;
  margin-top: var(--s5);
  border-bottom: 1px solid var(--border);
}

.caso__lista li {
  padding-block: var(--s3);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
}

/* Límite del estado actual: no es una capacidad, es una advertencia. */
.caso__limite {
  margin-top: var(--s6);
  padding-left: var(--s4);
  border-left: 3px solid var(--accent);
  color: var(--text-primary);
}

/* -------------------------------------------------------------------------
   Flujo de trabajo con agentes — Local
   Texto real, sin iconos.
   ------------------------------------------------------------------------- */
.caso__flujo {
  margin-top: var(--s5);
  padding: var(--s4);
  background-color: var(--bg-subtle);
  border-radius: var(--radius-control);
  color: var(--text-secondary);
  overflow-x: auto;
}

/* -------------------------------------------------------------------------
   Línea de stack — Local
   La tecnología es contexto de implementación, no el eje del caso: vive al
   final de la sección 04, en registro secundario. Sin logos ni badges.
   ------------------------------------------------------------------------- */
.stack {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}

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

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

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

/* -------------------------------------------------------------------------
   Cierre — Local
   ------------------------------------------------------------------------- */
.caso__cierre {
  margin-top: var(--s6);
}