/* ============================================================
   Metta — Sessão estratégica
   Camada exclusiva desta página. Todas as medidas saem do Figma
   1025:1402 (arquivo Site), quadro de 1440x6612, container 1272
   com margem de 84. Construída dobra a dobra a partir do design,
   não a partir da versão anterior da página.

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

body.pg-sessao{
  --se-arco: 126.851px;      /* diâmetro do arco de card, Figma arco-card.svg */
}
/* o header desta página nasce a 47 do topo (Figma 1025:1456), e não
   nos 70 da home v2 */

/* Mesma coluna do resto do site: em 1440 o token já resolve para 1272,
   que é o container do arquivo, e em tela larga a página acompanha o
   header das outras 22 em vez de abrir uma medida própria. */
.se-in{
  width:min(var(--container), 100% - var(--gutter) * 2);
  margin:0 auto;
}

/* botão amarelo da página: px 28 / py 16, texto 15 Inter Medium */
.se-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--amarelo); color:var(--ink);
  font-family:var(--texto); font-weight:500; font-size:15px; line-height:1.2;
  padding:16px 28px; border-radius:100px; white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             background-color .22s var(--ease);
}
.se-btn:hover{
  background:#ffc93f; transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(255,190,24,.28);
}


/* ============================================================
   01 · PRIMEIRA DOBRA, DENTRO DO PAINEL
   Figma 1306:18903 — painel de 1360x587 começando 24 abaixo do menu.
   O arquivo refez a abertura: o título saiu do centro e virou coluna da
   esquerda dentro do painel (nó 1306:18924, x=74 y=77, 526 de largura),
   e o cartão do formulário virou coluna da direita (nó 1306:18940,
   x=673 y=112, 634 de largura, 849 de altura), que começa dentro do
   painel e desce 374 por baixo dele.

   POR QUE ESTA SEÇÃO NÃO É O PAINEL
   Em todas as outras páginas a primeira dobra é o próprio painel: a
   seção tem a altura desenhada, o canto arredondado e corta o que
   passa. Aqui o formulário precisa transbordar de propósito, e nada
   que corte serve. Então a seção cresce com o conteúdo e o painel
   vira uma camada própria, .se-painel, com a altura do arquivo.
   ============================================================ */
.se-hero{
  position:relative;
  color:var(--ink);
}

/* a camada que desenha o painel: fundo, arcos e o canto */
.se-painel{
  position:absolute; left:0; right:0; top:0; z-index:0;
  height:var(--dobra1-alt); pointer-events:none;
  border-radius:60px; overflow:hidden;
  /* O fundo vem como SVG porque as duas elipses do arquivo são giradas
     (a matriz tem termos fora da diagonal), e é a rotação que concentra
     o brilho na diagonal de cima à direita em vez de escorrer pela
     lateral inteira. Em radial-gradient do CSS a rotação se perde. O
     preserveAspectRatio="none" faz o brilho acompanhar a dobra, que é o
     mesmo que o Figma faz ao esticar o quadro. */
  background:url("../assets/sessao/hero-brilho.svg") center/100% 100% no-repeat,
             var(--branco);
}
@supports (corner-shape: squircle){
  .se-painel{ corner-shape:squircle; }
}
/* os arcos brancos agora são uma fileira só, e não duas: no painel o
   grupo 1306:18904 começa em x=-1153 e y=502 e tem 2513x710, ou seja
   sangra pela esquerda e só mostra a ponta de cima antes do corte. */
.se-painel img{ position:absolute; height:709.752px; max-width:none; }
.se-painel img:nth-child(1){ width:2241.923px; left:-1153px; top:502px; }
.se-painel img:nth-child(2){ display:none; }

/* as duas colunas. O vão de 73 é o do arquivo; a coluna do título cede
   primeiro porque o cartão tem largura fixa, medida campo a campo. */
/* O painel do site tem a largura do menu, 1272 em 1440, e o do arquivo
   tem 1360: sobram 88 a menos para dividir entre as duas colunas. Quem
   cede é o cartão, que é fluido por dentro, e não a coluna do título:
   estreitar o título faz ele ganhar linhas e bater na faixa de logos.
   Acima de 1272 a sobra vai toda para o vão, que é o que o
   space-between faz, e aí cada coluna fica na medida desenhada. */
.se-hero-in{
  position:relative; z-index:2;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:73px; padding:0 50px;
}

/* ---------- bloco de título, Figma 1306:18924 (526 de largura) ---------- */
.se-hero-texto{
  flex:0 0 526px; width:auto; max-width:526px; margin:0;
  padding-top:77px;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
  text-align:left;
}

/* ---------- coluna da direita: cartão e números ---------- */
.se-hero-lado{
  flex:0 1 633.5px; min-width:0; max-width:100%; margin-top:112px;
}
.se-chapeu{
  font-family:var(--display); font-weight:500; font-size:12px; line-height:15px;
  text-transform:uppercase; color:var(--muted);
}
.se-hero-titulo{
  font-family:var(--display); font-weight:600; font-size:40px; line-height:1.04;
  color:var(--ink);
}
.se-hero-apoio{
  font-size:18px; line-height:20px; color:var(--ink);
}
.se-hero-bloco{
  display:flex; flex-direction:column; align-items:flex-start; gap:18px; width:100%;
}

/* ---------- selo de especialistas, Figma 1025:1830 ---------- */
.se-selo{
  display:flex; align-items:center; gap:8px; padding-bottom:8px;
}
.se-selo-fotos{ display:flex; align-items:center; }
.se-selo-fotos span{
  position:relative; display:block; flex:none;
  width:54.254px; height:54.254px; border-radius:50%;
  border:1.55px solid #787878; background:#b7b7b7 center/cover no-repeat;
  overflow:hidden;
}
.se-selo-fotos span + span{ margin-left:-10.076px; }
.se-selo-fotos img{ position:absolute; max-width:none; object-fit:cover; }
/* cada retrato tem enquadramento próprio no arquivo: tamanho e recuo
   saem dos nós 1025:1834 / 1836 / 1838 */
.se-selo-fotos span:nth-child(1) img{ width:84px;  height:84px; left:-16.55px; top:-16.55px; }
.se-selo-fotos span:nth-child(2) img{ width:53px;  height:56px; left:-1.73px;  top:-1.55px; }
.se-selo-fotos span:nth-child(3) img{ width:57px;  height:57px; left:-3.91px;  top:-4.55px; }
.se-selo p{
  width:164px; text-align:left;
  font-size:16px; font-weight:500; line-height:1; color:var(--ink);
}

/* o cartão do formulário e a caixa do campo moram em v2.css, no bloco
   .fp-*: a Mentoria usa o mesmo desenho. O que é só desta página fica
   aqui. */
.se-form{
  /* 80 a menos que o padrão do .fp-cartao (535), a pedido do Renan em
     15/09: o cartão fecha em 769 no lugar dos 849 do arquivo. A etapa do
     faturamento continua sendo a única que rola por dentro. */
  --fp-palco-alt:455px;
}


/* ============================================================
   02 · FAIXA DE CLIENTES
   Figma 1025:2119 — 1439x146 sangrada, encostada na base do hero.
   ============================================================ */
/* na versão clara a faixa é vidro: branco a 20% com desfoque e contorno
   branco de 1px em volta, e não mais a banda escura */
/* Nó 1025:2119: 680x146, começa em y=584 do painel, ou seja atravessa a
   base dele pela esquerda e desce 143. Branco a 20%, contorno branco de
   1 e desfoque de fundo de 142,3, que no CSS é a metade.
   22/09, corrigido: a faixa tem que ficar ATRÁS do cartão do formulário
   (Renan), não na frente -- z-index abaixo do .se-hero-in (2), e larga o
   quadro inteiro em vez de tentar calcular o vão antes do cartão (essa
   conta dependia de o cartão ficar exatamente a 633.5px + 24px da borda,
   e com justify-content:space-between em .se-hero-in o vão real muda com
   a largura da tela -- a faixa passava por baixo do cartão errado). Com
   z-index mais baixo o cartão, que é opaco, cobre sozinho o que precisa
   cobrir, não importa a largura. Fica só o efeito de esmaecer as duas
   pontas (mask-image), que é o que dá a leitura de vidro em vez de caixa
   com borda reta. */
.se-faixa{
  position:absolute; left:0; right:0; top:584px; z-index:1;
  height:146px;
  display:flex; align-items:center;
  border:1px solid var(--branco);
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(71.15px); -webkit-backdrop-filter:blur(71.15px);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.se-faixa-in{ display:flex; align-items:center; padding-left:29px; }
/* 22/09: o Renan trocou as seis marcas genéricas por sete clientes reais
   de caso (nó 1025:2120). Cada arquivo já é um SVG colorido (pílula
   azul-acinzentada + logo branco por dentro) -- não é mais máscara CSS
   de cor única com --se-faixa-logo, é <img> direto, largura/altura por
   variável (--w/--h, ver sessao.py) porque cada marca tem proporção
   própria. */
.se-faixa-logos{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.se-faixa-marca{ display:block; flex:none; width:var(--w); height:var(--h); }


/* ============================================================
   03 · SINAIS DE ALERTA
   Figma 1025:1561 — 1272x609, dobra clara, 2 linhas de 3 cards.
   ============================================================ */
.se-sinais{ padding-top:81px; background:var(--branco); }
.se-sinais-in{ display:flex; flex-direction:column; gap:40px; }
.se-sinais-topo{
  display:flex; align-items:flex-end; justify-content:space-between; gap:64px;
}
.se-sinais-topo > div{ display:flex; flex-direction:column; gap:8px; width:44.26%; }
.se-sinais-topo .se-chapeu{ color:var(--ink); }
.se-sinais-topo h2{
  font-family:var(--display); font-weight:500; font-size:32px; line-height:1.16;
  color:var(--ink);
}
.se-sinais-topo > p{
  width:44.34%; flex:none;
  font-size:16px; line-height:1.3; color:var(--apoio);
}
.se-sinais-linha{ display:flex; gap:24px; }
.se-sinal{
  flex:1 1 0; min-width:0; min-height:216px;
  display:flex; flex-direction:column; justify-content:center; gap:12px;
  background:var(--cinza-card); border-radius:32px; padding:28px;
}
.se-sinal img{ width:34px; height:34px; flex:none; }
.se-sinal h3{
  font-family:var(--display); font-weight:500; font-size:19px; line-height:1.24;
  color:var(--ink);
}
.se-sinal h3 b{ font-weight:700; }
.se-sinal p{ font-size:14px; line-height:1.3; color:var(--apoio); }


/* ============================================================
   04 · DIAGNÓSTICO ESTRATÉGICO
   Figma 1025:2549 — caixa de 1272x695 com raio 56 e recorte, painel
   escuro de 1272x616 a 79 do topo e a composição de imagem saindo
   85 acima dele.
   ============================================================ */
.se-diag{ padding-top:50px; background:var(--branco); }
.se-diag-caixa{
  position:relative; height:695px;
  border-radius:56px; overflow:hidden;
}
.se-diag-painel{
  position:absolute; left:0; top:79px; width:100%; height:616px;
  background:var(--ink); border-radius:56px; overflow:hidden;
}
.se-diag-texto{
  position:absolute; left:81px; top:56px; z-index:3;
  width:533px;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
}
.se-diag-texto .se-chapeu{ color:var(--muted); }
.se-diag-texto h2{
  font-family:var(--display); font-weight:700; font-size:32px; line-height:1.16;
  color:var(--branco);
}
.se-diag-texto h2 i{ font-style:normal; font-weight:500; color:#a6c6d5; }
.se-diag-corpo{
  width:479px; display:flex; flex-direction:column; gap:10px;
  font-size:14px; line-height:1.3; color:var(--branco);
}
.se-diag-corpo p:first-child{ width:460px; }
.se-diag-corpo p:last-child{ margin-top:8.2px; }

/* arcos do fundo, Figma 1025:1995 */
.se-diag-arcos{
  position:absolute; right:0; top:0; width:536px; height:616px;
  z-index:1; pointer-events:none;
}
.se-diag-arcos img{ width:536px; height:616px; max-width:none; }

/* ---------- composição de imagem, Figma 1025:2069 ----------
   721x835 a 594 da esquerda, subindo 85 acima do painel. Dez camadas,
   cada uma um par "caixa que centraliza" + "filho girado", que é
   exatamente como o arquivo guarda rotação: a caixa fica no eixo e o
   conteúdo gira dentro dela. A caixa inteira escala nos breakpoints
   por --se-diag-escala, então o desenho não se desmonta. */
.se-diag-img{
  /* posicao medida contra o arquivo pela tela amarela do notebook, que e o
     ponto de referencia visivel nos dois lados: a arte estava 34 a direita
     e 21 abaixo do desenho */
  position:absolute; right:0; top:-27px; z-index:2;
  /* 710x878: a arte tem 698x863 no arquivo e 710 e a largura medida contra
     a tela amarela do notebook. Quem dimensiona agora e a caixa, nao um
     transform: com escala e overflow:hidden a imagem era cortada antes de
     encolher, e no celular saia pela metade. */
  width:710px; height:878px;
  pointer-events:none;
}
.se-diag-img img{ max-width:none; }
/* a composicao e uma imagem so desde 14/09/2026: ela acompanha a caixa, e
   a caixa e quem muda de tamanho em cada largura de tela */
.se-diag-img > img{ display:block; width:100%; height:auto; }

/* peças genéricas da composição, usadas aqui e nas ilustrações da
   dobra dos 60 minutos */
.se-d-cx{
  position:absolute; display:flex; align-items:center; justify-content:center;
}
.se-d-cx > .se-d-gira{ flex:none; }
/* recorte: a imagem é maior que a caixa e sobra para fora, cortada */
.se-d-clip{ position:relative; overflow:hidden; }
.se-d-clip > img{ position:absolute; }
/* folha: a imagem estica na caixa, que e o que o arquivo faz na maioria
   das camadas; o recorte e a excecao e vem marcado caso a caso */
.se-d-folha{ position:relative; }
.se-d-folha > img{ width:100%; height:100%; object-fit:fill; }
/* máscara: o desenho é cortado pelo contorno do cupom */
.se-d-mask{
  position:relative;
  -webkit-mask-image:url("../assets/sessao/diag-mask.svg");
          mask-image:url("../assets/sessao/diag-mask.svg");
  -webkit-mask-repeat:no-repeat;         mask-repeat:no-repeat;
  -webkit-mask-size:540.975px 369.441px; mask-size:540.975px 369.441px;
}
.se-d-mask > img{ width:100%; height:100%; object-fit:cover; }

/* notebook, duas cópias em escalas diferentes (1025:2045 e 1025:2530).
   A primeira mora dentro de um recorte de 779x811. */
.se-nb-recorte{
  position:absolute; left:-37px; top:-60px;
  width:779px; height:811px; overflow:hidden;
}
.se-nb-a{ left:-24.86px; top:-0.39px; width:898.75px; height:825.39px; }
.se-nb-a .se-d-gira{ transform:rotate(-167.83deg) scaleY(-1); }
.se-nb-a .se-d-clip{ width:773.253px; height:677.561px; }
.se-nb-a .se-d-clip > img{ left:-96.66px; top:-213.23px; width:869.87px; height:1158.03px; }

.se-nb-b{ left:-37.4px; top:-60.39px; width:826.826px; height:701.745px; }
.se-nb-b .se-d-gira{ transform:rotate(-167.83deg) scaleY(-1); }
.se-nb-b .se-d-clip{ width:724.703px; height:561.546px; }
.se-nb-b .se-d-clip > img{ left:-145.23px; top:-213.22px; width:869.90px; height:1158.35px; }

/* cupom amarelo: é o próprio vetor em #ffbe18, espelhado (1025:2062) */
.se-cupom-amarelo{ left:154px; top:117.32px; width:588.47px; height:471.78px; }
.se-cupom-amarelo .se-d-gira{
  width:522.191px; height:369.976px;
  transform:rotate(12.17deg) scaleX(-1);
}
.se-cupom-amarelo .se-d-mask{
  width:100%; height:100%;
  -webkit-mask-position:10.009px 56.531px; mask-position:10.009px 56.531px;
}
.se-cupom-amarelo .se-d-mask > img{ object-fit:fill; }

/* duas fitas de papel mascaradas, a de cima desfocada (1025:1982/2070) */
.se-cupom-tras{ left:-331.44px; top:-107.44px; width:991.708px; height:991.708px; }
.se-cupom-tras .se-d-gira{
  width:704.149px; height:704.149px; transform:rotate(-50.21deg);
  filter:drop-shadow(-42.14px 45.08px 113.973px rgba(0,0,0,.25));
}
.se-cupom-tras .se-d-mask{
  width:100%; height:100%;
  -webkit-mask-position:495.439px 281.26px; mask-position:495.439px 281.26px;
}

.se-cupom-desfoque{ left:-34px; top:-328.4px; width:1077.855px; height:1077.855px; }
.se-cupom-desfoque .se-d-gira{
  width:763.232px; height:763.232px; transform:rotate(41.96deg);
  filter:blur(8.4px) drop-shadow(-42.14px 45.08px 113.973px rgba(0,0,0,.25));
}
.se-cupom-desfoque .se-d-mask{
  width:100%; height:100%;
  -webkit-mask-position:197.994px 502.221px; mask-position:197.994px 502.221px;
}

/* cupom da frente, desfocado (1025:2068) */
.se-cupom-frente{ left:-23.1px; top:178.82px; width:646.731px; height:684.462px; }
.se-cupom-frente .se-d-gira{
  width:619.596px; height:325.599px; transform:rotate(-50.21deg);
  filter:blur(4px) drop-shadow(-42.14px 45.08px 113.973px rgba(0,0,0,.25));
}
.se-cupom-frente .se-d-folha{ width:100%; height:100%; }
.se-cupom-frente .se-d-folha > img{ object-position:bottom; }

/* tela do notebook: chapa clara girada -13,15° (1025:1985) */
.se-diag-tela{ left:148.36px; top:35px; width:218.603px; height:378.761px; }
.se-diag-tela .se-d-gira{ width:141.346px; height:355.941px; transform:rotate(-13.15deg); }
.se-diag-tela .se-d-folha{ width:100%; height:100%; }

/* caixas, QR e cupom de código de barras, recortados (1025:2552) */
.se-diag-caixas{
  position:absolute; left:32px; top:13px; width:485px; height:642px;
  overflow:hidden;
}
.se-diag-caixas > img{
  position:absolute; left:0; top:-77px; width:485px; height:474.249px;
}


/* ============================================================
   05 · OS 60 MINUTOS
   Figma 1025:1627 — 1272x722, quatro colunas de 300 com a ilustração
   saindo 14 acima do topo da coluna.
   ============================================================ */
.se-min{ padding-top:168px; background:var(--branco); }
.se-min-in{ display:flex; flex-direction:column; align-items:center; gap:40px; }
.se-min-topo{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; width:100%;
}
.se-min-topo .se-chapeu{ color:var(--ink); }
.se-min-topo h2{
  width:820px; max-width:100%;
  font-family:var(--display); font-weight:500; font-size:42px; line-height:1.16;
  color:var(--ink);
}
.se-min-apoio{
  width:820px; max-width:100%;
  font-size:17px; line-height:1.55; color:var(--apoio);
}

/* as tres colunas tem 300 fixos e ficam centradas: no quadro de 1272 elas
   abrem em 162 e fecham em 162, e nao esticam para preencher a linha */
.se-min-colunas{
  display:flex; justify-content:center; gap:24px; width:100%; align-items:flex-start;
}

/* Figma 1025:1627, revisto em 15/09. Cada passo e uma ilustracao de
   299x204 por cima de um cartao cinza que comeca 112 abaixo do topo
   dela. O encavalamento de 106 e o que faz a arte parecer sair do
   cartao, e por isso a arte vem antes no HTML e sobe por z-index. */
.se-etapa{ position:relative; flex:0 1 300px; min-width:0; display:flex; flex-direction:column; }
.se-etapa-arte{
  position:relative; z-index:1;
  display:block; width:100%; height:auto;
  margin-bottom:-106px; pointer-events:none;
}
.se-etapa-cartao{
  flex:1 1 auto;
  display:flex; flex-direction:column; gap:12px;
  background:var(--cinza-card); border-radius:24px;
  /* os 100 de topo sao o espaco que a ilustracao ocupa por cima */
  padding:100px 28px 28px;
}
.se-etapa-num{
  font-family:var(--display); font-weight:500; font-size:13px; line-height:1.2;
  color:var(--muted);
}
.se-etapa-cartao h3{
  font-family:var(--display); font-weight:500; font-size:20px; line-height:1.24;
  color:var(--ink);
}
.se-etapa-cartao p{ font-size:15px; line-height:1.55; color:var(--apoio); }

/* o pe da dobra: a frase e o botao lado a lado, centrados */
.se-min-pe{ display:flex; align-items:center; gap:40px; }
.se-min-gratis{
  font-family:var(--display); font-weight:500; font-size:24px; line-height:1.16;
  color:var(--ink);
}

/* ============================================================
   06 · CTA FINAL
   Figma 1025:2577 — 1272x511, painel escuro de raio 56.
   Fechamento único da página: leva para a sessão estratégica.
   ============================================================ */
.se-cta{ padding-top:70px; background:var(--branco); }
.se-cta-painel{
  background:var(--ink); border-radius:56px; overflow:hidden;
  padding:50px 64px; display:flex; flex-direction:column; align-items:center; gap:24px;
  text-align:center;
}
.se-cta-arcos{ width:95px; height:40px; }
.se-cta-painel h2{
  width:768px; max-width:100%;
  font-family:var(--display); font-weight:500; font-size:var(--fs-statement);
  line-height:1.16; color:var(--branco);
}
.se-cta-painel p{
  width:560px; max-width:100%;
  font-size:17px; line-height:26px; color:var(--branco);
}
.se-cta-painel .se-btn{
  padding:15px 26px; font-weight:600; border-radius:40px;
}


/* ============================================================
   07 · QUEM CONDUZ
   Figma 1025:1660 — dobra sangrada de 1440x571. A foto fica a 80 da
   borda, 4 antes do container, e a coluna de texto a 657.
   ============================================================ */
.se-tiago{ padding:72px 0 56px; background:var(--branco); }
.se-tiago-in{ display:flex; align-items:flex-start; gap:51px; }

.se-tiago-foto{
  position:relative; flex:none; margin:19px 0 0 -4px;
  width:526px; height:496px;
}
/* moldura amarela: o degradê do arquivo nasce no canto de baixo à
   esquerda e clareia subindo (1025:1661) */
.se-tiago-moldura{
  position:absolute; left:0; top:38px; width:526px; height:458px;
  border-radius:32px; overflow:hidden;
  background:radial-gradient(633px 694px at 29px 343px,
             #fff8e6 0%, #ffe8ac 28.4%, #ffd771 56.7%,
             #ffcb45 78.4%, #ffc42e 89.2%, #ffbe18 100%);
}
.se-tiago-arcos{
  position:absolute; left:0; top:137px; width:526px; height:321px;
}
.se-tiago-arcos img{ width:526px; height:321px; max-width:none; }
/* O retrato sangra 38 acima da moldura, então ele é irmão dela e não
   filho: dentro, o recorte da moldura cortaria a cabeça. A caixa vai de
   0 a 496, que é onde a moldura termina, e é ela que corta os braços em
   baixo. Escala e recuo conferidos contra o render do nó 1025:2536: o
   PNG de 683x1024 entra proporcional, sem deformar. */
.se-tiago-retrato{
  position:absolute; left:38px; top:0; width:488px; height:496px;
  overflow:hidden; z-index:2;
  /* o recorte encosta na quina de baixo da moldura, então acompanha o
     raio dela para o retrato não vazar por fora do canto */
  border-radius:0 0 32px 0;
}
/* O arquivo estica o PNG de 683x1024 na caixa de 609x589 e corta o
   canto de cima à esquerda: é object-fit fill, não recorte. Conferido
   contra o render do nó 1025:2535, que casa pixel a pixel. */
.se-tiago-retrato img{
  position:absolute; left:0; top:0;
  width:609px; height:589px; max-width:none;
}

.se-tiago-texto{ position:relative; flex:1 1 0; min-width:0; padding-top:117px; }
.se-tiago-texto .se-chapeu{
  color:var(--ink); margin-left:9px; letter-spacing:.12px;
}
.se-tiago-texto h2{
  margin-top:15.6px;
  font-family:var(--display); font-weight:500; font-size:var(--fs-statement);
  line-height:1.16; color:var(--ink);
}
.se-tiago-selos{
  display:flex; gap:16px; margin:11.3px 0 0 -7px;
}
/* no arquivo os selos estão soltos, com 23 entre o primeiro e o
   segundo e 16 entre o segundo e o terceiro */
.se-tiago-selos span:first-child{ margin-right:7px; }
.se-tiago-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;
}
.se-tiago-corpo{
  width:672px; max-width:100%; margin-top:26px;
  display:flex; flex-direction:column; gap:24px;
  font-size:16px; line-height:1.5; color:var(--ink);
}


/* ============================================================
   08 · FAQ
   Figma 1025:1684 — 1272x569, acordeão de 900 centralizado.
   ============================================================ */
.se-faq{ padding:73px 0 129px; background:var(--branco); }
.se-faq-in{ display:flex; flex-direction:column; align-items:center; gap:64px; }
.se-faq-topo{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; width:726px; max-width:100%;
}
.se-faq-topo .se-chapeu{ color:var(--ink); }
.se-faq-topo h2{
  width:624px; max-width:100%;
  font-family:var(--display); font-weight:500; font-size:32px; line-height:1.16;
  color:var(--ink);
}
.se-faq .faq{ width:900px; max-width:100%; }
.se-faq .faq-item{ border-bottom-color:rgba(30,45,54,.2); }
.se-faq .faq-p{ padding:22.5px 10px; font-size:16px; font-weight:600; }
.se-faq .faq-mais{ font-size:22px; font-weight:400; }


/* ============================================================
   RESPONSIVIDADE
   O desktop 1440 é o estado de referência: nessa largura a página
   reproduz o Figma. As demais faixas derivam dela, seguindo as
   cinco bandas já usadas no resto do protótipo.
   ============================================================ */

/* ---------- desktop mini ---------- */
@media (max-width:1439px){
  .se-faixa-in{ justify-content:space-between; }
  .se-faixa-logos{ width:auto; flex:1 1 auto; gap:24px; margin-left:0; }
  .se-sinais-topo{ gap:40px; }
  .se-sinais-topo > div,
  .se-sinais-topo > p{ width:auto; flex:1 1 0; min-width:0; }
  .se-diag-img{ width:611px; height:755px; right:-50px; }
  .se-diag-texto{ width:46%; }
  .se-diag-corpo{ width:100%; }
  .se-diag-corpo p:first-child{ width:100%; }
  .se-min-colunas{ gap:16px; }
  .se-tiago-in{ gap:40px; }
  .se-tiago-corpo{ width:100%; }
  .se-tiago-selos{ flex-wrap:wrap; gap:12px; }
}

/* ---------- abaixo de 1280 ----------
   Dois limites reais aparecem aqui: a faixa de clientes precisa de
   1177 (632 dos logos + 96 + 449 dos números) e o palco da ilustração
   precisa de 299 por coluna, o que pede coluna de 275 para não invadir
   a vizinha. Nas duas a saída é quebrar em duas linhas, não encolher. */
@media (max-width:1279px){
  .se-faixa{ height:auto; min-height:146px; padding:20px 0; }
  .se-faixa-in{ flex-wrap:wrap; row-gap:20px; justify-content:space-between; }
  .se-faixa-logos{
    width:auto; margin-left:0; flex:0 1 auto;
    flex-wrap:wrap; gap:16px 28px; justify-content:flex-start;
  }

  .se-min-colunas{ row-gap:32px; }
}

/* ---------- tablet: hero e dobras em coluna ---------- */
@media (max-width:1023px){
  .se-hero-titulo{ font-size:34px; }
  .se-faixa{ height:auto; padding:28px 0; }
  .se-faixa-in{ flex-direction:column; gap:28px; }
  .se-faixa-logos{ width:100%; flex-wrap:wrap; justify-content:center; gap:28px 36px; }
  .se-sinais-topo{ flex-direction:column; align-items:flex-start; gap:24px; }
  .se-sinais-linha{ flex-direction:column; }
  .se-sinal{ flex:0 0 auto; }
  /* A arte e IRMA do painel escuro, nao filha dele. No desktop isso nao
     aparece porque ela e absoluta por cima; empilhado, ela caia depois do
     painel e ficava sobre o branco da pagina, fora do box. A cor escura
     passa para a CAIXA, que e quem envolve os dois, e o painel fica
     transparente: assim a arte cai dentro do escuro sem mexer na
     marcacao, e o canto da caixa recorta ela. */
  .se-diag-caixa{
    height:auto; border-radius:40px;
    background:var(--ink);
  }
  .se-diag-painel{ position:relative; top:0; height:auto; border-radius:0; background:none; }
  .se-diag-texto{ position:relative; left:0; top:0; width:100%; padding:48px; }
  .se-diag-img{
    position:relative; right:auto; top:0; margin:0 auto;
    width:447px; height:auto;
  }
  .se-diag-arcos{ display:none; }
  .se-min{ padding-top:110px; }
  .se-min-topo h2{ font-size:34px; }
  .se-min-colunas{ gap:16px; }
  .se-cta-painel{ padding:48px 40px; border-radius:40px; }
  .se-cta-painel h2{ font-size:34px; }
  .se-tiago-in{ flex-direction:column; align-items:center; }
  .se-tiago-foto{ margin-left:0; }
  .se-tiago-texto{ width:100%; padding-top:0; }
  .se-faq{ padding:56px 0 96px; }
}

/* ---------- mobile ----------
   O protótipo bloqueia o celular pelo aviso "Abra no computador", mas
   a página continua legível se o aviso for retirado. */
@media (max-width:767px){
  /* ============================================================
     RECUO LATERAL POR DOBRA, MEDIDO NO ARQUIVO (14/09/2026)
     No celular o arquivo nao usa um respiro unico: cada dobra tem o
     seu, e ele e simetrico em todas. Sinais abre em 30, os 60 minutos
     em 24, o FAQ em 35 e os paineis de CTA e diagnostico em 18. O site
     aplicava 20 em tudo, o que deixava o FAQ 15px mais largo que o
     desenho de cada lado. Em vez de largura fixa, o recuo entra como
     desconto: a dobra acompanha telas de 360 e de 430 sem mudar o
     respiro que o arquivo pede.
     ============================================================ */
  .se-sinais-in{ width:calc(100% - 60px); }
  .se-min-in{ width:calc(100% - 48px); }
  .se-faq-in{ width:calc(100% - 70px); }
  .se-cta-painel.se-in,
  .se-diag-caixa.se-in{ width:calc(100% - 36px); }

  .se-hero-titulo{ font-size:28px; }
  .se-hero-apoio{ font-size:16px; line-height:1.35; }
  .se-selo{ flex-direction:column; gap:12px; }
  .se-selo p{ width:auto; text-align:center; }
  .se-faixa-logos{ gap:22px 28px; }
  .se-sinal{ border-radius:24px; padding:24px; }
  /* ---- Diagnóstico estratégico no celular · Figma 1101:3188 ----
     O arquivo desenha este bloco todo centrado, com 32 de respiro em
     volta e o titulo em 24. Ate 15/09 a dobra caia no bloco de 1023,
     que e o desktop reduzido: titulo em 32 e tudo alinhado a esquerda. */
  .se-diag-texto{ padding:32px; text-align:center; align-items:center; }
  .se-diag-texto h2{ font-size:24px; line-height:1.16; }
  .se-diag-corpo{ align-items:center; }
  .se-diag-corpo p, .se-diag-corpo p:first-child{ width:100%; }
  /* a arte fechava em 303 dentro de um bloco de 354 e sobrava faixa
     escura dos dois lados. No arquivo ela atravessa a largura inteira
     e e o proprio quadro que corta o que sobra embaixo. */
  .se-diag-img{
    width:100%; height:auto; aspect-ratio:357 / 396;
    overflow:hidden; position:relative;
  }
  .se-diag-img > img{ display:block; width:100%; height:auto; }
  /* no quadro de celular as tres colunas empilham, cada uma em 300 */
  .se-min-colunas{ flex-direction:column; align-items:center; gap:32px; }
  .se-etapa{ flex:none; width:min(300px, 100%); }
  .se-min-pe{ flex-direction:column; gap:16px; text-align:center; }
  .se-cta-painel{ padding:40px 24px; }
  .se-cta-painel h2{ font-size:26px; }
  /* ---- Quem sou eu no celular ----
     Esta dobra nao tem frame de celular no arquivo, so desktop
     (1025:1660), entao as medidas seguem o padrao das outras dobras do
     telefone: titulo em 24 e corpo em 14. Os recuos de 9 no chapeu e
     de -7 nos selos sao acerto de desktop contra o arquivo; aqui eles
     so tiravam as duas linhas do prumo da coluna. */
  .se-tiago-foto{ width:100%; max-width:526px; height:auto; aspect-ratio:526/496; }
  .se-tiago-texto .se-chapeu{ margin-left:0; }
  .se-tiago-selos{ margin-left:0; }
  .se-tiago-selos span:first-child{ margin-right:0; }
  .se-tiago-texto h2{ font-size:24px; }
  .se-tiago-corpo{ font-size:14px; line-height:1.5; gap:16px; margin-top:20px; }
  .se-min-topo h2{ font-size:28px; }
  .se-faq-topo 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){
}

/* ============================================================
   RETRATO DO TIAGO NO CELULAR
   A moldura e as peças de dentro são absolutas em pixel de desktop
   (526 de largura), então o bloco inteiro precisa encolher junto.

   POR QUE NÃO `transform:scale`, que era o que estava aqui até 15/09:
   o bloco tem `data-anima`, e a animação de entrada do site escreve
   `transform` nele — `[data-anima]{transform:translateY(40px)}` e
   `.is-dentro [data-anima]{transform:translateY(0)}`. Essa segunda
   regra tem especificidade (0,2,0) e vencia a regra de celular, que
   tinha (0,1,0): assim que a dobra entrava na tela o scale era
   apagado e a foto voltava aos 526, saindo 179px da tela de 390.
   O defeito só aparecia com a animação concluída, que é por que
   passou batido em revisão mais de uma vez.

   `zoom` não é transform: encolhe a CAIXA DE LAYOUT, então não disputa
   com a animação, não precisa de margem negativa para devolver a altura
   e deixa o `align-items:center` do pai centrar sozinho.
   ============================================================ */
@media (max-width:767px){
  .se-tiago-foto{
    width:526px; max-width:none; height:496px; aspect-ratio:auto;
    /* zoom so aceita numero ou porcentagem: `calc(largura / 526)` daria
       um comprimento, nao uma razao, e o valor era descartado. Entao a
       razao entra pronta, por faixa de tela. 526 x .64 = 337, que cabe
       nos 350 uteis de uma tela de 390. */
    zoom:.64;
    margin:19px 0 0;
  }
}
@media (max-width:400px){
  .se-tiago-foto{ zoom:.58; }   /* 305 nos 320 uteis de uma tela de 360 */
}
@media (max-width:374px){
  .se-tiago-foto{ zoom:.52; }   /* 274 nos 280 uteis de uma tela de 320 */
}


/* ============================================================
   A EXCEÇÃO DA PRIMEIRA DOBRA
   A regra geral do site (v2.css, seção 8) faz a primeira dobra SER o
   painel: altura desenhada, canto arredondado e corte no que passar.
   Esta página é a única em que o arquivo manda o conteúdo transbordar,
   então a seção solta a altura e o corte e entrega o desenho para a
   camada .se-painel. Os cinco encaixes do seletor são de propósito:
   precisam ganhar da regra geral, que já tem quatro.
   ============================================================ */
body.v2 .dobra[data-dobra="hero"].e-painel.se-hero{
  height:auto; overflow:visible; border-radius:0; background:none;
  /* o cartão desce 374 abaixo do painel e os números mais 126; o
     arquivo abre 168 até a dobra seguinte */
  padding-bottom:168px;
}

@media (max-width:767px){
  /* no celular o arquivo desenha 371x728 (nó 1306:19071), com o título
     em y=51 e o cartão em y=392, de novo saindo por baixo. As colunas
     viram uma só. */
  body.v2 .dobra[data-dobra="hero"].e-painel.se-hero{ padding-bottom:64px; }
  .se-painel{ border-radius:40px; }
  /* O involucro tem as duas classes, .se-hero-in e .se-in, e o .se-in
     devolvia a calha do site DENTRO do painel, que ja tem a largura da
     coluna: o cartao saia com 310 num painel de 350. Aqui o involucro
     para de recuar, quem recua e a coluna de texto, e o cartao fica com
     a largura da dobra, como no no 1101:3047 (349 num quadro de 391). */
  .se-hero-in{ display:block; width:auto; margin:0; padding:0; }
  .se-hero-texto{ max-width:none; padding:51px 20px 0; }
  .se-hero-lado{ margin-top:29px; }
  .se-faixa{
    position:static; width:100%; height:auto; margin-top:40px; padding:24px 0;
  }
  .se-faixa-in{ padding-left:0; width:100%; }
}