:root{
  --fnx-orange:#FF6D2D;   /* acento */
  --fnx-orange2:#ff752d;
  --fnx-brown:#b35220;    /* base elegante */
  --fnx-cream:#ffddcb;
  --fnx-peach:#ffba96;

  --fnx-text:#2b2b2b;
  --fnx-muted:#6b6b6b;
}

/* Texto padrão */
body { color: var(--fnx-text); }
.fnx-muted { color: var(--fnx-muted); }

/* ✅ TÍTULOS: marrom (menos “laranja cansativo”) */
/*.fnx-title { color: var(--fnx-brown); } */
.fnx-title { color: #7a3a18; }  /* marrom mais escuro e elegante */

/* Laranja só como acento */
.fnx-accent { color: var(--fnx-orange); }

/* Bordas */
.fnx-border { border: 1px solid var(--fnx-peach); }
.fnx-border-left { border-left: 6px solid var(--fnx-orange); }

/* ✅ Botão principal: laranja */
.btn-fnx {
  background: var(--fnx-orange);
  border-color: var(--fnx-orange);
  color: #fff !important;
}
.btn-fnx:hover{
  background: var(--fnx-orange2);
  border-color: var(--fnx-orange2);
}

/* ✅ Botão secundário: neutro (o “Ver planos” fica mais bonito assim) */
.btn-fnx-secondary{
  background: #f4f4f4;
  border-color: #dcdcdc;
  color: #444 !important;
}
.btn-fnx-secondary:hover{
  background: #eeeeee;
  border-color: #d0d0d0;
  color: #333 !important;
}

/* ✅ Painel base */
.panel-fnx{
  border-color: #f0c2ad;
}
.panel-fnx > .panel-heading{
  background: #fff;
  border-color: #f0c2ad;
  color: var(--fnx-brown);
  font-weight: 700;
}

/* ✅ Planos com variação sutil (sem carnaval) */
.fnx-plan-demo > .panel-heading{
  background: #fff6f1;            /* creme bem leve */
}
.fnx-plan-ess > .panel-heading{
  background: #fff;               /* neutro */
}
.fnx-plan-premium > .panel-heading{
  background: #f7f3f0;            /* “premium” discreto */
}

/* Links: laranja apenas em links */
a.fnx-link, .fnx-link a { color: var(--fnx-orange); }
a.fnx-link:hover, .fnx-link a:hover { color: var(--fnx-orange2); }


:root{
  --fnx-orange:#FF6D2D;   /* acento */
  --fnx-orange2:#ff752d;
  --fnx-brown:#b35220;    /* base elegante */
  --fnx-cream:#ffddcb;
  --fnx-peach:#ffba96;

  --fnx-text:#2b2b2b;
  --fnx-muted:#6b6b6b;
}

/* Texto padrão */
body { color: var(--fnx-text); }
.fnx-muted { color: var(--fnx-muted); }

/* ✅ TÍTULOS: marrom (menos “laranja cansativo”) */
/*.fnx-title { color: var(--fnx-brown); } */
.fnx-title { color: #7a3a18; }  /* marrom mais escuro e elegante */

/* Laranja só como acento */
.fnx-accent { color: var(--fnx-orange); }

/* Bordas */
.fnx-border { border: 1px solid var(--fnx-peach); }
.fnx-border-left { border-left: 6px solid var(--fnx-orange); }

/* ✅ Botão principal: laranja */
.btn-fnx {
  background: var(--fnx-orange);
  border-color: var(--fnx-orange);
  color: #fff !important;
}
.btn-fnx:hover{
  background: var(--fnx-orange2);
  border-color: var(--fnx-orange2);
}

/* ✅ Botão secundário: neutro (o “Ver planos” fica mais bonito assim) */
.btn-fnx-secondary{
  background: #f4f4f4;
  border-color: #dcdcdc;
  color: #444 !important;
}
.btn-fnx-secondary:hover{
  background: #eeeeee;
  border-color: #d0d0d0;
  color: #333 !important;
}

/* ✅ Painel base */
.panel-fnx{
  border-color: #f0c2ad;
}
.panel-fnx > .panel-heading{
  background: #fff;
  border-color: #f0c2ad;
  color: var(--fnx-brown);
  font-weight: 700;
}

/* ✅ Planos com variação sutil (sem carnaval) */
.fnx-plan-demo > .panel-heading{
  background: #fff6f1;            /* creme bem leve */
}
.fnx-plan-ess > .panel-heading{
  background: #fff;               /* neutro */
}
.fnx-plan-premium > .panel-heading{
  background: #f7f3f0;            /* “premium” discreto */
}

/* Links: laranja apenas em links */
a.fnx-link, .fnx-link a { color: var(--fnx-orange); }
a.fnx-link:hover, .fnx-link a:hover { color: var(--fnx-orange2); }

/* ===== Escala quente contínua para Planos ===== */

/* DEMO – mais claro (entrada, teste) */
.fnx-plan-demo > .panel-heading{
  background:#fff6ef;          /* creme quente */
  border-color:#ffd8bf;
  color:#7a4a2a;
}

/* ESSENCIAL – médio (uso real) */
.fnx-plan-ess > .panel-heading{
  background:#ffe4d3;          /* laranja suave */
  border-color:#ffbf9a;
  color:#8a3f10;
}

/* PREMIUM – mais escuro (valor máximo) */
.fnx-plan-premium > .panel-heading{
  background:#ffd0b5;          /* laranja mais fechado */
  border-color:#ff9f70;
  color:#6a2a0f;
}

/* Corpo dos cards mantém neutro */
.fnx-plan-demo,
.fnx-plan-ess,
.fnx-plan-premium{
  border-width:1px;
}