/* THE RESET · citas en dos filas «en ladrillo» (va después de styles.css).
   app.js mete cada .marquee__group en una .marquee__row dentro de UNA sola .marquee__track animada:
   las dos filas avanzan con la misma animación (mismo px/s, mismo frenado al pasar el ratón).
   La fila 2 se adelanta media tarjeta + medio hueco: es CSS puro, así que se mantiene exacto
   con cualquier reconstrucción o resize. Ancho de tarjeta y hueco fijos → mismo largo de bucle. */
.marquee--bricks{--qw:450px;--gap:18px;--rgap:18px}
.marquee--bricks .marquee__track{display:grid;grid-template-columns:max-content;grid-auto-rows:1fr;row-gap:var(--rgap)}
.marquee--bricks .marquee__row{display:flex;width:max-content;justify-self:start}
.marquee--bricks .marquee__row+.marquee__row{margin-left:calc((var(--qw) + var(--gap)) / -2)}
.marquee--bricks .marquee__group{align-items:stretch}
.marquee--bricks .quote{width:var(--qw)}

@media (max-width:640px){
  .marquee--bricks{--qw:300px;--gap:12px;--rgap:12px}
  .marquee--bricks .quote{padding:16px 18px;gap:12px;border-radius:18px}
  .marquee--bricks .quote::after{right:12px;top:-4px;font-size:120px}
  .marquee--bricks .quote__img{width:44px;height:44px;box-shadow:0 0 0 4px rgba(255,97,26,.08)}
  .marquee--bricks .quote blockquote{font-size:15px;line-height:1.45}
  .marquee--bricks .quote__who{margin-top:10px}
  .marquee--bricks .quote__who b{font-size:15px}
  .marquee--bricks .quote__who span{font-size:13.5px}
}

/* Movimiento reducido: quieto (como antes) y sin cortar la primera cita de la fila 2:
   el ladrillo se hace corriendo la fila 1 a la derecha en vez de la 2 a la izquierda */
@media (prefers-reduced-motion:reduce){
  .marquee--bricks .marquee__row+.marquee__row{margin-left:0}
  .marquee--bricks .marquee__row:first-child{margin-left:calc((var(--qw) + var(--gap)) / 2)}
}