/* ===== SERVICE PAGE STYLES ===== */

.servicio-hero {
  padding: 120px 0 60px;
  background: var(--black);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.servicio-hero .breadcrumb {
  font-size: 13px; color: var(--gray);
  margin-bottom: 16px;
}
.servicio-hero .breadcrumb a { color: var(--orange); }
.servicio-hero .breadcrumb span { margin: 0 8px; }

.servicio-hero h1 {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900; color: var(--white);
  margin-bottom: 16px;
}

.servicio-hero p {
  font-size: 16px; color: var(--light-gray);
  max-width: 600px; margin: 0 auto 28px;
}

/* ===== CAROUSEL ===== */
.carousel-section { padding: 60px 0; border-bottom: 1px solid var(--border); }
.carousel-section:last-of-type { border-bottom: none; }

.carousel-title {
  font-size: 20px; font-weight: 700;
  margin-bottom: 8px; color: var(--white);
}

.carousel-desc {
  font-size: 14px; color: var(--light-gray);
  margin-bottom: 24px; max-width: 700px;
}

.carousel-wrap {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--dark2);
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

.carousel-slide {
  min-width: 100%; position: relative;
}

.carousel-slide img {
  width: 100%; height: 420px;
  object-fit: contain; display: block;
  border-radius: var(--radius-lg);
  background: var(--dark3);
}

.carousel-placeholder {
  width: 100%; height: 420px;
  background: var(--dark3);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; color: var(--gray);
  border: 2px dashed var(--border);
}

.carousel-placeholder i { font-size: 48px; color: var(--orange); opacity: 0.4; }
.carousel-placeholder p { font-size: 14px; }

.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  background: rgba(0,0,0,0.7); border: 1px solid var(--border);
  border-radius: 50%; color: var(--white); font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: var(--transition); z-index: 10;
  backdrop-filter: blur(4px);
}
.carousel-btn:hover { background: var(--orange); border-color: var(--orange); }
.carousel-btn.prev { left: 12px; }
.carousel-btn.next { right: 12px; }

.carousel-dots {
  display: flex; justify-content: center; gap: 8px; padding: 16px 0;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); cursor: pointer;
  transition: background var(--transition);
}
.dot.active { background: var(--orange); }

/* ===== BACK BUTTON ===== */
.back-btn {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--orange); font-size: 14px; font-weight: 600;
  margin-bottom: 24px; transition: gap var(--transition);
}
.back-btn:hover { gap: 12px; }

/* ===== CTA SECTION ===== */
.servicio-cta {
  background: var(--black); padding: 60px 0; text-align: center;
  border-top: 1px solid var(--border);
}
.servicio-cta h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.servicio-cta p { color: var(--light-gray); margin-bottom: 28px; }

@media (max-width: 768px) {
  .carousel-slide img,
  .carousel-placeholder { height: 260px; }
}