/* Gerado por scripts/gerar_vitrine.py a partir da apresentacao da Blocô. Nao edite a mao. */
@font-face { font-family: "Figtree"; font-weight: 400; src: url("fonts/3d9fe088a952.woff2")format("woff2"); font-display: swap; }

@font-face { font-family: "Figtree"; font-weight: 500; src: url("fonts/27c6a83d1c68.woff2")format("woff2"); font-display: swap; }

@font-face { font-family: "Figtree"; font-weight: 600; src: url("fonts/15609363bf3d.woff2")format("woff2"); font-display: swap; }

@font-face { font-family: "Figtree"; font-weight: 700; src: url("fonts/058cc6b71993.woff2")format("woff2"); font-display: swap; }

@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; src: url("fonts/b952fbbcf299.woff2")format("woff2"); font-display: swap; }

@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; src: url("fonts/633d7e997266.woff2")format("woff2"); font-display: swap; }
/* Blocô: tokens do tema claro.
   Origem: design system "Blocô" no Claude Design
   (https://claude.ai/artifact/Y2PPNQhM8ZTGC4LUtfpRQt), tokens.json versão 1,
   publicação 1792525665-6ccf, lida em 20/10/2026.
   Nomes iguais aos do design system. Regras de uso no README do design system:
   - tangerina, piscina, maracuja e chiclete são FUNDOS; texto sobre elas usa --on-cor;
   - texto colorido usa as versões -texto; selos usam as versões -suave. */
.vitrine {
  /* identidade */
  --tangerina: #ff7a2f;
  --piscina: #17a9a0;
  --maracuja: #ffc83d;
  --chiclete: #f25c9a;
  --noite: #23194a;
  --on-cor: #23194a;

  /* superfícies e texto */
  --surface: #fff8ee;
  --surface-raised: #ffffff;
  --surface-sunken: #fdeedb;
  --ink: #23194a;
  --ink-muted: #5e5478;
  --line: #efe1cc;
  --line-strong: #8f82a6;
  --focus: #23194a;

  /* variantes */
  --tangerina-suave: #ffe3d1;
  --tangerina-texto: #b5440a;
  --piscina-suave: #d3f2ef;
  --piscina-texto: #0b6f69;
  --maracuja-suave: #fff1c7;
  --chiclete-suave: #fde0ec;
  --chiclete-texto: #b3266a;

  /* status */
  --sucesso: #0b6a8a;
  --alerta: #8a5600;
  --erro: #c0321f;

  /* forma e profundidade */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --sombra-bloco: 0 4px 0 #23194a;
  --sombra-suave: 0 8px 24px rgba(35, 25, 74, 0.10);

  /* tipografia */
  --font-display: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-sans: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.vitrine {
  --sombra-moldura: 0 30px 60px -22px rgba(35, 25, 74, .38);
  --escala: 1;
}

.vitrine * { box-sizing: border-box; margin: 0; padding: 0; }

.vitrine { height: 100%; overflow: hidden; background: var(--surface-sunken); }

.vitrine {
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
/* ---------- palco 16:9 ---------- */
.vitrine .palco {
  position: absolute; left: 50%; top: 50%;
  width: 1600px; height: 900px;
  transform: translate(-50%, -50%) scale(var(--escala));
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 10px 60px rgba(35, 25, 74, .14);
}

.vitrine .slide {
  position: absolute; inset: 0;
  padding: 72px 96px 104px;
  display: flex; align-items: center; gap: 64px;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.vitrine .slide.ativo { opacity: 1; visibility: visible; transition: opacity .35s ease; }

.vitrine .slide.ativo .entra { animation: entra .55s cubic-bezier(.2, .7, .2, 1) both; }

.vitrine .slide.ativo .entra:nth-child(2) { animation-delay: .06s; }

.vitrine .slide.ativo .entra:nth-child(3) { animation-delay: .12s; }

.vitrine .slide.ativo .entra:nth-child(4) { animation-delay: .18s; }

@keyframes entra { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
.vitrine .slide, .vitrine .slide.ativo { transition: none; }

.vitrine .slide.ativo .entra { animation: none; }

}
/* ---------- rodapé e progresso ---------- */
.vitrine .rodape {
  position: absolute; left: 96px; right: 96px; bottom: 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 15px; color: var(--ink-muted); z-index: 5;
}

.vitrine .contador { font-variant-numeric: tabular-nums; font-weight: 500; }

.vitrine .progresso { position: absolute; left: 0; top: 0; height: 6px; background: var(--tangerina); transition: width .35s ease; z-index: 5; }

.vitrine .dica {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  font-size: 13px; color: var(--ink-muted); background: var(--surface-raised);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 6px 14px;
  transition: opacity .6s ease; z-index: 5;
}

.vitrine .dica.some { opacity: 0; }
/* ---------- logo (SVG da Blocô, inline) ---------- */
.vitrine .logo { display: inline-flex; line-height: 0; }

.vitrine .logo svg { display: block; height: 40px; width: auto; }

.vitrine .rodape .logo svg { height: 32px; }

.vitrine .logo.grande svg { height: 64px; }
/* ---------- tipografia ---------- */
.vitrine .texto { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }

.vitrine .selo {
  align-self: flex-start;
  font-size: 16px; font-weight: 600; line-height: 1.25;
  color: var(--tangerina-texto); background: var(--tangerina-suave);
  padding: 6px 12px; border-radius: var(--radius-sm);
}

.vitrine h1, .vitrine h2, .vitrine h3 { font-family: var(--font-display); }

.vitrine h1 { font-size: 68px; line-height: 1.04; letter-spacing: -.02em; font-weight: 800; }

.vitrine h2 { font-size: 50px; line-height: 1.08; letter-spacing: -.015em; font-weight: 800; }

.vitrine h2 em, .vitrine h1 em { font-style: normal; color: var(--tangerina-texto); }

.vitrine .lead { font-size: 23px; line-height: 1.45; color: var(--ink-muted); max-width: 640px; }

.vitrine .lista { list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 21px; line-height: 1.4; }

.vitrine .lista li { display: flex; gap: 14px; align-items: flex-start; }

.vitrine .lista svg { flex: none; width: 26px; height: 26px; margin-top: 1px; color: var(--tangerina-texto); }

.vitrine .lista b { font-weight: 700; }

.vitrine .passos { list-style: none; counter-reset: p; display: flex; flex-direction: column; gap: 16px; font-size: 21px; line-height: 1.4; }

.vitrine .passos li { counter-increment: p; display: flex; gap: 16px; align-items: flex-start; }

.vitrine .passos li::before {
  content: counter(p); flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--noite); color: var(--surface); font-size: 16px; font-weight: 700;
  display: grid; place-items: center; margin-top: -2px;
}

.vitrine .nota { font-size: 17px; color: var(--ink-muted); line-height: 1.45; }

.vitrine svg.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- molduras ---------- */
.vitrine .telas { flex: none; display: flex; align-items: center; gap: 28px; position: relative; }

.vitrine .celular {
  --l: 300px;
  width: var(--l); padding: 9px; border-radius: 46px; background: var(--noite);
  box-shadow: var(--sombra-moldura), 0 0 0 1px rgba(35, 25, 74, .2);
  position: relative; flex: none;
}

.vitrine .celular img { display: block; width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 37px; }

.vitrine .celular.p { --l: 250px; }

.vitrine .celular.g { --l: 320px; }

.vitrine .navegador {
  border-radius: var(--radius-md); background: var(--surface-raised); overflow: hidden; flex: none;
  box-shadow: var(--sombra-moldura), 0 0 0 1px rgba(35, 25, 74, .1);
}

.vitrine .navegador .barra { height: 34px; background: var(--surface-sunken); display: flex; align-items: center; gap: 8px; padding: 0 14px; }

.vitrine .navegador .barra i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }

.vitrine .navegador img { display: block; width: 100%; }

.vitrine .tablet {
  padding: 14px; border-radius: 30px; background: var(--noite); flex: none;
  box-shadow: var(--sombra-moldura);
}

.vitrine .tablet img { display: block; width: 100%; border-radius: 16px; }

.vitrine .legenda { position: absolute; left: 0; right: 0; bottom: -40px; text-align: center; font-size: 15px; font-weight: 600; color: var(--ink-muted); }
/* ---------- slides específicos ---------- */
.vitrine .capa h1 { font-size: 76px; }

.vitrine .capa .telas { height: 100%; width: 640px; }

.vitrine .capa .celular:first-child { position: absolute; right: 250px; top: 60px; transform: rotate(-6deg); --l: 290px; }

.vitrine .capa .celular:last-child { position: absolute; right: 0; top: 20px; transform: rotate(4deg); --l: 300px; }

.vitrine .dor { flex-direction: column; align-items: stretch; justify-content: center; gap: 44px; }

.vitrine .dor h2 { max-width: 1180px; }

.vitrine .cartoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.vitrine .cartao { background: var(--surface-raised); border-radius: var(--radius-lg); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; border: 2px solid var(--line); }
/* Ícone em caixa: fundo -suave da área, ícone em noite (padrão do design system). */
.vitrine .cartao .icone { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--noite); display: grid; place-items: center; }

.vitrine .cartao .icone.tangerina { background: var(--tangerina-suave); }

.vitrine .cartao .icone.piscina { background: var(--piscina-suave); }

.vitrine .cartao .icone.maracuja { background: var(--maracuja-suave); }

.vitrine .cartao .icone.chiclete { background: var(--chiclete-suave); }

.vitrine .cartao .icone svg { width: 28px; height: 28px; }

.vitrine .cartao h3 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }

.vitrine .cartao p { font-size: 18px; line-height: 1.45; color: var(--ink-muted); }

.vitrine .fecho { font-size: 26px; font-weight: 600; line-height: 1.4; }

.vitrine .fecho em { font-style: normal; color: var(--tangerina-texto); }

.vitrine .visitas .tablet { position: absolute; right: -40px; bottom: -36px; width: 400px; padding: 10px; border-radius: 22px; }

.vitrine .visitas .tablet img { border-radius: 12px; }

.vitrine .visitas .telas { padding-right: 230px; padding-bottom: 40px; }
/* celular sobreposto à esquerda da janela do painel */
.vitrine .assembleia .telas, .vitrine .avisos .telas { align-items: flex-end; }

.vitrine .assembleia .celular, .vitrine .avisos .celular { order: 0; z-index: 2; margin-bottom: -20px; }

.vitrine .assembleia .navegador, .vitrine .avisos .navegador { order: 1; margin-left: -30px; margin-bottom: 60px; }

.vitrine .assembleia .navegador { width: 560px; }

.vitrine .avisos .navegador { width: 460px; }

.vitrine .marca .telas { gap: 22px; align-items: flex-end; }

.vitrine .marca .seta { align-self: center; color: var(--tangerina-texto); }

.vitrine .marca .seta svg { width: 44px; height: 44px; }

.vitrine .marca .rotulo { position: absolute; left: 0; right: 0; top: -36px; text-align: center; font-size: 15px; font-weight: 600; color: var(--ink-muted); }

.vitrine .sindico .texto { flex: 0 0 470px; }

.vitrine .sindico .telas { flex: 1; height: 100%; }

.vitrine .sindico .navegador:first-child { position: absolute; left: 0; top: 0; width: 780px; }

.vitrine .sindico .navegador:last-child { position: absolute; right: -40px; bottom: -20px; width: 430px; }
/* Mapa dos módulos: três colunas, uma por tela do sistema. */
.vitrine .mapa { flex-direction: column; align-items: stretch; justify-content: center; gap: 36px; }

.vitrine .mapa .grade { gap: 22px; }

.vitrine .mapa .cartao { padding: 28px 28px 30px; gap: 16px; }

.vitrine .mapa .cartao h3 { font-size: 26px; }

.vitrine .mapa .cartao .quem { font-size: 16px; font-weight: 600; color: var(--ink-muted); margin-top: -10px; }

.vitrine .mini { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 18px; line-height: 1.35; }

.vitrine .mini li { display: flex; gap: 10px; align-items: flex-start; }

.vitrine .mini svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--sucesso); }
/* Compras: uma janela alta, a do comparativo de orçamentos. */
.vitrine .compras .texto { flex: 0 0 640px; }

.vitrine .compras .telas { flex: 1; justify-content: center; }

.vitrine .compras .navegador { width: 450px; }

.vitrine .portaria .telas { flex-direction: column; gap: 22px; align-items: flex-end; }

.vitrine .portaria .tablet { width: 620px; }

.vitrine .portaria .tablet + .tablet { width: 520px; margin-right: 90px; margin-top: -120px; }

.vitrine .confianca, .vitrine .incluso { flex-direction: column; align-items: stretch; justify-content: center; gap: 40px; }

.vitrine .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.vitrine .grade .cartao { padding: 26px; }

.vitrine .grade .cartao h3 { font-size: 22px; }

.vitrine .grade .cartao p { font-size: 17px; }

.vitrine .fichas { display: flex; flex-wrap: wrap; gap: 14px; }

.vitrine .ficha {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface-raised); border: 2px solid var(--line); border-radius: var(--radius-pill);
  padding: 13px 22px; font-size: 21px; font-weight: 600;
}

.vitrine .ficha svg { color: var(--sucesso); width: 22px; height: 22px; }

.vitrine .ficha.destaque { background: var(--tangerina); border-color: var(--noite); color: var(--on-cor); }

.vitrine .ficha.destaque svg { color: var(--on-cor); }

.vitrine .preco { flex-direction: column; align-items: stretch; justify-content: center; gap: 40px; }

.vitrine .planos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 22px; }

.vitrine .plano { background: var(--surface-raised); border: 2px solid var(--line); border-radius: var(--radius-lg); padding: 34px 32px; display: flex; flex-direction: column; gap: 14px; }

.vitrine .plano.destaque { border-color: var(--noite); box-shadow: var(--sombra-bloco); }

.vitrine .plano h3 { font-size: 24px; font-weight: 700; }
/* Dinheiro em Figtree negrito (corpo-forte do design system). */
.vitrine .plano .valor { font-size: 46px; font-weight: 700; letter-spacing: -.02em; }

.vitrine .plano .periodo { font-size: 17px; color: var(--ink-muted); }

.vitrine .final { justify-content: space-between; }

.vitrine .final .texto { flex: 0 1 820px; }

.vitrine .contato { background: var(--noite); color: var(--surface); border-radius: var(--radius-lg); padding: 44px 48px; width: 500px; display: flex; flex-direction: column; gap: 20px; }

.vitrine .contato .linha { font-size: 21px; display: flex; gap: 12px; align-items: center; color: rgba(255, 248, 238, .9); }

.vitrine .contato .linha svg { color: rgba(255, 248, 238, .65); }

.vitrine .contato .chamada { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.3; }

.vitrine [data-contato] { display: flex; flex-direction: column; gap: 10px; }

.vitrine .qr { display: flex; gap: 20px; align-items: center; margin-top: 4px; }

.vitrine .qr-codigo { flex: none; width: 152px; height: 152px; background: var(--surface-raised); border-radius: var(--radius-md); overflow: hidden; }

.vitrine .qr-codigo svg { display: block; width: 100%; height: 100%; }

.vitrine .qr p { font-size: 17px; line-height: 1.4; color: rgba(255, 248, 238, .9); }