/*====DEFINICION VARIABLES===*/
:root{
    /*COLORES*/
    /*tonos principales*/
    --tono:324; /*HSL*/
    --complementario:54;
    --contraste:214;

    /*paleta monocromatica principal*/
    --color-principal:hsla(var(--tono), 100%, 40%, 1);
    --color-principal-medio:hsla(var(--tono), 100%, 86%,1);
    --color-principal-claro:hsla(var(--tono), 100%, 98%,1);
    --color-principal-oscuro:hsla(var(--tono), 100%, 15%,1);

    /*===color complementario==*/
    --color-complementario: hsla(var(--complementario), 100%, 48%,1);

    /*===color contraste oscuro===*/
    --color-contraste-oscuro:hsla(var(--contraste), 13%, 10%,1);
    --color-contraste-medio:hsla(var(--contraste), 15%, 40%,1);

    /*====valores====*/
    --color-blanco:white;

    /*tipografias*/
    --fuente-principal: 'poppins', sans-serif;

    /*peso fuente*/
    --light:300;
    --normal:400;
    --bold:700;
}

/*CONFIGURACIONES GLOBALES*/

h1, h2, h3, h4, h5, h6, p, a, span{
    color: var(--color-contraste-oscuro);
    text-decoration: none;
}
ul{
    list-style: none;
}

.light{
    font-weight: var(--light);
}

.normal{
    font-weight: var(--normal);
}
.bold{
    font-weight: var(--bold);
}

/*resetear estilos del navegador*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--fuente-principal);
}

/*===pantalla celular 0px a 764px===*/

/*===estructura sliders===*/
.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    width: 100vw;
    overflow: hidden;
}

.page1, .page2{

    width: 100vw;
    height: 160vh;
}

.page1{
    background-color: var(--color-blanco);
    min-height: 100vh;
    overflow: hidden;
}

.page2{

    background-color: var(--color-blanco);
    position: absolute;
    opacity: 1;
    min-height: 100vh;
    transition: .5s all ease-in-out;
    left: 100%; /*100% es= afuera y 0%= entrar*/
    pointer-events: none;
    /*grid para celular y tabla*/
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6,1fr);
    grid-template-rows.: 60px 250px 120px;
    grid: 20px;
    grid-gap: 15px;
}

.entrar{
    left: 0%;
    pointer-events: all;
}

/*diseño de la pagina 1 celular*/
.banner{
    height: 270px;
    padding: 10px;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(90deg, hsla(var(--tono),100%, 40%,0.75),
                                hsla(var(--complementario), 100%, 48%, 0.7)),
                                url(../img/imagen_fondo.jpg);
    background-size:cover ;
    display: grid;
    grid-template-rows: repeat(3, 1fr)3;
}

.banner__logo img{
    width: 120px;
}

.banner__title h1{
    font-size: 1.75rem;
    color: var(--color-blanco);
}

.banner__title h2{
    font-size: 1rem;
    font-weight: var(--normal);
    color: var(--color-blanco);
}

.section{
    padding: 20px;
    height: auto;
}

.section__title{
    margin-bottom: .5rem;
}

.section__skills{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px ;
    margin-bottom: 1rem;
}

.skill{
    background-color: var(--color-principal-claro);
    padding: 0.5rem;
    border-radius: 10px;
}

.skill__txt{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.skill__txt h5 {
    text-transform: uppercase;
}

.skill__loader--ex{
    width: 100%;
    padding: 3px;
    background-color: var(--color-principal-medio);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 1rem;
}

.skill__loader--int {
    height: 4px;
    background-color: var(--color-principal);
    border-radius: 1rem;
}

.section__skills .skill:nth-child(1) .skill__loader--int {
    width: 80%; 
}

.section__skills .skill:nth-child(2) .skill__loader--int {
    width: 70%; 
}

.section__skills .skill:nth-child(3) .skill__loader--int {
    width: 70%; 
}

.section__skills .skill:nth-child(4) .skill__loader--int {
    width: 70%; 
}

.section__skills .skill:nth-child(5) .skill__loader--int {
    width: 70%; 
}

.section__skills .skill:nth-child(6) .skill__loader--int {
    width: 70%; 
}

.section__skills .skill:nth-child(7) .skill__loader--int {
    width: 65%; 
}

.section__skills .skill:nth-child(8) .skill__loader--int {
    width: 60%; 
}

.section__skills .skill:nth-child(9) .skill__loader--int {
    width: 70%; 
}

.section__skills .skill:nth-child(10) .skill__loader--int {
    width: 65%; 
}

.section__skills .skill:nth-child(11) .skill__loader--int {
    width: 70%; 
}

.section__skills .skill:nth-child(12) .skill__loader--int {
    width: 60%; 
}


.section__btns{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    min-height: 3.5rem;
}

.section__btns a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .15rem;
    background-color: var(--color-complementario);
    padding: .7rem;
    border-radius: 15px;
    font-size: .9rem;
    font-weight: 600;
    transition: .2s all ease-in-out;
}
.section__btns .bx  {
    font-size: 1.3rem;
}

.section__btns a:nth-child(1){
    background: linear-gradient(90deg, 
                hsla(var(--tono),100%, 40%,1)50%, 
                hsla(var(--complementario),100%, 48%,1) 100%);
    background-size: cover ;
    color: var(--color-blanco);
    background-position: 100% 100%;
    background-size: 200%;
}

.section__btns a:hover:nth-child(1){
    background-position: 0% 50%;
}

.section__btns a:nth-child(2){
    background-color: var(--color-principal);
    color: var(--color-blanco);
    width: 130%;
}

.section__btns a:hover:nth-child(2){
    background-color: var(--color-contraste-oscuro);
}



/*======diseño pagina 2 celular======*/
/*header pagina 2*/
.header{
    background: linear-gradient(90deg, hsla(var(--tono), 100%, 40%, 1) 0%, hsla(var(--complementario),100%, 48%, 1)100%);
    height: 50px;
    border-radius: 0 0 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.20px;
    position: relative;
    z-index: 1;
    grid-column: 1/5;
    grid-row: 1/2;
}

.header__logo{
    width: 120px;
}

.header__a{
    color: var(--color-blanco);
    font-weight: var(--bold);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all .2s ease-in-out;
}

.header__icon {
    font-size: 25px;

}

.header__a:hover {
    color: var(--color-contraste-oscuro);
    transform: scale(.9);
}

/*info pagina 2 celular*/
.info__photo {
    grid-column: 1/3;
    grid-row: 1/3;
    position: relative;
}

.info__img{
    margin-top: -10px;
    height: calc(100% + 20px);
    width: 100%;
    border-radius: 0 0 20px 0;
    object-fit: cover;
    object-position: 100%;
}

.info__data{
    grid-column: 3/5;
    padding: 10px 0 0 0;
}

.info__nombre{
    margin-bottom: 5px;
}

.info__nombre h1{
    font-size: 14px;
    text-transform: uppercase;
    font-weight: var(--bold);
}

.info__nombre h2{
    font-size: 12px;
    text-transform: uppercase;
    font-weight: var(--light);
}

.info__li{
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.info__icon i{
    font-size: 15px;
    margin-right: 10px;
}

.info__txt p:nth-child(1){
    font-size: 8px;
}

.info__txt p:nth-child(2){
    font-size: 10px;
    font-weight: var(--bold);
}

/*profile pag 2 celular*/

.profile{
    padding: 10px 20px;
    margin-bottom: 20px;
    grid-column: 1/5;
    grid-row: 3/4;
}

.profile__title{
    display: flex;
    align-items: center;
    margin-bottom: 7px;
}

.profile__title i{
    font-size: 15px;
    margin-right: 5px;
}

.profile__title h2{
    font-size: 15px;
    text-transform: uppercase;
}

.profile__txt{
    font-size: 12px;
    font-weight: var(--light);
    line-height: 20px;
}

/*=====estudies pag 2 celular=====*/
.studies{
    padding: 0px 20px;
    margin-bottom: 20px;
    grid-column: 1/5;
}

.studies__titulo {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
}

.studies__titulo i{
    font-size: 15px;
    margin-right: 5px;
}

.studies__titulo h2{
    font-size: 16px;
    text-transform: uppercase;
}

.studies__info table{
    font-size: 12px;
}

.studies__info td{
    padding-bottom: 2px;
}

.studies__year{
    font-weight: var(--bold);
    padding-right: 15px;
}

/*===posicionar social bar flotante celular===*/
.rrss{
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: calc(100% - 40px);
}

.rrss__txt{
    background-color: var(--color-blanco);
    border-color: var(--color-blanco);
    padding: .4rem 1rem .25rem 1rem; /*arriba derecha abajo izquierda*/
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 0 10px hsla(var(--contraste), 100%, 20%, .2);
}

.rrss__txt p {
    font-size: 0.85em;
}

.rrss__icons{
    background-color: var(--color-contraste-oscuro);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 1.5rem;
    padding: .35rem;
    width: 100%;
    border-radius: 1.2rem;
}

.rrss__icons a{
    color: var(--color-blanco);
    font-size: 1.6rem;
    transition: .3s all ease-in-out;
}
.rrss__icons a:hover {
    color: var(--color-principal);
    transform: scale(1.5rem);
}

.rrss__icons a:nth-child(3) .bx {
    font-size: 1.6rem;
}



/*======PANTALLA TABLET 764PX A 1024PX=====*/
@media screen and (main-width: 764px) {
    /*=========diseño pagina uno tablet========*/
    .banner {
        height: 35%;
        padding: 40px;
        border-radius: 0 0 30px 30px;
    }

    .banner__logo img {
        width: 120px;
    }

    .banner__title h1{
        font-size: 2rem;
    }

    .section {
        padding: 40px;
        height: auto;
    }

    .section__title {
        margin-bottom: 1rem;
    }

    .section__title h3{
        font-size: 1.75rem;
    }

    .section__skills{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 30px;
        margin-bottom: 30px;
    }

    .skill {
        border-color: var(--color-principal-claro);
        padding: 1rem;
        border-radius: 20px;
    }

    .skill__txt {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }

    .skill__txt h5, .skill__txt span{
        text-transform: uppercase;
        font-size: 1.2em;
    }

    .skill__loader--ex{
        width: 100%;
        padding: 7px;
        background-color: var(--color-principal-medio);
        align-items: center;
        justify-content: flex-start;
        border-radius: 1rem;
    }

    .skill__loader--int{
        height: 7px;
        background-color: var(--color-principal);
        border-radius: 1rem;
    }

    .section__btns{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 30px;
        min-height: 3.5rem;
    }

    .section__btns a{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .15rem;
        background-color: var(--color-complementario);
        padding: 2rem;
        border-radius: 20px;
        font-size: 1.5rem;
        font-weight: 600;
    }

    .section__btns .bx{
        font-size: 1.75rem;
    }

    .section__btns a:nth-child(2){
        width: 112%;
        border-radius: 20px 0 0 20px;
    }

    /*======diseño pagina 2 tablet=======*/

    .page2{

        background-color: var(--color-blanco);
        position: absolute;
        opacity: 1;
        min-height: 100vh;
        transition: .5s all ease-in-out;
        left: 100%; /* 100% =afuera || 0%=entrar*/
        pointer-events: none;
        /*grid table*/
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6,1fr);
        grid-template-rows.: 80px minmax(370px 30vh) 170px;
    }

    .entrar{
        left: 0%;
        pointer-events: all;
    }

    /*========header pagina 2=======*/
    .header{
        background:linear-gradient(90deg hsla(var(--tono), 100%, 40%, 1)0%, hsla(var(--complementario),100%, 48%, 1)100%);
        height: 80px;
        border-radius: 0 0 20px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 25px;
        position: relative;
        z-index: 2;
    }

    .header__logo{
        width: 120px;
    }

    .header__a{
        color: var(--color-blanco);
        font-weight: var(--bold);
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all .2s ease-in-out;
    }

    .header__icon{
        font-size: 35px;
    }

    .header__a:hover{
        color: var(--color-contraste-oscuro);
        transform: scale(.8);
    }

    /*========info photo tablet=========*/
    .info__photo{
        grid-column: 1/3;
        position: relative;
    }

    .info__data{
        grid-column: 3/5;
        padding: 40px 0 0 20px;
    }

    .info__nombre{
        margin-bottom: 16px;
    }

    .info__nombre h1{
        font-size: 30px;
        text-transform: uppercase;
        font-weight: var(--bold);
    }

    .info__nombre h2{
        font-size: 20px;
        text-transform: uppercase;
        font-weight: var(--light);
    }

    .info__li{
        display: flex;
        align-items: center;
        margin-bottom: 16px;
    }

    .info__icon i{
        font-size: 30px;
        margin-right: 10px;
    }

    .info__txt p:nth-child(1){
        font-size: 15px;
    }
    
    .info__txt p:nth-child(2){
        font-size: 20px;
        font-weight: var(--bold);
    }

    /*profile pag 2 tablet*/
    .profile{
        padding: 20px 40px; 
        margin-bottom: 30px;
    }

    .profile__title{
        display: flex;
        align-items: center;
        margin-bottom: 7px;
    }

    .profile__title{
        font-size: 25px;
        margin-right: 5px;
    }

    .profile__title h2{
        font-size: 24px;
        text-transform: uppercase;
    }

    .profile__txt p{
        font-size: 16px;
        font-weight: var(--light);
        line-height: 24px;
    }

    /*studies pag 2 tablet*/
    .studies{
        padding: 0 40px;
        margin-bottom: 25px;
    }

    .studies__titulo{
        display: flex;
        align-items: center;
        margin-bottom: 7px;
    }

    .studies__titulo i{
        font-size: 25px;
        margin-right: 5px;
    }

    .studies__titulo h2{
        font-size: 24px;
        text-transform: uppercase;
    }

    .studies__info table{
        font-size: 16px;
    }

    .studies__info td{
        padding-bottom: 2px;
    }

    .studies__year {
        font-weight: var(--bold);
        padding-right: 15px;
    }

    /*posicionar social bar flotante tablet*/
    .rrss{
        position: fixed;
        bottom: 1rem;
        left: 50%;
        transform: translate(-50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: calc(75% - 80px);
    }

    .rrss__txt{
        padding: .4rem 1.5rem .25rem 1.5rem;
        border-radius: 1rem 1rem 0 0;
    }

    .rrss__txt p{
        font-size: 1.2rem;
    }

    .rrss__icons{
        padding: 1rem;
        border-radius: 30px;
    }
}

/*========pantalla escritorio===========*/
@media screen and (min-width: 1024px) {
    
    /*PAGINA UNO ESCRITORIO*/
    .page1, .page2{
        display: flex;  
        width: 100vw;
        height: 100%;
    }

    .banner{
        width: 45%;
        height: 100%;
        border-radius: 0 40px 40px 0;
        background-position: 90% 0;
        padding: 3rem;
    }

    .banner__logo img{
        width: 150px;
    }

    .banner__title h1{
        font-size: 3rem;
    }

    .banner__title h2{
        font-size: 1.4rem;
    }

    /*section skill escritorio*/
    .section{
        width: 55%;
        padding: 0 7rem 1rem 5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .section__title{
        margin-bottom: 1rem;
    }

    .section__title h3{
        font-size: 2.1rem;
    }

    .section__skills{
        height: 80%;
    }

    .skill{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1rem;
        border-radius: 1rem;
    }

    .skill__txt h5, .skill__txt span {
        font-size: 1.2rem;
    }

    .skill__loader--ex{
        padding: 8px;
    }

    .skill__loader--int{
        height: 5px;
    }

    /*botones modo escritorio*/
    .section__btns{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
        min-height: 3.5rem;
        /*grid-row: 5/7;*/
    }

    .section__btns a{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .15rem;
        background-color: var(--color-complementario);
        padding: 2ram;
        border-radius: 20px;
        font-size: 1.5rem;
        font-weight: 600;
    }
    
    .section__btns .bx{
        font-size: 2rem;
    }

    .section__btns a:nth-child(2){
        width: 100%;
        border-radius: 30px;
    }

    /*pantalla 2 modo escritorio*/
    .page2{
        background-color: var(--color-blanco);
        position: absolute;
        opacity: 1;
        min-height: 120vh;
        transition: 1s all ease-in-out;
        left: 100%;
        
        pointer-events: all;
        /*grid*/
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(6, 1fr);
        grid-template-rows.: 120px minmax(70px, 27vh) minmax(150px, 25vh);
    }

    .entrar{
        left: 0%;
        pointer-events: all;
    }

    /*header pag 2 escritorio*/
    .header{
        b0ackground: linear-gradiente(90deg, hsla(var(--tono), 100%, 40%, 1) 0%,
                                    hsla(var(--complementario),100%, 48%, 100%));
        height: 100px;
        border-radius: 0 0 20px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 20px;
        position: relative;
        z-index: 2;
        grid-column: 1/13;
        
        
    }

    .header__logo{
        width: 220px;
    }

    .header__a{
        color: var(--color-blanco);
        font-weight: var(--bold);
        font-size: 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all .2s ease-in-out;
        text-transform: uppercase;
    }

    .header__icon{
        font-size: 50px;
    }

    .header__a:hover{
        color: var(--color-contraste-oscuro);
        transform: scale(.9);
    }

    /*info pag 2 escritorio*/
    .info__photo{
        grid-column: 1/5;
        grid-row: 2/7;
        position: relative;
        height: 100%;
        z-index: 1;
    }

    .info__img{
        margin-top: -40px;
        height: calc(100% + 40px);
        width: 100%;
        border-radius: 0 0 40px 0;
        object-fit: cover;
        object-position: 90%;
    }

    .info__data{
        grid-column: 5/12;
        padding: 40px 0 0 40px;
    }

    .info__nombre{
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .info__nombre h1{
        font-size: 32px;
        text-transform: uppercase;
        font-weight: var(--bold);
        margin-right: 2rem;
    }

    .info__nombre h2{
        font-size: 32px;
        text-transform: uppercase;
        font-weight: var(--light);
        position: relative;
    }

    .info__nombre h2::before{
        content: " ";
        width: 3px;
        height: 70%;
        background-color: var(--color-contraste-oscuro);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -1rem;
    }

    .info__ul{
        display: flex;
    }

    .info__li{
        display: flex;
        align-items: center;
        margin-right: 15px;
    }

    .info__icon i{
        font-size: 20px;
        margin-right: 5px;
    }

    .info__txt p:nth-child(1){
        font-size: 11px;
    }

    .info__txt p:nth-child(2){
        font-size: 13px;
        font-weight: var(--bold);
    }

    /*profile page2 escritorio*/
    .profile{
        padding: 0 40px;
        margin-bottom: 0px;
        grid-column: 5/12;
    }

    .profile__title{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .profile__title i{
        font-size: 25px;
        margin-right: 5px;
    }

    .profile__title h2{
        font-size: 24px;
        text-transform: uppercase;
    }

    .profile__txt p{
        font-size: 13px;
        font-weight: var(--light);
        line-height: 22px;
    }

    /*studies y experiencia escritorio*/
    .studies{
        padding:  0 40px;
        grid-column: 5/12;
        
    }

    .studies__titulo{
        display: flexbox;
        align-items: center;
        margin-bottom: 7px;
    }

    .studies__titulo i{
        font-size: 24px;
        margin-right: 5px;
    }

    .studies__titulo h2{
        font-size: 24px;
        text-transform: uppercase;
    }

    .studies__info table{
        font-size: 14px;
    }

    .studies__info td{
        padding-bottom: 1px;
    }

    .studies__year{
        font-weight: var(--bold);
        padding-right: 15px;
    }

    /*posicionar socialbar flotante escritorio*/
    .rrss{
        position: fixed;
        bottom: inherit;
        left: inherit;
        right: 0rem;
        top: 50%;
        z-index: 4;
        transform: translateY(-50%);
        min-width: initial;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    .rrss__txt{
        background-color: var(--color-blanco);
        position: fixed;
        z-index: 3;
        width: max-content;
        right: 60px;
        transform-origin: bottom right;
        transform: rotate(-90deg)
                    translateX(50%);
        border-radius: 1.5rem 1.5rem 0 0;
        
    }

    .rrss p{
        font-size: 1rem;
    }

    .rrss__icons{
        display: flex;
        flex-direction: column;
        z-index: 4;
        background-color: var(--color-contraste-oscuro);
        gap: 2rem;
        padding: 5rem .5rem 5rem .5rem;
        border-radius: 3rem 0 0 3rem;

    }

    .rrss__icons .bx{
        font-size: 3rem;

    }
}