.cubo-container {
  perspective: 1000px;
  width: 300px;
  height: 300px;
  margin: 100px auto;
  position: relative;
}

.cubo {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.8s ease-in-out;
}

.cubo .cara {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ff00cc, #3333ff, #00ffff, #ffff00);
  background-size: 400% 400%;
  animation: iridescent 10s ease infinite;
  border: 2px solid rgba(255, 255, 255, 0.2);
  backface-visibility: hidden;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  color: white;
  text-align: center;
}

.cubo .cara1 { transform: rotateY(0deg) translateZ(150px); }
.cubo .cara2 { transform: rotateY(90deg) translateZ(150px); }
.cubo .cara3 { transform: rotateY(180deg) translateZ(150px); }
.cubo .cara4 { transform: rotateY(270deg) translateZ(150px); }

@keyframes iridescent {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.cara-contenido {
  max-width: 90%;
}

.cara-contenido h3 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.cara-contenido p {
  font-size: 1em;
  line-height: 1.4;
}

@media (max-width: 500px) {
  .cubo-container {
    width: 220px;
    height: 220px;
  }

  .cara-contenido h3 {
    font-size: 1.2em;
  }

  .cara-contenido p {
    font-size: 0.9em;
  }
}