/* ============================================================
   Metta — Mentoria · Programa Supere a Meta Todo Mês
   Camada exclusiva desta página. Estrutura do Figma 1069:3210
   (arquivo Site) e copy da reescrita no Notion de 04/09/2026.

   Onde os dois divergem, vale a copy do Notion: foi o pedido.
   As divergências estão anotadas no README.

   Uma normalização deliberada: o arquivo mistura margens de 71,
   80, 84, 90 e 125 entre as dobras, sobra de frames duplicados
   do wireframe antigo. Aqui tudo entra no container do site
   (1272 com margem de 84), que é o que as outras 22 páginas
   usam. Desvio máximo por bloco: 14px.

   Esta página usa a paleta antiga do wireframe (#283845 nos
   botões, #34444d no hero), diferente do #0c161b da sessão
   estratégica e de soluções.

   Prefixo mn- em tudo, para nada vazar para as outras páginas.
   ============================================================ */


.mn-in{
  width:min(var(--container), 100% - var(--gutter) * 2);
  margin:0 auto;
}

/* botão padrão desta página, Figma 1069:3410 */
/* serve de <a> e de <button>: os tres CTAs da pagina abrem o modal da
   aplicacao, entao o border:0 e o cursor precisam estar aqui, senao o
   navegador desenha a moldura padrao de botao */
.mn-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:0; cursor:pointer;
  padding:16px 28px; border-radius:100px;
  background:var(--painel); color:var(--branco);
  font-family:var(--texto); font-weight:500; font-size:14px; line-height:1.2;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             background-color .22s var(--ease);
}
.mn-btn:hover{
  background:#34444d; transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(40,56,69,.24);
}
/* 23/09, Figma node 1069:3611: só o botão "Ver os casos completos" da
   2ª dobra (Cases do programa) vira vazado -- os outros CTAs da página
   que usam .mn-btn (Fazer aplicação, Conhecer o programa, Ver todos os
   estudos de caso) continuam sólidos. Precisa das duas classes juntas
   pra vencer o .mn-btn sólido acima, que carrega depois de btn--contorno
   (styles.css) na ordem do <link>. */
.mn-btn.btn--contorno{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.mn-btn.btn--contorno:hover{
  background:var(--ink); color:var(--branco); transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(12,22,27,.18);
}

/* chapéu e cabeçalho de dobra, repetidos em cinco seções */
.mn-chapeu{
  font-family:var(--display); font-weight:500; font-size:12px; line-height:1.25;
  letter-spacing:.12px; text-transform:uppercase; color:var(--ink);
}
.mn-cab{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
}
.mn-cab h2{
  font-family:var(--display); font-weight:500; font-size:32px; line-height:1.16;
  color:var(--ink);
}
/* Regra de ouro desta folha: o chapéu, o número do sinal e o rótulo do
   nível são todos <p>, então um seletor ".bloco p" venceria a classe
   deles por especificidade e apagaria o estilo. Todo corpo de texto
   aqui tem classe própria. */
.mn-apoio{ font-size:16px; line-height:1.5; color:var(--apoio); }


/* ============================================================
   01 · HERO
   Figma 1069:3222 — 1440x742. O texto NAO e centralizado: fica numa
   coluna de 654 comecando em y=146, com a foto ocupando a direita.
   ============================================================ */
.mn-hero{
  position:relative; overflow:hidden;
  height:742px; background:#0c161b; color:var(--branco);
  /* coluna, e nao pilha de absolutos: a faixa nova (.mn-hero-faixa) e o
     bloco de texto (.mn-hero-in) sao os dois unicos filhos em fluxo
     normal, entao um empilha sobre o outro sem precisar de posicao
     propria. Arte, veu e banda de logos continuam absolutos e nao
     entram nessa conta. */
  display:flex; flex-direction:column;
}
/* Figma 1458:7353 (1350x660): a faixa sobe para o topo absoluto da
   dobra, como primeiro filho do e-painel. Ela nao tem border-radius
   proprio: quem arredonda os dois cantos de cima dela e o
   overflow:hidden do painel (v2.css), porque ela encosta exatamente na
   borda do container. Cor de fundo medida no export do Figma
   (222,233,239) bate com --assinatura a menos de 2 por canal; o texto
   bate exato com --ink. */
.mn-hero-faixa{
  flex:none; position:relative; z-index:3;
  display:flex; align-items:center; justify-content:center;
  height:46px; padding:0 20px;
  background:var(--assinatura);
  font-family:var(--texto); font-weight:700; font-size:15px; line-height:1.5;
  text-transform:uppercase; color:var(--ink); text-align:center;
  white-space:nowrap;
}
/* Figma "Hero", 1458:7566 (1350x660): quadro de exportacao novo, limpo,
   sem texto/menu/faixa por dentro, ja composto para preencher o painel
   inteiro. A caixa desta camada NAO e mais o hack de 124vw medido
   contra o quadro velho (1116:13579, que ficou para tras com a mulher
   de headset): quem manda na geometria agora e o v2.css
   (body.v2 .e-painel .mn-hero-arte{inset:0}), escrito quando a dobra
   virou e-painel em 15/09. Aqui so ficam as propriedades que aquela
   regra nao cobre. */
.mn-hero-arte{
  position:absolute; z-index:0; pointer-events:none; overflow:hidden;
}
/* A largura do painel segue --linha-site mas a altura fica travada em
   660 (default do e-painel): a razao da caixa cai de 1,93 (1440) para
   1,41 (1024). A arte nova (2700x1320, razao 2,05) e sempre mais larga
   que a caixa nessa faixa toda, entao o cover sempre ajusta pela altura
   e corta dos lados.
   "right" (100%) e o valor fiel ao arquivo: a composicao inteira (mulher
   e balao "Como foi o fechamento do mes?") fica onde o Figma desenhou.
   Ele so quebra numa faixa de tela media, onde a coluna de texto de
   654px (fixa) chega perto demais da mulher: essa faixa ganhou uma
   regra propria, largura de coluna elastica + posicao de imagem
   diferente, logo abaixo (@media 1024-1299px). Fora dela "right" e
   quem manda. O eixo vertical so entra em jogo acima de 1728px, onde
   --container trava em 1400 e a caixa passa a ser mais larga que a
   arte: "bottom" ai corta o topo (so fundo) e preserva a mao dela. */
.mn-hero-arte img{
  width:100%; height:100%; object-fit:cover; object-position:right bottom;
  display:block;
}
/* o veu sustenta o texto sobre a foto: fecha quase opaco na esquerda e
   some antes do rosto dela. Vive dentro da caixa da arte, entao
   acompanha o deslocamento dela. */
/* Os stops eram em % do container: em 1272 (1440) o degrade some aos
   763px, o bastante para nao encostar na mulher. Mas o container
   encolhe (928 em 1024, --gutter passa de 84 para 48) e a arte NAO
   encolhe junto porque o cover trava pela altura (sempre 660): a mulher
   fica no mesmo pixel absoluto, so que mais perto da borda esquerda que
   sobrou. Com % o veu some proporcionalmente mais cedo tambem, e o
   texto (coluna de 654 fixos) passou a cair em cima do rosto dela entre
   1024 e ~1275px de tela. Trocado para px fixos, do jeito que já
   funcionava em 1440: agora o degrade nao acompanha o encolhimento do
   container, entao continua escurecendo a mesma faixa onde o texto
   sempre cai, em qualquer largura desse intervalo. */
.mn-hero-veu{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,
    rgba(12,22,27,.95) 0, rgba(12,22,27,.9) 380px, rgba(12,22,27,.55) 600px,
    rgba(12,22,27,.2) 760px, rgba(12,22,27,0) 900px);
}

.mn-hero-in{
  position:relative; z-index:2;
  width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
  padding-top:146px;
}
/* v2.css poe 70px aqui (era o recuo do arquivo ANTES de a faixa
   existir). Com a faixa ocupando 46px em fluxo normal acima dela, o
   texto so bate a marca do arquivo (chapeu a y=133 dentro dos 660) com
   87px, nao 70: 46 + 87 = 133. O seletor repete o do v2.css de
   proposito, so para empatar a especificidade; quem decide e a ordem de
   carga, e mentoria.css entra depois.
   So no desktop (min-width:1024px): abaixo disso quem manda continua
   sendo o padding-top:113 do bloco "MENTORIA NO CELULAR" mais abaixo
   neste arquivo, porque sem o media query aqui esta regra bate mais
   forte que aquela (mesma especificidade, e esta carrega depois) e
   atropelava o recuo do celular. */
@media (min-width:1024px){
  body.v2 .e-painel .mn-hero-in{ padding-top:87px; }
}
.mn-hero-chapeu{ color:#bbcfd9; }
.mn-hero h1{
  margin-top:18px; width:654px; max-width:100%;
  font-family:var(--display); font-weight:600; font-size:40px; line-height:1.04;
  color:var(--branco);
}
.mn-hero-apoio{
  margin-top:18px; width:654px; max-width:100%;
  font-size:18px; line-height:1.1; color:var(--branco);
}
.mn-hero-btn{ display:inline-flex; margin-top:34px; padding:16px; font-size:14px; }
.mn-hero .mn-btn{ background:var(--amarelo); color:var(--ink); }
.mn-hero .mn-btn:hover{ background:#ffc93f; box-shadow:0 10px 24px rgba(0,0,0,.22); }

/* ============================================================
   FAIXA DE TELA MEDIA DO HERO (1024-1299px)
   Aprovado pelo Renan em 18/09: nessa faixa a coluna de texto de 654px
   fixos chega perto demais da composicao nova (mulher menor, balao
   "Como foi o fechamento do mes?"), e nao ha "right" nem meio-termo de
   object-position que livre rosto e balao ao mesmo tempo com a coluna
   larga. Solucao aprovada: encolher a coluna so nessa faixa, e so
   nessa faixa mudar a posicao da arte. Fora dela (1300px pra cima)
   tudo volta a ser a regra de cima, coluna de 654 e "right".

   Onde medi os dois limites, ao vivo, com screenshot, nao de cabeca:
   - 1024 e o piso porque e onde o proprio breakpoint mobile termina
     (abaixo disso a dobra e outra, ver "MENTORIA NO CELULAR").
   - o teto saiu testando de 10 em 10px com a coluna cheia (654) e
     "right": o rosto dela so limpa o titulo de vez a partir de ~1290;
     1299 fecha com folga (~25px de fundo escuro puro antes do cabelo,
     medido por luminancia pixel a pixel) sem esticar a faixa mais do
     que o necessario.

   Onde achei a largura minima (560px), tambem ao vivo, em 1024 (o
   ponto mais apertado da faixa):
   - testei 654/600/560/520/500...340px de coluna com object-position
     "right": MESMO com a coluna bem estreita (ate 400px, que ja
     quebra o titulo em 6-7 linhas e estoura a altura da dobra) o
     titulo ainda encostava no cabelo dela. "right" sozinho nao resolve
     aqui, e nao adianta encolher mais a coluna tentando forcar.
   - com object-position 55% (em vez de right), 560px de coluna ja
     limpa o rosto com folga visivel (conferido de perto, com zoom) e
     o balao continua inteiro (a mulher so entra fora do balao a partir
     de 52,6% nessa largura de tela; 55% tem folga). Testei tambem
     520px: funciona, mas 560 quebra em uma linha a menos e sobra mais
     respiro no pe da dobra antes da faixa de logos.

   Por que a posicao NAO varia junto com a largura dentro da faixa: a
   primeira tentativa foi interpolar os dois (largura E posicao) juntos
   do extremo apertado ao extremo largo. Malha fina mostrou que no MEIO
   da faixa (por volta de 1140-1180px) a folga ia a zero e passava para
   overlap: os dois efeitos (coluna mais larga, posicao mais para a
   direita) se somam no meio do caminho em vez de se cancelar. Manter
   55% fixo enquanto so a largura cresce e monotono e seguro do começo
   ao fim (a folga so aumenta, de ~33px em 1024 a ~91px em 1299): a
   troca de posicao (55% -> right) fica inteira na virada dos 1300px,
   onde os dois lados ja sao seguros (~91px de um lado, ~25px do
   outro). O que pula ali e so o enquadramento do fundo desfocado, nao
   a leitura do titulo nem o balao.

   A largura da coluna anda em calc() (mesmo mecanismo de clamp() que o
   projeto ja usa em v2.css, so que escrito por extenso porque
   object-position nao aceita clamp e eu queria as duas regras lado a
   lado e faceis de comparar): 560px em 1024, sobe linear ate 654px
   (a largura de sempre) em 1299/1300. Nao mexi na largura de 1440 pra
   cima, que ja estava aprovada. */
@media (min-width:1024px) and (max-width:1299px){
  .mn-hero h1,
  .mn-hero-apoio{ width:clamp(560px, calc(211.25px + 34.058vw), 654px); }
  .mn-hero-arte img{ object-position:55% bottom; }
}

/* a faixa de marcas fecha o hero, como na consultoria */
.mn-hero-banda{
  position:absolute; left:0; right:0; bottom:0; z-index:2; height:103px;
  display:flex; align-items:center;
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(71.15px); -webkit-backdrop-filter:blur(71.15px);
  border-top:1px solid rgba(255,255,255,.5);
}
.mn-hero-banda .logobar{ width:100%; height:72px; background:transparent; }


/* ============================================================
   02 · CASES DO PROGRAMA
   Figma 1069:3576 — y 742, h 883. O cabeçalho é CENTRALIZADO, numa
   caixa de 820, e o botão vem DEPOIS dos cartões, também centrado.
   `display:contents` solta os dois filhos do topo na coluna da dobra
   e a ordem resolve, sem mexer no HTML.
   ============================================================ */
/* ---------- cases do programa ----------
   Figma Cases-Section, 1440x883. O cabecalho e centrado numa caixa de
   820, os tres cartoes vem embaixo e o botao fecha a dobra, tambem
   centrado. 23/09: o CARTAO e `card_caso()`/`.cases-grade`, o mesmo de
   Resultados (Figma node 1236:1558) -- folha em styles.css, aqui so
   entra a caixa que segura a grade. */
.mn-cases{ padding:99px 0 68px; background:var(--branco); }
.mn-cases .mn-btn{ padding:16px 28px; }
.mn-cases .mn-in{ display:flex; flex-direction:column; align-items:center; }
/* .mn-in centraliza os filhos (align-items:center), entao um filho sem
   largura propria vira shrink-to-fit -- sem stretch aqui a grade cai
   pra largura de conteudo em vez da largura da coluna. */
.mn-cases .cases-grade{ width:100%; align-self:stretch; margin-top:39px; }
.mn-cases-topo{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:820px; max-width:100%; text-align:center;
}
.mn-cases-topo .mn-apoio{ font-size:15px; line-height:1.53; }
.mn-cases-topo h2{
  width:795px; max-width:100%;
  font-family:var(--display); font-weight:500; font-size:32px; line-height:1.16;
  color:var(--ink);
}
.mn-cases-pe{ margin-top:39px; }


/* ---------- caixa de imagem pendente ----------
   O arquivo marca as imagens de case, a curva de desempenho e a
   foto do Tiago como placeholder. Onde o repositório já tem o
   asset oficial (a foto do Tiago), ele entra; onde escolher a
   imagem é curadoria (qual das nove fotos do Hiperzoo), fica a
   caixa marcada, para a decisão não ser tomada por aqui. */
.mn-vazio{
  display:flex; align-items:center; justify-content:center;
  background:var(--nevoa); border:1px solid var(--divisor);
  border-radius:16px; overflow:hidden;
  font-family:var(--texto); font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2);
  text-align:center; padding:16px;
  /* diagonal do placeholder do arquivo */
  background-image:linear-gradient(135deg, transparent calc(50% - .5px),
                   rgba(120,140,152,.35) 50%, transparent calc(50% + .5px));
}


/* ============================================================
   03 · DIAGNÓSTICO INICIAL
   Figma 1069:3370 — y 1643, h 929. Os seis sinais NÃO são seis cartões
   soltos: são seis células de uma caixa só, separadas por fio, com o
   número em display grande e sem pílula. O botão é amarelo e centrado.
   ============================================================ */
.mn-sinais{ padding:70px 0 70px; background:var(--branco); }
.mn-sinais-cab{
  width:543px; max-width:100%; margin:0 auto; text-align:center;
}
.mn-sinais-cab h2{ width:543px; max-width:100%; margin:0 auto; font-size:42px; line-height:1.16; }
.mn-sinais-cab .mn-apoio{ width:525px; max-width:100%; margin:0 auto; }
.mn-sinais-grade{
  margin-top:32px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  border:1px solid var(--divisor); border-radius:24px; overflow:hidden;
}
.mn-sinal{
  display:flex; flex-direction:column; gap:12px;
  padding:32px; background:var(--branco);
  border-right:1px solid var(--divisor); border-bottom:1px solid var(--divisor);
}
.mn-sinal:nth-child(3n){ border-right:0; }
.mn-sinal:nth-child(n+4){ border-bottom:0; }
.mn-sinal-num{
  font-family:var(--display); font-weight:500; font-size:42px; line-height:1.16;
  color:var(--ink);
}
.mn-sinal h3{
  margin-top:0;
  font-family:var(--display); font-weight:600; font-size:19px; line-height:1.24;
  color:var(--ink);
}
.mn-sinal-texto{ font-size:14px; line-height:1.5; color:var(--apoio); }
.mn-sinais .mn-btn{
  display:flex; width:fit-content;
  margin:44px auto 0; padding:16px 28px;
  background:var(--amarelo); color:var(--ink);
}
.mn-sinais .mn-btn:hover{ background:#ffc93f; }


/* ============================================================
   04 · O DIAGNÓSTICO
   Figma 1069:3266 — cartão ESCURO de 1282x670 com a colagem de fotos
   sangrando na direita, texto em branco e marcador amarelo. O que
   estava aqui era fundo branco com uma caixa marcada do lado.
   ============================================================ */
.mn-diag{ padding:48px 0 85px; background:var(--branco); }
.mn-diag-in{
  position:relative; overflow:hidden;
  border-radius:40px; background:var(--painel);
  min-height:670px;
}
/* a arte encosta na direita e some para a esquerda com mascara, senao
   fica uma emenda reta no meio do cartao */
/* Quadro 1128:898, 1692x670, que encaixa em x=-332 dentro do cartao de
   1282x670. A propria arte ja escurece para a esquerda, entao nao
   precisa mais de mascara. */
.mn-diag-arte{
  position:absolute; left:-25.9%; top:0; z-index:0;
  display:block; width:131.98%; height:100%;
}
.mn-diag-arte img{
  width:100%; height:100%; object-fit:cover; object-position:left top;
  display:block;
}
.mn-diag-texto{
  position:relative; z-index:1;
  width:527px; max-width:calc(100% - 156px);
  margin:86px 0 0 78px; color:var(--branco);
}
.mn-diag-texto .mn-chapeu{ color:#bbcfd9; }
.mn-diag-texto h2{
  margin-top:8px; width:527px; max-width:100%;
  font-family:var(--display); font-weight:500; font-size:28px; line-height:1.16;
  color:var(--branco);
}
.mn-diag-corpo{
  margin-top:32px; display:flex; flex-direction:column; gap:16px;
  width:481px; max-width:100%;
}
/* no arquivo cada marcador fecha em 38 de altura para duas linhas, ou
   seja, 19 por linha: e corpo de 13,5, nao de 15 */
.mn-diag-corpo p{
  position:relative; padding-left:46px;
  font-size:13.5px; line-height:1.46; color:rgba(255,255,255,.62);
}
/* no arquivo a primeira frase vem cheia e o resto apagado */
.mn-diag-corpo strong{ font-weight:700; color:var(--branco); }
/* o marcador do arquivo e uma caixa amarela com o visto */
.mn-diag-corpo p::before{
  content:""; position:absolute; left:0; top:2px;
  width:34px; height:34px; border-radius:9px;
  background:var(--amarelo) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%230c161b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/18px no-repeat;
}
.mn-diag .mn-btn{
  position:relative; z-index:1; margin:32px 0 86px; padding:16px 28px;
  background:var(--amarelo); color:var(--ink);
}
.mn-diag .mn-btn:hover{ background:#ffc93f; }


/* ============================================================
   05 · A PROPOSTA DO PROGRAMA
   Figma 1069:3423 — y 3375, h 1014. Em cima, duas colunas: a roda de
   gente à esquerda (546x519) e o texto à direita (576). Embaixo, os
   três níveis em cartão ESCURO e um pé com dois textos e o botão.
   ============================================================ */
.mn-proposta{ padding:60px 0 60px; background:var(--branco); }
/* no arquivo a coluna da direita comeca em 732 e fecha em 1308, ou seja
   ela NAO encosta na borda do container */
.mn-proposta-in.mn-in{
  width:min(1230px, 100% - var(--gutter) * 2); margin-inline:auto;
  display:grid; grid-template-columns:546px 576px;
  gap:0 94px; justify-content:center; align-items:start;
}
.mn-proposta-arte{
  width:100%; height:auto; display:block; border-radius:16px;
}
.mn-proposta-texto{ grid-column:2; margin-top:29px; }
/* no arquivo o chapéu do bloco alinha à esquerda com o título */
.mn-proposta-texto .mn-cab{ text-align:left; align-items:flex-start; }
.mn-proposta-texto h2{
  width:576px; max-width:100%;
  font-family:var(--display); font-weight:500; font-size:32px; line-height:1.16;
  color:var(--ink);
}
.mn-proposta-corpo{
  margin-top:33px; width:537px; max-width:100%;
  display:flex; flex-direction:column; gap:14px;
  font-size:15px; line-height:1.5; color:var(--apoio);
}
.mn-niveis{
  grid-column:1 / -1; margin:52px -7px 0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.mn-nivel{
  min-height:160px; padding:28px; border-radius:24px;
  background:var(--painel); color:var(--branco);
}
.mn-nivel-rot{
  font-family:var(--display); font-weight:600; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--branco);
}
.mn-nivel-texto{
  margin-top:12px; width:279px; max-width:100%;
  font-size:15px; line-height:1.45; color:rgba(255,255,255,.82);
}
/* o pe: dois textos e o botao na mesma linha, com fio em cima */
.mn-proposta-pe{
  grid-column:1 / -1; margin:38px -7px 0;
  padding-top:25px;
  border-top:1px solid var(--divisor);
  display:flex; align-items:flex-start; gap:64px;
}
.mn-proposta-fecho{
  flex:0 1 301px; font-size:15px; line-height:1.5; color:var(--apoio);
}
.mn-proposta-fecho + .mn-proposta-fecho{ flex:0 1 368px; }
.mn-proposta-pe .mn-btn{
  flex:none; margin-left:auto; padding:21px 67px;
  background:var(--amarelo); color:var(--ink);
}
.mn-proposta-pe .mn-btn:hover{ background:#ffc93f; }


/* ============================================================
   06 · QUEM CONDUZ
   Figma 1069:3441 — y 3644, h 599. Foto de 526x458 à esquerda,
   texto a partir de 650, selos a 195.
   ============================================================ */
/* As medidas do arquivo sao de uma pagina de 1440, onde a coluna tem
   1272: foto de 526, vao de 47 e texto de 699, que fecha exato. No site a
   coluna acompanha a tela e vai a 1488 em 1728, mas a foto ficava presa
   em 526 e o texto preso em 700, entao sobravam mais de 200 vazios a
   direita e a dobra inteira parecia jogada para a esquerda.
   A foto passa a ser a mesma FRACAO do arquivo, 526/1272, e o texto toma
   o resto: em 1440 as medidas continuam as do arquivo e acima disso as
   duas colunas crescem juntas. */
.mn-tiago{ padding:0 0 78px; background:var(--branco); }
.mn-tiago-in{ display:flex; align-items:flex-start; gap:47px; }
.mn-tiago-texto{ margin-top:78px; }
.mn-tiago-texto h2{ width:auto; max-width:100%; }
.mn-tiago-corpo{ width:auto; max-width:100%; }
.mn-tiago-foto{
  flex:0 0 41.352%; width:auto; height:auto; aspect-ratio:526/458;
  border-radius:16px; overflow:hidden;
  background:var(--nevoa);
}
.mn-tiago-foto img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
}
.mn-tiago-texto{ flex:1 1 0; min-width:0; padding-top:20px; }
.mn-tiago-texto h2{
  margin-top:16px;
  font-family:var(--display); font-weight:500; font-size:32px; line-height:1.16;
  color:var(--ink);
}
.mn-selos{ display:flex; flex-wrap:wrap; gap:16px; margin-top:26px; }
.mn-selos span{
  display:inline-flex; align-items:center; height:40px; padding:0 20px;
  background:var(--cinza-card); border-radius:100px;
  font-size:12px; font-weight:600; line-height:1.2; color:var(--ink);
  white-space:nowrap;
}
.mn-tiago-corpo{
  margin-top:28px; display:flex; flex-direction:column; gap:16px;
  font-size:16px; line-height:1.5; color:var(--ink);
}


/* ============================================================
/* ============================================================
   07 · ESCOPO DO PROGRAMA
   Figma 1129:1182 — painel escuro de 1250x702 com duas colunas: à
   esquerda o cabeçalho, a arte, a frase e o botão; à direita os dez
   itens em acordeão, fechados. O que estava aqui eram dez cartões numa
   grade de duas colunas mais uma faixa escura, e a dobra fechava 1.104
   contra 702 do arquivo.
   ============================================================ */
.mn-escopo{ padding:54px 0 54px; background:var(--branco); }
/* As duas colunas eram 648 e 518 fixos, somando 1166. No arquivo o painel
   tem 1250 e sobram 85 à direita; no site o painel acompanha a coluna, que
   é 1272 em 1440 e 1488 em 1728, então a sobra ia de 106 a 322 e a dobra
   inteira parecia jogada para a esquerda.
   A arte continua fixa em 648, porque é um PNG com medida, e a lista passa
   a tomar o que sobrar, parando a 85 da borda, que é a margem do arquivo.
   Assim a sanfona encosta na direita em qualquer largura. */
.mn-escopo-painel{
  background:var(--ink); border-radius:40px; overflow:hidden;
  padding:56px 0 0;
  display:grid; grid-template-columns:648px minmax(0, 1fr);
  gap:0; align-items:start;
}
/* a lista abre em 647 dentro do painel, colada na arte */
.mn-escopo-lista{ margin-left:-1px; }
.mn-escopo-esq{ position:relative; display:flex; flex-direction:column; }
.mn-escopo-cab{ width:472px; max-width:100%; margin-left:73px; text-align:center; }
.mn-escopo-cab h2{
  width:472px; max-width:100%; margin:0 auto;
  font-family:var(--display); font-weight:500; font-size:25px; line-height:1.16;
  color:var(--branco);
}
.mn-escopo-cab .mn-chapeu{ color:#bbcfd9; }
/* a arte encosta no cabecalho e a frase cai por cima do pe dela, que e
   escuro: no arquivo a frase abre em 552 e a arte so termina em 593 */
.mn-escopo-arte{
  display:block; width:648px; max-width:100%; height:auto;
  margin-top:0; margin-left:-1px;
}
.mn-escopo-fecho{
  position:relative; z-index:1;
  width:388px; max-width:100%; margin:-41px 0 0 115px;
  font-family:var(--display); font-weight:500; font-size:18px; line-height:1.16;
  color:var(--branco); text-align:center;
}
.mn-escopo-btn{
  align-self:flex-start; width:318px; justify-content:center;
  margin:11px 0 48px 150px;
  background:var(--amarelo); color:var(--ink);
}
.mn-escopo-btn:hover{ background:#ffc93f; }

/* a lista reaproveita o acordeao do FAQ, vestido de escuro */
/* o 85 e a margem direita do arquivo: a lista para ali em vez de
   encostar na borda do painel */
.mn-escopo-lista{ margin:5px 0 0 -1px; padding-right:85px; width:100%; }
.mn-escopo-lista .faq-item{ border:0; margin-bottom:10px; }
.mn-escopo-lista .faq-p{
  width:100%; padding:14px 24px; border-radius:12px;
  background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:15px; font-weight:500; line-height:1.2; color:var(--branco);
  text-align:left; cursor:pointer;
  transition:background-color .2s var(--ease);
}
.mn-escopo-lista .faq-p:hover{ background:rgba(255,255,255,.12); }
.mn-escopo-lista .faq-mais{ flex:none; font-size:18px; line-height:1; color:#bbcfd9; }
.mn-escopo-lista .faq-r{ padding:0 24px; }
.mn-escopo-lista .faq-r p{
  padding:12px 0 4px; font-size:14px; line-height:1.5; color:rgba(255,255,255,.78);
}


/* ============================================================
   08 · FAIXA DE NÚMEROS
   Figma 1069:3624 — y 5421, quatro blocos com divisor de 1x76.
   O arquivo traz três; a reescrita do Notion traz quatro.
   ============================================================ */
.mn-numeros{ padding-top:61px; background:var(--branco); }
.mn-numeros-in{ display:flex; align-items:flex-start; gap:32px; }
.mn-num{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px; }
.mn-num b{
  font-family:var(--display); font-weight:400; font-size:36px; line-height:1;
  color:var(--ink);
}
.mn-num span{ font-size:14px; line-height:1.45; color:var(--apoio); }
.mn-num-divisor{ flex:none; width:1px; height:76px; background:var(--divisor); }


/* ============================================================
   10 · CTA FINAL
   Figma 1069:3289 — 1272 de largura, #283845, raio 30, botão
   branco. Fechamento único: leva para a sessão estratégica.
   ============================================================ */
/* Figma 1129:1417, medido pela arvore do arquivo: painel de 1272x528,
   raio 56, recuo de 50 em cima e embaixo, vaos de 24 e UMA coluna de 570
   para titulo, corpo e botao. Titulo 32/1.16 em cinco linhas (185 de
   altura) e corpo Inter 14/1.5 com uma linha vazia entre os dois
   paragrafos (147 de altura).
   O que estava aqui pendurava o titulo no token --fs-statement, que vale
   42 no desktop, numa caixa de 542: a frase quebrava em SEIS linhas, o
   titulo fechava 292 no lugar de 185 e a dobra ia a 676 contra 528. As
   caixas de 542 e 560 tambem eram medida do quadro antigo. */
.mn-cta{ padding:0 0 54px; background:var(--branco); }
.mn-cta-painel{
  background:var(--ink); border-radius:56px; overflow:hidden;
  padding:50px 40px;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  text-align:center;
}
/* canto iOS, mesma regra do resto do site: a superelipse avanca um
   decimo alem do raio, entao 56 aqui desenha perto dos 62 de alcance */
@supports (corner-shape: squircle){
  .mn-cta-painel{ corner-shape:squircle; }
}
/* o tamanho do titulo e fixo, nao o token: em 570 de caixa so 32 fecha
   as mesmas cinco linhas do arquivo */
.mn-cta-painel h2{
  width:570px; max-width:100%;
  font-family:var(--display); font-weight:500; font-size:32px;
  line-height:1.16; color:var(--branco);
}
/* o vao de 21 nao e um respiro escolhido: e a linha vazia que o arquivo
   deixa entre os dois paragrafos, 14 x 1,5 */
.mn-cta-corpo{
  width:570px; max-width:100%;
  display:flex; flex-direction:column; gap:21px;
  font-size:14px; line-height:1.5; color:var(--branco);
}
.mn-cta-painel .mn-btn{
  padding:15px 26px; border-radius:40px; font-weight:600; font-size:15px;
  background:var(--amarelo); color:var(--ink);
}
.mn-cta-painel .mn-btn:hover{ background:#ffc93f; }

/* o cartão do formulário não fica mais no fecho: ele abre em modal, e a
   caixa dele está no bloco .fp-modal de v2.css. O botão amarelo daqui é
   quem abre. Dentro do cartão o botão é a barra de ponta a ponta. */
.mn-form .mn-btn{
  width:100%; padding:16px; border-radius:100px;
  background:var(--amarelo); color:var(--ink);
}
.mn-form .mn-btn:hover{ background:#ffc93f; }


/* ============================================================
   11 · FAQ
   Figma 1069:3543 — y 6649, acordeão de 900 centralizado.
   ============================================================ */
/* Figma 1129:1914: dobra de 760, cabeçalho em 591 centrado e a lista em
   900, com 103 entre um e outro */
.mn-faq{ padding:100px 0 24px; background:var(--branco); }
.mn-faq-in{ display:flex; flex-direction:column; align-items:center; gap:0; }
.mn-faq-in .mn-cab{ min-height:121px; }
.mn-faq-in .mn-cab h2{ width:591px; max-width:100%; margin:0 auto; }
.mn-faq-in .faq{ margin-top:103px; }
.mn-faq .faq{ width:900px; max-width:100%; }
.mn-faq .faq-item{ border-bottom-color:rgba(30,45,54,.15); }


/* ============================================================
   RESPONSIVIDADE
   O desktop 1440 é o estado de referência. As faixas seguem as
   mesmas cinco bandas do resto do protótipo.
   ============================================================ */

@media (max-width:1439px){
  .mn-diag-in{ gap:40px; }
  .mn-diag-in .mn-vazio{ width:40%; max-width:500px; height:auto; aspect-ratio:500/360; }
  .mn-tiago-in{ gap:32px; }
  .mn-tiago-foto{ width:42%; max-width:526px; height:auto; aspect-ratio:526/458; }
  .mn-escopo-faixa p{ font-size:21px; }
}

@media (max-width:1023px){
  .mn-hero{ height:auto; padding:170px 0 90px; }
  .mn-hero h1{ font-size:34px; }
  /* o arquivo centra este bloco inteiro, inclusive o chapeu. Com
     flex-start o titulo e o apoio ainda saiam centrados pelo text-align
     herdado, mas o chapeu, que e estreito, encostava na esquerda. */
  .mn-cases-topo{ flex-direction:column; align-items:center; gap:24px; }
  .mn-case .mn-vazio,
  .mn-sinais-grade{ grid-template-columns:repeat(2, 1fr); }
  .mn-diag-in{ padding:0; }
  .mn-niveis{ grid-template-columns:1fr; }
  .mn-niveis,
  .mn-proposta-pe{ margin-inline:0; }
  .mn-tiago-in{ flex-direction:column; }
  .mn-tiago-foto{ width:100%; max-width:none; }
  .mn-tiago-texto{ padding-top:0; }
  .mn-escopo-grade{ grid-template-columns:1fr; }
  .mn-escopo-faixa{ flex-direction:column; align-items:flex-start; padding:28px; }
  .mn-numeros-in{ flex-wrap:wrap; row-gap:28px; }
  .mn-num{ flex:1 1 calc(50% - 32px); }
  .mn-num-divisor{ display:none; }
  .mn-cta-painel{ padding:56px 40px; }
  .mn-cta-painel h2{ font-size:34px; }
}

@media (max-width:767px){
  .mn-hero{ padding:150px 0 72px; }
  .mn-hero h1{ font-size:28px; }
  .mn-hero-apoio{ font-size:16px; }
  .mn-cab h2,
  .mn-cases-topo h2,
  .mn-diag-texto h2,
  .mn-tiago-texto h2{ font-size:26px; }
  .mn-sinais-grade{ grid-template-columns:1fr; }
  .mn-sinal,
  .mn-num{ flex:1 1 100%; }
  .mn-escopo-faixa p{ font-size:19px; }
  .mn-cta-painel{ padding:40px 24px; }
  .mn-cta-painel h2{ font-size:26px; }
}

/* no celular o menu segue a altura padrão do arquivo, y=27, igual às
   demais páginas; o valor acima é medida de desktop */
@media (max-width:1023px){
}

/* ============================================================
   MENTORIA NO CELULAR — Figma 1103:10185, 393x11585
   As dobras novas do desktop (cartão escuro do diagnóstico, painel do
   escopo, roda da proposta) nascem em duas colunas com medida fixa, e
   em tela estreita isso vira coluna de uma palavra e arte vazando. Aqui
   todas viram uma coluna só, com a arte em cima do texto, que é o
   arranjo do quadro de celular.
   ============================================================ */
@media (max-width:1023px){

  /* ---- hero: texto sobre a foto, tudo na largura da coluna ---- */
  /* o recuo de 150 vem da regra geral de dobra e empurrava o bloco
     inteiro: no quadro de celular o chapeu abre em 113 */
  .mn-hero{ height:931px; min-height:0; padding:0; }
  /* A caixa da arte (.mn-hero-arte) ja e o painel inteiro por inset:0 do
     v2.css; o left/top/width que estava aqui era o mesmo hack antigo do
     desktop e ja tinha parado de fazer efeito, entao saiu.
     Entre 768 e 1023 quem carrega e hero-arte-mobile.jpg (738x1579,
     retrato). Nessa faixa a caixa e paisagem (836x660 em 900px de tela,
     por exemplo), bem mais larga que a arte: o cover ajusta pela LARGURA
     e sobra corte vertical enorme, so 37% da altura da imagem aparece.
     O veu (.mn-hero-veu) fica desligado aqui (display:none, duas regras
     abaixo), entao quem impede o texto de cair em cima do rosto dela e
     SO o enquadramento: "top" mostra o terco de cima da imagem, que e
     fundo desfocado vazio (ela so aparece a partir de ~60% da altura do
     recorte). Tentei "bottom" primeiro, testei em 900px e o texto caia
     direto em cima do rosto sem escurecedor nenhum por baixo: voltei
     para "top", que e o mesmo lado que a imagem antiga (870x1862) ja
     usava por heranca do "left top" da regra base. */
  .mn-hero-arte img{ object-position:center top; }
  /* o veu segura o texto ate a metade e libera a foto embaixo */
  /* O veu sai de cena no celular. Ele foi feito para o recorte de
     desktop, que e a foto crua: escurecia a metade de cima para o texto
     ler. A arte de celular ("Hero Mentoria - Mobile") ja vem do arquivo
     com esse escurecimento pintado, entao o veu por cima era a segunda
     camada e achatava o fundo desfocado num preto liso, que nao e o que
     esta exportado. */
  .mn-hero-veu{ display:none; }
  /* no quadro de celular o texto e CENTRALIZADO e ocupa a metade de
     cima; a foto fica embaixo, sem texto por cima */
  .mn-hero-in{
    display:flex; flex-direction:column; align-items:center;
    width:min(341px, 100% - var(--gutter) * 2);
    padding:113px 0 0; text-align:center;
  }
  .mn-hero h1, .mn-hero-apoio{ width:100%; }
  .mn-hero h1{ font-size:24px; line-height:1.2; margin-top:14px; }
  .mn-hero-apoio{ font-size:13px; line-height:1.38; margin-top:14px; }
  .mn-hero-btn{ margin-top:28px; }
  /* a faixa e `nowrap` no desktop (medida de 1350); aqui ela quebra em
     duas linhas, porque nao ha quadro de celular confiavel no Figma para
     esta faixa especifica (ver README): a altura fica em auto, calculada
     pelo texto, e nao presa a um numero medido. */
  .mn-hero-faixa{
    height:auto; padding:10px 24px;
    font-size:13px; line-height:1.35; white-space:normal;
  }

  /* ---- cases ---- */

  /* ---- sinais: a caixa vira uma coluna, com fio so entre as celulas ---- */
  .mn-sinais-grade{ grid-template-columns:1fr; }
  .mn-sinal{ border-right:0; }
  .mn-sinal:nth-child(n+4){ border-bottom:1px solid var(--divisor); }
  .mn-sinal:last-child{ border-bottom:0; }

  /* ---- diagnostico ---- */
  .mn-diag{ padding:32px 0 40px; }
  /* Figma 1191:1608: 348x1235, e a colagem e o FUNDO do cartao inteiro,
     igual ao desktop, e nao um bloco solto depois do texto. Medi a
     luminancia da arte onde o texto cai, 102, entao o texto segue branco
     tambem aqui. A altura do cartao acompanha o texto, e a arte cobre. */
  /* o cartao nunca fica mais baixo do que a arte inteira: 1235 para 348
     de largura e a proporção do quadro, e --linha-site e a largura que o
     cartao tem em qualquer tela. Sem isto o cartao fechava na altura do
     texto, que aqui e mais curto que no arquivo, e do retrato so aparecia
     o cabelo. */
  .mn-diag-in{
    /* em vw e nao em --linha-site: aquele token carrega um 100% dentro,
       que se resolve no elemento onde e USADO, e ali ele vale a largura
       da dobra e nao a do cartao. */
    min-height:calc((100vw - var(--gutter) * 2) * 1235 / 348);
    border-radius:32px;
  }
  .mn-diag-arte{
    position:absolute; inset:0; left:0; width:100%; height:100%; z-index:0;
  }
  /* ancorada no TOPO: a peca tem 1235 de altura e o cartao aqui fecha em
     pouco mais de 700, entao o que sobra e cortado embaixo. O texto cai
     sobre o terco de cima da arte, que e o desfocado escuro, que foi onde
     medi a luminancia de 87. Ancorar embaixo jogava o rosto atras do
     texto. */
  .mn-diag-arte img{
    width:100%; height:100%; object-fit:cover; object-position:center top;
  }
  /* no celular o chapeu e o titulo sao centralizados */
  .mn-diag-texto{ text-align:center; }
  .mn-diag-corpo{ text-align:left; }
  /* zera a margem de desktop, senao a coluna nasce 78 a direita e o
     cartao vaza a tela */
  .mn-diag-texto{
    position:relative; z-index:1;
    width:100%; max-width:100%; margin:0; padding:53px 27px 0;
  }
  .mn-diag-texto h2{ width:100%; font-size:24px; }
  .mn-diag-corpo{ width:100%; }
  .mn-diag .mn-btn{ position:relative; z-index:1; display:flex; margin:32px 27px 40px; }

  /* ---- proposta: uma coluna, niveis empilhados ---- */
  .mn-proposta{ padding:48px 0; }
  .mn-proposta-in.mn-in{ width:calc(100% - 40px); grid-template-columns:minmax(0, 1fr); gap:32px; }
  .mn-proposta-arte{ width:100%; }
  .mn-proposta-texto{ grid-column:1; }
  .mn-proposta-texto h2{ width:100%; font-size:24px; }
  .mn-proposta-corpo{ width:100%; }
  .mn-niveis{ grid-column:1; grid-template-columns:1fr; margin-top:8px; }
  .mn-nivel-texto{ width:100%; }
  /* Figma 1191:1670: no celular as duas frases e o botao ficam centrados,
     e nao alinhados a esquerda como no desktop, onde eles dividem a linha
     com o botao a direita. */
  .mn-proposta-pe{
    grid-column:1; flex-direction:column; align-items:center;
    gap:20px; text-align:center;
  }
  .mn-proposta-fecho, .mn-proposta-fecho + .mn-proposta-fecho{ flex:none; }
  .mn-proposta-pe .mn-btn{ margin-left:0; align-self:center; }

  /* ---- quem conduz ---- */
  .mn-tiago-in{ flex-direction:column; align-items:stretch; gap:28px; }
  .mn-tiago-foto{ width:100%; }
  /* sem estes quatro, o texto guarda a largura do desktop e some pela
     direita: 700 e 672 numa tela de 393 */
  .mn-tiago-texto{ width:100%; margin-top:0; }
  .mn-tiago-texto h2{ width:100%; }
  .mn-tiago-corpo{ width:100%; }
  .mn-selos{ width:100%; flex-wrap:wrap; }

  /* ---- escopo: painel em uma coluna ---- */
  .mn-escopo{ padding:40px 0; }
  .mn-escopo-painel{ grid-template-columns:minmax(0, 1fr); gap:0; padding:40px 0 0; border-radius:28px; }
  .mn-escopo-cab{ width:100%; margin-left:0; padding:0 28px; }
  .mn-escopo-cab h2{ width:100%; font-size:24px; }
  .mn-escopo-arte{ width:100%; margin-left:0; }
  /* os dois guardavam a margem lateral do desktop (115 no fecho, 150 no
     botao) e saiam pela direita em 360, 393 e 430. No celular a coluna e
     unica: os dois centralizam dentro do painel. */
  .mn-escopo-fecho{ width:calc(100% - 56px); margin:-41px auto 0; }
  .mn-escopo-btn{ align-self:center; width:min(318px, 100% - 56px); margin:16px 0 40px; }
  .mn-escopo-lista{ padding:0 28px 40px; margin-top:24px; }

  /* ---- CTA e FAQ ---- */
  .mn-cta-painel{ padding:40px 28px; border-radius:28px; }
  .mn-cta-painel h2, .mn-cta-corpo{ width:100%; }
  .mn-cta-painel h2{ font-size:24px; }
  .mn-faq{ padding:56px 0 24px; }
  .mn-faq-in{ gap:40px; }
  /* no desktop a lista desce 103 e o cabecalho reserva 121 de altura; no
     celular isso virava um vao de 180px entre o titulo e a primeira
     pergunta, contra 64 na sessao estrategica. O gap de 40 ja da o respiro. */
  .mn-faq-in .mn-cab{ min-height:0; }
  .mn-faq-in .faq{ margin-top:0; }
  .mn-faq-in .mn-cab h2{ width:100%; font-size:24px; }
}

@media (max-width:767px){
  .mn-hero h1{ font-size:26px; }
  .mn-sinal{ padding:24px; }
  .mn-sinal-num{ font-size:34px; }
}


/* ============================================================
   ESTUDOS DE CASO
   Entrou em 15/09 no lugar da faixa de numeros, que nao existe no
   arquivo. 22/09: trocado de `cases-grade`/`caso-card` pro carrossel da
   Home. 23/09, pedido do Renan com referência do Figma (node 1236:1558):
   volta a ser `cases-grade`/`caso-card`, igual à "Cases do programa"
   acima -- as duas secoes de case da pagina agora sao visualmente
   iguais, so o cabecalho e a quantidade de cards mudam.
   ============================================================ */
.mn-estudos{ padding:72px 0 80px; background:var(--branco); }
.mn-estudos .mn-in{ display:flex; flex-direction:column; align-items:center; }
.mn-estudos-cab{ width:820px; max-width:100%; text-align:center; }
.mn-estudos-cab h2{
  margin-top:8px;
  font-family:var(--display); font-weight:500; font-size:32px; line-height:1.16;
  color:var(--ink);
}
/* .mn-in centraliza os filhos (align-items:center), entao um filho sem
   largura propria vira shrink-to-fit -- sem stretch aqui a grade cai
   pra largura de conteudo em vez da largura da coluna. */
.mn-estudos .cases-grade{ width:100%; align-self:stretch; margin-top:39px; }
/* 25/09: os cards viraram o carrossel da home (.result-palco, v2.css);
   aqui so a largura cheia da coluna e o vao do cabecalho */
@media (min-width:768px){ .mn-estudos .result-palco{ width:100%; align-self:stretch; margin-top:39px; } }


@media (max-width:767px){
  /* Sem dizer a ordem dos outros dois, o botao (order 0) subia para
     antes dos cartoes. No arquivo ele fecha a dobra, depois deles. */
  .mn-cases-topo{ order:1; }
  .mn-cases .cases-grade{ order:2; }
  .mn-cases-pe{ order:3; margin-top:35px; }
  .mn-cases-topo h2{ font-size:24px; }
}


@media (max-width:767px){
  /* Figma 1191:1696, 394x859. A foto tem 357x310 e raio 21,7, ou seja e
     mais larga que alta; com a proporção de desktop sobrava um tercio de
     amarelo vazio embaixo dela. Os selos tem 23 de altura e fecham em
     duas fileiras, 2 mais 1, e nao em tres. */
  .mn-tiago-foto{
    width:100%; height:auto; aspect-ratio:357 / 310; border-radius:22px;
  }
  .mn-tiago-foto img{ object-position:center top; }
  .mn-selos{ gap:8px; margin-top:22px; }
  .mn-selos span{
    height:23px; padding:0 12px; font-size:11px;
  }
  .mn-tiago-texto h2{ font-size:24px; }
  .mn-tiago-corpo{ margin-top:24px; gap:14px; font-size:14px; line-height:1.5; }
}