/* CONTENEDOR */

.bes-circles-links{

    display:flex;

    gap:20px;

    overflow-x:auto;

    padding:10px;

    margin:10px 0 18px;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

    width:100%;
}

.bes-circles-links::-webkit-scrollbar{
    display:none;
}


/* CÍRCULOS */

.bes-circle{

    flex:0 0 auto;

    width:170px;
    height:170px;

    border-radius:50%;

    display:flex;

    align-items:flex-end;
    justify-content:center;

    text-align:center;

    padding:
        14px
        12px
        10px;

    font-size:30px;

    font-weight:800;

    line-height:1;

    text-decoration:none;

    color:#fff;

    transition:all .25s ease;

    border:3px solid rgba(0,0,0,.85);

    box-shadow:
        0 6px 14px rgba(0,0,0,.18);

    position:relative;

    overflow:visible;

    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px  2px 0 #000,
        2px  2px 0 #000,

        -2px  0px 0 #000,
        2px  0px 0 #000,
        0px -2px 0 #000,
        0px  2px 0 #000,

        0px  3px 6px rgba(0,0,0,.55);
}

/* ICONO */

.bes-circle-icon{

    position:absolute;

    inset:0;

    width:78%;
    height:78%;

    margin:auto;

    object-fit:contain;

    z-index:1;

    pointer-events:none;

    filter:
        drop-shadow(-1px -1px 0 #000)
        drop-shadow(1px -1px 0 #000)
        drop-shadow(-1px 1px 0 #000)
        drop-shadow(1px 1px 0 #000)
        drop-shadow(0 2px 4px rgba(0,0,0,.45));
}


/* TEXTO */

.bes-circle span{

    position:relative;

    z-index:2;

    display:block;

    transform:translateY(10px);

    padding:0 4px;
}


/* COLORES */

.bes-circle--blue{
    background:#3e66b4;
}

.bes-circle--green{
    background:#05af0e;
}

.bes-circle--brown{
    background:#d6660a;
}


/* HOVER */

@media (hover:hover){

    .bes-circle:hover{

        transform:translateY(-4px) scale(1.04);

        box-shadow:
            0 10px 24px rgba(0,0,0,.22);
    }
}


/* ACTIVE */

.bes-circle:active{
    transform:scale(.96);
}


/* DESKTOP GRANDE */

@media (min-width:1400px){

    .bes-circle{

        width:160px;
        height:160px;

        font-size:30px;
    }
}


/* TABLET */

@media (max-width:1024px){

    .bes-circle{

        width:130px;
        height:130px;

        font-size:30px;
    }

    .bes-circle span{
        transform:translateY(8px);
    }
}


/* MÓVIL */

@media (max-width:768px){

    .bes-circle{

        width:100px;
        height:100px;

        font-size:22px;

        padding:
            10px
            8px
            8px;

        border-width:2px;
    }

    .bes-circle span{
        transform:translateY(6px);
    }
}


/* MÓVIL PEQUEÑO */

@media (max-width:480px){

    .bes-circle{

        width:85px;
        height:85px;

        font-size:20px;
    }
}