body {
    /* El "../" es para salir de la carpeta 'styles_principal' y encontrar el GIF */
    background-image: url('https://wallpapers.com/images/hd/4k-ultra-hd-galaxy-electric-clouds-fji5pyez6yuuuh35.jpg'); 
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

/*
   <style>
      
      .img-perfil {
        width: 180px;
        height: 180px;
        object-fit: cover;
      }
    </style>
*/
.img-perfil {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 5px solid white;
}

 /*Efecto de tarjeta de cristal para que el texto resalte */
.glass-effect {
    background: rgba(255, 255, 255, 0.7); /* Blanco con transparencia */
    backdrop-filter: blur(10px); /* Esto hace que el fondo se vea borroso */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}







/* Seleccionamos la clase que ya tienes en el HTML */
.seccion-proyectos1 {
    /* Color gris oscuro con 60% de transparencia */
    background-color: rgba(52, 58, 64, 0.1) !important; 
    
    /* Efecto de desenfoque para que se vea tipo cristal */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Bordes redondeados y margen para que no toque las orillas */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Hacemos que sea "flaco" y centrado */
    max-width:600px;
    margin-left: auto;
    margin-right: auto;
}

/* Ajuste para que el título h2 sea blanco y resalte sobre el gris */
.seccion-proyectos1 h2 {
    color: #ffffff;
    font-weight: bold;
}


/* Seleccionamos la clase que ya tienes en el HTML */
.seccion-proyectos2 {
    /* Color gris oscuro con 60% de transparencia */
    background-color: rgba(52, 58, 64, 0.1) !important; 
    
    /* Efecto de desenfoque para que se vea tipo cristal */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Bordes redondeados y margen para que no toque las orillas */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Hacemos que sea "flaco" y centrado */
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Ajuste para que el título h2 sea blanco y resalte sobre el gris */
.seccion-proyectos1 h2 {
    color: #ffffff;
    font-weight: bold;
}


.contenedor-foto {
    position: relative;
    display: inline-block;
}

.escudo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(0,0,0,0); /* Totalmente invisible */
}