@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/google-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/google-sans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Design tokens */
:root {
/* Brand */
--color-brand-red: #e4002b;
--color-brand-blue: #1f87ed;
--color-brand-blue-dark-ct: #0c6ecf; /* único azul-escuro AA */
--color-brand-blue-light: #f2f9ff;
--color-brand-green: #25d366; /* verde WhatsApp */
--color-success: #2e9e2e; /* estados de sucesso */
--color-success-soft: #e3f5e3; /* fundo verde claro */
--color-instruction: var(--color-brand-blue-dark-ct); /* alias → azul-escuro único */
/* Surface */
--color-bg: #ffffff; /* página — branco puro */
--color-surface: #ffffff; /* superfície branca */
--color-surface-soft: #fbfbfb; /* painel de seção */
--color-surface-transparent: rgba(251, 251, 251, 0.4);
--color-track: #f0f0f0; /* trilho do toggle de planos */
/* Text */
--color-text: #1d1d1f;
--color-text-soft: var(--color-text); /* alias semântico p/ títulos */
--color-text-subtle: rgba(29, 29, 31, 0.75);
--color-text-muted: #4d4d4d;
--color-on-brand: #fff; /* texto/ícone branco sobre fundo de marca/escuro */
/* Contraste (ct) — valores p/ WCAG AA */
--ct-disabled: #767676; /* texto/ícone "não incluído" */
--ct-placeholder: #6b6b6b; /* placeholder do input */
--ct-ghost-red-bg: #fef5f7; /* fundo opaco sutil do .ghost-btn--red */
--ct-ghost-red-bg-hover: #fdedf0; /* idem, hover */
/* Lines */
--color-divider: rgb(221 221 221 / 0.4);
--color-border: rgba(0, 0, 0, 0.2);
--color-border-soft: rgba(0, 0, 0, 0.05);
--color-border-subtle: rgba(0, 0, 0, 0.12);
--color-hover-tint: rgba(135, 135, 135, 0.1); /* preenchimento de hover (menubar) */
--color-pill-border: color-mix(in srgb, var(--color-instruction) 10%, transparent);
/* Spacing */
--space-2: 2px;
--space-4: 4px;
--space-6: 6px;
--space-8: 8px;
--space-12: 12px;
--space-16: 16px;
--space-24: 24px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-56: 56px;
--space-64: 64px;
/* Radius */
--radius-md: 8px;
--radius-lg: 12px;
--radius-16: 16px; /* degrau entre lg(12) e xl(24) */
--radius-xl: 24px;
--radius-pill: 400px;
/* Shadow */
--shadow-pill: 0 2px 12px -2px color-mix(in srgb, var(--color-instruction) 10%, transparent);
--shadow-lift: 0 2px 8px -2px rgba(0, 0, 0, 0.12); /* hover-lift de card */
--shadow-float: 0 16px 48px -16px rgba(0, 0, 0, 0.2); /* elevação alta */
--shadow-cta-rest: 0 2px 2px -1.5px rgba(0, 0, 0, 0.614); /* repouso do CTA vermelho */
/* Motion — durações + curvas reutilizáveis */
--dur-press: 0.06s; /* feedback de :active (snap) */
--dur-quick: 0.15s; /* hover de cor em links/texto */
--dur-hover: 0.18s; /* repouso→hover de botões */
--dur-base: 0.2s; /* micro-transição de cor/estado */
--dur-media: 0.5s; /* botão flutuante / carrossel */
--dur-slow: 0.9s; /* zoom de imagem no hover */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* entrada/snap canônico */
--ease-overshoot: cubic-bezier(0.16, 1, 0.3, 1); /* reveal on-scroll / success */
/* Typography — one family + one type scale */
--font: "Google Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--fs-display: 32px;
--fs-hero: 40px; /* hero headline — 32px on mobile */
--fs-title: 24px; /* card titles — 20px on mobile */
--fs-lg: 20px;
--fs-body: 16px;
--fs-sm: 14px;
--fs-xs: 12px;
--fs-pill: 10px; /* exclusivo da .btn-floating-pill — não reutilizar */
--lh-tight: 1.03;
--lh-snug: 1.1;
--lh-base: 1.3;
--lh-relaxed: 1.5;
--tracking-title: -0.03em; /* aperto proporcional */
--tracking-label: -0.02em;
--tracking-wide: 0.03em;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--content-max: 1120px;
--content-narrow: 736px; /* largura de leitura */
--content-wide: 1008px; /* grids/cards intermediários */
--content-gutter: 24px;
}
/* Breakpoints — catálogo: 320/520/600/850/900 max; 901/980 min; 1080/700/395 feature-bar */
/* Reset + base */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* reserve scrollbar gutter so scroll-lock doesn't shift the menubar */
scrollbar-gutter: stable;
scroll-behavior: smooth;
/* anchor offset so the fixed menubar doesn't cover section tops */
scroll-padding-top: 144px;
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font);
font-optical-sizing: auto; /* Google Sans tem eixo opsz */
font-size: var(--fs-body);
line-height: var(--lh-base);
font-feature-settings: "case" 1, "lnum" 1, "tnum" 1;
/* tabular lining figures everywhere — prevents digit jitter */
font-variant-numeric: tabular-nums lining-nums;
/* better line breaking, avoids orphans; inherited by all copy */
text-wrap: pretty;
}
/* Headings + short captions get `balance`; body stays `pretty` */
.panel-intro__title,
.trust-card__title,
.feature-card__title,
.fpanel__title,
.split-panel__title,
.payments-card__title,
.segments-card__title,
.features-wrapup__title,
.footer-contact__title,
.feature-card__subtitle,
.segments-card__subtitle,
.payments-card__subtitle,
.features-wrapup__subtitle {
text-wrap: balance;
}
img, svg {
display: block;
max-width: 100%;
height: auto;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }
p { margin: 0; }
/* Page shell — centered vertical stack */
.page {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-32);
width: 100%;
/* top padding clears the floating .menubar pill */
padding: 104px var(--content-gutter) 80px;
position: relative;
}
.page > section {
width: 100%;
max-width: var(--content-max);
}
/* Scroll reveal — gated on `.js`; content stays visible without JS */
.js .page > section:not(.hero),
.js .site-footer {
opacity: 0.35;
transform: translateY(32px);
transition: opacity 0.4s ease, transform 0.45s var(--ease-overshoot);
}
.js .page > section.is-visible,
.js .site-footer.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.js .page > section:not(.hero),
.js .site-footer {
opacity: 1;
transform: none;
transition: none;
}
}
.center-abs {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Pill / Eyebrow */
.pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
padding: var(--space-2) var(--space-12);
border-radius: var(--radius-xl);
background: var(--color-brand-blue-light);
border: 1px solid var(--color-pill-border);
box-shadow: var(--shadow-pill);
color: var(--color-brand-blue-dark-ct);
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-xs);
letter-spacing: var(--tracking-wide);
line-height: var(--lh-snug);
white-space: nowrap;
align-self: flex-start;
}
/* Floating "Sem compromisso" pill above the hero CTA */
.btn-wrap {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.btn-floating-pill {
position: absolute;
top: -4px;
right: 10px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-2) var(--space-6);
border-radius: var(--radius-xl);
background: var(--color-brand-blue-dark-ct);
color: var(--color-on-brand);
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-pill);
letter-spacing: var(--tracking-wide);
line-height: var(--lh-snug);
white-space: nowrap;
}
/* "Novidade" badge — solid blue pill, inline next to labels */
.badge-new {
display: inline-flex;
align-items: center;
justify-content: center;
margin-inline-start: var(--space-6);
padding: var(--space-2) var(--space-8);
border-radius: var(--radius-xl);
background: var(--color-brand-blue-dark-ct);
color: var(--color-on-brand);
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-xs);
letter-spacing: var(--tracking-wide);
line-height: var(--lh-snug);
white-space: nowrap;
text-decoration: none;
vertical-align: middle;
}
/* Disabled variant — "não incluído" gray */
.badge-new--off {
background: var(--ct-disabled);
}
/* Hero — flex column: [row: copy + image] then feature bar */
.hero {
display: flex;
flex-direction: column;
gap: var(--space-24);
align-items: stretch;
margin-top: var(--space-32);
}
.hero__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-24);
width: 100%;
}
.hero__copy {
flex: 0 0 384px;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-12);
/* stretch so children fill the column width */
align-items: stretch;
}
.hero__image {
flex: 0 1 640px;
aspect-ratio: 654 / 306;
overflow: hidden;
position: relative;
}
.hero__image img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 95.4%;
height: auto;
max-width: none;
object-fit: cover;
transition: transform var(--dur-slow) ease;
}
/* Hover zoom — scale on top of the centering translate */
.hero__image:hover img { transform: translate(-50%, -50%) scale(1.01); }
.hero__subtitle {
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-body);
line-height: var(--lh-base);
color: var(--color-text-subtle);
margin: 0;
}
.hero__subtitle strong { font-weight: var(--fw-bold); }
.hero__cta-wrap {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-16);
width: 100%;
position: relative;
}
/* Feature bar */
.feature-bar {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-24);
min-height: 40px;
width: 100%;
padding: var(--space-8);
border-radius: var(--radius-pill);
background: var(--color-surface-soft);
}
.feature-bar__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-sm);
letter-spacing: var(--tracking-wide);
color: var(--color-text);
line-height: var(--lh-snug);
white-space: nowrap;
}
.feature-bar__item img,
.feature-bar__item svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* Sobe 1px para assentar oticamente na faixa de texto */
.feature-bar__icon { transform: translateY(-1px); }
/* Ícone cpu reduz a 16px p/ assentar com os demais */
.feature-bar__item .feature-bar__icon--cpu { width: 16px; height: 16px; }
/* "Plataforma segura": aperta o rótulo via margem negativa */
.feature-bar__item--snug { gap: 0; }
.feature-bar__item--snug .feature-bar__icon { margin-inline-end: calc(-1 * var(--space-2)); }
/* Trust card — absolute layout, image protrudes right */
.trust-card {
position: relative;
width: 100%;
height: 313px;
border-radius: var(--radius-xl);
background: var(--color-surface-soft);
overflow: hidden;
}
.trust-card__copy {
position: absolute;
left: var(--space-32);
top: 50%;
transform: translateY(-50%);
width: 384px;
display: flex;
flex-direction: column;
gap: var(--space-16);
}
/* Testimonials marquee column — wide, room for zigzag swing */
.trust-card__media {
position: absolute;
top: 0;
right: var(--space-32);
bottom: 0;
width: 512px;
overflow: hidden;
}
.trust-card__track {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
width: 100%;
will-change: transform;
}
/* Standardized testimonial style — one rule for every screenshot */
.trust-card__shot {
display: block;
/* Fluid: up to 298px, scales down with zigzag clearance */
width: min(298px, calc(100% - 40px));
height: auto;
border-radius: var(--radius-16);
border: 1px solid var(--color-divider);
box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.12);
background: var(--color-surface);
}
/* Zigzag: alternate horizontal offset, continuous across the cloned track */
.trust-card__track > .trust-card__shot:nth-child(odd) { transform: translateX(-90px); }
.trust-card__track > .trust-card__shot:nth-child(even) { transform: translateX(90px); }
.trust-card__title {
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-title);
color: var(--color-text-soft);
margin: 0;
}
.trust-card__subtitle {
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-body);
line-height: var(--lh-base);
color: var(--color-text-subtle);
text-wrap: pretty;
}
.trust-card__chip-label {
display: block;
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-body);
letter-spacing: var(--tracking-label);
color: var(--color-text-subtle);
line-height: var(--lh-snug);
margin-bottom: var(--space-8);
}
.trust-card__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
}
/* Chip (reusable) */
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4);
border-radius: var(--radius-md);
background: var(--color-surface);
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-sm); /* 14; steps to 12 on mobile */
letter-spacing: var(--tracking-label);
color: var(--color-text);
line-height: var(--lh-snug);
transition: box-shadow var(--dur-base) ease, transform var(--dur-base) ease;
}
/*
.chip:hover {
box-shadow: var(--shadow-lift);
transform: translateY(-1px);
}
*/
.chip__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.chip__icon img { width: 16px; height: 16px; }
/* Chip promocional — tema da Copa (amarelo #FFCC01 sobre verde #00A132) */
.chip--copa {
/* Estrela de 5 pontas (SVG inline) reaproveitada nas 6 cópias */
--copa-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35' fill='%23FFCC01'/%3E%3C/svg%3E");
display: none; /* chip da Copa oculto — remover p/ reexibir */
position: relative;
overflow: hidden; /* recorta as estrelas no pill */
isolation: isolate; /* stacking local das estrelas */
background: #00A132;
color: var(--color-on-brand);
padding: var(--space-4) var(--space-12); /* respiro lateral, igual ao .pill */
}
/* 6 estrelas em duas camadas (::before/::after), 3 por camada */
.chip--copa::before,
.chip--copa::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-repeat: no-repeat;
background-image: var(--copa-star), var(--copa-star), var(--copa-star);
}
.chip--copa::before {
background-position: 16px 4px, 74px 16px, 126px 5px;
background-size: 7px, 5px, 6px;
/* cintila + deriva lenta, períodos distintos */
animation: copa-twinkle 3s ease-in-out infinite,
copa-drift-a 6s ease-in-out infinite;
}
.chip--copa::after {
background-position: 46px 17px, 100px 4px, 152px 15px;
background-size: 6px, 6px, 5px;
animation: copa-twinkle 4.5s ease-in-out -1.5s infinite,
copa-drift-b 7.5s ease-in-out -2s infinite;
}
@keyframes copa-twinkle {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
/* Deriva sutil: camadas flutuam em sentidos opostos */
@keyframes copa-drift-a {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(1.5px, -2px) rotate(1.5deg); }
}
@keyframes copa-drift-b {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
.chip--copa::before,
.chip--copa::after { animation: none; opacity: 0.9; }
}
.chip--copa .chip__icon { font-size: 13px; line-height: 1; }
/* Integrations carousel */
.integrations {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-8);
min-height: 128px;
padding: var(--space-32) 0;
border-radius: var(--radius-xl);
width: 100%;
overflow: hidden;
}
.integrations__label {
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-xs);
line-height: var(--lh-base);
color: var(--color-text-muted);
text-align: center;
}
.integrations__viewport {
width: 100%;
overflow: hidden;
}
/* On mobile the user scrolls the logos by hand */
@media (max-width: 850px) {
.integrations__viewport {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.integrations__viewport::-webkit-scrollbar { display: none; }
}
.integrations__track {
display: flex;
align-items: center;
width: max-content; /* don't shrink — lets the track translate */
will-change: transform;
}
/* Each logo cell — uniform height; divider is the left border */
.integrations__logo {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
height: 28px;
padding: 0 var(--space-24);
border-left: 1px solid var(--color-divider);
}
.integrations__logo img {
display: block;
max-width: none;
/* width from each ![]()
; height auto preserves aspect ratio */
}
/* Stats — row of 6 individual cards */
.stats {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: var(--space-32);
width: 100%;
}
.stats__item {
flex: 1 1 0;
min-width: 0;
height: 128px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-8);
padding: 0 var(--space-8);
background: var(--color-surface-soft);
border-radius: var(--radius-16);
font-family: var(--font);
color: var(--color-text);
text-align: center;
}
.stats__value {
font-weight: var(--fw-medium);
font-size: var(--fs-title);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-title);
white-space: nowrap;
font-variant-numeric: tabular-nums lining-nums;
}
.stats__label {
font-weight: var(--fw-medium);
font-size: var(--fs-xs);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-label);
}
/* Bot section — absolute layout, phones protrude below */
.bot-section {
position: relative;
width: 100%;
/* Height scales with width (1120×757 ratio) */
aspect-ratio: 1120 / 757;
border-bottom: 1px solid var(--color-divider);
overflow: hidden;
}
/* Centered intro shared by bot-section and showcase */
.panel-intro {
position: absolute;
top: 43.2px;
left: 50%;
transform: translateX(-50%);
width: var(--content-narrow);
max-width: calc(100% - 48px);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-12);
z-index: 1;
}
/* Center the pill here (base align-self is flex-start) */
.panel-intro .pill { align-self: center; }
.panel-intro__title {
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-title);
color: var(--color-text-soft);
text-align: center;
margin: 0;
}
.panel-intro__subtitle {
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-body);
line-height: var(--lh-base);
color: var(--color-text-subtle);
text-align: center;
}
.panel-intro__subtitle .strike { text-decoration: line-through; }
.panel-intro__chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-8);
}
.bot-section__image {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: calc(736 / 1120 * 100%);
aspect-ratio: 1422 / 1085; /* matches bot-phones.webp */
}
.bot-section__image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform var(--dur-slow) ease;
}
.bot-section__image:hover img { transform: scale(1.01); }
/* Feature duo — two cards; text near top, image overflows bottom */
.feature-duo {
display: flex;
gap: var(--space-32);
width: 100%;
align-items: stretch;
}
.feature-card {
position: relative;
flex: 1 1 0;
min-width: 0;
height: 447px;
background: var(--color-surface-soft);
border-radius: var(--radius-xl);
overflow: hidden;
}
.feature-card__copy {
position: absolute;
top: calc(50% - 160.5px);
transform: translateY(-50%);
left: 0;
right: 0;
padding: 0 var(--space-16);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
text-align: center;
z-index: 1;
}
.feature-card__title {
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-title);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-title);
color: var(--color-text-soft);
margin: 0;
}
.feature-card__subtitle {
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-body); /* 16; steps to 14 on mobile */
line-height: var(--lh-base);
color: var(--color-text-subtle);
margin: 0;
}
.feature-card__media {
position: absolute;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
.feature-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform var(--dur-slow) ease;
}
.feature-card:hover .feature-card__media img { transform: scale(1.01); }
.feature-card__media--personalization {
bottom: 0; /* flush on the card base */
width: min(500px, 100% - 32px);
aspect-ratio: 2179 / 1260; /* matches feature-personalization.png */
}
.feature-card__media--notification {
top: 119.41px;
width: 301.082px;
aspect-ratio: 1225 / 1432; /* matches feature-notification.png */
}
/* Showcase — panel with copy + app video */
.showcase {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
width: 100%;
padding: var(--space-40);
border-radius: var(--radius-xl);
overflow: hidden;
}
/* copy flows in-column here (absolute in the bot-section) */
.showcase .panel-intro {
position: static;
transform: none;
width: 100%;
max-width: var(--content-narrow);
}
/* Media box — forma, sombra, hover e poster do vídeo */
.showcase__media {
position: relative;
max-width: 80%;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-float);
transition: transform var(--dur-slow) ease;
}
.showcase__media:hover { transform: scale(1.01); }
.showcase__video {
display: block;
width: 300px;
max-width: 100%;
height: auto;
border-radius: var(--radius-xl);
}
/* desktop: reserva a altura final do vídeo antes de carregar */
@media (min-width: 901px) {
.showcase__video { min-height: 651px; }
}
/* Poster placeholder — some em fade quando o vídeo toca (.is-video-ready) */
.showcase__video-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
border-radius: var(--radius-xl);
opacity: 1;
transition: opacity 0.6s ease;
pointer-events: none;
}
.showcase__media.is-video-ready .showcase__video-poster { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.showcase__video-poster { transition: none; }
}
.showcase__demo-link {
display: block;
width: 300px;
max-width: 80%;
padding: var(--space-8) 0;
border: 1px solid var(--color-divider);
border-radius: var(--radius-pill);
text-align: center;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--color-text-muted);
text-decoration: none;
transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.showcase__demo-link:hover {
border-color: var(--color-brand-red);
color: var(--color-brand-red);
}
/* Shared bits for the feature sections below */
.center-intro {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-12);
max-width: var(--content-narrow);
margin: 0 auto;
text-align: center;
}
.center-intro .pill { align-self: center; }
/* Soft secondary button — .cta-primary pill shape, tinted surface */
.ghost-btn {
width: 100%;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-body);
letter-spacing: var(--tracking-wide);
border: none;
border-radius: var(--radius-pill);
cursor: pointer;
text-decoration: none;
background: var(--color-surface-soft);
transition: background-color var(--dur-hover) ease-out, box-shadow var(--dur-hover) ease-out,
transform var(--dur-hover) ease-out;
will-change: transform;
}
.ghost-btn:hover { transform: scale(1.005); }
.ghost-btn:active {
transform: scale(0.995);
transition: background-color var(--dur-press) ease-out, transform var(--dur-press) ease-out;
}
.ghost-btn:focus-visible { outline: none; }
.ghost-btn--red {
color: var(--color-brand-red);
background: var(--ct-ghost-red-bg); /* fundo opaco sutil (AA) */
/* fade do fundo mais suave que o hover padrão */
transition: background-color 0.45s ease, transform var(--dur-hover) ease-out;
}
.ghost-btn--red:hover {
background: var(--ct-ghost-red-bg-hover);
}
.ghost-btn--red:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-red) 22%, transparent); }
/* Seta que desliza no hover, na cor do label */
.ghost-btn--red:not(.footer-contact__submit)::after {
--ghost-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17'%3E%3Cpath d='M12.1797 8C12.1797 7.83854 12.1484 7.6901 12.0859 7.55469C12.0234 7.41927 11.9297 7.28906 11.8047 7.16406L5.79688 1.28125C5.59375 1.08333 5.34635 0.984375 5.05469 0.984375C4.86719 0.984375 4.69271 1.03125 4.53125 1.125C4.36979 1.21875 4.23958 1.34635 4.14062 1.50781C4.04688 1.66406 4 1.83854 4 2.03125C4 2.32292 4.10938 2.57812 4.32812 2.79688L9.67969 8L4.32812 13.2031C4.10938 13.4271 4 13.6823 4 13.9688C4 14.1667 4.04688 14.3438 4.14062 14.5C4.23958 14.6562 4.36979 14.7812 4.53125 14.875C4.69271 14.9688 4.86719 15.0156 5.05469 15.0156C5.34635 15.0156 5.59375 14.9167 5.79688 14.7188L11.8047 8.83594C11.9349 8.71094 12.0286 8.58073 12.0859 8.44531C12.1484 8.30469 12.1797 8.15625 12.1797 8Z'/%3E%3C/svg%3E");
content: "";
width: 0;
height: 17px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-image: var(--ghost-arrow);
mask-image: var(--ghost-arrow);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
/* `contain` → a seta escala uniforme do centro */
-webkit-mask-size: contain;
mask-size: contain;
transition: width var(--dur-hover) ease-out, margin-left var(--dur-hover) ease-out;
}
.ghost-btn--red:not(.footer-contact__submit):hover::after {
width: 16px;
margin-left: var(--space-4);
}
.fpanel__copy .ghost-btn,
.split-panel__copy .ghost-btn {
width: 108px;
height: 32px;
font-size: var(--fs-sm);
}
.fpanel__copy .ghost-btn.ghost-btn--red::after,
.split-panel__copy .ghost-btn.ghost-btn--red::after { content: none; }
.ghost-btn--blue {
color: var(--color-instruction);
background: color-mix(in srgb, var(--color-instruction) 7%, transparent);
}
.ghost-btn--blue:hover {
background: color-mix(in srgb, var(--color-instruction) 11%, transparent);
box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--color-instruction) 40%, transparent);
}
.ghost-btn--blue:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-instruction) 22%, transparent); }
@media (prefers-reduced-motion: reduce) {
.ghost-btn { transition: background-color var(--dur-hover) ease-out, box-shadow var(--dur-hover) ease-out; }
.ghost-btn:hover,
.ghost-btn:active { transform: none; }
.ghost-btn--red:not(.footer-contact__submit)::after { transition: none; }
}
/* Split panel — copy + media side by side */
.fpanel {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-48);
width: 100%;
margin-block: 28px;
}
.fpanel__copy {
flex: 1 1 auto;
min-width: 0;
max-width: 448px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-16);
}
.fpanel__title {
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-title);
color: var(--color-text-soft);
margin: 0;
}
.fpanel__subtitle {
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-body);
line-height: var(--lh-base);
color: var(--color-text-subtle);
}
.fpanel__chips { display: flex; flex-wrap: wrap; gap: var(--space-8); width: 100%; }
.fpanel__media {
flex: 1 1 0;
min-width: 0;
max-width: 544px;
height: 352px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface-soft);
border-radius: var(--radius-xl);
overflow: hidden;
}
.fpanel__media img {
display: block;
width: auto;
max-width: 82%;
height: auto;
max-height: 286px;
border-radius: var(--radius-lg);
transition: transform var(--dur-slow) ease;
}
.fpanel__media:hover img { transform: scale(1.01); }
/* Gestão completa — centered intro + device collage */
.gestao {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-32);
width: 100%;
padding: var(--space-32);
border-radius: var(--radius-xl);
overflow: hidden;
}
.gestao__media { width: 100%; max-width: 1024px; }
.gestao__media img { display: block; width: 100%; height: auto; }
/* Migração facilitada — centered CTA panel */
.migracao {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
width: 100%;
padding: var(--space-32) var(--space-40);
border-radius: var(--radius-xl);
background: var(--color-surface-soft);
}
.migracao__subtitle { max-width: var(--content-narrow); text-wrap: balance; }
.migracao .cta-primary { display: none; width: 266px; max-width: 100%; }
.migracao .panel-intro__title { font-size: var(--fs-title); }
@media (max-width: 900px) {
/* image on top, copy + CTA below (DOM copy-first → column-reverse) */
.fpanel { flex-direction: column-reverse; align-items: stretch; gap: var(--space-24); margin-block: var(--space-8); }
.fpanel__copy { max-width: 100%; align-items: center; text-align: center; }
.fpanel__copy .pill { align-self: center; }
.fpanel__chips { justify-content: center; }
/* Reset desktop media sizing; `flex: none` → media = image height */
.fpanel__media,
.fpanel--mobilidade .fpanel__media { flex: none; max-width: none; height: auto; padding: var(--space-16); }
.fpanel__media img { width: 86%; max-width: min(420px, 86%); max-height: none; margin: 0 auto; }
}
/* Features — panel with intro + wrap of feature cards */
.features {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-32);
padding: var(--space-32);
background: var(--color-surface-soft);
border-radius: var(--radius-xl);
width: 100%;
}
.features__intro {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-12);
max-width: var(--content-narrow);
text-align: center;
}
.features__intro .pill { align-self: center; }
/* Step the section header down to the card-title scale (--fs-title) */
.features .panel-intro__title { font-size: var(--fs-title); }
.features__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-8);
width: 100%;
max-width: var(--content-wide);
margin: 0;
padding: 0;
list-style: none;
}
.feature-item {
flex: 1 1 300px;
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4);
border-radius: var(--radius-lg);
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-sm);
color: var(--color-text);
transition: box-shadow 0.4s ease, transform 0.4s ease;
}
/*
.feature-item:hover {
box-shadow: var(--shadow-lift);
transform: translateY(-1px);
}
*/
.feature-item__icon { width: 18px; height: 18px; flex-shrink: 0; }
/* Plans — pricing cards, horizontal scroll on mobile */
.plans {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-40);
width: 100%;
/* desktop only — reset on mobile */
margin-block: var(--space-40);
}
.plans__intro {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-12);
max-width: var(--content-narrow);
text-align: center;
}
.plans__intro .pill { align-self: center; }
.plans__checks {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-16);
}
.plans__check {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-sm);
color: var(--color-text);
white-space: nowrap;
}
.plans__check img { width: 16px; height: 16px; }
/* Billing toggle */
.plans__toggle {
display: inline-flex;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-16);
padding: var(--space-4);
background: var(--color-track);
border-radius: var(--radius-pill);
}
.plans__toggle button {
display: inline-flex;
align-items: center;
gap: var(--space-6);
padding: var(--space-8) var(--space-16);
border-radius: var(--radius-pill);
font-family: var(--font);
font-weight: var(--fw-medium);
font-size: var(--fs-sm);
color: var(--color-text-muted);
background: transparent;
cursor: pointer;
transition: background var(--dur-base) ease, color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.plans__toggle button:hover:not(.is-active) {
color: var(--color-text);
}
.plans__toggle button:focus-visible {
outline: 2px solid var(--color-brand-red);
outline-offset: -2px;
}
.plans__toggle button.is-active {
background: var(--color-surface);
color: var(--color-brand-red);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.plans__discount {
background: var(--color-success-soft);
color: var(--color-success);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
padding: 1px var(--space-6);
border-radius: var(--radius-pill);
white-space: nowrap;
}
/* Cards row */
.plans__cards {
display: flex;
flex-wrap: nowrap;
gap: var(--space-32);
width: 100%;
justify-content: center;
align-items: flex-start;
}
.plan-card {
flex: 1 1 0;
min-width: 0;
max-width: 352px;
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-divider);
border-radius: var(--radius-xl);
overflow: hidden;
transition: transform 0.45s var(--ease-out), background-color 0.45s ease;
}
/* Contain the strike-flip reflow to the card; desktop-only */
@media (min-width: 901px) {
.plan-card { contain: layout; }
}
/* desktop-only: discreet hover lift + brighten to white */
@media (hover: hover) and (min-width: 901px) {
.plan-card:hover {
transform: scale(1.008);
background-color: var(--color-surface);
}
}
.plan-card__body {
display: flex;
flex-direction: column;
gap: var(--space-16);
padding: var(--space-16);
}
@media (min-width: 901px) {
.plan-card__body { padding: var(--space-24); }
}
.plan-card__head {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.plan-card__name {
margin: 0; /*