/*SETEOS PRINCIPALES*/

:root{
    --primary-color: #8700A3;
    --primary-color-hard: #480057;
    --blanco-1: #ffff;
    --blanco-2: #dadada;
    --gris-1: #e6e3e3;
    --gris-2: #1a1a1a;
    --black: black;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'poppins', sans-serif;
    font-display: swap;
}

body{
    background-color: var(--black);
}

/*HEADER*/

header{
    width: 100%;
    display: grid;
}

.contacto{
    width: 90%;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 600px) {
    .contacto{
        grid-template-columns: 1fr;
    }
}

.contenedor-contacto{
    display: flex;
    grid-gap: 0.5rem;
    align-self: center;
}

@media (max-width: 600px) {
    .contenedor-contacto{
        justify-self: center;
    }
}


.iconos-contacto{
    font-size: 2rem;
    color: var(--blanco-1);
}

.iconos-contacto:hover{
    color: var(--blanco-2);
}


.titulo-header{
    justify-self: end;
    color: var(--blanco-1);
    align-self: center;
}

@media (max-width: 600px) {
    .titulo-header{
        display: none;
    }
}

.contacto-estilo:hover{
    text-decoration: none;
    color: var(--blanco-2);
}

.linkedin1{
    justify-self: end;
}

.background-header{
    width: 100%;
}

.background-header img{
    width: 100%;
}

.titulo{
    justify-self: center;
    font-size: 1.7rem;
    color: var(--blanco-1);
}

@media (max-width: 600px){
    .titulo{
        font-size: 1rem;
    }
  }

 @media (min-width: 1200px){
    .titulo{
        position: absolute;
        top: 4.8rem;
    }
  }

/*SECCIÓN 1: Imagen y aptitudes*/

.section-1{
    width: 90%;
    margin: auto;
    margin-top: 1rem;
    display: grid;
    grid-gap: 1.5rem;
}

.imagencircular{
    width: 12.5rem;
    justify-self: center;
}

@media (max-width: 600px){
    .imagencircular{
        width: 10rem;
    }
  }

.aptitudes{
    justify-self: center;
    display: grid;
    grid-gap: 0.7rem;
    text-align: center;
}

@media (min-width: 800px){
    .aptitudes{
        display: flex;   
        grid-gap: 0.3rem;
    }
  }

.aptitudes a{
    width: fit-content;
    text-decoration: none;
    padding-left: 1rem;
    padding-right: 1rem;
    justify-self: center;
    background-color: var(--primary-color) ;
    color: var(--blanco-1);
}

.aptitudes a:hover{
    background-color: var(--primary-color-hard) ;
    color: var(--blanco-1);
}

.botonera{
    justify-self: center;
    display: flex;
    grid-gap: 1rem;
}

.boton{
    background-color: var(--blanco-1);
    color: var(--black);
    text-decoration: none;
    padding: 0.5rem;
}

.boton:hover{
    background-color: var(--blanco-2);
}

/*SECTION 2: "Tarjetas"*/

.section-2{
    margin-top: 1.5rem;
}

.titulos-tarjetas{
    width: 90%;
    margin: auto;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    color: var(--blanco-1);
}

@media (max-width: 600px){
    .titulos-tarjetas{
        font-size: 1.3rem;
    }
}

/*Contenedor de tarjetas*/
  
  .contenedor-tarjetas {
    display: flex;
    margin-left: 5%;
    grid-gap: 1.5rem;
    width: 95%;
    overflow-x: auto; /*Indicamos el comportamiento del contenido que se desborda en el eje X*/
    scroll-snap-type: x;
    cursor: grab; /*Indica que el cursor sea la manito que agarra*/
    scroll-behavior: smooth; /*Suaviza el scroll*/
    scrollbar-width: none; /* elimina la barra de desplazamiento en firefox */
  }
  
  .contenedor-tarjetas::-webkit-scrollbar { /* elimina la barra de desplazamiento en chrome*/
    display: none;
  }
  
  .contenedor-tarjeta-individual {
    min-width: calc(17rem - .5rem);
    height: 27rem;
    padding: 1rem;
    background-image: url(img/tarjetas/fondo-tarjetas.webp);
    background-size: cover;
    border-radius: 10px;
    display: grid;
    grid-gap: 0.5rem;
    scroll-snap-align: start; /*Esto genera que cuando utilicemos el scroll, nos lleve al centro de este elemento. Probar con start y end para cambiar el efecto*/
    user-select: none; /*Hacemos que el usuario no pueda seleccionar el texto, ya que si lo puede seleccionar al mantener presionado, atenta contra el efecto que le queremos dar de que haga scroll deslizando*/
  }
  
  
  @media (min-width: 1000px){
    .contenedor-tarjeta-individual{
        min-width: calc(20rem - .5rem);   
        scroll-snap-align: center; 
        height: 30rem;
    }
  }



/*Contenido de tarjetas*/

.imagen-proyecto{
    width: 100%;
    pointer-events: none;
}

.nombre-proyecto{
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--blanco-1);
}

@media (max-width: 1000px){
    .nombre-proyecto{
        font-size: 1.1rem;
    }
  }

.tipo-de-proyecto{
    width: fit-content;
    height: fit-content;
    text-align: center;
    font-style: italic;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: var(--blanco-1);
    background-color: var(--primary-color);
}

.contenedor-botones{
    width: 100%;
    display: grid;
}

.boton-tarjeta{
    width: fit-content;
    justify-self: end;
    color: var(--blanco-1)
}

.boton-tarjeta:hover{
    color: var(--blanco-2);
}

/*FOOTER*/

footer{
    width: 100%;
    display: grid;
    grid-gap: 0.5rem;
    margin-top: 2.5rem;
    background-color: var(--gris-2);
    padding: 1.5rem;
    position: relative;
    bottom: 0;
}

.contenedor-redes{
    justify-self: center;
    display: flex;
    grid-gap: 1rem;
}

.iconos-redes{
    font-size: 2rem;
    color: var(--blanco-1);
}

.iconos-redes:hover{
    color: var(--blanco-2);
}

.marca{
    color: var(--blanco-1);
    justify-self: center;
    background-color: var(--primary-color);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}