/* Plataforma (protótipo) · Método Claude Quadro — densidade de app: texto até 24 px */

body { background: var(--fundo); font-size: 15px; }
.app .btn { font-size: 16px; line-height: 24px; padding: 10px 20px; }
.app .btn-sm { font-size: 14px; padding: 6px 16px; }
.app .btn-lg { font-size: 17px; padding: 12px 24px; }
.app h2, .app h3 { font-family: var(--forte); font-weight: 400; }
.prototipo { font-size: 13px; }
.prototipo { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 36px; padding: 6px 16px; background: var(--noite); color: var(--noite-cinza); font-size: 13px; text-align: center; }
.prototipo a { color: var(--q-300); font-weight: 600; text-decoration: none; }
.prototipo a:hover { text-decoration: underline; }

.app { display: grid; grid-template-columns: 256px 1fr; min-height: calc(100svh - 36px); }

/* ---------- barra lateral ---------- */
.lateral { position: sticky; top: 0; height: calc(100svh - 36px); display: flex; flex-direction: column; gap: 20px; padding: 20px 16px; border-right: 1px solid var(--linha); background: #faf9f6; }
.lateral .marca { padding: 4px 8px; }
.novo-btn { height: 44px; width: 100%; }
.menu { display: grid; gap: 2px; }
.menu a { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--tinta-2); font-size: 14px; font-weight: 500; transition: background-color .16s, color .16s; }
.menu a:hover { background: rgba(0, 0, 0, .045); color: var(--tinta); }
.menu a.atual { background: #fff; color: var(--tinta); box-shadow: var(--sombra-1); }
.menu a.atual .ic { color: var(--q-600); }
.menu small { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--q-500); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.lateral-pe { margin-top: auto; display: grid; gap: 12px; }
.saldo { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--linha); text-decoration: none; color: inherit; }
.saldo-topo { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.saldo-topo > span:first-child { display: inline-flex; gap: 6px; align-items: center; }
.saldo-topo .ic { color: var(--q-500); }
.saldo-topo b { font-variant-numeric: tabular-nums; }
.saldo-topo .chip { height: 22px; padding: 0 8px; font-size: 11px; font-weight: 600; }
.saldo-barra { height: 6px; border-radius: 3px; background: var(--fundo-2); overflow: hidden; }
.saldo-barra i { display: block; height: 100%; border-radius: 3px; background: #121212; transition: width .8s var(--suave); }
.saldo small { color: var(--cinza); font-size: 12px; }
.perfil { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--cinza); cursor: pointer; transition: background-color .16s; }
.perfil:hover { background: rgba(0, 0, 0, .045); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #fff; font-weight: 600; font-size: 13px; flex: none; }
.perfil-nome { display: grid; font-size: 14px; font-weight: 600; color: var(--tinta); line-height: 1.25; margin-right: auto; }
.perfil-nome small { font-weight: 400; color: var(--cinza); font-size: 12px; }

/* ---------- área principal ---------- */
.principal { min-width: 0; padding: 40px 48px 80px; }
.tela { max-width: 1120px; margin: 0 auto; animation: tela-entra .45s var(--suave); }
@keyframes tela-entra { from { opacity: 0; transform: translateY(10px); } }
.tela-topo { margin-bottom: 28px; }
.tela-topo.linha { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.saudacao { margin: 0 0 6px; color: var(--cinza); font-size: 15px; }
.tela h1 { font-family: var(--forte); font-weight: 400; font-size: 40px; letter-spacing: -.02em; line-height: 1.1; }
.tela h1 .serifa { color: #000; font-weight: 400; }
.tela h1.h1-menor { font-size: 24px; letter-spacing: -.02em; }
.tela h1.h1-menor .serifa { font-size: 27px; }
.tela-topo .sub { margin: 8px 0 0; color: var(--cinza); max-width: 60ch; font-size: 15px; }
.voltar { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; color: var(--cinza); font-size: 13px; text-decoration: none; }
.voltar:hover { color: var(--tinta); text-decoration: underline; }
.meta-linha { margin: 10px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--cinza); font-size: 14px; }
.chip-ok { background: #eafaef; border-color: #c9f0d4; color: #1f8a3c; }
.chip-ok .ic { stroke-width: 2.4; }
.acoes-topo { display: flex; gap: 8px; }
.bloco { margin-top: 48px; }
.bloco-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.bloco-topo h2 { font-size: 18px; letter-spacing: -.015em; }
.link-sutil { font-size: 14px; color: var(--cinza); text-decoration: none; }
.link-sutil:hover { color: var(--tinta); text-decoration: underline; }
.cinza { color: var(--cinza-2); font-size: 13px; }
.icone-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--cinza); transition: background-color .16s; }
.icone-btn:hover { background: rgba(0, 0, 0, .06); color: var(--tinta); }

/* ---------- compositor ---------- */
.compositor { position: relative; border-radius: var(--r-3); padding: 1.5px; background: var(--linha); box-shadow: var(--sombra-2); transition: background .3s; }
.compositor.pronto { background: var(--brilho); animation: girar-brilho 5s linear infinite; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .35); }
.compositor-in { background: #fff; border-radius: calc(var(--r-3) - 1.5px); padding: 24px; display: grid; gap: 20px; }
.segmento { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 14px; background: var(--fundo); width: min(560px, 100%); }
.segmento button { position: relative; z-index: 1; height: 40px; border: 0; background: transparent; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--cinza); cursor: pointer; transition: color .2s; }
.segmento button[aria-selected="true"] { color: var(--tinta); }
.segmento button:hover { color: var(--tinta); }
.segmento-fundo { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px -6px rgba(0, 0, 0, .18); transition: transform .35s var(--mola); }
.soltar { display: grid; justify-items: center; gap: 8px; padding: 40px 16px; border: 1.5px dashed var(--linha-2); border-radius: var(--r-2); background: var(--fundo); cursor: pointer; text-align: center; transition: border-color .16s, background-color .16s, transform .16s; }
.soltar:hover, .soltar.sobre { border-color: var(--q-400); background: var(--q-50); }
.soltar:focus-visible { outline: 3px solid var(--q-200); outline-offset: 2px; }
.soltar b { font-size: 15px; }
.soltar small { color: var(--cinza); font-size: 13px; }
.soltar-icone { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--q-600); box-shadow: var(--sombra-1); margin-bottom: 4px; }
.soltar-mini { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; padding: 16px; }
.soltar-mini .soltar-icone { width: 40px; height: 40px; margin: 0; }
.soltar-mini span:last-child { display: grid; }
.arquivo { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 16px; padding: 12px 12px 12px 12px; border-radius: var(--r-2); background: var(--fundo); border: 1px solid var(--linha); animation: tela-entra .35s var(--suave); }
.arquivo-thumb { width: 56px; height: 72px; border-radius: 10px; }
.arquivo-info { display: grid; gap: 4px; }
.arquivo-info b { font-size: 14px; }
.arquivo-info small { font-size: 13px; color: var(--cinza); }
.arquivo-barra { height: 6px; border-radius: 3px; background: var(--fundo-2); overflow: hidden; margin-top: 4px; }
.arquivo-barra i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--q-500); transition: width .2s linear; }
.arquivo-estado { font-size: 13px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.arquivo-estado.ok { color: #1f8a3c; font-weight: 600; }
.roteiro-txt { min-height: 168px; font-size: 15px; }
.roteiro-txt.curto { min-height: 96px; margin-bottom: 12px; }
.roteiro-pe { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--cinza); flex-wrap: wrap; }
.mini-select { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--pilula); background: var(--fundo); border: 1px solid var(--linha); color: var(--tinta-2); }
.mini-select select { border: 0; background: transparent; outline: none; font-size: 13px; cursor: pointer; }
.opcoes { display: grid; gap: 16px; }
.opcao { display: grid; gap: 8px; }
.opcao-rot { font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.opcao-rot small { font-weight: 400; color: var(--cinza-2); }
.opcao-ajuda { font-size: 13px; color: var(--cinza); }
.pilulas { display: flex; gap: 8px; flex-wrap: wrap; }
.pilulas button { height: 36px; padding: 0 14px; border-radius: var(--pilula); border: 1px solid var(--linha); background: #fff; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--tinta-2); cursor: pointer; transition: all .16s; }
.pilulas button:hover { border-color: var(--linha-2); transform: translateY(-1px); }
.pilulas button small { color: var(--cinza-2); font-weight: 400; }
.pilulas button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.pilulas button[aria-pressed="true"] small { color: rgba(255, 255, 255, .6); }
.pilulas button[aria-pressed="true"] .ic { color: var(--q-300); }
.fmt { display: inline-block; border: 1.5px solid currentColor; border-radius: 3px; opacity: .8; }
.fmt.v { width: 9px; height: 15px; } .fmt.h { width: 16px; height: 10px; } .fmt.q { width: 12px; height: 12px; }
.entrada-icone { position: relative; display: block; max-width: 560px; }
.entrada-icone .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cinza); }
.entrada-icone .entrada { padding-left: 42px; height: 44px; font-size: 14px; }
.objetivo .entrada { height: 48px; font-size: 15px; }
.compositor-pe { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--linha); }
.estimativa { display: grid; gap: 2px; }
.est-num { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; letter-spacing: -.01em; }
.est-num .ic { color: var(--q-500); }
.est-num b { font-variant-numeric: tabular-nums; }
.estimativa small { color: var(--cinza); font-size: 13px; }

/* estilos e cards de vídeo */
.estilos-app { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.estilo-app { padding: 6px; border: 1px solid var(--linha); cursor: pointer; text-align: left; background: #fff; border-radius: 16px; }
.estilo-app .midia { aspect-ratio: 4 / 5; border-radius: 11px; }
.estilo-app span { display: block; padding: 10px 6px 4px; font-size: 13px; font-weight: 600; }
.estilo-app.ativo { border-color: var(--q-400); box-shadow: 0 0 0 3px var(--q-100); }
.grade-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.vcard-app { padding: 6px; border: 1px solid var(--linha); text-decoration: none; color: inherit; display: block; background: #fff; border-radius: 16px; }
.vcard-app .midia { aspect-ratio: 4 / 5; border-radius: 11px; }
.vcard-app .estado { position: absolute; z-index: 2; left: 8px; top: 8px; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .92); color: #1f8a3c; backdrop-filter: blur(6px); }
.vcard-app .estado.prod { color: var(--q-700); }
.vcard-app .estado.rasc { color: var(--cinza); }
.vcard-app .estado .ponto-vivo { width: 6px; height: 6px; }
.vcard-app .rascunho { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--cinza); font-size: 13px; background: repeating-linear-gradient(135deg, var(--fundo) 0 10px, #f0efea 10px 20px); }
.vcard-app-info { padding: 10px 6px 4px; }
.vcard-app-info b { display: block; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard-app-info small { color: var(--cinza); font-size: 12px; }
.filtros-app { margin-bottom: 20px; }
.busca { position: relative; width: min(320px, 100%); }
.busca .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cinza); }
.busca .entrada { height: 40px; padding-left: 38px; font-size: 14px; background: #fff; }
.vazio { color: var(--cinza); text-align: center; padding: 40px 0; }

/* ---------- produção ---------- */
.producao { display: grid; grid-template-columns: 260px 1fr 300px; gap: 20px; align-items: start; }
.etapas { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }
.etapa { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px; border-radius: 12px; transition: background-color .3s; }
.etapa-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--fundo); color: var(--cinza-2); border: 1px solid var(--linha); transition: all .3s var(--mola); }
.etapa b { display: block; font-size: 14px; font-weight: 600; color: var(--cinza); transition: color .3s; }
.etapa small { display: block; font-size: 12px; color: var(--cinza-2); line-height: 1.4; margin-top: 2px; }
.etapa.feita .etapa-ic { background: var(--verde); border-color: var(--verde); color: #fff; }
.etapa.feita b { color: var(--tinta); }
.etapa.ativa { background: var(--q-50); }
.etapa.ativa .etapa-ic { background: #fff; border-color: var(--q-300); color: var(--q-600); }
.etapa.ativa .etapa-ic svg { animation: gira 2.4s linear infinite; }
.etapa.ativa b { color: var(--q-800); }
.palco { display: grid; gap: 16px; justify-items: center; }
.palco-tela { position: relative; width: min(300px, 100%); aspect-ratio: 9 / 16; border-radius: 28px; padding: 3px; background: var(--linha); box-shadow: var(--sombra-2); }
.palco-brilho { position: absolute; inset: 0; border-radius: inherit; background: var(--brilho); animation: girar-brilho 4s linear infinite; opacity: 1; transition: opacity .6s; }
.palco-tela.parado .palco-brilho { opacity: 0; }
.palco-in { position: relative; height: 100%; border-radius: 25px; background: #fff; }
.palco-in img { transition: opacity .5s, transform .8s var(--suave), filter .6s; }
.palco-in img.troca { opacity: 0; transform: scale(1.04); filter: blur(6px); }
.palco-vazio { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: 10px; background: #fff; color: var(--cinza); font-size: 14px; transition: opacity .5s; }
.palco-vazio .ic { color: var(--q-500); animation: gira 3s linear infinite; }
.palco-vazio.some { opacity: 0; pointer-events: none; }
.palco-info { width: min(300px, 100%); display: grid; gap: 8px; }
.palco-prog { height: 6px; border-radius: 3px; background: var(--fundo-2); overflow: hidden; }
.palco-prog i { display: block; height: 100%; width: 0; border-radius: 3px; background: #121212; transition: width .9s var(--suave); }
.palco-linha { display: flex; justify-content: space-between; font-size: 13px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.palco-linha b { color: var(--tinta); }
.cenas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: min(420px, 100%); }
.cena { aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: var(--fundo-2); border: 1px solid var(--linha); position: relative; }
.cena img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(.9); transition: opacity .4s, transform .5s var(--mola); }
.cena.pronta img { opacity: 1; transform: none; }
.cena.ativa { border-color: var(--q-400); box-shadow: 0 0 0 2px var(--q-100); }
.entendeu { display: grid; gap: 12px; }
.bloco-card { padding: 18px; display: grid; gap: 12px; }
.bloco-card h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: -.01em; }
.bloco-card h3 .ic { color: var(--q-600); }
.dados { margin: 0; display: grid; gap: 10px; }
.dados div { display: grid; grid-template-columns: 112px 1fr; gap: 8px; font-size: 13px; }
.dados dt { color: var(--cinza); }
.dados dd { margin: 0; font-weight: 500; }
.dado-p { margin: 0; font-size: 13px; color: var(--tinta-2); line-height: 1.5; }
.paleta { display: flex; gap: 6px; }
.paleta i { width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .08); }
.refs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.refs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: var(--fundo-2); }
.assets-linha { display: flex; align-items: center; gap: 8px; }
.app-icone { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.app-icone svg { width: 18px; height: 18px; }
.app-icone.wa { background: #25d366; }
.app-icone.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.revela { opacity: .35; filter: saturate(0); transition: opacity .6s, filter .6s; }
.revela.on { opacity: 1; filter: none; }
.registro { margin-top: 20px; padding: 0; overflow: hidden; }
.registro-topo { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.registro-topo h3 { font-size: 14px; }
.registro-topo span { font-size: 13px; color: var(--cinza); }
.registro-corpo { max-height: 220px; overflow: auto; padding: 8px 18px 14px; font: 13px/1.7 ui-monospace, "SF Mono", Consolas, monospace; color: var(--tinta-2); }
.registro-corpo div { display: flex; gap: 12px; animation: tela-entra .35s var(--suave); }
.registro-corpo time { color: var(--cinza-2); flex: none; }
.registro-corpo .s { color: var(--q-500); }

/* ---------- entrega ---------- */
.entrega { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.player-coluna { display: grid; gap: 16px; justify-items: center; }
.player { width: min(380px, 100%); aspect-ratio: 9 / 16; border-radius: 24px; background: #000; box-shadow: var(--sombra-2); }
.player.h { width: 100%; aspect-ratio: 16 / 9; }
.player.q { width: min(560px, 100%); aspect-ratio: 1; }
.player video { object-fit: contain; background: #000; }
.tira { display: flex; gap: 6px; width: 100%; max-width: 640px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.tira button { position: relative; flex: none; width: 56px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--fundo-2); transition: border-color .2s, transform .16s; }
.tira button:hover { transform: translateY(-2px); }
.tira button.atual { border-color: var(--q-500); }
.tira img { width: 100%; height: 100%; object-fit: cover; }
.tira time { position: absolute; left: 3px; bottom: 3px; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10px; }
.entrega-lado { display: grid; gap: 12px; }
.baixar-lista { display: grid; gap: 8px; }
.baixar { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--linha); background: #fff; text-decoration: none; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.baixar > .ic:first-child { color: var(--q-600); }
.baixar span { display: grid; }
.baixar b { font-size: 14px; }
.baixar small { font-size: 12px; color: var(--cinza); }
.baixar > .ic:last-child { color: var(--cinza); }
.ajuste-txt { min-height: 88px; font-size: 14px; }
.ajustes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ajustes li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--fundo); animation: tela-entra .35s var(--suave); }
.ajustes time { font-variant-numeric: tabular-nums; color: var(--q-700); font-weight: 600; }
.ajustes em { font-style: normal; font-size: 12px; color: var(--q-700); display: inline-flex; align-items: center; gap: 6px; }

/* ---------- marca ---------- */
.marca-grade { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.marca-form { padding: 24px; display: grid; gap: 20px; }
.marca-logo { display: flex; gap: 16px; align-items: center; }
.marca-logo > div { display: grid; gap: 4px; justify-items: start; }
.marca-logo small { color: var(--cinza); font-size: 13px; margin-bottom: 6px; }
.logo-solta { width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; background: var(--tinta); color: #fff; font-weight: 700; letter-spacing: -.02em; cursor: pointer; overflow: hidden; }
.logo-solta img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cor { display: grid; gap: 6px; font-size: 12px; color: var(--cinza); cursor: pointer; }
.cor input { width: 100%; height: 48px; border: 1px solid var(--linha); border-radius: 12px; padding: 4px; background: #fff; cursor: pointer; }
.cor input::-webkit-color-swatch-wrapper { padding: 0; }
.cor input::-webkit-color-swatch { border: 0; border-radius: 8px; }
.cor input::-moz-color-swatch { border: 0; border-radius: 8px; }
.interruptor { display: flex; gap: 12px; align-items: center; font-size: 14px; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; }
.interruptor i { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--linha-2); flex: none; transition: background-color .2s; }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .3s var(--mola); }
.interruptor input:checked + i { background: var(--verde); }
.interruptor input:checked + i::after { transform: translateX(18px); }
.interruptor input:focus-visible + i { outline: 3px solid var(--q-200); outline-offset: 2px; }
.marca-pe { display: flex; justify-content: flex-end; }
.marca-previa { position: sticky; top: 24px; display: grid; gap: 10px; }
.quadro-previa { --c-texto: #1d1d1f; --c-destaque: #c6f432; --c-fundo: #f5f5f7; --c-cartao: #fff; --f: "SF Pro Display", -apple-system, "Inter", sans-serif;
  aspect-ratio: 9 / 16; border-radius: 28px; background: var(--c-fundo); box-shadow: var(--sombra-2); padding: 28px 22px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; font-family: var(--f); color: var(--c-texto); overflow: hidden; transition: background-color .3s; }
.qp-logo { font-weight: 700; letter-spacing: -.02em; font-size: 15px; }
.qp-cartao { width: 100%; background: var(--c-cartao); border-radius: 22px; padding: 22px; display: grid; gap: 8px; justify-items: start; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .3); animation: flutua 5s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-6px) rotate(-.6deg); } }
.qp-icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-texto); color: var(--c-destaque); }
.qp-cartao b { font-size: 20px; letter-spacing: -.02em; line-height: 1.15; }
.qp-cartao small { font-size: 13px; opacity: .65; line-height: 1.4; }
.qp-botao { margin-top: 8px; height: 38px; padding: 0 18px; border-radius: 19px; background: var(--c-destaque); color: var(--c-texto); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; }
.qp-legenda { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; text-align: center; }
.qp-legenda em { font-style: normal; background: var(--c-destaque); padding: 0 6px; border-radius: 6px; }

/* ---------- créditos ---------- */
.creditos-grade { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; }
.plano-atual { padding: 24px; display: grid; gap: 12px; justify-items: start; }
.pa-topo { display: flex; justify-content: space-between; width: 100%; align-items: center; gap: 12px; }
.pa-prox { font-size: 13px; color: var(--cinza); }
.preco-app { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.preco-app span { font-weight: 600; font-size: 16px; }
.preco-app b { font-family: var(--forte); font-weight: 400; font-size: 40px; letter-spacing: -.03em; color: #000; font-variant-numeric: tabular-nums; }
.preco-app small { color: var(--cinza); font-size: 13px; }
.saldo-grande { padding: 24px; display: flex; gap: 24px; align-items: center; }
.saldo-grande > div:last-child { display: grid; gap: 10px; justify-items: start; }
.saldo-grande h3 { font-size: 18px; letter-spacing: -.015em; }
.anel { position: relative; width: 132px; height: 132px; flex: none; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel circle { fill: none; stroke: var(--fundo-2); stroke-width: 10; }
.anel .anel-v { stroke: var(--q-500); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: calc(327 * (1 - var(--v))); transition: stroke-dashoffset 1s var(--suave); }
.anel > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anel b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.anel small { color: var(--cinza); font-size: 12px; }
.pacotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pacote { position: relative; padding: 24px; display: grid; justify-items: start; gap: 2px; }
.pacote > b { font-size: 24px; letter-spacing: -.02em; }
.pacote > span { color: var(--cinza); font-size: 14px; }
.pacote > small { color: var(--cinza-2); font-size: 12px; margin-top: 6px; }
.pacote p { margin: 16px 0; font-size: 18px; font-weight: 600; }
.pacote .btn { width: 100%; height: 44px; }
.pacote.destaque { background: #121212; color: #fff; border-color: #2a2a2a; }
.pacote.destaque > span, .pacote.destaque > small { color: rgba(255,255,255,.6); }
.pacote.destaque .btn-q { background: #fff; color: #121212; border-color: transparent; }
.pac-selo { position: absolute; top: 16px; right: 16px; height: 26px; font-size: 12px; }
.tabela-caixa { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-weight: 500; color: var(--cinza); font-size: 12px; padding: 12px 18px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 12px 18px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background-color .16s; }
.tabela tbody tr:hover { background: var(--fundo); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td.num { font-weight: 600; }
.tabela td.mais { color: #1f8a3c; }

/* aviso (toast) */
.aviso { position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: var(--pilula); font-size: 14px; font-weight: 500; box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .6); transition: opacity .25s, transform .35s var(--mola); max-width: calc(100% - 32px); text-align: center; }
.aviso.on { opacity: 1; transform: translate(-50%, 0); }

.abas { display: none; }

/* ---------- responsivo ---------- */
@media (max-width: 1240px) {
  .producao { grid-template-columns: 240px 1fr; }
  .entendeu { grid-column: span 2; grid-template-columns: repeat(2, 1fr); }
  .estilos-app { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .principal { padding: 24px 16px 112px; }
  .abas { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(250, 249, 246, .86); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-top: 1px solid var(--linha); }
  .abas a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; min-height: 48px; border-radius: 10px; color: var(--cinza); text-decoration: none; font-size: 11px; font-weight: 500; }
  .abas a.atual { color: var(--q-600); }
  .producao { grid-template-columns: 1fr; }
  .etapas { grid-template-columns: repeat(2, 1fr); }
  .entendeu { grid-column: auto; grid-template-columns: 1fr; }
  .entrega { grid-template-columns: 1fr; }
  .marca-grade { grid-template-columns: 1fr; }
  .marca-previa { position: static; max-width: 320px; margin: 0 auto; width: 100%; }
  .creditos-grade { grid-template-columns: 1fr; }
  .pacotes { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tela h1 { font-size: 30px; }
  .compositor-in { padding: 16px; }
  .segmento button { font-size: 12.5px; gap: 6px; white-space: nowrap; letter-spacing: -.01em; }
  .so-grande { display: none; }
  .segmento button .ic { display: none; }
  .estilos-app { grid-template-columns: repeat(2, 1fr); }
  .grade-videos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .compositor-pe .btn { width: 100%; }
  .etapas { grid-template-columns: 1fr; }
  .saldo-grande { flex-direction: column; align-items: flex-start; }
  .acoes-topo { width: 100%; }
  .acoes-topo .btn { flex: 1; }
  .cores { grid-template-columns: repeat(2, 1fr); }
  .arquivo { grid-template-columns: 48px 1fr auto; }
  .arquivo-estado { display: none; }
}