/* ========================================================================== ESTILO DOS TRÊS WIDGETS QUE VIVEM FORA DO REACT ========================================================================== Aviso de cookies, faixa do consultor e botão de falar com a gente. Eles nascem pendurados no , como irmãos da raiz do React, e por isso o estilo deles não pode morar no CSS do Tailwind: o Tailwind só gera classe que aparece no JSX, e nada disso aparece. Veio do correcoes.v3.css que rodava solto no servidor. Três blocos daquele arquivo NÃO foram trazidos, porque corrigiam defeitos que o fonte já não tem: - forçar o link "Entrar" a aparecer, que agora é controlado pelo Header; - forçar os cartões de plano a ficarem visíveis, que era remendo para as animações que só rodavam com JavaScript, hoje refeitas em CSS; - reordenar os cartões de plano com order, porque a ordem agora nasce certa no componente. Trazer essa regra embaralharia os planos de novo. ========================================================================== */ /* =========================================================================== AVISO DE COOKIES Criado por `cookies.js`, fora da arvore do React — por isso mora aqui, num arquivo de correcoes, e nao no CSS do Next. Barra no rodape, e nao modal com fundo escuro: nada aqui exige decisao antes de ver o site. Um modal bloqueante para dizer "nao gravamos nada" seria desproporcional, e treina a pessoa a clicar em qualquer coisa para passar. =========================================================================== */ #jefrei-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; max-width: 940px; margin: 0 auto; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(10, 16, 32, 0.97); /* Sem o blur o texto do site atravessa em telas claras. */ backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); color: #CBD5E1; font-size: 13.5px; line-height: 1.55; opacity: 0; transform: translateY(12px); transition: opacity 0.22s ease, transform 0.22s ease; } #jefrei-cookies.jc-visivel { opacity: 1; transform: translateY(0); } #jefrei-cookies.jc-saindo { opacity: 0; transform: translateY(12px); } @media (prefers-reduced-motion: reduce) { #jefrei-cookies { transition: none; } } #jefrei-cookies .jc-texto { flex: 1; min-width: 260px; } #jefrei-cookies strong { color: #F8FAFC; font-weight: 600; } #jefrei-cookies a { color: #A855F7; text-decoration: underline; text-underline-offset: 2px; } #jefrei-cookies .jc-botoes { display: flex; gap: 10px; flex: none; } #jefrei-cookies button { padding: 9px 18px; border-radius: 10px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; transition: filter 0.15s ease, border-color 0.15s ease; } /* Os dois botoes com o MESMO peso visual, de proposito. Um "aceitar" grande e colorido ao lado de um "recusar" apagado e escolha induzida — e a LGPD pede que recusar seja tao facil quanto aceitar. */ #jefrei-cookies .jc-nao { border: 1px solid rgba(148, 163, 184, 0.35); background: transparent; color: #CBD5E1; } #jefrei-cookies .jc-nao:hover { border-color: rgba(148, 163, 184, 0.6); color: #F8FAFC; } #jefrei-cookies .jc-sim { border: 1px solid transparent; background: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%); color: #fff; } #jefrei-cookies .jc-sim:hover { filter: brightness(1.1); } #jefrei-cookies button:focus-visible { outline: 2px solid #A855F7; outline-offset: 2px; } /* No celular o texto ocupa a largura toda e os botoes dividem a linha de baixo — em 360px eles nao cabem ao lado do texto sem virar dois toques minusculos. */ @media (max-width: 640px) { #jefrei-cookies { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; font-size: 13px; } #jefrei-cookies .jc-botoes { width: 100%; } #jefrei-cookies button { flex: 1; padding: 11px 12px; } } /* O botão de rever a escolha, no fim da página de privacidade. Criado por `cookies.js` — escrito no HTML, a hidratação do React o apagaria. */ #jc-rever { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 32px 0 8px; padding-top: 20px; border-top: 1px solid rgba(148, 163, 184, 0.16); font-size: 13px; } #jc-rever button { padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.35); background: transparent; color: inherit; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; } #jc-rever button:hover { border-color: #A855F7; color: #A855F7; } #jc-rever button:focus-visible { outline: 2px solid #A855F7; outline-offset: 2px; } #jc-rever .jc-rever-estado { opacity: 0.7; } /* -------------------------------------------------------------------------- 5. Falar com a gente — 09/08/2026 A página tinha "Fale conosco" em dois lugares, os dois `mailto:`. E `mailto:` NÃO ABRE NADA em quem não tem programa de e-mail configurado — a maioria no celular. O link era clicado e não acontecia nada, sem erro e sem métrica. Quem quer tirar dúvida ANTES de comprar é justamente quem não insiste: clicou, não abriu, foi embora. O botão é pendurado em `document.body` por `suporte.v1.js`, FORA da raiz do React — senão o redesenho da página o apagaria, como já apagou os links de checkout uma vez. -------------------------------------------------------------------------- */ #jefrei-suporte { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px 13px 16px; border-radius: 999px; background: #25D366; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1; box-shadow: 0 8px 30px rgba(37, 211, 102, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; } #jefrei-suporte:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(37, 211, 102, 0.45), 0 2px 10px rgba(0, 0, 0, 0.35); } #jefrei-suporte svg { flex: none; } /* No celular fica só o ícone: a barra de baixo do navegador já disputa espaço, e um botão largo cobre o conteúdo justamente em quem tem menos tela. */ @media (max-width: 640px) { #jefrei-suporte { right: 16px; bottom: 16px; padding: 15px; } #jefrei-suporte span { display: none; } } /* Quem prefere menos movimento não recebe o empurrãozinho do hover. */ @media (prefers-reduced-motion: reduce) { #jefrei-suporte { transition: none; } #jefrei-suporte:hover { transform: none; } }