/* ========================================================================= PAGINAS DE SERVICO — Discovery, Governanca, Outsourcing, Inteligencia Figma: ISP - Discovery (1096:23) e irmas. As quatro usam o mesmo template; muda o conteudo e as fotos. Varias seções repetem os ids da Home (#isp-hero, #isp-depoimentos, #isp-faq, #isp-cta) — cada pagina renderiza uma instancia, entao nao ha conflito. Quem separa os dois tratamentos e a classe .isp-servico no . ========================================================================= */ /* ========================================================================= 1. HERO — Figma Hero 1096:89 Mesma caixa de 800 da Home, com uma foto por cima do anel e a esteira azul. ========================================================================= */ /* A foto do analista cobre o hero inteiro e sangra 224px pela esquerda. */ /* O fundo do hero e UMA imagem: o anel de neon e a foto do analista ja compostos, exportados do proprio arquivo em 2x. Recompor por camadas nao bate — o render do Figma tem mais vermelho do que a foto de origem, ou seja, ha mistura entre as camadas que nao da para reproduzir por CSS. O export cobre o quadro de 1440 do topo ate y=793. */ /* Pedido do cliente (26/08/2026): a foto do hero preenche a largura toda. Ela era travada nos 1440 do quadro do Figma e, em qualquer tela maior, sobrava uma faixa preta de cada lado — o cliente viu como "foto cortada do lado direito". Agora a composicao acompanha a janela (nunca menos que os 1440 do desenho) e o object-fit:cover cuida do recorte. */ .isp-servico .isp-hero__foto { position: absolute; top: 0; left: 50%; z-index: 1; width: 100%; min-width: 1440px; height: 793px; transform: translateX(-50%); overflow: hidden; pointer-events: none; } .isp-servico .isp-hero__foto img { display: block; width: 100%; min-width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: center; } /* O anel ja esta dentro da imagem acima; a camada separada some. */ .isp-servico #isp-hero-arte { display: none; } .isp-servico #isp-hero-conteudo { width: 579px; margin-bottom: 32px; } /* Nesta pagina o titulo e branco chapado, sem o degrade da Home. */ .isp-servico .isp-hero__titulo .elementor-heading-title { background-image: none; color: #ffffff; } /* Titulo do hero um degrau menor que o da Home (48/53 no arquivo do Figma): pedido do cliente em 03/09/2026, "muito grande". Vale SO no desktop — de 1024 para baixo o titulo ja cai para 40 e depois para 32, e esses dois vem dos quadros de 390 do Figma, que o cliente aprovou. 42 e o tamanho, e nao 44, porque no Outsourcing (o titulo mais longo dos quatro) 44 ainda quebra em QUATRO linhas e 42 fecha em tres. A entrelinha acompanha na mesma proporcao do arquivo (1,104). */ @media (min-width: 1025px) { .isp-servico .isp-hero__titulo .elementor-heading-title { font-size: 42px; line-height: 46px; } } /* O mesmo pedido no celular (03/09/2026). De 32 para 28, com a entrelinha na proporcao do arquivo (1,1875). O ganho aqui e maior do que no desktop: o titulo do Outsourcing vinha em SEIS linhas em 390 e passa a quatro; o Discovery, a Governanca e a Inteligencia caem de quatro para tres. 30 nao muda quebra nenhuma — e so texto menor com o mesmo tamanho de bloco. */ @media (max-width: 767px) { .isp-servico .isp-hero__titulo .elementor-heading-title { font-size: 28px; line-height: 33px; } } .isp-servico #isp-hero-conteudo .isp-hero__texto { max-width: 579px; } /* A esteira de numeros e azul, nao preta. */ .isp-servico .isp-numeros { background-color: var(--isp-azul); color: #ffffff; } /* ========================================================================= 2. PARA QUEM E — faixa clara, cabecalho + grade de 4 cards + card com foto Figma: Content 1096:142 (x 333, y 921) e a grade em x 92 / y 1147. ========================================================================= */ #isp-quem-e { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 60px; padding: 121px var(--isp-margem) 120px; background-color: #f8f9fa; color: var(--isp-chumbo); overflow: hidden; } /* A largura NAO e fixada aqui de proposito: um seletor com id vence a regra de classe do cabecalho (773) e da grade (1268), e todos os blocos sairiam com 1280. Cada filho declara a propria largura. */ #isp-quem-e > .e-con { margin: 0; padding: 0; } #isp-quem-e > .elementor-widget { width: 100%; margin: 0; padding: 0; } /* ---------- Cabecalho comum das seções de servico ---------- Mirado por padrao de id porque _css_classes nao sai no HTML de container nesta versao do Elementor. A classe .isp-servico no garante que a regra nao alcance os cabecalhos da Home, que tem outro tratamento. */ .isp-servico [id$="-topo"] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 42px; width: 773px; max-width: 100%; margin-inline: auto; text-align: center; } .isp-servico [id$="-topo"] > .elementor-widget { width: 100%; margin: 0; padding: 0; } .isp-servico__eyebrow .elementor-heading-title { text-box-trim: trim-both; text-box-edge: cap alphabetic; margin: 0 auto; max-width: 620px; font-family: var(--isp-fonte-corpo); font-size: 16px; line-height: 26px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--isp-azul); } .isp-servico__titulo .elementor-heading-title { text-box-trim: trim-both; text-box-edge: cap alphabetic; margin: 0; font-family: var(--isp-fonte-titulo); font-size: 46px; line-height: 52px; font-weight: 400; color: #000000; } .isp-servico__titulo strong { font-weight: 700; } .isp-servico [id$="-topo"] .isp-servico__lead { text-box-trim: trim-both; text-box-edge: cap alphabetic; max-width: 559px; margin-inline: auto; font-family: var(--isp-fonte-titulo); font-size: 18px; line-height: 28px; font-weight: 400; color: rgba(0, 0, 0, 0.6); } .isp-servico__lead p { margin: 0; } /* Nas faixas escuras o cabecalho inverte. */ .isp-sec--escura .isp-servico__titulo .elementor-heading-title { color: #ffffff; } .isp-sec--escura .isp-servico__lead { color: rgba(248, 249, 250, 0.6); } /* ---------- Grade: 2 colunas de cards + o card com a foto ---------- */ /* No arquivo a grade comeca em x=92 e termina em 1360 — 12px a direita da grade de 1280 na esquerda, e alinhada na direita. */ /* margin-inline:auto e nao o margin-left:12 do arquivo: o widget do Elementor ocupa a largura inteira da seção, entao com margem fixa a grade ficava colada na esquerda em qualquer tela acima de 1440 (foi o que o cliente apontou como "os cards nao estao alinhados ao centro"). Os 12px de deslocamento do Figma viram 6 de cada lado no quadro de 1440. */ .isp-cartoes { display: grid; grid-template-columns: 423px 423px 374px; grid-template-rows: 290px 290px; gap: 24px; width: 1268px; max-width: 100%; margin-inline: auto; } /* Pedido do cliente (26/08/2026): todos os cards nascem claros e o azul da marca passa a ser o hover. A classe --destaque continua saindo do conteudo (e o que o Figma descreve), mas nao pinta mais nada. */ .isp-cartao { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding: 40px; border: 1px solid rgba(13, 13, 13, 0.06); border-radius: 20px; background-color: var(--isp-branco); transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } @media (hover: hover) { .isp-cartao:hover { border-color: rgba(97, 97, 249, 0); background-color: var(--isp-azul); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(5, 60, 250, 0.18); } .isp-cartao:hover .isp-cartao__ico { color: #ffffff; } .isp-cartao:hover h3, .isp-cartao:hover .elementor-heading-title { color: #ffffff; } .isp-cartao:hover p { color: rgba(248, 249, 250, 0.8); } } .isp-cartao__ico { display: block; width: 30px; height: 30px; flex: 0 0 30px; color: var(--isp-azul); } .isp-cartao__ico svg { display: block; width: 100%; height: 100%; } /* O segundo seletor e por causa do widget de titulo do Elementor: ele traz ".elementor-widget-heading .elementor-heading-title { color: ... }", que pesa (0,2,0) e ganhava de ".isp-cartao h3" — os titulos dos cards saiam na cor global do kit em vez do chumbo. Empatar o peso resolve, porque esta folha carrega depois da do Elementor. */ .isp-cartao h3, .isp-cartao .elementor-heading-title { text-box-trim: trim-both; text-box-edge: cap alphabetic; margin: 0; font-family: var(--isp-fonte-corpo); font-size: 20px; line-height: 32px; font-weight: 400; color: var(--isp-chumbo); } .isp-cartao p { text-box-trim: trim-both; text-box-edge: cap alphabetic; margin: 0; font-family: var(--isp-fonte-titulo); font-size: 16px; line-height: 24px; font-weight: 400; color: rgba(13, 13, 13, 0.6); } /* ---------- Card com a foto, ocupando as duas linhas ---------- */ /* Fixado na terceira coluna e nas duas linhas: sem isso o posicionamento automatico da grade joga o card-foto para o meio e empurra os outros. */ .isp-cartao-foto { position: relative; grid-column: 3; grid-row: 1 / span 2; border-radius: 20px; background-color: var(--isp-azul); background-repeat: no-repeat; background-position: center; background-size: cover; /* visible de proposito: a pessoa sangra para fora do card (o tablet cruza a borda esquerda e a cabeca passa da borda de cima). O fundo continua recortado pelo border-radius, que sempre corta o background. */ overflow: visible; } /* O envolucro do widget de imagem sai do caminho. Ele e position:relative por padrao do Elementor, entao virava o bloco de referencia da foto (que e absoluta) — e como ele mede zero de altura, o "height: 100%" que vale abaixo de 1340 dava ZERO: o card ficava um retangulo azul vazio em qualquer notebook de 1280 ou 1366. Com display:contents o envolucro deixa de existir para o layout e a referencia volta a ser o card. */ .isp-cartao-foto > .elementor-widget-image, .isp-cartao-foto > .elementor-widget-image > .elementor-widget-container { display: contents; } /* A pessoa entra recortada, na posicao do arquivo: a caixa dela e 53px mais a esquerda e 44px acima da caixa do card. */ #isp-quem-e .isp-cartao-foto img { position: absolute; z-index: 1; top: -44px; left: -53px; width: 427px; min-width: 427px; max-width: none; height: 648px; object-fit: contain; object-position: bottom; } /* ========================================================================= RESPONSIVO ========================================================================= */ @media (max-width: 1340px) { .isp-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; width: 100%; } .isp-cartao-foto { grid-column: 1 / -1; grid-row: auto; min-height: 420px; } } @media (max-width: 1200px) { .isp-servico .isp-hero__foto { /* min-width:0 e obrigatorio: o piso de 1440 do desktop continuaria valendo aqui e a foto sairia 1440px de largura num celular de 390, criando rolagem lateral. */ width: 150%; min-width: 0; margin-left: 0; } } @media (max-width: 1024px) { #isp-quem-e { gap: 48px; padding-block: 80px; } .isp-servico #isp-hero-conteudo { width: 100%; margin-bottom: 0; } .isp-servico__titulo .elementor-heading-title { font-size: 34px; line-height: 42px; } .isp-cartao { padding: 28px; gap: 20px; } } /* ========================================================================= HERO E "QUEM DEVE CONTRATAR" NO CELULAR Figma "ISP - Discovery MOBILE 390" (e as tres irmas) HERO — regua: header 64 | arte 330 | 34 | eyebrow 16 | 12 | titulo | 20 | apoio | 24 | botao 43 | ate 821 | esteira 68 Mesmo arranjo do hero da Home: a foto sai de tras do texto e vira uma faixa propria de 330 logo abaixo do header, com a fusao para o preto no pe. O cliente ajustou essa moldura a mao no Figma e ela e o padrao das quatro paginas. QUEM DEVE CONTRATAR — 64 | topo 174 | 16 | quatro cards | 16 | foto 375 Os cards deixam a grade de tres colunas e viram uma pilha de 342; o primeiro e azul, como no arquivo. A foto fecha a seção. ========================================================================= */ @media (max-width: 767px) { /* ---------- Hero ---------- */ /* display:block e obrigatorio: .isp-hero__foto e um , e so nao ficava inline no desktop porque la ele e absoluto. Em relative sem isto a altura de 330 e ignorada e a faixa nasce com zero. */ .isp-servico .isp-hero__foto { display: block; position: relative; top: auto; left: auto; width: 100%; height: 330px; margin-top: 64px; transform: none; } /* O recorte da foto e o mesmo do arquivo de 390: 1253x427 ancorada em -431, -15 dentro da faixa de 390x330. */ /* O -431 centrava a imagem de 1253 na tela de 390 — matematicamente certo e visualmente errado: em todas as quatro fotos as pessoas estao fora do meio do arquivo, e o corte central pegava so ombro e parede. O cliente pediu que o rosto apareca, entao cada pagina tem o seu recuo, escolhido para deixar o rosto (ou o grupo de rostos) no meio dos 390. O object-position vertical existe pelo mesmo motivo: com cover a imagem de 1253x690 mostra so 427 de altura, e centrada ela corta a cabeca das pessoas. A porcentagem sobe a janela ate a cabeca entrar inteira. Os ultimos 150px da faixa ficam sob o degrade preto, entao o rosto tem de cair na metade de cima. */ .isp-servico .isp-hero__foto img { position: absolute; top: -15px; left: 50%; margin-left: -626px; width: 1253px; height: 427px; max-width: none; object-fit: cover; object-position: 50% 25%; } .isp-pg-discovery .isp-hero__foto img { left: 50%; margin-left: -796px; object-position: 50% 25%; } .isp-pg-governanca .isp-hero__foto img { left: 50%; margin-left: -757px; object-position: 50% 22%; } .isp-pg-outsourcing .isp-hero__foto img { left: 50%; margin-left: -705px; object-position: 50% 38%; } /* Esta e a unica sem gente: o que precisa aparecer e a mao no painel. */ .isp-pg-inteligencia-de-mercado .isp-hero__foto img { left: 50%; margin-left: -727px; object-position: 50% 50%; } /* A fusao com o preto: 150px no pe da faixa. */ .isp-servico .isp-hero__foto::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 150px; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); } .isp-servico #isp-hero-conteudo { width: 100%; margin-bottom: 0; } /* ---------- Cabecalho comum das seções de serviço ---------- */ .isp-servico [id$="-topo"] { gap: 14px; width: 100%; } .isp-servico__eyebrow .elementor-heading-title { font-size: 12px; line-height: 16px; letter-spacing: 1.6px; } .isp-servico__titulo .elementor-heading-title { font-size: 26px; line-height: 32px; } .isp-servico [id$="-topo"] .isp-servico__lead { font-family: var(--isp-fonte-corpo); font-size: 14px; line-height: 22px; } /* ---------- Quem deve contratar ---------- */ #isp-quem-e { gap: 16px; padding: 64px var(--isp-margem); } .isp-cartoes { display: flex; flex-direction: column; gap: 16px; width: 100%; } .isp-cartao { gap: 14px; padding: 24px; border-radius: 20px; } .isp-cartao__ico { width: 30px; height: 30px; flex: 0 0 30px; } /* Repete o .elementor-heading-title porque a regra de cima usa os dois seletores: ".isp-cartao .elementor-heading-title" pesa (0,2,0) e ganharia deste bloco se aqui so estivesse o h3 (0,1,1) — o titulo do card ficava com a entrelinha de 32 do desktop e cada card crescia uma linha inteira. */ .isp-cartao h3, .isp-cartao .elementor-heading-title { font-size: 19px; line-height: 26px; } .isp-cartao p { font-size: 14px; line-height: 22px; } /* A foto sai da terceira coluna da grade e fecha a seção, com o anel azul por tras — 342x375, como no arquivo. */ .isp-cartao-foto { grid-column: auto; grid-row: auto; width: 100%; height: 375px; border-radius: 16px; overflow: hidden; } #isp-quem-e .isp-cartao-foto img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } }