/* --- ESTILOS GENERALES --- */

* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

body {
    margin: 0;
    overflow-x: hidden;
    /* Evita scroll horizontal */
}

/* --- HEADER --- */
#header_index {
    background-color: rgb(23, 19, 58);
    color: rgb(174, 75, 255);
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* Móvil: uno debajo del otro */
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    /* Redondeado solo abajo para móvil */
    gap: 20px;
}

.main-index {
    background-color: rgb(23, 19, 58);
    ;
}

.nav_index {
    display: flex;
    flex-wrap: wrap;
    /* Permite que los botones bajen si no caben */
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 0;

}

.nav_index section :hover {
    background-color: rgb(255, 255, 255);
    color: rgb(106, 52, 142);

}

.nav_index section a {
    color: rgb(255, 255, 255);
    padding: 8px 12px;
    border-radius: 15px;
    border-color: white;
    transition: 0.3s ease;
    background-color: rgb(71, 0, 118);
    font-size: 0.9rem;
}

/* --- SECCIONES PRINCIPALES --- */
#section1-index,
#section2-index,
#main-about-me {
    display: flex;
    flex-direction: column;
    /* Apilado en móvil */
    align-items: center¿;
    width: 100%;
}

.profile-text {
    color: white;
    text-align: left;
    margin: 30px;
    padding-left: 0px;
}

#hello-center-text {
    font-size: 25px;
}

.center-text {
    font-size: 40px;
}

#p-center-text {
    color: rgb(174, 75, 255);
    text-align: left;

}

.text-box,
#box1,
#box2,
#box3 {
    font-size: 1rem;
    padding: 20px;
    margin: 15px;
    /* Margen reducido en móvil */
    border-radius: 30px;
    background-color: rgba(241, 241, 241, 0.055);
    box-sizing: border-box;
    color: rgb(111, 106, 116);
}

#box1,
#box2,
#box3 {
    background-color: rgba(241, 241, 241, 0.055);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* --- IMÁGENES --- */
.img1-div-index,
.img2-div-index,
.img3-div-index {
    width: 100%;
    max-width: 150px;
    height: auto;
    margin-bottom: 15px;
}

/* --- TÍTULOS --- */
#title-main-index {
    color: rgb(174, 75, 255);
    text-align: center;
    margin: 30px 0;
    font-size: 1.5rem;
}

/* --- FOOTER --- */
#footer-index {
    background-color: rgb(65, 23, 98);
    color: rgba(255, 255, 255, 0.347);
    padding: 20px;
    text-align: center;
}

/* --- MEDIA QUERY: PANTALLAS GRANDES (PC) --- */
@media (min-width: 800px) {
    #header_index {
        flex-direction: row;
        /* Horizontal en PC */
        justify-content: space-between;
        padding: 30px 50px;
        border-radius: 0px;
    }


    .nav_index {
        justify-content: flex-end;
    }

    #section1-index {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Dos columnas */
        align-items: center;
        padding: 40px;
        padding-top: 90px;
    }

    #section2-index {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        /* Tres columnas */
        padding: 20px;
    }

    .text-box {
        margin: 40px;
        font-size: large;
        margin-right: 25px;
    }

    #title-main-index {
        font-size: 2rem;
    }

    .div-img-index {
        display: flex;
        height: 50%;
        justify-content: center;
    }

    .center-text {
        font-size: 100px
    }

    #hello-center-text {
        font-size: 30px;
    }
    #p-center-text {
        font-size: 25px;
    }
    .profile-text {
        color: white;
        text-align: left;
        margin: 20px;
        padding-left: 80px;

    }

    .center-text {
        text-align: left;
    }

    #hello-center-text {
        text-align: left;
    }}