/* =========================================================== Performlys — estilos das páginas legais Identidade: rosa/magenta (#FF66CC / #8C006B / #FFE3EB) Dark mode via classe .dark no (compartilhado com o site) =========================================================== */ :root { --brand: #FF66CC; --brand-deep: #8C006B; --brand-700: #B3247E; --brand-light: #FFE3EB; --bg: #ffffff; --surface: #ffffff; --surface-2: #faf7fb; --text: #1b1320; --muted: #6b6675; --border: #ece8ef; } html.dark { --bg: #120c16; --surface: #1c1322; --surface-2: #160f1c; --text: #ece9f0; --muted: #a89fb2; --border: rgba(255,255,255,0.08); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.65; } ::selection { background: var(--brand); color: #fff; } a { color: var(--brand-700); text-decoration: none; } html.dark a { color: #FF80C8; } a:hover { text-decoration: underline; } /* ---------- Header ---------- */ .legal-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.25rem; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .legal-header .logo img { height: 34px; width: auto; display: block; } .logo-light-only { display: block; } .logo-dark-only { display: none; } html.dark .logo-light-only { display: none; } html.dark .logo-dark-only { display: block; } .header-actions { display: flex; align-items: center; gap: .5rem; } .btn { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; cursor: pointer; padding: .55rem .95rem; border-radius: .75rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: border-color .2s, transform .2s, background .2s; } .btn:hover { border-color: var(--brand); transform: translateY(-1px); text-decoration: none; } .btn-icon { padding: .55rem; } .btn svg { width: 18px; height: 18px; } /* ---------- Hero ---------- */ .legal-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #8C006B 0%, #C21F8A 45%, #FF66CC 100%); color: #fff; padding: 4.5rem 1.25rem 5.5rem; text-align: center; } .legal-hero::after { content: ''; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(circle at 20% 20%, #fff 1px, transparent 1px); background-size: 26px 26px; } .legal-hero .badge { position: relative; z-index: 1; display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.16); padding: .4rem .9rem; border-radius: 999px; margin-bottom: 1rem; } .legal-hero h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.02em; } .legal-hero p { position: relative; z-index: 1; margin: .75rem auto 0; max-width: 640px; color: rgba(255,255,255,.9); } /* ---------- Conteúdo ---------- */ .legal-wrap { max-width: 880px; margin: -3rem auto 0; padding: 0 1.25rem 4rem; position: relative; z-index: 2; } .legal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 1.5rem; padding: clamp(1.5rem, 4vw, 3rem); box-shadow: 0 20px 50px -24px rgba(140,0,107,.25); } /* índice */ .legal-toc { background: var(--surface-2); border: 1px solid var(--border); border-radius: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; } .legal-toc strong { display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); margin-bottom:.75rem; } .legal-toc ol { margin:0; padding-left: 1.1rem; columns: 2; column-gap: 2rem; } .legal-toc li { margin: .3rem 0; font-size: .9rem; } @media (max-width: 560px){ .legal-toc ol { columns: 1; } } .legal-content h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin: 2.4rem 0 .75rem; scroll-margin-top: 90px; display: flex; align-items: baseline; gap: .6rem; } .legal-content h2 .num { font-size: .85rem; font-weight: 800; background: linear-gradient(120deg,#8C006B,#FF66CC); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .legal-content h3 { font-size: 1.02rem; font-weight: 600; margin: 1.4rem 0 .5rem; } .legal-content p { margin: .6rem 0; color: var(--text); } .legal-content ul { margin: .6rem 0; padding-left: 1.25rem; } .legal-content li { margin: .4rem 0; } .legal-content strong { font-weight: 600; } .legal-content .lead { font-size: 1.05rem; color: var(--muted); } .legal-content .placeholder { background: rgba(255,102,204,.14); border-radius: .35rem; padding: 0 .3rem; color: var(--brand-700); font-weight: 600; } html.dark .legal-content .placeholder { color: #FF80C8; } .legal-content hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } .updated { font-size: .85rem; color: var(--muted); margin-top: .5rem; } /* ---------- Footer ---------- */ .legal-footer { border-top: 1px solid var(--border); background: var(--surface-2); padding: 2.5rem 1.25rem; text-align: center; font-size: .85rem; color: var(--muted); } .legal-footer .links { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; margin-bottom: 1rem; } .legal-footer .links a { color: var(--muted); font-weight: 500; } .legal-footer .links a:hover { color: var(--brand); text-decoration: none; } /* ---------- Seletor de idioma ---------- */ .hidden { display: none !important; } .lang-wrap { position: relative; } .lang-menu { position: absolute; right: 0; margin-top: .5rem; min-width: 160px; background: var(--surface); border: 1px solid var(--border); border-radius: .85rem; padding: .4rem; box-shadow: 0 16px 40px -16px rgba(140,0,107,.25); z-index: 60; } .lang-opt { display: flex; width: 100%; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: .55rem; border: none; background: none; cursor: pointer; font: inherit; font-size: .875rem; color: var(--text); text-align: left; } .lang-opt:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }