/* ============================================================
   Formulário de contato — comum aos sites da Vector

   Um arquivo só para os dois sites. A estrutura é a mesma; muda a paleta, e ela
   sai toda destes tokens. Para um site novo, basta um bloco de tokens novo — não
   se mexe em nenhuma regra abaixo.

     (padrão)              institucional — seção azul #1545de, texto claro
     .form-contato--vbs    vbs-scd.com.br — fundo #000b1a, borda e título #6eb0ff
   ============================================================ */

.form-contato {
  --fc-rotulo: var(--c-primary-soft, #e7ecfd);
  --fc-texto: var(--c-primary-soft, #e7ecfd);
  --fc-titulo: #fff;
  --fc-campo-texto: #fff;
  --fc-borda: rgba(255, 255, 255, 0.5);
  --fc-borda-foco: #fff;
  --fc-fundo: rgba(255, 255, 255, 0.12);
  --fc-fundo-foco: rgba(255, 255, 255, 0.2);
  --fc-placeholder: rgba(255, 255, 255, 0.55);
  --fc-erro: #ffd7d7;
  --fc-check: #fff;
  --fc-link: #fff;
  /* %23 é o # do hex escapado dentro do data: URI — sem isso o SVG não carrega */
  --fc-seta: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
}

.form-contato--vbs {
  --fc-rotulo: var(--c-accent, #6eb0ff);
  --fc-texto: #d1d5db;
  --fc-titulo: var(--c-accent, #6eb0ff);
  --fc-campo-texto: #fff;
  --fc-borda: var(--c-accent, #6eb0ff);
  --fc-borda-foco: #fff;
  --fc-fundo: rgba(110, 176, 255, 0.08);
  --fc-fundo-foco: rgba(110, 176, 255, 0.16);
  --fc-placeholder: rgba(209, 213, 219, 0.6);
  --fc-erro: #ff9f9f;
  --fc-check: var(--c-accent, #6eb0ff);
  --fc-link: var(--c-accent, #6eb0ff);
  --fc-seta: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236eb0ff'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
}

/* display no CSS vence o atributo hidden do HTML: sem esta regra o bloco de
   sucesso aparece junto com o formulario desde o primeiro carregamento. */
.form-contato[hidden],
.contato-sucesso[hidden] {
  display: none;
}

.form-contato {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* sem isso o input estoura a coluna do grid no Safari */
}

.campo-linha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 480px) {
  .campo-linha {
    grid-template-columns: 1fr 1fr;
  }
}

.campo label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fc-rotulo);
}

.marca-opcional {
  font-weight: 400;
  opacity: 0.7;
}
.campo[data-campo="empresa"]:not(.opcional) .marca-opcional {
  display: none;
}

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font: 400 15px var(--font-body);
  color: var(--fc-campo-texto);
  background: var(--fc-fundo);
  border: 1px solid var(--fc-borda);
  border-radius: 8px;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.campo input::placeholder {
  color: var(--fc-placeholder);
}

.campo input:focus-visible,
.campo select:focus-visible {
  outline: none;
  border-color: var(--fc-borda-foco);
  background: var(--fc-fundo-foco);
}

/* O select nativo herda o fundo do sistema na lista aberta: as opções precisam de
   cor escura própria, senão ficam branco no branco no Windows. */
.campo select option {
  color: #1f2937;
  background: #fff;
}

.campo select {
  background-image: var(--fc-seta);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 34px;
}

.campo-erro {
  font-size: 12px;
  color: var(--fc-erro);
  min-height: 0;
}
.com-erro .campo-erro {
  min-height: 16px;
}
.com-erro input,
.com-erro select {
  border-color: var(--fc-erro);
}

/* Fora da tela, mas não display:none — robô costuma pular o que está escondido
   por display e preencher o resto. */
.campo-armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.campo-aceite {
  gap: 4px;
}
.aceite {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fc-texto);
  cursor: pointer;
}
.aceite input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--fc-check);
}
.aceite a {
  color: var(--fc-link);
  text-decoration: underline;
}

.form-contato .btn {
  align-self: flex-start;
}
.form-contato .btn:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.contato-status {
  font-size: 13px;
  margin: 0;
  color: var(--fc-texto);
}
.contato-status.erro {
  color: var(--fc-erro);
}
.contato-status:empty {
  display: none;
}

.contato-sucesso {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
  color: var(--fc-texto);
}
.contato-sucesso i {
  font-size: 40px;
  color: var(--fc-titulo);
}
.contato-sucesso h4 {
  font: 700 18px var(--font-heading);
  color: var(--fc-titulo);
}
.contato-sucesso p {
  font-size: 15px;
  margin: 0;
}
.contato-sucesso .protocolo {
  font-size: 13px;
  opacity: 0.8;
}

/* O widget do Turnstile só aparece quando ele decide desafiar; sem isso sobra um
   espaço vazio no formulário na maioria dos envios. */
#turnstile-contato:empty {
  display: none;
}

/* ---------------------------------------------------------- institucional --- */

/* O formulário ocupa mais altura que o card do WhatsApp; alinhar pelo topo evita
   que o card ao lado estique junto e fique com um vazio no meio. */
.section-contato .cards-grid.cards-2 {
  align-items: start;
}

.card-form {
  gap: 24px;
}
.card-form .card-content {
  gap: 12px;
}
.card-form .btn {
  height: 42px;
  padding: 8px 20px;
}

/* ------------------------------------------------------------------- vbs --- */

/* Fica acima dos dois cards de canal: quem procura a SCD para fazer negócio vem
   antes de quem já é cliente e quer o SAC. */
.card-form-vbs {
  margin-bottom: 24px;
}
.card-form-vbs .card-bordered-header {
  margin-bottom: 8px;
}

/* O container da VBS tem 1328px. Um campo de texto nessa largura é desconfortável
   de ler e de preencher, então o formulário para antes — o card continua ocupando
   a linha, para não brigar com a grade de dois cards logo abaixo. */
.card-form-vbs > p,
.card-form-vbs .form-contato,
.card-form-vbs .contato-sucesso {
  max-width: 720px;
}