@charset "utf-8";

html {
    display: block;

}

* {
    margin: 0em;
    padding: 0em;
    border: 0em;
    box-sizing: border-box;
}

:root {

    --color-1: #151515;
    --color-2: #FEEA53;
    --color-3: #AAB1B9;
    --color-4: #FFFFFF;

    --tipo-titulos: 'Montserrat',sans-serif;
    --tipo-textos: sans-serif;
}

body {
    font-family: var(--tipo-textos);
    margin: 0;
    color: var(--color-4);
    background-color: var(--color-1);
    display: flex;
    flex-direction: column;
  }

h1,
h2,
h3,
h4 {
  font-family: var(--tipo-titulos);
}

h3{
    padding: 1rem 0rem;
}

  img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: var(--color-4);
    font-family: var(--tipo-titulos);
    font-weight: bold;
  }

  ul {
    list-style: none;
    padding: 0;
    max-width: 100%;
}

/*menu*/

.contenedora {
    width: min( 75rem, 100% );
    margin-inline: auto;
    padding: 1rem;
  }


header {
    background-color: var(--color-2);
    text-align: center;
    padding: 2em;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;

}

#logo img {
    background-color: var(--color-4);
    width: 10rem;
    height: auto;
}

header nav a:hover {
    background-color: var(--color-1);
    color: var(--color-2);
  }

header nav ul {
    list-style: none;
    font-size: 2rem;
    display: block;
    max-width: 100%;
}

header nav ul li {
    padding: 0.5rem;
}
   
hr {
    height: 0.2rem;
    background-color: var(--color-4);
    max-width: 100%;
}

/* cuerpo */
main {
    padding: 0em;
}

h1{
	font-family: var(--tipo-titulos);
	font-size: 2rem;
    padding: 1rem 4rem;
}

.acercademi p{
	font-family: var(--tipo-titulos);
	font-size: 1rem;
	font-weight: normal;
	padding: 1rem 4rem;
}

/*ALUMNOS*/

h2{
	font-family: var(--tipo-titulos);
	font-size: 2rem;
    text-align: center;
    padding: 1rem;
}

article .alumnos{
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(min(20em, 100%), 1fr));
    padding: 2rem 4rem;

}

article ul li{
	background-color: var(--color-2);
    align-content: center;
    padding: 2rem;
    box-sizing: content-box;
}

#logoacumar{
    padding: 1rem 4rem;
    height: auto;
}

.comitente p{
	font-family: var(--tipo-titulos);
	font-size: 1rem;
	font-weight: normal;
	padding: 1rem 4rem;
}

.datosacademicos{
    display: grid;
    gap: 1em;
    row-gap: 1em;
    column-gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(min(20em, 100%), 1fr));
}

.datosacademicos article{
    display: flex;
    gap: 1em;
    row-gap: 1em;
    column-gap: 1em;
    align-items: flex-start;
    padding: 2rem;
    font-size: 0.8rem;
}

.fadu{
    background-color:var(--color-4);
}

.dgpc{
    background-color:var(--color-4);
    width: 11rem;    
}


footer {
  background-color: var(--color-2);
  color: var(--color-1);
  padding: 1em;
  font-size: 0.8rem;
}

/*datos academicos*/

article .diseño{
   padding: 0rem 4rem;
   color: var(--color-2);
   text-align: center;
}

article .listatotal{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4, 25%),1fr);
    gap: 1rem;
    padding: 1rem 4rem;
}

article .nivel ul{
    color: var(--color-1);
}

/*PORTFOLIO*/

.trabajos{
    padding: 1rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}



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

    article .alumnos{
        grid-template-columns: repeat(3, 30%);
    }

    article .listatotal{
        display: grid;
        grid-template-columns: repeat(4, 25%);
    }

    h2{ 
        padding: 1rem 4rem;
        text-align: left;
    }
}

@media screen and (min-width: 1000px) {
    header nav ul{
        display: flex;
        justify-content: center;
        gap: 0.5em;
        align-items: center;
        font-size: 2.5rem;    
    }
}