/* ======================================================
   BrainTest 3.3.6 — UI Sections (Complemento Visual)
   - Sem cores fixas (tudo via ui-theme.css)
   - Mantém classes legadas por compatibilidade
   - Evita warning de ruleset vazio (css emptyRules)
   ====================================================== */

/* Blocos de categoria base */
.category-section {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 2.5rem;

  box-shadow: var(--shadow-soft);

  /* Neutro elegante usando superfícies do tema */
  background: linear-gradient(
    135deg,
    var(--color-card-alt),
    var(--color-card)
  );

  border-left: 4px solid var(--color-primary);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-section:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

/* Classes legadas: mantidas para compatibilidade.
   Incluímos propriedades neutras para evitar warning "empty ruleset". */
.cognitivo,
.psicologico,
.logico,
.entretenimento {
  background: inherit;
  border-left-color: inherit;
}

/* Ícone translúcido como marca d'água */
.category-section::after {
  content: attr(data-icon);
  position: absolute;
  right: 1.5rem;
  bottom: 0.5rem;
  font-size: 4.5rem;
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  transform: rotate(-5deg);
}

/* Cabeçalho interno */
.category-header {
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
}

.category-header h2 {
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--color-text);
}

.category-icon {
  font-size: 1.6rem;
  opacity: 0.8;
}

/* Cards dentro das seções */
.category-section .card {
  background: var(--color-card);
  border: 1px solid var(--color-border-soft);
}

.category-section .card:hover {
  /* acento rosa leve (coerente com tema) */
  border-color: rgba(246, 164, 195, 0.35);
}

/* Transições suaves */
.fade-out {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-in {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (max-width: 900px) {
  .category-section {
    padding: 1.8rem;
  }

  .category-section::after {
    font-size: 3.5rem;
    right: 0.8rem;
    bottom: 0.2rem;
  }
}