/* ==========================================================================
   RESEÑAS — carrusel horizontal
   El track es un contenedor de scroll nativo con scroll-snap: el deslizamiento
   con el dedo, el trackpad y las flechas del teclado salen gratis del
   navegador. js/reviews.js solo agrega botones, puntos y avance automatico.
   ========================================================================== */

.reviews-carousel { position: relative; }

.reviews-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* 'proximity', no 'mandatory', a proposito. El inicio de la ultima tarjeta
     cae unos pixeles mas alla del scroll maximo del contenedor (por el padding
     lateral), asi que no es un punto de anclaje alcanzable. Con 'mandatory' el
     navegador solo se deja reposar sobre un punto valido y puede negarse a
     llegar al final; con 'proximity' el ajuste se siente igual pero el final
     del recorrido siempre es una posicion valida. */
  scroll-snap-type: x proximity;
  /* Espacio para que la elevacion de :hover de la tarjeta no quede recortada
     por el contenedor de scroll. */
  padding: 6px 2px 12px;
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 4px; border-radius: var(--radius-lg); }
/* min-width: 0 — un item de grid toma por defecto el ancho minimo de su
   contenido, asi que sin esto una palabra muy larga puede ensanchar la
   columna aunque grid-auto-columns diga otra cosa. */
.reviews-track > .review-card { scroll-snap-align: start; min-width: 0; }

/* Todas las tarjetas de una fila de grid crecen hasta la mas alta: una sola
   reseña larga estiraba el carrusel entero (medido: 542px de alto con un
   testimonio de 600 caracteres, contra 270px normales). Eso es justo lo que
   este carrusel viene a evitar. Se recorta a 8 lineas; el testimonio completo
   sigue vivo en la ficha de Google. */
.reviews-track .review-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
}

/* Tres tarjetas a la vez en escritorio, dos en tablet, una en telefono. */
@media (min-width: 720px)  { .reviews-track { grid-auto-columns: calc((100% - var(--space-4)) / 2); } }
@media (min-width: 1024px) { .reviews-track { grid-auto-columns: calc((100% - var(--space-4) * 2) / 3); } }

/* ---- Controles ---------------------------------------------------------- */

.reviews-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.reviews-nav__btn {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.reviews-nav__btn:hover {
  color: var(--color-text);
  border-color: var(--brand-rosa);
  transform: translateY(-2px);
}
.reviews-nav__btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; }
.reviews-nav__btn svg { width: 19px; height: 19px; }
.reviews-nav__play { margin-left: var(--space-2); }
.reviews-nav__play svg { width: 15px; height: 15px; }
.reviews-nav__play[aria-pressed="true"] { border-color: var(--brand-rosa); color: var(--brand-rosa); }

.reviews-dots { display: flex; align-items: center; gap: var(--space-2); }
.reviews-dots__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  cursor: pointer;
  transition: background-color var(--dur-fast), width var(--dur-fast);
}
.reviews-dots__dot:hover { background: var(--color-text-faint); }
.reviews-dots__dot.is-active { width: 22px; background: var(--brand-rosa); }
.reviews-dots__dot:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; }

@media (max-width: 480px) {
  /* En pantallas chicas los puntos se comen el ancho: quedan solo las flechas,
     que es lo que de verdad se usa junto al gesto de deslizar. */
  .reviews-dots { display: none; }
}