@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@400;700&display=swap');

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

body{
    font-family:'Roboto', sans-serif;
    font-weight:400;
    background-color:#efefef;
    color:#111111;
    line-height:1.5;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:#111111;
}

h1,
h2,
h3,
h4{
    font-family:'Anton', sans-serif;
    font-weight:400;
}

/* ==========================
   HEADER
========================== */

.header{
    background-color:#dddddd;
    padding:1.5rem;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.logo{
    width:8rem;
    margin-bottom:1rem;
}

/* ==========================
   NAVEGACIÓN
========================== */

.nav ul{
    list-style:none;

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}

.nav li{
    margin:0 1rem;
}

.nav a{
    font-family:'Roboto', sans-serif;
    font-weight:700;
}

/* ==========================
   HERO
========================== */

.hero{
    width:90%;
    max-width:60rem;

    margin:3rem auto;

    text-align:center;
}

.hero h1{
    font-size:4rem;
    line-height:1;
    margin-bottom:0.5rem;
}

.hero h2{
    font-size:2rem;
    line-height:1.1;
    margin-bottom:1rem;
}

.hero p{
    max-width:45rem;
    margin:auto;
}

/* ==========================
   PERFILES
========================== */

.perfiles{
    width:90%;
    max-width:70rem;

    margin:3rem auto;

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}

.card-perfil{
    width:18rem;

    background-color:#f8f8f8;
    border:1px solid #cccccc;

    padding:1.5rem;
    margin:1rem;

    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.card-perfil img{
    width:6rem;
    border-radius:50%;
    margin-bottom:1rem;
}

.card-perfil h3{
    font-size:1.5rem;
    margin-bottom:0.5rem;
}

.card-perfil p{
    margin-bottom:1rem;
}

.card-perfil a{
    font-weight:700;
}

/* ==========================
   DATOS ACADÉMICOS
========================== */

.academicos{
    width:90%;
    max-width:70rem;

    margin:4rem auto;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.academicos-imagen{
    margin-bottom:2rem;
}

.academicos-imagen img{
    width:10rem;
}

.academicos-info{
    width:100%;
}

.academicos-info h2{
    font-size:2.5rem;
    margin-bottom:2rem;
    text-align:center;
}

.info-box{
    background-color:#f8f8f8;
    border:1px solid #cccccc;

    padding:1.5rem;
    margin-bottom:1.5rem;
}

.info-box h3{
    font-size:1.5rem;
    margin-bottom:0.75rem;
}

.info-box h4{
    font-size:1.1rem;
    margin-bottom:0.75rem;

    font-family:'Roboto', sans-serif;
    font-weight:400;
    color:#555555;
}

.info-box ul{
    padding-left:1.25rem;
}

.info-box li{
    margin-bottom:0.3rem;
}
.botones-links{
    margin-top:1rem;
}

.botones-links a{
    display:inline-block;
    padding:0.5rem 1rem;
    margin-right:0.5rem;
    background-color:#dddddd;
    border:1px solid #cccccc;
    color:#111111;
}
/* ==========================
   FOOTER
========================== */

footer{
    background-color:#dddddd;
    padding:2rem;
    margin-top:3rem;
}

footer p{
    width:90%;
    max-width:60rem;

    margin:auto;

    text-align:center;
    color:#555555;
}