  <style>
        /* Estilos CSS para establecer el fondo de color */
        
        .logo {
            margin-top: 50px;
            text-align: center;
        }
        .logo img {
            width: 250px;
            height: 70px;
        }
        .content {
            margin-top: 20px;
            text-align: center;
            color: white;
        }
        .content2 {
            margin-top: 20px;
            text-align: center;
            color: white;
            font-family: "Calibri", monospace; /* Cambia la fuente para el contenido */
            font-size: 20px;
        }

        .content3 {
            margin: 0 auto; /* Alinear al centro horizontalmente */
            color: white;
            font-family: "Calibri", monospace; /* Cambia la fuente para el contenido */
            width: 220px;
            max-width: 100%; /* Establece un ancho máximo */
            height: 350px;
            background-color: black;
        }
        .content4 {
            padding-top: 25px;
            padding-left: 10px;
            padding-right: 10px; /* Corregido el error de sintaxis */
            text-align: center;
            color: white;
            font-family: "Calisto MT"; /* Cambia la fuente para el contenido */
            font-size: 30px;
            text-shadow: 2px 2px 2px grey; /* Agrega un biselado con sombra */

        }
 
        .content5 {
            margin-top: 0px;
            padding-top: 10px;
            text-align: center;
            padding-bottom: : 0px;
            color: white;
            font-family: "Calibri", monospace; /* Cambia la fuente para el contenido */

        }
        .content6 {
            margin-top: 80px;
            padding-left: 0px;
            padding-right: 10px; /* Corregido el error de sintaxis */
            text-align: center;
            color: white;
            font-family: "Calibri", monospace; /* Cambia la fuente para el contenido */
            font-size: 20px;
        }

.content7 {
    margin: 0 auto;
    color: white;
    font-family: "Calibri", monospace;
    width: 440px; /* Ancho predeterminado */
    max-width: 100%;
    height: 500px;
    background-color: black;
}

/* Consulta de medios para dispositivos con un ancho máximo de 600px (típicamente dispositivos móviles) */
@media only screen and (max-width: 600px) {
    .content7 {
        width: 100%; /* Cambia el ancho a 100% en dispositivos móviles */
    }
}

         .content8 {
            padding-top: 25px;
            padding-left: 10px;
            padding-right: 10px; /* Corregido el error de sintaxis */
            text-align: center;
            color: white;
            font-family: "Calisto MT"; /* Cambia la fuente para el contenido */
            font-size: 18px;
            text-shadow: 2px 2px 2px grey; /* Agrega un biselado con sombra */
            line-height: 1; /* Esto establece un interlineado más pequeño */
            margin-bottom: 5px; /* Esto establece el espaciado entre párrafos */

        }
        .black-box {
            margin-top: 50px;
            text-align: center;
            width: 200px;
            height: 350px;
            background-color: black;
        }
       .imagen {
             margin-top: 0px;
            text-align: center;
            width: 100px;
            height: 100px;
            filter: drop-shadow(2px 2px 2px rgba(200, 200, 200, 0.5)); /* Agrega un biselado con sombra con transparencia */
        }

             .imagen2 {
             margin-top: 0px;
            text-align: center;
            padding-left: 0px;
            width: 300px;
            height: 120px;
            filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); /* Agrega un biselado con sombra con transparencia */
        }

        .imagen3 {
             margin-top: 0px;
             margin-left: 0px;
            text-align: left;
            width: 200px;
            height: 200px;
            filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); /* Agrega un biselado con sombra con transparencia */
        }
        .imagenlogo {
             margin-top: 0px;
             margin-right: 10px;
            text-align: center;
            width: 35px;
            height: 35px;
            filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); /* Agrega un biselado con sombra con transparencia */
        }

        .bg-image {
        margin-left: 0px;
      background-image: url('img/foto2.jpg');
      background-size: 200;
      padding-left: 30px;
     background-repeat: no-repeat; 
      background-position: left;
      height: 150px; /* Ajusta la altura según sea necesario */
    }
    .bg-gradient-dark {
    background-image: linear-gradient(to right, #aa3caa, #730f73); /* Degradado de negro a blanco */

    /* Otros estilos de la fila si es necesario */
}


.enlace {
    text-decoration: none; /* Elimina el subrayado del enlace */
    color: inherit; /* Hereda el color del texto del padre */
    cursor: pointer; /* Cambia el cursor al pasar sobre el enlace */
}

/* Opcional: Estilo para el enlace cuando se está pasando el cursor sobre él */
.enlace:hover {
    text-decoration: none; /* Mantén el subrayado eliminado */
    color: inherit; /* Mantén el color del texto */
    cursor: pointer; /* Mantén el cursor personalizado */
}

    </style>