@charset "UTF-8";
@font-face {
  font-family: "TeXGyreAdventor";
  src: url("../fonts/TeXGyreAdventor-Regular.eot");
  src: url("../fonts/TeXGyreAdventor-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/TeXGyreAdventor-Regular.woff2") format("woff2"), url("../fonts/TeXGyreAdventor-Regular.woff") format("woff"), url("../fonts/TeXGyreAdventor-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Agrandir";
  src: url("../fonts/Agrandir-Regular.eot");
  src: url("../fonts/Agrandir-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Agrandir-Regular.woff2") format("woff2"), url("../fonts/Agrandir-Regular.woff") format("woff"), url("../fonts/Agrandir-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Agrandir";
  src: url("../fonts/Agrandir-TextBold.eot");
  src: url("../fonts/Agrandir-TextBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Agrandir-TextBold.woff2") format("woff2"), url("../fonts/Agrandir-TextBold.woff") format("woff"), url("../fonts/Agrandir-TextBold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TeXGyreAdventor";
  src: url("../fonts/TeXGyreAdventor-Bold.eot");
  src: url("../fonts/TeXGyreAdventor-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/TeXGyreAdventor-Bold.woff2") format("woff2"), url("../fonts/TeXGyreAdventor-Bold.woff") format("woff"), url("../fonts/TeXGyreAdventor-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
.contacto .contact-wrapper {
  padding: 2em 5%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  height: auto;
  min-height: calc(100vh - 100px);
  align-items: center;
  column-gap: 2em;
}
.contacto .contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  position: relative;
}
.contacto .contact-form input, .contacto .contact-form textarea {
  width: 100%;
  resize: none;
  color: #4D5858;
  border: 1px solid #4D5858;
  padding: 0.25em 1em;
  border-radius: 1.2em;
}
.contacto .contact-form input:focus-visible, .contacto .contact-form textarea:focus-visible {
  outline: #F4EBE4 solid 2px;
}
.contacto .contact-form input::placeholder, .contacto .contact-form textarea::placeholder {
  color: #4D5858;
}
.contacto .contact-form .button {
  display: flex;
  width: fit-content;
  align-self: self-end;
}
.contacto .contact-form .c-input {
  position: relative;
}
.contacto .contact-form .lbl {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.contacto .contact-form .lbl:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  transition: all 0.3s ease;
}
.contacto .contact-form .text-nomb {
  position: absolute;
  top: 6px;
  font-size: 14px;
  left: 10px;
  transition: all 0.3s ease;
  color: rgb(59, 56, 56);
}
.contacto .contact-form input:focus + .lbl .text-nomb, .contacto .contact-form input:valid + .lbl .text-nomb {
  transform: translateY(-150%);
  font-size: 12px;
  color: #4D5858;
}
.contacto .contact-form textarea:focus + .lbl .text-nomb, .contacto .contact-form textarea:valid + .lbl .text-nomb {
  transform: translateY(-150%);
  font-size: 12px;
  color: #4D5858;
}
.contacto .contact-form input:focus + .lbl:after, .contacto .contact-form input:valid + .lbl:after, .contacto .contact-form textarea:focus + .lbl:after, .contacto .contact-form textarea:valid + .lbl:after {
  font-size: 12px;
  transform: translateX(0%);
}
.contacto .contact-directory {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}
.contacto .contact-directory-item {
  padding: 0 3em;
  display: flex;
  flex-direction: column;
}
.contacto .contact-directory-item span {
  position: relative;
}
.contacto .contact-directory-item span::before {
  content: "";
  width: 35px;
  height: 35px;
  left: -35px;
  top: 50%;
  display: flex;
  position: absolute;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg id='Grupo_1991' data-name='Grupo 1991' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22.582' height='35.964' viewBox='0 0 22.582 35.964'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectángulo_1560' data-name='Rectángulo 1560' width='22.582' height='35.964' fill='%2385746a'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Grupo_1990' data-name='Grupo 1990' clip-path='url(%23clip-path)'%3E%3Cpath id='Trazado_3259' data-name='Trazado 3259' d='M0,4.6A4.6,4.6,0,0,1,4.6,0H17.982a4.6,4.6,0,0,1,4.6,4.6V31.364a4.6,4.6,0,0,1-4.6,4.6H4.6a4.6,4.6,0,0,1-4.6-4.6ZM4.6,2.509A2.091,2.091,0,0,0,2.509,4.6V31.364A2.091,2.091,0,0,0,4.6,33.455H17.982a2.091,2.091,0,0,0,2.091-2.091V4.6a2.091,2.091,0,0,0-2.091-2.091Z' fill='%2385746a' fill-rule='evenodd'/%3E%3Cpath id='Trazado_3260' data-name='Trazado 3260' d='M65.255,0A1.255,1.255,0,0,0,64,1.255V2.927a2.927,2.927,0,0,0,2.927,2.927h6.691a2.927,2.927,0,0,0,2.927-2.927V1.255A1.255,1.255,0,0,0,75.291,0Z' transform='translate(-58.982)' fill='%2385746a' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.contacto .contact-directory-item h5 {
  margin-bottom: 0;
}
.contacto .contact-directory a:hover {
  text-decoration: underline #8C827A;
  color: #8C827A;
}
@media screen and (max-width: 993px) {
  .contacto .contact-wrapper {
    text-align: center;
    grid-template-columns: 1fr;
  }
  .contacto .contact-form {
    order: 1;
    padding: 1em;
  }
  .contacto .contact-form input {
    padding: 0.5em 1em;
  }
  .contacto .contact-form .text-nomb {
    top: 9px;
  }
  .contacto .contact-directory {
    order: 2;
    padding: 1em;
  }
  .contacto .contact-directory-item {
    padding: 0;
  }
  .contacto .contact-directory-item span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
  }
  .contacto .contact-directory-item span::before {
    position: relative;
    background-position: center;
    right: 0;
    left: 0;
    top: 0;
    transform: translateY(0);
    margin: 0;
  }
  .contacto .contact-image {
    order: 3;
  }
}