/* Contenedor de la tarjeta */
.flip-card {
    perspective: 1000px;         /* Permite el efecto 3D */
    width: 100%;
    max-width: 300px;            /* Ajusta el ancho deseado */
    margin: 0 auto;              /* Centra la tarjeta si lo deseas */
  }
  
  /* Contenedor interno que rota */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 400px;               /* Altura fija de la tarjeta */
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Caras frontal y trasera */
  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;            /* Para recortar si algo se sale */
    backface-visibility: hidden; /* Oculta la cara posterior al rotar */
    border: 1px solid #ddd;     
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
  }
  
  /* Ajustar la imagen para que no se corte */
  .flip-card-front img {
    width: 100%;
    height: auto; 
    display: block;
    margin-bottom: 10px;
  }
  
  /* La cara trasera comienza rotada */
  .flip-card-back {
    transform: rotateY(180deg);
    background-color: #f8f9fa; /* Un color de fondo distinto */
  }
  
  /* Efecto flip al pasar el ratón */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }