/* Fallbacks com métricas ajustadas, derivados da Arial.
   Servem só para o intervalo em que a Inter e a Outfit ainda estão
   baixando: ocupam exatamente o mesmo espaço que as fontes reais, então
   nada se mexe quando elas chegam. Os números saíram de medição no
   navegador (largura média do texto da página, ascent, descent e
   entrelinha normal de cada peso). Se trocar de fonte, remeça. */
@font-face{
  font-family:"Inter fallback";
  font-style:normal;
  font-weight:400;
  src:local("Arial");
  size-adjust:105.87%;
  ascent-override:91.53%;
  descent-override:22.76%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Inter fallback";
  font-style:normal;
  font-weight:500;
  src:local("Arial");
  size-adjust:106.69%;
  ascent-override:90.83%;
  descent-override:22.59%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Inter fallback";
  font-style:normal;
  font-weight:600;
  src:local("Arial");
  size-adjust:107.5%;
  ascent-override:90.14%;
  descent-override:22.42%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Inter fallback";
  font-style:normal;
  font-weight:700;
  src:local("Arial");
  size-adjust:108.3%;
  ascent-override:89.47%;
  descent-override:22.25%;
  line-gap-override:0%;
}
@font-face{
  /* O peso 800 só aparece em dois títulos grandes, o do hero e o do
     fechamento. Aqui o size-adjust não segue a largura média do texto
     (que seria 109,3%) e sim o valor que faz esses dois títulos quebrarem
     no mesmo número de linhas que a Inter de verdade, conferido de 340px
     a 1440px. É isso que impede a página de pular quando a fonte chega. */
  font-family:"Inter fallback";
  font-style:normal;
  font-weight:800;
  src:local("Arial");
  size-adjust:108.9%;
  ascent-override:88.98%;
  descent-override:22.13%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Outfit fallback";
  font-style:normal;
  font-weight:400;
  src:local("Arial");
  size-adjust:98.45%;
  ascent-override:101.58%;
  descent-override:26.41%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Outfit fallback";
  font-style:normal;
  font-weight:500;
  src:local("Arial");
  size-adjust:98.4%;
  ascent-override:101.63%;
  descent-override:26.42%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Outfit fallback";
  font-style:normal;
  font-weight:600;
  src:local("Arial");
  size-adjust:99.78%;
  ascent-override:100.23%;
  descent-override:26.06%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Outfit fallback";
  font-style:normal;
  font-weight:700;
  src:local("Arial");
  size-adjust:101.11%;
  ascent-override:98.9%;
  descent-override:25.71%;
  line-gap-override:0%;
}

/* Layout: a página começa no mundo Órbita (escuro, explica o imposto) e atravessa para o mundo molPay (claro, quente) na virada. */
:root{
  --space:#070A13; --space-2:#0B111E; --night:#1C2F4D; --line-d:#20283C;
  --blue:#1F8FFF; --blue-2:#0099E6; --ice:#F8FAFC; --mist:#7588A3;
  --navy:#233D4C; --orange:#FD802E; --cream:#FAF7F2; --fog:#DCE5EA; --peach:#FFE3CF; --slate:#5B6F7B;
  --f-body:"Inter","Inter fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mp:"Outfit","Outfit fallback","Inter","Inter fallback",system-ui,sans-serif;
  /* Largura do glifo "0" de cada fonte, em em. Substitui a unidade ch, que
     muda junto com a fonte que está na tela e, por isso, remexia o layout
     enquanto a Inter e a Outfit ainda baixavam. Os valores são os mesmos
     que o ch resolvia com as fontes reais, então o resultado na tela é
     idêntico. Medidos no navegador; se trocar de fonte, remeça. */
  --ch-inter:0.630859em;
  --ch-inter-800:0.691894em;
  --ch-outfit-600:0.66em;
  --ch-outfit-500:0.655em;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--space);color:var(--ice);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
section{padding-block:56px}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:12px;font:600 16px/1 var(--f-body);text-decoration:none;border:0;cursor:pointer;transition:transform .15s,filter .15s}
.btn:active{transform:scale(.98)}
.btn-blue{background:linear-gradient(90deg,var(--blue),var(--blue-2));color:#fff}
.btn-ghost{background:transparent;color:var(--ice);border:1px solid var(--line-d)}
.btn-orange{background:var(--orange);color:#fff}
.btn-navy{background:var(--navy);color:#fff}

/* header */
header{padding-block:18px;border-bottom:1px solid var(--line-d)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
header img{height:26px;width:auto}
header span{font-size:12px;color:var(--mist)}

/* hero */
.hero{padding-block:44px 52px;background:radial-gradient(120% 80% at 100% 0%,rgba(31,143,255,.16),transparent 60%),var(--space)}
.hero h1{font-size:clamp(32px,8.4vw,52px);line-height:1.05;font-weight:800;margin-top:14px}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .sub{margin-top:18px;font-size:18px;color:#C9D3E1;max-width:calc(34 * var(--ch-inter))}
.hero .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero .ctas .btn{flex:1 1 220px}

/* o que é */
.what{background:var(--space-2)}
.what h2,.cash h2{font-size:clamp(24px,6vw,32px);font-weight:700;margin-top:10px}
.lead{margin-top:16px;color:#C9D3E1;max-width:calc(60 * var(--ch-inter))}
.lead strong{color:var(--ice)}
.timeline{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line-d)}
.timeline .when{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ice);font-size:14px}
.timeline .what-t{font-size:15px;color:#C9D3E1;min-width:0}
.tag{display:inline-block;margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.tag.of{background:var(--night);color:#8EC5FF;border:1px solid #2C4A75}
.tag.pr{background:transparent;color:var(--mist);border:1px dashed #3A4660}
.note{margin-top:14px;font-size:12px;color:var(--mist)}

/* caixa */
.cash{background:var(--space-2);padding-top:8px}
.pains{display:grid;gap:12px;margin-top:22px}
.pain{padding:18px;border-radius:14px;background:var(--space);border:1px solid var(--line-d)}
.pain h3{font-size:17px;font-weight:600}
.pain p{margin-top:6px;font-size:15px;color:#C9D3E1}

/* virada */
.turn{padding-block:64px 72px;background:var(--navy);border-top:4px solid var(--orange)}
.turn p{font-family:var(--f-mp);font-size:clamp(26px,6.6vw,38px);line-height:1.15;font-weight:600;letter-spacing:-.01em;color:#fff;text-wrap:balance;max-width:calc(20 * var(--ch-outfit-600))}
.turn p span{color:var(--orange)}
.turn .mas{font-family:var(--f-mp);font-size:clamp(40px,11vw,60px);line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--orange);max-width:none}
.turn .break{font-family:var(--f-mp);font-size:clamp(22px,5.8vw,30px);line-height:1.2;font-weight:500;letter-spacing:-.01em;color:#fff;margin-top:12px;max-width:none}
.turn .rule{width:56px;height:2px;background:rgba(255,255,255,.25);margin:32px 0 28px}
.turn .stmt{font-weight:600;color:#fff}
.turn .stmt span{color:var(--peach)}

/* mundo molPay */
.mp{background:var(--cream);color:var(--navy);color-scheme:light}
.mp .eyebrow{color:#B85410}
.mp h2{font-family:var(--f-mp);font-size:clamp(26px,6.4vw,36px);font-weight:600;margin-top:10px;line-height:1.1}
.mp .lead{color:var(--slate)}
.mp .lead strong{color:var(--navy)}
.mplogo{height:34px;width:auto;margin-bottom:18px}
.cmp{margin-top:26px;border-radius:16px;overflow:hidden;border:1px solid var(--fog);background:#fff}
.cmp-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--fog)}
.cmp-row:first-child{border-top:0}
.cmp-row>div{padding:14px;min-width:0}
.cmp-row .k{grid-column:1/-1;padding:12px 14px 0;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.cmp-head>div{font-family:var(--f-mp);font-weight:600;font-size:15px}
.cmp-head .gov{background:#EEF2F5;color:var(--slate)}
.cmp-head .us{background:var(--navy);color:#fff}
.cmp .gov-v{color:var(--slate);font-size:15px;padding-top:6px}
.cmp .us-v{font-weight:600;font-size:15px;padding-top:6px;background:#FFF6EE}

/* fluxo do dinheiro */
/* O caminho do dinheiro se acende em sequência, num ciclo de 5s:
   cliente -> linha -> divisão -> bifurcação -> revenda e você. */
.flow{--path:#C3CFD7;--glow:rgba(253,128,46,.35);--t:5s;margin:26px 0 0;padding:20px 16px 18px;border-radius:16px;background:#fff;border:1px solid var(--fog)}
.flow .k{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.flow .node{margin:0 auto;max-width:300px;text-align:center;padding:12px 14px;border-radius:12px;background:var(--cream);border:1px solid var(--fog)}
.flow .node b{display:block;font-family:var(--f-mp);font-size:18px;font-weight:600;margin-top:4px;line-height:1.25}
.flow .node span.s{display:block;font-size:13px;color:var(--slate);margin-top:2px}
.flow .down{position:relative;width:2px;height:26px;margin:0 auto;background:var(--path) linear-gradient(var(--orange),var(--orange)) no-repeat top/100% 0}
.flow .down::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);border:6px solid transparent;border-top:7px solid var(--path);border-bottom:0}
.flow .split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:30px}
.flow .split::before{content:"";position:absolute;left:50%;top:0;width:2px;height:15px;margin-left:-1px;background:var(--path) linear-gradient(var(--orange),var(--orange)) no-repeat top/100% 0}
.flow .split::after{content:"";position:absolute;top:14px;left:calc(25% - 2px);right:calc(25% - 2px);height:2px;background:var(--path) linear-gradient(var(--orange),var(--orange)) no-repeat center/0 100%}
.flow .branch{position:relative;text-align:center;padding:16px 10px;border-radius:12px;background:var(--cream);border:1px solid var(--fog);min-width:0}
.flow .branch::before{content:"";position:absolute;left:50%;top:-16px;width:2px;height:16px;margin-left:-1px;background:var(--path) linear-gradient(var(--orange),var(--orange)) no-repeat top/100% 0}
.flow .branch .k{margin-bottom:6px}
.flow .dest{font-family:var(--f-mp);font-size:clamp(16px,4.4vw,19px);font-weight:600;line-height:1.2}
.flow .branch.you{background:var(--navy);border-color:var(--navy);color:#fff}
.flow .branch.you .k{color:#C7D3DB}
.flow .branch.you .dest{color:var(--orange)}
.flow figcaption{margin-top:14px;font-size:12px;color:var(--slate);text-align:center}
.flow .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--fog)}
.flow .tags span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;background:var(--peach);color:#7A3A0C}
.flow .tags span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}

@keyframes fl-n1{0%,3%{box-shadow:0 0 0 0 transparent;border-color:var(--fog)}8%,30%{box-shadow:0 0 0 4px var(--glow);border-color:var(--orange)}38%,100%{box-shadow:0 0 0 0 transparent;border-color:var(--fog)}}
@keyframes fl-down{0%,10%{background-size:100% 0}24%,88%{background-size:100% 100%}96%,100%{background-size:100% 0}}
@keyframes fl-arrow{0%,22%{border-top-color:var(--path)}24%,88%{border-top-color:var(--orange)}96%,100%{border-top-color:var(--path)}}
@keyframes fl-n2{0%,24%{box-shadow:0 0 0 0 transparent;border-color:var(--fog)}29%,52%{box-shadow:0 0 0 4px var(--glow);border-color:var(--orange)}60%,100%{box-shadow:0 0 0 0 transparent;border-color:var(--fog)}}
@keyframes fl-stem{0%,32%{background-size:100% 0}40%,88%{background-size:100% 100%}96%,100%{background-size:100% 0}}
@keyframes fl-bar{0%,40%{background-size:0 100%}50%,88%{background-size:100% 100%}96%,100%{background-size:0 100%}}
@keyframes fl-leg{0%,50%{background-size:100% 0}58%,88%{background-size:100% 100%}96%,100%{background-size:100% 0}}
@keyframes fl-rev{0%,58%{box-shadow:0 0 0 0 transparent;border-color:var(--fog)}64%,86%{box-shadow:0 0 0 4px var(--glow);border-color:var(--orange)}94%,100%{box-shadow:0 0 0 0 transparent;border-color:var(--fog)}}
@keyframes fl-you{0%,58%{box-shadow:0 0 0 0 transparent;transform:none}64%,86%{box-shadow:0 0 0 5px var(--glow),0 8px 24px rgba(253,128,46,.25);transform:translateY(-2px)}94%,100%{box-shadow:0 0 0 0 transparent;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .flow .node:first-child{animation:fl-n1 var(--t) ease-in-out infinite}
  .flow .down{animation:fl-down var(--t) linear infinite}
  .flow .down::after{animation:fl-arrow var(--t) linear infinite}
  .flow .node.mid{animation:fl-n2 var(--t) ease-in-out infinite}
  .flow .split::before{animation:fl-stem var(--t) linear infinite}
  .flow .split::after{animation:fl-bar var(--t) linear infinite}
  .flow .branch::before{animation:fl-leg var(--t) linear infinite}
  .flow .branch:not(.you){animation:fl-rev var(--t) ease-in-out infinite}
  .flow .branch.you{animation:fl-you var(--t) ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
  .flow .down,.flow .split::before,.flow .branch::before{background-size:100% 100%}
  .flow .split::after{background-size:100% 100%}
  .flow .down::after{border-top-color:var(--orange)}
}

/* por que molPay: a objecao da maquininha */
.why{background:#fff;color:var(--navy);color-scheme:light;border-top:1px solid var(--fog)}
.why .eyebrow{color:#B85410}
.why .obj{font-family:var(--f-mp);font-size:clamp(20px,5.4vw,26px);line-height:1.25;font-weight:500;color:var(--slate);margin-top:14px;padding-left:16px;border-left:3px solid var(--fog);max-width:calc(28 * var(--ch-outfit-500))}
.why h2{font-family:var(--f-mp);font-size:clamp(26px,6.4vw,36px);font-weight:600;line-height:1.1;margin-top:18px}
.why h2 span{color:#B85410}
.why .lead{color:var(--slate)}
/* moldura de notebook: tela com bezel escuro e câmera, base mais larga com o entalhe */
.laptop{margin:30px 0 0}
.lap-screen{position:relative;margin:0 6%;padding:12px 8px 8px;background:#1B262E;border:1px solid #0E161C;border-bottom:0;border-radius:22px 22px 4px 4px;box-shadow:0 18px 40px rgba(35,61,76,.18)}
.lap-screen::before{content:"";position:absolute;top:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#3C4C58}
.lap-screen img{display:block;width:100%;height:auto;border-radius:6px}
.lap-base{position:relative;height:12px;background:linear-gradient(#EEF1F4 0%,#D3DAE0 55%,#AAB5BE 100%);border-radius:3px 3px 50% 50% / 3px 3px 100% 100%;box-shadow:0 10px 18px rgba(35,61,76,.16)}
.lap-base::before{content:"";position:absolute;top:0;left:50%;width:18%;height:5px;transform:translateX(-50%);background:#A3AEB7;border-radius:0 0 8px 8px}
.laptop figcaption{margin-top:16px;font-size:12px;color:var(--slate);text-align:center}
.vs{margin-top:26px;display:grid;gap:0;border-radius:16px;overflow:hidden;border:1px solid var(--fog)}
.vs-row{display:grid;grid-template-columns:1fr 1fr}
.vs-row>div{padding:12px 14px;font-size:14px;line-height:1.35;min-width:0}
.vs-row .k2{grid-column:1/-1;padding:12px 14px 0;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);background:#fff}
.vs-row .a{background:#fff;color:var(--slate);padding-top:6px}
.vs-row .b{background:#FFF6EE;font-weight:600;padding-top:6px}
.vs-row+.vs-row{border-top:1px solid var(--fog)}
.vs-head>div{font-family:var(--f-mp);font-weight:600;font-size:15px;padding:12px 14px}
.vs-head .a{background:#EEF2F5;color:var(--slate)}
.vs-head .b{background:var(--navy);color:#fff}
.why .close{margin-top:28px;font-family:var(--f-mp);font-size:clamp(20px,5.2vw,26px);line-height:1.3;font-weight:500;color:var(--slate);max-width:calc(30 * var(--ch-outfit-500))}
.why .close b{color:var(--navy);font-weight:600}


/* simulador */
.sim{background:var(--navy);color:#fff;color-scheme:dark}
.sim .eyebrow{color:var(--orange)}
.sim h2{font-family:var(--f-mp);font-size:clamp(26px,6.4vw,36px);font-weight:600;margin-top:10px;line-height:1.1}
.sim .lead{color:#C7D3DB}
.card{margin-top:24px;background:#fff;color:var(--navy);border-radius:18px;padding:22px;color-scheme:light}
.q{font-family:var(--f-mp);font-size:20px;font-weight:600;line-height:1.25}
.yn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.yn .btn{background:var(--cream);color:var(--navy);border:1px solid var(--fog)}
.yn .btn[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.field{display:grid;gap:6px;margin-top:18px}
.field label{font-size:14px;font-weight:600}
.field .hint{font-size:12px;color:var(--slate)}
.field input{width:100%;min-height:50px;padding:0 14px;border-radius:10px;border:1px solid #C9D5DC;background:var(--cream);color:var(--navy);font:500 17px var(--f-mp);font-variant-numeric:tabular-nums}
.field input:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.range{display:flex;align-items:center;gap:12px}
.range input[type=range]{flex:1;accent-color:var(--orange);min-height:auto;padding:0;border:0;background:transparent}
.range output{font:600 17px var(--f-mp);min-width:48px;text-align:right;font-variant-numeric:tabular-nums}
.result{margin-top:22px;padding:20px;border-radius:14px;background:var(--peach)}
.result .lab{font-size:13px;font-weight:600;color:#9A4A12}
.result .big{font-family:var(--f-mp);font-weight:700;font-size:clamp(28px,8vw,40px);line-height:1.05;margin-top:6px;font-variant-numeric:tabular-nums}
.result .big small{font-size:.5em;font-weight:500}
.result .yr{margin-top:6px;font-size:14px;color:#7A4A28}
.result .disc{margin-top:10px;font-size:12px;color:#7A4A28}
.out{margin-top:16px;padding:16px;border-radius:12px;background:var(--cream);font-size:15px;color:var(--slate)}
.lockbox{margin-top:22px;border-top:1px solid var(--fog);padding-top:6px}
.lockbox .btn{width:100%;margin-top:18px}
.tiny{margin-top:10px;font-size:12px;color:var(--slate);text-align:center}
.ok{margin-top:18px;padding:18px;border-radius:12px;background:#EAF6EF;color:#1D5A3A}
.ok b{display:block;font-family:var(--f-mp);font-size:18px}
.ok .btn{margin-top:14px;width:100%}
.err{color:#B3261E;font-size:13px;margin-top:6px}

/* benefícios */
.bens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.ben{background:#fff;border:1px solid var(--fog);border-radius:14px;padding:16px}
.ben .n{font-family:var(--f-mp);font-weight:700;color:var(--orange);font-size:22px}
.ben h3{font-family:var(--f-mp);font-size:17px;font-weight:600;margin-top:6px;line-height:1.2}
.ben p{font-size:14px;color:var(--slate);margin-top:6px}
@media (max-width:420px){.bens{grid-template-columns:1fr}}

/* faq */
.faq{margin-top:22px;border-top:1px solid var(--fog)}
.faq details{border-bottom:1px solid var(--fog)}
.faq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;font-family:var(--f-mp);font-weight:600;font-size:17px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:24px;color:var(--orange);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;color:var(--slate);font-size:15px}
.faq details.first{background:#FFF6EE;margin-inline:-12px;padding-inline:12px;border-radius:10px}

/* quem */
.who{background:var(--space);color:var(--ice)}
.who img{height:28px;width:auto}
.who h2{font-size:clamp(22px,5.6vw,30px);font-weight:700;margin-top:22px}
.who .lead{color:#C9D3E1}
.verts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.verts span{font-size:13px;padding:7px 12px;border-radius:999px;background:var(--night);border:1px solid #2C4A75;color:#CFE4FF}
.verts span.on{background:#1668CC;border-color:#1668CC;color:#fff}

/* final */
.final{background:linear-gradient(180deg,var(--space),var(--space-2));text-align:left;padding-bottom:120px}
.final h2{font-size:clamp(26px,6.6vw,38px);font-weight:800;line-height:1.08}
.final .lead{color:#C9D3E1}
.final .btn{margin-top:24px;width:100%}
footer{border-top:1px solid var(--line-d);padding-block:24px 110px;font-size:12px;color:var(--mist);background:var(--space-2)}
footer p+p{margin-top:8px}

/* barra fixa */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(7,10,19,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line-d);transform:translateY(0);transition:transform .25s}
.dock.hide{transform:translateY(120%)}
.dock .btn{width:100%;max-width:680px;display:flex;margin:0 auto}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* campo isca antispam: fora da tela, invisível para quem usa a página */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==================================================================
   Tablet, de 640px a 959px.
   ================================================================== */
@media (min-width:640px) and (max-width:959px){
  .pains{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bens{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==================================================================
   Computador, a partir de 960px.
   Nada daqui para baixo alcança o celular: o layout aprovado em
   390px continua exatamente como está.

   As colunas fixas (simulador e FAQ) empilham os itens da esquerda
   dentro de uma única célula do grid, deslocados por margin-top, e
   grudam em tops que repetem esses mesmos deslocamentos. Assim eles
   sobem juntos, como um bloco só, sem precisar de um elemento que
   os envolva. Isso depende da altura do título do simulador, que com o
   texto atual ocupa 3 linhas em toda a faixa de computador, de 960px
   para cima. Se esse título mudar, remeça e ajuste --sim-h2-h.
   ================================================================== */
@media (min-width:960px){
  :root{
    --col-gap:72px;
    --sticky-top:32px;
    --eyebrow-h:18.6px;   /* 12px x 1.55 de entrelinha */
    --sim-h2-h:118.8px;   /* 3 linhas de 36px x 1.1 */
  }

  .wrap{max-width:1120px}

  /* marcas um pouco maiores, que a tela comporta */
  header img{height:32px}
  .mplogo{height:48px}

  .what .wrap,
  .mp:has(.cmp) .wrap,
  .sim .wrap,
  .mp:has(.faq) .wrap,
  .who .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--col-gap);
    align-items:start;
  }

  /* hero */
  .hero h1{font-size:clamp(52px,4.6vw,64px)}
  .hero .sub{max-width:calc(48 * var(--ch-inter))}
  .hero .ctas .btn{flex:0 0 auto;min-width:280px}

  /* o que é: texto à esquerda, linha do tempo e nota à direita */
  .what .wrap{grid-template-rows:auto auto 1fr auto}
  .what .eyebrow{grid-area:1/1}
  .what h2{grid-area:2/1}
  .what .lead{grid-area:3/1}
  .what .timeline{grid-area:1/2/4/3;margin-top:0}
  .what .note{grid-area:4/2/5/3;max-width:calc(65 * var(--ch-inter))}

  /* o que muda no caixa: três cartões lado a lado, mesma altura */
  .pains{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  .pain p{max-width:calc(65 * var(--ch-inter))}

  /* virada: "Mas..." à esquerda, a virada de chave à direita.
     As duas primeiras linhas ficam numa pilha só, e as faixas 1fr de cima
     e de baixo distribuem a sobra em partes iguais, que é o que centraliza
     a coluna da esquerda em relação à frase da direita. */
  .turn{padding-block:96px}
  .turn .wrap{
    display:grid;
    grid-template-columns:5fr 7fr;
    grid-template-rows:1fr auto auto 1fr;
    column-gap:64px;
    align-items:center;
  }
  .turn .mas{grid-area:2/1}
  .turn .break{grid-area:3/1}
  .turn .rule{display:none}
  .turn .stmt{
    grid-area:1/2/5/3;
    max-width:calc(30 * var(--ch-outfit-600));
    padding-left:48px;
    border-left:2px solid rgba(255,255,255,.25);
  }

  /* Programa de Mercado: texto e diagrama lado a lado e centrados entre si
     na primeira linha; o comparativo ocupa a largura toda embaixo */
  .mp:has(.cmp) .wrap{
    grid-template-columns:5fr 7fr;
    grid-template-rows:1fr auto auto auto auto 1fr auto;
    align-items:center;
  }
  .mp:has(.cmp) .mplogo{grid-area:2/1}
  .mp:has(.cmp) .eyebrow{grid-area:3/1}
  .mp:has(.cmp) h2{grid-area:4/1}
  .mp:has(.cmp) .lead{grid-area:5/1}
  .mp:has(.cmp) .flow{grid-area:1/2/7/3;margin-top:0;max-width:520px}
  .mp:has(.cmp) .cmp{grid-area:7/1/8/3;max-width:820px;margin-top:48px}

  /* por que molPay: a linha de cima divide 5 e 7, a de baixo divide 7 e 5.
     Duas divisões diferentes não cabem em duas colunas de grid, então a
     grade tem 12 faixas iguais sem espaçamento, e cada vão é feito com
     padding: metade de cada lado na linha de cima, e na linha de baixo o
     padding de 32px do próprio fecho, que também carrega a borda. */
  .why .wrap{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:1fr auto auto auto auto 1fr auto;
    column-gap:0;
    align-items:center;
  }
  .why .eyebrow,
  .why .obj,
  .why h2,
  .why .lead{grid-column:1/6;padding-right:calc(var(--col-gap) / 2)}
  .why .eyebrow{grid-row:2}
  .why .obj{grid-row:3}
  .why h2{grid-row:4}
  .why .lead{grid-row:5}
  .why .laptop{grid-column:6/13;grid-row:1/7;margin-top:0;padding-left:calc(var(--col-gap) / 2)}
  .why .vs{grid-column:1/8;grid-row:7;max-width:none;align-self:start}
  /* a mesma margem de topo da tabela, para o fecho centralizar na altura
     dela e não na da faixa inteira do grid */
  .why .close{
    grid-column:8/13;grid-row:7;align-self:center;margin-top:26px;
    padding-left:32px;border-left:2px solid var(--fog);
  }

  /* simulador: coluna da esquerda fixa, cartão rolando à direita */
  .sim .eyebrow,
  .sim h2,
  .sim .lead{grid-area:1/1;align-self:start;position:sticky}
  .sim .eyebrow{top:var(--sticky-top)}
  .sim h2{
    margin-top:calc(var(--eyebrow-h) + 10px);
    top:calc(var(--sticky-top) + var(--eyebrow-h) + 10px);
  }
  .sim .lead{
    margin-top:calc(var(--eyebrow-h) + 10px + var(--sim-h2-h) + 16px);
    top:calc(var(--sticky-top) + var(--eyebrow-h) + 10px + var(--sim-h2-h) + 16px);
  }
  .sim .card{grid-area:1/2;margin-top:0;width:100%;max-width:520px}

  /* benefícios da revenda: quatro colunas */
  .bens{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ben p{max-width:calc(65 * var(--ch-inter))}

  /* FAQ: título fixo à esquerda, perguntas à direita */
  .mp:has(.faq) .eyebrow,
  .mp:has(.faq) h2{grid-area:1/1;align-self:start;position:sticky}
  .mp:has(.faq) .eyebrow{top:var(--sticky-top)}
  .mp:has(.faq) h2{
    margin-top:calc(var(--eyebrow-h) + 10px);
    top:calc(var(--sticky-top) + var(--eyebrow-h) + 10px);
  }
  .mp:has(.faq) .faq{grid-area:1/2;margin-top:0}
  .faq details p{max-width:calc(65 * var(--ch-inter))}

  /* quem está por trás: marca à esquerda, texto e chips à direita,
     com as colunas mais próximas uma da outra */
  .who .wrap{
    grid-template-columns:4fr 8fr;
    grid-template-rows:auto auto auto;
    column-gap:48px;
    align-items:start;
  }
  .who img{grid-area:1/1}
  .who h2{grid-area:2/1}
  .who .lead{grid-area:1/2/3/3;margin-top:0}
  .who .verts{grid-area:3/2}

  /* fechamento: bloco centralizado */
  .final .wrap{text-align:center}
  .final h2{max-width:calc(22 * var(--ch-inter-800));margin-inline:auto}
  .final .lead{max-width:calc(52 * var(--ch-inter));margin-inline:auto}
  .final .btn{width:auto}

  /* a barra fixa é um padrão de celular; no computador sai de cena,
     junto com o espaço que existia só para ela não cobrir conteúdo */
  .dock{display:none}
  .final{padding-bottom:56px}
  footer{padding-block:24px}
}