/* Simulador de orçamento — MODELO 2 (preço base + arte avulsa).
   Duplicado de style.css de propósito, mais as regras do campo "artes
   diferentes" no final do arquivo. Paleta e tipografia lidas do site
   arteriabrasil.com.br. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --vinho: #701F38;
  --vinho-escuro: #55162a;
  --laranja: #FC4D16;
  --laranja-escuro: #d93d0c;
  --creme: #F8EEE5;
  --creme-claro: #FFF8F2;
  --branco: #ffffff;
  --texto: #212529;
  --texto-suave: #69727D;
  --borda: #e6d8cb;
  --sombra: 0 6px 24px rgba(112, 31, 56, 0.10);
  --sombra-forte: 0 12px 36px rgba(112, 31, 56, 0.16);
  --raio: 14px;
  --titulo: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --corpo: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
}

body {
  font-family: var(--corpo);
  background: var(--creme);
  color: var(--texto);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Modo embutido (?embed=1): sem topo nem rodapé, para não duplicar a marca
   quando a página está dentro de um <iframe> no site do cliente. */
body.embed .topo,
body.embed .rodape {
  display: none;
}

/* ---------- Topo ---------- */
.topo {
  background: var(--vinho);
  color: var(--branco);
  padding: 1.5rem 1.25rem;
}

.topo-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.topo-logo {
  height: 52px;
  width: auto;
}

.topo-texto h1 {
  font-family: var(--titulo);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.topo-texto p {
  font-size: 0.98rem;
  opacity: 0.85;
  margin-top: 0.15rem;
}

/* ---------- Layout ---------- */
.pagina {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 2rem;
  align-items: start;
}

.secao-titulo {
  font-family: var(--titulo);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--vinho);
}

.secao-sub {
  color: var(--texto-suave);
  font-size: 1.14rem; /* 0.95rem + 20% */
  margin-top: 0.2rem;
  margin-bottom: 1.25rem;
}

/* ---------- Galeria ---------- */
.produtos-grid {
  display: grid;
  /* O min() evita que a coluna de 260px estoure a tela em celular estreito —
     sem ele o corpo da página ganha rolagem horizontal abaixo de ~300px. */
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 1.5rem;
}

/* A galeria não carregou. Ocupa a largura toda da grade: um recado espremido numa
   coluna de 260px pareceria um card quebrado, e não um aviso. */
.catalogo-erro {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--texto-suave);
  padding: 3rem 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.produto {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.produto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-forte);
}

.produto-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--creme-claro);
  padding: 0.75rem;
  display: block;
}

.foto-vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--borda);
  color: var(--texto-suave);
  font-size: 0.85rem;
  text-align: center;
}

.item-foto.foto-vazia { font-size: 0.6rem; }

.produto-info {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.produto-nome {
  font-family: var(--titulo);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--vinho);
}

.produto-desc {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--texto-suave);
  flex: 1;
}

/* Seletor de quantidade */
.qtd {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  width: fit-content;
}

.qtd-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: var(--creme-claro);
  color: var(--vinho);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.qtd-btn:hover:not(:disabled) { background: var(--vinho); color: var(--branco); }
.qtd-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.qtd-valor {
  min-width: 60px;
  text-align: center;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 0.98rem;
}

.btn-adicionar {
  width: 100%;
  padding: 0.7rem;
  background: var(--laranja);
  color: var(--branco);
  border: none;
  border-radius: 10px;
  font-family: var(--titulo);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}

.btn-adicionar:hover { background: var(--laranja-escuro); transform: translateY(-1px); }

.btn-adicionar:disabled {
  background: var(--borda);
  color: var(--texto-suave);
  cursor: not-allowed;
  transform: none;
}

/* Card do produto já no orçamento: opaco, para ficar óbvio que a ação some
   e a quantidade/artes se ajustam na lista ao lado, não aqui de novo. */
.produto--no-orcamento {
  opacity: 0.6;
}

.produto--no-orcamento:hover {
  transform: none;
  box-shadow: var(--sombra);
}

/* ---------- Painel do orçamento ---------- */
/* min-width: 0 nos dois itens do grid. Sem isso o tamanho mínimo automático de
   um item de grid é o min-content dele, e o campo de CEP (que tem largura
   intrínseca de ~200px por ser <input>) impede a coluna de encolher. */
.galeria { min-width: 0; }

.orcamento { position: sticky; top: 1.5rem; min-width: 0; }

.orcamento-box {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
}

.carrinho-vazio {
  text-align: center;
  color: var(--texto-suave);
  padding: 2rem 0.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.carrinho-vazio-icone { font-size: 2rem; display: block; margin-bottom: 0.6rem; }

.carrinho-lista { list-style: none; margin-top: 1.1rem; }

/* O item é uma coluna: primeiro a linha foto+texto, depois quantidade e
   artes ocupam a largura toda — não ficam espremidos na coluna do texto,
   ao lado da foto. */
.item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--borda);
}

.carrinho-lista .item:first-child { border-top: none; padding-top: 0.25rem; }

.item-topo {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.item-foto {
  width: 92px;
  height: 92px;
  object-fit: contain;
  background: var(--creme-claro);
  border-radius: 10px;
  padding: 0.3rem;
  flex-shrink: 0;
}

.item-topo-corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: flex-start;
}

.item-nome {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--vinho);
}

/* Selo da arte: é ele que deixa claro que duas linhas do mesmo produto não
   são um engano de digitação. */
.item-arte {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  background: var(--vinho);
  color: var(--branco);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.item-desc {
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--texto-suave);
}

.item-remover {
  background: none;
  border: none;
  color: var(--texto-suave);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.25rem;
  border-radius: 6px;
  flex-shrink: 0;
}

.item-remover:hover { color: var(--laranja); background: var(--creme-claro); }

.item-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.item-unitario { font-size: 0.82rem; color: var(--texto-suave); }

.item-total {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--texto);
}

.item .qtd-btn { width: 32px; height: 32px; font-size: 1.1rem; }
.item .qtd-valor { min-width: 48px; font-size: 0.9rem; }

/* Campo "artes diferentes" — mesmo padrão visual da quantidade, para deixar
   claro que é outro contador do mesmo tipo, não um campo de texto solto. O
   contador vem primeiro, na mesma ordem da linha de quantidade acima dele.
   O espaço em relação à linha de cima já vem do gap do .item — sem
   margin-top aqui para não dobrar o espaçamento. */
.item-artes {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.item-artes-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto);
}

.icone-arte {
  width: 22px;
  height: 22px;
  color: var(--vinho);
  flex-shrink: 0;
}

.qtd--artes .qtd-btn { width: 28px; height: 28px; font-size: 1rem; }
.qtd--artes .qtd-valor { min-width: 32px; font-size: 0.85rem; }

/* ---------- Frete ---------- */
.frete-bloco {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borda);
}

.frete-bloco label {
  display: block;
  font-family: var(--titulo);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 0.45rem;
}

.frete-linha { display: flex; gap: 0.5rem; }

#cep {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--borda);
  border-radius: 10px;
  font-family: var(--corpo);
  font-size: 0.95rem;
  color: var(--texto);
  background: var(--branco);
  transition: border-color 0.18s;
}

#cep:focus { outline: none; border-color: var(--laranja); }

.frete-status {
  font-size: 0.82rem;
  color: var(--texto-suave);
  margin-top: 0.5rem;
  line-height: 1.4;
  min-height: 1.1em;
}

.frete-status.erro { color: var(--laranja-escuro); font-weight: 600; }
.frete-status.ok { color: #2f7a4f; }

/* Opções de frete devolvidas pelo Melhor Envio */
.frete-opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.6rem;
}

.frete-opcao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.75rem;
  text-align: left;
  padding: 0.6rem 0.75rem;
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--corpo);
  transition: border-color 0.15s, background 0.15s;
}

.frete-opcao:hover { border-color: var(--laranja); }

.frete-opcao--ativa {
  border-color: var(--vinho);
  background: var(--creme-claro);
}

.frete-opcao-nome {
  font-family: var(--titulo);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--texto);
}

.frete-opcao-prazo {
  grid-column: 1;
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.frete-opcao-preco {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--titulo);
  font-size: 1rem;
  font-weight: 700;
  color: var(--vinho);
}

.frete-carregando {
  font-size: 0.82rem;
  color: var(--texto-suave);
  font-style: italic;
}

.frete-erro {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--laranja-escuro);
  line-height: 1.4;
}

/* ---------- Totais ---------- */
.totais {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borda);
}

.totais-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.35rem 0;
  font-size: 0.95rem;
}

.totais-linha dt { color: var(--texto-suave); }
.totais-linha dd { font-weight: 600; }

.totais-nota { font-size: 0.75rem; }

.totais-linha--final {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1.5px dashed var(--borda);
}

.totais-linha--final dt {
  font-family: var(--titulo);
  font-weight: 800;
  color: var(--texto);
  font-size: 1.05rem;
}

.totais-linha--final dd {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--vinho);
}

/* ---------- Aviso de frete grátis ---------- */
.gratis-aviso {
  margin-top: 0.9rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: var(--creme-claro);
  border: 1.5px dashed var(--laranja);
  color: var(--laranja-escuro);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.gratis-aviso--ok {
  border-style: solid;
  border-color: #2f7a4f;
  background: #eef8f1;
  color: #2f7a4f;
}

/* ---------- Ações ---------- */
.orcamento-acoes {
  margin-top: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.btn-primario {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 0.85rem 1rem;
  background: var(--vinho);
  color: var(--branco);
  border: none;
  border-radius: 10px;
  font-family: var(--titulo);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}

.btn-primario:hover { background: var(--vinho-escuro); transform: translateY(-1px); }

.btn-primario[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.btn-secundario {
  padding: 0.65rem 1rem;
  background: transparent;
  color: var(--vinho);
  border: 1.5px solid var(--vinho);
  border-radius: 10px;
  font-family: var(--titulo);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.btn-secundario:hover { background: var(--vinho); color: var(--branco); }

.btn-secundario:disabled {
  border-color: var(--borda);
  color: var(--texto-suave);
  cursor: not-allowed;
}

.btn-secundario:disabled:hover { background: transparent; color: var(--texto-suave); }

.btn-bloco { width: 100%; }

.btn-texto {
  background: none;
  border: none;
  color: var(--texto-suave);
  font-family: var(--corpo);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0.25rem;
}

.btn-texto:hover { color: var(--laranja); }

.aviso {
  margin-top: 1rem;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--texto-suave);
  text-align: center;
}

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--vinho);
  color: var(--branco);
  text-align: center;
  padding: 1.5rem 1.25rem;
  font-size: 0.88rem;
  line-height: 1.6;
}

.rodape p:last-child { opacity: 0.8; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--vinho);
  color: var(--branco);
  padding: 0.8rem 1.4rem;
  border-radius: 10px;
  font-family: var(--titulo);
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: var(--sombra-forte);
  z-index: 50;
  animation: sobe 0.25s ease;
}

@keyframes sobe {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .pagina { grid-template-columns: 1fr; }
  .orcamento { position: static; }
}

@media (max-width: 520px) {
  .topo-texto h1 { font-size: 1.25rem; }
  .produtos-grid { grid-template-columns: 1fr; }
  .orcamento-box { padding: 1.15rem; }
}

/* ---------- Impressão / PDF ---------- */
@media print {
  body { background: var(--branco); }
  .galeria, .frete-linha, .frete-opcoes, .orcamento-acoes, .rodape, .toast, .item-faixa { display: none !important; }
  .topo { background: var(--branco); color: var(--texto); border-bottom: 2px solid var(--vinho); }
  .topo-logo { background: none; padding: 0; }
  .pagina { display: block; padding: 1rem 0; }
  .orcamento-box { border: none; box-shadow: none; padding: 0; }
  .item { break-inside: avoid; }
  .qtd-btn { display: none; }
}

/* ==========================================================================
   FILTROS DA GALERIA
   Um bloco por grupo de tag. O rótulo tem largura fixa para os grupos ficarem
   alinhados em coluna — sem isso, "Produto" e "Acabamento" começam em pontos
   diferentes e a barra parece torta.
   ========================================================================== */

.filtros { display: flex; flex-direction: column; gap: 0.55rem; margin: 1.1rem 0 1.6rem; }

.filtro-grupo { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }

.filtro-rotulo {
  font-family: var(--titulo);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-suave);
  flex: 0 0 6rem;
}

.filtro-pastilhas { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.pastilha {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--corpo);
  font-size: 0.83rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--branco);
  color: var(--texto);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pastilha:hover { border-color: var(--vinho); }
.pastilha-conta { font-size: 0.72rem; color: var(--texto-suave); }
.pastilha--ativa { background: var(--vinho); border-color: var(--vinho); color: var(--creme-claro); }
.pastilha--ativa .pastilha-conta { color: rgba(255, 255, 255, 0.72); }

.grade-vazia { text-align: center; color: var(--texto-suave); padding: 3rem 1rem; }

/* ==========================================================================
   CARD: CAPA CLICÁVEL E SELO DE MÍDIA
   A grade mostra uma foto só. Um carrossel em cada card deixaria sete peças
   piscando ao mesmo tempo; o selo avisa que há mais, e o carrossel grande
   mora na ficha.
   ========================================================================== */

.produto-capa {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.produto-selo {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  background: rgba(33, 37, 41, 0.76);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  pointer-events: none;
}

.produto-acoes { display: flex; flex-direction: column; gap: 0.35rem; margin-top: auto; }

.btn-detalhes {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--corpo);
  font-size: 0.84rem;
  color: var(--vinho);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.25rem;
}

.btn-detalhes:hover { color: var(--laranja-escuro); }

/* ==========================================================================
   FICHA DO PRODUTO
   Sobreposição, não página: a página roda em iframe e o orçamento vive na
   memória — navegar para outro endereço apagaria o que o cliente montou.
   ========================================================================== */

body.sem-rolagem { overflow: hidden; }

.ficha-fundo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(85, 22, 42, 0.55);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow-y: auto;
}

.ficha {
  position: relative;
  width: min(940px, 100%);
  max-height: min(88vh, 740px);
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra-forte);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
}

.ficha-fechar {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--texto);
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--sombra);
}

.ficha-fechar:hover { background: var(--branco); color: var(--vinho); }

.ficha-midia {
  background: var(--creme-claro);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.ficha-palco { position: relative; flex: 1; display: grid; place-items: center; min-height: 240px; }

.ficha-quadro {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--branco);
}

.ficha-vazio {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 2px dashed var(--borda);
  border-radius: 8px;
  color: var(--texto-suave);
  font-size: 0.88rem;
}

.ficha-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--sombra);
  color: var(--vinho);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.ficha-seta:hover { background: var(--branco); }
.ficha-seta--esq { left: 0.2rem; }
.ficha-seta--dir { right: 0.2rem; }

.ficha-miniaturas { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.miniatura {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 7px;
  overflow: hidden;
  background: var(--branco);
  cursor: pointer;
}

.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura--ativa { border-color: var(--vinho); }

.miniatura-video {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--vinho);
  color: var(--creme-claro);
  font-size: 0.9rem;
}

.ficha-texto {
  padding: 1.6rem 1.5rem 1.4rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.ficha-nome { font-family: var(--titulo); font-size: 1.32rem; font-weight: 700; color: var(--vinho); }

.ficha-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.ficha-tag {
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  background: var(--creme);
  color: var(--texto-suave);
}

/* pre-line: a quebra de linha que a pessoa digitou no painel sobrevive. */
.ficha-descricao { font-size: 0.93rem; line-height: 1.6; white-space: pre-line; }

/* Frase, não etiqueta. Nasceu em caixa alta espaçada, que servia para o rótulo
   curto de antes; o texto agora vem do painel e pode ser uma frase inteira, que
   em caixa alta fica pesada e quebra mal. Fonte do corpo, peso normal, tamanho
   de leitura — assim aguenta tanto três palavras quanto uma linha inteira. */
.ficha-subtitulo {
  font-family: var(--corpo);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--texto);
  margin-bottom: 0.55rem;
}

.tabela-precos { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.tabela-precos th {
  text-align: left;
  font-family: var(--corpo);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-suave);
  font-weight: 600;
  padding-bottom: 0.3rem;
}

.tabela-precos th:last-child, .tabela-precos td:last-child { text-align: right; }
.tabela-precos td { padding: 0.32rem 0; border-top: 1px solid var(--borda); }
.tabela-precos td:last-child { font-weight: 700; color: var(--vinho); }


.ficha-acoes { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.6rem; }
.ficha-acoes .btn-adicionar, .ficha-acoes .btn-secundario { flex: 1 1 auto; text-align: center; width: auto; }
.ficha-youtube { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Tela estreita: a ficha vira uma coluna só, mídia em cima e texto embaixo. */
@media (max-width: 780px) {
  .ficha-fundo { padding: 0.75rem; }
  .ficha { grid-template-columns: 1fr; max-height: 92vh; }
  .ficha-midia { padding: 0.9rem; }
  .ficha-palco { min-height: 0; }
  .ficha-quadro { max-height: 46vh; }
  .filtro-rotulo { flex-basis: 100%; }
}

/* O atributo `hidden` precisa vencer o `display` das regras acima. Sem isto,
   qualquer elemento que tenha [hidden] no HTML e um `display: flex/grid` na
   classe nasce visível — foi o que aconteceu com a ficha do produto, que abriu
   sozinha e vazia na primeira vez que subiu. Fica por último, de propósito. */

/* A linha abaixo da tabela de faixas. Texto do painel — some quando vazio.
   Fica antes da regra global de [hidden], que continua sendo a última. */
.ficha-aviso { font-size: 0.78rem; line-height: 1.45; color: var(--texto-suave); margin-top: 0.55rem; }

/* O atributo `hidden` precisa vencer o `display` das regras acima. Sem isto,
   qualquer elemento com [hidden] no HTML e um `display: flex/grid` na classe
   nasce visível — foi o que aconteceu com a ficha, que abriu sozinha e vazia.
   Fica por último, de propósito. */
[hidden] { display: none !important; }