:root {
  /* --- CONFIGURACIÓN CUSTOMIZABLE --- */
  --duration: 0.6s;            /* Duración de la animación */
}

/* Contenedor principal con las propiedades de posición que solicitaste */
.card-3d {
  display: block;
  position: relative;
  perspective: 1000px;  
  cursor: pointer;
}

/* El elemento interno que realmente aplica la rotación */
.card-3d-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform var(--duration) ease-in-out;
  transform-style: preserve-3d; 
}

/* Clase que añade JS al hacer click */
.card-3d:not(.horizontal) .card-3d-inner.is-flipped {
  transform: rotateX(180deg);
}

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

/* Reglas comunes para ambas caras */
.card-face {
  width: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Cara Frontal */
.card-face.front {
  position: relative;
}

/* Cara Trasera (empieza ya rotada a 180 grados) */
.card-face.back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
}

.card-3d:not(.horizontal) .card-face.back {
  transform: rotateX(180deg);
}

.card-3d.horizontal .card-face.back {
  transform: rotateY(180deg);
}

.card-3d-inner.is-flipped .card-face.front {
  pointer-events: none;
}

.card-3d-inner.is-flipped .card-face.back {
  pointer-events: auto;
}