/* =====================================================================================
   Viver de Comprinha · pg-modulo.css · páginas dos módulos (/ofertas e /catalogo-viral) e as peças que a home também
   usa (a home carrega este arquivo antes do pg-inicio.css). Carregar depois de v4.css, v4-vdc.css e marca.css.
   Especificação: docs/23-identidade-v4.md §3.1 (item 11, página de produto) e docs/22-catalogo-viral.md.

   Só o que a v4 e a camada do site não têm: 1 a demonstração "Gerar texto" do /ofertas (o pg-demo.js usa os ids d1-*,
   .tom[data-tom], .valida e [data-exemplo]; só a apresentação mudou) · 2 as peças "Demonstração" do Catálogo Viral
   (dados fictícios, com N no lugar de número) · 3 lojas, pesos da nota, fontes e limites · 4 ponte "oferta pronta".
   Regras: só tokens; um lima por bloco (o botão "Gerar texto pronto" na demonstração; "Aprovar e agendar" na ponte);
   texto de 14 px ou mais fora das peças; alvo de 44 px.
   ===================================================================================== */

/* ============================================================ 1 Demonstração "Gerar texto" (/ofertas#experimente) */
.demo { border: 1px solid var(--borda); border-radius: var(--r-xl); background: #fff; overflow: hidden; box-shadow: var(--sombra-1); }
.demo-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--fundo-2); border-bottom: 1px solid var(--linha); font-size: 13px; color: var(--texto-2); }
.demo-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--borda-forte); flex: none; }
.demo-barra b { margin-left: 6px; color: var(--tinta); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-g { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .demo-g { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .demo-form { border-right: 1px solid var(--linha); border-bottom: 0; } }
.demo-form { display: grid; gap: 16px; align-content: start; padding: 24px; border-bottom: 1px solid var(--linha); }
.demo-form h3, .demo-saida h3 { font-size: 18px; }
.exemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.exemplos-rot { font-size: 14px; color: var(--texto-2); margin-right: 2px; }
.exemplos .chip { cursor: pointer; }
.exemplos .chip:hover { border-color: var(--borda-forte); background: var(--fundo-2); }
.campo-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.campo .ajuda { font-size: 13px; }
.loja-id:empty { display: none; }
.loja-id span { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
.loja-id .reconhecida { color: var(--ok); }
.loja-id .desconhecida { color: var(--erro); }
.loja-id .aviso-l { color: var(--atencao); font-weight: 500; }
.demo-form .msg-erro:empty { display: none; }
.demo-form .aceite { align-items: center; min-height: 44px; font-size: 14px; cursor: pointer; }
.demo-saida { display: grid; gap: 14px; align-content: start; padding: 24px; background: var(--fundo-2); }
.saida-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.demo-saida .vazio { padding: 32px 20px; background: #fff; }
/* os 3 tons: segmentado (o tom escolhido fica branco com o nome em violeta escuro) */
.tons { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 8px; background: var(--superficie-3); }
.tom { min-height: 44px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--tinta); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.tom[aria-pressed="true"] { background: #fff; color: var(--marca-forte); font-weight: 600; box-shadow: var(--sombra-1); }
.tom:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.demo-saida textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
.valida { font-size: 14px; font-weight: 600; line-height: 1.45; }
.valida.ok { color: var(--ok); }
.valida.erro { color: var(--erro); }
.valida:empty { display: none; }
.demo-avisos { list-style: none; display: grid; gap: 6px; }
.demo-avisos:empty { display: none; }
.demo-avisos li { padding: 10px 12px; border-radius: 10px; background: var(--atencao-fundo); color: var(--atencao); font-size: 14px; line-height: 1.45; }
.demo-saida .acoes { gap: 10px 12px; }
/* a prévia no formato do grupo: peça "Demonstração" da v4-vdc, sem verde nem ícone do WhatsApp */
.demo-saida .peca-demo { max-width: none; background: #fff; }
.demo-saida .peca-demo .balao { max-width: 100%; }
.demo-nota { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.demo-nota .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--marca); }
/* fecho da seção: "Gostou?" com o primário e a nota do teste */
.mod-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: var(--e7); padding: 20px 24px; border-radius: var(--r-xl); background: var(--marca-suave); }
.mod-pe > p { font-size: 16px; color: var(--tinta); }
.mod-pe-acao { display: grid; gap: 8px; justify-items: start; }
.mod-pe-acao .nota-prova { font-size: 13px; }
@media (max-width: 719px) {
  .demo-form, .demo-saida { padding: 16px; }
  .campo-par { grid-template-columns: minmax(0, 1fr); }
  .tons { display: flex; }
  .tom { flex: 1 1 auto; min-height: 48px; }
  .mod-pe { padding: 18px 16px; }
  .mod-pe-acao, .mod-pe-acao .btn { width: 100%; }
  .demo-nota, .mod-pe-acao .nota-prova, .loja-id span { font-size: 14px; }
}

/* ============================================================ 2 Peças "Demonstração" do Catálogo Viral (dados fictícios; N = número que a Shopee ou o YouTube informa) */
.cv-corpo { display: grid; gap: 8px; padding: 12px 14px 14px; font-size: 13px; color: var(--texto); }
.cv-abas { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); }
.cv-aba { display: inline-flex; align-items: center; height: 34px; padding: 0 10px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--texto); font-size: 13px; font-weight: 500; }
.cv-aba.cv-on { color: var(--tinta); font-weight: 600; border-bottom-color: var(--marca); }
.cv-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-filtro { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--r-pilula); background: #fff; color: var(--tinta); font-size: 12.5px; font-weight: 500; }
.cv-filtro.cv-on { border-color: var(--marca); background: var(--marca-suave); color: var(--marca-forte); }
.cv-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; padding: 10px; border: 1px solid var(--linha); border-radius: var(--r-l); background: #fff; }
.cv-item > div { min-width: 0; }
.cv-item b { display: block; color: var(--tinta); font-size: 13.5px; line-height: 1.3; }
.cv-foto, .cv-mini { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-m); background: var(--fundo-2); color: var(--texto-3); }
.cv-foto .ico, .cv-mini .ico { width: 22px; height: 22px; }
.cv-mini { background: var(--superficie-3); color: var(--marca); }
.cv-dados { display: grid; gap: 1px; margin-top: 2px; font-size: 12.5px; color: var(--texto-2); line-height: 1.35; }
.cv-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px; background: var(--superficie-3); color: var(--tinta); font-size: 11.5px; font-weight: 700; font-style: normal; }
.cv-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cv-acoes span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: var(--r-m); background: var(--superficie-3); color: var(--tinta); font-size: 12.5px; font-weight: 600; }
.cv-acoes .cv-pri { background: var(--marca); color: var(--marca-contraste); }
.cv-acoes .cv-lima { background: var(--lima); color: var(--tinta); }     /* o lima da peça (um por bloco) */
.cv-linha { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: var(--r-m); background: #fff; font-size: 12.5px; color: var(--texto-2); }
.cv-linha b { color: var(--tinta); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-linha > span { flex: none; }
.cv-fonte, .cv-frase { font-size: 12px; color: var(--texto-2); line-height: 1.4; }
.cv-campo { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--borda-campo); border-radius: var(--r-m); background: #fff; color: var(--texto-2); font-size: 13px; }
.cv-campo.cheio { color: var(--tinta); }
.cv-campo .ico { width: 16px; height: 16px; color: var(--texto-2); }
.cv-bloco { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-m); background: var(--fundo-2); color: var(--tinta); font-size: 13px; line-height: 1.4; }
.cv-bloco > span:first-child { font-size: 11.5px; font-weight: 600; color: var(--texto-2); }
.cv-bloco ol { display: grid; gap: 3px; padding-left: 18px; }
.cv-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cv-ok { display: flex; align-items: flex-start; gap: 6px; color: var(--ok); font-weight: 500; }
.cv-ok .ico { width: 14px; height: 14px; margin-top: 2px; }
.cv-ok.cv-info { color: var(--texto-2); }
.cv-espera { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-m); background: var(--atencao-fundo); color: var(--atencao); font-size: 12.5px; line-height: 1.4; }
.cv-espera b { color: inherit; }
.cv-oferta { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; }
.cv-oferta .balao { max-width: 100%; justify-self: start; }
/* dentro do cartão pastel, a peça guarda os próprios tamanhos (o ".cartao p" da v4 pede 15 px e 52ch) */
.cartao .peca-demo p { max-width: none; }
.peca-demo .cv-fonte, .peca-demo .cv-frase { font-size: 12px; line-height: 1.4; color: var(--texto-2); }
.cartao-txt > .lozenge { justify-self: start; }
/* tela com trecho ampliado (tabela do computador num cartão estreito): a imagem fica maior que o quadro (--zoom) e
   anda até o trecho citado (--zx/--zy, em % da própria imagem) */
.cartao-tela.zoom .tela-img img { position: absolute; left: 0; top: 0; width: var(--zoom, 200%); height: auto; max-width: none; object-fit: initial; transform: translate(var(--zx, 0), var(--zy, 0)); }
/* a peça como "tela" do cartão pastel: colada na base do cartão, sem borda própria */
.cartao-tela > .peca-demo { max-width: none; border: 0; border-radius: 0; background: var(--fundo-2); }
.cartao-lado .cartao-tela { align-self: end; }
@media (max-width: 719px) {
  .cv-corpo { font-size: 14px; } .cv-item b { font-size: 14px; }
  .cv-dados, .cv-linha, .cv-fonte, .cv-frase, .cv-acoes span, .cv-filtro, .cv-bloco, .cv-espera, .cv-campo { font-size: 13px; }
  .cv-duas { grid-template-columns: minmax(0, 1fr); }
  .peca-demo .cv-fonte, .peca-demo .cv-frase { font-size: 13px; }
  .cv-largo { display: none; }   /* a peça fica curta no celular: sai o que só repete o exemplo */
}

/* ============================================================ 3 Lojas, pesos da nota, fontes e limites */
.nomes-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.nomes-chips li { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: var(--r-pilula); background: rgb(255 255 255 / 0.85); border: 1px solid var(--linha); color: var(--tinta); font-size: 13.5px; font-weight: 500; }
.cartao .lista-check { list-style: none; display: grid; gap: 6px; font-size: 15px; color: var(--texto); }
.cartao .lista-check li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.cartao .lista-check .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--c-ico); }
.pesos-tit { font-size: 13px; font-weight: 600; color: var(--c-tinta); margin-top: 4px; }
.pesos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pesos li { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--r-pilula); background: rgb(255 255 255 / 0.85); color: var(--tinta); font-size: 13px; }
.pesos b { color: var(--marca-forte); font-weight: 700; }
.msg-secao.info { align-items: flex-start; }
.msg-secao.info .ico { color: var(--marca); }
/* ressalva dentro do cartão pastel (regra da loja, envio liberado aos poucos): ícone de aviso + texto na tinta */
.cartao .nota-cartao { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--tinta); }
.cartao .nota-cartao .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--c-tinta); }
/* 3 passos (Catálogo Viral): 3 colunas no computador e no tablet, carrossel no celular */
.passos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* "não faz": cartões neutros com o X no quadro do ícone */
.cartao.cor-nevoa .cartao-ico { background: var(--tinta); }
.fontes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e6); }
.fontes h3 { font-size: 18px; margin-bottom: var(--e3); }
.fontes-lista { list-style: none; display: grid; gap: 10px; }
.fontes-lista li { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--r-l); background: #fff; }
.fontes-lista b { color: var(--tinta); font-size: 15px; }
.fontes-lista p { font-size: 14.5px; color: var(--texto); }
.fontes-lista.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.fontes-lista.tres li { align-content: start; gap: 6px; padding: 18px 20px; }
@media (max-width: 1023px) { .fontes-lista.tres { grid-template-columns: minmax(0, 1fr); } }
.lista-x { list-style: none; display: grid; gap: 10px; }
.lista-x li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; padding: 14px 16px; border-radius: var(--r-l); background: var(--fundo-2); }
.lista-x .ico-x { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-m); background: var(--tinta); color: #fff; }
.lista-x .ico-x .ico { width: 14px; height: 14px; }
.lista-x h4 { font-size: 15px; }
.lista-x p { grid-column: 2; font-size: 14.5px; color: var(--texto); }
@media (max-width: 719px) { .fontes { grid-template-columns: minmax(0, 1fr); } .fontes-lista p, .lista-x p, .cartao .lista-check { font-size: 16px; } .pesos li, .nomes-chips li { font-size: 14px; min-height: 32px; } }

/* ============================================================ 4 Ponte "oferta pronta" e fechos de seção */
.ponte { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ponte .cab-secao { margin-bottom: var(--e5); }
.ponte .lista-check { list-style: none; display: grid; gap: 8px; font-size: 15px; color: var(--texto); }
.ponte .lista-check li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.ponte .lista-check .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--marca); }
.ponte .peca-demo { max-width: 480px; justify-self: center; width: 100%; }
.ponte .mod-pe { margin-top: var(--e6); }
.ponte .tela-legenda { justify-content: center; }
.fecho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: var(--e7); padding-top: var(--e6); border-top: 1px solid var(--linha); }
.fecho p { font-size: 15px; color: var(--tinta); max-width: 70ch; }
.fecho p strong { font-weight: 600; }
@media (max-width: 1023px) { .ponte { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 719px) { .ponte .lista-check, .fecho p { font-size: 16px; } }