.rank {
    position: relative;
  }

  /* El “halo” exterior */
  .bordeAvatar {
    position: absolute;
    top: 10%;
    /* (100% - 80%)/2 */
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.5s linear;
    /* box-shadow: none!important; */
  }

  .bordeAvatar:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 40px black;
  }

  .bordeAvatar:hover {
    filter: brightness(1.8);
  }

  /* Las “facetas” coloreadas */
  .umbrella {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    filter: blur(5%);
    -webkit-filter: blur(1em) brightness(1.5) saturate(1.2);
  }

  .facet,
  .facet:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: all 1s linear;
  }

  /* mitad izquierda / mitad derecha */
  .facet,
  .facet:nth-child(n + 7):after {
    clip-path: rect(0 100% 100% 50%);
  }

  .facet:after,
  .facet:nth-child(n + 7) {
    content: "";
    clip-path: rect(0 50% 100% 0);
  }

  /* El círculo interior */
  .inner {
    position: absolute;
    top: 7.5%;
    /* (100% - 70%)/2 */
    left: 7.5%;
    width: 85%;
    height: 85%;
    border-radius: 50%;
    background-color: #ffffff;
  }

  .inner:after {
    content: "";
    position: absolute;
    top: 12.5%;
    /* (100% - 75%)/2 */
    left: 12.5%;
    width: 75%;
    height: 75%;
    border-radius: 50%;
  }

  /* Logo o foto centrada */
  .tech {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 64%;
    height: 64%;
    pointer-events: none;
    object-fit: cover;
  }

  .tech img.medida-avatar {
    display: block;
    width: 100%;
    height: 100%;
    height: -webkit-fill-available;
    border-radius: 50%;
    
  }



  .bronze+.tech {
    color: #87442b;
    text-shadow: 1px -1px 1px #fdceb2, 0 4px 4px black;
  }

  .silver+.tech {
    color: #838489;
    text-shadow: 1px -1px 1px #f3f4ff, 0 4px 4px black;
  }

  .gold+.tech {
    color: #ffd046;
    text-shadow: 1px -1px 1px #ffffd5, 0 4px 4px #4f2c04;
  }

  .platinum+.tech {
    color: #8384c7;
    text-shadow: 1px -1px 1px #f3ffff, 0 4px 4px #16295b;
  }

  .diamond+.tech {
    color: #12add9;
    text-shadow: 1px -1px 1px #b4eef2, 0 4px 4px #1138b4;
  }

  .bronze {
    /* borde_segun_metal */
    border: 0px solid #2f1606;
    box-shadow: inset 0 0 11px #2f1606,
      /*sombra_interna */
      inset 0 0 20px #87442b, 0 0 0 rgba(0, 0, 0, 0.8), 0 0 0px rgba(0, 0, 0, 0.7);
  }

  .bronze .facet:nth-child(1):after {
    background-color: #87442b;
    transform: rotate(30deg);
    z-index: 12;
  }

  .bronze .facet:nth-child(2):after {
    background-color: #fdceb2;
    transform: rotate(60deg);
    z-index: 11;
  }

  .bronze .facet:nth-child(3):after {
    background-color: #692f1f;
    transform: rotate(90deg);
    z-index: 10;
  }

  .bronze .facet:nth-child(4):after {
    background-color: #2f1606;
    transform: rotate(120deg);
    z-index: 9;
  }

  .bronze .facet:nth-child(5):after {
    background-color: #2f1606;
    transform: rotate(150deg);
    z-index: 8;
  }

  .bronze .facet:nth-child(6):after {
    background-color: #692f1f;
    transform: rotate(180deg);
    z-index: 7;
  }

  .bronze .facet:nth-child(7):after {
    background-color: #87442b;
    transform: rotate(180deg);
  }

  .bronze .facet:nth-child(8):after {
    background-color: #fdceb2;
    transform: rotate(210deg);
  }

  .bronze .facet:nth-child(9):after {
    background-color: #87442b;
    transform: rotate(240deg);
  }

  .bronze .facet:nth-child(10):after {
    background-color: #fdceb2;
    transform: rotate(270deg);
  }

  .bronze .facet:nth-child(11):after {
    background-color: #692f1f;
    transform: rotate(300deg);
  }

  .bronze .facet:nth-child(12):after {
    background-color: #692f1f;
    transform: rotate(330deg);
  }

  .bronze .inner {
    /* background: linear-gradient(to top, #2f1606, #87442b); */
    box-shadow: inset 0 0 11px #2f1606;
    border: 2px solid #87442b;
  }

  .silver {
    /* borde_segun_metal */
    border: 0px solid #212134;
    box-shadow: inset 0 0 11px #212134,
      /*sombra_interna */
      inset 0 0 20px #838489, 0 0 0 rgba(0, 0, 0, 0.8), 0 0 0px rgba(0, 0, 0, 0.7);
  }

  .silver .facet:nth-child(1):after {
    background-color: #838489;
    transform: rotate(30deg);
    z-index: 12;
  }

  .silver .facet:nth-child(2):after {
    background-color: #f3f4ff;
    transform: rotate(60deg);
    z-index: 11;
  }

  .silver .facet:nth-child(3):after {
    background-color: #516262;
    transform: rotate(90deg);
    z-index: 10;
  }

  .silver .facet:nth-child(4):after {
    background-color: #212134;
    transform: rotate(120deg);
    z-index: 9;
  }

  .silver .facet:nth-child(5):after {
    background-color: #212134;
    transform: rotate(150deg);
    z-index: 8;
  }

  .silver .facet:nth-child(6):after {
    background-color: #516262;
    transform: rotate(180deg);
    z-index: 7;
  }

  .silver .facet:nth-child(7):after {
    background-color: #838489;
    transform: rotate(180deg);
  }

  .silver .facet:nth-child(8):after {
    background-color: #f3f4ff;
    transform: rotate(210deg);
  }

  .silver .facet:nth-child(9):after {
    background-color: #838489;
    transform: rotate(240deg);
  }

  .silver .facet:nth-child(10):after {
    background-color: #f3f4ff;
    transform: rotate(270deg);
  }

  .silver .facet:nth-child(11):after {
    background-color: #516262;
    transform: rotate(300deg);
  }

  .silver .facet:nth-child(12):after {
    background-color: #516262;
    transform: rotate(330deg);
  }

  .silver .inner {
    /* background: linear-gradient(to top, #212134, #838489); */
    box-shadow: inset 0 0 11px #212134;
    border: 2px solid #838489;
  }

  .gold {
    /* borde_segun_metal */
    border: 0px solid #4f2c04;
    box-shadow: inset 0 0 11px #4f2c04,
      /*sombra_interna */
      inset 0 0 20px #ffd046, 0 0 0 rgba(0, 0, 0, 0.8), 0 0 0px rgba(0, 0, 0, 0.7);
  }

  .gold .facet:nth-child(1):after {
    background-color: #ffd046;
    transform: rotate(30deg);
    z-index: 12;
  }

  .gold .facet:nth-child(2):after {
    background-color: #ffffd5;
    transform: rotate(60deg);
    z-index: 11;
  }

  .gold .facet:nth-child(3):after {
    background-color: #f16912;
    transform: rotate(90deg);
    z-index: 10;
  }

  .gold .facet:nth-child(4):after {
    background-color: #4f2c04;
    transform: rotate(120deg);
    z-index: 9;
  }

  .gold .facet:nth-child(5):after {
    background-color: #4f2c04;
    transform: rotate(150deg);
    z-index: 8;
  }

  .gold .facet:nth-child(6):after {
    background-color: #f16912;
    transform: rotate(180deg);
    z-index: 7;
  }

  .gold .facet:nth-child(7):after {
    background-color: #ffd046;
    transform: rotate(180deg);
  }

  .gold .facet:nth-child(8):after {
    background-color: #ffffd5;
    transform: rotate(210deg);
  }

  .gold .facet:nth-child(9):after {
    background-color: #ffd046;
    transform: rotate(240deg);
  }

  .gold .facet:nth-child(10):after {
    background-color: #ffffd5;
    transform: rotate(270deg);
  }

  .gold .facet:nth-child(11):after {
    background-color: #f16912;
    transform: rotate(300deg);
  }

  .gold .facet:nth-child(12):after {
    background-color: #f16912;
    transform: rotate(330deg);
  }

  .gold .inner {
    /* background: linear-gradient(to top, #4f2c04, #ffd046); */
    box-shadow: inset 0 0 11px #4f2c04;
    border: 2px solid #ffd046;
  }

  .platinum {
    /* borde_segun_metal */
    border: 0px solid #16295b;
    box-shadow: inset 0 0 11px #82a4ff,
      /*sombra_interna */
      inset 0 0 20px #8384c7, 0 0 0 rgba(0, 0, 0, 0.8), 0 0 0px rgba(0, 0, 0, 0.7);
  }

  .platinum .facet:nth-child(1):after {
    background-color: #8384c7;
    transform: rotate(30deg);
    z-index: 12;
  }

  .platinum .facet:nth-child(2):after {
    background-color: #f3ffff;
    transform: rotate(60deg);
    z-index: 11;
  }

  .platinum .facet:nth-child(3):after {
    background-color: #51628f;
    transform: rotate(90deg);
    z-index: 10;
  }

  .platinum .facet:nth-child(4):after {
    background-color: #16295b;
    transform: rotate(120deg);
    z-index: 9;
  }

  .platinum .facet:nth-child(5):after {
    background-color: #16295b;
    transform: rotate(150deg);
    z-index: 8;
  }

  .platinum .facet:nth-child(6):after {
    background-color: #51628f;
    transform: rotate(180deg);
    z-index: 7;
  }

  .platinum .facet:nth-child(7):after {
    background-color: #8384c7;
    transform: rotate(180deg);
  }

  .platinum .facet:nth-child(8):after {
    background-color: #f3ffff;
    transform: rotate(210deg);
  }

  .platinum .facet:nth-child(9):after {
    background-color: #8384c7;
    transform: rotate(240deg);
  }

  .platinum .facet:nth-child(10):after {
    background-color: #f3ffff;
    transform: rotate(270deg);
  }

  .platinum .facet:nth-child(11):after {
    background-color: #51628f;
    transform: rotate(300deg);
  }

  .platinum .facet:nth-child(12):after {
    background-color: #51628f;
    transform: rotate(330deg);
  }

  .platinum .inner {
    /* background: linear-gradient(to top, #16295b, #8384c7); */
    box-shadow: inset 0 0 11px #16295b;
    border: 2px solid #8384c7;
  }

  .diamond {
    /* borde_segun_metal */
    border: 0px solid #1138b4;
    box-shadow: inset 0 0 11px #1138b4,
      /*sombra_interna */
      inset 0 0 20px #12add9, 0 0 0 rgba(0, 0, 0, 0.8), 0 0 0px rgba(0, 0, 0, 0.7);
  }

  .diamond .facet:nth-child(1):after {
    background-color: #12add9;
    transform: rotate(30deg);
    z-index: 12;
  }

  .diamond .facet:nth-child(2):after {
    background-color: #b4eef2;
    transform: rotate(60deg);
    z-index: 11;
  }

  .diamond .facet:nth-child(3):after {
    background-color: #5e52cb;
    transform: rotate(90deg);
    z-index: 10;
  }

  .diamond .facet:nth-child(4):after {
    background-color: #1138b4;
    transform: rotate(120deg);
    z-index: 9;
  }

  .diamond .facet:nth-child(5):after {
    background-color: #1138b4;
    transform: rotate(150deg);
    z-index: 8;
  }

  .diamond .facet:nth-child(6):after {
    background-color: #5e52cb;
    transform: rotate(180deg);
    z-index: 7;
  }

  .diamond .facet:nth-child(7):after {
    background-color: #12add9;
    transform: rotate(180deg);
  }

  .diamond .facet:nth-child(8):after {
    background-color: #b4eef2;
    transform: rotate(210deg);
  }

  .diamond .facet:nth-child(9):after {
    background-color: #12add9;
    transform: rotate(240deg);
  }

  .diamond .facet:nth-child(10):after {
    background-color: #b4eef2;
    transform: rotate(270deg);
  }

  .diamond .facet:nth-child(11):after {
    background-color: #5e52cb;
    transform: rotate(300deg);
  }

  .diamond .facet:nth-child(12):after {
    background-color: #5e52cb;
    transform: rotate(330deg);
  }

  .diamond .inner {
    /* background: linear-gradient(to top, #1138b4, #12add9); */
    box-shadow: inset 0 0 11px #1138b4;
    border: 2px solid #12add9;
  }