:root {
    --dorado1: #9A5F19;
    --dorado2: #A27518;
    --dorado3: #BD9A5F;

    --gris1: #57575E;
    --gris2: #757679;
    --gris3: #B3B3B7;

}
@keyframes slideFade {
    0% {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

#mensaje-exito {
    animation: slideFade 0.5s ease-out;
}

.linkMenu,
.linkMenu:visited,
.linkMenu:hover,
.linkMenu:active {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    transition: 0.5s color ease;
    text-decoration: none;
    color: white;
}

.linkMenu:hover {
    color: var(--dorado1);
}

.linkMenu:after {
    content: "";
    transition: 0.5s all ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
}

.linkMenu:before {
    top: -0.25em;
}

.linkMenu:after {
    bottom: -0.25em;
}

.linkMenu:before,
.linkMenu:after {
    height: 5px;
    height: 0.35rem;
    width: 0;
    background: var(--dorado1);
}

.linkMenu:after {
    left: 0;
}

.linkMenu:hover:before,
.linkMenu:hover:after {
    width: 100%;
}


/* Zoom In #2 */


.hoverZoom figure img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.hoverZoom figure:hover img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}







/* Bloques CSS para el micrositio de genero (TOP)*/
.divZoomImg {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    & a{
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        text-decoration: none;
        color: var(--gris2);
    }
}

.divZoomImg:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    color: var(--dorado3);
    cursor: pointer;
    & a{
        text-decoration: none;
        color: var(--dorado3);
    }
}

.divZoomImg1 img{
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.divZoomImg1 img:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    color: var(--dorado3);
    cursor: pointer;
}

.divOpacityImg img {
    opacity: 0.8;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.divOpacityImg img:hover {
    opacity: 1;
    cursor: pointer;
}

.opacityColorDiv {
    opacity: 0.8;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

    & a {
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        color: white;
    }
}

.opacityColorDiv:hover {
    opacity: 1;
    cursor: pointer;

    & a {
        opacity: 1;
        color: var(--dorado3);
    }
}

.zoomOutDiv img{
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.zoomOutDiv img:hover {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    cursor: pointer;
}
/* Bloques CSS para el micrositio de genero (BOTTOM)*/