/*
 * 05-porque-acontece.css
 * Seção: "Por que essa mudança de mercado está acontecendo agora?" +
 * carrossel de depoimentos em vídeo (reais)
 *
 * Fonte: copy/03-copy-clonagem-estrutura-referencia_1.md, seção "5. Seção de
 * Explicação". O bloqueador de depoimentos descrito na seção "4. Seção de
 * Depoimentos" da copy de referência foi resolvido em 2026-08-10 com o
 * recebimento de 4 vídeos reais de egressos — ver nota completa no topo de
 * sections/05-porque-acontece.html e em docs/copy-notas-05-porque-acontece.md.
 *
 * Fundo da seção: branco puro.
 *
 * [ADAPTADO] A versão anterior tinha (a) um vídeo institucional único e
 * central e (b) um bloco de 4 cards-placeholder de texto (aguardando
 * depoimentos reais, sem marquee — ver histórico no CSS anterior a esta
 * revisão). Ambos foram substituídos por um único carrossel de vídeo
 * (setas + dots), um slide por depoimento real. Structure: .depoimentos-carrossel
 * (relative) > .depoimentos-carrossel__viewport (scroll-snap, 1 scroll parent) >
 * .depoimentos-carrossel__trilho (ul, flex) > .depoimentos-carrossel__slide (li).
 * Setas/dots controlados por script.js (initDepoimentosCarousel).
 */

.porque-acontece {
  background-color: var(--cor-fundo-claro);
}

.porque-acontece__cabecalho {
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: 48px;
}

/* [FIX 2026-08-11, pedido do cliente] Título com tamanho e espaçamento entre
   linhas diferentes dos demais títulos da página: usava clamp(30px, 5vw,
   48px) — uma faixa fluida de 30 a 48px — combinado com --lh-h1-claro, que é
   um valor FIXO em px (57.6px, calibrado só para o extremo de 48px). Em
   qualquer largura onde o clamp resolvia abaixo de 48px (a maioria das telas
   de celular), a razão line-height/font-size disparava bem acima de 1.2 (no
   mínimo do clamp, 30px, a razão chegava a ~1.92) — daí o espaçamento
   "esticado" entre linhas. Padronizado com o mesmo padrão dos demais títulos
   grandes do site (ex.: .identificacao__title, .vivencia__titulo): font-size
   fixo por breakpoint (não fluido) + line-height UNITLESS (1.2, a mesma
   razão usada em --lh-h2-destaque/--lh-h2-escuro/--lh-h1-claro), que escala
   proporcionalmente com o font-size em vez de destoar dele. */
.porque-acontece__titulo {
  font-size: var(--fs-h1-claro);
  font-weight: var(--fw-h1-claro);
  line-height: 1.2;
  color: var(--cor-texto-quase-preto);
  margin-bottom: 16px;
}

/* Explicação-chave — reaproveita o trio fs/fw/lh do subtítulo do hero
   (18px/400/23.4px), mesma decisão de token da versão anterior (não há
   token próprio extraído para este parágrafo no recon visual). */
.porque-acontece__subtitulo {
  font-size: var(--fs-hero-subtitulo);
  font-weight: var(--fw-hero-subtitulo);
  line-height: var(--lh-hero-subtitulo);
  color: var(--cor-texto-cinza-escuro);
}

/* Texto de apoio — frase de reforço/conclusão abaixo da explicação-chave.
   [ADAPTADO] Não existe token extraído para este parágrafo (não fazia parte
   da referência original, que tinha apenas título + 1 parágrafo). Usa peso
   médio para diferenciar visualmente da explicação-chave, mesma escala de
   cor do heading (mais escuro que o corpo, mais leve que o título). */
.porque-acontece__apoio {
  font-size: var(--fs-hero-subtitulo);
  font-weight: var(--peso-medio);
  line-height: var(--lh-hero-subtitulo);
  color: var(--cor-texto-preto-alt);
  margin-top: 16px;
}

/* ------------------------------------------------------------------------
 * CARROSSEL DE DEPOIMENTOS EM VÍDEO
 * ---------------------------------------------------------------------- */

.porque-acontece__depoimentos {
  padding-top: 24px;
  padding-bottom: 8px;
}

.porque-acontece__depoimentos-label {
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: 24px;
  color: var(--cor-texto-cinza-escuro);
  font-size: var(--fs-depoimento-legenda);
  font-weight: var(--fw-depoimento-label);
  line-height: var(--lh-depoimento-legenda);
  text-align: center;
}

.depoimentos-carrossel {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
}

/* Único scroll-parent do carrossel — scroll-snap nativo garante swipe/touch
   funcional em mobile mesmo sem JS; os botões de seta/dots (script.js,
   initDepoimentosCarousel) chamam slide.scrollIntoView() sobre este mesmo
   elemento. Scrollbar escondida propositalmente (a navegação visível é feita
   pelas setas + dots, não por uma scrollbar nativa). */
.depoimentos-carrossel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--foto-radius-md);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.depoimentos-carrossel__viewport::-webkit-scrollbar {
  display: none;
}

.depoimentos-carrossel__trilho {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.depoimentos-carrossel__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
}

.depoimento-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--foto-radius-md);
  overflow: hidden;
  background-color: var(--cor-fundo-escuro-base);
}

.depoimento-video__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botão de play sobreposto ao poster — clique liga os controles nativos do
   <video> e inicia a reprodução (script.js, initDepoimentosCarousel). Some
   ao ser clicado e não reaparece (controles nativos assumem o play/pause
   daí em diante). */
.depoimento-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid rgba(251, 247, 238, 0.7);
  border-radius: 50%;
  background-color: rgba(15, 34, 29, 0.55);
  color: var(--cor-texto-branco);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.depoimento-video__play:hover {
  transform: scale(1.08);
}

.depoimento-video__play--hidden {
  opacity: 0;
  pointer-events: none;
}

.depoimento-video__play-icon {
  width: 22px;
  height: 22px;
  margin-left: 3px; /* ícone triangular — recentraliza opticamente no círculo */
}

.depoimento-video__nome {
  margin-top: 16px;
  color: var(--cor-texto-preto-alt);
  font-size: var(--fs-depoimento-legenda);
  font-weight: var(--fw-depoimento-label);
  line-height: var(--lh-depoimento-legenda);
  text-align: center;
}

/* Setas — sobrepostas às bordas do vídeo em desktop/tablet (fora do
   .depoimentos-carrossel__viewport para não entrarem na área de scroll-snap). */
.depoimentos-carrossel__seta {
  position: absolute;
  top: calc(50% - 20px); /* centralizado no vídeo (16:9), acima da legenda de nome */
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--cor-fundo-escuro-base);
  color: var(--cor-texto-branco);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease;
}

.depoimentos-carrossel__seta:hover {
  transform: scale(1.08);
}

.depoimentos-carrossel__seta svg {
  width: 18px;
  height: 18px;
}

.depoimentos-carrossel__seta--prev {
  left: -52px;
}

.depoimentos-carrossel__seta--next {
  right: -52px;
}

.depoimentos-carrossel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.depoimentos-carrossel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(15, 34, 29, 0.22);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}

.depoimentos-carrossel__dot--active {
  width: 22px;
  border-radius: 4px;
  background-color: var(--cor-fundo-escuro-base);
}

/* ============================================================
 * RESPONSIVIDADE
 * ============================================================ */

@media (max-width: 1024px) {
  .porque-acontece__titulo {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .porque-acontece__cabecalho {
    margin-bottom: 32px;
  }

  .porque-acontece__titulo {
    font-size: 34px;
  }
}

/* Abaixo de 900px o carrossel (max-width: 720px) já ocupa quase toda a
   largura útil do container (max-width: var(--container-max-width) usual −
   padding) — as setas em -52px passariam do padding do container e
   causariam overflow horizontal na página. Movidas para dentro, sobre as
   bordas do vídeo, com fundo semi-transparente para não cobrir demais o
   conteúdo do frame. */
@media (max-width: 900px) {
  .depoimentos-carrossel__seta {
    background-color: rgba(15, 34, 29, 0.55);
  }

  .depoimentos-carrossel__seta--prev {
    left: 12px;
  }

  .depoimentos-carrossel__seta--next {
    right: 12px;
  }
}

@media (max-width: 430px) {
  .porque-acontece__titulo {
    font-size: 28px;
  }

  .depoimentos-carrossel__seta {
    width: 34px;
    height: 34px;
  }

  .depoimento-video__play {
    width: 52px;
    height: 52px;
  }
}