@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    /* COLORES */
    --color_primario: #ff6600;
    --color_secundario: #252525;
    --color_negro: #000;
    --color_blanco: #fff;
    /* TAMAÑOS */
    --ancho_maximo: 1100px;
    --padding_izquierda_derecha: 20px;
    --padding_arriba_abajo: 100px;
    --altura_header: 60px;
    /* TAMAÑOS DE FUENTE */
    --titulo_h1: clamp(1rem, 4vw, 1.5rem);
    --titulos_h2: clamp(1.2rem, 1.6vw, 1rem);
    --subtitulo_seccion_principal: clamp(1.1rem, 4vw, 2rem);
    --parrafo_seccion_principal: clamp(0.6rem, 2.3vw, 1.1rem);
    --parrafo_secciones: clamp(1.2rem, 2.5vw, 1.4rem);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul,
ol {
    list-style: none;
}
a {
    text-decoration: none;
}
html {
    height: 100%;
    scroll-behavior: smooth;
}
body {
    font-family: "Raleway", sans-serif;
    min-height: 100%;
    background-color: var(--color_negro);
    
    
}

/* ESTILOS GLOBALES COMPARTIDOS */
.estilo_secciones_globales {
    margin: 0 auto;
    width: min(100%, var(--ancho_maximo));
    padding: var(--padding_arriba_abajo) var(--padding_izquierda_derecha);
}
.titulos_secciones {
    font-size: var(--titulos_h2);
    color: var(--color_primario);
    text-align: center;
    margin-bottom: 30px;
}
.titulos_h3 {
    color: var(--color_blanco);
    font-size: clamp(1rem, 4vw, 1.5rem);
}







/*nav barra*/
.header {
    width:100% ;
}
.barra_navegacion {
    

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    width: min(100%,var(--ancho_maximo));
    padding: 0px var(--padding_izquierda_derecha);
    height: var(--altura_header);
}
.barra_navegacion h1{
    font-size: var(--titulo_h1);
    color: var(--color_primario);
}


.bi {
}
.bi-list {
}

.icon_burger {
    font-size: 50px;
    color: white;
    position: fixed;
    z-index: 10;
    top: 8px;
    right: 20px ;
}

.icono_hambuerguesa {
   display: none;
}
.icono_hambuerguesa:checked + .ul_links_nav{
height: 100vh;


}
.ul_links_nav {
    background-color: #000;
    width: 100%;
    position: fixed;
    width:100% ;
    left: 0;
    top: 0;
    height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:20px;
    transition: heigh .4s ease;
}
.li_links_nav {
}
.link_nav {
    color: var(--color_blanco);
    font-size: 2.2rem;
    font-weight: bold;
}

/* seccion pricipal*/

.seccion_principal_article {
    text-align: center;
    
}
.seccion_principal_h2 {
    color:var(--color_primario);
    font-size: var(--subtitulo_seccion_principal);
}
.seccion_principal_h3 {
    font-size: var(--subtitulo_seccion_principal);
    color:var(--color_blanco); 
}
.seccion_principal_p {
    font-size: var(--subtitulo_seccion_principal);
    color:var(--color_blanco); 
    margin: 15px 0;
    
}
.btn_contenedor {
    
    display: flex;
    justify-content: center;
    gap: 10px;

}
.boton {
    background-color:var(--color_primario);
    font-size: 1.2rem;
    font-weight: bold;
    padding: 5px 15px;
    color: var(--color_negro);
}
.img-principal{
    width: 100%;
    display: none;
}

/* sobre mi */
.seccion_sobremi {
background-color: var(--color_secundario);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.sobremip {
    color: var(--color_blanco);
    text-align: center;
    margin-bottom: 30px;

}
.image_sobremi {
    width: 100%;
    max-width: 350px;
    margin: 0;
}


/*seccion habilidades*/
.contenedor_habilidades {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 100%;

    text-align: center;
}

.tecnologia_icono {
    width: 50%;
    max-width: 350px;
}
.contenedor_habilidad {
    background-color: var(--color_secundario);
    padding: 20px 0;
}

/*proyectos*/
.contendor_proyectos{

display: flex;
flex-direction: row;
gap: 20px;
}

.contendor_proyecto p{
color:var(--color_blanco);
width: 70%;
max-width: 338px;
text-align:center;




}
.contendor_proyecto {
    background-color: var(--color_secundario);
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
}
.titulos_h3 {
    text-align: center;
}
.img_proyecto {
    width: 100%;
    max-width: 300px;
}





/*disposotivo de escritorio*/
@media(min-width:670px){

   
    .barra_navegacion {
        
    
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    
    }
    
    
    
    .icon_burger {
        display: none;
    }
    
    .icono_hambuerguesa {
       display: none;
    }
    .icono_hambuerguesa:checked + .ul_links_nav{
    height: 100vh;
    
    
    }
    .ul_links_nav {
        background-color:transparent;
        width:auto;
        height: auto;
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap:10px;
        
    }
    .li_links_nav {
    }
    .link_nav {
        color: var(--color_blanco);
        font-size: 1.2rem;
        font-weight: bold;
    }

    /* seccion pricipal*/

    .seccion_principal {
    
        display: flex;
        justify-content: space-around;
    }
    

    .seccion_principal_article {
        text-align: initial;
        width: 50%;
        
    }

    .btn_contenedor {
        
        
        justify-content: start;
        gap: 10px;

    }
    .boton {
        background-color:var(--color_primario);
        font-size: 1.5rem;
        font-weight: bold;
        padding: 7px 15px;
    
    }
    .img-principal{
        width: 45%;
        display: block;
        max-width: 1030px;
        object-fit: cover;
        
    }
    /*sonremi*/
    .seccion_sobremi {
        
    
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 30px;
        
    }
    
        /*seccion habilidades*/
    .contenedor_habilidades {
        
        flex-direction: row;
        gap: 5%;

        text-align: center;
    }

    .tecnologia_icono {
        width: 60%;
        max-width: 200px;
    }
    .contenedor_habilidad {
        background-color: var(--color_secundario);
        padding: 20px 0;
    }

    
/*proyectos*/
.contendor_proyectos{

    display: flex;
    flex-direction: column;
    gap: 20px;
    }
    
    .contendor_proyecto p{
    color:var(--color_blanco);
    width: 70%;
    max-width: 338px;
    text-align:center;
    
    
    
    
    }
    .contendor_proyecto {
        background-color: var(--color_secundario);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .titulos_h3 {
        text-align: center;
    }
    .img_proyecto {
        width: 100%;
        max-width: 300px;
    }

   
}