/* =====================================================================================
   Viver de Comprinha · componentes das páginas institucionais
   (para-quem, transparência, sobre, ajuda, termos, privacidade).
   Só usa os tokens de marca.css: nenhuma cor, fonte, raio ou sombra nova.
   ===================================================================================== */

/* ---------- herói enxuto das páginas internas ---------- */
.hero-inst{position:relative;padding:var(--e12) 0 var(--e12);overflow:hidden}
@media(min-width:960px){.hero-inst{padding:var(--e16) 0}}
.hero-inst .c{position:relative}
.hero-inst h1{margin:var(--e4) 0 var(--e6);max-width:880px}
.hero-inst .corpo-lg{max-width:640px}
.hero-inst .ctas{margin-top:var(--e8)}
.hero-inst .blocos i:nth-child(1){width:120px;height:120px;right:4%;top:18%}
.hero-inst .blocos i:nth-child(2){width:64px;height:64px;right:14%;top:62%}
.hero-inst .blocos i:nth-child(3){width:40px;height:40px;right:2%;top:72%}
@media(max-width:959px){.hero-inst .blocos{display:none}}

/* ---------- âncoras internas (pílulas) ---------- */
.pilulas{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e8)}
.pilulas a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--branco);
  border:1px solid var(--borda);font-weight:700;font-size:15px;color:var(--texto);text-decoration:none;transition:border-color .2s,background .2s}
.pilulas a:hover{border-color:var(--violeta);color:var(--violeta)}
[id]{scroll-margin-top:96px}

/* ---------- personas ---------- */
.persona{display:flex;flex-direction:column;gap:var(--e4)}
.persona .quem{display:flex;gap:var(--e4);align-items:center}
.persona .inicial{width:64px;height:64px;flex:none;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--violeta);
  color:var(--lavanda);font:800 30px/1 var(--f-titulo)}
.persona .quem h3{margin:0}
.persona .quem p{font-size:15px}
.persona dl{display:grid;gap:var(--e4)}
.persona dt{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--violeta);margin-bottom:var(--e1)}
.persona dd{color:var(--texto-apoio)}
.persona dd ul{padding-left:20px;display:grid;gap:4px}

/* ---------- listas com ícone (sim / não) ---------- */
.lista-ic{list-style:none;display:grid;gap:var(--e3)}
.lista-ic li{display:flex;gap:var(--e3);align-items:flex-start}
.lista-ic li .ic{margin-top:2px;color:var(--violeta)}
.lista-ic.nao li .ic{color:var(--erro)}
.lista-ic li b{display:block;color:var(--texto)}
.lista-ic li span{color:var(--texto-apoio)}
.secao-ameixa .lista-ic li b{color:var(--lavanda)}
.secao-ameixa .lista-ic li span{color:#D9CEF5}
.secao-ameixa .lista-ic li .ic{color:var(--lilas)}

/* ---------- cartão de nicho (exemplo) ---------- */
.nicho-c .icone-bloco{margin-bottom:var(--e2)}
.nicho-c .exemplo{margin-top:var(--e4);padding:var(--e3) var(--e4);border-radius:var(--r-md);background:var(--lavanda);font-size:14px;color:var(--texto)}
.faixa+.faixa{margin-top:var(--e3)}

/* ---------- telas reais lado a lado ---------- */
.telas-par{display:grid;gap:var(--e8);justify-items:center}
@media(min-width:720px){.telas-par{grid-template-columns:repeat(2,1fr)}}
.telas-par figure{width:100%}
.telas-tres{display:grid;gap:var(--e8);justify-items:center}
@media(min-width:720px){.telas-tres{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.telas-tres{grid-template-columns:repeat(3,1fr)}}
.telas-tres figure{width:100%}
.telas-tres .celular{width:min(260px,72vw)}

/* ---------- manifesto (seção ameixa) ---------- */
.manifesto{position:relative;overflow:hidden}
.manifesto .c{position:relative}
.manifesto .sorriso-grande{width:120px;height:60px;margin-bottom:var(--e6)}
.manifesto .sorriso-grande path{fill:none;stroke:var(--lima);stroke-width:8;stroke-linecap:round}
.manifesto-texto{max-width:920px}
.manifesto-texto p{font:800 clamp(26px,3.6vw,44px)/1.18 var(--f-titulo);letter-spacing:-.02em;color:var(--lavanda);margin-bottom:var(--e6)}
.secao-ameixa .manifesto-texto p{color:var(--lavanda)}
.secao-ameixa .manifesto-texto p.apoio{font:400 var(--t-corpo-lg)/1.6 var(--f-texto);letter-spacing:0;color:#D9CEF5;max-width:640px}
.manifesto-texto .assina{display:block;margin-top:var(--e8);font:700 16px/1.4 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;color:#D9CEF5}

/* ---------- atributos, valores e territórios ---------- */
.atributo{display:flex;flex-direction:column;gap:var(--e2)}
.atributo b{font:800 28px/1.1 var(--f-titulo);letter-spacing:-.02em;color:var(--texto)}
.atributo p{font-size:15px}
.territorio .num{font:800 14px/1 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--violeta)}

/* ---------- sócios (sem foto: inicial em bloco da marca) ---------- */
.socio{display:flex;gap:var(--e6);align-items:flex-start;flex-wrap:wrap}
.socio .inicial{width:88px;height:88px;flex:none;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--lavanda-3);
  color:var(--violeta);font:800 40px/1 var(--f-titulo)}
.socio h3{margin:0 0 var(--e1)}
.socio .papel{font-weight:700;color:var(--violeta);margin-bottom:var(--e3)}
.socio>div{flex:1;min-width:220px}

/* ---------- tabela de lojas ---------- */
.tabela-s td b{display:block}
.tabela-s td small{display:block;color:var(--texto-apoio);font-size:13px;margin-top:4px}
.tabela-lojas{min-width:720px}
.tabela-lojas th:first-child,.tabela-lojas td:first-child{width:18%}

/* ---------- blocos de transparência ---------- */
.bloco-trans{display:grid;gap:var(--e8)}
@media(min-width:960px){.bloco-trans{grid-template-columns:5fr 7fr;gap:var(--e16)}}
.bloco-trans .cab-secao{margin-bottom:0}
.passo-linha{list-style:none;display:grid;gap:var(--e3);counter-reset:pl}
.passo-linha li{display:flex;gap:var(--e4);align-items:flex-start;background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-md);padding:var(--e4)}
.passo-linha li::before{counter-increment:pl;content:counter(pl);flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--lavanda-2);color:var(--violeta);font:800 15px/1 var(--f-titulo)}
.passo-linha li span{color:var(--texto-apoio)}
.passo-linha li b{color:var(--texto)}
.compromissos{display:grid;gap:var(--e4)}
.compromissos p{font:800 clamp(26px,3.4vw,40px)/1.15 var(--f-titulo);letter-spacing:-.02em;color:var(--lavanda)}
.secao-violeta .compromissos p{color:var(--lavanda)}
.frase-ia{font:800 clamp(28px,4vw,48px)/1.1 var(--f-titulo);letter-spacing:-.02em;color:var(--texto);margin:var(--e4) 0 var(--e6)}

/* ---------- texto longo (termos, privacidade) ---------- */
.doc{display:grid;gap:var(--e8);padding:var(--e8) 0 var(--e16)}
@media(min-width:1024px){.doc{grid-template-columns:260px minmax(0,1fr);gap:var(--e16);padding:var(--e12) 0 var(--e24)}}
.doc-indice{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e6)}
@media(min-width:1024px){.doc-indice{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto}}
.doc-indice h2{font:800 13px/1.2 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-apoio);margin-bottom:var(--e3)}
.doc-indice ol{list-style:none;display:grid;gap:2px}
.doc-indice a{display:block;padding:10px 12px;border-radius:var(--r-sm);font-weight:600;font-size:15px;color:var(--texto);text-decoration:none;line-height:1.35}
.doc-indice a:hover{background:var(--lavanda);color:var(--violeta)}
.texto-longo{max-width:72ch;font-size:17px;line-height:1.75;color:var(--texto)}
.texto-longo h2{font-size:clamp(24px,2.6vw,30px);line-height:1.2;margin:var(--e12) 0 var(--e4)}
.texto-longo h2:first-of-type{margin-top:0}
.texto-longo h3{font-size:20px;margin:var(--e8) 0 var(--e3)}
.texto-longo p{margin-bottom:var(--e4);color:var(--texto)}
.texto-longo ul,.texto-longo ol{padding-left:24px;margin-bottom:var(--e4);display:grid;gap:var(--e2)}
.texto-longo li::marker{color:var(--violeta)}
.texto-longo .versao{font-size:14px;color:var(--texto-apoio)}
.aviso-rascunho{display:flex;gap:var(--e3);align-items:flex-start;background:var(--branco);border:2px solid var(--violeta);border-radius:var(--r-md);padding:var(--e4);margin:var(--e6) 0}
.aviso-rascunho .ic{color:var(--violeta);margin-top:2px}
.aviso-rascunho b{display:block;color:var(--texto)}
.aviso-rascunho span{font-size:15px;color:var(--texto-apoio)}
.doc-cab{grid-column:1/-1;max-width:72ch}
.doc-cab h1{font-size:var(--t-display-lg);margin-top:var(--e3)}

/* ---------- central de ajuda ---------- */
.busca-ajuda{position:relative;max-width:640px;margin-top:var(--e8)}
.busca-ajuda label{display:block;font-weight:700;margin-bottom:var(--e2)}
.busca-ajuda input{width:100%;min-height:56px;padding:0 20px 0 52px;border-radius:var(--r-pill);border:2px solid var(--borda-forte);background:var(--branco);
  font:500 17px var(--f-texto);color:var(--texto)}
.busca-ajuda input:focus{outline:none;border-color:var(--violeta);box-shadow:var(--foco)}
.busca-ajuda .campo-busca{position:relative}
.busca-ajuda .ic{position:absolute;left:20px;top:16px;color:var(--texto-apoio);pointer-events:none}
.busca-status{margin-top:var(--e3);font-size:15px;color:var(--texto-apoio);min-height:24px}
.ajuda-layout{display:grid;gap:var(--e8)}
@media(min-width:1024px){.ajuda-layout{grid-template-columns:260px minmax(0,1fr);gap:var(--e12)}}
.cat-ajuda{margin-bottom:var(--e12)}
.cat-ajuda h2{font-size:var(--t-titulo);line-height:1.15;display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e6)}
.cat-ajuda h2 .icone-bloco{flex:none}
.faq-s .resp p+p{margin-top:var(--e3)}
.faq-s .resp ul{padding-left:20px;margin-top:var(--e2);display:grid;gap:4px}
.sem-resultado{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e6)}
.contato-c{display:grid;gap:var(--e4);align-items:center}
@media(min-width:960px){.contato-c{grid-template-columns:1fr auto}}

/* ---------- ajustes finos ---------- */
.manifesto h2.olho{font-family:var(--f-texto);color:#D9CEF5}
.manifesto h2.olho::before{background:var(--lilas)}
.persona dd ul li::marker{color:var(--violeta)}
.espaco-t{margin-top:var(--e12)}
.espaco-t2{margin-top:var(--e16)}
@media (prefers-reduced-motion:reduce){
  .faixa .trilho [aria-hidden="true"]{display:none}
  .faixa .trilho{justify-content:center;padding:0 16px}
  .faixa{mask-image:none;-webkit-mask-image:none}
}
@media(min-width:768px){.so-celular{display:none}}
.arq-sub{font-weight:700;color:var(--violeta);margin:-4px 0 8px}
.valor{display:flex;align-items:center;gap:var(--e4)}
.valor b{font:800 26px/1.1 var(--f-titulo);letter-spacing:-.02em;color:var(--texto)}
.compromisso-c{margin-top:var(--e6);text-align:center}
.compromisso-c .olho{justify-content:center}
.compromisso-c p{font:800 clamp(22px,2.8vw,32px)/1.25 var(--f-titulo);letter-spacing:-.02em;color:var(--texto);margin-top:var(--e3)}
.socio{align-items:center}