/* =======================
   Swiper / Grid (NO romper)
   ======================= */
.mx-ptc .swiper.mx-ptc-swiper {
  overflow: hidden;
  /* Swiper necesita esto */
}

/* NO forzar display flex en wrapper si usas grid */
.mx-ptc .swiper-wrapper {
  position: relative;
}

.swiper-wrapper {
  justify-content: center;
}

/* widths por breakpoint */
.mx-ptc .swiper-slide {
  width: 252px !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .mx-ptc .swiper-slide {
    width: 182px !important;
  }
}

@media (max-width: 767px) {
  .mx-ptc .swiper-slide {
    width: 146px !important;
  }
}

/* QUITA esta regla si existe en tu css:
.swiper-slide.mx-ptc-slide.swiper-slide-active { width: 281px; }
*/


/* =======================
   Tabs
   ======================= */
.mx-ptc-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  /* por si en mobile se pasan */
}

.mx-ptc-tabs button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 10px 11px 10px 30px;
  border-radius: 60px;
  border: 1px solid #FDF2F7;
  background: #FDF2F7;
  color: #671F0D;
  font-family: Nunito;
  font-size: 18px;
  font-weight: 700;

  /* IMPORTANT: NO forces row-reverse aquí */
  flex-direction: row;
}

.mx-ptc-tabs button.active {
  background: #E66F9C;
  color: #FDF2E0;
  border-color: #E66F9C;
}

.mx-ptc-tabs button:hover {
  border: 2px solid #FDF2E0 !important;
  background: #E66F9C !important;
  color: #FDF2E0;
}

/* Posición icono (que esto mande) */
.mx-ptc--icon-left .mx-ptc-tabs button {
  flex-direction: row;
}

.mx-ptc--icon-right .mx-ptc-tabs button {
  flex-direction: row-reverse;
}

.mx-ptc--icon-top .mx-ptc-tabs button {
  flex-direction: column;
  align-items: center;
}

.mx-ptc--icon-bottom .mx-ptc-tabs button {
  flex-direction: column-reverse;
  align-items: center;
}

/* Iconos */
.mx-ptc-tab-icon {
  display: inline-flex;
  line-height: 1;
}

.mx-ptc-tab-icon svg,
.mx-ptc-tab-icon i {
  width: 33px;
  height: 33px;
}

/* Toggle iconos: normal vs active (active en hover y active) */
.mx-ptc .mx-ptc-tab-icon--active {
  display: none !important;
}

@media (hover:hover) {
  .mx-ptc .mx-ptc-tabs button:hover .mx-ptc-tab-icon--default {
    display: none !important;
  }

  .mx-ptc .mx-ptc-tabs button:hover .mx-ptc-tab-icon--active {
    display: inline-flex !important;
  }
}

.mx-ptc .mx-ptc-tabs button.active .mx-ptc-tab-icon--default {
  display: none !important;
}

.mx-ptc .mx-ptc-tabs button.active .mx-ptc-tab-icon--active {
  display: inline-flex !important;
}


/* =======================
   Card
   ======================= */
.mx-ptc-card {
  position: relative;
  text-align: center;
  color: #671F0D;
  font-family: Nunito;
}

.mx-ptc-img img {
  width: 252px;
  height: 252px;
  border-radius: 50%;
  object-fit: contain;
  /* mejor que contain si quieres que llene */
  margin: auto;
  display: block;
  padding-bottom: 24px;
}

h3.title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

p.content {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

/* excerpt botón */
p.boton_excerpt {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  color: #FFEEF6;
  font-family: Calistoga;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 42px;
  background: #E66F9C;
}

/* Tablet ajustes */
@media (min-width: 768px) and (max-width: 1023px) {
  .mx-ptc-img img {
    width: 182px;
    height: 182px;
    padding-bottom: 10px;
  }

  .mx-ptc-nav {
    gap: 640px !important;
}
}

/* Mobile ajustes */
@media (max-width: 767px) {

  /* ocultar texto en tabs salvo active */
  .mx-ptc-tabs .mx-ptc-tab-text {
    display: none;
  }

  .mx-ptc-tabs button.active .mx-ptc-tab-text {
    display: inline-block;
  }

  .mx-ptc-img img {
    width: 146px;
    height: 146px;
    padding-bottom: 5px;
  }

  h3.title {
    font-size: 14px;
  }

  /* tenías 14pxpx */
  p.content {
    font-size: 12px;
  }

  p.boton_excerpt {
    top: 9px;
    right: -23px;
  }

  .mx-ptc-nav {
    bottom: -10px;
    gap: 23px;
}
}


.mx-ptc-nav {
    position: absolute;
    left: 50%;
    bottom: 329px;
    transform: translateX(-50%);
    display: flex;
    gap: 1130px;
    z-index: 9999;
    pointer-events: none;
}

.mx-ptc-prev,
.mx-ptc-next {
  width: 0px;
  height: 0px;
  border-radius: 50%;
  /* cámbialo a tu color */
  pointer-events: auto;
  padding: 16px 20px 22px 20px;
}
.mx-ptc-prev{
  background: #F1B2CD;
}

.mx-ptc-next{
  background: #E66F9C;
}

/* Swiper usa clases internas para arrows, pero aquí hacemos botones simples */
.mx-ptc-prev::after {
  content: "‹";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 30px;
  color: #fff;
}

.mx-ptc-next::after {
  content: "›";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 30px;
  color: #fff;
}

.mx-ptc-pagination {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}