/* =====================================================
   INOXTECH — Localização (mapa)
   ===================================================== */

.mapa {
  position: relative;
  padding: clamp(56px, 7vw, 92px) 0 clamp(72px, 9vw, 120px);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(74, 157, 184, .10), transparent 62%),
    radial-gradient(820px 400px at 92% 10%, rgba(44, 95, 114, .08), transparent 60%),
    var(--gray-50);
}

.mapa-head {
  margin-bottom: clamp(28px, 4vw, 46px);
}

.mapa-eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(74, 157, 184, .12);
  border: 1px solid rgba(74, 157, 184, .32);
  border-radius: 999px;
}

.mapa-title {
  margin: 0;
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.6px;
  color: var(--gray-900);
  text-wrap: balance;
}

.mapa-rule {
  display: block;
  width: 84px;
  height: 3px;
  margin: 20px 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

/* ===== moldura do mapa ===== */
.mapa-quadro {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-100);
}

/* anel na cor da marca */
.mapa-quadro::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(74, 157, 184, .28);
  pointer-events: none;
}

/* o iframe preenche a moldura inteira */
.mapa-quadro iframe {
  display: block;
  width: 100%;
  height: clamp(380px, 58vh, 620px);
  border: 0;
}

/* ===== botão traçar rota ===== */
.mapa-acoes {
  display: flex;
  justify-content: center;
  margin-top: clamp(26px, 3.4vw, 40px);
}

.mapa-acoes .btn .wa-icon {
  width: 20px;
  height: 20px;
}

/* ===== responsivo ===== */
@media (max-width: 780px) {
  .mapa-quadro iframe {
    height: clamp(340px, 52vh, 460px);
  }
  .mapa-title { letter-spacing: -1px; }
}

@media (max-width: 560px) {
  .mapa { padding-bottom: 72px; }
  .mapa-quadro { border-radius: var(--radius-md); }
  .mapa-quadro iframe { height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
  .mapa-quadro { transition: none; }
}