/* ============================================================================
   Formulário de contato e cartões de canal.

   Duas decisões de acessibilidade que valem mais que a aparência:

   1. **O rótulo é um `<label>` de verdade, sempre visível.** Nada de `placeholder`
      como rótulo: ele some quando a pessoa começa a digitar, e quem estava
      conferindo o que preencheu perde a referência. Num formulário comercial isso
      significa campo trocado.
   2. **O erro tem cor E texto E `role="alert"`.** Só a borda vermelha não chega a
      quem não distingue vermelho de verde nem a quem usa leitor de tela — e é o
      defeito de formulário mais comum que existe.
   ========================================================================== */

.form-contato { display: grid; gap: 1.1rem; margin-top: 1.6rem; max-width: 48rem; }
.form-contato .campo { display: grid; gap: .35rem; }

.form-contato label {
  font: 600 .84rem/1.3 var(--texto); color: var(--fg);
  letter-spacing: .01em;
}
.form-contato input,
.form-contato select,
.form-contato textarea {
  font: 400 .96rem/1.45 var(--texto);
  color: var(--fg); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 10px;
  padding: .62rem .75rem; width: 100%;
  transition: border-color .18s var(--casa), box-shadow .18s var(--casa);
}
.form-contato textarea { resize: vertical; min-height: 5.2rem; }
.form-contato input:focus-visible,
.form-contato select:focus-visible,
.form-contato textarea:focus-visible {
  outline: 2px solid var(--rosa); outline-offset: 1px; border-color: var(--rosa);
}
.form-contato .dica { font: 400 .78rem/1.4 var(--texto); color: var(--fg-faint); }

/* o erro: borda + ícone + texto. Três sinais, porque um só sempre falha para alguém */
.form-contato .campo.com-erro input,
.form-contato .campo.com-erro textarea { border-color: var(--warn-line); }
.form-contato .erro {
  margin: 0; font: 500 .8rem/1.4 var(--texto); color: var(--warn-fg);
  background: var(--warn-bg); border-left: 2px solid var(--warn-line);
  border-radius: 0 6px 6px 0; padding: .35rem .6rem;
}
.form-contato .erro::before { content: "⚠ "; }

.form-nota {
  margin: 0; font: 400 .84rem/1.55 var(--texto); color: var(--fg-soft);
  border-left: 2px solid var(--line); padding-left: .8rem; max-width: 46rem;
}
.form-nota.atencao {
  border-left-color: var(--warn-line); background: var(--warn-bg);
  color: var(--warn-fg); padding: .7rem .85rem; border-radius: 0 8px 8px 0;
}

.form-acoes { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .3rem; }

.form-saida { display: grid; gap: .4rem; margin-top: .6rem; }
/* 🔴 `[hidden]` do navegador é `display: none` — e ele PERDE para qualquer regra de
   `display` escrita numa folha, porque a folha do autor vence a do agente do usuário.
   Sem esta linha a caixa de saída ficava visível e vazia desde o carregamento, com um
   `<textarea>` em branco convidando a pessoa a escrever nele. *Esconder por atributo e
   posicionar por CSS na mesma regra é um par que se anula em silêncio.* */
.form-saida[hidden] { display: none; }
.form-saida textarea {
  font: 400 .86rem/1.5 var(--mono, ui-monospace, monospace);
  background: var(--bg-inset);
}
.form-estado { margin: 0; font: 500 .84rem/1.45 var(--texto); color: var(--rosa-texto); }

/* ---- os cartões de canal ---------------------------------------------------
   ⚠ O cartão de um canal que ainda não existe NÃO é escondido: ele aparece dizendo
   que está pendente. Esconder daria a impressão de que o site simplesmente não tem
   aquele canal, quando o que há é um endereço ainda não publicado — e a diferença
   entre «não temos» e «ainda não publicamos» é exatamente a que o visitante precisa. */
.canais { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 1.4rem; }
.canal {
  display: grid; gap: .3rem; padding: 1rem 1.05rem;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft);
  text-decoration: none; color: inherit;
  transition: border-color .2s var(--casa), transform .2s var(--casa);
}
a.canal:hover { border-color: var(--rosa); transform: translateY(-2px); }
.canal .rot {
  font: 700 .7rem/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .12em; text-transform: uppercase; color: var(--rosa-texto);
}
.canal .val { font: 600 1rem/1.3 var(--texto); color: var(--fg); word-break: break-word; }
.canal .obs { font: 400 .82rem/1.45 var(--texto); color: var(--fg-soft); margin: 0; }
.canal.pendente { border-style: dashed; }
.canal.pendente .rot { color: var(--warn-fg); }
.canal.pendente .val { color: var(--fg-soft); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  a.canal:hover { transform: none; }
}