/* ancho del bloque del prefijo (+51) y separación con el texto */
:root{
  --iti-prefix-width: 100px;   /* ajusta 88–120px a tu gusto */
  --iti-gap: 14px;             /* espacio entre +51 y el texto/icono */
}

.iti{ width:100%; position: relative; }

/* Ocultar bandera y flecha, pero dejar el prefijo */
.iti .iti__flag{ display:none !important; }

/* Bloque izquierdo (prefijo) ANCHO y centrado */
.iti--separate-dial-code .iti__flag-container{ width: var(--iti-prefix-width); }
.iti--separate-dial-code .iti__selected-flag{
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;     /* centra el +51 */
}
.iti .iti__selected-dial-code{ font-weight: 500; }

/* Empuja el texto del input hacia la derecha según el nuevo ancho */
.iti input[type="tel"],
.iti input.form-control{
  padding-left: calc(var(--iti-prefix-width) + var(--iti-gap)) !important;
}

/* (opcional) placeholder visible y con tono suave */
.iti input::placeholder{ color:#7c8695; opacity:1; }

/* Carrusel de relacionados */
.recommended-swiper { width: 100%; overflow: hidden; }
.recommended-swiper .swiper-wrapper { display: flex; flex-wrap: nowrap; }

/* Centrar cuando hay menos de 4 tarjetas (solo desktop) */
@media (min-width: 1101px) {
  .recommended-swiper.centered .swiper-wrapper { justify-content: center; }
}

/* Tamaños por breakpoint (mismo patrón que calendar) */
.recommended-swiper .swiper-slide { flex-shrink: 0; box-sizing: border-box; }
@media (min-width: 1101px) { .recommended-swiper .swiper-slide { flex: 0 0 25%;  max-width: 24.4%; } }
@media (min-width: 992px) and (max-width: 1100px) { .recommended-swiper .swiper-slide { flex: 0 0 33.33%; max-width: 33.33%; } }
@media (min-width: 651px) and (max-width: 991px) { .recommended-swiper .swiper-slide { flex: 0 0 50%;    max-width: 50%; } }
@media (max-width: 650px) { .recommended-swiper .swiper-slide { width: 100%; max-width: 100%; } }