/* ============================================================
   SEÇÃO: FEEDBACKS / AVALIAÇÕES
   Slug: feedbacks
   Design: Oráculo — Luxo minimalista escuro
   Nota: seção posicionada após a seção anterior (fundo --color-bg-primary).
         A transição é tratada pelo ::before desta seção para que a
         mudança de fundo não seja abrupta.
   ============================================================ */

/* ---------- WRAPPER DA SEÇÃO ---------- */
.flavor-section--feedbacks {
  background-color: var(--color-bg-secondary, #100F0D);
  padding: 96px 0 88px;
  position: relative;
  overflow: hidden;
}

/*
   Fade de transição — dissolve o fundo anterior (#0B0A09)
   até o fundo desta seção (#100F0D).
   Gradiente quente e suave, sem cortes visuais.
*/
.flavor-section--feedbacks::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(
    to bottom,
    var(--color-bg-primary, #0B0A09) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Linha dourada sutil de separação — filete elegante entre seções */
.flavor-section--feedbacks::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(201, 169, 110, 0.12),
    rgba(212, 186, 130, 0.18),
    rgba(201, 169, 110, 0.12),
    transparent
  );
  pointer-events: none;
  z-index: 1;
}

/* ---------- INNER CONTAINER ---------- */
.section-feedback__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/*
   O shortcode de feedbacks injeta .jcf-wrapper,
   mas dentro da seção ele não precisa de max-width próprio
   pois o .section-feedback__inner já controla o container.
*/
.section-feedback__inner .jcf-wrapper {
  max-width: none;
  padding: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .flavor-section--feedbacks {
    padding: 72px 0 64px;
  }
}

@media (max-width: 480px) {
  .flavor-section--feedbacks {
    padding: 56px 0 48px;
  }

  .section-feedback__inner {
    padding: 0 16px;
  }
}