/* Escolha do canal no formulário de contacto: duas opções numa pílula, a ativa a lima
   (mesma linguagem do botão PT/EN). Em modo WhatsApp o campo de email desaparece. */
.canal{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.canal-tit{font-family:'Oswald',sans-serif;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;color:var(--accent)}
.canal-opts{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:#15151c;border:1px solid #2c2c36}
.form .canal label{position:relative;display:block;margin:0;cursor:pointer;font:inherit;text-transform:none;letter-spacing:0;color:inherit}
.form .canal input{position:absolute;width:1px;height:1px;padding:0;opacity:0;pointer-events:none}   /* .form input dava-lhes width:100% e saíam do ecrã */
.canal label span{display:block;padding:8px 20px;border-radius:999px;font-family:'Inter',sans-serif;font-size:14px;
  color:#c9c9d1;transition:background .2s,color .2s}
.canal input:checked+span{background:var(--accent);color:#0b0b0f}
.canal input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.form.wa .campo-email{display:none}
.form.wa .row{grid-template-columns:1fr}

/* Secção de contacto como na referência: foto com o "Olá" à esquerda, formulário à direita.
   Tablet: numa coluna, foto 260×364 ao centro; telefone: foto 180×252 (medidas da referência). */
.contacto{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.foto-ola{position:relative;width:340px;margin:0 auto}
.foto-ola img{width:340px;height:476px;object-fit:cover;border-radius:20px;display:block;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.foto-ola .ola{position:absolute;left:-48px;bottom:-40px;width:120px;aspect-ratio:1;border-radius:50%;background:var(--accent);color:#0b0b0f;
  display:grid;place-items:center;font-family:'Inter',sans-serif;font-size:30px}
.contacto .form-col{max-width:560px}
@media (max-width:1199px){
  .contacto{grid-template-columns:1fr;gap:80px}
  .foto-ola,.foto-ola img{width:260px;height:364px}
  .foto-ola .ola{width:82px;left:-42px;bottom:-42px;font-size:21px}
  .contacto .form-col{max-width:none}
}
@media (max-width:809px){
  .contacto{gap:40px}
  .foto-ola,.foto-ola img{width:180px;height:252px}
  .foto-ola .ola{width:51px;left:-26px;bottom:28px;font-size:14px}
}