/* Página das animações do Tripo e do Mixamo: cada seção cabe numa tela (1366×768 e 390 px). */

.slide--animacoes-abertura .lead,
.slide--animacoes-tripo .lead,
.slide--animacoes-uso .lead,
.slide--animacoes-clipes .lead,
.slide--animacoes-processo .lead {
    font-size: calc(var(--fs-lead) * .92);
    line-height: 1.38;
}

.slide--animacoes-abertura .numeros {
    margin-top: clamp(14px, 3vh, 34px);
}

/* Um cartão por personagem: nome, percentual, barra e a contagem por origem. */
.animacoes__pagina {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: clamp(10px, 1.8vh, 18px) clamp(12px, 1.4vw, 20px);
}

.animacoes__cartao {
    display: grid;
    align-content: center;
    gap: clamp(8px, 1.4vh, 14px);
    min-width: 0;
    padding: clamp(12px, 2.2vh, 22px) clamp(14px, 1.4vw, 20px);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.animacoes__cartao:hover,
.animacoes__cartao:focus-visible {
    border-color: var(--ouro);
    background: var(--ouro-tenue);
}

.animacoes__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.animacoes__nome {
    flex: 1;
    font: 500 var(--fs-h3)/1.2 Cinzel, serif;
    font-size: calc(var(--fs-h3) * .85);
}

.animacoes__percentual {
    font: 500 calc(var(--fs-h3) * .95)/1 Cinzel, serif;
    color: var(--ouro);
    font-variant-numeric: lining-nums tabular-nums;
}

.animacoes__barra {
    display: block;
    height: 10px;
    border: 1px solid var(--ouro-linha);
    background: var(--ouro-tenue);
}

.animacoes__barra {
    display: flex;
}

.animacoes__barra > span {
    display: block;
    height: 100%;
    background: var(--ouro);
}

.animacoes__barra > .animacoes__barra-mixamo {
    background: var(--texto-suave);
}

.animacoes__contagem {
    font-size: calc(var(--fs-corpo) * .85);
    color: var(--texto-suave);
}

/* O conteúdo do detalhe aberto em janela. */
.animacoes__resumo b {
    color: var(--ouro);
    font-size: 1.2em;
}

.animacoes__clipe {
    margin: 0 0 10px;
    line-height: 1.4;
}

/* Os clipes já em uso: seis cartões do mesmo tamanho. */
.animacoes__clipes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: clamp(10px, 1.8vh, 18px) clamp(12px, 1.4vw, 20px);
}

.animacoes__clipe-cartao {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(12px, 2vh, 20px) clamp(14px, 1.4vw, 20px);
}

.animacoes__clipe-cartao h3 {
    margin: 4px 0 2px;
    font-size: calc(var(--fs-h3) * .95);
}

.animacoes__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.animacoes__titulo > span {
    flex: 1;
    min-width: 0;
}

.animacoes__titulo svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--ouro);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.animacoes__titulo:hover,
.animacoes__titulo:focus-visible {
    color: var(--ouro);
}

.animacoes__dono {
    margin: 0 0 6px;
    font-size: calc(var(--fs-corpo) * .82);
    color: var(--ouro);
}

.animacoes__gatilho {
    margin: 0;
    font-size: calc(var(--fs-corpo) * .9);
    line-height: 1.35;
    min-height: 4.05em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Como entra: três etapas e o que buscamos no catálogo. */
.animacoes__etapas {
    margin: 0;
    padding: 0;
}

.animacoes__etapas h3 {
    margin: 0 0 2px;
}

.animacoes__etapas p {
    margin: 0;
    font-size: calc(var(--fs-corpo) * .92);
    line-height: 1.35;
    min-height: 2.7em;
}

.animacoes__legenda {
    margin: 0 0 10px;
    color: var(--ouro);
}

.slide--animacoes-tripo .animacoes__tripo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(14px, 3vh, 30px);
}

.animacoes__tripo,
.animacoes__buscas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 8px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.animacoes__tripo li,
.animacoes__buscas li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--ouro-linha);
    background: var(--fundo-cartao);
    font-size: calc(var(--fs-corpo) * .88);
}

.animacoes__tripo b,
.animacoes__buscas b {
    font: 500 calc(var(--fs-corpo) * .95)/1 Cinzel, serif;
    color: var(--ouro);
    font-variant-numeric: lining-nums tabular-nums;
}

.animacoes__busca--vazia {
    opacity: .55;
}

@media (max-width: 1100px) {
    .slide--animacoes-tripo .animacoes__tripo {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .animacoes__pagina {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .animacoes__clipes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .slide--animacoes-tripo .animacoes__tripo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 8px;
    }

    .animacoes__pagina {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .animacoes__cartao {
        gap: 6px;
        padding: 9px 10px;
    }

    .animacoes__nome {
        font-size: 13px;
    }

    .animacoes__percentual {
        font-size: 14px;
    }

    .animacoes__barra {
        height: 8px;
    }

    .animacoes__contagem {
        display: none;
    }

    .animacoes__clipes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .animacoes__clipe-cartao {
        padding: 9px 10px;
    }

    .animacoes__clipe-cartao .cartao__topo {
        display: none;
    }

    .animacoes__clipe-cartao h3 {
        margin: 0 0 2px;
        font-size: 16px;
    }

    .animacoes__dono {
        margin: 0;
        font-size: 12px;
    }

    .animacoes__gatilho {
        display: none;
    }

    .animacoes__etapas {
        gap: 8px;
    }

    .animacoes__etapas h3 {
        font-size: 17px;
    }

    .animacoes__etapas p {
        min-height: 0;
        font-size: 14px;
        line-height: 1.3;
    }

    .animacoes__buscas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px 6px;
    }

    .animacoes__tripo li,
.animacoes__buscas li {
        padding: 4px 6px;
        font-size: 12px;
    }

    .animacoes__tripo b,
.animacoes__buscas b {
        font-size: 13px;
    }
}

/* Em telas baixas (1366×768), a nota do catálogo sai: o lead já traz os números. */
@media (max-height: 820px) and (min-width: 761px) {
    .slide--animacoes-clipes .nota-fonte { display: none; }
}