/* ═══════════════════════════════════════════════════════════
   EXPERT EM VENDAS NA SAÚDE · Dra. Carol Pinheiro
   Alternância escuro → claro, acento em ouro.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* superfícies */
  --ink:        #08080A;
  --ink-2:      #0F0F13;
  --ink-3:      #17171C;
  --cream:      #F5F0E7;
  --cream-2:    #EDE6D9;
  --cream-3:    #E2D9C8;

  /* ouro */
  --gold:       #C9A227;
  --gold-lt:    #EFD79A;
  --gold-md:    #D9B84E;
  --gold-dk:    #8E6F14;
  --gold-grad:  linear-gradient(135deg,#EFD79A 0%,#C9A227 48%,#F3E2B0 100%);

  /* texto */
  --on-dark:    #F6F2EA;
  --on-dark-2:  rgba(246,242,234,.62);
  --on-dark-3:  rgba(246,242,234,.5);
  --on-light:   #121215;
  --on-light-2: rgba(18,18,21,.66);
  --on-light-3: rgba(18,18,21,.42);

  /* linhas */
  --hr-dark:    rgba(239,215,154,.16);
  --hr-light:   rgba(18,18,21,.12);

  /* tipografia */
  --f-disp: 'Sora', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-serif:'Instrument Serif', Georgia, serif;

  /* métrica */
  --wrap: 1200px;
  --pad:  clamp(20px, 5vw, 48px);
  --sy:   clamp(76px, 11vw, 148px);
  --r:    18px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ─── reset ─── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0; background:var(--ink); color:var(--on-dark);
  font-family:var(--f-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,picture{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,p,ul,ol,figure,dl{ margin:0; }
ul,ol{ padding:0; list-style:none; }
::selection{ background:var(--gold); color:#0A0A0A; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:12px 18px; background:var(--gold); color:#0A0A0A; font-weight:600; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px; border-radius:4px; }

/* ═══════════ layout base ═══════════ */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--n{ max-width:900px; }

.s{ position:relative; padding-block:var(--sy); overflow:hidden; isolation:isolate; }
.s--dark{ background:var(--ink); color:var(--on-dark); }
.s--light{ background:var(--cream); color:var(--on-light); }

/* costura entre blocos claros e escuros */
.s--light + .s--dark, .s--dark + .s--light{ border-top:1px solid transparent; }
.s--light::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px; z-index:1;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.4),transparent);
}
/* textura de gesso travertino nas seções claras */
.s--light::after{
  content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:url('../img/cream-plaster.webp') center/cover;
  opacity:.55; mix-blend-mode:multiply;
}

.s__veil{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.3; mix-blend-mode:screen; z-index:-1; pointer-events:none;
}

.s__head{ max-width:920px; margin-bottom:clamp(44px,6vw,72px); }
.s__sub{ margin-top:20px; font-size:clamp(1.02rem,1.6vw,1.16rem); color:var(--on-light-2); max-width:60ch; }
.s__sub--light{ color:var(--on-dark-2); }

/* ═══════════ tipografia ═══════════ */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-size:.735rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt);
  margin-bottom:22px;
}
.eyebrow--dark{ color:var(--gold-dk); }
.eyebrow__dot{
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,39,.16);
}

.hero__h1,.h2{
  font-family:var(--f-disp); font-weight:700; letter-spacing:-.03em; line-height:1.08;
  text-wrap:balance;
}
.hero__h1{ font-size:clamp(2.3rem,5.1vw,3.8rem); }
.h2{ font-size:clamp(1.85rem,4.2vw,3.05rem); color:var(--on-light); }
.h2--light{ color:var(--on-dark); }
.h2--xl{ font-size:clamp(2.2rem,5.4vw,3.9rem); }

em{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  letter-spacing:-.01em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.h2:not(.h2--light) em{
  background:linear-gradient(135deg,#B4891A 0%,#8E6F14 60%,#C9A227 100%);
  -webkit-background-clip:text; background-clip:text;
}

.br-lg{ display:none; }
@media(min-width:900px){ .br-lg{ display:block; } }

/* ═══════════ botões ═══════════ */
.btn{
  --bh:58px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--bh); padding:0 30px; border-radius:999px;
  font-family:var(--f-disp); font-size:.94rem; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.btn--lg{ --bh:62px; padding:0 32px; font-size:1rem; }
.btn--sm{ --bh:44px; padding:0 22px; font-size:.86rem; }
.btn--full{ width:100%; }

.btn__arw{ transition:transform .35s var(--ease); }
.btn:hover .btn__arw{ transform:translateX(5px); }

/* ouro */
.btn--gold{
  background:var(--gold-grad); background-size:200% 100%; background-position:0% 50%;
  color:#100C02;
  box-shadow:0 8px 26px -10px rgba(201,162,39,.7), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn--gold:hover{
  background-position:100% 50%; transform:translateY(-2px);
  box-shadow:0 16px 40px -12px rgba(201,162,39,.85), inset 0 1px 0 rgba(255,255,255,.55);
}
/* brilho que atravessa */
.btn--gold::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);
}
.btn--gold:hover::after{ transform:translateX(120%); transition:transform .85s var(--ease); }

/* contorno claro sobre escuro */
.btn--ghost{
  border:1px solid var(--hr-dark); color:var(--on-dark);
  background:rgba(255,255,255,.03); backdrop-filter:blur(6px);
}
.btn--ghost:hover{ border-color:rgba(239,215,154,.45); background:rgba(239,215,154,.09); transform:translateY(-2px); }

/* escuro sobre claro */
.btn--dark{
  background:var(--ink); color:var(--cream);
  box-shadow:0 8px 24px -12px rgba(0,0,0,.6);
}
.btn--dark:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(0,0,0,.65); background:var(--ink-3); }

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .4s var(--ease), backdrop-filter .4s, border-color .4s, transform .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:16px var(--pad);
  display:flex; align-items:center; gap:24px;
  transition:padding .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(8,8,10,.82); backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--hr-dark);
}
.nav.is-stuck .nav__in{ padding-block:11px; }
.nav.is-hidden{ transform:translateY(-102%); }

.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand__mark{ width:38px; height:38px; flex:none; }
.brand__mark svg{ width:100%; height:100%; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.2; }
.brand__txt strong{
  font-family:var(--f-disp); font-size:.86rem; font-weight:700; letter-spacing:.12em; color:var(--on-dark);
}
.brand__txt small{ font-size:.68rem; letter-spacing:.06em; color:var(--on-dark-3); }

.nav__links{ display:none; gap:30px; }
.nav__links a{
  position:relative; font-size:.86rem; font-weight:500; color:var(--on-dark-2);
  transition:color .25s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav__links a:hover{ color:var(--on-dark); }
.nav__links a:hover::after{ transform:scaleX(1); }
@media(min-width:1000px){ .nav__links{ display:flex; } }

.nav__cta{ display:none; }
@media(min-width:620px){ .nav__cta{ display:inline-flex; } }

/* ═══════════ 1 · HERO ═══════════ */
.hero{ padding-top:clamp(112px,14vw,152px); padding-bottom:0; }
.hero__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero__aura{
  position:absolute; left:50%; top:-6%; width:min(1500px,148%); transform:translateX(-50%);
  opacity:.72; mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 42%,#000 30%,transparent 78%);
          mask-image:radial-gradient(ellipse 70% 62% at 50% 42%,#000 30%,transparent 78%);
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(239,215,154,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(239,215,154,.055) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(ellipse 62% 55% at 50% 30%,#000,transparent 72%);
          mask-image:radial-gradient(ellipse 62% 55% at 50% 30%,#000,transparent 72%);
}

.hero__in{
  display:grid; gap:clamp(28px,3.2vw,44px); align-items:end;
  padding-bottom:clamp(26px,3.4vw,42px);
}
@media(min-width:940px){
  .hero__in{ grid-template-columns:1.12fr .88fr; }
}

.hero__sub{
  margin-top:22px; max-width:46ch;
  font-size:clamp(1.02rem,1.55vw,1.14rem); color:var(--on-dark-2); line-height:1.68;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }

.hero__facts{
  display:flex; flex-wrap:wrap; gap:clamp(20px,3.4vw,42px);
  margin-top:38px; padding-top:24px; border-top:1px solid var(--hr-dark);
}
.hero__facts li{ font-size:.87rem; color:var(--on-dark-2); letter-spacing:.01em; }
.hero__facts b{
  display:block; font-family:var(--f-disp); font-size:1.85rem; font-weight:700; line-height:1;
  margin-bottom:5px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* retrato */
.hero__fig{ position:relative; margin:0; align-self:end; }
.hero__halo{
  position:absolute; left:50%; bottom:6%; translate:-50% 0;
  width:min(560px,104%); aspect-ratio:1;
  background:radial-gradient(circle,rgba(201,162,39,.34) 0%,rgba(201,162,39,.1) 42%,transparent 68%);
  filter:blur(14px); z-index:-1;
}
.hero__fig img{
  width:100%; max-width:505px; margin-inline:auto;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.72));
  /* dissolve o corte da foto no fundo escuro */
  -webkit-mask-image:linear-gradient(#000 86%,transparent 99%);
          mask-image:linear-gradient(#000 86%,transparent 99%);
}
.hero__badge{
  position:absolute; right:clamp(-4px,1vw,10px); bottom:clamp(30px,7vw,84px);
  display:flex; flex-direction:column; gap:2px;
  padding:13px 20px; border-radius:14px;
  background:rgba(12,12,15,.72); backdrop-filter:blur(14px);
  border:1px solid var(--hr-dark);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.9);
}
.hero__badge-name{ font-family:var(--f-disp); font-size:.9rem; font-weight:600; }
.hero__badge-reg{ font-size:.72rem; letter-spacing:.13em; color:var(--gold-lt); text-transform:uppercase; }

/* marquee de públicos */
.marquee{
  position:relative; overflow:hidden; padding-block:20px;
  border-top:1px solid var(--hr-dark); border-bottom:1px solid var(--hr-dark);
  background:rgba(239,215,154,.028);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:slide 34s linear infinite;
}
.marquee__track span{
  font-family:var(--f-disp); font-size:clamp(.94rem,1.7vw,1.14rem); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-2);
  white-space:nowrap;
}
.marquee__track i{ color:var(--gold); font-size:.5rem; font-style:normal; }
@keyframes slide{ to{ transform:translateX(-33.333%); } }

/* ═══════════ 2 · VÍDEO ═══════════ */
.video{ text-align:center; }
.video .h2{ margin-bottom:clamp(36px,5vw,54px); }
.video .btn{ margin-top:clamp(30px,4vw,44px); }
.video .eyebrow{ justify-content:center; }

.video__frame{
  position:relative; aspect-ratio:16/10; border-radius:var(--r); overflow:hidden;
  background:var(--ink-2); border:1px solid rgba(18,18,21,.1);
  box-shadow:0 34px 70px -34px rgba(18,18,21,.55);
}
.video__frame iframe,.video__frame video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video__poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 8%;
  filter:brightness(.62) saturate(.92);
  transition:transform 1s var(--ease), filter .6s;
}
.video__frame:hover .video__poster{ transform:scale(1.035); filter:brightness(.55); }

.video__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:clamp(76px,10vw,102px); aspect-ratio:1; border-radius:50%;
  background:var(--gold-grad); color:#100C02;
  display:grid; place-items:center;
  box-shadow:0 0 0 0 rgba(201,162,39,.42);
  animation:pulse 2.8s var(--ease) infinite;
  transition:scale .3s var(--ease);
}
.video__play svg{ width:42%; fill:currentColor; margin-left:9%; }
.video__play:hover{ scale:1.08; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(201,162,39,.42); }
  70%{ box-shadow:0 0 0 28px rgba(201,162,39,0); }
  100%{ box-shadow:0 0 0 0 rgba(201,162,39,0); }
}

.video__tag{
  position:absolute; left:16px; bottom:16px;
  padding:7px 14px; border-radius:999px;
  background:rgba(8,8,10,.62); backdrop-filter:blur(10px);
  border:1px solid var(--hr-dark);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-2);
}

/* ═══════════ 3 · O DESAFIO ═══════════ */
.pain{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); }

.pain__c{
  position:relative; padding:32px 28px 30px; border-radius:var(--r);
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--hr-dark);
  overflow:hidden;
  transition:transform .45s var(--ease), border-color .45s, background-color .45s;
}
.pain__c::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(239,215,154,.5),transparent);
  opacity:0; transition:opacity .45s;
}
.pain__c:hover{ transform:translateY(-6px); border-color:rgba(239,215,154,.34); }
.pain__c:hover::before{ opacity:1; }

.pain__i{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:22px;
  border-radius:12px; background:rgba(201,162,39,.11); border:1px solid rgba(239,215,154,.2);
}
.pain__i svg{
  width:21px; height:21px; fill:none; stroke:var(--gold-lt); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.pain__q{
  font-family:var(--f-disp); font-size:1.06rem; font-weight:600; line-height:1.4;
  color:var(--on-dark); margin-bottom:10px; letter-spacing:-.015em;
}
.pain__d{ font-size:.93rem; color:var(--on-dark-2); line-height:1.6; }

/* ═══════════ 4 · A JORNADA ═══════════ */
.jornada__art{
  position:absolute; right:-10%; top:-22%; width:min(860px,88%);
  scale:-1 1; opacity:.85; mix-blend-mode:multiply; z-index:-1; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 62% 66% at 30% 42%,#000 12%,transparent 72%);
          mask-image:radial-gradient(ellipse 62% 66% at 30% 42%,#000 12%,transparent 72%);
}

.steps{
  display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:1px solid var(--hr-light);
}
.steps__i{
  position:relative; padding:34px 26px 34px 0;
  border-bottom:1px solid var(--hr-light);
  transition:background-color .4s;
}
@media(min-width:760px){
  .steps__i{ padding:38px 26px 44px; border-bottom:0; border-right:1px solid var(--hr-light); }
  .steps__i:last-child{ border-right:0; }
  .steps__i:first-child{ padding-left:0; }
}
.steps__i::after{
  content:''; position:absolute; left:0; bottom:-1px; width:0; height:2px;
  background:var(--gold-grad); transition:width .6s var(--ease);
}
.steps__i:hover::after{ width:100%; }
.steps__n{
  display:block; font-family:var(--f-disp); font-size:.78rem; font-weight:700;
  letter-spacing:.18em; color:var(--gold-dk); margin-bottom:16px;
}
.steps__i h3{
  font-family:var(--f-disp); font-size:clamp(1.24rem,2.3vw,1.6rem); font-weight:700;
  letter-spacing:-.025em; margin-bottom:9px; color:var(--on-light);
}
.steps__i p{ font-size:.92rem; color:var(--on-light-2); line-height:1.55; text-wrap:balance; }

/* ═══════════ 5 · A MENTORA ═══════════ */
.mentora__silk{
  position:absolute; left:-18%; bottom:-24%; width:min(1000px,92%);
  opacity:.4; mix-blend-mode:screen; z-index:-1; pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 45% 50%,#000,transparent 68%);
          mask-image:radial-gradient(circle at 45% 50%,#000,transparent 68%);
}

.mentora__in{ display:grid; gap:clamp(38px,5vw,72px); align-items:center; }
@media(min-width:900px){ .mentora__in{ grid-template-columns:.86fr 1.14fr; } }

.mentora__fig{ position:relative; margin:0; }
.mentora__fig img{
  width:100%; border-radius:var(--r);
  border:1px solid var(--hr-dark);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.9);
}
.mentora__fig::before{
  content:''; position:absolute; inset:-1px; border-radius:calc(var(--r) + 1px);
  padding:1px; background:linear-gradient(160deg,rgba(239,215,154,.42),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.mentora__fig figcaption{
  position:absolute; left:18px; bottom:18px; right:18px;
  display:flex; flex-direction:column; gap:2px;
  padding:14px 18px; border-radius:13px;
  background:rgba(10,10,13,.68); backdrop-filter:blur(14px);
  border:1px solid var(--hr-dark);
}
.mentora__fig figcaption strong{ font-family:var(--f-disp); font-size:.94rem; font-weight:600; }
.mentora__fig figcaption span{ font-size:.71rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-lt); }

.stats{ display:flex; flex-wrap:wrap; gap:clamp(26px,4vw,52px); margin-top:36px; }
.stats__i{ display:flex; align-items:baseline; gap:13px; }
.stats__i b{
  font-family:var(--f-disp); font-size:clamp(2.6rem,5vw,3.7rem); font-weight:800; line-height:.9;
  letter-spacing:-.05em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stats__i span{ font-size:.85rem; color:var(--on-dark-2); line-height:1.42; }

.creds{
  display:grid; gap:11px 26px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:38px; padding-top:32px; border-top:1px solid var(--hr-dark);
}
.creds li{
  position:relative; padding-left:26px; font-size:.94rem; color:var(--on-dark-2);
}
.creds li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:2px; rotate:45deg;
  background:var(--gold-grad);
}

.mentora__quote{
  margin-top:36px; padding-left:22px; border-left:2px solid rgba(239,215,154,.42);
  font-size:clamp(1.06rem,2vw,1.26rem); line-height:1.55; color:var(--on-dark);
  text-wrap:balance;
}

/* ═══════════ 6 · O CONTEÚDO — carrossel em loop ═══════════ */
/*
   Palco em perspectiva: a capa do meio vem para a frente, as vizinhas
   recuam em profundidade e escurecem. A posicao de cada uma e escrita pelo
   JS em `--i` (distancia ate o centro, com sinal) e o CSS deriva o resto —
   assim a animacao inteira roda no compositor, sem layout a cada quadro.
*/
.mods-wrap{
  position:relative;
  display:flex; align-items:center; gap:clamp(6px,1.4vw,20px);
  margin-top:clamp(14px,2.6vw,30px);
}

.mods{
  position:relative; flex:1 1 auto; min-width:0;
  /* Altura fixa: as capas sao `absolute` dentro do trilho e nao empurram
     mais o container. 2/3 e a proporcao das artes. */
  height:clamp(340px,44vw,460px);
  perspective:1400px;
  /* O palco sangra ate a borda do .wrap para as capas laterais saírem da
     area de leitura em vez de acumular no meio. */
  margin-inline:calc(var(--pad) * -.5);
  /* Some com o que passa das bordas, sem cortar a sombra da capa central. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  touch-action:pan-y;   /* o arraste horizontal e nosso; o vertical e da pagina */
  cursor:grab;
}
.mods.is-drag{ cursor:grabbing; }
.mods:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; border-radius:var(--r); }

.mods__track{
  position:absolute; inset:0;
  transform-style:preserve-3d;
}

/* Sombra elíptica sob o palco. Ancora as capas no fundo creme e dá a
   sensacao de que estao sobre uma superficie, nao flutuando soltas.

   ⚠️ Um halo DOURADO foi testado aqui antes e nao funcionou: contra o
   creme (#F5F0E7) o ouro claro praticamente desaparece. Escurecer o chao
   le muito melhor num fundo claro do que iluminar. */
.mods.is-ready::before{
  content:''; position:absolute; z-index:0;
  left:50%; bottom:6%; width:min(560px,80%); height:44px;
  translate:-50% 0;
  background:radial-gradient(ellipse at center,
    rgba(18,18,21,.28), rgba(18,18,21,.1) 46%, transparent 72%);
  filter:blur(11px);
  pointer-events:none;
}

.mods__c{
  position:absolute; left:50%; top:50%;
  width:clamp(210px,23vw,268px); aspect-ratio:2/3;
  margin-left:calc(clamp(210px,23vw,268px) / -2);
  margin-top:calc(clamp(210px,23vw,268px) * 1.5 / -2);
  border-radius:var(--r); overflow:hidden;
  background:var(--ink-2);
  border:1px solid rgba(18,18,21,.12);
  /* `--i` = distancia ate o centro, com sinal (negativo a esquerda).
     `--abs` = a mesma distancia sem sinal. Ambos escritos pelo JS: `abs()`
     em CSS ainda nao e universal, e `max(x, -x)` falha com numeros sem
     unidade em parte dos navegadores. Toda a geometria sai daqui. */
  --i:0;
  --abs:0;
  /* ⚠️ O afastamento e MAIOR que a largura da capa (~268px no desktop):
     com passo menor as laterais se sobrepoem tanto que a cena vira uma
     pilha ilegivel — foi o primeiro resultado desta secao.
     A rotacao ficou em 16deg: acima disso a arte da capa lateral distorce
     a ponto de o rosto na foto deformar. */
  transform:
    translateX(calc(var(--i) * clamp(150px,17.5vw,232px)))
    translateZ(calc(var(--abs) * -230px))
    rotateY(calc(var(--i) * -16deg))
    scale(calc(1 - var(--abs) * .05));
  filter:brightness(calc(1 - var(--abs) * .34)) saturate(calc(1 - var(--abs) * .2));
  /* Quanto mais longe do centro, mais atras na pilha — sempre acima do
     halo, que fica em z-index 0. */
  z-index:calc(10 - var(--abs));
  opacity:1;
  transition:transform .62s var(--ease), filter .62s var(--ease),
             box-shadow .62s var(--ease), border-color .62s var(--ease),
             opacity .4s linear;
  will-change:transform;
}

/* A capa central: cheia, nitida e com peso. */
.mods__c.is-active{
  box-shadow:0 40px 80px -34px rgba(18,18,21,.62),
             0 0 0 1px rgba(201,162,39,.34);
  border-color:rgba(201,162,39,.4);
}

/* As de tras nao recebem clique nem foco de teclado — o JS marca. */
.mods__c[aria-hidden="true"]{ opacity:0; pointer-events:none; }
.mods__c:not(.is-active){ cursor:pointer; }
.mods__c:not(.is-active):hover{ filter:brightness(.82) saturate(.94); }

.mods__c img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease);
}
.mods__c.is-active:hover img{ transform:scale(1.04); }

/* Vinheta que ancora o selo e o titulo sobre a arte. */
.mods__c::after{
  content:''; position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(transparent,rgba(8,8,10,.86));
  opacity:0; transition:opacity .5s var(--ease);
  pointer-events:none;
}
.mods__c.is-active::after{ opacity:1; }

.mods__n{
  position:absolute; left:14px; top:14px; z-index:2;
  padding:6px 12px; border-radius:999px;
  font-family:var(--f-disp); font-size:.6rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark);
  background:rgba(8,8,10,.62);
  border:1px solid rgba(239,215,154,.28);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}
.mods__c--bonus .mods__n{
  color:var(--ink); background:var(--gold-grad); border-color:transparent;
}

/* O titulo so aparece na capa central: nas laterais competiria com a arte
   e ficaria ilegivel na rotacao. */
.mods__t{
  position:absolute; left:16px; right:16px; bottom:15px; z-index:2;
  font-family:var(--f-disp); font-size:.83rem; font-weight:600;
  line-height:1.35; letter-spacing:-.01em; color:var(--on-dark);
  text-wrap:balance;
  opacity:0; transform:translateY(9px);
  transition:opacity .5s var(--ease) .1s, transform .5s var(--ease) .1s;
}
.mods__c.is-active .mods__t{ opacity:1; transform:none; }

/* ── Setas, ao lado do palco ── */
.mods__arw{
  position:relative; z-index:12; flex:0 0 auto;
  width:clamp(42px,4.4vw,54px); aspect-ratio:1;
  display:grid; place-items:center; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.6); border:1px solid var(--hr-light);
  color:var(--on-light);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .35s, border-color .35s, color .35s, transform .35s var(--ease);
}
.mods__arw:hover{
  background:var(--ink); border-color:var(--ink); color:var(--cream);
  transform:scale(1.08);
}
.mods__arw:active{ transform:scale(.96); }
.mods__arw:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.mods__arw svg{ width:18px; height:18px; fill:currentColor; }

/* No celular as setas sobrepoem o palco: lado a lado elas espremeriam a
   capa central a ponto de a arte nao respirar. */
@media(max-width:719px){
  .mods-wrap{ gap:0; }
  .mods__arw{
    position:absolute; top:50%; translate:0 -50%;
    /* ⚠️ Aqui a seta fica SOBRE a capa lateral, que e escura. O fundo
       semitransparente do desktop desapareceria contra a arte — entao no
       celular ela ganha fundo solido e sombra propria. */
    background:rgba(245,240,231,.94);
    border-color:rgba(18,18,21,.14);
    box-shadow:0 10px 26px -10px rgba(8,8,10,.55);
  }
  .mods__arw--prev{ left:4px; }
  .mods__arw--next{ right:4px; }
}

/* ── Tracinhos ── */
.mods__dots{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:clamp(18px,2.4vw,26px);
}
.mods__dot{
  width:22px; height:3px; border-radius:2px; padding:0;
  background:rgba(18,18,21,.18); border:0; cursor:pointer;
  transition:background .4s, width .4s var(--ease);
}
.mods__dot:hover{ background:rgba(18,18,21,.34); }
.mods__dot[aria-selected="true"]{ width:42px; background:var(--gold); }
.mods__dot:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* ⚠️ SEM JS: nenhuma capa recebe `--i`, e todas ficariam empilhadas no
   centro. Aqui o palco vira uma fila simples e legivel — a secao continua
   cumprindo o papel de mostrar os modulos. */
.mods:not(.is-ready){
  height:auto; perspective:none; cursor:auto;
  display:flex; gap:14px; overflow-x:auto; padding-bottom:14px;
}
.mods:not(.is-ready) .mods__track{ position:static; display:flex; gap:14px; }
.mods:not(.is-ready) .mods__c{
  position:relative; left:auto; top:auto; margin:0; flex:0 0 auto;
  transform:none; filter:none;
}
.mods:not(.is-ready) .mods__t,
.mods:not(.is-ready) .mods__c::after{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  .mods__c{ transition:filter .2s linear, opacity .2s linear; }
  .mods__t{ transition:none; }
}

.conteudo__cta{ margin-top:clamp(40px,5vw,60px); text-align:center; }

/* ═══════════ 7 · PROVA ═══════════ */
.prova__grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
@media(min-width:900px){
  .prova__grid{ grid-template-columns:repeat(6,1fr); }
  .prova__grid .slot:nth-child(-n+2){ grid-column:span 3; min-height:236px; }
  .prova__grid .slot:nth-child(n+3){  grid-column:span 2; min-height:192px; }
}

.slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  min-height:170px; padding:30px 22px; border-radius:var(--r);
  border:1px dashed rgba(239,215,154,.26);
  background:
    repeating-linear-gradient(135deg,rgba(239,215,154,.028) 0 12px,transparent 12px 24px),
    rgba(255,255,255,.018);
  text-align:center;
  transition:border-color .4s, background-color .4s;
}
.slot:hover{ border-color:rgba(239,215,154,.5); }
.slot__i{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:rgba(201,162,39,.11); border:1px solid rgba(239,215,154,.22);
}
.slot__i svg{
  width:21px; height:21px; fill:none; stroke:var(--gold-lt); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.slot--video .slot__i svg{ fill:var(--gold-lt); stroke:none; }
.slot__t{
  font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--on-dark-3);
}
.prova__note{
  margin-top:26px; text-align:center; font-size:.83rem; color:var(--on-dark-3); font-style:italic;
}

/* ═══════════ 8 · PARA QUEM É ═══════════ */
.quem{ text-align:center; }
.quem .eyebrow{ justify-content:center; }
.quem .h2{ margin-bottom:clamp(32px,4vw,46px); }

.quem__list{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-bottom:clamp(44px,6vw,66px);
}
.quem__list li{
  padding:11px 24px; border-radius:999px;
  border:1px solid rgba(201,162,39,.32); background:rgba(201,162,39,.07);
  font-family:var(--f-disp); font-size:.92rem; font-weight:600; letter-spacing:-.01em;
  color:var(--on-light);
  transition:transform .35s var(--ease), background-color .35s, border-color .35s;
}
.quem__list li:hover{ transform:translateY(-3px); background:rgba(201,162,39,.15); border-color:rgba(201,162,39,.55); }

.quem__split{ display:grid; gap:clamp(26px,4vw,46px); align-items:center; text-align:left; }
@media(min-width:760px){ .quem__split{ grid-template-columns:1fr 1.25fr; } }
.quem__fig{ margin:0; }
.quem__fig img{
  width:100%; border-radius:var(--r);
  box-shadow:0 30px 60px -30px rgba(18,18,21,.5);
}
.quem__txt p{ font-size:clamp(1rem,1.6vw,1.11rem); color:var(--on-light-2); line-height:1.7; }
.quem__txt p + p{ margin-top:18px; }

/* ═══════════ 9 · A OFERTA ═══════════ */
.oferta{ text-align:center; }
.oferta .eyebrow{ justify-content:center; }
.oferta .s__head{ margin-inline:auto; }
.oferta .s__sub{ margin-inline:auto; text-align:center; }
.oferta__orb{
  position:absolute; left:50%; top:-16%; width:min(1150px,132%); translate:-50% 0;
  opacity:.6; mix-blend-mode:screen; z-index:-1; pointer-events:none;
}

.offer{ display:grid; gap:18px; text-align:left; }
@media(min-width:900px){ .offer{ grid-template-columns:1.12fr .88fr; align-items:stretch; } }

.offer__list{
  padding:clamp(30px,4vw,44px); border-radius:var(--r);
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--hr-dark);
}
.offer__lt{
  font-family:var(--f-disp); font-size:.74rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt);
  margin-bottom:26px;
}
.offer__list ul{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.offer__list li{
  position:relative; padding-left:30px; font-size:.97rem; color:var(--on-dark);
}
.offer__list li::before{
  content:''; position:absolute; left:0; top:.34em;
  width:18px; height:18px; border-radius:50%;
  background:rgba(201,162,39,.15); border:1px solid rgba(239,215,154,.35);
}
.offer__list li::after{
  content:''; position:absolute; left:5.5px; top:.72em;
  width:7px; height:4px; border-left:1.6px solid var(--gold-lt); border-bottom:1.6px solid var(--gold-lt);
  rotate:-45deg;
}
.offer__for{
  margin-top:30px; padding-top:24px; border-top:1px solid var(--hr-dark);
  font-size:.88rem; color:var(--on-dark-2);
}
.offer__for b{ color:var(--gold-lt); font-weight:600; }

.offer__card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(32px,4vw,44px); border-radius:var(--r); text-align:center;
  background:linear-gradient(170deg,rgba(239,215,154,.13),rgba(201,162,39,.03) 46%,rgba(255,255,255,.02));
  border:1px solid rgba(239,215,154,.3);
  box-shadow:0 30px 70px -34px rgba(201,162,39,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
.offer__cut{
  position:absolute; right:-16%; bottom:0; width:60%;
  opacity:.11; pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);
          mask-image:linear-gradient(#000 40%,transparent);
}
.offer__card > *:not(.offer__cut){ position:relative; z-index:1; }

.offer__k{
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-dark-2); margin-bottom:6px;
}
.offer__price{
  font-family:var(--f-disp); font-size:clamp(4.2rem,11vw,6rem); font-weight:800;
  line-height:1; letter-spacing:-.06em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.offer__cur{ font-size:.36em; font-weight:600; letter-spacing:-.02em; vertical-align:.9em; margin-right:.1em; }
.offer__note{
  margin-top:8px; margin-bottom:30px;
  font-size:.85rem; letter-spacing:.05em; color:var(--on-dark-2);
}
.offer__fine{ margin-top:18px; font-size:.78rem; color:var(--on-dark-3); line-height:1.5; }

/* ═══════════ 10 · FAQ ═══════════ */
.faq .eyebrow{ justify-content:center; }
.faq .s__head{ text-align:center; margin-inline:auto; }

.acc{ border-top:1px solid var(--hr-light); }
.acc__i{ border-bottom:1px solid var(--hr-light); }
.acc__i summary{
  position:relative; display:flex; align-items:center; gap:20px;
  padding:26px 44px 26px 0; cursor:pointer; list-style:none;
  font-family:var(--f-disp); font-size:clamp(1rem,1.9vw,1.15rem); font-weight:600;
  letter-spacing:-.02em; color:var(--on-light);
  transition:color .3s;
}
.acc__i summary::-webkit-details-marker{ display:none; }
.acc__i summary:hover{ color:var(--gold-dk); }

.acc__x{
  position:absolute; right:4px; top:50%; translate:0 -50%;
  width:22px; height:22px; flex:none;
}
.acc__x::before,.acc__x::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--gold-dk);
  transition:transform .4s var(--ease), opacity .3s;
}
.acc__x::before{ width:14px; height:1.6px; translate:-50% -50%; }
.acc__x::after{ width:1.6px; height:14px; translate:-50% -50%; }
.acc__i[open] .acc__x::after{ transform:rotate(90deg); opacity:0; }

.acc__b{
  overflow:hidden;
  animation:open .45s var(--ease);
}
.acc__b p{
  padding-bottom:28px; padding-right:44px; max-width:72ch;
  font-size:1rem; color:var(--on-light-2); line-height:1.72;
}
@keyframes open{ from{ opacity:0; transform:translateY(-8px); } }

/* ═══════════ 11 · FECHAMENTO ═══════════ */
.fim{ text-align:center; }
.fim__aura{
  position:absolute; left:50%; bottom:-38%; width:min(1500px,150%); translate:-50% 0;
  opacity:.55; mix-blend-mode:screen; z-index:-1; pointer-events:none; rotate:180deg;
}
.fim__h{
  font-family:var(--f-disp); font-weight:700; letter-spacing:-.03em; line-height:1.2;
  font-size:clamp(1.6rem,3.9vw,2.75rem); color:var(--on-dark);
  margin-bottom:clamp(34px,4.5vw,48px); text-wrap:balance;
}
.fim__fine{ margin-top:20px; font-size:.83rem; color:var(--on-dark-3); }

/* ═══════════ FOOTER ═══════════ */
.ft{ background:var(--ink); border-top:1px solid var(--hr-dark); padding-block:44px; }
.ft__in{
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;
}
.ft__brand{ display:flex; flex-direction:column; gap:3px; }
.ft__brand strong{ font-family:var(--f-disp); font-size:.95rem; font-weight:600; }
.ft__brand span{ font-size:.79rem; color:var(--on-dark-3); }
.ft__cr{ font-size:.76rem; letter-spacing:.09em; color:var(--on-dark-3); text-transform:uppercase; }
.ft__cr b{ color:var(--gold-lt); font-weight:600; }
/* O credito e um link: precisa parecer clicavel sem virar um link berrante
   no rodape. O sublinhado so aparece no hover. */
.ft__rc{ color:inherit; text-decoration:none; transition:opacity .3s; }
.ft__rc:hover{ opacity:.78; }
.ft__rc:hover b{ text-decoration:underline; text-underline-offset:3px; }
.ft__rc:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }

/* ═══════════ CTA fixo mobile ═══════════ */
.bar{
  position:fixed; inset:auto 0 0 0; z-index:99;
  background:rgba(8,8,10,.9); backdrop-filter:blur(18px);
  border-top:1px solid var(--hr-dark);
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  transform:translateY(102%); transition:transform .45s var(--ease);
}
.bar.is-on{ transform:translateY(0); }
.bar__in{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.bar__p{ display:flex; flex-direction:column; line-height:1.15; }
.bar__p span{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-3); }
.bar__p b{
  font-family:var(--f-disp); font-size:1.35rem; font-weight:700; letter-spacing:-.03em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bar .btn{ --bh:48px; padding-inline:22px; font-size:.88rem; }
@media(min-width:900px){ .bar{ display:none; } }

/* ═══════════ animação de entrada ═══════════ */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease) var(--d,0s), transform .8s var(--ease) var(--d,0s);
  will-change:opacity,transform;
}
.reveal.in{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ═══════════ ajustes finos mobile ═══════════ */
@media(max-width:939px){
  .hero__in{ text-align:center; }
  .hero__copy{ order:1; }
  .hero__fig{ order:2; max-width:440px; margin-inline:auto; }
  .eyebrow{ justify-content:center; }
  .hero__sub{ margin-inline:auto; }
  .hero__cta{ justify-content:center; }
  .hero__facts{ justify-content:center; text-align:center; }
  .hero__badge{ right:0; }
}
@media(max-width:620px){
  body{ font-size:16px; }
  /* eyebrow cabe em uma linha */
  .eyebrow{ font-size:.66rem; letter-spacing:.15em; gap:8px; margin-bottom:18px; }
  /* etapas ocupam a largura toda */
  .steps__i{ padding:30px 0; }
  .btn{ --bh:54px; padding-inline:24px; font-size:.92rem; }
  .btn--lg{ --bh:58px; padding-inline:28px; font-size:.96rem; width:100%; }
  .hero__cta .btn{ width:100%; }
  .hero__badge{ position:static; margin-top:16px; align-items:center; }
  .mentora__fig figcaption{ left:12px; right:12px; bottom:12px; }
  .s__head{ margin-bottom:38px; }
}

/* ═══════════ Mini-player flutuante ═══════════ */
/*
   Quando a pessoa da play e rola a pagina, o video acompanha num canto em
   vez de ficar para tras. Portado da versao anterior da landing, com as
   mesmas defesas: so aparece se estiver realmente tocando, tem botao de
   fechar, e nunca cobre a barra de CTA do celular.
*/
.pip{
  position:fixed; z-index:80;
  right:clamp(14px,2.2vw,26px); bottom:clamp(14px,2.2vw,26px);
  width:clamp(190px,21vw,268px); aspect-ratio:16/9;
  border-radius:14px; overflow:hidden;
  background:#000;
  border:1px solid rgba(239,215,154,.3);
  box-shadow:0 26px 54px -18px rgba(0,0,0,.72);
  /* Nasce fora de cena e entra por transform: opacity sozinha deixaria o
     elemento clicavel antes de aparecer. */
  opacity:0; transform:translateY(14px) scale(.96); pointer-events:none;
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}
.pip.is-on{ opacity:1; transform:none; pointer-events:auto; }
.pip video{ width:100%; height:100%; object-fit:cover; display:block; }

/* ⚠️ No celular a barra fixa de CTA ocupa o rodape. Sem esta folga o
   mini-player cobriria justamente o botao de comprar.
   A altura vem da soma real da barra — 11px de padding em cima e embaixo,
   o botao de 48px e a safe-area do iPhone — e nao de um numero chutado,
   que sairia errado no primeiro ajuste de padding. */
@media(max-width:860px){
  .pip{
    bottom:calc(48px + 22px + env(safe-area-inset-bottom) + 14px);
    width:min(46vw,210px);
  }
}

.pip__x{
  position:absolute; top:6px; right:6px; z-index:2;
  width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; cursor:pointer;
  background:rgba(8,8,10,.66); border:1px solid rgba(246,242,234,.2);
  color:var(--on-dark); font-size:15px; line-height:1;
  transition:background .3s, transform .3s;
}
.pip__x:hover{ background:rgba(8,8,10,.9); transform:scale(1.08); }

/* Volta ao video principal ao clicar no corpo do mini-player. */
.pip__go{
  position:absolute; inset:0; z-index:1;
  border:0; background:transparent; cursor:pointer;
}

@media(prefers-reduced-motion:reduce){
  .pip{ transition:opacity .2s linear; transform:none; }
  .pip.is-on{ transform:none; }
}