/**
 * Testimonios — the base look of the public block.
 *
 * Deliberately plain: a card, a quote, a name. A site with its own design
 * overrides these from "CSS y JavaScript del sitio" without touching this file,
 * which is why every class is namespaced (tstw-*) and nothing here is written
 * inline, where a stylesheet could not reach it.
 */

.tstw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    align-items: stretch;
}

.tstw-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 6px;
    padding: 28px;
}

.tstw-quote {
    margin: 0;
    color: #3a3c37;
    font-size: .96rem;
    line-height: 1.6;
}

/* The quotation marks belong to the design, not to what the operator typed —
   the engine strips the pair they may have typed so these never double up. */
.tstw-quote::before { content: "\201C"; }
.tstw-quote::after  { content: "\201D"; }

.tstw-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tstw-avatar {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tstw-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sin foto, las iniciales. Un círculo gris vacío se lee como una imagen que no
   cargó; las iniciales se leen como una persona. */
.tstw-avatar.is-initials {
    background: #2f3330;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .02em;
}

.tstw-who { display: flex; flex-direction: column; line-height: 1.3; }
.tstw-who strong { font-size: .95rem; color: #1c1e1b; }
.tstw-who span   { font-size: .82rem; color: #6b6f6b; }

.tstw-empty {
    color: #6b6f6b;
    font-size: .9rem;
    padding: 18px 0;
}