/* ─── Contact / CTA Final ────────────────────────────────── */
.contact { background: var(--blue-900); color: #fff; }
.contact h2 { color: #fff; }
.contact .section-subtitle,
.contact p   { color: rgba(255,255,255,.75); }

.contact .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* ── Options ── */
.contact__content > p { color: rgba(255,255,255,.75); margin: 1rem 0 2rem; }

.contact__options {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

.contact__option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1.5px solid rgba(255,255,255,.12);
  color: #fff;
  transition: border-color var(--transition),
              background var(--transition),
              transform var(--transition);
}
.contact__option:hover {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  transform: translateX(4px);
}

.contact__option-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact__option--whatsapp .contact__option-icon { background: rgba(37,211,102,.2); color: #25D366; }
.contact__option--phone    .contact__option-icon { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); }
.contact__option--email    .contact__option-icon { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); }

.contact__option > div     { display: flex; flex-direction: column; gap: .15rem; }
.contact__option strong    { font-size: 1rem; font-weight: 700; }
.contact__option span      { font-size: .82rem; color: rgba(255,255,255,.65); }

/* ── Map / Unidades ── */
.contact__map h3   { color: #fff; margin-bottom: 1.25rem; }

.contact__units {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.contact__unit {
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1.5px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.contact__unit-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}
.contact__unit-head h4 { color: #fff; font-size: 1.05rem; font-weight: 700; }

.contact__unit-tag {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .2rem .55rem;
  border-radius: 100px;
}
.contact__unit-tag--matriz { background: var(--orange); color: #fff; }
.contact__unit-tag--filial { background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); }

.contact__unit address {
  font-style: normal;
  font-size: .88rem;
  line-height: 1.5;
  color: rgba(255,255,255,.7);
  margin-bottom: .5rem;
}
.contact__unit-phone {
  display: inline-block;
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  transition: color var(--transition);
}
.contact__unit-phone:hover { color: var(--orange); }

.contact__map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
}

/* Placeholder antes do iframe carregar */
.map-placeholder {
  width: 100%;
  height: 220px;
  background:
    linear-gradient(135deg, rgba(10,63,114,.6) 0%, rgba(26,127,212,.4) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 8C20.1 8 12 16.1 12 26c0 14.3 18 32 18 32s18-17.7 18-32C48 16.1 39.9 8 30 8zm0 24.5c-3.6 0-6.5-2.9-6.5-6.5s2.9-6.5 6.5-6.5 6.5 2.9 6.5 6.5-2.9 6.5-6.5 6.5z' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E") center/auto repeat;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.5);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
}
.map-placeholder::after {
  content: 'Mapa carregando…';
}

.contact__areas h4 {
  color: rgba(255,255,255,.8);
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .75rem;
}
.contact__areas ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .75rem;
}
.contact__areas li {
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.contact__areas li::before { content: '•'; color: var(--orange); }

@media (max-width: 900px) {
  .contact .container { grid-template-columns: 1fr; }
}