/* src/styles/00-tokens.css */
/* ============================================================
* Tolky — Colors & Type
* Source: Figma "exemplo-figma.fig" + uploaded brand fonts.
* ============================================================ */
/* ---------------------------------------------------------------
* Webfont — Georama (variable-weight, 9 cuts shipped in /fonts)
* Full Georama family also includes Condensed / Expanded /
* SemiCondensed / etc. variants in /uploads/ if needed.
* --------------------------------------------------------------- */
@font-face {
font-family: "Georama";
font-weight: 300;
font-style: normal;
font-display: swap;
src: url("./fonts/Georama-Light.ttf") format("truetype");
}
@font-face {
font-family: "Georama";
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("./fonts/Georama-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Georama";
font-weight: 400;
font-style: italic;
font-display: swap;
src: url("./fonts/Georama-Italic.ttf") format("truetype");
}
@font-face {
font-family: "Georama";
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("./fonts/Georama-Medium.ttf") format("truetype");
}
@font-face {
font-family: "Georama";
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("./fonts/Georama-SemiBold.ttf") format("truetype");
}
@font-face {
font-family: "Georama";
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("./fonts/Georama-Bold.ttf") format("truetype");
}
@font-face {
font-family: "Georama";
font-weight: 700;
font-style: italic;
font-display: swap;
src: url("./fonts/Georama-BoldItalic.ttf") format("truetype");
}
@font-face {
font-family: "Georama";
font-weight: 900;
font-style: normal;
font-display: swap;
src: url("./fonts/Georama-Black.ttf") format("truetype");
}
:root {
/* ─── Colors ───────────────────────────────────────────────── */
/* Primary — periwinkle blue. The signature Tolky color. */
--tolky-blue: #506FFD; /* primary */
--tolky-blue-600: #425CC5; /* darker — used in logo glyph */
--tolky-blue-700: #304491; /* darkest blue tint */
--tolky-blue-300: #6F8AF6; /* mid */
--tolky-blue-200: #A7B6FE; /* lavender — speech-bubble dots */
--tolky-blue-100: #C4CEFE; /* lighter lavender */
--tolky-blue-050: #E2E7FF; /* palest lavender — soft surfaces */
/* Ink — deep navy. Used for body text & dark capsules. */
--tolky-ink-900: #0D1126; /* near-black ink */
--tolky-ink-800: #1F2C5D; /* heading ink */
--tolky-ink-700: #1E2A5E; /* primary heading */
/* Neutrals */
--tolky-text: #71717A; /* zinc — body copy on light bg */
--tolky-text-muted: #4D6A78; /* slate — captions, sub-labels */
--tolky-text-deep: #002B3E; /* deep teal-black — eyebrow labels */
--tolky-white: #FFFFFF;
--tolky-bg: #FFFFFF;
--tolky-bg-soft: #F7F8FB; /* off-white surface */
/* Semantic — surfaces */
--bg: var(--tolky-white);
--bg-invert: var(--tolky-blue); /* signature blue panels */
--bg-ink: var(--tolky-ink-900);
--surface-soft: var(--tolky-bg-soft);
--surface-tint: var(--tolky-blue-050);
--fg: var(--tolky-ink-700);
--fg-1: var(--tolky-ink-700);
--fg-2: var(--tolky-text);
--fg-3: var(--tolky-text-muted);
--fg-on-blue: var(--tolky-white);
--accent: var(--tolky-blue);
--accent-muted: var(--tolky-blue-200);
--accent-soft: var(--tolky-blue-050);
/* Highlight — título + box variam com o fundo (ver .tolky-bg--*) */
--headline-color: var(--tolky-ink-700);
--highlight-box: var(--tolky-blue-200); /* azul claro — fundo branco */
--highlight-text: var(--tolky-ink-700);
--highlight-pad: 0.1em; /* padding simétrico x/y do box atrás da palavra */
--border: #E5E7EF;
--border-strong: var(--tolky-blue-100);
/* ─── Status — SÓ para UI de produto (ver guides/product-ui.md § 2) ───
* Única exceção quente do sistema. São SEMÂNTICAS: significam estado, nunca
* decoram. Reservadas — jamais reutilizar como cor de série de gráfico ou de
* categoria. Sempre acompanhadas de ícone + label (cor nunca sozinha).
* PROIBIDAS em peça de marketing (post/slide/e-mail/vídeo): lá o sistema é
* monocromático azul, sem exceção.
*/
--ok: #22A06B; /* sucesso, conectado, entregue */
--warn: #F2A93B; /* atenção, degradado, pendente */
--danger: #E5484D; /* erro, falha, ação destrutiva */
/* ─── Type ────────────────────────────────────────────────── */
--font-sans: "Georama", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--font-display: "Georama", ui-sans-serif, system-ui, sans-serif;
--font-quote: "Georgia", "Times New Roman", serif; /* used for the giant “ glyph */
/* Type scale (deck-native — 1920×1080).
For app/web UI, prefer the smaller --text-* tokens. */
--display-xl: clamp(64px, 6vw, 102px); /* hero deck title */
--display-lg: clamp(48px, 5vw, 80px); /* slide section title */
--display-md: clamp(36px, 3.6vw, 56px); /* sub-display */
--headline: clamp(28px, 2.8vw, 44px);
--title: clamp(22px, 2.2vw, 32px);
--subtitle: clamp(18px, 1.6vw, 22px);
--body-lg: 20px;
--body: 16px;
--caption: 14px;
--eyebrow: 13px;
--text-xs: 12px;
--text-sm: 14px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 44px;
--text-5xl: 64px;
--text-6xl: 100px;
/* Weights */
--w-light: 300;
--w-regular: 400;
--w-medium: 500;
--w-semi: 600;
--w-bold: 700;
--w-black: 900;
/* Leading & tracking */
--leading-tight: 0.82; /* deck headlines — ajustado para denser */
--leading-snug: 0.95;
--leading-normal: 1.2; /* body — Figma uses 1.2 throughout */
--leading-relaxed: 1.4;
--tracking-tight: -0.01em;
--tracking-normal: 0;
/* ─── Layout safety ──────────────────────────── */
/* Respiro mínimo — todo entregável deve respeitar (ou superar) estes
valores. UI/UX: alinhamento consistente + espaçamento em tokens, nunca
colar conteúdo na borda do canvas. Ver CLAUDE.md § UI & UX. */
--safe-pad-x: 120px; /* margem horizontal mínima */
--safe-pad-y: 120px; /* margem vertical mínima */
--safe-pad-x-post: 80px; /* social posts (1080) */
--safe-pad-y-post: 80px;
/* ─── Radii / shadows / spacing ───────────────────────────── */
--r-xs: 4px;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--r-xl: 24px;
--r-2xl: 32px;
--r-bubble: 24px 24px 24px 6px; /* speech-bubble corner shape */
--shadow-sm: 0 1px 2px rgba(13, 17, 38, 0.06);
--shadow-md: 0 6px 18px rgba(30, 42, 94, 0.08);
--shadow-lg: 0 18px 48px rgba(30, 42, 94, 0.12);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
}
/* ─── Element defaults ─────────────────────────────────────── */
html, body {
font-family: var(--font-sans);
color: var(--fg-1);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, .h1 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--display-lg);
line-height: var(--leading-tight);
color: var(--fg-1);
letter-spacing: var(--tracking-tight);
margin: 0;
text-wrap: pretty;
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
word-break: normal;
}
h2, .h2 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--display-md);
line-height: var(--leading-tight);
color: var(--fg-1);
margin: 0;
text-wrap: pretty;
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
word-break: normal;
}
h3, .h3 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--headline);
line-height: var(--leading-snug);
color: var(--fg-1);
margin: 0;
}
h4, .h4 {
font-family: var(--font-sans);
font-weight: var(--w-semi);
font-size: var(--title);
line-height: var(--leading-snug);
color: var(--fg-1);
margin: 0;
}
h5, .h5 {
font-family: var(--font-sans);
font-weight: var(--w-semi);
font-size: var(--subtitle);
line-height: var(--leading-snug);
color: var(--fg-1);
margin: 0;
}
p, .p {
font-family: var(--font-sans);
font-weight: var(--w-regular);
font-size: var(--body);
line-height: var(--leading-normal);
color: var(--fg-2);
margin: 0 0 1em 0;
}
.eyebrow {
font-family: var(--font-sans);
font-weight: var(--w-medium);
font-size: var(--eyebrow);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-3);
}
.caption {
font-family: var(--font-sans);
font-weight: var(--w-medium);
font-size: var(--caption);
color: var(--fg-3);
line-height: var(--leading-normal);
}
small, .small {
font-size: var(--text-sm);
color: var(--fg-3);
}
code, .mono {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.9em;
background: var(--surface-soft);
padding: 2px 6px;
border-radius: var(--r-xs);
}
/* ============================================================
* Highlight signature — retângulo ATRÁS da palavra de destaque.
* Uma palavra por headline.
*
* PADDING: simétrico em x e y via --highlight-pad (inset no ::before).
* Não usar height fixo nem padding só horizontal no span — isso deixa o
* box maior em cima/baixo ou à esquerda/direita.
*
* EMPILHAMENTO: o box fica SEMPRE abaixo de toda tipografia (incl. linhas
* acima em headlines com
). O ::before usa z-index:-1.
* isolation:isolate SOMENTE no h1/h2/.headline — NUNCA no span .hl
* (isolation no .hl faz o box cobrir texto de linhas anteriores).
*
* Fundo branco → título ink, highlight box lavanda (#A7B6FE)
* Fundo azul claro → título branco, highlight box ink (#1E2A5E)
* Fundo azul escuro→ título branco, highlight box blue.500 (#506FFD)
* ============================================================ */
h1, h2, .h1, .h2, .tolky-headline, .headline {
isolation: isolate;
}
.tolky-highlight, .hl {
position: relative;
display: inline-block;
color: var(--highlight-text);
z-index: auto; /* nunca 0 nem valor numérico — ver brand-core § Highlight */
isolation: auto;
}
.tolky-highlight::before, .hl::before {
content: "";
position: absolute;
inset: calc(-1 * var(--highlight-pad));
background: var(--highlight-box);
border-radius: 0;
z-index: -1;
}
/* Contextos de fundo — aplicar no slide, section ou body */
.tolky-bg--white,
.tolky-slide {
--headline-color: var(--tolky-ink-700);
--highlight-box: var(--tolky-blue);
--highlight-text: var(--tolky-white);
}
.tolky-bg--blue-light,
.tolky-slide--blue {
--headline-color: var(--tolky-white);
--highlight-box: var(--tolky-ink-700);
--highlight-text: var(--tolky-white);
}
.tolky-bg--blue-dark,
.tolky-slide--ink {
--headline-color: var(--tolky-white);
--highlight-box: var(--tolky-blue);
--highlight-text: var(--tolky-white);
}
.tolky-headline { color: var(--headline-color); }
/* ============================================================
* Layout safety classes
* ============================================================ */
/* Conteúdo dentro de um slide ou post — garante respiro mínimo,
alinhamento previsível e impede texto de vazar para fora do canvas.
Usar em todo material novo; margens maiores que o mínimo são bem-vindas. */
.tolky-safe {
padding: var(--safe-pad-y) var(--safe-pad-x);
max-width: 100%;
overflow-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
box-sizing: border-box;
}
.tolky-safe--post {
padding: var(--safe-pad-y-post) var(--safe-pad-x-post);
}
/* Headline "display" para social posts e slides — line-height denso, hifenização,
sem palavras isoladas no fim da linha (text-wrap: balance). */
.tolky-display {
font-family: var(--font-display);
font-weight: var(--w-bold);
line-height: 0.82;
letter-spacing: -0.01em;
color: var(--fg-1);
margin: 0;
text-wrap: balance;
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
word-break: normal;
}
/* Slide-deck tokens (1920×1080). */
.tolky-slide {
width: 1920px;
height: 1080px;
background: var(--bg);
color: var(--fg-1);
font-family: var(--font-sans);
position: relative;
overflow: hidden;
}
.tolky-slide--blue {
background: var(--tolky-blue);
color: var(--headline-color);
}
.tolky-slide--ink {
background: var(--tolky-ink-900);
color: var(--headline-color);
}
/* src/styles/10-base.css */
/* Base compartilhada da landing. Tokens vêm de 00-tokens.css (cópia do tolky-design-system).
* Seções estilizam só dentro de .sec--; o que é reutilizável mora aqui. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--fg-2); overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
/* Regra de marca: nunca hifenizar nem quebrar palavra no meio (sobrescreve o hyphens:auto dos tokens). */
h1, h2, h3, h4, h5, p, li, dt, dd, a, span, button, label {
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: break-word;
}
h1, h2, h3 { text-wrap: balance; color: var(--headline-color, var(--fg-1)); }
p { text-wrap: pretty; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 960px) { .container { padding: 0 48px; } }
/* ─── Seções e fundos ─────────────────────────────────────────
* Cada fundo já ajusta título e highlight (tabela de brand-core). */
.sec { position: relative; padding: var(--space-8) 0; }
@media (min-width: 960px) { .sec { padding: 120px 0; } }
.sec--white { background: var(--tolky-white); --headline-color: var(--tolky-ink-700); --highlight-box: var(--tolky-blue); --highlight-text: var(--tolky-white); }
.sec--soft { background: var(--tolky-bg-soft); --headline-color: var(--tolky-ink-700); --highlight-box: var(--tolky-blue); --highlight-text: var(--tolky-white); }
/* Branco sobre #506FFD dá 4,17:1: texto pequeno no azul fica em branco puro e o mínimo possível. */
.sec--blue { background: var(--tolky-blue); color: var(--tolky-white); --headline-color: var(--tolky-white); --highlight-box: var(--tolky-ink-700); --highlight-text: var(--tolky-white); }
.sec--ink { background: var(--tolky-ink-900); color: rgba(255, 255, 255, 0.72); --headline-color: var(--tolky-white); --highlight-box: var(--tolky-blue); --highlight-text: var(--tolky-white); }
.sec--blue p, .sec--ink p { color: inherit; }
/* ─── Tipografia de landing ─────────────────────────────────── */
.display { font-weight: var(--w-bold); font-size: clamp(40px, 6.4vw, 88px); line-height: 0.92; letter-spacing: -0.02em; margin: 0; }
.title-lg { font-weight: var(--w-bold); font-size: clamp(32px, 4.4vw, 60px); line-height: 0.95; letter-spacing: -0.015em; margin: 0; }
.title-md { font-weight: var(--w-bold); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.05; margin: 0; }
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: var(--fg-2); margin: 0; max-width: 60ch; }
.sec--blue .lead, .sec--ink .lead { color: inherit; }
/* #506FFD sobre branco também dá 4,17:1: a eyebrow (texto pequeno) usa o azul 600. */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--space-5); color: var(--tolky-blue-600); font-weight: var(--w-semi); }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.sec--blue .eyebrow { color: var(--tolky-white); }
.sec--ink .eyebrow { color: var(--tolky-blue-200); }
.section-head { display: grid; gap: var(--space-5); margin-bottom: var(--space-8); max-width: 820px; }
/* ─── Botões ────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px; padding: 0 22px; border-radius: var(--r-md); border: 1px solid transparent;
font-weight: var(--w-semi); font-size: var(--text-md); text-decoration: none; cursor: pointer;
transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out, transform 120ms ease-out;
white-space: nowrap;
}
.btn:active { transform: scale(0.96); }
.btn .icon { width: 18px; height: 18px; }
.btn--primary { background: var(--tolky-blue); color: var(--tolky-white); }
.btn--primary:hover { background: var(--tolky-blue-600); }
.btn--ghost { background: transparent; color: var(--tolky-ink-700); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--tolky-blue); color: var(--tolky-blue); }
.btn--light { background: var(--tolky-white); color: var(--tolky-ink-700); }
.btn--light:hover { background: var(--tolky-blue-050); }
.btn--outline-light { background: transparent; color: var(--tolky-white); border-color: rgba(255, 255, 255, 0.4); }
.btn--outline-light:hover { border-color: var(--tolky-white); }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: var(--text-lg); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* ─── Chips e status (status só dentro de mocks de produto: ícone + label sempre) ─── */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: var(--w-semi); background: var(--tolky-blue-050); color: var(--tolky-blue-700); }
.chip .icon { width: 14px; height: 14px; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--w-semi); padding: 3px 8px; border-radius: var(--r-sm); }
.status .icon { width: 14px; height: 14px; }
.status--ok { color: #157A50; background: rgba(34, 160, 107, 0.12); }
.status--warn { color: #9A6212; background: rgba(242, 169, 59, 0.16); }
.status--danger { color: #B42328; background: rgba(229, 72, 77, 0.12); }
.status--info { color: var(--tolky-blue-700); background: var(--tolky-blue-050); }
/* ─── Moldura de mock de tela (UI de produto: elevação funcional permitida) ─── */
.mock {
position: relative; background: var(--tolky-white); color: var(--tolky-ink-700);
border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
overflow: hidden; font-size: var(--text-sm); line-height: 1.35; text-align: left;
}
.mock__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--tolky-bg-soft); }
.mock__dots { display: flex; gap: 6px; }
.mock__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--tolky-blue-100); }
.mock__url { flex: 1; height: 22px; border-radius: var(--r-sm); background: var(--tolky-white); border: 1px solid var(--border); font-size: 11px; color: var(--fg-3); display: flex; align-items: center; padding: 0 10px; overflow: hidden; white-space: nowrap; }
.mock__body { padding: 16px; }
.mock .muted { color: var(--fg-3); }
.mock .mono { background: var(--tolky-blue-050); color: var(--tolky-ink-700); }
/* ─── Revelar ao rolar (main.js adiciona .is-visible) ────────── */
.reveal { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 240ms ease-out, transform 240ms ease-out; }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
/* ─── Acessibilidade ────────────────────────────────────────── */
:focus-visible { outline: 3px solid var(--tolky-blue-300); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--tolky-ink-900); color: var(--tolky-white); padding: 10px 14px; border-radius: var(--r-md); text-decoration: none; }
.skip-link:focus { top: 16px; }
.icon { width: 20px; height: 20px; flex-shrink: 0; }
/* ─── Toast (main.js → Site.toast) ──────────────────────────── */
.toast {
position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 900;
max-width: calc(100% - 32px); padding: 12px 18px; border-radius: var(--r-md);
background: var(--tolky-ink-900); color: var(--tolky-white); font-size: var(--text-sm); font-weight: var(--w-medium);
}
/* src/styles/components/checkout.css */
/* Checkout (modal) e peças de formulário compartilhadas com a seção de planos
* (.cycle-toggle e .field). UI de produto: elevação do modal é funcional (--shadow-lg),
* status de erro usa --danger sempre com ícone + texto. */
.checkout [hidden], .cycle-toggle [hidden], .field [hidden] { display: none !important; }
/* ─── Seletor Mensal | Anual ─────────────────────────────────── */
.cycle-toggle {
display: inline-flex; gap: 4px; padding: 4px;
background: var(--tolky-white); border: 1px solid var(--tolky-blue-100); border-radius: 999px;
}
.cycle-toggle--block { display: flex; width: 100%; }
.cycle-toggle--block .cycle-toggle__option { flex: 1; }
.cycle-toggle__option {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent;
color: var(--tolky-ink-700); font-weight: var(--w-semi); font-size: var(--text-md); cursor: pointer;
transition: background-color 180ms ease-out, color 180ms ease-out;
}
.cycle-toggle__option:hover { background: var(--tolky-blue-050); }
.cycle-toggle__option[aria-pressed="true"] { background: var(--tolky-ink-900); color: var(--tolky-white); }
.cycle-toggle__badge {
padding: 3px 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: var(--w-bold);
background: var(--tolky-blue-050); color: var(--tolky-blue-700);
}
.cycle-toggle__option[aria-pressed="true"] .cycle-toggle__badge { background: var(--tolky-blue-200); color: var(--tolky-ink-900); }
/* ─── Campo de formulário ────────────────────────────────────── */
.field { display: grid; gap: 6px; align-content: start; min-width: 0; scroll-margin-block: 12px 112px; }
.field__label { font-size: var(--text-sm); font-weight: var(--w-semi); color: var(--tolky-ink-700); }
.field__optional { font-weight: var(--w-regular); color: var(--fg-3); }
.field__input {
width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--r-md);
background: var(--tolky-white); border: 1px solid var(--tolky-blue-300); color: var(--tolky-ink-900);
font-size: var(--text-md); transition: border-color 180ms ease-out;
}
.field__input::placeholder { color: var(--fg-2); }
.field__input:focus { border-color: var(--tolky-blue); outline: 3px solid var(--tolky-blue-200); outline-offset: 0; }
.field__input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; padding: 0 13px; }
.field__error {
display: flex; align-items: flex-start; gap: 6px; margin: 0;
font-size: var(--text-sm); font-weight: var(--w-medium); line-height: 1.3; color: #B42328;
}
.field__error .icon { width: 16px; height: 16px; margin-top: 1px; }
/* ─── Modal ──────────────────────────────────────────────────── */
html.checkout-open { overflow: hidden; }
.checkout {
width: min(640px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px);
margin: auto; padding: 0; border: 0; border-radius: var(--r-xl); overflow: hidden;
background: var(--tolky-white); color: var(--fg-2); box-shadow: var(--shadow-lg);
}
.checkout[open] { animation: checkout-in 200ms ease-out; }
.checkout::backdrop { background: rgba(13, 17, 38, 0.62); }
.checkout[open]::backdrop { animation: checkout-fade 200ms ease-out; }
@keyframes checkout-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@keyframes checkout-fade { from { opacity: 0; } to { opacity: 1; } }
.checkout__panel { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.checkout__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: 24px 24px 16px 28px; }
.checkout__heading { display: grid; gap: 6px; min-width: 0; }
.checkout__progress-text { margin: 0; font-size: var(--text-sm); font-weight: var(--w-semi); color: var(--tolky-blue); }
.checkout__title { margin: 0; font-size: var(--text-3xl); line-height: 1.1; letter-spacing: -0.01em; color: var(--tolky-ink-700); }
.checkout__title:focus { outline: none; }
.checkout__title:focus-visible { outline: 3px solid var(--tolky-blue-300); outline-offset: 4px; border-radius: var(--r-xs); }
.checkout__close {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 44px; height: 44px; margin: -4px -4px 0 0; border: 0; border-radius: var(--r-md);
background: transparent; color: var(--tolky-ink-700); cursor: pointer; transition: background-color 180ms ease-out;
}
.checkout__close:hover { background: var(--tolky-blue-050); }
.checkout__bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 28px; }
.checkout__bar span { height: 4px; border-radius: 999px; background: var(--tolky-blue-050); transition: background-color 200ms ease-out; }
.checkout__bar span.is-on { background: var(--tolky-blue); }
.checkout__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px 28px 0; overscroll-behavior: contain; }
.checkout__step { display: grid; gap: var(--space-5); align-content: start; }
.checkout__step[hidden] { display: none; }
.checkout__actions {
position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3);
margin: 0 -28px; padding: 16px 28px 24px; background: var(--tolky-white); border-top: 1px solid var(--border);
}
.checkout__actions .btn { flex: 0 1 auto; }
.checkout__actions--stack > :first-child { margin-right: auto; }
/* Resumo */
.checkout__summary { display: grid; margin: 0; padding: 4px 20px; background: var(--tolky-bg-soft); border: 1px solid var(--border); border-radius: var(--r-lg); }
.checkout__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: 12px 0; border-bottom: 1px solid var(--border); }
.checkout__row dt { color: var(--fg-3); font-size: var(--text-sm); font-weight: var(--w-medium); }
.checkout__row dd { margin: 0; text-align: right; color: var(--tolky-ink-700); font-weight: var(--w-semi); }
.checkout__row--total { border-bottom: 0; padding: 16px 0; align-items: flex-start; }
.checkout__row--total dt { color: var(--tolky-ink-700); font-weight: var(--w-semi); font-size: var(--text-md); }
.checkout__row--total dd { font-size: var(--text-3xl); font-weight: var(--w-bold); line-height: 1; letter-spacing: -0.01em; }
.checkout__row--total small { display: block; margin-top: 8px; font-size: var(--text-sm); font-weight: var(--w-regular); color: var(--fg-3); letter-spacing: 0; line-height: 1.3; }
.checkout__fine { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: var(--text-sm); line-height: 1.35; color: var(--fg-3); }
.checkout__fine .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--tolky-blue); }
/* Dados da empresa */
.checkout__fields { display: grid; gap: var(--space-4); }
.checkout__pair { display: grid; gap: var(--space-4); }
@media (min-width: 520px) { .checkout__pair { grid-template-columns: 1fr 1fr; } }
/* Pagamento */
.checkout__recap { margin: 0; padding: 14px 18px; border-radius: var(--r-md); background: var(--tolky-blue-050); color: var(--tolky-ink-700); font-weight: var(--w-semi); line-height: 1.3; }
.checkout__notice { display: flex; gap: var(--space-4); padding: 20px; border: 1px solid var(--tolky-blue-100); border-radius: var(--r-lg); background: var(--tolky-white); }
.checkout__notice p { margin: 0 0 8px; font-size: var(--text-md); line-height: 1.35; color: var(--fg-2); }
.checkout__notice p:last-child { margin-bottom: 0; }
.checkout__notice .checkout__notice-title { color: var(--tolky-ink-700); font-weight: var(--w-bold); font-size: var(--text-lg); }
.checkout__notice-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--tolky-blue-050); color: var(--tolky-blue); }
.checkout__error { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid var(--danger); border-radius: var(--r-md); font-size: var(--text-sm); font-weight: var(--w-medium); line-height: 1.35; color: #B42328; background: rgba(229, 72, 77, 0.08); }
.checkout__error .icon { width: 18px; height: 18px; }
/* Concluído */
.checkout__step--done { justify-items: start; }
.checkout__done-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--r-lg); background: var(--tolky-blue-050); color: var(--tolky-blue); }
.checkout__done-icon .icon { width: 32px; height: 32px; }
.checkout__done-message { margin: 0; font-size: var(--text-lg); line-height: 1.35; color: var(--tolky-ink-700); }
.checkout__done-note { margin: 0; font-size: var(--text-md); color: var(--fg-3); }
.checkout__step--done .checkout__actions { justify-self: stretch; }
@media (max-width: 639px) {
.checkout { width: 100%; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 94dvh; }
.checkout__panel { max-height: 94dvh; }
.checkout__header { padding: 20px 16px 12px 20px; }
.checkout__bar { padding: 0 20px; }
.checkout__body { padding: 20px 20px 0; }
.checkout__actions { margin: 0 -20px; padding: 14px 20px 20px; flex-direction: column-reverse; }
.checkout__actions .btn { width: 100%; }
.checkout__actions--stack > :first-child { margin-right: 0; }
.checkout__title { font-size: var(--text-2xl); }
.checkout__row--total { flex-direction: column; gap: 8px; }
.checkout__row--total dd { font-size: var(--text-2xl); text-align: left; }
}
/* src/styles/sections/como.css */
/* Como funciona: stepper de 4 etapas (tabs acessíveis) com um mock de tela animado por etapa.
* Estado final = estado padrão do CSS. A animação só existe dentro de .is-animating (como.js). */
.sec--como {
--como-h: 680px;
--como-tint: #F4F6FF;
--como-unlit: var(--tolky-blue-050);
--como-code-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
overflow-x: clip;
}
@media (max-width: 399px) { .sec--como { --como-h: 730px; } }
@media (min-width: 640px) { .sec--como { --como-h: 640px; } }
@media (min-width: 960px) { .sec--como { --como-h: 690px; } }
@media (min-width: 1100px) { .sec--como { --como-h: 620px; } }
.sec--como .section-head { margin-bottom: var(--space-7); }
@media (min-width: 960px) { .sec--como .section-head { margin-bottom: var(--space-8); } }
.sec--como .section-head .lead { max-width: 54ch; }
/* ─── Estrutura: etapas + palco ─────────────────────────────── */
.sec--como .como {
display: grid;
gap: var(--space-6);
min-width: 0;
}
@media (min-width: 960px) {
.sec--como .como {
grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.7fr);
gap: 64px;
align-items: start;
}
}
/* ─── Etapas (tablist) ──────────────────────────────────────── */
.sec--como .como__tabs {
position: relative;
display: grid;
gap: var(--space-3);
min-width: 0;
}
@media (min-width: 640px) {
.sec--como .como__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
.sec--como .como__tabs {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: repeat(4, minmax(0, 1fr));
gap: 10px;
height: var(--como-h);
}
}
@media (max-width: 639px) {
.sec--como .como__tabs {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 0 24px;
margin: 0 -24px;
padding: 0 24px 6px;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.sec--como .como__tabs::-webkit-scrollbar { display: none; }
}
.sec--como .como__tab {
position: relative;
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
column-gap: 16px;
align-items: start;
align-content: start;
width: 100%;
margin: 0;
padding: 18px 20px 22px;
text-align: left;
color: inherit;
background: var(--tolky-white);
border: 1px solid var(--border);
border-radius: var(--r-md);
cursor: pointer;
overflow: hidden;
scroll-snap-align: start;
transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
@media (max-width: 639px) {
.sec--como .como__tab { flex: 0 0 min(82%, 320px); width: auto; }
}
@media (min-width: 960px) {
.sec--como .como__tab {
align-content: center;
background: transparent;
border-color: transparent;
}
.sec--como .como__tab:hover { background: rgba(226, 231, 255, 0.5); }
}
.sec--como .como__tab[aria-selected="true"] {
background: var(--tolky-white);
border-color: var(--tolky-blue);
}
@media (min-width: 960px) {
.sec--como .como__tab[aria-selected="true"] { border-color: var(--tolky-blue-100); }
}
.sec--como .como__num {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--tolky-blue-050);
color: var(--tolky-blue-700);
font-size: var(--text-md);
font-weight: var(--w-bold);
font-variant-numeric: tabular-nums;
transition: background-color 200ms ease-out, color 200ms ease-out;
}
.sec--como .como__tab[aria-selected="true"] .como__num {
background: var(--tolky-blue);
color: var(--tolky-white);
}
.sec--como .como__tab-body { display: block; min-width: 0; }
.sec--como .como__tab-title {
display: block;
font-size: 20px;
font-weight: var(--w-bold);
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--tolky-ink-700);
text-wrap: balance;
}
.sec--como .como__tab-desc {
display: block;
margin-top: 6px;
font-size: 15px;
line-height: 1.4;
color: var(--fg-3);
text-wrap: pretty;
}
/* Indicador de progresso fino (como.js escreve o scaleX durante o avanço automático). */
.sec--como .como__bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: var(--tolky-blue-050);
opacity: 0;
transition: opacity 200ms ease-out;
}
.sec--como .como__bar > span {
display: block;
height: 100%;
background: var(--tolky-blue);
transform-origin: left center;
transform: scaleX(0);
}
.sec--como .como__tab[aria-selected="true"] .como__bar { opacity: 1; }
.sec--como .como[data-mode="manual"] .como__tab[aria-selected="true"] .como__bar > span { transform: scaleX(1); }
/* ─── Palco: placa sólida atrás do mock (profundidade por cor) ─── */
.sec--como .como__stage {
position: relative;
min-width: 0;
}
.sec--como .como__stage::before {
content: "";
position: absolute;
inset: 14px -12px -14px 12px;
background: var(--tolky-blue-050);
border-radius: var(--r-lg);
}
@media (min-width: 960px) {
.sec--como .como__stage::before { inset: 20px -20px -20px 20px; }
}
.sec--como .como__mock {
position: relative;
z-index: 1;
height: var(--como-h);
container: como / inline-size;
}
.sec--como .mock__url > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* ─── Painéis: crossfade + 6px ──────────────────────────────── */
.sec--como .como__panel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
background: var(--tolky-white);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate3d(0, 6px, 0);
transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms;
}
.sec--como .como__panel.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition-delay: 0s;
}
.sec--como .como__panel:focus-visible { outline-offset: -3px; }
.sec--como .como__body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 16px;
}
@container como (min-width: 560px) {
.sec--como .como__body { gap: 16px; padding: 18px 22px 20px; }
}
/* Entrada dos itens (só durante a animação; fora dela o estado final aparece direto). */
.sec--como .is-animating [data-item] {
opacity: 0;
transform: translate3d(0, 6px, 0);
}
.sec--como .is-animating [data-item].is-on {
opacity: 1;
transform: none;
transition: opacity 220ms ease-out, transform 220ms ease-out;
}
/* ─── Peças comuns dos mocks ────────────────────────────────── */
.sec--como .como__head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 8px 12px;
}
.sec--como .como__head > div { min-width: 0; }
.sec--como .como__title {
margin: 0;
font-size: 18px;
font-weight: var(--w-bold);
line-height: 1.2;
color: var(--tolky-ink-700);
}
.sec--como .como .chip { flex-shrink: 0; white-space: nowrap; }
.sec--como .como__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 40px;
padding: 0 16px;
border: 1px solid transparent;
border-radius: var(--r-md);
font-size: 13.5px;
font-weight: var(--w-semi);
white-space: nowrap;
cursor: pointer;
transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, transform 120ms ease-out;
}
.sec--como .como__btn:active { transform: scale(0.96); }
.sec--como .como__btn .icon { width: 16px; height: 16px; }
.sec--como .como__btn--primary { background: var(--tolky-blue); color: var(--tolky-white); }
.sec--como .como__btn--primary:hover { background: var(--tolky-blue-600); }
.sec--como .como__btn--ghost { background: var(--tolky-white); color: var(--tolky-ink-700); border-color: var(--border-strong); }
.sec--como .como__btn--ghost:hover { border-color: var(--tolky-blue); color: var(--tolky-blue); }
@media (pointer: coarse) {
.sec--como .como__btn { min-height: 44px; }
}
/* ─── Etapa 1: upload ───────────────────────────────────────── */
.sec--como .como__drop {
display: grid;
gap: 14px;
padding: 14px;
background: var(--como-tint);
border: 1.5px dashed var(--tolky-blue-200);
border-radius: var(--r-md);
}
.sec--como .como__drop-head { display: flex; align-items: center; gap: 12px; }
.sec--como .como__drop-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
display: grid;
place-items: center;
background: var(--tolky-white);
border: 1px solid var(--tolky-blue-100);
border-radius: var(--r-md);
color: var(--tolky-blue);
}
.sec--como .como__drop-text {
margin: 0;
display: grid;
gap: 2px;
min-width: 0;
font-size: 13px;
line-height: 1.25;
color: var(--fg-3);
}
.sec--como .como__drop-text strong { font-size: 14.5px; font-weight: var(--w-semi); color: var(--tolky-ink-700); }
.sec--como .como__link {
padding: 0;
background: none;
border: 0;
font-size: inherit;
font-weight: var(--w-semi);
color: var(--tolky-blue-600);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.sec--como .como__files {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
@container como (min-width: 560px) {
.sec--como .como__files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sec--como .como__file {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
grid-template-areas:
"icon name state"
"icon track pages";
align-items: center;
column-gap: 10px;
row-gap: 8px;
padding: 11px 14px;
background: var(--tolky-white);
border: 1px solid var(--border);
border-radius: var(--r-md);
}
.sec--como .como__file > .icon { grid-area: icon; align-self: start; width: 18px; height: 18px; margin-top: 1px; color: var(--tolky-blue); }
.sec--como .como__file-name {
grid-area: name;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
font-weight: var(--w-semi);
color: var(--tolky-ink-700);
}
.sec--como .como__file-state { grid-area: state; justify-self: end; display: inline-flex; font-size: var(--text-xs); }
.sec--como .como__sending { display: none; font-weight: var(--w-medium); color: var(--fg-3); }
.sec--como .como__track { grid-area: track; height: 4px; border-radius: 999px; background: var(--tolky-blue-050); overflow: hidden; }
.sec--como .como__fill {
display: block;
height: 100%;
border-radius: inherit;
background: var(--tolky-blue);
transform-origin: left center;
}
.sec--como .como__file-pages {
grid-area: pages;
justify-self: end;
font-size: var(--text-xs);
line-height: 1;
color: var(--fg-3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@container como (max-width: 559px) {
.sec--como .como__sent-label { display: none; }
.sec--como .como__sent { padding: 3px; }
.sec--como .como__drop { gap: 12px; padding: 12px; }
.sec--como .como__file { row-gap: 7px; padding: 9px 12px; }
.sec--como .como__wide-only { display: none; }
.sec--como .como__total-text { font-size: 17px; }
.sec--como .como__total .como__btn .icon { display: none; }
}
@container como (min-width: 560px) {
.sec--como .como__narrow-only { display: none; }
}
.sec--como .is-animating .como__fill { transform: scaleX(0); }
.sec--como .is-animating .como__file.is-filling .como__fill {
transform: scaleX(1);
transition: transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sec--como .is-animating .como__file:not(.is-sent) .como__sent { display: none; }
.sec--como .is-animating .como__file:not(.is-sent) .como__sending { display: inline; }
.sec--como .is-animating .como__file.is-sent .como__sent { animation: como-in 200ms ease-out both; }
.sec--como .como__total {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 14px;
}
.sec--como .como__total-text {
margin: 0;
display: flex;
align-items: baseline;
gap: 8px;
font-size: 18px;
line-height: 1.2;
color: var(--tolky-ink-700);
}
.sec--como .como__total-text strong { font-weight: var(--w-bold); }
.sec--como .como__total-number { display: inline-block; min-width: 2.1ch; text-align: right; font-variant-numeric: tabular-nums; }
.sec--como .como__ups { display: inline-block; color: var(--tolky-blue); }
.sec--como .como__dot { color: var(--tolky-blue-200); }
.sec--como .como__api {
margin-top: auto;
padding: 14px 16px 16px;
background: var(--tolky-ink-900);
border-radius: var(--r-md);
color: var(--tolky-white);
}
.sec--como .como__api-head {
margin: 0 0 8px;
display: flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
font-weight: var(--w-semi);
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.2;
color: var(--tolky-blue-200);
}
.sec--como .como__api-head .icon { width: 16px; height: 16px; }
.sec--como .como__code {
margin: 0;
overflow: hidden;
font-family: var(--como-code-font);
font-size: 12px;
line-height: 1.7;
white-space: pre;
color: rgba(255, 255, 255, 0.9);
}
.sec--como .como__code code {
display: block;
padding: 0;
background: none;
font-size: inherit;
color: inherit;
}
.sec--como .como__line { display: block; }
.sec--como .tok-verb { color: var(--tolky-blue-300); font-weight: var(--w-bold); }
.sec--como .tok-path { color: var(--tolky-white); }
.sec--como .tok-key { color: var(--tolky-blue-200); }
.sec--como .tok-str { color: var(--tolky-blue-100); }
.sec--como .tok-punct { color: rgba(255, 255, 255, 0.62); }
/* ─── Etapa 2: testes de regra ──────────────────────────────── */
.sec--como .como__meter-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 12px;
}
.sec--como .como__counter { margin: 0; font-size: 13.5px; line-height: 1.2; color: var(--fg-3); }
.sec--como .como__counter strong {
display: inline-block;
min-width: 1ch;
margin-right: 2px;
font-size: 22px;
font-weight: var(--w-bold);
color: var(--tolky-ink-700);
font-variant-numeric: tabular-nums;
}
.sec--como .como__meter-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--tolky-blue-050); overflow: hidden; }
.sec--como .como__meter-bar > span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--tolky-blue);
transform-origin: left center;
transition: transform 160ms ease-out;
}
@container como (min-width: 560px) {
.sec--como .como__meter-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
.sec--como .como__counter { order: 1; }
.sec--como .como__meter-bar { order: 2; grid-column: auto; }
.sec--como .como__cost { order: 3; }
}
.sec--como .como__tests {
list-style: none;
margin: 0;
padding: 0;
background: var(--tolky-white);
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
}
.sec--como .como__test {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 58px;
padding: 8px 14px;
}
.sec--como .como__test + .como__test { border-top: 1px solid var(--border); }
.sec--como .como__test-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: var(--r-sm);
background: var(--tolky-blue-050);
color: var(--tolky-blue-700);
}
.sec--como .como__test-icon .icon { width: 18px; height: 18px; }
.sec--como .como__test-text { display: grid; gap: 1px; min-width: 0; line-height: 1.25; }
.sec--como .como__test-text strong { font-size: 13.5px; font-weight: var(--w-semi); color: var(--tolky-ink-700); }
.sec--como .como__test-text span { font-size: var(--text-xs); color: var(--fg-3); }
.sec--como .como__test-result { display: flex; justify-content: flex-end; min-width: 0; }
.sec--como .como__wait { display: none; align-items: center; gap: 4px; height: 24px; }
.sec--como .como__wait i { width: 5px; height: 5px; border-radius: 50%; background: var(--tolky-blue-200); animation: como-wait 900ms ease-out infinite; }
.sec--como .como__wait i:nth-child(2) { animation-delay: 120ms; }
.sec--como .como__wait i:nth-child(3) { animation-delay: 240ms; }
.sec--como .is-animating .como__test:not(.is-done) .como__done { display: none; }
.sec--como .is-animating .como__test:not(.is-done) .como__wait { display: inline-flex; }
.sec--como .is-animating .como__test.is-done .como__done { animation: como-in 200ms ease-out both; }
@container como (max-width: 559px) {
.sec--como .como__test-text span { display: none; }
.sec--como .como__test { min-height: 56px; }
}
.sec--como .como__alert {
display: grid;
gap: 6px;
padding: 12px 14px;
background: rgba(229, 72, 77, 0.06);
border: 1px solid rgba(229, 72, 77, 0.3);
border-radius: var(--r-md);
}
.sec--como .como__alert-title { margin: 0; }
.sec--como .como__alert .status { align-items: flex-start; font-size: 12.5px; line-height: 1.3; }
.sec--como .como__alert .status .icon { margin-top: 1px; }
.sec--como .como__alert-text { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--fg-3); }
.sec--como .como__alert-quote { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sec--como .mock .como__alert-quote .mono { padding: 5px 9px; background: var(--tolky-white); border: 1px solid rgba(229, 72, 77, 0.3); border-radius: var(--r-sm); font-size: 12px; }
/* ─── Etapa 3: IA só onde há sinal ──────────────────────────── */
.sec--como .como__legend {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
font-size: var(--text-xs);
color: var(--fg-3);
}
.sec--como .como__legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sec--como .como__swatch { display: block; width: 10px; height: 13px; border-radius: 2px; background: var(--como-unlit); border: 1px solid var(--tolky-blue-100); }
.sec--como .como__swatch--lit { background: var(--tolky-blue); border-color: var(--tolky-blue); }
.sec--como .como__ai-count { margin: 0; font-size: 15px; line-height: 1.2; color: var(--fg-3); }
.sec--como .como__ai-count strong {
display: inline-block;
min-width: 1.2ch;
margin-right: 4px;
font-size: 30px;
font-weight: var(--w-bold);
line-height: 1;
color: var(--tolky-blue);
font-variant-numeric: tabular-nums;
}
.sec--como .como__pages {
--como-cols: 18;
display: grid;
grid-template-columns: repeat(var(--como-cols), minmax(0, 1fr));
gap: 3px;
}
@container como (min-width: 560px) {
.sec--como .como__pages { --como-cols: 30; }
}
.sec--como .como__tile {
display: block;
aspect-ratio: 4 / 5;
border-radius: 2px;
background: var(--como-unlit);
}
.sec--como .como__tile.is-lit { background: var(--tolky-blue); }
.sec--como .is-animating .como__pages { clip-path: inset(0 0 100% 0); }
.sec--como .is-animating .como__pages.is-on { clip-path: inset(0); transition: clip-path 480ms ease-out; }
.sec--como .is-animating .como__tile.is-lit { animation: como-pop 240ms ease-out both; }
.sec--como .como__batch { display: grid; gap: 8px; }
.sec--como .como__batch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.sec--como .como__batch-label { margin: 0; font-size: 13.5px; font-weight: var(--w-semi); color: var(--tolky-ink-700); }
.sec--como .como__batch-label strong { display: inline-block; min-width: 1ch; font-variant-numeric: tabular-nums; }
.sec--como .como__segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sec--como .como__segs > span {
position: relative;
height: 6px;
border-radius: 999px;
background: var(--tolky-blue-050);
overflow: hidden;
}
.sec--como .como__segs > span::after {
content: "";
position: absolute;
inset: 0;
background: var(--tolky-blue);
transform-origin: left center;
transform: scaleX(var(--como-fill, 1));
transition: transform 140ms ease-out;
}
.sec--como .is-animating .como__segs > span { --como-fill: 0; }
.sec--como .is-animating .como__batch:not(.is-complete) .como__batch-state { visibility: hidden; }
.sec--como .is-animating .como__batch.is-complete .como__batch-state { animation: como-in 200ms ease-out both; }
.sec--como .como__note {
margin: auto 0 0;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: var(--como-tint);
border: 1px solid var(--tolky-blue-100);
border-radius: var(--r-md);
font-size: 13.5px;
line-height: 1.4;
color: var(--tolky-ink-700);
}
.sec--como .como__note .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--tolky-blue); }
/* ─── Etapa 4: dossiê ───────────────────────────────────────── */
.sec--como .como__finds {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.sec--como .como__find {
background: var(--tolky-white);
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
}
.sec--como .como__find.is-open { border-color: var(--tolky-blue-200); }
.sec--como .como__find-head {
display: grid;
grid-template-columns: 20px auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 8px 12px;
}
.sec--como .como__rank {
width: 20px;
height: 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--tolky-blue-050);
color: var(--tolky-blue-700);
font-size: 11.5px;
font-weight: var(--w-bold);
}
.sec--como .como__find-title { min-width: 0; font-size: 13.5px; font-weight: var(--w-semi); line-height: 1.25; color: var(--tolky-ink-700); }
.sec--como .mock .como__find-where { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--fg-3); background: transparent; padding: 0; }
.sec--como .como__chev { width: 18px; height: 18px; color: var(--tolky-blue); transform: rotate(180deg); }
@container como (max-width: 559px) {
.sec--como .como__find-head { grid-template-columns: auto minmax(0, 1fr) auto; }
.sec--como .como__rank { display: none; }
.sec--como .mock .como__find-where { display: none; }
}
.sec--como .como__expand {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 250ms ease-out;
}
.sec--como .como__expand-inner { min-height: 0; overflow: hidden; }
.sec--como .is-animating .como__expand { grid-template-rows: 0fr; }
.sec--como .is-animating .como__find.is-expanded .como__expand { grid-template-rows: 1fr; }
.sec--como .como__facts {
margin: 0;
padding: 2px 14px 12px;
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
grid-template-areas:
"page file"
"page quote"
"why why"
"conf conf";
gap: 8px 12px;
}
@container como (min-width: 560px) {
.sec--como .como__facts {
grid-template-columns: 124px minmax(0, 1fr);
grid-template-areas:
"page file"
"page quote"
"page why"
"page conf";
gap: 8px 18px;
}
}
.sec--como .como__fact { display: grid; gap: 2px; min-width: 0; align-content: start; }
.sec--como .como__fact--page { grid-area: page; }
.sec--como .como__fact--file { grid-area: file; }
.sec--como .como__fact--quote { grid-area: quote; }
.sec--como .como__fact--why { grid-area: why; }
.sec--como .como__fact--conf { grid-area: conf; }
.sec--como .como__fact dt {
font-size: 11.5px;
font-weight: var(--w-semi);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2;
color: var(--fg-3);
}
.sec--como .como__fact dd { margin: 0; font-size: 13px; line-height: 1.35; color: var(--tolky-ink-700); min-width: 0; }
.sec--como .como__fact--why dd { color: var(--fg-3); }
.sec--como .mock .como__fact .mono { padding: 1px 5px; font-size: 12px; }
.sec--como .como__quote { quotes: "“" "”"; display: inline; font-size: 12px; line-height: 1.5; padding: 2px 6px; overflow-wrap: anywhere; }
.sec--como .como__quote mark {
padding: 0 2px;
background: rgba(229, 72, 77, 0.18);
color: var(--tolky-ink-700);
font-weight: var(--w-bold);
border-radius: 2px;
text-decoration: underline;
text-decoration-color: var(--danger);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* Miniatura da página com o trecho destacado. */
.sec--como .como__page {
position: relative;
display: flex;
flex-direction: column;
gap: 7px;
aspect-ratio: 3 / 4;
padding: 14px 10px 10px;
background: #FBFCFF;
border: 1px solid var(--tolky-blue-100);
border-radius: var(--r-sm);
overflow: hidden;
}
.sec--como .como__page-tag {
position: absolute;
right: 6px;
bottom: 5px;
font-size: 11px;
font-weight: var(--w-semi);
color: var(--fg-3);
font-variant-numeric: tabular-nums;
}
.sec--como .como__ln { display: block; flex: 0 0 auto; height: 4px; border-radius: 2px; background: var(--tolky-blue-050); }
.sec--como .como__ln--title { width: 62%; height: 6px; margin-bottom: 4px; background: var(--tolky-blue-100); }
.sec--como .como__ln--short { width: 56%; }
.sec--como .como__ln--mark { position: relative; margin: 3px 0; height: 5px; background: var(--tolky-blue-100); }
.sec--como .como__ln--mark b {
position: absolute;
inset: -4px -3px;
border: 1.5px solid var(--danger);
border-radius: 3px;
background: rgba(229, 72, 77, 0.16);
transform-origin: left center;
}
.sec--como .is-animating .como__ln--mark b { transform: scaleX(0); }
.sec--como .is-animating .como__find.is-marked .como__ln--mark b { transform: scaleX(1); transition: transform 320ms ease-out; }
.sec--como .como__fact--conf dd { display: flex; align-items: center; gap: 10px; }
.sec--como .como__conf-bar { flex: 0 1 140px; height: 6px; border-radius: 999px; background: var(--tolky-blue-050); overflow: hidden; }
.sec--como .como__conf-bar > span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--tolky-blue);
transform-origin: left center;
transform: scaleX(0.82);
}
.sec--como .como__fact--conf strong { min-width: 3ch; font-size: 15px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.sec--como .is-animating .como__conf-bar > span { transform: scaleX(0); }
.sec--como .is-animating .como__find.is-conf .como__conf-bar > span { transform: scaleX(0.82); transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.sec--como .como__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 14px 14px;
}
@container como (min-width: 560px) {
.sec--como .como__actions { padding-left: calc(14px + 124px + 18px); }
}
@container como (max-width: 559px) {
.sec--como .como__actions .como__btn { flex: 1 1 auto; padding: 0 12px; }
.sec--como .como__actions .como__btn .icon { display: none; }
}
.sec--como .como__reminder {
margin: auto 0 0;
display: flex;
align-items: center;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--border);
font-size: 12.5px;
line-height: 1.3;
color: var(--fg-3);
}
.sec--como .como__reminder .icon { width: 16px; height: 16px; color: var(--tolky-blue); }
/* ─── Quadros-chave ─────────────────────────────────────────── */
@keyframes como-in {
from { opacity: 0; transform: translate3d(0, 4px, 0); }
to { opacity: 1; transform: none; }
}
@keyframes como-pop {
0% { transform: scale(1); }
45% { transform: scale(1.8); }
100% { transform: scale(1); }
}
@keyframes como-wait {
0%, 100% { opacity: 0.35; transform: translate3d(0, 0, 0); }
50% { opacity: 1; transform: translate3d(0, -2px, 0); }
}
/* src/styles/sections/cta-final.css */
/* CTA final sobre azul: título grande e respirado, faixa de apoio e dois botões. Sem cards.
* Traço decorativo de páginas em lavanda, baixa opacidade, só no desktop. */
.sec--cta-final { overflow: hidden; }
.sec--cta-final .cta-final__inner {
position: relative; z-index: 1;
display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); justify-items: start;
}
.sec--cta-final .display { max-width: 880px; color: var(--tolky-white); }
.sec--cta-final .cta-final__lead {
margin: 0; max-width: 40ch;
font-size: clamp(24px, 2.2vw, 28px); line-height: 1.35; color: var(--tolky-white);
}
.sec--cta-final .cta-final__actions { margin-top: var(--space-4); }
/* Texto grande (>= 20px bold) sobre #506FFD: branco tem 4,17:1, suficiente para texto grande (WCAG AA 3:1). */
.sec--cta-final .btn--lg { min-height: 56px; font-size: 20px; font-weight: var(--w-bold); }
.sec--cta-final .cta-final__pages {
position: absolute; z-index: 0; top: 50%; right: -4%;
width: min(560px, 46vw); height: auto;
transform: translateY(-50%);
color: var(--tolky-blue-200); opacity: 0.3; pointer-events: none;
}
@media (max-width: 959px) {
.sec--cta-final .cta-final__pages { display: none; }
}
/* src/styles/sections/diferenciais.css */
/* Diferenciais: destaque editorial (evidência com mock de página) + lista com divisores finos. */
.sec--diferenciais .dif-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
}
.sec--diferenciais .dif-feature {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
padding: var(--space-6);
border-radius: var(--r-lg);
background: var(--tolky-bg-soft);
}
.sec--diferenciais .dif-mock {
min-width: 0;
}
.sec--diferenciais .dif-mock .mock__url {
min-width: 0;
flex: 1 1 0;
}
.sec--diferenciais .dif-feature__head {
display: flex;
align-items: center;
gap: var(--space-4);
}
.sec--diferenciais .dif-feature p,
.sec--diferenciais .dif-item p {
margin: 0;
color: var(--tolky-text);
max-width: 60ch;
}
.sec--diferenciais .dif-item__icon {
display: grid;
place-items: center;
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: var(--r-md);
background: var(--tolky-blue-050);
color: var(--tolky-blue-700);
}
.sec--diferenciais .dif-item__icon .icon {
width: 22px;
height: 22px;
}
.sec--diferenciais .dif-mock {
margin: 0;
}
.sec--diferenciais .dif-mock .mock__body {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
padding: var(--space-5);
}
.sec--diferenciais .dif-mock__file {
justify-self: start;
}
.sec--diferenciais .dif-mock__page {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--tolky-ink-700);
}
.sec--diferenciais .dif-mock__hit {
padding: 0 0.2em;
background: var(--tolky-blue-200);
color: var(--tolky-ink-900);
font-weight: var(--w-semi);
border-radius: 0;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.sec--diferenciais .dif-mock__note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid var(--border);
}
.sec--diferenciais .dif-mock__note p {
margin: 0;
flex: 1 1 220px;
color: var(--tolky-ink-700);
font-size: var(--text-sm);
}
.sec--diferenciais .dif-list {
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid var(--border);
}
.sec--diferenciais .dif-item {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: var(--space-5);
align-items: start;
padding: var(--space-5) 0;
border-top: 1px solid var(--border);
}
.sec--diferenciais .dif-item__title {
margin: 0 0 var(--space-2);
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.15;
font-weight: var(--w-semi);
color: var(--tolky-ink-700);
}
@media (min-width: 960px) {
.sec--diferenciais .dif-layout {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 80px;
align-items: center;
}
.sec--diferenciais .dif-feature {
padding: 48px;
}
.sec--diferenciais .dif-item {
padding: 28px 0;
}
}
/* src/styles/sections/faq.css */
/* Dúvidas: duas colunas no desktop (título e chat à esquerda, accordion à direita), uma no mobile.
* Accordion nativo com details/summary; chevron gira com ease-out de 200ms. */
.sec--faq .eyebrow { color: var(--tolky-blue-600); }
.sec--faq .title-lg { line-height: 1; }
.sec--faq .faq__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; }
.sec--faq .faq__aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); justify-items: start; }
.sec--faq .faq__aside .eyebrow { margin: 0; }
.sec--faq .faq__list { min-width: 0; }
@media (min-width: 960px) {
.sec--faq .faq__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 96px; }
.sec--faq .faq__aside { position: sticky; top: 120px; }
}
.sec--faq .faq__chat {
display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); justify-items: start;
margin-top: var(--space-4); padding: 28px; border-radius: var(--r-lg);
background: var(--tolky-blue-050);
}
.sec--faq .faq__chat-text { margin: 0; font-size: 18px; line-height: 1.4; color: var(--tolky-ink-700); }
.sec--faq .faq__item { border-top: 1px solid var(--border); }
.sec--faq .faq__item:last-child { border-bottom: 1px solid var(--border); }
.sec--faq .faq__question {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
min-height: 64px; padding: 24px 0; cursor: pointer; list-style: none;
font-size: 18px; font-weight: var(--w-semi); line-height: 1.3; color: var(--tolky-ink-700);
}
.sec--faq .faq__question::-webkit-details-marker { display: none; }
.sec--faq .faq__chevron {
width: 20px; height: 20px; flex-shrink: 0; color: var(--tolky-blue-600);
transition: transform 200ms ease-out;
}
.sec--faq .faq__item[open] .faq__chevron { transform: rotate(180deg); }
.sec--faq .faq__answer { padding: 0 48px 24px 0; }
.sec--faq .faq__answer p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tolky-text); }
.sec--faq .faq__item[open] .faq__answer { animation: faq-answer-in 200ms ease-out; }
@keyframes faq-answer-in {
from { opacity: 0; transform: translate3d(0, -6px, 0); }
to { opacity: 1; transform: none; }
}
/* src/styles/sections/footer.css */
/* Rodapé (.site-footer). Fundo ink sólido, sem sombra nem gradiente. */
.site-footer {
background: var(--tolky-ink-900);
color: rgba(255, 255, 255, 0.72);
padding: var(--space-8) 0 var(--space-6);
}
.site-footer .site-footer__inner { display: grid; gap: var(--space-6); }
.site-footer__logo {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--tolky-white);
font-weight: var(--w-bold);
font-size: 19px;
letter-spacing: -0.01em;
text-decoration: none;
}
.site-footer__glyph { width: 32px; height: 32px; flex-shrink: 0; }
.site-footer__tagline {
margin: var(--space-4) 0 0;
max-width: 40ch;
font-size: var(--text-md);
line-height: 1.5;
color: rgba(255, 255, 255, 0.72);
}
.site-footer__heading {
margin: 0 0 var(--space-3);
font-size: var(--text-sm);
font-weight: var(--w-semi);
line-height: 1.2;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tolky-white);
}
.site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer__links a,
.site-footer__button {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0;
border: 0;
background: none;
color: rgba(255, 255, 255, 0.72);
font: inherit;
font-size: var(--text-md);
text-align: left;
text-decoration: none;
cursor: pointer;
}
.site-footer__links a:hover,
.site-footer__button:hover { color: var(--tolky-white); }
.site-footer__legal {
grid-column: 1 / -1;
margin: var(--space-5) 0 0;
padding-top: var(--space-5);
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.6);
}
@media (min-width: 640px) {
.site-footer .site-footer__inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6) var(--space-7);
}
.site-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
.site-footer { padding: var(--space-9) 0 var(--space-7); }
.site-footer .site-footer__inner {
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-7) var(--space-8);
}
.site-footer__brand { grid-column: auto; }
}
/* src/styles/sections/hero.css */
/* Hero: fundo ink, texto à esquerda, mock animado de um dossiê sendo gerado à direita. */
.sec--hero {
padding: 112px 0 72px;
overflow: hidden;
isolation: isolate;
}
@media (min-width: 960px) {
.sec--hero { padding: 144px 0 112px; }
}
/* Textura técnica uniforme (pontos), sem gradiente nem máscara. */
.sec--hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23A7B6FE' fill-opacity='0.13'/%3E%3C/svg%3E");
background-size: 32px 32px;
pointer-events: none;
}
.sec--hero .hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 56px;
align-items: center;
}
@media (min-width: 960px) {
.sec--hero .hero-grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: 64px;
}
}
/* ─── Coluna de texto ───────────────────────────────────────── */
.sec--hero .hero-copy { min-width: 0; }
.sec--hero .eyebrow { margin-bottom: var(--space-5); }
.sec--hero .display {
font-size: clamp(42px, 8vw, 64px);
line-height: 0.96;
margin-bottom: var(--space-5);
}
@media (min-width: 960px) {
.sec--hero .display { font-size: clamp(42px, 4.2vw, 60px); }
}
.sec--hero .lead {
font-size: clamp(17px, 1.4vw, 20px);
max-width: 34em;
margin-bottom: var(--space-6);
}
.sec--hero .hero-cta .btn { flex: 0 0 auto; }
@media (max-width: 479px) {
.sec--hero .hero-cta .btn { flex: 1 1 100%; }
}
.sec--hero .hero-proof {
list-style: none;
margin: var(--space-7) 0 0;
padding: var(--space-5) 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.14);
display: grid;
gap: var(--space-4);
max-width: 34em;
}
.sec--hero .hero-proof li {
display: flex;
align-items: center;
gap: var(--space-3);
color: rgba(255, 255, 255, 0.82);
font-size: var(--text-sm);
line-height: 1.3;
font-weight: var(--w-medium);
}
.sec--hero .hero-proof .icon { width: 22px; height: 22px; color: var(--tolky-blue-200); }
.sec--hero .hero-proof span { text-wrap: balance; }
@media (min-width: 640px) {
.sec--hero .hero-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); max-width: none; }
.sec--hero .hero-proof li { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}
/* ─── Lado visual: placa sólida atrás do mock (profundidade por cor) ─── */
.sec--hero .hero-visual {
position: relative;
min-width: 0;
width: 100%;
max-width: 720px;
justify-self: start;
}
.sec--hero .hero-visual::before {
content: "";
position: absolute;
inset: 14px -12px -14px 12px;
background: var(--tolky-ink-700);
border-radius: var(--r-lg);
}
@media (min-width: 960px) {
.sec--hero .hero-visual { justify-self: stretch; max-width: none; }
.sec--hero .hero-visual::before { inset: 20px -20px -20px 20px; }
}
.sec--hero .hero-mock { position: relative; z-index: 1; }
.sec--hero .mock__url > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sec--hero .hero-mock__body {
padding: var(--space-5) var(--space-4) var(--space-4);
display: grid;
gap: var(--space-4);
}
@media (min-width: 640px) {
.sec--hero .hero-mock__body { padding: var(--space-5); gap: 18px; }
}
/* ─── Animação: cada [data-step] entra com fade + 6px ───────── */
.sec--hero .hero-mock [data-step] {
transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.sec--hero .hero-mock.is-playing [data-step]:not(.is-in) {
opacity: 0;
transform: translate3d(0, 6px, 0);
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
.sec--hero .hero-mock:not(.is-playing) [data-step] {
opacity: 0;
transform: translate3d(0, 6px, 0);
}
}
/* ─── Cabeçalho da análise ──────────────────────────────────── */
.sec--hero .hero-case {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-3) var(--space-4);
}
.sec--hero .hero-case__id { display: grid; gap: 2px; min-width: 0; }
.sec--hero .hero-case__label {
font-size: var(--text-xs);
font-weight: var(--w-semi);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-3);
}
.sec--hero .hero-case__number {
font-size: var(--text-lg);
font-weight: var(--w-bold);
letter-spacing: -0.005em;
color: var(--tolky-ink-700);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.sec--hero .hero-case__tally { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.sec--hero .hero-case__pages { font-size: var(--text-sm); color: var(--fg-3); font-weight: var(--w-medium); }
.sec--hero .hero-files {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sec--hero .hero-files li {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 8px;
border-radius: var(--r-sm);
background: var(--tolky-bg-soft);
border: 1px solid var(--border);
font-size: var(--text-xs);
font-weight: var(--w-medium);
color: var(--tolky-ink-700);
}
.sec--hero .hero-files .icon { width: 14px; height: 14px; color: var(--tolky-blue); }
@media (min-width: 640px) {
.sec--hero .hero-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sec--hero .hero-files li { display: flex; padding: 7px 10px; }
}
/* ─── Progresso ─────────────────────────────────────────────── */
.sec--hero .hero-progress { display: grid; gap: var(--space-4); }
@media (min-width: 640px) {
.sec--hero .hero-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}
.sec--hero .hero-prog__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: 8px;
white-space: nowrap;
}
.sec--hero .hero-prog__name { font-size: var(--text-sm); font-weight: var(--w-semi); color: var(--tolky-ink-700); }
.sec--hero .hero-prog__state {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-weight: var(--w-semi);
color: var(--tolky-blue-700);
font-variant-numeric: tabular-nums;
transition: color 180ms ease-out;
}
.sec--hero .hero-prog__state .icon { width: 14px; height: 14px; opacity: 0; transition: opacity 180ms ease-out; }
.sec--hero .hero-prog.is-done .hero-prog__state { color: #157A50; }
.sec--hero .hero-prog.is-done .hero-prog__state .icon { opacity: 1; }
.sec--hero .hero-prog__track { height: 6px; border-radius: 999px; background: var(--tolky-blue-050); overflow: hidden; }
.sec--hero .hero-prog__fill {
display: block;
height: 100%;
border-radius: inherit;
background: var(--tolky-blue);
transform: scaleX(var(--progress, 1));
transform-origin: left center;
transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* ─── Indícios ──────────────────────────────────────────────── */
.sec--hero .hero-finds { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sec--hero .hero-find {
display: grid;
gap: 8px;
padding: 12px 14px;
background: var(--tolky-bg-soft);
border: 1px solid var(--border);
border-left-width: 3px;
border-radius: var(--r-md);
}
.sec--hero .hero-find--danger { border-left-color: var(--danger); }
.sec--hero .hero-find--warn { border-left-color: var(--warn); }
.sec--hero .hero-find--ok { border-left-color: var(--ok); }
.sec--hero .hero-find__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px var(--space-3);
}
.sec--hero .hero-find__head .status { flex: 0 0 auto; }
.sec--hero .hero-find__title {
flex: 1 1 200px;
min-width: 0;
font-size: var(--text-sm);
font-weight: var(--w-semi);
line-height: 1.3;
color: var(--tolky-ink-700);
}
.sec--hero .hero-find__evidence {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px var(--space-3);
}
.sec--hero .hero-find__source {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
font-weight: var(--w-medium);
color: var(--fg-3);
}
.sec--hero .hero-find__source .icon { width: 14px; height: 14px; }
.sec--hero .hero-find__note { font-size: var(--text-xs); color: var(--fg-3); }
.sec--hero .hero-find__tag { padding: 3px 8px; border-radius: var(--r-sm); }
/* Trecho literal: o marcador "varre" o texto quando o indício entra. */
.sec--hero .hero-find__quote {
position: relative;
isolation: isolate;
display: inline-block;
max-width: 100%;
padding: 2px 6px;
border-radius: var(--r-xs);
background: transparent;
color: var(--tolky-ink-700);
font-size: var(--text-xs);
font-weight: var(--w-semi);
line-height: 1.4;
}
.sec--hero .hero-find__quote::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--tolky-blue-100);
transform-origin: left center;
transition: transform 360ms ease-out 200ms;
}
.sec--hero .hero-mock.is-playing .hero-find:not(.is-in) .hero-find__quote::before { transform: scaleX(0); }
/* ─── Rodapé do mock ────────────────────────────────────────── */
.sec--hero .hero-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid var(--border);
}
.sec--hero .hero-foot__summary { margin: 0; font-size: var(--text-sm); color: var(--fg-3); }
.sec--hero .hero-foot__summary strong { color: var(--tolky-ink-700); font-weight: var(--w-bold); }
.sec--hero .hero-foot__export {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 0 14px;
border-radius: var(--r-md);
background: var(--tolky-blue);
color: var(--tolky-white);
font-size: var(--text-sm);
font-weight: var(--w-semi);
white-space: nowrap;
}
.sec--hero .hero-foot__export .icon { width: 16px; height: 16px; }
/* Mobile: mock reduzido aos 3 primeiros indícios. */
@media (max-width: 639px) {
.sec--hero .hero-find:nth-child(n + 4) { display: none; }
}
/* src/styles/sections/nav.css */
/* Cabeçalho fixo (#topo). Todo seletor começa por #topo para não vazar para as seções.
* Mobile-first com a faixa de menu em max-width 959px; desktop a partir de 960px. */
#topo.site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 800;
height: 72px;
background: var(--tolky-ink-900);
border-bottom: 1px solid transparent;
}
#topo.site-nav.is-scrolled { border-bottom-color: rgba(255, 255, 255, 0.08); }
#topo .site-nav__inner {
height: 100%;
display: flex;
align-items: center;
gap: 12px;
}
#topo .site-nav__brand {
display: inline-flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
color: var(--tolky-white);
font-weight: var(--w-bold);
font-size: 17px;
letter-spacing: -0.01em;
text-decoration: none;
white-space: nowrap;
}
#topo .site-nav__glyph { width: 30px; height: 30px; flex-shrink: 0; }
#topo .site-nav__links { list-style: none; margin: 0; padding: 0; display: flex; }
#topo .site-nav__links a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: rgba(255, 255, 255, 0.78);
font-weight: var(--w-medium);
text-decoration: none;
}
#topo .site-nav__links a:hover,
#topo .site-nav__links a[aria-current="true"] { color: var(--tolky-white); }
#topo .site-nav__buttons { display: flex; flex-direction: column; gap: 12px; }
#topo .site-nav__cta-bar { display: none; }
/* Mobile (< 960px): o menu vira painel fixo abaixo do cabeçalho. */
@media (max-width: 959px) {
#topo .site-nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#topo .site-nav__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: var(--r-md);
background: transparent;
color: var(--tolky-white);
cursor: pointer;
}
#topo .site-nav__toggle .icon { width: 22px; height: 22px; }
#topo .site-nav__icon-close { display: none; }
#topo .site-nav__toggle[aria-expanded="true"] .site-nav__icon-menu { display: none; }
#topo .site-nav__toggle[aria-expanded="true"] .site-nav__icon-close { display: block; }
#topo .site-nav__menu { display: none; }
#topo.is-menu-open .site-nav__menu {
display: flex;
flex-direction: column;
gap: 24px;
position: fixed;
top: 72px;
right: 0;
bottom: 0;
left: 0;
padding: 8px 24px 32px;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--tolky-ink-900);
animation: site-nav-panel-in 200ms ease-out;
}
#topo .site-nav__links { flex-direction: column; }
#topo .site-nav__links li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
#topo .site-nav__links a { width: 100%; min-height: 56px; font-size: 18px; }
#topo .site-nav__buttons .btn { width: 100%; }
}
@keyframes site-nav-panel-in {
from { opacity: 0; transform: translate3d(0, -6px, 0); }
to { opacity: 1; transform: none; }
}
/* Entre 390px e 959px a CTA fica ao lado do botão de menu; abaixo de 390px ela vai para dentro do painel. */
@media (min-width: 390px) and (max-width: 959px) {
#topo .site-nav__cta-bar { display: inline-flex; min-height: 40px; padding: 0 14px; font-size: 14px; }
#topo .site-nav__cta { display: none; }
}
/* Em 390px a marca com glifo, a CTA e o botão de menu não cabem na faixa de 342px: o glifo sai até 429px. */
@media (min-width: 390px) and (max-width: 429px) {
#topo .site-nav__glyph { display: none; }
}
/* Desktop (>= 960px): links e botões em linha. */
@media (min-width: 960px) {
#topo .site-nav__actions { display: none; }
#topo .site-nav__menu { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); margin-left: auto; }
#topo .site-nav__links { flex-direction: row; gap: clamp(16px, 1.8vw, 28px); }
#topo .site-nav__links a { position: relative; font-size: clamp(14px, 1.33vw, 16px); }
#topo .site-nav__links a[aria-current="true"]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 4px;
height: 2px;
background: var(--tolky-blue-200);
}
#topo .site-nav__buttons { flex-direction: row; align-items: center; gap: 12px; }
}
/* Entre 960px e 1199px não cabem os cinco links, o botão Ver planos e o CTA na mesma linha. */
@media (min-width: 960px) and (max-width: 1199px) {
#topo .site-nav__plans { display: none; }
}
/* src/styles/sections/para-quem.css */
/* Para quem: três painéis ink sólidos sobre o azul. Texto dos painéis em branco e lavanda (AA sobre #1E2A5E). */
.sec--para-quem .lead {
max-width: 46ch;
font-size: clamp(24px, 2.2vw, 28px);
line-height: 1.3;
color: var(--tolky-white);
}
.sec--para-quem .pq-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
.sec--para-quem .pq-card {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-6) var(--space-5);
border-radius: var(--r-lg);
background: var(--tolky-ink-700);
color: var(--tolky-blue-100);
}
.sec--para-quem .pq-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.sec--para-quem .pq-card__num {
font-size: 56px;
font-weight: var(--w-light);
line-height: 1;
letter-spacing: -0.02em;
color: var(--tolky-blue-200);
}
.sec--para-quem .pq-card__top .icon {
width: 28px;
height: 28px;
color: var(--tolky-blue-100);
}
.sec--para-quem .pq-card__title {
margin: 0;
font-size: clamp(24px, 2.2vw, 30px);
line-height: 1.1;
font-weight: var(--w-bold);
color: var(--tolky-white);
}
.sec--para-quem .pq-card__scope {
margin: 0;
font-size: 17px;
line-height: 1.45;
color: var(--tolky-blue-100);
}
.sec--para-quem .pq-card__facts {
margin: 0;
display: grid;
gap: var(--space-4);
}
.sec--para-quem .pq-card__facts > div {
display: grid;
gap: 6px;
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.sec--para-quem .pq-card__facts dt,
.sec--para-quem .pq-card__label {
margin: 0;
font-size: var(--eyebrow);
font-weight: var(--w-semi);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tolky-blue-200);
}
.sec--para-quem .pq-card__facts dd {
margin: 0;
font-size: 16px;
line-height: 1.45;
color: var(--tolky-white);
}
.sec--para-quem .pq-card__uses {
display: grid;
gap: var(--space-3);
}
.sec--para-quem .pq-card__uses ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--space-3);
}
.sec--para-quem .pq-card__uses li {
position: relative;
padding-left: 20px;
font-size: 16px;
line-height: 1.45;
color: var(--tolky-white);
}
.sec--para-quem .pq-card__uses li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--tolky-blue-200);
}
.sec--para-quem .pq-card__cta {
align-self: flex-start;
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 17px;
font-weight: var(--w-semi);
color: var(--tolky-white);
text-decoration: underline;
text-decoration-color: var(--tolky-blue-200);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
cursor: pointer;
}
.sec--para-quem .pq-card__cta .icon {
width: 18px;
height: 18px;
transition: transform 180ms ease-out;
}
.sec--para-quem .pq-card__cta:hover .icon {
transform: translateX(3px);
}
@media (min-width: 960px) {
.sec--para-quem .pq-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5);
align-items: stretch;
}
.sec--para-quem .pq-card {
padding: var(--space-6);
}
}
/* src/styles/sections/planos.css */
/* Seção Planos. Sem sombra e sem gradiente: profundidade por contraste de cor sólida. */
.sec--planos [hidden] { display: none !important; }
/* ─── Topo: título à esquerda, seletor de ciclo à direita (só em tela larga) ───── */
.sec--planos .planos__top { display: grid; gap: var(--space-6); margin-bottom: var(--space-8); }
.sec--planos .planos__top .section-head { margin-bottom: 0; }
.sec--planos .planos__cycle { display: grid; gap: var(--space-3); justify-items: start; max-width: 320px; }
.sec--planos .planos__cycle-note { margin: 0; font-size: var(--text-sm); line-height: 1.35; color: var(--fg-3); min-height: 2.7em; }
@media (min-width: 1200px) {
.sec--planos .planos__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-7); }
.sec--planos .planos__top .section-head { flex: 1 1 0; min-width: 0; }
.sec--planos .planos__cycle { flex: 0 0 320px; justify-items: end; text-align: right; }
}
/* ─── Cards dos planos ──────────────────────────────────────── */
.sec--planos .plans { display: grid; grid-template-columns: 1fr; gap: 28px 20px; padding-top: 14px; }
@media (min-width: 640px) { .sec--planos .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sec--planos .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.sec--planos .plans__fallback { margin: 0; color: var(--fg-2); }
.sec--planos .plan {
position: relative; display: flex; flex-direction: column; gap: var(--space-5); min-width: 0;
padding: 28px 24px; background: var(--tolky-white); border: 1px solid var(--border); border-radius: var(--r-lg);
color: var(--fg-2);
}
.sec--planos .plan__badge {
position: absolute; top: 0; left: 24px; transform: translateY(-50%); margin: 0;
padding: 6px 14px; border-radius: 999px; background: var(--tolky-blue-200); color: var(--tolky-ink-900);
font-size: var(--text-sm); font-weight: var(--w-bold); line-height: 1.1; white-space: nowrap;
}
.sec--planos .plan__name { margin: 0; font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.01em; color: var(--tolky-ink-700); }
.sec--planos .plan__audience { margin: 0; font-size: var(--text-md); line-height: 1.4; color: var(--fg-2); }
@media (min-width: 640px) { .sec--planos .plan__audience { min-height: 2.8em; } }
@media (min-width: 1200px) { .sec--planos .plan__audience { min-height: 4.2em; } }
.sec--planos .plan__price { display: grid; gap: 4px; padding-top: var(--space-5); border-top: 1px solid var(--border); }
.sec--planos .plan__value { margin: 0; font-size: 36px; font-weight: var(--w-bold); line-height: 38px; letter-spacing: -0.02em; color: var(--tolky-ink-700); white-space: nowrap; }
.sec--planos .plan--custom .plan__value { font-size: 30px; }
.sec--planos .plan__period { margin: 0; font-size: var(--text-md); color: var(--fg-2); line-height: 1.3; }
.sec--planos .plan__billing { margin: 0; min-height: 1.3em; font-size: var(--text-sm); line-height: 1.3; color: var(--fg-3); }
.sec--planos .plan__price.is-swapping .plan__value,
.sec--planos .plan__price.is-swapping .plan__billing { animation: plan-swap 200ms ease-out; }
@keyframes plan-swap { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
.sec--planos .plan__quota { display: grid; gap: 6px; margin: 0; padding: 14px 16px; list-style: none; border-radius: var(--r-md); background: var(--tolky-blue-050); color: var(--tolky-ink-700); font-size: var(--text-md); line-height: 1.3; }
.sec--planos .plan__quota strong { font-weight: var(--w-bold); }
.sec--planos .plan__features { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; flex: 1 1 auto; align-content: start; }
.sec--planos .plan__features li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-md); line-height: 1.35; color: var(--tolky-ink-700); }
.sec--planos .plan__features .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--tolky-blue); }
.sec--planos .plan__cta { width: 100%; white-space: normal; text-align: center; padding: 0 16px; }
/* Plano em destaque: contraste sólido, sem sombra */
.sec--planos .plan--highlight { background: var(--tolky-ink-900); border-color: var(--tolky-ink-900); color: rgba(255, 255, 255, 0.78); }
.sec--planos .plan--highlight .plan__name,
.sec--planos .plan--highlight .plan__value { color: var(--tolky-white); }
.sec--planos .plan--highlight .plan__audience,
.sec--planos .plan--highlight .plan__period { color: rgba(255, 255, 255, 0.78); }
.sec--planos .plan--highlight .plan__billing { color: rgba(255, 255, 255, 0.66); }
.sec--planos .plan--highlight .plan__price { border-top-color: rgba(255, 255, 255, 0.16); }
.sec--planos .plan--highlight .plan__quota { background: var(--tolky-ink-700); color: var(--tolky-white); }
.sec--planos .plan--highlight .plan__features li { color: rgba(255, 255, 255, 0.9); }
.sec--planos .plan--highlight .plan__features .icon { color: var(--tolky-blue-200); }
.sec--planos .planos__fine { margin: var(--space-5) 0 var(--space-7); font-size: var(--text-sm); color: var(--fg-3); max-width: 70ch; }
/* ─── Faixa do teste grátis ─────────────────────────────────── */
.sec--planos .trial {
display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-5) var(--space-5);
padding: 28px 32px; margin-bottom: var(--space-9); border-radius: var(--r-lg); background: var(--tolky-blue-050);
}
.sec--planos .trial__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--tolky-white); color: var(--tolky-blue); }
.sec--planos .trial__icon .icon { width: 28px; height: 28px; }
.sec--planos .trial__label { margin: 0 0 6px; font-size: var(--text-2xl); font-weight: var(--w-bold); line-height: 1.1; letter-spacing: -0.01em; color: var(--tolky-ink-700); }
.sec--planos .trial__hint { margin: 0; font-size: var(--text-md); line-height: 1.35; color: var(--tolky-ink-700); }
.sec--planos .trial__cta { grid-column: 1 / -1; width: 100%; }
@media (min-width: 960px) {
.sec--planos .trial { grid-template-columns: auto 1fr auto; padding: 32px 40px; }
.sec--planos .trial__cta { grid-column: auto; width: auto; }
}
/* ─── UP + simulador ────────────────────────────────────────── */
.sec--planos .planos__tools { display: grid; gap: var(--space-6); margin-bottom: var(--space-9); align-items: stretch; }
@media (min-width: 960px) { .sec--planos .planos__tools { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.sec--planos .up { display: flex; flex-direction: column; gap: var(--space-5); padding: 36px 32px; background: var(--tolky-white); border: 1px solid var(--border); border-radius: var(--r-lg); }
.sec--planos .up__kicker { margin: 0; font-size: var(--text-sm); font-weight: var(--w-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tolky-blue); }
.sec--planos .up__title { margin: 0; font-size: clamp(32px, 4vw, 44px); line-height: 1; letter-spacing: -0.02em; }
.sec--planos .up__explain { margin: 0; font-size: var(--text-xl); line-height: 1.4; color: var(--fg-2); }
.sec--planos .up__example { margin: auto 0 0; padding: 28px 24px; display: grid; gap: var(--space-5); border-radius: var(--r-md); background: var(--tolky-bg-soft); border: 1px solid var(--border); }
.sec--planos .up__caption { font-size: var(--text-sm); font-weight: var(--w-semi); color: var(--tolky-ink-700); }
.sec--planos .up__bars { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.sec--planos .up__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 7.2em; align-items: center; gap: 12px; }
.sec--planos .up__label { font-size: var(--text-sm); font-weight: var(--w-bold); color: var(--tolky-ink-700); }
.sec--planos .up__track { display: block; height: 28px; border-radius: var(--r-xs); background: var(--tolky-blue-100); overflow: hidden; }
.sec--planos .up__fill {
display: block; height: 100%; width: 0; border-radius: var(--r-xs); background: var(--tolky-blue);
transition: width 240ms ease-out; transition-delay: calc(var(--order, 0) * 120ms);
}
.sec--planos .up.is-animated .up__fill { width: calc(var(--fill, 1) * 100%); }
.sec--planos .up__pages { font-size: var(--text-sm); color: var(--fg-3); white-space: nowrap; }
.sec--planos .up__total { margin: 0; font-size: var(--text-md); line-height: 1.35; color: var(--fg-2); }
.sec--planos .up__total strong { display: block; margin-bottom: 4px; font-size: var(--text-2xl); letter-spacing: -0.01em; color: var(--tolky-ink-700); }
/* Simulador: painel ink, resultado em cartão claro */
.sec--planos .sim {
--headline-color: var(--tolky-white);
display: flex; flex-direction: column; gap: var(--space-5); padding: 36px 32px;
background: var(--tolky-ink-900); color: rgba(255, 255, 255, 0.78); border-radius: var(--r-lg);
}
.sec--planos .sim__intro { display: flex; align-items: center; gap: var(--space-3); }
.sec--planos .sim__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--tolky-ink-700); color: var(--tolky-blue-200); }
.sec--planos .sim__title { margin: 0; font-size: var(--text-3xl); line-height: 1.1; letter-spacing: -0.01em; }
.sec--planos .sim__lead { margin: 0; font-size: var(--text-lg); line-height: 1.35; color: rgba(255, 255, 255, 0.78); }
.sec--planos .sim__form { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .sec--planos .sim__form { grid-template-columns: 1fr 1fr; } }
.sec--planos .sim .field__label { color: var(--tolky-white); }
.sec--planos .sim .field__input { font-size: var(--text-xl); font-weight: var(--w-bold); border-color: var(--tolky-blue-200); }
.sec--planos .sim .field__error { color: #FF9A9D; }
.sec--planos .sim .field__input[aria-invalid="true"] { border-color: #FF9A9D; }
.sec--planos .sim__result { display: grid; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.sec--planos .sim__ups { margin: 0; font-size: var(--text-md); line-height: 1.35; color: rgba(255, 255, 255, 0.78); }
.sec--planos .sim__ups strong { color: var(--tolky-white); }
.sec--planos .sim__placeholder { margin: 0; font-size: var(--text-md); color: rgba(255, 255, 255, 0.78); }
.sec--planos .sim__pick { display: grid; gap: 6px; padding: 24px; border-radius: var(--r-md); background: var(--tolky-white); color: var(--fg-2); justify-items: start; }
.sec--planos .sim__pick-label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--tolky-blue-050); color: var(--tolky-blue-700); font-size: var(--text-sm); font-weight: var(--w-bold); line-height: 1.2; }
.sec--planos .sim__pick-label .icon { width: 16px; height: 16px; }
.sec--planos .sim__pick-name { margin: 0; font-size: var(--text-4xl); font-weight: var(--w-bold); line-height: 1; letter-spacing: -0.02em; color: var(--tolky-ink-700); }
.sec--planos .sim__pick-cost { margin: 0; font-size: var(--text-lg); color: var(--tolky-ink-700); }
.sec--planos .sim__pick-cost strong { font-size: var(--text-3xl); letter-spacing: -0.01em; }
.sec--planos .sim__pick-cost span { white-space: nowrap; }
.sec--planos .sim__pick-meta { margin: 0; font-size: var(--text-md); line-height: 1.35; color: var(--fg-2); }
.sec--planos .sim__pick .btn { margin-top: var(--space-3); }
.sec--planos .sim__rows { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sec--planos .sim__row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.78); font-size: var(--text-sm); }
.sec--planos .sim__row-name { font-weight: var(--w-semi); color: var(--tolky-white); }
.sec--planos .sim__bar { display: block; height: 14px; border-radius: var(--r-xs); background: var(--tolky-ink-700); overflow: hidden; }
.sec--planos .sim__bar-fill { display: block; height: 100%; border-radius: var(--r-xs); background: var(--tolky-blue-700); }
.sec--planos .sim__row.is-cheapest .sim__bar-fill { background: var(--tolky-blue-200); }
.sec--planos .sim__row-cost { min-width: 116px; text-align: right; font-weight: var(--w-semi); color: var(--tolky-white); white-space: nowrap; }
.sec--planos .sim__note { margin: 0; font-size: var(--text-sm); line-height: 1.35; color: rgba(255, 255, 255, 0.7); }
/* ─── Tabela comparativa ────────────────────────────────────── */
.sec--planos .compare-block__title { margin-bottom: var(--space-6); }
/* position: relative mantém os .sr-only das células dentro da rolagem (absolute escapa do overflow sem ancestral posicionado) */
.sec--planos .compare { position: relative; overflow-x: auto; background: var(--tolky-white); border: 1px solid var(--border); border-radius: var(--r-lg); overscroll-behavior-x: contain; }
.sec--planos .compare:focus-visible { outline-offset: 0; }
.sec--planos .compare__table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: var(--text-md); }
.sec--planos .compare__table th,
.sec--planos .compare__table td { padding: 16px 20px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; color: var(--tolky-ink-700); line-height: 1.3; }
.sec--planos .compare__table tbody tr:last-child th,
.sec--planos .compare__table tbody tr:last-child td { border-bottom: 0; }
.sec--planos .compare__table thead th { font-size: var(--text-lg); font-weight: var(--w-bold); padding-top: 22px; padding-bottom: 22px; }
.sec--planos .compare__table tbody th { text-align: left; font-weight: var(--w-medium); color: var(--fg-2); width: 34%; background: var(--tolky-white); position: sticky; left: 0; }
.sec--planos .compare__table thead .compare__corner { position: sticky; left: 0; background: var(--tolky-white); }
.sec--planos .compare__table .is-highlight { background: #F4F6FF; }
.sec--planos .compare__table thead .is-highlight { background: var(--tolky-ink-900); color: var(--tolky-white); }
.sec--planos .compare__yes, .sec--planos .compare__no { display: inline-flex; align-items: center; justify-content: center; }
.sec--planos .compare__yes .icon { color: var(--tolky-blue); width: 22px; height: 22px; }
.sec--planos .compare__no .icon { color: #8A8F9E; width: 20px; height: 20px; }
.sec--planos .compare__hint { display: none; margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--fg-3); }
@media (max-width: 639px) {
.sec--planos .compare__hint { display: block; }
.sec--planos .compare__table { min-width: 600px; }
.sec--planos .compare__table tbody th { width: 150px; min-width: 150px; font-size: var(--text-sm); border-right: 1px solid var(--border); }
.sec--planos .compare__table th, .sec--planos .compare__table td { padding: 14px 12px; }
.sec--planos .compare__table thead th { font-size: var(--text-md); }
.sec--planos .up, .sec--planos .sim { padding: 28px 20px; }
.sec--planos .trial { padding: 24px 20px; }
.sec--planos .sim__row { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 8px; }
.sec--planos .sim__pick { padding: 20px; }
.sec--planos .up__row { grid-template-columns: 36px minmax(0, 1fr); }
.sec--planos .up__pages { grid-column: 2; margin-top: -6px; }
}
/* src/styles/sections/problema.css */
/* Problema: título e contexto, faixa de três números, depois veredito e dores separadas por divisores.
* Sem cards e sem sombra: profundidade só por cor sólida (lavanda) e linhas finas. */
.sec--problema .eyebrow { color: var(--tolky-blue-600); }
.sec--problema .title-lg { line-height: 1; }
.sec--problema .problema__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.sec--problema .problema__context { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.sec--problema .problema__context p { margin: 0; }
.sec--problema .problema__cnj { font-size: 16px; line-height: 1.5; color: var(--tolky-text-muted); }
@media (min-width: 960px) {
.sec--problema .problema__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 64px; }
}
/* Faixa de números: 1 coluna até 959px, 3 colunas a partir de 960px. Valor sem quebra de linha. */
.sec--problema .problema__stats {
list-style: none; margin: 80px 0 0; padding: 0;
display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--tolky-ink-700);
}
.sec--problema .problema__stat { padding: 28px 0 0; }
.sec--problema .problema__stat + .problema__stat { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
.sec--problema .problema__value {
margin: 0; font-size: clamp(32px, 3.2vw, 48px); font-weight: var(--w-bold);
line-height: 1; letter-spacing: -0.02em; color: var(--tolky-ink-700);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sec--problema .problema__label { margin: 16px 0 0; font-size: 18px; font-weight: var(--w-medium); line-height: 1.3; color: var(--tolky-ink-700); }
.sec--problema .problema__source { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--tolky-text-muted); }
@media (min-width: 960px) {
.sec--problema .problema__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sec--problema .problema__stat { padding: 32px 32px 0; }
.sec--problema .problema__stat:first-child { padding-left: 0; }
.sec--problema .problema__stat + .problema__stat { margin-top: 0; padding-top: 32px; border-top: 0; border-left: 1px solid var(--border); }
}
/* Veredito à esquerda (painel lavanda sólido), dores à direita com divisores. */
.sec--problema .problema__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 96px; }
.sec--problema .problema__verdict { padding: 36px; border-radius: var(--r-lg); background: var(--tolky-blue-050); }
.sec--problema .problema__verdict-title {
margin: 0 0 16px; font-size: clamp(28px, 2.8vw, 40px); font-weight: var(--w-bold);
line-height: 1.05; color: var(--tolky-ink-700);
}
.sec--problema .problema__verdict p { margin: 0; font-size: 18px; line-height: 1.4; color: var(--tolky-ink-700); }
@media (min-width: 960px) {
.sec--problema .problema__body { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: 96px; }
}
.sec--problema .problema__dores { list-style: none; margin: 0; padding: 0; }
.sec--problema .problema__dor {
display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px;
padding: 28px 0; border-top: 1px solid var(--border);
}
.sec--problema .problema__dor:last-child { border-bottom: 1px solid var(--border); }
.sec--problema .problema__dor:nth-child(2) { transition-delay: 60ms; }
.sec--problema .problema__dor:nth-child(3) { transition-delay: 120ms; }
.sec--problema .problema__dor:nth-child(4) { transition-delay: 180ms; }
.sec--problema .problema__dor-icon {
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: var(--r-md);
background: var(--tolky-blue-050); color: var(--tolky-blue-600);
}
.sec--problema .problema__dor-icon .icon { width: 24px; height: 24px; }
.sec--problema .problema__dor-title { margin: 0; font-size: 20px; font-weight: var(--w-bold); line-height: 1.2; color: var(--tolky-ink-700); }
.sec--problema .problema__dor p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--tolky-text); }
/* src/styles/sections/testes.css */
/* Seção Testes. Todo seletor começa por .sec--testes.
* A animação só existe com .testes-grid--motion (JS, quando não há reducedMotion). */
.sec--testes .testes-counts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
margin: 0 0 var(--space-7);
padding: var(--space-5) 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sec--testes .testes-counts__item { min-width: 0; }
.sec--testes .testes-counts dt {
font-size: var(--caption);
font-weight: var(--w-medium);
color: rgba(255, 255, 255, 0.6);
}
.sec--testes .testes-counts dd {
margin: var(--space-1) 0 0;
font-size: clamp(32px, 3.6vw, 48px);
font-weight: var(--w-bold);
line-height: 1;
color: var(--tolky-white);
}
.sec--testes .testes-grid {
display: grid;
grid-template-columns: repeat(var(--testes-cols, 1), minmax(0, 1fr));
gap: var(--space-4);
align-items: start;
}
.sec--testes .testes-col {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-width: 0;
}
.sec--testes .testes-card {
margin: 0;
padding: var(--space-5);
border-radius: var(--r-lg);
background: var(--tolky-ink-700);
color: rgba(255, 255, 255, 0.72);
}
.sec--testes .testes-card__head {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-4);
}
.sec--testes .testes-card__titles { min-width: 0; }
.sec--testes .testes-card__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: var(--r-md);
background: var(--tolky-ink-900);
color: var(--tolky-blue-200);
}
.sec--testes .testes-card__icon svg { width: 22px; height: 22px; }
.sec--testes .testes-card__name {
margin: 0;
font-size: var(--body-lg);
line-height: 1.2;
font-weight: var(--w-semi);
color: var(--tolky-white);
}
.sec--testes .testes-card__count {
margin: 2px 0 0;
font-size: var(--caption);
font-weight: var(--w-medium);
color: var(--tolky-blue-200);
}
.sec--testes .testes-card__summary {
margin: 0 0 var(--space-4);
font-size: var(--text-md);
line-height: 1.4;
}
.sec--testes .testes-card__list {
margin: 0;
padding: var(--space-3) 0 0;
list-style: none;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sec--testes .testes-item {
display: flex;
align-items: flex-start;
gap: var(--space-2);
min-width: 0;
padding: 6px 0;
font-size: var(--text-sm);
line-height: 1.4;
}
.sec--testes .testes-item__icon {
display: inline-flex;
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 1px;
color: var(--tolky-blue-200);
}
.sec--testes .testes-item__icon svg { width: 16px; height: 16px; }
.sec--testes .testes-item__text { min-width: 0; color: rgba(255, 255, 255, 0.86); }
.sec--testes .testes-item--reserved .testes-item__icon { color: rgba(255, 255, 255, 0.5); }
.sec--testes .testes-item__fake {
flex: 1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
color: rgba(255, 255, 255, 0.8);
filter: blur(5px);
user-select: none;
-webkit-user-select: none;
}
.sec--testes .testes-grid--motion .testes-card {
opacity: 0;
transform: translate3d(0, 6px, 0);
transition: opacity 240ms ease-out, transform 240ms ease-out;
}
.sec--testes .testes-grid--motion .testes-card.is-visible {
opacity: 1;
transform: none;
}
.sec--testes .testes-grid--motion .testes-item__fake {
animation: testes-shimmer 3.6s ease-in-out infinite;
animation-delay: calc(var(--testes-shimmer-offset, 0) * -3.6s);
}
@keyframes testes-shimmer {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}