/**
 * COMPONENTS / TESTIMONIAL
 * -----------------------------------------------------------------------------
 * Tarjeta de testimonio: estrellas + cita + autor con foto.
 *
 *   <figure class="testimonial">
 *       <div class="rating__stars">★★★★★</div>
 *       <blockquote class="testimonial__quote">…</blockquote>
 *       <figcaption class="testimonial__author">
 *           <div class="testimonial__avatar">…</div>
 *           <div><span class="testimonial__name">…</span>
 *                <span class="testimonial__role">…</span></div>
 *       </figcaption>
 *   </figure>
 */

.testimonial {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.testimonial:hover {
    border-color: var(--border-blue);
    box-shadow: var(--shadow-sm);
}

/*
 * Las estrellas solo se usan aquí: los productos no llevan valoraciones
 * (ver el bloque correspondiente en inc/woocommerce.php).
 */
.rating__stars {
    color: var(--orange);
    letter-spacing: 1px;
}

.testimonial .rating__stars {
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: var(--space-sm);
}

.testimonial__quote {
    border: 0;
    padding: 0;
    font-size: 15px;
    line-height: var(--lh-body);
    color: var(--text-strong);
    font-style: italic;
    margin-bottom: var(--space-md);
}

/* --- Autor ------------------------------------------------------------- */

.testimonial__author {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: auto;
}

.testimonial__avatar {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-circle);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--blue-soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
}

.testimonial__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial__name {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 15px;
    color: var(--heading);
}

.testimonial__role {
    display: block;
    font-size: var(--fs-sm);
    color: #7a8697;
    line-height: 1.35;
}

@media (max-width: 700px) {

    .testimonial {
        padding: 24px 22px;
    }
}