/* #testimonios — muro de citas gigantes. Prefijo .ts- */
.ts { overflow: clip; padding-block: clamp(4.5rem, 9vw, 8.5rem); }

.ts-head { display: grid; gap: 1.2rem; max-width: 62rem; }
.ts-title { font-size: clamp(2.3rem, 1.2rem + 3.4vw, 4.4rem); line-height: .93; max-width: 15em; }

.ts-wall { list-style: none; margin: clamp(2rem, 5vw, 4rem) 0 0; padding: 0; max-width: 63rem; }
.ts-item { position: relative; padding-block: clamp(2rem, 4.4vw, 3.6rem); border-top: 1px solid var(--line); }
.ts-item:last-child { border-bottom: 1px solid var(--line); }
.ts-item::before { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease-out); }
.ts-item.is-current::before { transform: scaleX(1); }
.ts-fig { margin: 0; }

/* cita */
.ts-quote { margin: 0; }
.ts-quote p { font-family: var(--font-display); font-weight: 620; font-size: clamp(1.8rem, 1rem + 2.6vw, 3.3rem); line-height: 1.06; letter-spacing: -.03em; font-variation-settings: 'opsz' 72; text-wrap: balance; }
.ts-quote mark { background: none; color: var(--accent); position: relative; padding-inline: .02em; white-space: normal; }
.ts-item:nth-child(2) .ts-quote mark { color: #7d93ff; }
.ts-item:nth-child(3) .ts-quote mark { color: var(--mint); }
.ts-quote mark::after { content: ''; position: absolute; left: 0; right: 0; bottom: .02em; height: .07em; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s var(--ease-out) .3s; }
.ts-item.is-current .ts-quote mark::after { transform: scaleX(1); }

/* autor */
.ts-by { display: flex; align-items: center; gap: 1.2rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.ts-avatar { flex: none; display: block; width: clamp(56px, 6vw, 72px); aspect-ratio: 1; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--line-strong), 0 16px 30px -12px rgba(0, 0, 0, .7); }
.ts-avatar svg { width: 100%; height: 100%; }
.ts-avatar__fb { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-pixel); background: var(--accent); color: var(--ink); }
.ts-by__txt { display: grid; gap: .2rem; justify-items: start; }
.ts-name { font-family: var(--font-display); font-style: normal; font-weight: 650; font-size: var(--step-2); letter-spacing: -.02em; line-height: 1; }
.ts-role { color: var(--muted); }
.ts-site { margin-top: .2rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--paper-2); letter-spacing: .02em; }
.ts-site:hover { color: var(--paper); }

/* la figura 3D ocupa la derecha: el muro deja ese espacio */
@media (min-width: 900px) {
  .ts-wall { max-width: min(62%, 60rem); }
}
@media (max-width: 899px) {
  .ts-quote p { font-size: clamp(1.6rem, 7vw, 2.3rem); line-height: 1.08; }
}

@media (prefers-reduced-motion: reduce) { .ts-quote mark::after, .ts-item::before { transition: none; } }

/* hueco al que se ancla la figura 3D en mobile (≥ 60 % del ancho de la pantalla) */
.ts-slot { display: none; }
@media (max-width: 899px) {
  .ts-slot { display: block; width: 68%; aspect-ratio: 1.5; margin: 0 auto 1.4rem; }
}