* {
    box-sizing: border-box;
}

/* =========================================================
   TELA MENU INICIAL
   ========================================================= */

#tela-menu-inicial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;

    flex: 1;
    width: 100%;
}

#menu-pontos-texto {
    font-size: 20px;
}

table.menu-pontos-tabela td:last-child {
    text-align: center;
}

.titulo-menu {
    margin: 0;

    font-size: 42px;
    font-weight: bold;
    letter-spacing: 2px;
    color: white;
    text-align: center;
    text-shadow: 0 0 20px rgba(255, 248, 220, 0.4);
}

.menu-botoes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.botao-menu {
    position: relative;
    overflow: hidden;

    width: 100%;
    height: 62px;

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

    border: 2px solid #444;
    border-radius: 35px;

    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.botao-menu-quiz-preenchimento {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;

    background-color: #6fa3c9;
    transition: width 1s ease;
}

#btn-avaliacao-texto {
    position: relative;
    z-index: 1;
}

.botao-menu-cartas {
    background-color: #6fb8ac;
    border-color: #426e67;
}

.botao-menu-frase {
    background-color: #e1bc61;
    border-color: #a3812f;
}

.botao-menu-quiz {
    background-color: #a8c8e0;
    border-color: #647886;
}

.botao-menu-mercado {
    background-color: #d4a574;
    border-color: #7f6345;
}

.menu-dev {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-dev button {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 6px 16px;

    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}






body {
    margin: 0;
    min-height: 100vh;

    display: flex;
    justify-content: center;

    font-family: Arial, sans-serif;
    background-color: #1f4a28;
}

.jogo {
    width: 100%;
    max-width: 450px;
    min-height: 100vh;
    padding: 30px 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: white;
}

.topo h1 {
    margin: 0;

    font-size: 22px;
    font-weight: normal;
    text-align: center;
}

.icone {
    font-size: 36px;
    color: white;

    background: none;
    border: none;
}

.icone-pequena {
    font-size: 18px;
}

.icone-fantasma {
    visibility: hidden;
}

.cartas {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.carta {
    width: 100%;
    height: 62px;
    padding: 0 10px;

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

    border: 2px solid #444;
    border-radius: 35px;
}

.carta-auto {
    justify-content: center;
}

.palavra {
    font-size: 24px;
    color: #222;
}

.seta {
    font-size: 34px;
    color: #444;

    background: none;
    border: none;
}

.seta:disabled {
    opacity: 0.2;
    cursor: default;
}

/* =========================================================
   1. GRUPPO NOMINALE (Preposizione + Articolo + Sostantivo + Aggettivo)
   ========================================================= */

.preposicao {
    background-color: #fff3b0;
    margin-bottom: -2px;
    border-radius: 30px 30px 0 0;
}

.art-subst {
    display: flex;
    width: 100%;
    gap: 0;
}

/* Stile base per qualsiasi articolo (indeterminato o determinato) */
.artigo {
    background-color: #eeeeee;
}

.art-subst .artigo {
    width: 20%;
    border-radius: 30px 0 0 0;
    border-right: none;
}

.art-subst .substantivo {
    flex: 1;
    border-radius: 0 30px 0 0;
    background-color: #9ed9dc;
}

.grupo-nominal .adjetivo {
    margin-top: -2px;
    border-radius: 0 0 30px 30px;
    background-color: #acd3a7;
}

/* Appiattimento bordi superiori se c'è la preposizione sopra */
.grupo-nominal:has(.preposicao) .art-subst .artigo,
.grupo-nominal:has(.preposicao) .art-subst .substantivo {
    border-radius: 0;
}

/* Riduzione bordi inferiori se NON c'è l'aggettivo sotto */
.grupo-nominal:not(:has(.adjetivo)) .art-subst .artigo {
    border-radius: 30px 0 0 30px;
}

.grupo-nominal:not(:has(.adjetivo)) .art-subst .substantivo {
    border-radius: 0 30px 30px 0;
}

/* Riduzione bordi se c'è la preposizione sopra MA NON c'è l'aggettivo sotto */
.grupo-nominal:has(.preposicao):not(:has(.adjetivo)) .art-subst .artigo {
    border-radius: 0 0 0 30px;
}

.grupo-nominal:has(.preposicao):not(:has(.adjetivo)) .art-subst .substantivo {
    border-radius: 0 0 30px 0;
}

/* Substantivo sem artigo (ex. palavra fixa "=bisogno") */
.grupo-nominal > .substantivo {
    background-color: #9ed9dc;
}

.grupo-nominal:has(.preposicao) > .substantivo {
    border-radius: 0 0 30px 30px;
}

/* Substantivo sem artigo com preposição por cima E adjetivo por baixo ("di" / "acqua" / "fresca") */
.grupo-nominal:has(.preposicao):has(.adjetivo) > .substantivo {
    border-radius: 0;
}

/* =========================================================
   2. GRUPPO VERBALE (Verbo + Pronome)
   ========================================================= */

.verbo {
    background-color: #e1bc61;
}

.pron-verbo {
    display: flex;
    width: 100%;
    gap: 0;
}

.pron-verbo .pronome {
    width: 25%;
    background-color: #ffd8b1;
    border-radius: 35px 0 0 35px;
    border-right: none;
}

.pron-verbo .verbo {
    flex: 1;
    border-radius: 0 35px 35px 0;
}

/* Aggettivo attaccato sotto al gruppo verbale */
.grupo-verbal .adjetivo {
    margin-top: -2px;
    border-radius: 0 0 30px 30px;
    background-color: #acd3a7;
}

/* Appiattimento degli angoli inferiori del verbo/pronome quando c'è l'aggettivo sotto */
.grupo-verbal:has(.adjetivo) .pron-verbo .pronome {
    border-radius: 35px 0 0 0;
}

.grupo-verbal:has(.adjetivo) .pron-verbo .verbo {
    border-radius: 0 35px 0 0;
}

.grupo-verbal:has(.adjetivo):not(:has(.pronome)) .verbo {
    border-radius: 30px 30px 0 0;
}

/* Infinitivo com preposição por cima ("di" + "capire") */
.grupo-verbal:has(.preposicao) .verbo {
    border-radius: 0 0 35px 35px;
}

.grupo-verbal:has(.preposicao):has(.adjetivo) .verbo {
    border-radius: 0;
}

/* =========================================================
   3. RODAPÉ
   ========================================================= */

.rodape {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.confirmar {
    width: 70px;
    height: 70px;

    font-size: 40px;
    color: white;

    background-color: #62b86c;
    border: 2px solid white;
    border-radius: 50%;
}

/* =========================================================
   tela-frase-confirmada
   ========================================================= */

#tela-frase-confirmada {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    width: 100%;
}

/* =========================================================
   Tela da lista dos baralhos
   ========================================================= */

.baralho-item {
    background-color: white;
    border: 2px solid #426e67;
    border-radius: 20px;
    overflow: hidden;
}

.baralho-cabecalho {
    width: 100%;
    padding: 15px 20px;

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

    background-color: #6fb8ac;
    border: none;

    font-size: 18px;
    font-weight: bold;
    color: #222;
    text-align: left;
}

.baralho-seta {
    font-size: 16px;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.baralho-item.aberto .baralho-seta {
    transform: rotate(0deg);
}

.baralho-detalhe {
    display: none;
    padding: 15px;
}

.baralho-item.aberto .baralho-detalhe {
    display: block;
}

.acordeon {
    display: flex;
    flex-direction: column;
    gap: 10px;

    overflow-y: auto;
}

.tabela-traducao {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate; /* Permette il border-radius sugli elementi interni */
    border-spacing: 0;
    margin-bottom: 14px;

    font-size: 15px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #444;
}

.tabela-traducao th,
.tabela-traducao td {
    width: 50%;
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.tabela-traducao td:first-child,
.tabela-traducao .cabecalho-colunas th:first-child {
    border-right: 1px solid rgba(0, 0, 0, 0.15);
}

/* Rimuove l'ultimo bordo inferiore per non raddoppiare la cornice della tabella */
.tabela-traducao tr:last-child td {
    border-bottom: none;
}

.cabecalho-colunas th {
    border-bottom: 2px solid #444;
}

.tabela-traducao:has(.cabecalho-verbo) {
    border-color: #a3812f;
}

.tabela-traducao:has(.cabecalho-substantivo) {
    border-color: #4f9296;
}

.tabela-traducao:has(.cabecalho-adjetivo) {
    border-color: #5c8a56;
}

.cabecalho-categoria th {
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid #444;
}

.cabecalho-verbo th {
    background-color: #e1bc61;
    color: #222;
    border-bottom-color: #a3812f;
}

.cabecalho-substantivo th {
    background-color: #9ed9dc;
    color: #222;
    border-bottom-color: #4f9296;
}

.cabecalho-adjetivo th {
    background-color: #acd3a7;
    color: #222;
    border-bottom-color: #5c8a56;
}

/* =========================================================
   TELA "VERIFICA QUANTO SAI" (QUIZ)
   ========================================================= */

.quiz-corpo {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.carta-quiz {
    position: relative;
    overflow: hidden;

    width: 100%;
    min-height: 70px;
    padding: 0 20px;

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

    background-color: white;
    border: 2px solid #444;
    border-radius: 35px;
}

.carta-quiz-fundo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: var(--cor-carta-vazio, transparent);
}

.carta-quiz-preenchimento {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;

    background-color: var(--cor-carta-cheio, transparent);
}

.carta-quiz .palavra {
    position: relative;
    z-index: 1;

    font-size: 28px;
    font-weight: bold;
    text-align: center;
}

.quiz-timer-contorno {
    width: 100%;
    height: 14px;
    margin: 12px 0;

    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

.quiz-timer-barra {
    height: 100%;
    width: 100%;

    background-color: var(--cor-timer, #e1bc61);
    border-radius: 10px;
}

@keyframes piscaBordo {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 1); }
    50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0); }
}

.opcao-correta-flash {
    animation: piscaBordo 0.6s infinite;
}

/* Lampo rosso sulla barra del tempo quando si sbaglia risposta */
@keyframes flashErroBarra {
    0% { background-color: var(--cor-timer, #e1bc61); }
    50% { background-color: #ff4d4d; }
    100% { background-color: var(--cor-timer, #e1bc61); }
}

.timer-flash-erro {
    animation: flashErroBarra 0.4s ease;
}

@keyframes piscaLaranja {
    0%, 100% { background-color: #f0a868; }
    50% { background-color: #f5c68f; }
}

.botao-ultima-carta {
    animation: piscaLaranja 1s ease-in-out infinite;
    cursor: default;
    border-color: #b8733a;
}

.quiz-opcoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.opcao-quiz {
    width: 100%;
    height: 50px;
    padding: 0 20px;

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

    background-color: #f0ede4;
    border: 2px solid #b3a585;
    border-radius: 35px;

    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.botao-passa {
    width: 100%;
    height: 50px;
    margin-top: 20px;
    padding: 0 20px;

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

    background-color: #a8c8e0;
    border: 2px solid #647886;
    border-radius: 35px;

    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.quiz-fim-ciclo {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    text-align: center;
}

.fim-ciclo-titulo {
    margin: 0;

    font-size: 32px;
    font-weight: bold;
    color: #fff8dc;
    text-shadow: 0 0 12px rgba(255, 245, 200, 0.8), 0 0 24px rgba(255, 215, 100, 0.5);
}

.fim-ciclo-subtitulo {
    margin: 0;

    font-size: 18px;
    color: white;
}

@keyframes brilhoCorreto {
    0%, 100% { box-shadow: 0 0 0 3px rgba(120, 255, 150, 1), 0 0 20px rgba(120, 255, 150, 0.8); }
    50% { box-shadow: 0 0 0 3px rgba(120, 255, 150, 0.4), 0 0 10px rgba(120, 255, 150, 0.3); }
}

.opcao-correta-brilho {
    animation: brilhoCorreto 1s ease-in-out;
    background-color: #ffffff;
}

@keyframes flashCorCarta {
    0% { box-shadow: 0 0 0 4px var(--cor-carta-cheio), 0 0 25px var(--cor-carta-cheio); }
    100% { box-shadow: 0 0 0 0px var(--cor-carta-cheio), 0 0 0px var(--cor-carta-cheio); }
}

.carta-flash-cor {
    animation-name: flashCorCarta;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
}

@keyframes pulseCarta {
    0%, 100% { transform: scale(1); }
    15%, 45%, 75% { transform: scale(1.06); }
    30%, 60%, 90% { transform: scale(1); }
}

@keyframes festaGrandeCarta {
    0% {
        box-shadow: 0 0 4px 2px var(--cor-carta-cheio),
                    0 0 10px 4px rgba(255, 248, 220, 0.3),
                    0 0 15px 6px rgba(255, 215, 100, 0.2);
    }
    16%, 50%, 84% {
        box-shadow: 0 0 20px 8px var(--cor-carta-cheio),
                    0 0 25px 10px rgba(255, 248, 220, 0.6),
                    0 0 40px 15px rgba(255, 215, 100, 0.6);
    }
    33%, 67% {
        box-shadow: 0 0 10px 4px var(--cor-carta-cheio),
                    0 0 15px 6px rgba(255, 248, 220, 0.4),
                    0 0 25px 8px rgba(255, 215, 100, 0.3);
    }
    100% {
        box-shadow: 0 0 0px 0px transparent;
    }
}

.carta-festa-grande {
    animation-name: festaGrandeCarta, pulseCarta;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

@keyframes flashErroCarta {
    0% { box-shadow: 0 0 0 4px rgba(255, 77, 77, 0); }
    30% { box-shadow: 0 0 0 4px rgba(255, 77, 77, 1); }
    100% { box-shadow: 0 0 0 4px rgba(255, 77, 77, 0); }
}

.carta-flash-erro {
    animation-name: flashErroCarta;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
}

.quiz-fila-quadradinhos {
    width: 100%;
    margin-bottom: 8px;

    display: flex;
    justify-content: center;
    gap: 3px;
}

.fila-quadradinhos-quadrado {
    width: 15px;
    height: 15px;

    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.fim-ciclo-bravura {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#fim-ciclo-resultado-texto {
    font-weight: bold;
    color: #f0d78c;
}

.bravura-barra-contorno {
    width: 100%;
    height: 20px;

    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

.bravura-barra {
    height: 100%;
    width: 0%;

    background-color: #f0d78c;
    border-radius: 10px;
}

.fim-ciclo-bravura-numero {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    color: white;
}

.fim-ciclo-cartas-dominadas {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.carta-dominada-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 16px;
    border-radius: 20px;

    font-weight: bold;
    color: #222;
}

.fim-ciclo-total {
    width: 100%;

    display: flex;
    justify-content: space-between;

    font-size: 20px;
    font-weight: bold;
    color: white;

    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.fim-ciclo-resultado-label {
    margin: 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.fim-ciclo-resultado-pilula {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 24px;
    border-radius: 30px;
    border: 2px solid #444;

    background-color: #c9973f;

    font-size: 20px;
    font-weight: bold;
    color: white;
}

.fim-ciclo-cartas-titulo {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-align: center;
}

.mercado-baralho {
    position: relative;
    margin-bottom: 46px;
}


.mercado-baralho-interno {
    position: relative;
    z-index: 1;
    background-color: #6fb8ac;
    border: 2px solid #426e67;
    border-radius: 20px;
    overflow: hidden;
}

.mercado-baralho-nome {
    margin: 0;
    padding: 14px;

    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.mercado-quadradinhos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;

    padding: 0 14px 14px;
}

.mercado-quadrado {
    width: 16px;
    height: 16px;

    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.mercado-quadrado-possuido {
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.9), 0 0 3px 1px rgba(255, 215, 100, 0.7);
}

.mercado-cartas-avulsas {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mercado-carta-avulsa {
    position: relative;
    margin-bottom: 40px;
}

.mercado-carta-avulsa-interno {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 55px;
    padding: 0 20px;

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

    border-radius: 12px;

    font-size: 16px;
    font-weight: bold;
    color: #222;
}

.mercado-preco-pilula {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -34px;
    z-index: 0;

    background-color: #f0ede4;
    border: 2px solid #a67c00;
    border-radius: 20px;
    padding: 32px 10px 10px;

    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #a67c00;

    cursor: pointer;
    transition: transform 0.1s ease;
}

.mercado-preco-pilula:active {
    transform: scale(0.95);
}

.mercado-carta-avulsa-interno.categoria-verbo {
    background-color: #e1bc61;
    border: 2px solid #a3812f;
}

.mercado-carta-avulsa-interno.categoria-substantivo {
    background-color: #9ed9dc;
    border: 2px solid #4f9296;
}

.mercado-carta-avulsa-interno.categoria-adjetivo {
    background-color: #acd3a7;
    border: 2px solid #5c8a56;
}

.mercado-carta-avulsa .mercado-preco-pilula {
    bottom: -30px;
    padding: 28px 10px 8px;
}

.mercado-preco-pilula-selecionada {
    transform: scale(0.85);
}

.mercado-resumo-tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 20px;

    font-size: 15px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #426e67;
}

.mercado-resumo-cabecalho th {
    background-color: #6fb8ac;
    color: #222;
    padding: 8px 10px;
    text-align: center;
    font-weight: bold;
}

.mercado-resumo-tabela td {
    background-color: #f0ede4;
    padding: 8px 14px;
    color: #222;
    border-bottom: 1px solid #ddd;
}

.mercado-resumo-tabela tr:last-child td {
    border-bottom: none;
}

.mercado-resumo-tabela td:last-child {
    text-align: right;
    font-weight: bold;
    color: #a67c00;
}

.mercado-resumo-tabela td.mercado-carrinho-no-vermelho {
    color: #ff8080;
}

.botao-confirmar-compra {
    width: 100%;
    height: 55px;
    margin-top: 10px;

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

    background-color: #f0d78c;
    border: 2px solid #a67c00;
    border-radius: 35px;

    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.botao-confirmar-compra:disabled {
    opacity: 0.5;
    cursor: default;
    
}

/* =========================================================
   TELA PÓS-COMPRA
   ========================================================= */

#tela-pos-compra {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pos-compra-titulo {
    margin: 0;

    font-size: 32px;
    font-weight: bold;
    color: #fff8dc;
    text-align: center;
    text-shadow: 0 0 12px rgba(255, 245, 200, 0.8), 0 0 24px rgba(255, 215, 100, 0.5);
}

.pos-compra-subtitulo {
    margin: 0;

    font-size: 18px;
    color: white;
    text-align: center;
}

.botoes-redondos {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 10px;
}

.botao-redondo {
    width: 70px;
    height: 70px;

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

    font-size: 34px;
    border: 2px solid white;
    border-radius: 50%;
}

.botao-redondo-home {
    background-color: #b8e0b0;
}

.botao-redondo-mercado {
    background-color: #b3dcf2;
}

.botao-redondo-frase {
    background-color: #f5e3a8;
}

@keyframes festaGrandeTitulo {
    0%, 100% {
        text-shadow: 0 0 12px rgba(255, 245, 200, 0.8), 0 0 24px rgba(255, 215, 100, 0.5);
    }
    16%, 50%, 84% {
        text-shadow: 0 0 20px rgba(255, 248, 220, 1), 0 0 40px rgba(255, 215, 100, 0.9), 0 0 60px rgba(255, 215, 100, 0.6);
    }
    33%, 67% {
        text-shadow: 0 0 14px rgba(255, 245, 200, 0.8), 0 0 28px rgba(255, 215, 100, 0.6);
    }
}

.pos-compra-titulo-festa {
    animation-name: festaGrandeTitulo, pulseCarta;
    animation-duration: 2000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

/* =========================================================
   SÍMBOLOS DE GÊNERO (♂ / ♀)
   ========================================================= */

.simbolo-genero {
    font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols", sans-serif;
    font-variant-emoji: text;
}

.simbolo-genero-m {
    color: #1f5fbf;
    text-shadow: 0 0 6px rgba(90, 160, 255, 0.9), 0 0 12px rgba(90, 160, 255, 0.6);
}

.simbolo-genero-f {
    color: #ee8fb5;
    text-shadow: 0 0 6px rgba(255, 120, 190, 0.9), 0 0 12px rgba(255, 120, 190, 0.6);
}