/* Páginas do cliente (pedido, meus pedidos, regras). Tokens em tema.css.
   Topo azul-noite com o brilho da marca, conteúdo claro em cartões, uma etapa por tela,
   barra de etapas presa no topo e botões de avançar presos embaixo (polegar). */

.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px calc(40px + env(safe-area-inset-bottom)); }

/* ---------- topo ---------- */
.faixa { position: relative; overflow: hidden; background: var(--night); color: #fff; padding: 0 16px 22px;
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(21, 101, 255, .38) 0%, transparent 55%), radial-gradient(80% 70% at 0% 100%, rgba(0, 208, 132, .16) 0%, transparent 60%); }
.faixa::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); }
.faixa-in { position: relative; max-width: 688px; margin: 0 auto; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 6px; min-height: 64px; }
.topo-dir { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.topo-dir a, .conta-topo { color: #d4ddef; text-decoration: none; font-weight: 500; }
.conta-topo:empty { display: none !important; }
/* Menu da conta (topo): bolinha com a inicial/foto, nome, e-mail e "Sair da conta". */
.conta-menu { position: relative; display: inline-flex; }
.conta-botao { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer; overflow: hidden;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font: 700 16px var(--title); }
.conta-botao img { width: 100%; height: 100%; object-fit: cover; }
.conta-botao:focus-visible { outline: 2px solid #00c2ff; outline-offset: 2px; }
.conta-caixa { position: fixed; right: 16px; top: 72px; z-index: 40; width: min(270px, calc(100vw - 32px)); padding: 14px; border-radius: 16px;
  background: #fff; color: var(--ink); box-shadow: 0 12px 32px rgba(10, 19, 40, .25); text-align: left; }
.conta-caixa.oculto { display: none; }
.conta-nome { margin: 0; font: 700 15px/1.3 var(--title); color: var(--ink) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-email { margin: 2px 0 0; font-size: 13px !important; color: var(--muted, #5b6680) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-sair { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line, #dfe4ee); background: var(--surface, #f4f6fa); color: var(--ink); font: 600 15px var(--text); }
.conta-sair:hover { background: #e9edf5; }
/* Celular: logo, conta e "Meus pedidos" cabem numa linha (sem quebrar a marca). */
.topo .wm-txt { white-space: nowrap; }
@media (max-width: 440px) { .topo .wm-txt small { display: none; } .topo-dir { gap: 8px; } .topo-dir .pilula { padding: 8px 12px; } .topo-dir .pilula .ic { display: none; } }
.pilula { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff !important; font-weight: 600 !important; white-space: nowrap; }
.pilula:hover { background: rgba(255, 255, 255, .14); }
.pilula .ic { width: 18px; height: 18px; }
.marca-logo:focus-visible { outline: 2px solid #00c2ff; outline-offset: 2px; }

.heroi { padding: 14px 0 8px; }
.selo-heroi { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: rgba(124, 255, 70, .1); border: 1px solid rgba(124, 255, 70, .3); color: #c9ffb0; font: 600 12.5px/1.2 var(--text); }
.selo-heroi span { width: 7px; height: 7px; border-radius: 50%; background: var(--limao); box-shadow: 0 0 0 4px rgba(124, 255, 70, .18); }
.faixa h1 { margin: 0 0 8px; font: 800 clamp(30px, 8.4vw, 46px)/1.04 var(--title); letter-spacing: -.02em; max-width: 620px; }
.faixa h1 em { font-style: normal; background: linear-gradient(90deg, #00c2ff, #00d084 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.faixa p { margin: 0; color: #c7d2e8; max-width: 520px; font-size: 15.5px; }
.como { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0 6px; padding: 0; }
.como li { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); font: 500 12.5px/1.25 var(--text); color: #dbe4f5; }
.como b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--grad); color: #fff; font: 700 12.5px var(--title); }
@media (max-width: 560px) { .como { gap: 6px; margin-top: 16px; } .como li { padding: 8px; font-size: 11.5px; gap: 5px; } .como b { width: 22px; height: 22px; font-size: 12px; } }
/* fora da etapa 1, o topo fica compacto: o foco é a tarefa */
body[data-etapa]:not([data-etapa="0"]):not([data-etapa="1"]) .heroi { display: none; }
body[data-etapa="1"] .heroi .como, body[data-etapa="1"] .heroi .selo-heroi { display: none; }
body[data-etapa="1"] .faixa h1 { font-size: clamp(26px, 7vw, 38px); }
body[data-etapa]:not([data-etapa="0"]):not([data-etapa="1"]) .faixa { padding-bottom: 6px; }

/* ---------- voltar ao catálogo (abaixo da faixa escura, no início da área clara) ----------
   Mesma linha e mesmo recuo da coluna do conteúdo em todas as telas; destaque pela cor do ícone, não pelo tamanho. */
.trilha { max-width: 720px; margin: 0 auto; padding: 14px 16px 2px; }
.voltar-catalogo { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 15px 6px 6px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sombra); color: var(--ink-2); font: 600 14px/1 var(--text); text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; }
.voltar-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #1565ff, #00d084); color: #fff;
  box-shadow: 0 2px 6px rgba(21, 101, 255, .28); }
.voltar-ic .ic { width: 17px; height: 17px; stroke-width: 2.6; }
.voltar-catalogo:hover { border-color: var(--primary-borda); color: var(--ink); }
.voltar-catalogo:active { background: var(--primary-soft); }
.voltar-catalogo:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Login: a coluna é o cartão centralizado (460 px), então o link acompanha a borda dele. */
body:has(main > .login:not(.oculto)) .trilha { max-width: calc(460px + 32px); }
@media (prefers-reduced-motion: no-preference) {
  .voltar-catalogo { transition: border-color .2s, color .2s, background-color .2s; }
  .voltar-ic { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
  .voltar-catalogo:hover .voltar-ic, .voltar-catalogo:active .voltar-ic { transform: translateX(-3px); }
}

/* ---------- barra de etapas (presa no topo) ---------- */
.etapas { position: sticky; top: 0; z-index: 15; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  margin: 0 -16px 8px; padding: 12px 16px 10px; background: rgba(242, 245, 250, .92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.etapas li { position: relative; display: grid; gap: 7px; font: 500 12px/1.2 var(--text); color: var(--muted); text-align: left; }
.etapas li::before { content: ""; height: 5px; border-radius: 99px; background: var(--line-forte); }
.etapas li span { display: none; }
.etapas li.feita { color: var(--ink-2); }
.etapas li.feita::before { background: var(--verde); }
.etapas li.atual { color: var(--ink); font-weight: 700; }
.etapas li.atual::before { background: var(--grad); box-shadow: 0 2px 8px rgba(21, 101, 255, .35); }
@media (max-width: 380px) { .etapas li { font-size: 11px; } }

/* ---------- etapas ---------- */
.passo { padding-top: 6px; }
.titulo-passo { margin: 12px 0 4px; font: 800 clamp(24px, 6.6vw, 32px)/1.12 var(--title); letter-spacing: -.02em; }
.passo > .sub { margin-bottom: 18px; font-size: 15px; }
.cartao h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 18px/1.2 var(--title); }
.cartao h3 .num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--night); color: #fff; font: 700 14px var(--title); }
.bloco { padding: 20px 18px; }
.dica-campo { margin: -6px 0 0; color: var(--muted); font-size: 13px; }
#passoLogin { margin-top: 18px; }
@media (prefers-reduced-motion: no-preference) { .passo:not(.oculto) { animation: entrar .28s cubic-bezier(.2, .8, .2, 1); } }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* navegação presa embaixo (no alcance do polegar) */
.navegar { position: sticky; bottom: 0; z-index: 14; display: flex; justify-content: space-between; gap: 10px; margin: 18px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(242, 245, 250, 1) 70%, rgba(242, 245, 250, 0)); }
.navegar .botao { width: auto; min-width: 150px; }
.navegar .botao.neutro { min-width: 110px; background: var(--bg); }
.navegar > span:empty { display: none; }
.navegar > span:empty + .botao { margin-left: auto; }
@media (max-width: 560px) { .navegar .botao:not(.neutro) { flex: 1; min-width: 0; } .navegar .botao.neutro { min-width: 0; flex: 0 0 34%; } .navegar > span:empty + .botao { flex: 1; } }

/* ---------- retomar pedido ---------- */
.retomar { display: grid; gap: 14px; background: var(--bg); border: 1px solid var(--primary-borda); border-radius: var(--r-lg); padding: 16px; margin: 16px 0; box-shadow: var(--sombra-media); }
.retomar-txt { display: flex; gap: 12px; align-items: center; }
.retomar-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); flex-shrink: 0; }
.retomar b { font: 700 16px/1.25 var(--title); display: block; }
.retomar small { color: var(--muted); font-size: 13.5px; }
.retomar-botoes { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.retomar-botoes .botao { width: 100%; }
@media (min-width: 640px) { .retomar { grid-template-columns: 1fr auto; align-items: center; } .retomar-botoes { display: flex; } }

/* ---------- 1. tipos ---------- */
.tipos { display: grid; gap: 14px; }
@media (min-width: 640px) { .tipos { grid-template-columns: 1fr 1fr; } .tipo.em-breve { grid-column: 1 / -1; } }
.tipo { position: relative; display: flex; flex-direction: column; text-align: left; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: 16px 18px 18px; box-shadow: var(--sombra); color: var(--ink); }
.tipo:hover:not(:disabled):not(.em-breve) { border-color: var(--primary-borda); box-shadow: var(--sombra-media); }
.tipo[aria-pressed="true"] { background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box; border: 2px solid transparent; box-shadow: 0 14px 34px -14px rgba(21, 101, 255, .45); padding: 15.5px 17.5px 17.5px; }
.tipo:disabled { opacity: .5; cursor: not-allowed; }
.tipo-topo { display: flex; justify-content: space-between; align-items: center; min-height: 26px; margin-bottom: 8px; }
.tipo .marca-sel { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-forte); background: var(--bg); display: grid; place-items: center; flex-shrink: 0; }
.tipo[aria-pressed="true"] .marca-sel { background: var(--primary); border-color: var(--primary); }
.tipo[aria-pressed="true"] .marca-sel::after { content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }
.tipo b.nome { display: block; font: 800 22px/1.15 var(--title); letter-spacing: -.01em; }
.tipo p { margin: 6px 0 14px; color: var(--muted); font-size: 14px; }
.tipo .preco { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.tipo .preco b { font: 800 32px/1 var(--title); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tipo .preco s { color: var(--muted); font-size: 15px; }
.tipo .preco small { color: var(--muted); font-size: 13px; }
.tipo .lanc { padding: 5px 10px; border-radius: 999px; background: var(--verde-soft); color: var(--verde-texto); font: 700 11.5px/1.2 var(--text); letter-spacing: .04em; text-transform: uppercase; }
.tipo .lanc.breve { background: var(--surface-2); color: var(--muted); }
.tipo ul { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line-forte); list-style: none; display: grid; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.tipo ul li { display: flex; gap: 8px; align-items: flex-start; }
.tipo ul li::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
  background: var(--verde-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23007a4f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.tipo.em-breve { background: transparent; border: 1.5px dashed var(--line-forte); box-shadow: none; color: var(--muted); padding: 14px 18px; }
.tipo.em-breve b.nome { font-size: 17px; color: var(--ink-2); }
.tipo.em-breve p { margin-bottom: 0; }

/* ---------- 2. detalhes ---------- */
.grupo { margin-bottom: 20px; }
.grupo > span { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 9px; font-weight: 600; }
.formatos { display: grid; grid-template-columns: 1fr 1fr; }
.formatos .chip { flex-direction: column; justify-content: center; text-align: center; gap: 8px; padding: 12px 8px; min-height: 92px; font-size: 13.5px; }
.formatos .chip i { display: block; border: 2px solid currentColor; border-radius: 4px; opacity: .65; transform: scale(1.35); margin: 6px 0 4px; }
.formatos .chip.ativo i { opacity: 1; background: rgba(21, 101, 255, .12); }
@media (min-width: 640px) { .formatos { grid-template-columns: repeat(4, 1fr); } }
.textos-obrig .campo span { font-weight: 500; color: var(--muted); font-size: 13px; }
.mais-textos { margin: -4px 0 4px; }
.mais-textos summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary-escuro); font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; }
.mais-textos summary::-webkit-details-marker { display: none; }
.mais-textos[open] summary { margin-bottom: 6px; }
.cores { display: flex; gap: 8px; flex-wrap: wrap; }
.cor { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 10px; border: 1.5px solid var(--line-forte); border-radius: 12px; background: var(--bg); font-size: 14px; cursor: pointer; }
.cor:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.cor input[type=color] { width: 32px; height: 32px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: none; cursor: pointer; box-shadow: 0 0 0 1px var(--line-forte); }
.cor input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.cor input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.cor input[type=checkbox] { width: 20px; height: 20px; }
.mais-opcoes { margin-top: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.mais-opcoes > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 12px 16px; cursor: pointer; }
.mais-opcoes > summary span { display: grid; gap: 1px; }
.mais-opcoes > summary b { font: 600 15px/1.3 var(--text); }
.mais-opcoes > summary small { color: var(--muted); font-size: 13px; }
.mais-opcoes > summary::-webkit-details-marker { display: none; }
.mais-opcoes > summary::after { content: ""; flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231565ff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: inset 0 0 0 1px var(--line); }
.mais-opcoes[open] > summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231565ff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.mais-opcoes[open] { background: var(--bg); }
.mais-opcoes[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.mais-opcoes > :not(summary) { margin-left: 16px; margin-right: 16px; }
.mais-opcoes > :last-child:not(summary) { margin-bottom: 16px; }

/* ---------- 3. arquivos ---------- */
.zonas { display: grid; gap: 10px; margin-bottom: 12px; }
@media (min-width: 640px) { .zonas { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.zona { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border: 1.5px dashed #9fbaf5; border-radius: var(--r-lg); background: var(--bg); cursor: pointer; text-align: left; transition: border-color .15s, background-color .15s; }
.zona:hover { border-color: var(--primary); background: #fafcff; }
.zona-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); flex-shrink: 0; }
.zona-ic .ic { width: 24px; height: 24px; }
.zona-txt { display: grid; gap: 1px; flex: 1; min-width: 0; }
.zona b { font: 700 16px/1.25 var(--title); }
.zona small { color: var(--muted); font-size: 13px; }
.zona-mais { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; font: 500 22px/1 var(--text); flex-shrink: 0; }
.zona input { display: none; }
.zona.arrastando { border-color: var(--primary); background: var(--primary-soft); }
.nota-envio { display: flex; gap: 10px; align-items: flex-start; margin: 4px 2px 16px; color: var(--muted); font-size: 13.5px; }
.nota-envio .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--primary); }
.cenas { display: grid; gap: 10px; }
.cena { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.cena.falha { border-color: var(--erro); background: var(--erro-soft); }
.cena .mini { width: 64px; height: 64px; border-radius: 12px; background: var(--surface); color: var(--muted); overflow: hidden; display: grid; place-items: center; position: relative; }
.cena .mini .ic { width: 26px; height: 26px; }
.cena .mini img, .cena .mini video { width: 100%; height: 100%; object-fit: cover; }
.cena .mini b { position: absolute; top: 4px; left: 4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px; background: rgba(10, 19, 40, .82); color: #fff; font: 700 12px/22px var(--title); text-align: center; }
.cena .info { min-width: 0; }
.cena .nome { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cena .det { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.cena .det.ok { color: var(--verde-texto); font-weight: 600; }
.cena .det.ok::before { content: "● "; font-size: 10px; vertical-align: 1px; }
.cena .det.ruim { color: var(--erro); font-weight: 600; }
.cena .barra { height: 6px; background: var(--surface-2); border-radius: 6px; overflow: hidden; margin-top: 7px; }
.cena .barra div { height: 100%; background: var(--grad); transition: width .3s; }
.cena .logo-sel { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 4px; padding: 4px 10px 4px 6px; border-radius: 10px; background: var(--surface); font-size: 13px; font-weight: 600; cursor: pointer; }
.cena .logo-sel:has(input:checked) { background: var(--primary-soft); color: var(--primary-escuro); }
.cena .logo-sel input { width: 18px; height: 18px; margin: 0; }
.cena .acoes-cena { display: grid; grid-template-columns: 40px 40px; gap: 6px; }
.cena .acoes-cena button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); color: var(--ink-2); }
.cena .acoes-cena button .ic { width: 18px; height: 18px; }
.cena .acoes-cena button:hover:not(:disabled) { background: var(--surface); }
.cena .acoes-cena button:disabled { opacity: .3; cursor: default; }
.cena .acoes-cena .remover { grid-column: span 2; width: auto; height: 36px; font-size: 13px; font-weight: 600; color: var(--erro); border-color: transparent; background: transparent; }
.cena .acoes-cena .remover:hover { background: var(--erro-soft) !important; }
@media (max-width: 560px) {
  .cena { grid-template-columns: 64px 1fr; row-gap: 8px; }
  .cena .acoes-cena { grid-column: 1 / -1; display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
  .cena .acoes-cena button { width: 44px; height: 40px; }
  .cena .acoes-cena .remover { margin-left: auto; width: auto; padding: 0 12px; height: 40px; }
}
.vazio-cenas { padding: 22px 12px; border-radius: var(--r-md); background: var(--surface); font-size: 14px; }
.alerta-arq { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--alerta-soft); border: 1px solid var(--alerta-borda); color: #6b3a00; font-size: 13.5px; }
.alerta-arq .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--alerta-forte); }

/* ---------- 4. revisão ---------- */
#resumo { background: var(--bg); border: var(--borda); border-radius: var(--r-lg); box-shadow: var(--sombra); margin-bottom: 16px; overflow: hidden; }
.bloco-resumo { padding: 14px 18px 16px; border-bottom: 1px solid var(--line); }
.bloco-resumo:last-child { border-bottom: 0; }
.bloco-resumo .cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.bloco-resumo .cab b { font: 700 16px var(--title); }
.bloco-resumo .cab button { min-height: 40px; padding: 6px 12px; margin-right: -10px; background: none; border: 0; border-radius: 10px; color: var(--primary-escuro); font-weight: 600; font-size: 14px; }
.bloco-resumo .cab button:hover { background: var(--primary-soft); }
.bloco-resumo dl { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 6px 14px; font-size: 14px; }
.bloco-resumo dt { color: var(--muted); }
.bloco-resumo dd { margin: 0; font-weight: 500; }
.regras ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); counter-reset: r; }
.regras ul li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; counter-increment: r; }
.regras ul li::before { content: counter(r); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); font: 700 12px var(--title); }
.aceite { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; border: 1.5px solid var(--primary-borda); border-radius: var(--r-md); background: var(--primary-soft); font-weight: 600; cursor: pointer; }
.aceite input { width: 24px; height: 24px; flex-shrink: 0; margin: 0; }
.total { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--night); color: #fff;
  background-image: radial-gradient(90% 120% at 100% 0%, rgba(21, 101, 255, .4), transparent 60%); box-shadow: var(--sombra-media); }
.total small { display: block; color: #a9b6d3; font-size: 13px; }
.total b { font: 800 34px/1.05 var(--title); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.total s { color: #8190b3; font: 500 15px var(--text); margin-left: 8px; letter-spacing: 0; }
.total .botao:disabled { background: rgba(255, 255, 255, .1); color: #8d9bbb; }
@media (min-width: 560px) { .total { grid-template-columns: 1fr auto; align-items: center; } .total .botao { width: auto; min-width: 220px; } }

/* ---------- 5. pix ---------- */
.pix-cartao { padding: 22px 18px; }
.pix-instrucao { text-align: center; }
.pix { display: grid; grid-template-columns: 1fr; gap: 16px; justify-items: center; text-align: center; margin-bottom: 6px; }
@media (min-width: 640px) { .pix { grid-template-columns: 240px 1fr; justify-items: start; text-align: left; align-items: center; } .pix-instrucao { text-align: left; } }
.qr { width: 236px; height: 236px; background: #fff; border-radius: var(--r-lg); padding: 12px; border: 1px solid var(--line); box-shadow: var(--sombra-media); }
.qr:empty { display: none; }
.qr svg { width: 100%; height: 100%; display: block; }
.pix-info { width: 100%; }
.valor-rot { margin: 0; color: var(--muted); font-size: 13px; font-weight: 500; }
.pix .valor { margin: 0 0 14px; font: 800 40px/1.05 var(--title); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.copia { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.copia input { font: 500 13px/1.3 ui-monospace, Consolas, monospace; color: var(--ink-2); background: var(--surface); text-overflow: ellipsis; }
#seloPix { display: inline-flex; flex-direction: row; width: auto; white-space: normal; text-align: left; }
#btnSimular, #btnJaPaguei, #btnNovoPix { margin-top: 10px; }
#btnSimular { min-height: 46px; font-size: 14.5px; }
.espera { text-align: center; padding: 14px 0; }
.espera h3 { justify-content: center; font-size: 24px; margin: 14px 0 6px; }
.espera p { color: var(--muted); margin: 0; }
.pulso { width: 18px; height: 18px; margin: 6px auto 0; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgba(0, 208, 132, .5); }
@media (prefers-reduced-motion: no-preference) { .pulso { animation: pulso 1.6s infinite; } }
@keyframes pulso { 70% { box-shadow: 0 0 0 16px rgba(0, 208, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 208, 132, 0); } }
.auto-pix { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 12px; border-radius: var(--r-md); background: var(--verde-soft); color: var(--verde-texto); font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.auto-pix .pulso { width: 12px; height: 12px; margin: 0; flex-shrink: 0; }
.qr.vencido { opacity: .25; filter: grayscale(1); }

/* ---------- final ---------- */
.final { text-align: center; padding: 30px 20px 22px; }
.final .icone { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 6px; border-radius: 50%; background: var(--grad); color: #fff; box-shadow: 0 14px 30px -10px rgba(0, 208, 132, .6); }
.final .icone .ic { width: 38px; height: 38px; stroke-width: 2.6; }
.final h2 { font-size: 28px; margin: 10px 0 6px; }
.final p { color: var(--muted); margin: 0 0 10px; }
.final .botao { margin-top: 10px; }

/* ---------- referências de estilo ---------- */
.refs-bloco { margin-bottom: 0; }
.refs-bloco .ajuda { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.zona-ref { margin-bottom: 10px; min-height: 68px; }
.ref-link { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 10px; }
.ref-link input { min-width: 0; }
.ref-link .botao { width: auto; min-height: 50px; }
.refs { display: grid; gap: 10px; }
.ref { display: grid; grid-template-columns: 52px 1fr auto; gap: 6px 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.ref .mini { width: 52px; height: 52px; border-radius: 10px; background: var(--surface); color: var(--muted); overflow: hidden; display: grid; place-items: center; }
.ref .mini img, .ref .mini video { width: 100%; height: 100%; object-fit: cover; }
.ref > div:nth-child(2) { min-width: 0; }
.ref .nome { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref .det { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; }
.ref > input { grid-column: 1 / -1; width: 100%; font-size: 16px; min-height: 46px; }
.ref .remover { min-height: 40px; background: none; border: 0; border-radius: 10px; color: var(--erro); font-weight: 600; font-size: 13.5px; padding: 6px 10px; cursor: pointer; }
.ref .remover:hover { background: var(--erro-soft); }
.zona-ref.desligada { opacity: .45; pointer-events: none; }

/* ---------- meus pedidos ---------- */
.wrap-lista { padding-top: 18px; }
.heroi-curto { padding-bottom: 6px; }
.heroi-curto h1 { font-size: clamp(28px, 7.6vw, 40px); }
.pedido-cartao { padding: 0; overflow: hidden; }
.pedido-cartao > * { margin-left: 18px; margin-right: 18px; }
.pedido-cartao .cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-top: 18px; margin-bottom: 2px; }
.pedido-cartao .cab h2 { margin: 0; font: 700 19px/1.25 var(--title); }
.pedido-cartao .cab h2 small { display: block; font: 500 13px/1.3 var(--text); color: var(--muted); margin-top: 3px; }
.corpo-pedido { margin-top: 14px; }
.corpo-pedido:empty { display: none; }
.historico { border-top: 1px solid var(--line); margin: 16px 0 0 !important; padding: 0 18px; }
.historico summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; color: var(--ink-2); font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; }
.historico summary::-webkit-details-marker { display: none; }
.historico summary::after { content: ""; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356627a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat; transition: transform .2s; }
.historico[open] summary::after { transform: rotate(180deg); }
.linha-tempo { list-style: none; margin: 0 0 14px; padding: 0; display: grid; }
.linha-tempo li { position: relative; padding: 0 0 14px 28px; font-size: 14px; color: var(--muted); }
.linha-tempo li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-forte); z-index: 1; }
.linha-tempo li::after { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li:last-child::after { display: none; }
.linha-tempo li.feito { color: var(--ink); }
.linha-tempo li.feito::before { background: var(--verde); border-color: var(--verde); }
.linha-tempo li.feito::after { background: var(--verde); opacity: .45; }
.linha-tempo li.agora { color: var(--ink); font-weight: 600; }
.linha-tempo li.agora::before { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.linha-tempo small { color: var(--muted); font-weight: 500; margin-left: 6px; font-size: 12.5px; }
.player { display: block; width: 100%; max-height: 520px; border-radius: var(--r-md); background: #000; margin: 0 0 14px; }
@media (min-width: 640px) { .player { max-height: 460px; } }
.acoes-pedido { display: grid; gap: 10px; }
@media (min-width: 560px) { .acoes-pedido.lado { grid-template-columns: 1fr 1fr; } }
.caixa-ajuste { margin-top: 12px; padding: 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }

/* contagem, atraso, pronto, avaliação */
.contagem { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: center; padding: 18px; border-radius: var(--r-lg); color: #fff;
  background: var(--night); background-image: radial-gradient(100% 140% at 100% 0%, rgba(21, 101, 255, .45), transparent 60%), radial-gradient(70% 100% at 0% 100%, rgba(0, 208, 132, .18), transparent 60%); }
.contagem-num { font: 800 44px/1 var(--title); letter-spacing: 0; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, #00c2ff, #00d084); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contagem-info b { display: block; font: 700 17px/1.2 var(--title); }
.contagem-info small { display: block; color: #c0cbe3; font-size: 13px; margin-top: 3px; line-height: 1.4; }
.contagem-barra { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.contagem-barra div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #1565ff, #00c2ff, #00d084); transition: width 1s linear; }
.atraso { padding: 16px; border-radius: var(--r-lg); background: var(--alerta-soft); border: 1px solid var(--alerta-borda); }
.atraso > b { display: flex; gap: 10px; align-items: center; color: #5c3200; font: 700 16px/1.3 var(--title); }
.atraso > b .ic { color: var(--alerta-forte); }
.atraso .sub { color: #6b4a1f; }
.atraso .botao.secundario { background: var(--bg); }
.pronto-msg, .concluido { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; font-weight: 600; }
.pronto-msg::before, .concluido::before { content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat; }
.concluido { color: var(--verde-texto); }
.avaliacao { display: grid; gap: 10px; margin-top: 16px; padding: 16px; border-radius: var(--r-md); background: var(--surface); }
.avaliacao > b { font: 700 16px var(--title); }
.estrelas { display: flex; gap: 6px; }
.estrelas button { flex: 1; max-width: 56px; height: 52px; border: 1px solid var(--line-forte); border-radius: 12px; background: var(--bg); font-size: 26px; line-height: 1; color: #c3cbda; cursor: pointer; }
.estrelas button.on { color: #f5a400; border-color: #f3cf7a; background: #fff8e1; }
.estrelas-fixas { color: #e09600; letter-spacing: 2px; }
.avaliacao textarea { min-height: 76px; }
.avaliacao .botao.neutro { background: var(--bg); }
.dica-download { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.vazio-pedidos { text-align: center; padding: 34px 20px; }
.vazio-pedidos .vazio-ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; background: var(--primary-soft); color: var(--primary); }
.vazio-pedidos .vazio-ic .ic { width: 30px; height: 30px; }
.vazio-pedidos h2 { margin: 0 0 6px; }
.vazio-pedidos .botao { max-width: 320px; margin-top: 8px; }
.carregando { display: grid; gap: 12px; }
.carregando div { height: 150px; border-radius: var(--r-lg); background: linear-gradient(90deg, #e8edf5 0%, #f4f7fb 50%, #e8edf5 100%) 0 0 / 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .carregando div { animation: brilho 1.3s linear infinite; } }
@keyframes brilho { to { background-position: -200% 0; } }

/* ---------- regras ---------- */
.pagina-regras { margin-top: 18px; padding: 22px 20px; }
.pagina-regras ul { margin-bottom: 0; gap: 14px; font-size: 15px; }

.rodape { text-align: center; color: var(--muted); font-size: 13px; padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); }
.rodape a { color: var(--primary-escuro); font-weight: 600; }

/* Briefing inteligente */
.dica-grupo { display: block; color: var(--muted); font-size: 13px; margin: -2px 0 8px; }
.nota-musica { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--primary-soft, #eaf1ff); color: var(--ink); font-size: 13.5px; line-height: 1.45; }
.chip.chip-mais { border-style: dashed; color: var(--primary); }
.extras-objetivo:empty { display: none; }
.extras-objetivo { margin-top: 4px; }

/* Logo: aviso acima das cenas e pergunta na revisão */
.logo-aviso { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--primary-soft, #eaf1ff); font-size: 14px; line-height: 1.45; }
.logo-aviso small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.logo-aviso button { border: 0; background: none; color: var(--primary); font-weight: 700; padding: 0; cursor: pointer; text-decoration: underline; }
.logo-pergunta { margin: 4px 0 14px; padding: 12px; border-radius: 12px; border: 1px dashed var(--primary); }
.logo-pergunta .chips { margin-top: 8px; }

/* Revisão: prévia das cenas na ordem */
.previa-cenas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin: 2px 0 12px; }
.previa-item { margin: 0; min-width: 0; }
.previa-mini { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.previa-mini img, .previa-mini video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.previa-item.e-logo .previa-mini { background: #fff; }
.previa-item.e-logo img { object-fit: contain; padding: 10px 8px 26px; }
.previa-mini > svg.ic { width: 28px; height: 28px; color: var(--muted); }
.previa-num { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(10, 19, 40, .78); color: #fff; font: 700 12px/22px var(--title); text-align: center; }
.selo-logo { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 6px; background: var(--verde); color: #04291b; font: 800 10.5px/1.5 var(--title); letter-spacing: .06em; }
.previa-play { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(10, 19, 40, .7); display: grid; place-items: center; }
.previa-play .ic { width: 12px; height: 12px; fill: #fff; stroke: none; }
.previa-item figcaption { margin-top: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.previa-musica { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--primary-soft); font-size: 13.5px; min-width: 0; }
.previa-musica .ic { width: 20px; height: 20px; flex-shrink: 0; color: var(--primary); }
.previa-musica span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.previa-musica b { margin-right: 6px; }
/* Meus pedidos: vídeo pronto */
.palco-video { margin: 0 0 14px; border-radius: var(--r-lg); overflow: hidden; background: #000; box-shadow: var(--sombra-media); }
.palco-video .player-pronto { width: 100%; max-height: 72vh; margin: 0; border-radius: 0; }
.acoes-extra { margin-top: 10px; }
/* Sem conexão: caixa na página e aviso flutuante (no lugar de alert) */
.sem-conexao { margin: 16px 0; padding: 20px 18px; border-radius: var(--r-lg); background: var(--erro-soft); border: 1px solid var(--erro-borda); color: var(--ink); text-align: center; }
.sem-conexao p { margin: 0 0 12px; font-weight: 600; }
.sem-conexao .botao { max-width: 320px; margin: 0 auto; }
.aviso-flutuante { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1000; max-width: 480px; margin: 0 auto; padding: 14px 16px; border-radius: var(--r-md); background: var(--night); color: #fff; box-shadow: var(--sombra-alta); font-weight: 500; display: flex; gap: 12px; align-items: center; }
.aviso-flutuante span { flex: 1; }
.aviso-flutuante button { background: none; border: 0; color: #fff; font: inherit; font-weight: 700; padding: 6px; cursor: pointer; }
/* Meus pedidos: botão Baixar (iniciando → concluído → baixar de novo) */
.baixar-caixa { display: grid; gap: 6px; align-content: start; }
.botao.baixado-ok { background: var(--verde-soft); color: var(--verde-texto); box-shadow: inset 0 0 0 1.5px var(--verde); cursor: default; filter: none; }
.baixar-nota { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.baixar-nota a { font-weight: 600; }
.giro { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .giro { animation: girar .8s linear infinite; } }
@keyframes girar { to { transform: rotate(360deg); } }

/* Sua ideia: "Dicas rápidas" (um toque acrescenta a frase em "Como você imagina o vídeo") */
.campo-ideia { margin-bottom: 10px; }
.campo-ideia .dica-grupo { margin: 2px 0 8px; }
.dicas-rapidas { margin: 0 0 var(--e4, 20px); }
.dicas-rapidas > small { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.dicas-rapidas > small span { font-weight: 400; color: var(--muted); }
.chips-dica { gap: 8px; }
.chip.chip-dica { min-height: 38px; padding: 6px 12px; font-size: 13px; border-radius: 999px; border-style: dashed; color: var(--ink-2); }
.chip.chip-dica span { font-weight: 700; color: var(--primary); }
.chip.chip-dica.ativo { border-style: solid; }
.chip.chip-dica.ativo span { color: var(--verde-texto); }

/* Pouco material: dica amigável (não bloqueia) */
.dica-material { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--primary-soft); border: 1px solid var(--primary-borda); color: var(--ink-2); font-size: 13.5px; }
.dica-material .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--primary); }

/* "Me avise quando ficar pronto" (Web Push) */
.aviso-push { margin: 14px 0 0; }
.final .aviso-push { margin: 4px 0 6px; }
.botao-push { width: 100%; }
.push-ok { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border-radius: 999px; background: var(--verde-soft); color: var(--verde-texto); font-size: 13.5px; font-weight: 600; }
.final .push-ok { margin: 0; color: var(--verde-texto); }
.push-nota { margin: 0; color: var(--muted); font-size: 12.5px; }
.push-nota.erro { margin-top: 6px; color: var(--alerta); }

/* Estilo da edição: nível, "quero no vídeo", cor dos textos e print */
.niveis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chip.chip-nivel { display: grid; gap: 2px; text-align: left; align-content: center; min-height: 64px; padding: 10px 12px; border-radius: 14px; }
.chip.chip-nivel b { font-size: 15px; }
.chip.chip-nivel small { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.cores-texto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bolinha { position: relative; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 2px solid var(--line-forte); background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 2px var(--bg); }
.bolinha.ativo { border-color: var(--primary); box-shadow: inset 0 0 0 3px var(--bg), 0 0 0 2px var(--primary); }
.bolinha.outra { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 64px; padding: 0 12px; border-radius: 999px; background: linear-gradient(var(--bg), var(--bg)) padding-box, conic-gradient(#ff3d8b, #ffd400, #22c55e, #1e88ff, #8b5cf6, #ff3d8b) border-box; border-color: transparent; font-size: 13px; font-weight: 600; }
.bolinha.outra.ativo { background: linear-gradient(var(--c), var(--c)) padding-box, conic-gradient(#ff3d8b, #ffd400, #22c55e, #1e88ff, #8b5cf6, #ff3d8b) border-box; }
.bolinha.outra input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.bolinha.outra.ativo span { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.grupo-print { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Referência em destaque (não fica escondida) */
.refs-destaque { margin-top: 14px; padding: 14px; border-radius: var(--r-md); border: 1.5px solid var(--primary); background: var(--primary-soft); }
.refs-cab { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.refs-cab > span:last-child { display: grid; gap: 3px; }
.refs-cab b { font: 700 15.5px/1.3 var(--text); }
.refs-cab small { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.refs-ic { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--bg); color: var(--primary); }
.refs-destaque .refs-bloco { margin-bottom: 0; }
.refs-destaque .zona-ref { background: var(--bg); }
.refs-dica { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }

/* Criar vídeos pausado (chave de emergência da Central) */
.pausa { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 32px 20px; margin-top: 12px; }
.pausa .pausa-emoji { font-size: 44px; line-height: 1; }
.pausa h2 { margin: 0; font-size: 24px; }
.pausa p { margin: 0 0 6px; color: var(--ink-2); font-size: 16px; }
.pausa .botao { width: 100%; max-width: 340px; text-decoration: none; justify-content: center; }
.botao.botao-zap { background: var(--wa); border-color: var(--wa); color: #fff; }

/* Conta em análise / indisponível (aprovação de cadastros) */
.conta-situacao .botao-push { width: 100%; max-width: 340px; }
.conta-situacao .push-ok, .conta-situacao .push-nota { margin: 0; font-size: 14px; }
.conta-situacao .conta-sair-link { min-height: 44px; border: 0; background: none; color: var(--muted, #5b6680); font: 500 14px var(--text); text-decoration: underline; cursor: pointer; }
.aviso-conta { margin: 12px 0; padding: 14px 16px; border-radius: 14px; background: #fff7e0; border: 1px solid #f1d68a; color: #5c4400; font-size: 15px; }
.aviso-conta.bloqueado { background: #f3f5f9; border-color: #dfe4ee; color: var(--ink-2, #33405c); }
.aviso-conta a { font-weight: 600; }
/* Administrador no site do cliente: "Abrir painel" no menu e a tela "Entrando no painel…" */
.conta-painel { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; border-radius: 12px; background: var(--primary, #1565ff); color: #fff !important; font: 600 15px var(--text); text-decoration: none; }
.entrando-painel { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(10, 19, 40, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.entrando-caixa { width: 100%; max-width: 360px; display: grid; gap: 12px; justify-items: center; text-align: center; padding: 28px 20px; border-radius: 20px; background: #fff; color: var(--ink); }
.entrando-caixa h2 { margin: 0; font: 800 22px var(--title); }
.entrando-caixa p { margin: 0 0 4px; color: var(--ink-2); }
.entrando-caixa .botao { width: 100%; justify-content: center; text-decoration: none; }
.entrando-giro { width: 40px; height: 40px; border-radius: 50%; border: 4px solid #dfe4ee; border-top-color: var(--primary, #1565ff); animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .entrando-giro { animation: none; } }

/* ---------- Meus pedidos: "vídeo sendo montado" no lugar do player ---------- */
.construcao { --ciclo: 6s; position: relative; container-type: size; display: flex; flex-direction: column; gap: 12px; width: 100%; aspect-ratio: var(--ar, 9 / 16); max-height: 72vh; min-height: 190px;
  margin: 0 0 14px; padding: 14px; border-radius: var(--r-lg); overflow: hidden; color: #fff; box-shadow: var(--sombra-media);
  background: #0a1328; background-image: radial-gradient(90% 60% at 100% 0%, rgba(21, 101, 255, .5), transparent 65%), radial-gradient(80% 50% at 0% 100%, rgba(0, 208, 132, .28), transparent 65%); }
.construcao::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(21, 101, 255, .9), rgba(255, 255, 255, .06) 40%, rgba(0, 208, 132, .8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.cons-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-shrink: 0; }
.cons-vivo { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font: 600 12px/1 var(--text); color: #dbe4f5; }
.cons-vivo i { width: 7px; height: 7px; border-radius: 50%; background: #00d084; box-shadow: 0 0 0 0 rgba(0, 208, 132, .6); animation: cons-pulso 1.8s ease-out infinite; }
.cons-formato { font: 700 11.5px/1 var(--title); letter-spacing: .04em; color: #9fb0d4; }
/* Tela de prévia: cenas em degradê da marca se revezando, com a legenda entrando. */
.cons-monitor { flex: 1; min-height: 0; display: grid; place-items: center; }
.cons-tela { position: relative; height: 100%; max-width: 100%; aspect-ratio: var(--ar, 9 / 16); border-radius: 14px; overflow: hidden; background: #050b1a;
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7), 0 0 0 5px rgba(255, 255, 255, .03); }
.cons-cena { position: absolute; inset: -8%; opacity: 0; animation: cons-cena calc(var(--ciclo) * 1.5) ease-in-out infinite both; }
.cons-cena.c1 { background: radial-gradient(60% 45% at 30% 30%, rgba(0, 194, 255, .85), transparent 70%), linear-gradient(160deg, #1565ff, #0a1328 75%); }
.cons-cena.c2 { background: radial-gradient(55% 40% at 70% 65%, rgba(0, 208, 132, .85), transparent 70%), linear-gradient(200deg, #0b4fd8, #071026 80%); animation-delay: calc(var(--ciclo) * .5); }
.cons-cena.c3 { background: radial-gradient(60% 50% at 50% 40%, rgba(124, 255, 70, .4), transparent 70%), linear-gradient(140deg, #00a86b, #1565ff 90%); animation-delay: var(--ciclo); }
.cons-legenda { position: absolute; left: 12%; right: 12%; bottom: 12%; display: grid; gap: 6px; justify-items: center; }
.cons-legenda b { display: block; height: 7px; width: 100%; border-radius: 99px; background: rgba(255, 255, 255, .92); animation: cons-legenda var(--ciclo) cubic-bezier(.2, .8, .2, 1) infinite both; }
.cons-legenda b + b { width: 62%; background: linear-gradient(90deg, #00c2ff, #00d084); animation-delay: .25s; }
/* Frase de status: 5 frases se revezando (3 s cada). */
.cons-frase { position: relative; flex-shrink: 0; height: 22px; text-align: center; font: 700 15px/22px var(--title); }
.cons-frase span { position: absolute; inset: 0; opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: cons-frase 15s linear infinite both; }
.cons-frase span:first-child { animation-delay: var(--fase, 0s); }
.cons-frase span:nth-child(2) { animation-delay: calc(var(--fase, 0s) + 3s); } .cons-frase span:nth-child(3) { animation-delay: calc(var(--fase, 0s) + 6s); }
.cons-frase span:nth-child(4) { animation-delay: calc(var(--fase, 0s) + 9s); } .cons-frase span:nth-child(5) { animation-delay: calc(var(--fase, 0s) + 12s); }
/* Linha do tempo: clipes encaixando, transições, texto, música e a agulha correndo. */
.cons-linha { position: relative; flex-shrink: 0; display: grid; grid-template-columns: 46px 1fr; gap: 6px 8px; align-items: center; padding: 10px; border-radius: 12px;
  background: rgba(5, 11, 26, .6); border: 1px solid rgba(255, 255, 255, .1); }
.cons-linha em { font: 600 10.5px/1 var(--text); font-style: normal; color: #8ea0c6; }
.cons-pista { position: relative; display: flex; align-items: center; gap: 3px; height: 16px; min-width: 0; }
.cons-clip { height: 100%; border-radius: 4px; animation: cons-encaixe var(--ciclo) cubic-bezier(.2, .8, .2, 1) infinite both; }
.cons-clip.k1 { flex: 22; background: linear-gradient(90deg, #1565ff, #3b82ff); }
.cons-clip.k2 { flex: 30; background: linear-gradient(90deg, #0b8fd6, #00c2ff); animation-delay: .35s; }
.cons-clip.k3 { flex: 18; background: linear-gradient(90deg, #00b3a4, #00d084); animation-delay: .7s; }
.cons-clip.k4 { flex: 26; background: linear-gradient(90deg, #1565ff, #00d084); animation-delay: 1.05s; }
.cons-tr { flex: none; width: 7px; height: 7px; margin: 0 -5px; z-index: 1; transform: rotate(45deg); background: #fff; border-radius: 1.5px; box-shadow: 0 0 6px rgba(255, 255, 255, .7);
  animation: cons-trans var(--ciclo) ease-out infinite both; }
.cons-tr.x1 { animation-delay: 1.3s; } .cons-tr.x2 { animation-delay: 1.5s; } .cons-tr.x3 { animation-delay: 1.7s; }
.cons-txt { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .85); animation: cons-texto var(--ciclo) cubic-bezier(.2, .8, .2, 1) infinite both; }
.cons-txt.q1 { width: 30%; margin-left: 8%; animation-delay: 1.9s; }
.cons-txt.q2 { width: 24%; margin-left: 18%; background: linear-gradient(90deg, #00c2ff, #00d084); animation-delay: 2.3s; }
.cons-onda { gap: 2px; }
.cons-onda span { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(#00d084, #00c2ff); transform-origin: 50% 100%; animation: cons-onda 1.1s ease-in-out infinite alternate both; }
.cons-onda span:nth-child(3n) { animation-delay: -.3s; } .cons-onda span:nth-child(3n+1) { animation-delay: -.7s; }
.cons-onda span:nth-child(4n) { animation-duration: .8s; } .cons-onda span:nth-child(5n+2) { animation-duration: 1.4s; }
.cons-cabeca { position: absolute; top: 4px; bottom: 4px; left: 64px; right: 10px; overflow: hidden; pointer-events: none; }
.cons-cabeca span { position: absolute; inset: 0; border-right: 2px solid #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8)); animation: cons-agulha var(--ciclo) linear infinite both; }
@keyframes cons-pulso { 70% { box-shadow: 0 0 0 7px rgba(0, 208, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 208, 132, 0); } }
@keyframes cons-cena { 0% { opacity: 0; transform: scale(1.1); } 6%, 36% { opacity: 1; } 44%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cons-legenda { 0%, 35% { opacity: 0; transform: translateY(10px) scaleX(.6); } 45%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes cons-frase { 0% { opacity: 0; transform: translateY(8px); } 3%, 17% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes cons-encaixe { 0% { opacity: 0; transform: translateX(160%); } 14%, 84% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes cons-trans { 0% { opacity: 0; transform: rotate(45deg) scale(0); } 10%, 82% { opacity: 1; transform: rotate(45deg) scale(1); } 94%, 100% { opacity: 0; transform: rotate(45deg) scale(1); } }
@keyframes cons-texto { 0% { opacity: 0; transform: translateY(-8px); } 10%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes cons-onda { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes cons-agulha { from { transform: translateX(-100%); } to { transform: none; } }
/* Formatos baixos (16:9, 1:1 no celular): sem a tela de prévia, só frase e linha do tempo. */
@container (max-height: 300px) { .cons-monitor { display: none; } .cons-topo { margin-bottom: auto; } }
/* Quando fica pronto, o player entra no mesmo lugar com fade. */
.palco-video.chegou { animation: cons-chegou .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cons-chegou { from { opacity: 0; transform: scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .construcao *, .palco-video.chegou { animation: none !important; }
  .cons-cena.c1 { opacity: 1; }
  .cons-frase span:first-child { opacity: 1; }
  .cons-cabeca span { transform: translateX(-38%); }
  .cons-onda span:nth-child(odd) { transform: scaleY(.55); }
}

/* ---------- Auditoria de layout: alvos de toque com pelo menos 44 px ---------- */
.login .link-botao, .bloco-resumo .cab button, .chip.chip-dica { min-height: 44px; }
.bloco-resumo .cab { margin-bottom: 4px; }
.bolinha { width: 44px; height: 44px; }
.bolinha.outra { min-width: 72px; }
.cena .acoes-cena { grid-template-columns: 44px 44px; }
.cena .acoes-cena button { width: 44px; height: 44px; }
.cena .acoes-cena .remover { height: 44px; }
@media (max-width: 560px) { .cena .acoes-cena button { height: 44px; } .cena .acoes-cena .remover { height: 44px; } }
.aviso-flutuante button { min-width: 44px; min-height: 44px; padding: 6px 10px; }

/* ---------- Montagem do vídeo (topo de Detalhes) ---------- */
.segmentado { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: var(--surface); border-radius: var(--r); margin-bottom: 16px; }
.segmentado .seg { display: grid; gap: 2px; align-content: center; min-height: 56px; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: inherit; text-align: center; cursor: pointer; }
.segmentado .seg b { font-size: 14.5px; line-height: 1.2; }
.segmentado .seg small { font-size: 12px; color: var(--muted); }
.segmentado .seg.ativo { background: var(--bg); color: var(--primary-escuro); box-shadow: var(--sombra), 0 0 0 1.5px var(--primary) inset; }
.segmentado .seg:focus-visible { outline: none; box-shadow: var(--foco); }
.estilos-montagem { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.estilo-card { position: relative; display: grid; gap: 3px; align-content: start; min-height: 44px; padding: 8px 8px 10px; border: 1.5px solid var(--line-forte); border-radius: var(--r); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.estilo-card b { font-size: 14px; line-height: 1.2; margin-top: 4px; }
.estilo-card small { font-size: 12px; line-height: 1.3; color: var(--muted); }
.estilo-card.ativo { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary) inset; }
.estilo-card.ativo::after { content: "✓"; position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; }
.estilo-card:focus-visible { outline: none; box-shadow: var(--foco); }
.selo-sugerido { justify-self: start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--verde-soft); color: var(--verde-texto); font: 600 11px var(--text); font-style: normal; }
.nota-estilo { margin: 12px 0 18px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font-size: 13px; line-height: 1.45; }

/* Mini prévias (só CSS): palco escuro com 4 peças animadas por estilo. */
.previa-estilo { position: relative; display: block; height: 64px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, var(--night) 0%, var(--night-3) 100%); }
.previa-estilo i { position: absolute; display: block; }
.pv-editor i { width: 8px; height: 8px; top: 28px; border-radius: 50%; background: #fff; }
.pv-editor i:nth-child(1) { left: calc(50% - 22px); } .pv-editor i:nth-child(2) { left: calc(50% - 4px); background: var(--ciano); } .pv-editor i:nth-child(3) { left: calc(50% + 14px); background: var(--verde); }
.pv-editor i:nth-child(4) { inset: 0; width: auto; height: auto; border-radius: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%); }
.pv-promo i:nth-child(1) { left: calc(50% - 26px); top: 14px; width: 52px; height: 36px; border-radius: 8px; background: #ffd400; }
.pv-promo i:nth-child(1)::after { content: "-50%"; display: grid; place-items: center; height: 100%; color: var(--night); font: 800 15px var(--title); }
.pv-promo i:nth-child(n+2) { width: 4px; height: 14px; left: calc(50% - 2px); top: 25px; border-radius: 2px; background: #ff3d8b; }
.pv-promo i:nth-child(3) { background: var(--ciano); --r: 120deg; } .pv-promo i:nth-child(4) { background: var(--verde); --r: 240deg; }
.pv-elegante i:nth-child(1) { left: 20%; right: 20%; top: 24px; height: 1.5px; background: #e9d8a6; transform-origin: left; }
.pv-elegante i:nth-child(2) { left: 30%; right: 30%; top: 32px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .85); }
.pv-elegante i:nth-child(3) { left: 38%; right: 38%; top: 43px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.pv-elegante i:nth-child(4), .pv-produto i:nth-child(4), .pv-antes-depois i:nth-child(4) { display: none; }
.pv-evento i { left: calc(50% - 16px); top: 12px; width: 32px; height: 40px; color: #fff; font: 800 30px/40px var(--title); text-align: center; opacity: 0; }
.pv-evento i:nth-child(1)::after { content: "3"; } .pv-evento i:nth-child(2)::after { content: "2"; } .pv-evento i:nth-child(3)::after { content: "1"; }
.pv-evento i:nth-child(4) { left: 10px; right: 10px; width: auto; bottom: 8px; top: auto; height: 3px; border-radius: 2px; background: var(--ciano); opacity: 1; transform-origin: left; }
.pv-produto i:nth-child(1) { left: calc(50% - 16px); top: 14px; width: 32px; height: 36px; border-radius: 6px; background: linear-gradient(160deg, #fff, #b8ceff); }
.pv-produto i:nth-child(2) { right: 14px; top: 10px; padding: 2px 6px; border-radius: 6px; background: #ffd400; color: var(--night); font: 800 10px var(--title); }
.pv-produto i:nth-child(2)::after { content: "R$"; }
.pv-produto i:nth-child(3) { left: 12px; top: 40px; width: 22px; height: 2px; background: var(--verde); transform-origin: left; }
.pv-depoimento i:nth-child(1) { left: 12px; top: 8px; color: var(--ciano); font: 800 28px/1 Georgia, serif; }
.pv-depoimento i:nth-child(1)::after { content: "\201C"; }
.pv-depoimento i:nth-child(2), .pv-depoimento i:nth-child(3) { left: 36px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .85); transform-origin: left; }
.pv-depoimento i:nth-child(2) { top: 22px; right: 18px; } .pv-depoimento i:nth-child(3) { top: 33px; right: 40px; }
.pv-depoimento i:nth-child(4) { left: 12px; bottom: 8px; width: 46px; height: 8px; border-radius: 3px; background: var(--primary); }
.pv-antes-depois i:nth-child(1) { inset: 0; background: #59647a; }
.pv-antes-depois i:nth-child(2) { inset: 0; background: linear-gradient(135deg, #00c2ff, #00d084); clip-path: inset(0 0 0 50%); }
.pv-antes-depois i:nth-child(3) { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: #fff; }
.pv-lista i { left: 14px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .85); transform-origin: left; }
.pv-lista i::before { content: ""; position: absolute; left: -2px; top: -1px; width: 11px; height: 11px; border-radius: 3px; background: #ffd400; }
.pv-lista i:nth-child(1) { top: 8px; right: 30%; } .pv-lista i:nth-child(2) { top: 21px; right: 40%; } .pv-lista i:nth-child(3) { top: 34px; right: 25%; } .pv-lista i:nth-child(4) { top: 47px; right: 50%; }
.pv-inauguracao::after { content: ""; position: absolute; left: 0; right: 0; top: 40px; height: 10px; background: #e53935; }
.pv-inauguracao i { z-index: 1; width: 6px; height: 10px; top: -12px; border-radius: 2px; }
.pv-inauguracao i:nth-child(1) { left: 18%; background: #ffd400; } .pv-inauguracao i:nth-child(2) { left: 40%; background: #ff3d8b; }
.pv-inauguracao i:nth-child(3) { left: 62%; background: var(--ciano); } .pv-inauguracao i:nth-child(4) { left: 82%; background: var(--verde); }
.pv-aniversario i { bottom: -34px; width: 16px; height: 20px; border-radius: 50% 50% 46% 46%; }
.pv-aniversario i::after { content: ""; position: absolute; left: 7px; top: 20px; width: 1px; height: 12px; background: rgba(255, 255, 255, .5); }
.pv-aniversario i:nth-child(1) { left: 16%; background: #ff3d8b; } .pv-aniversario i:nth-child(2) { left: 38%; background: #ffd400; }
.pv-aniversario i:nth-child(3) { left: 60%; background: var(--ciano); } .pv-aniversario i:nth-child(4) { left: 80%; background: #8b5cf6; }
@media (prefers-reduced-motion: no-preference) {
  .pv-editor i:nth-child(-n+3) { animation: pv-pulo 1.2s ease-in-out infinite; }
  .pv-editor i:nth-child(2) { animation-delay: .15s; } .pv-editor i:nth-child(3) { animation-delay: .3s; }
  .pv-editor i:nth-child(4) { animation: pv-brilho 2.4s linear infinite; }
  .pv-promo i:nth-child(1) { animation: pv-bate .9s cubic-bezier(.3, 1.6, .5, 1) infinite; }
  .pv-promo i:nth-child(n+2) { animation: pv-raio .9s ease-out infinite; }
  .pv-elegante i:nth-child(1) { animation: pv-linha 3s ease-in-out infinite; }
  .pv-elegante i:nth-child(2), .pv-elegante i:nth-child(3) { animation: pv-surge 3s ease-in-out infinite; }
  .pv-elegante i:nth-child(3) { animation-delay: .3s; }
  .pv-evento i:nth-child(-n+3) { animation: pv-conta 2.4s steps(1) infinite, pv-zoom .8s ease-out infinite; }
  .pv-evento i:nth-child(2) { animation-delay: .8s, .8s; } .pv-evento i:nth-child(3) { animation-delay: 1.6s, 1.6s; }
  .pv-evento i:nth-child(4) { animation: pv-linha 2.4s linear infinite; }
  .pv-produto i:nth-child(1) { animation: pv-close 2.4s ease-in-out infinite; }
  .pv-produto i:nth-child(2) { animation: pv-bate 2.4s cubic-bezier(.3, 1.6, .5, 1) infinite; }
  .pv-produto i:nth-child(3) { animation: pv-linha 2.4s ease-in-out infinite; }
  .pv-depoimento i:nth-child(2), .pv-depoimento i:nth-child(3) { animation: pv-linha 2.6s ease-out infinite; }
  .pv-depoimento i:nth-child(3) { animation-delay: .4s; }
  .pv-antes-depois i:nth-child(2) { animation: pv-revela 2.6s ease-in-out infinite alternate; }
  .pv-antes-depois i:nth-child(3) { animation: pv-divisor 2.6s ease-in-out infinite alternate; }
  .pv-lista i { animation: pv-linha 2.8s ease-out infinite; }
  .pv-lista i:nth-child(2) { animation-delay: .2s; } .pv-lista i:nth-child(3) { animation-delay: .4s; } .pv-lista i:nth-child(4) { animation-delay: .6s; }
  .pv-inauguracao i { animation: pv-cai 1.6s linear infinite; }
  .pv-inauguracao i:nth-child(2) { animation-delay: .5s; } .pv-inauguracao i:nth-child(3) { animation-delay: .2s; } .pv-inauguracao i:nth-child(4) { animation-delay: .9s; }
  .pv-aniversario i { animation: pv-sobe 3s ease-in infinite; }
  .pv-aniversario i:nth-child(2) { animation-delay: .7s; } .pv-aniversario i:nth-child(3) { animation-delay: 1.4s; } .pv-aniversario i:nth-child(4) { animation-delay: 2.1s; }
}
/* Sem animação: cada prévia fica num quadro parado que ainda mostra o estilo. */
@media (prefers-reduced-motion: reduce) {
  .pv-evento i:nth-child(3) { opacity: 1; }
  .pv-inauguracao i { top: 14px; } .pv-aniversario i { bottom: 18px; }
  .pv-promo i:nth-child(n+2) { display: none; }
}
@keyframes pv-pulo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pv-brilho { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes pv-bate { 0% { transform: scale(.4); } 30%, 100% { transform: scale(1); } }
@keyframes pv-raio { 0% { transform: rotate(var(--r, 0deg)) translateY(0); opacity: 1; } 100% { transform: rotate(var(--r, 0deg)) translateY(-26px); opacity: 0; } }
@keyframes pv-linha { 0% { transform: scaleX(0); } 45%, 85% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes pv-surge { 0%, 15% { opacity: 0; transform: translateY(5px); } 40%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pv-conta { 0% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes pv-zoom { from { transform: scale(1.6); } to { transform: scale(1); } }
@keyframes pv-close { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.25); } }
@keyframes pv-revela { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes pv-divisor { from { left: 100%; } to { left: 0; } }
@keyframes pv-cai { from { transform: translateY(0) rotate(0); } to { transform: translateY(90px) rotate(360deg); } }
@keyframes pv-sobe { from { transform: translateY(0); } to { transform: translateY(-110px); } }

/* Linha do tempo de cenas ("do meu jeito"). */
.linha-cenas { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.cena-bloco { border: 1.5px solid var(--line-forte); border-left: 5px solid var(--cb, var(--primary)); border-radius: var(--r); background: var(--bg); }
.cena-bloco.aberta { border-color: var(--primary); border-left-color: var(--cb, var(--primary)); box-shadow: var(--sombra); }
.cena-bloco.arrastando { opacity: .45; }
.cena-bloco.alvo { outline: 2px dashed var(--primary); outline-offset: 2px; }
.cb-abertura { --cb: #ff3d8b; } .cb-apresentacao { --cb: #1e88ff; } .cb-destaque { --cb: #f59e0b; } .cb-prova { --cb: #8b5cf6; } .cb-final { --cb: #00b874; }
.cb-topo { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; }
.cb-abrir { display: flex; align-items: center; gap: 10px; min-height: 56px; min-width: 0; padding: 6px 8px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; border-radius: var(--r-sm); }
.cb-abrir:focus-visible, .cb-seta:focus-visible { outline: none; box-shadow: var(--foco); }
.cb-alca { color: var(--muted); letter-spacing: -3px; cursor: grab; }
.cb-num { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--night); color: #fff; font: 700 13px var(--title); }
.cb-txt { display: grid; min-width: 0; }
.cb-txt b { font-size: 14.5px; line-height: 1.25; }
.cb-txt small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-seta { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.cb-seta:disabled { opacity: .35; cursor: default; }
.cb-seta .ic { width: 18px; height: 18px; }
.cb-painel { padding: 6px 12px 14px; border-top: 1px solid var(--line); }
.cb-painel .grupo { margin: 12px 0 0; }
.cb-painel .campo { margin-top: 12px; }
.cb-remover { margin-top: 14px; width: 100%; min-height: 44px; color: var(--erro); }
.add-cena { margin-bottom: 18px; }
.add-cena > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.add-cena .chip:disabled { opacity: .4; }
.chips-arq .chip { max-width: 100%; }
.num-arq { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 6px; background: var(--surface-2); font-size: 11.5px; }
.chip.ativo .num-arq { background: var(--primary); color: #fff; }
.chip.chip-dur { flex-direction: column; align-items: stretch; gap: 6px; min-width: 76px; padding: 8px 12px; }
.chip.chip-dur span { text-align: center; }
.barra-dur { display: block; height: 5px; width: var(--w); border-radius: 3px; background: var(--primary); opacity: .55; }
.barra-dur.auto { background: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 10px); }
.chip.ativo .barra-dur { opacity: 1; }
.interruptor-linha { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 12px; border-radius: var(--r); background: var(--surface); cursor: pointer; }
.interruptor-linha input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--primary); }
.interruptor-linha span { display: grid; gap: 2px; }
.interruptor-linha b { font-size: 14px; }
.interruptor-linha small { font-size: 12.5px; color: var(--muted); }
.dica-avancado { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--primary-soft); border: 1px solid var(--primary-borda); color: var(--ink-2); font-size: 13.5px; }
.dica-avancado .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--primary); }
/* Revisão: cenas com seletor de arquivos (opcional). */
.rev-cenas { padding: 0 16px 6px; }
.rev-cena { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.rev-cena > b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rev-cena > small { color: var(--muted); font-size: 12.5px; }
.rev-cena .chips { margin-top: 4px; }

/* ---------- esqueleto do pedido: ocupa o meio enquanto a conta e os tipos carregam ---------- */
.esqueleto { display: grid; gap: 10px; padding: 12px 0 8px; }
.esq-linha, .esq-cartao { border-radius: var(--r-xs); background: linear-gradient(90deg, #e8edf5 0%, #f4f7fb 50%, #e8edf5 100%) 0 0 / 200% 100%; }
.esq-titulo { height: 30px; width: 80%; margin-bottom: 4px; }
.esq-sub { height: 14px; width: 94%; }
.esq-sub.esq-curta { width: 62%; margin-bottom: 10px; }
.esq-tipos { display: grid; gap: 14px; }
.esq-cartao { height: 236px; border-radius: var(--r-xl); border: 1.5px solid var(--line); }
@media (min-width: 640px) { .esq-tipos { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: no-preference) { .esq-linha, .esq-cartao { animation: brilho 1.3s linear infinite; } }
main:has(> .passo:not(.oculto), > .login:not(.oculto), > .pausa, > .sem-conexao) > .esqueleto { display: none; }

/* Troca de página suave entre as páginas do site (onde o navegador suporta). */
@view-transition { navigation: auto; }