@charset "utf-8";

@font-face {
    font-family: "Nunito-Black";
    src: url(../fuentes/Nunito-Black.ttf);}
@font-face {
    font-family: "Nunito-Regular";
    src: url(../fuentes/Nunito-Regular.ttf);}
@font-face {
    font-family: "Nunito-Bold";
    src: url(../fuentes/Nunito-Bold.ttf);}
@font-face {
    font-family: "Lato-Black";
    src: url(../fuentes/Lato-Black.ttf);}

@font-face {
    font-family: "Lato-Bold";
    src: url(../fuentes/Lato-Bold.ttf);}

@font-face {
    font-family: "Lato-Regular";
    src: url(../fuentes/Lato-Regular.ttf);}

@font-face {font-family: "DMSerifDisplay";
    src: url(../fuentes/DMSerifDisplay-Regular.ttf);}

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

.html{
    scroll-behavior: smooth;
    display: grid;
    grid-template-columns: 4;
    grid-template-rows: 3;}

body { display: grid;
    grid-template-columns: 3fr 3fr 3fr;
    grid-template-rows: 130px 1fr 3fr 3fr 9fr 100px;
    background: linear-gradient(80deg, rgba(157,23,230,1) 0%, #f62851 100%);}

  /* HEADER */
header {
    align-items: center;
    grid-column-start: 1;
    grid-column-end: 4;
    display: flex;
    justify-content: space-between;
    padding: 1.5em;
    background-color: #fff ;}

    header div img {
        width: 6em;
        padding: 1em;
        padding-left: 0.5em;
        padding-bottom: 3em;}

 /* Navegación */
 nav {
    display: inline-block;
    row-gap: 0.2em;
    column-gap: 0.5em;
    flex-direction: column;
    text-align: right;
    flex-wrap: nowrap;}
nav ul {margin-bottom: 0.5em;}
nav a {
    display: inline;
    gap: 0.5em;
    text-decoration: none;
    color: #FF578A;
    font-family: 'Lato', sans-serif;
    font-weight: 900;}
 nav ul li a {
    display: block;
    text-align: right;
    text-decoration: none;
    color: #FF578A;
    font-family: 'Lato', sans-serif;
    font-weight: 400;}
a:hover{color:#0CBFF2}
a { text-decoration: none;
    color: #fff;}

  /* MAIN */
main   {
    grid-area: 2/ 1 / 6 / 4 ;
    margin-top: 0em;
    margin-right: 0em;
    margin-left: 0em;
    margin-bottom: 1em;
    padding-top: 0em;
    padding-right: 1em;
    padding-bottom: 1em;
    padding-left: 1em;}

main img.fotoalumno{
    min-width: 13em;
    width: 17%;
    margin-top: 2em;
    margin-right: 8em;
    margin-bottom:2em;
    margin-left: 0.5em;
    border-radius: 1em;
    box-shadow: 3px 3px 6px rgb(0 0 0 / 25%);}

main div.foto {
    grid-area: 2/2/3/3;
    display: flex;}

        /* Títulos */

h1 {text-align: left;
    font-family: 'Lato', sans-serif;
    color: #ffe2d4;
    flex-wrap: nowrap;
    padding-top: 0em;
    padding-right: 3em;
    padding-bottom: 0em;
    padding-left: 1em;
    margin: -0.5em;
    font-size: 1.8em;}

h2, h3, h4 {
    margin: 0.5em;
    padding: 0.5em;
    box-sizing: border-box;
    color: #ffe2d4;}

h4 {background-color: rgba(255,255,255, 0.18);
    border-radius: 0.4em;
    font-family: 'Nunito-Regular', sans-serif;
    font-size: 0.7em;
    box-shadow: 3px 3px 6px rgb(0 0 0 / 25%);}

h4 strong {
    font-family: 'Nunito-Bold';
    font-size: 7em;}

h3 {flex-wrap: nowrap;
    font-family: 'Lato-Bold', sans-serif;}

h2 {font-family: 'Nunito-Regular',sans-serif;
    flex-wrap: nowrap;
    font-size: medium;
    text-align: center;}

  /* FOOTER */
footer {
grid-area: 6 / 1 / 7 / 4;
padding: 1em;
text-align: justify; 
background-color: #fff;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 10px;}

footer p { color:#f5753e;
font-weight: 900;
font-size: 1.2em;    margin-left: 5%;
font-family: 'Lato-regular';
margin-right: 5%;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;}


p {color: #ffe2d4;
font-family: 'Lato', sans-serif´;
font-weight: 200;
margin: 1em;}
ol,ul { list-style: none;}

    /*Aside*/

aside {margin: 2em;
    padding: 0.5em;}
    aside.portfolioexterno {
        background-color: rgba(255,255,255, 0.18);
        box-shadow: 3px 3px 6px rgb(0 0 0 / 25%);
        border-radius: 0.4em;}
aside.portfolioexterno h2 {
    margin: 0.5em;
    padding: 0.5em;
    text-align:center;
    color: #fff;}
aside.portfolioexterno span {
    display: flex;
    gap: 0.5em;
    justify-content: center;
    align-items: flex-end;}

    /* SECTIONS */
    section h4 {
        padding-left: 1em;
        padding-top: 3em;
        padding-bottom: 2em;
        padding-right: 3em;
        font-size: 0.8em;
        margin-left: 0.3em;
        margin-right: 0.3em;}

    section {margin-top: 1em;}
   /*PORCENTAJE*/
    section.porcentaje {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;}
    section.porcentaje p {
        font-family: 'DMSerifDisplay';
        text-align: right;
        font-size: 1.6em;}

    /* MATERIAS*/
section.materias {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;}
section.materias ul {margin: 1em;}
section.materias a {
    margin-top: 2em;
    margin-right: 4em;
    margin-bottom: 2em;
    justify-content: center;
    font-family: 'Lato-Bold', sans-serif;
    color: #ffe2d4;}

section.materias li {
    width:100%;
    text-align: left;
    padding: 0.3em;
    margin-top: 0.5em;}
section.materias a:hover {color: #0CBFF2}
section.materias h4 {
    padding-right: 1em;
    text-align: right;}

    /* TRABAJOS */

section.trabajos p {
    font-family: 'DMSerifDisplay',sans-serif;
    font-size: 1.3em;
    grid-area: 1/2/1/4;
    margin-top: 0.5em;
    margin-left: 0.1em;
    margin-right: 0.1em;
    margin-bottom: 0.8em;
    text-align: center;}

section.trabajos a {grid-area: 2/2/3/4;}

section.trabajos img {
    max-width: 100%;
    flex-wrap: wrap;
    border-radius: 0.3em;
    margin-bottom: 0.2em;}

section.trabajos div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 0.2fr;}

section.trabajos h4 {
    display: inline-block;
    padding-left: 1em;
    padding-right: 0.5em;
    padding-top: 0em;
    padding-bottom: 4em;
    margin-bottom: 0.7em;
    margin-top: 0.5em;
    grid-area: 1/1/3/2;}
section.trabajos picture {
        display:grid;
        grid-template-columns: 7fr 7fr 7fr 7fr;
        grid-template-rows: 4fr 2fr;
        gap: 0.2rem;
        margin-left: 0.3em;
        margin-right: 0.1em;}

#trabajo3 {
    grid-area: 2/1/2/2;    
    border-bottom-left-radius: 1em;
    border-top-right-radius: 3em;}
#trabajo4 {
    grid-area: 2/2/2/3;
    border-bottom-right-radius: 1em;
    border-top-left-radius: 3em;}
#trabajo5 {
    grid-area: 2/3/2/4;
    border-bottom-left-radius: 1em;
    border-top-right-radius: 3em;}
#trabajo6 {
    grid-area: 2/4/2/5;
    border-bottom-right-radius: 1em;
    border-top-left-radius: 3em;}
#trabajo7 {grid-area: 4/1/4/3}
#trabajo8 {grid-area: 4/3/4/5}
#trabajo9 {grid-area: 1/1/3/3}
#trabajo13 {grid-area: 1/3/1/5}


    /* FOTOGRAFIA */
    article.fotografia {   grid-area: 2/2/3/4;}
    article.fotografia section.fotos p {font-family: 'DMSerifDisplay', serif;
        padding-bottom: 0em;
        font-size: 2.5em;
        text-align: left;
        margin-top: 3em;
        margin-left: 1em;
        margin-bottom: 2em;
        margin-right: 2em;}
    article.fotografia picture {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    max-width: 100%;
    margin-top: -1.5em;}
    
#foto1 {grid-area: 1/1/2/2}
#foto2 {grid-area: 1/2/2/3}
#foto3 {grid-area: 1/3/2/4}
#foto4 {grid-area: 2/1/4/3}
#foto5 {grid-area: 1/4/2/5}
#foto6 {grid-area: 2/3/4/5}
#foto7 {grid-area: 4/1/4/2}
#foto8 {grid-area: 5/1/7/3}
#foto9 {grid-area: 4/2/4/3}
#foto10 {grid-area: 4/3/5/4}
#foto11 {grid-area: 7/1/8/2} 
#foto12 {grid-area: 4/4/5/5}
#foto13 {grid-area: 5/3/7/7}
#foto14 {grid-area: 7/2/8/3}
#foto15 {grid-area: 7/3/8/4}
#foto16 {grid-area: 8/1/10/3}
#foto17 {grid-area: 8/3/10/5}
#foto18 {grid-area: 10/1/12/3}
#foto19 {grid-area: 10/3/12/5}
#foto20 {grid-area: 7/4/7/5}

article.fotografia img { max-width: 100%;
border-radius: 0.5em;
padding: 0.2em;}

article.fotografia section.equipo {
    display: flex;
    flex-direction: column;
    margin-top: 0.5em;}

article.fotografia ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: #ffe2d4;
    margin-left: 0.5em;
    margin-right: 0.5em;
    font-family: 'Lato-Regular', sans-serif;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;}

article.fotografia li {
    text-align: center;
    margin-right: 0em;}

    /* ARTICLES */
#carrera h3 {
        margin-left: 0.3em;
        margin-top: 0.3em;}

article.tarea figure {
    display: grid;
    grid-template-columns: 3fr 3fr 3fr;
    grid-template-rows: 3fr 3fr 3fr ;
    gap: 1em;
    margin: 2em;}

article.tarea img {max-width: 100%;}
article.tarea ul {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.5em;}
article.tarea li {display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    align-content: center;}
    div.tarea {display: block;}
.AEM9 { align-self: baseline; }

div.disenositioweb {display: block;}
@media (min-width:768px) {
    main img.fotoalumno {
        min-width: 11em;
        width: 23%;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 1em;
        border-radius: 8em;
        box-shadow: -1px 6px 8px rgb(0 0 0 / 25%);}
    
    main div.foto {justify-content: center;}
    
    p {margin: 0;}
    
    h1 {padding-right: 1em;
        text-align: center;
        margin-top: 0.2em;}
    
    #dg {text-align: center;}
    
    h4 {font-size: 1em;}
    section h4 {padding-left: 1em;
        padding-right: 6em;
        padding-bottom: 2.3em;
        min-width: 97%;}
    section.materias h4 {
        padding-left: 1em;
        padding-right: 6em;
        text-align: left;
        padding-bottom: 2.3em;}
    article.alumno {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 5fr;}
    section.porcentaje {
        flex-wrap: nowrap;
        grid-area: 1/1/2/2;}
    section.porcentaje p {
        font-family: 'DMSerifDisplay', serif;
        font-size: 1.3em;
        text-align: center;
        padding-left: 0.2em;
        padding-right: 0.1em;
        margin-top: 1.5em;
        margin-bottom: 1.5em;}
    
    section.materias {grid-area: 1/2/1/3;}
    section.materias a {margin-right: 0;}
    section.materias ul {
        max-width: 97%;
        margin-top: 0.75em;
        margin-bottom: 0.75em;}
    section.materias li {
        text-align: center;
        margin-top: 0em;}
    
    section.materias, section.porcentaje, section.trabajos {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-top: 4em;}
    
    section.trabajos div {
       display: flex;
       flex-wrap: nowrap;
       flex-direction: column;}
    section.trabajos {grid-area: 2/1/2/3;margin-top: 2em;}
    section.trabajos h4 {
        padding-left: 1em;
        padding-top: 3em;
        text-align: left;
        padding-bottom: 2.3em;
        margin-right: 0.1em;
        margin-left: 0.1em;}
    
    
    
    section.trabajos picture {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 2fr 2fr;
        gap: 1em;
        margin-top: 3em;}
    
    #trabajo3 {
        grid-area: 2/2/3/3;
        border-bottom-left-radius: 3em;
        border-top-right-radius: 3em;}
    #trabajo4 {
        grid-area: 3/1/3/2;
        border-bottom-right-radius: 3em;
        border-top-left-radius: 3em;}
    #trabajo5 {
        grid-area: 2/3/2/4;
        border-bottom-left-radius: 3em;
        border-top-right-radius: 3em;}
    #trabajo6 {
        grid-area: 3/2/3/3;
        border-bottom-right-radius: 3em;
        border-top-left-radius: 3em;}
    #trabajo7 {
        grid-area: 4/2/4/3;
        border-bottom-right-radius: 3em;
        border-top-left-radius: 3em;}
    #trabajo8 {
        grid-area: 4/3/4/4;
        border-bottom-left-radius: 3em;
        border-top-right-radius: 3em;}
    #trabajo9 {
        grid-area: 1/1/2/2;
        border-bottom-left-radius: 3em;
        border-top-right-radius: 3em;}
    #trabajo13 {
        grid-area: 1/2/1/3;
        border-bottom-right-radius: 3em;
        border-top-left-radius: 3em;}
    
    section.trabajos p {
        padding-left: 0.1em;
        padding-right: 0.1em;
        font-size: 2.3em;
        text-align: right;}
    article.fotografia ol {margin-top: 2.5em;
        font-family: 'Lato-Bold';}
        article.fotografia picture {
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
            
    #foto1 {grid-area: 1/3/2/4}
    #foto2 {grid-area: 1/1/3/3}
    #foto3 {grid-area: 1/4/1/5}
    #foto4 {grid-area: 3/2/5/4}
    #foto5 {grid-area: 2/3/2/4}
    #foto6 {grid-area: 2/4/2/5}
    #foto7 {grid-area: 5/3/7/5}
    #foto8 {grid-area: 3/1/3/2}
    #foto9 {grid-area: 3/4/3/5}
    #foto10 {grid-area: 8/3/8/4}
    #foto11 {grid-area: 4/4/4/5}
    #foto12 {grid-area: 4/1/4/2}
    #foto13 {grid-area: 5/1/5/2}
    #foto14 {grid-area: 6/2/6/3}
    #foto15 {grid-area: 6/1/6/2}
    #foto16 {grid-area: 5/2/5/3}
    #foto17 {grid-area: 7/3/7/4}
    #foto18 {grid-area: 7/1/9/3}
    #foto19 {grid-area: 7/4/7/5}
    #foto20 {grid-area: 8/4/8/5}
    
    aside.portfolioexterno {    max-width: 100%;
        margin-bottom: 1em;
        margin-top: 2em;
        margin-left: 1em;
        margin-right: 1em;
        border-radius: 4em;}
}
@media (min-width: 992px) {body {
    grid-template-rows: 100px 1fr 3fr 3fr 9fr 65px;}
header {
    padding-top: 0em;
    padding-bottom: 0em;
    padding-left: 4em;
    padding-right: 4em;
    background-color: #fff ;}
main img.fotoalumno {
        margin-bottom: 2em;
        min-width: 10em;
        width: 18%;
        border-radius: 11em;}
section.materias, section.porcentaje {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;}
section.porcentaje p {min-width: 38%;}
section.materias ul {min-width: 38%;}
section.trabajos p {margin-bottom: 1em;}
article.alumno {column-gap: 0.5em;}
section h4 {min-width: 60%;}
article.alumno {grid-template-rows: 0.5fr 5fr;}
article.fotografia section.fotos p {
    margin-right: 0.5em;
    font-size: 4.5em;
    text-align: right;
    margin-top: 2em;}
    article.fotografia picture {
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;}
#foto1 {grid-area: 1/1/2/2}
#foto2 {grid-area: 1/2/2/3}
#foto3 {grid-area: 1/3/2/4}
#foto4 {grid-area: 2/1/3/2}
#foto5 {grid-area: 1/4/2/5}
#foto6 {grid-area: 2/4/2/5}
#foto7 {grid-area: 2/2/3/3}
#foto8 {grid-area: 2/3/3/4}
#foto9 {grid-area: 3/4/3/5}
#foto10 {grid-area: 4/4/5/5}
#foto11 {grid-area: 3/2/4/3}
#foto12 {grid-area: 3/1/4/2}
#foto13 {grid-area: 3/3/4/4}
#foto14 {grid-area: 4/3/5/4}
#foto15 {grid-area: 4/2/5/3}
#foto16 {grid-area: 4/1/5/2}
#foto17 {grid-area: 5/1/6/2}
#foto18 {grid-area: 5/2/6/3}
#foto19 {grid-area: 5/3/6/4}
#foto20 {grid-area: 5/4/6/5}}