/* ============================================================
   SECCIÓN: RESEÑAS (carrusel)
   ============================================================ */

.reviews-slider-wrapper {
  display: flex;
  align-items: center;
  padding: 0px 40px;
  position: relative; /* referencia de .decor-purpurina2 */
}

/* Fila del carrusel: flecha · área visible · flecha.
   Las flechas van en el flujo (no en absoluto) para que reserven su espacio
   y el carrusel no pueda crecer por debajo de ellas. */
.reviews-carousel {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* FLECHAS (ocultas en móvil; se muestran desde tablet) */
.reviews-arrow {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 52px;
  height: 35px;
  flex-shrink: 0;
}

.reviews-arrow img { width: 100%; }

/* CONTENIDO */
.reviews-content {
  width: 100%;
  /*max-width: 1100px;*/
  margin: 0 auto;
}

.reviews-title {
  font-family: var(--font-family-simonetta);
  font-size: 34px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 16px;
}


.reviews-subtitle {
  font-family: var(--font-family-poppins);
  font-size: 24px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 40px;
  margin-bottom: 26px;
}

/* SLIDER
   El ancho visible lo fija reviews-slider.js: un número impar de tarjetas
   completas (1, 3 o 5) para que la activa quede centrada y ninguna aparezca
   cortada. El ancho de tarjeta viaja en --review-card-width. */
.reviews-slider {
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  margin-inline: auto;
  flex: 1;
  min-width: 0; /* permite encogerse por debajo del ancho del track */
}

.reviews-track {
  display: flex;
  transition: transform 0.45s ease;
  gap: 16px;
  justify-content: flex-start;
  padding: 24px 0px;
  will-change: transform;
}

/* TARJETAS
   Todas comparten altura (el flex las estira a la de la reseña más larga) */
.review-card {
  /* Equivalente opaco de #967d5226 (dorado al 15 %) sobre blanco: mismo
     aspecto, pero sin dejar traslucir la decoración que quede detrás */
  background-color: #efece5;
  border: 1.5px solid transparent;
  border-radius: 24px;
  padding: 24px;
  width: var(--review-card-width, 392px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 16px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* Las laterales quedan más pequeñas y apagadas para que destaque la
     central, en vez de ampliar la activa (se recortaría contra el área
     visible). El realce va solo en transform y opacity, que no afectan al
     flujo: cuando se recortaba también la altura con margin-block, la fila
     medía 32px menos al activarse la reseña más larga (la de Salud, la que
     marca la altura de todas) y las flechas, centradas, saltaban 16px. */
  transform: scale(0.95);
  opacity: 0.8;
}

/* Tarjeta central: tamaño completo */
.review-card.active {
  transform: scale(1);
  opacity: 1;
}

/* Estrellas */
.review-rating {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.review-rating img {
  width: 20px;
}

/* Texto: ocupa el alto sobrante para que el perfil quede al pie en todas
   las tarjetas, aunque sus reseñas tengan longitudes distintas */
.review-body {
  display: flex;
  opacity: 0.8;
  flex: 1;
}

/* La línea vertical era un SVG de 2x216 px: con width 4px el navegador
   respetaba su proporción y lo estiraba a 432 px de alto, que era lo que
   inflaba la tarjeta. Como borde se ajusta al alto real del texto. */
.review-text {
  border-left: 1.5px solid rgba(73, 91, 110, 0.2);
  padding-left: 12px;
  flex: 1;
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 400;
  color: #1a2027;
  line-height: 24px;
}

/* Perfil */
.review-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
}

.review-name {
  font-family: "Plus Jakarta Sans";
  font-size: 15px;
  font-weight: 700;
  color: #1a2027;
}

.review-service {
  font-family: "Plus Jakarta Sans";
  font-size: 15px;
  font-weight: 400;
  color: #13202e9e;
}

.elipse-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0px;
  position: relative;
}

.elipse-frame .ellipse {
  position: relative;
  width: 15px;
  height: 15px;
  border: none;
  padding: 0;
  background-color: var(--color-gold);
  border-radius: 50%;
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.active-ellipse {
  transform: scale(1.4);
  opacity: 1;
  background-color: var(--color-gold);
}


/* CTA FAQs */
.faq-cta {
  text-align: center;
  margin-top: 32px;
}

.faq-text {
  font-family: var(--font-family-poppins);
  font-size: 24px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.faq-button {
  display: inline-block;
  background: var(--color-gold);
  padding: 16px 80px;
  font-family: "Outfit";
  font-weight: 600;
  color: #fff;
  border-radius: 32px;
  margin-top: 16px;
  margin-bottom: 32px;
  text-decoration: none;
}

@media (min-width: 768px) {

  .elipse-frame {
    display: none;
  }

  .reviews-arrow {
    display: flex;
  }
}

@media (min-width: 1030px) {

  .reviews-title {
    font-size: 48px;
  }

  .faq-text {
    font-size: 20px;
    line-height: 1.6;
  }

  /* =====================
    RESEÑAS
  ===================== */
  .reviews-subtitle {
    padding: 0 160px;
    font-size: 20px;
    line-height: 1.6;
  }

  /* Reserva para 3 tarjetas mientras el JS no ha medido (o si falla) */
  .reviews-slider {
    max-width: calc(392px * 3 + 16px * 2); /* 3 tarjetas + 2 huecos */
    margin: 48px auto;
  }
}