/*  simulador-3d/caneca/caneca.css
 *
 *  Escrito à mão, e não gerado.
 *
 *  Revisto em 25/08/2026: barra de palco, chapa de estampa, abas do painel,
 *  barra de vistas e as regras do seletor de cor da casa em versão clara.
 *
 *  O `mockup.css` da camisa tem 67 KB e vem do sublimarker por um script
 *  (ver ../\_fonte/LEIA.md): ele carrega a folha da casa inteira reescopada em
 *  `#app`, com as seis abas, a chapa de alças e a lupa. Nada disso existe aqui
 *  — a caneca tem um palco e três controles deslizantes. Herdar aquele arquivo
 *  traria 60 KB de regras para elementos que esta página não tem, mais a
 *  briga de especificidade que o LEIA.md descreve.
 *
 *  Todo seletor é prefixado com `bn-` e vive dentro de `.bn-app`: esta página
 *  divide o documento com o cabeçalho e o rodapé do site, e uma classe
 *  solta como `.painel` colidiria com eles mais cedo ou mais tarde.
 */

/*  1270px. A coluna da direita é FIXA em 340px, então cada pixel a mais aqui
    cai inteiro na `.bn-palco-caixa`, que é o `1fr` — alargar a janela do
    cenário nunca espreme o painel de controles.

    Vieram em duas mãos: 1200 → 1220 → 1270.                                */
.bn-app {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    max-width: 1270px;
    margin: 20px auto 0;
    padding: 0 16px;
    align-items: start;
}

/* ---------- palco ---------- */
.bn-palco-caixa {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    overflow: hidden;

    /*  ── A PEÇA FICA À VISTA ENQUANTO SE ROLA ──
     *
     *  É o que o simulador de camisa faz, e é para isso que ele serve: o painel
     *  ao lado é mais alto que o palco, e descer atrás de um controle lá embaixo
     *  levava a peça junto — mexia-se na luz sem ver o que a luz estava fazendo.
     *
     *  Gruda a CAIXA, e não o `.bn-palco`: o pé com a leitura do ângulo é irmão
     *  dele aqui dentro, e ficaria para trás. E é a caixa que tem a moldura.
     *
     *  Funciona porque a `.bn-app` é um grid com `align-items: start`: a célula
     *  tem a altura da linha inteira — a do painel, que é a coluna mais alta —,
     *  e a caixa, alinhada ao topo, tem por onde deslizar dentro dela.
     *
     *  Os 12px são o mesmo respiro que a camisa usa entre o cabeçalho verde do
     *  site, que é `fixed`, e o alto do palco.                                */
    position: sticky;
    top: calc(var(--altura-header, 80px) + 12px);
    align-self: start;
}

/*  Altura por `aspect-ratio`, e não em pixel: o canvas do three é
    redimensionado por JS a partir do tamanho da caixa, e uma altura fixa
    deixaria a peça achatada no celular deitado.

    E a proporção é 5/3, 20% mais baixa do que os 4/3 de antes: numa tela de
    notebook a caixa antiga empurrava o painel de controles para fora da
    primeira dobra, e quem abre precisa ver a caneca E o que fazer com ela ao
    mesmo tempo. A peça não encolheu junto — o enquadramento da câmera apertou
    na mesma medida (ver o `1.30` em caneca.js).                             */
.bn-palco {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 3;
    min-height: 256px;
    /*  13px, e não 14: a caixa tem 14 e uma borda de 1px, e o miolo dela começa
        um pixel para dentro. Só em cima — embaixo vem o pé do palco, que é quem
        arredonda aquele lado.                                                */
    border-radius: 13px 13px 0 0;
    overflow: hidden;
}
.bn-palco canvas {
    display: block;
    width: 100%;
    height: 100%;
    /*  O ARREDONDAMENTO É REPETIDO NO CANVAS, e não deixado a cargo do
        `overflow: hidden` da caixa. Um canvas de WebGL é desenhado pela placa
        de vídeo, numa camada própria, e várias combinações de navegador e
        driver simplesmente ignoram o recorte do pai — os cantos de cima saíam
        quadrados sobre um fundo que deveria ser redondo.                     */
    border-radius: 13px 13px 0 0;
    /*  A peça gira com o arrasto; sem isto o navegador do celular entende o
        gesto como rolagem da página e a caneca não se mexe.                */
    touch-action: none;
}

/*  A tela de carregando ganhou um véu claro por baixo: o palco agora nasce
    verde, e texto cinza sobre verde não se lê.                              */
.bn-carregando {
    position: absolute;
    inset: 0;
    border-radius: 13px 13px 0 0;
    background: rgba(248, 250, 252, .92);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #64748b;
    font-size: .95rem;
    text-align: center;
    padding: 20px;
}
.bn-carregando[hidden] { display: none; }
.bn-barra {
    width: 180px;
    height: 5px;
    border-radius: 3px;
    background: #e2e8f0;
    overflow: hidden;
}
.bn-barra i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--cor-marca, #e2507d);
    transition: width .2s;
}

/* ---------- a barra flutuante do palco ---------- */
/*  Flutua SOBRE a peça, e não numa aba: a pergunta que estes botões respondem
    ("como isto vai ficar na foto?") só existe enquanto se olha a caneca. É a
    mesma escolha do simulador de camisa.

    E ANCORADA EMBAIXO, e não em cima — é onde ela fica na camisa, e é para
    onde a mão vai. Crescendo de baixo para cima, um botão a mais não empurra
    os outros para fora da vista.                                            */
.bn-fer-palco {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    /*  O VÃO ENTRE OS CONTROLES DEIXA PASSAR o ponteiro: sem isto a coluna
        inteira viraria uma parede invisível em cima do palco, e arrastar ali
        para girar a caneca não funcionaria.                                 */
    pointer-events: none;
}
.bn-fer-palco > * { pointer-events: auto; }

.bn-pad {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .86);
    border: 1px solid #dbe3ec;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .10);
    cursor: grab;
    touch-action: none;
}
.bn-pad:active { cursor: grabbing; }
.bn-pad-h, .bn-pad-v { position: absolute; background: #38bdf8; }
.bn-pad-h { left: 8%; right: 8%; top: 50%; height: 2px; margin-top: -1px; }
.bn-pad-v { top: 8%; bottom: 8%; left: 50%; width: 2px; margin-left: -1px; }
.bn-pad b {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background: #334155;
}

.bn-girar-cx { display: flex; align-items: center; gap: 6px; }

.bn-bt-palco {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    color: #1f2937;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .10);
    white-space: nowrap;
}
.bn-bt-palco:hover { background: #fff; }

/* ---------- posição das canecas, no palco ---------- */
/*  Num `<details>` porque são oito controles: abertos o tempo todo cobririam
    justamente a peça que se está tentando enquadrar.                        */
.bn-pos summary {
    list-style: none;
    user-select: none;
}
.bn-pos summary::-webkit-details-marker { display: none; }
.bn-pos__cx {
    margin-top: 6px;
    width: 216px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid #dbe3ec;
    box-shadow: 0 1px 6px rgba(15, 23, 42, .12);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bn-pos__pecas { display: flex; gap: 4px; }
.bn-pos__pecas button {
    flex: 1;
    border: 1px solid #dbe3ec;
    background: #fff;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}
.bn-pos__pecas button.ativo { background: var(--cor-marca, #e2507d); border-color: var(--cor-marca, #e2507d); color: #fff; }
.bn-pos__pecas button:disabled { opacity: .38; cursor: default; }

.bn-pos__lin { display: block; }
.bn-pos__lin > span {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: #64748b;
    margin-bottom: 3px;
}
.bn-pos__lin b { color: #1f2937; }
.bn-pos__lin input[type="range"] { width: 100%; accent-color: var(--cor-marca, #e2507d); }

/*  A caixa dos números em fonte de largura fixa, e selecionável: ela existe
    para ser copiada.                                                        */
.bn-pos__txt {
    width: 100%;
    resize: vertical;
    padding: 6px 7px;
    border: 1px solid #dbe3ec;
    border-radius: 7px;
    background: #f8fafc;
    color: #1f2937;
    font: 11px/1.35 ui-monospace, Consolas, monospace;
}
.bn-pos__dica { font-size: .68rem; color: #94a3b8; line-height: 1.3; }

.bn-sel-palco {
    padding: 6px 8px;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    color: #1f2937;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .10);
}

.bn-vel {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    border: 1px solid #dbe3ec;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .10);
}
.bn-vel button {
    border: 0;
    background: transparent;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: .74rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
}
.bn-vel button.on { background: var(--cor-marca, #e2507d); color: #fff; }

/*  A barra da gravação. `width` em vez de `transform` porque ela mede poucos
    pixels e uma escala deixaria a beira borrada.                            */
.bn-grava {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #dbe3ec;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .10);
    font-size: .72rem;
    color: #475569;
    white-space: nowrap;
}
.bn-grava[hidden] { display: none; }
.bn-grava__barra {
    width: 70px;
    height: 4px;
    border-radius: 3px;
    background: #e2e8f0;
    overflow: hidden;
}
.bn-grava__barra i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--cor-marca, #e2507d);
    transition: width .18s;
}

/* ---------- as quatro vistas ---------- */
/*  Embaixo e centradas, na mesma posição das abas de peça do simulador de
    camisa: é onde a mão já procura.                                         */
.bn-vistas {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .90);
    border: 1px solid #dbe3ec;
    box-shadow: 0 1px 6px rgba(15, 23, 42, .12);
    max-width: calc(100% - 20px);
    overflow-x: auto;
}
.bn-vistas button {
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
}
.bn-vistas button:hover { background: #f1f5f9; }
.bn-vistas button.on { background: var(--cor-marca, #e2507d); color: #fff; }

/*  O risco separa duas perguntas diferentes na mesma barra: de que ângulo se
    olha, e quantas peças há.                                                */
.bn-vistas__risco {
    width: 1px;
    align-self: stretch;
    margin: 4px 3px;
    background: #dbe3ec;
}
.bn-vistas button[data-canecas] { padding: 6px 10px; min-width: 30px; }

/* ---------- cor do cenário ---------- */
.bn-campo--cor > span { margin-bottom: 0; }
.bn-campo--cor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.bn-campo--cor input[type="color"] {
    width: 46px;
    height: 28px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: none;
    cursor: pointer;
}
.bn-bt.ativo {
    border-color: var(--cor-marca, #e2507d);
    background: #fff0f4;
    color: #932546;
}

/*  (O pé do palco — `.bn-palco-pe`, `.bn-leitura`, `.bn-dica` — saiu em
    12/09/2026, a pedido do CW. O palco agora vai até a beira da caixa.)     */

/* ---------- painel ---------- */
.bn-painel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------- as duas abas ---------- */
.bn-abas {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}
.bn-abas button {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: .84rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
}
.bn-abas button:hover { background: #f1f5f9; }
.bn-abas button.on { background: var(--cor-marca, #e2507d); color: #fff; }

/*  A página fechada sai do fluxo, e não fica só transparente: os blocos dela
    têm altura, e escondê-los por opacidade deixaria um buraco no painel.    */
.bn-pag { display: none; }
.bn-pag.on {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bn-bloco {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 14px;
}
.bn-bloco[hidden] { display: none; }
.bn-bloco__tit {
    margin: 0 0 10px;
    font-size: .95rem;
    font-weight: 700;
    color: #1f2937;
}

/* ---------- cards que recolhem e reordenam ---------- */
/*  DOIS GESTOS, DOIS ALVOS: os pontinhos da esquerda arrastam, o resto do
    cabeçalho recolhe. Cada um com o seu cursor — é o cursor que conta o que
    aquele pedaço faz.                                                       */
.bn-bloco__tit--pega {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 22px;
    cursor: pointer;
    user-select: none;
}

/*  Os pontinhos são desenhados em CSS, e não escritos com um caractere: o ⠿ do
    braille resolve em fonte diferente em cada sistema, e num deles vira um
    retângulo vazio. Uma grade de pontos é a mesma coisa em toda parte.      */
.bn-bloco__pega {
    flex: 0 0 auto;
    width: 10px;
    height: 16px;
    background-image: radial-gradient(#c3cdd9 1.15px, transparent 1.2px);
    background-size: 5px 5px;
    background-position: 0 3px;
    cursor: grab;
    /*  Sem isto o navegador do celular entende o arrasto como rolagem e o card
        nunca sai do lugar.                                                  */
    touch-action: none;
}
.bn-bloco__pega:hover { background-image: radial-gradient(#94a3b8 1.15px, transparent 1.2px); }
.bn-bloco__pega:active { cursor: grabbing; }
.bn-bloco__tit--pega::after {
    content: "⌃";
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-30%) rotate(180deg);
    font-size: .8rem;
    color: #94a3b8;
    transition: transform .15s;
}
.bn-bloco.fechado .bn-bloco__tit--pega::after { transform: translateY(-30%) rotate(0deg); }

/*  Fechado: some tudo menos o próprio cabeçalho, e a margem dele vai junto —
    senão o card fechado fica com um vão embaixo do título.                  */
.bn-bloco.fechado > *:not(.bn-bloco__tit) { display: none; }
.bn-bloco.fechado .bn-bloco__tit { margin-bottom: 0; }

/*  O CARD LEVANTADO. Ele sai do fluxo e segue o ponteiro; `pointer-events:
    none` para não tapar a conta de onde ele deve cair, que é feita medindo os
    irmãos por baixo dele.                                                   */
.bn-bloco.arrastando {
    z-index: 60;
    pointer-events: none;
    cursor: grabbing;
    opacity: .92;
    border-color: var(--cor-marca, #e2507d);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .22);
    transform: rotate(-.4deg);
}

/*  E O RETÂNGULO QUE GUARDA O LUGAR. Ele responde à única pergunta do gesto:
    "se eu soltar agora, onde ele cai?".                                     */
.bn-bloco-vao {
    border: 2px dashed var(--cor-marca, #e2507d);
    border-radius: 12px;
    background: #fff0f4;
    box-sizing: border-box;
}
.bn-bloco.arrastando .bn-bloco__pega { cursor: grabbing; }

/*  Enquanto se arrasta, a página inteira para de selecionar texto e o cursor
    de agarrar acompanha o ponteiro mesmo fora da alça — sem isto o gesto pinta
    de azul metade do painel pelo caminho, e o cursor volta a ser seta assim
    que sai de cima dos pontinhos.                                           */
body.bn-arrastando { user-select: none; cursor: grabbing; }
.bn-bloco--fim { background: #f8fafc; }

/* ---------- zona de envio ---------- */
.bn-zona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 12px;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.bn-zona:hover,
.bn-zona.sobre {
    border-color: var(--cor-marca, #e2507d);
    background: #fff0f4;
}
.bn-zona__ico  { font-size: 1.7rem; line-height: 1; }
.bn-zona__sub  { font-size: .78rem; color: #64748b; }

/* ---------- arte carregada ---------- */
.bn-arte-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.bn-arte-linha img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f1f5f9;
}
.bn-dim { font-size: .78rem; color: #64748b; margin-bottom: 5px; }

/* ---------- controles ---------- */
.bn-campo { display: block; margin-bottom: 12px; }
.bn-campo:last-child { margin-bottom: 0; }
.bn-campo > span {
    display: flex;
    justify-content: space-between;
    font-size: .82rem;
    color: #475569;
    margin-bottom: 5px;
}
.bn-campo b { color: #1f2937; }
.bn-campo input[type="range"] {
    width: 100%;
    accent-color: var(--cor-marca, #e2507d);
}

/* ---------- cores ---------- */
.bn-cores {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.bn-cor {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: var(--c);
    cursor: pointer;
    padding: 0;
    transition: transform .12s, border-color .12s;
}
.bn-cor:hover { transform: scale(1.08); }
.bn-cor.ativo {
    border-color: var(--cor-marca, #e2507d);
    box-shadow: 0 0 0 3px rgba(226, 80, 125, .18);
}

/* ---------- o seletor de cor da casa ---------- */
/*  A caixa é montada pelo `../seletor-cores.js`, que é compartilhado com o
    simulador de camisa. O comportamento é dele; as REGRAS são de cada tela,
    porque a da camisa é escura e esta é clara — e o `mockup.css` dela é
    gerado por script (ver ../_fonte/LEIA.md), então não dá para pendurar as
    duas no mesmo arquivo.                                                   */
.bn-app .sim-cor {
    position: fixed;
    z-index: 70;
    width: 236px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 11px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .18);
}
.bn-app .sim-cor[hidden] { display: none; }

.bn-app .sim-cor-sv {
    position: relative;
    height: 132px;
    border-radius: 8px;
    cursor: crosshair;
    border: 1px solid #e2e8f0;
    touch-action: none;
    background:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, transparent),
        hsl(var(--h, 0) 100% 50%);
}
.bn-app .sim-cor-sv i {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 2px solid #fff;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .33), 0 1px 4px rgba(0, 0, 0, .33);
}

.bn-app .sim-cor-h {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 6px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: linear-gradient(to right,
        #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.bn-app .sim-cor-h::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .33), 0 1px 4px rgba(0, 0, 0, .33);
}
.bn-app .sim-cor-h::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .33), 0 1px 4px rgba(0, 0, 0, .33);
}

.bn-app .sim-cor-atalhos {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}
.bn-app .sim-cor-atalhos button {
    aspect-ratio: 1;
    padding: 0;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    transition: transform .12s, box-shadow .12s;
}
.bn-app .sim-cor-atalhos button:hover {
    transform: scale(1.16);
    box-shadow: 0 0 0 2px var(--cor-marca, #e2507d);
}

.bn-app .sim-cor-pe { display: flex; align-items: center; gap: 7px; }
.bn-app .sim-cor-pe .cresce { flex: 1; }
.bn-app .sim-cor-amostra {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}
.bn-app .sim-cor-hex {
    width: 88px;
    padding: 5px 7px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #1f2937;
    font: 12.5px/1 ui-monospace, "Cascadia Code", Consolas, monospace;
}
.bn-app .sim-cor-hex:focus { outline: none; border-color: var(--cor-marca, #e2507d); }

/*  O botão vem com as classes da camisa (`bt fino`), que não existem aqui —
    então quem o veste é a classe própria dele.                              */
.bn-app .sim-cor-ok {
    padding: 5px 12px;
    border: 1px solid var(--cor-marca, #e2507d);
    border-radius: 7px;
    background: var(--cor-marca, #e2507d);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

/* ---------- botões ---------- */
.bn-bt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .12s, border-color .12s;
}
.bn-bt:hover { background: #f1f5f9; }
.bn-bt--pequeno { padding: 4px 10px; font-size: .78rem; }
.bn-bt--fantasma { border-color: transparent; background: transparent; color: #475569; }
.bn-bt--fantasma:hover { background: #f1f5f9; }
.bn-bt--principal {
    width: 100%;
    background: var(--cor-marca, #e2507d);
    border-color: var(--cor-marca, #e2507d);
    color: #fff;
}
.bn-bt--principal:hover { background: var(--cor-marca-escura, #be2d59); }

/* ---------- erro ---------- */
.bn-erro {
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #991b1b;
    font-size: .85rem;
}
.bn-erro[hidden] { display: none; }

.bn-nota {
    margin: 10px 0 0;
    font-size: .78rem;
    line-height: 1.45;
    color: #64748b;
}
.bn-bloco--fim .bn-nota { margin: 0 0 12px; }

/* ---------- texto abaixo da janela ---------- */
/*  ELE NÃO MORA MAIS AQUI.
 *
 *  A trilha, o título, a explicação e o guia de cartões são a CASCA das páginas
 *  de simulador — iguais nesta e na da camisa —, e foram para `../sim3d.css`,
 *  que as duas carregam. As classes no HTML passaram de `bn-texto`/`bn-guia`
 *  para `s3-texto`/`s3-guia`.
 *
 *  Eram duas escritas do mesmo desenho, e já tinham divergido em quatro pontos
 *  (tamanho do h2, do ícone, do cartão e da coluna). Cada peça nova
 *  acrescentaria uma terceira cópia.
 *
 *  O que continua aqui é a JANELA: palco, painel, chapa e cores da caneca.  */

/* ---------- celular ---------- */
/*  Uma coluna, e o palco PRIMEIRO: quem abre no telefone veio ver a caneca, e
    um painel de controles antes dela empurraria a peça para fora da tela.   */
@media (max-width: 900px) {
    .bn-app {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .bn-palco { aspect-ratio: 1 / 1; min-height: 280px; }

    /*  E A CAIXA DESGRUDA. No computador o `sticky` mantém a peça à vista
        enquanto se rola atrás de um controle; num telefone, com a tela quase
        toda tomada por ela, grudada ela viraria uma tampa sobre o painel.    */
    .bn-palco-caixa { position: static; }

    /*  No telefone a barra do palco encolhe: em tela estreita ela comeria
        metade da caneca, que é justamente o que se veio ver. O pad sai — girar
        com o dedo na própria peça já faz o mesmo, e melhor.                 */
    .bn-fer-palco { top: 6px; left: 6px; gap: 4px; }
    .bn-pad { display: none; }
    .bn-bt-palco { padding: 5px 8px; font-size: .72rem; }

    /*  As quatro vistas ficam: num telefone elas valem MAIS do que no
        computador, porque girar com o dedo até achar o ângulo é trabalhoso. */
    /*  As vistas SOBEM no telefone: os controles agora ocupam o pe do palco, e
        em tela estreita os dois se atropelariam.                            */
    .bn-vistas { top: 6px; bottom: auto; }
    .bn-vistas button { padding: 5px 9px; font-size: .74rem; }
}