/* CSS Document */
header{
	height: 100px;
	
	display: flex;
	flex-direction: row;
	margin-bottom: 40px;
}

body {
	cursor: default;

	background-image: 
		url("../Fondos/index/1-header.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/servicios/1-inicio_servicios.jpg"),  /* Sección 2 */
		url("../Fondos/index/trayectoria.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/index/servicios.jpg"),  /* Sección 2 */
		url("../Fondos/index/trayectoria.jpg"),
		url("../IMAGE/fondo_soft_blue.jpg"),/* Sección 1 - Encabezado */
		url("../Fondos/index/footer.jpg");         /* Sección 3 */

	background-repeat: 
		no-repeat, 
		no-repeat, 
		no-repeat, 
		no-repeat, 
		no-repeat, 
		no-repeat, 
		no-repeat;

	/*fondos medidas*/
	background-size: 
		100% 120px,   /* Imagen 1: encabezado fijo */
		100% 430px,     /* Imagen 2: zona media */
		100% 400px,   /* Imagen 1: encabezado fijo */
		100% 400px,
		100% 400px,
		100% 400px,/* Imagen 2: zona media */
		100% calc(100% - 1748px);     /* Imagen 3: parte inferior */

	background-position: 
		top,            /* Imagen 1 en la parte superior */
		0 120px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 550px,            /* Imagen 1 en la parte superior */
		0 949px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 1348px,
		0 1748px,/* Imagen 2 justo debajo de la imagen 1 */
		0 2148px;        /* Imagen 3 empieza después de la 2 (120+440) */
}

main{
	
}


footer{
	height: 200px;
	background-color: black;
	color: white;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
}

.header_div_1{
	width: 60%;
	padding: 10px;
	display: flex;
	background: rgba(255,255,255,0.8);
	border-bottom-left-radius: 50px;
	border-top-left-radius: 50px;
}

.header_Img{
	height: 80px;
	width: 80px;
	margin-right: 10px;
	border-radius: 50px;
	background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/LOGO_SERPROEN_CIRCULO.png");
	background-size: cover;
}

.header_div_1_sub_1{
	width: calc(100% - 100px);
	height: 80px;
	margin-right: 10px;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}

.header_text_1{
	width: 100%;
	font-size: 40px;
	text-align: center;
	color: #0088AC;
}

.header_text_2{
	width: 100%;
	font-size: 15px;
	text-align: center;
	
	margin-bottom: 10px;
}

.header_div_2{
	width: 40%;

	display: flex;
	justify-content: flex-end;
	
	background: rgba(255,255,255,0.8);
	border-bottom-right-radius: 50px;
	border-top-right-radius: 50px;
}

.header_div_menu {
	height: 100%;
	width: 400px;

	display: flex;
	flex-direction: column-reverse; /* Apila los elementos de abajo hacia arriba */
	align-items: center;            /* Centra horizontalmente */
	justify-content: center;  
}

.header_div_menu > * {
	width: 100%;         /* Opcional: ocupa todo el ancho */
	display: flex;
	justify-content: center; /* Centra contenido horizontalmente */
	align-items: center;     /* Centra contenido verticalmente */
}

.Menu{
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	margin-right: 25px;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
}

.Menu > * {
	width: 25%;
	height: 100%;
}

.Menu_superior{
	height: 50px; 
	background-color: white;
	color: #58BBD6;
}

.Menu_button{
	border: none;
	background-color: white;
}

.Menu_button:hover{
	background-color: #58BBD6;
	color: white;
	
	
}

#final_button{
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
}

#start_button{
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
}


.Menu_text{
	font-size: 30px;
	text-align: center;
	color: #0088AC;
}

.Menu_bottom_selected{
	font-weight: 900;
	color: #0088AC;
	border:none;
	border-bottom: 4px solid #0088AC;
	background-color: white;
}







.seccion_1{
	width: 100%;
	height: 400px;
	

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.seccion_1_div_1{
	width: 70%;
	margin-top: 25px;
	height: 25%;
	border-radius: 50px;
	
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	
	font-size: 40px;
	color: white;
	
}

.seccion_1_div_2{
	width: 80%;
	margin-top: 25px;
	height: 55%;
	background-color: white;
	border-radius: 15px;
	
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	
	padding: 0px;
	padding-left: 20px;
	padding-right: 20px;
	
	font-size: 20px;
	
}


.seccion_2{
	width: 100%;
	height: 400px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.seccion_2_div_1{
	width: 90%;
	height: 325px;
	border-radius: 50px;
	
	background-color: lightsteelblue;
	display: flex;
	align-items: center;
	justify-content: center;
}

.content_right{
	width: 95%;
	height: 300px;
	

	
	display: flex;
	justify-content: flex-end;
	align-items: center;
	
	position: relative;
}

.container_text {
	width: calc(100% - 15px);
	height: 270px;
	border-radius: 25px;
	
	background-color: #C8E0FC; 
	
	position: absolute;
	z-index: 1;
}

.secc_1_container_text_1{
	width: calc(100% - 350px);
	height: 50px;
	margin-left: 20px;
	margin-top: 15px;
	border-radius: 50px;
	
	background-color: aliceblue;
	
	font-size: 50px;
	text-align: center;
}

.secc_1_container_text_2{
	width: calc(100% - 350px);
	height: 150px;
	margin-left: 10px;
	margin-top: 15px;
	border-radius: 15px;
	
	background-color: aliceblue;
	
	font-size: 20px;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	
	padding: 10px;
}

.image_right {
	width: 300px;
	height: 300px;
	border-radius: 25px;
	
	position: absolute;
	z-index: 2;
	background-size: cover;
}

.seccion_3{
	width: 100%;
	height: 400px;
	

	display: flex;
	align-items: center;
	justify-content: center;
	
}

.seccion_3_div_1{
	width: 90%;
	height: 325px;
	border-radius: 50px;
	
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.seccion_4_div_1{
	width: 90%;
	height: 325px;
	border-radius: 50px;
	
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.content_left{
	width: 95%;
	height: 300px;
	
	
	display: flex;
	justify-content: flex-start;
	align-items: center;
	
	position: relative;
}

.container_text_left{
	width: calc(100% - 15px);
	height: 270px;
	border-radius: 25px;
	background-color: #C8E0FC; 

	position: absolute;
	z-index: 1;
}

.secc_1_container_text_1_left{
	width: calc(100% - 350px);
	height: 50px;
	margin-top: 15px;
	margin-right: 20px;
	margin-left: auto;   /* Esto empuja el elemento hacia la derecha */
	border-radius: 50px;

	background-color: aliceblue;

	font-size: 50px;
	text-align: center;
}

.secc_1_container_text_2_left{
	width: calc(100% - 350px);
	height: 150px;
	margin-left: auto;
	margin-right: 10px;
	margin-top: 15px;
	border-radius: 15px;
	
	background-color: aliceblue;
	
	font-size: 20px;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	
	padding: 10px;
}

.seccion_4{
	width: 100%;
	height: 400px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

#Servicio_image_1{
	background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/AUXILIARES.jpg");
}
#Servicio_image_2{
	background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/TERAPIA_3.png");
}
#Servicio_image_3{
	background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/TERAPIA FISICA.jpg");
}
#Servicio_image_4{
	background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/Podologia.jpg");
}













.footer_superior{
	width: 100%;
	height: 90%;
	
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.footer_superior>*{
	width: 33.3333%;
	height: calc(100% - 20px);
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	
	margin-top: 20px;
}

.footer_name_text{
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}

.footer_item{
	width: 75%;
  height: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.footer_inferior{
	width: 95%;
	height: 10%;
	
	margin-left: 15px;
	margin-right: 15px;
	
	font-size: 11px;
	text-align: center;
	
}

.footer_icon{ height: 20px; width: 20px; margin-right: 10px; background-size: cover;}

.footer_link{ font-size: 15px; text-decoration: none; color: inherit; }


















@media screen and (max-width: 1093){
	body{
		background-image: 
		url("../Fondos/index/2-header.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/servicios/1-inicio_servicios.jpg"),  /* Sección 2 */
		url("../Fondos/index/trayectoria.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/index/servicios.jpg"),  /* Sección 2 */
		url("../Fondos/index/trayectoria.jpg"),
		url("../IMAGE/fondo_soft_blue.jpg"),/* Sección 1 - Encabezado */
		url("../Fondos/index/footer.jpg");
	}
}

@media screen and (max-width: 800px) {
	header{
		height: 200px;
		
		display: flex;
		flex-direction: column;
	}
	
		
	.header_div_1,
	.header_div_2 {
		width: 100%;
		height: 80px;
	}
	
	.header_div_1{
		padding: 0px;
		border-top-right-radius: 50px;
		border-top-left-radius: 50px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
	}
	
	.header_div_2{
		display: flex;
		justify-content: space-around; /* Alinea hijos a la izquierda */
		align-items: center;
		border-top-right-radius: 0px;
		border-bottom-left-radius: 50px;
		border-bottom-right-radius: 50px;
		background: rgba(255, 255, 255, 0.8);
	}
	
	.header_div_1_sub_1{
		width: calc(100% - 125px);
	}
	
	.header_Img{
		transform: translateX(10px) translateY(10px);
	}
	
	body{
		background-image: 
		url("../Fondos/index/3-header.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/servicios/2-inicio_servicios.jpg"),  /* Sección 2 */
		url("../Fondos/index/trayectoria.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/index/servicios.jpg"),  /* Sección 2 */
		url("../Fondos/index/trayectoria.jpg"),
		url("../IMAGE/fondo_soft_blue.jpg"),/* Sección 1 - Encabezado */
		url("../Fondos/index/footer.jpg");

		background-size: 
		100% 180px,   /* Imagen 1: encabezado fijo */
		100% 445px,     /* Imagen 2: zona media */
		100% 400px,   /* Imagen 1: encabezado fijo */
		100% 400px,
		100% 400px,
		100% 400px,/* Imagen 2: zona media */
		100% calc(100% - 1762px);     /* Imagen 3: parte inferior */

	background-position: 
		top,            /* Imagen 1 en la parte superior */
		0 180px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 625px,            /* Imagen 1 en la parte superior */
		0 1024px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 1423px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 1823px,
		0 2223px;
	}
	header{
		margin-bottom: 15px;
	}
}

@media screen and (max-width: 720px){
	#Servicio_image_1,#Servicio_image_2,#Servicio_image_3,#Servicio_image_4{
		display: none;
	}
	.content_right,.content_left{
		justify-content: center;
	}
	
	.container_text_left {
        display: flex;
        flex-direction: column;
        align-items: center;
		justify-content: center;
	}
	.container_text{
		width: 90%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	.secc_1_container_text_1,
	.secc_1_container_text_2{
		width: 80%;
	}
	.secc_1_container_text_1_left,
    .secc_1_container_text_2_left {
        margin-left: 0; /* Elimina el margen izquierdo automático */
        margin-right: 0; /* Elimina cualquier margen derecho */
        width: 80%; /* Ajusta el ancho para mejor legibilidad */
        text-align: center; /* Centra el texto */
    }
	.seccion_1_div_2{
		font-size: 18px;
	}
	
	#secc_image_1{
		background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/AUXILIARES.jpg");
		background-size: cover;
	}
	
	#secc_image_2{
		background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/TERAPIA_3.png");
		background-size: cover;
	}
	
	#secc_image_3{
		background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/TERAPIA FISICA.jpg");
		background-size: cover;
	}
	#secc_image_4{
		background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/Podologia.jpg");
		background-size: cover;
	}
	
	.secc_1_container_text_1, 
	.secc_1_container_text_2,
	.secc_1_container_text_1_left,
	.secc_1_container_text_2_left{
		background-color: rgb(240, 248, 255, .85);
	}
	
	.seccion_1_div_1{
		font-size: 40px;
	}

	body{
		background-image: 
		url("../Fondos/index/4-header.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/servicios/2-inicio_servicios.jpg"),  /* Sección 2 */
		url("../Fondos/index/trayectoria.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/index/servicios.jpg"),  /* Sección 2 */
		url("../Fondos/index/trayectoria.jpg"),
		url("../IMAGE/fondo_soft_blue.jpg"),/* Sección 1 - Encabezado */
		url("../Fondos/index/footer.jpg");
	}
}

@media screen and (max-width: 600px) {
	body{
		background-image: 
		url("../Fondos/index/5-header.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/servicios/2-inicio_servicios.jpg"),  /* Sección 2 */
		url("../Fondos/index/trayectoria.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/index/servicios.jpg"),  /* Sección 2 */
		url("../Fondos/index/trayectoria.jpg"),
		url("../IMAGE/fondo_soft_blue.jpg"),/* Sección 1 - Encabezado */
		url("../Fondos/index/footer.jpg");
	}
}