#container-treino {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-content: flex-end;

    /*** Define Tamanho Para Centralizar Sem Quebrar ***/
    /* height: 100%;
    max-height: 100vh; */

    height: fit-content;

    position: fixed;
    right: 4.8vw;
    bottom: 1.8vh;

    gap: 1.2vh;
    z-index: 2000;
}

/* Menu Highlight */
#card-treino {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: flex-start;

    font-family: Roboto, Arial, Helvetica, sans-serif;
    width: fit-content;
    height: fit-content;

    z-index: 1000;

    background: rgb(250, 250, 250);
    font-weight: 500;
    text-decoration: none;
    text-align: center;

    border: 0.22vw solid black;
    border-radius: 1vw;

    /* transition: all 4s; */

    /*
        CSS Box-Shadow Syntax:
        • h-offset................: Horizontal shadow poosition (positive → right, negative → left)
        • v-offset................: Vertical shadow poosition (positive → down, negative → up)
        • blur-radius (optional)..: Higher values make the shadow softer
        • spread-radius (optional): Positive increases size, negative shrinks it
        • color (optional)........: Shadow color (supports rgba for transparency)
        • inset (optional)........: Makes the shadow appear inside the element
        
        box-shadow: h-offset v-offset blur-radius spread-radius color inset;
    */
    box-shadow:
        /*  h    v   b   s       c        */
        0.3vw 0.4vw 1vw 0.6vw #3131315d,
        0.3vw 0.4vw 1vw 0.3vw #3131315d;

    transition: box-shadow 0.2s ease;
}

#card-treino:hover {
    box-shadow:
        0.3vw 0.4vw 2vw 0.6vw #2222225d,
        0.3vw 0.4vw 2vw 0.3vw #2222225d;

    transition: box-shadow 0.2s ease;
}

#icone-menu-highlight {
    z-index: 999;

    /* display: none; */
    cursor: pointer;
}

/* Ícone do Scroll */
#icone-menu-highlight span {
    font-size: 8vw;
    color: black;

    border-radius: 50%;
    border: 0.5vw solid black;

    /* background-color: rgba(255, 255, 255, 0.85); */
    background-color: rgba(0, 211, 140, 0.611);

    box-shadow:
        /* h     v   b     s     c */
        0.3vw 0.4vw 1vw 0.6vw #5959595d,
        0.3vw 0.4vw 1vw 0.3vw #5959595d;

    transition: box-shadow 0.2s ease;
}

/* Ícone do Scroll */
#icone-menu-highlight span:hover {
    transform: scale(1.06);
    cursor: pointer;

    box-shadow:
        0.4vw 0.5vw 2vw 0.3vw #1111115d,
        0.4vw 0.5vw 2vw 0.1vw #1111115d;

    transition: all 0.15s ease;
}

/* Aparição suave */
#icone-menu-highlight {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Ocultamento suave */
#icone-menu-highlight.visivel {
    opacity: 1;
    pointer-events: auto;
}

/* Cabeçalho do Menu Card */
.opcoes-treino .header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8vw;

    font-size: 3.5vw;
    color: rgb(0, 0, 0);
    font-weight: 600;
    text-align: center;
    padding: 0 1vw;

    width: 100%;

    background-color: rgb(0, 211, 140);
    border-radius: 0.9vw 0.9vw 0 0;
}

/* Ícone do Cabecalho do menu */
.opcoes-treino .header span {
    font-size: 4.25vw;
}

.opcoes-treino {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: center;
    justify-content: center;

    font-size: 3.2vw;
}

.opcoes-treino .opcoes .opcao {
    display: flex;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.opcoes-treino .opcoes {
    padding: 0.8vw 1.4vw;
    border-radius: 0 0 0.8vw 0.8vw;
}

.opcoes-treino .opcoes .opcao:hover {
    cursor: pointer;
}

.opcoes-treino .opcoes .opcao p {
    text-decoration: none;
    color: rgb(0, 155, 104);
    line-height: 1;
    padding-left: 0.4vw;
    text-shadow: 0.3vw 0.3vw 0.25vw white;
    width: 100%;
    text-align: left;

    transition: text-shadow 150ms ease;
}

.opcoes-treino .opcoes .opcao p:hover {
    color: blue;
    text-shadow: 0.3vw 0.3vw 0.25vw #aaaaaa;
}

/* Ícones de Opções do Menu */
.opcoes-treino .opcoes .opcao span {
    margin-right: 0.8vw;
    font-size: 4vw;
    color: rgb(0, 0, 0);
}

#card-treino {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

hr {
    margin: 1vw 0;
    height: 0.2vw;
    border: 0.15vw solid rgb(0, 211, 140);
    background-color: rgb(0, 0, 0);
    border-radius: 0.4vw;
}

/* Intervalo de Frases selecionadas para treino */
.selecao-treino {
    margin-left: -0.6vw;
    padding-left: 0.6vw;
    padding-right: 0.6vw;

    background: #ffffdf;
    /* background: white; */
    border: 0.15vw solid rgb(118, 118, 118);
    border-radius: 0.6vw;

    transition: 0.2s;
}

/* Frase atual em execução */
.ativa {
    z-index: 10;

    margin-left: -0.6vw;
    padding-left: 0.6vw;
    padding-right: 0.6vw;

    /* background: #ffffdf; */
    background: white;

    border: 0.15vw solid rgb(118, 118, 118);
    border-radius: 0.6vw;
    box-shadow: #21212180 0.8vw 0.6vw 0.8vw;

    transition: 0.2s;
}

.oculto {
    display: none !important;
}

/* .ln2:hover {
  margin-left: -0.6vw;
  padding-left: 0.6vw;
  padding-right: 0.6vw;

  background: white;
  border: 0.15vw solid rgb(118, 118, 118);
  border-radius: 0.6vw;
  box-shadow: rgba(45, 45, 45, 0.5) 0.8vw 0.6vw 0.8vw;

  transition: 0.2s ease;
} */