/* Fly Per Points — landing page styles Rebuilt as a plain static site (no build step, no runtime framework). All values below are carried over 1:1 from the original design so the visual result and animation timings are unchanged. */ :root { --bg: oklch(0.245 0.028 260); --bg-deep: oklch(0.215 0.028 260); --bg-soft: oklch(0.3 0.03 260); --text: oklch(0.97 0.006 260); --accent: oklch(0.62 0.19 22); --accent-strong: oklch(0.66 0.19 22); --accent-btn: oklch(0.55 0.21 24); --accent-btn-hover: oklch(0.62 0.19 22); --gold: oklch(0.82 0.09 78); --font: 'Manrope', Helvetica, sans-serif; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; } /* Clipping must live on a wrapper, not on itself — some engines don't correctly contain descendant overflow (Ken Burns zoom, the 3D points card, decorative off-canvas SVG paths) when overflow-x is set on body directly, which otherwise inflates the layout viewport and throws off position:fixed. */ .page { max-width: 100%; overflow-x: clip; } a { color: inherit; text-decoration: none; transition: color 240ms ease; } a:hover { color: oklch(0.66 0.19 22); } ::selection { background: oklch(0.55 0.21 24); color: oklch(0.98 0.004 260); } .media-cover { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; } @keyframes heroKB { 0% { opacity: 0; transform: scale(1); } 2% { opacity: 1; } 23% { opacity: 1; } 27% { opacity: 0; transform: scale(1.16); } 100% { opacity: 0; transform: scale(1.16); } } @keyframes ecoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes fadeUp { from { opacity: 0; transform: translate3d(0,24px,0); } to { opacity: 1; transform: none; } } /* ---------- Scroll-reveal (fade + slide-up on first intersection) ---------- */ .reveal { opacity: 0; transform: translate3d(0,30px,0); transition: opacity 760ms cubic-bezier(0.22,0.7,0.2,1), transform 760ms cubic-bezier(0.22,0.7,0.2,1); will-change: transform, opacity; } .reveal.is-visible { opacity: 1; transform: none; } /* Fade-only variant for elements that already carry their own base transform (e.g. .plan-card--black's permanent -14px lift) so reveal doesn't clobber it. */ .reveal-fade { opacity: 0; transition: opacity 760ms cubic-bezier(0.22,0.7,0.2,1); } .reveal-fade.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1; transform: none; } .reveal-fade { transition: none; opacity: 1; } } /* ---------- Hero entrance (plays once on load, no scroll needed) ---------- */ .hero-copy > *:not(.split-text) { animation: fadeUp 900ms cubic-bezier(0.22,0.7,0.2,1) both; } .hero-copy > *:nth-child(1) { animation-delay: 60ms; } .hero-copy > *:nth-child(2) { animation-delay: 160ms; } .hero-copy > *:nth-child(3) { animation-delay: 260ms; } .hero-copy > *:nth-child(4) { animation-delay: 360ms; } .hero-video-col { animation: fadeUp 900ms cubic-bezier(0.22,0.7,0.2,1) both; animation-delay: 420ms; } /* ---------- Split-text reveal (headings slide in word by word) ---------- line-height is bumped to a safe value on both spans: several headings use very tight custom line-heights (as low as 0.98) that leave no room below the baseline once overflow is clipped, cutting off descenders (g, j, p, q, y). 1.2 comfortably fits ascender+descender for the site's font. */ .split-text .split-word { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.2; } .split-text .split-word-inner { display: inline-block; line-height: 1.2; transform: translate3d(0,112%,0); transition: transform 820ms cubic-bezier(0.22,0.85,0.2,1); will-change: transform; } .split-text.is-visible .split-word-inner { transform: translate3d(0,0,0); } @media (prefers-reduced-motion: reduce) { .split-text .split-word-inner { transition: none; transform: none; } } /* On narrow screens, headings wrap into more, shorter lines — animating every single word individually there reads as choppy/broken rather than fluid. Swap to one smooth fade+slide for the whole heading instead. */ @media (max-width: 780px) { .split-text .split-word-inner { transform: none; transition: none; } .split-text { opacity: 0; transform: translate3d(0,18px,0); transition: opacity 620ms cubic-bezier(0.22,0.7,0.2,1), transform 620ms cubic-bezier(0.22,0.7,0.2,1); } .split-text.is-visible { opacity: 1; transform: none; } } /* Shared text utilities */ .eyebrow { font: 700 11px/1 var(--font); letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-strong); } .text-accent { font-weight: 800; color: var(--accent-strong); } .text-strong { font-weight: 800; } /* ---------- 01 — Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 18px clamp(20px,5vw,72px); backdrop-filter: blur(16px); background: oklch(0.15 0.03 260 / 0.82); border-bottom: 1px solid oklch(0.85 0.02 260 / 0.1); } .brand { display: flex; align-items: center; } .brand-logo { height: 26px; width: auto; display: block; } .main-nav { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: clamp(14px,2.2vw,34px); font: 500 12px/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; } .main-nav a { position: relative; padding-bottom: 4px; } .main-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent-strong); transition: right 340ms cubic-bezier(0.22,0.7,0.2,1); } .main-nav a:hover::after { right: 0; } .nav-cta { border: 1px solid oklch(0.62 0.19 22 / 0.55); color: oklch(0.9 0.05 22); padding: 12px 22px; white-space: nowrap; transition: background 300ms ease, border-color 300ms ease, color 300ms ease, transform 240ms cubic-bezier(0.22,0.7,0.2,1); } .nav-cta:hover { background: var(--accent-btn); color: oklch(0.98 0.004 260); border-color: var(--accent-btn); transform: translateY(-2px); } .nav-cta:active { transform: translateY(0) scale(0.97); } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--bg-deep); } .hero-bg { position: absolute; top: -12%; left: 0; right: 0; height: 124%; will-change: transform; background: var(--bg-deep); } .hero-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; animation: heroKB 26s ease-in-out infinite; } .hero-slide:nth-of-type(1) { animation-delay: 0s; } .hero-slide:nth-of-type(2) { animation-delay: 6.5s; } .hero-slide:nth-of-type(3) { animation-delay: 13s; } .hero-slide:nth-of-type(4) { animation-delay: 19.5s; } .hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--bg-deep) 0%, oklch(0.215 0.028 260 / 0.82) 38%, oklch(0.215 0.028 260 / 0.35) 72%, oklch(0.215 0.028 260 / 0.2) 100%); } .hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.85; } .hero-content { position: relative; width: 100%; padding: clamp(120px,16vh,180px) clamp(20px,5vw,72px) clamp(56px,8vh,96px); display: grid; grid-template-columns: minmax(320px,1.15fr) minmax(240px,0.85fr); gap: clamp(32px,4vw,72px); align-items: end; } .hero-copy { display: flex; flex-direction: column; gap: clamp(26px,3.4vh,40px); max-width: 820px; } .hero-logo { height: clamp(34px,4vw,52px); width: auto; align-self: flex-start; } .hero-title { margin: 0; font: 200 clamp(40px,6.6vw,104px)/0.98 var(--font); letter-spacing: -0.03em; text-wrap: pretty; } .hero-lead { margin: 0; max-width: 52ch; font: 300 clamp(16px,1.3vw,20px)/1.65 var(--font); color: oklch(0.8 0.014 260); } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .btn-primary { background: var(--accent-btn); color: oklch(0.98 0.004 260); padding: 19px 38px; font: 700 12px/1 var(--font); letter-spacing: 0.18em; text-transform: uppercase; transition: background 260ms ease, transform 240ms cubic-bezier(0.22,0.7,0.2,1), box-shadow 320ms ease; } .btn-primary:hover { background: var(--accent-btn-hover); transform: translateY(-3px); box-shadow: 0 20px 36px -18px oklch(0.55 0.21 24 / 0.55); } .btn-primary:active { transform: translateY(-1px) scale(0.98); box-shadow: 0 10px 22px -14px oklch(0.55 0.21 24 / 0.5); } .btn-primary--lg { padding: 21px 46px; } .hero-link { padding: 19px 6px; font: 500 12px/1 var(--font); letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px solid oklch(0.85 0.02 260 / 0.3); transition: border-color 300ms ease, color 240ms ease; } .hero-link:hover { border-color: oklch(0.66 0.19 22); } .hero-video-col { display: flex; flex-direction: column; gap: 14px; align-items: stretch; } .hero-video-frame { position: relative; align-self: flex-end; width: 100%; max-width: 640px; padding: 9px; border: 1px solid oklch(0.62 0.19 22 / 0.45); background: oklch(0.245 0.028 260 / 0.55); backdrop-filter: blur(6px); box-shadow: 0 34px 80px -34px oklch(0.1 0.02 260 / 0.8); } .hero-video-inner { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(160deg, oklch(0.32 0.03 260), oklch(0.24 0.028 260)); display: flex; align-items: center; justify-content: center; } .hero-video-inner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; } .hero-video-caption { position: relative; font: 500 11px/1.6 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: oklch(0.78 0.014 260); text-align: center; max-width: 22ch; } .hero-video-credit { font: 700 11px/1.5 var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: oklch(0.72 0.17 22); } /* ---------- 02 — Quem somos ---------- */ .about { padding: clamp(120px,17vh,210px) clamp(20px,5vw,72px); } .about-stack { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(56px,7vh,96px); } .about-head-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: clamp(36px,5vw,84px); align-items: start; } .about-head { display: flex; flex-direction: column; gap: 22px; } .about-title { margin: 0; font: 200 clamp(30px,3.9vw,58px)/1.08 var(--font); letter-spacing: -0.025em; } .about-lede { margin: 0; font: 300 clamp(16px,1.2vw,19px)/1.75 var(--font); color: oklch(0.8 0.014 260); max-width: 56ch; } .value-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1px; background: oklch(0.85 0.02 260 / 0.14); } .value-card { background: var(--bg); padding: clamp(30px,3.2vw,44px); display: flex; flex-direction: column; gap: 14px; transition: transform 460ms cubic-bezier(0.22,0.7,0.2,1), background 460ms ease, opacity 760ms cubic-bezier(0.22,0.7,0.2,1); } .value-card:hover { transform: translateY(-6px); background: var(--bg-soft); } .value-rule { width: 30px; height: 2px; background: var(--accent); transition: width 380ms cubic-bezier(0.22,0.7,0.2,1); } .value-card:hover .value-rule { width: 48px; } .value-title { font: 700 clamp(19px,1.8vw,24px)/1.2 var(--font); } .value-text { margin: 0; font: 300 15px/1.7 var(--font); color: oklch(0.75 0.014 260); } .origin { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: clamp(36px,5vw,80px); align-items: center; border-top: 1px solid oklch(0.85 0.02 260 / 0.14); padding-top: clamp(40px,5vh,64px); } .origin-photo { position: relative; aspect-ratio: 4/3; background: oklch(0.28 0.026 260); } .origin-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font: 500 11px/1.5 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.6 0.014 260); border: 1px dashed oklch(0.85 0.02 260 / 0.25); box-sizing: border-box; padding: 20px; } .origin-body { display: flex; flex-direction: column; gap: 18px; } .origin-text { margin: 0; font: 300 16px/1.8 var(--font); color: oklch(0.8 0.014 260); } .origin-credit { font: 500 15px/1.5 var(--font); color: oklch(0.9 0.01 260); } /* ---------- 03 — Diferencial / 05 — Pilares / 07 — Como funciona (shared alt background) ---------- */ .section-alt { padding: clamp(120px,17vh,210px) clamp(20px,5vw,72px); background: var(--bg-soft); } .diff-stack { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(48px,6vh,80px); } .diff-head { margin: 0; font: 200 clamp(30px,4.4vw,64px)/1.06 var(--font); letter-spacing: -0.03em; max-width: 24ch; } .diff-compare { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: clamp(20px,2.4vw,32px); align-items: stretch; } .diff-compare-card { border: 1px solid oklch(0.85 0.02 260 / 0.14); padding: clamp(30px,3.2vw,44px); display: flex; flex-direction: column; gap: 12px; opacity: 0.62; } .diff-compare-label { font: 500 11px/1 var(--font); letter-spacing: 0.24em; text-transform: uppercase; color: oklch(0.72 0.014 260); } .diff-compare-text { font: 200 clamp(26px,2.8vw,40px)/1.15 var(--font); } .diff-compare-card--fly { border: 1px solid oklch(0.62 0.19 22 / 0.5); background: linear-gradient(150deg, oklch(0.24 0.05 22) 0%, oklch(0.18 0.032 260) 60%); padding: clamp(30px,3.2vw,44px); display: flex; flex-direction: column; gap: 12px; } .diff-compare-label--fly { font: 700 11px/1 var(--font); letter-spacing: 0.24em; text-transform: uppercase; color: oklch(0.72 0.17 22); } .diff-features { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: clamp(24px,3vw,48px); border-top: 1px solid oklch(0.85 0.02 260 / 0.14); padding-top: clamp(32px,4vh,52px); } .diff-feature { display: flex; flex-direction: column; gap: 10px; transition: transform 460ms cubic-bezier(0.22,0.7,0.2,1), opacity 760ms cubic-bezier(0.22,0.7,0.2,1); } .diff-feature:hover { transform: translateY(-5px); } .diff-feature-title { font: 700 12px/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-strong); } .diff-feature-text { margin: 0; font: 300 15px/1.7 var(--font); color: oklch(0.78 0.014 260); } /* ---------- 04 — Valor dos pontos ---------- */ .points { padding: clamp(120px,17vh,210px) clamp(20px,5vw,72px); } .points-stage { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: clamp(36px,5vw,88px); align-items: center; perspective: 1400px; perspective-origin: 70% 40%; } .points-copy { display: flex; flex-direction: column; gap: 24px; } .points-title { margin: 0; font: 200 clamp(30px,4vw,58px)/1.06 var(--font); letter-spacing: -0.025em; } .points-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font: 500 clamp(15px,1.4vw,20px)/1.3 var(--font); } .points-flow-arrow { color: var(--accent-strong); } .points-text { margin: 0; font: 300 16px/1.75 var(--font); color: oklch(0.78 0.014 260); max-width: 52ch; } .points-cta { align-self: flex-start; margin-top: 4px; } .points-card-stage { display: flex; justify-content: center; align-items: center; min-height: clamp(300px,40vh,440px); transform-style: preserve-3d; } .points-card { position: relative; width: min(420px,80vw); aspect-ratio: 1.586; transform-style: preserve-3d; border-radius: 18px; padding: clamp(22px,2.4vw,30px); display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(140deg, oklch(0.3 0.06 22) 0%, oklch(0.16 0.03 260) 48%, oklch(0.24 0.05 24) 100%); box-shadow: 0 40px 80px -34px oklch(0.08 0.03 260 / 0.85); border: 1px solid oklch(0.62 0.19 22 / 0.45); will-change: transform, opacity; } .points-card-sheen { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; background: linear-gradient(115deg, oklch(1 0 0 / 0.14) 0%, oklch(1 0 0 / 0.02) 32%, oklch(1 0 0 / 0) 58%, oklch(0.62 0.19 22 / 0.18) 100%); } .points-card-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; } .points-card-logo { height: 16px; width: auto; } .points-card-tag { font: 700 9px/1.4 var(--font); letter-spacing: 0.24em; text-transform: uppercase; color: oklch(0.74 0.17 22); text-align: right; } .points-card-chip-row { position: relative; display: flex; flex-direction: column; gap: 12px; } .points-card-chip { width: clamp(38px,4vw,48px); height: clamp(28px,3vw,34px); border-radius: 6px; background: linear-gradient(135deg, oklch(0.86 0.09 84), oklch(0.64 0.08 60)); opacity: 0.92; } .points-card-number { font: 500 clamp(13px,1.3vw,16px)/1 var(--font); letter-spacing: 0.22em; color: oklch(0.92 0.01 260); } .points-card-bottom { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; } .points-card-meta { display: flex; flex-direction: column; gap: 5px; } .points-card-label { font: 500 8px/1 var(--font); letter-spacing: 0.24em; text-transform: uppercase; color: oklch(0.78 0.01 260 / 0.75); } .points-card-value { font: 500 12px/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; } .points-card-badge { font: 700 9px/1 var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: oklch(0.74 0.17 22); } .points-steps { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 1px; background: oklch(0.85 0.02 260 / 0.14); } .points-step { background: var(--bg); padding: clamp(28px,3vw,42px); display: flex; flex-direction: column; gap: 12px; transition: transform 460ms cubic-bezier(0.22,0.7,0.2,1), background 460ms ease, opacity 760ms cubic-bezier(0.22,0.7,0.2,1); } .points-step:hover { transform: translateY(-6px); background: var(--bg-soft); } .points-step-num { font: 700 11px/1 var(--font); letter-spacing: 0.24em; color: var(--accent-strong); } .points-step-title { font: 700 clamp(18px,1.7vw,23px)/1.25 var(--font); } /* ---------- 05 — Pilares ---------- */ .pillars-head { display: flex; flex-direction: column; gap: 20px; max-width: 760px; } .pillars-trail { position: relative; display: flex; flex-direction: column; padding-left: clamp(56px,7vw,110px); } .pillars-svg { position: absolute; left: 0; top: 0; width: clamp(46px,6vw,92px); height: 100%; overflow: visible; pointer-events: none; } .pillars-plane { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; pointer-events: none; opacity: 0; } .pillars-plane-icon { width: 100%; height: 100%; display: block; } .pillars-step { padding: clamp(26px,3.4vh,40px) 0; border-bottom: 1px solid oklch(0.85 0.02 260 / 0.14); transition: opacity 620ms cubic-bezier(0.22,0.7,0.2,1), transform 620ms cubic-bezier(0.22,0.7,0.2,1); } .pillars-step--last { border-bottom: none; } .pillars-step-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(16px,3vw,40px); } .pillars-step-num { flex: 0 0 auto; width: 44px; font: 700 13px/1 var(--font); letter-spacing: 0.16em; color: var(--accent-strong); } .pillars-step-title { flex: 1 1 240px; font: 700 clamp(21px,2.2vw,32px)/1.2 var(--font); } .pillars-step-text { flex: 1 1 300px; font: 300 clamp(15px,1.15vw,17px)/1.7 var(--font); color: oklch(0.76 0.014 260); } /* ---------- 06 — Números ---------- */ .stats { padding: clamp(120px,17vh,210px) clamp(20px,5vw,72px); } .stats-stack { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(44px,5.5vh,72px); } .stats-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; } .stats-head-sub { font: 300 14px/1.5 var(--font); color: oklch(0.72 0.014 260); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1px; background: oklch(0.85 0.02 260 / 0.14); } .stats-card { background: var(--bg); padding: clamp(28px,3vw,44px); display: flex; flex-direction: column; gap: 12px; transition: transform 460ms cubic-bezier(0.22,0.7,0.2,1), background 460ms ease, opacity 760ms cubic-bezier(0.22,0.7,0.2,1); } .stats-card:hover { transform: translateY(-6px); background: var(--bg-soft); } .stats-number { font: 200 clamp(40px,4.6vw,66px)/1 var(--font); letter-spacing: -0.03em; } .stats-label { font: 300 14px/1.6 var(--font); color: oklch(0.75 0.014 260); } /* ---------- 07 — Como funciona ---------- */ .how-stack { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(48px,6vh,80px); } .how-head { display: flex; flex-direction: column; gap: 20px; max-width: 720px; } .how-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: clamp(20px,2.4vw,32px); } .how-card { border: 1px solid oklch(0.85 0.02 260 / 0.14); padding: clamp(30px,3.2vw,44px); display: flex; flex-direction: column; gap: 16px; transition: border-color 380ms ease, transform 460ms cubic-bezier(0.22,0.7,0.2,1), opacity 760ms cubic-bezier(0.22,0.7,0.2,1); } .how-card:hover { border-color: oklch(0.62 0.19 22 / 0.55); transform: translateY(-6px); } .how-card-num { font: 200 clamp(46px,5vw,72px)/1 var(--font); color: var(--accent); } .how-card-title { font: 700 clamp(19px,1.8vw,25px)/1.25 var(--font); } /* ---------- 08 — Ecossistema ---------- */ .ecosystem { padding: clamp(120px,17vh,210px) clamp(20px,5vw,72px); } .eco-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: clamp(36px,5vw,80px); align-items: start; } .eco-col { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 100px; } .eco-title { margin: 0; font: 200 clamp(30px,4vw,56px)/1.06 var(--font); letter-spacing: -0.025em; } .eco-preview { position: relative; overflow: hidden; border: 1px solid oklch(0.85 0.02 260 / 0.14); background: var(--bg-soft); padding: clamp(28px,3.2vw,42px); display: flex; flex-direction: column; gap: 16px; min-height: clamp(280px,32vh,340px); animation: ecoIn 520ms cubic-bezier(0.22,0.7,0.2,1) both; } .eco-preview-num { position: absolute; top: 6px; right: 10px; font: 200 clamp(90px,10vw,140px)/1 var(--font); color: oklch(0.62 0.19 22 / 0.16); pointer-events: none; } .eco-preview-tag { position: relative; font: 700 11px/1 var(--font); letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent-strong); } .eco-preview-title { position: relative; font: 700 clamp(24px,2.6vw,36px)/1.15 var(--font); } .eco-preview-body { position: relative; margin: 0; font: 300 clamp(15px,1.15vw,17px)/1.7 var(--font); color: oklch(0.78 0.014 260); max-width: 46ch; } .eco-preview-bullets { position: relative; margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; } .eco-preview-bullet { border: 1px solid oklch(0.85 0.02 260 / 0.2); padding: 8px 14px; font: 500 12px/1 var(--font); letter-spacing: 0.04em; color: oklch(0.86 0.01 260); } .eco-right { display: flex; flex-direction: column; min-width: 0; } .eco-lede { margin: 0 0 clamp(6px,1vh,12px); font: 300 clamp(15px,1.15vw,17px)/1.7 var(--font); color: oklch(0.78 0.014 260); max-width: 46ch; } .eco-path-wrap { position: relative; margin-top: clamp(26px,3.5vh,44px); height: clamp(640px,88vh,900px); } .eco-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .eco-plane { position: absolute; left: 0; top: 0; z-index: 2; width: 24px; height: 24px; margin: -12px 0 0 -12px; pointer-events: none; opacity: 0; will-change: transform, opacity; } .eco-plane-icon { width: 100%; height: 100%; display: block; } /* Mobile-only progress bar under each node, filling like a stories segment and advancing to the next node when full — see media query below. */ .eco-node-progress { display: none; } .eco-node { position: absolute; display: flex; align-items: center; gap: 13px; cursor: pointer; overflow-anchor: none; } .eco-node-1 { left: 10%; top: 6%; transform: translateY(-50%) translateX(-11px); max-width: 58%; } .eco-node-2 { right: 22%; top: 20%; transform: translateY(-50%) translateX(11px); flex-direction: row-reverse; text-align: right; max-width: 58%; } .eco-node-3 { left: 20%; top: 36%; transform: translateY(-50%) translateX(-11px); max-width: 56%; } .eco-node-4 { right: 20%; top: 52%; transform: translateY(-50%) translateX(11px); flex-direction: row-reverse; text-align: right; max-width: 58%; } .eco-node-5 { left: 16%; top: 68%; transform: translateY(-50%) translateX(-11px); max-width: 56%; } .eco-node-6 { right: 22%; top: 83%; transform: translateY(-50%) translateX(11px); flex-direction: row-reverse; text-align: right; max-width: 58%; } .eco-node-7 { left: 26%; top: 96%; transform: translateY(-50%) translateX(-11px); max-width: 56%; } .eco-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid oklch(0.85 0.02 260 / 0.3); background: var(--bg); transition: all 420ms ease; } .eco-node.is-done .eco-dot { border-color: var(--accent-strong); background: oklch(0.62 0.19 22 / 0.35); } .eco-node.is-active .eco-dot { border-color: var(--accent-strong); background: var(--accent); box-shadow: 0 0 0 6px oklch(0.62 0.19 22 / 0.16); } .eco-node-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .eco-node-num { font: 700 10px/1 var(--font); letter-spacing: 0.24em; color: var(--accent-strong); } .eco-node-label { font: 500 clamp(14px,1.15vw,17px)/1.25 var(--font); color: oklch(0.68 0.014 260); transition: color 320ms ease; } .eco-node.is-done .eco-node-label { color: oklch(0.86 0.01 260); } .eco-node.is-active .eco-node-label { color: oklch(0.98 0.004 260); } .eco-node-detail { display: none; width: 100%; flex-direction: column; gap: 12px; padding: 14px 0 6px 35px; } .eco-node-detail-tag { font: 700 10px/1 var(--font); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-strong); } .eco-node-detail-text { margin: 0; font: 300 14px/1.65 var(--font); color: oklch(0.8 0.014 260); } .eco-node-detail-bullets { display: flex; flex-wrap: wrap; gap: 8px; } .eco-node-detail-bullet { border: 1px solid oklch(0.85 0.02 260 / 0.2); padding: 7px 12px; font: 500 11px/1 var(--font); color: oklch(0.86 0.01 260); } .eco-summary { margin-top: clamp(26px,3.5vh,44px); display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: oklch(0.85 0.02 260 / 0.14); border: 1px solid oklch(0.85 0.02 260 / 0.14); } .eco-summary-item { background: var(--bg); padding: clamp(16px,1.8vw,22px); display: flex; flex-direction: column; gap: 6px; } .eco-summary-num { font: 200 clamp(30px,3.4vw,44px)/1 var(--font); } .eco-summary-label { font: 700 10px/1.4 var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: oklch(0.72 0.014 260); } .eco-highlight { margin-top: clamp(16px,2vh,24px); align-self: flex-end; max-width: min(100%,420px); border: 1px solid oklch(0.62 0.19 22 / 0.45); background: linear-gradient(150deg, oklch(0.24 0.05 22) 0%, oklch(0.17 0.03 260) 70%); padding: clamp(24px,2.6vw,34px); display: flex; flex-direction: column; gap: 10px; text-align: right; } .eco-highlight-tag { font: 700 11px/1 var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: oklch(0.74 0.17 22); } .eco-highlight-text { font: 200 clamp(22px,2.2vw,32px)/1.2 var(--font); } /* ---------- 09 — Prova social (prints) ---------- */ .proof { padding: clamp(120px,17vh,210px) clamp(20px,5vw,72px); } .proof-stack { max-width: 1240px; margin: 0 auto; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: clamp(44px,5.5vh,72px); } .proof-head { display: flex; flex-direction: column; gap: 18px; max-width: 720px; } .proof-body { display: flex; flex-direction: column; min-width: 0; gap: clamp(26px,3.2vh,40px); } .proof-row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px; border-top: 1px solid oklch(0.85 0.02 260 / 0.14); padding-top: 24px; } .proof-row-title { font: 700 11px/1 var(--font); letter-spacing: 0.26em; text-transform: uppercase; color: oklch(0.72 0.014 260); } .proof-row-sub { font: 300 14px/1.5 var(--font); color: oklch(0.68 0.014 260); } .proof-track, .cases-track { width: 100%; min-width: 0; max-width: 100%; display: grid; grid-auto-flow: column; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(50px,7vw,110px), #000 calc(100% - clamp(50px,7vw,110px)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 clamp(50px,7vw,110px), #000 calc(100% - clamp(50px,7vw,110px)), transparent 100%); cursor: grab; } .proof-track::-webkit-scrollbar, .cases-track::-webkit-scrollbar { display: none; } .proof-track.is-dragging, .cases-track.is-dragging { cursor: grabbing; user-select: none; } .proof-track.is-dragging .proof-card, .cases-track.is-dragging .case-card { pointer-events: none; } .proof-track { grid-auto-columns: clamp(252px,26vw,330px); gap: clamp(22px,2.4vw,34px); padding: 6px clamp(20px,5vw,72px) 14px; box-sizing: border-box; /* Break out of the centered max-width column so the carousel always spans edge to edge, regardless of viewport width (.page clips the overflow this creates, same trick already used elsewhere on the page). */ width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); } .proof-card { position: relative; display: flex; flex-direction: column; padding: 10px; border: 1px solid oklch(0.85 0.02 260 / 0.14); background: linear-gradient(180deg, oklch(0.285 0.028 260) 0%, oklch(0.235 0.024 260) 100%); box-shadow: 0 26px 60px -46px oklch(0.05 0.02 260 / 0.9); transition: transform 480ms cubic-bezier(0.22,0.7,0.2,1), border-color 380ms ease, box-shadow 480ms ease; } .proof-card:hover { transform: translateY(-8px); border-color: oklch(0.62 0.19 22 / 0.55); box-shadow: 0 40px 80px -44px oklch(0.05 0.02 260 / 0.95); } .proof-card-media { position: relative; aspect-ratio: 9/16; overflow: hidden; } .proof-card-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, oklch(0.2 0.024 260 / 0.85) 0%, transparent 42%); } .proof-card-badge { position: absolute; top: 12px; left: 12px; background: var(--accent-btn); color: oklch(0.98 0.004 260); padding: 7px 11px; font: 700 10px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; } .proof-card-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 8px 8px; } .proof-card-label { font: 700 9px/1 var(--font); letter-spacing: 0.26em; text-transform: uppercase; color: oklch(0.66 0.014 260); } .proof-card-amount { font: 200 clamp(26px,2.4vw,34px)/1 var(--font); letter-spacing: -0.03em; color: oklch(0.7 0.2 148); } .proof-card-divider { height: 1px; background: oklch(0.85 0.02 260 / 0.14); } .proof-card-route { font: 300 13px/1.5 var(--font); color: oklch(0.78 0.014 260); } .proof-card-prices { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-family: var(--font); } .proof-card-price-old { font: 300 13px/1 var(--font); color: oklch(0.6 0.014 260); } .proof-card-price-arrow { font: 300 12px/1 var(--font); color: oklch(0.6 0.014 260); } .proof-card-price-new { font: 700 15px/1 var(--font); color: oklch(0.96 0.006 260); } .proof-badges { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1px; background: oklch(0.85 0.02 260 / 0.14); } .proof-badge { background: var(--bg-soft); padding: clamp(24px,2.6vw,34px); display: flex; flex-direction: column; gap: 10px; transition: transform 460ms cubic-bezier(0.22,0.7,0.2,1), opacity 760ms cubic-bezier(0.22,0.7,0.2,1); } .proof-badge:hover { transform: translateY(-5px); } .proof-badge-rule { width: 24px; height: 2px; background: var(--accent); transition: width 380ms cubic-bezier(0.22,0.7,0.2,1); } .proof-badge:hover .proof-badge-rule { width: 40px; } .proof-badge-text { font: 500 15px/1.5 var(--font); } /* ---------- 09b — Casos de sucesso ---------- */ .cases { padding: clamp(100px,14vh,170px) 0; background: oklch(0.19 0.022 260); border-top: 1px solid oklch(0.85 0.02 260 / 0.1); } .cases-stack { display: flex; flex-direction: column; gap: clamp(40px,5vh,64px); } .cases-head { max-width: 900px; margin: 0 auto; padding: 0 clamp(20px,5vw,72px); width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } .cases-title { margin: 0; font: 700 clamp(30px,3.6vw,50px)/1.1 var(--font); letter-spacing: -0.025em; text-wrap: pretty; } .cases-sub { margin: 0; max-width: 56ch; font: 300 clamp(15px,1.15vw,17px)/1.7 var(--font); color: oklch(0.76 0.014 260); } .cases-track { box-sizing: border-box; grid-auto-columns: clamp(280px,25vw,336px); gap: clamp(18px,2vw,28px); padding: 6px clamp(20px,5vw,72px) 16px; align-items: stretch; } .case-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px,2vw,26px); border: 1px solid oklch(0.85 0.02 260 / 0.14); border-radius: 16px; background: linear-gradient(180deg, oklch(0.2 0.022 260) 0%, oklch(0.16 0.018 260) 100%); box-shadow: 0 26px 60px -46px oklch(0.05 0.02 260 / 0.9); transition: transform 480ms cubic-bezier(0.22,0.7,0.2,1), border-color 380ms ease, opacity 760ms cubic-bezier(0.22,0.7,0.2,1); } .case-card:hover { transform: translateY(-8px); border-color: oklch(0.62 0.19 22 / 0.5); } .case-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .case-card-handle-row { display: flex; align-items: center; gap: 9px; min-width: 0; } .case-card-back { font: 300 15px/1 var(--font); color: oklch(0.7 0.014 260); } .case-card-handle { font: 700 15px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .case-card-icon { flex: 0 0 auto; } .case-card-more { font: 700 14px/1 var(--font); color: oklch(0.7 0.014 260); } .case-card-profile { display: flex; align-items: center; gap: 13px; } .case-card-avatar-ring { flex: 0 0 auto; position: relative; width: 54px; height: 54px; border-radius: 50%; padding: 2.5px; background: conic-gradient(from 160deg, oklch(0.76 0.17 60), oklch(0.62 0.22 20), oklch(0.58 0.24 330), oklch(0.7 0.19 40), oklch(0.76 0.17 60)); } .case-card-avatar { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: oklch(0.24 0.026 260); } .case-card-name-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .case-card-name { font: 700 13px/1.3 var(--font); color: oklch(0.96 0.006 260); } .case-card-stats { display: flex; justify-content: space-between; gap: 10px; padding: 2px 2px 0; } .case-card-stat { display: flex; flex-direction: column; gap: 1px; } .case-card-stat-num { font: 700 14px/1.2 var(--font); color: oklch(0.96 0.006 260); } .case-card-stat-label { font: 300 11px/1.2 var(--font); color: oklch(0.72 0.014 260); } .case-card-bio { display: flex; flex-direction: column; gap: 3px; } .case-card-bio-handle { font: 300 12.5px/1.5 var(--font); color: oklch(0.68 0.13 250); } .case-card-bio-line { font: 300 12.5px/1.5 var(--font); color: oklch(0.84 0.01 260); } .case-card-link { display: flex; align-items: center; gap: 7px; margin-top: auto; font: 300 12.5px/1.4 var(--font); color: oklch(0.68 0.13 250); word-break: break-all; } /* ---------- 10 — Clubes ---------- */ .clubs { position: relative; overflow: hidden; background: oklch(0.19 0.026 260); border-top: 1px solid oklch(0.62 0.19 22 / 0.35); border-bottom: 1px solid oklch(0.85 0.02 260 / 0.1); padding: clamp(130px,19vh,230px) clamp(20px,5vw,72px); } .clubs-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% -10%, oklch(0.34 0.09 24 / 0.5) 0%, transparent 62%); } .clubs-line { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(720px,80%); height: 1px; background: linear-gradient(to right, transparent, oklch(0.7 0.2 24), transparent); pointer-events: none; } .clubs-stack { position: relative; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(48px,6vh,80px); } .clubs-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; max-width: 820px; margin: 0 auto; } .clubs-kicker { display: flex; align-items: center; gap: 14px; font: 700 11px/1 var(--font); letter-spacing: 0.34em; text-transform: uppercase; color: oklch(0.72 0.17 22); } .clubs-kicker-line { width: 44px; height: 1px; background: oklch(0.62 0.19 22 / 0.6); } .clubs-title { margin: 0; font: 200 clamp(38px,5.4vw,78px)/1.02 var(--font); letter-spacing: -0.035em; } .clubs-sub { margin: 0; font: 300 clamp(16px,1.25vw,18px)/1.75 var(--font); color: oklch(0.8 0.014 260); max-width: 56ch; } .clubs-note { border: 1px solid oklch(0.85 0.02 260 / 0.2); padding: 10px 20px; font: 700 10px/1 var(--font); letter-spacing: 0.26em; text-transform: uppercase; color: oklch(0.82 0.01 260); } .clubs-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(290px,1fr)); gap: clamp(18px,1.8vw,28px); } .plan-card { position: relative; overflow: hidden; background: linear-gradient(180deg, oklch(0.28 0.028 260) 0%, oklch(0.225 0.024 260) 100%); border: 1px solid oklch(0.85 0.02 260 / 0.16); padding: clamp(40px,3.6vw,52px) clamp(28px,3vw,40px) clamp(238px,27vh,266px); display: flex; flex-direction: column; gap: 16px; box-shadow: 0 30px 70px -50px oklch(0.05 0.02 260 / 0.9); transition: transform 540ms cubic-bezier(0.22,0.7,0.2,1), box-shadow 540ms ease, border-color 380ms ease, opacity 760ms cubic-bezier(0.22,0.7,0.2,1); } .plan-card:hover { transform: translateY(-10px); box-shadow: 0 54px 100px -46px oklch(0.05 0.02 260 / 0.95); border-color: oklch(0.62 0.19 22 / 0.5); } .plan-card-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, oklch(0.62 0.19 22 / 0.7), transparent 70%); } .plan-card-level { font: 700 10px/1 var(--font); letter-spacing: 0.3em; text-transform: uppercase; color: oklch(0.6 0.014 260); } .plan-card-name { font: 700 clamp(24px,2.4vw,34px)/1.12 var(--font); } .plan-card-tag { font: 700 12px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: oklch(0.72 0.17 22); } .plan-card-text { margin: 0; font: 300 15px/1.7 var(--font); color: oklch(0.76 0.014 260); } .plan-card-text--black { color: oklch(0.78 0.014 260); } .plan-card-footer { margin-top: 6px; font: 500 11px/1.6 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.66 0.014 260); } .plan-card--black { background: linear-gradient(160deg, oklch(0.26 0.06 22) 0%, oklch(0.225 0.026 260) 58%); border: 1px solid oklch(0.62 0.19 22 / 0.55); padding: clamp(74px,7vw,88px) clamp(28px,3vw,40px) clamp(238px,27vh,266px); box-shadow: 0 40px 90px -50px oklch(0.3 0.14 24 / 0.55); transform: translateY(-14px); } .plan-card--black:hover { transform: translateY(-24px); box-shadow: 0 64px 110px -46px oklch(0.32 0.15 24 / 0.6); border-color: oklch(0.66 0.19 22 / 0.85); } .plan-card--black .plan-card-bar { background: linear-gradient(to right, oklch(0.7 0.2 24), oklch(0.7 0.2 24 / 0.15)); } .plan-card--black .plan-card-level { color: oklch(0.72 0.014 260); } .plan-card-ribbon { position: absolute; top: clamp(20px,2.2vw,28px); right: clamp(20px,2.2vw,28px); font: 700 10px/1 var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: oklch(0.98 0.004 260); background: var(--accent-btn); border-radius: 999px; padding: 9px 14px; } .plan-card--elite { border: 1px solid oklch(0.78 0.09 78 / 0.36); } .plan-card--elite:hover { border-color: oklch(0.82 0.09 78 / 0.7); } .plan-card--elite .plan-card-bar { background: linear-gradient(to right, oklch(0.82 0.09 78 / 0.75), transparent 70%); } .plan-card--elite .plan-card-tag { color: oklch(0.84 0.09 78); } .plan-card--platinum { background: linear-gradient(150deg, oklch(0.44 0.006 260) 0%, oklch(0.225 0.026 260) 55%, oklch(0.36 0.008 260) 100%); border: 1px solid oklch(0.78 0.008 260 / 0.4); } .plan-card--platinum:hover { border-color: oklch(0.85 0.008 260 / 0.7); } .plan-card--platinum .plan-card-bar { background: linear-gradient(to right, oklch(0.85 0.008 260 / 0.8), transparent 70%); } .plan-card--platinum .plan-card-tag { color: oklch(0.82 0.01 260); } .member-card { position: absolute; left: clamp(28px,3vw,40px); right: clamp(28px,3vw,40px); bottom: clamp(26px,3vh,36px); max-width: 300px; aspect-ratio: 1.586; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transform: translate3d(0,66%,0) rotate(5deg); transition: transform 640ms cubic-bezier(0.16,0.84,0.28,1), opacity 420ms ease; pointer-events: none; will-change: transform; } .member-card--platinum { background: linear-gradient(140deg, oklch(0.64 0.008 260) 0%, oklch(0.32 0.014 260) 50%, oklch(0.52 0.01 260) 100%); border: 1px solid oklch(0.8 0.008 260 / 0.55); box-shadow: 0 30px 60px -28px oklch(0.08 0.01 260 / 0.8); } .member-card--black { background: linear-gradient(140deg, oklch(0.2 0.02 260) 0%, oklch(0.11 0.01 260) 52%, oklch(0.22 0.06 24) 100%); border: 1px solid oklch(0.66 0.19 22 / 0.65); box-shadow: 0 30px 60px -28px oklch(0.06 0.02 260 / 0.85); } .member-card--elite { background: linear-gradient(140deg, oklch(0.36 0.05 70) 0%, oklch(0.16 0.02 260) 52%, oklch(0.3 0.05 60) 100%); border: 1px solid oklch(0.82 0.09 78 / 0.6); box-shadow: 0 30px 60px -28px oklch(0.08 0.02 60 / 0.8); } .plan-card:hover .member-card, .plan-card--black:hover .member-card, .plan-card--elite:hover .member-card { opacity: 1; transform: translate3d(0,0,0) rotate(-1.5deg); } .member-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; } .member-card-logo { height: 13px; width: auto; } .member-card-tier { font: 700 8px/1.4 var(--font); letter-spacing: 0.24em; text-transform: uppercase; color: oklch(0.74 0.17 22); } .member-card-tier--elite { color: oklch(0.86 0.09 78); } .member-card-tier--platinum { color: oklch(0.9 0.006 260); } .member-card-number { font: 500 12px/1 var(--font); letter-spacing: 0.2em; color: oklch(0.9 0.01 260); } .member-card-number--elite { color: oklch(0.92 0.01 260); } .member-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; } .member-card-label { font: 500 9px/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: oklch(0.78 0.01 260 / 0.8); } .member-card-label--elite { color: oklch(0.8 0.01 260 / 0.8); } .member-card-badge { font: 700 9px/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: oklch(0.74 0.17 22); } .member-card-badge--elite { color: oklch(0.86 0.09 78); } .member-card-badge--platinum { color: oklch(0.9 0.006 260); } .clubs-footer { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: center; border-top: 1px solid oklch(0.85 0.02 260 / 0.12); padding-top: clamp(28px,3.5vh,44px); } .clubs-footer-note { font: 300 14px/1.6 var(--font); color: oklch(0.72 0.014 260); } /* ---------- 11 — CTA final ---------- */ .cta-final { position: relative; padding: clamp(130px,20vh,240px) clamp(20px,5vw,72px); overflow: hidden; background: var(--bg-deep); border-top: 1px solid oklch(0.85 0.02 260 / 0.12); } .cta-final-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.6; } .cta-final-inner { position: relative; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(26px,3.6vh,42px); } .cta-final-title { margin: 0; font: 200 clamp(32px,5vw,74px)/1.04 var(--font); letter-spacing: -0.03em; } .cta-final-text { margin: 0; max-width: 46ch; font: 300 17px/1.7 var(--font); color: oklch(0.78 0.014 260); } .cta-final-sign { font: 200 clamp(20px,2vw,28px)/1.3 var(--font); color: oklch(0.86 0.01 260); } /* ---------- Footer ---------- */ .site-footer { padding: clamp(80px,10vh,130px) clamp(20px,5vw,72px) 36px; background: oklch(0.19 0.026 260); } .site-footer-stack { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(40px,5vh,68px); } .site-footer-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: clamp(28px,4vw,60px); } .site-footer-brand { display: flex; flex-direction: column; gap: 16px; } .site-footer-logo { height: 24px; width: auto; align-self: flex-start; } .site-footer-tagline { margin: 0; font: 300 15px/1.7 var(--font); color: oklch(0.72 0.014 260); max-width: 30ch; } .site-footer-col { display: flex; flex-direction: column; gap: 14px; } .site-footer-heading { font: 700 11px/1 var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-strong); } .site-footer-link { font: 300 15px/1 var(--font); } .site-footer-text { font: 300 15px/1.7 var(--font); color: oklch(0.72 0.014 260); } .site-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; border-top: 1px solid oklch(0.85 0.02 260 / 0.12); padding-top: 24px; font: 300 12px/1 var(--font); letter-spacing: 0.06em; color: oklch(0.62 0.014 260); } /* ---------- Legal page (Política de Privacidade) ---------- */ .legal { padding: clamp(140px,20vh,220px) clamp(20px,5vw,72px) clamp(100px,14vh,160px); } .legal-stack { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(40px,5vh,64px); } .legal-head { display: flex; flex-direction: column; gap: 14px; } .legal-title { margin: 0; font: 200 clamp(32px,4.2vw,54px)/1.1 var(--font); letter-spacing: -0.025em; } .legal-updated { margin: 0; font: 300 13px/1 var(--font); color: oklch(0.62 0.014 260); } .legal-body { display: flex; flex-direction: column; gap: 18px; font: 300 15px/1.8 var(--font); color: oklch(0.8 0.014 260); } .legal-body h2 { margin: 20px 0 0; font: 700 clamp(18px,1.6vw,22px)/1.3 var(--font); color: var(--text); } .legal-body p { margin: 0; } .legal-body ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; } .legal-body a { border-bottom: 1px solid oklch(0.85 0.02 260 / 0.3); transition: border-color 300ms ease; } .legal-body a:hover { border-color: oklch(0.66 0.19 22); } /* ---------- Cookie consent banner ---------- */ .cookie-banner { position: fixed; left: clamp(16px,3vw,28px); right: clamp(16px,3vw,28px); bottom: clamp(16px,3vh,28px); z-index: 90; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; max-width: 1040px; margin: 0 auto; padding: clamp(18px,2vw,24px) clamp(20px,2.4vw,28px); background: oklch(0.16 0.028 260 / 0.96); backdrop-filter: blur(16px); border: 1px solid oklch(0.85 0.02 260 / 0.16); box-shadow: 0 30px 70px -40px oklch(0.05 0.02 260 / 0.9); opacity: 0; transform: translate3d(0,24px,0); pointer-events: none; transition: opacity 460ms cubic-bezier(0.22,0.7,0.2,1), transform 460ms cubic-bezier(0.22,0.7,0.2,1); } .cookie-banner.is-visible { opacity: 1; transform: none; pointer-events: auto; } .cookie-banner-text { margin: 0; flex: 1 1 320px; font: 300 14px/1.65 var(--font); color: oklch(0.82 0.014 260); } .cookie-banner-link { border-bottom: 1px solid oklch(0.85 0.02 260 / 0.3); transition: border-color 300ms ease; } .cookie-banner-link:hover { border-color: oklch(0.66 0.19 22); } .cookie-banner-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .cookie-banner-btn { border: none; cursor: pointer; font: 700 11px/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; padding: 13px 22px; white-space: nowrap; transition: background 260ms ease, color 260ms ease, border-color 260ms ease, transform 240ms cubic-bezier(0.22,0.7,0.2,1); } .cookie-banner-btn--accept { background: var(--accent-btn); color: oklch(0.98 0.004 260); } .cookie-banner-btn--accept:hover { background: var(--accent-btn-hover); transform: translateY(-2px); } .cookie-banner-btn--ghost { background: transparent; color: oklch(0.78 0.014 260); border: 1px solid oklch(0.85 0.02 260 / 0.3); } .cookie-banner-btn--ghost:hover { border-color: oklch(0.85 0.02 260 / 0.55); color: var(--text); } @media (max-width: 560px) { .cookie-banner { flex-direction: column; align-items: stretch; } .cookie-banner-actions { justify-content: stretch; } .cookie-banner-btn { flex: 1 1 0; } } /* ---------- Responsive ---------- */ @media (max-width: 780px) { .main-nav { display: none !important; } .hero-content { grid-template-columns: 1fr !important; } .hero-logo { display: none !important; } .eco-path-wrap { height: auto !important; display: flex !important; flex-direction: column; gap: 2px; } .eco-node { position: static !important; transform: none !important; max-width: 100% !important; width: 100%; padding: 14px 4px; border-bottom: 1px solid oklch(0.85 0.02 260 / 0.12); flex-direction: row !important; text-align: left !important; flex-wrap: wrap !important; align-items: flex-start !important; } .eco-node.is-active { background: oklch(0.225 0.026 260); } .eco-node.is-active > .eco-node-detail { display: flex !important; } .eco-svg { display: none !important; } .eco-plane { display: none !important; } .eco-preview { display: none !important; } .eco-col { position: static !important; } .eco-node-progress { display: block; flex: 1 1 100%; order: 3; margin-top: 12px; height: 3px; border-radius: 999px; overflow: hidden; background: oklch(0.85 0.02 260 / 0.16); opacity: 0; transition: opacity 260ms ease; } .eco-node-progress-fill { display: block; height: 100%; width: 0%; background: var(--accent-strong); } .eco-node.is-active .eco-node-progress { background: oklch(0.85 0.02 260 / 0.24); } .plan-card, .plan-card--black, .plan-card--elite { padding-bottom: clamp(30px,4vh,44px) !important; padding-top: 58px !important; transform: none !important; } .member-card { display: none !important; } .nav-cta { padding: 11px 16px !important; letter-spacing: 0.1em !important; font-size: 11px !important; } .hero-video-frame { align-self: center !important; width: min(100%, calc(60vh * 9 / 16 + 20px)) !important; max-width: none !important; } .hero-video-inner { aspect-ratio: 9/16 !important; } .hero-video-credit { text-align: center; } }