/* Estúdio — a mesa de montar kits (estudio.php, estudio.js).
   Cores, fontes, raios, espaços e tempos só do ds.css. */

.estudio__rotulo { color: var(--font-neutral-200); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--sp-8); }
.estudio__aviso { font-family: var(--font-mono); font-style: normal; font-size: 11px; color: var(--font-neutral-200); margin-left: var(--sp-8); }

/* ---------- a página do Estúdio ---------- */
.estudio { padding-block: var(--sp-24) var(--sp-56); }
.estudio__topo { margin-bottom: var(--sp-16); }
.estudio__trilha { color: var(--font-neutral-300); display: flex; gap: var(--sp-6); align-items: center; }
.estudio__trilha a { color: var(--font-neutral-200); text-decoration: none; }
.estudio__trilha a:hover { text-decoration: underline; }
.estudio__titulo {
  font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1.05;
  letter-spacing: -.02em; color: var(--font-always-dark); margin: var(--sp-8) 0 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.estudio__grade {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-24); align-items: start;
}

/* O palco: janela de proporção fixa; a cena dentro dela pode aproximar
   (transform) sem mexer no tamanho da página. */
.palco { position: sticky; top: var(--sp-24); }
.palco__janela {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--radius-8); background: var(--bg-base-200); box-shadow: var(--shadow-2);
}
.palco__cena, .mini__cena, .palco-ampliado__cena { position: absolute; inset: 0; transform-origin: 0 0; }
.palco__cena { transition: transform var(--dur-cena) var(--ease-io); will-change: transform; }
.palco__fundo, .palco__camadas img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.palco__camadas { position: absolute; inset: 0; }
.palco__ampliar {
  position: absolute; right: var(--sp-12); bottom: var(--sp-12);
  display: inline-flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-12); border: 0; border-radius: var(--radius-pill);
  background: var(--bg-base-0); color: var(--font-always-dark); box-shadow: var(--shadow-2);
  font-family: var(--font-support); font-size: 13px; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-back);
}
.palco__ampliar svg { fill: currentColor; }
.palco__ampliar:hover { transform: scale(1.04); }
.palco__vazio {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  margin: 0; padding: var(--sp-12) var(--sp-16); text-align: center;
  background: var(--bg-base-0); color: var(--font-neutral-100);
  border-radius: var(--radius-8); box-shadow: var(--shadow-1); pointer-events: none;
}

/* O painel */
.painel {
  display: flex; flex-direction: column; gap: var(--sp-16);
  background: var(--bg-base-100); border: 1px solid var(--stroke-primary-main);
  border-radius: var(--radius-8); padding: var(--sp-16);
}
.painel__passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); counter-reset: passo; }
.painel__passos button {
  width: 100%; border: 0; background: transparent; cursor: pointer; padding: var(--sp-8) var(--sp-4);
  font-family: var(--font-support); font-size: 12px; color: var(--font-neutral-300);
  border-bottom: 2px solid var(--stroke-primary-main);
  transition: color var(--dur-base) var(--ease-io), border-color var(--dur-base) var(--ease-io);
}
.painel__passos li { counter-increment: passo; }
.painel__passos button::before { content: counter(passo) '. '; }
.painel__passos button[aria-current="step"] { color: var(--font-always-dark); border-color: var(--brand-secondary-main); }

.painel__titulo { font-family: var(--font-title); font-weight: 600; font-size: 20px; line-height: 24px; color: var(--font-always-dark); margin: 0; }
.painel__texto { color: var(--font-neutral-100); margin: var(--sp-6) 0 0; }
.painel__grupo { color: var(--font-neutral-200); text-transform: uppercase; letter-spacing: .08em; margin: var(--sp-16) 0 var(--sp-8); }

.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); margin-top: var(--sp-16); }
.opcao {
  display: flex; flex-direction: column; gap: var(--sp-4); text-align: left; cursor: pointer;
  padding: var(--sp-8); border: 1px solid var(--stroke-primary-main); border-radius: var(--radius-8);
  background: var(--bg-base-0); color: var(--font-always-dark);
  transition: border-color var(--dur-base) var(--ease-io), box-shadow var(--dur-base) var(--ease-io);
}
.opcao:hover { box-shadow: var(--shadow-2); }
.opcao.is-on { border-color: var(--brand-secondary-main); box-shadow: inset 0 0 0 1px var(--brand-secondary-main); }
.opcao--kit { grid-column: 1 / -1; }
.opcao--zero { justify-content: center; min-height: 88px; background: var(--bg-base-100); }
.opcao__img { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: var(--radius-4); overflow: hidden; background: var(--bg-base-200); }
.opcao__nome { font-family: var(--font-title); font-weight: 600; font-size: 15px; line-height: 19px; }
.opcao__sub { color: var(--font-neutral-300); }
.opcao__preco { color: var(--font-neutral-100); }
.opcao__avulsa { color: var(--font-neutral-300); margin-left: var(--sp-4); }
.mini { position: absolute; inset: 0; }

.pecas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.peca {
  display: grid; grid-template-columns: 96px 1fr auto; grid-template-rows: auto auto; column-gap: var(--sp-12);
  align-items: center; padding: var(--sp-8); border: 1px solid var(--stroke-primary-main);
  border-radius: var(--radius-8); background: var(--bg-base-0);
  transition: border-color var(--dur-base) var(--ease-io);
}
.peca.is-on { border-color: var(--brand-secondary-main); }
.peca .opcao__img { grid-row: 1 / 3; }
.peca .opcao__nome { align-self: end; }
.peca .opcao__preco { align-self: start; grid-column: 2; }
.peca__stepper { grid-column: 3; grid-row: 1 / 3; }
.peca__stepper output { width: 32px; text-align: center; font-family: var(--font-title); font-weight: 700; color: var(--font-always-dark); }
.peca__stepper button:disabled { opacity: .4; cursor: default; }

.revisao { list-style: none; margin: var(--sp-16) 0 0; padding: 0; }
.revisao li { display: flex; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-8) 0; border-bottom: 1px solid var(--stroke-soft); color: var(--font-neutral-100); font-family: var(--font-body); }

.painel__kit { border-top: 1px solid var(--stroke-primary-main); padding-top: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-12); }
.painel__kit-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-8); }
.painel__kit-titulo { margin: 0; color: var(--font-always-dark); }
.painel__contador { color: var(--font-neutral-200); }
.painel__contador.is-ok { color: var(--brand-secondary-light); }
.painel__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.painel__item {
  display: inline-flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-12);
  border: 1px solid var(--tag-stroke); border-radius: var(--radius-pill); background: var(--tag-bg);
  color: var(--font-always-dark); font-family: var(--font-support); font-size: 13px;
}
.painel__item--vazio { padding: var(--sp-4) 0; border: 0; background: none; color: var(--font-neutral-300); }
.painel__tirar { display: inline-flex; border: 0; background: none; padding: var(--sp-2); cursor: pointer; color: var(--font-neutral-300); border-radius: var(--radius-pill); }
.painel__tirar svg { fill: currentColor; }
.painel__tirar:hover { color: var(--font-always-dark); background: var(--bg-base-200); }
.painel__total { display: flex; justify-content: space-between; align-items: baseline; color: var(--font-neutral-100); }
.painel__total strong { font-family: var(--font-title); font-weight: 700; font-size: 20px; color: var(--font-always-dark); }
.painel__acoes { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-8); }
.painel__acoes [data-voltar][hidden] + [data-avancar] { grid-column: 1 / -1; }
.painel__acoes .btn:disabled { opacity: .5; cursor: default; }

/* Vista ampliada: a mesa no tamanho do arquivo, com rolagem (e pinça, no celular). */
.palco-ampliado {
  position: fixed; inset: 0; z-index: 90; background: var(--bg-base-0);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-io), visibility 0s linear var(--dur-base);
}
.palco-ampliado.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.palco-ampliado__rolo { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.palco-ampliado__cena { position: relative; inset: auto; width: 2400px; max-width: none; aspect-ratio: 3 / 2; }
.palco-ampliado__fechar {
  position: fixed; top: var(--sp-16); right: var(--sp-16); z-index: 2; border: 0; cursor: pointer;
  width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--bg-base-0);
  box-shadow: var(--shadow-2); display: inline-flex; align-items: center; justify-content: center; color: var(--font-always-dark);
}
.palco-ampliado__fechar svg { fill: currentColor; }
html.sem-rolagem { overflow: hidden; }

/* ---------- celular ---------- */
@media (max-width: 980px) {
  .estudio__grade { grid-template-columns: 1fr; }
  .palco { top: 0; z-index: 5; margin-inline: calc(var(--sp-24) * -1); }
  .palco__janela { border-radius: 0; }
  .estudio__titulo { font-size: 30px; }
  .palco-ampliado__cena { width: 1800px; }
}
@media (max-width: 720px) {
  .painel { padding: var(--sp-12); }
  .peca { grid-template-columns: 80px 1fr auto; }
}

/* ---------- busca e filtro (todas as listas) ---------- */
.lista-ctrl { display: flex; gap: var(--sp-8); margin-top: var(--sp-12); }
.lista-ctrl__busca { flex: 1 1 auto; min-width: 0; }
.lista-ctrl__filtro { flex: 0 0 auto; max-width: 48%; }
.lista-ctrl input, .lista-ctrl select {
  width: 100%; height: 38px; padding: 0 var(--sp-12); border: 1px solid var(--stroke-primary-main);
  border-radius: var(--input-radius); background: var(--input-bg); color: var(--font-always-dark);
  font-family: var(--font-body); font-size: 14px;
}
.lista-ctrl input:focus, .lista-ctrl select:focus { outline: 2px solid var(--brand-secondary-light); outline-offset: 1px; }

/* ---------- grupos e "ver todas" ---------- */
.grupo { margin-top: var(--sp-8); }
.grupo__conta { color: var(--font-neutral-300); letter-spacing: 0; text-transform: none; margin-left: var(--sp-4); }
.grupo__mais {
  margin-top: var(--sp-8); width: 100%; padding: var(--sp-8); cursor: pointer;
  border: 1px dashed var(--stroke-primary-main); border-radius: var(--radius-8); background: transparent;
  color: var(--font-neutral-200); font-family: var(--font-support); font-size: 13px;
  transition: background var(--dur-fast) var(--ease-io);
}
.grupo__mais:hover { background: var(--bg-base-0); }
[data-lista-alvo] .pecas, .painel__passo > .pecas { margin-top: var(--sp-8); }

/* ---------- bandeja: linha que se escolhe inteira (uma só) ---------- */
.peca--escolha { padding: 0; }
.peca__botao {
  grid-column: 1 / -1; grid-row: 1 / -1; width: 100%; display: grid; grid-template-columns: 96px 1fr auto;
  grid-template-rows: auto auto; column-gap: var(--sp-12); align-items: center; text-align: left;
  padding: var(--sp-8); border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: var(--radius-8);
}
.peca__botao .opcao__img { grid-row: 1 / 3; }
.peca__botao .opcao__nome { align-self: end; }
.peca__botao .opcao__preco, .peca__botao .opcao__sub { align-self: start; grid-column: 2; }
.peca__botao--sem { grid-template-columns: 1fr auto; min-height: 56px; padding-inline: var(--sp-12); }
.peca__botao--sem .opcao__nome, .peca__botao--sem .opcao__sub { grid-column: 1; }
.peca__marca {
  grid-column: -2; grid-row: 1 / 3; width: 20px; height: 20px; border-radius: var(--radius-pill);
  border: 2px solid var(--stroke-primary-main); background: var(--bg-base-0);
  transition: border-color var(--dur-fast) var(--ease-io), box-shadow var(--dur-fast) var(--ease-io);
}
.peca--escolha.is-on .peca__marca { border-color: var(--brand-secondary-main); box-shadow: inset 0 0 0 4px var(--bg-base-0), inset 0 0 0 10px var(--brand-secondary-main); }

@media (max-width: 720px) {
  .peca__botao { grid-template-columns: 80px 1fr auto; }
}

/* Acabamentos (03/11): o preço com o riscado numa linha só; a mesa grudada
   abaixo do cabeçalho, que também é grudado. */
.opcao__preco { white-space: nowrap; }
.palco { top: calc(var(--header-h, 76px) + var(--sp-16)); }
@media (max-width: 980px) { .palco { top: var(--header-h, 64px); } }

/* Kit na lista do painel: preço e itens, e a descrição embaixo. */
.peca--kit .opcao__preco { white-space: normal; }
.peca--kit .opcao__sub { display: block; color: var(--font-neutral-300); }

/* O .btn define display e venceria o atributo hidden: o "Voltar" aparecia no primeiro passo. */
.painel__acoes [hidden] { display: none; }

/* Em que tema a mesa está (03/11): uma faixa no topo do painel. */
.painel__tema {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-8);
  margin: calc(var(--sp-16) * -1) calc(var(--sp-16) * -1) 0; padding: var(--sp-8) var(--sp-16);
  border-radius: var(--radius-8) var(--radius-8) 0 0;
  background: var(--brand-secondary-main); color: var(--font-inverse);
}
.painel__tema strong { font-family: var(--font-title); font-weight: 600; font-size: 14px; color: var(--insta-eyebrow); }
.painel__trocar { border: 0; background: none; color: var(--font-inverse); text-decoration: underline; cursor: pointer; padding: 0; }
@media (max-width: 720px) { .painel__tema { margin: calc(var(--sp-12) * -1) calc(var(--sp-12) * -1) 0; padding-inline: var(--sp-12); } }
/* Cinco abas no painel de 380px: numa linha só. */
.painel__passos button { white-space: nowrap; font-size: 11.5px; padding-inline: var(--sp-2); }

/* ---------- os temas em cartões (/estudio) ---------- */
.estudio-temas { padding-block: var(--sp-40) var(--sp-56); }
.estudio-temas__topo { max-width: 52ch; margin-bottom: var(--sp-32); }
.estudio-temas__titulo {
  font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1.05;
  letter-spacing: -.02em; color: var(--font-always-dark); margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.estudio-temas__lead { color: var(--font-neutral-100); margin: var(--sp-12) 0 0; }
.estudio-temas__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-24); }
.tema-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--bg-base-100); border: 1px solid var(--stroke-primary-main);
  border-radius: var(--radius-8); overflow: hidden; box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-io), transform var(--dur-base) var(--ease-io);
}
.tema-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.tema-card__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-base-200); }
.tema-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.tema-card:hover .tema-card__img img { transform: scale(1.03); }
.tema-card__corpo { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-24); }
.tema-card__nome { font-family: var(--font-title); font-weight: 600; font-size: 22px; color: var(--font-always-dark); }
.tema-card__chamada { color: var(--font-neutral-100); }
.tema-card__conta { color: var(--font-neutral-300); }
.tema-card__cta { align-self: flex-start; margin-top: var(--sp-8); }
a.painel__trocar { text-decoration: underline; }
@media (max-width: 720px) {
  .estudio-temas__titulo { font-size: 32px; }
  .estudio-temas__grade { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Acabamento do Estúdio (03/11)
   Fica no fim de propósito: sobrescreve sem reescrever as regras de cima, e
   dá para ler (ou desfazer) o acabamento inteiro num lugar só — o mesmo
   jeito do acabamento do site.css.
   ========================================================================== */

/* ---- Painel: cartão de verdade, com respiro ---- */
.painel {
  gap: var(--sp-16); padding: var(--sp-24); background: var(--bg-base-0);
  border-color: var(--stroke-soft); border-radius: var(--radius-12, 12px);
  box-shadow: var(--shadow-2);
}
.painel__tema {
  margin: calc(var(--sp-24) * -1) calc(var(--sp-24) * -1) 0; padding: var(--sp-12) var(--sp-24);
  border-radius: var(--radius-12, 12px) var(--radius-12, 12px) 0 0;
}
.painel__titulo { font-size: 22px; line-height: 26px; letter-spacing: -.01em; }
.painel__texto { margin-top: var(--sp-8); line-height: 20px; }
.palco__janela { border-radius: var(--radius-12, 12px); }
/* uma moldura de luz por dentro da mesa: a foto deixa de parecer recortada */
.palco__janela::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(61, 74, 43, .08), inset 0 -60px 80px -60px rgba(61, 74, 43, .18);
}
.palco__ampliar {
  background: rgba(255, 253, 245, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: var(--sp-8) var(--sp-16); transition: transform var(--dur-fast) var(--ease-back), background var(--dur-fast) var(--ease-io);
}
.palco__ampliar:hover { background: var(--bg-base-0); transform: translateY(-1px) scale(1.03); }
.palco__ampliar:active { transform: scale(.97); }

/* ---- Abas dos passos: o que já foi feito fica marcado ---- */
.painel__passos { gap: var(--sp-2); }
.painel__passos button {
  position: relative; padding-block: var(--sp-8) var(--sp-12); border-bottom: 0;
  color: var(--font-neutral-300);
}
.painel__passos button::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: var(--radius-pill);
  background: var(--stroke-primary-main);
  transition: background var(--dur-base) var(--ease-io), transform var(--dur-base) var(--ease-out);
}
.painel__passos button:hover { color: var(--font-always-dark); }
.painel__passos button.is-feito { color: var(--brand-secondary-light); }
.painel__passos button.is-feito::after { background: var(--brand-secondary-light); }
.painel__passos button[aria-current="step"] { color: var(--font-always-dark); font-weight: 500; }
.painel__passos button[aria-current="step"]::after { background: var(--brand-secondary-main); transform: scaleY(1.5); }

/* ---- Busca e filtro: o .field do ds.css, no acabamento do catálogo ---- */
.lista-ctrl { gap: var(--sp-8); margin-top: var(--sp-16); }
.lista-ctrl .field {
  min-height: var(--control-h, 42px); padding: 0 var(--sp-12); gap: var(--sp-8);
  border-color: var(--stroke-primary-main); border-radius: var(--radius-8); background: var(--bg-base-100);
  transition: border-color var(--dur-fast) var(--ease-io), box-shadow var(--dur-fast) var(--ease-io), background var(--dur-fast) var(--ease-io);
}
.lista-ctrl .field:hover { border-color: var(--stroke-primary-light); }
.lista-ctrl .field:focus-within {
  border-color: var(--brand-secondary-light); background: var(--bg-base-0);
  box-shadow: var(--ring, 0 0 0 3px rgba(102, 123, 71, .2));
}
.lista-ctrl .field svg { fill: var(--font-neutral-300); transition: fill var(--dur-fast) var(--ease-io); }
.lista-ctrl .field:focus-within svg { fill: var(--brand-secondary-light); }
.lista-ctrl .field input, .lista-ctrl .field select {
  height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none;
  color: var(--font-always-dark); font-family: var(--font-body); font-size: 14px;
}
.lista-ctrl .field input::placeholder { color: var(--font-neutral-300); opacity: 1; }
.lista-ctrl .field input:focus, .lista-ctrl .field select:focus { outline: none; }
/* o X do navegador sai; entra o da marca (data-limpar) */
.lista-ctrl input[type="search"]::-webkit-search-cancel-button,
.lista-ctrl input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.lista-ctrl__busca { flex: 1 1 auto; min-width: 0; }
.lista-ctrl__limpar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; margin-right: calc(var(--sp-4) * -1); padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radius-pill); background: var(--bg-base-200); color: var(--font-neutral-100);
  transition: background var(--dur-fast) var(--ease-io), transform var(--dur-fast) var(--ease-back);
}
.lista-ctrl__limpar svg { fill: currentColor; }
.lista-ctrl__limpar:hover { background: var(--stroke-primary-main); transform: scale(1.08); }
.lista-ctrl__limpar[hidden] { display: none; }
/* o seletor: sem a seta do navegador; a seta da marca gira quando está em foco */
.lista-ctrl__filtro { flex: 0 0 auto; max-width: 52%; position: relative; cursor: pointer; }
.lista-ctrl__filtro select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: var(--sp-4); width: 100%; }
.lista-ctrl__filtro svg { pointer-events: none; transition: transform var(--dur-base) var(--ease-out), fill var(--dur-fast) var(--ease-io); }
.lista-ctrl__filtro:focus-within svg { transform: rotate(180deg); }

/* ---- Linhas da lista: hover, escolhido e toque ---- */
.pecas { gap: var(--sp-8); }
.peca {
  border-color: var(--stroke-soft); border-radius: var(--radius-8); background: var(--bg-base-0);
  transition: border-color var(--dur-base) var(--ease-io), background var(--dur-base) var(--ease-io),
              box-shadow var(--dur-base) var(--ease-io), transform var(--dur-fast) var(--ease-io);
}
.peca:hover { border-color: var(--stroke-primary-main); box-shadow: var(--shadow-1); }
.peca.is-on { border-color: var(--brand-secondary-main); background: var(--bg-base-100); box-shadow: inset 0 0 0 1px var(--brand-secondary-main); }
.peca--escolha:active { transform: scale(.99); }
.peca__botao:focus-visible { outline: 2px solid var(--brand-secondary-light); outline-offset: 2px; }
.opcao__img { border-radius: var(--radius-4); box-shadow: inset 0 0 0 1px rgba(61, 74, 43, .08); }
.opcao__nome { font-size: 15px; line-height: 19px; letter-spacing: -.005em; }
.opcao__preco { margin-top: var(--sp-2); color: var(--font-neutral-100); }
.opcao__avulsa { font-size: 12px; }
.peca--escolha.is-on .peca__marca { animation: estudio-marca var(--dur-base) var(--ease-back); }
@keyframes estudio-marca { from { transform: scale(.6); } }
.peca__marca { transition: border-color var(--dur-fast) var(--ease-io), box-shadow var(--dur-base) var(--ease-back); }
.peca--escolha:hover .peca__marca { border-color: var(--stroke-primary-light); }

/* o seletor de quantidade: pílula da marca */
.peca__stepper { border-radius: var(--radius-pill); border-color: var(--stroke-primary-main); background: var(--bg-base-0); }
.peca__stepper button { width: 32px; height: 32px; border-radius: var(--radius-pill); background: transparent; transition: background var(--dur-fast) var(--ease-io), transform var(--dur-fast) var(--ease-back); }
.peca__stepper button:not(:disabled):hover { background: var(--bg-base-200); }
.peca__stepper button:not(:disabled):active { transform: scale(.88); }
.peca.is-on .peca__stepper { border-color: var(--brand-secondary-main); }
.peca.is-on .peca__stepper output { color: var(--brand-secondary-main); }

.grupo { margin-top: var(--sp-16); }
.painel__grupo { margin: 0 0 var(--sp-8); }
.grupo__mais { margin-top: var(--sp-8); border-color: var(--stroke-primary-main); transition: background var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io), border-color var(--dur-fast) var(--ease-io); }
.grupo__mais:hover { background: var(--bg-base-100); color: var(--font-always-dark); border-style: solid; }

/* ---- Seu kit, total e botões ---- */
.painel__kit { gap: var(--sp-12); padding-top: var(--sp-16); border-top-color: var(--stroke-soft); }
.painel__item { transition: background var(--dur-fast) var(--ease-io), border-color var(--dur-fast) var(--ease-io); }
.painel__item:hover { border-color: var(--stroke-primary-light); }
.painel__total { padding-top: var(--sp-4); }
.painel__total strong { font-size: 24px; letter-spacing: -.01em; }
.painel__acoes .btn { min-height: 44px; }
.painel__acoes [data-avancar] { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); }
.painel__acoes [data-avancar] svg { fill: currentColor; transition: transform var(--dur-base) var(--ease-out); }
.painel__acoes [data-avancar]:not(:disabled):hover svg { transform: translateX(3px); }

@media (max-width: 720px) {
  .painel { padding: var(--sp-16); }
  .painel__tema { margin: calc(var(--sp-16) * -1) calc(var(--sp-16) * -1) 0; padding-inline: var(--sp-16); }
}
@media (prefers-reduced-motion: reduce) {
  .peca--escolha.is-on .peca__marca { animation: none; }
}

/* Abas = passos do kit (04/11): o número vem do contador do CSS; nome longo
   ou muitas abas viram reticências, e o nome inteiro fica no title. */
.painel__passos button { overflow: hidden; text-overflow: ellipsis; padding-inline: var(--sp-2); }

/* Cartão "Novos temas" na escolha de tema (04/11): não é link, então não
   reage ao mouse; a área da foto é um recorte vazio da base de corte. */
.tema-card--embreve { background: var(--bg-base-0); border-style: dashed; box-shadow: none; }
.tema-card--embreve:hover { box-shadow: none; transform: none; }
.tema-card__img--embreve {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(61, 74, 43, .08) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(61, 74, 43, .08) 23px 24px),
    var(--bg-base-100);
}
.tema-card__selo {
  padding: var(--sp-6) var(--sp-12); border-radius: var(--radius-pill);
  background: var(--bg-base-0); border: 1px solid var(--stroke-primary-main);
  color: var(--font-neutral-200); text-transform: uppercase; letter-spacing: .08em;
}

/* ==========================================================================
   Celular (04/11, segunda rodada): o Estúdio vira uma tela só.
   Mesa em cima, inteira; embaixo, o painel como uma folha: abas, a lista que
   rola só ali dentro, e a barra do total com o "Continuar". A página não
   precisa subir e descer — quem rola é a lista, e a mesa nunca sai de vista.
   (A primeira rodada deixava a página rolar com a mesa grudada: a mesa ficava
   baixa demais e cortava o kit, e o cliente subia e descia o tempo todo.)
   ========================================================================== */
.painel__rolo { display: contents; }
.painel__barra { display: flex; flex-direction: column; gap: var(--sp-12); }

@media (max-width: 720px) {
  /* o título fica para o leitor de tela: o selo na mesa já diz o tema */
  .estudio { padding: 0; }
  .estudio__topo {
    position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  /* a tela inteira, menos o cabeçalho */
  .estudio__grade {
    position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0;
    height: calc(100vh - var(--header-h, 64px));
    height: calc(100dvh - var(--header-h, 64px));
  }

  /* a mesa: 3:2 inteira quando cabe; em telefone baixo, o enquadramento do
     estudio.js aproxima do kit dentro da janela (nada de cortar a árvore) */
  .palco { position: relative; top: auto; flex: none; margin: 0; z-index: 1; }
  .palco__janela { aspect-ratio: auto; height: min(66.667vw, 38vh); height: min(66.667vw, 38dvh); border-radius: 0; box-shadow: none; }
  .palco__janela::after { border-radius: 0; }
  .palco__cena { inset: 0 0 auto 0; aspect-ratio: 3 / 2; }
  .palco__ampliar { right: var(--sp-8); bottom: calc(var(--sp-16) + var(--sp-8)); padding: var(--sp-6) var(--sp-12); }
  .palco__vazio { top: calc(50% - var(--sp-8)); padding: var(--sp-8) var(--sp-12); font-size: 13px; }

  /* o tema vira um selo sobre a mesa */
  .painel__tema {
    position: absolute; top: var(--sp-8); left: var(--sp-8); z-index: 2; margin: 0;
    padding: var(--sp-4) var(--sp-12); gap: var(--sp-12); border-radius: var(--radius-pill);
    box-shadow: var(--shadow-1);
  }

  /* o painel: uma folha que sobe um pouco sobre a mesa */
  .painel {
    flex: 1 1 auto; min-height: 0; z-index: 2; gap: 0;
    margin-top: calc(var(--sp-16) * -1); padding: 0;
    border: 0; border-radius: var(--radius-8) var(--radius-8) 0 0;
    box-shadow: 0 -8px 24px -14px rgba(61, 74, 43, .35);
  }
  .painel__passos { flex: none; padding: var(--sp-8) var(--sp-16) 0; }
  .painel__rolo {
    display: flex; flex-direction: column; gap: var(--sp-16);
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: var(--sp-12) var(--sp-16) var(--sp-16);
  }
  .painel__titulo { font-size: 20px; line-height: 24px; }
  .painel__texto { margin-top: var(--sp-4); }

  /* abas: só o número nas outras; o passo atual com o nome inteiro */
  .painel__passos { display: flex; gap: var(--sp-4); }
  .painel__passos li { flex: 0 0 auto; }
  .painel__passos li:has(> [aria-current="step"]) { flex: 1 1 auto; min-width: 0; }
  .painel__passos button { min-height: 40px; font-size: 13px; }
  .painel__passos button:not([aria-current="step"]) { width: 34px; font-size: 0; padding-inline: 0; }
  .painel__passos button:not([aria-current="step"])::before { content: counter(passo); font-size: 13px; }
  .painel__passos button[aria-current="step"] { text-align: left; padding-inline: var(--sp-6); }

  /* listas mais enxutas: cabe mais opção na folha */
  .peca { grid-template-columns: 72px 1fr auto; }
  .peca__botao { grid-template-columns: 72px 1fr auto; }
  .peca__botao--sem { grid-template-columns: 1fr auto; min-height: 48px; }
  .lista-ctrl { margin-top: var(--sp-12); }

  /* a barra do total, no pé da folha */
  .painel__barra {
    flex: none; flex-direction: row; align-items: center; gap: var(--sp-12);
    padding: var(--sp-12) var(--sp-16) calc(var(--sp-12) + env(safe-area-inset-bottom));
    background: var(--bg-base-0); border-top: 1px solid var(--stroke-soft);
  }
  .painel__barra .painel__total { flex: none; flex-direction: column; align-items: flex-start; padding-top: 0; }
  .painel__barra .painel__total span { font-size: 12px; line-height: 14px; }
  .painel__barra .painel__total strong { font-size: 20px; line-height: 24px; }
  .painel__barra .painel__acoes { flex: 1; min-width: 0; }
  .painel__barra .painel__acoes .btn { padding-inline: var(--sp-12); }
}