*{
    margin:0;
    padding:0;
    font-family:'Revalia',sans-serif;
    box-sizing: border-box;
    color:var(--secondary-color);
}

:root {
    --section-padding: 3rem 3rem ;
    /* --section-padding-x2: 3rem 18rem ; */
    --section-padding-x2: 3rem 4rem ;
    --section-padding-x3: 6rem 17rem ; 
    --primary-color:#fff;
    --secondary-color:#2d2d2d;
    --third-color:#2d2d2d;
    --primary-title-font:"Passion One", sans-serif;
  }

  h1,h2,h3,h4,h5{
    color:var(--primary-color);
    text-align: center;
    margin-bottom: 2rem;
 }

 .content p{
    font-size: 15px;
}


.container{
    width: 100%;
    margin: 0 auto;
    /* max-width: 1550px; */
    overflow: hidden;
}
/*--------------------------------------------------------------------------------------- NAV SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- NAV SECTION-------------------------------------------------------------------------*/

.nav{
    --state-close: scale(0); /* por defecto no se va a mostrar*/
    --state-hamburguer: scale(1); /* por defecto  se va a mostrar*/
    --state-menu: translate(-100%);

    padding: 30px 0;
    display:grid;
    /* grid-template-columns: minmax(130px,150px) 1fr; */
    justify-content: space-between;
    align-items: center;
    grid-template-columns: repeat(2, max-content);
}

/* cuando la etiqueta nav este siendo apuntada,  por eso en el a del hamburguer se referencio a #nav*/
/*provoca que cambien las propiedades de los icono mostrando uno y ocultando otro*/
.nav:target{
    --state-menu: translate(0);
    --state-close: scale(1);
    --state-hamburguer: scale(0);
}

.nav .logo{
    width: 100%;
    z-index: 101;
}

.nav .logo img{
    z-index:1;
    width:110px;
    height:100%;
    object-fit: cover;
    /* width:130px;
    height: 60px;  */
    margin-left: 1rem;
    cursor: pointer;
}

/* ventaja de css grid */
.nav .nav_hamburguer,
.nav_close{
    /* background-color:#2d2d2d; */
    cursor:pointer;
    /* para posicionar los dos iconos dentro de la misma celdaa osea uno encima del otro */
    grid-column: -2/-1;/* que se posiciones desde la penúltima linea hasta la última  */
    grid-row: 1/2;
    transition: .4s transform;
}

.nav .nav_hamburguer{
    transform: var(--state-hamburguer);
    z-index: 101;
}

 /* no se muestra por defecto */
.nav .nav_close{
    transform: var(--state-close);
    z-index: 101;
}

.nav .nav_links{
    background-color: var(--primary-color);
    position:absolute;
    top:0;
    bottom: 0;
    left:0;
    right:0;
    padding: 0;

    display: grid;
    align-content: center;
    gap: 2em;
    padding-left: 12%;

    transform:var(--state-menu);
    transition: .3s transform;
    /* display:none; */
    z-index: 100;
}

.nav_item{
    list-style:none;

}

.nav_item a:hover{
    color:var(--primary-color);
}

.nav_link{
    color:var(--text-main-color);
    text-decoration: none;
    font-size: 1.2rem;
    letter-spacing: 2px;
}
.nav_icon{
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin-right: 10px;
}

.nav .nav_links .inicio img{
    display: none;
}

/* efecto */
/* .shadow-drop-center{ 
    animation:shadow-drop-center 0.4s linear both;
} @keyframes shadow-drop-center{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:0 0 20px 0 rgba(255,255,255,.55)}} */

/*--------------------------------------------------------------------------------------- BANNER SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- BANNER SECTION-------------------------------------------------------------------------*/
.banner{
    position:relative;
    /* width:100%; */
    height: 100vh;
    /* background-image:linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.7)),url(img/studio\ de\ tatuaje.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 636px; */
    /* padding: 10px 8%; */
    color:var( --primary-color);
}
.banner video{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
}

.banner .capa{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: #1c1c1d;
    opacity: 0.5;
    mix-blend-mode: overlay; /*oscurece o alclara dependiendo del color del fondo o vdideo*/
}

/*--------------------------------------------------------------------------------------- CONTENT SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- CONTENT SECTION-------------------------------------------------------------------------*/

.banner{
    display:grid;
    gap:1rem;
    align-items: center;
    padding: 5rem;
    text-align: center;
    padding:var(--section-padding);
    /* text-wrap: balance; */
    /* margin-top:5.1rem; */
    /* margin-top:-30px; */

}
.banner .content{
    position: relative;
    z-index: 2;
    margin-top: 5rem;
}
/* 
.banner .content p{
    color:var(--primary-color);
    margin-bottom: 2rem;
} */

.banner h1{
    /* font-size: 25px; */
    font-weight: 900;
    margin-bottom: 1rem;
}

.banner h2{
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 2rem;
}


.banner a{
    /* width:80%; */
    max-width: 300px;
    padding: 0.5rem 2rem;
    border:0;
    text-decoration: none;
    /* outline: 0; */
    border-radius: 2rem;
    background:var(--primary-color);
    /* background:var(--text-main-color); */
    
    color:var(--secondary-color);
    font-weight:900;
    cursor: pointer;
    /* margin: 2rem auto; */
}


.press{
    /* box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset; */
}
.contenedor .intro a:hover{
    background: #60289b;
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    color:var(--secondary-color);
}

.main-content{
    overflow: hidden;
}
/*--------------------------------------------------------------------------------------- ABOUT ME SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- ABOUT ME SECTION-------------------------------------------------------------------------*/

.about{
    width:100%;
    background: var(--primary-color);
    color:#fff;
    text-align: center;
    /* padding: 4rem 2rem;  */
    /* padding-top: 2rem; */
    padding:var(--section-padding);
}

.about h2{
    /* font-size: 35px; */
    color:var(--secondary-color);
}

.about .artist img{
    width:100%;
    height: 450px;
    /* object-fit: cover; */
    border-radius: 10px;
    margin-bottom: 2rem;
}
.about .artist video{
    width:100%;
    height: 450px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 2rem;
}


/*--------------------------------------------------------------------------------------- PROYECTOS SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- PROYECTOS SECTION-------------------------------------------------------------------------*/
.gallery{
    padding:var(--section-padding);
}
.main-content .gallery h2{
    color:var(--secondary-color);
    margin-bottom: 2rem;
}
.main-content .gallery h5{
    color:var(--secondary-color);
}

.main-content .gallery{
    margin-bottom: 10rem;
}
.main-content .gallery .trap{
    display:grid;
    gap:1rem;
    grid-auto-rows: 25rem;
    grid-template-columns: repeat(auto-fit, minmax(287px, 1fr));

}

.main-content .gallery .trap .img{
    width: 100%;
    overflow: hidden;
    border-radius: 1.5rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 
    color:#fff;
    filter: grayscale(0%);
    transition:0.5s ease-in;
}

.main-content .gallery .trap .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


 .main-content .gallery .ver-mas{
    width:190px;
    text-align: center;
    background: var(--secondary-color);
    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
    padding: 0.5rem;
    border-radius: 15px;
    margin: 2rem auto;
 }
 .main-content .gallery .ver-mas a{
    text-decoration: none;
    color:var(--primary-color);
    font-weight:bold;
 }

 .main-content .gallery .ver-mas:hover{

    background: var(--primary-color);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color:var(--secondary-color);
    cursor:pointer;
    
 }
 .main-content .gallery .ver-mas a:hover{
    color:var(--secondary-color);
    
 }

 .main-content .gallery .ver-mas a i{
    color:var(--primary-color);
    font-size: 16px;
    padding-right: 8px;
 }


 /* otra galeria oculta*/
 /* Estilos para la galería de imágenes */
 .ventana {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
  }
  
  /* Estilos para la galería de imágenes */
  .galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
    padding: 10px;
  }
  
  .galeria img {
    width: 100%;
   /* height: auto;*/
    height: 300px;
    max-height: 300px;
    border-radius: 10px;
  }

  /* Estilos para la galería de imágenes */
.galeria {
    display: grid;
    gap:1rem;
    grid-auto-rows: 25rem;
    grid-template-columns: repeat(auto-fit, minmax(287px, 1fr));
  }
  
  .galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Estilos para el botón de cerrar ventana emergente */
  #cerrarVentana {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 28px;
    font-weight: bold;
    padding: 10px;
    color: #fff;
    background-color: transparent;
    border: none;
  }


  /*--------------------------------------------------------------------------------------- ABOUT ME SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- ABOUT ME SECTION-------------------------------------------------------------------------*/

.curse{
    width:100%;
    display: grid;
    /* background: var(--secondary-color); */
    /* color:#fff; */
    /* text-align: center; */
    /* padding: 4rem 2rem;  */
    /* padding-top: 2rem; */
    padding:var(--section-padding);
}

.curse h2,h3{
    color:var(--secondary-color);
}
.curse .artist{
    /* display: flex;
    flex-direction: column;
    gap:2rem; */
}

.curse .artist p{
    text-wrap:balance;
    color:#fff;
}

.curse .artist img{
    width:100%;
    height: 450px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.curse .artist img{
    width:100%;
    height: 450px;
    /* object-fit: cover; */
    border-radius: 10px;
    margin-bottom: 2rem;
}
.curse .artist .content video{
    width:100%;
    height: 450px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.curse  a{
    max-width: 175px;
    margin:0 auto;
    padding: 0.5rem 2rem;
    border:0;
    border-radius: 2rem;
    background:var(--secondary-color);
    text-decoration: none;
    
    color:var(--primary-color);
    font-weight:900;
    /*margin-top:5rem;*/
    cursor: pointer;
}
/*--------------------------------------------------------------------------------------- CONTACT SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- CONTACT SECTION-------------------------------------------------------------------------*/

footer .contact{
    height:664px;
    /* background-image:linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.7)),url(img/contactar.jpg); */
    background-image:linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.7)),url(../img/contactar.jpg);
    background-size: cover;
    /* background:var(--third-color); */
    color:var(--text-main-color);
    padding:var(--section-padding);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

footer .contact h2{
    margin-bottom: 2rem;
}
footer .contact h5{
    margin-bottom: -0.5rem;
}
footer .contact p{
    color:var(--primary-color);
    margin-bottom: 10px;
}
footer .contact p strong{
    color:var(--secondary-color);
}
footer .contact .content{
    /* justify-content: center; */
    gap:1.5rem;
    margin: 0 auto;
    /* padding: 2rem 2rem; */
    border-radius: 5px;
    
    /* margin-bottom: 2rem; */

}
footer .contact .content .contact-resume{
    margin-bottom: 2rem;
}

footer .contact .content .contact-form form  input[type="text"],
footer .contact .content .contact-form form  input[type="email"],
footer .contact .content .contact-form form  textarea{
    width: 100%;
    margin: 5px 0;
    padding: 15px 20px;
    /* background: none; */
    border-radius: 5px;
    color:#08311c;
    border: 2px solid rgba(204, 204, 204, 0.383);
    font-family: 'lato';
    font-weight: 300;
}

footer .contact .content .contact-form form input[type="submit"]:hover{
    background: var(--primary-color);
    border-radius: 0.5rem;
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    color:var(--secondary-color);
}

footer .contact .content .contact-form .derecha input{
    /* width: 100%; */
    padding: 1rem;
    justify-content: center;
    background-color: var(--secondary-color);
    /* box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset; */
    color:var(--primary-color);
    border-radius: 10px;
    font-size: 15px;
    font-weight:900;
    cursor: pointer;
 }
footer .social_media{
    padding: 2rem 3rem;
    text-align: center;
}

footer .social_media .content h3{
    margin-bottom: 0.5rem;
    /* text-align:initial; */
    color:var(--secondary-color)
}

footer .social_media .brand{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
    margin-top: 1rem;
}

footer .social_media .brand i{
    font-size: 40px;
}

@media (min-width:1000px){

    .nav{
        --state-hamburguer: scale(0); 
        --state-menu: translate(0);

        z-index: 1000;
        background:var(--primary-color);
        width: 100%;
        position:fixed;
        justify-content: center;
        /* height: 85px; */
        height: 115px; 
        top:0;
        left:0;
        padding: 0;

    }
    
    .nav:target{
        --state-hamburguer: scale(0);
    }

    .nav .logo{
        display: none;
    }
    .nav .logo img{
        margin-left: 2rem;
        width:120px;
        /* width:150px;
        height: 50px; */
        transform: translate(-12%);
    }

    .nav .nav_links{
        /* margin-right: 4rem; */
        margin-top: 1rem;
        padding: 0;
        background-color: unset;
        position:unset;
        gap: 0.5em;
        grid-auto-flow: column;
    
        transform:unset;
        
        grid-column: -2/-1;
        grid-row: 1/2;

    }

    .nav .nav_link{
        font-size: 0.7rem;
        letter-spacing: none;
    }

    .nav_item{
        list-style:none;
        padding: 1rem 1rem;
    }
    .nav_item a{
        font-weight: bold;
        color:var(--secondary-color);
    }

    .nav_item:hover{
        text-decoration: underline;
        /* border-radius: 0.5rem; */
        /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
        /* color:var(--secondary-color); */
    }
    .nav_item a:hover{
        color:var(--secondary-color);
    }

    .nav .nav_links .inicio{
        display: flex;
        flex-direction: column;
        text-align: center;
        margin-top: -1.5rem;
    }

    .nav .nav_links .inicio img{
       display: block;
        width: 95px;
        height: 70px;
    }
    
    
/*--------------------------------------------------------------------------------------- BANNER SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- BANNER SECTION-------------------------------------------------------------------------*/
    .banner{
        padding:var(--section-padding-x2);
    }

    .banner h1{
        font-size: 50px;
    }

    .banner h2{
        font-size: 32px;
    }
    
/*--------------------------------------------------------------------------------------- ABOUT ME SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- ABOUT ME SECTION-------------------------------------------------------------------------*/

.about{
    /* width:100%; */
    background: var(--primary-color);
    color:#fff;
    text-align: center;
    /* padding: 4rem 2rem;  */
    /* padding-top: 2rem; */
    padding:var(--section-padding-x2);
}

.about h2{
    /* font-size: 35px; */
    color:var(--secondary-color);
}

.about .artist{
    display: grid;
    gap:1rem;
    /* grid-auto-rows: 21rem; */
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    align-items: center;
    justify-content: center;
}

.about .artist .content {
}


/*--------------------------------------------------------------------------------------- CURSE ME SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- CURSE ME SECTION-------------------------------------------------------------------------*/

.curse{
    /* width:100%; */
    /* text-align: center; */
    /* padding: 4rem 2rem;  */
    /* padding-top: 2rem; */
    padding:var(--section-padding-x2);
}

.curse .artist{
    display: grid;
    grid-template-columns: 500px 1fr;
    grid-row: 200px;
    gap:2rem;
    /* display: grid;
    gap:1rem; */
    /* grid-auto-rows: 21rem; */
    /* grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    align-items: center;
    justify-content: center; */
}

.curse .artist .content h3 {
    text-align: unset;
}

/*--------------------------------------------------------------------------------------- GALLERY SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- GALLERY SECTION-------------------------------------------------------------------------*/
.gallery{
    padding:var(--section-padding-x2);
}

.main-content .gallery .trap .img img{
    /* width: 100%; */
    /* object-fit: cover; */
 }

  /*--------------------------------------------------------------------------------------- ABOUT ME SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- ABOUT ME SECTION-------------------------------------------------------------------------*/

.curse{
    padding:var(--section-padding-x2);
}

.curse .artist img{
    width:100%;
    height: 450px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 2rem;
}


/*--------------------------------------------------------------------------------------- CONTACT SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- CONTACT SECTION-------------------------------------------------------------------------*/

footer .contact{
    padding:var(--section-padding-x2);
    /* display: flex; 
    flex-direction: column; */
}

footer .contact .content .contact-form form{
    display: grid;
    grid-template-columns: repeat(2,minmax(350px,1fr));
    grid-template-areas: 'name email'
                         'message message' 
                         'send send';
    /* grid-template-columns: minmax(400px,1fr) 1fr; */
    gap:0.5rem;
}

footer .contact .content .contact-form form input:first-child{
    grid-area: name;
}

footer .contact .content .contact-form form input:nth-child(2){
    grid-area: email;
}

footer .contact .content .contact-form form textarea:nth-child(3){
    grid-area: message;
}

footer .social_media{
    padding:var(--section-padding-x3);
    display: flex;
    flex-direction:row; 
    justify-content:space-between;
    gap:10px;
    margin-top: 1rem;
}

}










@media (min-width:1440px){

    /*--------------------------------------------------------------------------------------- BANNER SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- BANNER SECTION-------------------------------------------------------------------------*/
    .banner{
        padding:var(--section-padding-x3);
    }
    /*--------------------------------------------------------------------------------------- ABOUT ME SECTION-------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------------- ABOUT ME SECTION-------------------------------------------------------------------------*/
    
    .about{
        /* width:100%; */
        background: var(--primary-color);
        color:#fff;
        text-align: center;
        /* padding: 4rem 2rem;  */
        /* padding-top: 2rem; */
        padding:var(--section-padding-x3);
    }
    
    .about h2{
        /* font-size: 35px; */
        color:var(--secondary-color);
    }
    
    .about .artist{
        display: grid;
        gap:1rem;
        /* grid-auto-rows: 21rem; */
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    }
    
    /*--------------------------------------------------------------------------------------- GALLERY SECTION-------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------------- GALLERY SECTION-------------------------------------------------------------------------*/
    .gallery{
        padding:var(--section-padding-x3);
    }
    
    .main-content .gallery .trap .img img{
        /* width: 100%; */
        /* object-fit: cover; */
     }


    /*--------------------------------------------------------------------------------------- ABOUT ME SECTION-------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------------- ABOUT ME SECTION-------------------------------------------------------------------------*/

    .curse{
        padding:var(--section-padding-x3);
    }

    .curse .artist img{
        width:482px;
        height: 505px;
        object-fit: cover;
        border-radius: 10px;
        margin-bottom: 2rem;
    }
    .curse .artist p{
        width:560px;
    }
     /*--------------------------------------------------------------------------------------- CONTACT SECTION-------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------------- CONTACT SECTION-------------------------------------------------------------------------*/

    footer .contact{
        padding:var(--section-padding-x3);
        /* display: flex; 
        flex-direction: column; */
    }
    
    }