/* Seção 06 — Diagram (Figma 8653:2286 · mobile 8653:2599): POC → MVP → Escala + Description Block (8653:2355)
   Posições horizontais do diagrama em % da largura do Section Container (8653:2287 = --content-w),
   para o desenho acompanhar a coluna sem quebrar entre 1024 e o frame desktop. */

.diagrama {
  --diagrama-card-from: #1f1f1f; /* início do gradiente dos cards (8653:2312) — fora da paleta */
  --diagrama-error: #ff8f91;     /* "Humano errou" + borda tracejada (8653:2322) — fora da paleta */
  /* Base das proporções: --content-w sem unidade (tan(atan2(a, b)) = a / b entre comprimentos) */
  --diagrama-ref: tan(atan2(var(--content-w), 1px));
  background: var(--black-200);
  padding-top: 32px;
  padding-bottom: var(--section-py);
}

.diagrama__inner { display: flex; flex-direction: column; gap: 80px; }

/* --------------------------------------------------------------------------
   Section Container (8653:2287)
   -------------------------------------------------------------------------- */
.diagrama__chart {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Header POC / MVP / Escala (8653:2288) */
.diagrama__phases {
  display: flex;
  align-items: center;
  gap: var(--content-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagrama__phase {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-800); /* 26 + 10 + 1 = 37 como no Figma */
}
.diagrama__phase-title { display: block; width: 100%; text-align: center; color: var(--gray-0); }

/* Linhas verticais de fundo (8653:2293 · 8653:2300 · 8653:2343) — SVGs do Figma */
.diagrama__lines {
  position: absolute;
  top: 53px;
  height: 461px;
  pointer-events: none;
}
.diagrama__lines img { width: calc(100% + 0.5px); height: 100%; max-width: none; } /* +0,5px: traço de 1px na borda (inset -0.11% do Figma) */
.diagrama__lines--mvp    { left: calc(459 / var(--diagrama-ref) * 100%); width: calc(464 / var(--diagrama-ref) * 100%); }
.diagrama__lines--escala { left: calc(924 / var(--diagrama-ref) * 100%); width: calc(433 / var(--diagrama-ref) * 100%); }
.diagrama__lines--poc    { z-index: 1; top: -16px; left: calc(18 / var(--diagrama-ref) * 100%); width: calc(435 / var(--diagrama-ref) * 100%); }
.diagrama__lines--poc img { width: calc(100% + 1px); margin-left: -0.5px; }

/* Content Container (8653:2305) → Content (8653:2306) + Legenda (8653:2348) */
.diagrama__body { display: flex; flex-direction: column; gap: 24px; }

.diagrama__content {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.diagrama__row { position: relative; z-index: 2; display: flex; align-items: flex-start; }
.diagrama__row--start { gap: var(--content-gap); }
.diagrama__row--end { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Item (cards) — borda 1px gray-900 entra no layout (texto em x=19), 70 de altura
   -------------------------------------------------------------------------- */
.diagrama__item {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 18px;
  border: 1px solid var(--gray-900);
  border-radius: 17px;
  background: linear-gradient(90deg, var(--diagrama-card-from) 0%, var(--black-100) 100%), var(--black-100);
  box-shadow: 0 0.3px 0 color-mix(in srgb, var(--gray-0) 25%, transparent); /* drop-shadow 0 0.3 0 */
}
/* Inner shadow do Figma cobre a forma inteira, inclusive o stroke → overlay na border-box */
.diagrama__item::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: inset 1px 1px 2px color-mix(in srgb, var(--gray-0) 8%, transparent);
  pointer-events: none;
}

/* 01 · Amostra com gabarito (8653:2308) — branco, sem borda: 22 + 24 + 22 = 68 */
.diagrama__item--light {
  flex: 1 0 0;
  min-width: 0;
  height: 68px;
  border: 0;
  background: var(--gray-0);
  box-shadow: none;
}
.diagrama__item--light::after,
.diagrama__item--lab::after { content: none; }

/* 02 · Medição de assertividade (8653:2312) */
.diagrama__item--measure { width: calc(917 / var(--diagrama-ref) * 100%); }

/* Ajuste de critério (8653:2317) */
.diagrama__item--adjust { width: calc(771 / var(--diagrama-ref) * 100%); margin-left: calc(495 / var(--diagrama-ref) * 100%); }

/* Humano errou · Caso sai da base (8653:2322) — stroke tracejado CENTRALIZADO na borda (meio px para fora),
   fora do layout (texto em x=18). Traço 7 / vão 5 medido no render do Figma → SVG, já que border: dashed não controla o traço. */
.diagrama__item--error {
  justify-content: flex-start;
  gap: 16px;
  margin-left: calc(566 / var(--diagrama-ref) * 100%);
  border: 0;
}
.diagrama__item--error::after { inset: -0.5px; }
.diagrama__dash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.diagrama__dash rect {
  fill: none;
  stroke: var(--diagrama-error);
  stroke-width: 1;
  stroke-dasharray: 7 5;
  stroke-dashoffset: -1.5;
}

/* 03 · Laboratório no seu sistema (8653:2329) */
.diagrama__item--lab {
  width: calc(696 / var(--diagrama-ref) * 100%);
  margin-left: calc(680 / var(--diagrama-ref) * 100%);
  overflow: clip;
  background: var(--blue-300);
  box-shadow: none;
}

/* Versions (8653:2336) */
.diagrama__versions {
  width: calc(696 / var(--diagrama-ref) * 100%);
  display: flex;
  align-items: center;
  gap: var(--content-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagrama__item--version { flex: 1 0 0; min-width: 0; justify-content: flex-start; }

/* Textos dos cards — Cabin 18, line-height normal (22 no Figma) */
.diagrama__item-title {
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
  color: var(--gray-0);
}
.diagrama__item-title--bold { font-weight: 700; color: var(--black-200); }

.diagrama__item-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.diagrama__item-label {
  min-width: 100%;
  font-size: 14px;
  line-height: 1.215; /* "normal" da Cabin (965 + 250 / 1000) sem o arredondamento do Chrome: 17 como no Figma */
  color: var(--diagrama-error);
}
/* "Você testa" (mobile 8653:2644) — só no layout mobile; no desktop (8653:2329) o cartão 03 tem só o título */
.diagrama__item-label--lab { display: none; min-width: 0; color: var(--black-200); }

/* Badge Container (8653:2310 · 8653:2314 · 8653:2333) */
.diagrama__badge {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--black-200);
  color: var(--gray-0);
}
.diagrama__badge--blue { background: var(--blue-300); color: var(--black-200); }
.diagrama__badge-num {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  text-box: trim-both cap alphabetic; /* text-box-trim do Figma: caixa = altura das maiúsculas (10) */
}

.diagrama__icon { flex: none; width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   Montagem ligada à rolagem + fluxo em loop (assets/js/sections/06-diagrama.js) — só com o movimento liberado;
   sem JS, com movimento reduzido e na impressão: o quadro do Figma, sem o caminho nem o ponto.
   -------------------------------------------------------------------------- */
/* Réguas de POC/MVP/Escala: a borda do li vira um traço que se desenha (scaleX); --diagrama-rule vem do JS
   (sem valor = 1 = Figma). O traço fica no lugar exato da borda (10 de respiro + 1). */
.diagrama__chart.is-scrub .diagrama__phase { border-bottom-color: transparent; }
.diagrama__chart.is-scrub .diagrama__phase-title { position: relative; }
.diagrama__chart.is-scrub .diagrama__phase-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -11px;
  height: 1px;
  background: var(--gray-800);
  transform: scaleX(var(--diagrama-rule, 1));
  transform-origin: left center;
}
/* Linhas pontilhadas crescem para baixo */
.diagrama__chart.is-scrub .diagrama__lines { transform-origin: center top; }

/* Fluxo: caminho (guia bem sutil) e ponto de luz com rastro, por cima do diagrama */
.diagrama__flow {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.diagrama__chart.is-flow.is-assembled .diagrama__flow { opacity: 1; } /* só com o diagrama montado */
.diagrama__flow-guide {
  fill: none;
  stroke: color-mix(in srgb, var(--blue-300) 22%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.diagrama__flow-dot { transition: opacity .3s ease; }
.diagrama__flow-trail {
  fill: none;
  stroke: var(--blue-300);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.diagrama__flow-trail--0 { opacity: .18; }
.diagrama__flow-trail--1 { opacity: .45; }
.diagrama__flow-trail--2 { opacity: .9; }
.diagrama__flow-head {
  fill: var(--gray-0);
  filter: drop-shadow(0 0 3px var(--blue-300)) drop-shadow(0 0 7px var(--blue-300));
}

/* Realce quando o ponto chega: selo (01/02/03), refresh, lixeira ou etiqueta da versão — a caixa não se mexe */
.diagrama__badge.is-hit { animation: diagrama-badge-hit .8s ease-out; }
@keyframes diagrama-badge-hit {
  30% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue-300) 70%, transparent), 0 0 14px var(--blue-300); filter: brightness(1.25); }
}
.diagrama__icon.is-spin { animation: diagrama-spin .9s ease-in-out; }
@keyframes diagrama-spin { to { rotate: -360deg; } } /* ícone anti-horário: uma volta */
.diagrama__icon.is-shake { transform-origin: 50% 20%; animation: diagrama-shake 1s ease-in-out; }
@keyframes diagrama-shake {
  10%, 50% { rotate: -10deg; }
  30%, 70% { rotate: 9deg; }
  85% { rotate: -4deg; }
}
.diagrama__item-title.is-hit { animation: diagrama-label-hit .8s ease-out; }
@keyframes diagrama-label-hit { 30% { text-shadow: 0 0 2px var(--gray-0), 0 0 12px var(--blue-300); } }

/* Luzes curtas que descem pelas linhas pontilhadas (o JS cria e remove) */
.diagrama__drip {
  position: absolute;
  top: 0;
  width: 1px;
  height: 28px;
  margin-left: -.5px;
  background: linear-gradient(to bottom, transparent, var(--blue-300));
  pointer-events: none;
  animation: diagrama-drip 2.4s linear forwards;
}
@keyframes diagrama-drip {
  0% { transform: translateY(-28px); opacity: 0; }
  12%, 85% { opacity: 1; }
  100% { transform: translateY(461px); opacity: 0; }
}
@keyframes diagrama-drip-m { /* celular: a faixa tem a altura dos cartões, não 461 */
  0% { top: -28px; opacity: 0; }
  12%, 85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@media print {
  .diagrama__flow,
  .diagrama__drip { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .diagrama__flow,
  .diagrama__drip { display: none; }
}

/* Legenda (8653:2348) */
.diagrama__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagrama__legend-item { display: flex; align-items: center; gap: 8px; }
.diagrama__legend-item img { flex: none; width: 24px; height: 24px; }
.diagrama__legend-item--start { width: calc(540 / var(--diagrama-ref) * 100%); justify-content: flex-end; }
.diagrama__legend-item--end { width: calc(696 / var(--diagrama-ref) * 100%); }
.diagrama__legend-text {
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
  color: var(--gray-300);
}

/* Divider Lines Container (mobile 8653:2896) — progresso da rolagem; só aparece no mobile */
.diagrama__progress { display: none; }

/* --------------------------------------------------------------------------
   Description Block (8653:2355) — título .section-title + texto 672 (coluna)
   -------------------------------------------------------------------------- */
.diagrama__desc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--content-gap);
}
.diagrama__title { white-space: nowrap; }
.diagrama__text {
  flex: 0 1 calc((100% - var(--content-gap)) / 2); /* 672 no desktop; encolhe antes de estourar a coluna */
  min-width: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-300);
}

/* --------------------------------------------------------------------------
   Telas estreitas: o diagrama mantém a proporção mínima e rola na horizontal
   -------------------------------------------------------------------------- */
@media (max-width: 1087px) {
  .diagrama__scroll {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--section-px));
    padding-inline: var(--section-px);
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  .diagrama__chart { min-width: 1024px; }

  /* Description Block empilha: título (nowrap, 534) + texto lado a lado não cabem na coluna */
  .diagrama__desc { flex-direction: column; align-items: flex-start; gap: 16px; }
  .diagrama__text { flex: none; width: 100%; max-width: calc((var(--content-w) - var(--content-gap)) / 2); }
}

/* Mouse (janela estreita): arrastar rola o diagrama — assets/js/sections/06-diagrama.js
   (.is-scrollable vem do JS: entre ~1072 e 1087 o desenho já cabe e não há o que arrastar) */
@media (max-width: 1087px) and (hover: hover) and (pointer: fine) {
  .diagrama__scroll.is-scrollable { cursor: grab; }
  .diagrama__scroll.is-dragging { cursor: grabbing; user-select: none; }
}

/* ==========================================================================
   Mobile (≤767) — Figma 8653:2599 (375 × 869), com uma mudança pedida pelo cliente (2026-10-19): o Figma deixa o
   desenho de 1376 rolando na horizontal (8653:2900 + barra 8653:2896); aqui o MESMO diagrama encolhe para caber na
   coluna, sem rolagem lateral. Posições horizontais seguem as % do desktop (sobre a largura da coluna), cartões com
   altura pelo conteúdo, texto menor que pode quebrar em 2 linhas, selos e ícones de 20.
   ========================================================================== */
@media (max-width: 767px) {
  .diagrama { padding-top: 16px; padding-bottom: 56px; } /* 8653:2599: pt 16 · pb 56 */
  .diagrama__inner { gap: 40px; }

  .diagrama__scroll { overflow: visible; margin-inline: 0; padding: 0; } /* sem rolagem lateral */
  .diagrama__chart { --dm-gap: 8px; min-width: 0; width: 100%; gap: 16px; }
  .diagrama__progress { display: none; } /* a barra de progresso da rolagem não tem mais função */

  /* POC / MVP / Escala: terços da coluna */
  .diagrama__phases { gap: var(--dm-gap); }
  .diagrama__phase-title { font-size: 16px; }

  /* Linhas pontilhadas: uma faixa por fase, da régua até o fim dos cartões (a legenda tem 1 linha de 20) */
  .diagrama__lines--mvp,
  .diagrama__lines--escala {
    top: calc(16px * 1.3 + 11px + 4px);  /* régua (título 16/1.3 + 10 + 1) + 4 */
    bottom: calc(20px + 16px);          /* legenda + vão */
    height: auto;
    width: calc((100% - 2 * var(--dm-gap)) / 3);
  }
  .diagrama__lines--mvp    { left: calc((100% - 2 * var(--dm-gap)) / 3 + var(--dm-gap)); }
  .diagrama__lines--escala { left: calc((100% - 2 * var(--dm-gap)) * 2 / 3 + 2 * var(--dm-gap)); }
  .diagrama__lines--poc { top: -12px; bottom: 0; height: auto; left: 0; width: calc((100% - 2 * var(--dm-gap)) / 3); }
  .diagrama__lines--poc img { width: 100%; margin-left: 0; }

  /* Cartões: as mesmas posições do desktop em % da coluna; altura pelo conteúdo */
  .diagrama__body { gap: 16px; }
  .diagrama__content { gap: 12px; }
  .diagrama__row--start { gap: var(--dm-gap); align-items: stretch; }
  .diagrama__item {
    height: auto;
    min-height: 44px;
    padding: 8px;
    gap: 8px;
    border-radius: 12px;
  }
  .diagrama__item--light { height: auto; }
  .diagrama__item-title { font-size: clamp(12px, 3.47vw, 15px); line-height: 1.2; white-space: normal; } /* 13 em 375 · 12 em 320 */
  .diagrama__item-label { font-size: clamp(11px, 3.2vw, 13px); }
  .diagrama__item-text { min-width: 0; }
  .diagrama__item--error { gap: 8px; }
  .diagrama__dash rect { rx: 12px; ry: 12px; }
  .diagrama__versions { gap: 6px; }
  .diagrama__item--version { padding-inline: 8px; }
  .diagrama__badge { width: 20px; height: 20px; }
  .diagrama__badge-num { font-size: 12px; }
  .diagrama__icon { width: 20px; height: 20px; }


  /* 03 · Laboratório (8653:2642): "Você testa" + título, gap 2 (Frame 100 · 8653:2643) */
  .diagrama__item-label--lab { display: block; }

  /* Legenda numa linha, centralizada */
  .diagrama__legend { justify-content: center; gap: 16px; }
  .diagrama__legend-item--start,
  .diagrama__legend-item--end { width: auto; gap: 6px; }
  .diagrama__legend-item img { width: 20px; height: 20px; }
  .diagrama__legend-text { font-size: clamp(12px, 3.47vw, 14px); }

  /* Luzes das linhas: descem até o fim da faixa (a altura muda com a largura) */
  .diagrama__drip { animation-name: diagrama-drip-m; }

  /* Description Block (8653:2668): centralizado, gap 10; título 28/1.2 (8653:2669) · texto 16/1.5 (8653:2670) */
  .diagrama__desc { align-items: stretch; gap: 10px; text-align: center; }
  .diagrama__title {
    white-space: normal; /* o Figma quebra "…no seu / sistema"; o site não tem palavra viúva (pedido do cliente) */
    font-size: 28px;
    line-height: 1.2;
    line-height: round(nearest, 1.2em, 1px); /* o Figma arredonda cada linha: 28 × 1,2 = 33,6 → 34 (2 linhas = 68) */
  }
  .diagrama__text { max-width: none; }
}

/* Até 479: o cartão 01 (coluna POC, a mais estreita) não comporta texto + selo lado a lado — o selo vai para o canto
   e o texto ganha a largura do cartão ("Amostra / com gabarito"). Acima disso o texto caberia numa linha e passaria
   por baixo do selo: ele volta para o lado. */
@media (max-width: 479px) {
  .diagrama__item--light .diagrama__badge { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; }
  .diagrama__item--light .diagrama__badge-num { font-size: 11px; }
}