/* /nichos-de-software — CSS só desta página (prefixo p-nch-). Clone de a referência
   Celular primeiro. O carrossel de ativos da a referência vira, no celular, a grade do grupo tocado (2 colunas; 4 no tablet) e anda
   cartão a cartão só no computador; a tabela dos status vira as quatro etapas lado a lado (botões de escolha) + a faixa da tocada
   na largura toda. Nunca trilho com rolagem lateral. Movimento só com transform/opacity; "menos movimento" desliga a passagem. */

:root{--p-nch-real:#35d07f;--p-nch-est:#a3abb5;--p-nch-br:#ff8a80}

/* ---------- hero: título, apoio, abas, carrossel, nota e o botão por último (a ordem da a referência) ---------- */
.lp-hero{padding-top:96px;padding-bottom:40px}
.lp-hint{display:none}
.lp-hero-c{width:min(100%,1200px);gap:14px}
.lp-hero .lp-h1.rw,.lp-hero .lp-lede{max-width:860px}
.lp-hero .lp-sub{order:1;width:100%;margin:4px 0 0;font-size:1rem;color:var(--lp-mut2)}
.lp-hero .hero-cta{order:2;margin-top:4px}

.p-nch-car{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px;width:100%}
.p-nch-abas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.p-nch-abas button{min-height:44px;min-width:44px;padding:0 20px;border:0;border-radius:999px;font-family:inherit;font-size:1rem;font-weight:600;line-height:1;color:var(--tx);cursor:pointer;
  background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--line2) inset;transition:background-color .25s,color .25s,transform .18s var(--ease)}
.p-nch-abas button:active{transform:scale(.97)}
.p-nch-abas button[aria-selected="true"]{background:#fff;color:#0a0a0a;box-shadow:none}
.p-nch-abas button:focus-visible,.p-nch-seta:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px}

.p-nch-vp{display:block;width:100%}
.p-nch-trk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;text-align:left}

/* o cartão (o "ativo" da a referência): ícone, nome, valor grande, a linha colorida e o mini gráfico */
.p-nch-card{position:relative;display:grid;grid-template-rows:auto auto auto auto 1fr;align-content:start;justify-items:center;text-align:center;gap:4px;min-width:0;padding:14px 14px 16px;border-radius:20px;
  background:linear-gradient(170deg,#161616,#0c0c0c 70%);box-shadow:0 0 0 1px var(--line) inset}
.p-nch-ic{display:grid;place-items:center;width:36px;height:36px;margin-bottom:6px;border-radius:12px;background:rgba(255,84,72,.14);color:var(--red-hi);box-shadow:0 0 0 1px rgba(255,84,72,.3) inset}
.p-nch-ic svg{width:18px;height:18px}
.p-nch-n{display:block;font-size:.875rem;line-height:1.25;color:var(--lp-mut2);overflow-wrap:anywhere}
.p-nch-v{display:block;font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);line-height:1.15;font-weight:600;letter-spacing:-.02em;color:#fff}
.p-nch-tag{display:block;font-size:.8125rem;line-height:1.3;font-weight:500;text-wrap:balance}
.p-nch-tag::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 0 0;border-radius:50%;background:currentColor;vertical-align:.12em}
.p-nch-tag--real{color:var(--p-nch-real)}
.p-nch-tag--est{color:var(--p-nch-est)}
.p-nch-tag--br{color:var(--p-nch-br)}
.p-nch-eco,.lp-hero .lp-sub .p-nch-btn{display:none}

/* mini gráficos (decorativos, aria-hidden): a cor segue a linha de origem do número */
.p-nch-viz{--cv:var(--red-hi);display:flex;align-items:flex-end;gap:4px;width:100%;height:30px;margin-top:8px;align-self:end}
.p-nch-card:has(.p-nch-tag--real) .p-nch-viz{--cv:var(--p-nch-real)}
.p-nch-card:has(.p-nch-tag--est) .p-nch-viz{--cv:#c9cfd6}
.p-nch-viz i{display:block;font-style:normal}
.p-nch-viz--pilulas{flex-wrap:wrap;justify-content:center;align-items:center;height:auto;min-height:30px;gap:4px}
.p-nch-pl{padding:3px 8px;border-radius:999px;font-size:.75rem;line-height:1.3;color:#fff;background:rgba(255,255,255,.07);box-shadow:0 0 0 1px var(--line) inset;white-space:nowrap}
.p-nch-fx,.p-nch-mk,.p-nch-te,.p-nch-pz{position:relative;width:100%;height:6px;margin-bottom:12px;border-radius:99px;background:rgba(255,255,255,.1)}
.p-nch-fx b{position:absolute;left:22%;right:18%;top:0;bottom:0;border-radius:inherit;background:var(--cv)}
.p-nch-mk b{position:absolute;left:52%;top:-5px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--cv);box-shadow:0 0 0 4px rgba(255,84,72,.2)}
.p-nch-te b{position:absolute;left:0;width:70%;top:0;bottom:0;border-radius:inherit;background:var(--cv)}
.p-nch-te u{position:absolute;left:70%;top:-7px;width:2px;height:20px;margin-left:4px;border-radius:2px;background:#fff}
.p-nch-pz{background:linear-gradient(90deg,var(--cv),rgba(255,255,255,.1))}
.p-nch-pz b{position:absolute;top:-4px;width:14px;height:14px;border-radius:50%;background:#0c0c0c;box-shadow:0 0 0 3px var(--cv) inset}
.p-nch-pz b:first-child{left:0}.p-nch-pz b+b{right:0}
.p-nch-fu{flex:1 1 0;height:100%;border-radius:6px;background:var(--cv);opacity:calc(.35 + var(--w)*.65);transform-origin:bottom;transform:scaleY(var(--w))}
.p-nch-dg{flex:1 1 0;height:100%;border-radius:6px 6px 3px 3px;background:var(--cv);transform-origin:bottom;transform:scaleY(var(--h));opacity:calc(.4 + var(--h)*.6)}
.p-nch-viz--linhas{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:5px}
.p-nch-ln{height:5px;border-radius:99px;background:rgba(255,255,255,.18);transform-origin:left;transform:scaleX(var(--w))}
.p-nch-viz--onda svg{width:100%;height:100%;overflow:visible}
.p-nch-viz--onda path{fill:none;stroke:var(--cv);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}

.p-nch-setas{display:none}
.p-nch-nota{display:block;max-width:44em;font-size:.9375rem;line-height:1.5;color:var(--lp-mut);text-wrap:pretty}
.lp-hero .lp-sub .p-nch-nota a{min-height:0;display:inline;color:var(--tx);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}

/* com o script: no celular e no tablet aparece só o grupo da aba tocada (sem script, os doze ficam à vista) */
@media (max-width:1023.98px){
  .p-nch-car.on[data-g="0"] .p-nch-card:not([data-g="0"]),
  .p-nch-car.on[data-g="1"] .p-nch-card:not([data-g="1"]),
  .p-nch-car.on[data-g="2"] .p-nch-card:not([data-g="2"]){display:none}
  .p-nch-car.on .p-nch-card{animation:p-nch-entra .4s var(--ease) both}
}
@keyframes p-nch-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* no celular o cartão fica no essencial (ícone, nome, valor e origem): o mini gráfico é enfeite e volta a partir de 600 px */
@media (max-width:599.98px){
  .lp-hero{padding-top:88px}
  .lp-hero-c{gap:12px}
  .p-nch-card{padding:12px 10px 14px}
  .p-nch-ic{width:32px;height:32px;margin-bottom:4px;border-radius:10px}
  .p-nch-viz{display:none}
}
@media (min-width:600px){
  .p-nch-trk{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
}

/* computador: o carrossel da a referência (cartões de 224 px, os vizinhos esmaecendo pela borda, as setas ‹ › nos lados) */
@media (min-width:1024px){
  .lp-hero{padding-top:92px;padding-bottom:32px}
  .lp-hero-c{gap:12px}
  .p-nch-car{row-gap:12px}
  /* o corte das pontas é contenção de pintura, não overflow escondido: o trilho anda por transform e não alarga nada fora da janela */
  .p-nch-vp{contain:paint;padding-block:6px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .p-nch-car:not(.on) .p-nch-vp{-webkit-mask-image:none;mask-image:none}
  .p-nch-car:not(.on) .p-nch-trk{grid-template-columns:repeat(4,224px);justify-content:center;gap:16px}
  .p-nch-car.on .p-nch-trk{display:flex;gap:16px;width:max-content;transition:transform .55s var(--ease)}
  .p-nch-card{flex:none;width:224px;padding:18px 18px 16px;transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .p-nch-car.on .p-nch-card:not(.ve){opacity:.35;transform:scale(.96)}
  .p-nch-ic{width:44px;height:44px}
  .p-nch-ic svg{width:22px;height:22px}
  .p-nch-n{font-size:.9375rem}
  .p-nch-v{font-size:1.5rem}
  .lp-hero .lp-sub .p-nch-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;border-radius:999px;font-size:.9375rem;font-weight:600;color:#fff;text-decoration:none;
    background:rgba(255,255,255,.07);box-shadow:0 0 0 1px var(--line2) inset;transition:background-color .25s,transform .18s var(--ease)}
  .lp-hero .lp-sub .p-nch-btn:active{transform:scale(.98)}
  .lp-hero .lp-sub .p-nch-btn{justify-self:stretch}
  .p-nch-car.on .p-nch-eco{display:grid}
  .p-nch-car.on .p-nch-setas{display:flex;justify-content:center;gap:24px}
  .p-nch-seta{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;color:#fff;background:transparent;transition:background-color .25s,opacity .25s,transform .18s var(--ease)}
  .p-nch-seta:disabled{opacity:.3;cursor:default}
  .p-nch-seta svg{width:20px;height:20px}
  .p-nch-seta[data-dir="-1"] svg{transform:rotate(180deg)}
  .p-nch-seta:active{transform:scale(.95)}
}
/* tela baixa: o herói perde respiro e depois enfeite (nunca o botão nem os números) para o botão principal ficar na primeira tela */
@media (max-width:1023.98px) and (max-height:830px){
  .lp-hero-c{gap:8px}
  .p-nch-car{gap:8px}
  .p-nch-ic{display:none}
  .p-nch-card{padding-top:10px}
}
@media (max-width:1023.98px) and (max-height:790px){.lp-hero .lp-lede{display:none}}
@media (max-width:1023.98px) and (max-height:700px){.p-nch-nota{display:none}}
@media (max-width:359.98px){.p-nch-abas{gap:6px}.p-nch-abas button{padding:0 14px;font-size:.9375rem}}
@media (max-width:1023.98px) and (max-height:600px){.lp-hero .lp-bc{display:none}.lp-hero{padding-top:76px}.lp-hero .lp-h1.rw{font-size:1.625rem}.p-nch-card{padding:8px 8px 10px}.p-nch-n{font-size:.8125rem}}
/* computador baixo: as setas passam para os lados do carrossel (a linha delas some) e o mini gráfico encolhe, depois sai */
@media (min-width:1024px) and (max-height:900px){
  .lp-hero{padding-top:84px}
  .lp-hero-c{gap:8px}
  .p-nch-car{row-gap:8px}
  .p-nch-car.on{grid-template-columns:44px minmax(0,1fr) 44px;align-items:center}
  .p-nch-car.on>.p-nch-abas,.p-nch-car.on>.p-nch-nota{grid-column:1/-1}
  .p-nch-car.on>.p-nch-vp{grid-column:2;grid-row:2}
  .p-nch-car.on>.p-nch-setas{display:contents}
  .p-nch-car.on .p-nch-seta[data-dir="-1"]{grid-column:1;grid-row:2}
  .p-nch-car.on .p-nch-seta[data-dir="1"]{grid-column:3;grid-row:2}
  .p-nch-viz{height:20px;margin-top:4px}
}
@media (min-width:1024px) and (max-height:780px){.p-nch-viz{display:none}}
@media (hover:hover) and (pointer:fine){
  .p-nch-abas button:not([aria-selected="true"]):hover{background-color:rgba(255,255,255,.12)}
  .lp-hero .lp-sub .p-nch-btn:hover,.p-nch-seta:not(:disabled):hover{background-color:rgba(255,255,255,.14)}
}

/* ---------- 1. a tabela dos status: as quatro etapas (celular primeiro: as quatro lado a lado + a faixa da tocada) ---------- */
.p-nch-et{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 8px}
.p-nch-et-r{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.p-nch-et-k,.p-nch-et-faixa{display:none}
.p-nch-et-l{display:contents;list-style:none;margin:0;padding:0}
.p-nch-et-c{display:contents}
.p-nch-et-h{grid-row:1;display:grid;justify-items:center;align-content:start;gap:8px;min-height:44px;padding:12px 2px;border-radius:20px;cursor:pointer;text-align:center;
  background:#0d0d0d;box-shadow:0 0 0 1px var(--line) inset;transition:box-shadow .3s,background-color .3s,transform .18s var(--ease)}
.p-nch-et-h:active{transform:scale(.97)}
.p-nch-et-c:nth-child(1) .p-nch-et-h{grid-column:1}.p-nch-et-c:nth-child(2) .p-nch-et-h{grid-column:2}.p-nch-et-c:nth-child(3) .p-nch-et-h{grid-column:3}.p-nch-et-c:nth-child(4) .p-nch-et-h{grid-column:4}
.p-nch-et-ic{display:block;width:min(56px,100%);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px rgba(255,255,255,.22),0 14px 30px -14px rgba(255,84,72,.6)}
.p-nch-et-ic img{display:block;width:100%;height:100%;object-fit:cover}
.p-nch-et-n{display:block;font-size:1rem;line-height:1.15}
.p-nch-et-n b{font-weight:600;color:#fff;letter-spacing:-.02em}
.p-nch-et-n span{display:none}
.p-nch-et-c--hl .p-nch-et-ic{box-shadow:0 0 0 1.5px var(--red-hi),0 14px 30px -10px rgba(255,84,72,.8)}

/* a faixa da etapa tocada, na largura toda (sem :has, as quatro aparecem uma embaixo da outra: o conteúdo nunca some) */
.p-nch-et-b{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;gap:6px 16px;margin-top:4px;padding:16px 18px 6px;border-radius:24px 24px 0 0;background:#0d0d0d;box-shadow:0 1px 0 1px var(--line) inset}
.p-nch-et-b small{grid-column:1/-1;font-size:.875rem;color:var(--lp-mut)}
.p-nch-et-v{margin:0;font-size:2.5rem;line-height:1;font-weight:600;letter-spacing:-.03em;color:#fff}
.p-nch-et-v i{display:block;margin-top:4px;font-size:.875rem;font-style:normal;font-weight:500;letter-spacing:0;color:var(--lp-mut2)}
.p-nch-et-s{margin:0;font-size:1rem;line-height:1.45;color:var(--lp-mut2);text-wrap:pretty}
.p-nch-et-c--hl .p-nch-et-v{color:var(--red-hi)}
.p-nch-et-a{grid-column:1/-1;display:flex;margin-top:-8px;padding:12px 18px 18px;border-radius:0 0 24px 24px;background:#0d0d0d;box-shadow:0 -1px 0 1px var(--line) inset}
.p-nch-et-btn{width:100%}
.p-nch-et-st{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:46px;font-weight:600;color:var(--ok)}

@media (max-width:767.98px){
  .p-nch-et:has(#p-nch-r1:checked) .p-nch-et-c:not(:nth-child(1)) :is(.p-nch-et-b,.p-nch-et-a),
  .p-nch-et:has(#p-nch-r2:checked) .p-nch-et-c:not(:nth-child(2)) :is(.p-nch-et-b,.p-nch-et-a),
  .p-nch-et:has(#p-nch-r3:checked) .p-nch-et-c:not(:nth-child(3)) :is(.p-nch-et-b,.p-nch-et-a),
  .p-nch-et:has(#p-nch-r4:checked) .p-nch-et-c:not(:nth-child(4)) :is(.p-nch-et-b,.p-nch-et-a){display:none}
  .p-nch-et:has(#p-nch-r1:checked) .p-nch-et-c:nth-child(1) .p-nch-et-h,
  .p-nch-et:has(#p-nch-r2:checked) .p-nch-et-c:nth-child(2) .p-nch-et-h,
  .p-nch-et:has(#p-nch-r3:checked) .p-nch-et-c:nth-child(3) .p-nch-et-h,
  .p-nch-et:has(#p-nch-r4:checked) .p-nch-et-c:nth-child(4) .p-nch-et-h{background:linear-gradient(170deg,rgba(217,45,32,.22),#0d0d0d 75%);box-shadow:0 0 0 1.5px var(--red-hi) inset}
  .p-nch-et:has(#p-nch-r1:focus-visible) .p-nch-et-c:nth-child(1) .p-nch-et-h,
  .p-nch-et:has(#p-nch-r2:focus-visible) .p-nch-et-c:nth-child(2) .p-nch-et-h,
  .p-nch-et:has(#p-nch-r3:focus-visible) .p-nch-et-c:nth-child(3) .p-nch-et-h,
  .p-nch-et:has(#p-nch-r4:focus-visible) .p-nch-et-c:nth-child(4) .p-nch-et-h{outline:2px solid var(--red-hi);outline-offset:3px}
  .p-nch-et-b,.p-nch-et-a{animation:p-nch-entra .35s var(--ease) both}
}

/* ---------- 1. tablet e computador: a tabela da a referência (rótulos à esquerda, a faixa acesa no meio, as ações no fim) ---------- */
@media (min-width:768px){
  .p-nch-et-r{display:none}
  .p-nch-et{grid-template-rows:auto auto auto;column-gap:clamp(10px,1.4vw,20px);row-gap:0;align-items:stretch}
  .p-nch-et-faixa{display:block;grid-column:1/-1;grid-row:2;border-radius:16px;background:#141414;box-shadow:0 0 0 1px var(--line) inset}
  .p-nch-et-h{cursor:default;padding:0 0 22px;background:none;box-shadow:none;justify-items:start;text-align:left;gap:14px}
  .p-nch-et-h:active{transform:none}
  .p-nch-et-ic{width:clamp(64px,7vw,96px)}
  .p-nch-et-n{font-size:clamp(1rem,.9rem + .3vw,1.125rem);line-height:1.3;color:var(--lp-mut)}
  .p-nch-et-n span{display:inline}
  .p-nch-et-b{grid-row:2;position:relative;z-index:1;display:block;margin:0;padding:clamp(18px,2vw,28px) 14px;border-radius:0;background:none;box-shadow:none}
  .p-nch-et-b small{display:block;margin-bottom:10px}
  .p-nch-et-v{font-size:clamp(1.75rem,.9rem + 2vw,2.5rem);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .p-nch-et-v i{display:inline;margin:0}
  .p-nch-et-s{margin-top:10px;font-size:.9375rem;line-height:1.45}
  .p-nch-et-a{grid-row:3;margin:0;padding:18px 0 0;background:none;box-shadow:none;border-radius:0}
  .p-nch-et-btn{width:auto;min-width:min(100%,9.5rem)}
  .p-nch-et-st{width:auto;padding:0}
  .p-nch-et-c:nth-child(1) :is(.p-nch-et-b,.p-nch-et-a){grid-column:1}
  .p-nch-et-c:nth-child(2) :is(.p-nch-et-b,.p-nch-et-a){grid-column:2}
  .p-nch-et-c:nth-child(3) :is(.p-nch-et-b,.p-nch-et-a){grid-column:3}
  .p-nch-et-c:nth-child(4) :is(.p-nch-et-b,.p-nch-et-a){grid-column:4}
  /* a 4ª coluna é a acesa (a "FT" da a referência) */
  .p-nch-et-c--hl .p-nch-et-b::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:16px;background:linear-gradient(170deg,rgba(217,45,32,.2),rgba(217,45,32,.04) 70%);box-shadow:0 0 0 1px rgba(255,84,72,.35) inset}
}
@media (min-width:1024px){
  .p-nch-et{grid-template-columns:minmax(110px,.7fr) repeat(4,minmax(0,1fr))}
  .p-nch-et-k{display:block;grid-column:1;align-self:center;position:relative;z-index:1;padding-left:24px;font-size:.9375rem;line-height:1.3;color:var(--lp-mut)}
  .p-nch-et-k0{grid-row:1;align-self:end;padding-bottom:30px}
  .p-nch-et-k1{grid-row:2}
  .p-nch-et-k2{grid-row:3;padding-top:18px}
  .p-nch-et-c:nth-child(1) :is(.p-nch-et-h,.p-nch-et-b,.p-nch-et-a){grid-column:2}
  .p-nch-et-c:nth-child(2) :is(.p-nch-et-h,.p-nch-et-b,.p-nch-et-a){grid-column:3}
  .p-nch-et-c:nth-child(3) :is(.p-nch-et-h,.p-nch-et-b,.p-nch-et-a){grid-column:4}
  .p-nch-et-c:nth-child(4) :is(.p-nch-et-h,.p-nch-et-b,.p-nch-et-a){grid-column:5}
}

/* ---------- 2. as telas reais: no celular os dois celulares lado a lado; daqui para cima a janela com o celular por cima ---------- */
.p-nch-tl{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:480px;margin-inline:auto}
.p-nch-tl-win{display:none}
.p-nch-tl-cel .lp-cel{width:100%}
@media (min-width:600px){
  .p-nch-tl{display:block;max-width:none;padding:0 clamp(80px,14vw,200px) clamp(24px,4vw,48px) 0}
  .p-nch-tl-win{display:block}
  .p-nch-tl-cel--vit{display:none}
  .p-nch-tl-cel--det{position:absolute;right:0;bottom:0;width:clamp(170px,22vw,280px);filter:drop-shadow(0 30px 60px rgba(0,0,0,.7))}
}

@media (prefers-reduced-motion:reduce){
  .p-nch-car.on .p-nch-trk{transition:none}
  .p-nch-car.on .p-nch-card,.p-nch-et-b,.p-nch-et-a{animation:p-nch-some .15s linear both}
  .p-nch-car.on .p-nch-card:not(.ve){transform:none}
}
@keyframes p-nch-some{from{opacity:0}to{opacity:1}}