/* Leque — site como área de trabalho (escritório digital). Fonte de verdade do desenho:
   design_handoff_leque_site/README.md + "Leque Desktop.dc.html". Sem script inline (CSP). */

:root {
  --paper: #f2f0eb; --sheet: #fbfaf7; --kraft: #d6ccb6; --archive: #e3dfd5; --archive-2: #ebe7de;
  --ink: #141a2b; --ink-2: #3a4050; --ink-3: #5b6070; --line: rgba(20, 26, 43, .14);
  --pending: #b34f00; --ok: #2f7339; --mid: #8a5a12; --bad: #b3261e;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --logo: Arial, Helvetica, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* tema (padrão = Leque); LequeTransition.applyTheme() troca os --leque-* em runtime */
  --leque-bg: #f2f0eb; --leque-header: rgba(242, 240, 235, .94); --leque-footer: #141e33; --leque-accent: #22232c; --leque-ink: #22232c; --leque-color: #22232c;
  --side-l: 132px; --side-r: 132px;
  --ui: #141a2b; /* cor da navegação: tinta no Escritório, cor do produto nos produtos */
}
html[data-leque-theme="precos"] { --leque-bg: #edf2f9; --leque-accent: #1656b2; --leque-ink: #0b2a5c; --leque-color: #1656b2; --ui: #1656b2; }
html[data-leque-theme="atende"] { --leque-bg: #f8f1ea; --leque-accent: #c25400; --leque-ink: #141e33; --leque-color: #e36200; --ui: #e36200; }
html[data-leque-theme="docs"] { --leque-bg: #ebf3f4; --leque-accent: #006075; --leque-ink: #003a47; --leque-color: #166e81; --ui: #166e81; }
html[data-leque-theme="dados"] { --leque-bg: #f2eff7; --leque-accent: #442074; --leque-ink: #26113f; --leque-color: #543380; --ui: #543380; }
html[data-leque-theme="fluxos"] { --leque-bg: #ecf4ef; --leque-accent: #006f38; --leque-ink: #003d1f; --leque-color: #167b49; --ui: #167b49; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; background: var(--leque-bg); transition: background .6s ease; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--leque-accent); outline-offset: 3px; }
.flex-col { display: flex; flex-direction: column; }
.dk-pular { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 14px; }
.dk-pular:focus { left: 8px; }
.dk-mono { font: 500 10px var(--mono); letter-spacing: .08em; color: var(--ink-3); }
.dk-ac { color: var(--leque-accent); }
.pendente { color: var(--pending); font-family: var(--mono); font-weight: 500; font-size: .86em; letter-spacing: .04em; }

@keyframes dkWin { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes dkStamp { 0% { opacity: 0; transform: rotate(-8deg) scale(1.5); } 60% { opacity: 1; transform: rotate(-8deg) scale(.96); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- raiz: papel + textura + marca d'água ---------- */
.dk-root {
  position: relative; height: 100vh; min-height: 560px; overflow: hidden;
  background-color: var(--leque-bg); transition: background-color .6s;
  background-image: repeating-linear-gradient(0deg, rgba(20, 26, 43, .028) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(20, 26, 43, .022) 0 1px, transparent 1px 4px), radial-gradient(ellipse at 68% 38%, rgba(255, 255, 255, .4), transparent 62%);
}
.dk-mark { position: absolute; right: 9%; bottom: 9%; opacity: .2; pointer-events: none; z-index: 1; }
.dk-fan { display: block; flex: none; overflow: visible; }

/* ---------- barras flutuantes ---------- */
.dk-top, .dk-bottom { position: absolute; left: 12px; right: 12px; z-index: 80; display: flex; align-items: center; background: rgba(242, 240, 235, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1.5px solid var(--ink); border-radius: 5px; box-shadow: 4px 4px 0 rgba(20, 26, 43, .16); }
.dk-top { top: 12px; height: 46px; justify-content: space-between; gap: 14px; padding: 0 10px 0 14px; }
.dk-top__esq { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dk-top__dir { display: flex; align-items: center; gap: 14px; }
.dk-logo { display: flex; align-items: center; gap: 8px; padding-right: 12px; }
.dk-logo__fan { display: inline-flex; }
.dk-logo__word { font: 800 20px/1 var(--logo); letter-spacing: -.03em; color: #22232c; }
.dk-logo__prod { display: flex; flex-direction: column; font: 800 13px/.95 var(--logo); letter-spacing: -.01em; }
.dk-logo__prod1 { color: var(--leque-ink); }
.dk-logo__prod2 { color: var(--leque-accent); }
.dk-nav { display: flex; gap: 2px; align-items: center; }
.dk-nav__item { all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 12px; font-size: 14.5px; font-weight: 500; border-radius: 3px; white-space: nowrap; }
.dk-nav__item:hover { background: rgba(20, 26, 43, .08); }
.dk-nav__item:focus-visible { outline: 2px solid var(--leque-accent); outline-offset: 1px; }
.dk-chip-comp, .dk-clock { white-space: nowrap; }
.dk-chip-comp { color: var(--ink-2); }
.dk-cta { display: inline-flex; align-items: center; line-height: 18px; margin-top: -3px; white-space: nowrap; background: var(--leque-accent); color: #fff; font-size: 14px; font-weight: 600; padding: 7px 14px; border: 1.5px solid var(--ink); border-radius: 4px; box-shadow: 0 3px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.dk-cta:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); color: #fff; }
.dk-menu { position: absolute; left: 150px; top: 62px; width: 280px; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 5px; box-shadow: 6px 6px 0 rgba(20, 26, 43, .2); z-index: 90; padding: 6px; animation: dkWin .3s var(--ease) both; }
.dk-menu[hidden] { display: none; }
.dk-menu__item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 3px; width: 100%; }
.dk-menu__item:hover { background: var(--archive-2); }
.dk-menu__item b { font-size: 14.5px; font-weight: 600; }
.dk-menu__fan { display: inline-flex; width: 30px; justify-content: center; }

.dk-bottom { bottom: 12px; min-height: 42px; gap: 8px; padding: 0 12px; overflow-x: auto; }
.dk-bottom .dk-mono { white-space: nowrap; }
.dk-switch { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 30px; border: 1.5px solid rgba(20, 26, 43, .25); background: transparent; border-radius: 3px; transition: transform .2s var(--ease); }
.dk-switch:hover { transform: translateY(-3px); }
.dk-switch[aria-current] { background: var(--sheet); border-color: var(--ink); }
.dk-bottom__sep { width: 1px; height: 24px; background: rgba(20, 26, 43, .3); margin: 0 6px; }
.dk-chips-win { display: contents; }
.dk-chipwin { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 30px; border: 1.5px solid rgba(20, 26, 43, .25); border-radius: 3px; color: var(--ui); transition: transform .2s var(--ease); }
.dk-chipwin:hover { transform: translateY(-3px); }
.dk-chipwin:focus-visible { outline: 2px solid var(--leque-accent); outline-offset: 2px; }
.dk-chipwin[aria-pressed="true"] { background: var(--sheet); border-color: var(--ink); }
.dk-bottom__dica { margin-left: auto; }

/* ---------- mesa (desktop) ---------- */
.dk-desk { position: absolute; inset: 0; z-index: 5; overflow: hidden; }
/* Grade de ícones: colunas de largura fixa e linhas alinhadas entre as colunas (todas as linhas têm 108 px: o rótulo mais alto, de 2 linhas, cabe). --rows vem do JS (quantas linhas cabem na altura da tela). Tudo em px inteiros. */
.dk-icons { position: absolute; top: 72px; bottom: 66px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 5), 108px); grid-auto-columns: 108px; gap: 10px 8px; align-content: start; justify-content: start; z-index: 6; }
.dk-icons--l { left: 14px; }
/* navegação na cor do produto (no Escritório --ui é a tinta e nada muda) */
html:not([data-leque-theme="leque"]) .dk-icons--l .dk-icon__tile { background: var(--ui); border-color: var(--leque-ink); color: #fff; }
.dk-icon.is-on .dk-icon__tile { box-shadow: 0 0 0 3px var(--leque-bg), 0 0 0 4.5px var(--ui), 3px 3px 0 rgba(20, 26, 43, .2); }
.dk-icon.is-on .dk-icon__label { background: var(--ui); }
/* WhatsApp: tile todo verde, fixo no canto inferior direito (fora da grade; --rows da direita reserva a última linha) */
.dk-icon--wpp { position: absolute; right: 14px; bottom: 66px; z-index: 6; }
.dk-icon[data-wpp] .dk-icon__tile { background: #1fa855; border-color: #0f6b34; color: #fff; }
/* a coluna mais cheia fica colada na borda; o ícone sozinho fica do lado de dentro (direction rtl inverte a ordem das colunas) */
.dk-icons--r { right: 14px; direction: rtl; justify-content: start; }
.dk-icons--r > * { direction: ltr; }
.dk-icon { width: 108px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; transition: transform .2s var(--ease); }
.dk-icon:hover { transform: translateY(-4px); }
.dk-icon__tile { width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; background: var(--sheet); color: var(--ink); border: 1.5px solid var(--ink); border-top: 1.5px solid var(--cor); border-radius: 6px; box-shadow: 3px 3px 0 rgba(20, 26, 43, .2); }
.dk-icon__tile--comp { border-top-width: 6px; }
.dk-icon[aria-pressed="true"] .dk-icon__tile, .dk-icon.is-on .dk-icon__tile { box-shadow: 0 0 0 3px var(--leque-bg), 0 0 0 4.5px var(--ink), 3px 3px 0 rgba(20, 26, 43, .2); }
.dk-icon__label { display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(251, 250, 247, .85); color: var(--ink); padding: 3px 5px; border-radius: 3px; max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.dk-icon.is-on .dk-icon__label { background: var(--ink); color: #fff; }
.dk-icon__label b { font-size: 13px; font-weight: 600; text-align: center; line-height: 16px; }
.dk-icon__tag { font: 600 8.5px/10px var(--mono); letter-spacing: .08em; }
.dk-mobile { display: none; }

/* ---------- janelas ---------- */
.dk-win { position: absolute; z-index: 10; left: calc(var(--side-l) + 12px); right: calc(var(--side-r) + 12px); max-width: 1000px; min-width: 0; margin-inline: auto; top: calc(70px + var(--n, 0) * 24px); bottom: 66px;
  display: flex; flex-direction: column; overflow: hidden; background: rgba(251, 250, 247, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: 6px 6px 0 rgba(20, 26, 43, .13); animation: dkWin .3s var(--ease) both; }
.dk-win[hidden] { display: none; }
.dk-win.is-top { box-shadow: 10px 10px 0 rgba(20, 26, 43, .24); }
.dk-win.is-welcome-leque { max-width: 760px; }
.dk-win.is-moved { margin: 0; right: auto; bottom: auto; max-width: none; }
.dk-win.is-max { left: 12px; right: 12px; top: 70px; bottom: 62px; max-width: none; margin: 0; transform: none; }
.dk-title { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 8px; border-bottom: 1.5px solid var(--ink); background: repeating-linear-gradient(0deg, var(--stripe, var(--kraft)) 0 2px, #f2f0eb 2px 4px); cursor: grab; touch-action: none; user-select: none; }
/* dentro de um produto a barra de título é da cor cheia do produto (sem listras); o Escritório mantém as listras kraft */
.dk-win--prod .dk-title { background: var(--leque-color); }
.dk-title__label { background: #f2f0eb; padding: 3px 10px; font: 600 10.5px var(--mono); letter-spacing: .08em; border: 1px solid var(--ink); }
.dk-title__btns { display: flex; gap: 6px; }
.dk-tbtn { all: unset; box-sizing: border-box; cursor: pointer; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: #f2f0eb; border: 1.5px solid var(--ink); font-size: 16px; line-height: 1; }
.dk-tbtn--max { font-size: 13px; }
.dk-tbtn:focus-visible { outline: 2px solid var(--leque-accent); outline-offset: 1px; }
.dk-body { flex: 1; min-height: 0; overflow: auto; }
.dk-body__in { max-width: 1000px; margin: 0 auto; padding: 26px 44px 44px; display: flex; flex-direction: column; gap: 22px; }
.dk-wd { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid rgba(20, 26, 43, .2); }
.dk-wd__marca { display: flex; align-items: center; gap: 10px; }
.dk-wd__word { font: 800 22px/1 var(--logo); letter-spacing: -.02em; color: var(--leque-ink); }
.dk-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.dk-cols--arte { grid-template-columns: minmax(0, 1fr) 300px; }
.dk-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dk-arte { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 1.5px solid var(--ink); border-radius: 50%; box-shadow: 6px 6px 0 rgba(20, 26, 43, .2); background: var(--archive); }

/* blocos de conteúdo */
.dk-kicker { font: 500 10px var(--mono); letter-spacing: .08em; color: var(--ink-3); }
.dk-h { margin: 0; font-size: var(--s); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
h1.dk-h { line-height: 1.03; letter-spacing: -.035em; }
.dk-p { margin: 0; font-size: var(--s); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.dk-items { border-top: 2px solid var(--ink); }
.dk-item { display: grid; grid-template-columns: var(--cols); gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(20, 26, 43, .12); font-size: 14px; line-height: 1.45; }
.dk-item__c { font: 500 10.5px var(--mono); color: var(--leque-accent); padding-top: 2px; }
.dk-item__d { color: var(--ink-2); }
.dk-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; align-items: end; background: var(--kraft); padding: 22px 10px 10px; }
.dk-ficha { display: flex; flex-direction: column; }
.dk-ficha__aba { align-self: flex-start; background: var(--leque-accent); color: #fff; font: 500 10px var(--mono); padding: 4px 8px; border-radius: 3px 3px 0 0; }
.dk-ficha__folha { background: var(--sheet); padding: 11px; min-height: 96px; display: flex; flex-direction: column; gap: 5px; }
.dk-ficha__folha b { font-size: 14.5px; font-weight: 600; }
.dk-ficha__folha span { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.dk-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border: 1px solid rgba(20, 26, 43, .2); }
.dk-compare > div { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dk-compare__hoje { background: var(--archive-2); }
.dk-compare__com { background: var(--sheet); }
.dk-compare b.dk-mono { font-weight: 600; }
.dk-compare__hoje span { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); border-top: 1px dashed rgba(20, 26, 43, .25); padding-top: 7px; }
.dk-compare__com span { font-size: 13.5px; line-height: 1.45; border-top: 1px solid rgba(20, 26, 43, .12); padding-top: 7px; }
.dk-faq { border-top: 2px solid var(--ink); }
.dk-faq__item { border-bottom: 1px solid rgba(20, 26, 43, .14); }
.dk-faq__q { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 40px 1fr 20px; gap: 6px; align-items: baseline; padding: 12px 0; font-size: 14.5px; font-weight: 600; }
.dk-faq__q:hover { color: var(--leque-accent); }
.dk-faq__q:focus-visible { outline: 2px solid var(--leque-accent); outline-offset: 2px; }
.dk-faq__sinal { font: 500 16px var(--mono); text-align: right; }
.dk-faq__a { padding: 0 20px 14px 46px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.dk-faq__a[hidden] { display: none; }
.dk-cta-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dk-btn { cursor: pointer; background: var(--sheet); color: var(--ink); border: 1px solid rgba(20, 26, 43, .5); padding: 12px 16px; font-weight: 600; font-size: 14.5px; border-radius: 3px; display: inline-block; text-align: center; font-family: inherit; }
.dk-btn:hover { filter: brightness(.92); }
.dk-btn--primario { background: var(--leque-accent); color: #fff; border-color: var(--leque-accent); }
.dk-btn--bloco { display: block; width: 100%; padding: 13px; font-size: 15px; }
.dk-form { display: flex; flex-direction: column; gap: 12px; }
.dk-form form { display: flex; flex-direction: column; gap: 11px; background: #fff; border: 1px solid rgba(20, 26, 43, .18); padding: 16px; }
.dk-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dk-chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 11px; font-size: 13px; border-radius: 3px; border: 1px solid rgba(20, 26, 43, .3); background: #fff; }
.dk-chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.dk-chip:focus-visible { outline: 2px solid var(--leque-accent); outline-offset: 1px; }
.dk-campo { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 500; }
.dk-campo input, .dk-campo textarea { font: inherit; font-weight: 400; font-size: 15px; padding: 10px; border: 1px solid rgba(20, 26, 43, .3); border-radius: 3px; background: #fff; color: var(--ink); resize: vertical; width: 100%; }
.dk-nota { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.dk-sent { background: #fff; border: 1px solid rgba(20, 26, 43, .18); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.dk-sent[hidden] { display: none; }
.dk-stamp { align-self: flex-end; border: 2.5px solid var(--leque-accent); color: var(--leque-accent); padding: 6px 10px; font: 600 11px var(--mono); letter-spacing: .08em; animation: dkStamp .55s .2s var(--ease) both; transform: rotate(-8deg); }

/* ---------- mobile / tela estreita (<1000px) ---------- */
@media (max-width: 999px) {
  body { overflow: auto; }
  .dk-root { height: auto; min-height: 100vh; overflow: visible; }
  .dk-desk { position: static; overflow: visible; }
  .dk-icons, .dk-icon--wpp { display: none; }
  .dk-nav, .dk-chip-comp, .dk-clock, .dk-bottom__j, .dk-chips-win, .dk-bottom__sep, .dk-bottom__dica { display: none; }
  .dk-top { position: fixed; }
  .dk-bottom { display: none; }
  .dk-mark { position: fixed; right: -60px; bottom: 40px; }
  .dk-mark .dk-fan { width: 300px; height: 300px; }
  .dk-mobile { display: flex; flex-direction: column; gap: 22px; padding: 70px 18px 90px; position: relative; z-index: 6; }
  .dk-mobile__txt { display: flex; flex-direction: column; gap: 12px; }
  .dk-mobile__h { margin: 0; font-size: 32px; line-height: 1.04; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; }
  .dk-mobile__p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
  .dk-mobile__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 20px 8px; }
  .dk-win { position: fixed; left: 0; right: 0; top: auto; bottom: 0; height: 86vh; max-width: none; margin: 0; border-radius: 10px 10px 0 0; box-shadow: 0 -14px 30px rgba(20, 26, 43, .3); z-index: 100; }
  .dk-win.is-top { box-shadow: 0 -14px 30px rgba(20, 26, 43, .3); }
  .dk-win--welcome, .dk-win:not(.is-top) { display: none; }
  .dk-win.is-welcome-leque { max-width: none; }
  .dk-title { cursor: default; touch-action: auto; }
  .dk-tbtn { width: 36px; height: 36px; }
  .dk-tbtn--max { display: none; }
  .dk-body__in { padding: 18px 18px 36px; }
  .dk-cols--arte { grid-template-columns: minmax(0, 1fr); }
  .dk-arte { display: none; }
  .dk-item { grid-template-columns: 1fr !important; gap: 2px; }
  .dk-menu { left: 12px; right: 12px; width: auto; }
}