:root {

    --bg-nav: #E2E2E2;

    --dorado: #bba252;

    --KoonectBold: 'KonnectThinSemi';

    --konnect: 'KonnectThin';

    --KonnectLight: 'KonnectLight';

    --sientas: 'sientas';

}

* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

body {

    overflow-x: hidden;

}



@font-face {

    font-family: 'KonnectThin';

    src: url(../font/KonnectThin.otf);

}

@font-face {

    font-family: 'KonnectThinSemi';

    src: url(../font/KonnectSemiBold.otf);

}

@font-face {

    font-family: 'KonnectLight';

    src: url(../font/KonnectLight.otf);

}

@font-face {

    font-family: 'sientas';

    src: url(../font/Sienthas.otf);

}

header {
    background-color: #E2E2E2;

    height: 50vh;

}

@media (max-width: 1600px) {

    header {

        height: 70vh;

    }

}

@media (max-width: 600px) {

    header {

        height: 60vh;

    }

}


.bg-nav-obras {

    background-color: var(--bg-nav);

}

.lineaMedia {

    height: 100%;

    width: 3px;

    background-color: var(--dorado);

    position: fixed;

    right: 50%;

    z-index: -1;

}

.headertop__boton {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: end;

    justify-content: center;

    flex-direction: column;

    gap: 7px;

    background-color: transparent;

    border: none;

    transition: all 250ms ease;

    -webkit-transition: all 250ms ease;

    -moz-transition: all 250ms ease;

    -ms-transition: all 250ms ease;

    -o-transition: all 250ms ease;

}



.headertop__boton div {

    height: 3px;

    background-color: black;

    transition: all 250ms;

    -webkit-transition: all 250ms;

    -moz-transition: all 250ms;

    -ms-transition: all 250ms;

    -o-transition: all 250ms;

}



.headertop__boton div:nth-child(1) {

    width: 75%;

}



.headertop__boton div:nth-child(2) {

    width: 99%;

}



.headertop__boton div:nth-child(3) {

    width: 50%;

}



.headertop__boton:hover div {

    opacity: 1;

    width: 100%;

}



.headertop__boton:active {

    scale: 1.1;

}



/* NOTE - ESTILOS DEL NAVBAR BOOTSTRAP */



.navbar-toggler:focus {

    box-shadow: none !important;

}



.logo-nav {

    height: 100px;

    width: 100px;

    z-index: 1000;


}

@media (max-width: 600px) {

    .logo-nav {

        height: 50px;

        width: 50px;


    }
}

.logo-nav img {

    height: 100%;

    width: 100%;

    object-fit: cover;

}

.animation-container {
    width: 100%;
}

.animation-container span {
    position: absolute;
    color: #d0d0d0;
    font-weight: bold;
    display: block;
    font-size: 18px;
    text-shadow: 0 0 1px white;
    user-select: none;
    pointer-events: none;
    cursor: default;
    z-index: 1;
    opacity: 0;
    will-change: transform, opacity;
    animation-timing-function: ease-out;
    animation-name: move;
}

@keyframes move {
    0% {
        opacity: 1;
        transform: translateY(100vh);
        -webkit-transform: translateY(100vh);
        -moz-transform: translateY(100vh);
        -ms-transform: translateY(100vh);
        -o-transform: translateY(100vh);
    }

    25% {
        opacity: 0.3;
        transform: translateY(0);
    }

    50% {
        opacity: 0.5;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform: translateY(-100vh);
        -webkit-transform: translateY(-100vh);
        -moz-transform: translateY(-100vh);
        -ms-transform: translateY(-100vh);
        -o-transform: translateY(-100vh);
    }
}


.offcanvas-header, .offcanvas-body {
    z-index: 100;
}

.offcanvas.hiding, .offcanvas.show, .offcanvas.showing {
    /* background-color: rgb(211, 209, 209); */
    background-color: white;

    width: 100%;

    height: 100vh;


}



.nav-link {

    font-family: var(--KoonectBold);

    font-size: 40px;

    text-transform: uppercase;

    color: black;


}

.nav-link:hover {
    opacity: .8 !important;

}

@media (max-width: 1400px) {

    .offcanvas-body {

        top: 30%;

        left: 20%;

    }



    .nav-link {

        font-size: 30px;

    }

}


.header {

    margin-top: -5%;

    width: 100%;

    height: auto;

    position: relative;


}

.header-titulo h1 {
    font-size: 5rem;

    font-family: var(--KonnectLight);

    color: black;

    margin-bottom: 0;
}

.header-titulo h2 {

    font-size: 5rem;

    font-family: var(--KoonectBold);

    color: black;

    margin-bottom: 0;
}

@media (max-width: 600px) {

    .header-titulo h1,
    .header-titulo h2 {
        font-size: 3rem;
    }
}

.header-titulo h1 span, .header-titulo h2 span {
    display: inline-block;
    animation: slideLeft 1.5s forwards;
    opacity: 0;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}


@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(200px);
    }

    to {
        opacity: 1;
        transform: translateX(0%);
    }
}




/* NOTE - ESTILO NAVBAR ARTISTA */
.navbar-titulo-artista {
    font-size: 5rem;

    font-family: var(--KonnectLight);

    color: black;

    margin-bottom: 0;

    width: 25%;
}

@media (max-width: 1680px) {
    .navbar-titulo-artista {
        width: 40%;
    }
}

@media (max-width: 998px) {
    .navbar-titulo-artista {
        width: 50%;
    }
}

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


.navbar-titulo-artista span {
    border-right: .05em solid;
    animation: caret 1s steps(1) infinite;
}


@keyframes caret {
    50% {
        border-color: transparent;
    }
}



/* NOTE - ESTILO NAVBAR GALERIA */

.name {
    display: flex;
    margin: auto;
    position: relative;

}

.name .letter {
    display: inline-block;
    opacity: 0;
    transform: scale(0.9);
    color: #7d7f7d;
    text-transform: uppercase;
    font-family: var(--KoonectBold);
    font-size: 5rem;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
}

@media (max-width: 600px) {
    .name .letter {
        font-size: 3rem;
    }
}


/* .header-titulo h1 {

    font-size: 5rem;

    font-family: var(--KonnectLight);

    color: black
}



.header {

    margin-top: -7%;

    width: 100%;

    height: auto;

    position: relative;

}



@media (max-width: 600px) {

    .header-titulo h1 {

        font-size: 3rem;

    }



}
 */







/* !SECTION - HEADER */





/* SECTION - MAIN */

.img-banner img {

    width: 100%;

    object-fit: cover;

}



.colecciones-main {

    padding: 2rem 0;

    background-color: var(--bg-nav);

}



.nombre-coleccion {

    font-size: 16px;

    font-family: var(--KoonectBold);

    text-transform: uppercase;

    letter-spacing: 5px;

    color: var(--dorado);

}

.titulo-coleccion h2 {

    font-family: var(--sientas);

    color: rgba(169, 169, 169, 0.527);

    font-size: 8rem;

    margin-bottom: 0;

}



.img-coleccion-portada {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all 5s ease;

    -webkit-transition: all 5s ease;

    -moz-transition: all 5s ease;

    -ms-transition: all 5s ease;

    -o-transition: all 5s ease;

}



.card-coleccion {

    overflow: hidden;

}

.card-coleccion:hover .img-coleccion-portada {

    transform: scale(2);

    -webkit-transform: scale(2);

    -moz-transform: scale(2);

    -ms-transform: scale(2);

    -o-transform: scale(2);

    transition: all 30s ease-out;

    -webkit-transition: all 30s ease-out;

    -moz-transition: all 30s ease-out;

    -ms-transition: all 30s ease-out;

    -o-transition: all 30s ease-out;

}



.año-coleccion {

    font-family: var(--KoonectBold);

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

}





.ver-mas {

    border: 2px solid var(--dorado);

    text-decoration: none;

    color: var(--dorado);

    padding: .5rem 4rem;

    cursor: pointer;

    box-shadow: inset 0 0 0 0 var(--dorado);

    transition: ease-out 1s;

    -webkit-transition: ease-out 1s;

    -moz-transition: ease-out 1s;

    -ms-transition: ease-out 1s;

    -o-transition: ease-out 1s;

}

.ver-mas:hover {

    box-shadow: inset 400px 50px 0 0 var(--dorado);

    color: white;



}



/* !SECTION - MAIN */





/* SECTION - FOOTER */

footer {

    background-color: var(--bg-nav);

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}

.img-footer {

    width: 100px;

    object-fit: cover;

}



.img-footer:hover {

    opacity: .8;

}



.menu-footer {

    gap: 5%;

}



@media (max-width: 500px) {

    .menu-footer {

        gap: 2%;

    }

}



.menu-footer a {

    color: black;

    font-size: 14px;

    text-transform: uppercase;

    font-family: var(--KonnectLight);

    letter-spacing: 5px;

}



@media (max-width: 991.98px) {

    .menu-footer a {

        letter-spacing: 3px;

    }

}

.menu-footer a:hover {

    color: var(--dorado);

}



.footer-redes i {

    color: black;

    font-size: 30px;

}

.copy {

    width: 100%;

    text-align: center;

    background-color: #515151;

    padding: 1rem 0;

    color: white;

    font-size: 14px;

    font-family: var(--KonnectLight);

}







.redes-sociales {

    display: flex;

    flex-direction: row;

    justify-content: center;

}

.redes-sociales li {

    list-style: none;

}

.redes-sociales li a {

    position: relative;

    display: block;

    width: 40px;

    height: 40px;

    color: var(--dorado);

    text-align: center;

    margin: 0 10px;

    box-shadow: 0 0 0 2px var(--dorado);

    overflow: hidden;

    border-radius: 50%;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -ms-border-radius: 50%;

    -o-border-radius: 50%;

}

.redes-sociales li a i.fa-brands {

    position: relative;

    font-size: 16px;

    width: 100%;

    height: 100%;

    line-height: 40px;

    transition: 0.5s;

    -webkit-transition: 0.5s;

    -moz-transition: 0.5s;

    -ms-transition: 0.5s;

    -o-transition: 0.5s;

}

.redes-sociales li a:hover i.fa-brands {

    transform: translateY(-100%);

    color: var(--bg-nav);



    -webkit-transform: translateY(-100%);

    -moz-transform: translateY(-100%);

    -ms-transform: translateY(-100%);

    -o-transform: translateY(-100%);

}

.redes-sociales li a:before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: var(--dorado);

    transform-origin: top;

    transform: scaleY(0);

    transition: transform 0.5s;

    -webkit-transition: transform 0.5s;

    -moz-transition: transform 0.5s;

    -ms-transition: transform 0.5s;

    -o-transition: transform 0.5s;

    -webkit-transform: scaleY(0);

    -moz-transform: scaleY(0);

    -ms-transform: scaleY(0);

    -o-transform: scaleY(0);

}

.redes-sociales li a:hover:before {

    transform: scaleY(1);

}

/* !SECTION - FOOTER */





/* -------------------------------------------------------------------------- */

/*                                 EL ARTISTA                                 */

/* -------------------------------------------------------------------------- */





.biografia {

    margin-bottom: 5rem;

    position: relative;

    margin-top: -5%;

    border-radius: 10px;

    background: linear-gradient(45deg, #cacaca, #f0f0f0);

    box-shadow: 20px -20px 60px #bebebe, -20px 20px 60px #ffffff;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    -ms-border-radius: 10px;

    -o-border-radius: 10px;

}

/* @media (max-width: 1400px){

    .biografia{

        margin-top: inherit;

    }

} */

.titulo-historia {

    font-family: var(--KoonectBold);

    font-size: 60px;

    text-transform: uppercase;

    letter-spacing: 10px;

}

@media (max-width: 1000px) {

    .titulo-historia {

        font-size: 50px;

        letter-spacing: 5px;
    }
}

.img-artista {

    width: 100%;

    object-fit: contain;

    border-radius: 10px 0 0 10px;

    background: linear-gradient(45deg, #cacaca, #f0f0f0);

    box-shadow: 20px -20px 60px #bebebe, -20px 20px 60px #ffffff;

    -webkit-border-radius: 10px 0 0 10px;

    -moz-border-radius: 10px 0 0 10px;

    -ms-border-radius: 10px 0 0 10px;

    -o-border-radius: 10px 0 0 10px;

}



.historia p {

    font-family: var(--KonnectLight);

    font-size: 16px;

    text-align: center;

}



.linea {

    width: 100%;

    height: 3px;

    background-color: var(--dorado);

}

.dibujo-dos {

    margin-top: 5rem;

    margin-bottom: 5rem;

}



.dibujo-artista {

    margin-bottom: 8rem;

    text-align: center;

    width: 100%;

    object-fit: cover;

    border-radius: 2%;

    -webkit-border-radius: 2%;

    -moz-border-radius: 2%;

    -ms-border-radius: 2%;

    -o-border-radius: 2%;

}

.dibujo-dos h2 {

    font-family: var(--KoonectBold);

    text-transform: uppercase;

    font-size: 60px;

    letter-spacing: 10px;

    color: black;

}

@media (max-width: 1240px) {

    .dibujo-dos h2 {

        letter-spacing: 5px;

        font-size: 50px;

    }

}

.dibujo-dos p {

    font-family: var(--KonnectLight);

    font-size: 24px;

    text-align: center;

}

@media (max-width: 991.98px) {

    .dibujo-dos h2 {

        letter-spacing: 1px;

        font-size: 40px;

    }

    .dibujo-dos p {

        font-size: 16px;

    }

}



.modulo-tres-artista {

    margin-bottom: 5rem;

}

.img-3 {

    width: 100%;

    object-fit: cover;

}





/* -------------------------------------------------------------------------- */

/*                                   GALERIA                                  */

/* -------------------------------------------------------------------------- */



.banner-galeria {

    margin-top: -7%;

    margin-bottom: 5rem;

}

.banner-galeria img {

    width: 100%;

    object-fit: cover;

}



.titulo-obras {

    font-family: var(--sientas);

    font-weight: bold;

    font-size: 6rem;

    color: #A9A9A9;

    text-align: center;

}





.obras {

    margin-bottom: 5rem;

}

.title-obras h2 {

    font-family: var(--KoonectBold);

    font-size: 5rem;

    text-transform: uppercase;

    color: black;

}

.title-obras h3 {

    font-family: var(--sientas);

    font-size: 6rem;

    color: #A9A9A9;

    font-weight: bold;

    margin-top: -5rem;

    margin-left: 5rem;

}



@media (max-width: 768px) {

    .title-obras h2 {

        font-size: 3rem;

    }

    .title-obras h3 {

        font-size: 4rem;

        margin-top: -3rem;

    }

}



.obrasgallery {

    margin: 1rem auto;

    width: 100%;

    columns: 5 340px;

    column-gap: 10px;

}

.obrasgallery__item {

    break-inside: avoid;

    display: flex;

    flex-direction: column;

    display: block;

    width: 100%;

    height: auto;

    margin-bottom: 1rem;

}

.obrasgallery__item img {

    width: 100%;

    display: block;

    object-fit: contain;

}



/* -------------------------------------------------------------------------- */

/*                                  CONTACTO                                  */

/* -------------------------------------------------------------------------- */



.contacto {

    margin-top: -5%;

    margin-bottom: 5rem;

}

.contacto img {

    margin-bottom: 5rem;

    width: 100%;

    object-fit: cover;

}



form {

    width: 80%;

    background-color: var(--bg-nav);

    border-radius: 5px;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -ms-border-radius: 5px;

    -o-border-radius: 5px;

}



.titulo-contacto h2 {

    font-family: var(--KoonectBold);

    color: black;

    text-transform: uppercase;

    font-size: 5rem;

}



.titulo-contacto h3 {

    font-family: var(--sientas);

    font-size: 7rem;

    color: #A9A9A9;

    font-weight: 800;

    margin-top: -5rem;

    margin-left: 15%;

}



@media (max-width: 768px) {

    .titulo-contacto h2 {

        font-size: 3rem;

    }

    .titulo-contacto h3 {

        font-size: 4rem;

        margin-top: -3rem;

    }



}



.btn-primary {

    background-color: var(--dorado);

    border: none;

}