* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	font-family: 'Lato', sans-serif;
}

/* Reglas básicas entrega individual DDA 92350485 */

body {
    background-color: #53215B;
    color: #CBCBD5;
    font-family: sans-serif;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

html {
    height: -webkit-fill-available;
}


/*Estilos para el encabezado*/
.header{
 padding: 1em 2em 0.3em 1em;
    display: flex;
    background-color: #e8e8e8;
    justify-content: space-between;
	margin-bottom: 2em;
  }

.container .btn-menu label{
	color: #53215B;
	font-size: 25px;
	cursor: auto;
  }

/*Fin de Estilos para el encabezado*/



/*Menù emergente lateral*/
#btn-menu{
	display: none;
    }
.container-menu{
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;left: 0;
	transition: all 500ms ease;
	opacity: 0;
	visibility: hidden;
   
}
#btn-menu:checked ~ .container-menu{
	opacity: 1;
	visibility: visible;
}
.cont-menu{
	width: 100%;
	max-width: 300px;
	background: #793284;
	height: 100vh;
	position: relative;
	transition: all 500ms ease;
	transform: translateX(-100%);
    }
#btn-menu:checked ~ .container-menu .cont-menu{
	transform: translateX(0%);
}
.cont-menu nav{
	transform: translateY(15%);
}
.cont-menu nav a{
    text-align:left;
	display: block;
	text-decoration: none;
    padding: 1em 2em 1em 2em;
	
	color: #ffffff;
	border-left: 5px solid transparent;
	transition: all 400ms ease;
   border-bottom: 1px solid #c7c7c7;
}
.cont-menu nav a:hover{
	border-left: 5px solid #c7c7c7;
	background: #53215B;
}
.cont-menu label{
	position: absolute;
	right: 5px;
	top: 10px;
	color: #fff;
	cursor: pointer;
	font-size: 18px;
    }
header a img {
    width: 6em;
	display: block;
	margin: 0 auto;

}

/* main */

header, footer {
    background-color: #35163A;
    padding: .7em;
    flex-grow: 0;
}

.contenedor {
    margin: .3em auto;
    max-width: 50rem;
}

header .contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#isologo {
    display: block;
    width: 7em;
}

header ul {
    list-style: none;
    display: flex;
}

header ul li {
    margin: 0 0 .10em 0;
    display: flex;
}

header ul li a {
    border-radius: 20px;
    color: black;
    background-color: #CBCBD5;
    width: 100%;
    height: 100%;
    margin: 0 .2em;
    padding: 0 .4em;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

header ul li a:hover{
    background-color: #999999;
    color:  #6E1226;
}

main {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: .37em;
}
main img {
    width: 2em;
	height: auto;
}
.perfil {
    margin: .10em auto;
    text-align: center;
    max-width: 20em;
}
.destacado {
    display: flex;
}
main .destacado img {
    border-radius: 30%;
    width: 30vw;
    height: 30vw;
    max-width: 9em;
    max-height: 9em;
    border: .15em solid #35163A;
    box-shadow: 0 .31em .3em rgba(0, 0, 0, .35) inset, 0 .35em .5em rgba(0, 0, 0, .35);
}
.perfil .destacado h1{
    color: #D68E09;
    text-align: left;
    margin: 2em auto auto .30em;
    justify-content: center;
    align-items: center;
}
p, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.3em;
}

h4, h5{
    color: #D68E09;
}
main ul {
    list-style: none;
}
article a {
    color: #D68E09;
    text-decoration: none;
}

article a:hover{
    color:  #999999;
}
.plan img{
    width: 18em;
    height: auto;
    
 }
footer{
    background-color: #35163A;
    display: block;
    color: #CBCBD5;
    font-size: .5em;
    padding: .5em;
    text-align: center;
	margin-top: .7em;
}

footer img {
    width: 23%;
    margin: 0.1em 0 0.5em 0;
  }

footer p {
   	text-align: center;
	padding-bottom: 0.7em;
	font-style: italic;
}


@media (min-width: 35em) {
main img {
    width: .9em;
	height: auto;
    margin: 0.2em 0 1em 0;
  }
main .destacado img {
    width: 18vw;
    height: 18vw;
    }
	footer img {
    width: 9%;
    margin: 0.2em 0 1em 0;
  }	
	.plan img{
    width: 9em;
    height: auto;
    
 }
}