html {
    scroll-behavior: smooth;
}

/* Transición suave */
:root {
    --e: cubic-bezier(0.19, 1, 0.22, 1);
}

.box {
    transform: translateY(100px);
}

.slide-top {
    -webkit-animation: slide-top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-2-19 9:30:53
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */

@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes slide-top {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}


/* nav-comite */
.fade-in-fwd {
    -webkit-animation: fade-in-fwd 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: fade-in-fwd 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-2-19 10:42:23
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-fwd
 * ----------------------------------------
 */

@-webkit-keyframes fade-in-fwd {
    0% {
        -webkit-transform: translateZ(-80px);
        transform: translateZ(-80px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes fade-in-fwd {
    0% {
        -webkit-transform: translateZ(-80px);
        transform: translateZ(-80px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}


/* SLIDE DESDE LA DERECHA */
.slide-in-right {
    -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-3-9 12:47:27
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
/* ----------------------- */


/* SLIDE DESDE ARRIBA CON ALTURA (para desplazar elementos al desaparecer) */
.slide-in-top-h {
    -webkit-animation: slide-in-top-h 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-top-h 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}


/* ----------------------------------------------
 * Generated by Animista on 2021-3-4 10:20:32
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


/**
 * ----------------------------------------
 * animation slide-in-top-h
 * ----------------------------------------
 */

@-webkit-keyframes slide-in-top-h {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-top-h {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
        height: 0px;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
        /* valor height temporal */
        height: 550px;
    }
}
/* ------------------- */


/* SLIDE DESDE ARRIBA */
.slide-in-top {
    -webkit-animation: slide-in-top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-3-4 10:20:32
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */

@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
        /* valor height temporal */
    }
}
/* ------------------- */


/* SLIDE IZQUIERDO */
.slide-in-left {
    -webkit-animation: slide-in-left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}


/* ----------------------------------------------
 * Generated by Animista on 2021-3-9 10:44:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
/* ---------------- */


.animacion {
    animation: animacion 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes animacion {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.animacion.reverse {
    animation-direction: reverse;
}


/* MENU SECUNDARIO SOY JUGADOR */
.scale-in-ver-top {
    -webkit-animation: scale-in-ver-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: scale-in-ver-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes scale-in-ver-top {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
}

@keyframes scale-in-ver-top {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
}
/* CIERRE */


/* REVERSES */
.scale-in-ver-top.reverse {
    animation-direction: reverse;
}

.slide-in-top.reverse {
    animation-direction: reverse;
}

.slide-in-top-h.reverse {
    animation-direction: reverse;
}

.slide-in-left.reverse {
    animation-direction: reverse;
}

.slide-in-right.reverse {
    animation-direction: reverse;
}

.modal.reverse {
    animation-direction: reverse;
}
.fade-in-fwd.reverse{
    animation-direction:reverse;
}


/* DESPLAZAMIENTO EN Y */
.slide-in-top {
    -webkit-animation: slide-in-top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}


/* ----------------------------------------------
 * Generated by Animista on 2021-3-4 10:20:32
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */

@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
/* ------------------- */


/* MODALS */
.modal {
    animation: modal 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes modal {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.8;
    }
}

.modalImg {
    animation: modalImg 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes modalImg {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* index tarjeta enlaces */


/* tarjetas enlaces-página del index */

.tarjeta-enlaces-index:hover .texto-oculto {
    display: flex;
    animation: tarjeta-fade-in .8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes tarjeta-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* --*/


/* animación contenido tarjeta */
.texto-oculto-contenido {
    animation: slide-tarjetas-contenido .4s ease-in-out
}

@keyframes slide-tarjetas-contenido {
    from {
        opacity: 0;
        transform: translateY(100%)
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}
/* -- */


/* tarjetas resultados */
.resultado-view h4+div {
    transition-timing-function: var(--e);
    transition-duration: 0.8s;
    transition-property: transform;
    transform: translateX(0%);
    backdrop-filter: blur(10px);
    clip-path: polygon(0 0, 100% 0, 100% 84%, 0 93%);
    opacity: 1;
}

@media (hover:hover) and (min-width:1024px) {
    .resultado-view h4+div {
        transition-timing-function: var(--e);
        transform: translateX(-100%);
        transition-duration: 0.6s;
        opacity: 1;
    }
    .resultado-view:hover h4+div {
        transition-timing-function: var(--e);
        transition-duration: 0.8s;
        transform: translateX(0%);
        opacity: 1;
    }
}
/* fin tarjets resultados */


/* tarjetas provincia */
:root {
    --e: cubic-bezier(0.19, 1, 0.22, 1);
}

.tarjeta-index:hover .contenido-provincia {
    transform: translateY(-40%);
    transition: transform 0.8s var(--e);
}

.contenido-provincia {
    transition: transform 0.6s var(--e);
}

.resultado-clubs {
    opacity: 0;
    overflow: hidden;
    transition: all 0.6s var(--e);
}

@media (min-width:1024px) {
    .gradiente-provincia {
        opacity: 0;
        transition: opacity 0.8s var(--e);
    }
    .gradiente-provincia-2 {
        opacity: 1;
        transition: opacity 0.6s var(--e);
    }
}

.tarjeta-index:hover .gradiente-provincia {
    opacity: 0.8;
    transition: opacity 0.8s var(--e);
}

.tarjeta-index:hover .gradiente-provincia-2 {
    opacity: 0;
    transition: opacity 0.6s var(--e);
}

.tarjeta-index:hover .resultado-clubs {
    opacity: 1;
    transition: all 0.6s var(--e);
}

/* boton */
.tarjeta-index:hover .boton-ver-provincia {
    width: 50%;
    /* transform:translateY(-80px); */
    transition-property: width, height, background-color, transform;
    transition-duration: 0.6s;
    transition-timing-function: var(--e);
}

.boton-ver-provincia {
    transition-property: width, height, background-color, transform;
    transition-duration: 0.6s;
    transition-timing-function: var(--e);
}
/* -- */