/* ==========================================================================
   ChatISP: /contato (exclusivo desta pagina)

   O formulario e o capitulo verde vem de css/sec-contato.css, compartilhada
   com a home. Passos, especificacoes, acordeao, aviso, dupla e citacao vem do
   kit (css/pagina.css). Aqui mora so o que existe unicamente nesta pagina:

     .portas         as tres portas de triagem, no painel da capa
     .pagina-contato dois ajustes de contexto (ver secoes 03 e 04)

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

/* --------------------------------------------------------------------------
   01. As tres portas (painel da capa)

   Uma lista de destinos, nao uma pilha de cartoes: o .capa-painel ja e a
   caixa (--sup-2), entao cada porta entra transparente e so ganha corpo no
   hover. Se ela tambem tivesse fundo, a capa abriria com quatro superficies
   empilhadas para dizer tres coisas curtas.
   -------------------------------------------------------------------------- */

.portas {
  display: grid;
  gap: var(--e3);
}

.porta {
  display: grid;
  gap: var(--e1);
  padding: var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: transparent;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.porta:hover {
  background: var(--sup-3);
  border-color: var(--verde-linha);
}

/* Quem e a pessoa vem primeiro e em tinta cheia; o destino vem depois, em
   verde. A leitura e "voce e isto -> va para ali", nunca o contrario. */
.porta-quem {
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-forte);
  line-height: 1.45;
}

.porta-destino {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  color: var(--verde);
  font-size: var(--c4);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
}

.porta-destino .icone {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-2) var(--ease);
}

.porta:hover .porta-destino .icone {
  transform: translateX(var(--e1));
}

/* A quarta pessoa, quem ja e cliente, nao ganha porta porque o destino dela
   nao e uma pagina: e o canal combinado na implantacao. Vira o pe da lista,
   separado por um fio. */
.portas-pe {
  margin: 0;
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
  color: var(--tenue);
  font-size: var(--c4);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   02. Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {
  /* Em tela estreita a porta e um alvo de toque, nao uma linha de lista: o
     padding maior leva a altura bem acima dos 44px minimos. */
  .porta {
    padding: var(--e4) var(--e5);
  }
}

/* --------------------------------------------------------------------------
   03. O <em> do titulo fora do .secao-cabecalho

   Vago. A regra do <em> em titulo saiu do .secao-cabecalho e virou regra de
   casa em css/site.css: vale para qualquer h1-h4 dentro de uma .secao, o h2 de
   uma .dupla inclusive. Nada a corrigir por aqui.
   -------------------------------------------------------------------------- */

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

   componentes/contato.php e o ULTIMO capitulo da home, encostado no rodape:
   por isso css/sec-contato.css desenha, no proprio ::after, a divisa que o
   sistema de :has() nao alcanca la (o rodape esta fora de <main>).

   Aqui essa secao nao e a ultima: vem "Continue por aqui" logo depois, ainda
   dentro do <main>. O sistema automatico ja desenha a divisa no vizinho
   escuro, e o gradiente do componente passaria a ser uma segunda divisa em
   cima da primeira: o verde escureceria antes de acabar e a juncao ganharia
   dois degraus. O componente continua intacto para a home.
   -------------------------------------------------------------------------- */

.pagina-contato .secao-contato::after {
  content: none;
}