/* Histórias de uso: mesma marca e moldura do produto, sem controles operacionais. */
.publico-hero{padding-block:28px 44px}
.publico-hero .crumb{font-size:.86rem;color:var(--faint);margin-bottom:28px}
.publico-hero .crumb a{text-decoration:underline;text-underline-offset:3px}
.publico-hero h1{max-width:21ch;font-size:clamp(2.15rem,5vw,3.8rem)}
.publico-lead{max-width:66ch;margin-top:20px;color:var(--muted);font-size:1.08rem}
.publico-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.publico-hero .beta{margin-top:15px;color:var(--muted);font-size:.92rem}
.publico-aviso{margin-top:26px;padding:18px 22px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--white);color:var(--muted);font-size:.94rem}
.publico-aviso strong{color:var(--ink)}
.publico-config{padding-block:22px 30px;background:var(--surface)}
.publico-config h2{font-size:1.45rem;margin-bottom:12px}
.publico-config p{max-width:86ch;color:var(--muted)}
.publico-config p+p{margin-top:10px}
.publico-passos{padding-bottom:36px}
.publico-passo{padding-block:46px;border-bottom:1px solid var(--line)}
.publico-grade{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr);
  gap:clamp(26px,4vw,56px);align-items:center}
.publico-passo h2{font-size:clamp(1.7rem,2.8vw,2.3rem);max-width:22ch}
.publico-copia p{margin-top:16px;color:var(--muted)}
.publico-copia .onde{font-size:.9rem;color:var(--brand);font-weight:600}
.publico-copia code{display:block;margin-top:18px;padding:15px 18px;white-space:normal;
  border-radius:var(--r-sm);border:1px solid #b7dfc6;background:var(--wa);color:#153b29;
  font:inherit;font-size:.96rem}
.publico-passo figure{margin:0;min-width:0}
.publico-passo figcaption{margin-top:14px;font-size:.82rem;color:var(--muted)}
.publico-maquete{font-size:13px;line-height:1.5}
.publico-maquete .app-main{padding:18px}
.publico-maquete .scr-head h3{font-size:19px}
.publico-maquete .app-nav span{font-size:12px}
.publico-maquete .tile span{font-size:11px}
.publico-maquete .tile strong{font-size:19px}
.publico-maquete .app-url{overflow-wrap:anywhere;font-size:12px}
.pub-caixa{margin-top:14px;padding:15px;border:1px solid var(--line);
  border-radius:13px;background:var(--white)}
.pub-caixa h4{margin:0 0 10px;font-size:14px;font-family:"Space Grotesk",sans-serif}
.pub-linha{display:flex;justify-content:space-between;gap:15px;padding:7px 0;
  color:var(--muted);border-bottom:1px solid var(--line)}
.pub-linha:last-child{border-bottom:0}
.pub-linha strong{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.pub-nota{margin-top:10px;color:var(--muted);font-size:12px}
.pub-rolavel{overflow-x:auto;max-width:100%}
.pub-tabela{width:100%;border-collapse:collapse;font-size:12px}
.pub-tabela th{text-align:left;font-weight:600;color:var(--faint);font-size:11px}
.pub-tabela th,.pub-tabela td{padding:9px 8px;border-bottom:1px solid var(--line)}
.pub-tabela td:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.pub-tabela tr:last-child td{border-bottom:0}
.pub-tabela td:first-child{font-weight:600;color:var(--ink)}
.pub-faixa{padding:12px 15px;border-radius:10px;background:var(--brand-soft);
  color:var(--brand-2);font-size:12px;margin-bottom:15px}
.pub-conversa{padding:20px;background:#efeae2;border-radius:13px;display:grid;gap:12px}
.pub-conversa p{max-width:90%;padding:12px 15px;border-radius:12px;background:var(--wa);
  color:#163829;justify-self:end}
.pub-conversa .resposta{background:#fff;justify-self:start;color:#37433b}
.publico-fecho{padding-block:42px 55px}
.publico-fecho .caixa{background:var(--brand-3);color:#fff;border-radius:var(--r-lg);padding:32px}
.publico-fecho h2{font-size:clamp(1.8rem,3vw,2.6rem);max-width:24ch}
.publico-fecho p{max-width:74ch;margin-top:16px;color:var(--lilas-soft)}
.publico-fecho p a{text-decoration:underline;text-underline-offset:3px}
.publico-fecho .button{margin-top:22px}
@media(max-width:900px){
  .publico-grade{grid-template-columns:minmax(0,1fr)}
  .publico-copia p,.publico-passo h2{max-width:68ch}
}
@media(max-width:600px){
  .publico-acts .button{width:100%;white-space:normal;text-align:center}
  .publico-maquete{grid-template-columns:minmax(0,1fr)}
  .publico-maquete .app-nav{display:none}
  .publico-maquete .app-top,.publico-maquete .app-main{grid-column:1}
  .publico-maquete .app-main{padding:14px}
  .pub-tabela thead{display:none}
  .pub-tabela,.pub-tabela tbody{display:block}
  .pub-tabela tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .pub-tabela td{display:block;padding:4px 0;border:0}
  .pub-tabela td:first-child{grid-column:1/-1}
  .pub-tabela td::before{content:attr(data-rotulo);display:block;font-size:11px;
    font-weight:500;color:var(--faint)}
  .pub-linha{gap:12px;flex-wrap:wrap}
  .publico-fecho .caixa{padding:25px}
}