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

li {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}

a {
color: inherit;
text-decoration: none;
display: block;
}

p a {
display: inline;
}
img, picture, video, iframe, svg {
display: block;
width: 100%;
height: initial;
}
svg {
fill: currentColor;
}

:root {
font-size: 100%;
}
html {
height: 100%;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}

@font-face {
    font-family: SpaceGrotesk;
    src: url(SpaceGrotesk-VariableFont_wght.ttf);
}


/* Header  */
.Header {
    width: 100%;
    padding: 1rem 5rem;
    background-color: rgb(244, 243, 239);

    position: fixed;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    transition: top 0.5s;
    z-index: 2;
}
 .Header.hidden {
        top: -100px;
    }
.Header-div {
    max-width: 120px;
    transition: all .5s ease;
}
.Header-div:hover {
    transform: scale(1.2);
}
.Header-ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 3rem;

    font-family: SpaceGrotesk;
    font-size: x-large;
    font-weight: 500;
}
.Resume {
    background-color: black;
    padding: .5rem 1.5rem;
    color: rgb(255, 255, 255);
    border-radius: 2rem;
}
.Open {
    display: none;
    position: absolute;
    right: 50px;
    cursor: pointer;
    color: rgb(36, 36, 36);
    border: 0;
    background-color: transparent;
    font-size: 3rem;

}
.Close {
    display: none;
    border: 0;
    border: 0;
    background-color: transparent;
    font-size: 3rem;
    cursor: pointer;
}
.underline:hover{
    text-decoration: underline;
}

/* SNAP */
.Snap {
  scroll-snap-align: start; /* o center o end, según prefieras */
  height: 100vh;            /* cada sección ocupa toda la pantalla */
}

/* body */

/* intro */
.Main_about{
    width: 100%;
    font-family: SpaceGrotesk;

    scroll-snap-type: y mandatory; /* activa el ajuste vertical */
    height: auto;
    overflow: visible;
}
.Main_background{
    width: 100%;
    height: 100vh;
    background-image: url("../assets/about/wallpaper.webp");
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    justify-content: center;
    align-items: center;
}
.Main_intro-wrapper {
    width: 80%;
    
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: auto;
}
.Main_img--about{
    display: flex;
    justify-content: center;
    align-items: center;
}
.Main_img{
    max-width: 500px;
}
.Note{
    width: 400px;
}
.Main_container--about{   
    display: flex;
    align-items: center;
    justify-content: center; 
    position: relative;
}
.Main_container-text{
    position: absolute;
    max-width: 40%;
    bottom: 20%;
    right: 30%;
}
.Container_text{
    font-size: 30px;
    font-weight: 800;
    padding: 0 0 1rem 0;
    color: rgb(36, 36, 36);
}
.Main_h1--about{
    font-size: 24px;
    font-weight: 500;
    color: rgb(36, 36, 36);
}

/* about me */
.Know_wrapper {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.Know_text-container {
    grid-column: 2 span;
    display: flex;

    background-color: #e5dcc7;
}
.Know_section{
    width: 70%;
    color: rgb(36, 36, 36);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    margin:  4rem  auto;
    gap: 1rem;
}
.Know_h2{
    font-size: 32px;
    font-weight: 800;
    width: 100%;
}
.Know_p{
    width: 100%;
    font-size: 18px;
    font-weight: 300;
}
.Know_list{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    background-color: #EA0080;
}
.Know_ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 0 2rem ;
}
.Know_li{
    font-size: 30px;
    font-weight: 800;
    color: rgb(36, 36, 36);
}
.Know_li:hover{
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgb(36, 36, 36);
}


/* from you */
.fromYou_main{
    width: 100%;
    height: 100vh;
    background-color: rgb(36, 36, 36);

    display: flex;
    align-items: center;
    justify-content: center;
}
.fromYou_wrapper{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.fromYou_img{
   position: relative;
}
.fromYou_img_img{
    width: 20vw;
    max-width: 15rem;
    position: absolute;
    left: 0;
    bottom: 0;
    
}
.fromYou_text-wrapper{
    grid-column: 2 span;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: #e5dcc7;
    margin: 2rem auto;
}
.fromYou_h2{
    width: 100%;
    font-size: 32px;
    font-weight: 800;
    padding: 0 0 1rem 0;
}
.fromYou_p{
    
    font-size: 18px;
    font-weight: 300;
}


/* SKILLS */
.Skill_wrapper{
    background-color: #e5dcc7;
    width: 100%;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
}
.Skill-grid{
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow: hidden;
}
.Skill_text{
    background-color: #EA0080;
    height: 100vh;
    color: #e5dcc7; 
    grid-column: 2 span;
   
    margin: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
.Skill_section{
    width: 80%;
    margin: auto;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;

}

/*  /* skills/acordion */
.Skill_accordion-wrapper{
    margin: auto;

    width: 90%;
    min-height: 700px;
    color: #EA0080;
    grid-column: 3 span;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
}
.Accordion{width: 90%;
margin: auto;}
.Accordion-wrapper{
    width: 100%;
    
}
.Accordion-article{
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.Accordion_h2-container{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 0 .8rem;
}
.Accordion-h2{
    width: 100%;
    font-weight: 800;
    font-size: 32px;
}
.Accordion-plus{
    width: 100%;
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
}
.Accordion-plus.isOpen .span-vert {
  display: none;
}

.Accordion-plus.isOpen .span-horiz {
  height: 4px; /* keep the horizontal bar visible as the minus */
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.Span{
   position: absolute;
   background-color: #EA0080;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.span-horiz{
    width: 4px;
    height: 100%;
}
.span-vert{
    width: 100%;
    height: 4px;
    
}
.Accordion-skills{
    width: 100%;
    font-weight: 200;
    text-transform: lowercase;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: .3rem;

    max-height: 0;
    overflow: hidden;
    transition: all 1s ease;
    padding: 0;
    display: none;
    gap: 1rem;

}
.isVisible{
    max-height: 500px;
    padding: 1rem 0;
    display: block;
}
.Accordion-span{
    display: block;
    width: 102%;
    height: 3px;
    background-color: #EA0080;
    margin: 10px 0;
    
}
.Accordion-good{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2rem 0;

    font-weight: 600;
    
}



/* favorites */
.Favorites_main{
    width: 100%;
    height: 100vh;

    background-image: url(/assets/about/wallpaper.webp);
    background-repeat: no-repeat;
    background-size: cover;

    color: #e5dcc7;
}
.Favorites_container{
    width: 80%;
    margin: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
.Favorites-text{
    width: 100%;
    margin: 6rem 0 0 0;
    font-size: 52px;
    font-weight: 800;
}
.Favorites{
    width: 100%;
    height: 40rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
}
.Favorites-basket{
    width: 28rem;
    margin: auto;
    position: absolute;
}
.Favorite-items{
    width: 13rem;
    height: auto;

    position: absolute;

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    touch-action: none;  /* evita gestos internos */
  user-select: none;   /* evita selección de texto accidental */
  -webkit-user-drag: none; /* evitar que Safari arrastre imágenes nativamente */
}
    

.Favorite-items:hover{
    cursor: pointer;
}
.Favorite-items:active{
    cursor: grab;
}
.Favorite-items img{
    width: 100%;
    height: auto;
    max-width: 12rem;
}

.camera{
    top: 20%;
   left: 27%;
}
.headphones{
    top: 14%;
    left: 50%;
}
.keys{
    top: 40%;
    left: 25%;
}
.book{
    top: 42%;
    left: 40%;
}
.paint{
    top: 50%;
    left: 60%;
}
.img-descrip{
    display: none;
}



/* footer */

.Footer {
    width: 100%;
    max-height: 100vh;
    background-color: rgb(185, 182, 0);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    font-family: SpaceGrotesk;
    font-size: 24px;
    font-weight: 500;
    position: relative;
}
.Footer-container {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
.Footer-info {
    width: 80%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: relative;

   
}
.Info {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    padding: 0 0 30vh ;
    font-size: 120px;
    font-weight: 900;
    color: rgb(36, 36, 36);
   
}
.Talk {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    
}
.Copy {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 12px;
    font-weight: 500;
    color: rgb(36, 36, 36);
    margin-top: -20px;
    
}
.Footer-ul {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 64px 0;
}
.gif-cookie {
    max-width: 300px;
    height: auto;
    display: block;

    position: absolute;
    left: 0;
    bottom: 30%;
}
.gif-doodle {
    max-width: 200px;
    height: auto;
    display: block;

    position: absolute;
    right: 20px;
    top: -10vh;
    opacity: 70%;
}
.Footer-svg {
    display: none;
    transition: all .3s ease ;
}
.Footer-svg:hover {
    transform: scale(1.15);
    
}
.Footer-a {
    color: rgb(36, 36, 36);
}
.Footer-a:hover {
    color: rgb(36, 36, 36);
    text-decoration: underline;
}


.Footer-policy {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: flex-end;

    background-color: rgb(36, 36, 36);
    color: rgb(255, 255, 255);

    padding: 56px 32px 32px;
    position: absolute;
    bottom: 0;
    left: 0;
    
}
.Policy {
    font-family: SpaceGrotesk;
    color: rgb(255, 255, 255);
    font-size: 24px;
    font-weight: 300;
}
.Policy:hover {
    text-decoration: underline;
    color: rgb(255, 255, 255);
}


/* escritorio */
@media (min-width: 1026px) {
    .Header-burger {
        display: none;
    }
    .Intro-container{
        padding: 8rem 4rem 0 9rem;
    }
}
@media (min-width: 1350px){
    .Main_img--about{
        max-width: 1000px;
    }
    .Main_img{
        width: 700px;
    }
    .polaroid{
        max-width: 1200px;
    }
}
    

/* ipad */
@media (max-width: 1025px) {
    /* header */
    .Open {
        display: block;
    }
    .Nav {
        opacity: 0;
        visibility: hidden;

        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 3rem;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #EA0080;
        padding: 1rem 3rem 4rem 4rem;
        border-bottom-left-radius: 30px;
        box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.25);
    }
    .Header-ul {
        
        flex-direction: column;
        align-items: end;
    }
    .Close {
        display: block;
        transition: all .3s ease;
    }
    .Close:hover {
        color: rgb(208, 208, 208);
    }
    .Nav.visible {
        opacity: 1;
        visibility: visible;
    }
    .Header-li {
        color: rgb(208, 208, 208);
        transition: all .3s ease;
    }
    .Header-li:hover {
        color: rgb(36, 36, 36);
    }
    .Resume:hover {
        color: rgb(208, 208, 208);
        transform: scale(1.2);
    }
    .Resume:active {
        background-color: transparent;
    }  
    /* footer */
    .Footer-a {
    display: none;
   }
   .Footer-svg{
    display: inline-block;
    color: rgb(36, 36, 36);
    width: 35%;
   }
   .boton{
    background-color: rgb(36, 36, 36);
    color: rgb(185, 182, 0);
    padding: .2rem .7rem;
    border-radius: 2rem;
    transition: all .3s ease ;
   }
   .boton:hover {
    transform: scale(1.15);
   }
   .gif-cookie {
    max-width: 200px;
   }
   .gif-doodle {
    max-width: 150px;
    right: 0;
   }
   .Police-cookie {
    margin: 20px;
    padding-left: 20px;
    font-size: 2vh;
}


/* body */

/* intro */
.Main_intro-wrapper {
    margin:auto;

    height: 100vh;
    grid-template-columns: repeat(1, 1fr);
    place-items: center;
    
}
.Main_img {
    max-width: 350px;
}

.Container_text{
    font-size: 24px;
    padding: 0 0 1rem 0;
}
.Main_h1--about{
    font-size: 18px;
}
/* 1th secction */
.Know_wrapper{
    grid-template-columns: repeat(1, 1fr);
}
.Know_text-container{
   
    width: 100%;
}
.Know_h2{ font-size: 24px;}
.Know_p{ font-size: 16px;}
.Know_list{
    width: 100%;
    padding: 4rem;
}
.Know_li{
    font-size: 3vw;
}

/* 2th secction*/
.fromYou_h2{
    font-size: 24px ;
}
.fromYou_p{
    font-size: 16px;
}

/* favorites */
.Favorites-basket{
    width: 22rem;
}
.Favorite-items{
    max-width: 9rem;
}
.camera{
    top: 25%;
   left: 27%;
}
.headphones{
    top: 20%;
    left: 50%;
}

}






/* movil */
@media (max-width: 809px) {
    /* header */
    .Header{
        padding: 1rem 1.8rem;
    }
    /* footer */
    
   
    .Info {
        padding: 0 0 21vh;
        font-size: 88px;
    }
    .Talk {
        line-height: 0.8;
    }
    .Footer-svg{
        width: 50%;
   }
    .Copy {
        margin-top:0;
    }
    .gif-doodle{
        top: -25%;
    }



/* about */
    
    .Know_li{
    font-size:4vw;
    }
    .Main_img--about {
   width: 90%;
   
    }
    .Main_container--about{
   width: 90%;
    }

    /* 1th section */
    .Know_h2{ font-size: 20px;}
    .Know_p{ font-size: 12px;}
    .Know_list{ padding: 1rem;}
    .Know_li{font-size: 20px;}

    /* 2th secction*/
.fromYou_wrapper{
    grid-template-columns: repeat(1, 1fr);
}
.fromYou_h2{
    font-size: 20px ;
}
.fromYou_p{
    font-size: 12px;
}

/* skills */
.Skill_text{display: none;}
.Skill-grid{
    grid-template-columns: none;
    grid-template-rows: repeat(5, 1fr);
    height: 100vh;
    justify-items: center;
    align-items: center;
    margin: auto;
    
}
.Skill_text{
    grid-row: 2 span;
    width: 100%;
    height: 100%;
    grid-column: 1 span;
    margin: auto;
    

}

.Skill_accordion-wrapper{
    grid-row: 3 span;
    margin: auto;
    height: 400px;
    margin: 3rem 0 0 0;
    grid-column: 1 span;

    width: 90%;


}
.Accordion-h2{
    font-size: 24px;
}
.Accordion-skills{
    font-size: 14px;
}

/* favorites */
.camera{
    top: 25%;
   left: 10%;
}
.keys{
    top: 40%;
    left: 5%;
}
.book{
    top: 50%;
    left: 30%;
}
}