/* ============================================================================
   enviquo — 04-converta.css (SEÇÃO NUMERADA 04 · CONVERTA, BRIEF §6)
   Escopo: SÓ classes s04- (+ overrides de fundação sempre dentro de .s04-*).
   Fundo Paper (body). Mobile-first; breakpoints 768 / 1024.
   Cores SEMPRE via variáveis de tokens.css; nenhum hex solto.
   Motion próprio: apenas o fade de opacidade da aresta vermelha do flow
   (compositor-friendly), com guarda de prefers-reduced-motion no fim.
   NOTA DE MONTAGEM: o index.html esqueleto linka "assets/css/05-converta.css";
   este arquivo foi fixado pelo orquestrador como 04-converta.css — conciliar.
   ========================================================================== */

/* ——— ritmo dos blocos ——— */
.s04-blocos {
  display: grid;
  gap: clamp(4rem, 6vw, 6.5rem);
  margin-block-start: clamp(3rem, 5vw, 4.5rem);
}

.s04-bloco {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

/* filho de grid nunca estoura a coluna (texto longo, pre, tabela) */
.s04-bloco > * { min-width: 0; }

/* ——— coluna de texto ——— */
.s04-texto .eyebrow-mono { margin-block-end: var(--space-3); }

.s04-texto h3 { margin-block-end: var(--space-4); }

.s04-corpo {
  color: var(--gray-600);
  max-width: 38rem;
}

/* ——— checklist (4 itens, check Lucide ink) ——— */
.s04-checklist {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.s04-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 1rem;
  color: var(--gray-800);
}

.s04-check {
  flex: none;
  margin-block-start: 3px;
  color: var(--gray-900);
}

/* ——— chrome comum dos mockups ——— */
.s04-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--gray-200);
}

/* rótulo técnico menor que o eyebrow padrão da fundação */
.s04-card-title {
  font-size: 0.625rem;
  color: var(--gray-600);
}

.s04-num { font-variant-numeric: tabular-nums; }

.s04-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-600);
}

.s04-status-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 2px; /* raio 2px, lei do manual */
  background: var(--enviquo-ink);
}

.s04-mock-card { overflow: hidden; }

/* =========================================================================
   a. FLOW BUILDER — card destaque com chanfro 60° (canto sup-direito)
   ========================================================================= */
.s04-flow-wrap {
  width: 100%;
  max-width: 31.25rem;
  margin-inline: auto;
}

/* o chanfro come ~26px do topo direito; o head reserva espaço pra não cortar */
.s04-flow-card .s04-card-head { padding-right: 3rem; }

.s04-flow-canvas {
  position: relative;
  aspect-ratio: 400 / 560;
  width: 100%;
  max-width: 26.25rem;
  margin: 1.125rem auto;
  /* grade de pontos do editor (decorativa) */
  background-image: radial-gradient(circle, var(--gray-200) 1px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: center;
}

.s04-flow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* arestas: cinza por padrão; UMA vermelha (caminho da conversão) */
.s04-edge {
  stroke: var(--gray-300);
  stroke-width: 2;
  stroke-linecap: butt;
}

.s04-edge-signal { stroke: var(--enviquo-signal); }

/* a aresta vermelha entra por último: fade de opacidade (só opacity),
   disparado quando o wrapper .rv ganha .rv-in via site.js */
html.js .s04-flow-wrap .s04-edge-signal {
  opacity: 0;
  transition: opacity 420ms var(--ease-out-expo);
  transition-delay: 320ms;
}

html.js .s04-flow-wrap.rv-in .s04-edge-signal { opacity: 1; }

/* nós do fluxo */
.s04-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 78%;
  padding: 0.4375rem 0.625rem;
  background: var(--enviquo-paper);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--gray-900);
  text-align: center;
}

.s04-node-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.s04-node-row svg { flex: none; }

.s04-node-kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.s04-node-escuro {
  background: var(--enviquo-ink);
  border-color: var(--enviquo-ink);
  color: var(--enviquo-paper);
}

.s04-node-escuro .s04-node-kicker { color: var(--gray-300); }

.s04-node-cond { border-style: dashed; border-color: var(--gray-300); }

/* valor de receita: vermelho de TEXTO sobre claro = signal-700 (AA) */
.s04-node-valor {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--signal-700);
}

/* posições (coordenadas do viewBox 400×560 em %) */
.s04-n1 { left: 50%;    top: 8.21%; }
.s04-n2 { left: 50%;    top: 25%; }
.s04-n3 { left: 50%;    top: 41.79%; }
.s04-n4 { left: 50%;    top: 58.57%; }
.s04-n5 { left: 28.35%; top: 90.71%; max-width: 42%; }
.s04-n6 { left: 71.65%; top: 90.71%; max-width: 42%; }

/* etiquetas dos ramos (sobre as arestas a 60°) */
.s04-flow-tag {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 1px 7px;
  background: var(--enviquo-paper);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-600);
}

.s04-tag-nao { left: 38.9%; top: 75.5%; }

.s04-tag-sim {
  left: 61.1%;
  top: 75.5%;
  color: var(--signal-700);
  font-variant-numeric: tabular-nums;
}

.s04-flow-foot {
  padding: 0.75rem 1.125rem;
  border-top: 1px solid var(--gray-200);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--gray-600);
}

/* =========================================================================
   b. API — snippet POST /v1/envios + resposta 202
   ========================================================================= */
.s04-api-tab {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--gray-900);
}

.s04-api-method { color: var(--signal-700); }

.s04-api-body {
  display: grid;
  gap: var(--space-2);
  padding: 1.125rem;
}

.s04-code-cap { font-size: 0.625rem; }

.s04-code {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  overflow-x: auto; /* rolagem interna do snippet; a página nunca rola */
}

.s04-code-req {
  background: var(--gray-900);
  color: var(--gray-300);
  border-radius: 12px;
  padding: 1rem;
}

/* vermelho de texto sobre ESCURO = signal-300 (lei do manual) */
.s04-tk-method { color: var(--signal-300); font-weight: 500; }

.s04-tk-url { color: var(--gray-0); }

.s04-code-link {
  inline-size: 2px;
  block-size: 14px;
  margin-inline: auto;
  background: var(--gray-300); /* conector vertical: 90° */
}

.s04-code-res {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 1rem;
  color: var(--gray-800);
}

.s04-code-res .s04-code { margin-block-start: var(--space-2); }

.s04-res-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.s04-badge-202 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  background: var(--enviquo-ink);
  color: var(--gray-0);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
}

.s04-tk-conv { color: var(--signal-700); font-weight: 500; }

/* =========================================================================
   c. EQUIPE — tabela de papéis
   ========================================================================= */
.s04-tabela-wrap {
  padding: 0.25rem 1.125rem 1.125rem;
  overflow-x: auto; /* rede de segurança: excesso rola DENTRO do card */
}

.s04-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.s04-tabela th {
  padding: 0.75rem 0.5rem 0.5rem;
  border-bottom: 1px solid var(--gray-200);
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-600);
}

.s04-tabela td {
  padding: 0.75rem 0.5rem;
  vertical-align: middle;
}

.s04-tabela th:first-child,
.s04-tabela td:first-child { padding-inline-start: 0; }

.s04-tabela th:last-child,
.s04-tabela td:last-child { padding-inline-end: 0; }

.s04-tabela tbody tr + tr td { border-top: 1px solid var(--gray-100); }

.s04-membro {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  color: var(--gray-900);
}

.s04-avatar {
  display: none; /* aparece a partir de 768px */
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-900);
}

.s04-papel {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gray-800);
}

.s04-perm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.s04-perm svg { flex: none; color: var(--gray-900); }

/* =========================================================================
   breakpoints — 768 (2 colunas) e 1024 (proporção 5/6 + inversão)
   ========================================================================= */
@media (min-width: 768px) {
  .s04-bloco {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* bloco invertido: mockup à esquerda, texto à direita (DOM segue texto-antes) */
  .s04-bloco-inv > .s04-texto { order: 2; }

  .s04-avatar { display: inline-flex; }

  .s04-code { font-size: 0.8125rem; }

  .s04-api-body { padding: 1.375rem; gap: var(--space-3); }

  .s04-card-head { padding: 1rem 1.375rem; }

  .s04-flow-card .s04-card-head { padding-right: 3.25rem; }

  .s04-flow-canvas { margin: 1.375rem auto; }

  .s04-flow-foot { padding: 0.875rem 1.375rem; }

  .s04-tabela-wrap { padding: 0.375rem 1.375rem 1.375rem; }
}

@media (min-width: 1024px) {
  .s04-bloco {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 5vw, 5rem);
  }

  .s04-bloco-inv {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .s04-node { font-size: 0.75rem; }

  .s04-node-valor { font-size: 0.75rem; }
}

/* =========================================================================
   movimento reduzido — a aresta vermelha aparece em fade curto, sem atraso
   (o restante da seção só usa .rv, já guardado pela fundação)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html.js .s04-flow-wrap .s04-edge-signal {
    transition: opacity 180ms ease;
    transition-delay: 0ms;
  }
}