/* ============================================================
   NexoFlow — Seção de Módulos / Abas
   ============================================================ */

.tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:42px}
.tab{
  display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:12px 20px;font-family:var(--font-head),sans-serif;font-weight:600;
  font-size:15px;color:var(--ink-soft);cursor:pointer;transition:all .18s;box-shadow:var(--shadow-sm);
}
.tab .ti{width:22px;height:22px}
.tab[aria-selected="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.tab[aria-selected="true"] .ti{color:#fff}
.tab:not([aria-selected="true"]):hover{border-color:var(--blue-100);color:var(--blue)}
.tab:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.tab-panels{margin-top:34px}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ── Animação dos filhos ao activar o painel ───────────────────────────── */
.tab-panel.active .m-eyebrow{
  animation:tab-up .38s cubic-bezier(.2,.7,.3,1) both;
}
.tab-panel.active .module-card h3{
  animation:tab-up .44s .07s cubic-bezier(.2,.7,.3,1) both;
}
.tab-panel.active .m-desc{
  animation:tab-up .44s .14s cubic-bezier(.2,.7,.3,1) both;
}
.tab-panel.active .m-list li:nth-child(1){
  animation:tab-up .40s .21s cubic-bezier(.2,.7,.3,1) both;
}
.tab-panel.active .m-list li:nth-child(2){
  animation:tab-up .40s .29s cubic-bezier(.2,.7,.3,1) both;
}
.tab-panel.active .m-list li:nth-child(3){
  animation:tab-up .40s .37s cubic-bezier(.2,.7,.3,1) both;
}
.tab-panel.active .module-visual{
  animation:tab-slide-in .50s .10s cubic-bezier(.2,.7,.3,1) both;
}

/* ── Financeiro: mini-cards e barras ────────────────────────────────────── */
.tab-panel.active .mini-card:nth-child(1){
  animation:tab-up .40s .28s cubic-bezier(.3,1.1,.4,1) both;
}
.tab-panel.active .mini-card:nth-child(2){
  animation:tab-up .40s .38s cubic-bezier(.3,1.1,.4,1) both;
}
/* Valores monetários pulsam levemente depois que o card aparece */
.tab-panel.active .mc-val{
  animation:tab-val-pop .46s .54s cubic-bezier(.3,1.15,.4,1) both;
}
/* Barras crescem do fundo */
.module-visual .bars .bar{transform-origin:bottom}
.tab-panel.active .bars .bar:nth-child(1){animation:ha-bar-grow .40s .36s cubic-bezier(.2,.7,.3,1) both}
.tab-panel.active .bars .bar:nth-child(2){animation:ha-bar-grow .40s .42s cubic-bezier(.2,.7,.3,1) both}
.tab-panel.active .bars .bar:nth-child(3){animation:ha-bar-grow .40s .48s cubic-bezier(.2,.7,.3,1) both}
.tab-panel.active .bars .bar:nth-child(4){animation:ha-bar-grow .40s .54s cubic-bezier(.2,.7,.3,1) both}
.tab-panel.active .bars .bar:nth-child(5){animation:ha-bar-grow .40s .60s cubic-bezier(.2,.7,.3,1) both}
.tab-panel.active .bars .bar:nth-child(6){animation:ha-bar-grow .40s .66s cubic-bezier(.2,.7,.3,1) both}

/* ── Projetos: colunas Kanban + tasks internas ──────────────────────────── */
.tab-panel.active .kanban .col:nth-child(1){animation:tab-up .42s .28s cubic-bezier(.2,.7,.3,1) both}
.tab-panel.active .kanban .col:nth-child(2){animation:tab-up .42s .38s cubic-bezier(.2,.7,.3,1) both}
.tab-panel.active .kanban .col:nth-child(3){animation:tab-up .42s .48s cubic-bezier(.2,.7,.3,1) both}
/* tasks dentro de cada coluna */
.tab-panel.active .kanban .col .tk:nth-child(2){animation:tab-up .30s .54s cubic-bezier(.2,.7,.3,1) both}
.tab-panel.active .kanban .col .tk:nth-child(3){animation:tab-up .30s .62s cubic-bezier(.2,.7,.3,1) both}
.tab-panel.active .kanban .col .tk:nth-child(4){animation:tab-up .30s .70s cubic-bezier(.2,.7,.3,1) both}

/* ── CRM: linhas do funil deslizam da esquerda ──────────────────────────── */
.tab-panel.active .funnel .fr:nth-child(1){animation:tab-funnel-in .44s .28s cubic-bezier(.2,.7,.3,1) both}
.tab-panel.active .funnel .fr:nth-child(2){animation:tab-funnel-in .44s .38s cubic-bezier(.2,.7,.3,1) both}
.tab-panel.active .funnel .fr:nth-child(3){animation:tab-funnel-in .44s .48s cubic-bezier(.2,.7,.3,1) both}
.tab-panel.active .funnel .fr:nth-child(4){animation:tab-funnel-in .44s .58s cubic-bezier(.2,.7,.3,1) both}

.module-card{
  display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:46px;box-shadow:var(--shadow-md);
}
.module-card .m-eyebrow{
  color:var(--blue);font-weight:700;font-family:var(--font-head),sans-serif;
  text-transform:uppercase;letter-spacing:.08em;font-size:13px;
}
.module-card h3{font-size:30px;margin-top:12px}
.module-card .m-desc{color:var(--ink-soft);margin-top:14px;font-size:17px}
.m-list{display:flex;flex-direction:column;gap:12px;margin-top:22px;padding:0;list-style:none}
.m-list li{display:flex;gap:12px;align-items:flex-start;list-style:none;font-size:15.5px}
.m-list .ck{
  width:24px;height:24px;border-radius:7px;background:var(--green-50);color:var(--green-600);
  display:grid;place-items:center;flex:none;margin-top:1px;
}
.m-list .ck svg{width:14px;height:14px}
.module-visual{
  background:var(--blue-50);border:1px solid var(--blue-100);border-radius:16px;
  padding:22px;min-height:300px;display:flex;flex-direction:column;gap:12px;
}

/* Visuais miniatura dentro dos módulos */
.mini-row{display:flex;gap:10px}
.mini-card{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px;flex:1;box-shadow:var(--shadow-sm);
}
.mini-card .mc-lab{font-size:10.5px;color:var(--ink-faint);font-weight:600;text-transform:uppercase}
.mini-card .mc-val{font-family:var(--font-head),sans-serif;font-weight:800;font-size:19px;margin-top:5px}

.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1}
.kanban .col{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:10px;display:flex;flex-direction:column;gap:8px;
}
.kanban .col .ch{font-size:11px;font-weight:700;color:var(--ink-faint);text-transform:uppercase}
.kanban .tk{height:30px;border-radius:7px;background:var(--line-soft)}
.kanban .tk.b{background:var(--blue-50)}
.kanban .tk.g{background:var(--green-50)}
.kanban .tk.o{background:var(--orange-50)}

.funnel{display:flex;flex-direction:column;gap:8px;flex:1;justify-content:center}
.funnel .fr{
  height:34px;border-radius:8px;
  background:linear-gradient(90deg,var(--blue),var(--blue-500));
  display:flex;align-items:center;padding:0 14px;color:#fff;font-weight:600;font-size:13px;
}
.funnel .fr:nth-child(2){width:84%}
.funnel .fr:nth-child(3){width:64%}
.funnel .fr:nth-child(4){width:42%;background:linear-gradient(90deg,var(--green-600),var(--green))}