/* =========================
   TUTORIAL CATEGORIAS
========================= */

.tutorial-categorias{

position:absolute;

top:90px;
right:40px;

background:rgba(0,0,0,0.8);

color:white;

padding:30px 50px;

border-radius:8px;

font-size:30px;

max-width:320px;

z-index:300;

animation:tutorialFade 1s ease;

}

/* flecha */

.tutorial-categorias::after{

content:"";

position:absolute;

top:-10px;
right:30px;

border-width:10px;
border-style:solid;

border-color:transparent transparent rgba(0,0,0,0.8) transparent;

}

/* animacion */

@keyframes tutorialFade{

0%{
opacity:0;
transform:translateY(-10px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

/* =========================
FLECHA CATEGORIAS
========================= */

.tutorial-arrow{

position:absolute;

top:-55px;
right:65px;

font-size:40px;

color:#7fb3ff;

animation:arrowPulse 1.2s infinite ease-in-out;

}

/* animacion crecer y encoger */

@keyframes arrowPulse{

0%{
transform:scale(1);
opacity:0.6;
}

50%{
transform:scale(1.6);
opacity:1;
}

100%{
transform:scale(1);
opacity:0.6;
}

}