body,
* {
  box-sizing: border-box;
}



.principal-formulario-contacto {

  background-color: #f2f9fd;

  padding: 64px 0;

}

.principal-formulario-contacto .container {

  max-width: 1164px;

  margin: 0 auto;

  padding: 0 24px;

}

.principal-formulario-contacto .principal-row-container {

  display: flex;

  flex-direction: column;

  gap: 28px;

  align-items: stretch;

}



/* Head */

.principal-formulario-contacto .head-row h2 {

  font-size: 32px;

  margin: 0 0 12px;

  line-height: 40px;

  color: var(--pf-title, #014263);

  font-weight: 700;

  text-align: left;

}

.principal-formulario-contacto .head-row p {

  font-size: 18px;

  margin: 0 0 24px;

  color: #616267;

  max-width: 720px;

}



/* form layout */

.principal-formulario-contacto form,
#form-contact{

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  gap: 16px 24px;

  align-items: flex-start;

}
.d-none{
    display: none;
}
.principal-formulario-contacto form>div,
#form-contact > .field
{

  flex: 0 1 calc(50% - 12px);

}

.principal-formulario-contacto .form-col-span-2 {

  flex: 0 1 100%;

}



label.principal-label,
.field--contact label{

  display: block;

  font-size: 16px;

  color: #616267;

  font-family: "FS Elliot Pro", sans-serif;

  margin-bottom: 6px;

}

label.principal-label .required,
.required{

  color: #d9534f;

  font-size: 20px;

}
.form-row .checkbox label{
    font-size: 16px;
    line-height: 28px;
    color: #2F2F2F;
    margin-bottom: 24px;
}
.form-row .checkbox label a{
    color: #0061A0;
    text-decoration: underline;
}

.form-row .checkbox label a:hover{
    color: #003865;
}

/* inputs */

.principal-formulario-contacto input[type="text"],

.principal-formulario-contacto input[type="email"],

.principal-formulario-contacto select,
.field--contact input, .field--contact textarea, .field--contact select{

  width: 100%;

  height: 44px;

  padding: 0 12px;

  border: 1px solid #9aa6ad;

  border-radius: 4px;

  background: #fff;

  font-size: 14px;

  color: #23323b;

  outline: none;

  transition: border-color .15s ease, box-shadow .15s ease;

}

.principal-formulario-contacto input::placeholder,

.principal-formulario-contacto select::placeholder {

  color: #fff;

}

.principal-formulario-contacto input:focus,

.principal-formulario-contacto select:focus {

  border-color: #0061A0;

  box-shadow: 0 0 0 3px rgba(6, 97, 160, 0.06);

}



/* phone combo */

.principal-formulario-contacto .phone-wrapper {

  display: flex;

  gap: 0;

  align-items: center;

}

.principal-formulario-contacto .phone-flag {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 0 10px;

  border: 1px solid #9aa6ad;

  border-right: none;

  border-radius: 4px 0 0 4px;

  background: #f5f7f8;

  height: 44px;

}

.principal-formulario-contacto .phone-flag img.phone-flag-img {

  width: 20px;

  height: 14px;

  object-fit: cover;

  display: block;

}

.principal-formulario-contacto .phone-flag select {

  border: none;

  background: transparent;

  font-size: 14px;

  padding: 0;

  outline: none;

  height: 100%;

  color: #23323b;

  appearance: none;

  -webkit-appearance: none;

}

.principal-formulario-contacto .phone-wrapper input {

  flex: 1;

  min-width: 0;

  border: 1px solid #9aa6ad;

  border-left: none;

  border-radius: 0 4px 4px 0;

  height: 44px;

  padding: 0 12px;

}



/* submit */

.principal-form-footer {

  margin-top: 18px;

  display: flex;

  align-items: center;

}

.principal-button--submit,
#form-contact .btn{

  padding: 10px 28px;

  border-radius: 24px;

  border: 1px solid #0061A0;

  background: #fff;

  color: #0061A0;
  
  cursor: pointer;

  font-weight: 700;

}
.principal-button--submit:hover,
#form-contact .btn:hover{
    background-color: #F7F7F7;
    color: #04508B;
}



/* responsive */

@media (max-width: 900px) {

  .principal-formulario-contacto form {

    flex-direction: column;

  }

  .principal-formulario-contacto form>div {

    flex: 0 1 100%;

    width: 100%;

  }

}

@media (max-width: 600px) {

  .principal-formulario-contacto {

    padding: 30px 0;

  }

  .principal-formulario-contacto .head-row h2 {

    font-size: 24px;

    line-height: 32px;

  }

  .principal-button--submit {

    width: 100%;

    background: #0061A0;

    color: #fff;

  }

}

/* ninjaforms styles */
.nf-form-fields-required {
  display: none;
}
nf-fields-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}
.nf-form-content label {
  font-weight: 400!important;
}
nf-field {
  width: calc(50% - 12px);
}
.principal-formulario-contacto .nf-form-content input:not([type="button"]),
.principal-formulario-contacto .nf-form-content select,
.principal-formulario-contacto .nf-form-content textarea {
  background: #fff;
}
.principal-formulario-contacto textarea {
  background: #fff;
}
nf-field:has(select) {
  width: 54px;
  margin-right: -25px;
}
.nf-form-content .list-select-wrap > div div::after {
  font-size: 10px!important;
  right: 2px!important;
}
nf-field:has(input[type="tel"]) {
  width: calc(50% - 65px);
}
nf-field:has(input[type="tel"]) label {
  visibility: hidden;
}
nf-field:has(input[type="checkbox"]) {
  width: 100%;
}

.nf-form-content textarea.ninja-forms-field {
  height: 50px!important;
}
.principal-formulario-contacto .nf-form-content input[type="submit"] {
  color: #0061A0;
  border: 1px solid #0061A0;
  border-radius: 100px;
  padding: 10px 35px;
}
.principal-formulario-contacto .nf-form-content input[type="submit"]:hover {
  background: #0061A0;
  color: #fff;
}

@media (max-width:600px) {
  nf-field {
  width: 100%;
}
nf-field:has(select) {
  width: 54px;
  margin-right: -25px;
}

nf-field:has(input[type="tel"]) {
  width: calc(100% - 53px);
}
}
/* ninjaforms styles */