/* Programa de Parceiros — landing (/parceiros). Autônoma: não carrega * styles.css (que usa outros nomes de token). Tokens da casa, valores finais * do handoff hi-fi. Fontes vêm do no . */ :root { --veludo: #0f1512; --painel: #15201a; --linha: #2a3a31; --champanhe: #d4b36a; --champanhe-claro: #e8ce96; --marfim: #f1ebdd; --marfim-62: rgba(241, 235, 221, 0.62); --marfim-55: rgba(241, 235, 221, 0.55); --marfim-50: rgba(241, 235, 221, 0.5); --marfim-28: rgba(241, 235, 221, 0.28); --serif: "Marcellus", Georgia, serif; --editorial: "EB Garamond", Georgia, serif; --ui: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --grad-ouro: linear-gradient(180deg, #e8ce96, #d4b36a); --sec: clamp(72px, 11vh, 132px); --pad-x: clamp(20px, 4vw, 48px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--veludo); color: var(--marfim); font-family: var(--ui); font-weight: 300; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: var(--champanhe); text-decoration: none; } a:hover { color: var(--champanhe-claro); } ::selection { background: rgba(212, 179, 106, 0.28); color: var(--marfim); } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; } .pf-eyebrow { margin: 0 0 16px; font-size: 11.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--champanhe); } .pf-italic { font-family: var(--editorial); font-style: italic; color: var(--champanhe-claro); } .pf-hi { color: var(--champanhe-claro); } .pf-wrap { margin: 0 auto; width: 100%; } /* ---------- Reveal ---------- */ [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.65s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.65s cubic-bezier(0.2, 0.6, 0.2, 1); } .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; } } /* ---------- Nav ---------- */ .pf-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(15, 21, 18, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--linha); } .pf-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .pf-brand { display: flex; align-items: center; gap: 13px; flex: none; } .pf-selo { display: inline-flex; flex: none; } .pf-wordmark { font-family: var(--serif); font-size: 14px; letter-spacing: 0.26em; color: var(--marfim); white-space: nowrap; } .pf-wordmark .dot { color: var(--marfim-50); } .pf-wordmark .accent { color: var(--champanhe); } .pf-nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); } .pf-nav-entrar { font-size: 13px; letter-spacing: 0.06em; color: var(--marfim-62); white-space: nowrap; } .pf-nav-entrar:hover { color: var(--marfim); } .pf-btn { display: inline-flex; align-items: center; gap: 11px; font-family: var(--ui); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; background: var(--grad-ouro); color: var(--veludo); border: 0; border-radius: 2px; cursor: pointer; transition: transform 0.25s, box-shadow 0.25s; } .pf-btn--nav { padding: 12px 22px; white-space: nowrap; } .pf-btn--nav:hover { color: var(--veludo); transform: translateY(-1px); box-shadow: 0 10px 26px -12px rgba(212, 179, 106, 0.7); } .pf-btn--lg { padding: 16px 30px; } .pf-btn--lg:hover { color: var(--veludo); transform: translateY(-3px); box-shadow: 0 18px 44px -18px rgba(212, 179, 106, 0.75); } /* ---------- Sections base ---------- */ .pf-sec { padding: var(--sec) var(--pad-x); border-top: 1px solid var(--linha); } .pf-sec--painel { background: var(--painel); } .pf-h2 { font-size: clamp(28px, 4vw, 52px); line-height: 1.1; color: var(--marfim); } .pf-h2--sm { font-size: clamp(27px, 3.6vw, 46px); line-height: 1.12; } .pf-lead { font-size: 15.5px; line-height: 1.65; color: var(--marfim-62); } /* ---------- S1 Hero ---------- */ .pf-hero { position: relative; min-height: min(92svh, 860px); display: flex; align-items: flex-end; padding: 120px var(--pad-x) clamp(48px, 7vh, 88px); overflow: hidden; } .pf-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; opacity: 0.5; } .pf-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, #0f1512 6%, rgba(15, 21, 18, 0.86) 38%, rgba(15, 21, 18, 0.7) 72%, rgba(15, 21, 18, 0.8) 100%); } .pf-hero-inner { position: relative; max-width: 1280px; margin: 0 auto; width: 100%; } .pf-hero-eyebrow { margin: 0 0 22px; font-size: 11.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--champanhe); } .pf-h1 { font-family: var(--serif); line-height: 1.04; font-size: clamp(36px, 6vw, 82px); color: var(--marfim); max-width: 19ch; } .pf-hero-sub { margin: 28px 0 0; max-width: 62ch; font-size: clamp(15.5px, 1.5vw, 19px); line-height: 1.65; color: var(--marfim-62); } .pf-hero-cta { margin-top: 36px; } /* ---------- S2 A conta ---------- */ .pf-s2-head { margin-bottom: clamp(40px, 6vh, 64px); max-width: 60ch; } .pf-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(18px, 2.4vw, 28px); align-items: stretch; } .pf-card { border: 1px solid var(--linha); border-radius: 5px; padding: clamp(26px, 3vw, 38px); } .pf-card--gold { border-color: var(--champanhe); background: var(--painel); box-shadow: 0 24px 60px -34px rgba(212, 179, 106, 0.5); } .pf-card-kicker { margin: 0 0 14px; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champanhe); } .pf-card-kicker--mut { color: var(--marfim-55); } .pf-card-title { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; color: var(--marfim); } .pf-card-title--mut { color: var(--marfim-62); } .pf-card-body { margin: 0; font-size: 15px; line-height: 1.68; color: var(--marfim-62); } .pf-example { margin-top: clamp(20px, 2.6vw, 28px); border: 1px solid var(--linha); border-radius: 5px; padding: clamp(24px, 3vw, 34px); background: var(--painel); } .pf-example p { margin: 0; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.62; color: var(--marfim); max-width: 76ch; } .pf-note { margin: 18px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--marfim-50); } /* ---------- S3 Vantagens ---------- */ .pf-list { margin: 0; padding: 0; list-style: none; } .pf-vantagem { display: flex; gap: clamp(16px, 2.6vw, 38px); padding: clamp(22px, 3vh, 30px) 0; border-top: 1px solid var(--linha); flex-wrap: wrap; } .pf-num { font-family: var(--editorial); font-style: italic; color: var(--champanhe-claro); flex: none; } .pf-vantagem .pf-num { font-size: 20px; line-height: 1.5; min-width: 26px; } .pf-vantagem h3 { font-size: clamp(18px, 2vw, 22px); color: var(--marfim); flex: 0 0 clamp(200px, 26vw, 300px); line-height: 1.35; } .pf-vantagem p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--marfim-62); flex: 1 1 260px; min-width: 220px; } .pf-list-cap { border-top: 1px solid var(--linha); } /* ---------- S4 Passos ---------- */ .pf-center { text-align: center; margin-bottom: clamp(40px, 6vh, 68px); } .pf-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; } .pf-step { padding: clamp(26px, 3vw, 38px) clamp(18px, 2.4vw, 32px); border-top: 1px solid var(--linha); } .pf-step .pf-num { font-size: 30px; } .pf-step h3 { margin: 16px 0 12px; font-size: 21px; color: var(--marfim); } .pf-step p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--marfim-62); } /* ---------- S5 Código ---------- */ .pf-s5 { position: relative; padding: clamp(76px, 12vh, 140px) var(--pad-x); overflow: hidden; border-top: 1px solid var(--linha); } .pf-s5-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; } .pf-s5-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, #0f1512 2%, rgba(15, 21, 18, 0.9) 30%, rgba(15, 21, 18, 0.9) 70%, #0f1512 100%); } .pf-s5-inner { position: relative; max-width: 1000px; margin: 0 auto; } .pf-codigo { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--linha); align-items: flex-start; } .pf-x { flex: none; color: var(--champanhe); font-size: 13px; line-height: 1.7; } .pf-codigo p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--marfim-62); } .pf-codigo p strong { color: var(--marfim); font-weight: 400; } .pf-close { margin: clamp(28px, 4vh, 40px) 0 0; padding: 22px 24px; border: 1px solid var(--linha); border-radius: 5px; background: var(--painel); font-size: 15px; line-height: 1.68; color: var(--marfim-62); max-width: 74ch; } /* ---------- S6 Públicos ---------- */ .pf-publicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 2vw, 24px); } .pf-publico { border: 1px solid var(--linha); border-radius: 5px; padding: clamp(24px, 2.8vw, 34px); transition: border-color 0.3s; } .pf-publico:hover { border-color: var(--champanhe); } .pf-publico h3 { margin: 0 0 12px; font-size: 21px; color: var(--marfim); } .pf-publico p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--marfim-62); } .pf-s6-close { margin: clamp(26px, 3.4vh, 36px) 0 0; font-family: var(--editorial); font-style: italic; font-size: clamp(16px, 1.8vw, 20px); line-height: 1.55; color: var(--marfim-62); max-width: 70ch; } /* ---------- S7 FAQ ---------- */ .pf-faq { max-width: 860px; margin: 0 auto; } .pf-faq-item { border-top: 1px solid var(--linha); } .pf-faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 4px; color: var(--marfim); font-family: var(--serif); font-size: clamp(17px, 2vw, 21px); } .pf-faq-item > summary::-webkit-details-marker { display: none; } .pf-faq-item > summary:focus-visible { outline: 2px solid var(--champanhe); outline-offset: 4px; border-radius: 2px; } .pf-plus { flex: none; color: var(--champanhe); font-family: var(--ui); font-weight: 300; font-size: 26px; line-height: 1; transition: transform 0.3s ease; } .pf-faq-item[open] .pf-plus { transform: rotate(45deg); } .pf-faq-a { padding: 0 4px 28px; margin: 0; font-size: 15px; line-height: 1.7; color: var(--marfim-62); max-width: 66ch; } .pf-faq-cap { border-top: 1px solid var(--linha); } /* ---------- S8 Form ---------- */ .pf-form-wrap { max-width: 780px; margin: 0 auto; } .pf-form-head { margin-bottom: clamp(36px, 5vh, 52px); } .pf-form { display: flex; flex-direction: column; gap: 22px; } .pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; } .pf-field label { display: block; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--marfim-62); margin-bottom: 9px; } .pf-input, .pf-select, .pf-textarea { width: 100%; background: var(--veludo); border: 1px solid var(--linha); border-radius: 3px; padding: 14px 16px; color: var(--marfim); font-family: var(--ui); font-size: 15px; font-weight: 300; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .pf-input::placeholder, .pf-textarea::placeholder { color: var(--marfim-28); } .pf-select { appearance: none; -webkit-appearance: none; cursor: pointer; } .pf-select option { background: var(--painel); color: var(--marfim); } .pf-textarea { resize: vertical; line-height: 1.6; min-height: 110px; } .pf-input:focus, .pf-select:focus, .pf-textarea:focus { border-color: var(--champanhe); box-shadow: 0 0 0 3px rgba(212, 179, 106, 0.18); } .pf-form-foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; margin-top: 6px; } .pf-btn--submit { padding: 16px 32px; } .pf-btn--submit:hover { color: var(--veludo); transform: translateY(-2px); box-shadow: 0 16px 40px -18px rgba(212, 179, 106, 0.7); } .pf-btn[disabled] { opacity: 0.55; cursor: not-allowed; } .pf-secure { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--marfim-50); } .pf-form-error { margin: 0; color: var(--rose, #e2a493); font-size: 13.5px; } .pf-done { border: 1px solid var(--champanhe); border-radius: 5px; padding: clamp(32px, 4vw, 48px); background: var(--veludo); text-align: center; } .pf-done .pf-selo { margin-bottom: 20px; } .pf-done p { margin: 0; font-family: var(--editorial); font-style: italic; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.4; color: var(--marfim); } [hidden] { display: none !important; } /* ---------- Footer ---------- */ .pf-footer { padding: clamp(52px, 8vh, 84px) var(--pad-x) 44px; border-top: 1px solid var(--linha); } .pf-footer-inner { max-width: 1180px; margin: 0 auto; } .pf-footer-top { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; padding-bottom: 34px; border-bottom: 1px solid var(--linha); } .pf-footer-brand { display: flex; align-items: center; gap: 13px; } .pf-footer-brand .wm { font-family: var(--serif); font-size: 13px; letter-spacing: 0.28em; color: var(--marfim-62); } .pf-footer-nav { display: flex; flex-wrap: wrap; gap: 22px 32px; } .pf-footer-nav a { font-size: 13.5px; color: var(--marfim-62); } .pf-footer-nav a:hover { color: var(--champanhe); } .pf-copy { margin: 26px 0 0; font-size: 12.5px; letter-spacing: 0.06em; color: var(--marfim-50); } .pf-legal { margin: 22px 0 0; padding: 18px 22px; border: 1px solid var(--linha); border-radius: 3px; font-size: 12.5px; line-height: 1.62; color: var(--marfim-50); max-width: 80ch; }