/* ==========================================================================
   CONTATO — canais, formulário e mapa
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Canais rápidos
   -------------------------------------------------------------------------- */

.canais {
  display: grid;
  gap: var(--gap-item);
}

@media (min-width: 760px) {
  .canais {
    grid-template-columns: repeat(3, 1fr);
  }
}

.canais__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--branco);
  border: 1px solid var(--linha);
  transition: border-color var(--media), box-shadow var(--media), transform var(--media);
}

.canais__item:hover {
  border-color: var(--ouro-borda);
  box-shadow: 0 10px 26px rgba(17, 17, 17, 0.07);
  transform: translateY(-3px);
}

.canais__item svg {
  width: 22px;
  height: 22px;
  color: var(--ouro-tinta);
}

.canais__item h3 {
  font-size: var(--t-h3);
}

.canais__item p {
  font-size: var(--t-rotulo);
  color: var(--tinta-suave);
}

/* --------------------------------------------------------------------------
   2. Grade principal
   -------------------------------------------------------------------------- */

.contato-grade {
  display: grid;
  gap: var(--gap-bloco);
  align-items: start;
}

@media (min-width: 1000px) {
  .contato-grade {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 5vw, 80px);
  }
}

/* Coluna de informações */
.contato-info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-item);
}

.contato-info__grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: var(--gap-menor);
  border-bottom: 1px solid var(--linha);
}

.contato-info__grupo:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.contato-info__rotulo {
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ouro-tinta);
}

.contato-info__valor {
  font-size: var(--t-h3);
  font-weight: var(--peso-medio);
  line-height: 1.4;
  color: var(--tinta);
  transition: color var(--rapida);
}

a.contato-info__valor:hover {
  color: var(--ouro-tinta);
}

.contato-info__nota {
  font-size: var(--t-rotulo);
  color: var(--tinta-suave);
}

/* Horários */
.horarios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.horarios li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--t-rotulo);
  color: var(--tinta-suave);
}

.horarios li::after {
  content: '';
  order: 1;
  flex: 1;
  height: 1px;
  background: var(--linha);
}

.horarios li span:last-child {
  order: 2;
  color: var(--tinta);
}

/* --------------------------------------------------------------------------
   3. Formulário
   -------------------------------------------------------------------------- */

.contato-formulario {
  display: flex;
  flex-direction: column;
  gap: var(--gap-item);
  padding: clamp(24px, 4vw, 44px);
  background: var(--papel);
  border: 1px solid var(--linha);
}

.contato-formulario__titulo {
  font-size: var(--t-h2);
}

.contato-formulario__texto {
  font-size: var(--t-rotulo);
  color: var(--tinta-suave);
}

.contato-formulario .campo__entrada,
.contato-formulario .campo__area,
.contato-formulario .campo__selecao {
  background: var(--branco);
}

.contato-formulario__envio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-menor);
  padding-top: var(--gap-menor);
  border-top: 1px solid var(--linha);
}

.contato-formulario__lgpd {
  max-width: 44ch;
  font-size: var(--t-mini);
  line-height: 1.55;
  color: var(--tinta-tenue);
}

.botao[aria-busy='true'] {
  opacity: 0.6;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Mapa
   -------------------------------------------------------------------------- */

.mapa__moldura {
  position: relative;
  width: 100%;
  height: clamp(320px, 46vh, 520px);
  overflow: hidden;
  background: var(--papel-fundo);
  border-top: 1px solid var(--linha);
}

.mapa__moldura iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(0.95);
  transition: filter var(--media);
}

.mapa__moldura:hover iframe {
  filter: grayscale(0.2);
}

.mapa__cartao {
  position: absolute;
  z-index: 2;
  top: clamp(16px, 3vw, 32px);
  left: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.5vw, 28px);
  background: var(--branco);
  border-top: 3px solid var(--ouro);
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.14);
}

.mapa__cartao h3 {
  font-size: var(--t-h3);
}

.mapa__cartao p {
  font-size: var(--t-rotulo);
  color: var(--tinta-suave);
}