/* =====================================================================
ASCENT FOODS — Design System
Clone do padrão visual Magnific (dark app + cream marketing).
Adaptado: copy, tipografia (Helvetica Now Display) e logo (Ascent Foods).
Para trocar a marca, altere apenas as variáveis em :root.
===================================================================== */
/* ------------------------------------------------------------------
FONTE — Google Sans
"Google Sans" é uma fonte PROPRIETÁRIA do Google e não é servida
publicamente (não está no Google Fonts). Por isso:
- Se você tiver os arquivos licenciados, coloque-os em assets/fonts/
com os nomes abaixo e os @font-face passam a valer.
- Caso contrário, o site carrega o Roboto (fonte aberta oficial do
Google, visual quase idêntico) via CDN, definido no das
páginas. O fallback abaixo garante um resultado fiel.
------------------------------------------------------------------ */
@font-face {
font-family: "Google Sans";
src: url("../fonts/GoogleSans-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Google Sans";
src: url("../fonts/GoogleSans-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Google Sans";
src: url("../fonts/GoogleSans-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Google Sans";
src: url("../fonts/GoogleSans-Medium.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
/* ==================================================================
TOKENS
================================================================== */
:root {
/* ================================================================
ARQUITETURA DE TOKENS EM 3 CAMADAS
(aplicada a partir da skill ui-ux-pro-max: design-system)
Primitive → Semantic → Component
CAMADA 1 — PRIMITIVE (valores crus, sem significado)
Para trocar a MARCA da Ascent Foods, altere apenas os valores
primitivos abaixo. Toda a interface se ajusta automaticamente.
================================================================ */
/* Neutros claros — superfícies (valores reais do Magnific) */
--c-white: #ffffff;
--c-gray-50: #fafafa;
--c-gray-100: #ececec;
--c-gray-200: #e3e3e3;
--c-gray-300: #dbdbdb;
/* Neutros escuros — texto (azul quase preto #000612 → quase branco) */
--c-ink-900: #000612;
--c-ink-800: #222731;
--c-ink-700: #40444d;
--c-ink-600: #5f636a;
--c-ink-500: #7d8085;
/* Escala dark — derivada do azul quase preto #000612 */
--c-app-0: #000612;
--c-app-1: #0a1220;
--c-app-2: #141f33;
--c-app-3: #1f2c45;
--c-app-4: #2e3f5e;
--c-app-fg-0: #fafafa;
--c-app-fg-1: #e3e3e3;
--c-app-fg-2: #c5c5c5;
--c-app-fg-3: #aaaaaa;
--c-app-fg-4: #737373;
/* Ciano da marca Ascent (#00E2E7) + derivadas p/ contraste */
--c-brand-500: #00e2e7; /* cor da marca — preenchimentos (botões, chips) */
--c-brand-600: #00c4c9; /* hover */
--c-brand-700: #007a99; /* ciano escurecido p/ TEXTO sobre fundo claro */
--c-brand-ink: #000612; /* texto/ícone sobre o ciano (contraste AA) */
/* Gradiente de marca (ciano → azul quase preto) */
--c-grad-from: #00e2e7;
--c-grad-to: #000612;
/* ================================================================
CAMADA 2 — SEMANTIC (papéis / significado)
Os componentes referenciam SEMPRE estes tokens, nunca os crus.
================================================================ */
/* --- Surface (Dark — app e páginas escuras) --- */
--surface-0: var(--c-app-0);
--surface-1: var(--c-app-1);
--surface-2: var(--c-app-2);
--surface-3: var(--c-app-3);
--surface-4: var(--c-app-4);
/* --- Surface foreground (texto no dark) --- */
--surface-fg-0: var(--c-app-fg-0);
--surface-fg-1: var(--c-app-fg-1);
--surface-fg-2: var(--c-app-fg-2);
--surface-fg-3: var(--c-app-fg-3);
--surface-fg-4: var(--c-app-fg-4);
/* --- Marketing (Light — seções claras, real Magnific) --- */
--mkt-surface-0: var(--c-gray-50); /* seções alternadas #fafafa */
--mkt-fg-0: var(--c-ink-900); /* texto principal #000612 */
--mkt-fg-1: var(--c-ink-800); /* texto secundário */
--mkt-primary-0: var(--c-ink-900); /* botões/banner quase-preto */
--mkt-primary-1: #0a152b; /* hover mais escuro */
--mkt-primary-2: #0006120d; /* petróleo @ 5% (fundo sutil) */
--mkt-border: #00061233; /* borda alpha */
--mkt-border-soft: #0006121a; /* borda alpha suave */
/* --- Primary (Ciano da marca — ações e links) --- */
--primary-0: var(--c-brand-500);
--primary-1: var(--c-brand-600);
--primary-2: #00e2e71f; /* ciano @ 12% */
--primary-fg: var(--c-brand-ink);
/* --- Gradiente de marca --- */
--gradient-brand: linear-gradient(120deg, var(--c-grad-from), var(--c-grad-to));
/* --- Tipografia --- */
--font-sans: "Geist", "Google Sans", "Google Sans Text", "Product Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
/* --- Escala tipográfica (contida, padrão referência) --- */
--fs-display: clamp(2.4rem, 5.2vw, 4rem);
--fs-h1: clamp(2rem, 4vw, 3rem);
--fs-h2: clamp(1.7rem, 3.2vw, 2.5rem);
--fs-h3: clamp(1.25rem, 2vw, 1.6rem);
--fs-lead: clamp(1.05rem, 1.4vw, 1.2rem);
--fs-body: 1rem;
--fs-sm: 0.875rem;
--fs-xs: 0.75rem;
/* --- Raios --- */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
/* --- Espaçamento de seção --- */
--section-y: clamp(72px, 9vw, 130px);
--container: 1140px;
--gutter: 24px;
--fold-full: 100svh;
--fold-section-y: clamp(56px, 6vw, 92px);
/* --- Sombras (valores reais do Magnific: grandes e suaves) --- */
--shadow-sm: 0px 1px 2px rgba(0, 6, 18, 0.10), 0px 2px 5px rgba(0, 6, 18, 0.15);
--shadow-md: 0 10px 40px rgba(0, 6, 18, 0.12);
--shadow-lg: 0 0 60px rgba(0, 6, 18, 0.22);
--shadow-dark: 0 30px 80px rgba(0, 0, 0, 0.55);
/* --- Transição --- */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--t-fast: 0.18s;
--t: 0.32s;
}
/* ==================================================================
RESET
================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-sans);
font-weight: 400;
font-synthesis-weight: none;
font-size: var(--fs-body);
line-height: 1.6;
color: var(--mkt-fg-0);
background: var(--mkt-surface-0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
h1, h2, h3, h4 { line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; }
strong, b { font-weight: 600; }
::selection { background: var(--primary-0); color: #fff; }
/* ==================================================================
LAYOUT HELPERS
================================================================== */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
body.home main.world-day > .section {
min-height: var(--fold-full);
padding-block: var(--fold-section-y);
display: grid;
align-content: center;
}
body.home .world-cream > .section,
body.home .world-dark > .section {
padding-block: var(--fold-section-y);
}
body.home {
--fold-full: clamp(760px, 82svh, 840px);
}
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.maxw-640 { max-width: 640px; }
.maxw-720 { max-width: 720px; }
.maxw-820 { max-width: 820px; }
/* Alterna os "mundos" visuais */
.world-dark {
background: var(--surface-0);
color: var(--surface-fg-0);
}
.world-cream {
background: var(--mkt-surface-0);
color: var(--mkt-fg-0);
}
/* ------------------------------------------------------------------
DAY MODE — versão clara (home). Segue a referência dark do Magnific,
porém invertida para tema dia. Reaproveita os mesmos componentes,
apenas repintando o que era específico do dark.
------------------------------------------------------------------ */
.world-day {
background: #ffffff;
color: var(--mkt-fg-0);
}
.world-day .hero__sub { color: var(--mkt-fg-1); opacity: 0.8; }
.world-day .hero__glow { opacity: 0.45; }
/* Marquee claro */
.world-day .marquee { border-color: var(--mkt-border-soft); }
.world-day .marquee__label { color: var(--mkt-fg-1); opacity: 0.55; }
.world-day .marquee__item {
background: #ffffff;
border-color: var(--mkt-border-soft);
color: var(--mkt-fg-0);
}
/* Cards de recurso (bento) claros */
.world-day .feature-card {
background: #ffffff;
border-color: var(--mkt-border-soft);
}
.world-day .feature-card:hover {
background: #fafafa;
border-color: var(--mkt-border);
}
.world-day .feature-card h3 { color: var(--mkt-fg-0); }
.world-day .feature-card p { color: var(--mkt-fg-1); opacity: 0.85; }
.world-day .tag { color: var(--primary-0); }
/* Navbar clara (glass claro) para páginas em modo dia */
.nav.nav--day {
background: rgba(255, 255, 255, 0.82);
border-bottom-color: var(--mkt-border-soft);
}
.nav--day .brand { color: var(--mkt-fg-0); }
.nav--day .nav__menu a { color: var(--mkt-fg-1); }
.nav--day .nav__menu a:hover { color: var(--mkt-fg-0); }
.nav--day .nav__login { color: var(--mkt-fg-0); }
.nav--day .nav__toggle { color: var(--mkt-fg-0); }
.nav--day.is-open .nav__menu {
background: #ffffff;
border-bottom-color: var(--mkt-border-soft);
}
/* ==================================================================
ELEMENTOS TIPOGRÁFICOS
================================================================== */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--primary-0);
}
.world-dark .eyebrow { color: var(--surface-fg-3); }
.eyebrow::before {
content: "";
width: 22px;
height: 1px;
background: currentColor;
opacity: 0.5;
}
.display { font-size: var(--fs-display); font-weight: 600; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.lead {
font-size: var(--fs-lead);
font-weight: 300;
line-height: 1.5;
color: var(--mkt-fg-1);
opacity: 0.85;
}
.world-dark .lead { color: var(--surface-fg-2); opacity: 1; }
.section-head { max-width: 720px; }
.section-head .lead { margin-top: 18px; }
.section-head--center { margin-inline: auto; text-align: center; }
/* ==================================================================
BADGE / PILL
================================================================== */
.badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 8px 7px 16px;
border-radius: var(--r-pill);
font-size: var(--fs-sm);
font-weight: 400;
border: 1px solid var(--mkt-border-soft);
background: #fff;
color: var(--mkt-fg-0);
}
.world-dark .badge {
background: var(--surface-1);
border-color: var(--surface-2);
color: var(--surface-fg-1);
}
.badge__dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--mkt-primary-0);
box-shadow: 0 0 0 4px var(--mkt-primary-2);
}
.world-dark .badge__dot {
background: var(--primary-0);
box-shadow: 0 0 0 4px rgba(0, 226, 231, 0.18);
}
.badge__link {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px;
border-radius: var(--r-pill);
background: var(--primary-0);
color: var(--primary-fg);
font-size: var(--fs-xs);
font-weight: 600;
}
.tag {
display: inline-block;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--surface-fg-3);
}
/* ==================================================================
BOTÕES
================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
border-radius: var(--r-pill);
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0;
transition: transform var(--t-fast) var(--ease),
background var(--t) var(--ease),
box-shadow var(--t) var(--ease),
color var(--t) var(--ease);
white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn--primary {
background: var(--primary-0);
color: var(--primary-fg);
box-shadow: 0 14px 30px rgba(0, 226, 231, 0.24);
}
.btn--primary:hover {
background: var(--c-brand-ink);
color: var(--primary-0);
box-shadow: 0 16px 36px rgba(0, 6, 18, 0.20);
}
.btn--dark {
background: var(--mkt-primary-0);
color: #fff;
}
.btn--dark:hover { background: var(--mkt-primary-1); }
.btn--cream {
background: #fff;
color: var(--mkt-fg-0);
border: 1px solid var(--mkt-border-soft);
}
.btn--cream:hover { background: #fafafa; }
.btn--ghost {
background: transparent;
color: currentColor;
border: 1px solid currentColor;
}
.world-dark .btn--ghost { border-color: var(--surface-2); color: var(--surface-fg-1); }
.btn--ghost:hover { background: rgba(255,255,255,0.06); }
.btn--outline-cream {
background: transparent;
color: var(--mkt-fg-0);
border: 1px solid var(--mkt-border);
}
.btn--outline-cream:hover { background: var(--mkt-primary-2); }
.btn--wa {
background: var(--primary-0);
color: var(--primary-fg);
box-shadow: 0 14px 30px rgba(0, 226, 231, 0.20);
}
.btn--wa:hover { background: var(--primary-1); }
.btn--lg { padding: 12px 16px; font-size: 1rem; }
.btn--block { width: 100%; }
/* ==================================================================
NAVBAR + ANNOUNCEMENT
================================================================== */
.announce {
background: var(--mkt-primary-0);
color: #fff;
text-align: center;
font-size: var(--fs-sm);
font-weight: 400;
padding: 9px 16px;
}
.announce strong { font-weight: 600; }
.nav {
position: sticky;
top: 0;
z-index: 60;
background: rgba(0, 6, 18, 0.72);
backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid var(--surface-2);
}
.nav__inner {
display: flex;
align-items: center;
gap: 32px;
height: 68px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 1.15rem;
letter-spacing: -0.03em;
color: var(--surface-fg-0);
}
.brand__logo {
height: 30px;
width: auto;
display: block;
}
.nav__menu {
display: flex;
align-items: center;
gap: 30px;
margin-inline: auto;
}
.nav__menu a {
font-size: 0.92rem;
color: var(--surface-fg-2);
transition: color var(--t-fast);
}
.nav__menu a:hover { color: var(--surface-fg-0); }
.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__login {
font-size: 0.92rem;
font-weight: 400;
color: var(--surface-fg-1);
}
.nav__login:hover { color: #fff; }
.nav__toggle { display: none; color: var(--surface-fg-0); width: 26px; height: 26px; }
/* ==================================================================
HERO
================================================================== */
.hero {
position: relative;
overflow: hidden;
padding-top: clamp(60px, 8vw, 96px);
padding-bottom: clamp(0px, 4vw, 40px);
}
.hero__glow {
position: absolute;
top: -220px; left: 50%;
width: 900px; height: 600px;
transform: translateX(-50%);
background: radial-gradient(closest-side, rgba(0,226,231,0.20), transparent 70%);
pointer-events: none;
z-index: 0;
}
.hero__inner { position: relative; z-index: 1; text-align: center; }
.hero .badge { margin-bottom: 28px; }
.hero__title { max-width: 900px; margin-inline: auto; }
.hero__line { display: inline; }
.hero__line--desktop { display: block; }
.hero__line--mobile { display: none; }
.hero__title em { font-style: normal; color: var(--primary-0); }
.hero__sub {
max-width: 640px;
margin: 22px auto 0;
font-size: var(--fs-lead);
font-weight: 300;
color: var(--surface-fg-2);
}
.hero__cta {
display: flex; flex-wrap: wrap;
gap: 14px; justify-content: center;
margin-top: 34px;
}
/* ==================================================================
HERO — PRIMEIRA DOBRA (split: texto à esquerda + print à direita)
================================================================== */
.hero--split {
padding-top: clamp(34px, 5vw, 68px);
padding-bottom: clamp(22px, 3vw, 42px);
isolation: isolate;
background: #fff;
}
.hero--dark-bg {
/* largura sempre 100%; altura acompanha a proporção do bg3 (1710/1028 → 60.12vw)
quando cabe na tela, e é limitada ao viewport quando não cabe — conteúdo
centralizado sem precisar rolar */
min-height: var(--fold-full);
display: flex;
flex-direction: column;
justify-content: flex-end; /* texto embaixo; mockup (no bg) em cima */
padding-top: clamp(72px, 7vh, 96px);
padding-bottom: clamp(102px, 12vh, 124px);
text-align: center;
background-color: #000612;
background-image:
linear-gradient(180deg, rgba(0, 6, 18, 0.34) 0%, rgba(0, 6, 18, 0.04) 22%, rgba(0, 6, 18, 0.12) 42%),
linear-gradient(180deg,
rgba(0, 6, 18, 0) 30%,
rgba(0, 6, 18, 0.38) 53%,
rgba(0, 6, 18, 0.88) 76%,
#000612 98%),
url("../../fundo-hero.webp?v=2");
background-size: cover;
background-position: center top, center top, center clamp(52px, 6.4vh, 72px);
background-repeat: no-repeat;
}
/* Bloco de texto centralizado (largura máxima controlada) */
.hero__center {
position: relative;
z-index: 1;
width: 100%;
max-width: 880px;
margin-inline: auto;
padding-inline: 24px;
text-align: center;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); /* contraste com o fundo */
}
.hero--dark-bg .hero__cta-row {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 22px;
}
.hero--split .container {
max-width: 1200px;
}
.hero--split:not(.hero--dark-bg)::before {
content: "";
position: absolute;
left: clamp(120px, 22vw, 320px);
right: -6vw;
bottom: -26%;
height: 64%;
z-index: 0;
background:
linear-gradient(146deg,
transparent 0%,
transparent 14%,
rgba(0, 226, 231, 0.12) 32%,
rgba(0, 226, 231, 0.34) 52%,
rgba(0, 226, 231, 0.72) 78%,
rgba(0, 226, 231, 0.96) 100%),
radial-gradient(ellipse at 94% 98%,
rgba(0, 226, 231, 0.98) 0%,
rgba(0, 226, 231, 0.56) 34%,
transparent 68%),
radial-gradient(ellipse at 46% 112%,
rgba(0, 226, 231, 0.34) 0%,
rgba(0, 226, 231, 0.16) 46%,
transparent 72%);
filter: blur(34px);
transform: skewY(-8deg);
transform-origin: right bottom;
opacity: 0.95;
pointer-events: none;
}
.hero--split:not(.hero--dark-bg)::after {
content: "";
position: absolute;
inset: auto 0 -1px;
height: 26%;
z-index: 0;
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.40) 56%, #fff 96%);
pointer-events: none;
}
.hero--dark-bg::before {
content: none;
}
.hero--dark-bg::after {
content: none;
}
.hero__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(680px, 1.12fr) minmax(0, 0.88fr);
align-items: center;
gap: clamp(12px, 2vw, 32px);
}
.hero--dark-bg .hero__grid {
width: 100%;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
gap: clamp(24px, 4vw, 56px);
}
.hero__lead { text-align: left; }
.hero--split .hero__title {
max-width: 740px;
margin: 0;
}
.hero--dark-bg .hero__title {
color: #fff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6), 0 14px 44px rgba(0, 0, 0, 0.35);
font-size: clamp(1.7rem, 3.55vw, 3.04rem);
font-weight: 500; /* mais leve */
line-height: 1.14;
letter-spacing: -0.015em;
margin-inline: auto;
max-width: 840px;
}
.hero__shine {
display: inline-block;
color: var(--primary-0);
}
.hero--split .hero__sub {
max-width: 450px;
margin: 24px 0 0;
}
.hero--dark-bg .hero__sub {
max-width: 560px;
margin: 14px auto 0;
text-align: center;
color: rgba(245, 255, 255, 0.86);
opacity: 1;
}
.hero--dark-bg .hero__note {
max-width: 260px;
text-align: left;
display: inline-flex;
align-items: center;
gap: 9px;
}
.hero__note-ic { width: 20px; height: 20px; color: var(--primary-0); flex: 0 0 auto; }
/* Pills de vidro (funcionalidades) — composição do fundo da hero */
.hero__pills {
position: absolute;
left: 0; right: 0; bottom: clamp(18px, 2.8vh, 28px);
z-index: 2;
display: flex;
justify-content: flex-start;
align-items: center;
padding-inline: 0;
pointer-events: none;
overflow: hidden;
/* funde as bordas: as pills das pontas somem suavemente */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.hero__pills-track {
display: flex;
align-items: center;
gap: 12px;
width: max-content;
padding-inline: 12px;
animation: heroPillsScroll 34s linear infinite;
will-change: transform;
}
.hero__pill {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 16px;
border-radius: 999px;
overflow: hidden; /* recorta o reflexo ao formato do vidro */
font-size: 0.82rem;
font-weight: 500;
color: rgba(240, 250, 251, 0.92);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.13);
backdrop-filter: blur(11px) saturate(120%);
-webkit-backdrop-filter: blur(11px) saturate(120%);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16);
white-space: nowrap;
}
.hero__pill::before {
content: "";
flex: 0 0 auto;
width: 7px; height: 7px; border-radius: 50%;
background: var(--primary-0);
box-shadow: 0 0 8px rgba(0, 226, 231, 0.65);
}
/* brilho/reflexo varrendo o vidro */
.hero__pill::after {
content: "";
position: absolute;
top: 0; bottom: 0;
left: -60%;
width: 55%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transform: skewX(-16deg);
animation: pillShine 5.5s ease-in-out infinite;
pointer-events: none;
}
/* faixa horizontal centralizada na base da hero (design Figma) */
/* brilho escalonado para não varrer todas juntas */
.hero__pill--1::after { animation-delay: 0s; }
.hero__pill--2::after { animation-delay: 0.6s; }
.hero__pill--3::after { animation-delay: 1.2s; }
.hero__pill--4::after { animation-delay: 1.8s; }
.hero__pill--5::after { animation-delay: 2.4s; }
.hero__pill--6::after { animation-delay: 3s; }
.hero__pill--7::after { animation-delay: 3.6s; }
.hero__pill--8::after { animation-delay: 4.2s; }
@keyframes pillShine {
0%, 55% { left: -60%; }
78%, 100% { left: 130%; }
}
@keyframes heroPillsScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.hero__pills-track { animation: none; transform: none; }
.hero__pill { animation: none; opacity: 1; transform: none; }
.hero__pill::after { animation: none; }
}
.hero__cta-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 34px;
}
.hero__note {
font-size: 0.9rem;
line-height: 1.4;
color: var(--mkt-fg-1);
opacity: 0.76;
max-width: 220px;
}
.hero--dark-bg .hero__note {
color: rgba(245, 255, 255, 0.72);
opacity: 1;
}
.hero__media {
position: relative;
min-width: 0;
display: flex;
justify-content: center;
perspective: 1600px;
}
/* Glow ambiente em camadas (profundidade) */
.hero__media::before {
content: "";
position: absolute;
inset: -12% -16% -20% -16%;
background:
radial-gradient(40% 40% at 62% 30%, rgba(0, 226, 231, 0.40), transparent 70%),
radial-gradient(45% 45% at 30% 58%, rgba(0, 200, 210, 0.20), transparent 72%),
radial-gradient(55% 55% at 56% 92%, rgba(0, 120, 150, 0.18), transparent 75%);
filter: blur(56px);
opacity: 1;
pointer-events: none;
z-index: 0;
}
/* textura sutil de grid pontilhado, esmaecendo nas bordas */
.hero__media::after {
content: "";
position: absolute;
inset: -18% -16% -22% -16%;
z-index: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(58% 58% at 52% 44%, #000 0%, transparent 72%);
mask-image: radial-gradient(58% 58% at 52% 44%, #000 0%, transparent 72%);
pointer-events: none;
}
/* Screenshot: leve inclinação 3D + flutuação suave */
.hero__shot {
position: relative;
z-index: 1;
width: 100%;
max-width: 620px;
height: auto;
/* halo ciano (destaca do fundo) + sombra de profundidade — abraça o formato real */
filter:
drop-shadow(0 0 34px rgba(0, 226, 231, 0.24))
drop-shadow(0 44px 72px rgba(0, 0, 0, 0.62));
}
@keyframes heroFloat {
0%, 100% { transform: rotateY(-5deg) rotateX(1.5deg) translateY(0); }
50% { transform: rotateY(-5deg) rotateX(1.5deg) translateY(-12px); }
}
/* Chips flutuantes de vidro */
.hero__chip {
position: absolute;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 16px;
border-radius: 14px;
font-size: 0.85rem;
font-weight: 600;
color: #fff;
background: rgba(0, 6, 18, 0.72);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
white-space: nowrap;
}
.hero__chip--a { top: 4%; left: -5%; }
.hero__chip--b { bottom: 6%; right: -4%; }
.hero__chip-pulse {
width: 9px; height: 9px; border-radius: 50%;
background: var(--primary-0);
box-shadow: 0 0 10px rgba(0, 226, 231, 0.65);
}
.hero__chip-check {
display: grid; place-items: center;
width: 18px; height: 18px; border-radius: 50%;
background: var(--primary-0); color: var(--primary-fg);
font-size: 0.68rem; font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.hero__shot, .hero__chip, .hero__chip-pulse { animation: none; }
}
/* Ticker horizontal — funcionalidades no rodapé da 1ª dobra */
.hero__hticker {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 2;
padding-block: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.30) 12%, #000 50%, rgba(0,0,0,0.30) 88%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.30) 12%, #000 50%, rgba(0,0,0,0.30) 88%, transparent 100%);
}
.hero__hticker-track {
display: flex;
align-items: center;
width: max-content;
animation: hticker 42s linear infinite;
}
.hero__hticker:hover .hero__hticker-track { animation-play-state: paused; }
.hero__hword {
white-space: nowrap;
font-size: clamp(1rem, 1.4vw, 1.3rem);
font-weight: 600;
letter-spacing: -0.01em;
color: rgba(232, 246, 247, 0.82);
padding-inline: 24px;
}
.hero__hticker-track i {
flex: 0 0 auto;
width: 5px; height: 5px; border-radius: 50%;
background: var(--primary-0);
}
@keyframes hticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.hero__hticker-track { animation: none; }
}
/* Container único da primeira dobra (navbar + hero) — alinhado ao texto (como antes) */
:root { --fold-max: 1392px; }
.hero--dark-bg .container {
max-width: var(--fold-max);
margin-inline: auto;
padding-inline: var(--gutter);
position: relative; /* âncora para o ticker respeitar a margem direita */
}
#centralizado {
padding-top: clamp(28px, 3vw, 38px);
}
/* ==================================================================
BOTÃO com SETA em círculo (estilo Ascent)
================================================================== */
.btn--arrow { padding-right: 16px; }
.btn--arrow::after {
content: "";
flex: 0 0 auto;
display: block;
align-self: center;
width: 20px;
height: 20px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
transform: translateY(0);
transition: transform var(--t) var(--ease);
}
.btn--arrow:hover::after { transform: translate(3px, 0); }
/* ==================================================================
LOGO — imagem da marca (logo-ascentfoods.png, p/ fundos escuros)
================================================================== */
/* ==================================================================
NAV — menu em pílula + link "Entrar" com ícone
================================================================== */
.nav--day .nav__menu {
background: var(--mkt-primary-2);
border-radius: var(--r-pill);
padding: 7px 8px;
gap: 4px;
}
.nav--day .nav__menu a {
padding: 8px 18px;
border-radius: var(--r-pill);
transition: background var(--t-fast), color var(--t-fast);
}
.nav--day .nav__menu a:hover { background: #fff; color: var(--mkt-fg-0); }
/* ---- Navbar integrada ao topo da hero (estilo Magnific, sem cápsula) ---- */
.nav.nav--hero-dark {
position: absolute;
top: 16px; /* nav no topo (sem barra de anúncio) */
left: 0;
right: 0;
padding: 0;
background: transparent; /* legibilidade vem do scrim do fundo da hero */
border-bottom-color: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.nav--hero-dark .nav__inner {
position: relative;
overflow: visible;
height: 80px; /* dentro da faixa 72–88px */
max-width: var(--fold-max);
margin-inline: auto;
padding-inline: var(--gutter);
gap: 36px;
/* sem cápsula: nada de fundo/borda/raio/blur no inner */
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.nav--hero-dark .nav__inner::before { content: none; }
/* Cores sobre a imagem escura */
.nav--hero-dark .nav__toggle { color: #fff; }
/* Links: ao lado da logo (esquerda), limpos, sem pílula grande */
.nav--hero-dark .nav__menu {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-inline: 0;
gap: 4px;
background: none;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.nav--hero-dark .nav__menu a {
position: relative;
padding: 8px 14px;
border-radius: 8px;
font-weight: 500;
color: rgba(245, 255, 255, 0.74);
transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav--hero-dark .nav__menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav--hero-dark .nav__menu a.is-active,
.nav--hero-dark .nav__menu a[aria-current="page"] {
color: #fff;
background: transparent;
box-shadow: none;
}
/* destaque sutil do ativo: sublinhado ciano curto (sem pill) */
.nav--hero-dark .nav__menu a.is-active::after,
.nav--hero-dark .nav__menu a[aria-current="page"]::after {
content: none;
position: absolute;
left: 14px; right: 14px; bottom: 3px;
height: 2px; border-radius: 2px;
background: var(--primary-0);
box-shadow: 0 0 10px rgba(0, 226, 231, 0.55);
}
.nav--hero-dark .nav__menu a.is-active::before,
.nav--hero-dark .nav__menu a[aria-current="page"]::before { content: none; }
/* Ações à direita */
.nav--hero-dark .nav__actions { margin-left: auto; gap: 22px; }
/* "Entrar": discreto, texto + ícone (não parece botão) */
.nav__login { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.nav__login svg { width: 18px; height: 18px; }
.nav--hero-dark .nav__login { color: rgba(245, 255, 255, 0.82); }
.nav--hero-dark .nav__login:hover { color: #fff; }
/* Botão principal ciano, clean, raio moderado (escopo do nav) */
.nav--hero-dark .nav__actions .btn--primary {
border-radius: 12px;
padding: 10px 18px;
font-size: 0.92rem;
font-weight: 600;
box-shadow: none;
}
/* Estado aberto (mobile) */
.nav.is-open .nav__menu { background: #fff; border-radius: 0; padding: 20px var(--gutter); }
.nav--hero-dark.is-open .nav__inner {
background: rgba(0, 6, 18, 0.94);
border-radius: 14px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.nav--hero-dark.is-open .nav__menu {
background: transparent;
border: 0;
}
/* Responsivo da primeira dobra */
@media (max-width: 900px) {
:root {
--gutter: 20px;
}
.nav.nav--hero-dark {
top: 34px;
}
.nav--hero-dark .nav__inner {
height: 76px;
}
.nav--hero-dark.is-open .nav__menu {
top: 76px;
}
.hero--dark-bg {
min-height: var(--fold-full);
padding-top: clamp(108px, 14vh, 136px);
padding-bottom: clamp(68px, 9vh, 86px);
background-image:
linear-gradient(180deg,
rgba(0, 6, 18, 0.02) 0%,
rgba(0, 6, 18, 0.18) 32%,
rgba(0, 6, 18, 0.72) 58%,
rgba(0, 6, 18, 0.94) 78%,
#000612 100%),
url("../../fundo-hero.webp");
background-size: cover, clamp(720px, 210vw, 1000px) auto;
background-position: center top, 52% clamp(56px, 8vh, 82px);
}
.hero__center {
max-width: 620px;
}
.hero--dark-bg .hero__title {
max-width: 620px;
font-size: clamp(2.05rem, 6.2vw, 2.9rem);
line-height: 1.08;
letter-spacing: 0;
}
.hero--dark-bg .hero__sub {
max-width: 470px;
font-size: clamp(1rem, 2.4vw, 1.14rem);
line-height: 1.42;
}
.hero--dark-bg .hero__cta-row {
flex-direction: column;
gap: 14px;
margin-top: 20px;
}
.hero--dark-bg .hero__cta-row .btn {
min-height: 50px;
}
.hero--dark-bg .hero__note {
justify-content: center;
text-align: center;
max-width: 320px;
}
.hero__pills {
display: flex;
bottom: clamp(10px, 1.9vh, 18px);
}
.hero__pills-track { animation-duration: 30s; }
}
/* ==================================================================
HERO — WORD TICKER (palavras rolando na vertical, lado direito)
================================================================== */
.hero__wordticker { display: none; }
@media (min-width: 1024px) {
.hero__wordticker {
display: flex;
align-items: center;
gap: 18px;
position: absolute;
right: 26px; /* recuo óptico: um pouco para dentro da margem */
top: 50%;
transform: translateY(-50%);
z-index: 1;
pointer-events: none;
}
}
.hero__wordticker-arrow {
flex: 0 0 auto;
display: flex;
align-items: center;
height: 420px;
color: var(--primary-0);
filter: drop-shadow(0 2px 10px rgba(0, 226, 231, 0.45));
}
.hero__wordticker-arrow svg { width: 26px; height: 26px; }
.hero__wordticker-viewport {
height: 420px;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
}
.hero__wordticker-track {
will-change: transform;
transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1); /* deslize suave */
}
.hero__word {
height: 60px;
display: flex;
align-items: center;
}
.hero__word span {
white-space: nowrap;
font-size: clamp(1.5rem, 2vw, 1.95rem);
font-weight: 700;
letter-spacing: -0.02em;
color: #ffffff;
/* sombra sutil dupla: contraste crocante + leve difusão */
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72), 0 2px 20px rgba(0, 0, 0, 0.42);
transition: opacity 900ms cubic-bezier(0.65, 0, 0.35, 1);
}
.hero__wordticker.no-anim .hero__wordticker-track,
.hero__wordticker.no-anim .hero__word span { transition: none !important; }
/* ==================================================================
MARQUEE
================================================================== */
.marquee {
--gap: 14px;
position: relative;
margin-top: clamp(48px, 6vw, 80px);
padding-block: 22px;
border-top: 1px solid var(--surface-2);
border-bottom: 1px solid var(--surface-2);
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__label {
display: block;
text-align: center;
font-size: var(--fs-sm);
color: var(--surface-fg-4);
margin-bottom: 18px;
}
.marquee__track {
display: flex;
gap: var(--gap);
width: max-content;
animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 18px;
border-radius: var(--r-pill);
background: var(--surface-1);
border: 1px solid var(--surface-2);
color: var(--surface-fg-1);
font-size: 0.9rem;
white-space: nowrap;
}
.marquee__item::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: var(--primary-0);
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - (var(--gap) / 2))); }
}
/* ==================================================================
CARDS — grid de recursos (bento)
================================================================== */
.bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
margin-top: clamp(36px, 5vw, 60px);
}
.feature-card {
grid-column: span 2;
display: flex;
flex-direction: column;
gap: 12px;
padding: 28px;
border-radius: var(--r-lg);
background: var(--surface-1);
border: 1px solid var(--surface-2);
transition: border-color var(--t), transform var(--t) var(--ease), background var(--t);
}
.feature-card:hover {
border-color: var(--surface-4);
transform: translateY(-4px);
background: var(--surface-2);
}
.feature-card--wide { grid-column: span 3; }
.feature-card__icon {
display: grid; place-items: center;
width: 46px; height: 46px;
border-radius: 12px;
background: var(--primary-2);
color: var(--primary-0);
margin-bottom: 6px;
}
.feature-card__icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 1.2rem; color: var(--surface-fg-0); }
.feature-card p { color: var(--surface-fg-2); font-weight: 300; font-size: 0.95rem; }
/* ==================================================================
FOLD 2 — Bento "tudo centralizado"
================================================================== */
.fold2 { background: #fafafa; }
.fold2__head {
display: flex;
align-items: center; /* botão alinhado ao centro do texto */
justify-content: space-between;
gap: clamp(24px, 4vw, 56px);
margin-bottom: clamp(32px, 4.5vw, 52px);
}
.fold2__head-txt { max-width: 600px; }
.fold2 .h2 {
color: var(--mkt-fg-0);
font-size: clamp(1.5rem, 2.6vw, 2.05rem);
line-height: 1.2;
letter-spacing: -0.02em;
}
.fold2__sub {
margin-top: 14px;
font-size: 1.05rem;
font-weight: 400;
line-height: 1.5;
color: var(--mkt-fg-1);
opacity: 0.72;
max-width: 500px;
}
.fold2__cta { flex: 0 0 auto; }
/* Cabeçalho centralizado (design Figma: título + subtítulo, sem botão) */
.fold2__head--center {
flex-direction: column;
align-items: center;
text-align: center;
gap: 13px;
}
.fold2__head--center .fold2__sub {
margin: 0 auto;
max-width: 600px;
}
.bento2 {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
grid-template-areas:
"menu menu pedidos pedidos pedidos pedidos"
"menu menu robo robo mkt mkt";
}
.bcard--menu { grid-area: menu; }
.bcard--pedidos { grid-area: pedidos; }
.bcard--robo { grid-area: robo; }
.bcard--mkt { grid-area: mkt; }
/* Card base */
.bcard {
position: relative;
overflow: hidden;
border-radius: 20px;
padding: 28px;
display: flex;
flex-direction: column;
min-width: 0;
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.bcard:hover { transform: translateY(-4px); }
.bcard__tag {
display: inline-block;
width: fit-content;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-text);
margin-bottom: 12px;
}
.bcard__tag--dark { color: var(--primary-0); }
.bcard__title {
font-size: clamp(1.2rem, 1.6vw, 1.5rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.14;
margin-bottom: 10px;
}
.bcard__desc {
font-size: 0.95rem;
font-weight: 300;
line-height: 1.5;
max-width: 42ch;
}
/* Variantes de fundo */
.bcard--light { background: #ffffff; color: var(--mkt-fg-0); box-shadow: 0 1px 2px rgba(16,16,16,0.05); }
.bcard--light .bcard__desc { color: var(--mkt-fg-1); opacity: 0.8; }
.bcard--light:hover { box-shadow: var(--shadow-md); }
.bcard--menu {
min-height: 520px;
justify-content: flex-end;
padding: clamp(28px, 3vw, 36px);
background:
linear-gradient(180deg,
rgba(0, 6, 18, 0.10) 0%,
rgba(0, 6, 18, 0.18) 34%,
rgba(0, 6, 18, 0.58) 64%,
rgba(0, 6, 18, 0.88) 84%,
#000612 100%),
radial-gradient(90% 78% at 50% 8%, rgba(0, 226, 231, 0.12) 0%, rgba(0, 6, 18, 0) 64%),
url("../../bento-cardapio.webp") no-repeat center top;
background-size: cover;
background-color: #000612;
}
.bcard--menu .bcard__title,
.bcard--menu .bcard__desc {
position: relative;
z-index: 1;
color: #ffffff;
}
.bcard--menu .bcard__title {
max-width: 11ch;
font-size: clamp(1.55rem, 2.5vw, 2rem);
line-height: 1.06;
letter-spacing: -0.025em;
}
.bcard--menu .bcard__desc {
max-width: 31ch;
margin-top: 8px;
font-size: clamp(0.96rem, 1.2vw, 1.05rem);
line-height: 1.52;
opacity: 0.85;
}
.bcard--dark {
background: radial-gradient(120% 150% at 100% 0%, #0b1524 0%, #050f1c 55%, #000612 100%);
color: #fff;
}
.bcard--dark .bcard__desc { color: rgba(240,252,252,0.72); }
.bcard--teal {
background:
radial-gradient(100% 130% at 0% 0%, rgba(0,226,231,0.22), transparent 55%),
linear-gradient(160deg, #06131f, #030d18 60%, #000612);
color: #fff;
}
.bcard--teal .bcard__desc { color: rgba(230,255,255,0.8); }
/* Card Gestor de Pedidos (dashboard sangrando) */
.bcard--pedidos { flex-direction: row; align-items: stretch; gap: 0; padding: 0; min-height: 300px; }
.bcard--pedidos .bcard__body { flex: 0 0 42%; padding: 30px; align-self: center; }
.bcard__dash { position: relative; flex: 1 1 58%; overflow: hidden; min-width: 0; }
.bcard__dash img {
position: absolute; left: 24px; top: 28px; width: 112%; max-width: none;
border-radius: 12px 0 0 0;
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
/* Card Robô (mock de chat) */
.chat-mock { margin-top: auto; padding-top: 20px; display: grid; gap: 8px; }
.chat-mock span {
max-width: 82%; padding: 10px 14px; border-radius: 14px;
font-size: 0.85rem; line-height: 1.35;
}
.chat-mock__in { justify-self: start; background: rgba(255,255,255,0.10); color: #fff; border-bottom-left-radius: 4px; }
.chat-mock__out { justify-self: end; background: var(--primary-0); color: var(--primary-fg); border-bottom-right-radius: 4px; font-weight: 500; }
/* Card Marketing (foto de fundo cobrindo o card + texto embaixo — design Figma) */
.bcard--mkt {
min-height: 340px;
justify-content: flex-end;
color: #fff;
background:
linear-gradient(178deg, rgba(1, 3, 15, 0) 36%, rgba(0, 0, 0, 0.92) 73%),
url("../../bento-marketing.webp") no-repeat center center;
background-size: cover;
}
.bcard--mkt .bcard__tag,
.bcard--mkt .bcard__title,
.bcard--mkt .bcard__desc {
position: relative;
z-index: 1;
}
.bcard--mkt .bcard__desc { color: rgba(240, 252, 252, 0.78); }
/* Foto genérica (usada pelo card PDV) */
.bcard__photo { position: relative; margin-top: auto; padding-top: 20px; }
.bcard__photo img { width: 100%; height: 150px; object-fit: cover; border-radius: 14px; display: block; }
/* Card PDV (largura total, horizontal) */
.bcard--pdv {
flex-direction: row; align-items: stretch; gap: 0;
margin-top: 16px; padding: 0;
}
.bcard--pdv .bcard__body { flex: 1 1 50%; padding: clamp(30px, 4vw, 48px); align-self: center; }
.bcard__cta { margin-top: 22px; }
.bcard__photo--pdv { flex: 1 1 50%; margin: 0; padding: 0; }
.bcard__photo--pdv img { width: 100%; height: 100%; min-height: 280px; border-radius: 0; }
/* Responsivo */
@media (max-width: 900px) {
.fold2__head { flex-direction: column; align-items: center; text-align: center; }
.bento2 {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"menu menu"
"pedidos pedidos"
"robo mkt";
}
.bcard--pedidos { flex-direction: column; padding: 28px; min-height: 0; }
.bcard--pedidos .bcard__body { flex: none; padding: 0 0 20px; }
.bcard__dash { min-height: 240px; border-radius: 14px; }
.bcard__dash img { position: relative; left: 0; top: 0; width: 100%; border-radius: 14px; }
}
@media (max-width: 620px) {
.bento2 { grid-template-columns: 1fr; grid-template-areas: "menu" "pedidos" "robo" "mkt"; }
.bcard--pdv { flex-direction: column; }
.bcard--pdv .bcard__body { flex: none; }
.bcard__photo--pdv img { min-height: 200px; }
}
/* ==================================================================
SPLIT (texto + visual)
================================================================== */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.split--reverse .split__visual { order: -1; }
.split__list { margin-top: 26px; display: grid; gap: 14px; }
.split__list li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 1rem;
}
.check {
flex: 0 0 auto;
display: grid; place-items: center;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--mkt-primary-0);
color: #fff;
}
.world-dark .check { background: var(--primary-0); }
.check svg { width: 13px; height: 13px; }
.visual-frame {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid var(--mkt-border-soft);
background: linear-gradient(160deg, #ffffff, #ececec);
box-shadow: var(--shadow-lg);
aspect-ratio: 4 / 3;
}
.world-dark .visual-frame {
border-color: var(--surface-2);
background: linear-gradient(160deg, #0a1220, #000612);
box-shadow: var(--shadow-dark);
}
.visual-frame__placeholder {
position: absolute; inset: 0;
display: grid; place-items: center;
color: var(--surface-fg-4);
font-size: 0.85rem;
gap: 10px;
text-align: center;
}
/* App mockup — janela dark */
.mock-window {
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--surface-2);
background: var(--surface-1);
box-shadow: var(--shadow-dark);
}
.mock-window__bar {
display: flex; align-items: center; gap: 7px;
padding: 12px 16px;
border-bottom: 1px solid var(--surface-2);
background: var(--surface-0);
}
.mock-window__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-3); }
.mock-window__body { padding: 22px; display: grid; gap: 12px; }
.mock-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-radius: var(--r-md);
background: var(--surface-2);
color: var(--surface-fg-1);
font-size: 0.9rem;
}
.mock-row span.pill {
font-size: var(--fs-xs); font-weight: 600;
padding: 4px 10px; border-radius: var(--r-pill);
background: var(--primary-2); color: var(--primary-0);
}
/* ==================================================================
SEGMENTOS (chips grandes)
================================================================== */
.segments {
display: flex; flex-wrap: wrap; gap: 14px;
margin-top: 40px;
}
.segment {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-radius: var(--r-pill);
border: 1px solid var(--mkt-border);
background: transparent;
color: var(--mkt-fg-0);
font-weight: 600;
font-size: 1rem;
transition: background var(--t), color var(--t), transform var(--t-fast) var(--ease);
}
.segment:hover {
background: var(--mkt-primary-0);
color: #fff;
transform: translateY(-2px);
}
.segment span { font-size: 1.15rem; }
/* ---- Segmentos: carrossel (marquee de imagens) ---- */
.segmentos {
border-top: 0;
overflow: hidden;
background:
radial-gradient(80% 70% at 50% 0%, rgba(0, 226, 231, 0.1), transparent 58%),
#000612;
color: #fff;
}
.segmentos .h2 { color: #fff; }
.segmentos .lead {
color: var(--primary-0);
opacity: 0.78;
}
.seg-marquee {
position: relative;
margin-top: clamp(32px, 4vw, 56px);
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.seg-marquee__track {
display: flex;
gap: 24px;
width: max-content;
padding-inline: 12px;
animation: segMarquee 48s linear infinite;
}
.seg-marquee:hover .seg-marquee__track { animation-play-state: paused; }
.seg-card {
position: relative;
flex: 0 0 auto;
width: clamp(258px, 24vw, 320px);
aspect-ratio: 4 / 3;
margin: 0;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 12px 30px rgba(0, 6, 18, 0.12);
}
.seg-card img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.7s var(--ease);
}
.seg-card:hover img { transform: scale(1.1); }
.seg-card::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0, 6, 18, 0.82), rgba(0, 6, 18, 0.2) 40%, transparent 70%);
pointer-events: none;
}
.seg-card figcaption {
position: absolute; left: 0; bottom: 0;
padding: 22px;
z-index: 1;
color: #fff;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.01em;
}
@keyframes segMarquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - 12px)); }
}
@media (prefers-reduced-motion: reduce) {
.seg-marquee__track { animation: none; }
}
/* ==================================================================
LISTA DE RECURSOS (grid checks)
================================================================== */
.resource-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 40px;
}
.resource-item {
display: flex; align-items: center; gap: 12px;
padding: 18px 20px;
border-radius: var(--r-md);
background: #fff;
border: 1px solid var(--mkt-border-soft);
font-size: 0.95rem;
transition: border-color var(--t), transform var(--t-fast) var(--ease);
}
.resource-item:hover { border-color: var(--mkt-border); transform: translateY(-2px); }
/* ==================================================================
BENEFÍCIO (faixa destaque)
================================================================== */
.banner {
border-radius: var(--r-xl);
background: var(--mkt-primary-0);
color: #fff;
padding: clamp(40px, 6vw, 72px);
text-align: center;
}
.banner h2 { max-width: 760px; margin-inline: auto; color: #fff; }
.banner p { max-width: 620px; margin: 20px auto 0; font-weight: 300; opacity: 0.85; }
/* ==================================================================
PLANOS
================================================================== */
.plans {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
max-width: 1020px;
margin: 56px auto 0;
align-items: stretch;
}
.plan {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--r-lg);
border: 1px solid var(--surface-2);
background: var(--surface-1);
color: var(--surface-fg-0);
}
.plan__head {
padding: 28px 26px 24px;
border-bottom: 1px solid var(--surface-2);
}
.plan__name { font-size: 1.25rem; margin-bottom: 6px; }
.plan__desc { color: var(--surface-fg-3); font-weight: 300; font-size: 0.92rem; min-height: 2.7em; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.plan__price b { font-size: 2.3rem; font-weight: 600; letter-spacing: -0.03em; }
.plan__price span { color: var(--surface-fg-3); }
.plan__list { flex: 1; display: grid; gap: 12px; align-content: start; padding: 24px 26px; }
.plan__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.93rem; font-weight: 300; color: var(--surface-fg-1); }
.plan__list .check { width: 20px; height: 20px; color: var(--primary-fg); }
.plan__list .check svg { width: 11px; height: 11px; }
.plan__foot {
margin-top: auto;
padding: 20px 26px 26px;
border-top: 1px solid var(--surface-2);
}
/* Card em destaque */
.plan--featured {
border-color: rgba(0, 226, 231, 0.45);
box-shadow: 0 24px 70px -30px rgba(0, 226, 231, 0.35);
}
.plan__badge {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
z-index: 2;
padding: 6px 16px; border-radius: var(--r-pill);
background: var(--primary-0); color: var(--primary-fg);
font-size: var(--fs-xs); font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
white-space: nowrap;
}
/* Rastro de luz percorrendo a borda do card em destaque */
@property --trail-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
.plan--featured::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1.5px;
background: conic-gradient(from var(--trail-angle, 0deg),
transparent 0deg, transparent 290deg,
rgba(0, 226, 231, 0.85) 340deg, #ffffff 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
animation: plan-trail 5s linear infinite;
}
@keyframes plan-trail {
to { --trail-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.plan--featured::before { animation: none; }
}
@media (max-width: 960px) {
.plans {
grid-template-columns: 1fr;
max-width: 440px;
gap: 30px;
margin-top: 48px;
}
.plan--featured { order: -1; }
}
/* ==================================================================
FAQ (accordion)
================================================================== */
.faq { max-width: 780px; margin: 44px auto 0; display: grid; gap: 12px; }
.faq__item {
border: 1px solid var(--mkt-border-soft);
border-radius: var(--r-md);
background: #fff;
overflow: hidden;
transition: border-color var(--t);
}
.faq__item[open] { border-color: var(--mkt-border); }
.faq__q {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 20px 24px;
font-weight: 600;
font-size: 1.02rem;
list-style: none;
cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q .ico {
flex: 0 0 auto;
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--mkt-primary-2);
color: var(--mkt-primary-0);
transition: transform var(--t) var(--ease);
}
.faq__item[open] .faq__q .ico { transform: rotate(45deg); }
.faq__a { padding: 0 24px 22px; color: var(--mkt-fg-1); font-weight: 300; opacity: 0.9; }
/* ==================================================================
FOOTER
================================================================== */
.footer {
background: var(--surface-0);
color: var(--surface-fg-2);
padding-block: 56px 40px;
}
.footer__top {
display: flex; flex-wrap: wrap; gap: 24px;
align-items: center; justify-content: space-between;
padding-bottom: 28px;
border-bottom: 1px solid var(--surface-2);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__links a { font-size: 0.9rem; color: var(--surface-fg-3); transition: color var(--t-fast); }
.footer__links a:hover { color: var(--surface-fg-0); }
.footer__bottom {
margin-top: 24px;
font-size: var(--fs-sm);
color: var(--surface-fg-4);
display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}
/* ==================================================================
STEPS (passo a passo — planilha)
================================================================== */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 46px; }
.step {
display: flex; gap: 18px;
padding: 24px;
border-radius: var(--r-lg);
background: #fff;
border: 1px solid var(--mkt-border-soft);
}
.step__num {
flex: 0 0 auto;
display: grid; place-items: center;
width: 40px; height: 40px;
border-radius: 12px;
background: var(--mkt-primary-0); color: #fff;
font-weight: 600;
}
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { font-size: 0.92rem; color: var(--mkt-fg-1); font-weight: 300; opacity: 0.9; }
/* ==================================================================
OFERTA / PREÇO EM DESTAQUE
================================================================== */
.offer {
max-width: 560px; margin: 44px auto 0;
border-radius: var(--r-xl);
background: #fff;
border: 1px solid var(--mkt-border-soft);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.offer__head { background: var(--mkt-primary-0); color: #fff; padding: 22px 32px; text-align: center; font-weight: 600; }
.offer__body { padding: 32px; }
.offer__list { display: grid; gap: 14px; margin-bottom: 26px; }
.offer__list li { display: flex; gap: 12px; align-items: flex-start; }
.offer__list .bonus { color: var(--primary-0); font-weight: 600; }
.price-box { text-align: center; padding: 22px 0; border-top: 1px dashed var(--mkt-border-soft); border-bottom: 1px dashed var(--mkt-border-soft); margin-bottom: 24px; }
.price-box .big { font-size: 2.8rem; font-weight: 600; letter-spacing: -0.03em; color: var(--mkt-primary-0); }
.price-box .alt { color: var(--mkt-fg-1); opacity: 0.75; font-size: 0.95rem; }
/* Oferta no mundo dark (padrão: preço = fundo escuro) */
.world-dark .offer { background: var(--surface-1); border-color: var(--surface-2); box-shadow: 0 24px 70px -30px rgba(0, 226, 231, 0.25); }
.world-dark .offer__head { background: var(--primary-0); color: var(--primary-fg); }
.world-dark .price-box { border-color: var(--surface-2); }
.world-dark .price-box .big { color: var(--surface-fg-0); }
.world-dark .price-box .alt { color: var(--surface-fg-2); opacity: 1; }
/* Selo garantia */
.guarantee {
display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
max-width: 720px; margin: 40px auto 0;
padding: 30px;
border-radius: var(--r-xl);
border: 1px solid var(--mkt-border);
background: var(--mkt-primary-2);
}
.guarantee__seal {
flex: 0 0 auto;
display: grid; place-items: center;
width: 92px; height: 92px; border-radius: 50%;
background: var(--mkt-primary-0); color: #fff;
text-align: center; font-weight: 600; font-size: 0.8rem; line-height: 1.2;
}
/* ==================================================================
FORMULÁRIOS
================================================================== */
.form-card {
max-width: 560px; margin-inline: auto;
background: #fff;
border: 1px solid var(--mkt-border-soft);
border-radius: var(--r-xl);
box-shadow: var(--shadow-md);
padding: clamp(28px, 4vw, 44px);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }
.field input,
.field select,
.field textarea {
width: 100%;
padding: 14px 16px;
border-radius: var(--r-md);
border: 1px solid var(--mkt-border-soft);
background: #fafafa;
color: var(--mkt-fg-0);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--mkt-primary-0);
box-shadow: 0 0 0 4px var(--mkt-primary-2);
}
.radio-row { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-pill {
position: relative;
}
.radio-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-pill span {
display: inline-block;
padding: 12px 20px;
border-radius: var(--r-pill);
border: 1px solid var(--mkt-border-soft);
background: #fafafa;
font-size: 0.92rem;
transition: all var(--t-fast);
}
.radio-pill input:checked + span {
background: var(--mkt-primary-0);
color: #fff;
border-color: var(--mkt-primary-0);
}
/* Estados de sucesso */
.success {
max-width: 520px; margin-inline: auto; text-align: center;
}
.success__icon {
display: grid; place-items: center;
width: 76px; height: 76px; border-radius: 50%;
background: var(--mkt-primary-0); color: #fff;
margin: 0 auto 24px;
}
.success__icon svg { width: 34px; height: 34px; }
.is-hidden { display: none !important; }
/* ==================================================================
MODAL
================================================================== */
.modal {
position: fixed; inset: 0; z-index: 100;
display: none;
align-items: center; justify-content: center;
padding: 20px;
}
.modal.is-open { display: flex; }
.modal__overlay {
position: absolute; inset: 0;
background: rgba(0, 6, 18, 0.6);
backdrop-filter: blur(4px);
}
.modal__dialog {
position: relative;
width: 100%; max-width: 560px;
max-height: 90vh; overflow-y: auto;
background: #fff;
border-radius: var(--r-xl);
padding: clamp(28px, 4vw, 40px);
box-shadow: var(--shadow-lg);
animation: modalIn 0.3s var(--ease);
}
@keyframes modalIn {
from { opacity: 0; transform: translateY(20px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.modal__close {
position: absolute; top: 16px; right: 16px;
width: 36px; height: 36px; border-radius: 50%;
display: grid; place-items: center;
background: var(--mkt-primary-2); color: var(--mkt-primary-0);
}
.modal__close svg { width: 18px; height: 18px; }
/* Popup escuro (cupom da LP planilha) */
.modal__dialog--dark {
background: var(--surface-1);
color: var(--surface-fg-0);
border: 1px solid var(--surface-2);
text-align: center;
}
.modal__dialog--dark .modal__close {
background: rgba(255, 255, 255, 0.08);
color: var(--surface-fg-1);
}
.coupon__badge {
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-0);
margin-bottom: 12px;
}
.coupon__desc {
margin-top: 12px;
color: var(--surface-fg-2);
}
.coupon__desc b { color: var(--surface-fg-0); font-weight: 600; }
.coupon__code {
margin: 24px auto;
padding: 14px 20px;
max-width: 320px;
border: 2px dashed var(--primary-0);
border-radius: var(--r-md);
background: var(--primary-2);
font-size: 1.55rem;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--primary-0);
}
.coupon__hint {
margin-top: 14px;
font-size: 0.85rem;
color: var(--surface-fg-3);
}
/* ==================================================================
VÍDEO placeholder
================================================================== */
.video-frame {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--surface-1);
border: 1px solid var(--surface-2);
display: grid; place-items: center;
cursor: pointer;
}
.video-frame__play {
width: 74px; height: 74px; border-radius: 50%;
background: var(--primary-0); color: #fff;
display: grid; place-items: center;
box-shadow: 0 10px 30px rgba(0,226,231,0.32);
transition: transform var(--t) var(--ease);
}
.video-frame:hover .video-frame__play { transform: scale(1.08); }
/* Variante stories — vídeo vertical 9:16 (depoimentos gravados no celular) */
.video-frame--story {
aspect-ratio: 9 / 16;
width: 100%;
max-width: 340px;
margin-inline: auto;
border-radius: var(--r-lg);
}
.video-frame--story .video-frame__play { width: 60px; height: 60px; }
/* ==================================================================
LP PLANILHA — mockup do hero, galeria de telas e provas sociais
================================================================== */
.hero__product {
position: relative;
z-index: 1;
max-width: 640px;
margin: 0 auto 40px;
}
.hero__product img {
width: 100%;
height: auto;
display: block;
border-radius: var(--r-lg);
border: 1px solid var(--surface-2);
box-shadow: var(--shadow-dark);
}
.hero__price-note {
margin-top: 26px;
font-size: 1.08rem;
font-weight: 300;
color: var(--surface-fg-2);
}
.hero__price-note b {
font-weight: 600;
color: var(--primary-0);
}
.sheet-gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 48px;
}
.sheet-shot {
border: 1px solid var(--mkt-border-soft);
border-radius: var(--r-lg);
overflow: hidden;
background: #fff;
box-shadow: var(--shadow-sm);
}
.sheet-shot img { width: 100%; height: auto; display: block; }
.sheet-shot figcaption {
padding: 12px 16px;
font-size: 0.9rem;
font-weight: 500;
color: var(--mkt-fg-1);
border-top: 1px solid var(--mkt-border-soft);
}
.proof-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
max-width: 980px;
margin: 44px auto 0;
align-items: start;
}
.proof-card {
border: 1px solid var(--mkt-border-soft);
border-radius: var(--r-lg);
overflow: hidden;
background: #fff;
box-shadow: var(--shadow-sm);
}
.proof-card img { width: 100%; height: auto; display: block; }
@media (max-width: 940px) {
.proof-grid { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 720px) {
.sheet-gallery { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
.hero__product { margin-bottom: 30px; }
}
/* ==================================================================
REVEAL ON SCROLL
================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* ==================================================================
RESPONSIVO
================================================================== */
@media (max-width: 940px) {
.nav__menu, .nav__login { display: none; }
.nav__toggle { display: grid; place-items: center; }
.nav--hero-dark .nav__menu {
transform: none;
}
.nav.is-open .nav__menu {
display: flex; flex-direction: column; align-items: flex-start;
position: absolute; top: 68px; left: 0; right: 0;
background: var(--surface-0);
border-bottom: 1px solid var(--surface-2);
padding: 20px var(--gutter); gap: 16px; margin: 0;
}
.nav--hero-dark.is-open .nav__inner {
overflow: visible;
border-radius: 24px 24px 0 0;
}
.nav.is-open .nav__login { display: inline-block; }
.nav--hero-dark.is-open .nav__login { display: none; }
.split { grid-template-columns: 1fr; }
.split--reverse .split__visual { order: 0; }
.feature-card, .feature-card--wide { grid-column: span 3; }
.resource-grid { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
body.home {
--fold-full: clamp(800px, 96svh, 830px);
}
:root {
--gutter: 18px;
--section-y: clamp(56px, 14vw, 76px);
}
.announce {
padding: 8px 14px;
font-size: 0.82rem;
line-height: 1.35;
}
.nav.nav--hero-dark {
top: 33px;
}
.nav__inner { gap: 8px; padding-inline: 14px; }
.nav--hero-dark .nav__inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
column-gap: 6px;
height: 72px;
}
.nav--hero-dark.is-open .nav__menu { top: 72px; }
.brand { gap: 8px; }
.brand__logo { height: 24px; }
.nav--hero-dark .nav__actions {
display: none;
}
.nav__toggle {
display: grid !important;
grid-column: 3;
justify-self: end;
place-items: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
.nav__toggle svg {
width: 21px;
height: 21px;
margin: 0;
}
.nav__actions .btn {
gap: 8px;
padding: 11px 12px;
font-size: 0.9rem;
}
.nav--hero-dark .nav__actions .btn--primary {
border-radius: 11px;
min-height: 38px;
width: 92px;
min-width: 0;
padding: 9px 10px;
font-size: 0;
line-height: 1.1;
white-space: nowrap;
}
.nav--hero-dark .nav__actions .btn--primary::before {
content: "Teste gr\00E1tis";
font-size: 0.78rem;
}
.nav--hero-dark .nav__actions .btn--arrow::after {
display: none;
}
.nav__actions .btn--arrow::after { width: 20px; height: 20px; }
.hero--split { padding-bottom: 0; }
.hero--dark-bg {
min-height: var(--fold-full);
padding-top: clamp(100px, 16vh, 122px);
padding-bottom: clamp(82px, 11vh, 98px);
background-size: cover, clamp(620px, 184vw, 750px) auto;
background-position: center top, 53% clamp(88px, 11.5vh, 112px);
}
.hero__pills {
display: flex;
bottom: clamp(8px, 1.3vh, 14px);
padding-inline: 0;
}
.hero__pills-track {
gap: 8px;
padding-inline: 8px;
animation-duration: 26s;
}
.hero__pill {
padding: 7px 12px;
gap: 6px;
font-size: clamp(0.62rem, 2.8vw, 0.7rem);
line-height: 1.1;
color: rgba(245, 255, 255, 0.92);
background: rgba(0, 6, 18, 0.44);
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
backdrop-filter: blur(10px) saturate(132%);
-webkit-backdrop-filter: blur(10px) saturate(132%);
}
.hero__pill::before {
width: 6px;
height: 6px;
}
.hero__center {
max-width: 340px;
padding-inline: var(--gutter);
}
.hero__title { font-size: clamp(2.06rem, 8.55vw, 2.18rem); }
.hero--dark-bg .hero__title {
max-width: 100%;
font-size: clamp(1.54rem, 6.55vw, 1.72rem);
line-height: 1.08;
letter-spacing: 0;
overflow-wrap: break-word;
text-wrap: auto;
}
.hero--dark-bg .hero__line {
display: block;
}
.hero--dark-bg .hero__line--desktop {
display: none;
}
.hero--dark-bg .hero__line--mobile {
display: block;
}
.hero--dark-bg .hero__sub {
max-width: 310px;
margin-top: 14px;
font-size: 0.98rem;
line-height: 1.44;
overflow-wrap: break-word;
}
.hero--dark-bg .hero__cta-row {
margin-top: 20px;
gap: 12px;
}
.hero--dark-bg .hero__cta-row .btn {
width: 100%;
max-width: 300px;
min-height: 52px;
padding-inline: 18px;
text-align: center;
white-space: normal;
}
.hero--dark-bg .hero__note {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: start;
justify-content: center;
column-gap: 8px;
max-width: 300px;
font-size: 0.86rem;
line-height: 1.34;
text-align: left;
}
.hero__note-ic {
width: 18px;
height: 18px;
margin-top: 1px;
}
.hero__grid { gap: 24px; }
.hero__media { max-width: 320px; }
#centralizado { padding-top: clamp(34px, 9vw, 48px); }
.fold2__head {
gap: 18px;
margin-bottom: 24px;
}
.fold2__head-txt,
.section-head {
max-width: 100%;
}
.fold2__cta {
width: 100%;
}
.bento2 { gap: 14px; }
.bcard {
border-radius: 16px;
padding: 22px;
}
.bcard--menu {
min-height: 450px;
padding: 26px 22px;
}
.bcard--menu::before {
inset: 18px 18px auto;
height: 230px;
border-radius: 14px;
}
.bcard--menu .bcard__title {
max-width: 12ch;
font-size: clamp(1.55rem, 7.2vw, 1.86rem);
line-height: 1.04;
}
.bcard--menu .bcard__desc {
max-width: 30ch;
margin-top: 10px;
font-size: 0.96rem;
}
.bcard__title {
font-size: clamp(1.15rem, 6vw, 1.35rem);
letter-spacing: 0;
}
.bcard--pedidos { padding: 22px; }
.bcard__dash { min-height: 0; }
.bcard__dash img {
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: left top;
}
.bcard--pdv .bcard__body { padding: 22px; }
.bcard__photo--pdv img {
min-height: 180px;
border-radius: 0 0 16px 16px;
}
.split { gap: 24px; }
.mock-window { border-radius: 16px; }
.mock-window__body {
padding: 14px;
gap: 10px;
}
.mock-row {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 13px;
font-size: 0.86rem;
}
.segments {
gap: 10px;
margin-top: 28px;
}
.segment {
width: 100%;
padding: 13px 16px;
}
.resource-item {
align-items: flex-start;
padding: 15px 16px;
}
.banner {
border-radius: 16px;
padding: 32px 20px;
}
.plan__head { padding: 26px 20px 22px; }
.plan__list { padding: 22px 20px; }
.plan__foot { padding: 18px 20px 22px; }
.faq { margin-top: 28px; }
.faq__q {
align-items: flex-start;
padding: 16px 18px;
font-size: 0.96rem;
}
.faq__a { padding: 0 18px 18px; }
/* LPs — hero, oferta, garantia, passos, formulários */
.hero__cta .btn { width: 100%; max-width: 340px; }
.step { padding: 18px; gap: 14px; }
.step__num { width: 34px; height: 34px; border-radius: 10px; }
.offer__head { padding: 16px 20px; font-size: 0.95rem; }
.offer__body { padding: 24px 20px; }
.price-box .big { font-size: 2.3rem; }
.guarantee {
flex-direction: column;
align-items: center;
text-align: center;
padding: 26px 20px;
gap: 18px;
}
.modal { padding: 12px; }
.modal__dialog {
max-height: 92dvh;
border-radius: 18px;
padding: 26px 18px 22px;
}
.video-frame__play { width: 58px; height: 58px; }
.video-frame__play svg { width: 22px; height: 22px; }
.sheet-shot figcaption { padding: 10px 14px; font-size: 0.85rem; }
.bento { grid-template-columns: 1fr; }
.feature-card, .feature-card--wide { grid-column: span 1; }
.resource-grid { grid-template-columns: 1fr; }
.footer__top { flex-direction: column; align-items: flex-start; }
.footer__links { gap: 12px 18px; }
.footer__bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; }
.reveal { opacity: 1; transform: none; }
* { scroll-behavior: auto; }
}