:root { --black: #000; --white: #fff; --page: #f6f6f6; --soft: #f3f3f3; --line: #e5e5e5; --line-strong: #cbcbcb; --ink: #000; --ink-2: #4b4b4b; --ink-3: #636363; --ink-inv: #c9c9c9; --ink-inv-2: #a8a8a8; --green: #12a150; --green-ink: #0b6b35; --green-soft: #e6f6ec; --danger: #dc2626; --danger-soft: #fef2f2; --whatsapp: #25d366; --wa-bubble: #dcf8c6; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fs-hero: clamp(28px, 8vw, 72px); --fs-title: clamp(24px, 7vw, 56px); --fs-h3: clamp(20px, 2.4vw, 28px); --fs-lead: 18px; --fs-body: 16px; --fs-small: 14px; --fs-tiny: 12px; --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-pill: 999px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, .16); --shadow-md: 0 4px 16px rgba(0, 0, 0, .16); --shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06); --btn-overlay: inset 999px 999px 0 rgba(255, 255, 255, .14); --container: 1200px; --gutter: 24px; --section-y: 100px; --header-h: 64px; --t: .2s ease; --ease-out: cubic-bezier(.2, .7, .2, 1); --reveal-d: .7s; } @media (max-width: 767px) { :root { --gutter: 16px; --section-y: 72px; --fs-lead: 17px; } } @font-face { font-family: 'Inter'; src: url('/fonts/inter-var-latin.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; overflow-x: clip; } [hidden] { display: none !important; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; } p { text-wrap: pretty; } .section-sub, .hero-sub, .card-text, .contact-way-text, .stat-label { text-wrap: balance; } :focus-visible { outline: 2px solid var(--black); outline-offset: 3px; border-radius: var(--r-sm); } [id] { scroll-margin-top: calc(var(--header-h) + 16px); } [data-reveal] [id], [data-reveal][id] { scroll-margin-top: calc(var(--header-h) + 40px); } .icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .icon--f { fill: currentColor; stroke: none; } .icon--c { fill: initial; stroke: none; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .skip-link { position: absolute; left: 16px; top: -48px; z-index: 2000; padding: 10px 16px; border-radius: var(--r-pill); background: var(--black); color: var(--white); font-weight: 600; font-size: var(--fs-small); transition: top var(--t); } .skip-link:focus { top: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--white { background: var(--white); } .section--black { background: var(--black); color: var(--white); } .section--tight { padding-block: calc(var(--section-y) * .6); } .section-head { max-width: 760px; margin-bottom: 56px; } .section-head--center { margin-inline: auto; text-align: center; } .section-title { font-size: var(--fs-title); font-weight: 600; line-height: 1.1; } .section-sub { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-2); } .section--black .section-sub { color: var(--ink-inv); } .grid { display: grid; gap: 24px; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1023px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 699px) { .grid { gap: 16px; } .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); } .section-head { margin-bottom: 40px; } } @media (prefers-reduced-motion: no-preference) { .js [data-reveal]:not([data-reveal="stagger"]):not(.hero *), .js [data-reveal="stagger"] > * { opacity: 0; transform: translateY(24px); transition: opacity var(--reveal-d) var(--ease-out), transform var(--reveal-d) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); } .js [data-reveal].is-in:not([data-reveal="stagger"]), .js [data-reveal="stagger"].is-in > * { opacity: 1; transform: none; } .hero [data-reveal]:not([data-reveal="pop"]) { animation: hero-in .7s var(--ease-out) both; } .hero .hero-title[data-reveal], .hero .hero-sub[data-reveal] { animation-name: hero-rise; } .hero .hero-sub { animation-delay: .08s; } .hero .btn-row { animation-delay: .16s; } .hero .hero-points, .hero .hero-trust { animation-delay: .12s; } } @keyframes hero-in { from { opacity: 0; transform: translateY(16px); } } @keyframes hero-rise { from { transform: translateY(16px); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 28px; border: 1.5px solid transparent; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; transition: box-shadow var(--t), border-color var(--t), background var(--t); } .btn .icon { width: 18px; height: 18px; } .btn--primary { background: var(--black); color: var(--white); } .btn--primary:hover { box-shadow: var(--btn-overlay); } .btn--ghost { background: var(--white); border-color: var(--line-strong); } .btn--ghost:hover { background: var(--page); border-color: var(--ink-2); } .btn--sm { min-height: 40px; padding: 10px 20px; font-size: 13px; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .btn-row--center { justify-content: center; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .link-arrow .icon { width: 16px; height: 16px; } .link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; } .card-more { margin-top: 14px; font-size: var(--fs-small); } .card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s; } .card--lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; } .card-body { padding: 24px; } .card-title { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; } .card-text { margin-top: 8px; color: var(--ink-2); font-size: 15px; } .card-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: var(--r-md); background: var(--black); color: var(--white); } @media (prefers-reduced-motion: no-preference) { .js [data-reveal="pop"] > * { opacity: 0; transform: scale(.8); transition: opacity .4s var(--ease-out), transform .5s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--i, 0) * 70ms); } .js [data-reveal="pop"].is-in > * { opacity: 1; transform: none; } } .hero { position: relative; padding-block: clamp(64px, 10vw, 120px) clamp(48px, 7vw, 88px); background: var(--white); text-align: center; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, var(--line-strong) 1px, transparent 1px) 0 0 / 24px 24px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 35%, #000 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 35%, #000 100%); pointer-events: none; } .hero > .container { position: relative; } .hero-title { max-width: 1080px; margin-inline: auto; font-size: var(--fs-hero); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; } @media (max-width: 767px) { .hero::before { -webkit-mask-image: linear-gradient(#000, transparent 90px, transparent calc(100% - 90px), #000); mask-image: linear-gradient(#000, transparent 90px, transparent calc(100% - 90px), #000); } } .hero-sub { max-width: 680px; margin: 24px auto 36px; font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-2); } .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .stat { padding: 8px 24px; text-align: center; border-left: 1px solid rgba(255, 255, 255, .16); } .stat:first-child { border-left: 0; } .stat-n { font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat-label { margin-top: 6px; font-size: var(--fs-small); color: var(--ink-inv); } @media (max-width: 767px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } .stat:nth-child(odd) { border-left: 0; } } .window { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-md); overflow: hidden; } .window-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding-inline: 14px; border-bottom: 1px solid var(--line); background: var(--page); } .window-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); } .window-url { flex: 1; max-width: 520px; margin-inline: auto; padding: 3px 12px; border-radius: var(--r-pill); background: var(--white); font-size: var(--fs-tiny); color: var(--ink-3); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .window img { width: 100%; } .count { display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 599px) { .btn-row--duo { flex-direction: column-reverse; align-items: stretch; } .btn-row--duo .btn { width: 100%; justify-content: center; } } .btn--wa .icon { width: 18px; height: 18px; color: var(--whatsapp); } .dialog-title { padding-right: 40px; font-size: 24px; } .dialog-text { margin-top: 8px; font-size: 15px; } .dialog-text { color: var(--ink-2); } .dialog-badge { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); } .field { display: grid; gap: 6px; } .field-label { font-size: var(--fs-small); font-weight: 600; } .field-input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--white); transition: box-shadow var(--t); } .field-input::placeholder { color: var(--ink-3); opacity: 1; } .field-input:focus-visible { outline: 0; border-color: var(--black); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--black), 0 0 0 4px var(--line); } .field-input[aria-invalid="true"] { outline: 0; border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); } .field-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 1px var(--danger), 0 0 0 4px var(--danger-soft); } .field:has([aria-invalid="true"]) > .field-label { color: var(--danger); } .field-trap { position: absolute; left: -9999px; } .cf-turnstile.is-shown { position: relative; margin-top: 16px; border-radius: var(--r-md); overflow: hidden; } .cf-turnstile.is-shown { line-height: 0; font-size: 0; } .cf-turnstile.is-shown::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--line-strong); border-radius: inherit; pointer-events: none; } .field-opt { font-weight: 400; color: var(--ink-3); } .field-error { padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--soft); color: var(--ink); font-size: var(--fs-small); } .field-error:empty { display: none; } .field-input--area { height: auto; min-height: 112px; padding-block: 12px; resize: vertical; line-height: 1.5; } .contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); gap: 28px; align-items: start; } .contact-form-card { padding: 28px 28px 22px; } .contact-form .field-error:not(:empty) { margin-bottom: 8px; } .contact-form-title { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; } .contact-fields .field--full { grid-column: 1 / -1; } .contact-fields .field-input--area { min-height: 112px; } .contact-form-text { margin-top: 6px; font-size: 15px; color: var(--ink-2); } .contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 18px; } .contact-form .field-error { margin-top: 16px; } .contact-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .contact-privacy { font-size: 13px; line-height: 1.45; color: var(--ink-3); max-width: 420px; } .contact-privacy a { color: var(--ink-2); text-decoration: underline; } .contact-form-foot .btn { min-width: 160px; justify-content: center; flex: none; } .contact-done { padding: 24px 8px; text-align: center; } .contact-done .dialog-badge { margin: 0 auto 16px; } .contact-done .dialog-title { padding: 0; margin-bottom: 8px; } .contact-side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 4px; padding: 8px; } .contact-way { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 14px 16px 14px 14px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; transition: background var(--t); } .contact-way + .contact-way { position: relative; } .contact-way + .contact-way::before { content: ''; position: absolute; top: -2px; left: 68px; right: 16px; border-top: 1px solid var(--line); } .contact-way:hover, .contact-way:focus-visible { background: var(--soft); outline: 0; } .contact-way:hover::before, .contact-way:hover + .contact-way::before { opacity: 0; } .contact-way .card-icon { width: 40px; height: 40px; margin: 0; } .contact-way .card-icon svg { width: 18px; height: 18px; } .contact-way-body { display: grid; gap: 2px; min-width: 0; } .contact-way-title { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere; } .contact-way-text { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); } .contact-way-go { display: grid; place-items: center; color: var(--ink-3); transition: transform var(--t), color var(--t); } .contact-way-go svg { width: 18px; height: 18px; } .contact-way:hover .contact-way-go { color: var(--ink); transform: translateX(2px); } .site-header { position: sticky; top: 0; z-index: 1000; height: var(--header-h); background: var(--white); box-shadow: 0 1px 8px rgba(0, 0, 0, .06); } .site-header-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; height: 100%; } .site-header-actions { display: flex; align-items: center; gap: 8px; } .site-nav-list { display: flex; align-items: center; gap: 4px; } .site-nav-link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; border-radius: var(--r-md); font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color var(--t), background var(--t); } .site-nav-link:hover { color: var(--ink); background: var(--page); } .site-nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; } .site-burger { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; } .site-burger .icon { width: 20px; height: 20px; } .site-burger .icon:last-child, .site-burger[aria-expanded="true"] .icon:first-child { display: none; } .site-burger[aria-expanded="true"] .icon:last-child { display: block; } @media (max-width: 899px) { .site-header-inner { grid-template-columns: minmax(0, 1fr) auto; } .site-burger { display: grid; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; padding: 8px var(--gutter) 14px; border-top: 1px solid var(--line); background: var(--white); box-shadow: 0 12px 24px rgba(0, 0, 0, .08); } .site-nav.is-open { display: block; } .site-nav-list { flex-direction: column; align-items: stretch; gap: 0; } .site-nav-link { width: 100%; min-height: 48px; padding-inline: 0; border-radius: 0; font-size: 17px; font-weight: 600; color: var(--ink); } .site-nav-link:hover { background: none; } } .site-logo { justify-self: start; display: flex; align-items: center; height: 44px; } .site-header-cta { min-height: 44px; padding-inline: 18px; font-size: 14px; white-space: nowrap; } .page-header--home { position: relative; } .page-header--home { background: transparent; box-shadow: none; } .site-footer { padding-block: 72px 32px; background: var(--black); color: var(--white); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: var(--fs-tiny); color: var(--ink-inv); } .site-footer :focus-visible { outline-color: var(--white); } .foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; } .foot-links a, .foot-btn { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--ink-3); transition: color var(--t); } .foot-btn { padding: 0; font: inherit; font-size: 13px; cursor: pointer; } .foot-links a:hover, .foot-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .site-footer .foot-links a, .site-footer .foot-btn { color: var(--ink-inv); } .site-footer .foot-links a:hover, .site-footer .foot-btn:hover { color: var(--white); } .mini-footer { padding-block: 6px; border-top: 1px solid var(--line); background: var(--white); } .mini-footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "legal links lang"; align-items: center; gap: 0 24px; } .mini-footer-legal { grid-area: legal; padding-block: 12px; font-size: 13px; color: var(--ink-3); } .mini-footer .foot-links { grid-area: links; } .mini-footer-lang { grid-area: lang; display: flex; gap: 16px; } .mini-footer-lang a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; color: var(--ink-3); transition: color var(--t); } .mini-footer-lang a:hover { color: var(--ink); } .mini-footer-lang .icon { width: 15px; height: 15px; } @media (max-width: 1023px) { .mini-footer { padding-block: 4px 8px; } .mini-footer-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "legal lang" "links links"; column-gap: 16px; } .mini-footer-legal { padding-block: 8px; } .mini-footer-lang a { min-height: 36px; } .mini-footer .foot-links { gap: 0 18px; margin-top: -6px; } .mini-footer .foot-links a, .mini-footer .foot-btn { min-height: 36px; } } .consent { position: fixed; z-index: 950; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px 20px; width: max-content; max-width: calc(100% - 32px); padding: 10px 10px 10px 20px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); } .consent[hidden] { display: none; } @media (min-width: 1024px) { .consent { left: auto; right: 24px; bottom: 24px; transform: none; max-width: 560px; padding: 14px 14px 14px 22px; border-radius: var(--r-lg); } } .consent-text { font-size: 14px; line-height: 1.4; color: var(--ink-2); } .consent-text a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .consent-actions { display: flex; flex: none; gap: 8px; } .consent-btn { min-width: 92px; min-height: 44px; padding: 8px 18px; background: var(--black); color: var(--white); font-size: 14px; } .consent-btn:hover { box-shadow: var(--btn-overlay); } .consent :focus-visible { outline: 2px solid var(--black); outline-offset: 2px; } @media (max-width: 767px) { .consent { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); transform: none; width: auto; max-width: none; gap: 10px; padding: 10px 10px 10px 14px; border-radius: var(--r-lg); } .consent-text { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.35; } .consent-actions { gap: 6px; } .consent-btn { min-width: 0; min-height: 44px; padding: 8px 14px; font-size: 13px; } } @media (max-width: 399px) { .consent { gap: 8px; padding-left: 12px; } .consent-btn { padding-inline: 12px; } } @media print { .consent { display: none; } } .hero-title--page { max-width: 900px; font-size: clamp(28px, 6vw, 60px); } .faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; } .faq-head { position: sticky; top: calc(var(--header-h) + 32px); } .faq-head .section-title { font-size: clamp(24px, 4vw, 44px); } .faq-aside { margin-top: 28px; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--ink-2); } .faq-icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--page); transition: background var(--t), transform .3s var(--ease-out); } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 10px; top: 15px; width: 12px; height: 2px; border-radius: 2px; background: var(--black); transition: transform .3s var(--ease-out), background var(--t); } .faq-icon::after { transform: rotate(90deg); } .faq-item[open] .faq-icon { background: var(--black); transform: rotate(180deg); } .faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: var(--white); } .faq-item[open] .faq-icon::after { transform: rotate(0); } .faq-answer { padding: 0 56px 24px 0; color: var(--ink-2); } .faq-answer a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } } @media (prefers-reduced-motion: no-preference) { .faq-item[open] .faq-answer { animation: faq-in .35s var(--ease-out); } } @media (max-width: 1023px) { .faq { grid-template-columns: minmax(0, 1fr); gap: 32px; } .faq-head { position: static; } .faq-answer { padding-right: 0; } } @media (max-width: 599px) { .faq-head .section-title { font-size: 30px; } .section-title { font-size: 32px; } } .df-card { container-type: inline-size; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-card); } .df { display: grid; gap: 18px; } .df-title { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; } .df-text { margin-top: -10px; font-size: 16px; line-height: 1.5; color: var(--ink-2); } .df-fields { display: grid; gap: 16px; align-items: start; } @container (min-width: 440px) { .df-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; } } .df-field { gap: 6px; } .df .field-label { font-size: 15px; } .df .field-input { min-height: 52px; font-size: 16px; } .df-help { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--ink-2); } .df-help .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--whatsapp); } .df-err { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--danger); } .df-err:empty { display: none; } .df-field:has([aria-invalid="true"]) .df-help { display: none; } .df .field-error:empty { display: none; } .df > .cf-turnstile:not(.is-shown) { display: none; } .df-submit { position: relative; } .df-spin { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--white); border-radius: 50%; animation: df-spin .8s linear infinite; } .df-submit.is-busy .df-spin { display: inline-block; } .df-submit[disabled] { cursor: progress; opacity: 1; } @keyframes df-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .df-spin { animation-duration: 2.4s; } } .df-privacy { max-width: none; text-align: center; } .df-done { display: grid; justify-items: center; gap: 14px; padding: 8px 0 4px; text-align: center; } .df-done .dialog-badge { margin: 0; } .df-done .df-title:focus { outline: 0; } .df-done-text { max-width: 400px; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: balance; } .df-done .btn { width: 100%; max-width: 400px; } .df-done-note { max-width: 400px; font-size: 14px; line-height: 1.45; color: var(--ink-3); text-wrap: balance; } @media (max-width: 599px) { .df-card { padding: 22px 16px; } .df-title { font-size: 22px; } } .site-logo { display: inline-flex; align-items: center; gap: 8px; height: 44px; } .logo-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--black); } .logo-mark svg { width: 16px; height: 16px; fill: var(--white); } .logo-word { font-size: 21px; font-weight: 800; letter-spacing: -.045em; line-height: 1; } .site-logo--inv .logo-mark { background: var(--white); } .site-logo--inv .logo-mark svg { fill: var(--black); } .site-logo--inv .logo-word { color: var(--white); } .btn--wa { background: var(--black); color: var(--white); } .btn--wa:hover { box-shadow: var(--btn-overlay); } .btn--wa .icon, .btn--wa-ghost .icon { width: 20px; height: 20px; color: var(--whatsapp); } .btn--sm.btn--wa .icon { width: 16px; height: 16px; } .card-icon--wa { background: var(--whatsapp); } .is-home { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; background: var(--white); } .is-home main { flex: 1 0 auto; display: flex; } .is-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; } .is-page main { flex: 1 0 auto; display: flex; flex-direction: column; } .is-page main > section:last-child { flex: 1 0 auto; } .home { flex: 1; display: flex; align-items: center; padding-block: clamp(32px, 7vh, 96px); text-align: left; } .home::before { -webkit-mask-image: radial-gradient(ellipse 80% 80% at 85% 50%, #000 0, transparent 70%); mask-image: radial-gradient(ellipse 80% 80% at 85% 50%, #000 0, transparent 70%); } .home-inner { width: 100%; } .home-title { max-width: 14ch; font-size: clamp(48px, 9.2vw, 132px); font-weight: 800; line-height: .98; letter-spacing: -.055em; text-wrap: balance; } .home-sub { max-width: 34ch; margin-top: clamp(20px, 3vh, 32px); font-size: clamp(19px, 2vw, 26px); line-height: 1.4; letter-spacing: -.015em; color: var(--ink-2); } .home-sub span { display: inline-block; } .home-ways { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 5vh, 48px); } .home-btn { min-height: 56px; padding-inline: 26px; font-size: 16px; } .home-btn .icon { width: 20px; height: 20px; } .home-btn.btn--ghost .icon { color: var(--ink); } @media (min-width: 1024px) { .is-home .consent { bottom: 72px; } } @media (min-width: 768px) and (max-width: 1023px) { .is-home .consent { bottom: 96px; } } @media (min-width: 600px) and (max-width: 1023px) { .home-ways { gap: 10px; } .home-btn { padding-inline: 20px; font-size: 15px; } } @media (max-width: 599px) { .home { padding-block: 24px 40px; } .home::before { -webkit-mask-image: linear-gradient(transparent 62%, #000); mask-image: linear-gradient(transparent 62%, #000); } .home-title { font-size: clamp(40px, 15.5vw, 84px); line-height: .96; } .home-sub { font-size: 20px; } .home-ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .home-btn { width: 100%; } } .contact-done-cta { margin-top: 20px; } @media (max-width: 899px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } .contact-side { position: static; } } @media (max-width: 599px) { .contact-form-card { padding: 22px 16px 18px; } .contact-fields { grid-template-columns: minmax(0, 1fr); } .contact-form-foot { flex-direction: column; align-items: stretch; } .contact-form-foot .btn { width: 100%; } } .btn[disabled] { opacity: .6; cursor: default; } .prose-page { padding-block: clamp(40px, 6vw, 80px); } .prose { max-width: 800px; } .prose-title { font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; } .prose .prose-meta { margin-top: 14px; font-size: var(--fs-small); color: var(--ink-3); } .prose .prose-lead { margin-top: 24px; font-size: 17px; line-height: 1.65; color: var(--ink-2); } .prose h2 { margin: 40px 0 10px; font-size: 21px; font-weight: 650; line-height: 1.3; letter-spacing: -.02em; scroll-margin-top: 24px; } .prose p { margin-top: 10px; line-height: 1.7; color: var(--ink-2); } .prose h2 + p { margin-top: 0; } .prose a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; } .prose-list { display: grid; gap: 8px; margin-top: 12px; } .prose-list li { position: relative; padding-left: 20px; line-height: 1.65; color: var(--ink-2); } .prose-list li::before { content: ''; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--black); } .prose-table-wrap { margin-top: 14px; } .prose-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; } .prose-table th { padding: 10px 12px; border-bottom: 1px solid var(--black); font-size: 13px; font-weight: 600; text-align: left; color: var(--ink); } .prose-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); } .prose-table td:first-child { min-width: 8.5em; font-weight: 600; color: var(--ink); } .prose-table th:first-child, .prose-table td:first-child { padding-left: 0; } .prose-cta { margin-top: 36px; } @media (max-width: 767px) { .prose-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .prose-table, .prose-table tbody, .prose-table tr, .prose-table td { display: block; width: 100%; } .prose-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); } .prose-table td { padding: 2px 0; border: 0; } .prose-table td:not(:first-child)::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink); } .prose-table td:first-child { margin-bottom: 4px; font-size: 16px; } } .contact-page { padding-top: clamp(28px, 4vw, 56px); } .demo-page { padding-top: clamp(32px, 4.5vw, 56px); } .demo-grid { display: grid; gap: 28px; max-width: 760px; } .demo-head { text-align: center; } .demo-title { font-size: clamp(30px, 4.2vw, 46px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; } .demo-sub { max-width: 560px; margin: 12px auto 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); text-wrap: balance; } .demo-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); } .demo-points li { display: inline-flex; align-items: center; gap: 6px; } .demo-points .icon { width: 16px; height: 16px; color: var(--green); stroke-width: 2.5; } .demo-wa { text-align: center; } .demo-wa a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .demo-wa .icon { width: 20px; height: 20px; color: var(--whatsapp); }