/* ==========================================================================
   ChatISP: /fluxos

   So o que e EXCLUSIVO desta pagina. Capa, passos, dupla, especificacoes,
   painel-dados, comparativo, aviso, relacionadas e chamada vivem em
   css/pagina.css; grade, cartao, acordeao e selo vivem em css/site.css.

   Duas pecas proprias:
     .tracado   maquete do trecho de fluxo, no painel da capa. Nao ha imagem
                para esta pagina: os nos e os conectores sao desenhados aqui,
                so com borda, gradiente e pseudo-elemento.
     .pedidos   os tres pedidos que se repetem, na secao #volume.

   Mais dois ajustes locais, explicados no lugar: o rotulo de etapa dentro do
   texto (.pedido-etapa) e o respiro entre os blocos de #etapas e #sistemas,
   que css/pagina.css nao resolve porque nenhuma secao antes desta empilhou
   tres blocos irmaos.

   Nenhum valor escrito a mao: so var().
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Maquete do trecho de fluxo (capa)

   A moldura ja e .capa-painel. Aqui dentro so existem os nos e os elos.
   -------------------------------------------------------------------------- */

.tracado {
  display: grid;
  gap: var(--e4);
}

.tracado-rotulo {
  margin: 0;
  color: var(--verde);
  font-family: var(--fonte);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

/* Sem gap: o espaco vertical entre um no e o proximo E o elo. */
.tracado-nos {
  display: grid;
}

.tracado-no {
  display: grid;
  justify-items: start;
  gap: var(--e2);
  padding: var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-1);
}

/* O no que a maquete esta seguindo: e o unico com a borda de acento, para
   que o percurso escolhido se leia sem legenda. */
.tracado-no--acao {
  border-color: var(--verde-linha);
}

.tracado-tipo {
  color: var(--tenue);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

.tracado-no--acao .tracado-tipo {
  color: var(--verde);
}

.tracado-fala {
  margin: 0;
  font-size: var(--c3);
  line-height: 1.6;
  color: var(--suave);
}

/* --- Menu de opcoes ------------------------------------------------------ */

.tracado-opcoes {
  display: grid;
  gap: var(--e1);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tracado-opcoes li {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  background: var(--sup-2);
  font-size: var(--c3);
  line-height: 1.4;
  color: var(--suave);
}

.tracado-opcoes b {
  display: grid;
  place-items: center;
  width: var(--e5);
  height: var(--e5);
  flex: none;
  border-radius: var(--r-sm);
  background: var(--sup-3);
  color: var(--tenue);
  font-size: var(--c5);
  font-weight: var(--p-forte);
}

/* --- Ramificacao ---------------------------------------------------------
   Espinha vertical na borda esquerda e um tracinho horizontal saindo de cada
   pilula: e o desenho de uma bifurcacao, sem SVG e sem imagem. */
.tracado-ramos {
  display: grid;
  justify-items: start;
  gap: var(--e2);
  margin-top: var(--e2);
  margin-left: var(--e3);
  padding-top: var(--e3);
  padding-left: var(--e5);
  border-left: 1px solid var(--borda-forte);
}

.tracado-ramo {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--e1) var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--r-full);
  font-size: var(--c5);
  line-height: 1.5;
  color: var(--tenue);
}

.tracado-ramo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--e5) * -1);
  width: var(--e5);
  height: 1px;
  background: var(--borda-forte);
}

/* Caminho seguido: no menu e na bifurcacao, a mesma marca. */
.tracado-viva {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--texto);
}

.tracado-viva b {
  background: var(--verde-vidro);
  color: var(--verde);
}

.tracado-ramo.tracado-viva::before {
  background: var(--verde-linha);
}

/* --- Elo entre dois nos --------------------------------------------------
   Um fio de 1px com a ponta em losango. Leva data-revelar="cortina": a
   mascara da cortina desce de cima para baixo, entao o fio literalmente se
   desenha do no de cima para o de baixo. Sem JS ele nasce inteiro. */
.tracado-elo {
  position: relative;
  justify-self: start;
  width: 1px;
  height: var(--e6);
  margin-left: var(--e6);
  background: linear-gradient(to bottom, var(--verde-linha), var(--borda-forte));
}

.tracado-elo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--e2);
  height: var(--e2);
  border-right: 1px solid var(--borda-forte);
  border-bottom: 1px solid var(--borda-forte);
  translate: -50% 0;
  rotate: 45deg;
}

/* --------------------------------------------------------------------------
   02. Os tres pedidos (#volume)

   Nao e cartao nem painel: e uma fala do assinante com a resposta do fluxo
   embaixo. A fala fica com o peso do corpo e a barra verde; a resposta desce
   para o tamanho de apoio, porque o protagonista aqui e o pedido.
   -------------------------------------------------------------------------- */

.pedidos {
  display: grid;
  gap: var(--e4);
}

.pedido {
  display: grid;
  gap: var(--e3);
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--sup-2);
  box-shadow: var(--sombra-1);
}

.pedido-fala {
  position: relative;
  margin: 0;
  padding-left: var(--e5);
  font-size: var(--c2);
  line-height: 1.5;
  color: var(--texto);
}

.pedido-fala::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  border-radius: var(--r-full);
  background: var(--verde);
}

.pedido-saida {
  margin: 0;
  font-size: var(--c3);
  line-height: 1.7;
  color: var(--suave);
}

/* Rotulo de etapa dentro do paragrafo: amarra a frase ao vocabulario dos
   oito tipos, sem abrir um bloco so para dizer o nome da etapa. */
.pedido-etapa {
  display: inline-block;
  margin-right: var(--e2);
  padding: var(--e1) var(--e2);
  border-radius: var(--r-sm);
  background: var(--verde-vidro);
  color: var(--verde);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-micro);
  vertical-align: baseline;
}

/* --------------------------------------------------------------------------
   03. Respiro entre blocos irmaos

   .secao-cabecalho ja traz margin-bottom, mas #etapas empilha painel-dados e
   grade, e #sistemas empilha tabela e aviso. Nenhum bloco do kit carrega
   margem propria, de proposito, entao o espaco entre irmaos e declarado
   aqui, e so aqui.
   -------------------------------------------------------------------------- */

.etapas-grade,
#sistemas .aviso {
  margin-top: var(--esp-bloco);
}

/* --------------------------------------------------------------------------
   04. Responsivo: 980 / 680 / 380
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  /* Fora da coluna estreita a maquete ganha ar: o painel da capa passa a
     ocupar a largura inteira. */
  .tracado-elo {
    margin-left: var(--e7);
  }
}

@media (max-width: 680px) {
  .tracado-no {
    padding: var(--e3);
  }

  .tracado-elo {
    margin-left: var(--e5);
    height: var(--e5);
  }

  .tracado-ramos {
    margin-left: 0;
    padding-left: var(--e4);
  }

  .tracado-ramo::before {
    left: calc(var(--e4) * -1);
    width: var(--e4);
  }

  .pedido {
    padding: var(--e4);
  }
}

@media (max-width: 380px) {
  .tracado-opcoes li {
    gap: var(--e2);
  }

  .pedido-fala {
    padding-left: var(--e4);
  }
}