/* Master em Unreal Engine - pagina de vendas. PV-UNREAL-2026-08-29-11-PROD
   Design system ativo: santorini-escura. Poppins e Barlow vem de fontes.css. */

.mu{
  --bg:#050505; --surface:#0D0D0D; --ink:#FFFFFF; --accent:#22D3EE;
  --claro:#E9E9E9; --texto:#A7A7A7; --dim:#8A8A8A;
  --border:#242424; --border-suave:#1B1B1B; --roxo:#7C3AED; --azul:#3B82F6;
  --card-roxo:#17162A; --borda-roxa:#322D63; --trilho:#2A2A2A; --num:#63666B;
  --xs:8px; --sm:14px; --md:22px; --lg:44px; --xl:88px;
  --r-sm:16px; --r-md:20px; --r-lg:28px; --pill:999px;
  --display:'Poppins',system-ui,-apple-system,sans-serif;
  --body:'Barlow',system-ui,-apple-system,sans-serif;
  --max:1320px;
  --topo:64px;
  /* Altura real do banner de cookies, medida em runtime (F01). */
  --cookie-h:0px;
}

.mu :where(h1,h2,h3,h4,h5,p,ul,ol,li,figure,figcaption,blockquote,dl,dt,dd,details,summary,table){margin:0;padding:0;border:0;font:inherit;color:inherit;background:none}
.mu :where(ul,ol){list-style:none}
.mu :where(img,svg,video,iframe){display:block;max-width:100%}
.mu :where(a){color:inherit;text-decoration:none}
.mu :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mu :where(summary){list-style:none}
.mu :where(summary)::-webkit-details-marker{display:none}
.mu,.mu *,.mu *::before,.mu *::after{box-sizing:border-box}

/* O CSS global do site aplica html,body{overflow-x:hidden !important}, que
   transforma a raiz em container de rolagem e mata position:sticky. clip contem
   estouro lateral sem criar contexto de rolagem. Escopo so nesta pagina. */
html.mu-html,body.mu-body{overflow-x:clip !important;overflow-y:visible !important}
html.mu-html{background:#050505;scroll-behavior:smooth}
body.mu-body{margin:0;background:#050505;color:#A7A7A7;font-family:'Barlow',system-ui,sans-serif;-webkit-font-smoothing:antialiased}

.mu{background:var(--bg);color:var(--texto);font-family:var(--body);font-size:17px;line-height:1.68}
.mu a:focus-visible,.mu button:focus-visible,.mu summary:focus-visible,.mu [tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.mu-wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--md)}
.mu-sec{padding-block:var(--xl)}
.mu-sec--tight{padding-block:var(--lg)}
.mu-sec--surface{background:var(--surface);border-block:1px solid var(--border-suave)}

.mu h1,.mu h2,.mu h3,.mu h4,.mu .mu-num{font-family:var(--display);font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.08}
.mu h1{font-size:clamp(30px,5vw,58px)}
.mu h2{font-size:clamp(25px,3.4vw,40px);line-height:1.14}
.mu h3{font-size:clamp(18px,1.7vw,22px);line-height:1.22;letter-spacing:-.02em}
.mu p{max-width:64ch}
.mu strong{color:var(--claro);font-weight:600}
.mu .mu-lead{font-size:clamp(16.5px,1.3vw,19px);line-height:1.62;color:var(--texto)}
.mu-eyebrow{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:var(--sm)}
.mu-nota{margin-top:var(--md);font-size:13.5px;color:var(--dim);max-width:72ch}

/* Botoes */
.mu-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;border-radius:var(--pill);padding:17px 30px;line-height:1;text-align:center;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.mu-btn--primary{background:linear-gradient(90deg,var(--azul),var(--roxo));color:#fff;box-shadow:0 8px 26px -10px rgba(90,80,240,.75)}
.mu-btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(90,80,240,.85)}
.mu-btn--ghost{background:rgba(13,13,13,.72);color:var(--claro);border:1px solid var(--border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mu-btn--ghost:hover{border-color:var(--azul);transform:translateY(-2px)}
.mu-btn--wide{width:100%}
.mu-ctas{display:flex;flex-wrap:wrap;gap:var(--sm);margin-top:var(--md)}

/* Barra superior */
.mu-top{position:sticky;top:0;z-index:40;background:rgba(5,5,5,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--border-suave)}
.mu-top__in{display:flex;align-items:center;justify-content:space-between;gap:var(--md);min-height:var(--topo);padding-block:10px}
.mu-top__brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--claro)}
.mu-top__mark{width:26px;height:26px;border-radius:8px;border:1px solid var(--borda-roxa);background:linear-gradient(140deg,var(--card-roxo),#0B0B0B);display:grid;place-items:center;font-size:12px;color:var(--accent)}
.mu-top__right{display:flex;align-items:center;gap:var(--md)}
.mu-top__price{font-family:var(--display);font-size:12px;font-weight:600;color:var(--claro);white-space:nowrap}
.mu-top__price span{color:var(--dim);font-weight:500}
.mu-top .mu-btn{padding:13px 22px;font-size:11.5px}

/* Menu de ancoras da barra fixa.
   Uma marcacao so para os dois breakpoints: no desktop e uma faixa de links
   no centro da barra; no mobile e um painel que desce sob a barra. O botao so
   existe quando o JS assumiu (.mu-js), entao sem JS o painel fica visivel e
   os atalhos nunca ficam presos atras de um controle morto. */
.mu-top__toggle{display:none;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--pill);
  background:rgba(13,13,13,.7);font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--claro)}
.mu-top__burger{position:relative;width:15px;height:9px;flex:none}
.mu-top__burger::before,.mu-top__burger::after{content:"";position:absolute;left:0;right:0;height:1.6px;background:var(--accent);transition:transform .25s ease,top .25s ease}
.mu-top__burger::before{top:0}
.mu-top__burger::after{top:7.4px}
.mu-top__toggle[aria-expanded="true"] .mu-top__burger::before{top:3.7px;transform:rotate(45deg)}
.mu-top__toggle[aria-expanded="true"] .mu-top__burger::after{top:3.7px;transform:rotate(-45deg)}

.mu-nav{min-width:0}
.mu-nav ul{display:flex;align-items:center;gap:2px;list-style:none;flex-wrap:wrap;justify-content:center}
.mu-nav a{display:block;padding:9px 12px;border-radius:var(--pill);font-family:var(--display);font-size:11.5px;font-weight:500;
  letter-spacing:.06em;color:var(--texto);white-space:nowrap;transition:color .2s ease,background-color .2s ease}
.mu-nav a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
/* Secao atualmente na tela. Marcada pelo JS; e so um reforco de leitura. */
.mu-nav a.is-here{color:var(--ink);background:rgba(124,58,237,.16)}

/* ==========================================================================
   01 HERO CINEMATOGRAFICO
   Imagem sangrada com scrim direcional; conteudo ancorado embaixo.
   ========================================================================== */
.mu-hero{position:relative;isolation:isolate;min-height:clamp(560px,86svh,880px);display:flex;align-items:flex-end;overflow:hidden}
.mu-hero__bg{position:absolute;inset:0;z-index:-3}
.mu-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%}

/* Video de fundo do YouTube. Fica ACIMA da imagem e ABAIXO do scrim: a
   imagem pinta na hora e continua sendo o fallback quando o autoplay e
   bloqueado, quando ha reduced-motion ou quando o embed nao carrega.
   pointer-events:none para o video nunca roubar clique do CTA. */
.mu-hero__yt{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1s ease}
.mu-hero__yt.is-on{opacity:1}
/* A escala de 1.08 empurra para fora do quadro a faixa onde o YouTube desenha
   titulo e botoes nos primeiros segundos. Some com a moldura, nao com a
   marca: o que a plataforma insiste em mostrar continua existindo, so deixa
   de aparecer dentro do recorte visivel. */
.mu-hero__yt iframe{position:absolute;top:50%;left:50%;translate:-50% -50%;scale:1.08;
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0;pointer-events:none}

/* Scrim aliviado nesta rodada: o video precisava aparecer. A base continua
   densa, porque e onde o texto se apoia; do meio para cima a cobertura cai
   para menos de um terco do que era, e a camada lateral que jogava peso so
   na esquerda saiu. O texto ganhou sombra propria no lugar dela. */
.mu-hero__scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to top,rgba(5,5,5,.94) 0%,rgba(5,5,5,.72) 22%,rgba(5,5,5,.30) 52%,rgba(5,5,5,.16) 78%,rgba(5,5,5,.24) 100%)}
.mu-hero__in{position:relative;width:100%;padding-block:var(--lg) var(--md)}
/* O scrim geral clareou para o video aparecer, entao a legibilidade nao pode
   mais depender dele. Esta mancha fica so atras do texto, com borda
   esfumada: garante contraste no bloco de leitura sem escurecer o quadro. */
.mu-hero__in::before{content:"";position:absolute;z-index:-1;inset:-6% -8% -4%;
  background:radial-gradient(72% 62% at 50% 46%,rgba(5,5,5,.72) 0%,rgba(5,5,5,.52) 45%,rgba(5,5,5,0) 78%)}
.mu-hero h1{margin-bottom:var(--sm);max-width:16ch;text-shadow:0 2px 20px rgba(0,0,0,.75)}
.mu-hero h1 em{font-style:normal;color:var(--accent)}
/* Texto de apoio sobe de --texto para --claro: sobre imagem, o cinza medio
   nao alcanca contraste confiavel. */
.mu-hero__lead{max-width:58ch;color:var(--claro);text-shadow:0 1px 12px rgba(0,0,0,.85)}
.mu-hero .mu-ctas{margin-top:var(--md)}
.mu-hero .mu-eyebrow{text-shadow:0 1px 10px rgba(0,0,0,.9)}
.mu-hero .mu-rail li,.mu-hero .mu-trust li{text-shadow:0 1px 10px rgba(0,0,0,.85)}
.mu-hero__cap{text-shadow:0 1px 10px rgba(0,0,0,.85)}

/* Trilho de processo. Linguagem de criacao, nao interface falsa. */
.mu-rail{margin-top:var(--md);padding-top:var(--sm);border-top:1px solid rgba(255,255,255,.14);display:flex;gap:var(--sm);flex-wrap:wrap;list-style:none}
.mu-rail li{display:flex;align-items:center;gap:7px;font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--claro)}
.mu-rail li::before{content:"";width:14px;height:1.5px;background:var(--accent);opacity:.85}

.mu-trust{display:flex;flex-wrap:wrap;gap:6px var(--sm);margin-top:var(--md);list-style:none}
.mu-trust li{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--claro)}
.mu-trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.mu-hero__cap{margin-top:var(--md);font-size:12px;color:#BDBDBD}

/* ==========================================================================
   02 DEMONSTRACAO EM MOVIMENTO
   ========================================================================== */
.mu-film__say{font-family:var(--display);font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.14;font-size:clamp(23px,3.1vw,38px);max-width:20ch}
.mu-film__say--b{margin-left:auto;text-align:right}
.mu-film__box{position:relative;margin-block:var(--md);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);background:linear-gradient(150deg,var(--card-roxo),#08080C 70%);aspect-ratio:16/9}
.mu-film__box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
/* Previa do video. Fica sob o botao e sai de cena junto com ele no clique. */
.mu-film__poster{position:absolute;inset:0}
.mu-film__poster img{width:100%;height:100%;object-fit:cover}
/* Sobre a previa o scrim tem de ser mais firme que sobre o gradiente vazio,
   senao o rotulo e a marca de duracao somem na imagem clara. */
.mu-film__cover--poster{background:
  radial-gradient(120% 120% at 50% 50%,rgba(5,5,5,.34),rgba(5,5,5,.72) 72%)}
.mu-film__cover--poster .mu-film__lb{text-shadow:0 1px 12px rgba(0,0,0,.9)}
.mu-film__cover--poster .mu-film__meta{color:#E4E4E4;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.mu-film__cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sm);width:100%;color:var(--ink);background:radial-gradient(120% 120% at 50% 50%,rgba(124,58,237,.16),rgba(5,5,5,.55) 70%)}
.mu-film__disc{width:70px;height:70px;border-radius:50%;background:linear-gradient(90deg,var(--azul),var(--roxo));display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(90,80,240,.8);transition:transform .2s ease}
.mu-film__cover:hover .mu-film__disc{transform:scale(1.07)}
.mu-film__disc svg{width:23px;height:23px;margin-left:3px;fill:#fff}
.mu-film__lb{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.mu-film__meta{font-size:11.5px;color:#C4C4C4;letter-spacing:.04em}

/* ==========================================================================
   04 POR QUE UNREAL - quatro ideias
   ========================================================================== */
.mu-why{display:grid;grid-template-columns:1fr;gap:0;margin-top:var(--lg);border-top:1px solid var(--border-suave)}
.mu-why__it{display:grid;grid-template-columns:auto 1fr;gap:var(--md);padding-block:var(--md);border-bottom:1px solid var(--border-suave)}
.mu-why__n{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,44px);line-height:.9;color:var(--num);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.mu-why__it h3{margin-bottom:6px}
.mu-why__it p{font-size:15.5px;line-height:1.6}
.mu-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;list-style:none}
.mu-tags li{font-size:11.5px;line-height:1;color:var(--claro);border:1px solid var(--border);border-radius:var(--pill);padding:7px 11px;font-family:var(--display);font-weight:500;letter-spacing:.04em}

/* ==========================================================================
   05 PIPELINE
   ========================================================================== */
/* Pipeline. A media e sempre horizontal em 16/9 — a proporcao nativa das
   capturas de aula, entao elas entram sem corte nenhum. */
.mu-pipe{margin-top:var(--lg)}
.mu-pipe__step{border-top:1px solid var(--border-suave);padding-block:var(--md)}
.mu-pipe__k{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.mu-pipe__k b{font-family:var(--display);font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.mu-pipe__step p{font-size:15.5px;line-height:1.6}
.mu-pipe__shot{position:relative;margin-top:var(--sm);margin-bottom:var(--md);border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border);aspect-ratio:16/9;background:var(--surface)}
.mu-pipe__shot img{width:100%;height:100%;object-fit:cover}
.mu-pipe__shot .mu-film__box{position:absolute;inset:0;margin:0;border:0;border-radius:0;aspect-ratio:auto}
/* Painel tipografico para a etapa de saida que ainda nao tem media propria.
   E deliberadamente grafico: nao imita a interface do software. */
.mu-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:var(--md);
  background:linear-gradient(150deg,var(--card-roxo),#08080C 72%);
  background-image:linear-gradient(150deg,var(--card-roxo),#08080C 72%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px)}
.mu-panel b{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,34px);color:var(--ink);letter-spacing:-.03em;line-height:1.06}
.mu-panel span{font-size:14.5px;line-height:1.55;color:var(--claro);max-width:34ch}

/* ==========================================================================
   06 PROJETOS - faixa horizontal com snap
   ========================================================================== */
.mu-gal{margin-top:var(--lg);display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:var(--sm);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:var(--sm);
  scrollbar-width:thin;scrollbar-color:var(--trilho) transparent}
.mu-gal::-webkit-scrollbar{height:6px}
.mu-gal::-webkit-scrollbar-thumb{background:var(--trilho);border-radius:99px}
.mu-gal__it{scroll-snap-align:start;position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);background:var(--bg);margin:0}
.mu-gal__it img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.mu-hint{margin-top:var(--sm);font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ==========================================================================
   07 SEQUENCER - narrativa visual, nao interface funcional
   ========================================================================== */
.mu-seq{margin-top:var(--lg);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:var(--md);overflow-x:auto}
.mu-seq__grid{min-width:520px;display:grid;grid-template-columns:104px 1fr;gap:10px var(--sm);align-items:center}
.mu-seq__lb{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.mu-seq__track{position:relative;height:12px;border-radius:99px;background:#151515;border:1px solid var(--border-suave)}
.mu-seq__bar{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,var(--azul),var(--roxo))}
.mu-seq__key{position:absolute;top:50%;width:9px;height:9px;translate:-50% -50%;rotate:45deg;background:var(--accent);border-radius:2px}
.mu-seq__ruler{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}

/* ==========================================================================
   08 CURRICULO EM ACCORDION
   ========================================================================== */
.mu-acc{margin-top:var(--lg);border-top:1px solid var(--border-suave)}
.mu-acc details{border-bottom:1px solid var(--border-suave)}
.mu-acc summary{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--sm);align-items:center;padding-block:var(--md);cursor:pointer;min-height:56px}
.mu-acc__n{font-family:var(--display);font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.1em}
.mu-acc__t{font-family:var(--display);font-size:clamp(16px,1.5vw,19px);font-weight:700;color:var(--claro);letter-spacing:-.02em;line-height:1.25}
.mu-acc__c{font-size:12.5px;color:var(--dim);white-space:nowrap}
.mu-acc__ic{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;position:relative;flex:none;transition:border-color .25s ease}
.mu-acc__ic::before{content:"";position:absolute;width:10px;height:1.6px;background:var(--accent)}
.mu-acc__ic::after{content:"";position:absolute;width:1.6px;height:10px;background:var(--accent);transition:opacity .25s ease}
.mu-acc details[open] .mu-acc__ic{border-color:var(--azul)}
.mu-acc details[open] .mu-acc__ic::after{opacity:0}
.mu-acc__body{padding-bottom:var(--md)}
.mu-acc__body p{font-size:14.5px;color:var(--texto);margin-bottom:10px;max-width:70ch}
.mu-aulas{display:flex;flex-wrap:wrap;gap:7px;list-style:none}
.mu-aula{font-size:12.5px;line-height:1.3;color:var(--texto);border:1px solid var(--border-suave);background:var(--bg);border-radius:var(--pill);padding:7px 12px}
.mu-aula--off{color:var(--dim);border-style:dashed}

/* ==========================================================================
   09 ENTREGAS
   ========================================================================== */
/* Captura da area de membros. E um print de interface: nao pode ser recortado
   nem coberto, senao some justamente o que ele existe para mostrar. Por isso a
   proporcao e a nativa da captura (16/9) e a legenda fica ABAIXO da imagem,
   em vez de sobrepor o rodape dela. */
.mu-out{margin-top:var(--lg)}
.mu-out__it{border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border);margin-inline:auto;background:var(--surface)}
.mu-out__it img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.mu-out__it figcaption{padding:var(--sm) var(--md) var(--md);font-size:13.5px;line-height:1.5;color:var(--texto)}

/* Por dentro: captura + explicacao. No mobile empilha na ordem do documento;
   no desktop a coluna de texto encosta na imagem para ela nao ficar solta. */
.mu-inside{display:grid;grid-template-columns:1fr;gap:var(--md);margin-top:var(--lg)}
.mu-inside .mu-out{margin-top:0}
.mu-inside__list{display:grid;gap:var(--md)}
.mu-inside__list dt{font-family:var(--display);font-size:clamp(16px,1.5vw,18.5px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.25;
  display:flex;align-items:baseline;gap:10px}
.mu-inside__list dt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;translate:0 -2px}
.mu-inside__list dd{margin-top:6px;padding-left:17px;font-size:15px;line-height:1.6;color:var(--texto);max-width:56ch}

/* ==========================================================================
   BONUS - a secao precisa dizer "extra" antes de qualquer leitura
   ========================================================================== */
.mu-sec--bonus{background:
  radial-gradient(120% 90% at 50% 0%,rgba(124,58,237,.16),transparent 62%),var(--surface)}
.mu-eyebrow--bonus{display:inline-flex;align-items:center;gap:8px;color:var(--ink);
  background:linear-gradient(90deg,var(--azul),var(--roxo));border-radius:var(--pill);padding:7px 14px;margin-bottom:var(--md)}
.mu-eyebrow--bonus::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff}

.mu-bonus{display:grid;grid-template-columns:1fr;gap:var(--md);margin-top:var(--lg)}
.mu-bonus__it{position:relative;margin:0;border:1px solid var(--borda-roxa);border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(160deg,var(--card-roxo),#0B0B0B 62%)}
/* 16/10 acomoda os dois bonus: a capa de Composicoes e 3:2 e quase nao perde
   nada; a de 3ds Max e quadrada e perde ceu e calcada, nunca a casa. */
.mu-bonus__it img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.mu-bonus__tag{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--display);font-size:10px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,var(--azul),var(--roxo));
  border-radius:var(--pill);padding:7px 12px;box-shadow:0 6px 18px -8px rgba(90,80,240,.9)}
.mu-bonus__it figcaption{padding:var(--md);display:grid;gap:5px}
.mu-bonus__it figcaption b{font-family:var(--display);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.mu-bonus__it figcaption em{font-style:normal;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.mu-bonus__it figcaption span{font-size:14.5px;line-height:1.55;color:var(--texto)}

/* ==========================================================================
   ANTES DE DECIDIR - abas no mobile, duas colunas no desktop
   ========================================================================== */
/* A lista de abas so existe quando o JS assumiu: sem JS os dois paineis
   aparecem juntos e um seletor morto seria pior que seletor nenhum. */
.mu-tabs{display:none;gap:6px;margin-top:var(--lg);padding:5px;border:1px solid var(--border);border-radius:var(--pill);background:var(--bg)}
.mu-tabs__t{flex:1;padding:12px 10px;border-radius:var(--pill);font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.06em;color:var(--dim);line-height:1.2;transition:color .2s ease,background-color .2s ease}
.mu-tabs__t.is-on{color:#fff;background:linear-gradient(90deg,var(--azul),var(--roxo))}

.mu-talk{display:grid;justify-items:center;text-align:center;gap:var(--sm);margin-top:var(--lg);
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:var(--md)}
.mu-talk__q{font-family:var(--display);font-size:clamp(17px,1.8vw,21px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.25}
.mu-talk__n{font-size:12.5px;color:var(--dim);max-width:46ch}
.mu-btn--zap:hover{border-color:#25D366}
.mu-zap{width:19px;height:19px;flex:none}
.mu-zap svg{width:100%;height:100%;fill:#25D366}

/* Publico */
.mu-two{display:grid;grid-template-columns:1fr;gap:var(--sm);margin-top:var(--lg)}
.mu-list{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:var(--md)}
.mu-list h3{margin-bottom:var(--sm)}
.mu-list li{display:grid;grid-template-columns:auto 1fr;gap:11px;padding-block:9px;font-size:15px;line-height:1.55;border-top:1px solid var(--border-suave)}
.mu-list li:first-of-type{border-top:0}
.mu-list li::before{content:"";width:6px;height:6px;border-radius:50%;margin-top:9px;background:var(--accent)}
.mu-list--no li::before{background:#5A5A5A}

/* Professor */
.mu-prof{display:grid;grid-template-columns:1fr;gap:var(--md);align-items:center;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:var(--md);margin-top:var(--lg)}
.mu-prof__ph{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);max-width:240px}
.mu-prof__ph img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.mu-prof__role{font-size:13.5px;color:var(--accent);margin-bottom:var(--sm);font-family:var(--display);font-weight:500}

/* ==========================================================================
   10 OFERTA - calma
   ========================================================================== */
.mu-offer{border:1px solid var(--borda-roxa);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--card-roxo),#0B0B0B 62%);padding:var(--md);margin-top:var(--lg)}
.mu-offer__grid{display:grid;grid-template-columns:1fr;gap:var(--lg)}
.mu-offer__inc li{display:grid;grid-template-columns:auto 1fr;gap:11px;padding-block:11px;border-top:1px solid rgba(255,255,255,.07);font-size:15px;line-height:1.5}
.mu-offer__inc li:first-child{border-top:0}
.mu-offer__inc li::before{content:"";width:16px;height:16px;margin-top:5px;border-radius:50%;border:1px solid var(--borda-roxa);background:radial-gradient(circle at 50% 50%,var(--accent) 0 2.5px,transparent 3px)}
.mu-offer__box{border:1px solid var(--border);border-radius:var(--r-md);background:rgba(5,5,5,.55);padding:var(--md);text-align:center;align-self:start}
.mu-offer__from{font-size:13px;color:var(--dim)}
.mu-offer__big{font-family:var(--display);font-weight:700;color:var(--ink);letter-spacing:-.04em;line-height:1;font-size:clamp(34px,4.6vw,50px);margin-block:6px 4px}
.mu-offer__big small{font-size:.4em;font-weight:600;color:var(--texto);display:block;margin-bottom:6px}
.mu-offer__alt{font-size:14.5px;color:var(--claro)}
.mu-offer__box .mu-btn{margin-top:var(--md)}
.mu-offer__pay{margin-top:var(--sm);font-size:13px;color:var(--dim);line-height:1.5}
.mu-guar{display:grid;grid-template-columns:1fr;gap:var(--md);align-items:center;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:var(--md);margin-top:var(--lg)}
.mu-guar__seal{width:100px;height:100px;border-radius:50%;border:1px solid var(--borda-roxa);background:linear-gradient(150deg,var(--card-roxo),#0B0B0B);display:grid;place-items:center;text-align:center;flex:none}
.mu-guar__seal b{font-family:var(--display);font-size:29px;font-weight:700;color:var(--ink);line-height:1;display:block}
.mu-guar__seal span{font-family:var(--display);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-top:5px}

/* FAQ */
.mu-faq{margin-top:var(--lg);border-top:1px solid var(--border-suave)}
.mu-faq details{border-bottom:1px solid var(--border-suave)}
.mu-faq summary{display:grid;grid-template-columns:1fr auto;gap:var(--md);align-items:center;padding-block:var(--md);cursor:pointer;font-family:var(--display);font-size:16px;font-weight:600;color:var(--claro);line-height:1.35;min-height:56px}
.mu-faq summary:hover{color:var(--ink)}
.mu-faq__ic{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;position:relative;flex:none;transition:border-color .25s ease}
.mu-faq__ic::before{content:"";position:absolute;width:10px;height:1.6px;background:var(--accent)}
.mu-faq__ic::after{content:"";position:absolute;width:1.6px;height:10px;background:var(--accent);transition:opacity .25s ease}
.mu-faq details[open] .mu-faq__ic{border-color:var(--azul)}
.mu-faq details[open] .mu-faq__ic::after{opacity:0}
.mu-faq__a{padding-bottom:var(--md);font-size:15.5px;line-height:1.65;max-width:78ch}

/* CTA final */
.mu-end{position:relative;isolation:isolate;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--borda-roxa);padding:var(--xl) var(--md);text-align:center}
.mu-end__bg{position:absolute;inset:0;z-index:-2}
.mu-end__bg img{width:100%;height:100%;object-fit:cover}
.mu-end::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(5,5,5,.95),rgba(5,5,5,.82))}
.mu-end p{margin:var(--sm) auto 0;max-width:52ch}
.mu-end .mu-ctas{justify-content:center}
.mu-end__fine{font-size:13.5px;color:#BDBDBD;margin-top:var(--sm)}

.mu-foot{border-top:1px solid var(--border-suave);padding-block:var(--md);font-size:13px;color:var(--dim);text-align:center}

/* Barra fixa mobile. bottom considera o banner de cookies (F01). */
/* bottom, nao transform: o deslocamento precisa valer tambem para o retangulo
   do elemento, e nesta pagina o transform nao se aplica de forma confiavel ao
   elemento fixo. --cookie-h e a altura ocupada pelo banner de consentimento. */
.mu-bar{position:fixed;left:0;right:0;bottom:var(--cookie-h);z-index:60;display:none;align-items:center;gap:var(--sm);
  padding:11px var(--md) calc(11px + env(safe-area-inset-bottom));
  background:rgba(5,5,5,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border);
  transition:bottom .25s ease}
.mu-bar__p{flex:1;min-width:0;line-height:1.25}
.mu-bar__p b{display:block;font-family:var(--display);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.mu-bar__p span{font-size:12px;color:var(--dim)}
.mu-bar .mu-btn{padding:14px 20px;font-size:11px;flex:none}

/* Revelacao no scroll. Degrada visivel: so esconde quando o JS assume. */
.mu-js .mu-rev{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.mu-js .mu-rev.is-in{opacity:1;transform:none}

/* ---------------- Breakpoints ---------------- */
@media (min-width:640px){
  .mu-two{grid-template-columns:1fr 1fr;gap:var(--md)}
  .mu-bonus{grid-template-columns:1fr 1fr}
  .mu-gal{grid-auto-columns:46%}
  .mu-guar{grid-template-columns:auto 1fr;gap:var(--lg);padding:var(--lg)}
  .mu-hero h1{max-width:14ch}
  .mu-talk{padding:var(--lg)}
}
@media (min-width:900px){
  .mu-wrap{padding-inline:var(--lg)}
  .mu-why{grid-template-columns:1fr 1fr;gap:0 var(--xl)}
  .mu-why__it{grid-template-columns:auto 1fr}
  /* No desktop as quatro cenas aparecem juntas, sem rolagem: e o ponto da
     secao. A faixa com snap fica so onde a largura nao comporta as quatro. */
  .mu-gal{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;
    overflow-x:visible;scroll-snap-type:none;gap:var(--md);padding-bottom:0}
  .mu-gal__hint{display:none}

  /* Por dentro em duas colunas. */
  .mu-inside{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:var(--xl);align-items:center}
  .mu-prof{grid-template-columns:240px 1fr;padding:var(--lg);gap:var(--lg)}
  .mu-offer{padding:var(--lg)}
  .mu-offer__grid{grid-template-columns:1.15fr .85fr;gap:var(--xl);align-items:start}
  .mu-film__say--b{margin-top:var(--sm)}

  /* Hero centralizado. Antes o bloco ficava colado a esquerda e a coluna de
     texto empurrava toda a leitura para um canto; agora ele ocupa o eixo
     central e a imagem respira dos dois lados. */
  .mu-hero{align-items:center;text-align:center}
  .mu-hero__in{padding-block:var(--xl) var(--lg);display:flex;flex-direction:column;align-items:center}
  .mu-hero h1{max-width:19ch;margin-inline:auto}
  .mu-hero__lead{max-width:64ch;margin-inline:auto}
  .mu-hero .mu-ctas,.mu-hero .mu-rail,.mu-hero .mu-trust{justify-content:center}
  .mu-hero .mu-rail{width:100%;max-width:760px}
  .mu-hero__cap{max-width:60ch;margin-inline:auto}

  /* Pipeline em duas colunas: topicos clicaveis a esquerda, media a direita.
     Todas as medias ocupam a MESMA area da grade (coluna 2, todas as linhas),
     empilhadas; so a ativa fica visivel. Por isso o container precisa de
     linhas explicitas — dai --pipe-n, escrito pelo PHP. */
  .mu-pipe{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    grid-template-rows:repeat(var(--pipe-n,7),auto);column-gap:var(--xl);align-items:start}
  .mu-pipe__step{grid-column:1;padding-block:0;border-top:0}

  /* Cada topico e uma linha clicavel. A ativa acende; as demais ficam
     discretas mas legiveis — nunca abaixo do contraste de leitura. */
  /* Tudo abaixo depende de `.is-js`, que o JS do proprio pipeline poe quando
     assume a troca no desktop. Se ele nao rodar, nada some. */
  .mu-pipe.is-js .mu-pipe__step{cursor:pointer;padding:var(--sm) var(--md);border-radius:var(--r-sm);
    border-left:2px solid transparent;transition:background-color .3s ease,border-color .3s ease}
  .mu-pipe.is-js .mu-pipe__step:hover{background:rgba(255,255,255,.04)}
  .mu-pipe.is-js .mu-pipe__step.is-on{background:rgba(124,58,237,.12);border-left-color:var(--accent)}
  .mu-pipe.is-js .mu-pipe__step .mu-pipe__k{margin-bottom:0}
  .mu-pipe.is-js .mu-pipe__step h3{color:var(--texto);transition:color .3s ease}
  .mu-pipe.is-js .mu-pipe__step.is-on h3{color:var(--ink)}
  /* O corpo do topico so aparece no selecionado: a lista fica curta e a
     media da direita nunca briga com sete paragrafos abertos. */
  .mu-pipe.is-js .mu-pipe__body{display:none;padding-top:10px}
  .mu-pipe.is-js .mu-pipe__step.is-on .mu-pipe__body{display:block}
  .mu-pipe.is-js .mu-pipe__step:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  .mu-pipe__shot{grid-column:2;grid-row:1 / -1;position:sticky;top:calc(var(--topo) + 28px);
    align-self:start;margin:0}
  /* Empilhadas na mesma area: sem o controle do JS elas se cobririam, entao
     fora do modo JS mostramos apenas a primeira. */
  .mu-pipe.is-js .mu-pipe__shot{opacity:0;visibility:hidden;transition:opacity .4s ease}
  .mu-pipe.is-js .mu-pipe__shot.is-on{opacity:1;visibility:visible}
  .mu-pipe:not(.is-js) .mu-pipe__shot ~ .mu-pipe__shot{display:none}

  /* Menu de ancoras inline no centro da barra. */
  .mu-top__in{gap:var(--sm)}
  .mu-nav{flex:1}
}
/* F01. Enquanto o banner de consentimento ocupa a base da tela, o hero fica
   compacto para que o CTA primario permaneca ACIMA dele, e a barra fixa sai de
   cena para nao empilhar dois elementos fixos. Assim que o visitante responde
   ao consentimento, tudo volta ao estado normal. */
@media (max-width:767px){
  .mu-cookie-on .mu-bar{display:none}
  .mu-cookie-on .mu-hero__in{padding-block:var(--xs) var(--sm)}
  .mu-cookie-on .mu-hero h1{font-size:25px;line-height:1.12;margin-bottom:10px}
  .mu-cookie-on .mu-hero__lead{font-size:14.5px;line-height:1.5}
  .mu-cookie-on .mu-rail,.mu-cookie-on .mu-hero__cap{display:none}
  .mu-cookie-on .mu-trust{margin-top:var(--sm);gap:4px var(--sm)}
  .mu-cookie-on .mu-hero .mu-ctas{margin-top:var(--sm)}
}
@media (max-width:767px){
  .mu-bar{display:flex}
  body.mu-body{padding-bottom:calc(80px + var(--cookie-h))}
  .mu-top__price,.mu-top .mu-btn{display:none}
  .mu-sec{padding-block:var(--lg)}
  .mu-hero{min-height:auto}
  .mu-hero__in{padding-block:var(--lg) var(--md)}

  /* Menu compacto. O botao e o painel so entram em cena com JS; o painel
     desce por baixo da barra, ocupando a largura toda, com alvos de toque
     de 48px. Fora isso a barra continua com a mesma altura de antes. */
  .mu-js .mu-top__toggle{display:inline-flex}
  /* Fundo opaco, nao translucido: o painel se sobrepoe ao hero, e qualquer
     transparencia deixa o H1 atravessar o texto dos itens. */
  .mu-js .mu-nav{position:absolute;left:0;right:0;top:100%;display:none;
    background:#050505;
    border-bottom:1px solid var(--border);box-shadow:0 18px 40px -22px #000;
    max-height:calc(100svh - var(--topo) - 16px);overflow-y:auto}
  .mu-js .mu-nav.is-open{display:block}
  .mu-js .mu-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:var(--xs) var(--md) var(--sm)}
  .mu-js .mu-nav li+li{border-top:1px solid var(--border-suave)}
  .mu-js .mu-nav a{padding:15px 4px;border-radius:var(--r-sm);font-size:14px;letter-spacing:.04em;min-height:48px;display:flex;align-items:center}

  /* Abas. Com JS, so o painel escolhido fica na tela. */
  .mu-js .mu-tabs{display:flex}
  .mu-js .mu-two .mu-list{display:none}
  .mu-js .mu-two .mu-list.is-on{display:block}
}
/* A barra fixa nao pode cobrir o titulo da secao alcancada por ancora. */
.mu [id]{scroll-margin-top:calc(var(--topo) + 14px)}
@media (max-width:479px){
  .mu-hero h1{font-size:29px;line-height:1.1}
  .mu-gal{grid-auto-columns:86%}
  .mu-acc summary{grid-template-columns:auto 1fr auto;row-gap:4px}
  .mu-acc__c{grid-column:2;grid-row:2;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  html.mu-html{scroll-behavior:auto}
  .mu *,.mu *::before,.mu *::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .mu-js .mu-rev{opacity:1;transform:none}
  /* A troca de media do pipeline continua funcionando: o que sai e a
     transicao, nao a funcao. */
  .mu-pipe.is-js .mu-pipe__shot{transition:none}
}