/* ==========================================================================
   PROSERMAT — Premium TESTIMONIALS 2026
   --------------------------------------------------------------------------
   FASE 3 · Sección 17 del plan UX/UI 2026.
   Refinos editoriales para las cards de testimoniales del home.

   APLICA A:
     - .pm-testimonial (markup ya existente en home.php)
     - .testimonial-card (selector adicional, para futuras vistas)

   NO cambia markup. Sólo CSS.
   ========================================================================== */

/* ── CARD ─────────────────────────────────────────────────────────────── */
.pm-testimonial,
.testimonial-card {
  position: relative;
  background: var(--surface-card, #fff);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-xl, 16px);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 32px) clamp(24px, 3vw, 28px);
  box-shadow: var(--shadow-md, 0 4px 10px rgba(15, 23, 42, 0.07));
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--duration-base, 220ms) var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
    box-shadow var(--duration-base, 220ms) ease,
    border-color var(--duration-base, 220ms) ease;
}

.pm-testimonial:hover,
.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-brand-200, #a8edcb);
  box-shadow: var(--shadow-xl, 0 20px 32px rgba(15, 23, 42, 0.12));
}

/* ── Comilla decorativa Playfair ──────────────────────────────────────── */
.pm-testimonial::before,
.testimonial-card::before {
  content: "\201C"; /* “ izquierda — Unicode U+201C */
  position: absolute;
  top: clamp(-6px, 0vw, 8px);
  left: clamp(12px, 2vw, 22px);
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(4.5rem, 8vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-brand-200, #a8edcb);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ── Texto del testimonio ─────────────────────────────────────────────── */
.pm-testimonial__text,
.pm-testimonial__quote,
.testimonial__text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.18rem);
  line-height: var(--leading-relaxed, 1.7);
  color: var(--color-neutral-900, #1a1a17);
  margin: 0 0 var(--space-6, 24px);
  text-wrap: pretty;
}

/* ── Autor (bloque) ───────────────────────────────────────────────────── */
.pm-testimonial__author,
.testimonial__author {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* Avatar (legacy) — sutil refinamiento */
.pm-testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full, 50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-weight: 700;
  font-size: 0.94rem;
  color: #fff;
  background: linear-gradient(135deg,
    var(--color-brand-600, #1f7a4d) 0%,
    var(--color-brand-800, #155c38) 100%);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(15, 23, 42, 0.06));
}

/* Nombre del autor — spec dice body bold sm color brand-700 */
.pm-testimonial__name,
.testimonial__author .author-name,
.testimonial__author strong {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-brand-700, #1a7344);
  letter-spacing: 0.005em;
  margin: 0;
  line-height: 1.3;
}

/* Rol / contexto del autor */
.pm-testimonial__role,
.testimonial__author .author-role {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--color-neutral-500, #6b6b62);
  letter-spacing: 0.01em;
  margin: 2px 0 0;
  line-height: 1.3;
}

/* ── Variante destacada (si se quiere resaltar una tarjeta) ──────────── */
.pm-testimonial.is-featured,
.testimonial-card.is-featured {
  background: linear-gradient(180deg,
    var(--color-brand-50, #edfaf3) 0%,
    var(--surface-card, #fff) 50%);
  border-color: var(--color-brand-300, #6ddca0);
}

/* ── Stars (si se agregan en el futuro) ───────────────────────────────── */
.pm-testimonial__stars,
.testimonial__stars {
  display: inline-flex;
  gap: 2px;
  color: #f59e0b;
  font-size: 0.95rem;
  margin-bottom: var(--space-3, 12px);
  letter-spacing: 1px;
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pm-testimonial,
  .testimonial-card {
    transition: none;
  }
  .pm-testimonial:hover,
  .testimonial-card:hover {
    transform: none;
  }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pm-testimonial,
  .testimonial-card {
    padding: clamp(22px, 5vw, 28px) clamp(18px, 5vw, 22px);
  }
  .pm-testimonial::before,
  .testimonial-card::before {
    font-size: 4rem;
    top: 2px;
    left: 10px;
  }
}