/* ==========================================================
   A PÁGINA DE VENDAS (#446) — nascida na cópia testeuidesign
   ==========================================================
   "Analise esse site e venha com algo parecido" (higgsfield.ai), e
   depois: "faça uma proposta visual, sem alterar todo site, apenas a
   página inicial de vendas".

   O que veio de lá, medido na página deles: fundo quase preto
   (#0f1113), cartões cinza-escuro (#1c1e21 e #23262a) com canto de 12 a
   20 px, títulos em caixa alta numa grotesca grossa e apertada (Space
   Grotesk 700, -4%), UMA cor de destaque nos botões cheios e nas
   palavras que importam, e botões com relevo — uma sombra interna
   escura embaixo, como uma tecla. A mídia vem primeiro.

   O que NÃO veio: a cor e a marca deles. O destaque aqui é o vermelho
   do Linealt (`--red`), e o "alt" do logo continua vermelho.

   Tudo preso a `#vitrine.vit--proposta`, a classe que o index.html já
   traz: nada fora da vitrine muda. A base da vitrine continua no clean.css,
   e estas regras só sobrescrevem o que mudou; o que era só da vitrine de
   antes saiu de lá no #484. */

/* SÓ O ESCURO (higgsfield-v4): "vou querer ficar apenas com a versão do tema
   escuro, pode tirar a opção de temas da página de vendas". A proposta é
   escura qualquer que seja o tema do site, e o botão de sol e lua some dela
   (continua no HTML, escondido). As cores moram aqui, em variáveis, e as
   regras embaixo só as usam. O destaque é o vermelho do Linealt.

   E OS PONTINHOS: com o fundo de bolinhas, a vitrine escura usava as
   bolinhas claras do tema claro do site (`--ponto`), fortes o bastante
   para cobrir o texto. A proposta tem as suas, quase sumidas. */
#vitrine.vit--proposta {
  --fundo: #0f1113;
  --vit-fundo: #0f1113;
  --ink: #f7f7f8;
  --suave: #9aa0a8;
  --borda: rgba(255, 255, 255, .08);
  --paper: #1a1c1f;
  --pp-cartao: #1a1c1f;
  --pp-cartao-2: #23262a;
  --pp-vidro: rgba(255, 255, 255, .05);
  --pp-vidro-forte: rgba(255, 255, 255, .1);
  --pp-numero: rgba(255, 255, 255, .1);
  --pp-malha-acesa: rgba(255, 255, 255, .11);
  --pp-sombra: 0 30px 80px rgba(0, 0, 0, .55);
  /* a malha e as bolinhas, quase sumidas no escuro: claras, brigavam com o texto */
  --linha: rgba(255, 255, 255, .03);
  --linha-forte: rgba(255, 255, 255, .055);
  --ponto: rgba(255, 255, 255, .09);
  --pp-acento: #ff0a2b;
  --pp-acento-txt: #fff;
  --pp-acento-claro: color-mix(in srgb, var(--pp-acento) 72%, #fff);
  --pp-vermelho-fundo: color-mix(in srgb, var(--pp-acento) 13%, transparent);
  --red: var(--pp-acento);
  background: var(--vit-fundo); color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
}
/* sem escolha de tema na proposta; e o "Criar conta" virou o "Entrar" */
#vitrine.vit--proposta #vit-tema,
#vitrine.vit--proposta #vit-criar { display: none; }

/* ---------- o topo: vidro escuro, menu com etiquetas ---------- */
#vitrine.vit--proposta .vit__topo {
  background: color-mix(in srgb, var(--vit-fundo) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--borda);
  padding-top: .8rem; padding-bottom: .8rem;
}
#vitrine .vit__menu { display: none; }
#vitrine.vit--proposta .vit__menu {
  display: flex; gap: .3rem; margin-right: auto; margin-left: 1.6rem;
}
#vitrine.vit--proposta .vit__menu a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem; border-radius: 8px;
  color: var(--suave); font-size: .9rem; font-weight: 500; text-decoration: none;
}
#vitrine.vit--proposta .vit__menu a:hover { color: var(--ink); background: var(--pp-vidro); }
#vitrine.vit--proposta .vit__menu a:first-child { color: var(--ink); }
/* no telefone o menu não cabe ao lado do logo e das ações: sai */
@media (max-width: 900px) { #vitrine.vit--proposta .vit__menu { display: none; } }
.vit__pilula {
  display: inline-block; padding: .12rem .42rem; border-radius: 6px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3;
  background: var(--red); color: var(--pp-acento-txt, #fff);
}
#vitrine.vit--proposta .vit__redondo {
  border-color: transparent; background: var(--pp-vidro); color: var(--ink);
  border-radius: 10px;
}

/* ---------- os botões com relevo ---------- */
#vitrine.vit--proposta .vit__cheio {
  background: var(--red); color: var(--pp-acento-txt); border: 0; border-radius: 12px;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .28), 0 8px 24px color-mix(in srgb, var(--pp-acento) 22%, transparent);
}
#vitrine.vit--proposta .vit__cheio:hover { filter: brightness(1.06); }
#vitrine.vit--proposta .vit__cheio:active { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .28); transform: translateY(1px); }
#vitrine.vit--proposta .vit__vazado {
  background: var(--pp-vermelho-fundo); color: var(--pp-acento-claro); border: 0; border-radius: 10px;
  font-weight: 600;
}
#vitrine.vit--proposta .vit__topo .vit__cheio { border-radius: 10px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28); }
@media (prefers-reduced-motion: reduce) {
  #vitrine.vit--proposta .vit__cheio:active { transform: none; }
}

/* ---------- títulos: caixa alta, grotesca apertada ---------- */
#vitrine.vit--proposta h1,
#vitrine.vit--proposta .vit__bloco > h2,
#vitrine.vit--proposta .vit__fim h2,
#vitrine.vit--proposta .vit__formatos h3 {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: -.04em;
}
#vitrine.vit--proposta .vit__bloco > h2 {
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1; text-align: left;
  max-width: 72rem; margin-left: auto; margin-right: auto;
}
#vitrine.vit--proposta .vit__bloco > .vit__linha,
#vitrine.vit--proposta .vit__bloco > .vit__linha--centro {
  text-align: left; color: var(--suave);
  max-width: 72rem; margin-left: auto; margin-right: auto;
}
/* o logo dentro dos títulos fica na fonte dele, em caixa baixa */
#vitrine.vit--proposta h2 .vit__marca,
#vitrine.vit--proposta h1 .vit__marca { text-transform: lowercase; letter-spacing: -.01em; }

/* ---------- a capa ---------- */
#vitrine.vit--proposta .vit__capa { padding-top: clamp(2rem, 5vw, 4rem); }
#vitrine .vit__selo-capa { display: none; }
#vitrine.vit--proposta .vit__selo-capa {
  display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.1rem;
  padding: .35rem .7rem .35rem .45rem; border-radius: 99px;
  background: var(--pp-vidro); color: var(--ink);
  font-size: .82rem; font-weight: 600;
}
#vitrine.vit--proposta h1 {
  font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: .92; margin-bottom: 1.2rem;
}
#vitrine.vit--proposta h1 em {
  font-style: normal; color: var(--red);
}
#vitrine.vit--proposta .vit__capa .vit__linha { color: var(--suave); font-size: 1.12rem; }

/* ---------- os cartões das seções: grade de ferramentas ---------- */
/* OS VÃOS ENTRE AS SEÇÕES (higgsfield-v4): "confere os espaçamentos em branco
   do site, para não ficar sobrando demais". Eram 4rem embaixo de uma e 4rem
   em cima da outra, 128 px de vão; agora uns 88 px. */
#vitrine.vit--proposta .vit__bloco { padding-top: 2.75rem; padding-bottom: 2.75rem; }
#vitrine.vit--proposta .vit__passos li,
#vitrine.vit--proposta .vit__formatos,
#vitrine.vit--proposta .vit__formatos-lista > div {
  background: var(--pp-cartao); border: 1px solid var(--borda); border-radius: 14px;
  box-shadow: none; color: var(--ink);
}
#vitrine.vit--proposta .vit__passos li:hover { background: var(--pp-cartao-2); }
#vitrine.vit--proposta .vit__passos li p,
#vitrine.vit--proposta .vit__formatos-lista p { color: var(--suave); }
#vitrine.vit--proposta .vit__passos li b,
#vitrine.vit--proposta .vit__formatos-lista b { color: var(--ink); }
#vitrine.vit--proposta .vit__icone {
  background: var(--pp-vermelho-fundo); color: var(--pp-acento-claro); border-radius: 10px;
}
/* sem o cartão em volta, o enchimento dele virava vão sobrando */
#vitrine.vit--proposta .vit__formatos { background: transparent; border: 0; padding: 0; margin-top: 2.5rem; }
/* os três formatos viram cartões soltos, com vão entre eles */
#vitrine.vit--proposta .vit__formatos-lista { gap: 1rem; }
#vitrine.vit--proposta .vit__formatos-lista > div,
#vitrine.vit--proposta .vit__formatos-lista > div + div { padding: 1.2rem 1.3rem; border: 1px solid var(--borda); }
#vitrine.vit--proposta .vit__formatos-nota { color: var(--suave); }
/* o número de cada gesto, que já existia, na grotesca e quase apagado */
#vitrine.vit--proposta .vit__passos li::before {
  content: '0' counter(passo);
  font: 700 1.8rem 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.04em;
  color: var(--pp-numero);
}
/* sem as faixas alternadas: no escuro, o vão entre as seções já separa */
#vitrine.vit--proposta { --paper: var(--pp-cartao); }
#vitrine.vit--proposta .vit__bloco:nth-of-type(even) { background: transparent; }

/* ---------- os planos no escuro ---------- */
#vitrine.vit--proposta .plano {
  background: var(--pp-cartao); border: 1px solid var(--borda); border-radius: 18px; color: var(--ink);
}
#vitrine.vit--proposta .plano li { color: var(--suave); }
#vitrine.vit--proposta .plano li.plano__mais { color: var(--ink); }
#vitrine.vit--proposta .plano__nome {
  font-family: 'Space Grotesk', system-ui, sans-serif; text-transform: uppercase; letter-spacing: -.03em; color: var(--ink);
}
#vitrine.vit--proposta .plano__preco,
#vitrine.vit--proposta .plano__aviso { color: var(--suave); }
#vitrine.vit--proposta .plano--plus .plano__destaque { background: var(--pp-vidro); }
#vitrine.vit--proposta .plano--plus .plano__destaque b { color: var(--ink); }
/* o Pro é o destaque: a borda e o brilho no vermelho */
#vitrine.vit--proposta .plano--premium {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pp-acento) 14%, transparent), var(--pp-cartao) 42%);
  border-color: color-mix(in srgb, var(--pp-acento) 55%, transparent);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--pp-acento) 12%, transparent);
}
#vitrine.vit--proposta .plano--premium .plano__destaque { background: var(--pp-vidro); }
#vitrine.vit--proposta .plano__breve {
  background: var(--pp-vidro); color: var(--suave); border: 0; border-radius: 10px;
}
#vitrine.vit--proposta .vit__alerta {
  background: var(--pp-cartao); border-color: color-mix(in srgb, var(--pp-acento) 40%, transparent); color: var(--ink);
}
#vitrine.vit--proposta .vit__alerta p { color: var(--suave); }

/* ---------- as perguntas ---------- */
#vitrine.vit--proposta .vit__perguntas details {
  background: var(--pp-cartao); border: 1px solid var(--borda); border-radius: 12px;
}
#vitrine.vit--proposta .vit__perguntas summary { color: var(--ink); }
#vitrine.vit--proposta .vit__perguntas p { color: var(--suave); }

/* ---------- o fim: o bloco de oferta ---------- */
#vitrine.vit--proposta .vit__fim {
  width: min(72rem, calc(100% - 2 * clamp(1rem, 5vw, 3.5rem)));
  margin: 1rem auto 2.5rem; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; box-sizing: border-box;
  border-radius: 24px; border: 1px solid var(--borda);
  /* o brilho vermelho anda: é o .vit__fim-luz (css/vitrine-v3.css) */
  background: var(--pp-cartao);
}
#vitrine.vit--proposta .vit__fim h2 { font-size: clamp(2.2rem, 5.2vw, 4.2rem); line-height: .95; }
#vitrine.vit--proposta .vit__fim-linha { color: var(--suave); }
#vitrine.vit--proposta .vit__rodape { border-top-color: var(--borda); color: var(--suave); }
#vitrine.vit--proposta .vit__rodape a { color: var(--suave); }

/* ---------- O FUNDO QUE SEGUE O MOUSE (higgsfield-v2) ----------
   "Adicione background responsivo com o mouse onde tem o fundo dos temas
   do site. E no final, na chamada: comece a criar conteúdos com..." A
   malha do tema — quadriculado ou bolinhas, a escolha da pessoa — ganha
   uma segunda camada, mais acesa e puxada para o vermelho, que só
   aparece num círculo em volta do ponteiro. O js/vitrine-banner.js
   escreve onde ele está (--mx, --my). Sem ponteiro em cima, ela some. */
#vitrine.vit--proposta .vit__capa::after,
#vitrine.vit--proposta .vit__fim::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  background-image:
    radial-gradient(circle 260px at var(--mx, 50%) var(--my, 40%), color-mix(in srgb, var(--pp-acento) 12%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--pp-acento-claro) 42%, transparent) 1px, transparent 0),
    linear-gradient(90deg, color-mix(in srgb, var(--pp-acento-claro) 42%, transparent) 1px, transparent 0),
    linear-gradient(var(--pp-malha-acesa) 1px, transparent 0),
    linear-gradient(90deg, var(--pp-malha-acesa) 1px, transparent 0);
  background-size: 100% 100%, 70px 70px, 70px 70px, 14px 14px, 14px 14px;
  -webkit-mask-image: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 40%), #000 0, transparent 75%);
          mask-image: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 40%), #000 0, transparent 75%);
}
body.fundo-pontos #vitrine.vit--proposta .vit__capa::after,
body.fundo-pontos #vitrine.vit--proposta .vit__fim::after {
  background-image:
    radial-gradient(circle 260px at var(--mx, 50%) var(--my, 40%), color-mix(in srgb, var(--pp-acento) 12%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--pp-acento-claro) 70%, transparent) 0 1.3px, transparent 1.8px);
  background-size: 100% 100%, 14px 14px;
}
#vitrine.vit--proposta .vit__capa:hover::after,
#vitrine.vit--proposta .vit__fim:hover::after { opacity: 1; }
/* o bloco do fim ganha a malha do tema por baixo, como a capa */
#vitrine.vit--proposta .vit__fim { position: relative; overflow: hidden; }
#vitrine.vit--proposta .vit__fim::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--linha-forte) 1px, transparent 0),
    linear-gradient(90deg, var(--linha-forte) 1px, transparent 0);
  background-size: 70px 70px;
}
body.fundo-pontos #vitrine.vit--proposta .vit__fim::before {
  background-image: radial-gradient(circle, var(--ponto) 0 1px, transparent 1.5px);
  background-size: 14px 14px;
}
#vitrine.vit--proposta .vit__fim > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  #vitrine.vit--proposta .vit__capa::after, #vitrine.vit--proposta .vit__fim::after { transition: none; }
}

/* o "alt" do logo é a marca: vermelho sempre */
#vitrine.vit--proposta .vit__marca em { color: #ff0a2b; }