@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root{

    color-scheme: light dark;
    --background-dark:oklab(17.051% 0.00272 -0.00347);
    --background-light: oklab(90.53099999999999% 0.03222 -0.04691);

    --componente-dark: oklch(20.913% 0.01021 303.579);
    --componente-light:oklch(90.06% 0.0001 271.152) ;

    --primary: oklab(25.197000000000003% 0 -0.00003);
    --secondary: oklab(51.028% 0 -0.00006);
    --tertiary: oklab(68.29499999999999% 0 -0.00008);
    --cuaternary: oklab(97.878% 0.00741 -0.0103);
    --hightlight:  oklab(42.526% 0.08263 -0.19101);

    --text--light: #111;
    --text--dark: #efefef;


  /* botones */
    --button--dark:#E0E0E0;

    /* text sizes */
    --h1:2.4rem;
    --h2:1.2rem;
    --h3:1rem;
    --p:.8rem;
    
    --h1-desktop:4.0rem;
    --h2-desktop:3.2rem;
    --h3-desktop:2.4rem;
    --p-desktop:1.2rem;
    --subtitle: .96rem;
    
    --rounded: .666rem;


    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;
    }

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

html,body{
  font-family: "Poppins", sans-serif;
    width: 100%;
    height: auto;
    margin: 0;
    scroll-behavior: smooth;
    overflow-x: hidden;
    transition: background 0.1s linear;
    background-color: light-dark(( var(--background-light), var(--background-dark)));
}


strong{
    color: var(--primary);
    font-weight: 800;
}


section{
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 5.6rem auto;
  border: .016rem solid var(--primary);
  border-radius: var(--rounded);
    padding: .8rem;
}


ul{
    list-style: none;
}




h1{
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--h1);
  color: var(--cuaternary);
}

h2{
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: var(--h2);
  }
  
h3{
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: var(--subtitle);
}

p{
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: var(--p);
}




img{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    border-radius: var(--rounded);
}




a{
 font-family: "Poppins", sans-serif;
    font-size: var(--p);
    font-weight: 800;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    text-decoration: none;
    align-items: center;
    justify-content: center;
   border-radius: var(--rounded);
    transition: .5s;
    margin: 0 auto;
    cursor: pointer;
    color: light-dark ( (var(--text--light),var(--text--dark) ));
}


.cta-button{
   font-family: "Poppins", sans-serif;
    font-size: var(--p);
    font-weight: 800;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: .8rem;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--rounded);
    transition: .5s;
    margin: 1.6rem auto;
    cursor: pointer;
      background-color: light-dark( ( var(--background-dark),var(--background-light) ) );
}


.cta-button:hover{
  background-color: light-dark( ( var(--background-dark),var(--background-light) ) );
  border: .1rem solid var(--secondary);
  cursor: pointer;
}



.nav--logo{
  width: 100%;
  min-width:96px;
  height: auto;
  background-color: transparent;
  color: light-dark( (var(--text--light),var(--text--dark)));
  border: none;
  font-weight: 500;
  cursor: pointer;
}

.contact-me{
background-color: var(--hightlight);
color: var(--text--dark);
padding: .8rem 1.6rem;
border: none;
  border-radius: var(--rounded);
cursor: pointer;
transition: .85s;
}

.contact-me:hover{
background-color: transparent;
color: var(--text--dark);
padding: .8rem 1.6rem;
border: .1rem solid var(--hightlight);
  border-radius: var(--rounded);
transition: .85s;
}

/* navbar */

header{
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 4rem auto;
  border: .016rem solid var(--primary);
  border-radius: var(--rounded);
  background-color: var(--componente-dark);
  padding: .8rem;
}

.header--datta{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

.header--pic{
width: 100%;
min-width: 64px;
max-width: 80px;
height: auto;
padding: .8rem;
background-color: var(--componente-dark);
border-radius: 9999px;
margin: .8rem;
}

.header--description{
  width: 100%;
  height: auto;
  padding-top: .8rem;
  color: light-dark(var(--text--light),var(--text--dark));
}

.header--subtitle{
font-size: var(--p);
color: var(--secondary);
}

.header--button{
  width: 100%;
  height: auto;
  padding: .8rem 2.4rem;
  border: .080rem solid var(--tertiary);
  border-radius: 3.2rem;
  color: light-dark(var(--text--light),var(--text--dark));

}

nav{
    display: flex;
    flex-direction: row;
    gap: 4rem;
    width: 100%;
    height: 64px;
    padding: .8rem;
    justify-content:center;
    align-items: center;
    z-index: 100;
    border-bottom: .1rem solid var(--primary);

}


main{
width: 100%;
height: auto;
}


/* secciones y articulos */

.title--section{
  width: 100%;
  height: auto;
  color: light-dark(var(--text--light),var(--text--dark));
  padding: .8rem;
  border-bottom: .1rem solid var(--primary);
  margin-bottom: 1.6rem;
  font-size: var(--subtitle);
}


/* secciones separadas y con colores */

.nav--navbar{
    background-color:light-dark( var(--background-light), var(--background-dark));
}

.button--up{
  background-color: transparent;
  border-radius: 99999rem;
  border: solid .16rem var(--primary);
  margin: 1.6rem auto;
  padding: .4rem;
  cursor: pointer;
  background-color: var(--background-dark);
}

.button--up img{
  width: 100%;
  max-width: 64px;
  height: auto;
  padding: .64rem;
}


/* SERVICES */


.services--slider{
display: flex;
flex-direction: row;
width: 100%;
max-width: 480px;
height: auto;
scroll-behavior: smooth;
overflow-x: scroll;
gap: 1.6rem;
}

.services--card{
  width: 640px;
  height: auto;
  padding: .8rem 3.2rem;
  border-radius: var(--rounded);
  margin: 1.6rem auto;
  border: .08rem solid var(--primary);
  background-color: light-dark( var(--componente-light), var(--componente-dark));
  backdrop-filter: blur(24px);
}

.services--title--container{
display: flex;
flex-direction: row;
padding-bottom: 4.8rem;
align-items: center;
justify-content: center;
margin: 0 auto;
}

.services--card--title{
width: 100%;
height: auto;
text-align: left;
padding-top: 4rem;
padding-bottom: 4rem;
color: light-dark(var(--text--light),var(--text--dark));
}

.services--card--icon{
width: 72px;
height: 72px;
}

.services--card--icon img{
  width: 100%;
  max-width: 80px;
  height: auto;
  padding: .64rem;
  border: .1rem solid var(--tertiary);
  color: var(--primary);
  background-color: var(--primary);
}


.etiquetas--container{
  display: flex;
  flex-direction: row;
  gap: .8rem;
}

.services--etiqueta{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 24px;
  background-color: var(--primary);
  color: var(--cuaternary);
  border: .040rem solid var(--secondary);
  border-radius: var(--rounded);
  font-size: .64rem;
}

.services--text--container{
  width: 100%;
  height: auto;
  text-align: left;
}

.services--text{
width: 100%;
height: auto;
padding: 1.6rem 0;
color:var(--tertiary);
}



/* PROYECTOS */

.projects--section{
display:flex;
flex-direction: column;
width: 100%;
max-width: 480px;
min-width: 320px;
height: auto;
background-color: var(--componente-dark);
}


.projects--slider{
  width: 100%;
  min-width: 320px;
  height: auto;
  display: flex;
  flex-direction: row;
  scroll-behavior: smooth;
  overflow-x: scroll;
  gap: .48rem;
}

.project--card{
  position: relative;
  width: 100%;
  height: auto;
  border-radius: var(--rounded);
  overflow: hidden;
  border: .1rem solid var(--primary);
  padding: 7.2rem;
  margin: 1.6rem auto;
  backdrop-filter: blur(24px);
}

.pampa{
  background-image: url(./pampa.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
}

.espora{
    background-image: url(./espora.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
}

.velo{
    background-image: url(./velo.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
}

.ama-maitea{
    background-image: url(./ama-maitea.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
}


.project--title{
  position: absolute;
  bottom: 1rem;
  left: 1.6rem;
  color: var(--cuaternary);
    font-family: "Poppins", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0 auto;
  text-shadow: .1rem .01rem .1rem var(--primary);
}

.project--etiqueta{
  position: absolute;
  top: .8rem;
  right: .4rem;
  background-color: var(--cuaternary);
  color: #333;
  font-size: 0.8rem;
  font-weight: 500;
  padding: .5px 12px;
   border-radius: var(--rounded);
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}





/* contact section */

.footer--section{
    width: 100%;
    height: auto;
    margin: 0 auto;
    border: none;
 background-color: var(--background-dark);
    border-top: .016rem solid var(--secondary);
}


.footer--card{
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 425px;
    height: auto;
    margin: 0 auto;
    padding: 4rem .16rem;
    justify-content: center;
    align-items: center;
}

.footer--card--text h3{
  font-size: 1.2rem;
  text-align: left;
  color: var(--tertiary);
  padding: 0 .4rem;
}

.footer--card--text p{
font-size: .60rem;
text-align: left;
color: var(--tertiary);
  padding: 0 .4rem;
}

.footer--card--icon img{
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}