:root{
  --rf-dot-active:  #AF986B; /* activo */
  --rf-dot-inactive:#A5A5A5; /* inactivo */
}

.rf-reviews-slider{ position:relative; overflow:hidden; }
.rf-slides{ display:flex; transition:transform .45s ease; }
.rf-slide{ min-width:100%; box-sizing:border-box; padding:8px 0; }

.rf-avatars{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.rf-avatar{ width:80px; height:80px; border-radius:9999px; object-fit:cover; flex:0 0 auto; }
.rf-avatar-main{ width:100px; height:100px; } /* principal 100x100 */
.rf-avatar-next{ opacity:.85; }

.rf-name{
  font-weight:700;
  font-size:27px;
  color:#B0976D;         /* color del nombre */
  line-height:1.2;
  margin-bottom:8px;
}

.rf-text{
  color:#fff;
  font-size:20px;
  line-height:1.45;
}

.rf-dots{ display:flex; gap:10px; margin-top:14px; }
.rf-dot{
  width:8px; height:8px; border-radius:999px;
  background:var(--rf-dot-inactive); border:none; cursor:pointer;
}
.rf-dot[aria-current="true"]{
  background:var(--rf-dot-active);
  transform:scale(1.2);
}

/* --- Avatares fijos y animados --- */
.rf-avatars{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.rf-avatar{ width:80px; height:80px; border-radius:9999px; object-fit:cover;
  opacity:.85; transition:transform .35s ease, opacity .35s ease;
}
.rf-avatar-main{ width:100px; height:100px; opacity:1; }
.rf-avatars.is-changing .rf-avatar-main{ animation: rf-pop .35s ease; }
.rf-avatars.is-changing .rf-avatar-side{ animation: rf-slide .35s ease; }

@keyframes rf-pop { from{transform:scale(.9); opacity:.7;} to{transform:scale(1); opacity:1;} }
@keyframes rf-slide { from{transform:translateX(8px); opacity:.6;} to{transform:translateX(0); opacity:.85;} }

/* --- Texto/Nombre --- */
.rf-name{ font-weight:700; font-size:27px; color:#B0976D; line-height:1.2; margin-bottom:8px; }


/* --- Slider de texto --- */
.rf-reviews-slider{ position:relative; overflow:hidden; }
.rf-slides{ display:flex; transition:transform .45s ease; }
.rf-slide{ min-width:100%; box-sizing:border-box; padding:8px 0; }

/* --- Dots pequeños y circulares --- */
.rf-dots{ display:flex; gap:8px; margin-top:14px; }
.rf-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--rf-dot-inactive, #A5A5A5);
  border:0; padding:0; margin:0; display:inline-block; cursor:pointer;
  line-height:0; min-width:0; appearance:none; box-shadow:none;
}
.rf-dot[aria-current="true"]{
  background:var(--rf-dot-active, #AF986B);
  transform:scale(1.15);
}
.rf-dot:focus-visible{ outline:2px solid var(--rf-dot-active, #AF986B); outline-offset:2px; }