/**
 * Dark Image — Artistas (directory + ficha)
 * Depends on: components.css (tokens, base components)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.di-artists-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
    margin-bottom: var(--space-2xl);
}
.di-artists-filter {
    padding: 6px 16px;
    border: 1px solid var(--di-border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--di-sand);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
}
.di-artists-filter:hover {
    border-color: var(--di-gold);
    color: var(--di-white);
}
.di-artists-filter.is-active {
    background: var(--di-gold);
    color: var(--di-base);
    border-color: var(--di-gold);
}
.di-artists-filter__count {
    opacity: 0.6;
    margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARCHIVE GRID — Mosaico irregular
   ═══════════════════════════════════════════════════════════════════════════ */
.di-artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-auto-rows: 360px;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

/* Hero card cada 6, mid height cada 6+3 */
.di-artist-card:nth-child(6n+1) { grid-row: span 2; }

@media (max-width: 768px) {
    .di-artists-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-rows: 260px; }
    .di-artist-card:nth-child(6n+1) { grid-row: span 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTIST CARD — Flip + Reveal + Neon Glow
   ═══════════════════════════════════════════════════════════════════════════ */
.di-artist-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    text-decoration: none;
    background: var(--di-card-bg);
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    cursor: pointer;
    isolation: isolate;
}

.di-artist-card__img-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.di-artist-card__img,
.di-artist-card__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.5s ease, transform 0.5s ease;
    filter: grayscale(1) brightness(0.75) contrast(1.1);
}
.di-artist-card__fallback {
    background: linear-gradient(135deg, #1a1414 0%, var(--di-base) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--di-gold);
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: var(--weight-bold);
    opacity: 0.3;
}

/* Default overlay (capa A) */
.di-artist-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,8,8,0.95) 0%, rgba(10,8,8,0.3) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-md);
    z-index: 2;
    transition: background 0.4s ease;
}

.di-artist-card__name {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--di-white);
    line-height: 1.15;
    letter-spacing: 0.5px;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.di-artist-card__genre-label {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--di-gold-light);
    margin-bottom: 4px;
    opacity: 0.85;
}

/* Roster badge */
.di-artist-card__badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 3;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    background: var(--di-gold);
    color: var(--di-base);
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Reveal layer (capa B) — hidden by default */
.di-artist-card__reveal {
    position: absolute;
    inset: 0;
    z-index: 4;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    background: linear-gradient(to top, rgba(10,8,8,0.96) 0%, rgba(10,8,8,0.5) 100%);
    pointer-events: none;
}
.di-artist-card__reveal-body {
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.45s ease 0.1s;
}
.di-artist-card__meta {
    font-size: var(--text-xs);
    color: var(--di-sand);
    margin-bottom: var(--space-xs);
    opacity: 0.9;
}
.di-artist-card__meta strong { color: var(--di-gold); font-weight: var(--weight-medium); }
.di-artist-card__bio {
    font-size: 0.8rem;
    color: var(--di-white-dim);
    line-height: 1.5;
    margin: var(--space-xs) 0 var(--space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mini platform bar in card reveal */
.di-artist-card__socials {
    display: flex;
    gap: 6px;
    margin-top: var(--space-xs);
}
.di-artist-card__social {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--di-white);
    transition: all 0.25s ease;
    border: 1px solid rgba(255,255,255,0.12);
}
.di-artist-card__social svg { width: 14px; height: 14px; }
.di-artist-card__social:hover { transform: scale(1.15); }
.di-artist-card__social--instagram:hover   { background: #E1306C; border-color: #E1306C; }
.di-artist-card__social--facebook:hover    { background: #1877F2; border-color: #1877F2; }
.di-artist-card__social--tiktok:hover      { background: #000;    border-color: #fff; }
.di-artist-card__social--youtube:hover     { background: #FF0000; border-color: #FF0000; }
.di-artist-card__social--spotify:hover     { background: #1DB954; border-color: #1DB954; }
.di-artist-card__social--soundcloud:hover  { background: #FF5500; border-color: #FF5500; }
.di-artist-card__social--apple_music:hover { background: #FC3C44; border-color: #FC3C44; }
.di-artist-card__social--beatport:hover    { background: #A5F500; border-color: #A5F500; color: #000; }

/* Equalizer bars — decorative bottom-right */
.di-artist-card__eq {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 18px;
    z-index: 3;
    opacity: 0.7;
}
.di-artist-card__eq span {
    display: block;
    width: 3px;
    background: var(--di-gold);
    border-radius: 1px;
    animation: di-eq-artist 1.2s ease-in-out infinite;
}
.di-artist-card__eq span:nth-child(1) { height: 60%; animation-delay: 0s; }
.di-artist-card__eq span:nth-child(2) { height: 100%; animation-delay: 0.2s; }
.di-artist-card__eq span:nth-child(3) { height: 40%; animation-delay: 0.4s; }
@keyframes di-eq-artist {
    0%, 100% { transform: scaleY(0.4); }
    50%      { transform: scaleY(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOVER — Neon glow + reveal
   ═══════════════════════════════════════════════════════════════════════════ */
.di-artist-card:hover {
    transform: perspective(1000px) rotateX(1.5deg) rotateY(-2deg) translateY(-4px);
    box-shadow:
        0 0 0 1px rgba(201, 162, 61, 0.6),
        0 0 30px rgba(201, 162, 61, 0.35),
        0 20px 40px rgba(0,0,0,0.5);
}
.di-artist-card:hover .di-artist-card__img {
    filter: grayscale(0) brightness(1) contrast(1);
    transform: scale(1.06);
}
.di-artist-card:hover .di-artist-card__overlay {
    background: linear-gradient(to top, rgba(10,8,8,0.5) 0%, rgba(10,8,8,0.2) 100%);
}
.di-artist-card:hover .di-artist-card__reveal {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.di-artist-card:hover .di-artist-card__reveal-body {
    opacity: 1;
    transform: translateY(0);
}

/* Touch devices — show reveal on focus-within */
@media (hover: none) {
    .di-artist-card__reveal { display: none; } /* desktop hover only */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Scroll-reveal stagger
   ═══════════════════════════════════════════════════════════════════════════ */
.di-artist-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.4s ease;
}
.di-artist-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.di-artist-card.is-visible:hover {
    transform: perspective(1000px) rotateX(1.5deg) rotateY(-2deg) translateY(-4px);
}

/* Hide when filtered out */
.di-artist-card.is-filtered { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE ARTISTA (ficha)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero cinemático */
.di-artista-hero {
    position: relative;
    padding: var(--space-3xl) var(--container-pad) var(--space-2xl);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}
.di-artista-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(40px) brightness(0.3);
    transform: scale(1.1);
    z-index: -1;
}
.di-artista-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,8,8,0.4) 0%, rgba(10,8,8,0.95) 100%);
    z-index: -1;
}
.di-artista-hero__photo {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--di-gold-light);
    box-shadow: 0 0 40px rgba(201, 162, 61, 0.4);
    animation: di-glow-pulse 3.5s ease-in-out infinite;
    display: block;
    margin: 0 auto var(--space-lg);
}
.di-artista-hero__photo--placeholder {
    background: var(--di-card-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--di-gold);
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: var(--weight-bold);
}
@keyframes di-glow-pulse {
    0%, 100% { box-shadow: 0 0 40px rgba(201, 162, 61, 0.4); }
    50%      { box-shadow: 0 0 60px rgba(201, 162, 61, 0.7); }
}
.di-artista-hero__name {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--weight-bold);
    color: var(--di-white);
    line-height: 1.1;
    letter-spacing: 1px;
    margin: var(--space-sm) 0 var(--space-xs);
}
.di-artista-hero__real {
    color: var(--di-sand);
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
}
.di-artista-hero__tagline {
    max-width: 600px;
    margin: var(--space-md) auto 0;
    color: var(--di-white-dim);
    font-size: var(--text-base);
    line-height: 1.5;
}

/* Stats bar */
.di-artista-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
    max-width: 800px;
    margin: var(--space-2xl) auto;
    padding: var(--space-lg);
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(12px);
    border: 1px solid var(--di-border);
    border-radius: var(--radius-md);
}
.di-artista-stat {
    text-align: center;
}
.di-artista-stat__label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--di-sand);
    opacity: 0.7;
    margin-bottom: 6px;
}
.di-artista-stat__value {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--di-gold);
    font-weight: var(--weight-bold);
}

/* Sections container */
.di-artista-section {
    max-width: 800px;
    margin: 0 auto var(--space-2xl);
    padding: 0 var(--container-pad);
}
.di-artista-section__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--di-white);
    margin-bottom: var(--space-lg);
    letter-spacing: 1px;
    text-align: center;
}
.di-artista-section__title--gold { color: var(--di-gold); }

/* Divider dorado */
.di-artista-divider {
    height: 1px;
    max-width: 800px;
    margin: var(--space-2xl) auto;
    background: linear-gradient(90deg, transparent, rgba(201, 162, 61, 0.5), transparent);
}

/* Glass card */
.di-artista-glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--di-border);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
}

/* Signature track / Pod-Dark embed */
.di-artista-embed {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.di-artista-embed--plyr .plyr {
    --plyr-color-main: #c9a23d;
    --plyr-video-background: #000;
}

/* Pod-Dark card link */
.di-poddark-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: linear-gradient(135deg, rgba(201, 162, 61, 0.08) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(201, 162, 61, 0.25);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.3s ease;
}
.di-poddark-card:hover {
    border-color: var(--di-gold);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(201, 162, 61, 0.15);
}
.di-poddark-card__thumb {
    width: 120px;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.di-poddark-card__label {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--di-gold);
}
.di-poddark-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--di-white);
    margin: 4px 0 0;
    line-height: 1.3;
}

/* Residency badges */
.di-residencies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
}
.di-residency-badge {
    padding: 6px 14px;
    border: 1px solid rgba(201, 162, 61, 0.4);
    border-radius: var(--radius-full);
    background: rgba(201, 162, 61, 0.08);
    color: var(--di-gold);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.25s ease;
}
.di-residency-badge:hover {
    background: var(--di-gold);
    color: var(--di-base);
}

/* Platform bar — 8 redes */
.di-artista-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
}
.di-platform-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    border: 1px solid var(--di-border);
    background: rgba(255,255,255,0.03);
    color: var(--di-white);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.di-platform-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.di-platform-btn:hover {
    transform: translateY(-2px);
    color: var(--di-white);
    border-color: currentColor;
}
.di-platform-btn[data-platform="instagram"]:hover   { background: #E1306C; border-color: #E1306C; box-shadow: 0 6px 20px rgba(225,48,108,0.4); }
.di-platform-btn[data-platform="facebook"]:hover    { background: #1877F2; border-color: #1877F2; box-shadow: 0 6px 20px rgba(24,119,242,0.4); }
.di-platform-btn[data-platform="tiktok"]:hover      { background: #000;    border-color: #fff;    box-shadow: 0 6px 20px rgba(0,246,252,0.4); }
.di-platform-btn[data-platform="youtube"]:hover     { background: #FF0000; border-color: #FF0000; box-shadow: 0 6px 20px rgba(255,0,0,0.4); }
.di-platform-btn[data-platform="spotify"]:hover     { background: #1DB954; border-color: #1DB954; box-shadow: 0 6px 20px rgba(29,185,84,0.4); }
.di-platform-btn[data-platform="apple_music"]:hover { background: #FC3C44; border-color: #FC3C44; box-shadow: 0 6px 20px rgba(252,60,68,0.4); }
.di-platform-btn[data-platform="soundcloud"]:hover  { background: #FF5500; border-color: #FF5500; box-shadow: 0 6px 20px rgba(255,85,0,0.4); }
.di-platform-btn[data-platform="beatport"]:hover    { background: #A5F500; border-color: #A5F500; color: #000; box-shadow: 0 6px 20px rgba(165,245,0,0.4); }

/* Related artists */
.di-related-artists {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
}
.di-related-artist {
    display: block;
    text-align: center;
    text-decoration: none;
    transition: transform 0.25s ease;
}
.di-related-artist:hover { transform: translateY(-4px); }
.di-related-artist__photo {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(201,162,61,0.3);
    margin-bottom: var(--space-xs);
    transition: border-color 0.3s ease;
}
.di-related-artist:hover .di-related-artist__photo { border-color: var(--di-gold); }
.di-related-artist__name {
    color: var(--di-white);
    font-size: var(--text-sm);
    font-family: var(--font-heading);
}

/* Responsive */
@media (max-width: 640px) {
    .di-artista-hero__photo { width: 160px; height: 160px; }
    .di-artista-stats { grid-template-columns: repeat(2, 1fr); padding: var(--space-md); }
    .di-artista-platforms { gap: var(--space-xs); }
    .di-platform-btn { padding: 8px 12px; font-size: 0.65rem; }
    .di-poddark-card { flex-direction: column; text-align: center; }
    .di-poddark-card__thumb { width: 100%; max-width: 240px; }
    .di-artist-card:hover {
        transform: translateY(-2px); /* no 3D tilt on mobile */
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO UNIFICADO + VINILO + AURA
   ═══════════════════════════════════════════════════════════════════════════ */
.di-artista-hero--unified { padding-top: var(--space-3xl); }
/* Anular overlays heredados del hero "foto de fondo" original */
.di-artista-hero--unified::after,
.di-artista-hero--unified::before { display: none; }
.di-artista-hero--unified .di-artista-hero__bg { display: none; }
.di-artista-hero__bg-unified {
    position: absolute; inset: 0; z-index: -1; overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(201,162,61,0.14), transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(139,26,26,0.18), transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(201,162,61,0.08), transparent 60%),
        linear-gradient(180deg, #0a0808 0%, #140d0d 60%, #0a0808 100%);
    animation: di-hero-glow 12s ease-in-out infinite;
}
@keyframes di-hero-glow {
    0%, 100% { background-position: 0% 0%, 100% 100%, 50% 100%, 0 0; }
    50%      { background-position: 5% -5%, 95% 105%, 50% 95%, 0 0; }
}
/* Grid de ruido sutil */
.di-artista-hero__bg-unified::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, transparent 49%, rgba(201,162,61,0.04) 50%, transparent 51%);
    background-size: 3px 3px, 80px 100%;
    opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
    .di-artista-hero__bg-unified { animation: none; }
}

/* Ondas de sonido — 3 capas con profundidad */
.di-hero-waves {
    position: absolute;
    top: 0; left: 0; right: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}
.di-hero-waves path {
    transform-origin: 50% 50%;
    will-change: transform;
}
.di-hero-waves__w1 { animation: di-wave-flow 6s ease-in-out infinite; }
.di-hero-waves__w2 { animation: di-wave-flow 9s ease-in-out infinite reverse; }
.di-hero-waves__w3 { animation: di-wave-flow 11s ease-in-out infinite; }
@keyframes di-wave-flow {
    0%, 100% { transform: translateX(0) scaleY(1); }
    25%      { transform: translateX(-40px) scaleY(1.3); }
    50%      { transform: translateX(0) scaleY(0.7); }
    75%      { transform: translateX(40px) scaleY(1.2); }
}
@media (prefers-reduced-motion: reduce) {
    .di-hero-waves path { animation: none; }
}

.di-artist-photo-wrap {
    position: relative;
    width: 180px; height: 180px;
    margin: 0 auto var(--space-lg);
    display: flex; align-items: center; justify-content: center;
}
.di-artist-photo-wrap .di-artista-hero__photo {
    position: relative;
    z-index: 3;
    width: 180px; height: 180px;
    margin: 0;
    animation: none; /* el glow lo maneja la aura/vinilo */
}

/* Vinilo — DJ (estilo beatdo: más pequeño, surcos sutiles) */
.di-vinyl {
    position: absolute; inset: -22px;
    border-radius: 50%;
    z-index: 1;
    background:
        repeating-radial-gradient(circle,
            #0a0808 0, #0a0808 2px,
            #1a1414 2px, #1a1414 4px),
        radial-gradient(circle, #0a0808 0%, #000 100%);
    box-shadow:
        0 0 0 2px #c9a23d,
        0 0 24px rgba(0,0,0,0.8),
        inset 0 0 16px rgba(0,0,0,0.6);
    animation: di-spin 8s linear infinite;
}
@keyframes di-spin { to { transform: rotate(360deg); } }

/* Aura — Artista */
.di-aura {
    position: absolute; inset: -24px;
    border-radius: 50%;
    z-index: 1;
    background: radial-gradient(circle, rgba(201,162,61,0.35) 0%, rgba(139,26,26,0.15) 40%, transparent 70%);
    box-shadow:
        0 0 40px rgba(201,162,61,0.5),
        0 0 80px rgba(139,26,26,0.25);
    animation: di-aura-pulse 3.5s ease-in-out infinite;
}
@keyframes di-aura-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
}

/* Disable animations en mobile / prefers-reduced-motion */
@media (prefers-reduced-motion: reduce), (max-width: 480px) {
    .di-vinyl { animation: none; }
    .di-aura  { animation: none; }
}

.di-artista-hero__badge {
    display: inline-block;
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
}
.di-artista-hero__name { margin-top: var(--space-sm); }

/* ═══════════════════════════════════════════════════════════════════════════
   SHARE BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.di-share {
    display: flex; flex-wrap: wrap; gap: var(--space-xs);
    justify-content: center;
    margin-top: var(--space-lg);
}
.di-share__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--di-border);
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.03);
    color: var(--di-white);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}
.di-share__btn:hover {
    border-color: var(--di-gold);
    color: var(--di-gold);
    transform: translateY(-2px);
}
.di-share__btn--wa:hover {
    background: #25D366; border-color: #25D366; color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATS — chips + sub
   ═══════════════════════════════════════════════════════════════════════════ */
.di-artista-stat__sub {
    font-size: 0.7rem;
    color: var(--di-sand);
    font-weight: var(--weight-regular);
    opacity: 0.7;
}
.di-artista-stat__value--chips {
    display: flex; flex-wrap: wrap; gap: 4px;
    justify-content: center;
    font-size: var(--text-sm);
}

/* Chip de género */
.di-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: var(--weight-bold);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(201,162,61,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENTIONED POSTS (blog ↔ artista)
   ═══════════════════════════════════════════════════════════════════════════ */
.di-mentioned-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}
.di-mentioned-card {
    display: block;
    text-decoration: none;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--di-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}
.di-mentioned-card:hover {
    border-color: var(--di-gold);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.di-mentioned-card__img {
    width: 100%; aspect-ratio: 16/9; object-fit: cover;
    filter: grayscale(0.6);
    transition: filter 0.3s ease;
}
.di-mentioned-card:hover .di-mentioned-card__img { filter: grayscale(0); }
.di-mentioned-card__body { padding: var(--space-md); }
.di-mentioned-card__label {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    color: var(--di-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.di-mentioned-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--di-white);
    margin: 0 0 var(--space-xs);
    line-height: 1.3;
}
.di-mentioned-card__excerpt {
    font-size: 0.8rem;
    color: var(--di-white-dim);
    line-height: 1.5;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KEYWORDS SECTION (SEO visible + interlinking)
   ═══════════════════════════════════════════════════════════════════════════ */
.di-artista-section__title--sm {
    font-size: var(--text-base);
    color: var(--di-sand);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: var(--space-md);
}
.di-keywords {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    margin-bottom: var(--space-lg);
}
.di-keyword {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--di-border);
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.02);
    color: var(--di-sand);
    font-size: 0.75rem;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.di-keyword:hover {
    background: rgba(201,162,61,0.1);
    color: var(--di-gold);
    border-color: var(--di-gold);
}
.di-keyword--primary {
    background: rgba(201,162,61,0.15);
    color: var(--di-gold);
    border-color: rgba(201,162,61,0.4);
}
.di-keywords__seo-text {
    text-align: center;
    color: var(--di-white-dim);
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto;
}

/* Stats: 3 slots responsive */
.di-artista-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (max-width: 640px) {
    .di-artista-stats { grid-template-columns: repeat(3, 1fr); }
}