/* Link Affiliattes — #nichos, clone da seção "Work with the fastest growing digital dollar issuer" da Ethena
   (medida em 18/10/2026: contêiner 1120, título 40/48 em gradiente, três cartões de 350 com painel 4:3,
   título do cartão 20/27,5 e texto 14/22,75). Troca só cor, marca, conteúdo e família da fonte.
   Celular: os três cartões viram abas lado a lado em cima de um painel só (sem trilho, sem rolagem lateral).
   Movimento só em transform e opacity; parado fora da tela; "menos movimento" deixa tudo no estado final. */

#nichos{--nx-grad:linear-gradient(90deg,#a3abb5 -1.49%,#f6f5f2 19.18%,#ffc9c2 60.52%);--nx-e:cubic-bezier(.16,1,.3,1)}
#nichos .nx-in{width:min(100% - var(--pad)*2,1120px);margin-inline:auto}
#nichos .nx-grad{background:var(--nx-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding:0 .14em .16em 0;margin-right:-.14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#nichos .nx-h2{font-size:32px;line-height:1.2;font-weight:400;letter-spacing:-.01em;max-width:520px;margin-bottom:40px;text-wrap:balance}

/* ---------- cartão ---------- */
#nichos .nx-grade{display:grid;gap:40px}
#nichos .nx-card{min-width:0}
#nichos .nx-card h3{margin-top:32px;font-size:20px;line-height:1.375;font-weight:400;letter-spacing:-.005em;text-wrap:balance}
#nichos .nx-card h3.nx-grad{padding-right:0;margin-right:0}
#nichos .nx-card p{margin-top:24px;font-size:14px;line-height:1.625;color:rgba(244,245,247,.72);max-width:44em}
#nichos .nx-painel{position:relative;isolation:isolate;container-type:inline-size;aspect-ratio:4/3;overflow:clip;border-radius:22px;
  background:rgba(12,13,16,.66)}
#nichos .nx-painel::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px rgba(255,214,208,.14) inset}

/* ---------- 1. o número ---------- */
#nichos .nx-p-num{display:grid;place-content:center;justify-items:center;
  background:radial-gradient(70% 55% at 0% 0%,rgba(255,236,232,.09),transparent 72%),rgba(12,13,16,.66)}
#nichos .nx-num{position:relative;display:flex;align-items:center;height:1.5em;font-size:27cqi;line-height:1;font-weight:400;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;margin-top:-.08em;padding:0 .1em;
  -webkit-mask:linear-gradient(transparent 0 6%,#000 22%,#000 80%,transparent 96%);mask:linear-gradient(transparent 0 6%,#000 22%,#000 80%,transparent 96%)}
/* a máscara só cobre a caixa do .nx-num; o último algarismo passa da borda (margem negativa entre colunas) e o lado direito do "0" saía cortado. A folga lateral (padding acima) deixa o desenho inteiro dentro da máscara */
#nichos .nx-val{display:flex;align-items:center;transition:opacity .35s var(--nx-e)}
#nichos .nx-val.sai{opacity:0}
/* a coluna tem a largura exata do algarismo (1ch com tabular-nums) e só corta na vertical: nada do dígito some de lado */
#nichos .nx-col{position:relative;display:block;width:1ch;margin-right:-.045em;height:1.5em;overflow:visible clip}
#nichos .nx-tira{display:block;transform:translateY(calc(.25em - var(--y,0) * 1em));transition:transform 2.2s var(--nx-e) var(--d,0s)}
#nichos .nx-tira.ja{transition:none}
#nichos .nx-tira.parou i:not(.alvo){visibility:hidden}
#nichos .nx-tira i,#nichos .nx-uni,#nichos .nx-dig,#nichos .nx-pre,#nichos .nx-pos{font-style:normal;display:block;height:1em;line-height:1;
  background:linear-gradient(180deg,#f4f6f8 0%,#c8ced6 40%,#9ea6b1 72%,#8a929d 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
#nichos .nx-uni{padding-right:.04em}
#nichos .nx-pre{font-size:.36em;height:auto;align-self:flex-start;margin:.95em .14em 0 0;letter-spacing:-.02em}
#nichos .nx-pos{font-size:.34em;height:auto;align-self:flex-end;margin:0 0 1.15em .18em;letter-spacing:-.02em}
#nichos .nx-rot{position:relative;margin-top:-5cqi;font-size:max(12px,3.2cqi);line-height:1.3;color:rgba(244,245,247,.72);text-align:center;transition:opacity .35s var(--nx-e)}
#nichos .nx-rot.sai{opacity:0}
#nichos .nx-ex{position:absolute;right:14px;bottom:14px;z-index:4}

/* ---------- 2. a moeda e a esfera ---------- */
#nichos .nx-p-arco{background:#050607}
/* a esfera é um gradiente do próprio painel (círculo de raio 165cqi com o centro em 217cqi): nada sai da caixa */
#nichos .nx-esfera{position:absolute;inset:0;
  background:radial-gradient(circle 165cqi at 217cqi 50%,#060708 calc(165cqi - 64px),#0c0d10 calc(165cqi - 22px),#1f1d1d calc(165cqi - 6px),
    #6f6866 calc(165cqi - 1.8px),#f2e9e5 calc(165cqi - .7px),rgba(255,214,208,.18) 165cqi,rgba(255,214,208,.05) calc(165cqi + 7px),transparent calc(165cqi + 20px))}
#nichos .nx-moeda{position:absolute;left:25cqi;top:50%;width:27cqi;height:27cqi;translate:-50% -50%;overflow:visible;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.65));animation:nx-boia 4.6s ease-in-out infinite alternate}
@keyframes nx-boia{from{transform:translateY(-1.2cqi)}to{transform:translateY(1.2cqi)}}
#nichos .nx-itens{position:absolute;inset:0;z-index:2}
#nichos .nx-itens>span{position:absolute;left:217cqi;top:50%;width:0;height:0;opacity:0;
  animation:nx-arco 17.6s linear infinite,nx-some 17.6s linear infinite;animation-delay:calc(var(--i) * -2.2s)}
#nichos .nx-itens b{position:absolute;left:0;top:0;translate:0 -50%;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;
  font-size:clamp(12px,4cqi,15px);font-weight:600;letter-spacing:-.01em;color:#f6f5f2}
#nichos .nx-itens .ic{width:1.25em;height:1.25em;color:#f6f5f2}
/* painel estreito (três colunas no tablet): o nome não cabe entre o arco e a borda, fica só o ícone, maior */
@container (max-width:299px){#nichos .nx-itens .nx-tx{display:none}#nichos .nx-itens .ic{width:20px;height:20px}}
@keyframes nx-arco{from{transform:rotate(-21.25deg) translateX(-151cqi) rotate(21.25deg)}to{transform:rotate(21.25deg) translateX(-151cqi) rotate(-21.25deg)}}
/* o item só acende depois de entrar no painel (16% do ciclo = a borda): nada passa cortado pela borda */
@keyframes nx-some{0%,15%{opacity:0}26%{opacity:1}74%{opacity:1}85%,100%{opacity:0}}

/* ---------- 3. o globo ---------- */
#nichos .nx-p-globo{background:#050607}
#nichos .nx-halo{position:absolute;left:50%;top:51%;width:84cqi;aspect-ratio:1;border-radius:50%;translate:-50% -50%;
  background:radial-gradient(circle,#050607 0 54%,#0d0e11 72%,#17181c 90%,#202227 99%,transparent 100%);
  box-shadow:0 0 0 1px rgba(255,236,232,.05),0 0 60px rgba(255,214,208,.035)}
#nichos .nx-globo{position:absolute;left:50%;top:51%;width:42cqi;height:42cqi;translate:-50% -50%}

/* ---------- parado fora da tela ---------- */
#nichos .nx-moeda,#nichos .nx-itens>span{animation-play-state:paused}
#nichos.vivo .nx-moeda,#nichos.vivo .nx-itens>span{animation-play-state:running}

/* ---------- abas e setas (só no celular, só com script) ---------- */
#nichos .nx-abas,#nichos .nx-setas{display:none}
@media (max-width:47.99rem){
  .js-ok #nichos .nx-abas{display:flex;gap:20px;margin:-12px 0 16px}
  .js-ok #nichos .nx-abas button{min-height:44px;font-size:17px;line-height:1.25;font-weight:400;color:#f6f5f2;opacity:.6;transition:opacity .25s;white-space:nowrap}
  .js-ok #nichos .nx-abas button[aria-selected="true"]{opacity:1;background:var(--nx-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .js-ok #nichos .nx-abas button:active{transform:scale(.97)}
  .js-ok #nichos .nx-grade{position:relative;grid-template-areas:"c";touch-action:pan-y}
  /* só o cartão aberto dá a altura: cartão curto não deixa vão antes das setas */
  .js-ok #nichos .nx-card:not(.on){position:absolute;inset:0 0 auto 0}
  .js-ok #nichos .nx-card{grid-area:c;opacity:0;visibility:hidden;transform:translateX(14px);
    transition:opacity .45s var(--nx-e),transform .55s var(--nx-e),visibility 0s linear .55s}
  .js-ok #nichos .nx-card.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--nx-e),transform .55s var(--nx-e),visibility 0s}
  .js-ok #nichos .nx-card.antes{transform:translateX(-14px)}
  #nichos .nx-card h3{margin-top:24px}
  #nichos .nx-card p{margin-top:16px;font-size:15px;line-height:1.6}
  /* as setas redondas embaixo, à esquerda, como na Ethena: a primeira apagada no começo, a segunda no fim */
  .js-ok #nichos .nx-setas{display:flex;gap:10px;margin-top:28px}
  .js-ok #nichos .nx-seta{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#f6f5f2;
    border:1px solid rgba(255,214,208,.16);background:radial-gradient(120% 90% at 50% 0%,rgba(255,236,232,.1),rgba(12,13,16,.92) 70%);
    transition:opacity .25s var(--nx-e),transform .15s var(--nx-e)}
  .js-ok #nichos .nx-seta .ic{width:18px;height:18px}
  .js-ok #nichos .nx-seta[data-nx-ir="-1"] .ic{transform:scaleX(-1)}
  .js-ok #nichos .nx-seta:disabled{opacity:.38;cursor:default}
  .js-ok #nichos .nx-seta:not(:disabled):active{transform:scale(.95)}
  .js-ok #nichos .nx-seta:focus-visible{outline:2px solid #ff5448;outline-offset:2px}
}
@media (max-width:22.49rem){.js-ok #nichos .nx-abas{gap:14px}.js-ok #nichos .nx-abas button{font-size:16px}}

/* ---------- tablet e computador: três lado a lado ---------- */
@media (min-width:48rem){
  #nichos .nx-h2{font-size:40px;line-height:1.2}
  #nichos .nx-grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,35px)}
  #nichos .nx-card h3{font-size:clamp(17px,.9rem + .45vw,20px);margin-top:clamp(20px,2.4vw,32px)}
  #nichos .nx-card p{margin-top:clamp(14px,1.8vw,24px)}
}

@media (prefers-reduced-motion:reduce){
  #nichos .nx-tira{transition:none}
  #nichos .nx-moeda{animation:none}
  #nichos .nx-itens>span{animation:none;opacity:1;transform:rotate(calc(var(--o,0) * 1deg)) translateX(-151cqi) rotate(calc(var(--o,0) * -1deg))}
  #nichos .nx-itens>span:nth-child(n+6){opacity:0}
  #nichos .nx-itens>span:nth-child(1){--o:-10.6}#nichos .nx-itens>span:nth-child(2){--o:-5.3}#nichos .nx-itens>span:nth-child(4){--o:5.3}#nichos .nx-itens>span:nth-child(5){--o:10.6}
  .js-ok #nichos .nx-card,.js-ok #nichos .nx-card.antes{transition:opacity .2s,visibility 0s;transform:none}
}