.figImg
:root {
	/*Colors*/
  --white: #FFFFFF;
  --black: #000000;
  --main-color: #C7C7C7;
  --secondary-color:#F7F7F7;
  --text-input-field: #ACD9B2;
  --color-of-links: #B2F7C5;
	/*texts:*/
	/*font-size*/
  --textSm: 1.4rem; 
  --textMd: 1.6rem;
  --textLg: 1.8rem;
  --textExtLg: 2.1rem;
  --textTitleBlog: 2.8rem;
  --rem: 1rem;
  	/*ver clases mas abajo*/

	--padding04 : 0.4rem;
	/*ver clases mas abajo*/

  	/*font-family*/
  --fontMain: sans-serif;
  --fontSecondary: sans-serif;
  --fontHeading: sans-serif;

  /*tamaño imagenes - width*/
  --contImgPostSm: 15rem;
  --contImgPostMd: 25rem;
  --contImgPostLg: 35rem;

  --contImgcardSm: 10rem;
  --contImgcardMd: 15rem;
  --contImgcardLg: 20rem;

  --contImgLogoMain: 20rem;
  --contImgLogoSm: 0.25rem;
  --contImgLogoMd: 0.5rem;

  /*tamaño imagenes - height*/
}

/* html, body {
	height: 100%;
	margin: 0;
  }
  
  body {
	min-height: 100vh;
	position: relative;
  } */


*{ margin: 0; box-sizing: border-box;};
html {  overflow-x: hidden; width: 100vw; padding: 0; line-height: 1.15;} /*puede llegar a ser necesario*/
html {  font-size: 62.5%; }  /* Now 10px = 1rem! */
body {font-size: 16px; font-size: 1.2rem; line-height: 1.5; margin: 0; min-height: 100vh;}
		/*fuente: https://gist.github.com/mrwweb/5627502; */ /*si no soporta rem soportara px*/
/* main {  display: block;} */

/*heading*/
h1,h2,h3,h4,h5,h6{
		margin-top: 0;
		font-family: var(--fontHeading);
		line-height: 1.5;
	} 
p{font-weight: 300; margin: 0} /*es recomendable guardar los valores en variables root*/
h1{font-size: 6rem}  
h2{font-size: 4.8rem}
h3{font-size: 3.6rem; text-align: center;}
h4{font-size: 2.4rem; text-align: center;}

a{text-decoration: none; display: inline-block; /*overflow: hidden*/}
ul{list-style: none; margin: 0; padding: 0;}
[type="submit"]{border:none; border-radius: 25%; font-size: 1.6rem; padding: 0.5rem; cursor: pointer; width: 100%; height: 6rem}

picture {margin:0; overflow: hidden; width: var(--contImgPostMd)} /*imagenes post*/
figure {margin:0; overflow: hidden; width: var(--contImgcardMd); /*height:var(--contImgcardMd);*/}
img{max-width: 100%; height: auto; object-fit: contain; vertical-align: top; object-position: 1px 1px;} /*100% de un contenedor ; object-fit: cover*/

.figImg{
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	object-fit:	cover;
	overflow: hidden;
	display: flex;
	justify-content: center;
	height: 100%;
}
.contCentrado {max-width: 146.0rem; width: 75%; margin: 0 auto; position: relative;min-height: 100vh; background-color: #e1b12c;} /* BEM-layout*/

header{ margin: 0 auto; padding: 0; /*width: 95%*; max-width: 1200px; padding: 1rem*/}
main{max-width: 120.0rem; width: 100%; margin: 0 auto;} /*en pantalla <1200px toma el 95%*/
footer{margin: 0 auto; padding: 0;/*width: 95%*; max-width: 1200px; padding: 1rem*/}

.bodyTag{
	background: #a4b0be;
}
.padding4{
	padding: var(--padding04)
}

.bold{font-weight: bold;}
.textC{text-align:center}
.textL{text-align:left;}
.textSm{font-size: var(--textSm);}
.textMd{font-size: var(--textMd)}
.textLg{font-size: var(--textLg)}

.fontMain{font-style: var(--fontMain)}
.fontSecondary{font-style: var(--fontSecondary)}
.fontHeading{font-style: var(--fontHeading)}

	/*////////////////////////////////////////////////////////////*/
	.social-link{display: inline-block; /*border: 2px solid white;*/ width: 50px; height: 50px; margin: 0 20px;}
	.social-link.instagram{background-image: url('./img/instagram.svg'); background-size: cover; scale: 0.7;}


	/*////////////////////////////////////////////////////////////*/
	.contHeader{
		min-width: 72rem;
		/* height: 20vh; */
	}
		/* ---- barra de navegacion azul ----*/
		.navBoton1 ul{
		display: flex;
		flex-direction: row;
		 margin:0;
		 padding:0;
		}

		.navBoton1 ul{
		     margin:0;
		  padding:0;
		}

		.navBoton1 li{
		  width: 120px;
		  height: 20px;
		  list-style: none; 
		/*   border: 1px solid red; */
		  background-color: blue;
		  padding:10px;
		   margin:0;
		  padding:0;
		  /* display: flex;
		  align-items:center; */
		  flex-grow: 1;
		  transition: flex-grow .6s;
		}.navBoton1 li:hover{
			flex-grow: 2;
		}

		.navBoton1 a{
		  /* line-height: 20px; */
		  width: 100%;
		  height: 100%;
		  border: 1px solid white; 
		  text-decoration: none;
		  color: white;
		  text-align: center;
		/* border: 1px solid white;
		transition: 0.3s; */
		/*transition: all 0.1s ;*/
		} .navBoton1 a:hover{
		/*background-color: white;*/
		font-weight: 600;
		 text-shadow: 1px 1px 2px grey;
		}

		li.tabActive{
			background-color: red;
		}

	.header_nav{}
	.header_banner{
		padding: 2rem 0;
		display: flex;
		min-width: 78rem;
		height: 20vh;
		background: #e1b12c;
	}
    .banner_right{
    	display: flex;
    	flex-direction: column;
    	min-width: 50rem;
    	width: 100%;
    	max-height: 100%;
		background: #e1b12c;
    }
    .banner_right__contImg{
    	margin: 0 auto;
    	min-width: 40rem;
    }
    .banner_right__contImg img{
    	object-position: 1px -10px;
    }
    .banner_left{
    	padding: 1.2rem;
    	min-width: 27rem;
    	max-height: 40vh;
		background: #BAFF49;
    }
    .banner_left__marcofotoPerfil{
    	display: block;
    	object-fit: cover;
    	overflow: hidden;
		width: 17rem;
		max-height: 17rem;
		border-radius: 50%;
		border: 1px solid black;
		margin: auto auto;
	}
	.text_miPortafolioLorem{
		font-size: 1.8rem;
	}
	/*////////////////////////////////////////////////////////////*/
	.contMainAside{
		min-width: 78rem;
		margin: 0;
		display:flex;
		min-height: fit-content;
		position: relative;
	}

			
	/*////////////////////////////////////////////////////////////*/
	.contMain{
		margin: 0;
		padding: 0rem 0;
		max-width: 100%;
		background: #e1b12c;
	}
	.BlogCards{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 30px;
		height: fit-content;
		height: 100%;
		margin-bottom: 30px;
	}

.art_event{ /*border: 2px solid blue;*/ box-sizing: border-box; padding: 20px 0px; width: 80%; margin:2rem auto; border-radius: 15px; overflow: hidden; flex-shrink: 0; background-color: #e0ffff; }
.layImg {width: 60rem; height: 25rem; margin:auto auto;}
.layImg .img{ width: inherit; height: inherit; object-fit: cover;}
.layDetail{ margin: -40px auto 10px auto; width: 55rem; padding:20px; background-color: white; border-radius: 15px; margin-top:-10px; position: relative; text-align: center;}
.layDetail .title{font: bold 1em verdana;}
.layDetail .url{ color: blue; border: 1px solid; border-radius: 5px; padding: 5px 20px; text-decoration: none;}


	/*////////////////////////////////////////////////////////////*/
	.contAside{
		margin: 0;
		width: 100%;
		background: #BAFF49;
	} 
	/*////////////////////////////////////////////////////////////*/
	.contFooter{
		margin: 0;
		width: 100%;
		height: 2rem;
		background: black;
		color: white;
		text-align: center;
		position: absolute;
  		bottom: 0;
	}  
	/*////////////////////////////////////////////////////////////*/
	.art_card {
		/* border: 2px solid blue; */
		box-sizing: border-box;
		padding: 0px;
		width: 250px;
		height: 200px;
		margin: 5px;
		border-radius: 15px;
		overflow: hidden;
		flex-shrink: 0;
		background-color: #e0ffff;
		cursor: pointer;
		transition: 450ms all;
		transform-origin: center left; 
	}
	.ancla{
		color: black;
	}

	.layFig {
		width: 250px;
		height: 135px;
		margin: 0px;
		position: relative;
	}
	.layFig .img {
		position: absolute;
		top: -36px;
		/* scale: 1; */
		width: auto;
		height: auto;
		object-fit: cover;
	}
	.art_card:hover > .ancla:hover > .layFig .img {
		transform:scale(1.7) translateY(-15px);
		transition:  all 7s; /*muy desfazado*/
	}
	.layDetailCard {
		margin: 10px 20px;
		padding: 10px;
		background-color: white;
		border-radius: 15px;
		margin-top: -40px;
		position: relative;
		text-align: center;
	}
	.layDetailCard h3{
		font-family:  sans-serif;
		font-size: var(--textLg)
	}
	.description{
		font-family: "EB Garamond", sans-serif;
	}
	.titleEntrada{
		font-family: "EB Garamond", sans-serif;
		font-weight: bold;
		font-size: var(--textTitleBlog);
	}
	.layDetail--Entrada > p{
		font-family: "EB Garamond", sans-serif;
		font-size: var(--textExtLg);
		text-align: justify;

	}

/*
	<main class="contMain BlogCards" >

	<article class="art_card">
	  <a class="ancla" href="./entrada1.html">
		<figure class="layFig"> <img class="img" src="../img/PLEminiatura.jpg" alt="hola"> </figure>
		<div class="layDetailCard">
		  <h3 class="title">GA4-240202501-AA1-EV02</h3>
		  <p class="description">Personal Learning Environment</p>
		</div>
	  </a>
	</article>
*/
	/*///////EFECTOS CARDS/////////*/
	.art_card:hover ~ .art_card{
		transform:translate3d(10px, 0, 0); /*permite desplazar los items cuando se expande uno*/
	  }
	  .BlogCards:hover .art_card{
		opacity: 0.6;  /*genera la opacidad del resto de los items*/
	  }
	  .BlogCards:hover .art_card:hover{
		transform: scale(1.2);
		opacity: 1;
		z-index: 1;
		/*background-color: yellow;*/
	  }
	  
	/*//////////////*/
	.layDetail--Entrada{ margin: 0px auto 10px auto; width: 80%; padding:20px; background-color: white; border-radius: 15px; margin-top:-10px; position: relative; text-align: center;}
	.art_event--Entrada{ /*border: 2px solid blue;*/ box-sizing: border-box; padding: 20px 0px; width: 97%; margin:2rem auto; border-radius: 15px; overflow: hidden; flex-shrink: 0; background-color: #e0ffff; height: fit-content;}

	.layFig--Entreda {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 100%;
		height: 380px;
		margin: 0px;
		overflow: hidden;
	}
	.layFig--Entreda .img {
		object-fit: contain;
		height: 100%;
	} 

	.titleEntrada{
		margin: 10px 0;
	}