/* PERFIL */
.perfil {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 90px;  /* Reducimos el padding general */
    background-color: #D9D9D9; /* Fondo gris claro */
    text-align: center;  /* Asegura que el texto esté centrado */
    flex-wrap: wrap; /* Permite que el contenido se ajuste si es necesario */
}

.foto {
    width: 310px; /* Reducimos el tamaño de la foto */
    height: 450px; /* Reducimos el tamaño de la foto */
    margin-right: 45px; /* Espacio entre la foto y el texto */
    border-radius: 20px;
}

.foto img {
    width: 100%;
    height: 100%; /* Asegura que la foto sea cuadrada */
    border-radius: 20px;
    box-shadow: -50px -50px 0px 12px #0F1633; /* Sombra sólida en la parte superior izquierda */
}

.info {
    margin-left: 10px;  /* Reducimos el margen de la izquierda */
    font-size: 16px;
    max-width: 1200px; /* Establecemos un ancho máximo para que el texto no se extienda demasiado */
    word-wrap: break-word; /* Hace que las palabras largas se rompan y se ajusten a la siguiente línea */
    overflow-wrap: break-word; /* Asegura que las palabras largas rompan de manera apropiada */
}

.info h2 {
    font-size: 50px;
    margin: 0;
    color: #152268; /* Azul oscuro */
    text-align: left; /* Alineamos el h2 a la izquierda */
}

.info h3 {
    font-size: 35px;
    margin: 10px 0;  /* Le damos un margen pequeño superior e inferior */
    color: #333; /* Azul oscuro */
    text-align: left; /* Alineamos el h3 a la izquierda */
}

.info p {
    font-size: 40px;
    color: #333;
    padding: 10px; /* Espacio dentro del párrafo */
    margin: 5px 0; /* Reducimos el margen exterior */
    text-align: justify; /* Justificamos el texto en el párrafo */
}

/* Media Query para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .perfil {
        flex-direction: column; /* Cambia de fila a columna en pantallas pequeñas */
        padding: 40px 20px; /* Reduce el padding en móviles */
    }

    .foto {
        margin-top: 25PX;
        width: 210px; /* Reduce el tamaño de la foto en móviles */
        height: 280px; /* Ajusta la altura de la foto */
        margin-bottom: 20px; /* Espacio entre la foto y la info */
        margin-right: 0; /* Elimina el margen derecho */
        box-shadow: none; /* Elimina la sombra en móviles */
    }

    .info {
        margin-left: 0;  /* Elimina el margen izquierdo */
        font-size: 14px; /* Reduce el tamaño del texto en móviles */
        max-width: 100%; /* Asegura que el ancho sea fluido */
    }

    .info h2 {
        font-size: 28px; /* Reduce el tamaño del título en móviles */
    }

    .info h3 {
        font-size: 22px; /* Reduce el tamaño del subtítulo en móviles */
    }

    .info p {
        font-size: 16px; /* Reduce el tamaño del párrafo en móviles */
    }
}