/* Portfólio de atuação — Consultoria (/consultoria/portfolio) — layout do Figma
   (pipeline figma-to-bootstrap, outputs/portfolio).
   GERADO do merged/styles.css (+ assets/css/mg-btn.css escopado): tokens que eram :root e o body{}
   do mockup ficam no wrapper .portfolio-page, para não vazar no header/rodapé do site.
   Corrigir no mockup (sections/) e regerar; só o bloco "LEANWEB" no fim é exclusivo daqui. */
/* ============================================================ */
/* PORTFOLIO — PÁGINA COMPLETA                                 */
/* Merge de sections/*, na ordem do merge.json:                */
/* HERO + JORNADA DE TRANSFORMAÇÃO · POR QUE SOMOS DIFERENTES · PORTFÓLIO (14 VERTENTES) · A JORNADA DA TRANSFORMAÇÃO LEAN · CONVERSA COM ESPECIALISTA (FORM)*/
/*                                                             */
/* Gerado a partir de sections/*.css — a fonte da verdade      */
/* continua sendo cada seção; ao editá-las, refazer o merge.   */
/* ============================================================ */

.portfolio-page {
  /* --- 1/5 · HERO + JORNADA DE TRANSFORMAÇÃO — sec-hero 2969:1634  (hero.css) --- */

  --font-primary:   'Roboto', sans-serif;
  --color-page-bg:  #ffffff;

  /* Cores */
  --pfh-ink:            #100d28;              /* texto do CTA laranja e anel dos círculos */
  --pfh-navy:           #29235c;              /* meio do gradiente da seção */
  --pfh-navy-deep:      #1e1a4a;              /* base do gradiente e do véu */
  --pfh-white:          #ffffff;
  --pfh-lilac:          #cfc9f5;              /* fim do gradiente do H1 */
  --pfh-subtitle:       #e4e0fa;
  --pfh-lead:           rgba(255, 255, 255, 0.74);
  --pfh-step-text:      rgba(255, 255, 255, 0.66);
  --pfh-pilar-text:     rgba(255, 255, 255, 0.62);
  --pfh-violet:         #8b82e8;
  --pfh-violet-dark:    #534ab7;
  --pfh-teal:           #25d0d4;
  --pfh-teal-dark:      #169194;
  --pfh-orange:         #ff8000;
  --pfh-orange-light:   #ffa626;
  --pfh-pilares-bg:     #2b2562;
  --pfh-pilares-line:   rgba(255, 255, 255, 0.08);   /* border-l entre os pilares */
  --pfh-shadow-deep:    rgba(8, 6, 30, 0.9);

  /* Medidas estruturais */
  --pfh-min-height:     1311.165px;   /* altura do frame */
  --pfh-container:      1280px;       /* Container 2969:1640: left/right 320 → 1280, px 32 */
  --pfh-pad-x:          32px;
  --pfh-pad-top:        130px;        /* Container top=130 */
  --pfh-pad-bottom:     110.67px;     /* 1311.165 − (130 + 1070.5 de conteúdo): fim dos pilares em y=1200.5 */
  --pfh-gap:            14px;         /* gap da coluna do Container */
  --pfh-circle:         54px;
  /* --- 2/5 · POR QUE SOMOS DIFERENTES — sec-diferentes 2969:996  (diferentes.css) --- */


  --pfd-bg: #f7f6fb;
  --pfd-ink: #29235c;          /* eyebrow, título, títulos dos itens */
  --pfd-text-intro: #5c5878;   /* parágrafos do bloco da direita */
  --pfd-text-item: #6a6688;    /* texto dos itens */
  --pfd-navy: #29235c;
  --pfd-teal: #169194;
  --pfd-violet: #534ab7;
  --pfd-orange: #ff8000;
  --pfd-content-w: 1280px;     /* 1200 úteis + 2 x 40 */
  /* --- 3/5 · PORTFÓLIO (14 VERTENTES) — sec-portfolio 2969:1201  (portfolio.css) --- */


  /* Fundo da seção (fill do frame + textura 2969:1202 a 16%) */
  --pfp-bg-base:      linear-gradient(165deg, #100d28 0%, #29235c 55%, #1e1a4a 100%);
  --pfp-textura:      url("../img/consultoria/portfolio/pontos.webp");
  --pfp-textura-tam:  460px 258.91px;   /* tile do Figma (original 1400×788) */

  /* Cabeçalho */
  --pfp-ciano:        #25d0d4;          /* eyebrow + régua 26×1 */
  --pfp-titulo-grad:  linear-gradient(99.22deg, #ffffff 35%, #cfc9f5 100%);
  --pfp-texto-claro:  rgba(255, 255, 255, 0.72);

  /* Filtros */
  --pfp-pill-bg:      rgba(255, 255, 255, 0.05);
  --pfp-pill-borda:   rgba(255, 255, 255, 0.18);
  --pfp-pill-ink:     rgba(255, 255, 255, 0.82);
  --pfp-pill-ativo:   #100d28;          /* texto do pill ativo (fundo branco) */

  /* Card */
  --pfp-card-bg:      linear-gradient(180deg, #ffffff 0%, #f2f1f6 50%, #d9d7e3 100%);
  --pfp-card-sombra:  0 20px 40px -22px rgba(8, 6, 30, 0.5);
  --pfp-card-raio:    18px;
  --pfp-ink:          #211d3f;          /* H3 e "Quando faz sentido:" */
  --pfp-ink-suave:    #5c5878;          /* resumo e texto do quadro */
  --pfp-quando-bg:    #f6f5fa;
  --pfp-tag-bg:       #f0eef8;
  --pfp-tag-ink:      #6b5fc4;

  /* Categorias: cor do card (barra 4px + link) · chip (texto/ponto, fundo) · ponto do filtro */
  --pfp-gente:         #534ab7;
  --pfp-gente-chip:    #534ab7;
  --pfp-gente-chip-bg: rgba(83, 74, 183, 0.12);
  --pfp-gente-pill:    #8b82e8;

  --pfp-prod:          #ff8000;
  --pfp-prod-chip:     #c25d00;
  --pfp-prod-chip-bg:  rgba(255, 128, 0, 0.14);
  --pfp-prod-pill:     #ffa626;

  --pfp-cx:            #169194;         /* só aparece como 2ª cor da barra (medida no print) */
  --pfp-cx-chip:       #0e6e70;
  --pfp-cx-chip-bg:    rgba(22, 145, 148, 0.13);
  --pfp-cx-pill:       #25d0d4;

  --pfp-dc:            #1f9e6e;
  --pfp-dc-chip:       #1f8a5f;
  --pfp-dc-chip-bg:    rgba(31, 158, 110, 0.13);
  --pfp-dc-pill:       #3cc98f;

  --pfp-inov:          #d6336c;
  --pfp-inov-chip:     #c22c60;
  --pfp-inov-chip-bg:  rgba(214, 51, 108, 0.13);
  --pfp-inov-pill:     #f2578c;

  /* Estrutura (frame 1920) */
  --pfp-container:    1280px;           /* x 320 → 1600 */
  --pfp-gutter:       32px;             /* conteúdo útil 1216 */
  --pfp-grid-gap:     24px;             /* cards de 389.33 */
  --pfp-bloco-gap:    44px;             /* cabeçalho → filtros → grade */
  /* --- 4/5 · A JORNADA DA TRANSFORMAÇÃO LEAN — sec-jornada 2969:1045  (jornada.css) --- */


  --pfj-bg: #efeef2;
  --pfj-ink: #29235c;          /* título, badges, títulos dos cards */
  --pfj-teal: #169194;         /* eyebrow e badge do passo 2 */
  --pfj-lead: #514d6e;
  --pfj-text: #5c5878;
  --pfj-card-bg: #ffffff;
  --pfj-card-accent-bg: #f4f3fa;
  --pfj-conn-bg: #f7f5ef;
  --pfj-conn-border: #17143d;
  --pfj-orange: #ff8000;
  --pfj-content-w: 1240px;     /* 1176 úteis + 2 x 32 */
  --pfj-card-radius: 25px;
  /* --- 5/5 · CONVERSA COM ESPECIALISTA (FORM) — sec-contato 2969:1156  (contato.css) --- */


  --pfc-bg:           #1a1734;
  --pfc-accent:       #ff8000;
  --pfc-white:        #ffffff;
  --pfc-navy:         #29235c;
  --pfc-ink:          #1a1734;
  --pfc-teal:         #169194;
  --pfc-chip-border:  #e4dfd2;
  --pfc-input-border: rgba(41, 35, 92, 0.15);
  --pfc-select-text:  #211d3f;
  --pfc-note:         #9a95bd;
  --pfc-arcs-opacity: 0.2;
}


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


/* ============================================================ */
/* 1/5 — HERO + JORNADA DE TRANSFORMAÇÃO — sec-hero 2969:1634  */
/* origem: sections/hero.css                                   */
/* ============================================================ */
/* ============================================================ */
/* SECTION: HERO + JORNADA DE TRANSFORMAÇÃO                     */
/* ============================================================ */
/* Fills do Section 2969:1635 (de cima para baixo). Os três radiais vêm do
   SVG do dump (r=10 × matrix): raios e centros convertidos para % do frame
   1920 × 1311.165 — o SVG usa preserveAspectRatio="none", então em % o brilho
   acompanha a seção em qualquer largura, igual ao Figma. */
.pf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: var(--pfh-min-height);
  font-family: var(--font-primary);
  color: var(--pfh-white);
  background-color: var(--pfh-navy-deep);
  background-image:
    radial-gradient(46.875% 45.793% at 6% 0%, rgba(139, 130, 232, 0.3) 0%, rgba(139, 130, 232, 0) 60%),          /* 900×600.42 em (115.2, 0) */
    radial-gradient(46.875% 53.425% at 100% 18%, rgba(37, 208, 212, 0.22) 0%, rgba(37, 208, 212, 0) 55%),        /* 900×700.49 em (1920, 236.01) */
    radial-gradient(41.667% 45.793% at 50% 110%, rgba(255, 128, 0, 0.1) 0%, rgba(255, 128, 0, 0) 60%),           /* 800×600.42 em (960, 1442.3) */
    linear-gradient(164.99deg, var(--pfh-ink) 0%, var(--pfh-navy) 55%, var(--pfh-navy-deep) 100%);
}


/* --- Camadas de fundo --- */
.pf-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Frame "image" 2969:1637: 1921 × 1149 em x=−1, y=0, opacity 13%, blend
   LUMINOSITY; fill CROP (imageTransform 0.8458 / 0.0462) → o asset já é o
   recorte do original (x 74→1427 de 1600) e o Figma o ESTICA 5% na
   horizontal (1353×850 → 1921×1149). A janela guarda a proporção do frame
   (aspect-ratio) em vez da altura da seção: em ultrawide a foto cresce junto
   com a largura sem deformar além do que o Figma já deforma; a seção corta o
   excesso por baixo, onde o véu já está opaco. */
.pf-hero__photo {
  position: absolute;
  top: 0;
  left: -0.052%;                  /* x=−1 em 1920 */
  width: 100.052%;                /* 1921 / 1920 */
  aspect-ratio: 1921 / 1149;
  opacity: 0.13;
  mix-blend-mode: luminosity;
}

.pf-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

/* Rectangle "Image" 2969:1638: TILE, scalingFactor 0.32857 sobre o PNG de
   1400×788 → ladrilho de 460 × 258.914, a partir do canto superior esquerdo */
.pf-hero__dots {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: url("../img/consultoria/portfolio/pontos.webp");
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 460px 258.914px;
}

/* Rectangle "Gradient" 2969:1639 */
.pf-hero__veil {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    rgba(30, 26, 74, 0)   0%,
    rgba(30, 26, 74, 0.6) 55%,
    var(--pfh-navy-deep)  100%
  );
}


/* --- Conteúdo --- */
.pf-hero__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pfh-gap);
  box-sizing: border-box;
  max-width: var(--pfh-container);
  margin: 0 auto;
  padding: var(--pfh-pad-top) var(--pfh-pad-x) var(--pfh-pad-bottom);
}

.pf-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pfh-gap);
  width: 100%;
  text-align: center;
}

/* Heading 2969:1642: Black 78 / 79.56, tracking −1.95, texto em gradiente
   95.6deg branco 35% → lilás. O gradiente é da caixa do TEXTO (nowrap no
   Figma), por isso mora num span inline-block e não no h1 de largura total. */
.pf-hero__title {
  margin: 0;
  font-size: 4.875rem;            /* 78px */
  font-weight: 900;
  line-height: 79.56px;
  letter-spacing: -1.95px;
}

.pf-hero__title-text {
  display: inline-block;
  background-image: linear-gradient(95.6deg, var(--pfh-white) 35%, var(--pfh-lilac) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 2969:1644: Light 30, line-height normal */
.pf-hero__subtitle {
  margin: 0;
  font-size: 1.875rem;            /* 30px */
  font-weight: 300;
  line-height: normal;
  color: var(--pfh-subtitle);
}

/* 2969:1645/1646: caixa de 740 com pt 16; 17.5 / 30.1. As três linhas do
   Figma quebram em "pessoas e" e "customizadas e" dentro dos 740px. */
.pf-hero__lead {
  max-width: 740px;
  margin: 0;
  padding-top: 16px;
  font-size: 1.094rem;            /* 17.5px */
  font-weight: 400;
  line-height: 30.1px;
  color: var(--pfh-lead);
}

/* 2969:1647: h 156 = pt 24 + botões 50 + pb 82 */
.pf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding: 24px 0 82px;
}

.pf-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 50px;               /* self-stretch na faixa de 50px do Container */
  padding: 15px 26px;
  border-radius: 40px;
  font-size: 0.9375rem;           /* 15px */
  font-weight: 700;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.pf-hero__btn svg {
  display: block;
  flex: 0 0 auto;
}

/* 2969:1648 + sombra 2969:1649 */
.pf-hero__btn--primary {
  color: var(--pfh-ink);
  background-image: linear-gradient(100deg, var(--pfh-orange) 0%, var(--pfh-orange-light) 100%);
  box-shadow: 0 12px 30px -12px rgba(255, 128, 0, 0.7);
}

/* 2969:1653: borda de 1px por dentro dos 50px (stroke INSIDE no Figma) */
.pf-hero__btn--outline {
  padding: 14px 25px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--pfh-white);
  background-color: rgba(255, 255, 255, 0.04);
}

/* Hover/foco: não está no Figma — acabamento da conversão */
.pf-hero__btn--primary:hover,
.pf-hero__btn--primary:focus-visible {
  color: var(--pfh-ink);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(255, 128, 0, 0.8);
}

.pf-hero__btn--outline:hover,
.pf-hero__btn--outline:focus-visible {
  color: var(--pfh-white);
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
}

.pf-hero__btn:focus-visible {
  outline: 2px solid var(--pfh-teal);
  outline-offset: 3px;
}


/* ============================================================ */
/* CARTÃO DE VIDRO — JORNADA DE TRANSFORMAÇÃO (2969:1655)       */
/* ============================================================ */
.pf-hero__jornada {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17.1px;
  box-sizing: border-box;
  width: 100%;
  padding: 52px 56px 76px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: center;
}

/* "Article:shadow" 2969:1656: caixa transparente com inset −1 −1 25 −1 e
   sombra 0 40 80 −40. A sombra só existe FORA dessa caixa, então ela escurece
   os últimos 25px do cartão (a faixa visível no print) e a área abaixo. */
.pf-hero__jornada::before {
  content: "";
  position: absolute;
  inset: -1px -1px 25px -1px;
  z-index: -1;
  border-radius: 26px;
  box-shadow: 0 40px 80px -40px var(--pfh-shadow-deep);
  pointer-events: none;
}

/* 2969:1657–1660: divisores 26×1 + SemiBold 13, tracking 1.04 */
.pf-hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  font-size: 0.8125rem;           /* 13px */
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  white-space: nowrap;            /* rótulo curto: nunca em 2 linhas (ajuste do autor) */
  color: var(--pfh-teal);
}

.pf-hero__eyebrow::before,
.pf-hero__eyebrow::after {
  content: "";
  flex: 0 0 26px;
  height: 1px;
  background-color: var(--pfh-teal);
}

/* 2969:1661/1662: Bold 32 / 41.6, caixa de 820 → quebra em "deixa" e
   "melhorando" (3 linhas) */
.pf-hero__jornada-title {
  max-width: 820px;
  margin: 0;
  padding-bottom: 0.685px;
  font-size: 2rem;                /* 32px */
  font-weight: 700;
  line-height: 41.6px;
  color: var(--pfh-white);
}


/* --- Stepper (Ordered List 2969:1663) --- */
.pf-hero__steps {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  width: 100%;
  margin: 0;
  padding: 34.9px 0 0;
  list-style: none;
}

/* Horizontal Divider 2969:1664: left/right 16.66%, top 60.9, 2px,
   violeta → teal 50% → laranja, opacity 75% — passa por trás dos círculos */
.pf-hero__steps::before {
  content: "";
  position: absolute;
  top: 60.9px;
  left: 16.66%;
  right: 16.66%;
  height: 2px;
  opacity: 0.75;
  background-image: linear-gradient(90deg, var(--pfh-violet) 0%, var(--pfh-teal) 50%, var(--pfh-orange-light) 100%);
}

.pf-hero__step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 6px;
}

/* Círculo 54 com anel escuro de 7px + fio claro de 8px + brilho na cor */
.pf-hero__step-num {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--pfh-circle);
  height: var(--pfh-circle);
  border-radius: 50%;
  font-size: 1.1875rem;           /* 19px */
  font-weight: 700;
  line-height: normal;
  color: var(--pfh-white);
  background-image: linear-gradient(140deg, var(--pfh-step-from) 0%, var(--pfh-step-to) 100%);
  box-shadow:
    0 0 0 7px rgba(16, 13, 40, 0.9),
    0 0 0 8px rgba(255, 255, 255, 0.1),
    0 12px 30px -6px var(--pfh-step-glow);
}

.pf-hero__step--1 { --pfh-step-from: var(--pfh-violet);       --pfh-step-to: var(--pfh-violet-dark); --pfh-step-glow: var(--pfh-violet); }
.pf-hero__step--2 { --pfh-step-from: var(--pfh-teal);         --pfh-step-to: var(--pfh-teal-dark);   --pfh-step-glow: var(--pfh-teal); }
.pf-hero__step--3 { --pfh-step-from: var(--pfh-orange-light); --pfh-step-to: var(--pfh-orange);      --pfh-step-glow: var(--pfh-orange-light); }

.pf-hero__step-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* 2969:1669/1670: pt 13; Bold 18 / 24.3 */
.pf-hero__step-title {
  margin: 0;
  padding-top: 13px;
  font-size: 1.125rem;            /* 18px */
  font-weight: 700;
  line-height: 24.3px;
  color: var(--pfh-white);
}

/* 2969:1671/1672: caixa de 300; 14.5 / 23.49 */
.pf-hero__step-text {
  max-width: 300px;
  margin: 0;
  font-size: 0.906rem;            /* 14.5px */
  font-weight: 400;
  line-height: 23.49px;
  color: var(--pfh-step-text);
}


/* ============================================================ */
/* PILARES (List 2969:1689)                                     */
/* ============================================================ */
/* As linhas entre os pilares (border-l 8% branco no Figma) saem do fundo da
   lista pelo gap de 1px: a mesma regra serve quando a fileira quebra em
   várias linhas no responsivo, sem borda dupla na beirada. */
.pf-hero__pilares {
  display: flex;
  gap: 1px;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background-color: var(--pfh-pilares-bg);
  background-image: linear-gradient(var(--pfh-pilares-line), var(--pfh-pilares-line));
  box-shadow: 0 30px 60px -30px var(--pfh-shadow-deep);
  text-align: left;
}

/* Item: pt 26 · px 24 · pb 28 (os de 1 linha têm pb 49.69 no Figma só para
   igualar a altura; aqui o stretch do flex faz isso). Barra de 3px no topo
   na cor do pilar, opacity 85%. */
.pf-hero__pilar {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8.84px;
  min-width: 0;
  padding: 26px 24px 28px;
  background-color: var(--pfh-pilares-bg);
}

.pf-hero__pilar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0.85;
  background-color: var(--pfh-pilar-color);
}

.pf-hero__pilar--teal   { --pfh-pilar-color: var(--pfh-teal); }
.pf-hero__pilar--orange { --pfh-pilar-color: var(--pfh-orange-light); }
.pf-hero__pilar--violet { --pfh-pilar-color: var(--pfh-violet); }

/* Heading 3: ponto 8px com brilho 12px + Bold 16, gap 9 */
.pf-hero__pilar-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 1rem;                /* 16px */
  font-weight: 700;
  line-height: normal;
  color: var(--pfh-white);
}

.pf-hero__pilar-title::before {
  content: "";
  flex: 0 0 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--pfh-pilar-color);
  box-shadow: 0 0 12px 0 var(--pfh-pilar-color);
}

.pf-hero__pilar-text {
  margin: 0;
  padding-bottom: 0.54px;
  font-size: 0.875rem;            /* 14px */
  font-weight: 400;
  line-height: 21.7px;
  color: var(--pfh-pilar-text);
}


/* ============================================================ */
/* RESPONSIVO                                                   */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pf-hero__btn { transition-duration: 1ms; }
  .pf-hero__btn--primary:hover,
  .pf-hero__btn--primary:focus-visible { transform: none; }
}

@media (max-width: 1247.98px) {
  .portfolio-page {
    --pfh-pad-top: 112px;
  }

  .pf-hero__title { font-size: 4.25rem; line-height: 1.05; }   /* 68px */

  .pf-hero__jornada { padding-left: 40px; padding-right: 40px; }
  .pf-hero__steps { gap: 24px; }
  .pf-hero__pilar { padding-left: 20px; padding-right: 20px; }
}

/* Abaixo de 992 a seção deixa de ter a altura do frame: o conteúdo manda.
   Os pilares quebram em 3 + 2. */
@media (max-width: 991.98px) {
  .portfolio-page {
    --pfh-pad-top: 96px;
    --pfh-pad-bottom: 88px;
    --pfh-pad-x: 24px;
  }

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

  /* A janela proporcional ficaria baixa demais (459px a 768): ganha piso e
     passa a cobrir (cover) ancorada no rosto, à esquerda e no topo. */
  .pf-hero__photo { min-height: 640px; }
  .pf-hero__photo img { object-fit: cover; object-position: 20% 0; }

  .pf-hero__title { font-size: 3.5rem; }               /* 56px */
  .pf-hero__subtitle { font-size: 1.625rem; }          /* 26px */
  .pf-hero__actions { padding-bottom: 56px; }

  .pf-hero__jornada { padding: 44px 28px 56px; }
  .pf-hero__jornada::before { bottom: 18px; }
  .pf-hero__jornada-title { font-size: 1.75rem; line-height: 36.4px; }   /* 28px */
  .pf-hero__step-title { font-size: 1rem; line-height: 22px; }

  .pf-hero__pilares { flex-wrap: wrap; }
  .pf-hero__pilar { flex: 1 1 calc((100% - 2px) / 3); }
}

/* Stepper empilha: círculo à esquerda, texto à direita, fio vertical
   ligando os círculos (mesmo gradiente, agora de cima para baixo). */
@media (max-width: 767.98px) {
  .portfolio-page {
    --pfh-pad-top: 80px;
    --pfh-pad-bottom: 72px;
  }

  .pf-hero__title { font-size: 2.75rem; }              /* 44px */
  .pf-hero__subtitle { font-size: 1.375rem; }          /* 22px */
  .pf-hero__lead { padding-top: 8px; font-size: 1rem; line-height: 27px; }
  .pf-hero__actions { padding: 16px 0 40px; }

  .pf-hero__jornada { gap: 14px; padding: 36px 24px 44px; text-align: left; }
  .pf-hero__jornada::before { bottom: 14px; }
  .pf-hero__jornada-title { align-self: stretch; text-align: center; font-size: 1.5rem; line-height: 31.2px; }   /* 24px */

  .pf-hero__steps {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding-top: 24px;
  }

  .pf-hero__steps::before { content: none; }

  .pf-hero__step {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    padding: 0 0 0 8px;           /* o anel de 8px da sombra não encosta na borda do cartão */
  }

  .pf-hero__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--pfh-circle) / 2);
    bottom: calc(-28px - var(--pfh-circle) / 2);
    left: calc(8px + var(--pfh-circle) / 2 - 1px);
    width: 2px;
    opacity: 0.75;
    background-image: linear-gradient(180deg, var(--pfh-step-glow), var(--pfh-step-next));
  }

  .pf-hero__step--1 { --pfh-step-next: var(--pfh-teal); }
  .pf-hero__step--2 { --pfh-step-next: var(--pfh-orange-light); }

  .pf-hero__step-body { align-items: flex-start; gap: 6px; }
  .pf-hero__step-title { padding-top: 4px; }
  .pf-hero__step-text { max-width: none; }

  .pf-hero__pilar { flex-basis: calc((100% - 1px) / 2); }
}

@media (max-width: 575.98px) {
  .portfolio-page {
    --pfh-pad-top: 64px;
    --pfh-pad-bottom: 56px;
    --pfh-pad-x: 16px;
    --pfh-circle: 46px;
  }

  .pf-hero__title { font-size: 2.25rem; letter-spacing: -1px; }   /* 36px */
  .pf-hero__subtitle { font-size: 1.25rem; }           /* 20px */

  .pf-hero__actions { flex-direction: column; align-items: stretch; width: 100%; }

  .pf-hero__jornada { padding: 32px 18px 40px; border-radius: 20px; }
  .pf-hero__jornada::before { border-radius: 20px; }
  .pf-hero__jornada-title { font-size: 1.3125rem; line-height: 28px; }   /* 21px */
  .pf-hero__step-num { font-size: 1.0625rem; }         /* 17px */
  .pf-hero__step-title { padding-top: 0; }

  .pf-hero__pilar { flex-basis: 100%; padding: 22px 20px 22px; }
}


/* ============================================================ */
/* 2/5 — POR QUE SOMOS DIFERENTES — sec-diferentes 2969:996    */
/* origem: sections/diferentes.css                             */
/* ============================================================ */
/* ============================================================ */
/* SECTION                                                      */
/* ============================================================ */
.pf-dif {
  position: relative;
  background: var(--pfd-bg);
  font-family: var(--font-primary);
  padding: 88px 24px;
  min-height: 634px;
  overflow: hidden;
  isolation: isolate;
}

/* Arte de fundo: círculo do shader "Concentric patterns" (1 anel, falloff 3.8, 20%) em CSS */
.pf-dif::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -690px;
  top: -707px;
  width: 1380px;
  height: 1380px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(41, 35, 92, 0.035) 0%, rgba(41, 35, 92, 0.03) 70%, rgba(41, 35, 92, 0.012) 100%);
  pointer-events: none;
}

.pf-dif__inner {
  max-width: var(--pfd-content-w);
  margin: 0 auto;
  padding: 0 40px;
}

/* --- Cabeçalho --- */
.pf-dif__header {
  display: grid;
  grid-template-columns: minmax(0, 734px) minmax(0, 420px);
  min-height: 199px;
}

.pf-dif__head { padding-top: 40px; }

.pf-dif__eyebrow {
  margin: 0 0 22px;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1px;   /* calibrado contra figma/diferentes.png (Roboto Bold do print é ~3% mais estreita) */
  text-transform: uppercase;
  color: var(--pfd-ink);
}

.pf-dif__title {
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  line-height: 48.4px;
  letter-spacing: -0.8px;
  color: var(--pfd-ink);
}

.pf-dif__intro { padding-top: 32px; }

.pf-dif__intro p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 24.3px;
  color: var(--pfd-text-intro);
}
.pf-dif__intro p:last-child { margin-bottom: 0; }

/* --- Os 4 itens --- */
.pf-dif__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-dif__item {
  flex: 1 1 0;
  min-width: 1px;
  box-sizing: content-box;
  padding: 40px 26px 8px;
  border-left: 1px solid rgba(217, 212, 198, 0);
}
.pf-dif__item:first-child { padding-left: 0; border-left: 0; }
.pf-dif__item:last-child { padding-right: 0; }

.pf-dif__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pfd-navy);
  border-radius: 50%;
}
.pf-dif__icon img { display: block; width: 20px; height: 20px; }

.pf-dif__item--teal .pf-dif__icon { border-color: var(--pfd-teal); }
.pf-dif__item--violet .pf-dif__icon { border-color: var(--pfd-violet); }
.pf-dif__item--orange .pf-dif__icon { border-color: var(--pfd-orange); }

.pf-dif__item-title {
  margin: 23px 0 11px;       /* 10.9 gap + 12.1 de respiro acima; 10.9 abaixo */
  font-size: 17.5px;
  font-weight: 700;
  line-height: 23.1px;
  letter-spacing: -0.15px;
  color: var(--pfd-ink);
}

.pf-dif__item-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 21.6px;
  color: var(--pfd-text-item);
}

/* ============================================================ */
/* RESPONSIVO                                                   */
/* ============================================================ */
@media (max-width: 1399.98px) {
  .pf-dif__inner { padding: 0; }
  .pf-dif__header { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 40px; }
}

@media (max-width: 1247.98px) {
  .pf-dif__title { font-size: 40px; line-height: 44px; }
  .pf-dif__item { padding-left: 20px; padding-right: 20px; }
  .pf-dif__item:first-child { padding-left: 0; }
  .pf-dif__item:last-child { padding-right: 0; }
}

@media (max-width: 991.98px) {
  .pf-dif { padding: 64px 24px; min-height: 0; }
  .pf-dif__header { display: block; min-height: 0; }
  .pf-dif__head { padding-top: 0; }
  .pf-dif__intro { padding-top: 24px; max-width: 560px; }
  .pf-dif__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 32px;
    margin-top: 16px;
  }
  .pf-dif__item,
  .pf-dif__item:first-child,
  .pf-dif__item:last-child { padding: 24px 0 8px; border-left: 0; }
}

@media (max-width: 767.98px) {
  .pf-dif__title { font-size: 36px; line-height: 40px; }
  .pf-dif__eyebrow { font-size: 18px; }
}

@media (max-width: 575.98px) {
  .pf-dif { padding: 48px 20px; }
  .pf-dif__eyebrow { font-size: 15px; letter-spacing: 1px; }
  .pf-dif__title { font-size: 30px; line-height: 34px; }
  .pf-dif__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
}


/* ============================================================ */
/* 3/5 — PORTFÓLIO (14 VERTENTES) — sec-portfolio 2969:1201    */
/* origem: sections/portfolio.css                              */
/* ============================================================ */
/* ============================================================ */
/* SECTION: PORTFÓLIO (14 VERTENTES)                            */
/* ============================================================ */
.pf-port {
  position: relative;
  isolation: isolate;
  font-family: var(--font-primary);
  padding: 100px 0 120px;               /* pt 100 / pb 120 do frame */
  /* Três brilhos radiais do fill do Figma (SVG userSpace 1920×2804):
     lilás no topo-esquerda, ciano à direita (y 504.76), laranja abaixo da base. */
  background:
    radial-gradient(ellipse 900px 600px at 115.2px 0, rgba(139, 130, 232, 0.3) 0%, rgba(139, 130, 232, 0) 60%),
    radial-gradient(ellipse 900px 700px at 100% 504.76px, rgba(37, 208, 212, 0.22) 0%, rgba(37, 208, 212, 0) 55%),
    radial-gradient(ellipse 800px 600px at 50% calc(100% + 280.5px), rgba(255, 128, 0, 0.1) 0%, rgba(255, 128, 0, 0) 60%),
    var(--pfp-bg-base);
  background-color: #1e1a4a;
}

/* Textura de pontos (Image 2969:1202): tile 460 × 258.91 a 16% */
.pf-port::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--pfp-textura);
  background-size: var(--pfp-textura-tam);
  background-position: 0 0;
  background-repeat: repeat;
  opacity: 0.16;
  pointer-events: none;
}

.pf-port__container {
  box-sizing: border-box;
  max-width: var(--pfp-container);
  margin: 0 auto;
  padding: 0 var(--pfp-gutter);
}

/* --- Cabeçalho --- */
.pf-port__intro {
  max-width: 760px;
  margin-bottom: var(--pfp-bloco-gap);
}

.pf-port__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.8125rem;                 /* 13px */
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: var(--pfp-ciano);
}

.pf-port__eyebrow-linha {
  flex: 0 0 26px;
  height: 1px;
  background-color: var(--pfp-ciano);
}

/* 712px: a linha mais larga ("…desafios do") mede 706 no Figma —
   quebra igual ao frame e a caixa do degradê fica com a largura do texto */
.pf-port__titulo {
  max-width: 712px;
  margin: 17.3px 0 0;
  font-size: 2.5rem;                    /* 40px */
  font-weight: 900;
  line-height: 45.6px;
  letter-spacing: -0.4px;
  color: #ffffff;
  background-image: var(--pfp-titulo-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pf-port__texto {
  max-width: 680px;
  margin: 17.3px 0 0;
  font-size: 1.031rem;                  /* 16.5px */
  line-height: 27.39px;
  color: var(--pfp-texto-claro);
}

/* --- Filtros --- */
.pf-port__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--pfp-bloco-gap);
}

.pf-port__pill {
  --pfp-pill-dot: var(--pfp-pill-ativo);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 11px 20px 11px 16px;
  border: 1px solid var(--pfp-pill-borda);
  border-radius: 30px;
  background-color: var(--pfp-pill-bg);
  font-family: inherit;
  font-size: 0.875rem;                  /* 14px */
  font-weight: 600;
  line-height: 16px;
  color: var(--pfp-pill-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pf-port__pill::before {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--pfp-pill-dot);
}

.pf-port__pill--todas { --pfp-pill-dot: #ffffff; }   /* fora do Figma: "Todas" inativo */
.pf-port__pill--todas[aria-pressed="true"] { --pfp-pill-dot: var(--pfp-pill-ativo); }
.pf-port__pill--todas::before { opacity: 0.55; }
.pf-port__pill--gente-gestao { --pfp-pill-dot: var(--pfp-gente-pill); }
.pf-port__pill--produtividade { --pfp-pill-dot: var(--pfp-prod-pill); }
.pf-port__pill--customer-experience { --pfp-pill-dot: var(--pfp-cx-pill); }
.pf-port__pill--desenvolvimento-competencias { --pfp-pill-dot: var(--pfp-dc-pill); }
.pf-port__pill--inovacao { --pfp-pill-dot: var(--pfp-inov-pill); }

/* Hover: não está no Figma — acabamento da conversão */
.pf-port__pill:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.32);
}

.pf-port__pill[aria-pressed="true"] {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--pfp-pill-ativo);
}

.pf-port__pill:focus-visible {
  outline: 2px solid var(--pfp-ciano);
  outline-offset: 2px;
}

/* --- Grade --- */
.pf-port__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pfp-grid-gap);
}

/* --- Card --- */
/* Barra de 4px = border-top transparente + 2ª camada de fundo no border-box:
   mantém o afinamento nos cantos de raio 18 (medido no print) e aceita
   o degradê dos cards de duas categorias. */
.pf-port__card {
  --pfp-cor: var(--pfp-gente);
  --pfp-barra: linear-gradient(var(--pfp-cor), var(--pfp-cor));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 30px 28px 28px;
  border-top: 4px solid transparent;
  border-radius: var(--pfp-card-raio);
  background: var(--pfp-card-bg) padding-box, var(--pfp-barra) border-box;
  box-shadow: var(--pfp-card-sombra);
  overflow: hidden;
}

.pf-port__card[hidden] { display: none; }

.pf-port__card--gente-gestao { --pfp-cor: var(--pfp-gente); }
.pf-port__card--produtividade { --pfp-cor: var(--pfp-prod); }
.pf-port__card--customer-experience { --pfp-cor: var(--pfp-cx); }
.pf-port__card--desenvolvimento-competencias { --pfp-cor: var(--pfp-dc); }
.pf-port__card--inovacao { --pfp-cor: var(--pfp-inov); }

/* Duas categorias: a barra passa da cor principal ao teal entre 25% e 75%
   (medido em y=905 no print; o dump só traz a 1ª cor) */
.pf-port__card--duo-customer-experience {
  --pfp-barra: linear-gradient(90deg, var(--pfp-cor) 25%, var(--pfp-cx) 75%);
}

/* Entrada ao filtrar (o JS liga .is-entrando nos cards que ficam visíveis) */
.pf-port__card.is-entrando {
  animation: pf-port-entra 0.35s ease-out both;
}

@keyframes pf-port-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Chips de categoria: linha de 27 + pb 18 */
.pf-port__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.pf-port__chip {
  --pfp-chip: var(--pfp-gente-chip);
  --pfp-chip-bg: var(--pfp-gente-chip-bg);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 30px;
  background-color: var(--pfp-chip-bg);
  font-size: 0.781rem;                  /* 12.5px */
  font-weight: 600;
  line-height: 15px;
  color: var(--pfp-chip);
  white-space: nowrap;
}

.pf-port__chip::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--pfp-chip);
}

.pf-port__chip--gente-gestao { --pfp-chip: var(--pfp-gente-chip); --pfp-chip-bg: var(--pfp-gente-chip-bg); }
.pf-port__chip--produtividade { --pfp-chip: var(--pfp-prod-chip); --pfp-chip-bg: var(--pfp-prod-chip-bg); }
.pf-port__chip--customer-experience { --pfp-chip: var(--pfp-cx-chip); --pfp-chip-bg: var(--pfp-cx-chip-bg); }
.pf-port__chip--desenvolvimento-competencias { --pfp-chip: var(--pfp-dc-chip); --pfp-chip-bg: var(--pfp-dc-chip-bg); }
.pf-port__chip--inovacao { --pfp-chip: var(--pfp-inov-chip); --pfp-chip-bg: var(--pfp-inov-chip-bg); }

.pf-port__card-titulo {
  margin: 0 0 12px;
  font-size: 1.156rem;                  /* 18.5px */
  font-weight: 700;
  line-height: 24.42px;
  color: var(--pfp-ink);
}

.pf-port__card-texto {
  margin: 0 0 16px;
  font-size: 0.906rem;                  /* 14.5px */
  line-height: 23.2px;
  color: var(--pfp-ink-suave);
}

.pf-port__quando {
  align-self: stretch;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background-color: var(--pfp-quando-bg);
  font-size: 0.844rem;                  /* 13.5px */
  line-height: 21.33px;
  color: var(--pfp-ink-suave);
}

.pf-port__quando strong {
  font-weight: 700;
  color: var(--pfp-ink);
}

/* Tags: linha de 27 + pb 22 */
.pf-port__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.pf-port__tag {
  padding: 6px 13px;
  border-radius: 20px;
  background-color: var(--pfp-tag-bg);
  font-size: 0.781rem;                  /* 12.5px */
  font-weight: 500;
  line-height: 15px;
  color: var(--pfp-tag-ink);
  white-space: nowrap;
}

/* Link encostado na base: cards da mesma linha têm a mesma altura (grid stretch) */
/* Painel "Ver abordagem" (fora do Figma — briefing, 2026-10-28): abre acima do botão */
.pf-port__abordagem {
  width: 100%;
  margin: 0 0 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(41, 35, 92, 0.1);
}

.pf-port__abordagem:not([hidden]) {
  animation: pf-abord-entra 0.3s ease both;
}

@keyframes pf-abord-entra {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.pf-port__abord-titulo {
  margin: 0 0 6px;
  font-size: 0.8125rem;                 /* 13px */
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pfp-cor);
}

.pf-port__abord-texto {
  margin: 0 0 14px;
  font-size: 0.875rem;                  /* 14px */
  line-height: 22px;
  color: var(--pfp-ink-suave);
}

.pf-port__abord-link {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 16px;
  color: var(--pfp-cor);
  text-decoration: none;
}

.pf-port__abord-link:hover,
.pf-port__abord-link:focus-visible { opacity: 0.75; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .pf-port__abordagem:not([hidden]) { animation: none; }
}

.pf-port__link {
  margin-top: auto;
  padding: 4px 0 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  font-size: 0.875rem;                  /* 14px */
  font-weight: 700;
  line-height: 16px;
  color: var(--pfp-cor);
  text-decoration: none;
}

/* Hover/foco: não estão no Figma — acabamento da conversão */
.pf-port__link:hover { opacity: 0.75; }   /* sem sublinhado (padrão do site): feedback por opacidade */

.pf-port__link:focus-visible {
  outline: 2px solid var(--pfp-cor);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ============================================================ */
/* RESPONSIVO                                                   */
/* ============================================================ */
@media (max-width: 991.98px) {
  .pf-port { padding: 80px 0 96px; }
  .pf-port__titulo { font-size: 2.125rem; line-height: 40px; }   /* 34px */
  .pf-port__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Filtros viram trilho de rolagem horizontal; grade em 1 coluna */
@media (max-width: 767.98px) {
  .pf-port { --pfp-gutter: 24px; --pfp-bloco-gap: 36px; padding: 64px 0 80px; }
  .pf-port__titulo { font-size: 1.875rem; line-height: 36px; }   /* 30px */
  .pf-port__filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-left: calc(-1 * var(--pfp-gutter));
    margin-right: calc(-1 * var(--pfp-gutter));
    padding: 2px var(--pfp-gutter) 6px;
    scroll-padding-inline: var(--pfp-gutter);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pf-port__filtros::-webkit-scrollbar { display: none; }
  .pf-port__pill { scroll-snap-align: start; }
  .pf-port__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 575.98px) {
  .pf-port { --pfp-gutter: 16px; padding: 56px 0 72px; }
  .pf-port__titulo { font-size: 1.75rem; line-height: 33px; }    /* 28px */
  .pf-port__texto { font-size: 1rem; line-height: 26px; }
  .pf-port__card { padding: 26px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-port__pill { transition-duration: 1ms; }
  .pf-port__card.is-entrando { animation: none; }
}


/* ============================================================ */
/* 4/5 — A JORNADA DA TRANSFORMAÇÃO LEAN — sec-jornada 2969:1045*/
/* origem: sections/jornada.css                                */
/* ============================================================ */
/* ============================================================ */
/* SECTION                                                      */
/* ============================================================ */
.pf-jor {
  position: relative;
  background: var(--pfj-bg);
  font-family: var(--font-primary);
  padding: 96px 24px 135px;   /* 926 - (96 + 193 + 64 + 438) = 135 */
  overflow: hidden;
  isolation: isolate;
}

/* Arte de fundo: dois círculos do shader "Concentric patterns" (20%) em CSS */
.pf-jor::before,
.pf-jor::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.pf-jor::before {            /* grande, canto inferior direito */
  width: 2300px;
  height: 2300px;
  left: 1000px;
  top: -150px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.28) 100%);
  transform: translateX(-0px);
}
.pf-jor::after {             /* cunha clara no canto superior esquerdo */
  width: 1480px;
  height: 1480px;
  left: -1400px;
  top: -1100px;
  background: rgba(41, 35, 92, 0.02);
}

.pf-jor__inner {
  max-width: var(--pfj-content-w);
  margin: 0 auto;
  padding: 0 32px;
}

/* --- Cabeçalho --- */
.pf-jor__header {
  max-width: 760px;
  min-height: 193px;
  padding-top: 17px;
  margin-bottom: 64px;
}

.pf-jor__eyebrow {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.82px;
  text-transform: uppercase;
  color: var(--pfj-teal);
}

.pf-jor__title {
  margin: 0;
  padding-top: 0.8px;
  font-size: 40px;
  font-weight: 900;
  line-height: 45.6px;
  letter-spacing: -0.4px;
  color: var(--pfj-ink);
}

.pf-jor__lead {
  max-width: 700px;
  margin: 17.6px 0 0;
  font-size: 16.5px;
  line-height: 27.72px;
  color: var(--pfj-lead);
}

/* --- Passos: grade 4 colunas, linha 2 em sentido inverso (serpentina) --- */
.pf-jor__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-jor__card {
  position: relative;
  box-sizing: border-box;
  padding: 30px 25px 27px 24px;
  background: var(--pfj-card-bg);
  border-radius: var(--pfj-card-radius);
  box-shadow: inset 10px 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.pf-jor__card--accent { background: var(--pfj-card-accent-bg); }

/* O conector de cada card invade o card SEGUINTE (em todas as quebras).
   Com data-reveal, cada card vira um contexto de empilhamento próprio
   (transform/opacity) e o z-index do conector só vale dentro dele: o card
   seguinte, pintado depois, cobria a seta. Empilhar em ordem decrescente. */
.pf-jor__card--1 { z-index: 8; }
.pf-jor__card--2 { z-index: 7; }
.pf-jor__card--3 { z-index: 6; }
.pf-jor__card--4 { z-index: 5; }
.pf-jor__card--5 { z-index: 4; }
.pf-jor__card--6 { z-index: 3; }
.pf-jor__card--7 { z-index: 2; }
.pf-jor__card--8 { z-index: 1; }

/* linha 2 (5-8) lê da direita para a esquerda; sombra interna espelhada */
.pf-jor__card--5 { grid-column: 4; grid-row: 2; }
.pf-jor__card--6 { grid-column: 3; grid-row: 2; }
.pf-jor__card--7 { grid-column: 2; grid-row: 2; }
.pf-jor__card--8 { grid-column: 1; grid-row: 2; }
.pf-jor__card--5,
.pf-jor__card--6,
.pf-jor__card--7,
.pf-jor__card--8 { box-shadow: inset -10px 4px 4px 0 rgba(0, 0, 0, 0.25); }

.pf-jor__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--pfj-ink);
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.pf-jor__card--accent .pf-jor__num { background: var(--pfj-teal); }

.pf-jor__card-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 21.12px;
  color: var(--pfj-ink);
}

.pf-jor__card-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 21.33px;
  color: var(--pfj-text);
}

/* --- Conectores: círculo 26px com seta (a seta base aponta para a direita) --- */
.pf-jor__conn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  border: 1px solid var(--pfj-conn-border);
  border-radius: 50%;
  background: var(--pfj-conn-bg);
}
.pf-jor__conn img { display: block; width: 15px; height: 15px; }

/* desktop: 1-3 → direita (na borda direita do card) */
.pf-jor__card--1 .pf-jor__conn,
.pf-jor__card--2 .pf-jor__conn,
.pf-jor__card--3 .pf-jor__conn {
  right: -13px;
  top: 50%;
  margin-top: -13px;
}
/* 4 → baixo (sob o card, 134px da borda direita) */
.pf-jor__card--4 .pf-jor__conn { right: 134px; bottom: -18px; }
.pf-jor__card--4 .pf-jor__conn img { transform: rotate(90deg); }
/* 5-7 → esquerda (na borda esquerda do card) */
.pf-jor__card--5 .pf-jor__conn,
.pf-jor__card--6 .pf-jor__conn,
.pf-jor__card--7 .pf-jor__conn {
  left: -13px;
  top: 50%;
  margin-top: -13px;
}
.pf-jor__card--5 .pf-jor__conn img,
.pf-jor__card--6 .pf-jor__conn img,
.pf-jor__card--7 .pf-jor__conn img { transform: rotate(180deg); }

/* --- Hover (fora do Figma — pedido do autor, 2026-10-28): o card sob o cursor
   ganha o destaque do passo 2 (fundo lilás, número teal) e o conector acende.
   O fundo vem de um véu ::before em multiply, não de transition no card: o
   card tem .reveal, e uma transition nele substituiria a da entrada (e
   herdaria o --reveal-delay). Multiply sobre branco = a cor do véu; sobre o
   texto e a sombra interna, a mudança é imperceptível. --- */
@media (hover: hover) and (pointer: fine) {
  .pf-jor__card:not(.pf-jor__card--accent)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: var(--pfj-card-accent-bg);
    mix-blend-mode: multiply;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .pf-jor__card:hover::before { opacity: 1; }

  .pf-jor__num { transition: background-color 0.3s ease, scale 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .pf-jor__card:hover .pf-jor__num { background: var(--pfj-teal); scale: 1.08; }

  .pf-jor__conn { transition: border-color 0.3s ease, scale 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .pf-jor__card:hover .pf-jor__conn { border-color: var(--pfj-orange); scale: 1.12; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-jor__num,
  .pf-jor__conn { transition: none; }
  .pf-jor__card:hover .pf-jor__num,
  .pf-jor__card:hover .pf-jor__conn { scale: none; }
}

/* ============================================================ */
/* RESPONSIVO                                                   */
/* ============================================================ */
@media (max-width: 1399.98px) {
  .pf-jor__inner { padding: 0; }
}

@media (max-width: 1247.98px) {
  .pf-jor__title { font-size: 36px; line-height: 42px; }
  .pf-jor__lead { font-size: 16px; line-height: 26px; }
  .pf-jor__card { padding-left: 20px; padding-right: 20px; }
  .pf-jor__card--4 .pf-jor__conn { right: 40px; }
}

/* 2 colunas: ordem natural 1..8; ímpares → direita, pares → baixo */
@media (max-width: 991.98px) {
  .pf-jor { padding: 64px 24px 72px; }
  .pf-jor__header { min-height: 0; padding-top: 0; margin-bottom: 40px; }
  .pf-jor__eyebrow { font-size: 20px; }
  .pf-jor__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
  /* serpentina em 2 colunas, a seta segue o fluxo (ajuste do autor, 860):
     1 → 2 / 4 ← 3 / 5 → 6 / 8 ← 7; descidas em 2, 4 e 6 */
  .pf-jor__card--1 { grid-column: 1; grid-row: 1; }
  .pf-jor__card--2 { grid-column: 2; grid-row: 1; }
  .pf-jor__card--3 { grid-column: 2; grid-row: 2; }
  .pf-jor__card--4 { grid-column: 1; grid-row: 2; }
  .pf-jor__card--5 { grid-column: 1; grid-row: 3; }
  .pf-jor__card--6 { grid-column: 2; grid-row: 3; }
  .pf-jor__card--7 { grid-column: 2; grid-row: 4; }
  .pf-jor__card--8 { grid-column: 1; grid-row: 4; }
  /* linhas lidas da direita p/ a esquerda (3-4, 7-8): sombra espelhada, como no desktop */
  .pf-jor__card--1, .pf-jor__card--2, .pf-jor__card--5, .pf-jor__card--6 { box-shadow: inset 10px 4px 4px 0 rgba(0, 0, 0, 0.25); }
  .pf-jor__card--3, .pf-jor__card--4, .pf-jor__card--7, .pf-jor__card--8 { box-shadow: inset -10px 4px 4px 0 rgba(0, 0, 0, 0.25); }

  .pf-jor__card--1 .pf-jor__conn,
  .pf-jor__card--5 .pf-jor__conn { left: auto; right: -13px; top: 50%; bottom: auto; margin-top: -13px; }
  .pf-jor__card--1 .pf-jor__conn img,
  .pf-jor__card--5 .pf-jor__conn img { transform: none; }
  .pf-jor__card--3 .pf-jor__conn,
  .pf-jor__card--7 .pf-jor__conn { left: -13px; right: auto; top: 50%; bottom: auto; margin-top: -13px; }
  .pf-jor__card--3 .pf-jor__conn img,
  .pf-jor__card--7 .pf-jor__conn img { transform: rotate(180deg); }
  .pf-jor__card--2 .pf-jor__conn,
  .pf-jor__card--4 .pf-jor__conn,
  .pf-jor__card--6 .pf-jor__conn { left: auto; right: 40px; top: auto; bottom: -19px; margin-top: 0; }
  .pf-jor__card--2 .pf-jor__conn img,
  .pf-jor__card--4 .pf-jor__conn img,
  .pf-jor__card--6 .pf-jor__conn img { transform: rotate(90deg); }
}

@media (max-width: 767.98px) {
  .pf-jor__title { font-size: 32px; line-height: 38px; }
  .pf-jor__eyebrow { font-size: 17px; letter-spacing: 1.4px; }
}

/* 1 coluna: conector vertical entre cards, centralizado */
@media (max-width: 575.98px) {
  .pf-jor { padding: 48px 20px 56px; }
  .pf-jor__title { font-size: 28px; line-height: 34px; }
  .pf-jor__steps { grid-template-columns: minmax(0, 1fr); gap: 20px 0; }
  .pf-jor__card:nth-child(n) { grid-column: auto; grid-row: auto; box-shadow: inset 10px 4px 4px 0 rgba(0, 0, 0, 0.25); }
  .pf-jor__card:nth-child(n) .pf-jor__conn { left: 50%; right: auto; top: auto; bottom: -23px; margin: 0 0 0 -13px !important; }
  .pf-jor__card:nth-child(n) .pf-jor__conn img { transform: rotate(90deg); }
}


/* ============================================================ */
/* 5/5 — CONVERSA COM ESPECIALISTA (FORM) — sec-contato 2969:1156*/
/* origem: sections/contato.css                                */
/* ============================================================ */
/* ============================================================ */
/* SECTION: CONTATO                                            */
/* ============================================================ */
.pf-cont {
  position: relative;
  overflow: hidden;
  background-color: var(--pfc-bg);
  min-height: 767px;
  padding: 121px 24px 126px;
  font-family: var(--font-primary);
  color: var(--pfc-white);
  box-sizing: border-box;
}
.pf-cont *, .pf-cont *::before, .pf-cont *::after { box-sizing: border-box; }

/* Arcos: arte em % da seção (deforma de propósito, como o shader em uv normalizado) */
.pf-cont__arcs {
  position: absolute;
  inset: 0;
  background: url("../img/consultoria/contato-arcos.webp") center / 100% 100% no-repeat;
  opacity: var(--pfc-arcs-opacity);
  pointer-events: none;
}

.pf-cont__container {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1096px;                  /* 67px de offset + 1029 de conteúdo (479 → 1508 no frame) */
  padding-left: 67px;
  margin: 0 auto;
}

/* --- Coluna esquerda --- */
.pf-cont__intro {
  flex: 0 0 451px;
  max-width: 451px;
  margin-top: 48px;
}

.pf-cont__eyebrow {
  margin: 0 0 18px;
  font-size: 1.25rem;                 /* 20px */
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.82px;
  text-transform: uppercase;
  color: var(--pfc-white);
  white-space: nowrap;
}

.pf-cont__title {
  margin: 0 0 18px;
  font-size: 2.375rem;                /* 38px */
  font-weight: 900;
  line-height: 44px;
  letter-spacing: -0.38px;
  color: var(--pfc-accent);
}

.pf-cont__text {
  margin: 0;
  padding: 0.685px 0 0.565px;
  font-size: 1rem;                    /* 16px */
  font-weight: 400;
  line-height: 26.88px;
  color: var(--pfc-white);
  max-width: 451px;
}

.pf-cont__chips {
  list-style: none;
  margin: 18px 0 0;
  padding: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.pf-cont__chip {
  background: var(--pfc-white);
  border: 1px solid var(--pfc-chip-border);
  border-radius: 30px;
  padding: 9px 16px;
  font-size: 0.84375rem;              /* 13.5px */
  font-weight: 600;
  line-height: normal;
  color: var(--pfc-navy);
  white-space: nowrap;
}
.pf-cont__check { font-weight: 700; color: var(--pfc-teal); }

/* --- Card --- */
.pf-cont__card {
  position: relative;
  flex: 0 0 484px;
  width: 484px;
  max-width: 100%;
  height: 520px;
  background: var(--pfc-white);
  border-left: 6px solid var(--pfc-accent);
  border-radius: 14px;
  box-shadow: 0 30px 60px -28px rgba(41, 35, 92, 0.3);
  padding: 0 42px 0 36px;
}

.pf-cont__card-title {
  margin: 14px 0 6px -8px;            /* título y=14..62, 1º rótulo em y=68 */
  font-size: 1.125rem;                /* 18px */
  font-weight: 900;
  line-height: 48px;
  text-transform: uppercase;
  color: var(--pfc-ink);
  white-space: nowrap;
}

.pf-cont__form { display: block; }

.pf-cont__field { min-width: 0; }

.pf-cont__label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.8125rem;               /* 13px */
  font-weight: 600;
  line-height: 15px;
  color: var(--pfc-navy);
}
.pf-cont__req { color: var(--pfc-accent); }

.pf-cont__input {
  display: block;
  width: 100%;
  height: 47px;
  background: var(--pfc-white);
  border: 1px solid var(--pfc-input-border);
  border-radius: 6px;
  padding: 0 12px;
  font-family: var(--font-primary);
  font-size: 0.90625rem;              /* 14.5px */
  color: var(--pfc-select-text);
}
.pf-cont__input:focus,
.pf-cont__select:focus {
  outline: 2px solid var(--pfc-accent);
  outline-offset: -1px;
}

/* e-mail + empresa: 400px = 209 + 3 + 188 (colunas do Figma) */
.pf-cont__row {
  display: grid;
  grid-template-columns: 209fr 188fr;
  gap: 0 3px;
  margin-top: 13px;                   /* y 138 → rótulo em ~151 */
}

/* Select nativo, estado fechado como no Figma */
.pf-cont__field--select { margin-top: 12px; }
.pf-cont__select {
  display: block;
  width: 100%;
  height: 28px;
  background-color: var(--pfc-white);
  border: 1px solid var(--pfc-teal);
  border-radius: 6px;
  padding: 0 8px 0 10px;
  font-family: var(--font-primary);
  font-size: 0.90625rem;              /* 14.5px */
  line-height: 17px;
  color: var(--pfc-select-text);
}

.pf-cont__field--text { margin-top: 12px; }
.pf-cont__field--text .pf-cont__label { margin-bottom: 10px; }
.pf-cont__textarea {
  height: 90px;
  padding: 10px 12px;
  resize: none;
}

.pf-cont__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 50px;
  margin-top: 11px;
  background: var(--pfc-accent);
  color: var(--pfc-white);
  border: 0;
  border-radius: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9375rem;               /* 15px */
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
  transition: filter 0.2s;
}
.pf-cont__submit:hover { filter: brightness(0.93); }
.pf-cont__submit svg { flex: none; width: 16px; height: 16px; }

.pf-cont__note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.7625rem;               /* 12.2px */
  line-height: normal;
  color: var(--pfc-note);
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 1399.98px) {
  .pf-cont__container { max-width: 1000px; padding-left: 0; }
}

@media (max-width: 1247.98px) {
  .pf-cont__intro { flex-basis: 420px; max-width: 420px; }
}

@media (max-width: 991.98px) {
  .pf-cont { min-height: 0; padding: 72px 24px; }
  .pf-cont__container { flex-direction: column; align-items: stretch; gap: 40px; max-width: 560px; padding-left: 0; }
  .pf-cont__intro { flex: none; max-width: 100%; margin-top: 0; }
  .pf-cont__text { max-width: 100%; }
  .pf-cont__card { flex: none; width: 100%; height: auto; padding: 0 24px 28px 24px; }
  .pf-cont__card-title { margin: 0; padding: 22px 0 14px; line-height: 1.3; white-space: normal; }
}

@media (max-width: 767.98px) {
  .pf-cont__title { font-size: 2rem; line-height: 38px; }
}

@media (max-width: 575.98px) {
  .pf-cont { padding: 56px 16px; }
  .pf-cont__eyebrow { font-size: 1rem; letter-spacing: 1.4px; white-space: normal; }
  .pf-cont__title { font-size: 1.75rem; line-height: 34px; }
  .pf-cont__row { grid-template-columns: 1fr; gap: 13px 0; }
  .pf-cont__card { padding: 0 16px 24px 16px; }
  .pf-cont__submit { height: auto; min-height: 50px; padding: 10px 12px; text-align: center; }
  .pf-cont__chip { white-space: normal; }
}


/* ============================================================ */
/* SLIDE-UP DOS BOTÕES (mg-btn) — contrato do mgButtons.js,     */
/* escopado na página (initMgButtons em portfolio.anim.js)      */
/* ============================================================ */
.portfolio-page { --mg-btn-swap-duration: 0.9s; }   /* mesma velocidade da Academia/AgendaTreinamento */

/* Anti-FOUC: esconde o conteúdo cru enquanto o JS não faz o upgrade. */
.portfolio-page .mg-btn-auto:not(.mg-btn) { color: transparent !important; }
.portfolio-page .mg-btn-auto:not(.mg-btn) > svg,
.portfolio-page .mg-btn-auto:not(.mg-btn) > img,
.portfolio-page .mg-btn-auto:not(.mg-btn) > span { opacity: 0 !important; visibility: hidden !important; }

.portfolio-page .mg-btn { position: relative; }
.portfolio-page .mg-btn__inner { display: inline-flex; align-items: center; gap: 10px; }
.portfolio-page .mg-btn__swap { position: relative; display: inline-grid; overflow: hidden; }
.portfolio-page .mg-btn__swap-text {
  grid-area: 1 / 1;
  transition: transform var(--mg-btn-swap-duration, .42s) cubic-bezier(.2, .7, .2, 1);
}
.portfolio-page .mg-btn__swap-text.is-absolute { position: absolute; inset: 0; transform: translate3d(0, 130%, 0); }
.portfolio-page .mg-btn:hover .mg-btn__swap-text.is-absolute,
.portfolio-page .mg-btn:focus-visible .mg-btn__swap-text.is-absolute { transform: translate3d(0, 0, 0); }
.portfolio-page .mg-btn:hover .mg-btn__swap-text.is-relative,
.portfolio-page .mg-btn:focus-visible .mg-btn__swap-text.is-relative { transform: translate3d(0, -130%, 0); }
.portfolio-page .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); }
.portfolio-page .mg-btn__icon.is-absolute { position: absolute; inset: 0; transform: translate3d(0, 130%, 0); }
.portfolio-page .mg-btn:hover .mg-btn__icon.is-absolute,
.portfolio-page .mg-btn:focus-visible .mg-btn__icon.is-absolute { transform: translate3d(0, 0, 0); }
.portfolio-page .mg-btn:hover .mg-btn__icon.is-relative,
.portfolio-page .mg-btn:focus-visible .mg-btn__icon.is-relative { transform: translate3d(0, -130%, 0); }
.portfolio-page .mg-btn__icon-wrap { flex: none; width: var(--mg-icon-size, 16px); height: var(--mg-icon-size, 16px); }  /* flex:none: não encolhe quando o texto quebra */
.portfolio-page .mg-btn__icon svg { width: 100%; height: 100%; display: block; }

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


/* ============================================================ */
/* LEANWEB — 1ª dobra sem piscar (ver js/consultoria/portfolio.anim.js) */
/* ============================================================ */
.portfolio-page--preload .pf-hero [data-reveal] {
  opacity: 0;
}

/* Formulário ligado ao handler global (form[data-contact-form] → /api/contato):
   captcha Turnstile acima do botão, na régua dos campos. */
.pf-cont__captcha {
  margin: 13px 0 0;
  min-height: 65px;
}

/* O card do Figma tem 520px fixos para 4 campos; com cargo + telefone (exigidos pela API) e o captcha
   ele cresce com o conteúdo, mantendo os 24px do Figma abaixo da nota. */
@media (min-width: 992px) {
  .pf-cont__card { height: auto; padding-bottom: 24px; }
}