body {
  background-color: #0b1326;
  color: #dae2fd;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Fondo ambiental */
.ambient-bg {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1;
  background:
    radial-gradient(circle at 15% 50%, rgba(183,109,255,.15) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(247,81,161,.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(0,185,84,.1) 0%, transparent 40%);
  filter: blur(40px);
}

/* Tarjetas */
.glass-card-unlocked {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid #4ae176;
  box-shadow: inset 0 0 20px rgba(74,225,118,.2);
  transition: box-shadow .5s ease, border-color .5s ease, transform .3s ease;
}
.glass-card-unlocked:hover { transform: scale(1.05); }

.glass-card-next {
  border-color: #ddb7ff;
  box-shadow: inset 0 0 24px rgba(221,183,255,.35), 0 0 28px rgba(221,183,255,.45);
  animation: pulse-glow 2.4s cubic-bezier(0.4,0,0.6,1) infinite;
}

.glass-card-locked {
  background: rgba(23,31,51,.6);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border: 1px solid #4d4354;
  position: relative;
  transition: filter .6s ease;
}
.glass-card-locked::after {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.4);
  border-radius: inherit; pointer-events: none;
}
.locked-content-wrapper { filter: grayscale(100%) opacity(.5); position: relative; z-index: 1; }
.locked-icon-overlay {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%,-50%);
  z-index: 10; color: #fff; font-size: 2.6rem; text-shadow: 0 0 10px rgba(0,0,0,.8);
}
.unlock-countdown {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 11; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: .05em; color: #ffb0cd; white-space: nowrap;
  text-shadow: 0 0 8px rgba(0,0,0,.9);
}

/* Texto oculto de un reto bloqueado */
.reto-oculto { filter: blur(6px); user-select: none; pointer-events: none; }

/* Círculos de evento con imagen dentro */
/* Por defecto BLOQUEADO (así no hay flash de imagen nítida al cargar) */
.circle { position: relative; overflow: hidden; border: 1px solid #4d4354; transition: box-shadow .5s ease, border-color .5s ease, transform .3s ease; }
.circle:hover { transform: scale(1.04); }
.circle .img-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(14px) grayscale(100%) brightness(.55); transform: scale(1.15);
  transition: filter .6s ease, transform .6s ease;
}
.circle .tint { position: absolute; inset: 0; background: rgba(0,0,0,.45); transition: background .6s ease; }
.circle.unlocked { border: 2px solid #4ae176; box-shadow: 0 0 22px rgba(74,225,118,.45), inset 0 0 22px rgba(74,225,118,.15); }
.circle.unlocked .img-bg { filter: none; transform: none; }
.circle.unlocked .tint { background: transparent; }
.circle.next { border-color: #ddb7ff; box-shadow: 0 0 30px rgba(221,183,255,.55), inset 0 0 22px rgba(221,183,255,.2); animation: pulse-glow 2.4s cubic-bezier(0.4,0,0.6,1) infinite; }

.btn-primary {
  background-color: #ddb7ff; color: #490080; font-family: 'Anton', sans-serif;
  text-transform: uppercase; transition: all .3s ease; box-shadow: 0 0 15px rgba(221,183,255,.4);
  cursor: pointer;
}
.btn-primary:hover, .btn-primary:active { box-shadow: 0 0 25px rgba(221,183,255,.8); transform: scale(1.02); }

/* Bordes neón (galería) */
.neon-border-secondary { border: 1px solid #4ae176; box-shadow: 0 0 10px rgba(74,225,118,.4), inset 0 0 8px rgba(74,225,118,.25); }
.neon-border-primary   { border: 1px solid #ddb7ff; box-shadow: 0 0 10px rgba(221,183,255,.4), inset 0 0 8px rgba(221,183,255,.25); }
.neon-border-tertiary  { border: 1px solid #f751a1; box-shadow: 0 0 10px rgba(247,81,161,.4), inset 0 0 8px rgba(247,81,161,.25); }

/* Línea del itinerario */
.timeline-line {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 4px; height: 100%;
  background: linear-gradient(to bottom, #ddb7ff, #f751a1); z-index: 0; border-radius: 2px;
}
@media (min-width: 768px) {
  .timeline-line { top: 88px; left: 0; transform: none; width: 100%; height: 4px;
    background: linear-gradient(to right, #ddb7ff, #f751a1); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 10px rgba(221,183,255,.8)); }
  50% { opacity: .5; filter: drop-shadow(0 0 20px rgba(221,183,255,.4)); }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 12px); }