/* /contato — entrada institucional e comercial. Conceito: mesa de recepção.
   Hero curto → formulário na própria página em dois tempos: 1 · Assunto (lista de intenções, à esquerda)
   e 2 · Sua mensagem (campos, à direita). Pós-envio substitui o formulário. Sem motion decorativo. */

/* ---------- Hero ---------- */
.co-hero{padding-block:clamp(48px,6vw,104px) clamp(48px,5vw,80px)}
.co-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px clamp(40px,6vw,96px);align-items:end}
.co-hero-t .eyebrow{display:block;margin-bottom:24px}
.co-hero-side{display:flex;flex-direction:column;gap:24px}
.co-hero-side .lead{max-width:42ch}
.co-channels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.95rem}
.co-channels li{display:flex;gap:12px;align-items:baseline}
.co-channels .k{min-width:84px;font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.co-channels a{color:var(--ink);text-underline-offset:3px}
@media (max-width:900px){.co-hero-grid{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ---------- Formulário ---------- */
.co-sec{padding-block:clamp(56px,5vw,96px) clamp(80px,6vw,128px)}
.co-form{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px clamp(40px,6vw,96px);align-items:start}
.co-subjects{margin:0;padding:0;border:0;min-width:0}
.co-legend{display:flex;align-items:center;gap:12px;padding:0;margin-bottom:20px;font-size:1.15rem;letter-spacing:-.012em;font-weight:400}
.co-step{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--f-ui);font-size:12px;font-weight:600;flex:none}
.co-options{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.co-opt{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px 4px 16px 0;border-bottom:1px solid var(--line-2);cursor:pointer}
.co-opt input{appearance:none;flex:none;width:20px;height:20px;margin:3px 0 0;border-radius:50%;border:1.5px solid var(--neutral);background:var(--white);cursor:pointer;display:grid;place-items:center;transition:border-color .2s}
.co-opt input::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .2s var(--ease)}
.co-opt input:checked{border-color:var(--blue)}
.co-opt input:checked::after{transform:scale(1)}
.co-opt input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.co-opt-b{display:flex;flex-direction:column;gap:2px}
.co-opt-t{font-size:1.02rem;letter-spacing:-.01em;line-height:1.4}
.co-opt-d{font-size:.88rem;color:var(--ink-2);line-height:1.45}
.co-opt:hover .co-opt-t{color:var(--blue-text)}
.co-opt:has(input:checked) .co-opt-t{color:var(--ink);font-weight:500}
.co-subjects .err{display:block;margin-top:8px;font-size:12px;color:var(--alert-text)}
.co-main{min-width:0;display:flex;flex-direction:column;gap:20px}
.co-main .co-legend{margin-bottom:0}
.co-fields .field input[aria-invalid="true"],.co-fields .field textarea[aria-invalid="true"]{border-color:var(--alert)}
.co-fields textarea{min-height:132px}
.co-legal{max-width:60ch}
@media (max-width:900px){.co-form{grid-template-columns:minmax(0,1fr)}}

/* ---------- Pós-envio ---------- */
.co-done{display:flex;flex-direction:column;gap:20px;align-items:flex-start;max-width:640px;padding-block:24px}
.co-done-t{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.032em}
.co-done-t:focus{outline:none}
.co-note{font-family:var(--f-ui);font-size:12px;color:var(--ink-3)}

/* ================= MOBILE (≤720) — desktop/tablet intocados =================
   Telefone = formulário: hero curto, assunto em lista de toque confortável, campos em uma coluna, rótulos e aviso de
   privacidade legíveis, erro junto ao campo, envio em largura total (≤430, via .m-stack). */
@media (max-width:720px){
  .co-hero{padding-block:40px 36px}
  .co-hero-t .eyebrow{margin-bottom:16px}
  .co-hero-grid{row-gap:18px}
  .co-sec{padding-block:44px 72px}
  .co-form{row-gap:40px}
  .co-legend{margin-bottom:14px}
  .co-opt{padding:14px 4px 14px 0;min-height:44px}
  .co-opt-d{font-size:.9rem}
  .co-fields{grid-template-columns:minmax(0,1fr)}
  .co-fields .field label{font-size:13.5px}
  .co-fields .field .err,.co-subjects .err{font-size:13px}
  .co-legal{font-size:13.5px;line-height:1.55}
  .co-legal a{display:inline-block;padding-block:4px}
  .co-main .btn-row .btn{min-height:50px}
  .co-done{padding-block:8px}
}