/* 07-clientes-dizem · H07 · "O arquivo de relatos" (rodada A) no acabamento da V1.
   Cabeçalho, eyebrow em Sentient laranja e título de .testimonials (V1).
   Base (sem JS e em telas estreitas): cinco relatos empilhados e inteiros, cada um no card de .testimonial-card.
   Modo arquivo (#h07.is-arquivo, telas largas com JS): índice dos autores à esquerda + painel de leitura.
   Modo carrossel (#h07.is-carrossel, celular com JS): cards lado a lado com encaixe e marcas embaixo.
   Autoavanço (#h07.is-auto): o relato passa sozinho; um filete no autor ativo (ou na marca) enche no tempo
   do relato e, ao terminar, o JS avança. #h07.is-pausado congela o filete (hover no índice ou nas setas,
   foco por teclado, toque, rolagem do relato, aba oculta; o hover no painel não pausa — pedido 18);
   fora de cena o [data-loop] da base congela; movimento reduzido não liga o autoavanço. */

#h07.testimonials {
  position: relative;
  z-index: 3;
  isolation: isolate;
  overflow: hidden;
  background: var(--dark-soft);
  color: var(--white);
}

/* brilho quente discreto no canto (V1) */
#h07.testimonials::before {
  position: absolute;
  z-index: -1;
  right: 6%;
  bottom: 4%;
  width: min(38rem, 60vw);
  height: 18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 108 17 / 11%), transparent 68%);
  filter: blur(2.5rem);
  content: "";
  pointer-events: none;
}

#h07 .testimonials__inner {
  position: relative;
  width: min(calc(100% - 3rem), var(--container));
  margin: 0 auto;
  padding: var(--section-space) 0 clamp(6.5rem, 9vw, 8.5rem);
}

/* ── Cabeçalho (V1) ────────────────────────────────────────── */
#h07 .testimonials__header { width: min(100%, 61rem); text-align: left; }

#h07 .testimonials__eyebrow {
  margin: 0 0 1.25rem;
  color: var(--orange-editorial);
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  font-variation-settings: "wght" 400;
  font-weight: 400;
}

#h07 .testimonials__title {
  max-width: 59rem;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: clamp(3.25rem, 4.72vw, 4.75rem);
  font-weight: 400;
  letter-spacing: -0.058em;
  line-height: 0.98;
}
#h07 .testimonials__title > span { display: block; }
#h07 .testimonials__title > span:first-child {
  font-family: var(--font-serif);
  font-size: 1.045em;
  font-variation-settings: "wght" 300;
  font-weight: 300;
  letter-spacing: -0.048em;
}

#h07 .h07__arquivo { margin-top: clamp(3.25rem, 5vw, 4.75rem); }

/* ── Material do card (.testimonial-card da V1) ───────────── */
#h07 .h07__relato,
#h07.is-arquivo .h07__leitura {
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  position: relative;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1.5rem;
  background:
    linear-gradient(160deg, rgb(255 255 255 / 4%), transparent 42%),
    var(--surface-dark);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 1rem 3rem rgb(0 0 0 / 16%);
  transition: box-shadow 240ms ease, border-color 240ms ease;
}

/* borda acesa que segue o ponteiro (V1) */
#h07 .h07__relato::before,
#h07.is-arquivo .h07__leitura::before {
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(9rem circle at var(--spotlight-x) var(--spotlight-y), rgb(255 150 82 / 90%), rgb(255 108 17 / 34%) 38%, transparent 72%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
#h07 .h07__relato:hover::before,
#h07.is-arquivo .h07__leitura:hover::before { opacity: 1; }
#h07.is-arquivo .h07__relato::before { display: none; }

/* ── Relato (base: card empilhado) ────────────────────────── */
#h07 .h07__leitura { display: grid; gap: 1rem; }
#h07 .h07__relato {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.375rem, 5vw, 2rem);
}
#h07 .h07__fala { margin: 0; }
#h07 .h07__fala p {
  color: rgb(248 248 246 / 72%);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  font-weight: 350;
  line-height: 1.55;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
#h07 .h07__fala p + p { margin-top: 1em; }
#h07 .h07__enf { color: var(--white); font-weight: 400; }

#h07 .h07__autor {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-dark);
}
#h07 .h07__autor img,
#h07 .h07__aba img {
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(248 248 246 / 18%);
  border-radius: 50%;
  object-fit: cover;
  background: var(--dark-soft);
}
#h07 .h07__autor-texto,
#h07 .h07__aba-texto { display: grid; gap: 0.2rem; min-width: 0; }
#h07 .h07__nome { color: var(--white); font-size: 0.95rem; font-weight: 500; line-height: 1.2; }
#h07 .h07__cargo { color: rgb(248 248 246 / 52%); font-size: 0.8rem; line-height: 1.3; }

/* ── Modo arquivo ─────────────────────────────────────────── */
#h07 [hidden] { display: none !important; }

#h07.is-arquivo .h07__arquivo {
  display: grid;
  grid-template-columns: minmax(0, 32fr) minmax(0, 64fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: stretch;
}

#h07.is-arquivo .h07__indice {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-self: start;
}

#h07 .h07__aba {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 5.25rem;
  padding: 1rem 1.125rem 1rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 1.25rem;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
#h07 .h07__aba img { opacity: 0.6; filter: saturate(0.6); transition: opacity var(--dur-fast), filter var(--dur-fast); }
#h07 .h07__aba .h07__nome { color: rgb(248 248 246 / 76%); transition: color var(--dur-fast); }
#h07 .h07__aba .h07__cargo { color: rgb(248 248 246 / 44%); }
/* fio laranja do autor aberto */
#h07 .h07__aba::before {
  position: absolute;
  top: 1.1rem;
  bottom: 1.1rem;
  left: -1px;
  width: 2px;
  border-radius: 2px;
  background: var(--orange);
  content: "";
  transform: scaleY(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
#h07 .h07__aba:hover { background: rgb(248 248 246 / 3.5%); }
#h07 .h07__aba:hover img { opacity: 0.9; }
#h07 .h07__aba[aria-selected="true"] {
  border-color: rgb(255 255 255 / 10%);
  background: linear-gradient(160deg, rgb(255 255 255 / 4%), transparent 60%), var(--surface-dark);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 1rem 2.5rem -1.25rem rgb(0 0 0 / 60%);
}
#h07 .h07__aba[aria-selected="true"]::before { transform: scaleY(1); }
#h07 .h07__aba[aria-selected="true"] img { opacity: 1; filter: none; }
#h07 .h07__aba[aria-selected="true"] .h07__nome { color: var(--white); }
#h07 .h07__aba[aria-selected="true"] .h07__cargo { color: rgb(248 248 246 / 58%); }
#h07 .h07__aba:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 1.25rem; }

/* Painel do tamanho do índice (pedido 18): "contain: size" tira o conteúdo do painel do cálculo da
   linha da grade, então a altura vem só da coluna de autores e o painel estica até ela. O relato
   que não cabe (o do Rafael) rola dentro da mesma caixa, com fio de rolagem discreto e esmaecimento
   no pé enquanto houver texto abaixo; nada fica cortado sem acesso. */
#h07.is-arquivo .h07__leitura {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-height: 26rem;
  padding: clamp(1.75rem, 2.4vw, 2.25rem) clamp(1.75rem, 2.6vw, 2.5rem) clamp(1.25rem, 1.8vw, 1.6rem);
  contain: size;
}
#h07.is-arquivo .h07__relato {
  grid-area: 1 / 1;
  min-height: 0;
  gap: 1.1rem;
  justify-content: space-between;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out), visibility 0s;
}
#h07.is-arquivo .h07__relato[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0.6rem, 0);
  transition: opacity 160ms ease, transform 0s 160ms, visibility 0s 160ms;
}
#h07.is-arquivo .h07__relato:focus-visible { outline: 2px solid var(--orange); outline-offset: 0.75rem; }
#h07.is-arquivo .h07__fala {
  flex: 1 1 auto;
  min-height: 0;
  margin-right: -0.75rem;
  padding-right: 0.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgb(248 248 246 / 16%) transparent;
  scrollbar-width: thin;
}
#h07.is-arquivo .h07__fala::-webkit-scrollbar { width: 4px; }
#h07.is-arquivo .h07__fala::-webkit-scrollbar-thumb { border-radius: 4px; background: rgb(248 248 246 / 16%); }
#h07.is-arquivo .h07__fala.tem-mais {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 3.5rem), transparent);
  mask-image: linear-gradient(#000 calc(100% - 3.5rem), transparent);
}
#h07.is-arquivo .h07__fala:focus-visible { outline: 2px solid var(--orange); outline-offset: 0.35rem; border-radius: 0.25rem; }
#h07.is-arquivo .h07__fala p {
  max-width: 44rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.18vw, 1.125rem);
  line-height: 1.6;
}
/* o autor fica no pé do painel, ao lado das setas */
#h07.is-arquivo .h07__autor { flex: none; min-height: 3.75rem; padding-top: 1rem; padding-right: 7.5rem; }

/* setas redondas: geometria do .hero-cta da V1, material "pretinho" (pedido 17) */
#h07 .h07__setas {
  position: absolute;
  right: clamp(1.75rem, 2.6vw, 2.5rem);
  bottom: clamp(1.25rem, 1.8vw, 1.6rem);
  display: flex;
  gap: 0.6rem;
}
#h07 .h07__seta {
  display: grid;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: rgb(10 10 10 / 78%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), 0 0.85rem 2.2rem rgb(0 0 0 / 30%);
  color: var(--white);
  cursor: pointer;
  backdrop-filter: blur(0.65rem) saturate(112%);
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
#h07 .h07__seta svg {
  width: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
#h07 .h07__seta:hover,
#h07 .h07__seta:focus-visible {
  border-color: rgb(255 255 255 / 38%);
  background: #141414;
  transform: translateY(-2px);
}
#h07 .h07__seta:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
#h07 .h07__seta:active { transform: scale(0.96); }

/* ── Filete de progresso (autoavanço) ─────────────────────── */
#h07 .h07__progresso { display: none; }
/* no índice: trilho no pé do autor ativo, que enche da esquerda para a direita no tempo do relato
   (o fio laranja à esquerda continua marcando quem está aberto) */
#h07.is-auto .h07__aba .h07__progresso {
  position: absolute;
  right: 1.125rem;
  bottom: 0.7rem;
  left: calc(1.25rem + 48px + 0.9rem);
  display: block;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgb(248 248 246 / 12%);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
#h07.is-auto .h07__aba[aria-selected="true"] .h07__progresso { opacity: 1; }
#h07 .h07__progresso::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--orange);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
}
#h07 .h07__progresso.is-correndo::after {
  animation: h07-enche-x var(--h07-dur, 10s) linear forwards;
}
#h07.is-pausado .h07__progresso.is-correndo::after,
#h07 [data-loop]:not(.em-cena) .h07__progresso.is-correndo::after { animation-play-state: paused; }

@keyframes h07-enche-x { to { transform: scaleX(1); } }

/* ── Modo carrossel (celular) ─────────────────────────────── */
#h07.is-carrossel .h07__leitura {
  display: flex;
  gap: 0.75rem;
  margin-inline: -1.25rem;
  padding-inline: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 1.25rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
#h07.is-carrossel .h07__leitura::-webkit-scrollbar { display: none; }
#h07.is-carrossel .h07__relato {
  flex: 0 0 calc(100% - 2rem);
  justify-content: space-between;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
#h07.is-carrossel .h07__marcas {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.75rem;
}
#h07 .h07__marca {
  position: relative;
  display: grid;
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  cursor: pointer;
}
#h07 .h07__marca .h07__progresso {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgb(248 248 246 / 16%);
}
#h07 .h07__marca[aria-current="true"] .h07__progresso::after { transform: scaleX(1); }
#h07.is-auto .h07__marca[aria-current="true"] .h07__progresso::after { transform: scaleX(0); }
#h07 .h07__marca:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

/* ── Celular (cortes da V1) ───────────────────────────────── */
@media (max-width: 640px) {
  #h07 .testimonials__inner { width: 100%; padding-right: 1.25rem; padding-left: 1.25rem; }
  #h07 .testimonials__eyebrow { font-size: 0.93rem; }
  #h07 .testimonials__title {
    font-size: clamp(2.25rem, 9.7vw, 2.75rem);
    line-height: 1;
    text-wrap: balance;
  }
  #h07 .h07__arquivo { margin-top: 2.5rem; }
  #h07 .h07__fala p { font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  #h07 .h07__progresso::after { animation: none !important; }
  #h07.is-arquivo .h07__relato,
  #h07.is-arquivo .h07__relato[aria-hidden="true"] { transform: none; }
  #h07 .h07__seta:hover,
  #h07 .h07__seta:focus-visible { transform: none; }
}