/* AI Solutions · Módulo: separadores (tabs) com a barra de luz. Precisa de /assets/js/tabs.js. */
.tabs { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--traco); margin-bottom: clamp(22px, 3.4vh, 34px); }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 15px 14px;
  background: none; border: 0; border-radius: 10px 10px 0 0; cursor: pointer;
  color: var(--texto-2); font: 600 1.02rem/1.2 var(--f-texto); transition: color .2s, background-color .2s;
}
.tab svg { width: 20px; height: 20px; flex: none; opacity: .75; }
.tab:hover { color: var(--luz); background: rgba(243, 240, 255, .03); }
.tab[aria-selected="true"] { color: var(--luz); }
.tab[aria-selected="true"] svg { opacity: 1; color: #cfc6ff; }
.tabs__luz {
  position: absolute; bottom: -1px; left: var(--x, 0); width: var(--w, 0); height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(107, 83, 249, .15), #E4DCFF 50%, rgba(107, 83, 249, .15));
  box-shadow: 0 0 12px 1px rgba(107, 83, 249, .75); transition: left .5s var(--ease-out), width .5s var(--ease-out);
}
.tabs__luz::after { content: ""; position: absolute; left: 50%; top: -2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(143, 125, 255, .95); }
@media (max-width: 720px) {
  .tabs { margin-left: calc(var(--margem) * -1); margin-right: calc(var(--margem) * -1); padding: 0 var(--margem); overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; padding: 11px 12px 13px 10px; font-size: .94rem; }
}