/* Directiva landing: cuadrícula plana (`.dir-card--grid-surface`). Los modales al hacer clic usan el tema global en `LandingPage.html` (sin `data-directiva-theme`). Las reglas `[data-directiva-theme="…"]` siguen aquí por compatibilidad si en el futuro se vuelve a fijar el tema por tarjeta en el overlay. */

.dir-card {
  --dir-accent: #4a7fa8;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  /* Landing y panel exponen --panel por tema; --bg-secondary solo en contextos legacy */
  background: var(--bg-secondary, var(--panel, #0c1a40));
  border: 1px solid color-mix(in srgb, var(--dir-accent) 38%, transparent);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
}

.dir-card::before,
.dir-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.dir-card__body {
  position: relative;
  z-index: 1;
  padding: 54px 20px 22px;
}

.dir-card__accent-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--dir-accent), color-mix(in srgb, var(--dir-accent) 40%, #fff), var(--dir-accent));
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dir-card,
  .dir-card::before,
  .dir-card::after,
  .dir-card--opening,
  .dir-card__deco .dir-deco-svg,
  .dir-card__deco .dir-deco-svg *,
  .dir-card-pick .dir-card,
  .dir-card-pick .dir-card::before,
  .dir-card-pick .dir-card::after {
    animation: none !important;
  }
  .dir-card:hover {
    transform: none !important;
  }
}

/* ── 1 Olímpico dorado ─────────────────────────────────────────────── */
@keyframes dir-olympic-shimmer {
  0% { transform: translateX(-40%) rotate(2deg); opacity: 0.35; }
  50% { opacity: 0.65; }
  100% { transform: translateX(40%) rotate(2deg); opacity: 0.35; }
}
@keyframes dir-olympic-ring {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dir-accent) 55%, transparent); }
  50% { box-shadow: 0 0 28px 4px color-mix(in srgb, var(--dir-accent) 35%, transparent); }
}
.dir-card--olympic-gold::before {
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, color-mix(in srgb, var(--dir-accent) 45%, transparent), transparent 55%),
    repeating-linear-gradient(-8deg, transparent 0, transparent 8px, color-mix(in srgb, var(--dir-accent) 08%, transparent) 8px, color-mix(in srgb, var(--dir-accent) 08%, transparent) 9px);
  animation: dir-olympic-shimmer 5.5s ease-in-out infinite;
}
.dir-card--olympic-gold::after {
  inset: -2px;
  border-radius: 15px;
  background: linear-gradient(120deg, transparent 35%, color-mix(in srgb, #fff 22%, var(--dir-accent)) 50%, transparent 65%);
  opacity: 0.12;
  animation: dir-olympic-shimmer 3.8s linear infinite reverse;
}
.dir-card--olympic-gold {
  animation: dir-olympic-ring 3.2s ease-in-out infinite;
}

/* ── 2 Neón dojang ─────────────────────────────────────────────────── */
@keyframes dir-neon-pulse {
  0%, 100% { filter: hue-rotate(0deg); opacity: 0.55; }
  50% { filter: hue-rotate(-18deg); opacity: 0.9; }
}
@keyframes dir-neon-border {
  0%, 100% { box-shadow: 0 0 12px color-mix(in srgb, var(--dir-accent) 55%, #ff0099), inset 0 0 20px color-mix(in srgb, var(--dir-accent) 12%, transparent); }
  50% { box-shadow: 0 0 26px color-mix(in srgb, #00e5ff 40%, var(--dir-accent)), inset 0 0 28px color-mix(in srgb, #ff0099 10%, transparent); }
}
.dir-card--neon-dojo::before {
  background: linear-gradient(180deg, color-mix(in srgb, #00e5ff 25%, transparent), transparent 42%, color-mix(in srgb, #ff0099 18%, transparent));
  animation: dir-neon-pulse 2.8s ease-in-out infinite;
}
.dir-card--neon-dojo::after {
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, color-mix(in srgb, var(--dir-accent) 12%, transparent) 3px, color-mix(in srgb, var(--dir-accent) 12%, transparent) 4px);
  opacity: 0.35;
  mask-image: linear-gradient(transparent 20%, #000 50%, transparent 80%);
}
.dir-card--neon-dojo {
  animation: dir-neon-border 2.4s ease-in-out infinite;
}

/* ── 3 HUD táctico ─────────────────────────────────────────────────── */
@keyframes dir-hud-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.dir-card--hud-tactical::before {
  border: 1px solid color-mix(in srgb, var(--dir-accent) 55%, transparent);
  inset: 10px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--dir-accent) 40%, transparent) 0 2px, transparent 2px 100%) 0 0 / 14px 100% no-repeat,
    linear-gradient(0deg, color-mix(in srgb, var(--dir-accent) 40%, transparent) 0 2px, transparent 2px 100%) 0 0 / 100% 14px no-repeat,
    linear-gradient(90deg, transparent calc(100% - 2px), color-mix(in srgb, var(--dir-accent) 40%, transparent) calc(100% - 2px)) 100% 100% / 14px 100% no-repeat,
    linear-gradient(0deg, transparent calc(100% - 2px), color-mix(in srgb, var(--dir-accent) 40%, transparent) calc(100% - 2px)) 100% 100% / 100% 14px no-repeat;
  opacity: 0.65;
}
.dir-card--hud-tactical::after {
  height: 22%;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dir-accent) 35%, transparent), transparent);
  opacity: 0.25;
  animation: dir-hud-scan 2.6s linear infinite;
}

/* ── 4 Tatami WT ───────────────────────────────────────────────────── */
@keyframes dir-tatami-shift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 24px 12px, -18px 0; }
}
.dir-card--tatami-green::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, #15803d 55%, var(--dir-accent)) 0%, color-mix(in srgb, #166534 40%, var(--dir-accent)) 100%),
    repeating-linear-gradient(105deg, transparent 0, transparent 11px, color-mix(in srgb, #fff 06%, transparent) 11px, color-mix(in srgb, #fff 06%, transparent) 12px);
  opacity: 0.22;
  animation: dir-tatami-shift 6s linear infinite;
}
.dir-card--tatami-green::after {
  background: radial-gradient(ellipse 80% 50% at 50% 120%, color-mix(in srgb, #22c55e 35%, transparent), transparent 70%);
  opacity: 0.45;
}

/* ── 5 Kyorugi chung/hong ───────────────────────────────────────────── */
@keyframes dir-kyo-swing {
  0%, 100% { opacity: 0.4; transform: skewX(-6deg) translateX(-4%); }
  50% { opacity: 0.65; transform: skewX(-6deg) translateX(4%); }
}
.dir-card--kyorugi-clash::before {
  background: linear-gradient(115deg, #003478 0%, #003478 44%, #e11d2e 56%, #e11d2e 100%);
  opacity: 0.2;
  animation: dir-kyo-swing 3.5s ease-in-out infinite;
}
.dir-card--kyorugi-clash::after {
  background: repeating-linear-gradient(90deg, transparent, transparent 6px, color-mix(in srgb, #fff 10%, transparent) 6px, color-mix(in srgb, #fff 10%, transparent) 7px);
  opacity: 0.12;
  mix-blend-mode: overlay;
}

/* ── 6 Poomsae fluido ────────────────────────────────────────────────── */
@keyframes dir-poom-wave {
  0%, 100% { transform: rotate(-2deg) scale(1); opacity: 0.35; }
  50% { transform: rotate(2deg) scale(1.04); opacity: 0.55; }
}
.dir-card--poomsae-flow::before {
  background:
    radial-gradient(ellipse 100% 60% at 20% 0%, color-mix(in srgb, #6366f1 40%, var(--dir-accent)), transparent 55%),
    radial-gradient(ellipse 90% 50% at 90% 100%, color-mix(in srgb, var(--dir-accent) 45%, #a855f7), transparent 60%);
  animation: dir-poom-wave 6s ease-in-out infinite;
}
.dir-card--poomsae-flow::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' fill='none'%3E%3Cpath d='M0 28 Q30 8 60 28 T120 28' stroke='%23ffffff18' stroke-width='1.2'/%3E%3C/svg%3E") repeat;
  background-size: 140px 48px;
  opacity: 0.5;
  animation: dir-tatami-shift 10s linear infinite reverse;
}

/* ── 7 Acero cromado ─────────────────────────────────────────────────── */
@keyframes dir-chrome-sweep {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}
.dir-card--chrome-steel::before {
  background: linear-gradient(125deg, #1e293b, #334155, #475569);
  opacity: 0.35;
}
.dir-card--chrome-steel::after {
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, #fff 45%, transparent) 48%, transparent 62%);
  opacity: 0.25;
  animation: dir-chrome-sweep 3.8s ease-in-out infinite;
}

/* ── 8 Golpe ígneo ───────────────────────────────────────────────────── */
@keyframes dir-ember-rise {
  0% { transform: translateY(12%) scaleY(0.9); opacity: 0.5; }
  100% { transform: translateY(-18%) scaleY(1.05); opacity: 0; }
}
.dir-card--ember-strike::before {
  background: radial-gradient(ellipse 100% 70% at 50% 110%, #ea580c, #f97316 30%, transparent 65%);
  opacity: 0.45;
}
.dir-card--ember-strike::after {
  background: radial-gradient(circle at 30% 100%, color-mix(in srgb, #fbbf24 70%, transparent), transparent 45%),
    radial-gradient(circle at 70% 100%, color-mix(in srgb, #ef4444 55%, transparent), transparent 40%);
  animation: dir-ember-rise 2.2s ease-out infinite;
}

/* ── 9 Velocidad pista ───────────────────────────────────────────────── */
@keyframes dir-vel-dash {
  0% { background-position: 0 0; }
  100% { background-position: 40px 20px; }
}
.dir-card--velocity-track::before {
  background: repeating-linear-gradient(-35deg, transparent, transparent 14px, color-mix(in srgb, var(--dir-accent) 22%, transparent) 14px, color-mix(in srgb, var(--dir-accent) 22%, transparent) 15px);
  opacity: 0.35;
  animation: dir-vel-dash 1.4s linear infinite;
}
.dir-card--velocity-track::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 18%, transparent), transparent);
  opacity: 0.15;
  animation: dir-chrome-sweep 2s linear infinite;
}

/* ── 10 Aurora MBT ───────────────────────────────────────────────────── */
@keyframes dir-aurora {
  0% { filter: hue-rotate(0deg) saturate(1.1); }
  50% { filter: hue-rotate(40deg) saturate(1.35); }
  100% { filter: hue-rotate(0deg) saturate(1.1); }
}
.dir-card--aurora-boreal::before {
  background:
    linear-gradient(120deg, color-mix(in srgb, #22d3ee 35%, transparent), transparent 40%, color-mix(in srgb, #a855f7 40%, transparent), transparent 70%, color-mix(in srgb, var(--dir-accent) 40%, transparent));
  opacity: 0.45;
  animation: dir-aurora 8s ease-in-out infinite;
}
.dir-card--aurora-boreal::after {
  background: radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, #34d399 30%, transparent), transparent 55%);
  opacity: 0.35;
}

/* Bloque destacado presidente (misma familia de temas, menos padding interno en capa) */
.dir-card-feature {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  --dir-accent: #c9a961;
}
.dir-card-feature::before,
.dir-card-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.dir-card-feature__body {
  position: relative;
  z-index: 1;
}
.dir-card-feature--olympic-gold::before { animation: dir-olympic-shimmer 6s ease-in-out infinite; background: radial-gradient(ellipse 100% 70% at 50% -10%, color-mix(in srgb, var(--dir-accent) 50%, transparent), transparent 55%); }
.dir-card-feature--olympic-gold::after { opacity: 0.1; animation: dir-olympic-shimmer 4s linear infinite reverse; background: linear-gradient(120deg, transparent 40%, color-mix(in srgb, #fff 25%, var(--dir-accent)) 50%, transparent 60%); }
.dir-card-feature--neon-dojo::before { animation: dir-neon-pulse 3s ease-in-out infinite; background: linear-gradient(200deg, color-mix(in srgb, #00e5ff 22%, transparent), transparent 50%, color-mix(in srgb, #ff0099 18%, transparent)); }
.dir-card-feature--neon-dojo::after { opacity: 0.25; background: repeating-linear-gradient(0deg, transparent, transparent 4px, color-mix(in srgb, var(--dir-accent) 10%, transparent) 4px, color-mix(in srgb, var(--dir-accent) 10%, transparent) 5px); }
.dir-card-feature--hud-tactical::before { inset: 14px; border: 1px solid color-mix(in srgb, var(--dir-accent) 50%, transparent); border-radius: 12px; opacity: 0.55; }
.dir-card-feature--hud-tactical::after { animation: dir-hud-scan 3s linear infinite; background: linear-gradient(180deg, color-mix(in srgb, var(--dir-accent) 30%, transparent), transparent); height: 30%; top: 0; left: 0; right: 0; bottom: auto; opacity: 0.2; }
.dir-card-feature--tatami-green::before { animation: dir-tatami-shift 7s linear infinite; opacity: 0.2; background: repeating-linear-gradient(100deg, transparent 0, transparent 12px, color-mix(in srgb, #22c55e 15%, transparent) 12px, color-mix(in srgb, #22c55e 15%, transparent) 13px); }
.dir-card-feature--tatami-green::after { opacity: 0.35; background: radial-gradient(ellipse 90% 60% at 50% 100%, color-mix(in srgb, #15803d 35%, transparent), transparent 70%); }
.dir-card-feature--kyorugi-clash::before { animation: dir-kyo-swing 4s ease-in-out infinite; opacity: 0.18; background: linear-gradient(110deg, #003478 45%, #e11d2e 55%); }
.dir-card-feature--kyorugi-clash::after { opacity: 0.08; mix-blend-mode: overlay; background: repeating-linear-gradient(90deg, transparent, transparent 8px, #fff2 8px, #fff2 9px); }
.dir-card-feature--poomsae-flow::before { animation: dir-poom-wave 7s ease-in-out infinite; background: radial-gradient(ellipse 100% 55% at 30% 0%, color-mix(in srgb, #818cf8 35%, var(--dir-accent)), transparent 60%); }
.dir-card-feature--poomsae-flow::after { opacity: 0.35; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36'%3E%3Cpath d='M0 24 Q25 6 50 24 T100 24' fill='none' stroke='%23ffffff14' stroke-width='1'/%3E%3C/svg%3E") repeat; background-size: 120px 40px; }
.dir-card-feature--chrome-steel::before { opacity: 0.3; background: linear-gradient(135deg, #1e293b, #475569); }
.dir-card-feature--chrome-steel::after { animation: dir-chrome-sweep 4s ease-in-out infinite; opacity: 0.2; background: linear-gradient(95deg, transparent 35%, #fff5 50%, transparent 65%); }
.dir-card-feature--ember-strike::before { opacity: 0.4; background: radial-gradient(ellipse 100% 65% at 50% 105%, #ea580c, transparent 60%); }
.dir-card-feature--ember-strike::after { animation: dir-ember-rise 2.5s ease-out infinite; background: radial-gradient(circle at 50% 100%, #fbbf2488, transparent 50%); }
.dir-card-feature--velocity-track::before { animation: dir-vel-dash 1.6s linear infinite; opacity: 0.28; background: repeating-linear-gradient(-40deg, transparent, transparent 16px, color-mix(in srgb, var(--dir-accent) 25%, transparent) 16px, color-mix(in srgb, var(--dir-accent) 25%, transparent) 17px); }
.dir-card-feature--velocity-track::after { opacity: 0.12; animation: dir-chrome-sweep 2.4s linear infinite; background: linear-gradient(90deg, transparent, #fff3, transparent); }
.dir-card-feature--aurora-boreal::before { animation: dir-aurora 9s ease-in-out infinite; opacity: 0.4; background: linear-gradient(130deg, color-mix(in srgb, #38bdf8 35%, transparent), transparent, color-mix(in srgb, #c084fc 38%, transparent), transparent, color-mix(in srgb, var(--dir-accent) 35%, transparent)); }
.dir-card-feature--aurora-boreal::after { opacity: 0.3; background: radial-gradient(ellipse 100% 70% at 50% 110%, color-mix(in srgb, #2dd4bf 28%, transparent), transparent 65%); }

@media (prefers-reduced-motion: reduce) {
  .dir-card-feature::before,
  .dir-card-feature::after {
    animation: none !important;
  }
}
/* Miniaturas selector en modal */
.dir-card-pick {
  flex: 0 0 auto;
  width: 108px;
  height: 76px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--border-light, rgba(255, 255, 255, 0.12));
  background: var(--bg-tertiary, #0f2150);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.dir-card-pick:hover {
  border-color: color-mix(in srgb, var(--dir-accent, #4a7fa8) 70%, transparent);
  transform: translateY(-1px);
}
.dir-card-pick--selected {
  border-color: var(--c1, #00e5ff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c1, #00e5ff) 35%, transparent), 0 8px 22px rgba(0, 0, 0, 0.35);
}
.dir-card-pick-scale {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 170px;
  transform: scale(0.45);
  transform-origin: top left;
}
.dir-card-pick__lbl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 6px 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 4px #000;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  z-index: 2;
}


/* ═══ Tarjeta: hover, pulso al abrir, capa SVG decorativa ═══ */
#directiva-container .dir-card {
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.46, 1), box-shadow 0.35s ease, border-color 0.25s ease;
}
#directiva-container .dir-card:hover {
  transform: translateY(-5px) scale(1.012);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 0 36px color-mix(in srgb, var(--dir-accent) 24%, transparent);
}
@keyframes dir-card-opening-burst {
  0% { transform: scale(1); filter: brightness(1); }
  38% { transform: scale(1.04); filter: brightness(1.2); box-shadow: 0 0 0 0 color-mix(in srgb, var(--dir-accent) 50%, transparent); }
  100% { transform: scale(1); filter: brightness(1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
}
#directiva-container .dir-card--opening {
  animation: dir-card-opening-burst 0.75s cubic-bezier(0.34, 1.15, 0.64, 1) both;
  z-index: 4;
}

/* Cuadrícula: tarjetas lisas (el tema animado solo en el overlay al abrir). */
#directiva-container .dir-card--grid-surface {
  animation: none !important;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--dir-accent) 22%, var(--line, rgba(255, 255, 255, 0.12)));
  background: color-mix(in srgb, var(--panel, var(--bg-secondary, #0c1a40)) 96%, var(--dir-accent) 4%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}
#directiva-container .dir-card--grid-surface::before,
#directiva-container .dir-card--grid-surface::after {
  display: none !important;
  content: none !important;
}
#directiva-container .dir-card--grid-surface:hover {
  transform: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  border-color: color-mix(in srgb, var(--dir-accent) 38%, var(--line, rgba(255, 255, 255, 0.16)));
}
#directiva-container .dir-card--grid-surface.dir-card--opening {
  animation: dir-grid-surface-tap 0.55s ease both !important;
}
@keyframes dir-grid-surface-tap {
  0% {
    transform: scale(1);
  }
  42% {
    transform: scale(0.988);
  }
  100% {
    transform: scale(1);
  }
}
#directiva-container .dir-card--grid-surface .directiva-card:hover {
  transform: translateY(-4px);
}
#directiva-container .dir-card--grid-surface .directiva-avatar::after {
  animation: none;
  opacity: 0;
}

#directiva-container .dir-card__deco {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  color: var(--dir-accent);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
#directiva-container .dir-card__deco .dir-deco-svg {
  max-width: 100%;
  height: auto;
  animation: dir-deco-float 4.2s ease-in-out infinite;
}
@keyframes dir-deco-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.88; }
  50% { transform: translateY(-4px) scale(1.05); opacity: 1; }
}
#directiva-container .dir-card__deco--neon-dojo .dir-deco-svg { animation-duration: 2.5s; filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.45)); }
#directiva-container .dir-card__deco--hud-tactical .dir-deco-svg { animation: dir-deco-hud 2.6s linear infinite; }
@keyframes dir-deco-hud {
  0%, 100% { opacity: 0.7; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-2px) scale(1.03); }
}
#directiva-container .dir-card__deco--velocity-track .dir-deco-svg { animation: dir-deco-dash 1.05s linear infinite; }
@keyframes dir-deco-dash {
  0% { transform: translateX(0); }
  100% { transform: translateX(-8px); }
}

/* ═══ Modal (opcional): overrides si el overlay tiene `data-directiva-theme` ═══ */
@keyframes dir-theme-ribbon-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes dir-neon-panel-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.2), 0 0 40px rgba(255, 0, 153, 0.12), 0 22px 56px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: 0 0 0 1px rgba(255, 0, 153, 0.28), 0 0 52px rgba(0, 229, 255, 0.2), 0 26px 64px rgba(0, 0, 0, 0.55); }
}
@keyframes dir-aurora-backdrop {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.directiva-bio-preview-overlay[data-directiva-theme="neon-dojo"].is-open .directiva-bio-preview-backdrop,
#directiva-zoom-overlay[data-directiva-theme="neon-dojo"].is-open .directiva-zoom-backdrop {
  background: radial-gradient(ellipse 100% 70% at 50% 0%, rgba(0, 229, 255, 0.16), transparent 52%),
    radial-gradient(ellipse 80% 55% at 100% 100%, rgba(255, 0, 153, 0.14), transparent 50%),
    rgba(0, 0, 0, 0.88) !important;
}
.directiva-bio-preview-overlay[data-directiva-theme="neon-dojo"].is-open .directiva-bio-preview-panel,
#directiva-zoom-overlay[data-directiva-theme="neon-dojo"].is-open .directiva-zoom-panel {
  animation: dirModalOlympicIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) both, dir-neon-panel-pulse 2.3s ease-in-out 0.55s infinite !important;
  border-color: color-mix(in srgb, #00e5ff 48%, #ff0099) !important;
}
.directiva-bio-preview-overlay[data-directiva-theme="neon-dojo"] .directiva-bio-preview-panel::before,
#directiva-zoom-overlay[data-directiva-theme="neon-dojo"] .directiva-zoom-panel::before {
  background: linear-gradient(90deg, #00e5ff, #ff0099, #7c3aed, #00e5ff) !important;
  background-size: 280% 100% !important;
  animation: dir-theme-ribbon-flow 2.8s linear infinite !important;
}

.directiva-bio-preview-overlay[data-directiva-theme="hud-tactical"].is-open .directiva-bio-preview-backdrop,
#directiva-zoom-overlay[data-directiva-theme="hud-tactical"].is-open .directiva-zoom-backdrop {
  background: radial-gradient(ellipse 90% 60% at 50% 20%, color-mix(in srgb, var(--dir-theme-accent, #00e5ff) 18%, transparent), transparent 55%), rgba(0, 8, 20, 0.92) !important;
}
.directiva-bio-preview-overlay[data-directiva-theme="hud-tactical"] .directiva-bio-preview-panel::before,
#directiva-zoom-overlay[data-directiva-theme="hud-tactical"] .directiva-zoom-panel::before {
  background: linear-gradient(90deg, #22d3ee, #0ea5e9, #22d3ee) !important;
  background-size: 200% 100% !important;
  animation: dir-theme-ribbon-flow 4s linear infinite !important;
}
.directiva-bio-preview-overlay[data-directiva-theme="hud-tactical"] .directiva-bio-preview-panel::after,
#directiva-zoom-overlay[data-directiva-theme="hud-tactical"] .directiva-zoom-panel::after {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.08), transparent 42%),
    repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(34, 211, 238, 0.06) 10px, rgba(34, 211, 238, 0.06) 11px) !important;
}

.directiva-bio-preview-overlay[data-directiva-theme="tatami-green"].is-open .directiva-bio-preview-backdrop,
#directiva-zoom-overlay[data-directiva-theme="tatami-green"].is-open .directiva-zoom-backdrop {
  background: radial-gradient(ellipse 100% 65% at 50% 100%, rgba(34, 197, 94, 0.2), transparent 55%), rgba(0, 12, 8, 0.9) !important;
}
.directiva-bio-preview-overlay[data-directiva-theme="tatami-green"] .directiva-bio-preview-panel::before,
#directiva-zoom-overlay[data-directiva-theme="tatami-green"] .directiva-zoom-panel::before {
  background: linear-gradient(90deg, #15803d, #22c55e, #4ade80, #15803d) !important;
  background-size: 220% 100% !important;
  animation: dir-theme-ribbon-flow 8s linear infinite !important;
}

.directiva-bio-preview-overlay[data-directiva-theme="kyorugi-clash"].is-open .directiva-bio-preview-backdrop,
#directiva-zoom-overlay[data-directiva-theme="kyorugi-clash"].is-open .directiva-zoom-backdrop {
  background: linear-gradient(135deg, rgba(0, 52, 120, 0.35) 0%, rgba(0, 0, 0, 0.88) 45%, rgba(225, 29, 46, 0.28) 100%) !important;
}
.directiva-bio-preview-overlay[data-directiva-theme="kyorugi-clash"] .directiva-bio-preview-panel::before,
#directiva-zoom-overlay[data-directiva-theme="kyorugi-clash"] .directiva-zoom-panel::before {
  background: linear-gradient(90deg, #003478 0%, #003478 42%, #e11d2e 58%, #e11d2e 100%) !important;
  animation: dir-theme-ribbon-flow 6s linear infinite !important;
}

.directiva-bio-preview-overlay[data-directiva-theme="poomsae-flow"].is-open .directiva-bio-preview-backdrop,
#directiva-zoom-overlay[data-directiva-theme="poomsae-flow"].is-open .directiva-zoom-backdrop {
  background: radial-gradient(ellipse 90% 55% at 30% 0%, rgba(129, 140, 248, 0.2), transparent 50%),
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(168, 85, 247, 0.16), transparent 55%), rgba(6, 4, 22, 0.9) !important;
}
.directiva-bio-preview-overlay[data-directiva-theme="poomsae-flow"] .directiva-bio-preview-panel::before,
#directiva-zoom-overlay[data-directiva-theme="poomsae-flow"] .directiva-zoom-panel::before {
  background: linear-gradient(90deg, #6366f1, #a855f7, #818cf8, #6366f1) !important;
  background-size: 240% 100% !important;
  animation: dir-theme-ribbon-flow 10s ease-in-out infinite !important;
}

.directiva-bio-preview-overlay[data-directiva-theme="chrome-steel"].is-open .directiva-bio-preview-backdrop,
#directiva-zoom-overlay[data-directiva-theme="chrome-steel"].is-open .directiva-zoom-backdrop {
  background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(148, 163, 184, 0.12), transparent 60%), rgba(2, 6, 12, 0.93) !important;
}
.directiva-bio-preview-overlay[data-directiva-theme="chrome-steel"] .directiva-bio-preview-panel::before,
#directiva-zoom-overlay[data-directiva-theme="chrome-steel"] .directiva-zoom-panel::before {
  background: linear-gradient(90deg, #475569, #e2e8f0, #64748b, #475569) !important;
  background-size: 200% 100% !important;
  animation: dir-theme-ribbon-flow 5s linear infinite !important;
}

.directiva-bio-preview-overlay[data-directiva-theme="ember-strike"].is-open .directiva-bio-preview-backdrop,
#directiva-zoom-overlay[data-directiva-theme="ember-strike"].is-open .directiva-zoom-backdrop {
  background: radial-gradient(ellipse 100% 70% at 50% 110%, rgba(234, 88, 12, 0.35), transparent 55%),
    radial-gradient(circle at 20% 20%, rgba(251, 191, 36, 0.12), transparent 40%), rgba(12, 4, 0, 0.9) !important;
}
.directiva-bio-preview-overlay[data-directiva-theme="ember-strike"] .directiva-bio-preview-panel::before,
#directiva-zoom-overlay[data-directiva-theme="ember-strike"] .directiva-zoom-panel::before {
  background: linear-gradient(90deg, #ea580c, #fbbf24, #f97316, #ea580c) !important;
  background-size: 220% 100% !important;
  animation: dir-theme-ribbon-flow 3s linear infinite !important;
}
.directiva-bio-preview-overlay[data-directiva-theme="ember-strike"] .directiva-bio-preview-photo-wrap::after {
  background: radial-gradient(circle at 50% 25%, rgba(251, 191, 36, 0.4), transparent 50%),
    linear-gradient(120deg, transparent 25%, rgba(249, 115, 22, 0.3) 50%, transparent 75%) !important;
  animation: dir-ember-photo-halo 2.5s ease-in-out infinite !important;
}
@keyframes dir-ember-photo-halo {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.95; }
}

.directiva-bio-preview-overlay[data-directiva-theme="velocity-track"].is-open .directiva-bio-preview-backdrop,
#directiva-zoom-overlay[data-directiva-theme="velocity-track"].is-open .directiva-zoom-backdrop {
  background: repeating-linear-gradient(-35deg, transparent, transparent 18px, rgba(255, 255, 255, 0.03) 18px, rgba(255, 255, 255, 0.03) 19px),
    radial-gradient(ellipse 100% 50% at 50% 0%, color-mix(in srgb, var(--dir-theme-accent, #00e5ff) 15%, transparent), transparent 50%), rgba(0, 0, 0, 0.9) !important;
}
.directiva-bio-preview-overlay[data-directiva-theme="velocity-track"] .directiva-bio-preview-panel::before,
#directiva-zoom-overlay[data-directiva-theme="velocity-track"] .directiva-zoom-panel::before {
  background: linear-gradient(90deg, transparent, var(--dir-theme-accent, #00e5ff), transparent) !important;
  background-size: 200% 100% !important;
  animation: dir-theme-ribbon-flow 1.2s linear infinite !important;
}

.directiva-bio-preview-overlay[data-directiva-theme="aurora-boreal"].is-open .directiva-bio-preview-backdrop,
#directiva-zoom-overlay[data-directiva-theme="aurora-boreal"].is-open .directiva-zoom-backdrop {
  background: radial-gradient(ellipse 100% 80% at 30% 0%, rgba(56, 189, 248, 0.18), transparent 50%),
    radial-gradient(ellipse 80% 60% at 80% 100%, rgba(192, 132, 246, 0.16), transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(52, 211, 153, 0.12), transparent 50%),
    rgba(2, 6, 18, 0.9) !important;
  animation: dir-aurora-backdrop 14s linear infinite;
}
.directiva-bio-preview-overlay[data-directiva-theme="aurora-boreal"] .directiva-bio-preview-panel::before,
#directiva-zoom-overlay[data-directiva-theme="aurora-boreal"] .directiva-zoom-panel::before {
  background: linear-gradient(90deg, #22d3ee, #a855f7, #34d399, #38bdf8) !important;
  background-size: 300% 100% !important;
  animation: dir-theme-ribbon-flow 9s ease-in-out infinite !important;
}

/* Franja SVG temática arriba del héroe (solo overlay abierto). */
.directiva-bio-preview-deco,
.directiva-zoom-deco-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 4px;
  min-height: 20px;
  color: var(--dir-theme-accent, var(--dir-accent, var(--c1, #00e5ff)));
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
  position: relative;
  z-index: 5;
}
.directiva-zoom-deco-row {
  margin: 2px 0 -2px;
  padding: 4px 10px 0;
}
.directiva-bio-preview-deco .dir-deco-svg,
.directiva-zoom-deco-row .dir-deco-svg {
  width: min(82px, 20vw);
  height: auto;
  max-width: 82px;
  animation: dir-deco-float 4.2s ease-in-out infinite;
}
.directiva-bio-preview-deco--neon-dojo .dir-deco-svg,
.directiva-zoom-deco-row--neon-dojo .dir-deco-svg {
  animation-duration: 2.5s;
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.45));
}
.directiva-bio-preview-deco--hud-tactical .dir-deco-svg,
.directiva-zoom-deco-row--hud-tactical .dir-deco-svg {
  animation: dir-deco-hud 2.6s linear infinite;
}
.directiva-bio-preview-deco--velocity-track .dir-deco-svg,
.directiva-zoom-deco-row--velocity-track .dir-deco-svg {
  animation: dir-deco-dash 1.05s linear infinite;
}

/* Modal zoom / biografía — tema olímpico dorado: pulso y capa extra. */
.directiva-bio-preview-overlay[data-directiva-theme="olympic-gold"].is-open .directiva-bio-preview-panel,
#directiva-zoom-overlay[data-directiva-theme="olympic-gold"].is-open .directiva-zoom-panel {
  animation: dirModalOlympicIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) both,
    dir-olympic-ring 3.2s ease-in-out 0.5s infinite,
    dirGoldAura 5s ease-in-out 0.65s infinite !important;
}
.directiva-bio-preview-overlay[data-directiva-theme="olympic-gold"] .directiva-bio-preview-panel::after,
#directiva-zoom-overlay[data-directiva-theme="olympic-gold"] .directiva-zoom-panel::after {
  opacity: 0.38 !important;
  background:
    radial-gradient(ellipse 115% 75% at 50% -15%, color-mix(in srgb, var(--dir-theme-accent, #d4af37) 48%, transparent), transparent 58%),
    repeating-linear-gradient(-8deg, transparent 0, transparent 8px, color-mix(in srgb, var(--dir-theme-accent, #d4af37) 10%, transparent) 8px, color-mix(in srgb, var(--dir-theme-accent, #d4af37) 10%, transparent) 9px),
    radial-gradient(ellipse 65% 48% at 100% 100%, color-mix(in srgb, #c9a227 16%, transparent), transparent 58%) !important;
  animation: dir-olympic-shimmer 5.5s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  #directiva-container .dir-card,
  #directiva-container .dir-card:hover,
  #directiva-container .dir-card--opening,
  #directiva-container .dir-card--grid-surface,
  #directiva-container .dir-card--grid-surface.dir-card--opening {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
  #directiva-container .dir-card__deco .dir-deco-svg {
    animation: none !important;
  }
  #directiva-container .dir-card--grid-surface .directiva-card:hover {
    transform: none !important;
  }
  .directiva-bio-preview-deco .dir-deco-svg,
  .directiva-zoom-deco-row .dir-deco-svg {
    animation: none !important;
  }
  .directiva-bio-preview-overlay[data-directiva-theme] .directiva-bio-preview-backdrop,
  #directiva-zoom-overlay[data-directiva-theme] .directiva-zoom-backdrop {
    animation: none !important;
  }
  .directiva-bio-preview-overlay[data-directiva-theme] .directiva-bio-preview-panel::before,
  #directiva-zoom-overlay[data-directiva-theme] .directiva-zoom-panel::before {
    animation: none !important;
  }
  .directiva-bio-preview-overlay[data-directiva-theme="ember-strike"] .directiva-bio-preview-photo-wrap::after {
    animation: none !important;
  }
  .directiva-bio-preview-overlay[data-directiva-theme="olympic-gold"] .directiva-bio-preview-panel::after,
  #directiva-zoom-overlay[data-directiva-theme="olympic-gold"] .directiva-zoom-panel::after {
    animation: none !important;
  }
}