/* ===================================================================
   social.css — logos · testimonios
   La prueba social: quién ya confió y qué dijo.
   =================================================================== */

/* ═══════════════════════ LOGOS ═════════════════════════════════ */

.logos__titulo {
  font-family: var(--tipo-tecnica);
  font-size: var(--paso--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
  text-align: center;
  margin-bottom: var(--e-6);
}

.logos__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-7);
  list-style: none;
  margin: 0;
  padding: 0;
}

.logo__imagen {
  max-height: 42px;
  width: auto;
  /* En escala de grises los logos ajenos no pelean con la paleta del
     sitio ni entre ellos. Recuperan color al pasar el puntero. */
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--transicion), opacity var(--transicion);
}

.logo:hover .logo__imagen { filter: none; opacity: 1; }

.fondo--oscuro .logo__imagen { filter: grayscale(1) brightness(2.2); }
.fondo--oscuro .logo:hover .logo__imagen { filter: brightness(1.1); }

/* Marquesina: desplazamiento continuo. La lista se duplica en la
   vista para que el ciclo cierre sin salto. */
.logos--marquesina { overflow: hidden; }

.logos--marquesina .logos__pista {
  display: flex;
  width: max-content;
  gap: var(--e-7);
  animation: desfile 38s linear infinite;
}

.logos--marquesina .logos__lista { flex-wrap: nowrap; justify-content: flex-start; }
.logos--marquesina:hover .logos__pista { animation-play-state: paused; }

@keyframes desfile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Sin movimiento: la marquesina se vuelve una lista quieta. */
@media (prefers-reduced-motion: reduce) {
  .logos--marquesina .logos__pista {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logos--marquesina .logos__pista > :last-child { display: none; }
}

/* ═══════════════════════ TESTIMONIOS ═══════════════════════════ */

.testimonios__titulo {
  font-size: clamp(var(--paso-3), 3.4vw, var(--paso-4));
  font-stretch: 106%;
  margin-bottom: var(--e-6);
  max-width: 40rem;
}

.testimonio {
  display: flex;
  flex-direction: column;
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea);
}

/* Sin comillas decorativas gigantes: la cita se distingue por su
   propio cuerpo tipográfico, que ya es serif. */
.testimonio__cita {
  font-size: var(--paso-1);
  line-height: 1.6;
  margin: 0;
}

.testimonio__cita::before { content: '\201C'; }
.testimonio__cita::after  { content: '\201D'; }

.testimonio__firma {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-top: var(--e-5);
}

.testimonio__foto {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  filter: grayscale(1);
}

.testimonio__nombre {
  font-family: var(--tipo-titulo);
  font-size: var(--paso-0);
  font-weight: var(--peso-medio);
  display: block;
}

.testimonio__cargo {
  font-family: var(--tipo-tecnica);
  font-size: var(--paso--2);
  letter-spacing: 0.06em;
  color: var(--tenue);
  display: block;
  margin-top: 2px;
}

/* ── Variantes ─────────────────────────────────────────────────── */

.testimonios--rejilla_2 .testimonios__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-6) var(--e-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.testimonios--destacado_unico .testimonios__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 46rem;
}

.testimonios--destacado_unico .testimonio {
  border-top: 2px solid var(--sobre-fondo);
  padding-top: var(--e-6);
}

.testimonios--destacado_unico .testimonio__cita {
  font-size: clamp(var(--paso-2), 2.6vw, var(--paso-3));
  line-height: 1.4;
}

/* El carrusel comparte el mecanismo con el de galería: misma pista
   con anclaje nativo, mismos botones. */
.testimonios--carrusel .testimonios__lista {
  display: flex;
  gap: var(--e-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding-bottom: var(--e-4);
}

.testimonios--carrusel .testimonio {
  flex: 0 0 min(440px, 82%);
  scroll-snap-align: start;
}

.carrusel__controles {
  display: flex;
  gap: var(--e-2);
  justify-content: flex-end;
  margin-bottom: var(--e-4);
}

.carrusel__boton {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--sobre-fondo);
  cursor: pointer;
  font-family: var(--tipo-tecnica);
  transition: border-color var(--transicion);
}
.carrusel__boton:hover { border-color: var(--color-acento); }
.carrusel__boton[disabled] { opacity: .35; cursor: default; }

@media (max-width: 760px) {
  .testimonios--rejilla_2 .testimonios__lista { grid-template-columns: 1fr; }
  .logos__lista { gap: var(--e-5); }
  .logo__imagen { max-height: 32px; }
}