/* Componentes que a landing usa e o painel nao tem.
 *
 * O landing.css do Google Cloud foi desenhado para assentar sobre o base.css e
 * o app.css DE LA, que trazem botao, pilula, spinner, cabecalho e rodape. O
 * painel daqui tem base.css e app.css proprios, com outros nomes e outras
 * medidas — entao essas pecas faltavam, e a landing aparecia sem estilo
 * nenhum no topo.
 *
 * Todo seletor aqui esta escopado em #vitrine. Sem isso, o .btn e o .pill da
 * landing repintariam o painel inteiro, que ja esta pronto e revisado. Tudo
 * que a landing renderiza vive dentro de #vitrine — inclusive o popup de
 * prova social e a barra de compra do celular —, entao o escopo e suficiente.
 *
 * Gerado por scratchpad/extrair-vitrine-base.py e retematizado em seguida.
 * Editar a mao e permitido; so nao rode o extrator de novo por cima.
 */

/* ---- de base.css do gcloud (25 regras) ---- */
#vitrine /* ---------- eyebrow / lede ---------- */
.eyebrow{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand); margin-bottom:10px; font-family:var(--sans);}
#vitrine .hint{color:var(--ink-3); font-size:14px; line-height:1.6}
#vitrine /* ---------- pílulas ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:4px 11px; border-radius:var(--r-pill); white-space:nowrap; border:0;
  font-family:var(--sans); letter-spacing:.005em;}
#vitrine .p-blue{background:var(--brand-fundo); color:var(--brand)}
#vitrine .p-green{background:var(--verde-fundo); color:var(--verde)}
#vitrine .p-gold{background:var(--ouro-fundo); color:#8A5700}
#vitrine /* ---------- tabelas ---------- */
.tbl-wrap{overflow-x:auto; border-radius:var(--r-2); background:var(--surface); box-shadow:var(--s-1)}
#vitrine /* ---------- listas ---------- */
ul.clean{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
#vitrine ul.clean.dot li{padding-left:20px; position:relative}
#vitrine ul.clean.dot li::before{content:""; position:absolute; left:2px; top:9px; width:6px; height:6px;
  border-radius:50%; background:var(--brand)}
#vitrine /* ---------- botões ---------- */
.btn{font-family:var(--sans); font-size:14.5px; font-weight:600; cursor:pointer;
  padding:10px 18px; border-radius:var(--r-pill); border:0;
  background:var(--surface); color:var(--ink); box-shadow:var(--s-1);
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s, background .16s;
  line-height:1.3;}
#vitrine .btn:hover{box-shadow:var(--s-2); transform:translateY(-1px)}
#vitrine .btn:active{transform:translateY(0) scale(.985)}
#vitrine .btn.primary{background:var(--brand); color:#fff; box-shadow:var(--s-marca)}
#vitrine .btn.primary:hover{background:var(--brand-vivo)}
#vitrine .btn.danger{color:var(--vermelho)}
#vitrine .btn.lg{padding:14px 26px; font-size:16px}
#vitrine .btn.full{width:100%}
#vitrine .btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
#vitrine .btn.ghost{background:transparent; box-shadow:none}
#vitrine .btn.ghost:hover{background:var(--surface-2); box-shadow:none; transform:none}
#vitrine /* ---------- utilidades ---------- */
.carregando{display:flex; align-items:center; gap:12px; color:var(--ink-3); font-size:15px; padding:34px 0}
#vitrine .spin{width:17px; height:17px; border:2.2px solid var(--surface-3); border-top-color:var(--brand);
  border-radius:50%; animation:gira .7s linear infinite; flex:none}
@keyframes gira{to{transform:rotate(360deg)}}
#vitrine .consent-acoes .btn{flex:1; justify-content:center; font-size:14px; padding:10px 14px}

/* ---- de app.css do gcloud (24 regras) ---- */
#vitrine /* ============================================================
   VITRINE
   ============================================================ */
.lp-top{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px)}
#vitrine .lp-top-in{max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:16px}
#vitrine .lp-logo{font-family:var(--display); font-weight:600; font-size:16.5px; letter-spacing:-.02em;
  display:flex; align-items:center; gap:10px; color:var(--ink)}
#vitrine .lp-logo svg{width:28px; height:28px; flex:none}
#vitrine .lp-logo.center{justify-content:center; margin-bottom:24px}
#vitrine .lp-top-acoes{margin-left:auto; display:flex; gap:10px}
#vitrine .lp-hero .eyebrow{color:#7FC3FF}
#vitrine .lp-sub{font-size:18px; color:#C2D4E8; max-width:50ch; line-height:1.62}
#vitrine .lp-sub b{color:#fff; font-weight:600}
#vitrine .lp-cta .btn{box-shadow:0 8px 24px rgba(0,0,0,.26)}
#vitrine .lp-cta .btn:not(.primary){background:rgba(255,255,255,.12); color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
#vitrine .lp-cta .btn:not(.primary):hover{background:rgba(255,255,255,.2)}
#vitrine /* faíscas decorativas do fundo */
.lp-faisca{position:absolute; pointer-events:none; opacity:.9; animation:cintila 4s ease-in-out infinite}
#vitrine .lp-faisca:nth-of-type(2){animation-delay:1.1s}
#vitrine .lp-faisca:nth-of-type(3){animation-delay:2.2s}
#vitrine .lp-fecho .card .hint{color:#9FB6CE; max-width:52ch; margin:0 auto 24px; font-size:15.5px}
#vitrine .lp-rodape{background:var(--surface); padding:40px 24px; text-align:center; color:var(--ink-3); font-size:13.5px}
#vitrine .lp-links{display:flex; gap:22px; justify-content:center; margin:14px 0; flex-wrap:wrap}
#vitrine .lp-aviso{max-width:68ch; margin:18px auto 0; font-size:12px; line-height:1.65; opacity:.78}
#vitrine .auth-card>.hint{text-align:center; margin-bottom:24px}
#vitrine .btn.google{width:100%; padding:13px; font-size:15px; background:var(--surface-2); box-shadow:none}
#vitrine .btn.google:hover{background:var(--surface-3); transform:none; box-shadow:var(--s-1)}
#vitrine .pw-preco .btn{margin-left:auto}
@media (max-width:960px){
  #vitrine .pw-preco .btn{margin-left:0; width:100%}
}