/* ==========================================================================
   contato.css — Seção de Contato com canais e mapa
   Depende de tokens.css + main.css (container, secao, btn, etc.)
   Fundo: branco — alterna após o marfim do FAQ
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fundo e decoração de seção
   -------------------------------------------------------------------------- */

#contato {
  background-color: var(--branco);
  position: relative;
  overflow: hidden;
}

/* Brilho decorativo sutil no canto superior-direito */
#contato::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: min(480px, 55vw);
  height: min(480px, 55vw);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(22, 168, 201, 0.07) 0%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}

/* Todos os filhos acima da decoração */
#contato > .container {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Grid dois colunas
   Desktop ≥ 861px: esquerda = info, direita = mapa
   Mobile: coluna única (mapa abaixo)
   -------------------------------------------------------------------------- */

.contato-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 861px) {
  .contato-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   Coluna esquerda — info
   -------------------------------------------------------------------------- */

.contato-info {
  display: flex;
  flex-direction: column;
}

/* Cabeçalho */

.contato-pre-titulo {
  margin-bottom: 0.5rem;
}

.contato-titulo {
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}

.contato-intro {
  color: var(--texto-suave);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 52ch;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   Lista de canais
   -------------------------------------------------------------------------- */

.contato-canais {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Linha de canal */

.contato-canal {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8125rem 1rem;
  border-radius: var(--raio-sm);
  background-color: rgba(12, 59, 90, 0.025);
  transition: background-color 220ms ease;
}

.contato-canal--link {
  cursor: pointer;
}

.contato-canal--link:hover {
  background-color: rgba(22, 168, 201, 0.07);
}

/* Chip de ícone */

.contato-canal__icone-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: rgba(22, 168, 201, 0.12);
  color: var(--turquesa);
  transition: background-color 220ms ease, transform 220ms ease;
}

/* Variantes de cor por canal */

.contato-canal__icone-wrap--whats {
  background-color: rgba(37, 211, 102, 0.12);
  color: var(--verde-whats);
}

.contato-canal__icone-wrap--ig {
  background-color: rgba(225, 48, 108, 0.1);
  color: #e1306c;
}

.contato-canal__icone-wrap--fb {
  background-color: rgba(24, 119, 242, 0.1);
  color: #1877f2;
}

.contato-canal--link:hover .contato-canal__icone-wrap {
  transform: scale(1.1);
}

/* Ícone interno */

.contato-canal__icone {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* Grupo label + valor */

.contato-canal__info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.contato-canal__label {
  font-family: var(--fonte-texto);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  line-height: 1;
}

.contato-canal__valor {
  font-family: var(--fonte-titulo);
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--azul-profundo);
  line-height: 1.25;
  transition: color 220ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contato-canal--link:hover .contato-canal__valor {
  color: var(--turquesa);
}

/* --------------------------------------------------------------------------
   CTA coral principal
   -------------------------------------------------------------------------- */

.contato-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding-block: 1.0625rem;
  font-size: 1rem;
  margin-top: auto;
}

.contato-cta__icone {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Coluna direita — mapa com frame gradiente
   -------------------------------------------------------------------------- */

/* Wrapper externo: frame degradê turquesa → azul */
.contato-mapa-frame {
  background: linear-gradient(
    135deg,
    var(--turquesa) 0%,
    var(--azul-profundo) 100%
  );
  border-radius: calc(var(--raio) + 4px);
  padding: 3px;
  box-shadow: var(--sombra);
  min-height: 368px; /* 360px iframe + 2×3px borda */
}

/* Wrapper interno: recorte com overflow hidden para os cantos arredondados */
.contato-mapa-inner {
  border-radius: var(--raio);
  overflow: hidden;
  background-color: #d4eef5; /* placeholder enquanto o mapa carrega */
  min-height: 360px;
  position: relative;
}

/* iframe — fixo 360px no mobile */
.contato-mapa-inner iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}

/* Desktop: mapa ocupa toda a altura da coluna */
@media (min-width: 861px) {
  .contato-mapa-frame {
    display: flex;
    flex-direction: column;
    min-height: 484px;
  }

  .contato-mapa-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .contato-mapa-inner iframe {
    flex: 1;
    height: 100%;
    min-height: 480px;
  }
}

/* --------------------------------------------------------------------------
   Reduced-motion — interações mantidas, só sem tween
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .contato-canal,
  .contato-canal__icone-wrap,
  .contato-canal__valor {
    transition: none;
  }
}