/* 7cors - institucional Sistema: editorial corporativo sério, mono + acento grafite, tipografia Geist / Instrument Serif / Geist Mono. */ :root{ /* tokens - sobrescritos via React inline em data-attrs / vars */ --ink:#0E0F11; --paper:#F2EFEA; --paper-2:#EAE6DF; --rule:rgba(14,15,17,.14); --rule-strong:rgba(14,15,17,.32); --muted:rgba(14,15,17,.58); --accent:#3B3F45; /* graphite */ --accent-ink:#FFFFFF; --pad-section: 96px; --pad-block: 72px; --max: 1280px; --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --f-display: "Instrument Serif", "Times New Roman", Georgia, serif; --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } [data-theme="dark"]{ --ink:#F1EEE9; --paper:#0C0D0F; --paper-2:#15171A; --rule:rgba(241,238,233,.14); --rule-strong:rgba(241,238,233,.30); --muted:rgba(241,238,233,.58); } [data-density="compact"]{ --pad-section: 64px; --pad-block: 44px; } [data-density="regular"]{ --pad-section: 88px; --pad-block: 64px; } [data-density="spacious"]{ --pad-section: 120px; --pad-block: 84px; } *{box-sizing:border-box} html,body{margin:0;padding:0} html{background:var(--paper);color:var(--ink);} body{ font-family:var(--f-sans); font-size:16px; line-height:1.5; font-feature-settings:"ss01","cv11"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:default} ::selection{background:var(--ink);color:var(--paper)} /* ─── layout primitives ─── */ .wrap{max-width:var(--max);margin:0 auto;padding:0 40px} @media (max-width:720px){ .wrap{padding:0 24px} } .rule{border:0;border-top:.5px solid var(--rule);margin:0} .rule-strong{border-top-color:var(--rule-strong)} .eyebrow{ font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--muted); text-transform:none; font-weight:400; } .eyebrow::before{content:"// ";opacity:.55} .kicker{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .num{ font-family:var(--f-mono); font-size:11px; color:var(--muted); letter-spacing:.04em; } /* ─── header ─── */ .hdr{ position:sticky;top:0;z-index:50; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px); border-bottom:.5px solid var(--rule); } .hdr-inner{ display:flex;align-items:center;justify-content:space-between; height:64px; } .brand{ font-family:var(--f-mono); font-size:14px;letter-spacing:-.01em; font-weight:500; display:inline-flex;align-items:center;gap:0; } .brand .lt{color:var(--muted);font-weight:400} .brand b{font-weight:600} .brand-caret{ display:inline-block; margin-left:3px; color:var(--ink); font-weight:600; animation:brand-blink 1.05s steps(1) infinite; } @keyframes brand-blink{ 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .nav{display:flex;gap:32px;align-items:center} .nav a{font-size:13.5px;color:var(--muted);transition:color .15s} .nav a:hover{color:var(--ink)} .nav .cta{ color:var(--ink); border:.5px solid var(--rule-strong); padding:8px 14px;border-radius:999px; transition:background .15s, color .15s, border-color .15s; } .nav .cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px; border:.5px solid var(--rule-strong); border-radius:999px; color:var(--ink); background:transparent; cursor:default; transition:background .15s, color .15s, border-color .15s; position:relative; } .theme-toggle:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)} .theme-toggle .tt-icon{display:none} [data-theme="light"] .theme-toggle .tt-moon{display:block} [data-theme="dark"] .theme-toggle .tt-sun{display:block} @media (max-width:720px){ .theme-toggle{width:32px;height:32px} } @media (max-width:720px){ .nav a:not(.cta){display:none} } /* ─── hero ─── */ .hero{padding:var(--pad-block) 0 var(--pad-block)} .hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start} .hero h1{ margin:0; font-family:var(--f-display); font-weight:400; letter-spacing:-.02em; line-height:.96; font-size:clamp(44px, 7.2vw, 112px); text-wrap:balance; } .hero h1 em{font-style:italic;color:var(--muted)} .hero .lede{ font-size:20px;line-height:1.45;color:var(--ink); text-wrap:pretty;max-width:46ch; } .hero-meta{ display:flex;flex-direction:column;gap:8px; font-family:var(--f-mono);font-size:11.5px;color:var(--muted); line-height:1.5; } .hero-meta .row{display:flex;justify-content:space-between;gap:24px;border-bottom:.5px solid var(--rule);padding:8px 0} .hero-meta .row b{color:var(--ink);font-weight:500} .hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px} .btn{ display:inline-flex;align-items:center;gap:10px; padding:14px 22px; font-family:var(--f-sans);font-size:14px;font-weight:500; border-radius:0; letter-spacing:.005em; border:.5px solid var(--ink); transition:transform .12s ease, background .15s, color .15s; } .btn:hover{transform:translateY(-1px)} .btn-primary{background:var(--ink);color:var(--paper)} .btn-primary:hover{background:transparent;color:var(--ink)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)} .btn-ghost:hover{border-color:var(--ink)} .btn .arr{font-family:var(--f-mono);font-size:14px;line-height:1} /* ─── code fragment (hero) ─── */ .code-card{ grid-column:1 / -1; margin-top:80px; border:.5px solid var(--rule-strong); background:var(--paper); font-family:var(--f-mono); font-size:13px; line-height:1.7; display:grid;grid-template-rows:auto 1fr; } [data-theme="dark"] .code-card{background:color-mix(in srgb, var(--paper) 92%, var(--ink) 8%)} .code-card .cc-bar{ display:flex;align-items:center;justify-content:space-between; padding:12px 18px; border-bottom:.5px solid var(--rule); font-size:11.5px;color:var(--muted); } .code-card .cc-bar .cc-file{display:flex;align-items:center;gap:10px} .code-card .cc-bar .cc-dot{ width:8px;height:8px;border-radius:50%; background:var(--ink);opacity:.6; } .code-card .cc-bar .cc-meta{font-size:10.5px;letter-spacing:.04em} .code-card pre{ margin:0; padding:28px 32px 32px; white-space:pre; overflow-x:auto; color:var(--ink); font-feature-settings:"calt" 0; scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent; text-wrap:nowrap; } .code-card pre::-webkit-scrollbar{height:6px} .code-card pre::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:3px} .code-card .k{color:var(--ink);font-weight:500} /* keyword */ .code-card .c{color:var(--muted);font-style:italic} /* comment */ .code-card .s{color:var(--ink);opacity:.86} /* string */ .code-card .n{color:var(--ink);opacity:.86} /* number */ .code-card .p{color:var(--muted)} /* punctuation/braces */ .code-card .v{color:var(--ink)} /* identifier */ .code-card .a{color:var(--muted)} /* annotation/property */ @media (max-width:720px){ .code-card pre{padding:22px 20px;font-size:12px;line-height:1.7} .code-card .cc-bar{padding:10px 14px} } /* ─── terminal (hero) ─── */ .term{ border:.5px solid var(--rule-strong); background:#15171a; color:#ececec; display:grid;grid-template-rows:auto 1fr; font-family:var(--f-mono); box-shadow:0 1px 0 var(--rule-strong); } [data-theme="dark"] .term{ background:#0c0d0f; color:#ececec; border-color:color-mix(in srgb, #ececec 15%, transparent); } .term .term-bar{ display:flex;align-items:center;gap:8px; padding:9px 12px; border-bottom:.5px solid color-mix(in srgb, #ececec 12%, transparent); } .term .td{width:9px;height:9px;border-radius:50%;display:inline-block} .term .td-r{background:#ff5f56} .term .td-y{background:#ffbd2e} .term .td-g{background:#27c93f} .term .term-title{ margin-left:auto; font-size:10.5px;letter-spacing:.04em; color:color-mix(in srgb, #ececec 55%, transparent); } .term .term-body{ padding:18px 20px 22px; font-size:12.5px;line-height:1.7; min-height:340px; display:flex;flex-direction:column; } .term .term-line{margin-bottom:4px;display:flex;align-items:baseline;flex-wrap:wrap} .term .prompt{color:#5fd47f;margin-right:8px;font-weight:500} .term .cmd{color:#ececec} .term .term-out{ color:color-mix(in srgb, #ececec 60%, transparent); padding-left:14px;margin-bottom:2px; animation:term-fade .25s ease-out both; } .term .term-blank{height:8px} .term .term-step{ display:flex;align-items:center;gap:10px; padding:2px 0 2px 4px; font-feature-settings:"tnum" 1; animation:term-step-in .32s cubic-bezier(.2,.7,.25,1) both; } .term .step-n{ color:color-mix(in srgb, #ececec 45%, transparent); min-width:30px; } .term .step-name{ color:#ececec; min-width:80px; flex:none; } .term .step-bar{ flex:1;height:1px; background:linear-gradient(90deg, color-mix(in srgb, #ececec 55%, transparent) 0%, color-mix(in srgb, #ececec 18%, transparent) 65%, transparent 100%); border-radius:1px; transform-origin:left center; animation:term-bar-grow .55s cubic-bezier(.2,.8,.2,1) both; } .term .step-ok{ color:color-mix(in srgb, #ececec 70%, transparent); font-weight:500; animation:term-fade .25s ease-out .35s both; } .term .term-spec{ display:flex;align-items:center;gap:12px; padding:6px 0 0 4px; animation:term-fade .4s ease-out both; } .term .spec-dots{display:inline-flex;gap:5px} .term .spec-dot{ width:7px;height:7px;border-radius:50%; background:color-mix(in srgb, #ececec 55%, transparent); display:inline-block; animation:term-dot-in .4s cubic-bezier(.2,.8,.25,1) both; } .term .spec-text{ color:color-mix(in srgb, #ececec 55%, transparent); font-style:italic; font-size:12px; } .term .caret{ display:inline-block; width:8px;height:1.05em; background:#ececec; vertical-align:-2px; margin-left:2px; animation:term-blink 1s steps(1) infinite; } @keyframes term-blink{ 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @keyframes term-fade{ from { opacity:0; transform:translateY(-2px); } to { opacity:1; transform:translateY(0); } } @keyframes term-step-in{ from { opacity:0; transform:translateX(-6px); } to { opacity:1; transform:translateX(0); } } @keyframes term-bar-grow{ from { transform:scaleX(0); opacity:0; } to { transform:scaleX(1); opacity:1; } } @keyframes term-dot-in{ from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } } @media (max-width:720px){ .term .term-body{padding:14px;font-size:12px;min-height:320px} .term .step-name{min-width:70px} .term .step-n{min-width:26px} } .hero--editorial .hero-headline{grid-column:1 / span 7;display:flex;flex-direction:column;gap:0} .hero--editorial .hero-headline .eyebrow{margin-bottom:20px} .hero--editorial .hero-side{grid-column:9 / span 4;display:flex;flex-direction:column;gap:24px;padding-top:6px} .hero--editorial .hero-photo{ grid-column:1 / -1; aspect-ratio: 16 / 7; margin-top:64px; background:var(--paper-2); position:relative;overflow:hidden; } @media (max-width:900px){ .hero--editorial .hero-headline,.hero--editorial .hero-side{grid-column:1 / -1} } /* hero variant: statement */ .hero--statement{padding-top:calc(var(--pad-block) + 12px)} .hero--statement .stmt{ grid-column:1 / -1; font-family:var(--f-sans); font-weight:500; letter-spacing:-.025em; line-height:1.0; font-size:clamp(56px, 10vw, 168px); text-wrap:balance; margin:0; } .hero--statement .stmt em{font-family:var(--f-display);font-weight:400;font-style:italic;color:var(--muted);letter-spacing:-.015em} .hero--statement .stmt-foot{ grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);gap:24px; margin-top:56px;padding-top:24px;border-top:.5px solid var(--rule); } .hero--statement .stmt-foot .lede{grid-column:1 / span 6} .hero--statement .stmt-foot .acts{grid-column:8 / span 5;display:flex;align-items:flex-start;justify-content:flex-end;gap:10px;flex-wrap:wrap} @media (max-width:900px){ .hero--statement .stmt-foot .lede,.hero--statement .stmt-foot .acts{grid-column:1 / -1;justify-content:flex-start} } /* hero variant: manifesto */ .hero--manifesto .mf-left{grid-column:1 / span 7} .hero--manifesto .mf-right{grid-column:9 / span 4;display:flex;flex-direction:column;gap:0} .hero--manifesto .mf-right .row{ display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:18px 0;border-bottom:.5px solid var(--rule); } .hero--manifesto .mf-right .row:first-child{border-top:.5px solid var(--rule-strong)} .hero--manifesto .mf-right .row .k{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)} .hero--manifesto .mf-right .row .v{font-family:var(--f-sans);font-size:15px;font-weight:500} @media (max-width:900px){ .hero--manifesto .mf-left,.hero--manifesto .mf-right{grid-column:1 / -1} } /* ─── section scaffold ─── */ .section{padding:var(--pad-block) 0;border-top:.5px solid var(--rule)} .section-head{ display:grid;grid-template-columns:repeat(12,1fr);gap:24px; align-items:end;margin-bottom:48px; } .section-head .marker{grid-column:1 / span 4;display:flex;flex-direction:column;gap:8px} .section-head h2{ grid-column:5 / -1; margin:0; font-family:var(--f-display); font-weight:400; letter-spacing:-.015em; line-height:1.04; font-size:clamp(36px, 5vw, 72px); text-wrap:balance; } .section-head .marker .num{font-size:12px} @media (max-width:900px){ .section-head .marker,.section-head h2{grid-column:1 / -1} } /* ─── produtos ─── */ .product{ display:grid;grid-template-columns:repeat(12,1fr);gap:24px; border-top:.5px solid var(--rule-strong); padding-top:24px; } .product .pid{grid-column:1 / span 1;font-family:var(--f-mono);font-size:11.5px;color:var(--muted)} .product .pinfo{grid-column:2 / span 5;display:flex;flex-direction:column;gap:18px} .product .pname{ font-family:var(--f-display);font-weight:400;font-style:normal; font-size:clamp(40px,5.4vw,80px);letter-spacing:-.02em;line-height:.95;margin:0; } .product .ptag{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em} .product .pdesc{font-size:17px;line-height:1.5;max-width:42ch;color:var(--ink)} .product .pmeta{display:flex;flex-direction:column;gap:0;margin-top:8px} .product .pmeta .row{ display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:12px 0;border-bottom:.5px solid var(--rule);font-family:var(--f-mono);font-size:12px; } .product .pmeta .row .k{color:var(--muted)} .product .pmeta .row .v{color:var(--ink)} .product .plinks{display:flex;gap:18px;align-items:center;margin-top:14px;font-size:14px} .product .plinks a{display:inline-flex;align-items:center;gap:8px;padding-bottom:2px;border-bottom:.5px solid var(--rule-strong)} .product .plinks a:hover{border-bottom-color:var(--ink)} .product .pshot{ grid-column:8 / span 5; aspect-ratio: 4 / 5; background:var(--paper-2); position:relative;overflow:hidden; } .product .pshot--gallery{ background:transparent; overflow:visible; display:block; } .phone{ position:absolute; border-radius:32px; background:#0c0d0f; padding:6px; box-shadow: 0 0 0 .5px rgba(14,15,17,.18), 0 30px 60px -20px rgba(14,15,17,.35), 0 8px 18px -10px rgba(14,15,17,.25); overflow:hidden; } .phone img{ display:block;width:100%;height:100%;object-fit:cover;object-position:top; border-radius:26px; } .phone--front{ width:62%; aspect-ratio: 9 / 19.5; left:18%; top:8%; z-index:3; } .phone--back { width:54%; aspect-ratio: 9 / 19.5; right:0%; top:0%; z-index:2; transform:rotate(4deg); opacity:.92; } .phone--side { width:50%; aspect-ratio: 9 / 19.5; left:-2%; bottom:0%; z-index:1; transform:rotate(-5deg); opacity:.88; } [data-theme="dark"] .phone{ box-shadow: 0 0 0 .5px rgba(241,238,233,.14), 0 30px 60px -20px rgba(0,0,0,.7), 0 8px 18px -10px rgba(0,0,0,.5); } /* hint do carrossel - só aparece no mobile via media query */ .gallery-hint{display:none} @media (max-width:900px){ .product .pid{grid-column:1 / -1} .product .pinfo,.product .pshot{grid-column:1 / -1} .product .pshot{aspect-ratio: 4/3; margin-top:48px} .product .pshot--gallery{ aspect-ratio:auto; height:auto; margin:32px -24px 0; width:calc(100% + 48px); display:flex; flex-direction:row; gap:16px; overflow-x:auto; overflow-y:hidden; padding:8px 24px 12px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--rule-strong) transparent; cursor:grab; background:transparent; } .product .pshot--gallery:active{cursor:grabbing} .product .pshot--gallery::-webkit-scrollbar{height:3px;background:transparent} .product .pshot--gallery::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:2px} .product .pshot--gallery .phone{ position:relative; width:62vw;max-width:240px;min-width:200px; aspect-ratio: 9 / 19.5; flex-shrink:0; transform:none !important; opacity:1 !important; left:auto;right:auto;top:auto;bottom:auto; scroll-snap-align:center; } .product .pshot--gallery .phone:first-child{margin-left:4px} .product .pshot--gallery .phone:last-child{margin-right:4px} .product .pinfo > .gallery-hint, .product > .gallery-hint{ display:flex;align-items:center;gap:10px;justify-content:center; grid-column:1 / -1; margin-top:4px; font-family:var(--f-mono);font-size:10.5px;color:var(--muted); letter-spacing:.06em;text-transform:uppercase; } .gallery-hint{ display:flex;align-items:center;gap:10px;justify-content:center; grid-column:1 / -1; margin-top:4px; font-family:var(--f-mono);font-size:10.5px;color:var(--muted); letter-spacing:.06em;text-transform:uppercase; } .gallery-hint .gh-arr{font-size:13px;opacity:.6} } /* ─── serviços ─── */ .svc-grid{ display:grid;grid-template-columns:repeat(12,1fr);gap:0; border-top:.5px solid var(--rule-strong); } .svc{ grid-column:span 4; display:grid;grid-template-rows:auto 1fr auto; padding:32px 28px 28px 0; border-bottom:.5px solid var(--rule); border-right:.5px solid var(--rule); min-height:280px; } .svc:nth-child(3n){border-right:0;padding-right:0} .svc:nth-child(3n+1){padding-left:0} .svc:not(:nth-child(3n+1)){padding-left:28px} .svc .sn{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);margin-bottom:18px} .svc .st{ font-family:var(--f-sans);font-weight:500; font-size:22px;letter-spacing:-.01em;line-height:1.18;margin:0 0 10px; text-wrap:balance; } .svc .sd{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0;max-width:34ch} .svc .stags{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px} .svc .stags span{ font-family:var(--f-mono);font-size:10.5px;color:var(--muted); border:.5px solid var(--rule);padding:4px 8px; } @media (max-width:900px){ .svc-grid{grid-template-columns:repeat(2,1fr)} .svc{grid-column:span 1;padding:28px 20px !important;border-right:.5px solid var(--rule)} .svc:nth-child(2n){border-right:0;padding-right:0 !important} .svc:nth-child(2n+1){padding-left:0 !important} .svc:not(:nth-child(2n+1)){padding-left:20px !important} } @media (max-width:600px){ .svc-grid{grid-template-columns:1fr} .svc{grid-column:span 1;padding:24px 0 !important;border-right:0} .svc{padding-left:0 !important} } /* ─── stack ─── */ .stack-grid{ display:grid;grid-template-columns:repeat(12,1fr);gap:24px; } .stack-col{grid-column:span 3;display:flex;flex-direction:column;gap:0} .stack-col h3{ font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);font-weight:500;margin:0 0 12px;padding-bottom:8px;border-bottom:.5px solid var(--rule-strong); } .stack-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .stack-col li{ font-size:15px;line-height:1.4; padding:10px 0;border-bottom:.5px solid var(--rule); display:flex;justify-content:space-between;align-items:baseline;gap:12px; } .stack-col li .ann{font-family:var(--f-mono);font-size:11px;color:var(--muted)} @media (max-width:900px){ .stack-col{grid-column:span 6} } @media (max-width:520px){ .stack-col{grid-column:span 12} } /* ─── contato ─── */ .contact-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px} .contact-grid .left{grid-column:1 / span 6;display:flex;flex-direction:column;gap:32px} .contact-grid .right{grid-column:8 / span 5;display:flex;flex-direction:column;gap:0} .contact-grid .big{ font-family:var(--f-display);font-weight:400; font-size:clamp(40px,5.6vw,84px);letter-spacing:-.02em;line-height:.98;margin:0; text-wrap:balance; } .contact-grid .big em{font-style:italic;color:var(--muted)} .contact-grid .row{ display:flex;justify-content:space-between;align-items:baseline; padding:18px 0;border-bottom:.5px solid var(--rule);gap:16px; } .contact-grid .row:first-child{border-top:.5px solid var(--rule-strong)} .contact-grid .row .k{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .contact-grid .row .v{font-size:15.5px;text-align:right;font-weight:500} .contact-grid .row .v a{border-bottom:.5px solid var(--rule-strong)} .contact-grid .row .v a:hover{border-bottom-color:var(--ink)} @media (max-width:900px){ .contact-grid .left,.contact-grid .right{grid-column:1 / -1} } /* ─── footer ─── */ .statusbar{ display:flex;align-items:center;gap:10px; padding:8px 14px; border:.5px solid var(--rule-strong); background:var(--paper-2); font-family:var(--f-mono); font-size:10.5px;letter-spacing:.04em; color:var(--muted); margin-bottom:24px; overflow:hidden;white-space:nowrap; } .statusbar .sb-dot{ width:7px;height:7px;border-radius:50%; background:#3aa66b; box-shadow:0 0 0 3px color-mix(in srgb, #3aa66b 22%, transparent); animation:sb-pulse 2.4s ease-in-out infinite; flex:none; } @keyframes sb-pulse{ 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:.55; transform:scale(.85); } } .statusbar .sb-item{display:inline-flex;gap:6px;align-items:baseline} .statusbar .sb-k{text-transform:uppercase;color:var(--muted);opacity:.85} .statusbar .sb-v{color:var(--ink);font-weight:500} .statusbar .sb-sep{color:var(--rule-strong);opacity:.7} .statusbar .sb-spacer{flex:1} .statusbar .sb-right .sb-k{color:var(--muted);opacity:.7} @media (max-width:720px){ .statusbar{font-size:10px;gap:7px;padding:7px 10px} .statusbar .sb-right, .statusbar .sb-right + .sb-sep{display:none} .statusbar .sb-spacer{display:none} } @media (max-width:520px){ .statusbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .statusbar::-webkit-scrollbar{display:none} } .foot{ border-top:.5px solid var(--rule-strong); padding:48px 0 56px; display:grid;grid-template-columns:repeat(12,1fr);gap:24px; font-family:var(--f-mono);font-size:11.5px;color:var(--muted); } .foot .col-1{grid-column:1 / span 4} .foot .col-2{grid-column:5 / span 4} .foot .col-3{grid-column:9 / span 4;text-align:right} .foot a:hover{color:var(--ink)} @media (max-width:720px){ .foot{gap:20px} .foot .col-1,.foot .col-2,.foot .col-3{grid-column:1 / -1;text-align:left} } /* mobile: comprimir espaços globais, não importa a densidade escolhida */ @media (max-width:720px){ :root, [data-density="compact"], [data-density="regular"], [data-density="spacious"]{ --pad-section: 56px; --pad-block: 48px; } .hero{padding:48px 0 40px} .hero--statement{padding-top:56px} .hero h1, .hero--statement .stmt{line-height:1.0} .hero-actions{margin-top:20px;gap:8px} .hero-actions .btn{padding:12px 18px;font-size:13.5px} .section{padding:48px 0} .section-head{margin-bottom:28px;gap:8px} .section-head h2{margin-top:6px} .hero-meta{margin-top:24px} .hero-meta .row{padding:6px 0} .product{padding-top:20px} .product .pinfo{gap:14px} .product .pmeta .row{padding:8px 0} .product .pname{margin-top:4px} .stack-grid{gap:12px} .contact-grid{gap:8px} .contact-grid .left{gap:18px} .contact-grid .big{font-size:38px} .foot{padding:32px 0} }