/* Peça "orbita" · o serviço no centro e os pilares em volta, como esferas de vidro numa órbita.
   Carregue depois do mestre.css e do tom. Tudo começa por .p-orbita; nada aqui mexe no resto da página. */
.p-orbita{--o-tempo:4200ms;--o-giro:140s;--o-claro:#fff;position:relative;isolation:isolate;overflow:hidden;overflow:clip;color:#fff;
  background:var(--cor-forte,#2b1712);padding:clamp(76px,9vw,136px) 0}
.p-orbita-fundo{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 62% at 74% 50%,color-mix(in srgb,var(--cor) 34%,transparent),transparent 72%),
    radial-gradient(38% 46% at 8% 6%,color-mix(in srgb,var(--cor-2,var(--cor)) 12%,transparent),transparent 70%),
    radial-gradient(70% 60% at 50% 120%,rgba(0,0,0,.42),transparent 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--cor-forte) 88%,#000),var(--cor-forte) 40%,color-mix(in srgb,var(--cor-forte) 92%,#000))}
.p-orbita-fundo::after{content:"";position:absolute;inset:0;opacity:.13;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* grade: título, painel e botão à esquerda; a órbita à direita */
.p-orbita .p-orbita-grade{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto 1fr;
  grid-template-areas:"cabeca arte" "painel arte" "acao arte";column-gap:clamp(40px,6vw,104px);align-items:start}
.p-orbita-cabeca{grid-area:cabeca;align-self:end}
.p-orbita .p-orbita-cabeca .m-olho{color:var(--cor-2,#fff);opacity:1}
.p-orbita .p-orbita-cabeca h2{color:#fff;margin:18px 0 18px;max-width:13em}
.p-orbita.m-secao .p-orbita-cabeca h2 em{color:var(--cor-2,#fff);opacity:1}
.p-orbita .p-orbita-cabeca p{color:rgba(255,255,255,.74);font-size:17.5px;max-width:30em}

/* painel do pilar em destaque (ao lado do título, nunca em cima da órbita) */
.p-orbita-painel{grid-area:painel;position:relative;margin-top:34px;padding:22px 26px 26px;border-radius:22px;
  background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 60%),color-mix(in srgb,var(--cor-forte) 70%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.07),0 30px 60px -36px rgba(0,0,0,.7);max-width:470px}
.p-orbita-painel::before{content:"";position:absolute;left:26px;right:26px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--cor-2,#fff),transparent);opacity:.55}
.p-orbita-trilho{display:flex;gap:6px;margin-bottom:20px}
.p-orbita-trilho i{position:relative;flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.13);overflow:hidden}
.p-orbita-trilho i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--cor),var(--cor-2,#fff));transform-origin:0 50%;transform:scaleX(0)}
.p-orbita-trilho i.feito::after{transform:none;opacity:.55}
.p-orbita-trilho i.ativo::after{animation:p-orbita-enche var(--o-tempo) linear forwards}
.p-orbita.p-orbita-segura .p-orbita-trilho i.ativo::after{animation:none;transform:none}
.p-orbita-vezes{display:grid}
.p-orbita-vez{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s ease,transform .3s ease,visibility 0s .3s}
.p-orbita-vez.ativo{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .26s,transform .8s cubic-bezier(.2,.75,.2,1) .26s,visibility 0s}
.p-orbita-vez:not(.ativo){transform:translateY(-8px)}.p-orbita-vez.ativo{animation:p-orbita-sobe .8s cubic-bezier(.2,.75,.2,1) .26s backwards}
.p-orbita-conta{display:block;font:800 13px/1 var(--titulo);letter-spacing:.14em;color:var(--cor-2,#fff);margin-bottom:12px}
.p-orbita-conta small{font-size:inherit;color:rgba(255,255,255,.38);font-weight:600}
.p-orbita-vez h3{font-family:var(--titulo);font-size:clamp(23px,2vw,29px);line-height:1.1;letter-spacing:-.03em;color:#fff;margin-bottom:10px}
.p-orbita-vez p{color:rgba(255,255,255,.76);font-size:17px;line-height:1.55;margin:0}

.p-orbita-acao{grid-area:acao;margin-top:30px}
.p-orbita .p-orbita-acao .m-botao{background:var(--cor-suave,#fff);color:var(--cor-forte,#111);border-color:var(--cor-suave,#fff);transition:transform .25s,box-shadow .25s,translate .5s cubic-bezier(.2,.8,.2,1)}
.p-orbita .p-orbita-acao .m-botao:hover{filter:none;background:#fff;box-shadow:0 18px 40px -16px color-mix(in srgb,var(--cor-2,var(--cor)) 70%,transparent)}

/* a órbita */
.p-orbita-arte{grid-area:arte;align-self:center;justify-self:center;position:relative;width:min(100%,610px);aspect-ratio:1;margin:0}
.p-orbita-arte::before{content:"";position:absolute;inset:-8%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--cor) 30%,transparent),color-mix(in srgb,var(--cor) 8%,transparent) 62%,transparent)}
.p-orbita-aneis,.p-orbita-linhas{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.p-orbita-volta{transform-box:view-box;transform-origin:50% 50%}
.p-orbita-anel{fill:none;stroke-dasharray:1 1;stroke-dashoffset:1;transform-box:view-box;transform-origin:50% 50%;rotate:-90deg;
  transition:stroke-dashoffset 2s cubic-bezier(.6,.05,.2,1)}
.p-orbita-anel.a1{stroke-width:.34}
.p-orbita-anel.a2{stroke-width:.2;transition-delay:.18s}
.p-orbita-anel.a3{stroke-width:.18;transition-delay:.32s;opacity:.7}
.p-orbita-marcas{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.3;stroke-dasharray:.3 4.7;opacity:0;transform-box:view-box;transform-origin:50% 50%;rotate:-24deg;
  transition:opacity 1.4s ease .5s,rotate 2.4s cubic-bezier(.2,.75,.2,1) .3s}
.p-orbita.p-orbita-ver .p-orbita-anel{stroke-dashoffset:0}
.p-orbita.p-orbita-ver .p-orbita-marcas{opacity:1;rotate:0deg}

/* linhas do centro até cada pilar: se desenham e a do pilar em destaque leva uma luz */
.p-orbita-linha path{fill:none;stroke-linecap:round}
.p-orbita-linha .traco{stroke:rgba(255,255,255,.22);stroke-width:.24;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.6,.05,.2,1) calc(.75s + var(--k) * .09s),stroke .5s,stroke-width .5s}
.p-orbita.p-orbita-ver .p-orbita-linha .traco{stroke-dashoffset:0}
.p-orbita-linha.ativo .traco{stroke:color-mix(in srgb,var(--cor-2,#fff) 80%,transparent);stroke-width:.36}
.p-orbita-linha .luz{stroke:var(--cor-2,#fff);stroke-width:.9;stroke-dasharray:.14 1.4;stroke-dashoffset:.14;opacity:0;filter:drop-shadow(0 0 1.2px var(--cor-2,#fff))}
.p-orbita.p-orbita-gira .p-orbita-linha.ativo .luz{opacity:1;animation:p-orbita-corre 1.9s cubic-bezier(.45,0,.55,1) infinite}

/* o que gira: as linhas e os pilares juntos; o nome volta ao contrário para ficar sempre em pé */
.p-orbita-roda{position:absolute;inset:0;animation:p-orbita-gira var(--o-giro) linear infinite;animation-play-state:paused}
.p-orbita-giro{position:absolute;inset:0;display:block;animation:p-orbita-desgira var(--o-giro) linear infinite;animation-play-state:paused}
.p-orbita-volta.v1{animation:p-orbita-gira 70s linear infinite;animation-play-state:paused}
.p-orbita-volta.v2{animation:p-orbita-desgira 110s linear infinite;animation-play-state:paused}
.p-orbita-volta.v4{animation:p-orbita-desgira 50s linear infinite;animation-play-state:paused}
.p-orbita.p-orbita-gira .p-orbita-roda,.p-orbita.p-orbita-gira .p-orbita-giro,.p-orbita.p-orbita-gira .p-orbita-volta{animation-play-state:running}
.p-orbita.p-orbita-gira .p-orbita-arte:hover .p-orbita-roda,.p-orbita.p-orbita-gira .p-orbita-arte:hover .p-orbita-giro,
.p-orbita.p-orbita-gira .p-orbita-arte:focus-within .p-orbita-roda,.p-orbita.p-orbita-gira .p-orbita-arte:focus-within .p-orbita-giro{animation-play-state:paused}

/* pilares: esferas de vidro */
.p-orbita-pilar{position:absolute;width:var(--d);aspect-ratio:1;translate:-50% -50%;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;color:#fff;font:inherit;
  -webkit-tap-highlight-color:transparent;opacity:0;scale:.5;transition:opacity .7s ease calc(.85s + var(--k) * .1s),scale 1s cubic-bezier(.3,1.5,.4,1) calc(.85s + var(--k) * .1s)}
.p-orbita.p-orbita-ver .p-orbita-pilar{opacity:1;scale:1}
.p-orbita-pilar:focus{outline:none}
.p-orbita-esfera{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;overflow:hidden;
  /* vidro de verdade: deixa ver (desfocado) o anel e o brilho que passam por trás */
  background:
    radial-gradient(circle at 50% 116%,color-mix(in srgb,var(--cor-2,#fff) 46%,transparent),transparent 56%),
    radial-gradient(ellipse 34% 20% at 34% 20%,rgba(255,255,255,.2),transparent 70%),
    radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--cor) 14%,transparent),color-mix(in srgb,var(--cor-forte) 62%,transparent) 96%);
  -webkit-backdrop-filter:blur(7px) saturate(1.45);backdrop-filter:blur(7px) saturate(1.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.09),inset 0 -16px 26px -14px color-mix(in srgb,var(--cor-2,#fff) 60%,transparent),
    inset 16px 12px 26px -22px rgba(255,255,255,.4),0 30px 44px -26px rgba(0,0,0,.9),0 10px 34px -16px color-mix(in srgb,var(--cor) 55%,transparent);
  transition:scale .7s cubic-bezier(.2,.9,.25,1.15),box-shadow .6s ease,background .6s ease}
/* reflexo fino em arco no alto (nada de bolha branca) */
.p-orbita-esfera::before{content:"";position:absolute;inset:6%;border-radius:50%;pointer-events:none;border:1.4px solid transparent;
  border-top-color:rgba(255,255,255,.62);border-left-color:rgba(255,255,255,.1);rotate:-32deg;filter:blur(.5px)}
.p-orbita-esfera::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;padding:1.1px;
  background:conic-gradient(from 210deg,rgba(255,255,255,.55),rgba(255,255,255,0) 22%,rgba(255,255,255,0) 50%,color-mix(in srgb,var(--cor-2,#fff) 80%,transparent) 70%,rgba(255,255,255,0) 90%,rgba(255,255,255,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.p-orbita-pilar .p-orbita-nome{opacity:.86;transition:opacity .5s}
.p-orbita-pilar.ativo .p-orbita-nome{opacity:1}
.p-orbita-pilar.ativo .p-orbita-esfera{scale:1.12;
  background:
    radial-gradient(circle at 50% 112%,color-mix(in srgb,var(--cor-2,#fff) 82%,transparent),transparent 60%),
    radial-gradient(ellipse 34% 20% at 34% 20%,rgba(255,255,255,.3),transparent 70%),
    radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--cor) 66%,transparent),color-mix(in srgb,var(--cor) 46%,var(--cor-forte)) 98%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.16),inset 0 -18px 30px -14px color-mix(in srgb,var(--cor-2,#fff) 75%,transparent),
    inset 16px 12px 26px -22px rgba(255,255,255,.5),0 30px 50px -22px color-mix(in srgb,var(--cor) 90%,#000),0 0 64px -10px color-mix(in srgb,var(--cor-2,var(--cor)) 70%,transparent)}
.p-orbita-pilar:focus-visible .p-orbita-esfera{box-shadow:0 0 0 3px var(--cor-forte),0 0 0 5px var(--cor-2,#fff),0 0 46px -4px color-mix(in srgb,var(--cor-2,var(--cor)) 55%,transparent)}
/* anel fino dourado em volta do pilar em destaque e uma onda que sai dele quando acende */
.p-orbita-giro::before,.p-orbita-giro::after{content:"";position:absolute;inset:-17%;border-radius:50%;pointer-events:none;opacity:0;
  border:1px solid color-mix(in srgb,var(--cor-2,#fff) 50%,transparent)}
.p-orbita-giro::before{scale:.86;transition:opacity .5s ease,scale .9s cubic-bezier(.2,.8,.2,1)}
.p-orbita-pilar.ativo .p-orbita-giro::before{opacity:1;scale:1}
.p-orbita-pilar.ativo .p-orbita-giro::after{animation:p-orbita-onda 1.8s cubic-bezier(.2,.7,.3,1) .15s both}
.p-orbita-nome{position:relative;z-index:1;width:78%;text-align:center;font:700 15px/1.12 var(--titulo);letter-spacing:-.02em;color:#fff;
  hyphens:none;overflow-wrap:normal;word-break:normal;text-wrap:balance;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.p-orbita-numero{display:none;position:relative;z-index:1;font:800 clamp(15px,4.6cqw,22px)/1 var(--titulo);letter-spacing:-.02em;color:#fff}
.p-orbita-arte{container-type:inline-size}
.p-orbita-arte.p-orbita-numeros .p-orbita-nome{display:none}
.p-orbita-arte.p-orbita-numeros .p-orbita-numero{display:block}

/* centro com brilho que respira */
.p-orbita-brilho{position:absolute;left:50%;top:50%;width:52%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--cor-2,var(--cor)) 46%,transparent),color-mix(in srgb,var(--cor) 22%,transparent) 55%,transparent);
  transition:opacity 1.4s ease .5s}
.p-orbita.p-orbita-ver .p-orbita-brilho{opacity:1;animation:p-orbita-respira 5.6s ease-in-out 1.6s infinite}
.p-orbita-centro{position:absolute;left:50%;top:50%;width:28%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.32),rgba(255,255,255,0) 40%),
    radial-gradient(circle at 50% 100%,color-mix(in srgb,var(--cor-2,#fff) 45%,transparent),transparent 58%),
    radial-gradient(circle at 50% 46%,var(--cor),color-mix(in srgb,var(--cor) 62%,var(--cor-forte)));
  box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.16),inset 0 -22px 34px -14px rgba(0,0,0,.4),
    0 34px 70px -24px rgba(0,0,0,.75),0 0 0 9px color-mix(in srgb,var(--cor) 14%,transparent);
  opacity:0;scale:.82;transition:opacity .9s ease .35s,scale 1.3s cubic-bezier(.2,1.2,.3,1) .35s}
.p-orbita.p-orbita-ver .p-orbita-centro{opacity:1;scale:1}
.p-orbita-centro span{width:76%;font:700 22px/1.08 var(--titulo);letter-spacing:-.03em;color:#fff;text-wrap:balance;hyphens:none;overflow-wrap:normal;text-shadow:0 1px 14px rgba(0,0,0,.25)}
.p-orbita-centro span em{font-style:normal;color:inherit}

/* lista do celular (escondida no computador) */
.p-orbita-lista{grid-area:lista;display:none;list-style:none;margin:30px 0 0;padding:0}
.p-orbita-lista li{position:relative;isolation:isolate;display:grid;grid-template-columns:42px minmax(0,1fr);gap:16px;align-items:start;padding:18px 0;border-top:1px solid rgba(255,255,255,.1);cursor:pointer;transition:opacity .4s}
.p-orbita-lista li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.p-orbita-lista b{display:grid;place-items:center;width:42px;aspect-ratio:1;border-radius:50%;font:800 13px/1 var(--titulo);color:#fff;
  background:radial-gradient(circle at 33% 24%,rgba(255,255,255,.28),transparent 40%),radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--cor-forte) 40%,rgba(255,255,255,.06)),color-mix(in srgb,var(--cor-forte) 80%,#000));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.14);transition:background .5s,box-shadow .5s}
.p-orbita-lista h3{font-family:var(--titulo);font-size:19px;line-height:1.2;letter-spacing:-.02em;color:#fff;margin:2px 0 4px;transition:color .4s}
.p-orbita-lista p{font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.7);margin:0}
.p-orbita-lista li.ativo b{background:radial-gradient(circle at 33% 24%,rgba(255,255,255,.4),transparent 42%),radial-gradient(circle at 50% 50%,var(--cor),color-mix(in srgb,var(--cor) 55%,var(--cor-forte)));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 0 26px -4px color-mix(in srgb,var(--cor-2,var(--cor)) 60%,transparent)}
.p-orbita-lista li.ativo h3{color:var(--cor-2,#fff)}
.p-orbita-lista li::before{content:"";position:absolute;inset:0 -12px;z-index:-1;border-radius:14px;opacity:0;transition:opacity .5s;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cor) 26%,transparent),color-mix(in srgb,var(--cor) 6%,transparent) 70%,transparent)}
.p-orbita-lista li.ativo::before{opacity:1}
.p-orbita-lista li::after{content:"";position:absolute;left:58px;right:0;bottom:-1px;height:1.5px;border-radius:2px;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--cor-2,#fff),color-mix(in srgb,var(--cor-2,#fff) 20%,transparent))}
.p-orbita-lista li.ativo::after{animation:p-orbita-enche var(--o-tempo) linear forwards}
.p-orbita.p-orbita-segura .p-orbita-lista li.ativo::after{animation:none;transform:none}

@keyframes p-orbita-gira{to{rotate:360deg}}
@keyframes p-orbita-desgira{to{rotate:-360deg}}
@keyframes p-orbita-enche{to{transform:scaleX(1)}}
@keyframes p-orbita-corre{0%{stroke-dashoffset:.14}100%{stroke-dashoffset:-1.05}}
@keyframes p-orbita-sobe{from{transform:translateY(16px)}}
@keyframes p-orbita-onda{0%{opacity:.7;scale:.92}100%{opacity:0;scale:1.45}}
@keyframes p-orbita-respira{0%,100%{scale:1;opacity:.85}50%{scale:1.12;opacity:1}}

@media (max-width:1100px){
  .p-orbita .p-orbita-grade{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);column-gap:36px}
  .p-orbita-painel{padding:20px 22px 22px}
}
@media (max-width:860px){
  .p-orbita .p-orbita-grade{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"cabeca" "arte" "lista" "acao"}
  .p-orbita-cabeca{align-self:start}
  .p-orbita .p-orbita-cabeca h2{max-width:none}
  .p-orbita-arte{width:min(100%,420px);margin-top:34px}
  .p-orbita-painel{display:none}
  .p-orbita-lista{display:block}
  .p-orbita-acao{margin-top:28px}
}
@media (max-width:520px){
  .p-orbita .p-orbita-cabeca p{font-size:16.5px}
  .p-orbita-arte{margin-top:26px}
  .p-orbita .p-orbita-acao .m-botao{width:100%;justify-content:center}
}

/* movimento reduzido: tudo pronto, sem giro nem pulso */
@media (prefers-reduced-motion:reduce){
  .p-orbita-anel,.p-orbita-linha .traco{stroke-dashoffset:0;transition:none}
  .p-orbita-marcas,.p-orbita-pilar,.p-orbita-centro,.p-orbita-brilho{opacity:1;scale:1;rotate:0deg;transition:none}
  .p-orbita-roda,.p-orbita-giro,.p-orbita-volta,.p-orbita.p-orbita-ver .p-orbita-brilho,.p-orbita.p-orbita-ver .p-orbita-linha.ativo .luz{animation:none}
  .p-orbita-linha .luz{display:none}
  .p-orbita-vez,.p-orbita-vez.ativo{transform:none;transition:opacity .2s}
  .p-orbita-trilho i.ativo::after,.p-orbita-lista li.ativo::after{animation:none;transform:none}
  .p-orbita-giro::after{animation:none;opacity:0}
}
/* modo foto: estado final, parado */
.sem-animacao .p-orbita-anel,.sem-animacao .p-orbita-linha .traco{stroke-dashoffset:0!important;transition:none!important}
.sem-animacao .p-orbita-marcas,.sem-animacao .p-orbita-pilar,.sem-animacao .p-orbita-centro,.sem-animacao .p-orbita-brilho{opacity:1!important;scale:1!important;rotate:0deg!important;transition:none!important}
.sem-animacao .p-orbita-roda,.sem-animacao .p-orbita-giro,.sem-animacao .p-orbita-volta,.sem-animacao .p-orbita-brilho,.sem-animacao .p-orbita-linha .luz{animation:none!important}
.sem-animacao .p-orbita-linha .luz{display:none}
.sem-animacao .p-orbita-vez,.sem-animacao .p-orbita-esfera{transition:none!important}
.sem-animacao .p-orbita-trilho i.ativo::after,.sem-animacao .p-orbita-lista li.ativo::after{animation:none!important;transform:none!important}
.sem-animacao .p-orbita-giro::after{animation:none!important;opacity:0!important}
.sem-animacao .p-orbita-giro::before,.sem-animacao .p-orbita-lista li::before,.sem-animacao .p-orbita-nome{transition:none!important}