/* ===========================================================
   DORILA — carousel.css
   Carrusel de testimonios. Multi-slide responsive:
   1 tarjeta en móvil (compacto), 2 en tablet, 4 en desktop.
   La cantidad visible se controla con --slides-per-view.
   =========================================================== */
.carousel{ position:relative; padding-block:var(--space-1) var(--space-2); --slides-per-view:1; }
.carousel-viewport{ overflow:hidden; border: var(--border-frame); border-radius: var(--radius-card); background: var(--color-parchment-soft); }
.carousel-viewport:focus-visible{ outline-offset:-4px; }
.carousel-track{ display:flex; transition: transform var(--transition-med); }
.carousel-slide{
  flex:0 0 calc(100% / var(--slides-per-view));
  min-width:0;
  padding: clamp(0.9rem, 3vw, 1.4rem) clamp(0.8rem, 4vw, 1.6rem);
  display:flex; flex-direction:column; gap: var(--space-1); align-items:center; text-align:center;
}
.carousel-slide blockquote{ margin:0; }
.carousel-stars{ display:flex; gap:0.2rem; color: var(--color-gold); }
.carousel-stars svg{ width:16px; height:16px; fill: currentColor; }
.carousel-quote{ font-family: var(--font-display); font-size: var(--fs-mid); color: var(--color-ink); line-height: var(--lh-display); text-wrap:balance; }
.carousel-text{ font-size: var(--fs-small); color: var(--color-body); max-width: 52ch; }
.carousel-author{ display:flex; align-items:center; gap:0.6rem; margin-top:auto; padding-top: var(--space-1); }
.carousel-avatar{ width:36px; height:36px; border-radius:50%; background: var(--color-forest); color: var(--color-parchment-soft); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-size:0.95rem; flex-shrink:0; }
.carousel-author-name{ font-weight:700; color: var(--color-ink); font-size: var(--fs-small); }
.carousel-author-meta{ font-size: var(--fs-tiny); color: var(--color-body-soft); }
.carousel-nav{ display:flex; align-items:center; justify-content:center; gap: var(--space-2); margin-top: var(--space-2); }
.carousel-btn{ width:36px; height:36px; border-radius:50%; border:2px solid var(--color-terracotta); background:var(--color-parchment-soft); color: var(--color-terracotta); display:inline-flex; align-items:center; justify-content:center; transition: background var(--transition-fast), color var(--transition-fast); }
.carousel-btn:hover{ background: var(--color-terracotta); color: var(--color-parchment-soft); }
.carousel-btn svg{ width:16px; height:16px; }
.carousel-dots{ display:flex; gap:0.4rem; }
.carousel-dot{ width:9px; height:9px; border-radius:50%; border:1px solid var(--color-terracotta); background:transparent; padding:0; transition: background var(--transition-fast); }
.carousel-dot.is-active{ background: var(--color-terracotta); }

/* Etiqueta de categoría dentro de un slide del carrusel */
.carousel-slide .card-tag{ font-size: var(--fs-tiny); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color: var(--color-salvia); border:1px solid var(--color-line); padding:0.2rem 0.6rem; border-radius:999px; }

@media (min-width:640px){
  .carousel{ --slides-per-view:2; }
  .carousel-slide{ padding: clamp(1.1rem, 2.5vw, 1.8rem); }
  .carousel-text{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}
@media (min-width:1000px){
  .carousel{ --slides-per-view:4; }
}

@media (prefers-reduced-motion: reduce){
  .carousel-track{ transition:none; }
}