/* mktn.es · Testimonios (dirección A de Claude Design: "Mosaico justificado por longitud")
   Rejilla que se lee por filas, como el HTML. El ancho de cada tarjeta (--s12 a 1280 px o más, --s6 de 640 a 1279 px) lo calcula
   tools/testimonios.py en proporción a la longitud de la cita. Cuatro clientes conocidos en panel verde (.key). Sin degradados ni
   sombras. Medidas de las entregas a 1440, 1024 y 375 px. */

.tt { --pad: 20px; background: #F4F3EF; color: #161616; font-size: 17px; line-height: 1.5; }
.tt-in { max-width: 1312px; margin: 0 auto; padding: 0 var(--pad); box-sizing: content-box; }
.tt a:focus-visible { outline: 2px solid #1F3A30; outline-offset: 3px; border-radius: 2px; }

/* ── Hero ────────────────────────────────────────────────── */
.tt-hero { padding: calc(72px + 48px) 0 40px; }
.tt-hero-g { display: flex; flex-direction: column; gap: 32px; }
.tt-hero-l { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.tt-eyb { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5E5D58; }
.tt-hero h1 { margin: 0; font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; max-width: 12em; }
.tt-rate { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: #D7EDE8; border-radius: 6px; }
.tt-rate-r { display: flex; align-items: center; gap: 10px; }
.tt-rate .st { font-size: 20px; letter-spacing: .08em; color: #1F3A30; }
.tt-rate-s { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tt-rate .sc { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -.04em; }
.tt-rate .tx { font-size: 16px; color: #5E5D58; }
.tt-rate a { display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; font-size: 16px; font-weight: 600; color: #1F3A30; text-decoration: underline; text-underline-offset: 3px; }
.tt-rate a:hover { color: #161616; }

/* ── Muro ────────────────────────────────────────────────── */
.tt-wall { padding: 0 0 64px; }
.tt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.k { margin: 0; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; padding: 20px; border-radius: 6px; background: #E9E7E1; border: 1px solid #D8D6CF; color: #161616; min-width: 0; }
.k .m { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.k .s { font-size: 15px; letter-spacing: .08em; color: #1F3A30; }
.k .l { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #1F3A30; }
.k blockquote { margin: 0; font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.k blockquote p { margin: 0; }
.k.short blockquote { font-size: 20px; line-height: 1.4; letter-spacing: -.01em; font-weight: 500; }
.k figcaption { margin-top: auto; padding-top: 12px; border-top: 1px solid #D8D6CF; display: flex; align-items: center; gap: 12px; }
.k figcaption img { display: block; flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #D8D6CF; }
.k .in { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: #D7EDE8; color: #1F3A30; }
.k figcaption div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.k .n { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.k .r { margin: 0; font-size: 14px; line-height: 1.35; color: #5E5D58; }
.k.key { padding: 24px; background: #1F3A30; border-color: #1F3A30; color: #F4F3EF; }
.k.key .s { color: #F8E5AB; }
.k.key .l { color: #D7EDE8; }
.k.key blockquote { font-size: 20px; line-height: 1.4; letter-spacing: -.01em; font-weight: 500; }
.k.key figcaption { border-top-color: #3F5A4F; }
.k.key .r { color: #C9D4CE; }
.k.key a:focus-visible { outline-color: #F4F3EF; }

/* ── Cierre ──────────────────────────────────────────────── */
.tt-cta { background: #1F3A30; color: #F4F3EF; padding: 64px 0 72px; }
.tt-cta-g { display: flex; flex-direction: column; gap: 28px; }
.tt-cta h2 { margin: 0; font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; max-width: 10em; }
.tt-cta-r { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.tt-cta-r p { margin: 0; font-size: 17px; line-height: 1.5; color: #C9D4CE; max-width: 28em; text-wrap: pretty; }
.tt-cta-r strong { font-weight: 600; color: #F4F3EF; }
.tt-cta .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: var(--r-btn, 999px); background: #F4F3EF; color: #1F3A30; font-size: 16px; font-weight: 600; text-decoration: none; transition: background-color .15s; }
.tt-cta .btn:hover { background: #D7EDE8; }
.tt-cta a:focus-visible { outline-color: #F4F3EF; }

/* ── 640 px: rejilla de 6 columnas ───────────────────────── */
@media (min-width: 640px) {
  .tt { --pad: 32px; }
  .tt-hero h1 { font-size: 60px; }
  .tt-wall { padding-bottom: 96px; }
  .tt-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .k { grid-column: span var(--s6); gap: 16px; padding: 24px; }
  .k blockquote { font-size: 16px; }
  .k.short blockquote { font-size: 19px; }
  .k.key { padding: 28px; }
  .k.key blockquote { font-size: 20px; }
  .tt-cta { padding: 88px 0 96px; }
  .tt-cta h2 { font-size: 56px; }
  .tt-cta-r p { font-size: 18px; }
}

/* ── 1024 px ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .tt { --pad: 64px; }
  .tt-hero { padding: 160px 0 64px; }
  .tt-hero-g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; }
  .tt-hero h1 { font-size: 60px; }
  .tt-rate { padding: 24px; }
  .tt-rate .sc { font-size: 48px; }
  .tt-cta-g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
}

/* ── 1280 px: rejilla de 12 columnas ─────────────────────── */
@media (min-width: 1280px) {
  .tt-hero { padding: 176px 0 72px; }
  .tt-hero-g { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; }
  .tt-hero h1 { font-size: 80px; }
  .tt-rate { padding: 28px; }
  .tt-rate .sc { font-size: 56px; }
  .tt-wall { padding-bottom: 120px; }
  .tt-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .k { grid-column: span var(--s12); gap: 18px; padding: 28px; }
  .k blockquote { font-size: 17px; }
  .k.short blockquote { font-size: 21px; }
  .k figcaption { padding-top: 16px; }
  .k.key { padding: 36px; }
  .k.key blockquote { font-size: 22px; }
  .tt-cta { padding: 112px 0 120px; }
  .tt-cta-g { gap: 64px; }
  .tt-cta h2 { font-size: 72px; }
  .tt-cta-r p { font-size: 19px; }
}