:root {
    --bg-menu: #003355;
    --color-menu : #eee;    

    --size-icon : 35px;
    --size-font-icon: 1.5rem;
    --brd-radius-svg: 9px;

    --bg-icon   : #107ba6;
    --color-icon: white;       
}

/*
*****************************************************
    BLOKE : menu-ICONS : menu di icons: social-red
*****************************************************
*/
.menu-icons {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 25px;
    width: 99%;

    background-color: var(--bg-menu);
    box-shadow: var(--div-shodow);
    border-radius: var(--brd-radius);
    /* border: var(--borde-div); */
    padding: 11px 7px;
}

        /* modificador del bloke : menu-vertical  */
        .menu-icons--vertical {
            flex-direction: column;
            width: 70px;
            background-color: var(--bg-menu);
        }

.menu-icons__link {
    text-decoration: none;
}

.menu-icons__svg {
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: var(--size-icon);
    height: var(--size-icon);
    font-size: var(--size-font-icon);
    font-weight:bold;
    /* padding: var(--brd-paddin); */
    padding: 3px 9px;

    color: var(--color-icon);
    background-color: var(--bg-icon);
    border-radius: var(--brd-radius-svg);
    /* border: var(--border-div); */

    transition: ease .5s;
}
    /* modificador --active : identifica el btn-actual.(opcion-presionada)*/
    .menu-icons__svg--active {
        background-color: green;
    }



/* animacion por transicion :  */
.menu-icons :hover {
    transform: scale(1.2);
}


/* formato de iconos con  fondo de relleno  */
.menu-icons__svg--whatsapp   { background-color: #00ff00;}
.menu-icons__svg--facebook   { background-color: #0000ff;}
.menu-icons__svg--instagram  { background-color: #f000bc;}
.menu-icons__svg--twitter    { background-color: #0ebedd;}
.menu-icons__svg--otro       { background-color: #ae181f;}
.menu-icons__svg--email      { background-color: red;}
.menu-icons__svg--website    { background-color: #535472;}
.menu-icons__svg--catalogo   { background-color: #2cee05;}
.menu-icons__svg--telegram   { background-color: #1472a8;}
.menu-icons__svg--tiktok     { background-color: #101010;}
.menu-icons__svg--gmap       { background-color: #ff0000;}
.menu-icons__svg--youtube    { background-color: #ff0707;}
.menu-icons__svg--spotify    { background-color: #14e509;}