/* ==========================================================================
   ChatISP: /demonstracao

   So o que e EXCLUSIVO desta pagina. O simulador inteiro vem de
   css/sec-demonstracao.css e css/demo.css, compartilhados com a home: a mesa,
   a placa de simulacao e o aparelho. Capa, dupla, painel, passos, comparativo,
   acordeao, relacionadas e chamada vivem em css/pagina.css e css/site.css.

   Tres pecas proprias:
     .roteiro   o roteiro de cinco passos, no painel da capa
     .limite    a lista do "o que ela NAO e", dentro do painel da secao 1
     .pagina-demonstracao   ajuste de contexto na secao reaproveitada da home

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

/* --------------------------------------------------------------------------
   01. O roteiro (painel da capa)

   A pagina defende que a demonstracao e ROTEIRIZADA, entao o painel da capa
   e o proprio roteiro, e nao mais uma maquete de conversa (que o simulador
   logo abaixo ja entrega de verdade). Os numeros ficam em verde, sem circulo:
   o circulo numerado e o vocabulario do bloco .passo, e repeti-lo aqui faria
   a capa parecer uma secao de conteudo deslocada.
   -------------------------------------------------------------------------- */

.roteiro {
  display: grid;
  gap: var(--e5);
}

.roteiro-passos {
  display: grid;
  gap: var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.roteiro-passos > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e4);
  align-items: baseline;
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.6;
}

/* Fio entre um passo e o seguinte. E o que faz a lista parecer uma ficha
   tecnica em vez de um paragrafo quebrado. */
.roteiro-passos > li + li {
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
}

.roteiro-n {
  color: var(--verde);
  font-family: var(--fonte);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  font-variant-numeric: tabular-nums;
}

/* A ressalva fecha o painel: e a mesma frase que a placa do simulador repete
   mais abaixo, e ela precisa chegar ao leitor antes do primeiro clique. */
.roteiro-pe {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  margin: 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borda-forte);
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   02. A lista do que a demonstracao NAO e

   .lista-marcada nao serve aqui: o visto verde diz "isto voce tem", e a
   leitura ficaria invertida justamente na lista em que o site abre mao de
   alguma coisa. A marca e o mesmo circulo neutro do .marca-nao da tabela,
   sem cor de alarme, porque nao ha nada de errado em ser uma simulacao.
   -------------------------------------------------------------------------- */

.limite {
  display: grid;
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.limite > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e3);
  align-items: start;
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.7;
}

.limite strong {
  display: block;
  color: var(--texto);
  font-weight: var(--p-forte);
}

/* A altura do circulo e a da primeira linha de texto (--c3 x 1.7), entao
   align-items: start ja alinha os dois sem margem de correcao. */
.limite-nao {
  display: grid;
  place-items: center;
  width: var(--e5);
  height: var(--e5);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-full);
  color: var(--tenue);
  font-size: var(--c4);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   03. A secao reaproveitada da home

   componentes/demonstracao.php pertence tambem a home, onde as secoes sao
   numeradas ("01 Demonstracao interativa"). Fora daquela sequencia o numero
   nao quer dizer nada, entao some daqui sem tocar no componente, que continua
   intacto para a home. E para isso que o <body> carrega .pagina-<slug>.
   -------------------------------------------------------------------------- */

.pagina-demonstracao .secao-demo .secao-cabecalho .sobretitulo b {
  display: none;
}

/* --------------------------------------------------------------------------
   04. Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {
  .roteiro {
    gap: var(--e4);
  }

  .roteiro-pe {
    padding-top: var(--e3);
  }
}