/* ==========================================================================
   ZENTH TRADE — contato
   contato.css · v1.0.0
   Depende de zt-components.css
   ========================================================================== */

.zt-contato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: var(--zt-esp-8);
  align-items: start;
}
/* Sem formulario os canais ocupam a largura toda, em vez de deixar buraco. */
.zt-contato--sem-form { grid-template-columns: 1fr; }
.zt-contato--sem-form .zt-contato__canais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--zt-esp-5);
  align-items: start;
}

.zt-contato__canais { display: grid; gap: var(--zt-esp-4); }

.zt-canal { display: flex; gap: var(--zt-esp-3); align-items: flex-start; }
.zt-canal i { font-size: 1.3rem; color: var(--zt-marca-clara); flex: none; margin-top: 2px; }
.zt-canal strong { display: block; font-size: var(--zt-txt-sm); font-weight: var(--zt-peso-semi); }
.zt-canal span { font-size: var(--zt-txt-sm); color: var(--zt-tinta-suave); }

.zt-secao--escura .zt-canal i,
.zt-secao--gradiente .zt-canal i { color: var(--zt-acento); }
.zt-secao--escura .zt-canal span,
.zt-secao--gradiente .zt-canal span { color: var(--zt-tinta-inversa-suave); }

.zt-contato__canais .zt-btn { justify-self: start; margin-top: var(--zt-esp-2); }

.zt-mapa {
  display: block;
  border-radius: var(--zt-raio-lg);
  overflow: hidden;
  border: var(--zt-regra);
  margin-top: var(--zt-esp-2);
}
.zt-mapa img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

.zt-contato__form > .zt-h3 { margin-bottom: var(--zt-esp-2); }
.zt-contato__form > p { margin-bottom: var(--zt-esp-5); }

/* --------------------------------------------------------------------------
   FORMULARIO DE TERCEIRO
   O widget nao envia e-mail: ele so veste o formulario do plugin escolhido.
   Por isso o alvo aqui e o campo generico, e nao a classe de um plugin
   especifico — trocar de plugin de formulario nao pode exigir CSS novo.
   -------------------------------------------------------------------------- */

.zt-formulario { display: grid; gap: var(--zt-esp-5); }

.zt-formulario :where(input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="search"], input[type="number"], select, textarea) {
  width: 100%;
  font-family: inherit;
  font-size: var(--zt-txt-md);
  color: var(--zt-tinta);
  background: var(--zt-superficie);
  border: 1px solid var(--zt-neutro-200);
  border-radius: var(--zt-raio-md);
  padding: 0.8125rem var(--zt-esp-4);
  transition: border-color var(--zt-transicao), box-shadow var(--zt-transicao);
}
.zt-formulario :where(textarea) { min-height: 140px; resize: vertical; line-height: var(--zt-lh-normal); }

.zt-formulario :where(input, select, textarea):hover { border-color: var(--zt-neutro-300); }
.zt-formulario :where(input, select, textarea):focus {
  outline: none;
  border-color: var(--zt-marca-clara);
  box-shadow: 0 0 0 3px var(--zt-roxo-50);
}

.zt-formulario :where(label) {
  display: block;
  font-size: var(--zt-txt-sm);
  font-weight: var(--zt-peso-medio);
  color: var(--zt-tinta);
  margin-bottom: var(--zt-esp-2);
}

.zt-formulario :where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  accent-color: var(--zt-marca);
  margin-right: var(--zt-esp-2);
}

/* O botao de envio recebe o visual do botao de acao sem precisar de classe. */
.zt-formulario :where(input[type="submit"], button[type="submit"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zt-esp-2);
  font-family: inherit;
  font-size: var(--zt-txt-sm);
  font-weight: var(--zt-peso-semi);
  line-height: 1;
  padding: 0.875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--zt-raio-full);
  background: var(--zt-acento);
  color: var(--zt-roxo-900);
  cursor: pointer;
  width: auto;
  transition: background var(--zt-transicao);
}
.zt-formulario :where(input[type="submit"], button[type="submit"]):hover { background: var(--zt-laranja-300); }

@media (max-width: 900px) {
  .zt-contato { grid-template-columns: 1fr; gap: var(--zt-esp-7); }
}

/* ==========================================================================
   FORMULARIO NATIVO
   Entrou na 1.13.0. Os campos usam .zt-campo, .zt-entrada e .zt-area, que
   ja vivem no design system: aqui ficam so o aviso de resultado, a isca e
   o rodape do botao.
   ========================================================================== */

.zt-isca {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.zt-form-aviso {
  display: flex;
  gap: var(--zt-esp-3);
  align-items: flex-start;
  padding: var(--zt-esp-4);
  border-radius: var(--zt-raio-md);
  border: 1px solid transparent;
  font-size: var(--zt-txt-sm);
  line-height: var(--zt-lh-normal);
}
.zt-form-aviso i { font-size: 1.25rem; flex: none; margin-top: 1px; }
.zt-form-aviso strong { display: block; color: var(--zt-tinta); }
.zt-form-aviso span { color: var(--zt-tinta-suave); }

.zt-form-aviso--ok {
  background: #edf7ef;
  border-color: #bfe0c8;
}
.zt-form-aviso--ok i { color: #2f7d43; }

.zt-form-aviso--erro {
  background: #fdf0f0;
  border-color: #eec4c4;
}
.zt-form-aviso--erro i { color: #a32d2d; }

.zt-formulario__acao {
  display: grid;
  gap: var(--zt-esp-3);
  justify-items: start;
}

.zt-form-selo {
  font-size: var(--zt-txt-xs);
  color: var(--zt-tinta-tenue);
  line-height: var(--zt-lh-normal);
  margin: 0;
}
.zt-form-selo a { color: inherit; text-decoration: underline; }