/* =========================================
   Egresados Exitosos – Auto Slider / Carousel
   Overlaps bottom of hero: half above, half below
   ========================================= */

.slider-section {
  position: relative;
  width: 100%;
  padding: 0 clamp(12px, 2.5vw, 32px);
  margin-top: -140px;
  z-index: 20;
  box-sizing: border-box;
  overflow: hidden;
}

/* ---- Carousel Container ---- */
.slider-carousel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  height: 370px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  overflow: visible;
}

/* ---- Individual Slide Card ---- */
.slider-card {
  position: absolute;
  width: 540px;
  height: 330px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.20);
  transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  left: 50%;
  top: 50%;
  margin-left: -270px;
  margin-top: -165px;
}

.slider-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 20px;
  transition: transform 0.5s ease;
}

.slider-card:hover img {
  transform: scale(1.04);
}

/* ---- Slide Positions ---- */

/* Center (Active) */
.slider-card[data-pos="center"] {
  z-index: 5;
  transform: translateX(0) scale(1);
  opacity: 1;
  box-shadow: 0 28px 60px rgba(18, 50, 95, 0.28), 0 0 0 1px rgba(255,255,255,0.12);
}

/* Left 1 */
.slider-card[data-pos="left-1"] {
  z-index: 3;
  transform: translateX(-380px) scale(0.65) rotateY(6deg);
  opacity: 0.7;
  filter: brightness(0.92);
}

/* Right 1 */
.slider-card[data-pos="right-1"] {
  z-index: 3;
  transform: translateX(380px) scale(0.65) rotateY(-6deg);
  opacity: 0.7;
  filter: brightness(0.92);
}

/* Left 2 (barely visible / off-stage) */
.slider-card[data-pos="left-2"] {
  z-index: 0;
  transform: translateX(-500px) scale(0.5);
  opacity: 0;
  pointer-events: none;
}

/* Right 2 (barely visible / off-stage) */
.slider-card[data-pos="right-2"] {
  z-index: 0;
  transform: translateX(500px) scale(0.5);
  opacity: 0;
  pointer-events: none;
}

/* Hidden (off-screen) */
.slider-card[data-pos="hidden"] {
  z-index: 0;
  transform: translateX(0) scale(0.4);
  opacity: 0;
  pointer-events: none;
}

/* ---- Name Badge Overlay ---- */
.slider-card-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48px 24px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.slider-card[data-pos="center"] .slider-card-badge {
  opacity: 1;
}

.slider-badge-name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  line-height: 1.15;
}

.slider-badge-role {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.88);
  font-weight: 500;
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.slider-badge-tag {
  background: #1877f2;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Navigation Dots ---- */
.slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}

.slider-dot:hover {
  background: #94a3b8;
  transform: scale(1.2);
}

.slider-dot.active {
  background: #1877f2;
  width: 28px;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(24, 119, 242, 0.45);
}

/* ---- Progress bar (auto-play indicator) ---- */
.slider-progress-bar {
  position: relative;
  margin: 14px auto 0;
  width: 120px;
  height: 3px;
  background: rgba(0,0,0,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.slider-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1877f2, #42a5f5);
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .slider-section {
    margin-top: -160px;
  }
  .slider-card {
    width: 460px;
    height: 290px;
    margin-left: -230px;
    margin-top: -145px;
  }
  .slider-carousel {
    height: 320px;
  }
  .slider-card[data-pos="left-1"] {
    transform: translateX(-390px) scale(0.78) rotateY(6deg);
  }
  .slider-card[data-pos="right-1"] {
    transform: translateX(390px) scale(0.78) rotateY(-6deg);
  }
  .slider-card[data-pos="left-2"] {
    transform: translateX(-680px) scale(0.6) rotateY(10deg);
  }
  .slider-card[data-pos="right-2"] {
    transform: translateX(680px) scale(0.6) rotateY(-10deg);
  }
}

@media (max-width: 900px) {
  .slider-section {
    margin-top: -140px;
  }
  .slider-card {
    width: 380px;
    height: 250px;
    margin-left: -190px;
    margin-top: -125px;
  }
  .slider-carousel {
    height: 280px;
  }
  .slider-card[data-pos="left-1"] {
    transform: translateX(-300px) scale(0.75) rotateY(6deg);
  }
  .slider-card[data-pos="right-1"] {
    transform: translateX(300px) scale(0.75) rotateY(-6deg);
  }
  .slider-card[data-pos="left-2"],
  .slider-card[data-pos="right-2"] {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  .slider-card[data-pos="left-1"] {
    transform: translateX(-180px) scale(0.65) rotateY(4deg);
  }
  .slider-card[data-pos="right-1"] {
    transform: translateX(180px) scale(0.65) rotateY(-4deg);
  }
}

@media (max-width: 640px) {
  .slider-section {
    margin-top: 10px;
  }
  .slider-card {
    width: 300px;
    height: 210px;
    margin-left: -150px;
    margin-top: -105px;
    border-radius: 16px;
  }
  .slider-card img {
    border-radius: 16px;
  }
  .slider-carousel {
    height: 240px;
  }
  .slider-card[data-pos="left-1"],
  .slider-card[data-pos="right-1"],
  .slider-card[data-pos="left-2"],
  .slider-card[data-pos="right-2"] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(0) scale(0.5);
  }
}