/* ═══════════════════════════════════════════
   ARIESTA STUDIOS — Colaboradores
   Estilos específicos de la página de colaboradores
   Hereda de styles.css
   ═══════════════════════════════════════════ */

/* ─── Colaborador Cards — Ajustes sin stats ─── */
.colab-cards .character-card {
  /* Las cards sin stats son más compactas */
}

.character-card .card-body {
  padding: 1.25rem 1.25rem 1.5rem;
}

.character-card .card-skills {
  margin-top: 0;
}

/* ─── Color accents por personaje ─── */
.character-card[data-character="yury"]:hover {
  border-color: #7c3aed;
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 0 24px rgba(124,58,237,0.3);
}
.character-card[data-character="yury"]::before {
  background: linear-gradient(90deg, transparent, #7c3aed, #f0abfc, transparent);
}
.character-card[data-character="yury"] .card-class {
  color: #c084fc;
  text-shadow: 0 0 8px rgba(192,132,252,0.4);
}
.character-card[data-character="yury"] .skill-tag {
  background: rgba(124,58,237,0.06);
  border-color: rgba(124,58,237,0.12);
  color: #a78bfa;
}
.character-card[data-character="yury"]:hover .skill-tag {
  background: rgba(124,58,237,0.12);
  border-color: rgba(124,58,237,0.25);
  color: #c084fc;
}

.character-card[data-character="isamy"]:hover {
  border-color: #9f1239;
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 0 24px rgba(159,18,57,0.3);
}
.character-card[data-character="isamy"]::before {
  background: linear-gradient(90deg, transparent, #9f1239, #fb7185, transparent);
}
.character-card[data-character="isamy"] .card-class {
  color: #fb7185;
  text-shadow: 0 0 8px rgba(251,113,133,0.4);
}
.character-card[data-character="isamy"] .skill-tag {
  background: rgba(159,18,57,0.06);
  border-color: rgba(159,18,57,0.12);
  color: #fda4af;
}
.character-card[data-character="isamy"]:hover .skill-tag {
  background: rgba(159,18,57,0.12);
  border-color: rgba(159,18,57,0.25);
  color: #fb7185;
}

.character-card[data-character="sala"]:hover {
  border-color: #0369a1;
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 0 24px rgba(56,189,248,0.3);
}
.character-card[data-character="sala"]::before {
  background: linear-gradient(90deg, transparent, #0369a1, #38bdf8, transparent);
}
.character-card[data-character="sala"] .card-class {
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56,189,248,0.4);
}
.character-card[data-character="sala"] .skill-tag {
  background: rgba(56,189,248,0.06);
  border-color: rgba(56,189,248,0.12);
  color: #7dd3fc;
}
.character-card[data-character="sala"]:hover .skill-tag {
  background: rgba(56,189,248,0.12);
  border-color: rgba(56,189,248,0.25);
  color: #38bdf8;
}

.character-card[data-character="mp5"]:hover {
  border-color: #7c2d12;
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 0 24px rgba(251,146,60,0.3);
}
.character-card[data-character="mp5"]::before {
  background: linear-gradient(90deg, transparent, #7c2d12, #fb923c, transparent);
}
.character-card[data-character="mp5"] .card-class {
  color: #fb923c;
  text-shadow: 0 0 8px rgba(251,146,60,0.4);
}
.character-card[data-character="mp5"] .skill-tag {
  background: rgba(251,146,60,0.06);
  border-color: rgba(251,146,60,0.12);
  color: #fdba74;
}
.character-card[data-character="mp5"]:hover .skill-tag {
  background: rgba(251,146,60,0.12);
  border-color: rgba(251,146,60,0.25);
  color: #fb923c;
}

.character-card[data-character="limon"]:hover {
  border-color: #65a30d;
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 0 24px rgba(251,191,36,0.3);
}
.character-card[data-character="limon"]::before {
  background: linear-gradient(90deg, transparent, #65a30d, #fbbf24, transparent);
}
.character-card[data-character="limon"] .card-class {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251,191,36,0.4);
}
.character-card[data-character="limon"] .skill-tag {
  background: rgba(251,191,36,0.06);
  border-color: rgba(251,191,36,0.12);
  color: #fcd34d;
}
.character-card[data-character="limon"]:hover .skill-tag {
  background: rgba(251,191,36,0.12);
  border-color: rgba(251,191,36,0.25);
  color: #fbbf24;
}

/* ─── Quote con color temático ─── */
.character-card[data-character="yury"] .card-quote {
  border-left-color: #7c3aed;
}
.character-card[data-character="isamy"] .card-quote {
  border-left-color: #9f1239;
}
.character-card[data-character="sala"] .card-quote {
  border-left-color: #0369a1;
}
.character-card[data-character="mp5"] .card-quote {
  border-left-color: #7c2d12;
}
.character-card[data-character="limon"] .card-quote {
  border-left-color: #65a30d;
}

/* ─── Level badge con color por personaje ─── */
.character-card[data-character="yury"] .card-level {
  color: #a78bfa;
  background: rgba(124,58,237,0.08);
  border-color: rgba(124,58,237,0.15);
}
.character-card[data-character="isamy"] .card-level {
  color: #fda4af;
  background: rgba(159,18,57,0.08);
  border-color: rgba(159,18,57,0.15);
}
.character-card[data-character="sala"] .card-level {
  color: #7dd3fc;
  background: rgba(56,189,248,0.08);
  border-color: rgba(56,189,248,0.15);
}
.character-card[data-character="mp5"] .card-level {
  color: #fdba74;
  background: rgba(251,146,60,0.08);
  border-color: rgba(251,146,60,0.15);
}
.character-card[data-character="limon"] .card-level {
  color: #fcd34d;
  background: rgba(251,191,36,0.08);
  border-color: rgba(251,191,36,0.15);
}

/* ─── ISTAM - Hechicero del Motor (Godot Red) ─── */
.character-card[data-character="istam"]:hover {
  border-color: #7f1d1d;
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 0 24px rgba(239,68,68,0.35);
}
.character-card[data-character="istam"]::before {
  background: linear-gradient(90deg, transparent, #7f1d1d, #ef4444, transparent);
}
.character-card[data-character="istam"] .card-class {
  color: #ef4444;
  text-shadow: 0 0 8px rgba(239,68,68,0.4);
}
.character-card[data-character="istam"] .skill-tag {
  background: rgba(239,68,68,0.06);
  border-color: rgba(239,68,68,0.12);
  color: #fca5a5;
}
.character-card[data-character="istam"]:hover .skill-tag {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.25);
  color: #ef4444;
}
.character-card[data-character="istam"] .card-quote {
  border-left-color: #7f1d1d;
}
.character-card[data-character="istam"] .card-level {
  color: #fca5a5;
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.15);
}

/* ─── Responsive ─── */
@media (max-width: 480px) {
  .character-card .card-body {
    padding: 1rem;
  }
}