/* Carga la fuente si no la estás encolando desde PHP */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root{
  --rf-dot-active:#AF986B;
  --rf-dot-inactive:#A5A5A5;
}

/* Fuerza Bebas Neue en todo el widget (evita icon fonts) */
.rf-reviews-slider,
.rf-reviews-slider *:not(i):not([class*="icon"]):not([class*="eicon"]){
  font-family:"Bebas Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight:400 !important; /* Bebas Neue (Google) es un solo peso */
  letter-spacing:.2px;
}

/* Contenedor */
.rf-reviews-slider{ position:relative; overflow:hidden; }

/* Avatares fijos y animados */
.rf-avatars {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap; /* permite que los elementos bajen de línea si no caben */
}

/* Tablets (hasta 768px) */
@media (max-width: 768px) {
  .rf-avatars {
   margin-top: 70px;
  }
}

/* Móviles (hasta 480px) */
@media (max-width: 480px) {
  .rf-avatars {
    /*flex-direction: column;  coloca los avatares uno debajo del otro */
    align-items: flex-start; /* alinea al inicio para mejor lectura */
        margin-top: 70px;
       
  }
}

.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;  /* principal 100x100 */
}
.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{
  /* con la regla global ya hereda Bebas Neue */
  font-size:27px;
  color:#B0976D;
  line-height:1.2;
  margin-bottom:8px;
}
.rf-text{
  /* hereda Bebas Neue */
  color:#fff;
  font-size:20px;
  line-height:1.45;
}

/* Slider de texto (independiente de las fotos) */
.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);
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  line-height:0;
  min-width:0;
  appearance:none;
  box-shadow:none;
}
.rf-dot[aria-current="true"]{
  background:var(--rf-dot-active);
  transform:scale(1.15);
}
.rf-dot:focus-visible{
  outline:2px solid var(--rf-dot-active);
  outline-offset:2px;
}