@charset "UTF-8";

.testimonial {
  max-width: 560px;
  margin: 18px auto 0px auto;
  line-height: 1.5;
  position: relative;
}

.tstl-content {
  position: relative;
  overflow: hidden;
  max-height: 5em;
  transition: max-height 0.2s ease;
}

/* Degradado al fondo (se ve solo en colapsado) */
.tstl-content::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3.5em;
  pointer-events: none;
  /* De oscuro-transparente según tu fondo. Aquí usamos el fondo del body. */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 75%);
}

/* Estado expandido */
.testimonial.is-expanded .tstl-content{
  max-height: 1000vh; /* grande para animar apertura sin calcular alto */
}
.testimonial.is-expanded .tstl-content::after{
  opacity: 0; /* opcional */
  transition: opacity 0.5s ease;
}

/* Enlace "Ver más" */
.tstl-toggle {
  display: inline-block;
  margin-top: 8px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  text-align: right;
  width: 100%;
}
/* .tstl-toggle:hover { text-decoration: underline; } */

/* Modo reduce motion */
@media (prefers-reduced-motion: reduce) {
  .tstl-content { transition: none; }
  .testimonial.is-expanded .tstl-content { max-height: none; }
}

/* Variante oscura (si usas fondo oscuro, este gradiente queda mejor)
body{ background:#0b0f19; color:#e6e6e6; }
.tstl-content::after{ background: linear-gradient(to bottom, rgba(11,15,25,0) 0%, #0b0f19 80%); }
*/