/* ==========================================================================
   Correções aplicadas sobre o build — 04/08/2026

   ISTO É UM REMENDO, NÃO A CORREÇÃO DEFINITIVA. O código-fonte deste site
   está na máquina do colaborador; todo build novo apaga o que está aqui.
   O mesmo conteúdo precisa entrar no fonte para parar de voltar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. O botão "Entrar" sumia no celular

   A classe era `hidden ... sm:inline-flex`: escondido abaixo de 640px. Quem
   abre pelo celular — a maioria — não tinha como chegar no painel pelo topo.
   -------------------------------------------------------------------------- */
a[href="https://app.jefrei.com/login"].hidden {
  display: inline-flex !important;
}

/* --------------------------------------------------------------------------
   2. Planos — a mordaça saiu em 08/08/2026

   Havia aqui um bloco que escondia TODOS os cards e escrevia "Estamos
   contratando os seus mordomos / Em breve disponível" por cima. Foi posto em
   04/08 por um bom motivo: os cartões traziam R$ 197 / 297 / 397 e listavam
   coisas que o sistema não fazia (domínio com SSL, suporte 24/7). Anunciar
   preço e recurso que não se entrega é promessa que chega antes do produto.

   Agora os quatro planos são reais: estão na tabela `planos`, os limites
   barram de verdade no código, e `packages/db/src/planos.test.ts` compara card
   a card com o banco — se um lado mudar sozinho, o teste quebra.

   A LIÇÃO, que custou três relatos dele e três diagnósticos errados meus:
   um remendo que esconde alguma coisa precisa de data de validade escrita
   junto. Este ficou quatro dias invisível enquanto eu construía, editava o
   HTML e o pacote, e acrescentava regras NESTE MESMO ARQUIVO sem ler o topo.
   -------------------------------------------------------------------------- */

/* ===========================================================================
   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; }

/* ===========================================================================
   PLANOS — os dois defeitos da seção que vende
   ===========================================================================

   1. ELA SÓ APARECIA SE UMA ANIMAÇÃO RODASSE

   A página inteira chega com 36 blocos em `opacity: 0`, e cada um só aparece
   quando o Framer Motion detecta que 35% dele entrou na tela (`amount: 0.35`).
   É bonito, e para o resto do site está mantido.

   Aqui não. Esta é a única seção cujo trabalho é vender: se o JavaScript
   demorar, falhar, for bloqueado, ou o observador não disparar por qualquer
   motivo, o preço fica invisível e o visitante conclui que não tem plano.
   Conteúdo que depende de animação para existir é conteúdo que pode sumir.

   `!important` porque o `opacity: 0` vem inline no HTML, e inline ganha de
   folha de estilo. O efeito colateral é a seção não ter mais o fade — troca
   consciente: sempre visível vale mais que bonito às vezes.

   2. NO CELULAR A ORDEM DOS PREÇOS ESTAVA ERRADA

   As classes de ordenação são `lg:order-*`, que só valem no computador. No
   telefone vale a ordem do HTML, que é:

       R$ 297  →  R$ 997  →  R$ 597

   Ou seja: o plano mais caro no meio e o do meio por último. Quem rola no
   celular vê o preço subir, despencar, e não entende a régua.
   =========================================================================== */

/* --- 1. sempre visível ---------------------------------------------------- */

#planos [style*="opacity:0"],
#planos [style*="opacity: 0"] {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}


/* --------------------------------------------------------------------------
   A ORDEM DOS CARDS DE PLANO

   ---------------------------------------------------------------------------
   POR QUE NÃO DÁ PARA USAR AS CLASSES DO TAILWIND AQUI

   O Tailwind só põe no CSS as classes que o código-fonte USOU. O site foi
   construído com três planos e a ordem vinha de `e.highlight ? "lg:order-2" :
   "lg:order-3"` — então o CSS compilado tem `lg:order-2` e `lg:order-3`, e
   mais nada.

   Ao entrar o quarto plano eu escrevi `lg:order-1` e `lg:order-4` no HTML.
   Elas NÃO EXISTEM no CSS. E classe que não existe não dá erro: o card
   simplesmente fica com `order: 0` — e `order: 0` vem ANTES de 2 e de 3.

   O resultado na tela era Início · Operação · Começo · Escala. O preço subia,
   despencava e subia de novo. Nada no HTML parecia errado, e o `curl` mostrava
   a ordem certa, porque a ordem certa estava mesmo lá — no atributo que o
   navegador ignorava.

   ---------------------------------------------------------------------------
   ENTÃO A ORDEM MORA AQUI, E VALE EM QUALQUER LARGURA

   Pela posição no HTML, que é fixa:

       1  Início     R$ 197
       2  Começo     R$ 297   (o destacado)
       3  Operação   R$ 997   → vai para o fim
       4  Escala     R$ 597   → sobe para antes dele

   O preço só sobe, do primeiro ao último, no computador e no celular.
   -------------------------------------------------------------------------- */

#planos .grid.items-start > :nth-child(1) { order: 1; }
#planos .grid.items-start > :nth-child(2) { order: 2; }
#planos .grid.items-start > :nth-child(3) { order: 4; }  /* Operação, a última */
#planos .grid.items-start > :nth-child(4) { order: 3; }  /* Escala, antes dela */

/* --------------------------------------------------------------------------
   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; }
}