@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/trayectoria.jpg"),                /* Sección 1 - Encabezado */
		url("../IMAGE/Fondo_form.jpg"),
		url("../Fondos/index/footer.jpg");         /* Sección 3 */

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

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

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

label{
	background-color:  white;
	padding-left: 15px;
	padding-right: 25px;
	border-radius: 50px;
	height: 25px;
}

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





/* Clases asignadas para el control del header y sus componentes internos a tamaño real */

.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;
}


/* aqui terminan las clases de los componentes integrados en el menu superior */



/* aqui comienzan todas las clases empleadas en los componentes del main */

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

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.principal_container{
	width: 90%;
	padding-right: 2.5%;
	padding-left: 2.5%;
	height: 350px;
	background-color: rgba(204,231,238,1.00);
	background-size: 100% 100%;
	border-radius: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}

.principal_container > * {
	flex: 1 1 40%;        /* ocupa hasta el 50%, pero puede crecer/encogerse */
	min-width: 300px;     /* tamaño mínimo antes de hacer wrap */
	max-width: 40%x;     /* opcional: tope máximo */
	height: 300px;        /* tamaño fijo en altura */
}

.contend_web{
	width: 100%;
	height: 100%;
	background-image: url("../IMAGE/bg_image_consultorio.jpg");
	background-size: 100% 130%;
	background-position: bottom;

	display: flex;
	align-items: center;
	
	flex-direction: column;
}

.container_text_1{
	width: 90%;
	height: 50px;
	
	background-color: rgba(255, 255, 255, .85);
	border-radius: 50px;
	text-align: center;
	align-content: center;
	font-size: 30px;
	
	margin-top: 15px;
}

.container_text_2{
	width: 85%;
	height: 100px;
	
	padding-left: 2.5%;
	padding-right: 2.5%;
	
	background-color: rgba(255, 255, 255, .85);
	border-radius: 25px;
	display: flex;
	text-align: center;
	align-content: center;
	justify-content: center;
	flex-direction: column;
	font-size: 15px;
	
	margin-top: 20px;
}

.text_movil{
		display: none;
	}

.seccion_1_div_1{
	

}

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


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

.seccion_2_div_1{
	width: 90%;
	padding-left: 2.5%;
	padding-right: 2.5%;
	height: 350px;
	border-radius: 50px;
	
	background-color: rgba(255,255,255,0.75);
}

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

  	display: flex;
  	flex-wrap: wrap;           /* Permite que los hijos bajen a la siguiente línea */
  	justify-content: center;
  	align-items: stretch;      /* Para que hijos tengan 100% altura del contenedor */
  	flex-direction: row;       /* Por defecto los hijos van en fila */
  	gap: 10px;  
}

.formulario > div {
  flex: 1 1 50%;             /* Crece y encoge, base 50% ancho */
  min-width: 30%;          /* Mínimo ancho para que no se hagan muy pequeños */
  max-width: 40%;          /* Máximo ancho para limitar crecimiento */
  height: 100%;              /* Altura completa del contenedor */
  box-sizing: border-box;    /* Para que padding/border no sumen tamaño */ /* Solo para visualización */
  padding: 10px;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-direction: column;
}

textarea, input {
	width: 90%;
}

.contend_text{
	height: 150px;
	resize: none;
}
/* aqui terminan todas las clases empleadas en los componentes del main */








/* aqui comienzan las clases de los componentes empleados en el footer */

.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; }

/* aqui terminan las clases de los componentes empleados en el footer */




@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-size: 
		100% 180px,   /* Imagen 1: encabezado fijo */
		100% 465px,     /* Imagen 2: zona media */
		100% 400px,   /* Imagen 1: encabezado fijo */
		100% calc(100% - 1044px);     /* Imagen 3: parte inferior */

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

@media screen and (max-width: 719px){
	.principal_container{
		
	}
	
	.principal_container > *{
		all: unset;
		
	}
	
	.seccion_1_div_1{
		all: unset;
		
		width: 100%;
		height: 30px;
		background-color: white;
		margin: none;
		margin-top: 10px;
		text-align: center;
		align-content: center;
		border-radius: 50px;
	}
	.text_movil{
		display: block;
	}
	
	.seccion_1_div_2{
		width: 100%;
		height: 80%;
		margin: none;
		margin-top: -15px;
	}
	
	.contend_web{
		display: none;
	}
	.formulario {
    flex-direction: column;  /* Ahora los hijos van apilados verticalmente */
    flex-wrap: nowrap;
  }
  
  .formulario > div {
    flex: 1 1 100%;
    min-width: auto;
    max-width: 100%;
    height: auto;            /* Puede ajustarse a contenido */
	background-color: none;
  }
	.seccion_2{
		height: 500px;
	}
	.seccion_2_div_1{
		height: 450px;
	}
	label , input{
		width: 50%;
	}
	.contend_text{
	height: auto;
	}
	
	body{
		background-size: 
		100% 180px,   /* Imagen 1: encabezado fijo */
		100% 465px,     /* Imagen 2: zona media */
		100% 500px,   /* Imagen 1: encabezado fijo */
		100% calc(100% - 1144px);     /* Imagen 3: parte inferior */

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