/* =====================================================================
   testimonials.css — Docokids testimonial pull quote + attribution.

   An italic serif quote followed by a small sans attribution line. Every
   value is a var(--token).
   ===================================================================== */
.quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--gris-oscuro);
  margin: 0 0 var(--space-4) 0;
}
.attribution {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--gris);
}

/* Proof bar — wrapper de la barra de prueba dentro de la sección de testimonios.
   La grilla interna .row.g-4 da el layout de columnas (idéntico al de las citas,
   para que col 1 y col 2 alineen verticalmente entre cifras y citas). .proof-bar
   solo aporta el espaciado y la hairline inferior, dibujada al ancho del
   contenido del contenedor (no en .row, cuyos gutters negativos sobresaldrían).
   La cifra es el elemento dominante (--fs-h2). */
.proof-bar {
  margin: var(--space-5) 0;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--hairline);
}
.proof-bar .stats__number { font-size: var(--fs-h2); }

/* Citas lado a lado (col-md, ≥768px): la columna de Bootstrap ya estira a igual
   altura, pero la atribución queda justo debajo de la cita, así que con citas de
   distinta longitud las atribuciones caen a alturas distintas. Convertimos cada
   <figure> en columna flex y empujamos la atribución al fondo para que se alineen
   entre columnas; la cita sigue arriba (top-aligned). Solo afecta a los <figure>
   de las citas — la proof-bar usa <div>, no <figure>. Gated a ≥768px: al apilarse
   la altura es la del contenido, no habría espacio libre y `margin-top: auto` no
   introduce hueco. */
@media (min-width: 768px) {
  /* #testimonials es el id de docoweb; #testimonios el de docokids (index_ds.html). Ambos deben alinear la atribución al fondo. */
  #testimonials figure,
  #testimonios figure {
    display: flex;
    flex-direction: column;
  }
  #testimonials .attribution,
  #testimonios .attribution { margin-top: auto; }
}