/* ============================================================
   MENDES ORÇAMENTO · Base — reset, tipografia, layout do shell
   Mobile-first. Desktop é adaptação (ver media queries no fim).
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font); color:var(--text); background:var(--bg);
  background-image:var(--bg-grad); background-attachment:fixed;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; min-height:100dvh;
  transition:background-color var(--t),color var(--t);
}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}

/* ---------- scrollbar ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:9px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* smooth scroll */
html{scroll-behavior:smooth}
.scroll-area{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.14;letter-spacing:-.015em;color:var(--text)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.display{font-size:clamp(30px,8vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.muted{color:var(--text-2)}
.muted-3{color:var(--text-3)}

/* ---------- app shell ---------- */
.app{min-height:100dvh;display:flex;flex-direction:column}

/* mobile top status bar (brand) */
.appbar{
  position:sticky;top:0;z-index:var(--z-nav);
  height:calc(var(--topbar-h) + var(--safe-t));padding-top:var(--safe-t);
  display:flex;align-items:center;gap:12px;
  padding-left:max(16px,var(--safe-l));padding-right:max(12px,var(--safe-r));
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--border);
  transition:background var(--t),border-color var(--t);
}
.appbar__title{font-size:16px;font-weight:700;letter-spacing:-.01em;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar__sub{font-size:11px;color:var(--text-3);font-weight:500}

/* main scroll region */
.main{
  flex:1;position:relative;
  padding:var(--sp-5) max(16px,var(--safe-l)) calc(var(--bottomnav-h) + var(--safe-b) + 24px) max(16px,var(--safe-r));
  max-width:var(--maxw);width:100%;margin:0 auto;
}
.page{animation:pageIn .24s cubic-bezier(.2,.7,.2,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* cabeçalho no corpo desativado — a topbar é o cabeçalho único (título/subtítulo) */
.page__head{display:none}
.page__title{font-size:24px;font-weight:800;letter-spacing:-.02em}
.page__desc{color:var(--text-2);font-size:13.5px;margin-top:3px}

/* section */
.section{margin-top:var(--sp-7)}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:var(--sp-3)}
.section__title{font-size:15px;font-weight:700;letter-spacing:-.01em}
.section__link{font-size:12.5px;color:var(--primary);font-weight:600}

/* grid helpers */
.grid{display:grid;gap:var(--sp-3)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)}
.wrap{flex-wrap:wrap}
.spread{justify-content:space-between}
.center{align-items:center;justify-content:center}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ============================================================
   DESKTOP — layout ERP: sidebar + área ampla
   ============================================================ */
@media(min-width:1024px){
  body{font-size:15px}
  .app{flex-direction:row}
  .appbar{display:none}
  .main{
    margin-left:var(--sidebar-w);max-width:none;
    padding:var(--sp-6) var(--sp-8) var(--sp-9);
    min-height:100dvh;transition:margin-left var(--t);
  }
  .app[data-collapsed="true"] .main{margin-left:var(--sidebar-w-collapsed)}
  .page__title{font-size:30px}
  .page__desc{font-size:15px}
  .content-max{max-width:var(--maxw);margin:0 auto;width:100%}
}
@media(min-width:1440px){
  .main{padding-left:var(--sp-10);padding-right:var(--sp-10)}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}