/* =====================================================================================
   Viver de Comprinha · /demonstracao ("Veja funcionando").
   Só usa os tokens de marca.css: nenhuma cor, fonte, raio ou sombra nova. Um acento lima por bloco.
   ===================================================================================== */

/* ---------- herói ---------- */
.hero-demo .quadro-hero{position:relative;z-index:1}
.secao-curta{padding:var(--e8) 0}
.secao-curta-fim{padding:0 0 var(--e16)}
.ctas-nota-escura{font-size:14px;color:#EDE5FF;margin:var(--e4) auto 0!important}

/* ---------- índice ---------- */
.demo-indice{list-style:none;display:grid;gap:var(--e3);counter-reset:dm}
@media(min-width:600px){.demo-indice{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.demo-indice{grid-template-columns:repeat(4,1fr)}}
.demo-indice a{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;min-height:72px;height:100%;padding:var(--e4);
  border:1px solid var(--borda);border-radius:var(--r-md);background:var(--lavanda);text-decoration:none;color:var(--texto);transition:border-color .2s,transform .35s var(--ease)}
.demo-indice a:hover{border-color:var(--violeta);transform:translateY(-2px)}
.demo-indice a::before{counter-increment:dm;content:counter(dm);grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--violeta);color:#fff;font:800 16px/1 var(--f-titulo)}
.demo-indice b{font-size:16px;line-height:1.25}
.demo-indice span{font-size:14px;color:var(--texto-apoio);line-height:1.35;text-decoration:none}
main ol.demo-indice li a:not(.btn){text-decoration:none}  /* vence o sublinhado de links em lista do marca.css */

/* ---------- estrutura de cada demonstração ---------- */
.demo{scroll-margin-top:80px}
.demo .cab-secao{margin-bottom:var(--e8)}
.demo-grade{display:grid;gap:var(--e4);align-items:start}
@media(min-width:960px){.demo-grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e6)}}
.demo-grade>*{min-width:0}
.secao-branca .cartao{background:var(--lavanda);border-color:var(--lavanda-3)}
.secao-branca .cartao .btn-claro,.secao-branca .cartao .chip,.secao-branca .cartao .op span,.secao-branca .cartao input:not([type=range]):not([type=checkbox]):not([type=radio]),
.secao-branca .cartao select,.secao-branca .cartao textarea{background:var(--branco)}
.demo-form h3,.demo-saida h3{font-size:22px;margin:0 0 var(--e4)}
.saida-cab{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e3);align-items:center;justify-content:space-between;margin-bottom:var(--e4)}
.saida-cab h3{margin:0}
.nota-sim{display:flex;gap:10px;align-items:center;margin-top:var(--e4);font-size:14px;font-weight:600;color:var(--texto-apoio)}
.nota-sim .ic{color:var(--violeta);width:20px;height:20px}
.vazio-demo{border:2px dashed var(--borda-forte);border-radius:var(--r-md);padding:var(--e6);color:var(--texto-apoio);text-align:center}

/* ---------- campos ---------- */
.campo{display:grid;gap:6px;margin-bottom:var(--e4)}
.campo label,.rot-c,.grupo-op legend{font-weight:700;font-size:15px;color:var(--texto)}
.campo small{font-size:14px;color:var(--texto-apoio)}
.campo input:not([type=range]):not([type=checkbox]):not([type=radio]),.campo select,.campo textarea{width:100%;min-height:48px;padding:10px 14px;
  border:2px solid var(--borda-forte);border-radius:var(--r-md);background:var(--branco);color:var(--texto);font:400 16px/1.4 var(--f-texto)}
.campo textarea{min-height:180px;resize:vertical;line-height:1.5}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{border-color:var(--violeta)}
.campo input[aria-invalid=true],.campo textarea[aria-invalid=true]{border-color:var(--erro)}
.campo-linha{display:grid;gap:0 var(--e3)}
@media(min-width:420px){.campo-linha{grid-template-columns:1fr 1fr}}
.check{display:flex;gap:12px;align-items:center;min-height:48px;font-weight:600;cursor:pointer;margin-bottom:var(--e2)}
.check input{width:22px;height:22px;flex:none;accent-color:var(--violeta)}
.erro-campo{color:var(--erro);font-weight:700;font-size:15px;min-height:0}
.erro-campo:empty{display:none}
.erro-campo:not(:empty){margin-bottom:var(--e3)}
.btn-bloco{width:100%}
input[type=range]{width:100%;height:48px;accent-color:var(--violeta);cursor:pointer;margin:0}
.rot-range output{font-weight:800;color:var(--violeta)}

/* exemplos e chips */
.exemplos{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center;margin-bottom:var(--e4)}
.exemplos-rot{font-size:14px;font-weight:700;color:var(--texto-apoio);width:100%}
.chip{min-height:48px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--borda-forte);background:var(--branco);color:var(--texto);
  font:700 15px var(--f-texto);cursor:pointer;transition:background .2s,border-color .2s}
.chip:hover{border-color:var(--violeta);background:var(--lavanda)}

/* escolha em botões (tons, quantidade) */
.tons{display:flex;flex-wrap:wrap;gap:var(--e2);margin-bottom:var(--e4)}
.tom{flex:1 1 auto;min-height:48px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--borda-forte);background:var(--branco);
  color:var(--texto);font:700 15px var(--f-texto);cursor:pointer;transition:background .2s,color .2s}
.tom[aria-pressed=true],.secao-branca .cartao .tom[aria-pressed=true]{background:var(--violeta);border-color:var(--violeta);color:#fff}

/* opções de rádio */
.grupo-op{border:0;display:flex;flex-wrap:wrap;gap:var(--e2);margin-bottom:var(--e4)}
.grupo-op legend{margin-bottom:var(--e2);padding:0}
.op{position:relative;flex:1 1 140px;display:flex}
.op input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.op span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:8px 14px;border-radius:var(--r-md);
  border:2px solid var(--borda-forte);background:var(--branco);font-weight:700;font-size:15px;line-height:1.25;transition:border-color .2s,background .2s}
.op input:checked + span,.secao-branca .cartao .op input:checked + span{border-color:var(--violeta);background:var(--violeta);color:#fff}
.op-larga input:checked + span b{color:#fff}
.op input:focus-visible + span{outline:3px solid var(--violeta);outline-offset:2px}
.op-larga{flex-basis:100%}
.op-larga span{justify-content:flex-start;text-align:left;display:block;font-weight:500}
.op-larga span b{display:block;font-weight:800}

/* ---------- 1. texto pronto ---------- */
.loja-id:empty{display:none}
.loja-id{display:grid;gap:6px;margin-top:4px}
.loja-id .reconhecida{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--sucesso);font-size:15px}
.loja-id .reconhecida::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--sucesso);flex:none}
.loja-id .desconhecida{color:var(--erro);font-weight:700;font-size:15px}
.avisos{list-style:none;display:grid;gap:var(--e2);margin-bottom:var(--e4)}
.avisos:empty{display:none}
.avisos li,.loja-id .aviso-l{background:var(--branco);border:1px solid var(--borda-forte);border-radius:var(--r-md);padding:10px 12px;font-size:14px;color:var(--texto)}
.valida{font-weight:700;font-size:15px;display:flex;gap:8px;align-items:flex-start;margin:-6px 0 var(--e3)}
.valida.ok{color:var(--sucesso)} .valida.erro{color:var(--erro)}
.valida::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;margin-top:7px;background:currentColor}
.valida:empty{display:none}
.demo-chat{max-width:none;margin-top:var(--e4)}
.demo-chat .balao-msg{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--lavanda-2)}
.secao-branca .demo-chat{background:var(--branco)}

/* ---------- 2. nota ---------- */
.nota-topo{display:flex;gap:var(--e4);align-items:center;margin-bottom:var(--e6)}
.nota-topo h3{margin:0 0 4px}
.nota-num{flex:none;width:104px;height:104px;border-radius:50%;background:var(--lima);color:var(--ameixa);display:grid;place-content:center;text-align:center}
.nota-num b{font:800 40px/1 var(--f-titulo);letter-spacing:-.02em}
.nota-num span{font-size:13px;font-weight:700}
.barras{list-style:none;display:grid;gap:var(--e4);margin-bottom:var(--e4)}
.barra-l .topo-b{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:15px}
.barra-l .topo-b span{color:var(--texto-apoio);font-variant-numeric:tabular-nums;white-space:nowrap}
.barra-l .trilho-b{height:12px;border-radius:var(--r-pill);background:var(--branco);border:1px solid var(--borda-forte);overflow:hidden;margin:6px 0 4px}
.barra-l .trilho-b i{display:block;height:100%;border-radius:var(--r-pill);background:var(--violeta);transform-origin:left;transition:width .5s var(--ease)}
.barra-l small{display:block;font-size:14px;color:var(--texto-apoio);line-height:1.4}

/* ---------- 3. nicho ---------- */
.res-nicho{display:grid;gap:var(--e3)}
.res-nicho h3{margin:0}
.lista-nichos{list-style:none;display:grid;gap:var(--e2)}
.lista-nichos li{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-md);padding:12px 14px}
.lista-nichos li b{display:block}
.lista-nichos li small{font-size:14px;color:var(--texto-apoio)}
.lista-nichos.fora li{border-style:dashed}
.bloqueio{background:var(--ameixa);color:var(--lavanda);border-radius:var(--r-md);padding:var(--e4)}
.bloqueio b{display:block;font:800 20px/1.2 var(--f-titulo);margin-bottom:4px;color:var(--lavanda)}
.bloqueio p{color:#D9CEF5;font-size:15px}
.termo{display:inline-block;padding:0 8px;border-radius:var(--r-sm);background:var(--lavanda-2);color:var(--violeta);font-weight:700}
.bloqueio .termo{background:#3A2C5E;color:var(--lavanda)}

/* ---------- 4. link do grupo ---------- */
.grupos-sim{list-style:none;display:grid;gap:var(--e4);margin-bottom:var(--e4)}
.grupo-l .topo-g{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline}
.grupo-l .nome-g{font-weight:800;display:inline-flex;align-items:center;gap:8px}
.grupo-l .letra{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);font:800 14px/1 var(--f-texto)}
.grupo-l .meta-g{font-size:14px;color:var(--texto-apoio);font-variant-numeric:tabular-nums}
.grupo-l .trilho-g{position:relative;height:16px;border-radius:var(--r-pill);background:var(--branco);border:1px solid var(--borda-forte);margin:8px 0 4px}
.grupo-l .trilho-g i{position:absolute;inset:0 auto 0 0;border-radius:var(--r-pill);background:var(--violeta);transition:width .25s var(--ease)}
.grupo-l .trilho-g::after{content:"";position:absolute;top:-4px;bottom:-4px;left:95%;width:2px;background:var(--ameixa)}
.grupo-l.cheio .trilho-g i{background:var(--texto-suave)}
.grupo-l .estado-g{font-size:14px;font-weight:700}
.grupo-l.cheio .estado-g{color:var(--erro)}
.grupo-l .estado-g.fila{color:var(--sucesso)}
.cor-0{background:var(--violeta);color:#fff} .cor-1{background:var(--lilas);color:var(--ameixa)}
.cor-2{background:var(--ameixa);color:var(--lavanda)} .cor-3{background:var(--lavanda-3);color:var(--ameixa)}
.cliques-faixa{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;margin-bottom:var(--e3)}
.cliques-faixa:empty{display:none}
.cliques-faixa i{aspect-ratio:1;border-radius:3px;display:grid;place-items:center;font:800 9px/1 var(--f-texto);font-style:normal;animation:surge-c .3s var(--ease)}
.cliques-faixa i.falha{background:var(--branco);border:1px dashed var(--erro)}
@keyframes surge-c{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.resumo-sim{font-weight:700;margin-bottom:var(--e3)}
.eventos{list-style:none;display:grid;gap:6px;font-size:14px;color:var(--texto-apoio)}
.eventos:empty{display:none}
.eventos li{padding-left:16px;position:relative}
.eventos li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--violeta)}
.grupo-legenda{display:flex;gap:6px;align-items:center}
.num-g{width:96px!important;min-height:48px}

/* ---------- 5. horários ---------- */
.linha-dia{position:relative;height:56px;margin:var(--e2) 0 var(--e3);border-radius:var(--r-md);background:var(--branco);border:1px solid var(--borda-forte)}
.linha-dia .ponto{position:absolute;top:20px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--violeta);
  animation:surge-c .4s var(--ease) backwards;animation-delay:calc(var(--i,0) * 30ms)}
.linha-dia.rajada .ponto{background:var(--erro)}
.linha-dia .ponta{position:absolute;bottom:4px;font-size:12px;font-weight:700;color:var(--texto-apoio)}
.linha-dia .ponta.ini{left:8px} .linha-dia .ponta.fim{right:8px}
.horas{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--e4)}
.horas li{padding:4px 10px;border-radius:var(--r-pill);background:var(--branco);border:1px solid var(--borda-forte);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.sub-rajada{margin-top:var(--e4)}
.linha-dia .pilha{position:absolute;top:6px;left:28px;padding:2px 10px;border-radius:var(--r-pill);background:var(--erro);color:#fff;font-size:13px;font-weight:700}

/* ---------- 6. WhatsApp ---------- */
.ws-demo .abas{margin-bottom:var(--e6)}
.aba{min-height:48px}
.ws-painel{display:grid;gap:var(--e6);align-items:center}
@media(min-width:860px){.ws-painel{grid-template-columns:1.1fr .9fr}}
.ws-painel[hidden]{display:none}
.passos-ws{list-style:none;display:grid;gap:var(--e2);counter-reset:pw;margin-bottom:var(--e4)}
.passos-ws li{counter-increment:pw;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-md);
  border:2px solid transparent;background:var(--branco);transition:border-color .3s,background .3s,opacity .3s;opacity:.6}
.passos-ws li::before{content:counter(pw);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lavanda-2);color:var(--violeta);font:800 15px/1 var(--f-texto)}
.passos-ws li.feito{opacity:1}
.passos-ws li.feito::before{background:var(--violeta);color:#fff}
.passos-ws li.atual{opacity:1;border-color:var(--violeta)}
.ws-visual{display:grid;justify-items:center;gap:var(--e3);text-align:center;font-size:14px;color:var(--texto-apoio)}
.ws-visual figcaption{display:grid;justify-items:center;gap:6px;max-width:320px}
.qr-caixa{width:min(240px,70vw);padding:16px;border-radius:var(--r-lg);background:var(--branco);border:1px solid var(--borda-forte);position:relative;overflow:hidden}
.qr-ilustra{width:100%;height:auto;color:var(--ameixa)}
.qr-caixa::after{content:"";position:absolute;left:8px;right:8px;top:12px;height:3px;border-radius:3px;background:var(--violeta);opacity:0}
.ws-demo.lendo .qr-caixa::after{opacity:.85;animation:varre 1.6s var(--ease) infinite alternate}
@keyframes varre{to{transform:translateY(calc(min(240px,70vw) - 24px))}}
.codigo-caixa{padding:var(--e6);border-radius:var(--r-lg);background:var(--branco);border:1px solid var(--borda-forte);display:grid;gap:6px;justify-items:center}
.rot-codigo{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-apoio)}
.codigo-ex{font:800 clamp(30px,8vw,40px)/1 var(--f-titulo);letter-spacing:.12em;color:var(--texto);font-variant-numeric:tabular-nums}
.ws-status{font-weight:700;margin:var(--e4) 0}
.ws-status:empty{display:none}

/* ---------- 7. carrossel ---------- */
.carrossel{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e4)}
@media(min-width:768px){.carrossel{padding:var(--e6)}}
.carrossel{container-type:inline-size}
/* altura da maior moldura (celular ou navegador), para os botões não pularem quando a tela troca */
.carrossel-palco{display:grid;align-content:start;min-height:calc(max(min(280px,72vw) * 2.1334, min(100cqw, 960px) * .625 + 48px) + 84px)}
.slide{grid-area:1/1;display:grid;justify-items:center;align-content:start;gap:var(--e3)}
.slide[hidden]{display:none}
.slide.entra{animation:surge .5s var(--ease)}
.slide .celular{width:min(280px,72vw)}
.slide .navegador{width:100%;max-width:960px}
.slide figcaption{display:grid;gap:2px;text-align:center}
.slide figcaption b{font-size:18px}
.slide .legenda-tela{margin-top:0}
.carrossel-ctrl{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);margin-top:var(--e4)}
.contador{flex:1;min-width:0;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.ctrl-bt{flex:none;padding:0 18px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:400px){.ctrl-bt span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.ctrl-bt{width:56px;padding:0}}

/* ---------- 8. fim do teste ---------- */
.linha-teste{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e2);margin-bottom:var(--e6);position:relative}
@media(min-width:700px){.linha-teste{grid-template-columns:repeat(4,1fr)}
  .linha-teste::before{content:"";position:absolute;left:12%;right:12%;top:50%;height:2px;background:var(--borda-forte)}}
.linha-teste li{position:relative;z-index:1}
.marco{width:100%;min-height:72px;padding:8px 10px;display:grid;gap:2px;place-content:center;text-align:center;border-radius:var(--r-md);border:2px solid var(--borda-forte);
  background:var(--branco);color:var(--texto);cursor:pointer;font-family:var(--f-texto);transition:border-color .2s,background .2s}
.marco .dia{font:800 clamp(16px,4.4vw,19px)/1.15 var(--f-titulo)}
.marco .rot{font-size:14px;font-weight:600;color:var(--texto-apoio)}
.marco[aria-pressed=true]{background:var(--violeta);border-color:var(--violeta);color:#fff}
.marco[aria-pressed=true] .rot{color:#EDE5FF}
.aviso-app{background:var(--branco);border:1px solid var(--borda-forte);border-radius:var(--r-lg);padding:var(--e6);display:grid;gap:var(--e2);justify-items:start;margin-bottom:var(--e4)}
.aviso-app h3{margin:0;font-size:26px}
.aviso-app p{color:var(--texto-apoio);max-width:560px}
.aviso-app .onde{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--violeta)}
.aviso-app.troca{animation:surge .45s var(--ease)}
.falso-bt{cursor:default;margin-top:var(--e2)}
.falso-bt:hover{transform:none}

/* ---------- FAQ ---------- */
.faq-c{max-width:860px}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  .cliques-faixa i,.linha-dia .ponto,.slide.entra,.aviso-app.troca{animation:none}
  .ws-demo.lendo .qr-caixa::after{animation:none;opacity:0}
}