body {
            font-family: 'Nunito Sans', sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center; /* Centra el contenido horizontalmente en la página */
            min-height: 100vh;
            background-color: white; /* Un fondo claro para que se vea mejor */
            padding: 2rem; /* Espacio alrededor de todo el contenido */
        }
        .main-container {
            /* Contenedor principal que apila las filas de logo y título */
            display: flex;
            flex-direction: column; /* Apila las filas verticalmente */
            gap: 1.5rem; /* Espacio entre cada fila de logo y título */
            padding: 1.5rem; /* Relleno dentro del contenedor principal */
            border-radius: 0.75rem; /* Bordes redondeados para el contenedor */
            background-color: #f2f0fa; /* Fondo blanco para el contenedor */
        }
        .logo-row {
            /* Cada fila con un círculo y un título */
            display: flex;
            flex-direction: row; /* Elementos en línea */
            align-items: center; /* Alinea verticalmente los elementos en el centro */
            gap: 1.5rem; /* Espacio entre el círculo y el título en la misma fila */
        }
        .circle {
            width: 60px; /* Ancho fijo para el círculo */
            height: 60px; /* Alto fijo, igual al ancho para asegurar un círculo */
            background-color: #4b3c8c; /* Color del círculo */
            border-radius: 50%; /* Asegura que el elemento sea un círculo perfecto */
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra sutil para el círculo */
            flex-shrink: 0; /* Evita que el círculo se encoja en pantallas pequeñas */
        }
        .letters {
            color: white;
            font-size: 1.2rem; /* Tamaño de las letras MC */
            font-weight: 700; /* Negrita para las letras */
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Sombra para las letras */
        }
        .title {
            color: #2c528b; /* Color azul oscuro para el título (color primario) */
            font-size: 1.5rem; /* Tamaño del título */
            font-weight: 700; /* Negrita para el título */
            text-align: left;
            margin: 0; /* Elimina el margen predeterminado del h3 */
            line-height: 1.3; /* Ajusta la altura de línea para títulos largos */
        }
        /* Estilo para los enlaces para eliminar el subrayado por defecto */
        .logo-link {
            text-decoration: none; /* Elimina el subrayado de los enlaces */
            color: inherit; /* Hereda el color del texto de su padre */
            display: flex; /* Asegura que el enlace se comporte como un contenedor flex */
            align-items: center; /* Centra los elementos verticalmente dentro del enlace */
            gap: 1.5rem; /* Mantiene el espacio entre el círculo y el título dentro del enlace */
        }
        /* Estilos responsivos para pantallas más pequeñas */
        @media (max-width: 768px) {
            .logo-row {
                flex-direction: column; /* Vuelve a columna en pantallas medianas */
                gap: 0.5rem;
                text-align: center;
            }
            .circle {
                width: 60px;
                height: 60px;
            }
            .letters {
                font-size: 1.5rem;
            }
            .title {
                font-size: 1.2rem;
                text-align: center; /* Centra el título en pantallas pequeñas */
            }
            /* Ajuste para enlaces en pantallas pequeñas */
            .logo-link {
                flex-direction: column;
                gap: 0.5rem;
            }
        }