/* Fondo general y tipografía */
body {
     background: radial-gradient(circle at 20% 30%, #fceabb, transparent 40%),
              radial-gradient(circle at 80% 70%, #ffdde1, transparent 50%),
              radial-gradient(circle at 50% 50%, #ffffff, transparent 60%);
     background-color: rgb(234, 236, 237);
     color: black;
     font-family: Arial, Helvetica, sans-serif;
     text-align: center;
     margin: 2;
     padding: 2;
}

/* Fondo blanco semi transp */
.contenedor {
    background-color: rgba(255, 255, 255, 0.453); /* blanco semitransparente */
    margin: 2rem auto;
    padding: 2rem;
    max-width: 700px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

header {

    .menu-principal {
        padding: 5px pxpx;
        margin-top: 0px;
    }

    .menu-principal ul {
    list-style-type: none; /* Quitamos los puntos de la lista */
    margin: 0; /* Quitamos márgenes por defecto de la lista */
    padding: 0; /* Quitamos relleno por defecto de la lista */
    text-align: center; /* Centramos los elementos del menú */
}

.menu-principal ul li {
    display: inline-block; /* Colocamos los elementos en línea */
}

.menu-principal ul li a {
    display: block; /* Hacemos que el enlace ocupe todo el espacio del li */
    padding: 15px 25px; /* Relleno interno para cada enlace (más espacio clickeable) */
    text-decoration: none; /* Quitamos el subrayado de los enlaces */
    color: #000000; /* Color del texto de los enlaces */
    font-weight: bold; /* Texto en negrita */
}

.compañeros {
  /* tus estilos van acá */
  color: rgb(0, 0, 0);
  font-weight: bold;
  text-decoration: none;
}


.menu-principal ul li a:hover {
    background-color: #ffffffb1; /* Cambiamos el color de fondo al pasar el mouse */
    color: #5f0000; /* Cambiamos el color del texto al pasar el mouse */
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* sombra suave al hacer hover */
    transition: box-shadow 0.7s ease; /* transición suave */
}
  
    .foto-clara {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 20px;
}

}

/* Encabezado Clara Bertarini */
h1 {
    font-size: 2.5rem;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* h2 */
h2 {
    font-size: 1.2rem;
    margin-top: 30px;
    margin-bottom: 10px;
}

h3 {
    font-size: 1rem;
    margin-bottom: 10px;
}

/* Listas */
ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 30px;
}

li {
    margin: 5px 0;
}

/* Footer */
footer {
    padding: 30px 10px;
    margin-top: 50px;
}
footer div {
    margin-bottom: 20px;
}

h4 {
    margin-bottom: 5px;
    font-size: 1rem;
    font-weight: bold;
}