/* ==========================================================================
   Contacto
   ========================================================================== */

/* ---------- Contact info + form ---------- */
.contact-info {
  height: 100%;
  padding: 80px 20px;
  background-color: #f9f9f9;
}
.contact-info__title { margin-bottom: 20px; }
.contact-info__block { font-size: 16px; line-height: 25px; }

.contact-info__divider {
  margin: 10px 0 20px;
  border: 0;
  border-bottom: 1px solid #cccccc;
  opacity: 1;
}

.contact-info__support { margin-bottom: 10px; }
.contact-info__support p { font-size: 12px; }

/* Button group: 5px gap around each button (10px on tablet/mobile) */
.support-links {
  display: flex;
  flex-wrap: wrap;
  margin: -5px -5px 25px;
}
.support-links .btn { margin: 5px; }

.contact-info__cta { width: 85%; margin-bottom: 20px; }
.contact-info__cta--last { margin-bottom: 0; }
.contact-info__cta .btn { font-weight: 400; }

/* Original sppb "sm" buttons */
.contact-info .btn-sm {
  --bs-btn-padding-y: 4px;
  --bs-btn-padding-x: 8px;
  --bs-btn-font-size: 14px;
  --bs-btn-line-height: 1.5;
  --bs-btn-border-radius: 3px;
}

/* sppb-btn-info */
.btn-support-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0ac9c9;
  --bs-btn-border-color: #0ac9c9;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #09aeae;
  --bs-btn-hover-border-color: #09aeae;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #09aeae;
  --bs-btn-active-border-color: #09aeae;
}
/* sppb-btn-secondary */
.btn-support-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #98a7b5;
  --bs-btn-border-color: #98a7b5;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #7a8793;
  --bs-btn-hover-border-color: #7a8793;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7a8793;
  --bs-btn-active-border-color: #7a8793;
}
/* Plain grey link-style buttons */
.contact-info .btn-support-link {
  --bs-btn-color: #676767;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #333;
  --bs-btn-hover-bg: #dcdcdc;
  --bs-btn-hover-border-color: #dcdcdc;
  --bs-btn-active-color: #333;
  --bs-btn-active-bg: #dcdcdc;
  --bs-btn-active-border-color: #dcdcdc;
  --bs-btn-padding-y: 5px;
  --bs-btn-padding-x: 15px;
}

.contact-form {
  height: 100%;
  padding: 80px 30px 0;
  background-color: rgba(255, 255, 255, .45);
}

/* ---------- Bottom call-to-action ---------- */
.contact-cta {
  padding: 80px 0;
  background-image: url('../../img/contacto/contacto-bg.jpg');
  background-position: 100% 0;
}
.contact-cta__overlay { background-color: rgba(18, 5, 18, .76); }
.contact-cta__title {
  margin: 0 0 5px;
  font-weight: 500;
  color: #fff;
}
.contact-cta__text { color: #d8d8d8; }

.contact-cta__btn {
  --bs-btn-color: #fff;
  --bs-btn-bg: #e74b4f;
  --bs-btn-border-color: #e74b4f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #515a68;
  --bs-btn-hover-border-color: #515a68;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #515a68;
  --bs-btn-active-border-color: #515a68;
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 10px;
  --bs-btn-font-size: 20px;
  --bs-btn-border-radius: 5px;
}

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
  .contact-info { height: auto; margin-bottom: 30px; }
  .contact-info__block { margin-bottom: 20px; }
  .contact-info__support { margin-bottom: 20px; }
  .support-links { margin: -10px -10px 20px; }
  .support-links .btn { margin: 10px; }
  .contact-form { height: auto; padding: 0; }
  .contact-cta { padding: 45px 0; }
  .contact-cta__title { line-height: 35px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .contact-info__cta { width: 40%; margin-bottom: 10px; }
  .contact-cta .col-lg-8 { padding-top: 30px; }
  .contact-cta__btn { --bs-btn-font-size: 19px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  .contact-info__block,
  .contact-info__support { margin-bottom: 10px; }
  .support-links { margin-bottom: 10px; }
  .contact-info__cta { margin-bottom: 10px; }
  .contact-info__cta--last { margin-bottom: 30px; }
  .contact-cta { padding: 60px 0; }
  .contact-cta__text { margin: 20px auto 30px; font-size: 16px; line-height: 24px; }
  .contact-cta .col-md-7 { margin-top: 30px; }
}