/* ==========================================================
   Carrusel de comentarios: CSS necesario para la versión vanilla.
   Pegalo DESPUÉS de tu <style> actual (mantené el resto de tus
   estilos de .box_card, .card_perfil, .star, etc. tal cual).
   Podés borrar el CSS de tiny-slider.
   ========================================================== */

.wrapper_carrusel {
  position: relative;
  overflow: hidden;              /* recorta lo que sale del carrusel */
}

/* Pista que se desplaza */
.slider_comentarios {
  position: relative;            /* necesario para calcular offsetLeft */
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: max-content;
  will-change: transform;
  touch-action: pan-y;           /* scroll vertical nativo, horizontal lo maneja el JS */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.slider_comentarios.is-dragging { cursor: grabbing; }
.slider_comentarios img { -webkit-user-drag: none; pointer-events: none; }

/* Cada slide = columna con 2 tarjetas */
.slider_comentarios > div {
  flex: 0 0 auto;
  width: 288px;
}

/* Los degradados laterales no deben bloquear el arrastre */
.wrapper_carrusel::before,
.wrapper_carrusel::after {
  pointer-events: none;
}

/* Flechas */
.control_slide {
  list-style: none;
  margin: 0;
  padding: 0;
}
.control_slide li {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.75);
  cursor: pointer;
  transition: background-color .2s ease;
}
.control_slide li:hover { background: rgba(17, 17, 17, 0.95); }
.control_slide li:focus-visible { outline: 3px solid #fdbf05; outline-offset: 2px; }
.control_slide li.prev { left: 8px; }
.control_slide li.next { right: 8px; }
.control_slide li.prev svg { transform: scaleX(-1); }  /* tu SVG apunta a la derecha */
.control_slide li svg { display: block; }

/* Opcional: el slide central se destaca apenas */
.slider_comentarios > div .box_card { transition: opacity .4s ease; opacity: .85; }
.slider_comentarios > div.is-active .box_card { opacity: 1; }

/* Respeta "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
  .slider_comentarios { transition: none !important; }
}

/* En mobile, flechas más chicas y pegadas al borde */
@media (max-width: 575px) {
  .control_slide li { width: 36px; height: 36px; }
  .control_slide li svg { width: 24px; height: 24px; }
}