/* Breakpoint móvil */
@media (max-width: 767px) {
  .t4-contact-us .row.background .title {
    font-size: 1.1875em;
  }

  .t4-contact-us .row.txt-speak-with-us {
    display: none;
  }
}

/* Títulos */
.t4-contact-us .title .main-title {
  display: inline-block;
  text-align: left;
}

/* Bloque background */
.t4-contact-us .t4-row .custom {
  height: 100%;
}

.t4-contact-us .t4-row .custom .background {
  background-position: right;
  height: 100%;
  display: block;
  background-size: cover;
  position: relative;
}

/* Tablet / pantallas medianas */
@media (max-width: 991px) {
  .t4-contact-us .t4-row .custom .background {
    min-height: 20em;
  }
}

/* Overlay oscuro */
.t4-contact-us .t4-row .custom .background:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  opacity: 0.48;
}

/* Título sobre la imagen */
.t4-contact-us .t4-row .t4-col:not(.contact-us) .title {
  display: inline-block;
  position: relative;
  color: #fff;
}

/* Banda "¿Hablamos?" */
.t4-contact-us .row.txt-speak-with-us {
  position: absolute;
  display: inline-block;
  background-color: var(--color-secondary);
  color: var(--t4-body-bg);
  top: -1rem;
  left: 15%;
  z-index: 10;
}

.t4-contact-us .row.txt-speak-with-us span {
  display: inline-block;
  padding: .5rem 1rem;
  text-transform: uppercase;
  font-weight: 600;
}

/* Fila background */
.t4-contact-us .row.background {
  padding: 1rem;
}

.t4-contact-us .row.background .title {
  font-weight: 700 !important;
  font-size: 2.25em !important;
  font-family: 'Poppins';
  line-height: 1.25em;
}

.t4-contact-us .row.background .title .subtitle {
  font-size: .806em;
  font-weight: 500;
}

.t4-contact-us .row.background .title.text-left {
  top: 50%;
  transform: translateY(-50%);
}

/* Columna formulario */
.t4-contact-us .contact-us {
  background-color: var(--color-secondary);
}

.t4-contact-us .contact-us .wrapper-form {
  padding: 2.5rem calc(var(--t4-gutter-x) * 1.25);
  padding-right: 10%;
}

.t4-contact-us .contact-us .field.holder {
  margin-bottom: 1.5rem;
}

/* Campos y placeholders */
.t4-contact-us .contact-us input,
.t4-contact-us .contact-us textarea {
  background-color: transparent;
}

.t4-contact-us .contact-us input::placeholder,
.t4-contact-us .contact-us textarea::placeholder {
  color: var(--t4-body-bg);
  font-size: 1em;
  font-weight: 400;
  font-family: inherit;
}

.t4-contact-us .contact-us .nui.form .field.holder input[type="text"],
.t4-contact-us .contact-us .nui.form .field.holder textarea {
  padding: 1rem 1rem 1rem 2rem;
}

.t4-contact-us .contact-us .nui.form .field.holder input,
.t4-contact-us .contact-us .nui.form .field.holder textarea {
  border-radius: unset !important;
  border: .0625rem solid var(--t4-body-bg);
}

/* Checkbox legales */
.t4-contact-us .contact-us .nui.checkbox label {
  font-size: 1em;
  color: var(--t4-body-bg);
}

.t4-contact-us .contact-us .nui.checkbox label > a {
  font-weight: bold;
  text-decoration: underline;
  color: var(--t4-body-bg);
}

/* Botón envío */
.t4-contact-us .contact-us button[type="submit"] {
  background-color: var(--color-primary);
  color: var(--t4-body-bg) !important;
  border-radius: 0;
  padding: .938rem 1.375rem;
}

/* Campos con iconos */
.t4-contact-us form .field.holder.icon {
  position: relative;
}

.t4-contact-us form .field.holder.icon::before {
  position: absolute;
  top: 50%;
  left: 1em;
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Pro";
  font-size: 1em;
  font-weight: 100;
  color: var(--t4-body-bg);
}

.t4-contact-us form .field.holder.icon.field-name::before {
  content: "\f007" !important;
}

.t4-contact-us form .field.holder.icon.field-email::before {
  content: "\f0e0" !important;
}

.t4-contact-us form .field.holder.icon.field-phone::before {
  content: "\f879" !important;
}

.t4-contact-us form .field.holder.icon.field-message::before {
  content: "\f27a";
  top: 1em;
  transform: unset !important;
}

.t4-contact-us form .field.holder.icon input,
.t4-contact-us form .field.holder.icon textarea {
  padding-left: 3em !important;
}

/* Checkbox SVG e icono del botón */
.t4-contact-us form .field .nui.checkbox svg {
  font-size: 1em;
  line-height: 1em;
}

.t4-contact-us form button[type="submit"] {
  position: relative;
  padding-left: 3em !important;
}

.t4-contact-us form button[type="submit"]::before {
  position: absolute;
  left: 1em;
  font-family: "Font Awesome 5 Pro";
  font-size: 1em;
  content: '\f0a9';
}

/* Estados de error + color texto */
.t4-contact-us .field.error input,
.t4-contact-us .field.error textarea
{
  border-color: var(--t4-form-invalid-border-color) !important;
  background-color: transparent !important;
}

.t4-contact-us form .field input,
.t4-contact-us form .field textarea {
  color: var(--t4-body-bg) !important;
}