/* ========================================================================== INVEE HUB — base.css · DESIGN SYSTEM fiel ao Figma "Site" (frames 1920 px) Fonte única: Hanken Grotesk variável (self-hosted) no lugar de HK Gothic. Escala fluida: 1 px do Figma (1920) = var(--u) = 0.0520833vw → clamp(). Marcas por classe no : .brand-invee .brand-contabilizae .brand-registrae .brand-educacao .brand-box (ver figma/spec/DESIGN_SYSTEM.md) Sem inline style, sem script inline (CSP default-src 'self'). ========================================================================== */ /* ---------- 1. Fontes ---------- */ @font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-var-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-var-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap} /* ---------- 2. Tokens globais ---------- */ :root{ --u:0.0520833vw; /* 1 px @1920 */ --ff:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif; --ease:cubic-bezier(.2,.7,.2,1); /* paleta Invee (Figma v2) */ --carbon:#1E1E1E;--carbon-2:#272727;--carbon-3:#3B3B3B;--gold:#A78F61; --white:#FFFFFF;--gray-1:#F3F3F3;--gray-2:#E8E8E8;--gray-3:#BBBBBB;--gray-4:#8E8E8E;--gray-5:#626262;--gray-6:#838383; /* paletas das outras marcas */ --petrol:#0B2C38;--petrol-2:#07222C;--mint:#94CBA6;--silver:#AAAAAA;--snow:#F6F7F9; --navy:#003559;--blue:#2E6BFF;--blue-2:#3EA0FE;--blue-3:#0062FF;--green:#72DC60; --cyan:#48A1B2;--cyan-line:#D6D6D6; --orange:#E96F09;--ink:#232323;--paper:#F5F5F5; /* escala tipográfica (px exatos do Figma em 1920, reduz proporcional) */ --fs-128:clamp(64px,calc(128*var(--u)),128px); --fs-96:clamp(52px,calc(96*var(--u)),96px); --fs-64:clamp(40px,calc(63.53*var(--u)),63.53px); --fs-48:clamp(30px,calc(48*var(--u)),48px); --fs-40:clamp(27px,calc(40*var(--u)),40px); --fs-36:clamp(25px,calc(36*var(--u)),36px); --fs-32:clamp(23px,calc(32*var(--u)),32px); --fs-31:clamp(22px,calc(31.5*var(--u)),31.5px); --fs-24:clamp(17px,calc(24*var(--u)),24px); --fs-btn:clamp(16px,calc(20.44*var(--u)),20.44px); --fs-20:clamp(16px,calc(20*var(--u)),20px); --fs-16:clamp(13px,calc(16*var(--u)),16px); --fs-15:clamp(13px,calc(15*var(--u)),15px); --fs-12:12px; --lh:1.34; /* line-height "auto" do Figma (64.3/48, 32.2/24, 26.8/20…) */ --fs-h1:var(--fs-48); /* Educação/Box: 40 */ /* layout */ --gutter:clamp(20px,calc(100*var(--u)),100px); /* x=100 @1920 */ --container:1920px; /* conteúdo 1720 + 2×100 */ --sec-pad:clamp(56px,calc(85*var(--u)),85px); /* ~170 px entre seções @1920 */ --hdr-h:140px; /* altura da faixa do header (conteúdo centrado em y≈70) */ --hdr-h-scrolled:96px; --btn-h:66px;--btn-r:6px;--btn-px:44px; /* Invee: 357×66 */ --card-r:14px;--tag-r:4px; /* tema padrão = Invee (sobrescrito por .brand-*) */ --bg:var(--carbon);--fg:var(--white);--accent:var(--gold); --surface:var(--carbon-2);--surface-2:var(--carbon-3);--light:var(--gray-2);--light-2:var(--gray-1); --muted:var(--gray-4);--muted-2:var(--gray-5);--muted-3:var(--gray-3);--line:var(--white); --hdr-fg:var(--white);--hdr-bg:rgba(30,30,30,.92);--hdr-solid:var(--carbon);--nav-ml:55px; --ftr-bg:var(--carbon);--ftr-fg:var(--gray-2);--ftr-text:var(--gray-5);--ftr-tagline:var(--gray-6);--ftr-social:var(--gray-6);--ftr-line:var(--gray-5);--ftr-legal:var(--gray-4); --btn-bg:var(--gold);--btn-fg:var(--white); } /* ---------- 3. Marcas ---------- */ .brand-invee{--bg:var(--carbon);--fg:var(--white);--accent:var(--gold)} .brand-contabilizae{ --bg:var(--white);--fg:var(--petrol);--accent:var(--mint);--dark:var(--petrol);--dark-2:var(--petrol-2); --surface:var(--petrol);--surface-2:var(--petrol-2);--light:var(--snow);--light-2:#F9F9F9; --muted:var(--silver);--muted-2:var(--silver);--muted-3:var(--silver);--line:var(--petrol); --hdr-fg:var(--white);--hdr-bg:rgba(11,44,56,.94);--hdr-solid:var(--petrol);--nav-ml:180px; --ftr-bg:var(--petrol-2);--ftr-fg:var(--white);--ftr-text:var(--silver);--ftr-tagline:var(--silver);--ftr-social:var(--silver);--ftr-line:var(--silver);--ftr-legal:var(--silver); --btn-bg:var(--mint);--btn-fg:var(--petrol);--btn-h:66px;--btn-r:6px;--btn-px:45px; /* 316×66 / 316×50 */ } .brand-registrae{ --bg:var(--white);--fg:var(--navy);--accent:var(--blue);--dark:var(--navy); --surface:var(--snow);--surface-2:#F9F9FA;--light:var(--snow);--light-2:#F9F9FA; --muted:rgba(0,53,89,.58);--muted-2:rgba(0,53,89,.58);--muted-3:var(--blue-2);--line:var(--navy); --hdr-fg:var(--navy);--hdr-bg:rgba(246,247,249,.94);--hdr-solid:var(--snow);--nav-ml:127px; --ftr-bg:var(--snow);--ftr-fg:var(--navy);--ftr-text:rgba(0,53,89,.58);--ftr-tagline:rgba(0,53,89,.58);--ftr-social:var(--navy);--ftr-line:var(--navy);--ftr-legal:rgba(0,53,89,.59); --btn-bg:var(--blue);--btn-fg:var(--white);--btn-h:50px;--btn-r:7px;--btn-px:35px; /* 313×50 */ } .brand-educacao{ --bg:var(--white);--fg:var(--carbon);--accent:var(--cyan); --surface:var(--snow);--surface-2:#163B4B;--light:var(--snow);--light-2:var(--white); --muted:var(--gray-4);--muted-2:var(--gray-5);--muted-3:var(--cyan-line);--line:var(--cyan-line); --hdr-fg:var(--white);--hdr-bg:rgba(22,59,75,.94);--hdr-solid:#163B4B;--nav-ml:89px;--hdr-h:184px; --ftr-bg:var(--snow);--ftr-fg:var(--carbon);--ftr-text:var(--gray-5);--ftr-tagline:var(--gray-6);--ftr-social:var(--gray-6);--ftr-line:var(--gray-5);--ftr-legal:var(--gray-4); --btn-bg:var(--cyan);--btn-fg:var(--white);--btn-h:50px;--btn-r:15px;--btn-px:40px;--fs-h1:var(--fs-40); } .brand-box{ --bg:var(--paper);--fg:var(--carbon);--accent:var(--orange);--dark:var(--ink); --surface:var(--white);--surface-2:var(--ink);--light:var(--paper);--light-2:var(--white); --muted:var(--gray-4);--muted-2:var(--gray-5);--muted-3:var(--gray-6);--line:var(--gray-2); --hdr-fg:var(--carbon);--hdr-bg:rgba(245,245,245,.96);--hdr-solid:var(--paper);--nav-ml:220px;--hdr-h:184px; --ftr-bg:var(--paper);--ftr-fg:var(--carbon);--ftr-text:var(--gray-5);--ftr-tagline:var(--gray-6);--ftr-social:var(--gray-6);--ftr-line:var(--gray-5);--ftr-legal:var(--gray-4); --btn-bg:var(--orange);--btn-fg:var(--white);--btn-h:63px;--btn-r:5px;--btn-px:31px; /* 341×63 (com seta) · centrados 251–255 */--fs-h1:var(--fs-40); } /* ---------- 4. Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--hdr-h-scrolled)} body{margin:0;font-family:var(--ff);font-size:var(--fs-20);line-height:var(--lh);color:var(--fg);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0} h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0} ul,ol{padding:0;list-style:none} input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} ::selection{background:var(--accent);color:var(--white)} /* ---------- 5. Layout ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .section{position:relative;padding-block:var(--sec-pad)} .section-lg{padding-block:clamp(72px,calc(120*var(--u)),120px)} .section-sm{padding-block:clamp(40px,calc(60*var(--u)),60px)} .bleed{width:100vw;margin-inline:calc(50% - 50vw)} .grid{display:grid;gap:var(--gap,calc(19*var(--u)))} .cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .gap-19{--gap:clamp(12px,calc(19*var(--u)),19px)} .gap-26{--gap:clamp(16px,calc(26*var(--u)),26px)} .gap-40{--gap:clamp(20px,calc(40*var(--u)),40px)} .flex{display:flex}.ai-c{align-items:center}.jc-sb{justify-content:space-between}.jc-c{justify-content:center}.wrap{flex-wrap:wrap} .ta-c{text-align:center}.ta-r{text-align:right} .mx-auto{margin-inline:auto} /* tema por seção (fundo/texto), independente da marca */ .theme-dark{--bg:var(--carbon);--fg:var(--white);--line:var(--white);background:var(--bg);color:var(--fg)} .theme-dark-2{--bg:var(--carbon-2);--fg:var(--white);--line:var(--white);background:var(--bg);color:var(--fg)} .theme-light{--bg:var(--white);--fg:var(--carbon);--line:var(--carbon);background:var(--bg);color:var(--fg)} .theme-gray{--bg:var(--gray-1);--fg:var(--carbon);--line:var(--carbon);background:var(--bg);color:var(--fg)} .theme-snow{--bg:var(--snow);background:var(--bg);color:var(--fg)} .theme-petrol{--bg:var(--petrol);--fg:var(--white);--line:var(--white);background:var(--bg);color:var(--fg)} .theme-navy{--bg:var(--navy);--fg:var(--white);--line:var(--white);background:var(--bg);color:var(--fg)} .theme-ink{--bg:var(--ink);--fg:var(--white);--line:var(--white);background:var(--bg);color:var(--fg)} /* ---------- 6. Tipografia ---------- */ /* HK Gothic (Figma) tem caixa-alta ~20% mais larga que a Hanken: tracking .03em aproxima a mancha; quebras de linha do Figma →
*/ .h1,.h2,.h2-40,.h3,.h3-32,.h4,.h5,.display,.display-xl{font-family:var(--ff);font-weight:700;line-height:var(--lh);text-transform:uppercase;letter-spacing:.03em} .h1{font-size:var(--fs-h1)} .h2{font-size:var(--fs-48)} .h2-40{font-size:var(--fs-40)} .h3{font-size:var(--fs-36)} .h3-31{font-size:var(--fs-31);font-weight:700;text-transform:uppercase;line-height:var(--lh);letter-spacing:.03em} .h3-32{font-size:var(--fs-32);font-weight:600} .h4{font-size:var(--fs-24)} .h5{font-size:var(--fs-20);letter-spacing:.15em} /* títulos do rodapé: 20/700, ls 3px */ .display{font-size:var(--fs-64);font-weight:500;letter-spacing:0} /* "01" da metodologia */ .display-xl{font-size:var(--fs-96);font-weight:500;letter-spacing:0} /* "+500" da Contabiliza-e */ .display-num{font-size:var(--fs-48);font-weight:400;line-height:var(--lh);text-transform:uppercase} /* "+350" (HK Gothic 400 48) */ .eyebrow{display:block;font-size:var(--fs-16);font-weight:700;line-height:var(--lh);letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:12px} .eyebrow-400{font-weight:400} .eyebrow.muted{color:var(--muted-2)} .lead{font-size:var(--fs-24);line-height:var(--lh);font-weight:400} .lead-15{font-size:var(--fs-24);line-height:1.5} .text{font-size:var(--fs-20);line-height:var(--lh)} .text-15{font-size:var(--fs-20);line-height:1.5} .small{font-size:var(--fs-16);line-height:var(--lh)} .caption{font-size:var(--fs-12);line-height:1.34} .t-light{font-weight:300}.t-medium{font-weight:500}.t-bold{font-weight:700} .t-upper{text-transform:uppercase} .t-accent{color:var(--accent)}.t-muted{color:var(--muted)}.t-muted-2{color:var(--muted-2)}.t-muted-3{color:var(--muted-3)}.t-white{color:var(--white)}.t-fg{color:var(--fg)} .measure{max-width:var(--measure,734px)} /* larguras de texto do Figma: h1 734, lead 730, cards 444, metodologia 822 */ .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} .sec-head .link-arrow{margin-bottom:6px} .sec-head.lined{padding-bottom:calc(48*var(--u));border-bottom:1px solid var(--line)} /* ---------- 7. Botões e links ---------- */ .btn{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:var(--btn-h);padding:0 var(--btn-px);border-radius:var(--btn-r);border:1px solid currentColor;background:transparent;color:inherit;font-size:var(--fs-btn);font-weight:500;line-height:1.34;letter-spacing:.02em;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)} .btn .ico{flex:0 0 auto;width:13px;height:13px;transition:transform .3s var(--ease)} .btn .ico-long{width:21px;height:15px} .btn:hover{background:rgba(255,255,255,.12)} .btn:hover .ico{transform:translate(2px,-2px)} .btn:hover .ico-long{transform:translateX(3px)} .btn:active{transform:translateY(1px)} .btn-sm{--btn-h:50px} .btn-lg{--btn-h:66px} .btn-center{justify-content:center;min-width:var(--btn-minw,255px);padding-inline:clamp(24px,calc(40*var(--u)),40px)} /* Educação/Box: 251–255 px */ .btn-solid,.btn-green,.btn-blue,.btn-orange,.btn-cyan,.btn-glass,.btn-dark,.btn-white{border-color:transparent} .btn-solid{background:var(--btn-bg);color:var(--btn-fg)} .btn-green{background:var(--mint);color:var(--petrol)} .btn-blue{background:var(--blue);color:var(--white)} .btn-orange{background:var(--orange);color:var(--white)} .btn-cyan{background:var(--cyan);color:var(--white)} .btn-dark{background:var(--carbon);color:var(--white)} .btn-white{background:var(--white);color:var(--carbon)} .btn-glass{background:rgba(0,0,0,.2);color:var(--white);border-radius:12px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .btn-solid:hover,.btn-green:hover,.btn-blue:hover,.btn-orange:hover,.btn-cyan:hover,.btn-dark:hover,.btn-white:hover{filter:brightness(1.07);box-shadow:0 8px 24px rgba(0,0,0,.14)} .btn-glass:hover{background:rgba(0,0,0,.34)} .btn-outline-dark{border-color:#000;color:#171717} .btn-outline-dark:hover{background:rgba(0,0,0,.06)} .btn-outline-light{border-color:var(--white);color:var(--white)} /* link com seta ↗ e sublinhado fino (Group "Conheça nossas soluções" 307×47 / "Saiba mais" 148×47) */ .link-arrow{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;padding:0 9px 19px 8px;border-bottom:1px solid currentColor;font-size:var(--fs-btn);font-weight:400;line-height:1.34;color:inherit;white-space:nowrap;transition:opacity .3s var(--ease)} .link-arrow .ico{flex:0 0 auto;width:13px;height:13px;transition:transform .3s var(--ease)} .link-arrow:hover{opacity:.78} .link-arrow:hover .ico{transform:translate(2px,-2px)} .link-arrow.tight{padding-bottom:12px} .btn-row{display:flex;align-items:center;gap:clamp(20px,calc(52*var(--u)),52px);flex-wrap:wrap} /* botão 104→461, link 513 → gap 52 */ /* hero: faixa full-bleed sob o header (Invee 1080 · Contabiliza-e 995 · Registra-e 993 · Educação 950 · Box ~1000) */ .hero{position:relative;min-height:var(--hero-h,clamp(620px,calc(1080*var(--u)),1080px));padding-top:var(--hero-pt,clamp(160px,calc(356*var(--u)),356px));padding-bottom:clamp(40px,calc(80*var(--u)),80px);overflow:hidden} .brand-contabilizae .hero{--hero-h:clamp(600px,calc(995*var(--u)),995px);--hero-pt:clamp(150px,calc(365*var(--u)),365px)} .brand-registrae .hero{--hero-h:clamp(600px,calc(993*var(--u)),993px);--hero-pt:clamp(140px,calc(295*var(--u)),295px)} .brand-educacao .hero{--hero-h:clamp(600px,calc(950*var(--u)),950px);--hero-pt:clamp(150px,calc(328*var(--u)),328px)} .brand-box .hero{--hero-h:clamp(600px,calc(1000*var(--u)),1000px);--hero-pt:clamp(150px,calc(361*var(--u)),361px)} .hero-copy{position:relative;z-index:2} .hero-copy .h1{max-width:var(--measure,734px)} .hero-copy .lead{max-width:var(--measure,730px);margin-top:26px} .hero-copy .btn-row{margin-top:clamp(20px,calc(40*var(--u)),40px)} .hero-media{position:absolute;top:0;right:0;bottom:0;width:calc(825*var(--u));min-width:38%;object-fit:cover;z-index:1} @media (max-width:1024px){.hero{--hero-h:auto;padding-top:calc(var(--hdr-h) + 48px)}.hero-media{position:relative;width:100%;min-width:0;height:auto;margin-top:32px}} /* ---------- 8. Header ---------- */ .hdr{position:fixed;inset:0 0 auto 0;z-index:100;color:var(--hdr-fg);height:var(--hdr-h);display:flex;align-items:center;transition:background .4s var(--ease),height .4s var(--ease),box-shadow .4s var(--ease)} .hdr.is-static{position:relative;inset:auto} /* previews / páginas sem hero */ .hdr.scrolled,.hdr.open{background:var(--hdr-bg);height:var(--hdr-h-scrolled);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(0,0,0,.06)} .hdr .container{display:flex;align-items:center;gap:0} .logo{display:inline-flex;align-items:center;flex:0 0 auto;--logo-h:59px} .logo img{height:var(--logo-h);width:auto;transition:height .4s var(--ease)} .brand-contabilizae .logo{--logo-h:48px} .brand-registrae .logo{--logo-h:76px;margin-left:-12px} /* o SVG do Figma tem 12 px de respiro interno */ .brand-educacao .logo{--logo-h:86px} .brand-box .logo{--logo-h:113px} .hdr.scrolled .logo{--logo-h:44px} .brand-educacao .hdr.scrolled .logo{--logo-h:60px} .brand-box .hdr.scrolled .logo{--logo-h:70px} .nav{display:flex;align-items:center;flex:1 1 auto;gap:clamp(24px,calc(50*var(--u)),50px);margin-left:var(--nav-ml)} .nav a{font-size:var(--fs-20);font-weight:400;line-height:1.34;white-space:nowrap;position:relative;padding:4px 0;color:inherit;opacity:1;transition:opacity .25s} .nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .35s var(--ease)} .nav a:not(.btn):hover::after{right:0} .nav .btn{margin-left:auto;padding:0 var(--btn-px);min-height:var(--btn-h);font-size:var(--fs-btn);font-weight:500;line-height:1.34} .nav .btn::after{display:none} .nav .btn + .btn{margin-left:0} .nav .nav-login{margin-left:auto;margin-right:clamp(0px,calc(12*var(--u)),12px)} /* gap 50 + 12 = 62 até o CTA */ .nav .nav-login + .btn{margin-left:0} .brand-box .hdr .nav-login{color:var(--paper)} .brand-box .hdr.scrolled .nav-login,.brand-box .hdr.open .nav-login{color:var(--carbon)} .burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin-left:auto;color:inherit} .burger i{display:block;width:26px;height:2px;background:currentColor;border-radius:1px;transition:transform .35s var(--ease),opacity .3s} .hdr.open .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)} .hdr.open .burger i:nth-child(2){opacity:0} .hdr.open .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)} @media (max-width:1440px){.nav{margin-left:clamp(24px,3vw,var(--nav-ml))}} @media (max-width:1280px){:root{--hdr-h:112px}.brand-educacao,.brand-box{--hdr-h:132px}.nav{gap:clamp(18px,2.2vw,36px)}.nav .btn{--btn-px:26px}} @media (max-width:1024px){ :root{--hdr-h:88px;--hdr-h-scrolled:80px} .brand-educacao,.brand-box{--hdr-h:96px} .brand-educacao .logo{--logo-h:64px}.brand-box .logo{--logo-h:78px}.logo{--logo-h:48px}.brand-contabilizae .logo{--logo-h:42px}.brand-registrae .logo{--logo-h:64px} .burger{display:flex} .hdr{display:block} .hdr .container{height:var(--hdr-h);transition:height .4s var(--ease)} .hdr.scrolled .container,.hdr.open .container{height:var(--hdr-h-scrolled)} .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px var(--gutter) 28px;background:var(--hdr-solid);box-shadow:0 24px 40px rgba(0,0,0,.25);transform:translateY(-8px);opacity:0;pointer-events:none;transition:.35s var(--ease);max-height:calc(100vh - var(--hdr-h-scrolled));overflow:auto} .hdr.open .nav{transform:none;opacity:1;pointer-events:auto} .hdr.open{background:var(--hdr-solid)} .nav a:not(.btn){padding:16px 0;border-bottom:1px solid rgba(128,128,128,.25);font-size:18px} .nav a:not(.btn)::after{display:none} .nav .btn,.nav .nav-login{margin:18px 0 0;justify-content:center} .nav .nav-login{margin:0;padding:16px 0;border-bottom:1px solid rgba(128,128,128,.25)} .brand-box .hdr .nav-login{color:var(--carbon)} } /* ---------- 9. Footer ---------- */ .ftr{background:var(--ftr-bg);color:var(--ftr-text);padding:52px 0 0;font-size:var(--fs-20);line-height:1.5} .ftr-grid{display:grid;grid-template-columns:596fr 477fr 402fr 245fr;gap:0 24px;min-height:448px} .ftr-brand{display:flex;flex-direction:column;min-height:280px;align-self:start} .ftr-logo{display:inline-flex;--logo-h:77px} .ftr-logo img{height:var(--logo-h);width:auto} .brand-contabilizae .ftr-logo{--logo-h:62px} .brand-registrae .ftr-logo{--logo-h:76px;margin-left:-12px} .brand-box .ftr-logo{--logo-h:113px} .ftr-tagline{max-width:374px;margin-top:38px;color:var(--ftr-tagline)} .ftr-social{display:flex;gap:22px;margin-top:auto;padding-top:16px;font-size:var(--fs-15);font-weight:600;letter-spacing:0;text-transform:uppercase;line-height:1.34;color:var(--ftr-social)} .ftr-social a{transition:color .25s}.ftr-social a:hover{color:var(--ftr-fg)} .ftr-col{padding-top:26px} .ftr-col h4{font-size:var(--fs-20);font-weight:700;letter-spacing:.15em;text-transform:uppercase;line-height:1.34;color:var(--ftr-fg);margin-bottom:22px} .ftr-col ul{line-height:2.22} /* 44.4 px @20 */ .ftr-col a{color:var(--ftr-text);transition:color .25s} .ftr-col a:hover{color:var(--ftr-fg)} .ftr-line{height:1px;background:var(--ftr-line);margin:0 -28px} .ftr-legal{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;padding:57px 0 52px;color:var(--ftr-legal)} .ftr-legal ul{display:flex;gap:clamp(24px,calc(56*var(--u)),56px)} .ftr-legal a{transition:color .25s}.ftr-legal a:hover{color:var(--ftr-fg)} .ftr-cnpj{font-size:14px;line-height:1.5;color:var(--ftr-legal);opacity:.85;padding:0 0 32px;margin-top:-30px;max-width:1200px} @media (max-width:1400px){.ftr-line{margin:0}} @media (max-width:1024px){ .ftr-grid{grid-template-columns:1fr 1fr 1fr;gap:24px 24px;min-height:0} .ftr-brand{grid-column:1 / -1;min-height:0} .ftr-social{margin-top:28px} .ftr-col{padding-top:0} } @media (max-width:640px){ .ftr{padding-top:40px} .ftr-grid{grid-template-columns:1fr 1fr;gap:28px 20px} .ftr-brand{grid-column:1 / -1} .ftr-col ul{line-height:2} .ftr-legal{padding:32px 0 36px;gap:12px} .ftr-cnpj{margin-top:-16px} } /* ---------- 10. Componentes ---------- */ /* cards 560×396 r14 (claro #E8E8E8 / escuro #272727) */ .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,calc(26*var(--u)),26px) clamp(12px,calc(19*var(--u)),19px)} .card{position:relative;display:flex;flex-direction:column;min-height:clamp(300px,calc(396*var(--u)),396px);padding:clamp(24px,calc(40*var(--u)),40px) clamp(24px,calc(46*var(--u)),46px) clamp(28px,calc(44*var(--u)),44px) clamp(24px,calc(42*var(--u)),42px);border-radius:var(--card-r);background:var(--surface);color:var(--fg);transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .card.light{background:var(--light);color:var(--carbon);--fg:var(--carbon)} .card.dark{background:var(--carbon-2);color:var(--white);--fg:var(--white)} .card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.18)} .card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:clamp(20px,calc(36*var(--u)),36px)} /* título em y+128 */ .card-top .eyebrow{margin:5px 0 0;letter-spacing:0} .card-stat{text-align:right} .card-stat b{display:block;font-size:var(--fs-24);font-weight:700;text-transform:uppercase;line-height:1.34} .card-stat small{display:block;font-size:var(--fs-12);line-height:1.34;color:var(--muted-2);margin-top:5px} .card .h4{margin-bottom:14px} .card p{color:var(--muted-2);max-width:444px} .card .link-arrow{margin-top:auto;padding-top:clamp(20px,calc(34*var(--u)),34px);align-self:flex-start} /* link em y+305 */ @media (max-width:1024px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.cards{grid-template-columns:1fr}} /* lista numerada (Metodologia): nº 63.5 px · rótulo eyebrow · título 31.5 · texto 24 + tags */ .numbered-list{border-top:1px solid var(--line)} .numbered-list > li{display:grid;grid-template-columns:138fr 767fr 815fr;gap:0 24px;align-items:start;padding:clamp(28px,calc(53*var(--u)),53px) 0 clamp(36px,calc(72*var(--u)),72px);border-bottom:1px solid var(--line)} .numbered-list > li:first-child{padding-top:clamp(40px,calc(94*var(--u)),94px)} .numbered-list .num{font-size:var(--fs-64);font-weight:500;line-height:1;color:var(--muted);margin-top:.06em} .numbered-list > li.active .num{color:var(--accent)} .numbered-list .eyebrow{color:var(--muted-2);margin-bottom:10px} .numbered-list .body{max-width:822px} .numbered-list .body p{font-size:var(--fs-24);line-height:1.34} .numbered-list .tags{margin-top:clamp(16px,calc(31*var(--u)),31px)} @media (max-width:1024px){.numbered-list > li{grid-template-columns:72px 1fr}.numbered-list .body{grid-column:2}} @media (max-width:640px){.numbered-list > li{grid-template-columns:1fr}.numbered-list .body{grid-column:1}} /* tags 33 px r4 (contorno #BBBBBB / sólida dourada) */ .tags{display:flex;flex-wrap:wrap;gap:19px} .tag{display:inline-flex;align-items:center;justify-content:center;height:33px;padding:0 clamp(16px,calc(34*var(--u)),34px);border-radius:var(--tag-r);border:1px solid var(--muted-3);color:var(--muted-3);font-size:var(--fs-16);line-height:1;white-space:nowrap} .tag-solid{border-color:var(--accent);background:var(--accent);color:var(--white)} /* stats: linha glass do hero (701×85 r22) e faixa de números (+350 …) */ .glass{background:rgba(0,0,0,.2);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)} .stat-rows{display:grid;gap:14px;max-width:701px} .stat-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:85px;padding:0 clamp(18px,calc(34*var(--u)),34px);border-radius:22px;background:rgba(0,0,0,.2);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:var(--white)} .stat-row .label{font-weight:300;color:#EBEBEB;font-size:var(--fs-20)} .stat-row .value{display:flex;align-items:baseline;gap:6px;white-space:nowrap} .stat-row .value b{font-size:var(--fs-24);font-weight:700;text-transform:uppercase} .stat-row .value small{font-size:var(--fs-20);font-weight:300;color:var(--gray-3)} .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .stats .value{font-size:var(--fs-48);font-weight:400;line-height:1.34;color:var(--accent);text-transform:uppercase} .stats .value.xl{font-size:var(--fs-96);font-weight:500;color:var(--fg)} .stats .label{margin-top:8px;font-size:var(--fs-24);line-height:1.34;color:var(--fg)} @media (max-width:1024px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}} /* fundos especiais */ .bg-edu{background:linear-gradient(135deg,#BCD6DB 0%,#3D8397 45%,#163B4B 100%);color:var(--white);--fg:var(--white)} /* linha divisória do Figma (1 px, cor da marca) */ .rule{height:1px;background:var(--line);border:0;margin:0} /* ---------- 11. Formulário (contato) ---------- */ .field{display:grid;gap:8px} .field label{font-size:var(--fs-16);font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--accent)} .field input,.field select,.field textarea{width:100%;min-height:56px;padding:12px 18px;border:1px solid var(--muted-3);border-radius:var(--btn-r);background:transparent;color:inherit;font-size:var(--fs-20)} .field textarea{min-height:140px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent)} .form-msg{min-height:1.5em;font-size:var(--fs-16)} .form-msg.err{color:#E05A4E}.form-msg.ok{color:var(--accent)} .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0} /* ---------- 12. Revelar ao rolar (site.js: .rv → .in) ---------- */ .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)} .rv.in{opacity:1;transform:none} .no-js .rv{opacity:1;transform:none} @media print{.rv{opacity:1;transform:none}.hdr{position:static}.burger{display:none}} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important} .rv{opacity:1;transform:none} } /* ---------- 13. Utilidades de espaçamento (px do Figma @1920, fluido) ---------- */ .mt-12{margin-top:12px}.mt-20{margin-top:clamp(14px,calc(20*var(--u)),20px)}.mt-32{margin-top:clamp(20px,calc(32*var(--u)),32px)}.mt-48{margin-top:clamp(28px,calc(48*var(--u)),48px)}.mt-64{margin-top:clamp(36px,calc(64*var(--u)),64px)}.mt-100{margin-top:clamp(48px,calc(100*var(--u)),100px)} .mb-12{margin-bottom:12px}.mb-20{margin-bottom:clamp(14px,calc(20*var(--u)),20px)}.mb-32{margin-bottom:clamp(20px,calc(32*var(--u)),32px)}.mb-48{margin-bottom:clamp(28px,calc(48*var(--u)),48px)}.mb-64{margin-bottom:clamp(36px,calc(64*var(--u)),64px)} .pt-0{padding-top:0}.pb-0{padding-bottom:0} .hide-mobile{display:revert} @media (max-width:640px){.hide-mobile{display:none}.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}.btn{white-space:normal;text-align:left}.btn-row{gap:16px}} @media (min-width:641px) and (max-width:1024px){.cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}