/* ==========================================================================
   Pactra Multi Family Office · design preview
   Layout: every section = full-width container (.sec) + boxed inner container (.in, 1200px).
   Grid: 12 columns, 24px gap. Breakpoints match Elementor: mobile ≤767, tablet ≤1024.
   Tokens below map 1:1 to Elementor Global Colors / Global Fonts (see docs/HANDOFF-ELEMENTOR.md).
   ========================================================================== */

/*@FONTS@*/

:root {
  /* Global Colors — primárias */
  --pactra-bordeaux: #5B232B;
  --pactra-black-lead: #26292B;
  --pactra-cotton: #F2EFE9;
  /* Global Colors — secundárias e variações */
  --pactra-bronze: #A38A5E;
  --pactra-bronze-light: #B39B6D;
  --pactra-silver: #8A9195;
  /* Variações de texto: mesmo matiz das de cima, escurecidas até passar em AA (4.5:1)
     sobre Absolut Cotton. Bronze e Prata originais ficam para fios, fundos e área grande. */
  --pactra-bronze-deep: #7B6846;   /* 4.68:1 sobre Cotton — rótulos e ícones no claro */
  --pactra-silver-deep: #666D71;   /* 4.59:1 sobre Cotton — coluna do banco tradicional */
  --pactra-deep-sea: #18212C;
  --pactra-mahogany: #4A342E;
  --pactra-cotton-light: #FBF8F4;
  --pactra-cotton-mid: #F7F4EF;
  --pactra-ink-soft: #52565B;
  --pactra-bordeaux-deep: #53202A;
  --pactra-line: #D9D2C5;
  --pactra-line-dark: rgba(242, 239, 233, .16);

  /* Global Fonts
     Tahoma é fonte de sistema: nada para baixar. Ela só tem dois pesos,
     regular e negrito, então light e book caem no 400 e medium e semibold no
     700. O olho de Tahoma é bem maior que o da Campton (altura-x ~.55 contra
     ~.48), por isso a escala inteira é uns 12% menor que a do design original
     e o tracking negativo dos títulos é mais contido: com o mesmo aperto as
     letras se tocavam. */
  --font: Tahoma, Verdana, Geneva, sans-serif;
  --fw-light: 400; --fw-book: 400; --fw-medium: 700; --fw-semibold: 700;

  /* Type scale (desktop → mobile via clamp) */
  --t-display: clamp(2.25rem, 1.05rem + 3.3vw, 4rem);      /* H1  64 → 36 */
  --t-h2: clamp(1.75rem, 1.1rem + 2.1vw, 3rem);             /* H2  48 → 28 */
  --t-statement: clamp(1.5rem, .95rem + 1.8vw, 2.625rem);   /* manifesto 42 → 24 */
  --t-h3: clamp(1.125rem, 1rem + .4vw, 1.375rem);           /* H3  22 → 18 */
  --t-lead: clamp(1rem, .94rem + .25vw, 1.125rem);          /* lead 18 → 16 */
  --t-body: .9375rem;                                       /* body 15 */
  --t-small: .8125rem;                                      /* 13 */
  --t-label: .75rem;                                        /* 12 */

  /* Spacing */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 144px;
  --sec-y: clamp(80px, 9vw, 144px);
  --gutter: max(20px, 4vw);
  --container: 1200px;
  --gap: 24px;
  --radius: 2px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --header-h: 84px;

  /* cor do véu de revelação: é sempre o fundo da seção em que a foto está */
  --veil: var(--pactra-cotton);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--pactra-cotton); color: var(--pactra-black-lead);
  font-family: var(--font); font-size: var(--t-body); font-weight: var(--fw-book); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--pactra-bronze-deep); outline-offset: 4px; }
.hero :focus-visible, .gov :focus-visible, .contact :focus-visible, .footer :focus-visible, .mmenu :focus-visible, .page-head :focus-visible, .nf :focus-visible { outline-color: var(--pactra-bronze-light); }
::selection { background: var(--pactra-bordeaux); color: var(--pactra-cotton-light); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--pactra-cotton); color: var(--pactra-bordeaux); padding: 10px 16px; }
.skip:focus { top: 16px; }

/* ---------- layout primitives (Elementor: Container full width + boxed inner) ---------- */
/* clip, e não hidden, para não criar contexto de rolagem. Segura o transbordo
   momentâneo das entradas que deslocam no eixo X antes de assentar. */
.sec { position: relative; padding-block: var(--sec-y); overflow-x: clip; }
.in {
  width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.grid > * { min-width: 0; }

/* ==========================================================================
   O ENQUADRAMENTO GOVERNADO · sistema de imagem
   Uma regra para toda foto da página. Antes eram cinco proporções, cinco
   larguras e cinco posições diferentes, e por isso pareciam jogadas.

   Proporção   três, cada uma com um papel:
               portrait 4:5  identidade e permanência (hero, mármore)
               land     3:2  alcance e ação (governança, reputação)
               band    21:9  território — o único sangramento da página
   Posição     ancorada à esquerda ou à direita do grid, alternando:
               direita · esquerda · faixa · esquerda · direita
   Revelação   a foto não se mexe. Quem se mexe é o véu: um painel bordô com o
               padrão da marca que sai por um eixo do grid e deixa para trás o
               fio de bronze que passa a emoldurar a imagem. A estrutura entra,
               a fotografia fica. É a mesma ideia do padrão vivo do hero.
   Registro    a cruz da marca no canto, como marca de registro de impressão:
               a marca registrando a fotografia no grid.
   ========================================================================== */
.shot { position: relative; margin: 0; }
.shot .frame { position: relative; overflow: hidden; background: var(--veil); }
.shot img { width: 100%; height: 100%; object-fit: cover; }

.shot--portrait .frame { aspect-ratio: 4 / 5; }
.shot--land .frame { aspect-ratio: 3 / 2; }
.shot--band .frame { aspect-ratio: 21 / 9; }

/* O véu tem a cor da própria seção, não bordô. Antes um retângulo bordô piscava
   sobre o fundo claro antes de cada foto e lia como um esboço roxo. Agora a
   fotografia emerge da superfície da página; quem marca o gesto é o fio de
   bronze que viaja na borda. No hero o véu leva o padrão, porque ali ele é
   contínuo com o próprio fundo. */
.veil { position: absolute; inset: 0; z-index: 2; background: var(--veil); }
.hero .veil { background: var(--pactra-bordeaux) url("../brand/pattern-tile.svg") 0 0 / 180px; }
.veil::after { content: ""; position: absolute; background: var(--pactra-bronze-light); }
.shot--x-left .veil::after { top: 0; bottom: 0; right: 0; width: 1px; }
.shot--x-right .veil::after { top: 0; bottom: 0; left: 0; width: 1px; }
.shot--x-up .veil::after { left: 0; right: 0; bottom: 0; height: 1px; }
.no-js .veil, .reduced .veil { display: none; }

/* O fio que o véu deixa para trás. */
.shot::before { content: ""; position: absolute; background: var(--pactra-bronze); opacity: .55; }
.shot--x-left::before { top: 0; bottom: 0; left: -1px; width: 1px; }
.shot--x-right::before { top: 0; bottom: 0; right: -1px; width: 1px; }
.shot--band::before { display: none; }

/* Marca de registro. */
.regmark { position: absolute; z-index: 3; width: 13px; height: 13px; color: var(--pactra-bronze); }
.regmark--tl { top: -6px; left: -6px; }
.regmark--tr { top: -6px; right: -6px; }
.regmark--bl { bottom: -6px; left: -6px; }
.regmark--br { bottom: -6px; right: -6px; }
.hero .regmark, .gov .regmark { color: var(--pactra-bronze-light); }

/* ---------- type ---------- */
/* Marcador de seção. Só aparece nas 5 seções que o menu aponta: é confirmação
   de chegada, não enfeite. Fiduciário e FAQ não têm (o título se basta). */
.label {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--t-label); font-weight: var(--fw-medium); letter-spacing: .05em; color: var(--pactra-bronze-deep);
}
/* O fio do rótulo é desenhável: a entrada de cada seção começa por ele.
   Sem JS, --rule não existe e o fallback 1 deixa o fio inteiro. */
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; transform: scaleX(var(--rule, 1)); transform-origin: left; }
.h2 { font-size: var(--t-h2); font-weight: var(--fw-light); line-height: 1.14; letter-spacing: -.012em; text-wrap: balance; }
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--pactra-ink-soft); max-width: 58ch; text-wrap: pretty; }
.h3 { font-size: var(--t-h3); font-weight: var(--fw-book); line-height: 1.3; letter-spacing: -.005em; }
.muted { color: var(--pactra-ink-soft); }
.draft { display: inline-block; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .06em; padding: 3px 8px; border: 1px solid currentColor; border-radius: 99px; color: var(--pactra-bronze-deep); }

/* Text link with a drawn underline (Elementor: Button, style "link" + custom CSS) */
.link { position: relative; display: inline-flex; align-items: center; gap: 12px; font-weight: var(--fw-medium); padding-block: 6px; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .5s var(--ease); }
.link:hover::after { transform: scaleX(0); }
.link svg { transition: transform .5s var(--ease); }
.link:hover svg { transform: translateX(4px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px;
  padding: 12px 22px; border: 1px solid currentColor; border-radius: var(--radius);
  font-size: var(--t-small); font-weight: var(--fw-medium); letter-spacing: .03em;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

/* ---------- header (Elementor: Theme Builder Header, sticky) ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--pactra-cotton-light); transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.header .bar > a, .mmenu .top > .logo { display: flex; }
.header .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: var(--header-h); transition: height .5s var(--ease); }
.header.is-solid { background: var(--pactra-cotton-light); color: var(--pactra-black-lead); box-shadow: 0 1px 0 var(--pactra-line); }
.header.is-solid .bar { height: 68px; }
.logo { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; line-height: 1; }
.logo svg { width: 104px; height: auto; color: var(--pactra-cotton-light); }
.logo small { font-size: 10px; letter-spacing: .02em; font-weight: var(--fw-book); }
.header.is-solid .logo svg { color: var(--pactra-bordeaux); }
.header.is-solid .logo small { color: var(--pactra-bordeaux); }
.nav { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.nav a { position: relative; font-size: var(--t-small); font-weight: var(--fw-book); padding-block: 8px; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.tools { display: flex; align-items: center; gap: var(--s3); }
.langs { display: flex; gap: 2px; font-size: 12px; font-weight: var(--fw-medium); letter-spacing: .06em; }
.langs a { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 8px; opacity: .55; transition: opacity .3s; }
.langs a:hover, .langs a[aria-current="true"] { opacity: 1; }
.login { min-height: 40px; padding: 9px 18px; }
.header:not(.is-solid) .login:hover { background: var(--pactra-cotton); color: var(--pactra-bordeaux); }
.header.is-solid .login { background: var(--pactra-bordeaux); color: var(--pactra-cotton-light); border-color: var(--pactra-bordeaux); }
.header.is-solid .login:hover { background: var(--pactra-black-lead); border-color: var(--pactra-black-lead); }
.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.burger span { position: relative; display: block; width: 22px; height: 1px; background: currentColor; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 1px; background: currentColor; }
.burger span::before { top: -7px; } .burger span::after { top: 7px; }

/* Mobile menu (Elementor: Popup, full screen) */
.mmenu {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--pactra-bordeaux) url("../brand/pattern-tile.svg") 0 0 / 220px; color: var(--pactra-cotton-light);
  padding: calc(env(safe-area-inset-top, 0px) + 20px) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.mmenu[hidden] { display: none; }
.mmenu .top { display: flex; justify-content: space-between; align-items: center; height: 44px; }
/* Escopo no .mnav: senão estas regras pegam também o <nav class="langs"> do rodapé
   do menu e o EN/PT/DE sai em 34px, empilhado. */
.mmenu .mnav { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.mmenu .mnav a { font-size: clamp(1.75rem, 8vw, 2.375rem); font-weight: var(--fw-light); letter-spacing: -.01em; line-height: 1.3; }
.mmenu .foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--pactra-line-dark); }
.mmenu .login { background: var(--pactra-cotton); color: var(--pactra-bordeaux); border-color: var(--pactra-cotton); }

/* ---------- hero ---------- */
.hero { --veil: var(--pactra-bordeaux); position: relative; background: var(--pactra-bordeaux); color: var(--pactra-cotton-light); overflow: hidden; isolation: isolate; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-bg { position: absolute; inset: 0; z-index: -2; background: var(--pactra-bordeaux) url("../brand/pattern-tile.svg") 0 0 / 273px; }
.js .hero-bg { background-image: none; }
.hero .in { padding-top: calc(var(--header-h) + clamp(56px, 8vw, 120px)); padding-bottom: var(--s5); }
.hero-main { align-items: end; row-gap: var(--s6); }
/* Sem véu atrás do texto. Cheguei a pôr um e ele apagava o padrão, que é a coisa
   mais própria da marca na página. O contraste já passa sem ele: Cotton sobre
   Bordeaux dá 10,6:1 e o subtítulo em 82% dá 7,7:1, mesmo sobre as cruzes. */
.hero-copy { position: relative; grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--s4); }
.hero-cat { color: var(--pactra-bronze-light); }
/* hyphens: auto é o que salva o alemão. "Familienvermögen" não cabe em 360px
   e era cortado pelo overflow do hero. O lang do <html> diz ao navegador como
   separar; o anywhere é a rede de segurança para palavra ainda maior. */
/* .hero-title é o wrapper do widget de título no WordPress: o <h1> de dentro
   herda dele (ver a ponte), então a regra tem que valer para os dois. */
.hero h1, .hero-title { font-size: var(--t-display); font-weight: var(--fw-light); line-height: 1.08; letter-spacing: -.018em; text-wrap: balance; hyphens: auto; }
.h2, .statement, .hub .city, h1 { overflow-wrap: break-word; }
.hero h1 .w { display: inline-block; max-width: 100%; }
/* Sem isto a palavra do título é uma caixa atômica e transborda em vez de
   quebrar: era o que cortava "Familienvermögen" no alemão em 360px. */
.hero h1 .w > span { max-width: 100%; overflow-wrap: break-word; }
.hero-sub { font-size: var(--t-lead); line-height: 1.6; color: rgba(251, 248, 244, .82); max-width: 54ch; }
.hero-mail { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.hero-mail span, .hero-mail .hm-k { font-size: var(--t-small); color: rgba(251, 248, 244, .62); }
.hero-mail a { font-size: var(--t-lead); }
/* A foto é um plano acima do padrão: sombra projetada e fio de luz dão a oclusão. */
.hero-photo { grid-column: 8 / span 5; }
.hero-photo .frame { box-shadow: 0 40px 80px -40px rgba(14, 6, 8, .75), 0 0 0 1px rgba(242, 239, 233, .12); }
.hero-photo img { object-position: 50% 45%; }
/* Do rótulo ao e-mail: a foto acompanha a altura do bloco de texto (só no
   desktop; abaixo disso ela desce para baixo do texto). No WordPress a
   .hero-photo é o wrapper do widget e a <figure> fica dentro dele. */
@media (min-width: 1025px) {
  .hero-main { align-items: stretch; }
  /* a coluna do texto já tem a largura do título: o subtítulo a ocupa toda */
  .hero-sub { max-width: none; }
  .hero-photo, .hero-photo > .shot { display: flex; flex-direction: column; }
  .hero-photo > .shot, .hero-photo .frame { flex: 1 1 auto; }
  .hero-photo .frame { aspect-ratio: auto; min-height: 360px; }
  .hero-photo .frame img { position: absolute; inset: 0; }
}
.hero-strip {
  margin-top: clamp(56px, 7vw, 104px); border-top: 1px solid var(--pactra-line-dark);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap);
}
.hero-strip > :last-child { align-items: flex-end; text-align: right; }
/* Quatro células com a mesma gramática: valor em cima, o que ele é embaixo.
   Antes duas eram número-sobre-rótulo e duas rótulo-sobre-texto, e a faixa lia torto. */
.hero-strip > div { padding-top: var(--s3); display: flex; flex-direction: column; gap: 6px; }
.hero-strip .v { font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.375rem); font-weight: var(--fw-light); line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--pactra-cotton-light); }
.hero-strip .v.sm { font-size: clamp(1.125rem, .9rem + .7vw, 1.5rem); }
.hero-strip .k { font-size: var(--t-small); color: rgba(251, 248, 244, .68); }

/* ---------- about ---------- */
.about { background: var(--pactra-cotton); }
.about .head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--s3); }
.statement { grid-column: 5 / span 8; font-size: var(--t-statement); font-weight: var(--fw-light); line-height: 1.28; letter-spacing: -.01em; color: var(--pactra-bordeaux); text-wrap: pretty; }
.statement .word { transition: none; }
.about-row2 { margin-top: clamp(64px, 8vw, 128px); align-items: start; row-gap: var(--s5); }
/* O bloco bordô deslocado atrás da foto é a referência que o cliente aprovou na
   B-FLEXION. Vira o próprio fio da esquerda, em vez de um retângulo solto. */
.offset-photo, .about-photo { grid-column: 1 / span 5; }
.offset-photo::before { left: -24px; top: 24px; bottom: -24px; width: 24px; background: var(--pactra-bordeaux); opacity: 1; }
.about-text { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: var(--s5); padding-top: var(--s4); }
.about-text .lead { color: var(--pactra-black-lead); }
.values { border-top: 1px solid var(--pactra-line); }
.values .value { display: grid; grid-template-columns: 24px 1fr; gap: 4px 16px; padding-block: 20px; border-bottom: 1px solid var(--pactra-line); }
.values svg { grid-row: span 2; margin-top: 4px; color: var(--pactra-bronze-deep); }
.values .name { font-weight: var(--fw-medium); }
.values .what { color: var(--pactra-ink-soft); font-size: .875rem; }

/* ---------- fiduciary comparison · o pico da página ----------
   É o único argumento que o site precisa vencer, então é o único momento que
   para a rolagem. No desktop a seção prende (pin) e o comparativo se resolve
   linha a linha conforme o scroll. Em tablet, celular, sem JS ou com
   prefers-reduced-motion, nada prende e a tabela já aparece resolvida. */
.fid { --veil: var(--pactra-cotton-light); background: var(--pactra-cotton-light); }
.fid .in { display: flex; flex-direction: column; }
.sec-head { align-items: end; row-gap: var(--s3); margin-bottom: clamp(48px, 6vw, 88px); }
.sec-head .t { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--s3); }
.sec-head .lead { grid-column: 8 / span 5; }
/* Sem rótulo nesta seção: o título entra maior e sozinho. */
.fid .sec-head .t { grid-column: 1 / span 6; }
.fid .sec-head .h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.625rem); letter-spacing: -.016em; }
.fid .sec-head .lead { grid-column: 8 / span 5; }
.compare { position: relative; border-top: 1px solid var(--pactra-black-lead); }
/* Fio de progresso do ato, entre as duas colunas. Só existe onde o ato existe:
   no desktop. Abaixo de 1025px as linhas empilham e o fio cortaria o texto. */
.compare .rail { display: none; position: absolute; left: calc(50% - .5px); top: 0; bottom: 0; width: 1px; background: var(--pactra-line); overflow: hidden; }
@media (min-width: 1025px) { .compare .rail { display: block; } }
.compare .rail i { position: absolute; inset: 0; background: var(--pactra-bordeaux); transform: scaleY(0); transform-origin: top; }
.no-js .compare .rail, .reduced .compare .rail { display: none; }
.compare .row { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--pactra-line); }
.compare .row > * { min-width: 0; padding-block: clamp(18px, 2.2vw, 28px); }
.compare .th { font-size: var(--t-small); font-weight: var(--fw-medium); letter-spacing: .04em; }
.compare .th.trad { color: var(--pactra-silver-deep); }
.compare .th.pac { color: var(--pactra-bordeaux); }
.compare .trad-t { position: relative; justify-self: start; font-size: var(--t-h3); font-weight: var(--fw-light); color: var(--pactra-silver-deep); line-height: 1.35; }
.compare .trad-t i { position: absolute; left: 0; right: 0; top: 55%; height: 1px; background: var(--pactra-bordeaux); transform: scaleX(0); transform-origin: left; }
.no-js .compare .trad-t i, .reduced .compare .trad-t i { transform: scaleX(1); opacity: .5; }
.compare .mid { display: flex; justify-content: center; color: var(--pactra-bronze-deep); }
.compare .pac-t { font-size: var(--t-h3); font-weight: var(--fw-book); color: var(--pactra-black-lead); line-height: 1.35; }
/* Enquanto prende, a seção ocupa exatamente uma tela e fica centrada: o ato
   inteiro precisa caber no enquadramento, senão o pin corta o comparativo. */
.fid.is-pinned {
  display: flex; align-items: center; min-height: 100vh; min-height: 100svh;
  padding-block: calc(var(--header-h) + var(--s3)) var(--s5);
}
.fid.is-pinned .in { width: 100%; }
.fid.is-pinned .sec-head { margin-bottom: clamp(32px, 4vw, 56px); }

/* ---------- funds ---------- */
.funds { background: var(--pactra-cotton); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
/* O fio do topo é pseudo-elemento, e não border, para poder ser desenhado na entrada. */
.pillar { position: relative; padding-top: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.pillar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--pactra-black-lead); transform: scaleX(var(--rule, 1)); transform-origin: left; }
.pillar .glyph { width: 56px; height: 56px; color: var(--pactra-bordeaux); margin-bottom: var(--s2); }
.pillar p { color: var(--pactra-ink-soft); max-width: 36ch; }
.pillar-li { position: relative; display: block; padding-left: 18px; }
.pillar-li + .pillar-li { margin-top: 6px; }
.pillar-li::before { content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 1px; background: var(--pactra-bronze-deep); }
/* A faixa: único sangramento da página, e a dobradiça entre a primeira metade
   (retratos, identidade) e a segunda (paisagens, alcance). */
.shot--band, .funds-band { margin-top: clamp(64px, 8vw, 120px); }
/* Em monitor grande 21:9 vira um paredão de mais de 1000px e a faixa domina a
   página. Teto duplo: nunca mais que 72% da tela nem 820px.
   O width: 100% é obrigatório. Sem ele, com aspect-ratio e largura automática,
   o teto de altura encolhe a LARGURA para manter a proporção e a faixa deixa de
   sangrar: em 2560px ela virava um bloco de 1913px encostado à esquerda.
   Com largura fixa, o teto recorta a altura e o object-fit: cover cuida do resto. */
.shot--band .frame { width: 100%; max-height: min(72svh, 820px); }
.shot--band img { transform: scale(1.12); will-change: transform; }
.shot--band figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; color: var(--pactra-cotton-light); font-size: 12px; padding-block: 20px; background: linear-gradient(0deg, rgba(24, 33, 44, .55), transparent); }

/* ---------- governance (dark) ---------- */
.gov { --veil: var(--pactra-black-lead); background: var(--pactra-black-lead); color: var(--pactra-cotton-light); }
.gov .label { color: var(--pactra-bronze-light); }
.gov .lead { color: rgba(251, 248, 244, .72); }
.gov-grid { align-items: start; row-gap: var(--s6); }
/* Sem sticky, de propósito. A coluna da esquerda (rótulo, título, lead e foto)
   é 150 a 250px MAIS ALTA que a lista da direita em toda largura de desktop,
   então o sticky não tinha para onde correr e nunca grudava. Era recurso
   anunciado no handoff que nunca acontecia. Com 3 itens de governança não há
   conteúdo suficiente à direita para justificar coluna fixa. */
.gov-left { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--s3); }
.gov-left .shot, .gov-left .gov-photo { margin-top: var(--s4); }
.gov-list { grid-column: 7 / span 6; }
.gov-item { display: grid; grid-template-columns: 40px 1fr; gap: 12px 20px; padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--pactra-line-dark); }
.gov-item:last-child { border-bottom: 1px solid var(--pactra-line-dark); }
.gov-item svg { grid-row: span 2; color: var(--pactra-bronze-light); margin-top: 6px; }
.gov-item .gov-h3 { font-size: clamp(1.3125rem, 1rem + 1vw, 1.875rem); font-weight: var(--fw-light); letter-spacing: -.008em; line-height: 1.2; }
.gov-item p { color: rgba(251, 248, 244, .7); max-width: 44ch; }

/* ---------- reputation ---------- */
.rep { background: var(--pactra-cotton); }
.rep-top { align-items: center; row-gap: var(--s5); margin-bottom: clamp(64px, 8vw, 112px); }
.rep-photo { grid-column: 7 / span 6; }
.rep-photo img { object-position: 60% 50%; }
.rep-copy { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--s3); }
/* Reputação usa lista, não grade. Fundos já é uma grade de três; repetir o mesmo
   cartão aqui faria as duas seções parecerem a mesma seção duas vezes.
   O wireframe pede 3 itens com ícone, e são 3 itens com ícone: muda a forma, não o conteúdo. */
.rep-list { border-top: 1px solid var(--pactra-black-lead); }
.rep-item {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: start; padding-block: clamp(28px, 3.4vw, 48px); border-bottom: 1px solid var(--pactra-line);
}
.rep-item .glyph { grid-column: 1 / span 1; width: 28px; height: 28px; color: var(--pactra-bordeaux); margin-top: 6px; }
.rep-item h3 { grid-column: 2 / span 4; }
.rep-item p { grid-column: 7 / span 6; color: var(--pactra-ink-soft); max-width: 52ch; }

/* ---------- FAQ (Elementor: Accordion) ---------- */
.faq { background: var(--pactra-cotton-light); }
.faq-grid { row-gap: var(--s5); }
.faq-head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.faq-list { grid-column: 6 / span 7; border-top: 1px solid var(--pactra-black-lead); }
.faq details { border-bottom: 1px solid var(--pactra-line); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: var(--s3); align-items: center;
  padding-block: 26px; font-size: clamp(1rem, .95rem + .25vw, 1.125rem); font-weight: var(--fw-book); line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--pactra-bordeaux); }
.faq .pm { position: relative; width: 16px; height: 16px; justify-self: end; color: var(--pactra-bordeaux); }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1px; background: currentColor; transition: transform .45s var(--ease); }
.faq .pm::after { transform: rotate(90deg); }
.faq details[open] .pm::after { transform: rotate(0deg); }
.faq .ans { overflow: hidden; }
.faq .ans p { padding-bottom: 28px; color: var(--pactra-ink-soft); max-width: 62ch; }

/* ---------- contact / locations ---------- */
.contact { background: var(--pactra-bordeaux) url("../brand/pattern-tile.svg") 0 0 / 273px; color: var(--pactra-cotton-light); }
.contact .label { color: var(--pactra-bronze-light); }
.contact-top { row-gap: var(--s4); align-items: end; }
.contact-top .t { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--s3); }
.contact-top .lead { color: rgba(251, 248, 244, .8); }
.mailbox { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 10px; }
.mailbox > span, .mailbox > .mail-k { font-size: var(--t-small); color: rgba(251, 248, 244, .66); }
.mailrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.mail { font-size: clamp(1.25rem, .95rem + 1.1vw, 1.75rem); font-weight: var(--fw-light); letter-spacing: 0; border-bottom: 1px solid var(--pactra-bronze-light); padding-bottom: 4px; overflow-wrap: anywhere; }
.copy { font-size: 12px; min-height: 36px; padding: 8px 14px; }
.copy:hover { background: var(--pactra-cotton); color: var(--pactra-bordeaux); }
.hubs { position: relative; margin-top: clamp(56px, 7vw, 104px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
.hub { position: relative; z-index: 1; padding: clamp(24px, 3vw, 40px); background: rgba(38, 41, 43, .28); border: 1px solid var(--pactra-line-dark); backdrop-filter: blur(2px); display: flex; flex-direction: column; gap: 6px; }
.hub h3, .hub .hub-h { font-size: var(--t-small); font-weight: var(--fw-medium); color: var(--pactra-bronze-light); letter-spacing: .04em; }
.hub .city { font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.75rem); font-weight: var(--fw-light); letter-spacing: -.01em; line-height: 1.15; padding-top: 6px; }
.hub .clock { font-size: clamp(1.125rem, .95rem + .6vw, 1.5rem); font-weight: var(--fw-light); font-variant-numeric: tabular-nums; }
.hub .meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--pactra-line-dark); font-size: 12px; color: rgba(251, 248, 244, .66); font-variant-numeric: tabular-nums; }
.hub .addr { color: rgba(251, 248, 244, .64); font-size: var(--t-small); }  /* .55 dava 4.30:1, abaixo de AA */
.hub-line { position: absolute; left: 0; right: 0; top: -36px; height: 72px; width: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.privacy-note { margin-top: var(--s5); display: flex; align-items: center; gap: 12px; font-size: var(--t-small); color: rgba(251, 248, 244, .72); }
/* O fecho. A assinatura da marca encerra a página aqui, inteira, em vez de
   aparecer pequena no rodapé. É a última coisa que fica. */
/* Espaço entre a frase e a assinatura pelo gap, não por margem: dentro de um
   container do Elementor a margem de widget é zerada. */
.closing { margin-top: clamp(72px, 9vw, 140px); padding-top: var(--s5); border-top: 1px solid var(--pactra-line-dark); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.closing p {
  font-size: var(--t-statement); font-weight: var(--fw-light); line-height: 1.25; letter-spacing: -.01em;
  color: var(--pactra-cotton-light); max-width: 22ch;
}
.closing .sig { display: block; font-size: var(--t-small); letter-spacing: .04em; color: var(--pactra-bronze-light); }

/* ---------- footer ---------- */
.footer { background: var(--pactra-black-lead); color: rgba(251, 248, 244, .7); font-size: var(--t-small); }
.footer .in { padding-block: clamp(56px, 6vw, 88px) var(--s4); }
.f-top { row-gap: var(--s5); }
.f-brand { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.f-brand .logo svg { color: var(--pactra-cotton-light); width: 120px; }
.f-brand .logo small { color: var(--pactra-cotton-light); }
.f-col { display: flex; flex-direction: column; gap: 10px; }
.f-col h4 { margin: 0 0 6px; font-size: 12px; font-weight: var(--fw-medium); color: var(--pactra-bronze-light); letter-spacing: .05em; }
.f-col a:hover { color: var(--pactra-cotton-light); }
.f-nav { grid-column: 6 / span 2; }
.f-contact { grid-column: 9 / span 4; }
.f-legal { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--pactra-line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 12px; }
.f-meta { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.f-legal nav { display: flex; gap: 20px; }

/* ---------- cookie banner ---------- */
.cookie { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; max-width: min(420px, calc(100vw - 32px)); background: var(--pactra-cotton-light); color: var(--pactra-black-lead); border: 1px solid var(--pactra-line); padding: 20px; display: flex; flex-direction: column; gap: 14px; font-size: var(--t-small); box-shadow: 0 18px 40px -24px rgba(38, 41, 43, .45); }
.cookie[hidden] { display: none; }
.cookie .row { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie .accept { background: var(--pactra-bordeaux); color: var(--pactra-cotton-light); border-color: var(--pactra-bordeaux); }

/* ---------- legal + 404 ---------- */
.page-head { background: var(--pactra-bordeaux) url("../brand/pattern-tile.svg") 0 0 / 273px; color: var(--pactra-cotton-light); }
.page-head .in { padding-top: calc(var(--header-h) + 96px); padding-bottom: 72px; display: flex; flex-direction: column; gap: var(--s3); }
.page-head .label { color: var(--pactra-bronze-light); }
.page-head .legal-h1 { font-size: var(--t-h2); font-weight: var(--fw-light); line-height: 1.14; letter-spacing: -.012em; }
.page-head p { color: rgba(251, 248, 244, .72); }
.legal-body { max-width: 760px; display: flex; flex-direction: column; gap: var(--s5); }
.legal-body .note { padding: 16px 20px; border-left: 2px solid var(--pactra-bronze-deep); background: var(--pactra-cotton-light); color: var(--pactra-ink-soft); }
/* O respiro entre o titulo e o texto de cada trecho vem do gap do pai, e nao
   de margem no titulo: dentro de um container do Elementor vale
   .e-con .elementor-widget.elementor-widget { margin-block-end: 0 }, que e
   0,3,0 e apaga margem de qualquer widget. Como gap, a mesma declaracao
   serve ao site estatico e ao WordPress. */
.legal-sec { display: flex; flex-direction: column; gap: 10px; }
.legal-body .legal-h2 { font-size: var(--t-h3); font-weight: var(--fw-book); }
.legal-body p { color: var(--pactra-ink-soft); }
.legal-body .legal-intro { font-size: var(--t-lead); color: var(--pactra-black-lead); }
.legal-body strong { font-weight: var(--fw-medium); color: var(--pactra-black-lead); }
/* Texto corrido de cada trecho: parágrafos, listas e tabelas. O espaço entre
   eles é margem entre irmãos, e não gap, porque no WordPress tudo isso mora
   num único widget de texto, dentro de um wrapper do Elementor. */
.legal-text { color: var(--pactra-ink-soft); }
.legal-text :is(p, ul, table) + :is(p, ul, table) { margin-top: 14px; }
.legal-text p { margin-block: 0; }
.legal-text ul { padding-left: 1.2em; list-style: disc; }
.legal-text li + li { margin-top: 6px; }
.legal-text li::marker { color: var(--pactra-bronze-deep); }
/* Em tela estreita a tabela rola sozinha, sem empurrar a página para o lado. */
.legal-table { display: block; overflow-x: auto; border-collapse: collapse; font-size: var(--t-small); line-height: 1.5; }
/* .legal-body .legal-table tr > ... ganha das bordas e listras de tabela do tema Hello Elementor. */
.legal-table { margin: 0; }
.legal-body .legal-table tr > :is(th, td) { padding: 12px 20px 12px 0; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--pactra-line); background: none; min-width: 120px; }
.legal-body .legal-table tr > th { font-size: var(--t-label); font-weight: var(--fw-medium); letter-spacing: .05em; color: var(--pactra-bronze-deep); border-bottom-color: var(--pactra-bronze-light); }
.legal-body .legal-fine { font-size: var(--t-small); font-style: italic; }
.nf { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--pactra-bordeaux) url("../brand/pattern-tile.svg") 0 0 / 273px; color: var(--pactra-cotton-light); }
.nf .in { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; padding-block: 140px 80px; }
.nf .code { font-size: clamp(4.5rem, 2.75rem + 9vw, 10.5rem); font-weight: var(--fw-light); line-height: .95; letter-spacing: -.03em; color: var(--pactra-bronze-light); }
.nf h1 { font-size: var(--t-h2); font-weight: var(--fw-light); }
.nf .btn:hover { background: var(--pactra-cotton); color: var(--pactra-bordeaux); }
/* A faixa de rascunho é fixa no topo e empurra o header para baixo, em vez de
   ficar atrás dele. Antes o texto saía por cima do logo no celular. */
.lang-draft {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--pactra-bronze); color: var(--pactra-black-lead);
  font-size: 12px; line-height: 1.35; text-align: center; padding: 6px 16px;
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
}
body:has(.lang-draft) { --draft-h: 31px; }
body:has(.lang-draft) .header { top: var(--draft-h); }
body:has(.lang-draft) .mmenu { padding-top: calc(var(--draft-h) + 20px); }
html:has(.lang-draft) { scroll-padding-top: calc(var(--header-h) + 31px); }

/* ==========================================================================
   Tablet ≤1024 (Elementor Tablet)
   ========================================================================== */
@media (max-width: 1024px) {
  .nav { display: none; }
  .tools .langs, .tools .login { display: none; }
  .burger { display: inline-flex; }
  .hero-copy { grid-column: 1 / span 12; }
  .hero-photo { grid-column: 7 / span 6; }
  .about .head { grid-column: 1 / span 12; margin-bottom: var(--s4); }
  .statement { grid-column: 1 / span 12; }
  .offset-photo, .about-photo { grid-column: 1 / span 6; }
  .about-text { grid-column: 7 / span 6; padding-top: 0; }
  .sec-head .t, .sec-head .lead { grid-column: 1 / span 12; }
  .fid .sec-head .t, .fid .sec-head .lead { grid-column: 1 / span 12; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); }
  .rep-item .glyph { grid-column: 1 / span 1; }
  .rep-item h3 { grid-column: 2 / span 11; }
  .rep-item p { grid-column: 2 / span 11; margin-top: 10px; }
  .gov-left { grid-column: 1 / span 12; }
  .gov-list { grid-column: 1 / span 12; }
  .rep-copy { grid-column: 1 / span 12; }
  .rep-photo { grid-column: 1 / span 12; }
  .gov-left .shot { max-width: 520px; }
  .faq-head, .faq-list { grid-column: 1 / span 12; }
  .contact-top .t, .mailbox { grid-column: 1 / span 12; }
  .f-brand { grid-column: 1 / span 12; }
  .f-nav { grid-column: 1 / span 6; }
  .f-contact { grid-column: 7 / span 6; }
}

/* ==========================================================================
   Mobile ≤767 (Elementor Mobile)
   ========================================================================== */
@media (max-width: 767px) {
  :root { --header-h: 68px; --gap: 16px; }
  .header .bar, .header.is-solid .bar { height: 68px; }
  .logo svg { width: 92px; }
  .hero-photo { grid-column: 1 / span 12; }
  .shot--portrait .frame { aspect-ratio: 4 / 3; }
  .shot--band .frame { aspect-ratio: 3 / 2; }
  .regmark { width: 11px; height: 11px; }
  .regmark--tl, .regmark--bl { left: 0; }
  .regmark--tr, .regmark--br { right: 0; }
  /* O recuo de 20px fica no wrapper no WordPress: a margem da <figure> o
     Elementor zera, e é por isso que .about-photo entra em toda regra que
     posiciona esta foto, aqui e nas outras duas quebras de tela. */
  .offset-photo, .about-photo { grid-column: 1 / span 12; margin-left: 20px; }
  .offset-photo::before { left: -20px; width: 20px; top: 20px; bottom: -20px; }
  .about-text { grid-column: 1 / span 12; padding-top: var(--s4); }
  .compare .row { grid-template-columns: minmax(0, 1fr); }
  .compare .row.th-row { display: none; }
  .compare .row > * { padding-block: 0; }
  .compare .row { padding-block: 20px; gap: 6px; }
  .compare .mid { display: none; }
  .compare .trad-t, .compare .pac-t { font-size: 1rem; }
  .compare .trad-t::before { content: attr(data-k); display: block; font-size: 11px; color: var(--pactra-silver-deep); font-weight: var(--fw-medium); letter-spacing: .05em; margin-bottom: 2px; }
  .compare .pac-t::before { content: attr(data-k); display: block; font-size: 11px; color: var(--pactra-bordeaux); font-weight: var(--fw-medium); letter-spacing: .05em; margin-bottom: 2px; }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .rep-item { grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; }
  .rep-item .glyph { grid-column: 1; width: 22px; height: 22px; margin-top: 4px; }
  .rep-item h3 { grid-column: 2; }
  .rep-item p { grid-column: 2; margin-top: 8px; }
  .gov-item { grid-template-columns: 28px 1fr; }
  .hubs { grid-template-columns: minmax(0, 1fr); }
  .hub-line { display: none; }
  .f-nav, .f-contact { grid-column: 1 / span 12; }
  .f-legal { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   PONTE PARA O ELEMENTOR
   Só tem efeito dentro do WordPress; no site estático nada disto casa.

   O problema: este CSS foi escrito para a marcação do design, onde .gov-item
   é um grid com svg, h3 e p dentro. O Elementor embrulha todo widget em
   .elementor-widget > .elementor-widget-container, e esses dois divs a mais
   quebram qualquer seletor de filho direto e qualquer grid.

   A solução: display: contents nos wrappers. Eles continuam no HTML, com as
   classes e os dados que o Elementor precisa, mas somem da montagem do
   layout — os filhos passam a ser filhos diretos do que importa.

   Isto é o que torna o "editável no Elementor" real em vez de teórico: sem
   esta ponte, o widget entra e o estilo não pega.

   O que esta ponte NÃO faz: repetir valor de layout. Quem decide que .grid é
   grid, que .sec tem padding e que .in tem 1200px continua sendo a regra do
   design, lá em cima, uma vez só. O Elementor escreve as mesmas propriedades
   com a mesma especificidade (.e-con contra .grid, .e-con-full contra .sec),
   e empate de especificidade se resolve por ordem: o plugin carrega o
   site.css depois do CSS do Elementor justamente para o design ganhar. Uma
   versão anterior desta ponte tentava resolver isso com display: revert e
   saiu pior — revert volta para o padrão do navegador, que é block, e não
   para a nossa regra, então .grid virava block e a seção perdia as colunas.
   ========================================================================== */

/* O wrapper interno nunca participa do layout.

   Nesta versão do Elementor (3.x) o .elementor-widget-container não é mais
   emitido: o conteúdo do widget sai direto dentro do .elementor-widget, e esta
   regra não casa com nada. Fica porque esse div já foi e voltou mais de uma
   vez na história do Elementor, e se voltar sem a regra todo grid do design
   quebra de uma vez — uma linha para não depender disso. */
.pactra .elementor-widget > .elementor-widget-container { display: contents; }

/* Aqui havia um "margin: 0" para título e parágrafo de widget, tirando a
   margem do tema. Era redundante — o reset do próprio design, lá no começo
   deste arquivo, já zera h1, h2, h3, p, ul e figure — e era nocivo: com
   especificidade 0,3,1 ele também apagava .rep-item p { margin-top: 8px },
   que é o respiro entre título e texto de cada item de Reputação no celular.
   Medido: 8px a menos por item. Removido de propósito; se o tema voltar a
   empurrar margem, o lugar de resolver é o reset do design. */

/* O widget de título é duas caixas: o wrapper, que é quem leva a classe do
   design (.h2, .label, .h3), e o <h2>/<h3> de verdade lá dentro. O tema dá
   tamanho próprio a h1-h6, então sem esta regra o wrapper recebia os 56px do
   .h2 e o <h2> dentro saía com os 32px do tema. 'inherit' faz o título usar
   exatamente o que a classe do design definiu no wrapper, sem repetir valor
   nenhum aqui. */
.pactra .elementor-widget-heading .elementor-heading-title {
  font: inherit; letter-spacing: inherit; color: inherit;
}

/* As fotos entram em widget HTML, e o Elementor zera a margem de toda
   <figure> dentro de widget com
     .elementor .elementor-widget:not(...):not(...) figure { margin: 0 }
   que é especificidade 0,4,1 — acima de qualquer regra do design. Medido: a
   faixa de Fundos perdia os 115px de margem superior e a foto de Governança
   os 32px.

   Em vez de brigar por especificidade, a margem passa a morar no wrapper do
   widget, que não é <figure> e por isso o Elementor não toca. É o mesmo
   arranjo de .about-photo: a <figure> cuida do que desenha, o wrapper cuida de
   como ele entra no layout de fora. As classes .gov-photo e .funds-band estão
   na mesma declaração da regra do design, sem repetir valor. */

/* Regra geral que vale para montar qualquer seção nova: dentro de um container
   do Elementor, espaçamento entre widgets tem que vir do gap do container, e
   nunca de margem no widget. Ele zera todas elas com
   .e-con .elementor-widget.elementor-widget { margin-block-end: 0 }, que é
   0,3,0 e ganha de qualquer regra do design. */

/* Mesmo caso do SVG, com o selo "Draft" do FAQ: elemento inline-block sozinho
   dentro do widget ganha a sobra da linha de texto (medido: 28px para um selo
   de 26px). Virar caixa flex faz o widget ter a altura exata do conteúdo, que
   é o que acontece no design, onde o selo é item de flex direto. */
.pactra .elementor-widget-html:has(> .draft) { display: flex; }

/* Um SVG que é todo o conteúdo de um widget HTML fica inline, e aí a caixa
   dele ganha a sobra da linha de texto — medido: 80px de altura para um glifo
   de 56px, o que empurrava os pilares de Fundos 7px para baixo. No design o
   mesmo SVG é item de flex ou de grid, onde linha de texto não existe. */
.pactra .elementor-widget-html > svg { display: block; }

/* Dentro destes containers o próprio .elementor-widget também some do
   layout. São os três grids em que o design posiciona o svg, o h3 e o p como
   itens do grid: quem precisa ser filho direto é o conteúdo, não a caixa do
   widget. Nos outros containers (.gov-left, .pillar, .about-text) o wrapper
   pode ficar: ali o layout é flex em coluna com gap, e uma caixa a mais no
   meio não muda nada. */
.pactra .e-con.gov-item > .elementor-widget,
.pactra .e-con.rep-item > .elementor-widget,
.pactra .e-con.value > .elementor-widget { display: contents; }

/* Duas coisas que o Elementor faz com espaçamento e que o design não pediu.

   1. Todo container nasce com gap de 20px, aplicado como
      gap: var(--row-gap) var(--column-gap). O shorthand mexe nos dois eixos,
      então mesmo onde o design manda no column-gap sobra um row-gap de 20px
      que ninguém pediu. Zerados aqui: são nomes só do Elementor, e depois
      disso cada regra do design aplica o gap que quiser.

   2. --gap é nome usado pelos dois. O design define --gap no :root e .grid
      faz column-gap: var(--gap); o Elementor redefine --gap em .e-con, o que
      sombreia o nosso dentro de todo container. 'inherit' desfaz o sombreio
      sem copiar o valor: a variável volta a vir de quem está acima, que é o
      :root do design — uma fonte de verdade só, mesmo em container aninhado. */
.pactra .e-con {
  --row-gap: 0px; --column-gap: 0px;
  --gap: inherit;
}

/* O e-mail do hero é uma linha (rótulo e endereço lado a lado), mas no
   WordPress ele é um container, e container do Elementor nasce em coluna via
   --flex-direction. A variável é o que o Elementor lê. */
.pactra .e-con.hero-mail { --flex-direction: row; }

/* Widgets que só existem para carregar peças posicionadas: o fundo e o canvas
   do hero, o trilho do comparativo e a linha entre São Paulo e Zug. As peças
   são absolutas em relação a quem as contém (.hero, .compare, .hubs); com o
   wrapper do widget no meio, elas se posicionariam nele, uma caixa sem
   altura, e a linha ainda ocuparia a primeira célula do grid dos escritórios.
   Sem caixa, o wrapper sai do caminho. */
.pactra .elementor-widget.pactra-layers { display: contents; }