/* ==========================================================
   SEÇÃO 5 — Print: Secao-5-LP-FormacaoPrime.png (1920 × 1018)
   ========================================================== */

.secao-5 {
  position: relative;
  /* altura acompanha as molduras: 963px em telas ≥ 1389px */
  padding-top: 74px;  /* 129 − 15 − 40: espaço superior reduzido (pedidos) */
  padding-bottom: 129px;
  background: var(--cor-clara);
  color: var(--cor-vinho);
  font-family: var(--fonte-gotham);
  text-align: center;
}

.secao-5__titulo {
  margin: 0 0 0 -0.1em; /* compensa o espaçamento negativo após a última letra */
  font-size: 67.29px;
  line-height: 61.8px;
  font-weight: 300;
  letter-spacing: -0.1em;
  text-transform: uppercase;
}

.secao-5__linha1 {
  display: inline-block;
  margin-right: 0.18em; /* no Figma a 1ª linha termina com um espaço — desloca 6px para a esquerda */
}

.secao-5__titulo strong {
  font-weight: 500;
}

/* ---------- Molduras dos vídeos ---------- */
.secao-5__videos {
  display: flex;
  justify-content: center;
  gap: 54px;
  /* largura do design (3 × 411 + 2 × 54 = 1341px) ou a tela menos 24px de cada lado */
  width: min(1341px, 100% - 48px);
  margin: 72px auto 0;
}

.secao-5__video {
  position: relative;
  flex: 0 1 411px;             /* 411px no máximo; encolhe por igual se faltar espaço */
  aspect-ratio: 411 / 564;     /* mantém a proporção do design */
  border-radius: 47.4px;
  overflow: hidden;            /* o vídeo nunca passa da moldura */
  isolation: isolate;          /* garante o recorte arredondado no Safari */
  background: #dac8be;
  box-shadow: 0 2.92px 2.92px rgba(0, 0, 0, 0.25);
}

.secao-5__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* preenche a moldura, cortando o excesso */
  background: transparent;
}

/* enquanto o vídeo não tiver arquivo, mostra só a moldura do design */
.secao-5__video video:not([src]) {
  visibility: hidden;
}

/* ---------- Botão de play (semitransparente) ---------- */
.secao-5__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(66, 12, 12, 0.55);           /* vinho com transparência */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

/* triângulo do play */
.secao-5__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: 4px;                              /* centro óptico do triângulo */
  border-style: solid;
  border-width: 16px 0 16px 27px;
  border-color: transparent transparent transparent rgba(242, 240, 237, 0.95);
  transform: translate(-50%, -50%);
}

.secao-5__play:hover,
.secao-5__play:focus-visible {
  background: rgba(66, 12, 12, 0.75);
  transform: translate(-50%, -50%) scale(1.06);
}

.secao-5__play:focus-visible {
  outline: 2px solid var(--cor-clara);
  outline-offset: 4px;
}

/* tocando: esconde o play (os controles nativos aparecem no vídeo) */
.secao-5__video.is-tocando .secao-5__play {
  opacity: 0;
  pointer-events: none;
}