/* ============================================================ AI DYNAMICS v2 — "A página que se conserta" Sistema: 3 telas (indigo → branco → teal) · Inter VF 460/540/600 Estado global: --repair (0 = caos … 1 = operação), escrito pelo scroll-director em . Todo visual contínuo deriva dele. ============================================================ */ /* ---------- Tokens ---------- */ :root{ /* três telas */ --indigo:#1b1938; --indigo-deep:#0e0c1f; --canvas:#ffffff; --canvas-soft:#fafaf8; --teal-deep:#0e3030; --teal-mid:#155555; /* acento */ --violet-soft:#c9b4fa; /* tinta quente — nunca preto puro */ --ink:#292827; --ink-mute:#73706d; --ink-faint:#9a9794; --on-dark:#ffffff; --on-dark-mute:rgba(255,255,255,.68); --on-dark-faint:rgba(255,255,255,.58); /* ≥4.5:1 sobre o indigo (WCAG AA) */ /* fios */ --hair:#e8e4dd; --hair-dark:#3f3a52; /* registro CAOS */ --chaos-amber:#ffb547; --chaos-red:#ff5470; --chaos-red-rgb:255,84,112; --chaos-amber-rgb:255,181,71; /* registro ORDEM */ --order-mint:#5eead4; --order-green:#22dd88; --order-mint-rgb:94,234,212; --order-green-rgb:34,221,136; /* tipo */ --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',monospace; --wght:460; /* raio */ --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:9999px; /* sombra */ --e1:0 1px 3px rgba(0,0,0,.08); --e2:0 8px 24px rgba(14,12,31,.16); --e3:0 24px 64px rgba(14,12,31,.35); /* ESTADO GLOBAL DO SCROLL */ --repair:0; --chaos:calc(1 - var(--repair)); --header-h:72px; --ease-out:cubic-bezier(.16,1,.3,1); } /* ---------- Reset / base ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)} body{ font-family:var(--font-sans); font-variation-settings:'wght' var(--wght); font-size:16px;line-height:1.5; color:var(--ink); background:var(--canvas); overflow-x:clip; /* clip não cria scroll container — preserva position:sticky */ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* O peso variável é re-resolvido em TODO elemento (a custom prop --wght herda crua; sem isto, 'wght' herdaria já computado do body). NOTA: --wght é a fonte de verdade do peso na Inter variável; os font-weight declarados junto NÃO são mortos — são o fallback para quando a fonte variável não carrega (fontes estáticas ignoram font-variation-settings). Ao mudar um peso, mude os DOIS. */ *{font-variation-settings:'wght' var(--wght,460)} b,strong{--wght:600;font-weight:600} img{max-width:100%;display:block} a{color:inherit} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} code{font-family:var(--font-mono);font-variation-settings:normal} ::selection{background:rgba(201,180,250,.45);color:var(--indigo-deep)} .sr-only{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .container{max-width:1100px;margin-inline:auto;padding-inline:24px;width:100%} .container--wide{max-width:1200px} /* ---------- Escala tipográfica (Superhuman: pesos sub-padrão) ---------- */ .display-xxl{ --wght:540;font-weight:600; font-size:clamp(2.35rem,6.2vw,4rem); line-height:.98;letter-spacing:-.022em; } .display-xl{ --wght:460;font-weight:500; font-size:clamp(1.85rem,4.2vw,3rem); line-height:1.02;letter-spacing:-.0275em; } .display-lg{ --wght:540;font-weight:600; font-size:1.75rem;line-height:1.14;letter-spacing:-.0225em; } .display-md{--wght:460;font-weight:500;font-size:1.375rem;line-height:1.1;letter-spacing:-.0143em} .body-lg{--wght:540;font-weight:500;font-size:1.125rem;line-height:1.55;letter-spacing:-.0075em} .body-md{--wght:460;font-size:1rem;line-height:1.55} .kicker{ font-family:var(--font-mono); font-size:.72rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase; margin-bottom:16px; } .kicker--mint{color:var(--order-mint)} .kicker--violet{color:var(--violet-soft)} .kicker--ink{color:var(--ink-mute)} /* ---------- Canvases ---------- */ .canvas-indigo{background:var(--indigo);color:var(--on-dark)} .canvas-light{background:var(--canvas);color:var(--ink)} .canvas-soft{background:var(--canvas-soft);color:var(--ink)} /* ---------- Botões (retângulo 8px; pill SÓ no hero) ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; --wght:600;font-weight:600;font-size:1rem;line-height:1; padding:14px 24px;border-radius:var(--r-md); text-decoration:none;border:1px solid transparent; transition:background .18s,border-color .18s,color .18s,transform .18s; cursor:pointer; } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--indigo);color:var(--on-dark)} .btn-primary:hover{background:var(--indigo-deep)} .btn-pill-violet{ /* exclusivo do hero */ background:var(--violet-soft);color:var(--indigo-deep); border-radius:var(--r-full);padding:15px 30px; } .btn-pill-violet:hover{background:#dccdfc} .btn-on-teal{background:var(--canvas);color:var(--teal-deep)} .btn-on-teal:hover{background:#e9f4f1} .btn-inverse{background:var(--canvas);color:var(--indigo)} /* botão claro sobre painel indigo */ .btn-inverse:hover{background:#efeefc} .btn-whatsapp{background:#25d366;color:#fff} .btn-whatsapp:hover{background:#1ebe5d} .btn--block{width:100%} .btn--sm{padding:10px 18px;font-size:.875rem} /* ---------- Header ---------- */ .site-header{ position:fixed;inset:0 0 auto 0;z-index:100; height:var(--header-h); display:flex;align-items:center; background:transparent; border-bottom:1px solid transparent; transition:background .3s,border-color .3s; } .site-header.scrolled{ background:rgba(14,12,31,.86); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-bottom-color:var(--hair-dark); } .site-header .container--wide{display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none} .brand img{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.95} .sys-status{ display:flex;align-items:center;gap:8px; font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em; color:var(--on-dark-mute); padding:6px 12px;border:1px solid var(--hair-dark);border-radius:var(--r-full); white-space:nowrap; } .sys-status .dot{ width:7px;height:7px;border-radius:50%; background:color-mix(in srgb,var(--chaos-red),var(--order-green) calc(var(--repair) * 100%)); box-shadow:0 0 8px color-mix(in srgb,var(--chaos-red),var(--order-green) calc(var(--repair) * 100%)); animation:pulse-dot 2s infinite; } @keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.45}} .main-nav{display:flex;align-items:center;gap:28px} .main-nav a{ font-size:.9rem;--wght:540;font-weight:500; color:var(--on-dark-mute);text-decoration:none;transition:color .18s; } .main-nav a:hover{color:var(--on-dark)} .header-cta{ background:var(--violet-soft);color:var(--indigo-deep); border-radius:var(--r-full);padding:9px 18px; font-size:.85rem;--wght:600;font-weight:600;text-decoration:none; transition:background .18s;white-space:nowrap; } .header-cta:hover{background:#dccdfc} .menu-btn{display:none;color:var(--on-dark);padding:8px} .mobile-menu{ position:fixed;inset:0;z-index:99; background:rgba(14,12,31,.97); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px; opacity:0;pointer-events:none;transform:scale(.98); transition:opacity .25s,transform .25s; } .mobile-menu.open{opacity:1;pointer-events:auto;transform:scale(1)} .mobile-menu a{ color:var(--on-dark);font-size:1.35rem;--wght:540;font-weight:500;text-decoration:none; } /* ---------- Rail de progresso (desktop) ---------- */ .rail{ position:fixed;left:22px;top:50%;transform:translateY(-50%); z-index:60;display:flex;flex-direction:column;align-items:center;gap:0; opacity:0;pointer-events:none;transition:opacity .4s; } .rail.visible{opacity:1;pointer-events:auto} .rail-track{ position:relative;width:2px;height:280px;background:var(--hair-dark);border-radius:1px; display:flex;flex-direction:column;justify-content:space-between;align-items:center; } .rail-fill{ position:absolute;top:0;left:0;width:2px; height:calc(var(--repair) * 100%); background:linear-gradient(180deg,var(--violet-soft),var(--order-mint)); border-radius:1px; } .rail-dot{ position:relative;z-index:1;width:10px;height:10px;border-radius:50%; background:var(--indigo);border:2px solid var(--hair-dark); display:block;transition:border-color .3s,background .3s; } .rail-dot.done{border-color:var(--order-mint);background:var(--order-mint)} .rail-dot:hover::after{ content:attr(data-label); position:absolute;left:18px;top:50%;transform:translateY(-50%); font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em; color:var(--on-dark-mute);white-space:nowrap; background:var(--indigo-deep);border:1px solid var(--hair-dark); padding:4px 8px;border-radius:var(--r-xs); } /* ---------- Hero ---------- */ .hero{ position:relative; min-height:100vh; display:flex;align-items:center; padding:calc(var(--header-h) + 48px) 0 72px; background: radial-gradient(ellipse 75% 55% at 78% 12%,rgba(201,180,250,.16),transparent 58%), radial-gradient(ellipse 55% 45% at 12% 88%,rgba(var(--order-mint-rgb),.06),transparent 60%), linear-gradient(180deg,var(--indigo) 0%,var(--indigo) 70%,var(--indigo-deep) 100%); color:var(--on-dark); overflow:hidden; } .hero-grid{ display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:56px;align-items:center; } .hero h1{margin-bottom:24px} .hero h1 .accent{color:var(--violet-soft)} .hero .lead{ color:var(--on-dark-mute);max-width:46ch;margin-bottom:36px; } .hero-proof{ margin-top:28px;display:flex;gap:24px;flex-wrap:wrap; font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em; color:var(--on-dark-faint); } .hero-proof b{color:var(--on-dark-mute);font-weight:500} .scroll-hint{ margin-top:44px; display:flex;align-items:center;gap:10px; font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em; color:var(--on-dark-faint); } .scroll-hint .arrow{display:inline-block;animation:hint-bob 1.8s ease-in-out infinite;color:var(--order-mint)} @keyframes hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} /* entrada do hero */ .rise{opacity:0;transform:translateY(18px);animation:rise 1s var(--ease-out) forwards} .rise.d1{animation-delay:.12s}.rise.d2{animation-delay:.26s}.rise.d3{animation-delay:.42s}.rise.d4{animation-delay:.6s} @keyframes rise{to{opacity:1;transform:translateY(0)}} /* ---------- Split ANTES/DEPOIS (artefato do hero) ---------- */ .split{ --split:50%; position:relative;height:460px; border:1px solid var(--hair-dark);border-radius:var(--r-xl); overflow:hidden;background:var(--indigo-deep); box-shadow:var(--e3); user-select:none;-webkit-user-select:none;touch-action:pan-y; cursor:ew-resize; } .split-pane{position:absolute;inset:0;transition:clip-path .14s ease-out} .split-before{ background: radial-gradient(ellipse 70% 60% at 25% 30%,rgba(var(--chaos-red-rgb),.13),transparent 65%), radial-gradient(ellipse 60% 50% at 70% 80%,rgba(var(--chaos-amber-rgb),.09),transparent 60%), var(--indigo-deep); clip-path:polygon(0 0,var(--split) 0,var(--split) 100%,0 100%); } .split-after{ background: radial-gradient(ellipse 70% 60% at 75% 25%,rgba(var(--order-mint-rgb),.11),transparent 62%), radial-gradient(ellipse 50% 45% at 30% 85%,rgba(201,180,250,.08),transparent 60%), var(--indigo-deep); clip-path:polygon(var(--split) 0,100% 0,100% 100%,var(--split) 100%); } .split-tag{ position:absolute;top:16px; font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em; padding:5px 10px;border-radius:var(--r-xs); } .split-tag.left{ left:16px;color:var(--chaos-red); background:rgba(var(--chaos-red-rgb),.1);border:1px solid rgba(var(--chaos-red-rgb),.3); } .split-tag.right{ right:16px;color:var(--order-mint); background:rgba(var(--order-mint-rgb),.1);border:1px solid rgba(var(--order-mint-rgb),.3); } .split-note{ position:absolute;bottom:18px; font-size:1.02rem;--wght:540;font-weight:500;letter-spacing:-.01em; line-height:1.35;max-width:58%; } .split-note.left{left:18px;color:rgba(255,255,255,.82)} .split-note.right{right:18px;text-align:right;color:rgba(255,255,255,.82)} .split-note .hl-red{color:var(--chaos-red)} .split-note .hl-mint{color:var(--order-mint)} .split-divider{ position:absolute;top:0;bottom:0;left:var(--split); width:2px;background:rgba(255,255,255,.85); transform:translateX(-50%);z-index:5;cursor:ew-resize; transition:left .14s ease-out; } .split-handle{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:42px;height:42px;border-radius:50%; background:var(--canvas);color:var(--indigo-deep); display:flex;align-items:center;justify-content:center; font-size:1.05rem;box-shadow:0 8px 24px rgba(0,0,0,.45); } .split-divider:focus-visible{outline:none} .split-divider:focus-visible .split-handle{ box-shadow:0 0 0 3px var(--violet-soft),0 8px 24px rgba(0,0,0,.45); } /* nudge de descoberta: uma respiração suave, não três pulos */ .split--nudge .split-pane{transition:clip-path .7s var(--ease-out)} .split--nudge .split-divider{transition:left .7s var(--ease-out)} /* --- conteúdo do lado ANTES (caos em miniatura) --- */ .mini-chaos{position:absolute;inset:0;pointer-events:none} .chaos-card{ position:absolute; background:rgba(27,25,56,.92); border:1px solid rgba(var(--chaos-red-rgb),.32); border-radius:var(--r-md); font-family:var(--font-mono);font-size:.66rem;line-height:1.5; color:rgba(255,255,255,.75); padding:10px 12px; box-shadow:0 10px 30px rgba(0,0,0,.35); animation:chaos-shake 1.5s ease-in-out infinite; } .chaos-card .t{ display:block;color:var(--on-dark-faint);font-size:.58rem;letter-spacing:.08em; margin-bottom:6px;text-transform:uppercase; } .chaos-card.alert{ border-color:var(--chaos-red);color:var(--chaos-red); background:rgba(58,16,30,.92);--wght:600;font-weight:600; } .chaos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px 10px} .chaos-grid .err{color:var(--chaos-red)} .chaos-grid .warn{color:var(--chaos-amber)} @keyframes chaos-shake{ 0%,100%{transform:translate(0,0) rotate(0)} 25%{transform:translate(1.5px,-1px) rotate(.35deg)} 50%{transform:translate(-1px,1px) rotate(-.25deg)} 75%{transform:translate(1px,1px) rotate(.4deg)} } .chaos-clock{ position:absolute;width:64px;height:64px;border-radius:50%; border:2.5px solid var(--chaos-red);opacity:.85; } .chaos-clock::after{ content:'';position:absolute;top:50%;left:50%; width:2px;height:26px;background:var(--chaos-red); transform-origin:50% 100%; animation:clock-spin 1.1s linear infinite; } @keyframes clock-spin{ from{transform:translate(-50%,-100%) rotate(0)} to{transform:translate(-50%,-100%) rotate(360deg)} } /* --- conteúdo do lado DEPOIS (pipeline em miniatura) --- */ .mini-order{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;pointer-events:none;padding:0 24px} .mini-pipe{width:min(420px,92%)} .order-meta{ display:flex;gap:18px;font-family:var(--font-mono); font-size:.66rem;letter-spacing:.06em;color:var(--on-dark-mute); } .order-meta .dot{ display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--order-green);box-shadow:0 0 6px var(--order-green); margin-right:6px;animation:pulse-dot 2s infinite; } /* ---------- SVG pipeline (compartilhado: stage + mini) ---------- */ .pipe-node-box{ fill:rgba(255,255,255,.03);stroke:var(--hair-dark);stroke-width:1.5; transition:stroke .5s,fill .5s; } .pipe-name{ font-family:var(--font-mono);font-size:11px;letter-spacing:.08em; fill:var(--on-dark-faint);transition:fill .5s; } .pipe-sub{ font-family:var(--font-mono);font-size:8.5px;letter-spacing:.05em; fill:var(--on-dark-faint);transition:fill .5s; } .pipe-conn-base{stroke:var(--hair-dark);stroke-width:1.5;stroke-dasharray:4 5;transition:stroke .5s} .pipe-conn-live{ stroke:var(--order-mint);stroke-width:2; stroke-dasharray:100;stroke-dashoffset:100; transition:stroke-dashoffset 1.1s var(--ease-out); } .pipe-conn-live.on{stroke-dashoffset:0} .pipe-dot{ fill:var(--order-mint); filter:drop-shadow(0 0 5px var(--order-mint)); opacity:0;transition:opacity 1s; } .flow-on .pipe-dot{opacity:1} /* estados dos nós */ g[data-node]{transform-box:fill-box;transform-origin:center;transition:transform 1.1s var(--ease-out)} g[data-node].scattered.n1{transform:translate(-14px,-26px) rotate(-7deg)} g[data-node].scattered.n2{transform:translate(10px,30px) rotate(5deg)} g[data-node].scattered.n3{transform:translate(-8px,24px) rotate(-4deg)} g[data-node].scattered.n4{transform:translate(14px,-22px) rotate(6deg)} g[data-node].error .pipe-node-box{stroke:var(--chaos-red);fill:rgba(var(--chaos-red-rgb),.06)} g[data-node].error .pipe-name{fill:var(--chaos-red)} g[data-node].error .pipe-sub{fill:rgba(var(--chaos-red-rgb),.75)} g[data-node].idle .pipe-node-box{stroke:var(--hair-dark)} g[data-node].processing .pipe-node-box{stroke:var(--chaos-amber);fill:rgba(var(--chaos-amber-rgb),.07);animation:node-pulse 1.6s infinite} g[data-node].processing .pipe-name{fill:var(--chaos-amber)} g[data-node].processing .pipe-sub{fill:rgba(var(--chaos-amber-rgb),.8)} g[data-node].done .pipe-node-box{stroke:var(--order-mint);fill:rgba(var(--order-mint-rgb),.07)} g[data-node].done .pipe-name{fill:var(--order-mint)} g[data-node].done .pipe-sub{fill:var(--on-dark-mute)} @keyframes node-pulse{0%,100%{opacity:1}50%{opacity:.55}} /* ---------- A Jornada (teatro scrollytelling) ---------- */ .jornada{ background:linear-gradient(180deg,var(--indigo-deep),var(--indigo) 12%,var(--indigo) 88%,var(--indigo-deep)); color:var(--on-dark); padding:112px 0 96px; } .jornada-head{max-width:720px;margin-bottom:24px} .jornada-head .lead{color:var(--on-dark-mute);margin-top:20px;max-width:54ch} .jornada-layout{ display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:64px; /* sem align-items:start — as colunas precisam esticar a altura total do grid para o palco sticky ter espaço para viajar */ } .jornada-steps{display:flex;flex-direction:column} .step{ min-height:72vh; display:flex;flex-direction:column;justify-content:center; padding:48px 0; border-bottom:1px solid rgba(255,255,255,.05); } .step:last-child{border-bottom:none} .step-meta{ font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em; color:var(--on-dark-faint);margin-bottom:14px; display:flex;align-items:center;gap:12px;flex-wrap:wrap; } .step-meta code{ color:var(--order-mint);letter-spacing:.02em; background:rgba(var(--order-mint-rgb),.07); border:1px solid rgba(var(--order-mint-rgb),.18); padding:3px 8px;border-radius:var(--r-xs); } .step h3{margin-bottom:16px} .step p{color:var(--on-dark-mute);max-width:46ch} .step{transition:opacity .5s} html.reveal-armed .step:not(.lit){opacity:.55} html.reveal-armed .step:not(.lit) h3{color:var(--on-dark-mute)} /* o palco */ .jornada-stage-col{position:relative} .stage{ position:sticky;top:calc(var(--header-h) + 24px); border:1px solid var(--hair-dark);border-radius:var(--r-xl); background:rgba(14,12,31,.6); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); overflow:hidden; box-shadow:var(--e3); } .stage-bar{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 16px;border-bottom:1px solid var(--hair-dark); font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em; color:var(--on-dark-faint); } .mode-badge{ padding:4px 10px;border-radius:var(--r-xs);letter-spacing:.1em; transition:color .4s,background .4s,border-color .4s; border:1px solid; } .mode-badge.is-chaos{color:var(--chaos-red);background:rgba(var(--chaos-red-rgb),.1);border-color:rgba(var(--chaos-red-rgb),.32)} .mode-badge.is-progress{color:var(--chaos-amber);background:rgba(var(--chaos-amber-rgb),.1);border-color:rgba(var(--chaos-amber-rgb),.32)} .mode-badge.is-op{color:var(--order-green);background:rgba(var(--order-green-rgb),.1);border-color:rgba(var(--order-green-rgb),.32)} .stage-canvas{ position:relative;padding:18px 14px 4px; min-height:300px;display:flex;align-items:center; } .stage-canvas svg{width:100%;height:auto;display:block} /* camada de caos sobre o palco — dissolve com --repair */ .chaos-layer{ position:absolute;inset:0;pointer-events:none;z-index:3; opacity:calc(1 - var(--repair) * 1.9); filter:saturate(calc(1 - var(--repair) * .6)); } .chaos-layer .chaos-card{font-size:.62rem} /* KPIs */ .stage-kpis{ display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hair-dark); } .kpi{ padding:12px 16px;border-right:1px solid var(--hair-dark); font-family:var(--font-mono); } .kpi:last-child{border-right:none} .kpi .k-label{font-size:.58rem;letter-spacing:.12em;color:var(--on-dark-faint);text-transform:uppercase;display:block;margin-bottom:4px} .kpi .k-value{font-size:1.02rem;font-weight:500;color:var(--on-dark);transition:color .5s} .kpi.dead .k-value{color:var(--chaos-red)} .kpi.live .k-value{color:var(--order-mint)} /* activity log */ .activity{ position:relative; border-top:1px solid var(--hair-dark); padding:12px 16px; font-family:var(--font-mono);font-size:.68rem;line-height:1.8; color:var(--on-dark-mute); height:104px;overflow:hidden; } .activity::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:34px; background:linear-gradient(180deg,transparent,rgba(14,12,31,.95)); pointer-events:none; } .act-line{display:flex;align-items:baseline;gap:10px;opacity:1;transition:opacity .4s} .act-line.entering{opacity:0} .act-time{color:var(--on-dark-faint);flex-shrink:0} .act-tag{ flex-shrink:0;font-size:.56rem;letter-spacing:.08em;padding:1px 6px;border-radius:3px; border:1px solid; } .act-tag.ok{color:var(--order-green);border-color:rgba(var(--order-green-rgb),.3);background:rgba(var(--order-green-rgb),.08)} .act-tag.run{color:var(--order-mint);border-color:rgba(var(--order-mint-rgb),.3);background:rgba(var(--order-mint-rgb),.08)} .act-tag.ia{color:var(--violet-soft);border-color:rgba(201,180,250,.3);background:rgba(201,180,250,.08)} .act-tag.err{color:var(--chaos-red);border-color:rgba(var(--chaos-red-rgb),.3);background:rgba(var(--chaos-red-rgb),.08)} .act-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .act-idle{color:var(--on-dark-faint);font-style:normal} /* ---------- Seções de corpo (canvas claro) ---------- */ .section{padding:104px 0} .section-head{max-width:680px;margin-bottom:56px} .section-head .lead{color:var(--ink-mute);margin-top:18px} .canvas-indigo .section-head .lead{color:var(--on-dark-mute)} /* Soluções */ .sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .sol-card{ background:var(--canvas); border:1px solid var(--hair);border-radius:var(--r-lg); padding:30px 28px; transition:border-color .25s; } .sol-card:hover{border-color:#cfc9bf} .sol-num{ font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em; color:var(--ink-faint);display:block;margin-bottom:18px; } .sol-icon{ width:42px;height:42px;border-radius:var(--r-md); background:var(--canvas-soft);border:1px solid var(--hair); display:flex;align-items:center;justify-content:center; margin-bottom:18px;color:var(--indigo); } .sol-card h3{font-size:1.05rem;--wght:600;font-weight:600;letter-spacing:-.012em;margin-bottom:10px;color:var(--indigo)} .sol-card p{font-size:.92rem;color:var(--ink-mute);line-height:1.6} /* Cases */ .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .case-card{ background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-lg); padding:30px 28px;display:flex;flex-direction:column; } .case-tag{ align-self:flex-start; font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-mute);border:1px solid var(--hair);border-radius:var(--r-xs); padding:4px 9px;margin-bottom:22px; } .case-metric{ font-family:var(--font-mono);font-size:2.6rem;font-weight:500; letter-spacing:-.03em;line-height:1;color:var(--indigo);margin-bottom:8px; } .case-what{font-size:.86rem;color:var(--ink-mute);margin-bottom:16px;line-height:1.5} .case-card p{font-size:.92rem;color:var(--ink);line-height:1.65;flex:1} .case-gain{ margin-top:18px;align-self:flex-start; font-family:var(--font-mono);font-size:.7rem; color:#0c7a63;background:rgba(var(--order-mint-rgb),.14); border:1px solid rgba(13,148,136,.25); padding:6px 12px;border-radius:var(--r-xs); } /* Founder */ .founder{ display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:start; background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-xl); padding:44px; } .founder-photo{ width:100%;aspect-ratio:4/4.6;object-fit:cover; border-radius:var(--r-lg); filter:saturate(.92); } .founder h3{margin-bottom:4px;color:var(--indigo)} .founder-role{ font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em; color:var(--ink-mute);margin-bottom:22px; } .founder p{color:var(--ink);line-height:1.7;margin-bottom:22px;max-width:62ch} .founder p strong{--wght:600;font-weight:600} .stack-label{ font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-mute);display:block;margin-bottom:10px; } .stack-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px} .stack-chips span{ font-family:var(--font-mono);font-size:.7rem; color:var(--ink-mute);background:var(--canvas-soft); border:1px solid var(--hair);border-radius:var(--r-xs); padding:5px 10px; } .founder-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .link-quiet{ font-size:.9rem;--wght:540;font-weight:500;color:var(--ink-mute); text-decoration:underline;text-underline-offset:3px;transition:color .15s; } .link-quiet:hover{color:var(--ink)} /* Dores (canvas indigo) */ .dores-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:920px;margin-inline:auto} .dor-card{ background:rgba(255,255,255,.04); border:1px solid var(--hair-dark);border-radius:var(--r-lg); padding:30px 28px; transition:border-color .25s,background .25s; } .dor-card:hover{background:rgba(255,255,255,.06)} .dor-x{ font-family:var(--font-mono);font-size:.72rem;color:var(--chaos-red); display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;letter-spacing:.08em; } .dor-card h3{font-size:1.08rem;--wght:600;font-weight:600;letter-spacing:-.012em;color:var(--on-dark);margin-bottom:10px} .dor-card>p{font-size:.92rem;color:var(--on-dark-mute);line-height:1.65;margin-bottom:14px} .dor-fix{ font-size:.88rem;color:var(--on-dark-mute);line-height:1.6;margin-bottom:16px; padding-left:14px;border-left:2px solid rgba(var(--order-mint-rgb),.4); } .dor-fix b{color:var(--order-mint);--wght:600;font-weight:600} .dor-gain{ display:inline-block;font-family:var(--font-mono);font-size:.68rem; color:var(--order-mint);background:rgba(var(--order-mint-rgb),.08); border:1px solid rgba(var(--order-mint-rgb),.25); padding:6px 12px;border-radius:var(--r-xs); } /* Calculadora */ .calc-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center} .calc-inputs{display:flex;flex-direction:column;gap:36px;margin-top:40px} .calc-row label{display:block;--wght:540;font-weight:500;font-size:.98rem;color:var(--ink);margin-bottom:4px} .calc-row .calc-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;gap:16px} .calc-val{font-family:var(--font-mono);font-size:1.1rem;color:var(--indigo);font-weight:500;white-space:nowrap} input[type=range]{ width:100%;height:4px;-webkit-appearance:none;appearance:none; background:linear-gradient(90deg,var(--indigo) var(--fill,50%),var(--hair) var(--fill,50%)); border-radius:2px;outline:none; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none; width:20px;height:20px;border-radius:50%; background:var(--indigo);border:3px solid var(--canvas); box-shadow:0 1px 6px rgba(14,12,31,.35);cursor:pointer; } input[type=range]::-moz-range-thumb{ width:14px;height:14px;border-radius:50%; background:var(--indigo);border:3px solid var(--canvas); box-shadow:0 1px 6px rgba(14,12,31,.35);cursor:pointer; } input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(201,180,250,.5)} .calc-note{font-size:.82rem;color:var(--ink-faint);margin-top:8px} .calc-out{ background:linear-gradient(165deg,var(--indigo),var(--indigo-deep)); color:var(--on-dark);border-radius:var(--r-xl); padding:44px 40px; border:1px solid var(--hair-dark); } .calc-out .o-label{ font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase; color:var(--on-dark-faint);display:block;margin-bottom:6px; } .calc-out .o-now{font-family:var(--font-mono);font-size:1.9rem;font-weight:500;letter-spacing:-.02em;margin-bottom:30px} .calc-out .o-save{ font-family:var(--font-mono);font-size:clamp(2.4rem,4vw,3.2rem);font-weight:500; letter-spacing:-.03em;line-height:1;color:var(--order-mint); margin-bottom:10px; } .calc-out .o-foot{font-size:.8rem;color:var(--on-dark-faint);margin-bottom:32px;line-height:1.5} .calc-out hr{border:none;border-top:1px solid var(--hair-dark);margin:0 0 30px} /* Contato */ .contact-shell{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden; background:var(--canvas);box-shadow:var(--e2); } .contact-dark{ background:linear-gradient(170deg,var(--indigo),var(--indigo-deep)); color:var(--on-dark);padding:52px 44px; display:flex;flex-direction:column; } .contact-dark h2{margin-bottom:18px} .contact-dark .lead{color:var(--on-dark-mute);margin-bottom:36px} .contact-line{ font-family:var(--font-mono);font-size:.78rem;color:var(--on-dark-mute); margin-bottom:10px; } .contact-line a{color:var(--violet-soft);text-decoration:none} .contact-line a:hover{text-decoration:underline} .contact-wa{margin-top:auto;padding-top:32px;border-top:1px solid var(--hair-dark)} .contact-wa p{font-size:.88rem;color:var(--on-dark-mute);margin-bottom:16px} .contact-form{padding:52px 44px} .contact-form h3{margin-bottom:8px;color:var(--indigo)} .contact-form .sub{font-size:.9rem;color:var(--ink-mute);margin-bottom:30px;line-height:1.55} .field{margin-bottom:20px} .field label{ display:block;font-size:.82rem;--wght:540;font-weight:500;color:var(--ink); margin-bottom:7px; } .field input,.field select{ width:100%;padding:11px 14px; font:inherit;font-size:.95rem;color:var(--ink); background:var(--canvas); border:1px solid var(--hair);border-radius:var(--r-sm); transition:border-color .15s,box-shadow .15s; } .field input:focus,.field select:focus{ outline:none;border-color:var(--indigo); box-shadow:0 0 0 3px rgba(201,180,250,.35); } .lgpd-label{ display:flex;align-items:flex-start;gap:10px; font-size:.8rem;color:var(--ink-mute);line-height:1.5;cursor:pointer; margin-bottom:22px; } .lgpd-label input{margin-top:3px;accent-color:var(--indigo);flex-shrink:0} .lgpd-label a{color:var(--indigo);text-decoration:underline;text-underline-offset:2px} /* ---------- Banda teal de fechamento ---------- */ .closing{ padding:128px 0;text-align:center; background: radial-gradient(ellipse 60% 70% at 50% 110%,rgba(21,85,85,.85),transparent 70%), var(--teal-deep); color:var(--on-dark); } .closing h2{max-width:18ch;margin:0 auto 20px} .closing .lead{color:var(--on-dark-mute);max-width:48ch;margin:0 auto 40px} .closing-meta{ margin-top:36px; font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em; color:rgba(255,255,255,.55); display:flex;justify-content:center;gap:24px;flex-wrap:wrap; } /* ---------- Footer ---------- */ .site-footer{ background:var(--indigo-deep);color:var(--on-dark-mute); padding:72px 0 36px;font-size:.875rem; } .footer-grid{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:48px; padding-bottom:44px;margin-bottom:28px; border-bottom:1px solid var(--hair-dark); } .footer-brand{max-width:330px} .footer-brand img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.85;margin-bottom:16px} .footer-brand p{line-height:1.65;margin-bottom:14px;color:var(--on-dark-mute)} .footer-fine{font-size:.76rem;color:var(--on-dark-faint);line-height:1.7} .footer-fine a{color:var(--violet-soft);text-decoration:none} .footer-cols{display:flex;gap:64px;flex-wrap:wrap} .footer-col h3{ color:var(--on-dark);font-size:.8rem;--wght:600;font-weight:600; letter-spacing:.04em;margin-bottom:18px; } .footer-col a{ display:flex;align-items:center;gap:8px; color:var(--on-dark-mute);text-decoration:none;font-size:.85rem; margin-bottom:12px;transition:color .15s; } .footer-col a:hover{color:var(--on-dark)} .footer-legal{ display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:12px;font-size:.76rem;color:var(--on-dark-faint); } /* ---------- WhatsApp float ---------- */ .wa-float{ position:fixed;right:20px;bottom:20px;z-index:95; width:52px;height:52px;border-radius:50%; background:#25d366;color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.4); transition:transform .2s; } .wa-float:hover{transform:scale(1.08)} /* ---------- Modais ---------- */ .modal-overlay{ display:none;position:fixed;inset:0;z-index:2000; background:rgba(14,12,31,.6); -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px); align-items:center;justify-content:center;padding:16px; } .modal-overlay.open{display:flex} .modal-box{ background:var(--canvas);border-radius:var(--r-xl); max-width:660px;width:100%;max-height:82vh;overflow-y:auto; padding:44px;position:relative;box-shadow:var(--e3); } .modal-box h2{font-size:1.3rem;--wght:600;font-weight:600;letter-spacing:-.015em;color:var(--indigo);margin-bottom:18px} .modal-box h3{font-size:.95rem;--wght:600;font-weight:600;color:var(--indigo);margin:22px 0 8px} .modal-box p,.modal-box li{font-size:.88rem;color:var(--ink-mute);line-height:1.7;margin-bottom:10px} .modal-box ul{padding-left:20px} .modal-box a{color:var(--indigo)} .modal-close{ position:absolute;top:16px;right:16px; width:34px;height:34px;border-radius:50%; background:var(--canvas-soft);border:1px solid var(--hair); display:flex;align-items:center;justify-content:center; font-size:1.05rem;color:var(--ink-mute);transition:background .15s; } .modal-close:hover{background:var(--hair)} .modal-actions{margin-top:24px;text-align:right} /* ---------- Reveal on scroll ---------- Gate: html.reveal-armed é adicionado pelo PRÓPRIO app.js antes de observar — se o app.js falhar em carregar, nada fica invisível. */ html.reveal-armed .reveal{opacity:0;transform:translateY(22px);filter:blur(5px)} html.reveal-armed .reveal.in,.reveal.in{ opacity:1;transform:translateY(0);filter:blur(0); transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s var(--ease-out); } .reveal.d1.in{transition-delay:.08s} .reveal.d2.in{transition-delay:.16s} .reveal.d3.in{transition-delay:.24s} .reveal.d4.in{transition-delay:.32s} .reveal.d5.in{transition-delay:.4s} /* ============================================================ Responsivo ============================================================ */ @media (max-width:1180px){ .rail{display:none} } @media (max-width:1024px){ .main-nav{display:none} .menu-btn{display:flex} .hero-grid{grid-template-columns:1fr;gap:44px} .hero{padding-bottom:56px} .split{height:420px} /* mobile/tablet: flex-coluna — o palco (order:-1) fica sticky no topo e pode viajar a altura inteira do container enquanto os passos rolam */ .jornada-layout{display:flex;flex-direction:column;gap:0} .jornada-stage-col{order:-1;position:sticky;top:var(--header-h);z-index:20} .stage{position:static;border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:0 18px 40px rgba(0,0,0,.4)} .activity{height:78px} .step{min-height:60vh;padding:40px 0} .sol-grid,.case-grid{grid-template-columns:repeat(2,1fr)} .founder{grid-template-columns:240px 1fr;padding:36px;gap:36px} .calc-layout{grid-template-columns:1fr;gap:44px} .contact-shell{grid-template-columns:1fr} } @media (max-width:760px){ .section{padding:72px 0} .sys-status .sys-text{display:none} .hero{ background:linear-gradient(180deg,var(--indigo),var(--indigo-deep)); /* sem wash radial em telas pequenas */ padding-top:calc(var(--header-h) + 36px); min-height:auto; } .split{height:400px} .split-note{font-size:.88rem;max-width:62%} .sol-grid,.case-grid,.dores-grid{grid-template-columns:1fr} .founder{grid-template-columns:1fr;padding:28px} .founder-photo{max-width:260px;aspect-ratio:1/1} .stage-canvas{min-height:200px;padding:12px 10px 0} .stage-bar{padding:9px 12px;font-size:.56rem;letter-spacing:.08em} .mode-badge{white-space:nowrap;padding:3px 8px} .chaos-layer .chaos-card{font-size:.56rem;padding:7px 9px} .stage-kpis{grid-template-columns:repeat(3,1fr)} .kpi{padding:10px 10px} .kpi .k-value{font-size:.85rem} .activity{display:none} .contact-dark,.contact-form{padding:36px 24px} .closing{padding:80px 0} .modal-box{padding:32px 22px} .wa-float{bottom:14px;right:14px;width:48px;height:48px} } /* ============================================================ prefers-reduced-motion: página carrega no estado OPERAÇÃO ============================================================ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none !important;transition-duration:.01ms !important} .rise{opacity:1;transform:none;animation:none} html.reveal-armed .reveal,.reveal{opacity:1;transform:none;filter:none} .chaos-layer{opacity:0} /* sem motion = estado reparado, mesmo sem JS */ .chaos-card{animation:none} .chaos-clock::after{animation:none} .cursor{animation:none;opacity:1} } body.reduced .chaos-layer{opacity:0} html.reveal-armed body.reduced .step:not(.lit){opacity:1}