body {
  margin: 0;
  font-family:Arial, Helvetica, sans-serif;
  }
/*
pasador de diapositivas 
*/

.slideshow-container {position: relative;margin: auto;overflow: hidden;}

.mySlides {position: absolute;top: 0;left: 0;right: 0;bottom: 0;display: none;}

.fade {animation-name: fade;animation-duration: 1s;}

@keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.next {right: 0;border-radius: 3px 0 0 3px;}

.prev:hover, .next:hover {background-color: rgba(0,0,0,0.8);}

.close {cursor: pointer;position: absolute;top: 0;right: 0;padding: 16px 20px;color: white;font-weight: bold;font-size: 30px;}

.close:hover {background-color: rgba(255,0,0,0.8);}

.thumbnail-container {text-align: center;margin-top: 20px;}

.thumbnail {width: 100px;height: 100px;object-fit: cover;margin: 0 5px;cursor: pointer;opacity: 0.6;}

.thumbnail:hover {opacity: 1;}



/*Fin pasador de diapositivas */
.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  width: 96vw;
  margin: 0;
  padding: 5px 0 5px 0; 
  justify-content: stretch; 
  }
.container {
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(96vw, 1fr));
  background-color: #ffffff;             
}
.header {
  display: grid;        
  grid-column: 1/4;
  width: 96vw;
  margin-left: 2vw;
  margin-right: 2vw; 
  background-color: #ffffff;     
}
.navbar {
  background-color: #ff7261;
  overflow: hidden;
  display: grid;
  grid-column: 1/4;    
}
.navbar-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:#ff7261;
  display: flex;  
  flex-wrap: wrap;  
  align-items: center;  
}
.navbar-list li {
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
  flex-grow: 1;
  margin: 0;
}
.navbar-list a {
  font-size: 22px;
  display: block;
  color: white;
  text-align: center;  
  text-decoration: none;
}
.navbar-list a:hover {
  transition: background-color 1.1s ease;
  background-color: #ffb5ac;    
  color: black;
  border-radius: 10px;
  overflow: hidden;
}
.navbar-toggle {
  display: none;
  cursor: pointer;
  padding: 10px;
}
.bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px 0;
}
.boton {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  padding: 10px 20px;
  border: 2px solid #ccc;
  border-radius: 20px; /* Ajusta el valor según el redondeo deseado */
  background-color: #ffb5ac; /* Color verde claro */
  color: #fff; /* Texto en color blanco para contrastar */
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}
.boton1{
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 20px; /* Ajusta el valor según el redondeo deseado */
  background-color: #d10404; /* Color verde claro */
  color: #fff; /* Texto en color blanco para contrastar */
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}
.navliresponseve{
  display: none;  
}
/* Boton desplegable */
.dropdown {
  display: none;
  float: left;
  overflow: hidden;
}
.dropdown .dropbtn {
  font-size: 22px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.nav-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.nav-content a {
  float: none;
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown:hover .nav-content {
  display: block;
  background-color: #ff7261;
}
.grafica{
  align-items: center;
  margin-left: 3vw;
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
  width: 82vw;
}
#searchTerm{
  padding: 8px 15px 8px 10px; 
  border-radius: 16px; 
  width: 70%; 
  font-size: 16px; 
  border: 1px solid #ccc;
}
#botonsearchTerm{
  padding: 8px 15px 8px 10px; 
  border-radius: 16px; 
  font-size: 16px; 
  border: 2px solid #ccc; 
  background-color: #ffb5ac; 
  color: #ffff; 
  font-family: Arial, Helvetica, sans-serif;
}
.baners{
  display: grid;          
  grid-column: 1/4;
  width: 96vw;
  margin-left: 2vw;
  margin-right: 2vw;    
  animation: fade 3s; /* La animación dura 4 segundos y se repite infinitamente */    
}
.baners img{
  width: 100%;  
}
@keyframes fade {
  0%, 100% {
      opacity: 0; /* La imagen está invisible al principio y al final */
  }
  50% {
      opacity: 1; /* La imagen está completamente visible en la mitad de la animación */
  }
}

/*barra de carga */
.loader-wrapper {
  position: fixed;
  top: 0;  
  width: 96vw;  
  margin-right: 2vw; 
  height: 100%;
  background-color: #f1f1f1;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loader {
  width: 96vw;
  margin-left: 2vw;
  margin-right: 2vw; 
  height: 55px;
  background-color: #ff7261;
}

.progress-text {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}

/* Ocultar todo el contenido de la página inicialmente */
body.hide {
  display: none;
}

/* Mostrar la barra de carga */
.loader-wrapper:not(:hover) .loader {
  display: block;
}
/* Estilo de la ventana modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 30px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;  
  background-color:#000000
}
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 960px;
  color: #ffffff;
  text-align: justify;
}
.close {
  color: #fff;
  position: absolute;
  top: 15px;
  right: 35px;
  font-size: 40px;
  font-weight: bold;
}
.close:hover,.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}
.modal-content img {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 800px;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
.next {right: 0;border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {background-color: rgba(110, 255, 14, 0.952);}
.thumbnail-container {text-align: center;margin-top: 10px;}
.thumbnail {width: 60px;height: 60px;object-fit: cover;margin: 0 5px;cursor: pointer;opacity: 0.6;}
.thumbnail:hover {opacity: 1;}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  width: 71px;
  height: 100%;
  background: #fff;
  padding: 8px 16px;
  transition: var(--transition);
}
.sidebar.expand {
  width: 250px;
  transition: var(--transition);
}
.theme-wrapper {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  height: 60px;
  width: 250px;
  left: 0;
  padding: 8px 16px;
}
.theme-wrapper .theme-icon {
  font-size: 20px;
  color: #000;
  display: none;
  transition: var(--transition);
}
.sidebar.expand .theme-wrapper .theme-icon {
  display: block;
}
.theme-wrapper p {
  font-size: 16px;
  color: #000;
  font-weight: 400;
  display: none;
  transition: var(--transition);
}
.sidebar.expand .theme-wrapper p {
  display: block;
}
.theme-wrapper .theme-btn {
  width: 40px;
  height: 20px;
  background: #e2e2e2;
  border-radius: 30px;
  position: relative;
}
.theme-wrapper .theme-btn .theme-ball {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #000;
  border-radius: 50%;
  top: 2px;
  left: 3px;
}
.servicios{
  background-color: #ffffff;
  list-style: none;  
}
.servicios li{  
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 30px;
}
.tooltip {
  position: relative;
  cursor: pointer;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
#propiedades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  
  width: 93vw;
  margin-left: 2vw;
  margin-right: 2vw;
  padding-left: 3vw;
  background-color: #C0C0C0;
} 
.insertar{
  width: 50vw;
  background-color: #c4e5f7;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 20px;
}
.insertar1{
  background-color: #ffcfe1; 
  list-style: none; 
}
.insertar1 li{
  margin-bottom: 10px;
}
.tarjeta{   
  font-family: Arial, Helvetica, sans-serif; 
  background-color: #ffffff;
  width: 90%;
  margin-right: 10px;
  margin-top: 30px;      
  padding: 0 0 5% 0;
  transition: background-color 0.3s ease; /* Transición suave para suavizar el efecto */
  border: 1px solid #ccc; /* Borde del div */
  border-radius: 15px; /* Radio de curvatura de las esquinas */  
}
.tarjeta:hover{  
  background-color: #ffb5ac; /* Color de resaltado cuando se pasa el cursor sobre el contenedor */ 
}
.imgtarjeta{
  width: 100%;
  margin-left: 0;
  margin-top: 0;
}
.video-container {
  width: 80%;
  height: auto;
  overflow: hidden;  
}
.video-container iframe {
  width: 100%; /* Distribuir los iframes */
  height: auto;
  border: none;
  display: none; /* Ocultar los iframes inicialmente */
}
#Lista{ 
  margin-top: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 0; 
  list-style: none;
  background-color: #ffb5ac;
}
#miLista{  
  list-style: none;
}
#miLista li{
margin-bottom: 5px;
}
#mapa1{
  display: grid;
  grid-column: 1/4;    
  width: 96vw;
  margin-left: 2vw;
  margin-right: 2vw;
}
.footer{
  display: grid;
  grid-column: 1/4;  
  width: 96vw;
  margin-left: 2vw;
  margin-right: 2vw;
  background-color:  #ff7261;
}
#whatsapp{
  position:fixed;  
  width:60px;
  height:60px;
  line-height: 63px;
  bottom:15vh;
  right:5vw;
  background:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:35px;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
  z-index:100;
  transition: all 300ms ease;
}
#whatsapp:hover{
  background: #20ba5a;
}
.listapie{
  font-family: Arial, Helvetica, sans-serif;
  width: 80%;
  height: 50px;
  margin: 20px;
  color: #FFF;
  list-style: none;
  display: flex;
  justify-content: space-between; 
  align-items: center;
}

/* MOBILE */
@media only screen and (max-width: 978px){
  #propiedades {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  
    width: 93vw;
    margin-left: 2vw;
    margin-right: 2vw;
    background-color: #C0C0C0;
  } 
  .tarjeta{  
    background-color: #ffffff;
    width: 40vw;    
    margin-top: 20px;      
    padding: 10px 10px 10px 10px;  
  } 
  #searchTerm{     
    width: 50%;
  }   
}
@media only screen and (min-width: 320px) and (max-width: 768px){
  .navbar {  
    display: flex;      
    flex-direction: column;
    width: 92vw;
    margin-left: 2vw;
    margin-right: 2vw;       
    background-color: #ff7261; 
}

.navbar-list {
    display: none;    
    flex-direction: column;
    width: 92vw;                 
    position: absolute;
    top: 55px; /* ajusta según tu diseño */          
    background-color: #ff7261;
    z-index: 1;
}
.navbar-list.show {
    display: flex;
}
.navbar-list a {
    text-align: left;
}
.navbar-toggle {
    display: block;
}
.baners{
  display: grid;
  grid-template-columns: repeat(1, 1fr);  
  width: 94vw;
  margin-left: 2vw;
  margin-right: 2vw;  
  animation: fade 3s; /* La animación dura 4 segundos y se repite infinitamente */    
}
.baners img{
  width: 98%;
  padding-left: 2%;  
}
#propiedades {
  display: flex;
  flex-direction: column;    
  width: 90vw;
  margin-left: 2vw;
  margin-right: 2vw;  
  background-color: #ffffff;  
} 
.tarjeta{  
  background-color: #ffffff;
  width: 90vw;    
  margin-top: 20px; 
  margin-left: 0;     
  padding: 0; 
  border-radius: 0;
  border: 0;
}
.thumbnail-container {
    display: none;
} 
.modal-content {
    width: 90%;
    background-color: #ffffff;
    color: #000;   
  }
.modal-content img { 
        width: 100%;    
  }
  .close {
    top: 5px;
    right: 25px;    
  }
.pie {
    display: grid;
    grid-column: 1/2;       
    background-color: #ff7261;  
    width: 96vw;
    margin-left: 2vw;
    margin-right: 2vw;    
}
.listapie{
  list-style: none;
    display: flex;
    flex-direction:row;
    }
.dropdown{
  display: none;
}
    }