/* GERADO por qa/build-pages.js — nao editar aqui. Fontes: assets/css/ds.css (design system) + assets/css/styles.css (camada). */ .sc-placeholder { background: color-mix(in srgb, currentcolor 8%, transparent); border: 1px solid color-mix(in srgb, currentcolor, transparent); border-radius: 2px; box-sizing: border-box; overflow: hidden; } @keyframes sc-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } html.sc-dc-streaming .sc-placeholder, html.sc-dc-streaming .sc-interp.sc-missing { position: relative; background: color-mix(in srgb, currentcolor 5%, transparent); border-color: transparent; } html.sc-dc-streaming .sc-placeholder::before, html.sc-dc-streaming .sc-interp.sc-missing::before { content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(90deg, rgba(217, 119, 87, 0) 25%, rgba(247, 225, 211, 0.95) 37%, rgba(217, 119, 87, 0) 63%) 0% 0% / 400% 100%; animation: 1.4s ease 0s infinite normal none running sc-shine; } html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before, html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before { animation: auto ease 0s 1 normal none running none; background: color-mix(in srgb, currentcolor 8%, transparent); } .sc-placeholder-error { padding: 4px 8px; font: 11px / 1.4 ui-monospace, monospace; color: color-mix(in srgb, currentcolor 70%, transparent); word-break: break-word; } .sc-interp.sc-missing { display: inline-block; width: 2em; height: 1em; overflow: hidden; vertical-align: text-bottom; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 2px; box-sizing: border-box; color: transparent; user-select: none; } .sc-interp.sc-unresolved { font-family: ui-monospace, monospace; font-size: 0.85em; color: color-mix(in srgb, currentcolor, transparent); background: color-mix(in srgb, currentcolor 10%, transparent); border-radius: 3px; padding: 0px 3px; } .sc-host.sc-has-error { position: relative; } .sc-logic-error { position: absolute; top: 8px; left: 8px; z-index: 2147483647; max-width: 60ch; padding: 6px 10px; background: rgb(176, 0, 32); color: rgb(255, 255, 255); font: 12px / 1.4 ui-monospace, monospace; border-radius: 4px; white-space: pre-wrap; pointer-events: none; } @media print { @page { margin: 0.5cm; } figure, table { break-inside: avoid; } #dc-root, #dc-root > .sc-host { height: auto; } *, ::before, ::after { print-color-adjust: exact; backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: 0.001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; } } x-dc { display: none !important; } :root { --cf-purple-950: #1A0733; --cf-purple-900: #2A0E52; --cf-purple-800: #38136B; --cf-purple-700: #491A87; --cf-purple-600: #5A1E96; --cf-purple-500: #6E2CB0; --cf-purple-400: #8B4BD1; --cf-purple-300: #AE7FE0; --cf-purple-200: #D2B8F0; --cf-purple-100: #ECE0FA; --cf-magenta-700: #A81E78; --cf-magenta-600: #C42A8D; --cf-pink-600: #DE2A96; --cf-pink-500: #E92E96; --cf-pink-400: #F84FB2; --cf-pink-300: #FB86CD; --cf-pink-200: #FBB6DE; --cf-pink-100: #FDE1F0; --cf-hot-pink: #F30D9E; --cf-black: #0B0A0F; --cf-ink-900: #141019; --cf-ink-800: #1E1826; --cf-ink-700: #2C2438; --cf-ink-600: #423651; --cf-ink-500: #6A5C7C; --cf-ink-400: #948AA4; --cf-ink-300: #C2BACD; --cf-ink-200: #E4DFEC; --cf-ink-100: #F3F0F8; --cf-paper: #FFFFFF; --cf-paper-2: #F6F2FB; --cf-white: #FFFFFF; --cf-warn: #FFB020; --cf-warn-soft: #FFF2D6; --cf-danger: #E5484D; --cf-success: #30B37E; --cf-gradient-brand: linear-gradient(120deg, #C42A8D 0%, #F84FB2 100%); --cf-gradient-brand-soft: linear-gradient(120deg, #E92E96 0%, #FB86CD 100%); --cf-gradient-pink: linear-gradient(120deg, #C42A8D 0%, #F84FB2 100%); --cf-gradient-purple: linear-gradient(120deg, #491A87 0%, #6E2CB0 100%); --cf-gradient-ink: linear-gradient(180deg, #1B1A20 0%, #0B0A0F 100%); --cf-fade-to-black: linear-gradient(180deg, transparent 0%, rgba(11,10,15,0.65) 62%, #0B0A0F 100%); --brand: var(--cf-pink-500); --brand-strong: var(--cf-pink-600); --accent: var(--cf-purple-600); --accent-bright: var(--cf-pink-400); --gradient-brand: var(--cf-gradient-brand); --surface-page: var(--cf-paper); --surface-card: var(--cf-white); --surface-sunken: var(--cf-paper-2); --text-heading: var(--cf-ink-900); --text-body: var(--cf-ink-700); --text-muted: var(--cf-ink-500); --border-hair: var(--cf-ink-200); --surface-dark: var(--cf-black); --surface-dark-raised: var(--cf-ink-800); --text-on-dark: var(--cf-white); --text-on-dark-muted: var(--cf-ink-300); --border-on-dark: rgba(255,255,255,0.10); --focus-ring: var(--cf-pink-400); } :root { --cf-font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif; --cf-font-script: 'Permanent Marker', 'Comic Sans MS', cursive; --cf-font-body: 'Montserrat', system-ui, -apple-system, sans-serif; --cf-font-eyebrow: 'Montserrat', system-ui, sans-serif; --cf-w-regular: 400; --cf-w-medium: 500; --cf-w-semibold: 600; --cf-w-bold: 700; --cf-w-black: 800; --cf-text-display-xl: clamp(3rem, 7vw, 5.5rem); --cf-text-display-lg: clamp(2.25rem, 5vw, 3.75rem); --cf-text-display-md: clamp(1.75rem, 3.6vw, 2.75rem); --cf-text-display-sm: clamp(1.375rem, 2.6vw, 2rem); --cf-text-2xl: 1.5rem; --cf-text-xl: 1.25rem; --cf-text-lg: 1.125rem; --cf-text-md: 1rem; --cf-text-sm: 0.875rem; --cf-text-xs: 0.75rem; --cf-lh-display: 1.04; --cf-lh-tight: 1.15; --cf-lh-snug: 1.35; --cf-lh-body: 1.6; --cf-tracking-display: -0.02em; --cf-tracking-normal: 0; --cf-tracking-eyebrow: 0.22em; --cf-tracking-wide: 0.06em; --font-display: var(--cf-font-display); --font-body: var(--cf-font-body); --font-eyebrow: var(--cf-font-eyebrow); --font-script: var(--cf-font-script); } :root { --cf-space-0: 0; --cf-space-1: 4px; --cf-space-2: 8px; --cf-space-3: 12px; --cf-space-4: 16px; --cf-space-5: 20px; --cf-space-6: 24px; --cf-space-8: 32px; --cf-space-10: 40px; --cf-space-12: 48px; --cf-space-16: 64px; --cf-space-20: 80px; --cf-space-24: 96px; --cf-space-26: 104px; --cf-static-pad: 96px; --cf-static-pad-lg: 104px; --cf-container: 1200px; --cf-container-narrow: 780px; --cf-gutter: 24px; --cf-hero-gap: clamp(24px, 4vw, 64px); --space-section: var(--cf-space-20); --space-block: var(--cf-space-10); --space-inline: var(--cf-space-4); } :root { --cf-radius-xs: 6px; --cf-radius-sm: 10px; --cf-radius-md: 16px; --cf-radius-lg: 24px; --cf-radius-xl: 32px; --cf-radius-pill: 999px; --cf-shadow-sm: 0 1px 2px rgba(26,7,51,0.06), 0 2px 6px rgba(26,7,51,0.05); --cf-shadow-md: 0 6px 18px rgba(42,14,82,0.10), 0 2px 6px rgba(42,14,82,0.06); --cf-shadow-lg: 0 18px 48px rgba(42,14,82,0.16), 0 6px 16px rgba(42,14,82,0.08); --cf-glow-pink: 0 10px 30px rgba(233,46,150,0.35); --cf-glow-purple: 0 10px 30px rgba(90,30,150,0.35); --cf-border-hair: 1px solid var(--cf-ink-200); --cf-border-on-dark: 1px solid rgba(255,255,255,0.10); --cf-border-accent: 1.5px solid var(--cf-pink-500); --cf-ease: cubic-bezier(0.22, 1, 0.36, 1); --cf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --cf-dur-fast: 140ms; --cf-dur: 220ms; --cf-dur-slow: 420ms; --cf-press-scale: 0.97; --cf-hover-lift: -2px; --cf-fade-bottom: linear-gradient(180deg, transparent 0%, rgba(11,10,15,0.7) 62%, #0B0A0F 100%); --cf-fade-photo: linear-gradient(180deg, #000 62%, transparent 100%); --cf-scrim: linear-gradient(90deg, rgba(11,10,15,0.85) 0%, rgba(11,10,15,0.35) 60%, transparent 100%); --radius-card: var(--cf-radius-md); --radius-pill: var(--cf-radius-pill); --shadow-card: var(--cf-shadow-md); --shadow-card-hover: var(--cf-shadow-lg); } body { font-family: var(--cf-font-body); color: var(--cf-ink-700); background: var(--cf-paper); font-size: var(--cf-text-md); line-height: var(--cf-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } h1, h2, h3, h4 { font-family: var(--cf-font-display); color: var(--cf-ink-900); line-height: var(--cf-lh-tight); letter-spacing: var(--cf-tracking-display); font-weight: 800; text-wrap: balance; margin: 0px; } p { text-wrap: pretty; } a { color: var(--cf-pink-600); text-decoration: none; transition: color var(--cf-dur) var(--cf-ease); } a:hover { color: var(--cf-pink-400); } .cf-on-dark a { color: var(--cf-pink-400); } .cf-on-dark a:hover { color: var(--cf-pink-300); } ::selection { background: var(--cf-pink-400); color: rgb(255, 255, 255); } :focus-visible { outline: 2px solid var(--cf-pink-400); outline-offset: 2px; border-radius: 4px; } .cf-eyebrow { font-family: var(--cf-font-eyebrow); text-transform: uppercase; letter-spacing: var(--cf-tracking-eyebrow); font-weight: var(--cf-w-semibold); font-size: var(--cf-text-sm); } .cf-script { font-family: var(--cf-font-script); color: var(--cf-pink-500); font-weight: 400; letter-spacing: 0.01em; line-height: 1.05; transform: rotate(-3deg); display: inline-block; } .cf-gradient-text { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; color: transparent; } :root { --cf-purple-950: #1A0733; --cf-purple-900: #2A0E52; --cf-purple-800: #38136B; --cf-purple-700: #491A87; --cf-purple-600: #5A1E96; --cf-purple-500: #6E2CB0; --cf-purple-400: #8B4BD1; --cf-purple-300: #AE7FE0; --cf-purple-200: #D2B8F0; --cf-purple-100: #ECE0FA; --cf-magenta-700: #A81E78; --cf-magenta-600: #C42A8D; --cf-pink-600: #DE2A96; --cf-pink-500: #E92E96; --cf-pink-400: #F84FB2; --cf-pink-300: #FB86CD; --cf-pink-200: #FBB6DE; --cf-pink-100: #FDE1F0; --cf-hot-pink: #F30D9E; --cf-black: #0B0A0F; --cf-ink-900: #141019; --cf-ink-800: #1E1826; --cf-ink-700: #2C2438; --cf-ink-600: #423651; --cf-ink-500: #6A5C7C; --cf-ink-400: #948AA4; --cf-ink-300: #C2BACD; --cf-ink-200: #E4DFEC; --cf-ink-100: #F3F0F8; --cf-paper: #FFFFFF; --cf-paper-2: #F6F2FB; --cf-white: #FFFFFF; --cf-warn: #FFB020; --cf-warn-soft: #FFF2D6; --cf-danger: #E5484D; --cf-success: #30B37E; --cf-gradient-brand: linear-gradient(120deg, #C42A8D 0%, #F84FB2 100%); --cf-gradient-brand-soft: linear-gradient(120deg, #E92E96 0%, #FB86CD 100%); --cf-gradient-pink: linear-gradient(120deg, #C42A8D 0%, #F84FB2 100%); --cf-gradient-purple: linear-gradient(120deg, #491A87 0%, #6E2CB0 100%); --cf-gradient-ink: linear-gradient(180deg, #1B1A20 0%, #0B0A0F 100%); --cf-fade-to-black: linear-gradient(180deg, transparent 0%, rgba(11,10,15,0.65) 62%, #0B0A0F 100%); --brand: var(--cf-pink-500); --brand-strong: var(--cf-pink-600); --accent: var(--cf-purple-600); --accent-bright: var(--cf-pink-400); --gradient-brand: var(--cf-gradient-brand); --surface-page: var(--cf-paper); --surface-card: var(--cf-white); --surface-sunken: var(--cf-paper-2); --text-heading: var(--cf-ink-900); --text-body: var(--cf-ink-700); --text-muted: var(--cf-ink-500); --border-hair: var(--cf-ink-200); --surface-dark: var(--cf-black); --surface-dark-raised: var(--cf-ink-800); --text-on-dark: var(--cf-white); --text-on-dark-muted: var(--cf-ink-300); --border-on-dark: rgba(255,255,255,0.10); --focus-ring: var(--cf-pink-400); } :root { --cf-font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif; --cf-font-script: 'Permanent Marker', 'Comic Sans MS', cursive; --cf-font-body: 'Montserrat', system-ui, -apple-system, sans-serif; --cf-font-eyebrow: 'Montserrat', system-ui, sans-serif; --cf-w-regular: 400; --cf-w-medium: 500; --cf-w-semibold: 600; --cf-w-bold: 700; --cf-w-black: 800; --cf-text-display-xl: clamp(3rem, 7vw, 5.5rem); --cf-text-display-lg: clamp(2.25rem, 5vw, 3.75rem); --cf-text-display-md: clamp(1.75rem, 3.6vw, 2.75rem); --cf-text-display-sm: clamp(1.375rem, 2.6vw, 2rem); --cf-text-2xl: 1.5rem; --cf-text-xl: 1.25rem; --cf-text-lg: 1.125rem; --cf-text-md: 1rem; --cf-text-sm: 0.875rem; --cf-text-xs: 0.75rem; --cf-lh-display: 1.04; --cf-lh-tight: 1.15; --cf-lh-snug: 1.35; --cf-lh-body: 1.6; --cf-tracking-display: -0.02em; --cf-tracking-normal: 0; --cf-tracking-eyebrow: 0.22em; --cf-tracking-wide: 0.06em; --font-display: var(--cf-font-display); --font-body: var(--cf-font-body); --font-eyebrow: var(--cf-font-eyebrow); --font-script: var(--cf-font-script); } :root { --cf-space-0: 0; --cf-space-1: 4px; --cf-space-2: 8px; --cf-space-3: 12px; --cf-space-4: 16px; --cf-space-5: 20px; --cf-space-6: 24px; --cf-space-8: 32px; --cf-space-10: 40px; --cf-space-12: 48px; --cf-space-16: 64px; --cf-space-20: 80px; --cf-space-24: 96px; --cf-space-26: 104px; --cf-static-pad: 96px; --cf-static-pad-lg: 104px; --cf-container: 1200px; --cf-container-narrow: 780px; --cf-gutter: 24px; --cf-hero-gap: clamp(24px, 4vw, 64px); --space-section: var(--cf-space-20); --space-block: var(--cf-space-10); --space-inline: var(--cf-space-4); } :root { --cf-radius-xs: 6px; --cf-radius-sm: 10px; --cf-radius-md: 16px; --cf-radius-lg: 24px; --cf-radius-xl: 32px; --cf-radius-pill: 999px; --cf-shadow-sm: 0 1px 2px rgba(26,7,51,0.06), 0 2px 6px rgba(26,7,51,0.05); --cf-shadow-md: 0 6px 18px rgba(42,14,82,0.10), 0 2px 6px rgba(42,14,82,0.06); --cf-shadow-lg: 0 18px 48px rgba(42,14,82,0.16), 0 6px 16px rgba(42,14,82,0.08); --cf-glow-pink: 0 10px 30px rgba(233,46,150,0.35); --cf-glow-purple: 0 10px 30px rgba(90,30,150,0.35); --cf-border-hair: 1px solid var(--cf-ink-200); --cf-border-on-dark: 1px solid rgba(255,255,255,0.10); --cf-border-accent: 1.5px solid var(--cf-pink-500); --cf-ease: cubic-bezier(0.22, 1, 0.36, 1); --cf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --cf-dur-fast: 140ms; --cf-dur: 220ms; --cf-dur-slow: 420ms; --cf-press-scale: 0.97; --cf-hover-lift: -2px; --cf-fade-bottom: linear-gradient(180deg, transparent 0%, rgba(11,10,15,0.7) 62%, #0B0A0F 100%); --cf-fade-photo: linear-gradient(180deg, #000 62%, transparent 100%); --cf-scrim: linear-gradient(90deg, rgba(11,10,15,0.85) 0%, rgba(11,10,15,0.35) 60%, transparent 100%); --radius-card: var(--cf-radius-md); --radius-pill: var(--cf-radius-pill); --shadow-card: var(--cf-shadow-md); --shadow-card-hover: var(--cf-shadow-lg); } body { font-family: var(--cf-font-body); color: var(--cf-ink-700); background: var(--cf-paper); font-size: var(--cf-text-md); line-height: var(--cf-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } h1, h2, h3, h4 { font-family: var(--cf-font-display); color: var(--cf-ink-900); line-height: var(--cf-lh-tight); letter-spacing: var(--cf-tracking-display); font-weight: 800; text-wrap: balance; margin: 0px; } p { text-wrap: pretty; } a { color: var(--cf-pink-600); text-decoration: none; transition: color var(--cf-dur) var(--cf-ease); } a:hover { color: var(--cf-pink-400); } .cf-on-dark a { color: var(--cf-pink-400); } .cf-on-dark a:hover { color: var(--cf-pink-300); } ::selection { background: var(--cf-pink-400); color: rgb(255, 255, 255); } :focus-visible { outline: 2px solid var(--cf-pink-400); outline-offset: 2px; border-radius: 4px; } .cf-eyebrow { font-family: var(--cf-font-eyebrow); text-transform: uppercase; letter-spacing: var(--cf-tracking-eyebrow); font-weight: var(--cf-w-semibold); font-size: var(--cf-text-sm); } .cf-script { font-family: var(--cf-font-script); color: var(--cf-pink-500); font-weight: 400; letter-spacing: 0.01em; line-height: 1.05; transform: rotate(-3deg); display: inline-block; } .cf-gradient-text { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; color: transparent; } html, body { margin: 0px; background: var(--cf-black); } a { color: var(--cf-hot-pink); text-decoration: none; } a:hover { color: var(--cf-pink-400); } @keyframes cfFloatA { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-16px); } } @keyframes cfFloatB { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } @keyframes cfFloatC { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes cfFloatD { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-14px); } } [data-anim="off"] .lp-float, [data-anim="off"] .lp-me { animation: auto ease 0s 1 normal none running none !important; } [data-proof="pink"] .lp-float img { filter: grayscale(1) sepia(0.55) hue-rotate(268deg) saturate(2.6) contrast(1.05) brightness(0.9) !important; } @media (max-width: 920px) { .lp-nav { display: none !important; } .lp-grid { grid-template-columns: 1fr !important; min-height: 0px !important; gap: 18px !important; padding-top: 16px !important; } .lp-bg { position: absolute !important; top: 0px !important; left: 0px !important; bottom: auto !important; width: 100% !important; height: auto !important; object-fit: contain !important; object-position: center top !important; filter: brightness(0.82) !important; mask-image: linear-gradient(rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 82%, transparent 100%) !important; } .lp-ov { background: linear-gradient(rgba(11, 10, 15, 0.12) 0%, transparent 34%, rgba(11, 10, 15, 0.55) 60%, rgb(11, 10, 15) 80%) !important; } .lp-visual { order: -1; position: relative !important; left: 0px !important; width: 100% !important; max-width: 392px !important; margin: 0px auto -104px !important; justify-self: center !important; min-height: 0px !important; height: auto !important; padding-top: 2px !important; display: block !important; z-index: 1 !important; } .lp-copy { max-width: 560px !important; margin: -20px auto 0px !important; width: 100% !important; text-align: center !important; } .lp-copy h1 { font-size: 1.72rem !important; line-height: 1.14 !important; } .lp-proof { justify-content: center !important; white-space: nowrap !important; } .lp-proof > div { white-space: nowrap !important; font-size: 11.5px !important; } .lp-form { text-align: left !important; margin-left: auto !important; margin-right: auto !important; } .lp-cut { mask-image: linear-gradient(rgb(0, 0, 0) 58%, transparent 90%); position: relative !important; left: auto !important; bottom: auto !important; transform: none !important; height: auto !important; width: 96% !important; max-width: 372px !important; margin: 0px auto !important; display: block !important; z-index: 3 !important; } .lp-logo-m { display: block !important; position: absolute !important; left: -6% !important; top: -5% !important; transform: none !important; width: min(46vw, 300px) !important; z-index: 2 !important; opacity: 1 !important; filter: brightness(0) invert(1) !important; } .lp-fade { display: block !important; } .lp-visual .lp-float { display: none !important; } .lp-visual .lp-float:nth-of-type(1) { display: block !important; top: 11% !important; left: 16% !important; right: auto !important; width: min(20vw, 150px) !important; opacity: 0.7 !important; z-index: 1 !important; animation: auto ease 0s 1 normal none running none !important; } .lp-visual .lp-float:nth-of-type(2) { display: block !important; top: 6% !important; right: 16% !important; left: auto !important; width: min(20vw, 150px) !important; opacity: 0.7 !important; z-index: 1 !important; animation: auto ease 0s 1 normal none running none !important; } .lp-visual .lp-float:nth-of-type(3) { display: none !important; } .lp-visual .lp-float:nth-of-type(4) { display: block !important; top: 34% !important; left: 14% !important; right: auto !important; width: min(19vw, 140px) !important; opacity: 0.6 !important; z-index: 1 !important; animation: auto ease 0s 1 normal none running none !important; } .lp-me { position: absolute !important; inset: 38% -2% auto auto !important; width: min(23vw, 150px) !important; margin: 0px !important; z-index: 4 !important; animation: auto ease 0s 1 normal none running none !important; } .lp-me > div { transform: rotate(4deg) !important; } .lp-me-label { display: none !important; } .lp-sep { color: transparent !important; } .lp-botfade { display: none !important; } } :root { --cf-purple-950: #1A0733; --cf-purple-900: #2A0E52; --cf-purple-800: #38136B; --cf-purple-700: #491A87; --cf-purple-600: #5A1E96; --cf-purple-500: #6E2CB0; --cf-purple-400: #8B4BD1; --cf-purple-300: #AE7FE0; --cf-purple-200: #D2B8F0; --cf-purple-100: #ECE0FA; --cf-magenta-700: #A81E78; --cf-magenta-600: #C42A8D; --cf-pink-600: #DE2A96; --cf-pink-500: #E92E96; --cf-pink-400: #F84FB2; --cf-pink-300: #FB86CD; --cf-pink-200: #FBB6DE; --cf-pink-100: #FDE1F0; --cf-hot-pink: #F30D9E; --cf-black: #0B0A0F; --cf-ink-900: #141019; --cf-ink-800: #1E1826; --cf-ink-700: #2C2438; --cf-ink-600: #423651; --cf-ink-500: #6A5C7C; --cf-ink-400: #948AA4; --cf-ink-300: #C2BACD; --cf-ink-200: #E4DFEC; --cf-ink-100: #F3F0F8; --cf-paper: #FFFFFF; --cf-paper-2: #F6F2FB; --cf-white: #FFFFFF; --cf-warn: #FFB020; --cf-warn-soft: #FFF2D6; --cf-danger: #E5484D; --cf-success: #30B37E; --cf-gradient-brand: linear-gradient(120deg, #C42A8D 0%, #F84FB2 100%); --cf-gradient-brand-soft: linear-gradient(120deg, #E92E96 0%, #FB86CD 100%); --cf-gradient-pink: linear-gradient(120deg, #C42A8D 0%, #F84FB2 100%); --cf-gradient-purple: linear-gradient(120deg, #491A87 0%, #6E2CB0 100%); --cf-gradient-ink: linear-gradient(180deg, #1B1A20 0%, #0B0A0F 100%); --cf-fade-to-black: linear-gradient(180deg, transparent 0%, rgba(11,10,15,0.65) 62%, #0B0A0F 100%); --brand: var(--cf-pink-500); --brand-strong: var(--cf-pink-600); --accent: var(--cf-purple-600); --accent-bright: var(--cf-pink-400); --gradient-brand: var(--cf-gradient-brand); --surface-page: var(--cf-paper); --surface-card: var(--cf-white); --surface-sunken: var(--cf-paper-2); --text-heading: var(--cf-ink-900); --text-body: var(--cf-ink-700); --text-muted: var(--cf-ink-500); --border-hair: var(--cf-ink-200); --surface-dark: var(--cf-black); --surface-dark-raised: var(--cf-ink-800); --text-on-dark: var(--cf-white); --text-on-dark-muted: var(--cf-ink-300); --border-on-dark: rgba(255,255,255,0.10); --focus-ring: var(--cf-pink-400); } :root { --cf-font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif; --cf-font-script: 'Permanent Marker', 'Comic Sans MS', cursive; --cf-font-body: 'Montserrat', system-ui, -apple-system, sans-serif; --cf-font-eyebrow: 'Montserrat', system-ui, sans-serif; --cf-w-regular: 400; --cf-w-medium: 500; --cf-w-semibold: 600; --cf-w-bold: 700; --cf-w-black: 800; --cf-text-display-xl: clamp(3rem, 7vw, 5.5rem); --cf-text-display-lg: clamp(2.25rem, 5vw, 3.75rem); --cf-text-display-md: clamp(1.75rem, 3.6vw, 2.75rem); --cf-text-display-sm: clamp(1.375rem, 2.6vw, 2rem); --cf-text-2xl: 1.5rem; --cf-text-xl: 1.25rem; --cf-text-lg: 1.125rem; --cf-text-md: 1rem; --cf-text-sm: 0.875rem; --cf-text-xs: 0.75rem; --cf-lh-display: 1.04; --cf-lh-tight: 1.15; --cf-lh-snug: 1.35; --cf-lh-body: 1.6; --cf-tracking-display: -0.02em; --cf-tracking-normal: 0; --cf-tracking-eyebrow: 0.22em; --cf-tracking-wide: 0.06em; --font-display: var(--cf-font-display); --font-body: var(--cf-font-body); --font-eyebrow: var(--cf-font-eyebrow); --font-script: var(--cf-font-script); } :root { --cf-space-0: 0; --cf-space-1: 4px; --cf-space-2: 8px; --cf-space-3: 12px; --cf-space-4: 16px; --cf-space-5: 20px; --cf-space-6: 24px; --cf-space-8: 32px; --cf-space-10: 40px; --cf-space-12: 48px; --cf-space-16: 64px; --cf-space-20: 80px; --cf-space-24: 96px; --cf-space-26: 104px; --cf-static-pad: 96px; --cf-static-pad-lg: 104px; --cf-container: 1200px; --cf-container-narrow: 780px; --cf-gutter: 24px; --cf-hero-gap: clamp(24px, 4vw, 64px); --space-section: var(--cf-space-20); --space-block: var(--cf-space-10); --space-inline: var(--cf-space-4); } :root { --cf-radius-xs: 6px; --cf-radius-sm: 10px; --cf-radius-md: 16px; --cf-radius-lg: 24px; --cf-radius-xl: 32px; --cf-radius-pill: 999px; --cf-shadow-sm: 0 1px 2px rgba(26,7,51,0.06), 0 2px 6px rgba(26,7,51,0.05); --cf-shadow-md: 0 6px 18px rgba(42,14,82,0.10), 0 2px 6px rgba(42,14,82,0.06); --cf-shadow-lg: 0 18px 48px rgba(42,14,82,0.16), 0 6px 16px rgba(42,14,82,0.08); --cf-glow-pink: 0 10px 30px rgba(233,46,150,0.35); --cf-glow-purple: 0 10px 30px rgba(90,30,150,0.35); --cf-border-hair: 1px solid var(--cf-ink-200); --cf-border-on-dark: 1px solid rgba(255,255,255,0.10); --cf-border-accent: 1.5px solid var(--cf-pink-500); --cf-ease: cubic-bezier(0.22, 1, 0.36, 1); --cf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --cf-dur-fast: 140ms; --cf-dur: 220ms; --cf-dur-slow: 420ms; --cf-press-scale: 0.97; --cf-hover-lift: -2px; --cf-fade-bottom: linear-gradient(180deg, transparent 0%, rgba(11,10,15,0.7) 62%, #0B0A0F 100%); --cf-fade-photo: linear-gradient(180deg, #000 62%, transparent 100%); --cf-scrim: linear-gradient(90deg, rgba(11,10,15,0.85) 0%, rgba(11,10,15,0.35) 60%, transparent 100%); --radius-card: var(--cf-radius-md); --radius-pill: var(--cf-radius-pill); --shadow-card: var(--cf-shadow-md); --shadow-card-hover: var(--cf-shadow-lg); } body { font-family: var(--cf-font-body); color: var(--cf-ink-700); background: var(--cf-paper); font-size: var(--cf-text-md); line-height: var(--cf-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } h1, h2, h3, h4 { font-family: var(--cf-font-display); color: var(--cf-ink-900); line-height: var(--cf-lh-tight); letter-spacing: var(--cf-tracking-display); font-weight: 800; text-wrap: balance; margin: 0px; } p { text-wrap: pretty; } a { color: var(--cf-pink-600); text-decoration: none; transition: color var(--cf-dur) var(--cf-ease); } a:hover { color: var(--cf-pink-400); } .cf-on-dark a { color: var(--cf-pink-400); } .cf-on-dark a:hover { color: var(--cf-pink-300); } ::selection { background: var(--cf-pink-400); color: rgb(255, 255, 255); } :focus-visible { outline: 2px solid var(--cf-pink-400); outline-offset: 2px; border-radius: 4px; } .cf-eyebrow { font-family: var(--cf-font-eyebrow); text-transform: uppercase; letter-spacing: var(--cf-tracking-eyebrow); font-weight: var(--cf-w-semibold); font-size: var(--cf-text-sm); } .cf-script { font-family: var(--cf-font-script); color: var(--cf-pink-500); font-weight: 400; letter-spacing: 0.01em; line-height: 1.05; transform: rotate(-3deg); display: inline-block; } .cf-gradient-text { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; color: transparent; } :root { --cf-purple-950: #1A0733; --cf-purple-900: #2A0E52; --cf-purple-800: #38136B; --cf-purple-700: #491A87; --cf-purple-600: #5A1E96; --cf-purple-500: #6E2CB0; --cf-purple-400: #8B4BD1; --cf-purple-300: #AE7FE0; --cf-purple-200: #D2B8F0; --cf-purple-100: #ECE0FA; --cf-magenta-700: #A81E78; --cf-magenta-600: #C42A8D; --cf-pink-600: #DE2A96; --cf-pink-500: #E92E96; --cf-pink-400: #F84FB2; --cf-pink-300: #FB86CD; --cf-pink-200: #FBB6DE; --cf-pink-100: #FDE1F0; --cf-hot-pink: #F30D9E; --cf-black: #0B0A0F; --cf-ink-900: #141019; --cf-ink-800: #1E1826; --cf-ink-700: #2C2438; --cf-ink-600: #423651; --cf-ink-500: #6A5C7C; --cf-ink-400: #948AA4; --cf-ink-300: #C2BACD; --cf-ink-200: #E4DFEC; --cf-ink-100: #F3F0F8; --cf-paper: #FFFFFF; --cf-paper-2: #F6F2FB; --cf-white: #FFFFFF; --cf-warn: #FFB020; --cf-warn-soft: #FFF2D6; --cf-danger: #E5484D; --cf-success: #30B37E; --cf-gradient-brand: linear-gradient(120deg, #C42A8D 0%, #F84FB2 100%); --cf-gradient-brand-soft: linear-gradient(120deg, #E92E96 0%, #FB86CD 100%); --cf-gradient-pink: linear-gradient(120deg, #C42A8D 0%, #F84FB2 100%); --cf-gradient-purple: linear-gradient(120deg, #491A87 0%, #6E2CB0 100%); --cf-gradient-ink: linear-gradient(180deg, #1B1A20 0%, #0B0A0F 100%); --cf-fade-to-black: linear-gradient(180deg, transparent 0%, rgba(11,10,15,0.65) 62%, #0B0A0F 100%); --brand: var(--cf-pink-500); --brand-strong: var(--cf-pink-600); --accent: var(--cf-purple-600); --accent-bright: var(--cf-pink-400); --gradient-brand: var(--cf-gradient-brand); --surface-page: var(--cf-paper); --surface-card: var(--cf-white); --surface-sunken: var(--cf-paper-2); --text-heading: var(--cf-ink-900); --text-body: var(--cf-ink-700); --text-muted: var(--cf-ink-500); --border-hair: var(--cf-ink-200); --surface-dark: var(--cf-black); --surface-dark-raised: var(--cf-ink-800); --text-on-dark: var(--cf-white); --text-on-dark-muted: var(--cf-ink-300); --border-on-dark: rgba(255,255,255,0.10); --focus-ring: var(--cf-pink-400); } :root { --cf-font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif; --cf-font-script: 'Permanent Marker', 'Comic Sans MS', cursive; --cf-font-body: 'Montserrat', system-ui, -apple-system, sans-serif; --cf-font-eyebrow: 'Montserrat', system-ui, sans-serif; --cf-w-regular: 400; --cf-w-medium: 500; --cf-w-semibold: 600; --cf-w-bold: 700; --cf-w-black: 800; --cf-text-display-xl: clamp(3rem, 7vw, 5.5rem); --cf-text-display-lg: clamp(2.25rem, 5vw, 3.75rem); --cf-text-display-md: clamp(1.75rem, 3.6vw, 2.75rem); --cf-text-display-sm: clamp(1.375rem, 2.6vw, 2rem); --cf-text-2xl: 1.5rem; --cf-text-xl: 1.25rem; --cf-text-lg: 1.125rem; --cf-text-md: 1rem; --cf-text-sm: 0.875rem; --cf-text-xs: 0.75rem; --cf-lh-display: 1.04; --cf-lh-tight: 1.15; --cf-lh-snug: 1.35; --cf-lh-body: 1.6; --cf-tracking-display: -0.02em; --cf-tracking-normal: 0; --cf-tracking-eyebrow: 0.22em; --cf-tracking-wide: 0.06em; --font-display: var(--cf-font-display); --font-body: var(--cf-font-body); --font-eyebrow: var(--cf-font-eyebrow); --font-script: var(--cf-font-script); } :root { --cf-space-0: 0; --cf-space-1: 4px; --cf-space-2: 8px; --cf-space-3: 12px; --cf-space-4: 16px; --cf-space-5: 20px; --cf-space-6: 24px; --cf-space-8: 32px; --cf-space-10: 40px; --cf-space-12: 48px; --cf-space-16: 64px; --cf-space-20: 80px; --cf-space-24: 96px; --cf-space-26: 104px; --cf-static-pad: 96px; --cf-static-pad-lg: 104px; --cf-container: 1200px; --cf-container-narrow: 780px; --cf-gutter: 24px; --cf-hero-gap: clamp(24px, 4vw, 64px); --space-section: var(--cf-space-20); --space-block: var(--cf-space-10); --space-inline: var(--cf-space-4); } :root { --cf-radius-xs: 6px; --cf-radius-sm: 10px; --cf-radius-md: 16px; --cf-radius-lg: 24px; --cf-radius-xl: 32px; --cf-radius-pill: 999px; --cf-shadow-sm: 0 1px 2px rgba(26,7,51,0.06), 0 2px 6px rgba(26,7,51,0.05); --cf-shadow-md: 0 6px 18px rgba(42,14,82,0.10), 0 2px 6px rgba(42,14,82,0.06); --cf-shadow-lg: 0 18px 48px rgba(42,14,82,0.16), 0 6px 16px rgba(42,14,82,0.08); --cf-glow-pink: 0 10px 30px rgba(233,46,150,0.35); --cf-glow-purple: 0 10px 30px rgba(90,30,150,0.35); --cf-border-hair: 1px solid var(--cf-ink-200); --cf-border-on-dark: 1px solid rgba(255,255,255,0.10); --cf-border-accent: 1.5px solid var(--cf-pink-500); --cf-ease: cubic-bezier(0.22, 1, 0.36, 1); --cf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --cf-dur-fast: 140ms; --cf-dur: 220ms; --cf-dur-slow: 420ms; --cf-press-scale: 0.97; --cf-hover-lift: -2px; --cf-fade-bottom: linear-gradient(180deg, transparent 0%, rgba(11,10,15,0.7) 62%, #0B0A0F 100%); --cf-fade-photo: linear-gradient(180deg, #000 62%, transparent 100%); --cf-scrim: linear-gradient(90deg, rgba(11,10,15,0.85) 0%, rgba(11,10,15,0.35) 60%, transparent 100%); --radius-card: var(--cf-radius-md); --radius-pill: var(--cf-radius-pill); --shadow-card: var(--cf-shadow-md); --shadow-card-hover: var(--cf-shadow-lg); } body { font-family: var(--cf-font-body); color: var(--cf-ink-700); background: var(--cf-paper); font-size: var(--cf-text-md); line-height: var(--cf-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } h1, h2, h3, h4 { font-family: var(--cf-font-display); color: var(--cf-ink-900); line-height: var(--cf-lh-tight); letter-spacing: var(--cf-tracking-display); font-weight: 800; text-wrap: balance; margin: 0px; } p { text-wrap: pretty; } a { color: var(--cf-pink-600); text-decoration: none; transition: color var(--cf-dur) var(--cf-ease); } a:hover { color: var(--cf-pink-400); } .cf-on-dark a { color: var(--cf-pink-400); } .cf-on-dark a:hover { color: var(--cf-pink-300); } ::selection { background: var(--cf-pink-400); color: rgb(255, 255, 255); } :focus-visible { outline: 2px solid var(--cf-pink-400); outline-offset: 2px; border-radius: 4px; } .cf-eyebrow { font-family: var(--cf-font-eyebrow); text-transform: uppercase; letter-spacing: var(--cf-tracking-eyebrow); font-weight: var(--cf-w-semibold); font-size: var(--cf-text-sm); } .cf-script { font-family: var(--cf-font-script); color: var(--cf-pink-500); font-weight: 400; letter-spacing: 0.01em; line-height: 1.05; transform: rotate(-3deg); display: inline-block; } .cf-gradient-text { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; color: transparent; } .cf-btn { --_bg: var(--cf-purple-600); --_fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; font-family: var(--cf-font-body); font-weight: 700; letter-spacing: 0.01em; line-height: 1; text-decoration: none; border: 0px; cursor: pointer; border-radius: var(--cf-radius-pill); white-space: nowrap; transition: transform var(--cf-dur-fast) var(--cf-ease),box-shadow var(--cf-dur) var(--cf-ease),filter var(--cf-dur) var(--cf-ease),background var(--cf-dur) var(--cf-ease); background: var(--_bg); color: var(--_fg); } .cf-btn:hover { transform: translateY(-2px); } .cf-btn:active { transform: scale(0.97); } .cf-btn:focus-visible { outline: 2px solid var(--cf-pink-400); outline-offset: 3px; } .cf-btn[disabled] { opacity: 0.45; pointer-events: none; } .cf-btn--sm { font-size: 13px; padding: 10px 18px; } .cf-btn--md { font-size: 15px; padding: 14px 26px; } .cf-btn--lg { font-size: 17px; padding: 18px 34px; } .cf-btn--block { display: flex; width: 100%; } .cf-btn--primary { background: var(--cf-gradient-brand); box-shadow: var(--cf-glow-pink); } .cf-btn--primary:hover { box-shadow: rgba(233, 46, 150, 0.45) 0px 16px 40px; } .cf-btn--purple { background: var(--cf-purple-600); } .cf-btn--purple:hover { background: var(--cf-purple-700); } .cf-btn--pink { background: var(--cf-pink-500); } .cf-btn--pink:hover { background: var(--cf-pink-600); } .cf-btn--outline { background: transparent; color: var(--cf-purple-700); box-shadow: inset 0 0 0 1.5px var(--cf-purple-300); } .cf-btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--cf-purple-600); background: var(--cf-purple-100); } .cf-btn--ghost { background: transparent; color: var(--cf-purple-700); } .cf-btn--ghost:hover { background: var(--cf-purple-100); } .cf-btn--on-dark.cf-btn--outline { color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 0px 1.5px inset; } .cf-btn--on-dark.cf-btn--outline:hover { background: rgba(255, 255, 255, 0.08); box-shadow: rgb(255, 255, 255) 0px 0px 0px 1.5px inset; } .cf-btn--on-dark.cf-btn--ghost { color: rgb(255, 255, 255); } .cf-btn--on-dark.cf-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); } /* Camada fina POR CIMA do design system (assets/css/ds.css). O ds.css é o CSS exato do standalone; aqui só fica o que ele não traz: as fontes self-hosted (removidas de lá por virem em data-URI de 7MB), a floating label (era animada pelo React, que já não corre) e os estados de erro/aviso do formulário. */ /* ============================ Fontes ============================ */ @font-face { font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/archivo-700.woff2') format('woff2'); } @font-face { font-family:'Archivo'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/archivo-800.woff2') format('woff2'); } @font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/montserrat-400.woff2') format('woff2'); } @font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/montserrat-600.woff2') format('woff2'); } @font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/montserrat-700.woff2') format('woff2'); } @font-face { font-family:'Permanent Marker'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/permanent-marker-400.woff2') format('woff2'); } /* ============================ Base ============================ */ body { margin:0; background:var(--cf-black,#0B0A0F); } img { max-width:100%; } :focus-visible { outline:3px solid var(--cf-pink-400,#F84FB2); outline-offset:2px; border-radius:4px; } /* ============ Floating label (o React fazia-o; agora é CSS) ============ Os inputs levam placeholder=" ", por isso :placeholder-shown diz-nos se estão vazios. O é irmão anterior do input, daí o :has(). */ /* [placeholder] é essencial: sem isso, :not(:placeholder-shown) casa também com checkboxes e selects (que nunca "mostram placeholder") e pintava o consentimento */ #leadForm label:has(> input[placeholder]:focus) > span, #leadForm label:has(> input[placeholder]:not(:placeholder-shown)) > span, #leadForm div:has(> input[placeholder]:focus) > span, #leadForm div:has(> input[placeholder]:not(:placeholder-shown)) > span { top:7px !important; font-size:11px !important; font-weight:700 !important; letter-spacing:0.04em !important; color:var(--cf-pink-300,#FB86CD) !important; } /* ============================ Erros ============================ */ /* os estilos do design são inline, por isso o override precisa de !important */ #leadForm [data-field].field--error input:not([type="checkbox"]), #leadForm [data-field].field--error select { border-color:var(--cf-danger,#E5484D) !important; box-shadow:0 0 0 3px rgba(229,72,77,0.18) !important; } .field__err { display:none; margin:6px 2px 0; font-family:var(--cf-font-body,'Montserrat',system-ui,sans-serif); font-size:12px; font-weight:600; color:var(--cf-danger,#E5484D); } [data-field].field--error .field__err { display:block; } /* aviso suave de país (lp-forms camada 2) — avisa, nunca bloqueia */ .field__warn { display:none; margin:6px 2px 0; font-family:var(--cf-font-body,'Montserrat',system-ui,sans-serif); font-size:12px; font-weight:600; color:var(--cf-warn,#FFB020); } .field__warn.is-on { display:block; } @media (prefers-reduced-motion:reduce) { * { animation-duration:0.001ms !important; transition-duration:0.001ms !important; } } /* ============ Checkbox: estado marcado ============ O React desenhava o gradiente + visto ao marcar; sem ele o clique não tinha feedback visual. Valores copiados do estado real do standalone. */ #leadForm input[type="checkbox"] + [data-check] { display:grid; place-items:center; transition:background var(--cf-dur,220ms) var(--cf-ease,ease), border-color var(--cf-dur,220ms) var(--cf-ease,ease); } #leadForm input[type="checkbox"] + [data-check] svg { opacity:0; transform:scale(0.6); transition:opacity 140ms, transform 140ms; } #leadForm input[type="checkbox"]:checked + [data-check] { background:var(--cf-gradient-brand,linear-gradient(120deg,#C42A8D 0%,#F84FB2 100%)) !important; border-color:var(--cf-pink-500,#E92E96) !important; } #leadForm input[type="checkbox"]:checked + [data-check] svg { opacity:1; transform:scale(1); } #leadForm input[type="checkbox"]:focus-visible + [data-check] { outline:3px solid var(--cf-pink-400,#F84FB2); outline-offset:2px; } /* ============ Popup do