@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

:root{
  /*BACKGROUND*/
  --bg-primary: #0a0a0b;
  --bg-secondary: #111113;
  --bg-tertiary: #17171a;

  /*SURFACES*/
  --surface-1: #111113;
  --surface-2: #1a1a1d;
  --surface-3: #222226;

  --surface-glass: rgba(255, 255, 255, 0.03);

  /*BORDERS*/
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);

  /*TEXT*/
  --text-primary: #e4e4e7;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-faded: #52525b;

  /*🔵 ACCENT*/
  --accent-primary: #3b82f6;
  --accent-hover: #2563eb;

  --accent-soft: rgba(59, 130, 246, 0.12);
  --accent-glow: 0 0 12px rgba(59, 130, 246, 0.25);

  /*🟢 SUCESS*/
  --color-success: #22c55e;
  --color-success-soft: rgba(34, 197, 94, 0.12);

  /*🟠 WARNING*/
  --color-warning: #f59e0b;
  --color-warning-soft: rgba(245, 158, 11, 0.12);

  /*🔴 ERROR*/
  --color-error: #ef4444;
  --color-error-soft: rgba(239, 68, 68, 0.12);

  /*COLORS*/
  --color-blue: #0070ff;
  --color-orange: #ff7b17;
  --color-purple: #8645ff;
  --color-red: #ff0500;
  --color-green: #3fde1f;
  --color-yellow: rgb(255, 200, 0, 1);

  --color-soft-blue: #6eadff;
  --color-soft-orange: #ff9342;
  --color-soft-purple: #a675ff;
  --color-soft-red: #ff504d;
  --color-soft-green: #71de5b;

  --color-secondary-blue: #2c88e3;
  --color-secondary-orange: #de7406;
  --color-secondary-purple: #8756dc;
  --color-secondary-red: #e12b2a;
  --color-secondary-green: #60b44a;
  --color-secondary-yellow: rgb(255, 200, 0, 0.3);

  /*SHADOW*/
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.6);
  --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.8);
}

/*BASIC SETS*/
*{ top: 0; left: 0; margin: 0; padding: 0; box-sizing: border-box; font-family: 'Satoshi', sans-serif; }

/*TEXT SELECTION SETS*/
*{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; -webkit-tap-highlight-color: transparent; }

/*TEXT POINTER SET*/
a, button, [role="button"], .cursor-pointer { cursor: pointer; }

::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-primary);
  transform-origin: top left;
}

.login_page{
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 0vh;
}

.logon_page{
  display: flex;
  width: 100%;
  height: 100vh;

  & .logon_sidebar{
    width: calc((270 / 1080) * 100vh);
    height: 100%;
    padding: calc((20 / 1080) * 100vh);
    border-right: calc((1 / 1080) * 100vh) solid var(--border-default);
    flex-shrink: 0;

    & .logo {
        display: flex;
        flex-flow: column;
        width: 100%;
        height: calc((80 / 1080) * 100vh);
        padding-bottom: calc((10 / 1080) * 100vh);
        color: var(--text-primary);
        font-weight: bold;
        white-space: nowrap;
        
        /* 1. Define que a .logo é a referência de tamanho */
        container-type: inline-size; 

        & .justify-letters {
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 6cqw; 
            font-weight: normal;
            text-transform: uppercase;

            & span {
                display: inline-block;
            }
        }

        /* Se este div for o título principal (ZERO SAMA...) */
        & .titulo-principal {
            width: 100%;
            /* Ajuste este valor (ex: 10 a 15) para ocupar tudo */
            font-size: 15cqw; 
            text-align: center;
        }
    }

    & h2{
      display: flex;
      align-items: center;
      font-size: calc((11 / 1080) * 100vh);
      color: var(--text-muted);
      margin: calc((10 / 1080) * 100vh) calc((10 / 1080) * 100vh) 0;
      letter-spacing: 1px;
      height: calc((50 / 1080) * 100vh);
    }

    & h2::after{
      content: "";
      flex: 1;             /* Ocupa todo o espaço restante */
      height: 1px;         /* Espessura do traço */
      background-color: var(--text-muted); /* Ou a cor que você preferir */
      margin-left: calc((20 / 1080) * 100vh); 
    }

    & ul{
      list-style: none;

      & li a{
        color: var(--text-primary);
        text-decoration: none;
        font-size: calc((14 / 1080) * 100vh);
        padding: calc((10 / 1080) * 100vh);
        display: block;
        border-radius: calc((8 / 1080) * 100vh);
        transition: 0.2s;
        height: calc((40 / 1080) * 100vh);

        &:hover{
            scale: 1.2;
            transform: translate(calc((15 / 1080) * 100vh));
        }
      }

      & li.item a{
        position: relative;
        z-index: 2;
      }

      & li.ativo a{
          position: relative;
          width: 100%;
          background-color: var(--accent-primary);
          transition: 0.5s;
          z-index: 1;
          transform: translateY(var(--posicao-y, calc((760 / 1080) * -100vh))); 
      }
    }

  & ul:nth-of-type(4) li:nth-child(1) a, 
  ul:nth-of-type(4) li:nth-child(2) a{
    color: var(--text-faded);

    &:hover{
      scale: 1;
      transform: translate(0);
      cursor: default;
    }
  }

  & .sync{
      display: flex;
      flex-flow: column;
      gap: calc((10 / 1080) * 100vh);
      width: 100%;
      height: calc((150 / 1080) * 100vh);
      border-radius: calc((8 / 1080) * 100vh);
      background-color: var(--surface-1);
      border: calc((1 / 1080) * 100vh) solid var(--border-default);
      padding: calc((10 / 1080) * 100vh);
      color: var(--text-primary);
      transform: translateY(calc((10 / 1080) * 100vh));

      & .top{
        display: flex;
        flex-flow: row;
        align-items: center;
        text-align: center;
        font-size: calc((16 / 1080) * 100vh);
        gap: calc((10 / 1080) * 100vh);
        width: 100%;
        height: 100%;
      }

      & .bot{
        background-color: var(--bg-primary);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: calc((35 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        cursor: pointer;
        flex-shrink: 0;
        transition: 0.2s;
        font-size: calc((16 / 1080) * 100vh);

        &:hover{
          background-color: var(--surface-glass);
        }

        &:active{
          background-color: white;
        }
      }
    }
  }

  & .logon_content{
    width: calc(100% - calc((270 / 1080) * 100vh));
    height: 100%;
    font-size: calc((16 / 1080) * 100vh);

    & .section_title{
      width: 100%;
      height: calc((100 / 1080) * 100vh);
      display: flex;
      padding: calc((20 / 1080) * 100vh);
      justify-content: space-between;
    }

    & section{
      width: 100%;
      height: calc(100% - calc((100 / 1080) * 100vh));
      padding: 0 calc((20 / 1080) * 100vh) calc((20 / 1080) * 100vh) calc((20 / 1080) * 100vh);
      overflow: hidden;
    }
  }
}

.section_geral{
  display: flex;
  flex-flow: column;
  gap: calc((20 / 1080) * 100vh);

  & .cards{
    display: flex;
    height: calc((180 / 1080) * 100vh);
    gap: calc((20 / 1080) * 100vh);

    & article{
      background-color: var(--surface-1);
      width: 25%;
      height: 100%;
      padding: calc((20 / 1080) * 100vh);
      border: calc((1 / 1080) * 100vh) solid var(--border-default);
      border-radius: calc((8 / 1080) * 100vh);

      & .titulo{
        display: flex;
        width: 100%;
        height: 50%;
        gap: calc((20 / 1080) * 100vh);
        margin-bottom: calc((24 / 1080) * 100vh);;

        & .icone{
          background-color: var(--border-default);
          height: 120%;
          aspect-ratio: 1/1;
          border-radius: 50%;
        }

        & .titulo{
          display: flex;
          flex-flow: column;

          & h1{
            font-size: calc((18 / 1080) * 100vh);
            color: var(--text-secondary);
            font-weight: normal;
          }

          & h2{
            font-size: calc((40 / 1080) * 100vh);
            color: var(--text-primary);
            transform: translateY(-25%);
          }
        }
      }

      & h3{
        color: var(--text-secondary);
      }

      & h4{
        color: var(--text-secondary);
      }
    }

    & .caminho{
      & h3{
        font-weight: normal;
        margin-bottom: calc((4 / 1080) * 100vh);
        font-size: calc((16 / 1080) * 100vh);
      }

      & h4{
        font-weight: normal;
        font-size: calc((16 / 1080) * 100vh);
      }
    }

    & .ciclos{
      & h3{
        font-weight: normal;
        text-align: center;
        margin-top: calc((50 / 1080) * 100vh);
        font-size: calc((16 / 1080) * 100vh);
      }
    }

    & .performance{
      & h3{
        font-weight: normal;
        font-size: calc((16 / 1080) * 100vh);
      }
    }

    & .gargalo{
      & h3{
        margin-left: calc((105 / 1080) * 100vh);
        font-size: calc((16 / 1080) * 100vh);
      }
    }
  }

  & .line_1{
    display: flex;
    height: calc((410 / 1080) * 100vh);
    gap: calc((20 / 1080) * 100vh);

    & article{
      background-color: var(--surface-1);
      height: 100%;
      border: calc((1 / 1080) * 100vh) solid var(--border-default);
      border-radius: calc((8 / 1080) * 100vh);

      & .titulo{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: calc((25 / 1080) * 100vh);
        flex-shrink: 0;

        & h1{
          display: flex;
          align-items: center;
          height: 100%;
          font-size: calc((18 / 1080) * 100vh);
          color: var(--text-primary);
          font-weight: normal;

          & div{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            aspect-ratio: 1/1;
            border: calc((1 / 1080) * 100vh) solid var(--text-primary);
            border-radius: 50%;
            scale: 0.6;
          }
        }        
      }
    }

    & .rank{
      display: flex;
      flex-flow: column;
      width: 40%;
      padding: calc((20 / 1080) * 100vh);
      gap: calc((20 / 1080) * 100vh);
      color: var(--text-primary);

      & .conteudo{
        display: flex;
        width: 100%;
        height: 100%;

        & content{}

        & #imagem{
          display: flex;
          justify-content: center;
          align-items: center;
          aspect-ratio: 1/1;
          height: 75%;
          flex-shrink: 0;
        }

        & .info{
          display: flex;
          flex-flow: column;
          width: 30%;
          max-width: calc((180 / 1080) * 100vh);
          flex-shrink: 0;
          margin-left: calc((10 / 1080) * 100vh);
          padding-right: calc((20 / 1080) * 100vh);

          & h1{
            width: 100%;
            font-size: calc((14 / 1080) * 100vh);
            font-weight: normal;
            color: var(--text-secondary);
          }

          & h2{
            width: 100%;
            font-size: calc((37 / 1080) * 100vh);
            color: #ff4500;
          }

          & h3{
            width: 100%;
            font-size: calc((14 / 1080) * 100vh);
            font-weight: normal;
            color: var(--text-secondary);
          }

          & h4{
            width: 100%;
            margin-top: calc((20 / 1080) * 100vh);
            font-size: calc((16 / 1080) * 100vh);
            font-weight: normal;
            color: var(--text-secondary);
          }

          & h5{
            width: 100%;
            font-size: calc((27 / 1080) * 100vh);
            font-weight: normal;
            color: var(--text-secondary);

            & #score{
              font-size: calc((37 / 1080) * 100vh);
              font-weight: bold;
              color: var(--text-primary);
            }
          }

          & p{
            white-space: nowrap;
            margin-top: calc((20 / 1080) * 100vh);
            font-size: calc((18 / 1080) * 100vh);
            color: var(--text-secondary);
            transform: translate(calc((-125 / 1080) * 100vh));

            & #aumento{
              color: var(--color-soft-green);
            }

            & #top{}
          }
        }

        & .breakdown{
          display: flex;
          width: 100%;
          height: 100%;
          border-left: calc((1 / 1080) * 100vh) solid var(--border-default);
          padding: calc((20 / 1080) * 100vh);
        }
      }

      & .recomendacao{
        display: flex;
        align-items: center;
        gap: calc((12 / 1080) * 100vh);
        width: 100%;
        height: calc((120 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        padding: calc((12 / 1080) * 100vh);
        overflow: hidden;

        & div{
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: var(--color-secondary-yellow);
          height: 100%;
          aspect-ratio: 1/1;
          border-radius: 50%;

          & label{
            font-size: calc((50 / 1080) * 100vh);
            height: 100%;
            transform: translateY(-22%);
            color: var(--color-yellow);
          }
        }

        & h1{
          display: flex;
          flex-flow: column;
          font-size: calc((14 / 1080) * 100vh);
          font-weight: normal;
        }
      }
    }

    & .desafio{
      display: flex;
      flex-flow: column;
      width: 60%;
      padding: calc((20 / 1080) * 100vh);
      gap: calc((20 / 1080) * 100vh);

      & .titulo{
        & button{
          background-color: var(--surface-1);
          color: var(--text-primary);
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
          padding: calc((20 / 1080) * 100vh);
          border: calc((1 / 1080) * 100vh) solid var(--border-default);
          border-radius: calc((8 / 1080) * 100vh);
          font-size: calc((18 / 1080) * 100vh);
        }
      }

      & .conteudo{
        display: flex;
        gap: calc((20 / 1080) * 100vh);
        width: 100%;
        height: 100%;

        & content{
          display: flex;
          flex-flow: column;
          width: 33%;
          height: 100%;
          padding: calc((12 / 1080) * 100vh);
          border: calc((1 / 1080) * 100vh) solid var(--border-default);
          border-radius: calc((8 / 1080) * 100vh);
          color: var(--text-primary);

          & .identificacao{
            display: flex;
            width: calc(100% + calc((24 / 1080) * 100vh));
            height: calc((45 / 1080) * 100vh);
            transform: translate(calc((-12 / 1080) * 100vh), calc((-12 / 1080) * 100vh));

            & div{
              background-color: var(--border-default);
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 0 calc((20 / 1080) * 100vh);
              width: calc((110 / 1080) * 100vh);
              height: 100%;
              border-top-left-radius: calc((8 / 1080) * 100vh);
              border-bottom-right-radius: calc((8 / 1080) * 100vh);
            }

            & label{
              display: flex;
              justify-content: center;
              align-items: center;
              width: calc((90 / 1080) * 100vh);
              height: 100%;
            }
          }

          & .personagens{
            display: flex;
            align-items: center;
            width: 100%;
            height: calc((75 / 1080) * 100vh);
            gap: calc((12 / 1080) * 100vh);
            transform: translate(0, calc((-5 / 1080) * 100vh));

            div{
              width: 25%;
              max-width: calc((70 / 1080) * 100vh);
              max-height: calc((70 / 1080) * 100vh);
              aspect-ratio: 1/1;
              border: calc((1 / 1080) * 100vh) solid var(--border-default);
              border-radius: 50%;
            }
          }

          & h1{
            display: flex;
            align-items: center;
            width: 100%;
            height: calc((30 / 1080) * 100vh);
            font-size: calc((14 / 1080) * 100vh);
            color: var(--text-secondary);
            font-weight: normal;

            & #ciclos{
              padding: calc((4 / 1080) * 100vh);
              font-size: calc((20 / 1080) * 100vh);
              color: var(--text-primary);
            }

            & #media{
              padding-left: calc((4 / 1080) * 100vh);
            }
          }

          & h2{
            font-size: calc((18 / 1080) * 100vh);
            font-weight: normal;
          }

          & h3{
            display: flex;
            align-items: center;
            width: 100%;
            height: calc((40 / 1080) * 100vh);
            margin-bottom: calc((5 / 1080) * 100vh);
            font-size: calc((40 / 1080) * 100vh);
          }

          & .fundo{
            background-color: var(--border-default);
            display: flex;
            align-items: center;
            width: 100%;
            height: calc((10 / 1080) * 100vh);
            margin-bottom: calc((5 / 1080) * 100vh);
            border-radius: calc((50 / 1080) * 100vh);
          }

          & p{
            display: flex;
            align-items: center;
            width: 100%;
            height: calc((25 / 1080) * 100vh);
            font-size: calc((16 / 1080) * 100vh);

            & #margem{
              padding-right: calc((4 / 1080) * 100vh);
              color: var(--color-soft-green);
            }
          }

          & h4{
            display: flex;
            align-items: end;
            width: 100%;
            height: calc((35 / 1080) * 100vh);
            font-size: calc((18 / 1080) * 100vh);
            font-weight: normal;

            & #score{
              padding-left: calc((6 / 1080) * 100vh);
              font-size: calc((24 / 1080) * 100vh);
              transform: translate(0, 5%);
            }
          }
        }
      }
    }
  }

  & .line_2{
    display: flex;
    height: calc((330 / 1080) * 100vh);
    gap: calc((20 / 1080) * 100vh);

    & article{
      background-color: var(--surface-1);
      height: 100%;
      border: calc((1 / 1080) * 100vh) solid var(--border-default);
      border-radius: calc((8 / 1080) * 100vh);

      & .titulo{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: calc((25 / 1080) * 100vh);
        flex-shrink: 0;

        & h1{
          display: flex;
          align-items: center;
          height: 100%;
          font-size: calc((18 / 1080) * 100vh);
          color: var(--text-primary);
          font-weight: normal;

          & div{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            aspect-ratio: 1/1;
            border: calc((1 / 1080) * 100vh) solid var(--text-primary);
            border-radius: 50%;
            scale: 0.6;
          }
        }
      }
    }

    & .otimizacao{
      display: flex;
      flex-flow: column;
      gap: calc((10 / 1080) * 100vh);
      width: 25%;
      padding: calc((20 / 1080) * 100vh);
      padding-bottom: calc((10 / 1080) * 100vh);

      & .conteudo{
        display: flex;
        flex-flow: column;
        width: 100%;
        height: 100%;

        & .sugestao{
          display: flex;
          align-items: center;
          width: 100%;
          height: 33%;
          gap: calc((10 / 1080) * 100vh);
          padding: calc((10 / 1080) * 100vh) 0;
          border-bottom: calc((1 / 1080) * 100vh) solid var(--border-default);

          & .icone{
            background-color: var(--border-default);
            height: 100%;
            aspect-ratio: 1/1;
            border-radius: 50%;
            flex-shrink: 0;
          }

          & .melhoria{
            width: 100%;
            height: 100%;
            color: var(--text-secondary);

            & h1{
              font-size: calc((15 / 1080) * 100vh);
              color: var(--text-primary);
              font-weight: normal;
            }

            & p{
              font-size: calc((13 / 1080) * 100vh);
            }
          }

          &.sugestao_3{
            border: 0;
          }
        }
      }
    }

    & .evolucao{
      display: flex;
      flex-flow: column;
      width: 30%;
      gap: calc((20 / 1080) * 100vh);
      padding: calc((20 / 1080) * 100vh);

      & .conteudo {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100%;

        & .historico-performance {
          display: grid;

          grid-template-rows:
          auto
          minmax(0, 1fr)
          auto;

          height: 100%;

          & .grafico-legenda {
            display: flex;
            gap: calc((20 / 1080) * 100vh);
            transform: translate(calc((45 / 1080) * 100vh));

            & .legenda-item {
              display: flex;
              align-items: center;
              gap: calc((10 / 1080) * 100vh);

              color: #a8b3cf;
              font-size: calc((14 / 1080) * 100vh);
              font-weight: 500;

              & .linha {
                width: calc((18 / 1080) * 100vh);
                height: calc((2 / 1080) * 100vh);

                border-radius: calc((999 / 1080) * 100vh);
                position: relative;

                &::after {
                  content: "";

                  position: absolute;
                  top: 50%;
                  right: calc((6 / 1080) * 100vh);

                  width: calc((6 / 1080) * 100vh);
                  height: calc((6 / 1080) * 100vh);

                  border-radius: 50%;
                  transform: translateY(-50%);
                }
              }

              &.score {
                & .linha,
                & .linha::after {
                  background: #a855f7;
                }
              }

              &.ciclos {
                & .linha,
                & .linha::after {
                  background: #3b82f6;
                }
              }
            }
          }

          & .grafico-wrapper {
            position: relative;
            min-height: 0;
            overflow: hidden;

            canvas {
              width: 100% !important;
              height: 100% !important;
            }
          }

          & .resumo {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            padding-top: calc((20 / 1080) * 100vh);

            & .card {
              color: var(--text-secondary);

              border-right: calc((1 / 1080) * 100vh) solid var(--border-default);
              border-radius: 0;

              padding: 0;

              display: flex;
              flex-direction: column;
              gap: calc((4 / 1080) * 100vh);

              &:nth-last-child(1){
                border: 0;
              }

              & span{
                font-size: calc((14 / 1080) * 100vh);
              }

              & strong{
                font-size: calc((18 / 1080) * 100vh);
                color: var(--text-primary);
              }

              & .titulo {
                color: #8b93a7;
                font-size: calc((10 / 1080) * 100vh);
              }

              & .valor {
                display: flex;
                align-items: baseline;
                gap: calc((4 / 1080) * 100vh);

                color: #fff;
                font-size: 28px;
                font-weight: 700;

                & small {
                  color: #8b93a7;
                  font-size: calc((12 / 1080) * 100vh);
                }

                &.verde {
                  color: #4ade80;
                }

                &.azul {
                  color: #60a5fa;
                }
              }
            }
          }
        }
      }
    }

    & .comparacao{
      display: flex;
      flex-flow: column;
      width: 25%;
      height: 100%;
      gap: calc((20 / 1080) * 100vh);
      padding: calc((20 / 1080) * 100vh);

      & .cabecalho, .media{
        display: flex;
        height: 100%;

        & h1{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: calc((18 / 1080) * 100vh);
          width: 36%;
          white-space: nowrap;
          color: var(--text-secondary);
          font-weight: normal;
        }

        & h2{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: calc((20 / 1080) * 100vh);
          width: 22%;
          white-space: nowrap;
          color: var(--text-primary);
          font-weight: normal;
        }

        & h3{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: calc((20 / 1080) * 100vh);
          width: 22%;
          white-space: nowrap;
          color: var(--text-primary);
          font-weight: normal;
        }

        & h4{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: calc((20 / 1080) * 100vh);
          width: 22%;
          white-space: nowrap;
          color: var(--text-primary);
          font-weight: normal;
        }
      }

      & .cabecalho{
        flex-shrink: 0;
        height: calc((30 / 1080) * 100vh);
        border-bottom: calc((1 / 1080) * 100vh) solid var(--border-default);

        & h1, h2, h3, h4{
          font-size: calc((16 / 1080) * 100vh);
          color: var(--text-secondary);
          font-weight: normal;
        }
      }

      & .media{
        height: calc((53 / 1080) * 100vh);
        border-bottom: calc((1 / 1080) * 100vh) solid var(--border-default);

        &:nth-last-child(1){
          border: 0;
        }
      }
    }

    & .destaque{
      display: flex;
      flex-flow: column;
      gap: calc((10 / 1080) * 100vh);
      width: 20%;
      padding: calc((20 / 1080) * 100vh);
      padding-bottom: calc((10 / 1080) * 100vh);

      & .conteudo{
        display: flex;
        flex-flow: column;
        width: 100%;
        height: 100%;

        & .sugestao{
          display: flex;
          align-items: center;
          width: 100%;
          height: 33%;
          gap: calc((10 / 1080) * 100vh);
          padding: calc((10 / 1080) * 100vh) 0;
          border-bottom: calc((1 / 1080) * 100vh) solid var(--border-default);

          & .icone{
            background-color: var(--border-default);
            height: 100%;
            aspect-ratio: 1/1;
            border-radius: 50%;
            flex-shrink: 0;
          }

          & .melhoria{
            width: 100%;
            height: 100%;
            color: var(--text-secondary);

            & h1{
              font-size: calc((15 / 1080) * 100vh);
              color: var(--text-primary);
              font-weight: normal;
            }

            & p{
              font-size: calc((13 / 1080) * 100vh);
            }
          }

          &.sugestao_3{
            border: 0;
          }
        }
      }
    }
  }
}

.section_personagens{
  display: flex;
  flex-flow: row;
  gap: calc((20 / 1080) * 100vh);

  & .page_1{
    display: flex;
    flex-flow: column;
    gap: calc((20 / 1080) * 100vh);
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    transform: translate(0);
    transition: 1.5s;

    & article{
      width: 100%;
    }

    & .card{
      display: flex;
      justify-content: space-between;
      background-color: var(--surface-1);
      height: calc((145 / 1080) * 100vh);
      padding: calc((20 / 1080) * 100vh) 0;
      border: calc((1 / 1080) * 100vh) solid var(--border-default);
      border-radius: calc((8 / 1080) * 100vh);

      & div{
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        width: 25%;
        height: 100%;
        padding: 0 calc((20 / 1080) * 100vh);

        & h1{
          font-size: calc((18 / 1080) * 100vh);
          font-weight:normal;
          color: var(--text-secondary);

          & label{
            color: var(--color-warning);
          }
        }

        & h2{
          display: flex;
          align-items: center;
          height: calc((60 / 1080) * 100vh);
          font-size: calc((50 / 1080) * 100vh);
          color: var(--text-primary);

          & label{
            margin-left: calc((10 / 1080) * 100vh);
            margin-top: calc((16 / 1080) * 100vh);
            font-size: calc((20 / 1080) * 100vh);
          }
        }

        & h3{
          font-size: calc((18 / 1080) * 100vh);
          font-weight:normal;
          color: var(--text-secondary);
        }
      }

      & .obtidos{
        border-right: calc((1 / 1080) * 100vh) solid var(--border-default);
      }

      & .nivel{
        border-right: calc((1 / 1080) * 100vh) solid var(--border-default);
      }

      & .personagens{
        border-right: calc((1 / 1080) * 100vh) solid var(--border-default);
      }
    }

    & .filter{
      display: flex;
      gap: calc((20 / 1080) * 100vh);
      height: calc((57 / 1080) * 100vh);
      background-color: var(--surface-1);
      padding: calc((10 / 1080) * 100vh);
      border: calc((1 / 1080) * 100vh) solid var(--border-default);
      border-radius: calc((8 / 1080) * 100vh);

      & .pesquisa{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: calc((8 / 1080) * 100vh);
        padding: calc((8 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((20 / 1080) * 100vh);
        color: var(--text-primary);

        & input{
          background: transparent;
          border: 0;
          width: 100%;
          height: 100%;
          font-size: calc((20 / 1080) * 100vh);
          color: var(--text-primary);
          cursor: text;

          &:focus {
            outline: none;
          }
        }
      }

      & .raridade{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((150 / 1080) * 100vh);
        height: 100%;
        padding: calc((4 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((9 / 1080) * 100vh);
        color: var(--text-primary);
        flex-shrink: 0;
        
        & h1{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          font-weight: normal;
        }
      }

      & .caminho{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((150 / 1080) * 100vh);
        height: 100%;
        padding: calc((4 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((9 / 1080) * 100vh);
        color: var(--text-primary);
        flex-shrink: 0;
        
        & h1{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          font-weight: normal;
        }
      }

      & .elemento{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((150 / 1080) * 100vh);
        height: 100%;
        padding: calc((4 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((9 / 1080) * 100vh);
        color: var(--text-primary);
        flex-shrink: 0;
        
        & h1{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          font-weight: normal;
        }
      }

      & .limpar{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((170 / 1080) * 100vh);
        height: 100%;
        padding: calc((4 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--color-soft-red);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((9 / 1080) * 100vh);
        color: var(--color-soft-red);
        flex-shrink: 0;
        
        & h1{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          font-weight: normal;
        }
      }
    }

    & .list{
      width: 100%;
      max-height: calc((718 / 1080) * 100vh);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(calc((170 / 1080) * 100vh), 1fr));
      gap: calc((20 / 1080) * 100vh);; /* Espaço entre os cards */
      overflow-y: scroll;
      -ms-overflow-style: none;  /* Internet Explorer/Edge antigo */
      scrollbar-width: none;

      & .card{
        display: flex;
        flex-flow: column;
        min-width: calc((170 / 1080) * 100vh);
        height: calc((226 / 1080) * 100vh);
        background-color: var(--surface-1);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        overflow: hidden;
        
        transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;

        &:hover {
          filter: brightness(1.15);      /* Dá o "brilhozinho" sutil no topo e no card todo */
        }

        & .fundo{
          width: 100%;
          height: calc((230 / 1080) * 100vh);
          margin-top: calc((-20 / 1080) * 100vh);
          border-radius: calc((8 / 1080) * 100vh);
          scale: 0.99;
          flex-shrink: 0;
          position: relative;
          overflow: hidden;
          background-image: 
          /* Fade para escurecer a base (baixo para cima) */
          linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 70%),
          /* Fade para sumir nas laterais (esquerda para a direita) */
          linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.5) 100%),
          /* A imagem do personagem propriamente dita */
          url('1510.webp');
          background-size: cover;        /* Preenche o card sem distorcer o boneco */
          background-position: center;   /* Centraliza o personagem no card alto */
          background-repeat: no-repeat;
          -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 95%);
          mask-image: linear-gradient(to bottom, black 30%, transparent 95%);
        }

        & .frente{
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          width: 100%;
          height: calc((230 / 1080) * 100vh);
          padding: calc((12 / 1080) * 100vh);
          transform: translateY(-100%);
          flex-shrink: 0;
          cursor: pointer;

          & .elemento{
            background-color: red;
            width: calc((30 / 1080) * 100vh);
            height: calc((30 / 1080) * 100vh);
            padding: 0;
            border-radius: 50%;]
            cursor: pointer;
          }

          & .info{
            display: flex;
            flex-flow: column;
            justify-content: end;
            gap: calc((3 / 1080) * 100vh);
            width: calc(100% + calc((20 / 1080) * 100vh));
            height: 70%;
            padding: 0 calc((10 / 1080) * 100vh);
            margin-left: calc((-10 / 1080) * 100vh);
            cursor: pointer;

            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: inherit; /* Copia o fundo do pai se houver */
              z-index: 0; /* Fica atrás do conteúdo */
              pointer-events: none; /* Não atrapalha os cliques do mouse */
              -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 95%);
              mask-image: linear-gradient(to bottom, black 40%, transparent 95%);
            }

            & h1{
              display: flex;
              align-items: center;
              color: var(--text-primary);
              font-size: calc((18 / 1080) * 100vh);
              cursor: pointer;
              line-height: 1.1;
            }

            & h2{
              display: flex;
              align-items: center;
              height: calc((18 / 1080) * 100vh);
              color: var(--text-primary);
              font-size: calc((18 / 1080) * 100vh);
              font-weight: normal;
              cursor: pointer;
            }

            & div{
              background-color: rgba(255, 255, 255, 0.05);
              display: flex;
              width: calc((30 / 1080) * 100vh);
              height: calc((30 / 1080) * 100vh);
              padding: 0;
              color: var(--text-primary);
              font-size: calc((18 / 1080) * 100vh);
              border-radius: 50%;]
              cursor: pointer;
              z-index: 1;

              & label{
                margin-left: calc((40 / 1080) * 100vh);
                margin-top: calc((1 / 1080) * 100vh);
                cursor: pointer;
              }
            }
          }
        }
      }

      &::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
      }
    }
  }

  & .page_2{
    display: flex;
    flex-flow: column;
    gap: calc((20 / 1080) * 100vh);
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    transform: translate(0);
    transition: 1.5s;

    & article{
      width: 100%;
    }

    & .status{
      background-color: var(--surface-1);
      display: flex;
      height: calc((340 / 1080) * 100vh);
      border: calc((1 / 1080) * 100vh) solid var(--border-default);
      border-radius: calc((8 / 1080) * 100vh);
      overflow: hidden;
      flex-shrink: 0;

      & .personagem{
        background-image: url('personagens_splash/1308.webp');
        width: 100%;
        height: 100%;

        background-repeat: no-repeat;
        background-size: 270%;
        background-position: 50% 25%;

        -webkit-mask-image: linear-gradient(to right, black 30%, transparent 95%);
        mask-image: linear-gradient(to right, black 30%, transparent 95%);
      }

      & .main_info{
        width: 18%;
        height: 100%;
        flex-shrink: 0;
        color: var(--text-primary);

        & h1{
          display: flex;
          align-items: center;
          margin-top: calc((90 / 1080) * 100vh);
          font-size: calc((30 / 1080) * 100vh);
          height: calc((30 / 1080) * 100vh);
        }

        & .caminho_elemento{
          margin-top: calc((10 / 1080) * 100vh);
          display: flex;
          align-items: center;
          
          & .caminho{
            background-color: var(--border-default);
            width: calc((30 / 1080) * 100vh);
            aspect-ratio: 1/1;
            scale: 0.8;
            border-radius: 50%;

            & label{
              margin-left: calc((35 / 1080) * 100vh);
              font-size: calc((22 / 1080) * 100vh);
            }
          }

          & .elemento{
            background-color: var(--border-default);
            width: calc((30 / 1080) * 100vh);
            aspect-ratio: 1/1;
            margin-left: calc((110 / 1080) * 100vh);
            scale: 0.8;
            border-radius: 50%;

            & label{
              margin-left: calc((35 / 1080) * 100vh);
              font-size: calc((22 / 1080) * 100vh);
            }
          }
        }

        & h2 {
          margin-top: calc((15 / 1080) * 100vh);
          color: var(--color-warning);
          filter: brightness(1.25);
          text-shadow: 
            0 0 calc((8 / 1080) * 100vh) color-mix(in srgb, var(--color-warning) 50%, transparent),
            0 0 calc((15 / 1080) * 100vh) color-mix(in srgb, var(--color-warning) 30%, transparent);
        }

        & .nivel_eidolon{
          margin-top: calc((20 / 1080) * 100vh);
          display: flex;
          align-items: center;

          & h3{
            padding-right: calc((15 / 1080) * 100vh);
            color: var(--text-secondary);
            font-weight: normal;
            font-size: calc((18 / 1080) * 100vh);

            & label{
              color: var(--text-primary);
            }
          }

          & h4{
            padding-left: calc((15 / 1080) * 100vh);
            color: var(--text-primary);
            font-weight: normal;
            font-size: calc((18 / 1080) * 100vh);
            border-left: calc((1 / 1080) * 100vh) solid var(--border-default);
          }
        }
      }

      & .score{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 12%;
        height: 100%;
        flex-shrink: 0;

        & .principal{
          display: flex;
          flex-flow: column;
          width: calc((130 / 1080) * 100vh);
          aspect-ratio: 10/14;
          border: calc((1 / 1080) * 100vh) solid var(--border-default);
          border-radius: calc((8 / 1080) * 100vh);

          & h1{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: calc((14 / 1080) * 100vh);
            width: 100%;
            height: 20%;
            color: var(--text-secondary);
            font-weight: normal;
          }

          & h2{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: calc((60 / 1080) * 100vh);
            width: 100%;
            height: 35%;
            color: var(--text-primary);
          }

          & h3{
            width: 100%;
            text-align: center;
            color: var(--text-secondary);
            font-size: calc((14 / 1080) * 100vh);
            padding: calc((6 / 1080) * 100vh);

            & label{
              color: var(--text-primary);
              font-size: calc((22 / 1080) * 100vh);
            }
          }

          & div{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 20%;
            border-top: calc((1 / 1080) * 100vh) solid var(--border-default);
            font-size: calc((14 / 1080) * 100vh);
            color: var(--text-primary);
          }
        }
      }

      & .status{
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        width: 21%;
        height: 100%;
        flex-shrink: 0;
        padding: calc((20 / 1080) * 100vh);
        color: var(--text-primary);
        border: 0;
        white-space: nowrap;

        & h1{
          text-align: center;
          font-size: calc((14 / 1080) * 100vh);
          color: var(--text-secondary);
          font-weight: normal;
        }

        & div{
          display: flex;
          align-items: center;
          gap: calc((3 / 1080) * 100vh);

          & div{
            background-color: var(--border-default);
            height: 100%;
            aspect-ratio: 1/1;
            flex-shrink: 0;
            border-radius: 50%;
          }

          & h2{
            width: 100%;
            font-size: calc((14 / 1080) * 100vh);
            font-weight: normal;
          }

          & label{
            font-size: calc((14 / 1080) * 100vh);
            flex-shrink: 0;
          }
        }
      }

      & .media{
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        width: 11%;
        height: 100%;
        flex-shrink: 0;
        padding: calc((20 / 1080) * 100vh) 0;
        color: var(--text-primary);
        white-space: nowrap;

        & h1{
          text-align: center;
          font-size: calc((14 / 1080) * 100vh);
          color: var(--text-secondary);
          font-weight: normal;
        }

        & div{
          display: flex;
          justify-content: center;
          align-items: center;
          gap: calc((3 / 1080) * 100vh);
          font-size: calc((14 / 1080) * 100vh);
        }
      }

      & .diferenca{
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        width: 11%;
        height: 100%;
        flex-shrink: 0;
        padding: calc((20 / 1080) * 100vh) 0;
        color: var(--text-primary);
        white-space: nowrap;

        & h1{
          text-align: center;
          font-size: calc((14 / 1080) * 100vh);
          color: var(--text-secondary);
          font-weight: normal;
        }

        & div{
          display: flex;
          justify-content: center;
          align-items: center;
          gap: calc((3 / 1080) * 100vh);
          font-size: calc((14 / 1080) * 100vh);
        }
      }
    }

    & .overview{
      display: flex;
      gap: calc((20 / 1080) * 100vh);
      height: calc((370 / 1080) * 100vh);

      & .estatisticas_principais{
        display: flex;
        flex-flow: column;
        background-color: var(--surface-1);
        width: 30%;
        height: 100%;
        gap: calc((20 / 1080) * 100vh);
        padding: calc((20 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);

        & .titulo{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: calc((25 / 1080) * 100vh);
          flex-shrink: 0;

          & h1{
            display: flex;
            align-items: center;
            height: 100%;
            font-size: calc((18 / 1080) * 100vh);
            color: var(--text-primary);
            font-weight: normal;
          }        
        }

.conteudo {
width: 100%;
height: calc(100% - calc((30 / 1080) * 100vh));

.radar-legenda {
    display: flex;
    gap: 20px;
    padding: 0 0 10px;

    .item {
        display: flex;
        align-items: center;
        gap: calc((6 / 1080) * 100vh);

        color: #C8D0E0;
        font-size: calc((14 / 1080) * 100vh);

        .linha {
            width: calc((18 / 1080) * 100vh);
            height: calc((2 / 1080) * 100vh);
            position: relative;

            &::after {
                content: "";
                width: calc((6 / 1080) * 100vh);
                height: calc((6 / 1080) * 100vh);

                border-radius: 50%;

                position: absolute;
                right: calc((6 / 1080) * 100vh);
                top: 50%;

                transform: translateY(-50%);
            }
        }

        &.voce {
            .linha,
            .linha::after {
                background: #A855F7;
            }
        }

        &.global {
            .linha,
            .linha::after {
                background: #9CA3AF;
            }
        }
    }
}

.radar-wrapper {
    width: 100%;
    height: 100%;

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

    .radar-square {
        aspect-ratio: 1 / 1;

        height: 125%;

        max-width: 125%;

        transform: translate(0, calc((-50 / 1080) * 100vh));

        position: relative;

        canvas {
            width: 100% !important;
            height: 100% !important;
        }
    }
}
}
      }

      & .insights_principais{
        display: flex;
        flex-flow: column;
        background-color: var(--surface-1);
        width: 23%;
        height: 100%;
        gap: calc((20 / 1080) * 100vh);
        padding: calc((20 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);

        & .titulo{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: calc((25 / 1080) * 100vh);
          flex-shrink: 0;

          & h1{
            display: flex;
            align-items: center;
            height: 100%;
            font-size: calc((18 / 1080) * 100vh);
            color: var(--text-primary);
            font-weight: normal;
          }        
        }

        & .conteudo{
          display: flex;
          flex-flow: column;
          width: 100%;
          height: 100%;

          & .sugestao{
            display: flex;
            align-items: center;
            width: 100%;
            height: 33%;
            gap: calc((10 / 1080) * 100vh);
            padding: calc((10 / 1080) * 100vh) 0;
            border-bottom: calc((1 / 1080) * 100vh) solid var(--border-default);

            & .icone{
              background-color: var(--border-default);
              height: 100%;
              aspect-ratio: 1/1;
              border-radius: 50%;
              flex-shrink: 0;
            }

            & .melhoria{
              width: 100%;
              height: 100%;
              color: var(--text-secondary);

              & h1{
                font-size: calc((15 / 1080) * 100vh);
                color: var(--text-primary);
                font-weight: normal;
              }

              & p{
                font-size: calc((13 / 1080) * 100vh);
              }
            }

            &.sugestao_3{
              border: 0;
            }
          }
        }
      }

      & .cone_de_luz_equipado{
        display: flex;
        flex-flow: column;
        background-color: var(--surface-1);
        width: 25%;
        height: 100%;
        gap: calc((20 / 1080) * 100vh);
        padding: calc((20 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);

        & .titulo{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: calc((25 / 1080) * 100vh);
          flex-shrink: 0;

          & h1{
            display: flex;
            align-items: center;
            height: 100%;
            font-size: calc((18 / 1080) * 100vh);
            color: var(--text-primary);
            font-weight: normal;
          }        
        }

        & .conteudo{
          display: flex;
          flex-flow: column;
          width: 100%;
          height: 100%;
          overflow: hidden;

          & .cone_top{
            display: flex;
            flex-shrink: 0;
            width: 100%;
            height: 60%;
            gap: calc((20 / 1080) * 100vh);

            & .cone_foto{
              display: flex;
              background-color: var(--border-default);
              width: auto;
              height: 80%;
              flex-shrink: 0;
              padding: calc((10 / 1080) * 100vh);
              border-radius: calc((8 / 1080) * 100vh);

              & label{
                transform: translateY(calc((126 / 1080) * 100vh));
                font-size: calc((22 / 1080) * 100vh);
                color: var(--color-warning);
                filter: brightness(1.25);
                text-shadow: 
                  0 0 calc((8 / 1080) * 100vh) color-mix(in srgb, var(--color-warning) 50%, transparent),
                  0 0 calc((15 / 1080) * 100vh) color-mix(in srgb, var(--color-warning) 30%, transparent);
              }
            }

            & .cone_textos{
              width: 100%;
              max-width: calc((240 / 1080) * 100vh);

              & h1{
                font-size: calc((18 / 1080) * 100vh);
                font-weight: normal;
                color: var(--text-primary);
              }

              & h2{
                font-size: calc((14 / 1080) * 100vh);
                font-weight: normal;
                color: var(--text-secondary);

                & label{
                  color: var(--text-primary);
                }
              }

              & h3{
                font-size: calc((14 / 1080) * 100vh);
                font-weight: normal;
                color: var(--text-secondary);
                margin-bottom: calc((10 / 1080) * 100vh);
              }

              & h4{
                display: flex;
                justify-content: space-between;
                font-size: calc((16 / 1080) * 100vh);
                font-weight: normal;
                color: var(--text-secondary);

                & label{
                  color: var(--text-primary);
                }
              }

              & h5{
                display: flex;
                justify-content: space-between;
                font-size: calc((16 / 1080) * 100vh);
                font-weight: normal;
                color: var(--text-secondary);

                & label{
                  color: var(--text-primary);
                }
              }

              & h6{
                display: flex;
                justify-content: space-between;
                font-size: calc((16 / 1080) * 100vh);
                font-weight: normal;
                color: var(--text-secondary);

                & label{
                  color: var(--text-primary);
                }
              }
            }
          }

          & .passiva{
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            scrollbar-width: none;
            text-align: justify;
            font-size: calc((14 / 1080) * 100vh);

            color: var(--text-primary);
          }
        }
      }

      & .sets_ativados{
        display: flex;
        flex-flow: column;
        background-color: var(--surface-1);
        width: 22%;
        height: 100%;
        gap: calc((20 / 1080) * 100vh);
        padding: calc((20 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);

        & .titulo{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: calc((25 / 1080) * 100vh);
          flex-shrink: 0;

          & h1{
            display: flex;
            align-items: center;
            height: 100%;
            font-size: calc((18 / 1080) * 100vh);
            color: var(--text-primary);
            font-weight: normal;
          }        
        }

        & .conteudo{
          display: flex;
          flex-flow: column;
          width: 100%;
          height: 100%;

          & .sugestao{
            display: flex;
            align-items: center;
            width: 100%;
            height: 33%;
            gap: calc((10 / 1080) * 100vh);
            padding: calc((10 / 1080) * 100vh) 0;
            border-bottom: calc((1 / 1080) * 100vh) solid var(--border-default);

            & .icone{
              background-color: var(--border-default);
              height: 100%;
              aspect-ratio: 1/1;
              border-radius: 50%;
              flex-shrink: 0;
            }

            & .melhoria{
              width: 100%;
              height: 100%;
              color: var(--text-secondary);

              & h1{
                font-size: calc((15 / 1080) * 100vh);
                color: var(--text-primary);
                font-weight: normal;
              }

              & p{
                font-size: calc((13 / 1080) * 100vh);
              }
            }

            &.sugestao_1{
              border: 0;
              flex-shrink: 0;
            }

            &.sugestao_2{
              flex-shrink: 0;

              & .icone{
                visibility: hidden;
              }
            }

            &.sugestao_3{
              border: 0;
              flex-shrink: 0;
            }
          }
        }
      }
    }

    & .relics{
      display: flex;
      flex-flow: column;
      gap: calc((20 / 1080) * 100vh);
      height: calc((210 / 1080) * 100vh);

      & .titulo{
        width: 100%;
        height: calc((20 / 1080) * 100vh);
        padding: calc((10 / 1080) * 100vh) 0;
        padding-left: calc((20 / 1080) * 100vh);
        border-top: calc((1 / 1080) * 100vh) solid var(--border-default);
        flex-shrink: 0;
        color: var(--text-primary);
      }

      & .reliquias{
        display: flex;
        gap: calc((20 / 1080) * 100vh);
        width: 100%;
        height: calc((170 / 1080) * 100vh);

        & .relic{
          display: flex;
          flex-flow: column;
          background-color: var(--surface-1);
          width: 100%;
          height: 100%;
          border: calc((1 / 1080) * 100vh) solid var(--border-default);
          border-radius: calc((8 / 1080) * 100vh);
          padding: calc((12 / 1080) * 100vh);
          overflow: hidden;

          & .peca{
            display: flex;
            width: 100%;
            height: 100%;
            margin-bottom: calc((8 / 1080) * 100vh);
            gap: calc((12 / 1080) * 100vh);

            & .relic_icon{
              background-color: var(--border-default);
              height: 100%;
              aspect-ratio: 1/1;
              border-radius: 50%;
              border: calc((1 / 1080) * 100vh) solid var(--border-default);
              flex-shrink: 0;
            }

            & .relic_details{
              width: 100%;

              & h5{
                display: flex;
                justify-content: space-between;
                font-size: calc((14 / 1080) * 100vh);
                color: var(--text-primary);
                font-weight: normal;
              }

              & .relic_main{
                display: flex;
                justify-content: space-between;

                & h6{
                  display: flex;
                  flex-flow: column;
                  justify-content: center;
                  align-items: start;
                  font-size: calc((14 / 1080) * 100vh);
                  color: var(--text-secondary);
                  font-weight: normal;

                  & label{
                    color: var(--text-primary);
                    font-size: calc((18 / 1080) * 100vh);
                  }
                }

                & div{
                  background-color: var(--border-default);
                  display: flex;
                  flex-flow: column;
                  justify-content: center;
                  align-items: center;
                  padding: 0 calc((12 / 1080) * 100vh);
                  border-radius: calc((8 / 1080) * 100vh);
                  font-size: calc((12 / 1080) * 100vh);
                  color: var(--text-secondary);

                  & label{
                    font-size: calc((18 / 1080) * 100vh);
                    color: var(--text-primary);
                  }
                }
              }
            }
          }

          & h1{
            display: flex;
            justify-content: space-between;
            font-size: calc((14 / 1080) * 100vh);
            flex-shrink: 0;
            color: var(--text-secondary);
            font-weight: normal;
          }

          & h2{
            display: flex;
            justify-content: space-between;
            font-size: calc((14 / 1080) * 100vh);
            flex-shrink: 0;
            color: var(--text-secondary);
            font-weight: normal;
          }

          & h3{
            display: flex;
            justify-content: space-between;
            font-size: calc((14 / 1080) * 100vh);
            flex-shrink: 0;
            color: var(--text-secondary);
            font-weight: normal;
          }

          & h4{
            display: flex;
            justify-content: space-between;
            font-size: calc((14 / 1080) * 100vh);
            flex-shrink: 0;
            color: var(--text-secondary);
            font-weight: normal;
          }
        }
      }
    }
  }

  /*&:hover{
    & .page_1{transform: translate(calc(-100% - calc((21 / 1080) * 100vh))); transition: 1.5s;}
    & .page_2{transform: translate(calc(-100% - calc((20 / 1080) * 100vh))); transition: 1.5s;}
  }

  & .page_1{transform: translate(calc(-100% - calc((21 / 1080) * 100vh))); transition: 1.5s;}
  & .page_2{transform: translate(calc(-100% - calc((20 / 1080) * 100vh))); transition: 1.5s;}
  /**/
}

.section_armas{
  display: flex;
  flex-flow: row;
  gap: calc((20 / 1080) * 100vh);

  & .page_1{
    display: flex;
    flex-flow: column;
    gap: calc((20 / 1080) * 100vh);
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    transform: translate(0);
    transition: 1.5s;

    & article{
      width: 100%;
    }

    & .card{
      display: flex;
      justify-content: space-between;
      background-color: var(--surface-1);
      height: calc((145 / 1080) * 100vh);
      padding: calc((20 / 1080) * 100vh) 0;
      border: calc((1 / 1080) * 100vh) solid var(--border-default);
      border-radius: calc((8 / 1080) * 100vh);

      & div{
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        width: 25%;
        height: 100%;
        padding: 0 calc((20 / 1080) * 100vh);

        & h1{
          font-size: calc((18 / 1080) * 100vh);
          font-weight:normal;
          color: var(--text-secondary);

          & label{
            color: var(--color-warning);
          }
        }

        & h2{
          display: flex;
          align-items: center;
          height: calc((60 / 1080) * 100vh);
          font-size: calc((50 / 1080) * 100vh);
          color: var(--text-primary);

          & label{
            margin-left: calc((10 / 1080) * 100vh);
            margin-top: calc((16 / 1080) * 100vh);
            font-size: calc((20 / 1080) * 100vh);
          }
        }

        & h3{
          font-size: calc((18 / 1080) * 100vh);
          font-weight:normal;
          color: var(--text-secondary);
        }
      }

      & .obtidos{
        border-right: calc((1 / 1080) * 100vh) solid var(--border-default);
      }

      & .nivel{
        border-right: calc((1 / 1080) * 100vh) solid var(--border-default);
      }

      & .personagens{
        border-right: calc((1 / 1080) * 100vh) solid var(--border-default);
      }
    }

    & .filter{
      display: flex;
      gap: calc((20 / 1080) * 100vh);
      height: calc((57 / 1080) * 100vh);
      transition: 0.8s;
      background-color: var(--surface-1);
      padding: calc((10 / 1080) * 100vh);
      border: calc((1 / 1080) * 100vh) solid var(--border-default);
      border-radius: calc((8 / 1080) * 100vh);

      & .pesquisa{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: calc((8 / 1080) * 100vh);
        padding: calc((8 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((20 / 1080) * 100vh);
        color: var(--text-primary);

        & input{
          background: transparent;
          border: 0;
          width: 100%;
          height: 100%;
          font-size: calc((20 / 1080) * 100vh);
          color: var(--text-primary);
          cursor: text;

          &:focus {
            outline: none;
          }
        }
      }

      & .raridade{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((150 / 1080) * 100vh);
        height: 100%;
        padding: calc((4 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((9 / 1080) * 100vh);
        color: var(--text-primary);
        flex-shrink: 0;
        
        & h1{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          font-weight: normal;
        }
      }

      & .caminho{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((150 / 1080) * 100vh);
        height: 100%;
        padding: calc((4 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((9 / 1080) * 100vh);
        color: var(--text-primary);
        flex-shrink: 0;
        
        & h1{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          font-weight: normal;
        }
      }

      & .elemento{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((150 / 1080) * 100vh);
        height: 100%;
        padding: calc((4 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((9 / 1080) * 100vh);
        color: var(--text-primary);
        flex-shrink: 0;
        
        & h1{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          font-weight: normal;
        }
      }

      & .limpar{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((170 / 1080) * 100vh);
        height: 100%;
        padding: calc((4 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--color-soft-red);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((9 / 1080) * 100vh);
        color: var(--color-soft-red);
        flex-shrink: 0;
        
        & h1{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          font-weight: normal;
        }
      }
    }

    & .list{
      width: 100%;
      max-height: calc((718.5 / 1080) * 100vh);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(calc((170 / 1080) * 100vh), 1fr));
      gap: calc((20 / 1080) * 100vh); /* Espaço entre os cards */
      overflow-y: scroll;
      -ms-overflow-style: none;  /* Internet Explorer/Edge antigo */
      scrollbar-width: none;
      transition: 0.8s;

      & .card{
        display: flex;
        flex-flow: column;
        min-width: calc((170 / 1080) * 100vh);
        height: calc((349 / 1080) * 100vh);
        background-color: var(--surface-1);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        overflow: hidden;
        
        transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;

        &:hover {
          filter: brightness(1.15);      /* Dá o "brilhozinho" sutil no topo e no card todo */
        }

        & .fundo{
          width: 100%;
          height: calc((230 / 1080) * 100vh);
          margin-top: calc((-20 / 1080) * 100vh);
          border-radius: calc((8 / 1080) * 100vh);
          scale: 0.99;
          flex-shrink: 0;
          position: relative;
          overflow: hidden;
          background-image: 
          /* Fade para escurecer a base (baixo para cima) */
          linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 70%),
          /* Fade para sumir nas laterais (esquerda para a direita) */
          linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.5) 100%),
          /* A imagem do personagem propriamente dita */
          url('1510.webp');
          background-size: cover;        /* Preenche o card sem distorcer o boneco */
          background-position: center;   /* Centraliza o personagem no card alto */
          background-repeat: no-repeat;
        }

        & .frente{
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          width: 100%;
          height: calc((230 / 1080) * 100vh);
          padding: calc((12 / 1080) * 100vh);
          transform: translateY(-100%);
          flex-shrink: 0;
          cursor: pointer;

          & .elemento{
            background-color: red;
            width: calc((30 / 1080) * 100vh);
            height: calc((30 / 1080) * 100vh);
            padding: 0;
            border-radius: 50%;]
            cursor: pointer;
          }

          & .info{
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            width: calc(100% + calc((20 / 1080) * 100vh));
            height: 40%;
            padding: 0 calc((10 / 1080) * 100vh);
            margin-left: calc((-10 / 1080) * 100vh);
            cursor: pointer;

            & h1{
              display: flex;
              align-items: center;
              height: calc((18 / 1080) * 100vh);
              color: var(--text-primary);
              font-size: calc((18 / 1080) * 100vh);
              cursor: pointer;
            }

            & h2{
              display: flex;
              align-items: center;
              height: calc((18 / 1080) * 100vh);
              color: var(--text-primary);
              font-size: calc((18 / 1080) * 100vh);
              font-weight: normal;
              cursor: pointer;
            }

            & div{
              background-color: rgba(255, 255, 255, 0.05);
              display: flex;
              width: calc((30 / 1080) * 100vh);
              height: calc((30 / 1080) * 100vh);
              padding: 0;
              color: var(--text-primary);
              font-size: calc((18 / 1080) * 100vh);
              border-radius: 50%;]
              cursor: pointer;

              & label{
                margin-left: calc((40 / 1080) * 100vh);
                margin-top: calc((1 / 1080) * 100vh);
                cursor: pointer;
              }
            }
          }
        }
      }

      &::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
      }
    }
  }

  & .page_2{
    background-color: var(--surface-1);
    display: flex;
    flex-flow: column;
    gap: calc((20 / 1080) * 100vh);
    width: calc((550 / 1080) * 100vh);
    height: calc((795 / 1080) * 100vh);
    flex-shrink: 0;
    border: calc((1 / 1080) * 100vh) solid var(--border-default);
    border-radius: calc((8 / 1080) * 100vh);
    transform: translate(0, calc((165 / 1080) * 100vh));
    transition: 0.8s;
  }

  &:hover{
    & .page_1{
      & .filter, .list{width: calc(100% - calc((570 / 1080) * 100vh)); transition: 0.8s;}
    }
    & .page_2{transform: translate(calc(-100% - calc((20 / 1080) * 100vh)), calc((165 / 1080) * 100vh)); transition: 0.8s;}
  }
}

.section_equipamentos{
  display: flex;
  flex-flow: row;
  gap: calc((20 / 1080) * 100vh);

  & .page_1{
    display: flex;
    flex-flow: column;
    gap: calc((20 / 1080) * 100vh);
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    transform: translate(0);
    transition: 1.5s;

    & article{
      width: 100%;
    }

    & .card{
      display: flex;
      justify-content: space-between;
      background-color: var(--surface-1);
      height: calc((145 / 1080) * 100vh);
      padding: calc((20 / 1080) * 100vh) 0;
      border: calc((1 / 1080) * 100vh) solid var(--border-default);
      border-radius: calc((8 / 1080) * 100vh);

      & div{
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        width: 25%;
        height: 100%;
        padding: 0 calc((20 / 1080) * 100vh);

        & h1{
          font-size: calc((18 / 1080) * 100vh);
          font-weight:normal;
          color: var(--text-secondary);

          & label{
            color: var(--color-warning);
          }
        }

        & h2{
          display: flex;
          align-items: center;
          height: calc((60 / 1080) * 100vh);
          font-size: calc((50 / 1080) * 100vh);
          color: var(--text-primary);

          & label{
            margin-left: calc((10 / 1080) * 100vh);
            margin-top: calc((16 / 1080) * 100vh);
            font-size: calc((20 / 1080) * 100vh);
          }
        }

        & h3{
          font-size: calc((18 / 1080) * 100vh);
          font-weight:normal;
          color: var(--text-secondary);
        }
      }

      & .obtidos{
        border-right: calc((1 / 1080) * 100vh) solid var(--border-default);
      }

      & .nivel{
        border-right: calc((1 / 1080) * 100vh) solid var(--border-default);
      }

      & .personagens{
        border-right: calc((1 / 1080) * 100vh) solid var(--border-default);
      }
    }

    & .filter{
      display: flex;
      gap: calc((20 / 1080) * 100vh);
      height: calc((57 / 1080) * 100vh);
      transition: 0.8s;
      background-color: var(--surface-1);
      padding: calc((10 / 1080) * 100vh);
      border: calc((1 / 1080) * 100vh) solid var(--border-default);
      border-radius: calc((8 / 1080) * 100vh);

      & .pesquisa{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: calc((8 / 1080) * 100vh);
        padding: calc((8 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        font-size: calc((20 / 1080) * 100vh);
        color: var(--text-primary);

        & input{
          background: transparent;
          border: 0;
          width: 100%;
          height: 100%;
          font-size: calc((20 / 1080) * 100vh);
          color: var(--text-primary);
          cursor: text;

          &:focus {
            outline: none;
          }
        }
      }

      & .raridade{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((230 / 1080) * 100vh);
        height: 100%;
        padding: calc((4 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((9 / 1080) * 100vh);
        color: var(--text-primary);
        flex-shrink: 0;
        
        & h1{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          font-weight: normal;
        }
      }

      & .caminho{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((180 / 1080) * 100vh);
        height: 100%;
        padding: calc((4 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((9 / 1080) * 100vh);
        color: var(--text-primary);
        flex-shrink: 0;
        
        & h1{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          font-weight: normal;
        }
      }

      & .elemento{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((300 / 1080) * 100vh);
        height: 100%;
        padding: calc((4 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((9 / 1080) * 100vh);
        color: var(--text-primary);
        flex-shrink: 0;
        
        & h1{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          font-weight: normal;
        }
      }

      & .limpar{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((170 / 1080) * 100vh);
        height: 100%;
        padding: calc((4 / 1080) * 100vh) calc((16 / 1080) * 100vh);
        border: calc((1 / 1080) * 100vh) solid var(--color-soft-red);
        border-radius: calc((8 / 1080) * 100vh);
        font-size: calc((9 / 1080) * 100vh);
        color: var(--color-soft-red);
        flex-shrink: 0;
        
        & h1{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          font-weight: normal;
        }
      }
    }

    & .piece{
      height: calc((57 / 1080) * 100vh);
      transition: 0.8s;
      background-color: var(--surface-1);
      padding: calc((10 / 1080) * 100vh);
      border: calc((1 / 1080) * 100vh) solid var(--border-default);
      border-radius: calc((8 / 1080) * 100vh);
    }

    & .list{
      width: 100%;
      max-height: calc((641 / 1080) * 100vh);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(calc((240 / 1080) * 100vh), 1fr));
      gap: calc((20 / 1080) * 100vh); /* Espaço entre os cards */
      overflow-y: scroll;
      -ms-overflow-style: none;  /* Internet Explorer/Edge antigo */
      scrollbar-width: none;
      transition: 0.8s;

      & .card{
        display: flex;
        flex-flow: column;
        min-width: calc((240 / 1080) * 100vh);
        height: calc((200 / 1080) * 100vh);
        background-color: var(--surface-1);
        border: calc((1 / 1080) * 100vh) solid var(--border-default);
        border-radius: calc((8 / 1080) * 100vh);
        overflow: hidden;
        
        transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;

        &:hover {
          filter: brightness(1.15);      /* Dá o "brilhozinho" sutil no topo e no card todo */
        }

        & .fundo{
          width: 100%;
          height: calc((230 / 1080) * 100vh);
          margin-top: calc((-20 / 1080) * 100vh);
          border-radius: calc((8 / 1080) * 100vh);
          scale: 0.99;
          flex-shrink: 0;
          position: relative;
          overflow: hidden;
          background-image: 
          /* Fade para escurecer a base (baixo para cima) */
          linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 70%),
          /* Fade para sumir nas laterais (esquerda para a direita) */
          linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.5) 100%),
          /* A imagem do personagem propriamente dita */
          url('1510.webp');
          background-size: cover;        /* Preenche o card sem distorcer o boneco */
          background-position: center;   /* Centraliza o personagem no card alto */
          background-repeat: no-repeat;
        }

        & .frente{
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          width: 100%;
          height: calc((230 / 1080) * 100vh);
          padding: calc((12 / 1080) * 100vh);
          transform: translateY(-100%);
          flex-shrink: 0;
          cursor: pointer;

          & .elemento{
            background-color: red;
            width: calc((30 / 1080) * 100vh);
            height: calc((30 / 1080) * 100vh);
            padding: 0;
            border-radius: 50%;]
            cursor: pointer;
          }

          & .info{
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            width: calc(100% + calc((20 / 1080) * 100vh));
            height: 40%;
            padding: 0 calc((10 / 1080) * 100vh);
            margin-left: calc((-10 / 1080) * 100vh);
            cursor: pointer;

            & h1{
              display: flex;
              align-items: center;
              height: calc((18 / 1080) * 100vh);
              color: var(--text-primary);
              font-size: calc((18 / 1080) * 100vh);
              cursor: pointer;
            }

            & h2{
              display: flex;
              align-items: center;
              height: calc((18 / 1080) * 100vh);
              color: var(--text-primary);
              font-size: calc((18 / 1080) * 100vh);
              font-weight: normal;
              cursor: pointer;
            }

            & div{
              background-color: rgba(255, 255, 255, 0.05);
              display: flex;
              width: calc((30 / 1080) * 100vh);
              height: calc((30 / 1080) * 100vh);
              padding: 0;
              color: var(--text-primary);
              font-size: calc((18 / 1080) * 100vh);
              border-radius: 50%;]
              cursor: pointer;

              & label{
                margin-left: calc((40 / 1080) * 100vh);
                margin-top: calc((1 / 1080) * 100vh);
                cursor: pointer;
              }
            }
          }
        }
      }

      &::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
      }
    }
  }

  & .page_2{
    background-color: var(--surface-1);
    display: flex;
    flex-flow: column;
    gap: calc((20 / 1080) * 100vh);
    width: calc((550 / 1080) * 100vh);
    height: calc((795 / 1080) * 100vh);
    flex-shrink: 0;
    border: calc((1 / 1080) * 100vh) solid var(--border-default);
    border-radius: calc((8 / 1080) * 100vh);
    transform: translate(0, calc((165 / 1080) * 100vh));
    transition: 0.8s;
  }

  &:hover{
    & .page_1{
      & .filter, .piece, .list{width: calc(100% - calc((570 / 1080) * 100vh)); transition: 0.8s;}
    }
    & .page_2{transform: translate(calc(-100% - calc((20 / 1080) * 100vh)), calc((165 / 1080) * 100vh)); transition: 0.8s;}
  }
}

.section_tierlists{
  display: flex;
  flex-flow: row;
  gap: calc((20 / 1080) * 100vh);

  & .page_1{background-color: var(--surface-1);
    width: 70%;
    height: 100%;
  }

  & .page_2{background-color: var(--surface-1);
    width: 30%;
    height: 100%;
    flex-shrink: 0;
  }
}

.section_estatisticas{
  display: flex;
  flex-flow: column;
  gap: calc((20 / 1080) * 100vh);

  & .desafio{
    background-color: var(--surface-1);
    width: 100%;
    height: calc((80 / 1080) * 100vh);
    border: calc((1 / 1080) * 100vh) solid var(--border-default);
    border-radius: calc((8 / 1080) * 100vh);
  }

  & .cards{
    background-color: var(--surface-1);
    width: 100%;
    height: calc((180 / 1080) * 100vh);
  }

  & .line_1{
    background-color: var(--surface-1);
    width: 100%;
    height: calc((410 / 1080) * 100vh);
  }

  & .line_2{
    background-color: var(--surface-1);
    width: 100%;
    height: calc((240 / 1080) * 100vh);
  }
}

.section_rankings{ display:none; }

.section_runs{
  display: flex;
  flex-flow: row;
  gap: calc((20 / 1080) * 100vh);

  & .page_1{background-color: var(--surface-1);
    width: 80%;
    height: 100%;
  }

  & .page_2{background-color: var(--surface-1);
    width: 20%;
    height: 100%;
    flex-shrink: 0;
  }
}

.section_calculadora_dano{ display:none; }

.section_calculadora_acao{ display:none; }

.section_perfil{
  display: flex;
  flex-flow: row;
  gap: calc((20 / 1080) * 100vh);

  & .page_1{
    display: flex;
    flex-flow: column;
    gap: calc((20 / 1080) * 100vh);
    width: 100%;
    height: 100%;
    flex-shrink: 0;

    & article{background-color: var(--surface-1);
      width: 100%;
      height: 100%;
      border: calc((1 / 1080) * 100vh) solid var(--border-default);
      border-radius: calc((8 / 1080) * 100vh);
    }

    & .cards{
      display: flex;
      gap: calc((20 / 1080) * 100vh);
      width: 100%;
      height: calc((240 / 1080) * 100vh);

      & .conta{
        width: 47%;
      }

      & .status{
        width: 52%;
      }
    }

    & .line_1{
      display: flex;
      gap: calc((20 / 1080) * 100vh);
      width: calc(73% - calc((20 / 1080) * 100vh));
      height: calc((420 / 1080) * 100vh);

      & .dna{
        width: 60%;
      }

      & .insights{
        width: 40%;
      }
    }

    & .line_2{
      display: flex;
      gap: calc((20 / 1080) * 100vh);
      width: calc(73% - calc((20 / 1080) * 100vh));
      height: calc((260 / 1080) * 100vh);

      & .evolucao{
        width: 50%;
      }

      & .personagens{
        width: 50%;
      }
    }
  }

  & .page_2{
    background-color: var(--surface-1);
    display: flex;
    flex-flow: column;
    gap: calc((20 / 1080) * 100vh);
    width: 27%;
    height: calc((700 / 1080) * 100vh);
    flex-shrink: 0;
    border: calc((1 / 1080) * 100vh) solid var(--border-default);
    border-radius: calc((8 / 1080) * 100vh);
    transform: translate(calc(-100% - calc((20 / 1080) * 100vh)), calc((260 / 1080) * 100vh));
  }
}

.section_configuracoes{ display:none; }

.section_ajuda{ display:none; }

.lado_A{
  & #performance{ color: var(--color-soft-green); }
  & #barra{ background-color: var(--color-soft-green); width:90%; height: 100%; border-radius: calc((50 / 1080) * 100vh); }
  & #personagem_1{ background: url('personagens/1407.webp') center/cover no-repeat; }
  & #personagem_2{ background: url('personagens/1413.webp') center/cover no-repeat; }
  & #personagem_3{ background: url('personagens/1409.webp') center/cover no-repeat; }
  & #personagem_4{ background: url('personagens/1415.webp') center/cover no-repeat; }
}

.lado_B{
  & #performance{ color: var(--color-soft-green); }
  & #barra{ background-color: var(--color-soft-green); width:92%; height: 100%; border-radius: calc((50 / 1080) * 100vh); }
  & #personagem_1{ background: url('personagens/1501.webp') center/cover no-repeat; }
  & #personagem_2{ background: url('personagens/1506.webp') center/cover no-repeat; }
  & #personagem_3{ background: url('personagens/1502.webp') center/cover no-repeat; }
  & #personagem_4{ background: url('personagens/1406.webp') center/cover no-repeat; }
}

.lado_C{
  & #performance{ color: var(--color-soft-green); }
  & #barra{ background-color: var(--color-soft-green); width:95%; height: 100%; border-radius: calc((50 / 1080) * 100vh); }
  & #personagem_1{ background: url('personagens/1321.webp') center/cover no-repeat; }
  & #personagem_2{ background: url('personagens/1310.webp') center/cover no-repeat; }
  & #personagem_3{ background: url('personagens/8006.webp') center/cover no-repeat; }
  & #personagem_4{ background: url('personagens/1303.webp') center/cover no-repeat; }
}

.destruicao{ background: rgba(0, 0, 0, 0.7) url('caminhos/destruicao.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.caca{ background: rgba(0, 0, 0, 0.7) url('caminhos/caca.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.erudicao{ background: rgba(0, 0, 0, 0.7) url('caminhos/erudicao.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.harmonia{ background: rgba(0, 0, 0, 0.7) url('caminhos/harmonia.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.inexistencia{ background: rgba(0, 0, 0, 0.7) url('caminhos/inexistencia.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.preservacao{ background: rgba(0, 0, 0, 0.7) url('caminhos/preservacao.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.abundancia{ background: rgba(0, 0, 0, 0.7) url('caminhos/abundancia.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.recordacao{ background: rgba(0, 0, 0, 0.7) url('caminhos/recordacao.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.euforia{ background: rgba(0, 0, 0, 0.7) url('caminhos/euforia.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }

.fisico{ background: rgba(0, 0, 0, 0.7) url('elementos/fisico.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.fogo{ background: rgba(0, 0, 0, 0.7) url('elementos/fogo.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.gelo{ background: rgba(0, 0, 0, 0.7) url('elementos/gelo.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.raio{ background: rgba(0, 0, 0, 0.7) url('elementos/raio.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.vento{ background: rgba(0, 0, 0, 0.7) url('elementos/vento.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.quantico{ background: rgba(0, 0, 0, 0.7) url('elementos/quantico.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }
.imaginario{ background: rgba(0, 0, 0, 0.7) url('elementos/imaginario.webp') center / calc((26 / 1080) * 100vh) no-repeat !important; }

section {
    transition: 1s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    overflow: hidden;
    height: 0%;
    padding: 0;
    border: none;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;

  &.disable {
    height: 0% !important;  // Força o elemento a sumir
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
}