/* --- PARTE ABAJO --- */
.parteBajo {
    width:  1520x;
    height: 100vh;

    display: flex;
    justify-content: flex-start;
    position: relative;
     z-index: 1;

    background-color: #FAD52E;
}

.cerebro {
    width: 800px;
    height: 600px;

    right: 60px;
    z-index: 2;
    position: absolute;

    

    }

.habilidades{
    width:600px;
    height: 600px;


    position: relative;
    z-index: 2;
    
}


.tituloH{

     opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;

    font-family: Boiling-BlackDemo;
    font-size: 110px;

    color: #f2404c;
    text-align: center;
    letter-spacing: -5px;

    width: 750px;
    height: 150px;
    left: 30px;
    top: 280px;

    z-index: 3;
    position: absolute;
}


.tituloH.ocultar {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}


/* --- Diseño y Edición --- */

.disenoyEdicion:hover{
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}


.disenoyEdicion {

    width: 300px;
    height: 400px;
    
    top: 200px;
    left: -100vw; 
    opacity: 0;
    transition: left 0.6s ease, opacity 0.4s ease;
    z-index: -1;

    position: absolute;
    will-change: transform;

}

.disenoyEdicionVISIBLE{
    left: 250px; 
  opacity: 1;
  z-index: 10;
}
.disenoyEdicionSALIENDO{
    left: -100vw;
  opacity: 0;
  z-index: 5;
}


.tituloDE {
    font-family: "Ubuntu", serif;
    font-weight: 900;
    font-style: normal;
    font-size: 80px;

    color:  #f2404c;
    letter-spacing: -8px;

    width: 400px;
    height: 50px;
    top: -10px;
    left: 10px;

    position: absolute;

}


.lenguajesDE {
    top: 70px;
    left: 20px;
    width: 250px;
    height: 300px;
    position: absolute;

}

.Ps{
    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;

}

.subTITULOdiseno1 {
    font-family: "Lato", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;

}

.skillsPS{
    width: 250px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;
}



.AI{
   width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;

}

.subTITULOdiseno2 {
    font-family: "Lato", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;

}
.skillsAI{
    width: 250px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;
}



.InDesign{
    width: 100px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;

}

.subTITULOdiseno3 {
    font-family: "Lato", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;

}

.skillsID{
    width: 250px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;
}


.PremierePro{
    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;

}

.subTITULOvideo1 {
    font-family: "Lato", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;

}

.skillsPr{
    width: 200px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;
}



.AfterEffects{
    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;

    
}

.subTITULOvideo2 {
    font-family: "Lato", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;

}

.skillsAE{
    width: 100px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;
}


/* --- Tecn.Front-End --- */

.TecnFrontEnd:hover{
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.TecnFrontEnd{
     width: 300px;
    height: 400px;
    
    top: 200px;
    left: -100vw; 
    opacity: 0;
    transition: left 0.6s ease, opacity 0.4s ease;
    z-index: -1;

    position: absolute;
    will-change: transform;

}
.TecnFrontEndVISIBLE{
    left: 250px; 
  opacity: 1;
  z-index: 10;
}
.TecnFrontEndSALIENDO{
    left: -100vw;
  opacity: 0;
  z-index: 5;
}

.tituloTFE{
    font-family: "Ubuntu", serif;
    font-weight: 900;
    font-style: normal;
    font-size: 80px;

    color:  #f2404c;
    letter-spacing: -8px;

    width: 400px;
    height: 80px;
    top: -10px;
    left: 10px;
    
    position: absolute;
}

.T_FrontEnd{
    top: 80px;
    left: 20px;
    width: 250px;
    height: 300px;

    position: absolute;
}

.Tailwind{
    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;

}
.subTITULOTECN1{

    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;

}
.skillsTW{

    width: 150px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;

}


.DaisyUI{

    width: 250px;
    height: 60px;

    
    display: flex;
    flex-direction: column;
    gap: 3px;

}
.subTITULOTECN2{

    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;

}
.skillsDUI{

    width: 50px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;

}


.Bootstrap{

width: 250px;
height: 60px;

    
display: flex;
flex-direction: column;
gap: 3px;

}
.subTITULOTECN3{

    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;

}
.skillsBT{

    width: 250px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;

}


.Vue3{

    width: 250px;
    height: 60px;

    
    display: flex;
    flex-direction: column;
    gap: 3px;

}
.subTITULOTECN4{

    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;

}
.skillsV{

    width: 100px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;

}



.Flutter{

    width: 250px;
    height: 60px;

    
    display: flex;
    flex-direction: column;
    gap: 3px;

}

.subTITULOTECN5{

    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;
    
}
.skillsF{

    width: 50px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;

}



/* --- CMS --- */

.CMS:hover{
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.CMS{

    width: 450px;
    height: 200px;
    
    top:300px;
    left: -100vw; 
    opacity: 0;
    transition: left 0.6s ease, opacity 0.4s ease;
    z-index: -1;

    position: absolute;
    will-change: transform;

}
.CMSVISIBLE{
    left: 250px; 
  opacity: 1;
  z-index: 10;
}
.CMSSALIENDO{
    left: -100vw;
  opacity: 0;
  z-index: 5;
}

.tituloCMS{

    font-family: "Ubuntu", serif;
    font-weight: 900;
    font-style: normal;
    font-size: 80px;

    color:  #f2404c;
    letter-spacing: -8px;

    width: 400px;
    height: 80px;
    top: -8px;
    left: 10px;

    position: absolute;

}

.CMSWP{

    top: 80px;
    left: 20px;
    width: 250px;
    height: 200px;

    position: absolute;
    
}

.WordPress{

    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;

}

.subTITULOUCMS1{
    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;
}

.skillsWP{

    width: 100px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;

}

.PrestaShop{

    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;

}

.subTITULOUCMS2{

    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

}

.skillsPSp{

    width: 200px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;

}


/* --- 3D --- */

.Modelado3D:hover{
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.Modelado3D{
    width: 300px;
    height: 400px;
    
    top: 200px;
    left: -100vw; 
    opacity: 0;
    transition: left 0.6s ease, opacity 0.4s ease;
    z-index: -1;

    position: absolute;
    will-change: transform;

}
.Modelado3DVISIBLE{
    left: 250px; 
  opacity: 1;
  z-index: 10;
}
.Modelado3DSALIENDO{
    left: -100vw;
  opacity: 0;
  z-index: 5;
}


.titulo3D{
    font-family: "Ubuntu", serif;
    font-weight: 900;
    font-style: normal;
    font-size: 80px;

    color:  #f2404c;
    letter-spacing: -8px;

    width: 400px;
    height: 50px;
    top: -15px;
    left: 10px;

    position: absolute;
}


.tresD{
    top: 70px;
    left: 20px;
    width: 250px;
    height: 300px;
    position: absolute;
}


.Blender{
    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.subTITULO3D1{
    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;
}
.skillsBlender{
    width: 150px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;
}

.Maya{
    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.subTITULO3D2{
    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;
}
.skillsMaya{
    width: 200px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;
}

.tresdsMax{
    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.subTITULO3D3{
    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;
}
.skills3DM{
    width: 250px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;
}

.ZBrush{
    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.subTITULO3D4{
    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;
}
.skillsZB{
    width: 100px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;
}

.Fusion360{
    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.subTITULO3D5{
    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;
}
.skills360{
    width: 80px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;
}

/* --- Desarrollo Web & App --- */

.WebApp:hover{
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.WebApp{

    width: 300px;
    height: 370px;
    
    top: 200px;
    left: -100vw; 
    opacity: 0;
    transition: left 0.6s ease, opacity 0.4s ease;
    z-index: -1;

    position: absolute;
    will-change: transform;

}

.WebAppVISIBLE{
    left: 250px; 
  opacity: 1;
  z-index: 10;
}
.WebAppSALIENDO{
    left: -100vw;
  opacity: 0;
  z-index: 5;
}


.tituloL{

    font-family: "Ubuntu", serif;
    font-weight: 900;
    font-style: normal;
    font-size: 80px;

    color:  #f2404c;
    letter-spacing: -8px;

    width: 300px;
    height: 80px;
    left: 10px;
    //top: 10px;
    

    position: absolute;

}


.lenguajes{

    top: 100px;
    left: 20px;
    width: 250px;
    height: 260px;

    position: absolute;

}


.HTML{

    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 5px;

}
.subTITULOLENGUA1{

    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;

}
.skillsHTML{
    
    width: 200px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;

}

.CSS{

    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 5px;


}
.subTITULOLENGUA2{

    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;


}
.skillsCSS{

    width: 200px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;

}

.JS{

    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 5px;


}
.subTITULOLENGUA3{

    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;


}
.skillsJS{

    width: 50px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;

}

.TS{

    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 5px;


}
.subTITULOLENGUA4{

    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;


}
.skillsTS{

    width: 100px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;

}


/* --- Entornos Interactivos --- */

.EntornosInteractivos:hover{
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.EntornosInteractivos{

    width: 450px;
    height: 200px;
    
    top:300px;
    left: -100vw; 
    opacity: 0;
    transition: left 0.6s ease, opacity 0.4s ease;
    z-index: -1;

    position: absolute;
    

}

.EntornosInteractivosVISIBLE{
    left: 150px; 
  opacity: 1;
  z-index: 10;
}
.EntornosInteractivosSALIENDO{
    left: -100vw;
  opacity: 0;
  z-index: 5;
}


.tituloEInteractivos{

    font-family: "Ubuntu", serif;
    font-weight: 900;
    font-style: normal;
    font-size: 80px;

    color:  #f2404c;
    letter-spacing: -8px;

    width: 400px;
    height: 50px;
    top: -17px;
    left: 10px;

    position: absolute;

}


.TexUnity{

    top: 70px;
    left: 20px;
    width: 250px;
    height: 300px;

    position: absolute;

}


.SPainter{

    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;

}
.subTITULOEI1{

    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;

}
.skillsSP{

    width: 50px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;

}

.Unity{

    width: 250px;
    height: 60px;
    
    display: flex;
    flex-direction: column;
    gap: 3px;

}
.subTITULOEI2{

    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #E3F2FD;

    width: 250px;
    height: 30px;

    justify-content:flex-start;
    align-items: end;
    display: flex;

}
.skillsUnity{

    width: 100px;
    height: 15px;
    border-radius: 50px;

    background-color: #340068;

}

/*Boton Viaje*/



.txtViaje{

    width: 150px;
    height: 50px;

    border-radius: 25px;
    border: none;
    cursor: pointer;

    font-family: "Ubuntu", serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;

    background-color: #f2404c;
    color: #FAD52E;
    box-shadow: 0px 0px 15px 3px rgba(22, 12, 72, 0.3);


}

.btnViaje{
    
    width: 200px;
    height: 50px;

    position: absolute;
    bottom: 20px;
    left: 650px;


    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 3;

}

.txtViaje:hover{
    color: #E3F2FD;
    background-color: #FAD52E;
    box-shadow: none
}