/* ========================================================================= tpc31 — Design System (tokens compartilhados entre todas as cap-v*) Importado via no de cada versão. ========================================================================= */ @font-face { font-family: "Manrope"; src: url("https://pcm.topcorpus.com.br/assets/shared/fonts/Manrope-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Manrope"; src: url("https://pcm.topcorpus.com.br/assets/shared/fonts/Manrope-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Manrope"; src: url("https://pcm.topcorpus.com.br/assets/shared/fonts/Manrope-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Manrope"; src: url("https://pcm.topcorpus.com.br/assets/shared/fonts/Manrope-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Manrope"; src: url("https://pcm.topcorpus.com.br/assets/shared/fonts/Manrope-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } :root { /* Paleta — roxo profundo + lavanda + CTA verde (mantido da ID visual) */ --color-primary: #7b2cbf; --color-primary-dark: #5a189a; --color-secondary: #a855f7; --color-accent: #c084fc; --color-bg: #ffffff; --color-bg-soft: #fdf6ff; --color-bg-gradient-start: #fdf6ff; --color-bg-gradient-mid: #f4e8ff; --color-bg-gradient-end: #e8d5ff; --color-text: #1a1a2e; --color-text-muted: #5a5a6e; --color-text-inverse: #ffffff; --color-cta: #22c55e; --color-cta-hover: #16a34a; --color-cta-shadow: rgba(34, 197, 94, 0.35); --color-error: #ef4444; --color-error-strong: #dc2626; --color-error-bg: #fee2e2; --color-error-text: #991b1b; --color-success-bg: #dcfce7; --color-success-text: #166534; --color-bg-footer: #1a0a2e; --color-border: rgba(26, 26, 46, 0.08); --color-input-bg: #ffffff; --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); --gradient-text: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%); --font-display: "Manrope", system-ui, -apple-system, sans-serif; --font-body: "Manrope", system-ui, -apple-system, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 2px 8px rgba(26,26,46,.06); --shadow-md: 0 10px 30px rgba(123,44,191,.12); --shadow-lg: 0 20px 60px rgba(123,44,191,.18); --shadow-cta: 0 12px 32px rgba(34,197,94,.32); --container-max: 1200px; --container-padding: clamp(1.5rem, 5vw, 2.5rem); --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 560ms; --z-base: 1; --z-raised: 10; --z-sticky: 100; } *, *::before, *::after { box-sizing: border-box; } /* Scrollbar — paleta roxa da campanha */ html { scrollbar-color: var(--color-primary) var(--color-bg-soft); scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--color-bg-soft); } ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: var(--radius-pill); border: 2px solid var(--color-bg-soft); } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: var(--lh-normal); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, svg { display: block; max-width: 100%; height: auto; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: -.02em; } p { margin: 0; } a { color: inherit; } /* Distribui as quebras de linha de forma equilibrada em títulos e textos, evitando viúvas/órfãs (o browser ignora em blocos muito longos). */ h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption { text-wrap: balance; } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================= Componentes compartilhados — botão CTA + campos ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: .85rem 1.75rem; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: .95rem; font-weight: var(--fw-bold); letter-spacing: .04em; text-decoration: none; text-transform: uppercase; text-wrap: balance; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); will-change: transform; user-select: none; } .btn--cta { width: 100%; background: linear-gradient(135deg, var(--color-cta) 0%, var(--color-cta-hover) 100%); color: var(--color-text-inverse); box-shadow: var(--shadow-cta); position: relative; overflow: hidden; animation: ctaPulse 2.2s var(--ease-in-out) infinite; } .btn--cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.25) 50%, transparent 80%); transform: translateX(-100%); transition: transform 800ms var(--ease-out); } .btn--cta:hover { animation-play-state: paused; transform: translateY(-2px) scale(1); background: var(--gradient-brand); box-shadow: 0 16px 40px rgba(123,44,191,.55), 0 0 0 1px rgba(123,44,191,.25); } .btn--cta:hover::before { transform: translateX(100%); } .btn--cta:active { animation-play-state: paused; transform: translateY(0) scale(.98); } .btn--cta[disabled] { opacity: .7; cursor: progress; animation-play-state: paused; } @media (max-width: 959px) { .btn { padding: 1.05rem 1.75rem; font-size: 1rem; } .field__input { padding: .85rem 1.15rem; font-size: 1rem; } } @keyframes ctaPulse { 0%, 100% { transform: scale(1); box-shadow: 0 12px 32px rgba(34,197,94,.32), 0 0 0 0 rgba(34,197,94,.45); } 50% { transform: scale(1.035); box-shadow: 0 14px 36px rgba(34,197,94,.4), 0 0 0 10px rgba(34,197,94,0); } } .btn--cta:hover { animation: none; } .field { position: relative; width: 100%; } .field__input { width: 100%; padding: .8rem 1.15rem; border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent); border-radius: var(--radius-pill); background-color: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--color-text); font-size: .9375rem; line-height: 1.3; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); box-shadow: 0 1px 3px rgba(26,26,46,.04); } .field__input::placeholder { color: var(--color-text-muted); opacity: .8; } .field__input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(123, 44, 191, .25); } .field__input[aria-invalid="true"] { border-color: var(--color-error); box-shadow: 0 0 0 4px rgba(239,68,68,.12); } .field__input[aria-invalid="true"]::placeholder { color: var(--color-error-strong); font-weight: var(--fw-medium); opacity: 1; } .field__error { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .form-status { display: none; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: .875rem; text-align: center; } .form-status--success { display: block; background-color: var(--color-success-bg); color: var(--color-success-text); } .form-status--error { display: block; background-color: var(--color-error-bg); color: var(--color-error-text); } /* Contagem regressiva do redirecionamento pós-cadastro: mais destaque */ .form-status--redirecting { font-size: 1.05rem; font-weight: var(--fw-bold); animation: statusPulse 1s ease-in-out infinite; } @keyframes statusPulse { 50% { transform: scale(1.04); opacity: .85; } } @media (prefers-reduced-motion: reduce) { .form-status--redirecting { animation: none; } } /* ========================================================================= LGPD — consentimento no formulário + aviso de cookies Parecer AFO (jul/2026). O checkbox é declarativo: vem marcado e NÃO bloqueia o envio (decisão comercial). Para torná-lo bloqueante depois, ver o guard em form-handler.js. ========================================================================= */ .consent { display: flex; align-items: flex-start; gap: .5rem; width: 100%; margin: -.15rem 0 .1rem; text-align: left; } .consent__box { flex: 0 0 auto; width: 1rem; height: 1rem; margin: .12rem 0 0; accent-color: var(--color-primary); cursor: pointer; } .consent__box:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .consent__text { font-size: .6875rem; line-height: 1.45; color: var(--color-text-muted); cursor: pointer; } .consent__text a { color: var(--color-primary); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; } .consent__text a:hover { color: var(--color-primary-dark); } /* Variante para formulários sobre fundo escuro */ .consent--inverse .consent__text { color: rgba(255,255,255,.72); } .consent--inverse .consent__text a { color: var(--color-accent); } /* Reveal genérico */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* Primeira dobra (hero) SEM animação de entrada — conteúdo aparece instantâneo; as dobras abaixo mantêm o reveal no scroll. */ .hero [data-reveal] { opacity: 1; transform: none; transition: none; } /* Footer compartilhado */ .footer { padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem); background: var(--color-bg-footer); color: rgba(255,255,255,.7); } .footer__top { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2.5vw, 1.5rem); align-items: center; text-align: center; padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem); border-bottom: 1px solid rgba(255,255,255,.08); } @media (min-width: 720px) { .footer__top { grid-template-columns: 1fr auto 1fr; text-align: left; } .footer__copy { grid-column: 1; justify-self: start; text-align: left; } .footer__brand { grid-column: 2; justify-self: center; text-align: center; } .footer__links { grid-column: 3; justify-self: end; text-align: right; } } .footer__logo { display: block; width: clamp(110px, 12vw, 140px); height: auto; margin: 0 auto; opacity: .92; } @media (min-width: 720px) { .footer__logo { margin: 0; } } .footer__copy { font-size: .8rem; font-weight: var(--fw-medium); letter-spacing: .02em; line-height: 1.5; color: rgba(255,255,255,.65); } .footer__copy strong { color: rgba(255,255,255,.85); font-weight: var(--fw-semibold); } .footer__links { display: inline-flex; flex-direction: column; gap: .25rem; font-size: .8rem; font-weight: var(--fw-medium); } .footer__links a { color: rgba(255,255,255,.85); text-decoration: none; transition: color .2s ease, opacity .2s ease; } .footer__links a:hover, .footer__links a:focus-visible { color: #fff; text-decoration: underline; } .footer__links-row { display: inline-flex; align-items: center; gap: .5rem; justify-content: center; } @media (min-width: 720px) { .footer__links-row { justify-content: flex-end; } } .footer__links-row span[aria-hidden] { opacity: .35; } .footer__company { font-size: .72rem; letter-spacing: .04em; color: rgba(255,255,255,.55); text-transform: uppercase; } .footer__legal { margin-top: clamp(1rem, 2vw, 1.5rem); font-size: .75rem; line-height: 1.55; color: rgba(255,255,255,.55); text-align: left; max-width: 1100px; margin-left: auto; margin-right: auto; } .footer__legal-label { display: block; font-size: .7rem; font-weight: var(--fw-extrabold); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: .35rem; } /* Páginas legais (privacidade / termos) */ .legal { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); background: #ffffff; color: var(--color-text); } .legal__container { max-width: 760px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 1.5rem); } .legal__back { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: var(--fw-semibold); color: var(--color-primary-dark); text-decoration: none; margin-bottom: clamp(1.5rem, 3vw, 2rem); } .legal__back:hover { text-decoration: underline; } .legal__title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: var(--fw-extrabold); line-height: 1.2; letter-spacing: -.015em; margin-bottom: .5rem; color: var(--color-text); } .legal__updated { font-size: .85rem; color: var(--color-text-muted, #6b6b76); margin-bottom: clamp(1.5rem, 3vw, 2rem); } .legal h2 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: var(--fw-extrabold); margin-top: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: .75rem; color: var(--color-primary-dark); letter-spacing: -.01em; } .legal h3 { font-size: 1.05rem; font-weight: var(--fw-bold); margin-top: 1.5rem; margin-bottom: .5rem; } .legal p, .legal li { font-size: 1rem; line-height: 1.65; margin-bottom: .85rem; } .legal ul { padding-left: 1.25rem; margin-bottom: 1rem; } .legal a { color: var(--color-primary); text-decoration: underline; } .legal strong { font-weight: var(--fw-bold); }