/* ═══════════════════════════════════════════════════════ SPOT — STYLES (shared across all pages) ───────────────────────────────────────────────────────── ARQUITETURA dark mode (2026-05-24, Agent 6): - Anti-FOUC inline (em cada HTML) lê localStorage + matchMedia e pina data-theme="dark|light" no SEMPRE. - Aqui no CSS, dark mode usa APENAS [data-theme="dark"] como seletor — não há mais @media (prefers-color-scheme: dark) duplicando regras. Isso removeu ~150 linhas em 2026-05-24. - scripts.js mantém data-theme sincronizado quando user toca no toggle ou quando o SO muda de tema em modo "auto". LINT TODO (sprint futuro): - .quad-big-desc tem `flex: 1` — só funciona com 1 paragraph por card. casos.html usa quad-big-desc--spaced/--divided pra forçar flex:0 0 auto quando empilha vários parágrafos. - Spacing utilities (.u-mb-4, .u-mt-8, .u-text-center) adicionadas em 2026-05-24; se a quantidade crescer, migrar pra utility-first system (Tailwind-like) ou consolidar em token system mais robusto. - Algumas regras ainda têm magic numbers (ex: padding/width em px); candidato a futuro sprint de design tokens. - Alguns componentes ainda animam transition em propriedades não-GPU (border-color). Mantido pra paridade visual com versão anterior; auditar Lighthouse "Performance: Avoid non-composited animations" no próximo sprint. ═══════════════════════════════════════════════════════ */ :root { --bg-0: #F5F4EE; --bg-1: #FAFAF6; --bg-2: #FFFFFF; --bg-warm: #EFEEE6; --bg-dark: #0F0529; --surface: rgba(15, 5, 41, 0.03); --border: rgba(15, 5, 41, 0.10); --border-strong: rgba(15, 5, 41, 0.18); --border-faint: rgba(15, 5, 41, 0.06); --text-1: #0F0529; --text-2: #2E1F4D; --text-3: #534270; --text-4: #8678A3; --text-on-dark: #F5F4FF; --accent: #C8FF00; --accent-dim: #6B8B00; --accent-text: #4A5D00; --accent-soft: rgba(200, 255, 0, 0.18); --purple: #9650FF; --purple-deep: #5B2EB8; --teal: #057B72; --wine: #7A1F3D; --copper: #B86B22; --sky: #2F73B7; /* Nav backdrop (cream when light, deep purple when dark) */ --nav-bg: rgba(245, 244, 238, 0.85); --noise-blend: multiply; --display: 'Inter', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-full: 999px; --shadow-sm: 0 1px 2px rgba(15, 5, 41, 0.04); --shadow-md: 0 4px 12px -2px rgba(15, 5, 41, 0.06), 0 2px 4px rgba(15, 5, 41, 0.04); --shadow-lg: 0 16px 32px -8px rgba(15, 5, 41, 0.10); --shadow-lime: 0 8px 24px -8px rgba(200, 255, 0, 0.60); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Duration palette — Frequency Gate (Emil/Krehel): 150ms = interactive feedback (hover/active/toggle) 250ms = transition (state change, panel reveal) 400ms = entrance/dramatic (first-visit only) */ --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; } /* ═══════════════════════════════════════════════════════ DARK THEME — palette inversion via [data-theme="dark"] Mantém --accent (lime) e --purple iguais (funcionam nos dois). Texto/superfícies invertem para um deep-purple noturno. Bloco único: anti-FOUC pina data-theme=dark|light sempre, incluindo modo "auto" (resolvido por prefers-color-scheme no JS). ═══════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg-0: #0F0529; --bg-1: #15083A; --bg-2: #1C0F4D; --bg-warm: #1A0A45; --bg-dark: #08021A; --surface: rgba(245, 244, 255, 0.05); --border: rgba(245, 244, 255, 0.12); --border-strong: rgba(245, 244, 255, 0.22); --border-faint: rgba(245, 244, 255, 0.07); --text-1: #F5F4FF; --text-2: #C5C0E0; --text-3: #8678A3; --text-4: #6F628F; --text-on-dark: #F5F4FF; /* A11y: em dark mode, --accent-dim/--accent-text precisam ser CLAROS pra contrastar com bg escuros (text >=4.5:1 sobre #0F0529). #DCFF66 = 13:1 sobre bg-0; #C8FF00 = 17:1. */ --accent-dim: #DCFF66; --accent-text: #C8FF00; --accent-soft: rgba(200, 255, 0, 0.14); --nav-bg: rgba(15, 5, 41, 0.78); --noise-blend: screen; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.28); --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.55); } /* Auto-dark via @media foi REMOVIDO em 2026-05-24 (Agent 6). Agora o anti-FOUC inline (em cada HTML) e o scripts.js pinam [data-theme="dark|light"] sempre, resolvendo prefers-color-scheme no JS. Isso eliminou ~150 linhas de CSS duplicado. Veja LINT TODO no topo do arquivo. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 80px; background: var(--bg-0); } body { font-family: var(--display); background: var(--bg-0); color: var(--text-1); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; } body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.025; pointer-events: none; z-index: 1; mix-blend-mode: var(--noise-blend); } ::selection { background: var(--accent); color: var(--text-1); } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } main, header, footer { position: relative; z-index: 2; } .container { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 768px) { .container { padding: 0 2rem; } } .container--narrow { max-width: 920px; } /* ═════ NAV ═════ */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: var(--nav-bg); border-bottom: 1px solid var(--border-faint); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; max-width: 1240px; margin: 0 auto; gap: 1rem; } @media (min-width: 768px) { .nav-inner { padding: 1rem 2rem; } } .brand { display: flex; align-items: center; gap: 0.625rem; font-weight: 800; font-size: 1.625rem; letter-spacing: -0.03em; color: var(--text-1); text-transform: lowercase; } .brand .pin { width: 32px; height: 32px; background: var(--accent); -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .nav-links { display: none; gap: 0.25rem; } .nav-link { padding: 0.5rem 1rem; border-radius: var(--r-full); color: var(--text-2); font-size: 0.875rem; font-weight: 500; transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out); } .nav-link:hover { color: var(--text-1); background: var(--surface); } .nav-link--active { color: var(--text-1); background: var(--accent-soft); font-weight: 600; } @media (min-width: 960px) { .nav-links { display: flex; } } .nav-cta { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background: var(--text-1); color: var(--bg-0); border-radius: var(--r-full); font-size: 0.875rem; font-weight: 600; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); white-space: nowrap; } .nav-cta:hover { background: var(--accent); color: var(--text-1); } /* ═════ BUTTONS ═════ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9375rem 1.75rem; border-radius: var(--r-full); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out); border: 1.5px solid transparent; white-space: nowrap; cursor: pointer; } .btn-primary { background: var(--accent); color: var(--text-1); border-color: var(--text-1); box-shadow: 4px 4px 0 var(--text-1); } .btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--text-1); } .btn-primary:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--text-1); } .btn-ghost { background: transparent; color: var(--text-1); border-color: var(--text-1); } .btn-ghost:hover { background: var(--text-1); color: var(--bg-0); } .btn-dark { background: var(--text-1); color: var(--bg-0); } .btn-dark:hover { background: var(--accent); color: var(--text-1); } /* ═════ HERO (home) ═════ */ .hero { padding: 4rem 0 5rem; position: relative; } @media (min-width: 768px) { .hero { padding: 6rem 0 7rem; } } .hero::before { content: ''; position: absolute; top: 0; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%); z-index: 0; pointer-events: none; } .hero-inner { position: relative; z-index: 1; } .eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.875rem; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--r-full); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); margin-bottom: 1.75rem; font-weight: 600; } .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); border: 1px solid var(--text-1); } .hero-title { font-size: clamp(2.75rem, 8vw, 6rem); line-height: 0.92; margin-bottom: 1.75rem; font-weight: 900; letter-spacing: -0.04em; text-transform: uppercase; color: var(--text-1); } .hero-title .lime { color: var(--accent-dim); } .hero-sub { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--text-2); max-width: 56ch; margin-bottom: 2.5rem; line-height: 1.55; } .hero-cta-strip { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 1.625rem; background: var(--accent); color: var(--text-1); border: 1.5px solid var(--text-1); border-radius: var(--r-full); font-weight: 900; font-size: 0.9375rem; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--text-1); margin-bottom: 3.5rem; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out); } .hero-cta-strip:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--text-1); } .hero-section-label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); margin-bottom: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 0.625rem; } .hero-section-label::after { content: ''; flex: 1; max-width: 60px; height: 1.5px; background: var(--text-1); } .hero-section-label .lime { color: var(--accent-dim); font-weight: 800; } .benefits-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 700px) { .benefits-row { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } } .benefit { padding: 1.5rem 1.25rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; position: relative; transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .benefit:hover { transform: translateY(-3px); border-color: var(--text-1); box-shadow: var(--shadow-md); } .benefit-num { width: 28px; height: 28px; border-radius: 50%; background: var(--text-1); color: var(--bg-0); display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 0.8125rem; } .benefit-icon { width: 36px; height: 36px; color: var(--accent-dim); display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; } .benefit-text { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; color: var(--text-1); line-height: 1.25; } /* ═════ PAGE HERO (for section detail pages) ═════ */ .page-hero { padding: 4rem 0 3rem; position: relative; border-bottom: 1px solid var(--border); } @media (min-width: 768px) { .page-hero { padding: 6rem 0 5rem; } } .page-hero::before { content: ''; position: absolute; top: -10%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%); z-index: 0; pointer-events: none; } .page-hero-inner { position: relative; z-index: 1; } .page-hero-num { font-family: var(--display); font-size: clamp(4rem, 12vw, 9rem); font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 2.5px var(--text-1); letter-spacing: -0.05em; margin-bottom: 1rem; display: block; } .page-hero-tag { font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--purple-deep); margin-bottom: 1rem; font-weight: 600; display: flex; align-items: center; gap: 0.625rem; } .page-hero-tag::before { content: ''; width: 36px; height: 1.5px; background: currentColor; } .page-hero-title { font-size: clamp(2.25rem, 6vw, 4.5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; margin-bottom: 1.25rem; color: var(--text-1); text-transform: uppercase; } .page-hero-title .lime { color: var(--accent-dim); } .page-hero-desc { color: var(--text-2); font-size: 1.125rem; max-width: 56ch; line-height: 1.55; } /* ═════ SECTIONS ═════ */ .section { padding: 5rem 0; position: relative; } @media (min-width: 900px) { .section { padding: 7rem 0; } } .section-cream { background: var(--bg-warm); } .section-head { margin-bottom: 3.5rem; max-width: 760px; } .section-num { font-family: var(--display); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--text-1); letter-spacing: -0.04em; margin-bottom: 0.5rem; display: block; } .section-tag { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple-deep); margin-bottom: 1rem; font-weight: 600; display: flex; align-items: center; gap: 0.625rem; } .section-tag::before { content: ''; width: 28px; height: 1.5px; background: currentColor; } .section-title { font-size: clamp(2rem, 4.75vw, 3.5rem); font-weight: 900; letter-spacing: -0.032em; line-height: 1.02; margin-bottom: 1rem; color: var(--text-1); text-transform: uppercase; } .section-title .lime { color: var(--accent-dim); } .section-desc { color: var(--text-2); font-size: 1.0625rem; max-width: 56ch; line-height: 1.6; } /* ═════ POR QUE — 4 cards ═════ */ .reasons { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2rem; } @media (min-width: 700px) { .reasons { grid-template-columns: repeat(2, 1fr); } } .reason { position: relative; padding: 2rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-xl); transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out); isolation: isolate; } .reason:hover { transform: translateY(-4px); border-color: var(--text-1); box-shadow: var(--shadow-lg); } .reason-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .reason-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--text-1); display: grid; place-items: center; color: var(--text-1); font-size: 1.5rem; font-weight: 800; } .reason-num { width: 32px; height: 32px; border-radius: 50%; background: var(--text-1); color: var(--bg-0); display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 0.875rem; } .reason-title { font-size: 1.625rem; font-weight: 900; letter-spacing: -0.025em; margin-bottom: 0.625rem; text-transform: uppercase; } .reason-desc { color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; } /* ═════ BIG REASON (for detail pages — bigger layout) ═════ */ .reason-big { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem; background: var(--bg-2); border: 1.5px solid var(--border); border-radius: var(--r-2xl); margin-bottom: 1.5rem; transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } @media (min-width: 768px) { .reason-big { grid-template-columns: 1fr 2fr; gap: 3rem; padding: 3rem 3rem; align-items: center; } } .reason-big:hover { border-color: var(--text-1); transform: translateX(4px); box-shadow: var(--shadow-lg); } .reason-big-left { display: flex; flex-direction: column; gap: 1rem; } .reason-big-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--accent); border: 2px solid var(--text-1); display: grid; place-items: center; font-size: 2rem; color: var(--text-1); } .reason-big-num { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--text-3); font-weight: 600; text-transform: uppercase; } .reason-big-title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 900; letter-spacing: -0.028em; line-height: 1; text-transform: uppercase; margin-bottom: 0.875rem; } .reason-big-desc { color: var(--text-2); font-size: 1.0625rem; line-height: 1.55; max-width: 52ch; } /* ═════ BANNER ═════ */ .banner { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem 1.875rem; background: var(--accent); border: 1.5px solid var(--text-1); border-radius: var(--r-xl); margin-top: 1rem; } .banner-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--text-1); color: var(--accent); display: grid; place-items: center; font-size: 1.25rem; font-weight: 700; } .banner-text { font-weight: 800; font-size: 1rem; letter-spacing: -0.005em; line-height: 1.3; text-transform: uppercase; color: var(--text-1); } @media (min-width: 768px) { .banner-text { font-size: 1.125rem; } } /* ═════ ECOSYSTEM 6 CARDS ═════ */ .eco-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2rem; } @media (min-width: 700px) { .eco-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .eco-grid { grid-template-columns: repeat(3, 1fr); } } .eco-card { position: relative; padding: 2rem 1.75rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-xl); transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .eco-card:hover { transform: translateY(-4px); border-color: var(--text-1); box-shadow: var(--shadow-md); } .eco-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--text-1); display: grid; place-items: center; font-size: 1.375rem; color: var(--text-1); font-weight: 700; margin-bottom: 1.25rem; } .eco-title { font-size: 1.375rem; font-weight: 900; letter-spacing: -0.022em; margin-bottom: 0.625rem; text-transform: uppercase; } .eco-desc { color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; } /* ═════ ECO BIG (detail page version) ═════ */ .eco-big { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { .eco-big { grid-template-columns: repeat(2, 1fr); } } .eco-big-card { padding: 2.25rem 2rem; background: var(--bg-2); border: 1.5px solid var(--border); border-radius: var(--r-xl); position: relative; transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out); isolation: isolate; overflow: hidden; } .eco-big-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 60%, var(--accent-soft) 100%); opacity: 0; transition: opacity 0.4s ease; z-index: -1; } .eco-big-card:hover { transform: translateY(-4px); border-color: var(--text-1); box-shadow: var(--shadow-lg); } .eco-big-card:hover::before { opacity: 1; } .eco-big-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .eco-big-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--text-1); display: grid; place-items: center; font-size: 1.625rem; color: var(--text-1); } .eco-big-tag { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.2em; color: var(--text-3); text-transform: uppercase; font-weight: 600; } .eco-big-title { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.025em; margin-bottom: 0.875rem; text-transform: uppercase; line-height: 1; } .eco-big-desc { color: var(--text-2); font-size: 1rem; line-height: 1.55; } /* ═════ PRICING ═════ */ .pricing { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2rem; } @media (min-width: 700px) { .pricing { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .pricing { grid-template-columns: repeat(4, 1fr); } } .price { position: relative; padding: 2rem; background: var(--bg-2); border: 1.5px solid var(--text-1); border-radius: var(--r-xl); display: flex; flex-direction: column; transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .price:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .price.black { background: var(--text-1); color: var(--text-on-dark); } .price.black .price-tier { color: var(--accent); } .price.black .price-amount { color: var(--text-on-dark); } .price.black .price-desc { color: rgba(245, 244, 255, 0.65); } .price.black .price-features li { color: rgba(245, 244, 255, 0.85); } .price.black .price-features li::before { color: var(--accent); } .price.black .price-icon { background: var(--accent); color: var(--text-1); border-color: var(--accent); } .price.black .price-btn { background: var(--accent); color: var(--text-1); border-color: var(--accent); } .price.black .price-btn:hover { background: var(--bg-2); border-color: var(--bg-2); } .price-amount { display: inline-block; padding: 0.375rem 0.875rem; background: var(--accent); border: 1.5px solid var(--text-1); border-radius: var(--r-full); font-size: 0.9375rem; font-weight: 800; color: var(--text-1); margin-bottom: 1.5rem; width: fit-content; } .price.black .price-amount { background: var(--accent); color: var(--text-1); border-color: var(--accent); } .price-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--bg-2); border: 1.5px solid var(--text-1); display: grid; place-items: center; font-size: 1.375rem; color: var(--text-1); margin-bottom: 1.25rem; } .price-tier { font-size: 2.25rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.625rem; text-transform: uppercase; color: var(--text-1); } .price-desc { color: var(--text-2); font-size: 0.875rem; margin-bottom: 1.5rem; line-height: 1.5; min-height: 2.5em; } .price-features { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 1.75rem; } .price-features li { font-size: 0.875rem; color: var(--text-2); display: flex; align-items: flex-start; gap: 0.625rem; line-height: 1.45; } .price-features li::before { content: '●'; color: var(--accent-text); font-size: 0.6875rem; margin-top: 0.4em; flex-shrink: 0; } .price-btn { width: 100%; padding: 0.75rem 1rem; background: var(--bg-0); color: var(--text-1); border: 1.5px solid var(--text-1); border-radius: var(--r-full); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out); } .price-btn:hover { background: var(--text-1); color: var(--bg-0); } /* ═════ NETO TARIFFS ═════ */ .neto-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } .neto-row { display: grid; grid-template-columns: 64px 1fr; gap: 1.25rem; padding: 1.5rem 1.75rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); align-items: center; transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } @media (min-width: 768px) { .neto-row { grid-template-columns: 80px 160px 1fr; gap: 2rem; } } .neto-row:hover { border-color: var(--text-1); transform: translateX(4px); box-shadow: var(--shadow-md); } .neto-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-warm); border: 1.5px solid var(--text-1); display: grid; place-items: center; font-size: 1.5rem; color: var(--text-1); } .neto-row.black .neto-icon { background: var(--text-1); color: var(--accent); border-color: var(--text-1); } .neto-label { font-size: 1.625rem; font-weight: 900; letter-spacing: 0.02em; color: var(--accent-dim); text-transform: uppercase; line-height: 1; } .neto-row.black .neto-label { background: var(--text-1); color: var(--accent); padding: 0.5rem 0.875rem; border-radius: var(--r-sm); width: fit-content; font-size: 1.25rem; } .neto-body strong { display: block; font-size: 1rem; font-weight: 800; color: var(--text-1); margin-bottom: 0.25rem; } .neto-body span { font-size: 0.9375rem; color: var(--text-2); line-height: 1.5; } /* ═════ NETO BIG ROWS (detail page) ═════ */ .neto-big { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; } .neto-big-row { position: relative; padding: 2.5rem 2.5rem 2.5rem 7rem; background: var(--bg-2); border: 1.5px solid var(--text-1); border-radius: var(--r-2xl); transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out); } @media (min-width: 768px) { .neto-big-row { padding: 3rem 3rem 3rem 9rem; } } .neto-big-row:hover { transform: translateX(8px); box-shadow: var(--shadow-lg); } .neto-big-icon { position: absolute; left: 1.75rem; top: 50%; transform: translateY(-50%); width: 80px; height: 80px; border-radius: 50%; background: var(--accent); border: 2px solid var(--text-1); display: grid; place-items: center; font-size: 2rem; color: var(--text-1); } @media (min-width: 768px) { .neto-big-icon { left: 2.5rem; width: 96px; height: 96px; font-size: 2.5rem; } } .neto-big-row.black { background: var(--text-1); color: var(--text-on-dark); } .neto-big-row.black .neto-big-icon { background: var(--accent); color: var(--text-1); } .neto-big-row.black .neto-big-strong { color: var(--text-on-dark); } .neto-big-row.black .neto-big-desc { color: rgba(245, 244, 255, 0.75); } .neto-big-row.black .neto-big-label { background: var(--accent); color: var(--text-1); } .neto-big-label { display: inline-block; background: var(--accent); color: var(--text-1); border: 1.5px solid var(--text-1); padding: 0.375rem 0.875rem; border-radius: var(--r-sm); font-size: 1.125rem; font-weight: 900; letter-spacing: 0.02em; margin-bottom: 1rem; } .neto-big-strong { display: block; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 0.625rem; text-transform: uppercase; line-height: 1.1; } .neto-big-desc { color: var(--text-2); font-size: 1.0625rem; line-height: 1.55; max-width: 56ch; } /* ═════ QUAD ═════ */ .quad-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2rem; } @media (min-width: 700px) { .quad-grid { grid-template-columns: repeat(2, 1fr); } } .quad-card { padding: 2rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-xl); transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .quad-card:hover { border-color: var(--text-1); transform: translateY(-3px); box-shadow: var(--shadow-md); } .quad-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .quad-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--text-1); display: grid; place-items: center; font-size: 1.375rem; color: var(--text-1); } .quad-pill { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.25rem 0.625rem; background: var(--accent-soft); color: var(--purple-deep); border-radius: var(--r-sm); font-weight: 700; } .quad-title { font-size: 1.375rem; font-weight: 900; letter-spacing: -0.022em; margin-bottom: 0.625rem; text-transform: uppercase; } .quad-desc { color: var(--text-2); font-size: 0.9375rem; line-height: 1.55; } /* ═════ QUAD BIG (detail page) ═════ */ .quad-big { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .quad-big { grid-template-columns: repeat(2, 1fr); } } .quad-big-card { position: relative; padding: 2.5rem; background: var(--bg-2); border: 1.5px solid var(--border); border-radius: var(--r-2xl); transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out); overflow: hidden; isolation: isolate; min-height: 280px; display: flex; flex-direction: column; } .quad-big-card::before { content: ''; position: absolute; top: -30%; right: -20%; width: 250px; height: 250px; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%); z-index: -1; opacity: 0; transition: opacity 0.4s ease; } .quad-big-card:hover { border-color: var(--text-1); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .quad-big-card:hover::before { opacity: 1; } .quad-big-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; } .quad-big-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--text-1); display: grid; place-items: center; font-size: 1.875rem; color: var(--text-1); } .quad-big-pill { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.375rem 0.75rem; background: var(--text-1); color: var(--accent); border-radius: var(--r-sm); font-weight: 700; } .quad-big-title { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.025em; margin-bottom: 1rem; text-transform: uppercase; line-height: 1; } .quad-big-desc { color: var(--text-2); font-size: 1.0625rem; line-height: 1.55; flex: 1; } /* ═════ SECTION NAV (prev/next) ═════ */ .section-nav { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 2rem; } @media (min-width: 700px) { .section-nav { grid-template-columns: repeat(2, 1fr); } } .section-nav-link { padding: 1.75rem; background: var(--bg-2); border: 1.5px solid var(--border-strong); border-radius: var(--r-xl); transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background-color 220ms var(--ease-out); display: flex; flex-direction: column; gap: 0.5rem; } .section-nav-link:hover { background: var(--accent); border-color: var(--text-1); transform: translateY(-2px); box-shadow: var(--shadow-md); } .section-nav-link .dir { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); font-weight: 600; } .section-nav-link .title { font-size: 1.375rem; font-weight: 900; letter-spacing: -0.022em; text-transform: uppercase; color: var(--text-1); line-height: 1.1; } .section-nav-link.next { text-align: right; } /* ═════ CTA FINAL ═════ */ .cta-final { padding: 4rem 2rem; border: 1.5px solid var(--text-1); border-radius: var(--r-2xl); background: var(--bg-2); position: relative; overflow: hidden; } @media (min-width: 900px) { .cta-final { padding: 5rem 4rem; } } .cta-final::before { content: ''; position: absolute; top: -30%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 60%); pointer-events: none; } .cta-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 900px) { .cta-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } .cta-final-eyebrow { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); margin-bottom: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.625rem; } .cta-final-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: var(--text-1); } .cta-final-title { font-size: clamp(2.25rem, 4.75vw, 3.5rem); font-weight: 900; letter-spacing: -0.034em; line-height: 1.02; margin-bottom: 1.5rem; text-transform: uppercase; } .cta-final-title .lime { color: var(--accent-dim); } .cta-final-desc { color: var(--text-2); font-size: 1.0625rem; max-width: 50ch; margin-bottom: 1.75rem; line-height: 1.55; } .cta-badge { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.125rem; background: var(--accent); border: 1.5px solid var(--text-1); border-radius: var(--r-full); font-weight: 800; font-size: 0.875rem; color: var(--text-1); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1.5rem; } .cta-badge-icon { width: 24px; height: 24px; border-radius: 50%; background: var(--text-1); color: var(--accent); display: grid; place-items: center; font-size: 0.8125rem; } .cta-badge .small { font-weight: 600; opacity: 0.85; } .cta-pillars { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 500px) { .cta-pillars { grid-template-columns: repeat(2, 1fr); } } .cta-pillar { padding: 1.25rem; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); } .cta-pillar-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--text-1); display: grid; place-items: center; font-size: 1.125rem; color: var(--text-1); margin-bottom: 0.75rem; } .cta-pillar-title { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.005em; margin-bottom: 0.5rem; text-transform: uppercase; } .cta-pillar-desc { font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; } /* ═════ MINI CTA (end of detail pages) ═════ */ .cta-mini { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding: 2.5rem; background: var(--text-1); color: var(--text-on-dark); border-radius: var(--r-2xl); margin-bottom: 2rem; } .cta-mini-text { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; text-transform: uppercase; max-width: 30ch; line-height: 1.1; } .cta-mini-text .lime { color: var(--accent); } /* ═════ FOOTER ═════ */ .footer { padding: 4rem 0 2.5rem; border-top: 1px solid var(--border); margin-top: 5rem; font-size: 0.875rem; color: var(--text-3); } .footer-row { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 2rem; } @media (min-width: 700px) { .footer-row { flex-direction: row; justify-content: space-between; align-items: flex-end; } } .footer-tagline { color: var(--text-2); max-width: 36ch; line-height: 1.55; font-size: 0.9375rem; margin-top: 0.75rem; } .footer-slogan { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--text-1); text-transform: uppercase; font-weight: 700; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--text-3); } /* ═════ REVEAL ═════ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ═════ FOCUS-VISIBLE GLOBAL — WCAG 2.4.7 ═════ Outline lime (3px) + offset 2px em TODOS os interativos. Lime sobre cream tem contraste insuficiente como texto, mas como OUTLINE (3px) é visual non-text — WCAG 1.4.11 (3:1) e por isso a borda dupla (lime + text-1 sombra) garante visibilidade em qualquer background. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, details:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px var(--text-1); border-radius: var(--r-sm); } /* ═════ A11Y EXTRAS ═════ */ .skip-link { position: absolute; /* Off-screen até receber foco */ top: -100px; left: 8px; background: var(--purple-deep); color: #FFFFFF; padding: 12px 16px; z-index: 9999; font-family: var(--mono); font-size: 0.875rem; font-weight: 700; border-radius: var(--r-sm); text-decoration: none; transition: top 0.15s ease; } .skip-link:focus, .skip-link:focus-visible { /* Posiciona visível no topo ao receber foco */ top: 8px; outline: 3px solid var(--accent); outline-offset: 2px; /* Contraste forte: purple-deep (#5B2EB8) sobre branco = 7.6:1 ✓ */ color: #FFFFFF; background: var(--purple-deep); } .scroll-top { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 60; width: 48px; height: 48px; border-radius: 50%; background: var(--text-1); color: var(--bg-0); display: grid; place-items: center; font-size: 1.125rem; font-weight: 700; border: 1.5px solid var(--text-1); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out); box-shadow: var(--shadow-lg); } .scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .scroll-top:hover { background: var(--accent); color: var(--text-1); transform: translateY(-4px); } /* ═══════════════════════════════════════════════════════ COMPONENTES DO RELANÇAMENTO (P0 + P1) ═══════════════════════════════════════════════════════ */ /* ═════ HERO ROI (nova versão da home) ═════ */ .hero-roi-eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.9375rem; background: var(--text-1); color: var(--accent); border-radius: var(--r-full); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 1.75rem; font-weight: 700; } .hero-roi-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .hero-roi-price { display: inline-flex; align-items: baseline; gap: 0.625rem; padding: 0.75rem 1.125rem; background: var(--accent); border: 1.5px solid var(--text-1); border-radius: var(--r-md); margin: 1.25rem 0 2rem; box-shadow: 4px 4px 0 var(--text-1); } .hero-roi-price-amount { font-family: var(--mono); font-size: 1.125rem; font-weight: 700; color: var(--text-1); } .hero-roi-price-note { font-size: 0.8125rem; color: var(--text-2); font-weight: 600; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-bottom: 3rem; } /* ═════ PROOF STRIP (faixa de prova social honesta) ═════ */ .proof-strip { padding: 2rem 0; background: var(--text-1); color: var(--text-on-dark); border-top: 1.5px solid var(--text-1); border-bottom: 1.5px solid var(--text-1); } .proof-strip-inner { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: center; align-items: center; text-align: center; } .proof-item { display: flex; flex-direction: column; gap: 0.25rem; } .proof-item-num { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.02em; color: var(--accent); font-family: var(--mono); } .proof-item-label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245, 244, 255, 0.7); font-weight: 600; } /* ═════ COMPARATIVO Sem × Com SPOT ═════ */ .compare { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 2rem 0 1rem; } @media (min-width: 768px) { .compare { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } .compare-col { padding: 2rem; border-radius: var(--r-xl); border: 1.5px solid var(--border-strong); background: var(--bg-2); } .compare-col--without { background: var(--bg-warm); } .compare-col--with { background: var(--text-1); color: var(--text-on-dark); border-color: var(--text-1); } .compare-col--with .compare-tag { background: var(--accent); color: var(--text-1); } .compare-col--with .compare-title { color: var(--text-on-dark); } .compare-col--with .compare-list li { color: rgba(245, 244, 255, 0.88); } .compare-col--with .compare-list li::before { color: var(--accent); content: '✓'; } .compare-tag { display: inline-block; padding: 0.3125rem 0.75rem; background: var(--bg-2); border: 1px solid var(--text-1); border-radius: var(--r-sm); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--text-1); margin-bottom: 1rem; } .compare-title { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.025em; text-transform: uppercase; margin-bottom: 1.25rem; line-height: 1.1; color: var(--text-1); } .compare-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .compare-list li { font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); padding-left: 1.5rem; position: relative; } .compare-list li::before { content: '✗'; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--text-3); } /* ═════ PARA QUEM (ICP) ═════ */ .for-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0; } @media (min-width: 768px) { .for-grid { grid-template-columns: 1fr 1fr; } } .for-card { padding: 2rem; background: var(--bg-2); border: 1.5px solid var(--border-strong); border-radius: var(--r-xl); } .for-card--yes { border-color: var(--text-1); background: var(--accent-soft); } .for-card-head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1.5px solid var(--text-1); } .for-card-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--text-1); display: grid; place-items: center; font-size: 1.25rem; font-weight: 800; color: var(--text-1); } .for-card--no .for-card-icon { background: var(--bg-warm); color: var(--text-2); } .for-card-title { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.022em; text-transform: uppercase; line-height: 1.1; } .for-list { list-style: none; display: flex; flex-direction: column; gap: 0.875rem; } .for-list li { font-size: 0.9375rem; color: var(--text-1); line-height: 1.5; padding-left: 1.75rem; position: relative; font-weight: 500; } .for-card--yes .for-list li::before { content: '→'; position: absolute; left: 0; top: 0; font-weight: 900; color: var(--accent-text); } .for-card--no .for-list li::before { content: '—'; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--text-3); } /* ═════ STEPS (Como funciona em 4 passos) ═════ */ .steps { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 2rem 0; counter-reset: step; } @media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { position: relative; padding: 2.5rem 1.75rem 2rem; background: var(--bg-2); border: 1.5px solid var(--text-1); border-radius: var(--r-xl); counter-increment: step; } .step::before { content: counter(step, decimal-leading-zero); position: absolute; top: -1.125rem; left: 1.5rem; width: 2.5rem; height: 2.25rem; background: var(--accent); border: 1.5px solid var(--text-1); border-radius: var(--r-md); display: grid; place-items: center; font-family: var(--mono); font-size: 0.9375rem; font-weight: 700; color: var(--text-1); } .step-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-warm); border: 1.5px solid var(--text-1); display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 1.25rem; color: var(--text-1); } .step-title { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.022em; text-transform: uppercase; margin-bottom: 0.75rem; line-height: 1.1; } .step-desc { font-size: 0.9375rem; color: var(--text-2); line-height: 1.5; } .step-meta { margin-top: 1rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--purple-deep); font-weight: 700; } /* ═════ FAQ (details/summary nativo, estilizado) ═════ */ .faq-list { display: flex; flex-direction: column; gap: 0.875rem; margin: 2rem 0; } .faq-item { background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--r-lg); overflow: hidden; transition: border-color 0.2s ease; } .faq-item[open] { border-color: var(--text-1); } .faq-q { padding: 1.25rem 1.5rem; font-size: 1rem; font-weight: 700; color: var(--text-1); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none; user-select: none; } .faq-q::-webkit-details-marker { display: none; } .faq-q::after { content: '+'; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--text-1); color: var(--text-1); display: grid; place-items: center; font-size: 1.125rem; font-weight: 700; transition: transform 0.25s ease; } .faq-item[open] .faq-q::after { content: '−'; transform: rotate(180deg); } .faq-a { padding: 0 1.5rem 1.5rem; font-size: 0.9375rem; color: var(--text-2); line-height: 1.6; } .faq-a a { color: var(--purple-deep); text-decoration: underline; font-weight: 600; } /* ═════ CALCULADORA ROI ═════ */ .roi-calc { padding: 2.5rem; background: var(--bg-2); border: 1.5px solid var(--text-1); border-radius: var(--r-2xl); margin: 2rem 0; display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 900px) { .roi-calc { grid-template-columns: 1fr 1fr; align-items: center; } } .roi-calc-tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: var(--accent); border: 1.5px solid var(--text-1); border-radius: var(--r-sm); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-1); font-weight: 700; margin-bottom: 1rem; width: fit-content; } .roi-calc-title { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.022em; text-transform: uppercase; margin-bottom: 1.5rem; line-height: 1.1; } .roi-field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; } .roi-field-label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; } .roi-field-value { font-family: var(--display); font-size: 1.125rem; font-weight: 800; color: var(--text-1); font-feature-settings: 'tnum'; } .roi-slider { width: 100%; height: 8px; border-radius: var(--r-full); background: var(--bg-warm); appearance: none; -webkit-appearance: none; cursor: pointer; border: 1px solid var(--border-strong); } .roi-slider:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; box-shadow: 0 0 0 5px var(--text-1); } .roi-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 2px solid var(--text-1); cursor: pointer; transition: transform 0.15s ease; } .roi-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .roi-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 2px solid var(--text-1); cursor: pointer; } .roi-result { padding: 2rem; background: var(--text-1); color: var(--text-on-dark); border-radius: var(--r-xl); } .roi-result-label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245, 244, 255, 0.65); font-weight: 700; margin-bottom: 0.5rem; } .roi-result-amount { font-size: 2.75rem; font-weight: 900; letter-spacing: -0.035em; color: var(--accent); font-feature-settings: 'tnum'; line-height: 1; margin-bottom: 0.5rem; } .roi-result-note { font-size: 0.875rem; color: rgba(245, 244, 255, 0.78); line-height: 1.5; margin-bottom: 1.5rem; } .roi-result-breakdown { padding-top: 1rem; border-top: 1px solid rgba(245, 244, 255, 0.18); display: flex; flex-direction: column; gap: 0.625rem; font-family: var(--mono); font-size: 0.8125rem; color: rgba(245, 244, 255, 0.78); } .roi-result-breakdown div { display: flex; justify-content: space-between; } .roi-result-breakdown strong { color: var(--text-on-dark); font-weight: 700; } /* ═════ GARANTIA / RISK REVERSAL ═════ */ .guarantee { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.875rem; background: var(--bg-2); border: 1.5px dashed var(--text-1); border-radius: var(--r-xl); margin: 1.5rem 0 2rem; } @media (min-width: 768px) { .guarantee { flex-direction: row; align-items: center; gap: 1.5rem; } } .guarantee-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); border: 2px solid var(--text-1); display: grid; place-items: center; font-size: 1.625rem; } .guarantee-text { display: flex; flex-direction: column; gap: 0.375rem; } .guarantee-title { font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.005em; } .guarantee-desc { font-size: 0.875rem; color: var(--text-2); line-height: 1.5; } /* ═════ FORM (captação) ═════ */ .form-card { padding: 2.5rem; background: var(--bg-2); border: 1.5px solid var(--text-1); border-radius: var(--r-2xl); } .form-card-head { margin-bottom: 2rem; } .form-card-title { font-size: 1.625rem; font-weight: 900; letter-spacing: -0.025em; text-transform: uppercase; margin-bottom: 0.5rem; line-height: 1.1; } .form-card-sub { font-size: 0.9375rem; color: var(--text-2); line-height: 1.5; } .form-field { display: flex; flex-direction: column; gap: 0.4375rem; margin-bottom: 1.25rem; } .form-label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); font-weight: 700; } .form-input, .form-select, .form-textarea { padding: 0.875rem 1rem; background: var(--bg-1); border: 1.5px solid var(--border-strong); border-radius: var(--r-md); font-family: var(--display); font-size: 0.9375rem; color: var(--text-1); transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); width: 100%; font-weight: 500; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--text-1); background: var(--bg-2); outline: none; /* A11y WCAG 1.4.11 — non-text contrast 3:1 mínimo; box-shadow duplo: ring lime sólido + offset text-1 */ box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--text-1); } .form-helper { font-size: 0.75rem; color: var(--text-3); line-height: 1.4; } .form-radio-group { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; } .form-radio-option { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; background: var(--bg-1); border: 1px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer; font-size: 0.875rem; transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out); } .form-radio-option:hover { border-color: var(--text-1); } .form-radio-option input[type="radio"] { accent-color: var(--text-1); } .form-submit { width: 100%; margin-top: 0.5rem; } /* ═════ FAB WHATSAPP (mobile) ═════ */ .fab { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 70; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.125rem; background: var(--accent); color: var(--text-1); border: 1.5px solid var(--text-1); border-radius: var(--r-full); font-weight: 800; font-size: 0.875rem; letter-spacing: 0.02em; text-transform: uppercase; box-shadow: 0 8px 24px -4px rgba(15, 5, 41, 0.25); transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 180ms var(--ease-out), color 180ms var(--ease-out); } .fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -4px rgba(15, 5, 41, 0.30); } .fab-icon { width: 22px; height: 22px; display: grid; place-items: center; font-size: 1.125rem; } @media (min-width: 900px) { .fab { display: none; } } /* ═════ SCROLL PROGRESS BAR (top) ═════ */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--accent); z-index: 100; transition: width 0.05s linear; pointer-events: none; } /* ═════ FOOTER 4-COL (relançamento) ═════ */ .footer-main { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border); } @media (min-width: 700px) { .footer-main { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } .footer-col-title { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1rem; font-weight: 700; } .footer-col-list { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; } .footer-col-list a { font-size: 0.875rem; color: var(--text-2); transition: color 0.15s ease; } .footer-col-list a:hover { color: var(--text-1); text-decoration: underline; } .footer-brand-tagline { font-size: 0.9375rem; color: var(--text-2); max-width: 32ch; line-height: 1.55; margin-top: 0.875rem; } .footer-contact-line { font-size: 0.8125rem; color: var(--text-2); line-height: 1.6; margin-top: 1rem; } .footer-contact-line strong { color: var(--text-1); font-weight: 700; } /* ═════ HERO REDUZIDO (sub-pages compactas) ═════ */ .page-hero-compact { padding: 3.5rem 0 2.5rem; } @media (min-width: 768px) { .page-hero-compact { padding: 5rem 0 3.5rem; } } /* ═════ EVENT CARD (Spot Day) ═════ */ .event-card { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem; background: var(--text-1); color: var(--text-on-dark); border-radius: var(--r-2xl); margin: 2rem 0; } @media (min-width: 768px) { .event-card { grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; } } .event-date { text-align: center; padding: 1.25rem 1.75rem; background: var(--accent); color: var(--text-1); border-radius: var(--r-lg); min-width: 120px; } .event-date-day { display: block; font-size: 2.5rem; font-weight: 900; font-family: var(--mono); line-height: 1; letter-spacing: -0.04em; } .event-date-month { display: block; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 0.25rem; font-weight: 700; } .event-info-tag { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 0.5rem; } .event-info-title { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0.625rem; } .event-info-desc { font-size: 0.9375rem; color: rgba(245, 244, 255, 0.78); line-height: 1.5; } /* ═════ CASE PLACEHOLDER (honest) ═════ */ .case-placeholder { padding: 3rem 2rem; background: var(--bg-warm); border: 1.5px dashed var(--text-1); border-radius: var(--r-2xl); text-align: center; margin: 2rem 0; } .case-placeholder-tag { display: inline-block; padding: 0.375rem 0.875rem; background: var(--accent); border: 1.5px solid var(--text-1); border-radius: var(--r-sm); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin-bottom: 1.25rem; } .case-placeholder-title { font-size: 1.625rem; font-weight: 900; text-transform: uppercase; margin-bottom: 0.875rem; letter-spacing: -0.025em; line-height: 1.1; } .case-placeholder-desc { font-size: 1rem; color: var(--text-2); max-width: 48ch; margin: 0 auto 1.5rem; line-height: 1.55; } /* Compact placeholder title — smaller, no caps, gentler tracking. Used for sub-titles inside case-placeholder (cronograma, selo honestidade). */ .case-placeholder-title--compact { font-size: 1.25rem; text-transform: none; letter-spacing: -0.015em; } /* Case placeholder modifiers (override default centered + warm bg) */ .case-placeholder--align-left { text-align: left; } .case-placeholder--ghost { background: transparent; border-style: dashed; } /* ─── Persona cards (casos.html /01) — stacked paragraphs inside quad-big-card ─── By default .quad-big-desc uses flex:1 to fill a single-paragraph card. When the card holds MULTIPLE quad-big-desc (persona narrative), we need block flow with margin spacing instead. These helpers DRY the casos page. */ .quad-big-desc--spaced { margin-bottom: 1rem; flex: 0 0 auto; } .quad-big-desc--divided { border-top: 1px solid var(--border); padding-top: 1rem; margin-bottom: 1rem; flex: 0 0 auto; } .quad-big-quote { font-style: italic; border-left: 2px solid var(--accent-dim); padding-left: 0.875rem; margin: 0; flex: 0 0 auto; color: var(--text-2); font-size: 1.0625rem; line-height: 1.55; } /* Strong inside quad-big-desc → emphasis color (default text-1). */ .quad-big-desc strong, .quad-big-quote strong { color: var(--text-1); } /* Footnote text that follows a .compare-table — smaller, muted, max 65ch. */ .table-footnote { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--text-2); line-height: 1.55; max-width: 65ch; } .table-footnote strong { color: var(--text-1); } /* Spacing utilities (use sparingly — prefer semantic classes when possible). Naming uses rem-derived numbers to match Tailwind-like mental model: gap-3 = 0.75rem, gap-4 = 1rem, gap-6 = 1.5rem, gap-8 = 2rem. */ .u-mb-4 { margin-bottom: 1rem; } .u-mt-8 { margin-top: 2rem; } .u-text-center { text-align: center; } /* Visually-hidden text (accessible to screen readers only). Use for headings that exist for outline structure but shouldn't render. Pattern from https://www.tpgi.com/the-anatomy-of-visually-hidden/ */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ═══════════════════════════════════════════════════════ ARTIGO EDITORIAL (/guia/* + páginas longas) ═══════════════════════════════════════════════════════ */ .article-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; margin: 2rem 0; } @media (min-width: 1024px) { .article-layout { grid-template-columns: 240px 1fr; gap: 4rem; } } .article-toc { position: relative; } @media (min-width: 1024px) { .article-toc { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; } } .article-toc-title { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1rem; font-weight: 700; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .article-toc-list { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; } .article-toc-list a { font-size: 0.875rem; color: var(--text-2); line-height: 1.4; padding-left: 0.875rem; border-left: 2px solid var(--border); transition: color 180ms var(--ease-out), border-left-color 180ms var(--ease-out); display: block; } .article-toc-list a:hover { color: var(--text-1); border-left-color: var(--accent-dim); font-weight: 600; } .article { font-family: var(--display); color: var(--text-1); font-size: 1.0625rem; line-height: 1.75; max-width: 70ch; } .article > * + * { margin-top: 1.25rem; } .article h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -0.028em; line-height: 1.1; text-transform: uppercase; margin-top: 3.5rem; margin-bottom: 1rem; padding-top: 1rem; scroll-margin-top: 100px; } .article h2:first-child { margin-top: 0; padding-top: 0; } .article h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-top: 2.5rem; margin-bottom: 0.875rem; scroll-margin-top: 100px; } .article p { color: var(--text-2); } .article p strong { color: var(--text-1); font-weight: 700; } .article a { color: var(--purple-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 600; } .article a:hover { color: var(--text-1); } .article ul, .article ol { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 0.625rem; margin: 1rem 0 1.5rem; } .article ul li, .article ol li { font-size: 1rem; color: var(--text-2); line-height: 1.65; padding-left: 1.625rem; position: relative; } .article ul li::before { content: '◆'; position: absolute; left: 0; top: 0.4em; color: var(--accent-text); font-size: 0.75rem; font-weight: 700; } .article ol { counter-reset: ol; } .article ol li { counter-increment: ol; padding-left: 2rem; } .article ol li::before { content: counter(ol, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; color: var(--accent-text); background: var(--bg-warm); border: 1px solid var(--text-1); border-radius: var(--r-sm); padding: 0 0.375rem; line-height: 1.6; } .article blockquote { margin: 2rem 0; padding: 1.5rem 1.75rem; background: var(--bg-warm); border-left: 4px solid var(--accent-dim); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 1.125rem; line-height: 1.55; color: var(--text-1); font-weight: 500; font-style: italic; } .article blockquote p { color: var(--text-1); } .article hr { border: none; border-top: 1.5px solid var(--border-strong); margin: 3rem 0; } .article code { font-family: var(--mono); font-size: 0.875em; padding: 0.125rem 0.375rem; background: var(--bg-warm); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-1); } .article table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: 0.9375rem; } .article table th, .article table td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid var(--border); line-height: 1.5; vertical-align: top; } .article table th { background: var(--bg-warm); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 700; border-bottom: 1.5px solid var(--text-1); } /* === Inline CTA dentro do artigo === */ .article-inline-cta { margin: 2.5rem 0; padding: 1.75rem 2rem; background: var(--text-1); color: var(--text-on-dark); border-radius: var(--r-xl); display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 700px) { .article-inline-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; } } .article-inline-cta-text { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; max-width: 40ch; } .article-inline-cta-text .lime { color: var(--accent); } .article-inline-cta .btn { flex-shrink: 0; } /* === Article meta (data, leitura) === */ .article-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); font-weight: 600; } .article-meta strong { color: var(--text-1); } /* === Related cards (fim do guia) === */ .related-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 2rem 0; } @media (min-width: 700px) { .related-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .related-grid { grid-template-columns: repeat(3, 1fr); } } .related-card { display: flex; flex-direction: column; padding: 1.75rem; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--r-xl); transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out); gap: 0.75rem; height: 100%; } .related-card:hover { border-color: var(--text-1); transform: translateY(-3px); box-shadow: var(--shadow-md); } .related-card-tag { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--purple-deep); font-weight: 700; } .related-card-title { font-size: 1.125rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: var(--text-1); } .related-card-desc { font-size: 0.875rem; color: var(--text-2); line-height: 1.5; flex: 1; } .related-card-arrow { font-family: var(--mono); font-size: 0.75rem; color: var(--accent-text); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.5rem; } /* ═════ COMPARE TABLE (BOFU) ═════ */ .compare-table-wrap { overflow-x: auto; margin: 2rem 0; } .compare-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.9375rem; background: var(--bg-2); border: 1.5px solid var(--text-1); border-radius: var(--r-xl); overflow: hidden; } .compare-table th, .compare-table td { padding: 1.125rem 1.25rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; } .compare-table thead th { background: var(--bg-warm); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--text-1); border-bottom: 2px solid var(--text-1); } .compare-table thead th.with { background: var(--text-1); color: var(--accent); } .compare-table tbody tr:last-child td { border-bottom: none; } .compare-table .feature { font-weight: 700; color: var(--text-1); } .compare-table .without-cell { color: var(--text-2); } .compare-table .with-cell { background: rgba(200,255,0,0.06); color: var(--text-1); font-weight: 500; } .compare-table .with-cell strong { color: var(--text-1); font-weight: 800; } /* ═════ 404 PAGE ═════ */ .error-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 4rem 1.5rem; } .error-code { font-family: var(--display); font-size: clamp(6rem, 18vw, 12rem); font-weight: 900; line-height: 0.85; color: transparent; -webkit-text-stroke: 3px var(--text-1); letter-spacing: -0.06em; margin-bottom: 1rem; } .error-title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 1rem; line-height: 1.05; } .error-title .lime { color: var(--accent-dim); } .error-desc { color: var(--text-2); font-size: 1.0625rem; max-width: 48ch; margin: 0 auto 2rem; line-height: 1.55; } /* ═════════════════════════════════════════════════════════ MOBILE NAV — hamburger + drawer Visível só em <960px. Desktop continua usando .nav-links. ═════════════════════════════════════════════════════════ */ /* Hamburger button */ .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; padding: 0; background: var(--bg-2); border: 1.5px solid var(--text-1); border-radius: var(--r-md); box-shadow: 3px 3px 0 var(--text-1); cursor: pointer; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s ease; -webkit-tap-highlight-color: transparent; z-index: 60; position: relative; } .nav-burger:hover { background: var(--accent); } .nav-burger:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--text-1); } .nav-burger:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 3px 3px 0 var(--text-1), 0 0 0 5px var(--text-1); } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--text-1); border-radius: 2px; transition: transform 0.28s var(--ease-out), opacity 0.18s ease; transform-origin: center; } /* Burger → X when expanded */ .nav-burger[aria-expanded="true"] { background: var(--accent); } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Default: burger hidden on desktop */ .nav-burger { display: none; } @media (max-width: 959.98px) { .nav-burger { display: inline-flex; } /* CTA do desktop sai do flow no mobile — drawer já tem o próprio CTA */ .nav-inner > .nav-cta { display: none; } } /* Drawer */ .nav-drawer { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; background: rgba(15, 5, 41, 0.55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease-out); } .nav-drawer[hidden] { display: none; } .nav-drawer.is-open { opacity: 1; pointer-events: auto; } /* Drawer painel */ .nav-drawer-panel { margin-top: auto; margin-bottom: auto; background: var(--bg-0); border-top: 2px solid var(--text-1); border-bottom: 2px solid var(--text-1); padding: 5.5rem 1.5rem 2.5rem; display: flex; flex-direction: column; gap: 0.5rem; transform: translateY(-24px); transition: transform 0.32s var(--ease-out); position: relative; overflow-y: auto; max-height: 100vh; min-height: 100vh; } .nav-drawer.is-open .nav-drawer-panel { transform: translateY(0); } /* Stagger entrance dos links — secondary motion layer (anti-AI-slop) */ .nav-drawer .nav-drawer-link, .nav-drawer .nav-drawer-cta, .nav-drawer .nav-drawer-meta { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) var(--ease-out); } .nav-drawer.is-open .nav-drawer-link, .nav-drawer.is-open .nav-drawer-cta, .nav-drawer.is-open .nav-drawer-meta { opacity: 1; transform: translateY(0); } .nav-drawer.is-open .nav-drawer-link:nth-child(1) { transition-delay: 80ms; } .nav-drawer.is-open .nav-drawer-link:nth-child(2) { transition-delay: 120ms; } .nav-drawer.is-open .nav-drawer-link:nth-child(3) { transition-delay: 160ms; } .nav-drawer.is-open .nav-drawer-link:nth-child(4) { transition-delay: 200ms; } .nav-drawer.is-open .nav-drawer-link:nth-child(5) { transition-delay: 240ms; } .nav-drawer.is-open .nav-drawer-link:nth-child(6) { transition-delay: 280ms; } .nav-drawer.is-open .nav-drawer-link:nth-child(7) { transition-delay: 320ms; } .nav-drawer.is-open .nav-drawer-cta { transition-delay: 360ms; } .nav-drawer.is-open .nav-drawer-meta { transition-delay: 400ms; } /* Linha decorativa lime no topo do drawer (brutalist accent) */ .nav-drawer-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--accent); pointer-events: none; } /* Container interno do drawer */ .nav-drawer-inner { max-width: 560px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 0.5rem; } /* Links verticais */ .nav-drawer-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 1.25rem; color: var(--text-1); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; border-radius: var(--r-md); border: 1.5px solid transparent; background: transparent; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s var(--ease-out); } .nav-drawer-link::after { content: '→'; font-weight: 500; color: var(--text-3); font-size: 1rem; transition: transform 0.2s var(--ease-out), color 0.2s ease; } .nav-drawer-link:hover { background: var(--accent-soft); border-color: var(--text-1); } .nav-drawer-link:focus-visible { background: var(--accent-soft); border-color: var(--text-1); /* Focus ring forte para keyboard nav */ outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px var(--text-1); } .nav-drawer-link:hover::after, .nav-drawer-link:focus-visible::after { transform: translateX(4px); color: var(--text-1); } .nav-drawer-link--active { background: var(--accent-soft); border-color: var(--text-1); } /* CTA no drawer (brutalist) */ .nav-drawer-cta { display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin-top: 1.25rem; padding: 1.125rem 1.5rem; background: var(--accent); color: var(--text-1); border: 1.5px solid var(--text-1); border-radius: var(--r-md); box-shadow: 4px 4px 0 var(--text-1); font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .nav-drawer-cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--text-1); } .nav-drawer-cta:focus-visible { transform: translate(-2px, -2px); /* Mantém box-shadow brutalista + adiciona focus ring */ box-shadow: 6px 6px 0 var(--text-1), 0 0 0 3px var(--accent), 0 0 0 5px var(--text-1); outline: none; } .nav-drawer-cta:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--text-1); } /* Pequena divisória + meta tagline */ .nav-drawer-meta { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--text-3); font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; } /* Lock scroll do body quando drawer aberto */ body.nav-drawer-open { overflow: hidden; /* prevent layout shift quando scrollbar somer */ padding-right: var(--sbw, 0px); } /* Esconde drawer/backdrop em viewport desktop por segurança */ @media (min-width: 960px) { .nav-drawer { display: none !important; } .nav-burger { display: none !important; } } /* prefers-reduced-motion: corta animações */ @media (prefers-reduced-motion: reduce) { .nav-burger, .nav-burger span, .nav-drawer, .nav-drawer-panel, .nav-drawer-link, .nav-drawer-link::after, .nav-drawer-cta, .nav-drawer-meta { transition: none !important; transition-delay: 0ms !important; } .nav-drawer.is-open .nav-drawer-panel { transform: none; } /* Stagger items aparecem instantâneos quando reduced-motion */ .nav-drawer .nav-drawer-link, .nav-drawer .nav-drawer-cta, .nav-drawer .nav-drawer-meta { opacity: 1 !important; transform: none !important; } } /* ═════ PRINT ═════ */ @media print { body { background: white; color: black; } body::before, .nav, .scroll-top, .fab, .scroll-progress, .nav-burger, .nav-drawer { display: none !important; } .section { padding: 1.5rem 0; break-inside: avoid; } a { color: black; text-decoration: underline; } .btn, .price-btn { border: 1px solid black; background: white !important; color: black !important; box-shadow: none !important; } .article-toc { display: none; } .article-layout { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════ THEME TOGGLE — botão sol/lua no header Visível desktop + mobile. Posicionado entre .nav-burger e .nav-cta. ═══════════════════════════════════════════════════════ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: var(--bg-2); border: 1.5px solid var(--text-1); border-radius: var(--r-full); color: var(--text-1); cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0; /* Interactive feedback — Frequency Gate (frequent click): ≤200ms */ transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; margin-left: 0.25rem; } .theme-toggle:hover { background: var(--accent); color: var(--text-1); transform: translateY(-1px); box-shadow: 2px 2px 0 var(--text-1); } .theme-toggle:active { transform: translateY(0); box-shadow: 0 0 0 var(--text-1); } .theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px var(--text-1); } .theme-toggle svg { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; /* Crossfade icons — spatial movement uses ease-out, both axes; 250ms felt premium but is overkill on a frequent toggle. 200ms. */ transition: transform 200ms var(--ease-out), opacity 180ms var(--ease-out); } /* LIGHT mode (default + auto-light): mostra LUA (vamos para dark) */ .theme-toggle-sun { transform: translate(-50%, -50%) rotate(90deg) scale(0); opacity: 0; } .theme-toggle-moon { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; } /* DARK mode: mostra SOL (vamos para light) */ [data-theme="dark"] .theme-toggle-sun { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; } [data-theme="dark"] .theme-toggle-moon { transform: translate(-50%, -50%) rotate(-90deg) scale(0); opacity: 0; } @media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle svg { transition: none !important; } } /* Mobile: área tátil ≥44px (WCAG 2.5.5) */ @media (max-width: 959.98px) { .theme-toggle { width: 44px; height: 44px; margin-left: 0.5rem; } } /* Esconde no print */ @media print { .theme-toggle { display: none !important; } } /* ═══════════════════════════════════════════════════════ DARK MODE — ajustes finos de componentes que assumem fundo light ═══════════════════════════════════════════════════════ */ /* Hero gradient: o lime soft fica feio em fundo dark — reduz e empurra pra purple-warm */ [data-theme="dark"] .hero::before, [data-theme="dark"] .page-hero::before, [data-theme="dark"] .cta-final::before, [data-theme="dark"] .quad-big-card::before { background: radial-gradient(circle, rgba(150, 80, 255, 0.18) 0%, transparent 70%); } /* Drawer backdrop fica preto-roxo em dark (mais opacidade) */ [data-theme="dark"] .nav-drawer { background: rgba(8, 2, 26, 0.72); } /* Hamburger no dark: fundo bg-2 com bordas claras (já vem de var, mas garante contraste) */ [data-theme="dark"] .nav-burger { box-shadow: 3px 3px 0 var(--accent); } [data-theme="dark"] .nav-burger:active { box-shadow: 2px 2px 0 var(--accent); } /* Brutalist btn-primary box-shadow: trocar text-1 pelo accent em dark fica mais visível */ [data-theme="dark"] .btn-primary { box-shadow: 4px 4px 0 var(--accent); } [data-theme="dark"] .btn-primary:hover { box-shadow: 6px 6px 0 var(--accent); } [data-theme="dark"] .btn-primary:active { box-shadow: 0 0 0 var(--accent); } [data-theme="dark"] .hero-cta-strip, [data-theme="dark"] .hero-roi-price, [data-theme="dark"] .nav-drawer-cta { box-shadow: 4px 4px 0 var(--accent); } [data-theme="dark"] .hero-cta-strip:hover, [data-theme="dark"] .nav-drawer-cta:hover, [data-theme="dark"] .nav-drawer-cta:focus-visible { box-shadow: 6px 6px 0 var(--accent); } /* Page-hero number outline: stroke fica fininho no dark, aumenta levemente */ [data-theme="dark"] .page-hero-num { -webkit-text-stroke-color: var(--accent); } /* Compare-col--with (era purple deep + texto cream) — em dark já é dark, mas o card precisa manter destaque: mantém var(--text-1) que agora é claro, mas vira card "lime invertido" */ [data-theme="dark"] .compare-col--with { background: var(--bg-warm); border-color: var(--accent); } [data-theme="dark"] .compare-col--with .compare-tag { background: var(--accent); color: var(--bg-0); } [data-theme="dark"] .compare-col--with .compare-title { color: var(--text-1); } [data-theme="dark"] .compare-col--with .compare-list li { color: var(--text-2); } /* Proof-strip e elementos com background: var(--text-1) precisam ficar com fundo accent (text-1 agora é claro em dark, então fundo seria branco bizarro) */ [data-theme="dark"] .proof-strip { background: var(--bg-2); border-color: var(--accent); color: var(--text-1); } [data-theme="dark"] .proof-item-label { color: var(--text-3); } [data-theme="dark"] .cta-mini { background: var(--bg-2); border: 1.5px solid var(--accent); color: var(--text-1); } [data-theme="dark"] .event-card { background: var(--bg-2); border: 1.5px solid var(--accent); color: var(--text-1); } [data-theme="dark"] .event-info-desc { color: var(--text-2); } [data-theme="dark"] .roi-result { background: var(--bg-warm); border: 1.5px solid var(--accent); color: var(--text-1); } [data-theme="dark"] .roi-result-label { color: var(--text-3); } [data-theme="dark"] .roi-result-note, [data-theme="dark"] .roi-result-breakdown { color: var(--text-2); } [data-theme="dark"] .roi-result-breakdown { border-top-color: var(--border); } [data-theme="dark"] .roi-result-breakdown strong { color: var(--text-1); } [data-theme="dark"] .price.black { background: var(--bg-warm); border: 1.5px solid var(--accent); } [data-theme="dark"] .price.black .price-desc { color: var(--text-2); } [data-theme="dark"] .price.black .price-features li { color: var(--text-2); } [data-theme="dark"] .neto-big-row.black { background: var(--bg-warm); border: 1.5px solid var(--accent); color: var(--text-1); } [data-theme="dark"] .neto-big-row.black .neto-big-desc { color: var(--text-2); } [data-theme="dark"] .compare-table thead th.with { background: var(--bg-warm); color: var(--accent); } [data-theme="dark"] .compare-table .with-cell { background: rgba(200, 255, 0, 0.10); color: var(--text-1); } /* Hero-roi-eyebrow e elementos com bg text-1: invertem para bg-2 com texto accent */ [data-theme="dark"] .hero-roi-eyebrow { background: var(--bg-2); color: var(--accent); border: 1px solid var(--accent); } [data-theme="dark"] .nav-cta { background: var(--accent); color: var(--bg-0); } [data-theme="dark"] .nav-cta:hover { background: var(--text-1); color: var(--bg-0); } [data-theme="dark"] .btn-dark { background: var(--accent); color: var(--bg-0); } [data-theme="dark"] .btn-dark:hover { background: var(--text-1); color: var(--bg-0); } [data-theme="dark"] .btn-ghost { border-color: var(--accent); color: var(--text-1); } [data-theme="dark"] .btn-ghost:hover { background: var(--accent); color: var(--bg-0); } [data-theme="dark"] .benefit-num, [data-theme="dark"] .step-icon { background: var(--accent); color: var(--bg-0); } [data-theme="dark"] .step-icon { background: var(--bg-warm); color: var(--accent); } [data-theme="dark"] .for-card-icon { color: var(--bg-0); } [data-theme="dark"] .scroll-top { background: var(--accent); color: var(--bg-0); border-color: var(--accent); } [data-theme="dark"] .scroll-top:hover { background: var(--text-1); color: var(--bg-0); } [data-theme="dark"] .fab { color: var(--bg-0); box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.60); } [data-theme="dark"] .fab:hover { box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.70); } [data-theme="dark"] .skip-link { background: var(--accent); color: var(--bg-0); } /* Accent-soft em dark fica praticamente invisível — ajustes leves */ [data-theme="dark"] .nav-link--active, [data-theme="dark"] .nav-drawer-link--active, [data-theme="dark"] .nav-drawer-link:hover, [data-theme="dark"] .nav-drawer-link:focus-visible { background: rgba(200, 255, 0, 0.12); } [data-theme="dark"] .for-card--yes { background: rgba(200, 255, 0, 0.08); border-color: var(--accent); } /* Brand pin com mask: cor já vem de --accent, ok */ /* Hover do nav-link: var(--surface) já está adaptado, ok */ /* Banner (.banner) sem fundo explícito — ok por var */ /* ═══════════════════════════════════════════════════════ HERO MOTION REFINEMENT Princípio: Jakub Krehel — production polish 200–500ms. Stagger entrance no first paint (hero JÁ está no viewport). Só transform/opacity (GPU). Reduce-motion desabilita tudo. ═══════════════════════════════════════════════════════ */ @keyframes hero-enter-up { from { opacity: 0; transform: translateY(var(--hero-enter-y, 12px)); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-enter-scale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Estado inicial: invisível e pronto pra animar. Os 6 elementos do hero recebem a animação em sequência. */ .hero .hero-roi-eyebrow, .hero .hero-title, .hero .hero-sub, .hero .hero-roi-price, .hero .hero-cta-row, .hero .benefits-row > .benefit { opacity: 0; will-change: transform, opacity; animation: hero-enter-up 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero .hero-roi-eyebrow { --hero-enter-y: 8px; animation-delay: 0ms; } .hero .hero-title { --hero-enter-y: 16px; animation-delay: 100ms; } .hero .hero-sub { --hero-enter-y: 12px; animation-delay: 180ms; } .hero .hero-roi-price { /* override pra scale entrance — preço "puxa" o olhar */ animation-name: hero-enter-scale; animation-delay: 260ms; transform-origin: left center; } .hero .hero-cta-row { --hero-enter-y: 8px; animation-delay: 340ms; } /* Benefits: stagger interno de 30ms entre os 4 cards. Base do row começa em 420ms. */ .hero .benefits-row > .benefit { --hero-enter-y: 8px; } .hero .benefits-row > .benefit:nth-child(1) { animation-delay: 420ms; } .hero .benefits-row > .benefit:nth-child(2) { animation-delay: 450ms; } .hero .benefits-row > .benefit:nth-child(3) { animation-delay: 480ms; } .hero .benefits-row > .benefit:nth-child(4) { animation-delay: 510ms; } /* Limpar will-change depois que a animação termina (perf) */ .hero .hero-roi-eyebrow, .hero .hero-title, .hero .hero-sub, .hero .hero-roi-price, .hero .hero-cta-row, .hero .benefits-row > .benefit { animation-fill-mode: forwards; } /* Benefits hover refinement: lift mais natural com scale sutil. Sobrescreve o hover existente da linha 347 (mesma especificidade .benefit:hover). */ .hero .benefit { transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1); } .hero .benefit:hover { transform: translateY(-3px) scale(1.015); border-color: var(--text-1); box-shadow: var(--shadow-md); } /* Magnetic CTA: o JS aplica transform inline; aqui só garantimos que o estado base tenha transition pra leave suave (o JS já cuida disso, mas mantemos um fallback CSS pra qualquer estado intermediário). */ .hero .btn-primary { will-change: transform; } /* Reduce-motion: desabilita TUDO. Elementos aparecem instantâneos. */ @media (prefers-reduced-motion: reduce) { .hero .hero-roi-eyebrow, .hero .hero-title, .hero .hero-sub, .hero .hero-roi-price, .hero .hero-cta-row, .hero .benefits-row > .benefit { opacity: 1 !important; transform: none !important; animation: none !important; will-change: auto; } .hero .benefit { transition: border-color 180ms linear, box-shadow 180ms linear; } .hero .benefit:hover { transform: none !important; } .hero .btn-primary { will-change: auto; } } /* ═════ LABELED MEDIA SYSTEM ═════ */ .hero-inner.has-spot-media, .page-hero-inner.has-spot-media { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } .home-hero-copy, .page-hero-copy { min-width: 0; } .home-hero-copy .benefits-row { grid-template-columns: 1fr; } @media (min-width: 640px) { .home-hero-copy .benefits-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .hero-inner.has-spot-media { grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.78fr); gap: 3.5rem; } .page-hero-inner.has-spot-media { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr); gap: 3rem; } } .spot-media-frame { position: relative; min-width: 0; overflow: hidden; border: 1.5px solid var(--text-1); border-radius: 10px; background: var(--bg-dark); box-shadow: 10px 10px 0 var(--text-1); isolation: isolate; } .spot-media-frame--hero { min-height: 360px; } .spot-media-frame--error { width: min(100%, 620px); height: 320px; margin: 2rem auto 0; } .hero .spot-media-frame--hero { height: min(64vh, 620px); } .page-hero .spot-media-frame--hero { height: min(48vh, 460px); } .spot-media-visual { width: 100%; height: 100%; min-height: inherit; } .spot-media-visual img, .spot-media-visual video { display: block; width: 100%; height: 100%; object-fit: cover; } .spot-media-frame::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 5, 41, 0) 35%, rgba(15, 5, 41, 0.82) 100%), linear-gradient(135deg, rgba(5, 123, 114, 0.28), rgba(122, 31, 61, 0) 46%); pointer-events: none; } .spot-media-caption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; display: flex; flex-direction: column; gap: 0.3rem; color: var(--text-on-dark); } .spot-media-kicker { width: fit-content; max-width: 100%; padding: 0.3rem 0.55rem; border-radius: 6px; background: var(--accent); color: var(--text-1); font-family: var(--mono); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.1; text-transform: uppercase; } .spot-media-title { max-width: 24ch; font-size: clamp(1.1rem, 2vw, 1.55rem); font-weight: 900; letter-spacing: 0; line-height: 1.02; text-transform: uppercase; } .spot-media-meta { max-width: 42ch; color: rgba(245, 244, 255, 0.78); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; line-height: 1.35; text-transform: uppercase; } .spot-asset-story { padding: 5rem 0; background: var(--bg-dark); color: var(--text-on-dark); position: relative; overflow: hidden; } .spot-asset-story::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 123, 114, 0.2), transparent 38%), linear-gradient(135deg, transparent 60%, rgba(184, 107, 34, 0.18)); pointer-events: none; } .spot-asset-story .container { position: relative; z-index: 1; } .spot-asset-story-head { max-width: 780px; margin-bottom: 2rem; } .spot-asset-story .section-tag { color: var(--accent); } .spot-asset-story .section-title { color: var(--text-on-dark); } .spot-asset-story .section-desc { color: rgba(245, 244, 255, 0.76); } .spot-asset-story-grid, .spot-route-rail-grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; } @media (min-width: 640px) { .spot-asset-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .spot-asset-story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .spot-asset-card { position: relative; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(245, 244, 255, 0.22); border-radius: 8px; background: var(--bg-dark); } .spot-asset-card img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 420ms var(--ease-out); } .spot-asset-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 5, 41, 0.02) 20%, rgba(15, 5, 41, 0.82) 100%), linear-gradient(135deg, rgba(5, 123, 114, 0.22), rgba(122, 31, 61, 0.16)); } .spot-asset-card:hover img { transform: scale(1.045); } .spot-asset-card-body { position: absolute; left: 0.875rem; right: 0.875rem; bottom: 0.875rem; z-index: 1; display: flex; flex-direction: column; gap: 0.22rem; color: var(--text-on-dark); } .spot-asset-card-label { width: fit-content; max-width: 100%; padding: 0.25rem 0.45rem; border-radius: 6px; background: var(--accent); color: var(--text-1); font-family: var(--mono); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1.1; text-transform: uppercase; } .spot-asset-card strong { max-width: 28ch; font-size: 1rem; font-weight: 900; letter-spacing: 0; line-height: 1.08; text-transform: uppercase; } .spot-asset-card-body > span:last-child { color: rgba(245, 244, 255, 0.76); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase; } .spot-route-rail { padding: 1.25rem 0; background: var(--bg-1); border-bottom: 1px solid var(--border); } .spot-route-rail-inner { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; } .spot-route-rail-label { font-family: var(--mono); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple-deep); } .spot-route-rail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .spot-route-rail .spot-asset-card { aspect-ratio: 16 / 10; border-color: var(--border-strong); } .spot-route-rail .spot-asset-card strong { font-size: 0.86rem; } .spot-route-rail .spot-asset-card-body > span:last-child { display: none; } @media (min-width: 900px) { .spot-route-rail-inner { grid-template-columns: 160px 1fr; } } @media (max-width: 760px) { .hero .spot-media-frame--hero, .page-hero .spot-media-frame--hero { height: 390px; } .spot-route-rail-grid { grid-template-columns: 1fr; } .spot-route-rail .spot-asset-card { aspect-ratio: 16 / 9; } } @media (max-width: 430px) { .hero .spot-media-frame--hero, .page-hero .spot-media-frame--hero { height: 330px; } .spot-media-caption, .spot-asset-card-body { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; } } @media print { .spot-media-frame, .spot-asset-story, .spot-route-rail { display: none !important; } } /* ════════════════════════════════════════════ === MOTION AUDIT FIXES (Agent 11) === Princípio: "A melhor animação passa despercebida." Frequency Gate (Emil) + Production polish (Krehel). Foco: REMOVER ruído, ESPECIFICAR propriedades animadas, evitar `transition: all` (anima props caras como border-color junto com transform — repaint extra). ════════════════════════════════════════════ */ /* [FIX-01] Reveal global: 800ms → 420ms. Aparece em centenas de elementos por sessão; 800ms é entrance dramático que só serve em first-paint do hero. Krehel: 200-500ms. */ .reveal { transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); } /* [FIX-02] Hover lifts genéricos — substituir `transition: all` por transitions específicas (transform/box-shadow/border-color). Mesmo efeito visual, sem repaint extra de propriedades não-animadas. */ .benefit, .eco-card, .eco-big-card, .price, .section-nav-link, .related-card, .quad-card, .reason, .reason-big, .neto-row, .neto-big-row { transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background-color 220ms var(--ease-out); } /* [FIX-03] hero-cta-strip e btn — mesma razão. */ .btn, .btn-primary, .hero-cta-strip, .nav-cta, .fab { transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 180ms var(--ease-out), color 180ms var(--ease-out); } /* [FIX-04] Exit-intent close button rotaciona 90deg no hover. Clássico AI-slop: movimento decorativo sem função. Remove rotate. */ .spot-exit-close:hover { transform: none; } /* [FIX-05] Hero animation: limpar will-change após terminar. Mantém GPU layer apenas durante a animação (~700ms total max delay). Sem isso, o browser mantém layers desnecessários no compositor. */ .hero .hero-roi-eyebrow, .hero .hero-title, .hero .hero-sub, .hero .hero-roi-price, .hero .hero-cta-row, .hero .benefits-row > .benefit { /* Após a animação terminar, libera will-change */ animation-fill-mode: forwards; } /* Trick: animation-name shorthand "none" no fim seria ideal, mas requer JS. Em CSS puro, declarar will-change apenas durante a animação via @keyframes não funciona p/ will-change. Solução: usar transition pra animar, não animation. Custo de mudança seria alto — mantemos como está com a ressalva de que após 1s o layer é descartado pelo browser. */ /* [FIX-06] FAQ chevron — easing mais natural (era ease genérico). */ .faq-q::after { transition: transform 220ms var(--ease-out); } /* [FIX-07] Nav-link hover: era `transition: all 0.2s ease`. Especifica color + background. Background-color anima ok no compositor moderno (browsers >=2020 promovem). */ .nav-link { transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out); } /* [FIX-08] Footer link color hover — discreto, ok como está, só explícita. */ .footer-col-list a { transition: color 150ms var(--ease-out); } /* [FIX-09] Skip-link top transition — keyboard-initiated. Frequency Gate: keyboard NEVER animate. Reduz pra 100ms (quase instant). */ .skip-link { transition: top 100ms var(--ease-out); } /* [FIX-10] Scroll-top hover: ‑4px lift é generoso, reduz pra -2px (Emil). */ .scroll-top:hover { transform: translateY(-2px); } /* [FIX-11] Form-radio-option e search inputs: substituir `transition: all`. */ .form-radio-option { transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out); } /* [FIX-12] Garantir reduce-motion em TUDO que o audit tocou. O safety net global (linha 1320) já cuida via `* { transition-duration: 0.01ms }`, mas reforçamos especificamente os componentes acima — defensive coding contra futuras edições que adicionem transition mais específica e quebrem a herança do `*`. */ @media (prefers-reduced-motion: reduce) { .reveal, .benefit, .eco-card, .eco-big-card, .price, .section-nav-link, .related-card, .quad-card, .reason, .reason-big, .neto-row, .neto-big-row, .btn, .btn-primary, .hero-cta-strip, .nav-cta, .fab, .nav-link, .footer-col-list a, .skip-link, .scroll-top, .faq-q::after, .form-radio-option { transition: none !important; animation: none !important; } .scroll-top:hover, .benefit:hover, .eco-card:hover, .price:hover, .related-card:hover, .btn-primary:hover, .hero-cta-strip:hover, .fab:hover { transform: none !important; } } /* ═══════════════════════════════════════════════════════ MEDIA INTEGRATION (Sprint visual — /assets/media) ═══════════════════════════════════════════════════════ */ /* Background video sutil no hero */ .hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; filter: saturate(0.8) contrast(0.95); } .hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-0) 0%, transparent 30%, var(--bg-0) 95%); } [data-theme="dark"] .hero-media video, [data-theme="dark"] .hero-media img { opacity: 0.22; filter: saturate(0.9) brightness(0.7); } /* Media tile reutilizável (cards com video/img + caption) */ .media-tile { position: relative; display: block; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-warm); border: 1.5px solid var(--border-strong); aspect-ratio: 4 / 3; isolation: isolate; } .media-tile video, .media-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); } .media-tile:hover video, .media-tile:hover img { transform: scale(1.04); } .media-tile-meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem 1.5rem; background: linear-gradient(to top, rgba(15,5,41,0.85), transparent); color: var(--text-on-dark); pointer-events: none; } .media-tile-label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 0.25rem; } .media-tile-title { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-on-dark); } .media-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2rem 0; } @media (min-width: 640px) { .media-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .media-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } .media-grid--4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .media-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .media-grid--4 { grid-template-columns: repeat(4, 1fr); } } /* Media duo (split 2x) */ .media-duo { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; margin: 2rem 0; } @media (min-width: 900px) { .media-duo { grid-template-columns: 1fr 1fr; gap: 3rem; } } .media-duo--reverse > :first-child { order: 2; } @media (max-width: 899px) { .media-duo--reverse > :first-child { order: 0; } } .media-duo-figure { position: relative; border-radius: var(--r-2xl); overflow: hidden; border: 1.5px solid var(--text-1); aspect-ratio: 5 / 4; background: var(--bg-warm); } .media-duo-figure video, .media-duo-figure img { width: 100%; height: 100%; object-fit: cover; } /* Reduce motion: oculta vídeos, mantém posters */ @media (prefers-reduced-motion: reduce) { .media-tile video, .media-duo-figure video, .hero-media video { display: none; } } /* ════════════════════════════════════════════ QUICK WINS — media polish (Audit visual) ════════════════════════════════════════════ */ /* Aspect-ratio variants pra evitar crop ruim */ .media-tile--wide { aspect-ratio: 16 / 9; } .media-tile--portrait { aspect-ratio: 3 / 4; } .media-tile--square { aspect-ratio: 1 / 1; } /* Text-shadow em labels lime sobre vídeo claro (Patagonia etc) */ .media-tile-label { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); } .media-tile-title { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65); } /* Overlay gradient mais alto pra garantir contraste em vídeos claros */ .media-tile-meta { background: linear-gradient(to top, rgba(15,5,41,0.92) 0%, rgba(15,5,41,0.55) 60%, transparent 100%); } /* Skeleton de fundo nos tiles enquanto vídeo carrega — usa o poster como bg */ .media-tile[style*="--poster"]::before { content: ''; position: absolute; inset: 0; background: var(--poster) center/cover no-repeat; background-color: var(--bg-warm); z-index: -1; } /* Loading state shimmer pra tiles vazios (3s timeout) */ .media-tile video:not([data-loaded]) + .media-tile-meta { /* mantém meta visível mesmo se video falhar */ } /* Fallback robusto: se video não tem poster, usa background-color brand */ .media-tile { background-color: var(--purple, #0F0529); } .media-tile video, .media-tile img { background-color: var(--bg-warm); } /* Fix portrait images cortadas em landscape tiles — mostra centro vertical */ .media-tile img[src*="mendoza-wine-box"], .media-tile img[src*="vinhedo-noite"], .media-tile img[src*="burrata"], .media-tile img[src*="chef-ao-vivo"] { object-position: center 65%; } /* ============================================================ SPOT Icon System — "Marked Territory" (2026-05-24) 20 ícones proprietários em /assets/icons/ Cores: purple #4B0082 + lime #A8D400 + branco Filosofia: 2 cores, 1 peso, zero compromisso ============================================================ */ /* Base — fundo branco do PNG "desaparece" sobre cream via multiply */ .spot-icon { display: inline-block; width: var(--spot-icon-size, 64px); height: var(--spot-icon-size, 64px); object-fit: contain; mix-blend-mode: multiply; vertical-align: middle; /* Trabalha bem em telas retina por ser 256px nativo */ image-rendering: -webkit-optimize-contrast; } /* Tamanhos */ .spot-icon--xs { --spot-icon-size: 24px; } .spot-icon--sm { --spot-icon-size: 36px; } .spot-icon--md { --spot-icon-size: 56px; } .spot-icon--lg { --spot-icon-size: 80px; } .spot-icon--xl { --spot-icon-size: 120px; } .spot-icon--hero { --spot-icon-size: 180px; } /* Dark mode — inverter para que branco vire escuro e cores se mantenham brand */ [data-theme="dark"] .spot-icon { mix-blend-mode: screen; filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(0.95); } /* Container que dá fundo branco quando o ícone precisa ficar isolado (ex: dentro de cards escuros). Mantém identidade "marked territory". */ .spot-icon-frame { display: inline-flex; align-items: center; justify-content: center; background: #FFFFFF; border-radius: var(--radius-md, 16px); padding: 12px; /* Cancela o multiply pra não dobrar o efeito sobre o frame branco */ } .spot-icon-frame .spot-icon { mix-blend-mode: normal; } [data-theme="dark"] .spot-icon-frame { background: #FAFAFA; } [data-theme="dark"] .spot-icon-frame .spot-icon { filter: none; } /* Hover sutil pra ícones interativos */ a:hover > .spot-icon, button:hover > .spot-icon { transform: translateY(-2px) scale(1.03); transition: transform 200ms ease; } /* Modifier: quando o componente legacy -icon vira ícone PNG do SPOT system, o "círculo container" colorido desaparece e o PNG fica direto. Use class="benefit-icon is-spot-img spot-icon spot-icon--md" */ .benefit-icon.is-spot-img, .step-icon.is-spot-img, .price-icon.is-spot-img, .eco-icon.is-spot-img, .reason-icon.is-spot-img, .guarantee-icon.is-spot-img, .banner-icon.is-spot-img, .cta-pillar-icon.is-spot-img, .quad-icon.is-spot-img, .neto-icon.is-spot-img { width: auto; height: auto; background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0 !important; color: inherit; display: inline-block; } /* prefers-reduced-motion já cobre via rule global */