/* ==========================================================================
   STHEFANY — contato
   contato.css · v0.2.0
   --------------------------------------------------------------------------
   Formulário num bloco escuro à esquerda, dados de contato à direita, como no
   kit de referência.

   O bloco escuro aqui tem função, não é enfeite: ele separa "preencher" de
   "ler", e o formulário é a única coisa da página que exige ação.
   ========================================================================== */

.sp-contato { padding-block: var(--sp-secao-meia); }

.sp-contato__interno {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-e-7);
  align-items: start;
}

/* --- bloco do formulário ------------------------------------------------------ */

.sp-forma {
  padding: var(--sp-e-8);
  border-radius: var(--sp-raio-bloco);
}

.sp-forma__titulo { font-size: var(--sp-t-h2); }

.sp-forma__texto {
  max-width: 52ch;
  margin-block-start: var(--sp-e-4);
  color: var(--sp-tinta-2);
}

.sp-forma__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-e-5);
  margin-block-start: var(--sp-e-7);
}

.sp-forma__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-e-5);
  margin-block-start: var(--sp-e-6);
}

.sp-forma__aviso {
  max-width: 40ch;
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
}

/* --- coluna de dados ----------------------------------------------------------- */

.sp-dados { display: grid; gap: var(--sp-e-6); }

.sp-dado {
  display: grid;
  gap: var(--sp-e-1);
  padding-inline-start: var(--sp-e-5);
  border-inline-start: 2px solid var(--sp-acento);
}

.sp-dado__rotulo {
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sp-dado__valor {
  font-family: var(--sp-fonte-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}

.sp-dado__apoio { color: var(--sp-tinta-2); font-size: var(--sp-t-peq); }

.sp-dados__redes { display: flex; flex-wrap: wrap; gap: var(--sp-e-4); }

.sp-dados__rede {
  color: var(--sp-acento-texto);
  font-size: 1.5rem;
  line-height: 0;
  transition: color var(--sp-transicao);
}
.sp-dados__rede:hover { color: var(--sp-acento-esc); }

.sp-dados__foto { border-radius: var(--sp-raio-bloco); aspect-ratio: 4 / 3; }

@media (max-width: 64rem) {
  .sp-contato__interno { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  .sp-forma { padding: var(--sp-e-6); }
  .sp-forma__campos { grid-template-columns: minmax(0, 1fr); gap: var(--sp-e-4); }
  .sp-forma__rodape .sp-botao { flex: 1 1 auto; justify-content: center; }
}

/* --- retorno do envio --------------------------------------------------------
   Existe vazio desde o carregamento e só ganha texto no envio: região criada
   na hora não é anunciada de forma confiável pelos leitores de tela. Sem
   texto, não ocupa espaço nem desloca o botão. */

/* `.sp-forma__retorno` mudou para `componentes.css` na 0.57.0: o
   credenciamento de imprensa usa a mesma região de retorno. */