@charset "utf-8";
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/index/1-intro.jpg"),  /* Sección 2 */
		url("../Fondos/index/servicios.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/index/trayectoria.jpg"),  /* Sección 2 */
		url("../Fondos/index/footer.jpg");         /* Sección 3 */

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

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

	background-position: 
		top,            /* Imagen 1 en la parte superior */
		0 120px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 450px,            /* Imagen 1 en la parte superior */
		0 850px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 1245px;        /* 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;
}

.section_1{
	height: 300px;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.section_1_div_1{
	width: 60%;
	margin-top: 15px;
	
	font-size: 110px;
	text-align: center;
}

.section_1_div_2{
	width: 90%;
	height: 75px;
	margin-top: 15px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 50px;
	
	font-size: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

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

.section_2_div_1 {
	height: 90%;
	width: 96%;

	/* background-color: rgba(255,255,255,1); */
	border-radius: 25px;

	display: flex;
	justify-content: space-between;
}

.section_2_div_1_hijo_1{
	width: 100%;
	height: 100%;

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

	flex-wrap: wrap;
	gap: 30px;
}

.section_2_div_1_hijo_1 > *{
	margin: 0px;
	height: 300px;
	width: 300px;
	background-color: beige;
	margin-left: 10px;
	margin-right: 10px;
}

#Servicio_1_cuadro_image{background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/ENFERMERAS GENERALES.jpg"); background-size: cover;}
#Servicio_2_cuadro_image{background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/TERAPIA_1.png"); background-size: cover;}
#Servicio_3_cuadro_image{background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/CUIDADORES.jpg"); background-size: cover;}

.servise_div{
	border-radius: 50px;
	
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.service_div_1{
	height: 90%;
	width: 90%;
	border-radius: 50px;
	background-color: rgba(255,255,255,.85);
	
	display: flex;
	flex-direction: column; /* ⬅️ Esto alinea de arriba hacia abajo */
	align-items: center;     /* Centra horizontalmente cada hijo */
	text-align: center;
}

.servise_title{
	width: 80%;
	border-radius: 50px;
	font-size: 40px;
	background-color: rgba(223, 255, 255, 1.0);
	margin-top: 10px;
	margin-bottom: 10px;
	
}

.servise_parraf{
	margin: 10px;
	

	display: -webkit-box;
	-webkit-line-clamp: 9;       /* Número de líneas que quieres mostrar */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	
}

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

.section_3_div_1{
	width: 95%;
	height: 90%;
	border-radius: 25px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.trayectoria{
	width: 90%;
	height: 250px;
	background-color: #A0C6D9;
	
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	
	
	position: relative;
}

.trayectoria_div_text{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	height: 220px;
	background: rgba(255, 255, 255, 0.8);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
}

.trayectoria_img {
  background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/image 2.jpg");
  background-size: cover;
  background-position: center;
  
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) scaleX(-1);
  
  clip-path: polygon(0% 0%, 40% 0%, 60% 100%, 0% 100%);
  
  z-index: 10;
  width: 500px;
  height: 250px;
}

.trayectoria_div_text_container{
	height: 90%;
	width: 60%;
	position: absolute;
	
	left: 0;
	transform: translateX(20px);
	text-align: center;
	
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.trayectoria_text_1{
	width: 90%;
	font-size: 20px;
	margin-bottom: 0px;
}

.trayectoria_text_2{
	width: 90%;
}

.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: 1093px){
	.section_2{
		height: 750px;
	}
	.section_2_div_1{
		height: 96%;
	}
	
	body{

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

		background-size: 
		100% 120px,   /* Imagen 1: encabezado fijo */
		100% 330px,     /* Imagen 2: zona media */
		100% 750px,   /* Imagen 1: encabezado fijo */
		100% 395px,     /* Imagen 2: zona media */
		100% calc(100% - 1260px);     /* Imagen 3: parte inferior */

	background-position: 
		top,            /* Imagen 1 en la parte superior */
		0 120px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 450px,            /* Imagen 1 en la parte superior */
		0 1200px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 1260px; 
	}
}

@media screen and (max-width: 900px){
	.section_1_div_2{
		font-size: 15px;
	}
	.trayectoria_div_text_container{
		width: 50%;
	}
}

@media screen and (max-width: 800px) {
	header{
		height: 200px;
		
		display: flex;
		flex-direction: column;
	}
	
	.section_1{
		height: 250px;
	}
	
	.section_1_div_1{
		font-size: 80px;
	}
	
	.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_Img{
		transform: translateX(10px) translateY(10px);
	}
	
	.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);
	}
	
	.trayectoria_img{
		clip-path: polygon(0% 0%, 40% 0%, 40% 100%, 0% 100%);
	}
	
	.trayectoria_div_text_container{
		width: 60%;
	}
	
	body{
		background-image: 
		url("../Fondos/index/3-header.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/index/3-intro.jpg"),  /* Sección 2 */
		url("../Fondos/index/servicios.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/index/trayectoria.jpg"),  /* Sección 2 */
		url("../Fondos/index/footer.jpg");


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

	background-position: 
		top,            /* Imagen 1 en la parte superior */
		0 180px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 500px,            /* Imagen 1 en la parte superior */
		0 1245px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 1645px; 
	}
}

@media screen and (max-width: 728px){
	.section_2{
		height: 1150px;
	}
	
	body{
		background-image: 
		url("../Fondos/index/4-header.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/index/4-intro.jpg"),  /* Sección 2 */
		url("../Fondos/index/servicios.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/index/trayectoria.jpg"),  /* Sección 2 */
		url("../Fondos/index/footer.jpg");

		background-size: 
		100% 181px,   /* Imagen 1: encabezado fijo */
		100% 316px,     /* Imagen 2: zona media */
		100% 1155px,   /* Imagen 1: encabezado fijo */
		100% 400px,     /* Imagen 2: zona media */
		100% calc(100% - 2045px);     /* Imagen 3: parte inferior */

	background-position: 
		top,            /* Imagen 1 en la parte superior */
		0 180px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 495px,            /* Imagen 1 en la parte superior */
		0 1645px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 2045px; 
	}
}

@media screen and (max-width: 663px) {
  .trayectoria_img {
    display: none;
  }
	.trayectoria_div_text_container{
		width: 90%;
	}
	.footer_link{font-size: 10px;}
	.trayectoria{
		background-image: url("../IMAGE/PAGINA_WEB_Y_FACEBOOK/image 2.jpg");
		background-size: cover;
	}
}

@media screen and (max-width: 600px){
	
	.section_1{
		height: 200px;
	}
	.section_1_div_1{
		font-size: 50px;
		margin-right: 0px;
		margin-left: 0px;
	}
	
	body{
		background-image: 
		url("../Fondos/index/5-header.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/index/5-intro.jpg"),  /* Sección 2 */
		url("../Fondos/index/servicios.jpg"),                /* Sección 1 - Encabezado */
		url("../Fondos/index/trayectoria.jpg"),  /* Sección 2 */
		url("../Fondos/index/footer.jpg");

		background-size: 
		100% 180px,   /* Imagen 1: encabezado fijo */
		100% 260px,     /* Imagen 2: zona media */
		100% 1160px,   /* Imagen 1: encabezado fijo */
		100% 395px,     /* Imagen 2: zona media */
		100% calc(100% - 1995px);     /* Imagen 3: parte inferior */

	background-position: 
		top,            /* Imagen 1 en la parte superior */
		0 180px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 440px,            /* Imagen 1 en la parte superior */
		0 1600px,        /* Imagen 2 justo debajo de la imagen 1 */
		0 1995px; 
	}
}