/* Carrusel de reseñas Primo
   ------------------------------------------------------------------
   Medido en labirrabar.eu, no estimado a ojo:
     tarjeta 310x270, padding 30, radio 10, hueco 36 (paso 346)
     marquesina continua a 60 px/s hacia la izquierda
     avatar 56 redondo, icono de Google 36 con radio 8
     nombre 16/600, cita 18 en cursiva con interlineado 1,46
     separador de 1px, y desvanecido en los bordes al 12,5% y 87,5%
   Los COLORES y las TIPOGRAFIAS son los de Primo, no los de la
   referencia: fondo #1B1B1B, acento #C52233, titulares Segment A Bold
   y texto Poppins, que es lo que ya usa la web. */

.primo-resenas{
  --pr-tarjeta:#242424;
  --pr-linea:#3A3A3A;
  --pr-acento:#C52233;
  --pr-texto:#FFFFFF;
  --pr-suave:rgba(255,255,255,.72);
  --pr-ancho:310px;
  --pr-hueco:36px;
  --pr-velocidad:60;          /* px por segundo */
  color:var(--pr-texto);
}

.primo-resenas__cabecera{ text-align:center; margin:0 auto 42px; max-width:720px; }
/* La clase va repetida a proposito: el tema de Primo fija el tamaño de los
   h2 con mas peso y dejaba el titular en 32px. Asi gana este sin !important. */
.primo-resenas .primo-resenas__titulo.primo-resenas__titulo{
  font-family:"Segment A Bold","Poppins",system-ui,sans-serif;
  text-transform:uppercase; line-height:1.02; margin:0 0 14px;
  font-size:clamp(34px,5.2vw,68px); letter-spacing:.01em;
}
.primo-resenas__titulo em{ font-style:normal; color:var(--pr-acento); }
.primo-resenas__entrada{
  font-family:"Poppins",system-ui,sans-serif; font-size:clamp(15px,1.3vw,18px);
  line-height:1.5; margin:0; color:var(--pr-suave);
}

/* La pista se desvanece por los lados en vez de cortarse en seco */
.primo-resenas__pista{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12.5%,#000 87.5%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 12.5%,#000 87.5%,transparent 100%);
}
.primo-resenas__tira{
  display:flex; gap:var(--pr-hueco); width:max-content;
  /* Sin esto el flex estira TODAS las tarjetas a la altura de la mas larga y
     quedan medio vacias: se midio 514 px de caja para 284 px de contenido. */
  align-items:flex-start;
  will-change:transform;
}

.primo-resenas__tarjeta{
  /* min-width:0 es imprescindible: sin el, el nombre largo (que no parte)
     impone su ancho minimo y la tarjeta se estira mas alla de --pr-ancho */
  flex:0 0 var(--pr-ancho); min-width:0; box-sizing:border-box;
  background:var(--pr-tarjeta); border-radius:10px; padding:24px;
  display:flex; flex-direction:column; gap:12px;
}
.primo-resenas__quien{ display:flex; align-items:center; gap:14px; }
.primo-resenas__cara{
  width:56px; height:56px; border-radius:50%; flex:0 0 56px;
  object-fit:cover; display:block; background:#333;
}
/* Sin foto real se pone la inicial. Nunca una cara inventada. */
.primo-resenas__inicial{
  width:56px; height:56px; border-radius:50%; flex:0 0 56px;
  display:grid; place-items:center;
  font-family:"Segment A Bold","Poppins",sans-serif; font-size:22px;
  background:var(--pr-acento); color:#fff;
}
.primo-resenas__nombre{
  flex:1 1 auto; min-width:0;
  font-family:"Poppins",system-ui,sans-serif; font-size:16px; font-weight:600;
  line-height:1.2; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.primo-resenas__google{ width:36px; height:36px; flex:0 0 36px; border-radius:8px; display:block; }
.primo-resenas__raya{ height:1px; background:var(--pr-linea); }
.primo-resenas__tarjeta p{ margin:0 }
/* WordPress convierte los :) de las reseñas en <img class="wp-smiley"> y el tema
   los pinta a tamaño de foto: una tarjeta se iba a 474 px por un emoticono. */
.primo-resenas .primo-resenas__cita img,
.primo-resenas .primo-resenas__cita img.wp-smiley{
  width:1em !important; height:1em !important; max-width:1em !important;
  min-width:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important;
  display:inline !important; vertical-align:-.15em; border:0; box-shadow:none }
.primo-resenas__cita{
  font-family:"Poppins",system-ui,sans-serif; font-size:18px; font-style:italic;
  line-height:1.46; margin:0; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
}
.primo-resenas__fecha{
  font-family:"Poppins",system-ui,sans-serif; font-size:13px; color:var(--pr-suave);
  margin:0;
}

/* Pildora con la nota global */
.primo-resenas__nota{
  margin:38px auto 0; width:max-content; max-width:100%;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  background:#fff; color:#000; border-radius:999px; padding:16px 24px;
  font-family:"Poppins",system-ui,sans-serif; font-size:16px; font-weight:600;
}
.primo-resenas__nota b{ font-weight:900; }
.primo-resenas__estrellas{ display:flex; gap:2px; }
.primo-resenas__estrellas svg{ width:20px; height:20px; display:block; }

@media (max-width:820px){
  .primo-resenas{ --pr-ancho:260px; --pr-hueco:20px; }
  .primo-resenas__cita{ font-size:16px; }
  .primo-resenas__cabecera{ margin-bottom:28px; }
}
@media (prefers-reduced-motion:reduce){
  .primo-resenas__tira{ transform:none !important; }
  .primo-resenas__pista{ overflow-x:auto; }
}