:root{
  --gap: 5px;
  --per-view: 1;             /* móvil por defecto */
}

*{ box-sizing:border-box; }


.testimonial {padding: 2em;
  display: flex;
  justify-content: center;}

.carousel-container {

  width: 100%;
}

.carousel-track-container {
  overflow: hidden;
}

.carousel-track{
  display:flex;
  gap: var(--gap);
  padding: 0;
  margin: 0;
  list-style: none;
  transition: transform .45s ease-in-out;
  will-change: transform;
}

.card{
  flex: 0 0 calc( (100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view) );
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 20px;
}

.card p {
  font-size: 2rem;
  margin-bottom: 14px;
}

.card span {
  font-size: 1.2rem;
  color: #fff;
}

/* Nav (puntos) */
.carousel-nav{
  text-align:center;
  margin-top: 16px;
  display:flex; justify-content:center; gap:5px;
}

.carousel-indicator{
  width: 12px; height: 12px; border-radius: 50%;
  border: none; background:#c9c9c9; cursor:pointer;
}
.carousel-indicator[aria-selected="true"]{
  background:#333;
}

/* Breakpoints */
@media (min-width: 720px){    /* tablet */
  :root{ --per-view: 3; }
}

@media (min-width: 1100px){   /* desktop */
  :root{ --per-view: 4; }
}