* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin:0 ;
	padding:0 ;
}
/*Fondo de la pagina */

body {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(46, 200, 185, 0.2)), url('prueba1.jpg');
  background-size: cover; /* Ajusta la imagen de fondo para cubrir todo el cuerpo */
  background-repeat: no-repeat; /* Evita que la imagen de fondo se repita */
  background-attachment: fixed; /* Fija la imagen de fondo para que no se desplace con el contenido */
  background-color: rgb(0, 0, 0);
  margin: auto;
  width: auto;
  
  
}


.text-centerTITULOS{
	text-align:center;
    font-family: 'Courier New', Courier, monospace;
}

.wrapp1 {
  display: flex;
  justify-content: center; /* Centra horizontalmente los elementos en el contenedor */
  align-items: center; /* Centra verticalmente los elementos en el contenedor */
  font-size: 20px;
}

/* Estilos adicionales para hacerlo responsive */
@media (max-width: 768px) {
  .wrapp1 {
      font-size: 16px; /* Reduce el tamaño del texto en dispositivos más pequeños */
  }
}

@media (max-width: 480px) {
  .wrapp1 {
      font-size: 14px; /* Reduce aún más el tamaño del texto en dispositivos extra pequeños */
  }
}



header {
  width: 100%;
  height: auto; /* Cambiado a auto para adaptarse al contenido */
  padding: 20px 0;
  font-family: 'Courier New', Courier, monospace;
  background: rgba(185, 37, 37, 0); /* Fondo 100% transparente (completamente transparente) */
  overflow: hidden;
}

/* Estilos para el texto del encabezado */
header h1 {
  font-size: 2em; /* Tamaño de fuente inicial */
}

/* Media query para pantallas más pequeñas */
@media screen and (max-width: 768px) {
  header h1 {
      font-size: 1.5em; /* Tamaño de fuente más pequeño para pantallas más pequeñas */
  }
}

nav ul {
    list-style: none;
    display: flex;
    gap: 10px; /* Espacio entre los elementos */
}

nav li {
    margin: 0;
    padding: 0;
}

nav li a {
    text-decoration: none;
}


nav img {
    max-width: 2cm; /* Establece el ancho máximo de la imagen a 3 centímetros */
    max-height: 1.6cm; /* Establece la altura máxima de la imagen a 3 centímetros */
}



.wrapp {
  max-width: 1800px;
  width: 90%;
  margin: auto;
  margin-top: 0; /* Elimina el margen superior */
  overflow: hidden;
}

/* Media query para pantallas más pequeñas */
@media screen and (max-width: 768px) {
  .wrapp {
      width: 95%; /* Reducir el ancho para pantallas más pequeñas */
      max-width: none; /* Eliminar el ancho máximo para que el contenedor se ajuste completamente */
  }
}



nav {
	float: right;
}

nav ul li {
	display: inline-block;
	margin:0px 5px;
}


/*Color botones*/
nav ul li a {
	display: block;
	background: rgba(88, 66, 66, 0); /* Fondo 100% transparente (completamente transparente) */
	color: #657979;
	padding:10px 20px;
	text-decoration: none;
	border-radius:3px;
	transition:all 300ms ease;
}

nav ul li a:hover {
	color: #000000;
  background-color: rgba(0, 255, 229, 0.2); /* Establece el color de fondo final */
}


 /* Estilo para el enlace seleccionado o en la página actual */
 #menu a.current {
  color: #000000; /* Cambia el color del texto */
  background-color: rgba(0, 255, 229, 0.3); /* Establece el color de fondo final */

}

#menu li a {
  display: flex;
  align-items: center;
}


#menu li:last-child a {
  background-color: #2ec8b9;
  color: #fff;
  padding: 10px;
  border-radius: 50%;
}


.mensaje {
  background: #2ec8b9;
  padding: 20px;
  font-family: Qwigley;
  color: #fff;
  text-align: center;
  margin: 20px 0;
  border-radius: 5px;
  font-size: 25px;


}

.bienvenido {
  background: #2ec8b9;
    padding: 20px;
    font-family: Qwigley;
    color: #ffffff;
    text-align: center;
    margin: 20px 0;
    border-radius: 5px;
    font-size: 25px;
    

  }   


.image-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Espacio entre las imágenes */
}

.image-list img {
    max-width: 100%; /* Asegura que las imágenes no excedan su tamaño original */
}

/*imagenes*/

  .image-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .image {
    width: 30%; /* Ajusta el ancho según tus preferencias */
  }


  p {
	line-height: 1.5; /* Ajusta este valor para el interlineado deseado */
	text-align: justify;
}

.resultado {
    font-family: 'Open Sans', sans-serif; /* Ejemplo de una fuente diferente */
    font-size: 20px; /* Tamaño de fuente más grande */
    color: #ffffff; /* Color de fuente naranja */
    text-transform: uppercase; /* Texto en mayúsculas */
}

.resultado1 {
    font-family: Qwigley; /* Ejemplo de una fuente diferente */
    font-size: 40px; /* Tamaño de fuente más grande */
    color: #ffffff; /* Color de fuente naranja */
    font-weight: bold; /* Texto en negrita */
    text-transform: uppercase; /* Texto en mayúsculas */
}

.image-container {
  display: flex;
  flex-wrap: wrap; /* Permite que las imágenes se envuelvan a una nueva línea si no caben en una sola línea */
  justify-content: center; /* Centra las imágenes horizontalmente */
  gap: 10px; /* Espacio entre las imágenes */
}

.image-container img {
  max-width: 100%; /* Asegura que las imágenes no excedan su tamaño original */
}

/* Aplica estilos específicos para pantallas pequeñas (teléfonos) */
@media screen and (max-width: 768px) {
  .image {
      width: 100%; /* En pantallas pequeñas, las imágenes ocuparán el 100% del ancho disponible */
  }
}


/*prueba*/
.text-center{
	text-align:center;
}
.fondo-menu .txt{
  font-weight: 300;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
  color: #C5AA75;
	max-width:628px;
	margin:auto;
}
/*cuadro imagen*/
.margen-top-xsmall{
	margin-top:25px !important;
}
.margen-top-small{
	margin-top:50px !important;
}
.margen-top-big{
	margin-top:100px !important;
}





/**/
.txt-4{
  font-size: 14px;
  line-height: 24px;
}



.margin-center{
	margin:auto;
}



.fondo-blanco{
	background-color: #F6F5F0;
  padding: 25px;
}
.color-negro{

	color:#141212;
}
.margin-right-reverse{
  position: absolute;
  top: 35px;
  margin-left: -56px;
}
.margin-left-reverse{
  position: absolute;
  top: 165px;
  margin-right:0px;
	width: 137%;
}
.fondo-cafe{
	background-color:#C5AA75;
}
.texto-blanco{
	color:#F6F5F0;
}
.padding{
	padding:40px;
}



/**/

.fondo-cuadros{
	background-image:url(dec4.jpg);
	background-repeat:no-repeat;
	background-size:100% auto;
}
.cuadros{
	max-width:462px;
	width:100%;
	padding: 16px;
}
.txt-8{
	font-family: Qwigley;
	font-size: 44px;
  line-height: 55px;
  text-align: center;
  color: #8c53c0;;
}
.cuadros span{
	padding: 0px 3px;
}
.full{width:100%;}
.padding-horizontal-small {
    padding: 34px 0px;
}
.fondo-blanco .txt-2 span{
	margin-left:25px;
}


.float-full{
	float:left;
	width:100%;
}


@media (min-width: 320px) and (max-width: 545px) {

  .fondo-imagen{
    padding:25px 0px !important;
  }
  

  .fondo-cuadros{
    background-size: cover;
    padding: 50px 0px;
    background-position: center;
  }
  
.regular .mobile{display:block;}
.regular .desktop{display:none;}
.text-slide{top:15%;}
.text-slide .img{max-width:100px;}
.text-slide h2{font-size:24px;padding:0px 15px;}
.text-slide p{padding:0px 15px;}
.text-slide .btn{width: 50%;}
.eventos .linea{
	width:170px;




}






	/*fondo*/
	.fondo-cuadros{
		background-image:url(SP.png);
		background-size: auto 100%;
		padding:30px 10px;
		background-position:center;
}
	.fondo-cuadros .fondo-blanco {
    padding: 10px;
    margin-bottom: 0px;
  }
	.btn--big{
		width:95%;
	}
	.paso1 .txt-2,.paso2 .txt-2,.paso3 .txt-2{
		text-align:center;
	}
	.margin-left-reverse{
		width:100%;
	}
	.btn--secondary, input[type="submit"].btn{
		font-size:16px;
		height:60px;
		line-height:58px;	
	}
	

}





/* Estilos específicos para el pie de página */
footer {
   background: rgba(22, 11, 11, 0); /* Fondo 100% transparente (completamente transparente) */
    color: #000000;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    padding: 20px 0;
    max-width: 1800px;
    width: 90%;
    margin: auto;
    font-size: 20px;
}

footer .divider {
    width: 100%; /* Ancho de la línea divisoria */
    height: 90px; /* Grosor de la línea divisoria */
    background-color: #2ec8b9; /* Color de la línea divisoria */
    margin: 10px 0; /* Espaciado superior e inferior de la línea divisoria */
    border-radius: 5px;
    position: relative; /* Agrega posición relativa al contenedor */
    display: flex; /* Utiliza flexbox para centrar elementos */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
}

footer .divider .fas {
    color: #fff; /* Cambia el color del icono */
    font-size: 24px; /* Cambia el tamaño del icono */
    margin: 0 10px; /* Espacio entre el icono y otros elementos (ajusta según sea necesario) */
}




.colorful-content {
	padding: 20px;
	border-radius:15px;
	transition: background-color 2s ease-in-out;
}
.colorful-content1 {
	padding: 20px;
	border-radius:15px;
	transition: background-color 2s ease-in-out;
}

.colorful-content2 {
	padding: 20px;
	border-radius:15px;
	transition: background-color 2s ease-in-out;
}








 



.msn {
    color: black; /* Cambia el color del texto a negro */
}




@media (max-width: 768px) {
    #menu {
        display: none;
    }
    .menu-icon {
        display: block;
    }
}




/*seccion comentarios*/

 


  
  
  /* Estilos para la sección de comentarios */
  
  
  
  .cita-container {
    
      max-width: 800px; /* Ancho máximo del cuadro */
      padding: 20px; /* Espaciado interno */
      border-radius: 10px; /* Bordes redondeados */
     
  }

  
  /* Estilos generales para los botones */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #000000; /* Cambia el color del borde */
  border-radius: 4px;
  background-color: #2ec8b9; /* Cambia el color de fondo */
  color: #fff; /* Cambia el color del texto */
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s;
}

.btn:hover {
  background-color: #000000; /* Cambia el color de fondo al pasar el ratón */
  border-color: #2ec8b9; /* Cambia el color del borde al pasar el ratón */
  color: #fff; /* Cambia el color del texto al pasar el ratón */
}

/* Estilos específicos para el botón de modificar */
.btn-modificar {
  margin-right: 10px; /* Ajusta el espacio entre el botón y el siguiente elemento */
}

/* Estilos específicos para el botón de imprimir cita */
.btn-imprimir {
  background-color: #c82eb6; /* Cambia el color de fondo */
  border-color: #000000; /* Cambia el color del borde */
}

/* Estilos específicos para el botón de imprimir cita */
.btn-eliminar {
  background-color: #be2020; /* Cambia el color de fondo */
  border-color: #000000; /* Cambia el color del borde */
}







.txt-titulo {
  color: #141212;
  font-family: 'Times New Roman', Times, serif;
  letter-spacing: 2px; /* Puedes ajustar el valor según tus preferencias */
  
}





.contenedor {
  display: flex;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
}

.left-section {
  width: 30%;
  height: 100vh;/* La altura será igual al 100% del tamaño de la ventana gráfica */
  padding-left: 5mm; /* Agrega 5 milímetros de espacio interno al borde derecho */
  background-color: #ffffff ; /* Color de fondo para la columna izquierda */
  border: 3px solid #000000; /* Establece un borde sólido de 2 píxeles con color #2ec8ae */
  border-radius: 5px;
}



.right-section {
  width: 65%;
  overflow-y: auto; /* Agrega una barra de desplazamiento vertical si es necesario */
  background-color: #ffffff; /* Color de fondo para la columna derecha */
  height: 100vh;/* La altura será igual al 100% del tamaño de la ventana gráfica */
  /* Agregar un borde de color */
  border: 3px solid #000000; /* Establece un borde sólido de 2 píxeles con color #2ec8ae */
border-radius: 5px;
}


.btn-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}




@media screen and (max-width: 768px) {
  /* Estilos para pantallas más pequeñas */

  .left-section, .right-section {
    width: 100%; /* Establece el ancho completo para ambas secciones */
  }

  .fondo-imagen {
    padding: 25px 0px !important; /* Ajusta el relleno superior e inferior del fondo de imagen */
  }

  .fondo-cuadros {
    background-size: cover; /* Ajusta el tamaño del fondo de cuadros */
    padding: 50px 0px; /* Ajusta el relleno superior e inferior del fondo de cuadros */
    background-position: center; /* Ajusta la posición del fondo de cuadros */
  }

  .left-section {
    order: 1; /* Cambia el orden para que aparezca primero */
    margin-bottom: 20px; /* Agrega margen inferior para separarlo del right-section */
  }

  .right-section {
    order: 2; /* Cambia el orden para que aparezca después */
  }

  .left-section ul {
    display: block; /* Cambia a un diseño de lista vertical */
  }

  .contenido-informacion {
    display: none; /* Oculta el contenido de información */
    margin-top: 20px; /* Añade margen superior al contenido de información */
  }

  .perfil-info {
    text-align: center; /* Centra el perfil de información */
  }
}



/* Estilos generales para computadoras */
/* Tus estilos CSS existentes para computadoras aquí */

/* Estilos para el iPhone Mini (400 x 915) */
@media only screen 
    and (max-device-width: 400px) 
    and (max-device-height: 915px) 
    and (-webkit-min-device-pixel-ratio: 2) {
    
    /* Estilos específicos para el iPhone Mini */
    .informacion-arriba,
    .informacion-abajo {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    .left-section {
        width: 90%;
        margin-bottom: 20px;
    }

    .right-section {
        width: 90%;
    }
}

.contenido-informacion ul {
  list-style-type: none; /* Elimina las viñetas de la lista */
  padding-left: 0; /* Elimina el relleno izquierdo de la lista */
}

.contenido-informacion ul li {
  margin-bottom: 0.5cm; /* Reducir el margen inferior a 0.5cm */
}
.contenido-informacion {
  padding-left: 5mm; /* Agrega 5 milímetros de espacio al borde derecho */
}




/* Estilos para el left section */
.left-section ul {
  list-style-type: none; /* Elimina las viñetas de la lista */
  padding-left: 0; /* Elimina el relleno izquierdo de la lista */
}

.left-section ul li {
  margin-bottom: 5mm; /* Agrega 5 milímetros de margen inferior a cada elemento de la lista */
}



/* Estilos para los enlaces de la lista */
.left-section ul li a {
  display: block; /* Convertir los enlaces en bloques para que ocupen todo el ancho disponible */
  width: 90%; /* Establecer el ancho del botón al 100% del contenedor .left-section */
  padding: 12px 16px; /* Aumentar el relleno interno para aumentar la altura del botón */
  margin-bottom: 5px; /* Agregar un pequeño margen inferior entre los enlaces */
  text-decoration: none; /* Eliminar el subrayado predeterminado */
  color: #000000; /* Color del texto */
  background-color: #2ec8b9; /* Color de fondo del botón */
  border-radius: 5px; /* Agregar bordes redondeados */
  transition: background-color 0.3s ease; /* Agregar una transición suave al cambiar el color de fondo */
}

/* Estilos para los enlaces cuando se pasan sobre ellos */
.left-section ul li a:hover {
  background-color: #636566; /* Cambiar el color de fondo al pasar el mouse sobre el botón */
}



/* Estilos para el modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-contenido {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 5px;
  width: 50%;
  text-align: center;
  position: relative;
}

.cerrar {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  cursor: pointer;
}

/* Estilos para el botón que abre el modal */
.btn-eliminar {
  cursor: pointer;
}


/* Estilos para los botones dentro del modal */
.modal-contenido .btn-eliminar {
  padding: 10px 20px; /* Cambia el tamaño del botón según tus necesidades */
  background-color: #bb403e; /* Cambia el color de fondo del botón */
  color: #fff; /* Cambia el color del texto del botón */
  border: none; /* Elimina el borde del botón */
  border-radius: 4px; /* Agrega esquinas redondeadas al botón */
  margin: 5px; /* Agrega margen entre los botones */
  font-size: 0.9em; /* Cambia el tamaño de fuente del botón */
  text-decoration: none;
}

/* Estilos para los botones dentro del modal */
.modal-contenido .btn-cancelar {
  padding: 10px 20px; /* Cambia el tamaño del botón según tus necesidades */
  background-color: #190209; /* Cambia el color de fondo del botón */
  color: #fff; /* Cambia el color del texto del botón */
  border: none; /* Elimina el borde del botón */
  border-radius: 4px; /* Agrega esquinas redondeadas al botón */
  margin: 5px; /* Agrega margen entre los botones */
  font-size: 0.9em; /* Cambia el tamaño de fuente del botón */
  text-decoration: none;
}



@media (min-width: 857px) and (max-width: 1170px) {
 

    .fondo-imagen{
      padding:25px 0px !important;
    }
    

    .fondo-cuadros{
      background-size: cover;
      padding: 50px 0px;
      background-position: center;
    }

  }
  

 
/* Estilos para la línea HR */
hr {
  border: 0; /* Elimina el borde predeterminado */
  height: 1px; /* Grosor de la línea */
  background-color: #000000; /* Color de la línea */
  margin: 20px 0; /* Espacio alrededor de la línea */
  width: 98%; /* Hacer la línea 100% del ancho del contenedor */
  box-sizing: border-box; /* Incluye el ancho del padding y del borde en el cálculo del ancho */
}


/* Estilos para pantallas más pequeñas (menos de 600px de ancho) */
@media screen and (max-width: 600px) {
  table {
      border: 0;
  }

  table thead {
      display: none;
  }

  table tr {
      border-bottom: 2px solid #ddd;
      display: block;
      margin-bottom: 10px;
  }

  table td {
      display: block;
      text-align: right;
      font-size: 13px;
  }

  table td::before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
  }
}



.whatsapp-icon {
  position: fixed;
  bottom: 30px;
  right: 10px;
  font-size: 4rem; /* Tamaño del ícono */
  color: green; /* Color del ícono */
}


/* Estilos para la ventana emergente */
#ventana-emergente {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5vw; /* Utilizamos unidades vw para un padding relativo al ancho de la ventana */
  color: white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  border-radius: 5px;
  z-index: 9999;
  width: 90%; /* Utilizamos un ancho relativo */
  max-width: 600px; /* Ancho máximo en píxeles */
  overflow: auto; /* Agregar barra de desplazamiento si es necesario */
}

/* Estilos para el botón de cierre */
.close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
  color: white;
}

/* Estilos para el contenido dentro de la ventana emergente (por ejemplo, un formulario) */
#ventana-emergente-content {
  /* Estilos de ejemplo */
  padding: 20px;
}


/* Estilos para la ventana emergente de éxito */
.success {
  background-color: green;
}

/* Estilos para la ventana emergente de error */
.error {
  background-color: red;
}


/* Estilos para el formulario de comentarios */
.comentarios form {
  margin-bottom: 20px;
}

.comentarios form label {
  display: block;
  margin-bottom: 10px;
}

.comentarios form textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
}

.comentarios form select {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  appearance: none;
  background-color: #fff;
}

.comentarios form button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.comentarios form button:hover {
  background-color: #0056b3;
}

/* Estilos para los comentarios existentes */
.comentarios .comentario {
  margin-bottom: 10px;
}

.comentarios .comentario p {
  font-size: 16px;
  margin: 0;
}

/* Estilos para la calificación */
.rating {
  display: inline-block;
}

.rating input {
  display: none;
}

.rating label {
  float: right;
  font-size: 36px; /* Tamaño de fuente ajustado para hacer las estrellas más grandes */
  color: #ccc;
  cursor: pointer;
}

.rating label:before {
  content: '★';
}

/* Establece el color dorado para las estrellas seleccionadas */
.rating input:checked ~ label:before {
  color: #ffa723;
}

/* Cambia el color a dorado cuando se pasa el ratón sobre las estrellas */
.rating label:hover,
.rating label:hover ~ label {
  color: #e58e09;
}

.star {
  color: #ffa723;
}