/* ==========================================================================
   LiVerso · seções da página em abas (computador) e sanfona (celular)
   Sem o script (abas.js), tudo aparece em lista. Complementa publico.css.
   ========================================================================== */

.abas-pagina__lista,
.abas-pagina__sanfona {
    display: none;
}

.abas-pagina--pronto .abas-pagina__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--cor-linha);
}

.abas-pagina__aba {
    position: relative;
    padding: 10px 16px 12px;
    border: 0;
    background: none;
    color: var(--cor-texto-suave);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.abas-pagina__aba:hover,
.abas-pagina__aba[aria-selected="true"] {
    color: var(--cor-azul);
}

.abas-pagina__aba[aria-selected="true"]::after {
    position: absolute;
    right: 12px;
    bottom: -1px;
    left: 12px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--cor-dourado);
    content: "";
}

.abas-pagina__painel {
    scroll-margin-top: 120px;
}

.abas-pagina__painel + .abas-pagina__painel {
    margin-top: 32px;
}

/* Com o script, no computador: só o painel ativo, sem o título (a aba já diz qual é). */
.abas-pagina--pronto .abas-pagina__titulo,
.abas-pagina--pronto .abas-pagina__painel {
    display: none;
}

.abas-pagina--pronto .abas-pagina__painel--ativo {
    display: block;
}

.abas-pagina--pronto .abas-pagina__painel + .abas-pagina__painel {
    margin-top: 0;
}

@media (max-width: 720px) {
    /* Celular: sanfona. Todos os títulos à vista; o conteúdo só do aberto. */
    .abas-pagina--pronto .abas-pagina__lista {
        display: none;
    }

    .abas-pagina--pronto .abas-pagina__painel {
        display: block;
        border-top: 1px solid var(--cor-linha);
    }

    .abas-pagina--pronto .abas-pagina__painel:last-child {
        border-bottom: 1px solid var(--cor-linha);
    }

    .abas-pagina--pronto .abas-pagina__titulo {
        display: block;
        margin: 0;
    }

    .abas-pagina--pronto .abas-pagina__sanfona {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 0;
        border: 0;
        background: none;
        color: var(--cor-texto);
        font: inherit;
        font-family: var(--fonte-titulo);
        font-size: 1.15rem;
        text-align: left;
        cursor: pointer;
    }

    .abas-pagina--pronto .abas-pagina__sanfona::after {
        color: var(--cor-dourado-profundo);
        font-family: var(--fonte-texto);
        content: "+";
    }

    .abas-pagina--pronto .abas-pagina__sanfona[aria-expanded="true"]::after {
        content: "−";
    }

    .abas-pagina--pronto .abas-pagina__conteudo {
        display: none;
        padding-bottom: 18px;
    }

    .abas-pagina--pronto .abas-pagina__painel--ativo .abas-pagina__conteudo {
        display: block;
    }
}