@font-face {
	font-family: Muli;
	src:url(../fonts/Mulish-Regular.ttf);	
}

body, html{ margin:0; }
body {
	font-family: Muli !important;	
}
p{ margin-block-start: 0; margin-block-end: 0; }

#contenedor { position:relative; top:0; width:70%; margin:0 auto; /*overflow:auto;*/ }

#logo-cab{width: 320px;}

/* Estilos para el menu con logo */
header{display: block;}
header nav {
	/*display: flex;*/
	/*justify-content: space-between;*//*centra el menú a la derecha*/
	align-items: center;
	/*background-color: #f0f0f0;*/ /* Color de fondo del header */
	/*
	background: #3F5EFB;
	background: radial-gradient(circle,rgba(63, 94, 251, 1) 30%, rgba(203, 70, 252, 1) 100%);
	*/
	padding: 10px 20px; /* Espaciado interior */
}

header nav ul {
	list-style: none; /* Elimina los puntos de la lista */
	display: inline-flex; /*ruby-text*/
	padding:5px;
}

header nav ul li {
	/* Espacio entre los elementos del menú */
	margin-left: 10px; 
	margin-right: 10px; 
	font-size:18px;
}

header nav ul li a {
	text-decoration: none; /* Elimina el subrayado */
	color: darkviolet; /* Color del texto del enlace */
	font-weight: bold;
	padding-bottom:2px;
}
a.active { color: #4910bc; border-bottom: 2px solid #4910bc;}

header nav ul li a:hover {
	color: #4910bc; /* Color al pasar el ratón */
	border-bottom: 2px solid #4910bc;
}

/* Estilos para el logo */
.logo img {
	width: 150px; /* Ancho del logo */
	height: auto; /* Mantiene la proporción */
}
/* Estilos para el menu con logo */

#neon{ 
	color: #1278BF;
	text-shadow: 0px 0px 9px #508AD3; 
	text-align: center;
	font-size: xxx-large;
}
#subneon{
	color: #833AB4; 
	text-shadow: 0px 0px 9px #D294FF; 
	text-align: center;
}
.darkviolet{color: darkviolet;}

.dboton{
	color: #85009d;
	padding: 8px; 
	border: 2px solid #85009d;
	cursor: pointer;
}
.sel{
	color: white;
	padding: 8px; 
	border: 2px solid #85009d;
	background-color: #85009d;
	cursor: pointer;
}

.d20{ font-size: 20px;}
#beneficios, #precauciones, #sesiones { display:none; }


/*contacto*/

/*--------- 	FORMULARIO DE CONTACTO 		-----------*/
input[type=text], input[type=email], input[type=password], textarea, select{
	width: 98%;
	font-size: 16px;
	padding: 12px 20px;
	/*margin: 8px 1%;*/
	margin-top: 8px;
	/*margin-left: 8px;*/
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}
textarea{font-size: 18px;}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus, select:focus {
  /*background-color: aliceblue;*/ /* Color de fondo al hacer foco */
  border-color: darkviolet;/*#007bff;*/  /* Color del borde al hacer foco */
  box-shadow: 0px 0px 9px #D294FF;/*0 0 5px rgba(0, 123, 255, 0.5);*/ /* Sombra al hacer foco */
  outline: none; /* Opcional: quita el borde azul por defecto de algunos navegadores */
}


input[type=submit] {
	width: 98%;
	background-color: darkviolet;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
input[type=submit]:hover {
	background-color: #3F5EFB;
}
.fadebox_email {
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%; height: 100%;	
	background-color: black;
	z-index:9999999;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
#email_enviado{
	display: inline; 
	color: darkviolet;
}
#gdpr_info { position:absolute; bottom:75px; left:0; background-color:white; padding:10px; font-size:12px; display:none; }
/*--------- 	/FORMULARIO DE CONTACTO 		-----------*/

#mapa{float: left; width: 50%;}
#fomulario{float: left; width: 45%; margin-left: 5%;}
#pie_contacto{text-align: center; color: white; background: #3F5EFB; background: radial-gradient(circle,rgba(63, 94, 251, 1) 30%, rgba(203, 70, 252, 1) 100%); overflow: auto;}
#pie_citas{position: relative; text-align: center; color: white; background: radial-gradient(circle,rgba(63, 94, 251, 1) 30%, rgba(203, 70, 252, 1) 100%); overflow: auto;}
#dpie{display:none; height: 134px;}

button { /* Estilo opcional */
	padding: 5px;
	background-color: #007BFF;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
button:hover {
	background-color: #0056b3;
}
#copiado{display: none; color: #007BFF;}
/*/contacto*/

.img_cita{width:30%;}

#cont_pie_index{width: 80%; margin: 0 auto; overflow: auto;}
.datos_pie{float:left; margin-right: 50px; min-height: 140px;}

/*----------------------------------------------------*/

#img-boton{width:30px; display: none; margin-left: 10px; margin-bottom: 10px; cursor: pointer;}

@media screen and (min-width:1980px){
	#pie_contacto{
		position: fixed;
		bottom: 0;
		width: 70%;
	}
	#dpie{display:block;}
}

@media screen and (max-width:1850px){
	#cont_pie_index{width: 85%;}
}

@media screen and (max-width:1730px){
	.datos_pie{margin-right: 25px;}
}

@media screen and (max-width:1630px){
	#cont_pie_index{width: 92%;}
}
.cont2{ margin-left: 8px;}
@media screen and (max-width:1280px){
	#contenedor{ width: 100%; }
	.cont2{ margin-left: 8px;}
	#mapa{width: 48%; margin-left: 2%;}
	#fomulario{width: 48%; margin-left: 2%;}
	input[type=text], input[type=email], input[type=password], textarea {
		width: 95%;	
	}
	
	#cont_pie{width: 50%;}
}

@media screen and (max-width:1044px){
	#img_panel{width: 100%;}
}

@media screen and (max-width:955px){
	#cont_pie_index{width: 95%;}
}

@media screen and (max-width:920px){
	#contenedor{ width: 100;}/*96%*/
	#mapa{width: 100%; margin-left: 0;}
	#fomulario{width: 100%; margin-left: 0;}
	#logo-cab{width: 200px;}
	input[type=text], input[type=email], input[type=password], textarea {
		width: 100%;	
	}
	header nav ul li{font-size: 18px;}
	#neon{font-size: xx-large;}
	
	.img_cita{width:40%;}
	
	#cont_pie_index{width: 98%;}
}


@media screen and (max-width:600px){
	#neon{font-size: x-large;}
	.img_cita{width:60%;}
	.sel, .dboton{padding:5px;}
	#cita_pie{display: block !important;}
	
	#img-boton{display: block;}
	header{display: none;}
	header nav{text-align: left;}
	header nav ul{display: block; margin: 0;}
	header nav ul li{line-height: 30px;}
}

@media screen and (max-width:530px){
	.sel, .dboton{display:block;}
}