/* Estilos base */
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.construction-bg {
  background: radial-gradient(circle at top, #fdf7e9 0, #f4e2b5 40%, #d8b167 100%);
  padding: 2rem 1rem;
}

/* Cubo 3D */
.cube-container {
  width: 220px;
  height: 220px;
  perspective: 900px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotateCube 7s infinite linear;
}

.cube-face {
  position: absolute;
  width: 220px;
  height: 220px;
  background-size: cover;
  background-position: center;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  background-color: #ffffff;
}

/* Caras del cubo */
.front  { transform: translateZ(110px); }
.back   { transform: rotateY(180deg) translateZ(110px); }
.right  { transform: rotateY(90deg) translateZ(110px); }
.left   { transform: rotateY(-90deg) translateZ(110px); }
.top    { transform: rotateX(90deg) translateZ(110px); }
.bottom { transform: rotateX(-90deg) translateZ(110px); }

@keyframes rotateCube {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to   { transform: rotateX(360deg) rotateY(360deg); }
}

/* Texto */
h1, p {
  color: #4a3207;
}

strong {
  color: #b8821b;
}