/* ═══════════════════════════════════════════════════════
   CATEGORIA — barra de vidro que abre/fecha o grupo
═══════════════════════════════════════════════════════ */
.cat-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 22px;
  margin-top: 28px;
  cursor: default;
  text-align: left;
  border-radius: var(--r);
  position: relative;
  overflow: hidden;

  /* Pontos de luz distribuídos + gradiente base do vidro */
  background:
    radial-gradient(ellipse 55% 130% at 10% 50%,  rgba(255,255,255,.44) 0%, transparent 58%),
    radial-gradient(ellipse 28% 90%  at 90% 40%,  rgba(255,255,255,.22) 0%, transparent 55%),
    radial-gradient(ellipse 35% 110% at 50% -15%, rgba(255,255,255,.30) 0%, transparent 48%),
    linear-gradient(158deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.09) 100%);

  backdrop-filter: blur(52px) saturate(140%) brightness(1.13);
  -webkit-backdrop-filter: blur(52px) saturate(140%) brightness(1.13);

  /* Bordas Fresnel — brilho maior no topo */
  border-top:    1px solid rgba(255,255,255,.72);
  border-left:   1px solid rgba(255,255,255,.32);
  border-right:  1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.06);

  box-shadow:
    /* filamento especular 1px — aresta superior */
    0 1px 0    rgba(255,255,255,.90) inset,
    /* luz difusa interna — face frontal do vidro */
    0 3px 12px rgba(255,255,255,.16) inset,
    /* profundidade — espessura do vidro */
    0 -2px 7px rgba(0,0,0,.20) inset,
    /* sombra de elevação */
    0 4px 18px rgba(0,0,0,.22),
    0 1px 4px  rgba(0,0,0,.14);

  font-family: var(--fn);
  font-size: clamp(1.2rem, 2.6vw, 1.75rem);
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #000;

  transition: background .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform;
}

/* Reflexo em arco — curvatura da face frontal do vidro */
.cat-label::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,.07) 65%,
    transparent 100%
  );
  border-radius: 0 0 70% 70% / 0 0 100% 100%;
  pointer-events: none;
  z-index: 0;
}

/* Linha de espessura — borda interna inferior (simula profundidade do vidro) */
.cat-label::after {
  content: '';
  position: absolute;
  bottom: 1px; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.50) 25%,
    rgba(255,255,255,.50) 75%,
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

/* Conteúdo acima dos pseudo-elementos */
.cat-label-text,
.cat-label-icon { position: relative; z-index: 1; }

.cat-label:hover {
  background:
    radial-gradient(ellipse 55% 130% at 10% 50%,  rgba(255,255,255,.52) 0%, transparent 58%),
    radial-gradient(ellipse 28% 90%  at 90% 40%,  rgba(255,255,255,.28) 0%, transparent 55%),
    radial-gradient(ellipse 35% 110% at 50% -15%, rgba(255,255,255,.36) 0%, transparent 48%),
    linear-gradient(158deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.13) 100%);
  border-top-color: rgba(255,255,255,.82);
  box-shadow:
    0 1px 0    rgba(255,255,255,.95) inset,
    0 3px 12px rgba(255,255,255,.20) inset,
    0 -2px 7px rgba(0,0,0,.22) inset,
    0 8px 26px rgba(0,0,0,.28),
    0 2px 6px  rgba(0,0,0,.18);
}

/* Ícone de seta */
.cat-label-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  opacity: .70;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), opacity .15s;
}
.cat-label:hover .cat-label-icon { opacity: .90; }
.cat-label.collapsed .cat-label-icon { transform: rotate(-90deg); }