@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Work+Sans:wght@100;300;400;600;800&display=swap');
*{
box-sizing: border-box;
font-family: 'Work Sans';
margin: 0;
padding: 0;
} 
html{
/* me permite deslizar cuando hago clic en los links del menu */
scroll-behavior: smooth;
}
/* MENU */
.contenedor-header{
background: #721313;
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 99;
}

.contenedor-header header{
max-width: 1100px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
}
/* Titulo superior ERNESTO VAZQUEZ */
.contenedor-header header .logo a{
font-family: 'Righteous';
font-size: 36px;
color: #fff;
text-decoration: none;
}
.contenedor-header header ul{
display: flex;
list-style: none;
}

.contenedor-header header nav ul li a{
text-align: none;
color: #fff;
margin: 0 15px;
padding: 3px;
transition: .5s;
text-decoration: none;
}
.contenedor-header header nav ul li a:hover{
color: #d6d6d6;
}
.nav-responsive{
background-color: #721313;
color:#721313;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
display: none;
}
/* Color de inicio degradado + titulo del banner que contiene la imagen*/
.inicio{
background: linear-gradient(to top, rgba(90, 43, 43, 0.8), rgb(204, 42, 42)),
url(img/fondo.jpg);
background-size: cover;
height: 100vh;
color: #fff;
display: flex;
align-items: center;
}
/* Banner de imagen*/
.inicio .contenido-banner{
padding: 20px;
background-color: #721313;
max-width: 350px;
margin: auto;
text-align: center;
border-radius: 40px;
}
/* Contorno de Imagen*/
.inicio .contenido-banner img{
margin-top: 40px;
border: 10px solid #270101;
display: block;
width: 80%;
margin: auto;
border-radius: 100%;
}
.inicio .contenido-banner h1{
margin-top: 40px;
font-size: 42px;
font-family: 'Righteous';
}
.inicio .contenido-banner h2{
font-size: 15px;
font-weight: normal;
}
/* Logo de redes*/
.inicio .contenido-banner .redes a{
color: #fff;
display: inline-block;
text-decoration: none;
border: 1px solid #fff;
border-radius: 100%;
width: 42px;
height: 42px;
line-height: 42px;
margin: 40px 5px;
font-size: 20px;
transition: .3s;
}
/* inicio .contenido-banner .redes a:hover*/
.inicio .contenido-banner .redes a:hover{
background-color: #750a0a;
}
.sobremi{
background-color: #750a0a;
color: #fff;
padding: 50px 20px;
}
.sobremi .contenido-seccion{
max-width: 1100px;
margin: auto;
}
.sobremi h2{
font-size: 48px;
font-family: 'Righteous';
text-align: center;
padding: 20px 0;

}
.sobremi .contenido-seccion p{
font: 18px;
line-height: 22px;
margin-bottom: 20px;
}
.sobremi .contenido-seccion p span{
color: #fff;
font-weight: bold;
}
.sobremi .fila{
display: flex;
}
.sobremi .fila .col
{
width: 50%;
}
.sobremi .fila .col h3{
font-size: 28px;
font-family: 'Righteous';
margin-bottom: 25px;
}
.sobremi .fila .col ul{
list-style: none;
}
.sobremi .fila .col ul li{
margin: 12px 0;
}
.sobremi .fila .col ul li strong{
display: inline-block;
color: #fff;
width: 130px;
}
.sobremi .fila .col ul li span{
background-color: #b61c1c;
padding: 3px;
font-weight: bold;
border-radius: 5px;
}
.sobremi .fila .col .contenedor-intereses{
display: flex;
flex-wrap: wrap;
}
.sobremi .fila .col .contenedor-intereses .interes{
width: 100px;
height: 100px;
background-color: #921515;
border-radius: 10px;
margin: 0 15px 15px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: .3s;
}.sobremi .fila .col .contenedor-intereses .interes:hover{
background-color: #b61c1c;
}
.sobremi .fila .col .contenedor-intereses .interes i{
font-size: 30px;
margin-bottom: 10px;
}
.sobremi button{
cursor: pointer;
background-color: transparent;
border: 2px solid #ff0202;
width: fit-content;
display: block;
margin: 20px auto;
padding: 10px 22px;
font-size: 16px;
color: #fff;
position: relative;
z-index: 10;
}
.sobremi button .overlay{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #d80707;
z-index: -1;
transition: 1s;
}
.sobremi button:hover .overlay{
width: 100%;
}
.descargar-cv {
color: #fff; /* Blanco */
text-decoration: none; /* Opcional: para quitar el subrayado */
}

/* SECCION S K I L L S */
.skills{
background-color: #381a16;
color: #fff;
padding: 50px 20px;
}
.skills .contenido-seccion{
max-width: 1100px;
margin: auto;
}
.skills h2{
font-size: 48px;
font-family: 'Righteous';
text-align: center;
padding: 20px 0;

}
.skills .fila{
display: flex;
}
.skills .fila .col{
width: 50%;
padding: 0 20px;
}
.skills .fila .col h3{
font-size: 28px;
font-family: 'Righteous';
margin-bottom: 25px;
}
.skills .skill > span{
font-weight: bold;
display: block;
margin-bottom: 10px;
}
.skills .skill .barra-skill{
height: 8px;
width: 80%;
background-color: #171313;
position: relative;
margin-bottom: 30px;
}
.skills .skill .progreso{
background-color: #f80000;
position: absolute;
top: 0;
left: 0;
height: 8px;
}
.skills .skill .barra-skill span{
position: absolute;
height: 40px;
width: 40px;
background-color: #bd1919;
border-radius: 50px;
line-height: 40px;
text-align: center;
top: -17px;
right: -15px;
font-size: 14px;
}
.skills .skill  span {
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.skills .skill .barra-skill {
    height: 8px;
    width: 80%;
    background-color: #171313;
    position: relative;
    margin-bottom: 30px;
}

.skills .skill .progreso {
    background-color: #f80000;
    position: absolute;
    top: 0;
    left: 0;
    height: 8px;
}

.skills .skill .barra-skill span {
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: #bd1919;
    border-radius: 50px;
    line-height: 40px;
    text-align: center;
    top: -17px;
    right: -15px;
    font-size: 14px;
}
.skills .skill .javascrips

/* Estas clases se agregan dinámicamente mediante JavaScript */
.skills .skill .Testingfuncional {
    width: 0%;
    animation: 2s Testingfuncional forwards;
}

@keyframes testing {
    0% { width: 0%; }
    100% { width: 100%; }
}

.skills .skill .pruebas-de-stress {
    width: 0%;
    animation: 2s pruebas-de-stress forwards;
}

@keyframes pruebas-de-stress {
    0% { width: 0%; }
    100% { width: 50%; }
}

.skills .skill .api {
    width: 0%;
    animation: 2s api forwards;
}

@keyframes api {
    0% { width: 0%; }
    100% { width: 75%; }
}

.skills .skill .sql {
    width: 0%;
    animation: 2s sql forwards;
}

@keyframes sql {
    0% { width: 0%; }
    100% { width: 50%; }
}

.skills .skill .Automation {
    width: 0%;
    animation: 2s Automation forwards;
}

@keyframes Automation {
    0% { width: 0%; }
    100% { width: 50%; }
}

.skills .skill .comunicacion {
    width: 0%;
    animation: 2s comunicacion forwards;
}

@keyframes comunicacion {
    0% { width: 0%; }
    100% { width: 90%; }
}

.skills .skill .trabajo {
    width: 0%;
    animation: 2s trabajo forwards;
}

@keyframes trabajo {
    0% { width: 0%; }
    100% { width: 90%; }
}

.skills .skill .creatividad {
    width: 0%;
    animation: 2s creatividad forwards;
}

@keyframes creatividad {
    0% { width: 0%; }
    100% { width: 70%; }
}

.skills .skill .dedicacion {
    width: 0%;
    animation: 2s dedicacion forwards;
}

@keyframes dedicacion {
    0% { width: 0%; }
    100% { width: 100%; }
}

.skills .skill .Proyect {
    width: 0%;
    animation: 2s Proyect forwards;
}

@keyframes Proyect {
    0% { width: 0%; }
    100% { width: 25%; }
}

/* SECCION CURRICULUM */
.curriculum{
background-color: #3a0b0b;
color: #fff;
padding: 50px 20px;
}
.curriculum .contenido-seccion{
max-width: 1100px;
margin: auto;
}
.curriculum h2{
font-size: 48px;
font-family: 'Righteous';
text-align: center;
padding: 20px 0;

}
.curriculum .fila{
display: flex;
justify-content: space-between;
}
.curriculum .fila .col{
width: 49%;
padding: 0 20px;
}
.curriculum .fila .col h3{
font-size: 28px;
font-family: 'Righteous';
margin-bottom: 25px;
}
.curriculum .fila .izquierda{
border-right: 2px solid #6e1717;
}
.curriculum .fila .derecha{
border-left: 2px solid #6e1717;
}
.curriculum .fila .item{
padding: 25px;
margin-bottom: 30px;
background-color: #6e1717;
position: relative;
}
.curriculum .fila .item h4{
font-size: 20px;
margin-bottom: 10px;
}
.curriculum .fila .item .casa{
color: #fff;
font-size: 22px;
font-weight: bold;
display: block;
}
.curriculum .fila .item .fecha{
display: block;
color: #ffffff;
margin-bottom: 10px;
}
.curriculum .fila .item p{
line-height: 24px;
}
.curriculum .fila .izq{
border-right: 2px solid #fff;
margin-right: 20px;
}
.curriculum .fila .der{
border-left: 2px solid #fff;
margin-left: 20px;
}
.curriculum .fila .item .conectori{
height: 2px;
background-color: #fff;
width: 47px;
position: absolute;
top: 50%;
right: -47px;
z-index: 5;
}
.curriculum .fila .item .conectori .circuloi{
display: block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #fff;
float: right;
position: relative;
bottom: 4px;
}
.curriculum .fila .item .conectord{
height: 2px;
background-color: #fff;
width: 47px;
position: absolute;
top: 50%;
left: -47px;
z-index: 5;
}
.curriculum .fila .item .conectord .circulod{
display: block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #fff;
float: left;
position: relative;
bottom: 4px;
}
/* SECCION CONTACTO */
.contacto{
background-image: url(img/contact_bg.png);
background-color: #580b0b;
color: #fff;
padding: 50px 0;
}
.contacto .contenido-seccion{
max-width: 1100px;
margin: auto;
}
.contacto h2{
font-size: 48px;
font-family: 'Righteous';
text-align: center;
padding: 20px 0;
}
.contacto .fila{
display: flex;
}
.contacto .col{
width: 50%;
padding: 10px;
position: relative;
}
.contacto .col input, .contacto .col textarea{
display: block;
width: 100%;
padding: 18px;
border: none;
margin-bottom: 20px;
background-color: #691613;
color: #fff;
font-size: 18px;
}
.contacto button{
cursor: pointer;
background-color: transparent;
border: 2px solid #fff;
width: fit-content;
display: block;
margin: 30px auto;
padding: 10px 22px;
font-size: 16px;
color: #fff;
position: relative;
z-index: 10;
}
.contacto button .overlay{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #b61c1c;
z-index: -10;
transition: 1s;
}
.contacto button:hover .overlay{
width: 100%;
}
.contacto .col img{
width: 100%;
}
.contacto .col .info{
position: absolute;
top: 40%;
background-color: #861111;
padding: 20px;
max-width: 350px;
left: 50%;
transform: translate(-50%, -50%);
}
.contacto .col .info ul{
list-style: none;
}
.contacto .col .info ul li{
margin-bottom: 20px;
}
.contacto .col .info ul li i{
color: #e9e2e2;
display: inline-block;
margin-right: 20px;
}
footer{
background-color: #880c0c;
color: #fff;
padding: 50px 0 30px 0;
text-align: center;
position: relative;
width: 100%;
}
footer .redes{
margin-bottom: 20px;
}
footer .redes a{
color: #fff;
display: inline-block;
text-decoration: none;
border: 1px solid #fff;
border-radius: 100%;
width: 42px;
height: 42px;
line-height: 42px;
margin: 40px 5px;
font-size: 20px;
transition: .3s;
}
footer .arriba{
display: block;
width: 50px;
height: 50px;
background-color: #d10808;
color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -25px;
border-radius: 50%;
line-height: 50px;
font-size: 18px;
}
/* SECCION RESPONSIVE */
@media screen and (max-width:980px){
nav{
display: none;
}
.nav-responsive{
display: block;
}
nav.responsive{
display: block;
position: absolute;
right: 0;
top: 75px;
background-color: #ff0000;
width: 180px;
}
nav.responsive ul{
display: block !important;
}
nav.responsive ul li{
border-bottom: 1px solid #fff;
padding: 10px 0;
}
}
@media screen and (max-width:700px){}
.sobremi .fila{
display: block;
}
.sobremi .fila .col{
width: fit-content;
}

.skills .fila{
display: block;
}
.skills .fila .col{
width: 100%;
}
.skills .fila .col .barra-skill{
width: 100%;
}

.curriculum .fila{
display: block;
}
.curriculum .fila .col{
width: 90%;
}
.curriculum .fila .derecha{
margin-left: 20px;
}

.portfolio .galeria{
display: block;
width: 100%;
}
.portfolio .galeria .proyecto{
max-width: 100%;
}
.portfolio .galeria .proyecto img{
width: 100%;
}
.contacto .fila{
display: block;
}
.contacto .fila .col{
width: 100%;
}