/* ==========================================================================
   Portfólio: galeria (/portfolio) e estudo de caso (/portfolio/<slug>). Classes .pf-*.
   Carregado em todas as páginas pelo layout: tudo aqui usa o prefixo .pf-.
   Tom do setor no caso: .pf-tone-<amber|violet|blue|teal|rose> define --pf-wash (luz de fundo da capa).
   ========================================================================== */

.pf-tone-amber  { --pf-wash: rgba(255, 233, 196, .62); }
.pf-tone-violet { --pf-wash: rgba(232, 224, 255, .75); }
.pf-tone-blue   { --pf-wash: rgba(220, 231, 255, .8); }
.pf-tone-teal   { --pf-wash: rgba(214, 245, 238, .72); }
.pf-tone-rose   { --pf-wash: rgba(255, 228, 241, .74); }

.pf-ctas { margin-top: 30px; }
.pf-down { transform: rotate(90deg); transition: transform .3s var(--ease); }
.btn:hover .pf-down { transform: rotate(90deg) translateX(3px); }

/* ==========================================================================
   /portfolio · hero
   ========================================================================== */
.pf-hero { padding-top: 48px; padding-bottom: 48px; }
.pf-hero-grid { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: 32px; align-items: center; }
.pf-hero-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
.pf-hero .breadcrumbs { margin-bottom: 26px; }
.pf-hero h1 { font-size: 56px; line-height: 1.05; letter-spacing: -0.035em; margin: 0; max-width: 600px; }
.pf-hero h1 .grad, .pf-case h1 .grad { padding-bottom: .06em; }
.pf-hero .lead { margin: 20px 0 0; max-width: 500px; }

/* setores atendidos: ícones empilhados (como avatares) + métrica permitida */
.pf-hero-sectors { display: flex; align-items: center; gap: 14px; max-width: 500px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.pf-stack { display: flex; flex: none; }
.pf-stack .ico { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 8px 16px -10px rgba(76, 62, 170, .55); }
.pf-stack .ico + .ico { margin-left: -8px; }
.pf-hero-sectors p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.pf-hero-sectors strong { color: var(--ink); font-weight: 600; }

/* vitrine: 1 projeto em destaque na frente, outro inclinado atrás, órbita, estrela e 1 cartão flutuante */
.pf-visual { position: relative; aspect-ratio: 6 / 5; --mx: 0; --my: 0; }
.pf-orbit { position: absolute; left: 50%; top: 52%; width: 660px; height: 660px; margin: -330px 0 0 -330px; stroke: rgba(124, 92, 255, .16); stroke-width: 1; pointer-events: none; }
.pf-glow { position: absolute; left: 50%; top: 56%; width: 82%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(167, 139, 250, .4), rgba(91, 140, 255, .14) 62%, transparent); filter: blur(22px); pointer-events: none; }
.pf-back {
  position: absolute; z-index: 1; right: 0; top: 22px; width: 56%; margin: 0; padding: 6px; border-radius: 18px; --r: 6deg; --d: 8px;
  background: rgba(255, 255, 255, .72); border: 1px solid #fff;
  box-shadow: var(--inset), 0 30px 60px -36px rgba(60, 40, 150, .5);
  transform: translate(calc(var(--mx) * var(--d, 6px)), calc(var(--my) * var(--d, 6px))) rotate(var(--r, 0deg));
  transition: transform .7s var(--ease);
}
.pf-back img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 13px; filter: saturate(.92); }
.pf-front {
  position: absolute; z-index: 2; left: 4%; width: 78%; top: 20%; display: block; padding: 8px; border-radius: 22px; color: inherit;
  background: rgba(255, 255, 255, .86); border: 1px solid #fff;
  box-shadow: var(--inset), 0 50px 80px -44px rgba(60, 40, 150, .62), 0 0 0 1px rgba(31, 36, 55, .04);
  transform: translate(calc(var(--mx) * -10px), calc(var(--my) * -10px));
  transition: transform .7s var(--ease), box-shadow .35s var(--ease);
}
.pf-front:hover { box-shadow: var(--inset), 0 56px 90px -44px rgba(60, 40, 150, .7), 0 0 0 1px rgba(124, 92, 255, .22); }
.pf-front-media { display: block; aspect-ratio: 3 / 2; border-radius: 15px; overflow: hidden; background: linear-gradient(135deg, #ECE8FF, #E3ECFF); }
.pf-front-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pf-front:hover .pf-front-media img { transform: scale(1.035); }
.pf-front-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 6px 4px 8px; }
.pf-front-txt { display: grid; gap: 1px; min-width: 0; line-height: 1.3; }
.pf-front-txt small { font-size: 12.5px; font-weight: 600; color: var(--violet-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-front-txt strong { font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-front:hover .icon-btn { background: var(--ink); color: #fff; }
.pf-front:hover .icon-btn .icon { transform: rotate(45deg); transition: transform .3s var(--ease); }
.pf-star { right: calc(18% - 30px); top: 58%; width: 64px; height: 64px; z-index: 3; }
.pf-fc { display: grid; justify-items: start; padding: 13px 18px 14px; z-index: 4; }
.pf-fc small { font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.pf-fc strong { font-size: 34px; line-height: 1.05; letter-spacing: -0.045em; margin-top: 4px; }
.pf-fc-a { left: 0; top: 4px; }

/* ==========================================================================
   /portfolio · galeria + filtros
   ========================================================================== */
.pf-gal-head { margin-bottom: 24px; }
.pf-gal-head .sub { margin-top: 10px; }
.pf-filters { gap: 6px; margin-bottom: 30px; }
.pf-filters a { min-height: 42px; padding: 0 7px 0 13px; gap: 7px; --pf-ic: var(--violet-fg); }
.pf-filters a > .icon { width: 16px; height: 16px; color: var(--pf-ic); transition: color .2s; }
.pf-filters a.pf-t-amber { --pf-ic: var(--amber); }
.pf-filters a.pf-t-violet { --pf-ic: var(--violet-fg); }
.pf-filters a.pf-t-blue { --pf-ic: var(--blue-fg); }
.pf-filters a.pf-t-teal { --pf-ic: var(--teal); }
.pf-filters a.pf-t-rose { --pf-ic: var(--rose); }
.pf-filters a:first-child { padding-left: 17px; }
.pf-filters .count {
  display: inline-grid; place-items: center; min-width: 25px; height: 25px; padding: 0 7px; border-radius: 999px;
  font-size: 12px; font-weight: 600; opacity: 1; color: var(--muted); background: rgba(31, 36, 55, .06);
  transition: background-color .2s, color .2s;
}
.pf-filters a.active > .icon, .pf-filters a[aria-current] > .icon { color: #fff; }
.pf-filters a.active .count, .pf-filters a[aria-current] .count { color: #fff; background: rgba(255, 255, 255, .16); }
.pf-grid { row-gap: 22px; }
.pf-item { display: flex; min-width: 0; }
.pf-item[hidden] { display: none; }
.pf-item > .work-card { flex: 1; min-width: 0; }
.pf-item.is-entering > .work-card { animation: pf-in .55s var(--ease) both; }
.pf-item.is-entering:nth-child(3n+2) > .work-card { animation-delay: .05s; }
.pf-item.is-entering:nth-child(3n) > .work-card { animation-delay: .1s; }
@keyframes pf-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

/* tile do setor dentro da grade: no filtro por setor, ocupa as colunas vazias da última linha (data-empty3/data-empty2)
   e o aviso de baixo some. O desenho segue a largura do próprio tile (container query):
   largo (2 colunas, >= 600px): texto à esquerda, desafios do setor num cartão à direita, botões embaixo do texto;
   médio (440–599px): desafios viram etiquetas entre o texto e os botões; estreito (1 coluna): frase do setor (headline)
   no lugar da descrição, e botões.
   No celular e com a última linha cheia (3, 6… projetos), fica só o aviso abaixo da grade. */
.pf-tile { display: none; min-width: 0; container-type: inline-size; }
.pf-tile[hidden] { display: none !important; }
.pf-tile-in {
  position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto;
  grid-template-areas: "main" "ctas"; gap: 18px; padding: 24px; border-radius: var(--r-card); overflow: hidden;
  background: radial-gradient(70% 80% at 0% 0%, var(--pf-wash, transparent), transparent 70%), rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--inset), var(--shadow-card);
}
.pf-tile-main { grid-area: main; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pf-tile h3 { margin: 18px 0 0; font-size: 19px; line-height: 1.22; letter-spacing: -0.025em; text-wrap: balance; }
.pf-tile h3 .grad { padding-bottom: .04em; }
.pf-tile-head, .pf-tile-desc { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.pf-tile-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pf-tile-head + .pf-tile-desc { display: none; }
.pf-tile-side { grid-area: side; display: none; min-width: 0; }
.pf-tile-ctas { grid-area: ctas; gap: 8px; }
.pf-tile-ctas .btn { flex: 1 1 auto; }
.pf-tile.is-entering > .pf-tile-in { animation: pf-in .55s var(--ease) .08s both; }
@container (min-width: 440px) and (max-width: 599.98px) {
  .pf-tile-in { grid-template-rows: auto 1fr auto; grid-template-areas: "main" "side" "ctas"; gap: 16px; }
  .pf-tile-main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
  .pf-tile h3 { margin: 0; }
  .pf-tile-head { display: none; }
  .pf-tile-desc, .pf-tile-head + .pf-tile-desc { display: -webkit-box; grid-column: 1 / -1; -webkit-line-clamp: 2; }
  .pf-tile-side { display: block; }
  .pf-tile-label, .pf-tile-orb { display: none; }
  .pf-tile-pains { display: flex; flex-wrap: wrap; gap: 6px; }
  .pf-tile-pains li {
    align-items: center; gap: 6px; min-height: 28px; padding: 3px 11px 3px 4px; border-radius: 999px; font-size: 13px; line-height: 1.3; color: var(--text);
    background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px var(--line);
  }
  .pf-tile-pains li > .icon { width: 20px; height: 20px; margin: 0; }
}
@container (min-width: 600px) {
  .pf-tile-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "main side" "ctas side"; gap: 20px 26px; padding: 30px; }
  .pf-tile-in.no-side { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "ctas"; }
  .pf-tile h3 { font-size: 23px; line-height: 1.18; }
  .pf-tile-head { display: none; }
  .pf-tile-desc, .pf-tile-head + .pf-tile-desc { display: -webkit-box; font-size: 15px; -webkit-line-clamp: 4; }
  .pf-tile-side {
    position: relative; display: flex; flex-direction: column; justify-content: center; padding: 24px 24px 26px; border-radius: 18px; overflow: hidden;
    background: rgba(255, 255, 255, .66); box-shadow: var(--inset), 0 0 0 1px rgba(31, 36, 55, .04), 0 16px 34px -26px rgba(76, 62, 170, .4);
  }
  .pf-tile-label { position: relative; z-index: 1; margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle-text); }
  .pf-tile-pains { position: relative; z-index: 1; gap: 11px; }
  .pf-tile-pains li { font-size: 14.5px; line-height: 1.45; color: var(--text); padding-right: 18px; }
  .pf-tile-orb { position: absolute; right: -34px; bottom: -38px; width: 118px; height: auto; opacity: .95; pointer-events: none; }
}

/* aviso abaixo da grade (setor do filtro ou "não achou o seu setor?") */
.pf-note {
  display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 16px 16px 16px 18px; border-radius: 20px;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--inset), 0 0 0 1px rgba(31, 36, 55, .04);
}
.pf-note[hidden] { display: none; }
.pf-note p { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.pf-note p strong { color: var(--ink); }
.pf-note .btn-row { flex: none; gap: 8px; }
/* setor publicado ainda sem projetos (?setor=…): aviso acima da grade */
.pf-note.pf-note-empty { margin: 0 0 24px; }

/* ==========================================================================
   /portfolio/<slug> · capa + ficha
   ========================================================================== */
.pf-case { padding-top: 34px; padding-bottom: 40px; background: radial-gradient(52% 58% at 80% 40%, var(--pf-wash, transparent), transparent 72%), var(--glass-panel); }
.pf-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.pf-topbar .breadcrumbs { margin: 0; min-width: 0; }
.pf-pager { display: flex; gap: 8px; flex: none; }

/* pílula de contexto acima do título (mesmo desenho do selo .seal) */
.pf-pill {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-height: 38px; margin: 0 0 22px; padding: 4px 16px 4px 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--inset), 0 10px 24px -18px rgba(76, 62, 170, .5), 0 0 0 1px rgba(31, 36, 55, .04);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  transition: background-color .2s, box-shadow .2s, transform .25s var(--ease);
}
.pf-pill .ico { width: 30px; height: 30px; border-radius: 50%; flex: none; }
/* uma linha só: o texto nunca quebra dentro da pílula; se faltar espaço, o nome do setor termina em reticências */
.pf-pill > span { white-space: nowrap; }
.pf-pill-sep { color: var(--subtle); font-weight: 400; }
.pf-pill-muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-weight: 500; }
.pf-pill-short { display: none; }
a.pf-pill:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--inset), 0 14px 26px -18px rgba(76, 62, 170, .55), 0 0 0 1px rgba(124, 92, 255, .2); }

.pf-case-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.pf-case-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
.pf-case h1 { font-size: 54px; line-height: 1.04; letter-spacing: -0.04em; margin: 0; max-width: 560px; }
.pf-case .lead { margin: 18px 0 0; max-width: 500px; }

/* capa: mockup grande em moldura de vidro, com estrela e o ano flutuando */
.pf-cover-wrap { position: relative; padding: 16px 0 10px; }
.pf-cover {
  position: relative; margin: 0; padding: 10px; border-radius: 28px;
  background: rgba(255, 255, 255, .7); border: 1px solid #fff;
  box-shadow: var(--inset), 0 56px 90px -50px rgba(60, 40, 150, .6), 0 0 0 1px rgba(31, 36, 55, .03);
}
.pf-cover img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 19px; }
.pf-cover-star { left: -34px; bottom: 54px; width: 68px; height: 68px; }
.pf-cover-fc { top: -6px; right: -16px; display: grid; justify-items: start; padding: 12px 18px 13px; }
.pf-cover-fc small { font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.pf-cover-fc strong { font-size: 32px; line-height: 1.04; letter-spacing: -0.045em; margin-top: 3px; }

/* ficha do projeto: faixa de vidro com divisórias (como o cartão de números da referência) */
.pf-facts {
  margin-top: 40px; padding: 10px 26px; border-radius: 22px;
  background: rgba(255, 255, 255, .64); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--inset), var(--shadow-card);
}
.pf-facts-list { display: flex; margin: 0; }
.pf-fact { flex: 1 1 0; min-width: 0; padding: 10px 22px; }
.pf-fact-client, .pf-fact-sector, .pf-fact-site { flex: 0 1 auto; }
.pf-fact-client { max-width: 270px; }
.pf-fact-year { flex: none; }
.pf-fact:first-child { padding-left: 0; }
.pf-fact:last-child { padding-right: 0; }
.pf-fact + .pf-fact { box-shadow: -1px 0 0 0 var(--line); }
.pf-fact dt { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--subtle-text); }
.pf-fact dt .icon { width: 14px; height: 14px; color: var(--violet); }
.pf-fact dd { margin: 0; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
.pf-fact dd a { text-decoration: underline; text-decoration-color: rgba(31, 36, 55, .2); text-underline-offset: 3px; }
.pf-fact dd a:hover { color: var(--violet-strong); text-decoration-color: currentColor; }
.pf-fact-svc .chip-row { gap: 6px; }
.pf-fact-svc .chip { min-height: 28px; padding: 4px 10px; font-size: 12.5px; font-weight: 500; line-height: 1.3; background: rgba(255, 255, 255, .9); }
.pf-site-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--ink); text-decoration: none !important; }
.pf-site-link > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(31, 36, 55, .2); text-underline-offset: 3px; }
.pf-site-link .icon { flex: none; width: 15px; height: 15px; color: var(--violet); transition: transform .25s var(--ease); }
.pf-site-link:hover { color: var(--violet-strong); }
.pf-site-link:hover > span:first-child { text-decoration-color: currentColor; }
.pf-site-link:hover .icon { transform: translate(2px, -2px); }

/* ==========================================================================
   /portfolio/<slug> · telas reais (computador + celular, lado a lado)
   ========================================================================== */
.pf-stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 248px); gap: 44px; align-items: end;
  padding: 48px 52px 28px; border-radius: 24px; overflow: hidden;
  background:
    radial-gradient(40% 60% at 78% 30%, rgba(255, 255, 255, .7), transparent 70%),
    linear-gradient(135deg, #EEE9FF 0%, #E3ECFF 55%, #F6E8FF 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), inset 0 1px 0 #fff;
}
.pf-stage.is-single { grid-template-columns: minmax(0, 760px); justify-content: center; }
.pf-device { position: relative; z-index: 1; margin: 0; display: grid; gap: 18px; justify-items: center; min-width: 0; }
.pf-device figcaption {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 13px 4px 4px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: rgba(255, 255, 255, .72); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, .9), 0 8px 18px -14px rgba(76, 62, 170, .5);
}
.pf-device figcaption .ico { border-radius: 50%; }
.pf-browser { width: 100%; border-radius: 14px; box-shadow: 0 40px 70px -34px rgba(40, 30, 120, .5), 0 0 0 1px rgba(31, 36, 55, .07); }
.pf-browser .browser-bar { height: 32px; }
.pf-browser .browser-bar span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 20px; line-height: 20px; max-width: 360px; margin: 0 auto; padding: 0 14px; }
.pf-browser .browser-bar span .icon { width: 10px; height: 10px; color: var(--subtle); }
.pf-browser .browser-bar i:nth-child(3) { margin-right: 6px; }
.pf-browser img { width: 100%; height: auto; aspect-ratio: 1200 / 750; object-fit: cover; object-position: top; }
.pf-phone {
  position: relative; width: 100%; padding: 9px; border-radius: 42px; background: #0B1020;
  box-shadow: 0 46px 70px -34px rgba(20, 16, 60, .6), inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 4px #1B2135;
}
.pf-phone::before { content: ""; position: absolute; right: -3px; top: 22%; width: 3px; height: 54px; border-radius: 0 3px 3px 0; background: #1B2135; }
.pf-phone::after { content: ""; position: absolute; left: -3px; top: 18%; width: 3px; height: 34px; border-radius: 3px 0 0 3px; background: #1B2135; box-shadow: 0 46px 0 #1B2135; }
.pf-phone img { width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 33px; background: #fff; }

/* ==========================================================================
   /portfolio/<slug> · solução + setor
   ========================================================================== */
.pf-solution, .pf-sector { display: flex; flex-direction: column; }
.pf-solution > .eyebrow, .pf-sector > .eyebrow { align-self: flex-start; }
.pf-solution h2 { margin: 0; }
.pf-solution .sub { margin-top: 10px; }
.pf-text { margin-top: 16px; font-size: 16.5px; line-height: 1.7; color: var(--text); max-width: 680px; }
.pf-text p { margin: 0 0 .9em; }
.pf-text p:last-child { margin-bottom: 0; }
.pf-text a { color: var(--violet-strong); text-decoration: underline; text-underline-offset: 3px; }
.pf-text ul:not([class]), .pf-text ol:not([class]) { padding-left: 1.3em; margin: 0 0 .9em; }
.pf-text li::marker { color: var(--violet); }
.pf-challenge { margin-bottom: 34px; padding-bottom: 30px; border-bottom: 1px dashed var(--line-strong); }
.pf-challenge .pf-text { margin-top: 0; }
/* entregas: 1 em cartão maior com o serviço do catálogo; 2 ou 3 ao lado do setor em lista vertical; 3 sem o setor em
   3 colunas; 4 ou mais em grade de 2 colunas (número ímpar: a última fica com 1 coluna, alinhada à esquerda) */
.pf-deliv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.pf-deliv.is-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-deliv.is-list, .pf-deliv.is-solo { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pf-deliv.is-list.is-trio { gap: 8px; }
.pf-deliv.is-list.is-trio .pf-deliv-item { min-height: 64px; padding-top: 11px; padding-bottom: 11px; }
.pf-deliv-item {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px; border-radius: 18px;
  background: var(--glass-card); border: 1px solid #fff; box-shadow: var(--inset), var(--shadow-card);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s;
}
.pf-deliv-txt { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.3; }
.pf-deliv-txt strong { font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }
.pf-deliv-txt small { font-size: 12.5px; font-weight: 500; color: var(--subtle-text); }
.pf-deliv-link {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: rgba(255, 255, 255, .95); box-shadow: var(--inset), 0 6px 16px -10px rgba(76, 62, 170, .45), 0 0 0 1px rgba(31, 36, 55, .06);
  transition: background-color .25s, color .25s;
}
.pf-deliv-link .icon { transition: transform .3s var(--ease); }
.pf-deliv-link::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.pf-deliv-item:has(.pf-deliv-link):hover { transform: translateY(-3px); background: rgba(255, 255, 255, .95); box-shadow: var(--inset), var(--shadow-hover); }
.pf-deliv-item:hover .pf-deliv-link { background: var(--ink); color: #fff; }
.pf-deliv-item:hover .pf-deliv-link .icon { transform: rotate(45deg); }
.pf-deliv-link:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
/* entrega sem serviço próprio no catálogo: chip neutro, sem cara de cartão clicável (sem sombra, sem seta, sem hover) */
.pf-deliv-item.is-static { background: rgba(255, 255, 255, .34); border-color: transparent; box-shadow: inset 0 0 0 1px rgba(31, 36, 55, .07); }
.pf-deliv-item.is-static .ico { box-shadow: none; }
.pf-deliv.is-solo .pf-deliv-item { flex-wrap: wrap; gap: 16px; padding: 18px 18px 16px; }
.pf-deliv.is-solo .pf-deliv-txt strong { font-size: 17px; }
.pf-deliv.is-solo .pf-deliv-txt small { font-size: 13px; }
.pf-deliv-svc { flex: 1 0 100%; display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pf-deliv-svc-txt { flex: 1; min-width: 0; display: grid; gap: 3px; line-height: 1.3; }
.pf-deliv-svc-txt small { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle-text); }
.pf-deliv-svc-txt strong { font-size: 15px; font-weight: 600; color: var(--ink); text-wrap: pretty; }
.pf-deliv-item:hover .pf-deliv-svc-txt strong { color: var(--violet-strong); }
.pf-results { margin-top: 30px; }
.pf-results .eyebrow { margin-bottom: 14px; }
/* "projeto no ar": fecha o painel da solução, no pé do painel (margin-top:auto) */
.pf-live-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(31, 36, 55, .07);
  transition: background-color .2s, box-shadow .2s;
}
.pf-sol-foot { margin-top: auto; padding-top: 28px; }
.pf-live-row-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; line-height: 1.35; }
.pf-live-row-txt strong { font-size: 14.5px; color: var(--ink); }
.pf-live-row-txt span { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.pf-live-row .link-arrow { flex: none; }
.pf-live-row:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .25); }
.pf-live-row:hover .link-arrow { color: var(--violet-strong); }
.pf-live-row:hover .link-arrow .icon { transform: translate(2px, -2px); }

.pf-sector { background: radial-gradient(70% 55% at 100% 0%, var(--pf-wash, transparent), transparent 72%), var(--glass-panel); }
.pf-sector-top { display: flex; align-items: center; gap: 14px; }
.pf-sector-top h2 { margin: 0; font-size: 26px; line-height: 1.15; }
.pf-sector-name { min-width: 0; display: grid; justify-items: start; gap: 5px; }
.pf-sector-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--violet-strong); }
.pf-sector-more .icon { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.pf-sector-more:hover span { text-decoration: underline; text-underline-offset: 3px; }
.pf-sector-more:hover .icon { transform: translateX(3px); }
.pf-sector-desc { margin: 16px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.pf-sector-label { margin: 22px 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle-text); }
.pf-pains { gap: 10px; }
.pf-pains li { font-size: 15px; color: var(--text); }
/* o botão segue logo abaixo da lista de desafios (sem margin-top:auto: nada de vão no meio do painel) */
.pf-sector-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 26px; }

/* galeria extra (banco) */
.pf-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pf-shot { margin: 0; padding: 8px; border-radius: 20px; background: var(--glass-card); border: 1px solid #fff; box-shadow: var(--inset), var(--shadow-card); }
.pf-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.pf-quote .testimonial { max-width: 760px; }

/* tile do setor: grade de 3 colunas (> 860px) → ocupa as 1 ou 2 colunas vazias da última linha;
   grade de 2 colunas (721–860px) → ocupa a coluna vazia. Quando aparece, o aviso do setor abaixo da grade sai.
   ("Todos" não tem tile: o aviso "não achou o seu setor?" fica sempre embaixo.) */
@media (min-width: 861px) {
  .pf-grid[data-empty3="1"] > .pf-tile, .pf-grid[data-empty3="2"] > .pf-tile { display: flex; }
  .pf-grid[data-empty3="2"] > .pf-tile { grid-column: span 2; }
  .pf-grid:not([data-empty3="0"]) ~ .pf-note[data-pf-note]:not([data-pf-note="*"]) { display: none; }
}
@media (min-width: 721px) and (max-width: 860px) {
  .pf-grid[data-empty2="1"] > .pf-tile { display: flex; }
  .pf-grid[data-empty2="1"] ~ .pf-note[data-pf-note]:not([data-pf-note="*"]) { display: none; }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1220px) {
  .pf-hero h1 { font-size: 50px; }
  .pf-case h1 { font-size: 48px; }
  .pf-case-grid { gap: 36px; }
  .pf-facts { padding: 8px 20px; }
  .pf-fact { padding: 10px 16px; }
}
@media (max-width: 1080px) {
  .pf-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pf-hero-copy { max-width: 640px; }
  .pf-visual { width: 100%; max-width: 620px; margin: 0 auto; }
  .pf-case-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .pf-case h1 { max-width: 720px; }
  .pf-case .lead { max-width: 640px; }
  .pf-facts-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 6px 0; }
  .pf-fact, .pf-fact:first-child, .pf-fact:last-child { padding: 12px 14px; }
  .pf-fact-client { max-width: none; }
  .pf-fact + .pf-fact { box-shadow: none; }
  .pf-fact-year, .pf-fact-site, .pf-fact-svc { border-top: 1px solid var(--line); }
  .pf-fact-sector, .pf-fact-site { box-shadow: -1px 0 0 0 var(--line) !important; }
  .pf-fact-svc { grid-column: 1 / -1; }
  .pf-stage { padding: 36px 36px 24px; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 210px); }
  /* solução e setor empilhados: a lista volta para colunas (2 entregas em 2, 3 em 3; não estica por toda a largura) */
  .pf-deliv.is-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pf-deliv.is-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .pf-deliv.is-list.is-trio .pf-deliv-item { min-height: 72px; padding-top: 14px; padding-bottom: 14px; }
}
@media (max-width: 860px) {
  .pf-hero h1, .pf-case h1 { font-size: 42px; }
  .pf-note { flex-wrap: wrap; }
  .pf-note p { flex-basis: calc(100% - 64px); }
  .pf-note .btn-row { width: 100%; padding-left: 60px; }
  .pf-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 170px); gap: 24px; padding: 28px 26px 22px; }
  .pf-phone { padding: 7px; border-radius: 32px; }
  .pf-phone img { border-radius: 26px; }
}
@media (max-width: 720px) {
  .pf-hero { padding-top: 24px; padding-bottom: 28px; }
  .pf-hero .breadcrumbs { margin-bottom: 18px; }
  .pf-hero h1, .pf-case h1 { font-size: 36px; line-height: 1.06; }
  .pf-hero .lead, .pf-case .lead { margin-top: 14px; }
  .pf-ctas { margin-top: 22px; }
  .pf-ctas .btn { flex: 1 1 auto; }
  .pf-hero-sectors { margin-top: 24px; padding-top: 18px; gap: 12px; }
  .pf-stack .ico { width: 32px; height: 32px; }
  .pf-stack .ico .icon { width: 15px; height: 15px; }
  .pf-stack .ico:nth-child(n+5) { display: none; }
  .pf-hero-sectors p { font-size: 14px; }
  .pf-hero-grid { gap: 18px; }
  .pf-visual { aspect-ratio: 10 / 9; }
  .pf-orbit { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
  .pf-back { padding: 4px; border-radius: 12px; width: 54%; top: 16px; right: -1%; }
  .pf-back img { border-radius: 9px; }
  .pf-front { left: 3%; width: 82%; top: 19%; padding: 5px; border-radius: 16px; }
  .pf-front-media { border-radius: 11px; }
  .pf-front-body { padding: 8px 2px 2px 6px; gap: 8px; }
  .pf-front-txt small { font-size: 11.5px; }
  .pf-front-txt strong { font-size: 14.5px; }
  .pf-front .icon-btn-sm { width: 32px; height: 32px; }
  .pf-star { width: 48px; height: 48px; right: calc(16% - 26px); top: 56%; }
  .pf-fc { padding: 9px 13px 10px; border-radius: 16px; }
  .pf-fc small { font-size: 11.5px; }
  .pf-fc strong { font-size: 24px; margin-top: 2px; }
  .pf-fc-a { left: -2px; top: 0; }

  .pf-gal-head { margin-bottom: 18px; }
  .pf-filters { margin-bottom: 20px; }
  .pf-filters a { min-height: 44px; }
  /* galeria no celular: lista vertical (não carrossel), um projeto por linha */
  .pf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .pf-grid .work-body { padding-top: 12px; }
  .pf-note { margin-top: 20px; padding: 14px; gap: 12px; align-items: flex-start; }
  .pf-note .ico { width: 40px; height: 40px; }
  .pf-note p { flex-basis: calc(100% - 56px); font-size: 14.5px; }
  .pf-note .btn-row { padding-left: 0; }
  .pf-note .btn-row .btn { flex: 1 1 auto; }

  .pf-case { padding-top: 20px; padding-bottom: 20px; }
  .pf-topbar { align-items: flex-start; margin-bottom: 18px; }
  .pf-topbar .breadcrumbs li:last-child { display: none; }
  .pf-pill { margin-bottom: 16px; font-size: 13px; }
  .pf-pill-full { display: none; }
  .pf-pill-short { display: inline; }
  .pf-case-grid { gap: 18px; }
  .pf-cover-wrap { padding: 10px 0 4px; }
  .pf-cover { padding: 6px; border-radius: 20px; }
  .pf-cover img { border-radius: 15px; }
  .pf-cover-star { width: 50px; height: 50px; left: -8px; bottom: 26px; }
  .pf-cover-fc { top: -2px; right: -4px; padding: 8px 12px 9px; border-radius: 15px; }
  .pf-cover-fc small { font-size: 11px; }
  .pf-cover-fc strong { font-size: 22px; }
  .pf-facts { margin-top: 22px; padding: 6px; border-radius: 20px; }
  .pf-facts-list { padding: 0; }
  .pf-fact, .pf-fact:first-child, .pf-fact:last-child { padding: 11px 12px; }
  .pf-fact-client, .pf-fact-site { grid-column: 1 / -1; }
  .pf-fact-sector, .pf-fact-site { box-shadow: none !important; }
  .pf-fact-sector { border-top: 1px solid var(--line); }
  .pf-fact-year { box-shadow: -1px 0 0 0 var(--line) !important; }
  .pf-fact dd { font-size: 14.5px; }

  .pf-stage { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 22px 14px 18px; border-radius: 20px; }
  .pf-mob { width: 58%; justify-self: center; }
  .pf-browser { border-radius: 10px; }
  .pf-browser .browser-bar { height: 24px; padding: 0 9px; gap: 4px; }
  .pf-browser .browser-bar i { width: 7px; height: 7px; }
  .pf-browser .browser-bar span { height: 15px; line-height: 15px; font-size: 9.5px; margin: 0 6px; padding: 0 8px; }
  .pf-device { gap: 12px; }

  .pf-deliv, .pf-deliv.is-list, .pf-deliv.is-trio { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pf-deliv { margin-top: 20px; }
  .pf-deliv-item { min-height: 64px; padding: 12px; }
  .pf-live-row { padding: 12px 14px; }
  .pf-sol-foot { padding-top: 22px; }
  .pf-sector-top h2 { font-size: 23px; }
  .pf-sector-foot { padding-top: 22px; }
  .pf-sector-foot .btn { flex: 1 1 auto; }
  .pf-shots { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .pf-hero h1, .pf-case h1 { font-size: 32px; }
}
@media (hover: none) {
  .pf-deliv-item:has(.pf-deliv-link):hover, a.pf-pill:hover { transform: none; }
  .pf-front:hover .pf-front-media img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-back { transform: rotate(var(--r, 0deg)); }
  .pf-front { transform: none; }
}