/* ═══════════════════════════════════════════════════ CLUSTER DIGITAL — Shared Stylesheet Covers: reset, tokens, nav, footer, common components, service page layout, animations ═══════════════════════════════════════════════════ */ /* ─────────────── RESET ─────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } :root { --bg: #07080A; --surface: #0F1114; --elevated: #161A1E; --border: rgba(255,255,255,0.07); --border-h: rgba(255,255,255,0.14); --cyan: #6AC3CD; --green: #009878; --cyan-glow: rgba(106,195,205,0.16); --cyan-dim: rgba(106,195,205,0.07); --text: #E8EAED; --muted: rgba(232,234,237,0.72); --dim: rgba(232,234,237,0.42); --grad: linear-gradient(135deg, #6AC3CD 0%, #009878 100%); --ff-d: 'Plus Jakarta Sans', sans-serif; --ff-b: 'Plus Jakarta Sans', sans-serif; --ease: cubic-bezier(0.4,0,0.2,1); --r: 14px; --rl: 24px; --h1: clamp(2.2rem, 3.8vw, 4rem); --h2: clamp(1.7rem, 2.4vw, 2.5rem); --h3: clamp(1.1rem, 1.3vw, 1.3rem); --sub: clamp(1.2rem, 1.4vw, 1.4rem); } body { font-family: var(--ff-b); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; cursor: none; } @media (max-width: 768px) { body { cursor: auto; } } a { color: inherit; text-decoration: none; } /* ─────────────── BACK BUTTON ─────────────── */ #back-btn { position: fixed; bottom: 32px; left: 32px; z-index: 9990; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--muted); cursor: none; display: grid; place-items: center; transition: border-color .25s, color .25s, box-shadow .25s, transform .25s; opacity: 0; transform: translateY(12px); animation: backBtnIn .5s .4s var(--ease) forwards; } #back-btn:hover { border-color: rgba(106,195,205,0.5); color: var(--cyan); box-shadow: 0 0 18px rgba(106,195,205,0.18); transform: translateY(0) scale(1.08); } @keyframes backBtnIn { to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { #back-btn { bottom: 24px; left: 20px; width: 40px; height: 40px; cursor: auto; } } /* ─────────────── SCROLL PROGRESS ─────────────── */ #scroll-prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); transform-origin: left; transform: scaleX(0); z-index: 9997; pointer-events: none; transition: transform .08s linear; } /* ─────────────── CURSOR ─────────────── */ #cur-dot { position: fixed; top: 0; left: 0; width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); } #cur-ring { position: fixed; top: 0; left: 0; width: 34px; height: 34px; border: 1.5px solid rgba(106,195,205,0.45); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width .25s, height .25s, border-color .25s; } .cursor-hover #cur-ring { width: 52px; height: 52px; border-color: rgba(106,195,205,0.9); } @media (max-width: 768px) { #cur-dot, #cur-ring { display: none; } } /* ─────────────── CANVAS ─────────────── */ #gc { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.32; } /* ─────────────── NAV ─────────────── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; transition: background .4s, border-bottom .4s; } nav.scrolled { background: rgba(7,8,10,0.85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); } .nav-logo { display: flex; align-items: center; z-index: 101; position: relative; } .nav-logo picture, .nav-logo img { height: 32px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; display: block; } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { font-size: 0.85rem; font-weight: 500; color: var(--muted); transition: color .2s; } .nav-links a:hover { color: var(--text); } .nav-end { display: flex; align-items: center; gap: 12px; z-index: 101; position: relative; } /* Lang switcher */ .lang-sw { position: relative; } .lang-trigger { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; cursor: pointer; font-family: var(--ff-b); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; color: var(--text); transition: all .2s; white-space: nowrap; } .lang-trigger:hover { background: rgba(255,255,255,0.08); border-color: var(--border-h); } .lang-trigger .lt-flag { font-size: 1.05rem; line-height: 1; } .lang-trigger .lt-chevron { width: 10px; height: 10px; stroke: var(--muted); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; flex-shrink: 0; } .lang-sw.open .lt-chevron { transform: rotate(180deg); } .lang-dropdown { position: absolute; top: calc(100% + 10px); right: 0; background: var(--elevated); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 6px; min-width: 152px; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.97); transform-origin: top right; transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; box-shadow: 0 20px 56px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); z-index: 200; } .lang-sw.open .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .lang-opt { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 9px; cursor: pointer; font-family: var(--ff-b); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); transition: all .15s; background: transparent; border: none; width: 100%; text-align: left; } .lang-opt:hover { background: rgba(255,255,255,0.06); color: var(--text); } .lang-opt.active { color: var(--cyan); } .lang-opt .lo-flag { font-size: 1.15rem; line-height: 1; } .lang-opt .lo-name { flex: 1; } .nav-cta { font-family: var(--ff-b); font-size: 0.84rem; font-weight: 600; padding: 9px 20px; background: var(--cyan-dim); border: 1px solid rgba(106,195,205,0.25); color: var(--cyan); border-radius: 50px; cursor: pointer; transition: all .25s; } .nav-cta:hover { background: var(--cyan-glow); border-color: var(--cyan); } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; } .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--text); border-radius: 2px; transition: all .3s; } .nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,5px); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-5px); } /* Mobile menu */ .mobile-menu { display: none; position: fixed; inset: 0; background: rgba(7,8,10,0.97); backdrop-filter: blur(20px); z-index: 99; flex-direction: column; align-items: center; justify-content: center; gap: 36px; } .mobile-menu.open { display: flex; } .mobile-menu a { font-family: var(--ff-d); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; color: var(--muted); transition: color .2s; } .mobile-menu a:hover { color: var(--cyan); } .mobile-menu .m-cta { margin-top: 12px; font-family: var(--ff-b); font-size: 1rem; font-weight: 600; padding: 14px 32px; background: var(--grad); color: #fff; border-radius: 50px; } .mobile-menu .mob-lang { display: flex; gap: 6px; margin-top: 4px; } .mobile-menu .mob-lang .lang-opt { font-size: 0.95rem; padding: 8px 18px; border: 1px solid var(--border); border-radius: 10px; justify-content: center; } .mobile-menu .mob-lang .lang-opt.active { border-color: rgba(106,195,205,0.45); color: var(--cyan); } @media (max-width: 860px) { nav { padding: 0 24px; } .nav-links, .nav-cta { display: none; } .nav-hamburger { display: flex; } } /* ─────────────── LAYOUT ─────────────── */ .container { max-width: 1160px; margin: 0 auto; padding: 0 48px; position: relative; z-index: 1; } @media (max-width: 768px) { .container { padding: 0 20px; } } section { position: relative; z-index: 1; } /* ─────────────── REVEAL ─────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s var(--ease), transform .65s var(--ease); } .reveal.in { opacity: 1; transform: none; } .d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .32s; } .d4 { transition-delay: .45s; } .d5 { transition-delay: .6s; } /* ─────────────── BUTTONS ─────────────── */ .btn-p { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ff-b); font-weight: 600; font-size: 0.9rem; padding: 13px 26px; background: var(--grad); color: #fff; border-radius: 50px; border: none; cursor: pointer; transition: all .3s; box-shadow: 0 0 36px var(--cyan-glow); } .btn-p:hover { transform: translateY(-2px); box-shadow: 0 0 56px rgba(106,195,205,0.32); } .btn-p svg { transition: transform .25s; } .btn-p:hover svg { transform: translateX(3px); } .btn-g { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-b); font-weight: 500; font-size: 0.9rem; padding: 13px 22px; background: transparent; color: var(--muted); border-radius: 50px; border: 1px solid var(--border); cursor: pointer; transition: all .25s; } .btn-g:hover { color: var(--text); border-color: var(--border-h); } /* ─────────────── HERO (home) ─────────────── */ #hero { display: flex; flex-direction: column; justify-content: flex-start; padding: 140px 0 100px; position: relative; overflow: hidden; } @media (max-width: 768px) { #hero { padding: 110px 0 72px; } } .hero-inner { max-width: 1160px; margin: 0 auto; padding: 0 48px; width: 100%; } @media (max-width: 768px) { .hero-inner { padding: 0 20px; } } .hero-title { max-width: 720px; } .hero-sub { max-width: 560px; } .hero-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cyan); background: var(--cyan-dim); border: 1px solid rgba(106,195,205,0.18); padding: 6px 14px; border-radius: 50px; margin-bottom: 32px; opacity: 0; animation: fadeUp .8s .2s var(--ease) forwards; } .hero-tag::before { content: ''; width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; animation: blink 2.2s infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} } .hero-title { font-family: var(--ff-d); font-size: var(--h1); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; color: var(--text); margin-bottom: 24px; opacity: 0; animation: fadeUp .9s .35s var(--ease) forwards; } .hero-title .hl { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .morph-wrap { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; } #morph { display: inline-block; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: opacity .35s, transform .35s; } .hero-sub { font-size: var(--sub); color: var(--muted); max-width: 560px; line-height: 1.75; font-weight: 400; margin-bottom: 44px; opacity: 0; animation: fadeUp .9s .5s var(--ease) forwards; } .hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; opacity: 0; animation: fadeUp .9s .65s var(--ease) forwards; } .glow-a { position: absolute; top: 20%; right: -8%; pointer-events: none; width: 600px; height: 600px; background: radial-gradient(ellipse, rgba(106,195,205,0.07) 0%, transparent 68%); animation: gp 9s ease-in-out infinite; } .glow-b { position: absolute; bottom: 5%; left: -6%; pointer-events: none; width: 440px; height: 440px; background: radial-gradient(ellipse, rgba(0,152,120,0.05) 0%, transparent 70%); } @keyframes gp { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} } @keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} } /* ─────────────── STATS MARQUEE ─────────────── */ .stats-bar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 24px 0; overflow: hidden; } .st-track { display: flex; gap: 64px; animation: marquee 28s linear infinite; width: max-content; } .st-track:hover { animation-play-state: paused; } .st-item { display: flex; align-items: center; gap: 12px; flex-shrink: 0; white-space: nowrap; } .st-n { font-family: var(--ff-d); font-size: 1.2rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .st-l { font-size: 0.84rem; color: var(--muted); } .st-sep { width: 1px; height: 22px; background: var(--border); } @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ─────────────── SECTION COMMONS ─────────────── */ .sec-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 18px; } .sec-label::before { content:''; width:20px; height:1px; background:var(--cyan); } .sec-title { font-family: var(--ff-d); font-size: var(--h2); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 14px; } .sec-sub { font-size: var(--sub); color: var(--muted); font-weight: 400; max-width: 440px; line-height: 1.7; } .grad-text { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ─────────────── SERVICES GRID (home) ─────────────── */ #services { padding: 110px 0; } .srv-hd { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; gap: 32px; } @media (max-width: 768px) { .srv-hd { flex-direction: column; align-items: flex-start; } } .srv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--border); border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; } @media (max-width: 860px) { .srv-grid { grid-template-columns: 1fr; } } /* Parceria de Lançamento — strip horizontal abaixo dos cards */ .srv-partner { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 2px; padding: 28px 36px; border: 1px solid var(--border); border-radius: var(--rl); background: var(--surface); text-decoration: none; color: inherit; transition: background .3s, border-color .3s; position: relative; overflow: hidden; } .srv-partner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(106,195,205,0.04) 0%, transparent 60%); opacity: 0; transition: opacity .3s; } .srv-partner:hover { background: var(--elevated); border-color: rgba(106,195,205,0.22); } .srv-partner:hover::before { opacity: 1; } .srv-partner-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; } .srv-partner-title { font-family: var(--ff-d); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; } .srv-partner-desc { font-size: 0.95rem; color: var(--muted); line-height: 1.55; font-weight: 400; max-width: 580px; } .srv-partner-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 0.88rem; font-weight: 600; color: var(--cyan); white-space: nowrap; } @media (max-width: 768px) { .srv-partner { flex-direction: column; align-items: flex-start; padding: 24px 20px; } .srv-partner-cta { margin-top: 4px; } } .srv-card { background: var(--surface); padding: 32px 28px; position: relative; overflow: hidden; transition: background .3s; display: block; text-decoration: none; color: inherit; } .srv-card::after { content: ''; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity .3s; } .srv-card:hover { background: var(--elevated); } .srv-card:hover::after { opacity: 0.04; } .srv-icon { width: 40px; height: 40px; background: var(--cyan-dim); border: 1px solid rgba(106,195,205,0.18); border-radius: 11px; display: grid; place-items: center; margin-bottom: 18px; transition: all .3s; position: relative; z-index: 1; } .srv-card:hover .srv-icon { background: var(--cyan-glow); border-color: rgba(106,195,205,0.4); box-shadow: 0 0 18px var(--cyan-glow); } .srv-icon svg { width: 18px; height: 18px; stroke: var(--cyan); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .srv-n { font-family: var(--ff-d); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 9px; position: relative; z-index: 1; } .srv-d { font-size: 1.08rem; color: var(--muted); line-height: 1.6; font-weight: 400; position: relative; z-index: 1; } .srv-num { position: absolute; top: 24px; right: 24px; font-family: var(--ff-d); font-size: 0.65rem; font-weight: 700; color: var(--dim); letter-spacing: 0.06em; } /* Arrow hint on service cards */ .srv-arrow { position: absolute; bottom: 24px; right: 24px; opacity: 0; transform: translateX(-4px); transition: all .3s; z-index: 2; } .srv-arrow svg { width: 14px; height: 14px; stroke: var(--cyan); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .srv-card:hover .srv-arrow { opacity: 1; transform: translateX(0); } /* ─────────────── MANIFESTO (home) ─────────────── */ #manifesto { padding: 110px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } #manifesto::before { content: ''; position: absolute; top: -150px; left: 50%; transform: translateX(-50%); width: 700px; height: 350px; background: radial-gradient(ellipse, rgba(106,195,205,0.05) 0%, transparent 70%); pointer-events: none; } .mf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } @media (max-width: 860px) { .mf-grid { grid-template-columns: 1fr; gap: 48px; } } .mf-left h2 { font-family: var(--ff-d); font-size: var(--h2); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin-bottom: 20px; } .mf-left p { color: var(--muted); font-size: var(--sub); font-weight: 400; line-height: 1.75; max-width: 400px; } .ct-table { border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; } .ct-head { display: grid; grid-template-columns: 1fr 1fr; background: var(--elevated); } .ct-head div { padding: 13px 22px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .ct-head div:first-child { color: var(--dim); border-right: 1px solid var(--border); } .ct-head div:last-child { color: var(--cyan); } .ct-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); transition: background .2s; } .ct-row:hover { background: rgba(255,255,255,0.02); } .ct-row div { padding: 16px 22px; font-size: 1.08rem; line-height: 1.5; } .ct-row div:first-child { color: var(--dim); border-right: 1px solid var(--border); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.1); } .ct-row div:last-child { color: var(--text); font-weight: 500; } /* ─────────────── METHOD (home) ─────────────── */ #method { padding: 110px 0; } .mth-hd { text-align: center; margin-bottom: 64px; } .mth-hd .sec-label { justify-content: center; } .mth-hd .sec-title, .mth-hd .sec-sub { margin-left: auto; margin-right: auto; text-align: center; } .mth-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: var(--border); border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; } @media (max-width: 1024px) { .mth-steps { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .mth-steps { grid-template-columns: 1fr; } } .mth-step { background: var(--surface); padding: 44px 28px; position: relative; transition: background .3s; } .mth-step:hover { background: var(--elevated); } .step-bar { width: 36px; height: 2px; background: var(--grad); margin-bottom: 22px; border-radius: 2px; } .step-n { position: absolute; top: 26px; right: 26px; font-family: var(--ff-d); font-size: 0.65rem; font-weight: 700; color: var(--dim); letter-spacing: 0.06em; } .step-t { font-family: var(--ff-d); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; } .step-d { font-size: 1.08rem; color: var(--muted); line-height: 1.65; font-weight: 400; } /* ── MOBILE: comparação e metodologia ── */ @media (max-width: 768px) { /* Parágrafo introdutório da seção manifesto — verboso no mobile */ .mf-left p { display: none; } /* Tabela comparativa: esconde as 2 últimas linhas no mobile */ .ct-row:nth-child(5), .ct-row:nth-child(6) { display: none; } /* Metodologia: esconde a descrição de cada passo, mantém título + número */ .step-d { display: none; } /* Reduz padding da seção método no mobile */ #method { padding: 72px 0; } .mth-hd { margin-bottom: 40px; } .mth-step { padding: 32px 20px; } } /* ─────────────── RESULTS (home + service pages) ─────────────── */ #results { padding: 110px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .res-hd { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; gap: 32px; } @media (max-width: 768px) { .res-hd { flex-direction: column; align-items: flex-start; } } .res-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } @media (max-width: 1024px) { .res-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .res-grid { grid-template-columns: 1fr; } } .res-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--rl); padding: 32px; transition: all .35s; position: relative; overflow: hidden; } .res-card::after { content: ''; position: absolute; inset: 0; border-radius: var(--rl); background: var(--grad); opacity: 0; transition: opacity .35s; pointer-events: none; } .res-card:hover { border-color: rgba(106,195,205,0.28); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(106,195,205,0.12); } .res-card:hover::after { opacity: 0.03; } .res-tag { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 18px; display: block; } .res-metric { font-family: var(--ff-d); font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 800; letter-spacing: -0.04em; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; margin-bottom: 8px; } .res-ctx { font-size: 1.08rem; color: var(--muted); font-weight: 400; line-height: 1.6; } /* ─────────────── TECH (home) ─────────────── */ #tech { padding: 110px 0; } .tech-in { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } @media (max-width: 860px) { .tech-in { grid-template-columns: 1fr; gap: 48px; } } .tech-r { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 480px) { .tech-r { grid-template-columns: 1fr; } } .tc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 20px; transition: all .3s; } .tc:hover { border-color: rgba(106,195,205,0.22); box-shadow: 0 8px 28px rgba(0,0,0,0.25); } .tc.span2 { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(106,195,205,0.06), rgba(0,152,120,0.03)); border-color: rgba(106,195,205,0.18); } .tc-n { font-family: var(--ff-d); font-size: 0.88rem; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.01em; } .tc-d { font-size: 1.05rem; color: var(--dim); font-weight: 400; line-height: 1.55; } /* ─────────────── CTA BOX (home + service pages) ─────────────── */ #cta { padding: 110px 0; position: relative; overflow: hidden; } #cta::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 800px; height: 360px; background: radial-gradient(ellipse, rgba(106,195,205,0.07) 0%, transparent 65%); pointer-events: none; } .cta-section { padding: 110px 0; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 800px; height: 360px; background: radial-gradient(ellipse, rgba(106,195,205,0.07) 0%, transparent 65%); pointer-events: none; } .cta-box { background: var(--surface); border: 1px solid var(--border); border-radius: 28px; padding: 72px 56px; text-align: center; position: relative; overflow: hidden; max-width: 820px; margin: 0 auto; } .cta-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--grad); opacity: 0.55; } @media (max-width: 600px) { .cta-box { padding: 48px 24px; } } .cta-box h2 { font-family: var(--ff-d); font-size: var(--h2); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 18px; } .cta-box p { color: var(--muted); font-size: var(--sub); font-weight: 400; margin-bottom: 36px; line-height: 1.75; } .cta-box .acts { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; } .cta-note { margin-top: 22px; font-size: 0.84rem; color: var(--dim); } /* ─────────────── FOOTER ─────────────── */ footer { padding: 44px 48px; border-top: 1px solid var(--border); position: relative; z-index: 1; } @media (max-width: 768px) { footer { padding: 36px 20px; } } .ft-in { max-width: 1160px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .ft-logo picture, .ft-logo img { height: 24px; width: auto; max-width: 130px; object-fit: contain; object-position: left center; opacity: 0.55; display: block; } .ft-links { display: flex; gap: 24px; } .ft-links a { font-size: 0.84rem; color: var(--muted); transition: color .2s; } .ft-links a:hover { color: var(--text); } .ft-copy { font-size: 0.84rem; color: var(--dim); } @media (max-width: 600px) { .ft-in { flex-direction: column; align-items: flex-start; gap: 16px; } } /* ─────────────── TILT ─────────────── */ .tilt { transform-style: preserve-3d; } /* ═══════════════════════════════════════════════════ SERVICE PAGE — Specific Styles ═══════════════════════════════════════════════════ */ /* ─────────────── BREADCRUMB ─────────────── */ .breadcrumb { padding: 90px 0 0; position: relative; z-index: 1; } .breadcrumb-inner { max-width: 1160px; margin: 0 auto; padding: 24px 48px; display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--dim); } @media (max-width: 768px) { .breadcrumb-inner { padding: 16px 20px; } } .breadcrumb-inner a { color: var(--muted); transition: color .2s; } .breadcrumb-inner a:hover { color: var(--cyan); } .breadcrumb-inner .bc-sep { color: var(--dim); } .breadcrumb-inner .bc-cur { color: var(--text); } /* ─────────────── SERVICE HERO ─────────────── */ .srv-hero { padding: 48px 0 100px; position: relative; overflow: hidden; } @media (max-width: 768px) { .srv-hero { padding: 32px 0 72px; } } .srv-hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 48px; width: 100%; } @media (max-width: 768px) { .srv-hero-inner { padding: 0 20px; } } .srv-hero-num { font-family: var(--ff-d); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 20px; display: block; } .srv-hero h1 { font-family: var(--ff-d); font-size: var(--h1); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; color: var(--text); margin-bottom: 24px; } .srv-hero-lead { font-size: var(--sub); color: var(--muted); line-height: 1.75; font-weight: 400; margin-bottom: 40px; max-width: 520px; } .srv-hero-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* ─────────────── PAIN POINTS ─────────────── */ .pain-section { padding: 90px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .pain-hd { text-align: center; margin-bottom: 52px; } .pain-hd .sec-label { justify-content: center; } .pain-hd .sec-title, .pain-hd .sec-sub { margin-left: auto; margin-right: auto; text-align: center; } .pain-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } @media (max-width: 860px) { .pain-grid { grid-template-columns: 1fr; } } .pain-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--rl); padding: 32px; position: relative; transition: border-color .3s; } .pain-card:hover { border-color: rgba(255,255,255,0.14); } .pain-icon { width: 44px; height: 44px; background: rgba(232,234,237,0.04); border: 1px solid var(--border); border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; } .pain-icon svg { width: 20px; height: 20px; stroke: var(--muted); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pain-t { font-family: var(--ff-d); font-size: 1rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; } .pain-d { font-size: 1.05rem; color: var(--muted); line-height: 1.65; font-weight: 400; } /* ─────────────── HOW IT WORKS ─────────────── */ .how-section { padding: 100px 0; } .how-hd { margin-bottom: 64px; } .how-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; } @media (max-width: 1024px) { .how-steps { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .how-steps { grid-template-columns: 1fr; } } .how-step { padding: 36px 28px; position: relative; border: 1px solid var(--border); background: var(--surface); transition: background .3s; } .how-step:not(:last-child) { border-right: none; } @media (max-width: 1024px) { .how-step:nth-child(2) { border-right: 1px solid var(--border); } .how-step:nth-child(n+3) { border-top: none; } } @media (max-width: 560px) { .how-step { border-right: 1px solid var(--border); } .how-step:not(:first-child) { border-top: none; } } .how-step:first-child { border-radius: var(--rl) 0 0 var(--rl); } .how-step:last-child { border-radius: 0 var(--rl) var(--rl) 0; border-right: 1px solid var(--border); } @media (max-width: 1024px) { .how-step:first-child { border-radius: var(--rl) 0 0 0; } .how-step:nth-child(2) { border-radius: 0 var(--rl) 0 0; } .how-step:nth-child(3) { border-radius: 0 0 0 var(--rl); } .how-step:last-child { border-radius: 0 0 var(--rl) 0; border-right: 1px solid var(--border); } } .how-step:hover { background: var(--elevated); } .how-step-num { font-family: var(--ff-d); font-size: 0.65rem; font-weight: 700; color: var(--dim); letter-spacing: 0.1em; position: absolute; top: 24px; right: 24px; } .how-step-bar { width: 32px; height: 2px; background: var(--grad); margin-bottom: 20px; border-radius: 2px; } .how-step-t { font-family: var(--ff-d); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; } .how-step-d { font-size: 1.05rem; color: var(--muted); line-height: 1.65; font-weight: 400; } /* ─────────────── FEATURES GRID ─────────────── */ .feat-section { padding: 100px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .feat-hd { margin-bottom: 52px; } .feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--border); border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; } @media (max-width: 860px) { .feat-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } } .feat-card { background: var(--bg); padding: 32px 28px; position: relative; overflow: hidden; transition: background .3s; } .feat-card:hover { background: var(--elevated); } .feat-card::after { content: ''; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity .3s; pointer-events: none; } .feat-card:hover::after { opacity: 0.03; } .feat-icon { width: 40px; height: 40px; background: var(--cyan-dim); border: 1px solid rgba(106,195,205,0.18); border-radius: 11px; display: grid; place-items: center; margin-bottom: 16px; transition: all .3s; } .feat-card:hover .feat-icon { background: var(--cyan-glow); border-color: rgba(106,195,205,0.4); } .feat-icon svg { width: 18px; height: 18px; stroke: var(--cyan); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .feat-t { font-family: var(--ff-d); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; } .feat-d { font-size: 1.02rem; color: var(--muted); line-height: 1.6; font-weight: 400; } /* ─────────────── RESULTS (service pages) ─────────────── */ .srv-results { padding: 100px 0; } .srv-results-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; } @media (max-width: 768px) { .srv-results-grid { grid-template-columns: 1fr; } } /* Proof badge */ .proof-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,152,120,0.08); border: 1px solid rgba(0,152,120,0.2); border-radius: 50px; padding: 6px 14px; font-size: 0.78rem; font-weight: 600; color: var(--green); margin-top: 24px; } .proof-badge::before { content: ''; width: 6px; height: 6px; background: var(--green); border-radius: 50%; } /* ─────────────── FOR WHOM ─────────────── */ .whom-section { padding: 100px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .whom-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 48px; } @media (max-width: 768px) { .whom-grid { grid-template-columns: 1fr; } } .whom-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--rl); padding: 28px 28px 28px 24px; display: flex; gap: 18px; align-items: flex-start; transition: border-color .3s; } .whom-card:hover { border-color: rgba(106,195,205,0.2); } .whom-check { width: 28px; height: 28px; background: rgba(0,152,120,0.1); border: 1px solid rgba(0,152,120,0.25); border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; } .whom-check svg { width: 13px; height: 13px; stroke: var(--green); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .whom-t { font-family: var(--ff-d); font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; } .whom-d { font-size: 1rem; color: var(--muted); line-height: 1.6; font-weight: 400; } /* ─────────────── FAQ ACCORDION ─────────────── */ .faq-section { padding: 100px 0; } .faq-list { margin-top: 48px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; } .faq-item { background: var(--surface); border-top: 1px solid var(--border); } .faq-item:first-child { border-top: none; } .faq-q { width: 100%; padding: 22px 28px; text-align: left; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--ff-d); font-size: 1rem; font-weight: 700; color: var(--text); transition: background .2s; } .faq-q:hover { background: var(--elevated); } .faq-chevron { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform .3s var(--ease); } .faq-item.open .faq-chevron { transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease), padding .4s var(--ease); padding: 0 28px; } .faq-item.open .faq-a { max-height: 400px; padding: 0 28px 22px; } .faq-a p { font-size: 1.05rem; color: var(--muted); line-height: 1.75; font-weight: 400; } /* ─────────────── RELATED SERVICES ─────────────── */ .related-section { padding: 100px 0; background: var(--surface); border-top: 1px solid var(--border); } .related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--border); border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; margin-top: 48px; } @media (max-width: 860px) { .related-grid { grid-template-columns: 1fr; } } .related-card { background: var(--bg); padding: 28px 24px; position: relative; overflow: hidden; transition: background .3s; display: flex; flex-direction: column; gap: 10px; } .related-card:hover { background: var(--elevated); } .related-card::after { content: ''; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity .3s; } .related-card:hover::after { opacity: 0.04; } .related-num { font-family: var(--ff-d); font-size: 0.62rem; font-weight: 700; color: var(--dim); letter-spacing: 0.1em; } .related-n { font-family: var(--ff-d); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; position: relative; z-index: 1; } .related-d { font-size: 0.95rem; color: var(--muted); line-height: 1.5; font-weight: 400; position: relative; z-index: 1; } .related-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--cyan); margin-top: auto; position: relative; z-index: 1; transition: gap .2s; } .related-card:hover .related-link { gap: 10px; } .related-link svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* ─────────────── ILLUSTRATIONS ─────────────── */ /* Funil — Mídia com IA */ .illu-funnel { width: 100%; max-width: 380px; } .funnel-stage { height: 48px; margin: 0 auto; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; margin-bottom: 4px; background: var(--surface); border: 1px solid var(--border); font-size: 0.82rem; font-weight: 600; color: var(--muted); transition: all .3s; } .funnel-stage:hover { border-color: rgba(106,195,205,0.3); color: var(--text); } .funnel-stage .fs-val { font-family: var(--ff-d); font-weight: 800; color: var(--cyan); font-size: 0.95rem; } .funnel-stage:nth-child(1) { width: 100%; } .funnel-stage:nth-child(2) { width: 88%; } .funnel-stage:nth-child(3) { width: 72%; } .funnel-stage:nth-child(4) { width: 54%; background: linear-gradient(135deg, rgba(106,195,205,0.08), rgba(0,152,120,0.05)); border-color: rgba(106,195,205,0.2); } /* Chart — Análise */ .illu-chart { width: 100%; max-width: 380px; } .chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 160px; } .chart-bar { flex: 1; border-radius: 6px 6px 0 0; background: var(--surface); border: 1px solid var(--border); transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease); position: relative; } .chart-bar.animated { transform: scaleY(1); } .chart-bar:nth-child(1) { height: 40%; } .chart-bar:nth-child(2) { height: 60%; } .chart-bar:nth-child(3) { height: 75%; } .chart-bar:nth-child(4) { height: 55%; transition-delay: .1s; } .chart-bar:nth-child(5) { height: 90%; background: linear-gradient(to top, rgba(106,195,205,0.25), rgba(0,152,120,0.12)); border-color: rgba(106,195,205,0.3); transition-delay: .2s; } .chart-bar:nth-child(6) { height: 100%; background: linear-gradient(to top, rgba(106,195,205,0.35), rgba(0,152,120,0.18)); border-color: rgba(106,195,205,0.4); transition-delay: .3s; } .chart-label { font-size: 0.7rem; color: var(--dim); text-align: center; margin-top: 8px; } /* Chat — Agente de Atendimento */ .illu-chat { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl); padding: 20px; } .chat-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .chat-avatar { width: 32px; height: 32px; background: var(--cyan-dim); border: 1px solid rgba(106,195,205,0.25); border-radius: 50%; display: grid; place-items: center; } .chat-avatar svg { width: 14px; height: 14px; stroke: var(--cyan); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chat-agent-name { font-size: 0.82rem; font-weight: 700; } .chat-status { font-size: 0.72rem; color: var(--green); display: flex; align-items: center; gap: 4px; } .chat-status::before { content: ''; width: 6px; height: 6px; background: var(--green); border-radius: 50%; } .chat-msg { margin-bottom: 8px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; } .chat-msg.shown { opacity: 1; transform: none; } .chat-bubble { display: inline-block; padding: 9px 14px; border-radius: 12px; font-size: 0.82rem; line-height: 1.5; max-width: 85%; } .chat-msg.agent .chat-bubble { background: var(--elevated); color: var(--text); border-radius: 4px 12px 12px 12px; } .chat-msg.user { text-align: right; } .chat-msg.user .chat-bubble { background: linear-gradient(135deg, rgba(106,195,205,0.18), rgba(0,152,120,0.12)); color: var(--text); border-radius: 12px 4px 12px 12px; } .chat-time { font-size: 0.68rem; color: var(--dim); margin-top: 3px; } /* Pipeline — SDR */ .illu-pipeline { width: 100%; max-width: 380px; } .pipeline-stages { display: flex; flex-direction: column; gap: 6px; } .pipeline-stage { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; transition: border-color .3s; } .pipeline-stage:hover { border-color: rgba(106,195,205,0.25); } .ps-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); } .ps-count { font-family: var(--ff-d); font-size: 1rem; font-weight: 800; } .ps-count.active { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ps-bar { height: 3px; border-radius: 3px; background: var(--border); margin-top: 8px; } .ps-fill { height: 100%; border-radius: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); } .ps-fill.animated { transform: scaleX(1); } /* Timeline — Produção Digital */ .illu-timeline { width: 100%; max-width: 380px; } .tl-row { margin-bottom: 16px; } .tl-label { font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; display: flex; justify-content: space-between; } .tl-bar-wrap { height: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .tl-bar-fill { height: 100%; display: flex; align-items: center; padding: 0 12px; font-size: 0.75rem; font-weight: 700; color: #fff; white-space: nowrap; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); border-radius: 8px; } .tl-bar-fill.animated { transform: scaleX(1); } .tl-bar-fill.slow { background: rgba(232,234,237,0.12); color: var(--dim); width: 100%; } .tl-bar-fill.fast { background: var(--grad); width: 18%; } /* Dispatch grid — WhatsApp API */ .illu-dispatch { width: 100%; max-width: 380px; } .dispatch-grid { display: grid; grid-template-columns: repeat(8,1fr); gap: 4px; } .d-dot { width: 100%; aspect-ratio: 1; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); transition: background .3s, border-color .3s; } .d-dot.sent { background: rgba(0,152,120,0.25); border-color: rgba(0,152,120,0.4); } .d-dot.sending { background: rgba(106,195,205,0.18); border-color: rgba(106,195,205,0.35); animation: pulse-dot 1.5s ease-in-out infinite; } @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.4} } .dispatch-stat { margin-top: 14px; display: flex; gap: 14px; } .dispatch-stat span { font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; gap: 5px; } .dispatch-stat span::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: rgba(0,152,120,0.35); } .dispatch-stat span.sending::before { background: rgba(106,195,205,0.35); } /* CRM Flow SVG */ .illu-crm { width: 100%; max-width: 380px; } .crm-node { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; font-size: 0.8rem; font-weight: 600; text-align: center; transition: border-color .3s; } .crm-node.active { border-color: rgba(106,195,205,0.4); background: var(--cyan-dim); color: var(--cyan); } .crm-arrow { text-align: center; color: var(--dim); font-size: 1rem; line-height: 1; padding: 2px 0; } /* Launch tree — Coprodução */ .illu-launch { width: 100%; max-width: 380px; } .launch-phase { margin-bottom: 10px; } .lp-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .lp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan-dim); border: 1.5px solid var(--cyan); flex-shrink: 0; } .lp-title { font-size: 0.82rem; font-weight: 700; color: var(--text); } .lp-items { margin-left: 24px; display: flex; flex-direction: column; gap: 4px; } .lp-item { font-size: 0.78rem; color: var(--muted); padding: 5px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; } /* ─────────────── COUNTER ANIMATION ─────────────── */ .count-up[data-target] { transition: all 0s; } /* ─────────────── SERVICE PAGE EXTRAS ─────────────── */ /* Breadcrumb .container alias (pages use