/* ==========================================================================
   NIVOR — DESIGN SYSTEM · COMPOSIÇÕES
   Blocos maiores, reutilizados entre Home e páginas de solução.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ATMOSFERA
   Duas camadas fixas de gradiente. Sem canvas, sem JS: custo zero de CPU e
   nenhum risco de engasgo na rolagem.
   -------------------------------------------------------------------------- */
.atmos{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 720px at 78% -6%,  rgba(28,86,140,.34), transparent 60%),
    radial-gradient(900px  680px at 2%  16%,  rgba(17,54,96,.30),  transparent 62%),
    radial-gradient(1200px 800px at 52% 108%, rgba(20,64,108,.24), transparent 64%);
}
/* Malha técnica quase imperceptível — dá textura sem virar decoração. */
.atmos::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(148,170,205,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,170,205,.05) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(1000px 700px at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(1000px 700px at 50% 0%, #000 0%, transparent 78%);
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero{ padding-block:clamp(48px,7vw,88px) clamp(64px,8vw,116px); }
.hero__title{ margin-top:var(--s-5); }
.hero__sub{
  margin-top:var(--s-5);
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.125rem,2.1vw,1.4rem);
  line-height:1.34; letter-spacing:-.018em; color:var(--ink);
  max-width:24ch; text-wrap:balance;
}
.hero__text{ margin-top:var(--s-5); max-width:56ch; }
.hero__cta{ margin-top:var(--s-7); }

.hero__rail{
  margin-top:var(--s-8); padding-top:var(--s-5);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6);
  font-family:var(--f-mono); font-size:var(--t-label);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.hero__rail span{ display:inline-flex; align-items:center; gap:8px; }
.hero__rail span::before{
  content:""; width:4px; height:4px; border-radius:50%; flex:none;
  background:var(--cream); box-shadow:0 0 8px 1px var(--cream-glow);
}

/* ==========================================================================
   ÓRBITA — a assinatura da marca
   As soluções giram em torno de um núcleo único. Construída em HTML+CSS,
   não em canvas: a rotação acontece na GPU (transform), custa
   aproximadamente nada de processador e funciona em qualquer aparelho,
   inclusive em celular antigo e em modo de baixo consumo.

   Apenas DOIS elementos giram — os trilhos dos beads. Rótulos e núcleo
   ficam parados, portanto o texto nunca fica de cabeça para baixo.
   ========================================================================== */
.orbit{
  position:relative;
  width:min(100%, 460px);
  aspect-ratio:1/1;
  margin-inline:auto;
  /* Espaço reservado desde o primeiro pixel: o bloco nunca "pula" ao carregar */
  /* nada de `contain:paint` aqui: ele cortaria os rótulos que passam da
     borda do círculo em telas estreitas */
}

/* Brilho difuso atrás de tudo. */
.orbit::before{
  content:""; position:absolute; inset:16%; border-radius:50%;
  background:radial-gradient(circle, rgba(34,102,158,.30), transparent 66%);
  filter:blur(8px);
}

.orbit__ring{
  position:absolute; border-radius:50%;
  border:1px solid var(--line-strong);
}
.orbit__ring--1{ inset:8%;  }
.orbit__ring--2{ inset:24%; border-color:var(--line-cream); opacity:.55; }
.orbit__ring--3{ inset:40%; border-color:var(--line); }

/* Trilhos giratórios. O bead fica no topo do trilho; girando o trilho,
   o bead percorre a circunferência. */
.orbit__track{
  position:absolute; border-radius:50%;
  will-change:transform;
  animation:orbit-spin 30s linear infinite;
}
.orbit__track--1{ inset:8%;  }
.orbit__track--2{ inset:24%; animation-duration:19s; animation-direction:reverse; }

.orbit__bead{
  position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:50%;
  background:var(--cream);
  box-shadow:0 0 14px 3px var(--cream-glow);
}
.orbit__track--2 .orbit__bead{
  width:7px; height:7px;
  background:var(--ink-2);
  box-shadow:0 0 10px 2px rgba(168,180,198,.5);
}

@keyframes orbit-spin{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }

/* Núcleo: o ponto de convergência. */
.orbit__core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:22%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 42%,
             #FFFFFF 0%, var(--cream) 24%, rgba(255,251,200,.32) 52%, transparent 74%);
}
.orbit__pulse{
  position:absolute; left:50%; top:50%;
  width:34%; aspect-ratio:1; border-radius:50%;
  background:#FFFEF2;
  box-shadow:0 0 26px 6px rgba(255,251,200,.8);
  transform:translate(-50%,-50%);
  will-change:transform,opacity;
  animation:orbit-pulse 5.2s var(--ease-soft) infinite;
}
@keyframes orbit-pulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1);    opacity:.78 }
  50%    { transform:translate(-50%,-50%) scale(1.28); opacity:1   }
}

/* Nós: as três frentes. Posicionados a 120° sobre o anel externo. */
.orbit__node{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:130px; text-align:center;
}
.orbit__node--top{ left:50%; top:8%; flex-direction:column-reverse; }
.orbit__node--right{ left:86%; top:69%; }
.orbit__node--left{ left:14%; top:69%; }

.orbit__dot{
  width:13px; height:13px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 36% 30%, #E9EFF8, #5D6879);
  border:1px solid rgba(200,212,228,.5);
  box-shadow:0 0 0 5px var(--bg), 0 0 14px rgba(160,182,215,.35);
  transition:transform var(--d-hover) var(--ease),
             border-color var(--d-hover) var(--ease),
             box-shadow var(--d-hover) var(--ease);
}
.orbit__label{
  font-family:var(--f-mono);
  font-size:.75rem;              /* 12px — legível de verdade no celular */
  letter-spacing:.13em; text-transform:uppercase;
  line-height:1.35; color:var(--ink-2);
  transition:color var(--d-hover) var(--ease);
}
.orbit__node:hover .orbit__dot{
  transform:scale(1.35);
  border-color:var(--cream);
  box-shadow:0 0 0 5px var(--bg), 0 0 18px 4px var(--cream-glow);
}
.orbit__node:hover .orbit__label{ color:var(--cream); }

/* Celular: encolhe o conjunto e aproxima os rótulos, sem perder leitura. */
@media (max-width:520px){
  .orbit{ width:min(100%, 330px); }
  .orbit__node{ width:104px; gap:7px; }
  .orbit__label{ font-size:.6875rem; letter-spacing:.1em; }
  .orbit__node--right{ left:84%; }
  .orbit__node--left{ left:16%; }
}

/* Movimento reduzido: a órbita continua girando — é a assinatura da marca e
   foi pedida em todos os aparelhos — mas em ritmo bem mais lento, e as
   revelações de scroll ficam desligadas (regra em base.css). Rotação
   uniforme e lenta não dispara desconforto vestibular; o que dispara é
   deslocamento brusco e paralaxe. */
@media (prefers-reduced-motion:reduce){
  .orbit__track{ animation-duration:150s !important; animation-play-state:running !important; }
  .orbit__track--2{ animation-duration:110s !important; }
  .orbit__pulse{ animation-duration:14s !important; animation-play-state:running !important; }
}

/* --------------------------------------------------------------------------
   ESTÁGIOS — Governança · Automação · Inteligência
   -------------------------------------------------------------------------- */
.stages{ margin-top:var(--s-8); display:grid; gap:var(--s-1); }
.stage{
  position:relative; display:grid; gap:var(--s-4);
  grid-template-columns:auto 1fr;
  padding:var(--s-6) 0;
  border-top:1px solid var(--line);
  transition:background var(--d-hover) var(--ease);
}
.stage:last-child{ border-bottom:1px solid var(--line); }
.stage__idx{ padding-top:4px; }
.stage__verb{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.025em;
  color:var(--ink); line-height:1.1;
}
.stage__name{
  font-family:var(--f-mono); font-size:var(--t-label);
  letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--cream); margin-bottom:var(--s-3);
}
/* No celular a descrição desce para a segunda linha, alinhada ao texto —
   nunca sob o número. */
.stage__desc{
  grid-column:2; margin-top:var(--s-3);
  color:var(--ink-2); font-size:var(--t-small); max-width:44ch;
}
/* Marca de progressão à esquerda, crescendo a cada estágio. */
.stage__meter{
  position:absolute; left:0; bottom:-1px; height:1px; background:var(--cream);
  opacity:.5;
}
.stage:nth-child(1) .stage__meter{ width:33%; }
.stage:nth-child(2) .stage__meter{ width:66%; }
.stage:nth-child(3) .stage__meter{ width:100%; }

@media (min-width:860px){
  .stage{ grid-template-columns:64px 220px 1fr; align-items:start; gap:var(--s-6); }
  .stage__desc{ grid-column:auto; margin-top:0; }
}

/* --------------------------------------------------------------------------
   TRANSFORMAÇÃO — antes / Nivor
   -------------------------------------------------------------------------- */
.shift{ margin-top:var(--s-8); display:grid; gap:var(--s-5); align-items:stretch; }
.shift__col{
  border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px);
  background:var(--surface-glass);
}
.sec--paper .shift__col{ background:var(--paper-raised); box-shadow:var(--shadow-paper); }
.shift__col--now{ background:transparent; border-style:dashed; }
.sec--paper .shift__col--now{ background:var(--paper-sunken); border-style:dashed; box-shadow:none; }
.shift__col--nivor{ border-color:var(--line-cream); }
.sec--paper .shift__col--nivor{ border-color:#C9A94A; }

.shift__lbl{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:var(--tr-label);
  text-transform:uppercase; color:var(--ink-3);
}
.shift__col--nivor .shift__lbl{ color:#8A6D22; }
.shift__list{ margin-top:var(--s-5); }
.shift__list li{
  position:relative; padding-left:var(--s-6); padding-block:var(--s-3);
  font-size:var(--t-small); color:var(--ink-2);
}
.shift__list li + li{ border-top:1px solid var(--line); }
.shift__list li::before{
  content:""; position:absolute; left:0; top:50%; width:12px; height:1px;
  background:var(--line-strong);
}
.shift__col--nivor .shift__list li{ color:var(--ink); font-weight:500; }
.shift__col--nivor .shift__list li::before{ background:#C9A94A; width:16px; }

@media (min-width:860px){
  .shift{ grid-template-columns:1fr 1fr; gap:var(--s-6); }
}

/* Frase de impacto isolada. */
.statement{
  margin-top:var(--s-8);
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.35rem,2.9vw,2.05rem);
  line-height:1.3; letter-spacing:-.022em;
  color:var(--ink); max-width:30ch; text-wrap:balance;
}

/* --------------------------------------------------------------------------
   CARDS DE SOLUÇÃO
   -------------------------------------------------------------------------- */
.solutions{ margin-top:var(--s-8); }
.sol{
  display:flex; flex-direction:column;
  min-height:100%;
  padding:clamp(28px,3.4vw,44px);
}
.sol__icon{ width:40px; height:40px; margin-bottom:var(--s-6); color:var(--cream); }
.sol__icon svg{ width:100%; height:100%; }
.sol h3{ font-size:clamp(1.5rem,2.4vw,1.9rem); letter-spacing:-.028em; }
.sol__claim{
  margin-top:var(--s-3); font-family:var(--f-display); font-weight:500;
  font-size:1.0625rem; color:var(--cream); letter-spacing:-.01em;
}
.sol__desc{ margin-top:var(--s-4); color:var(--ink-2); font-size:var(--t-small); flex:1; }
.sol__foot{ margin-top:var(--s-7); }

/* --------------------------------------------------------------------------
   INTERSEÇÃO — negócio · dados · tecnologia
   -------------------------------------------------------------------------- */
.venn{
  position:relative; width:min(100%,420px); aspect-ratio:1/1;
  margin-inline:auto;
}
.venn svg{ width:100%; height:100%; overflow:visible; }
.venn-circle{ fill:rgba(255,251,200,.035); stroke:var(--line-strong); stroke-width:1; }
.venn-circle--a{ animation:venn-a 9s var(--ease-soft) infinite; }
.venn-circle--b{ animation:venn-a 9s var(--ease-soft) infinite -3s; }
.venn-circle--c{ animation:venn-a 9s var(--ease-soft) infinite -6s; }
@keyframes venn-a{ 0%,100%{ opacity:.72 } 50%{ opacity:1 } }
.venn-label{
  font-family:var(--f-mono); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; fill:var(--ink-2);
}
.venn-core{
  font-family:var(--f-body); font-weight:800; font-size:20px;
  letter-spacing:-.01em; fill:var(--cream);
}
.venn-core-ring{ fill:none; stroke:var(--line-cream); }

/* --------------------------------------------------------------------------
   MÉTODO
   -------------------------------------------------------------------------- */
.method{ margin-top:var(--s-8); counter-reset:step; }
.step{
  position:relative; display:grid; grid-template-columns:auto 1fr;
  gap:var(--s-5); padding-block:var(--s-6);
  border-top:1px solid var(--line);
}
.step:last-of-type{ border-bottom:1px solid var(--line); }
.step__n{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  font-family:var(--f-mono); font-size:.8125rem; color:var(--ink);
  transition:border-color var(--d-hover) var(--ease), color var(--d-hover) var(--ease);
}
.step:hover .step__n{ border-color:var(--cream); color:var(--cream); }
/* Mesma regra dos estágios: no celular a descrição alinha ao título, e
   nunca sob o número. */
.step__desc{
  grid-column:2; margin-top:var(--s-2);
  color:var(--ink-2); font-size:var(--t-small); max-width:58ch;
}

@media (min-width:860px){
  .step{ grid-template-columns:42px 280px 1fr; align-items:baseline; gap:var(--s-6); }
  .step__desc{ grid-column:auto; margin-top:0; }
}

/* --------------------------------------------------------------------------
   BLOCO DE CONTEXTO (Reforma)
   -------------------------------------------------------------------------- */
.context{
  border:1px solid var(--line); border-left:2px solid var(--cream);
  border-radius:0 var(--r) var(--r) 0;
  padding:clamp(26px,3.2vw,40px);
  background:linear-gradient(90deg, var(--cream-veil), transparent 60%);
}

/* --------------------------------------------------------------------------
   CTA FINAL
   -------------------------------------------------------------------------- */
.finale{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line);
  padding-block:clamp(84px,11vw,168px);
  text-align:center;
}
.finale::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 380px at 50% 118%, rgba(255,251,200,.14), transparent 68%);
}
.finale h2{ max-width:19ch; margin-inline:auto; }
.finale .lead{ margin-inline:auto; margin-top:var(--s-5); text-align:center; }
.finale .btn-row{ margin-top:var(--s-7); }

/* --------------------------------------------------------------------------
   TELA MUITO LARGA
   -------------------------------------------------------------------------- */
@media (min-width:1600px){
  :root{ --maxw:1320px; }
}

/* --------------------------------------------------------------------------
   INVERSÕES PARA SEÇÃO CLARA
   O creme é luminoso: sobre papel ele desaparece. Nestes pontos o acento
   vira ouro escuro, que carrega o mesmo significado com contraste real.
   -------------------------------------------------------------------------- */
.sec--paper .idx,
.sec--paper .stage__name,
.sec--paper .sol__claim,
.sec--paper .eyebrow--cream{ color:#8A6D22; }

.sec--paper .mark{ background:linear-gradient(transparent 62%, rgba(226,196,86,.6) 0); }
.sec--paper .step__n{ border-color:var(--paper-line-2); color:var(--paper-ink); }
.sec--paper .step:hover .step__n{ border-color:#8A6D22; color:#8A6D22; }
.sec--paper .stage__meter{ background:#8A6D22; }

/* ==========================================================================
   PÁGINAS DE SOLUÇÃO
   ========================================================================== */

/* --- Hero interno: menor que o da home, mesma família ------------------- */
.phero{ padding-block:clamp(56px,7vw,104px) clamp(48px,6vw,80px); }
.phero__title{ margin-top:var(--s-5); font-size:clamp(2.2rem,5.2vw,3.9rem); line-height:1.02; letter-spacing:-.034em; }
.phero__claim{
  margin-top:var(--s-5); font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.1rem,2vw,1.35rem); letter-spacing:-.016em; color:var(--cream);
}
.phero__text{ margin-top:var(--s-4); max-width:58ch; }
.phero__cta{ margin-top:var(--s-7); }

/* Trilha de navegação — situa a pessoa dentro do site. */
.crumb{
  display:flex; align-items:center; gap:var(--s-3);
  font-family:var(--f-mono); font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.crumb a{ transition:color var(--d-micro) var(--ease); }
.crumb a:hover{ color:var(--cream); }
.crumb span[aria-current]{ color:var(--ink-2); }

/* --- Grade de aplicações ------------------------------------------------- */
.vgrid{ margin-top:var(--s-8); display:grid; gap:var(--s-4); }
@media (min-width:700px){ .vgrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .vgrid{ grid-template-columns:repeat(3,1fr); } }

.vcard{ padding:clamp(24px,2.8vw,32px); }
.vcard h3{ font-size:1.24rem; letter-spacing:-.016em; text-wrap:balance; }
.vcard p{ margin-top:var(--s-3); color:var(--ink-2); font-size:var(--t-small); }
.vcard__n{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.16em;
  color:var(--cream); display:block; margin-bottom:var(--s-4);
}

/* --- Caso de aplicação: cadeia de etapas -------------------------------- */
.cases{ margin-top:var(--s-8); display:grid; gap:var(--s-4); }
.case{ padding:clamp(24px,3vw,34px); }
.case__head{ display:flex; align-items:baseline; gap:var(--s-4); flex-wrap:wrap; }
.case__head h3{ font-size:1.22rem; letter-spacing:-.018em; }

/* A cadeia empilha no celular e vira linha no desktop. As setas são
   pseudo-elementos: não entram no texto lido por leitor de tela. */
.chain{
  margin-top:var(--s-5); display:flex; flex-wrap:wrap;
  gap:var(--s-3) var(--s-2); align-items:stretch;
}
.chain li{
  position:relative; display:flex; align-items:center;
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); line-height:1.3;
}
.sec--paper .chain li{ background:var(--paper-raised); }
.chain li + li::before{
  content:"→"; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  color:var(--cream); font-family:var(--f-body); font-size:.8rem; opacity:.7;
}
.chain li + li{ margin-left:16px; }
.chain li:last-child{
  border-color:var(--line-cream); color:var(--ink);
  background:var(--cream-veil);
}

/* --- Nota de honestidade técnica ---------------------------------------- */
.caveat{
  margin-top:var(--s-7); padding:var(--s-5) var(--s-6);
  border:1px dashed var(--line-strong); border-radius:var(--r);
  color:var(--ink-2); font-size:var(--t-small); max-width:74ch;
}
.caveat strong{ color:var(--ink); font-weight:600; }

/* --- Faixa de tecnologias ------------------------------------------------ */
.techrail{ margin-top:var(--s-7); display:flex; flex-wrap:wrap; gap:var(--s-3); }
.tech{
  padding:var(--s-3) var(--s-5); border:1px solid var(--line);
  border-radius:var(--r-pill); background:rgba(255,255,255,.02);
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em;
  color:var(--ink-2);
  transition:border-color var(--d-hover) var(--ease), color var(--d-hover) var(--ease);
}
.tech:hover{ border-color:var(--line-cream); color:var(--cream); }

/* --- Esteira de dados (Fontes → Estruturação → Inteligência → Gestão) --- */
.pipe{ margin-top:var(--s-8); display:grid; gap:var(--s-4); }
@media (min-width:840px){ .pipe{ grid-template-columns:repeat(4,1fr); gap:var(--s-3); } }

.pipe__stage{
  position:relative; padding:clamp(22px,2.4vw,28px);
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-glass);
}
.sec--paper .pipe__stage{ background:var(--paper-raised); box-shadow:var(--shadow-paper); }
.pipe__stage:last-child{ border-color:var(--line-cream); }
.pipe__name{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:var(--tr-label);
  text-transform:uppercase; color:var(--cream); margin-bottom:var(--s-4);
}
.sec--paper .pipe__name{ color:#8A6D22; }
.pipe__stage li{ padding-block:var(--s-2); font-size:var(--t-small); color:var(--ink-2); }
.pipe__stage li + li{ border-top:1px solid var(--line); }

/* --- Chamada do painel --------------------------------------------------- */
.panelcta{
  position:relative; overflow:hidden;
  margin-top:var(--s-8); padding:clamp(32px,4.4vw,64px);
  border:1px solid var(--line-cream); border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,251,200,.09), rgba(255,251,200,.02) 55%, transparent);
  text-align:center;
}
.panelcta h3{ font-size:clamp(1.5rem,3vw,2.2rem); max-width:22ch; margin-inline:auto; }
.panelcta p{ margin:var(--s-5) auto 0; max-width:60ch; color:var(--ink-2); }
.panelcta .btn{ margin-top:var(--s-7); }
.panelcta__meta{
  margin-top:var(--s-5); font-family:var(--f-mono); font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

/* Moldura do painel embutido na própria página. */
.panelframe{
  margin-top:var(--s-7); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:#F5F7FA;
  aspect-ratio:16/11;   /* altura reservada: o bloco não empurra nada ao carregar */
}
.panelframe iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width:760px){ .panelframe{ aspect-ratio:3/4; } }

/* ==========================================================================
   CAMADA COMERCIAL
   Blocos que falam da consequência no negócio antes de falar da engenharia.
   ========================================================================== */

/* --- Perguntas de diagnóstico ------------------------------------------- */
.qgrid{ margin-top:var(--s-8); display:grid; gap:var(--s-4); }
@media (min-width:720px){ .qgrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .qgrid{ grid-template-columns:repeat(3,1fr); } }

.qcard{
  display:flex; flex-direction:column;
  padding:clamp(26px,3vw,34px);
}
.qcard__n{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.18em;
  color:var(--cream); margin-bottom:var(--s-5);
}
.sec--paper .qcard__n{ color:#8A6D22; }
/* A pergunta é o elemento principal do card: vem em fonte de título. */
.qcard__q{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.28rem,1.9vw,1.42rem);
  line-height:1.22; letter-spacing:-.022em; color:var(--ink);
  text-wrap:balance;
}
.qcard__a{ margin-top:var(--s-4); color:var(--ink-2); font-size:var(--t-small); }

/* --- Frase de virada, centralizada e grande ----------------------------- */
.bigline{
  margin-top:var(--s-9); padding-top:var(--s-8);
  border-top:1px solid var(--line);
  text-align:center;
}
.bigline h3{
  font-size:clamp(1.7rem,4vw,2.9rem); letter-spacing:-.032em; line-height:1.1;
  max-width:22ch; margin-inline:auto; text-wrap:balance;
}
.bigline p{
  margin:var(--s-5) auto 0; max-width:60ch;
  color:var(--ink-2); font-size:var(--t-lead);
}

/* --- O que resolvemos: problema à esquerda, ação à direita --------------- */
.solve{ margin-top:var(--s-8); }
/* Uma coluna é o estado do celular. O respiro é maior aqui do que no desktop:
   empilhado, o mesmo espaçamento vira parede de texto. */
.solve__row{
  display:grid; gap:var(--s-4);
  padding-block:var(--s-7);
  border-top:1px solid var(--line);
  transition:border-color var(--d-hover) var(--ease);
}
.solve__row:last-child{ border-bottom:1px solid var(--line); }
.solve__row:hover{ border-top-color:var(--line-cream); }
/* Em seção clara o creme some: o realce vem da linha escura. */
.sec--paper .solve__row:hover{ border-top-color:var(--paper-line-2); }
/* O mínimo do clamp é o que vale no celular — 1.15rem ficava a 1px do corpo
   e o título deixava de ser título. */
.solve__p{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.32rem,2.1vw,1.5rem); letter-spacing:-.024em;
  line-height:1.2; color:var(--ink); text-wrap:balance;
}
.solve__a{ color:var(--ink-2); font-size:var(--t-small); max-width:58ch; }
.solve__tag{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream); align-self:start;
  order:-1;   /* no celular a etiqueta sobe e vira sobrescrito do problema */
}
.sec--paper .solve__tag{ color:#8A6D22; }

@media (min-width:900px){
  .solve__row{
    grid-template-columns:1fr 1.15fr 150px;
    align-items:baseline; gap:var(--s-6);
    padding-block:var(--s-6);
  }
  /* order precisa voltar ao normal: no grid de 3 colunas ele reordenaria a
     colocação automática e a etiqueta iria parar na primeira coluna. */
  .solve__tag{ text-align:right; order:0; }
}

/* --- Impacto no negócio: quatro afirmações curtas ----------------------- */
.impact{ margin-top:var(--s-7); display:grid; gap:var(--s-4); }
@media (min-width:760px){ .impact{ grid-template-columns:repeat(2,1fr); gap:var(--s-5); } }

.impact__item{
  position:relative; padding-left:var(--s-6);
  color:var(--ink); font-size:var(--t-body); line-height:1.5;
}
.impact__item::before{
  content:""; position:absolute; left:0; top:.62em;
  width:14px; height:1px; background:var(--cream);
}
.sec--paper .impact__item::before{ background:#8A6D22; }

/* --- Legenda das etapas de integração ----------------------------------- */
.legend-steps{ margin-top:var(--s-7); display:grid; gap:var(--s-4); }
@media (min-width:860px){ .legend-steps{ grid-template-columns:repeat(4,1fr); } }

.lstep{ padding:clamp(20px,2.2vw,26px); }
.lstep__k{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.lstep__t{
  margin-top:var(--s-3); font-family:var(--f-display); font-weight:600;
  font-size:1.12rem; letter-spacing:-.014em; color:var(--ink); line-height:1.3;
}
.lstep__d{ margin-top:var(--s-3); color:var(--ink-2); font-size:.9rem; }

/* --- Nota de escopo (o que a Nivor não é) ------------------------------- */
.scope{
  margin-top:var(--s-7); padding:var(--s-5) var(--s-6);
  border-left:2px solid var(--line-strong); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--surface-glass);
  color:var(--ink-2); font-size:var(--t-small); max-width:76ch;
}
.sec--paper .scope{ background:var(--paper-sunken); }
.scope strong{ color:var(--ink); font-weight:600; }

/* ==========================================================================
   AMPLITUDE
   Blocos que mostram a mesma capacidade aplicada a áreas e operações
   diferentes. Existem para que nenhum contexto — produto, cadastro,
   tributário — pareça representar a Nivor sozinho.
   ========================================================================== */

/* --- Aplicações por área do negócio ------------------------------------- */
.areas{ margin-top:var(--s-8); display:grid; gap:var(--s-4); }
@media (min-width:760px){ .areas{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .areas{ grid-template-columns:repeat(3,1fr); } }

.area{ display:flex; flex-direction:column; padding:clamp(24px,2.8vw,32px); }
.area__k{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream);
}
.sec--paper .area__k{ color:#8A6D22; }
/* A promessa da área vem em fonte de título: é ela que o visitante lê. */
.area__t{
  margin-top:var(--s-4); font-family:var(--f-display); font-weight:600;
  font-size:1.16rem; line-height:1.3; letter-spacing:-.018em; color:var(--ink);
  text-wrap:balance;
}
.area__list{ margin-top:var(--s-5); }
.area__list li{ padding-block:var(--s-2); font-size:var(--t-small); color:var(--ink-2); }
.area__list li + li{ border-top:1px solid var(--line); }

/* --- Lista de perguntas possíveis, em duas colunas ---------------------- */
.asks{ margin-top:var(--s-6); display:grid; gap:var(--s-3); }
@media (min-width:760px){ .asks{ grid-template-columns:repeat(2,1fr); gap:var(--s-3) var(--s-7); } }

.asks li{
  position:relative; padding-left:var(--s-6); padding-block:var(--s-2);
  color:var(--ink-2); font-size:var(--t-small); line-height:1.5;
}
.asks li::before{
  content:""; position:absolute; left:0; top:.95em;
  width:10px; height:1px; background:var(--line-strong);
}

/* ==========================================================================
   CELULAR — HIERARQUIA
   As escalas fluidas usam vw no meio do clamp. Em tela estreita o vw encolhe
   e todas elas caem para o MÍNIMO, que foi calibrado olhando o desktop. O
   resultado é que os títulos de card ficavam a 1 ou 2px do corpo (17px): a
   página perdia hierarquia e virava um bloco único de texto.
   Aqui os títulos pequenos ganham tamanho abaixo de 760px. Acima disso os
   valores originais voltam a valer — o desktop não muda em nada.
   ========================================================================== */
@media (max-width:759px){
  .solve__p     { font-size:1.5rem;  line-height:1.18; }
  .qcard__q     { font-size:1.45rem; line-height:1.2;  }
  .vcard h3     { font-size:1.4rem;  line-height:1.24; }
  .case__head h3{ font-size:1.4rem;  line-height:1.24; }
  .area__t      { font-size:1.38rem; line-height:1.24; }
  .lstep__t     { font-size:1.34rem; line-height:1.26; }
  .pipe__name   { font-size:.75rem; }

  /* Mais ar entre título e explicação: empilhado, o espaçamento do desktop
     cola os dois e é isso que dá a sensação de texto denso. */
  .vcard p      { margin-top:var(--s-4); }
  .area__list   { margin-top:var(--s-5); }
  .lstep__d     { margin-top:var(--s-4); }
  .qcard__a     { margin-top:var(--s-5); }
}