/* tipografías */
@import url(resets/reset_meyer.css);

/*Neue Haas Unica*/
@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(240, 237, 237);
   --col-pink: rgb(236, 100, 152);
   --col-pink-soft: rgb(241, 145, 188);

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

*{
    margin: 0px;
    padding: 0px;
    font-family: "Archivo";
    text-decoration: none;
    list-style: none;
}

/*Características del Cuerpo*/
body{
 background-color: var(--col-pink);
 transition: background-color 1s;

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

/* ESTILO DEL SCROLL */

body::-webkit-scrollbar {
    width: 10px;               /* 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;
    font-weight: 500;
    

}

.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); */
    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-white);
    transition: 500ms;
}

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

.extra-footer{
    display: flex;
    justify-content: space-between;
    color: var(--col-background);
    font-size: 24px;
    

}

.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;

}


/*___________El Main*___________*/

/*#contenedor_portada{
    background-color: var(--col-background);
    transition: background-color 1s;
}*/

.contenedor_intro{
    color: var(--col-white);
    align-items: center;
    margin-top: 8em;
    margin-left: 11em;
    margin-right: 9em;
    margin-bottom: 5em;


}

.claim_text{
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    font-family: var(--font-family-serif);
    margin-top: 1em;
    font-size: 10em;
    line-height: 1em;
    text-align: center;
}

.texto_intro{
    margin-top: 3em;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

}

.titulo_portada{
    font-family: var(--font-family-sans);
    font-weight: var(--font-w-normal);
    line-height: 1em;
    font-size: 1.7em;
    
}
/* Texto e intro de la galería*/
.this_type{
    font-family: var(--font-family-sans);
    font-weight: 500;
    font-size: 34px;
    text-align: center;
    color: var(--col-background);
}

/*_____CAROUSEL NOT X ANIMATION HOME_____*/
/*marco del carrousel*/
.home_marquee_container{
    height: 140px;
    display: flex;
    overflow: hidden;
    user-select: none;
    position: relative;
    font-family: var(--font-family-sans);
    font-size: 60px;
    color: var(--col-background);
    gap: 2em;
    
}

/*agrupaciones de texto dentro del container*/
.home_marquee_container ul{
    list-style: none;
    flex-shrink: 0;
    min-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2em;

    animation: scroll 20s linear infinite;

}

/*espaciado entre cada palabra*/
.home_marquee_container ul li{
    display: flex;
    gap: 2em;
}

/*ANIMACIÓN DE CAROUSEL*/
/*Que se mueva horizontalmente (ejeX) por el cálculo del contenido*/
/*menos el espaciado que hay entre agrupaciones de texto, en este caso 2em*/
@keyframes scroll{
    to{
        transform: translateX(calc(-100% - 2em));
    }
}
/*________gallería__________

/*____GRANDMA'S FAVORITES____*/

#gallery{
   /* background-color: var(--col-background);
    transition: background-color 1s;*/

    margin-top: 4em;
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-bottom: 4em;
    


}

/*Toda la galeria*/
.work-fav{
    align-items: center;
    padding-top: 4em;
    padding-bottom: 10em;
}

/* grid con fotos y colocación de la galería*/
/* altura de la página */
#gallery-grid{
    height: 95vh;
    gap: 0.6em;
    bottom: 15em;
}

/*frames de la foto con titulo subtitulo e imagen*/ 
.bloque-gallery {
    position: absolute;
    width: 210px;

    z-index: 1;

    
}

.gallery-image{
    object-fit: contain;
}


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

.gallery-title a{
    color: var(--col-white);
}

.gallery-title{
    display: none;
    
    /* position: absolute; */

    font-family: var(--font-family-serif);
    margin-top: 1em;
    font-size: 18px;
    
}

/* HOCER EN LA FOTO = APARECE TITULO */
.bloque-gallery:hover .gallery-title{
    display: block;
    
}

.bloque-gallery:hover{
    z-index: 2;
    
}


/* ID DE LOS BLOQUES DE CONTENIDO */
/* Aquí se especifica el área que ocupa cada imagen */

#b-1{
    top: 30%;
    left: 15%;
    background-size: cover;
}

#b-2{
    top: 50%;
    left: 20%;
    background-size: cover;

}

#b-3{
    top: 60%;
    left: 60%;
    background-size: cover;
}

#b-4{
    top: 80%;
    left: 70%;
    background-size: cover;
}

#b-5{
    top: 95%;
    left: 55%;
    background-size: cover;
}

#b-6{
    top: 70%;
    left: 35%;
    background-size: cover;
    
}

#b-7{
    top: 65%;
    left: 10%;
    background-size: cover;
    
}

#b-8{
    top: 40%;
    left: 45%;
    background-size: cover;
    
}



/*______ ABOUT______*/

.contenedor_about{

    /* max-height: 800px; */
    font-size: 20px;
    margin: 1.4em;

    margin-bottom: 8em;
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 0.5em;
    margin-right: 4em;
    color: var(--col-background);

    
    

}

.titulo_about{
    font-family: var(--font-family-serif);
    display: flex;
    flex-direction: column;
    font-size: 4em;
}

.parrafos{
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-sans);
    line-height: 1.2em;
    font-size: 40px;
    gap: 0.2em;
    
}

.parrafos span{
    text-decoration: underline 2px;

}
 

/* DRAG AND DROP */
/* GRUPO DE STICKERS */
.stickers-grupo{
    z-index: 25;
    position: absolute;
}

/* FOTO DE PERFIL*/
.img-yo{
    max-width: 300px;
    transform: rotate(-1.5deg);
    top: 300px; /* Posición inicial */
    left: 600px; /* Posición inicial */
}

/* PEGATINA ABUELA */
.pin-abuela{
    max-width: 180px;
    transform: rotate(8deg);
    top: 100px; /* Posición inicial */
    left: 1000px; /* Posición inicial */
}

/* Estilo para elementos arrastrables */
.draggable {
    cursor: grab;
    position: absolute;
}


/* APARTADO CV */

.curriculum_nota{
    display: flex;
    flex-direction: row;
    margin-top: 0.6em;
    line-height: 1.2em;
    font-size: 36px;
    gap: 1em;

}

.insta a{
    font-family: var(--font-family-sans);
    color: var(--col-background);

}

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

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

.imagen_cv a:hover{
    color: var(--col-white);
    transition: 500ms;

}