/* Landing publica (/, sem login).
 *
 * Reescrita em 17/09/2026 junto com home/publica.html.erb: a pagina deixou de
 * ser vitrine e virou recado curto para quem vai usar o sistema. Saiu o CSS do
 * hero, das garantias, da secao "quem e o Baratao", do passo a passo e do
 * carrossel -- o arquivo foi de 682 para ~130 linhas porque o que ele
 * estilizava nao existe mais na tela, nao porque virou minimalismo.
 *
 * O ceu e o brilho FICAM, e sao a mesma tecnica de entrada.css de proposito:
 * a landing e a porta de fora da MESMA casa que /entrar. Sempre --bc-*, nunca
 * --vn-* direto. */

body.publica {
  min-height: 100dvh;
  margin: 0;
  color: var(--bc-ink);
  font: 16px/1.6 system-ui, -apple-system, sans-serif;
}

/* ── barra ────────────────────────────────────────────────────────────── */

.publica__barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.75rem;
  position: relative; z-index: 2;
}

.publica__marca { height: 24px; width: auto; }

.publica__entrar {
  padding: .55rem 1.1rem;
  color: var(--bc-ink);
  background: transparent;
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  text-decoration: none;
  font-size: .88rem; font-weight: 600;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.publica__entrar:hover {
  border-color: var(--bc-primary);
  background: color-mix(in srgb, var(--bc-primary) 14%, transparent);
}

/* ── ceu ──────────────────────────────────────────────────────────────── */

.publica__ceu {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bc-bg);
  /* `min-height` com a barra descontada: com uma tela curta agora, sem isto o
     ceu terminaria no fim do cartao e sobraria uma faixa de fundo cru embaixo. */
  min-height: calc(100dvh - 5.5rem);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem 4rem;
}

/* Estrelas animadas (piscando) -- mesma tecnica de entrada.css: <circle>
   reais no DOM via shared/_ceu, porque SVG como background-image congela e
   CSS nao alcanca o que tem dentro pra animar. Ver o comentario do partial. */
.publica__ceu-estrelas {
  position: absolute; inset: -10%;
  opacity: .7;
  z-index: -2;
  pointer-events: none;
}

.publica__ceu-estrelas-camada { position: absolute; inset: 0; width: 100%; height: 100%; }
.publica__ceu-estrelas-camada--pequena { opacity: .6; }

.publica__ceu-estrelas-camada circle {
  animation: publica-piscar var(--dur, 3.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes publica-piscar {
  0%, 100% { opacity: calc(var(--op, 1) * .3); }
  50%      { opacity: var(--op, 1); }
}

/* Redução de movimento NAO precisa de regra aqui: `marca_tokens.css` ja
   desliga `animation` e `transition` globalmente com `!important` sob
   `prefers-reduced-motion`. Uma copia local viraria segunda fonte da mesma
   verdade -- conferido em 17/09 antes de escrever uma. */

.publica__ceu::after {
  content: "";
  position: absolute; left: 50%; top: 18%;
  width: min(1100px, 170vw); aspect-ratio: 5 / 2;
  translate: -50% -50%;
  rotate: -14deg;
  background:
    radial-gradient(closest-side ellipse,
      color-mix(in srgb, var(--bc-primary) 32%, transparent) 0%,
      color-mix(in srgb, var(--bc-primary) 9%, transparent) 52%,
      transparent 74%);
  filter: blur(70px);
  z-index: -1;
  pointer-events: none;
}

/* ── o cartao, que e a tela inteira agora ─────────────────────────────── */

.publica__cartao {
  position: relative; z-index: 1;
  width: 100%; max-width: 30rem;
  text-align: center;
}

.publica__marca-grande {
  height: 44px; width: auto;
  max-width: 100%;
}

.publica__resumo {
  margin: 1.75rem 0 0;
  font-size: 1.15rem; line-height: 1.5;
  color: var(--bc-ink);
}

/* Os tres usos. `text-align: left` dentro de um cartao centralizado: titulo e
   descricao alinhados a esquerda sao mais faceis de varrer, e o bloco inteiro
   continua centrado na tela. */
.publica__usos {
  list-style: none;
  margin: 2rem 0 0; padding: 0;
  display: grid; gap: .9rem;
  text-align: left;
}

.publica__usos li {
  padding: .9rem 1.1rem;
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  background: color-mix(in srgb, var(--bc-surface) 55%, transparent);
}

.publica__usos strong {
  display: block;
  font-size: .95rem;
  color: var(--bc-primary);
}

.publica__usos span {
  display: block;
  margin-top: .2rem;
  font-size: .88rem; line-height: 1.5;
  color: var(--bc-ink-mut);
}

.publica__cta {
  display: inline-block;
  margin-top: 2rem;
  padding: .85rem 1.9rem;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border-radius: var(--bc-raio);
  text-decoration: none;
  font-weight: 700; font-size: 1rem;
  transition: background-color 150ms ease, translate 80ms ease;
}
.publica__cta:hover { background: var(--bc-primary-hover); }
.publica__cta:active { translate: 0 1px; }

.publica__acesso {
  margin: 1.25rem 0 0;
  font-size: .82rem; line-height: 1.5;
  color: var(--bc-ink-mut);
}

@media (max-width: 30rem) {
  .publica__barra { padding: 1rem 1.1rem; }
  .publica__marca-grande { height: 36px; }
  .publica__resumo { font-size: 1.05rem; }
}