@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto+Slab&display=swap');
*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
   font-family: "Roboto Slab", serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   margin: 0 auto;
   color: #fff;
}

img{
    max-width: 100%;
}  
header{
    background-color: #35757a;
    padding: 1.75rem;
    box-shadow:  0 4px 8px #344535;
    margin-bottom: 2rem;
}
.menu li a {
    text-decoration: none;
    color: #c6e4f7;
    font-weight: bold;
    font-size: 0.9rem;
    background-color: #355f7a;
    padding: 8px 20px; 
    border-radius: 0px; 
    transition: all 0.3s ease; 
}
 
    .menu li a:hover {
    background-color: #343645;
    color: #ffffff; 
}

    nav {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 30px;
}

nav ul {
    display: flex;
    justify-content: center;
    gap: 20px;
}

nav ul li {
    width: 120px;
    text-align: center;
    list-style: none;
}
#logo{
    width: 50%;
    margin: auto;
    margin-bottom: 1.5rem;
}

#logo img{
    min-width: 100%;
    display: block;
}

footer{
    background-color: #35757a;
    padding: 1.75rem;
}
footer p{ 
    color: #ffff;
    font-size: .8em;
/* acá e especifica que es el pie de página, después en las sections que armaste, ponerle "un título" para aclarar que es para ese sector :)*/
}
main {
    background-color: #355f7a;
    padding: 5px 50px 25px 50px;
}
h1{
    text-align: center;
    color: #ffffff;
    letter-spacing: 0.2em;
    text-shadow: #1b313e 0em 0.1em 0.1em ;
}
h2{
    color: #ffffff;
    text-align: center;
    margin: 1em;
    text-shadow: #1b313e 0em 0em 0.1em ;
    }
h3{
    color: #ffffff;
    margin:0.8em;
    text-shadow: #1b313e 0em 0.1em 0.1em ;
}
h5{
  margin-top: 25px;   
}
.contenedor-foto img {
    width: 150px;
    height: 200px; 
    aspect-ratio: 1 / 1;    
    object-fit: cover;       /* Corta los bordes sin deformar la foto */
    object-position: center; /* Centra el recorte */
}
.rotulos_individuales p {
    margin-top: 12px;   
    margin-bottom: 25px;   
}
.fotosindividuales {
    display: inline-block; 
    text-decoration: none;
    color: #c6e4f7;
    font-weight: bold;
    font-size: 0.9em;
    background-color: #35757a;
    padding: 5px 20px;  
    border-radius: 10px; 
    margin-top: 10px;        /* Separa el botón de la foto */
    transition: all 0.5s ease; 
}

.fotosindividuales:hover {
    background-color: #6ce8f1;
    color: #ffffff; 
}
.rotulos_individuales { 
    max-width: 75em;
    margin: 0 auto;
}
.rotulos_individuales img {
    width: 180px;
    border-radius: 0.25em;
    border: solid 3px #efefef;
    box-shadow: 5px 5px 5px #7474747a;
    text-align: center;
}
.rotulos_individuales img:hover {
    border: solid 3px #60d7e0;
}
.datos_académicos img {
  display: block;
  width: 100px;
  margin-top: 3px;
  object-fit: contain;
  padding: 0.5rem;
  background-color: #c6e4f7;
}
.datos_académicos ul{
    margin-top: 12px;   
    margin-bottom: 25px;
    list-style: none;   
}