/* ============================================================
   UPay — página Contato + FAQ (artboard 06)
   ============================================================ */

/* ---------- hero ---------- */
.contact-hero { --hero-shift: clamp(3rem, 6.6vw, 7.9rem); }
.contact-hero .hero__lead { max-width: 30em; }
.contact-hero .hero__actions { margin-top: 2.2em; }

/* ---------- canais de atendimento ---------- */
.channels { padding-block: clamp(3.4rem, 6.56vw, 7.9rem) clamp(2rem, 2.86vw, 3.44rem); }
.channels__grid {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}
.channels__wrap { min-width: 0; }
.channels .block-title { font-weight: 500; }
.channel-list {
  margin-top: .4rem;
  display: grid;
  /* colunas definidas no nível da LISTA → todas as linhas compartilham as
     mesmas faixas (subgrid) e ficam alinhadas; minmax(0,…) impede overlap */
  grid-template-columns: 3.4rem auto minmax(0, max-content) minmax(0, 1fr);
  column-gap: clamp(.8rem, 1.4vw, 1.6rem);
}
.channel-list li {
  position: relative;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  padding-block: clamp(.8rem, .975vw, 1.17rem);
  font-size: var(--fs-body-lg);
  font-weight: 300;
}
.channel-list li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 3.4rem;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #d9d9d9;
}
.channel-list__icon { width: clamp(26px, 1.77vw, 34px); }
.channel-list__contact { overflow-wrap: anywhere; }
.channel-list__contact:hover { color: var(--blue); }

/* ---------- formulário ---------- */
.contact { padding-block: clamp(1.8rem, 2.4vw, 2.9rem) clamp(3.5rem, 5.05vw, 6.06rem); }
.contact__col { display: block; }
.contact__form-col { width: 100%; }
.contact .block-title { font-weight: 500; }
.contact__intro {
  font-size: var(--fs-body);
  font-weight: 300;
  margin-top: .25em;
  color: var(--ink-soft);
}
.contact form { margin-top: clamp(1.6rem, 2vw, 2.4rem); }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.4rem, 2.6vw, 3.1rem);
  row-gap: clamp(1.2rem, 1.6vw, 1.9rem);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.form-field > label {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
}
.form-field--full { margin-top: clamp(1.2rem, 1.6vw, 1.9rem); }
/* dentro da grade, ocupa as 2 colunas (o row-gap já dá o respiro) */
.form-grid .form-field--full { grid-column: 1 / -1; margin-top: 0; }
.form-opt { font-weight: 300; color: #8a8a8a; }
.contact input[type="text"],
.contact input[type="email"],
.contact input[type="tel"],
.contact select,
.contact textarea {
  width: 100%;
  border: 1px solid #c9c9c9;
  border-radius: .35rem;
  background: #fff;
  padding: .72em .95em;
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(.9rem, .95vw, 1.0625rem);
  line-height: 1.3;
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.contact input::placeholder,
.contact textarea::placeholder { color: #9b9b9b; opacity: 1; }
.contact input:focus-visible,
.contact select:focus-visible,
.contact textarea:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30, 145, 254, .15);
}
.field--select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23b3b3b3' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: .95em auto;
  padding-right: 2.6em;
}
/* mantém o placeholder do select em cinza até o usuário escolher um assunto */
.contact select.field--select:invalid { color: #9b9b9b; }
.contact select.field--select option { color: var(--ink); }
.contact textarea {
  height: clamp(9rem, 11vw, 13rem);
  resize: vertical;
}
.form-feedback {
  font-size: var(--fs-small);
  font-weight: 400;
  margin-top: 1rem;
}
.form-feedback:empty { display: none; }
.form-feedback.is-ok { color: var(--success); }
.form-feedback.is-error { color: #d24a43; }
.form-submit {
  width: 100%;
  margin-top: clamp(1.2rem, 1.4vw, 1.7rem);
  font-size: clamp(.9rem, .937vw, 1.125rem);
  padding-block: .28em;
}

/* coluna "Onde estamos" */
.contact__where { text-align: center; justify-self: center; align-self: center; }
.contact__where-icon { width: clamp(28px, 1.95vw, 37px); margin: 0 auto; }
.contact__where .block-title { margin-top: 1.1rem; }
.contact__where p {
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: 1.45;
  margin-top: .7rem;
}

/* ---------- FAQ ---------- */
.faq-band { padding-block: clamp(1.7rem, 2.05vw, 2.46rem) clamp(1.5rem, 1.9vw, 2.3rem); }
#faq { padding-top: clamp(3.5rem, 4.55vw, 5.45rem); }
.faq-band .section-title {
  font-weight: 500;
  margin-bottom: clamp(3.4rem, 4.8vw, 5.75rem);
}
.faq-wl-title {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.2;
  margin-top: clamp(.9rem, 1.25vw, 1.5rem);
  margin-bottom: clamp(1.4rem, 1.82vw, 2.19rem);
}
.faq-band .faq-cat {
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: .65em;
}
.faq-band .faq-item {
  border-bottom: 0;
  padding-block: 0;
}
.faq-item + .faq-item { margin-top: clamp(.85rem, 1vw, 1.2rem); }
.faq-band .faq-item summary {
  justify-content: flex-start;
  line-height: 1.3;
}
.faq-band .faq-item summary::after { content: none; }
.faq-band .faq-item p {
  line-height: 1.35;
  padding-top: .25rem;
  max-width: none;
  color: var(--ink-soft);
}
.faq-band .faq-item p + p { padding-top: .9rem; }
.faq-band.section--dark .faq-item p { color: #e8e8e8; }
.faq-item strong { font-weight: 500; }

/* ajustes por faixa (espaçamentos do artboard variam por grupo) */
#faq { padding-bottom: clamp(2.9rem, 3.44vw, 4.13rem); }
.faq-credito { padding-bottom: clamp(1rem, 1.15vw, 1.38rem); }
.faq-maquina { padding-bottom: clamp(1.9rem, 2.29vw, 2.75rem); }
.faq-seguranca {
  padding-top: clamp(2.75rem, 3.28vw, 3.94rem);
  padding-bottom: clamp(2.85rem, 3.39vw, 4.06rem);
}
.faq-produto { padding-bottom: clamp(1.9rem, 2.29vw, 2.75rem); }
.faq-produto .faq-item + .faq-item { margin-top: clamp(1.15rem, 1.35vw, 1.63rem); }
.faq-marca { padding-bottom: clamp(1.95rem, 2.34vw, 2.81rem); }
.faq-marca .faq-item + .faq-item { margin-top: clamp(1.65rem, 1.93vw, 2.31rem); }
.faq-implantacao {
  padding-top: clamp(3rem, 3.54vw, 4.25rem);
  padding-bottom: clamp(1rem, 1.19vw, 1.43rem);
}
.faq-implantacao .faq-item + .faq-item { margin-top: clamp(1.65rem, 1.93vw, 2.31rem); }
.faq-operacao {
  padding-top: clamp(2.5rem, 2.97vw, 3.56rem);
  padding-bottom: clamp(3.1rem, 3.7vw, 4.44rem);
}
.faq-operacao .faq-item + .faq-item { margin-top: clamp(1.5rem, 1.77vw, 2.13rem); }
.faq-financeiro .faq-item + .faq-item { margin-top: clamp(1.4rem, 1.61vw, 1.94rem); }

/* ---------- CTA final ---------- */
.contact-cta {
  margin-top: clamp(3.4rem, 4.4vw, 5.25rem);
  padding-bottom: clamp(1.8rem, 2.4vw, 2.9rem);
}
.contact-cta__title {
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: 1.3;
}
.contact-cta__btn {
  margin-top: .25rem;
  font-size: clamp(1rem, 1.355vw, 1.625rem);
  padding: .26em 2em;
}

/* ---------- responsivo ---------- */
/* Ao lado de "Onde estamos" a lista fica estreita; abaixo de ~1280px o
   e-mail não cabe em 4 colunas → empilha nome/contato/horário ao lado do
   ícone (nunca sobrepõe, qualquer que seja a largura). */
@media (max-width: 1280px) {
  .channel-list { display: block; }
  .channel-list li {
    grid-template-columns: 3.4rem 1fr;
    grid-template-areas:
      "icon name"
      "icon contact"
      "icon hours";
    column-gap: 1rem;
    row-gap: .1rem;
  }
  .channel-list__icon { grid-area: icon; }
  .channel-list__name { grid-area: name; }
  .channel-list__contact { grid-area: contact; }
  .channel-list__hours { grid-area: hours; }
  .channel-list li:not(:last-child)::after { left: 0; }
}

@media (max-width: 920px) {
  .channels__grid { grid-template-columns: 1fr; }
  .channels__grid .contact__where { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
}

@media (max-width: 700px) {
  .channel-list li { grid-template-columns: 2.4rem 1fr; }
  .channel-list__contact,
  .channel-list__hours { font-size: var(--fs-body); }
}

@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
}