/* ============================================================
   METODOLOGIA (14/10)
   Página construída com os componentes da Consultoria (cs-*, v2.css,
   Figma 980:14170). Aqui mora só o que ela não tem, com prefixo mt-.
   ============================================================ */

/* ---------- bloco 1 · hero (Figma 1685:4579) ----------
   A foto chega escura do arquivo, então o texto é branco. A faixa de vidro
   tem 123 e leva os logos (os mesmos de Resultados, em loop) a 89 da borda
   e os números a 96 dos logos; os números passam 16 da faixa para cima,
   como no arquivo. */
.mt-hero{ background:var(--ink); }
.mt-hero .cs-hero-foto{ object-position:center center; }
@media (min-width:768px){ body.v2 .e-painel.mt-hero .cs-hero-in{ padding-top:109px; padding-left:53px; } }
.mt-hero .cs-hero-titulo,
.mt-hero .cs-hero-apoio{ width:467px; color:var(--branco); }
/* 50 à direita, o mesmo recuo do texto no painel: sem ele os números
   encostavam na borda abaixo de 1280 */
.mt-hero-banda{ height:123px; padding:0 50px 0 89px; gap:96px; justify-content:flex-start; }
.mt-hero-banda .res-logos{ flex:0 1 632px; }
.mt-hero-banda .res-numeros{ gap:12px; }
.mt-hero-banda .res-num{ padding:0; }
.mt-hero-banda .res-num:first-child{ width:221px; }
.mt-hero-banda .res-num:last-child{ width:199.613px; }
.mt-hero-banda .res-num-valor{ font-size:37.977px; }
.mt-hero-banda .res-num:first-child .res-num-rotulo{ font-size:25.082px; }
.mt-hero-banda .res-num-valor--maior{ font-size:40.836px; margin-bottom:-7.977px; }
.mt-hero-banda .res-num:last-child .res-num-rotulo{ font-size:26.97px; }

/* ---------- bloco 2 · conexão ---------- */
.mt-conexao{ padding:110px 0 100px; }
.mt-conexao-titulo{ width:760px; }
.mt-conexao-corpo p + p{ margin-top:18px; }
/* Figma 1687:4689: frase e etiqueta lado a lado, 10 entre elas; a
   etiqueta tem 48 de altura e canto 8 */
.mt-conexao-fecho{
  margin-top:36px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-weight:500; font-size:24px; line-height:31.2px; color:var(--ink);
}
.mt-destaque{
  display:inline-flex; align-items:center; height:48px; padding:0 10.5px;
  border-radius:8px; background:var(--amarelo);
}
.mt-fw-problema mark{
  background:var(--amarelo); color:inherit; border-radius:4.683px;
  padding:0 4px; margin:0 -4px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* ---------- bloco 3 · protocolo ---------- */
.mt-prot-corpo{ gap:14px; }
.mt-passo-etapa{
  font-family:var(--display); font-weight:500; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.mt-passo h3{ margin-top:12px; }
.mt-passo-texto{ margin-top:20px; font-size:16px; line-height:1.5; color:#0c161b; max-width:440px; }
/* o painel escuro vai de linha a linha do site, como o cabeçalho e o
   rodapé; a dupla de fotos mantém o tamanho do arquivo e a mesma posição
   em relação ao centro (116 à esquerda dele) */
.cs-racional.mt-racional{ width:100%; margin-bottom:100px; }
.mt-racional .cs-racional-dupla{ width:365px; left:calc(50% - 116px); }

/* ---------- bloco 4 · quatro ganhos (Figma 1688:4682) ----------
   Grade 2x2 de cartões cinza, 22 entre eles, e o fecho centrado sob uma
   régua. Sem arte. */
.mt-titulo-32{
  font-family:var(--display); font-weight:500; font-size:32px; line-height:35.2px; color:var(--ink);
}
.mt-ganhos-dobra{ background:var(--branco); padding:40px 0 100px; }
/* Figma 1688:4686: título centrado numa caixa de 744 */
.mt-ganhos-dobra .mt-titulo-32{ width:744px; max-width:100%; margin:0 auto; text-align:center; }
.mt-ganhos{
  margin-top:32px; list-style:none;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px;
}
.mt-ganho{
  display:flex; gap:14px; align-items:flex-start;
  padding:40px; border-radius:32px; background:var(--cinza-card);
}
@supports (corner-shape: squircle){ .mt-ganho{ border-radius:35.2px; corner-shape:squircle; } }
.mt-ganho-num{
  flex:none; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--amarelo); color:var(--ink);
  font-family:var(--display); font-weight:600; font-size:14px; line-height:16.8px;
}
.mt-ganho-corpo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.mt-ganho-titulo{
  font-family:var(--display); font-weight:600; font-size:18px; line-height:21.6px; color:var(--ink);
}
.mt-ganho-tag{
  font-size:11px; font-weight:600; line-height:15.4px; letter-spacing:.44px;
  text-transform:uppercase; color:var(--muted);
}
.mt-ganho-texto{ font-size:14px; line-height:20.3px; color:var(--ink); }
.mt-ganhos-fecho{
  margin-top:32px; padding-top:22px; border-top:1px solid var(--divisor); text-align:center;
  font-family:var(--display); font-weight:500; font-size:20px; line-height:26px; color:var(--ink);
}

/* ---------- bloco 5 · metodologias por dentro ---------- */
.mt-frameworks{ background:var(--cinza-card); padding:100px 0; }
.mt-frameworks .cs-casos-cab .cs-titulo{ width:640px; }
.mt-cab-apoio{ margin-top:20px; width:560px; max-width:100%; font-size:16px; line-height:1.5; color:var(--ink); }
.mt-fws{
  margin:56px auto 0; width:min(1216.84px, 100%);
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:19px; align-items:stretch;
}
.mt-fw{
  position:relative; overflow:hidden;
  background:var(--branco); border-radius:40px; padding:40px 36px 44px;
  border:0.967px solid rgba(150,150,150,.15);
  box-shadow:0 54px 75px -42px rgba(0,0,0,.18);
}
@supports (corner-shape: squircle){ .mt-fw{ corner-shape:squircle; } }
.mt-fw-sigla{
  display:inline-grid; place-items:center; min-width:64px; height:40px; padding:0 14px;
  border-radius:100px; background:var(--ink); color:var(--branco);
  font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.04em;
}
.mt-fw-titulo{
  margin-top:24px;
  font-family:var(--display); font-weight:600; font-size:22px; line-height:1.18; color:var(--ink);
}
.mt-fw-problema{
  margin-top:20px;
  font-family:var(--display); font-weight:500; font-size:16px; line-height:1.45; color:var(--ink);
}
.mt-fw-corpo{ margin-top:20px; display:flex; flex-direction:column; gap:14px; }
.mt-fw-corpo p{ font-size:14px; line-height:1.5; color:var(--ink); }
.mt-venda{ list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.mt-venda li{ display:flex; align-items:center; gap:12px; font-size:14px; line-height:1.3; color:var(--ink); }
.mt-venda-letra{
  flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:var(--amarelo); color:var(--ink);
  font-family:var(--display); font-weight:600; font-size:13px;
}
/* bloco único com abas (Figma 1695:5120): texto 433 + arte 829, vão 36 */
.mt-frameworks{ background:var(--branco); }
.mt-fwb{
  margin:56px auto 0; width:min(1298px, 100%);
  display:grid; grid-template-columns:minmax(0, 433px) minmax(0, 829px); gap:36px;
  justify-content:center; align-items:stretch;
}
.mt-fwb-texto{ display:flex; flex-direction:column; gap:27px; }
.mt-fwb-abas{ display:flex; flex-wrap:wrap; gap:12px; }
.mt-fwb-aba{
  height:39px; padding:0 16px; border:0; border-radius:100px; cursor:pointer;
  background:#d8e7ef; color:#738893;
  font-family:var(--display); font-weight:600; font-size:14px; line-height:16.8px;
  letter-spacing:.56px; text-transform:uppercase;
  transition:background-color .35s var(--suave), color .35s var(--suave);
}
.mt-fwb-aba:not(.is-ativo):hover{ background:#c9dce6; color:#4f6672; }
.mt-fwb-aba.is-ativo{ background:var(--amarelo); color:var(--ink); cursor:default; }
.mt-fwb-aba:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--branco), 0 0 0 4px #435965; }
/* painéis empilhados na mesma célula: a altura é a do maior, nada pula na troca */
.mt-fwb-paineis{ display:grid; flex:1; }
.mt-fwb-painel{
  grid-area:1 / 1; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .22s ease-out, transform .22s ease-out, visibility 0s linear .22s;
}
/* sai rápido, entra depois: os dois textos nunca se sobrepõem */
.mt-fwb-painel.is-ativo{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .5s var(--suave) .24s, transform .6s var(--suave) .24s, visibility 0s;
}
.mt-fwb-titulo{ font-family:var(--display); font-weight:600; font-size:22px; line-height:25.96px; color:var(--ink); }
.mt-fwb-problema{ margin-top:16px; font-family:var(--display); font-weight:500; font-size:16px; line-height:23.2px; color:var(--ink); }
.mt-fwb-corpo{ margin-top:27px; display:flex; flex-direction:column; gap:8px; }
.mt-fwb-corpo p{ font-size:14px; line-height:21px; color:var(--ink); }
.mt-fwb-barra{ height:4px; border-radius:21px; background:#dee9ef; overflow:hidden; }
.mt-fwb-barra span{ display:block; height:100%; width:100%; border-radius:19px; background:#b2c1c9; transform:scaleX(0); transform-origin:left center; }
.mt-fwb-barra.is-correndo span{ animation:mtFwbEncher var(--fwb-tempo, 10s) linear forwards; }
.mt-fwb-barra.is-pausada span{ animation-play-state:paused; }
@keyframes mtFwbEncher{ to{ transform:scaleX(1); } }
.mt-fwb-artes{ display:grid; }
.mt-fwb-arte{
  grid-area:1 / 1; width:100%; height:auto; display:block;
  opacity:0; transform:scale(.985);
  transition:opacity .6s var(--suave), transform .8s var(--suave);
}
.mt-fwb-arte.is-ativo{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .mt-fwb-painel, .mt-fwb-painel.is-ativo, .mt-fwb-arte{ transition:none; transform:none; }
  .mt-fwb-barra{ display:none; }
}

.mt-fws-pe{ margin-top:56px; display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center; }
.mt-fws-pe p{
  width:620px; max-width:100%;
  font-family:var(--display); font-weight:500; font-size:22px; line-height:1.3; color:var(--ink);
}

/* botões soltos da página, na medida do cs-garantia-btn */
.mt-btn{ height:49px; padding:0 28px; font-size:14px; font-weight:500; align-self:flex-start; }
.mt-fws-pe .mt-btn{ align-self:center; }

/* ---------- blocos 6 e 7 · gestões e aceleradores (Figma 1689:4682 e 1689:4724) ----------
   Texto de 560 e arte exportada do arquivo (578x741 e 538x681), nas
   pontas do container e centrados na altura. Cada frente tem o seu ícone;
   na Gestão a caixa é cinza, no Acelerador é escura com texto branco. */
.mt-dupla{ background:var(--branco); padding:0; }
.mt-aceleradores{ padding-bottom:110px; }
/* a mesma largura máxima do bloco das metodologias logo acima (1298):
   até 1440 as três coincidem no container, e acima disso as duas dobras
   cresciam com ele e saíam da linha das metodologias */
.mt-dupla-in{
  width:min(1298px, 100% - var(--gutter) * 2); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.mt-dupla-texto{ flex:0 1 560px; min-width:0; display:flex; flex-direction:column; gap:24px; }
.mt-gestoes .mt-dupla-titulo{ max-width:285px; }
.mt-aceleradores .mt-dupla-titulo{ max-width:310px; }
.mt-dupla-corpo{ display:flex; flex-direction:column; gap:14px; }
.mt-dupla-corpo p{ font-size:16px; line-height:24px; color:var(--ink); }
/* nos Aceleradores os dois parágrafos são separados por uma linha vazia,
   e a lista fica a 14 do texto, não a 24 */
.mt-dupla-corpo--solto{ gap:24px; }
.mt-aceleradores .mt-lista-ic{ margin-top:-10px; }
.mt-lista-ic{
  list-style:none;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;
}
.mt-lista-ic li{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:16px; background:var(--cinza-card);
  font-size:14px; font-weight:500; line-height:17.5px; color:var(--ink);
}
.mt-lista-ic--escura li{ background:var(--ink); color:var(--branco); }
/* no arquivo os nomes não quebram: "Acelerador do Conhecimento" encosta
   na borda da caixa, mas fica numa linha */
@media (min-width:1024px){ .mt-lista-ic li{ white-space:nowrap; } }
.mt-ic{ flex:none; width:40.818px; height:40.818px; display:block; }
.mt-dupla-nota{ font-size:14px; line-height:21px; color:var(--apoio); }
/* a arte encolhe junto com o texto (sem isso, em 1024 o texto caía para 310) */
.mt-dupla-arte{ flex:0 1 578px; min-width:0; display:block; width:578px; max-width:100%; height:auto; }
.mt-dupla-arte--aceleradores{ flex-basis:538px; width:538px; }

/* ---------- bloco 8 · três formas de entrega (Figma 1689:4763) ----------
   Título à esquerda e apoio à direita, os três cartões da Home e uma
   faixa cinza com o convite à sessão. Os cartões vêm de
   gerar.cartao_solucao e herdam tudo do .sol-card do css/v2.css; aqui só
   muda o conteúdo do hover, que é um parágrafo e não uma headline. */
.mt-entregas-dobra{ background:var(--branco); padding:100px 0; }
.mt-entregas-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:36px; }
.mt-entregas-cab .cs-garantia-titulo{ margin:0; width:457px; flex:0 0 auto; }
.mt-entregas-apoio{ width:779px; font-size:16px; line-height:1.5; color:var(--ink); }
/* o arquivo deixa a fileira 17 mais larga de cada lado, mas o conteúdo
   respeita as linhas do site: ela ocupa o container, como o resto */
.sol-cards.mt-entregas{ margin-top:56px; gap:8.5px; }
.mt-entregas-faixa{
  margin-top:56px; min-height:85px; padding:18px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--cinza-card); border-radius:24px;
}
@supports (corner-shape: squircle){ .mt-entregas-faixa{ border-radius:26.4px; corner-shape:squircle; } }
.mt-entregas-faixa p{ max-width:531px; font-size:16px; line-height:1.5; color:var(--ink); }
.mt-entregas-faixa .cs-garantia-btn{ margin-top:0; flex:0 0 auto; }

/* o hover traz um parágrafo de ~280 caracteres: corpo em Inter, menor que
   a headline da Home, e o véu escurece mais alto pra segurar as linhas */
.sol-card--texto .sol-titulo{
  max-width:none;
  font-family:var(--texto); font-size:3.65cqw; line-height:1.45;
}
.sol-card--texto .sol-veu{
  background:linear-gradient(180deg,
             rgba(12,22,27,0) 30%, rgba(12,22,27,.78) 52%, #0c161b 72%);
}
/* ---------- bloco 9 · pra quem é (Figma 1689:4797) ----------
   Ilustração de 580x643 à esquerda e texto de 476, 36 entre eles, o par
   centrado. A arte exportada passa da moldura (656 de largura, 21 para a
   esquerda), por isso ela é posta em porcentagem da caixa. */
.mt-praquem{ background:var(--branco); padding:63px 0 53px; }
/* arte encostada na linha da esquerda e texto na da direita, como as
   outras dobras de duas colunas (o arquivo centra o par em 1092) */
.mt-praquem-in{ display:flex; align-items:center; justify-content:space-between; gap:36px; }
.mt-praquem-arte{ flex:0 1 580px; position:relative; aspect-ratio:580 / 643; }
.mt-praquem-arte img{
  position:absolute; top:0; left:-3.62%; width:113.1%; max-width:none; height:auto;
}
.mt-praquem-texto{ flex:0 1 476px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:36px; }
.mt-praquem .mt-titulo-32{ line-height:34px; }
.mt-praquem-lista{ list-style:none; width:100%; display:flex; flex-direction:column; gap:16px; }
.mt-praquem-lista li{
  display:flex; align-items:center; gap:12px;
  padding:8px 16px; border-radius:16px; background:var(--cinza-card);
  font-size:16px; line-height:21.6px; color:var(--ink);
}
.mt-praquem-btn{ margin-top:0; }

/* ---------- responsivo ---------- */
@media (max-width:1023px){
  .mt-hero .cs-hero-titulo, .mt-hero .cs-hero-apoio{ width:100%; }
  /* mais estreito que o arquivo, o texto alcança a parte clara da foto:
     um véu escuro da esquerda segura a leitura */
  .mt-hero .cs-hero-arte::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(12,22,27,.88) 0%, rgba(12,22,27,.62) 50%, rgba(12,22,27,0) 78%);
  }
  .mt-hero-banda{ height:auto; padding:20px 50px 20px 53px; flex-direction:column; align-items:flex-start; gap:16px; }
  .mt-hero-banda .res-logos{ flex:none; width:100%; max-width:none; }
  .mt-hero-banda .res-numeros{ align-self:stretch; justify-content:flex-start; }
  .mt-hero-banda .res-num:first-child, .mt-hero-banda .res-num:last-child{ width:auto; align-items:flex-start; text-align:left; }
  .mt-hero-banda .res-num-valor{ font-size:26px; }
  .mt-hero-banda .res-num-valor--maior{ font-size:28px; margin-bottom:0; }
  .mt-hero-banda .res-num:first-child .res-num-rotulo,
  .mt-hero-banda .res-num:last-child .res-num-rotulo{ font-size:17px; }
  .mt-hero-banda .res-num-fio{ height:56px; }
  .mt-ganhos{ grid-template-columns:1fr; }
  .mt-entregas-cab{ flex-direction:column; gap:24px; }
  .mt-entregas-cab .cs-garantia-titulo, .mt-entregas-apoio{ width:100%; }
  .sol-cards.mt-entregas{ gap:16px; }
  .mt-entregas-faixa{ flex-direction:column; align-items:flex-start; padding:24px; }
  /* no celular o parágrafo já nasce ligado: o cartão volta à proporção
     do arquivo (mais alto que o 4/5 da Home) pra o texto não cobrir o rosto */
  .sol-card.sol-card--texto{ aspect-ratio:503 / 706; }
  .sol-card--texto .sol-titulo{ font-size:15px; line-height:1.45; }
  .mt-fwb{ grid-template-columns:minmax(0, 1fr); width:100%; gap:28px; }
  .mt-fwb-texto{ gap:24px; }
  /* no celular a caixa dos painéis tem a altura do que está ativo: com a
     altura do maior, sobrava um vão grande entre o texto curto e a arte,
     e o bloco parecia outra dobra. Quem sai fica por cima, sem ocupar
     lugar, enquanto apaga. */
  .mt-fwb-paineis{ position:relative; display:block; }
  .mt-fwb-painel{ position:absolute; top:0; left:0; right:0; }
  .mt-fwb-painel.is-ativo{ position:relative; }
  .mt-dupla-in{ flex-direction:column; align-items:stretch; gap:40px; }
  .mt-dupla-texto{ flex:none; }
  .mt-dupla--espelho .mt-dupla-arte{ order:2; }
  /* arte de linha a linha. Na das Gestões o fundo amarelo começa 7,09% para
     dentro do arquivo (o cubo passa por cima dele), então a imagem cresce
     e recua essa margem para o fundo encostar nas duas linhas */
  .mt-dupla-arte, .mt-dupla-arte--aceleradores{ flex:none; width:100%; max-width:none; }
  .mt-dupla-arte--gestoes{ width:107.63%; margin-left:-7.63%; }
  .mt-gestoes{ padding-bottom:80px; }
  .mt-praquem-in{ flex-direction:column; align-items:stretch; gap:40px; }
  .mt-praquem-arte{ flex:none; width:min(580px, 88%); align-self:center; }
  .mt-praquem-texto{ flex:none; }
}
@media (max-width:767px){
  /* o arquivo não tem hero de celular: a foto desce para as pessoas
     ficarem no pé, e um véu escuro no alto segura o texto branco */
  body.v2 .e-painel.mt-hero .cs-hero-arte{ top:auto; height:560px; }
  .mt-hero-banda{ padding:20px; align-items:center; }
  .mt-hero-banda .res-numeros{ justify-content:center; }
  .mt-hero-banda .res-num:first-child, .mt-hero-banda .res-num:last-child{ align-items:center; text-align:center; }
  /* desfaz a posição fixa do fundo de celular da Consultoria (v2.css) */
  body.v2 .e-painel.cs-hero.mt-hero .cs-hero-foto{
    inset:0; width:100%; height:100%; object-fit:cover; object-position:76% 0;
  }
  .mt-hero .cs-hero-arte::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, var(--ink) 0%, rgba(12,22,27,.55) 22%, rgba(12,22,27,0) 45%);
  }
  .mt-conexao{ padding:60px 0; }
  .mt-praquem{ padding:40px 0 60px; }
  .mt-conexao-fecho{ font-size:20px; line-height:26px; }
  .mt-destaque{ height:40px; }
  .mt-ganhos-dobra{ padding:24px 0 60px; }
  .mt-ganho{ padding:28px 22px; border-radius:24px; }
  .mt-titulo-32{ font-size:24px; line-height:28px; }
  .mt-praquem .mt-titulo-32{ line-height:28px; }
  .mt-gestoes .mt-dupla-titulo, .mt-aceleradores .mt-dupla-titulo{ max-width:none; }
  .mt-frameworks, .mt-entregas-dobra{ padding:60px 0; }
  .mt-aceleradores{ padding-bottom:60px; }
  .mt-gestoes{ padding-bottom:60px; }
  .mt-frameworks .cs-casos-cab .cs-titulo{ font-size:24px; width:100%; }
  .mt-frameworks .cs-casos-cab, .mt-fws, .mt-fws-pe{ width:100%; }
  .mt-fws-pe p{ font-size:18px; }
  .mt-lista-ic{ grid-template-columns:1fr; }
  .mt-btn{ align-self:stretch; justify-content:center; }
  .mt-racional{ margin-bottom:60px; }
}