/* ============================================================ */
/* PPFL SERVICOS — pagina completa                              */
/* Origem: figma-to-bootstrap/outputs/ppfl-servicos/merged/styles.css */
/*                                                              */
/* Adaptacoes para o LeanWeb:                                   */
/*  - `:root` e `body` do mockup foram escopados ao wrapper      */
/*    `.ppfl-servicos-page`, para nao vazarem nos tokens/fonte   */
/*    do header e do footer do layout global.                    */
/*  - o CSS nao referencia assets (`url()`); os caminhos de      */
/*    imagem vivem na view, apontando para                       */
/*    ~/img/academia/programa-formacao-lean-servicos/ (novos) e  */
/*    ~/img/academia/programa-formacao-lean/ (compartilhados     */
/*    com a pagina irma, sem duplicar arquivo).                  */
/*  - no fim do arquivo: tema da FAQ, camada de motion           */
/*    (preload/parallax/focus-visible) e o contrato mg-btn.      */
/* A fonte da verdade continua sendo o merge do figma-to-bootstrap. */
/* ============================================================ */

/* ============================================================ */
/* PPFL SERVIÇOS — PÁGINA COMPLETA (LIB)                       */
/* Merge das 12 seções de sections/, nesta ordem:              */
/* hero · menu · por que fazer · para quem se destina ·        */
/* o que vai aprender · material · certificações ·             */
/* especialistas · depoimentos · investimento ·                */
/* continue explorando                                         */
/*                                                             */
/* + 13ª seção, acrescentada depois do merge: "tudo o que está */
/* incluído" (10/13), entre depoimentos e investimento. Ela não */
/* tem frame próprio em ppfl-servicos — veio do frame 2700:3   */
/* da trilha Indústria (ppfl-industria/sections/7-incluido),   */
/* recolorida para o acento desta trilha.                      */
/*                                                             */
/* 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ó (deduplicado)  */
/* e o body{} repetido vira uma regra única. Tokens que        */
/* colidiam entre seções foram reescopados — ver comentários.  */
/* ============================================================ */

.ppfl-servicos-page {
  /* --- 1/13 · HERO — sec-topo  (1-hero.css) --- */

  /* Cores */
  --color-navy-deep:    #29235c;
  --color-navy-soft:    #5b5880;
  --color-green:        #00c372;
  --color-green-dark:   #00a961;
  --color-border-soft:  #e3e5ee;
  --color-page-bg:      #f5f6fa;
  --color-white:        #ffffff;

  /* Tipografia */
  --font-primary:          'Roboto', sans-serif;
  --font-weight-regular:   400;
  --font-weight-bold:      700;
  --font-weight-black:     900;

  /* Hero */
  --hero-servicos-height:      715px;  /* altura do frame no Figma */
  --hero-servicos-gutter:      167px;  /* respiro vertical do bloco de conteúdo */
  --hero-servicos-aside-width: 291px;  /* cartão de resumo técnico */
  --hero-servicos-intro-width: 780px;  /* bloco de texto à esquerda */
  --hero-servicos-columns-gap: 48px;
  /* --- 2/13 · MENU DE ÂNCORAS — menu-serviços  (2-menu.css) --- */

  /* Cores */
  --color-magenta:        #cb6ce6;
  --menu-ppfl-lilac-bg:       #f7eefc;  /* faixa de fundo (2500:1233) */
  --color-rule:           #b8b8b8;  /* traço Line 46 (2500:1235) */

  /* Tipografia */

  /* Menu — medidas retiradas do frame do Figma
     texto ............ centro em y 37, line-height 25.79 → 24.1 a 49.9
     traço cinza ...... y 62 (1px), de x 636 a 1383
     indicador ........ y 60 → 63 (3px), de x 540 a 643
     traço + indicador formam uma linha contínua de 540 a 1383 (843px),
     centrada em 961 como o texto: o cinza cobre tudo e o magenta
     repinta o trecho do item ativo */
  --menu-ppfl-height:      86px;
  --menu-ppfl-text-top:    24px;
  --menu-ppfl-line-height: 25.79px;
  --menu-ppfl-rule-gap:    12px;    /* base do texto (49.9) → traço (62) */
  --menu-ppfl-bar-drop:    13px;    /* base do texto (49.9) → base da barra (63) */
  --menu-ppfl-sep-gap:     8px;     /* equivale aos 2 espaços de cada lado do "|" */
  /* --- 3/13 · POR QUE FAZER — o-que-ppfl-servicos  (2-por-que-fazer.css) --- */

  /* Cores */
  --color-indigo:         #394195;
  --color-violet:         #534ab7;
  --color-accent:         #ff8000;
  --color-text-muted:     #5b5880;
  --color-surface:        #f6f5f6;

  /* Tipografia */
  --font-mono:             'Roboto Mono', ui-monospace, monospace;
  --font-weight-extrabold: 800;

  /* Por que fazer — medidas retiradas do frame do Figma
     seção: 76px no topo (borda de cima do card de vídeo) e 100px na base
     topo: coluna de texto 424 + gap 53 + card de vídeo 496 = 973
     trilho: 880 = calha de 56 (selo de 48 + folga) + cards de 824
     O bloco do topo fica ~30px à direita do centro no Figma; aqui ele é
     centralizado — deslocamento sem intenção de design. */
  --porque-ppfl-topo:      973px;
  --porque-ppfl-intro:     424px;
  --porque-ppfl-gap:       53px;
  --porque-ppfl-card:      496px;
  --porque-ppfl-trilho:    880px;
  --porque-ppfl-calha:     56px;
  --porque-ppfl-selo:      48px;
  --porque-ppfl-icone:     20px;
  --porque-ppfl-item-gap:  22px;

  /* Trilho — a linha é âmbar clara, não índigo */
  --porque-ppfl-linha:     #ffe6cc;
  --porque-ppfl-box-bg:    rgba(203, 203, 203, .31);
  --porque-ppfl-box-borda: rgba(255, 255, 255, .1);
  --porque-ppfl-box-raio:  14px;
  --porque-ppfl-box-pad-x: 25px;
  /* --- 4/13 · PARA QUEM SE DESTINA — sec-perfil  (1-quem-se-destina.css) --- */

  /* Cores */
  --color-teal:           #169194;  /* card 4 (multiplicação) */

  /* Fundo da seção: degradê vertical lilás → cinza-claro */
  --destina-ppfl-bg-top:         #f9e4ff;
  --destina-ppfl-bg-bottom:      #f5f6fa;

  /* "Furo" do crachá no topo do card */
  --color-slot-bg:        #f7ecfd;
  --color-slot-border:    #bfbfbf;

  /* Tipografia */

  /* Para quem se destina — medidas retiradas do frame do Figma
     seção: pt 90 / pb 129 (o frame tem altura fixa de 692px e o
     conteúdo termina em 563 — a sobra é respiro do design)
     container 1160 · bloco de texto 700 · fileira de cards 1096
     (container menos 32 de cada lado), gap 24 → card de 256
     cards: altura 265-266 no Figma, conteúdo alinhado ao topo */
  --destina-ppfl-container:  1160px;
  --destina-ppfl-lead-width: 700px;
  --destina-ppfl-gutter:     32px;
  --destina-ppfl-card-gap:   24px;
  --destina-ppfl-card-min-h: 266px;
  --destina-ppfl-strip-h:    8px;   /* faixa colorida do topo */
  --destina-ppfl-radius:     18px;
  /* --- 5/13 · O QUE VOCÊ VAI APRENDER — sec-programa  (4-programa.css) --- */

  /* Cores */
  --color-text-body:      #000000;
  --color-rail:           #eaeaea;
  --programa-ppfl-surface-soft:   #f6f5f6;

  /* Tipografia */

  /* Programa — medidas do Figma
       conteúdo ..... 820px (com 32px de respiro de cada lado)
       trilho ....... coluna de 52px à esquerda dos cards
       selo ......... 36px, centrado na linha do cabeçalho do card
       linha ........ 2px em x=17, do topo do primeiro selo ao fim do último */
  --programa-ppfl-container:  820px;
  --programa-ppfl-gutter:     32px;
  --programa-ppfl-rail:       52px;
  --programa-ppfl-rail-x:     17px;
  --programa-ppfl-selo:       36px;
  --programa-ppfl-gap:        14px;   /* vão entre os módulos */
  --programa-ppfl-radius:     14px;
  --programa-ppfl-radius-lg:  16px;
  --programa-ppfl-pad:        22px;   /* respiro lateral do card de módulo */
  --programa-ppfl-pad-lg:     26px;   /* respiro dos cards de destaque */

  /* Movimento — a altura leva o tempo cheio, cor e opacidade chegam antes */
  --programa-ppfl-dur:        0.3s;
  --programa-ppfl-dur-curta:  0.22s;
  --programa-ppfl-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  /* --- 6/13 · MATERIAL DIDÁTICO — sec-material  (6-material.css) --- */

  /* Cores */
  --color-navy-rule:    #394195;  /* régua sob o texto de apoio */
  --color-lilac:        #cb6ce6;  /* filete da observação de envio */
  --color-black:        #000000;

  /* Fundo da seção — degradê vertical do frame */
  --material-ppfl-bg-top:    #f6f5f6;
  --material-ppfl-bg-bottom: #f9e4ff;

  /* Tipografia */

  /* Material didático — medidas retiradas do frame do Figma
     seção: padding 90/86, container 1080
     livros: 4 cards de 185 x 247, gap 22 (faixa de 806 centrada)
     plataforma: card de 981 x 339, aside de 365 */
  --material-ppfl-container:  1080px;
  --material-ppfl-gutter:     24px;
  --material-ppfl-books:      806px;
  --material-ppfl-book-gap:   22px;
  --material-ppfl-note:       722px;
  --material-ppfl-platform:   981px;
  --material-ppfl-aside:      365px;

  /* O card do livro é um degradê radial quase circular: só a parte
     central da elipse cabe no card, por isso ele lê como um teal
     chapado que escurece de leve nos cantos. */
  --material-ppfl-book-bg: radial-gradient(175% 140% at 50% 50%,
    #169194   0%,
    #169194  38%,
    #205b7d  69%,
    #254072 84.5%,
    #2a2566 100%);
  /* --- 7/13 · CERTIFICAÇÕES — sec-upsell  (10-certificacoes.css) --- */

  /* Cores */
  --color-navy-darker:    #1d1846;  /* hover do CTA */
  --color-blood:          #830305;  /* acento da aba Supply Chain */
  --cert-ppfl-surface-soft:   #f5f6fa;

  /* Tipografia */

  /* Certificações — medidas retiradas do frame do Figma
     seção: padding 90px, container 1100 (conteúdo 1036), gap 24
     card: 1036 x 308, raio 26, painel de imagem 440 fixo
     corpo do card: padding 51 / 44 / 22, gap 20 */
  --cert-ppfl-container:    1100px;
  --cert-ppfl-gutter:       32px;
  --cert-ppfl-stack-gap:    24px;
  --cert-ppfl-card-height:  308px;
  --cert-ppfl-media-width:  440px;
  --cert-ppfl-fade:         520ms;
  --cert-ppfl-ease:         cubic-bezier(.4, 0, .2, 1);
  /* --- 8/13 · ESPECIALISTAS — sec-especialistas  (5-especialistas.css) --- */

  /* Cores */
  --color-bg-fog:      #f6f5f6;  /* fundo da seção */
  --color-vaga-base:   #c9c9c9;  /* base do ladrilho vazio */

  /* Tipografia */

  /* Especialistas — medidas retiradas do frame do Figma
     seção: pt 90 / pb 100 (25 declarados + 42 de sobra dentro do
     bloco de altura fixa do mosaico + 33 do frame de 903px)
     container 1160 · bloco de texto 700 (linha de apoio em 565)
     mosaico 1096 (container menos 32 de cada lado): 4 colunas de
     271 com gap 4, cada ladrilho quadrado */
  --experts-ppfl-container:  1160px;
  --experts-ppfl-gutter:     32px;
  --experts-ppfl-lead-width: 565px;
  --experts-ppfl-gap:        4px;
  --experts-ppfl-inset:      16px;  /* recuo da legenda dentro do ladrilho */
  --experts-ppfl-radius:     16px;  /* as 4 quinas externas do mosaico (via contêiner) */

  /* Duração do P&B ↔ cor. São duas porque servem a coisas diferentes: no
     hover o cursor já diz qual é o retrato e a resposta tem que ser rápida;
     no rodízio automático o cruzamento entre um e outro É o efeito, e a
     0.35s ele passa antes de dar para ver. */
  --experts-ppfl-fade:       0.35s;  /* hover de verdade */
  --experts-ppfl-fade-auto:  0.7s;   /* rodízio automático */
  /* --- 9/13 · DEPOIMENTOS — sec-depoimentos  (8-depoimentos.css) --- */

  /* Cores da seção */
  --color-periwinkle:     #a1a8f4;  /* dots inativos */
  --depoimentos-ppfl-bg-top:         #f6f5f6;  /* topo do gradiente da seção */
  --depoimentos-ppfl-bg-bottom:      #f9e4ff;  /* base do gradiente da seção */

  /* Tipografia */

  /* 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;
  /* --- 10/13 · TUDO O QUE ESTÁ INCLUÍDO — sec-incluido  (ppfl-industria/sections/7-incluido.css) --- */

  /* Cores: a seção reusa --color-navy-deep / --color-violet / --color-teal,
     já declarados acima. O acento dela é o da trilha (--color-magenta →
     --color-indigo), NÃO o laranja do frame de Indústria de onde a seção veio.
     Os DOIS CINZAS não reusam nome: #6b658f e #eae7f5 são diferentes do
     --color-text-muted (#5b5880) e do --color-border-soft (#e3e5ee) das irmãs,
     e nome igual com valor diferente repintaria quem viesse depois. */
  --incluido-ppfl-muted:  #6b658f;
  --incluido-ppfl-border: #eae7f5;

  /* Teal de TEXTO dos exclusivos (selo e apoio das abas): o --color-teal
     (#169194) dá 3.8:1 sobre branco e reprova o AA em corpo pequeno; este
     escurecido (da versão 2a do mockup) dá 5.1:1. O fundo do selo é o
     mint do mesmo mockup. */
  --incluido-ppfl-teal-text: #0b7b70;
  --incluido-ppfl-badge-bg:  #dcf4f0;

  /* Único peso novo do arquivo: o gatilho "ver os N livros" e o
     "Sem preço avulso" são 600, que nenhuma seção anterior usava */
  --font-weight-semibold:  600;

  /* Fundo do frame: os dois linear-gradient 90deg do dump são a mesma cor de
     ponta a ponta, ou seja, chapado. Chapado, porém, ele fica a ~1 ΔE do
     --color-surface-page (#f5f6fa) do Investimento logo abaixo, e as duas
     seções liam como um bloco só. Virou degradê VERTICAL: mantém o tom do
     frame no topo e desce até um lilás mais marcado na base, colocando o
     maior contraste exatamente na divisa entre as duas seções — mesma
     receita de `sec-material` e `sec-depoimentos`. */
  /* O fim do degradê é o piso de contraste da seção: a nota de 11px
     (--incluido-ppfl-muted, #6b658f) cai a ~88% da altura, onde este par dá
     4.55:1 — dentro do AA, com pouca folga. Escurecer o `bg-fim` além daqui
     derruba a nota abaixo de 4.5; medir antes de mexer (`verificacao.md` §0
     tem o cálculo no ponto real, não no fim do degradê). */
  --incluido-ppfl-bg:     #f7f6fb;
  --incluido-ppfl-bg-fim: #ebe8f6;

  /* Linha do divisor de fechamento e do topo do Investimento: um passo acima
     do --incluido-ppfl-border (#eae7f5), que sumiria contra o fim do degradê */
  --incluido-ppfl-divisa: #ddd8ee;

  /* Medidas
       container .... 1080px, a mesma régua de material/investimento — o card
                      da versão 2a traz 1160, mas o miolo útil dele (1040)
                      bate com o conteúdo desta régua (1080 − 2×24 ≈ 1032)
       cabeçalho .... 660px de coluna de texto à esquerda; o placar "Mais de
                      R$ 6 mil incluídos" ocupa a direita do topo
       abas ......... coluna de gatilhos de 352px + painel fluido, vão de
                      26px (medidas do mockup, no bloco da seção) */
  --incluido-ppfl-container:  1080px;
  --incluido-ppfl-gutter:     24px;
  --incluido-ppfl-header:     660px;
  --incluido-ppfl-ritmo:      15.3px;
  --incluido-ppfl-radius:     16px;
  --incluido-ppfl-radius-lg:  18px;
  --incluido-ppfl-divisor:    520px;   /* fecho da seção, mais estreito que o cabeçalho */
  /* --- 11/13 · INVESTIMENTO E INSCRIÇÃO — sec-investimento  (9-investimento.css) --- */

  /* Cores */
  --color-surface-page:   #f5f6fa;
  --color-disabled:       #c3c3c3;

  /* Tipografia */

  /* Investimento — medidas do Figma
       conteúdo ..... 1080px (Section em x=420 de um frame de 1920)
       gutter ....... 32px (recuo dos lotes e do CTA dentro do conteúdo)
       lotes ........ 3 colunas de 324px com 22px de vão
       quadros ...... faixa de 936px, 2 colunas de 458px com 20px de vão
       prazo ........ caixa de 608px; pílula de pagamento de 763px */
  --investimento-ppfl-container:  1080px;
  --investimento-ppfl-gutter:     32px;
  --investimento-ppfl-texto:      680px;
  --investimento-ppfl-prazo:      608px;
  --investimento-ppfl-pilula:     763px;
  --investimento-ppfl-quadros:    936px;
  --investimento-ppfl-lote-gap:   22px;
  --investimento-ppfl-lote-pad:   28px;
  --investimento-ppfl-radius:     18px;
  --investimento-ppfl-radius-lg:  16px;
  /* --- 12/13 · CONTINUE EXPLORANDO — sec-continue  (11-continue.css) --- */

  /* Cores */
  --color-amber:       #ffa626;
  --continue-ppfl-lilac-bg:    #fcefff;

  /* Tipografia */

  /* Continue — medidas retiradas do frame do Figma
     seção: 51px no topo, 118px na base (as duas sobras do frame de 853)
     cabeçalho num contêiner de 1080; a fileira de cards escapa para 1180
     cards de 480px com raio 18
     larguras: 533 aberto / 321 fechado — usadas como razão de flex-grow */
  --continue-ppfl-container:   1080px;
  --continue-ppfl-gutter:      32px;
  --continue-ppfl-cards:       1180px;
  --continue-ppfl-card-gap:    2px;
  --continue-ppfl-card-height: 480px;
  --continue-ppfl-radius:      18px;
  --continue-ppfl-pad:         34px;
  --continue-ppfl-grow-open:   533;
  --continue-ppfl-grow-closed: 321;

  /* Mesmo easing/duração da sanfona irmã da PPFL Geral */
  --continue-ppfl-dur:  450ms;
  --continue-ppfl-ease: cubic-bezier(.4, 0, .2, 1);
  /* --- 13/13 · ASIDE DE INSCRIÇÃO — Aside 2521:1831  (12-aside.css) --- */

  /* Cores */

  /* Tipografia */
  --font-weight-light:     300;

  /* Aside — medidas dos dois estados
     fechado ... 291 × 46, raio 14, só o cabeçalho em gradiente
     aberto .... 291 × 418, raio 18, borda #e3e5ee, cabeçalho de 44
     o cabeçalho tem a mesma altura nos dois: 44 + as duas bordas = 46 */
  --aside-ppfl-width:        291px;
  --aside-ppfl-head-height:   44px;
  --aside-ppfl-inset:         24px;   /* respiro até a borda da janela */
  --aside-ppfl-radius:        14px;   /* fechado */
  --aside-ppfl-radius-open:   18px;   /* aberto */
  --aside-ppfl-z:               30;   /* acima do menu de âncoras (20) */
}


/* ============================================================ */
/* GLOBAL                                                    */
/* ============================================================ */
.ppfl-servicos-page {
  font-family: var(--font-primary);
  margin: 0;
  padding: 0;
  background-color: var(--color-page-bg);
}


/* ============================================================ */
/* 1/13 — HERO — sec-topo*/
/* origem: sections/1-hero.css                              */
/* ============================================================ */
/* ============================================================ */
/* SECTION: HERO PPFL SERVIÇOS                                 */
/* ============================================================ */
.hero-servicos {
  position: relative;
  overflow: hidden;
  min-height: var(--hero-servicos-height);
  background-color: var(--color-navy-deep);
}


/* --- Camadas de fundo ---
   Ordem do Figma: cor base → gradiente diagonal → foto a 48% →
   véu violeta de cima para baixo. */
.hero-servicos__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-servicos__bg-gradient {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    5.87deg,
    var(--color-navy-deep)      35.84%,
    rgba(203, 108, 230, 0.54)   64.31%,
    rgba(255, 255, 255, 0.56)  101.42%
  );
}

.hero-servicos__bg-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.48;
}

/* Foto RECORTADA, nunca esticada (mesmo tratamento do hero da PPFL Geral).
   O asset já é a faixa 2.5:1 que o designer enquadrou, bem perto da proporção
   da seção (2.686:1) — `cover` amplia só 1.28× e descarta 6.9% da altura,
   metade em cima e metade embaixo. */
.hero-servicos__bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero-servicos__bg-veil {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0)     3%,
    rgba(203, 108, 230, 0.74) 100%
  );
}


/* ============================================================ */
/* HERO: GRADE                                                 */
/* ============================================================ */
.hero-servicos__container {
  position: relative;
  z-index: 2;
  max-width: 1184px;                      /* 1120px de conteúdo + 2 × 32px */
  margin: 0 auto;
  padding: var(--hero-servicos-gutter) 32px;
}

.hero-servicos__grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hero-servicos-columns-gap);
}

.hero-servicos__intro {
  flex: 1 1 auto;
  max-width: var(--hero-servicos-intro-width);
}


/* --- Título, subtítulo, régua e CTAs --- */
.hero-servicos__title {
  margin: 13px 0 0;
  font-size: 3.6rem;                      /* 57.6px */
  font-weight: var(--font-weight-black);
  line-height: 63.36px;
  letter-spacing: -0.576px;
  color: var(--color-white);
}

.hero-servicos__subtitle {
  max-width: 631px;
  margin: 12.5px 0 0;
  font-size: 1.081rem;                    /* 17.3px */
  font-weight: var(--font-weight-regular);
  line-height: 27.65px;
  color: var(--color-white);
}

.hero-servicos__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 33.9px 0 0 7px;
  background-color: var(--color-white);
}

.hero-servicos__actions {
  margin-top: 34px;
  gap: 14px;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px 15.33px;
  border-radius: 10px;
  font-size: 0.9rem;                      /* 14.4px */
  font-weight: var(--font-weight-bold);
  line-height: 22.32px;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}

.btn-hero--primary {
  background-color: var(--color-green);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.61);
}

.btn-hero--primary:hover {
  background-color: var(--color-green-dark);
  color: var(--color-white);
}

.btn-hero--outline {
  padding-left: 27px;
  padding-right: 27px;
  border: 1px solid var(--color-white);
}

.btn-hero--outline:hover {
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
}


/* ============================================================ */
/* HERO: CARTÃO DE RESUMO TÉCNICO                              */
/* ============================================================ */
.hero-servicos__resumo {
  flex: 0 0 var(--hero-servicos-aside-width);
  max-width: var(--hero-servicos-aside-width);
  padding: 16px 26px 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: 18px;
  background-color: var(--color-white);
  box-shadow: 0 24px 48px -32px rgba(41, 35, 92, 0.25);
}

.hero-servicos__resumo-title {
  margin: 0 0 18px;
  font-size: 0.7rem;                      /* 11.2px */
  font-weight: var(--font-weight-bold);
  line-height: 17.36px;
  text-transform: uppercase;
  color: var(--color-navy-soft);
}

.hero-servicos__specs {
  margin: 0;
  padding: 0;
}

.hero-servicos__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 13px;
  border-bottom: 1px dashed var(--color-border-soft);
}

.hero-servicos__spec dt {
  font-size: 0.881rem;                    /* 14.1px */
  font-weight: var(--font-weight-regular);
  line-height: 21.82px;
  color: var(--color-navy-soft);
}

.hero-servicos__spec dd {
  margin: 0;
  font-size: 0.881rem;                    /* 14.1px */
  font-weight: var(--font-weight-bold);
  line-height: 21.82px;
  text-align: right;
  color: var(--color-navy-deep);
}

.hero-servicos__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 13px 26px 14.33px;
  border-radius: 10px;
  background-color: var(--color-green);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.65);
  font-size: 0.9rem;                      /* 14.4px */
  font-weight: var(--font-weight-bold);
  line-height: 22.32px;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s;
}

.hero-servicos__cta:hover {
  background-color: var(--color-green-dark);
  color: var(--color-white);
}

.hero-servicos__share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12.68px;
  padding: 13px;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  background-color: var(--color-white);
  font-family: inherit;
  font-size: 0.863rem;                    /* 13.8px */
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-deep);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.hero-servicos__share:hover {
  border-color: var(--color-navy-soft);
  background-color: var(--color-page-bg);
}

.hero-servicos__share img {
  width: 24px;
  height: 23px;
}


/* ============================================================ */
/* SUBMENU — COMPARTILHAR (hero-servicos__share / aside-ppfl__share) */
/* Mesmo padrão do "Compartilhar frase" de /artigo-detalhes,      */
/* reskinado nos tokens desta página. Injetado via JS em          */
/* .ppfl-share-portal (ver comentário na view) com position:fixed */
/* — por isso não depende de um ancestral position:relative.      */
/* ============================================================ */
.ppfl-share-menu {
  position: fixed;
  z-index: 200;
  display: flex;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  background-color: var(--color-white);
  box-shadow: 0 16px 40px -12px rgba(41, 35, 92, 0.35);
}

.ppfl-share-menu[hidden] {
  display: none;
}

.ppfl-share-menu__item {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.ppfl-share-menu__item:hover,
.ppfl-share-menu__item:focus-visible {
  background-color: var(--color-page-bg);
  transform: translateY(-2px);
}

.ppfl-share-menu__item:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 2px;
}

.ppfl-share-menu__item svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 575.98px) {
  .ppfl-share-menu {
    gap: 6px;
    padding: 8px;
  }

  .ppfl-share-menu__item {
    width: 32px;
    height: 32px;
  }

  .ppfl-share-menu__item svg {
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ppfl-share-menu__item {
    transition: none;
  }

  .ppfl-share-menu__item:hover,
  .ppfl-share-menu__item:focus-visible {
    transform: none;
  }
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 1399.98px) {
  .ppfl-servicos-page {
    --hero-servicos-gutter:      128px;
    --hero-servicos-columns-gap: 40px;
  }
}

@media (max-width: 1247.98px) {
  .hero-servicos__title {
    font-size: 3.1rem;                    /* 49.6px */
    line-height: 1.1;
  }
}

@media (max-width: 991.98px) {
  .ppfl-servicos-page {
    --hero-servicos-gutter: 80px;
  }

  .hero-servicos {
    min-height: 0;
  }

  .hero-servicos__container {
    padding: var(--hero-servicos-gutter) 24px;
  }

  .hero-servicos__grid {
    flex-direction: column;
    gap: 40px;
  }

  .hero-servicos__intro {
    max-width: 100%;
  }

  .hero-servicos__resumo {
    flex: 1 1 auto;
    width: 100%;
    max-width: 420px;
  }

  .hero-servicos__title {
    margin-top: 0;
    font-size: 2.6rem;
  }
}

@media (max-width: 767.98px) {
  .ppfl-servicos-page {
    --hero-servicos-gutter: 64px;
  }

  .hero-servicos__title {
    font-size: 2.1rem;
  }

  .hero-servicos__subtitle {
    font-size: 1rem;
    line-height: 1.6;
  }

  .hero-servicos__rule {
    margin-top: 28px;
    margin-left: 0;
  }

  .hero-servicos__actions .btn-hero {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .hero-servicos__container {
    padding: 56px 16px;
  }

  .hero-servicos__title {
    font-size: 1.75rem;
  }

  .hero-servicos__resumo {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* ============================================================ */
/* 2/13 — MENU DE ÂNCORAS — menu-serviços*/
/* origem: sections/2-menu.css                              */
/* ============================================================ */
/* ============================================================ */
/* SECTION: MENU DE ÂNCORAS                                    */
/* ============================================================ */
/* A faixa acompanha a página. O `z-index` fica acima de tudo que as
   seções desta página usam internamente (o maior é 3, nas abas de
   `sec-upsell`): 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(--menu-ppfl-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 — 843px 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 23px;
  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-magenta);
}

.menu-ppfl__link.is-active {
  font-weight: var(--font-weight-bold);
  color: var(--color-magenta);
}

/* Indicador do item ativo — 103 x 3 em x 540 no Figma, ou seja: começa
   4px antes do texto (544) 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-magenta);
}


/* ============================================================ */
/* 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: 991.98px) {
  .ppfl-servicos-page {
    --menu-ppfl-sep-gap: 7px;
  }
}

@media (max-width: 767.98px) {
  .menu-ppfl__inner {
    padding-inline: 16px;
  }

  .menu-ppfl__link,
  .menu-ppfl__item:not(:last-child)::after {
    font-size: 0.9375rem;                /* 15px */
  }
}


/* ============================================================ */
/* 3/13 — POR QUE FAZER — o-que-ppfl-servicos*/
/* origem: sections/2-por-que-fazer.css                     */
/* ============================================================ */
/* ============================================================ */
/* SECTION: POR QUE FAZER                                      */
/* ============================================================ */
.porque-ppfl {
  position: relative;
  padding: 76px 24px 100px;
  background-color: var(--color-surface);
  font-family: var(--font-primary);
  overflow: hidden;                      /* confina a arte de ondas */
}

/* object-fit: cover reproduz exatamente o enquadramento do Figma (a arte
   é 1672x1110 dentro de um frame 1920x1562) em qualquer proporção. */
.porque-ppfl__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.porque-ppfl__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.porque-ppfl__container {
  position: relative;                    /* acima da arte de fundo */
  z-index: 1;
}


/* ============================================================ */
/* TOPO: INTRO + CARD DE VÍDEO                                 */
/* ============================================================ */
.porque-ppfl__topo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--porque-ppfl-gap);
  max-width: var(--porque-ppfl-topo);
  margin: 0 auto;
}

/* O card de vídeo começa 19px acima do título — daí o recuo só da coluna
   de texto (o padding do topo da seção é o do card). */
.porque-ppfl__intro {
  flex: 0 1 var(--porque-ppfl-intro);
  min-width: 0;
  max-width: var(--porque-ppfl-intro);
  padding-top: 19px;
  text-align: center;
}

.porque-ppfl__title {
  margin: 0;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 48px;
  color: var(--color-navy-deep);
}

.porque-ppfl__lead {
  max-width: 372px;
  margin: 41px auto 0;
  font-size: 1.019rem;                   /* 16.3px */
  font-weight: var(--font-weight-regular);
  line-height: 25.3px;
  color: rgba(0, 0, 0, .6);
}

.porque-ppfl__lead strong {
  font-weight: var(--font-weight-bold);
}

/* Régua índigo (nas outras seções da família ela é laranja) */
.porque-ppfl__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 60px auto 0;
  background-color: var(--color-indigo);
}


/* --- Card de vídeo ------------------------------------------ */
.porque-ppfl__video {
  flex: 0 1 var(--porque-ppfl-card);
  min-width: 0;
  max-width: var(--porque-ppfl-card);
}

.porque-ppfl__video-card {
  box-sizing: border-box;
  padding: 14px 0 27px;
  border: 1px solid var(--color-border-soft);
  border-radius: 16px;
  background-color: var(--color-white);
  box-shadow: 0 24px 50px -30px rgba(203, 108, 230, .7);
  overflow: hidden;                      /* o poster encosta nas bordas */
  text-align: center;
}

.porque-ppfl__video-title {
  margin: 0;
  font-size: 1.8125rem;                  /* 29px */
  font-weight: var(--font-weight-black);
  line-height: 47.12px;
  color: var(--color-navy-deep);
}

.porque-ppfl__video-lead {
  max-width: 314px;
  margin: 1px auto 0;
  font-size: 1rem;                       /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: 24.8px;
  color: var(--color-text-muted);
}


/* --- Poster do player --------------------------------------- */
.porque-ppfl__player {
  position: relative;
  width: 100%;
  margin-top: 13px;
  aspect-ratio: 494 / 277.875;           /* 16:9 */
  background-image: linear-gradient(150deg, var(--color-navy-deep) 0%, var(--color-indigo) 100%);
  overflow: hidden;
}

/* Capa do vídeo. O degradê do .porque-ppfl__player continua como fundo:
   é ele que aparece enquanto a imagem carrega e se ela falhar. */
.porque-ppfl__player-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Véu sobre a capa: a chrome do mockup (play, barra, cursor, tempos) é toda
   branca em 14-70% de opacidade, desenhada para o degradê navy. Sobre o frame
   claro do vídeo ela sumiria — o véu devolve o contraste sem esconder a capa. */
.porque-ppfl__player-veu {
  position: absolute;
  inset: 0;
  background-image:
    /* faixa de baixo: a barra e os tempos caem em cima do logo do LIB
       que a própria capa tem no canto — sem este reforço o "3:00" some */
    linear-gradient(to top, rgba(41, 35, 92, .6) 0%, rgba(41, 35, 92, 0) 24%),
    linear-gradient(150deg, rgba(41, 35, 92, .62) 0%, rgba(57, 65, 149, .5) 100%);
}

/* As ondas sobem 2,6px em relação ao poster (inset do Figma) */
.porque-ppfl__player-ondas {
  position: absolute;
  top: -.94%;
  left: 0;
  width: 100%;
  height: 100%;
}

.porque-ppfl__player-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .14);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.porque-ppfl__player-btn:hover,
.porque-ppfl__player-btn:focus-visible {
  background-color: rgba(255, 255, 255, .26);
  transform: translate(-50%, -50%) scale(1.06);
}

.porque-ppfl__player-btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* +2px para compensar o centro óptico do triângulo */
.porque-ppfl__player-btn img {
  display: block;
  width: var(--porque-ppfl-icone);
  height: var(--porque-ppfl-icone);
  margin-left: 2px;
}

.porque-ppfl__player-barra {
  position: absolute;
  right: 0;
  bottom: 6.48px;
  left: 0;
  height: 4px;
  background-color: rgba(255, 255, 255, .25);
}

/* Cabeça de leitura no início da barra */
.porque-ppfl__player-cursor {
  position: absolute;
  bottom: 2.88px;
  left: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--color-magenta);
  box-shadow: 0 0 0 3px rgba(255, 128, 0, .25);
}

.porque-ppfl__player-tempos {
  position: absolute;
  right: 14px;
  bottom: 11.85px;
  left: 14px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .681rem;                    /* 10.9px */
  line-height: 16.86px;
  color: rgba(255, 255, 255, .7);
}


/* --- Legenda do card ---------------------------------------- */
.porque-ppfl__video-footer {
  margin-top: 19px;
  padding-inline: 27px;                  /* faixa de 440 dentro dos 494 */
}

.porque-ppfl__video-legenda {
  margin: 0;
  font-size: .9rem;                      /* 14.4px */
  font-weight: var(--font-weight-bold);
  line-height: 22.32px;
  color: var(--color-navy-deep);
}

.porque-ppfl__video-meta {
  margin: 2px 0 0;
  font-size: .7625rem;                   /* 12.2px */
  font-weight: var(--font-weight-regular);
  line-height: 18.85px;
  color: var(--color-text-muted);
}


/* ============================================================ */
/* TRILHO: AS 6 RAZÕES                                         */
/* ============================================================ */
.porque-ppfl__trilho {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--porque-ppfl-item-gap);
  max-width: var(--porque-ppfl-trilho);
  margin: 96px auto 0;
  padding: 0 0 0 var(--porque-ppfl-calha);
  list-style: none;
}

/* A linha nasce 8px abaixo do topo do 1º card e morre dentro do último
   selo (77px acima da base da lista) — igual ao Figma. */
.porque-ppfl__trilho::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 77px;
  left: 23px;
  width: 2px;
  background-color: var(--porque-ppfl-linha);
}

.porque-ppfl__item {
  position: relative;
}

.porque-ppfl__selo {
  position: absolute;
  top: 4px;
  left: calc(var(--porque-ppfl-calha) * -1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--porque-ppfl-selo);
  height: var(--porque-ppfl-selo);
  border: 2px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
  background-image: linear-gradient(180deg, var(--color-magenta) 0%, var(--color-indigo) 100%);
  /* sem isto o gradiente é posicionado no padding box e as duas faixas de
     2px da borda recebem o ladrilho seguinte — lasca índigo no topo e
     magenta na base, que lê como se o círculo estivesse cortado */
  background-origin: border-box;
  box-shadow: 0 0 0 6px rgba(83, 74, 183, .12);
}

.porque-ppfl__selo img {
  display: block;
  width: var(--porque-ppfl-icone);
  height: var(--porque-ppfl-icone);
}

.porque-ppfl__box {
  box-sizing: border-box;
  padding: 20px var(--porque-ppfl-box-pad-x) 21px;
  border: 1px solid var(--porque-ppfl-box-borda);
  border-radius: var(--porque-ppfl-box-raio);
  background-color: var(--porque-ppfl-box-bg);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.porque-ppfl__item-title {
  margin: 0;
  font-size: .981rem;                    /* 15.7px */
  font-weight: var(--font-weight-extrabold);
  line-height: 24.3px;
  color: var(--color-indigo);
}

.porque-ppfl__item-title em {
  font-style: italic;
  font-weight: var(--font-weight-extrabold);
}

.porque-ppfl__item-desc {
  margin: 7px 0 0;
  font-size: .85rem;                     /* 13.6px */
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: #000000;
}

.porque-ppfl__item-desc strong {
  font-weight: var(--font-weight-bold);
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */

/* O topo (973 + 2x24 de respiro) deixa de caber por volta de 1021px:
   a coluna de texto encolhe primeiro, o card de vídeo segura os 496. */
@media (max-width: 1247.98px) {
  .porque-ppfl__topo {
    --porque-ppfl-gap: 40px;
  }

  .porque-ppfl__intro {
    flex-basis: auto;
  }
}

/* Empilha: texto em cima, card de vídeo embaixo, ambos centralizados */
@media (max-width: 991.98px) {
  .porque-ppfl {
    padding-top: 64px;
  }

  .porque-ppfl__topo {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .porque-ppfl__intro {
    max-width: 520px;
    padding-top: 0;
  }

  .porque-ppfl__video {
    width: 100%;
  }

  .porque-ppfl__trilho {
    margin-top: 64px;
  }
}

@media (max-width: 767.98px) {
  .porque-ppfl {
    --porque-ppfl-calha: 48px;
    --porque-ppfl-selo: 42px;
    --porque-ppfl-box-pad-x: 20px;

    padding: 56px 16px 64px;
  }

  .porque-ppfl__title {
    font-size: 1.75rem;                  /* 28px */
    line-height: 36px;
  }

  .porque-ppfl__lead {
    margin-top: 28px;
    font-size: .9375rem;                 /* 15px */
    line-height: 23px;
  }

  .porque-ppfl__rule {
    margin-top: 40px;
  }

  .porque-ppfl__video-title {
    font-size: 1.5rem;                   /* 24px */
    line-height: 38px;
  }

  .porque-ppfl__video-lead {
    font-size: .9375rem;                 /* 15px */
    line-height: 23px;
  }

  .porque-ppfl__trilho::before {
    left: 20px;
  }

  .porque-ppfl__box {
    padding-block: 18px;
  }
}

@media (max-width: 575.98px) {
  .porque-ppfl {
    --porque-ppfl-calha: 44px;
    --porque-ppfl-selo: 38px;
    --porque-ppfl-icone: 17px;
    --porque-ppfl-box-pad-x: 16px;
  }

  .porque-ppfl__title {
    font-size: 1.5rem;                   /* 24px */
    line-height: 31px;
  }

  .porque-ppfl__player-btn {
    width: 50px;
    height: 50px;
  }

  .porque-ppfl__player-tempos {
    font-size: .625rem;                  /* 10px */
  }

  .porque-ppfl__trilho::before {
    left: 18px;
  }

  .porque-ppfl__item-title {
    font-size: .9375rem;                 /* 15px */
    line-height: 22px;
  }

  .porque-ppfl__item-desc {
    font-size: .825rem;                  /* 13.2px */
    line-height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .porque-ppfl__player-btn {
    transition-duration: 1ms;
  }

  .porque-ppfl__player-btn:hover,
  .porque-ppfl__player-btn:focus-visible {
    transform: translate(-50%, -50%);
  }
}


/* ============================================================ */
/* 4/13 — PARA QUEM SE DESTINA — sec-perfil*/
/* origem: sections/1-quem-se-destina.css                   */
/* ============================================================ */
/* ============================================================ */
/* SECTION: PARA QUEM SE DESTINA                               */
/* ============================================================ */
.destina-ppfl {
  padding: 90px 24px 129px;
  background-image: linear-gradient(180deg, var(--destina-ppfl-bg-top) 0%, var(--destina-ppfl-bg-bottom) 100%);
  font-family: var(--font-primary);
}

.destina-ppfl__container {
  box-sizing: border-box;
  max-width: var(--destina-ppfl-container);
  margin: 0 auto;
}


/* --- Cabeçalho: título, texto de apoio e régua --- */
.destina-ppfl__header {
  text-align: center;
}

.destina-ppfl__title {
  margin: 0;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 48px;
  color: var(--color-navy-deep);
}

/* 700px é a largura do bloco de texto no Figma — é ela que define a
   quebra em duas linhas do desktop */
.destina-ppfl__lead {
  max-width: var(--destina-ppfl-lead-width);
  margin: 15px auto 0;                   /* gap 14 + pt 1.39 do Figma */
  font-size: 1.0375rem;                  /* 16.6px */
  font-weight: var(--font-weight-regular);
  line-height: 25.79px;
  color: var(--color-text-muted);
}

.destina-ppfl__lead em {
  font-style: italic;
}

.destina-ppfl__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 48px auto 0;
  background-color: var(--color-indigo);
}


/* ============================================================ */
/* CARDS — crachás de perfil                                   */
/* ============================================================ */
.destina-ppfl__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--destina-ppfl-card-gap);
  margin: 40px 0 0;                      /* 296.9 − 257 do Figma */
  padding-inline: var(--destina-ppfl-gutter);
  list-style: none;
}

/* O conteúdo é alinhado ao topo e a altura mínima (266px no Figma)
   iguala os quatro crachás — no design as sobras de base variam
   conforme o texto tem 3, 4 ou 5 linhas.
   `overflow: hidden` recorta a faixa colorida nos cantos arredondados. */
.destina-ppfl__card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: var(--destina-ppfl-card-min-h);
  padding: 39px 21px 27px;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--destina-ppfl-radius);
  background-color: var(--color-white);
  box-shadow: 0 18px 40px -28px rgba(41, 35, 92, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover "cracha": levanta e inclina, como se fosse pego pelo furo do
   clipe — mesmo efeito do mockup de referencia (ZTEMP/ppfl-industria-v2-
   perfil-opcao1-crachas-acesso.html). A inclinacao alterna de lado a cada
   card (nth-child) para nao ficar repetitiva na fileira. Não está no
   Figma, é acabamento da conversão. */
.destina-ppfl__card:hover {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 0 22px 44px -26px rgba(41, 35, 92, 0.42);
}

.destina-ppfl__card:nth-child(even):hover {
  transform: translateY(-5px) rotate(1deg);
}

/* Faixa colorida do topo: 8px, na cor do perfil */
.destina-ppfl__strip {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--destina-ppfl-strip-h);
  background-color: var(--destina-card-color);
}

/* "Furo" do crachá: 26 x 9, raio 6, a 14px do topo */
.destina-ppfl__slot {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 26px;
  height: 9px;
  transform: translateX(-50%);
  border: 1px solid var(--color-slot-border);
  border-radius: 6px;
  background-color: var(--color-slot-bg);
}

.destina-ppfl__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background-color: var(--destina-card-color);
}

/* Cada ícone tem o tamanho exportado do Figma (26 / 32 / 26 / 28x26),
   fixado em width+height para o SVG não crescer até o tamanho natural */
.destina-ppfl__icon img {
  display: block;
  width: var(--destina-icon-w, 26px);
  height: var(--destina-icon-h, 26px);
}

.destina-ppfl__label {
  margin: 0;
  padding-top: 9px;
  font-size: 0.6375rem;                  /* 10.2px */
  font-weight: var(--font-weight-regular);
  line-height: 15.87px;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* A largura vem do bloco de texto do Figma (186 / 180 / 182 / cheio) —
   é ela que produz as quebras de linha do design */
.destina-ppfl__card-title {
  max-width: var(--destina-title-width, 100%);
  margin: 0;
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-extrabold);
  line-height: 20.3px;
  text-align: center;
  color: var(--color-navy-deep);
}

/* Trechos entre parênteses vêm em Regular no Figma */
.destina-ppfl__card-note {
  font-weight: var(--font-weight-regular);
}


/* ============================================================ */
/* VARIANTES DE CARD                                           */
/* ============================================================ */
.destina-ppfl__card--lideranca {
  --destina-card-color:  var(--color-navy-deep);
  --destina-title-width: 186px;
}

.destina-ppfl__card--back-office {
  --destina-card-color:  var(--color-indigo);
  --destina-title-width: 180px;
  --destina-icon-w:      32px;
  --destina-icon-h:      32px;
}

.destina-ppfl__card--pessoas {
  --destina-card-color:  var(--color-violet);
  --destina-title-width: 182px;
}

.destina-ppfl__card--multiplicacao {
  --destina-card-color:  var(--color-teal);
  --destina-icon-w:      28px;
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 1247.98px) {
  .ppfl-servicos-page {
    --destina-ppfl-gutter:   8px;
    --destina-ppfl-card-gap: 20px;
  }

  .destina-ppfl {
    padding-block: 80px 96px;
  }
}

/* Em duas colunas o card volta a medir pelo conteúdo (a altura mínima
   do Figma só faz sentido com os quatro lado a lado) */
@media (max-width: 991.98px) {
  .ppfl-servicos-page {
    --destina-ppfl-gutter: 0px;
  }

  .destina-ppfl__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .destina-ppfl__card {
    min-height: 0;
    padding-bottom: 32px;
  }
}

@media (max-width: 767.98px) {
  .destina-ppfl {
    padding: 56px 16px 72px;
  }

  .destina-ppfl__title {
    font-size: 2rem;
    line-height: 1.2;
  }

  .destina-ppfl__lead {
    margin-top: 14px;
    font-size: 1rem;
  }

  .destina-ppfl__rule {
    margin-top: 32px;
  }

  .destina-ppfl__cards {
    margin-top: 32px;
  }
}

@media (max-width: 575.98px) {
  .destina-ppfl__title {
    font-size: 1.75rem;
  }

  .destina-ppfl__cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 320px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .destina-ppfl__card {
    transition: none;
  }

  .destina-ppfl__card:hover,
  .destina-ppfl__card:nth-child(even):hover {
    transform: none;
  }
}


/* ============================================================ */
/* 5/13 — O QUE VOCÊ VAI APRENDER — sec-programa*/
/* origem: sections/4-programa.css                          */
/* ============================================================ */
/* ============================================================ */
/* SECTION: O QUE VOCÊ VAI APRENDER                            */
/* ============================================================ */
.programa-ppfl {
  position: relative;
  overflow: hidden;
  padding: 90px 24px;
  background-color: var(--programa-ppfl-surface-soft);
  font-family: var(--font-primary);
}

/* Arte de traços em onda — no Figma ela cobre o frame inteiro
   (`object-fit: cover`), então acompanha a altura que a seção tiver. */
.programa-ppfl__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.programa-ppfl__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.programa-ppfl__container {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: var(--programa-ppfl-container);
  margin: 0 auto;
  padding-inline: var(--programa-ppfl-gutter);
}


/* ============================================================ */
/* CABEÇALHO                                                   */
/* ============================================================ */
.programa-ppfl__header {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.programa-ppfl__title {
  margin: 0;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 48px;
  color: var(--color-navy-deep);
}

.programa-ppfl__lead {
  max-width: 612px;
  margin: 15px auto 0;
  font-size: 1.0375rem;                  /* 16.6px */
  font-weight: var(--font-weight-regular);
  line-height: 25.8px;
  color: var(--color-text-muted);
}

.programa-ppfl__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 44px auto 0;
  background-color: var(--color-indigo);
}


/* ============================================================ */
/* TRILHO DOS MÓDULOS                                          */
/* ============================================================ */
/* A linha vertical é um `::before` do trilho: começa na altura do topo do
   primeiro selo e morre no rodapé do último card, como no Figma. */
.programa-ppfl__trilho {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--programa-ppfl-gap);
  margin: 52px 0 0;                      /* 44px do compasso + 8px do Figma */
  padding: 0 0 0 var(--programa-ppfl-rail);
}

.programa-ppfl__trilho::before {
  content: "";
  position: absolute;
  left: var(--programa-ppfl-rail-x);
  top: 14px;
  bottom: 6px;
  width: 2px;
  background-color: var(--color-rail);
}

.programa-ppfl__item {
  position: relative;
}

/* --- Selo (número do módulo / estrela do destaque) --- */
.programa-ppfl__selo {
  position: absolute;
  left: calc(var(--programa-ppfl-rail) * -1);
  top: 9px;                              /* centra o selo na linha do cabeçalho */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--programa-ppfl-selo);
  height: var(--programa-ppfl-selo);
  border: 2px solid var(--color-border-soft);
  border-radius: calc(var(--programa-ppfl-selo) / 2);
  background-color: var(--color-white);
  font-size: 0.8rem;                     /* 12.8px */
  font-weight: var(--font-weight-bold);
  line-height: 19.84px;
  color: var(--color-text-muted);
  transition:
    background-color var(--programa-ppfl-dur-curta) var(--programa-ppfl-ease),
    border-color var(--programa-ppfl-dur-curta) var(--programa-ppfl-ease),
    color var(--programa-ppfl-dur-curta) var(--programa-ppfl-ease);
}

/* O módulo aberto acende o selo — mesmo estado do card, lido do botão do
   Bootstrap Collapse (`:not(.collapsed)` = aberto), sem classe própria. */
.programa-ppfl__item:has(.accordion-button:not(.collapsed)) .programa-ppfl__selo {
  border-color: var(--color-navy-deep);
  background-color: var(--color-navy-deep);
  color: var(--color-white);
}

.programa-ppfl__selo--estrela {
  border-color: var(--color-magenta);
  background-image: linear-gradient(180deg, var(--color-magenta) 0%, var(--color-indigo) 100%);
  font-family: var(--font-mono);
  color: var(--color-white);
}


/* --- Card do módulo --- */
.programa-ppfl__box {
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--programa-ppfl-radius);
  background-color: var(--color-white);
  transition: border-color var(--programa-ppfl-dur-curta) var(--programa-ppfl-ease);
}

/* "Aberto" agora é lido do botão do Bootstrap Collapse (`:not(.collapsed)`),
   não de um atributo `[open]` — ver bloco "ACORDEAO" abaixo para o porquê da
   troca de mecanismo. */
.programa-ppfl__box:has(.accordion-button:not(.collapsed)) {
  border-color: var(--color-navy-deep);
}

.programa-ppfl__cabeca {
  display: flex;
  align-items: center;
  gap: var(--programa-ppfl-gap);
  padding: 16px var(--programa-ppfl-pad);
  cursor: pointer;
}

.programa-ppfl__cabeca:focus-visible {
  outline: 2px solid var(--color-indigo);
  outline-offset: -2px;
  border-radius: var(--programa-ppfl-radius);
}

.programa-ppfl__modulo {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.95rem;                    /* 15.2px */
  font-weight: var(--font-weight-bold);
  line-height: 19.76px;
  color: var(--color-navy-deep);
}

.programa-ppfl__modulo em {
  font-style: italic;
}

.programa-ppfl__chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform var(--programa-ppfl-dur) var(--programa-ppfl-ease);
}

.programa-ppfl__cabeca:not(.collapsed) .programa-ppfl__chevron {
  transform: rotate(180deg);
}

.programa-ppfl__corpo {
  padding: 0 var(--programa-ppfl-pad) 20px;
}

.programa-ppfl__corpo p {
  margin: 0;
  font-size: 0.88rem;                    /* 14.1px */
  font-weight: var(--font-weight-regular);
  line-height: 21.82px;
  color: var(--color-text-body);
}


/* ============================================================ */
/* ACORDEAO — Bootstrap Collapse (mesmo mecanismo da FAQ)        */
/* ------------------------------------------------------------ */
/* `<details>` + `::details-content` + `interpolate-size` só      */
/* animam em Chromium: em Safari/Firefox o acordeão abria seco,   */
/* sem transição nenhuma — a causa raiz do "abre com erro/tranco" */
/* relatado. Trocado pelo MESMO mecanismo que já roda liso em     */
/* qualquer motor na seção de Dúvidas: Bootstrap Collapse anima    */
/* `height` com um valor calculado em JS (não interpolação CSS     */
/* nativa) — funciona idêntico em todo browser, e a `initFaqAccordion`
/* reaproveitada (ver anim.js) já traz a guarda contra sobreposição*/
/* de transições (uma abertura não começa antes da anterior         */
/* terminar), o que elimina cascata/piscada mesmo em hover.        */
/*                                                                 */
/* As classes `.accordion-*` abaixo servem só de gancho funcional  */
/* para o Collapse; as regras aqui neutralizam o visual padrão     */
/* que o Bootstrap injeta nelas — a aparência continua 100% dos    */
/* tokens `.programa-ppfl__*`, como sempre foi. `!important` só    */
/* onde os seletores posicionais do próprio Bootstrap              */
/* (:first-of-type/:not(:first-of-type)/:last-of-type) empatam em  */
/* especificidade com os nossos — mesmo recurso que faq-module.css */
/* já usa pelo mesmo motivo (ver `.faq-module__item`).              */
/* ============================================================ */
.programa-ppfl .accordion-item {
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: var(--programa-ppfl-radius) !important;
}

.programa-ppfl .accordion-header {
  margin-bottom: 0;
}

.programa-ppfl .accordion-button {
  width: 100%;
  font-size: inherit;
  text-align: left;
  color: inherit;
  background-color: transparent;
  border: 0;
  border-radius: inherit;
  transition: none;      /* o botão em si não muda de cor/fundo — quem anima é o corpo */
}

.programa-ppfl .accordion-button:not(.collapsed) {
  color: inherit;
  background-color: transparent;
  box-shadow: none;
}

.programa-ppfl .accordion-button:focus {
  outline: 0;
  box-shadow: none;      /* :focus-visible acima cuida do anel visível */
}

/* Usa o próprio <img class="programa-ppfl__chevron">, que já gira sozinho. */
.programa-ppfl .accordion-button::after {
  display: none;
}

.programa-ppfl .accordion-collapse {
  border: 0;
}


/* ============================================================ */
/* DESTAQUES (visita orientada e painel executivo)             */
/* ============================================================ */
/* Os dois destaques ganham um respiro a mais que os módulos: 14px do vão
   comum + 14px próprios, como no Figma. */
.programa-ppfl__item--destaque {
  margin-top: var(--programa-ppfl-gap);
}

.programa-ppfl__destaque {
  overflow: hidden;
  padding: var(--programa-ppfl-pad-lg);
  border-radius: var(--programa-ppfl-radius-lg);
  color: var(--color-white);
}

.programa-ppfl__destaque--pratica {
  background-image: linear-gradient(224deg, #cb6ce6 0%, #29235c 17.28%);
}

.programa-ppfl__destaque--painel {
  background-image: linear-gradient(135deg, #29235c 80%, #cb6ce6 99.3%);
}

.programa-ppfl__tag {
  display: inline-block;
  margin: 0;
  padding: 4.5px 12px 5px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.15);
  font-size: 0.6625rem;                  /* 10.6px */
  font-weight: var(--font-weight-regular);
  line-height: 16.37px;
  letter-spacing: 1.06px;
  text-transform: uppercase;
}

.programa-ppfl__destaque-title {
  margin: 12px 0 0;
  font-size: 1.05rem;                    /* 16.8px */
  font-weight: var(--font-weight-bold);
  line-height: 26px;
}

.programa-ppfl__destaque-title em {
  font-style: italic;
}

.programa-ppfl__destaque-texto {
  margin: 7px 0 0;
  font-size: 0.8625rem;                  /* 13.8px */
  font-weight: var(--font-weight-regular);
  line-height: 21.33px;
  color: rgba(255, 255, 255, 0.85);
}

.programa-ppfl__destaque-texto strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

/* Slot do logo da empresa anfitriã. Nasceu como rótulo de texto ("Logo
   parceiro") no mockup; hoje abriga uma imagem — por isso o centro nos dois
   eixos. As regras de texto ficam para o caso de o slot voltar a ser rótulo. */
.programa-ppfl__parceiro {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 95px;
  height: 42px;
  margin: 16px 0 0;
  padding: 0 10px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.15);
  font-size: 0.619rem;                   /* 9.9px */
  font-weight: var(--font-weight-bold);
  line-height: 15.38px;
  text-transform: uppercase;
}

/* `max-*` em vez de tamanho fixo: o logo da anfitriã pode ter outra proporção */
.programa-ppfl__parceiro img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 30px;
}


/* --- Convidados do painel --- */
.programa-ppfl__convidados {
  display: flex;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
}

.programa-ppfl__convidado {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.08);
  transition: transform 0.25s ease, background-color 0.25s ease,
    border-color 0.25s ease, box-shadow 0.25s ease;
}

.programa-ppfl__convidado:hover {
  transform: translateY(-3px);
  border-color: rgba(203, 108, 230, 0.5);
  background-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px -8px rgba(203, 108, 230, 0.4);
}

.programa-ppfl__foto {
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background-color: rgba(255, 255, 255, 0.15);
  transition: transform 0.25s ease;
}

.programa-ppfl__convidado:hover .programa-ppfl__foto {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .programa-ppfl__convidado,
  .programa-ppfl__foto {
    transition: none;
  }

  .programa-ppfl__convidado:hover {
    transform: none;
  }

  .programa-ppfl__convidado:hover .programa-ppfl__foto {
    transform: none;
  }
}

.programa-ppfl__convidado-info {
  min-width: 0;
}

.programa-ppfl__convidado-data,
.programa-ppfl__convidado-nome,
.programa-ppfl__convidado-cargo {
  margin: 0;
  font-size: 0.7375rem;                  /* 11.8px */
  font-weight: var(--font-weight-regular);
  line-height: 18.35px;
}

.programa-ppfl__convidado-data {
  color: var(--color-magenta);
}

.programa-ppfl__convidado-nome {
  margin-top: 2px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.programa-ppfl__convidado-cargo {
  color: rgba(255, 255, 255, 0.65);
}


/* ============================================================ */
/* RODAPÉ — CTA da ementa                                      */
/* ============================================================ */
/* O `padding-left` repete o recuo do trilho: no Figma o botão é centrado na
   faixa dos cards, não na seção inteira. */
.programa-ppfl__rodape {
  margin-top: 44px;
  padding-left: var(--programa-ppfl-rail);
  text-align: center;
}

.programa-ppfl__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 29px 15px;
  border: 1px solid var(--color-navy-deep);
  border-radius: 12px;
  font-size: 0.9rem;                     /* 14.4px */
  font-weight: var(--font-weight-bold);
  line-height: 22.32px;
  color: var(--color-navy-deep);
  text-decoration: none;
  transition:
    background-color var(--programa-ppfl-dur-curta) var(--programa-ppfl-ease),
    color var(--programa-ppfl-dur-curta) var(--programa-ppfl-ease);
}

.programa-ppfl__cta:hover,
.programa-ppfl__cta:focus-visible {
  background-color: var(--color-navy-deep);
  color: var(--color-white);
}

.programa-ppfl__cta:focus-visible {
  outline: 2px solid var(--color-indigo);
  outline-offset: 2px;
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 991.98px) {
  .programa-ppfl {
    padding: 72px 24px;
  }
}

@media (max-width: 767.98px) {
  .programa-ppfl {
    padding: 56px 16px;
  }

  .programa-ppfl__container {
    padding-inline: 0;
  }

  .programa-ppfl__title {
    font-size: 1.75rem;                  /* 28px */
    line-height: 34px;
  }

  .programa-ppfl__lead {
    font-size: 1rem;
    line-height: 24px;
  }

  .programa-ppfl__rule {
    margin-top: 32px;
  }

  .programa-ppfl__trilho {
    --programa-ppfl-rail: 44px;
    --programa-ppfl-rail-x: 15px;
    --programa-ppfl-selo: 32px;
    margin-top: 40px;
  }

  .programa-ppfl__selo {
    font-size: 0.75rem;                  /* 12px */
  }

  .programa-ppfl__cabeca {
    padding: 14px 18px;
  }

  .programa-ppfl__corpo {
    padding: 0 18px 16px;
  }

  .programa-ppfl__destaque {
    padding: 20px;
  }

  .programa-ppfl__rodape {
    margin-top: 36px;
    padding-left: 44px;
  }
}

@media (max-width: 575.98px) {
  .programa-ppfl__trilho {
    --programa-ppfl-rail: 40px;
    --programa-ppfl-rail-x: 14px;
    --programa-ppfl-selo: 30px;
  }

  /* Lado a lado os dois convidados ficariam com ~110px de texto: empilhar */
  .programa-ppfl__convidados {
    flex-direction: column;
  }

  .programa-ppfl__rodape {
    padding-left: 0;
  }

  .programa-ppfl__cta {
    padding: 14px 20px 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .programa-ppfl {
    --programa-ppfl-dur: 1ms;
    --programa-ppfl-dur-curta: 1ms;
  }

  .programa-ppfl__selo,
  .programa-ppfl__box,
  .programa-ppfl__chevron,
  .programa-ppfl__cta {
    transition-duration: 1ms;
  }

  /* A altura do acordeão (Bootstrap Collapse) já desliga sozinha: o
     `bootstrap.min.css` traz `.collapsing{transition:none}` sob este mesmo
     media query — nada a fazer aqui por essa parte. */
}


/* ============================================================ */
/* 6/13 — MATERIAL DIDÁTICO — sec-material*/
/* origem: sections/6-material.css                          */
/* ============================================================ */
/* ============================================================ */
/* SECTION: MATERIAL DIDÁTICO                                  */
/* ============================================================ */
.material-ppfl {
  padding: 90px 0 86px;
  background-image: linear-gradient(180deg,
    var(--material-ppfl-bg-top) 0%,
    var(--material-ppfl-bg-bottom) 100%);
  font-family: var(--font-primary);
}

.material-ppfl__container {
  box-sizing: border-box;
  max-width: var(--material-ppfl-container);
  margin: 0 auto;
  padding-inline: var(--material-ppfl-gutter);
}


/* --- Cabeçalho: título, texto de apoio e régua azul --- */
.material-ppfl__header {
  text-align: center;
}

.material-ppfl__title {
  margin: 0;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 48px;
  color: var(--color-navy-deep);
}

/* 798px é a largura do bloco de texto no Figma — é ela que produz a
   quebra em duas linhas do desktop. Note que ele é MAIS LARGO que o
   container de 680px do título; por isso a medida vive aqui, e não
   no wrapper. */
.material-ppfl__lead {
  max-width: 798px;
  margin: 15px auto 0;
  font-size: 1.0375rem;                  /* 16.6px */
  font-weight: var(--font-weight-regular);
  line-height: 25.79px;
  color: var(--color-text-muted);
}

.material-ppfl__lead strong {
  font-weight: var(--font-weight-bold);
}

.material-ppfl__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 39px auto 0;
  background-color: var(--color-navy-rule);
}


/* ============================================================ */
/* CARDS DOS LIVROS                                            */
/* ============================================================ */
.material-ppfl__books {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--material-ppfl-book-gap);
  max-width: var(--material-ppfl-books);
  margin: 45px auto 0;
  padding: 0;
}

/* `aspect-ratio` mantém a proporção 185x247 do Figma em qualquer
   largura — as capas são posicionadas em % sobre esse retângulo. */
.material-ppfl__book {
  position: relative;
  aspect-ratio: 185 / 247;
  overflow: hidden;
  border-radius: 14px;
  background-image: var(--material-ppfl-book-bg);
  box-shadow: 0 16px 34px -22px rgba(41, 35, 92, 0.4);
}

/* As artes já vêm recortadas no enquadramento do Figma (o PNG tem
   exatamente a proporção do retângulo abaixo), então basta posicionar
   a caixa — sem `object-fit`. */
.material-ppfl__cover {
  position: absolute;
  top: var(--material-cover-top);
  left: var(--material-cover-left);
  width: var(--material-cover-width);
  height: var(--material-cover-height);
}

/* Os quatro títulos são ancorados pelo CENTRO, a 89% da altura do
   card: assim o de uma linha só (Liderar com Respeito) fica entre as
   duas linhas dos vizinhos, como no design.

   A largura da caixa é o que define a quebra de cada legenda — no
   Figma ela varia de card para card (de 138px a 170px sobre os mesmos
   185px de card), por isso vem de `--material-title-inset`. */
.material-ppfl__book-title {
  position: absolute;
  top: 89%;
  right: var(--material-title-inset, 8.65%);
  left: var(--material-title-inset, 8.65%);
  margin: 0;
  transform: translateY(-50%);
  font-size: 0.81875rem;                 /* 13.1px */
  font-weight: var(--font-weight-extrabold);
  line-height: 17px;
  text-align: center;
  color: var(--color-white);
}

/* --- Ladrilho clicável: abre o #livroModal ------------------------ */

/* Gatilho invisível cobrindo o ladrilho (mesmo padrão do
   `.experts-ppfl__trigger`). Fica acima da capa e do título. */
.material-ppfl__book-trigger {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background-color: transparent;
  cursor: pointer;
}

.material-ppfl__book-trigger:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -5px;
}

/* Sem este selo o ladrilho não parece clicável — a capa e o título
   sozinhos leem como ilustração. Aparece no hover e no foco. */
.material-ppfl__book-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-white);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  pointer-events: none;
}

.material-ppfl__book {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* O zoom da capa é seguro porque o recorte é do CONTÊINER
   (`.material-ppfl__book` já tem border-radius + overflow:hidden). */
.material-ppfl__cover {
  transition: transform 0.35s ease;
}

.material-ppfl__book:hover,
.material-ppfl__book:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 26px 44px -20px rgba(41, 35, 92, 0.55);
}

.material-ppfl__book:hover .material-ppfl__cover,
.material-ppfl__book:focus-within .material-ppfl__cover {
  transform: scale(1.05);
}

.material-ppfl__book:hover .material-ppfl__book-badge,
.material-ppfl__book:focus-within .material-ppfl__book-badge {
  opacity: 1;
  transform: scale(1);
  background-color: var(--color-magenta);
}

@media (prefers-reduced-motion: reduce) {
  .material-ppfl__book,
  .material-ppfl__cover,
  .material-ppfl__book-badge {
    transition: none;
  }

  .material-ppfl__book:hover,
  .material-ppfl__book:focus-within,
  .material-ppfl__book:hover .material-ppfl__cover,
  .material-ppfl__book:focus-within .material-ppfl__cover {
    transform: none;
  }
}

/* --- Enquadramento de cada capa (% sobre o card de 185 x 247) --- */
.material-ppfl__book--gd {
  --material-title-inset:   4%;          /* caixa de 170px: "para Executar
                                            a Estratégia" numa linha só */
  --material-cover-width:  91.89%;       /* 170px */
  --material-cover-height: 52.23%;       /* 129px */
  --material-cover-left:    7.03%;       /*  13px */
  --material-cover-top:    16.60%;       /*  41px */
}

.material-ppfl__book--disrupcao {
  --material-title-inset:  12.7%;        /* caixa de 138px: quebra em
                                            "Dominando a / Disrupção Digital" */
  --material-cover-width:  85.95%;       /* 159px */
  --material-cover-height: 68.42%;       /* 169px */
  --material-cover-left:   10.81%;       /*  20px */
  --material-cover-top:    10.97%;       /*  27px */
}

.material-ppfl__book--liderar {
  --material-cover-width:  72.97%;       /* 135px */
  --material-cover-height: 70.85%;       /* 175px */
  --material-cover-left:   12.43%;       /*  23px */
  --material-cover-top:    10.16%;       /*  25px */
}

.material-ppfl__book--aprendizado {
  --material-cover-width:  68.11%;       /* 126px */
  --material-cover-height: 66.80%;       /* 165px */
  --material-cover-left:   16.76%;       /*  31px */
  --material-cover-top:    10.97%;       /*  27px */
}


/* ============================================================ */
/* OBSERVAÇÃO DE ENVIO                                         */
/* ============================================================ */
.material-ppfl__note {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 41px;
  max-width: var(--material-ppfl-note);
  margin: 35px auto 0;
  padding-left: 12px;
  border-left: 2px solid var(--color-lilac);
  font-size: 0.78125rem;                 /* 12.5px */
  font-weight: var(--font-weight-regular);
  line-height: 19.34px;
  color: var(--color-text-muted);
}


/* ============================================================ */
/* CARD DA PLATAFORMA LEANLEARNING                             */
/* ============================================================ */
.material-ppfl__platform {
  display: flex;
  min-height: 339px;
  max-width: var(--material-ppfl-platform);
  margin: 86px auto 0;
  overflow: hidden;
  border: 1px solid var(--color-accent);
  border-radius: 14px;
  background-color: var(--color-white);
}

/* Painel navy com a foto a 20% por cima — a proporção medida no
   render do Figma é exatamente `#29235c` + foto em `opacity: .2`. */
.material-ppfl__platform-aside {
  position: relative;
  flex: 0 0 var(--material-ppfl-aside);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-navy-deep);
}

.material-ppfl__platform-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.material-ppfl__platform-logo {
  position: relative;
  width: 257px;
  max-width: 82%;
  height: auto;
}

.material-ppfl__platform-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 19px 41px 40px 30px;
}

.material-ppfl__platform-title {
  margin: 0;
  font-size: 1.05rem;                    /* 16.8px */
  font-weight: var(--font-weight-regular);
  line-height: 26px;
  color: var(--color-accent);
}

.material-ppfl__platform-title strong {
  font-weight: var(--font-weight-extrabold);
}

/* 533px é a largura do parágrafo no Figma — é ela que dá as três
   linhas do desktop. */
.material-ppfl__platform-lead {
  max-width: 533px;
  margin: 14px 0 0;
  font-size: 0.9rem;                     /* 14.4px */
  font-weight: var(--font-weight-regular);
  line-height: 19px;
  color: var(--color-black);
}


/* --- Os três diferenciais da plataforma --- */
.material-ppfl__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 21px 0 0;
  padding: 0;
}

/* Altura fixa com o ícone colado na base alinha os três títulos, já
   que os SVGs têm alturas diferentes (27, 31 e 29px). */
.material-ppfl__feature-icon {
  display: flex;
  align-items: flex-end;
  height: 33px;
}

.material-ppfl__feature-icon img {
  display: block;
  width: auto;
  height: auto;
}

.material-ppfl__feature-title {
  margin: 5px 0 0;
  font-size: 0.8625rem;                  /* 13.8px */
  font-weight: var(--font-weight-bold);
  line-height: 21.33px;
  color: var(--color-navy-deep);
}

/* No Figma as três caixas de texto têm larguras diferentes (151, 144 e
   161px) e é isso — não a coluna — que define a quebra de cada
   parágrafo. Só vale no desktop: abaixo de 992px as colunas ficam mais
   largas (ou empilham) e o texto usa a coluna inteira. */
@media (min-width: 992px) {
  .material-ppfl__feature:nth-child(1) { --material-feature-text: 151px; }
  .material-ppfl__feature:nth-child(2) { --material-feature-text: 144px; }
  .material-ppfl__feature:nth-child(3) { --material-feature-text: 161px; }
}

.material-ppfl__feature-text {
  max-width: var(--material-feature-text, none);
  margin: 2px 0 0;
  font-size: 0.6875rem;                  /* 11px */
  font-weight: var(--font-weight-regular);
  line-height: 15px;
  color: var(--color-black);
}

.material-ppfl__feature-text em {
  font-style: italic;
}

.material-ppfl__feature-text strong {
  font-weight: var(--font-weight-bold);
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 1247.98px) {
  .material-ppfl {
    padding-block: 80px 76px;
  }

  .material-ppfl__platform {
    margin-top: 72px;
  }
}

@media (max-width: 991.98px) {
  .material-ppfl {
    padding: 72px 0 68px;
  }

  /* Empilhado, o painel vira uma faixa no topo do card. */
  .material-ppfl__platform {
    flex-direction: column;
    min-height: 0;
  }

  .material-ppfl__platform-aside {
    flex: 0 0 auto;
    height: 200px;
  }

  .material-ppfl__platform-body {
    padding: 24px 28px 32px;
  }
}

@media (max-width: 767.98px) {
  .material-ppfl {
    padding: 56px 0 52px;
  }

  .material-ppfl__title {
    font-size: 2rem;
    line-height: 1.2;
  }

  .material-ppfl__lead {
    margin-top: 14px;
    font-size: 1rem;
  }

  .material-ppfl__rule {
    margin-top: 32px;
  }

  /* Com 4 colunas os cards ficariam menores que a legenda; em duas
     colunas eles voltam a respirar. */
  .material-ppfl__books {
    grid-template-columns: repeat(2, 1fr);
    max-width: 420px;
    margin-top: 32px;
  }

  .material-ppfl__note {
    margin-top: 32px;
  }

  .material-ppfl__platform {
    margin-top: 48px;
  }

  .material-ppfl__features {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .material-ppfl__feature-text {
    font-size: 0.75rem;                  /* 12px */
    line-height: 17px;
  }
}

@media (max-width: 575.98px) {
  .ppfl-servicos-page {
    --material-ppfl-gutter: 16px;
  }

  .material-ppfl__title {
    font-size: 1.75rem;
  }

  .material-ppfl__platform-aside {
    height: 160px;
  }

  .material-ppfl__platform-body {
    padding: 20px 20px 28px;
  }

  .material-ppfl__platform-title {
    font-size: 1rem;
    line-height: 22px;
  }
}


/* ============================================================ */
/* 7/13 — CERTIFICAÇÕES — sec-upsell*/
/* origem: sections/10-certificacoes.css                    */
/* ============================================================ */
/* ============================================================ */
/* SECTION: CERTIFICAÇÕES — DUPLA CERTIFICAÇÃO                 */
/* ============================================================ */
.cert-ppfl {
  position: relative;
  overflow: hidden;
  padding: 90px 24px;
  font-family: var(--font-primary);
  background-color: var(--cert-ppfl-surface-soft);
}


/* --- Fundo: véus de cor que trocam + arte de linhas fixa --- */
.cert-ppfl__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cert-ppfl__tint {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--cert-ppfl-fade) ease;
}

.cert-ppfl__tint--saude {
  background-image: linear-gradient(228.05deg, #f5f6fa 48.89%, #eafeff 74.51%);
}

.cert-ppfl__tint--digital {
  background-image: linear-gradient(225deg, #ffffff 46.56%, #e0dcff 97.16%);
}

.cert-ppfl__tint--supply {
  background-image: linear-gradient(231.95deg, #f5f6fa 44.53%, #ffe7e8 93.76%);
}

.cert-ppfl[data-cert-active='saude']   .cert-ppfl__tint--saude,
.cert-ppfl[data-cert-active='digital'] .cert-ppfl__tint--digital,
.cert-ppfl[data-cert-active='supply']  .cert-ppfl__tint--supply {
  opacity: 1;
}

/* Enquadramento do Figma: width 113.22%, left -16.53%, top -4.87%.
   A altura fica em auto para a arte nunca distorcer — no frame de
   referência isso reproduz exatamente os 145.93% declarados. */
.cert-ppfl__lines {
  position: absolute;
  top: -4.87%;
  left: -16.53%;
  width: 113.22%;
  height: auto;
  max-width: none;
}


.cert-ppfl__container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cert-ppfl-stack-gap);
  max-width: var(--cert-ppfl-container);
  margin: 0 auto;
  padding-inline: var(--cert-ppfl-gutter);
}


/* --- Cabeçalho: título, texto de apoio e régua --- */
.cert-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) */
.cert-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);
}

/* os 760px do bloco são o que quebra a linha depois de "com a" */
.cert-ppfl__lead {
  margin: 0;
  padding-top: 6px;
  width: 100%;
  font-size: 1.019rem;                   /* 16.3px */
  font-weight: var(--font-weight-regular);
  line-height: 25.3px;
  color: #000;
}

.cert-ppfl__rule {
  display: block;
  width: 96px;
  height: 4px;
  background-color: var(--color-indigo);
}


/* --- Abas: uma cor de acento por certificação --- */
.cert-ppfl__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding-top: 20px;
}

.cert-ppfl__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 13px 23px;
  border: 1px solid var(--cert-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(--cert-ppfl-fade) var(--cert-ppfl-ease),
    color var(--cert-ppfl-fade) var(--cert-ppfl-ease),
    border-color var(--cert-ppfl-fade) var(--cert-ppfl-ease),
    box-shadow 250ms var(--cert-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. */
.cert-ppfl__tab--saude {
  --cert-ppfl-tab-accent: var(--color-teal);
  min-width: 114px;
}

.cert-ppfl__tab--digital {
  --cert-ppfl-tab-accent: var(--color-navy-deep);
}

.cert-ppfl__tab--supply {
  --cert-ppfl-tab-accent: var(--color-blood);
}

.cert-ppfl__tab:hover {
  box-shadow: 0 6px 16px -10px var(--cert-ppfl-tab-accent);
}

.cert-ppfl__tab:focus-visible {
  outline: 2px solid var(--cert-ppfl-tab-accent);
  outline-offset: 3px;
}

.cert-ppfl__tab.is-active {
  background-color: var(--cert-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. */
.cert-ppfl__stack {
  display: grid;
  width: 100%;
}

.cert-ppfl__card {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  box-sizing: border-box;
  min-height: var(--cert-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(--cert-ppfl-fade) ease,
    visibility 0s linear var(--cert-ppfl-fade);
}

.cert-ppfl__card.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition:
    opacity var(--cert-ppfl-fade) ease,
    visibility 0s;
}

.cert-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 */
.cert-ppfl__media {
  position: relative;
  flex: 0 0 var(--cert-ppfl-media-width);
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-white);
}

/* A foto é maior que o painel: `width` reproduz o zoom do Figma e
   `left` o deslocamento horizontal; o object-position resolve o
   corte vertical. Com height 100% + cover ela cobre o painel em
   qualquer altura. */
.cert-ppfl__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: soft-light;
}

.cert-ppfl__media--saude {
  background-image: linear-gradient(216.84deg, rgba(22, 145, 148, .86) 1.13%, rgba(41, 35, 92, .86) 96.37%);
}

.cert-ppfl__media--saude .cert-ppfl__photo {
  left: -11.62%;
  width: 111.62%;
  object-position: 50% 30%;
  opacity: .71;
}

.cert-ppfl__media--digital {
  background-image: linear-gradient(180deg, rgba(41, 35, 92, .86) 0%, rgba(57, 65, 149, .86) 100%);
}

.cert-ppfl__media--digital .cert-ppfl__photo {
  left: -4.34%;
  width: 108.9%;
  object-position: 50% 1%;
}

.cert-ppfl__media--supply {
  background-image: linear-gradient(201.7deg, #ffa0a0 .3%, #780000 84.05%);
}

.cert-ppfl__media--supply .cert-ppfl__photo {
  object-position: 50% 85%;
}

.cert-ppfl__logo {
  position: absolute;
  top: 23px;
  left: 29px;
  z-index: 1;
  width: 52.4px;
  height: 38px;
}


/* --- Corpo do card --- */
.cert-ppfl__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 51px 44px 22px;
}

.cert-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);
}

.cert-ppfl__note {
  margin: 0;
  padding: 15px 18px 16px 21px;
  border-left: 3px solid var(--color-accent);
  border-radius: 8px;
  background-color: var(--cert-ppfl-surface-soft);
  font-size: 0.85rem;                    /* 13.6px */
  line-height: 21px;
  color: var(--color-text-muted);
}


/* --- Rodapé do card: CTA à esquerda, parceiro à direita --- */
/* margin-top: auto encosta o rodapé na base, então ele fica na mesma
   altura nas três abas (a pilha já iguala a altura dos cards). */
.cert-ppfl__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}

.cert-ppfl__cta {
  display: inline-flex;
  align-items: center;
  padding: 5.5px 26px;
  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(--cert-ppfl-ease),
    box-shadow 250ms var(--cert-ppfl-ease);
}

.cert-ppfl__cta:hover,
.cert-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);
}

.cert-ppfl__cta-arrow {
  margin-left: 6px;
  transition: transform 250ms var(--cert-ppfl-ease);
}

.cert-ppfl__cta:hover .cert-ppfl__cta-arrow,
.cert-ppfl__cta:focus-visible .cert-ppfl__cta-arrow {
  transform: translateX(3px);
}

.cert-ppfl__partner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cert-ppfl__partner-logo {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  object-fit: cover;
}

.cert-ppfl__partner-text {
  margin: 0;
  font-size: 0.8rem;                     /* 12.8px */
  line-height: 19.84px;
  color: var(--color-text-muted);
}

.cert-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);
}


/* --- Fecho e observação --- */
.cert-ppfl__closing {
  margin: 0;
  padding-top: 26.8px;
  max-width: 680px;
  font-size: 1rem;
  line-height: 24.8px;
  text-align: center;
  color: #000;
}

.cert-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 */
  line-height: 19.84px;
  text-align: center;
  color: #000;
}

/* "Observação:" é o único trecho fora do itálico (é assim no Figma) */
.cert-ppfl__disclaimer-text {
  display: block;
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 1247.98px) {
  .cert-ppfl__media {
    flex-basis: 40%;
  }

  .cert-ppfl__body {
    padding: 44px 36px 22px;
  }
}

@media (max-width: 991.98px) {
  .cert-ppfl {
    padding: 70px 20px;
  }

  .cert-ppfl__card {
    flex-direction: column;
    min-height: 0;
  }

  .cert-ppfl__media {
    flex: 0 0 260px;
  }

  /* o enquadramento do Figma vale para o painel retrato; na faixa
     horizontal a foto volta a preencher centralizada */
  .cert-ppfl__media .cert-ppfl__photo {
    left: 0;
    width: 100%;
    object-position: 50% 50%;
  }

  .cert-ppfl__body {
    padding: 32px 28px 32px;
  }
}

@media (max-width: 767.98px) {
  .cert-ppfl__title {
    max-width: none;
    font-size: 1.9rem;
    line-height: 38px;
  }

  .cert-ppfl__lead {
    font-size: 0.95rem;
    line-height: 23px;
  }

  .cert-ppfl__tab {
    padding: 11px 18px;
    font-size: 0.8125rem;
  }

  .cert-ppfl__tab--saude {
    min-width: 0;
  }

  .cert-ppfl__card-title {
    font-size: 1.15rem;
    line-height: 24px;
  }

  .cert-ppfl__media {
    flex-basis: 200px;
  }

  .cert-ppfl__closing {
    padding-top: 12px;
    font-size: 0.95rem;
    line-height: 23px;
  }
}

@media (max-width: 575.98px) {
  .cert-ppfl {
    padding: 56px 16px;
  }

  .cert-ppfl__container {
    padding-inline: 0;
  }

  .cert-ppfl__body {
    padding: 24px 20px 28px;
  }

  .cert-ppfl__footer {
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 20px;
  }

  .cert-ppfl__cta {
    align-self: stretch;
    justify-content: center;
  }

  .cert-ppfl__disclaimer {
    padding: 15px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cert-ppfl__tint,
  .cert-ppfl__card,
  .cert-ppfl__tab,
  .cert-ppfl__cta,
  .cert-ppfl__cta-arrow {
    transition-duration: 1ms;
  }
}


/* ============================================================ */
/* 8/13 — ESPECIALISTAS — sec-especialistas*/
/* origem: sections/5-especialistas.css                     */
/* ============================================================ */
/* ============================================================ */
/* SECTION: ESPECIALISTAS                                      */
/* ============================================================ */
.experts-ppfl {
  padding: 90px 24px 100px;
  background-color: var(--color-bg-fog);
  font-family: var(--font-primary);
}

.experts-ppfl__container {
  box-sizing: border-box;
  max-width: var(--experts-ppfl-container);
  margin: 0 auto;
}


/* --- Cabeçalho: título e texto de apoio --- */
.experts-ppfl__header {
  text-align: center;
}

.experts-ppfl__title {
  margin: 0;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 48px;
  color: var(--color-navy-deep);
}

/* 565px é a largura do bloco de texto no Figma — é ela que produz a
   quebra em duas linhas do desktop */
.experts-ppfl__lead {
  max-width: var(--experts-ppfl-lead-width);
  margin: 14px auto 0;
  font-size: 1.0375rem;                  /* 16.6px */
  font-weight: var(--font-weight-regular);
  line-height: 25.79px;
  color: var(--color-text-muted);
}

.experts-ppfl__lead em {
  font-style: italic;
}


/* ============================================================ */
/* MOSAICO DE RETRATOS                                         */
/* ============================================================ */
/* Colunas vêm da view (--experts-cols inline na <ul>): 4 ou 5, o que
   deixar menos slots vazios na última fileira — a conta vive no Razor,
   junto de quantos ladrilhos "vaga" fecham a sobra.
   O raio das QUATRO quinas externas do mural é do contêiner (radius +
   overflow:hidden recortando os cards dos cantos): funciona com
   qualquer número de colunas/fileiras, sem caçar nth-child. Para isso
   o gutter lateral virou margin (era padding — padding deixaria o
   recorte 32px longe da borda visual do mosaico). */
.experts-ppfl__grid {
  display: grid;
  grid-template-columns: repeat(var(--experts-cols, 4), minmax(0, 1fr));
  gap: var(--experts-ppfl-gap);
  margin: 52px var(--experts-ppfl-gutter) 0;
  border-radius: var(--experts-ppfl-radius);
  overflow: hidden;
  list-style: none;
}

/* `overflow: hidden` recorta o zoom do hover e o canto arredondado */
.experts-ppfl__card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-vaga-base);
}

/* Véu escuro que garante a leitura da legenda sobre a foto */
.experts-ppfl__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0.105%, rgba(0, 0, 0, 0.86) 100%);
  pointer-events: none;
}

/* Os arquivos são os originais coloridos do Figma; o preto e branco do
   design é o filtro daqui, que sai no hover */
.experts-ppfl__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform var(--experts-ppfl-fade) ease,
              filter    var(--experts-ppfl-fade) ease;
}

/* Enquanto o rodízio está rodando, o fade é o longo — a classe entra e sai
   com ele (`5-especialistas.js`), então some assim que o ponteiro toca o
   mosaico e o hover volta a responder rápido. A propriedade é herdada: basta
   trocá-la aqui no grid para valer em todas as fotos. */
.experts-ppfl__grid.is-rodizio {
  --experts-ppfl-fade: var(--experts-ppfl-fade-auto);
}

/* Cor + aproximação sutil no hover — não estão no Figma, são acabamento
   da conversão. `.is-destaque` é o mesmo estado aplicado por classe: é como
   `5-especialistas.js` acende os retratos sozinho, sem cursor nenhum. As duas
   regras são a MESMA declaração de propósito — mexeu numa, mexeu na outra. */
.experts-ppfl__card:hover .experts-ppfl__photo,
.experts-ppfl__card.is-destaque .experts-ppfl__photo {
  transform: scale(1.05);
  filter: grayscale(0);
}

/* No Figma o nome fica travado a 77% da altura do ladrilho e o cargo
   escorre para baixo — por isso legendas de duas linhas descem em vez
   de empurrar o nome para cima */
.experts-ppfl__caption {
  position: absolute;
  z-index: 1;
  top: 77%;
  right: var(--experts-ppfl-inset);
  left: var(--experts-ppfl-inset);
}

.experts-ppfl__name {
  margin: 0;
  font-size: 0.81875rem;                 /* 13.1px */
  font-weight: var(--font-weight-extrabold);
  line-height: 17px;
  color: var(--color-white);
}

.experts-ppfl__role {
  margin: 2px 0 0;
  font-size: 0.68125rem;                 /* 10.9px */
  font-weight: var(--font-weight-regular);
  line-height: 14.14px;
  color: rgba(255, 255, 255, 0.8);
}


/* --- Ladrilho vazio: fecha o retângulo do mosaico ---
   (sem raio próprio: as quinas externas são recortadas pelo contêiner) */
.experts-ppfl__card--vaga {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(0, 0, 0, 0.97) 99.908%);
}

.experts-ppfl__card--vaga::after {
  content: none;
}

/* Estado vazio — mesmo texto/propósito do `.team-empty` da Nossa Equipe,
   caso a lista curada (AcademiaController) fique sem nenhum Id válido. */
.experts-ppfl__empty {
  grid-column: 1 / -1;
  padding: 32px;
  border: 1px dashed var(--color-border-soft);
  border-radius: var(--experts-ppfl-radius);
  text-align: center;
  color: var(--color-text-muted);
}

/* Botão invisível que cobre o ladrilho inteiro — abre o "molde" com o
   currículo (mesmo mecanismo da Nossa Equipe). Fica por cima da legenda
   (z-index:1) e do véu (auto): z-index:2 garante que o clique/hover
   chega até aqui em qualquer ponto do card. */
.experts-ppfl__trigger {
  position: absolute;
  inset: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.experts-ppfl__trigger:focus-visible {
  outline: 3px solid var(--color-magenta);
  outline-offset: -3px;
}




/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 1247.98px) {
  .ppfl-servicos-page {
    --experts-ppfl-gutter: 8px;
  }

  .experts-ppfl {
    padding-block: 80px 88px;
  }
}

/* Em duas colunas a conta de vagas do desktop não fecha mais o retângulo
   com exatidão — aceitável no tablet; a largura máxima evita ladrilhos
   gigantes. As quinas seguem redondas: o raio é do contêiner. */
@media (max-width: 991.98px) {
  .ppfl-servicos-page {
    --experts-ppfl-gutter: 0px;
  }

  .experts-ppfl__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
    margin-inline: auto;
  }
}

@media (max-width: 767.98px) {
  .experts-ppfl {
    padding: 56px 16px 72px;
  }

  .experts-ppfl__title {
    font-size: 2rem;
    line-height: 1.2;
  }

  .experts-ppfl__lead {
    font-size: 1rem;
  }

  .experts-ppfl__grid {
    margin-top: 32px;
  }
}

/* Em coluna única o ladrilho vazio não fecha nada — sai de cena */
@media (max-width: 575.98px) {
  .experts-ppfl__title {
    font-size: 1.75rem;
  }

  .experts-ppfl__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 320px;
  }

  .experts-ppfl__card--vaga {
    display: none;
  }
}

/* Sem movimento: cai o zoom e a transição, mas a cor no hover continua —
   é troca de cor, não animação. O rodízio automático nem chega aqui: o JS
   desiste na largada, porque animação que começa sozinha é exatamente o que
   essa preferência pede para não acontecer. */
@media (prefers-reduced-motion: reduce) {
  .experts-ppfl__photo {
    transition: none;
  }

  .experts-ppfl__card:hover .experts-ppfl__photo,
  .experts-ppfl__card.is-destaque .experts-ppfl__photo {
    transform: none;
  }
}



/* ============================================================ */
/* MODAL — LIVRO DA COLEÇÃO (#livroModal)                       */
/* ------------------------------------------------------------ */
/* Irmão do modal de especialista abaixo: mesmos tokens e mesmo  */
/* mecanismo (um modal só, populado no `show.bs.modal` a partir  */
/* dos data-* do ladrilho). Layout próprio: capa retangular ao   */
/* lado do texto, empilhando no celular.                         */
/* ============================================================ */
.livro-modal .modal-dialog {
  max-width: 700px;
  width: calc(100% - 32px);
  margin-left: auto;
  margin-right: auto;
}

.livro-modal .modal-content {
  position: relative;
  border: none;
  border-radius: 18px;
  box-shadow: 0 30px 70px -24px rgba(41, 35, 92, 0.55);
}

.livro-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-page-bg);
  color: var(--color-navy-deep);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.livro-modal__close:hover,
.livro-modal__close:focus-visible {
  background-color: var(--color-magenta);
  color: var(--color-white);
}

.livro-modal__close:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 2px;
}

.livro-modal__close svg {
  width: 13px;
  height: 13px;
}

.livro-modal__body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  align-items: center;
  padding: 38px 34px;
}

/* Fundo navy atrás da capa: as artes são renders com fundo claro e
   se dissolveriam no cartão branco. Mesmo gradiente do ladrilho. */
.livro-modal__capa {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 240px;
  padding: 20px;
  border-radius: 14px;
  background-image: var(--material-ppfl-book-bg);
}

/* `max-*` em vez de tamanho fixo: as quatro capas têm proporções
   diferentes — a de Gerenciamento Diário é paisagem. */
.livro-modal__capa img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 210px;
}

.livro-modal__eyebrow {
  margin: 0 0 8px;
  font-size: 0.75rem;                    /* 12px */
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-magenta);
}

.livro-modal__titulo {
  margin: 0 0 6px;
  font-size: 1.5rem;                     /* 24px */
  font-weight: var(--font-weight-black);
  line-height: 1.22;
  color: var(--color-navy-deep);
}

.livro-modal__autores {
  margin: 0 0 18px;
  font-size: 0.875rem;                   /* 14px */
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color: var(--color-navy-soft);
}

.livro-modal__resumo {
  margin: 0 0 24px;
  font-size: 0.9375rem;                  /* 15px */
  line-height: 1.68;
  color: var(--color-text-body);
}

/* Navy, não magenta: o magenta desta página é cor de acento (olho,
   selo, foco) — como FUNDO de botão dá 3,08:1 com texto branco e
   reprova o AA em 14px. Navy dá 14:1 e é o mesmo do `.cert-ppfl__cta`,
   que é o análogo (CTA que sai de um cartão para outra página). */
.livro-modal__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 12px 22px;
  border-radius: 8px;
  background-color: var(--color-navy-deep);
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-decoration: none;
  color: var(--color-white);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.livro-modal__cta:hover,
.livro-modal__cta:focus-visible {
  background-color: var(--color-indigo);   /* 8,9:1 — segue passando */
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 14px 24px -10px rgba(41, 35, 92, 0.5);
}

.livro-modal__cta:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 2px;
}

.livro-modal__cta svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Empilha: a capa vira uma faixa mais baixa acima do texto */
@media (max-width: 575.98px) {
  .livro-modal__body {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 46px 22px 30px;
  }

  .livro-modal__capa {
    min-height: 0;
    padding: 16px;
  }

  .livro-modal__capa img {
    max-height: 160px;
  }

  .livro-modal__titulo {
    font-size: 1.3rem;
  }
}


/* ============================================================ */
/* MODAL — CURRÍCULO DO ESPECIALISTA                            */
/* ------------------------------------------------------------ */
/* Mesmo mecanismo visual do modal de currículo em /nossa-equipe */
/* (Views/QuemSomos/NossaEquipe.cshtml + nossa-equipe-main.css): */
/* foto circular vazando a borda do card + selo de LinkedIn na   */
/* base, populados via JS a partir dos data-* do botão que abriu */
/* (ver "8/13 — ESPECIALISTAS" em programaFormacaoLeanServicos.js).*/
/* Reskin nos tokens desta página (navy/magenta) em vez do        */
/* laranja da Nossa Equipe — CSS próprio, não compartilhado.      */
/* ============================================================ */
#especialistaModal .modal-dialog {
  max-width: 1100px;
  width: calc(100% - 32px);
  margin-left: auto;
  margin-right: auto;
}

#especialistaModal .modal-content {
  position: relative;
  overflow: visible;
  border: none;
  border-radius: 16px;
  padding: 36px 40px 32px;
  box-shadow: 0 24px 60px -20px rgba(41, 35, 92, 0.45);
}

.especialista-modal__photo-wrap {
  position: absolute;
  left: -90px;
  top: 50%;
  z-index: 2;
  box-sizing: border-box;
  width: 190px;
  height: 190px;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}

.especialista-modal__photo-circle {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 5px solid var(--color-magenta);
  border-radius: 50%;
  box-shadow: 0 16px 20px -6px rgba(41, 35, 92, 0.35);
}

.especialista-modal__photo-circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.especialista-modal__linkedin {
  position: absolute;
  bottom: -4px;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  transform: translateX(-50%);
  border: 2px solid var(--color-border-soft);
  border-radius: 50%;
  background-color: var(--color-white);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.especialista-modal__linkedin:hover,
.especialista-modal__linkedin:focus-visible {
  border-color: #0077b5;
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 12px 20px rgba(0, 119, 181, 0.2);
}

.especialista-modal__linkedin:focus-visible {
  outline: 2px solid #0077b5;
  outline-offset: 2px;
}

.especialista-modal__linkedin svg {
  width: 18px;
  height: 18px;
}

.especialista-modal__body {
  position: relative;
  min-height: 220px;
  padding-left: 130px;
}

.especialista-modal__name {
  margin: 0 0 2px;
  font-size: 1.9rem;                     /* ~30px, equivalente ao 32px da referência */
  font-weight: var(--font-weight-black);
  line-height: 1.2;
  color: var(--color-navy-deep);
}

.especialista-modal__role {
  margin: 0 0 16px;
  font-size: 0.75rem;                    /* 12px */
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-magenta);
}

.especialista-modal__bio {
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-regular);
  line-height: 1.68;
  text-align: justify;
  color: var(--color-text-body);
}

.especialista-modal__bio p {
  margin: 0 0 16px;
}

.especialista-modal__bio p:last-child {
  margin-bottom: 0;
}

.especialista-modal__bio-link {
  font: inherit;
  color: var(--color-magenta);
  text-decoration: none;
}

.especialista-modal__bio-link:hover {
  color: var(--color-indigo);
}

.especialista-modal__bio-link--cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.especialista-modal__bio-link--cta::after {
  content: "\2192";
}

.especialista-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--color-border-soft);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.especialista-modal__close:hover,
.especialista-modal__close:focus-visible {
  border-color: var(--color-magenta);
  color: var(--color-magenta);
}

.especialista-modal__close:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 2px;
}

.especialista-modal__close svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 767.98px) {
  #especialistaModal .modal-content {
    padding: 26px 20px 22px;
  }

  .especialista-modal__photo-wrap {
    position: relative;
    left: 0;
    top: 0;
    margin: 0 auto 20px;
    transform: none;
    opacity: 1 !important;
  }

  .especialista-modal__body {
    padding-left: 0;
    text-align: center;
  }

  .especialista-modal__bio {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .especialista-modal__photo-wrap {
    width: 160px;
    height: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .especialista-modal__photo-wrap,
  .especialista-modal__linkedin,
  .especialista-modal__close {
    transition: none;
  }
}


/* ============================================================ */
/* 9/13 — DEPOIMENTOS — sec-depoimentos*/
/* origem: sections/8-depoimentos.css                       */
/* ============================================================ */
/* ============================================================ */
/* SECTION: DEPOIMENTOS                                        */
/* ============================================================ */
/* O gradiente é o inverso do da seção "Para quem se destina":
   entra quase branco e sai no lilás rosado que emenda com a
   seção seguinte. */
.depoimentos-ppfl {
  /* 120px até o título, 73px depois da paginação (frame 1920x1034) */
  padding: 120px 0 73px;
  background-image: linear-gradient(180deg, var(--depoimentos-ppfl-bg-top) 0%, var(--depoimentos-ppfl-bg-bottom) 100%);
  font-family: var(--font-primary);
}

.depoimentos-ppfl__container {
  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: 32px;
}


/* --- Cabeçalho --- */
/* No Figma a caixa do cabeçalho tem 640px com `white-space: nowrap`:
   o título estoura a caixa e ocupa 950px em uma linha só. Aqui a
   caixa é 1000px — largura que cabe os 950px do título no desktop e
   deixa a quebra acontecer naturalmente em telas menores. */
.depoimentos-ppfl__header {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.depoimentos-ppfl__title {
  margin: 0;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 46px;
  color: var(--color-navy-deep);
}

/* 654px é a largura da caixa de texto no Figma — é ela que produz a
   quebra em duas linhas ("...na gestão de / serviços e back-office...") */
.depoimentos-ppfl__lead {
  max-width: 654px;
  margin: 15px auto 0;
  font-size: 1.0375rem;                  /* 16.6px */
  font-weight: var(--font-weight-regular);
  line-height: 25.79px;
  color: var(--color-text-muted);
}

.depoimentos-ppfl__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 24px auto 0;                   /* 137 - 113.39 no frame */
  background-color: var(--color-indigo);
}


/* ============================================================ */
/* PALCO DO CARROSSEL                                          */
/* ============================================================ */
/* Full-bleed: os cards dos níveis 2 e 3 avançam até as bordas da
   tela e são cortados por `overflow: hidden`, como no frame. */
.depoimentos-ppfl__stage {
  position: relative;
  height: calc(var(--dep-art-h) * var(--dep-zoom));
  margin-top: 26px;                      /* 287 - 261 no frame */
  overflow: hidden;
}

.depoimentos-ppfl__track {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--dep-art-w);
  height: var(--dep-art-h);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translate(-50%, -50%) scale(var(--dep-zoom));
}

/* O card ativo fica no centro do palco; no Figma o conjunto está
   134px à esquerda do centro do frame — desalinhamento do arquivo
   (o mesmo vício da página PPFL Geral), normalizado aqui. */
.depoimentos-ppfl__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(0) scale(0.5);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  will-change: transform, opacity;
}

.depoimentos-ppfl__slide[data-pos]  { cursor: pointer; }
.depoimentos-ppfl__slide[data-pos="0"] { cursor: default; }

.depoimentos-ppfl__slide[data-pos="0"]  { opacity: 1;              transform: translateX(0) scale(1);                            z-index: 5; }
.depoimentos-ppfl__slide[data-pos="-1"] { opacity: var(--dep-o-1); transform: translateX(calc(-1 * var(--dep-x-1))) scale(var(--dep-s-1)); z-index: 4; }
.depoimentos-ppfl__slide[data-pos="1"]  { opacity: var(--dep-o-1); transform: translateX(var(--dep-x-1)) scale(var(--dep-s-1));   z-index: 4; }
.depoimentos-ppfl__slide[data-pos="-2"] { opacity: var(--dep-o-2); transform: translateX(calc(-1 * var(--dep-x-2))) scale(var(--dep-s-2)); z-index: 3; }
.depoimentos-ppfl__slide[data-pos="2"]  { opacity: var(--dep-o-2); transform: translateX(var(--dep-x-2)) scale(var(--dep-s-2));   z-index: 3; }
.depoimentos-ppfl__slide[data-pos="-3"] { opacity: var(--dep-o-3); transform: translateX(calc(-1 * var(--dep-x-3))) scale(var(--dep-s-3)); z-index: 2; }
.depoimentos-ppfl__slide[data-pos="3"]  { opacity: var(--dep-o-3); transform: translateX(var(--dep-x-3)) scale(var(--dep-s-3));   z-index: 2; }


/* ============================================================ */
/* ARTE DO DEPOIMENTO                                          */
/* ============================================================ */
/* Cada depoimento é um PNG achatado do Figma (626 x 501) — nome,
   cargo, citação, estrelas e o mockup de celular já rasterizados.
   A proporção do export bate com a tela de 666 x 533, então
   preenche o slide sem distorcer. */
.depoimentos-ppfl__art-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
}


/* ============================================================ */
/* PAGINAÇÃO                                                   */
/* ============================================================ */
.depoimentos-ppfl__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 44px;
  margin-top: 97px;                      /* 917 - 820 no frame */
}

.depoimentos-ppfl__arrow {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: 22px;
  background-color: var(--color-white);
  font-family: inherit;
  font-size: 0.831rem;                   /* 13.3px */
  line-height: 1;
  color: var(--color-navy-deep);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

/* Hover não está no Figma — acabamento da conversão, na cor do dot
   ativo para o controle se ler como do mesmo conjunto. */
.depoimentos-ppfl__arrow:hover,
.depoimentos-ppfl__arrow:focus-visible {
  border-color: var(--color-magenta);
  background-color: #fdf5ff;
}

.depoimentos-ppfl__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* O botão tem os 8px do design, mas a área de clique é estendida
   por um `::after` invisível — 24px de alvo, como pede o WCAG. */
.depoimentos-ppfl__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: var(--color-periwinkle);
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.depoimentos-ppfl__dot::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.depoimentos-ppfl__dot.is-active {
  width: 22px;
  border-radius: 8px;
  background-color: var(--color-magenta);
}

.depoimentos-ppfl__dot:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 3px;
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
/* Enquanto o coverflow vale, uma única variável reduz o palco
   inteiro — cards e deslocamentos.
   `--dep-zoom` precisa ser um NÚMERO: em `calc(533px * var(...))`,
   um valor em px (ex.: `calc(100vw / 666)`) daria px² e a
   declaração inteira seria descartada, zerando a altura do palco. */
@media (max-width: 1439.98px) {
  .ppfl-servicos-page { --dep-zoom: 0.90; }
}

@media (max-width: 1247.98px) {
  .ppfl-servicos-page { --dep-zoom: 0.80; }

  .depoimentos-ppfl        { padding-top: 96px; }
  .depoimentos-ppfl__stage { margin-top: 22px; }
  .depoimentos-ppfl__nav   { margin-top: 72px; }
}

@media (max-width: 1091.98px) {
  .ppfl-servicos-page { --dep-zoom: 0.72; }
}

/* Abaixo de 992px o coverflow sai de cena: sem largura para os
   vizinhos, sobra o card central sozinho, no fluxo normal. Os
   cards fora de foco NÃO são `display: none` — saem do fluxo com
   `position: absolute` + `opacity: 0` para continuarem no DOM (e
   no índice de busca, onde o `alt` é o texto do depoimento). */
@media (max-width: 991.98px) {
  .depoimentos-ppfl {
    padding-block: 64px 56px;
  }

  .depoimentos-ppfl__stage {
    height: auto;
    margin-top: 32px;
    overflow: visible;
  }

  .depoimentos-ppfl__track {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: 480px;
    height: auto;
    margin: 0 auto;
    transform: none;
  }

  .depoimentos-ppfl__track .depoimentos-ppfl__slide {
    position: absolute;
    inset: 0 0 auto;
    opacity: 0;
    transform: none;
    pointer-events: none;
  }

  .depoimentos-ppfl__track .depoimentos-ppfl__slide[data-pos="0"] {
    position: relative;
    opacity: 1;
    pointer-events: auto;
  }

  /* A arte volta a medir pela proporção do PNG (626 x 501) */
  .depoimentos-ppfl__art-img {
    height: auto;
  }

  .depoimentos-ppfl__nav { margin-top: 32px; }
}

@media (max-width: 767.98px) {
  .depoimentos-ppfl { padding-top: 48px; }

  .depoimentos-ppfl__title {
    font-size: 2rem;
    line-height: 1.2;
  }

  .depoimentos-ppfl__lead {
    font-size: 1rem;
    line-height: 1.55;
  }

  .depoimentos-ppfl__rule  { margin-top: 20px; }
  .depoimentos-ppfl__stage { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .depoimentos-ppfl__slide,
  .depoimentos-ppfl__dot {
    transition: none;
  }
}


/* ============================================================ */
/* 10/13 — TUDO O QUE ESTÁ INCLUÍDO — sec-incluido*/
/* origem: ZTEMP/"Secao PPFL - Variacoes (standalone)", versão 2a */
/* ============================================================ */
/* 2ª geração da seção: a fileira de 4 cards deu lugar às ABAS
   VERTICAIS da versão 2a do mockup de variações — lista de
   entregáveis à esquerda, painel de detalhe à direita. A troca de
   aba é o MESMO mecanismo das Certificações (JS da página,
   data-incluido-* copiado da receita data-cert-*): hover com
   ponteiro fino, foco ativa, setas navegam. Os painéis empilham na
   mesma célula do grid (receita do .cert-ppfl__stack) e fazem
   crossfade por .is-active — a altura é a do painel mais alto e a
   troca não desloca nada abaixo da seção.
   O cabeçalho saiu do eixo central: texto à esquerda (mantendo a
   régua tipográfica da família, não os 42px do mockup) e o placar
   "Mais de R$ 6 mil incluídos" à direita. */
/* Acento: o mockup é roxo (#7A3EE3/#B36BF6); aqui os degradês usam
   o acento da trilha (magenta → índigo), como o resto da página. */
/* ============================================================ */
/* SECTION: TUDO O QUE ESTÁ INCLUÍDO NO PPFL                   */
/* ============================================================ */
.incluido-ppfl {
  /* 88/86 é o respiro de `sec-material`; o frame trazia 60/79, apertado
     para o ritmo vertical desta página */
  padding: 88px 0 86px;
  /* degradê no lugar do chapado do frame, para a seção não se emendar no
     Investimento — nota completa no bloco de tokens */
  background-color: var(--incluido-ppfl-bg);
  background-image: linear-gradient(180deg,
                                    var(--incluido-ppfl-bg) 0%,
                                    var(--incluido-ppfl-bg-fim) 100%);
  font-family: var(--font-primary);
}

.incluido-ppfl__container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--incluido-ppfl-ritmo);
  max-width: var(--incluido-ppfl-container);
  margin: 0 auto;
  padding-inline: var(--incluido-ppfl-gutter);
}


/* ---------- Topo: texto à esquerda, placar à direita ---------- */
.incluido-ppfl__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
}

.incluido-ppfl__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8.9px;
  max-width: var(--incluido-ppfl-header);
  padding-top: 4px;
  text-align: left;
}

.incluido-ppfl__eyebrow {
  margin: 0;
  font-size: 0.8rem;                     /* 12.8px */
  font-weight: var(--font-weight-bold);
  line-height: normal;
  letter-spacing: 1.02px;
  text-transform: uppercase;
  color: var(--color-violet);
}

.incluido-ppfl__title {
  margin: 0;
  padding-bottom: 3.725px;
  font-size: 2.4rem;                     /* 38.4px — régua das seções irmãs */
  font-weight: var(--font-weight-black);
  line-height: 48px;
  letter-spacing: -0.32px;
  color: var(--color-navy-deep);
}

/* Régua sob o título — as irmãs usam 96 x 4 chapado; aqui ela é menor e
   em degradê porque divide o cabeçalho com o olho da seção, que as
   outras não têm. */
.incluido-ppfl__rule {
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-magenta) 0%, var(--color-indigo) 100%);
}

.incluido-ppfl__lead {
  margin: 0;
  padding-top: 7.1px;
  font-size: 1.0375rem;                  /* 16.6px — régua das seções irmãs */
  font-weight: var(--font-weight-regular);
  line-height: 25.79px;
  color: var(--incluido-ppfl-muted);
}

.incluido-ppfl__intro {
  margin: 0;
  padding-top: 6.09px;
  font-size: 1.0375rem;                  /* 16.6px */
  font-weight: var(--font-weight-regular);
  line-height: 25.79px;
  color: var(--incluido-ppfl-muted);
}

/* Placar "Mais de R$ 6 mil incluídos" — alinhado à base do texto.
   Cartão de vidro atrás do valor: fundo branco translúcido +
   backdrop-blur + hairline clara, sem cor nova — destaca o número
   contra o degradê da seção. */
.incluido-ppfl__valor {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  margin: 0;
  padding: 18px 24px 16px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--incluido-ppfl-radius);
  background-color: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -22px rgba(41, 35, 92, 0.45);
  text-align: right;
}

.incluido-ppfl__valor-rotulo {
  font-size: 0.6875rem;                  /* 11px */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: var(--incluido-ppfl-muted);
}

.incluido-ppfl__valor-cifra {
  margin: 10px 0;
  font-size: 2.75rem;                    /* 44px */
  font-weight: var(--font-weight-black);
  line-height: 1;
  letter-spacing: -1.32px;
  font-variant-numeric: tabular-nums;
  color: var(--color-navy-deep);
}


/* ---------- Abas verticais: lista + painel ---------- */
.incluido-ppfl__abas {
  display: grid;
  grid-template-columns: 352px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  width: 100%;
  padding: 20.7px 0 8px;
}

.incluido-ppfl__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* A borda existe desde o repouso (transparente) para o card ativo não
   mudar a caixa do gatilho e deslocar a lista. */
.incluido-ppfl__tab {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 18px;
  border: 1px solid transparent;
  border-radius: var(--incluido-ppfl-radius);
  background-color: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.incluido-ppfl__tab:hover {
  background-color: rgba(255, 255, 255, 0.55);
  border-color: var(--incluido-ppfl-border);
}

.incluido-ppfl__tab:focus-visible {
  outline: 2px solid var(--color-navy-deep);
  outline-offset: 3px;
}

.incluido-ppfl__tab.is-active {
  background-color: var(--color-white);
  border-color: var(--incluido-ppfl-border);
  box-shadow: 0 12px 26px -18px rgba(41, 35, 92, 0.6);
}

.incluido-ppfl__tab-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--color-white);
}

.incluido-ppfl__tab-icone--acento {
  background: linear-gradient(140deg, var(--color-magenta) 0%, var(--color-indigo) 100%);
}

.incluido-ppfl__tab-icone--exclusivo {
  background: linear-gradient(140deg, var(--color-teal) 0%, #1fb2b5 100%);
}

.incluido-ppfl__tab-corpo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.incluido-ppfl__tab-titulo {
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-navy-deep);
}

.incluido-ppfl__tab-apoio {
  font-size: 0.75rem;                    /* 12px */
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--incluido-ppfl-muted);
}

/* Teal ESCURECIDO para texto pequeno: --color-teal (#169194) dá 3.8:1
   sobre branco e reprova o AA nesse corpo — ver token. */
.incluido-ppfl__tab-apoio--exclusivo {
  color: var(--incluido-ppfl-teal-text);
}

/* O "R$ ..." do apoio sobe um degrau (peso + navy) para o valor se
   destacar do restante da linha */
.incluido-ppfl__tab-apoio-cifra {
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-navy-deep);
}


/* ---------- Painel de detalhe ---------- */
/* Pilha: os 4 painéis ocupam a mesma célula do grid (receita do
   .cert-ppfl__stack) — a altura é a do mais alto e a troca não
   desloca nada abaixo. */
.incluido-ppfl__paineis {
  display: grid;
  width: 100%;
}

.incluido-ppfl__painel {
  grid-column: 1;
  grid-row: 1;
  box-sizing: border-box;
  min-height: 392px;
  padding: 38px 38px 34px;
  border: 1px solid var(--incluido-ppfl-border);
  border-radius: 22px;
  background-color: var(--color-white);
  box-shadow:
    0 1px 2px rgba(41, 35, 92, 0.04),
    0 24px 48px -34px rgba(41, 35, 92, 0.4);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 250ms ease,
    visibility 0s linear 250ms;
}

.incluido-ppfl__painel.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition:
    opacity 250ms ease,
    visibility 0s;
}

.incluido-ppfl__painel:focus-visible {
  outline: 2px solid var(--color-navy-deep);
  outline-offset: 3px;
}

.incluido-ppfl__painel-titulo {
  margin: 0;
  font-size: 1.875rem;                   /* 30px */
  font-weight: var(--font-weight-extrabold);
  line-height: 1.2;
  letter-spacing: -0.75px;
  color: var(--color-navy-deep);
}

.incluido-ppfl__painel-texto {
  max-width: 62ch;
  margin: 18px 0 0;
  font-size: 1rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: var(--incluido-ppfl-muted);
}

.incluido-ppfl__painel-texto + .incluido-ppfl__painel-texto {
  margin-top: 12px;
}

/* Faixa de valor (painel da plataforma) */
.incluido-ppfl__painel-valor {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 28px 0 0;
  padding: 20px 22px;
  border-radius: var(--incluido-ppfl-radius);
  background-color: var(--incluido-ppfl-bg);
}

.incluido-ppfl__painel-valor-rotulo {
  max-width: 36ch;
  font-size: 0.84375rem;                 /* 13.5px */
  font-weight: var(--font-weight-semibold);
  line-height: 1.45;
  color: var(--incluido-ppfl-muted);
}

.incluido-ppfl__painel-valor-cifra {
  flex-shrink: 0;
  font-size: 1.625rem;                   /* 26px */
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-navy-deep);
}

/* Tabela de livros (painel da coleção) — os títulos e preços vêm do
   MESMO array `livros` do Material didático */
.incluido-ppfl__livros {
  margin: 24px 0 0;
  padding: 0;
}

.incluido-ppfl__livro {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--incluido-ppfl-border);
}

.incluido-ppfl__livro-titulo {
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--color-navy-soft);
}

.incluido-ppfl__livro-preco {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-extrabold);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--color-navy-deep);
}

.incluido-ppfl__livros-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 18px 0 0;
}

.incluido-ppfl__livros-total-rotulo {
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  color: var(--color-navy-deep);
}

.incluido-ppfl__livros-total-cifra {
  font-size: 1.5rem;                     /* 24px */
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-navy-deep);
}

/* Selo dos componentes exclusivos (painéis de mentoria e visita) +
   balão do "i" — mesmo mecanismo CSS-puro da 1ª geração, sem JS */
.incluido-ppfl__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 28px 0 0;
  padding: 9px 14px;
  border-radius: 100px;
  background-color: var(--incluido-ppfl-badge-bg);
}

.incluido-ppfl__badge-texto {
  font-size: 0.625rem;                   /* 10px */
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--incluido-ppfl-teal-text);
}

.incluido-ppfl__info-wrap {
  position: relative;
  display: inline-flex;
}

.incluido-ppfl__info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background-color: rgba(11, 123, 112, 0.18);
  font-family: inherit;
  font-size: 0.5625rem;                  /* 9px */
  line-height: 1;
  color: var(--incluido-ppfl-teal-text);
  cursor: pointer;
}

.incluido-ppfl__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 5;
  width: 252px;
  padding: 11px 13px;
  transform: translateX(-50%);
  border-radius: 12px;
  background-color: var(--color-navy-deep);
  font-size: 0.75rem;                    /* 12px */
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  color: var(--color-white);
  box-shadow: 0 16px 32px -14px rgba(41, 35, 92, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}

.incluido-ppfl__info:hover + .incluido-ppfl__tip,
.incluido-ppfl__info:focus-visible + .incluido-ppfl__tip {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}


/* ---------- Faixa de fecho (escura no mockup 2a) ---------- */
.incluido-ppfl__resumo {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  margin-top: 10.7px;
  padding: 24px 28px;
  border-radius: var(--incluido-ppfl-radius-lg);
  background-image: linear-gradient(120deg, var(--color-navy-deep) 0%, var(--color-indigo) 100%);
}

.incluido-ppfl__resumo-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
}

.incluido-ppfl__resumo-texto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.incluido-ppfl__resumo-titulo {
  margin: 0;
  font-size: 1.0625rem;                  /* 17px */
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  color: var(--color-white);
}

/* branco a 74% sobre o navy/índigo: 6.4:1 no ponto mais claro do
   degradê — AA com folga para 13.5px */
.incluido-ppfl__resumo-apoio {
  margin: 0;
  font-size: 0.84375rem;                 /* 13.5px */
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}

/* O valor citado no apoio sai do véu de 74% e vai a branco cheio */
.incluido-ppfl__resumo-apoio strong {
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-white);
}

.incluido-ppfl__nota {
  width: 100%;
  margin: 0;
  font-size: 0.6875rem;                  /* 11px */
  font-weight: var(--font-weight-regular);
  line-height: 17.6px;
  text-align: center;
  color: var(--incluido-ppfl-muted);
}


/* ---------- Divisor de fechamento ---------- */
/* Fecha o bloco "o que já vem incluído" antes do Investimento. A pílula
   central é a MESMA régua 56x4 do cabeçalho (`.incluido-ppfl__rule`), agora
   fechando a seção em vez de abrir; as hairlines somem nas pontas para a
   marca ficar como o centro de gravidade. Puramente decorativo — vai com
   `aria-hidden` na view, não há nada a anunciar. */
.incluido-ppfl__divisor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: var(--incluido-ppfl-divisor);
  /* 34px de respiro na divisa: 15.3px vêm do gap do container, 18.7px daqui */
  margin-top: 18.7px;
}

.incluido-ppfl__divisor::before,
.incluido-ppfl__divisor::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-image: linear-gradient(90deg, transparent 0%, var(--incluido-ppfl-divisa) 100%);
}

/* espelha o degradê à direita — as duas pontas somem, o meio encorpa */
.incluido-ppfl__divisor::after {
  transform: scaleX(-1);
}

.incluido-ppfl__divisor-marca {
  flex: 0 0 auto;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-magenta) 0%, var(--color-indigo) 100%);
}


/* ---------- Responsivo ---------- */

/* A coluna fixa de 352px só aperta o painel de verdade sob 992px:
   a lista vira uma grade 2x2 acima do painel */
@media (max-width: 991.98px) {
  .incluido-ppfl__abas {
    grid-template-columns: 1fr;
  }

  .incluido-ppfl__lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .incluido-ppfl__painel {
    min-height: 0;
  }
}

@media (max-width: 767.98px) {
  .incluido-ppfl {
    padding: 56px 0 56px;
  }

  .incluido-ppfl__topo {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .incluido-ppfl__valor {
    align-items: flex-start;
    text-align: left;
  }

  .incluido-ppfl__title {
    font-size: 2rem;                     /* 32px — mesmo degrau das irmãs */
    line-height: 1.2;
  }

  .incluido-ppfl__lead,
  .incluido-ppfl__intro {
    font-size: 1rem;
  }

  .incluido-ppfl__painel {
    padding: 28px 24px;
  }

  .incluido-ppfl__painel-titulo {
    font-size: 1.5rem;                   /* 24px */
  }

  .incluido-ppfl__painel-valor {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .incluido-ppfl__resumo {
    flex-direction: column;
    gap: 14px;
  }
}

@media (max-width: 575.98px) {
  .incluido-ppfl__title {
    font-size: 1.75rem;                  /* 28px */
  }

  .incluido-ppfl__lista {
    grid-template-columns: 1fr;
  }

  .incluido-ppfl__tip {
    width: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .incluido-ppfl__tab,
  .incluido-ppfl__painel,
  .incluido-ppfl__tip {
    transition-duration: 1ms;
  }
}


/* ============================================================ */
/* 11/13 — INVESTIMENTO E INSCRIÇÃO — sec-investimento*/
/* origem: sections/9-investimento.css                      */
/* ============================================================ */
/* ============================================================ */
/* SECTION: INVESTIMENTO E INSCRIÇÃO                           */
/* ============================================================ */
.investimento-ppfl {
  position: relative;
  overflow: hidden;
  padding: 87px 24px 94px;               /* sobras do frame de 1376px */
  /* Fecha a divisa com a seção 10: a arte de ondas do fundo só começa a
     8,61% da altura, então sem esta linha o topo da seção fica solto. */
  border-top: 1px solid var(--incluido-ppfl-divisa);
  background-color: var(--color-surface-page);
  font-family: var(--font-primary);
}

/* Arte de traços em onda — mesma tratativa de `sec-programa`: no Figma ela
   extravasa o frame, aqui cobre a seção inteira e acompanha a altura real. */
.investimento-ppfl__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Colocação do Figma: 111.19% da largura, deslocada 8.61% para baixo — é o que
   deixa o topo da seção limpo e joga as ondas para a metade de baixo. Com
   `height: auto` a proporção é a do arquivo, então nada distorce ao redimensionar. */
.investimento-ppfl__bg img {
  position: absolute;
  top: 8.61%;
  left: -5.61%;
  width: 111.19%;
  height: auto;
}

.investimento-ppfl__container {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: var(--investimento-ppfl-container);
  margin: 0 auto;
  padding-inline: var(--investimento-ppfl-gutter);
}


/* ============================================================ */
/* CABEÇALHO                                                   */
/* ============================================================ */
.investimento-ppfl__header {
  max-width: var(--investimento-ppfl-texto);
  margin: 0 auto;
  text-align: center;
}

.investimento-ppfl__title {
  margin: 0;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 48px;
  color: var(--color-navy-deep);
}

.investimento-ppfl__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 22px auto 0;
  background-color: var(--color-indigo);
}


/* ============================================================ */
/* LOTES                                                       */
/* ============================================================ */
.investimento-ppfl__lotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--investimento-ppfl-lote-gap);
  margin: 54px 0 0;
  padding: 0;
}

/* Com 1 ou 2 lotes as caixas mantêm a largura da coluna da grade de 3 e ficam centralizadas */
.investimento-ppfl__lotes--qtd-1 {
  grid-template-columns: 1fr;
  max-width: calc((100% - 2 * var(--investimento-ppfl-lote-gap)) / 3);
  margin-left: auto;
  margin-right: auto;
}

.investimento-ppfl__lotes--qtd-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: calc((100% - 2 * var(--investimento-ppfl-lote-gap)) / 3 * 2 + var(--investimento-ppfl-lote-gap));
  margin-left: auto;
  margin-right: auto;
}

.investimento-ppfl__lote {
  position: relative;
  box-sizing: border-box;
  min-height: 208px;
  padding: 32px var(--investimento-ppfl-lote-pad) 29px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--investimento-ppfl-radius);
  background-color: var(--color-white);
}

/* Lote vigente: contorno magenta + brilho de 3.1px do Figma */
.investimento-ppfl__lote--ativo {
  border-color: var(--color-magenta);
  box-shadow: 0 0 3.1px var(--color-magenta);
}

/* Lote fechado: o Figma pedia 46% de opacidade; ajustado pra 50%
   (pedido direto, 05/08/2026), mesmo valor aplicado em Indústria. */
.investimento-ppfl__lote--encerrado {
  opacity: 0.5;
}

.investimento-ppfl__lote-flag {
  position: absolute;
  top: -7px;
  left: 25px;
  padding: 5px 12px;
  border-radius: 100px;
  background-image: linear-gradient(90deg, var(--color-magenta) 0%, var(--color-indigo) 100%);
  font-size: 0.6375rem;                  /* 10.2px */
  font-weight: var(--font-weight-bold);
  line-height: 15.87px;
  text-transform: uppercase;
  color: var(--color-white);
}

.investimento-ppfl__lote-rotulo {
  margin: 0;
  font-size: 0.7rem;                     /* 11.2px */
  font-weight: var(--font-weight-regular);
  line-height: 17.36px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.investimento-ppfl__lote-preco {
  margin: 13px 0 0;
  font-size: 1.7rem;                     /* 27.2px */
  font-weight: var(--font-weight-black);
  line-height: 42.16px;
  color: var(--color-navy-deep);
}

.investimento-ppfl__lote-parcelas {
  margin: 1px 0 0;
  font-size: 0.8375rem;                  /* 13.4px */
  font-weight: var(--font-weight-regular);
  line-height: 20.83px;
  color: var(--color-text-muted);
}

.investimento-ppfl__lote-prazo {
  margin: 16px 0 0;
  padding-top: 15px;
  border-top: 1px dashed var(--color-border-soft);
  font-size: 0.78125rem;                 /* 12.5px */
  font-weight: var(--font-weight-regular);
  line-height: 19.34px;
  color: var(--color-text-muted);
}

.investimento-ppfl__lote-selo-encerrado {
  margin: 17px 0 0;
  height: 35px;
  background-color: var(--color-disabled);
  font-size: 1.5rem;                     /* 24px */
  font-weight: var(--font-weight-regular);
  line-height: 35px;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-white);
}


/* ============================================================ */
/* PRAZO FINAL · NOTA · CTA                                    */
/* ============================================================ */
/* Texto corrido de propósito: num contêiner flex/grid cada trecho de texto
   solto vira um item anônimo e a frase quebraria a cada `<strong>`, por mais
   larga que fosse a caixa. Só o alerta ganha linha própria (`display: block`);
   a caixa é centrada pelo respiro, que já casa com os 65px do Figma. */
.investimento-ppfl__prazo-final {
  box-sizing: border-box;
  display: block;
  min-height: 65px;
  max-width: var(--investimento-ppfl-prazo);
  margin: 33px auto 0;
  padding: 8px 26px 9px;
  border: 1px solid var(--color-magenta);
  border-radius: 43px;
  background-color: var(--color-white);
  box-shadow: inset 5px 4px 4px rgba(0, 0, 0, 0.25);
  font-size: 1rem;                       /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: 24.8px;
  text-align: center;
  color: var(--color-text-body);
}

.investimento-ppfl__prazo-final strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-magenta);
}

.investimento-ppfl__prazo-alerta {
  display: block;
}

.investimento-ppfl__nota {
  max-width: var(--investimento-ppfl-texto);
  margin: 12px auto 0;
  font-size: 0.78125rem;                 /* 12.5px */
  font-style: italic;
  font-weight: var(--font-weight-bold);
  line-height: 19.34px;
  text-align: center;
  color: var(--color-text-muted);
}

.investimento-ppfl__cta-wrap {
  margin-top: 24px;
  text-align: center;
}

.investimento-ppfl__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 232px;
  height: 39px;
  border-radius: 12px;
  background-color: var(--color-green);
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);
  font-size: 1.25rem;                    /* 20px */
  font-weight: var(--font-weight-bold);
  line-height: 23.31px;
  text-decoration: none;
  color: var(--color-white);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.investimento-ppfl__cta:hover,
.investimento-ppfl__cta:focus-visible {
  color: var(--color-white);
  filter: brightness(1.06);
  transform: translateY(-1px);
}


/* ============================================================ */
/* FORMAS DE PAGAMENTO                                         */
/* ============================================================ */
.investimento-ppfl__rule--pagamento {
  margin-top: 32px;
}

.investimento-ppfl__subtitulo {
  margin: 26px 0 0;
  font-size: 1.05rem;                    /* 16.8px */
  font-weight: var(--font-weight-extrabold);
  line-height: 26px;
  text-align: center;
  color: var(--color-navy-deep);
}

/* A pílula é um retângulo solto no Figma, atrás da fileira — aqui virou o
   próprio contêiner da lista, com o mesmo contorno e a sombra interna. */
.investimento-ppfl__pagamentos {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 32px;
  min-height: 42px;
  max-width: var(--investimento-ppfl-pilula);
  margin: 15px auto 0;
  padding: 6px 24px;
  border: 1px solid var(--color-magenta);
  border-radius: 26px;
  background-color: var(--color-white);
  box-shadow: inset 6px 4px 6.6px rgba(0, 0, 0, 0.25);
}

/* Item de texto corrido pelo mesmo motivo da caixa de prazo: em flex o rótulo
   e o "(até 6x sem juros)" virariam dois itens e o `gap` substituiria o espaço
   entre eles. O ponto é um `::before` inline. */
.investimento-ppfl__pagamento {
  font-size: 0.88125rem;                 /* 14.1px */
  font-weight: var(--font-weight-bold);
  line-height: 21.82px;
  color: var(--color-text-muted);
}

.investimento-ppfl__pagamento::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 4px;
  background-color: var(--color-teal);
  vertical-align: middle;
}

.investimento-ppfl__pagamento-obs {
  font-weight: var(--font-weight-regular);
}


/* ============================================================ */
/* QUADROS DO RODAPÉ                                           */
/* ============================================================ */
.investimento-ppfl__quadros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: 20px;
  max-width: var(--investimento-ppfl-quadros);
  margin: 44px auto 0;
}

.investimento-ppfl__quadro {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--investimento-ppfl-radius-lg);
  background-color: var(--color-white);
}

.investimento-ppfl__quadro-titulo {
  margin: 0;
  padding: 11.5px 22px 11.86px;
  background-image: linear-gradient(90deg, var(--color-magenta) 0%, var(--color-indigo) 100%);
  font-size: 1rem;                       /* 16px */
  font-weight: var(--font-weight-bold);
  line-height: 17.36px;
  text-transform: uppercase;
  color: var(--color-white);
}

.investimento-ppfl__quadro-corpo {
  flex: 1 1 auto;
  padding: 22px;
}


/* --- Como ingressar no programa --- */
.investimento-ppfl__passos {
  margin: 0;
  padding: 0;
}

.investimento-ppfl__passo {
  display: flex;
  gap: 12px;
  padding: 12px 0 13px;
  border-bottom: 1px solid var(--color-border-soft);
}

.investimento-ppfl__passo:last-child {
  padding-bottom: 12px;
  border-bottom: 0;
}

.investimento-ppfl__passo-num {
  flex: 0 0 auto;
  width: 19.2px;
  padding-top: 1px;
  font-size: 1rem;                       /* 16px */
  font-weight: var(--font-weight-bold);
  line-height: 21.82px;
  color: var(--color-magenta);
}

.investimento-ppfl__passo-texto {
  padding-top: 1px;
}

.investimento-ppfl__passo-titulo {
  margin: 0;
  font-size: 0.875rem;                   /* 14px */
  font-weight: var(--font-weight-bold);
  line-height: 21.82px;
  color: var(--color-navy-deep);
}

.investimento-ppfl__passo-titulo em {
  font-style: italic;
}

.investimento-ppfl__passo-desc {
  margin: 4.47px 0 0;
  font-size: 0.81875rem;                 /* 13.1px */
  font-weight: var(--font-weight-regular);
  line-height: 20.34px;
  color: var(--color-text-muted);
}


/* --- Avaliação e certificação --- */
/* O Figma abre este corpo 11px abaixo do cabeçalho (e não 22 como o quadro
   da esquerda) — é o que alinha o rodapé dos dois cards. */
.investimento-ppfl__quadro:last-child .investimento-ppfl__quadro-corpo {
  padding-top: 11px;
}

.investimento-ppfl__quadro-texto {
  margin: 0;
  font-size: 0.8625rem;                  /* 13.8px */
  font-weight: var(--font-weight-regular);
  line-height: 21.33px;
  color: var(--color-text-muted);
}

.investimento-ppfl__criterios-titulo {
  margin: 13px 0 0;
  font-size: 0.875rem;                   /* 14px */
  font-weight: var(--font-weight-bold);
  line-height: 17.86px;
  color: var(--color-text-body);
}

.investimento-ppfl__criterios {
  margin: 10px 0 0;
  padding: 0;
  font-size: 0.85rem;                    /* 13.6px */
  line-height: 21px;
  color: var(--color-text-muted);
}

.investimento-ppfl__criterios li {
  position: relative;
  padding: 4px 0 5.06px 20px;
}

.investimento-ppfl__criterios li::before {
  content: "✓";
  position: absolute;
  top: 4px;
  left: 0;
  font-weight: var(--font-weight-bold);
  line-height: 21px;
  color: var(--color-magenta);
}

.investimento-ppfl__certificado {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 124px;
  margin-top: 10px;
  padding: 11px 13px 13px 15px;          /* deixa 303px de texto, como no Figma */
  border: 1px dashed var(--color-border-soft);
  border-radius: 8px;
  background-color: var(--color-surface-page);
}

.investimento-ppfl__certificado-selo {
  flex: 0 0 auto;
  width: 68px;
  height: auto;
}

.investimento-ppfl__certificado-titulo {
  margin: 0;
  font-size: 0.75rem;                    /* 12px */
  font-weight: var(--font-weight-bold);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-text-body);
}

.investimento-ppfl__certificado-titulo span {
  color: var(--color-magenta);
}

.investimento-ppfl__certificado-desc {
  margin: 4px 0 0;
  font-size: 0.6875rem;                  /* 11px */
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--color-text-body);
}

.investimento-ppfl__certificado-desc strong {
  font-weight: var(--font-weight-bold);
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 991.98px) {
  .investimento-ppfl {
    padding: 72px 24px 76px;
  }

  .investimento-ppfl__container {
    padding-inline: 0;
  }

  /* Empilhada, a seção fica alta demais para a arte amarrada à largura:
     abaixo daqui ela volta a cobrir a caixa inteira. */
  .investimento-ppfl__bg img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .investimento-ppfl__lotes {
    gap: 16px;
    margin-top: 44px;
  }

  .investimento-ppfl__lote {
    padding: 28px 22px 26px;
  }

  /* Lado a lado os dois quadros ficariam com ~330px: empilhar */
  .investimento-ppfl__quadros {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-top: 36px;
  }
}

@media (max-width: 767.98px) {
  .investimento-ppfl {
    padding: 56px 16px 60px;
  }

  .investimento-ppfl__title {
    font-size: 1.75rem;                  /* 28px */
    line-height: 34px;
  }

  /* Abaixo de 768 o preço de 27.2px não cabe em 3 colunas */
  .investimento-ppfl__lotes {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 36px auto 0;
    gap: 20px;
  }

  .investimento-ppfl__prazo-final {
    border-radius: 24px;
    padding: 12px 20px;
  }

  .investimento-ppfl__pagamentos {
    gap: 8px 24px;
    border-radius: 20px;
    padding: 12px 20px;
  }

  .investimento-ppfl__quadros {
    margin-top: 32px;
  }
}

@media (max-width: 575.98px) {
  .investimento-ppfl__cta {
    width: 100%;
    max-width: 280px;
  }

  /* A fileira de pagamentos vira coluna: a pílula perde o formato de cápsula */
  .investimento-ppfl__pagamentos {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 16px;
  }

  .investimento-ppfl__quadro-corpo {
    padding: 18px;
  }

  .investimento-ppfl__quadro:last-child .investimento-ppfl__quadro-corpo {
    padding-top: 12px;
  }

  /* O selo acima do texto: lado a lado sobram ~150px para a descrição */
  .investimento-ppfl__certificado {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .investimento-ppfl__cta {
    transition-duration: 1ms;
  }

  .investimento-ppfl__cta:hover,
  .investimento-ppfl__cta:focus-visible {
    transform: none;
  }
}


/* ============================================================ */
/* 12/13 — CONTINUE EXPLORANDO — sec-continue*/
/* origem: sections/11-continue.css                         */
/* ============================================================ */
/* ============================================================ */
/* SECTION: CONTINUE                                           */
/* ============================================================ */
.continue-ppfl {
  position: relative;
  padding: 51px 24px 118px;
  background-color: var(--continue-ppfl-lilac-bg);
  font-family: var(--font-primary);
}

.continue-ppfl__container {
  box-sizing: border-box;
  max-width: var(--continue-ppfl-container);
  margin: 0 auto;
  padding-inline: var(--continue-ppfl-gutter);
}


/* --- Cabeçalho: título e régua índigo --- */
.continue-ppfl__header {
  text-align: center;
}

/* Os 680px são o que produz a quebra depois de "ecossistema de" */
.continue-ppfl__title {
  max-width: 680px;
  margin: 0 auto;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 48px;
  color: var(--color-navy-deep);
}

.continue-ppfl__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 52px auto 0;
  background-color: var(--color-indigo);
}


/* ============================================================ */
/* CARDS                                                       */
/* ============================================================ */
/* A fileira é MAIS LARGA que o contêiner do texto (1180 contra 1080) e
   fica fora dele — no Figma ela é posicionada em x: -64.5 dentro da
   Section de 1080, ou seja, centrada e transbordando 50px de cada lado. */
.continue-ppfl__cards {
  display: flex;
  gap: var(--continue-ppfl-card-gap);
  height: var(--continue-ppfl-card-height);
  max-width: var(--continue-ppfl-cards);
  margin: 52px auto 0;
  padding: 0;
}

/* A expansão é só o flex-grow: base 0 + razão 533/321 do Figma.
   Não há troca de largura fixa, então o trio sempre preenche a fileira. */
.continue-ppfl__card {
  position: relative;
  flex: var(--continue-ppfl-grow-closed) 1 0;
  min-width: 0;
  min-height: 0;
  border-radius: var(--continue-ppfl-radius);
  overflow: hidden;
  transition: flex-grow var(--continue-ppfl-dur) var(--continue-ppfl-ease);
}

.continue-ppfl__card.is-open {
  flex-grow: var(--continue-ppfl-grow-open);
}


/* --- Camadas de arte ---------------------------------------- */
/* isolation confina o mix-blend-mode da foto ao próprio card */
.continue-ppfl__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}

.continue-ppfl__art::before {
  content: '';
  position: absolute;
  inset: 0;
}

/* object-fit: cover em cima da caixa do Figma: nas medidas do design a
   caixa já tem a proporção da foto (recorte idêntico ao arquivo), e o
   cover é o que impede o esticão quando o card abre e muda de largura. */
.continue-ppfl__photo {
  position: absolute;
  max-width: none;
  object-fit: cover;
}


/* Card 1 — Formação Lean Indústria: laranja por cima do véu escuro e do
   degradê teal → violeta da base, com a foto a 18%.
   O laranja chapado de 16% é COLOR-BURN: o MCP entrega só a cor e a
   opacidade da camada, o modo de mesclagem se perde na conversão. Com
   `normal` o card sai 15/255 mais verde que o render de referência; com
   color-burn os canais R e G batem em toda a arte (medido no verify). */
.continue-ppfl__card--industria .continue-ppfl__art::before {
  background-image:
    linear-gradient(rgba(255, 128, 0, .16), rgba(255, 128, 0, .16)),
    linear-gradient(22.36deg, var(--color-accent) 11.64%, rgba(255, 147, 38, .72) 75.66%, rgba(255, 255, 255, .56) 105.67%),
    linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .1) 45%),
    linear-gradient(159.54deg, var(--color-teal) 0%, var(--color-violet) 100%);
  background-blend-mode: color-burn, normal, normal, normal;
}

.continue-ppfl__card--industria .continue-ppfl__photo {
  top: -21.04%;
  left: -10.9%;
  width: 124.69%;
  height: 125.03%;
  opacity: .18;
}

/* Card 2 — Agenda: navy → índigo, escurecedor de base e véu escuro, com a
   foto em soft-light por cima (ordem de camadas do Figma). */
.continue-ppfl__card--agenda .continue-ppfl__art::before {
  background-image:
    linear-gradient(236.86deg, rgba(103, 83, 96, .84) 3.93%, rgba(1, 0, 7, .84) 98.44%),
    linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .1) 45%),
    linear-gradient(159.95deg, var(--color-navy-deep) 0%, var(--color-indigo) 100%);
}

/* height/top em % é o que faz a foto terminar a ~80% da altura do card
   (a faixa escura da base do frame) em qualquer largura. */
.continue-ppfl__card--agenda .continue-ppfl__photo {
  top: -26.63%;
  left: 0;
  width: 129.2%;
  height: 106.6%;
  opacity: .61;
  mix-blend-mode: soft-light;
}

/* Card 3 — LeanLearning: o degradê âmbar → preto é opaco; o fundo teal →
   violeta e o SVG decorativo que o Figma põe abaixo dele são camadas
   mortas (nunca aparecem no render) e não foram implementados. */
.continue-ppfl__card--leanlearning .continue-ppfl__art::before {
  background-image:
    linear-gradient(145.22deg, var(--color-amber) 1.85%, #000000 53.48%);
}

.continue-ppfl__card--leanlearning .continue-ppfl__photo {
  top: 0;
  left: -102.42%;
  width: 229.33%;
  height: 100%;
  opacity: .27;
}


/* --- Logo: cada marca mantém a métrica do seu lockup --------- */
.continue-ppfl__logo {
  position: absolute;
  display: block;
}

.continue-ppfl__card--industria .continue-ppfl__logo,
.continue-ppfl__card--agenda .continue-ppfl__logo {
  top: 34px;
  left: 34px;
  width: 52.46px;
  height: 39.16px;
}

.continue-ppfl__card--leanlearning .continue-ppfl__logo {
  top: 15px;
  left: 17px;
  width: 95px;
  height: 61px;
}


/* --- Corpo: ancorado na base, cresce para cima --------------- */
/* Por isso a altura de 480px não muda quando o card abre. */
.continue-ppfl__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: var(--continue-ppfl-pad);
  gap: 4px;
  transition: gap var(--continue-ppfl-dur) var(--continue-ppfl-ease);
}

/* 13px, e não os 24 da sanfona irmã da PPFL Geral: aqui o texto de apoio do
   card aberto ocupa 3 linhas (309px de caixa), então o Figma fecha o vão
   entre o título e o apoio para caber a mesma pilha em 480px. */
.continue-ppfl__card.is-open .continue-ppfl__body {
  gap: 13px;
}

/* No Figma a caixa do título vai do recuo de 34px até a BORDA do card (287px
   num card de 321) — é ela que segura "Formação Lean Indústria" numa linha
   só. O recuo à direita vale para o texto de apoio, não para o título. */
.continue-ppfl__card-title {
  margin: 0 calc(var(--continue-ppfl-pad) * -1) 0 0;
  align-self: stretch;
}

/* O título é o gatilho do disclosure; o ::before estende o clique ao card
   inteiro, inclusive à área da foto. */
.continue-ppfl__trigger {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-white);
  font-family: inherit;
  font-size: 1.5rem;                     /* 24px — fechado */
  font-weight: var(--font-weight-black);
  line-height: 26px;
  text-align: left;
  cursor: pointer;
  transition:
    font-size   var(--continue-ppfl-dur) var(--continue-ppfl-ease),
    line-height var(--continue-ppfl-dur) var(--continue-ppfl-ease);
}

.continue-ppfl__trigger::before {
  content: '';
  position: absolute;
  inset: 0;
}

.continue-ppfl__card.is-open .continue-ppfl__trigger {
  font-size: 2.25rem;                    /* 36px — aberto */
  line-height: 32.24px;
}

.continue-ppfl__trigger:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 4px;
}

/* As larguras das caixas de texto são o que reproduz as quebras do design */
.continue-ppfl__desc {
  margin: 0;
  max-width: 226px;                      /* fechado */
  color: var(--color-white);
  font-size: .75rem;                     /* 12px */
  font-weight: var(--font-weight-regular);
  line-height: 14px;
  transition:
    font-size   var(--continue-ppfl-dur) var(--continue-ppfl-ease),
    line-height var(--continue-ppfl-dur) var(--continue-ppfl-ease),
    max-width   var(--continue-ppfl-dur) var(--continue-ppfl-ease);
}

.continue-ppfl__card--industria .continue-ppfl__desc {
  max-width: 198px;
}

.continue-ppfl__desc em {
  font-style: italic;
  font-weight: 300;
}

.continue-ppfl__card.is-open .continue-ppfl__desc,
.continue-ppfl__card--industria.is-open .continue-ppfl__desc {
  max-width: 309px;
  font-size: 1rem;                       /* 16px */
  line-height: 21.82px;
}


/* --- Painel do CTA: sai do fluxo quando fechado -------------- */
/* height: 0 (e não só opacity) — senão o texto do card fechado ficaria
   45px acima da posição do Figma. visibility tira o link da árvore de
   acessibilidade enquanto o card está recolhido. */
/* margin-top negativo = o `gap` de 4px que o painel de altura zero ainda
   cobra do flex fechado. Sem ele o texto de apoio para 4px acima do recuo
   de 34 do Figma. */
.continue-ppfl__panel {
  height: 0;
  margin-top: -4px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    height     var(--continue-ppfl-dur) var(--continue-ppfl-ease),
    margin-top var(--continue-ppfl-dur) var(--continue-ppfl-ease),
    opacity    var(--continue-ppfl-dur) var(--continue-ppfl-ease),
    transform  var(--continue-ppfl-dur) var(--continue-ppfl-ease),
    visibility 0s linear var(--continue-ppfl-dur);
}

.continue-ppfl__card.is-open .continue-ppfl__panel {
  height: 45px;                          /* 12 + 20.83 + 12 */
  margin-top: 12px;                      /* 24 do gap + 12 = 36 do Figma */
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    height     var(--continue-ppfl-dur) var(--continue-ppfl-ease),
    margin-top var(--continue-ppfl-dur) var(--continue-ppfl-ease),
    opacity    var(--continue-ppfl-dur) var(--continue-ppfl-ease),
    transform  var(--continue-ppfl-dur) var(--continue-ppfl-ease),
    visibility 0s;
}

/* z-index acima do ::before do gatilho, senão o link não recebe o clique */
.continue-ppfl__cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 12px 22px;
  border-radius: 10px;
  background-color: var(--color-white);
  color: var(--color-navy-deep);
  font-size: .8375rem;                   /* 13.4px */
  font-weight: var(--font-weight-bold);
  line-height: 20.83px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}

.continue-ppfl__cta:hover,
.continue-ppfl__cta:focus-visible {
  background-color: #f2f1fa;
  color: var(--color-navy-deep);
}

.continue-ppfl__cta:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 3px;
}

.continue-ppfl__cta-arrow {
  display: inline-block;
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */

/* Empilha: os mesmos flex-grow passam a distribuir a altura
   (aberto ~355px, fechado ~213px). A sanfona continua valendo. */
@media (max-width: 991.98px) {
  .continue-ppfl__cards {
    flex-direction: column;
    height: 790px;
    max-width: 560px;
  }

  .continue-ppfl__desc,
  .continue-ppfl__card--industria .continue-ppfl__desc,
  .continue-ppfl__card.is-open .continue-ppfl__desc {
    max-width: 46ch;
  }

  .continue-ppfl__card--industria .continue-ppfl__photo,
  .continue-ppfl__card--agenda .continue-ppfl__photo,
  .continue-ppfl__card--leanlearning .continue-ppfl__photo {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .continue-ppfl__card--agenda .continue-ppfl__photo {
    object-position: 50% 30%;
  }

  .continue-ppfl__card--leanlearning .continue-ppfl__photo {
    object-position: 66% center;
  }
}

@media (max-width: 767.98px) {
  .continue-ppfl {
    padding: 40px 16px 64px;
  }

  .continue-ppfl__container {
    padding-inline: 0;
  }

  .continue-ppfl__title {
    font-size: 1.75rem;                  /* 28px */
    line-height: 34px;
  }

  .continue-ppfl__rule {
    margin-top: 32px;
  }

  .continue-ppfl__cards {
    height: 720px;
    margin-top: 32px;
  }

  .continue-ppfl__body {
    padding: 24px;
  }

  .continue-ppfl__trigger {
    font-size: 1.25rem;                  /* 20px */
    line-height: 24px;
  }

  .continue-ppfl__card.is-open .continue-ppfl__trigger {
    font-size: 1.625rem;                 /* 26px */
    line-height: 30px;
  }

  .continue-ppfl__card.is-open .continue-ppfl__desc {
    font-size: .9375rem;                 /* 15px */
    line-height: 20px;
  }

  .continue-ppfl__card--industria .continue-ppfl__logo,
  .continue-ppfl__card--agenda .continue-ppfl__logo {
    top: 24px;
    left: 24px;
  }

  .continue-ppfl__card--leanlearning .continue-ppfl__logo {
    top: 12px;
    left: 14px;
    width: 78px;
    height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .continue-ppfl__card,
  .continue-ppfl__body,
  .continue-ppfl__trigger,
  .continue-ppfl__desc,
  .continue-ppfl__panel,
  .continue-ppfl__cta {
    transition-duration: 1ms;
  }
}


/* ============================================================ */
/* 13/13 — ASIDE DE INSCRIÇÃO — Aside 2521:1831*/
/* origem: sections/12-aside.css                            */
/* ============================================================ */
/* ============================================================ */
/* SECTION: ASIDE DE INSCRIÇÃO                                 */
/* ============================================================ */
/* `fixed` + `top: 50%` com `translateY(-50%)`: como a altura entra na
   conta a cada quadro, o card continua centrado na tela enquanto abre —
   ele cresce para os dois lados, e não só para baixo. */
.aside-ppfl {
  position: fixed;
  top: 50%;
  right: var(--aside-ppfl-inset);
  z-index: var(--aside-ppfl-z);
  /* Fechado: só a largura do texto + chevron (nada de faixa vazia); aberto: a largura do card (abaixo). */
  width: max-content;
  max-width: var(--aside-ppfl-width);
  font-family: var(--font-primary);

  /* estado de partida: fora da tela, à direita. Sem JS ele fica assim —
     o mesmo conteúdo já está no hero e na seção de investimento. */
  opacity: 0;
  visibility: hidden;
  transform: translate(calc(100% + var(--aside-ppfl-inset)), -50%);
  transition: transform 0.4s ease, opacity 0.3s ease, visibility 0s linear 0.4s;
}

.aside-ppfl.is-open {
  width: var(--aside-ppfl-width);
}

/* Fechado, o corpo não pode "puxar" a largura: ele só conta quando aberto. */
.aside-ppfl:not(.is-open) .aside-ppfl__corpo {
  width: 0;
}

/* Entra quando o hero termina de sair da tela (`12-aside.js`) */
.aside-ppfl.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition: transform 0.4s ease, opacity 0.3s ease, visibility 0s linear 0s;
}

/* `overflow: hidden` faz o gradiente respeitar o raio e recorta o corpo
   enquanto ele abre. A borda só existe aberto: fechado, o gradiente vai
   até a borda da faixa, como no export. */
.aside-ppfl__card {
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--aside-ppfl-radius);
  background-color: var(--color-white);
  box-shadow: 0 24px 48px -32px rgba(41, 35, 92, 0.25);
  transition: border-radius 0.32s ease, border-color 0.32s ease;
}

.aside-ppfl.is-open .aside-ppfl__card {
  border-color: var(--color-border-soft);
  border-radius: var(--aside-ppfl-radius-open);
}


/* --- Cabeçalho (é a faixa inteira quando fechado) --- */
.aside-ppfl__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--aside-ppfl-head-height);
  padding: 9px 26px 9px 20px;
  border: 0;
  background-image: linear-gradient(to right, var(--color-magenta), var(--color-indigo));
  font-family: inherit;
  font-size: 0.9rem;                      /* 14.4px */
  line-height: 1.3;
  color: var(--color-white);
  text-align: left;
  cursor: pointer;
}

/* Duas linhas: a chamada ("Inscreva-se" / "Fale com a nossa equipe") em cima e a turma embaixo, em letra leve. */
.aside-ppfl__toggle-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.aside-ppfl__toggle-texto strong {
  font-weight: var(--font-weight-bold);
}

.aside-ppfl__toggle-turma {
  font-size: 0.8rem;                      /* 12.8px */
  font-weight: var(--font-weight-light);
  opacity: 0.92;
}

/* 22px de caixa renderizam o glifo a 11 × 5,5 — a medida do export */
.aside-ppfl__chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  transition: transform 0.32s ease;
}

.aside-ppfl.is-open .aside-ppfl__chevron {
  transform: rotate(180deg);
}


/* --- Corpo: "Resumo técnico" ---
   `grid-template-rows: 0fr → 1fr` anima a altura sem precisar saber o
   valor final; onde não houver suporte, vira um liga-desliga seco. */
.aside-ppfl__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}

.aside-ppfl.is-open .aside-ppfl__corpo {
  grid-template-rows: 1fr;
}

.aside-ppfl__corpo-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 26px;
}

.aside-ppfl.is-open .aside-ppfl__corpo-inner {
  padding-bottom: 12px;
}

.aside-ppfl__title {
  margin: 9px 0 18px;
  font-size: 0.7rem;                      /* 11.2px */
  font-weight: var(--font-weight-bold);
  line-height: 17.36px;
  text-transform: uppercase;
  color: var(--color-magenta);
}

.aside-ppfl__specs {
  margin: 0;
  padding: 0;
}

.aside-ppfl__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 13px;
  border-bottom: 1px dashed var(--color-border-soft);
}

.aside-ppfl__spec dt {
  font-size: 0.881rem;                    /* 14.1px */
  font-weight: var(--font-weight-regular);
  line-height: 21.82px;
  color: var(--color-navy-soft);
}

.aside-ppfl__spec dd {
  margin: 0;
  font-size: 0.881rem;                    /* 14.1px */
  font-weight: var(--font-weight-bold);
  line-height: 21.82px;
  text-align: right;
  color: var(--color-navy-deep);
}

.aside-ppfl__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 13px 26px 14.33px;
  border-radius: 10px;
  background-color: var(--color-green);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.65);
  font-size: 0.9rem;                      /* 14.4px */
  font-weight: var(--font-weight-bold);
  line-height: 22.32px;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s;
}

.aside-ppfl__cta:hover {
  background-color: var(--color-green-dark);
  color: var(--color-white);
}

.aside-ppfl__share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12.68px;
  padding: 13px;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  background-color: var(--color-white);
  font-family: inherit;
  font-size: 0.863rem;                    /* 13.8px */
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-deep);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.aside-ppfl__share:hover {
  border-color: var(--color-navy-soft);
  background-color: var(--color-page-bg);
}

.aside-ppfl__share img {
  width: 24px;
  height: 23px;
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
/* Abaixo de 768 o card de 291px cobriria quase a tela inteira, e a seção
   de investimento já traz os mesmos CTAs logo abaixo. */
@media (max-width: 767.98px) {
  .aside-ppfl {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aside-ppfl,
  .aside-ppfl__card,
  .aside-ppfl__corpo,
  .aside-ppfl__chevron {
    transition: none;
  }
}


/* ============================================================ */
/* FAQ — tema do modulo padrao do projeto (faq-module.css)      */
/* Contrato da skill: a pagina so sobrescreve os 4 tokens        */
/* --faq-* na propria section; o resto vem do modulo global.     */
/* A secao de duvidas NAO existe no mockup — ela entra aqui      */
/* porque o menu de ancoras ja aponta para `#duvidas` e o        */
/* briefing (SERV.docx) traz as 13 perguntas.                    */
/* ============================================================ */
.ppfl-servicos-faq {
  --faq-bg: var(--color-page-bg, #f5f6fa);
  --faq-title-color: var(--color-navy-deep, #29235c);
  --faq-text-color: var(--color-navy-soft, #5b5880);
  --faq-accent: var(--color-magenta, #cb6ce6);
}

/* A faixa de ancoras e sticky: o item da FAQ precisa da mesma
   folga de rolagem que as demais secoes da pagina. */
.ppfl-servicos-faq .faq-module__item {
  scroll-margin-top: calc(var(--menu-ppfl-height, 86px) + 24px);
}


/* ============================================================ */
/* MOTION — camada de entrada (skill leanweb-ui-standardizer)   */
/* O reveal em si vem de reveal-animations.css (global) e e     */
/* marcado por programaFormacaoLeanServicos.anim.js. Aqui ficam */
/* so o preload da 1a dobra, o parallax do hero, o              */
/* focus-visible e o contrato mg-btn.                           */
/* ============================================================ */

/* --- Preload da 1a/2a dobra ---------------------------------
   Sem isto o hero aparece pintado por um frame antes de o modulo
   marcar .reveal (opacity:0) — o "flash" que a skill manda evitar.
   O anim.js remove a classe em requestAnimationFrame. */
.ppfl-servicos-page--preload .hero-servicos__title,
.ppfl-servicos-page--preload .hero-servicos__subtitle,
.ppfl-servicos-page--preload .hero-servicos__rule,
.ppfl-servicos-page--preload .hero-servicos__actions,
.ppfl-servicos-page--preload .hero-servicos__resumo,
.ppfl-servicos-page--preload .porque-ppfl__title,
.ppfl-servicos-page--preload .porque-ppfl__lead,
.ppfl-servicos-page--preload .porque-ppfl__rule,
.ppfl-servicos-page--preload .porque-ppfl__video-card {
  opacity: 0;
}

/* --- Parallax do fundo do hero ------------------------------
   Move a <img> dentro do .hero-servicos__bg-photo (que ja tem
   overflow:hidden para recortar). O scale evita borda aparecendo
   nos extremos do movimento. O container usa opacity/filter para
   compor a arte — por isso o transform vai na <img>, nao nele. */
@media (hover: hover) and (pointer: fine) {
  .hero-servicos__bg-photo img {
    transform:
      translate3d(var(--hero-parallax-x, 0px), var(--hero-parallax-y, 0px), 0)
      scale(1.06);
    transition: transform 0.25s ease-out;
    will-change: transform;
  }
}

/* --- focus-visible dos CTAs (checklist de a11y da skill) ----
   O motion nao pode depender so de hover: quem navega por teclado
   precisa do mesmo destaque. Acento da pagina = magenta. */
.ppfl-servicos-page .btn-hero:focus-visible,
.ppfl-servicos-page .hero-servicos__cta:focus-visible,
.ppfl-servicos-page .hero-servicos__share:focus-visible,
.ppfl-servicos-page .menu-ppfl__link:focus-visible,
.ppfl-servicos-page .porque-ppfl__player-btn:focus-visible,
.ppfl-servicos-page .programa-ppfl__cta:focus-visible,
.ppfl-servicos-page .cert-ppfl__tab:focus-visible,
.ppfl-servicos-page .cert-ppfl__cta:focus-visible,
.ppfl-servicos-page .depoimentos-ppfl__arrow:focus-visible,
.ppfl-servicos-page .depoimentos-ppfl__dot:focus-visible,
.ppfl-servicos-page .investimento-ppfl__cta:focus-visible,
.ppfl-servicos-page .continue-ppfl__trigger:focus-visible,
.ppfl-servicos-page .continue-ppfl__cta:focus-visible,
.aside-ppfl .aside-ppfl__toggle:focus-visible,
.aside-ppfl .aside-ppfl__cta:focus-visible,
.aside-ppfl .aside-ppfl__share:focus-visible {
  outline: 3px solid rgba(203, 108, 230, 0.7);
  outline-offset: 2px;
}

/* --- reduced-motion ----------------------------------------
   O contrato do .reveal ja se desliga sozinho; aqui cobrimos o que
   e exclusivo desta pagina (preload e parallax). */
@media (prefers-reduced-motion: reduce) {
  .ppfl-servicos-page--preload .hero-servicos__title,
  .ppfl-servicos-page--preload .hero-servicos__subtitle,
  .ppfl-servicos-page--preload .hero-servicos__rule,
  .ppfl-servicos-page--preload .hero-servicos__actions,
  .ppfl-servicos-page--preload .hero-servicos__resumo,
  .ppfl-servicos-page--preload .porque-ppfl__title,
  .ppfl-servicos-page--preload .porque-ppfl__lead,
  .ppfl-servicos-page--preload .porque-ppfl__rule,
  .ppfl-servicos-page--preload .porque-ppfl__video-card {
    opacity: 1;
  }

  .hero-servicos__bg-photo img {
    transform: none;
    transition: none;
  }
}


/* ============================================================ */
/* SLIDE-UP (mg-btn) — contrato portado da AgendaTreinamento    */
/* O texto (e o icone) sobem no hover/focus revelando uma 2a    */
/* copia. O upgrade do markup e feito por initMgButtons.        */
/* Escopado a pagina para nao vazar (a Academia usa global).    */
/* ============================================================ */
.ppfl-servicos-page,
.aside-ppfl {
  --mg-btn-swap-duration: 0.7s;   /* mesma velocidade da pagina irma */
}

.ppfl-servicos-page .mg-btn,
.aside-ppfl .mg-btn { position: relative; }
.ppfl-servicos-page .mg-btn__inner,
.aside-ppfl .mg-btn__inner { display: inline-flex; align-items: center; gap: 10px; }
.ppfl-servicos-page .mg-btn__swap,
.aside-ppfl .mg-btn__swap { position: relative; display: inline-grid; overflow: hidden; }
.ppfl-servicos-page .mg-btn__swap-text,
.aside-ppfl .mg-btn__swap-text {
  grid-area: 1 / 1;
  transition: transform var(--mg-btn-swap-duration, .42s) cubic-bezier(.2, .7, .2, 1);
}
.ppfl-servicos-page .mg-btn__swap-text.is-absolute,
.aside-ppfl .mg-btn__swap-text.is-absolute { position: absolute; inset: 0; transform: translate3d(0, 130%, 0); }
.ppfl-servicos-page .mg-btn:hover .mg-btn__swap-text.is-absolute,
.ppfl-servicos-page .mg-btn:focus-visible .mg-btn__swap-text.is-absolute,
.aside-ppfl .mg-btn:hover .mg-btn__swap-text.is-absolute,
.aside-ppfl .mg-btn:focus-visible .mg-btn__swap-text.is-absolute { transform: translate3d(0, 0, 0); }
.ppfl-servicos-page .mg-btn:hover .mg-btn__swap-text.is-relative,
.ppfl-servicos-page .mg-btn:focus-visible .mg-btn__swap-text.is-relative,
.aside-ppfl .mg-btn:hover .mg-btn__swap-text.is-relative,
.aside-ppfl .mg-btn:focus-visible .mg-btn__swap-text.is-relative { transform: translate3d(0, -130%, 0); }
.ppfl-servicos-page .mg-btn__icon,
.aside-ppfl .mg-btn__icon { grid-area: 1 / 1; display: grid; place-items: center; transition: transform var(--mg-btn-swap-duration, .42s) cubic-bezier(.2, .7, .2, 1); }
.ppfl-servicos-page .mg-btn__icon.is-absolute,
.aside-ppfl .mg-btn__icon.is-absolute { position: absolute; inset: 0; transform: translate3d(0, 130%, 0); }
.ppfl-servicos-page .mg-btn:hover .mg-btn__icon.is-absolute,
.ppfl-servicos-page .mg-btn:focus-visible .mg-btn__icon.is-absolute,
.aside-ppfl .mg-btn:hover .mg-btn__icon.is-absolute,
.aside-ppfl .mg-btn:focus-visible .mg-btn__icon.is-absolute { transform: translate3d(0, 0, 0); }
.ppfl-servicos-page .mg-btn:hover .mg-btn__icon.is-relative,
.ppfl-servicos-page .mg-btn:focus-visible .mg-btn__icon.is-relative,
.aside-ppfl .mg-btn:hover .mg-btn__icon.is-relative,
.aside-ppfl .mg-btn:focus-visible .mg-btn__icon.is-relative { transform: translate3d(0, -130%, 0); }
.ppfl-servicos-page .mg-btn__icon-wrap,
.aside-ppfl .mg-btn__icon-wrap { width: var(--mg-icon-size, 16px); height: var(--mg-icon-size, 16px); }
.ppfl-servicos-page .mg-btn__icon svg,
.aside-ppfl .mg-btn__icon svg { width: 100%; height: 100%; display: block; }

/* Sem animacao de swap em reduced-motion: trava no estado de repouso. */
@media (prefers-reduced-motion: reduce) {
  .ppfl-servicos-page .mg-btn__swap-text,
  .ppfl-servicos-page .mg-btn__icon,
  .aside-ppfl .mg-btn__swap-text,
  .aside-ppfl .mg-btn__icon { transition: none; }
  .ppfl-servicos-page .mg-btn:hover .mg-btn__swap-text.is-absolute,
  .ppfl-servicos-page .mg-btn:focus-visible .mg-btn__swap-text.is-absolute,
  .ppfl-servicos-page .mg-btn:hover .mg-btn__icon.is-absolute,
  .ppfl-servicos-page .mg-btn:focus-visible .mg-btn__icon.is-absolute,
  .aside-ppfl .mg-btn:hover .mg-btn__swap-text.is-absolute,
  .aside-ppfl .mg-btn:focus-visible .mg-btn__swap-text.is-absolute,
  .aside-ppfl .mg-btn:hover .mg-btn__icon.is-absolute,
  .aside-ppfl .mg-btn:focus-visible .mg-btn__icon.is-absolute { transform: translate3d(0, 130%, 0); }
  .ppfl-servicos-page .mg-btn:hover .mg-btn__swap-text.is-relative,
  .ppfl-servicos-page .mg-btn:focus-visible .mg-btn__swap-text.is-relative,
  .ppfl-servicos-page .mg-btn:hover .mg-btn__icon.is-relative,
  .ppfl-servicos-page .mg-btn:focus-visible .mg-btn__icon.is-relative,
  .aside-ppfl .mg-btn:hover .mg-btn__swap-text.is-relative,
  .aside-ppfl .mg-btn:focus-visible .mg-btn__swap-text.is-relative,
  .aside-ppfl .mg-btn:hover .mg-btn__icon.is-relative,
  .aside-ppfl .mg-btn:focus-visible .mg-btn__icon.is-relative { transform: translate3d(0, 0, 0); }
}


/* ============================================================ */
/* AJUSTES DO LEANWEB SOBRE O MERGE                             */
/* Ficam aqui, e nao dentro dos blocos das secoes, para nao      */
/* serem perdidos quando o mockup for re-mergeado.               */
/* ============================================================ */

/* CTA de inscricao: no Figma o botao e 232x39 com "Inscreva-se".
   Na pagina ele tambem assume os estados de fallback ("Entrar na
   lista de espera", "Quero saber da proxima turma"), que nao cabem
   numa caixa fixa. Vira piso em vez de medida travada — com o
   rotulo do design o resultado e exatamente o mesmo 232x39 — e
   ganha o reset de <button>, porque o estado de lista de espera
   abre modal em vez de navegar. */
.ppfl-servicos-page .investimento-ppfl__cta {
  width: auto;
  min-width: 232px;
  height: auto;
  min-height: 39px;
  padding: 6px 24px;
  text-align: center;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}


/* ============================================================ */
/* HOVER — material · certificacoes · depoimentos               */
/* ------------------------------------------------------------ */
/* Padrao da casa (leanweb-ui-standardizer): lift + zoom na       */
/* imagem, com o recorte SEMPRE no conteiner (nunca na <img>),    */
/* transicao unica no card para nao brigar com o `.reveal`, e     */
/* `focus-within` + `prefers-reduced-motion` em tudo.             */
/* ============================================================ */

/* --- Material: capas dos livros ---------------------------- */
/* O `.material-ppfl__book` ja e `overflow: hidden` + raio 14, entao
   ele mesmo recorta o zoom da capa. A legenda fica parada: quem
   escala e so a <img>, nao o card. A transicao repete o `opacity
   0.65s` do reveal para as duas coisas conviverem numa declaracao so. */
.ppfl-servicos-page .material-ppfl__book {
  transition:
    opacity 0.65s ease,
    transform 0.45s cubic-bezier(.2, .7, .2, 1),
    box-shadow 0.45s ease;
}

.ppfl-servicos-page .material-ppfl__cover {
  transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}

/* --- Material: card da plataforma LeanLearning -------------- */
/* O painel navy nao recortava nada: a foto e `position:absolute`
   dentro dele e, ao escalar, vazaria por cima do corpo branco. */
.ppfl-servicos-page .material-ppfl__platform-aside {
  overflow: hidden;
}

.ppfl-servicos-page .material-ppfl__platform {
  transition:
    opacity 0.65s ease,
    transform 0.45s cubic-bezier(.2, .7, .2, 1),
    box-shadow 0.45s ease;
}

.ppfl-servicos-page .material-ppfl__platform-photo {
  transition: transform 0.6s cubic-bezier(.2, .7, .2, 1), opacity 0.45s ease;
}

.ppfl-servicos-page .material-ppfl__feature-icon img {
  transition: transform 0.35s cubic-bezier(.2, .7, .2, 1);
}

/* --- Certificacoes ----------------------------------------- */
/* O `.cert-ppfl__card` usa `opacity`/`visibility` para o crossfade
   das abas — mexer no transform dele quebraria a troca de painel.
   Por isso o hover so toca na foto (o `.cert-ppfl__media` ja recorta)
   e nas pilulas das abas. */
.ppfl-servicos-page .cert-ppfl__photo {
  transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}

.ppfl-servicos-page .cert-ppfl__tab {
  transition:
    background-color var(--cert-ppfl-fade) var(--cert-ppfl-ease),
    color var(--cert-ppfl-fade) var(--cert-ppfl-ease),
    border-color var(--cert-ppfl-fade) var(--cert-ppfl-ease),
    transform 250ms var(--cert-ppfl-ease),
    box-shadow 250ms var(--cert-ppfl-ease);
}

.ppfl-servicos-page .cert-ppfl__partner-logo {
  transition: transform 0.35s cubic-bezier(.2, .7, .2, 1);
}

/* --- Depoimentos ------------------------------------------- */
/* Mesmo contrato do PPFL Geral. O raio estava na propria <img>: ao
   escalar, os cantos arredondados se deslocam e vaza uma faixa de foto
   crua. Raio + overflow migram para o SLIDE, e o zoom vai na imagem —
   o `transform` do slide e como o carrossel o posiciona. */
.ppfl-servicos-page .depoimentos-ppfl__slide {
  border-radius: 15px;
  overflow: hidden;
}

.ppfl-servicos-page .depoimentos-ppfl__art-img {
  border-radius: 0;
  transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}

/* --- Investimento: lotes e quadros do rodape ----------------- */
/* Nenhum dos dois tem link/botao proprio (sao card informativo),
   entao o hover e so acabamento — lift + sombra, mesmo padrao do
   material didatico. O lote ativo ja tem o brilho magenta em
   repouso; o hover dele soma o lift sem apagar esse brilho. */
.ppfl-servicos-page .investimento-ppfl__lote {
  transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), box-shadow 0.35s ease;
}

.ppfl-servicos-page .investimento-ppfl__quadro {
  transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), box-shadow 0.35s ease;
}

/* --- Tudo o que esta incluido: gatilhos das abas -------------- */
/* A troca de aba ja acontece no proprio hover (JS, ponteiro fino);
   o lift curto e o mesmo das abas de certificacao — feedback de
   clicavel sem competir com o crossfade do painel. O transform
   entra AQUI na transition (o bloco da secao declara so
   bg/borda/sombra). */
.ppfl-servicos-page .incluido-ppfl__tab {
  transition:
    transform 0.35s cubic-bezier(.2, .7, .2, 1),
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .ppfl-servicos-page .material-ppfl__book:hover,
  .ppfl-servicos-page .material-ppfl__book:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 22px 42px -20px rgba(41, 35, 92, 0.55);
  }

  .ppfl-servicos-page .material-ppfl__book:hover .material-ppfl__cover,
  .ppfl-servicos-page .material-ppfl__book:focus-within .material-ppfl__cover {
    transform: scale(1.06);
  }

  .ppfl-servicos-page .material-ppfl__platform:hover,
  .ppfl-servicos-page .material-ppfl__platform:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -28px rgba(255, 128, 0, 0.55);
  }

  /* A foto vive a 20% de opacidade (medida do Figma); no hover ela
     ganha um respiro e um zoom curto — o logo por cima nao se mexe. */
  .ppfl-servicos-page .material-ppfl__platform:hover .material-ppfl__platform-photo,
  .ppfl-servicos-page .material-ppfl__platform:focus-within .material-ppfl__platform-photo {
    transform: scale(1.05);
    opacity: 0.28;
  }

  .ppfl-servicos-page .material-ppfl__feature:hover .material-ppfl__feature-icon img,
  .ppfl-servicos-page .material-ppfl__feature:focus-within .material-ppfl__feature-icon img {
    transform: translateY(-3px) scale(1.08);
  }

  .ppfl-servicos-page .cert-ppfl__card:hover .cert-ppfl__photo,
  .ppfl-servicos-page .cert-ppfl__card:focus-within .cert-ppfl__photo {
    transform: scale(1.06);
  }

  .ppfl-servicos-page .cert-ppfl__tab:hover {
    transform: translateY(-2px);
  }

  .ppfl-servicos-page .cert-ppfl__card:hover .cert-ppfl__partner-logo,
  .ppfl-servicos-page .cert-ppfl__card:focus-within .cert-ppfl__partner-logo {
    transform: scale(1.08);
  }

  /* O zoom vai na <img>, nunca no slide. Os laterais tambem acendem:
     ganho PROPORCIONAL a cada posicao — um `opacity: 1` unico levaria
     os distantes (0.31 e 0.20) direto ao opaco, um salto grande demais. */
  .ppfl-servicos-page .depoimentos-ppfl__slide:hover .depoimentos-ppfl__art-img {
    transform: scale(1.02);
  }

  .ppfl-servicos-page .depoimentos-ppfl__slide[data-pos="-1"]:hover,
  .ppfl-servicos-page .depoimentos-ppfl__slide[data-pos="1"]:hover {
    opacity: calc(var(--dep-o-1) + 0.09);
  }

  .ppfl-servicos-page .depoimentos-ppfl__slide[data-pos="-2"]:hover,
  .ppfl-servicos-page .depoimentos-ppfl__slide[data-pos="2"]:hover {
    opacity: calc(var(--dep-o-2) + 0.10);
  }

  .ppfl-servicos-page .depoimentos-ppfl__slide[data-pos="-3"]:hover,
  .ppfl-servicos-page .depoimentos-ppfl__slide[data-pos="3"]:hover {
    opacity: calc(var(--dep-o-3) + 0.10);
  }

  /* Lotes 1 (encerrado, sem hover — a opacidade reduzida ja diz "nao clicavel")
     e 3 (comum): lift + sombra navy, igual aos cards de material. */
  .ppfl-servicos-page .investimento-ppfl__lote:not(.investimento-ppfl__lote--encerrado):not(.investimento-ppfl__lote--ativo):hover,
  .ppfl-servicos-page .investimento-ppfl__lote:not(.investimento-ppfl__lote--encerrado):not(.investimento-ppfl__lote--ativo):focus-within {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px -22px rgba(41, 35, 92, 0.35);
  }

  /* Lote 2 (ativo agora): mesmo lift, mas somando o brilho magenta do
     repouso — sobrescrever o box-shadow inteiro apagaria esse anel. */
  .ppfl-servicos-page .investimento-ppfl__lote--ativo:hover,
  .ppfl-servicos-page .investimento-ppfl__lote--ativo:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 0 3.1px var(--color-magenta), 0 18px 36px -22px rgba(41, 35, 92, 0.35);
  }

  .ppfl-servicos-page .investimento-ppfl__quadro:hover,
  .ppfl-servicos-page .investimento-ppfl__quadro:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -24px rgba(41, 35, 92, 0.35);
  }

  .ppfl-servicos-page .incluido-ppfl__tab:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ppfl-servicos-page .material-ppfl__book,
  .ppfl-servicos-page .material-ppfl__cover,
  .ppfl-servicos-page .material-ppfl__platform,
  .ppfl-servicos-page .material-ppfl__platform-photo,
  .ppfl-servicos-page .material-ppfl__feature-icon img,
  .ppfl-servicos-page .cert-ppfl__photo,
  .ppfl-servicos-page .cert-ppfl__partner-logo,
  .ppfl-servicos-page .depoimentos-ppfl__art-img,
  .ppfl-servicos-page .investimento-ppfl__lote,
  .ppfl-servicos-page .investimento-ppfl__quadro,
  .ppfl-servicos-page .incluido-ppfl__tab {
    transition: none;
  }

  .ppfl-servicos-page .material-ppfl__book:hover,
  .ppfl-servicos-page .material-ppfl__book:focus-within,
  .ppfl-servicos-page .material-ppfl__platform:hover,
  .ppfl-servicos-page .material-ppfl__platform:focus-within,
  .ppfl-servicos-page .material-ppfl__book:hover .material-ppfl__cover,
  .ppfl-servicos-page .material-ppfl__book:focus-within .material-ppfl__cover,
  .ppfl-servicos-page .material-ppfl__platform:hover .material-ppfl__platform-photo,
  .ppfl-servicos-page .material-ppfl__platform:focus-within .material-ppfl__platform-photo,
  .ppfl-servicos-page .material-ppfl__feature:hover .material-ppfl__feature-icon img,
  .ppfl-servicos-page .material-ppfl__feature:focus-within .material-ppfl__feature-icon img,
  .ppfl-servicos-page .cert-ppfl__card:hover .cert-ppfl__photo,
  .ppfl-servicos-page .cert-ppfl__card:focus-within .cert-ppfl__photo,
  .ppfl-servicos-page .cert-ppfl__card:hover .cert-ppfl__partner-logo,
  .ppfl-servicos-page .cert-ppfl__card:focus-within .cert-ppfl__partner-logo,
  .ppfl-servicos-page .cert-ppfl__tab:hover,
  .ppfl-servicos-page .depoimentos-ppfl__slide:hover .depoimentos-ppfl__art-img,
  .ppfl-servicos-page .investimento-ppfl__lote:hover,
  .ppfl-servicos-page .investimento-ppfl__lote:focus-within,
  .ppfl-servicos-page .investimento-ppfl__quadro:hover,
  .ppfl-servicos-page .investimento-ppfl__quadro:focus-within,
  .ppfl-servicos-page .incluido-ppfl__tab:hover {
    transform: none;
  }

  .ppfl-servicos-page .material-ppfl__platform:hover .material-ppfl__platform-photo,
  .ppfl-servicos-page .material-ppfl__platform:focus-within .material-ppfl__platform-photo {
    opacity: 0.2;
  }
}


/* ============================================================ */
/* PADRONIZACAO DE MOTION (leanweb-ui-standardizer)             */
/* ------------------------------------------------------------ */
/* Ajustes de conformidade com o contrato do projeto, aplicados  */
/* depois da auditoria da pagina.                                */
/* ============================================================ */

/* --- Seta dos CTAs antes do upgrade do mg-btn ---------------
   O `initMgButtons` move o <svg> para dentro de `.mg-btn__icon-wrap`
   (que recebe `--mg-icon-size`). Ate isso acontecer o SVG sem
   width/height cairia no tamanho padrao de 300x150 e daria um
   flash. Como o seletor e `> svg`, ele deixa de casar assim que o
   upgrade acontece — nao briga com o contrato. */
.ppfl-servicos-page .cert-ppfl__cta > svg,
.ppfl-servicos-page .continue-ppfl__cta > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* Os CTAs viraram flex por causa do `.mg-btn__inner`; o vao entre
   texto e seta agora e o `gap` do contrato, nao a margem da antiga
   `<span>` de seta (que deixou de existir no markup). */
.ppfl-servicos-page .cert-ppfl__cta,
.ppfl-servicos-page .continue-ppfl__cta {
  display: inline-flex;
  align-items: center;
}

/* --- focus-visible que faltava ------------------------------
   `faq-module.css` nao define nenhum estado de foco; o botao "Ver
   mais perguntas" e custom, entao dependia do outline do UA. */
.ppfl-servicos-page .faq-module__more-btn:focus-visible {
  outline: 3px solid rgba(203, 108, 230, 0.7);
  outline-offset: 2px;
}

/* Celular/tablet (≤ 991.98px): alvos de toque ≥ 40px no menu de âncoras, abas/CTAs das certificações e pontos do
   carrossel; rótulos pequenos (selos, tags, cargos) ≥ 12px. */
@media (max-width: 991.98px) {
  .menu-ppfl__link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .cert-ppfl__tab,
  .cert-ppfl__cta {
    min-height: 40px;
  }

  .depoimentos-ppfl__dot {
    width: 14px;
    height: 14px;
  }

  .destina-ppfl__label,
  .programa-ppfl__tag,
  .programa-ppfl__convidado-data,
  .programa-ppfl__convidado-nome,
  .programa-ppfl__convidado-cargo,
  .experts-ppfl__role,
  .investimento-ppfl__lote-rotulo,
  .investimento-ppfl__lote-flag,
  .material-ppfl__feature-text {
    font-size: 0.75rem;
  }
}
@media (max-width: 991.98px) {
  .investimento-ppfl__certificado-desc {
    font-size: 0.75rem;
  }

  .continue-ppfl__trigger,
  .investimento-ppfl__cta {
    min-height: 40px;
  }
}
:root {
  --aside-ppfl-cor: #cb6ce6;
  --aside-ppfl-cor-escura: #6f45c8;
}

/* ============================================================ */
/* ASIDE: ícone, elevação, brilho de entrada + barra fixa no celular (revisão 03/11/2026) */
/* ============================================================ */
/* Ícone redondo à esquerda do texto: o card passa a ler como botão, não como etiqueta. */
.aside-ppfl__icone {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  font-size: 15px;
  line-height: 1;
}

/* Degradê suave da cor da trilha para um tom mais escuro (volume sem virar um segundo hero). */
.aside-ppfl__toggle {
  position: relative;
  overflow: hidden;
  gap: 10px;
  background-color: var(--aside-ppfl-cor);
  background-image: linear-gradient(135deg, var(--aside-ppfl-cor) 0%, var(--aside-ppfl-cor-escura) 100%);
}

/* Fechado, flutua sobre fotos e fundos escuros: sombra mais forte e um fio branco translúcido. */
.aside-ppfl__card {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 14px 32px -10px rgba(41, 35, 92, 0.45), 0 2px 6px rgba(41, 35, 92, 0.12);
}

.aside-ppfl.is-open .aside-ppfl__card {
  box-shadow: 0 24px 48px -24px rgba(41, 35, 92, 0.35);
}

/* Brilho que passa uma vez quando o card entra (classe posta pelo JS e tirada no fim da animação). */
.aside-ppfl--brilho .aside-ppfl__toggle::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 45%;
  height: 220%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
  animation: lwBtnShimmer 1.6s ease 0.45s 1;
}

/* Barra fixa no rodapé do celular (o aside some abaixo de 768px): o mesmo CTA, sempre à mão. */
.ppfl-barra-mobile {
  display: none;
}

@media (max-width: 767.98px) {
  .ppfl-barra-mobile {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--aside-ppfl-z);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 24px rgba(41, 35, 92, 0.16);
    transform: translateY(110%);
    transition: transform 0.35s ease;
  }

  .ppfl-barra-mobile.is-visible {
    transform: translateY(0);
  }

  .ppfl-barra-mobile__cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-radius: 14px;
    background-color: var(--aside-ppfl-cor);
    background-image: linear-gradient(135deg, var(--aside-ppfl-cor) 0%, var(--aside-ppfl-cor-escura) 100%);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    line-height: 1.25;
    text-decoration: none;
    box-shadow: 0 10px 24px -12px rgba(41, 35, 92, 0.5);
  }

  .ppfl-barra-mobile__cta:hover,
  .ppfl-barra-mobile__cta:focus-visible {
    color: var(--color-white);
    text-decoration: none;
  }

  .ppfl-barra-mobile__icone {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 16px;
  }

  .ppfl-barra-mobile__texto {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
  }

  .ppfl-barra-mobile__texto strong {
    font-weight: var(--font-weight-bold);
  }

  .ppfl-barra-mobile__texto span {
    font-size: 0.8rem;
    font-weight: var(--font-weight-light);
    opacity: 0.92;
  }

  .ppfl-barra-mobile__seta {
    flex-shrink: 0;
    font-size: 0.9rem;
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aside-ppfl--brilho .aside-ppfl__toggle::after { display: none; animation: none; }
  .ppfl-barra-mobile { transition: none; }
}