/* Vitrine (versão neutra) do Sistema Integrado, 12/11/2026: cores e fonte da Boito por cima da marca do cliente.
   Só é carregado no endereço da vitrine (worker/vitrine.ts injeta este arquivo). Seletor html:root para ganhar do :root do app.
   Contrastes sobre branco: texto #1F1C18 15,9:1 · #4F4A42 8,6:1 · #655F56 6,2:1 · ação #7F5F1C com texto branco 6,0:1.
   Faixa do alto #1F1C18 com texto branco 16,9:1; o traço dourado sob a faixa é enfeite, não carrega informação. */
@font-face { font-family: "Plus Jakarta Sans"; src: url(/marca/fonte-boito.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
html:root, html:root[data-theme="light"] {
  --fonte-ui: "Plus Jakarta Sans";
  --marca-principal: #1F1C18;  --marca-secundaria: #7F5F1C;  --marca-fundo: #F4F2EE;
  --mesa: #F4F2EE;  --folha: #FFFFFF;  --sf-2: #F8F6F2;  --sf-3: #EFEBE4;
  --linha: #8C857A;  --linha-forte: #7A7468;  --borda-campo: #8C857A;
  --tx: #1F1C18;  --tx-2: #4F4A42;  --tx-3: #655F56;
  --acc: #7F5F1C;  --acc2: #1F1C18;  --acc-aresta: #6A4F17;  --acc-tinta: #7F5F1C;  --acc-sobre: #FFFFFF;
  --acc-suave: #F3ECDD;  --acc-suave-2: #EADFC8;  --acc-halo: rgba(193, 154, 75, .30);
  --faixa: #1F1C18;  --ocre: #C19A4B;
  --mono-fundo: #1F1C18;  --mono-letra: #E2BF73;
  --el-1: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(31, 28, 24, .05), 0 10px 24px -14px rgba(31, 28, 24, .22);
  --el-2: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 5px rgba(31, 28, 24, .06), 0 20px 44px -20px rgba(31, 28, 24, .30);
  --veu: rgba(16, 14, 11, .50);  --vidro: rgba(244, 242, 238, .8);
  --e1: #7F5F1C; --e2: #1F1C18; --e3: #A88A4F; --e4: #6E6553; --e5: #3E6E8E; --e6: #4F4A42; --e7: #9C9384; --e8: #3D3A35;
}
html:root[data-theme="dark"] {
  --mesa: #100E0B;  --folha: #1A1713;  --sf-2: #221E19;  --sf-3: #2B2620;
  --linha: #6E675C;  --linha-forte: #7E776B;  --borda-campo: #8C857A;
  --tx: #F6F2EA;  --tx-2: #C9C2B4;  --tx-3: #A39B8C;
  --acc: #C19A4B;  --acc-sobre: #231C0E;  --acc-tinta: #E2BF73;  --acc-suave: #2A2318;  --acc-suave-2: #352C1D;  --acc-halo: rgba(193, 154, 75, .40);
  --faixa: #1F1C18;  --mono-fundo: #E2BF73;  --mono-letra: #1F1C18;
  --e1: #E2BF73; --e2: #C9C2B4; --e3: #A88A4F; --e4: #B5AA92; --e5: #8DB0C2; --e6: #D7C9A8; --e7: #9C9384; --e8: #E8DFCB;
}
/* o menu tem tokens próprios no app (claro mesmo no tema claro): a mesma troca, com a especificidade dele */
html:root .menu {
  --mesa: #FFFFFF;  --folha: #FFFFFF;  --sf-2: #F8F6F2;  --sf-3: #EFEBE4;
  --linha: #8C857A;  --linha-forte: #7A7468;  --borda-campo: #8C857A;  --sombra-rolagem: #EFEBE4;
  --tx: #1F1C18;  --tx-2: #4F4A42;  --tx-3: #655F56;
  --acc: #7F5F1C;  --acc-tinta: #7F5F1C;  --acc-suave: #F3ECDD;
  --foco: 0 0 0 2px #FFFFFF, 0 0 0 4px #7F5F1C;
}
html:root[data-theme="dark"] .menu {
  --mesa: #1A1713;  --folha: #1A1713;  --sf-2: #221E19;  --sf-3: #2B2620;
  --linha: #6E675C;  --linha-forte: #7E776B;  --borda-campo: #8C857A;  --sombra-rolagem: #2B2620;
  --tx: #F6F2EA;  --tx-2: #C9C2B4;  --tx-3: #A39B8C;
  --acc: #C19A4B;  --acc-tinta: #E2BF73;  --acc-suave: #2A2318;
  --foco: 0 0 0 2px #1A1713, 0 0 0 4px #E2BF73;
}
html:root .menu .nivel .sb { color: #E9E4DB; }
/* o selo da Boito é quadrado, como o logo que ele substitui: mesma caixa, sem deformar */
.entrada-faixa img, .menu .nivel img { object-fit: contain; border-radius: 0; }

/* cartão da "próxima largada" (Data de Largada): o verde fixo do cliente vira o grafite da Boito; a data em dourado é a ideia da tela */
.op-largada-topo { background: linear-gradient(160deg, #2E2A24 0%, #1F1C18 60%, #16140F 100%) !important; }
.op-largada-topo h2 { color: #D9D2C6 !important; }
.op-largada-topo p { color: #E9E4DB !important; }
.op-largada-topo .op-largada-frase em { color: #E2BF73 !important; }
.ap-topo small, .ap-corpo .ap-onde { color: #D9D2C6 !important; }
.ap-corpo p { color: #E9E4DB !important; }

/* "Como Funciona" dentro do app (public/marca/vitrine.js): rodapé da entrada, menu lateral e barra do topo do celular.
   É a ideia dourada da tela: o convite para conversar. */
.vt-como {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border-radius: 8px;
  background: linear-gradient(180deg, #CDA75A, #C19A4B); color: #231C0E; border: 1px solid #A47E33;
  font: 700 14px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; text-decoration: none; white-space: nowrap;
}
.vt-como:hover { filter: brightness(1.04); }
.vt-como:focus-visible { outline: 2px solid #1F1C18; outline-offset: 3px; }
.vt-entrada-caixa { display: flex; justify-content: center; padding: 0 16px 8px; }
/* no celular a entrada cabe numa tela sem rolar (regra da entrada): botão compacto, ainda com alvo de 32 px */
@media (max-width: 640px) { .vt-entrada-caixa { padding: 0 16px 4px; } .vt-entrada { min-height: 32px; padding: 4px 12px; font-size: 13px; } }
.vt-menu { margin: 8px 12px 0; }
.vt-topo { margin-left: auto; min-height: 36px; padding: 4px 12px; font-size: 13px; flex: 0 0 auto; }
@media (max-width: 560px) { .vt-topo { display: none; } }
.rotulo-dados { background: #F3ECDD !important; color: #7F5F1C !important; border: 1px solid #D9C49A !important; }
@media print { .vt-como { display: none; } }