body, html {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    color: white;
}

.gradiente {
    background: radial-gradient(circle,  #041580, #040426);
    position: absolute;
    width: 100%;
    height: 100%;
}


.pagina-principal img {
    position: relative;
    align-items: center;
    width: 25%; /* La imagen ocupa el 100% del ancho del contenedor */
    height: auto; /* Mantiene la proporción de aspecto de la imagen */
    margin: 20px auto;
    overflow: hidden; /* Ocultar las esquinas que quedan fuera del radio */
    border-radius: 50%;
}

.foto-perfil {
    width: 50px; /* Tamaño de la foto de perfil */
    height: 50px;
    border-radius: 50%; /* Hacer la imagen circular */
    margin-bottom: 20px; /* Espacio entre la imagen de perfil y el nombre */
}

.contenido-centrado {
    position: absolute;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.barra-menu {
    background-color: white;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.barra-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

.barra-menu li {
    display: inline-block;
    margin-right: 20px;
}

.barra-menu a {
    text-decoration: none;
    color: #040c57;
    padding: 8px 15px;
    border-radius: 20px;
    transition: background-color 0.3s, color 0.3s;
}

.barra-menu a:hover,
.barra-menu a:focus {
    background-color: black;
    color: white;
}

.subpage {
    text-align: center;
    background: radial-gradient(circle,  #041580, #040426);
    color: white;
    padding: 20px; /* Ajusta el espacio interno según sea necesario */

}

.experience {
    margin-bottom: 40px; /* Espacio entre experiencias, ajusta según sea necesario */
}

ul, li {
    padding-left: 20px; /* Ajusta el espacio entre el bullet y el texto */
    list-style-position: inside; /* Coloca el bullet dentro del área del padding */
}