/* ============================================================================
   site.css - o que as quatro paginas publicas dividem.
   Home, Vender, A loja e Duvidas linkam este arquivo. A minha-conta.html NAO:
   ela e' a tela logada, tem folha propria e continua se bastando sozinha, que e'
   o jeito de mexer no site sem arriscar saldo, catalogo e extrato.

   Prefixo pb- em TUDO, sem excecao. Classe sem prefixo colide -- ja aconteceu
   neste projeto, e o estrago aparece longe de onde foi causado.
   Nenhum token novo: as cores e a escala sao as que ja estavam no ar.
   ========================================================================== */

:root{
  --amarelo:#FBCE3C; --amarelo-borda:#E9B417; --amarelo-claro:#FEF3CE;
  --sobre-amarelo:#3A3110;
  --areia:#EFEDE9; --papel:#FFFFFF;
  --linha:#E2DFDA; --linha-fraca:#F1EEEA;
  --tinta:#333333; --tinta-2:#5A5A5A; --tinta-3:#8C8C8C;
  --agua:#3FA8A0; --agua-bg:#E5F4F3; --agua-forte:#2A7A73;
  --coral:#E8604C; --coral-bg:#FCEBE8; --coral-forte:#B03A28;
  --sombra:0 1px 2px rgba(51,45,35,.05), 0 8px 24px -12px rgba(51,45,35,.16);
  --sombra-alta:0 2px 4px rgba(51,45,35,.06), 0 18px 40px -18px rgba(51,45,35,.28);
  --raio:10px;
  --banda:rgb(250,167,2); --banda-borda:#D89300; --banda-tinta:#2B2005;
  --display:'Montserrat',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  color-scheme:only light;
}
*{box-sizing:border-box}
body{margin:0; background:var(--areia); color:var(--tinta);
  font-family:var(--display); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
button{font-family:inherit; cursor:pointer}
input{font-family:inherit}
:focus-visible{outline:2px solid var(--amarelo-borda); outline-offset:2px; border-radius:4px}
[hidden]{display:none !important}
img{max-width:100%}

.pb-wrap{max-width:480px; margin:0 auto; padding:0 18px}

/* ---------------------------------------------------------------- cabecalho
   Grade de tres colunas com as laterais iguais (1fr auto 1fr). E' o que
   centraliza o titulo DE VERDADE: com flexbox o botao Entrar empurra o texto
   para a esquerda, e o desalinhamento aparece justamente nas telas estreitas. */
.pb-barra{position:sticky; top:0; z-index:30; background:var(--papel);
  border-bottom:1px solid var(--linha)}
.pb-barra-in{max-width:480px; margin:0 auto; padding:8px 18px 0;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px}
.pb-marca{justify-self:start; display:block}
.pb-marca img{width:40px; height:40px; display:block}  /* a arte ja e' redonda */
.pb-titulo{font-size:16px; font-weight:700; letter-spacing:-.035em; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pb-entrar{justify-self:end; background:var(--amarelo); border:1px solid var(--amarelo-borda);
  color:var(--sobre-amarelo); font-size:12.5px; font-weight:800; padding:9px 16px;
  border-radius:99px; text-decoration:none; white-space:nowrap;
  transition:filter .15s ease, transform .15s ease}
.pb-entrar:hover{filter:brightness(1.04); transform:translateY(-1px)}
.pb-entrar:active{transform:translateY(1px)}

/* ---- abas. O estado ativo e' uma AREA, nao um sublinhado: um amarelo que sobe
   de baixo em 340ms. Texto preto sobre ele (~12:1); branco sobre amarelo nao
   passa em nenhum tom da paleta, foi testado e descartado. */
.pb-abas{max-width:480px; margin:0 auto; padding:10px 18px 0; display:flex; gap:3px}
.pb-aba{flex:1; position:relative; overflow:hidden; border:0; background:none;
  border-radius:8px 8px 0 0; padding:0; text-decoration:none; display:block}
.pb-aba i{position:absolute; inset:0; background:var(--amarelo); transform:scaleY(0);
  transform-origin:bottom; transition:transform .34s cubic-bezier(.22,1,.36,1)}
.pb-aba span{position:relative; display:block; padding:10px 4px 12px; text-align:center;
  font-size:10.5px; font-weight:900; letter-spacing:.07em; text-transform:uppercase;
  color:var(--tinta-2); transition:color .26s ease}
.pb-aba:hover span{color:var(--tinta)}
.pb-aba[aria-current="page"] i{transform:scaleY(1)}
.pb-aba[aria-current="page"] span{color:#1c1c1c}

/* ------------------------------------------------------------------- heroi */
.pb-hero-band{background:var(--banda); border-bottom:1px solid var(--banda-borda); overflow:hidden}
.pb-hero{padding:14px 18px 30px; text-align:center}
.pb-hero h1{margin:20px 0 0; font-size:27px; font-weight:800; letter-spacing:-.028em;
  line-height:1.14; color:var(--banda-tinta)}
.pb-sub{margin:11px auto 0; max-width:36ch; color:rgba(43,32,5,.78); font-size:14px; line-height:1.55}
.pb-ctas{display:flex; flex-direction:column; gap:9px; margin:22px 0 0}
/* A sacola flutua desde 30/08. O delay existe para ela nao comecar junto com a
   cascata de entrada -- duas coisas se mexendo ao mesmo tempo viram agitacao. */
.pb-arte{position:relative; width:min(300px,88%); margin:0 auto;
  animation:pb-flutua 5.5s ease-in-out .7s infinite alternate}
.pb-arte::after{content:''; position:absolute; inset:-1px; pointer-events:none;
  box-shadow:inset 0 0 36px 28px var(--banda)}
.pb-arte img{display:block; width:100%; height:auto}
@keyframes pb-flutua{from{transform:translateY(0)}to{transform:translateY(-7px)}}

.pb-bt{display:block; width:100%; border-radius:99px; padding:13px 18px; font-size:14px;
  cursor:pointer; font-weight:800; text-align:center; text-decoration:none; border:0;
  font-family:inherit; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
.pb-bt-escuro{background:#26221B; color:#FFC72C; border:1px solid #26221B}
.pb-bt-claro{background:#FFF6DC; color:var(--banda-tinta); border:1px solid rgba(43,32,5,.25)}
.pb-bt-escuro:hover,.pb-bt-claro:hover{transform:translateY(-2px); box-shadow:var(--sombra-alta)}
.pb-bt-escuro:active,.pb-bt-claro:active{transform:translateY(1px)}
.pb-bt-borda{background:var(--papel); color:var(--tinta); border:1px solid var(--linha); margin-top:13px}
.pb-bt-borda:hover{border-color:var(--tinta-3)}
.pb-bt-amarelo{background:var(--amarelo); border:1px solid var(--amarelo-borda);
  color:var(--sobre-amarelo); margin-top:14px}
.pb-bt-amarelo:hover{filter:brightness(1.04)}

/* ------------------------------------------------------------------ secoes */
.pb-secao{border-top:1px solid var(--linha)}
.pb-secao.pb-papel{background:var(--papel)}
.pb-secao-in{padding:30px 18px 34px; max-width:480px; margin:0 auto}
.pb-selo{display:inline-block; border:1px solid var(--tinta-2); border-radius:99px;
  font-size:9.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-2); padding:4px 12px}
.pb-secao h2{margin:13px 0 0; font-size:21px; font-weight:800; letter-spacing:-.02em}
.pb-secao h3{margin:13px 0 0; font-size:21px; font-weight:800; letter-spacing:-.02em}
.pb-sub2{margin:9px 0 0; color:var(--tinta-2); font-size:13.5px; max-width:44ch}
.pb-nota{margin:9px 0 0; font-size:11px; color:var(--tinta-2); line-height:1.5}

/* --------------------------------------------------------- faixa de estado
   Um formato so para a fila e para a loja. As duas dizem estado, horario-limite
   e QUANTO FALTA: "fecha as 20h" informa, "em 3h20" e' o que decide se da tempo
   de ir hoje. */
.pb-faixa{display:flex; align-items:center; gap:7px; margin-top:12px;
  border-radius:8px; padding:8px 11px; font-size:10.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; line-height:1.35; text-align:left}
.pb-faixa i{flex:none; width:7px; height:7px; border-radius:99px; background:currentColor}
.pb-faixa.pb-viva{background:var(--agua-bg); border:1px solid var(--agua); color:var(--agua-forte)}
.pb-faixa.pb-viva i{animation:pb-pulsa 1.6s infinite}
.pb-faixa.pb-meio{background:var(--amarelo-claro); border:1px solid var(--amarelo-borda); color:var(--sobre-amarelo)}
.pb-faixa.pb-meio i{animation:pb-pulsa 1.6s infinite}
.pb-faixa.pb-fria{background:var(--coral-bg); border:1px solid var(--coral); color:var(--coral-forte)}
.pb-faixa.pb-nula{background:var(--linha-fraca); border:1px solid var(--linha); color:var(--tinta-2)}
@keyframes pb-pulsa{50%{opacity:.35}}

/* ------------------------------------------------------------- campanha */
.pb-camp-topo{display:flex; align-items:center; justify-content:space-between; gap:10px}
.pb-olho{display:inline-flex; align-items:center; gap:6px; font-size:9.5px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-2)}
.pb-olho i{width:7px; height:7px; border-radius:99px; background:var(--amarelo-borda);
  animation:pb-pulsa 1.6s infinite}
.pb-prazo{font-size:10.5px; font-weight:800; color:var(--tinta-2); white-space:nowrap}
.pb-camp{margin-top:12px; background:var(--amarelo-claro); border:1px solid var(--amarelo-borda);
  border-radius:var(--raio); padding:15px 16px}
.pb-camp b{display:block; font-size:14.5px; font-weight:800; color:var(--sobre-amarelo);
  letter-spacing:-.015em; line-height:1.3}
.pb-camp p{margin:7px 0 0; font-size:12.5px; color:var(--sobre-amarelo); opacity:.86; line-height:1.55}
.pb-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.pb-chip{background:var(--papel); border:1px solid var(--amarelo-borda); border-radius:99px;
  padding:4px 10px; font-size:9.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--sobre-amarelo)}

/* --------------------------------------------------------------- passos */
.pb-passos{display:flex; flex-direction:column; gap:9px; margin:18px 0 0}
.pb-passo{background:var(--areia); border:1px solid var(--linha); border-radius:var(--raio);
  padding:13px 14px; display:flex; gap:13px; align-items:flex-start; text-align:left}
.pb-secao.pb-papel .pb-passo{background:var(--areia)}
.pb-n{flex:none; width:28px; height:28px; border-radius:99px; background:var(--amarelo-claro);
  border:1px solid var(--amarelo-borda); color:var(--sobre-amarelo); font-weight:800;
  font-size:13px; display:grid; place-items:center}
.pb-passo b{display:block; font-size:13.5px; font-weight:800}
.pb-passo div>span{display:block; color:var(--tinta-2); font-size:12.5px; margin-top:2px}

/* ------------------------------------------------------- cartoes-resumo */
.pb-resumos{display:flex; flex-direction:column; gap:11px; margin-top:18px}
.pb-resumo{display:block; width:100%; text-align:left; background:var(--papel);
  border:1px solid var(--linha); border-radius:14px; padding:16px; color:inherit;
  text-decoration:none; font-family:inherit; transition:transform .16s ease, border-color .16s ease,
  box-shadow .16s ease}
.pb-resumo:hover{transform:translateY(-3px); border-color:var(--amarelo-borda); box-shadow:var(--sombra)}
.pb-resumo h3{margin:0; font-size:14.5px; font-weight:800; letter-spacing:-.015em}
.pb-resumo p{margin:4px 0 0; font-size:12.5px; color:var(--tinta-2)}
/* O botao mora FORA da faixa e em largura cheia: a faixa e' aviso, o botao e'
   acao, e juntar os dois derruba o alvo de toque abaixo dos 44px. */
.pb-resumo .pb-bt{margin-top:12px}

/* ------------------------------------------------------------ cartao fila
   O cartao TROCA DE COR com o estado, e nao so o texto: bege quando esta
   recebendo, amarelo quando a fila fechou para novas entradas, coral quando a
   triagem nao esta atendendo. A cor e' lida antes da frase. */
.pb-card{background:var(--areia); border:1px solid var(--linha); border-radius:14px; padding:17px 16px;
  transition:background .2s ease, border-color .2s ease}
.pb-secao.pb-papel .pb-card{background:var(--areia)}
.pb-secao.pb-papel .pb-card.pb-card-cheia{background:var(--amarelo-claro); border-color:var(--amarelo-borda)}
.pb-secao.pb-papel .pb-card.pb-card-fora{background:var(--coral-bg); border-color:var(--coral)}
.pb-card.pb-card-cheia .pb-fila-linhas,
.pb-card.pb-card-cheia .pb-fila-texto{border-top-color:var(--amarelo-borda)}
.pb-card.pb-card-fora .pb-fila-linhas,
.pb-card.pb-card-fora .pb-fila-texto{border-top-color:var(--coral)}
.pb-fila-texto{margin:10px 0 0; font-size:12.5px; line-height:1.55; color:var(--tinta-2)}
/* o filete tracejado fica em quem vem logo depois do numero grande. Quando o
   numero nao aparece (triagem fechada), o texto abre o cartao e nao leva filete. */
.pb-fila-texto.pb-topo{padding-top:10px; border-top:1px dashed var(--linha)}
.pb-card h3{margin:0; font-size:14.5px; font-weight:800; letter-spacing:-.015em}
.pb-tx{color:var(--tinta-2); font-size:12.5px; margin-top:4px}
.pb-fila-num{display:flex; align-items:baseline; gap:8px; margin-top:12px}
.pb-fila-num b{font-size:34px; font-weight:900; letter-spacing:-.03em; line-height:1}
.pb-fila-num span{font-size:12.5px; color:var(--tinta-2)}
.pb-fila-linhas{display:flex; gap:18px; margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--linha)}
.pb-fila-linhas div b{display:block; font-size:15px; font-weight:800}
.pb-fila-linhas div span{font-size:11px; color:var(--tinta-2)}
.pb-vivo{display:inline-flex; align-items:center; gap:6px; margin-top:11px; font-size:10.5px;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--agua-forte)}
.pb-vivo i{width:7px; height:7px; border-radius:99px; background:var(--agua); animation:pb-pulsa 1.6s infinite}
.pb-vivo.pb-cheia{color:var(--sobre-amarelo)}
.pb-vivo.pb-cheia i{background:var(--amarelo-borda); animation:none}
.pb-vivo.pb-fora{color:var(--coral-forte)}
.pb-vivo.pb-fora i{background:var(--coral); animation:none}
.pb-fechado{margin-top:12px; background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio); padding:13px 14px; font-size:12.5px; color:var(--tinta-2)}
.pb-fechado b{color:var(--tinta)}

/* -------------------------------------------------------------- listinha */
.pb-lista{margin:14px 0 0; padding:0; list-style:none; background:var(--papel);
  border:1px solid var(--linha); border-radius:var(--raio)}
.pb-lista li{display:flex; gap:10px; align-items:flex-start; padding:11px 14px;
  font-size:12.5px; color:var(--tinta-2); border-bottom:1px solid var(--linha-fraca)}
.pb-lista li:last-child{border-bottom:0}
.pb-lista li b{flex:none; width:18px; height:18px; border-radius:99px; margin-top:1px;
  background:var(--amarelo-claro); border:1px solid var(--amarelo-borda);
  color:var(--sobre-amarelo); font-size:10px; display:grid; place-items:center}

/* ------------------------------------------------------------ modalidades
   O PRAZO e' o que diferencia as tres, entao ele vira etiqueta e nao paragrafo.
   A Moeda fica em amarelo porque e' a que interessa a loja: o credito volta
   como compra em vez de sair como saque.
   Os cartoes sao BEGE sobre a secao branca -- brancos eles sumiam no fundo. E a
   etiqueta fica na mesma linha do titulo, alinhada pela base, nao solta num
   canto: assim ela le como parte do nome da modalidade. */
.pb-mods{display:flex; flex-direction:column; gap:11px; margin-top:18px}
.pb-mod{background:var(--areia); border:1px solid var(--linha); border-radius:14px; padding:16px}
.pb-secao.pb-papel .pb-mod{background:var(--areia)}
.pb-secao.pb-papel .pb-mod.pb-mod-moeda{background:var(--amarelo-claro); border-color:var(--amarelo-borda)}
.pb-mod-topo{display:flex; align-items:baseline; gap:10px}
.pb-mod h3{margin:0; flex:1; font-size:14px; font-weight:800}
.pb-mod p{margin:6px 0 0; font-size:12.5px; color:var(--tinta-2); line-height:1.5}
.pb-mod .pb-aceita{margin-top:7px; font-size:11.5px; line-height:1.45; color:var(--tinta)}
.pb-mod .pb-aceita b{font-weight:800}
.pb-etiq{flex:none; border-radius:99px; padding:4px 9px; font-size:9.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  background:var(--papel); border:1px solid var(--linha); color:var(--tinta-2)}
.pb-etiq.pb-etiq-rapida{background:var(--agua-bg); border-color:var(--agua); color:var(--agua-forte)}
.pb-mod-moeda .pb-etiq{border-color:var(--amarelo-borda); color:var(--sobre-amarelo)}

/* cartao clicavel de fim de secao, branco com borda sobre fundo branco */
.pb-proximo{display:block; margin-top:16px; background:var(--papel); border:1px solid var(--linha);
  border-radius:14px; padding:15px 16px; color:inherit; text-decoration:none;
  transition:border-color .16s ease, transform .16s ease}
.pb-proximo:hover{border-color:var(--amarelo-borda); transform:translateY(-2px)}
.pb-proximo b{display:block; font-size:13.5px; font-weight:800}
.pb-proximo p{margin:4px 0 0; color:var(--tinta-2); font-size:12.5px; line-height:1.5}

/* ---------------------------------------------------------------- a loja */
.pb-fachada{display:block; width:100%; height:210px; object-fit:cover; object-position:center 62%}
.pb-endereco{margin-top:16px; display:flex; flex-direction:column; gap:12px}
.pb-end-linha{display:flex; gap:11px; align-items:flex-start}
.pb-end-ic{flex:none; width:24px; height:24px; border-radius:99px; background:var(--amarelo-claro);
  border:1px solid var(--amarelo-borda); display:grid; place-items:center}
.pb-end-ic svg{width:13px; height:13px; stroke:var(--sobre-amarelo); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.pb-end-linha b{display:block; font-size:14px; font-weight:800}
.pb-end-linha span{display:block; font-size:12.5px; color:var(--tinta-2); margin-top:1px}
.pb-mapa{width:100%; height:190px; border:0; border-radius:var(--raio); margin-top:14px; display:block}
.pb-duplo{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px}
.pb-duplo .pb-bt{margin-top:0; display:flex; align-items:center; justify-content:center; gap:7px}
.pb-duplo .pb-bt svg{width:19px; height:19px; stroke:var(--sobre-amarelo); fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.pb-horarios{margin:16px 0 0; padding:0; list-style:none; background:var(--papel);
  border:1px solid var(--linha); border-radius:var(--raio)}
.pb-horarios li{display:flex; justify-content:space-between; gap:12px; padding:11px 14px;
  font-size:12.5px; color:var(--tinta-2); border-bottom:1px solid var(--linha-fraca)}
.pb-horarios li:last-child{border-bottom:0}
.pb-horarios li b{color:var(--tinta); font-weight:700}
.pb-horarios li.pb-hoje{background:var(--amarelo-claro)}
.pb-insta{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:16px}
.pb-post{position:relative; display:block; aspect-ratio:1; border-radius:var(--raio);
  overflow:hidden; box-shadow:var(--sombra); transition:transform .16s ease}
.pb-post:hover{transform:translateY(-3px)}
.pb-post img{width:100%; height:100%; object-fit:cover; display:block}
.pb-post u{position:absolute; top:6px; right:7px; text-decoration:none; color:#fff;
  font-size:11px; text-shadow:0 1px 4px rgba(0,0,0,.55)}

/* --------------------------------------------------------------- duvidas */
.pb-filtro{display:flex; gap:5px; flex-wrap:wrap; margin-top:16px}
.pb-filtro button{flex:1 1 auto; background:var(--papel); border:1px solid var(--linha);
  border-radius:99px; padding:7px 9px; font-size:10px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:var(--tinta-2); transition:background .15s, color .15s, border-color .15s}
.pb-filtro button:hover{border-color:var(--tinta-3)}
.pb-filtro button[aria-pressed="true"]{background:var(--tinta); border-color:var(--tinta); color:#fff}
.pb-faq{margin-top:16px}
.pb-faq details{border-top:1px solid var(--linha-fraca)}
.pb-faq details:last-of-type{border-bottom:1px solid var(--linha-fraca)}
.pb-faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:14px 2px; font-size:13.5px; font-weight:800}
.pb-faq summary::-webkit-details-marker{display:none}
.pb-faq summary .pb-mais{flex:none; width:22px; height:22px; border-radius:7px;
  background:var(--amarelo-claro); border:1px solid var(--amarelo-borda); display:grid;
  place-items:center; color:var(--sobre-amarelo); font-weight:800; font-size:14px; line-height:1}
.pb-faq details[open] summary .pb-mais{background:var(--amarelo)}
.pb-faq .pb-resp{padding:0 2px 16px 36px; font-size:13px; color:var(--tinta-2);
  line-height:1.65; max-width:62ch}
.pb-faq .pb-resp b{color:var(--tinta)}
.pb-faq .pb-resp a{color:var(--sobre-amarelo); font-weight:700}
.pb-faq .pb-resp a.pb-bt-resp{display:inline-block; margin-top:12px; background:var(--amarelo);
  border:1px solid var(--amarelo-borda); border-radius:99px; padding:10px 20px; font-size:13px;
  font-weight:800; color:var(--sobre-amarelo); text-decoration:none}
.pb-vazio{margin-top:16px; font-size:12.5px; color:var(--tinta-2)}

.pb-zap{margin-top:18px; text-align:center; background:var(--areia); border:1px solid var(--linha);
  border-radius:14px; padding:18px 16px}
.pb-secao.pb-papel .pb-zap{background:var(--areia)}
.pb-zap b{display:block; font-size:14.5px; font-weight:800}
.pb-zap span{display:block; font-size:13px; color:var(--tinta-2); margin-top:3px}
.pb-zap a{display:inline-flex; align-items:center; gap:8px; margin-top:14px; background:var(--amarelo);
  border:1px solid var(--amarelo-borda); border-radius:99px; padding:11px 20px; font-size:13px;
  font-weight:800; color:var(--sobre-amarelo); text-decoration:none}
.pb-zap a svg{width:16px; height:16px; stroke:var(--sobre-amarelo); fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}

/* ---------------------------------------------------------------- rodape
   Sem menu de links, de proposito: as abas do topo ja resolvem a navegacao e
   menu repetido embaixo so alonga a pagina. */
.pb-rodape{background:var(--papel); border-top:1px solid var(--linha);
  padding:24px 18px 34px; text-align:center}
.pb-rodape .pb-rd{max-width:480px; margin:0 auto; font-size:11px; color:var(--tinta-2); line-height:1.7}
.pb-rodape b{color:var(--tinta)}
.pb-rodape a{color:inherit; font-weight:700}
.pb-assina{margin-top:16px; padding-top:14px; border-top:1px solid var(--linha-fraca);
  display:flex; flex-direction:column; align-items:center; gap:4px}
.pb-assina span{font-size:11px; font-weight:600; color:var(--tinta-2)}
.pb-assina img{height:48px; width:auto; display:block; mix-blend-mode:multiply}

/* -------------------------------------------------------------- entrada
   Cascata curta: titulo .05s, subtitulo .14s, botoes .24s, campanha .30s,
   passos .10/.20/.30s. Tudo termina antes de 600ms, entao da ritmo de leitura
   sem atrasar o conteudo. */
.pb-sobe{animation:pb-sobe .55s cubic-bezier(.22,1,.36,1) both}
@keyframes pb-sobe{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.pb-d1{animation-delay:.05s} .pb-d2{animation-delay:.14s} .pb-d3{animation-delay:.24s}
.pb-d4{animation-delay:.30s}
.pb-e1{animation-delay:.10s} .pb-e2{animation-delay:.20s} .pb-e3{animation-delay:.30s}
.pb-entra{animation:pb-entra .6s cubic-bezier(.22,1,.36,1) both}
@keyframes pb-entra{from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none}}

/* Quem pediu menos movimento no sistema recebe a pagina parada. Tudo, sem
   excecao: a sacola, os pontos que pulsam, a cascata e o enchimento da aba. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .pb-aba[aria-current="page"] i{transform:scaleY(1)}
}

/* ---------------------------------------------------------------- acesso
   O formulario de entrar/criar mora SO na home. As outras paginas mandam para
   ca com ?entrar=1, para o login existir num lugar unico.
   Classes prefixadas: as originais (.campo, .primario, .abas) vieram da tela
   logada, e nome sem prefixo colide -- ja aconteceu neste projeto. Os IDs
   continuam os mesmos, senao o codigo de autenticacao pararia de achar tudo. */
dialog{border:1px solid var(--linha); border-radius:var(--raio); padding:0;
  background:var(--papel); color:var(--tinta); max-width:440px; width:calc(100% - 32px);
  box-shadow:var(--sombra-alta)}
dialog::backdrop{background:rgba(30,26,20,.5)}
.pb-modal{padding:22px 22px 20px; max-height:78vh; overflow-y:auto}
.pb-modal h2{margin:0 0 4px; font-size:18px; font-weight:800; letter-spacing:-.02em}
.pb-modal .pb-quando{font-family:var(--mono); font-size:11px; color:var(--tinta-2); margin:0 0 16px}
.pb-modal form{display:flex; flex-direction:column; gap:14px; margin-top:18px}
.pb-tabs{display:flex; gap:3px; margin:20px 0 0; padding:3px; background:var(--linha-fraca);
  border-radius:99px; border:1px solid var(--linha)}
.pb-tabs button{flex:1; border:0; background:none; padding:9px 8px; border-radius:99px;
  font-size:12.5px; font-weight:700; color:var(--tinta-2); transition:background .18s, color .18s}
.pb-tabs button[aria-selected="true"]{background:var(--papel); color:var(--tinta); box-shadow:var(--sombra)}
.pb-campo{display:flex; flex-direction:column; gap:6px}
.pb-campo label{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-2)}
.pb-campo input{border:1px solid var(--linha); background:var(--papel); color:var(--tinta);
  border-radius:8px; padding:11px 12px; font-size:14px; font-weight:600; font-family:inherit}
.pb-campo input::placeholder{color:var(--tinta-3); font-weight:400}
.pb-campo input:focus{outline:none; border-color:var(--amarelo-borda);
  box-shadow:0 0 0 3px var(--amarelo-claro)}
.pb-campo input.pb-mono{font-family:var(--mono); letter-spacing:.02em}
.pb-aceite{display:flex; gap:9px; align-items:flex-start; font-size:12px; color:var(--tinta-2);
  line-height:1.45}
.pb-aceite input{margin:2px 0 0; accent-color:var(--amarelo-borda); flex:none}
.pb-aceite a{color:var(--tinta); text-underline-offset:2px}
.pb-primario{border:1px solid var(--amarelo-borda); background:var(--amarelo);
  color:var(--sobre-amarelo); border-radius:99px; padding:13px; font-size:14px; font-weight:800;
  font-family:inherit; transition:filter .15s, box-shadow .15s, transform .1s}
.pb-primario:hover{filter:brightness(1.04); box-shadow:var(--sombra-alta)}
.pb-primario:active{transform:translateY(1px)}
.pb-erro{color:var(--coral-forte); background:var(--coral-bg); border:1px solid var(--coral);
  border-radius:8px; padding:10px 12px; font-size:12.5px; line-height:1.45}
.pb-erro:empty{display:none}
.pb-link-fraco{background:none; border:0; padding:4px; color:var(--tinta-2); font-size:12.5px;
  font-weight:700; text-decoration:underline; text-underline-offset:3px; align-self:center;
  font-family:inherit}
.pb-link-fraco:hover{color:var(--tinta)}
.pb-fechar{margin-top:18px; width:100%; border:1px solid var(--linha); background:none;
  color:var(--tinta); padding:11px; border-radius:8px; font-size:13px; font-weight:700;
  font-family:inherit}
.pb-fechar:hover{background:var(--linha-fraca)}