/* Onepage de trabalho — só o vídeo (14/09/2026, substitui a versão com abertura e slide a slide).
   Tela cheia sobre a vitrine: barra com contador, setas e Fechar; o nome do cliente e o vídeo no centro;
   no fundo, a capa da apresentação ampliada, desfocada e granulada. Tudo escopado em #afo-onepage. */

#afo-onepage {
  --tinta: #0a0a0a; --osso: #ece7e0; --latao: #b08a4e; --curva: cubic-bezier(.2, .6, .2, 1);
  position: fixed; inset: 0; z-index: 90; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: var(--tinta); color: var(--osso); font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
#afo-onepage[hidden] { display: none !important; }
#afo-onepage *, #afo-onepage *::before, #afo-onepage *::after { box-sizing: border-box; }
/* reset com especificidade zero (:where), para as classes abaixo sempre ganharem */
:where(#afo-onepage) :where(img, video) { display: block; max-width: 100%; }
:where(#afo-onepage) :where(p, h2) { margin: 0; }
#afo-onepage :focus-visible { outline: 2px solid var(--latao); outline-offset: 3px; }
html.afo-op-aberta, html.afo-op-aberta body { overflow: hidden !important; }
.afo-op-entra { animation: afoOpEntra 320ms cubic-bezier(.2, .6, .2, 1) both; }
@keyframes afoOpEntra { from { opacity: 0; } }

/* ---------- barra ---------- */
.op-barra {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 clamp(16px, 3vw, 28px);
  background: rgba(10, 10, 10, .4); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(236, 231, 224, .1);
}
.op-contador { flex: none; font: 500 10.5px/1 Manrope, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(236, 231, 224, .7); }
.op-acoes { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.op-circ, .op-fechar {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; border-radius: 999px; border: 1px solid rgba(236, 231, 224, .28);
  background: rgba(10, 10, 10, .35); color: rgba(236, 231, 224, .88); cursor: pointer; font: 500 10.5px/1 Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  transition: border-color 160ms var(--curva), color 160ms var(--curva);
}
.op-circ { width: 40px; font-size: 15px; letter-spacing: 0; }
.op-fechar { gap: 9px; padding: 0 16px; margin-left: 6px; }
.op-circ:hover, .op-circ:focus-visible { border-color: var(--latao); color: var(--latao); }
.op-fechar:hover, .op-fechar:focus-visible { border-color: var(--osso); color: var(--osso); }

/* ---------- palco: fundo = capa desfocada e granulada ---------- */
.op-palco { position: relative; min-height: calc(100svh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3vh, 30px); padding: clamp(28px, 5vh, 56px) clamp(16px, 5vw, 64px) clamp(36px, 6vh, 64px); overflow: hidden; isolation: isolate; }
.op-fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.op-fundo img { position: absolute; inset: -10%; width: 120%; height: 120%; max-width: none; object-fit: cover; filter: blur(46px) saturate(1.25) brightness(.52); transform: scale(1.08); animation: afoOpFundo 1400ms var(--curva) both; }
@keyframes afoOpFundo { from { opacity: 0; transform: scale(1.18); } }
/* grão: ruído fractal em SVG, a mesma técnica do grão de papel da página do curso */
.op-fundo::before {
  content: ""; position: absolute; inset: 0; z-index: 3; opacity: .95; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* vinheta e escurecimento para o nome e o player se destacarem */
.op-fundo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(90% 80% at 50% 50%, rgba(10, 10, 10, .05) 0%, rgba(10, 10, 10, .55) 70%, rgba(10, 10, 10, .85) 100%); }

/* nome do cliente */
.op-cliente { text-align: center; animation: afoOpSobe 700ms var(--curva) 120ms both; }
.op-cliente small { display: block; font: 600 10.5px/1 Manrope, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--latao); }
.op-cliente h2 { margin-top: 12px; font: 200 clamp(32px, 4.4vw, 60px)/1.02 Sora, sans-serif; letter-spacing: -.045em; color: var(--osso); text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }

/* player: o maior 16:9 que cabe na tela, sem rolagem */
.op-player {
  position: relative; width: min(1180px, 100%, calc((100svh - 64px - 230px) * 16 / 9)); min-width: min(100%, 320px); aspect-ratio: 16 / 9;
  border-radius: 18px; overflow: hidden; background: #000; border: 1px solid rgba(236, 231, 224, .18); box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
  animation: afoOpPop 760ms var(--curva) 60ms both;
}
.op-player video, .op-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.op-pausa { position: absolute; right: 16px; bottom: 16px; z-index: 2; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(236, 231, 224, .34); background: rgba(10, 10, 10, .55); backdrop-filter: blur(14px); color: var(--osso); cursor: pointer; font: 500 10.5px/1 Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.op-pausa:hover, .op-pausa:focus-visible { border-color: var(--osso); }
@keyframes afoOpPop { from { opacity: 0; transform: scale(.955); } }
@keyframes afoOpSobe { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

@media (max-width: 860px) {
  .op-fechar span { display: none; }
  .op-player { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #afo-onepage, #afo-onepage * { animation: none !important; transition: none !important; }
}