@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

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

/* DECLARACION DE ESTILOS GENERALES */
:root{
  --color-primario: #75137E;
  --color-secundario: ;
  --color-tercero: ;
  --color-negro: #000;
  --color-blanco: #fff; 
}

html,
body{
	height: 100%;
	position: relative;
  overflow: hidden;
	font-size: 14px;
	/* font-family: "Montserrat", sans-serif; */
  font-family: "Inter", sans-serif;
}

/* VIDEO DE FONDO */
.sampleMovieTing{
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  object-position: center;
  object-fit: cover;
}


/* ESTILOS PARA LA ANIMACION DE LOADING DE ENTRADA */
.viewIntroLogoDesk{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  opacity: 0;
  transition: opacity .6s ease;
  /* transition: all .1s ease; */
}

/* ESTILOS PARA LA ANIMACION DE TIPEADO DE TEXTO */
.typetexto {
  /* font-size: 20px; */
  font-size: clamp(1.75rem, 1.625rem + 0.625vw, 2.375rem);
  line-height: clamp(28px, 5vw, 40px);
  font-weight: 300;
  position: relative;
  text-align: center;
  padding: 0 20px;
  margin: 25px 0;
  margin: 0;
  color: var(--color-primario);
}

.typetexto > span {
  display: inline-block;
  white-space: nowrap;
}

/* Opcional: si quieres asegurar que los spans internos no causen problemas */
.typetexto > span > span {
  display: inline;
}

.typetexto span {
  white-space: normal;
}

/* ESTILOS PARA EL MENU VERSION DESKTOP */
#header{
  position: relative;
  display: none;
}

#header .menu-mobile{
  display: none;
}

#header .menuCompleto {
  position: fixed;
  top: 0;
  left: -15%;
  width: 15%;
  height: 100vh;
  z-index: 9999;
  transition: left 0.3s ease;
}

#header .menuCompleto.despliegaMenu {
  left: -5%;
}

#header .menuHamburguerDesk {
  /* background: red; */
  width: 20px;
  height: 20px;
  position: fixed;
  left: 10px;
  top: 35px;
  z-index: 10000;
  cursor: pointer;
}


#header .menu-desktop {
  display: flex;
  height: 100vh;
  width: 100%;
}

#header .menu-desktop nav {
  width: 100%;
  height: 80%;
  margin: auto;
  position: absolute;
  top: 10%;
  left: 38%;
  opacity: 0;
}

#header .btnDespliega {
  position: absolute;
  top: 20px;
  right: -100px;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#header .btnDespliega .img-logoDesk {
  /* width: 100%;
  position: relative;
  right: -35px; */
  width: 80%;
  position: relative;
  right: -25px;
}


#header .btnDespliega .img-logoDesk::before {
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 90vh;
  background-color: var(--color-primario);
  left: -2px;
  top: 0;
}

.menuCompleto .menu-desktop .seleccionMenu{
  opacity: .8;
  color: var(--color-primario);
}
.menuCompleto .menu-desktop .marcadoresMenu{
  color: var(--color-primario);
  cursor: pointer;
}

/* Menu Hamburguer */
.menuHamburguerDesk .barraHamburguer{
  width: 24px;
  height: 2px;
  background: var(--color-primario);
  border-radius: 2px;
  position: relative;
  transition: all .2s linear;
}

.menuHamburguerDesk .barraHamburguer::before{
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primario);
  border-radius: 2px;
  position: absolute;
  top: -8px;
  left: 0;
  transition: all .3s linear;
}

.menuHamburguerDesk .barraHamburguer::after{
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primario);
  border-radius: 2px;
  position: absolute;
  bottom: -8px;
  left: 0;
  transition: all .3s linear;
}

.menuHamburguerDesk .barraHamburguer.open{
  background-color: transparent;
}
.menuHamburguerDesk .barraHamburguer.open::before{
  transform: rotate(45deg);
  transform-origin: left;
}

.menuHamburguerDesk .barraHamburguer.open::after{
  transform: rotate(-45deg);
  transform-origin: left;
  bottom: -10px;
}

/* ESTILOS... */

.mainDesarrollo {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mainDesarrollo .row{
  display: none;
  text-align: center;
}

/* ESTILOS PARA EL FORMULARIO DE INICIO DE SESION */
.contenedorFormInicio{
  /* width: 40%; */
  width: clamp(300px, 40%, 800px);
  border: 1px solid var(--color-primario);
  margin: auto;
  padding: 30px 0;
  border-radius: 40px;
}

#inicioSesion{
  display: flex;
  flex-direction: column;
  width: 65%;
  margin: auto;
}
#inicioSesion input{
  margin: 10px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-primario);
  outline: none;
}

#inicioSesion input::-webkit-autofill{
  background: transparent !important;
}

#inicioSesion label{
  margin: auto;
  position: relative;
  top: -8px;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-primario);
}

#btnSubmitInicio {
  border: 1px solid var(--color-primario);
  border-radius: 20px;
  padding: 5px 15px;
  margin: auto;
  background: transparent;
  margin-top: 30px;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--color-primario);
}

/* ESTILOS PARA BOTONERA DE MOOD HOY (vivir, invertir, miras) */
.cualMood h2{
  margin: 0;
  color: var(--color-primario);
  font-size: 45px;
  line-height: 40px;
}
.cualMood h2 br{
  display: none;
}

.cualMood .botoneraMood{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
  margin: auto;
  gap: 20px;
  margin-top: 25px;
}

.cualMood .botoneraMood button{
  background: transparent;
  border: 1px solid var(--color-primario);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-primario);
  padding: 5px 8px;
  outline: none;
  border-radius: 30px;
  text-transform: uppercase;
  margin-top: 30px;
  width: clamp(100px, 10%, 900px);
  /* width: 12%; */
  /* width: 16%; */
}

/* CUAL ES TU ESTILO */
.tuEstilo h2{
  /* text-align: center; */
  margin: 0;
  color: var(--color-primario);
  font-size: 45px;
  line-height: 40px;
}

.tuEstilo h2 br{
  display: none;
}

.tuEstilo .botoneraTuEstilo{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
  margin: auto;
  gap: 20px;
  margin-top: 25px;
}

.tuEstilo .botoneraTuEstilo button{
  background: transparent;
  border: 1px solid var(--color-primario);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-primario);
  padding: 5px 8px;
  outline: none;
  border-radius: 30px;
  text-transform: uppercase;
  margin-top: 30px;
  width: clamp(150px, 10%, 900px);
  /* width: 16%; */
}

/* CUANTOS DORMITORIOS */
.cuantosDorms h2{
  /* text-align: center; */
  margin: 0;
  color: var(--color-primario);
  font-size: 45px;
  line-height: 40px;
}

.cuantosDorms h2 br{
  display: none;
}

.cuantosDorms .botoneraDormitorios{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
  margin: auto;
  gap: 20px;
  margin-top: 25px;
}

.cuantosDorms .botoneraDormitorios button{
  background: transparent;
  border: 1px solid var(--color-primario);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-primario);
  padding: 5px 25px;
  outline: none;
  border-radius: 30px;
  text-transform: uppercase;
  margin-top: 30px;
  /* width: clamp(100px, 25%, 900px); */
  /* width: 16%; */
}




/* MAPA SVG SELECCION DE COMUNAS */
.opcionesComuna h2{
  font-size: 45px;
  margin-bottom: 0;
  color: var(--color-primario);
}
.opcionesComuna{
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: auto;
  width: 100%;
  height: 80%;
}

.opcionesComuna .containSvgComuna{
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  align-items: center;
}

.SwiperPrueba{
  /* width: 40%; */
  height: 20%;
  width: clamp(250px, 40%, 900px);
  margin: 0 25px;
}

.SwiperPrueba .swiper-slide {
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--color-blanco);
  font-size: 20px;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: 500;
}

.swiper-slide-prev, .swiper-slide-next{
  background: transparent;
  opacity: .8;
}

.swiper-slide-active{
  background: var(--color-primario) !important;
  padding: 15px;
  opacity: 1 !important;
}

.swiper-slide-prev, .swiper-slide-next, .swiper-slide-active{
  transition: all .2s ease;
  color: var(--color-blanco);
}

.swiper-slide-prev, .swiper-slide-next, .swiper-slide{
  opacity: .8;
}

.contenedorMapaSvg{
  /* width: 50%; */
  width: clamp(200px, 50%, 780px);
  display: flex;
  justify-content: end;
  align-items: center;
}

.contenedorMapaSvg svg{
  width: 70%;
  height: 70%;
}

.contenedorOpcionesComuna{
  width: 45%;
  margin-top: 45px;
}

/* BOTONERA DE OPCION DE VIVIR */
.vivirCercade{
  height: 70vh;
  justify-content: center;
  align-items: center;
}
.vivirCercade h2{
  margin: 0;
  color: var(--color-primario);
  font-size: 45px;
  line-height: 40px;
}
.vivirCercade span{
  margin: 0;
  color: var(--color-primario);
  font-size: 18px;
  margin-top: 15px;
  font-weight: 500;
}

.vivirCercade h2 br{
  display: none;
}

.botoneraVivirCercaDe{
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  display: flex;
  gap: 15px;
}

.vivirCercade .botoneraVivirCercaDe .botoneraVivir {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
  margin: auto;
  gap: 20px;
  margin-top: 25px;
}

.botoneraVivirIzquierda, .botoneraVivirDerecha{
  display: flex;
  justify-content: center;
  gap: 25px;
  width: 100%;
}


.btn-opcion-vivir.selected {
  background: var(--color-primario);
  color: #fff;
}
.btn-opcion-vivir{
  background: transparent;
  border: 1px solid var(--color-primario);
  color: var(--color-primario);
  padding: 5px 8px;
  outline: none;
  border-radius: 30px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 400;
  margin-top: 30px;
  width: clamp(100px, 150px, 300px);
  /* width: 12%; */
}

#btnContinuarVivirCerca{
  display: none;
  width: auto;
  background: transparent;
  border: 1px solid var(--color-primario);
  font-weight: 400;
  color: var(--color-primario);
  border-radius: 30px;
  margin: auto;
  margin-top: 20px;
  text-transform: uppercase;
  padding: 0 30px;
}

/* BOTONERA CUAL ES TU PRESUPUESTO */
.rangoPresupuesto h2{
  margin: 0;
  color: var(--color-primario);
  font-size: 45px;
  line-height: 40px;
}

.rangoPresupuesto h2 br{
  display: none;
}

.rangoPresupuesto .botoneraPresupuesto{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
  margin: auto;
  gap: 20px;
  margin-top: 25px;
}

.rangoPresupuesto .botoneraPresupuesto button{
  background: transparent;
  border: 1px solid var(--color-primario);
  color: var(--color-primario);
  padding: 5px 8px;
  outline: none;
  border-radius: 30px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 400;
  width: clamp(200px, 10%, 600px);
  margin-top: 30px;
  /* width: 16%; */
}


/* BOTON VEAMOS (BUSQUEDA) */
#envioRespuesta{
  opacity: 0;
  transition: .3s ease;
  background: transparent;
  border: 1px solid var(--color-primario);
  color: var(--color-primario);
  padding: 5px 8px;
  outline: none;
  border-radius: 30px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 400;
  width: auto;
  margin: auto;
}

.resumenBusqueda .typetexto{
  margin-top: 35px;
  margin-bottom: 45px;
}

.resumenBusqueda h2{
  /* text-align: center; */
  margin: 0;
  color: var(--color-primario);
  font-size: 45px;
  line-height: 40px;
}


/* BUENA BUSQUEDA -------------------------------- */
.resultadogBusqueda h2{
  /* text-align: center; */
  margin: 0;
  color: var(--color-primario);
  font-size: 45px;
  line-height: 40px;
  margin-bottom: 15px;
}


/* LOADING ---------------------------------- */
.loadingBusqueda{
  justify-content: center;
  align-items: center;
}
#loadingBusquedaImg{
  width: 45%;
  height: 50%;
  object-fit: contain;
  object-position: center;
}


/* SWIPERTINDERTING ------------------------------------------------------------- */
.swiperTinder{
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%; 
  height: 100vh;
}

.mySwiperTing .swiper-slide.swiper-slide-active {
  flex-direction: row;
}

.mySwiperTing .swiper-slide.swiper-slide .img{
  width: 50%;
}

.mySwiperTing .swiper-slide {
  flex-direction: row;
}

.mySwiperTing .swiper-slide .img, .mySwiperTing .swiper-slide .card-content{
  width: 50%;
}

.resultadogBusqueda .parrafoBusquedaTing{
  margin-bottom: 60px;
}

.swiper-pagination-bullets.swiper-pagination-horizontal{
  bottom: 0;
  width: 50%;
}
.mySwiperTing {
  /* height: 70vh; */
  height: 55vh;
  width: clamp(300px, 80%, 600px);
  overflow: visible;
}
.mySwiperTing .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.mySwiperTing .swiper-slide .img{
  background: #fff;
  height: 85%;
  border-radius: 25px;
  border: 3px solid var(--color-primario);
  margin-right: 25px;
}
.mySwiperTing .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.mySwiperTing .swiper-slide-active{
  padding: 0;
  background: transparent !important;
}
.card-content {
  width: 100%;
  background: transparent;
  color: #333;
  text-align: left;
}
.card-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}
.card-description {
  font-size: 18px;
  color: #666;
  line-height: 1.6;
}
/* Estilizar las flechas de navegacion */
.mySwiperTing .swiper-button-next,
.mySwiperTing .swiper-button-prev {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
/* Flecha izquierda - No me gusta */
.mySwiperTing .swiper-button-prev {
  background: var(--color-primario);
}
.mySwiperTing .swiper-button-prev::after {
  content: '✕';
  color: var(--color-blanco);
}
/* Flecha derecha - Me gusta */
.mySwiperTing .swiper-button-next {
  background: var(--color-primario);
}
.mySwiperTing .swiper-button-next::after {
  content: '♥';
  color: white;
}
/* Paginacion */
.mySwiperTing .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: var(--color-primario);
  opacity: 0.5;
}
.mySwiperTing .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--color-primario);
}
.mySwiperTing .button-next {
  height: 25%;
  width: 15%;
  position: absolute;
  right: 48%;
  bottom: 0;
}
.mySwiperTing .button-prev {
  height: 25%;
  width: 15%;
  position: absolute;
  bottom: 0;
  left: -30px;
}

.swiperBeforeTing {
  width: 50%;
  /* width: 45%; */
  margin: auto;
}
.swiperBeforeTingS {
  width: 50%;
}
.swiperBeforeTingS .swiper-slide {
  padding: 0;
  border-radius: 10px;
  border: 3px solid var(--color-primario);
}
.swiperBeforeTingS .swiper-slide .img-card-busqueda {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 10px;
}
.swiperBeforeTingS .swiper-slide .titulo-card-busqueda {
  width: 100%;
  background: var(--color-primario);
  padding: 10px;
}
.swiperBeforeTingS .swiper-slide .titulo-card-busqueda p{
  margin: 0;
}

/* DEPTOS QUE TE GUSTARON (COMPARTIR) */
.deptosGustos{
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 70%;
}

.deptosGustos h2{
  margin: 0;
  color: var(--color-primario);
  font-size: 44px;
  line-height: 40px;
  margin-bottom: 0px;
  font-weight: 300;
}

.deptosGustos .botones-compartir{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.deptosGustos .botones-compartir button{
  transition: .3s ease;
  background: transparent;
  border: 1px solid var(--color-primario);
  color: var(--color-primario);
  padding: 5px 8px;
  outline: none;
  border-radius: 30px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 400;
  width: auto;
}

.cuadroCompartir {
  background: var(--color-primario);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}
.proyectosCompartir {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.circle {
  width: 24px;
  height: 24px;
  background: var(--color-blanco);
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.proyectosCompartir.selected .circle {
  background: white;
  position: relative;
}
.proyectosCompartir.selected .circle::after {
  content: '✓';
  color: var(--color-primario);
  font-size: 30px;
  font-weight: bold;
}
.proyectosCompartir .proyectos-name {
  flex: 1;
  font-size: 16px;
}

.deptosGustos .flechaCompartir {
  width: 50px;
  height: 50px;
  position: absolute;
  right: -25px;
  top: 30%;
  background: blue;
  border-radius: 100px;
}

/* COMO CONTACTAR -------------- */
.contactoEjecutivo{
  text-align: center;
  height: 40vh;
  justify-content: center;
  align-items: center;
}

.content-ewt{
  gap: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

.contactoEjecutivo h2{
  margin: 0;
  color: var(--color-primario);
  font-size: 45px;
  line-height: 40px;
}

.contactoEjecutivo .content-ewt button{
  transition: .3s ease;
  background: transparent;
  border: 1px solid var(--color-primario);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-primario);
  padding: 5px 8px;
  outline: none;
  border-radius: 30px;
  text-transform: uppercase;
  width: 15%;
}

/* OK CONTACTO ------------------------------- */
.okContacto{
  height: 50%;
  justify-content: center;
  align-items: center;
}
.okContacto .btn-otraBusqueda{
  transition: .3s ease;
  background: transparent;
  border: 1px solid var(--color-primario);
  color: var(--color-primario);
  padding: 5px 8px;
  outline: none;
  border-radius: 30px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 400;
  width: auto;
}

/* FINALIZAR SESION */
.finalizarSesion{
  display: none;
  background: rgba(255, 255, 255, .6);
  width: 70%;
  height: 80vh;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contenedorFavoritos {
  width: 100%;
  position: relative;
  padding: 20px 0;
  /* padding: 40px 0; */
}

.swiperFavoritos {
  width: 20%;
  height: 100%;
  margin: 0 auto;
}

.swiperFavoritos .swiper-slide {
  padding: 0;
  border-radius: 10px;
  border: 3px solid var(--color-primario);
  background: white;
  overflow: hidden;
}

.swiperFavoritos .swiper-slide .img-card-favoritos {
  flex: 1;
  background: #fff;
  padding: 10px;
  height: 85%;
}

.swiperFavoritos .swiper-slide .img-card-favoritos img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* o cover según prefieras */
}

.swiperFavoritos .swiper-slide .titulo-card-favoritos {
  width: 100%;
  background: var(--color-primario);
  padding: 10px;
}

.finalizarSesion .btn-salir button{
  transition: .3s ease;
  background: transparent;
  border: 1px solid var(--color-primario);
  color: var(--color-primario);
  padding: 0px 40px;
  outline: none;
  border-radius: 30px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 400;
}

#texto-final {
  position: relative;
  text-align: center;
  padding: 0 20px;
  margin: 25px 0;
  margin: 0;
  color: var(--color-primario);
  font-size: 18px;
  line-height: 21px;
  margin-bottom: 20px;
}

.loadingLayer img{
  width: 128px;
  height: auto;
}

.loadingLayer{
  display: none;
  position: fixed;
  top: 20vh;
  left: calc( 20vw - 64px );
  height: 60vh;
  width: 60vh;
  text-align: center;
}