/* ==========================================================================
   Depoimentos em colunas verticais (porte do "Testimonials Columns" do 21st.dev,
   testimonials-columns-1, de React/motion para CSS + JS puro)
   Os dados vêm de assets/data/depoimentos.json, renderizados por assets/js/depoimentos.js
   ========================================================================== */
.tcols{
  --tcols-h:min(740px,calc(78svh / var(--z,1)));
  --tcols-gap:20px;
  display:flex;justify-content:center;gap:var(--tcols-gap);
  max-height:var(--tcols-h);overflow:hidden;margin-top:clamp(32px,calc(4vw / var(--z,1)),56px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
.tcols[hidden]{display:none}
.tcol{flex:0 1 360px;min-width:0}
.tcol:nth-child(2),.tcol:nth-child(3){display:none}
@media (min-width:768px){.tcol:nth-child(2){display:block}}
@media (min-width:1100px){.tcol:nth-child(3){display:block}}

.tcol-track{
  display:flex;flex-direction:column;gap:var(--tcols-gap);padding-bottom:var(--tcols-gap);
  animation:tcol-up var(--tcol-dur,46s) linear infinite;will-change:transform;
}
@keyframes tcol-up{to{transform:translateY(-50%)}}
.tcols:hover .tcol-track,.tcols:focus-within .tcol-track{animation-play-state:paused}

.tcard{
  margin:0;padding:28px;border-radius:var(--radius,22px);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-dark,rgba(120,170,210,.22));
  box-shadow:0 18px 40px rgba(0,16,28,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--on-dark-2,#B7CAD4);
}
.tcard-text{margin:0;font-size:15px;line-height:1.65}
.tcard-stars{display:flex;gap:2px;margin-bottom:12px;color:var(--accent-light,#7FD1C3)}
.tcard-stars svg{width:14px;height:14px;fill:currentColor}
.tcard figcaption{display:flex;align-items:center;gap:12px;margin-top:20px}
.tcard-avatar{
  flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:700;letter-spacing:.04em;color:#fff;
  background:var(--brand,#004063);border:1px solid var(--line-dark,rgba(120,170,210,.22));
}
.tcard-name{display:block;font-weight:600;color:var(--on-dark,#fff);line-height:1.3}
.tcard-src{display:block;font-size:12px;letter-spacing:.04em;opacity:.75;line-height:1.3}

/* Em fundo claro (se a seção não for escura) */
:where(.s-light,.s-alt) .tcard{background:var(--card,#fff);border-color:var(--line-light,#C9D9E6);
  box-shadow:0 18px 40px rgba(var(--shadow-rgb,0,64,99),.10);color:var(--ink-2,#4A6070)}
:where(.s-light,.s-alt) .tcard-name{color:var(--ink,#0F2A3A)}
:where(.s-light,.s-alt) .tcard-stars{color:var(--accent-2,#2A7D70)}

/* Movimento reduzido: nada corre; a coluna vira uma lista rolável */
@media (prefers-reduced-motion:reduce){
  .tcol-track{animation:none}
  .tcols{overflow:auto;-webkit-mask-image:none;mask-image:none}
  .tcol-track [aria-hidden="true"]{display:none}
}

/* Ajuste (cliente, 15/10): tudo alinhado à esquerda (a seção é centralizada e o texto herdava
   o center) e cards mais escuros que o fundo azul da seção, para se destacarem. */
.tcard{
  text-align:left;
  background:linear-gradient(180deg,rgba(0,14,26,.82) 0%,rgba(0,10,20,.9) 100%);
  border:1px solid rgba(120,170,210,.18);
  box-shadow:0 22px 44px -18px rgba(0,8,16,.65);
}
.tcard-stars{justify-content:flex-start}
.tcard figcaption{justify-content:flex-start;text-align:left}
.tcard-avatar{background:#003252;border-color:rgba(120,170,210,.28)}