/* ==========================================================================
   DEPOIMENTOS — quarta dobra.

   Depois da cena escura da metodologia, a página volta ao branco: é a
   superfície mais clara do site inteiro e serve de respiro. Sobre ela, três
   cards de mesma largura, definidos por uma borda de um fio — o mesmo par
   (fundo branco + `--c-border` + sombra quase inexistente) que o design
   system usa em `.component-block` e `.icon-library`.

   Nada aqui é escondido por CSS. A seção nasce completa e legível; quem
   esconde para animar é o assets/js/testimonials.js, e só depois de
   confirmar GSAP, ScrollTrigger e aceitação de movimento.

   O acompanhamento do cursor também é do JS: ele escreve x, y, rotationX e
   rotationY no transform dos cards. Por isso NENHUMA regra desta folha pode
   declarar `transform` em `.voice-card` — o que responde ao hover por aqui
   são só borda, sombra e a escala do retrato, que vivem em outras
   propriedades e nunca disputam com o GSAP.
   ========================================================================== */

.testimonials {
  position: relative;
  padding-block: clamp(96px, 11vw, 160px);
  background: var(--c-bg);
  isolation: isolate;
  scroll-margin-top: 88px;
}

/* Mesmo halo prateado das dobras anteriores, nos valores que o design system
   reserva para seção BRANCA (`.system-section::before`): 520px, desfoque de
   90px e opacidade .08. Sobre pearl ou grafite o halo aguenta muito mais —
   as dobras "Sobre" e "Metodologia" usam .5 e .12 —, mas no branco puro
   qualquer coisa acima disso deixa de ser atmosfera e vira mancha.

   Recortado no próprio invólucro para não alargar a página. */
.testimonials-aura-wrap {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.testimonials-aura {
  position: absolute;
  top: 6%;
  right: -220px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .08;
  background: var(--c-silver);
  animation: auraDrift 24s ease-in-out infinite alternate;
}

/* ==========================================================================
   1. CABEÇALHO

   Mesma grade da metodologia — manchete à esquerda, texto de apoio à
   direita — para que as duas dobras leiam como a mesma mão. A diferença é
   só de superfície: aqui o índice é `--c-muted` sobre branco, lá era branco
   translúcido sobre grafite.
   ========================================================================== */
.testimonials-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
  margin-bottom: clamp(48px, 6vw, 76px);
}

.testimonials-index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: var(--c-muted);
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.testimonials-index::before {
  content: '';
  flex: none;
  width: 38px;
  height: 1px;
  background: currentColor;
}

.testimonials-title {
  max-width: 18ch;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.testimonials-lead {
  max-width: 42ch;
  padding-top: 8px;
  color: var(--c-graphite-medium);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 300;
  line-height: 1.75;
}

/* ==========================================================================
   2. GRADE DOS TRÊS DEPOIMENTOS

   Três colunas iguais e altura uniforme: o `stretch` padrão do grid estica
   cada <li>, e o card ocupa o item inteiro com `flex: 1`. Assim os rodapés
   se alinham entre os cards mesmo com textos de comprimentos diferentes.
   ========================================================================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 26px);
}

/* Camada só de entrada: o reveal anima opacidade e deslocamento AQUI, e o
   acompanhamento do cursor anima o card lá dentro. Duas camadas porque as
   duas animações escrevem `transform` — juntas, uma apagaria a outra. */
.voice { display: flex; }

.voice-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.4vw, 40px);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  /* A sombra do design system para superfícies claras: existe para separar o
     card do fundo, não para pesar. */
  box-shadow: 0 20px 70px rgba(55, 52, 53, .045);
  transition:
    border-color var(--speed-mid) var(--ease-out),
    box-shadow var(--speed-mid) var(--ease-out);
}

.voice-card:hover,
.voice-card:focus-within {
  border-color: var(--c-silver);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Marcador de abertura

   No lugar de um ícone de aspas, a mesma régua curta em verde vital que abre
   o corpo dos cards da metodologia. É o sinal que o sistema já usa para
   marcar o início de um bloco de fala, e ocupa um fio de altura.
   -------------------------------------------------------------------------- */
.voice-mark {
  display: block;
  width: clamp(34px, 3vw, 44px);
  height: 1px;
  margin-bottom: clamp(22px, 2.2vw, 30px);
  background: var(--c-vital);
  transform-origin: left center;
  transition: transform var(--speed-mid) var(--ease-out);
}

.voice-card:hover .voice-mark { transform: scaleX(1.14); }

/* --------------------------------------------------------------------------
   Texto do depoimento

   A margem inferior é o piso de respiro entre a fala e a identificação: o
   rodapé é empurrado para a base por `margin-top: auto`, e quando o texto é
   curto a sobra se soma a esta margem em vez de substituí-la.
   -------------------------------------------------------------------------- */
.voice-quote {
  margin: 0 0 clamp(30px, 3.2vw, 46px);
  color: var(--c-graphite-medium);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1.78;
}

.voice-quote p { margin: 0; }

/* --------------------------------------------------------------------------
   Identificação do paciente

   Mesma anatomia da placa do retrato (`.name-plate`): nome em 15px/500 e
   função em Space Grotesk 10px com entreletra larga.
   -------------------------------------------------------------------------- */
.voice-foot {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: auto;
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--c-border);
}

.voice-name {
  display: block;
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: .01em;
  line-height: 1.3;
}

.voice-role {
  display: block;
  margin-top: 4px;
  color: var(--c-muted);
  font-family: var(--font-tech);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ==========================================================================
   3. RESPONSIVO
   ========================================================================== */

/* Três colunas continuam confortáveis até aqui: o card mais estreito ainda
   guarda cerca de 30 caracteres por linha depois do respiro interno. */
@media (max-width: 1120px) {
  .testimonials-grid { gap: 18px; }
  .voice-card { padding: clamp(24px, 3vw, 32px); }
}

/* Abaixo de 900px três colunas espremeriam a leitura. Passam a duas, e o
   terceiro card fica na primeira coluna da segunda linha, com meia largura
   — alinhado à esquerda como o resto da página. Esticá-lo para a largura
   inteira daria a ele uma medida de leitura diferente dos outros dois e
   quebraria a composição. */
@media (max-width: 900px) {
  .testimonials-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .testimonials-lead {
    padding-top: 0;
    max-width: 56ch;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.6vw, 24px);
  }

  .voice-card { padding: clamp(26px, 3.4vw, 36px); }
}

@media (max-width: 640px) {
  .testimonials { padding-block: clamp(80px, 16vw, 104px); }

  /* Empilhados, os cards precisam de mais folga entre si do que tinham entre
     colunas: aqui a distância vertical é a única coisa que os separa. */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: clamp(20px, 5.5vw, 26px);
  }

  .voice-card { padding: 26px 24px 24px; }
  .voice-quote { font-size: 15px; line-height: 1.75; }

  /* Sem cursor não há acompanhamento nenhum; o único retorno tátil é o
     recuo do toque. Como o JS não escreve transform nesta faixa, a regra
     não disputa com nada. */
  .voice-card:active { transform: scale(.994); }
}

/* ==========================================================================
   4. MOVIMENTO REDUZIDO

   O JS já desiste do acompanhamento do cursor e da entrada nesse modo. Aqui
   só desligamos o que é puramente CSS: o halo ambiente, a escala do retrato
   e o estica da régua.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .testimonials-aura { animation: none; }
  .voice-card:hover .voice-mark { transform: none; }
}