/*==============================================================
  FazNota — Camada de cor 2026 ("mais colorido")
  Carregado por ÚLTIMO (depois de styles.css e colors.css), entao
  sobrescreve com seguranca. Mantem o azul da marca como ancora e
  injeta um gradiente vibrante (azul -> violeta -> magenta) no hero,
  CTAs, badges e destaques, + uma paleta de acento para as paginas
  novas (integracoes, segmentos, API). Reverter = remover este arquivo.
==============================================================*/
:root {
  /* Reaproveita as variaveis ja usadas pelo site (hero/badge) para
     colorir TODOS os gradientes existentes de uma vez. */
  --hero1: #3697d9;            /* azul da marca (ancora)            */
  --hero2: #5b5ff0;            /* violeta (era azul escuro)         */
  --hero3: #8b5cf6;            /* magenta (era azul mais escuro)    */
  --badge1: #5b5ff01f;         /* fundo de badge violeta translucido */

  /* Paleta de acento FazNota 2026 */
  --fn-blue:   #3697d9;
  --fn-indigo: #4b63e6;
  --fn-violet: #5b5ff0;
  --fn-magenta:#8b5cf6;
  --fn-pink:   #a78bfa;
  --fn-teal:   #12b8a6;
  --fn-cyan:   #22b8e6;
  --fn-amber:  #f7a63b;
  --fn-green:  #22c07d;

  /* Gradientes de marca */
  --fn-grad:      linear-gradient(120deg, #3697d9 0%, #5b5ff0 52%, #8b5cf6 100%);
  --fn-grad-rev:  linear-gradient(120deg, #8b5cf6 0%, #5b5ff0 48%, #3697d9 100%);
  --fn-grad-soft: linear-gradient(120deg, #eef6fd 0%, #f3f0ff 50%, #f5f3ff 100%);
}

/*---------- Hero mais colorido ----------*/
.hero-section {
  background: var(--fn-grad-soft) !important;
}
.hero-text h1 span,
.fundo .hero-text h1 span {
  background: var(--fn-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/*---------- CTA primario com gradiente ----------*/
.btn-conheca,
.btn-conheca2 {
  background: var(--fn-grad) !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(91, 95, 240, .28) !important;
}
.btn-conheca:hover,
.btn-conheca2:hover {
  background: var(--fn-grad) !important;
  filter: brightness(1.07);
  transform: translateY(-2px);
}

/*---------- Badge colorido ----------*/
.badge-plan {
  background: var(--badge1);
  color: var(--fn-violet);
}

/*==============================================================
  UTILITARIOS para as paginas novas (integracoes / segmentos / API)
==============================================================*/
.fn-grad-bg   { background: var(--fn-grad) !important; color: #fff; }
.fn-grad-soft-bg { background: var(--fn-grad-soft) !important; }
.fn-grad-text {
  background: var(--fn-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Botao gradiente (alternativa colorida ao btn-conheca) */
.btn-grad {
  display: inline-block;
  background: var(--fn-grad);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  font-size: 1rem;
  transition: all .3s ease;
  box-shadow: 0 8px 20px rgba(91, 95, 240, .28);
}
.btn-grad:hover { color: #fff; filter: brightness(1.07); transform: translateY(-2px); }

/* Separador com gradiente (usar .separator.fn) */
.separator.fn,
.fn-separator {
  height: 3px !important;
  background: var(--fn-grad) !important;
  border-radius: 2px;
  width: 64px;
  margin: 14px auto 28px;
}
.fn-separator.left { margin-left: 0; }

/* Chips de categoria/acento coloridos */
.fn-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .85rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .8rem;
  line-height: 1;
}

/* Cores de acento (texto) */
.fn-t-blue{color:var(--fn-blue)!important} .fn-t-indigo{color:var(--fn-indigo)!important}
.fn-t-violet{color:var(--fn-violet)!important} .fn-t-magenta{color:var(--fn-magenta)!important}
.fn-t-pink{color:var(--fn-pink)!important} .fn-t-teal{color:var(--fn-teal)!important}
.fn-t-cyan{color:var(--fn-cyan)!important} .fn-t-amber{color:var(--fn-amber)!important}
.fn-t-green{color:var(--fn-green)!important}

/* Cores de acento (fundo suave + texto) — ideal p/ .fn-chip e icones */
.fn-b-blue{background:#3697d914;color:var(--fn-blue)}
.fn-b-indigo{background:#4b63e614;color:var(--fn-indigo)}
.fn-b-violet{background:#5b5ff014;color:var(--fn-violet)}
.fn-b-magenta{background:#8b5cf614;color:var(--fn-magenta)}
.fn-b-pink{background:#a78bfa1f;color:#8b5cf6}
.fn-b-teal{background:#12b8a614;color:var(--fn-teal)}
.fn-b-cyan{background:#22b8e614;color:#1596bf}
.fn-b-amber{background:#f7a63b1f;color:#d0801a}
.fn-b-green{background:#22c07d14;color:#159e63}

/* Card generico colorido (hover sobe) */
.fn-card {
  background:#fff;
  border:1px solid #eef0f5;
  border-radius:16px;
  padding:22px;
  height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fn-card:hover { transform:translateY(-6px); box-shadow:0 16px 34px rgba(80,60,160,.12); }

/* Icone redondo colorido para cards */
.fn-ico {
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:14px;
}

/* Faixa/section com leve tinta colorida */
.fn-tint { background: var(--fn-grad-soft); }

/*==============================================================
  MEGA-MENU do topo (navbar)
==============================================================*/
#navbar .nav-item.dropdown > .dropdown-toggle::after { vertical-align: .15em; }
#navbar .dropdown-menu.fn-mega {
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(30, 20, 80, .16);
  padding: 16px;
  margin-top: 10px;
}
.fn-mega .fn-mega-grid { display: grid; grid-template-columns: 1fr; gap: 2px 24px; }
.fn-mega .fn-col-title {
  font-size: .70rem; letter-spacing: .06em; text-transform: uppercase;
  color: #9aa1ad; font-weight: 700; margin: 10px 10px 4px;
}
.fn-mega a.fn-mega-link {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px; border-radius: 10px; color: #2d3748; text-decoration: none;
}
.fn-mega a.fn-mega-link:hover { background: #f5f3ff; }
.fn-mega a.fn-mega-link i { width: 22px; text-align: center; margin-top: 2px; font-size: 15px; }
.fn-mega a.fn-mega-link .t { font-weight: 600; font-size: .9rem; line-height: 1.15; }
.fn-mega a.fn-mega-link .d { font-size: .76rem; color: #8a93a2; line-height: 1.2; display: block; }
.fn-mega .fn-mega-foot { margin: 12px 10px 2px; padding-top: 12px; border-top: 1px solid #eef0f5; }
@media (min-width: 992px) {
  #navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; }
  .fn-mega { min-width: 300px; }
  .fn-mega.fn-mega-2 { min-width: 520px; }
  .fn-mega.fn-mega-2 .fn-mega-grid { grid-template-columns: 1fr 1fr; }
  .fn-mega.fn-mega-3 { min-width: 680px; }
  .fn-mega.fn-mega-3 .fn-mega-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* CTA do topo com gradiente */
.ulButtonsMenu .btn-primary {
  background: var(--fn-grad) !important;
  border: none !important;
}
.ulButtonsMenu .btn-primary:hover { filter: brightness(1.07); }

/* Menu mobile: a navbar e fixed; com um mega-menu aberto ela passava da
   altura da tela e os itens de baixo (Login, Testar gratis) ficavam
   inalcancaveis. Rolagem interna resolve. */
@media (max-width: 991.98px) {
  #navbar .navbar-collapse {
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #navbar .dropdown-menu.fn-mega { box-shadow: none; padding: 4px 0 8px; margin-top: 0; }
}

/* Desktop: o menu fechava ao descer o mouse — o margin-top criava um vao
   fora da area de :hover. Sem vao + "ponte" invisivel + atraso curto no
   fechamento (perdoa movimento em diagonal). */
@media (min-width: 992px) {
  #navbar .dropdown-menu.fn-mega {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    margin-top: 0;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .25s;
  }
  #navbar .nav-item.dropdown:hover > .dropdown-menu.fn-mega,
  #navbar .dropdown-menu.fn-mega.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }
  #navbar .dropdown-menu.fn-mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -20px;
    height: 20px;
  }
}

/*==============================================================
  TOPO ESTILO SPEDY: faixa de anuncio em gradiente + navbar escura
==============================================================*/
.fn-topbar {
  background: linear-gradient(90deg, #3697d9 0%, #5b5ff0 55%, #8b5cf6 100%);
  color: #fff;
  font-size: 14px;
  position: relative;
  z-index: 1001;
}
.fn-topbar-in {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; min-height: 40px; padding: 6px 15px;
}
.fn-topbar-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(255,255,255,.2); font-size: 11px;
}
.fn-topbar-txt strong { font-weight: 700; }
.fn-topbar-btn {
  background: #fff; color: #4f46e5 !important; font-weight: 700; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; border-radius: 6px;
  padding: 5px 12px; white-space: nowrap; text-decoration: none !important;
}
.fn-topbar-btn:hover { filter: brightness(.95); }
@media (max-width: 575.98px) {
  .fn-topbar { font-size: 12.5px; }
  .fn-topbar-in { gap: 8px; padding: 6px 10px; }
  .fn-topbar-ico { display: none; }
  .fn-topbar-btn { font-size: 12px; padding: 4px 9px; }
}

/* Navbar escura */
#navbar.fn-nav-dark {
  top: 40px;                       /* ajustado pelo JS da navbar */
  height: 68px;
  background: #121633 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) !important;
}
#navbar.fn-nav-dark .navbar { min-height: 68px; padding-top: 0; padding-bottom: 0; }
#navbar.fn-nav-dark .navbar-brand img { filter: brightness(0) invert(1); }
#navbar.fn-nav-dark .navbar-nav .nav-link {
  color: rgba(255,255,255,.72) !important;
  font-size: 14.5px; font-weight: 500;
  padding: .5rem .75rem !important;
  white-space: nowrap;
  display: inline-flex; align-items: center;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
#navbar.fn-nav-dark .navbar-nav .nav-link:hover,
#navbar.fn-nav-dark .nav-item.active > .nav-link,
#navbar.fn-nav-dark .nav-item.dropdown:hover > .nav-link,
#navbar.fn-nav-dark .nav-item.dropdown.show > .nav-link {
  color: #fff !important;
  background: rgba(255,255,255,.08);
}
/* seta fina ao lado do texto (substitui o caret do Bootstrap que quebrava linha) */
#navbar.fn-nav-dark .dropdown-toggle::after {
  border: 0; width: 7px; height: 7px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); margin: -4px 0 0 9px; vertical-align: 0;
  transition: transform .2s ease, margin .2s ease;
}
#navbar.fn-nav-dark .nav-item.dropdown:hover > .dropdown-toggle::after,
#navbar.fn-nav-dark .nav-item.dropdown.show > .dropdown-toggle::after {
  transform: rotate(-135deg); margin-top: 3px;
}

/* Botoes Entrar / Testar gratis */
.fn-nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 12px; }
.fn-nav-login {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.85) !important; border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px; padding: 8px 16px; font-size: 14px; font-weight: 500;
  white-space: nowrap; text-decoration: none !important;
  transition: border-color .15s ease, color .15s ease;
}
.fn-nav-login:hover { color: #fff !important; border-color: rgba(255,255,255,.4); }
.fn-nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #1b1625 !important;
  border-radius: 10px; padding: 9px 18px; font-size: 14px; font-weight: 700;
  white-space: nowrap; text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fn-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(139,92,246,.35); }

/* Paineis dos mega-menus escuros */
#navbar.fn-nav-dark .dropdown-menu.fn-mega {
  background: #121633;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.fn-nav-dark .fn-mega a.fn-mega-link { color: #fff; }
.fn-nav-dark .fn-mega a.fn-mega-link:hover { background: rgba(255,255,255,.06); }
.fn-nav-dark .fn-mega a.fn-mega-link i { color: #a5b4fc; }
.fn-nav-dark .fn-mega a.fn-mega-link .t { color: #fff; }
.fn-nav-dark .fn-mega a.fn-mega-link .d { color: rgba(255,255,255,.5); }
.fn-nav-dark .fn-mega .fn-col-title { color: rgba(255,255,255,.4); }
.fn-nav-dark .fn-mega .fn-mega-foot { border-top-color: rgba(255,255,255,.08); }
.fn-nav-dark .fn-mega .fn-mega-foot > a { color: #c7d2fe; font-weight: 600; text-decoration: none; }
.fn-nav-dark .fn-mega .fn-mega-foot > a:hover { color: #fff; }
.fn-mega-more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.fn-mega-more .fn-more-lbl {
  width: 100%; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.4); font-weight: 700;
}
.fn-nav-dark .fn-mega .fn-mega-more a { color: rgba(255,255,255,.75); font-size: 13px; font-weight: 500; }
.fn-nav-dark .fn-mega .fn-mega-more a:hover { color: #fff; }
@media (min-width: 992px) {
  .fn-mega.fn-mega-seg { min-width: 340px; }
}

/* Mobile: menu escuro empilhado */
@media (max-width: 991.98px) {
  #navbar.fn-nav-dark { height: auto; }
  #navbar.fn-nav-dark .navbar { min-height: 60px; }
  #navbar.fn-nav-dark .navbar-toggler { border-color: rgba(255,255,255,.2); }
  #navbar .navbar-collapse { max-height: calc(100vh - 110px); }
  #navbar.fn-nav-dark .navbar-nav .nav-link { display: flex; justify-content: space-between; padding: .7rem .5rem !important; }
  #navbar.fn-nav-dark .dropdown-menu.fn-mega { background: transparent; border: none; }
  .fn-nav-actions { margin: 10px 0 16px; flex-direction: column; align-items: stretch; }
  .fn-nav-login, .fn-nav-cta { justify-content: center; }
}

/* Texto da faixa: desktop x celular (classes proprias; o .d-none do site
   anulava o d-md-inline do Bootstrap) */
.fn-desk-inline { display: inline; }
.fn-mob-inline { display: none; }
@media (max-width: 767.98px) {
  .fn-desk-inline { display: none; }
  .fn-mob-inline { display: inline; }
}

/* Topo "encaixado" em qualquer largura de desktop */
@media (min-width: 1280px) {
  #navbar.fn-nav-dark > .container { max-width: 1260px; }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
  #navbar.fn-nav-dark .fn-hide-compact { display: none !important; }
  #navbar.fn-nav-dark .navbar-nav .nav-link { padding: .5rem .55rem !important; font-size: 14px; }
  #navbar.fn-nav-dark .navbar-brand img { width: 118px; }
  .fn-nav-actions { margin-left: 6px; gap: 8px; }
  .fn-nav-login { padding: 8px 12px; }
  .fn-nav-cta { padding: 9px 14px; }
}

/* Prints reais do sistema (telas/*): moldura moderna em gradiente, sem
   trocar o conteudo do print (continua mostrando a tela verdadeira). */
img.fn-shot {
  border: 6px solid transparent !important;
  border-radius: 16px !important;
  padding: 0 !important;
  background: linear-gradient(#fff, #fff) padding-box, var(--fn-grad) border-box !important;
  box-shadow: 0 18px 44px rgba(80, 60, 160, .18) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
img.fn-shot:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(80, 60, 160, .24) !important; }

/*==============================================================
  PADRAO MODERNO PARA COMPONENTES ANTIGOS (vale para o site todo)
  Referencia visual: gestao-de-contas.php (fn-card + fn-ico)
==============================================================*/

/* ---- .box-feature -> cartao moderno (icone em bloco colorido no topo) ---- */
.box-feature {
  background: #fff !important;
  border: 1px solid #eef0f5 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: 100%;
  padding: 24px !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.box-feature:hover { transform: translateY(-6px) !important; box-shadow: 0 16px 34px rgba(80, 60, 160, .12) !important; }
.box-feature .box-body { flex-direction: column; align-items: flex-start; padding: 0 !important; }
.box-feature .box-body > i,
.box-feature .box-body > .fa,
.box-feature .box-body > .fas {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex !important; align-items: center; justify-content: center;
  font-size: 22px !important; margin: 0 0 16px 0 !important; flex: none;
  color: var(--fn-violet) !important; background: #5b5ff014;
}
.box-feature .box-body > div { margin-left: 0 !important; }
.box-feature h3, .box-feature h4 { font-size: 1.08rem !important; font-weight: 700; color: #1b1625; margin-bottom: 8px; line-height: 1.3; }
.box-feature p { color: #6c7383; line-height: 1.6; margin-bottom: 0; }
.box-feature a { color: var(--fn-violet); font-weight: 600; }
/* cores de acento alternadas por coluna (como nos cartoes do padrao novo) */
.row > [class*="col"]:nth-child(6n+1) .box-feature .box-body > i { color: var(--fn-violet) !important; background: #5b5ff014; }
.row > [class*="col"]:nth-child(6n+2) .box-feature .box-body > i { color: var(--fn-blue) !important;   background: #3697d914; }
.row > [class*="col"]:nth-child(6n+3) .box-feature .box-body > i { color: var(--fn-magenta) !important; background: #8b5cf614; }
.row > [class*="col"]:nth-child(6n+4) .box-feature .box-body > i { color: var(--fn-teal) !important;   background: #12b8a614; }
.row > [class*="col"]:nth-child(6n+5) .box-feature .box-body > i { color: #1596bf !important;          background: #22b8e614; }
.row > [class*="col"]:nth-child(6n+6) .box-feature .box-body > i { color: #159e63 !important;          background: #22c07d14; }

/* Avatares de iniciais (substituem fotos aleatorias de banco de rostos) */
.avatar.fn-av {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.avatar.fn-av::after { display: none; }
.fn-av-violet { background: linear-gradient(135deg, #5b5ff0, #a77bff); }
.fn-av-blue { background: linear-gradient(135deg, #3697d9, #6cc0f5); }
.fn-av-magenta { background: linear-gradient(135deg, #8b5cf6, #c4b5fd); }
.fn-av-teal { background: linear-gradient(135deg, #12b8a6, #5fe0cf); }
.fn-av-amber { background: linear-gradient(135deg, #f7a63b, #ffc97a); }
.fn-av-cyan { background: linear-gradient(135deg, #1596bf, #4fd0f2); }
.fn-av-pink { background: linear-gradient(135deg, #a78bfa, #ddd6fe); }
.fn-av-green { background: linear-gradient(135deg, #159e63, #4fd89a); }

/* ---- Botoes antigos -> padrao novo ---- */
.btn-blue, .btn-blue:focus {
  background: var(--fn-grad) !important; color: #fff !important; border: none !important;
  border-radius: 50px !important; box-shadow: 0 8px 20px rgba(91, 95, 240, .28);
  transition: transform .15s ease, filter .15s ease;
}
.btn-blue:hover { background: var(--fn-grad) !important; filter: brightness(1.07); transform: translateY(-2px); color: #fff !important; }
.btn-outline-primary {
  color: var(--fn-violet) !important; border: 1px solid #5b5ff055 !important;
  border-radius: 10px !important; background: #fff; font-weight: 600;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: #5b5ff014 !important; border-color: var(--fn-violet) !important; color: var(--fn-violet) !important;
}
.btn-primary:not(.fn-nav-cta), .btn-success {
  background: var(--fn-grad) !important; border: none !important; color: #fff !important;
}

/* ---- Selos do topo ("✓ ...") viram chips ---- */
.hero-badges span {
  display: inline-block; color: #4338ca !important; background: #5b5ff014;
  border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: 13px; margin: 0 6px 8px 0;
}

/* ---- Fundos azul-claros inline -> tinta suave da marca ---- */
section[style*="#f7fbfe"] { background: var(--fn-grad-soft) !important; }

/* ---- Separador cinza sob os titulos -> barrinha em gradiente ---- */
section h2 ~ .separator {
  height: 3px !important; width: 64px !important; background: var(--fn-grad) !important;
  border-radius: 2px; margin: 14px auto 34px !important;
}
section h2 ~ .separator-2 {
  height: 3px !important; width: 56px !important; background: var(--fn-grad) !important;
  border-radius: 2px; margin: 12px 0 20px !important;
}
section h2 ~ .separator::after, section h2 ~ .separator-2::after { display: none !important; }

/* ---- FAQ antigo (accordion-custom) -> cartoes como no padrao novo ---- */
.accordion-custom .card {
  background: #fff !important; border: 1px solid #eef0f5 !important;
  border-radius: 14px !important; margin-bottom: 12px; overflow: hidden;
}
.accordion-custom .card-header { background: #fff !important; border: none !important; padding: 0 !important; }
.accordion-custom .card-header h5 { margin: 0; }
.accordion-custom .btn {
  padding: 18px 52px 18px 22px !important; font-size: 1rem !important; font-weight: 600 !important;
  color: #1b1625 !important; white-space: normal; line-height: 1.4;
}
.accordion-custom .btn.collapsed { color: #2d3748 !important; }
.accordion-custom .btn:hover { color: var(--fn-violet) !important; }
.accordion-custom .btn:after {
  font-family: "Font Awesome 6 Free", "FontAwesome" !important; font-weight: 900;
  right: 22px !important; top: 50%; margin-top: -.6em; color: var(--fn-violet);
}
.accordion-custom .card-body { padding: 0 22px 20px !important; font-size: .98rem !important; line-height: 1.6 !important; color: #6c7383 !important; }

/* ---- Cartoes "para quem e" / "combina com" / "antes x com" ---- */
body .use-card { border: 1px solid #eef0f5 !important; border-radius: 16px !important; }
body .use-card:hover { box-shadow: 0 16px 34px rgba(80, 60, 160, .12); }
body .use-card > i {
  width: 56px; height: 56px; border-radius: 16px; display: inline-flex !important;
  align-items: center; justify-content: center; font-size: 24px !important;
  color: var(--fn-violet) !important; background: #5b5ff014; margin-bottom: 14px !important;
}
.row > [class*="col"]:nth-child(3n+2) .use-card > i { color: var(--fn-blue) !important; background: #3697d914; }
.row > [class*="col"]:nth-child(3n+3) .use-card > i { color: var(--fn-magenta) !important; background: #8b5cf614; }
body .combina-card { border: 1px solid #eef0f5 !important; border-radius: 14px !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
body a:hover .combina-card { transform: translateY(-4px); border-color: #5b5ff055 !important; box-shadow: 0 14px 30px rgba(80, 60, 160, .12); }
body .combina-card > i {
  width: 48px; height: 48px; border-radius: 14px; display: inline-flex !important;
  align-items: center; justify-content: center; font-size: 20px !important;
  color: var(--fn-magenta) !important; background: #8b5cf614;
}
body .compara-card { border-radius: 20px !important; }
body .compara-com {
  border: 2px solid transparent !important;
  background: linear-gradient(#f4fbf7, #f4fbf7) padding-box, var(--fn-grad) border-box !important;
}

/* Home: lista "Confira todas as Funcionalidades" como chips claros
   (14 botoes cheios de gradiente ficavam pesados) */
.funcionalidades-section .btn-conheca2 {
  background: #fff !important; color: #3f37c9 !important;
  border: 1px solid #5b5ff040 !important; box-shadow: 0 2px 8px rgba(80, 60, 160, .06) !important;
  font-weight: 600; font-size: .92rem !important; padding: 9px 18px !important;
}
.funcionalidades-section .btn-conheca2:hover {
  background: var(--fn-grad) !important; color: #fff !important; border-color: transparent !important;
  filter: none; transform: translateY(-2px);
}

/* Destaques de titulo que ainda usavam o azul fixo */
.titulo-clientes span {
  background: var(--fn-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}

/* Recursos: lista de funcionalidades (.fun-card) no padrao de cartao */
.fun-card {
  background: #fff; border: 1px solid #eef0f5 !important; border-radius: 16px !important;
  box-shadow: none !important; height: 100%; text-align: left !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fun-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(80, 60, 160, .12) !important; }
.fun-card > i {
  width: 56px; height: 56px; border-radius: 16px; display: inline-flex !important;
  align-items: center; justify-content: center; font-size: 24px !important;
  color: var(--fn-violet) !important; background: #5b5ff014; margin-bottom: 16px !important;
}
.row > [class*="col"]:nth-child(6n+2) .fun-card > i { color: var(--fn-blue) !important; background: #3697d914; }
.row > [class*="col"]:nth-child(6n+3) .fun-card > i { color: var(--fn-magenta) !important; background: #8b5cf614; }
.row > [class*="col"]:nth-child(6n+4) .fun-card > i { color: var(--fn-teal) !important; background: #12b8a614; }
.row > [class*="col"]:nth-child(6n+5) .fun-card > i { color: #1596bf !important; background: #22b8e614; }
.row > [class*="col"]:nth-child(6n+6) .fun-card > i { color: #159e63 !important; background: #22c07d14; }
.fun-card h4 { font-size: 1.08rem; color: #1b1625; }
.fun-card p { color: #6c7383; line-height: 1.6; }
.fun-card a { color: var(--fn-violet); font-weight: 600; }

/* Chamada final em painel de gradiente (recursos e outras) */
.rec-cta { border-radius: 28px; padding: 44px; }
.rec-cta h2 { color: #fff; font-weight: 700; margin-bottom: 6px; }
.rec-cta p { color: rgba(255, 255, 255, .9); }
.rec-cta-btn {
  background: #fff !important; color: #1b1625 !important; font-weight: 700; border-radius: 12px !important;
  padding: 14px 26px !important; border: none !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.rec-cta-btn:hover { transform: translateY(-2px); }
@media (max-width: 767px) { .rec-cta { padding: 30px 22px; } }

/* Celular: chips longos da home ("Emissao de Notas Fiscais (NF-e, NFS-e, NFC-e)")
   passavam da largura da tela em 320px e eram cortados nas bordas. */
.funcionalidades-section .btn-conheca2 { white-space: normal !important; max-width: 100%; line-height: 1.35; }

/* Celular: numeros grandes da faixa de prova social da home (2 colunas)
   nao cabiam ("+2.000" era cortado pelo gradiente do texto). */
@media (max-width: 575.98px) {
  .fn-card .fn-grad-text[style*="2.4rem"] { font-size: 1.65rem !important; white-space: nowrap; }
}

/* Celulares bem pequenos (320-399px) */
@media (max-width: 359.98px) {
  .fn-prova-social .row > [class*="col-6"] { flex: 0 0 100%; max-width: 100%; }
  .fn-prova-social .fn-grad-text[style*="2.4rem"] { font-size: 2rem !important; }
}
@media (max-width: 399.98px) {
  /* palavras longas ("funcionalidades", "WooCommerce") quebram so quando nao cabem */
  h1, h2, h3, h4, h5, p, li, .fn-card, .fn-card * { overflow-wrap: anywhere; }
  .fn-grad-text[style*="2.4rem"] { overflow-wrap: normal; }
}
@media (max-width: 575.98px) {
  .rec-cta h2 { font-size: 1.45rem; }
}

/* Menu Segmentos em 2 colunas (Negocios digitais | Comercio, servicos e agro) */
@media (min-width: 992px) {
  .fn-mega.fn-mega-seg2 { min-width: 640px; }
  .fn-mega.fn-mega-seg2 .fn-mega-grid { grid-template-columns: 1fr 1fr; }
}