/* Contato: apresentação + canais à esquerda, formulário (ou "mensagem enviada") à direita. */
/* ponytail: 1248 = 1200 de conteúdo + respiro, como no desenho (o --largura comum dá 1152 de conteúdo). */
.pg-contato .contato { max-width: 1248px; margin: 0 auto; padding: 88px var(--respiro) 112px; display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.pg-contato .intro-col { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pg-contato .titulo { font-size: clamp(44px, 5.4vw, 72px); line-height: 1; font-weight: 700; letter-spacing: -.045em; }
.pg-contato .lead { font-size: 19px; line-height: 1.6; color: var(--grafite-suave); }
.pg-contato .canais { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.pg-contato .canal { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--grafite); background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.pg-contato .canal-txt { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.pg-contato .canal-txt > span { color: var(--grafite-suave); font-size: 15px; }

.pg-contato .painel { flex: 1 1 520px; min-width: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: 24px; padding: clamp(24px, 4vw, 44px); }

/* Formulário */
.pg-contato .form { display: flex; flex-direction: column; gap: 20px; }
.pg-contato .form-titulo { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.5; }
/* No desenho os campos ficam um por linha (o tamanho natural das entradas não cabe em dois). */
.pg-contato .linha { display: flex; flex-direction: column; gap: 20px; }
.pg-contato .rot { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
.pg-contato .ent { font-size: 16px; font-weight: 400; padding: 14px 16px; border-radius: var(--raio-md); border: 1px solid var(--linha-campo); background: var(--superficie); color: var(--grafite); width: 100%; }
.pg-contato textarea.ent { resize: vertical; }
.pg-contato .ent:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.pg-contato .ent[aria-invalid="true"] { border-color: var(--vermelho); }
.pg-contato .erro { font-weight: 500; color: var(--vermelho); }
.pg-contato .erro-geral { font-size: 14px; }

.pg-contato .tipos { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pg-contato .tipos legend { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.pg-contato .tipos-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-contato .tipo { font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: var(--raio-pilula); cursor: pointer; border: 1px solid var(--linha-campo); background: var(--superficie); color: var(--grafite); }
.pg-contato .tipo[aria-pressed="true"] { border-color: var(--azul); background: var(--azul); color: #fff; }

.pg-contato .rodape-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.pg-contato .aviso { font-size: 13px; color: var(--grafite-suave); flex: 1 1 240px; }
.pg-contato .enviar { font-size: 16px; font-weight: 600; padding: 16px 28px; border-radius: var(--raio-md); border: 0; background: var(--azul); color: #fff; cursor: pointer; box-shadow: var(--sombra-bloco); transition: transform .2s, box-shadow .2s, background-color .2s; }
.pg-contato .enviar:hover { background: var(--azul-texto); }
.pg-contato .enviar:active { transform: translateY(2px); box-shadow: none; }
.pg-contato .enviar:disabled { opacity: .7; cursor: progress; transform: none; }

/* Mensagem enviada */
.pg-contato .enviado { display: flex; flex-direction: column; gap: 20px; padding: 24px 0; }
.pg-contato .blocos { display: flex; flex-direction: column; gap: 8px; }
.pg-contato .blocos span { height: 30px; width: 88px; background: var(--azul); border-radius: 0 999px 999px 0; transform-origin: left; animation: ct-cresce 1.1s var(--anima) .2s both; }
.pg-contato .blocos .b2 { height: 36px; width: 118px; background: var(--grafite); }
.pg-contato .enviado-titulo { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.03em; outline: none; }
.pg-contato .enviado-txt { font-size: 18px; color: var(--grafite-suave); overflow-wrap: anywhere; }
.pg-contato .novo { align-self: flex-start; font-size: 16px; font-weight: 600; padding: 14px 22px; border-radius: var(--raio-md); border: 1px solid var(--linha); background: var(--superficie); color: var(--grafite); cursor: pointer; }

/* Entrada do topo, como no desenho */
@keyframes ct-sobe { from { opacity: 0; transform: translateY(28px); } }
@keyframes ct-cresce { from { transform: scaleX(0); } }
.pg-contato .intro-col > *, .pg-contato .painel > * { animation: ct-sobe .8s var(--anima) both; }
.pg-contato .intro-col > :nth-child(2) { animation-delay: .09s; }
.pg-contato .intro-col > :nth-child(3) { animation-delay: .18s; }
.pg-contato .intro-col > :nth-child(4) { animation-delay: .27s; }

@media (max-width: 720px) {
  .pg-contato .contato { padding-top: 48px; padding-bottom: 72px; gap: 40px; }
  .pg-contato .intro-col, .pg-contato .painel { flex-basis: 100%; }
  .pg-contato .titulo { font-size: 44px; }
  .pg-contato .lead { font-size: 18px; }
  .pg-contato .painel { border-radius: 20px; padding: 24px 20px; }
  .pg-contato .tipo, .pg-contato .novo { min-height: 44px; }
  .pg-contato .enviar { width: 100%; }
}