@import url(resets/reset_meyer.css);

@import url("https://use.typekit.net/lup3ifz.css");

@font-face{
    font-family:"Editorial New";
    src: url("../fonts/EditorialNew-Regular.otf") format("opentype");
}

/*Variables*/
/*aquí pongo distintos colores y tipografías*/
:root {
   --col-background: rgb(8, 8, 8);
   --col-grey: rgb(231, 231, 231);
   --col-transgrey: rgba(195, 195, 195, 0.493);

   --col-white: rgb(255, 255, 255);
   --col-pink: rgb(236, 100, 152);
   --col-pink-soft: rgb(248, 125, 172);

   --font-family-sans: "neue-haas-unica", sans-serif ;
   --font-family-serif: "Editorial New", serif;
   --font-w-normal: 300;
   --font-l-normal: 1.8em;
   --font-size: 1.8em;
   
   
   
  
}

*{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style: none;
}

/*Características del Cuerpo*/
body{

 background-color:var(--col-white); 
 font-family: var(--font-family-sans);
 color: var(--col-background);

}

/* ESTILO DEL SCROLL CUERPO*/

body::-webkit-scrollbar {
    width: 0px;               /* width of the entire scrollbar */
  }
  
  body::-webkit-scrollbar-track {
    background: var(--col-background);        /* color of the tracking area */
  }
  
  body::-webkit-scrollbar-thumb {
    background-color: var(--col-pink-soft);    /* color of the scroll thumb */
  }

/* HEADER BIEN HECHO */
.navbar {
    padding: 1.4em;
    padding-top: 1.2em;
    font-weight: 500;
    
    
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lolita_icon a {
    color: var(--col-background);
    font-size: 1.3em;
}

.navigation__hamburguer {
    display: none;
}

.contenedor_menu {
    z-index: 15;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
}

.navigation__menu {
    display: flex;
    gap: 10em;
}

.item_enlace {
    font-size: 1.3em;
    color: var(--col-background);
    filter: brightness(90%);
   
}

.item_enlace:hover::after {
    content: url(../gifs/tachado.gif);
    transform: scale(0.3);
    position: absolute;
    left: -115px;
    top: -135px;
}

.menu__item {
    position: relative;

}

/* .item_enlace:hover {
    color: var(--col-pink);
} */

/* Hamburger Icon */
.hamburger-icon {
    display: none;
    cursor: pointer;
    z-index: 100;
}

.line {
    width: 30px;
    height: 3px;
    background-color: black;
    margin: 6px 0;
    transition: all 0.3s ease;
}



/* ___FOOTER__ */

.bloque_footer{
    min-height: 8em ;
    font-size: 1.2em;
    padding-bottom: 1.5em;
    z-index: 15;
    display: flex;
    flex-direction: column;
    /* background-color: var(--col-pink); */
    color: var(--col-background);
    font-weight: 500;

}

.bloque_giffooter{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8em;
    padding: 1.4em;
    padding-bottom: 1em;
}

.redes{
    display: flex;
    flex-direction: column;
    gap: 0.5em;

}

.redes a{
    color: var(--col-background);
}

.redes a :hover{
    color: var(--col-pink);
    transition: 500ms;
}

.gmail{
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    font-size: 40px;
    font-family: var(--font-family-serif);
}

.extra-footer{
    display: flex;
    justify-content: space-between;

}

.madrid{
    align-self: flex-end;
}

.copy23{
    align-self: flex-end;
}


/*FOOTER MARQUEE ANIMACION*/



.footer_marquee_container{
    height: 2em;
    display: flex;
    overflow: hidden;
    user-select: none;
    position: relative;
    font-size: 24px;
    color: var(--col-background);
    border-width: 3px;
    border-left: 0px;
    border-right:0px;
    border-style: solid;
    border-color: var(--col-background);
    gap: 0.5em;
    
}

.footer_marquee_container ul{
    list-style: none;
    flex-shrink: 0;
    min-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;

    animation: scroll2 20s linear infinite;

}

@keyframes scroll2{
    to{
        transform: translateX(calc(-100% - 0.5em));
    }
}


/* ANIMACIÓN PAUSADA AL PASAR RATÓN */
.footer_marquee_container:hover ul{
    animation-play-state: paused;
    transition-delay: 10s;

}

/*_______CONTENIDO_______*/

.contenedor_gc{
    display: flex;
    flex-direction: row-reverse;
    gap: 1em;
    




}

/* GALERIA DE PROYECTO */
/* SCROLL HORIZONTAL GALLERY */
.slider-wrapper {

    max-width: 990px;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 55%;
    gap: 0.5em;
    
    overflow-x: scroll;
    overflow-y: hidden;

    white-space: nowrap;
    cursor: grab;


}
/* AÑADIDO */
/* el cursor con icono de agarrando */

.slider-wrapper:active{
    cursor: grabbing;
}
  
.item-slide > img {
    inline-size: 100%;
    aspect-ratio: 4 / 5 ;
    object-fit: cover;

}

/* ESTILO DEL SCROLL CUERPO*/

.slider-wrapper::-webkit-scrollbar {
    height: 8px;           /* height of the entire scrollbar */

  }
  
.slider-wrapper::-webkit-scrollbar {
    background-color: var(--col-white);        /* color of the tracking area */
  }
  
.slider-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--col-grey);    /* color of the scroll thumb */


  }

.slider-wrapper::-webkit-scrollbar-thumb:hover {
    cursor: pointer;

  }

/* APARTADO DE LA INFO */
/* TITULO + TAGS + CONTENIDO + PASADORES */
.bloque_contenido{
    display: flex;
    flex-direction: column;
    padding: 1.4em;
    margin-top: 2em;
    font-size: 16px;

    gap: 2em;
}

/* TITULO + TAGS + CONTENIDO*/

.bloque_proyecto{
    display: flex;
    flex-direction: column;
    gap: 1em;
    font-weight: 500;
    
}

/* BLOQUE TITULO + TAGS CLAVE */

.title_pclave{
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

/* TITULO PROYECTO */

.titulo_contenido{
    font-family: var(--font-family-serif);
    font-size: 4em;
    

}

/* APARTADO DE PALABRAS CLAVE */

.palabras-clave{
    line-height: 1.3em;
    font-size: 1em;

}


.bloque_textoproyecto{
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    line-height: 1.4em;
    font-size: 1em;
    
}

/* PASADORES NEXT AND PREVIOUS */
.pasadores{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 18px;
    

}

.pasadores a{
    color: var(--col-background);

}

.pasadores a:hover{
    color: var(--col-pink);
    transition: 1000ms;
}

/* CAROUSELES */
.carousel_marco{
    height: 600px;
    overflow: hidden;
}

.carousel1{
    display: flex;
    gap: 3em;
    width: max-content;
    
}

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

}


@keyframes scroll2 {
   0% {
     transform: translateX(0%);
   }
   100% {
     transform: translateX(calc(-50% - 1rem));
  }
}

.scroll2{
  animation: scroll2 12s linear infinite;
}