/* ==========================================================================
   Essence Tântric — contacto.css
   A página de contacto como página de conversão (27/09/2026).
   Escrito SÓ com var(--token), como as outras folhas da casa: nenhum valor de
   cor, tamanho, espaço ou raio escrito à mão. Ficheiro próprio porque só esta
   página o pede (`extra-css`), pela mesma razão que a ficha tem o seu.

   O que a medição decidiu aqui, e não o gosto:
     · o botão de conversa tem 64px de altura e 26px de glifo: é o alvo
       principal da página, e o mínimo do contrato (24px) é para ligações de
       texto, não para a ação que a página existe para servir;
     · a capa é escura (a tinta do rodapé): o verde do canal mede 3,57:1 sobre
       ela e 5,29:1 com o texto branco por cima, os dois acima do mínimo;
     · as escolhas são pílulas de 44px: 27 nomes e 9 massagens numa grelha que
       se lê de uma passada, e cada uma é um alvo a sério em telemóvel.
   ========================================================================== */

/* Símbolos (o glifo do WhatsApp, pedido por <use> nas escolhas). */
.ct-simbolos { display: none; }

/* --------------------------------------------------------------------------
   1. CAPA — a conversa primeiro
   -------------------------------------------------------------------------- */
.ct-capa {
  background: var(--cor-fundo-escuro);
  color: var(--cor-texto-escuro);
  padding-top: var(--esp-12);
  padding-bottom: var(--esp-12);
}

.ct-capa__interior { display: flex; flex-direction: column; gap: var(--esp-6); }

.ct-capa__titulo {
  color: var(--cor-texto-escuro);
  font-size: var(--fs-h1);
  margin: 0;
}

.ct-capa__apoio {
  color: var(--cor-texto-escuro);
  max-width: var(--medida-intro);
  margin: 0;
}

/* O que a mensagem vai dizer. Aresta de ouro: é aviso, não decoração. */
.ct-capa__contexto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  margin: 0;
  padding: var(--esp-3) var(--esp-4);
  border-left: var(--foco-largura) solid var(--cor-acento);
  background: color-mix(in srgb, var(--cor-texto-escuro) 8%, transparent);
  color: var(--cor-texto-escuro);
  font-size: var(--fs-legenda);
  max-width: var(--medida-prosa);
}

.ct-capa__contexto a { color: var(--cor-texto-escuro); }

.ct-capa__accoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4) var(--esp-6);
}

.ct-capa__alternativa { color: var(--cor-texto-escuro); }

.ct-capa__dados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-3);
  margin: 0;
  color: var(--cor-texto-escuro-suave);
  font-size: var(--fs-legenda);
}

/* O telefone e o e-mail da capa são ligações de toque e mediam 20,8 px de alvo
   (13 px de letra). O `padding-block` leva-os aos 24 do contrato sem mexer na
   linha. 27/09/2026 — era a única ligação pequena que sobrava na página. */
.ct-capa__dados a { color: var(--cor-texto-escuro); padding-block: 3px; }

@media (min-width: 1024px) {
  .ct-capa { padding-top: var(--esp-20); padding-bottom: var(--esp-20); }
}

/* --------------------------------------------------------------------------
   2. COMO FUNCIONA — três passos, uma linha por passo
   -------------------------------------------------------------------------- */
.ct-passos__lista {
  display: grid;
  gap: var(--esp-6);
  margin: var(--esp-6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.ct-passos__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  max-width: var(--medida-prosa);
}

.ct-passos__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--esp-8);
  height: var(--esp-8);
  border: 1px solid var(--cor-acento);
  border-radius: var(--raio-pilula);
  color: var(--cor-marca);
  font-weight: var(--peso-forte);
  font-size: var(--fs-legenda);
}

@media (min-width: 1024px) {
  .ct-passos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-8); }
  .ct-passos__lista li { flex-direction: column; gap: var(--esp-3); }
}

/* --------------------------------------------------------------------------
   3. ESCOLHAS — com quem e o que, cada uma uma conversa
   -------------------------------------------------------------------------- */
.ct-escolhas { background: var(--cor-superficie); }

.ct-escolhas__titulo { margin-top: var(--esp-8); margin-bottom: var(--esp-4); }

.ct-escolhas__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-escolha {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 44px;
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--cor-borda-controlo);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: var(--fs-corpo);
  text-decoration: none;
  transition: background-color var(--dur-rapida) var(--ease-padrao),
              border-color var(--dur-rapida) var(--ease-padrao);
}

.ct-escolha:hover,
.ct-escolha:focus-visible {
  border-color: var(--cor-conversa);
  background: color-mix(in srgb, var(--cor-conversa) 10%, var(--cor-fundo));
}

.ct-escolha__glifo { flex: none; width: 16px; height: 16px; color: var(--cor-conversa); }

/* Nome da escolha em peso forte: a pessoa lê-se primeiro, o canal depois. */
.ct-escolha__nome { font-weight: var(--peso-medio); }

/* --------------------------------------------------------------------------
   4. FORMULÁRIO — a segunda via, no bloco de creme
   -------------------------------------------------------------------------- */
.ct-pedido { display: grid; gap: var(--esp-8); grid-template-columns: 1fr; }

.ct-pedido__formulario { gap: var(--esp-6); }

@media (min-width: 1024px) {
  .ct-pedido { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--esp-16); }
  /* A prosa acompanha a coluna do formulário em vez de ficar encostada ao topo. */
  .ct-pedido__texto { position: sticky; top: var(--esp-24); align-self: start; }
}

/* --------------------------------------------------------------------------
   5. ONDE ESTAMOS
   -------------------------------------------------------------------------- */
.ct-onde__interior { display: grid; gap: var(--esp-8); grid-template-columns: 1fr; }

.ct-onde h3 { margin-bottom: var(--esp-2); }
.ct-onde h3 + p { margin-bottom: var(--esp-6); }
.ct-onde__fecho {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  align-items: flex-start;
  padding: var(--esp-6);
  background: var(--cor-superficie);
  border-radius: var(--raio-cartao);
  align-self: start;
}

@media (min-width: 768px) {
  .ct-onde__interior { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--esp-12); }
}