/* ==========================================================================
   .nl-split + .nlist · lista numerada editorial em duas colunas
   Substitui o padrão reprovado "manifesto com parágrafo gigante + pílulas centralizadas"
   (feedback do cliente, rodada 2, item 1). Carregar depois do site.css.

   <section class="s-alt">
     <div class="container nl-split">
       <div class="nl-split-aside">            5/12, sticky no desktop
         <header class="sec-head">eyebrow + h2</header>
         <p class="lead" data-anim>…</p> <p data-anim>…</p> [botão]
       </div>
       <div class="nl-split-main">             7/12
         <h3 class="nl-sub" data-anim>…</h3>
         <ol class="nlist" data-anim-stagger>   01–0n em duas colunas (preenche por coluna)
           <li>…</li>
         </ol>
         <p class="nl-close" data-anim>…</p>  fecho, alinhado à esquerda da coluna
       </div>
     </div>
   </section>

   --nl-rows: linhas por coluna (padrão 4, para 7 ou 8 itens). Para 4 itens use style="--nl-rows:2".
   Fios em azul (--line-light, com reserva #C9D9E6). Nada de verde em bordas.
   ========================================================================== */

.nl-split{
  --nl-line:var(--line-light,#C9D9E6);
  --nl-line-strong:var(--brand,#004063);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(24px,calc(3.4vw / var(--z,1)),56px);row-gap:clamp(32px,calc(5vw / var(--z,1)),48px);
  align-items:start;
}
.nl-split-aside{grid-column:1 / span 5;display:grid;justify-items:start;gap:18px}
.nl-split-main{grid-column:6 / -1;padding-left:clamp(0px,calc(2vw / var(--z,1)),32px)}

@media (min-width:1024px){
  .nl-split-aside{position:sticky;top:calc(var(--header-h,76px) + 40px)}
}

/* coluna da esquerda: título menor que o h2 padrão, para caber em 5/12 */
.nl-split-aside .sec-head{margin-bottom:6px;gap:16px;max-width:none}
.nl-split-aside .sec-head > h2{font-size:clamp(30px,calc(2.9vw / var(--z,1)),42px);line-height:1.08;max-width:none}
.nl-split .nw{white-space:nowrap}   /* evita palavra sozinha na última linha do título (o SplitText ignora &nbsp;) */
.nl-split-aside p{max-width:46ch}
.nl-split-aside p:not(.lead):not(.eyebrow){color:var(--ink-2)}
.nl-split-aside .btn{margin-top:14px}

/* subtítulo da lista */
.nl-sub{
  font-size:clamp(18px,calc(1.5vw / var(--z,1)),21px);line-height:1.35;font-weight:600;letter-spacing:-.015em;
  color:var(--heading,var(--brand));margin:0 0 clamp(18px,calc(2vw / var(--z,1)),26px);max-width:34ch;
}

/* lista */
.nlist{
  --nl-rows:4;
  list-style:none;margin:0;padding:0;counter-reset:nl;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(var(--nl-rows),auto);grid-auto-flow:column;
  column-gap:clamp(20px,calc(2.6vw / var(--z,1)),40px);
  border-top:1px solid var(--nl-line);
}
.nlist > li{
  counter-increment:nl;position:relative;
  display:grid;grid-template-columns:2.5em minmax(0,1fr);align-items:baseline;
  padding:clamp(16px,calc(1.5vw / var(--z,1)),20px) 6px clamp(16px,calc(1.5vw / var(--z,1)),20px) 0;
  border-bottom:1px solid var(--nl-line);
  font-size:clamp(15.5px,calc(1.1vw / var(--z,1)),17px);line-height:1.45;font-weight:500;color:var(--ink);
  transition:color .35s ease;
}
.nlist > li::before{
  content:counter(nl,decimal-leading-zero);
  font-size:12px;font-weight:600;letter-spacing:.14em;line-height:1;
  color:var(--brand);opacity:.55;font-variant-numeric:tabular-nums;
  transition:opacity .35s ease;
}
/* hover: o fio de baixo ganha um traço azul que corre da esquerda */
.nlist > li::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--nl-line-strong);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){
  .nlist > li:hover{color:var(--brand)}
  .nlist > li:hover::before{opacity:1}
  .nlist > li:hover::after{transform:scaleX(1)}
}

/* fecho */
.nl-close{margin-top:clamp(26px,calc(3vw / var(--z,1)),38px);max-width:58ch;color:var(--ink-2);text-wrap:pretty}
.nl-close em{font-style:italic;color:var(--ink)}

/* tablet e celular: uma coluna só, tudo empilhado */
@media (max-width:1023px){
  .nl-split-aside,.nl-split-main{grid-column:1 / -1}
  .nl-split-main{padding-left:0}
  .nl-split-aside .sec-head > h2{font-size:clamp(30px,calc(5vw / var(--z,1)),42px)}
}
@media (max-width:639px){
  .nlist{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .nl-split-aside .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .nlist > li,.nlist > li::before,.nlist > li::after{transition:none}
}

/* Variante com ícones do Phosphor (Light) no lugar dos números — pedido do cliente, 15/10.
   <ol class="nlist nlist--icons"><li><span class="nl-ico" aria-hidden="true"><svg…/></span>Texto</li> */
.nlist--icons > li{grid-template-columns:52px minmax(0,1fr);align-items:center}
.nlist--icons > li::before{content:none}
.nl-ico{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--brand);background:var(--card,#fff);border:1px solid var(--nl-line);
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease;
}
.nl-ico svg{width:21px;height:21px;display:block}
@media (hover:hover){
  .nlist--icons > li:hover .nl-ico{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-1px)}
}
@media (prefers-reduced-motion:reduce){.nl-ico{transition:none}}


/* ==========================================================================
   Redesenho (cliente, 15/10): cada item vira um card branco arredondado,
   o fecho vira um destaque azul-escuro e a seção ganha luzes azuis suaves ao fundo.
   Vale para as listas com ícones das 4 páginas (.nlist--icons).
   ========================================================================== */
.s-alt:has(> .nl-split),section:has(> .nl-split){position:relative;isolation:isolate}
.s-alt:has(> .nl-split)::before,section:has(> .nl-split)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(640px 440px at 88% 8%,rgba(0,64,99,.06),transparent 70%),
    radial-gradient(560px 400px at 6% 96%,rgba(0,64,99,.05),transparent 70%);
}
.nl-split-aside .lead{font-size:clamp(17px,calc(1.25vw / var(--z,1)),19px);line-height:1.6}

.nlist--icons{border-top:0;row-gap:14px;column-gap:14px}
.nlist--icons > li{
  grid-template-columns:46px minmax(0,1fr);column-gap:14px;align-items:center;min-height:84px;
  padding:16px 18px 16px 16px;border:1px solid rgba(0,64,99,.08);border-bottom:1px solid rgba(0,64,99,.08);
  border-radius:18px;background:#fff;
  box-shadow:0 1px 2px rgba(0,43,68,.05),0 14px 30px -18px rgba(0,43,68,.28);
  transition:translate .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,border-color .45s ease,color .35s ease;
}
.nlist--icons > li::after{display:none}
.nlist--icons .nl-ico{
  width:46px;height:46px;border-radius:14px;border:0;
  background:linear-gradient(160deg,#EEF4F9,#DFEAF3);color:var(--brand);
}
.nlist--icons .nl-ico svg{width:23px;height:23px}
@media (hover:hover){
  .nlist--icons > li:hover{
    translate:0 -4px;color:var(--brand);border-color:rgba(0,64,99,.16);
    box-shadow:0 2px 4px rgba(0,43,68,.06),0 24px 42px -18px rgba(0,43,68,.36);
  }
  .nlist--icons > li:hover .nl-ico{background:var(--brand);color:#fff;transform:none}
}

/* fecho em destaque azul-escuro, com ícone de informação */
.nl-split .nl-close{
  position:relative;max-width:none;margin-top:clamp(18px,calc(2vw / var(--z,1)),24px);
  padding:22px 26px 22px 78px;border-radius:20px;
  background:linear-gradient(150deg,#003252 0%,#002B44 55%,#001A2B 100%);
  color:rgba(255,255,255,.9);font-size:15.5px;line-height:1.65;
  box-shadow:0 20px 44px -22px rgba(0,26,43,.7);
}
.nl-split .nl-close::before{
  content:"";position:absolute;left:24px;top:22px;width:36px;height:36px;border-radius:11px;
  background:rgba(127,209,195,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%237FD1C3'%3E%3Cpath d='M142%2C176a6%2C6%2C0%2C0%2C1-6%2C6%2C14%2C14%2C0%2C0%2C1-14-14V128a2%2C2%2C0%2C0%2C0-2-2%2C6%2C6%2C0%2C0%2C1%2C0-12%2C14%2C14%2C0%2C0%2C1%2C14%2C14v40a2%2C2%2C0%2C0%2C0%2C2%2C2A6%2C6%2C0%2C0%2C1%2C142%2C176ZM124%2C94a10%2C10%2C0%2C1%2C0-10-10A10%2C10%2C0%2C0%2C0%2C124%2C94Zm106%2C34A102%2C102%2C0%2C1%2C1%2C128%2C26%2C102.12%2C102.12%2C0%2C0%2C1%2C230%2C128Zm-12%2C0a90%2C90%2C0%2C1%2C0-90%2C90A90.1%2C90.1%2C0%2C0%2C0%2C218%2C128Z'/%3E%3C/svg%3E") center/21px no-repeat;
  border:1px solid rgba(120,170,210,.22);
}
@media (max-width:639px){
  .nlist--icons > li{min-height:0}
  .nl-split .nl-close{padding:72px 22px 22px 22px}
  .nl-split .nl-close::before{left:22px;top:22px}
}
@media (prefers-reduced-motion:reduce){.nlist--icons > li{transition:none}}


/* ==========================================================================
   Variante escura (copy 24/10: "Quando procurar" da home foi para o .s-dark).
   Dentro de .s-dark/.s-dark-2 os cards brancos viram vidro escuro, o ícone fica no
   verde-água claro e o fecho azul vira vidro. Os usos claros (landing pages) não mudam.
   ========================================================================== */
:is(.s-dark,.s-dark-2):has(> .nl-split)::before{
  background:
    radial-gradient(640px 440px at 88% 8%,rgba(var(--line-rgb),.10),transparent 70%),
    radial-gradient(560px 400px at 6% 96%,rgba(var(--line-rgb),.06),transparent 70%);
}
:is(.s-dark,.s-dark-2) .nlist--icons > li{
  background:var(--glass-bg);border-color:var(--glass-line);color:var(--ink);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:inset 0 1px 0 var(--glass-polish),0 18px 36px -22px rgba(var(--shadow-dark-rgb),.7);
}
:is(.s-dark,.s-dark-2) .nlist--icons .nl-ico{background:rgba(var(--line-rgb),.12);border:1px solid var(--line-dark);color:var(--accent-light)}
@media (hover:hover){
  :is(.s-dark,.s-dark-2) .nlist--icons > li:hover{
    color:var(--on-dark);background:var(--glass-bg-h);border-color:rgba(var(--line-rgb),.5);
    box-shadow:inset 0 1px 0 var(--glass-polish),0 26px 46px -22px rgba(var(--shadow-dark-rgb),.85);
  }
  :is(.s-dark,.s-dark-2) .nlist--icons > li:hover .nl-ico{background:var(--on-dark);border-color:var(--on-dark);color:var(--brand)}
}
:is(.s-dark,.s-dark-2) .nl-split .nl-close{
  background:rgba(var(--line-rgb),.07);border:1px solid var(--line-dark);box-shadow:none;color:var(--on-dark-2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}