:root {
    --amarelo-cy: #F2E205;
    --amarelo-queimado: #8C8303;
    --roxo-cy: rgb(70, 2, 115);
    --branco-cy: rgb(242, 242, 233);
    --preto-cy: #0d0d0d;
    --fonte: "Chakra Petch", serif;
}

.botao-menu {
    color: var(--amarelo-cy);
    letter-spacing: 4px;
    margin: 0px 20px;
    font-size: clamp(20px, 2vw, 30px);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    border: none;
    background: none;
    text-transform: uppercase;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 400ms;
    transition-property: color;
}

.botao-menu:focus,
.botao-menu:hover {
    color: var(--branco-cy);
}

.botao-menu:focus:after,
.botao-menu:hover:after {
    width: 100%;
    left: 0%;
}

.botao-menu:after {
    content: "";
    pointer-events: none;
    bottom: -2px;
    left: 50%;
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: var(--roxo-cy);
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 400ms;
    transition-property: width, left;
}

/* Estilo para o botão ativo */
.botao-menu.ativo {
    color: var(--branco-cy);
    /* Cor do texto em branco */
}

.botao-menu.ativo:after {
    width: 100%;
    /* Sublinhado sempre visível */
    left: 0%;
}