/* ============================================================ VS Digital — Apresentação Cinematográfica Inspirada na linguagem editorial: grão, brilho que se move, tipografia fina com tracking largo. Paleta dark azul/ciano. Mobile-first. ============================================================ */ :root { --bg: #06080e; --bg-2: #0a0d16; --ink: #eef1f7; --soft: #c2c9d8; --mut: #8b94a8; --faint: #5d6680; --blue: #4b8bf5; --cyan: #2bd4e6; --grad: linear-gradient(120deg, #4b8bf5, #2bd4e6); --line: rgba(255,255,255,0.10); --line-2: rgba(255,255,255,0.18); --display: "Jost", system-ui, sans-serif; --body: "Manrope", system-ui, sans-serif; --ease: cubic-bezier(.16,1,.3,1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-snap-type: y proximity; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; /* clipa overflow horizontal na raiz (geo-lines/atmos) sem criar contêiner de scroll → sticky segue OK */ /* Reserva a barra de rolagem desde o início: ao final da intro, remover overflow:hidden do não desloca o conteúdo centralizado (sem reflow). */ scrollbar-gutter: stable; } @media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; scroll-snap-type: none; } } body { font-family: var(--body); background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; /* clip (não hidden): impede scroll horizontal SEM criar contêiner de scroll, mantendo overflow-y: visible — pré-requisito p/ o position: sticky funcionar. */ overflow-x: clip; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ---------- Atmosfera de fundo (fixa) ---------- */ .atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--bg); } .atmos .glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; } .atmos .g1 { width: 70vw; height: 70vw; left: -10vw; top: -20vw; background: radial-gradient(circle, rgba(75,139,245,.40), transparent 65%); animation: drift1 26s var(--ease) infinite alternate; } .atmos .g2 { width: 60vw; height: 60vw; right: -15vw; bottom: -15vw; background: radial-gradient(circle, rgba(43,212,230,.30), transparent 65%); animation: drift2 32s var(--ease) infinite alternate; } @keyframes drift1 { to { transform: translate(12vw, 14vh) scale(1.15); } } @keyframes drift2 { to { transform: translate(-10vw, -12vh) scale(1.1); } } .atmos .grain { position: absolute; inset: -50%; opacity: .10; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grainShift 7s steps(6) infinite; } @keyframes grainShift { 0%{transform:translate(0,0)}16%{transform:translate(-3%,2%)}33%{transform:translate(2%,-3%)} 50%{transform:translate(-2%,3%)}66%{transform:translate(3%,1%)}83%{transform:translate(-1%,-2%)}100%{transform:translate(0,0)} } .atmos .dust { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .62; } .atmos .vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%); } @media (prefers-reduced-motion: reduce){ .atmos .glow, .atmos .grain { animation: none; } } /* ---------- Estrutura de seções ---------- */ .stage { position: relative; z-index: 1; } .scene { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 96px 24px; scroll-snap-align: start; } @media (min-width: 760px){ .scene { padding: 110px 7vw; } } /* ---------- Tipografia cinematográfica ---------- */ .kicker { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .42em; text-transform: uppercase; color: var(--cyan); } .thin { font-family: var(--display); font-weight: 300; letter-spacing: .04em; line-height: 1.08; text-wrap: balance; } .track { font-family: var(--display); font-weight: 300; text-transform: uppercase; letter-spacing: .26em; line-height: 1.3; } .divider { width: 54px; height: 1px; background: var(--grad); opacity: .8; } /* ============================================================ CAPA ============================================================ */ .capa { align-items: center; text-align: center; } .capa .inner { display: flex; flex-direction: column; align-items: center; gap: 26px; } /* O lockup "VS DIGITAL" é composto por DUAS imagens separadas — o VS (mesmo logo-vs.png da intro, p/ encaixe pixel-perfect) e o DIGITAL — posicionadas dentro de um box com a proporção do logo original (1732×348). Os %s vêm do alpha-scan das imagens (a tinta cai exatamente onde caía no PNG único). */ .capa .brand-lockup { position: relative; width: clamp(248px, 72vw, 560px); aspect-ratio: 1732 / 348; line-height: 0; } .capa .brand-lockup .bl-vs, .capa .brand-lockup .bl-digital { position: absolute; height: auto; filter: drop-shadow(0 12px 46px rgba(75,139,245,.42)); } .capa .brand-lockup .bl-vs { width: 37.74%; left: 0.48%; top: -52.09%; } .capa .brand-lockup .bl-digital { width: 61.56%; left: 41.86%; top: 14.22%; } .capa .brand-lockup .sheen { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url('vs-digital-white.png') center / contain no-repeat; mask: url('vs-digital-white.png') center / contain no-repeat; background: linear-gradient(105deg, transparent 38%, rgba(120,235,255,.9) 50%, transparent 62%); background-size: 260% 100%; background-repeat: no-repeat; opacity: 0; animation: sheen 5.4s var(--ease) 1.1s infinite; } @keyframes sheen { 0% { background-position: 130% 0; opacity: 0; } 8% { opacity: 1; } 42% { background-position: -40% 0; opacity: 1; } 56%, 100% { background-position: -40% 0; opacity: 0; } } @media (prefers-reduced-motion: reduce){ .capa .brand-lockup .sheen { animation: none; } } .capa .sub { font-size: 12px; letter-spacing: .42em; color: var(--soft); } .capa .tag { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .34em; font-size: clamp(14px, 3.4vw, 19px); background: linear-gradient(110deg, #4b8bf5, #2bd4e6, #4b8bf5); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-left: .34em; animation: tagShift 6s var(--ease) infinite; } @keyframes tagShift { 0%,100%{background-position:0 0} 50%{background-position:100% 0} } @media (prefers-reduced-motion: reduce){ .capa .tag { animation: none; } } /* Centralizado SEM transform: a cortina da intro (revealLTR) seta transform:none nos elementos que revela, o que quebraria um translateX(-50%). */ .scroll-hint { position: absolute; left: 0; right: 0; bottom: 78px; width: max-content; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--mut); } .scroll-hint .mouse { width: 22px; height: 36px; border: 1px solid var(--line-2); border-radius: 12px; position: relative; } .scroll-hint .mouse::after { content:""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px; background: var(--cyan); transform: translateX(-50%); animation: wheel 1.8s var(--ease) infinite; } @keyframes wheel { 0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1;transform:translate(-50%,9px)}100%{opacity:0;transform:translate(-50%,12px)} } /* ============================================================ EDITORIAL (título fino + texto de apoio) ============================================================ */ .editorial .e-inner { display: grid; gap: 38px; max-width: 1180px; margin: 0 auto; width: 100%; } @media (min-width: 860px){ .editorial .e-inner { grid-template-columns: 1.15fr .85fr; gap: 8%; align-items: center; } } .editorial .e-head { display: flex; flex-direction: column; gap: 22px; } .editorial h2 { font-size: clamp(30px, 8.5vw, 68px); } .editorial h2.upper { text-transform: uppercase; letter-spacing: .14em; font-weight: 300; line-height: 1.18; } .editorial .e-body { display: flex; flex-direction: column; gap: 20px; } .editorial .e-body p { color: var(--soft); font-size: clamp(15px, 4vw, 18px); max-width: 42ch; } .editorial .e-body p b { color: var(--ink); font-weight: 600; } /* ---------- QUEM SOMOS: manifesto (esq) + cartão orbital de vidro (dir) ---------- */ /* manifesto tipográfico (escrita da Opção 1) */ .editorial .manifesto { display: flex; flex-direction: column; gap: 2px; margin: 0; } .editorial .manifesto .m-line { display: flex; align-items: baseline; gap: 16px; } .editorial .manifesto .m-n { font-family: var(--display); font-weight: 300; font-size: 14px; letter-spacing: .1em; color: var(--faint); min-width: 24px; } .editorial .manifesto .m-w { font-family: var(--display); font-weight: 300; letter-spacing: .01em; line-height: 1.04; font-size: clamp(34px, 8vw, 66px); color: var(--ink); } .editorial .manifesto .m-w.grad-anim { background: linear-gradient(110deg, #4b8bf5, #2bd4e6, #4b8bf5); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: tagShift 6s var(--ease) infinite; } .editorial .m-sup { color: var(--soft); font-size: clamp(15px, 4vw, 18px); max-width: 46ch; line-height: 1.6; } .editorial .m-sup b { color: var(--ink); font-weight: 600; } /* cartão de vidro (efeitos do retângulo da Opção 3) */ .editorial .qs-card { position: relative; border: 1px solid var(--line-2); border-radius: 18px; padding: 26px 22px; background: linear-gradient(160deg, rgba(43,212,230,.07), rgba(255,255,255,.02)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); overflow: hidden; box-shadow: 0 30px 70px -36px rgba(0,0,0,.9); } .editorial .qs-card::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: linear-gradient(180deg, #4b8bf5, #2bd4e6); } /* círculo orbital (animação da Opção 2) */ .editorial .qs-orbit { position: relative; height: 168px; display: grid; place-items: center; margin-bottom: 6px; } .editorial .qs-orbit .o-ring { position: absolute; border-radius: 50%; } .editorial .qs-orbit .r1 { width: 64px; height: 64px; border: 1px solid rgba(43,212,230,.30); } .editorial .qs-orbit .r2 { width: 114px; height: 114px; border: 1px solid rgba(75,139,245,.22); } .editorial .qs-orbit .r3 { width: 168px; height: 168px; border: 1px solid rgba(43,212,230,.12); } .editorial .qs-orbit .o-dot { position: absolute; left: 50%; top: 50%; animation: qsspin linear infinite; } .editorial .qs-orbit .d1 { width: 114px; height: 114px; margin: -57px 0 0 -57px; animation-duration: 7s; } .editorial .qs-orbit .d1::before { content: ""; position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transform: translateX(-50%); } .editorial .qs-orbit .d2 { width: 168px; height: 168px; margin: -84px 0 0 -84px; animation-duration: 11s; animation-direction: reverse; } .editorial .qs-orbit .d2::before { content: ""; position: absolute; top: -2px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px var(--blue); transform: translateX(-50%); } @keyframes qsspin { to { transform: rotate(360deg); } } .editorial .qs-orbit .o-core { position: relative; z-index: 2; text-align: center; } .editorial .qs-orbit .o-num { font-family: var(--display); font-weight: 300; font-size: 46px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .editorial .qs-orbit .o-lab { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--soft); margin-top: 3px; } .editorial .qs-p { color: var(--soft); font-size: 14.5px; line-height: 1.6; text-align: center; margin-top: 2px; } .editorial .qs-p b { color: var(--ink); font-weight: 600; } .editorial .qs-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 15px; } .editorial .qs-badges span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 11px; background: rgba(255,255,255,.03); } @media (prefers-reduced-motion: reduce){ .editorial .manifesto .m-w.grad-anim, .editorial .qs-orbit .o-dot { animation: none; } } /* linha geométrica decorativa */ .geo-line { position: absolute; right: -2vw; top: 50%; width: 46vw; height: 46vw; max-width: 560px; max-height: 560px; transform: translateY(-50%); pointer-events: none; opacity: .5; } .geo-line svg { width: 100%; height: 100%; } .geo-line.left { left: -2vw; right: auto; } @media (max-width: 859px){ .geo-line { opacity: .25; right: -20vw; } .geo-line.left { left: -20vw; right: auto; } } /* dois pilares (variação editorial) */ .pillars-x { display: flex; flex-direction: column; gap: 8px; } .pillars-x .p-line { font-family: var(--display); font-weight: 300; text-transform: uppercase; letter-spacing: .1em; font-size: clamp(26px, 7.5vw, 58px); line-height: 1.12; } .pillars-x .p-line .n { color: var(--faint); font-size: .42em; vertical-align: super; letter-spacing: .1em; margin-right: .6em; } .pillars-x .p-line.alt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================ VITRINE DE PROJETOS (cartões escalonados) ============================================================ */ .gallery { padding-top: 110px; padding-bottom: 120px; } .gallery .g-top { max-width: 1180px; margin: 0 auto 6px; width: 100%; display: flex; flex-direction: column; gap: 16px; } .gallery h2 { font-size: clamp(28px, 8vw, 60px); } /* trilho: scroll horizontal no mobile, fileira escalonada no desktop */ .rail { display: flex; gap: 18px; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 48px 24px 30px; margin: 0 -24px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } @media (min-width: 980px){ /* cards maiores: centraliza quando cabe, rola (sem barra) quando não cabe — "safe center" */ .rail { overflow-x: auto; overflow-y: hidden; justify-content: safe center; gap: 22px; padding: 70px 8px 40px; margin: 0; flex-wrap: nowrap; scroll-snap-type: none; } } .pf-card { position: relative; flex: 0 0 auto; width: 84vw; max-width: 360px; scroll-snap-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0; } @media (min-width: 980px){ .pf-card { width: 256px; } } /* vídeos hero dos cases (no lugar das fotos estáticas) — herdam o estilo de .pf-img. Vídeos são horizontais → enquadra no centro (não no topo). */ .pf-frame video.pf-img { display: block; background: var(--bg-2); object-position: center center; } /* Essenza: a lareira fica à esquerda → puxa o enquadramento p/ a esquerda */ .pf-frame video.pf-img[src*="essenza"] { object-position: 20% center; } /* quando o "preview do site" é um vídeo da home (no lugar da foto) */ .pf-frame video.pf-shot { display: block; } /* ---------- CASES: vídeo hero → preview do site (transição "scan" elegante) ---------- O screenshot (.pf-shot) nasce oculto e é revelado de cima p/ baixo por uma linha de luz (.pf-scan) que varre o card; depois dissolve de volta ao vídeo. */ .pf-frame .pf-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; clip-path: inset(0 0 100% 0); pointer-events: none; } .pf-frame.reveal-shot .pf-shot { opacity: 1; clip-path: inset(0 0 0% 0); transition: clip-path 1.3s var(--ease), opacity .35s ease; } .pf-frame.fade-shot .pf-shot { /* volta ao vídeo: só dissolve (mantém o clip cheio) */ opacity: 0; clip-path: inset(0 0 0% 0); transition: opacity .9s ease; } .pf-frame .pf-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(43,212,230,.9) 28%, #eafcff 50%, rgba(43,212,230,.9) 72%, transparent); box-shadow: 0 0 14px rgba(43,212,230,.9), 0 0 30px rgba(43,212,230,.55); } .pf-frame.reveal-shot .pf-scan { animation: pfScan 1.3s var(--ease) forwards; } @keyframes pfScan { 0%{ top: 0; opacity: 0; } 12%{ opacity: 1; } 88%{ opacity: 1; } 100%{ top: 100%; opacity: 0; } } @media (prefers-reduced-motion: reduce){ .pf-frame .pf-shot, .pf-frame .pf-scan { display: none; } } /* moldura + imagem retrato */ .pf-frame { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; border-radius: 4px; background: var(--bg-2); box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); transition: transform .6s var(--ease), box-shadow .6s var(--ease); } .pf-frame::after { /* borda fina em gradiente */ content:""; position: absolute; inset: 0; border-radius: 4px; padding: 1px; pointer-events: none; background: linear-gradient(160deg, rgba(43,212,230,.7), rgba(75,139,245,.25) 50%, rgba(255,255,255,.05)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .pf-frame .scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(6,8,14,.05) 40%, rgba(6,8,14,.65)); opacity: .8; transition: opacity .6s; } .pf-frame .pf-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.2s var(--ease); } .pf-num { position: absolute; z-index: 3; top: 12px; left: 12px; font-family: var(--display); font-weight: 300; font-size: 13px; letter-spacing: .12em; color: var(--ink); opacity: .85; } .pf-cat { position: absolute; z-index: 3; bottom: 12px; left: 12px; right: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--cyan); } /* conector + rótulo */ .pf-connector { width: 1px; height: 30px; background: linear-gradient(var(--line-2), transparent); margin-top: 0; } .pf-label { font-family: var(--display); font-weight: 300; text-transform: uppercase; letter-spacing: .2em; font-size: 13px; color: var(--soft); text-align: center; transition: color .4s; white-space: nowrap; } .pf-card .pf-plus { font-size: 10px; letter-spacing: .2em; color: var(--faint); margin-top: 6px; text-transform: uppercase; opacity: 0; transition: opacity .4s, color .4s; } /* estados */ .pf-card:hover .pf-frame { transform: translateY(-10px); box-shadow: 0 40px 80px -30px rgba(43,212,230,.4); } .pf-card:hover .pf-frame .scrim { opacity: .45; } .pf-card:hover .pf-frame .pf-img { transform: scale(1.06); } .pf-card:hover .pf-label { color: var(--ink); } .pf-card:hover .pf-plus { opacity: 1; color: var(--cyan); } /* escalonamento (desktop) */ @media (min-width: 980px){ .pf-card:nth-child(odd) { margin-top: 0; } .pf-card:nth-child(even) { margin-top: 64px; } .pf-card:nth-child(3n) { margin-top: 30px; } } /* ============================================================ VISOR DE PROJETO (overlay tela cheia) ============================================================ */ .viewer { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: var(--bg); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; } .viewer.open { opacity: 1; visibility: visible; } .viewer .v-media { position: absolute; inset: 0; z-index: 0; } .viewer .v-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .viewer .v-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,8,14,.55) 0%, rgba(6,8,14,.25) 30%, rgba(6,8,14,.85) 78%, rgba(6,8,14,.96) 100%); } .viewer .v-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; } .viewer .v-index { font-family: var(--display); font-weight: 300; letter-spacing: .16em; font-size: 14px; color: var(--soft); } .viewer .v-index b { color: var(--ink); font-weight: 400; } .viewer .v-close { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid var(--line-2); color: var(--ink); transition: transform .4s, background .3s; } .viewer .v-close:hover { transform: rotate(90deg); background: rgba(255,255,255,.12); } .viewer .v-close svg { width: 20px; height: 20px; } .viewer .v-bottom { position: relative; z-index: 3; margin-top: auto; padding: 24px clamp(24px, 7vw, 90px) clamp(34px, 7vh, 70px); display: flex; flex-direction: column; gap: 18px; max-width: 920px; } .viewer .v-cat { font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); } .viewer .v-name { font-family: var(--display); font-weight: 300; letter-spacing: .02em; line-height: 1.04; font-size: clamp(34px, 9vw, 78px); } .viewer .v-desc { color: var(--soft); font-size: clamp(15px, 4vw, 19px); max-width: 52ch; } .viewer .v-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; } /* setas */ .v-nav { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); color: var(--ink); transition: background .3s, transform .3s; } .v-nav:hover { background: rgba(255,255,255,.12); } .v-nav svg { width: 22px; height: 22px; } .v-nav.prev { left: clamp(12px, 3vw, 34px); } .v-nav.next { right: clamp(12px, 3vw, 34px); } .v-nav.prev:hover { transform: translateY(-50%) translateX(-3px); } .v-nav.next:hover { transform: translateY(-50%) translateX(3px); } @media (max-width: 620px){ .v-nav { width: 44px; height: 44px; top: auto; bottom: 50%; } } /* ============================================================ BOTÕES ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--body); font-weight: 600; font-size: 14px; letter-spacing: .02em; padding: 14px 24px; border-radius: 999px; border: 1px solid transparent; transition: transform .4s var(--ease), box-shadow .4s, background .3s, border-color .3s; } .btn svg { width: 17px; height: 17px; } .btn-primary { background: var(--grad); color: #04121f; box-shadow: 0 12px 34px -12px rgba(43,212,230,.6); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 46px -14px rgba(43,212,230,.75); } .btn-ghost { border-color: var(--line-2); color: var(--ink); background: rgba(255,255,255,.03); } .btn-ghost:hover { transform: translateY(-3px); border-color: var(--cyan); background: rgba(255,255,255,.07); } .btn-wa { background: #25D366; color: #04230f; box-shadow: 0 12px 34px -12px rgba(37,211,102,.55); } .btn-wa:hover { transform: translateY(-3px); box-shadow: 0 20px 46px -14px rgba(37,211,102,.7); } /* ============================================================ CTA / FECHAMENTO ============================================================ */ .cta { align-items: center; text-align: center; } .cta .c-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 760px; } .cta h2 { font-size: clamp(34px, 10vw, 82px); } .cta .c-sub { color: var(--soft); font-size: clamp(15px, 4vw, 19px); max-width: 46ch; } .cta .c-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; } .cta .c-contacts { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; margin-top: 26px; font-size: 13px; color: var(--mut); } .cta .c-contacts a { display: inline-flex; align-items: center; gap: 8px; transition: color .3s; } .cta .c-contacts a:hover { color: var(--ink); } .cta .c-contacts svg { width: 15px; height: 15px; color: var(--cyan); } .cta .c-contacts .ph { font-style: italic; color: var(--faint); } /* ============================================================ CHROME — barra inferior fixa + progresso + índice lateral ============================================================ */ .progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 90; background: var(--grad); box-shadow: 0 0 10px var(--cyan); } .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: linear-gradient(0deg, rgba(6,8,14,.92), rgba(6,8,14,0)); pointer-events: none; } .dock > * { pointer-events: auto; } .dock .d-brand { display: flex; align-items: center; gap: 9px; } .dock .d-brand img { width: 22px; height: 22px; object-fit: contain; opacity: .9; } .dock .d-brand .t { font-family: var(--display); font-weight: 300; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; } .dock .d-actions { display: flex; align-items: center; gap: 8px; } .dock .d-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); transition: color .3s, border-color .3s, background .3s; } .dock .d-btn:hover { color: var(--ink); border-color: var(--line-2); background: rgba(255,255,255,.06); } .dock .d-btn svg { width: 14px; height: 14px; } @media (max-width: 620px){ .dock .d-brand .t { display: none; } } /* índice lateral (desktop) */ .sidedots { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 80; display: none; flex-direction: column; gap: 14px; } @media (min-width: 900px){ .sidedots { display: flex; } } .sidedots button { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; cursor: pointer; padding: 0; transition: transform .3s, background .3s, border-color .3s; } .sidedots button:hover { border-color: var(--cyan); } .sidedots button.active { background: var(--cyan); border-color: var(--cyan); transform: scale(1.35); box-shadow: 0 0 10px var(--cyan); } /* ============================================================ REVEAL ============================================================ */ .js .reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); } .reveal.in { opacity: 1; transform: none; filter: none; } .reveal[data-d="1"]{ transition-delay: .1s; } .reveal[data-d="2"]{ transition-delay: .22s; } .reveal[data-d="3"]{ transition-delay: .34s; } .reveal[data-d="4"]{ transition-delay: .46s; } .reveal[data-d="5"]{ transition-delay: .58s; } .js .pf-card { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .pf-card.in { opacity: 1; transform: none; } @media (min-width: 980px){ .pf-card.in:nth-child(even) { transform: none; } } @media (prefers-reduced-motion: reduce){ .reveal, .pf-card { opacity: 1 !important; transform: none !important; filter: none !important; } } /* ============================================================ BLOCOS DE CONTEÚDO (problema, serviços, processo, impacto, números, FAQ) — herdam a linguagem cinematográfica. ============================================================ */ .block { gap: 14px; } .block .b-top { max-width: 1180px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 16px; } .block h2 { font-size: clamp(28px, 7.6vw, 58px); } .block .b-lead { color: var(--soft); font-size: clamp(15px, 4vw, 18px); max-width: 56ch; } /* grade de 3 cartões (problema + serviços) */ .cards-3 { max-width: 1180px; margin: 40px auto 0; width: 100%; display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 760px){ .cards-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; } } .prob-card, .svc-card, .gain-card { position: relative; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); } .prob-card:hover, .svc-card:hover, .gain-card:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: 0 30px 60px -34px rgba(43,212,230,.5); } .prob-card .ic, .svc-card .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(43,212,230,.08); border: 1px solid rgba(43,212,230,.22); color: var(--cyan); } .prob-card .ic svg, .svc-card .ic svg { width: 22px; height: 22px; } .prob-card h3, .svc-card h3 { font-family: var(--display); font-weight: 400; letter-spacing: .02em; font-size: clamp(20px, 5vw, 25px); color: var(--ink); } .prob-card p, .svc-card p { color: var(--mut); font-size: 14.5px; line-height: 1.65; } /* serviços — número + tagline */ .svc-card { padding-top: 30px; } .svc-card .svc-n { position: absolute; top: 20px; right: 22px; font-family: var(--display); font-weight: 300; font-size: 26px; color: var(--faint); letter-spacing: .08em; } .svc-card .svc-tag { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--cyan); } .svc-card p { color: var(--soft); } /* ---------- PROCESSO ---------- */ .proc-grid { max-width: 1180px; margin: 44px auto 0; width: 100%; display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 680px){ .proc-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px){ .proc-grid { grid-template-columns: repeat(4, 1fr); margin-top: 60px; } } .proc-step { position: relative; padding: 26px 22px 24px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: border-color .5s var(--ease), transform .5s var(--ease); } .proc-step::before { content:""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--grad); opacity: .65; } .proc-step:hover { transform: translateY(-5px); border-color: var(--line-2); } .proc-step .proc-n { font-family: var(--display); font-weight: 300; font-size: 14px; letter-spacing: .18em; color: var(--cyan); } .proc-step .proc-verb { font-size: 10.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); } .proc-step h3 { font-family: var(--display); font-weight: 400; letter-spacing: .04em; font-size: clamp(22px, 5.5vw, 30px); color: var(--ink); } .proc-step p { color: var(--mut); font-size: 14px; line-height: 1.6; } /* ---------- IMPACTO ---------- */ .gain-grid { max-width: 1180px; margin: 44px auto 0; width: 100%; display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 720px){ .gain-grid { grid-template-columns: repeat(2, 1fr); margin-top: 56px; } } .gain-card { gap: 14px; } .gain-card .pills { display: flex; gap: 8px; flex-wrap: wrap; } .gain-card .pills span { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); } .gain-card h3 { font-family: var(--display); font-weight: 400; letter-spacing: .02em; font-size: clamp(22px, 5.4vw, 30px); color: var(--ink); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .gain-card p { color: var(--soft); font-size: 15px; } /* ---------- NÚMEROS ---------- */ .stat-grid { max-width: 1180px; margin: 46px auto 0; width: 100%; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 900px){ .stat-grid { grid-template-columns: repeat(5, 1fr); margin-top: 64px; gap: 18px; } } .stat { text-align: center; padding: 26px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: 8px; transition: border-color .5s, transform .5s; } .stat:hover { border-color: var(--line-2); transform: translateY(-5px); } .stat .stat-num { font-family: var(--display); font-weight: 300; line-height: 1; font-size: clamp(38px, 9vw, 58px); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat .stat-lab { font-size: 12px; letter-spacing: .04em; color: var(--mut); } /* ---------- FAQ ---------- */ .faq-list { max-width: 880px; margin: 40px auto 0; width: 100%; display: flex; flex-direction: column; gap: 12px; } @media (min-width: 760px){ .faq-list { margin-top: 54px; } } .faq-item { border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); overflow: hidden; transition: border-color .4s; } .faq-item[open] { border-color: var(--line-2); background: rgba(255,255,255,.035); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-family: var(--display); font-weight: 300; letter-spacing: .02em; font-size: clamp(16px, 4.4vw, 21px); color: var(--ink); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item .faq-x { position: relative; flex: 0 0 auto; width: 18px; height: 18px; } .faq-item .faq-x::before, .faq-item .faq-x::after { content:""; position: absolute; left: 50%; top: 50%; background: var(--cyan); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .35s var(--ease), opacity .35s; } .faq-item .faq-x::before { width: 16px; height: 2px; } .faq-item .faq-x::after { width: 2px; height: 16px; } .faq-item[open] .faq-x::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq-item .faq-a { padding: 0 22px 22px; } .faq-item .faq-a p { color: var(--soft); font-size: 15px; line-height: 1.7; max-width: 64ch; } /* ============================================================ FORMULÁRIO DE CONTATO (cinematográfico) ============================================================ */ .c-form { width: 100%; max-width: 640px; margin: 6px auto 0; display: grid; gap: 16px; grid-template-columns: 1fr; text-align: left; } @media (min-width: 620px){ .c-form { grid-template-columns: 1fr 1fr; } } .c-form .field { position: relative; } .c-form .field-full { grid-column: 1 / -1; } .c-form input, .c-form select, .c-form textarea { width: 100%; font-family: var(--body); font-size: 15px; color: var(--ink); background: rgba(255,255,255,.03); border: 1px solid var(--line-2); border-radius: 12px; padding: 18px 16px 8px; outline: none; transition: border-color .3s, background .3s; resize: vertical; } .c-form textarea { padding-top: 22px; } .c-form select { color: var(--soft); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b94a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } .c-form option { background: var(--bg-2); color: var(--ink); } .c-form input:focus, .c-form select:focus, .c-form textarea:focus { border-color: var(--cyan); background: rgba(255,255,255,.05); } .c-form label { position: absolute; left: 16px; top: 16px; font-size: 14px; color: var(--mut); pointer-events: none; transition: transform .2s var(--ease), font-size .2s, color .2s; } .c-form .field input:focus + label, .c-form .field input:not(:placeholder-shown) + label, .c-form .field textarea:focus + label, .c-form .field textarea:not(:placeholder-shown) + label, .c-form .field select:focus + label, .c-form .field select:valid + label { transform: translateY(-9px); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); } .c-form .sel-lab { transform: translateY(-9px); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); } .c-form select:focus + .sel-lab, .c-form select:valid + .sel-lab { color: var(--cyan); } .c-form .form-submit { grid-column: 1 / -1; justify-content: center; } .c-form .form-note { grid-column: 1 / -1; text-align: center; color: var(--cyan); font-size: 14px; margin-top: 2px; } /* checklist de confiança */ .c-trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 4px; } .c-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soft); } .c-trust svg { width: 16px; height: 16px; color: var(--cyan); } /* dark styling para os slots de imagem (legado, caso reutilizados) */ image-slot::part(frame) { background: linear-gradient(150deg, rgba(75,139,245,.08), rgba(43,212,230,.04)); } image-slot::part(empty) { color: rgba(238,241,247,.5); } image-slot::part(ring) { border-color: rgba(255,255,255,.16); } /* ============================================================ NOVAS ANIMAÇÕES — tilt 3D · faixa cinética ============================================================ */ /* ---------- 02 · CARTÕES 3D HOLOGRÁFICOS (só ponteiro fino) — Problema + Serviços ---------- */ @media (hover: hover) and (pointer: fine) { .cards-3 { perspective: 1200px; } .prob-card, .svc-card { transform-style: preserve-3d; will-change: transform; } /* durante o tilt, transição curta para acompanhar o cursor (reset volta ao .5s) */ .prob-card.tilting, .svc-card.tilting { transition: transform .12s ease-out, border-color .4s, box-shadow .5s; } /* brilho holográfico que segue o cursor */ .prob-card::after, .svc-card::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; z-index: 0; background: radial-gradient(circle at var(--gx,50%) var(--gy,0%), rgba(43,212,230,.22), rgba(75,139,245,.08) 42%, transparent 64%); opacity: 0; transition: opacity .35s; mix-blend-mode: screen; } .prob-card.tilted::after, .svc-card.tilted::after { opacity: 1; } /* camadas internas em profundidade (parallax 3D) */ .prob-card .ic { transform: translateZ(34px); } .prob-card h3 { transform: translateZ(22px); } .prob-card p { transform: translateZ(12px); } } /* ---------- 03 · FAIXA CINÉTICA (kinetic marquee) ---------- */ .kbar { position: relative; z-index: 1; overflow: hidden; padding: clamp(34px, 7vh, 64px) 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(75,139,245,.05), rgba(43,212,230,.04)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .kbar-row { white-space: nowrap; } .kbar-row > span { display: inline-block; will-change: transform; font-family: var(--display); font-weight: 300; text-transform: uppercase; letter-spacing: .05em; font-size: clamp(30px, 7vw, 66px); line-height: 1.1; } .kbar-a > span { color: var(--ink); } .kbar-b > span { background: linear-gradient(110deg, #4b8bf5, #2bd4e6, #4b8bf5); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .92; } .kbar .kstar { color: var(--cyan); margin: 0 .32em; font-size: .52em; vertical-align: .24em; } @media (prefers-reduced-motion: reduce){ .kbar { padding: 30px 0; } } /* ---------- 06 · REVELAÇÃO EM CORTINA (mask reveal + wipe de clip-path) ---------- */ /* texto de apoio sobe linha a linha por trás de uma máscara (overflow) */ .js .curtain { overflow: hidden; } .js span.curtain { display: inline-block; vertical-align: bottom; } .js .curtain.reveal { opacity: 1; transform: none; filter: none; } /* anula o fade; quem anima é o miolo */ .js .curtain .curtain-in { display: block; transform: translateY(115%); transition: transform .95s var(--ease); will-change: transform; } .js .curtain.in .curtain-in { transform: none; } /* imagens dos cases surgem com um "wipe" vertical (cortina de clip-path) */ .js .pf-card .pf-img { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease), transform 1.2s var(--ease); } .pf-card.in .pf-img { clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: reduce){ .js .curtain .curtain-in { transform: none !important; } .js .pf-card .pf-img { clip-path: none !important; } } /* ---------- 09 · BORDA COM FEIXE DE LUZ (border beam) ---------- */ @property --beam-ang { syntax: ""; initial-value: 0deg; inherits: false; } .btn-primary { position: relative; } /* botão CTA: feixe branco/ciano percorrendo a borda */ .btn-primary::after { content: ""; position: absolute; inset: 0; border-radius: 999px; padding: 2px; pointer-events: none; background: conic-gradient(from var(--beam-ang), transparent 0 62%, rgba(255,255,255,.45) 76%, #2bd4e6 88%, transparent 97%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: beamspin 3.4s linear infinite; } /* cartões de Serviços: feixe ciano→azul (convive com o tilt/brilho) */ .svc-card::before { content: ""; position: absolute; inset: 0; border-radius: 14px; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--beam-ang), transparent 0 66%, rgba(43,212,230,.25) 76%, #2bd4e6 86%, #4b8bf5 92%, transparent 98%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: beamspin 5s linear infinite; } @keyframes beamspin { to { --beam-ang: 360deg; } } @media (prefers-reduced-motion: reduce){ .btn-primary::after, .svc-card::before { animation: none; background: none; } } /* ---------- 14 · PROCESSO · scale-down + fade-out atrelado ao scroll ---------- Lista vertical de cards INDEPENDENTES (sem sticky/empilhamento). Conforme cada card sobe pela viewport, o JS o encolhe (1→0.85) e o some (1→0.4), com transform-origin: center top (recede pelo topo). A transição curta só suaviza os passos do scroll. */ .process { scroll-snap-align: none; } /* scroll livre p/ o efeito */ .process .proc-grid { display: block; max-width: 720px; margin: 30px auto 0; width: 100%; } .process .proc-step { width: 100%; margin: 0 auto 24px; transform-origin: center top; transition: transform .15s linear, opacity .15s linear, border-color .5s var(--ease); will-change: transform, opacity; } .process .proc-step:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce){ .process .proc-step { transform: none !important; opacity: 1 !important; } } /* ---------- 23 · CARTÕES QUE VIRAM (flip 3D — Impacto) ---------- O .gain-card vira o "palco" (perspective); o .flip-in gira 180° no hover/tap, revelando o verso. Frente = pílulas + título; verso = descrição + CTA. */ .impact .gain-card { background: none; border: none; box-shadow: none; padding: 0; perspective: 1100px; min-height: 0; height: 210px; } .impact .gain-card:hover { transform: none; box-shadow: none; } /* anula o lift do cartão base */ .impact .flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--ease); cursor: pointer; } .impact .gain-card:hover .flip-in, .impact .gain-card.flipped .flip-in { transform: rotateY(180deg); } .impact .face { position: absolute; inset: 0; border-radius: 14px; padding: 26px 24px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); display: flex; flex-direction: column; gap: 14px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .impact .face.back { transform: rotateY(180deg); justify-content: center; background: linear-gradient(160deg, #10243f, #0a1626); border-color: var(--line2); } .impact .face.back p { color: var(--soft); font-size: 15px; line-height: 1.6; } .impact .face.back .go { margin-top: 14px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); display: inline-flex; align-items: center; gap: 7px; } @media (prefers-reduced-motion: reduce){ .impact .flip-in { transition: none; } } /* ---------- 27 · LETRAS QUE VOAM E MONTAM (assemble — títulos h2.thin) ---------- O container fica neutro (quem anima são as letras); palavras em inline-block preservam a quebra de linha; cada letra entra de uma posição espalhada. */ .js .thin.assemble { opacity: 1 !important; transform: none !important; filter: none !important; } .js .thin.assemble .asm-w { display: inline-block; white-space: nowrap; } .js .thin.assemble .asm-l { display: inline-block; opacity: 0; transition: transform .9s var(--ease), opacity .9s var(--ease); } @media (prefers-reduced-motion: reduce){ .js .thin.assemble .asm-l { opacity: 1 !important; transform: none !important; transition: none; } } /* ---------- O PROBLEMA: cards abrem como página de livro (flip 3D na entrada) ---------- */ .problem .cards-3 { perspective: 1400px; } .js .problem .prob-card { transform-origin: left center; transform: rotateY(-100deg); opacity: 0; filter: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .9s var(--ease), opacity .5s var(--ease); } .js .problem .prob-card:nth-child(2) { transition-delay: .16s; } .js .problem .prob-card:nth-child(3) { transition-delay: .32s; } .problem .prob-card.in { transform: rotateY(0deg); opacity: 1; } /* sombra da "página" que some conforme abre */ .js .problem .prob-card::before { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.5), transparent 48%); opacity: 1; transition: opacity .9s var(--ease); } .js .problem .prob-card:nth-child(2)::before { transition-delay: .16s; } .js .problem .prob-card:nth-child(3)::before { transition-delay: .32s; } .problem .prob-card.in::before { opacity: 0; } /* ---------- SERVIÇOS: cards sobem retos e escalonados (sem sobrepor) ---------- */ .js .services .svc-card { opacity: 0; } .services .svc-card.in { opacity: 1; animation: svcRise .62s cubic-bezier(.2,.8,.3,1.05) backwards; } .services .svc-card.in:nth-child(2) { animation-delay: .12s; } .services .svc-card.in:nth-child(3) { animation-delay: .24s; } @keyframes svcRise { from { opacity: 0; transform: translateY(44px) scale(.97); } to { opacity: 1; transform: none; } } /* hover: amplia o card (mantém o brilho que segue o cursor); sem rotação */ @media (hover: hover) and (pointer: fine){ .services .svc-card:hover { transform: scale(1.06); z-index: 5; } } @media (prefers-reduced-motion: reduce){ .services .svc-card.in { animation: none; } } @media (prefers-reduced-motion: reduce){ .js .problem .prob-card::before { opacity: 0 !important; } } /* ---------- QUEM SOMOS: declaração limpa e premium (centralizada) ---------- */ .editorial .qs-clean { max-width: 880px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; } .editorial .qs-rule { width: 56px; height: 2px; border-radius: 2px; background: var(--grad); } .editorial .qs-title { font-family: var(--display); font-weight: 300; letter-spacing: .02em; line-height: 1.1; font-size: clamp(31px, 7vw, 60px); text-wrap: balance; color: var(--ink); margin: 0; } .editorial .qs-title .grad { background: linear-gradient(110deg, #4b8bf5, #2bd4e6, #4b8bf5); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: tagShift 6s var(--ease) infinite; } .editorial .qs-lead { color: var(--soft); font-size: clamp(16px, 4vw, 20px); line-height: 1.7; max-width: 60ch; margin: 0; } .editorial .qs-lead b { color: var(--ink); font-weight: 600; } @media (prefers-reduced-motion: reduce){ .editorial .qs-title .grad { animation: none; } } /* ---------- SEÇÃO MOBILE / RESPONSIVO (texto + celular com card VS Digital) ---------- */ .mobile-sec .mob-inner { display: grid; gap: 40px; max-width: 1180px; margin: 0 auto; width: 100%; align-items: center; } @media (min-width: 860px){ .mobile-sec .mob-inner { grid-template-columns: 1.1fr .9fr; gap: 6%; } } .mobile-sec .mob-text { display: flex; flex-direction: column; gap: 20px; } .mobile-sec h2 { font-size: clamp(28px, 7vw, 54px); } .mobile-sec .mob-lead { color: var(--soft); font-size: clamp(15px, 4vw, 18px); line-height: 1.65; max-width: 48ch; } .mobile-sec .mob-lead b { color: var(--ink); font-weight: 600; } .mobile-sec .mob-stats { display: flex; gap: 30px; margin-top: 4px; } .mobile-sec .mob-stats div { display: flex; flex-direction: column; gap: 3px; } .mobile-sec .mob-stats b { font-family: var(--display); font-weight: 300; line-height: 1; font-size: clamp(28px, 6vw, 42px); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .mobile-sec .mob-stats span { font-size: 12px; color: var(--mut); letter-spacing: .04em; } /* celular */ .mobile-sec .mob-phone { width: 100%; max-width: 300px; margin: 0 auto; } /* MOLDURA = mockup real do iPhone 16 Pro Max (PNG transparente, com glow Siri). */ .mobile-sec .phone { position: relative; width: 100%; aspect-ratio: 900 / 1849; container-type: inline-size; filter: drop-shadow(0 30px 55px rgba(0,0,0,.6)); } .mobile-sec .phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: block; } /* TELA = o vídeo, encaixado no recorte exato da tela; o glow Siri da moldura aparece por fora */ .mobile-sec .phone-screen { position: absolute; left: 7.88%; right: 7.76%; top: 3.43%; bottom: 3.37%; z-index: 3; border-radius: 11cqw; overflow: hidden; background: #000; container-type: inline-size; } .mobile-sec .phone-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* card VS DIGITAL no rodapé da tela (a tela já clipa os cantos arredondados) */ .mobile-sec .mob-card { position: absolute; left: 0; right: 0; top: 56%; bottom: 0; padding-bottom: 7cqw; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 2.6cqw; background: linear-gradient(180deg, transparent 0%, rgba(10,9,20,.9) 16%, rgba(8,7,16,.97) 40%); } .mobile-sec .mc-title { font-family: var(--display); font-weight: 500; letter-spacing: .14em; font-size: 8cqw; color: #fff; } .mobile-sec .mc-sub { font-size: 4.1cqw; line-height: 1.4; color: rgba(238,241,247,.72); max-width: 96%; } .mobile-sec .mc-btn { margin-top: 3.5cqw; width: 100%; padding: 4.6cqw 0; border-radius: 999px; font-weight: 700; font-size: 4.6cqw; color: #04121f; background: linear-gradient(120deg, #4b8bf5, #2bd4e6); box-shadow: 0 6px 20px -6px rgba(43,212,230,.6); cursor: pointer; } .mobile-sec .mc-foot { font-size: 3.5cqw; color: rgba(238,241,247,.6); } .mobile-sec .mc-foot b { color: var(--cyan); font-weight: 700; }