body {

	

	background-image: url("fotos/fondoxx.jpg");

	background-repeat: no-repeat;

  background-size: 100% auto;

	background-color: #f0eef0;

	font-family: Arial ;

  font-size:;

	

}





.smooth-scroll {

  scroll-behavior: smooth;

  scroll-duration: 2s;

}

	

h1 { font-size: 2.9em ; font-weight: ; font-family: ; color: #be206b; align: ; }

h2 { font-size: 1.2em ; font-weight: normal; font-family: 'Playball', Arial ; color:#be206b ; }

h3 { font-size: 1.2em ; font-weight: normal; font-family: 'Playball',  Arial ;color:#be206b ; }

h4 { font-size: 1.7em ; font-weight: normal;  font-family: 'Playball',  Arial ;color:#be206b ; margin: 2px;}

h5 {

  font-family: Arial ;

  text-align: center;

  margin: 1px;

  font-size: 1.9em; /* tamaño relativo al tamaño del texto principal */

}



p { font-family:Arial ;font-size:1.em ; color:#000 ; margin:0px; }



 p1 { font-family:Arial ;font-size:1.em ; color:#fff ; margin:0px; }

 

a:link {

      text-decoration: none;

			color: #a620be;

  }

a:visited {

      text-decoration: none;

			color: #a620be;

  }

a:hover {

      text-decoration: none;

			color: #c709a1;

  }

a:active {

      text-decoration: none;

			color: #93114f;

  }



	a {

  text-decoration: none;

}

















/* Estilos generales de la sección de imágenes */

.image-sectionx {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  padding: 20px;

}



/* Estilos de cada imagen */

.image-containerx {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 10px;

}



/* Estilos de la imagen circular */

.image-containerx img {

  border-radius: 50%;

  width: 100px;

  height: 100px;

  object-fit: cover;

  margin-bottom: 10px;

	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* sombra */

}



/* Estilos de cada imagen */

.image-containerxx {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 3px;

}



/* Estilos de la imagen circular */

.image-containerxx img {

  border-radius: 50%;

  width: 40px;

  height: 40px;

  object-fit: cover;

  margin-bottom: 10px;

  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* sombra */

}



/* Estilos del texto descriptivo */

.image-containerx p {

  text-align: center;

}



/* Estilos del texto descriptivo */

.image-containerxx p {

  text-align: center;

}



/* Media queries para ajustar los estilos en pantallas pequeñas */

@media screen and (max-width: 767px) {

  .image-containerx {

    flex-basis: calc(30% - 20px);

  }

  .image-containerx img {

    width: 100px;

    height: 100px;

  }

}





















.image-container {

  max-width: 100%;

  height: auto;

  border-radius: 10px;

  overflow: hidden;

  position: relative;

  cursor: pointer;

  transition: transform 0.2s ease;

	margin-bottom: 8px;

	margin-top: 8px;

}



.image-container:hover {

  transform: scale(1.01);

}



.image-container img {

  max-width: 100%;

	

  height: auto;

  display: block;

}





.comp {

  width: 100%;

}





.image-info {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: rgba(0,0,0,0.15);

  color: #fff;

  padding: 10px;

}



.image-info h3 {

  margin: 0;

  font-size: 1.5rem;

  font-weight: /*bold*/;

	color: #fff;

}



.image-info p {

  margin: 0;

  font-size: 1rem;

	color: #fff;

}



.btn {

  display: inline-block;

  background-color: #007bff;

  color: #fff;

  padding: 10px 20px;

  border-radius: 5px;

  font-size: 1rem;

  font-weight: /*bold*/;

  text-align: center;

  transition: background-color 0.2s ease;

}



.btn:hover {

  background-color: #0056b3;

}





	.name{

  font-size: 2.7em;

	color: #be206b;

	padding: 2px;

}



.namep{

  font-size: 4.9em;

	color: #be206b;

	padding: 2px;

}



 

.name-anun{

  font-size: 2.4em;

	color: #be206b;

	padding: 20px;

}

	

	.number{

  font-size: 2em;

}





	.distrit{

  font-size: 1.7em;

	padding: 5px;

}



		.perfil{

		

  border: 1px solid #ccc; /* establece el borde */

  border-radius: 5px; /* establece la curvatura de las esquinas */

  box-sizing: border-box; /* establece el tamaño de la caja para incluir el borde y el padding */

  width: 94%; /* establece la anchura de la div */

  padding: 10px; /* establece el espacio interno de la div */

	margin: 10px;

	

	

}





.mi-clase {

  display: flex; /* establece la disposición flexbox para la div */

  flex-wrap: wrap; /* permite que los elementos flexibles se envuelvan en filas o columnas adicionales según sea necesario */

  justify-content: center; /* centra los elementos en la div */

	margin: 10px;

}



.mi-clase img {

  max-width: 28%; /* establece la anchura máxima de las imágenes en 100% para que se ajusten automáticamente al ancho de la div */

  height: auto; /* asegura que la altura de las imágenes se ajuste proporcionalmente a la anchura */

  margin: 4px; /* agrega un margen de 10px alrededor de cada imagen */

	border-radius: 5px;

}







.mi-clase img:hover {

  transform: scale(1.3);

}



	

	.corner-image {

  position: absolute;

  top: ;

  right: 3px;

	bottom: 9px;

  width: 35px;

  height: 35px;

  z-index: 1;

}

	

	

	

	

		.corner-logo {

  position: absolute;

  top:4px ;

	left: 3px;

  right: ;

	bottom: ;

  width: 80%;

	max-width: 500px;

  height:;

  z-index: 1;

}

	

	

	

	.containerp {

  max-width: 500px; /* ancho máximo de la div */

	width: 80%;



  margin: 0 auto; /* centra la div horizontalmente */

  padding: 20px; /* espacio alrededor del contenido de la div */

  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* sombra */

  border-radius: 10px; /* curvas redondeadas */

}



.circlesp {

  display: flex; /* flexbox para alinear los círculos */

  justify-content: center; /* centra horizontalmente */

  margin-bottom: 15px; /* espacio entre los círculos y el texto */

}



.circle1p, .circle2p {

  max-width: 90px; /* ancho máximo de la div */

	width: 30%;

  /*width: 20vw; /* tamaño relativo al ancho de la pantalla */

  /*height: 20vw; /* tamaño relativo al ancho de la pantalla */

  border-radius: 50%;

  overflow: hidden;

  margin: 0 20px;

  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);

}



.circle1p {

  background-color: #1bd741;

}



.circle2p {

  background-color: #005bce;

}



.circle1p img, .circle2p img {

  width: 100%; /* ajusta la imagen al tamaño del círculo */

}







.pp {

  text-align: center;

  font-size: 1em; /* tamaño relativo al tamaño del texto principal */

	font-family: Arial ;

	color:;

}



.texte {

  text-align: center;

  font-size: 1.2em; /* tamaño relativo al tamaño del texto principal */

	font-family: Arial ;

	color:;

}



.gale {

  text-align: center;

  margin:20px;

}



.imagenesgale {

  text-align: center;

  border-radius: 10px;

  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);

	max-width: 333px; /* ancho máximo de la div */

	width: 90%;

}





/* vietnamese */

@font-face {

  font-family: 'Playball';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url(https://fonts.gstatic.com/s/playball/v16/TK3gWksYAxQ7jbsKcg8Lnep_Kg.woff2) format('woff2');

  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;

}

/* latin-ext */

@font-face {

  font-family: 'Playball';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url(https://fonts.gstatic.com/s/playball/v16/TK3gWksYAxQ7jbsKcg8Knep_Kg.woff2) format('woff2');

  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Playball';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url(https://fonts.gstatic.com/s/playball/v16/TK3gWksYAxQ7jbsKcg8Eneo.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}



.container {

	width:996px;

	margin:0px auto;

	font-size:1em;

	font-family: 'Playball', Arial ;

	background-color: /*rgba(255, 255, 255, 0.7)*/;

}

section, aside {

	padding: 10px;

	background:#fff;

	-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;

  



}

section {

	float: left;

	width: 70%;

}

aside {

	float: right;

	width: 25%;

	

	

	

}



footer {

	margin:10px;

	text-align:center;

	clear:both;

}



 

headermenu {

  line-height: 1.3em;

  position: fixed;

  top: 8px;

  right: 0;

  z-index: 300;

	background: #fff;

	font-size: 0.8em ;

	font-family: Arial ;

	

	

	background-color: #fff;

  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  padding: 10px;

  border-radius: 3px;

}





 header {

			

	line-height: 1.3em;

  position: relative ;

       top: 0;

			left: 0;

			right: 0;

			height: px;

			

 

	font-size: 0.8em ;

	font-family: 'Playball' ,  ;

	

	 line-height: 1; 

	 margin-bottom:;

  text-align: center;

  padding: 60px 0px 60px 0px;

	text-shadow: 0px 0px 4px #ffffff, 0px 0px 1px #ffffff, 0px 0px 1px #ffffff, 0px 0px 1px #ffffff;



  

	

 }

.menu {

  position: relative;

  display: inline-block;

  margin-right: 10px;

	

}





.menu nav ul {

  overflow-y: auto;

	max-height: 750px;

  scrollbar-width: thin; /* agrega un ancho de scrollbar delgado */

  scrollbar-color: gray lightgray; /* cambia los colores de scrollbar a tu preferencia */

}



.menu input {

  display: none;

}



.menu label {

  display: block;

  position: relative;

  width: 25px;

  height: 25px;

  cursor: pointer;

  transition: transform .2s ease-in-out;

}



.menu label span {

  display: block;

  position: absolute;

  width: 100%;

  height: 4px;

  background-color: #333;

  border-radius: 3px;

  transition: transform 0.3s ease-in-out;

}



.menu label span:nth-child(1) {

  top: 0;

  left: 0;

}



.menu label span:nth-child(2) {

  top: 10px;

  left: 0;

}



.menu label span:nth-child(3) {

  bottom: 0;

  left: 0;

}



/*.menu input:checked + label span:nth-child(1) {

  transform: rotate(45deg) translate(5px, 5px); 

}



.menu input:checked + label span:nth-child(2) {

  transform: translateX(-100%);

}



.menu input:checked + label span:nth-child(3) {

  transform: rotate(-45deg) translate(5px, -5px);

}

*/









.menu input:checked + label span:nth-child(1) {

  transform: rotate(45deg);   top: 10px;

}



.menu input:checked + label span:nth-child(2) {

  opacity: 0;

}



.menu input:checked + label span:nth-child(3) {

  transform: rotate(-45deg);  top: 10px;

}



nav {

  position: absolute;

  top:-10px;

  right: 37px;

  width: 200px;

  background-color: #fff;

  box-shadow: 0 5px 10px rgba(0,0,0,0.2);

  padding: 10px;

  border-radius: 3px;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.2s ease-in-out;

	display: flex;

  flex-direction: column;

  align-items: flex-start;

}



.menu input:checked ~ nav {

  opacity: 1;

  pointer-events: auto;

}



ul {

  list-style: none;

  margin: 0px;

  padding: 0px;

	

	

	

	display: flex;

  flex-direction: column;

  align-items: flex-start;

}





ul li {

  margin: 1.5px;

	padding: 0px;

	

	width: 100%;

	

}



ul li a {

  display: block;

  padding: 4px;

  color: #333;

  text-decoration: none;

	

	

	width: 100%;

}



ul li a:hover {

  background-color: #f2f2f2;

}















	/* para 980px o menos */

	@media screen and (max-width:980px) {

		.container {

			width:98%;

		}

		section {

			width:68%;

		}

		

		p {

			font-size:0.9em;

		}

	}

 

	/* para 700px o menos */

	@media screen and (max-width:700px) {

		aside,section {

			float:none;

			width:96%;

		}

		nav, section {

			font-size:0.9em;

		}

		aside {

			margin-top:5px;

		}

		nav ul {

			float:;

			clear:both;

		}

		

		p {

			font-size:0.9em;

		}

		

		

		h1 { font-size: 2.1em ; }

		

		

		

		

		h5 {



  font-size: 2.6em; /* tamaño relativo al tamaño del texto principal */

}

		

		.image-info h3 {

  margin: 0;

  font-size: 1em;

  font-weight: /*bold*/;

	color: #fff;

}



.image-info p {

  margin: 0;

  font-size: 0.7em;

	color: #fff;

}



.namep{

  font-size: 4.5em;

	

}



		

	}

	

	

 

	/* para 480px o menos */

	@media screen and (max-width:480px) {

		aside {

			display:/*none*/;

			text-align: center;

		}

		nav, section {

			font-size:0.9em;

		}

		section {

			width:94%;

		}

		nav ul {

			float:left;

			clear:none;

			width:;

		}

		nav ul li {

			float:;

		}

		p {

			font-size:0.9em;

			

		}

		

		.namep {

		font-size: 3.8em;

		}

		

		

		.menu nav ul {

  overflow-y: auto;

	max-height: 480px;

  scrollbar-width: thin; /* agrega un ancho de scrollbar delgado */

  scrollbar-color: gray lightgray; /* cambia los colores de scrollbar a tu preferencia */

}



	}

	

 

 

 /* Media query para móviles *

@media (max-width: 767px) {

  .circlesp {

    flex-direction: column;

    align-items: center;

    margin-bottom: 10px;

  }



  .circle1p, .circle2p {

    margin: 10px 0;

  }

}*/