/* ========================================================================== INVEE HUB — pages/doc.css · documentos legais (privacidade + termos) e páginas de erro (404 / 50x) Compartilhado: variações por classe no (.brand-invee / .brand-contabilizae). Carregar DEPOIS de /assets/css/base.css. 1 px do Figma @1920 = var(--u). ========================================================================== */ main{position:relative;overflow:hidden;isolation:isolate} main > section{position:relative;z-index:1} /* ---------- brilho de fundo (Ellipse #3B3B3B blur 500 do Figma) — só na Invee ---------- */ .pg-glow{position:absolute;z-index:0;display:block;pointer-events:none;border-radius:50%; width:calc(1300*var(--u));height:calc(1300*var(--u));right:calc(-420*var(--u));top:calc(-380*var(--u)); background:radial-gradient(circle closest-side,rgba(59,59,59,.78) 0%,rgba(59,59,59,.5) 24%,rgba(59,59,59,.22) 50%,rgba(59,59,59,.06) 76%,rgba(59,59,59,0) 100%)} /* ---------- cabeçalho da página (sem foto): sob o header fixo · eyebrow → h1 caixa-alta → lead ---------- */ .page-head{padding-top:calc(var(--hdr-h) + clamp(48px,calc(150*var(--u)),150px));padding-bottom:clamp(40px,calc(96*var(--u)),96px)} .page-head .h1{max-width:clamp(320px,calc(980*var(--u)),980px)} .page-head .lead{max-width:730px;margin-top:clamp(16px,calc(26*var(--u)),26px)} .brand-invee .page-head .lead{color:var(--gray-2)} .brand-contabilizae .page-head{background:var(--petrol);color:var(--white);--fg:var(--white);--line:var(--white);overflow:hidden;padding-bottom:clamp(56px,calc(120*var(--u)),120px)} .brand-contabilizae .page-head .container{position:relative;z-index:1} .brand-contabilizae .page-head .lead{color:rgba(255,255,255,.86)} .sunburst{position:absolute;z-index:0;pointer-events:none;user-select:none;left:calc(1080*var(--u));top:calc(-560*var(--u));width:calc(1294*var(--u));height:calc(1294*var(--u));max-width:none} /* ---------- documento: índice fixo (420) + texto (822, medida da metodologia) ---------- */ .doc{padding-top:clamp(48px,calc(100*var(--u)),100px);padding-bottom:clamp(80px,calc(170*var(--u)),170px)} .doc-grid{display:grid;grid-template-columns:clamp(220px,calc(420*var(--u)),420px) minmax(0,822px);gap:clamp(32px,calc(80*var(--u)),80px) clamp(24px,calc(120*var(--u)),120px);align-items:start} .doc-aside{position:sticky;top:calc(var(--hdr-h-scrolled) + 32px)} .doc-aside .eyebrow{color:var(--muted-2)} .brand-contabilizae .doc-aside .eyebrow{color:rgba(11,44,56,.6)} .doc-nav a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid rgba(128,128,128,.3);font-size:var(--fs-20);line-height:1.34;transition:color .25s,padding-left .25s var(--ease)} .doc-nav a:hover{color:var(--accent);padding-left:6px} .brand-contabilizae .doc-nav a:hover{color:#2E7D55} .doc-nav .ico{flex:0 0 auto;width:13px;height:13px} .doc-aside .small{margin-top:clamp(16px,calc(24*var(--u)),24px);color:var(--muted)} .brand-contabilizae .doc-aside .small{color:rgba(11,44,56,.7)} .doc-aside .small a{text-decoration:underline;text-underline-offset:3px} .doc-sec + .doc-sec{margin-top:clamp(56px,calc(110*var(--u)),110px);padding-top:clamp(40px,calc(72*var(--u)),72px);border-top:1px solid var(--line)} .brand-invee .doc-sec + .doc-sec{border-top-color:rgba(255,255,255,.35)} .brand-contabilizae .doc-sec + .doc-sec{border-top-color:rgba(11,44,56,.25)} .doc-sec > .h2-40{margin-bottom:clamp(12px,calc(16*var(--u)),16px)} .doc-sec .date{font-size:var(--fs-16);line-height:1.34;color:var(--muted);margin-bottom:clamp(24px,calc(40*var(--u)),40px)} .brand-contabilizae .doc-sec .date{color:rgba(11,44,56,.7)} /* texto corrido: 20/1.5 · títulos 24/700 caixa-alta (mesmo estilo dos títulos de card) */ .prose{font-size:var(--fs-20);line-height:1.5} .brand-invee .prose{color:var(--gray-2)} .prose h2,.prose h3{font-size:var(--fs-24);font-weight:700;line-height:1.34;letter-spacing:.03em;text-transform:uppercase;color:var(--fg);margin:clamp(32px,calc(52*var(--u)),52px) 0 clamp(10px,calc(14*var(--u)),14px)} .prose > h2:first-child,.prose > h3:first-child{margin-top:0} .prose p + p{margin-top:1em} .prose ul{margin-top:.6em;display:grid;gap:.55em} .prose li{position:relative;padding-left:30px} .prose li::before{content:"";position:absolute;left:0;top:.8em;width:16px;height:1px;background:var(--accent)} .brand-contabilizae .prose li::before{background:var(--petrol)} .prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .25s} .prose a:hover{color:var(--accent)} .brand-contabilizae .prose a:hover{color:#2E7D55} .prose strong{font-weight:700;color:var(--fg)} /* ---------- páginas de erro 404 / 50x: título grande + botão ---------- */ .err{min-height:clamp(560px,calc(900*var(--u)),900px);display:flex;align-items:center;padding-top:calc(var(--hdr-h) + clamp(48px,calc(120*var(--u)),120px));padding-bottom:clamp(72px,calc(160*var(--u)),160px)} .err .container{width:100%} .err .h1{font-size:clamp(40px,calc(96*var(--u)),96px);line-height:1.12;letter-spacing:.02em;max-width:clamp(320px,calc(1200*var(--u)),1200px);margin-top:clamp(8px,calc(16*var(--u)),16px)} .err .lead{max-width:640px;margin-top:clamp(16px,calc(30*var(--u)),30px)} .err .btn-row{margin-top:clamp(28px,calc(48*var(--u)),48px)} .err .btn{min-width:clamp(0px,calc(357*var(--u)),357px)} .brand-invee .err .lead{color:var(--gray-2)} .brand-contabilizae .err{background:var(--petrol);color:var(--white);--fg:var(--white);--line:var(--white);overflow:hidden} .brand-contabilizae .err .container{position:relative;z-index:1} .brand-contabilizae .err .lead{color:rgba(255,255,255,.86)} .brand-contabilizae .err .btn{min-width:clamp(220px,calc(316*var(--u)),316px);padding:0 clamp(24px,calc(43*var(--u)),43px) 0 clamp(20px,calc(35*var(--u)),35px)} .brand-contabilizae .err .sunburst{top:calc(-300*var(--u))} /* ---------- responsivo ---------- */ @media (max-width:1024px){ .pg-glow{width:900px;height:900px;right:-320px;top:-320px} .sunburst{left:44%;top:-34%;width:92vw;height:92vw} .doc-grid{grid-template-columns:1fr} .doc-aside{position:static} .doc-nav{display:flex;flex-wrap:wrap;gap:0 32px} .doc-nav a{border-bottom:0;padding:8px 0} .doc-aside .small{margin-top:8px} .err{min-height:0} } @media (max-width:640px){ .page-head .h1,.err .h1{max-width:none} .err .btn,.brand-contabilizae .err .btn{width:100%;min-width:0;justify-content:space-between} .doc-nav{flex-direction:column;gap:0} .doc-nav a{border-bottom:1px solid rgba(128,128,128,.3);padding:12px 0} }