/* ==========================================================
   carrusel3d.css — versión final con espaciado y proporciones refinadas
   ----------------------------------------------------------
   - Desktop: tarjetas más grandes y compactas con controles.
   - Mobile: flujo continuo sin vacíos ni solapamientos.
   ========================================================== */


/* ====================== CONTENEDOR GENERAL ====================== */
.carousel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 0; /* sin espacio debajo */
}

/* ====================== CONTENEDOR PRINCIPAL ====================== */
.carousel-container {
  position: relative;
  width: 470px; /* 🔧 antes 440px → mejora visual desktop */
  min-height: 440px;
  padding-bottom: 10px; /* 🔧 reduce espacio entre carrusel y botones */
  margin: 0 auto;
  perspective: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  box-sizing: border-box;
  z-index: 1;
}

/* =========================== ESCENARIO =========================== */
.carousel {
  position: relative;
  width: 470px;
  height: 400px; /* 🔧 antes 380px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: height 0.3s ease;
  z-index: 5;
  margin-bottom: 0;
}

/* ========================= TARJETAS (DESKTOP) ========================= */
.carousel-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 340px; /* 🔧 antes 310px */
  height: 355px; /* 🔧 antes 335px */
  margin-left: -170px;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 6px 36px rgba(52,181,169,0.15), 0 2px 6px rgba(0,0,0,0.07);
  border-bottom: 7px solid #428bca;
  transform: scale(.72) translateX(-180px) rotateY(28deg);
  filter: blur(3px) grayscale(25%);
  opacity: 0.4;
  z-index: 1;
  transition: transform .6s ease, filter .4s ease, opacity .4s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.carousel-card.active {
  transform: scale(1.08) translateX(0) rotateY(0deg);
  filter: none;
  opacity: 1;
  z-index: 10;
  pointer-events: auto;
}

.carousel-card.left {
  transform: scale(.8) translateX(-100px) rotateY(14deg);
  opacity: 0.65;
  filter: blur(2px) grayscale(12%);
  z-index: 2;
}
.carousel-card.right {
  transform: scale(.8) translateX(100px) rotateY(-14deg);
  opacity: 0.65;
  filter: blur(2px) grayscale(12%);
  z-index: 2;
}

/* ========================== IMÁGENES ========================== */
.carousel-card img {
  width: 100%;
  height: 260px; /* 🔧 antes 240px — se amplía */
  object-fit: cover;
  border-radius: 25px 25px 0 0;
  display: block;
  background-color: #fff;
}
.carousel-card img.vertical {
  height: 260px !important;
  object-fit: cover !important;
}

/* ========================= DESCRIPCIÓN ========================= */
.card-desc {
  padding: 0.7rem 1.2rem 0.5rem;
  font-size: 1.05rem;
  color: #232b3e;
  text-align: left;
  background: #fff;
  border-radius: 0 0 19px 19px;
  width: 100%;
  box-sizing: border-box;
}

/* ========================= CONTROLES ========================= */
.carousel-controls {
  margin-top: 0.4rem; /* 🔧 más cerca del carrusel */
  text-align: center;
  position: relative;
  z-index: 20;
}
.carousel-controls button {
  background: #fff;
  border: none;
  font-size: 2.1rem;
  color: #428bca;
  border-radius: 50%;
  margin: 0 .3rem;
  box-shadow: 0 1px 7px rgba(52,181,169,.10);
  width: 47px;
  height: 47px;
  line-height: 44px;
  cursor: pointer;
  transition: background .2s, transform .1s;
}
.carousel-controls button:hover { background: #e0f6fb; }
.carousel-controls button:active { transform: scale(.96); }

/* ========================= PAGINACIÓN ========================= */
.carousel-pagination {
  margin-top: 0.3rem; /* 🔧 más cercano a los botones */
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  z-index: 20;
}
.carousel-pagination span {
  display: inline-block;
  width: 22px;
  height: 7px;
  background: #c2eff7;
  border-radius: 8px;
  transition: background .28s, transform .2s;
}
.carousel-pagination .active {
  background: #428bca;
  transform: translateY(-1px);
}

/* ==========================================================
   RESPONSIVE — MÓVIL
   ========================================================== */
@media (max-width: 700px) {
  .carousel-wrapper {
    margin-top: 0.6rem;
    margin-bottom: 0;
  }

  .carousel-container,
  .carousel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px 6px 10px !important;
    box-sizing: border-box;
  }

  /* Mostrar solo la activa */
  .carousel-card { display: none !important; }

  .carousel-card.active {
    display: flex !important;
    position: relative !important;
    left: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    z-index: 10;
    background: #fff;
    box-shadow: 0 2px 10px rgba(52,181,169,0.11);
    border-radius: 18px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  /* ==== 📏 AJUSTE PRINCIPAL: ALTURA DE IMÁGENES ==== */
  .carousel-card.active img,
  .carousel-card.active img.vertical {
    width: 100% !important;
    height: 300px !important; /* 🔧 antes 220px — ampliada 23% */
    object-fit: cover !important;
    border-radius: 18px 18px 0 0;
  }

  /* ==== Descripción bajo la imagen ==== */
  .card-desc {
    padding: 0.7rem 1rem 0.55rem;
    font-size: 1rem;
  }

  /* ==== Controles ==== */
  .carousel-controls {
    margin-top: 0.15rem !important;
  }

  /* ==== Paginación ==== */
  .carousel-pagination {
    margin-top: 0.15rem !important;
    margin-bottom: 0.15rem !important; /* 🔧 mantiene compacto */
  }
}