/* ==========================================================================
   Home -- prova social: "NexTool em números", cases e depoimentos
   --------------------------------------------------------------------------
   Consolidado a partir do preview aprovado em 2026-09-08
   (/preview-prova-social). Das sete variações testadas ficou a "H" (mapa +
   ticker); as demais e os controles do preview foram removidos. A ordem das
   regras segue a do preview de propósito: várias dependem da cascata.

   Carregado SÓ pela home (<link> no próprio HTML), nunca pelo main.css: os
   blocos de largura total miram #services e #recent-blog-posts, ids que outras
   páginas também usam. Hoje só a /index-lab o carrega; a home oficial passa a
   carregar na publicação.
   ========================================================================== */

/* ---------- Números: base ---------- */
.nx-stats .nx-n{display:block;font-weight:700;letter-spacing:-.02em;line-height:1;
                color:var(--heading-color);font-variant-numeric:tabular-nums}

/* ---------- Mapa ---------- */
.nx-mapa-wrap{position:relative}
/* Espaço do mapa reservado antes de o .svg chegar (carrega sob demanda): sem isto
   a página pula ~400px quando ele aparece. A proporção é a do viewBox. */
.nx-mapa-area{aspect-ratio:1000/396}
.nx-mapa-area svg{width:100%;height:auto;display:block}
.nx-mapa-wrap.sem-mapa .nx-mapa-area,
.nx-mapa-wrap.sem-mapa .nx-mapa-legenda{display:none}
.nx-mapa path{stroke:var(--background-color);stroke-width:.4}
.nx-mapa path,
.nx-mapa .off{fill:color-mix(in srgb,var(--default-color),transparent 91%)}
.nx-mapa .f1{fill:color-mix(in srgb,var(--accent-color),transparent 68%)}
.nx-mapa .f2{fill:color-mix(in srgb,var(--accent-color),transparent 48%)}
.nx-mapa .f3{fill:color-mix(in srgb,var(--accent-color),transparent 24%)}
.nx-mapa .f4{fill:var(--accent-color)}
.nx-mapa-legenda{display:flex;align-items:center;gap:5px;justify-content:flex-end;
                 font-size:11px;color:var(--default-color);opacity:.6;margin-top:2px}
.nx-mapa-legenda span{width:22px;height:8px;border-radius:2px}
.nx-mapa-legenda span:nth-child(1){background:color-mix(in srgb,var(--accent-color),transparent 68%)}
.nx-mapa-legenda span:nth-child(2){background:color-mix(in srgb,var(--accent-color),transparent 48%)}
.nx-mapa-legenda span:nth-child(3){background:color-mix(in srgb,var(--accent-color),transparent 24%)}
.nx-mapa-legenda span:nth-child(4){background:var(--accent-color)}

/* ---------- Ticker contínuo ---------- */
.nx-tk{overflow:hidden;position:relative;padding:6px 0;
       -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
       mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.nx-tk__trilho{display:flex;width:max-content;animation:nx-desliza 34s linear infinite}
.nx-tk:hover .nx-tk__trilho{animation-play-state:paused}
.nx-tk__i{display:flex;align-items:baseline;gap:9px;padding:0 30px;white-space:nowrap;
          border-right:1px solid color-mix(in srgb,var(--default-color),transparent 88%)}
.nx-tk__i b{font-size:40px;font-weight:700;color:var(--heading-color);letter-spacing:-.02em}
.nx-tk__i i{font-style:normal;font-size:14px;color:var(--default-color);opacity:.8}
@keyframes nx-desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.nx-tk__trilho{animation:none}
  .nx-tk{mask-image:none;-webkit-mask-image:none;overflow-x:auto}}

/* Ticker sob o mapa */
.nx-tk--sob-mapa{margin-top:18px;padding-top:18px;
                 border-top:1px solid color-mix(in srgb,var(--default-color),transparent 88%)}
.nx-tk__fila{display:flex}
/* o trilho só começa a rolar quando a contagem termina: número com largura
   variável durante a contagem empurraria os itens e faria o laço tremer. */
.nx-tk--sob-mapa .nx-tk__trilho{animation-play-state:paused}
.nx-tk--sob-mapa.rolando .nx-tk__trilho{animation-play-state:running}
.nx-tk--sob-mapa .nx-tk__i b{font-variant-numeric:tabular-nums;display:inline-block;text-align:right}
@media (max-width:767.98px){
  .nx-tk--sob-mapa .nx-tk__i{padding:0 20px}
  .nx-tk--sob-mapa .nx-tk__i b{font-size:31px}
}

/* Cascata do mapa: antes de acender, todo país fica na cor "apagado"; ao
   ganhar .on, cada faixa volta à sua cor com um atraso diferente, do tom mais
   forte ao mais claro. A última faixa fecha por volta de 2,8s -- o mesmo tempo
   da contagem dos números. */
.nx-painel:not(.on) .nx-mapa path{fill:color-mix(in srgb,var(--default-color),transparent 91%)}
.nx-mapa path{transition:fill 1.3s ease}
.nx-painel.on .nx-mapa .f4{transition-delay:0s}
.nx-painel.on .nx-mapa .f3{transition-delay:.5s}
.nx-painel.on .nx-mapa .f2{transition-delay:1s}
.nx-painel.on .nx-mapa .f1{transition-delay:1.5s}
@media (prefers-reduced-motion:reduce){.nx-mapa path{transition:none}}

/* ---------- Largura total (full-bleed) ----------
   O .container do Bootstrap trava em ~1140/1320px. O ticker, a fileira de
   serviços, o carrossel de posts e o de depoimentos passam a ocupar a largura
   da janela: 100vw com margem lateral negativa de meia diferença, e
   `overflow-x:clip` na seção para a barra de rolagem não virar scroll
   horizontal na página. */
#nx-stats,
#services,
#recent-blog-posts,
#nx-dep{overflow-x:clip}

.nx-tk--sob-mapa,
#services .services-carousel-wrapper,
#recent-blog-posts .recent-blog-posts-container{
  width:100vw;
  margin-inline:calc(50% - 50vw);
  max-width:none
}

/* O ticker encosta nas bordas de propósito: o esmaecimento das pontas já faz
   a transição. */
.nx-tk--sob-mapa{padding-inline:0}

/* SEM respiro lateral nos dois carrosséis, de propósito: o recorte (overflow e
   máscara) mora no viewport, DENTRO do wrapper -- com padding aqui, os cards
   sumiam 44px antes da borda da tela, com o esmaecimento no meio do caminho.
   Os dois rodam em laço contínuo (clones dos dois lados), então não há começo
   nem fim a proteger: a faixa vai de borda a borda, como a dos depoimentos.
   O de posts é também `.container` do Bootstrap: sem este zero, os 12px de
   padding dele voltam e a faixa para antes da borda. */
#services .services-carousel-wrapper,
#recent-blog-posts .recent-blog-posts-container{padding-inline:0}

/* A largura do card era fixa em (100cqi - 2*gap)/3 -- SEMPRE três. Como a
   viewport já é um container (`container-type:inline-size`), a contagem varia
   por faixa de largura mantendo a fórmula que o JS do carrossel espera
   (N cards + (N-1) gaps). */
@container (min-width: 1150px) {
  .services-carousel-card,
  .recent-blog-posts-card{width:calc((100cqi - 3 * 1.5rem) / 4)}
}
@container (min-width: 1500px) {
  .services-carousel-card,
  .recent-blog-posts-card{width:calc((100cqi - 4 * 1.5rem) / 5)}
}
@container (min-width: 1900px) {
  .services-carousel-card,
  .recent-blog-posts-card{width:calc((100cqi - 5 * 1.5rem) / 6)}
}

/* Esmaecimento das pontas: fica no viewport, não no wrapper, para não apagar
   as setas de navegação (irmãs do viewport, fora da máscara). */
#services .services-carousel-viewport,
#recent-blog-posts .recent-blog-posts-viewport{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)
}

/* ---------- Ticker com ícone ---------- */
.nx-tk--sob-mapa .nx-tk__i{align-items:center;gap:13px}
.nx-tk__ic{flex:0 0 auto;width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
           background:color-mix(in srgb,var(--accent-color),transparent 88%)}
.nx-tk__ic i{font-size:21px;color:var(--accent-color);line-height:1}
.nx-tk__tx{display:flex;flex-direction:column;line-height:1.15}
.nx-tk__tx b{font-size:30px;font-weight:700;color:var(--heading-color);letter-spacing:-.02em}
.nx-tk__tx em{font-style:normal;font-size:13px;color:var(--default-color);opacity:.8;margin-top:1px}
@media (max-width:767.98px){
  .nx-tk__ic{width:38px;height:38px;border-radius:9px}
  .nx-tk__ic i{font-size:18px}
  .nx-tk__tx b{font-size:25px}
}
/* Com ícone, o número fica ACIMA do rótulo: alinhar à esquerda, senão o
   min-width (que evita o tremor durante a contagem) afasta o número do ícone. */
.nx-tk--sob-mapa .nx-tk__tx b{text-align:left}

/* ---------- Cases ----------
   Entram entre "Processo" (cinza) e a FAQ (branca): cases em branco e
   depoimentos em cinza mantêm a alternância de fundos de tudo que vem depois. */
.nx-cases__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:991.98px){.nx-cases__grid{grid-template-columns:1fr}}
.nx-case{display:flex;flex-direction:column;background:var(--background-color);
         border:1px solid color-mix(in srgb,var(--default-color),transparent 88%);
         border-radius:12px;padding:26px 24px}
.nx-case__ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
             background:color-mix(in srgb,var(--accent-color),transparent 88%);margin-bottom:16px}
.nx-case__ic i{font-size:22px;color:var(--accent-color)}
.nx-case h3{font-size:18px;line-height:1.35;margin:0 0 10px;color:var(--heading-color)}
.nx-case p{font-size:14px;line-height:1.6;color:var(--default-color);opacity:.85;margin:0 0 16px}
.nx-case__r{align-self:flex-start;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:20px;
            background:color-mix(in srgb,var(--accent-color),transparent 88%);color:var(--accent-color);
            margin-bottom:16px}
.nx-case__l{margin-top:auto;font-size:14px;font-weight:600;color:var(--accent-color);text-decoration:none}
.nx-case__l i{font-size:13px;transition:transform .15s}
.nx-case__l:hover i{transform:translateX(3px)}
/* Cases vindos do portfólio (2026-10-02): linha de cliente/setor e tags do projeto. */
.nx-case p.nx-case__cli{font-size:12.5px;font-weight:600;opacity:.7;margin:-4px 0 10px}
.nx-case__tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:auto 0 0;padding:12px 0 0}
.nx-case__r + .nx-case__tags{padding-top:0}
.nx-case__tags li{font-size:11.5px;font-weight:600;line-height:1;padding:5px 9px;border-radius:6px;
                  background:color-mix(in srgb,var(--heading-color),transparent 92%);color:var(--heading-color)}
[data-theme="dark"] .nx-case__tags li{background:rgba(255,255,255,.08);color:var(--default-color)}
.nx-cases__mais{text-align:center;margin:26px 0 0}
.nx-cases__mais a{font-weight:600;color:var(--accent-color);text-decoration:none}

/* Card de depoimento (.nx-dep): sections/depoimentos.css, compartilhado com a página de módulo. */

/* ---------- Depoimentos em carrossel (largura total) ----------
   Rolagem contínua lenta, pausa no hover/foco/toque (o JS cuida disso). */
.nx-deps.carrossel .nx-deps__grid{
  display:flex;grid-template-columns:none;overflow-x:auto;scrollbar-width:none;
  gap:22px;padding-bottom:10px;align-items:stretch;
  width:100vw;margin-inline:calc(50% - 50vw);max-width:none;
  padding-inline:clamp(16px,3vw,44px);
  --m-esq:#000 0;--m-dir:#000 100%;
  -webkit-mask-image:linear-gradient(90deg,var(--m-esq),#000 3%,#000 97%,var(--m-dir));
  mask-image:linear-gradient(90deg,var(--m-esq),#000 3%,#000 97%,var(--m-dir))
}
/* No começo não há nada escondido à esquerda -- o fade ali comeria a primeira
   linha do primeiro depoimento. O mesmo vale para a direita no fim. */
.nx-deps.carrossel .nx-deps__grid.tem-esq{--m-esq:transparent 0}
.nx-deps.carrossel .nx-deps__grid.tem-dir{--m-dir:transparent 100%}
.nx-deps.carrossel .nx-deps__grid::-webkit-scrollbar{display:none}
.nx-deps.carrossel .nx-dep{flex:0 0 clamp(300px,26vw,420px)}
@media (max-width:991.98px){.nx-deps.carrossel .nx-dep{flex-basis:min(78vw,360px)}}

/* ---------- Só na /index-lab ----------
   Marca os cases e depoimentos de exemplo ("ficticio": true no JSON), que o
   servidor nunca renderiza na home oficial. */
.nx-ficticio{position:absolute;top:10px;left:50%;transform:translateX(-50%);
             font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
             padding:2px 8px;border-radius:4px;background:#b45309;color:#fff;pointer-events:none}
.nx-case{position:relative}