/**
 * Player de vídeo motion da EvoTalks (o "estilo ClickUp" da home): barra minimalista, tilt 3D
 * leve no hover e o cursor que vira a pílula "Ver vídeo".
 *
 * COPIADO do <style> do index.php (a home ainda usa a cópia dela, inline). Mexeu aqui, mexa lá,
 * até a home passar a usar este arquivo: é o próximo passo, e ficou pra um PR só disso pra não
 * arriscar a home junto com a página de telefonia.
 */
.ev-video {
  padding: 88px 0;
  background: #fff;
  position: relative;
}
/* Versão "motion" — seção inteira é trigger do iframe inline */
.ev-motion-section {
  cursor: pointer;
}
.ev-motion-section:focus-visible {
  outline: 3px solid var(--evo-green, #1bbf5d);
  outline-offset: -8px;
  border-radius: 4px;
}
/* Variante final — fundo levemente diferente pra separar do CTA */
.ev-video-final { background: var(--evo-off-white); }
.ev-video-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 44px;
}
.ev-video-head h2 {
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 14px 0 20px;
  color: var(--evo-text);
  font-weight: 700;
}
/* Destaque verde de palavras-chave (versão sublinhada — sec final usa essa) */
.ev-video-head h2 .hl {
  color: var(--evo-green-deep, #0e8a40);
  position: relative;
  white-space: nowrap;
}
.ev-video-head h2 .hl::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--evo-green, #1bbf5d);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1) .2s;
}
.ev-video-head.reveal.in h2 .hl::after { transform: scaleX(1); }

/* === PÍLULA verde grande (estilo print do motion) === */
.ev-video-head h2 .ev-pill,
.ev-player-title h2 .ev-pill {
  display: inline-block;
  background: var(--evo-green, #1bbf5d);
  color: #fff;
  padding: 4px 28px 6px;
  border-radius: 999px;
  line-height: 1.05;
  margin-left: 6px;
  box-shadow: 0 14px 32px rgba(27, 191, 93, 0.32),
              0 4px 12px rgba(27, 191, 93, 0.20);
  transform-origin: 30% 60%;
  white-space: nowrap;
}
/* Versão antiga (.ev-video-head) — depende de .reveal.in */
.ev-video-head h2 .ev-pill {
  opacity: 0;
  transform: scale(0) rotate(-6deg);
  transition:
    opacity .35s ease .4s,
    transform .65s cubic-bezier(.34, 1.56, .64, 1) .4s;
}
.ev-video-head.reveal.in h2 .ev-pill {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
/* Versão dentro do player — CSS animation pura, roda assim que o
   elemento é renderizado (sem depender de classe). Bounce de scale 0
   → 1 + opacity 0 → 1, com pequeno delay pra dar respiro depois do
   título aparecer. */
@keyframes evPillBounceIn {
  from { opacity: 0; transform: scale(0) rotate(-6deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
.ev-player-title h2 .ev-pill {
  animation: evPillBounceIn .65s cubic-bezier(.34, 1.56, .64, 1) .4s backwards;
}

.ev-video-head p {
  font-size: 17px;
  color: var(--evo-text-soft);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .ev-video-head h2 .hl,
  .ev-video-head h2 .ev-pill,
  .ev-player-title h2 .ev-pill { white-space: normal; }
  .ev-video-head h2 .ev-pill,
  .ev-player-title h2 .ev-pill { padding: 2px 18px 4px; margin-left: 4px; }
}
/* === Player customizado da primeira seção (motion) ====================
   Quadro maior (max 1100px), tilt 3D leve via CSS variables (--rx/--ry
   setadas via JS no mousemove). Player minimalista estilo ClickUp. */
.ev-player {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: transparent;
  box-shadow:
    0 30px 60px rgba(15, 22, 38, 0.22),
    0 10px 22px rgba(15, 22, 38, 0.12);
  /* Visível direto — player com título já aparece junto com a página,
     sem reveal/opacity:0. O vídeo só baixa quando user dar play. */
  opacity: 1;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:
    transform .15s cubic-bezier(.22, 1, .36, 1),
    box-shadow .4s ease;
  will-change: transform;
}
.ev-player.reveal.in {
  /* Compatibilidade legada — caso .reveal volte por algum motivo */
  opacity: 1;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.ev-player.is-tilting {
  /* Quando tiltando, transition mais curta pra responder ao mouse */
  transition:
    transform .15s cubic-bezier(.22, 1, .36, 1),
    box-shadow .3s ease;
  box-shadow:
    0 40px 80px rgba(15, 22, 38, 0.28),
    0 14px 28px rgba(15, 22, 38, 0.15);
}
.ev-video-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
  /* Arredonda o PRÓPRIO vídeo (= raio do .ev-player). Sem isto o vídeo, ao
     tocar, vira uma camada de composição de hardware que IGNORA o
     overflow:hidden+border-radius do pai (que tem transform/perspective) e
     mostra "canto vivo". Arredondando o vídeo, a camada dele já é redonda. */
  border-radius: inherit;
  /* pointer-events: none deixa o click "atravessar" pro .ev-player wrapper
     (que tem o togglePlay handler). Sem isso, alguns browsers tratam o
     click no <video> diferente do click no wrapper. */
  pointer-events: none;
}
/* Cursor follower vira o play button quando hover no player.
   Esconde o cursor real do sistema na área do vídeo. */
.ev-player { cursor: none; }
.ev-player .ev-player-bar,
.ev-player .ev-player-bar * { cursor: default; }
.ev-player .ev-player-btn,
.ev-player .ev-player-scrub { cursor: pointer; }
/* EM TELA CHEIA O CURSOR REAL VOLTA, e isso não é preferência: o seguidor que
   substitui o cursor (.ev-cursor-follower) vive FORA do player, então ele não é
   desenhado dentro do elemento que entrou em tela cheia. Com o `cursor: none`
   ainda valendo, a pessoa ficava sem cursor nenhum e sem como acertar os
   controles. Os dois seletores porque o WebKit usa o prefixado, e a classe
   `.is-full` (posta pelo JS) cobre o caso de tela cheia pedida no <video>.
   De passagem, o enquadramento: em tela cheia o palco é preto e o vídeo cabe
   inteiro (object-fit: contain), em vez de ficar esticado ou com sobra branca. */
.ev-player:fullscreen,
.ev-player:-webkit-full-screen,
.ev-player.is-full { cursor: auto; background: #000; border-radius: 0; }
.ev-player:fullscreen .ev-video-native,
.ev-player:-webkit-full-screen .ev-video-native,
.ev-player.is-full .ev-video-native {
  width: 100%; height: 100%; object-fit: contain; border-radius: 0;
}
/* O título sobreposto é decoração da seção, e em tela cheia ele cobriria o
   vídeo com um texto que já não faz sentido ali. */
.ev-player:fullscreen .ev-player-title,
.ev-player:-webkit-full-screen .ev-player-title,
.ev-player.is-full .ev-player-title { display: none; }
/* Título sobreposto enquanto o vídeo não tocou — preenche o espaço branco
   que ficaria vazio. Some com fade + leve scale quando .is-playing. */
.ev-player-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 40px;
  pointer-events: none;
  transition:
    opacity .45s cubic-bezier(.4, 0, .2, 1),
    transform .55s cubic-bezier(.4, 0, .2, 1);
}
/* Once dismissed (após primeiro play), some pra sempre — não volta no pause */
.ev-player.title-dismissed .ev-player-title {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  visibility: hidden;
}
.ev-player-title h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--evo-text, #1e2026);
  font-weight: 700;
}
.ev-player-title p {
  margin: 0;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.5;
  color: var(--evo-text-soft, #5b606b);
  max-width: 56ch;
}
@media (max-width: 720px) {
  .ev-player-title { padding: 20px 24px; }
  .ev-player-title h2 { margin-bottom: 8px; }
}
/* Barra de controles minimalista — frosted glass sólido (sem gradient).
   Fica flutuante no rodapé com leve margem interna e cantos arredondados,
   dando o look "pílula" do ClickUp. */
.ev-player-bar {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: rgba(15, 18, 24, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 14px;
  color: #fff;
  z-index: 2;
  opacity: 0;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: opacity .25s ease;
}
.ev-player:hover .ev-player-bar,
.ev-player.is-playing.is-paused .ev-player-bar,
.ev-player:not(.is-playing) .ev-player-bar {
  opacity: 1;
}
.ev-player-btn {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background .2s ease;
}
.ev-player-btn:hover { background: rgba(255, 255, 255, 0.12); }
.ev-player-btn .ico-pause,
.ev-player.is-playing .ev-player-btn .ico-play { display: none; }
.ev-player.is-playing .ev-player-btn .ico-pause { display: block; }
.ev-player-btn .ico-vol-off { display: none; }
.ev-player.is-muted .ev-player-btn .ico-vol-on { display: none; }
.ev-player.is-muted .ev-player-btn .ico-vol-off { display: block; }
.ev-player-time {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: #fff;
  opacity: 0.9;
  flex-shrink: 0;
  min-width: 36px;
}
/* Scrubber — barra fininha branca com fill e handle bolinha. Área clicável
   ocupa toda altura da barra de controles (44px) pra facilitar seek. */
.ev-player-scrub {
  flex: 1;
  height: 100%;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;            /* impede gestures interceptarem */
}
/* Track interno consolidado — pointer-events: none deixa o evento ir
   direto pro parent .ev-player-scrub (handler). */
.ev-player-scrub-track {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  pointer-events: none;
}
/* O quanto já baixou. Fica acima da trilha e abaixo do preenchimento branco,
   e a transição é só de largura: buffer chega em saltos (o navegador baixa em
   blocos), e sem amaciar a barra pula de um ponto a outro. */
.ev-player-scrub-buffer {
  position: absolute;
  left: 0;
  height: 3px;
  width: 0;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  pointer-events: none;
  transition: width .25s ease-out;
}
.ev-player-scrub-fill {
  position: absolute;
  left: 0;
  height: 3px;
  width: 0;
  background: #fff;
  border-radius: 2px;
  pointer-events: none;
}
.ev-player-scrub-handle {
  position: absolute;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  margin-left: -5.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: transform .15s ease;
}
/* Input range invisível por cima dos elementos visuais — browser cuida
   do click + drag nativamente. Track/thumb apareceriam por default,
   então zeramos todos os pseudo-elements vendor-specific. */
.ev-player-scrub-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;            /* visualmente invisível mas RECEBE eventos */
  z-index: 2;            /* acima do fill/handle visuais */
}
.ev-player-scrub-input:focus { outline: none; }
.ev-player-scrub-input::-webkit-slider-runnable-track {
  background: transparent;
  height: 100%;
}
.ev-player-scrub-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: transparent;
  border: 0;
}
.ev-player-scrub-input::-moz-range-track {
  background: transparent;
  height: 100%;
  border: 0;
}
.ev-player-scrub-input::-moz-range-thumb {
  width: 16px; height: 16px;
  background: transparent;
  border: 0;
}
.ev-player-scrub:hover .ev-player-scrub-handle {
  transform: scale(1.25);
}
@media (max-width: 720px) {
  .ev-player { border-radius: 14px; margin-top: 4px; }
  .ev-player-bigplay { width: 64px; height: 64px; }
  .ev-player-bigplay svg { width: 26px; height: 26px; }
  .ev-player-bar { height: 42px; padding: 0 10px; gap: 8px; }
}
/* Iframe inline (segunda seção) — substitui a thumb após click. */
.ev-video-frame.is-playing {
  box-shadow: 0 24px 50px rgba(15, 22, 38, 0.22);
}
.ev-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.ev-motion-title {
  display: inline-block;
  margin: 0 0 16px;
  position: relative;
}
/* Follower — outer (.ev-cursor-follower) só recebe a POSIÇÃO via JS.
   O inner (.ev-cursor-inner) é a pílula visual que anima opacity/scale
   via class .is-visible (sem brigar com a transform da posição). */
.ev-cursor-follower {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  z-index: 10001;
  pointer-events: none;
}
.ev-cursor-inner {
  position: absolute;
  left: 0; top: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 12px 12px;
  background: #1e2026;
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 18px 40px rgba(15, 17, 22, 0.42);
  white-space: nowrap;
  opacity: 0;
  /* Estado inicial: TAMANHO ZERO — surge crescendo na primeira aparição. */
  transform: translate(-50%, -50%) scale(0);
  transition:
    opacity .25s ease,
    transform .35s cubic-bezier(.34, 1.56, .64, 1),
    /* Transição 1→2: padding/gap/background animam suavemente
       (colapsa pílula pra largura da bolinha). */
    padding .35s cubic-bezier(.4, 0, .2, 1),
    gap .35s cubic-bezier(.4, 0, .2, 1),
    background-color .35s cubic-bezier(.4, 0, .2, 1),
    box-shadow .35s cubic-bezier(.4, 0, .2, 1);
}
.ev-cursor-follower.is-visible .ev-cursor-inner {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ev-cursor-inner .play-circle {
  width: 26px; height: 26px;
  background: #1bbf5d;        /* verde EvoTalks oficial */
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: #fff;
  position: relative;
}
/* Play e pause empilhados (mesma célula do grid) — apenas um visível.
   Transição 2↔3: crossfade rápido (.18s) + leve scale pra suavizar. */
.ev-cursor-inner .play-circle svg {
  grid-area: 1 / 1;
  transition:
    opacity .18s ease,
    transform .18s ease;
}
.ev-cursor-inner .play-circle .ico-play {
  margin-left: 1px;            /* compensa o vinco do triângulo no centro */
  opacity: 1;
  transform: scale(1);
}
.ev-cursor-inner .play-circle .ico-pause {
  opacity: 0;
  transform: scale(.7);
}
/* No estado playing, troca os ícones (crossfade) */
.ev-cursor-follower.is-playing .ev-cursor-inner .play-circle .ico-play {
  opacity: 0;
  transform: scale(.7);
}
.ev-cursor-follower.is-playing .ev-cursor-inner .play-circle .ico-pause {
  opacity: 1;
  transform: scale(1);
}
/* Texto "Ver vídeo" — anima largura, opacity e margin pra colapsar limpo
   quando entra em estado .is-active (playing/paused). */
.ev-cursor-inner .ev-cursor-label {
  display: inline-block;
  overflow: hidden;
  max-width: 120px;
  opacity: 1;
  transition:
    opacity .22s ease,
    max-width .35s cubic-bezier(.4, 0, .2, 1),
    margin-left .35s cubic-bezier(.4, 0, .2, 1);
}
/* === ESTADOS 2 e 3 — pílula colapsada (.is-active) ===
   Padding zera, gap zera, fundo preto fica transparent, sombra reduzida.
   Texto encolhe pra zero. Resultado: só a bolinha verde isolada. */
.ev-cursor-follower.is-active .ev-cursor-inner {
  padding: 0;
  gap: 0;
  background: transparent;
  box-shadow: 0 6px 16px rgba(15, 17, 22, 0.22);
}
.ev-cursor-follower.is-active .ev-cursor-inner .ev-cursor-label {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
}

/* Celular: o player 16:9 fica baixo demais pro título E o subtítulo; o subtítulo passava por
   baixo da barra de controles. Fica só o título (diferença desta cópia em relação à da home). */
@media (max-width: 480px) {
  .ev-player-title p { display: none; }
}