/* ===== Contato (fundo azul full-bleed; imagem sangra até a borda esquerda) ===== */
.contact {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  color: var(--white);
}
.contact__bg {
  position: absolute;
  inset: 0;
  background: url("../img/bg-wave-contact.svg") center / cover no-repeat;
  opacity: .06;
  pointer-events: none;
}
.contact__grid {
  position: relative;
  max-width: var(--container);   /* colunas centralizadas na grid */
  margin-inline: auto;
  padding: clamp(56px, 7vw, 100px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
/* só a foto quebra a grid e estica até a borda esquerda */
.contact__media {
  position: relative;
  align-self: stretch;
  min-height: 420px;
  width: calc(100% + var(--bleed));
  margin-left: calc(var(--bleed) * -1);
}
.contact__media > img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0 24px 24px 0;
}
.contact__badge {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  background: var(--white);
  border-radius: 24px 24px 0 0;
  padding: 26px 28px 0;
}
.contact__badge img { width: 150px; height: auto; }

.contact__content { max-width: 598px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.contact__content > .btn { align-self: flex-start; }   /* botão não estica */
.contact__title { color: var(--white); font-size: clamp(30px, 4vw, 44px); }

.contacts { display: flex; flex-wrap: wrap; gap: 24px 40px; }
.contact-item { display: flex; align-items: center; gap: 14px; }
.contact-item__icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.contact-item__icon img { width: 22px; height: 22px; }
.contact-item__label { font-size: 13px; color: rgba(255, 255, 255, .7); }
.contact-item__value { font-size: 20px; font-weight: 600; color: var(--white); }

.socials { display: flex; align-items: center; gap: 14px; }
.socials > span { font-size: 16px; color: rgba(255, 255, 255, .8); }
.social {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.social:hover { background: rgba(255, 255, 255, .28); }
.social img { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-inline: var(--gutter);
  }
  .contact__media { min-height: 0; width: auto; margin-left: 0; }   /* sem sangria ao empilhar */
  .contact__media > img { height: clamp(260px, 60vw, 420px); border-radius: var(--radius); }
  .contact__badge { padding: 14px 16px 0; border-radius: 16px 16px 0 0; }
  .contact__badge img { width: 104px; }   /* badge menor pra não cobrir tanto a foto */
  .contact__content { max-width: none; }
}