/* Autentiva — /contato (redesign v4). Portado de contato_mockup.html.
   Auto-contido (alias :root + eyebrow); nav/rodapé = chrome de produção.
   O formulário é o real (ContatoForm): os inputs Django são estilizados por
   .field input/select/textarea. */
:root{
  --bg:var(--n-0); --bg-2:var(--site-bg-2); --ash:var(--site-ash); --stone:var(--site-stone); --slate:var(--site-slate);
  --ink:var(--site-ink); --text-2:var(--site-text-2); --muted:var(--site-muted);
  --accent:var(--autentiva-primaria); --accent-2:var(--site-accent-2); --accent-soft:var(--site-accent-soft);
  --ok:var(--status-valido); --teal:var(--site-teal);
  --card-sh:var(--site-card-sh);
  --r-card:var(--r-med); --maxw:1080px;
}
/* eyebrow com ícone */
.eyerow{display:inline-flex;align-items:center;gap:10px}
.eyerow .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:9px}
.eyerow .eyebrow::before{display:none}
.ey-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none}
.ey-ic svg,.eyebrow svg{width:15px;height:15px}
.c-primaria{background:var(--accent-soft);color:var(--accent)}

/* contato split */
.contact{padding:clamp(100px, 11vw, 116px) 0 80px;position:relative;overflow:hidden}
.contact__tex{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle, var(--stone) 1px, transparent 1.4px);background-size:24px 24px;-webkit-mask-image:radial-gradient(560px 360px at 18% 12%, black, transparent 70%);mask-image:radial-gradient(560px 360px at 18% 12%, black, transparent 70%);opacity:.55}
.contact__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start}
.contact__info h1{font-size:40px;font-weight:600;color:var(--ink);letter-spacing:-.025em;text-wrap:balance;line-height:1.1;margin:14px 0 0}
.contact__info .lede{color:var(--muted);font-size:17px;margin:16px 0 0;max-width:40ch;line-height:1.55}
.points{margin:32px 0 0;display:flex;flex-direction:column;gap:18px}
.point{display:flex;gap:13px;align-items:flex-start}
.point__ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.point__ic svg{width:19px;height:19px}
.point b{color:var(--ink);font-weight:600;font-size:14.5px;display:block}
.point p{margin:2px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}
@media(max-width:820px){.contact__grid{grid-template-columns:minmax(0,1fr);gap:40px}}

/* form card (usa o formulário real) */
.fcard{background:var(--bg);border:1px solid var(--stone);border-radius:16px;padding:28px;box-shadow:var(--card-sh)}
.fcard h2{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.fcard__sub{color:var(--muted);font-size:13.5px;margin:6px 0 22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--stone);border-radius:var(--r-card);padding:11px 13px;transition:border-color .15s, box-shadow .15s}
.field textarea{min-height:118px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* Seta do select em data-URI: um data-URI NÃO pode referenciar var(--token) (é
   estático), então o hex fica embutido — exceção deliberada, como o CSS inline da /v.
   Mantido igual ao --site-muted (#667085) para acompanhar o texto secundário. */
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px}
.field .campo__erro{color:var(--status-invalido);font-size:12.5px;margin:6px 0 0}
.fcard__erro{color:var(--status-invalido);font-size:13px;margin:0 0 14px}
.fcard__note{font-size:12px;color:var(--muted);margin:14px 0 0;display:flex;gap:7px;align-items:center}
.fcard__note svg{width:14px;height:14px;color:var(--ok);flex:none}
/* estado de sucesso (mensagem enviada) */
.fsucesso{text-align:center;padding:8px 0}
.fsucesso__selo{color:var(--ok);display:inline-flex;margin-bottom:8px}
.fsucesso h2{font-size:22px;font-weight:600;color:var(--ink)}
.fsucesso p{color:var(--muted);font-size:14.5px;margin:10px 0 22px;line-height:1.55}