/* ============================================================================
   CONTATO

   A página antiga era uma lista de contatos em texto corrido: para falar com
   a escola, a pessoa tinha que copiar um número à mão. Aqui cada canal é um
   alvo clicável, e quem prefere escrever tem onde.
   ============================================================================ */

.contato-pg{background:var(--paper);padding-bottom:clamp(80px,10vw,140px)}

.ct-cab{background:var(--forest-sec);color:#fff;padding:clamp(140px,15vw,190px) 0 clamp(52px,6vw,76px)}
.ct-cab h1{font-size:clamp(2.4rem,5.6vw,4.2rem);max-width:14ch}
.ct-cab .kicker{color:var(--terra)}
.ct-cab em{color:var(--terra)}
.ct-cab .lead{color:rgba(255,255,255,.8);margin-top:24px;max-width:46ch}

/* Canais à esquerda, formulário à direita. Quem já sabe o que quer resolve na
   primeira coluna sem rolar; o formulário é para quem prefere escrever. */
.ct-grade{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);
  padding-top:clamp(44px,5.5vw,72px);
  align-items:start;
}

.ct-sub{
  font-family:var(--serif);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(1.35rem,2.4vw,1.8rem);margin-bottom:6px;
}

/* ---------- canais ---------- */
.ct-canais{display:flex;flex-direction:column;gap:10px}
.ct-canal{
  display:flex;align-items:center;gap:16px;
  padding:16px 18px;border-radius:14px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--hair-d);
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease);
}
.ct-canal:first-of-type{margin-top:12px}
.ct-canal:hover{
  transform:translateY(-2px);border-color:var(--hair-2);
  box-shadow:0 14px 30px -20px rgba(16,30,22,.4);
}
/* O WhatsApp principal ganha o destaque: é por onde a escola de fato
   responde mais rápido, e esconder isso num item igual aos outros faria a
   pessoa escolher o canal mais lento. */
.ct-canal.ct-destaque{border-color:var(--leaf);box-shadow:0 0 0 1px var(--leaf)}
.ct-canal.ct-destaque .ct-icone{background:rgba(29,185,84,.12);color:var(--leaf-deep)}

.ct-icone{
  flex:none;width:44px;height:44px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--paper-2);color:var(--ink-2);
}
.ct-icone svg{width:21px;height:21px}
.ct-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.ct-txt b{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-texto)}
.ct-txt span{font-size:1rem;color:var(--ink);overflow-wrap:anywhere}
.ct-txt small{font-size:.8rem;color:var(--ink-3)}

/* ---------- formulário ---------- */
.ct-form-bloco{
  background:#fff;border:1px solid var(--hair-d);border-radius:16px;
  padding:clamp(22px,3vw,34px);
}
.ct-form-lead{color:var(--ink-2);font-size:.92rem;margin-bottom:20px}
#ct-form{display:flex;flex-direction:column;gap:14px}
.ct-campo{display:flex;flex-direction:column;gap:6px}
.ct-campo>span{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.ct-campo>span small{font-weight:400;color:var(--ink-3);margin-left:5px}
.ct-campo input,.ct-campo select,.ct-campo textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:.98rem;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--hair-d);border-radius:10px;
}
.ct-campo textarea{resize:vertical;min-height:96px}
.ct-campo input:focus,.ct-campo select:focus,.ct-campo textarea:focus{
  outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px rgba(29,185,84,.15);
}
#ct-form .btn{width:100%;justify-content:center;margin-top:4px}
#ct-err{font-size:.86rem;color:#C2321B;min-height:1.1em}
.ct-ok{
  font-size:.94rem;color:var(--leaf-deep);font-weight:600;
  background:rgba(29,185,84,.1);border-radius:10px;padding:14px 16px;
}
.ct-priv{font-size:.78rem;color:var(--ink-3);text-align:center}

@media(max-width:860px){
  .ct-grade{grid-template-columns:1fr}
}

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