/* ====== Carrusel Wrapper (Contenedor Principal) ====== */
.carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;             /* ¡CLAVE! Oculta lo que se sale */
  perspective: 1000px;
  background: #0a0a0a;
  margin-bottom: 4rem;
  padding: 1.5rem 0; /* Espacio arriba/abajo */
  /* Quitamos la máscara para simplicidad */
}

/* ====== Pista del Carrusel (La que se mueve) ====== */
.carousel-track {
  display: flex;                /* ¡CLAVE! items en fila */
  gap: 1rem;             /* Espacio entre slides */
  padding: 0 1rem;       /* Padding lateral PEQUEÑO para que se vea bien */
  will-change: transform;
  transition: transform 0.5s ease; /* Transición SUAVE para JS */
  /* ¡SIN ANIMACIÓN CSS INFINITA! */
}

/* ====== Cada Item/Slide del Carrusel ====== */
.carousel-item {
  width: 250px; /* Ancho base del slide */
  flex: 0 0 250px; /* No crece, no se encoje, ancho fijo */
  padding: 0;
  display: grid;
  place-items: center;
}

/* ====== Tarjeta con “flip” ====== */
.card {
  width: 100%; 
  height: 350px; 
  display: block;
  perspective: 1000px;
  cursor: pointer;
}
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
/* Clase que añade el JS para girar */
.card.is-flipped .card-inner {
  transform: rotateY(180deg);
}
.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.card-front { background: #1f2937; display: grid; place-items: center; }
.card-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-back { background: #1f2937; transform: rotateY(180deg); display: grid; place-items: center; }
.card-back img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ====== Controles (Botones Prev/Next) ====== */
.carousel-controls {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  right: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  z-index: 5;
  pointer-events: none;
}
.carousel-btn {
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  padding: 0.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease; /* Añadimos opacity */
  pointer-events: auto;
  font-size: 1.5rem;
  line-height: 1;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
}
.carousel-btn:hover { background: rgba(0, 0, 0, 0.5); color: #fff; }
.carousel-btn:active { transform: scale(0.96); }
/* ¡Botones deshabilitados! */
.carousel-btn:disabled {
  opacity: 0.1;
  cursor: not-allowed;
}

/* ====== Paginación (Puntos) ====== */
/* (Vamos a ocultar los puntos por simplicidad por ahora) */
.carousel-dots {
  display: none; 
}

/* ====== Responsivo ====== */
@media (max-width: 768px) {
  .carousel-item { width: 180px; flex-basis: 180px; }
  .card { height: 260px; }
  .carousel-track { gap: 0.75rem; padding: 0 0.75rem; }
  .carousel-btn { width: 2rem; height: 2rem; font-size: 1.25rem; }
}
@media (max-width: 480px) {
  .carousel-item { width: 140px; flex-basis: 140px; }
  .card { height: 200px; }
  .carousel-track { gap: 0.5rem; padding: 0 0.5rem; }
  .carousel-btn { width: 1.75rem; height: 1.75rem; font-size: 1rem; }
}