/* Seção de vídeo (Figma: Home 2673:2 / Sobre 2673:971). Cabeçalho
   centralizado (badge, título 44px, descrição 18px) a 120px da seção de
   cima e de baixo; moldura de 1064px (raio 30, gradiente 121° #D7DBE4 →
   #EFEFEF → #D7DBE4) com 24px de respiro e a "tela" por dentro (raio
   20, gradiente #1C212F → #373D4C enquanto a capa não aparece), em 16:9.
   O play é o triângulo arredondado do Figma (88×98 no desktop). */

.video-section { padding: 56px 0; }
/* Desktop: 120px em cima e nada embaixo — a seção seguinte (Trajetória na
   Sobre, Clientes na Home) já traz o próprio espaço de topo; somar os dois
   deixava um vão de ~260px, quase o dobro do padrão entre as demais seções. */
@media (min-width: 1024px) {
  .video-section { padding: 120px 0 0; }
}

.video-section-head { text-align: center; }
.video-section-head .eyebrow { margin-bottom: 24px; }
.video-section-head h2 { max-width: 983px; margin: 0 auto; text-wrap: balance; }
.video-section-lead { max-width: 813px; margin: 24px auto 0; font-size: 16px; line-height: 1.5; }
@media (min-width: 768px) {
  .video-section-lead { font-size: 18px; }
}

.video-frame {
  box-sizing: border-box;
  max-width: 1064px;
  margin: 32px auto 0;
  padding: 10px;
  border-radius: 20px;
  background-image: linear-gradient(120.998deg, #D7DBE4 5.0531%, #EFEFEF 53.645%, #D7DBE4 97.78%);
}
@media (min-width: 768px) {
  .video-frame { padding: 16px; border-radius: 26px; }
}
@media (min-width: 1024px) {
  .video-frame { margin-top: 74px; padding: 24px; border-radius: 30px; }
}

.video-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background-image: linear-gradient(180deg, #1C212F 0%, #373D4C 100%);
  color: var(--color-white);
}
@media (min-width: 768px) {
  .video-screen { border-radius: 16px; }
}
@media (min-width: 1024px) {
  .video-screen { border-radius: 20px; }
}

.video-el { display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.video-screen.is-enhanced .video-el { cursor: pointer; }

/* Véu leve sobre a capa até o primeiro play (contraste do botão). */
.video-screen:not(.is-started)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(28, 33, 47, 0.22) 0%, rgba(55, 61, 76, 0.42) 100%);
}

/* Play grande no centro. */
.video-bigplay {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  width: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translate(-46%, -50%);
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.35));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}
.video-bigplay[hidden] { display: none; }
.video-bigplay svg { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
  .video-bigplay { width: 72px; }
}
@media (min-width: 1024px) {
  .video-bigplay { width: 88.5px; }
}
.video-bigplay:hover { transform: translate(-46%, -50%) scale(1.07); filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.42)); }
.video-bigplay:focus-visible { outline: 3px solid var(--color-orange-light); outline-offset: 10px; border-radius: 16px; }
/* Mobile: depois do 1º play, o play grande (pausado) sobe um pouco pra não
   encostar na barra de controles. */
@media (max-width: 767px) {
  .video-screen.is-started .video-bigplay { top: 40%; width: 48px; }
}
html:not(.js) .video-bigplay { display: none; }

/* Barra de controles (aparece ao passar o mouse/focar; some após 2,6 s tocando). */
.video-controls {
  position: absolute;
  z-index: 3;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(25, 32, 46, 0.74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.video-controls[hidden] { display: none; }
@media (min-width: 768px) {
  .video-controls { left: 16px; right: 16px; bottom: 14px; gap: 12px; padding: 8px 14px; border-radius: 14px; }
}
.video-screen:not(.is-started) .video-controls { visibility: hidden; opacity: 0; }
.video-screen.is-playing:not(.is-active) .video-controls { opacity: 0; transform: translateY(8px); pointer-events: none; }

.video-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
@media (min-width: 768px) {
  .video-btn { width: 40px; height: 40px; }
}
.video-btn:hover { background: rgba(255, 255, 255, 0.16); }
.video-btn:focus-visible,
.video-seek:focus-visible { outline: 2px solid var(--color-orange-light); outline-offset: 2px; }
.video-ico { display: block; width: 22px; height: 22px; fill: currentColor; }
.video-ico--pause,
.video-ico--muted { display: none; }
.video-screen.is-playing .video-ico--play { display: none; }
.video-screen.is-playing .video-ico--pause { display: block; }
.video-btn.is-muted .video-ico--sound { display: none; }
.video-btn.is-muted .video-ico--muted { display: block; }

.video-time { flex: 0 0 auto; min-width: 2.4em; font-size: 12px; font-weight: 500; line-height: 1; color: rgba(255, 255, 255, 0.88); font-variant-numeric: tabular-nums; }
.video-time--total { opacity: 0.7; }
@media (min-width: 768px) {
  .video-time { font-size: 13px; }
}
@media (max-width: 479px) {
  .video-time--total { display: none; }
}

/* Barra de progresso: <input type="range"> estilizado (acessível por teclado). */
.video-seek {
  --p: 0%;
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 6px;
}
.video-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--color-orange) var(--p), rgba(255, 255, 255, 0.3) var(--p)); }
.video-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--color-white); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); transition: transform 0.15s ease; }
.video-seek:hover::-webkit-slider-thumb { transform: scale(1.2); }
.video-seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.3); }
.video-seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--color-orange); }
.video-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--color-white); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }

/* Tela cheia. */
.video-screen.is-fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #000; }
.video-screen.is-fullscreen .video-el { object-fit: contain; }

/* Entrada animada ao rolar (cabeçalho e moldura). */
.video-section-head,
.video-frame {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.video-frame { transition-delay: 0.1s; }
.video-section-head.is-visible,
.video-frame.is-visible { opacity: 1; transform: none; }
html:not(.js) .video-section-head,
html:not(.js) .video-frame { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .video-section-head, .video-frame { opacity: 1; transform: none; transition: none; }
  .video-bigplay, .video-controls { transition: none; }
}