:root {
  --papel: #FBFAF7;
  --painel: #F4EFE6;
  --carta: #FFFFFF;
  --tinta: #12211F;
  --marca: #FF5A36;
  --marca-forte: #F04A27;
  --apoio: #0E5C55;
  --borda: #E3DCCF;
  --secundario: #63706E;
  --recessivo: #786B57;
  --traco: #C9C1B4;
  --anel: #A1937D;
  --tolerancia: #936300;
  --estouro: #B3261E;
  --sobre-escuro: #F4EFE6;
  --secundario-escuro: #9FB0AC;
  --feed-escuro: #000000;
  --feed-escuro-texto: #F5F5F5;
  --feed-escuro-apagado: #A8A8A8;
  --feed-escuro-botao: #363636;
  --feed-escuro-linha: #262626;
  --feed-claro: #FFFFFF;
  --feed-claro-texto: #0C1014;
  --feed-claro-apagado: #737373;
  --feed-claro-botao: #EFEFEF;
  --feed-claro-linha: #DBDBDB;
  --feed-ponto: #0095F6;
}
@font-face { font-family: "Inter"; src: url("Inter.woff2") format("woff2");
             font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter Reserva"; src: local("Arial"), local("Helvetica"), local("Roboto");
             size-adjust: 105.88%; ascent-override: 91.5%; descent-override: 22.78%; line-gap-override: 0%; }
@font-face { font-family: "Anton Reserva"; src: local("Arial"), local("Helvetica"), local("Roboto");
             size-adjust: 89.74%; ascent-override: 131.08%; descent-override: 36.67%; line-gap-override: 0%; }
@font-face { font-family: "Anton"; src: url("Anton-Regular.woff2") format("woff2");
             font-display: swap; }

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, "Inter Reserva", system-ui, sans-serif; color: var(--tinta);
       background: var(--papel); -webkit-font-smoothing: antialiased; }
/* a tela de trabalho tem altura FIXA, e não mínima: com `min-height` o body cresce
   atrás de um filho alto, e aí quem rola é a página inteira — o rodapé da banda sai
   da vista e a lista de campos, que era para rolar por dentro, para de rolar. A porta
   de entrada continua fora disto: lá o painel é curto e a página pode crescer. */
body.tela { height: 100vh; overflow: hidden; }
a { color: var(--apoio); } a:hover { color: var(--tinta); }

.barra { height: 52px; flex-shrink: 0; background: var(--tinta); color: var(--sobre-escuro);
         display: flex; align-items: center; gap: 24px; padding: 0 40px; }
.barra img { display: block; width: 22px; height: 22px; }
.marca { display: flex; align-items: center; gap: 9px; font-family: Anton, "Anton Reserva", Impact, sans-serif;
         font-size: 17px; letter-spacing: .10em; text-transform: uppercase; color: inherit; text-decoration: none; }
.barra .marca:hover { color: var(--sobre-escuro); }
.barra .marca:focus-visible { outline: 2px solid var(--papel); outline-offset: 4px; }
.risco { width: 1px; height: 20px; background: rgba(244, 239, 230, .24); }
.barra .fraco { font-size: 13px; color: var(--secundario-escuro); }
.barra .navegacao { display: flex; align-items: stretch; gap: 22px; align-self: stretch; }
.barra .item { display: flex; align-items: center; font-size: 13px; color: var(--secundario-escuro); text-decoration: none;
  border-bottom: 2px solid transparent; padding-top: 2px; }
.barra .item:hover { color: var(--sobre-escuro); }
.barra .item.ativo { color: var(--sobre-escuro); border-bottom-color: var(--marca); }
.barra .item:focus-visible, .barra .saldo:focus-visible, .conta-menu summary:focus-visible {
  outline: 2px solid var(--sobre-escuro); outline-offset: 3px; }
.barra .saldo { display: flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--secundario-escuro);
  text-decoration: none; border: 1px solid rgba(244, 239, 230, .22); border-radius: 99px; padding: 5px 12px; white-space: nowrap; }
.barra .saldo b { color: var(--sobre-escuro); font-weight: 600; font-variant-numeric: tabular-nums; }
.barra .saldo .docs { padding-left: 8px; margin-left: 3px; border-left: 1px solid rgba(244, 239, 230, .22); }
.barra .saldo:hover { border-color: var(--sobre-escuro); }
.conta-menu { position: relative; }
.conta-menu summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--secundario-escuro); }
.conta-menu summary::-webkit-details-marker { display: none; }
.conta-menu .iniciais { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px;
  font-weight: 600; letter-spacing: .04em; background: var(--sobre-escuro); color: var(--tinta); }
.lista-conta { position: absolute; right: 0; top: calc(100% + 12px); min-width: 260px; display: grid; padding: 6px; z-index: 20;
  background: var(--carta); color: var(--tinta); border: 1px solid var(--borda); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(18, 33, 31, .18); }
.lista-conta a, .lista-conta .quem { font-size: 13px; padding: 8px 10px; border-radius: 5px; color: var(--tinta); text-decoration: none; }
.lista-conta a:hover { background: var(--papel); }
.lista-conta .quem { font-size: 11px; color: var(--secundario); border-bottom: 1px solid var(--borda); border-radius: 0;
  margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.lista-conta .risco-lista { height: 1px; background: var(--borda); margin: 4px 0; }
.lista-conta .sair { color: var(--estouro); }
.lista-conta .so-no-celular { display: none; }
.lista-conta a.atual { background: var(--papel); box-shadow: inset 3px 0 0 var(--marca); }
.saldo-area { display: flex; align-items: center; gap: 10px; }
.barra .novo-cel { display: none; padding: 6px 12px; border-radius: 99px; background: var(--marca); color: var(--tinta);
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.barra .saldo.zerado { border-color: var(--marca); color: var(--sobre-escuro); }
.barra .saldo.zerado b { color: var(--marca); }
.barra .saldo .acao { padding-left: 8px; margin-left: 3px; border-left: 1px solid rgba(244, 239, 230, .22);
  color: var(--marca); font-weight: 600; }
.barra .barra-criar { padding: 7px 16px; border-radius: 999px; background: var(--marca); color: var(--tinta);
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.barra .barra-criar:hover { background: var(--marca-forte); color: var(--tinta); }
.menu-publico { position: relative; display: none; }
.menu-publico summary { list-style: none; display: grid; place-items: center; cursor: pointer; color: var(--sobre-escuro); }
.menu-publico summary::-webkit-details-marker { display: none; }
.menu-publico[open] summary { color: var(--marca); }
@media (max-width: 1023px) {
  .barra { padding: 0 16px; gap: 10px; }
  .barra .navegacao, .barra .saldo .docs, .barra .saldo .rotulo-saldo, .barra .some-no-celular,
  .barra .marca .nome-marca { display: none; }
  .barra .novo-cel { display: inline-flex; }
  .barra .barra-criar { padding: 12px 14px; font-size: 13px; line-height: 1.5; }
  .menu-publico { display: block; }
  .lista-conta .so-no-celular { display: block; }
  .lista-conta .risco-lista.so-no-celular { display: block; }
  .conta-menu .lista-conta, .menu-publico .lista-conta { position: fixed; left: 0; right: 0; top: 52px; min-width: 0;
    border-radius: 0; border-left: 0; border-right: 0; padding: 6px 10px 10px; }
  .conta-menu .lista-conta a, .menu-publico .lista-conta a { font-size: 15px; padding: 11px 8px; }
}
.empurra { flex-grow: 1; }

.corpo { display: flex; flex-grow: 1; overflow: hidden; }

/* a coluna é o recibo: o que cada estágio produziu, e não um menu */
.medidas { width: 128px; flex-shrink: 0; padding: 28px 20px 0 0; display: flex;
           flex-direction: column; gap: 22px; align-items: flex-end;
           border-right: 1px solid var(--borda); }
.medida { text-align: right; }
.medida .valor { font-family: Anton, "Anton Reserva", Impact, sans-serif; font-size: 30px; line-height: 1; }
.medida .rotulo { font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
                  color: var(--secundario); margin-top: 3px; }
.medida.vazia .valor, .medida.vazia .rotulo { color: var(--recessivo); }
.medida.vazia .valor:empty::after { content: ""; display: inline-block; width: 30px;
                                    height: 4px; margin: 13px 0; background: currentColor; }
/* o risco marca o estágio em que se está: sem ele a coluna é só um placar, e não diz
   de onde a próxima ação sai */
.medida.agora { position: relative; }
.medida.agora::before { content: ""; position: absolute; right: -21px; top: 6px;
                        width: 3px; height: 30px; background: var(--marca); }
.medida.agora .valor { font-size: 44px; color: var(--tinta); }
.medida.agora .rotulo { font-size: 10px; font-weight: 600; color: var(--tinta); }
/* o que já passou continua legível, mas para de disputar atenção com o estágio atual */
/* tom, e não `opacity: .42`, por duas razões que apontam para o mesmo lado. A primeira
   é medida: sobre o rótulo, que já é pequeno e apagado, .42 derruba o contraste para
   ~1,6:1 — foi o que a oficina do canvas tirou de quinze medidas em sete artboards,
   trocando pelo `recessivo` (4,54:1, e a conta está em `test_web.TestContraste`). A segunda é de
   significado: o
   `DESIGN.md` reserva .42 para "o que ainda NÃO foi produzido", e `caracteres` e
   `ângulos` são justamente o que já foi. Quem os apaga por opacidade diz o contrário
   do que eles são. */
.medida.antes .valor, .medida.antes .rotulo { color: var(--recessivo); }

.conteudo { flex-grow: 1; padding: 28px 40px 0 28px; display: flex; flex-direction: column;
            gap: 10px; overflow: hidden; }

.banda { display: flex; align-items: center; gap: 12px; padding: 11px 16px;
         border: 1px solid var(--borda); border-radius: 4px; background: var(--papel); }
.banda .nome { font-size: 13px; font-weight: 600; width: 128px; flex-shrink: 0; }
.banda .dica { font-size: 12px; color: var(--recessivo); }
.banda.aberta { display: block; border-color: var(--tinta); background: var(--carta);
                padding: 18px 22px; }
.banda .titulo { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.banda .titulo .nome { width: auto; font-size: 14px; }
.banda .titulo .dica { font-size: 12px; color: var(--secundario); }
.banda .fim { flex-grow: 1; }

/* a banda do ângulo é a única que cresce: a lista e os trechos precisam de altura.
   `align-items` volta a `stretch` porque `.banda` o deixou em `center` para a banda
   FECHADA, que é uma linha só — herdado num container `column`, ele centraliza o
   título e a lista no meio da largura, e a banda inteira sai desalinhada do resto.
   `min-height: 0` é o que deixa ela CEDER: sem isso o mínimo de um item flex é o
   conteúdo, e as duas bandas de baixo saem empurradas para fora da tela. */
.banda.cresce { flex-grow: 1; min-height: 0; overflow: hidden;
                display: flex; flex-direction: column; align-items: stretch; }

.alvo { border: 1px dashed var(--traco); border-radius: 4px; background: var(--papel);
        height: 148px; display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 10px; cursor: pointer; }
.alvo .grande { font-size: 13px; color: var(--tinta); }
.alvo .limite { font-size: 11px; color: var(--secundario); }
.alvo input[type="file"] { display: none; }
::placeholder { color: var(--secundario); opacity: 1; }
.alvo .acao { color: var(--apoio); font-weight: 500; }
.alvo:hover, .alvo.arrastando, .alvo:has(input:focus-visible) {
  border-style: solid; border-color: var(--tinta); background: var(--carta); }
.alvo:hover .acao, .alvo.arrastando .acao { color: var(--tinta); }
button:not(.botao-fraco, .acao-secundaria):hover { background: var(--marca-forte); }
.botao-fraco:hover { background: var(--papel); border-color: var(--tinta); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: var(--marca); outline-offset: 0; }
.rotulo-porta { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600;
                color: var(--tinta); }
.foto-propria .confirma { font-size: 11.5px; }
.enviar-foto { display: inline-flex; align-self: flex-start; cursor: pointer; font-size: 12px;
               padding: 7px 12px; border: 1px solid var(--borda); border-radius: 4px;
               background: var(--carta); }
.enviar-foto .acao { color: var(--apoio); font-weight: 500; }
.enviar-foto input[type="file"] { display: none; }

.sua-marca { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
             padding: 9px 16px; border: 1px solid var(--borda); border-radius: 4px;
             background: var(--carta); }
.sua-marca > .nome { font-size: 13px; font-weight: 600; width: 128px; flex-shrink: 0; }
.sua-marca > .dica { font-size: 11px; color: var(--secundario); }
.sua-marca > .fim { flex-grow: 1; }
.sua-marca > a { font-size: 12px; font-weight: 500; }
.sua-marca .guardada { padding: 3px 10px; border-radius: 999px; background: var(--apoio); font-size: 12px;
  font-weight: 600; color: var(--carta); }
.avatar-marca { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
                background: var(--painel); border: 1px solid var(--borda); display: flex;
                align-items: center; justify-content: center; font-size: 10px; font-weight: 600;
                color: var(--recessivo); }
.avatar-marca.grande { width: 28px; height: 28px; font-size: 10px; }
.avatar-marca img { width: 100%; height: 100%; object-fit: contain; background: var(--carta); }
.avatar-marca.mais { background: none; border: 1px dashed var(--anel); font-size: 16px;
                     font-weight: 400; color: var(--apoio); }
.seletor-marca > summary { list-style: none; height: 36px; min-width: 300px; display: flex;
                           align-items: center; gap: 10px; padding: 0 10px; cursor: pointer;
                           border: 1px solid var(--borda); border-radius: 4px; background: var(--papel); }
.seletor-marca > summary::-webkit-details-marker { display: none; }
.seletor-marca > summary .nome-marca { font-size: 13px; font-weight: 500; }
.seletor-marca > summary .arroba { font-size: 12px; color: var(--secundario); flex-grow: 1; }
.seletor-marca > summary .seta { color: var(--secundario); }
.seletor-marca > summary:hover { border-color: var(--tinta); }
.seletor-marca[open] > summary { border-color: var(--marca); }
.seletor-marca[open] > summary .seta { transform: rotate(180deg); }
.lista-marcas { position: absolute; top: 52px; left: 158px; width: 380px; max-width: calc(100% - 32px);
                z-index: 5; display: flex; flex-direction: column; padding: 6px;
                border: 1px solid var(--tinta); border-radius: 4px; background: var(--carta);
                box-shadow: 0 10px 28px rgba(18, 33, 31, .12); }
.lista-marcas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-marcas form { margin: 0; }
.lista-marcas .item-marca { width: 100%; height: auto; margin: 0; display: flex; align-items: center;
                            gap: 10px; padding: 9px 10px; border: 0; border-radius: 3px;
                            background: none; font: inherit; color: var(--tinta); text-align: left;
                            text-decoration: none; cursor: pointer; }
.lista-marcas .item-marca:hover, .lista-marcas .item-marca.escolhida { background: var(--painel); }
.lista-marcas .textos { display: flex; flex-direction: column; gap: 1px; flex-grow: 1; min-width: 0; }
.lista-marcas .nome-marca { font-size: 13px; font-weight: 500; }
.lista-marcas .escolhida .nome-marca { font-weight: 600; }
.lista-marcas .arroba { font-size: 11px; color: var(--secundario); }
.lista-marcas .visto { width: 16px; flex-shrink: 0; color: var(--tinta); }
.lista-marcas .risco-lista { height: 1px; background: var(--borda); margin: 4px 0; }
.lista-marcas .nova .nome-marca { color: var(--apoio); flex-grow: 1; }
.lista-marcas .cota { font-size: 11px; color: var(--recessivo); }
.ficha-marca { flex-basis: 100%; display: grid; grid-template-columns: 240px 200px minmax(0, 1fr) auto;
               gap: 12px 18px; align-items: end; margin: 6px 0 4px; padding-top: 14px;
               border-top: 1px solid var(--borda); }
.ficha-marca .titulo-ficha { grid-column: 1 / -1; font-size: 13px; font-weight: 600; }
.ficha-marca .campo { display: flex; flex-direction: column; gap: 6px; }
.ficha-marca .rotulo { font-size: 12px; color: var(--secundario); }
.ficha-marca .dica { font-size: 11px; color: var(--secundario); line-height: 1.45; }
.ficha-marca input[type="text"] { font: inherit; font-size: 13px; height: 32px; padding: 0 10px;
  border: 1px solid var(--borda); border-radius: 4px; background: var(--papel); color: var(--tinta); }
.ficha-marca .verificado { font-size: 12px; color: var(--tinta); display: flex; gap: 6px; align-items: center; }
.ficha-marca .logo { position: relative; display: flex; gap: 8px; align-items: center; cursor: pointer;
                    font-size: 12px; }
.ficha-marca .logo input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ficha-marca .bolinha { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--papel);
  border: 1px solid var(--borda); display: grid; place-items: center; }
.ficha-marca .bolinha img { width: 100%; height: 100%; object-fit: contain; }
.ficha-marca .logo-erro { grid-column: 1 / -1; margin: 0; padding: 8px 10px; border-left: 3px solid var(--estouro);
  background: var(--carta); font-size: 12.5px; line-height: 1.45; color: var(--estouro); }
.ficha-marca .acao { color: var(--apoio); font-weight: 500; }
.ficha-marca .logo:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.ficha-marca .botoes { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; }
.ficha-marca .botoes a { font-size: 12px; font-weight: 500; }
.aplicar-marca, .marca-aplicada { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 14px;
  border: 1px solid var(--apoio); border-left-width: 4px; border-radius: 4px; background: var(--carta); font-size: 13px; color: var(--tinta); }
.aplicar-marca p { margin: 0; }
.lista-aplicar { display: flex; flex-direction: column; gap: 4px; }
.lista-aplicar label { display: flex; align-items: center; gap: 8px; }
.lista-aplicar input { margin: 0; accent-color: var(--tinta); }
.botoes-aplicar { display: flex; align-items: center; gap: 14px; }
.aplicar-marca .dica { font-size: 11px; color: var(--secundario); }
.cores-marca { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center;
  padding-top: 12px; border-top: 1px dashed var(--borda); }
.cores-marca .campo { flex: 1 1 320px; }
.pares { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cor { display: flex; gap: 8px; align-items: center; padding: 4px 10px 4px 4px; border: 1px solid var(--borda);
  border-radius: 6px; background: var(--papel); cursor: pointer; }
.cor input[type="color"] { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; }
.cor input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cor input[type="color"]::-webkit-color-swatch { border: 1px solid var(--borda); border-radius: 4px; }
.cor:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.cor .textos { display: grid; line-height: 1.2; }
.cor .papel-da-cor { font-size: 11px; color: var(--secundario); }
.cor .hex { font-family: ui-monospace, monospace; font-size: 12px; color: var(--tinta); }
.da-logo { font: inherit; font-size: 12px; font-weight: 500; color: var(--apoio); background: none; border: 0; padding: 4px 2px; cursor: pointer; }
.da-logo:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.previa { display: flex; gap: 8px; }
.previa .mini { width: 76px; aspect-ratio: 4 / 5; border-radius: 4px; border: 1px solid var(--borda); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 6px; font-size: 7px; line-height: 1.15; }
.previa .mini b { font-family: Anton, "Anton Reserva", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 8.5px; }
.previa .mini em { font-style: normal; text-decoration: underline; }
.previa .capa { background: linear-gradient(180deg, var(--borda) 0%, var(--secundario) 45%, var(--tinta) 80%); color: var(--papel); }
.previa .capa em { color: var(--papel); }
.previa .capa .chapeu { align-self: flex-start; max-width: 100%; overflow: hidden; white-space: nowrap; background: var(--papel);
  color: var(--tinta); border-radius: 99px; padding: 1px 4px; font-size: 5.5px; font-weight: 700; }
.previa .meio { background: var(--papel); color: var(--tinta); justify-content: flex-start; padding: 0 0 6px; }
.previa .meio .foto { height: 46%; background: linear-gradient(135deg, var(--borda), var(--secundario)); border-bottom: 2px solid var(--tinta); }
.previa .meio b, .previa .meio .linha { margin-inline: 6px; }
.previa .meio .linha { height: 2px; border-radius: 2px; background: var(--borda); }
.previa .meio .linha.curta { width: 55%; }
.previa .fim { background: var(--papel); color: var(--tinta); justify-content: center; align-items: center; text-align: center; gap: 6px; }
.previa .botao-mini { background: var(--tinta); color: var(--papel); border-radius: 99px; padding: 2px 6px; font-size: 5.5px;
  font-weight: 700; text-transform: uppercase; }

.cores-carrossel { margin-top: 10px; font-size: 12px; color: var(--secundario); }
.cores-carrossel summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; cursor: pointer; list-style: none; }
.cores-carrossel summary::-webkit-details-marker { display: none; }
.cores-carrossel summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.cores-carrossel .bolas { display: inline-flex; gap: 3px; }
.cores-carrossel .bolas i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--borda); display: inline-block; }
.cores-carrossel .bolas i.neutra { background: linear-gradient(90deg, var(--tinta) 50%, var(--papel) 50%); }
.cores-carrossel .origem { color: var(--tinta); font-weight: 500; }
.cores-carrossel .trocar { color: var(--apoio); font-weight: 500; text-decoration: underline; }
.cores-carrossel[open] .trocar { text-decoration: none; }
.painel-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 10px 0 4px; }
.opcoes-marca { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao-marca { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--carta); cursor: pointer; color: var(--tinta); }
.opcao-marca:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.opcao-marca input { margin: 0; accent-color: var(--tinta); }
.opcao-marca small { color: var(--secundario); }
.opcao-marca .bolas { display: inline-flex; gap: 3px; }
.opcao-marca .bolas i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--borda); display: inline-block; }
.opcao-marca .bolas i.neutra { background: linear-gradient(90deg, var(--tinta) 50%, var(--papel) 50%); }
.manter-cores { display: flex; align-items: center; gap: 6px; color: var(--tinta); }
.painel-cores { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-block: 10px 12px; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: 6px; background: var(--papel); }
.painel-cores .dica { font-size: 11px; color: var(--secundario); flex-basis: 100%; }

/* a prateleira: os carrosséis que já começaram. Sem ela o F5 perdia o caminho de volta */
.prateleira { display: flex; gap: 12px; flex-wrap: wrap; }
.capa { width: 152px; border: 1px solid var(--borda); border-radius: 4px;
        background: var(--carta); overflow: hidden; text-decoration: none;
        color: var(--tinta); display: block; }
.capa .lombada { height: 62px; background: var(--tinta); display: flex; align-items: flex-end;
                 padding: 8px; }
.capa .lombada span { font-family: Anton, "Anton Reserva", Impact, sans-serif; font-size: 12px; line-height: 1.1;
                      color: var(--sobre-escuro); text-transform: uppercase; }
.capa .pe { padding: 8px 10px; }
.capa .pe .selo { font-family: ui-monospace, monospace; font-size: 10px;
                  color: var(--secundario); margin-top: 5px; }

.escolha { display: flex; gap: 20px; flex-grow: 1; overflow: hidden; }
.escolha > input { position: absolute; opacity: 0; pointer-events: none; }
.angulos { width: 420px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
           overflow-y: auto; }
.angulos label { border: 1px solid var(--borda); border-radius: 4px; padding: 11px 13px;
                 background: var(--carta); cursor: pointer; display: block; }
.angulos label .qual { font-size: 12px; font-weight: 600; line-height: 1.3; }
.angulos label .resumo { font-size: 11px; color: var(--secundario); line-height: 1.4;
                         margin-top: 4px; }
.angulos label.livre { border-style: dashed; border-color: var(--traco);
                       background: var(--papel); }
.angulos label.livre input { width: 100%; margin-top: 8px; height: 34px; padding: 0 9px;
                             font-family: inherit; font-size: 12px; color: var(--tinta);
                             background: var(--carta); border: 1px solid var(--borda);
                             border-radius: 4px; }

.lado { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
.lado textarea { display: none; flex-grow: 1; width: 100%; resize: none;
                 border: 1px solid var(--borda); border-radius: 4px; background: var(--painel);
                 padding: 12px 14px; font-family: inherit; font-size: 11.5px;
                 line-height: 1.55; color: var(--tinta); }
.referencia { margin-top: 12px; border: 1px solid var(--borda); border-radius: 4px;
              background: var(--carta); padding: 10px 12px; }
.referencia summary { font-size: 12px; font-weight: 600; cursor: pointer; }
.referencia summary .dica { font-weight: 400; margin-left: 6px; }
.referencia .grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                     gap: 8px; margin-top: 10px; }
.referencia label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px;
                    color: var(--secundario); }
.referencia label.largo { grid-column: 1 / -1; }
.referencia label.meio { grid-column: span 2; }
.referencia input { height: 30px; padding: 0 8px; font-family: inherit; font-size: 12px;
                    color: var(--tinta); background: var(--papel);
                    border: 1px solid var(--borda); border-radius: 4px; min-width: 0; }
.legenda-post { display: flex; flex-direction: column; gap: 6px; flex-basis: 100%;
           text-align: left; align-items: stretch; }
.legenda-post .fila { display: flex; align-items: center; gap: 8px; }
.legenda-post textarea { width: 100%; resize: vertical; border: 1px solid var(--borda);
                    border-radius: 4px; background: var(--painel); padding: 10px 12px;
                    font-family: inherit; font-size: 12px; line-height: 1.55;
                    color: var(--tinta); white-space: pre-wrap; }
.legenda-post .copiar { height: auto; margin: 0; padding: 5px 12px; font-size: 11.5px; }
.legenda-post > input { height: 32px; padding: 0 10px; font-family: inherit; font-size: 12px;
                   color: var(--tinta); background: var(--painel);
                   border: 1px solid var(--borda); border-radius: 4px; }
.documento { max-width: 720px; margin: 32px auto; padding: 0 20px; font-size: 14px;
             line-height: 1.6; }
.documento h1 { font-size: 26px; } .documento h2 { font-size: 17px; margin-top: 28px; }
.tabela-planos { overflow-x: auto; border: 1px solid var(--borda); border-radius: 6px; }
.tabela-planos table { border-collapse: collapse; width: 100%; font-size: 13px; }
.tabela-planos th, .tabela-planos td { padding: 8px 12px; border-bottom: 1px solid var(--borda);
                                    text-align: left; white-space: nowrap; }
.tabela-planos tr:last-child td { border-bottom: 0; }
.tabela-planos .n { text-align: right; font-variant-numeric: tabular-nums; }
.aviso-planos { margin-top: 20px; font-weight: 600; }
.pagina-conta { max-width: 960px; width: 100%; margin: 24px auto; padding: 0 20px;
         display: flex; flex-direction: column; gap: 10px; }
.pagina-conta .dados { display: grid; grid-template-columns: 90px 1fr; gap: 8px 16px;
                margin: 12px 0 0; font-size: 13px; }
.pagina-conta .dados dt { font-weight: 600; } .pagina-conta .dados dd { margin: 0; }
.pagina-conta .perigo { border-color: var(--estouro); }
.pagina-conta .colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                  gap: 16px; font-size: 13px; }
.botao-perigo { background: var(--estouro); color: #fff; border: 0; border-radius: 4px;
                padding: 8px 14px; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.confirmar-apagar { display: flex; flex-direction: column; gap: 8px; max-width: 360px;
                    margin-top: 16px; font-size: 13px; }
.confirmar-apagar input { height: 36px; padding: 0 10px; font: inherit;
                          border: 1px solid var(--borda); border-radius: 4px; }
.confirmar-apagar .fila { display: flex; align-items: center; gap: 16px; }
.trocar-senha { display: flex; flex-direction: column; gap: 12px; max-width: 360px;
                margin-top: 16px; font-size: 13px; }
.trocar-senha .fila { display: flex; align-items: center; gap: 16px; }
.trocar-senha button { margin-top: 0; padding: 0 18px; }
.aceite { margin: 12px 0; }
.pedir { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.pedir button { height: auto; margin: 0; padding: 9px 18px; font-size: 12.5px; }
.pedir .quantos { width: 52px; height: 30px; padding: 0 9px; font-family: ui-monospace, monospace;
                  font-size: 12px; color: var(--tinta); background: var(--carta);
                  border: 1px solid var(--borda); border-radius: 4px; }
.pedir .fraco { font-size: 11px; color: var(--secundario); }

/* o job em curso: uma barra que respira, e não um spinner que mente sobre progresso.

   O `display: none` é NOSSO, e não o do htmx. O dele é `opacity: 0`, que esconde a
   tinta e guarda o espaço — e, pior, só existe depois de o script carregar: com o
   htmx bloqueado ou ainda a caminho, a tela diz "lendo a fonte…" o tempo todo, sem
   nada estar acontecendo. Aqui o padrão é sumir, e quem aparece é o `.htmx-request`. */
.trabalhando { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.trabalhando .pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--marca);
                      animation: pulso 1.1s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .trabalhando .pulso { animation: none; } }
/* DEPOIS de `.trabalhando`, e não antes: as duas regras têm a mesma especificidade, e
   a de baixo é a que vale — invertida, o indicador nasce visível */
.faixa-trabalho { padding: 12px 18px; border-bottom: 1px solid var(--borda); background: var(--painel); }
.enquanto-trabalha, .sem-trabalho { display: contents; }
.enquanto-trabalha > .oficina { opacity: .6; }
.enquanto-trabalha .vazio { animation: pulso 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .enquanto-trabalha .vazio { animation: none; } }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: flex; }

/* a porta: sem coluna, tudo no eixo. Antes de entrar não há trabalho para medir */
.porta { flex-grow: 1; display: flex; flex-direction: column; align-items: center;
         justify-content: center; gap: 30px; padding: 40px 20px; }
.porta .selo { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.porta .selo img { width: 72px; height: 72px; display: block; }
.porta h1 { margin: 0; font-family: Anton, "Anton Reserva", Impact, sans-serif; font-size: 56px;
            line-height: 1; text-transform: uppercase; letter-spacing: .06em; }
.porta .promessa { font-size: 14px; color: var(--secundario); }
.erro-pagina .codigo { margin: 0; font-family: Anton, "Anton Reserva", Impact, sans-serif; font-size: 64px;
                       line-height: 1; letter-spacing: .04em; color: var(--tinta); }
.miolo-erro { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; }
.miolo-erro h2 { margin: 0; font-size: 18px; }
.miolo-erro p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--secundario); }
.miolo-erro .botao-primario { align-self: flex-start; text-decoration: none; margin-top: 6px; }

.cartao { width: 460px; max-width: 100%; border: 1px solid var(--tinta); border-radius: 4px;
          background: var(--carta); overflow: hidden; }
.abas { display: flex; border-bottom: 1px solid var(--borda); }
.abas a { flex-grow: 1; padding: 13px 0; text-align: center; font-size: 12.5px;
          text-decoration: none; color: var(--secundario); }
.abas a.atual { font-weight: 600; color: var(--tinta); box-shadow: inset 0 -2px 0 0 var(--marca); }
.cartao form { padding: 24px 28px 26px; display: flex; flex-direction: column; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 12px; font-weight: 600; }
.campo input { height: 44px; padding: 0 12px; font-family: inherit; font-size: 14px;
               color: var(--tinta); background: var(--papel); border: 1px solid var(--borda);
               border-radius: 4px; }
.campo .regra { font-size: 11px; color: var(--secundario); }
.chamada { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.chamada + .regra { margin: 0 0 16px; font-size: 12px; color: var(--secundario); }
/* o rótulo é TINTA sobre a MARCA: branco sobre o laranja dá 3,10 e reprova em AA */
button { height: 46px; margin-top: 4px; font-family: inherit; font-size: 13px;
         font-weight: 600; color: var(--tinta); background: var(--marca); border: 0;
         border-radius: 4px; cursor: pointer; }

.confira { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px; font-size: 14px; line-height: 1.55; }
.confira p { margin: 0; }
.confira h2 { margin: 0; font-size: 20px; }
.confira-icone { font-size: 30px; line-height: 1; color: var(--marca); }
.confira-dica { padding: 10px 12px; border-radius: 4px; background: var(--painel); font-size: 13px; }
.cartao .confira-reenvio { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 4px 0 0; padding: 0; }
.confira-remetente { white-space: nowrap; }
.confira-reenvio button:disabled { cursor: not-allowed; opacity: .55; }
.confira-espera, .confira-outro { font-size: 12px; color: var(--secundario); }
@media (max-width: 599px) {
  .porta { justify-content: flex-start; gap: 18px; padding: 24px 16px; }
  .porta .selo { flex-direction: row; gap: 10px; }
  .porta .selo img { width: 36px; height: 36px; }
  .porta h1 { font-size: 30px; }
  .porta .promessa { display: none; }
  .confira { padding: 20px; }
  .escolha { flex-direction: column; overflow: visible; }
  .angulos { width: auto; overflow: visible; }
  .lado { overflow: visible; }
  .lado textarea { min-height: 220px; }
}

/* --------------------------------------------- a revisão, o passo 4 da issue 62

   Tudo aqui é seletor de CLASSE. Id existe só como alvo de htmx: um seletor de id
   nesta folha reprovaria `test_o_chrome_nao_escreve_cor_literal`, que varre a linha
   atrás de sustenido sem `var(--`, e ele está certo em varrer assim — cor literal e
   seletor de id chegam pelo mesmo descuido de copiar CSS de fora. */

.barra .selo { font-family: ui-monospace, monospace; font-size: 11px;
               color: var(--secundario-escuro); }
.barra .claro { color: var(--sobre-escuro); }
.medida .parte { color: var(--recessivo); }

/* a banda da revisão não tem respiro próprio: cabeça, miolo e rodapé têm o deles, e é
   isso que deixa o filete da cabeça atravessar a banda de ponta a ponta */
.banda.aberta.folha { padding: 0; }
.cabeca { padding: 14px 16px 12px; border-bottom: 1px solid var(--borda); flex-shrink: 0; }
.miolo { flex-grow: 1; min-height: 0; display: flex; overflow: hidden; }

/* o ponto de veredicto: cada estado tem FORMA além de cor, senão quem não distingue
   verde de ocre fica sem a leitura da esteira */
.ponto { width: 9px; height: 9px; border-radius: 50%; display: inline-block;
         position: relative; flex-shrink: 0; }
.ponto.coube { background: var(--apoio); }
.ponto.encolheu { background: var(--tolerancia); }
.ponto.encolheu::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4px;
                         height: 1px; background: var(--carta); }
.ponto.estourou { background: var(--estouro); }
.ponto.estourou::after { content: "×"; position: absolute; inset: 0; color: var(--carta);
                         font-size: 9px; line-height: 9px; text-align: center; }
.ponto.sem-card { border: 1px solid var(--traco); }
/* o card existe e a medida não está na mão (o job já foi esquecido): tinta e borda,
   nunca a rampa — a rampa significa encaixe, e aqui não houve encaixe medido */
.ponto.feito { background: var(--tinta); }

.legenda { display: flex; align-items: center; gap: 11px; }
.legenda .par { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px;
                color: var(--secundario); }

.tira { display: flex; gap: 8px; align-items: flex-start; }
.tile { width: 84px; flex-shrink: 0; text-decoration: none; display: block; }
.miolo { display: contents; }
.tile img, .tile .vazio { display: block; width: 84px; height: 105px; border-radius: 3px;
                          border: 1px solid var(--borda); object-fit: cover;
                          background: var(--painel); }
.tile .vazio { border-style: dashed; border-color: var(--traco); background: var(--papel);
               font-size: 9px; color: var(--recessivo); text-align: center; line-height: 1.3;
               display: flex; align-items: center; justify-content: center; }
/* a borda de 2px é o "é este" do sistema; o padding compensa para o tile não pular */
.tile.emfoco img, .tile.emfoco .vazio { border: 2px solid var(--marca); }
.tile .pe { display: flex; align-items: center; gap: 4px; margin-top: 5px;
            justify-content: center; }
.ordem { font-family: ui-monospace, monospace; font-size: 10px; color: var(--secundario); }
.tile.emfoco .ordem { color: var(--tinta); font-weight: 700; }

.cabeca .titulo { flex-wrap: wrap; row-gap: 6px; }
.bandeja { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; font-size: 11px; color: var(--secundario); }
.bandeja .apagado { color: var(--recessivo); font-weight: 600; }
.bandeja a { font-weight: 600; }
.bandeja.pronta { color: var(--apoio); font-weight: 600; }

.oficina { flex-grow: 1; min-height: 0; display: grid;
           grid-template-columns: 112px minmax(0, 1fr) minmax(340px, 440px); }
.rolo { flex-direction: column; align-items: center; gap: 14px; min-height: 0; padding: 14px 0;
        overflow-y: auto; border-right: 1px solid var(--borda); background: var(--papel); }
.palco { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center;
         gap: 10px; padding: 14px 20px 16px; overflow: hidden; }
.palco-barra { width: 100%; max-width: 540px; display: flex; align-items: baseline; gap: 10px; }
.posicao { font-family: ui-monospace, monospace; font-size: 12px; color: var(--secundario); }
.posicao b { color: var(--tinta); }
.palco-barra .dica { font-size: 12px; color: var(--secundario); }
.passo { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--borda);
         border-radius: 50%; background: var(--carta); color: var(--tinta); font-size: 17px;
         line-height: 1; text-decoration: none; align-self: center; }
a.passo:hover { border-color: var(--tinta); }
span.passo { color: var(--traco); }
.palco .cartao-slide { flex: 1 1 0; min-height: 0; width: auto; max-width: 100%; max-height: 675px; }
.palco[data-modo="feed"] { overflow-y: auto; }
.palco[data-modo="feed"] > :is(.cartao-slide, .ver-real), .palco:not([data-modo="feed"]) > .feed { display: none; }
.palco > .feed { flex-shrink: 0; }
.feed-rodape { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; font-size: 12px; }
.painel { min-width: 0; min-height: 0; display: flex; flex-direction: column;
          border-left: 1px solid var(--borda); background: var(--carta); }
.painel-rola { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 14px 18px;
               display: flex; flex-direction: column; gap: 16px; }
.slide { display: contents; }
.grupo-painel { display: flex; flex-direction: column; gap: 10px; }
.grupo-painel + .grupo-painel, .slide + .grupo-painel { padding-top: 16px; border-top: 1px solid var(--borda); }
.rotulo-grupo { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
                text-transform: uppercase; color: var(--recessivo); }
/* 4:5 é a proporção do card, e o `min-height` é o piso: numa tela baixa a prévia
   encolhe e a busca da foto continua alcançável, em vez de o card empurrar tudo para
   fora da coluna. `contain` guarda a proporção da peça mesmo com a caixa apertada */
.cartao-slide { border: 1px solid var(--borda); border-radius: 3px; background: var(--painel);
                aspect-ratio: 4 / 5; min-height: 130px; display: flex; align-items: center;
                justify-content: center; overflow: hidden; }
.cartao-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cartao-slide .vazio { font-size: 11px; color: var(--recessivo); }

.campos { display: flex; flex-direction: column; gap: 11px; }

.grupo { display: flex; flex-direction: column; gap: 4px; }
.etiqueta { font-size: 11px; font-weight: 600; color: var(--tinta); }
/* o campo é um BURACO no painel, não uma caixa sobre ele: fundo dois degraus abaixo */
.campo-caixa { width: 100%; padding: 8px 10px; border: 1px solid var(--borda);
               border-radius: 4px; background: var(--painel); font-family: inherit;
               font-size: 12px; line-height: 1.4; color: var(--tinta); resize: vertical; }
.campo-caixa:focus { outline: none; border-color: var(--tinta); }
.campo-caixa.automatico { background: var(--papel); color: var(--secundario); }
.nota { margin: 4px 0 0; font-size: 10px; color: var(--secundario); line-height: 1.4; }
.nota.erro { color: var(--estouro); }
/* `margin-top: auto` no lugar de um espaçador que cresce: com um `flex-grow` em
   branco a coluna fica mais alta que o painel e nasce uma segunda barra de rolagem
   para empurrar uma linha de texto */
.nota.rodape { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--borda); }
/* a escolha pendente do seletor. Usa `tolerancia`, e não `estouro`: nada está errado,
   só ainda não vale — é a mesma faixa do meio que a régua dos campos usa */
.nota.pendente { color: var(--tolerancia); }
/* o invólucro só existe para o `hx-swap-oob` do seletor ter um alvo; `contents` deixa
   os filhos participarem da coluna como participavam quando estavam soltos */
.formato-escolhido { display: contents; }
.botao-primario.trocar-modelo { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
body:has(.trocar-modelo) .acoes .botao-primario { background: var(--carta); box-shadow: inset 0 0 0 1px var(--tinta); }
.botao-primario.trocar-modelo small { font-size: 12px; font-weight: 400; }
.ajustes { border: 1px solid var(--borda); border-radius: 4px; background: var(--papel);
           padding: 8px 10px; flex-shrink: 0; }
.ajustes p { margin: 0; font-size: 11px; color: var(--recessivo); line-height: 1.45; }

.linha { display: block; }
.linha .topo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.linha.ruim .campo-caixa { border-color: var(--estouro); }
.lista-itens { display: flex; flex-direction: column; gap: 8px; }
.lista-itens > .topo { display: flex; align-items: baseline; gap: 8px; }
.item-lista { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px;
              border: 1px solid var(--borda); border-radius: 4px; background: var(--carta); }
.item-topo { display: flex; align-items: center; gap: 4px; }
.botao-item { width: 32px; height: 32px; margin: 0; padding: 0; display: grid; place-items: center;
              color: var(--tinta); background: var(--carta); border: 1px solid var(--borda);
              border-radius: 4px; }
.botao-item:hover { background: var(--papel); border-color: var(--tinta); }
.botao-item:disabled { color: var(--recessivo); opacity: .45; cursor: not-allowed; }
.botao-item:disabled:hover { background: var(--carta); border-color: var(--borda); }
.adicionar-item { align-self: flex-start; }
.adicionar-item:disabled { opacity: .45; cursor: not-allowed; }
.ligar-numero { margin-top: 6px; }
@media (max-width: 599px) {
  .botao-item { width: 44px; height: 44px; }
  .adicionar-item { align-self: stretch; min-height: 44px; }
}
/* a régua de três estados: a mesma rampa do encaixe do card e do saldo, e nada mais */
.regua { width: 84px; height: 7px; border: 1px solid var(--tinta); border-radius: 2px;
         background: var(--carta); overflow: hidden; flex-shrink: 0; }
.regua .preenche { display: block; height: 100%; }
.preenche.ok { background: var(--apoio); }
.preenche.tolerancia { background: var(--tolerancia); }
.preenche.estouro { background: var(--estouro); }
.conta { font-family: ui-monospace, monospace; font-size: 10px; color: var(--secundario);
         text-align: right; }
.conta.tolerancia { color: var(--tolerancia); }
.conta.estouro { color: var(--estouro); font-weight: 600; }

.acoes { flex-shrink: 0; padding: 12px 18px 14px; border-top: 1px solid var(--borda);
         display: flex; flex-direction: column; gap: 10px; background: var(--carta); }
.acoes .fila { flex-wrap: wrap; }
.acoes .botao-primario { flex-grow: 1; }
.pedido { display: flex; flex-direction: column; gap: 6px; }
.pedido .botao-fraco { align-self: flex-start; }
@media (max-width: 1023px) {
  .oficina { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); grid-template-rows: auto minmax(0, 1fr); }
  .rolo { grid-column: 1 / -1; flex-direction: row; gap: 6px; padding: 8px 14px; overflow-x: auto; overflow-y: hidden;
          border-right: 0; border-bottom: 1px solid var(--borda); }
  .rolo .tile { width: auto; padding: 4px 10px; border: 1px solid var(--borda); border-radius: 999px; background: var(--carta); }
  .rolo .tile.emfoco { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
  .rolo .tile img, .rolo .tile .vazio { display: none; }
  .rolo .tile .pe { margin: 0; }
  .cabeca .legenda { display: none; }
}
@media (max-width: 599px) {
  .oficina { display: flex; flex-direction: column; padding: 0 16px; }
  .rolo { padding: 10px 0; border-bottom: 0; background: none; }
  .palco { padding: 4px 0 12px; overflow: visible; }
  .palco-barra .dica { display: none; }
  .palco .cartao-slide { flex: none; width: 100%; max-height: none; }
  .painel { border-left: 0; border-top: 1px solid var(--borda); background: none; }
  .painel-rola { overflow: visible; padding: 14px 0; }
  .barra-rodape { position: sticky; bottom: 0; margin-top: auto; z-index: 10; padding: 10px 16px; border-top: 1px solid var(--borda);
    background: var(--carta); box-shadow: 0 -8px 16px -12px rgba(18, 33, 31, .35); }
  body.teclado-aberto .barra-rodape[data-some-no-teclado] { display: none; }
}
.dupla { display: flex; gap: 8px; }
.fila { display: flex; gap: 8px; align-items: center; }
.botao-primario { height: auto; padding: 9px 16px; font-size: 12px; font-weight: 600;
                  color: var(--tinta); background: var(--marca); border: 0;
                  border-radius: 4px; cursor: pointer; margin: 0; }
.botao-fraco { height: auto; margin: 0; padding: 8px 16px; font-family: inherit;
               font-size: 12px; font-weight: 400; color: var(--tinta);
               background: var(--carta); border: 1px solid var(--borda); border-radius: 4px;
               cursor: pointer; text-decoration: none; text-align: center; }
.acao-secundaria { height: auto; margin: 0; padding: 0; font-family: inherit;
                   font-size: 11px; font-weight: 500; color: var(--apoio);
                   background: none; border: 0; cursor: pointer; text-decoration: none; }
.acao-secundaria:hover { color: var(--tinta); }
.risco-claro { width: 1px; height: 12px; background: var(--borda); }
/* invólucro só para o `hx-swap-oob` ter um id onde pegar: sem `contents` os dois nós
   do `versoes.html.j2` viravam um item só da `.fila` e perdiam o gap dos irmãos */
.versoes { display: contents; }

.carimbo { font-family: ui-monospace, monospace; font-size: 11px; color: var(--secundario); }
.publica { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
           margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--borda); }
.baixar { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.baixar .dica { font-size: 12px; color: var(--recessivo); }
.baixar .fila { flex-wrap: wrap; }
.baixar .fila button { white-space: nowrap; }
.publica-com-previa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
                      margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--borda); }
.publica-com-previa .publica { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 1024px) {
  .publica-com-previa { grid-template-columns: 380px minmax(0, 1fr); gap: 32px; align-items: start; }
  .publica-com-previa .feed { position: sticky; top: 16px; }
}

.feed { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; margin: 0; }
.feed-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.feed-tema, .palco-modos { display: inline-flex; padding: 2px; border-radius: 6px; background: var(--painel); }
.feed-tema[hidden], .palco-modos[hidden] { display: none; }
.feed-tema button, .palco-modos button { height: auto; margin: 0; padding: 4px 10px; border: 0; border-radius: 4px; background: none; font-family: inherit;
                    font-size: 11.5px; font-weight: 600; color: var(--secundario); cursor: pointer; }
.feed-tema button[aria-pressed="true"], .palco-modos button[aria-pressed="true"] { background: var(--carta); color: var(--tinta); box-shadow: 0 1px 2px rgba(18, 33, 31, .15); }
.feed-post { overflow: hidden; border: 1px solid var(--feed-escuro-linha); border-radius: 6px; background: var(--feed-escuro);
             color: var(--feed-escuro-texto); font-size: 13px; line-height: 1.4; }
.feed[data-tema="claro"] .feed-post { border-color: var(--feed-claro-linha); background: var(--feed-claro); color: var(--feed-claro-texto); }
.feed-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.feed-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
               background: var(--tinta); color: var(--sobre-escuro); font-family: Anton, "Anton Reserva", Impact, sans-serif; font-size: 13px;
               box-shadow: 0 0 0 2px var(--feed-escuro), 0 0 0 3.5px var(--marca); }
.feed[data-tema="claro"] .feed-avatar { box-shadow: 0 0 0 2px var(--feed-claro), 0 0 0 3.5px var(--marca); }
.feed-quem { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.feed-quem b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-quem span, .feed-mais { color: var(--feed-escuro-apagado); }
.feed-quem span { font-size: 11.5px; }
.feed[data-tema="claro"] :is(.feed-quem span, .feed-mais) { color: var(--feed-claro-apagado); }
.feed-seguir { margin-left: auto; padding: 6px 14px; border-radius: 8px; background: var(--feed-escuro-botao); font-weight: 600; }
.feed[data-tema="claro"] .feed-seguir { background: var(--feed-claro-botao); }
.feed-icone { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2;
              stroke-linecap: round; stroke-linejoin: round; }
.feed-topo .feed-icone { fill: currentColor; stroke: none; }
.feed-janela { position: relative; }
.feed-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.feed-trilho::-webkit-scrollbar { display: none; }
.feed-trilho:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.feed-trilho > * { flex: 0 0 100%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.feed-trilho img { display: block; width: 100%; height: auto; }
.feed-vazio { display: grid; place-items: center; background: var(--painel); color: var(--recessivo); font-size: 12px; text-align: center; }
button.feed-seta { position: absolute; top: 50%; width: 28px; height: 28px; margin: -14px 0 0; padding: 0; border: 0; border-radius: 50%;
                   background: rgba(255, 255, 255, .9); color: var(--tinta); font-size: 18px; line-height: 1; cursor: pointer;
                   box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.feed-seta:disabled { opacity: 0; pointer-events: none; }
.feed-antes { left: 10px; }
.feed-depois { right: 10px; }
.feed-contador { position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .65);
                 color: var(--carta); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.feed-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; padding: 10px 12px 0; }
.feed-pontos { display: flex; flex-basis: 100%; justify-content: center; gap: 4px; margin-bottom: 10px; }
.feed-pontos span { width: 6px; height: 6px; border-radius: 50%; background: var(--feed-escuro-apagado); opacity: .6; }
.feed[data-tema="claro"] .feed-pontos span { background: var(--feed-claro-apagado); }
.feed .feed-pontos span.atual { background: var(--feed-ponto); opacity: 1; }
.feed-salvar { margin-left: auto; }
.feed-legenda { margin: 0; padding: 8px 12px 12px; white-space: pre-line; overflow-wrap: anywhere; }
.antes-do-mais { margin: 0; padding: 8px 10px; border-radius: 4px; background: var(--painel); color: var(--secundario);
                 font-size: 12px; line-height: 1.45; }
.antes-do-mais mark { padding: 0 2px; background: color-mix(in srgb, var(--marca) 18%, transparent); color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .feed-trilho { scroll-behavior: auto; } }
.confirma { display: flex; gap: 8px; align-items: flex-start; max-width: 520px;
            font-size: 12px; line-height: 1.45; color: var(--tinta); }
.confirma input { margin: 2px 0 0; accent-color: var(--estouro); }
.botao-primario.apagado { display: inline-block; align-self: flex-start;
                          background: var(--painel); color: var(--recessivo);
                          border: 1px solid var(--borda); cursor: default; }
.nota { margin: 0; max-width: 420px; padding: 12px 14px; border: 1px solid var(--borda);
        border-radius: 4px; background: var(--painel); font-size: 12px; line-height: 1.5; }
.nota strong { font-weight: 600; }
.janela { border: 1px solid var(--tinta); border-radius: 4px; background: var(--carta);
          padding: 0; max-width: 620px; width: 92vw; color: var(--tinta); }
.janela::backdrop { background: var(--tinta); opacity: .38; }
.janela-miolo { padding: 18px 22px 22px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.tabela th { text-align: left; font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
             color: var(--secundario); font-weight: 400; padding: 0 10px 6px 0; }
.tabela td { padding: 5px 10px 5px 0; border-top: 1px solid var(--borda);
             color: var(--tinta); }

.conteudo:not(:has(.cresce)) { overflow-y: auto; padding-bottom: 28px; }
.conteudo:not(:has(.cresce)) > * { flex-shrink: 0; }

/* --------------------------------------------- banda 1, arquivo ou ideia, em abas */

.banda.banda-arquivo { display: flex; flex-direction: column; align-items: stretch; gap: 16px;
                       padding: 18px 22px 22px; }
.cabeca-arquivo { display: flex; align-items: center; gap: 12px; }
.cabeca-arquivo .nome { width: auto; font-size: 14px; }
.cabeca-arquivo .dica { color: var(--secundario); }
.nome-da-banda { display: flex; align-items: center; gap: 12px; }
.rotulo-nome { font-size: 12px; color: var(--secundario); }
.caixa-nome { height: 32px; width: 300px; display: flex; align-items: center; gap: 8px;
              padding: 0 10px; border: 1px solid var(--borda); border-radius: 4px;
              background: var(--papel); color: var(--recessivo); }
.caixa-nome:focus-within { border-color: var(--tinta); }
.caixa-nome input { flex-grow: 1; min-width: 0; border: 0; padding: 0; background: none;
                    font-family: inherit; font-size: 13px; font-weight: 500; color: var(--tinta); }
.caixa-nome input:focus-visible { outline: none; }
.caixa-nome input::placeholder { color: var(--recessivo); font-weight: 400; }
.lapis { flex-shrink: 0; color: var(--recessivo); }
.salvo { font-size: 11px; color: var(--recessivo); min-width: 64px; }

.abas { display: flex; border-bottom: 1px solid var(--borda); }
.aba { height: auto; margin: 0; padding: 10px 18px; display: flex; align-items: center; gap: 8px;
       font-family: inherit; font-size: 13px; font-weight: 400; color: var(--secundario);
       background: none; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap; }
button.aba:hover { background: var(--papel); color: var(--tinta); }
.aba[aria-selected="true"] { font-weight: 600; color: var(--tinta);
                             box-shadow: inset 0 -2px 0 0 var(--marca); }
.aba:focus-visible { outline-offset: -2px; }
.aba .conta { font-size: 11px; font-weight: 600; color: var(--tinta); background: var(--painel);
              border-radius: 10px; padding: 1px 7px; }

.grade-arquivo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px;
                 align-items: start; }
.lista-arquivo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lado-arquivo { display: flex; flex-direction: column; gap: 12px; padding-left: 28px;
                border-left: 1px solid var(--borda); }
.nota-arquivo { font-size: 11px; color: var(--secundario); line-height: 1.45; }
.nota-arquivo.perto-do-fim { color: var(--marca-forte); }
.titulo-lado { font-size: 13px; font-weight: 600; }
.texto-lado { margin: 0; font-size: 12px; color: var(--secundario); line-height: 1.5; }
.botao-cheio { width: 100%; height: 42px; margin: 0; display: flex; align-items: center;
               justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; }
.botao-cheio small, .botoes-lado small { font-size: 11px; font-weight: 400; }
.botao-cheio:disabled { opacity: .42; cursor: not-allowed; }
button.botao-cheio:disabled:hover { background: var(--marca); }
.botoes-lado { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.botoes-lado .botao-fraco { height: 38px; display: flex; align-items: center; justify-content: center;
                            gap: 6px; font-size: 13px; white-space: nowrap; }
.botoes-lado .botao-fraco small { color: var(--secundario); }
.lado-arquivo form { display: contents; }

.radio { appearance: none; width: 16px; height: 16px; margin: 0; flex-shrink: 0;
         border: 1.5px solid var(--anel); border-radius: 50%; background: var(--carta);
         cursor: pointer; }
.radio:checked { border: 5px solid var(--tinta); }

.linha-rascunho { display: grid; align-items: center; gap: 14px; padding: 12px 14px;
                  grid-template-columns: 16px minmax(0, 1.2fr) minmax(0, 1.4fr) 140px 150px;
                  border: 1px solid var(--borda); border-radius: 4px; background: var(--carta); }
.linha-rascunho:has(.radio:checked) { border-color: var(--tinta); background: var(--papel); }
.quem { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.linha-nome { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nome-na-lista { min-width: 0; width: 100%; max-width: 260px; padding: 1px 3px; margin: -1px -3px;
                 border: 1px solid transparent; border-radius: 3px; background: none;
                 font-family: inherit; font-size: 13px; font-weight: 600; color: var(--tinta);
                 text-overflow: ellipsis; }
.nome-na-lista:hover, .nome-na-lista:focus { border-color: var(--borda); background: var(--carta); }
.detalhe, .ideia-da-linha { display: block; font-size: 11px; color: var(--secundario); white-space: nowrap;
                            overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ideia-da-linha { font-size: 12px; }
.ideia-da-linha.vazia { color: var(--recessivo); }
.etapa { justify-self: start; white-space: nowrap; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
         color: var(--apoio); background: var(--painel); border-radius: 3px; padding: 2px 6px; }
.fim-da-linha { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.fim-da-linha .quando { font-size: 11px; color: var(--recessivo); }
.descartar { height: auto; margin: 0; padding: 0; font-family: inherit; font-size: 11px;
             font-weight: 400; color: var(--secundario); background: none; border: 0;
             text-decoration: underline; cursor: pointer; }
button.descartar:hover { background: none; color: var(--tinta); }

.linha-enviado { display: flex; align-items: center; gap: 14px; padding: 12px 14px;
                 border: 1px solid var(--borda); border-radius: 4px; background: var(--carta);
                 color: var(--secundario); cursor: pointer; }
.linha-enviado:has(.radio:checked) { border-color: var(--tinta); background: var(--papel);
                                     color: var(--tinta); }
.linha-enviado .quem { flex-grow: 1; gap: 2px; }
.nome-arquivo { font-size: 13px; color: var(--tinta); }
.linha-enviado:has(.radio:checked) .nome-arquivo { font-weight: 600; }
.ideias { font-size: 11px; color: var(--secundario); white-space: nowrap; }
.ideias.tem { color: var(--apoio); font-weight: 500; }

.banda-arquivo .alvo { height: 168px; }
.icone-alvo { color: var(--secundario); }
.campo-ideia { height: 40px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 4px;
               background: var(--painel); font-family: inherit; font-size: 13px;
               color: var(--tinta); }
.campo-ideia:focus { background: var(--carta); border-color: var(--tinta); }
.texto-ideia { height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.45;
               background: var(--carta); border-color: var(--tinta); }
.opcional { font-weight: 400; color: var(--secundario); }
.lado-arquivo .rotulo-porta { margin-bottom: 0; }
.sem-arquivo { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
               border-radius: 4px; background: var(--painel); font-size: 12px; line-height: 1.5; }
.sem-arquivo .icone { flex-shrink: 0; margin-top: 1px; color: var(--tolerancia); }

.contador { display: flex; align-items: center; gap: 10px; }
.rotulo-contador { font-size: 12px; color: var(--secundario); }
.passos { display: flex; align-items: center; height: 32px; border: 1px solid var(--borda);
          border-radius: 4px; }
.passo { width: 30px; height: 30px; margin: 0; padding: 0; font-family: inherit; font-size: 15px;
         font-weight: 400; color: var(--secundario); background: none; border-radius: 0; }
button.passo:hover { background: var(--painel); color: var(--tinta); }
.quantos-slides { width: 30px; height: 30px; padding: 0; border: 0; text-align: center;
                  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--tinta);
                  background: none; -moz-appearance: textfield; appearance: textfield; }
.quantos-slides::-webkit-inner-spin-button,
.quantos-slides::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.pedir button, .pedir .fraco { white-space: nowrap; }

@media (max-width: 1023px) {
  .grade-arquivo { grid-template-columns: minmax(0, 1fr); }
  .lado-arquivo { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--borda); }
  .linha-rascunho { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .linha-rascunho .ideia-da-linha, .linha-rascunho .etapa { display: none; }
  .ficha-marca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  body.tela { overflow-x: clip; }
  body.tela { height: auto; overflow-y: visible; }
  .corpo, .conteudo, .conteudo:not(:has(.cresce)), .banda.cresce { overflow: visible; }
  .corpo { flex-direction: column; }
  .barra { gap: 12px; padding: 0 16px; }
  .barra .fraco { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .medidas { width: auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between;
             gap: 12px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--borda); }
  .medida { text-align: left; }
  .medida .valor, .medida.agora .valor { font-size: 22px; }
  .medida.agora::before { display: none; }
  .conteudo { padding: 16px; }
  .banda { flex-wrap: wrap; }
  .banda .nome { width: auto; }
  .banda.aberta { padding: 16px; }
  .banda.cresce, .banda.banda-arquivo, .banda.aberta.compra { flex-wrap: nowrap; }
  .abas { overflow-x: auto; }
  .nome-da-banda { flex-wrap: wrap; }
  .caixa-nome { width: 100%; }
  .sua-marca > .nome { width: auto; }
  .seletor-marca > summary { min-width: 0; }
  .lista-marcas { left: 16px; width: auto; right: 16px; max-width: none; }
  .ficha-marca { grid-template-columns: minmax(0, 1fr); }
  .pedir { flex-wrap: wrap; }
}

/* a página de planos e a compra */
.vp { max-width: 1180px; width: 100%; margin: 0 auto; padding: 44px 40px 56px;
      display: flex; flex-direction: column; gap: 44px; font-size: 14px; line-height: 1.5; }
.vp p { margin: 0; }
.vp h1, .vp h2 { font-family: Anton, "Anton Reserva", Impact, sans-serif; font-weight: 400; margin: 0; text-wrap: balance; }
.vp-topo { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.vp-topo h1 { font-size: clamp(34px, 5vw, 46px); line-height: 1; letter-spacing: .01em; }
.vp-rotulo { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--recessivo); }
.vp-a-partir { font-size: 18px; font-weight: 500; }
.vp-nota { font-size: 13px; color: var(--secundario); max-width: 72ch; }
.vp-subtitulo.vp-subtitulo { font-family: inherit; font-size: 17px; font-weight: 600; }
.vp-secao { display: flex; flex-direction: column; gap: 14px; }

.vp-cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
              align-items: stretch; }
.vp-cartao { position: relative; display: flex; flex-direction: column; gap: 14px;
             padding: 20px 18px 18px; background: var(--carta); border: 1px solid var(--borda);
             border-radius: 4px; }
.vp-cartao.vp-destaque { border: 2px solid var(--marca); padding: 19px 17px 17px; }
.vp-cartao h2 { font-family: inherit; font-size: 15px; font-weight: 600; }
.vp-selo { position: absolute; top: -11px; left: 16px; right: 16px; padding: 3px 8px;
           background: var(--marca); color: var(--tinta); border-radius: 2px; text-align: center;
           font-size: 11px; font-weight: 600; }
.vp-publico { font-size: 12px; color: var(--secundario); min-height: 36px; }
.vp-preco { display: flex; align-items: baseline; gap: 6px; }
.vp-preco b { font-family: Anton, "Anton Reserva", Impact, sans-serif; font-weight: 400; font-size: 38px;
              line-height: 1; font-variant-numeric: tabular-nums; }
.vp-preco span, .vp-por { font-size: 12px; color: var(--secundario); }
.vp-numeros { display: flex; flex-direction: column; gap: 8px; padding-block: 12px;
              border-block: 1px solid var(--borda); }
.vp-numeros div { display: flex; gap: 10px; align-items: baseline; }
.vp-numeros strong { font-family: Anton, "Anton Reserva", Impact, sans-serif; font-weight: 400; font-size: 22px; line-height: 1; }
.vp-numeros span { font-size: 13px; line-height: 1.3; }
.vp-numeros small { display: block; font-size: 11px; color: var(--secundario); }
.vp-fim { flex-grow: 1; }
.vp-cartao form, .vp-pacote form, .vp-rodape form { margin: 0; }
.vp-botao { width: 100%; height: auto; margin: 0; padding: 11px 14px; background: var(--painel);
            color: var(--tinta); }
.vp-botao.vp-forte { background: var(--marca); }
a.vp-botao { display: block; box-sizing: border-box; font-size: 13px; font-weight: 600; text-align: center;
             text-decoration: none; border-radius: 4px; }
.vp-outro-meio { margin: 0; }
.vp-botao.vp-linha { background: var(--carta); border: 1px solid var(--tinta); }
button.vp-botao.vp-linha:hover, button.vp-botao:not(.vp-forte):hover { background: var(--painel); }
.vp-garantia { margin-top: -28px !important; text-align: center; font-size: 13px; color: var(--secundario); }

.vp-avulso { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: center;
             padding: 20px 22px; background: var(--painel); border-radius: 4px; }
.vp-avulso-texto { display: flex; flex-direction: column; gap: 4px; }
.vp-pacotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vp-pacote { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
             background: var(--carta); border: 1px solid var(--borda); border-radius: 4px; }
.vp-pacote-topo { display: flex; flex-direction: column; gap: 2px; }
.vp-pacote-topo b { font-family: Anton, "Anton Reserva", Impact, sans-serif; font-weight: 400; font-size: 22px; }
.vp-micro { font-size: 11px; line-height: 1.4; color: var(--secundario); text-align: center; }

.vp-inclui { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--carta);
             border: 1px solid var(--borda); border-radius: 4px; }
.vp-inclui div { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
                 border-right: 1px solid var(--borda); }
.vp-inclui div:last-child { border-right: 0; }
.vp-inclui strong { font-family: Anton, "Anton Reserva", Impact, sans-serif; font-weight: 400; font-size: 26px; line-height: 1; }
.vp-inclui span { font-size: 12px; color: var(--secundario); }

.vp-vitrine-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.vp-abas { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-aba { height: auto; margin: 0; padding: 6px 10px; font-size: 13px; font-weight: 400;
          color: var(--tinta); background: var(--carta); border: 1px solid var(--borda); border-radius: 2px; }
button.vp-aba:hover { background: var(--painel); }
.vp-aba[aria-selected="true"], button.vp-aba[aria-selected="true"]:hover {
  background: var(--tinta); color: var(--sobre-escuro); border-color: var(--tinta); }
.vp-exemplo { display: flex; flex-direction: column; gap: 10px; }
.vp-exemplo[hidden] { display: none; }
.vp-fita { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 50px) / 6); gap: 10px;
           overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.vp-fita img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 3px;
               background: var(--painel); scroll-snap-align: start; }
.vp-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vp-tres div { display: flex; flex-direction: column; gap: 4px; }
.vp-tres h3 { margin: 0; font-size: 15px; font-weight: 600; }

.vp-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.vp-faq details { padding: 12px 0; border-bottom: 1px solid var(--borda); }
.vp-faq summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer;
                  font-weight: 600; list-style: none; }
.vp-faq summary::-webkit-details-marker { display: none; }
.vp-faq summary::after { content: "+"; color: var(--secundario); }
.vp-faq details[open] summary::after { content: "–"; }
.vp-faq details p { margin-top: 6px; font-size: 13px; color: var(--secundario); }

.vp-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
             padding: 20px 24px; background: var(--tinta); color: var(--sobre-escuro); border-radius: 4px; }
.vp-rodape-titulo { font-weight: 600; }
.vp-rodape-nota { font-size: 13px; color: var(--secundario-escuro); }
.vp-rodape a { color: var(--sobre-escuro); }
.vp-rodape .vp-botao { width: auto; padding: 12px 20px; }
.vp-links { font-size: 12px; }

.banda.aberta.compra { display: flex; flex-direction: column; align-items: stretch; gap: 14px;
                        text-align: left; }
.compra .titulo { margin-bottom: 0; }
.compra .dados { margin: 0; }
.compra-marca { margin: 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
                color: var(--recessivo); }
.compra-titulo { margin: 0; font-family: Anton, "Anton Reserva", Impact, sans-serif; font-weight: 400; font-size: 34px;
                 line-height: 1.05; }
.compra-texto { margin: 0; font-size: 13px; line-height: 1.5; color: var(--secundario); max-width: 60ch; }
.compra-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0; }
.compra-acao button { margin: 0; padding: 0 22px; }
.compra-acao .botao-primario { display: inline-block; padding: 13px 20px; font-size: 13px;
                               text-decoration: none; }
.compra-acao form { margin: 0; }
.compra-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.compra-cpf-cnpj { max-width: 360px; }
.compra-meios { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.compra-meios legend { padding: 0; margin-bottom: 8px; }
.compra-meio { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--borda);
               border-radius: 4px; background: var(--carta); color: var(--secundario); cursor: pointer; }
.compra-meio:has(.radio:checked) { border-color: var(--tinta); background: var(--papel); color: var(--tinta); }
.compra-meio-nome { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; font-size: 13px;
                    color: var(--tinta); }
.compra-meio-nome small { font-size: 11px; color: var(--secundario); }
.compra-recomendado { margin-left: 6px; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-style: normal;
                      letter-spacing: .1em; text-transform: uppercase; color: var(--apoio); background: var(--painel); }
.compra-meio-preco { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--tinta); }
.banda.aberta.compra-ok { border-color: var(--apoio); }
.compra-ok .compra-marca { color: var(--apoio); }
.banda.aberta.compra-falhou { border-color: var(--tolerancia); }
.compra-espera { display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 12.5px;
                 background: var(--painel); border-radius: 4px; }
.compra-pulso { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--marca);
                animation: pulso 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .compra-pulso { animation: none; } }
.conta-cobranca { width: auto; margin-top: 12px; }

@media (max-width: 1023px) {
  .vp-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .vp-avulso { grid-template-columns: minmax(0, 1fr); }
  .vp-inclui { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-inclui div:nth-child(2) { border-right: 0; }
  .vp-inclui div:nth-child(-n+2) { border-bottom: 1px solid var(--borda); }
  .vp-fita { grid-auto-columns: calc((100% - 30px) / 4); }
}

@media (max-width: 599px) {
  .vp { padding: 28px 16px 40px; gap: 36px; }
  .vp-cartoes, .vp-pacotes, .vp-tres, .vp-faq { grid-template-columns: minmax(0, 1fr); }
  .vp-garantia { margin-top: -20px !important; }
  .vp-inclui { grid-template-columns: minmax(0, 1fr); }
  .vp-inclui div { border-right: 0; border-bottom: 1px solid var(--borda); }
  .vp-inclui div:last-child { border-bottom: 0; }
  .vp-fita { grid-auto-columns: 62%; }
  .vp-rodape .vp-botao { width: 100%; }
  .vp-rodape form { width: 100%; }
  .compra-titulo { font-size: 28px; }
  .pagina-conta .dados { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .pagina-conta .banda .titulo { flex-wrap: wrap; }
}
.vp-seu-plano { padding: 11px 14px; border-radius: 4px; background: var(--painel); text-align: center;
                font-weight: 600; }
a.vp-botao { display: block; border-radius: 4px; font-size: 13px; font-weight: 600; text-align: center;
             text-decoration: none; }

/* Meus carrosséis */
.pagina-biblioteca { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 28px 32px 56px; display: grid; gap: 16px; align-content: start; }
.topo-biblioteca { display: flex; align-items: center; gap: 14px; }
.topo-biblioteca h1 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.topo-biblioteca .fim { flex: 1; }
.botao-biblioteca { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 6px;
  font-size: 13px; font-weight: 600; text-decoration: none; background: var(--marca); color: var(--tinta); border: 1px solid var(--marca); }
.botao-biblioteca:hover { background: var(--marca-forte); color: var(--tinta); }
.botao-biblioteca.linha { background: var(--carta); border-color: var(--tinta); }
button.botao-biblioteca { height: auto; margin: 0; font-family: inherit; cursor: pointer; }
.botao-biblioteca.linha:hover { background: var(--painel); }
.estante { display: grid; gap: 14px; }
.filtros-biblioteca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.filtros-biblioteca .fim { flex: 1; }
.marcas-biblioteca { display: flex; flex-wrap: wrap; gap: 6px; }
.marcas-biblioteca .filtro { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--borda);
  background: var(--carta); color: var(--tinta); font-size: 13px; text-decoration: none; }
.marcas-biblioteca .filtro small { font-size: 11px; opacity: .7; }
.marcas-biblioteca .filtro.ligado { background: var(--tinta); color: var(--sobre-escuro); border-color: var(--tinta); }
.bola { width: 14px; height: 14px; border-radius: 50%; display: inline-block; background: var(--traco); flex-shrink: 0; }
.estados-biblioteca { display: inline-flex; border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; background: var(--carta); }
.estados-biblioteca a { font-size: 13px; padding: 6px 12px; color: var(--secundario); text-decoration: none; border-right: 1px solid var(--borda); }
.estados-biblioteca a:last-child { border-right: 0; }
.estados-biblioteca a.ligado { background: var(--painel); color: var(--tinta); font-weight: 600; }
.busca-biblioteca input { font: inherit; font-size: 13px; padding: 7px 11px; border: 1px solid var(--borda); border-radius: 6px; background: var(--carta);
  color: var(--tinta); width: 220px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contagem-biblioteca { margin: 0; font-size: 12px; color: var(--secundario); }
.grade-biblioteca { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px 16px; }
.card-biblioteca { display: flex; flex-direction: column; gap: 7px; color: var(--tinta); text-decoration: none; }
.card-biblioteca:focus-visible { outline: 2px solid var(--marca); outline-offset: 4px; border-radius: 6px; }
.capa-biblioteca { position: relative; display: block; }
.capa-biblioteca img, .capa-biblioteca .sem-capa { width: 100%; aspect-ratio: 4 / 5; border-radius: 6px; border: 1px solid var(--borda); display: block; object-fit: cover; }
.capa-biblioteca .sem-capa { display: grid; place-items: center; border-style: dashed; border-color: var(--traco); background: var(--carta);
  font-size: 12px; color: var(--secundario); }
.card-biblioteca:hover img { box-shadow: 0 8px 20px rgba(18, 33, 31, .18); }
.card-biblioteca b { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.meta-biblioteca { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--secundario); }
.estado-biblioteca { align-self: flex-start; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 2px 8px; }
.estado-biblioteca.pronto { background: var(--painel); color: var(--apoio); }
.estado-biblioteca.atualizar { background: var(--painel); color: var(--tolerancia); }
.estado-biblioteca.rascunho { background: var(--painel); color: var(--secundario); }
.duplicar-painel { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 8px; background: var(--papel); }
.duplicar-painel input { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; background: var(--carta); color: var(--tinta); }
.nota-painel { font-size: 12px; color: var(--secundario); }
.mais-biblioteca { justify-self: center; }
.item-biblioteca { position: relative; min-width: 0; }
.texto-biblioteca { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.slides-no-estado { font-weight: 500; }
.faixa-filtros { display: flex; align-items: center; gap: 8px; }
.marca-celular { display: none; }
.estados-biblioteca a small { font-size: 11px; opacity: .75; }
.busca-biblioteca { position: relative; }
.busca-biblioteca .lupa { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--secundario); pointer-events: none; }
.busca-biblioteca input { padding-left: 34px; }
.mais-item { position: absolute; top: 8px; right: 8px; z-index: 2; }
.mais-item > summary { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--borda); border-radius: 4px;
  background: var(--carta); color: var(--tinta); list-style: none; cursor: pointer; }
.mais-item > summary::-webkit-details-marker, .marca-celular > summary::-webkit-details-marker { display: none; }
.mais-item[open] > summary { border-color: var(--tinta); }
.mais-item[open] { z-index: 21; }
.menu-biblioteca { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; width: max-content; min-width: 230px; padding: 4px;
  background: var(--carta); border: 1px solid var(--tinta); border-radius: 4px; box-shadow: 0 10px 24px rgba(18, 33, 31, .16); }
.menu-biblioteca form { margin: 0; }
.menu-biblioteca a, .menu-biblioteca button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; margin: 0; padding: 0 12px;
  border: 0; border-radius: 0; background: none; color: var(--tinta); font: inherit; font-size: 13px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.menu-biblioteca > * + * { border-top: 1px solid var(--borda); }
.menu-biblioteca a:hover, .menu-biblioteca button:hover { background: var(--painel); }
.menu-biblioteca a[aria-current="true"] { font-weight: 700; }
.menu-biblioteca .perigo { color: var(--estouro); }
.cabeca-painel { display: flex; align-items: flex-start; gap: 6px; }
.volta-painel { display: none; }
.mais-item.mais-painel { position: relative; top: auto; right: auto; }
.rotulo-celular { display: none; }
.painel-biblioteca:empty { display: none; }
.gaveta-biblioteca { position: fixed; top: 52px; right: 0; bottom: 0; width: min(470px, 100%); z-index: 30; overflow-y: auto; display: grid;
  gap: 16px; align-content: start; padding: 22px 24px; background: var(--carta); border-left: 1px solid var(--borda);
  box-shadow: -18px 0 40px rgba(18, 33, 31, .14); }
.gaveta-biblioteca h2 { flex: 1; min-width: 0; margin: 0; padding-top: 6px; font-size: 19px; }
.fecha-painel { flex-shrink: 0; width: 32px; height: 32px; margin: 0; border: 0; border-radius: 6px;
  background: none; color: var(--secundario); font-size: 16px; cursor: pointer; }
button.fecha-painel:hover { background: var(--painel); }
.sub-painel { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--secundario); }
.fita-painel { display: grid; grid-auto-flow: column; grid-auto-columns: 124px; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.fita-painel img, .fita-painel .sem-card-painel { width: 124px; height: 155px; border-radius: 4px; border: 1px solid var(--borda); display: block; object-fit: cover; }
.fita-painel .sem-card-painel { display: grid; place-items: center; text-align: center; padding: 8px; font-size: 11px; color: var(--secundario);
  border-style: dashed; border-color: var(--traco); }
.acoes-painel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.legenda-painel { display: grid; gap: 6px; }
.legenda-painel textarea { font: inherit; font-size: 13px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--papel); color: var(--tinta); resize: vertical; }
.rotulo-painel { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; }
.botao-texto { height: auto; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--apoio); cursor: pointer; }
button.botao-texto:hover { background: none; color: var(--tinta); }
.botao-texto.perigo { color: var(--estouro); }
.rodape-painel { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--secundario); }

.nota-roteiro { margin: 6px 0 0; font-size: 12px; color: var(--secundario); line-height: 1.45; }
.roteiro { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0;
           min-width: 0; }
.escolhe-roteiro input { margin: 0; accent-color: var(--tinta); }
.escolhe-roteiro { display: flex; align-items: center; gap: 8px; font-size: 12px;
                   color: var(--tinta); cursor: pointer; }
.lista-roteiro { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0;
                 list-style: none; counter-reset: slide; }
.lista-roteiro[hidden] { display: none; }
.lista-roteiro li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center;
                    counter-increment: slide; }
.lista-roteiro li::before { content: counter(slide); font-size: 11px; color: var(--recessivo);
                            font-variant-numeric: tabular-nums; }
.lista-roteiro select { height: 32px; min-width: 0; padding: 0 8px; border: 1px solid var(--borda);
                        border-radius: 4px; background: var(--carta); font-family: inherit;
                        font-size: 12px; color: var(--tinta); }
.lista-roteiro select:focus { border-color: var(--tinta); }

/* a landing: a raiz para quem não entrou */
.barra .barra-link { font-size: 13px; color: var(--secundario-escuro); text-decoration: none; }
.barra .barra-link:hover { color: var(--sobre-escuro); }
.barra .barra-entrar { padding: 7px 16px; border: 1px solid rgba(244, 239, 230, .3); border-radius: 999px;
                          font-size: 13px; font-weight: 500; color: var(--sobre-escuro); text-decoration: none; }
.barra .barra-entrar:hover { border-color: var(--sobre-escuro); }
.lp { display: flex; flex-direction: column; font-size: 14px; line-height: 1.5; }
.lp p, .lp h1, .lp h2, .lp h3, .lp figure, .lp ol, .lp ul { margin: 0; }
.lp h1, .lp h2 { font-family: Anton, "Anton Reserva", Impact, sans-serif; font-weight: 400; text-wrap: balance; }
.lp h1 { font-size: clamp(38px, 5.4vw, 60px); line-height: .98; letter-spacing: .01em; }
.lp h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.05; }
.lp img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.lp-faixa { display: flex; flex-direction: column; gap: 22px; padding: 56px max(40px, calc((100% - 1100px) / 2)); }
.lp-painel { background: var(--painel); }
.lp-sem-topo { padding-top: 0; }
.lp-rotulo { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--recessivo); }
.lp-texto { font-size: 15px; line-height: 1.6; color: var(--secundario); max-width: 64ch; }
.lp-miudo { font-size: 13px; color: var(--secundario); }
.lp-botao { display: inline-block; width: 100%; height: auto; margin: 0; padding: 11px 16px; border: 0;
            border-radius: 999px; background: var(--carta); color: var(--tinta); font-family: inherit;
            font-size: 13.5px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
a.lp-botao { width: auto; }
a.lp-botao.lp-bloco { width: 100%; }
.lp-botao.lp-forte { background: var(--marca); box-shadow: 0 6px 14px -6px rgba(255, 90, 54, .55); }
.lp-botao.lp-forte:hover { background: var(--marca-forte); color: var(--tinta); }
.lp-botao.lp-linha { border: 1px solid var(--tinta); }
button.lp-botao.lp-linha:hover { background: var(--painel); }
.lp-botao.lp-grande { padding: 14px 30px; font-size: 15px; white-space: nowrap; }
.lp-link { color: var(--apoio); font-weight: 600;
                 text-decoration: underline; cursor: pointer; }
.lp-link:hover { color: var(--tinta); }

.lp-heroi { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: center; }
.lp-heroi-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.lp-garantia { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--tinta); }
.lp-garantia span::before { content: "✓ "; color: var(--apoio); font-weight: 700; }
.lp-abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
button.lp-aba { height: auto; margin: 0; padding: 7px 13px; border: 1px solid var(--borda); border-radius: 999px; background: var(--carta);
                color: var(--tinta); font: 500 13px Inter, "Inter Reserva", system-ui, sans-serif; cursor: pointer; }
button.lp-aba:hover { background: var(--painel); }
button.lp-aba[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-escuro); }
.lp-exemplo[hidden] { display: none; }

.lp-ig { display: flex; flex-direction: column; background: var(--carta); border: 1px solid var(--borda); border-radius: 16px;
         overflow: hidden; box-shadow: 0 1px 2px rgba(18, 33, 31, .1), 0 18px 40px -22px rgba(18, 33, 31, .45); }
.lp-ig-topo { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; }
.lp-ig-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tinta);
                color: var(--sobre-escuro); font-family: Anton, "Anton Reserva", Impact, sans-serif; font-size: 14px;
                box-shadow: 0 0 0 2px var(--carta), 0 0 0 4px var(--marca); }
.lp-ig-janela { position: relative; }
.lp-ig-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.lp-ig-trilho::-webkit-scrollbar { display: none; }
.lp-ig-trilho:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.lp-ig-trilho img, .lp-ig-trilho picture { display: block; flex: 0 0 100%; scroll-snap-align: start; }
.lp-ig-trilho picture img { width: 100%; height: auto; }
button.lp-ig-seta { position: absolute; top: 50%; width: 32px; height: 32px; margin: -16px 0 0; padding: 0; border: 0; border-radius: 50%;
                    background: rgba(255, 255, 255, .88); color: var(--tinta); font-size: 22px; line-height: 1; cursor: pointer;
                    box-shadow: 0 2px 8px rgba(18, 33, 31, .25); transition: opacity .2s; }
button.lp-ig-seta:hover { background: var(--carta); }
.lp-ig-seta:disabled { opacity: 0; pointer-events: none; }
.lp-ig-antes { left: 10px; }
.lp-ig-depois { right: 10px; }
.lp-ig-contador { position: absolute; top: 12px; right: 12px; padding: 3px 9px; border-radius: 999px;
                  background: rgba(18, 33, 31, .7); color: var(--sobre-escuro); font-size: 11px; font-variant-numeric: tabular-nums; }
.lp-ig-pontos { display: flex; justify-content: center; gap: 5px; padding: 12px; }
.lp-ig-pontos span { width: 6px; height: 6px; border-radius: 50%; background: var(--traco); transition: background .2s, transform .2s; }
.lp-ig-pontos span.atual { background: var(--apoio); transform: scale(1.2); }
@media (prefers-reduced-motion: reduce) { .lp-ig-trilho { scroll-behavior: auto; } }

.lp-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 0; list-style: none; counter-reset: passo; }
.lp-passos li { display: flex; flex-direction: column; gap: 6px; }
.lp-passos li::before { counter-increment: passo; content: counter(passo); font-family: Anton, "Anton Reserva", Impact, sans-serif; font-size: 44px;
                        line-height: 1; color: var(--marca); }
.lp-passos b { font-size: 17px; }
.lp-passos p { font-size: 14px; color: var(--secundario); }

.lp-arquivo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; align-items: center; margin-top: 16px;
              padding: 28px; border-radius: 18px; background: var(--painel); }
.lp-arquivo-texto { display: flex; flex-direction: column; gap: 10px; }
.lp-arquivo-texto h3 { font: 400 clamp(22px, 2.6vw, 28px)/1.05 Anton, "Anton Reserva", Impact, sans-serif; }
.lp-arquivo-texto p { font-size: 14px; color: var(--secundario); max-width: 58ch; }
.lp-arquivo-texto .lp-rotulo { font-size: 11px; color: var(--recessivo); }
.lp-arquivo-texto .lp-arquivo-apagado { display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--tinta); }
.lp-arquivo-apagado::before { content: "🔒"; }
.lp-arquivo-visual { display: flex; flex-direction: column; gap: 8px; }
.lp-arquivo-chip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--carta);
                   border: 1px solid var(--borda); border-radius: 12px; }
.lp-arquivo-chip span:last-child { display: flex; flex-direction: column; font-size: 13px; }
.lp-arquivo-chip small { font-size: 11px; color: var(--secundario); }
.lp-pdf { display: grid; place-items: center; width: 38px; height: 46px; border-radius: 6px; background: var(--estouro);
          color: var(--carta); font-size: 11px; font-weight: 700; }
.lp-seta-baixo { align-self: center; font-size: 20px; line-height: 1; color: var(--marca); }
.lp-ideias { display: flex; flex-direction: column; gap: 6px; padding: 0; list-style: none; }
.lp-ideias li { padding: 10px 14px; background: var(--carta); border: 1px solid var(--borda); border-radius: 10px; font-size: 13px; }
.lp-ideias li.lp-escolhida { border: 2px solid var(--marca); font-weight: 600; }

.lp-ganhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-ganho { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--carta); border-radius: 16px;
            box-shadow: 0 1px 2px rgba(18, 33, 31, .08); }
.lp-ganho h3 { font-size: 18px; font-weight: 600; }
.lp-ganho p { font-size: 14px; color: var(--secundario); }
.lp-ganho-visual { display: grid; place-items: center; min-height: 200px; padding: 14px; border-radius: 12px; background: var(--painel); }
.lp-antes-depois { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.lp-antes-depois figure { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; text-align: center; }
.lp-antes-depois img { border-radius: 8px; }
.lp-cortado { display: flex; align-items: center; aspect-ratio: 4 / 5; padding: 10px; overflow: hidden; border-radius: 8px;
              background: linear-gradient(180deg, rgba(43, 59, 56, 1), var(--tinta)); color: var(--carta);
              font: 400 17px/1 Anton, "Anton Reserva", Impact, sans-serif; text-align: left; }
.lp-cortado span { max-height: 3em; overflow: hidden; border-bottom: 2px solid var(--estouro); }
.lp-ruim { color: var(--estouro); }
.lp-bom { color: var(--apoio); }
.lp-troca { display: flex; align-items: center; gap: 10px; }
.lp-troca img { width: 120px; border-radius: 8px; }
.lp-troca .lp-velho { opacity: .35; }
.lp-seta { font-size: 22px; color: var(--marca); }
.lp-marca { display: flex; align-items: center; gap: 14px; }
.lp-marca img { width: 140px; border-radius: 8px; }
.lp-cores { display: flex; flex-direction: column; gap: 6px; }
.lp-cores span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--carta); box-shadow: 0 0 0 1px var(--borda); }

.lp-meio { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; text-align: center; }
.lp-meio p { font-size: 15px; }

.lp-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.lp-planos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; padding-top: 10px; }
.lp-plano { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 18px; background: var(--carta);
            border: 1px solid var(--borda); border-radius: 14px; }
.lp-plano.lp-destaque { border: 2px solid var(--marca); padding: 17px; }
.lp-plano h3 { font-size: 16px; font-weight: 600; }
.lp-plano-publico { min-height: 40px; font-size: 13px; color: var(--secundario); }
.lp-selo { position: absolute; top: -11px; left: 14px; right: 14px; padding: 3px 8px; border-radius: 999px;
           background: var(--marca); font-size: 11px; font-weight: 600; text-align: center; }
.lp-destaque h3 { margin-top: 6px; }
.lp-preco { display: flex; align-items: baseline; gap: 5px; }
.lp-preco b { font-family: Anton, "Anton Reserva", Impact, sans-serif; font-weight: 400; font-size: 30px; line-height: 1.1; }
.lp-preco span { font-size: 12px; color: var(--secundario); }
.lp-plano .lp-miudo b { color: var(--tinta); font-weight: 600; }
.lp-avulso { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px;
             border: 1px dashed var(--traco); border-radius: 14px; }
.lp-avulso p { flex: 1 1 320px; font-size: 14px; }

.lp-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.lp-faq details { padding: 14px 0; border-bottom: 1px solid var(--borda); }
.lp-faq summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 600; list-style: none; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--secundario); }
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq details p { margin-top: 6px; font-size: 14px; color: var(--secundario); }

.lp-chamada { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 28px 30px; border-radius: 16px;
              background: var(--tinta); color: var(--sobre-escuro); }
.lp-chamada > div { flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; }
.lp-chamada-titulo { font-family: Anton, "Anton Reserva", Impact, sans-serif; font-size: 26px; line-height: 1.05; }
.lp-chamada-nota { font-size: 13px; color: var(--secundario-escuro); }
.lp-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
             padding: 20px max(40px, calc((100% - 1100px) / 2)); border-top: 1px solid var(--borda);
             font-size: 12px; color: var(--secundario); }
.lp-rodape a { color: var(--secundario); }
.lp-rodape a:hover { color: var(--tinta); }
.lp-rodape a.lp-autor { text-decoration: none; }
.lp-rodape a.lp-autor:hover { text-decoration: underline; }
.lp-autor svg { margin-left: 4px; vertical-align: -1px; }

@media (max-width: 1023px) {
  .lp-heroi, .lp-arquivo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lp-ganhos { grid-template-columns: minmax(0, 1fr); }
  .lp-planos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
}
.lp-fixo { display: none; }
@media (max-width: 599px) {
  .lp-faixa { padding: 40px 16px; }
  .lp-sem-topo { padding-top: 0; }
  .lp-rodape { padding: 20px 16px; column-gap: 20px; row-gap: 0; }
  .lp-credito { flex-basis: 100%; }
  .lp-rodape .empurra { display: none; }
  .lp-arquivo { padding: 20px; }
  .lp-troca picture { flex: 1 1 0; min-width: 0; }
  .lp-troca img { width: 100%; }
  .lp-passos, .lp-planos, .lp-faq { grid-template-columns: minmax(0, 1fr); }
  .lp-passos { gap: 18px; }
  .lp-passos li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
  .lp-passos li::before { grid-row: span 2; font-size: 34px; line-height: 1; }
  .barra .barra-link { display: none; }
  .lp-abas { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px; scrollbar-width: none; }
  .lp-abas::-webkit-scrollbar { display: none; }
  button.lp-aba { flex-shrink: 0; min-height: 44px; padding: 0 16px; }
  .lp-botao, .lp-rodape a, .lp-link { min-height: 44px; }
  .lp .lp-botao { display: inline-flex; align-items: center; justify-content: center; }
  .barra .marca { min-height: 44px; min-width: 44px; }
  button.lp-ig-seta { width: 44px; height: 44px; margin-top: -22px; }
  .lp-planos { display: flex; overflow-x: auto; gap: 12px; margin: 0 -16px; padding: 22px 16px 6px;
               scroll-snap-type: x mandatory; scrollbar-width: none; }
  .lp-planos::-webkit-scrollbar { display: none; }
  .lp-plano { flex: 0 0 84%; scroll-snap-align: center; }
  .lp-link { display: inline-block; padding: 12px 0; }
  .lp-rodape a { display: inline-block; padding: 12px 0; }
  .lp-fixo { position: fixed; left: 16px; right: 16px; bottom: 12px; z-index: 5;
             display: flex; justify-content: center; visibility: hidden; transform: translateY(calc(100% + 24px));
             transition: transform .2s ease, visibility 0s linear .2s; }
  .lp-fixo.visivel { visibility: visible; transform: none; transition: transform .2s ease; }

  .cabeca-arquivo { flex-wrap: wrap; row-gap: 8px; }
  .cabeca-arquivo .fim { display: none; }
  .nome-da-banda { flex-basis: 100%; min-width: 0; }
  .caixa-nome { width: auto; min-width: 0; flex: 1 1 0; height: 44px; }
  .banda-arquivo .abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .banda-arquivo .aba { min-width: 0; min-height: 44px; padding: 8px 10px; white-space: normal; text-align: left; line-height: 1.3; }

  :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="color"], [type="file"], [type="range"]) { font-size: 16px !important; }
  input[type="checkbox"], input[type="radio"], .radio { width: 22px; height: 22px; flex-shrink: 0; }
  .radio:checked { border-width: 7px; }
  .linha-rascunho { grid-template-columns: 22px minmax(0, 1fr); row-gap: 4px; }
  .linha-rascunho .fim-da-linha { grid-column: 2; justify-content: space-between; }
  .nome-na-lista { max-width: none; }
  :is(.confirma, .escolhe-roteiro, .manter-cores, .lista-aplicar label, .opcao-marca, .verificado) { min-height: 44px; align-items: center; }
  .confirma input { margin: 0; }
  :is(.botao-primario, .botao-fraco, .acao-secundaria, .botao-texto, .descartar, .da-logo, .enviar-foto, .aba, .vp-aba,
      .feed-tema button, .palco-modos button, .legenda-post .copiar, .rolo .tile, .barra .novo-cel, .barra .saldo,
      .sua-marca > a, .bandeja a, .ficha-marca .botoes a, .cores-carrossel summary, .referencia summary) { min-height: 44px; }
  a:is(.botao-primario, .botao-fraco, .acao-secundaria), .sua-marca > a, .bandeja a, .ficha-marca .botoes a, .barra .novo-cel, .barra .saldo,
    .acao-secundaria, .botao-texto, .descartar, .da-logo, .rolo .tile { display: inline-flex; align-items: center; justify-content: center; }
  .referencia summary { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
  .referencia summary .dica { margin-left: 0; }
  .banda .titulo { flex-wrap: wrap; row-gap: 4px; }
  .abas a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .passos { height: auto; }
  .passo, .quantos-slides { width: 44px; height: 44px; }
  button.feed-seta { width: 44px; height: 44px; margin-top: -22px; }
  .seletor-marca > summary { height: 44px; }
  .conta-menu summary, .menu-publico summary { min-width: 44px; min-height: 44px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .lp-fixo { transition: none; } }

.recado { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 8px 10px;
  width: auto; max-width: 100%; margin: 0; padding: 12px 14px 12px 12px;
  border: 1px solid var(--borda); border-left: 4px solid var(--secundario); border-radius: 6px;
  background: var(--painel); color: var(--tinta); font-size: 14px; line-height: 1.5; }
.recado.erro { border-color: color-mix(in srgb, var(--estouro) 35%, var(--carta)); border-left-color: var(--estouro);
  background: color-mix(in srgb, var(--estouro) 7%, var(--carta)); }
.recado.aviso { border-color: color-mix(in srgb, var(--tolerancia) 35%, var(--carta)); border-left-color: var(--tolerancia);
  background: color-mix(in srgb, var(--tolerancia) 9%, var(--carta)); }
.recado.ok { border-color: color-mix(in srgb, var(--apoio) 35%, var(--carta)); border-left-color: var(--apoio);
  background: color-mix(in srgb, var(--apoio) 8%, var(--carta)); }
.recado.vazio { padding: 20px; border: 1.5px dashed var(--traco); background: var(--papel); }
.recado-icone { display: block; width: 20px; height: 20px; margin-top: 1px; color: var(--secundario); }
.recado.erro .recado-icone, .erro-campo .recado-icone { color: var(--estouro); }
.recado.aviso .recado-icone { color: var(--tolerancia); }
.recado.ok .recado-icone { color: var(--apoio); }
.recado-texto { margin: 0; }
.recado-texto::first-letter, .erro-campo-texto::first-letter { text-transform: uppercase; }
.recado-texto strong { font-weight: 600; }
.recado.erro .recado-texto strong { color: var(--estouro); }
.recado-acao { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 18px; border-radius: 4px; background: var(--marca); color: var(--tinta);
  font-size: 14px; font-weight: 600; text-decoration: none; }
.recado-acao:hover { background: var(--marca-forte); color: var(--tinta); }
.recado-envio { grid-column: 2; justify-self: start; margin: 0; }
button.recado-acao { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.recado.aviso .recado-acao, .recado.vazio .recado-acao { border: 1px solid var(--tinta); background: var(--carta); }
.recado.aviso .recado-acao:hover, .recado.vazio .recado-acao:hover { background: var(--papel); }
.porta > .recado { width: 460px; }
.sua-marca .recado { grid-column: 1 / -1; flex-basis: 100%; }
.acoes-painel .recado { flex-basis: 100%; }
.folha > .recado { margin: 12px 18px; }
.erro-campo { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 0; color: var(--estouro);
  font-size: 14px; font-weight: 500; line-height: 1.4; }
.erro-campo .recado-icone { width: 18px; height: 18px; flex-shrink: 0; }
.erro-campo-texto { display: block; }
input[aria-invalid="true"], .ficha-marca input[aria-invalid="true"] {
  border-color: var(--estouro); box-shadow: inset 0 0 0 1px var(--estouro); }
.pix { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 12px; align-items: start; max-width: 640px; }
.pix > :not(.pix-qr) { grid-column: 1; }
.pix-codigo { width: 100%; margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; resize: none; }
.pix-qr { grid-column: 2; grid-row: 1 / span 4; width: 180px; height: 180px; }
.compra-acao button.botao-fraco { min-height: 44px; font-size: 13px; font-weight: 500; }
@media (max-width: 599px) {
  .pix { grid-template-columns: minmax(0, 1fr); }
  .pix-qr { display: none; }
  .pix .compra-acao button { width: 100%; min-height: 44px; }
}

.abas-baixo, .saidas-conta { display: none; }
@media (max-width: 599px) {
  .barra .marca .nome-marca { display: inline; }
  .barra .novo-cel { display: none; }
  .barra { gap: 8px; }
  .barra .conta-menu summary svg { display: none; }
  .barra .saldo .rotulo-saldo { display: inline; }
  .barra .saldo.zerado .rotulo-saldo { display: none; }
  .barra .saldo { position: relative; align-items: center; min-height: 44px; padding: 0 14px; border-color: transparent;
    font-size: 13px; }
  .barra .saldo::before { content: ""; position: absolute; inset: 5px 0; border: 1px solid rgba(244, 239, 230, .22);
    border-radius: 99px; pointer-events: none; }
  .barra .saldo:hover { border-color: transparent; }
  .barra .saldo:hover::before { border-color: var(--sobre-escuro); }
  .barra .saldo.zerado { border-color: transparent; }
  .barra .saldo.zerado::before { border-color: var(--marca); }

  .barra-rodape.abas-baixo { z-index: 25; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; box-shadow: none; }
  .abas-baixo a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 60px; font-size: 11px; font-weight: 500; color: var(--secundario); text-decoration: none; }
  .abas-baixo a.ativo { color: var(--tinta); font-weight: 600; }
  .abas-baixo a.ativo::before { content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 3px; background: var(--marca); }
  .abas-baixo a:focus-visible { outline: 2px solid var(--tinta); outline-offset: -4px; }
  body.com-abas .lp-fixo { bottom: 72px; }

  .saidas-conta { display: grid; background: var(--carta); border: 1px solid var(--borda); border-radius: 4px; }
  .saidas-conta a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px 6px 14px;
    color: var(--tinta); font-size: 15px; text-decoration: none; }
  .saidas-conta a + a { border-top: 1px solid var(--borda); }
  .saidas-conta span { flex: 1; min-width: 0; }
  .saidas-conta small { display: block; font-size: 13px; color: var(--secundario); overflow-wrap: anywhere; }
  .saidas-conta svg { flex-shrink: 0; color: var(--secundario); }
  .saidas-conta .sair { color: var(--estouro); }
}

.cabeca-criar, .rotulo-curto, .trocar-marca, .escolher-celular, .limite-celular { display: none; }
.faixa-trabalho { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px 16px;
  overflow: hidden; border: 1px solid var(--tinta); border-left: 3px solid var(--marca); border-radius: 4px;
  background: var(--carta); }
.faixa-trabalho::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 3px;
  background: var(--tinta); animation: faixa-anda 1.8s ease-in-out infinite; }
@keyframes faixa-anda { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.faixa-trabalho .gira { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--borda);
  border-top-color: var(--tinta); animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.texto-faixa { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.texto-faixa strong { font-size: 13px; font-weight: 600; }
.texto-faixa span { font-size: 13px; color: var(--secundario); }
@media (prefers-reduced-motion: reduce) { .faixa-trabalho::after, .faixa-trabalho .gira { animation: none; } }
.etapas-trabalho { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.etapas-trabalho .banda.agora { border-color: var(--tinta); background: var(--carta); }
.etapas-trabalho .banda.depois :is(.nome, .dica) { color: var(--recessivo); }
.etapas-trabalho .banda .dica { color: var(--secundario); }
.mais-opcoes > summary { list-style: none; cursor: pointer; }
.mais-opcoes > summary::-webkit-details-marker { display: none; }
.mais-opcoes .opcoes { display: flex; flex-direction: column; gap: 12px; }
@supports selector(::details-content) {
  @media (min-width: 600px) {
    .mais-opcoes > summary { display: none; }
    .mais-opcoes::details-content { content-visibility: visible; display: block; }
  }
}

@media (max-width: 599px) {
  .tela-criar > .medidas { display: none; }
  .tela-criar .adiante { display: none; }
  .cabeca-criar { display: block; }
  .cabeca-criar h1 { margin: 8px 0 2px; font-size: 20px; font-weight: 600; line-height: 1.3; }
  .etapa-criar { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--secundario); }
  .risquinhos { display: flex; gap: 3px; }
  .risquinhos i { width: 18px; height: 3px; background: var(--borda); }
  .risquinhos i.feito { background: var(--marca); }

  .sua-marca:has(> .seletor-marca) { flex-wrap: nowrap; padding: 4px 4px 4px 12px; }
  .sua-marca:has(> .seletor-marca) > :is(.nome, .dica, .fim, a) { display: none; }
  .sua-marca:has(> .ficha-marca, > .aplicar-marca, > .recado, > .marca-aplicada) { flex-wrap: wrap; }
  .sua-marca > .seletor-marca { flex: 1 1 0; min-width: 0; }
  .seletor-marca > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px;
    height: auto; min-height: 52px; padding: 4px 0; border: 0; background: none; }
  .seletor-marca > summary .avatar-marca { grid-row: span 2; width: 28px; height: 28px; }
  .seletor-marca > summary .nome-marca { font-size: 15px; font-weight: 600; line-height: 1.25; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .seletor-marca > summary .arroba { grid-column: 2; font-size: 12px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .seletor-marca > summary .arroba:empty { display: none; }
  .seletor-marca > summary .trocar-marca { display: flex; align-items: center; grid-column: 3; grid-row: 1 / span 2;
    min-height: 44px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--apoio); }
  .seletor-marca > summary .seta { display: none; }
  .sua-marca .lista-marcas { top: calc(100% + 4px); }

  .banda.banda-arquivo { gap: 14px; padding: 0; border: 0; background: none; }
  .banda-arquivo .cabeca-arquivo { display: contents; }
  .banda-arquivo .cabeca-arquivo > :is(.nome, .dica, .fim) { display: none; }
  .banda-arquivo .abas { order: 1; gap: 8px; border: 0; }
  .banda-arquivo .nome-da-banda { order: 2; flex-wrap: nowrap; gap: 10px; }
  .banda-arquivo .painel-arquivo { order: 3; }
  .banda-arquivo > .trabalhando { order: 4; }
  .rotulo-nome { width: 48px; flex-shrink: 0; font-size: 14px; font-weight: 600; color: var(--tinta); }
  .salvo:empty { display: none; }
  .salvo { min-width: 0; }
  .banda-arquivo .aba { position: relative; min-height: 48px; padding: 0 12px; gap: 8px; border: 1px solid var(--borda);
    border-radius: 4px; background: var(--carta); font-size: 14px; font-weight: 500; color: var(--tinta); }
  .banda-arquivo .aba[aria-selected="true"] { border-color: var(--tinta); font-weight: 600; box-shadow: none; }
  .banda-arquivo .aba[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px;
    width: 3px; background: var(--marca); }
  .banda-arquivo .aba .icone { flex-shrink: 0; }
  .banda-arquivo .aba .conta { margin-left: auto; border-radius: 2px; }
  .rotulo-longo { display: none; }
  .rotulo-curto { display: inline; }

  .banda-arquivo .alvo { height: auto; min-height: 56px; flex-direction: row; gap: 10px; padding: 0 16px;
    border: 0; background: var(--marca); color: var(--tinta); }
  .banda-arquivo .alvo:hover, .banda-arquivo .alvo:has(input:focus-visible) { border: 0; background: var(--marca-forte); }
  .banda-arquivo .alvo .icone-alvo { width: 20px; height: 20px; color: var(--tinta); }
  .banda-arquivo .alvo :is(.grande, .limite) { display: none; }
  .banda-arquivo .alvo .escolher-celular { display: inline; font-size: 16px; font-weight: 600; }
  .banda-arquivo .alvo.com-arquivo { border: 1px solid var(--tinta); background: var(--carta); }
  .banda-arquivo .alvo.com-arquivo .grande { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 15px; font-weight: 600; }
  .banda-arquivo .alvo.com-arquivo .escolher-celular { display: none; }
  .limite-celular { display: block; }
  .nota-arquivo { font-size: 13px; }
  .porta-novo .botao-cheio:disabled { display: none; }
  .botao-cheio, .botoes-lado .botao-fraco { height: auto; min-height: 48px; flex-wrap: wrap; column-gap: 6px;
    font-size: 15px; white-space: normal; text-align: center; }
  .botao-cheio small, .botoes-lado small { font-size: 12px; }

  .grade-arquivo { gap: 16px; }
  .lado-arquivo { gap: 16px; padding: 0; border-top: 0; }
  .mais-opcoes { border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
  .mais-opcoes > summary { display: flex; align-items: center; gap: 10px; min-height: 56px; }
  .textos-opcoes { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
  .titulo-opcoes { font-size: 14px; font-weight: 600; line-height: 1.3; }
  .resumo-opcoes { font-size: 13px; color: var(--secundario); }
  .mais-opcoes > summary .seta { flex-shrink: 0; color: var(--secundario); }
  .mais-opcoes[open] > summary .seta { transform: rotate(180deg); }
  .mais-opcoes .opcoes { padding: 4px 0 16px; }
  .sem-arquivo { font-size: 13px; }
  .texto-ideia { height: 76px; }
  .linha-enviado { display: grid; grid-template-columns: 22px 16px minmax(0, 1fr); gap: 2px 10px; }
  .linha-enviado .quem { grid-column: 3; }
  .linha-enviado .ideias { grid-column: 3; font-size: 12px; white-space: normal; }
  .nome-arquivo { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .linha-enviado .detalhe { font-size: 12px; white-space: normal; }

  div.grade-arquivo > .lado-arquivo { order: -1; padding: 0 0 16px; border-bottom: 1px solid var(--borda); }
  .titulo-lado { font-size: 15px; }
  .texto-lado { font-size: 13px; }

  .tela-criar .prateleira { flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 0 0 4px; scrollbar-width: none; }
  .tela-criar .prateleira::-webkit-scrollbar { display: none; }
  .tela-criar .prateleira > .capa { flex-shrink: 0; }

  .faixa-trabalho { align-items: flex-start; padding: 14px 14px 16px; }
  .faixa-trabalho .gira { margin-top: 2px; }
  .texto-faixa strong { font-size: 15px; }
  .etapas-trabalho { gap: 0; border: 1px solid var(--borda); border-radius: 4px; background: var(--carta); }
  .etapas-trabalho .banda { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 12px;
    align-content: center; min-height: 56px; padding: 8px 8px 8px 14px; border: 0; border-radius: 0; background: none; }
  .etapas-trabalho .banda + .banda { border-top: 1px solid var(--borda); }
  .etapas-trabalho .banda .nome { display: contents; font-size: 15px; }
  .etapas-trabalho .banda .num { grid-row: span 2; align-self: center; font-family: Anton, "Anton Reserva", Impact, sans-serif;
    font-size: 20px; font-weight: 400; line-height: 1; }
  .etapas-trabalho .banda .ponto { display: none; }
  .etapas-trabalho .banda .dica { grid-column: 2; font-size: 13px; }
  .etapas-trabalho .banda.feita .num { color: var(--recessivo); }
  .etapas-trabalho .banda.agora { border-color: var(--borda); }
  .etapas-trabalho .banda.agora::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px;
    background: var(--marca); }
}

@media (max-width: 599px) {
  .pagina-biblioteca { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 40px; gap: 12px; }
  .topo-biblioteca h1 { font-size: 20px; }
  .topo-biblioteca .novo-biblioteca { display: none; }
  .estante { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .filtros-biblioteca { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; min-width: 0; }
  .filtros-biblioteca .fim, .marcas-biblioteca { display: none; }
  .busca-biblioteca { order: -1; }
  .busca-biblioteca .lupa { left: 14px; }
  .busca-biblioteca input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 12px 0 42px; border-radius: 4px; background: var(--painel); }
  .faixa-filtros { gap: 8px; margin: 0 -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
  .faixa-filtros::-webkit-scrollbar { display: none; }
  .marca-celular { display: block; flex-shrink: 0; }
  .marca-celular > summary, .estados-biblioteca a { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--borda); border-radius: 99px; background: var(--carta); color: var(--tinta); font-size: 14px;
    font-weight: 400; white-space: nowrap; text-decoration: none; list-style: none; cursor: pointer; }
  .marca-celular[open] > summary { border-color: var(--tinta); }
  .marca-celular .menu-biblioteca { left: 0; right: 0; top: auto; width: auto; margin-top: 6px; }
  .estados-biblioteca { display: flex; flex-shrink: 0; gap: 8px; border: 0; border-radius: 0; overflow: visible; background: none; }
  .estados-biblioteca a:last-child { border-right: 1px solid var(--borda); }
  .estados-biblioteca a.ligado { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-escuro); font-weight: 600; }
  .estados-biblioteca a small { font-size: 12px; }
  .contagem-biblioteca { font-size: 13px; }

  .grade-biblioteca { display: block; border-top: 1px solid var(--borda); }
  .item-biblioteca { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 4px;
    padding: 12px 0; border-bottom: 1px solid var(--borda); }
  .card-biblioteca { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; }
  .capa-biblioteca img, .capa-biblioteca .sem-capa { width: 64px; border-radius: 3px; }
  .capa-biblioteca .sem-capa > span { display: none; }
  .texto-biblioteca { gap: 2px; }
  .card-biblioteca b { font-size: 15px; }
  .meta-biblioteca { font-size: 13px; }
  .meta-biblioteca .bola { display: none; }
  .estado-biblioteca:is(.pronto, .atualizar, .rascunho) { display: block; margin-top: 2px; padding: 0;
    border-radius: 0; background: none; color: var(--tinta); font-size: 13px; font-weight: 400; }
  .estado-biblioteca::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%;
    box-sizing: border-box; vertical-align: -1px; }
  .estado-biblioteca.pronto::before { background: var(--apoio); }
  .estado-biblioteca.atualizar::before { border: 2px solid var(--tolerancia); }
  .estado-biblioteca.rascunho::before { border: 1.5px solid var(--traco); }
  .slides-no-estado { font-weight: 400; }
  .mais-item { position: relative; top: auto; right: auto; }
  .mais-item > summary { width: 44px; height: 44px; border: 0; background: none; }
  .mais-item[open] > summary { background: var(--painel); }
  .mais-item .menu-biblioteca { top: calc(100% + 4px); min-width: 250px; }
  .menu-biblioteca a, .menu-biblioteca button { min-height: 48px; font-size: 15px; font-weight: 400; }

  .pagina-biblioteca:has(> .painel-biblioteca:not(:empty)) > :not(.painel-biblioteca) { display: none; }
  .gaveta-biblioteca { position: static; grid-template-columns: minmax(0, 1fr); width: auto; z-index: auto; overflow: visible; gap: 16px; padding: 0; border: 0;
    background: none; box-shadow: none; }
  .cabeca-painel { display: grid; grid-template-columns: minmax(0, 1fr) 52px; align-items: center; margin: -18px -16px 0; gap: 0; }
  .volta-painel { display: flex; align-items: center; gap: 8px; height: 52px; margin: 0; padding: 0 12px 0 8px; border: 0;
    border-bottom: 1px solid var(--borda); border-radius: 0; background: none; color: var(--tinta); font-size: 15px; font-weight: 600; }
  button.volta-painel:hover { background: none; }
  .mais-item.mais-painel { grid-row: 1; grid-column: 2; display: grid; place-items: center; height: 52px; border-bottom: 1px solid var(--borda); }
  .fecha-painel { display: none; }
  .volta-painel { grid-row: 1; grid-column: 1; }
  .gaveta-biblioteca h2 { grid-row: 2; grid-column: 1 / -1; padding: 16px 16px 0; font-size: 20px; line-height: 1.25; }
  .sub-painel { gap: 12px; font-size: 14px; }
  .fita-painel { grid-auto-columns: 40%; min-height: max-content; margin: 0 -16px; padding: 0 16px 4px; scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory; scrollbar-width: none; }
  .fita-painel::-webkit-scrollbar { display: none; }
  .fita-painel img, .fita-painel .sem-card-painel { width: 100%; height: auto; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .gaveta-biblioteca > .acoes-painel { flex-direction: column; align-items: stretch; gap: 10px; }
  .gaveta-biblioteca > .acoes-painel .recado { flex-basis: auto; }
  .gaveta-biblioteca > .acoes-painel .botao-biblioteca { min-height: 52px; font-size: 15px; border-radius: 4px; }
  .rotulo-celular { display: inline; }
  .rotulo-computador { display: none; }
  .rotulo-painel { font-size: 14px; }
  .legenda-painel .botao-texto { padding: 0 4px; font-size: 15px; }
  .duplicar-painel { gap: 10px; padding: 14px; border-radius: 4px; }
  .duplicar-painel input { height: 48px; }
  .duplicar-painel .botao-biblioteca { min-height: 44px; align-self: flex-start; }
  .nota-painel, .rodape-painel { font-size: 13px; }

  .pagina-conta:has(.compra-escolha) { margin-top: 16px; padding: 0 16px; }
  .banda.aberta.compra-escolha { gap: 12px; padding: 0; border: 0; background: none; }
  .compra-escolha .titulo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 0; }
  .compra-escolha .titulo .nome { font-size: 22px; font-weight: 700; line-height: 1.2; }
  .compra-escolha .titulo .fim { display: none; }
  .compra-escolha .titulo a { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
  .compra-escolha .titulo .dica { grid-column: 1 / -1; font-size: 14px; }
  .pagina-conta .compra-escolha .dados { grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; font-size: 14px; }
  .compra-mesmo-preco .compra-meio-preco { display: none; }
  .compra-escolha .compra-meio { padding: 10px 14px; }
  .compra-escolha .compra-texto { font-size: 14px; }
  .compra-escolha .compra-acao button { width: 100%; min-height: 52px; font-size: 15px; }
}

.topo-carrossel, .contagem-slides, .posicao-trilho, .barra-slides, .editor-topo, .trocar-imagem-editor,
.passo-do-celular, .numero-passo, .passo-publicar > .miolo-passo > .rotulo-passo, .tira-publicar > .rotulo-passo,
.atualizar-publicar { display: none; }
.passos-publicar { margin: 0; padding: 0; list-style: none; }
.miolo-passo { display: flex; flex-direction: column; gap: 10px; }
.tira-publicar { display: block; }
.copiar-ao-lado { display: inline-flex; align-items: center; gap: 6px; }
.copiar-ao-lado[hidden], [data-copiar-legenda][hidden] { display: none; }
.salvar-legenda { flex-wrap: wrap; margin-top: 6px; }
.salvar-legenda .dica { font-size: 12px; color: var(--secundario); }
[data-salvar-no-celular] svg { vertical-align: -3px; margin-right: 6px; }

@media (max-width: 599px) {
  body.editor-aberto { overflow: hidden; }
  :is(.tela-slides, .tela-publicar) > .medidas,
  :is(.tela-slides, .tela-publicar) .conteudo > .banda:not(.aberta) { display: none; }
  :is(.tela-slides, .tela-publicar) .conteudo { padding: 0; gap: 0; }
  :is(.tela-slides, .tela-publicar) .conteudo > .recado { margin: 12px 16px 0; }

  .topo-carrossel { display: flex; align-items: center; gap: 4px; min-height: 60px; padding: 4px 4px 4px 2px;
    background: var(--papel); border-bottom: 1px solid var(--borda); }
  .topo-voltar { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; color: var(--tinta); }
  .topo-titulo { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; line-height: 1.3; }
  .topo-titulo b { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .topo-titulo span { font-size: 12px; color: var(--secundario); }
  .mais-carrossel { position: relative; flex-shrink: 0; }
  .mais-carrossel summary { display: grid; place-items: center; width: 44px; height: 44px; color: var(--tinta);
    cursor: pointer; list-style: none; }
  .mais-carrossel summary::-webkit-details-marker { display: none; }
  .mais-carrossel .lista-conta { top: calc(100% + 4px); right: 6px; min-width: 250px; }
  .mais-carrossel .lista-conta :is(a, button) { display: flex; align-items: center; width: 100%; min-height: 48px; height: auto;
    margin: 0; padding: 0 12px; border: 0; border-radius: 5px; background: none; font: inherit; font-size: 15px;
    font-weight: 400; color: var(--tinta); text-align: left; text-decoration: none; }
  .mais-carrossel .lista-conta :is(a, button):hover { background: var(--papel); }
  .mais-carrossel .lista-conta [hidden] { display: none; }
  .volta-versao { display: contents; }

  .tela-slides .banda.aberta.folha { padding: 0;
    border: 0; border-radius: 0; background: none; }
  .tela-slides .faixa-trabalho { display: none; }
  .tela-slides .contagem-slides { order: 1; display: flex; justify-content: space-between; gap: 12px; margin: 0;
    padding: 12px 16px 0; font-size: 13px; color: var(--secundario); }
  .contagem-slides b { font-weight: 600; color: var(--tinta); }
  .tela-slides .oficina { order: 2; display: flex; flex: none; flex-direction: column; padding: 0; }
  .tela-slides .cabeca { order: 3; margin: 18px 16px 0; padding: 0; border: 1px solid var(--borda); border-radius: 4px;
    background: var(--carta); }
  .tela-slides .cabeca > .titulo { display: none; }
  .tela-slides .cabeca .cores-carrossel { margin: 0; padding: 4px 14px; font-size: 15px; }
  .tela-slides .cabeca .cores-carrossel + .cores-carrossel { border-top: 1px solid var(--borda); }
  .tela-slides .cabeca .cores-carrossel summary { min-height: 52px; gap: 4px 10px; }
  .tela-slides .cabeca .cores-carrossel summary > span:first-child { width: 64px; font-size: 13px; color: var(--secundario); }
  .tela-slides .cabeca .cores-carrossel .trocar { flex-basis: 100%; padding-left: 74px; font-size: 14px; }
  .tela-slides .cabeca .cores-carrossel .bolas i { width: 16px; height: 16px; }

  .tela-slides .rolo { position: relative; flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px 10% 0;
    overflow-x: auto; overflow-y: hidden; border: 0; background: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .tela-slides .rolo::-webkit-scrollbar { display: none; }
  .tela-slides .rolo .tile { position: relative; display: block; flex: 0 0 100%; width: auto; min-height: 0; padding: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none; scroll-snap-align: center; }
  .tela-slides .rolo .tile img, .tela-slides .rolo .tile .vazio { display: flex; width: 100%; height: auto; aspect-ratio: 4 / 5;
    border: 1px solid var(--borda); border-radius: 4px; }
  .tela-slides .rolo .tile .vazio { padding: 16px; border-style: dashed; font-size: 15px; }
  .tela-slides .rolo .tile .pe { position: absolute; top: 10px; right: 10px; gap: 6px; margin: 0; padding: 4px 9px;
    border-radius: 999px; background: rgba(18, 33, 31, .72); }
  .tela-slides .rolo .tile .ordem { font-size: 12px; font-weight: 600; color: var(--carta); }
  .tela-slides .posicao-trilho { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 0; }
  .bolinhas { display: flex; justify-content: center; gap: 6px; }
  .bolinhas i { width: 7px; height: 7px; border-radius: 50%; background: var(--traco); }
  .bolinhas i.atual { background: var(--tinta); }
  .info-trilho { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
  .info-trilho .posicao { font-size: 13px; }
  .info-trilho .modelo { flex: 1 1 auto; color: var(--secundario); }
  .info-trilho .estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--secundario); }
  .tela-slides .palco { display: none; }

  .tela-slides .barra-slides { order: 9; display: flex; align-items: center; gap: 10px; }
  .barra-slides [hidden] { display: none; }
  .barra-slides .botao-fraco { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 18px; font-size: 15px; font-weight: 600; }
  .barra-slides .lapis { width: 16px; height: 16px; }
  .barra-slides .barra-principal { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0;
    min-height: 52px; font-size: 16px; text-decoration: none; }
  .barra-slides .andamento { display: flex; align-items: center; gap: 12px; min-height: 52px; font-size: 14px; }
  .barra-slides .andamento .pulso { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--marca);
    animation: pulso 1.1s ease-in-out infinite; }
  .barra-slides .andamento b { display: block; font-weight: 600; }
  .barra-slides .andamento small { font-size: 12px; color: var(--secundario); }
  body.editor-aberto .barra-slides { display: none; }

  body.com-editor .tela-slides .painel { display: none; }
  body.com-editor.editor-aberto .tela-slides .painel { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column;
    border: 0; background: var(--papel); }
  body.editor-aberto .tela-slides .editor-topo { display: flex; flex-direction: column; flex-shrink: 0; gap: 6px; height: 112px;
    padding: 4px 12px 10px 4px; border-bottom: 1px solid var(--borda); background: var(--carta); }
  .editor-linha { display: flex; align-items: center; gap: 2px; }
  .editor-botao { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; margin: 0; padding: 0; border: 0;
    border-radius: 4px; background: none; color: var(--tinta); }
  button.editor-botao:hover, a.editor-botao:hover { background: var(--painel); color: var(--tinta); }
  .editor-botao.apagado { color: var(--traco); }
  .editor-titulo { flex: 1 1 0; font-size: 16px; font-weight: 600; }
  .editor-titulo span { font-size: 14px; font-weight: 400; color: var(--secundario); }
  .editor-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 8px; padding: 3px; border-radius: 6px;
    background: var(--painel); }
  .editor-modos button { height: auto; min-height: 42px; margin: 0; border: 0; border-radius: 4px; background: none;
    font-size: 14px; font-weight: 600; color: var(--secundario); }
  .editor-modos button:hover { background: none; color: var(--tinta); }
  .editor-modos button[aria-pressed="true"] { background: var(--carta); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--borda); }
  body.editor-aberto .tela-slides .painel-rola { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 16px 16px 28px; gap: 20px; }
  body.editor-aberto .tela-slides .painel .etiqueta { font-size: 14px; }
  body.editor-aberto .tela-slides .painel .rotulo-grupo { font-size: 11px; }
  body.editor-aberto .tela-slides .painel .conta { font-size: 12px; }
  body.editor-aberto .tela-slides .painel .campo-caixa { min-height: 48px; padding: 11px 14px; }
  body.editor-aberto .tela-slides .painel .nota { font-size: 13px; }
  body.editor-aberto .tela-slides .painel .campos { gap: 16px; }
  body.editor-aberto .tela-slides .trocar-imagem-editor { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 14px; }
  body.editor-aberto .tela-slides .acoes { flex-shrink: 0; }
  body.editor-aberto .tela-slides .botao-primario.trocar-modelo { align-self: stretch; justify-content: center; flex-wrap: wrap; min-height: 48px; font-size: 15px; }
  .tela-slides .acoes .fila + .fila, .tela-slides .acoes .botao-fraco { display: none; }
  .tela-slides .acoes .botao-primario { min-height: 52px; font-size: 16px; }
  body.editor-previa .tela-slides .acoes,
  body.editor-previa .tela-slides .painel-rola { display: none; }
  body.editor-aberto.editor-previa .tela-slides .palco { position: fixed; left: 0; right: 0; bottom: 0; top: 112px;
    z-index: 31; display: flex; align-items: stretch; gap: 12px; padding: 16px 16px 16px;
    overflow-y: auto; background: var(--papel); }
  body.editor-previa .tela-slides .palco > :is(.palco-barra, .cartao-slide, .ver-real) { display: none; }
  body.editor-previa .tela-slides .palco > .feed { display: flex; max-width: none; }

  .tela-publicar .banda.aberta { display: flex; flex-flow: column nowrap; align-items: stretch; gap: 20px; padding: 18px 16px 32px;
    border: 0; border-radius: 0; background: none; }
  .tela-publicar .banda.aberta > .titulo { order: 0; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; }
  .tela-publicar .banda.aberta > .titulo .nome { font-size: 20px; }
  .tela-publicar .banda.aberta > .titulo :is(.dica, .fim) { display: none; }
  .tela-publicar .carimbo { font-family: inherit; font-size: 13px; }
  .tela-publicar :is(.publica-com-previa, .publica) { display: contents; }
  .tela-publicar .baixar { order: 1; }
  .tela-publicar .banda.aberta :is(.titulo, .tira-publicar, .baixar, .feed, .legenda-post, .nota) { min-width: 0; }
  .tela-publicar .feed { order: 2; max-width: none; }
  .tela-publicar .banda.aberta .nota.erro { order: 3; }
  .tela-publicar .legenda-post { order: 3; gap: 8px; }
  .tela-publicar .nota-ia { order: 4; max-width: none; }
  .tela-publicar .tira-publicar { order: 5; }

  .tela-publicar .baixar .apagado, .tela-publicar .baixar > .dica > a { display: none; }
  .tela-publicar .baixar .atualizar-publicar { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; font-size: 16px; text-decoration: none; }
  .tela-publicar .baixar .dica { font-size: 14px; }
  .tela-publicar .passos-publicar { display: flex; flex-direction: column; gap: 18px; }
  .tela-publicar .passo-publicar { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .tela-publicar .numero-passo { display: block; font-family: Anton, "Anton Reserva", Impact, sans-serif; font-size: 26px; line-height: 1; }
  .tela-publicar .passo-publicar > .miolo-passo > .rotulo-passo, .tela-publicar .tira-publicar > .rotulo-passo { display: block; font-size: 15px; font-weight: 600; }
  .tela-publicar .passo-publicar .fila { flex-direction: column; align-items: stretch; }
  .tela-publicar .passo-publicar :is(.botao-primario, .botao-fraco) { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 52px; font-size: 16px; white-space: normal; }
  .tela-publicar .passo-publicar :is(.botao-primario, .botao-fraco)[hidden] { display: none; }
  .tela-publicar [data-salvar-no-celular]:not([hidden]) ~ [data-baixar-zip] { display: none; }
  .tela-publicar [data-salvar-no-celular] svg { margin: 0; }
  .tela-publicar .passo-publicar .dica { font-size: 13px; line-height: 1.45; color: var(--secundario); }
  .tela-publicar .passo-do-celular { display: grid; }
  .tela-publicar .copiar-ao-lado { display: none; }
  .tela-publicar .legenda-post .etiqueta { font-size: 15px; }
  .tela-publicar .legenda-post > input { height: 48px; }
  .tela-publicar .salvar-legenda { flex-direction: column; align-items: flex-start; }
  .tela-publicar .salvar-legenda .botao-fraco { min-height: 48px; padding: 0 18px; font-size: 15px; font-weight: 600; }
  .tela-publicar .salvar-legenda .dica { font-size: 13px; }
  .tela-publicar .tira-publicar .tira { margin: 10px -16px 0; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
  .tela-publicar .tira-publicar .tira::-webkit-scrollbar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .barra-slides .andamento .pulso { animation: none; } }

@media (max-width: 599px) {
  .janela { width: calc(100vw - 24px); max-height: calc(100dvh - 48px); }
  .janela-miolo { padding: 16px; }
  .janela-miolo .titulo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; }
  .janela-miolo .titulo .nome { font-size: 17px; font-weight: 600; }
  .janela-miolo .titulo .dica { grid-column: 1; font-size: 13px; line-height: 1.4; }
  .janela-miolo .titulo .fim { display: none; }
  .janela-miolo .fecha-janela { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .janela-miolo .fecha-janela button { min-height: 44px; }
  .janela .tabela { margin-top: 12px; font-size: 14px; }
  .janela .tabela thead { display: none; }
  .janela .tabela tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--borda); }
  .janela .tabela td { padding: 0; border-top: 0; }
  .janela .tabela td:nth-child(3) { grid-column: 1 / -1; }
  .janela .tabela td:nth-child(4) { grid-column: 1 / -1; color: var(--secundario); font-size: 13px; }
}