/*
 * Sección: FLOW DIAGRAM (pieza reutilizable — ver ADR-0006)
 * El ecosistema agrupado en Captura / Detecta / Acciona + el video.
 * Contenido FIJO (mapa de producto, no administrable). Ancla: #flujo (#demo en el video)
 * Clases namespaceadas a mano (sin build step, ADR-0003).
 */

.flow-diagram {
  padding-block: var(--section-y);
}

.flow-diagram__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-10);
}

/* ---------- Columna izquierda: el diagrama ---------- */
.flow-diagram__flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Cada grupo pinta su label con su tono. Los iconos ya traen el suyo bakeado. */
.flow-diagram__group--blue {
  --group-color: var(--color-primary);
}
.flow-diagram__group--violet {
  --group-color: var(--color-lavender);
}
.flow-diagram__group--pink {
  --group-color: var(--color-accent);
}

.flow-diagram__group-label {
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 0.625rem; /* 10px */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--group-color);
}

/* línea divisoria fina debajo del label, a todo el ancho del grupo */
.flow-diagram__group-label::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: var(--space-2);
  background: var(--color-border);
}

/*
  El reparto de las cards sale solo del wrap + center, sin reglas por grupo:
    Captura (2 items) → entran las 2, sobra 1/3 → quedan centradas y corridas
                        media columna, como en el diseño.
    Detecta (3 items) → llenan la fila justo.
    Acciona (4 items) → entran 3, la 4ta baja y se centra.
*/
.flow-diagram__cards {
  --gap: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin-top: var(--space-3);
}

.flow-diagram__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 3 por fila: se descuentan los 2 gaps que quedan entre ellas */
  flex: 0 0 calc((100% - var(--gap) * 2) / 3);
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: center;
}

.flow-diagram__card-title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}

.flow-diagram__card-desc {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ---------- Columna derecha: el video ---------- */
.flow-diagram__media {
  width: 100%;
}

/* Video real: aspect-ratio = ratio exacto del archivo (1920×1200 = 16/10) → sin
   franjas negras a los costados. */
.flow-diagram__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: #000;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .flow-diagram__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }
  .flow-diagram__media {
    max-width: 640px;
    margin-inline: auto;
  }
}

/* 3 cards por fila con este texto no entran: pasan a 2. */
@media (max-width: 560px) {
  .flow-diagram__card {
    flex-basis: calc((100% - var(--gap)) / 2);
  }
}

/* Mobile: la sección se ensancha pero las cards no se pegan al borde. */
@media (max-width: 640px) {
  .flow-diagram {
    --page-padding-x: var(--space-5);
  }
}