
:root{
	--color01: #8a8d8b;
	--color2: #008ae8;
	--color3: #086aa0;
	--color4: #5A5F5C;
}

.personajes-body-web{background-color: var(--color01);}

.instructorIcono00:hover{
	background-color: var(--color3);
	border-radius: 9px;
}

.subtitulo-00{
	font-family: arial;
	font-size: clamp(0.55rem, 0.69rem, 1.3rem);
	color: white;
	text-align: center;
	letter-spacing: clamp(0.10rem, 1.07vw, 0.45rem);
	background-color: var(--color4);
	padding: 0.35rem;
	margin-block-end: 0px;
	margin-block-start: 0px;
}

img.instructorIcono00 {
    background-color: #8d45c4;
    border-radius: 10px;
}

.linkdescargapdf{
background-color: white;
padding: 13px;
/*border: 2px solid grey;*/
}

.foto-persona00{
position: relative;
height: 640px;
width: 100%;
object-fit: cover;
object-position: 52% 50%;
border-radius: 20px;
}

.foto-persona01{
position: relative;
height: 640px;
width: 100%;
object-fit: cover;
object-position: 52% 50%;
border-radius: 20px;
}

@font-face{
/* Aqui el nombre identificador (entre comillas dobles) */
font-family: 'tituloTypo00', 'Times New Roman', serif;
src: url('instructores/CheltenhamStdLight.woff') format("woff"); 
src: url('instructores/CheltenhamStdLight.woff2') format("woff2"); 
font-display: swap;
}

.titulo-instructores-00, .titulo-biografia-00{
font-family: 'tituloTypo00', serif;
color: white;
text-align: center;
font-size: 4rem;
font-weight: 200; 
margin: 0px;
letter-spacing: -1.4px;
}

.contenedorheader00omarsanlucas{
	display: grid;
    grid-template-areas:
        'cabRedesSociales--pf cabRedesSociales--pf'
        'panelCabezote00--pf linksCabezote00--pf';
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    gap: 0px 0px;
    justify-items: center;
    justify-content: center;
}

.instructorCiudad{
	font-size: 0.9rem;
	letter-spacing: 0.78rem;
	margin-top: 10px;
	text-transform: uppercase;

font-size: clamp(0.61rem, 1rem, 1.3rem);
letter-spacing: clamp(0.22rem, 2vw, 0.8rem);
}

.personaje-menu00{
	font-family: arial;
	font-size: clamp(0.9rem, 1rem, 22px);
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	text-align: center;
	justify-content: center;
	gap: 2%;
	align-items: center;
}

.personajesTexto00{
	font-family: Georgia, serif;
	font-size: 1.1rem;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.45rem;
}

.textoSinEspaciado00{
letter-spacing: 0.05rem;
text-transform: unset;
}

.personaje-links00{
text-decoration: none;
color: white;
padding: 1rem;
background-color: var(--color3);
border-radius: 0.65rem;
display: block;
/*border-bottom: 4px solid #099ced;*/
font-family: Arial;
font-size: 1rem;
color: white;
}

.personaje-links00:hover{background-color: var(--color2);}
.personaje-menu-contenedor00{margin-bottom: 1rem;}
.personaje-contenedor-biografia00{width: 95%;margin: 0 auto;}

.personaje-articulo-00{
	width: 95%;
	margin: 0 auto;
	background-color: #e6e6e6;
	border-radius: 10px;
	padding-left: 1rem;
	padding-right: 8px;
}

.listaMargen00{
	margin-left: 2rem;
	list-style-type: circle;
}

/* INICIO CONTENEDOR BIOs */
	.personaje-biografia00{
	    display: grid;
    grid-template-areas:
        'aaa0 bbb0'
        'aaa0 ccc0'
        'aaa0 ccc0';
    grid-template-columns: 35% 55%;
    grid-template-rows: 1fr auto;
    gap: 10px;
    align-content: center;
    align-items: stretch;
    justify-content: center;
    margin-bottom: 1rem;
    background-color: var(--color4);
    border-radius: 0px 10px 10px 0px;
	}

	/* Nombre de area sin comillas */
	.foto-biografia00{ 
		grid-area: aaa0; 
		position: relative;
		width: 100%;
		object-fit: cover;
		object-position: 52% 50%;
		border-radius: 20px;
	}

	.titulo-biografia00{ 
		grid-area: bbb0; 
		font-family: 'tituloTypo00', serif;
		color: white;
	}


	.lista-biografia0001, 
	.lista-biografia00, 
	.lista-biografia01,
	.personaje-links00{
	    line-height: 1.35rem;
	}



	.lista-biografia00{ 
		grid-area: ccc0; 
		font-family: Arial;
		color: white;
	}
/* FIN CONTENEDOR BIOs */

/* INICIO CONTENEDOR BIOs */
	.personaje-biografia01{
	display: grid;
	    grid-template-areas:
	        'aaa01 bbb01'
	        'aaa01 ccc01'
	        'aaa01 ccc01';
	    grid-template-columns: 35% 55%;
	    grid-template-rows: 1fr auto;
	    gap: 10px;
	    align-content: center;
	    align-items: stretch;
	    justify-content: center;
	      margin-bottom: 1rem;
    background-color: var(--color4);
    border-radius: 20px;
	}

	/* Nombre de area sin comillas */
	.foto-biografia01{ 
		grid-area: aaa01; 
		position: relative;
		width: 100%;
		object-fit: cover;
		object-position: 52% 50%;
		border-radius: 20px;
	}

	.titulo-biografia01{ 
		grid-area: bbb01; 
		font-family: 'tituloTypo00', serif;
		color: white;
	}

	.lista-biografia01{ 
		grid-area: ccc01; 
		font-family: Arial;
		color: white;
		text-wrap: balance;
	}
/* FIN CONTENEDOR BIOs */

.lista-biografia00 > li, 
.lista-biografia01 > li{ 
margin-bottom: 1.2rem;
	}

.personaje-biografia00, 
.personaje-biografia01{
justify-content: start;
	} 

/* MEDIA QUERY | MEDIA QUERY | MEDIA QUERY */
@media (min-width: 660px){ 

.contenedorheader00omarsanlucas{

}

.personaje-contenedor-biografia00{
display: grid;
grid-template-areas:
'personaje-biografia00 personaje-biografia01';
grid-template-columns: 50% 50%;
grid-template-rows: 1fr auto;
gap: 10px;
width: 85%;
} 

.personaje-articulo-00 {width: 75%;}
.personaje-biografia00{grid-area: personaje-biografia00;}
.personaje-biografia01{grid-area: personaje-biografia01;}

.foto-persona01{
position: relative;
height: 640px;
width: 100%;
object-fit: cover;
object-position: 52% 9%;
border-radius: 20px;
}
} 
.colorGrisTxt{color: var(--color4);}


