/* contacto.css — page-specific styles for contacto.astro */

/* ── Hero: contact method cards ──────────────────────────────────────────── */
.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  border-radius: 50px 0 0 50px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.26);
  background-color: #ffffff;
  padding: 8px 16px;
  max-width: 480px;
}

.contact-card__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.contact-card__text {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #333;
}

.contact-card__logo {
  width: 160px;
  height: auto;
}

/* ── Hero: urgencias ─────────────────────────────────────────────────────── */
.urgencias {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.urgencias__heading {
  font-family: "Poppins", sans-serif;
  font-size: 42px;
  font-weight: 700;
  background-color: transparent;
  background-image: linear-gradient(100deg, #244693 39%, #3798af 69%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.urgencias__icon {
  width: 160px;
  height: 160px;
  object-fit: contain;
}

/* ── Map section ─────────────────────────────────────────────────────────── */
#contacto-map {
  background: linear-gradient(
    90deg,
    rgba(55, 152, 175, 1) 1%,
    rgba(36, 70, 147, 1) 100%
  );
}

.map-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.map-info__location {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.map-info__icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
}

.map-info__address {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.map-info__embed {
  width: 100%;
  height: 300px;
  border: none;
  display: block;
}

.map-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .contact-card {
    border-radius: 12px;
    max-width: 100%;
  }
}