/* Header ********************************************************************************/


/* Header media handle */

/* Header media handle */

.header-up {
    background-color: var(--trans);
    color: var(--high);
}

.header-up>nav>a {
    color: var(--white);
}

.header-up>#btn-access {
    background-color: var(--main);
    color: var(--high);
}

.header-up>#btn-menu {
    color: var(--high);
}

.btn-info {
    padding: .5rem 1rem;

    background-color: var(--accent);

    border-radius: .3rem;

    color: var(--main);

    user-select: none;
    cursor: pointer;
    text-decoration: none;

    width: fit-content;
}

.header-up>#btn-menu>img {
    filter: brightness(0) invert(100%);
}

/*****************************************************************************************/

article {
    margin: 0;
}

article:first-of-type {
    display: flex;
    flex-direction: column;

    margin: 0;

    justify-content: center;

    background-color: var(--accent);
    background-image:
        radial-gradient(at 78% 31%, hsla(199, 100%, 78%, 1) 0px, transparent 50%),
        radial-gradient(at 34% 80%, hsla(199, 61%, 47%, 1) 0px, transparent 50%),
        radial-gradient(at 18% 23%, hsla(199, 99%, 49%, 1) 0px, transparent 50%);

    box-sizing: border-box;

    height: 100vh;
    width: 100%;

    color: var(--main);
}

article:first-of-type>h1 {
    display: flex;
    flex-direction: column;

    font-size: 3.5rem;
}


article:first-of-type>h1>span {
    margin: .5rem 0;
}

article:first-of-type>p {
    font-size: 1.2rem;
}





/**************************************************************************/

article {
    margin: 0 5%;
    padding: 0 5%;

}

/* ------- A-RESUME ------- */

.a-resume {
    --margin: 7%;

    margin: 5rem 0;
    padding: 0;
}

.a-resume>h1 {
    padding: 1rem 1.5rem;
    margin: 7rem 0;
    margin-left: var(--margin);
    margin-right: auto;

    font-size: 2.5rem;
    width: 50%;

    /* background-color: var(--low); */

    border-left: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
    border-radius: 1rem;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
}

.a-resume>h1:nth-of-type(2n) {
    margin-left: auto;
    margin-right: var(--margin);

    border-right: 1px solid var(--accent);
    border-left: 0;

    border-radius: 1rem;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;

    text-align: right;
}

.a-resume>p {
    margin: 8rem auto 8rem;
    padding: 1rem 10%;

    width: 100%;

    text-align: center;
    font-size: 1.1rem;

    box-sizing: border-box;

    /* background-color: var(--accent); */

    /* color: var(--near-high); */

    /* border-bottom: 1px solid var(--accent);
    border-radius: 1rem; */

    font-size: 1.2rem;
    font-weight: 400;
    width: 70%;
}

/* ------- A-RESUME ------- */
/* ------- A-SPECS ------- */

.a-specs:nth-of-type(2n + 1) {
    background-color: var(--low);
}

.a-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    margin: 0;
    padding: 5rem 15% 5rem;
    width: 100%;

    box-sizing: border-box;

    justify-content: space-between;

    gap: 5rem;
}

.a-specs>img {
    margin: auto;
    height: 20rem;

    /* width: 100%; */
    object-fit: cover;

    border-radius: 1rem;
}

.a-specs>div {
    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    /* align-items: center; */
    justify-content: center;

    padding: 1rem 0 1rem 2rem;

    border-left: 1px solid var(--accent);
    border-radius: 1rem;


    width: 100%;


}

.a-specs>div>p {
    text-align: justify;
}

.a-specs>div>ul {

    li {
        margin-bottom: 1rem;
    }
}

/* ------- A-SPECS ------- */


/**************************************************************************/

/* -- footer ----------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------------------- */

/* Modificar header */
@media (max-width: 1280px) {
    .a-specs:nth-of-type(2n + 1) {
        flex-direction: column;
    }

    /* Modificar la parte de explicaciones */
    .a-specs {
        display: flex;
        flex-direction: column-reverse;

        padding: 2.5rem 0;
        justify-content: center;

        gap: 0;
    }

    .a-specs>img {
        width: 100%;

        border-radius: 0;
    }

    .a-specs>div {
        display: flex;
        flex-direction: column;

        box-sizing: border-box;

        /* align-items: center; */
        justify-content: center;

        padding: 1rem;
        border: 0;

        width: 100%;


    }

    .a-specs>div>p {
        text-align: justify;
    }

    .a-specs>div>ul {

        li {
            margin-bottom: 1rem;
        }
    }

    .btn-info {
        margin: 0 auto;
    }



}

/* Modificar titulo y footer */
@media (width <=768px) {
    article:first-of-type>h1 {
        font-size: 2.5rem;
    }

    .a-resume>h1 {
        width: 75%;
        font-size: 2rem;
    }
}