/* Página do desafio de desempenho: cada seção cabe numa tela (1366×768 e 390 px). */

/* Ganho medido de cada causa: o número que o cartão "vende". */
.desempenho__ganho {
    font: 600 calc(var(--fs-h3) * .95)/1 Cinzel, serif;
    letter-spacing: .02em;
    color: var(--ouro);
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
}

.desempenho__valor {
    font-size: clamp(26px, 1.2vw + 2vh, 44px);
}

/* Os quatro números do problema, grandes: são o argumento da página. */
#problema .numero__valor {
    font-size: clamp(38px, 2.6vw + 3.4vh, 84px);
}

/* Causas: duas colunas de cartões largos, com o ganho na linha do título. */
#causas .editorial-colecao {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
}

#causas .cartao {
    padding: 12px clamp(14px, 1.4vw, 20px);
}

.cartao__topo--linha {
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}

.cartao__topo--linha h3 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: calc(var(--fs-h3) * .9);
}

/* Método e carregamento: quatro cartões simples, com o texto inteiro. */
#metodo .cartao,
#carregamento .cartao {
    display: flex;
    flex-direction: column;
}

#metodo .cartao h3,
#carregamento .cartao h3 {
    font-size: calc(var(--fs-h3) * .9);
}

#metodo .cartao p,
#carregamento .cartao p {
    font-size: .94em;
    line-height: 1.4;
}

/* Antes e depois da imagem: o comparador deixa de ser metade da tela e vira a tela. */
.slide--desempenho-fotos .slide__conteudo {
    padding-block: clamp(18px, 3vh, 40px);
}

.slide--desempenho-fotos .cabeca {
    margin-bottom: clamp(10px, 2vh, 22px);
}

.slide--desempenho-fotos .lead {
    font-size: calc(var(--fs-lead) * .88);
}

.slide--desempenho-fotos .comparar {
    aspect-ratio: 16 / 9;
    width: min(100%, calc((100dvh - var(--header-h) - var(--pager-h) - 310px) * 16 / 9));
    margin-inline: auto;
}

.slide--desempenho-fotos figcaption {
    width: min(100%, 1000px);
    margin-inline: auto;
    font-size: calc(var(--fs-corpo) * .92);
    text-align: center;
}

.slide--desempenho-fotos .carrossel__controles {
    margin-top: 12px;
}

/* Tabela antes e depois. */
.slide--desempenho-tabela .tabela th.num,
.slide--desempenho-tabela .tabela td.num {
    text-align: right;
    padding-right: clamp(10px, 2vw, 30px);
}

.slide--desempenho-tabela .tabela th,
.slide--desempenho-tabela .tabela td {
    padding-block: clamp(6px, 1.1vh, 10px);
}

.slide--desempenho-tabela .tabela tbody th {
    font: 500 calc(var(--fs-corpo) * .95)/1.3 Cormorant, Georgia, serif;
    letter-spacing: 0;
    text-transform: none;
    color: var(--texto);
}

.slide--desempenho-tabela .tabela {
    max-width: 920px;
}

.slide--desempenho-tabela .desempenho__depois {
    color: var(--ouro);
    font-weight: 600;
}

.slide--desempenho-tabela .nota-fonte {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: clamp(10px, 2vh, 18px);
    padding-top: 10px;
    max-width: 920px;
}

.slide--desempenho-tabela .nota-fonte .etiqueta {
    flex: none;
}

/* Ficha da build especial, sobre o vídeo do sobrevoo. */
.ficha-build {
    margin: 0;
    padding: clamp(14px, 2.4vh, 26px) clamp(16px, 2vw, 28px);
    border: 1px solid var(--ouro-linha);
    background: rgba(10, 19, 14, .84);
    box-shadow: var(--sombra);
}

.ficha-build > div {
    display: grid;
    grid-template-columns: minmax(84px, .32fr) minmax(0, 1fr);
    gap: 4px 16px;
    align-items: baseline;
    padding: clamp(7px, 1.2vh, 12px) 0;
    border-top: 1px solid var(--ouro-linha);
}

.ficha-build > div:first-child {
    border-top: 0;
}

.ficha-build dt {
    font: 600 var(--fs-mini)/1.3 Cinzel, serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ouro);
}

.ficha-build dd {
    margin: 0;
    font-size: var(--fs-corpo);
    font-variant-numeric: lining-nums tabular-nums;
}

.ficha-build__hash {
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* O SHA-256 cabe sempre numa linha: a letra encolhe com a largura da linha da ficha
   (o rótulo sobe e o valor ocupa a linha inteira; 64 caracteres ≈ 35em; abaixo de 10px, reticências). */
.ficha-build > div:has(.ficha-build__hash--valor) {
    container-type: inline-size;
    grid-template-columns: minmax(0, 1fr);
}

.ficha-build dd.ficha-build__hash--valor {
    font-family: Consolas, 'Courier New', monospace;
    font-size: max(10px, min(calc(var(--fs-corpo) * .72), 2.75cqi));
    white-space: nowrap;
    overflow-wrap: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 760px) {
    .slide--desempenho-abertura .slide__conteudo,
    .slide--desempenho-fotos .slide__conteudo,
    .slide--desempenho-tabela .slide__conteudo,
    .slide--desempenho-build .slide__conteudo {
        padding-block: 14px;
    }

    .desempenho__ganho {
        font-size: 16px;
    }

    .slide--desempenho-fotos .comparar {
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    .slide--desempenho-fotos .lead,
    .slide--desempenho-tabela .lead,
    .slide--desempenho-build .lead {
        font-size: 15px;
        line-height: 1.35;
    }

    .slide--desempenho-fotos figcaption {
        font-size: 14px;
        text-align: left;
    }

    .slide--desempenho-tabela .tabela {
        font-size: 14px;
    }

    .slide--desempenho-tabela .tabela th,
    .slide--desempenho-tabela .tabela td {
        padding-block: 5px;
        padding-right: 6px;
    }

    .slide--desempenho-tabela .tabela thead th {
        font-size: 9px;
        letter-spacing: .06em;
    }

    .slide--desempenho-tabela .nota-fonte {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
    }

    .slide--desempenho-build .dividido {
        gap: 14px;
    }

    .ficha-build {
        padding: 8px 14px;
    }

    .ficha-build > div {
        padding-block: 5px;
    }
}

@media (max-width: 760px) {
    #causas .editorial-colecao {
        grid-template-columns: minmax(0, 1fr);
    }

    .cartao__topo--linha h3 {
        font-size: 16px;
    }
}

@container quadro-chat (max-width: 760px) {
    #causas .editorial-colecao {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* No celular, método e carregamento viram duas colunas compactas para caber numa tela. */
@media (max-width: 760px) {
    #metodo .grade,
    #carregamento .grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #metodo .cartao,
    #carregamento .cartao {
        padding: 10px;
    }

    #metodo .cartao__topo,
    #carregamento .cartao__topo {
        margin-bottom: 6px;
    }

    #metodo .cartao h3,
    #carregamento .cartao h3 {
        font-size: 16px;
        margin-bottom: 4px;
    }

    #metodo .cartao p,
    #carregamento .cartao p {
        font-size: 14px;
    }
}

@container quadro-chat (max-width: 1100px) {
    #metodo .grade,
    #carregamento .grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #metodo .cartao,
    #carregamento .cartao {
        padding: 10px 14px;
    }
}