/* ============================================================
   HUB CATÓLICO · BUNDLES (HUB+ / Hub Unum)
   Compartilhado pelas duas LPs de assinatura. Herda tokens de /home.css
   (mostarda #D4A017 sobre grafite, Akrobat/Inter/Source Serif).
   Motion: transform/opacity only, ease-out custom, <300ms em UI,
   respeita prefers-reduced-motion (ver bloco final).
   ============================================================ */

/* ---- eyebrow com badge de tier (reaproveita .eyebrow de home.css) ---- */
.tier-badge{ display:inline-flex; align-items:center; gap:.5rem; }
.tier-badge img{ height:22px; width:auto; }

/* ---- HERO BUNDLE (dark, sem foto — grafite + glow radial mostarda) ---- */
.bhero{ position:relative; padding:clamp(7.5rem,16vw,11rem) 0 clamp(4rem,8vw,6rem);
  background:var(--ink); color:#fff; overflow:hidden; }
.bhero::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 78% 8%,rgba(212,160,23,.22),transparent 60%),
             radial-gradient(ellipse 40% 40% at 8% 90%,rgba(212,160,23,.10),transparent 60%); }
.bhero__inner{ position:relative; z-index:1; max-width:44rem; }
.bhero__eyebrow{ display:inline-flex; align-items:center; gap:.65rem; font-size:.8125rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1.5rem; }
.bhero__eyebrow::before{ content:''; width:28px; height:2px; background:currentColor; }
.bhero__title{ font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,4.4rem); line-height:.98; letter-spacing:.005em;
  text-shadow:0 2px 50px rgba(0,0,0,.4); }
.bhero__title em{ font-style:normal; color:var(--gold); }
.bhero__sub{ font-size:clamp(1.0625rem,1.7vw,1.25rem); color:rgba(255,255,255,.82);
  max-width:52ch; margin-top:1.5rem; line-height:1.65; }
.bhero__actions{ display:flex; gap:.85rem; flex-wrap:wrap; margin-top:2.25rem; }
.bhero__note{ margin-top:1.5rem; font-size:.8125rem; color:rgba(255,255,255,.55); }
.bhero__note a{ color:var(--gold); font-weight:600; }
.bhero__note a:hover{ text-decoration:underline; }

/* ---- SEÇÃO ESCOPO ATUAL (honestidade — o que já está incluso) ---- */
.scope{ padding:clamp(4.5rem,9vw,6.5rem) 0; }
/* #escopo (Hub Unum) só — padding aumentado 23/07/2026-c: dobra passava rápido
   demais no scroll normal ("difícil achar o ponto da dobra" — feedback literal
   do Thiago). Mais respiro vertical = mais distância de scroll pra atravessar
   a seção, sem virar pin/scrub (isso fica pra quando a dobra 3 for desenhada).
   Escopo por body.page-unum #escopo de propósito: NÃO mexer no #escopo do
   HUB+ — o HUB+ REUSA o mesmo id="escopo" no seu próprio arquivo
   (.scope__grid, sem .scope__stage), então um seletor #escopo sozinho
   vazaria pra lá também; o body.page-unum (só existe no HTML do Hub Unum)
   evita isso. (#patronos, que também usava .scope, foi excluído 24/07/2026 —
   ver #vitrine, a nova dobra.)
   Valor cruzando vw+vh — fix 24/07/2026, ver o bloco grande de comentário
   junto de body.page-unum #escopo/#vitrine/etc. mais abaixo
   (perto de .topnav) pro porquê completo. */
body.page-unum #escopo{ padding:clamp(5.5rem,min(12vw,16vh),8rem) 0; }
.scope__lede{ max-width:42rem; margin:-1.25rem 0 2.25rem; font-size:1.0625rem; line-height:1.6; color:var(--taupe); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* ---- .logowall — vitrine da família Hub, marquee contínuo (23/07/2026). Ver
   comentário grande no HTML acima de .logowall pro porquê de cada logo real vs.
   texto-fallback. Máscara nas bordas (mask-image) some suavemente com o corte
   abrupto do overflow:hidden; .logowall__set duplicado 2x + animação translateX
   -50% linear = loop sem costura (as duas metades são idênticas, então o ponto
   -50% é visualmente indistinguível do início). Pausa no hover (padrão comum de
   logo wall) via animation-play-state. */
.logowall{ overflow:hidden; margin:0 0 2.75rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.logowall__track{ display:flex; width:max-content; animation:logowallScroll 34s linear infinite; }
.logowall:hover .logowall__track{ animation-play-state:paused; }
.logowall__set{ display:flex; align-items:center; flex:none; gap:clamp(2.5rem,6vw,4rem); padding-right:clamp(2.5rem,6vw,4rem); }
.logowall__item{ position:relative; display:flex; align-items:center; justify-content:center; height:44px; flex:none; }
/* ---- crossfade gray→color (23/07/2026): cada item empilha 2 <img> dedicados
   (arquivo *-gray.svg + *-color.svg entregues pelo Thiago — fidelidade maior
   que filter:grayscale() genérico). A cor nasce por cima, invisível; hover/
   focus sobe a opacity. transition só em opacity (nunca "all"), <300ms. */
.logowall__img{ height:100%; width:auto; max-width:150px; object-fit:contain; }
.logowall__img--color{ position:absolute; inset:0; height:100%; width:auto; margin:auto;
  opacity:0; transition:opacity .25s ease-out; }
.logowall__item:hover .logowall__img--color,
.logowall__item:focus-within .logowall__img--color{ opacity:1; }
.logowall__item--word{ font-family:var(--display); font-weight:500; text-transform:uppercase;
  letter-spacing:.03em; font-size:1.375rem; color:var(--taupe); white-space:nowrap; }
@keyframes logowallScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .logowall__track{ animation:none; }
  .logowall{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .logowall__img--color{ transition:none; }
}
@media (max-width:640px){
  .logowall__item{ height:36px; }
  .logowall__item--word{ font-size:1.125rem; }
}
.scope__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:start; }
.scope__card{ background:var(--cream); border:1px solid var(--soft); border-radius:14px; padding:2.25rem 2rem; }
.scope__card--incluso{ border-left:4px solid var(--gold); }
.scope__card h3{ font-size:1.375rem; font-weight:700; letter-spacing:-.01em; margin-bottom:.5rem; }
.scope__card p{ color:var(--taupe); font-size:.9375rem; line-height:1.6; }
.scope__list{ list-style:none; margin-top:1.25rem; display:grid; gap:.65rem; }
.scope__list li{ display:flex; gap:.65rem; font-size:.9375rem; color:#3a362f; align-items:flex-start; }
.scope__list li::before{ content:'✓'; color:var(--gold-deep); font-weight:700; flex:none; }
.scope__soon{ list-style:none; margin-top:1.25rem; display:grid; gap:.6rem; }
.scope__soon li{ display:flex; gap:.65rem; font-size:.9375rem; color:var(--taupe); align-items:flex-start; }
.scope__soon li::before{ content:'○'; color:var(--stone); flex:none; }
.tag-em-construcao{ display:inline-block; font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep); background:rgba(212,160,23,.14); border-radius:999px; padding:.2rem .6rem; margin-left:.5rem; vertical-align:middle; }

/* ============================================================
   .scope__stage — COMPOSIÇÃO DISPERSA (redesign 23/07/2026;
   CALIBRAÇÃO 23/07/2026-b — mais caos, pedido literal do Thiago)
   V1 (redesign inicial) tinha as 6 faixas cada uma "no seu canto"
   (quadrantes separados, quase sem overlap real) e direção espelhada
   pela posição (esquerda sempre rolando visualmente pra esquerda,
   direita sempre pra direita) — lido como simétrico/previsível demais.
   Fix desta calibração, 4 ajustes concretos:
   1) MAIS VARIÂNCIA DE ESCALA — 3 níveis nítidos: full-bleed (--1/--4,
      ~130-140% da tela), grande (--2/--5, ~80-86%) e pequena (--3/--6,
      ~30-34%) — antes as 6 viviam todas entre 48-64%, pouco contraste.
   2) CRUZAMENTO FÍSICO ENTRE FAIXAS — coordenadas escolhidas pra que as
      bounding boxes (already alargadas pela rotação + largura) se
      sobreponham de verdade em X e Y, em z-index diferentes: --3 (z4)
      cruza por cima de --1 (z1) no canto superior; --2 (z3) cruza --1 e
      --5; --6 (z4) cruza por cima de --4 (z1) no canto inferior. Não é
      só "atrás do texto" — é faixa sobre faixa.
   3) --1 E --4 ATRAVESSAM A TELA INTEIRA — .scope__stage virou full-bleed
      (100vw via left:50%/margin:-50vw, técnica clássica, funciona porque
      .scope__stage já é position:relative — não depende do padding do
      .container pai) para que "atravessar a tela" seja literal (edge-to-
      edge do viewport), não só do container de 1180px. overflow-x:hidden
      no <body> (home.css) é a rede de segurança contra qualquer resíduo
      de arredondamento.
   4) DIREÇÃO E VELOCIDADE RANDOMIZADAS, SEM CORRELAÇÃO COM A POSIÇÃO —
      faixas ancoradas à esquerda (--1/--3/--5) têm direções reverse/
      normal/reverse; ancoradas à direita (--2/--4/--6) têm normal/normal/
      reverse. Nenhum dos dois lados é uniforme — quebra o "esquerda rola
      pra esquerda". Durações não-monotônicas (46/21/17/39/29/15s): faixas
      pequenas correm rápido, as full-bleed (mais ao fundo, mais blur)
      correm devagar — a variação de ritmo reforça a profundidade.
   Reaproveita .logowall__track/__set/__item/__img (mesmo crossfade
   gray→color no hover, mesmo keyframe logowallScroll, zero duplicação) —
   só .scope__band muda posição/rotação/blur/opacidade/altura/direção/
   duração por faixa. Legibilidade do texto central continua o critério
   que nunca cede (emil-design-eng): z-index das faixas sempre abaixo de
   .scope__center (5), texto sempre com o véu radial por trás. Refs:
   impeccable/spatial-design (profundidade real via overlap físico, não
   só blur) + taste-skill (anti-slop: 6 faixas calibradas, não uma dúzia
   genérica; caos com hierarquia, não ruído). */
.scope__stage{
  position:relative; overflow:hidden; isolation:isolate;
  width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  /* min-height CRUZA vw E vh (fix 24/07/2026 — bug real reportado pelo Thiago:
     mesma largura de janela, mas MacBook embutido com menos altura útil de CSS
     px que o monitor Acer cortava conteúdo no primeiro; um clamp(...,Xvw,...)
     sozinho ignora quanto de ALTURA a tela tem disponível, então o mesmo valor
     em px "estoura" telas mais baixas na mesma largura. min(Xvw,Yvh) garante
     que o termo que vence é sempre o menor dos dois — em telas baixas, o vh
     assume e encolhe a faixa decorativa antes que ela precise de scroll.
     Técnica reaproveitável: ver nota completa em body.page-unum .slide abaixo. */
  min-height:clamp(20rem,min(58vw,52vh),40rem);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,min(4vw,4vh),2rem) 0;
  /* fade vertical no topo/base do PALCO (23/07/2026-c, fix reportado pelo Thiago:
     "no topo e na base eles cortam secos ao invés de terminar pra fora"). As
     faixas são clipadas pelo overflow:hidden deste mesmo elemento exatamente na
     borda superior/inferior — sem isso, qualquer faixa que cruze a borda vira
     uma linha reta. A máscara desvanece o conteúdo ANTES da borda, então o que
     o overflow:hidden clipa já está a ~0 de opacidade — nenhuma linha visível.
     Independente da máscara horizontal por-faixa (.scope__band, já existente). */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
}
.scope__band{
  position:absolute; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.scope__band .logowall__track{ will-change:transform; }
/* will-change promovido só durante a transição escopo->comparar (ligado/
   desligado pelo <script>, mesmo princípio do .unum-hero__portal.is-animating
   no crossfade do hero) — blur+scale+opacity simultâneos em 6 elementos são
   caros de compor; não manter a camada promovida fora da janela ativa. */
.scope__band.is-transitioning{ will-change:filter, opacity, transform; }
.scope__band .logowall__item{ height:var(--band-h,40px); }
/* posição/rotação/blur/opacidade/z-index/direção/duração — cada faixa um
   "objeto físico" a uma distância, ângulo e velocidade diferentes.
   --1 e --4: full-bleed, atravessam a tela inteira (ver comentário acima).
   --2 e --5: grandes, cruzam por cima/baixo de --1/--4 e entre si.
   --3 e --6: pequenas, sharp (blur 0), z-index mais alto — acentos que
   cruzam por cima de tudo nos cantos, contraste de escala máximo. */
.scope__band--1{ top:-6%; left:-18%; width:132%; z-index:1; opacity:.62;
  --band-h:36px; transform:rotate(-6deg); filter:blur(1.5px); }
.scope__band--1 .logowall__track{ animation-duration:46s; animation-direction:reverse; }
.scope__band--2{ top:8%; right:-16%; width:86%; z-index:3; opacity:.52;
  --band-h:46px; transform:rotate(11deg); filter:blur(2px); }
.scope__band--2 .logowall__track{ animation-duration:21s; }
.scope__band--3{ top:-3%; left:-5%; width:30%; z-index:4; opacity:.92;
  --band-h:30px; transform:rotate(-15deg); filter:blur(0px); }
.scope__band--3 .logowall__track{ animation-duration:17s; }
.scope__band--4{ bottom:-9%; right:-22%; width:140%; z-index:1; opacity:.55;
  --band-h:40px; transform:rotate(9deg); filter:blur(2.5px); }
.scope__band--4 .logowall__track{ animation-duration:39s; }
.scope__band--5{ top:44%; left:-13%; width:80%; z-index:2; opacity:.4;
  --band-h:26px; transform:rotate(-9deg); filter:blur(3.5px); }
.scope__band--5 .logowall__track{ animation-duration:29s; animation-direction:reverse; }
.scope__band--6{ bottom:-3%; right:-4%; width:34%; z-index:4; opacity:.85;
  --band-h:44px; transform:rotate(15deg); filter:blur(0px); }
.scope__band--6 .logowall__track{ animation-duration:15s; animation-direction:reverse; }
/* ---- texto central — sempre no topo (z-index 5), véu radial feathered por
   trás (não é uma caixa dura: some gradualmente, deixa a colagem "respirar"
   nas bordas do bloco de texto) pra garantir contraste mesmo com faixas
   passando atrás dos cantos. ---- */
.scope__center{
  position:relative; z-index:5; max-width:34rem; margin:0 auto; padding:1.75rem 1.5rem;
  text-align:center;
  background:radial-gradient(ellipse 78% 88% at 50% 50%,
    rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 52%, rgba(255,255,255,.6) 75%, rgba(255,255,255,0) 100%);
}
.scope__kicker{ font-size:clamp(.9375rem,1.6vw,1.0625rem); font-weight:500; color:var(--taupe); letter-spacing:.01em; margin-bottom:.4rem; }
.scope__headline{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,4.5rem); line-height:.96; letter-spacing:.005em; margin:0 0 1.1rem;
  background:linear-gradient(120deg,var(--gold-deep,#A31C7A) 15%,#7C3AED 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 10px rgba(163,28,122,.32)) drop-shadow(0 0 26px rgba(124,58,237,.26)) drop-shadow(0 0 56px rgba(163,28,122,.16));
}
.scope__lede--center{ margin:0 auto; max-width:29rem; }
@media (max-width:860px){
  /* .scope__stage já é vw-relative (full-bleed) — as % de largura das faixas
     escalam sozinhas com o viewport, sem precisar de override por breakpoint
     como na v1 (que era relativa ao .container, mais estreito no mobile).
     Aqui só reduzimos a CONTAGEM (6→4), não o caos: --2 e --4 saem (o
     "grande" da direita + o segundo full-cross), ficam --1 (full-cross,
     atravessa a tela mesmo no mobile) + --5 (grande) + --3/--6 (pequenas,
     sharp, cruzando os cantos) — os 3 níveis de escala continuam presentes. */
  .scope__stage{ min-height:clamp(24rem,74vw,32rem); }
  .scope__band--2,.scope__band--4{ display:none; }
}
@media (max-width:560px){
  .scope__lede--center{ max-width:24rem; }
}
@media (prefers-reduced-motion:reduce){
  .scope__band .logowall__track{ will-change:auto; }
  .scope__foot-arrow{ animation:none; }
}

/* ---- .scope__foot — "O que você assina", de volta na BASE da dobra 2
   (23/07/2026-c). Tinha saído do topo no redesign da composição dispersa;
   Thiago definiu o retorno aqui embaixo, fechando #escopo. Por ora é só um
   fecho tipográfico com indicador sutil de continuação — a mecânica de
   scroll-linked que puxa a dobra 3 (tabela ainda não desenhada) fica pra uma
   tarefa futura; não inventar essa coreografia agora. */
.scope__foot{ position:relative; z-index:2; margin-top:clamp(1.25rem,min(6vw,6vh),3rem); text-align:center; }
.scope__foot-label{ display:inline-flex; align-items:center; gap:.6rem; font-size:.75rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); }
.scope__foot-arrow{ display:inline-flex; animation:scopeFootBob 2.2s ease-in-out infinite; }
@keyframes scopeFootBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

/* ---- PRICING ---- */
.pricing{ padding:clamp(4.5rem,9vw,7rem) 0; background:var(--cream); }
.pricing__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; max-width:52rem; margin:0 auto; }
.plan{ position:relative; background:var(--white); border:1px solid var(--soft); border-radius:16px;
  padding:2.5rem 2rem 2.25rem; display:flex; flex-direction:column; transition:transform 240ms var(--ease),box-shadow 240ms; }
.plan:hover{ transform:translateY(-4px); box-shadow:0 22px 50px rgba(26,26,26,.10); }
.plan--best{ border-color:var(--gold); box-shadow:0 18px 44px rgba(212,160,23,.16); }
.plan__badge{ position:absolute; top:-.8rem; left:2rem; background:var(--gold); color:var(--ink);
  font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.35rem .75rem; border-radius:999px; }
.plan__name{ font-size:.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); }
.plan__price{ font-family:var(--display); font-weight:900; font-size:clamp(2.4rem,4vw,3rem); line-height:1; margin-top:.75rem; color:var(--ink); }
.plan__price small{ font-family:var(--sans); font-weight:600; font-size:1rem; color:var(--taupe); text-transform:none; letter-spacing:0; }
.plan__equiv{ margin-top:.6rem; font-size:.8125rem; color:var(--gold-deep); font-weight:600; }
.plan__desc{ margin-top:1rem; font-size:.9375rem; color:var(--taupe); line-height:1.55; flex:1; }
.plan .btn{ margin-top:1.75rem; justify-content:center; width:100%; }
.plan__owned{ display:none; margin-top:1rem; font-size:.8125rem; font-weight:600; color:#1e6b3a;
  background:rgba(30,107,58,.10); border-radius:8px; padding:.65rem .85rem; text-align:center; }
.plan__owned.is-shown{ display:block; }
.pricing__foot{ text-align:center; margin-top:2rem; font-size:.8125rem; color:var(--taupe); }

/* ---- UPGRADE / CROSS-LINK BANNER (Regra 7 — autorreferência) ---- */
.xlink{ padding:clamp(4rem,8vw,6rem) 0; }
.xlink__box{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  background:var(--ink); color:#fff; border-radius:18px; padding:clamp(2.25rem,5vw,3rem); position:relative; overflow:hidden; }
.xlink__box::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 50% 80% at 90% 50%,rgba(212,160,23,.18),transparent 65%); }
.xlink__text{ position:relative; z-index:1; max-width:34rem; }
.xlink__eyebrow{ font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.xlink__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(1.6rem,3vw,2.2rem);
  line-height:1.02; margin-top:.6rem; }
.xlink__desc{ font-size:.9375rem; color:rgba(255,255,255,.75); margin-top:.75rem; line-height:1.55; }
.xlink__cta{ position:relative; z-index:1; flex:none; }

/* ---- COMPARE TABLE (Hub Unum) ---- */
.compare{ padding:clamp(4.5rem,9vw,6.5rem) 0; }
/* border-radius/overflow:hidden REMOVIDOS 24/07/2026-b — clipavam o "cap" da
   coluna Unum que agora ultrapassa a borda superior/inferior (ver DOBRA 3
   abaixo). Raio dos 4 cantos reais vem por célula (thead th:first-child /
   tbody tr:last-child td:first-child aqui; os 2 cantos da direita vêm do
   próprio tratamento --unum, que já é mais largo que os outros). */
.compare__table{ width:100%; border-collapse:collapse; background:var(--white);
  border:1px solid var(--soft); font-size:.9375rem; }
.compare__table thead th:first-child{ border-top-left-radius:14px; }
.compare__table tbody tr:last-child td:first-child{ border-bottom-left-radius:14px; }
.compare__table th,.compare__table td{ padding:1rem 1.25rem; text-align:left; border-bottom:1px solid var(--soft); }
.compare__table thead th{ font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); background:var(--cream); }
.compare__table thead th:not(:first-child){ text-align:center; }
.compare__table tbody td:not(:first-child){ text-align:center; }
.compare__table tbody tr:last-child td{ border-bottom:0; }
.compare__table td:first-child{ font-weight:600; color:var(--ink); }
.compare__yes{ color:var(--gold-deep); font-weight:700; }
.compare__no{ color:var(--stone); }
/* padding+margin negativo simétrico — dá espaço pro poke-out/sombra da coluna
   Unum sem empurrar o layout ao redor (overflow-x:auto força overflow-y:auto
   também, por spec — "visible" nunca sobrevive sozinho num eixo quando o
   outro não é visible — por isso o respiro physical em vez de overflow:visible). */
/* FIX 24/07/2026-c: 16px/20px de respiro não bastava — o "cap" da coluna
   Unum (box-shadow 0 -14px 30px no topo, 0 12px 26px na base) espalha bem
   além disso e ficava com corte reto na borda do wrap (overflow-x:auto força
   overflow-y:auto também, por spec, então corta em todos os eixos). Subiu
   pra 64px topo/base (cobre offset+blur com folga) e 46px à direita (a
   coluna Unum é a última — o blur do cap também vaza pra fora horizontal,
   ali). Esquerda fica quase igual (a Free/Categoria não tem shadow saindo).
   Compensado por margin negativo simétrico — não empurra o layout ao redor
   (mesma técnica de antes, só com números maiores). */
.compare__wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:64px 46px 64px 8px; margin:-64px -46px -64px -8px; }
.compare__note{ display:block; font-size:.75rem; font-weight:400; color:var(--taupe); margin-top:.3rem; line-height:1.4; }
.compare__unit{ font-size:.8125rem; font-weight:500; color:var(--taupe); margin-left:.15rem; }
.tag-em-construcao--sm{ font-size:.625rem; padding:.15rem .5rem; margin-left:.35rem; }
/* ---- logo por célula (linhas Jogos/Apps exclusivos: logos ao lado do rótulo;
   Cult/Patrono: logo NO LUGAR da palavra — Regra 3, sempre asset original) ---- */
/* REFINAMENTO 24/07/2026-c: gap palavra→logos e logo→logo aumentados (pedido
   literal: "hoje está mais apertado") — .4rem/.5rem vira .75rem/.875rem. */
.compare__row-logos{ display:flex; align-items:center; flex-wrap:wrap; gap:.875rem; margin-top:.75rem; }
.compare__row-logo{ height:20px; width:auto; display:block; }
.compare__row-logo--label{ height:24px; margin-bottom:.2rem; }
/* Patrono (Seu Santo Patrono) — mesmo arquivo de sempre, só maior (pedido
   literal 24/07-c); modificador próprio pra não also aumentar o Cult, que
   usa a mesma --label base. */
.compare__row-logo--patrono{ height:34px; }

/* ============================================================
   DOBRA 3 — COMPARATIVO FREE / HUB+ / HUB UNUM (24/07/2026, refinado 24/07-b)
   Ver comentário grande no HTML (#comparar) pro racional completo da
   substituição + transição. Aqui só o visual: 3 colunas com cor própria —
   Free neutro (var(--taupe), sem cor de marca — "é o sem assinatura"),
   HUB+ mostarda #8C6208 no texto + ícone em tom NEUTRO cinza/branco (pedido
   literal do Thiago 24/07-b: "não usar o dourado saturado ali, algo mais
   sutil" — mesmo tom já usado como EXCEÇÃO deliberada em body.page-plus
   --accent-text-on-light, contraste ~5.4:1 verificado sobre branco; NÃO usar
   var(--gold) aqui dentro, que no tema Unum é fúcsia), Hub Unum var(--gold-deep)
   #A31C7A + gradiente (mesmo token AAA de .scope__headline) — é o produto
   herói, ganha o destaque mais forte: coluna inteira em "capa elevada"
   (cap opaco ultrapassando a borda do cabeçalho/última linha + parede lateral
   contínua via box-shadow inset), sem virar fill roxo chapado linha a linha
   (taste-skill anti-slop). Refs: stripe.com/pricing + ramp.com
   (site-corporate-refs.md, coluna de plano recomendado) + emil-design-eng
   (peso visual só onde há propósito — 1 produto herói, não 3 iguais).
   ============================================================ */
.compare__pull{ position:relative; }
.compare__pull-label{ display:block; text-align:center; font-size:.75rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:1.75rem; }
.compare__table--3col th:first-child,
.compare__table--3col td:first-child{ width:28%; }
.compare__h--free{ color:var(--taupe); }
.compare__h--plus{ color:#8C6208; }

/* ---- tier logo do cabeçalho — REFINAMENTO 24/07/2026-c: era ícone (SVG
   pequeno) + o nome escrito em fonte ao lado ("HUB+"/"Hub Unum"); pedido
   literal do Thiago: usar o LOGO COMPLETO de cada marca (hub-plus-logo.svg /
   hub-unum-logo.svg, os mesmos já usados nos heros de /hub-plus/ e
   #unum-hero) e tirar o texto solto — o logo completo já traz o nome,
   escrever de novo ao lado é redundante. Cor natural do arquivo (preto, sem
   fill definido); sobre o cap em gradiente UV do Unum vira branco (mesmo
   filter:invert que o ícone antigo já usava); sobre o dourado sólido do
   HUB+ (bloco abaixo) fica preto mesmo — par escuro-sobre-dourado já usado
   em .plan__badge nesta mesma folha. ---- */
.compare__tier{ display:inline-flex; align-items:center; gap:.4rem; }
.compare__tier-logo{ height:26px; width:auto; flex:none; }
.compare__h--unum .compare__tier-logo{ filter:invert(1); }
/* AJUSTE 24/07/2026-h — logo Hub Unum pequeno demais no cabeçalho (pedido
   literal do Thiago via screenshot com zoom). Causa: mesma regra de altura
   (26px) do hub-plus-logo.svg, mas o lockup Hub Unum é mais QUADRADO/alto
   (viewBox 580.52x381.09, razão ~1.52:1) contra o do HUB+, bem mais
   ACHATADO/largo (viewBox 560.78x205.32, razão ~2.73:1) — na mesma altura o
   Unum ocupa bem menos largura e lê como "menor" ao lado do HUB+ e do rótulo
   "Free". Override só na coluna Unum (não mexe no HUB+, que o Thiago não
   pediu pra alterar); +38% na altura. */
.compare__h--unum .compare__tier-logo{ height:36px; }

.compare__c--free{ color:var(--taupe); }
.compare__c--plus{ color:#8C6208; font-weight:600; }
.compare__c--unum{ font-weight:700; }
.compare__c.is-no{ color:var(--stone); font-weight:400; }

/* ---- coluna HUB+ — REFINAMENTO 24/07/2026-c: o wash neutro (cinza/taupe)
   de uma rodada anterior ficou fraco demais — pedido literal agora é o
   DOURADO DE VERDADE. var(--gold) NÃO serve aqui dentro: body.page-unum
   redefine esse token pra fúcsia (#C9409E, ver bloco "TEMAS POR TIER") e
   .escopo-theme não o redeclara de volta — por isso hardcoded #D4A017,
   o mesmo dourado-mostarda já usado no hero/tier-badge/plan--best de
   /hub-plus/index.html (não inventado, é o token raiz --gold de home.css).
   Cabeçalho em dourado SÓLIDO com texto/logo escuro por cima — mesmo par
   já usado em .plan__badge (fundo var(--gold), cor var(--ink)) — e SEM a
   "capa elevada" do Unum: mesma altura/nível das outras colunas (pedido
   literal). Linhas de dado em tint bem pálido, só um traço de cor. ---- */
/* especificidade alta de propósito: precisa bater a regra "FIX 24/07/2026"
   (body.page-unum .escopo-theme .compare__table thead th{background:var(--cream)})
   mais abaixo nesta folha, que existe pra corrigir o tema escuro vazando pra
   dentro de #comparar — sem esse escopo o cinza/cream ganharia da cor nova
   (achado ao vivo via screenshot: cabeçalho HUB+ continuava bege). */
body.page-unum .escopo-theme .compare__table--3col th.compare__h--plus{
  background:#D4A017; color:var(--ink); -webkit-text-fill-color:var(--ink);
}
.compare__table--3col td.compare__c--plus{ background:rgba(212,160,23,.08); }

/* ---- coluna Hub Unum — "capa elevada" (cabeçalho + linhas + fecho) ----
   REFINAMENTO 24/07/2026-d: 3 problemas apontados via screenshot com zoom
   no stroke da rodada -c (3px sólido #902BB4) — (1) fino demais; (2) cor
   CHAPADA destoando do degradê real do cabeçalho; (3) topo por DENTRO
   (inset) x resto por FORA (outset) — causa raiz: <td>/<th> com
   border-collapse:collapse CENTRALIZA a `border` real na linha de grade
   compartilhada entre colunas vizinhas (desloca ~1-2px em relação à caixa
   da própria célula), enquanto o pseudo do topo (::before, fora do modelo
   de colapso — não é célula) desenhava rente à própria caixa: dois
   sistemas de ancoragem diferentes na MESMA coluna, por isso o corte feio
   nos cantos superiores. (4) bug de linha dupla na base: o <td> da última
   linha tinha `border-bottom` PRÓPRIO *e* o ::after (fecho) desenhava
   outro `border-bottom` por cima — duas fontes pro mesmo traço.
   Fix: elimina TODA `border` real das células — substitui por CAMADAS DE
   BACKGROUND (não participam do colapso de tabela, não competem com
   padding/layout, sempre rente à própria caixa = MESMA ancoragem do topo
   à base, sem exceção). Topo e base viram blocos sólidos no MESMO degradê
   do cabeçalho — var(--unum-grad), definição única, reusada em todo canto.

   REFINAMENTO 24/07/2026-e — COLUNA INTEIRA EM DEGRADÊ CONTÍNUO. Pedido
   literal do Thiago: "essa coluna vai ser INTEIRA no ultravioleta, e não
   apenas topo e bordas... um degradê contínuo". Até aqui só cabeçalho +
   uma faixa de 14px em cada borda lateral de cada <td> eram gradiente; o
   miolo de cada célula era um wash pálido (rgba .09/.07). Agora a célula
   INTEIRA é preenchida pelo MESMO var(--unum-grad) — sem faixa lateral
   (redundante quando a célula toda já é o gradiente) e sem wash.
   Problema: a coluna é uma pilha de <th>/<td> com ALTURAS DE LINHA
   desiguais (nota "+ R$29,90 nos seguintes" etc. quebra diferente por
   largura/breakpoint) — não existe em CSS puro um "container" único atrás
   da coluna inteira pra pintar um só degradê (border-collapse não expõe
   isso). Técnica: cada célula usa var(--unum-grad) num background-size
   TOTAL igual à altura REAL medida da forma inteira (topo do cabo -14/-8px
   até a base do fecho +14/+8px — var(--g-h), definida 1x em .compare__pull
   e herdada por cascata) e um background-position-y NEGATIVO igual à
   distância real (px) daquela célula até o topo da forma (var(--g-off) por
   célula, e var(--g-off-after) pro fecho da última linha) — cada célula
   mostra sempre a fatia CERTA do MESMO degradê virtual, nunca um degradê
   próprio reiniciado (efeito "ladrilhado"). As duas variáveis são medidas
   e escritas via JS (getBoundingClientRect, ver <script> — bloco
   "unumColumnGradient") porque CSS puro não sabe a altura real de linhas
   de conteúdo variável; recalcula sozinho via ResizeObserver na tabela
   (troca de slide, resize, quebra de texto, imagem tardia). Texto branco
   (era var(--gold-deep), pensado pra fundo claro) e divisórias internas
   viram traço translúcido branco bem fraco (eram cinza var(--soft), feito
   pra fundo claro — ilegível/sujo sobre o degradê saturado). Gradiente em
   si mantido IDÊNTICO (#A31C7A→#7C3AED, mesmo AAA já validado atrás do
   texto branco do cabeçalho) — brand vence sobre o stack (regra 4); taste-
   skill/emil-design-eng consultados, sem motivo pra alterar tom/saturação,
   só a área de aplicação. ---- */
.compare__pull{ --unum-grad:linear-gradient(155deg,#A31C7A 0%,#7C3AED 100%); }

.compare__table--3col th.compare__h--unum{
  position:relative; z-index:1; color:#fff; -webkit-text-fill-color:#fff;
  background:none; border-radius:16px 16px 0 0;
  border-bottom:0; /* AJUSTE 24/07/2026-i: era border-bottom:1px solid var(--soft)
    (herdado da regra genérica .compare__table th,td) — border real 1px fora da
    padding-box do ::before (que para em bottom:0 = padding edge), sobrava uma
    fresta de ~1px do background cream REAL do th (perdeu a guerra de
    especificidade pro body.page-unum .escopo-theme .compare__table thead th,
    mas ainda pintava por baixo do ::before) tingida de leve pelo rgba(26,26,26,.1)
    — lia como um traço CLARO sólido ponta-a-ponta sobre o roxo, sem o
    degradê/fade das outras divisórias (achado ao vivo via screenshot com zoom).
    Mesmo fix das linhas de dado (::after dedicado) ao invés de border real. */
}
.compare__table--3col th.compare__h--unum::before{
  content:''; position:absolute; top:-14px; left:0; right:0; bottom:0; z-index:-1;
  background-image:var(--unum-grad); background-repeat:no-repeat;
  background-size:100% var(--g-h, 100%);
  background-position:left top; /* ::before É o topo da forma inteira → offset sempre 0 */
  border-radius:16px 16px 0 0;
  box-shadow:0 -14px 30px rgba(124,58,237,.4), 0 8px 22px rgba(163,28,122,.22);
}
/* ---- divisória cabeçalho→1ª linha de dado ("Jogos") — MESMO tratamento de
   ponta em degradê das divisórias entre linhas de dado (::after, fade
   transparent→cor→transparent, ver bloco "divisória entre linhas de dado"
   abaixo), mas MAIS FORTE/opaca (pico .34 vs .12): é a divisória mais
   importante da coluna, separa cabeçalho de corpo — pedido literal do
   Thiago. Só a intensidade muda; a técnica (fade nas pontas) é idêntica. ---- */
.compare__table--3col th.compare__h--unum::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.34) 50%, transparent);
  pointer-events:none;
}
.compare__table--3col td.compare__c--unum{
  position:relative; z-index:1; color:#fff; -webkit-text-fill-color:#fff;
  background-image:var(--unum-grad); background-repeat:no-repeat;
  background-size:100% var(--g-h, 100%);
  background-position:left var(--g-off, 0);
  border-bottom:0; /* REFINAMENTO 24/07/2026-f: era border-bottom-color
    rgba(255,255,255,.16) — border real só faz cor sólida, sem stops, não
    dá pra nascer/morrer transparente nas pontas (pedido literal). Vira
    pseudo-elemento dedicado (::after "divisória" logo abaixo). */
}
.compare__table--3col td.compare__c--unum .compare__note{ color:rgba(255,255,255,.78); }
/* ---- divisória entre linhas de dado da coluna Unum — pseudo-elemento
   próprio (não border real, ver acima), porque só um background-image com
   gradiente consegue nascer transparente numa ponta, ganhar opacidade no
   meio e voltar a transparente na outra. Sutil de propósito (pico de
   opacidade baixo, 1px) — é textura, não estrutura; a separação real
   entre linhas já vem do padding. :not(:last-child) porque a última linha
   não tem divisória embaixo dela — ali é o ::after "fecho" (escopo
   diferente, ver bloco seguinte), não uma linha de dado a mais. ---- */
.compare__table--3col tbody tr:not(:last-child) td.compare__c--unum::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12) 50%, transparent);
  pointer-events:none;
}
/* ---- BUG 24/07/2026-g ("pontas sobrepostas na base da coluna"): esta
   regra tinha border-radius:0 0 16px 16px na PRÓPRIA célula da última
   linha — coexistindo com o raio do ::after "fecho" (bloco seguinte),
   14px/8px mais abaixo. Duas curvas fechando quase no mesmo lugar (16px
   de raio > 14px de distância entre elas) liam-se como pontas duplicadas/
   sobrepostas (achado ao vivo via screenshot com zoom na base). Fechamento
   visual da coluna é responsabilidade ÚNICA do ::after — a célula real
   fica com a base reta, encostada nele, sem raio próprio. */
.compare__table--3col tbody tr:last-child td.compare__c--unum{
  border-radius:0;
}
.compare__table--3col tbody tr:last-child td.compare__c--unum::after{
  content:''; position:absolute; left:0; right:0; bottom:-14px; height:14px; z-index:-1;
  background-image:var(--unum-grad); background-repeat:no-repeat;
  background-size:100% var(--g-h, 100%);
  background-position:left var(--g-off-after, 100%);
  border-radius:0 0 16px 16px;
  box-shadow:0 12px 26px rgba(124,58,237,.28);
}

@media (max-width:640px){
  .compare__table--3col th,.compare__table--3col td{ padding:.8rem .7rem; font-size:.8125rem; }
  .compare__table--3col td:first-child{ font-size:.8125rem; }
  .compare__tier-logo{ height:20px; }
  .compare__h--unum .compare__tier-logo{ height:27px; } /* AJUSTE 24/07/2026-h, mesma proporção do bump desktop */
  .compare__row-logo{ height:16px; }
  .compare__row-logo--label{ height:20px; }
  .compare__row-logo--patrono{ height:26px; }
  .compare__table--3col th.compare__h--unum::before{ top:-8px; }
  .compare__table--3col tbody tr:last-child td.compare__c--unum::after{ bottom:-8px; height:8px; }
}

/* ---- (1) glow ultravioleta na base do slide — emana de #vitrine (escuro,
   dobra ultravioleta, ver 24/07/2026 mais abaixo), que vem logo a seguir
   (#exclusivos existia aqui antes, excluído). Mesmos tokens de .scope__headline (rgba(163,28,122)
   fúcsia + rgba(124,58,237) violeta), não uma cor nova. position:absolute
   (mesmo padrão de .bhero::before/.xlink__box::before já no arquivo); nunca
   overflow:hidden em .compare — ele É o .slide, overflow-y:auto é a rede de
   segurança de scroll interno (não mexer). ---- */
.compare{ position:relative; }
.compare > .container{ position:relative; z-index:1; }
.compare::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:min(40vh,320px);
  background:radial-gradient(ellipse 65% 100% at 50% 100%, rgba(124,58,237,.14), transparent 68%),
             radial-gradient(ellipse 45% 100% at 50% 100%, rgba(163,28,122,.13), transparent 62%);
  pointer-events:none; z-index:0;
}

/* ---- FAQ ---- */
.faq{ padding:clamp(4.5rem,9vw,6.5rem) 0; background:var(--cream); }
.faq__list{ max-width:44rem; margin:0 auto; display:grid; gap:.75rem; }
.faq__item{ background:var(--white); border:1px solid var(--soft); border-radius:10px; overflow:hidden; }
.faq__q{ width:100%; text-align:left; background:none; border:0; padding:1.25rem 1.5rem; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:1rem; font-weight:600; color:var(--ink); }
.faq__q::after{ content:'+'; font-size:1.3rem; font-weight:400; color:var(--gold-deep); transition:transform 200ms var(--ease); flex:none; }
.faq__item.is-open .faq__q::after{ transform:rotate(45deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height 260ms var(--ease); }
.faq__a p{ padding:0 1.5rem 1.25rem; font-size:.9375rem; color:var(--taupe); line-height:1.65; max-width:60ch; }

/* ---- REVEAL (usa .reveal/.is-in já existentes de home.css) ---- */

/* .exclu/.exclu__* (cards "Onboarding/Exclusivos") removidas 24/07/2026 — só
   existiam pro #exclusivos, excluído junto com #patronos (ver #vitrine, a
   nova dobra). Confirmado sem uso em hub-plus/index.html antes de remover. */

/* ============================================================
   DOBRA — VITRINE ULTRAVIOLETA (#vitrine, nova 24/07/2026)
   Substitui #exclusivos+#patronos (excluídos, pedido literal do Thiago —
   ver comentário grande no HTML). Fundo ultravioleta sólido em gradiente +
   8 screenshots REAIS do ecossistema (Regra 3 — nunca UI fabricada em
   código; capturados ao vivo via agent-browser/Playwright, ver lista
   completa no comentário do HTML) "jogados" no fundo em tamanhos/blur/
   opacidade variados — mesmo princípio de "objeto físico a uma distância"
   já usado em .scope__band, adaptado de faixas em marquee pra cards
   flutuantes estáticos (sem loop horizontal, só boiar + parallax).

   mix-blend-mode:luminosity em cada <img> — funde a foto com a cor de fundo
   (ultravioleta escuro) em vez de "colar" um retângulo de foto por cima: a
   camada mantém só a LUMINÂNCIA (claro/escuro) da captura, e herda matiz+
   saturação do fundo por baixo — resultado monocromático-tintado, coeso
   (taste-skill anti-slop: nunca colagem crua de screenshots).
   TESTADO AO VIVO (achado real, não teoria): a 1ª tentativa foi
   mix-blend-mode:screen, que é a leitura óbvia de "some no fundo escuro" —
   mas a maioria destas 8 capturas tem UI de tema escuro (Ordo, Agon, Pilares,
   Quiz), e em screen um pixel preto é IDENTIDADE (screen(preto,X)=X): a
   imagem inteira ficava literalmente invisível, só sobrava o fundo puro,
   confirmado via screenshot Playwright com blend removido a título de
   diagnóstico. luminosity preserva o CONTRASTE INTERNO da imagem (texto
   branco sobre fundo escuro continua lendo como texto branco sobre fundo
   escuro, só que agora tingido de roxo/fúcsia) — essa é a composição
   "monocromática-tintada" que o Thiago pediu, não um artefato que faz a
   imagem desaparecer.
   isolation:isolate em .uv cria o contexto de empilhamento onde o blend
   compõe contra o PRÓPRIO background do elemento (o gradiente ultravioleta),
   não contra o que estiver atrás da .slide inteira.

   Flutuação idle (.uv__shot-float, keyframe uvFloat) + parallax de mouse
   sutil (JS, ver initUvParallax no <script> — só desktop com ponteiro fino,
   só quando #vitrine é o slide atual, nunca sob prefers-reduced-motion).
   Truque de composição de transform: o parallax (JS) só escreve as custom
   properties --px/--py no elemento .uv__shot (nunca a propriedade
   `transform` direto) — a ROTAÇÃO fixa de cada shot mora na mesma regra
   `transform` via var(--uv-rot), então JS e CSS nunca competem pela mesma
   declaração; o BOB (translateY) da flutuação idle mora num elemento FILHO
   (.uv__shot-float) — animação CSS e transform JS em elementos/propriedades
   diferentes, sem conflito de cascata (animações CSS venceriam um
   style.transform inline no mesmo elemento, por isso a separação).

   Hierarquia de profundidade (blur↑ = mais longe = menos parallax, mesma
   lógica de profundidade real usada em .scope__band): --4 (Quiz, blur 0,
   sharp accent) e --1/--3/--6 (Hub/Romaria/Agon, quase nítidas) na frente;
   --2/--8 (Martirológio/Guia) meio-termo; --5 (Ordo) e --7 (Pilares, o mais
   largo e mais desfocado) ao fundo, quase textura. Texto (.uv__front)
   sempre estático, sempre z-index mais alto — legibilidade nunca cede
   (emil-design-eng, mesmo princípio de .scope__center); .uv__front::before
   é uma vinheta radial extra de segurança atrás do texto.

   .uv::after — escurecimento full-width na base, funde o fim desta dobra
   no #150F1C que #planos já usa (pedido literal: "precisa ter uma sombra...
   que vai fazer a dobra seguinte chegar naturalmente"); como o modelo é de
   slides (crossfade), o efeito prático é a transição genérica (fade) ficar
   mais suave visualmente, não uma continuidade de scroll real.

   Refs: impeccable/spatial-design (profundidade via blur+overlap físico) +
   taste-skill (anti-slop: blend screen com hierarquia de escala/blur, não
   ruído genérico) + emil-design-eng (motion como polish — <300ms não se
   aplica aqui, é motion ambiente contínuo, mas sempre reduced-motion-safe;
   will-change só quando teria custo real). site-corporate-refs.md não tem
   um padrão equivalente direto (colagem de produto flutuante); composição
   original calibrada a partir do princípio já aprovado em .scope__band.
   ============================================================ */
.uv{
  isolation:isolate;
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(139,92,246,.38), transparent 62%),
    radial-gradient(ellipse 60% 50% at 12% 100%, rgba(201,64,158,.22), transparent 60%),
    linear-gradient(165deg,#2C1152 0%,#1C0D33 48%,#150F1C 100%);
}
.uv__field{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.uv__shot{
  position:absolute; margin:0; display:block; overflow:hidden; border-radius:10px;
  top:var(--uv-top,auto); left:var(--uv-left,auto); right:var(--uv-right,auto); bottom:var(--uv-bottom,auto);
  width:var(--uv-w); aspect-ratio:var(--uv-ar); z-index:var(--uv-z,1);
  --px:0px; --py:0px;
  transform:translate(var(--px),var(--py)) rotate(var(--uv-rot,0deg));
  filter:blur(var(--uv-blur,0px)); opacity:var(--uv-op,1);
  mix-blend-mode:luminosity;
  transition:transform .2s linear;
}
.uv__shot-float{ display:block; width:100%; height:100%;
  animation:uvFloat var(--uv-dur,10s) ease-in-out infinite; animation-delay:var(--uv-delay,0s); }
.uv__shot img{ display:block; width:100%; height:100%; object-fit:cover; }
@keyframes uvFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(var(--uv-bob,-12px)); } }

/* posição/tamanho/rotação/blur/opacidade/profundidade — 8 "objetos físicos",
   cada um a uma distância/ângulo/velocidade diferente. --uv-depth (lido pelo
   JS via getComputedStyle) define o quanto ESTE shot reage ao parallax de
   mouse — mais nítido/perto = reage mais; mais desfocado/fundo = reage menos. */
.uv__shot--1{ /* Hub Católico — grande, quase nítido, canto superior esquerdo */
  --uv-top:8%; --uv-left:3%; --uv-w:min(25vw,320px); --uv-ar:720/486;
  --uv-rot:-6deg; --uv-blur:1px; --uv-op:.9; --uv-z:3; --uv-depth:22;
  --uv-dur:11s; --uv-bob:-11px; }
.uv__shot--2{ /* Martirológio — médio, canto superior direito */
  --uv-top:4%; --uv-right:5%; --uv-w:min(18vw,230px); --uv-ar:720/411;
  --uv-rot:7deg; --uv-blur:3.5px; --uv-op:.5; --uv-z:1; --uv-depth:10;
  --uv-dur:13.5s; --uv-bob:13px; animation-delay:-3s; }
.uv__shot--3{ /* Romaria+ — grande, quase nítido, canto inferior esquerdo */
  --uv-bottom:9%; --uv-left:5%; --uv-w:min(23vw,300px); --uv-ar:720/456;
  --uv-rot:5deg; --uv-blur:1.5px; --uv-op:.85; --uv-z:3; --uv-depth:20;
  --uv-dur:12s; --uv-bob:12px; animation-delay:-5s; }
.uv__shot--4{ /* Quiz Católico — pequeno, acento nítido, direita */
  --uv-top:23%; --uv-right:19%; --uv-w:min(11vw,130px); --uv-ar:1/1;
  --uv-rot:-10deg; --uv-blur:0px; --uv-op:.95; --uv-z:4; --uv-depth:28;
  --uv-dur:8.5s; --uv-bob:-9px; animation-delay:-2s; }
.uv__shot--5{ /* Ordo — pequeno, bem ao fundo, esquerda-meio */
  --uv-top:41%; --uv-left:13%; --uv-w:min(14vw,175px); --uv-ar:520/400;
  --uv-rot:-4deg; --uv-blur:5px; --uv-op:.4; --uv-z:1; --uv-depth:8;
  --uv-dur:14.5s; --uv-bob:10px; animation-delay:-7s; }
.uv__shot--6{ /* Agon (ainda não lançado) — alto/estreito, quase nítido, canto inferior direito */
  --uv-bottom:5%; --uv-right:7%; --uv-w:min(12vw,155px); --uv-ar:462/720;
  --uv-rot:8deg; --uv-blur:1px; --uv-op:.88; --uv-z:3; --uv-depth:22;
  --uv-dur:9.5s; --uv-bob:-12px; animation-delay:-4s; }
.uv__shot--7{ /* Pilares da Ordem — o mais largo e mais desfocado, atrás do texto, topo-centro */
  --uv-top:-4%; --uv-left:31%; --uv-w:min(27vw,350px); --uv-ar:720/310;
  --uv-rot:-3deg; --uv-blur:7px; --uv-op:.3; --uv-z:0; --uv-depth:5;
  --uv-dur:16s; --uv-bob:8px; animation-delay:-9s; }
.uv__shot--8{ /* Guia de Eventos Paroquiais — médio, base centro-direita */
  --uv-bottom:15%; --uv-right:27%; --uv-w:min(16vw,205px); --uv-ar:720/397;
  --uv-rot:6deg; --uv-blur:2.5px; --uv-op:.6; --uv-z:2; --uv-depth:14;
  --uv-dur:12.5s; --uv-bob:-10px; animation-delay:-6s; }

.uv__front{ position:relative; z-index:5; margin:0 auto; max-width:44rem; text-align:center; padding:2rem 1.5rem; }
.uv__front::before{ content:''; position:absolute; inset:-2.5rem -1.5rem; z-index:-1; border-radius:32px;
  background:radial-gradient(ellipse 80% 85% at 50% 50%, rgba(18,10,28,.55) 0%, rgba(18,10,28,.26) 55%, transparent 78%);
  pointer-events:none; }
.uv__headline{ font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.75rem,4.2vw,3.1rem); line-height:1.06; color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.5),0 0 46px rgba(139,92,246,.35); }
.uv__sub{ margin-top:1.25rem; font-size:clamp(1rem,1.6vw,1.125rem); color:rgba(255,255,255,.78);
  line-height:1.6; max-width:36rem; margin-left:auto; margin-right:auto; }
.uv__actions{ margin-top:2.25rem; display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap; }
/* secundário deliberadamente discreto — texto sublinhado, sem forma de botão
   (pedido literal: "chama menos ao clique"), pra "Quero ser Unum" ganhar
   toda a hierarquia visual (impeccable/ux-writing: 1 CTA primário por dobra). */
.uv__secondary{ font-size:.875rem; font-weight:600; color:rgba(255,255,255,.52);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.28);
  transition:color .2s var(--ease); }
.uv__secondary:hover{ color:rgba(255,255,255,.85); text-decoration-color:rgba(255,255,255,.5); }
/* escurecimento na base — funde #vitrine no #150F1C que #planos já usa */
.uv::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:min(38vh,300px); z-index:2;
  background:linear-gradient(to bottom, transparent, #150F1C 90%); pointer-events:none; }

@media (max-width:760px){
  /* menos cards no mobile — legibilidade e peso de composição, mesmo
     princípio de .scope__band (6→4 no mesmo breakpoint): tira os 2 mais
     ao fundo (Ordo, Pilares) e mantém os 6 com mais presença/nitidez. */
  .uv__shot--5,.uv__shot--7{ display:none; }
  .uv__actions{ gap:1rem 1.25rem; }
}
@media (prefers-reduced-motion:reduce){
  .uv__shot-float{ animation:none; }
  .uv__shot{ transition:none; }
}

@media (max-width:860px){
  .scope__grid{ grid-template-columns:1fr; }
  .compare__table{ font-size:.875rem; }
}
@media (max-width:620px){
  .pricing__grid{ grid-template-columns:1fr; }
  .xlink__box{ flex-direction:column; align-items:flex-start; }
  .xlink__cta{ width:100%; }
  .xlink__cta .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .plan,.faq__q::after{ transition:none; }
}

/* ============================================================
   TEMAS POR TIER — direção pedida 22/07: HUB+ claro+dourado ×
   Hub Unum escuro+neon fúcsia/roxo. Escopo via classe no <body>
   (page-plus / page-unum), reaproveitando os tokens do brand
   (--gold, --gold-deep, --taupe, --stone, --soft, --strong) pra
   não duplicar a folha — quando um token tem papel duplo (fundo
   de seção E de card, ex. --cream/--white) o override é feito
   componente a componente pra não quebrar contraste.
   Refs: stripe.com/pricing (glow radial multi-camada em hero
   escuro) e ramp.com (cor única aplicada com coragem) —
   site-corporate-refs.md. Contraste calibrado à mão (WCAG AA)
   pros pares texto/fundo novos; ver relatório de entrega.
   Trindade do gosto: emil-design-eng (glow como polish, não
   decoração gratuita) + impeccable/colorize (papel semântico do
   token, não cor solta) + taste-skill (anti-slop: neon = núcleo
   claro + bloom colorido, nunca fill mágenta chapado).
   ============================================================ */

/* ---- badge de tier com ícone (compartilhado, usa .tier-badge já existente) ---- */
.tier-badge__ic{ height:26px; width:auto; flex:none; }
.bhero__eyebrow--badge::before{ display:none; }

/* ---- marca d'água do hero (wordmark grande, glow, decorativo) ---- */
.bhero__mark{ position:absolute; z-index:0; right:clamp(-3rem,-1vw,1rem); top:50%;
  transform:translateY(-50%); width:clamp(240px,30vw,460px); pointer-events:none; user-select:none; }
@media (max-width:860px){ .bhero__mark{ display:none; } }

/* ============================================================
   HUB+ — claro, dourado, aberto
   ============================================================ */
body.page-plus{ --accent-text-on-light:#8C6208; /* gold escurecido — só texto/ícone sobre claro (contraste ~5.4:1) */ }

body.page-plus .topnav:not(.is-stuck){
  background:linear-gradient(to bottom, rgba(255,253,248,.85) 0%, rgba(255,253,248,.4) 70%, transparent);
}
body.page-plus .topnav__logo-img{ filter:none; }
body.page-plus .topnav__menu a{ color:var(--taupe); }
body.page-plus .topnav__menu a:hover{ color:var(--ink); }
body.page-plus .topnav__burger span{ background:var(--ink); }
body.page-plus .topnav:not(.is-stuck) .topnav__map{ background:rgba(26,26,26,.08); color:var(--ink); }
body.page-plus .topnav:not(.is-stuck) .topnav__map:hover{ background:rgba(26,26,26,.16); }

body.page-plus .bhero{ background:linear-gradient(175deg,#FFFDF8 0%,var(--cream) 100%); color:var(--ink); }
body.page-plus .bhero::before{
  background:
    radial-gradient(ellipse 58% 62% at 84% 2%, rgba(212,160,23,.32), transparent 62%),
    radial-gradient(ellipse 46% 46% at 4% 98%, rgba(212,160,23,.16), transparent 60%);
}
body.page-plus .bhero__eyebrow{ color:var(--accent-text-on-light); }
body.page-plus .bhero__eyebrow::before{ background:currentColor; }
body.page-plus .bhero__title{ text-shadow:none; }
body.page-plus .bhero__title em{ color:var(--accent-text-on-light); }
body.page-plus .bhero__sub{ color:#4a453c; }
body.page-plus .bhero__note{ color:var(--taupe); }
body.page-plus .bhero__note a{ color:var(--accent-text-on-light); }
body.page-plus .btn--ghost{ border-color:rgba(26,26,26,.24); color:var(--ink); }
body.page-plus .btn--ghost:hover{ border-color:var(--ink); background:rgba(26,26,26,.05); }

body.page-plus .tier-badge__ic{ filter:drop-shadow(0 0 8px rgba(212,160,23,.6)) drop-shadow(0 0 20px rgba(212,160,23,.3)); }
body.page-plus .bhero__mark{ opacity:.1; filter:drop-shadow(0 0 50px rgba(212,160,23,.9)); }

/* sheen — sweep estático disparado só no hover, decoração, não feedback de estado */
body.page-plus .btn--gold{ position:relative; overflow:hidden; isolation:isolate; }
body.page-plus .btn--gold::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.65) 48%,transparent 64%);
  transform:translateX(-130%); transition:transform 600ms var(--ease);
}
body.page-plus .btn--gold:hover::after{ transform:translateX(130%); }
body.page-plus .plan--best{ box-shadow:0 0 0 1px rgba(212,160,23,.4),0 24px 60px rgba(212,160,23,.22); }

/* xlink desta página promove o Hub Unum — prévia do fúcsia/roxo dele */
body.page-plus .xlink--teaser-unum .xlink__box::before{
  background:radial-gradient(ellipse 55% 85% at 88% 50%,rgba(201,64,158,.35),transparent 65%),
             radial-gradient(ellipse 40% 60% at 60% 10%,rgba(139,92,246,.2),transparent 60%);
}
body.page-plus .xlink--teaser-unum .xlink__eyebrow{ color:#D68CFF; }

@media (prefers-reduced-motion:reduce){
  body.page-plus .btn--gold::after{ display:none; }
}

/* ============================================================
   HUB UNUM — escuro, fúcsia/roxo, levemente neon, fechado
   ============================================================ */
body.page-unum{
  --gold:#C9409E;        /* fúcsia — fills/bordas/tags/checks */
  --gold-deep:#BB7BFF;   /* violeta claro — todo texto/link accent (~6:1 sobre --ink) */
  --taupe:rgba(255,255,255,.62);
  --stone:rgba(255,255,255,.34);
  --soft:rgba(255,255,255,.10);
  --strong:rgba(255,255,255,.22);
  background:#150F1C; color:rgba(255,255,255,.85);
}
body.page-unum .bhero,
body.page-unum .footer,
body.page-unum .pricing,
body.page-unum .faq{ background:#150F1C; }

/* cards/superfícies — tom mais claro que o fundo pra separar camada (--cream/--white têm papel duplo seção×card no CSS base, por isso override explícito aqui em vez de remapear o token) */
body.page-unum .scope__card,
body.page-unum .plan,
body.page-unum .compare__table,
body.page-unum .faq__item{ background:#241B30; border-color:rgba(255,255,255,.10); }
body.page-unum .compare__table thead th{ background:#1A1224; }

/* textos que usavam var(--ink) contando com fundo claro — precisam virar claros */
body.page-unum .plan__price,
body.page-unum .compare__table td:first-child,
body.page-unum .faq__q,
body.page-unum .sec-head__title,
body.page-unum .scope__card h3{ color:#fff; }
body.page-unum .plan__owned{ color:#4ADE80; background:rgba(74,222,128,.14); }
body.page-unum .tag-em-construcao{ background:rgba(187,123,255,.16); }
body.page-unum .scope__card--incluso{ border-left-color:#C9409E; }

/* exceção deliberada: eyebrow/link pequenos que usavam --gold puro como TEXTO
   (não como fundo) precisam do violeta claro pra manter contraste AA */
body.page-unum .eyebrow--dark,
body.page-unum .bhero__eyebrow{ color:#BB7BFF; }
/* exceção 2: este xlink promove o HUB+ — fica dourado de propósito (autorreferência) */
body.page-unum .xlink__eyebrow{ color:#D4A017; }

body.page-unum .topnav.is-stuck{ background:rgba(15,10,20,.92); border-bottom:1px solid rgba(201,64,158,.18); }
body.page-unum .topnav.is-stuck .topnav__logo-img{ filter:brightness(0) invert(1); }
body.page-unum .topnav.is-stuck .topnav__menu a{ color:rgba(255,255,255,.75); }
body.page-unum .topnav.is-stuck .topnav__menu a:hover{ color:#fff; }
body.page-unum .topnav.is-stuck .topnav__cta{ border-color:#C9409E; color:#E9A6FF!important; }

/* ============================================================
   MODELO DE SLIDES DE TELA CHEIA (redesign 23/07/2026-d)
   Pedido literal do Thiago: abandonar o scroll contínuo (travava/cortava feio
   em telas intermediárias) por um modelo de slides — 1 wheel-tick, 1 clique
   (esquerdo=avança / direito=volta), 1 tecla de seta ou 1 swipe = SEMPRE uma
   transição COMPLETA e determinística pro slide adjacente, nunca uma animação
   parcial dependente de quanto o usuário rolou. Ver <script> no fim do HTML
   pro controlador (goToSlide/onWheel/onClick/onKey/onTouch).
   As 7 seções (hero, escopo, comparar, vitrine, planos, xlink, faq — 24/07/2026:
   exclusivos+patronos saíram, vitrine entrou) viram `.slide`, empilhadas via
   position:absolute dentro de `.deck`
   (position:fixed, cobre a tela inteira). Só a `.is-current` fica visível/
   interativa; as outras ficam display:none (fora do fluxo, custo zero, tab-
   order automaticamente pulado — cobre o requisito de teclado sem trabalho
   extra: elemento display:none nunca é focável).
   Cada `.slide` é internamente scrollável (overflow-y:auto) — se o conteúdo
   for mais alto que a tela (comparar, faq com acordeões abertos), o wheel/
   swipe rola o conteúdo interno primeiro e só troca de slide quando já está
   na borda (topo/fim), ver checagem de scrollTop/scrollHeight no <script>.
   A transição hero→escopo é a ÚNICA com mecânica própria (o crossfade
   elaborado já aprovado — #uhPortal abaixo, só o GATILHO mudou de scroll-
   scrub pra .play()/.reverse() determinístico). As outras 6 usam a transição
   genérica abaixo: fade + leve translação vertical, 600ms, --ease do brand —
   intencional, não um corte seco (impeccable/motion-design + emil-design-eng:
   full-page transitions correm mais que os <300ms de UI comum, ~600-700ms é
   a faixa usual de slide-decks tipo fullPage.js). */
body.page-unum main{ position:relative; }
body.page-unum .deck{ position:fixed; inset:0; z-index:1; overflow:hidden; }
body.page-unum .slide{
  position:absolute; inset:0; width:100%; height:100vh; height:100svh;
  display:none; flex-direction:column;
  /* justify-content:SAFE center (não "center" puro) — fix de bug real achado
     via screenshot (Playwright): quando o conteúdo de um slide ultrapassa
     100vh (ex.: #faq, com o footer embutido), "center" puro faz o flexbox
     dividir o excesso IGUALMENTE acima E abaixo — a metade que sobra ACIMA
     fica inalcançável (scrollTop não vai negativo), cortando eyebrow/título de
     verdade fora da tela sem nenhum jeito de rolar até lá. "safe center" cai
     pra alinhamento no topo automaticamente SÓ quando o conteúdo não cabe —
     slides curtos continuam centralizados normalmente, só os mais altos que
     100vh (faq, e qualquer futuro que cresça) ficam ancorados no topo com o
     excesso 100% alcançável rolando pra baixo. */
  justify-content:safe center;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  opacity:0;
}
body.page-unum .slide.is-current,
body.page-unum .slide.is-leaving,
body.page-unum .slide.is-entering{ display:flex; }
body.page-unum .slide.is-current{ opacity:1; transform:translateY(0); z-index:2; pointer-events:auto; }
body.page-unum .slide:not(.is-current){ pointer-events:none; }
body.page-unum .slide.is-leaving,
body.page-unum .slide.is-entering{
  transition:opacity .6s var(--ease), transform .6s var(--ease); will-change:opacity,transform;
}
body.page-unum .slide.is-leaving{ z-index:2; opacity:0; }
body.page-unum .slide.is-leaving.dir-fwd{ transform:translateY(-3.5%); }
body.page-unum .slide.is-leaving.dir-back{ transform:translateY(3.5%); }
body.page-unum .slide.is-entering{ z-index:3; opacity:1; transform:translateY(0); }
body.page-unum .slide.is-entering.dir-fwd.pre{ opacity:0; transform:translateY(3.5%); }
body.page-unum .slide.is-entering.dir-back.pre{ opacity:0; transform:translateY(-3.5%); }
/* .pre por último de propósito — mesma especificidade de .dir-fwd/.dir-back,
   precisa vencer na cascata ENQUANTO presente (estado de partida, antes do
   reflow forçado no <script>); removida 1 frame depois, o elemento relaxa
   pro alvo definido pelas regras acima (transição visível). */
body.page-unum .slide.is-leaving.pre{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  body.page-unum .slide,
  body.page-unum .slide.is-leaving,
  body.page-unum .slide.is-entering{ transition:none; will-change:auto; }
}

/* ============================================================
   FIX 24/07/2026 — DOBRA CORTADA EM TELAS BAIXAS (bug real, testado pelo
   Thiago): a MESMA página, na MESMA largura de janela, cabia inteira no
   monitor Acer (mais alto/widescreen) mas cortava conteúdo no display
   embutido do MacBook (menos altura útil de CSS px na mesma largura).

   CAUSA: o ritmo vertical (padding das seções, min-height de .scope__stage,
   margin do .scope__foot) era dimensionado majoritariamente com
   clamp(min, Xvw, max) — Xvw reage só à LARGURA, nunca à altura. Em duas
   telas de mesma largura mas alturas diferentes, o resultado em px é
   IDÊNTICO — só a altura DISPONÍVEL muda. Consequência dupla:
   1) mais overflow do que o necessário em telas baixas (mais provável cair
      no fallback justify-content:safe→flex-start, ver comentário acima);
   2) PIOR: o piso (o valor MÍNIMO do clamp) de várias seções — 4rem/4.5rem
      (64-72px) — ficava ABAIXO da altura real do .topnav fixo (~78px,
      ver scroll-padding-top:78px em home.css). Quando o fallback de topo
      batia, o início do conteúdo (eyebrow/título) literalmente nascia POR
      BAIXO do nav — cortado, e como já estava em scrollTop:0, não tinha
      "mais um pouco de scroll" que resolvesse (exatamente o relato do
      Thiago). Este é o bug raiz, não só estética.

   FIX — TÉCNICA REAPROVEITÁVEL (registrar pra todo site do ecossistema,
   ver também ~/.claude/skills/site-cinematografico/SKILL.md §4):
   a) cruzar vw E vh no termo preferido do clamp: min(Xvw,Yvh) — o menor
      dos dois sempre vence, então em telas proporcionalmente mais baixas
      (mesma largura, menos altura — o caso real do MacBook) o termo vh
      passa a mandar e o valor encolhe sozinho, sem esperar um breakpoint.
      Múltiplo usado aqui: Y ≈ X×1.6-1.7 (equivalência aproximada num
      desktop 16:9 comum; abaixo disso — tela mais "baixa" que 16:9 — o vh
      já assume e protege antes de estourar).
   b) o PISO (mínimo do clamp) de todo padding-top que serve de topo de
      seção precisa ser ⩾ altura real de qualquer header/nav FIXO por cima
      (aqui, .topnav ~78px) — não só "razoavelmente pequeno". Piso escolhido
      abaixo: 5.5rem (88px), ~10px de folga sobre o nav. Isso garante que
      MESMO no fallback de topo (overflow real, ver comentário da regra
      .slide acima) o conteúdo nunca nasce atrás do nav — só entra em jogo
      quando a tela é curta demais pro conteúdo caber de um jeito ou de
      outro, e aí sim internal scroll (já suportado) resolve o resto.
   O slide #comparar continua podendo precisar de scroll interno por design
   (tabela densa) — o floor nav-safe abaixo cobre isso, com o piso correto.
   ATUALIZAÇÃO 24/07/2026-f: #planos/#xlink/#faq SAÍRAM desta regra — não são
   mais `.slide` (viraram scroll contínuo normal, ver bloco "SCROLL CONTÍNUO"
   logo abaixo), então voltam a usar só o padding base de `.pricing`/`.xlink`/
   `.faq` (sem o piso nav-safe, que só fazia sentido pro fallback de
   centralização vertical de um slide de tela cheia). ============================================================ */
body.page-unum #vitrine,
body.page-unum #comparar{ padding:clamp(5.5rem,min(9vw,15vh),6.5rem) 0; }

/* ============================================================
   SCROLL CONTÍNUO — a partir de #planos (24/07/2026-f)
   Pedido literal do Thiago: "a partir da dobra de planos podemos fazer uma
   rolagem simples pra baixo apenas". O deck de slides (acima) agora cobre só
   hero→escopo→comparar→vitrine; #planos/#xlink/#faq viraram `#scrollFlow`,
   fluxo de documento normal (altura natural, sem position:fixed/lock).
   Handoff: enquanto pinado (estado default, sem a classe abaixo), `.deck`
   continua position:fixed (regra já existente acima) e `#deckSpacer` reserva
   1 viewport no documento pra ele (senão o documento não teria NENHUMA altura
   reservada — fixed não ocupa espaço de layout — e `#scrollFlow` "colaria" no
   topo por baixo do deck). No instante em que o <script> solta o deck
   (unpinDeck(), disparado ao avançar da vitrine — wheel/clique/seta/CTA
   "Quero ser Unum" — ou por um link direto pra #planos/#xlink/#faq), aplica
   `.is-deck-unpinned` no <body>: `.deck` vira position:relative ocupando ELE
   MESMO 1 viewport (mostrando a vitrine parada ali, como qualquer seção
   normal) e `#deckSpacer` some (não precisa mais reservar nada, o próprio
   deck já ocupa o espaço). Dali em diante é scroll nativo do navegador.
   Reversível: rolar de volta pra cima até bater no topo do documento
   (scrollY 0 — topo da vitrine) reengata (pinDeck(), no <script>) — mesma
   técnica de position:fixed→normal+spacer já usada antes na transição
   hero→escopo, adaptada aqui pro handoff deck↔scroll. ============================================================ */
body.page-unum .deck-spacer{ height:100vh; height:100svh; }
body.page-unum.is-deck-unpinned .deck{
  position:relative; inset:auto; height:100vh; height:100svh; z-index:auto;
}
body.page-unum.is-deck-unpinned .deck-spacer{ display:none; }
/* ---- FIX 24/07/2026-g — TRAVAMENTO ao rolar de volta pra dentro do deck
   (bug real, REGRESSÃO reportada pelo Thiago: "a rolagem não volta mais e
   fica meio travado no meio"). Causa raiz encontrada via Playwright, rolando
   de verdade (não só disparando eventos sintéticos isolados): a regra base
   de `.slide` (acima) dá a TODO slide `overflow-y:auto; overscroll-
   behavior:contain` — necessário ENQUANTO pinado, pra rolar o conteúdo
   interno de um slide mais alto que a tela sem vazar pro documento (ver
   comentário grande em ".slide" acima). #vitrine continua `.is-current`
   o tempo todo depois do handoff (nunca perde a classe) — então, mesmo
   DEPOIS de solto (.is-deck-unpinned), ele continua sendo essa "ilha" de
   scroll com overscroll-behavior:contain. No instante em que o usuário rola
   de volta pra cima e o cursor (parado, em coordenada de VIEWPORT) volta a
   sobrepor o retângulo de #vitrine (que agora vive nos primeiros 100vh do
   documento, ocupando o próprio `.deck` em fluxo normal), o `contain` BLOQUEIA
   o scroll-chaining pro documento — a rolagem trava ali, sem repassar nenhum
   delta pro `window`, MESMO #vitrine não tendo conteúdo interno pra rolar.
   Medido: scrollY parava exatamente nesse ponto e nunca mais se movia,
   pra cima OU pra baixo, com o cursor sobre #vitrine. Fix: neutraliza esse
   comportamento de "ilha" especificamente no slide atual ENQUANTO o deck
   está solto — dali em diante #vitrine é só mais uma seção em fluxo normal
   (como #planos/#xlink/#faq), sem precisar de scroll interno próprio. */
body.page-unum.is-deck-unpinned .deck .slide.is-current{
  overflow-y:visible; overscroll-behavior:auto;
}

/* ---- nav sempre transparente + logo adaptativo por slide (pedido literal:
   "só o logo do hub num canto e o hub id no outro... nav sempre sem fundo").
   Branco quando o slide atual é escuro (todos, exceto #escopo); "ultravioleta"
   (mesmo tom AAA já usado pelo --gold-deep do .escopo-theme, #A31C7A) quando o
   slide atual é claro (#escopo e #comparar, os 2 slides claros). Crossfade de 2 <img> empilhados — nunca
   filter:invert em cima de um SVG já colorido (Regra 3): hub-logo-
   ultravioleta.svg é uma variante de COR do MESMO vetor original (mesmo
   padrão de hub-logo-branco.svg/hub-logo-mostarda.svg, só troca o fill do <g>
   raiz — nada desenhado em código). ---- */
body.page-unum .topnav,
body.page-unum .topnav.is-stuck{ background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0; }
body.page-unum .topnav__logo{ position:relative; display:inline-flex; }
body.page-unum .topnav__logo-img{ position:static; height:30px; width:auto; filter:none; opacity:1; transition:opacity .2s var(--ease); }
body.page-unum .topnav__logo-img--light{ position:absolute; inset:0; margin:auto; opacity:0; }
body.page-unum .topnav.is-onlight .topnav__logo-img--dark{ opacity:0; }
body.page-unum .topnav.is-onlight .topnav__logo-img--light{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  body.page-unum .topnav__logo-img{ transition:none; }
}

/* neon — núcleo claro + bloom colorido em camadas (nunca fill mágenta chapado, anti-slop) */
body.page-unum .bhero::before{
  background:
    radial-gradient(ellipse 55% 55% at 80% 4%, rgba(201,64,158,.32), transparent 60%),
    radial-gradient(ellipse 45% 45% at 6% 94%, rgba(139,92,246,.26), transparent 60%),
    radial-gradient(ellipse 32% 42% at 50% 45%, rgba(201,64,158,.14), transparent 65%);
  animation:unumPulse 7s ease-in-out infinite;
}
@keyframes unumPulse{ 0%,100%{ opacity:.88 } 50%{ opacity:1 } }
body.page-unum .bhero__title em{
  color:#fff;
  text-shadow:0 0 6px rgba(255,255,255,.75),0 0 18px rgba(201,64,158,.85),
    0 0 42px rgba(139,92,246,.6),0 0 84px rgba(201,64,158,.32);
}
body.page-unum .tier-badge__ic{
  filter:brightness(0) invert(1)
    drop-shadow(0 0 4px rgba(255,255,255,.7)) drop-shadow(0 0 14px rgba(201,64,158,.85))
    drop-shadow(0 0 32px rgba(139,92,246,.55));
}
body.page-unum .bhero__mark{
  opacity:.16;
  filter:brightness(0) invert(1)
    drop-shadow(0 0 55px rgba(201,64,158,.85)) drop-shadow(0 0 120px rgba(139,92,246,.5));
}
body.page-unum .btn--gold{
  background:linear-gradient(135deg,#C9409E,#8B5CF6); color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 30px rgba(139,92,246,.35);
}
body.page-unum .btn--gold:hover{
  background:#fff; color:var(--ink);
  box-shadow:0 0 24px rgba(201,64,158,.55),0 16px 40px rgba(0,0,0,.4);
}
body.page-unum .plan--best{
  border-color:#C9409E;
  box-shadow:0 0 0 1px rgba(201,64,158,.35),0 24px 60px rgba(139,92,246,.28);
}
body.page-unum .plan__badge{ background:linear-gradient(120deg,#C9409E,#8B5CF6); color:#fff; }
body.page-unum .plan:hover{ box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 40px rgba(139,92,246,.2); }
body.page-unum .footer{ border-top-color:#C9409E; }
/* ---- FIX 24/07/2026-g — FAQ "colada" no footer (bug real reportado pelo
   Thiago). Causa: no Hub Unum o <footer> vive DENTRO de #faq (footer
   embutido, ver comentário no HTML), diferente do HUB+ (onde .footer é
   irmão de #faq, fora da section — lá o padding-bottom de .faq já cria o
   respiro certo antes do footer). Aqui, como o footer é o ÚLTIMO filho de
   #faq, o padding-bottom do .faq (clamp 4.5-6.5rem) acaba TODO depois do
   footer — nenhum respiro sobra ENTRE a última pergunta e a borda superior
   (border-top dourada) do footer, que fica colada, 0px de gap (medido via
   Playwright). Fix: dá esse respiro no lugar certo — no fim do .container
   que fecha o bloco de perguntas, específico desta página (não mexe no
   .faq base, que outras páginas com footer normal/irmão continuam usando
   sem problema). */
body.page-unum .faq > .container{ margin-bottom:clamp(3.5rem,7vw,5.5rem); }

@media (prefers-reduced-motion:reduce){
  body.page-unum .bhero::before{ animation:none; opacity:1; }
  body.page-unum .bhero__title em{ text-shadow:0 0 4px rgba(255,255,255,.6),0 0 14px rgba(201,64,158,.6); }
}

/* ============================================================
   HERO UNUM — REDESIGN MINIMALISTA (23/07/2026)
   Classe própria (.unum-hero), isolada de .bhero — hub-plus não é tocado.
   Paleta idêntica à existente (#150F1C + glow fúcsia/violeta), só a composição muda.
   ============================================================ */
/* ---- .unum-hero — agora É um `.slide` (position:absolute;inset:0;height:
   100svh definidos ali); aqui só a composição visual própria: fundo sólido +
   glow + centralização do conteúdo nos dois eixos (as outras seções usam só
   justify-content:center herdado de .slide, com align-items:stretch pro
   .container interno decidir a largura — o hero quer os DOIS eixos centrados
   porque #uhStage é um bloco único, sem .container). Redesign 23/07/2026-d:
   o pin/spacer manual (is-pinned/is-past/#uhSpacer) que existia pra simular
   "hero fixo durante o scroll" SAIU — o modelo de slides já resolve isso de
   graça (o hero é só mais um `.slide`, nunca compete com scroll de documento
   nenhum). z-index vem de .slide (is-current/is-leaving/is-entering). */
body.page-unum .unum-hero{
  align-items:center;
  background:#150F1C; overflow:hidden; padding:0 1.25rem;
}
body.page-unum .unum-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 55% at 80% 4%, rgba(201,64,158,.32), transparent 60%),
    radial-gradient(ellipse 45% 45% at 6% 94%, rgba(139,92,246,.26), transparent 60%),
    radial-gradient(ellipse 32% 42% at 50% 45%, rgba(201,64,158,.14), transparent 65%);
  animation:unumPulse 7s ease-in-out infinite;
}
/* ---- .is-bg-suppressed — kill-switch do glow radial de fundo (fix banding
   23/07/2026 v4). Bug reportado pelo Thiago via screenshot novo: mesmo com os
   CANTOS já resolvidos (v3, #uhWhiteout full-bleed), sobravam linhas/faixas
   verticais sutis (Mach banding) em ALGUNS frames da transição. Diagnóstico
   dele, correto: na fase em que a tela já deveria estar quase 100% branca
   (ícone dominando/saindo), ainda tinham DOIS gradientes radiais translúcidos
   sendo compostos por baixo do #uhWhiteout parcial — o próprio ::before (pulso
   fúcsia/violeta perpétuo, sempre ligado, 7s infinite) E o #uhFlash (holofote
   radial de 4 color-stops que, por bug, nunca voltava a opacity:0 depois do
   pico — ficava em opacity:1 da fase 2 até o fim do pin). Um radial-gradient
   de poucos color-stops, muito grande, com alfa variando lentamente, é
   receita clássica de Mach banding — e ESTAR translúcido por baixo de um
   #uhWhiteout ainda não 100% opaco multiplica o efeito.
   Fix: esta classe (ligada/desligada pelo <script>, no mesmo tween que já
   apaga o ícone — ver exitTl) força ::before a opacity:0 (animation pausada,
   !important pra vencer o unumPulse) exatamente no instante em que o ícone
   começa a sumir — ou seja, achamos "a linha" e cortamos ela na régua, em vez
   de deixar um resíduo translúcido. O #uhFlash ganhou tween próprio de volta
   pra 0 logo em seguida (ver <script>). Do desse ponto em diante até o
   #uhWhiteout ficar 100% opaco, a ÚNICA coisa por baixo dele é o
   background:#150F1C liso do .unum-hero (cor sólida, sem gradiente) — uma
   cor sólida sob um overlay de opacidade uniforme nunca tem variação espacial,
   logo nunca bande. transition suaviza o corte (evita "pop"); animation-play-
   state:paused evita gasto de CPU/GPU pintando uma camada invisível. ---- */
body.page-unum .unum-hero.is-bg-suppressed::before{
  transition:opacity .25s ease-out;
  animation-play-state:paused;
  opacity:0 !important;
}
/* #uhIcon entra no MESMO kill-switch (medido pixel-a-pixel, não só no olho:
   Playwright + leitura direta do PNG cru achou um degrau real de ~30/255 na
   borda do ícone gigante enquanto ele ainda fazia seu próprio fade de .15s via
   GSAP — o ícone, escalado 9x com drop-shadow de 20px/60px, não é um círculo
   perfeito, e essa forma reta-com-cantos-arredondados tem um falloff diferente
   nas bordas retas vs. nos cantos, virando um resíduo de "linha" sutil bem no
   ponto que o Thiago reportou. Cortar ele junto com ::before, em vez de deixar
   seu próprio tween de opacity terminar sozinho, elimina esse resíduo — o
   #uhWhiteout por baixo já está suficientemente opaco nesse instante (ver
   duration nova no <script>) pra o corte não aparecer como "pop". */
body.page-unum .unum-hero.is-bg-suppressed #uhIcon{
  transition:opacity .25s ease-out;
  opacity:0 !important;
}
body.page-unum .unum-hero__sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
body.page-unum .unum-hero__stage{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  flex-wrap:nowrap; gap:clamp(1.25rem,4.5vw,3.75rem); width:100%; max-width:72rem;
  will-change:transform;
}
body.page-unum .unum-hero__word{
  /* tipografia discreta de propósito — o ícone é o elemento dominante do hero;
     a palavra vira legenda espaçada ao lado dele, sem brilho, sem protagonismo. */
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  font-size:clamp(.6875rem,1.65vw,.9375rem); letter-spacing:.28em; line-height:1;
  color:var(--taupe); white-space:nowrap;
}
body.page-unum .unum-hero__icon{
  /* min(vw,vh) — fix 24/07/2026, mesma técnica do resto do arquivo: o ícone é
     quadrado, então sua altura conta tanto quanto sua largura pro fit vertical
     do hero em telas baixas/largas (ex. ultrawide). */
  flex:0 0 auto; display:flex;
  width:clamp(52px,min(10.5vw,16vh),132px); height:clamp(52px,min(10.5vw,16vh),132px);
}
body.page-unum .unum-hero__icon img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:brightness(0) invert(1)
    drop-shadow(0 0 4px rgba(255,255,255,.7)) drop-shadow(0 0 20px rgba(201,64,158,.85))
    drop-shadow(0 0 60px rgba(139,92,246,.55));
}
body.page-unum .unum-hero__cue{
  position:absolute; left:50%; bottom:clamp(1.5rem,4vh,3rem); transform:translateX(-50%);
  width:1px; height:34px; background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);
}
@media (max-width:640px){
  body.page-unum .unum-hero__stage{ gap:clamp(.6rem,3.6vw,1.1rem); }
}
@media (prefers-reduced-motion:reduce){
  body.page-unum .unum-hero::before{ animation:none; opacity:1; }
  body.page-unum .unum-hero__cue{ display:none; }
}

/* ---- flash de transição (portal) — lavagem rosa/branca radial, some por padrão,
   o <script> no fim do arquivo sobe a opacidade dela só durante o crescimento do
   ícone, ANTES do #uhWhiteout/#uhPortal (abaixo) entrarem. É só o brilho de
   "abertura da porta" — sendo um radial-gradient, ele NUNCA cobre os cantos da
   tela (por design, é um holofote centrado), então quem garante a tela ficar
   100% branca de canto a canto é a camada full-bleed #uhWhiteout logo abaixo,
   não este flash. ---- */
body.page-unum .unum-hero__flash{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%, #fff 0%, rgba(255,255,255,.9) 42%, rgba(201,64,158,.35) 72%, transparent 100%);
}
@media (prefers-reduced-motion:reduce){
  body.page-unum .unum-hero__flash{ display:none; }
}

/* ---- #uhWhiteout — clareamento FULL-BLEED sólido, sem radial-gradient e sem
   scale (23/07/2026, fix vinheta nos cantos). Bug reportado pelo Thiago via
   screenshot do meio da transição: o #uhPortal escala .24→1, e como seu
   próprio fundo branco (herdado de .escopo-theme) escalava JUNTO, no meio do
   trajeto o retângulo branco era menor que o viewport — sobrava roxo do hero
   visível nos cantos/bordas mesmo com o centro já claro. Esta camada resolve
   isolando a responsabilidade: cobre 100% do viewport o tempo todo (mesma
   técnica full-bleed do #uhPortal, left/right negativos compensando o padding
   do .unum-hero) e só anima opacity (nunca transform/blur) — garante branco
   sólido de canto a canto antes do #uhPortal (conteúdo escalando por cima)
   ficar nítido. z-index entre o flash (2) e o #uhPortal (4). ---- */
body.page-unum .unum-hero__whiteout{
  position:absolute; top:0; bottom:0; left:-1.25rem; right:-1.25rem;
  z-index:3; pointer-events:none; opacity:0; background:#fff;
}
@media (prefers-reduced-motion:reduce){
  body.page-unum .unum-hero__whiteout{ display:none; }
}

/* ============================================================
   .escopo-theme — tema claro compartilhado (23/07/2026; 24/07/2026: #comparar
   também entrou, ver redesign da dobra 3 no HTML)
   Usado em TRÊS lugares: a seção real #escopo, a nova #comparar (dobra 3, mesma
   paleta clara pedida pelo Thiago) E o #uhPortal (a camada de crossfade dentro
   do hero pinado, ver abaixo). Precisa ser a MESMA classe em #escopo e no
   #uhPortal porque o #uhPortal clona o conteúdo real de #escopo via JS — se as
   cores/tokens não fossem idênticas, o "pouso" do crossfade não bateria com o
   #escopo de verdade (que aparece um instante depois, já no scroll normal).
   Redeclara os tokens (--gold-deep/--taupe/--stone/--soft) pra cascata resolver
   sozinha em quase tudo que já usa var(...) (checkmarks, eyebrow, bordas) — só
   3 regras precisam de override direto porque o tema escuro as sobrescreveu com
   valor hardcoded (não var): fundo do card, cor do h3, badge "Em construção".
   --gold-deep vira #A31C7A (não o #BB7BFF do tema escuro, claro demais sobre
   branco) — ~7:1 de contraste, AAA.
   ============================================================ */
body.page-unum .escopo-theme{
  background:var(--white); color:var(--ink);
  --gold-deep:#A31C7A;
  --taupe:#7A7066;
  --stone:#D0CCC4;
  --soft:rgba(26,26,26,.10);
  --strong:rgba(26,26,26,.20);
}
body.page-unum .escopo-theme .sec-head__title,
body.page-unum .escopo-theme .scope__card h3{ color:var(--ink); }
body.page-unum .escopo-theme .scope__card{ background:var(--cream); border-color:var(--soft); }
body.page-unum .escopo-theme .tag-em-construcao{ background:rgba(163,28,122,.12); }
/* ---- FIX 24/07/2026: .compare__table herdava o override do TEMA ESCURO
   (body.page-unum .compare__table{ background:#241B30 } + thead #1A1224 +
   td:first-child #fff — ver bloco "TEMAS POR TIER" acima) porque esses 3
   overrides miram a classe sozinha, sem saber que a tabela agora também
   vive dentro de #comparar, que é .escopo-theme (claro). Sem este fix a
   tabela nova renderizava com cartão ESCURO sobre fundo BRANCO — bug real,
   achado via screenshot Playwright, não só teoria. Mesmo padrão do fix já
   aplicado ao .scope__card duas linhas acima. */
body.page-unum .escopo-theme .compare__table{ background:var(--white); border-color:var(--soft); }
body.page-unum .escopo-theme .compare__table thead th{ background:var(--cream); }
body.page-unum .escopo-theme .compare__table td:first-child{ color:var(--ink); }

/* ============================================================
   #uhPortal — CROSSFADE hero→#escopo NO MESMO QUADRO DE TELA (23/07/2026, v2)
   Pedido literal do Thiago (a v1 com ScrollTrigger próprio em #escopo estava
   ERRADA — ainda lia como 2 seções empilhadas, com linha de costura visível):
   "a tela de cima tem que ir ficando branca, e ao mesmo tempo o conteúdo da
   dobra 2 vai surgindo do centro, pequena, borrada" — as duas coisas TÊM que
   coexistir na MESMA área de tela ao mesmo tempo, não uma "revelando" a outra
   por baixo.

   Por que a v1 falhava, medido no DOM (não teoria): o #escopo real só fica
   VISUALMENTE por cima do hero pinado depois que o pin solta — durante todo o
   pin, mesmo com scrollY avançando e o rect de #escopo se aproximando do topo
   da viewport por baixo dos panos, o hero pinado (fixed/transform, fora do
   fluxo normal) sempre pinta POR CIMA dele. Resultado real: a animação de
   blur/scale de #escopo acontecia inteira ESCONDIDA atrás do hero, e o usuário
   só via um corte seco no instante em que o pin soltava — exatamente a "linha
   horizontal nítida" reportada.

   Fix: em vez de animar o #escopo real (que só fica visível DEPOIS do pin),
   este #uhPortal é uma CAMADA DENTRO do próprio wrapper pinado — sempre por
   cima, sempre visível durante o pin. No load, o <script> no fim do arquivo
   clona o conteúdo de #scopeReveal pra dentro dele. O exitTl do hero anima
   SÓ opacity/scale/filter:blur desta camada (zero x/y).

   IMPORTANTE (fix 23/07/2026 v3, bug de vinheta nos cantos): este elemento
   NÃO é mais responsável por "ficar branco" sozinho — isso é papel exclusivo
   do #uhWhiteout (camada irmã logo acima no HTML/CSS), que cobre 100% do
   viewport sem nunca escalar. A RAZÃO: #uhPortal escala .24→1 (pequeno→cheio),
   e seu próprio fundo branco (herdado de .escopo-theme) escalava JUNTO com o
   conteúdo — no meio do trajeto o retângulo branco ficava menor que a tela,
   deixando o roxo do hero visível nos CANTOS mesmo com o centro já claro.
   Agora #uhPortal só cuida do "conteúdo emergindo" (o clone de #escopo
   borrado/pequeno crescendo até o tamanho real); o "ficar branco" full-bleed
   já está garantido por baixo, pelo #uhWhiteout, antes disso ficar nítido.

   Geometria do "pouso" pixel-a-pixel: top/bottom:0 + left/right:-1.25rem
   (compensa exatamente o padding:0 1.25rem do .unum-hero, dando full-bleed) +
   padding-top igual ao clamp() de .scope + mesma .container por dentro (via
   clone) ⇒ no scale:1/blur:0/opacity:1, este bloco é PIXEL-IDÊNTICO à primeira
   dobra do #escopo real. Como o ScrollTrigger de pin garante que o topo de
   #escopo cai exatamente em y=0 no instante em que o pin solta (comportamento
   padrão de pin+spacer — zero salto por design), a troca de "#uhPortal cheio"
   para "#escopo real" é invisível: as duas coisas são, naquele frame, a MESMA
   imagem. transform-origin:50% 50% (centro do PRÓPRIO bloco de 100vh, não do
   conteúdo) é o que faz a versão em scale .24 aparecer pequena e centralizada
   na tela — sem precisar de nenhuma translação. z-index:4, acima do
   #uhWhiteout (3), pra o conteúdo emergir por cima do branco já sólido. ---- */
body.page-unum .unum-hero__portal{
  position:absolute; top:0; bottom:0; left:-1.25rem; right:-1.25rem;
  z-index:4; overflow:hidden; pointer-events:none; opacity:0;
  /* FIX 24/07/2026-g — "degrau" na transição hero→escopo (bug real,
     REGRESSÃO reportada pelo Thiago, medido via Playwright: 24-93px de
     salto vertical no instante em que o portal cede lugar ao #escopo real,
     crescendo com a altura da viewport). DUAS causas empilhadas, achadas
     medindo os retângulos dos dois lados no MESMO frame (progress:1 do
     exitTl, confirmado via hook no GSAP):
     1) padding-top desatualizado — o fix de 24/07/2026 pro bug "dobra
        cortada em telas baixas" (ver body.page-unum #escopo acima,
        "min(12vw,16vh)") mudou a fórmula do #escopo real e esqueceu de
        atualizar esta cópia estática aqui (ainda usava clamp(4.5rem,9vw,
        6.5rem), igual à .scope base antiga) — já corrigido abaixo.
     2) a causa MAIOR: modelo de flex errado. #escopo real é um `.slide`
        (flex-direction:COLUMN + justify-content:safe CENTER — ver regra
        ".slide" acima), que precisa centralizar o conteúdo verticalmente
        no espaço sobrando (container mais baixo que a tela) — sobra igual
        em cima/embaixo do padding. Este portal usava só "justify-content:
        center" SEM flex-direction:column — em row (o default), isso
        centraliza no eixo HORIZONTAL e ESTICA (align-items:stretch) no
        vertical, sem nenhuma centralização vertical extra. Resultado: o
        conteúdo pousava só no padding-top puro, enquanto o #escopo real
        pousava padding-top + metade do espaço sobrando — a MESMA razão
        pela qual o salto CRESCIA com a altura da tela (mais espaço
        sobrando = mais deslocamento). Fix: replicar EXATAMENTE o modelo de
        flex do `.slide` aqui — mesmo comportamento de centralização. */
  display:flex; flex-direction:column; justify-content:safe center;
  padding:clamp(5.5rem,min(12vw,16vh),8rem) 0;
  transform-origin:50% 50%;
}
body.page-unum .unum-hero__portal .container{ width:100%; height:max-content; }
/* will-change só durante o trecho ativo (classe ligada/desligada pelos callbacks
   onStart/onComplete/onReverseComplete do tween) — emil-design-eng: blur é caro,
   sobretudo Safari (navegador padrão do Thiago), não manter camada de composição
   cara o tempo todo. */
body.page-unum .unum-hero__portal.is-animating{
  will-change:filter, opacity, transform;
}
@media (prefers-reduced-motion:reduce){
  body.page-unum .unum-hero__portal{ display:none; }
}