@charset "UTF-8";
/* COLORS */
.bg-gold {
  background-color: rgba(255, 238, 0, 0.7);
}

/* Colores de identidad Gaming */
.text-neon-magenta {
  color: #ff0055;
  text-shadow: 0 0 10px rgba(255, 0, 85, 0.5);
}

.text-neon-cyan {
  color: #00f0ff;
}

.text-neon-green {
  color: #3afc13;
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.527);
}

.text-neon-gold {
  color: #ffee00;
  text-shadow: rgba(255, 251, 0, 0.63);
}

.text-neon-orange {
  color: #ff8c00;
  text-shadow: 0 0 10px rgba(255, 140, 0, 0.5);
}

.bg-neon-cyan {
  background-color: #00f0ff !important;
  box-shadow: 0 0 10px #00f0ff;
}

.font-orbitron {
  font-family: "Orbitron";
  font-optical-sizing: auto;
  font-style: normal;
}

/* =========================
   BARRA DE NAVEGACIÓN CYBERPUNK
========================= */
.cyber-navbar {
  background: rgba(7, 4, 15, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(160, 114, 255, 0.12);
  padding: 10px 0;
  transition: all 0.3s ease;
  z-index: 1030;
}
.cyber-navbar .navbar-brand {
  color: #fff !important;
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 1.25rem;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
  display: flex;
  align-items: center;
}
.cyber-navbar .navbar-brand .brand-bracket {
  color: #ff007f;
  text-shadow: 0 0 5px #ff007f;
  transition: all 0.3s ease;
}
.cyber-navbar .navbar-brand .brand-text {
  color: #fff;
  transition: all 0.3s ease;
}
.cyber-navbar .navbar-brand:hover .brand-bracket {
  color: #00f0ff;
  text-shadow: 0 0 8px #00f0ff;
}
.cyber-navbar .navbar-brand:hover .brand-text {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.cyber-navbar {
  /* Hamburguesa de navegación móvil cyberpunk */
}
.cyber-navbar .cyber-toggler {
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  border-radius: 4px;
  padding: 6px 10px;
  transition: all 0.3s ease;
}
.cyber-navbar .cyber-toggler:focus {
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
}
.cyber-navbar .cyber-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 240, 255, 0.85%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.cyber-navbar .navbar-nav {
  gap: 4px;
}

/* Borde inferior del navbar animado con flujo de gradiente */
.cyber-nav-border-anim {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #9146ff, #00f0ff, #ff007f, #9146ff);
  background-size: 300% 100%;
  animation: cyber-nav-flow 6s linear infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes cyber-nav-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
/* Enlaces del navbar */
.cyber-nav-link {
  position: relative;
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 8px 14px !important;
  transition: all 0.2s ease-in-out;
  border-radius: 4px;
}
.cyber-nav-link .nav-icon {
  margin-right: 4px;
  font-size: 0.95rem;
  transition: transform 0.2s ease;
  display: inline-block;
}
.cyber-nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.03);
}
.cyber-nav-link:hover .nav-icon {
  transform: scale(1.15) rotate(-5deg);
}

/* Efecto haz de luz neón inferior en hover */
.nav-hover-accent {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #00f0ff;
  box-shadow: 0 0 8px #00f0ff, 0 0 15px rgba(0, 240, 255, 0.5);
  transition: all 0.25s ease-in-out;
  transform: translateX(-50%);
  pointer-events: none;
}

.cyber-nav-link:hover .nav-hover-accent {
  width: 75%;
}

/* Botón especial estilo Twitch Live */
.twitch-special-btn {
  border: 1px solid rgba(145, 70, 255, 0.35) !important;
  background: rgba(145, 70, 255, 0.08) !important;
  color: #fff !important;
  margin-left: 6px;
  box-shadow: inset 0 0 8px rgba(145, 70, 255, 0.1);
}
.twitch-special-btn:hover {
  background: #9146ff !important;
  border-color: #9146ff !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(145, 70, 255, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.2) !important;
}

.twitch-pulse {
  position: absolute;
  inset: -1px;
  border-radius: 4px;
  border: 1px solid #9146ff;
  opacity: 0;
  pointer-events: none;
  animation: twitch-pulse-anim 2.5s infinite;
}

@keyframes twitch-pulse-anim {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    transform: scale(1.12, 1.25);
    opacity: 0;
  }
}
/* ========================================================
   RESPONSIVO: MENÚ DE HAMBURGUESA CYBERPUNK EN MÓVILES
   ======================================================== */
@media (max-width: 991.98px) {
  .cyber-navbar .navbar-collapse {
    background: rgba(10, 5, 20, 0.97) !important;
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px;
    padding: 16px 20px;
    margin-top: 10px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.95), 0 0 20px rgba(160, 114, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    /* Animación de apertura de compuerta vertical tipo terminal */
    animation: cyber-menu-slide 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    transform-origin: top center;
  }
  .cyber-navbar .navbar-nav {
    gap: 8px !important;
  }
  .cyber-nav-link {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    padding: 10px 14px !important;
    margin: 0 !important;
    border-radius: 0;
  }
  .cyber-nav-link:last-child {
    border-bottom: none;
  }
  .cyber-nav-link {
    /* En móvil adaptamos el indicador neón para que sea un borde izquierdo */
  }
  .cyber-nav-link .nav-hover-accent {
    left: 0;
    width: 3px !important;
    height: 0;
    transform: none;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    transition: all 0.2s ease;
  }
  .cyber-nav-link:hover .nav-hover-accent {
    height: 70%;
    width: 3px !important;
  }
  /* Twitch btn especial en móvil */
  .twitch-special-btn {
    margin-left: 0 !important;
    margin-top: 5px;
    border-left: 3px solid #9146ff !important;
  }
  .twitch-special-btn .twitch-pulse {
    display: none; /* Quitamos la pulsación exterior para no saturar en móvil */
  }
}
@keyframes cyber-menu-slide {
  0% {
    opacity: 0;
    transform: scaleY(0.85);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
/* =========================
   HEADER
========================= */
#header-inicio {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #07040f;
  padding-top: 8rem;
  padding-bottom: 8rem;
}
#header-inicio h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  background: linear-gradient(45deg, #ff007f, #a072ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 35px rgba(255, 0, 127, 0.2);
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
  font-family: "Orbitron";
}

/* Capa de fondo desenfocada */
.header-bg-blur {
  position: absolute;
  inset: 0;
  background-image: url("assets/images/fondoyai.jfif");
  background-size: cover;
  background-position: center;
  filter: blur(8px) brightness(0.45);
  transform: scale(1.05); /* Evita bordes blancos del blur */
  z-index: 0;
}

/* Capa de gradiente para contraste y estilo */
.header-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 4, 15, 0.95) 0%, rgba(7, 4, 15, 0.45) 50%, rgba(7, 4, 15, 0.95) 100%);
  z-index: 1;
}

/* Visor del Diario de Desarrollo (Ticker) */
.dev-log-ticker-container {
  background: rgba(13, 9, 24, 0.9);
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.dev-log-ticker-container .container {
  height: 38px;
  display: flex;
  align-items: center;
}
.dev-log-ticker-container .ticker-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255, 0, 127, 0.4);
}

.ticker-wrap {
  display: flex;
  align-items: center;
  height: 100%;
}

.ticker-content {
  display: flex;
  white-space: nowrap;
  animation: ticker-scroll 32s linear infinite;
}
.ticker-content:hover {
  animation-play-state: paused;
}

.ticker-item {
  display: inline-block;
  padding-right: 4.5rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.5px;
}
.ticker-item span {
  color: #00f0ff;
  font-weight: bold;
}

@keyframes ticker-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
/* Emote flotante animado */
.custom-header-emote {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 3px solid #00f0ff;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3), inset 0 0 15px rgba(0, 240, 255, 0.2);
  animation: emote-float 5s ease-in-out infinite;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.3s ease;
}
.custom-header-emote:hover {
  border-color: #ff007f;
  box-shadow: 0 0 25px rgba(255, 0, 127, 0.6), inset 0 0 20px rgba(255, 0, 127, 0.3);
  transform: scale(1.05) rotate(5deg);
}

@keyframes emote-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
/* Tarjeta cyberpunk de la cita */
.cyber-quote-card {
  position: relative;
  background: rgba(13, 9, 24, 0.65);
  border: 1px solid rgba(160, 114, 255, 0.15);
  border-left: 4px solid #00f0ff;
  border-radius: 4px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}
.cyber-quote-card:hover {
  border-color: rgba(160, 114, 255, 0.3);
  border-left-color: #ff007f;
  box-shadow: 0 10px 35px rgba(255, 0, 127, 0.15), 0 0 15px rgba(255, 0, 127, 0.05);
  transform: translateY(-2px);
}
.cyber-quote-card .italic-text {
  font-style: italic;
  font-size: 1.02rem;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* =========================
   MONITOR RETRO CRT HUD
========================= */
.retro-monitor-cabinet {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  border-radius: 18px;
  background: linear-gradient(135deg, #1f1a30 0%, #0f0b1a 100%);
  padding: 8px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(160, 114, 255, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.05);
}

.retro-monitor-screen-bezel {
  background: #140f24;
  border: 4px solid #231b3a;
  border-radius: 14px;
  padding: 16px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9), 0 4px 6px rgba(0, 0, 0, 0.3);
  position: relative;
}

.retro-monitor-screen {
  position: relative;
  background: #090514;
  border: 2px solid #1c152e;
  border-radius: 8px;
  height: 290px;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  /* Glitch analógico de desplazamiento horizontal */
  animation: crt-displacement 4s steps(2) infinite;
}

/* Efecto de líneas de exploración (Scanlines) CRT clásicas */
.scanlines-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%);
  background-size: 100% 4px;
}

/* Barra de interferencia de frecuencia que cruza verticalmente */
.crt-roll-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 14px;
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.15), 0 0 20px rgba(0, 240, 255, 0.05);
  z-index: 4;
  pointer-events: none;
  animation: crt-roll 7s linear infinite;
  top: 0;
  will-change: transform;
}

/* Brillo interior y curva de la pantalla de fósforo */
.screen-glow-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle at center, rgba(0, 240, 255, 0.06) 0%, rgba(0, 0, 0, 0) 75%);
  /* Animación de parpadeo de frecuencia desajustada */
  animation: crt-flicker 0.25s infinite;
  will-change: opacity;
}

.screen-content {
  position: relative;
  z-index: 2;
  height: 100%;
  overflow-y: auto;
  padding: 15px;
  /* Scrollbar estético para el monitor retro */
}
.screen-content::-webkit-scrollbar {
  width: 4px;
}
.screen-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}
.screen-content::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 2px;
}

.screen-header {
  font-size: 0.72rem;
  letter-spacing: 1px;
  border-bottom: 1px dashed rgba(0, 240, 255, 0.2);
  padding-bottom: 6px;
  text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
}

.update-log-list {
  display: flex;
  flex-direction: column;
}

.log-entry {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
  padding-top: 4px;
}
.log-entry:last-child {
  border-bottom: none;
}
.log-entry .log-tag {
  font-size: 0.7rem;
  font-weight: bold;
  text-shadow: 0 0 5px currentColor;
}
.log-entry .log-desc {
  font-size: 0.72rem;
  line-height: 1.3;
  color: #ffffff;
}

/* Parpadeo clásico del prompt */
.blink-text {
  animation: prompt-blink 1s step-end infinite;
  text-shadow: 0 0 5px rgba(255, 0, 127, 0.5);
}

@keyframes prompt-blink {
  from, to {
    color: transparent;
  }
  50% {
    color: #ff007f;
  }
}
/* Parpadeo irregular por mala sintonización/frecuencia */
@keyframes crt-flicker {
  0% {
    opacity: 0.94;
    filter: brightness(1.05);
  }
  5% {
    opacity: 0.88;
    filter: brightness(0.9);
  }
  10% {
    opacity: 0.97;
    filter: brightness(1.1);
  }
  15% {
    opacity: 0.92;
    filter: brightness(0.95);
  }
  20% {
    opacity: 0.98;
    filter: brightness(1.05);
  }
  25% {
    opacity: 0.85;
    filter: brightness(0.8);
  }
  30% {
    opacity: 0.95;
    filter: brightness(1);
  }
  35% {
    opacity: 0.98;
    filter: brightness(1.05);
  }
  40% {
    opacity: 0.9;
    filter: brightness(0.9);
  }
  45% {
    opacity: 0.96;
    filter: brightness(1);
  }
  50% {
    opacity: 0.82;
    filter: brightness(0.85);
  }
  55% {
    opacity: 0.95;
    filter: brightness(1.05);
  }
  60% {
    opacity: 0.98;
    filter: brightness(1);
  }
  65% {
    opacity: 0.92;
    filter: brightness(0.95);
  }
  70% {
    opacity: 0.97;
    filter: brightness(1.1);
  }
  75% {
    opacity: 0.87;
    filter: brightness(0.85);
  }
  80% {
    opacity: 0.98;
    filter: brightness(1);
  }
  85% {
    opacity: 0.93;
    filter: brightness(0.95);
  }
  90% {
    opacity: 0.99;
    filter: brightness(1.1);
  }
  95% {
    opacity: 0.9;
    filter: brightness(0.9);
  }
  100% {
    opacity: 0.95;
    filter: brightness(1);
  }
}
/* Barra que desciende en bucle por el roll del CRT */
@keyframes crt-roll {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(300px);
  }
}
/* Salto de frecuencia horizontal intermitente */
@keyframes crt-displacement {
  0%, 94%, 100% {
    transform: translateX(0) skewX(0deg);
    filter: hue-rotate(0deg);
  }
  95% {
    transform: translateX(2px) skewX(1deg);
    filter: hue-rotate(15deg) saturate(1.2);
  }
  96% {
    transform: translateX(-3px) skewX(-2deg);
    filter: hue-rotate(-25deg);
  }
  97% {
    transform: translateX(3px) skewX(1deg);
    filter: hue-rotate(10deg);
  }
  98% {
    transform: translateX(-1px) skewX(0deg);
    filter: hue-rotate(-5deg);
  }
  99% {
    transform: translateX(0) skewX(0deg);
  }
}
/* =========================
   BOTÓN
========================= */
.btn-purple {
  background-color: #6a0dad;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
}

.btn-purple:hover {
  background-color: #b86dfa;
  transition: all 0.3s ease;
}

/* =========================
   SECCIÓN SOBRE MÍ
========================= */
/* =========================
   SECCIÓN SOBRE MÍ — CYBERPUNK REDESIGN
========================= */
#sobre-mi {
  background-color: #07040f;
  background-image: radial-gradient(ellipse at 70% 0%, rgba(160, 114, 255, 0.12) 0%, transparent 55%), radial-gradient(ellipse at 20% 100%, rgba(0, 240, 255, 0.07) 0%, transparent 50%);
  padding: 80px 0;
}
#sobre-mi .container {
  z-index: 2;
}
#sobre-mi h2 i {
  font-size: 0.8em;
}
#sobre-mi p.lead {
  color: #ffffff;
}
#sobre-mi p:not(.lead) {
  color: #ffffff;
}
#sobre-mi h5 {
  font-size: 14px;
}

/* Capa oscura semitransparente base */
.sobre-mi-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 5, 20, 0.95) 0%, rgba(15, 8, 28, 0.9) 50%, rgba(8, 5, 18, 0.95) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Rejilla de puntos estilo blueprint tecnológico */
.sobre-mi-grid-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

/* Badges de intereses con glassmorphism oscuro */
.sobre-mi-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(4px);
  transition: all 0.25s ease;
  cursor: default;
}

.sobre-mi-badge:hover {
  background: rgba(160, 114, 255, 0.12);
  border-color: rgba(160, 114, 255, 0.4);
  color: #fff;
  box-shadow: 0 0 10px rgba(160, 114, 255, 0.15);
}

/* =========================
   MARCO NEON RGB — PERFIL
========================= */
/* Wrapper externo que contiene el anillo giratorio y la imagen */
.neon-rgb-frame-wrapper {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Anillo de color que gira alrededor del perfil */
.neon-rgb-border-spin {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ffc107, rgba(0, 0, 0, 0.3215686275));
  transform: rotate(var(--rotation, 0deg));
  filter: blur(2px);
  z-index: 0;
}

/* Al hacer hover el brillo aumenta. La rotación inversa continua se gestiona por JS */
.neon-rgb-frame-wrapper:hover .neon-rgb-border-spin {
  filter: blur(3px) brightness(1.3);
}

/* Tapa interior oscura que «recorta» el anillo dejando solo el borde */
.neon-rgb-inner {
  position: relative;
  z-index: 1;
  width: 265px;
  height: 265px;
  border-radius: 50%;
  background: #07040f;
  overflow: hidden;
  border: 4px solid #07040f;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* La imagen de perfil dentro del anillo */
.neon-profile-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: center bottom;
}

.neon-rgb-frame-wrapper:hover .neon-profile-img {
  transform: scale(1.06);
}

/* Keyframe del giro del anillo RGB */
@keyframes rgb-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* =========================
   BIBLIOTECA
========================= */
#biblioteca {
  background-color: #0b0713;
  background-image: radial-gradient(circle at 80% 20%, #1e1135 0%, #0b0713 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
}
#biblioteca .container-fluid {
  z-index: 1;
}
#biblioteca .spinner-grow-sm {
  width: 8px !important;
  height: 8px !important;
}
#biblioteca .progress-loader {
  height: 2px;
}
#biblioteca .progress-loader-bar {
  width: 78%;
}

.library-screen-frame {
  background: rgba(10, 7, 16, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.library-footer-note {
  font-size: 11px;
  line-height: 1.4;
}

.library-screen-content-col {
  min-height: 500px;
}

/* --- 🎛️ BOTONES DE CARTUCHO ENCASTRADOS --- */
.cartridge-btn.cartridge-cyan {
  --node-accent: #00f0ff;
}
.cartridge-btn.cartridge-magenta {
  --node-accent: #ff007f;
}
.cartridge-btn.cartridge-yellow {
  --node-accent: #ffc107;
}
.cartridge-btn.cartridge-purple {
  --node-accent: #ba55d3;
}
.cartridge-btn {
  width: 100%;
  background: rgba(13, 9, 24, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--node-accent);
  color: #a0a5b0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  font-family: monospace;
  font-size: 13px;
  text-align: left;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  position: relative;
}

.cartridge-btn:hover {
  background: rgba(255, 255, 255, 0.02);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}

/* Estado Activo: Cartucho introducido en el lector */
.cartridge-btn.active {
  background: rgba(30, 17, 53, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
  border-left-width: 6px;
  color: #fff;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6), -3px 0 12px var(--node-accent);
}

.cartridge-btn .btn-index {
  color: rgba(255, 255, 255, 0.25);
  margin-right: 10px;
}

.cartridge-btn.active .btn-index {
  color: var(--node-accent);
  font-weight: bold;
}

.cartridge-btn .status-icon {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.15);
}

.cartridge-btn.active .status-icon {
  color: var(--node-accent);
  animation: pulse-glow 1.5s infinite;
}

/* --- 📺 PANTALLA CONTENEDOR CENTRAL --- */
#terminal-screen-content {
  max-height: 65vh; /* 🎛️ Limita el alto al 65% de la ventana del navegador */
  overflow-y: auto; /* ↕️ Activa el scroll interno solo si el contenido se desborda */
  overflow-x: hidden; /* Evita scrolls horizontales raros */
  padding-right: 15px; /* Espacio para que la barra de scroll no pise el texto */
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

/* 🎨 Personalización del Scrollbar interno del monitor */
#terminal-screen-content::-webkit-scrollbar {
  width: 6px;
}

#terminal-screen-content::-webkit-scrollbar-track {
  background: rgba(6, 4, 10, 0.5);
  border-radius: 3px;
}

#terminal-screen-content::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3); /* Cyan discreto para el scroll del monitor */
  border-radius: 3px;
}

#terminal-screen-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.6);
}

.fade-out {
  opacity: 0;
  transform: translateY(5px);
}

.bg-dark-purple {
  background-color: #120c22;
}

@keyframes pulse-glow {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
/* --- 💾 INTERFAZ DE CARTUCHOS DE LA BIBLIOTECA --- */
.library-data-node {
  background: rgba(13, 9, 24, 0.7); /* Ultra oscuro con un tinte morado */
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--node-accent); /* Borde lateral dinámico */
  border-radius: 0 4px 4px 0;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  backdrop-filter: blur(10px);
}

.library-data-node:hover {
  background: rgba(22, 14, 38, 0.85);
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), -3px 0 15px var(--node-accent); /* Brillo reactivo al color */
  border-color: rgba(255, 255, 255, 0.12);
}

/* Nomenclatura binaria/militar superior */
.node-id {
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.3);
}

/* Tamaños de fuentes compactas estilo log de sistema */
.text-xs {
  font-size: 12.5px;
}

/* Botón estilizado como link de consola */
.btn-node-access {
  display: block;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #c0c5cd;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.library-data-node:hover .btn-node-access {
  background: var(--node-accent);
  color: #000 !important;
  font-weight: bold;
  border-color: transparent;
  box-shadow: 0 0 15px var(--node-accent);
}

/* Clases de texto con brillo Core Glow */
.text-glow-cyan {
  color: #00f0ff;
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

.text-glow-magenta {
  color: #ff007f;
  text-shadow: 0 0 8px rgba(255, 0, 127, 0.4);
}

.text-glow-warning {
  color: #ffc107;
  text-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
}

/* =========================
   TEXTO / ESTILOS AUXILIARES
========================= */
.text-purple-gradient {
  color: #6a0dad;
  letter-spacing: 1.5px;
}

/* =========================
   BADGES (BOOTSTRAP OVERRIDE)
========================= */
.badge {
  transition: all 0.3s ease !important;
}

.badge.bg-white:hover {
  background-color: #ff73ff !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease;
}

/* MIS LIBROS LEÍDOS */
#leidos {
  background-image: url(assets/images/leidos.jfif);
  background-size: cover;
  background-position: center;
}
#leidos h1 {
  color: #daff38;
  text-shadow: 2px 2px 4px rgb(255, 255, 255);
  border-bottom: #daff38 2px solid;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 1rem;
  animation: glowLine 2s ease-in-out infinite alternate;
}
#leidos .text-b {
  color: #ffffff;
  font-size: 26px;
  font-weight: bold;
  font-style: italic;
  padding-top: 1rem;
  text-align: center;
  margin: auto;
}

/* Estilos para la página de Libros Leídos */
.custom-review-card {
  border-radius: 16px;
  background-color: #ffffff;
}

.review-book-cover {
  width: 100%;
  max-height: 320px;
  -o-object-fit: cover;
     object-fit: cover; /* Hace que la imagen se adapte perfectamente sin deformarse */
  transition: transform 0.3s ease;
}

/* Efecto sutil si pasan el ratón por la tarjeta del libro */
.custom-review-card:hover .review-book-cover {
  transform: scale(1.03);
}

/* =========================
   ESTILOS PARA LA PÁGINA TBR
========================= */
#tbr {
  background-image: url(assets/images/tbr.jfif);
  background-size: cover;
  background-position: center;
  padding-top: 2rem;
  padding-bottom: 1rem;
}
#tbr h1 {
  color: #daff38;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
  border-bottom: #daff38 2px solid;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 1rem;
  animation: glowLine 2s ease-in-out infinite alternate;
}
#tbr .text-b {
  color: #ffffff;
  font-size: 26px;
  font-weight: bold;
  font-style: italic;
  padding-top: 1rem;
  text-align: center;
  margin: auto;
}
#tbr {
  /* Tarjetas del catálogo TBR */
}
#tbr .custom-tbr-card {
  border-radius: 12px;
  transition: transform 0.3s ease;
}
#tbr .custom-tbr-card:hover {
  transform: translateY(-8px); /* Flota un poquito más alto al pasar el cursor */
}
#tbr .tbr-cover {
  height: 320px;
  -o-object-fit: cover;
     object-fit: cover; /* Evita que las portadas se estiren feo */
}
#tbr {
  /* Truco para cortar textos muy largos si el título del libro ocupa 3 líneas */
}
#tbr .text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* FAVORITOS */
#favoritos h1 {
  color: #daff38;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
  border-bottom: #daff38 2px solid;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 1rem;
  animation: glowLine 2s ease-in-out infinite alternate;
}
#favoritos .text-b {
  color: #ffffff;
  font-size: 26px;
  font-weight: bold;
  font-style: italic;
  padding-top: 1rem;
  text-align: center;
  margin: auto;
}
#favoritos {
  /* ========================================================
   📚 FONDO CYBER-LIBRARY (BOOKTOK x TWITCH AESTHETIC)
   ======================================================== */
}
#favoritos .section-books-cyber {
  background-color: #06040a; /* Fondo ultra oscuro base */
  min-height: 100vh;
}
#favoritos {
  /* Contenedor absoluto del fondo */
}
#favoritos .cyber-library-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none; /* No interfiere con los clics */
}
#favoritos {
  /* 🟢 CAPA 1: Líneas de Datos Fluyentes (Efecto Matriz de Libros) */
}
#favoritos .matrix-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, rgba(160, 114, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 12px; /* Simula líneas de texto o estanterías de datos */
  animation: library-scan 20s linear infinite;
}
#favoritos {
  /* 🟣 CAPA 2: Resplandor de Estanterías de Neón */
}
#favoritos .neon-shelf-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%, rgba(0, 240, 255, 0.04) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 0, 127, 0.04) 0%, transparent 50%);
}
#favoritos {
  /* 🔮 CAPA 3: Destello de Directo de Twitch (Iluminación de Estudio de fondo) */
}
#favoritos .twitch-ambient-flare {
  position: absolute;
  top: -10%;
  right: 10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(160, 114, 255, 0.08) 0%, transparent 70%);
  filter: blur(40px);
  animation: twitch-pulse 8s ease-in-out infinite alternate;
}
#favoritos {
  /* Asegurar que el contenido real se mantenga por encima y legible */
}
#favoritos .z-2 {
  position: relative;
  z-index: 2;
}
#favoritos {
  /* ⚙️ KEYFRAMES ANIMACIONES */
  /* Movimiento lento descendente de las líneas de la biblioteca digital */
}
@keyframes library-scan {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}
#favoritos {
  /* Pulso ambiental suave estilo el aura de los focos led de streaming */
}
@keyframes twitch-pulse {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.2) translate(-20px, 20px);
    opacity: 1;
  }
}

/* Tarjetas del Top 3 */
.card-top-tres {
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid rgba(218, 255, 56, 0.2) !important; /* Brillo suave amarillo */
}

.card-top-tres:hover {
  transform: scale(1.03);
  box-shadow: 0 15px 30px rgba(106, 13, 173, 0.15) !important; /* Sombra morada elegante */
}

.cover-top-tres {
  height: 380px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Medallas de posición del Top 3 */
.badge-top-pos {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  z-index: 10;
}

/* --- 🛠️ CAROUSEL AGRESIVO 5 ESTRELLAS --- */
/* --- ➡️ TARJETAS INDIVIDUALES EN FILA HORIZONTAL --- */
.cyber-book-card {
  background: rgba(13, 9, 24, 0.6);
  border: 1px solid rgba(255, 193, 7, 0.15);
  border-radius: 4px;
  transition: all 0.3s ease;
  height: 100%;
}

/* Efecto hover interactivo al pasar el ratón */
.cyber-book-card:hover {
  border-color: #ffc107;
  background: rgba(26, 17, 43, 0.8);
  box-shadow: 0 0 15px rgba(255, 193, 7, 0.15);
}

/* El contenedor de la portada dentro del bloque */
.cyber-cover-wrap {
  width: 100%;
  max-width: 140px; /* Controla el ancho de la portada */
  aspect-ratio: 2/3; /* Mantiene la proporción clásica de libro */
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.cyber-cover-wrap .cyber-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Estilo para los puntitos de paginación de abajo */
.mySwiperBooks .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  opacity: 1;
  transition: all 0.3s ease;
}

.mySwiperBooks .swiper-pagination-bullet-active {
  background: #ffc107 !important;
  transform: scale(1.3);
  box-shadow: 0 0 8px #ffc107;
}

.bg-dark-warning {
  background-color: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

/* CITAS */
/* Cabecera independiente para Citas */
#citas {
  background-image: url(assets/images/fondoverde.jfif);
  background-size: cover;
  background-position: center;
  padding-top: 2rem;
  padding-bottom: 1rem;
}
#citas h1 {
  color: #daff38;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
  border-bottom: #daff38 2px solid;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 1rem;
  animation: glowLine 2s ease-in-out infinite alternate;
}
#citas .text-b {
  color: #000000;
  font-size: 26px;
  font-weight: bold;
  font-style: italic;
  padding-top: 1rem;
  text-align: center;
  margin: auto;
}

/* Tarjetas de Citas Estándar */
.custom-quote-card {
  border-radius: 16px;
  background-color: #ffffff;
  border-left: 4px solid #6a0dad !important; /* Detalle lila lateral */
  transition: transform 0.3s ease;
}

.custom-quote-card:hover {
  transform: translateY(-5px);
}

/* Tarjetas del Rincón Spicy 🌶️ */
.card-spicy {
  border-radius: 16px;
  background: linear-gradient(145deg, #fff5f5, #ffe3e3); /* Fondo rosado/rojo muy sutil */
  border: 1px solid rgba(220, 53, 69, 0.2) !important;
  transition: all 0.3s ease;
}

.card-spicy:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 20px rgba(220, 53, 69, 0.15) !important; /* Sombra rojiza */
  border-color: rgba(220, 53, 69, 0.5) !important;
}

/* Estilo para el botón de la pestaña Spicy cuando está seleccionado */
.nav-pills .nav-link.btn-spicy-tab.active {
  background-color: #dc3545 !important; /* Botón rojo pasión al activarse */
  color: white !important;
}

/* Estilo para los botones inactivos */
.nav-pills .nav-link {
  color: #555;
  background-color: #fff;
  border: 1px solid #ddd;
}

.nav-pills .nav-link.active {
  background-color: #6a0dad; /* Pestaña mágica en morado */
}

/* MI LIBRO */
/* ========================================================
   🚀 ESTILOS PARA LA PRESENTACIÓN DEL LIBRO
   ======================================================== */
.section-lanzamiento {
  background-color: #0b0713;
  background-image: radial-gradient(circle at 80% 20%, #1e1135 0%, #0b0713 100%);
  /* 🌟 AÑADE ESTO PARA ELIMINAR LA FRANJA BLANCA */
  min-height: 100vh;
  display: flex;
  align-items: center; /* Centra el contenido verticalmente si sobra espacio */
}

/* Efectos de luces difuminadas de fondo */
.blur-bg-effect {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  z-index: 0;
}

.blur-bg-effect.img-1 {
  top: 10%;
  left: -5%;
  background-color: #6a0dad;
}

.blur-bg-effect.img-2 {
  bottom: 10%;
  right: 5%;
  background-color: #daff38;
}

/* Texto brillante */
.text-glow {
  text-shadow: 0 0 20px rgba(218, 255, 56, 0.15);
}

.text-purple-light {
  color: #cda4fc;
}

/* --- EFECTO PORTADA 3D --- */
.book-container {
  position: relative;
  width: 90%; /* En pantallas más ajustadas, usa casi todo el ancho de su columna */
  max-width: 360px; /* Evita que se haga gigante en monitores ultra anchos */
  min-width: 280px; /* 🔥 ESTO EVITA QUE SE ENCOJA DE MÁS EN LAPTOPS DE 1024px */
  perspective: 1200px;
}

.book-cover-3d {
  width: 100%;
  height: auto; /* Mantiene la proporción perfecta */
  aspect-ratio: 2/3; /* Fuerza la proporción estándar de una portada de libro */
  border-radius: 4px 14px 14px 4px;
  box-shadow: 10px 15px 30px rgba(0, 0, 0, 0.6), 0 0 40px rgba(106, 13, 173, 0.2);
  transform: rotateY(-18deg) rotateX(6deg) rotateZ(-1deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

/* Al pasar el ratón, el libro se encara de frente de forma fluida */
.book-container:hover .book-cover-3d {
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1.04);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

.book-shadow {
  position: absolute;
  bottom: -25px;
  left: 5%;
  width: 90%;
  height: 25px;
  background: rgba(0, 0, 0, 0.6);
  filter: blur(12px);
  border-radius: 50%;
  transform: rotateX(80deg); /* Aplana la sombra en el suelo virtual */
}

/* --- BOTÓN GRADIENTE LANZAMIENTO --- */
.btn-gradient-launch {
  background: linear-gradient(135deg, #6a0dad 0%, #b342f2 100%);
  color: white;
  border: none;
  transition: all 0.3s ease;
}

.btn-gradient-launch:hover {
  background: linear-gradient(135deg, #b342f2 0%, #daff38 100%);
  color: #000;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(179, 66, 242, 0.4) !important;
}

.sinopsis-text p {
  font-size: 1.1rem;
  line-height: 1.8;
}

.fw-black {
  font-weight: 900;
}

/* SECCION ENTREVISTAS */
/* ========================================================
   🎮 SECCIÓN: ENTREVISTAS BOOKTOK (ESTILO GAMING)
   ======================================================== */
.bg-dark-gaming {
  background-color: #050308; /* Negro asfalto ultra profundo */
}

/* ========================================================
   🌊 SEPARADOR EN OLA ANIMADA INTERACTIVA
   ======================================================== */
.wave-transition-container {
  position: relative;
  width: 100%;
  background-color: #050308; /* Fondo sección entrevistas */
  line-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.wave-transition-container svg {
  position: relative;
  display: block;
  width: 200%; /* Deja espacio de sobra para el desplazamiento horizontal */
  height: 100px; /* 🚀 Subimos de 70px a 100px para que las olas tengan mucha más altura */
}

.wave-transition-container .wave-fill {
  fill: #0f0a1c; /* Fondo sección gaming */
}

/* --- ANIMACIONES CON MAYOR DESPLAZAMIENTO --- */
.wave-front {
  animation: wave-agresiva-front 8s ease-in-out infinite; /* Más rápida (8s) para que se note el flujo */
  transform-origin: center bottom;
}

.wave-back {
  animation: wave-agresiva-back 14s ease-in-out infinite;
  transform-origin: center bottom;
  opacity: 0.4;
}

/* --- SECCIÓN SIGUIENTE (EJEMPLO GAMING) --- */
.section-gaming-principal {
  background-color: #0f0a1c; /* Fondo donde muere la ola */
  margin-top: -1px; /* Truco de un píxel para evitar renderizados con líneas fantasma en Chrome */
}

/* Título de impacto con trazo exterior */
.text-stroke-gaming {
  font-weight: 900;
  letter-spacing: -1px;
}

/* Tarjeta contenedora de Autor */
.card-gaming-author {
  background-color: #0c0914;
  border-radius: 0px !important; /* Estilo angular sin bordes redondeados coquetos */
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  border: 1px solid #1a1528 !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efecto hover agresivo: borde cambia a neón y se desplaza */
.card-gaming-author:hover {
  border-color: #00f0ff !important;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.15);
}

.bg-black-card {
  background-color: #0b0813;
}

/* Forzar que el video se adapte correctamente en horizontal */
.min-h-video {
  min-height: 220px;
}

@media (min-width: 768px) {
  .min-h-video {
    min-height: 100%;
  }
}
/* Separadores internos industriales */
.border-gaming-divider {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.line-height-gaming {
  line-height: 1.6;
}

/* --- BOTÓN DE ACCIÓN RED SOCIAL GAMING --- */
.btn-gaming-action {
  background: transparent;
  color: #ff0055;
  border: 1px solid #ff0055;
  letter-spacing: 1px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.btn-gaming-action:hover {
  background-color: #ff0055;
  color: #000000;
  box-shadow: 0 0 15px rgba(255, 0, 85, 0.6);
}

/* Detalle visual: Esquina superior cortada estilo HUD cyberpunk */
.gaming-corner-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  background: linear-gradient(45deg, transparent 50%, #00f0ff 50%);
}

/* ========================================================
   🎮 SECCIÓN: GAMING ZONE STYLE
   ======================================================== */
.section-gaming-principal {
  background-color: #0f0a1c; /* Fondo morado cyberpunk profundo */
}

/* Colores de luces de la sección */
.text-glow-purple {
  text-shadow: 0 0 15px rgba(106, 13, 173, 0.6);
}

.border-purple-gaming {
  border-color: rgba(106, 13, 173, 0.2) !important;
  border-bottom: 2px dashed rgba(0, 240, 255, 0.2) !important;
}

/* Tarjetas Gaming Hub (Glassmorphism de alta calidad) */
.card-gaming-hub {
  background: rgba(22, 16, 38, 0.7); /* Fondo oscuro semi-translúcido */
  backdrop-filter: blur(8px); /* Efecto cristal */
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover Agresivo de Neón Dual */
.card-gaming-hub:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(106, 13, 173, 0.5) !important;
  box-shadow: 0 20px 40px rgba(106, 13, 173, 0.25), 0 0 30px rgba(0, 240, 255, 0.05);
}

/* Control de la imagen de fondo de los juegos */
.img-gaming-cover {
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
}

.card-gaming-hub:hover .img-gaming-cover {
  transform: scale(1.05); /* Zoom sutil al pasar el ratón */
}

/* Badge borroso gaming */
.bg-blur-gaming {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 800;
  letter-spacing: 1px;
}

/* --- BARRAS DE PROGRESO DE NIVEL (RPG STYLE) --- */
.progress-gaming {
  height: 6px !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px;
  overflow: hidden;
}

.progress-gaming-cp {
  width: 100% !important;
}

.progress-gaming-sv {
  width: 85% !important;
}

.progress-gaming-ex {
  width: 60% !important;
}

.progress-gaming-cp {
  width: 100% !important;
}

.progress-gaming-sv {
  width: 85% !important;
}

.progress-gaming-ex {
  width: 60% !important;
}

.bg-neon-magenta {
  background-color: #ff0055 !important;
  box-shadow: 0 0 10px #ff0055;
}

.max-w-md {
  max-width: 450px;
}

/* ========================================================
   💜 SECCIÓN: TWITCH LIVE BROADCAST STAGE
   ======================================================== */
.section-twitch-live {
  /* Fondo con degradado profundo que hereda del morado de arriba y viaja al de Twitch */
  background: radial-gradient(circle at 20% 80%, #20113d 0%, #0c0817 100%);
}

.text-glow-twitch {
  text-shadow: 0 0 15px rgba(160, 114, 255, 0.5);
}

.border-twitch {
  border-color: rgba(100, 65, 165, 0.3) !important;
}

/* Foco de luz trasero de neón */
.twitch-glow-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(100, 65, 165, 0.15) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* Contenedor del reproductor estilo Monitor Cyberpunk */
.twitch-player-container {
  background-color: #06040a;
  border: 1px solid rgba(160, 114, 255, 0.2);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
}

.player-hud-top {
  background-color: #0d0917;
  border-bottom: 1px solid rgba(160, 114, 255, 0.1);
}

.stream-screen-bg {
  background: linear-gradient(135deg, #0f0b1e 0%, #07050f 100%);
}

/* Tarjeta del Horario (Misiones) */
.twitch-schedule-card {
  background: rgba(13, 9, 23, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(160, 114, 255, 0.1);
}

/* Filas del calendario */
.schedule-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.3s ease;
}

.day-badge {
  background-color: #160f29;
  color: #a072ff;
  padding: 5px 10px;
  font-size: 0.8rem;
  border: 1px solid rgba(160, 114, 255, 0.2);
}

/* Destacar el día actual o un día "activo" de forma más gaming */
.schedule-item.active-day {
  border-color: #00f0ff;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.05) 0%, transparent 100%);
}

.schedule-item.active-day .day-badge {
  background-color: #00f0ff;
  color: #000;
  border-color: #00f0ff;
}

/* --- BOTÓN DE ENTRADA A TWITCH --- */
.btn-twitch-neon {
  background: transparent;
  color: #ff007f;
  font-weight: 800;
  letter-spacing: 1px;
  border: 1px solid #ff007f;
  transition: all 0.25s ease;
}
.btn-twitch-neon:hover {
  background: rgba(255, 0, 127, 0.1);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.5);
  border-color: #ff007f;
}
.btn-twitch-neon i {
  font-size: 1.1rem;
  vertical-align: middle;
  transition: transform 0.25s ease;
}
.btn-twitch-neon:hover i {
  transform: translateX(-4px); /* La flechita se mueve a la izquierda al hacer hover */
}

.btn-twitch-neon:hover {
  background-color: transparent;
  color: #00f0ff;
  border-color: #00f0ff;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
  transform: translateY(-2px);
}

/* --- ⚙️ ANIMACIONES DE PILOTO LIVE (PARPADEO) --- */
.bg-live-pulse {
  background-color: rgba(255, 0, 85, 0.1);
  border: 1px solid #ff0055;
  color: #ff0055;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #ff0055;
  border-radius: 50%;
  display: inline-block;
  animation: twitch-pulse 1.5s infinite;
}

@keyframes twitch-pulse {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.4;
    box-shadow: 0 0 10px #ff0055;
  }
  100% {
    transform: scale(0.9);
    opacity: 1;
  }
}
.animate-blink {
  animation: twitch-blink 2s infinite;
}

@keyframes twitch-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
/* ========================================================
   🎰 INFINITE EMOTE MARQUEE LOOP
   ======================================================== */
.section-emotes-vault {
  background-color: #06040a;
  background-image: linear-gradient(rgba(106, 13, 173, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(106, 13, 173, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* El riel contenedor ocultará los cortes */
.marquee-track {
  display: flex;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 100%;
  position: relative;
}

/* El bloque interno con los elementos */
.marquee-content {
  display: flex;
  flex-shrink: 0;
  gap: 1rem;
  padding: 10px 0;
  /* 🚀 LA CLAVE 1: Evitamos min-width si hay muchos items, 
     para que el contenedor siempre mida lo que midan sus hijos juntos */
  width: -moz-max-content;
  width: max-content;
}

/* --- 💥 LAS CELDAS DE LA CINTA --- */
.emote-ticker-slot {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  background: rgba(22, 16, 38, 0.6);
  border-radius: 20%;
  border: 2px solid rgb(255, 0, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 10px;
  cursor: pointer;
}

.emote-ticker-slot img {
  width: 90px;
  height: 90px;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 0.25s ease;
}

/* --- 🛑 TRUCO MAGISTRAL: PAUSAR AL HOVER --- */
.marquee-track:hover .marquee-content:hover {
  animation-play-state: paused !important; /* Detiene toda la cinta al poner el ratón */
}

/* Zoom individual al elemento enfocado */
.emote-ticker-slot:hover .badge-rarity {
  transform: scale(1.12);
  z-index: 10;
  background: rgba(106, 13, 173, 0.25);
  border-color: #00f0ff;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
}

.emote-ticker-slot:hover img {
  transform: scale(1.15) rotate(5deg);
}

/* Asignación de animaciones automáticas */
.track-left .marquee-content {
  animation: scroll-left 25s linear infinite;
}

.track-right .marquee-content {
  animation: scroll-right 25s linear infinite;
}

/* --- ⚙️ KEYFRAMES PARA EL BUCLE INFINITO RECTILÍNEO --- */
@keyframes scroll-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  } /* Se desplaza exactamente su propio ancho */
}
@keyframes scroll-right {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
/* Badges de rareza del Item */
.badge-rarity {
  font-size: 0.75rem !important;
  font-weight: 900;
  letter-spacing: 0.5px;
  border-radius: 2px !important;
  padding: 3px 6px !important;
  text-transform: uppercase;
  color: #5f5f5f;
}

.frogmote {
  display: inline-block; /* 🚀 LA CLAVE: Permite que el elemento se anime y rote */
  animation: frog-jump-glitch 3s ease-in-out infinite;
  transform-origin: bottom center; /* Hace que el salto o balanceo sea más natural desde la base */
}

/* ========================================================
   🖥️ BATTLESTATION HUD SECTION
   ======================================================== */
/* ========================================================
   🖥️ BATTLESTATION HUD CON BORDE LÁSER ANIMADO
   ======================================================== */
.setup-laser-wrapper {
  position: relative;
  overflow: hidden;
  padding: 4px; /* 🚀 El grosor del cable láser exterior */
  background: #0c0817; /* Fondo de seguridad */
  /* ⚡ EL LÁSER: Un degradado que gira detrás */
}
.setup-laser-wrapper::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent, transparent, #00f0ff, transparent, transparent, #ff007f, transparent);
  animation: laser-border-spin 6s linear infinite;
  z-index: 0;
}
.setup-laser-wrapper {
  /* 🛡️ EL ESCUDO: Tapa el centro del degradado para que solo se vea el borde */
}
.setup-laser-wrapper .section-setup-hud {
  position: relative;
  background-color: #0c0817; /* Debe tapar el fondo del wrapper */
  border-radius: 6px;
  z-index: 1; /* Se superpone al láser */
  /* Mantenemos tu fondo de cuadrícula militar intacto */
  background-image: linear-gradient(rgba(0, 240, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.015) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ⚙️ KEYFRAMES: Rotación infinita por hardware a 60 FPS */
@keyframes laser-border-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* El resto de tus estilos (.hud-line-divider, .setup-frame-container, etc.) se quedan abajo igual */
.hud-line-divider {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #00f0ff, #ff007f);
}

.section-setup-hud {
  background-color: #0c0817;
  /* Efecto sutil de cuadrícula militar en el fondo */
  background-image: linear-gradient(rgba(0, 240, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.015) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Divisor de la cabecera */
/* --- 🖼️ CONTENEDOR DE LA IMAGEN TECH --- */
.setup-frame-container {
  position: relative;
  border: 2px solid rgba(0, 240, 255, 0.4);
  border-left: 8px solid #00f0ff;
  border-right: 3px solid rgba(255, 0, 127, 0.3);
  padding: 12px;
  background: linear-gradient(135deg, rgba(0, 20, 30, 0.6) 0%, rgba(6, 4, 10, 0.5) 100%);
  border-radius: 2px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 240, 255, 0.05), 0 0 30px rgba(0, 240, 255, 0.1);
  overflow: hidden;
}
.setup-frame-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-top: 4px solid #00f0ff;
  border-left: 4px solid #00f0ff;
  box-shadow: 0 0 15px #00f0ff;
}
.setup-frame-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-bottom: 4px solid #ff007f;
  border-right: 4px solid #ff007f;
  box-shadow: 0 0 15px #ff007f;
}

.setup-img {
  width: 100%;
  height: 180px; /* 🎛️ Forzamos la misma altura en todos los pósteres */
  -o-object-fit: cover;
     object-fit: cover; /* ✂️ Recorta los bordes sobrantes de forma inteligente sin deformar */
  -o-object-position: center;
     object-position: center; /* Centra el encuadre del póster */
  display: block;
  filter: grayscale(10%) contrast(115%) brightness(0.95);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.1), inset 0 0 15px rgba(0, 0, 0, 0.4);
  transition: filter 0.4s ease;
}

.setup-frame-container:hover .setup-img {
  filter: grayscale(5%) contrast(120%) brightness(1.05);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.2), inset 0 0 15px rgba(0, 0, 0, 0.3);
}

.corner-tag {
  position: absolute;
  top: 15px;
  right: 15px;
  font-family: monospace;
  font-size: 10px;
  color: #00f0ff;
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 1px;
}

/* --- 📊 BLOQUES DE ESPECIFICACIONES --- */
.hud-spec-block {
  background: rgba(18, 12, 33, 0.7);
  border-left: 4px solid rgba(255, 255, 255, 0.1);
  padding: 16px 20px;
  border-radius: 0 6px 6px 0;
  transition: all 0.25s ease;
}
.hud-spec-block:hover {
  background: rgba(24, 16, 43, 0.9);
  transform: translateX(5px);
  /* Dependiendo de qué bloque sea, cambiamos el color del borde al pasar el ratón */
}
.hud-spec-block:hover:nth-child(1) {
  border-left-color: #00f0ff;
  box-shadow: -5px 0 15px #00f0ff;
}
.hud-spec-block:hover:nth-child(2) {
  border-left-color: #ff007f;
  box-shadow: -5px 0 15px #ff007f;
}
.hud-spec-block:hover:nth-child(3) {
  border-left-color: #ffc107;
  box-shadow: -5px 0 15px rgb(255, 193, 7);
}

/* Mini insignias oscuras para los números */
.bg-dark-cyan {
  background-color: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
}

.bg-dark-magenta {
  background-color: rgba(255, 0, 127, 0.15);
  color: #ff007f;
}

/* Formateo de tablas internas */
.custom-hud-table {
  font-size: 14px;
}
.custom-hud-table td {
  padding: 6px 4px !important;
  background: transparent !important;
}
.custom-hud-table .width-label {
  width: 100px;
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* 🖥️ ANIMACIÓN MONITOR CYBER-ARGB */
.monitor-tech {
  display: inline-block; /* Crucial para que apliquen los filtros y transformaciones */
  position: relative;
  /* Conectamos las dos animaciones a la vez: el ciclo ARGB y el parpadeo LED */
  animation: monitor-flicker 4s linear infinite, monitor-argb-glow 6s linear infinite;
}

/* ⚙️ KEYFRAMES 1: Parpadeo sutil estilo pantalla digital */
@keyframes monitor-flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.75;
    transform: scale(0.98); /* Micro-retroceso cuando parpadea */
  }
}
/* ⚙️ KEYFRAMES 2: Ciclo de iluminación LED ARGB Trasera */
@keyframes monitor-argb-glow {
  0%, 100% {
    filter: drop-shadow(0 0 4px #00f0ff) drop-shadow(0 0 12px rgba(0, 240, 255, 0.6));
  }
  33% {
    filter: drop-shadow(0 0 4px #ff007f) drop-shadow(0 0 12px rgba(255, 0, 127, 0.6));
  }
  66% {
    filter: drop-shadow(0 0 4px #ffc107) drop-shadow(0 0 12px rgba(255, 193, 7, 0.6));
  }
}
/* ⚙️ KEYFRAMES: Un efecto de salto juguetón estilo videojuego */
@keyframes frog-jump-glitch {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  20% {
    transform: translateY(2px) scale(1.1, 0.9); /* Se agacha antes de saltar */
  }
  40% {
    transform: translateY(-22px) scale(0.9, 1.1); /* ¡Salta! Se estira hacia arriba */
  }
  60% {
    transform: translateY(0) scale(1.05, 0.95); /* Cae y se choca sutilmente contra el suelo */
  }
  80% {
    transform: translateY(0) scale(1); /* Vuelve al estado normal */
  }
}
/* ========================================================
   ✨ SECCIÓN: PERSONAL DATAPADS & AUDIO DECK (FAVORITOS)
   ======================================================== */
.section-favorites {
  background: linear-gradient(180deg, #0a0515 0%, #080511 50%, #0d0819 100%);
  background-attachment: fixed;
  position: relative;
}
.section-favorites::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(0deg, rgba(0, 240, 255, 0.02) 0px, transparent 1px, transparent 2px, rgba(0, 240, 255, 0.02) 3px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.3;
}

/* Tarjeta base Datapad */
#fav-datapad-card {
  background: linear-gradient(135deg, rgba(10, 5, 25, 0.8) 0%, rgba(15, 10, 28, 0.6) 100%);
  border: 2px solid rgba(255, 0, 127, 0.2);
  border-left: 4px solid rgba(0, 240, 255, 0.3);
  border-radius: 2px;
  /* 🚨 CAMBIO CRUCIAL: De fixed a sticky */
  position: sticky;
  top: 20px; /* Margen de seguridad superior cuando empiece a flotar */
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  box-sizing: border-box !important;
  /* 📐 GARANTÍA DE CONTROL DE ALTURA */
  max-height: calc(100vh - 40px); /* Evita que el datapad sea más alto que la propia pantalla */
  display: flex;
  flex-direction: column;
}
@media (min-width: 576px) {
  #fav-datapad-card {
    align-items: stretch !important; /* Hace que la imagen y el texto midan lo mismo de alto */
  }
}
#fav-datapad-card {
  /* Ajuste para el contenedor de los pósters */
}
#fav-datapad-card .setup-frame-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06040a;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
#fav-datapad-card .setup-frame-container img {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover; /* Recorta la imagen al estilo póster sin deformarla */
  border-radius: 2px;
}

.fav-datapad-card {
  background: linear-gradient(135deg, rgba(10, 5, 25, 0.8) 0%, rgba(15, 10, 28, 0.6) 100%);
  border: 2px solid rgba(255, 0, 127, 0.2);
  border-left: 4px solid rgba(0, 240, 255, 0.3);
  border-radius: 2px;
  position: relative;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  overflow: visible;
  box-sizing: border-box !important;
}

/* 🔄 CAPA 1 (PADRE): Se encarga EXCLUSIVAMENTE de girar 360° en bucle */
#fav-datapad-card.laser::before {
  content: none;
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* Animación de rotación pura y limpia a 3 segundos (ajusta si lo quieres más rápido) */
}

/* ⚡ CAPA 2 (HIJO TRUCO): Usamos el pseudo-elemento ::after dentro de la capa que gira 
   para aplicar el escalado/latido de la música a través de la variable JS */
#fav-datapad-card.laser::after {
  content: "";
  position: absolute;
  inset: 10px; /* Margen para que las líneas sobresalgan */
  z-index: -1;
  pointer-events: none;
  /* Tus líneas láser hiper-estrechas y definidas */
  background: linear-gradient(0deg, transparent 49%, #00ffff 50%, transparent 51%), linear-gradient(90deg, transparent 49%, #ff007f 50%, transparent 51%), linear-gradient(45deg, transparent 49%, #ffff00 50%, transparent 51%), linear-gradient(-45deg, transparent 49%, #a072ff 50%, transparent 51%);
  /* Nuevas líneas secundarias para rellenar el giro y dar densidad */
  filter: blur(30px) drop-shadow(0 0 15px rgba(0, 240, 255, 0.6)) drop-shadow(0 0 5px #ffffff);
  will-change: transform;
  /* 🛠️ AQUÍ SUCEDE LA MAGIA: Recibe el tamaño directamente desde JS */
  transform: scale(var(--laser-scale, 0)) rotate(0deg);
  transform-origin: center center;
  animation: laserGiro360 4s linear infinite;
  /* Una pequeña transición de 0.05s para que el movimiento sea fluido como un muelle mecánico */
  transition: transform 0.05s cubic-bezier(0.1, 0.8, 0.3, 1);
}

/* Animación de rotación pura */
@keyframes laserGiro360 {
  0% {
    transform: scale(var(--laser-scale, 0)) rotate(0deg);
  }
  100% {
    transform: scale(var(--laser-scale, 0)) rotate(360deg);
  }
}
/* Línea de energía inferior */
.datapad-footer-line {
  height: 2px;
  width: 40px;
  margin-top: 20px;
  transition: width 0.4s ease;
}

.bg-neon-purple {
  background-color: #a072ff !important;
  box-shadow: 0 0 10px #a072ff;
}

.text-neon-purple {
  color: #a072ff;
  text-shadow: 0 0 8px rgba(160, 114, 255, 0.4);
}

/* Hover en los Datapads */
.fav-datapad-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: linear-gradient(135deg, rgba(20, 10, 35, 0.9) 0%, rgba(25, 15, 40, 0.8) 100%);
  border-color: rgba(0, 240, 255, 0.5);
  border-left: 6px solid rgba(0, 240, 255, 0.6);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(0, 240, 255, 0.08), 0 0 50px rgba(0, 240, 255, 0.2), 0 0 80px rgba(255, 0, 127, 0.1);
}
.fav-datapad-card:hover .datapad-footer-line {
  width: 100%; /* La línea de color se expande por toda la base */
  box-shadow: 0 0 15px rgba(255, 0, 127, 0.6);
}

#fav-datapad-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: linear-gradient(135deg, rgba(20, 10, 35, 0.9) 0%, rgba(25, 15, 40, 0.8) 100%);
  border-color: rgba(0, 240, 255, 0.5);
  border-left: 6px solid rgba(0, 240, 255, 0.6);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(0, 240, 255, 0.08), 0 0 50px rgba(0, 240, 255, 0.2), 0 0 80px rgba(255, 0, 127, 0.1);
}
#fav-datapad-card:hover .datapad-footer-line {
  width: 100%; /* La línea de color se expande por toda la base */
  box-shadow: 0 0 15px rgba(255, 0, 127, 0.6);
}

/* Formateo de las listas internas */
.fav-list li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  font-weight: 500;
}
.fav-list li i {
  font-size: 10px;
  margin-right: 6px;
}

/* --- 🎵 REPRODUCTOR DE AUDIO CYBERPUNK --- */
.cyber-audio-player {
  background-color: #06040a;
  border: 1px solid rgba(160, 114, 255, 0.15);
}

.audio-progress-bar-container {
  height: 7px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.audio-progress-bar {
  width: 0%;
  height: 100%;
  background-color: #a072ff;
  box-shadow: 0 0 8px #a072ff;
  transition: width 0.3s linear;
}

#player-prev-btn,
#player-next-btn {
  color: #b342f2;
  transform: scale(150%);
}
#player-prev-btn:hover,
#player-next-btn:hover {
  color: #00f0ff;
}

/* --- 🎚️ MINI ECUALIZADOR ANIMADO --- */
.mini-equalizer {
  height: 16px;
}
.mini-equalizer span {
  width: 2px;
  background-color: #a072ff;
  display: inline-block;
  animation: eq-bounce 1s ease-in-out infinite alternate;
}
.mini-equalizer span:nth-child(1) {
  height: 6px;
  animation-delay: 0.1s;
}
.mini-equalizer span:nth-child(2) {
  height: 14px;
  animation-delay: 0.4s;
}
.mini-equalizer span:nth-child(3) {
  height: 10px;
  animation-delay: 0.2s;
}
.mini-equalizer span:nth-child(4) {
  height: 4px;
  animation-delay: 0.6s;
}

/* ========================================================
   📂 ESTILOS PARA LAS PÁGINAS DE ARCHIVO INTERNAS (SERIES/PELIS)
   ======================================================== */
/* 🎬 ENLACES CON CONTRASTE POR CATEGORÍA EN FAVORITOS */
.fav-link {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none !important;
  font-weight: 500;
  position: relative;
}
.fav-link::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  transition: width 0.3s ease;
}
.fav-link:hover::before {
  width: 100%;
}

/* Colores específicos por categoría */
.fav-link-magenta {
  color: #ff0066;
  background: rgba(255, 0, 102, 0.05);
}
.fav-link-magenta::before {
  background: #ff0066;
  box-shadow: 0 0 10px rgba(255, 0, 102, 0.4);
}
.fav-link-magenta:hover {
  color: #ff33cc;
  background: rgba(255, 0, 102, 0.15);
  text-shadow: 0 0 15px rgba(255, 0, 102, 0.6);
  transform: translateX(4px);
}

.fav-link-cyan {
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.05);
}
.fav-link-cyan::before {
  background: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}
.fav-link-cyan:hover {
  color: #66ffff;
  background: rgba(0, 240, 255, 0.15);
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
  transform: translateX(4px);
}

.fav-link-warning {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.05);
}
.fav-link-warning::before {
  background: #ffc107;
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
}
.fav-link-warning:hover {
  color: #ffed4e;
  background: rgba(255, 193, 7, 0.15);
  text-shadow: 0 0 15px rgba(255, 193, 7, 0.6);
  transform: translateX(4px);
}

.fav-link-purple {
  color: #a072ff;
  background: rgba(160, 114, 255, 0.05);
}
.fav-link-purple::before {
  background: #a072ff;
  box-shadow: 0 0 10px rgba(160, 114, 255, 0.4);
}
.fav-link-purple:hover {
  color: #d4b3ff;
  background: rgba(160, 114, 255, 0.15);
  text-shadow: 0 0 15px rgba(160, 114, 255, 0.6);
  transform: translateX(4px);
}

/* Forzar que las tarjetas de catálogo horizontal se organicen de forma impecable */
/* Insignias de puntuación (Estrellas) estilo Dashboard */
.badge {
  font-family: monospace;
  letter-spacing: 0.5px;
  padding: 5px 8px !important;
  border-radius: 4px !important;
}

/* Modificamos el comportamiento del botón de retorno para que tenga coherencia */
/* ========================================================
   🎬 MOVIES CINEMA VAULT - CATÁLOGO PROFESIONAL
   ======================================================== */
.movies-cinema-section {
  background: linear-gradient(180deg, #0a0515 0%, #1a0033 30%, #0d0819 60%, #050208 100%);
  background-attachment: fixed;
  position: relative;
  color: white;
  overflow-x: hidden;
}
.movies-cinema-section::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 50%, rgba(0, 240, 255, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(160, 114, 255, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.movies-nav {
  position: relative;
  z-index: 10;
  background: linear-gradient(180deg, rgba(10, 5, 25, 0.9) 0%, rgba(8, 5, 17, 0.7) 100%);
  border-bottom: 1px solid rgba(0, 240, 255, 0.1);
  backdrop-filter: blur(8px);
}

.btn-cinema-back {
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00f0ff;
  transition: all 0.3s ease;
}
.btn-cinema-back:hover {
  border-color: #00f0ff;
  background: rgba(0, 240, 255, 0.1);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
  transform: translateX(-3px);
}

.movies-hero {
  background: linear-gradient(135deg, rgba(26, 0, 51, 0.4) 0%, rgba(0, 30, 60, 0.4) 50%, rgba(0, 10, 40, 0.4) 100%);
  position: relative;
  z-index: 2;
  border-bottom: 2px solid rgba(0, 240, 255, 0.2);
  animation: hero-fade-in 0.8s ease-out;
}
.movies-hero .hero-content {
  animation: hero-content-rise 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.movies-hero .hero-content h1 {
  font-size: clamp(2.5rem, 8vw, 4rem);
  letter-spacing: 3px;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #00f0ff 0%, #a072ff 50%, #ff007f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: text-glow-pulse 3s ease-in-out infinite;
}
.movies-hero .hero-content p {
  letter-spacing: 1.5px;
}

@keyframes hero-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hero-content-rise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes text-glow-pulse {
  0%, 100% {
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 40px rgba(0, 240, 255, 0.6), 0 0 20px rgba(160, 114, 255, 0.4);
  }
}
/* GRID DE PELÍCULAS */
.movies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 3rem;
  position: relative;
  z-index: 2;
}

.movie-card-container {
  animation: card-fade-in 0.6s ease-out forwards;
  opacity: 0;
}
.movie-card-container:nth-child(1) {
  animation-delay: 0.1s;
}
.movie-card-container:nth-child(2) {
  animation-delay: 0.2s;
}
.movie-card-container:nth-child(3) {
  animation-delay: 0.3s;
}
.movie-card-container:nth-child(4) {
  animation-delay: 0.4s;
}
.movie-card-container:nth-child(5) {
  animation-delay: 0.5s;
}
.movie-card-container:nth-child(6) {
  animation-delay: 0.6s;
}

@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.movie-card {
  background: rgba(15, 10, 30, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 240, 255, 0.03);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.movie-card:hover {
  transform: translateY(-12px);
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 60px rgba(0, 240, 255, 0.2), inset 0 0 40px rgba(0, 240, 255, 0.05);
}
.movie-card:hover .movie-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
}
.movie-card:hover .movie-poster {
  transform: scale(1.08);
  filter: brightness(0.7);
}

.movie-poster-wrapper {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a0033 0%, #000033 100%);
}

.movie-poster {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.6s ease;
  filter: contrast(1.1) brightness(0.95);
}

.movie-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 5;
}
.movie-overlay .overlay-content {
  text-align: center;
  color: white;
}
.movie-overlay .overlay-content h3 {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
}
.movie-overlay .overlay-content p {
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.movie-info {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(10, 5, 25, 0.8) 0%, rgba(5, 2, 15, 0.9) 100%);
}
.movie-info h4 {
  font-size: 1.3rem;
  letter-spacing: 1.5px;
  margin-bottom: 0.5rem;
}
.movie-info p {
  margin-bottom: 0.8rem;
  line-height: 1.6;
}

/* BADGES DE PUNTUACIÓN */
.badge-cinema {
  background: rgba(0, 240, 255, 0.15) !important;
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00f0ff !important;
  padding: 0.5rem 0.8rem !important;
  border-radius: 4px !important;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}
.badge-cinema:hover {
  background: rgba(0, 240, 255, 0.25) !important;
  border-color: #00f0ff !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
  transform: scale(1.05);
}

.text-neon-yellow {
  color: #ffee00 !important;
  text-shadow: 0 0 10px rgba(255, 238, 0, 0.5);
}

/* TAGS DE GÉNERO */
.movie-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.tag {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  border: 1px solid;
  cursor: default;
}
.tag:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px currentColor;
}

.tag-cyan {
  background: rgba(0, 240, 255, 0.1);
  color: #00f0ff;
  border-color: rgba(0, 240, 255, 0.3);
}

.tag-purple {
  background: rgba(160, 114, 255, 0.1);
  color: #a072ff;
  border-color: rgba(160, 114, 255, 0.3);
}

.tag-magenta {
  background: rgba(255, 0, 127, 0.1);
  color: #ff007f;
  border-color: rgba(255, 0, 127, 0.3);
}

.tag-yellow {
  background: rgba(255, 238, 0, 0.1);
  color: #ffee00;
  border-color: rgba(255, 238, 0, 0.3);
}

.tag-green {
  background: rgba(58, 252, 19, 0.1);
  color: #3afc13;
  border-color: rgba(58, 252, 19, 0.3);
}

.tag-dark {
  background: rgba(100, 100, 100, 0.2);
  color: #999;
  border-color: rgba(100, 100, 100, 0.4);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .movies-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .movie-card:hover {
    transform: translateY(-6px);
  }
  .movie-poster-wrapper {
    height: 300px;
  }
}
@media (max-width: 576px) {
  .movies-hero .hero-content h1 {
    font-size: 2rem;
  }
}
/* Micro-ajuste para las listas de personajes clave en el pie de la ficha */
.font-monospace strong {
  font-family: var(--bs-body-font-family); /* Devuelve la fuente normal a los nombres */
  letter-spacing: 0px;
}

@keyframes eq-bounce {
  0% {
    transform: scaleY(0.3);
  }
  100% {
    transform: scaleY(1.1);
  }
}
/* =========================
   ANIMACIONES
========================= */
@keyframes glowLine {
  from {
    opacity: 0.4;
    box-shadow: 0 0 0px #daff38;
  }
  to {
    opacity: 1;
    box-shadow: 0 3px 0px 0px #daff38;
  }
}
@keyframes linea {
  from {
    width: 20%;
  }
  to {
    width: 0%;
  }
}
/* --- ⚙️ KEYFRAMES (ANIMACIONES DE MOVIMIENTO) --- */
@keyframes wave-agresiva-front {
  0% {
    transform: translateX(0) scaleY(1);
  }
  50% {
    /* Se mueve a la mitad, se estira un pelín hacia arriba y baja 5px */
    transform: translateX(-40%) scaleY(1.1) translateY(4px);
  }
  100% {
    transform: translateX(0) scaleY(1);
  }
}
@keyframes wave-agresiva-back {
  0% {
    transform: translateX(-45%) scaleY(1.1);
  }
  50% {
    /* Movimiento cruzado: mientras una baja, esta sube y se desplaza en dirección opuesta */
    transform: translateX(-10%) scaleY(0.95) translateY(-6px);
  }
  100% {
    transform: translateX(-45%) scaleY(1.1);
  }
}
/* ========================================================
   👤 ARCHIVO DE PERSONAJES: SUBJECT TERMINAL CARDS
   ======================================================== */
.subject-profile-card {
  background: rgba(13, 9, 23, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.03);
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  /* Esquinas angulares reforzadas usando decoración CSS */
}
.subject-profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid #00f0ff;
  border-left: 2px solid #00f0ff;
  z-index: 2;
}
.subject-profile-card {
  /* Efecto Hover Global de la tarjeta */
}
.subject-profile-card:hover {
  transform: translateY(-8px);
  border-color: #00f0ff;
  box-shadow: 0 20px 40px rgba(0, 240, 255, 0.15);
}
.subject-profile-card:hover .subject-photo {
  filter: grayscale(0%) contrast(110%); /* Recupera el color e intensidad al enfocar */
  transform: scale(1.05);
}
.subject-profile-card:hover .subject-scan-line {
  animation: subject-scan-move 1.5s linear infinite; /* Activa la línea de escaneo */
}

/* Manejo y contención de las imágenes de los sujetos */
.card-img-wrapper {
  background-color: #06040a;
  border-bottom: 2px solid rgba(160, 114, 255, 0.1);
}
.card-img-wrapper .subject-photo {
  width: 100%;
  height: 320px;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(80%) contrast(95%); /* Efecto inicial apagado/antiguo */
  transition: all 0.4s ease;
}

/* Pequeñas etiquetas HUD encima del póster */
.subject-hud-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: monospace;
  font-size: 10px;
  color: #00f0ff;
  background: rgba(0, 0, 0, 0.75);
  padding: 2px 6px;
  z-index: 2;
  letter-spacing: 1px;
}

/* --- 🛑 LÍNEA LÁSER DE ESCANEO ACTIVA --- */
.subject-scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00f0ff, transparent);
  opacity: 0;
  z-index: 2;
}

@keyframes subject-scan-move {
  0% {
    top: 0%;
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
/* --- 💥 BOTÓN PREMIUM DE ACCIÓN DE FICHA --- */
.btn-subject-action {
  background: rgba(255, 255, 255, 0.02);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.3);
  font-size: 0.85rem;
  letter-spacing: 1px;
  transition: all 0.25s ease;
}
.btn-subject-action:hover {
  background: #00f0ff;
  color: #000;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
  transform: scale(1.02);
}

/* ========================================================
   🌌 FONDO TERMINAL DISTORSIONADO (HOTLINE MIAMI STYLE)
   ======================================================== */
.body-terminal-cyber {
  background-color: #05020a; /* Negro base aún más puro para que resalte el neón */
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  /* Inicializamos las variables del ratón por si JS no ha cargado */
  --mouse-x: 50%;
  --mouse-y: 50%;
  /* 🕸️ CAPA 1: La rejilla base */
}
.body-terminal-cyber::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 238, 255, 0.02) 1px, transparent 2px), linear-gradient(90deg, rgba(0, 238, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
  pointer-events: none;
}
.body-terminal-cyber {
  /* ⚡ CAPA 2: LAS LÍNEAS DE NEÓN BRILLANTES (Efecto Hotline Miami Reactivo) */
}
.body-terminal-cyber::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Combinamos líneas diagonales hiper-brillantes */
  background: linear-gradient(135deg, transparent 45%, #ff007f 46%, #ff007f 26.5%, transparent 48%), linear-gradient(45deg, transparent 50%, #00f0ff 71%, #00f0ff 71.5%, transparent 73%), radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(160, 114, 255, 0.06) 0%, transparent 35%);
  background-size: 200% 200%;
  /* 🚀 LA DISTORSIÓN: Modificamos la posición del degradado según el ratón */
  background-position: calc(var(--mouse-x) * 0.1) calc(var(--mouse-y) * 0.1);
  /* Le damos un sutil desenfoque y opacidad para que parezca luz ambiental retro */
  opacity: 0.25;
  filter: blur(4px);
  z-index: 0;
  pointer-events: none;
  transition: background-position 0.2s ease-out; /* Suaviza el movimiento del fondo */
}

/* --- 🎛️ DETALLES EXTRA DE LA INTERFAZ --- */
/* Nos aseguramos de que el contenido de la página se renderice por encima del fondo */
.container {
  position: relative;
  z-index: 1;
}

/* El divisor de cabecera en esta página lo hacemos cian/magenta */
/* Sombra de texto para el título principal */
/* Pulido de los textos de datos dentro de la tarjeta */
.card-data-content {
  background: rgba(6, 4, 10, 0.5); /* Fondo interno ligeramente más oscuro para el texto */
}
.card-data-content h3 {
  font-size: 1.35rem;
  letter-spacing: 0.5px;
}

/* El botón flotante de volver con un toque neón retro */
/* ========================================================
   🎵 CYBER AUDIO DECK TERMINAL ARCHIVE
   ======================================================== */
/* El casete o contenedor de la cinta física */
.cyber-tape-container {
  width: 240px;
  background: #110c1f;
  border: 2px solid #a072ff;
  border-radius: 6px;
  box-shadow: 0 0 15px rgba(160, 114, 255, 0.2);
}
.cyber-tape-container::before {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

/* Animación de rotación lenta para los engranajes de la cinta */
.animate-spin-slow {
  display: inline-block;
  animation: spin 8s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
/* --- 🎰 CARTUCHOS DE PLAYLIST (COLUMNA DERECHA) --- */
.playlist-cartridge {
  background: rgba(18, 12, 33, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-left: 4px solid rgba(255, 255, 255, 0.1);
  transition: all 0.25s ease;
  cursor: pointer;
}
.playlist-cartridge .cartridge-icon {
  width: 42px;
  height: 42px;
  background: #06040a;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.playlist-cartridge .cartridge-icon i {
  color: #6c757d;
  transition: color 0.2s;
}
.playlist-cartridge .accordion-arrow {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: #6c757d;
}
.playlist-cartridge {
  /* Animación de la flecha cuando Bootstrap abre el colapsable */
}
.playlist-cartridge[aria-expanded=true] .accordion-arrow {
  transform: rotate(180deg);
  color: var(--cartridge-color);
}
.playlist-cartridge:hover {
  background: rgba(26, 17, 48, 0.8);
  transform: translateX(6px);
  border-left-color: #a072ff;
  box-shadow: -5px 0 15px rgba(160, 114, 255, 0.15);
}
.playlist-cartridge:hover .cartridge-icon {
  transform: scale(120%);
  box-shadow: 0 0 10px;
  border-color: #a072ff;
  color: #00f0ff;
}
.playlist-cartridge:hover .cartridge-icon i {
  color: #00f0ff;
}

/* Contenedor del Avatar del Artista */
.cartridge-cyber-avatar {
  width: 45px;
  height: 45px;
  min-width: 45px; /* Evita que Bootstrap lo aplaste en pantallas densas */
  border: 1px solid var(--cartridge-color); /* Brilla con el color del grupo */
  box-shadow: 0 0 8px var(--cartridge-color);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px; /* Un toque sutil, tirando a rectangular/industrial */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
}

/* Imagen real dentro del contenedor */
.cartridge-avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* Se adapta sin deformarse */
  filter: contrast(1.1) brightness(0.9); /* Ajuste estético para que empaste con el modo oscuro */
  transition: all 0.3s ease;
}

/* Efecto Hover: Cuando pasas el ratón por el cartucho, la foto se ilumina */
.playlist-cartridge:hover .cartridge-cyber-avatar {
  box-shadow: 0 0 15px var(--cartridge-color);
  transform: scale(1.05);
}

.playlist-cartridge:hover .cartridge-avatar-img {
  filter: contrast(1.2) brightness(1.1);
}

/* Si es el icono de respaldo (ej. el chip), que brille con el color del artista */
.cartridge-cyber-avatar i {
  color: var(--cartridge-color);
  font-size: 1.4rem;
  text-shadow: 0 0 5px var(--cartridge-color);
}

/* Estilo para el track que está sonando actualmente */
.active-track {
  background: rgba(30, 19, 56, 0.8) !important;
  border-left-color: #a072ff !important;
  border-color: rgba(160, 114, 255, 0.2);
}

/* ========================================================
   🎰 ACORDEÓN DE CARTUCHOS CYBERPUNK
   ======================================================== */
.playlist-cartridge-wrapper {
  background: rgba(18, 12, 33, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-left: 4px solid #6c757d;
  transition: all 0.25s ease;
  /* Si la cabecera está activa, coloreamos el borde izquierdo del bloque entero */
}
.playlist-cartridge-wrapper:has(.active-track) {
  border-left-color: var(--cartridge-color) !important;
  box-shadow: -5px 0 15px calc(var(--cartridge-color) * 0.15);
}

/* Modificamos la cabecera del cartucho para que maneje la rotación de la flecha */
/* El contenedor interno desplegado de las canciones */
.cartridge-content {
  background: rgba(6, 4, 10, 0.6);
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

/* Items individuales de canciones */
.song-item {
  padding: 8px 12px;
  font-size: 0.8rem;
  color: #a5a1b2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 2px;
}
.song-item .song-index {
  color: #785eda;
  margin-right: 8px;
}
.song-item .song-duration {
  color: #785eda;
  text-shadow: 0 0 10px #00f0ff;
  font-size: 0.75rem;
}
.song-item:hover {
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  padding-left: 18px; /* Microdesplazamiento mecánico hacia la derecha */
}
.song-item:hover .song-index {
  color: var(--cartridge-color);
}
.song-item {
  /* Canción activa reproduciéndose */
}
.song-item.active-song {
  background: rgba(160, 114, 255, 0.05);
  color: #fff;
  border-left: 2px solid var(--cartridge-color);
}
.song-item.active-song .song-index {
  color: var(--cartridge-color);
  text-shadow: 0 0 8px var(--cartridge-color);
}

/* ========================================================
   🎛️ CONTENEDOR FÍSICO DEL SLIDER (El carril de juego)
   ======================================================== */
#cyber-volume-container {
  width: 140px; /* Ancho total de la barra de volumen */
  height: 24px; /* Altura de la zona interactiva para el ratón */
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center; /* Centra los elementos verticalmente */
  background: rgba(0, 0, 0, 0.2); /* Fondo sutil para ver la zona de click */
  border-radius: 4px;
  padding: 0 6px;
}

/* El carril de fondo (La vía muerta) */
#cyber-volume-bg {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* El progreso del volumen activo (Línea de Neón) */
#cyber-volume-bar {
  position: absolute;
  left: 6px;
  width: 50%; /* Empieza al 50% de volumen */
  height: 4px;
  background: #a072ff; /* Morado neón por defecto */
  box-shadow: 0 0 8px #a072ff;
  border-radius: 2px;
  pointer-events: none; /* Deja que los clicks traspasen al contenedor */
  transition: background 0.15s, box-shadow 0.15s;
}

/* El potenciómetro / Tirador mecánico */
#cyber-volume-thumb {
  position: absolute;
  width: 10px;
  height: 14px; /* Un rectangulito vertical tipo mesa de mezclas */
  background: #fff;
  border: 1px solid #a072ff;
  box-shadow: 0 0 8px #a072ff;
  border-radius: 1px;
  left: calc(50% - 5px); /* Sincronizado con el 50% inicial */
  pointer-events: none; /* Traspasa eventos */
  transition: transform 0.1s, background-color 0.15s;
}

/* ========================================================
   ⚡ EFECTOS EN TIEMPO REAL AL PASAR EL RATÓN (HOVER)
   ======================================================== */
#cyber-volume-container:hover #cyber-volume-bar {
  background: #ff007f; /* Cambia a rosa radiactivo al interactuar */
  box-shadow: 0 0 12px #ff007f;
}

#cyber-volume-container:hover #cyber-volume-thumb {
  border-color: #ff007f;
  box-shadow: 0 0 12px #ff007f;
  transform: scaleY(1.15); /* Se estira un pelo verticalmente, muy estético */
}

.cyber-analyzer-container {
  height: 60px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(160, 114, 255, 0.1);
  border-radius: 4px;
}

.cyber-bar {
  width: 4px; /* Barras finitas e industriales */
  background: #a072ff;
  box-shadow: 0 0 8px #a072ff;
  border-radius: 2px 2px 0 0;
  transition: background 0.3s ease; /* Para que el cambio de color sea fluido */
  height: 10%; /* Altura inicial en standby */
}

/* ========================================================
   🎵 SECCIÓN: FOOTER CYBERPUNK CON CONECTORES NEÓN
   ======================================================== */
.cyber-footer {
  background-color: #07040f;
  background-image: radial-gradient(ellipse at 50% 100%, rgba(145, 70, 255, 0.08) 0%, transparent 60%);
  border-top: 1px solid rgba(160, 114, 255, 0.15);
  position: relative;
  z-index: 2;
  padding: 40px 0;
}
.cyber-footer h2 {
  font-size: 1.6rem;
  letter-spacing: 1px;
  font-weight: 700;
  /* Animación de latido neón */
  animation: footer-glow-latido 3s ease-in-out infinite alternate;
}

.cyber-footer-border-anim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ff007f, #9146ff, #00f0ff, #ff007f);
  background-size: 300% 100%;
  animation: cyber-nav-flow 6s linear infinite reverse; /* Sentido contrario al del header */
  z-index: 2;
  pointer-events: none;
}

.footer-grid-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(145, 70, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(145, 70, 255, 0.015) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 100%, black 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 100%, black 50%, transparent 100%);
}

/* Conectores circulares de redes sociales */
.social-connector {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(13, 9, 24, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 1.45rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  z-index: 2;
}
.social-connector .connector-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: -1;
  border: 1.5px solid transparent;
}
.social-connector i {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 2;
}
.social-connector {
  /* Conector Twitch */
}
.social-connector.connector-twitch:hover {
  color: #fff !important;
  border-color: #9146ff;
  box-shadow: 0 0 15px rgba(145, 70, 255, 0.45), inset 0 0 15px rgba(145, 70, 255, 0.3);
}
.social-connector.connector-twitch:hover .connector-glow {
  opacity: 1;
  border-color: #9146ff;
  background: rgba(145, 70, 255, 0.12);
}
.social-connector {
  /* Conector TikTok */
}
.social-connector.connector-tiktok:hover {
  color: #fff !important;
  border-color: #00f0ff;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.45), inset 0 0 15px rgba(0, 240, 255, 0.3);
}
.social-connector.connector-tiktok:hover .connector-glow {
  opacity: 1;
  border-color: #00f0ff;
  background: rgba(0, 240, 255, 0.12);
}
.social-connector {
  /* Conector Discord */
}
.social-connector.connector-discord:hover {
  color: #fff !important;
  border-color: #5865f2;
  box-shadow: 0 0 15px rgba(88, 101, 242, 0.45), inset 0 0 15px rgba(88, 101, 242, 0.3);
}
.social-connector.connector-discord:hover .connector-glow {
  opacity: 1;
  border-color: #5865f2;
  background: rgba(88, 101, 242, 0.12);
}
.social-connector {
  /* Rotación y elevación sutil del conector en hover */
}
.social-connector:hover {
  transform: translateY(-4px);
}
.social-connector:hover i {
  transform: scale(1.15) rotate(8deg);
}

.footer-credits {
  letter-spacing: 0.5px;
  opacity: 0.75;
  line-height: 1.6;
}
.footer-credits span {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
.footer-credits .dev-credits {
  display: inline-block;
  margin-top: 4px;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.45);
  animation: dev-text-glow 2s ease-in-out infinite alternate;
}

@keyframes footer-glow-latido {
  0% {
    text-shadow: 0 0 10px rgba(255, 0, 127, 0.45), 0 0 2px rgba(255, 0, 127, 0.2);
  }
  100% {
    text-shadow: 0 0 20px rgba(255, 0, 127, 0.9), 0 0 8px rgba(255, 0, 127, 0.5);
  }
}
@keyframes dev-text-glow {
  0% {
    opacity: 0.85;
    text-shadow: 0 0 4px rgba(0, 240, 255, 0.3);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 12px rgba(0, 240, 255, 0.85);
  }
}
/* --- 🖲️ MODAL TAB BUTTONS (CYBERPUNK STYLE) --- */
.modal-tab-btn {
  background: rgba(13, 9, 24, 0.6) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: "Orbitron", monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 8px 20px !important;
  border-radius: 4px !important;
  transition: all 0.25s ease-in-out !important;
  margin-right: 12px;
}

/* Cyan Tab (Book) */
#book-tab-btn {
  border: 1px solid rgba(0, 240, 255, 0.2) !important;
}

#book-tab-btn:hover {
  background: rgba(0, 240, 255, 0.05) !important;
  border-color: rgba(0, 240, 255, 0.5) !important;
  color: #00f0ff !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2) !important;
}

#book-tab-btn.active {
  background: #00f0ff !important;
  border-color: #00f0ff !important;
  color: #05020a !important;
  font-weight: bold;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.45) !important;
}

/* Magenta Tab (Quote) */
#quote-tab-btn {
  border: 1px solid rgba(255, 0, 127, 0.2) !important;
}

#quote-tab-btn:hover {
  background: rgba(255, 0, 127, 0.05) !important;
  border-color: rgba(255, 0, 127, 0.5) !important;
  color: #ff007f !important;
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.2) !important;
}

#quote-tab-btn.active {
  background: #ff007f !important;
  border-color: #ff007f !important;
  color: #05020a !important;
  font-weight: bold;
  box-shadow: 0 0 15px rgba(255, 0, 127, 0.45) !important;
}

/* ========================================================
   🃏 TARJETAS FLIP / FICHA TÉCNICA (PERSONAJES)
   ======================================================== */
.flip-card {
  perspective: 1000px;
  height: 540px !important;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 0.75rem;
  overflow: hidden;
}

.flip-card-front {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flip-card-back {
  transform: rotateY(180deg);
  background: rgba(8, 5, 18, 0.96);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
}

.flip-card-back h3,
.flip-card-back h4 {
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

.flip-card-back p {
  color: #ddd;
  line-height: 1.7;
}

.flip-card .card-data-content {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* --- 🟢 ACTIVE STATE FOR INTRO MATRIX OVERLAY --- */
body.matrix-active {
  overflow: hidden !important;
  height: 100vh !important;
  width: 100vw !important;
}
body.matrix-active > *:not(#matrix-landing-overlay) {
  display: none !important;
}

/* --- 🟢 OVERLAY DE MATRIX --- */
#matrix-hack-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999; /* Por encima de absolutamente todo el index */
  background: #000;
  transition: opacity 0.4s ease;
  display: none; /* Se activa por JS */
}

/* Forzar que el canvas ocupe el espacio estricto */
#matrix-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Texto decorativo HUD */
.matrix-hud-text {
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px #00ff41;
  pointer-events: none;
}

/* Letrero central del minijuego */
.matrix-center-instruction {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.85);
  padding: 30px;
  border: 1px solid rgba(0, 255, 65, 0.3);
  box-shadow: 0 0 30px rgba(0, 255, 65, 0.1);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 📑 CAJA DEL FORMULARIO SEGURO */
#matrix-secure-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 3;
  width: 100%;
  max-width: 420px;
  animation: matrixGlitchIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.cyber-form-box {
  background: #020202;
  box-shadow: 0 0 40px rgba(0, 255, 65, 0.2), inset 0 0 20px rgba(0, 255, 65, 0.05);
}

/* Inputs estilo fósforo verde */
.matrix-input {
  background: #050505;
  border: 1px solid rgba(0, 255, 65, 0.3);
  color: #00ff41;
  font-family: monospace;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
}

.matrix-input:focus {
  border-color: #00ff41;
  box-shadow: 0 0 12px rgba(0, 255, 65, 0.3);
  background: #080808;
}

/* Botón de envío inyectado */
.btn-matrix-submit {
  background: transparent;
  border: 1px solid #00ff41;
  color: #00ff41;
  padding: 10px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-matrix-submit:hover {
  background: #00ff41;
  color: #000 !important;
  font-weight: bold;
  box-shadow: 0 0 20px #00ff41;
}

/* Animación Glitch de entrada */
@keyframes matrixGlitchIn {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.blink {
  animation: matrixBlink 1.5s infinite;
}

@keyframes matrixBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
/* Custom dynamic button-gaming-action classes */
.btn-gaming-action-cyan {
  color: #00f0ff !important;
  border: 1px solid #00f0ff !important;
}

.btn-gaming-action-cyan:hover {
  background-color: #00f0ff !important;
  color: #000 !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.6) !important;
}

.btn-gaming-action-magenta {
  color: #ff0055 !important;
  border: 1px solid #ff0055 !important;
}

.btn-gaming-action-magenta:hover {
  background-color: #ff0055 !important;
  color: #000 !important;
  box-shadow: 0 0 15px rgba(255, 0, 85, 0.6) !important;
}

.btn-gaming-action-green {
  color: #3afc13 !important;
  border: 1px solid #3afc13 !important;
}

.btn-gaming-action-green:hover {
  background-color: #3afc13 !important;
  color: #000 !important;
  box-shadow: 0 0 15px rgba(58, 252, 19, 0.6) !important;
}

.btn-gaming-action-yellow {
  color: #ffee00 !important;
  border: 1px solid #ffee00 !important;
}

.btn-gaming-action-yellow:hover {
  background-color: #ffee00 !important;
  color: #000 !important;
  box-shadow: 0 0 15px rgba(255, 238, 0, 0.6) !important;
}

.btn-gaming-action-purple {
  color: #a072ff !important;
  border: 1px solid #a072ff !important;
}

.btn-gaming-action-purple:hover {
  background-color: #a072ff !important;
  color: #000 !important;
  box-shadow: 0 0 15px rgba(160, 114, 255, 0.6) !important;
}

.btn-gaming-action-orange {
  color: #ff8c00 !important;
  border: 1px solid #ff8c00 !important;
}

.btn-gaming-action-orange:hover {
  background-color: #ff8c00 !important;
  color: #000 !important;
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.6) !important;
}

/* ========================================================
   📡 SECCIÓN: CONEXIONES DE RED (REDES SOCIALES)
   ======================================================== */
.social-band {
  transition: all 0.4s ease-in-out;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  min-height: 550px;
}

.social-band:last-child {
  border-right: none;
}

.band-instagram {
  background: linear-gradient(180deg, rgba(20, 10, 30, 0.95) 0%, rgba(65, 10, 48, 0.95) 50%, rgba(131, 12, 85, 0.95) 100%);
  border-top: 3px solid #ff007f;
}

.band-instagram::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 10% 20%, rgba(220, 60, 10, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.band-tiktok {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.98) 0%, rgba(20, 20, 20, 0.98) 100%);
  border-top: 3px solid #00f0ff;
}

.band-tiktok::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 90% 80%, rgba(255, 0, 127, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.band-wattpad {
  background: linear-gradient(180deg, rgba(25, 10, 0, 0.95) 0%, rgba(64, 25, 0, 0.95) 50%, rgba(120, 40, 0, 0.95) 100%);
  border-top: 3px solid #ff6b00;
}

.band-wattpad::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 10%, rgba(255, 107, 0, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

#redes-sociales {
  background-color: #0c0817;
  background-image: linear-gradient(rgba(0, 240, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.015) 1px, transparent 1px);
  background-size: 40px 40px;
  position: relative;
}
#redes-sociales::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(circle at center, rgba(255, 0, 127, 0.1) 0%, rgba(0, 240, 255, 0.05) 50%, transparent 80%);
  z-index: 0;
  pointer-events: none;
}
#redes-sociales .container {
  position: relative;
  z-index: 1;
}

/* Social Feed Cards */
.social-feed-card {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
  height: 380px;
  display: flex;
  flex-direction: column;
}
.social-feed-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  overflow: hidden;
}
.social-feed-card {
  color: #ffffff !important;
}
.social-feed-card p, .social-feed-card span, .social-feed-card h6, .social-feed-card small, .social-feed-card div {
  color: #ffffff !important;
}
.social-feed-card i.text-neon-magenta {
  color: #ff007f !important;
}
.social-feed-card i.text-neon-cyan {
  color: #00f0ff !important;
}
.social-feed-card i.text-warning {
  color: #ffc107 !important;
}

.social-feed-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.band-instagram .social-feed-card:hover {
  border-color: rgba(255, 0, 127, 0.5);
  box-shadow: 0 10px 25px rgba(255, 0, 127, 0.15);
}

.band-tiktok .social-feed-card:hover {
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: 0 10px 25px rgba(0, 240, 255, 0.15);
}

.band-wattpad .social-feed-card:hover {
  border-color: rgba(255, 107, 0, 0.5);
  box-shadow: 0 10px 25px rgba(255, 107, 0, 0.15);
}

.social-img-wrapper {
  width: 100%;
  height: 200px; /* Fixed height for image wrapper */
  overflow: hidden;
  position: relative;
  background-color: #111;
}

.social-img-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
}

.social-feed-card:hover .social-img-wrapper img {
  transform: scale(1.05);
}

/* Ensure texts are bright white for good readability */
.social-band .text-white-50:not(.pulse-indicator):not(.title-tiktok),
.social-band h6 {
  color: #ffffff !important;
}

/* Instagram title gradient & glow keyframes */
@keyframes instagram-glow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(255, 0, 127, 0.5), 0 0 10px rgba(255, 0, 127, 0.3);
  }
  50% {
    text-shadow: 0 0 15px rgba(255, 107, 0, 0.8), 0 0 25px rgba(255, 0, 127, 0.6);
  }
}
.title-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: instagram-glow 3s infinite;
  font-weight: 900;
  display: inline-block;
}

/* TikTok split color text-shadow glitch keyframes */
@keyframes tiktok-glitch {
  0%, 100% {
    text-shadow: -2px 0 #00f0ff, 2px 0 #ff007f;
  }
  50% {
    text-shadow: -3px -1px #00f0ff, 3px 1px #ff007f;
  }
  95% {
    text-shadow: -2px 0 #00f0ff, 2px 0 #ff007f;
  }
  97% {
    text-shadow: -4px 2px #00f0ff, 4px -2px #ff007f;
    transform: skewX(-2deg);
  }
  99% {
    text-shadow: 2px -3px #00f0ff, -2px 3px #ff007f;
    transform: skewX(2deg);
  }
}
.title-tiktok {
  color: #ffffff;
  animation: tiktok-glitch 2s infinite;
  font-weight: 900;
  display: inline-block;
}

/* Wattpad flicker neon keyframes */
@keyframes wattpad-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 0 0 4px #ff6b00, 0 0 10px #ff6b00, 0 0 18px rgba(255, 107, 0, 0.6);
    color: #ff6b00;
  }
  20%, 24%, 55% {
    text-shadow: none;
    color: #cc5200;
    opacity: 0.8;
  }
}
.title-wattpad {
  animation: wattpad-flicker 4s infinite;
  font-weight: 900;
  display: inline-block;
}

/* Indicators */
.pulse-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #3afc13;
  display: inline-block;
  box-shadow: 0 0 8px #3afc13;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(58, 252, 19, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(58, 252, 19, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(58, 252, 19, 0);
  }
}
/* ===========================================
   🏷️ BADGE "¡NUEVO POST!" - Bouncy animation
   =========================================== */
@keyframes badge-bounce {
  0%, 100% {
    transform: translateY(0) rotate(-3deg) scale(1);
  }
  25% {
    transform: translateY(-10px) rotate(2deg) scale(1.05);
  }
  50% {
    transform: translateY(-4px) rotate(-1deg) scale(1.02);
  }
  75% {
    transform: translateY(-7px) rotate(3deg) scale(1.04);
  }
}
@keyframes badge-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 0, 127, 0.6), 0 0 15px rgba(0, 240, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.9), 0 0 30px rgba(0, 240, 255, 0.5), 0 0 45px rgba(255, 107, 0, 0.3);
  }
}
.badge-nuevo-post {
  position: absolute;
  top: -10px;
  right: -6px;
  background: linear-gradient(135deg, #ff007f, #ff6b00, #00f0ff);
  background-size: 200% 200%;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 4px;
  z-index: 40;
  animation: badge-bounce 2s ease-in-out infinite, badge-glow-pulse 3s ease-in-out infinite;
  text-transform: uppercase;
  font-family: "Orbitron", "Courier New", monospace;
  border: 1px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
  white-space: nowrap;
}
.badge-nuevo-post i {
  font-size: 0.55rem;
}

/* Slightly different position on smaller screens */
@media (max-width: 768px) {
  .badge-nuevo-post {
    top: -8px;
    right: -4px;
    font-size: 0.55rem;
    padding: 4px 8px;
  }
}
/* ===========================================
   📦 SOCIAL EMBED WRAPPER
   =========================================== */
.social-embed-wrapper {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  overflow: visible;
  isolation: isolate;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.social-embed-wrapper:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.social-embed-wrapper .embed-content {
  position: relative;
  z-index: 1;
}

.band-instagram .social-embed-wrapper:hover {
  border-color: rgba(255, 0, 127, 0.4);
  box-shadow: 0 4px 20px rgba(255, 0, 127, 0.1);
}

.band-tiktok .social-embed-wrapper:hover {
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.1);
}

.band-wattpad .social-embed-wrapper:hover {
  border-color: rgba(255, 107, 0, 0.4);
  box-shadow: 0 4px 20px rgba(255, 107, 0, 0.1);
}

/* Constrain embeds to fit the column */
.embed-content {
  max-width: 100%;
  overflow: hidden;
}
.embed-content iframe {
  max-width: 100% !important;
  border: none;
}
.embed-content blockquote {
  max-width: 100% !important;
  margin: 0 auto;
}

/* ===========================================
   🔗 SOCIAL URL CARD
   =========================================== */
.social-url-card {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  transition: all 0.3s ease;
  color: #ffffff;
}
.social-url-card:hover {
  background: rgba(0, 240, 255, 0.05);
  border-color: rgba(0, 240, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.social-url-card i {
  color: #00f0ff;
}
.social-url-card span {
  color: #ffffff !important;
}
.social-url-card .text-xs {
  color: rgba(255, 255, 255, 0.6) !important;
}

.url-card-instagram .social-url-card:hover,
.social-url-card.url-card-instagram:hover {
  border-color: rgba(255, 0, 127, 0.4);
  background: rgba(255, 0, 127, 0.05);
}

.url-card-tiktok .social-url-card:hover,
.social-url-card.url-card-tiktok:hover {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.05);
}

.url-card-wattpad .social-url-card:hover,
.social-url-card.url-card-wattpad:hover {
  border-color: rgba(255, 107, 0, 0.4);
  background: rgba(255, 107, 0, 0.05);
}/*# sourceMappingURL=style.css.map */