/* ══════════════════════════════════════════════════════════════
   AMOBLARQ — Reseñas de clientes
   Tarjeta de promedio con atribución + carrusel horizontal en
   bucle infinito. Sin salto al dar la vuelta: la fila se duplica
   en ambos extremos y el JS reposiciona en translate3d sin
   transición en el instante del wrap.

   Las reseñas llegan desde el panel, ya escritas: la web no las
   pide a ningún servicio. Por eso no hay estado de carga ni de
   error que dibujar, y el texto va completo y sin recortar.
   ══════════════════════════════════════════════════════════════ */

.reviews{background:var(--paper);border-block:1px solid var(--line-soft)}

/* ── Encabezado: título a la izquierda, resumen a la derecha ── */
.reviews-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.75rem,4vw,3.5rem);align-items:end;
  margin-bottom:clamp(2.25rem,4vw,3.25rem);
}
.reviews-title{text-wrap:balance}
/* Bajada que se escribe a mano, debajo del título. */
.reviews-note-line{
  font-size:.8125rem;color:var(--muted);margin-top:.9rem;
  max-width:44ch;text-wrap:pretty;
}

/* Tarjeta de promedio. Es un dato, no una promoción: por eso es
   una ficha chica y no una caja con sombra. */
.reviews-summary{
  display:flex;align-items:center;gap:1.4rem;
  padding:.95rem 1.25rem .95rem 1.4rem;
  background:var(--bg-elev);border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
}
.reviews-score{
  font-family:var(--ff-serif);font-weight:300;line-height:1;
  font-size:clamp(2.4rem,3.6vw,3.1rem);letter-spacing:-.045em;
  font-variant-numeric:lining-nums tabular-nums;flex-shrink:0;
}
.reviews-summary-body{min-width:0}
.reviews-stars{display:flex;gap:.15rem;color:var(--ink);margin-bottom:.4rem}
.reviews-summary-meta{
  display:block;font-size:.8125rem;color:var(--muted);line-height:1.4;
  text-wrap:pretty;
}
.reviews-verified{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);
}
.reviews-verified svg{flex-shrink:0;color:var(--muted)}

/* ── Fila de tarjetas ─────────────────────────────────────────── */
/* El ancho lo define CSS, no JS: así el navegador no recalcula
   nada al cargar y no hay salto de contenido (CLS). */
.reviews-viewport{overflow:hidden;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.reviews-track{
  display:flex;gap:clamp(.85rem,1.6vw,1.35rem);
  will-change:transform;transform:translate3d(0,0,0);
}
.reviews-track.is-animating{transition:transform var(--rv-shift,560ms) var(--ease-out)}
.reviews-track.is-static{transition:none}

.review-card{
  flex:0 0 clamp(272px,30%,400px);
  display:flex;flex-direction:column;gap:.9rem;
  padding:1.6rem;background:var(--bg-elev);
  border:1px solid var(--line-soft);border-radius:var(--r-xl);
  scroll-snap-align:start;
}
/* El clon es invisible para lectores de pantalla: si no, la misma
   reseña se leería dos veces al recorrer con el teclado. */
.review-card[data-clone]{aria-hidden="true"}

.review-card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.review-stars{display:flex;gap:.14rem;color:var(--ink);flex-shrink:0}
.review-date{font-size:.7rem;color:var(--muted);white-space:nowrap;letter-spacing:.01em}

.review-text{
  font-size:.9375rem;line-height:1.7;color:var(--ink-2);
  font-weight:300;letter-spacing:-.005em;flex:1;text-wrap:pretty;
}
.review-author{
  display:flex;align-items:center;gap:.7rem;
  padding-top:.85rem;border-top:1px solid var(--line-soft);
}
.review-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:var(--sand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-serif);font-size:.95rem;font-weight:400;
}
.review-avatar img{width:100%;height:100%;object-fit:cover}
.review-author-name{
  display:block;font-size:.8125rem;font-weight:600;letter-spacing:-.006em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Respuesta del dueño: se muestra sólo si existe. */
.review-reply{
  font-size:.8125rem;line-height:1.6;color:var(--muted);
  padding:.7rem .85rem;background:var(--bg);border-radius:var(--r);
  border-left:2px solid var(--line-hard);text-wrap:pretty;
}
.review-reply b{font-weight:600;color:var(--ink-2)}

/* ── Controles ────────────────────────────────────────────────── */
.reviews-controls{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(1.5rem,2.6vw,2.25rem);
}
/* Cinturón y tirantes: si el panel no dejó nada adentro, la fila no
   debe reservar el margen superior. */
.reviews-controls:empty{display:none}
.review-arrow{
  width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-hard);border-radius:50%;
  color:var(--ink);background:transparent;cursor:pointer;
  transition:background var(--tr),color var(--tr),border-color var(--tr),transform var(--tr),opacity var(--tr);
}
.review-arrow:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.review-arrow:active:not(:disabled){transform:scale(.94)}
.review-arrow:disabled{opacity:.28;cursor:default}

.reviews-progress{
  flex:1;min-width:120px;height:2px;background:var(--line);position:relative;overflow:hidden;
}
.reviews-progress i{
  position:absolute;inset:0 auto 0 0;display:block;width:var(--rv-pct,25%);
  background:var(--ink);transform-origin:left center;
  transition:width var(--rv-shift,560ms) var(--ease-out);
}
.reviews-counter{
  font-size:.75rem;color:var(--muted);letter-spacing:.08em;
  font-variant-numeric:tabular-nums;flex-shrink:0;
}
.review-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--line-hard);padding-bottom:.2rem;
  transition:border-color var(--tr),gap var(--tr);
}
.review-link:hover{border-color:var(--ink);gap:.7rem}
.review-link svg{flex-shrink:0}

/* Google G multicolor. Es el logotipo oficial: sólo aparece cuando el
   dueño cargó el link de su perfil, que es el caso en que las reseñas
   vienen efectivamente de Google y hay que atribuirlo. */
.review-g{
  display:inline-flex;align-items:center;gap:.45rem;flex-shrink:0;
}
.review-g svg{display:block}

/* ── Pocas reseñas: todo entra en pantalla ────────────────────
   Con dos o tres reseñas no hay nada que deslizar. En vez de dejar
   un hueco a la derecha y mostrar flechas que no hacen nada, las
   tarjetas se reparten el ancho y los controles desaparecen. El
   enlace al perfil se queda: es el que sirve para eso. */
.reviews.is-full .review-card{flex:1 1 0;min-width:0;max-width:400px}
.reviews.is-full .review-arrow,
.reviews.is-full .reviews-progress,
.reviews.is-full .reviews-counter{display:none}
.reviews.is-full .reviews-controls{justify-content:flex-start}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:900px){
  .reviews-head{grid-template-columns:1fr;align-items:start;gap:1.75rem}
  .reviews-summary{justify-content:flex-start}
  .review-card{flex-basis:clamp(260px,62%,340px)}
}
@media(max-width:560px){
  .review-card{flex-basis:78%}
  .reviews-controls{gap:.7rem}
  .review-arrow{width:40px;height:40px}
  .reviews-counter{display:none}
  .review-link{font-size:.7rem}
  .reviews-summary{gap:1rem;padding:.85rem 1rem .85rem 1.1rem}
}
@media(max-width:359px){
  .review-card{flex-basis:100%}
  .reviews-progress{display:none}
}
@media(prefers-reduced-motion:reduce){
  .reviews-track,.reviews-progress i{transition:none!important}
}