/* =====================================================================
THE LASTING ROUTINE — DESIGN SYSTEM v1.0
Fonte da verdade: Identity Kit (paleta + tipografia cravadas)
Autoria: Pina · Missão Design do Funil · 07/07/2026
Uso: colar no build funnel-tlr/public/ e referenciar em todas as telas.
Mobile-first. Weight-free. WCAG AA. Sem hype.
=====================================================================
Cores oficiais (Identity Kit):
Cream #F4EFE6 · Greige #DCD3C4 · Sage #9FAA96
Deep Pine #22342A (primária) · Bark #2E2A22 (texto) · Clay #B08A6A (acento quente)
Tipografia: Cormorant Garamond (display) + Mulish (corpo)
===================================================================== */
/* ---------- Google Fonts (carregar no de cada página) ----------
------------------------------------------------------------------------ */
:root {
/* === PALETA RAIZ (Identity Kit — não alterar) === */
--tlr-cream: #F4EFE6;
--tlr-greige: #DCD3C4;
--tlr-sage: #9FAA96;
--tlr-pine: #22342A;
--tlr-bark: #2E2A22;
--tlr-clay: #B08A6A;
/* === TONS DERIVADOS (harmônicos, extraídos do kit) === */
--tlr-cream-hi: #FBF8F1; /* superfície elevada, mais clara que o fundo */
--tlr-sand: #E4DBCB; /* superfície neutra quente */
--tlr-greige-2: #E0D6C4; /* linhas/bordas suaves */
--tlr-sage-mist: #C7CDBF; /* sage lavado, fundos calmos */
--tlr-pine-deep: #1A2820; /* pinho mais fundo, profundidade/gradiente */
--tlr-clay-ink: #8A6248; /* clay escurecido p/ TEXTO (AA em título) */
--tlr-muted: #6E6A5E; /* texto secundário em fundo claro (uso ≥16px) */
--tlr-ink-soft: #55513F; /* texto secundário AA-safe p/ corpo pequeno */
/* === TOKENS SEMÂNTICOS === */
--bg: var(--tlr-cream);
--surface: var(--tlr-cream-hi);
--surface-alt: var(--tlr-sand);
--surface-sage: var(--tlr-sage-mist);
--ink: var(--tlr-bark); /* texto primário */
--ink-soft: var(--tlr-ink-soft); /* texto secundário */
--ink-muted: var(--tlr-muted); /* labels/eyebrow */
--ink-inverse: var(--tlr-cream); /* texto sobre pinho */
--primary: var(--tlr-pine);
--primary-ink: var(--tlr-cream);
--accent: var(--tlr-clay); /* fills/decoração */
--accent-ink: var(--tlr-clay-ink); /* palavra-acento em título */
--line: rgba(46,42,34,0.12);
--line-strong: rgba(46,42,34,0.20);
--focus: var(--tlr-sage);
/* === TIPOGRAFIA === */
--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
/* Escala fluida mobile-first (clamp min → ideal → max) */
--fs-display: clamp(2.7rem, 10vw, 4.25rem); /* H1 hero */
--fs-h1: clamp(2.1rem, 7.5vw, 3.1rem);
--fs-h2: clamp(1.7rem, 6vw, 2.4rem);
--fs-h3: clamp(1.35rem, 4.6vw, 1.7rem);
--fs-lead: clamp(1.1rem, 3.4vw, 1.3rem); /* subhead/lead */
--fs-body: 1.0625rem; /* 17px */
--fs-sm: 0.9375rem; /* 15px */
--fs-xs: 0.8125rem; /* 13px */
--fs-eyebrow: 0.75rem;
--lh-tight: 1.02;
--lh-snug: 1.2;
--lh-body: 1.62;
/* === ESPAÇAMENTO (ritmo 4/8) === */
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
--sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
--sp-9: 6rem; --sp-10: 8rem;
/* === RAIO / SOMBRA / MOVIMENTO === */
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 24px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(34,52,42,0.06);
--shadow: 0 8px 30px -14px rgba(34,52,42,0.20);
--shadow-lg: 0 26px 70px -30px rgba(34,52,42,0.32);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur: 240ms;
/* === LARGURAS === */
--content: 33rem; /* leitura confortável mobile-first (~528px) */
--wide: 46rem; /* seções mais largas em desktop */
}
/* ---------- RESET LEVE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
/* ---------- TIPOGRAFIA ---------- */
.display, h1.tlr { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display);
line-height: var(--lh-tight); letter-spacing: -0.015em; margin: 0; color: var(--ink); }
.h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: -0.01em; margin: 0; }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); margin: 0; }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; margin: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); }
.body { font-size: var(--fs-body); line-height: var(--lh-body); }
.small { font-size: var(--fs-sm); }
.muted { color: var(--ink-soft); }
.serif { font-family: var(--font-display); }
.italic { font-style: italic; }
.accent-word { color: var(--accent-ink); font-style: italic; } /* palavra-acento em título serif */
.eyebrow {
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
}
/* ---------- LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap--wide { max-width: var(--wide); }
.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-6); }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.center { text-align: center; }
/* Filete botânico / divisor sutil */
.rule { height: 1px; background: var(--line); border: 0; margin-block: var(--sp-6); }
.rule--sprig { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); color: var(--tlr-sage); }
.rule--sprig::before, .rule--sprig::after { content: ""; height: 1px; width: 3rem; background: var(--line-strong); }
/* ---------- BOTÕES ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem;
letter-spacing: 0.01em; line-height: 1;
padding: 1.15rem 1.9rem; border: 0; border-radius: var(--radius-pill);
background: var(--primary); color: var(--primary-ink);
box-shadow: var(--shadow); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
min-height: 56px; /* alvo de toque generoso */
}
.btn:hover { background: var(--tlr-pine-deep); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(0); }
.btn--block { display: flex; width: 100%; }
.btn--ghost { background: transparent; color: var(--primary); box-shadow: none; border: 1.5px solid var(--line-strong); }
.btn--ghost:hover { background: rgba(34,52,42,0.06); transform: none; box-shadow: none; }
.btn--clay { background: var(--accent); color: #fff; }
.btn--clay:hover { background: #9a744f; }
.btn__hint { display:block; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); color: var(--ink-muted); margin-top: var(--sp-3); text-align:center; }
/* ---------- CARTÃO ---------- */
.card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: var(--sp-6);
box-shadow: var(--shadow-sm);
}
.card--pine { background: var(--primary); color: var(--ink-inverse); border-color: transparent; }
.card--sage { background: var(--surface-sage); border-color: transparent; }
.card--sand { background: var(--surface-alt); border-color: transparent; }
/* ---------- OPÇÃO ÚNICA (radio tappable) ---------- */
.options { display: flex; flex-direction: column; gap: var(--sp-3); }
.option {
display: flex; align-items: center; gap: var(--sp-4);
width: 100%; text-align: left;
background: var(--surface); border: 1.5px solid var(--line);
border-radius: var(--radius); padding: 1.1rem 1.25rem;
font-size: var(--fs-body); color: var(--ink); line-height: 1.35;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
min-height: 60px;
}
.option:hover { border-color: var(--tlr-sage); background: var(--tlr-cream-hi); }
.option__dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
border: 2px solid var(--line-strong); transition: all var(--dur) var(--ease); }
.option[aria-checked="true"], .option.is-selected {
border-color: var(--primary); background: var(--tlr-cream-hi);
box-shadow: 0 0 0 1px var(--primary) inset;
}
.option.is-selected .option__dot { border-color: var(--primary); background: var(--primary);
box-shadow: inset 0 0 0 4px var(--surface); }
/* ---------- ESCALA (Q1/Q7) ---------- */
.scale { display: flex; flex-direction: column; gap: var(--sp-3); }
.scale__row { display: flex; justify-content: space-between; gap: var(--sp-2); }
.scale__step {
flex: 1; aspect-ratio: 1 / 1; min-height: 46px; border-radius: var(--radius-sm);
border: 1.5px solid var(--line); background: var(--surface);
display: flex; align-items: center; justify-content: center;
font-weight: 700; color: var(--ink-muted);
transition: all var(--dur) var(--ease);
}
.scale__step:hover { border-color: var(--tlr-sage); }
.scale__step.is-selected { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); transform: translateY(-2px); }
.scale__ends { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-muted); }
/* ---------- CARD DECK "this is me" (V/F swipe) ---------- */
.deck { display: grid; gap: var(--sp-4); }
.deck__card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: var(--sp-6); box-shadow: var(--shadow); text-align: center;
}
.deck__phrase { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; }
.deck__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.deck__btn { flex: 1; border-radius: var(--radius-pill); padding: 0.95rem; font-weight: 700; border: 1.5px solid var(--line-strong); background: transparent; min-height: 52px; }
.deck__btn--yes { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.deck__btn--no { color: var(--ink-soft); }
.deck__count { font-size: var(--fs-xs); color: var(--ink-muted); text-align: center; margin-top: var(--sp-3); letter-spacing: 0.04em; }
/* ---------- CHIP / PILAR MULTI (Q6) e PICK-3 (Q4) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.chip {
display: inline-flex; align-items: center; gap: 0.5em;
border: 1.5px solid var(--line-strong); background: var(--surface);
border-radius: var(--radius-pill); padding: 0.75rem 1.15rem;
font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
transition: all var(--dur) var(--ease); min-height: 48px;
}
.chip:hover { border-color: var(--tlr-sage); }
.chip.is-selected { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.chip.is-selected .chip__check { opacity: 1; }
.chip__check { opacity: 0; font-weight: 800; }
/* ---------- BARRA DE PROGRESSO ---------- */
.progress { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); padding: var(--sp-4) var(--sp-5) var(--sp-3); }
.progress__track { height: 5px; background: var(--tlr-greige); border-radius: var(--radius-pill); overflow: hidden; }
.progress__fill { height: 100%; background: linear-gradient(90deg, var(--tlr-sage), var(--tlr-pine)); border-radius: var(--radius-pill); transition: width 400ms var(--ease); }
.progress__label { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-muted); margin-bottom: var(--sp-2); letter-spacing: 0.04em; }
/* ---------- TRANSIÇÃO FULL-SCREEN ---------- */
.transition {
min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center;
background: var(--primary); color: var(--ink-inverse); padding: var(--sp-6);
}
.transition__phrase { font-family: var(--font-display); font-weight: 500; font-style: italic;
font-size: clamp(1.7rem, 6.5vw, 2.6rem); line-height: 1.28; max-width: 22ch; }
/* ---------- CAMPO (gate de e-mail) ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__input {
width: 100%; font-family: var(--font-body); font-size: 1.0625rem; color: var(--ink);
background: var(--surface); border: 1.5px solid var(--line-strong);
border-radius: var(--radius); padding: 1.05rem 1.15rem; min-height: 56px;
}
.field__input::placeholder { color: var(--ink-muted); }
.field__input:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--primary); }
/* ---------- STAYING POWER (número-herói) ---------- */
.sp { text-align: center; }
.sp__label { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.sp__number { font-family: var(--font-display); font-weight: 600; font-size: clamp(5rem, 26vw, 9rem); line-height: 0.9; color: var(--primary); letter-spacing: -0.02em; }
.sp__arrow { color: var(--tlr-sage); font-size: 1.6rem; }
.sp__band { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; color: var(--primary);
background: var(--surface-sage); border-radius: var(--radius-pill); padding: 0.5rem 1.1rem; margin-top: var(--sp-2); }
.sp__scale { height: 8px; border-radius: var(--radius-pill); margin-top: var(--sp-4);
background: linear-gradient(90deg, var(--tlr-sand), var(--tlr-sage) 55%, var(--tlr-pine)); position: relative; }
.sp__scale::after { content: "↑"; position: absolute; top: -1.4rem; color: var(--tlr-sage); font-weight: 800; }
.sp__micro { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: var(--sp-4); font-style: italic; }
/* ---------- BADGE / TAG ---------- */
.badge { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--fs-xs); font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary);
background: var(--surface-sage); border-radius: var(--radius-pill); padding: 0.4rem 0.9rem; }
/* ---------- VALUE STACK (oferta) ---------- */
.stack-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.stack-row__name { font-weight: 600; }
.stack-row__val { font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.stack-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--sp-4); }
.price { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 9vw, 3.4rem); color: var(--primary); line-height: 1; }
.price__old { font-size: var(--fs-sm); color: var(--ink-muted); } /* SOMENTE "total value", nunca preço riscado fictício */
/* ---------- EMBLEMA (Root & Shoot, inline SVG usa currentColor) ---------- */
.emblem { display: inline-block; color: var(--primary); }
.emblem--cream { color: var(--tlr-cream); }
.emblem--clay { color: var(--accent); }
/* ---------- UTIL ---------- */
.hero-media { border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(160deg, var(--tlr-sage-mist), var(--tlr-sand)); aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.disclaimer { font-size: var(--fs-xs); color: var(--ink-muted); text-align: center; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* ---------- DESKTOP (progressivo — o funil é mobile-first) ---------- */
@media (min-width: 720px) {
.deck { grid-template-columns: 1fr; }
.section { padding-block: var(--sp-9); }
}