/*======================================================
    ANIMACIONES.CSS
======================================================*/

/* ============================= */
/* REVEAL SCROLL */
/* ============================= */

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:all .8s ease;

}

.reveal.activo{

    opacity:1;

    transform:translateY(0);

}

/* ============================= */
/* FADE */
/* ============================= */

.fade{

    animation:fade .8s ease;

}

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ============================= */
/* ZOOM */
/* ============================= */

.zoom{

    animation:zoom .8s ease;

}

@keyframes zoom{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* ============================= */
/* BOTONES */
/* ============================= */

button,
a{

    transition:
        transform .35s,
        box-shadow .35s,
        background .35s,
        color .35s;

}

button:hover,
a:hover{

    transform:translateY(-3px);

}

/* ============================= */
/* TARJETAS */
/* ============================= */

.cardActividad{

    position:relative;

    overflow:hidden;

}

.cardActividad::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent,
        rgba(255,255,255,.08)
    );

    opacity:0;

    transition:.4s;

}

.cardActividad:hover::before{

    opacity:1;

}

.cardActividad img{

    transition:transform .5s ease;

}

.cardActividad:hover img{

    transform:scale(1.08);

}

/* ============================= */
/* TITULOS */
/* ============================= */

h1,
h2{

    animation:subir .9s ease;

}
/* ============================= */
/* INICIO */
/* ============================= */

#volverArriba {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--violeta);
    color: white;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    text-decoration: none;
    font-size: 24px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    /* Usamos un carácter de flecha que ya apunta hacia arriba */
}

/* Efecto Hover */
#volverArriba:hover {
    background-color: #2ab431;
    color: rgb(239, 247, 239);
    transform: translateY(-10px); /* Salta un poquito al pasar el mouse */
    cursor: pointer;
}

#volverArriba.mostrar {
    opacity: 1;
    visibility: visible;
}

@keyframes subir{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ============================= */
/* EFECTO VIDRIO */
/* ============================= */

.glass{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.08);

}

/* ============================= */
/* GLOW */
/* ============================= */

.glow:hover{

    box-shadow:

    0 0 15px rgba(156,203,60,.3),

    0 0 40px rgba(123,53,204,.35);

}

/* ============================= */
/* PULSO */
/* ============================= */

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

/* ============================= */
/* FLOTAR */
/* ============================= */

.float{

    animation:float 6s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ============================= */
/* BRILLO BOTON */
/* ============================= */

.botonWhatsapp,
.botonFinal{

    position:relative;

    overflow:hidden;

}

.botonWhatsapp::after,
.botonFinal::after{

    content:"";

    position:absolute;

    width:40px;

    height:250%;

    top:-70%;

    left:-120px;

    background:rgba(255,255,255,.4);

    transform:rotate(25deg);

    transition:.8s;

}

.botonWhatsapp:hover::after,
.botonFinal:hover::after{

    left:140%;

}

/*==================================
TELÓN
==================================*/

.telon{

    position:absolute;

    top:0;

    width:50%;

    height:100%;

    background:linear-gradient(
        90deg,
        #2d0048,
        #5A1D8F,
        #7B35CC,
        #5A1D8F
    );

    z-index:20;

    transition:transform 1.8s ease-in-out;

    box-shadow:0 0 60px rgba(0,0,0,.5);

}

.izquierdo{

    left:0;

    border-right:4px solid rgba(255,255,255,.08);

}

.derecho{

    right:0;

    border-left:4px solid rgba(255,255,255,.08);

}

.izquierdo.abrir{

    transform:translateX(-100%);

}

.derecho.abrir{

    transform:translateX(100%);

}

/* ============================= */
/* SCROLL SUAVE */
/* ============================= */

html{

    scroll-behavior:smooth;

}