@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto Mono';
    text-decoration: none;
    scroll-behavior: smooth;
    border: none;
    outline: none;
}
:root{
    --bg-color: #000000;
    --second-bg-color: #0405272e;
    --text-bg-color: #4a77b6;
    --main-bg-color: #043272;
}
html{
    font-size: 65%;
    overflow-x: hidden;
}
body{
    background: var(--bg-color);
    color:var(--text-bg-color);
}
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 10%;
    background:var(--bg-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    transition: .3s;
}
.header.barraNavegacion{
    background:var(--bg-color);
}
.logo{
    position: relative;
    font-size:3em ;
    color: var(--text-bg-color);
    font-weight: 500;
}
.navbar{
    position: relative;
}
.navbar a{
    font-size: 1.6rem;
    color:var(--text-bg-color);
    margin-left: 1.5rem;
    transition: 1.1s;
}
.navbar a:hover, .navbar a.activos{
    color:var(--main-bg-color);
}
#iconoMenu{
    position: relative;
    font-size: 3.5rem;
    display: none;
    color: var(--text-bg-color);
    cursor: pointer;
}
section{
    min-height: 100vh;
    padding:10rem 10% 2rem;
}
.inicio{
    display: flex;
    align-items: center;
    padding: 0 10%;
    /* BACKGROUND */
    /* background: url(./imagenes/yo.jpeg) no-repeat;
    background-size: cover;
    background-position: center; */

}

.inicio-img{
    position: relative;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    display: flex;
    margin-left: 100px;
}
.inicio-img img{
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    border: .5rem solid var(--main-bg-color);
}
.inicio-img .circulo{
    position: absolute;
    top: 12.5rem;
    left: 12.5rem;
    transform: translate(-50%, -50%) rotate(0);
    width: 110%;
    height: 110%;
    border-radius: 50%;
    border-top: .8rem solid var(--bg-color);
    border-bottom: .8rem solid var(--bg-color);
    border-right: .8rem solid var(--main-bg-color);
    border-left: .8rem solid var(--main-bg-color);
    animation: spinner 8s linear infinite;
}
@keyframes spinner{
    100%{
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


.inicioContenido{
    max-width: 60rem;
}
.inicioContenido h1{
    position: relative;
    display: inline-block;
    font-size: 4.3rem;
    font-weight: 700;
    line-height: 1.5;
}
.inicioContenido .textoSecundatio{
    position: relative;
    width: 33rem;
}
.inicioContenido .textoSecundatio h2{
 
    font-size: 2.2rem;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: .2rem var(--main-bg-color);
    background-image: linear-gradient(var(--main-bg-color), var(--main-bg-color));
    background-repeat: no-repeat;
    -webkit--background-clip: text;
    background-position: -33rem 0;
    animation: textoInicio 6s linear infinite;
    animation-delay: 2s;
}
.inicioContenido .textoSecundatio h2::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-right: 2px solid var(--main-bg-color);
    z-index: -1;
    animation: textoCursorInicio 6s linear infinite;
    animation-delay: 2s;
}

@keyframes textoInicio{
    0%, 10%, 100%{
        background-position: -33rem 0;
    }
    65%, 85%{
        background-position: 0 0;
    }
}
@keyframes textoCursorInicio{
    0%, 10%, 100%{
        width: 0;
    }
    65%, 78%, 85%{
        width: 100%;
        opacity: 1;
    }
    75%, 81%{
        opacity: 0;
    }
}

.inicioContenido p{
    position: relative;
    font-size: 1.5rem;
    margin: 2rem  0 4rem;
}
.botonInicio{
    height: 5rem;
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 35rem;
}
.botonInicio .botones{
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 15rem;
    border-radius: .5rem;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: .1rem;
    color: var(--bg-color);
    height: 100%;
    background: var(--text-bg-color);
    z-index: 1;
    overflow: hidden;
}

.botonInicio .botones::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    border-radius: .01px;
    background: var(--bg-color);
    z-index:-1;
    transition: .5s;
}
.botonInicio .botones:hover{
    color: var(--text-bg-color);
    border: .3rem solid var(--text-bg-color);
}
.botonInicio .botones:hover::before{
    width: 100%;
}
.redesSociales{
    position: absolute;
    bottom: 4rem;
    width: 10.6rem;
    display: flex;
    justify-content: space-between;
}
/* .redesSociales a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 2.5rem;
    color: var(--main-bg-color);
    background: transparent;
    border: .2rem solid var(--main-bg-color);
    font-size: 2rem;
    border-radius: 50%;
    z-index: 1;
    overflow: hidden; 
    margin: 1px;
}
.redesSociales a::before{

    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--main-bg-color);
    z-index: -1;
    transition: .5s;    
}
.redesSociales a:hover::before{
    width: 100%;
}
.redesSociales a:hover{
    color: var(--text-bg-color);
} */

/* *SOBRE MI */
.sobre{
    position: relative;
    font-size: 5rem;
    margin-bottom: 3rem;
    text-align: center;
}

.sobreImg{
    position: relative;
    width: 25rem;
    height: 30rem;
    border-radius:50px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    /* box-shadow: 5px 6px 8px var(--text-bg-color); */
    overflow: hidden;   
}
.sobreImg::before{
    content: '';
    position: absolute;
    height: 50rem;
    width: 50rem;
    background-image: conic-gradient(var(--text-bg-color) 20deg, transparent 120deg);
    z-index: -1;
    animation: rotar 4s linear infinite;
}
@keyframes rotar{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(-360deg);
    }
}
.sobreImg img{
    width: 98%;
    height: 98%;
    border-radius: 50px;
    border: .2rem solid var(--text-bg-color);
    
}
span{
    color: var(--main-bg-color);
}
.contenidoSobre{
    text-align: center;
}
.contenidoSobre h3{
    position: relative;
    display: inline-block;
    margin: 3rem;
    font-size: 2.6rem;
}
.contenidoSobre p{
    position: relative;
    display: inline-block;
    font-size: 1.8rem;
    margin: 2rem 0 3rem;
}
.botonInicio.btns{
    display: inline-block;
    width: 15rem;
}

/** EDUCACION */

.educacion{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: auto;
    padding-bottom: 5rem;
}
.educacion .rowEducacion{
    display: flex;
    flex-wrap: wrap;
    gap: 20rem;
}
.rowEducacion .columnaEducacion{
    flex: 1 1 20rem;
}
.columnaEducacion .titulo{
    position: relative;
    display: inline-block;
    font-size: 2.5rem;
    margin: 0 0 1.5rem 2rem;
}
.columnaEducacion .cajaEducacion{
    position: relative;
    border-left: .2rem solid var(--main-bg-color);
}
.cajaEducacion .contenidoEducacion{
    position: relative;
    padding-left: 2rem;
}
.contenidoEducacion .contenido{
    position: relative;
    padding: 1.5rem;
    border: .2rem solid var(--main-bg-color);
    border-radius: .6rem;
    margin-bottom: 2rem ;
    overflow: hidden;
    z-index: 1;
}
.contenidoEducacion .contenido::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--main-bg-color);
    z-index: -1;
    transition: .5s;
}
.contenidoEducacion .contenido:hover::before{
    width: 100%;
}

.contenidoEducacion .contenido .fecha{
    font-size: 1.8rem;
    color: var(--text-bg-color);
    padding-bottom: .5rem;
}


.contenidoEducacion .contenido .fecha i{
    padding-right: .9rem;
}
.contenidoEducacion .contenido h3{
    font-size: 1.3rem;
}
.contenidoEducacion .contenido p{
    font-size: 1.2rem;
}
.contenidoEducacion .contenido a{
    font-size: large;
    color: aqua;
}
.cajaEducacion .contenidoEducacion::before{
    content: '';
    position: absolute;
    top: 0;
    left: -.07rem;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 15px solid transparent; 
    border-left: 15px solid var(--main-bg-color);;
    z-index: 1;
}

/* *PROYECTOS */
 .proyectos{
    position: relative;
    font-size: 5rem;
    margin-bottom: 3rem;
    text-align: center;
}
.proyectoImg{
    position: relative;
    width: 35rem;
    height: 50rem;
    border-radius: 50px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.proyectoImgs:hover{
    filter: brightness(30%);  
    width: 100%;
    height: 100%;
    #co{
        color: red;
    }
}
.proyectoImg .ini:hover{
    color: rgb(0, 17, 255);
}
    .ini{
    color:var(--text-bg-color);
    position: absolute;
    font-size: medium;
    background: #0000008f;
    width: 100%;
    padding: 40px;
    }
 

.proyectoImg::before{
    content: '';
    position: absolute;
    height: 60rem;
    width: 60rem;
    background-image: conic-gradient(var(--text-bg-color) 20deg, transparent 120deg);
    z-index: -1;
    animation: rotar 2s linear infinite;
}
.swiper {
    position: relative;
    width: 35rem;
    height: 50rem;
    padding-top: 50px;
    padding-bottom: 50px;
  
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 35rem;
    height: 50rem;
  }

  .swiper-slide img {
    display: block;
    width: 98%;
    height: 98%;
    border-radius: 50px;
    border: .2rem solid var(--text-bg-color);   
  }

/* *SKILLS */

.skills{
    min-height: auto;
    padding-bottom: 7rem;
    background: var(--bg-color);
}
.skills h2{
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}
.skills .rowSkills{
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
}
.rowSkills .columnaSkills{
    flex: 1 1 30rem;
}

.columnaSkills .titulo{
    position: relative;
    display: inline-block;
    font-size: 2.1rem;
    margin: 0 0 1.5rem;
}
.columnaSkills .cajaSkills{
    position: relative;
}
.cajaSkills .contenidoSkills{
    position: relative;
    border: .2rem solid var(--main-bg-color);
    border-radius: .6rem;
    padding: .5rem 1.5rem;
    z-index: 1;
}
.cajaSkills .contenidoSkills::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--main-bg-color);
    z-index: -1;
    transition: .5s;
}
.cajaSkills .contenidoSkills:hover::before{
    width: 100%;
    border: .2rem solid var(--text-bg-color);
    border-radius: .6rem;
    z-index: -1;
}
.contenidoSkills .progreso .barra:hover{
    border: .2rem solid var(--text-bg-color);
    border-radius: .6rem;
    z-index: -1;
}

/* .cajaEducacion .contenidoEducacion::before{
    content: '';
    position: absolute;
    top: 0;
    left: -.07rem;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 15px solid transparent; 
    border-left: 15px solid var(--main-bg-color);;
    z-index: 1;
} */



.contenidoSkills .progreso{
    padding: 1rem 0;
}
.contenidoSkills .progreso h3{
    font-size: 1.7rem;
    display: flex;
    justify-content: space-between;
}
.contenidoSkills .progreso h3 span{
    color: var(--text-bg-color);
}
.contenidoSkills .progreso .barra{
    height: 2.5rem;
    border-radius: .6rem;
    border: .2rem solid var(--main-bg-color);
    /* margin: 1rem 0; */
    padding: 0;
}
.contenidoSkills .progreso .barra span{
    display:block;
    height: 100%;
    border-radius: .3rem;
    background:var(--text-bg-color);
}



.columnaSkills:nth-child(1) .contenidoSkills .progreso:nth-child(1) .barra span{
    width: 70%;
}
.columnaSkills:nth-child(1) .contenidoSkills .progreso:nth-child(2) .barra span{
    width: 70%;
}
.columnaSkills:nth-child(1) .contenidoSkills .progreso:nth-child(3) .barra span{
    width: 80%;
}
.columnaSkills:nth-child(1) .contenidoSkills .progreso:nth-child(4) .barra span{
    width: 60%;
}
.columnaSkills:nth-child(1) .contenidoSkills .progreso:nth-child(5) .barra span{
    width: 70%;
}
.columnaSkills:nth-child(1) .contenidoSkills .progreso:nth-child(6) .barra span{
    width: 50%;
}
.columnaSkills:nth-child(1) .contenidoSkills .progreso:nth-child(7) .barra span{
    width: 50%;
}


.columnaSkills:nth-child(2) .contenidoSkills .progreso:nth-child(1) .barra span{
    width: 80%;
}
.columnaSkills:nth-child(2) .contenidoSkills .progreso:nth-child(2) .barra span{
    width: 70%;
}
.columnaSkills:nth-child(2) .contenidoSkills .progreso:nth-child(3) .barra span{
    width: 50%;
}

.columnaSkills:nth-child(3) .contenidoSkills .progreso:nth-child(1) .barra span{
    width: 85%;
}
.columnaSkills:nth-child(3) .contenidoSkills .progreso:nth-child(2) .barra span{
    width: 70%;
}
.columnaSkills:nth-child(3) .contenidoSkills .progreso:nth-child(3) .barra span{
    width: 70%;
}
.columnaSkills:nth-child(3) .contenidoSkills .progreso:nth-child(4) .barra span{
    width: 70%;
}
.columnaSkills:nth-child(3) .contenidoSkills .progreso:nth-child(5) .barra span{
    width: 70%;
}
.columnaSkills:nth-child(3) .contenidoSkills .progreso:nth-child(6) .barra span{
    width: 80%;
}
.columnaSkills:nth-child(3) .contenidoSkills .progreso:nth-child(7) .barra span{
    width: 80%;
}

/* * CONTACTO */

.contacto{
    position: relative;
    font-size: 5rem;
    margin-bottom: 3rem;
    text-align: center;
}

.formularioContacto{
    background: var(--second-bg-color);
    border-radius: 15px;
    font-size: 2rem;
    margin: 10rem;
    padding: 5rem;
}
.cuadro input{
    width: 60%;
    height: 5rem;
    border-radius: 15px;
    background: transparent;
    border: 1px solid var(--text-bg-color);
    color: var(--text-bg-color);
    font-size: large;
    margin: 3rem;
}
.cuadro textarea{
    border-radius: 15px;
    background: transparent;
    border: 1px solid var(--text-bg-color);
    resize: none;
    margin: 3rem;
    width: 60%;
}


/* * FOOTER */
footer{
    background: #043272;
}
.piePagina{
    background: #043272;
    height: 5rem;
}




.animacion{
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background: var(--bg-color);
     z-index: 98;
}

.animacion1{
     position: absolute;
     top: -1.5rem;
     right: -1.3rem;
     width: 120%;
     height: 120%;
     background: var(--bg-color);
     z-index: 98;
}

.logo .animacion, 
.navbar .animacion,
#iconoMenu .animacion,
.inicio.mostrarAnimacion .animacion,
.inicio.mostrarAnimacion .animacion1{
    animation: mostrarContenido 1s ease forwards;
    animation-delay: calc(.1s * var(--i));
}

.animacion.scroll{
    transition: 1s ease;
    transition-delay: calc(.1s / var(--i));
    animation: none;
}
.animacion1.scroll{
    transition: 1s ease;
    transition-delay: calc(.1s / var(--i));
    animation: none;
}

.sobreMi.mostrarAnimacion .animacion.scroll,
.educacion.mostrarAnimacion .animacion.scroll,
.skills.mostrarAnimacion  .animacion.scroll,
.contacto.mostrarAnimacion .animacion.scroll{
    transition-delay: calc(.1s * var(--i));
    width: 0;
}
.sobreMi.mostrarAnimacion .animacion1.scroll,
.proyectos.mostrarAnimacion .animacion1.scroll{
    transition-delay: calc(.1s * var(--i));
    width: 0;
}



/* ANIMACIONES */
@keyframes mostrarContenido {
    100%{
        width: 0;
    }
}




@media (max-width: 1200px) {
    html{
        font-size: 55%;
    }
}

@media (max-width: 991px) {
    .header{
        padding: 2rem 4%;
    }
    section {
        padding: 10rem 4% 2rem;
    }
    .inicio{
        padding: 0 4%;
    }
}

@media (max-width: 768px){
    .header{
        background: var(--bg-color);
    }
    #iconoMenu{
        display: block;
    }
    .navbar{
        position: absolute;
        top: 100%;
        left: -100%;
        width: 100%;
        padding: 1rem 4%;
        background: var(--bg-color);
        box-shadow: 0 .5rem 1rem rgba(0,0,0, .2);
        transition: .2s ease;
        transition-delay: .25s;
        z-index: 1;
    }
    .navbar.activos{
        left: 0;
        transition-delay: 0s;
    }
    .navbar .navActivo{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-top: .1rem solid var(--main-bg-color);
        border-bottom:  .1rem solid var(--main-bg-color);
        background: var(--bg-color);
        transition: .2s ease;
        transition-delay: 0s;
        z-index: -1;
    }
    .navbar.activos .navActivo{
        left: 0;
        transition-delay: .2s;
    }

    .navbar a{
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
    }
    .inicio-img{
        display: none;
    }
}