/* Contato — canais com presença, conversa com percurso claro. */

/* ---------- Abertura ---------- */
.contato-hero .pg-heroi__texto { max-width: 860px; }
.contato-hero .pg-heroi__arte img { object-position: 75% 50%; }
.contato-canais h2 { margin: 20px 0 56px; max-width: 950px; }

/* ---------- Canais ---------- */
.contato-canais__grade { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.contato-canal {
  position: relative; isolation: isolate; overflow: hidden; min-height: 390px;
  display: flex; flex-direction: column; align-items: start; justify-content: end; gap: 12px;
  border: 1px solid rgba(11,10,9,.08); border-radius: var(--r-xl); padding: clamp(25px,4vw,55px);
  text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.contato-canal > * { position: relative; z-index: 1; }
.contato-canal::before {
  content: ""; position: absolute; z-index: 0; width: clamp(115px,14vw,205px); aspect-ratio: 1;
  top: 21%; right: 8%; background: var(--canal-sinal) no-repeat center / contain;
  opacity: .13; transform: rotate(-12deg); pointer-events: none; transition: transform .65s var(--ease), opacity .5s;
}
.contato-canal--wa {
  --canal-sinal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M21 21h78v59H55L21 104V21Z' fill='none' stroke='%230b0a09' stroke-width='3'/%3E%3Cpath d='M39 45h42M39 57h30' fill='none' stroke='%230b0a09' stroke-width='3'/%3E%3C/svg%3E");
  background: radial-gradient(ellipse at 100% 0,rgba(255,181,71,.8),transparent 58%),var(--brasa); color: var(--tinta);
}
.contato-canal--mail {
  --canal-sinal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect x='15' y='30' width='90' height='65' rx='4' fill='none' stroke='%23f4efe6' stroke-width='3'/%3E%3Cpath d='m16 33 44 35 44-35M16 93l28-28m60 28L77 65' fill='none' stroke='%23f4efe6' stroke-width='3'/%3E%3C/svg%3E");
  background: radial-gradient(ellipse at 100% 0,rgba(255,90,31,.17),transparent 65%),var(--tinta); color: var(--osso); border-color: var(--linha-2);
}
.contato-canal .mono { font-size: .7rem; letter-spacing: .14em; margin-bottom: auto; padding-bottom: 60px; }
.contato-canal strong { max-width: 12ch; font-size: clamp(2.2rem,4vw,4.7rem); line-height: .95; letter-spacing: -.05em; font-stretch: 118%; }
.contato-canal > span:nth-last-child(2) { font-size: clamp(1rem,2vw,1.35rem); overflow-wrap: anywhere; }
.contato-canal .contato-canal__seta {
  position: absolute; right: 28px; top: 25px; width: 48px; height: 48px;
  display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%;
  font-size: 1.9rem; line-height: 1; transition: transform .4s var(--ease);
}
.contato-canal:hover, .contato-canal:focus-visible { transform: translateY(-5px); box-shadow: 0 24px 55px -20px rgba(11,10,9,.25); }
.contato-canal:hover::before, .contato-canal:focus-visible::before { transform: rotate(0deg) scale(1.08); opacity: .22; }
.contato-canal:hover .contato-canal__seta { transform: rotate(45deg); }

/* ---------- Preparar a conversa ---------- */
.contato-oficina__grade { display: grid; grid-template-columns: .9fr 1.1fr; align-items: start; gap: clamp(36px,8vw,135px); }
.contato-oficina__intro { position: sticky; top: 130px; }
.contato-oficina h2 { margin: 24px 0 28px; }
.contato-oficina .lead strong { color: var(--osso); }
.contato-oficina__nota { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--linha-2); max-width: 400px; }
.contato-oficina__nota span { color: var(--brasa); font-size: .7rem; letter-spacing: .13em; }
.contato-oficina__nota p { margin-top: 12px; color: var(--cinza); }
.contato-formulario {
  padding: clamp(25px,4vw,55px); border-color: rgba(255,90,31,.24);
  background: radial-gradient(ellipse at 100% 0,rgba(255,90,31,.13),transparent 50%),var(--carvao-2);
  box-shadow: 0 30px 80px -45px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,181,71,.1);
}
.contato-formulario form { display: grid; gap: 24px; counter-reset: campo; }
.ct-form__campos, .ct-form__js { display: none; }
.js .ct-form__campos { display: grid; gap: 24px; }
.js .ct-form__js { display: block; }
.contato-campo { display: grid; gap: 10px; counter-increment: campo; }
.contato-campo label { display: flex; gap: 12px; align-items: baseline; font-weight: 680; font-size: .95rem; }
.contato-campo label::before { content: counter(campo,decimal-leading-zero); color: var(--brasa); font: .65rem var(--f-mono); letter-spacing: .08em; }
.contato-campo input, .contato-campo select, .contato-campo textarea {
  width: 100%; border: 1px solid var(--linha-2); border-radius: 12px;
  background: rgba(244,239,230,.045); color: var(--osso); padding: 15px 17px; min-height: 56px; outline: none;
  transition: border-color .2s,box-shadow .2s,background .2s;
}
.contato-campo select { color-scheme: dark; }
.contato-campo textarea { resize: vertical; min-height: 145px; }
.contato-campo :is(input,select,textarea):hover { border-color: rgba(244,239,230,.32); }
.contato-campo :is(input,select,textarea):focus { border-color: var(--brasa); background: rgba(255,90,31,.04); box-shadow: 0 0 0 3px rgba(255,90,31,.15); }
.contato-campo ::placeholder { color: var(--cinza); }
.contato-formulario .btn { width: 100%; white-space: normal; text-align: center; }
.contato-formulario__aviso { font-size: .8rem; color: var(--cinza); line-height: 1.5; }
.contato-formulario__status { color: var(--ouro); font-size: .86rem; }
.contato-formulario__status:empty { display: none; }
.contato-previa {
  display: none; margin-top: 30px; padding: 22px 24px; border-radius: 4px 20px 20px 20px;
  background: rgba(255,90,31,.055); border: 1px solid rgba(255,90,31,.2);
}
.js .contato-previa { display: block; }
.contato-previa > span { font-size: .68rem; letter-spacing: .14em; color: var(--brasa); }
.contato-previa p { margin-top: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .94rem; color: var(--osso-2); }

/* ---------- Próximo passo ---------- */
.contato-depois h2 { margin: 20px 0 50px; }
.contato-depois__grade { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(11,10,9,.16); }
.contato-depois article { padding: 32px 28px 20px 0; }
.contato-depois article:not(:first-child) { padding-left: 28px; border-left: 1px solid rgba(11,10,9,.16); }
.contato-depois article span { font-size: .68rem; letter-spacing: .1em; color: var(--brasa-escura); }
.contato-depois h3 { margin: 70px 0 12px; font-size: clamp(1.8rem,2.4vw,2.9rem); letter-spacing: -.04em; line-height: 1; }
.contato-depois article p { color: var(--cinza-2); max-width: 36ch; }

@media (max-width: 900px) {
  .contato-oficina__grade { grid-template-columns: 1fr; }
  .contato-oficina__intro { position: static; }
  .contato-oficina__nota { margin-top: 28px; }
  .contato-canais__grade { grid-template-columns: 1fr 1fr; }
  .contato-canal { min-height: 310px; }
  .contato-depois__grade { grid-template-columns: 1fr; }
  .contato-depois article, .contato-depois article:not(:first-child) { padding: 25px 0; border-left: 0; border-bottom: 1px solid rgba(11,10,9,.16); }
  .contato-depois h3 { margin: 28px 0 12px; }
}
@media (max-width: 650px) {
  .contato-canais__grade { grid-template-columns: 1fr; }
  .contato-canal { min-height: 260px; }
  .contato-canal::before { width: 115px; top: 26%; right: 6%; }
  .contato-canal strong { font-size: 2.6rem; }
  .contato-canal--mail strong { font-size: 2.25rem; }
  .contato-canal .mono { max-width: calc(100% - 40px); font-size: .64rem; }
  .contato-canal .contato-canal__seta { width: 42px; height: 42px; right: 20px; top: 20px; }
  .contato-formulario { padding: 24px 20px; }
  .contato-campo label { gap: 9px; }
  .contato-previa { padding: 20px; }
}