/* Depoimentos do grupo de clientes (js/depoimentos.js). Serve na página inicial (fundo claro) e na landing (fundo azul):
   o texto da esquerda herda a cor da página, a conversa é sempre um cartão claro. */
.depoimentos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; }

.dep-selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 99px; background: rgba(37, 211, 102, .14); color: #0E7A3A; font: 700 13px/1 var(--f-texto); }
.dep-selo i { width: 8px; height: 8px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 4px rgba(37, 211, 102, .25); }
.dep-titulo { margin: 16px 0 14px; font: 800 clamp(30px, 3.4vw, 46px)/1.04 var(--f-titulo); letter-spacing: -.01em; text-wrap: balance; }
.dep-texto > p { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.55; opacity: .8; }
.dep-numeros { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 28px 0 0; }
.dep-numeros div { display: grid; gap: 2px; }
.dep-numeros dt { font: 800 clamp(30px, 3vw, 40px)/1 var(--f-titulo); }
.dep-numeros dd { margin: 0; font-size: 14px; opacity: .72; }

/* conversa */
.dep-chat { position: relative; border-radius: 28px; overflow: hidden; background: #EFE9E1; box-shadow: var(--sombra-alta); color: #111B21; border: 1px solid rgba(10, 31, 92, .08); }
.dep-chat::before { /* papel de parede discreto, no lugar do desenho do WhatsApp */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(10, 31, 92, .09) 1.2px, transparent 1.3px); background-size: 18px 18px;
}
.dep-chat-topo { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--marinho); color: #fff; }
.dep-chat-topo b { display: block; font: 700 16px/1.2 var(--f-titulo); }
.dep-chat-topo small { font-size: 13px; opacity: .7; }
.dep-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azul); flex: none; }

.dep-chat-corpo { position: relative; padding: 16px 16px 0; }
.dep-pergunta { position: relative; z-index: 2; margin: 0 0 12px auto; max-width: 88%; padding: 10px 12px 8px; border-radius: 14px 4px 14px 14px; background: #D9FDD3; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.dep-pergunta .dep-nome { color: #0E7A3A; }

.dep-janela { position: relative; height: 430px; overflow: hidden; outline: none;
  -webkit-mask-image: linear-gradient(transparent, #000 36px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(transparent, #000 36px, #000 calc(100% - 48px), transparent); }
.dep-trilho { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 10px; }
.dep-copia { display: none; }

.dep-balao { position: relative; max-width: 88%; width: fit-content; padding: 8px 12px 7px; border-radius: 4px 14px 14px 14px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.dep-nome { display: block; margin-bottom: 2px; font: 700 14px/1.3 var(--f-texto); }
.dep-nome em { margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: var(--azul-claro); color: var(--azul); font: 700 11px/1.4 var(--f-texto); font-style: normal; vertical-align: 1px; }
.dep-balao p, .dep-pergunta p { margin: 0; font: 400 15.5px/1.42 var(--f-texto); overflow-wrap: anywhere; }
.dep-mencao { color: #0E7A3A; font-weight: 700; }
.dep-balao time, .dep-pergunta time { display: block; margin-top: 2px; text-align: right; font-size: 11.5px; color: #667781; }
.dep-novo { margin-left: auto; border-radius: 14px 4px 14px 14px; background: #fff; outline: 2px solid var(--azul-claro); }

/* rolagem contínua: duas cópias da lista sobem juntas e emendam */
.dep-anima .dep-copia { display: grid; }
.dep-anima .dep-janela > .dep-trilho { animation: dep-subir 64s linear infinite; }
.dep-anima .dep-janela:hover > .dep-trilho,
.dep-anima .dep-janela:focus-within > .dep-trilho,
.dep-anima .dep-janela:active > .dep-trilho { animation-play-state: paused; }
@keyframes dep-subir { to { transform: translateY(-100%); } }

/* sem animação: a janela vira rolagem normal */
.depoimentos:not(.dep-anima) .dep-janela { overflow-y: auto; -webkit-mask-image: none; mask-image: none; padding-bottom: 16px; }

@media (max-width: 860px) {
  .depoimentos { grid-template-columns: 1fr; }
  .dep-janela { height: 380px; }
  .dep-chat { border-radius: 22px; }
}

/* landing: o texto da esquerda fica branco sobre o azul */
.lp-depoimentos .dep-texto { color: #fff; }
.lp-depoimentos .dep-selo { background: rgba(255, 255, 255, .14); color: #fff; }