/* ============================================================
   Metta — Soluções
   Camada exclusiva desta página. Medidas do Figma 1080:7486
   (arquivo Site), quadro de 1440x4696, versão definitiva de
   04/09/2026.

   O que mudou em relação à revisão anterior (1067:2796):
   hero escuro de 782 com a montagem de arcos e fotos achatada
   num JPG só, texto centralizado e sem as pílulas de rótulo,
   foto da consultoria trocada, setas de anterior e próxima
   vindas do arquivo, painel na largura cheia do container e
   botão da consultoria escuro como os outros dois.

   A dobra das frentes é UM bloco: no arquivo as três variantes
   estão empilhadas só para mostrar o conteúdo de cada uma. Aqui
   só uma aparece por vez, e a barra troca o conteúdo.

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


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

/* o topo junta hero e dobra 2 porque os arcos atravessam os dois:
   eles começam em 723, ainda dentro do hero, e terminam em 1126,
   já no branco. O overflow segura o que sangra pelas laterais. */
.so-topo{ position:relative; overflow:hidden; }


/* ============================================================
   01 · HERO
   Figma 1080:7487 — 1440x782, fundo #34444d.

   A arte é uma fileira de cinco arcos com fotos mascaradas
   dentro, mais um véu radial que sai de transparente no meio e
   fecha em #0c161b nas bordas.

   CORREÇÃO DE 18/09: o height:782 abaixo NÃO é o que renderiza.
   Esta dobra tem a classe .e-painel (marcação em solucoes.py), e a
   regra "PRIMEIRA DOBRA PADRÃO" em css/v2.css (~4917, mais específica
   por causa de "body.v2 .dobra[data-dobra=hero].e-painel") sobrescreve
   altura e largura: height:var(--dobra1-alt, 660px), sem override
   declarado aqui, então fica em 660; width:var(--linha-site), que é
   min(1272, 100% - 168), ou seja, no máximo 1272 e nunca a largura
   cheia do viewport. A caixa real em 1440 de viewport é 1272x660, não
   1440x782. Por causa disso, a nota antiga sobre "não abrir emenda em
   tela mais larga que 1942" também caiu: como a largura tem teto de
   1272 pelo próprio --linha-site, não existe mais viewport em que o
   painel passe de 1942, então o esquema de tamanho fixo em pixel para
   evitar emenda não é mais necessário em nenhuma largura.

   Com a caixa real 1272x660 (razão 1,927) e a arte de 2700x1320 (razão
   2,045) que valia até 18/09, a altura da arte era o dobro exato da
   caixa, e "cover" não cortava nada na vertical. Isso era uma
   coincidência daquele arquivo, não uma regra.

   ATENÇÃO, e isto foi um defeito real visto no site em 18/09: a posição
   vertical NÃO mora aqui, mora em css/v2.css
   (body.v2 .e-painel.so-hero), e ela vence esta regra. Enquanto ela
   valia 50% -100px, "cover" não a tornava inerte, como uma versão
   anterior deste comentário afirmava: como "cover" deixa a arte com
   exatamente a altura da caixa, não sobra folga para deslocar, então o
   -100 parava de recortar e passava a DESCOBRIR 100px de cor de base
   (#141d22) no pé do painel. Na tela isso vira um fio atravessando a
   dobra logo abaixo do botão. A regra do v2.css foi para 50% 0.
   Se um dia a arte voltar a ser mais alta que a caixa, a ancoragem
   precisa ser revista junto, nos dois arquivos.

   REEXPORTAÇÃO DE 18/09 ÀS 17H07: arquivo novo em 3000x1586, razão
   1,892, veio mais baixo que o de antes (não é mais 2x a caixa). Com a
   posição do v2.css em 50% 0 (imagem ancorada pelo topo, sem folga pra
   cima), qualquer sobra de "cover" é cortada só no pé, nunca no topo,
   então os rostos (que ficam no terço de cima da arte) não correm
   risco. Conferi o recorte em cada largura testada:
     1280 (caixa 1184x660, razão 1,794): cover escala pela altura,
       zero corte vertical, ~32px de corte de cada lado na horizontal.
     1440 (caixa 1272x660, razão 1,927): cover escala pela largura,
       ~12,6px de corte vertical, tudo no pé (posição 0), nada lateral.
     1920 a 3440 (caixa travada em 1511x660, razão 2,289, ver teto do
       container abaixo): cover escala pela largura, ~139px de corte
       vertical no pé. Ainda sobra rosto e corpo de sobra, mas é o pior
       caso, e é justamente onde a troca para o ultrawide entra (ver
       media query abaixo), então esse corte grande nunca chega a
       aparecer de verdade na tela.
   Testado e provado por imagem lado a lado (ver relato). */
.so-hero{
  position:relative; height:782px; color:var(--branco);
  background:#141d22 url("../assets/solucoes/hero-solucoes.jpg")
             center / cover no-repeat;
}

/* ============================================================
   DEGRAU DE TELA LARGA — 18/09, 17h07, revisado no mesmo dia
   Arte "Hero solucoes ultrawide.png", 5876x1978, razão 2,971: mesma
   composição das três pessoas, mais centralizada e com muito mais
   área escura nas laterais, feita para telas muito largas.

   A PRIMEIRA VERSÃO deste degrau comparava a razão da caixa do painel
   com a razão das duas artes (a ideia era trocar quando a caixa
   ficasse mais perto de 2,971 do que de 1,892). Essa regra foi
   descartada: razão de caixa não diz nada sobre onde a composição
   quebra, e a conta nem fechava (o teto do container em 1511, ver
   abaixo, prende a caixa numa razão que fica sempre mais perto do
   desktop). Quem decide agora é a composição: o degrau entra quando o
   título passa a cair em cima dos rostos, não mais quando as razões
   se aproximam. Se algum dia mexerem na altura da dobra (--dobra1-alt)
   ou no recuo do texto (padding-top de .so-hero-in em css/v2.css),
   essa conta precisa ser refeita, porque ela depende dos dois.

   MEDIÇÃO: o bloco de texto (título + parágrafo) fica numa posição
   fixa dentro do painel, independente da largura, porque a coluna de
   662px sempre cabe nas caixas testadas (nunca reflow). Medido por
   getBoundingClientRect: título começa em y=319 do topo do painel
   (valor puxado de css/v2.css, .so-hero-in{padding-top:319px}, NÃO os
   421px que o comentário abaixo cita, que é de uma versão anterior da
   dobra). Com "cover" e posição 50% 0 (ancorada no topo, sem recorte
   em cima), a arte de desktop escala por LARGURA nesta faixa toda
   (3000x1586: largura/3000 sempre maior que altura/1586 pros valores
   de caixa aqui), então todo ponto da arte desce e cresce junto com a
   largura da caixa, na mesma proporção. Isso empurra o rosto mais
   baixo do trio (o homem à esquerda, queixo perto de y=620 no arquivo
   original) pra baixo dentro do painel conforme a caixa cresce, até
   encostar no título.
   Varri a largura em passos de 5px (bem abaixo do pedido de 20) lendo
   a cor real da tela (script liga um classificador de tom de pele na
   faixa do queixo e olha se ela invade a faixa do título), a partir de
   1440 como pedido:
     1440 (caixa 1272x660): folga de 4,1px, sem toque.
     1445 a 1455 (caixa 1277 a 1287): folga cai de 2,2px pra 0,1px.
     1456 (caixa 1288): folga de 0,07px, ainda sem tocar.
     1457 (caixa 1289): pele já entra 0,86px na faixa do título.
   Ponto de troca: viewport = 1457px (caixa 1289x660). Esse é o valor
   usado abaixo. É uma virada de 1px de caixa (1288 pra 1289), então na
   prática é o primeiro contato, não uma folga generosa; abaixo de 1500
   o toque é só uma unha de encostar, fica visualmente claro só a
   partir de uns 1520-1600 (conferido por captura).

   SEGUNDO INTERVALO, tratado: essa mesma caixa crítica de 1289 é
   cruzada duas vezes, uma subindo e uma descendo, por causa de um
   salto que já existia na cascata antes de qualquer coisa que eu
   mudei hoje: --gutter salta de 48 (até 1439) para 84 (de 1440 a
   1727), então a fórmula da caixa muda de "viewport-96" para
   "viewport-168" exatamente no limite entre as duas, e a largura
   DESPENCA de 1343 (em 1439) para 1272 (em 1440) de um pixel de
   viewport para o outro. É o mesmo mecanismo do salto que já estava
   documentado mais abaixo para 1728, só que ali ele empurra a caixa
   pra CIMA do teto e aqui ele empurra pra BAIXO da caixa crítica. Não
   é bug novo, é a mesma cascata de sempre reagindo a uma arte mais
   alta, que antes não chegava perto o bastante do título pra isso
   importar.
   Medido com o mesmo classificador de tom de pele na faixa do queixo,
   por baixo, dentro do intervalo do gutter=48 (fórmula viewport-96):
     1384 (caixa 1288): folga de 0,16px, sem toque.
     1385 (caixa 1289): pele entra 0,83px na faixa do título.
   Ou seja, o limite de baixo é IDÊNTICO ao de cima em termos de caixa
   (1289), só que alcançado por outra fórmula de gutter. O intervalo
   onde o título cruza o rosto por baixo é 1385 até 1439 (o próprio
   teto do gutter=48, já um breakpoint existente no site, não um
   número que eu inventei); em 1440 a fórmula muda, a caixa cai para
   1272 e o problema some sozinho até reaparecer em 1457.

   SOLUÇÃO: duas faixas com a arte ultrawide, uma para cada cruzamento,
   com a arte de desktop valendo nos dois intervalos de fora (onde a
   caixa fica abaixo de 1289) e também no miolo entre 1440 e 1456
   (onde a caixa volta a ficar pequena o bastante). Ver as duas media
   queries abaixo.

   TRANSIÇÃO EM 1439→1440 e 1456→1457: capturei o par exato dos dois
   lados de cada limite pra conferir, não só o número. Em 1456→1457 a
   troca é suave: a caixa muda só 1px (1288 pra 1289), então as duas
   artes recortadas por "cover" ficam quase idênticas na tela, sem
   salto perceptível. Em 1439→1440 a troca é mais visível, mas o motivo
   principal NÃO é a troca de arte: é o próprio painel encolhendo de
   1343 pra 1272 de largura no mesmo pixel (o salto de --gutter descrito
   acima, que já existia antes de qualquer coisa que eu mudei hoje). A
   troca de imagem some em cima desse encolhimento; separar quanto vem
   de cada um a olho não é possível, mas nenhum dos dois produz faixa
   de cor ou corte de rosto, só uma mudança de escala perceptível se
   alguém parar o olho exatamente naquele pixel ao arrastar a janela.
   Não há como suavizar isso sem interpolar as duas imagens (fora de
   escopo) ou sem mexer no salto do --gutter em css/v2.css (não é meu
   arquivo), então deixei registrado em vez de esconder.

   TETO DO CONTEÚDO (contexto, não decide mais o ponto de troca): body.v2
   fixa --container em 1511px (v2.css linha ~11), então a caixa nunca
   passa de 1511 de largura. --gutter vira 120px a partir de 1728. A
   largura para de crescer a primeira vez em 1679 (não 1751: 1679 já
   usa o gutter de 84 que vale até 1727, dá 1679-168=1511; 1751 só
   valeria se o gutter de 120 já estivesse ativo ali, mas ele só entra
   em 1728). Entre 1728 e 1751 a caixa cai para 1488 e volta a subir
   até 1511 de novo (o mesmo mecanismo do intervalo de 1440, só que
   aqui a caixa não desce o bastante pra cruzar a caixa crítica de
   volta, então não abre um terceiro intervalo de desktop). Fica
   registrado porque explica a caixa não crescer mais depois de 1679
   (getBoundingClientRect em 1280/1440/1670/1679/1700/1728/1751/1920/
   2560/3440, tudo batendo). */
@media (min-width:1385px) and (max-width:1439px){
  .so-hero{
    background-image:url("../assets/solucoes/hero-solucoes-ultrawide.jpg");
  }
}
@media (min-width:1457px){
  .so-hero{
    background-image:url("../assets/solucoes/hero-solucoes-ultrawide.jpg");
  }
}

/* ---------- texto do hero, Figma 1080:7639 ----------
   Centralizado, 662 de largura, começando a 421 do topo. */
.so-hero-in{
  position:relative; z-index:2;
  width:min(var(--container), 100% - var(--gutter) * 2);
  margin:0 auto; padding-top:421px;
}
.so-hero-texto{
  width:662px; max-width:100%; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:34px;
  text-align:center;
}
.so-hero-bloco{
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.so-hero-titulo{
  font-family:var(--display); font-weight:600; font-size:40px; line-height:1.04;
  color:var(--branco);
}
/* no arquivo só os trechos em negrito são brancos; o resto é #b3c5cf */
/* a subheadline vinha em dois tons, o corpo no cinza-azulado e so os
   nomes das tres frentes em branco. Renan fechou tudo em branco em
   17/09: sobre a foto do hero o cinza perdia contraste. O negrito fica,
   e agora ele e o unico realce. */
.so-hero-apoio{
  font-size:18px; line-height:1.1; color:var(--branco);
}
.so-hero-apoio b{ font-weight:700; color:var(--branco); }
.so-hero-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:49px; padding:14px 16px; border-radius:100px;
  background:var(--amarelo); color:var(--ink);
  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);
}
.so-hero-btn:hover{
  background:#ffc93f; transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(255,190,24,.28);
}


/* ============================================================
   02 · NEM TODA EMPRESA PRECISA DA MESMA COISA
   Figma 1080:7553 — bloco de 472 centralizado, texto de 880 a
   1105. A dobra ocupa de 782 (fim do hero) a 1179 (começo das
   frentes), então 98 em cima e 74 embaixo.
   ============================================================ */
.so-metodo{ background:var(--branco); padding:98px 0 71px; }  /* 74 no arquivo, 71 aqui: o texto renderiza 2,9 mais alto que a
     caixa do Figma, e o que precisa bater é o começo das frentes */
.so-metodo-texto{
  width:472px; max-width:min(472px, 100% - var(--gutter) * 2);
  display:flex; flex-direction:column; align-items:center; gap:21px;
  text-align:center;
}
.so-metodo-titulo{
  font-family:var(--display); font-weight:400; font-size:32px; line-height:1.04;
  color:var(--ink);
}
.so-metodo-corpo{
  font-size:18px; line-height:1.3; color:var(--corpo);
}

/* ---------- os arcos, Figma 1080:7554 e 1083:8083 ----------
   Dois grupos iguais de 604,4x185, em alturas diferentes: o da
   esquerda em 723, que é dentro do hero, e o da direita em 941.
   No arquivo eles são irmãos que vêm depois do texto, então
   passam por cima dele; aqui a camada é posicionada, o que dá a
   mesma ordem de pintura. O palco de 1440 é o que mantém o par
   ancorado no eixo da página em tela mais larga. */
.so-arcos{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.so-arcos-palco{
  position:relative; width:1440px; height:100%; margin:0 auto;
}
.so-arcos-esq,
.so-arcos-dir{
  position:absolute; width:604.398px; height:185px; display:block;
}
.so-arcos-esq{ left:-61px;  top:723px; }
.so-arcos-dir{ left:997px;  top:941px; }


/* ============================================================
   03 · AS TRÊS FRENTES
   Figma 1080:7568 — bloco de 1272 a partir de 1179, com a barra
   (1080:7570) e o painel que troca de conteúdo (1080:7582).
   ============================================================ */
.so-frentes{ background:var(--branco); padding:0 0 92px; }
.so-frentes-in{
  width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
  display:flex; flex-direction:column; gap:18px;
}

/* ---------- painel, Figma 1080:7582 ----------
   1272x608, raio 56, padding 32 e vão de 43. Os dois filhos têm
   largura fixa (480 e 523) e o conjunto é centrado: sobram 81 de
   cada lado, que é o que põe a foto em 113 no arquivo.
   22/09: sem barra de abas, os três ficam sempre visíveis, empilhados
   (gap de .so-frentes-in).

   22/09, corrigido: a cor sólida (escura/amarela/cinza) NÃO é do painel
   inteiro -- é só do arquivo da FOTO, que já vem composto do Figma com
   fundo + palavra grande + foto achatados num PNG só (ver comentário em
   .so-foto). O painel em si é o MESMO cinza-azulado clarinho nas três
   frentes -- Renan apontou isso depois de eu errar aplicando --ink/
   --amarelo/--linha (os tokens dos cards de Soluções da Home) no
   painel inteiro, o que também virava o texto branco à toa. */
.so-painel{
  width:100%;
  background:#f3fbff; border-radius:56px; padding:32px;
  display:flex; align-items:center; justify-content:center; gap:43px;
}

/* ---------- lado da foto ----------
   Uma imagem só por frente: a cor de fundo, a palavra grande, o
   arco e a foto já vêm compostos no arquivo exportado -- é ESSA imagem
   que carrega a cor sólida da frente (escuro/amarelo/cinza), não o
   painel. 22/09: o Renan trocou pra PNG com alfa (canto arredondado já
   vem no arquivo, e object-fit:cover evita esticar -- a proporção da
   arte nova, 504x706, não bate exatamente com a caixa 480x544) +
   <picture> com fonte própria de celular (ver solucoes.py).
   object-position:top é o ajuste de 22/09: a palavra grande mora no
   topo do arquivo, então o corte do object-fit:cover tem que tirar
   sempre da base pra baixo, nunca do topo -- senão a palavra corta. */
.so-foto{
  flex:none; display:block; object-fit:cover; object-position:top;
  width:480px; height:544px; border-radius:47.772px;
}

/* ---------- lado do texto ---------- */
.so-texto{
  flex:none; width:523px; max-width:100%; align-self:stretch;
  display:flex; flex-direction:column; justify-content:center; gap:21px;
}
.so-texto-cab{ display:flex; flex-direction:column; gap:6px; }
.so-chapeu{
  font-family:var(--display); font-weight:500; font-size:12px; line-height:1.25;
  letter-spacing:.12px; text-transform:uppercase; color:var(--ink);
}
.so-titulo{
  width:480px; max-width:100%;
  font-family:var(--display); font-weight:400; font-size:32px; line-height:1.04;
  color:var(--ink);
}
.so-corpo{ font-size:14px; color:var(--corpo); }
/* a margem entre parágrafos é a linha vazia do arquivo, então ela
   acompanha a entrelinha de cada frente */
.so-corpo p + p{ margin-top:1.1em; }
.so-corpo p.colado{ margin-top:0; }
/* no arquivo a consultoria respira 1,3 e as outras duas 1,1, e o
   chapéu da consultoria fica 14 do título contra 6 nas outras */
.so-painel--consultoria .so-texto-cab{ gap:14px; }
.so-painel--consultoria .so-corpo{ line-height:1.3; }
.so-painel--consultoria .so-corpo p + p{ margin-top:1.3em; }
.so-painel--mentoria    .so-corpo,
.so-painel--palestras   .so-corpo{ line-height:1.1; }

/* o pe do painel: no computador so o botao mora aqui, e as setas ficam
   na barra de cima. No celular as duas coisas trocam de lugar. */
.so-painel-pe{ display:flex; align-items:center; }
/* escuro nas três frentes no arquivo -- não muda com a cor da imagem
   ao lado, ver comentário em .so-painel */
.so-btn{
  align-self:flex-start;
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 26px; border-radius:40px;
  font-family:var(--texto); font-weight:600; font-size:15px; line-height:1.2;
  background:var(--ink); color:var(--branco);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             background-color .22s var(--ease);
}
.so-btn:hover{
  background:#1b2a33; transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(12,22,27,.28);
}


/* ============================================================
   04 · CTA FINAL
   Figma 1080:7488 — 1272x549, painel escuro de raio 56.
   Fechamento único da página: leva para a sessão estratégica.
   ============================================================ */
.so-cta{ padding:0 0 129px; background:var(--branco); }
.so-cta-painel{
  background:var(--ink); border-radius:56px; overflow:hidden;
  padding:88px 64px;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  text-align:center;
}
.so-cta-painel h2{
  width:710px; max-width:100%;
  font-family:var(--display); font-weight:500; font-size:32px;
  line-height:1.16; color:var(--branco);
}
.so-cta-corpo{
  width:614px; max-width:100%;
  font-size:17px; line-height:1.5; color:var(--branco);
}
.so-cta-corpo p + p{ margin-top:1.5em; }
.so-cta-painel .so-cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 26px; border-radius:40px;
  background:var(--amarelo); color:var(--ink);
  font-family:var(--texto); font-weight:600; font-size:15px; line-height:1.2;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             background-color .22s var(--ease);
}
.so-cta-painel .so-cta-btn:hover{
  background:#ffc93f; transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(255,190,24,.28);
}


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

/* ---------- desktop mini ---------- */
@media (max-width:1439px){
  .so-painel{ gap:32px; }
  /* os dois lados passam a dividir o que existe, mantendo a
     proporção da foto do arquivo */
  .so-foto{ width:40%; max-width:480px; height:auto; aspect-ratio:480/544; }
  .so-texto{ flex:1 1 0; width:auto; min-width:0; }
  .so-titulo{ width:100%; }
}

/* ---------- tablet: painel em coluna ---------- */
@media (max-width:1023px){
  .so-hero{
    height:auto;
    background-position:50% -10px;
    background-size:cover;
  }
  .so-hero-in{ padding:200px 0 96px; }
  .so-hero-titulo{ font-size:34px; }
  .so-metodo{ padding:64px 0 56px; }
  /* os arcos saem: em tela estreita eles cruzam o texto */
  .so-arcos{ display:none; }
  .so-metodo-titulo{ font-size:28px; }
  .so-painel{ flex-direction:column; align-items:stretch; border-radius:40px; }
  .so-foto{ width:100%; max-width:none; }
  .so-texto{ align-self:auto; }
  .so-cta{ padding:0 0 96px; }
  .so-cta-painel{ padding:56px 40px; border-radius:40px; }
  .so-cta-painel h2{ font-size:34px; }
}

/* ---------- mobile ---------- */
@media (max-width:767px){
  /* recuo lateral por dobra, medido no quadro de celular do arquivo: o hero
     abre em 28, o metodo em 30 e o painel de CTA em 22. O site usava 20 em
     todas, o que deixava o texto mais perto da borda do que o desenho pede.
     Entra como desconto de largura para telas de 360 e 430 acompanharem. */
  .so-hero-in{ width:calc(100% - 56px); }
  .so-metodo-texto.so-in{ width:calc(100% - 60px); }
  .so-cta-painel.so-in{ width:calc(100% - 44px); }

  .so-hero-in{ padding:150px 0 72px; }
  .so-hero-titulo{ font-size:28px; }
  .so-hero-apoio{ font-size:16px; line-height:1.35; }
  .so-metodo-corpo{ font-size:16px; }
  .so-painel{ padding:20px; border-radius:32px; }
  /* a fonte de celular (<picture>, ver solucoes.py) é paisagem, 316x231
     -- sem isto ela herdava a proporção retrato do desktop (480/544) e
     cortava a foto por cima e por baixo à toa */
  .so-foto{ border-radius:32px; aspect-ratio:316/231; }
  .so-titulo{ font-size:26px; }
  /* 14 com entrelinha 1,1 fica apertado demais em coluna estreita */
  .so-painel--mentoria .so-corpo,
  .so-painel--palestras .so-corpo{ line-height:1.35; }
  .so-painel--consultoria .so-corpo{ line-height:1.45; }
  .so-cta-painel{ padding:40px 24px; }
  .so-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){
}

/* ============================================================
   PAINÉIS NO CELULAR — frame 1101:3301
   Sem barra de abas (removida em 22/09): os três painéis empilham na
   ordem natural do documento, cada um sempre visível.
   ============================================================ */
@media (max-width:767px){
  /* ---------- corpo do painel, Figma 1216:951 ----------
     headline 18 e corpo 14 com entrelinha de 120%. O site vinha com 26
     na headline, que e medida de tablet, e com tres entrelinhas
     diferentes por frente. */
  .so-titulo{ font-size:18px; line-height:1.2; }
  .so-corpo,
  .so-painel--consultoria .so-corpo,
  .so-painel--mentoria .so-corpo,
  .so-painel--palestras .so-corpo{ font-size:14px; line-height:1.2; }
}

/* ============================================================
   HERO DE SOLUÇÕES NO CELULAR — Figma 1101:3301
   No arquivo a dobra tem 736: a tira de fotos ocupa só o alto e o texto
   vem DEPOIS dela, sobre o escuro chapado. O que estava aqui usava
   `cover`, então a tira de 1942x802 era ampliada até encher a tela e o
   título caía em cima dos rostos, ilegível.
   ============================================================ */
@media (max-width:767px){
  /* a arte de celular e outra peca (Figma "Hero solucoes - Mobile",
     430x1007): as pessoas ficam no alto e o escuro desce para o texto.
     Por isso ela e ancorada no TOPO, ao contrario das outras tres. */
  .so-hero{
    background:#141d22 url("../assets/solucoes/hero-mobile.jpg") 50% 0 / cover no-repeat;
  }
  .so-hero-in{ padding:392px 0 0; }
  .so-hero-titulo{ font-size:28px; }
}