/* Página Apps (apps.php). Visual aprovado pelo Rai em 04/11/2026 (prévia: mockups-mastercaption/apps/v2/apps-v3,
   com as medidas e o porquê de cada decisão no NOTAS.md de lá). Mexer aqui muda a página aprovada: confira os prints antes.
   Base: conceito C (vitrine de produto). Enxertos: seletor fixo de B, MasterCaption centrado e celular vertical de A.
   Usa só o vocabulário do rd-mc.css (float, glow, node, wire, glass, tilt, reveal). Lima (#D7F45A) só na Black November.
   .is-shot (classe no <html>) congela o movimento: é o modo dos prints de conferência. */
:root { --bf: #D7F45A; --bf-rgb: 215, 244, 90; --bf-ink: #0B0C05; --ok: #6ee7b7; --ok-rgb: 52, 211, 153; }

/* ---------- peças comuns ---------- */
.ap-st { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 999px; font: 700 11px/1 var(--font);
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.ap-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; flex: none; }
.ap-st--on { color: var(--ok); background: rgba(var(--ok-rgb), .1); border: 1px solid rgba(var(--ok-rgb), .3); }
.ap-st--bonus { color: var(--bf); background: rgba(var(--bf-rgb), .1); border: 1px solid rgba(var(--bf-rgb), .35); }
.ap-st--soon { color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); }
.ap-st--soon::before { box-shadow: none; opacity: .7; }

.ap-btn-bf { background: var(--bf); color: var(--bf-ink); box-shadow: 0 10px 40px rgba(var(--bf-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .5); }
.ap-btn-bf:hover { background: #e2fa78; }

/* ==========================================================================
   1. HERO · palco 1440×900 que escala com --u (receita do curso)
   v3 (pedidos do Rai, 04/11): o título fica em duas linhas, "Do cartão" em cima e "À TIMELINE" embaixo,
   ATRÁS do recorte do Rai, como no curso: a cabeça entra na segunda linha e cobre a metade de baixo de "IM"
   (e só o canto de baixo à esquerda do E). As letras que ficam atrás do cabelo são as que se leem pela metade de cima
   (I, M); o E e o L, que precisam do traço de baixo, ficam fora da cabeça. Por isso "À TIMELINE" anda um pouco
   pra direita e fica alinhada pela esquerda com "Do cartão".
   O Dock fica pequeno, como o do Mac, embaixo das mãos dele: não cobre o rosto nem o peito.
   O texto (Dock, legenda, botão) fica no fluxo, logo abaixo do palco: o hero cresce sozinho se precisar.
   ========================================================================== */
.ap-hero {
  --u: min(1px, calc(100vw / 1440));
  --off: max(0px, calc(94px - 98 * var(--u)));   /* desce o palco o que faltar pro kicker não entrar embaixo da pílula da nav */
  position: relative; isolation: isolate; overflow: hidden; padding-bottom: 22px;
  background: radial-gradient(70% 52% at 50% 48%, rgba(var(--glow-rgb), .30), transparent 70%), var(--bg);   /* o brilho some antes do fim do hero: sem emenda */
}
/* corta só nas laterais: o brilho do card "Disponíveis agora" pode passar do fim do hero sem virar uma linha reta */
@supports (overflow-x: clip) { .ap-hero { overflow-x: clip; overflow-y: visible; } }
.ap-hero__stage { position: absolute; top: var(--off); height: calc(900 * var(--u)); left: calc(50% - 720 * var(--u)); width: calc(1440 * var(--u)); }
.ap-hero__glow1 { left: calc(380 * var(--u)); top: calc(230 * var(--u)); width: calc(680 * var(--u)); height: calc(560 * var(--u)); }
.ap-hero__glow2 { left: calc(980 * var(--u)); top: calc(520 * var(--u)); width: calc(360 * var(--u)); height: calc(300 * var(--u)); opacity: .35; }
.ap-hero__kicker { position: absolute; left: 0; right: 0; top: calc(98 * var(--u)); z-index: 1; justify-content: center; margin: 0;
  font-size: max(11px, calc(13 * var(--u))); }
/* as letras têm z 1 e o Rai z 2: a foto passa na frente da palavra gigante */
/* top: no tablet o kicker para de encolher (11 px no mínimo) e o título desce o que ele cresceu: o til de "cartão" não encosta nele */
.ap-hero__words { position: absolute; left: 0; right: 0; top: calc(120 * var(--u) + max(0px, 14px - 14 * var(--u))); z-index: 1; margin: 0; text-align: center; pointer-events: none; }
.ap-hero__words > span { display: block; white-space: nowrap; }
.ap-hero .ap-w1 { font-size: calc(110 * var(--u)); }
.ap-hero .ap-w2 { font-size: calc(156 * var(--u)); margin-top: .01em; translate: calc(58 * var(--u)) 0; }
/* translate: o M fica no meio da cabeça e o À começa embaixo do D. margin-top: o acento do À, agora embaixo do D, não encosta nele
   (o rd-mc puxa -.16em). */
.ap-hero__person {
  position: absolute; z-index: 2; top: calc(290 * var(--u)); left: calc(288 * var(--u)); width: calc(864 * var(--u)); max-width: none; height: auto;
  filter: drop-shadow(0 0 60px rgba(var(--glow-rgb), .45));
}
.ap-hero__fade { position: absolute; left: -100vw; right: -100vw; bottom: 0; height: calc(250 * var(--u)); z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg) 80%); }
.ap-hero__wires { width: 100%; height: 100%; z-index: 1; }   /* os fios passam ATRÁS do Rai (o .wire do rd-mc tem z 4): somem atrás das mãos, nunca por cima da pele */

/* Dock, legenda, botão e frase: no fluxo, começando embaixo das mãos do Rai (o espaço de cima deixa o mouse passar pros cards) */
.ap-hero__copy { position: relative; z-index: 7; padding: calc(668 * var(--u) + var(--off)) var(--gutter) 0; text-align: center; pointer-events: none; }
.ap-hero__copy > * { pointer-events: auto; }

/* o Dock: barra de vidro baixa com os 5 ícones parados lado a lado, como o Dock do Mac.
   --s é a lupa de cada ícone (o JS muda com o mouse); o Dock tem altura fixa e o ícone cresce pra cima, sem empurrar o botão. */
.ap-dock {
  --ic: max(40px, calc(58 * var(--u))); --gap: calc(var(--ic) * .22); --pad: calc(var(--ic) * .2); --T: 11s;
  position: relative; isolation: isolate; display: inline-flex; align-items: flex-end; gap: var(--gap); vertical-align: top;
  height: calc(var(--ic) * 1.3); padding: 0 var(--pad) calc(var(--ic) * .07);
}
.ap-dock::before { /* a barra */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: calc(var(--ic) * .34);
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05)), rgba(16, 16, 28, .5);
  border: 1px solid rgba(255, 255, 255, .17);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 40px rgba(0, 0, 0, .5), 0 0 60px rgba(var(--glow-rgb), .32);
}
.ap-dock::after { /* reflexo de luz na borda de cima */
  content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
}
.ap-dock__app {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; width: calc(var(--ic) * var(--s, 1));
  color: inherit; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent;
  transition: width .22s cubic-bezier(.25, .8, .3, 1);
}
.ap-dock.is-mag .ap-dock__app { transition-duration: .12s; }   /* seguindo o mouse: resposta rápida, mas sem tranco */
.ap-dock__app::before { /* luz embaixo de cada ícone; acende quando o playhead passa */
  content: ''; position: absolute; left: 6%; right: 6%; top: 46%; height: 50%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .95), transparent); filter: blur(8px); opacity: .35;
  animation: ap-lit var(--T) linear infinite; animation-delay: var(--d);
}
.ap-dock__lift { display: block; width: 100%; border-radius: 24%; animation: ap-lift var(--T) linear infinite; animation-delay: var(--d); }
.ap-dock__app img { display: block; width: 100%; height: auto; max-width: none;
  filter: drop-shadow(0 calc(var(--ic) * .07) calc(var(--ic) * .09) rgba(0, 0, 0, .5)); }
.ap-dock__app--soon img { opacity: .9; }
@keyframes ap-lit { 0%, 14%, 100% { opacity: .35; } 6% { opacity: .95; } }
@keyframes ap-lift { 0%, 14%, 100% { transform: none; } 6% { transform: translateY(calc(var(--ic) * -.1)); } }
/* o pico de cada ícone acontece quando o playhead passa no centro dele: atraso = (centro - 6%) × T - T
   (o trilho vai da borda esquerda do 1º ícone à direita do 5º: centros em 8,5 / 29,25 / 50 / 70,75 / 91,5 %) */
.ap-dock__app:nth-of-type(1) { --d: calc(var(--T) * -.975); }
.ap-dock__app:nth-of-type(2) { --d: calc(var(--T) * -.7675); }
.ap-dock__app:nth-of-type(3) { --d: calc(var(--T) * -.56); }
.ap-dock__app:nth-of-type(4) { --d: calc(var(--T) * -.3525); }
.ap-dock__app:nth-of-type(5) { --d: calc(var(--T) * -.145); }
/* pontinho do status embaixo de cada ícone (como o do app aberto no Dock do Mac) */
.ap-dock__dot { flex: none; width: 5px; height: 5px; border-radius: 50%; margin-top: calc(var(--ic) * .08); background: var(--muted); }
.ap-dock__app--on .ap-dock__dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.ap-dock__app--bonus .ap-dock__dot { background: var(--bf); box-shadow: 0 0 8px var(--bf); }

/* o nome, como o balão do Dock do Mac: aparece em cima do ícone com o mouse ou com o foco do teclado */
.ap-dock__tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 2; translate: -50% 5px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 13px 9px; border-radius: 11px; white-space: nowrap;
  background: #16151f; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .4);
  opacity: 0; pointer-events: none; transition: opacity .16s ease, translate .2s ease;
}
.ap-dock__tip::after { content: ''; position: absolute; top: 100%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; rotate: 45deg;
  background: #16151f; border: solid rgba(255, 255, 255, .14); border-width: 0 1px 1px 0; }
.ap-dock__tip b { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.1; }
.ap-dock__tip small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1; color: var(--muted); }
.ap-dock__app--on .ap-dock__tip small { color: var(--ok); }
.ap-dock__app--bonus .ap-dock__tip small { color: var(--bf); }
.ap-dock__app:hover .ap-dock__tip, .ap-dock__app:focus-visible .ap-dock__tip { opacity: 1; translate: -50% 0; }
.ap-dock__app:focus-visible .ap-dock__lift { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.ap-dock__app:hover img, .ap-dock__app:focus-visible img { filter: drop-shadow(0 calc(var(--ic) * .1) calc(var(--ic) * .14) rgba(0, 0, 0, .55)) drop-shadow(0 0 calc(var(--ic) * .18) rgba(var(--glow-rgb), .55)); }
/* nome escrito embaixo de cada ícone: só onde não tem mouse (celular, tablet de toque) */
.ap-dock__two { display: none; }

/* playhead do Final Cut correndo pelo Dock (o ícone embaixo dele sobe um pouco e acende). Some quando o mouse entra no Dock. */
.ap-dock__track { position: absolute; left: var(--pad); right: var(--pad); top: 3px; bottom: 3px; z-index: 3; pointer-events: none; transition: opacity .2s ease; }
.ap-dock__ph { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .9), 0 0 16px rgba(var(--accent-text-rgb), .7); animation: ap-ph var(--T) linear infinite; }
.ap-dock__ph::before { content: ''; position: absolute; top: -2px; left: 50%; width: 11px; height: 10px; transform: translateX(-50%); background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
@keyframes ap-ph { from { left: 0; } to { left: 100%; } }
.ap-dock.is-mag .ap-dock__track, .ap-dock:focus-within .ap-dock__track { opacity: 0; }
.ap-dock.is-mag .ap-dock__lift, .ap-dock.is-mag .ap-dock__app::before, .ap-dock:focus-within .ap-dock__lift { animation-play-state: paused; }

/* cards flutuando do hero */
.ap-hero .float { font-size: max(11.5px, calc(15 * var(--u))); padding: calc(15 * var(--u)) calc(19 * var(--u)); border-radius: calc(18 * var(--u)); line-height: 1.4; }
.ap-hero .float__label { font-size: max(11px, .8em); margin-bottom: .45em; }
.ap-f .row { display: flex; align-items: center; gap: .85em; }
.ap-f__ico { flex: none; width: 2.5em; height: 2.5em; border-radius: .8em; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, var(--accent-hover), var(--violet)); box-shadow: 0 .5em 1.4em rgba(var(--accent-rgb), .5); }
.ap-f__ico .ic { width: 1.25em; height: 1.25em; }
.ap-f__ico--sm { width: 1.9em; height: 1.9em; border-radius: .6em; }
.ap-f__ico--sm .ic { width: 1.05em; height: 1.05em; }
.ap-f__big { display: block; font-size: 1.18em; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.ap-f--safe { left: calc(96 * var(--u)); top: calc(416 * var(--u)); --rot: -2deg; }
.ap-f--tl { right: calc(70 * var(--u)); top: calc(416 * var(--u)); --rot: 2deg; }
.ap-f--now { right: calc(64 * var(--u)); top: calc(756 * var(--u)); --rot: 3deg; }
.ap-f--now .float__label { color: rgba(255, 255, 255, .8); }
.ap-f__apps { display: flex; flex-wrap: wrap; align-items: center; gap: .15em .1em; }
.ap-f__apps img { width: 2.6em; height: 2.6em; max-width: none; margin: -.25em -.15em; filter: drop-shadow(0 .3em .5em rgba(0, 0, 0, .35)); }
.ap-f__apps b { flex: 1 0 100%; margin-top: .25em; font-size: 1.05em; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.ap-f__apps b i { font-style: normal; font-weight: 500; opacity: .8; }
.ap-f--bf { left: calc(54 * var(--u)); top: calc(762 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: .6em; --rot: -3deg;
  background: rgba(10, 10, 14, .78); border-color: rgba(var(--bf-rgb), .45); color: #fff; font-weight: 600; white-space: nowrap;
  box-shadow: 0 0 0 calc(6 * var(--u)) rgba(var(--bf-rgb), .06), 0 16px 40px rgba(0, 0, 0, .5); }
.ap-f--bf b { font: 700 1.05em/1 var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--bf-ink); background: var(--bf);
  padding: .4em .65em; border-radius: 999px; }
.ap-f--bf::after { box-shadow: 0 0 0 1px rgba(var(--bf-rgb), .7), 0 0 46px rgba(var(--bf-rgb), .3); }
.ap-n--1 { left: calc(227 * var(--u)); top: calc(532 * var(--u)); }
.ap-n--2 { left: calc(1203 * var(--u)); top: calc(532 * var(--u)); }

.ap-bftag { display: none; }
/* legenda dos pontinhos do Dock */
.ap-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ap-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ap-legend span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.ap-legend--on::before { background: var(--ok) !important; box-shadow: 0 0 8px var(--ok); }
.ap-legend--bonus::before { background: var(--bf) !important; box-shadow: 0 0 8px var(--bf); }
.ap-hero__btn { margin-top: 16px; }
.ap-hero__lead { margin: 12px 0 0; font-size: max(13px, calc(15 * var(--u))); color: var(--muted); }

/* congelado no print: o playhead parado no vão entre MasterCut e MasterCaption */
.is-shot .ap-dock__lift, .is-shot .ap-dock__app::before { animation: none; }
.is-shot .ap-dock__ph { animation: none; left: 60%; }

/* tablet e telas sem mouse (toque): o nome fica escrito embaixo de cada ícone, em duas linhas */
@media (hover: none), (max-width: 760px) {
  .ap-dock { margin-bottom: 34px; --gap: calc(var(--ic) * .3); }   /* vão um pouco maior: "Caption" e "Sound FX" não encostam */
  .ap-dock__two { position: absolute; left: 50%; top: calc(100% + var(--ic) * .07 + 7px); translate: -50% 0;
    display: flex; flex-direction: column; align-items: center; line-height: 1.12; white-space: nowrap; }
  .ap-dock__two em { font-style: normal; font-size: 11px; font-weight: 500; color: #b9b8c6; }
  .ap-dock__two b { font-size: 12px; font-weight: 700; letter-spacing: -.01em; }
  .ap-dock__tip { display: none; }
}
/* tablet de toque: ícone de 44 px no mínimo (alvo de toque bom e os nomes não encostam um no outro) */
@media (hover: none) and (min-width: 761px) { .ap-dock { --ic: max(44px, calc(58 * var(--u))); } }
@media (min-width: 761px) and (max-width: 1100px) {
  .ap-f--tl { right: 32px; }
  .ap-f--now { right: 32px; }
  .ap-f--bf { left: 32px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .ap-f--tl, .ap-f--safe, .ap-n, .ap-hero__wires { display: none; }
  .ap-f--bf { top: calc(400 * var(--u)); }
  /* "Disponíveis agora" mais estreito, sem os dois ícones e com o nome em duas linhas: cabe entre o fim de "TIMELINE"
     e a ponta dos dedos da mão direita, sem encostar em nenhum dos dois */
  .ap-f--now { top: calc(412 * var(--u)); right: 20px; max-width: calc(20vw + 12px); }
  .ap-f--now .ap-f__apps img { display: none; }
  .ap-f--now .ap-f__apps b { white-space: normal; margin-top: 0; }
}

/* ==========================================================================
   2. ÍNDICE + SELETOR FIXO (timeline de 5 clipes que gruda embaixo da nav)
   O seletor é uma faixa de fundo sólido do topo da tela até embaixo dos clipes: nada aparece cortado entre a nav e ele.
   ========================================================================== */
/* a entrada 3D ao rolar (data-reveal) empurra blocos pros lados antes de aparecer: no celular isso alargava a página (413 px em vez de 390).
   clip corta só na horizontal e não vira área de rolagem, então o seletor fixo (sticky) continua funcionando. */
@supports (overflow-x: clip) { main { overflow-x: clip; } }
.ap-flow { position: relative; }
.ap-intro { position: relative; padding: 72px 0 0; scroll-margin-top: 70px; }
.ap-intro .lead { margin-top: 18px; }
.ap-sel { position: sticky; top: 0; z-index: 60; padding: 88px 0 14px;
  background: linear-gradient(180deg, rgba(4, 4, 9, .97) 0, rgba(4, 4, 9, .97) calc(100% - 14px), rgba(4, 4, 9, 0) 100%); }
.ap-sel__inner {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 18px 8px 8px; border-radius: 22px;
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin: 0 auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(12, 12, 19, .9);
  border: 1px solid var(--glass-border); box-shadow: 0 20px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.ap-sel__ruler { position: absolute; left: 8px; right: 8px; top: 5px; height: 8px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 12px) 0 100% / 100% 50% no-repeat,
              repeating-linear-gradient(90deg, rgba(255, 255, 255, .42) 0 1px, transparent 1px 60px) 0 0 / 100% 100% no-repeat; }
.ap-sel__clip {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; height: 56px; padding: 0 12px 0 6px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(76, 60, 200, .14)); border: 1px solid rgba(var(--accent-text-rgb), .18);
  color: var(--text); text-decoration: none; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ap-sel__ico { width: 44px; height: 44px; max-width: none; flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.ap-sel__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap-sel__txt b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sel__txt small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sel__st { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; }
.ap-sel__st--on { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.ap-sel__st--bonus { background: var(--bf); box-shadow: 0 0 10px rgba(var(--bf-rgb), .8); }
.ap-sel__st--soon { background: rgba(255, 255, 255, .3); }
.ap-sel__clip.is-on { background: linear-gradient(180deg, var(--clip-on-1), var(--clip-on-2)); border-color: #fff; box-shadow: 0 0 24px rgba(var(--glow-rgb), .7); }
.ap-sel__clip.is-on small { color: rgba(255, 255, 255, .85); }
@media (hover: hover) and (pointer: fine) { .ap-sel__clip:not(.is-on):hover { border-color: rgba(var(--accent-text-rgb), .55); background: linear-gradient(180deg, rgba(var(--accent-rgb), .34), rgba(76, 60, 200, .2)); } }
.ap-sel__ph { position: absolute; z-index: 2; top: 2px; bottom: 4px; left: 0; width: 2px; pointer-events: none; transform: translateX(var(--x, 14px));
  background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .85), 0 0 18px rgba(var(--accent-text-rgb), .6); transition: transform .6s cubic-bezier(.2, .75, .25, 1); }
.ap-sel__ph::before { content: ''; position: absolute; top: 0; left: 50%; width: 11px; height: 10px; transform: translateX(-50%); background: #fff; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
@media (min-width: 761px) and (max-width: 1180px) {
  .ap-sel__clip { gap: 8px; padding-right: 16px; }
  .ap-sel__txt b { font-size: 13px; }
  .ap-sel__txt small .n { display: none; }   /* sem o número a etapa cabe inteira */
  .ap-sel__ico { width: 38px; height: 38px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .ap-sel__txt small .n { display: none; }
}

/* ==========================================================================
   3. VITRINES DOS APPS · texto de um lado, tela real numa moldura do outro
   ========================================================================== */
.ap-app { overflow: hidden; scroll-margin-top: 190px;   /* faixa do seletor fixo (186px) + folga: a seção começa logo abaixo dele */ }
@media (min-width: 761px) { .section.ap-app { padding: 116px 0; } }
.ap-app::before { /* luz da seção, do lado da tela */
  content: ''; position: absolute; top: 8%; bottom: 8%; right: -10%; width: 70%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .26), transparent); }
.ap-app--flip::before { right: auto; left: -10%; }
.ap-app .container { position: relative; z-index: 1; }
/* o clique no Dock leva o foco pra seção (tabindex -1): sem contorno na seção inteira */
.ap-app:focus, .ap-intro:focus, .ap-bf:focus { outline: none; }
.ap-app__grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 80px; align-items: center; }
.ap-app--flip .ap-app__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
.ap-app--flip .ap-app__copy { order: 2; }

.ap-app__copy { position: relative; isolation: isolate; }
.ap-app__id { display: flex; align-items: center; gap: 18px; }
.ap-app__id img { width: 88px; height: 88px; max-width: none; margin: -8px; flex: none; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 24px rgba(var(--glow-rgb), .35)); }
.ap-app__id > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ap-step { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.ap-step i { font-style: normal; color: var(--dim); }
.ap-app h2 { margin: 26px 0 0; font-size: clamp(38px, 4.1vw, 58px); font-weight: 650; letter-spacing: -.05em; line-height: 1; white-space: nowrap; }
.ap-app__lead { margin: 22px 0 0; font-size: 18px; line-height: 1.6; color: #c6c5d2; text-wrap: pretty; }
.ap-feats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.ap-feats li { display: flex; align-items: flex-start; gap: 13px; font-size: 15.5px; line-height: 1.45; color: #dddce7; }
.ap-feats li > span { flex: none; width: 30px; height: 30px; margin-top: -4px; border-radius: 9px; display: grid; place-items: center;
  color: var(--accent-text); background: var(--accent-soft); border: 1px solid rgba(var(--accent-text-rgb), .22); }
.ap-feats .ic { width: 16px; height: 16px; }
.ap-app__cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.ap-app__note { font-size: 13px; line-height: 1.45; color: var(--muted); max-width: 230px; }
.ap-app__note b { color: #d6d5e0; font-weight: 600; }
.ap-soon { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 16px; font-size: 14px; color: #c6c5d2;
  background: rgba(255, 255, 255, .03); border: 1px dashed var(--line-2); }
.ap-soon .ic { width: 18px; height: 18px; color: var(--accent-text); }

/* o lado da tela: tudo em cqw, escala junto com a coluna */
.ap-vis { position: relative; container-type: inline-size; padding: 9% 0 12%; }
.ap-vis .tilt { position: relative; border-radius: 2.4cqw; }
.ap-vis .tilt__glare { z-index: 2; }
.ap-vis__ico { position: absolute; z-index: 6; width: 24cqw; height: auto; max-width: none; transform: rotate(var(--rot, -9deg));
  filter: drop-shadow(0 3cqw 4cqw rgba(0, 0, 0, .6)) drop-shadow(0 0 5cqw rgba(var(--glow-rgb), .45));
  animation: ap-ico 7s ease-in-out infinite alternate; }
@keyframes ap-ico { from { transform: translateY(-1.2cqw) rotate(var(--rot, -9deg)); } to { transform: translateY(1.2cqw) rotate(var(--rot, -9deg)); } }
.is-shot .ap-vis__ico { animation: none; }
.ap-vis .float { font-size: max(12px, 2.3cqw); padding: 1.1em 1.3em; border-radius: 1.2em; line-height: 1.35; }
.ap-vis .float__label { font-size: max(11px, .82em); margin-bottom: .5em; }
.ap-vis .float b { font-weight: 650; letter-spacing: -.01em; }

/* janela de app (barra do Mac em HTML + a tela recortada) */
.ap-win { border-radius: 2.6cqw; overflow: hidden; }
.ap-win__bar { display: flex; align-items: center; gap: 1.3cqw; padding: 1.9cqw 2.6cqw; border-bottom: 1px solid var(--line); font-size: max(11px, 1.9cqw); color: var(--muted); }
.ap-win__bar i { width: 1.7cqw; height: 1.7cqw; min-width: 8px; min-height: 8px; border-radius: 50%; flex: none; background: #ff5f57; }
.ap-win__bar i:nth-child(2) { background: #febc2e; }
.ap-win__bar i:nth-child(3) { background: #28c840; }
.ap-win__bar span { margin-left: 1.2cqw; white-space: nowrap; }
.ap-win__img { display: block; width: 100%; height: auto; max-width: none; }
/* os recortes de tela vêm num <picture> (WebP + PNG de reserva): display contents faz o layout ser o mesmo de quando era só o <img>
   (as regras que já miram o img continuam valendo e o <picture> não vira uma caixa inline no meio) */
.ap-flow picture { display: contents; }
.ap-win--sync, .ap-win--cut, .ap-win--sfx { box-shadow: var(--glass-shadow), 0 0 14cqw rgba(var(--glow-rgb), .28); }
.ap-win--sync { background: #0c0c0d; }
.ap-win--cut, .ap-win--sfx { background: #07080d; }
/* remendo da cor do painel por cima de "Transcrição 3.412 · Traduzir" (número de exemplo e recurso fora dos fatos) */
.ap-patchwrap { position: relative; }
.ap-patch { position: absolute; display: block; }
.ap-patch--cut { left: 61.27%; top: 12.11%; width: 35.95%; height: 4.04%; background: #10121b; }

/* Mac (MasterCaption): tampa com a tela e a base, só CSS */
.ap-mac { position: relative; }
.ap-mac__lid { position: relative; padding: 1.4cqw 1.4cqw 2.2cqw; border-radius: 2.8cqw 2.8cqw 1.1cqw 1.1cqw;
  background: linear-gradient(180deg, #1c1d28, #0c0d14); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), 0 0 14cqw rgba(var(--glow-rgb), .3); }
.ap-mac__lid::before { content: ''; position: absolute; top: .5cqw; left: 50%; width: .8cqw; height: .8cqw; border-radius: 50%; background: #2b2d3a; transform: translateX(-50%); }
.ap-mac__lid img { width: 100%; height: auto; max-width: none; border-radius: .7cqw; }
.ap-mac__base { position: relative; height: 2.4cqw; margin: 0 -6cqw; border-radius: .5cqw .5cqw 3cqw 3cqw / .5cqw .5cqw 2cqw 2cqw;
  background: linear-gradient(180deg, #4a4c5e 0%, #2a2b37 30%, #14151d 100%); box-shadow: 0 4cqw 8cqw rgba(0, 0, 0, .65); }
.ap-mac__base::before { content: ''; position: absolute; top: 0; left: 50%; width: 14cqw; height: .8cqw; transform: translateX(-50%); border-radius: 0 0 1cqw 1cqw; background: #191a24; }

/* --- 01 Master Safe: ilustração da cópia (cartão -> 1 ou 2 HDs -> pastas) --- */
.ap-vis--safe { padding-bottom: 17%; }
.ap-vis--safe .tilt { margin-left: 10cqw; }
.ap-vis--safe .ap-vis__ico { left: -3cqw; top: 0; --rot: -10deg; }
.ap-safe { position: relative; display: grid; grid-template-columns: 27cqw 11cqw minmax(0, 1fr); align-items: center; padding: 4.6cqw 4cqw 4cqw; row-gap: 4cqw; font-size: max(11px, 2.05cqw); }
.ap-safe__card { position: relative; aspect-ratio: 26 / 33; border-radius: 2cqw; padding: 2.4cqw; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1.2cqw;
  clip-path: polygon(0 0, 70% 0, 100% 17%, 100% 100%, 0 100%); text-align: center;
  background: linear-gradient(160deg, #6f77e8, #3d44b0 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.ap-safe__pins { position: absolute; top: 2.4cqw; left: 2.6cqw; display: flex; gap: 1.1cqw; }
.ap-safe__pins i { width: 1.6cqw; height: 4cqw; border-radius: .5cqw; background: rgba(255, 255, 255, .55); }
.ap-safe__card > .ic { width: 7cqw; height: 7cqw; color: #fff; stroke-width: 1.6; margin-bottom: auto; margin-top: 8cqw; filter: drop-shadow(0 0 2cqw rgba(255, 255, 255, .4)); }
.ap-safe__card b { font-size: max(11px, .92em); line-height: 1.15; font-weight: 650; color: #fff; }
.ap-safe__card em { display: inline-flex; align-items: center; gap: .4em; font-style: normal; font-size: max(11px, .85em); font-weight: 600; padding: .35em .7em; border-radius: 999px;
  background: rgba(4, 4, 9, .45); color: #fff; white-space: nowrap; }
.ap-safe__card em .ic { width: 1.1em; height: 1.1em; }
.ap-safe__wires { width: 100%; height: 60%; overflow: visible; }
.ap-safe__wires path { fill: none; stroke: rgba(235, 230, 255, .9); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .5 8; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(var(--accent-text-rgb), .9)); }
.ap-safe__dests { display: grid; gap: 2.4cqw; }
.ap-safe__dest { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.8cqw; padding: 2cqw 2.2cqw; border-radius: 1.8cqw;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); }
.ap-safe__hd { width: 5.4cqw; height: 5.4cqw; border-radius: 1.4cqw; display: grid; place-items: center; color: var(--accent-text); background: var(--accent-soft); }
.ap-safe__hd .ic { width: 3cqw; height: 3cqw; }
.ap-safe__dest b { display: block; font-size: max(11px, .95em); font-weight: 650; margin-bottom: .55em; white-space: nowrap; }
.ap-safe__dest b small { font-size: max(11px, .85em); font-weight: 500; color: var(--muted); }
.ap-safe__bar { display: block; height: .9cqw; min-height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--ok)); box-shadow: 0 0 1.6cqw rgba(var(--ok-rgb), .35); }
.ap-safe__dest em { display: inline-flex; align-items: center; gap: .35em; font-style: normal; font-size: max(11px, .88em); font-weight: 600; color: var(--ok); white-space: nowrap; }
.ap-safe__dest em .ic { width: 1.15em; height: 1.15em; stroke-width: 2.4; }
.ap-safe__tree { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 1.2cqw; padding-top: 3cqw; border-top: 1px solid var(--line); }
.ap-safe__tree span { display: inline-flex; align-items: center; gap: .5em; padding: .55em .9em; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); font-size: max(11px, .92em); white-space: nowrap; }
.ap-safe__tree span .ic { width: 1.2em; height: 1.2em; color: var(--accent-text); }
.ap-safe__tree i { font-style: normal; color: var(--dim); }
.ap-vf--sum { right: 3cqw; bottom: 0; width: 38cqw; --rot: 2deg; }
.ap-sum { display: flex; align-items: center; gap: 1.6cqw; margin-top: 1.4cqw; }
.ap-sum i { flex: 1; height: 1.6cqw; min-height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.ap-sum i::before { content: ''; display: block; height: 100%; width: var(--w, 58%); border-radius: inherit; background: rgba(255, 255, 255, .22); }
.ap-sum .ic { width: 1.35em; height: 1.35em; color: var(--ok); stroke-width: 2.6; }
.ap-vf--ro { right: -2cqw; top: 1cqw; --rot: 3deg; }
.ap-vf--ro .float__label { color: rgba(255, 255, 255, .8); }

/* --- 02 MasterSync: a tela de entrada na janela; os takes no lugar da música saindo pra fora --- */
.ap-vis--sync { padding-bottom: 28%; }
.ap-vis--sync .tilt { margin-right: 9cqw; }
.ap-vis--sync .ap-vis__ico { right: -1cqw; top: 1cqw; --rot: 9deg; }
.ap-sticker { position: absolute; z-index: 6; left: 4cqw; top: 22cqw; transform: rotate(-8deg); padding: .5em 1em; border-radius: .5em;
  font: 700 max(14px, 3.4cqw)/1 var(--font-cond); letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: rgba(20, 19, 28, .82); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ap-vf--takes { right: 0; bottom: 0; width: 70cqw; padding: .7em .7em .6em !important; --rot: 2deg; }
.ap-vf--takes .float__label { padding: 0 .3em; }
.ap-vf--takes img { display: block; width: 100%; height: auto; max-width: none; border-radius: .7em; }
.ap-vf--ext { left: -4cqw; bottom: 34cqw; --rot: -3deg; }
.ap-vf--ext .float__label { color: rgba(255, 255, 255, .8); }

/* --- 03 MasterCut --- */
.ap-vis--cut { padding-bottom: 17%; }
.ap-vis--cut .tilt { margin-left: 8cqw; }
.ap-vis--cut .ap-vis__ico { left: -3cqw; top: 24cqw; --rot: -9deg; }   /* mais baixo: não cobre o título da tela ("Revise os cortes") */
.ap-vf--strip { left: 0; bottom: 3cqw; width: 80cqw; padding: .55em !important; --rot: -2deg; }
.ap-vf--strip img { display: block; width: 100%; height: auto; max-width: none; border-radius: .8em; }
.ap-vf--ver { right: -2cqw; top: 3cqw; --rot: 3deg; }
.ap-vf--ver .float__label { color: rgba(255, 255, 255, .8); }
.ap-vers { display: flex; gap: .45em; }
.ap-vers i { font-style: normal; font-weight: 650; padding: .38em .7em; border-radius: .6em; background: rgba(255, 255, 255, .16); white-space: nowrap; }
.ap-vers i.on { background: #fff; color: var(--accent); }
.ap-vf--orig { right: 2cqw; bottom: 21cqw; display: flex; align-items: center; gap: .55em; white-space: nowrap; --rot: 2deg; }
.ap-vf--orig .ic { width: 1.25em; height: 1.25em; color: var(--accent-text); }

/* --- 04 MasterCaption: o carro-chefe, centrado e maior, com "LEGENDAS" vazado atrás --- */
.ap-app--cap { overflow: hidden; overflow: clip; }
@media (min-width: 761px) { .section.ap-app--cap { padding-bottom: 70px; } }
.ap-app--cap::before { display: none; }
.ap-cap__word { position: absolute; left: 0; right: 0; top: 60px; z-index: 0; text-align: center; pointer-events: none; white-space: nowrap; }
.ap-cap__word span { font-size: clamp(110px, 23vw, 340px); color: transparent; -webkit-text-stroke: 1.5px rgba(var(--accent-text-rgb), .17); }
.ap-cap__head { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; text-align: center; }
.ap-cap__icon { display: block; width: 124px; height: 124px; max-width: none; margin: 0 auto; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .55)) drop-shadow(0 0 44px rgba(var(--glow-rgb), .65)); }
.ap-cap__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin-top: 8px; }
.ap-cap__head h2 { margin-top: 18px; font-size: clamp(48px, 6.4vw, 92px); white-space: normal; }
.ap-cap__head .ap-app__lead { max-width: 620px; margin-left: auto; margin-right: auto; }
.ap-cap__styles { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; }
.ap-cap__sk { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.ap-cap__styles b { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); }
.ap-cap__styles b.is-mine { color: var(--accent-text); border-color: rgba(var(--accent-text-rgb), .45); background: var(--accent-soft); }
.ap-feats--2 { grid-template-columns: 1fr 1fr; gap: 14px 30px; text-align: left; max-width: 760px; margin: 28px auto 0; }
.ap-cap__head .ap-app__cta { justify-content: center; }
.ap-cap__vis { position: relative; z-index: 1; max-width: 1100px; margin: 70px auto 0; padding: 2% 0 5%; container-type: inline-size; }
.ap-cap__glow { position: absolute; inset: -6% 4%; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--glow-rgb), .38), transparent); }
.ap-cap__tilt { position: relative; width: 70%; margin: 0 auto; border-radius: 2cqw; container-type: inline-size; }
.ap-cap__vis .float { font-size: max(12px, 1.45cqw); line-height: 1.35; }
.ap-cap__phone { left: 3%; bottom: 0; width: 19%; padding: .5em !important; border-radius: 2.4cqw; --rot: -4deg; }
.ap-cap__phone img { display: block; width: 100%; height: auto; max-width: none; border-radius: 1.8cqw; }
.ap-cap__rec { position: absolute; left: 50%; bottom: -1em; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .45em; padding: .5em .9em; border-radius: 999px; white-space: nowrap;
  font-weight: 650; background: rgba(12, 12, 19, .9); border: 1px solid var(--line-2); box-shadow: 0 1em 2em rgba(0, 0, 0, .45); }
.ap-cap__rec .ic { width: 1.2em; height: 1.2em; color: var(--accent-text); }
.ap-cap__fcp { right: 1%; top: 9%; width: 31%; padding: .6em !important; border-radius: 1.4cqw; --rot: 3deg; }
.ap-cap__fcp img { display: block; width: 100%; height: auto; max-width: none; border-radius: .9cqw; }
.ap-vf__cap { display: flex; align-items: center; gap: .5em; padding: .25em .4em .65em; font-size: .95em; font-weight: 600; }
.ap-vf__cap .ic { width: 1.2em; height: 1.2em; color: var(--accent-text); }
.ap-cap__chip { right: 6%; bottom: 7%; display: flex; align-items: center; gap: .6em; white-space: nowrap; padding: .9em 1.2em !important; --rot: -2deg; }
.ap-cap__chip .ic { width: 1.3em; height: 1.3em; }

/* --- 05 Master Sound FX: busca + lista na janela; o painel de dentro do Final Cut saindo pra fora --- */
.ap-vis--sfx { padding-bottom: 14%; }
.ap-vis--sfx .tilt { margin-left: 6cqw; margin-right: 14cqw; }
.ap-vis--sfx .ap-vis__ico { left: -3cqw; top: 0; --rot: -9deg; }
.ap-sfx { padding: 2.4% 2.2% 0; background: #07080d; }
.ap-sfx__busca { width: 100%; height: auto; max-width: none; }
.ap-sfx__lista { margin-top: 2.4%; padding: 1.6% .6% 0; background: #10121b; border: 1px solid #1c1e26; border-bottom: 0; border-radius: 1.8cqw 1.8cqw 0 0; }
.ap-sfx__lista img { width: 100%; height: auto; max-width: none; }
.ap-vf--panel { right: -2cqw; top: 22cqw; width: 37cqw; padding: .5em !important; --rot: 3deg; }
.ap-vf--panel .float__label { padding: .3em .5em .1em; }
.ap-vf--panel img { display: block; width: 100%; height: auto; max-width: none; border-radius: .9em; }
.ap-vf--tl { left: 8cqw; bottom: 3cqw; display: flex; align-items: center; gap: .6em; --rot: -2deg; white-space: nowrap; }
.ap-vf--fav { right: 0; top: 2cqw; --rot: 2deg; padding: .7em .8em !important; }
.ap-favs { display: flex; gap: .4em; }
.ap-favs i { display: inline-flex; align-items: center; gap: .35em; font-style: normal; font-weight: 600; padding: .4em .7em; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-2); white-space: nowrap; }
.ap-favs .ic { width: 1.1em; height: 1.1em; color: var(--accent-text); }
.ap-favs .ic--fill { color: #f5c542; }

/* ==========================================================================
   4. BLACK NOVEMBER · curso + 2 apps (lima no preto, logo real do curso)
   ========================================================================== */
.ap-bf { overflow: hidden; scroll-margin-top: 190px;   /* igual ao .ap-app: o seletor fixo termina bem onde esta seção começa; com menos que 186 uma tira
  cortada dele aparece em cima da nav, e com 0 (card da Black no hero, #black-november direto) os ícones que flutuam no card ficavam embaixo da nav */ }
@media (min-width: 761px) { .section.ap-bf { padding: 120px 0 100px; } }
.ap-bf__glow { position: absolute; left: 50%; top: 0; width: 1100px; height: 700px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--bf-rgb), .14), transparent); }
.ap-bf .container { position: relative; z-index: 1; }
.ap-bf__card { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; align-items: center;
  padding: 60px 60px 56px; border-radius: 36px;
  background: radial-gradient(70% 120% at 0% 0%, rgba(var(--bf-rgb), .1), transparent 60%), linear-gradient(180deg, #0e0f0a, #070806);
  border: 1px solid rgba(var(--bf-rgb), .32);
  box-shadow: 0 0 0 8px rgba(var(--bf-rgb), .035), 0 40px 120px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); }
.ap-bf__grid { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(rgba(var(--bf-rgb), .07) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--bf-rgb), .07) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask: radial-gradient(70% 90% at 100% 0%, #000, transparent 70%); mask: radial-gradient(70% 90% at 100% 0%, #000, transparent 70%); }
.ap-bf .bf-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--bf); margin-bottom: 18px; }
.ap-bf .bf-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--bf); box-shadow: 0 0 12px var(--bf); flex: none; }
.ap-bf__tone { color: var(--bf); }
.ap-d-s { display: none; }
.ap-bf__combo { margin-top: 32px; padding: 28px 30px 24px; border-radius: 24px; max-width: 560px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.ap-bf__logo { width: 300px; max-width: 100%; height: auto; }
.ap-bf__apps { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed rgba(255, 255, 255, .1); }
.ap-bf__plus { font: 700 28px/1 var(--font-cond); font-style: normal; color: var(--bf); margin-right: 2px; }
.ap-bf__app { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; white-space: nowrap; }
.ap-bf__app img { width: 58px; height: 58px; max-width: none; margin: -5px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.ap-bf__pay { text-align: center; padding-left: 48px; border-left: 1px dashed rgba(var(--bf-rgb), .3); }
.ap-bf__pay small { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ap-bf__pay s { display: block; margin-top: 12px; font-size: 18px; color: var(--muted); text-decoration-thickness: 1.5px; }
.ap-bf__pay strong { display: block; font: 700 96px/.95 var(--font-cond); color: var(--bf); letter-spacing: .01em; margin: 6px 0 8px; text-shadow: 0 0 40px rgba(var(--bf-rgb), .3); }
.ap-bf__pay > span { display: block; margin-top: 10px; font-size: 15px; color: #c6c5d2; }
.ap-bf__pay .btn { margin-top: 24px; width: 100%; justify-content: center; padding: 0 20px; }
.ap-bf__float { position: absolute; z-index: 2; width: 130px; height: 130px; max-width: none; pointer-events: none;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(var(--bf-rgb), .25)); animation: bob 7s ease-in-out infinite alternate; }
.ap-bf__float--1 { right: 330px; top: -64px; --rot: -10deg; }
.ap-bf__float--2 { right: 214px; top: -46px; width: 104px; height: 104px; --rot: 9deg; animation-delay: -3s; }
.is-shot .ap-bf__float { animation: none; transform: rotate(var(--rot)); }

/* ==========================================================================
   5. FECHAMENTO · Rai dando tchau + "No YouTube" + assinatura
   ========================================================================== */
@media (min-width: 761px) { .section.ap-end { padding: 60px 0 130px; } }
.ap-end__card { overflow: visible; text-align: left; padding: 80px 560px 72px 72px; }
.ap-end__copy { max-width: 560px; }
.ap-end__copy .lead { margin-top: 18px; }
.ap-end__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ap-end__curso img { width: 26px; height: 26px; max-width: none; margin-left: -6px; }
.ap-end__pic { position: absolute; right: 40px; bottom: 0; width: 500px; }
.ap-end__pic picture { display: block; filter: drop-shadow(0 0 50px rgba(var(--glow-rgb), .45)); }
.ap-end__rai { width: 100%; height: auto; max-width: none;
  -webkit-mask: linear-gradient(180deg, #000 80%, transparent 99%); mask: linear-gradient(180deg, #000 80%, transparent 99%); }
.ap-end__yt { left: 30px; bottom: 56px; display: flex; align-items: center; gap: 12px; --rot: -3deg; line-height: 1.3; }
.ap-end__yt .float__label { margin-bottom: 4px; }
.ap-end__ytico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--live); color: #fff; box-shadow: 0 8px 22px rgba(229, 56, 59, .45); }
.ap-end__ytico .ic { width: 20px; height: 20px; }
.ap-end__sign { display: flex; align-items: center; gap: 14px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.ap-end__sign img { width: 70px; height: 70px; max-width: none; margin: -6px 0; }
.ap-end__sign span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.ap-end__sign b { display: block; font-size: 15px; color: var(--text); font-weight: 650; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1100px) {
  .ap-app__grid { gap: 56px; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
  .ap-app--flip .ap-app__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
  /* floats e selos nunca encostam na borda da tela: nada sai da coluna */
  .ap-vf--ro, .ap-vf--ver, .ap-vf--panel { right: 0; }
  .ap-vis--sync .ap-vis__ico { right: 0; }
  .ap-vis--safe .ap-vis__ico, .ap-vis--cut .ap-vis__ico, .ap-vis--sfx .ap-vis__ico { left: 0; }
  .ap-bf__card { grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; padding: 52px 44px 48px; }
  .ap-bf__pay { padding-left: 36px; }
  .ap-bf__float--1 { right: 280px; } .ap-bf__float--2 { right: 170px; }
  .ap-end__card { padding: 64px 400px 60px 52px; }
  .ap-end__pic { width: 400px; right: 20px; }
  .ap-end__yt { left: 10px; }
}
@media (max-width: 900px) {
  .ap-app__grid, .ap-app--flip .ap-app__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ap-app--flip .ap-app__copy { order: 0; }
  .ap-app__copy { max-width: 620px; }
  .ap-vis { max-width: 640px; margin: 0 auto; width: 100%; }
  .ap-bf__card { grid-template-columns: minmax(0, 1fr); }
  .ap-bf__pay { padding: 32px 0 0; border-left: 0; border-top: 1px dashed rgba(var(--bf-rgb), .3); }
  .ap-bf__pay .btn { max-width: 420px; }
  .ap-bf__float--1 { right: 150px; } .ap-bf__float--2 { right: 44px; }
}

@media (max-width: 760px) {
  /* v3: vãos menores entre os apps no celular (o Rai: "aqui eu já tinha que estar começando a ver outro pedaço").
     Antes 76 + 76 px de padding entre um app e outro; agora 40 + 40. */
  .section.ap-app { padding: 40px 0; }
  .section.ap-bf { padding-top: 64px; }   /* só o vão de cima (vem do último app); os ícones que flutuam em cima do card sobem 44 px: 64 ainda cabe */

  /* hero em vw, como o do curso no celular: título inteiro em cima, o Rai grande (128vw) com a cabeça entrando em "À TIMELINE"
     (o cabelo cobre a metade de baixo de "IM", como no computador) e o Dock pequeno embaixo dele, por cima da parte da foto que já some no escuro (não cobre o rosto nem o peito) */
  .ap-hero { --u: .78px; --off: 0px; height: auto; padding: 84px 0 26px; background: var(--bg); }
  .ap-hero__stage { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: auto; }
  .ap-hero__kicker { position: relative; top: auto; display: flex; margin: 0 0 12px; font-size: 11px; }
  .ap-hero__words { position: relative; top: 0; }
  .ap-hero .ap-w1 { font-size: 18.4vw; }
  .ap-hero .ap-w2 { font-size: 21.4vw; margin-top: .02em; translate: 4.6vw 0; }   /* anda 4,6vw e a foto 4,2vw pro outro lado: o M fica no meio da cabeça e o E sai de trás dela */
  .ap-hero__glow1 { left: -10vw; top: 70px; width: 120vw; height: 340px; }
  .ap-hero__glow2 { display: none; }
  .ap-hero__person { position: relative; display: block; left: auto; top: auto; width: 128vw; margin: -12vw 0 0 -18.2vw; filter: drop-shadow(0 0 40px rgba(var(--glow-rgb), .45)); }
  .ap-hero__fade { height: 30vw; bottom: -8vw; background: linear-gradient(180deg, transparent, var(--bg) 60%); }   /* passa do fim da foto: o brilho termina sem emenda */
  .ap-hero__wires, .ap-n, .ap-f--tl, .ap-f--bf, .ap-f--safe, .ap-f--now { display: none; }   /* no celular a legenda embaixo do Dock faz esse papel */
  .ap-hero__copy { padding: 0 var(--gutter); margin-top: -10.8vw; }
  .ap-dock { --ic: 11.4vw; }
  .ap-dock__ph::before { width: 9px; height: 8px; }
  .ap-legend { margin-top: 2px; }
  .ap-bftag { display: inline-flex; align-items: center; gap: 9px; margin: 14px 0 0; padding: 6px 13px 6px 6px; border-radius: 999px; white-space: nowrap;
    background: rgba(10, 10, 14, .72); border: 1px solid rgba(var(--bf-rgb), .45); box-shadow: 0 0 0 5px rgba(var(--bf-rgb), .06); font: 600 13px/1 var(--font); color: #fff; }
  .ap-bftag b { font: 700 13px/1 var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--bf-ink); background: var(--bf); padding: 6px 9px; border-radius: 999px; }
  .ap-hero__btn { width: 100%; max-width: 380px; justify-content: center; margin-top: 16px; }
  .ap-hero__lead { font-size: 14px; max-width: 300px; margin: 14px auto 0; line-height: 1.5; }

  /* índice + seletor: no celular os clipes mostram só o ícone; o aceso abre e mostra nome e etapa */
  .ap-intro { padding-top: 64px; }
  .ap-sel { padding: 72px 0 10px; }
  .ap-sel__inner { display: flex; gap: 4px; padding: 13px 5px 5px; border-radius: 18px; width: auto; margin: 0 var(--gutter); }
  .ap-sel__ruler { left: 5px; right: 5px; top: 4px; height: 7px; }
  .ap-sel__clip { flex: 1 1 0; justify-content: center; gap: 0; height: 50px; padding: 0; border-radius: 9px; }
  .ap-sel__txt { display: none; }
  .ap-sel__clip.is-on { flex: 0 0 auto; justify-content: flex-start; gap: 6px; padding: 0 12px 0 4px; }
  .ap-sel__clip.is-on .ap-sel__txt { display: flex; gap: 2px; }
  .ap-sel__ico { width: 36px; height: 36px; }
  .ap-sel__txt b { font-size: 12.5px; }
  .ap-sel__txt small { font-size: 11px; }
  .ap-sel__txt small .n { display: none; }
  .ap-sel__st { top: 5px; right: 5px; width: 6px; height: 6px; }

  /* vitrines */
  .ap-app, .ap-bf { scroll-margin-top: 156px;   /* seletor no celular termina em 152px */ }
  .ap-app::before { top: auto; bottom: 0; height: 60%; width: 140%; right: -20%; }
  .ap-app--flip::before { left: -20%; }
  .ap-app__grid, .ap-app--flip .ap-app__grid { gap: 18px; }
  .ap-app__id { gap: 14px; }
  .ap-app__id img { width: 72px; height: 72px; margin: -7px; }
  .ap-app__id > div { gap: 8px; }
  .ap-step { font-size: 11px; letter-spacing: .14em; }
  .ap-app h2 { font-size: 40px; margin-top: 18px; white-space: normal; }
  .ap-app__lead { font-size: 16px; margin-top: 16px; }
  .ap-feats { gap: 11px; margin-top: 20px; }
  .ap-feats li { font-size: 14.5px; gap: 11px; }
  .ap-feats li > span { width: 28px; height: 28px; margin-top: -3px; }
  .ap-app__cta { margin-top: 24px; }
  .ap-app__cta .btn { width: 100%; justify-content: center; }
  .ap-app__note { max-width: none; }
  .ap-vis { padding-top: 10%; }
  .ap-vis .float { font-size: 11.5px; padding: 9px 11px; border-radius: 12px; }
  .ap-vis .float__label { font-size: 11px; }
  .ap-vis__ico { width: 22cqw; }
  .ap-vf--sum, .ap-vf--orig, .ap-vf--fav { display: none; }
  .ap-vis--safe { padding-bottom: 2%; }   /* o card do checksum some no celular: o vão de baixo não precisa ficar */
  .ap-vis--safe .tilt { margin-left: 6cqw; }
  .ap-vf--ro { right: 0; top: 0; }
  .ap-safe { grid-template-columns: 30cqw 7cqw minmax(0, 1fr); padding: 5cqw 3.4cqw 4cqw; font-size: 11px; }
  .ap-safe__card { padding: 2cqw 1.6cqw 2.4cqw; }
  .ap-safe__card b { font-size: 11px; }
  .ap-safe__card em { font-size: 11px; padding: .3em .55em; }
  .ap-safe__dest { gap: 1.4cqw; padding: 2cqw; grid-template-columns: auto minmax(0, 1fr); }
  .ap-safe__dest em { grid-column: 2; font-size: 11px; }
  .ap-safe__dest b { margin-bottom: .35em; }
  .ap-safe__hd { width: 7cqw; height: 7cqw; }
  .ap-safe__hd .ic { width: 4cqw; height: 4cqw; }
  .ap-safe__tree { gap: 1cqw; }
  .ap-safe__tree span { padding: .45em .65em; font-size: 11px; }
  .ap-vis--sync { padding-bottom: 30%; }
  .ap-vis--sync .tilt { margin-right: 4cqw; }
  .ap-vf--takes { width: 92cqw; }
  .ap-vf--ext { display: none; }   /* no celular a lista ao lado já diz "Janela › Extensões" */
  .ap-sticker { left: 0; top: 19cqw; font-size: 13px; }
  .ap-vf--ver { right: 0; top: 2cqw; }
  .ap-vf--strip { width: 92cqw; padding: 5px !important; }
  .ap-vf--panel { top: 20cqw; width: 40cqw; padding: 4px !important; }
  .ap-vf--panel .float__label { display: none; }
  .ap-vis--sfx .tilt { margin-left: 4cqw; margin-right: 18cqw; }
  .ap-vf--tl { left: 2cqw; }

  /* MasterCaption centrado no celular */
  .ap-cap__word { top: 34px; }
  .ap-cap__icon { width: 96px; height: 96px; }
  .ap-cap__head h2 { font-size: 46px; }
  .ap-cap__styles { gap: 6px; }
  .ap-cap__sk { width: 100%; margin: 0 0 2px; }
  .ap-cap__styles b { font-size: 12px; padding: 6px 11px; }
  .ap-feats--2 { grid-template-columns: 1fr; }
  .ap-cap__vis { margin-top: 32px; padding-bottom: 16%; }
  .ap-cap__tilt { width: 88%; margin-left: 12%; }
  .ap-cap__vis .float { font-size: 11px; }
  .ap-cap__phone { left: 0; bottom: 0; width: 27%; padding: 4px !important; border-radius: 14px; }
  .ap-cap__phone img { border-radius: 11px; }
  .ap-cap__rec { font-size: 11px; padding: 5px 9px; bottom: -14px; left: 4px; transform: none; }
  .ap-cap__fcp { right: 0; top: auto; bottom: 0; width: 50%; padding: 4px !important; border-radius: 12px; }
  .ap-cap__fcp .ap-vf__cap { font-size: 11px; padding: 2px 3px 5px; }
  .ap-cap__chip { display: none; }

  /* Black November */
  .ap-bf__glow { width: 700px; height: 500px; }
  .ap-bf__card { padding: 64px 20px 24px; border-radius: 28px; gap: 0; }
  .ap-bf .bf-kicker { font-size: 11px; letter-spacing: .12em; white-space: nowrap; }
  .ap-d-l { display: none; } .ap-d-s { display: inline; }
  .ap-bf__combo { padding: 20px 18px 16px; margin-top: 24px; }
  .ap-bf__apps { gap: 10px 18px; margin-top: 16px; padding-top: 14px; }
  .ap-bf__logo { width: 236px; }
  .ap-bf__plus { font-size: 22px; }
  .ap-bf__app { font-size: 14px; gap: 8px; }
  .ap-bf__app img { width: 46px; height: 46px; margin: -4px; }
  .ap-bf__pay { padding-top: 24px; margin-top: 24px; }
  .ap-bf__pay strong { font-size: 76px; }
  .ap-bf__pay .btn { max-width: none; }
  .ap-bf__float--1 { width: 96px; height: 96px; right: auto; left: 18px; top: -44px; }
  .ap-bf__float--2 { width: 80px; height: 80px; right: auto; left: 104px; top: -30px; }

  /* fechamento */
  .ap-end__card { text-align: center; padding: 0 20px 44px; margin-top: 70px; }
  .ap-end__pic { position: relative; right: auto; width: 64vw; max-width: 280px; margin: -70px auto 0; }
  .ap-end__pic picture { filter: drop-shadow(0 0 36px rgba(var(--glow-rgb), .45)); }
  .ap-end__yt { left: auto; right: -16vw; bottom: 22%; padding: 9px 12px; font-size: 12px; text-align: left; gap: 9px; border-radius: 14px; }
  .ap-end__yt .float__label { font-size: 11px; }
  .ap-end__ytico { width: 30px; height: 30px; border-radius: 9px; }
  .ap-end__ytico .ic { width: 16px; height: 16px; }
  .ap-end__copy { margin: 6px auto 0; }
  .ap-end__copy .eyebrow { justify-content: center; }
  .ap-end__copy .lead { margin-left: auto; margin-right: auto; }
  .ap-end__btns { flex-direction: column; }
  .ap-end__btns .btn { width: 100%; justify-content: center; }
  .ap-end__sign { justify-content: center; text-align: left; }
}
@media (max-width: 374px) {
  .ap-bf__app { font-size: 13px; }
  .ap-dock__two b { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-dock__lift, .ap-dock__app::before, .ap-vis__ico, .ap-bf__float { animation: none; }
  .ap-dock__ph { animation: none; left: 60%; }
  .ap-dock__app, .ap-dock__tip, .ap-dock__track { transition: none; }   /* sem lupa (o JS não liga): só o nome aparece */
  .ap-sel__ph { transition: none; }
}