/* ============================================================ */
/* PROGRAMA PRATICO DE FORMACAO LEAN (PPFL) — pagina completa */
/* Origem: figma-to-bootstrap/outputs/ppfl-geral/merged/styles.css */
/* */
/* Adaptacoes para o LeanWeb: */
/* - `:root` e `body` do mockup foram escopados ao wrapper */
/* `.ppfl-page`, para nao vazarem nos tokens/fonte do */
/* header e do footer do layout global. */
/* - paths de icones reapontados para */
/* ~/img/academia/programa-formacao-lean/icons/. */
/* A fonte da verdade continua sendo o merge do figma-to-bootstrap. */
/* ============================================================ */
/* ============================================================ */
/* PPFL GERAL — PÁGINA COMPLETA (LIB) */
/* Merge das 9 seções de sections/, nesta ordem: */
/* hero · menu · formação · setorial · certificação · */
/* benefícios · depoimentos · detalhes · jornada */
/* */
/* Gerado a partir de sections/*.css — a fonte da verdade */
/* continua sendo cada seção; ao editá-las, refazer o merge. */
/* Aqui os :root de todas as seções viram um só (sem conflito */
/* de valores) e o body{} repetido vira uma regra única. */
/* ============================================================ */
.ppfl-page {
/* --- HERO — sec-topo (1-hero.css) --- */
/* Cores */
--color-navy-deep: #29235c;
--color-navy-mid: #2a2566;
--color-indigo: #394195;
--color-teal: #169194;
--color-accent: #ff8000;
--color-accent-dark: #e67300;
--color-amber: #ffa626;
--color-white: #ffffff;
/* Tipografia */
--font-primary: 'Roboto', sans-serif;
--font-weight-regular: 400;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
/* Hero */
--hero-ppfl-top-height: 536px; /* bloco superior, antes da faixa de números */
--hero-ppfl-stats-height: 115px; /* faixa de números */
--hero-ppfl-panel-width: 749px; /* largura do painel de metodologia */
--hero-ppfl-intro-width: 531px; /* largura do bloco de texto à esquerda */
--hero-ppfl-columns-gap: 65px;
/* Inclinação do ✓ dos cards: o Figma desenha a haste longa a 54,1° do
horizontal; o fallback do macOS para U+2713 (Hiragino Sans) desenha a
62,2°. Os 8° de rotação horária fecham essa diferença. */
--hero-ppfl-check-tilt: 8deg;
/* --- MENU DE ÂNCORAS (2-menu.css) --- */
/* Cores */
--color-lilac-bg: #f3f2ff; /* fundo da faixa (Rectangle 1646) */
--color-rule: #b8b8b8; /* traço Line 46 */
/* Menu — medidas retiradas do frame do Figma
texto: y 22 → 48 (line-height 25.79)
traço cinza: y 59 (1px)
indicador laranja: y 58 → 61 (3px) */
--menu-ppfl-height: 84px;
--menu-ppfl-text-top: 22px;
--menu-ppfl-line-height: 25.79px;
--menu-ppfl-rule-gap: 11px; /* base do texto (48) → traço (59) */
--menu-ppfl-bar-drop: 13px; /* base do texto (48) → base da barra (61) */
--menu-ppfl-sep-gap: 9px; /* equivale aos 2 espaços de cada lado do "|" */
/* --- FORMAÇÃO — sec-formacao (4-formacao.css) --- */
/* Cores */
--color-violet: #534ab7;
--color-text-muted: #5b5880;
--color-border-soft: #e3e5ee;
--color-surface-light: #f7f7f7;
/* Stepper — medidas do Figma (coordenadas locais da etapa, a partir do
topo do trilho: y 289 no frame)
trilho ....... 0 → 64 (círculo fantasma 60.16, centro y 32)
vão .......... 16
cards ........ 80 → 330 (card aberto 250; fechado 80)
São 240px entre os centros das colunas; 1200px no total. */
--formacao-ppfl-col: 240px;
--formacao-ppfl-rail: 64px; /* célula do trilho = círculo aberto */
--formacao-ppfl-dot-scale: 0.94; /* 60.16 / 64 — círculo fechado */
--formacao-ppfl-rail-gap: 16px;
--formacao-ppfl-card: 200px;
--formacao-ppfl-card-active: 212px;
--formacao-ppfl-card-height: 250px; /* altura reservada para a faixa de cards */
--formacao-ppfl-step-height: 376px; /* altura do layout original (com repouso no rodapé) — mantida */
--formacao-ppfl-dim: 0.55; /* opacidade das etapas fechadas */
--formacao-ppfl-ease: cubic-bezier(0.4, 0, 0.2, 1);
/* --- ESCOLHA SETORIAL — sec-setorial (7-setorial.css) --- */
/* Cores */
--color-navy-darker: #1d1846; /* hover do CTA indústria */
--color-green: #1d9e75;
--color-green-dark: #17805f; /* hover do CTA serviços */
--color-meta: #666666;
--color-card-warm: #fff8f7; /* fundo do card Indústria */
--color-card-cool: #f7f8ff; /* fundo do card Serviços */
/* Escolha setorial — medidas retiradas do frame do Figma
seção: padding 90px, container 1100 (conteúdo 1036)
cards: 504 x 563, gap 28
capa: 200px de altura, faixa de setores 50px colada na base */
--setorial-ppfl-container: 1100px;
--setorial-ppfl-gutter: 32px;
--setorial-ppfl-card-gap: 28px;
--setorial-ppfl-media-height: 200px;
--setorial-ppfl-strip-height: 50px;
/* --- CERTIFICAÇÃO — sec-upsell (dupla cert.) (9-upsell.css) --- */
/* Cores */
--color-blood: #830305; /* acento da aba Supply Chain */
--color-surface-soft: #f5f6fa;
/* Upsell — medidas retiradas do frame do Figma
seção: padding 90px, container 1100 (conteúdo 1036), gap 24
card: 1036 x 567, raio 26, painel de imagem 439 fixo
corpo do card: padding 51 / 44 / 52, gap 20 */
--upsell-ppfl-container: 1100px;
--upsell-ppfl-gutter: 32px;
--upsell-ppfl-stack-gap: 24px;
--upsell-ppfl-card-height: 567px;
--upsell-ppfl-media-width: 439px;
--upsell-ppfl-fade: 520ms;
--upsell-ppfl-ease: cubic-bezier(.4, 0, .2, 1);
/* --- BENEFÍCIOS — sec-beneficios (3-beneficios.css) --- */
/* Cores */
--color-magenta: #cb6ce6;
--color-divider: #999999;
--color-lilac: #efeafb; /* fim do gradiente de fundo */
/* Benefícios — medidas retiradas do frame do Figma
seção: padding 90px em cima, 72px embaixo
conteúdo: 1148px = 2 colunas de 544 (34 + 20 + 490) + 60 de vão
card: 490 de largura; trilho de selos 34px à esquerda */
--beneficios-ppfl-container: 1212px; /* 1148 de conteúdo + 2 x 32 de goteira */
--beneficios-ppfl-gutter: 32px;
--beneficios-ppfl-content: 1148px;
--beneficios-ppfl-col-gap: 60px;
--beneficios-ppfl-badge: 34px;
--beneficios-ppfl-rail-gap: 20px;
--beneficios-ppfl-card-gap: 7px;
--beneficios-ppfl-pad-y: 18px; /* padding vertical da linha do título */
--beneficios-ppfl-pad-x: 20px;
--beneficios-ppfl-slot: 18px; /* altura do "+" (card fechado) */
--beneficios-ppfl-slot-open: 34px; /* altura do "x" (card aberto) */
--beneficios-ppfl-indent: 68px; /* recuo do texto da descrição */
/* --- DEPOIMENTOS — variante em imagem (8-depoimentos.css) --- */
/* Cores da arte do depoimento (amostradas do export do Figma) */
--dep-art-from: #fbf7f2;
--dep-art-to: #d2d9e2;
--dep-name: #222221;
--dep-role: #9e9e9e;
--dep-quote: #4f7488;
--dep-star: #eac134;
--dep-linkedin: #0a66c2;
--dep-phone-shell: #231f20;
--dep-phone-line: #ececec;
--dep-phone-name: #303030;
--dep-phone-role: #919190;
--dep-phone-quote: #6f8895;
--dep-phone-chrome: #e8e8e8;
--dep-phone-icon: #7ea9cb;
--dep-phone-badge: #00acee;
/* Palco do carrossel — a arte é desenhada em px no tamanho do
Figma (666 x 533) e o conjunto inteiro é reduzido por
`--dep-zoom`, então um único número controla o responsivo. */
--dep-art-w: 666px;
--dep-art-h: 533px;
--dep-zoom: 1;
/* Níveis do "coverflow" (escala/opacidade lidas do frame; o
deslocamento é a média entre o vizinho da esquerda e o da
direita, que no Figma estão ~62px fora de simetria) */
--dep-x-1: 326px; --dep-s-1: 0.733; --dep-o-1: 0.91;
--dep-x-2: 580px; --dep-s-2: 0.682; --dep-o-2: 0.31;
--dep-x-3: 876px; --dep-s-3: 0.573; --dep-o-3: 0.20;
/* --- DETALHES PARA ESPECIALISTAS (6-detalhes.css) --- */
/* Cores */
--color-teal-dark: #0f7376; /* hover do CTA */
--color-text-strong: #1d1b33;
/* --- DÚVIDAS — FAQ (oculta) (10-faq.css) --- */
/* FAQ */
--faq-ppfl-container: 920px;
--faq-ppfl-gutter: 32px;
--faq-ppfl-gap: 12px; /* vão entre as perguntas */
--faq-ppfl-radius: 14px;
--faq-ppfl-pad: 22px;
--faq-ppfl-sinal: 18px; /* lado do "+" / "×" */
/* --- JORNADA — continue sua jornada (5-jornada.css) --- */
/* Jornada — medidas retiradas do frame do Figma
seção: padding 88px no topo, 56px na base
contêiner 1080 (conteúdo 1016), cards de 480px com raio 18
larguras: 682 aberto / 314 fechado — usadas como razão de flex-grow */
--jornada-ppfl-container: 1080px;
--jornada-ppfl-gutter: 32px;
--jornada-ppfl-card-gap: 8px;
--jornada-ppfl-card-height: 480px;
--jornada-ppfl-radius: 18px;
--jornada-ppfl-pad: 34px;
--jornada-ppfl-grow-open: 682;
--jornada-ppfl-grow-closed: 314;
/* Mesmo easing/duração do stepper da seção 4 */
--jornada-ppfl-dur: 450ms;
--jornada-ppfl-ease: cubic-bezier(.4, 0, .2, 1);
}
/* ============================================================ */
/* GLOBAL */
/* ============================================================ */
.ppfl-page {
font-family: var(--font-primary);
margin: 0;
padding: 0;
}
/* ============================================================ */
/* 1/10 — HERO — sec-topo */
/* origem: sections/1-hero.css */
/* ============================================================ */
.hero-ppfl {
position: relative;
overflow: hidden;
background-color: var(--color-navy-deep);
}
/* --- Camadas de fundo ---
`isolation: isolate` confina o mix-blend-mode da foto às camadas
de fundo, sem afetar o conteúdo do hero. */
.hero-ppfl__bg {
position: absolute;
inset: 0;
isolation: isolate;
pointer-events: none;
z-index: 0;
}
/* Gradiente base do Figma: 162.63deg sobre branco, com alfa 0.9 */
.hero-ppfl__bg-gradient {
position: absolute;
inset: 0;
background-color: var(--color-white);
background-image: linear-gradient(
162.63deg,
rgba(41, 35, 92, 0.9) 0%,
rgba(42, 37, 102, 0.9) 55%,
rgba(57, 65, 149, 0.9) 100%
);
}
/* Foto do gemba em soft-light @ 64% (composição do Figma) */
.hero-ppfl__bg-photo {
position: absolute;
inset: 0;
overflow: hidden;
mix-blend-mode: soft-light;
opacity: 0.64;
}
.hero-ppfl__bg-photo img {
width: 100%;
height: 100%;
object-fit: cover;
/* No Figma a foto tem 195.94% da altura da seção e é deslocada
-31.58% no topo → o recorte visível fica centrado em 41.6% */
object-position: 50% 41.6%;
}
/* Ultrawide: a foto para de crescer em 2560px e fica centrada — acima disso o
`cover` só a esticava (o arquivo tem 2000px de largura, então já vinha sendo
ampliado). As sobras laterais ficam com o gradiente e os brilhos do próprio
hero, que são CSS e não perdem qualidade ao esticar; a máscara de 200px
dissolve as duas emendas. A centragem usa `margin-inline` (e não transform)
para não disputar com o parallax que roda na ![]()
de dentro. */
@media (min-width: 2560px) {
.hero-ppfl__bg-photo {
max-width: 2560px;
margin-inline: auto;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%);
}
}
/* Dois brilhos radiais: violeta (topo-esquerda) e teal (base-direita) */
.hero-ppfl__bg-glow {
position: absolute;
inset: 0;
background-image:
radial-gradient(66.09% 62.21% at 15% 20%,
rgba(83, 74, 183, 0.35) 0%,
rgba(83, 74, 183, 0) 100%),
radial-gradient(63.64% 60.10% at 90% 85%,
rgba(22, 145, 148, 0.25) 0%,
rgba(22, 145, 148, 0) 100%);
}
/* ============================================================ */
/* HERO: BLOCO SUPERIOR (texto + painel) */
/* ============================================================ */
.hero-ppfl__container {
position: relative;
z-index: 2;
max-width: 1410px; /* 1474px do Figma menos os paddings */
margin: 0 auto;
padding: 96px 32px 32px;
}
.hero-ppfl__grid {
display: flex;
align-items: flex-start;
gap: var(--hero-ppfl-columns-gap);
}
.hero-ppfl__intro {
flex: 0 1 var(--hero-ppfl-intro-width);
max-width: var(--hero-ppfl-intro-width);
min-height: 408px;
}
/* --- Título, subtítulo, régua e CTAs --- */
.hero-ppfl__title {
max-width: 478px;
margin: 22px 0 0;
font-size: 3.3rem; /* 52.8px */
font-weight: var(--font-weight-black);
line-height: 59.14px;
letter-spacing: -0.528px;
color: var(--color-white);
}
.hero-ppfl__subtitle {
max-width: 520px;
margin: 13.72px 0 0;
font-size: 1.25rem; /* 20px */
font-weight: var(--font-weight-regular);
line-height: 1.1913;
color: var(--color-white);
}
.hero-ppfl__subtitle strong {
font-weight: var(--font-weight-extrabold);
}
.hero-ppfl__rule {
display: block;
width: 96px;
height: 4px;
margin: 30.5px 0 0 2px;
background-color: var(--color-accent);
}
.hero-ppfl__actions {
margin-top: 32px;
gap: 14px;
}
.btn-ppfl {
display: inline-flex;
align-items: center;
padding: 15.5px 28px 16.31px;
border-radius: 12px;
font-size: 0.919rem; /* 14.7px */
font-weight: var(--font-weight-bold);
line-height: 22.82px;
color: var(--color-white);
text-decoration: none;
transition: background-color 0.2s, border-color 0.2s;
}
.btn-ppfl--primary {
background-color: var(--color-accent);
box-shadow: 0 10px 26px -10px rgba(255, 128, 0, 0.55);
}
.btn-ppfl--primary:hover {
background-color: var(--color-accent-dark);
color: var(--color-white);
}
.btn-ppfl--outline {
padding-left: 29px;
padding-right: 29px;
border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-ppfl--outline:hover {
border-color: rgba(255, 255, 255, 0.75);
color: var(--color-white);
}
/* ============================================================ */
/* HERO: PAINEL DE METODOLOGIA (glass) */
/* ============================================================ */
.hero-ppfl__panel {
flex: 0 0 var(--hero-ppfl-panel-width);
max-width: var(--hero-ppfl-panel-width);
min-height: 348px;
margin-top: 8px;
padding: 33px 23px 30px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 22px;
background-color: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
}
.hero-ppfl__panel-title {
margin: 0 24px 0 0;
font-size: 1.15rem; /* 18.4px */
font-weight: var(--font-weight-bold);
line-height: 25.76px;
color: var(--color-white);
}
/* --- Grade 2x2 de diferenciais --- */
.hero-ppfl__features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 13.69px 14px;
margin: 22px 0 0;
padding: 0;
}
.hero-ppfl__feature {
position: relative;
min-height: 98.83px;
padding: 14px 16px 16px;
border: 1px solid var(--color-amber);
border-top-width: 2px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.05);
}
.hero-ppfl__feature-title {
margin: 0 44px 0 0; /* espaço para o selo de check */
font-size: 0.838rem; /* 13.4px */
font-weight: var(--font-weight-bold);
line-height: 20.83px;
color: var(--color-white);
}
.hero-ppfl__feature-text {
margin: 8px 0 0;
font-size: 0.738rem; /* 11.8px */
font-weight: var(--font-weight-regular);
line-height: 18.35px;
color: rgba(255, 255, 255, 0.55);
}
/* Selo de check: no Figma o glifo "✓" tem 20px numa caixa de 15 × 19 e
transborda o disco teal de 18px — a ponta escapa pelo canto superior
direito. Por isso o é a CAIXA DO GLIFO e o disco vem no ::before,
deslocado -5px / +4px e mandado para trás com z-index negativo (pinta
acima do fundo do card, abaixo do texto do próprio span). */
.hero-ppfl__feature-check {
position: absolute;
top: 16px;
right: 12px;
z-index: 1;
width: 15px;
height: 19px;
font-size: 20px;
line-height: 19px;
text-align: center;
color: var(--color-white);
/* Pivô no centro do disco: como ele é um círculo, girar em torno do
próprio centro não o move — só o ✓ é inclinado. */
transform: rotate(var(--hero-ppfl-check-tilt));
transform-origin: 4px 13px;
}
.hero-ppfl__feature-check::before {
content: "";
position: absolute;
top: 4px;
left: -5px;
z-index: -1;
width: 18px;
height: 18px;
border-radius: 32px;
background-color: var(--color-teal);
box-shadow: 0 10px 24px -8px rgba(41, 35, 92, 0.5);
}
/* ============================================================ */
/* HERO: FAIXA DE NÚMEROS */
/* ============================================================ */
.hero-ppfl__stats {
position: relative;
z-index: 2;
display: flex;
align-items: center;
min-height: var(--hero-ppfl-stats-height);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
background-color: rgba(41, 35, 92, 0.45);
}
.hero-ppfl__stats-inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 32px;
gap: 16px 40px;
}
.hero-ppfl__stat {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
white-space: nowrap;
}
.hero-ppfl__stat-number {
font-size: 2rem; /* 32px */
font-weight: var(--font-weight-bold);
line-height: 26px;
color: var(--color-amber);
}
.hero-ppfl__stat-label {
font-size: 1.25rem; /* 20px */
font-weight: var(--font-weight-regular);
line-height: 20.83px;
color: rgba(255, 255, 255, 0.8);
}
/* ============================================================ */
/* RESPONSIVO */
/* ============================================================ */
@media (max-width: 1399.98px) {
.ppfl-page {
--hero-ppfl-columns-gap: 40px;
}
.hero-ppfl__panel {
flex: 1 1 520px;
}
.hero-ppfl__intro {
flex: 1 1 420px;
}
}
@media (max-width: 991.98px) {
.hero-ppfl__container {
padding: 72px 24px 40px;
}
.hero-ppfl__grid {
flex-direction: column;
gap: 40px;
}
.hero-ppfl__intro,
.hero-ppfl__panel {
flex: 1 1 auto;
width: 100%;
max-width: 100%;
min-height: 0;
}
.hero-ppfl__panel {
margin-top: 0;
}
.hero-ppfl__title {
margin-top: 0;
font-size: 2.5rem;
line-height: 1.12;
}
}
@media (max-width: 767.98px) {
.hero-ppfl__features {
grid-template-columns: 1fr;
}
.hero-ppfl__title {
font-size: 2rem;
}
.hero-ppfl__subtitle {
font-size: 1.0625rem;
}
.hero-ppfl__actions .btn-ppfl {
flex: 1 1 100%;
justify-content: center;
}
.hero-ppfl__stats-inner {
gap: 14px 24px;
}
.hero-ppfl__stat-number {
font-size: 1.625rem;
}
.hero-ppfl__stat-label {
font-size: 1rem;
}
}
/* ============================================================ */
/* 2/10 — MENU DE ÂNCORAS */
/* origem: sections/2-menu.css */
/* ============================================================ */
/* A faixa acompanha a página. O `z-index` fica acima de tudo que as
seções usam internamente (o maior é 5, nos cards do carrossel de
depoimentos): elas são `position: relative` sem z-index próprio, ou
seja, não criam contexto de empilhamento e os filhos posicionados
delas disputariam a pintura com a faixa em ordem de DOM. */
.menu-ppfl {
position: sticky;
top: 0;
z-index: 20;
min-height: var(--menu-ppfl-height);
background-color: var(--color-lilac-bg);
font-family: var(--font-primary);
}
/* Sombra só quando a faixa está de fato colada no topo, passando por
cima do conteúdo — parada no lugar dela, o design não tem sombra. */
.menu-ppfl.is-stuck {
box-shadow: 0 2px 10px rgba(41, 35, 92, 0.12);
}
/* O `inner` só centraliza e permite rolagem lateral; quem dita a largura
(e portanto a extensão do traço cinza) é a própria lista — 657px no
Figma. `safe center` mantém o início da lista alcançável quando ela
não cabe: com `center` puro o overflow à esquerda fica inacessível. */
.menu-ppfl__inner {
display: flex;
justify-content: center;
justify-content: safe center;
padding: var(--menu-ppfl-text-top) 24px 24px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.menu-ppfl__inner::-webkit-scrollbar {
display: none;
}
/* O traço cinza do Figma é o `border-bottom` desta lista */
.menu-ppfl__list {
display: flex;
align-items: flex-start;
margin: 0;
padding: 0 0 var(--menu-ppfl-rule-gap);
border-bottom: 1px solid var(--color-rule);
white-space: nowrap;
}
.menu-ppfl__item {
display: flex;
align-items: flex-start;
}
/* Separadores "|": conteúdo gerado, para que o texto do link continue
sendo só o rótulo da seção */
.menu-ppfl__item:not(:last-child)::after {
content: "|";
padding: 0 var(--menu-ppfl-sep-gap);
font-size: 1rem;
font-weight: var(--font-weight-regular);
line-height: var(--menu-ppfl-line-height);
color: var(--color-navy-deep);
}
.menu-ppfl__link {
position: relative;
display: block;
font-size: 1rem; /* 16px */
font-weight: var(--font-weight-regular);
line-height: var(--menu-ppfl-line-height);
color: var(--color-navy-deep);
text-decoration: none;
transition: color 0.2s;
}
.menu-ppfl__link:hover,
.menu-ppfl__link:focus-visible {
color: var(--color-accent);
}
.menu-ppfl__link.is-active {
font-weight: var(--font-weight-bold);
color: var(--color-accent);
}
/* Indicador do item ativo — 79 x 3 em x 628 no Figma, ou seja: começa
4px antes do texto (632) e termina junto com ele. Sobrepõe o traço
cinza, como no design. */
.menu-ppfl__link.is-active::after {
content: "";
position: absolute;
left: -4px;
right: 0;
bottom: calc(var(--menu-ppfl-bar-drop) * -1);
height: 3px;
background-color: var(--color-accent);
}
/* ============================================================ */
/* PÁGINA — o que a faixa fixa impõe ao resto do documento */
/* ============================================================ */
/* Irmãs do menu = as seções da página. Sem isto, o clique numa âncora
para com o topo da seção escondido atrás da faixa. */
.menu-ppfl ~ [id] {
scroll-margin-top: var(--menu-ppfl-height);
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* ============================================================ */
/* RESPONSIVO */
/* ============================================================ */
/* A lista não quebra em várias linhas (sobraria um "|" solto no fim de
cada linha e o indicador perderia a referência): abaixo do ponto em
que ela deixa de caber, o menu rola lateralmente. */
@media (max-width: 767.98px) {
.ppfl-page {
--menu-ppfl-sep-gap: 7px;
}
.menu-ppfl__inner {
padding-inline: 16px;
}
.menu-ppfl__link,
.menu-ppfl__item:not(:last-child)::after {
font-size: 0.9375rem; /* 15px */
}
}
/* ============================================================ */
/* 3/10 — FORMAÇÃO — sec-formacao */
/* origem: sections/4-formacao.css */
/* ============================================================ */
.formacao-ppfl {
position: relative;
overflow: hidden;
padding: 44px 0;
background-color: var(--color-surface-light);
font-family: var(--font-primary);
}
.formacao-ppfl__sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
/* Arte de traços em onda. As quatro medidas são as do Figma
(w 115.61% / h 207.85% / left -11.98% / top -32.03%) e, juntas, recortam
sempre a MESMA janela da arte: x 10.4%→96.9%, y 15.4%→63.5%. É por isso
que a altura é percentual e não `auto`: com `auto` a arte encolhe junto
com a largura, a seção continua com ~709px e o recorte escorrega para a
parte de baixo do desenho (as ondas ficam mais densas e mais inclinadas
do que no design). O leve esticão vertical em telas mais estreitas é
imperceptível numa textura de linhas. */
.formacao-ppfl__bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.formacao-ppfl__bg img {
position: absolute;
left: -11.98%;
top: -32.03%;
width: 115.61%;
height: 207.85%;
max-width: none;
}
/* ============================================================ */
/* CABEÇALHO */
/* ============================================================ */
.formacao-ppfl__header {
position: relative;
z-index: 1;
max-width: 728px; /* 680px do Figma + respiros laterais */
margin: 0 auto;
padding: 0 24px;
text-align: center;
}
.formacao-ppfl__title {
margin: 0;
font-size: 2.4rem; /* 38.4px */
font-weight: var(--font-weight-black);
line-height: 46px;
color: var(--color-navy-deep);
}
.formacao-ppfl__lead {
margin: 15.39px 0 0; /* gap 13px + padding 2.39px do Figma */
font-size: 1.0375rem; /* 16.6px */
font-weight: var(--font-weight-regular);
line-height: 25.79px;
color: var(--color-text-muted);
}
.formacao-ppfl__lead strong {
font-weight: var(--font-weight-bold);
}
.formacao-ppfl__rule {
display: block;
width: 96px;
height: 4px;
margin: 45px auto 0;
background-color: var(--color-accent);
}
/* ============================================================ */
/* STEPPER */
/* ============================================================ */
.formacao-ppfl__steps {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
max-width: calc(var(--formacao-ppfl-col) * 5 + 48px);
margin: 83px auto 0;
padding: 0 24px;
}
.formacao-ppfl__step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-height: var(--formacao-ppfl-step-height);
padding: 0 14px;
--step-color: var(--color-navy-deep);
}
.formacao-ppfl__step--navy { --step-color: var(--color-navy-deep); }
.formacao-ppfl__step--indigo { --step-color: var(--color-indigo); }
.formacao-ppfl__step--violet { --step-color: var(--color-violet); }
.formacao-ppfl__step--teal { --step-color: var(--color-teal); }
.formacao-ppfl__step--accent { --step-color: var(--color-accent); }
/* --- Vaga do trilho (círculo fantasma) ---
Marca, com o ícone esmaecido, o lugar que o círculo colorido ocupa
quando o card abre. Também é quem reserva os 64px do trilho. */
.formacao-ppfl__slot {
display: grid;
place-items: center;
flex: 0 0 auto;
width: var(--formacao-ppfl-rail);
height: var(--formacao-ppfl-rail);
margin-bottom: var(--formacao-ppfl-rail-gap);
border: 2px solid var(--color-border-soft);
border-radius: 50%;
background-color: var(--color-white);
color: var(--color-text-muted);
opacity: var(--formacao-ppfl-dim);
transform: scale(var(--formacao-ppfl-dot-scale));
pointer-events: none;
transition: opacity 0.3s ease;
}
.is-active .formacao-ppfl__slot {
opacity: 0;
}
/* --- Círculo do ícone ---
Vive sobreposto à vaga do trilho, invisível enquanto o card está
fechado; quando ele abre, surge por cima do fantasma — o ícone
esmaecido ganha a cor da etapa no lugar, sem viajar pela coluna. */
.formacao-ppfl__dot {
position: absolute;
top: 0;
left: 50%;
z-index: 2;
display: grid;
place-items: center;
width: var(--formacao-ppfl-rail);
height: var(--formacao-ppfl-rail);
border: 2px solid var(--step-color);
border-radius: 50%;
background-color: var(--step-color);
color: var(--color-white);
pointer-events: none;
opacity: 0;
transform: translate(-50%, 0) scale(var(--formacao-ppfl-dot-scale));
transition: opacity 0.45s var(--formacao-ppfl-ease),
transform 0.45s var(--formacao-ppfl-ease);
}
.is-active .formacao-ppfl__dot {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
/* 26px no círculo aberto → 24.44px no fechado (o `scale` do círculo leva
o ícone junto), exatamente como no Figma. */
.formacao-ppfl__slot svg,
.formacao-ppfl__dot svg {
display: block;
width: 26px;
height: 26px;
}
/* --- Card --- */
.formacao-ppfl__card {
width: var(--formacao-ppfl-card);
min-height: 80px;
padding: 23px 19px 12px;
border: 1px solid var(--color-border-soft);
border-radius: 14px;
background-color: var(--color-white);
opacity: var(--formacao-ppfl-dim);
transition: width 0.35s var(--formacao-ppfl-ease),
min-height 0.35s var(--formacao-ppfl-ease),
padding 0.35s var(--formacao-ppfl-ease),
opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.is-active .formacao-ppfl__card {
width: var(--formacao-ppfl-card-active);
min-height: var(--formacao-ppfl-card-height);
padding: 25.5px 21px 21px;
border-color: var(--step-color);
opacity: 1;
box-shadow: 0 20px 40px -28px rgba(41, 35, 92, 0.3);
}
.formacao-ppfl__step:has(.formacao-ppfl__trigger:focus-visible) .formacao-ppfl__card {
outline: 2px solid var(--step-color);
outline-offset: 3px;
}
.formacao-ppfl__card-title {
margin: 0;
font-size: 0.894rem; /* 14.3px */
font-weight: var(--font-weight-bold);
line-height: 22.146px;
color: var(--color-navy-deep);
}
.is-active .formacao-ppfl__card-title {
font-size: 0.95rem; /* 15.2px */
line-height: 23.56px;
}
/* O gatilho é o próprio título; o `::before` estende a área de clique a
toda a etapa — inclusive ao círculo do trilho, lá em cima. */
.formacao-ppfl__trigger {
display: block;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.formacao-ppfl__trigger:focus-visible {
outline: none;
}
.formacao-ppfl__trigger::before {
content: "";
position: absolute;
inset: 0;
}
.formacao-ppfl__body {
position: relative; /* acima da área de clique */
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: max-height 0.3s ease, opacity 0.25s ease,
visibility 0s linear 0.3s;
}
.is-active .formacao-ppfl__body {
max-height: 220px;
opacity: 1;
visibility: visible;
transition: max-height 0.35s ease, opacity 0.3s ease 0.05s,
visibility 0s;
}
.formacao-ppfl__text {
margin: 6.8px 0 0;
font-size: 0.819rem; /* 13.1px */
font-weight: var(--font-weight-regular);
line-height: 20.34px;
color: var(--color-text-muted);
}
/* ============================================================ */
/* RESPONSIVO */
/* ============================================================ */
/* Entre 992px e 1247px o stepper continua com 5 colunas, apenas mais
estreito — os cards acompanham a coluna. */
@media (max-width: 1247.98px) {
.formacao-ppfl__card,
.is-active .formacao-ppfl__card {
width: 100%;
}
.formacao-ppfl__step {
padding: 0 8px;
}
}
/* Abaixo de 992px não há viagem do ícone: a seção vira uma lista vertical
com o círculo (já na sua cor) ao lado do card. */
@media (max-width: 991.98px) {
/* Aqui a seção fica alta e estreita: manter o recorte do Figma esticaria
demais o desenho. Passa a `cover`, mostrando a faixa central. */
.formacao-ppfl__bg img {
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 40%;
}
.formacao-ppfl__steps {
grid-template-columns: 1fr;
gap: 16px;
max-width: 620px;
margin-top: 48px;
}
.formacao-ppfl__step {
flex-direction: row;
align-items: flex-start;
gap: 16px;
min-height: 0;
padding: 0;
}
.formacao-ppfl__slot {
display: none;
}
.formacao-ppfl__dot,
.is-active .formacao-ppfl__dot {
position: static;
flex: 0 0 auto;
width: 52px;
height: 52px;
opacity: 1; /* aqui o círculo colorido é fixo, sem fade */
transform: none;
}
.formacao-ppfl__slot svg,
.formacao-ppfl__dot svg {
width: 21px;
height: 21px;
}
.formacao-ppfl__card,
.is-active .formacao-ppfl__card {
flex: 1 1 auto;
min-height: 0;
padding: 14px 18px 16px;
opacity: 1;
}
.formacao-ppfl__card-title,
.is-active .formacao-ppfl__card-title {
font-size: 1rem;
line-height: 24px;
}
.formacao-ppfl__text {
font-size: 0.875rem;
line-height: 21px;
}
}
@media (max-width: 767.98px) {
.formacao-ppfl {
padding: 40px 0;
}
.formacao-ppfl__title {
font-size: 1.75rem;
line-height: 1.2;
}
.formacao-ppfl__lead {
font-size: 1rem;
line-height: 1.55;
}
.formacao-ppfl__rule {
margin-top: 28px;
}
.formacao-ppfl__steps {
margin-top: 36px;
}
.formacao-ppfl__dot,
.is-active .formacao-ppfl__dot {
width: 46px;
height: 46px;
}
.formacao-ppfl__slot svg,
.formacao-ppfl__dot svg {
width: 19px;
height: 19px;
}
}
@media (prefers-reduced-motion: reduce) {
.formacao-ppfl__slot,
.formacao-ppfl__dot,
.formacao-ppfl__card,
.formacao-ppfl__body {
transition: none;
}
}
/* ============================================================ */
/* 4/10 — ESCOLHA SETORIAL — sec-setorial */
/* origem: sections/7-setorial.css */
/* ============================================================ */
.setorial-ppfl {
padding: 90px 24px;
background-color: var(--color-white);
font-family: var(--font-primary);
}
.setorial-ppfl__container {
box-sizing: border-box;
max-width: var(--setorial-ppfl-container);
margin: 0 auto;
padding-inline: var(--setorial-ppfl-gutter);
}
/* --- Cabeçalho: título, texto de apoio e régua laranja --- */
.setorial-ppfl__header {
text-align: center;
}
.setorial-ppfl__title {
margin: 0;
font-size: 2.4rem; /* 38.4px */
font-weight: var(--font-weight-black);
line-height: 46px;
color: var(--color-navy-deep);
}
/* 790px é a largura do bloco de texto no Figma — é ela que define
a quebra em duas linhas do desktop */
.setorial-ppfl__lead {
max-width: 790px;
margin: 18px auto 0;
font-size: 1.0375rem; /* 16.6px */
font-weight: var(--font-weight-regular);
line-height: 25.79px;
color: var(--color-text-muted);
}
.setorial-ppfl__lead strong {
font-weight: var(--font-weight-bold);
}
.setorial-ppfl__rule {
display: block;
width: 96px;
height: 4px;
margin: 47px auto 0;
background-color: var(--color-accent);
}
/* ============================================================ */
/* CARDS */
/* ============================================================ */
.setorial-ppfl__cards {
display: flex;
gap: var(--setorial-ppfl-card-gap);
margin: 46px 0 0;
padding: 0;
}
/* Os dois cards têm a mesma altura (563px no Figma) e o CTA é
empurrado para a base — por isso o corpo é um flex column com
`margin-top: auto` no botão, em vez de alturas fixas. */
.setorial-ppfl__card {
box-sizing: border-box;
display: flex;
flex: 1 1 0;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: 1px solid var(--color-border-soft);
border-radius: 22px;
background-color: var(--setorial-card-bg);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
/* --- Capa: gradiente + foto + selo + faixa de setores ---
`isolation: isolate` confina o mix-blend-mode da foto (card
Serviços) à capa, sem afetar o resto do card. */
.setorial-ppfl__media {
position: relative;
height: var(--setorial-ppfl-media-height);
overflow: hidden;
isolation: isolate;
background-image: var(--setorial-media-gradient);
}
/* O recorte vertical (`object-position`) reproduz o enquadramento do
Figma: Indústria mostra a faixa 54%–80% da foto; Serviços, 16%–77%. */
.setorial-ppfl__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--setorial-photo-position);
opacity: var(--setorial-photo-opacity);
mix-blend-mode: var(--setorial-photo-blend);
}
.setorial-ppfl__tag {
position: absolute;
top: 18px;
left: 18px;
display: inline-flex;
padding: 7px 15px;
border: 1px solid var(--setorial-tag-border);
border-radius: 100px;
background-color: var(--setorial-tag-bg);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
font-size: 0.681rem; /* 10.9px */
font-weight: var(--font-weight-regular);
line-height: 16.86px;
letter-spacing: 0.87px;
text-transform: uppercase;
color: var(--color-white);
}
/* Faixa translúcida colada na base da capa. Altura mínima de 50px
(Figma) com o texto centrado — cresce se a lista quebrar em mais
linhas em telas estreitas. */
.setorial-ppfl__sectors {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: var(--setorial-ppfl-strip-height);
padding: 4px 12px;
background-color: var(--setorial-strip-bg);
}
/* 411px é a largura do texto no Figma; é ela que produz as 3 linhas
do card Indústria e as 2 do card Serviços. */
.setorial-ppfl__sectors-list {
max-width: 411px;
margin: 0;
padding: 0;
font-size: 0.75rem; /* 12px */
font-weight: var(--font-weight-regular);
line-height: 14px;
text-align: center;
color: var(--color-white);
}
/* Os itens fluem como texto corrido (e não como flex) para que a
quebra de linha caia em qualquer ponto da enumeração, como no
design; o "|" é conteúdo gerado, então cada setor continua sendo
um item de lista limpo para leitores de tela. */
.setorial-ppfl__sectors-list li {
display: inline;
}
.setorial-ppfl__sectors-list li:not(:last-child)::after {
content: " |";
}
/* --- Corpo do card --- */
.setorial-ppfl__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 14px 30px 32px;
}
.setorial-ppfl__card-title {
margin: 0;
font-size: 1.25rem; /* 20px */
font-weight: var(--font-weight-black);
line-height: 31px;
color: var(--color-navy-deep);
}
.setorial-ppfl__list {
display: flex;
flex-direction: column;
gap: 11px;
margin: 16px 0 0;
padding: 0 0 8px; /* o `pb` da lista no Figma */
}
.setorial-ppfl__item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.9rem; /* 14.4px */
font-weight: var(--font-weight-regular);
line-height: 22.32px;
color: var(--color-text-muted);
}
.setorial-ppfl__item em {
font-style: italic;
}
.setorial-ppfl__item strong {
font-weight: var(--font-weight-bold);
}
/* `margin-top` alinha o selo à primeira linha do item, inclusive nos
itens de duas linhas do card Serviços */
.setorial-ppfl__check {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-top: 2px;
border-radius: 9px;
background-color: var(--setorial-check-bg);
font-size: 0.75rem;
line-height: 1;
color: var(--color-white);
}
/* No Figma os três itens ficam em x 0 / 108 / 185 de um bloco de
280px — o `gap` de 14px reproduz esse espaçamento e ainda permite
que a linha quebre em telas estreitas. O `padding` vertical
reproduz o bloco de 25px que envolve o texto de 19.2px. */
.setorial-ppfl__meta {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin: 8px 0 16px;
padding: 3px 0;
font-size: 0.75rem; /* 12px */
font-weight: var(--font-weight-extrabold);
line-height: 19.2px;
color: var(--color-meta);
}
.setorial-ppfl__meta li {
display: flex;
align-items: center;
gap: 5px;
}
.setorial-ppfl__meta-icon {
font-size: 0.8125rem;
line-height: 1;
}
/* `margin-top: auto` cola o CTA na base do card; o `margin-bottom`
da lista de metadados garante o respiro mínimo entre os dois. */
.setorial-ppfl__cta {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding: 13px 24px;
border-radius: 12px;
background-color: var(--setorial-cta-bg);
font-size: 0.881rem; /* 14.1px */
font-weight: var(--font-weight-bold);
line-height: 21.82px;
color: var(--color-white);
text-decoration: none;
transition: background-color 0.2s;
}
.setorial-ppfl__cta:hover,
.setorial-ppfl__cta:focus-visible {
background-color: var(--setorial-cta-bg-hover);
color: var(--color-white);
}
/* ============================================================ */
/* VARIANTES DE CARD */
/* ============================================================ */
.setorial-ppfl__card--industria {
--setorial-card-bg: var(--color-card-warm);
--setorial-media-gradient:
linear-gradient(90deg, rgba(255, 128, 0, 0.16) 0%, rgba(255, 128, 0, 0.16) 100%),
linear-gradient(6.25deg,
rgb(255, 128, 0) 11.64%,
rgba(255, 147, 38, 0.72) 75.66%,
rgba(255, 255, 255, 0.56) 105.67%);
--setorial-photo-opacity: 0.18;
--setorial-photo-blend: normal;
--setorial-photo-position: 50% 74%;
--setorial-tag-bg: rgba(123, 47, 48, 0.61);
--setorial-tag-border: rgba(255, 255, 255, 0.52);
--setorial-strip-bg: rgba(165, 82, 50, 0.77);
--setorial-check-bg: var(--color-navy-deep);
--setorial-cta-bg: var(--color-navy-deep);
--setorial-cta-bg-hover: var(--color-navy-darker);
}
/* No Figma a linha de metadados deste card fica 10px mais baixa que a
do card Serviços (8px de vão contra 18px) — mantido para bater com
o screenshot de referência. */
.setorial-ppfl__card--industria .setorial-ppfl__meta {
margin-top: 18px;
}
.setorial-ppfl__card--servicos {
--setorial-card-bg: var(--color-card-cool);
--setorial-media-gradient:
linear-gradient(111.72deg, rgb(38, 33, 85) 0%, rgba(203, 108, 230, 0.9) 100%);
--setorial-photo-opacity: 0.35;
--setorial-photo-blend: soft-light;
--setorial-photo-position: 50% 40%;
--setorial-tag-bg: rgba(255, 255, 255, 0.16);
--setorial-tag-border: rgba(255, 255, 255, 0.3);
--setorial-strip-bg: rgba(203, 108, 230, 0.56);
--setorial-check-bg: var(--color-green);
--setorial-cta-bg: var(--color-green);
--setorial-cta-bg-hover: var(--color-green-dark);
}
/* ============================================================ */
/* RESPONSIVO */
/* ============================================================ */
@media (max-width: 1247.98px) {
.setorial-ppfl {
padding-block: 80px;
}
}
@media (max-width: 991.98px) {
.ppfl-page {
--setorial-ppfl-gutter: 8px;
}
.setorial-ppfl {
padding: 72px 24px;
}
/* Empilhado, o card não precisa mais ocupar a largura toda da
coluna — 560px mantém a proporção da capa próxima do design. */
.setorial-ppfl__cards {
flex-direction: column;
align-items: center;
}
/* O `flex: 1 1 0` do card divide o espaço entre as duas colunas
enquanto a lista é uma linha. Empilhada, o eixo principal vira o
vertical e esse mesmo `flex-basis: 0` zera a ALTURA dos cards (a
lista não tem altura própria para distribuir), deixando só as duas
bordas na tela. Empilhado, o card volta a medir pelo conteúdo. */
.setorial-ppfl__card {
flex: 0 0 auto;
width: 100%;
max-width: 560px;
}
}
@media (max-width: 767.98px) {
.setorial-ppfl {
padding: 56px 16px;
}
.setorial-ppfl__title {
font-size: 2rem;
line-height: 1.2;
}
.setorial-ppfl__lead {
margin-top: 14px;
font-size: 1rem;
}
.setorial-ppfl__rule {
margin-top: 32px;
}
.setorial-ppfl__cards {
margin-top: 32px;
}
.setorial-ppfl__body {
padding: 14px 20px 24px;
}
}
@media (max-width: 575.98px) {
.setorial-ppfl__title {
font-size: 1.75rem;
}
.setorial-ppfl__sectors-list {
font-size: 0.6875rem; /* 11px */
line-height: 13px;
}
.setorial-ppfl__cta {
width: 100%;
justify-content: center;
}
}
/* ============================================================ */
/* 5/10 — CERTIFICAÇÃO — sec-upsell (dupla cert.) */
/* origem: sections/9-upsell.css */
/* ============================================================ */
.upsell-ppfl {
position: relative;
overflow: hidden;
padding: 90px 24px;
font-family: var(--font-primary);
background-color: var(--color-surface-soft);
}
/* --- Fundo: véus de cor que trocam + arte de linhas fixa --- */
.upsell-ppfl__bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.upsell-ppfl__tint {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--upsell-ppfl-fade) ease;
}
.upsell-ppfl__tint--saude {
background-image: linear-gradient(236.37deg, #f5f6fa 48.89%, #eafeff 74.51%);
}
.upsell-ppfl__tint--digital {
background-image: linear-gradient(236.37deg, #ffffff 48.89%, #e0dcff 100%);
}
.upsell-ppfl__tint--supply {
background-image: linear-gradient(236.37deg, #f5f6fa 48.89%, #ffe8e8 100%);
}
.upsell-ppfl[data-upsell-active='saude'] .upsell-ppfl__tint--saude,
.upsell-ppfl[data-upsell-active='digital'] .upsell-ppfl__tint--digital,
.upsell-ppfl[data-upsell-active='supply'] .upsell-ppfl__tint--supply {
opacity: 1;
}
/* Mesma aplicação das outras duas ocorrências da arte na página
(`.formacao-ppfl__bg img` e `.jornada-ppfl__bg img`): largura E altura em %
da seção. O ponto não é preservar a proporção do arquivo — é justamente NÃO
preservar. Como a altura da seção não cresce com a viewport, a altura da arte
também não; em 5400px de largura o desenho estica 3.7x na horizontal mas só
1.33x na vertical. A espessura do traço é uma dimensão vertical, então ela
quase não amplia e a linha continua nítida — enquanto a curva, que é suave e
de baixa frequência na horizontal, estica sem que se perceba.
Foi por isso que `height: auto` borrou aqui: ampliava 3.7x nos DOIS eixos.
Medições (Playwright, 1440→5400px): seção de certificações 1322px de altura
constante, seção de formação 709px, arte da formação 1474px. Os 111.50%
entregam os mesmos 1474px de arte aqui (1474/1322) — mesma espessura de
traço e mesmo 1.33x de ampliação vertical das outras duas.
Diferença desta seção: centrada na vertical. Sobram 11.50% de altura para
repartir entre topo e base, daí o top de -5.75% — exato em qualquer altura
de seção, já que a arte é medida em % dela. */
.upsell-ppfl__lines {
position: absolute;
top: -5.75%;
left: -11.98%;
width: 115.61%;
height: 111.50%;
max-width: none;
}
.upsell-ppfl__container {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--upsell-ppfl-stack-gap);
max-width: var(--upsell-ppfl-container);
margin: 0 auto;
padding-inline: var(--upsell-ppfl-gutter);
}
/* --- Cabeçalho: título, textos de apoio e régua laranja --- */
.upsell-ppfl__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
max-width: 760px;
text-align: center;
}
/* 520px é o que reproduz a quebra em duas linhas do Figma
(a linha mais larga do título mede 492px) */
.upsell-ppfl__title {
margin: 0;
padding-top: 7px;
max-width: 520px;
font-size: 2.4rem; /* 38.4px */
font-weight: var(--font-weight-black);
line-height: 46px;
color: var(--color-navy-deep);
}
.upsell-ppfl__lead {
margin: 0;
max-width: 750px;
font-size: 1.019rem; /* 16.3px */
font-weight: var(--font-weight-regular);
line-height: 25.3px;
color: #000;
}
.upsell-ppfl__lead:first-of-type {
padding-top: 6px;
}
.upsell-ppfl__lead--narrow {
max-width: 728px;
}
.upsell-ppfl__rule {
display: block;
width: 96px;
height: 4px;
background-color: var(--color-accent);
}
/* --- Abas: uma cor de acento por certificação --- */
.upsell-ppfl__tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
width: 100%;
padding-top: 20px;
}
.upsell-ppfl__tab {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 12px 23px;
border: 1px solid var(--upsell-ppfl-tab-accent);
border-radius: 100px;
background-color: var(--color-white);
color: var(--color-text-muted);
font-family: inherit;
font-size: 0.8625rem; /* 13.8px */
font-weight: var(--font-weight-bold);
line-height: 1.15;
cursor: pointer;
transition:
background-color var(--upsell-ppfl-fade) var(--upsell-ppfl-ease),
color var(--upsell-ppfl-fade) var(--upsell-ppfl-ease),
border-color var(--upsell-ppfl-fade) var(--upsell-ppfl-ease),
box-shadow 250ms var(--upsell-ppfl-ease);
}
/* No Figma só a aba Saúde tem largura fixa (114px); as outras se ajustam
ao texto. Mantido para preservar o equilíbrio das três pílulas. */
.upsell-ppfl__tab--saude {
--upsell-ppfl-tab-accent: var(--color-teal);
min-width: 114px;
}
.upsell-ppfl__tab--digital {
--upsell-ppfl-tab-accent: var(--color-navy-deep);
}
.upsell-ppfl__tab--supply {
--upsell-ppfl-tab-accent: var(--color-blood);
}
.upsell-ppfl__tab:hover {
box-shadow: 0 6px 16px -10px var(--upsell-ppfl-tab-accent);
}
.upsell-ppfl__tab:focus-visible {
outline: 2px solid var(--upsell-ppfl-tab-accent);
outline-offset: 3px;
}
.upsell-ppfl__tab.is-active {
background-color: var(--upsell-ppfl-tab-accent);
color: var(--color-white);
}
/* --- Pilha de cards: os três ocupam a mesma célula do grid --- */
/* Assim a altura é sempre a do card mais alto e a troca de estado
não desloca nada abaixo da seção. */
.upsell-ppfl__stack {
display: grid;
width: 100%;
}
.upsell-ppfl__card {
grid-column: 1;
grid-row: 1;
display: flex;
box-sizing: border-box;
min-height: var(--upsell-ppfl-card-height);
border: 1px solid var(--color-border-soft);
border-radius: 26px;
background-color: var(--color-white);
overflow: hidden;
opacity: 0;
visibility: hidden;
transition:
opacity var(--upsell-ppfl-fade) ease,
visibility 0s linear var(--upsell-ppfl-fade);
}
.upsell-ppfl__card.is-active {
opacity: 1;
visibility: visible;
z-index: 1;
transition:
opacity var(--upsell-ppfl-fade) ease,
visibility 0s;
}
.upsell-ppfl__card:focus-visible {
outline: 2px solid var(--color-navy-deep);
outline-offset: 3px;
}
/* --- Painel de imagem: gradiente + foto em soft-light --- */
/* isolation confina o mix-blend-mode ao painel */
.upsell-ppfl__media {
position: relative;
flex: 0 0 var(--upsell-ppfl-media-width);
isolation: isolate;
overflow: hidden;
background-color: var(--color-white);
}
.upsell-ppfl__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: soft-light;
}
/* object-position converte o enquadramento do Figma
(largura/deslocamento da foto dentro do painel de 439 x 567) */
.upsell-ppfl__media--saude {
background-image: linear-gradient(216.84deg, rgba(22, 145, 148, .86) 1.13%, rgba(41, 35, 92, .86) 96.37%);
}
.upsell-ppfl__media--saude .upsell-ppfl__photo {
object-position: 65.6% 50%;
opacity: .71;
}
.upsell-ppfl__media--digital {
background-image: linear-gradient(180deg, rgba(41, 35, 92, .86) 0%, rgba(57, 65, 149, .86) 100%);
}
.upsell-ppfl__media--digital .upsell-ppfl__photo {
object-position: 18.7% 50%;
}
.upsell-ppfl__media--supply {
background-image: linear-gradient(216deg, rgba(255, 160, 160, 1) .3%, rgba(120, 0, 0, 1) 84.05%);
}
.upsell-ppfl__media--supply .upsell-ppfl__photo {
object-position: 50% 85.8%;
opacity: .71;
}
.upsell-ppfl__logo {
position: absolute;
top: 23px;
left: 28px;
z-index: 1;
width: 52.4px;
height: 38px;
}
/* --- Corpo do card --- */
.upsell-ppfl__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 20px;
min-width: 0;
padding: 51px 44px 52px;
}
.upsell-ppfl__card-title {
margin: 0;
font-size: 1.3rem; /* 20.8px */
font-weight: var(--font-weight-black);
line-height: 27px;
color: var(--color-navy-deep);
}
.upsell-ppfl__list {
display: flex;
flex-direction: column;
gap: 11px;
margin: 0;
padding: 0;
list-style: none;
}
.upsell-ppfl__item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.9rem; /* 14.4px */
line-height: 22.32px;
color: var(--color-text-muted);
}
.upsell-ppfl__check {
display: inline-flex;
flex: 0 0 17px;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
margin-top: 1px;
border-radius: 8.5px;
background-color: var(--color-navy-deep);
color: var(--color-white);
font-size: 0.65rem; /* 10.4px */
line-height: 16.12px;
}
.upsell-ppfl__note {
margin: 0;
padding: 15px 18px 16px 21px;
border-left: 3px solid var(--color-accent);
border-radius: 8px;
background-color: var(--color-surface-soft);
font-size: 0.85rem; /* 13.6px */
line-height: 21px;
color: var(--color-text-muted);
}
.upsell-ppfl__partner {
display: flex;
align-items: center;
gap: 12px;
}
.upsell-ppfl__partner-logo {
flex: 0 0 48px;
width: 48px;
height: 48px;
border-radius: 24px;
object-fit: cover;
}
.upsell-ppfl__partner-text {
margin: 0;
font-size: 0.8rem; /* 12.8px */
line-height: 19.84px;
color: var(--color-text-muted);
}
.upsell-ppfl__partner-text strong {
display: block;
font-size: 0.8625rem; /* 13.8px */
font-weight: var(--font-weight-bold);
line-height: 21.33px;
color: var(--color-navy-deep);
}
.upsell-ppfl__cta {
display: inline-flex;
align-self: flex-start;
align-items: center;
padding: 17px 26px 13px;
border-radius: 12px;
background-color: var(--color-navy-deep);
color: var(--color-white);
font-size: 0.881rem; /* 14.1px */
font-weight: var(--font-weight-bold);
line-height: 21.82px;
text-decoration: none;
transition:
background-color 250ms var(--upsell-ppfl-ease),
box-shadow 250ms var(--upsell-ppfl-ease);
}
.upsell-ppfl__cta:hover,
.upsell-ppfl__cta:focus-visible {
background-color: var(--color-navy-darker);
color: var(--color-white);
box-shadow: 0 12px 24px -16px rgba(41, 35, 92, .9);
}
.upsell-ppfl__cta-arrow {
margin-left: 6px;
transition: transform 250ms var(--upsell-ppfl-ease);
}
.upsell-ppfl__cta:hover .upsell-ppfl__cta-arrow,
.upsell-ppfl__cta:focus-visible .upsell-ppfl__cta-arrow {
transform: translateX(3px);
}
/* --- Fecho e observação --- */
.upsell-ppfl__closing {
margin: 0;
padding-top: 26.8px;
max-width: 600px;
font-size: 1rem;
line-height: 24.8px;
text-align: center;
color: #000;
}
.upsell-ppfl__disclaimer {
box-sizing: border-box;
margin: 0;
padding: 17px 23px;
width: 100%;
max-width: 820px;
border: 1px solid var(--color-border-soft);
border-radius: 12px;
background-color: var(--color-white);
font-size: 0.8rem; /* 12.8px */
font-style: italic;
line-height: 19.84px;
text-align: center;
color: #000;
}
/* 694px é a medida do bloco de texto no Figma — é ela que produz
a quebra em duas linhas dentro da caixa de 820px */
.upsell-ppfl__disclaimer-text {
display: block;
max-width: 694px;
margin-inline: auto;
}
/* ============================================================ */
/* RESPONSIVO */
/* ============================================================ */
@media (max-width: 1199.98px) {
.upsell-ppfl__media {
flex-basis: 38%;
}
.upsell-ppfl__body {
padding: 44px 36px 46px;
}
}
@media (max-width: 991.98px) {
.upsell-ppfl {
padding: 70px 20px;
}
.upsell-ppfl__card {
flex-direction: column;
min-height: 0;
}
.upsell-ppfl__media {
flex: 0 0 260px;
}
/* o enquadramento vertical do Figma vale para o painel retrato;
na faixa horizontal a foto volta ao centro */
.upsell-ppfl__media .upsell-ppfl__photo {
object-position: 50% 50%;
}
/* Mesmo tratamento da seção "A sua formação": aqui o card vira vertical e a
seção fica alta e estreita, e a arte na proporção natural deixaria faixas
vazias em cima e embaixo. Passa a `cover`, mostrando a faixa central. */
.upsell-ppfl__lines {
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 40%;
}
.upsell-ppfl__body {
padding: 32px 28px 36px;
}
}
@media (max-width: 767.98px) {
.upsell-ppfl__title {
max-width: none;
font-size: 1.9rem;
line-height: 38px;
}
.upsell-ppfl__lead {
font-size: 0.95rem;
line-height: 23px;
}
.upsell-ppfl__tab {
padding: 11px 18px;
font-size: 0.8125rem;
}
.upsell-ppfl__tab--saude {
min-width: 0;
}
.upsell-ppfl__card-title {
font-size: 1.15rem;
line-height: 24px;
}
.upsell-ppfl__media {
flex-basis: 200px;
}
.upsell-ppfl__closing {
padding-top: 12px;
font-size: 0.95rem;
line-height: 23px;
}
}
@media (max-width: 575.98px) {
.upsell-ppfl {
padding: 56px 16px;
}
.upsell-ppfl__container {
padding-inline: 0;
}
.upsell-ppfl__body {
padding: 24px 20px 28px;
}
.upsell-ppfl__cta {
align-self: stretch;
justify-content: center;
}
.upsell-ppfl__disclaimer {
padding: 15px 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.upsell-ppfl__tint,
.upsell-ppfl__card,
.upsell-ppfl__tab,
.upsell-ppfl__cta,
.upsell-ppfl__cta-arrow {
transition-duration: 1ms;
}
}
/* ============================================================ */
/* 6/10 — BENEFÍCIOS — sec-beneficios */
/* origem: sections/3-beneficios.css */
/* ============================================================ */
.beneficios-ppfl {
padding: 90px 24px 72px;
background-image: linear-gradient(180deg, var(--color-white) 0%, var(--color-lilac) 100%);
font-family: var(--font-primary);
}
/* Sprite dos ícones: fora do fluxo, só serve de biblioteca para os