/* =========================
   CONTACTO
========================= */

.contact{
  padding: 64px 0 74px;
  background:#fff;
}

.sectionTitle--red{
  color: var(--red);
}

.contactLead{
  margin: 8px 0 28px;
  font-size: 15px;
  color:#111;
}

.contactGrid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 34px;
  align-items:start;
}

/* Form */
.contactForm{
  width:100%;
}

.contactFields{
  display:flex;
  flex-direction:column;
  gap: 14px;
  max-width: 420px;
}

.contactInput,
.contactTextarea{
  width:100%;
  border:0;
  background:#e9e9e9;
  color:#111;
  padding: 14px 16px;
  font-size: 15px;
  outline:none;
  font-family: var(--ff-body);
}

.contactTextarea{
  resize:none;
  min-height: 128px;
}

.contactInput::placeholder,
.contactTextarea::placeholder{
  color:#666;
}

/* Botón */
.contactActions{
  max-width: 420px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin-top: 18px;
  gap: 10px;
}

.contactBtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  min-width: 150px;
  padding: 12px 22px;
  background: var(--red);
  color:#fff;
  border:0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(196,0,24,.20);
  transition: transform .2s ease, background .25s ease;
}

.contactBtn:hover{
  background:#9e0015;
  transform: translateY(-1px);
}

.contactNote{
  margin:0;
  font-size: 13px;
  color:#222;
  min-height: 18px;
}

/* Spinner */
.contactSpinner{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  display:none;
  animation: spin 900ms linear infinite;
}

@keyframes spin{ to{ transform: rotate(360deg); } }

/* estado loading */
.contactForm.is-sending .contactSpinner{ display:inline-block; }
.contactForm.is-sending .contactBtn{ opacity:.92; cursor:progress; }
.contactForm.is-sending .contactBtn__label{ opacity:.95; }

/* Map */
.contactMap{
  width:100%;
  height: 320px;
  background:#ddd;
  overflow:hidden;
}

.contactMap iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Responsive */
@media (max-width: 992px){
  .contactGrid{
    grid-template-columns: 1fr;
  }
  .contactFields,
  .contactActions{
    max-width: 520px;
  }
  .contactActions{
    align-items:flex-start;
  }
  .contactBtn{
    width: 160px;
  }
  .contactMap{
    height: 360px;
  }
}

@media (max-width: 576px){
  .contact{
    padding: 54px 0 60px;
  }
  .contactLead{
    font-size: 14px;
  }
  .contactActions{
    align-items:center;
  }
  .contactBtn{
    width: 160px;
  }
  .contactMap{
    height: 320px;
  }
}