:root {
  --VerdeOscuro: #041c14;
  --VerdeClaro: #44946b;
  --Arena: #efccb1;
  --ArenaClara: #f9eee5;
  --Carbon: #171717;
}

/* quicksand-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/quicksand-v36-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* quicksand-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/quicksand-v36-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* quicksand-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/quicksand-v36-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* quicksand-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/quicksand-v36-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* quicksand-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/quicksand-v36-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--VerdeOscuro);
  overflow-x: hidden;
}

/* Estilo para navegadores basados en WebKit (Chrome, Safari, etc.) */
body::-webkit-scrollbar {
  width: 0rem; /* Ancho del scrollbar */
}

main {
  position: relative;
  z-index: 2;
  height: auto;
  background-color: #eaeaea;
}

.dark-solicitud {
  width: 100%;
  height: 100vh;
  background: #00000063;
  backdrop-filter: blur(2px);
  position: fixed;
  z-index: 200;
  opacity: 0;
  display: none;
}

#solicitud {
  background-color: #d2d2d2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -53%);
  border-radius: 1.5rem;
  padding: 1.5rem 3rem;
  width: 30rem;
  opacity: 0;
  display: none;
}

#solicitud img {
  position: absolute;
  right: 2rem;
  top: 2rem;
  width: 4%;
  height: auto;
  cursor: pointer;
  transition: 0.4s;
}

#solicitud img:hover {
  transform: scale(1.2);
  transition: 0.4s;
}

#solicitud input::placeholder {
  color: #1b1b1b;
}

#solicitud .input {
  background-color: transparent;
  border-bottom: 1px solid rgb(0, 0, 0);
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 0.3rem 0.5rem;
  margin: 0.7rem 0;
  font-size: 1rem;
  font-family: Quicksand;
  font-weight: 600;
  color: #0c0c0c;
  width: 100%;
}

#solicitud .input:focus {
  outline: none;
}

.solicitud-tittle {
  font-family: Quicksand;
  font-weight: bold;
  font-size: 1.3rem;
  width: 100%;
  padding: 1rem 0 0.5rem 0;
  line-height: 1.5rem;
}

.boton-solicitud {
  background-color: #4b8266;
  width: 60%;
  color: white;
  border: none;
  padding: 0.8rem 0;
  text-align: center;
  font-family: Raleway;
  font-weight: bold;
  font-size: 1.1rem;
  border-radius: 0.5rem;
  letter-spacing: 0.05rem;
  margin: 0.5rem 0 1.2rem 0;
  cursor: pointer;
  border: 2px solid #4b8266;
  transition: 0.5s;
}

.boton-solicitud:hover {
  background-color: rgba(255, 255, 255, 0.131);
  color: #0c0c0c;
  transition: 0.3s;
}

#solicitud a {
  text-decoration: none;
  color: black;
  font-family: Quicksand;
  font-weight: 600;
  text-align: center;
  margin: 0 0.2rem;
  font-size: 0.8rem;
}

.solicitud-links {
  text-align: center;
}

#tipo-solicitud-pago {
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  color: #1b1b1b;
  border-bottom: 1px solid black;
}

#tipo-solicitud-pago:focus {
  outline: none;
}

#tipo-solicitud-pago option {
  color: #ffffff;
}

#tipo-pago {
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  color: #1b1b1b;
  border-bottom: 1px solid black;
}

#tipo-pago:focus {
  outline: none;
}

#tipo-pago option {
  color: #ffffff;
}

.dark {
  height: 100vh;
  width: 100%;
  position: fixed;
  background-color: #000000be;
  z-index: 100;
  cursor: pointer;
  display: none;
  opacity: 0;
}

.section-1 {
  height: 100vh;
  width: 100%;
  padding: 0rem 1.5rem;
  max-width: 150rem;
  margin: auto;
  position: relative;
}

.menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  z-index: 101;
}

.boton {
  transition: 0.5s;
}

.boton:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

.logo-main {
  width: 13rem;
}

.menu-main {
  width: 3.2rem;
}

.menu_social {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
}

.menu_social:hover {
  background-color: rgb(145, 145, 145);
  transition: 0.4s;
}

.menu_view-1 {
  transition: 0.5s;
}

.menu_view-1:hover {
  background-color: rgb(145, 145, 145);
  transition: 0.4s;
}

.boton-salir {
  transition: 0.5s;
}

.boton-salir:hover {
  transition: 0.4s;
  background-color: rgb(65, 118, 148);
}

.home {
  transition: 0.4s;
}

.home:hover {
  background-color: rgb(155, 155, 155);
  transition: 0.5s;
}

.destiny {
  transition: 0.4s;
}

.destiny:hover {
  background-color: rgb(155, 155, 155);
  transition: 0.5s;
}

.us {
  transition: 0.4s;
}

.us:hover {
  background-color: rgb(155, 155, 155);
  transition: 0.5s;
}

.buy {
  transition: 0.4s;
}

.buy:hover {
  background-color: rgb(155, 155, 155);
  transition: 0.5s;
}

.nav_menu {
  z-index: 101;
  position: fixed;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
  display: none;
}

.nav-menu-base {
  z-index: 101;
  background-color: #acacac;
  border-radius: 1rem;
  flex-direction: column;
  margin-top: 0rem;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: scaleY(0);
}

.navbar_menu {
  width: 100%;
  min-height: 21rem;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  display: flex;
}

.w-nav-menu {
  float: right;
  position: relative;
}

.navbar-menu-grid {
  width: 100%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  display: grid;
}

.icon {
  width: 100%;
  max-width: 13.5rem;
  position: absolute;
}

#nav-icon {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
  justify-self: center;
  opacity: 0;
  transform: scale(0.7);
}

.m-l {
  opacity: 0;
  transform: translateY(10px);
}

.boton-flecha {
  opacity: 0;
  transform: translateY(10px);
}

.action {
  opacity: 0;
  transform: translateY(10px);
}

.navbar_link {
  height: 100%;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-right: 1px solid black;
  color: #000;
  background-color: transparent;
  flex-direction: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr auto;
  grid-auto-columns: 1fr;
  align-content: end;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem 2.5rem 1rem 2.5rem;
  text-decoration: none;
  display: grid;
  position: relative;
  overflow: hidden;
}

.content-text-1_mobile {
  display: none;
}

.buton-1_mobile {
  display: none;
}

.clip {
  z-index: 10;
  flex-direction: column;
  padding-right: 1px;
  display: flex;
  position: relative;
  overflow: hidden;
  font-family: Quicksand;
  font-weight: 600;
  font-size: 1.3rem;
}

.nav_menu-action {
  z-index: 10;
  grid-column-gap: 0px;
  grid-row-gap: 16px;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  margin-top: 0.4rem;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
  padding: 0;
  display: flex;
  position: absolute;
  top: -100%;
  left: 0%;
  right: 0%;
}

.menu-bottom {
  grid-column-gap: 0px;
  grid-row-gap: 16px;
  border-radius: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 3fr 2fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  overflow: hidden;
}

.background-blur {
  background-color: #acacac;
}

.menu-cta {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-right: 1px solid black;
  color: #000;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  padding: 1rem 2.5rem;
  text-decoration: none;
  display: flex;
}

.w-inline-block {
  max-width: 100%;
}

.menu-small {
  display: flex;
  align-items: center;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  position: fixed;
  z-index: 100;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(7px);
  border-radius: 15px;
  padding: 0.75rem 0.8rem 0.55rem 0.8rem;
  gap: 1rem;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
}

.logo-small {
  height: auto;
  width: 7.5rem;
}

.b-small {
  cursor: pointer;
  height: 2.4rem;
  width: 2.4rem;
}

.linea-1 {
  width: 100%;
  height: 1px;
  background-color: black;
}

.content-casa {
  display: flex;
  align-items: center;
  font-family: Quicksand;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 2.1rem 0;
  position: relative;
}

.content-circulo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.normal {
  position: absolute;
  right: 4rem;
  font-size: 0.9rem;
}

.circulo {
  background: linear-gradient(180deg, #d4b094 0%, #ab8b71 100%);
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
}

.linea-1_mobile {
  display: none;
}

.nav-menu-grid-mobile {
  display: none;
}

.menu-action_mobile {
  display: none;
}

.casa-2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1rem 1.5rem 0 1.5rem;
}

.casa-2_content-1 {
  font-family: Quicksand;
  font-weight: 400;
  font-size: 6vh;
  line-height: 6.5vh;
  letter-spacing: 0.15rem;
}

.verde {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.casa-2_content-2 {
  font-family: Quicksand;
  font-weight: 500;
  font-size: 3.3vh;
  display: block;
}

.imagen-casa_verde {
  width: 120vh;
  height: auto;
}

.lotes {
  color: var(--VerdeClaro);
  font-size: 3vh;
  font-weight: bold;
  letter-spacing: 0rem;
}

.bold {
  font-weight: bold;
}

.left {
  padding-left: 4rem;
}

.section-casa {
  height: 100%;
}

.casa-3 {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
}

.cuadro-vidrio {
  font-family: Quicksand;
  font-weight: bold;
  border-radius: 30px;
  border: 1.5px solid #f2f2f2;
  background: rgba(203, 203, 203, 0.7);
  box-shadow: 6px -2px 20px 0px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  width: fit-content;
  height: fit-content;
  position: absolute;
  left: -9rem;
  bottom: 13%;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2vh;
  justify-content: center;
  align-items: center;
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
}

.telefono {
  position: absolute;
  left: -1rem;
  top: -1rem;
  height: auto;
  width: 3.1rem;
}

.cuadro-vidrio_tittle {
  font-size: 3.1vh;
  align-self: flex-start;
}

.cuadro-vidrio_contacto {
  display: flex;
  gap: 0.6rem;
  align-self: flex-start;
}

.cuadro-vidrio_contacto p {
  border: 0.2vh solid black;
  border-radius: 1rem;
  padding: 0.3rem 0.6rem;
  font-size: 2.1vh;
  transition: 0.6s;
}

.cuadro-vidrio_contacto p:hover {
  background-color: #0d0d0d;
  color: white;
  transition: 0.4s;
}

.cuadro-vidrio_imagenes {
  display: flex;
  padding: 0.1rem 0 0 0;
  align-self: flex-start;
}

.imagenes-pequeñas {
  width: 7vh;
  height: 7vh;
}

.imagen-pequeña_2 {
  margin-left: -0.5rem;
}

.section-2 {
  height: 100vh;
  width: 100%;
  padding: 3rem 1.5rem;
  max-width: 150rem;
  margin: auto;
  position: relative;
  display: flex;
}

.section-2_mobile {
  display: none;
}

.center {
  background-color: #d9d9d9;
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  position: relative;
}

.section-2_tittle {
  display: flex;
  align-items: center;
  font-family: Raleway;
  font-size: 7vh;
  gap: 0.8rem;
  line-height: 7vh;
  position: relative;
}

.section-2_tittle p {
  padding-left: 2vh;
}

.section-2_linea {
  background: #d4b094;
  width: 0.7vh;
  height: 7rem;
  position: absolute;
  height: 100%;
}

.section-2_texto {
  font-size: 3vh;
  font-weight: 500;
  padding-left: 2vh;
  padding-top: 0.5rem;
}

.section-2_content {
  font-family: Quicksand;
  position: absolute;
  top: 50%;
  left: 3rem;
  right: auto;
  transform: translateY(-50%);
}

.paso-tittle {
  display: flex;
  align-items: center;
  font-size: 3rem;
  line-height: 3rem;
  justify-content: space-between;
  padding-bottom: 0.8rem;
}

.paso-content {
  font-size: 1.45rem;
  font-weight: 500;
}

.mySwiper2 {
  width: 60vh;
  height: 60vh;
  position: absolute !important;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
}

.pasos {
  font-size: 18px;
  background: #fff;
  padding: 5rem 3rem;
  display: flex;
  align-items: center;
  border-radius: 5vh;
  color: #fff;
}

.tittle-pasos {
  font-family: Quicksand;
  font-size: 7vh;
  line-height: 8vh;
  width: 80%;
}

.content-pasos {
  font-family: Quicksand;
  font-size: 3.5vh;
  font-weight: 500;
}

.number-pasos {
  font-family: Gadugi;
  font-size: 8.5vh;
  font-weight: bold;
}

#paso1 {
  background-color: #393d46;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
}

#paso2 {
  background-color: #1d3e53;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
}

#paso3 {
  background-color: #4b8266;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
}

.linea-pasos_mobile {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 0.35rem;
  transform: translateX(-50%);
  background-color: white;
  bottom: 1rem;
  border-radius: 0.5rem;
}

.notificacion {
  position: fixed;
  top: 5px;
  right: 10px;
  background-color: #393d46;
  color: white;
  padding: 15px;
  border-radius: 0.5rem;
  font-family: Quicksand;
  font-weight: 600;
  display: none;
  align-items: center;
  z-index: 100;
  gap: 1rem;
  font-size: 1.05rem;
  transform: translateY(-100%);
}

.notificacion-subtittle {
  color: #b8b8b8;
  font-weight: 500;
  font-size: 0.95rem;
}

.section-3 {
  height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}

.section-3_barra-lateral {
  height: 100%;
  width: 35%;
  background-color: #272a30;
  padding: 1.2rem 2rem;
  font-family: Quicksand;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.lote {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.big-number {
  font-weight: bold;
  font-size: 12vh;
  font-family: Quicksand;
  color: #efccb1;
}

.cuarta {
  padding-top: 0rem;
}

.flex-1 {
  display: flex;
  align-items: center;
  padding-bottom: 1.2rem;
}

.flex-2 {
  display: flex;
  align-items: center;
  padding-bottom: 1.2rem;
}

.financiamientos {
  display: block;
}

.section-3_linea {
  width: 100%;
  height: 2px;
  background-color: #b7b7b7;
}

.contado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-left: 1px solid #c59d7f;
  border-top: 1px solid #b68e6f;
  border-right: 1px solid #b68e6f;
  border-bottom: 1px solid #b68e6f;
  padding: 0.8rem;
  margin-top: 1rem;
}

.contado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-left: 1px solid #cfa788;
  border-top: 1px solid #cfa788;
  border-right: 1px solid #cfa788;
  border-bottom: 1px solid #cfa788;
  padding: 0.8rem;
  margin-top: 1rem;
  font-size: 2.5vh;
}

.checkbox {
  background-color: var(--Arena);
  border: 1px solid var(--Arena);
  padding: 0.45rem 0.4rem;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.financiamiento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-left: 1px solid #868686;
  border-bottom: 1px solid rgb(134, 134, 134);
  border-right: 1px solid rgb(134, 134, 134);
  border-top: 1px solid rgb(134, 134, 134);
  padding: 0.8rem;
  margin-bottom: 1rem;
  cursor: pointer;
  font-size: 2.5vh;
}

.checkbox-desactive {
  border: 1px solid white;
  padding: 0.05rem 0.3rem;
  border-radius: 50%;
  fill-opacity: 0;
}

.botones-accion {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -1rem;
}

.botones-accion p {
  border: 2px solid white;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 0.6rem 2rem;
}

.botones-accion_apartar {
  transition: 0.5s;
  color: var(--Arena);
  cursor: pointer;
  border: 1px solid var(--Arena);
  background: transparent;
  font-family: Quicksand;
  font-weight: 500;
  font-size: 2.8vh;
  padding: 0.6rem 1.8rem;
  width: 100%;
}

.botones-accion_apartar:hover {
  background-color: var(--Arena);
  color: #272a30;
}

.text-small {
  color: #99999d;
  font-weight: 600;
  font-size: 2.1vh;
}

.text-normal {
  font-weight: 600;
  font-size: 3.2vh;
}

.amenidades {
  height: 100%;
  width: 100%;
  background-color: #272a30;
  padding: 2rem;
  font-family: Quicksand;
  color: white;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
}

.amenidades-text-small {
  color: #99999d;
  font-weight: 600;
  font-size: 2.5vh;
}

.amenidades-tittle {
  font-weight: bold;
  font-size: 8vh;
  font-family: Raleway;
  color: var(--Arena);
}

.amenidades-line {
  width: 100%;
  height: 2px;
  background-color: white;
}

.imagen-amenidades img {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
}

.amenidades ul {
  padding: 0 1rem;
  color: var(--VerdeClaro);
}

.amenidades span {
  color: white;
}

.amenidades ul li {
  padding: 1vh 0;
  font-size: 2.9vh;
  font-weight: 500;
}

.amenidades-button {
  transition: 0.5s;
  cursor: pointer;
  border: 1px solid var(--Arena);
  background: transparent;
  font-family: Quicksand;
  font-weight: 500;
  font-size: 2.7vh;
  padding: 0.6rem 1.8rem;
  width: fit-content;
  text-decoration: none;
  color: var(--Arena);
}

.amenidades-button:hover {
  background-color: var(--Arena);
  color: #272a30;
}

.amenidades-click {
  cursor: pointer;
}

.mapa-container {
  height: 100%;
  width: 64%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mapa-container svg {
  width: 64%;
  height: 100%;
}

.disponibilidad {
  font-family: Quicksand;
  font-size: 1rem;
  font-weight: 600;
  color: #b8656d;
}

#lote {
  pointer-events: none;
}

.lote2 {
  pointer-events: none;
}

#casa1 {
  cursor: pointer;
  fill: #a65a62;
  transition: 0.3s;
}

#casa1:hover {
  filter: brightness(0.92);
  transition: filter 0.3s;
}

.active {
  transition: 0.3s;
  fill: #4b8266;
  cursor: pointer;
}

.active:hover {
  filter: brightness(0.92);
  transition: filter 0.3s;
}

.active-fill {
  transition: fill 0.3s;
  fill: #efccb1;
}

.active-fill:hover {
  transition: fill 0.3s;
  filter: brightness(1);
}

.text-default {
  transition: fill 0.3s;
  fill: white;
}

.text-active {
  transition: fill 0.3s;
  fill: black;
}

.mapa {
  height: 100%;
}

.section-4 {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: block;
}

.section-4_mobile {
  display: none;
}

.section-4 img {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40%;
  height: 100%;
}

.contact-tittle {
  color: rgba(255, 255, 255, 0.663);
  text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  font-family: Raleway;
  font-size: 18.8vh;
  font-weight: 700;
  line-height: 115%; /* 172.5px */
  letter-spacing: 3px;
  z-index: 3;
}

.contact-flex {
  display: flex;
}

.formulario {
  background-color: #0e0e0e;
  height: 100%;
  width: 60%;
  position: absolute;
  z-index: 2;
  padding: 1rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 10px 0px 30px 0px rgba(0, 0, 0, 0.45);
}

.formulario input {
  background-color: transparent;
  border-bottom: 1px solid white;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 0.5rem;
  margin: 2vh 0;
  font-size: 2.8vh;
  font-family: Quicksand;
  color: white;
}

.formulario input::placeholder {
  color: white;
}

.formulario input:focus {
  outline: none;
}

select {
  background-color: transparent;
  color: white;
  font-family: Quicksand;
  font-weight: 400;
  border: none;
  padding: 0.5rem 0;
  margin: 0.8rem 0;
  font-size: 2.8vh;
}

select:focus {
  outline: none;
}

option {
  background-color: #393d46;
  font-size: 1rem;
}

textarea {
  width: 100%;
  height: 18.5vh;
  box-sizing: border-box;
  resize: none;
  background-color: transparent;
  font-family: Quicksand;
  color: white;
  padding: 0.5rem;
  margin: 2vh 0 4vh 0;
  font-size: 2.8vh;
  font-weight: 400;
}

textarea::placeholder {
  color: white;
}

button {
  font-family: Quicksand;
  font-weight: bold;
  background-color: var(--Arena);
  padding: 0.7rem 2rem;
  width: 13rem;
  border-radius: 0.5rem;
  border: none;
  font-size: 2.8vh;
  cursor: pointer;
  border: 2px solid var(--Arena);
  transition: 0.5s;
}

button:hover {
  background-color: transparent;
  color: white;
  transition: 0.3s;
}

.carros {
  position: absolute;
  height: auto;
  width: 0.4rem;
}

@media screen and (width: 1024px) {
  .section-2_tittle {
    font-size: 6vh;
    line-height: 6.5vh;
  }

  .imagen-casa_verde {
    width: 115vh;
  }

  .section-2_content {
    left: 1.5rem;
  }

  .section-2_texto {
    font-size: 3.1vh;
    width: 100%;
  }

  .swiper {
    right: 1.5rem;
  }

  .section-3_barra-lateral {
    width: 45%;
  }

  .mapa-container {
    width: 55%;
  }

  .mapa-container svg {
    width: 80%;
  }

  .amenidades {
    width: 100%;
  }

  .formulario {
    padding: 0 3rem;
  }
}

@media screen and (width: 1104px) {
  .imagen-casa_verde {
    width: 107vh;
  }

  .section-3_barra-lateral {
    width: 45%;
  }

  .section-2_texto {
    font-size: 2.6vh;
  }

  .mapa-container {
    width: 55%;
  }

  .mapa-container svg {
    width: 90%;
  }

  .section-2_tittle {
    font-size: 6vh;
    line-height: 6vh;
  }

  .contact-tittle {
    font-size: 15vh !important;
  }

  .mySwiper2 {
    width: 48vh !important;
    height: 48vh !important;
  }

  .tittle-pasos {
    font-size: 6vh !important;
    line-height: 6.4vh !important;
  }

  .content-pasos {
    font-size: 3vh !important;
  }
}

@media screen and (width: 1180px) {
  .section-3_barra-lateral {
    width: 45%;
  }

  .mapa-container {
    width: 55%;
  }

  .mapa-container svg {
    width: 85%;
  }

  .amenidades {
    width: 100%;
  }

  .formulario {
    padding: 0 3rem;
  }
}

@media screen and (width: 1194px) {
  .section-3_barra-lateral {
    width: 45%;
  }

  .mapa-container {
    width: 55%;
  }

  .mapa-container svg {
    width: 85%;
  }

  .amenidades {
    width: 100%;
  }

  .formulario {
    padding: 0 3rem;
  }
}

@media screen and (width: 1114px) {
  .section-3_barra-lateral {
    width: 45%;
  }

  .mapa-container {
    width: 55%;
  }

  .mapa-container svg {
    width: 85%;
  }

  .amenidades {
    width: 100%;
  }

  .formulario {
    padding: 0 3rem;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1194px) {
  .mySwiper2 {
    width: 55vh;
    height: 55vh;
  }

  .contact-tittle {
    font-size: 16vh;
  }

  .tittle-pasos {
    font-size: 6.5vh;
    line-height: 6.9vh;
  }

  .content-pasos {
    font-size: 3.3vh;
  }
}