/* =====================================================================
   MENTORIA E PRODUTOS — Dom Calais
   ABC.DESIGN_
   ---------------------------------------------------------------------
   Desktop: palco 1672 × 748 (grade do mockup) + caixa de diálogo logo abaixo,
   com altura automática. Tudo é medido em "px de design" via --p, então a
   composição escala inteira sem quebrar.
   Mobile: celulares (≤767px), tablets em pé e celulares deitados.
   ===================================================================== */

/* ---------- Fontes (self-hosted, licença OFL) ---------- */
@font-face{ font-family:'Bangers'; src:url("../assets/fonts/bangers-latin-400-normal.woff2?v=2bc90bd8") format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Lilita One'; src:url("../assets/fonts/lilita-one-latin-400-normal.woff2?v=3b71f6c2") format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Nunito'; src:url("../assets/fonts/nunito-latin-700-normal.woff2?v=fd0ec8a3") format('woff2'); font-weight:600 700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Nunito'; src:url("../assets/fonts/nunito-latin-800-normal.woff2?v=bce64e85") format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

.mp{
  --ink:#0c0a12;
  --gold-1:#fffbe0; --gold-2:#ffe45c; --gold-3:#ffb800; --gold-4:#ff8a00;
  --navy-1:#164aa3; --navy-2:#0b2a63; --navy-3:#06173d;
  --parch-ink:#2b1a08;
  --red:#e3261b;
  --f-comic:'Bangers', Impact, 'Arial Black', sans-serif;
  --f-heavy:'Lilita One', 'Arial Black', sans-serif;
  --f-text:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; display:grid; place-items:center;
  background:#0d4fb0; color:#fff; font-family:var(--f-text);
  -webkit-tap-highlight-color:transparent;
}
.mp *, .mp *::before, .mp *::after{ box-sizing:border-box; }
.mp .mp-pic{ display:contents; }
:where(.mp) img{ display:block; max-width:none; height:auto; user-select:none; -webkit-user-drag:none; }
:where(.mp) button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; }
:where(.mp) :where(h2, h3, p){ margin:0; }
.mp .sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Texto com contorno (outline) e texto dourado ----------
   O JS copia o texto para data-text; os pseudo-elementos desenham o
   contorno preto por trás e o degradê dourado por cima. */
:where(.mp .ot, .mp .gt){ position:relative; isolation:isolate; display:inline-block; white-space:nowrap; }
.mp .ot::before, .mp .gt::before, .mp .gt::after{
  /* caixa maior que a linha para não cortar acentos (Ê, Í) nem o itálico */
  content:attr(data-text); position:absolute; inset:-.4em -.3em -.3em; padding:.4em .3em .3em;
  pointer-events:none; white-space:nowrap;
}
.mp .ot::before, .mp .gt::before{
  z-index:-1; color:var(--ink);
  -webkit-text-stroke:var(--stroke,.2em) var(--ink);
  text-shadow:0 .07em 0 var(--ink);
}
:where(.mp) .gt{ color:transparent; }
.mp .gt::after{
  z-index:1; color:transparent;
  background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 34%,var(--gold-3) 62%,var(--gold-4) 100%);
  -webkit-background-clip:text; background-clip:text;
}

/* ---------- Cenário ---------- */
.mp-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.mp-bg picture, .mp-bg img{ position:absolute; inset:-3%; width:106%; height:106%; }
.mp-bg img{ object-fit:cover; object-position:50% 40%; animation:mpDrift 40s ease-in-out infinite alternate; }
.mp-bg::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 95% at 50% 42%, transparent 58%, rgba(3,14,44,.42) 100%),
    linear-gradient(180deg, rgba(3,18,58,.18), transparent 22%, transparent 72%, rgba(3,18,58,.32));
}
.mp-sparks{ position:absolute; inset:0; }
.mp-spark{
  position:absolute; bottom:-4%; left:var(--x); width:var(--s); height:var(--s); border-radius:50%;
  background:radial-gradient(circle,#fff8c8 0%,#ffd84a 45%,rgba(255,190,0,0) 72%);
  opacity:0; animation:mpRise var(--d) linear var(--dl) infinite;
}

/* ---------- Palco ---------- */
.mp-wrap{ container-type:inline-size; width:min(100%, max(1000px, 155svh), 2200px); }
.mp-stage{ --p:calc(100cqw / 1672); position:relative; width:100%; aspect-ratio:1672 / 748; }
.mp-abs{
  position:absolute;
  left:calc(var(--x) * var(--p)); top:calc(var(--y) * var(--p)); width:calc(var(--w) * var(--p));
}

/* ---------- Título ---------- */
.mp-title{ --x:20; --y:10; --w:720; z-index:5; }
.mp-title img{ width:100%; filter:drop-shadow(0 calc(6*var(--p)) calc(8*var(--p)) rgba(0,10,40,.35)); }

/* ---------- Barra de ki ---------- */
.mp-ki{ --x:1262; --y:36; --w:360; --ku:var(--p); height:calc(54*var(--ku)); z-index:5; }
.mp-ki__track{
  position:absolute; left:calc(30*var(--ku)); right:calc(84*var(--ku)); top:calc(11*var(--ku)); height:calc(32*var(--ku));
  border-radius:calc(16*var(--ku));
  background:linear-gradient(180deg,#041233,#0a2a6b);
  border:calc(3.5*var(--ku)) solid var(--gold-2);
  box-shadow:0 0 0 calc(2.5*var(--ku)) var(--ink), inset 0 calc(3*var(--ku)) calc(6*var(--ku)) rgba(0,0,0,.55), 0 calc(5*var(--ku)) calc(10*var(--ku)) rgba(0,10,40,.35);
  overflow:hidden;
}
.mp-ki__fill{
  position:absolute; inset:calc(3*var(--ku)) auto calc(3*var(--ku)) calc(3*var(--ku));
  width:calc(var(--ki,100) * (100% - 6*var(--ku)) / 100);
  border-radius:calc(12*var(--ku));
  background:
    linear-gradient(180deg,rgba(255,255,255,.75) 0 22%,rgba(255,255,255,0) 40%),
    linear-gradient(90deg,#0a6cff,#2ec8ff 70%,#bff3ff);
  box-shadow:0 0 calc(10*var(--ku)) rgba(80,200,255,.9);
}
.mp-ki__fill::after{ /* brilho correndo */
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 62%) 0 0 / 220% 100% no-repeat;
  animation:mpShine 2.8s ease-in-out infinite;
}
.mp-ki__cap{
  position:absolute; left:0; top:0; width:calc(54*var(--ku)); height:calc(54*var(--ku)); border-radius:50%;
  background:radial-gradient(circle at 42% 36%,#ffffff 0 10%,#8ee8ff 18%,#1a7cff 46%,#06173d 70%);
  border:calc(5*var(--ku)) solid var(--gold-3);
  box-shadow:0 0 0 calc(2.5*var(--ku)) var(--ink), inset 0 0 0 calc(2*var(--ku)) var(--gold-1), 0 0 calc(16*var(--ku)) rgba(80,200,255,.55);
}
.mp-ki__val{
  position:absolute; right:0; top:50%; transform:translateY(-50%) skewX(-8deg);
  font:calc(36*var(--ku))/1 var(--f-heavy); letter-spacing:.01em; --stroke:.18em;
}

/* ---------- Slides ---------- */
.mp-slides{ position:absolute; inset:0; }
.mp-slide{ position:absolute; inset:0; visibility:hidden; pointer-events:none; }
.mp-slide.is-active, .mp-slide.is-leaving{ visibility:visible; }
.mp-slide.is-active{ pointer-events:auto; }
.mp-slide.is-leaving{ animation:mpOut .32s ease forwards; z-index:1; }

/* ---------- Card "O que você acompanha" ---------- */
.mp-card{ --x:24; --y:166; --w:322; --cu:var(--p); aspect-ratio:760 / 1199; z-index:3; }
.mp-card__frame{ position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 calc(10*var(--cu)) calc(14*var(--cu)) rgba(0,12,45,.45)); }
.mp-card__in{
  position:absolute; left:calc(29*var(--cu)); top:calc(58*var(--cu)); width:calc(264*var(--cu)); height:calc(422*var(--cu));
  display:flex; flex-direction:column;
}
.mp-card__title{
  position:relative; isolation:isolate; flex:none; height:calc(40*var(--cu)); margin:0 calc(4*var(--cu));
  display:grid; place-items:center;
  font:calc(21*var(--cu))/1 var(--f-comic); letter-spacing:.05em; text-transform:uppercase; --stroke:.15em;
}
.mp-card__orb{ display:none; }
.mp-card__title::before, .mp-card__title::after{
  content:''; position:absolute; z-index:-1;
  clip-path:polygon(calc(12*var(--cu)) 0, calc(100% - 12*var(--cu)) 0, 100% 50%, calc(100% - 12*var(--cu)) 100%, calc(12*var(--cu)) 100%, 0 50%);
}
.mp-card__title::before{ inset:0; background:linear-gradient(180deg,var(--gold-1),var(--gold-3) 55%,#c66d00); }
.mp-card__title::after{
  inset:calc(3*var(--cu));
  clip-path:polygon(calc(10.5*var(--cu)) 0, calc(100% - 10.5*var(--cu)) 0, 100% 50%, calc(100% - 10.5*var(--cu)) 100%, calc(10.5*var(--cu)) 100%, 0 50%);
  background:linear-gradient(180deg,#0d2d6e,#04122f);
}

.mp-list{ list-style:none; margin:calc(12*var(--cu)) 0 0; padding:0; flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.mp-list li{ margin:0; padding:0; }
.mp-item{
  position:relative; display:flex; align-items:center; width:100%; height:calc(56*var(--cu));
  text-align:left;
  transition:transform .25s cubic-bezier(.3,1.5,.5,1);
}
.mp-item__icon{
  position:relative; z-index:2; flex:none; display:grid; place-items:center;
  width:calc(52*var(--cu)); height:calc(52*var(--cu)); border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#2160c4 0%,#0b2a63 62%,#061a44 100%);
  border:calc(3.5*var(--cu)) solid var(--gold-2);
  box-shadow:0 0 0 calc(2*var(--cu)) var(--ink), inset 0 0 0 calc(1.5*var(--cu)) rgba(255,255,255,.18), 0 calc(4*var(--cu)) calc(6*var(--cu)) rgba(0,0,0,.35);
  transition:box-shadow .25s, transform .25s;
}
.mp-item__icon svg{ width:calc(26*var(--cu)); height:calc(26*var(--cu)); fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.mp-item__icon svg .f{ fill:#fff; stroke:none; }
.mp-item__label{
  position:relative; isolation:isolate; flex:1; display:flex; align-items:center;
  height:calc(46*var(--cu)); margin-left:calc(-20*var(--cu)); padding:0 calc(20*var(--cu)) 0 calc(30*var(--cu));
  font:calc(17*var(--cu))/1.02 var(--f-comic); letter-spacing:.045em; text-transform:uppercase; color:#fff;
  text-shadow:0 calc(2*var(--cu)) 0 rgba(0,0,0,.55);
  filter:drop-shadow(0 calc(3*var(--cu)) 0 rgba(0,0,0,.3));
}
.mp-item__label::before, .mp-item__label::after{
  content:''; position:absolute; z-index:-1; transition:background .25s;
}
.mp-item__label::before{
  inset:0; background:linear-gradient(180deg,var(--gold-1),var(--gold-3) 60%,#c66d00);
  clip-path:polygon(0 0, calc(100% - 16*var(--cu)) 0, 100% 50%, calc(100% - 16*var(--cu)) 100%, 0 100%);
}
.mp-item__label::after{
  inset:calc(2.5*var(--cu));
  background:linear-gradient(180deg,#123d8c 0%,#0a2558 55%,#061a44 100%);
  clip-path:polygon(0 0, calc(100% - 14.5*var(--cu)) 0, 100% 50%, calc(100% - 14.5*var(--cu)) 100%, 0 100%);
}
.mp-item:hover{ transform:translateX(calc(5*var(--cu))); }
.mp-item:hover .mp-item__icon{
  box-shadow:0 0 0 calc(2*var(--cu)) var(--ink), 0 0 calc(14*var(--cu)) rgba(255,214,60,.85);
  transform:rotate(-8deg) scale(1.05);
}
.mp-item:hover .mp-item__label::after{ background:linear-gradient(180deg,#1d58c0 0%,#0e3380 60%,#082356 100%); }

/* ---------- Moldura principal ---------- */
.mp-frame{ --x:380; --y:128; --w:838; --fu:var(--p); aspect-ratio:1400 / 895; margin:0; z-index:2; }
.mp-frame__media{
  position:absolute; left:calc(40*var(--fu)); top:calc(76*var(--fu)); width:calc(758*var(--fu)); height:calc(412*var(--fu));
  overflow:hidden; background:var(--navy-3);
}
.mp-frame__media > img{
  width:100%; height:100%; object-fit:cover; object-position:58% 30%;
  transform:scale(1.02); transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.mp-frame:hover .mp-frame__media > img{ transform:scale(1.07); }
.mp-frame__media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(6,23,61,.18),transparent 25%,transparent 62%,rgba(6,23,61,.55));
}
.mp-frame__border{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; filter:drop-shadow(0 calc(12*var(--fu)) calc(16*var(--fu)) rgba(0,12,45,.45)); }
.mp-frame__cap{
  position:absolute; left:calc(202*var(--fu)); top:calc(432*var(--fu)); width:calc(439*var(--fu)); height:calc(80*var(--fu));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(1*var(--fu));
}
.mp-cap__kicker{ font:calc(21*var(--fu))/1 var(--f-comic); letter-spacing:.12em; text-transform:uppercase; color:#fff; --stroke:.24em; }
.mp-cap__title{
  font:calc(44*var(--fu))/1 var(--f-heavy); font-weight:400; text-transform:uppercase; letter-spacing:.01em;
  transform:skewX(-7deg); --stroke:.17em;
}
.mp-frame__cap--long .mp-cap__title{ font-size:calc(32*var(--fu)); }

/* E-book dentro da moldura */
.mp-ebook{ background:radial-gradient(circle at 50% 42%,#2f7ae6 0%,#0f3784 40%,#05123a 100%); }
.mp-ebook::after{ background:linear-gradient(180deg,transparent 60%,rgba(4,14,44,.6)); }
.mp-ebook__rays{
  position:absolute; inset:-60%;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.075) 0deg 3deg, transparent 3deg 11deg);
  animation:mpSpin 60s linear infinite;
}
.mp-ebook__glow{
  position:absolute; left:50%; top:44%; width:calc(420*var(--fu)); height:calc(420*var(--fu)); transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,214,80,.55) 0%,rgba(255,170,0,.18) 40%,transparent 68%);
  animation:mpPulse 3.2s ease-in-out infinite;
}
.mp-book{
  position:absolute; left:50%; top:calc(12*var(--fu)); width:calc(186*var(--fu)); aspect-ratio:2 / 3;
  transform:translateX(-50%); perspective:calc(900*var(--fu));
  animation:mpFloat 4.5s ease-in-out infinite;
}
.mp-book__img, .mp-book__fallback{
  position:absolute; inset:0; width:100%; height:100%; border-radius:calc(3*var(--fu)) calc(8*var(--fu)) calc(8*var(--fu)) calc(3*var(--fu));
  transform:rotateY(-16deg) rotateX(3deg); transform-origin:left center;
  box-shadow:calc(-6*var(--fu)) 0 0 #1b0b05 inset, calc(18*var(--fu)) calc(22*var(--fu)) calc(30*var(--fu)) rgba(0,0,0,.55), 0 0 0 calc(2*var(--fu)) var(--ink);
}
.mp-book__img{ object-fit:cover; background:#120c0a; }
.mp-book__fallback{
  display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:calc(14*var(--fu));
  background:
    linear-gradient(90deg,rgba(0,0,0,.45) 0 4%,rgba(255,255,255,.08) 5%,transparent 9%),
    linear-gradient(160deg,#171019 0%,#3b0d14 58%,#8a1616 100%);
  overflow:hidden;
}
.mp-book.is-fallback .mp-book__img{ display:none; }
.mp-book.is-fallback .mp-book__fallback{ display:flex; }
.mp-book__kicker{ font:calc(14*var(--fu))/1 var(--f-comic); letter-spacing:.3em; color:var(--gold-2); text-transform:uppercase; margin-bottom:calc(14*var(--fu)); }
.mp-book__t1, .mp-book__t2{ font:calc(30*var(--fu))/1 var(--f-heavy); text-transform:uppercase; color:#fff; letter-spacing:.02em; }
.mp-book__t2{ font-size:calc(25*var(--fu)); color:var(--gold-2); margin-top:calc(4*var(--fu)); }
.mp-book__author{ margin-top:calc(26*var(--fu)); font:calc(15*var(--fu))/1 var(--f-comic); letter-spacing:.22em; color:#fff; opacity:.85; text-transform:uppercase; }

/* ---------- Ofertas (painéis da direita) ---------- */
.mp-offer{ --x:1236; --y:186; --w:410; --ou:var(--p); display:flex; flex-direction:column; align-items:center; gap:calc(14*var(--ou)); z-index:3; }
.mp-panel{ position:relative; display:block; width:100%; text-align:center; }
.mp-panel__bob{ position:relative; display:block; width:100%; animation:mpBob 4.2s ease-in-out infinite; }
.mp-panel--a .mp-panel__bob{ animation-delay:-1.4s; }
.mp-panel--b .mp-panel__bob{ animation-delay:-2.8s; }
.mp-panel img{ width:100%; height:auto; filter:drop-shadow(0 calc(8*var(--ou)) calc(10*var(--ou)) rgba(0,12,45,.4)); transition:filter .3s; }
/* proporção explícita de cada arquivo da <picture> (o Chrome avisa de imagem lazy com altura auto;
   ver css/pagina.css). A versão de celular tem outra proporção */
.mp-panel--orb img{ aspect-ratio:900/356; } .mp-panel--b img{ aspect-ratio:900/225; }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px), (max-height: 500px) and (max-width: 950px){
  .mp-panel--orb img{ aspect-ratio:900/409; } .mp-panel--b img{ aspect-ratio:900/310; }
}
.mp-panel__txt{ position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.mp-panel--orb .mp-panel__txt{ inset:31.7% 7.2% 15.5%; padding-top:calc(2*var(--ou)); }
.mp-panel--a .mp-panel__txt{ inset:13% 6.4% 20.5%; }
.mp-panel--b .mp-panel__txt{ inset:11.6% 7.2% 19.1%; }
.mp-panel--orb{ transition:transform .25s cubic-bezier(.3,1.5,.5,1); }
.mp-panel--orb:hover{ transform:scale(1.03); }
.mp-panel--orb:hover img{ filter:drop-shadow(0 0 calc(14*var(--ou)) rgba(255,214,60,.75)); }

.mp-big{ font:calc(56*var(--ou))/.9 var(--f-heavy); text-transform:uppercase; transform:skewX(-7deg); --stroke:.16em; }
.mp-small{ font:calc(19*var(--ou))/1 var(--f-comic); letter-spacing:.09em; text-transform:uppercase; color:#fff; --stroke:.24em; margin-top:calc(3*var(--ou)); }
.mp-small--from{ font-size:calc(18*var(--ou)); margin:0 0 calc(3*var(--ou)); color:#dfe9ff; }
.mp-small--from s{ text-decoration-thickness:.14em; text-decoration-color:#ff3b2f; }

.mp-price{ flex-direction:row; align-items:baseline; justify-content:center; transform:skewX(-7deg); }
.mp-price--stack{ flex-direction:column; align-items:center; }
.mp-price__row{ display:flex; align-items:baseline; justify-content:center; }
.mp-price__pre{ font:calc(27*var(--ou))/1 var(--f-heavy); color:#fff; margin-right:calc(9*var(--ou)); --stroke:.2em; }
.mp-price__int{ font:calc(52*var(--ou))/.9 var(--f-heavy); --stroke:.15em; }
.mp-price__cents{ font:calc(30*var(--ou))/1 var(--f-heavy); align-self:flex-start; margin-top:calc(2*var(--ou)); --stroke:.18em; }
.mp-panel--b .mp-price__int{ font-size:calc(46*var(--ou)); }
.mp-panel--b .mp-price__cents{ font-size:calc(26*var(--ou)); }
.mp-price__tag{ font:calc(19*var(--ou))/1 var(--f-comic); letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-left:calc(10*var(--ou)); --stroke:.24em; }

/* CTA */
.mp-cta{
  position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center;
  width:calc(380*var(--ou)); height:calc(70*var(--ou)); margin-top:calc(4*var(--ou));
  text-decoration:none; color:#fff; overflow:visible;
  transform:skewX(-9deg); transition:transform .25s cubic-bezier(.3,1.6,.5,1), filter .25s;
  filter:drop-shadow(0 calc(6*var(--ou)) 0 rgba(0,0,0,.35));
  animation:mpGlow 2.4s ease-in-out infinite;
}
.mp-cta::before, .mp-cta::after{ content:''; position:absolute; z-index:-1; border-radius:calc(6*var(--ou)); }
.mp-cta::before{ inset:0; background:var(--ink); }
.mp-cta::after{
  inset:calc(3*var(--ou));
  background:linear-gradient(180deg,#fff3a3 0,#ffd23a calc(5*var(--ou)),#ff9a0f 46%,#f05a0a 52%,#c8360b 100%);
  box-shadow:inset 0 0 0 calc(3*var(--ou)) rgba(255,240,170,.75), inset 0 calc(-6*var(--ou)) 0 rgba(120,20,0,.35);
}
.mp-cta__txt{
  transform:skewX(9deg); font:calc(31*var(--ou))/1 var(--f-comic); letter-spacing:.06em; text-transform:uppercase;
  text-shadow:
    calc(2.5*var(--ou)) 0 0 var(--ink), calc(-2.5*var(--ou)) 0 0 var(--ink), 0 calc(2.5*var(--ou)) 0 var(--ink), 0 calc(-2.5*var(--ou)) 0 var(--ink),
    calc(2*var(--ou)) calc(2*var(--ou)) 0 var(--ink), calc(-2*var(--ou)) calc(2*var(--ou)) 0 var(--ink), calc(2*var(--ou)) calc(-2*var(--ou)) 0 var(--ink), calc(-2*var(--ou)) calc(-2*var(--ou)) 0 var(--ink),
    0 calc(5*var(--ou)) 0 var(--ink);
}
.mp-cta__shine{ position:absolute; inset:calc(3*var(--ou)); border-radius:calc(6*var(--ou)); overflow:hidden; pointer-events:none; }
.mp-cta__shine::before{
  content:''; position:absolute; top:-20%; bottom:-20%; width:28%; left:-40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  animation:mpSweep 3.4s ease-in-out infinite;
}
.mp-cta:hover, .mp-cta:focus-visible{ transform:skewX(-9deg) scale(1.05); outline:none; }
.mp-cta:active{ transform:skewX(-9deg) scale(.97); }
.mp-offer__note{ margin-top:calc(2*var(--ou)); font:calc(16*var(--ou))/1 var(--f-comic); letter-spacing:.08em; text-transform:uppercase; color:#fff; --stroke:.26em; }

/* ---------- Navegação ---------- */
.mp-nav{ --x:520; --y:674; --w:558; z-index:6; display:flex; flex-direction:column; align-items:center; gap:calc(6*var(--p)); }
.mp-nav__row{ display:flex; align-items:center; gap:calc(34*var(--p)); }
.mp-arrow{ display:grid; place-items:center; width:calc(48*var(--p)); height:calc(60*var(--p)); transition:transform .2s; }
.mp-arrow svg{ width:100%; height:100%; overflow:visible; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.mp-arrow .o{ stroke:var(--ink); stroke-width:15; }
.mp-arrow .i{ stroke:var(--gold-2); stroke-width:8; transition:stroke .2s; }
.mp-arrow--prev{ animation:mpNudgeL 1.8s ease-in-out infinite; }
.mp-arrow--next{ animation:mpNudgeR 1.8s ease-in-out infinite; }
.mp-arrow:hover .i, .mp-arrow:focus-visible .i{ stroke:#fff6b0; }
.mp-arrow:focus-visible{ outline:none; filter:drop-shadow(0 0 calc(8*var(--p)) rgba(255,214,60,.9)); }
.mp-dots{ display:flex; gap:calc(12*var(--p)); }
.mp-dot{
  width:calc(22*var(--p)); height:calc(22*var(--p)); border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#2a64c8,#0b2a63 70%);
  box-shadow:0 0 0 calc(2.5*var(--p)) var(--ink), inset 0 0 0 calc(2*var(--p)) rgba(255,255,255,.15);
  transition:transform .25s, background .25s;
}
.mp-dot[aria-current="true"]{
  background:radial-gradient(circle at 38% 32%,#fffbe0 0 12%,var(--gold-2) 30%,var(--gold-4) 100%);
  transform:scale(1.15);
}
.mp-dot:focus-visible{ outline:none; box-shadow:0 0 0 calc(2.5*var(--p)) var(--ink), 0 0 calc(10*var(--p)) rgba(255,214,60,.9); }
.mp-nav__label{ display:none; font:calc(19*var(--p))/1 var(--f-comic); letter-spacing:.1em; text-transform:uppercase; color:#fff; --stroke:.26em; }

/* ---------- Caixa de diálogo ----------
   Fica abaixo do palco, com altura automática: mostra o texto completo do
   produto ativo e cresce/encolhe conforme o texto e a largura da tela.
   Desenho em CSS: contorno preto → faixa dourada → filete preto → pergaminho,
   cantos cortados + degrau no topo direito. Variáveis em "px de design":
   --C chanfro · --SX início do degrau (da direita) · --SD altura do degrau
   --b0 contorno · --b1 dourado · --b2 filete */
.mp-dialog{
  --p:calc(100cqw / 1672);
  position:relative; z-index:4;
  width:calc(1624*var(--p)); margin:0 auto calc(22*var(--p));
  --C:22; --SX:260; --SD:16; --b0:3.5; --b1:11; --b2:4;
}
.mp-dialog__frame, .mp-dialog__layer{
  --c:calc((var(--C) - .828 * var(--t)) * var(--p));
  --sx:calc((var(--SX) - .586 * var(--t)) * var(--p));
  --sd:calc(var(--SD) * var(--p));
  position:absolute; display:block;
  clip-path:polygon(
    var(--c) 0, calc(100% - var(--sx)) 0, calc(100% - var(--sx) + var(--sd)) var(--sd),
    calc(100% - var(--c)) var(--sd), 100% calc(var(--sd) + var(--c)),
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.mp-dialog__frame{
  --t:0; inset:0; background:var(--ink);
  filter:drop-shadow(0 calc(8*var(--p)) calc(12*var(--p)) rgba(0,12,45,.35));
}
.mp-dialog__layer{ inset:calc(var(--t) * var(--p)); }
.mp-dialog__gold{
  --t:var(--b0);
  background:
    linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 47%,transparent 59%) -60% 0 / 60% 100% no-repeat,
    linear-gradient(180deg,#fff2a8 0%,#ffd23a 22%,#ffb000 55%,#f08a00 82%,#c96400 100%);
  animation:mpGoldSweep 6s ease-in-out infinite;
}
.mp-dialog__line{ --t:calc(var(--b0) + var(--b1)); background:var(--ink); }
.mp-dialog__paper{
  --t:calc(var(--b0) + var(--b1) + var(--b2));
  background:
    linear-gradient(180deg,rgba(255,250,225,.9) 0,rgba(255,250,225,0) calc(3*var(--p))),
    linear-gradient(180deg,rgba(120,80,20,.10),transparent 18%,transparent 82%,rgba(120,80,20,.16)),
    radial-gradient(120% 160% at 50% 40%,rgba(255,255,255,.18),transparent 60%),
    url("../assets/img/mentoria/dialog-paper.webp?v=85a1555f") 50% 50% / cover no-repeat,
    #efdfba;
}
.mp-dialog__text{
  position:relative; z-index:2;
  padding:calc(46*var(--p)) calc(56*var(--p)) calc(32*var(--p));
  font:700 max(15px, calc(21*var(--p)))/1.42 var(--f-text); color:var(--parch-ink); letter-spacing:.005em;
  text-wrap:pretty;
}
.mp-dialog__text{ display:grid; }
.mp-dialog__page{ grid-area:1 / 1; visibility:hidden; }
.mp-dialog__page.is-active{ visibility:visible; }
.mp-dialog__text p{ margin:0; }
.mp-dialog__text p + p{ margin-top:.35em; }
.mp-dialog__text p:first-child{ font-weight:800; color:#1e1104; }
.mp-dialog.is-swap .mp-dialog__page.is-active{ animation:mpTextIn .45s ease both; }

/* ---------- Flash de troca de produto ---------- */
.mp-flash{
  position:absolute; left:calc(380*var(--p)); top:calc(128*var(--p)); width:calc(838*var(--p)); aspect-ratio:1400 / 895;
  pointer-events:none; z-index:6; opacity:0;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.95),rgba(255,236,150,.6) 35%,transparent 70%);
}
.mp-flash.is-on{ animation:mpFlash .5s ease-out; }

/* =====================================================================
   ANIMAÇÕES DE ENTRADA (só com JS ativo)
   ===================================================================== */
.mp.mp-js:not(.is-in) .mp-title,
.mp.mp-js:not(.is-in) .mp-ki,
.mp.mp-js:not(.is-in) .mp-nav,
.mp.mp-js:not(.is-in) .mp-dialog,
.mp.mp-js:not(.is-in) .mp-slide.is-active .mp-card,
.mp.mp-js:not(.is-in) .mp-slide.is-active .mp-frame,
.mp.mp-js:not(.is-in) .mp-slide.is-active .mp-panel,
.mp.mp-js:not(.is-in) .mp-slide.is-active .mp-cta,
.mp.mp-js:not(.is-in) .mp-slide.is-active .mp-offer__note{ opacity:0; }

/* integração (12/10): atrasos da entrada em ~60% do original (o maior era .75s): o cliente sentia
   a seção demorar a carregar. Durações e curvas iguais */
.mp.is-in .mp-title{ animation:mpInLeft .7s cubic-bezier(.2,1.3,.4,1) both; }
.mp.is-in .mp-ki{ animation:mpInRight .7s .06s cubic-bezier(.2,1.3,.4,1) both; }
.mp.is-in .mp-nav{ animation:mpInUp .6s .45s ease both; }
.mp.is-in .mp-dialog{ animation:mpInUp .7s .33s cubic-bezier(.2,1.2,.4,1) both; }
.mp.is-in .mp-slide.is-active .mp-card{ animation:mpInLeft .7s .12s cubic-bezier(.2,1.25,.4,1) both; }
.mp.is-in .mp-slide.is-active .mp-frame{ animation:mpZoom .75s .06s cubic-bezier(.2,1.3,.4,1) both; }
.mp.is-in .mp-slide.is-active .mp-panel{ animation:mpInRight .6s cubic-bezier(.2,1.3,.4,1) both; }
.mp.is-in .mp-slide.is-active .mp-panel--orb{ animation-delay:.15s; }
.mp.is-in .mp-slide.is-active .mp-panel--a{ animation-delay:.21s; }
.mp.is-in .mp-slide.is-active .mp-panel--b{ animation-delay:.27s; }
.mp.is-in .mp-slide.is-active .mp-cta{ animation:mpPop .55s .36s cubic-bezier(.2,1.6,.4,1) both, mpGlow 2.4s .9s ease-in-out infinite; }
.mp.is-in .mp-slide.is-active .mp-offer__note{ animation:mpInUp .5s .42s ease both; }
.mp.is-in .mp-slide.is-active .mp-item{ animation:mpInLeft .5s cubic-bezier(.2,1.3,.4,1) both; }
.mp.is-in .mp-slide.is-active li:nth-child(1) .mp-item{ animation-delay:.21s; }
.mp.is-in .mp-slide.is-active li:nth-child(2) .mp-item{ animation-delay:.25s; }
.mp.is-in .mp-slide.is-active li:nth-child(3) .mp-item{ animation-delay:.29s; }
.mp.is-in .mp-slide.is-active li:nth-child(4) .mp-item{ animation-delay:.34s; }
.mp.is-in .mp-slide.is-active li:nth-child(5) .mp-item{ animation-delay:.38s; }
.mp.is-in .mp-slide.is-active li:nth-child(6) .mp-item{ animation-delay:.42s; }
.mp.is-in .mp-ki__fill{ animation:mpCharge 1.6s .3s cubic-bezier(.3,.1,.2,1) both; }
.mp.is-in .mp-ki__fill::after{ animation:mpShine 2.8s 2s ease-in-out infinite; }

@keyframes mpDrift{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.05) translate(-1.2%,-1%); } }
@keyframes mpRise{ 0%{ transform:translateY(0) scale(.6); opacity:0; } 12%{ opacity:.9; } 80%{ opacity:.6; } 100%{ transform:translateY(-105vh) scale(1.1); opacity:0; } }
@keyframes mpTextIn{ from{ opacity:0; transform:translateY(calc(8*var(--p))); } to{ opacity:1; transform:none; } }
@keyframes mpGoldSweep{ 0%,62%{ background-position:-60% 0, 0 0; } 100%{ background-position:160% 0, 0 0; } }
@keyframes mpShine{ 0%,55%{ background-position:160% 0; } 100%{ background-position:-60% 0; } }
@keyframes mpSweep{ 0%,60%{ left:-40%; } 100%{ left:120%; } }
@keyframes mpGlow{ 0%,100%{ filter:drop-shadow(0 calc(6*var(--ou)) 0 rgba(0,0,0,.35)) drop-shadow(0 0 0 rgba(255,170,0,0)); } 50%{ filter:drop-shadow(0 calc(6*var(--ou)) 0 rgba(0,0,0,.35)) drop-shadow(0 0 calc(16*var(--ou)) rgba(255,170,0,.75)); } }
@keyframes mpBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(calc(-4*var(--ou))); } }
@keyframes mpFloat{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(calc(-8*var(--fu))); } }
@keyframes mpSpin{ to{ transform:rotate(360deg); } }
@keyframes mpPulse{ 0%,100%{ opacity:.75; transform:translate(-50%,-50%) scale(.95); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.05); } }
@keyframes mpBlink{ 50%{ opacity:0; } }
@keyframes mpBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(calc(5*var(--p))); } }
@keyframes mpNudgeL{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(calc(-5*var(--p))); } }
@keyframes mpNudgeR{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(calc(5*var(--p))); } }
@keyframes mpInLeft{ from{ opacity:0; transform:translateX(calc(-60*var(--p))) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes mpInRight{ from{ opacity:0; transform:translateX(calc(60*var(--p))) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes mpInUp{ from{ opacity:0; transform:translateY(calc(50*var(--p))); } to{ opacity:1; transform:none; } }
@keyframes mpZoom{ from{ opacity:0; transform:scale(.86) rotate(-1.5deg); } to{ opacity:1; transform:none; } }
@keyframes mpPop{ from{ opacity:0; transform:skewX(-9deg) scale(.6); } to{ opacity:1; transform:skewX(-9deg) scale(1); } }
@keyframes mpOut{ to{ opacity:0; transform:scale(.97); } }
@keyframes mpFlash{ 0%{ opacity:0; } 25%{ opacity:1; } 100%{ opacity:0; } }
@keyframes mpCharge{ from{ width:0; } }

/* =====================================================================
   MOBILE / TABLET — palco 940 × 1604 (grade do mockup mobile) + caixa de diálogo abaixo
   Mesma lógica do desktop: posições absolutas em "px de design" (--p).
   ===================================================================== */
@media (max-width:767px), (orientation:portrait) and (max-width:1100px), (max-height:500px) and (max-width:950px){
  .mp-wrap{ width:min(100%, 600px); }
  .mp-stage{ --p:calc(100cqw / 940); aspect-ratio:940 / 1604; }
  .mp-bg img{ object-position:18% 50%; }

  .mp-ki, .mp-nav__label, .mp-offer__note{ display:none; }

  /* Título */
  .mp-title{ --x:72; --y:70; --w:796; }

  /* Moldura (versão alta) */
  .mp-frame{ --x:130; --y:240; --w:680; --fu:calc(var(--p) * 680 / 838); aspect-ratio:1400 / 1120; }
  .mp-frame__media{ left:calc(30*var(--p)); top:calc(62*var(--p)); width:calc(620*var(--p)); height:calc(436*var(--p)); }
  .mp-frame__media > img{ object-position:60% 26%; }
  .mp-frame__cap{ left:calc(167*var(--p)); top:calc(453*var(--p)); width:calc(353*var(--p)); height:calc(72*var(--p)); }
  .mp-cap__kicker{ font-size:calc(23*var(--p)); }
  .mp-cap__title{ font-size:calc(45*var(--p)); }
  .mp-frame__cap--long .mp-cap__title{ font-size:calc(28*var(--p)); }
  .mp-book{ width:calc(212*var(--p)); top:calc(22*var(--p)); }
  .mp-flash{ left:calc(130*var(--p)); top:calc(240*var(--p)); width:calc(680*var(--p)); aspect-ratio:1400 / 1120; }

  /* Lista "O que você acompanha" (quadro largo) */
  .mp-card{ --x:165; --y:787; --w:610; --cu:calc(var(--p) * 1.08); aspect-ratio:610 / 490; }
  .mp-card__in{ left:0; top:0; width:100%; height:100%; display:block; }
  .mp-card__title{
    position:absolute; left:calc(14*var(--p)); width:calc(582*var(--p)); top:calc(3*var(--p)); height:calc(66*var(--p)); margin:0;
    font-size:calc(33*var(--p)); padding-left:calc(58*var(--p));
  }
  .mp-card__orb{
    display:block; position:absolute; z-index:2; left:calc(40*var(--p)); top:50%; transform:translateY(-50%);
    width:calc(76*var(--p)); height:calc(76*var(--p));
    filter:drop-shadow(0 calc(3*var(--p)) calc(4*var(--p)) rgba(0,0,0,.4));
  }
  .mp-list{ position:absolute; left:calc(75*var(--p)); width:calc(465*var(--p)); top:calc(85*var(--p)); height:calc(366*var(--p)); margin:0; }
  .mp-item{ height:calc(58*var(--p)); }
  .mp-item__icon{ width:calc(58*var(--p)); height:calc(58*var(--p)); }
  .mp-item__icon svg{ width:calc(29*var(--p)); height:calc(29*var(--p)); }
  .mp-item__label{ height:calc(46*var(--p)); margin-left:calc(-22*var(--p)); padding-left:calc(40*var(--p)); font-size:calc(25*var(--p)); letter-spacing:.04em; }
  .mp-item__label br{ display:none; }

  /* Preços: "1 DIA" à esquerda, parcelas e PIX empilhados à direita */
  .mp-offer{
    --x:150; --y:1266; --w:630; --ou:calc(var(--p) * .85);
    display:grid; grid-template-columns:calc(316*var(--p)) calc(296*var(--p)); column-gap:calc(18*var(--p)); row-gap:calc(8*var(--p));
    align-items:center; justify-items:stretch;
  }
  .mp-panel--orb{ grid-column:1; grid-row:1 / span 2; }
  .mp-panel--a{ grid-column:2; grid-row:1; }
  .mp-panel--b{ grid-column:2; grid-row:2; }
  .mp-panel--orb .mp-panel__txt{ inset:27.6% 7.3% 13.7%; padding-top:calc(2*var(--p)); }
  .mp-panel--b .mp-panel__txt{ inset:8.5% 7.2% 14%; }
  .mp-big{ font-size:calc(70*var(--p)); }
  .mp-panel--orb .mp-small{ font-size:calc(21*var(--p)); }
  .mp-price__pre{ font-size:calc(28*var(--p)); margin-right:calc(9*var(--p)); }
  .mp-price__int{ font-size:calc(52*var(--p)); }
  .mp-price__cents{ font-size:calc(30*var(--p)); }
  .mp-panel--b .mp-price__int{ font-size:calc(47*var(--p)); }
  .mp-panel--b .mp-price__cents{ font-size:calc(27*var(--p)); }
  .mp-panel--b .mp-small{ font-size:calc(20*var(--p)); }
  .mp-small--from{ font-size:calc(17*var(--p)); }
  .mp-price__tag{ font-size:calc(20*var(--p)); }
  .mp-cta{ grid-column:1 / -1; grid-row:3; justify-self:center; width:calc(470*var(--p)); height:calc(58*var(--p)); margin-top:calc(14*var(--p)); }
  .mp-cta__txt{ font-size:calc(29*var(--p)); }

  /* Setas nas laterais da moldura, bolinhas embaixo.
     A moldura vai de x 130 a 810 (y 240 a 784): sobram 130 px de design de cada lado.
     O nav cobre o palco inteiro, sem capturar clique, para setas e bolinhas usarem as
     coordenadas do palco. O botão é maior que o desenho da seta: área de toque. */
  .mp-nav{ --x:0; --y:0; --w:940; height:100%; display:block; pointer-events:none; }
  .mp-nav__row{ display:contents; }
  .mp-arrow{
    position:absolute; top:calc(512*var(--p)); translate:0 -50%;
    width:calc(110*var(--p)); height:calc(170*var(--p)); pointer-events:auto;
  }
  .mp-arrow svg{ width:calc(60*var(--p)); height:calc(80*var(--p)); }
  .mp-arrow--prev{ left:calc(10*var(--p)); }
  .mp-arrow--next{ right:calc(10*var(--p)); }
  .mp-dots{ position:absolute; left:50%; top:calc(1562*var(--p)); translate:-50% -50%; pointer-events:auto; }
  .mp-dot{ width:calc(24*var(--p)); height:calc(24*var(--p)); }

  /* Caixa de diálogo (borda mais grossa e letra mínima legível no celular) */
  .mp-dialog{ --p:calc(100cqw / 940); width:calc(860*var(--p)); margin:0 auto calc(40*var(--p)); --C:26; --SX:200; --SD:16; --b0:5; --b1:14; --b2:6; }
  .mp-dialog__text{ padding:calc(60*var(--p)) calc(56*var(--p)) calc(48*var(--p)); font-size:max(14px, calc(28*var(--p))); line-height:1.42; }
}

/* celular deitado: coluna mais estreita para não ficar gigante na altura */
@media (max-height:500px) and (max-width:950px) and (orientation:landscape){
  .mp-wrap{ width:min(100%, 440px); }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  .mp *, .mp *::before, .mp *::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; animation-delay:0s!important; transition-duration:.001ms!important; }
  .mp-sparks{ display:none; }
}

/* ---------- Integração com o hero ----------
   O menu do hero leva o foco para o h2 da seção quando a abre (para o teclado seguir dali).
   O título é a faixa de imagem: o anel de foco nela só atrapalha. */
.mp .mp-title:focus{ outline:none; }