/* ===========================================================================
   LUCREI — A RÉGUA DE PREÇO POR FAIXA DE VENDAS  (v135, 23/09/2026)
   ===========================================================================
   Pedido do dono do painel: "igual ao Mercado Turbo — 7 dias grátis, conecta a
   API, puxa as vendas e já fala o preço. Uma página de planos em que dá para ir
   arrastando: 19,90 · 29,90 · 39,90 · 49,90 · 89". E a equipe de agentes
   distribuída pelas faixas.

   O HTML é montado por site/v5-dados.js dentro de #plan-grid (que perde a
   classe .plan-grid e ganha .fx). Vale nas três páginas que têm #plan-grid:
   planos, landing e dashboard. Só cores do design system (lucrei-ds.css).
   Apagar este arquivo NÃO quebra a página: a régua continua funcionando, só
   sem desenho.
   =========================================================================== */
.fx{
  --fx-p:0%;
  background:var(--ds-atlantico);
  color:var(--ds-branco);
  border-radius:var(--ds-r-faixa,32px);
  padding:clamp(22px,3.4vw,40px);
  box-shadow:0 30px 80px rgba(var(--ds-atlantico-rgb),.22);
  display:grid;gap:26px;
  min-width:0;
}
.fx *{box-sizing:border-box}

/* --- topo ---------------------------------------------------------------- */
.fx-topo{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.fx-kicker{font-size:12px;letter-spacing:1.5px;font-weight:850;color:var(--ds-menta)}
.fx-titulo{font-size:clamp(26px,3vw,38px);line-height:1.08;letter-spacing:-.03em;margin:8px 0 8px;color:var(--ds-branco)}
.fx-sub{margin:0;color:var(--ds-linha-2);max-width:620px;font-size:16px}
.fx-gratis{display:flex;align-items:center;gap:12px;flex:none;
  background:var(--ds-atlantico-2);border:1px solid var(--ds-atlantico-3);
  border-radius:var(--ds-r-in,14px);padding:12px 16px}
.fx-gratis svg{width:22px;height:22px;color:var(--ds-menta)}
.fx-gratis b{display:block;font-size:17px}
.fx-gratis small{display:block;color:var(--ds-linha-2);font-size:13px}

/* --- o que a API mediu --------------------------------------------------- */
.fx-medido{display:flex;gap:10px;align-items:flex-start;
  background:rgba(var(--ds-menta-rgb),.12);border:1px solid rgba(var(--ds-menta-rgb),.4);
  border-radius:var(--ds-r-in,14px);padding:12px 16px;font-size:15px;color:var(--ds-menta-tenue)}
.fx-medido[hidden]{display:none}
.fx-medido svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--ds-menta)}
.fx-medido b{color:var(--ds-branco)}
.fx-medido a{color:var(--ds-menta);font-weight:750;text-decoration:underline}

/* --- a régua ------------------------------------------------------------- */
.fx-rotulo{display:block;font-size:14px;font-weight:700;color:var(--ds-linha-2);margin-bottom:46px}
.fx-trilho{position:relative;height:28px}
.fx-bolha{position:absolute;bottom:34px;left:clamp(56px,var(--fx-p),calc(100% - 56px));transform:translateX(-50%);
  background:var(--ds-menta);color:var(--ds-atlantico);font-weight:850;font-size:14px;
  padding:6px 12px;border-radius:999px;white-space:nowrap;pointer-events:none;
  box-shadow:0 8px 20px rgba(var(--ds-menta-rgb),.25)}
.fx-bolha::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;
  background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
/* nas pontas a bolha não pode vazar do cartão */
.fx input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;
  cursor:pointer;touch-action:pan-y;border:0;padding:0;box-shadow:none;border-radius:0;outline:0}
.fx input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:999px;
  background:linear-gradient(90deg,var(--ds-menta) 0 var(--fx-p),var(--ds-atlantico-3) var(--fx-p) 100%)}
.fx input[type=range]::-moz-range-track{height:10px;border-radius:999px;background:var(--ds-atlantico-3)}
.fx input[type=range]::-moz-range-progress{height:10px;border-radius:999px;background:var(--ds-menta)}
.fx input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:28px;height:28px;margin-top:-9px;border-radius:50%;background:var(--ds-branco);
  border:6px solid var(--ds-menta);box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .15s}
.fx input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ds-branco);
  border:6px solid var(--ds-menta);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.fx input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.fx input[type=range]:focus-visible{outline:none}
.fx input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(var(--ds-menta-rgb),.45)}
.fx input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px rgba(var(--ds-menta-rgb),.45)}
.fx-marcas{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;font-weight:700;color:var(--ds-linha-2);font-variant-numeric:tabular-nums}

/* --- as 5 faixas --------------------------------------------------------- */
.fx-faixas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.fx-faixa{font:inherit;text-align:left;cursor:pointer;color:var(--ds-branco);
  background:var(--ds-atlantico-2);border:1px solid var(--ds-atlantico-3);
  border-radius:var(--ds-r-in,14px);padding:14px;display:flex;flex-direction:column;gap:3px;
  transition:transform .18s,border-color .18s,background .18s;min-width:0}
.fx-faixa:hover{transform:translateY(-3px);border-color:var(--ds-atlantico-4)}
.fx-faixa:focus-visible{outline:3px solid var(--ds-menta);outline-offset:2px}
.fx-faixa small{font-size:11px;letter-spacing:1px;font-weight:850;color:var(--ds-linha-2)}
.fx-faixa strong{font-size:22px;letter-spacing:-.02em}
.fx-faixa span{font-size:13px;color:var(--ds-linha-2)}
.fx-faixa em{font-style:normal;font-size:12px;font-weight:750;color:var(--ds-menta);margin-top:4px}
.fx-faixa.on{background:var(--ds-menta);border-color:var(--ds-menta);color:var(--ds-atlantico);transform:translateY(-3px)}
.fx-faixa.on small,.fx-faixa.on span{color:var(--ds-atlantico)}
.fx-faixa.on em{color:var(--ds-verde-tinta)}

/* --- o resultado: preço + equipe ----------------------------------------- */
.fx-resultado{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px}
.fx-preco,.fx-equipe{background:var(--ds-atlantico-2);border:1px solid var(--ds-atlantico-3);
  border-radius:var(--ds-r-card,24px);padding:24px;min-width:0}
.fx-preco>small{font-size:12px;letter-spacing:1.2px;font-weight:850;color:var(--ds-menta)}
.fx-valor{display:flex;align-items:flex-end;gap:6px;line-height:1;margin:12px 0 6px}
.fx-valor span{font-size:18px;font-weight:800;margin-bottom:8px;color:var(--ds-linha-2)}
.fx-valor strong{font-size:clamp(52px,6vw,72px);letter-spacing:-.05em;color:var(--ds-menta)}
.fx-valor em{font-style:normal;font-size:16px;margin-bottom:9px;color:var(--ds-linha-2)}
.fx-preco>p{margin:0 0 14px;color:var(--ds-linha-2)}
.fx-preco ul{list-style:none;padding:0;margin:0 0 20px}
.fx-preco li{display:flex;gap:8px;margin:9px 0;font-size:15px;line-height:1.35}
.fx-preco li::before{content:"✓";color:var(--ds-menta);font-weight:900}
.fx-cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:var(--ds-menta);color:var(--ds-atlantico);font-weight:850;font-size:16px;
  padding:15px 18px;border-radius:13px;text-align:center;transition:transform .15s,background .15s}
.fx-cta:hover{background:var(--ds-menta-hover);transform:translateY(-2px)}
.fx-cta svg{width:18px;height:18px}
.fx-direto{display:block;text-align:center;margin-top:12px;font-size:14px;color:var(--ds-linha-2);text-decoration:underline}
.fx-direto:hover{color:var(--ds-branco)}

.fx-equipe-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.fx-equipe-top b{font-size:17px}
.fx-equipe-top span{font-size:13px;font-weight:800;color:var(--ds-menta)}
.fx-equipe ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fx-equipe li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;
  background:var(--ds-atlantico);border:1px solid var(--ds-atlantico-3);min-width:0;transition:opacity .2s}
.fx-equipe li div{min-width:0;flex:1}
.fx-equipe li b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-equipe li small{display:block;font-size:12px;color:var(--ds-linha-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-ic{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(var(--ds-menta-rgb),.16);color:var(--ds-menta)}
.fx-ic svg{width:17px;height:17px}
.fx-equipe li.fora{opacity:.55;border-style:dashed}
.fx-equipe li.fora .fx-ic{background:var(--ds-atlantico-2);color:var(--ds-linha-2)}
.fx-cad svg{width:15px;height:15px;color:var(--ds-linha-2)}

.fx-nota{margin:0;font-size:14px;color:var(--ds-linha-2);max-width:900px}

/* --- tablet / celular ---------------------------------------------------- */
@media (max-width:1000px){
  .fx-faixas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fx-resultado{grid-template-columns:1fr}
}
@media (max-width:720px){
  .fx{border-radius:24px;padding:20px 16px;gap:20px}
  .fx-topo{flex-direction:column}
  .fx-faixas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-faixas .fx-faixa:last-child{grid-column:1/-1}
  .fx-equipe ul{grid-template-columns:1fr}
  .fx-marcas{font-size:11px}
  .fx-preco,.fx-equipe{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  .fx-faixa,.fx-cta,.fx input[type=range]::-webkit-slider-thumb{transition:none}
}