.experienciasClientesSubtitulo {
  font-size: 0.95rem;
  color: #666;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 20px;
}

.experienciasClientesSubtitulo a {
  color: #007bff; /* azul link */
  text-decoration: none;
  font-weight: 500;
}

.experienciasClientesSubtitulo a:hover {
  text-decoration: underline;
}

    :root {
      --bg: #0b1020;
      --card-bg: #131a33;
      --text: #000000;
      --muted: #000000;;
      --gap: 1.25rem;        /* espacio entre tarjetas */
      --duration: 35s;        /* velocidad del scroll (menor = más rápido) */
      --card-w: 340px;        /* ancho base de tarjeta */
      --card-h: 200px;        /* alto base de tarjeta */
      --radius: 16px;
      --accent: rgb(0, 114, 159);
    }

    /* * { box-sizing: border-box; } */
    /* html, body { height: 100%; } */
    /* body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: radial-gradient(1200px 800px at 20% 0%, #101735 0%, #090f20 60%, #070b18 100%);
      color: var(--text);
      display: grid;
      place-items: center;
      padding: 32px 16px;
    } */

    .wrap {
      margin: auto;
      width: min(1500px, 100%);
      display: grid;
      gap: 16px;
    }

    .sub {
      margin: 0 0 8px;
      opacity: 0.8;
      text-align: center;
      font-size: 0.95rem;
    }

    .reel {
      position: relative;
      overflow: hidden; /* recorta el carrusel */
      mask-image: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%);
    }

    .track {
      display: flex;
      gap: var(--gap);
      width: max-content; /* ancho según contenido */
      will-change: transform;
      animation: scroll var(--duration) linear infinite;
      margin: 10px;
    }

    /* Pausa accesible */
    .reel:hover .track,
    .reel:focus-within .track {
      animation-play-state: paused;
    }

    @keyframes scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); } /* se basa en tener duplicado el contenido */
    }

    .testimonio-card {
      flex: 0 0 var(--card-w);
      width: var(--card-w);
      min-height: var(--card-h);
      background: linear-gradient(180deg, rgba(2,153,214, 0.4), rgba(167,68,138,0.4));
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius);
      padding: 18px 18px 16px;
      box-shadow: 3px 5px 5px rgba(0,0,0,0.25);
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 10px;
    }

    .stars { 
        font-size: 18px; 
        letter-spacing: 1.5px; 
        color: darkgoldenrod;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    }

    .quote {
      font-size: 1.1rem;
      line-height: 1.45;
      color: var(--text);
      font-weight: 600;
    }

    .user {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .avatar {
      width: 28px; height: 28px; border-radius: 50%;
      background: #2a355f; display: grid; place-items: center; font-weight: 700; color: #cfe8ff;
    }

    .tag {
      margin-left: auto;
      font-size: 0.85rem;
      color: var(--accent);
      font-weight: 400;
    }

    /* Responsivo */
    @media (max-width: 900px) {
      :root { --card-w: 300px; --duration: 32s; }
    }
    @media (max-width: 640px) {
      :root { --card-w: 260px; --duration: 28s; }
    }

    /* Respeto a reduce motion */
    @media (prefers-reduced-motion: reduce) {
      .track { animation: none; }
    }

    