/* ============================================================
   SERVICES SWIPER — estilos completos
   ============================================================ */

/* ── Página: fondo blanco, centrado ── */
#page4 {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: visible;
}

#page4 .section {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: #fff;
}

/* ── Wrapper: tamaño reducido en desktop, centrado ── */
.services-swiper-wrap {
  position: relative;
  width: 62%;           /* igual que el slider original en desktop */
  height: 72vh;
  /* espacio abajo para los dots que quedan FUERA de la imagen */
  padding-bottom: 48px;
  box-sizing: content-box;
}

/* ── Swiper: ocupa el wrap SIN el padding ── */
.services-swiper {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  border: 2px solid black;
  overflow: hidden;       /* el clip va ACÁ para que los dots queden afuera */
}

/* ── Cada slide ── */
.services-slide {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Imagen full cover ── */
.services-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Título sobre la imagen ── */
.services-slide h2 {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: clamp(22px, 2.4vw, 45px);
  font-weight: 700;
  text-align: center;
  width: 90%;
  text-shadow:
    2px  2px 0 black,
   -2px  2px 0 black,
    2px -2px 0 black,
   -2px -2px 0 black;
  z-index: 10;
  pointer-events: none;
}

/* ── Flechas — ocultas en todas las resoluciones ── */
.services-carousel-button {
  display: none;
}

/* ── Paginación: FUERA de la imagen, en el padding-bottom del wrap ── */
.services-pagination {
  position: absolute;
  bottom: 10px;          /* dentro del padding-bottom: 48px */
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  justify-content: center;
}
.services-pagination .swiper-pagination-bullet {
  background: #888;
  opacity: 1;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  transition: background .3s;
}
.services-pagination .swiper-pagination-bullet-active {
  background: #103fee;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Laptops medianas ── */
@media (max-width: 1440px) {
  .services-swiper-wrap { width: 68%; height: 70vh; }
}
@media (max-width: 1280px) {
  .services-swiper-wrap { width: 74%; height: 68vh; }
}

/* ── Tablets landscape ── */
@media (max-width: 1024px) {
  .services-swiper-wrap { width: 84%; height: 65vh; }
  .services-slide h2 { font-size: 26px; }
}

/* ── Tablets portrait / móviles grandes ── */
@media (max-width: 768px) {
  #page4 { height: auto; padding: 40px 0 0; }
  #page4 .section { height: auto; padding: 0; }

  .services-swiper-wrap {
    width: 90%;
    height: 58vh;
    padding-bottom: 44px;
  }
  .services-swiper {
    border-radius: 14px;
  }
  .services-slide h2 { font-size: 20px; bottom: 10%; }
  .services-carousel-button { display: none; }
  .services-pagination { bottom: 8px; }
}

/* ── Móviles pequeños ── */
@media (max-width: 480px) {
  #page4 { padding: 32px 0 0; }
  .services-swiper-wrap {
    width: 94%;
    height: 52vh;
    padding-bottom: 40px;
  }
  .services-swiper { border-radius: 10px; }
  .services-slide h2 { font-size: 17px; bottom: 9%; }
}