/* Testimonials V4 (/testimonios in the V4 journey, docs/work/testimonios-v4).
   Page layout on top of tokens.css + components.css; header and footer come from home.css.
   Mobile first (360–430px); 720px two columns of reviews; 960px desktop. */

body.tm-page { margin: 0; }
.tm-page img { max-width: 100%; }
.tm-page [hidden] { display: none; }
.tm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* No sticky bar on this page: the footer does not reserve its space */
body.tm-page .v3-footer { padding-bottom: calc(var(--space-32) + env(safe-area-inset-bottom, 0px)); }

/* ---------- Hero ---------- */
.tm-hero__grid { display: grid; gap: var(--space-32); }
.tm-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); min-width: 0; }
.tm-hero__title { margin: 0; font: 800 38px/42px var(--font-sans); letter-spacing: -0.02em; }
.tm-hero__lead { margin: 0; max-width: 520px; font: 400 17px/26px var(--font-sans); color: var(--ink-muted); }
.tm-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-16); width: 100%; margin-top: var(--space-8); }
.tm-hero__actions .uv-btn--lg { flex: 1 1 100%; }
.tm-hero__actions .uv-btn--ghost .uv-icon,
.tm-hero__trust { margin-top: var(--space-32); }
.tm-hero__trust .uv-trust { border: 1px solid var(--line); }

/* Rating summary card */
.tm-summary {
  display: flex; flex-direction: column; gap: var(--space-16); min-width: 0;
  padding: var(--space-24) var(--space-16);
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.tm-summary__head { display: flex; align-items: center; gap: var(--space-16); }
.tm-summary__value { font: 800 44px/44px var(--font-sans); letter-spacing: -0.03em; }
.tm-summary__meta { display: flex; flex-direction: column; gap: var(--space-4); }
.tm-summary__stars .uv-icon { width: 20px; height: 20px; }
.tm-summary__count { font: 700 15px/20px var(--font-sans); }
.tm-summary__note { display: flex; align-items: center; gap: var(--space-8); margin: 0; padding-top: var(--space-16); border-top: 1px solid var(--line); font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
.tm-summary__note .uv-icon { width: 16px; height: 16px; }

.tm-dist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.tm-dist li { display: grid; grid-template-columns: var(--space-32) minmax(0, 1fr) var(--space-48); align-items: center; gap: var(--space-12); font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
.tm-dist__label { display: inline-flex; align-items: center; gap: var(--space-4); }
.tm-dist__label .uv-icon { width: 14px; height: 14px; fill: var(--star); stroke: var(--star); }
.tm-dist__bar { display: block; height: var(--space-8); border-radius: var(--radius-pill); background: var(--surface-100); overflow: hidden; }
.tm-dist__bar span { display: block; height: 100%; border-radius: inherit; background: var(--star); }
.tm-dist__count { text-align: right; font-weight: 700; color: var(--ink); }

/* ---------- Featured review ---------- */
.tm-featured {
  display: grid; gap: var(--space-24); margin: 0 0 var(--space-48);
  padding: var(--space-24) var(--space-16);
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.tm-featured__body { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.tm-featured__mark { width: var(--space-32); height: var(--space-32); color: var(--ink-subtle); }
.tm-featured__quote { margin: 0; max-width: var(--measure); font: 500 17px/26px var(--font-sans); }
.tm-featured__aside { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }

/* ---------- Review list ---------- */
.tm-list-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-16); margin-bottom: var(--space-24); }
.tm-list-head .uv-section__title { margin: 0 0 var(--space-4); }
.tm-list-head__count { margin: 0; color: var(--ink-muted); }

.tm-sort { display: flex; align-items: center; gap: var(--space-12); font-weight: 700; }
.tm-sort__control { position: relative; display: inline-flex; }
.tm-sort select {
  -webkit-appearance: none; appearance: none; min-height: var(--tap-min);
  padding: 0 calc(var(--space-16) + var(--space-24)) 0 var(--space-16);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-200); color: var(--ink); font: 600 16px/20px var(--font-sans); cursor: pointer;
}
.tm-sort select:hover { border-color: var(--ink); }
.tm-sort .uv-icon { position: absolute; right: var(--space-12); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-muted); }

.tm-chips { margin-bottom: var(--space-24); }
@media (max-width: 719px) {
  /* One scrollable row of chips; the padding keeps the focus ring visible */
  .tm-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--space-16) * -1) var(--space-16); padding: var(--space-4) var(--space-16); scrollbar-width: none; }
  .tm-chips::-webkit-scrollbar { display: none; }
}

.tm-list { display: grid; gap: var(--space-16); align-items: start; }
.tm-list .uv-review:focus { outline: none; }
.tm-list .uv-review:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* With JavaScript, long texts start at six lines and "Leer más" opens them */
.tm-js .tm-list .uv-review__text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.tm-js .tm-list .uv-review.is-expanded .uv-review__text { display: block; -webkit-line-clamp: unset; overflow: visible; }
.tm-list[aria-busy="true"] { opacity: .45; }

.tm-status { display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin: var(--space-24) 0 0; font-weight: 600; color: var(--danger); }
.tm-more { display: flex; justify-content: center; margin-top: var(--space-32); }

/* ---------- Leave a review ---------- */

/* ---------- Closing ---------- */
.tm-closing__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); max-width: var(--measure); text-align: center; }
.tm-closing .uv-section__title { margin: 0; color: var(--on-inverse); }
.tm-closing p { margin: 0 0 var(--space-8); font: 400 17px/26px var(--font-sans); color: var(--on-inverse-muted); }
.tm-closing :focus-visible { outline-color: var(--on-inverse); }

@media (min-width: 720px) {
  .tm-hero__actions .uv-btn--lg { flex: none; }
  .tm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
  .tm-list .uv-review { padding: var(--space-24); }
  .tm-summary, .tm-featured { padding: var(--space-32); }
}

@media (min-width: 960px) {
  .tm-hero__grid { grid-template-columns: minmax(0, 1fr) 480px; align-items: center; gap: var(--space-48); }
  .tm-hero__title { font-size: 56px; line-height: 60px; letter-spacing: -0.025em; }
  .tm-hero__lead { font-size: 18px; line-height: 28px; }
  .tm-hero__trust { margin-top: var(--space-48); }
  .tm-featured { grid-template-columns: minmax(0, 1fr) 280px; align-items: end; gap: var(--space-48); padding: var(--space-48); }
  .tm-featured__quote { font-size: 18px; line-height: 28px; }
  .tm-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .tm-page .uv-btn, .tm-page .uv-chip { transition: none; }
}