/* psychology.css — persuasão ética e psicologia visual * * Filosofia: ajudar quem já está interessado a tomar a próxima ação * com clareza, sem criar estados emocionais artificiais (ansiedade, FOMO, * urgência fabricada). * * O que ESTÁ aqui: * - Hierarquia visual de CTAs (clareza, não pressão) * - Destaque estático do plano recomendado * - Pausa visual entre seções (respiração) * - Microinterações de affordance (hover/focus) * * O que NÃO está aqui (e por quê): * - Pulses contínuos em CTAs principais (técnica de gambling) * - Aura animada no plano destacado (movimento periférico constante) * - Shine sweep contínuo no ribbon (atrai olhar sem motivo) * - Scarcity dot pulsando rápido (ansiedade visual) * - Fake counters / "X pessoas viram este plano" (mentira) */ @layer polish { /* ============================================================ * 1. HIERARQUIA DE CTAs — informacional, não emocional * ============================================================ * Princípio honesto: ajudar o usuário a entender qual é a ação * principal de cada momento. Sem pulse, sem movimento contínuo — * só peso visual diferenciado. * * - .btn--primary-hot = CTA principal (Hero, Resultados, Plano destacado, Contato) * - .btn--primary = CTA secundário (header, sobre) * - .btn--secondary = ação alternativa * * Lei de Fitts aplicada: alvos visualmente maiores são alcançados * mais rápido. Hierarquia ajuda usuários que JÁ querem agir. */ .btn--primary-hot { background: linear-gradient(180deg, var(--brand-hot) 0%, var(--brand) 100%); color: #fff; border-color: var(--brand-hot); box-shadow: var(--shadow-brand), var(--shadow-inset); font-weight: 700; letter-spacing: 0.02em; /* SEM animation — botão estático até ser interagido */ } .btn--primary-hot:hover, .btn--primary-hot:focus-visible { transform: translateY(-3px); box-shadow: 0 22px 60px -10px var(--brand-glow), 0 0 0 4px color-mix(in oklab, var(--brand-hot) 14%, transparent), var(--shadow-inset); background: linear-gradient(180deg, var(--brand-hot) 0%, var(--brand-hot) 100%); } /* Botão "secundário" — peso médio */ .btn--secondary { background: color-mix(in oklab, var(--brand) 12%, var(--bg-card)); color: var(--brand); border-color: color-mix(in oklab, var(--brand) 35%, transparent); font-weight: 600; } .btn--secondary:hover, .btn--secondary:focus-visible { background: color-mix(in oklab, var(--brand) 20%, var(--bg-card)); border-color: var(--brand); transform: translateY(-2px); } /* ============================================================ * 2. PLANO DESTACADO — destaque ESTÁTICO, não pulsante * ============================================================ * O ribbon "Mais escolhido" já comunica destaque. Reforçamos * com box-shadow brand sólida + border definida, mas SEM * animação contínua (que rouba atenção do julgamento). * * Princípio: ancoragem é legítima quando o destaque corresponde * a uma realidade (este plano de fato é o mais escolhido). */ .plano--featured { position: relative; /* Sombra forte estática — destaca sem pulsar */ box-shadow: var(--shadow-brand), 0 0 0 1px color-mix(in oklab, var(--brand) 25%, transparent); } /* Ribbon mantido estático — sem shine sweep contínuo */ /* ============================================================ * 3. PAUSA VISUAL ENTRE SEÇÕES — respiração de design * ============================================================ * Apenas espaço respirável + linha brand sutil. Sem dramaticidade. * É boa diagramação, não manipulação. */ .section-pause { background: linear-gradient( 180deg, transparent 0%, color-mix(in oklab, var(--bg-deep) 50%, transparent) 50%, transparent 100%); position: relative; block-size: clamp(2.5rem, 8vw, 5rem); } .section-pause::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline: 0; block-size: 1px; background: linear-gradient( 90deg, transparent 0%, color-mix(in oklab, var(--brand) 50%, transparent) 50%, transparent 100%); transform: translateY(-50%); opacity: 0.4; } /* ============================================================ * 4. SCARCITY-TAG — informação útil, não ansiogênica * ============================================================ * Princípio honesto: comunicar disponibilidade real ajuda o usuário * a decidir o momento certo. Diferente de criar urgência artificial. * * Mudanças vs versão anterior: * - Bolinha NÃO pulsa mais rápido que 2.5s (era 1.4s = ansiedade) * - Texto comunica fato, não ameaça * - O elemento existe APENAS se o conteúdo for verdadeiro * * Se Rafael não atualizar os meses mensalmente, o componente * deve ser REMOVIDO do HTML — não decorar com pulse. */ .scarcity-tag { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.875rem; background: color-mix(in oklab, var(--brand) 8%, transparent); border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; color: var(--brand); letter-spacing: 0.04em; text-transform: uppercase; } .scarcity-tag__dot { inline-size: 7px; block-size: 7px; background: var(--brand); border-radius: 50%; flex-shrink: 0; /* Pulse lento — informa "ativo" sem criar urgência */ animation: status-breathing 3.4s ease-in-out infinite; } @keyframes status-breathing { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .scarcity-tag strong { color: var(--fg); font-weight: 700; } /* ============================================================ * 5. ÍCONE WhatsApp — affordance, não atratração contínua * ============================================================ * Microinteração apenas no hover. Sem oscilação em estado de repouso. * Sinal de "isto é clicável" para usuários que já estão interagindo. */ .btn .icon { transition: transform var(--dur-base) var(--ease-spring); } .btn:hover .icon, .btn:focus-visible .icon { transform: rotate(-6deg) scale(1.08); } /* ============================================================ * 6. REMOVER: dot decorativo antes de "Personal presencial" * ============================================================ * Bolinha pulsando sem propósito informacional é decoração ansiogênica. * Substituímos pelo destaque já existente (ribbon + shadow). */ /* .plano--featured .plano__type::before — removido */ /* ============================================================ * REDUCED MOTION * ============================================================ */ @media (prefers-reduced-motion: reduce) { .scarcity-tag__dot { animation: none !important; opacity: 1 !important; } .btn:hover .icon, .btn:focus-visible .icon { transform: none !important; } } }