:root{
    --blanco: #fff;
    --negro: #000;
    --azul: #001aff;
    --fuenteP: "Montserrat", sans-serif;
    --azulC: #0077ff;
    --grisC: #dcdcdc;
    --azulP: #d2e4ff;
    --azulP1: #c4ddfa;
    --rojoP: #FFCBC1;
    --moradoP: #DCD3FF;
    --grisF: #1c1c1c;
    --amarillo: #FFC312;
    --naranja:#EE5A24; 
    --morado: #6d00d9;
    --azuld1: #12CBC4;
    --azuld2: #0652DD;
    --grisO: #414141;
    --azulB: #0583F2;
}

html{
    box-sizing: border-box;
    font-size: 62.5%; /* 1rem = 10 pixeles */
}
    
*,*::before, *::after{
    box-sizing: inherit;
}
    

body{
    /* background: rgb(34,193,255);
    background: linear-gradient(90deg, rgb(108, 213, 255) 0%, rgb(255, 113, 120) 50%, rgb(137, 255, 186) 100%); */
    /* background: rgb(154,0,0);
    background: linear-gradient(90deg, rgba(154,0,0,1) 0%, rgba(0,0,0,1) 33%, rgba(0,0,0,1) 66%, rgba(75,0,138,1) 100%); */
    font-size: 1.6rem;
    line-height: 1.5;
    font-family: var(--fuenteP);
}

/* GLOBALES */ 
.sombra {
    box-shadow: 0px 4px 19px 0px rgba(79,79,79,0.67);
    background-color: var(--blanco);
    padding: 2rem;
    border-radius: 1rem;
}

.contenedor{
    /*max-width: 120rem; Mientras pantalla > 1200px entonces los ocupa */ 
    /*width: 90%;   Para que no abarcque toda la pantalla de cel */
    width: min(90%, 120rem);  /*Forma nueva*/
    margin: 0 auto;
    position: relative;

}

a{
    text-decoration: none;

}

h1, h2, h3, h4, p{
    font-family: var(--fuenteP);
    
}

h1{
    font-size: 4.8rem;
}

h2{
    font-size: 4rem;
}

h3{
    font-size: 3.2rem;
}

h4{
    font-size: 2.3rem;
}

p{
    font-size: 1.8rem;
}


img{
    max-width: 100%;
}

footer{
    text-transform: uppercase;
}

/* Utilidades */ 

.no-margin{
    margin: 0;
}

.no-padding{
    padding: 0%;
}

.centrar-texto{
    text-align: center;
}

/* HEADER */ 

.header span{
    font-size: 3rem;
}

.titulo{
    border-bottom: .8rem double var(--azulC);
    padding: 2rem;
    margin: 0 auto;
}

/* NAVEGACIÓN */ 
.navegacion{
    display: flex;
    justify-content:center;
}

@media (min-width: 758px) {
    .nav-principal{
        margin: 5rem 1rem;
    }
}

.nav-principal{
    max-width: 90%;
    margin: .1rem ;
    text-align: center;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: .5rem;
    width: 11rem;
    height: 11rem;
    margin-bottom: 1rem;
    cursor: pointer;
}

@media (min-width: 768px) {
    .navegacion{
        justify-content: flex-end;
    }
}

.nav-principal span{
    color: var(--negro);
}

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

.navegacion_enlaces--activo,
.nav-principal:hover{
    border: .2rem solid var(--azulC);
}


/* CONTENEDORT PRINCIPAL */ 


@media (min-width: 768px) {
    .con-sidebar{
        display: grid;
        grid-template-columns: 1fr 3fr;
        column-gap: 4rem;
    }
}
/* ARTICLE */
article{
    box-sizing: border-box;
    max-width: 100%;
}

@media (min-width: 768px) {
    article{
    margin-top: 2rem;
    position: relative; /* Posiciona el artículo de forma relativa */
    max-height: 100rem; /* Limita la altura máxima del artículo al tamaño del viewport */
    overflow: hidden; /* Oculta el contenido que se desborda */
    padding-bottom: 10rem;
    }
}

@media (min-width: 768px) {
    article img{
        height: auto;
    }
}
article img{
    margin-top: 1rem;
    width: auto;
    border-radius: 2rem;
}


.informacion{
    text-align: center;
}

.informacion h4{
    font-weight: 400;
    margin-top: -2rem;
}

.cuentas{
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: -1rem;
    
}

.cuenta{
    flex-direction: row;
    margin: .5rem;

    border-radius: 1rem;   
}

.cuenta:hover{
    background-color: var(--grisC);
}

.more_info{
    display: block;
    margin-top: 2rem;
    background-color: var(--grisC);
    border-radius: 2rem
}

.more_info--bloque{
    margin-bottom: 1rem;
    display: flex;
    border-radius: 1rem;
}

.more_info--icono{
    width: 3rem;
    height: auto;
    font-size: 4rem;
    margin-right: 1rem;
    
}

.more_info--icono svg{
    background-color: var(--blanco);
    margin-left: .5rem;
    border-radius: 1rem;
    padding: .1rem;
}

.more_info--info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.more_info--info span {
    font-size: 1rem;
    margin-bottom: 0.2rem; 
}

.more_info--info p {
    font-size: 1rem;
    margin: 0; 
}

@media (min-width: 768px) {
    .more_info--info p{
        font-size: 1.5rem;
    }
}

/* Boton */

.cv{
    display: flex;
    justify-content: center;
    position: relative;
    text-align: center;
}

.boton{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    border-radius: 1rem;
    text-decoration: none;
    border: none;
    font-size: 1.5rem;
    padding: 1rem;
    align-items: center;
    cursor: pointer;
    gap: .5rem;
    text-transform: uppercase;
    color: var(--blanco);
    background-size: 200%;
    transition: .6s;
    font-weight: 700;
}

.boton svg{
    align-items: center;

}

.btn{
    background-image: linear-gradient(to left, #FFC312,#EE5A24 ,#FFC312);
}

.boton:hover{
    background-position: right;
}

/* Aside */

aside{
    margin-top: 2rem;
}

aside h3{
    position: relative;
    text-transform: uppercase;
    /* border-bottom: .5rem solid var(--azulC); */
    /* width: fit-content;  */
    padding-bottom: .5rem; 
}

aside h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: .5rem;
    background: linear-gradient(to right, var(--azulC), var(--blanco));
}

.sobre_mi{
    text-align: justify;
    padding: 0 1rem;
}


@media (min-width: 768px) {
    .educacion{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
        gap: 2rem;
        
    }

    
}

.educacion__escuela1{
    text-align: center;
    background-color: var(--azulP);
    border-radius: 1.5rem;
    padding: 1rem;
    margin-top: 1rem;
}

.educacion__escuela2{
    text-align: center;
    background-color: var(--rojoP);
    border-radius: 1.5rem;
    padding: 1rem;
    margin-top: 1rem;
}

.educacion__escuela3{
    text-align: center;
    background-color: var(--moradoP);
    border-radius: 1.5rem;
    padding: 1rem;
    margin-top: 1rem;
}

.educacion__escuela4{
    text-align: center;
    background-color: var(--azulP);
    border-radius: 1.5rem;
    padding: 1rem;
    margin-top: 1rem;
}

.educacion__escuela5{
    text-align: center;
    background-color: var(--rojoP);
    border-radius: 1.5rem;
    padding: 1rem;
    margin-top: 1rem;
}

.educacion__escuela6{
    text-align: center;
    background-color: var(--moradoP);
    border-radius: 1.5rem;
    padding: 1rem;
    margin-top: 1rem;
}

/* HABILIDADES TÉCNICAS  */

.habilidad{
    background-color: var(--grisF);
    position: relative;
    color: var(--blanco);
    padding: 1rem 2rem;
    border-radius: .7rem;
    margin: 2.5rem 0;
    max-width: 90rem;
}


.skill-box .title{
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.skill-box{
    margin: 2rem 1rem;
}

.skill-box .skill-bar{
    height: .8rem;
    width: 100%;
    border-radius: .6rem;
    background: var(--blanco);
    margin: .6rem;
    margin-bottom: 1rem;
}

.skill-bar .skill-per{
    position: relative;
    display: block;
    height: 100%;
    width: 90%;
    border-radius: .6rem;
    background: linear-gradient(to right, var(--amarillo), var(--naranja), var(--morado));
    animation: progress 0.8s ease-in-out forwards;
    opacity: 0;
}

.skill-per.html{
    width: 90%;
}
.skill-per.css{
    width: 80%;
}

.skill-per.js{
    width:75%;
}

.skill-per.php{
    width: 85%;
}

.skill-per.java{
    width: 80%;
}

.skill-per.py{
    width: 65%;
}

.skill-per.mysql{
    width: 80%;
}

.skill-per.ingles{
    width: 85%;
}

@keyframes progress {
    0%{
        width: 0;
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

.skill-per .tooltip{
    position: absolute;
    right: -1.9rem;
    top: -3.2rem;
    font-weight: 700;
    font-size: 1.3rem;
    background-color: var(--blanco);
    color: var(--negro);
    padding: .2rem .6rem;
    border-radius: .3rem;
    z-index: 1;
}

.tooltip::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -.2rem;
    height: 1rem;
    width: 1rem;
    z-index: -1;
    background-color: var(--blanco);
    transform: translateX(-50%) rotate(45deg);
}

/* HBILIDADES BLANDAS */ 

.habilidades_d{
    line-height: 2.0;
    font-size: 1.8rem;
}

.habilidades_d ul{
    list-style-type: square;
}

/* CONOCIMIENTOS */

@media (min-width: 768px) {
    .conocimientos{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 2rem;
        gap: 2rem;
    }

}

.conocimiento{
    background-color: var(--grisC);
    border-radius: 2rem;
    padding: 1rem;
    margin-bottom: 1rem;
    cursor:default;
}

/* PROYECTOS */

@media (min-width: 768px) {
    .proyectos{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.proyecto{
    border-radius: 1rem;
    border: .1rem solid var(--grisC);
    padding: 2rem;
}

.proyecto p{
    text-align: justify;
    
}

.proyecto__enlace{
    background: linear-gradient(to right, var(--azuld1), var(--azuld2));
    border-radius: 1rem;
    padding: 1rem 1rem; 
    display: inline-block;
    font-size: 2rem;
}

.proyecto__enlace a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--blanco);
    font-weight: 700;
}

.proyecto__enlace svg {
    width: 20px; /* Reducir el tamaño del ícono */
    height: 20px; /* Ajustar la altura del ícono */
    margin-left: 0.5rem;
}

/* CONTACTO */ 

.formulario{
    background-color: var(--azulP);
    width: min(70rem, 100%);
    margin: 0 auto;
    padding: 3rem;
    border-radius: 1rem;
    font-family: var(--fuenteP);
}


.formulario fieldset{
    border: none;
}

.formulario legend{
    text-align: center;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .contenedor-campos{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto 20rem;
        column-gap: 1rem;
    }

    .campos:nth-child(3),
    .campos:nth-child(4){   /* SELECCIONAR UN ELEMENTO EN ESPECIFICO */ 
        grid-column: 1 / 3;

    }
}

.contenedor-campos{
    display: grid;
}

.campos{
    margin-bottom: 1rem;
}


.campos label{
    font-weight: bold;
    margin-bottom: .5rem;
    display: block;
}

.campos textarea{
    height: 15rem;
}

.input_text{
    width: 100%;
    border: none;
    padding: 1.5rem;
    border-radius: 1rem;
    border: .3rem solid var(--azuld2);
}

.boton__contacto{
    font-size: 2rem;
    border-radius: .5rem;
    border: none;
    padding: 1rem 3rem;
    text-transform: uppercase;
    font-weight: 700;
    background-color: var(--azulB);
    color: var(--blanco);
    margin-top: 1rem;
    width: 100%;
    transition: background-color 1s ease;
}

@media (min-width: 768px) {
    .boton__contacto{
        width: auto;
    }
    
}

.boton__contacto:hover{
    background-color: var(--azul);
    color: var(--grisF);
}

.error {
    font-family: var(--fuenteP);
    background-color: rgb(185, 0, 0);
    text-align: center;
    padding: 1rem;
    color: var(--blanco);
    text-transform: uppercase;
}

.correcto{
    font-family: var(--fuenteP);
    background-color: rgb(74, 185, 0);
    text-align: center;
    padding: 1rem;
    color: var(--blanco);
    text-transform: uppercase;
}