/* Bollsu — páginas públicas (/, /termos, /privacidade) na identidade "Maré" (v47).
   Os tokens (cores, raio, sombra, fontes, claro e escuro) vêm do style.css; aqui só o layout, com prefixo pb-
   para não colidir com as classes do app. Sem style="" nem script: a CSP dessas páginas não permite. */
body.publica { min-height: 100vh; display: flex; flex-direction: column; font: 400 17px/1.6 var(--fonte); overflow-x: hidden; }
body.publica h1, body.publica h2, body.publica h3 { line-height: 1.05; letter-spacing: -.025em; }
body.publica a { color: var(--mare); }
body.publica main { flex: 1; }
.pb-envolve { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.pb-pular { position: absolute; left: -999px; top: 8px; background: var(--superficie); padding: 8px 12px; border-radius: var(--raio-p); z-index: 9; }
.pb-pular:focus { left: 16px; }
body.publica :focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }

.pb-topo { position: sticky; top: 0; z-index: 5; padding: 12px 0; }
.pb-barra { display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 10px 0 20px; background: color-mix(in srgb, var(--superficie) 86%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--linha); border-radius: 999px; box-shadow: var(--sombra); }
.pb-marca { display: inline-flex; align-items: center; color: var(--tinta); text-decoration: none; }
body.publica .pb-marca { color: var(--tinta); }
.pb-marca .logo { height: 32px; }
.pb-menu { display: flex; gap: 2px; margin-left: auto; }
body.publica .pb-menu a { color: var(--tinta-2); text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 14px; border-radius: 999px; }
body.publica .pb-menu a:hover { background: var(--menta-2); color: var(--tinta); }
body.publica .pb-entrar { color: var(--tinta); font-weight: 600; font-size: 15px; text-decoration: none; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linha); background: var(--superficie); }
.pb-marca + .pb-entrar { margin-left: auto; }  /* Termos/Privacidade: sem o menu de seções */
body.publica .pb-entrar:hover { background: var(--menta-2); }

.pb-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 17px/1 var(--fonte); padding: 17px 26px; border-radius: 999px; text-decoration: none; transition: transform .15s ease; }
body.publica a.pb-cta { background: var(--mare); color: var(--mare-tinta); }
body.publica a.pb-cta:hover { transform: translateY(-2px); }
.pb-cta svg { width: 20px; height: 20px; }
.pb-cta.pb-fechado { background: var(--superficie-2); color: var(--tinta-2); border: 1px dashed var(--linha); cursor: default; }
.pb-aviso-cadastro { margin-top: 12px; font-size: 15px; color: var(--tinta-2); }

.pb-hero { padding: 56px 0 80px; position: relative; overflow: hidden; }
.pb-hero .pb-envolve { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.pb-etiqueta { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--tinta-2); margin-bottom: 22px; }
.pb-etiqueta i { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 14px 0 0 var(--mare); }
.pb-etiqueta span { margin-left: 14px; }
.pb-hero h1 { font-size: clamp(42px, 6.6vw, 84px); font-weight: 750; text-wrap: balance; }
.pb-hero h1 mark { background: linear-gradient(transparent 58%, var(--menta) 58%, var(--menta) 92%, transparent 92%); color: inherit; padding: 0 .06em; }
.pb-sub { font-size: 20px; color: var(--tinta-2); margin: 26px 0 34px; max-width: 38ch; }
.pb-nota { font-size: 14px; color: var(--tinta-3); margin-top: 14px; }

.pb-palco { position: relative; padding: 20px 0; margin: 0; }
.pb-palco::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: var(--menta); right: -30px; top: -10px; opacity: .7; }
.pb-palco::after { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; background: var(--coral); left: 10px; bottom: 30px; opacity: .9; }
.pb-tg { position: relative; z-index: 1; background: var(--superficie); border-radius: 28px; box-shadow: var(--sombra-alta); overflow: hidden; max-width: 400px; margin: 0 auto; transform: rotate(1.5deg); }
.pb-tg-topo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.pb-tg-topo svg { width: 40px; height: 40px; flex: none; border-radius: 12px; }
.pb-tg-topo b { display: block; font-size: 16px; line-height: 1.2; }
.pb-tg-topo span { font-size: 13px; color: var(--tinta-3); }
.pb-tg-corpo { background: var(--superficie-2); padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.pb-msg { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; }
.pb-msg.pb-eu { align-self: flex-end; background: var(--menta); border-bottom-right-radius: 6px; }
.pb-msg.pb-bot { align-self: flex-start; background: var(--superficie); border-bottom-left-radius: 6px; }
.pb-msg time { display: block; text-align: right; font-size: 11px; color: var(--tinta-2); margin-top: 2px; }
.pb-ficha { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.pb-ficha span { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--superficie-2); }
.pb-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 86%; }
.pb-botoes span { text-align: center; font-size: 14px; font-weight: 600; color: var(--mare); background: var(--superficie); padding: 9px; border-radius: 14px; }
.pb-medidor { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.pb-anel { width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(var(--mare) 69%, var(--superficie-2) 0); display: grid; place-items: center; flex: none; }
.pb-anel b { width: 38px; height: 38px; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; font-size: 12px; }
.pb-mini { font-size: 13px; color: var(--tinta-3); }
.pb-tg-campo { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; color: var(--tinta-3); font-size: 15px; }
.pb-tg-campo svg { width: 22px; height: 22px; color: var(--mare); }
.pb-legenda { position: relative; z-index: 1; font-size: 13px; color: var(--tinta-3); text-align: center; margin-top: 18px; }

.pb-secao { padding: 80px 0; scroll-margin-top: 96px; }
.pb-secao.pb-junto { padding-top: 20px; }
.pb-cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.pb-cabeca h2 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 750; max-width: 16ch; }
.pb-cabeca p { color: var(--tinta-2); max-width: 38ch; font-size: 18px; }
.pb-nome { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.pb-nome i { width: 14px; height: 14px; border-radius: 5px; background: var(--mare); }
.pb-cartao-ex { background: var(--superficie); color: var(--tinta); border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.pb-cartao-ex .pb-msg { max-width: 100%; }
.pb-mini-esc { font-size: 13px; color: var(--tinta-3); }
.pb-aviso { display: flex; gap: 10px; background: var(--aviso-fundo); color: var(--aviso-tinta); border: 1px solid var(--aviso-linha); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; margin-top: auto; }
.pb-aviso svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.pb-aviso p { margin: 0; }

.pb-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: p; }
.pb-passos li { counter-increment: p; padding: 26px 22px; border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); }
.pb-passos li::before { content: counter(p); display: block; font: 750 56px/1 var(--fonte-titulo); color: var(--coral); margin-bottom: 14px; }
.pb-passos h3 { font-size: 21px; font-weight: 700; margin-bottom: 6px; line-height: 1.15; }
.pb-passos p { color: var(--tinta-2); font-size: 15px; }

.pb-seguranca { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--linha); }
.pb-item { display: flex; gap: 18px; padding: 26px 8px; border-bottom: 1px solid var(--linha); }
.pb-item:nth-child(odd) { padding-right: 28px; }
.pb-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--menta); color: var(--tinta); display: grid; place-items: center; flex: none; }
.pb-ic svg { width: 22px; height: 22px; }
.pb-item h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; line-height: 1.2; }
.pb-item p { color: var(--tinta-2); font-size: 15px; }

/* v63 (Fase 9): botão do topo, rascunho da conversa, 4 diferenciais e perguntas rápidas */
body.publica .pb-criar { color: var(--mare-tinta); background: var(--mare); font-weight: 600; font-size: 15px; text-decoration: none; padding: 10px 16px; border-radius: 999px; white-space: nowrap; }
body.publica .pb-criar:hover { filter: brightness(1.08); }
.pb-rascunho { margin: 6px 0; padding-left: 20px; display: grid; gap: 2px; }
.pb-difs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pb-dif { border-radius: var(--raio); padding: 30px; background: var(--superficie); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 12px; min-width: 0; scroll-margin-top: 96px; }
.pb-dif:first-child { background: var(--menta-2); box-shadow: none; border: 1px solid color-mix(in srgb, var(--mare) 18%, transparent); }
.pb-dif h3 { font-size: 26px; font-weight: 700; line-height: 1.15; }
.pb-dif p { color: var(--tinta-2); }
.pb-dif .pb-cartao-ex .pb-msg { color: var(--tinta); }
.pb-aviso-difs { margin-top: 20px; }
.pb-faq { display: grid; gap: 10px; max-width: 820px; }
.pb-faq details { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 16px 20px; }
.pb-faq summary { cursor: pointer; font-weight: 600; font-size: 18px; }
.pb-faq details p { color: var(--tinta-2); margin-top: 8px; }
.pb-caixa-nota { font-size: 15px !important; margin: 18px auto 0 !important; }
body.publica .pb-caixa a:not(.pb-cta) { color: var(--petroleo-tinta); }

.pb-final { padding: 24px 0 80px; }
.pb-caixa { border: 1px solid var(--borda-petroleo); background: var(--petroleo); color: var(--petroleo-tinta); border-radius: 32px; padding: 64px 40px; text-align: center; position: relative; overflow: hidden; }
.pb-caixa::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: var(--coral); opacity: .9; right: -60px; top: -80px; }
.pb-caixa::after { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: var(--mare); opacity: .5; left: -50px; bottom: -70px; }
.pb-caixa h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 750; position: relative; }
.pb-caixa p { color: var(--petroleo-tinta-2); margin: 16px auto 30px; max-width: 42ch; font-size: 18px; position: relative; }
body.publica .pb-caixa a.pb-cta { position: relative; z-index: 1; background: #5fd3bd; color: #062420; }
.pb-caixa .pb-cta.pb-fechado { position: relative; z-index: 1; }
.pb-caixa .pb-aviso-cadastro { color: var(--petroleo-tinta-2); position: relative; }

.pb-rodape { padding: 8px 0 44px; font-size: 14px; color: var(--tinta-3); }
.pb-rodape .pb-envolve { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.pb-rodape .pb-marca .logo { height: 26px; }
.pb-rodape nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
body.publica .pb-rodape a { color: var(--tinta-2); }
.pb-curto { flex-basis: 100%; }

/* Termos e Privacidade */
.doc-legal { padding-top: 24px; padding-bottom: 48px; display: grid; gap: 16px; }
.doc-legal h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 750; }

@media (max-width: 960px) {
  .pb-hero .pb-envolve { grid-template-columns: 1fr; gap: 28px; }
  .pb-passos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .pb-menu { display: none; }
  .pb-barra { justify-content: space-between; }
  .pb-seguranca, .pb-difs { grid-template-columns: 1fr; }
  .pb-item:nth-child(odd) { padding-right: 8px; }
}
@media (max-width: 560px) {
  body.publica { font-size: 16px; }
  .pb-envolve { padding: 0 16px; }
  .pb-topo { padding: 10px 0; }
  .pb-barra { height: 56px; padding: 0 8px 0 16px; gap: 8px; }
  body.publica .pb-entrar, body.publica .pb-criar { padding: 9px 12px; font-size: 14px; }
  .pb-barra .pb-entrar { margin-left: auto; }
  .pb-dif { padding: 22px; }
  .pb-marca .logo { height: 28px; }
  .pb-hero { padding: 32px 0 56px; }
  .pb-sub { font-size: 17px; }
  .pb-hero .pb-cta { width: 100%; }
  .pb-palco::before { width: 220px; height: 220px; right: -40px; }
  .pb-palco::after { width: 64px; height: 64px; left: -10px; }
  .pb-tg { transform: none; }
  .pb-secao { padding: 56px 0; }
  .pb-passos { grid-template-columns: 1fr; }
  .pb-caixa { padding: 48px 20px; border-radius: 24px; }
  .pb-caixa .pb-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { body.publica * { transition: none !important; } }