/* HB Capital — hbcapital.shop Identidade: navy + creme + dourado (mesma do logo institucional) */ :root { --navy: #0a1733; --navy-2: #132447; --cream: #f4f1ec; --cream-2: #e9e3d6; --accent: #c9a24c; --accent-deep: #a0813a; --ink: #111827; --muted: #5b6473; --subtle: #8a949e; --rule: rgba(10, 23, 51, 0.1); --rule-strong: rgba(10, 23, 51, 0.18); --warn-bg: #fdf6e7; --warn-border: #e6d3a3; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(10, 23, 51, 0.06); --shadow-md: 0 6px 22px rgba(10, 23, 51, 0.09); --shadow-lg: 0 20px 56px rgba(10, 23, 51, 0.14); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--cream); color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .container { max-width: 1080px; margin: 0 auto; padding: 0 28px; } .container--narrow { max-width: 820px; } /* ---------- Alternador de idioma ---------- */ /* Os dois idiomas ficam no HTML; alternamos por CSS para que o rastreador da Meta leia PT e EN sem executar JavaScript. Os seletores sao ancorados em `body ` de proposito: o script troca o atributo lang do , e um seletor solto como [lang='en'] casaria com o proprio e esconderia a pagina inteira. */ body [lang='en'] { display: none; } body.lang-en [lang='pt'] { display: none; } body.lang-en [lang='en'] { display: revert; } .langswitch { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 999px; overflow: hidden; background: #fff; } .langswitch button { font: inherit; font-size: 13px; font-weight: 500; padding: 6px 16px; border: 0; background: transparent; color: var(--muted); cursor: pointer; } .langswitch button[aria-pressed='true'] { background: var(--navy); color: var(--cream); } /* ---------- Cabeçalho ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: rgba(244, 241, 236, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); } .site-header .bar { display: flex; align-items: center; gap: var(--sp-5); padding: 16px 0; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand img, .brand .mark { width: 42px; height: 42px; border-radius: 11px; flex: none; } .brand .name { font-family: 'Instrument Serif', Georgia, serif; font-size: 21px; letter-spacing: -0.01em; color: var(--navy); line-height: 1.1; } .brand .kicker { display: block; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; } .site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-5); } .site-nav a { color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 500; } .site-nav a:hover { color: var(--navy); } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; } .btn--primary { background: var(--navy); color: var(--cream); } .btn--primary:hover { background: var(--navy-2); } .btn--ghost { border-color: var(--rule-strong); color: var(--navy); background: #fff; } .btn--ghost:hover { border-color: var(--navy); } /* ---------- Hero ---------- */ .hero { padding: var(--sp-9) 0 var(--sp-8); } .eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; margin-bottom: var(--sp-4); } h1 { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(38px, 6vw, 62px); line-height: 1.08; letter-spacing: -0.02em; color: var(--navy); font-weight: 400; margin-bottom: var(--sp-5); } .lede { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 62ch; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-6); } /* ---------- Seções ---------- */ section { padding: var(--sp-8) 0; } h2 { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(27px, 3.4vw, 38px); line-height: 1.18; color: var(--navy); font-weight: 400; letter-spacing: -0.015em; margin-bottom: var(--sp-4); } h3 { font-size: 17px; font-weight: 650; color: var(--navy); margin-bottom: var(--sp-2); } p + p { margin-top: var(--sp-4); } section p { color: var(--muted); max-width: 68ch; } .grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--sp-6); box-shadow: var(--shadow-sm); } .card p { font-size: 15px; margin-top: var(--sp-2); } /* ---------- Aviso regulatório ---------- */ .notice { background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-md); padding: var(--sp-5) var(--sp-6); margin-top: var(--sp-6); } .notice p { color: #6b5518; font-size: 15px; max-width: none; } .notice strong { color: #4d3d10; } /* ---------- Documentos legais ---------- */ .doc-header { background: var(--navy); color: var(--cream); padding: var(--sp-8) 0 var(--sp-7); } .doc-header .eyebrow { color: var(--accent); } .doc-header h1 { color: var(--cream); font-size: clamp(32px, 5vw, 50px); } .doc-header .updated { color: rgba(244, 241, 236, 0.7); font-size: 14.5px; } .doc-header .langswitch { margin-top: var(--sp-5); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); } .doc-header .langswitch button { color: rgba(244,241,236,0.75); } .doc-header .langswitch button[aria-pressed='true'] { background: var(--accent); color: var(--navy); } .doc { padding: var(--sp-8) 0 var(--sp-9); } .doc h2 { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 650; margin-top: var(--sp-7); margin-bottom: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--rule); } .doc h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; } .doc h3 { margin-top: var(--sp-5); } .doc p, .doc li { color: var(--muted); font-size: 16px; } .doc ul, .doc ol { margin: var(--sp-3) 0 var(--sp-3) var(--sp-5); } .doc li { margin-bottom: var(--sp-2); } .doc strong { color: var(--ink); } .doc a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; } .callout { background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: var(--sp-5); margin: var(--sp-5) 0; } .callout p { max-width: none; } .steps { counter-reset: step; list-style: none; margin-left: 0; } .steps li { counter-increment: step; position: relative; padding-left: 46px; margin-bottom: var(--sp-5); } .steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--cream); font-size: 14px; font-weight: 600; display: grid; place-items: center; } table.data { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: 15px; } table.data th, table.data td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; } table.data th { color: var(--navy); font-weight: 650; } table.data td { color: var(--muted); } /* ---------- Rodapé ---------- */ .site-footer { background: var(--navy); color: rgba(244, 241, 236, 0.72); padding: var(--sp-8) 0 var(--sp-6); font-size: 14.5px; } .site-footer h4 { color: var(--cream); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-4); font-weight: 600; } .site-footer a { color: rgba(244, 241, 236, 0.72); text-decoration: none; } .site-footer a:hover { color: var(--accent); } .footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .footer-grid ul { list-style: none; } .footer-grid li { margin-bottom: var(--sp-2); } .footer-legal { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgba(244, 241, 236, 0.14); font-size: 13.5px; color: rgba(244, 241, 236, 0.55); } .footer-legal p { max-width: none; } .footer-legal p + p { margin-top: var(--sp-3); } @media (max-width: 720px) { .site-nav a { display: none; } .site-nav .langswitch { display: inline-flex; } .container { padding: 0 20px; } section { padding: var(--sp-7) 0; } }