/* ===========================================================
   FORMULÁRIOS (contato e agendamento)
   =========================================================== */

.form-bloco {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 980px) { .form-bloco { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

.formulario {
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.5rem);
  border-radius: var(--r-2xl);
  background: #fff; border: 1px solid var(--c-line); box-shadow: var(--sh-md);
}
.campo { display: flex; flex-direction: column; gap: var(--sp-2); }
/* o atributo hidden precisa vencer o display:flex acima — é o campo-armadilha anti-robô */
.campo[hidden] { display: none !important; }
.campo label { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--c-ink-700); }
.campo label .opcional { font-family: var(--font-text); font-weight: 400; color: var(--c-ink-500); font-size: .875rem; }

.campo input,
.campo select,
.campo textarea {
  font-family: var(--font-text); font-size: 1.0625rem; color: var(--c-ink-900);
  padding: .9rem 1.1rem; border-radius: var(--r-md);
  border: 1.5px solid var(--c-line); background: var(--c-bg-soft);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  width: 100%;
}
.campo textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.campo select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%235F6B64' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; padding-inline-end: 2.6rem; }

.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--c-ink-300); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: none; background: #fff;
  border-color: var(--brand-ink); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .18);
}
.campo--erro input, .campo--erro select { border-color: #C0392B; background: #FDF3F2; }
.campo__erro { font-size: .9375rem; color: #C0392B; }

.campo-duplo { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 620px) { .campo-duplo { grid-template-columns: 1fr 1fr; } }

/* grupo de opções (rádio) */
.opcoes { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcao span {
  display: block; padding: .7rem 1.2rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line); background: var(--c-bg-soft);
  font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--c-ink-700);
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.opcao input:hover + span { border-color: var(--c-ink-300); }
.opcao input:checked + span {
  background: var(--brand-tint); border-color: var(--brand); color: var(--brand-ink);
}
.opcao input:focus-visible + span { box-shadow: var(--focus-ring); }

.formulario__aviso { font-size: .9375rem; color: var(--c-ink-500); }
.formulario .btn { width: 100%; }

/* mensagens de retorno */
.retorno {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); margin-block-end: var(--sp-6);
}
.retorno svg { flex: none; margin-block-start: 2px; }
.retorno--ok    { background: var(--c-grupo-100); color: var(--c-grupo-700); border: 1px solid var(--c-grupo-300); }
.retorno--erro  { background: #FDF3F2; color: #96291C; border: 1px solid #F0C7C2; }
.retorno strong { display: block; font-family: var(--font-display); margin-block-end: 2px; }

/* ---------- canais de atendimento ---------- */
.canais { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .canais { grid-template-columns: repeat(3, 1fr); } }

.canal {
  display: flex; flex-direction: column; gap: var(--sp-3); height: 100%;
  padding: var(--sp-6); border-radius: var(--r-xl);
  background: #fff; border: 1px solid var(--c-line);
  transition: transform var(--dur) var(--ease-out-soft), box-shadow 480ms var(--ease-out-soft),
              border-color var(--dur) var(--ease);
}
.canal:hover, .canal:focus-visible {
  transform: translateY(-4px); border-color: rgb(var(--brand-rgb) / .5);
  box-shadow: 0 2px 4px rgb(20 24 21 / .04), 0 18px 40px rgb(var(--brand-rgb) / .16);
}
.canal__icone {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: rgb(var(--brand-rgb) / .14); color: var(--brand-ink);
}
.canal h3 { font-size: 1.125rem; }
.canal p { color: var(--c-ink-700); font-size: 1rem; }
.canal__link { margin-block-start: auto; padding-block-start: var(--sp-3);
  font-family: var(--font-display); font-weight: 500; color: var(--brand-ink);
  display: inline-flex; align-items: center; gap: var(--sp-2); }

/* ---------- passos do agendamento ---------- */
.passos { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; margin-block-start: var(--sp-12); }
@media (min-width: 860px) { .passos { grid-template-columns: repeat(3, 1fr); } }
.passo {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6); border-radius: var(--r-xl);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid rgb(var(--brand-rgb) / .22); height: 100%;
}
.passo__num {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem;
}
.passo h3 { font-size: 1.125rem; }
.passo p { color: var(--c-ink-700); font-size: 1rem; }

/* ---------- cards de contato por unidade ---------- */
.contato-unidades { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; margin-block-start: var(--sp-12); }
@media (min-width: 700px)  { .contato-unidades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .contato-unidades { grid-template-columns: repeat(3, 1fr); } }

.contato-unidade {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6); border-radius: var(--r-xl);
  background: #fff; border: 1px solid var(--c-line);
  border-block-start: 3px solid rgb(var(--u-rgb));
}
.contato-unidade img { height: 40px; width: auto; max-width: 100%; object-fit: contain; align-self: flex-start; }
.contato-unidade__dados { display: flex; flex-direction: column; gap: var(--sp-3); font-size: 1rem; color: var(--c-ink-700); }
.contato-unidade__dados a, .contato-unidade__dados span { display: inline-flex; align-items: flex-start; gap: var(--sp-3); }
.contato-unidade__dados svg { flex: none; margin-block-start: 3px; color: rgb(var(--u-rgb)); }
.contato-unidade__acoes { margin-block-start: auto; padding-block-start: var(--sp-2); }

/* ---------- página de agradecimento ---------- */
.obrigado .u-hero__texto { text-align: center; align-items: center; }
.obrigado__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; margin-inline: auto;
  background: var(--c-grupo-100); color: var(--c-grupo-700);
}
.obrigado__contagem { font-size: .9375rem; margin-block-start: var(--sp-2); }