/* Reseñas Primo 1.1.0 — «comandas en la pared»
   ------------------------------------------------------------------
   La 1.0 era un calco de labirrabar.eu (tarjetas oscuras redondeadas,
   cabecera centrada, píldora blanca y bordes desvanecidos). Esta versión
   es de Primo:
     - cada reseña es una comanda de papel con el borde de abajo rasgado,
       un trozo de celo y una inclinación propia, como la tira de fotos;
     - la nota global va en una pegatina roja junto al titular;
     - titular a la izquierda con la sombra en capas de cartel retro;
     - sin desvanecido: la tira corta en seco y se arrastra a mano. */

.primo-resenas{
  --pr-papel:#F4ECDD;
  --pr-tinta:#1A1412;
  --pr-acento:#C52233;
  --pr-texto:#FFFFFF;
  --pr-suave:rgba(255,255,255,.72);
  --pr-mono:"Courier Prime","Courier New",Courier,monospace;
  --pr-ancho:310px;
  --pr-hueco:36px;
  --pr-velocidad:60;          /* px por segundo */
  color:var(--pr-texto);
}

/* ------------------------------ Cabecera ------------------------------ */
.primo-resenas__cabecera{
  max-width:1280px; margin:0 auto 34px; padding:0 30px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.primo-resenas__textos{ max-width:760px; }
.primo-resenas__antetitulo{
  margin:0 0 14px; font-family:var(--pr-mono); font-size:13px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--pr-acento);
}
.primo-resenas__antetitulo::before{ content:"★ "; }
/* 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 Black","Segment A Bold","Poppins",system-ui,sans-serif;
  text-transform:uppercase; line-height:.98; margin:0 0 18px;
  font-size:clamp(36px,5.4vw,74px); letter-spacing:.01em; color:var(--pr-texto);
  /* cartel retro: dos capas desplazadas, roja y negra */
  text-shadow:3px 3px 0 var(--pr-acento), 6px 6px 0 #000;
}
.primo-resenas__titulo em{
  font-style:normal; display:block; color:var(--pr-acento);
  text-shadow:3px 3px 0 #000;
}
.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); max-width:520px;
}

/* Pegatina con la nota global */
.primo-resenas__pegatina{
  flex:0 0 auto; width:176px; height:176px; border-radius:50%;
  background:var(--pr-acento); color:#fff; transform:rotate(-9deg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative;
  box-shadow:0 14px 30px rgba(0,0,0,.55), inset 0 0 0 7px var(--pr-acento), inset 0 0 0 9px rgba(255,255,255,.85);
}
.primo-resenas__pegatina::after{ /* brillo de vinilo */
  content:""; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 45%);
  pointer-events:none;
}
.primo-resenas__pegatina-nota{
  font-family:"Segment A Black","Segment A Bold","Poppins",sans-serif;
  font-size:56px; line-height:.9; text-shadow:3px 3px 0 rgba(0,0,0,.35);
}
.primo-resenas__pegatina-estrellas{ font-size:15px; letter-spacing:3px; margin:4px 0 6px; color:#FFD34D; }
.primo-resenas__pegatina-pie{
  font-family:var(--pr-mono); font-size:11px; font-weight:700; line-height:1.25;
  letter-spacing:.08em; text-transform:uppercase;
}

/* ------------------------------- La tira ------------------------------- */
.primo-resenas__pista{
  position:relative; overflow:hidden;
  /* 1.1.2: la tira ocupa todo el ancho de la ventana, aunque el widget esté
     dentro de un contenedor con relleno (en /menu-del-dia/ dejaba 94 px a cada
     lado). Los 15 px de más de la barra de scroll los recorta #page. */
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.primo-resenas__pista.is-arrastrando{ cursor:grabbing; }
.primo-resenas__tira{
  display:flex; gap:var(--pr-hueco); width:max-content;
  /* hueco arriba y abajo para el celo y la inclinación, que si no se cortan */
  padding:34px 0 40px;
  /* 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;
}

/* -------------------------- Comanda de papel --------------------------- */
.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; position:relative;
  transform:translateY(var(--dy,0)) rotate(var(--rot,0deg));
  /* la sombra va aquí porque la máscara del papel se la comería */
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.5));
}
.primo-resenas__tarjeta:nth-child(4n+1){ --rot:-2.5deg; --dy:6px; }
.primo-resenas__tarjeta:nth-child(4n+2){ --rot:1.8deg;  --dy:-8px; }
.primo-resenas__tarjeta:nth-child(4n+3){ --rot:-1deg;   --dy:12px; }
.primo-resenas__tarjeta:nth-child(4n+4){ --rot:2.6deg;  --dy:-2px; }

/* trozo de celo */
.primo-resenas__tarjeta::before{
  content:""; position:absolute; z-index:2; top:-14px; left:50%;
  width:92px; height:28px; transform:translateX(-50%) rotate(-4deg);
  background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(255,255,255,.18) 50%,rgba(0,0,0,.04)),rgba(236,228,205,.7);
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  /* cantos mordidos, como celo cortado con los dientes */
  clip-path:polygon(0 8%,4% 0,96% 6%,100% 0,98% 50%,100% 100%,94% 94%,6% 100%,0 92%,3% 50%);
}
.primo-resenas__tarjeta:nth-child(even)::before{ transform:translateX(-40%) rotate(5deg); }

.primo-resenas__papel{
  background:var(--pr-papel); color:var(--pr-tinta);
  padding:22px 22px 34px;
  display:flex; flex-direction:column; gap:14px;
  /* borde de abajo rasgado en dientes de sierra */
  --z:9px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%;
}
.primo-resenas__papel p{ margin:0; }

.primo-resenas__ticket{
  display:flex; justify-content:space-between; gap:10px;
  font-family:var(--pr-mono); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(26,20,18,.62);
  padding-bottom:12px; border-bottom:2px dashed rgba(26,20,18,.28);
}
.primo-resenas__puntos{
  display:flex; align-items:flex-start; font-size:22px; line-height:1; letter-spacing:3px; color:var(--pr-acento);
}
.primo-resenas__puntos::after{ /* comilla de cartel */
  content:"\201D"; margin-left:auto; height:22px; letter-spacing:0;
  font-family:"Segment A Black","Segment A Bold",Georgia,serif;
  font-size:64px; line-height:.85;
}
.primo-resenas__puntos-vacias{ color:rgba(26,20,18,.2); }

/* 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:17px; font-weight:500;
  line-height:1.5; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
}


.primo-resenas__quien{
  display:flex; align-items:center; gap:12px;
  padding-top:14px; border-top:2px dashed rgba(26,20,18,.28);
}
/* Sin foto real se pone la inicial, como un sello de goma. Nunca una cara inventada. */
.primo-resenas__inicial{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%;
  display:grid; place-items:center; transform:rotate(-8deg);
  font-family:"Poppins",sans-serif; font-size:19px; font-weight:700;
  color:var(--pr-acento); border:2px solid var(--pr-acento);
  box-shadow:inset 0 0 0 3px var(--pr-papel), inset 0 0 0 4px var(--pr-acento);
}
.primo-resenas__firma{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.primo-resenas__nombre{
  /* Poppins y no la de cartel: a 15 px la condensada no se lee */
  font-family:"Poppins",system-ui,sans-serif; font-size:15px; font-weight:700; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.primo-resenas__fecha{
  font-family:var(--pr-mono); font-size:12px; color:rgba(26,20,18,.62);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.primo-resenas__google{ width:22px; height:22px; flex:0 0 22px; display:block; }

/* -------------------------------- Móvil -------------------------------- */
@media (max-width:820px){
  .primo-resenas{ --pr-ancho:260px; --pr-hueco:22px; }
  .primo-resenas__cabecera{ padding:0 20px; gap:18px; align-items:flex-start; margin-bottom:10px; }
  .primo-resenas .primo-resenas__titulo.primo-resenas__titulo{
    text-shadow:2px 2px 0 var(--pr-acento), 4px 4px 0 #000;
  }
  .primo-resenas__pegatina{ width:112px; height:112px; margin-top:22px; }
  .primo-resenas__pegatina-nota{ font-size:36px; }
  .primo-resenas__pegatina-estrellas{ font-size:10px; letter-spacing:2px; margin:2px 0 3px; }
  .primo-resenas__pegatina-pie{ font-size:8.5px; }
  .primo-resenas__papel{ padding:18px 18px 30px; gap:12px; }
  .primo-resenas__cita{ font-size:15px; }
}
@media (max-width:480px){
  /* la pegatina no cabe al lado del titular: baja a la derecha, a la altura de la
     entradilla (que le deja sitio), sin montarse sobre las comandas */
  .primo-resenas__cabecera{ flex-direction:column; align-items:stretch; gap:0; }
  .primo-resenas__pegatina{ align-self:flex-end; margin:-46px 2px 0 0; }
  .primo-resenas__entrada{ padding-right:112px; }
}
@media (prefers-reduced-motion:reduce){
  .primo-resenas__tira{ transform:none !important; }
  .primo-resenas__pista{ overflow-x:auto; }
}