/* =====================================================================
   Contato (#contato) — cards de canal + formulário de demonstração com
   estados de erro, envio e sucesso.
   ===================================================================== */

.gc-contato__grid {
  max-width: var(--gc-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(34px, 5vw, 56px);
}

.gc-contato__titulo {
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1.1;
  letter-spacing: var(--gc-trilha-h2);
  margin: 18px 0 0;
  color: var(--gc-txt-escuro);
  text-wrap: balance;
}

.gc-contato__texto {
  font: 400 16.5px/1.65 var(--gc-fonte-texto);
  color: var(--gc-txt-sobre-claro);
  margin: 18px 0 0;
}

.gc-contato__canais {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 34px;
}

.gc-canal {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--gc-branco);
  border-radius: 18px;
  padding: 18px 20px;
  transition: transform var(--gc-t-hover), box-shadow var(--gc-t-hover);
}

a.gc-canal:hover {
  transform: translateY(-2px);
  box-shadow: var(--gc-sombra-card);
}

.gc-canal__rotulo {
  font: 600 12px/1 var(--gc-fonte-texto);
  color: var(--gc-txt-fraco-claro);
}

.gc-canal__valor {
  font: 700 16px/1.2 var(--gc-fonte-texto);
  color: var(--gc-txt-escuro);
  margin-top: 5px;
}

/* --- formulário --------------------------------------------------- */

.gc-form {
  background: var(--gc-branco);
  border-radius: var(--gc-raio-painel);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 22px 54px rgba(20, 40, 50, .09);
}

.gc-form__titulo {
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 26px;
  color: var(--gc-txt-escuro);
}

.gc-form__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
  gap: 16px;
}

.gc-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font: 600 13px/1 var(--gc-fonte-texto);
  color: rgba(var(--gc-cinza-rgb), .7);
}

.gc-campo--largo {
  grid-column: 1 / -1;
}

.gc-campo input,
.gc-campo select,
.gc-campo textarea {
  width: 100%;
  min-width: 0;
  font: 400 15px/1 var(--gc-fonte-texto);
  color: var(--gc-txt-escuro);
  padding: 15px 16px;
  border-radius: var(--gc-raio-botao);
  border: 1px solid rgba(var(--gc-cinza-rgb), .16);
  background: var(--gc-claro-alt);
  outline: none;
  transition: border-color var(--gc-t-hover), background-color var(--gc-t-hover);
}

.gc-campo textarea {
  line-height: 1.5;
  resize: vertical;
}

.gc-campo input:focus,
.gc-campo select:focus,
.gc-campo textarea:focus {
  border-color: var(--gc-verde);
  background: var(--gc-branco);
}

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

/* --- telefone: seletor de DDI + campo mascarado --------------------- */

.gc-fone {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.gc-fone input {
  flex: 1 1 auto;
  padding-right: 12px;
  padding-left: 12px;
}

.gc-fone__pais {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: var(--gc-raio-botao);
  border: 1px solid rgba(var(--gc-cinza-rgb), .16);
  background: var(--gc-claro-alt);
  color: var(--gc-txt-escuro);
  font: 500 13px/1 var(--gc-fonte-texto);
  cursor: pointer;
  transition: border-color var(--gc-t-hover), background-color var(--gc-t-hover);
}

.gc-fone__pais:hover,
.gc-fone__pais:focus-visible,
.gc-fone__pais.is-aberto {
  border-color: var(--gc-verde);
  background: var(--gc-branco);
}

.gc-fone__bandeira {
  flex: none;
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(var(--gc-cinza-rgb), .18);
}

.gc-fone__seta {
  width: 12px;
  height: 12px;
  color: rgba(var(--gc-cinza-rgb), .55);
}

.gc-fone__lista {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 262px;
  overflow-y: auto;
  padding: 6px;
  border-radius: var(--gc-raio-botao);
  border: 1px solid rgba(var(--gc-cinza-rgb), .14);
  background: var(--gc-branco);
  box-shadow: 0 18px 38px rgba(20, 40, 50, .16);
}

.gc-fone__opcao {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gc-txt-escuro);
  font: 400 14px/1 var(--gc-fonte-texto);
  text-align: left;
  cursor: pointer;
}

.gc-fone__opcao:hover,
.gc-fone__opcao:focus-visible {
  background: var(--gc-claro-alt);
}

.gc-fone__opcao.is-ativa {
  background: var(--gc-claro-alt);
  font-weight: 600;
}

.gc-fone__opcao-nome {
  flex: 1 1 auto;
  min-width: 0;
}

.gc-fone__opcao-ddi {
  flex: none;
  color: rgba(var(--gc-cinza-rgb), .6);
}

.gc-form__contador {
  font: 500 11.5px/1 var(--gc-fonte-texto);
  color: var(--gc-txt-fraco-claro);
  align-self: flex-end;
}

.gc-form__contador.is-cheio {
  color: var(--gc-erro);
}

.gc-form__aviso {
  display: none;
  margin-top: 16px;
  font: 500 13.5px/1.5 var(--gc-fonte-texto);
  color: var(--gc-erro);
  background: var(--gc-erro-veu);
  border: 1px solid rgba(var(--gc-erro-rgb), .22);
  border-radius: var(--gc-raio-chip);
  padding: 12px 14px;
}

.gc-form__aviso.is-visivel {
  display: block;
}

.gc-form__botao {
  margin-top: 22px;
}

/* --- estado de sucesso -------------------------------------------- */

.gc-form__sucesso {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

.gc-form__check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(var(--gc-verde-rgb), .16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gc-verde-escuro);
}

.gc-form__check .gc-ico {
  font-size: 32px;
}

.gc-form__sucesso h3 {
  font-size: 26px;
  line-height: 1.2;
  color: var(--gc-txt-escuro);
}

.gc-form__sucesso p {
  font: 400 15.5px/1.6 var(--gc-fonte-texto);
  color: rgba(var(--gc-cinza-rgb), .7);
  max-width: 340px;
}

.gc-form__voltar {
  margin-top: 8px;
  font: 600 14.5px/1 var(--gc-fonte-texto);
  color: var(--gc-txt-corpo);
  background: var(--gc-nevoa);
  border: 0;
  padding: 14px 22px;
  border-radius: var(--gc-raio-botao);
  transition: background-color var(--gc-t-hover);
}

.gc-form__voltar:hover {
  background: rgba(var(--gc-cinza-rgb), .16);
}