/* ——— Projeto overlay ——— */
.proj{position:fixed;inset:0;z-index:80;background:var(--p-bg,#111);color:var(--p-fg,#fff);overflow-y:auto;overscroll-behavior:contain;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.proj-bar{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem var(--gutter-r) 1rem var(--gutter);background:var(--p-bg);border-bottom:1px solid color-mix(in srgb,var(--p-fg) 14%,transparent)}
.proj-badge{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.proj-badge b{background:var(--p-fg);color:var(--p-bg);padding:.3rem .55rem;font-weight:500}
.proj-badge span{opacity:.75;text-transform:none;letter-spacing:.02em;font-size:.78rem}
.proj-close{all:unset;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;padding:.55rem .8rem;white-space:nowrap}
.proj-close:focus-visible{outline:2px solid var(--p-accent);outline-offset:3px}
.proj-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);padding:clamp(2rem,5vw,4.5rem) var(--gutter-r) clamp(2rem,5vw,4rem) var(--gutter);max-width:1480px;margin-inline:auto}
.proj-cat{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin:0}
.proj-title{font-family:var(--p-font);font-weight:var(--p-w,600);font-size:clamp(2.6rem,6vw,5.6rem);line-height:.95;letter-spacing:-.02em;margin:.6rem 0 1.4rem;text-wrap:balance}
.proj-concept{font-size:1.12rem;line-height:1.55;max-width:46ch;opacity:.88;margin:0 0 2rem}
.proj dl{display:grid;gap:1.1rem;margin:0 0 2rem}
.proj dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.proj dd{margin:.25rem 0 0;line-height:1.5}
.swatches{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.swatches i{width:28px;height:28px;border:1px solid color-mix(in srgb,var(--p-fg) 25%,transparent);display:block}
.proj-cta{display:inline-flex;gap:.8rem;align-items:center;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;background:var(--p-accent);color:var(--p-on,#000);padding:1rem 1.3rem;border:0;cursor:pointer}
.proj-cta:hover{filter:brightness(1.1)}
.proj-demo{min-width:0;border:1px solid color-mix(in srgb,var(--p-fg) 16%,transparent);background:color-mix(in srgb,var(--p-fg) 4%,transparent);padding:clamp(1rem,2.4vw,2rem);align-self:start;position:sticky;top:90px}
.demo-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin:0 0 1rem;display:flex;justify-content:space-between;gap:1rem}
.proj-nav{display:flex;justify-content:space-between;gap:1rem;padding:1.5rem var(--gutter-r) 2.5rem var(--gutter);max-width:1480px;margin-inline:auto;border-top:1px solid color-mix(in srgb,var(--p-fg) 14%,transparent)}
.proj-nav button{all:unset;cursor:pointer;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.proj-nav button:hover{opacity:1;text-decoration:underline}
.proj-nav button:focus-visible{outline:2px solid var(--p-accent);outline-offset:3px}
@media (max-width:900px){.proj-grid{grid-template-columns:1fr}.proj-demo{position:static}.proj-badge span{display:none}}
/* demo internals */
.d-row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.d-range{width:100%;accent-color:var(--p-accent)}
.d-btn{all:unset;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.55rem .8rem;border:1px solid currentColor}
.d-btn[aria-pressed="true"]{background:var(--p-accent);color:var(--p-on);border-color:var(--p-accent)}
.d-btn:focus-visible{outline:2px solid var(--p-accent);outline-offset:2px}
.d-small{font-size:.85rem;opacity:.7}

.proj-actions{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center}
.proj-link{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:inherit;opacity:.8;text-underline-offset:4px}
.proj-link:hover{opacity:1}
.proj-cta:focus-visible,.proj-link:focus-visible{outline:2px solid var(--p-fg);outline-offset:3px}
.proj-demo img{display:block;width:100%;height:auto}
.proj-badge[hidden]{display:none!important}
/* Página própria do projeto */
.proj--page{position:relative;inset:auto;z-index:auto;overflow:visible;min-height:100vh;padding-top:calc(68px + env(safe-area-inset-top,0px))}
.admin-bar .proj--page{padding-top:calc(68px + 32px)}
.proj-bar--page{position:relative;top:auto}
.proj--page .proj-close{text-decoration:none}
.proj-body{max-width:72ch;margin:0 auto;padding:0 var(--gutter-r) 3rem var(--gutter)}
.proj-nav a{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:inherit;opacity:.8;text-decoration:none}
.proj-nav a:hover{opacity:1;text-decoration:underline}

/* Botão "→" do quadro ERP usa all:unset inline: o foco precisa vencer o estilo inline. */
.kmv:focus-visible{outline:2px solid var(--p-accent)!important;outline-offset:2px!important;border-radius:2px}
.kcard:focus-within{box-shadow:0 0 0 2px var(--p-accent)!important}