/* Página Parceiros: no estilo de Serviços, leve e sem caixas. O tom da parceria (--color-partner, verde-água: o orbe
   no estado "looking") pinta o fio, os losangos e o botão. As logos dos parceiros ficam soltas, sem placa: no escuro,
   um halo claro e difuso atrás (--color-logo-halo), para o azul-marinho não sumir no fundo */
.partner-hero, .partner-field, .partner-join { --tone: var(--color-partner); --tone-glow: var(--color-glow-partner); --tone-on: var(--color-on-partner); }

/* Halo das logos (no topo, .partner-node-logo; embaixo, .partner-logo): uma luz difusa e redonda atrás delas (nunca
   uma placa). No escuro, além dela, um brilho claro que abraça o próprio desenho da logo (--color-logo-glow, com
   drop-shadow), como uma luz por trás: o azul-marinho fica legível sem caixa em volta. No claro, os dois quase somem */
.partner-node-logo, .partner-logo { position: relative; isolation: isolate; }
.partner-node-logo::before, .partner-logo::before {
  content: ""; position: absolute; z-index: -1; inset: -30% -18%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--color-logo-halo), color-mix(in srgb, var(--color-logo-halo) 40%, transparent) 55%, transparent);
  filter: blur(18px); pointer-events: none;
}
.partner-node-logo img, .partner-logo img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 0 1px var(--color-logo-glow)) drop-shadow(0 0 1px var(--color-logo-glow)) drop-shadow(0 0 7px color-mix(in srgb, var(--color-logo-glow) 55%, transparent));
}

/* Topo em tela cheia (como a 1ª tela de Serviços): a superfície com um toque do tom, que no pé se funde com o fundo.
   --hero-bg é a cor lisa do topo (o círculo do lugar vago usa a mesma, para cobrir a ponta do fio) */
.partner-hero {
  --hero-stage: calc(100svh - var(--header-height) - 1px);
  --hero-foot: clamp(4.5rem, 16vh, 10rem);
  --hero-bg: color-mix(in srgb, var(--tone-glow) 5%, var(--color-panel-solid));
  position: relative; overflow: hidden; overflow: clip;
  display: grid; align-items: center; min-height: var(--hero-stage);
  background: linear-gradient(var(--hero-bg) calc(100% - var(--hero-foot)), transparent);
}
.partner-hero-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 2.5rem; padding-block: clamp(2rem, 7vh, 5rem); }
.partner-hero h1 { font-weight: 300; font-size: min(clamp(2.6rem, 5.8vw, 5.4rem), 13vw); line-height: .98; letter-spacing: -0.035em; }
.partner-hero h1 strong { font-weight: 600; }
.partner-hero-lead { color: var(--color-muted); font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.45; margin-top: 1.375rem; max-width: 26.25rem; text-wrap: pretty; }
.partner-hero-more { margin-top: 1.625rem; padding-inline: 0; }
.partner-hero-more:hover, .partner-hero-more:focus-visible { color: var(--tone); }

/* A constelação: o orbe no centro de um palco de proporção fixa (100 por 80, o viewBox do SVG dos fios, que o
   gen_pages.py calcula) e cada parceiro num ponto da órbita (--x, --y, do gen_pages.py), com o seu próprio fio.
   A órbita é uma elipse achatada e bem fraca, o eco do anel deitado de Serviços. O palco é um container: o círculo
   do lugar vago se mede nele (cqi) */
.partner-orbit {
  --orbit: min(100%, 52rem, (var(--hero-stage) - 5rem) * 1.25);
  --cycle: calc(max(var(--n), 3) * 1.6s);
  position: relative; justify-self: center; width: var(--orbit); aspect-ratio: 100 / 80; container-type: inline-size;
}
/* partner-orbit:start (gerado pelo gen_pages.py, não editar à mão) */
.partner-orbit { --n: 1; --w-min: 11rem; --orb: 44%; --orb-m: 56%; --orb-my: 31.52%; --ratio-m: 100 / 92; }
.partner-p0 { --x: 82.67%; --y: 35.33%; --i: 0; --mx: 72.78%; --my: 71.78%; --w: 34%; --wm: 46%; --k: 1; }
.partner-p1 { --x: 17.33%; --y: 64.67%; --i: 1; --mx: 27.22%; --my: 71.78%; }
/* partner-orbit:end */
.partner-orbit-core { position: absolute; z-index: 1; left: 50%; top: 50%; width: var(--orb); aspect-ratio: 1; translate: -50% -50%; }
/* Brilho bem fraco em volta do orbe, no tom (como o do orbe de Serviços) */
.partner-orbit-core::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tone-glow) calc(14% * var(--glow-strength)), transparent), transparent); pointer-events: none; }
/* O canvas passa da caixa (brilho e ícones não cortam na beira) */
.partner-orbit-canvas { position: absolute; inset: -14%; width: 128%; height: 128%; }
/* Sem JS, a imagem parada do orbe (rosa, a cor da marca) vira verde-água, o tom da página */
.partner-orbit-still { position: absolute; inset: 8%; width: 84%; height: 84%; filter: hue-rotate(200deg); }
/* A imagem parada só some quando o canvas aparece: se o módulo do orbe falhar, ela fica no lugar (como em product.css) */
:root[data-theme] .partner-orbit-core:has(.partner-orbit-canvas:not([hidden])) .partner-orbit-still { visibility: hidden; }

/* Os fios: linhas finas no tom, com brilho. Nascem dentro do corpo do orbe (que os cobre) e chegam no halo de
   cada logo. O do lugar vago é tracejado e apagado. Com o .is-live (o partners-orb.js liga só com o palco à vista),
   cada fio respira devagar e uma faísca corre do orbe até o parceiro, um fio depois do outro: o ciclo tem 1,6 s por
   parceiro (no mínimo 4,8 s) e cada fio entra 1,6 s depois do anterior (--n e --i vêm do gen_pages.py) */
.partner-rays { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 .25rem color-mix(in srgb, var(--tone-glow) calc(55% * var(--glow-strength)), transparent)); }
/* O leque do celular só aparece lá */
.partner-rays-fan { display: none; }
.partner-orbit-ring { fill: none; stroke: var(--color-line-strong); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; opacity: .35; }
.partner-ray, .partner-ray-spark { fill: none; stroke: var(--tone); stroke-linecap: round; }
.partner-ray { vector-effect: non-scaling-stroke; stroke-width: 1.5; opacity: .75; }
.partner-ray-open { stroke: var(--color-muted); stroke-width: 1.25; stroke-dasharray: 5 6; opacity: .6; transition: stroke .3s, opacity .3s; }
/* A faísca é medida no próprio fio (pathLength 100 no SVG), com traço em unidades do palco */
.partner-ray-spark { stroke: var(--tone-glow); stroke-width: .45; stroke-dasharray: 16 100; stroke-dashoffset: 16; opacity: 0; }
.partner-orbit.is-live .partner-ray:not(.partner-ray-open) { animation: partner-ray-breathe var(--cycle) ease-in-out infinite calc(var(--i) * -1.6s); }
.partner-orbit.is-live .partner-ray-spark { animation: partner-ray-spark var(--cycle) cubic-bezier(.45, 0, .25, 1) infinite calc((var(--i) - max(var(--n), 3)) * 1.6s); }
@keyframes partner-ray-breathe { 50% { opacity: 1; } }
@keyframes partner-ray-spark {
  0% { stroke-dashoffset: 16; opacity: 0; }
  15% { opacity: .9; }
  70% { opacity: .9; }
  90%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

/* Os pontos da órbita (a lista de parceiros não mexe na posição: cada ponto se posiciona no palco). As logos ficam
   soltas, com o halo de sempre; a largura (--w) encolhe com mais parceiros, com piso (--w-min) quando são poucos */
.partner-nodes { list-style: none; }
.partner-node { position: absolute; z-index: 2; left: var(--x); top: var(--y); translate: -50% -50%; }
.partner-node:not(.partner-node-open) { width: max(var(--w), var(--w-min)); }

/* O lugar vago: um convite, não uma falta. Um círculo tracejado com um "+" no meio e a pergunta embaixo, tudo
   suave; ao passar o mouse (ou no foco do teclado), o contorno ganha o tom e um brilho leve. O fundo do círculo é o
   do topo: cobre a ponta do fio tracejado, que vai até o centro */
.partner-slot { position: relative; display: grid; justify-items: center; color: var(--color-muted); border-radius: var(--radius); transition: color .3s; }
.partner-slot-mark {
  position: relative; width: clamp(3rem, 8cqi, 5rem); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--color-muted) 70%, transparent);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tone-glow) 8%, var(--hero-bg)), var(--hero-bg));
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.partner-slot-mark::before, .partner-slot-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32%; height: 1.5px; translate: -50% -50%; border-radius: 1px; background: currentColor; opacity: .8; }
.partner-slot-mark::after { rotate: 90deg; }
/* A pergunta fica embaixo do círculo, sem mexer no centro dele (que é o ponto da órbita); com letra grande ela
   quebra em duas linhas em vez de passar da tela */
.partner-slot-text { position: absolute; top: calc(100% + .625rem); left: 50%; translate: -50% 0; width: max-content; max-width: 10em; font-size: .95rem; line-height: 1.3; text-align: center; }
.partner-node-up .partner-slot-text { top: auto; bottom: calc(100% + .625rem); }
.partner-slot:focus-visible { outline: none; }
.partner-slot:focus-visible .partner-slot-mark { outline: 2px solid var(--tone); outline-offset: 4px; }
.partner-slot:focus-visible { color: var(--color-text); }
@media (hover: hover) {
  .partner-slot:hover { color: var(--color-text); }
  .partner-slot:hover .partner-slot-mark {
    border-color: var(--tone);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tone-glow) 22%, var(--hero-bg)), var(--hero-bg));
    box-shadow: 0 0 1.5rem color-mix(in srgb, var(--tone-glow) calc(45% * var(--glow-strength)), transparent);
  }
  .partner-orbit:has(.partner-slot:hover) .partner-ray-open { stroke: var(--tone); opacity: .8; }
}
.partner-slot:focus-visible .partner-slot-mark {
  border-color: var(--tone);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tone-glow) 22%, var(--hero-bg)), var(--hero-bg));
}
.partner-orbit:has(.partner-slot:focus-visible) .partner-ray-open { stroke: var(--tone); opacity: .8; }

/* A parceria */
.partner-field { padding-block: clamp(3.5rem, 9vw, 6.5rem) 0; scroll-margin-top: 8px; }
.partner-field h2 { font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: .875rem; }
.partner-intro { color: var(--color-muted); max-width: 42.5rem; font-size: 1.05rem; }
.partner-field a:not(.btn) { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--tone) 70%, transparent); overflow-wrap: anywhere; }
.partner-field a:not(.btn):focus-visible { color: var(--tone); }
@media (hover: hover) { .partner-field a:not(.btn):hover { color: var(--tone); } }

/* Um bloco por parceiro: logo grande e solta ao lado do nome e do texto; um fio fino no tom separa os dois (no
   celular, fica em cima) */
.partner-feature { display: grid; grid-template-columns: minmax(0, 18.75rem) minmax(0, 1fr); align-items: center; gap: 5rem; margin-top: clamp(2.5rem, 6vw, 4.5rem); max-width: 62.5rem; scroll-margin-top: 1.5rem; }
.partner-logo { padding: .5rem; }
.partner-about { position: relative; }
.partner-about::before { content: ""; position: absolute; left: -2.5rem; top: -.5rem; bottom: -.5rem; width: 1px; background: linear-gradient(var(--tone), color-mix(in srgb, var(--tone) 10%, transparent)); }
.partner-about h3 { font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: .75rem; text-wrap: balance; }
.partner-about p { color: var(--color-muted); max-width: 35rem; }

/* "Como funciona a parceria": linha do tempo com losangos. Cada etapa tem um losango no fio; o fio entre um e o
   outro acende no tom (no computador, na horizontal; no celular, na vertical). O losango das etapas atuais fica
   cheio. Com o partners-orb.js, as etapas começam apagadas e acendem ao rolar, uma de cada vez (.is-lit); sem ele,
   ou com movimento reduzido, já nascem acesas */
.partner-how { margin-top: clamp(4rem, 9vw, 7rem); }
.partner-how h3 { font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.8rem); letter-spacing: -0.02em; margin-bottom: 2.25rem; }
.partner-steps { --gap: 2rem; --mark: .875rem; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gap); }
.partner-step { position: relative; padding-top: calc(var(--mark) + 1.625rem); transition: opacity .6s ease; }
/* O fio até a próxima etapa (o da última some aos poucos: a história continua) e a parte acesa por cima */
.partner-step::before, .partner-step::after { content: ""; position: absolute; top: calc(var(--mark) / 2); left: calc(var(--mark) + .625rem); right: calc(.625rem - var(--gap)); height: 1px; }
.partner-step::before { background: var(--color-line-strong); }
.partner-step::after { background: var(--tone); transform-origin: left; transition: transform .7s cubic-bezier(.2, .7, .2, 1) .15s; }
.partner-step:last-child::before, .partner-step:last-child::after { right: 0; -webkit-mask-image: linear-gradient(90deg, var(--color-text), transparent); mask-image: linear-gradient(90deg, var(--color-text), transparent); }
.partner-step-mark { position: absolute; top: 0; left: 0; width: var(--mark); height: var(--mark); rotate: 45deg; border: 1.5px solid var(--tone); background: var(--color-bg); transition: border-color .4s, background .4s, box-shadow .4s, rotate .6s; }
.partner-step.is-now .partner-step-mark { background: var(--tone); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone-glow) 18%, transparent), 0 0 18px color-mix(in srgb, var(--tone-glow) calc(70% * var(--glow-strength)), transparent); }
.partner-step-num { display: block; font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tone); margin-bottom: .5rem; }
.partner-step h4 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin-bottom: .5rem; text-wrap: balance; }
.partner-step p { color: var(--color-muted); font-size: .95rem; }
.partner-step .partner-step-status { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .5rem; color: var(--color-text); font-size: .85rem; font-weight: 500; }
.partner-step-status::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--tone); box-shadow: 0 0 8px var(--tone-glow); }
/* Acender ao rolar (a classe .partner-steps-on vem do script) */
.partner-steps-on .partner-step:not(.is-lit) { opacity: .4; }
.partner-steps-on .partner-step:not(.is-lit)::after { transform: scaleX(0); }
.partner-steps-on .partner-step:not(.is-lit) .partner-step-mark { border-color: var(--color-line-strong); background: var(--color-bg); box-shadow: none; rotate: -45deg; }
/* A etapa atual pulsa devagar depois de acesa */
.partner-step.is-now.is-lit .partner-step-mark, .partner-steps:not(.partner-steps-on) .is-now .partner-step-mark { animation: partner-now 3.2s ease-in-out infinite 1s; }
@keyframes partner-now { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--tone-glow) 6%, transparent), 0 0 26px color-mix(in srgb, var(--tone-glow) calc(80% * var(--glow-strength)), transparent); } }

/* Nota ("Sem custo para o laboratório.") e o botão da plataforma, lado a lado (no celular, um embaixo do outro) */
.partner-how-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.375rem 2.25rem; margin-top: 3rem; }
.partner-note { display: flex; align-items: center; gap: .875rem; color: var(--color-text); }
.partner-note-mark { width: .5625rem; height: .5625rem; rotate: 45deg; border: 1.5px solid var(--tone); flex: none; margin-left: .1875rem; }

/* "Quer construir junto?": faixa final, como o fechamento de Serviços, com um fio que termina num losango vazio
   (o lugar do próximo parceiro) e o botão no tom */
.partner-join {
  --band: color-mix(in srgb, var(--tone-glow) 6%, var(--color-panel-solid));
  margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-block: clamp(5rem, 10vw, 8.5rem) clamp(3rem, 6vw, 4.5rem); scroll-margin-top: 0;
  background: linear-gradient(transparent, var(--band) clamp(4rem, 10vw, 8rem), var(--band) calc(100% - clamp(2.5rem, 6vw, 5rem)), transparent);
}
.partner-join-inner { position: relative; isolation: isolate; display: grid; justify-items: start; }
/* No computador, o orbe da marca bem fraco à direita, como um eco do topo: o desenho do orbe (como máscara) pintado
   no tom da página, não no rosa da marca */
@media (min-width: 861px) {
  .partner-join-inner::after {
    content: ""; position: absolute; z-index: -1; right: var(--gutter); top: 50%; width: min(22.5rem, 30vw); aspect-ratio: 1; translate: 0 -50%;
    background: var(--tone-glow); opacity: .14; pointer-events: none;
    -webkit-mask: url("../brand/nizity-logo.svg") center / contain no-repeat; mask: url("../brand/nizity-logo.svg") center / contain no-repeat;
  }
}
.partner-join-thread { position: relative; display: block; width: 8.25rem; height: 1px; margin-bottom: 2.125rem; background: linear-gradient(90deg, transparent, var(--tone)); }
.partner-join-thread::after { content: ""; position: absolute; right: -.375rem; top: 50%; width: .6875rem; height: .6875rem; translate: 0 -50%; rotate: 45deg; border: 1.5px solid var(--tone); background: var(--color-bg); }
.partner-join h2 { font-weight: 300; font-size: var(--fs-closing); line-height: 1.05; letter-spacing: -0.02em; }
.partner-join-inner p { color: var(--color-muted); margin-top: 1rem; font-size: 1.05rem; max-width: 35rem; }
.partner-join .contact-actions { margin-top: 1.875rem; }
.partner-join .btn-accent { --btn-tone: var(--tone); --btn-on: var(--tone-on); }
.partner-updated { margin-top: clamp(3rem, 7vw, 5rem); }

/* Celular e tablet em pé: tudo em uma coluna; a constelação fica empilhada (orbe em cima, parceiros embaixo). O topo
   deixa de ocupar a tela inteira: termina logo depois da constelação (sem faixa vazia nos celulares altos) */
@media (max-width: 860px) {
  .partner-hero { --hero-foot: 3rem; --core-m: min(52vw, 30svh, 16.25rem); --logo-m: min(40vw, 10rem); min-height: 0; align-items: start; }
  .partner-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block: 2.25rem calc(var(--hero-foot) + .5rem); }
  .partner-hero-more { margin-top: .875rem; }
  .partner-slot-mark { width: 3.25rem; }
  .partner-slot-text { font-size: .9rem; max-width: min(10em, 44vw); overflow-wrap: break-word; }
  /* Com 1 parceiro, um leque: o orbe em cima e os dois pontos embaixo (as posições --mx, --my e o SVG
     .partner-rays-fan vêm do gen_pages.py), cada um com o seu fio até o orbe. O palco não passa de 24rem nem da
     altura que sobra na tela (tablet em pé, celular deitado) */
  .partner-orbit-fan {
    width: min(100%, 24rem, max(15rem, (100svh - var(--header-height) - 10rem) * 100 / 92));
    aspect-ratio: var(--ratio-m);
  }
  .partner-orbit-fan .partner-orbit-core { top: var(--orb-my); width: var(--orb-m); }
  .partner-orbit-fan .partner-rays { display: none; }
  .partner-orbit-fan .partner-rays-fan { display: block; }
  .partner-orbit-fan .partner-node { left: var(--mx); top: var(--my); }
  .partner-orbit-fan .partner-node:not(.partner-node-open) { width: var(--wm); }
  .partner-orbit-fan .partner-node-up .partner-slot-text { top: calc(100% + .625rem); bottom: auto; }
  /* Com mais parceiros, duas colunas embaixo do orbe (a última logo sozinha fica no meio), ligadas a ele por um
     fio em forquilha: um tronco desce do orbe e se abre nas duas colunas. O lugar vago vem numa linha só dele, no fim */
  .partner-orbit-grid { width: 100%; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; }
  .partner-orbit-grid .partner-orbit-core { position: relative; left: auto; top: auto; translate: none; width: var(--core-m); }
  .partner-orbit-grid .partner-rays { display: none; }
  .partner-orbit-grid .partner-nodes { --fork: 1.25rem; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: 1.75rem 1.5rem; width: 100%; padding-top: calc(var(--fork) * 2 + .75rem); margin-top: calc(var(--core-m) * -.12); }
  .partner-orbit-grid .partner-nodes::before, .partner-orbit-grid .partner-nodes::after { content: ""; position: absolute; opacity: .8; border-color: var(--tone-glow); filter: drop-shadow(0 0 .25rem color-mix(in srgb, var(--tone-glow) calc(50% * var(--glow-strength)), transparent)); }
  .partner-orbit-grid .partner-nodes::before { left: 50%; top: calc(var(--fork) * -1); height: calc(var(--fork) * 2); border-left: 2px solid var(--tone-glow); translate: -1px 0; }
  .partner-orbit-grid .partner-nodes::after { left: calc(25% - .375rem); right: calc(25% - .375rem); top: var(--fork); height: var(--fork); border: 2px solid var(--tone-glow); border-bottom: 0; border-radius: .5rem .5rem 0 0; }
  .partner-orbit-grid.is-live .partner-nodes::before, .partner-orbit-grid.is-live .partner-nodes::after { animation: partner-ray-breathe var(--cycle) ease-in-out infinite; }
  .partner-orbit-grid .partner-node { position: relative; left: auto; top: auto; translate: none; width: var(--logo-m); min-height: 100%; display: grid; place-items: center; }
  .partner-orbit-grid .partner-nodes .partner-node:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .partner-orbit-grid .partner-node-logo { width: calc(100% * var(--k, 1)); }
  .partner-orbit-grid .partner-node-open { width: auto; margin-top: 2rem; }
  .partner-orbit-grid .partner-slot-text { position: static; translate: none; margin-top: .625rem; }
  .partner-feature { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .partner-logo { max-width: 17.5rem; }
  .partner-about { padding-top: 1.75rem; }
  .partner-about::before { left: 0; right: auto; top: 0; bottom: auto; width: 7.5rem; height: 1px; background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 10%, transparent)); }
  .partner-steps { --gap: 1.875rem; grid-template-columns: minmax(0, 1fr); gap: var(--gap) 0; }
  .partner-step { padding-top: 0; padding-left: calc(var(--mark) + 1.375rem); }
  .partner-step::before, .partner-step::after { top: calc(var(--mark) + .625rem); bottom: calc(.625rem - var(--gap)); left: calc(var(--mark) / 2); right: auto; width: 1px; height: auto; }
  .partner-step::after { transform-origin: top; }
  .partner-steps-on .partner-step:not(.is-lit)::after { transform: scaleY(0); }
  .partner-step:last-child::before, .partner-step:last-child::after { bottom: 0; -webkit-mask-image: linear-gradient(var(--color-text), transparent); mask-image: linear-gradient(var(--color-text), transparent); }
  .partner-step-num { margin-bottom: .25rem; line-height: var(--mark); }
}
/* Celular deitado: pouca altura, então o texto e a constelação ficam lado a lado, como no computador */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 32rem) {
  .partner-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding-block: 1rem 2.5rem; }
  .partner-orbit-fan { width: min(100%, 24rem, max(15rem, (100svh - var(--header-height) - 4rem) * 100 / 92)); }
}

/* "Pausar animações" do rodapé (main.js): os raios e o losango da etapa atual param onde estão */
html[data-motion="paused"] :is(.partner-ray, .partner-ray-spark, .partner-step-mark),
html[data-motion="paused"] .partner-nodes::before, html[data-motion="paused"] .partner-nodes::after { animation-play-state: paused; }