/* Card Stack Styles */
.card-stack {
  display: flex;
  flex-direction: column;
  gap: 2em;
  margin: 0;
  width: 100%;
}

.card {
  width: 60%;
  height: 100px;
  background: linear-gradient(120deg, #232a3b 60%, #0b68f5 100%);
  border-radius: 18px;
  border: 2px solid #0b68f5;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 1.5px 6px #0b68f5;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e0e0e0;
  font-size: 1.35em;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 15px;
  text-align: center;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 2px 8px #0b68f5;
  background: linear-gradient(120deg, #1a1f2c 40%, #0a5bd9 100%);
}

.card.active {
  background: linear-gradient(120deg, #0b68f5 0%, #1a3b7a 100%);
  border-color: #4a90e2;
  box-shadow: 0 0 20px rgba(74, 144, 226, 0.6);
}

/* Eliminamos las clases de flip ya que no las usaremos más */
.card-inner {
  display: none; /* Ocultamos el inner ya que no lo usamos */
}

.card.flipped.card1 {
  z-index: 20;
  transform: translate(-120px, -40px) scale(1.08) !important;
}
.card.flipped.card2 {
  z-index: 20;
  transform: translate(0, -40px) scale(1.08) !important;
}
.card.flipped.card3 {
  z-index: 20;
  transform: translate(120px, -40px) scale(1.08) !important;
}

.card.flipped {
  opacity: 0.10;
  transition: opacity 0.4s;
}

.card.flipped .card-inner {
  box-shadow: 0 8px 32px 6px rgba(11,104,245,0.25), 0 2px 8px #0b68f5;
}

.card-stack.has-flipped .card:not(.flipped) {
  opacity: 0.35;
  transition: opacity 0.4s;
  pointer-events: auto;
}

.card-stack .card {
  opacity: 1;
  transition: opacity 0.4s;
}

.card:hover {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 16px 48px rgba(11,104,245,0.18), 0 2px 8px #0b68f5;
}

@media (max-width: 900px) {
  .card-stack {
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
  }
  .card {
    width: 95vw;
    max-width: 350px;
    height: 160px;
  }
}