/* Estilo para main de AboutMe */
main {
    display: grid;
    grid-template-areas:
    "section_skills section_languages section_photo" 
    "section_experience section_information section_cv"; 
    gap: 20px; /* Espacio entre las secciones */
    margin: 40px;
    grid-template-columns: 1fr 1fr 1fr; /* Distribuye el ancho de forma equitativa */
}
/* Estilo para main de AboutMe */

/* Estilo GENERAL para cada section de la grilla */
.section_card {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido horizontalmente dentro de la sección */
    background: #2c3e50; /* Fondo oscuro para resaltar el contenido */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
    transition: 1s ease;
    width: 100%; /* Hace que cada sección ocupe todo el espacio disponible en su columna */
    height: 100%; /* Asegura que las secciones tengan la misma altura */
    padding: 4px;
}
.section_card:hover {
    transition: transform 0.2s ease-in-out;
    background-color: #273454;
    transform: translateY(-5px);
}

/* Estilo para section de habilidades */
.section_skills { grid-area: section_skills; }

/* Estilo para section de lenguajes */
.section_languages { grid-area: section_languages; }

/* Estilo para section de experiencia */
.section_experience{ grid-area: section_experience; }

/* Estilo para article de experiencia */
.article-experience{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* Estilo para section de información */
.section_information{ grid-area: section_information; }

/* Seccion para descargar CV*/
.section_cv{
    grid-area: section_cv;
    display: flex;
    justify-content: center;
    align-items: center;
}
.button_with_underline{
    font-size: 25px;
}

/* Logo SAP */
#img-sap{
    max-width: 100px;
    max-height: 100px;
    margin-left: 50px;
}

/* Estilos para section de foto*/
.section_photo {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.personal_photo {
    object-fit: contain;
    max-height: 300px; /* Altura máxima definida para mantener la proporción */
    max-width: 300px; /* Ancho máximo definido */
    border-radius: 50%; /* Transformando en imagen circular */
    border: 5px solid #e0e0e0; /* Borde sutil */
    width: 75%; /* Ajusta el tamaño */
    height: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Sombra suave */
    filter: grayscale(100%) blur(2px); /* Blanco y negro con desenfoque */
    transition: transform 0.5s ease, box-shadow 0.5s ease, filter 0.5s ease;
}
.personal_photo:hover {
    filter: grayscale(0%) blur(0); /* Elimina el desenfoque y aplica color al pasar el ratón */
    transform: scale(1.1); /* Aumenta el tamaño */
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.5); /* Aumenta la sombra con resplandor */
}

/* Títulos y parrafos de los section*/
h2 {
    margin: 0;
    text-align: center;
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-size: 25px; /* Tamaño de fuente ligeramente aumentado */
    color: #ffffff; /* Color blanco para mejor contraste */
    margin-bottom: 15px; /* Espaciado inferior para separar del contenido */
    border-bottom: 2px solid #ffffff;
    padding-bottom: 10px;
    width: 100%;
}

h3{
    margin: 0;
    text-align: center;
    font-family: "Titillium Web", sans-serif;
    font-weight: 500;
    font-size: 19px; /* Tamaño de fuente ligeramente aumentado */
    color: #ffffff; /* Color blanco para mejor contraste */
}

p {
    font-family: "Titillium Web", sans-serif;
    font-weight: 500;
    font-size: 15px; 
    color: #cccccc; 
    margin: 10px 0; 
    text-align: center;
}
/* Títulos y parrafos de los section*/

/* Estilos para cada subpunto de habilidaes, lenguajes e informacion personal*/
.skill, .language {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.skill i, .language i {
    font-size: 20px;
    color: #1AAB8A;
    margin-right: 10px;
}
/* Estilos para cada subpunto de habilidaes, lenguajes e informacion personal*/

/*MediaQueries para AboutMe*/
@media (max-width: 900px) {

    main .section_card:first-child{
        margin-top: 100px;
    }

    header {
        flex-direction: column;
        align-items: center;
        min-height: 180px;
        margin-top: 100px;
    }

    main {
        display: flex;
        flex-direction: column;
        height: auto;
    }
}