/* ==========================================================================
   ChatISP: /implantacao

   So o que e EXCLUSIVO desta pagina. Capa, passos, dupla, painel, aviso,
   especificacoes, comparativo, relacionadas e chamada vivem em css/pagina.css;
   grade, cartao, selo, fita e lista-marcada vivem em css/site.css. A secao
   reaproveitada da home traz o proprio css/sec-implantacao.css.

   Uma peca propria e um ajuste de contexto:
     .preparo            a lista de levantamento, no painel da capa
     .pagina-implantacao o numero editorial da secao reaproveitada

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

/* --------------------------------------------------------------------------
   01. A lista de levantamento (painel da capa)

   E uma lista de conferencia meio preenchida, de proposito: tres itens com
   marca e dois em aberto. A capa inteira defende que a implantacao comeca
   antes do servidor, e uma lista toda marcada diria o contrario: que o
   provedor precisa chegar com tudo pronto.
   -------------------------------------------------------------------------- */

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

.preparo-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borda);
}

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

.preparo-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-1);
}

/* A marca e um circulo vazio enquanto a resposta nao existe. Nao ha estado
   de erro aqui: o que falta esta apenas em aberto. */
.preparo-marca {
  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);
}

.preparo-marca .icone {
  width: var(--e3);
  height: var(--e3);
}

.preparo-item--pronto {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
}

.preparo-item--pronto .preparo-marca {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
}

.preparo-texto {
  display: grid;
  gap: var(--e1);
  min-width: 0;
  color: var(--tenue);
  font-size: var(--c5);
  line-height: 1.5;
}

.preparo-texto strong {
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-medio);
  letter-spacing: var(--tk3);
}

.preparo-pe {
  margin: 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  color: var(--tenue);
  font-size: var(--c4);
  line-height: 1.65;
}

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

   componentes/implantacao.php pertence tambem a home, onde as secoes sao
   numeradas ("09 Como comeca"). Fora daquela sequencia o numero nao quer
   dizer nada. Some aqui, sem tocar no componente, que continua intacto para
   a home. E para isso que o <body> carrega .pagina-<slug>.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   03. Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {
  /* Alvo de toque nao existe aqui (a lista e decorativa), mas o rotulo longo
     encostaria na marca. Empilhar mantem as duas linhas legiveis. */
  .preparo-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e2);
  }
}