/* ============================================================================ DIGIMAIS TECNOLOGIA — Design System 2027 Fonte da verdade dos tokens. Todas as páginas consomem este arquivo. Estilo: Trust & Authority + Minimal (produto: B2B Service / SaaS) Paleta base: navy profundo + azul Digimais + cinza neutro Accent: trocado por página via [data-product] no ========================================================================= */ /* ─────────────────────────────────────────────────────── TOKENS: TIPO/RITMO */ :root{ --font-display:"Sora","Segoe UI",system-ui,sans-serif; --font-ui:"Inter","Segoe UI",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace; --t-hero:clamp(2.25rem,5vw,3.75rem); --t-h2:clamp(1.75rem,3.4vw,2.625rem); --t-h3:1.25rem; --t-lede:clamp(1rem,1.4vw,1.1875rem); --t-body:1rem; --t-small:0.9375rem; --t-micro:0.75rem; --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-7:72px; --space-8:96px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px; --ease:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.32,.72,0,1); --dur:.22s; --nav-h:72px; } /* ───────────────────────────────────────────────── TOKENS: COR (tema escuro) */ :root, :root[data-theme="dark"]{ --bg:#070B14; --surface:#0E1524; --surface-2:#141D30; --glass:rgba(255,255,255,.045); --glass-line:rgba(255,255,255,.09); --nav:rgba(7,11,20,.72); --nav-solid:rgba(7,11,20,.95); --fg:#E8EEF9; --fg-muted:#94A3B8; --fg-faint:#64748B; --border:#1C2740; --border-strong:#2B3A5A; --ok:#34D399; --warn:#FBBF24; --danger:#F87171; --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 12px 32px -18px rgba(0,0,0,.9); --shadow-lg:0 40px 80px -46px rgba(0,0,0,.95); /* accent padrão = azul Digimais (marca-mãe) */ --accent:#2563EB; --accent-ink:#FFFFFF; --accent-text:#60A5FA; --accent-soft:rgba(37,99,235,.14); --accent-line:rgba(96,165,250,.32); --accent-glow:rgba(37,99,235,.20); } @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ --bg:#FFFFFF; --surface:#F8FAFC; --surface-2:#F1F5F9; --glass:rgba(255,255,255,.72); --glass-line:rgba(15,23,42,.08); --nav:rgba(255,255,255,.8); --nav-solid:rgba(255,255,255,.97); --fg:#0F172A; --fg-muted:#475569; --fg-faint:#64748B; --border:#E2E8F0; --border-strong:#CBD5E1; --ok:#047857; --warn:#B45309; --danger:#DC2626; --shadow-sm:0 1px 2px rgba(15,23,42,.06); --shadow-md:0 12px 32px -20px rgba(15,23,42,.4); --shadow-lg:0 40px 80px -50px rgba(15,23,42,.45); --accent:#2563EB; --accent-ink:#FFFFFF; --accent-text:#1D4ED8; --accent-soft:rgba(37,99,235,.09); --accent-line:rgba(37,99,235,.28); --accent-glow:rgba(37,99,235,.16); } } :root[data-theme="light"]{ --bg:#FFFFFF; --surface:#F8FAFC; --surface-2:#F1F5F9; --glass:rgba(255,255,255,.72); --glass-line:rgba(15,23,42,.08); --nav:rgba(255,255,255,.8); --nav-solid:rgba(255,255,255,.97); --fg:#0F172A; --fg-muted:#475569; --fg-faint:#64748B; --border:#E2E8F0; --border-strong:#CBD5E1; --ok:#047857; --warn:#B45309; --danger:#DC2626; --shadow-sm:0 1px 2px rgba(15,23,42,.06); --shadow-md:0 12px 32px -20px rgba(15,23,42,.4); --shadow-lg:0 40px 80px -50px rgba(15,23,42,.45); --accent:#2563EB; --accent-ink:#FFFFFF; --accent-text:#1D4ED8; --accent-soft:rgba(37,99,235,.09); --accent-line:rgba(37,99,235,.28); --accent-glow:rgba(37,99,235,.16); } /* ─────────────────────────────────────────── ACCENT POR PRODUTO Todo componente usa --accent/--accent-text. Trocar aqui repinta a página. Todas as combinações fill+ink passam 4.5:1 (WCAG AA para texto normal). */ /* e-notadigital — azul Digimais (herda o padrão, declarado para clareza) */ :root[data-product="enota"]{ --accent:#2563EB; --accent-text:#60A5FA; --accent-soft:rgba(37,99,235,.14); --accent-line:rgba(96,165,250,.32); --accent-glow:rgba(37,99,235,.20); } :root[data-product="enota"][data-theme="light"]{ --accent-text:#1D4ED8; --accent-soft:rgba(37,99,235,.09); --accent-line:rgba(37,99,235,.28); } /* digiwhats — verde conversa */ :root[data-product="digiwhats"]{ --accent:#047857; --accent-text:#34D399; --accent-soft:rgba(16,185,129,.14); --accent-line:rgba(52,211,153,.32); --accent-glow:rgba(16,185,129,.20); } :root[data-product="digiwhats"][data-theme="light"]{ --accent-text:#047857; --accent-soft:rgba(4,120,87,.09); --accent-line:rgba(4,120,87,.28); --accent-glow:rgba(4,120,87,.14); } @media (prefers-color-scheme:light){ :root[data-product="digiwhats"]:not([data-theme="dark"]){ --accent-text:#047857; --accent-soft:rgba(4,120,87,.09); --accent-line:rgba(4,120,87,.28); --accent-glow:rgba(4,120,87,.14); } } /* movepay — índigo (mesmo accent do site movepay.com.br) */ :root[data-product="movepay"]{ --accent:#4F46E5; --accent-text:#A5B4FC; --accent-soft:rgba(99,102,241,.16); --accent-line:rgba(165,180,252,.32); --accent-glow:rgba(99,102,241,.22); } :root[data-product="movepay"][data-theme="light"]{ --accent-text:#4338CA; --accent-soft:rgba(79,70,229,.09); --accent-line:rgba(79,70,229,.28); --accent-glow:rgba(79,70,229,.16); } @media (prefers-color-scheme:light){ :root[data-product="movepay"]:not([data-theme="dark"]){ --accent-text:#4338CA; --accent-soft:rgba(79,70,229,.09); --accent-line:rgba(79,70,229,.28); --accent-glow:rgba(79,70,229,.16); } } /* ══════════════════════════════════════════════════════════════════════ BASE */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)} body{ margin:0;background:var(--bg);color:var(--fg); font-family:var(--font-ui);font-size:var(--t-body);line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background-color .35s var(--ease-soft),color .35s var(--ease-soft); } body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(ellipse 720px 520px at 12% -6%,var(--accent-glow),transparent 62%), radial-gradient(ellipse 520px 420px at 88% 12%,var(--accent-soft),transparent 60%); opacity:.9;transition:opacity .35s var(--ease-soft); } :root[data-theme="light"] body::before{opacity:.5} img,svg{display:block;max-width:100%} h1,h2,h3,h4,h5,h6,p,figure,dl,dd{margin:0} ul,ol{margin:0;padding:0;list-style:none} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:var(--r-sm)} .wrap{width:min(1180px,100% - var(--space-5));margin-inline:auto} @media (min-width:720px){.wrap{width:min(1180px,100% - var(--space-6) * 2)}} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .skip{position:absolute;left:-9999px} .skip:focus{left:var(--space-3);top:var(--space-3);z-index:200;background:var(--surface); padding:12px 20px;border-radius:var(--r-pill);border:1px solid var(--accent)} .section{padding:var(--space-8) 0} .section-alt{background:var(--surface);border-block:1px solid var(--border)} /* ═══════════════════════════════════════════════════════════════════ TIPO/UI */ .pill{ display:inline-flex;align-items:center;gap:8px; padding:6px 14px;border-radius:var(--r-pill); border:1px solid var(--accent-line);background:var(--accent-soft); font-size:var(--t-micro);font-weight:600;letter-spacing:.04em;color:var(--accent-text); } .pill-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none; animation:pulse 2.6s var(--ease-soft) infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.45)}} .h2{font-family:var(--font-display);font-size:var(--t-h2);font-weight:700; line-height:1.1;letter-spacing:-.03em;text-wrap:balance} .lede{font-size:var(--t-lede);color:var(--fg-muted);line-height:1.6;max-width:58ch;text-wrap:pretty} .accent{color:var(--accent-text)} .sec-head{display:grid;gap:var(--space-3);margin-bottom:var(--space-6);max-width:64ch} .sec-head.ctr{justify-items:center;text-align:center;margin-inline:auto} .sec-head.ctr .lede{text-align:center} /* ══════════════════════════════════════════════════════════════════ BOTÕES */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:46px;padding:11px 22px;cursor:pointer;text-decoration:none;white-space:nowrap; font-size:var(--t-small);font-weight:600;letter-spacing:-.01em; border-radius:var(--r-md);border:1px solid transparent; transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease), color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform .1s var(--ease); } .btn svg{width:17px;height:17px;flex:none} .btn:active{transform:scale(.98)} .btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn-primary:hover{box-shadow:0 8px 24px -8px var(--accent-glow),0 0 0 4px var(--accent-soft)} .btn-ghost{background:transparent;color:var(--fg);border-color:var(--border-strong)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)} .btn-quiet{background:var(--surface-2);color:var(--fg);border-color:var(--border)} .btn-quiet:hover{border-color:var(--border-strong)} .btn-lg{min-height:52px;padding:14px 28px;font-size:1rem} .btn-sm{min-height:40px;padding:9px 16px;font-size:var(--t-micro)} .btn-block{width:100%} .link-arrow{ display:inline-flex;align-items:center;gap:7px;min-height:44px; color:var(--accent-text);text-decoration:none;font-weight:600;font-size:var(--t-small); transition:gap var(--dur) var(--ease); } .link-arrow svg{width:16px;height:16px;flex:none} .link-arrow:hover{gap:12px} /* ═════════════════════════════════════════════════════════════════════ TOPO */ .topbar{ position:fixed;top:0;inset-inline:0;z-index:100;height:var(--nav-h); display:flex;align-items:center; background:var(--nav);backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid var(--border); transition:background-color .3s var(--ease-soft); } .topbar.solid{background:var(--nav-solid)} .topbar .wrap{display:flex;align-items:center;gap:var(--space-4)} /* ───────────────────────────────────────────────────────────────── MARCA Arquivo original: brand/Logo_Digimais.png (160×56, navy #222951 + ciano #26AAE2). assets/logo-digimais.png é a cópia fiel; a versão -branco tem o navy trocado por branco e mantém o “+” ciano, para o tema escuro. */ .brandlink{display:inline-flex;align-items:center;min-height:44px;text-decoration:none} .marca-img{display:block;width:auto;height:38px} .foot .marca-img{height:52px} /* troca a arte conforme o tema — o navy sumiria no fundo escuro */ .marca-claro{display:none} .marca-escuro{display:block} :root[data-theme="light"] .marca-claro{display:block} :root[data-theme="light"] .marca-escuro{display:none} @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .marca-claro{display:block} :root:not([data-theme="dark"]) .marca-escuro{display:none} } .navlinks{display:none;gap:var(--space-5);margin-left:auto} .navlinks a{display:inline-flex;align-items:center;min-height:44px; font-size:var(--t-small);font-weight:500;color:var(--fg-muted); text-decoration:none;transition:color var(--dur) var(--ease)} .navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--fg)} @media (min-width:1000px){.navlinks{display:flex}} .navend{display:flex;align-items:center;gap:var(--space-2);margin-left:auto} @media (min-width:1000px){.navend{margin-left:0}} .navend .btn-primary{display:none} @media (min-width:560px){.navend .btn-primary{display:inline-flex}} .iconbtn{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:var(--r-md);cursor:pointer; background:var(--glass);border:1px solid var(--glass-line);color:var(--fg-muted); transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease); } .iconbtn:hover{color:var(--fg);border-color:var(--accent)} .iconbtn svg{width:18px;height:18px} .i-sun{display:none} .i-moon{display:block} :root[data-theme="light"] .i-sun{display:block} :root[data-theme="light"] .i-moon{display:none} @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .i-sun{display:block} :root:not([data-theme="dark"]) .i-moon{display:none} } .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;padding:0 11px;cursor:pointer; background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-md)} .burger span{display:block;height:2px;border-radius:2px;background:var(--fg); transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (min-width:1000px){.burger{display:none}} .drawer{ position:fixed;top:var(--nav-h);inset-inline:0;z-index:99; display:grid;gap:var(--space-1);padding:var(--space-3); background:var(--nav-solid);backdrop-filter:blur(20px); border-bottom:1px solid var(--border);box-shadow:var(--shadow-md); } .drawer[hidden]{display:none} .drawer a{display:flex;align-items:center;min-height:48px;padding:0 var(--space-3); border-radius:var(--r-md);text-decoration:none;font-weight:500;color:var(--fg-muted)} .drawer a:hover{background:var(--surface-2);color:var(--fg)} @media (min-width:1000px){.drawer{display:none}} /* ═════════════════════════════════════════════════════════════════════ HERO */ .hero{padding:calc(var(--nav-h) + var(--space-7)) 0 var(--space-7)} .hero-split{display:grid;gap:var(--space-6);align-items:center} @media (min-width:980px){.hero-split{grid-template-columns:1.05fr .95fr;gap:var(--space-7)}} .hero h1{font-family:var(--font-display);font-size:var(--t-hero);font-weight:800; line-height:1.05;letter-spacing:-.035em;text-wrap:balance;margin:var(--space-4) 0 var(--space-3)} .hero-desc{font-size:var(--t-lede);color:var(--fg-muted);max-width:52ch;line-height:1.65} .hero-acts{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-5)} .hero-center{display:grid;justify-items:center;text-align:center} .hero-center .hero-desc{text-align:center} .hero-center .hero-acts{justify-content:center} .proof{display:flex;align-items:center;gap:10px;margin-top:var(--space-5);font-size:var(--t-small);color:var(--fg-muted)} .proof strong{color:var(--fg)} .avatars{display:flex} .avatars span{ width:28px;height:28px;border-radius:50%;margin-left:-8px; display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000)); border:2px solid var(--bg); } .avatars span:first-child{margin-left:0} .tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)} .hero-center .tags{justify-content:center} .tag{ display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--r-pill); background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px); font-size:var(--t-small);font-weight:500; } .tag svg{width:15px;height:15px;color:var(--accent-text);flex:none} /* ══════════════════════════════════════════════════════ MOCKUP (app window) */ .mock{ border-radius:var(--r-lg);overflow:hidden;background:var(--surface); border:1px solid var(--border);box-shadow:var(--shadow-lg); transform:perspective(1100px) rotateY(-6deg) rotateX(2deg); transition:transform .5s var(--ease); } .mock:hover{transform:perspective(1100px) rotateY(-2deg) rotateX(1deg)} .mock-chrome{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px; border-bottom:1px solid var(--border);background:var(--surface-2)} .mock-dots{display:flex;gap:5px} .mock-dots i{width:9px;height:9px;border-radius:50%;background:var(--border-strong)} .mock-url{flex:1;height:22px;border-radius:6px;background:var(--bg);border:1px solid var(--border); display:grid;place-items:center;font-size:10px;color:var(--fg-faint);font-family:var(--font-mono)} .mock-body{display:flex;min-height:250px} .mock-side{width:112px;flex:none;padding:10px 8px;border-right:1px solid var(--border); display:flex;flex-direction:column;gap:2px} .mock-nav{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:6px; font-size:11px;font-weight:500;color:var(--fg-faint)} .mock-nav i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7;flex:none} .mock-nav.on{background:var(--accent-soft);color:var(--accent-text)} .mock-main{flex:1;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0} .mock-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mock-kpi{padding:10px 12px;border-radius:8px;background:var(--bg);border:1px solid var(--border)} .mock-kpi b{display:block;font-size:10px;font-weight:500;color:var(--fg-faint)} .mock-kpi strong{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;margin-top:2px} .mock-kpi em{display:block;font-style:normal;font-size:10px;font-weight:600;color:var(--ok);margin-top:2px} .mock-bars{display:flex;align-items:flex-end;gap:4px;height:52px} .mock-bars i{flex:1;border-radius:3px 3px 0 0;background:var(--accent-soft)} .mock-bars i.hi{background:var(--accent)} .mock-rows{display:grid;gap:4px} .mock-row{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:5px; background:var(--bg);font-size:10.5px;color:var(--fg-muted)} .mock-row i{width:5px;height:5px;border-radius:50%;flex:none;background:var(--ok)} .mock-row i.pend{background:var(--warn)} .mock-wrap{position:relative;padding:8px} .float{ position:absolute;display:flex;align-items:center;gap:9px;padding:10px 14px; border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--border-strong); box-shadow:var(--shadow-md);font-size:12.5px;font-weight:500;white-space:nowrap;z-index:2; } .float svg{width:16px;height:16px;color:var(--ok);flex:none} .float-1{top:-6px;right:-6px} .float-2{bottom:14px;left:-14px} @media (max-width:560px){.float{display:none}} /* ════════════════════════════════════════════════════════════════════ STATS */ .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5) var(--space-3); padding:var(--space-6) 0;border-block:1px solid var(--border)} @media (min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}} .stat{text-align:center} .stat b{display:block;font-family:var(--font-display);font-size:clamp(1.75rem,3vw,2.25rem); font-weight:800;letter-spacing:-.03em;color:var(--accent-text)} .stat span{display:block;font-size:var(--t-small);color:var(--fg-muted);margin-top:4px} /* ═════════════════════════════════════════════════════════════ CARDS / GRIDS */ .grid-2{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid-3{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); padding:var(--space-4);box-shadow:var(--shadow-sm)} .icon-box{ display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-md); background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-text); } .icon-box svg{width:22px;height:22px} /* bento de produtos (home) */ .bento{display:grid;gap:var(--space-3)} @media (min-width:900px){ .bento{grid-template-columns:repeat(2,1fr)} .bento .pcard-tall{grid-row:span 2} } .pcard{ position:relative;display:flex;flex-direction:column;gap:var(--space-3); padding:var(--space-5);border-radius:var(--r-xl); background:radial-gradient(120% 100% at 0% 0%,var(--accent-soft),transparent 55%),var(--surface); border:1px solid var(--border);overflow:hidden; transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease); } .pcard:hover{border-color:var(--accent-line);transform:translateY(-2px)} .pcard h3{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;line-height:1.15} .pcard .kicker{font-size:var(--t-micro);font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--accent-text)} .pcard p{color:var(--fg-muted);font-size:var(--t-small)} .pcard ul{display:grid;gap:10px;margin-top:auto;padding-top:var(--space-2)} .pcard li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-small);color:var(--fg-muted)} .pcard li svg{width:16px;height:16px;color:var(--accent-text);flex:none;margin-top:4px} /* accents locais do bento — cada produto mantém sua cor mesmo na home */ .pcard[data-accent="enota"]{--accent:#2563EB;--accent-text:#60A5FA;--accent-soft:rgba(37,99,235,.14);--accent-line:rgba(96,165,250,.32)} .pcard[data-accent="digiwhats"]{--accent:#047857;--accent-text:#34D399;--accent-soft:rgba(16,185,129,.14);--accent-line:rgba(52,211,153,.32)} .pcard[data-accent="movepay"]{--accent:#4F46E5;--accent-text:#A5B4FC;--accent-soft:rgba(99,102,241,.16);--accent-line:rgba(165,180,252,.32)} :root[data-theme="light"] .pcard[data-accent="enota"]{--accent-text:#1D4ED8;--accent-soft:rgba(37,99,235,.09);--accent-line:rgba(37,99,235,.28)} :root[data-theme="light"] .pcard[data-accent="digiwhats"]{--accent-text:#047857;--accent-soft:rgba(4,120,87,.09);--accent-line:rgba(4,120,87,.28)} :root[data-theme="light"] .pcard[data-accent="movepay"]{--accent-text:#4338CA;--accent-soft:rgba(79,70,229,.09);--accent-line:rgba(79,70,229,.28)} @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .pcard[data-accent="enota"]{--accent-text:#1D4ED8;--accent-soft:rgba(37,99,235,.09);--accent-line:rgba(37,99,235,.28)} :root:not([data-theme="dark"]) .pcard[data-accent="digiwhats"]{--accent-text:#047857;--accent-soft:rgba(4,120,87,.09);--accent-line:rgba(4,120,87,.28)} :root:not([data-theme="dark"]) .pcard[data-accent="movepay"]{--accent-text:#4338CA;--accent-soft:rgba(79,70,229,.09);--accent-line:rgba(79,70,229,.28)} } /* grade de funcionalidades */ .feats{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(272px,1fr))} .feat{display:grid;gap:var(--space-3);align-content:start; padding:var(--space-4);border-radius:var(--r-lg);background:var(--surface); border:1px solid var(--border);transition:border-color var(--dur) var(--ease)} .feat:hover{border-color:var(--accent-line)} .feat h4{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;letter-spacing:-.02em} .feat p{font-size:var(--t-small);color:var(--fg-muted);line-height:1.6} /* passos numerados */ .steps{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .step{display:grid;gap:var(--space-2);align-content:start;padding:var(--space-4); border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border)} .step b{font-family:var(--font-mono);font-size:var(--t-small);font-weight:500;color:var(--accent-text)} .step h4{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;letter-spacing:-.02em} .step p{font-size:var(--t-small);color:var(--fg-muted);line-height:1.6} /* sobre + métricas */ .about{display:grid;gap:var(--space-6)} @media (min-width:940px){.about{grid-template-columns:1.15fr .85fr;gap:var(--space-7);align-items:center}} .about p{color:var(--fg-muted);margin-top:var(--space-3)} .vals{display:grid;gap:var(--space-3);margin-top:var(--space-5)} .vals li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--t-small);color:var(--fg-muted)} .vals strong{color:var(--fg)} .vals .icon-box{width:38px;height:38px;flex:none} .vals .icon-box svg{width:18px;height:18px} .metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)} .metric{padding:var(--space-4);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border)} .metric b{display:block;font-family:var(--font-display);font-size:1.75rem;font-weight:800; letter-spacing:-.03em;color:var(--accent-text)} .metric span{display:block;font-size:var(--t-small);color:var(--fg-muted);margin-top:6px;line-height:1.5} /* ════════════════════════════════════════════════════════════════════ PLANOS */ .plans{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(258px,1fr));align-items:start} /* 5 planos: 5 colunas em tela larga, 3+2 na intermediária, 2+2+1 e 1 embaixo disso. Evita o 4+1 que o auto-fit produzia sozinho. */ .plans-5{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} @media (min-width:800px){.plans-5{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:1200px){ .plans-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2)} .plans-5 .plan{padding:var(--space-5) var(--space-3)} .plans-5 .plan-price .amt{font-size:2.25rem} } .plan{ position:relative;display:flex;flex-direction:column;gap:var(--space-3); padding:var(--space-5) var(--space-4);border-radius:var(--r-xl); background:var(--surface);border:1px solid var(--border);height:100%; } .plan.pop{ border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-md); background:linear-gradient(180deg,var(--accent-soft),transparent 42%),var(--surface); } .plan-badge{ position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap; padding:5px 14px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink); font-size:var(--t-micro);font-weight:700;letter-spacing:.02em; } .plan-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-md); background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-text)} .plan-icon svg{width:20px;height:20px} .plan.pop .plan-icon{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .plan-name{font-family:var(--font-display);font-size:1.125rem;font-weight:700;letter-spacing:-.02em} .plan-was{font-family:var(--font-mono);font-size:var(--t-small);color:var(--danger); text-decoration:line-through;text-decoration-thickness:1.5px;font-variant-numeric:tabular-nums} .plan-price{display:flex;align-items:baseline;gap:4px;font-family:var(--font-display); font-variant-numeric:tabular-nums} .plan-price .cur{font-size:1.125rem;font-weight:600;color:var(--fg-muted)} .plan-price .amt{font-size:2.75rem;font-weight:800;letter-spacing:-.04em;line-height:1} .plan-price .amt.sm{font-size:1.75rem;letter-spacing:-.03em} .plan-price .per{font-size:var(--t-small);font-weight:500;color:var(--fg-muted)} .plan-desc{font-size:var(--t-small);color:var(--fg-muted);line-height:1.55;min-height:3.4em} .plan hr{height:1px;border:0;background:var(--border);margin:0} .plan-feats{display:grid;gap:11px;flex:1} .plan-feats li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-small);line-height:1.5} .plan-feats svg{width:16px;height:16px;flex:none;margin-top:3px} .plan-feats .yes svg{color:var(--accent-text)} .plan-feats .no{color:var(--fg-faint)} .plan-feats .no svg{color:var(--fg-faint)} .plan-note{margin-top:var(--space-4);text-align:center;font-size:var(--t-small);color:var(--fg-muted)} /* ═══════════════════════════════════════════════════════════════ TABELA TAXAS */ .fees{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)} .fees-scroll{overflow-x:auto} .fees table{width:100%;min-width:560px;border-collapse:collapse;text-align:left} .fees th,.fees td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);vertical-align:middle} .fees tr:last-child td{border-bottom:0} .fees thead th{background:var(--surface-2);font-size:var(--t-micro);font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)} .fees td strong{display:block;font-weight:600} .fees td small{display:block;font-size:var(--t-micro);color:var(--fg-faint);margin-top:2px} .fees .val{font-family:var(--font-mono);font-size:1.0625rem;font-weight:500; color:var(--accent-text);font-variant-numeric:tabular-nums;white-space:nowrap} .fees .liq{font-size:var(--t-small);color:var(--fg-muted);white-space:nowrap} /* ══════════════════════════════════════════════════════════════════════ FAQ */ .faq{display:grid;border-top:1px solid var(--border);max-width:80ch;margin-inline:auto} .faq details{border-bottom:1px solid var(--border)} .faq summary{ display:flex;align-items:center;gap:var(--space-3);cursor:pointer;list-style:none; min-height:44px;padding:var(--space-4) 0; font-family:var(--font-display);font-size:1.0625rem;font-weight:600;letter-spacing:-.02em; line-height:1.4;transition:color var(--dur) var(--ease); } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--accent-text)} .faq summary::after{ content:"";margin-left:auto;flex:none;width:10px;height:10px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease); } .faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)} .faq details[open] summary{color:var(--accent-text)} .faq .ans{padding:0 0 var(--space-4);color:var(--fg-muted);font-size:var(--t-small);line-height:1.7} /* ══════════════════════════════════════════════════════════════════════ CTA */ .cta{ display:grid;gap:var(--space-4);justify-items:center;text-align:center; padding:var(--space-7) var(--space-4);border-radius:var(--r-xl); background:radial-gradient(110% 130% at 50% 0%,var(--accent-soft),transparent 60%),var(--surface); border:1px solid var(--border); } .cta h2{font-family:var(--font-display);font-size:var(--t-h2);font-weight:800; letter-spacing:-.035em;line-height:1.08;text-wrap:balance} .cta p{color:var(--fg-muted);max-width:52ch;text-wrap:pretty} .cta-acts{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center} /* ═══════════════════════════════════════════════════════════════════ RODAPÉ */ .foot{border-top:1px solid var(--border);padding:var(--space-7) 0 var(--space-5);margin-top:var(--space-8)} .foot-grid{display:grid;gap:var(--space-5)} @media (min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}} .foot-brand p{font-size:var(--t-small);color:var(--fg-muted);margin-top:var(--space-3);max-width:38ch} .foot h5{font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--fg-muted);margin-bottom:var(--space-3)} .foot ul{display:grid;gap:2px} .foot ul a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-small); color:var(--fg-muted);text-decoration:none;transition:color var(--dur) var(--ease)} .foot ul a:hover{color:var(--accent-text)} /* faixa de integrações oficiais */ .partners{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--border); display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:center;justify-content:space-between} .partners p{font-size:var(--t-small);color:var(--fg-muted);max-width:46ch} .partners p b{color:var(--fg);font-weight:600} .partner-list{display:flex;flex-wrap:wrap;gap:var(--space-2)} .partner-list li{display:inline-flex;align-items:center;gap:8px;padding:9px 15px; border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border); font-size:var(--t-small);font-weight:500;white-space:nowrap} .partner-list svg{width:17px;height:17px;color:var(--accent-text);flex:none} .partners + .foot-legal{margin-top:var(--space-4)} .foot-legal .legal-txt{display:grid;gap:5px} .foot-legal address{font-style:normal} .foot-legal{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--border); display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);align-items:center; justify-content:space-between;font-size:var(--t-small);color:var(--fg-faint)} .socials{display:flex;gap:var(--space-2)} .socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md); background:var(--surface);border:1px solid var(--border);color:var(--fg-muted); transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)} .socials a:hover{color:var(--accent-text);border-color:var(--accent-line)} .socials svg{width:17px;height:17px} /* ════════════════════════════════════════════════════════════════ MOVIMENTO */ .reveal{opacity:0;transform:translateY(18px); transition:opacity .6s var(--ease),transform .6s var(--ease)} .reveal.in{opacity:1;transform:none} .d1{transition-delay:.07s} .d2{transition-delay:.14s} .d3{transition-delay:.21s} .d4{transition-delay:.28s} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;transition-delay:0 !important; } .reveal{opacity:1;transform:none} .mock{transform:none} }