.tool-label-navigator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: block;
  width: 100%;
  height: 36px;
  transform: translateY(calc(-50% + var(--tool-label-vertical-offset, 0px)));
  pointer-events: none;
}

.tool-label-button {
  position: absolute;
  top: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translateX(-50%);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.tool-label-button:nth-child(1) { left: 18.166667%; }
.tool-label-button:nth-child(2) { left: 53%; }
.tool-label-button:nth-child(3) { left: 84.833333%; }

.tool-label-pill {
  position: relative;
  width: max-content;
  min-width: 0;
  max-width: none;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--tool-label-padding-y, 9px) var(--tool-label-padding-x, 20px);
  border-radius: 999px;
  color: var(--tool-label-inactive-text, #d4d4d8);
  background: rgba(
    var(--tool-label-inactive-bg-rgb, 24, 24, 27),
    var(--tool-label-inactive-bg-opacity, .82)
  );
  box-shadow:
    inset 0 0 0 var(--tool-label-border-width, 1px)
    rgba(
      var(--tool-label-inactive-border-rgb, 63, 63, 70),
      var(--tool-label-inactive-border-opacity, 1)
    );
  backdrop-filter: blur(10px);
  transition: background-color .16s ease, box-shadow .16s ease;
}

.tool-label-button.active .tool-label-text {
  color: var(--tool-label-active-text, #ffffff);
}

.tool-label-button.active .tool-label-pill {
  background: rgba(
    var(--tool-label-active-bg-rgb, 48, 48, 52),
    var(--tool-label-active-bg-opacity, .96)
  );
  box-shadow:
    inset 0 0 0 var(--tool-label-border-width, 1px)
    rgba(
      var(--tool-label-active-border-rgb, 255, 255, 255),
      var(--tool-label-active-border-opacity, 1)
    );
}

.tool-label-text {
  display: block;
  width: max-content;
  max-width: none;
  overflow: visible;
  color: var(--tool-label-inactive-text, #d4d4d8);
  font-size: var(--tool-label-size, 12px) !important;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-align: center;
  text-overflow: clip;
  text-shadow:
    0 2px var(--tool-label-shadow-blur, 8px)
    rgba(var(--tool-label-shadow-rgb, 0,0,0), var(--tool-label-shadow-intensity, .72));
  text-transform: uppercase;
  white-space: nowrap;
}

.tool-label-button:focus-visible .tool-label-pill {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.tool-navigator {
  --banner-height: 140px;
  position: relative !important;
  z-index: 2;
  isolation: isolate !important;
  display: block !important;
  width: 100% !important;
  height: var(--banner-height) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 23px 23px 0 0 !important;
  background: transparent !important;
}

.tool-navigator::before,
.tool-navigator::after {
  content: none !important;
  display: none !important;
}

.tool-card {
  --shape-radius: 0;
  --shape-clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  position: absolute !important;
  top: 0 !important;
  height: var(--banner-height) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  z-index: 1 !important;
}

/*
  V41 — remove definitivamente qualquer pseudo-elemento herdado do botão.
  O brilho branco em camadas continua sendo desenhado somente pelo SVG
  .tool-active-border e seus três caminhos.
*/
button.tool-card::before,
button.tool-card::after,
.tool-card::before,
.tool-card::after {
  content: none !important;
  display: none !important;
  position: static !important;
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  pointer-events: none !important;
}

.tool-card-shape {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: var(--shape-radius) !important;
  background: transparent !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  clip-path: var(--shape-clip) !important;
  -webkit-clip-path: var(--shape-clip) !important;
  filter: none !important;
  transition: none !important;
}

.tool-card-shape::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  background: var(--tool-color, #303034) !important;
  pointer-events: none !important;
}

.tool-card-shape::after {
  content: none !important;
  display: none !important;
}

/*
  As três formas se encontram nos mesmos pontos globais. Não existe mudança de
  z-index, nem uma sombra preenchida atrás de cada banner.
*/
.tool-card:nth-child(1) {
  left: 0 !important;
  width: 36.333333% !important;
  --shape-radius: 23px 0 0 0;
  --shape-clip: polygon(0 0, 100% 0, 83.486239% 100%, 0 100%);
}

.tool-card:nth-child(2) {
  left: 30.333333% !important;
  width: 39.333334% !important;
  --shape-radius: 0;
  --shape-clip: polygon(15.254237% 0, 100% 0, 84.745763% 100%, 0 100%);
}

.tool-card:nth-child(3) {
  left: 63.666667% !important;
  width: 36.333333% !important;
  --shape-radius: 0 23px 0 0;
  --shape-clip: polygon(16.513761% 0, 100% 0, 100% 100%, 0 100%);
}

.tool-card-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: var(--tool-opacity, .52) !important;
  transform: none !important;
  transition: opacity .16s ease !important;
  pointer-events: none !important;
}

.tool-card.active .tool-card-bg {
  opacity: var(--tool-active-opacity, 1) !important;
}

.tool-card-overlay,
.tool-card-shadow { display: none !important; }

/*
  Contorno simples do banner ativo. Não há filter, drop-shadow, box-shadow
  externo nem qualquer outra sombra nos banners.
*/
.tool-active-border {
  position: absolute;
  inset: 0;
  z-index: 25;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity .14s ease;
}

.tool-active-border.is-switching { opacity: 0; }

.tool-active-glow-wide-path,
.tool-active-glow-mid-path {
  fill: none;
  stroke: rgb(var(--active-banner-glow-rgb, 255,255,255));
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  mix-blend-mode: screen;
}

.tool-active-glow-wide-path {
  stroke-width: var(--active-banner-glow-wide-width, 16px);
  opacity: var(--active-banner-glow-wide-opacity, .15);
}

.tool-active-glow-mid-path {
  stroke-width: var(--active-banner-glow-mid-width, 8px);
  opacity: var(--active-banner-glow-mid-opacity, .3);
}

.tool-active-border-path {
  fill: none;
  stroke: rgb(var(--active-banner-border-rgb, 255,255,255));
  stroke-width: var(--active-banner-border-width, 2px);
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.tool-card, .tool-card-shape, .tool-card-bg, .tool-card-overlay { filter: none !important; box-shadow: none !important; }

/* V39: nenhuma sombra direcional ou escurecimento artificial nos banners. */
.tool-card, .tool-card-shape, .tool-card-bg, .tool-card-overlay, .tool-card-shadow {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none;
}

/* V40: o brilho é formado apenas por traços claros, sem blur/filter. */
.tool-active-border,
.tool-active-border path {
  filter: none !important;
  box-shadow: none !important;
}