/* Estilos básicos para el cuerpo */
body {
    font-family: 'Montserrat', sans-serif; /* Usar Montserrat */
    margin: 0;
    padding: 20px;
    background-color: #fff; /* Fondo blanco para el body */
    color: #333;
}

/* Estilos para el contenedor principal */
main {
    display: flex; /* Habilitar Flexbox */
    flex-direction: column; /* Por defecto, apilar en pantallas pequeñas */
    align-items: center; /* Centrar elementos cuando se apilan */
    max-width: 960px; /* Ancho máximo del contenido */
    margin: 40px auto; /* Centrar el bloque principal */
    padding: 20px;
    background-color: #fff; /* Fondo blanco para la sección main */
}

/* Contenedor para la imagen */
.main__image-column {
    flex: 1; /* Permite que ocupe espacio si es necesario */
    display: flex;
    justify-content: center; /* Centrar imagen horizontalmente */
    margin-bottom: 20px; /* Espacio entre imagen y texto en móvil */
}

main img {
    max-width: 100%; /* Asegura que la imagen sea responsiva */
    height: auto;
    border-radius: 50%; /* Opcional: para hacer la imagen redonda */
    width: 300px;
    height: 300px;
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
}

/* Contenedor para el texto y los enlaces */
.main__text-content {
    flex: 2; /* Permite que el texto ocupe más espacio */
    text-align: center; /* Centrar texto en pantallas pequeñas */
    padding: 0 15px;
}

.main__text-content h2 {
    color: #999999;
    margin-bottom: 5px;
    font-size: 10px; /* Tamaño del h2 */
    font-weight: 300; /* Estilo Light para h2 */
}

.main__text-content h1 {
    margin-top: 0;
    color: #333;
}

.main__text-content p {
    line-height: 1.6;
    color: #555;
    font-size: 12px; /* Tamaño del párrafo */
}

.main__text-content a {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    margin: 10px 5px 0;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.main__text-content a:hover {
    background-color: #0056b3;
}

/* Media query para pantallas más grandes (tablet y desktop) */
@media (min-width: 768px) {
    main {
        flex-direction: row; /* Cambiar a fila en pantallas grandes */
        align-items: flex-start; /* Alinear elementos al inicio de la cruz */
        text-align: left; /* Alinear texto a la izquierda */
    }

    .main__image-column {
        margin-bottom: 0; /* Eliminar el margen inferior cuando está en fila */
        margin-right: 40px; /* Espacio entre imagen y texto */
    }

    .main__text-content {
        text-align: left; /* Alinear texto a la izquierda en pantallas grandes */
        margin-top: 40px; /* Bajar el contenido de texto para alinearlo con la imagen */
    }
}