/* ══════════════════════════════════════════════════════════════════════════
   MÉTODO NSI 360 — design system e componentes da landing
   ══════════════════════════════════════════════════════════════════════════
   Escalas em um lugar só. Valor solto espalhado pelos componentes é o que faz
   um site parecer montado por pessoas diferentes em dias diferentes. */
:root{
  /* superfícies */
  --surf:rgba(255,255,255,.028);
  --surf-alta:rgba(255,255,255,.055);
  --linha:rgba(96,132,200,.18);
  --linha-forte:rgba(96,132,200,.34);
  /* espaçamento: passo de 4 */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:72px;
  /* cantos */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  /* profundidade */
  --sombra-1:0 4px 14px rgba(0,0,0,.22);
  --sombra-2:0 14px 38px rgba(0,0,0,.34);
  --sombra-3:0 28px 70px rgba(0,0,0,.46);
}

/* ── Ícones ──────────────────────────────────────────────────────────────
   Um quadrado só para todos: tamanho, canto e cor iguais em toda a página.
   Emoji não entra aqui: muda de desenho em cada sistema e não aceita a cor
   da marca. */
.ic-caixa{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex-shrink:0;border-radius:var(--r-md);
  background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3);
  color:var(--cyan)}
.ic-caixa svg{width:23px;height:23px}

/* ── Herói ───────────────────────────────────────────────────────────────── */
.hero360{position:relative;overflow:hidden;padding:clamp(56px,10vw,120px) 0 clamp(40px,6vw,72px)}
.hero360-luz{position:absolute;top:-30%;left:50%;width:min(1100px,120%);height:120%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(59,130,246,.16),transparent 72%)}
.hero360-grade{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.42;
  background-image:linear-gradient(rgba(96,132,200,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(96,132,200,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 34%,#000,transparent 74%);
          mask-image:radial-gradient(circle at 50% 34%,#000,transparent 74%)}
.hero360-in{position:relative;z-index:2}
.hero360-h1{font-family:Fraunces,Georgia,serif;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(31px,5.6vw,60px);line-height:1.06;margin:var(--e4) 0 var(--e5);max-width:15ch}
.hero360-h1 span{display:block}
.hero360-h1 span:nth-child(2){color:var(--cyan)}
.hero360-sub{color:var(--sec);font-size:clamp(15.5px,1.9vw,18.5px);line-height:1.75;
  max-width:60ch;margin:0 0 var(--e5)}
.hero360-micro{font-size:13.5px;color:var(--dim);margin:var(--e4) 0 0}
.hero360-trust{display:flex;flex-wrap:wrap;gap:var(--e2);list-style:none;padding:0;
  margin:var(--e6) 0 0}
.hero360-trust li{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;
  font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--cyan);
  background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.26);
  border-radius:999px;padding:8px 16px}

/* ── Sintomas ────────────────────────────────────────────────────────────── */
.sintomas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4);margin-top:var(--e6)}
.sintoma{background:var(--surf);border:1px solid var(--linha);border-radius:var(--r-lg);
  padding:var(--e5);transition:border-color .2s ease-out,transform .2s ease-out}
@media(hover:hover){.sintoma:hover{border-color:var(--linha-forte);transform:translateY(-3px)}}
.sintoma h3{font-size:18px;font-weight:800;line-height:1.35;margin:var(--e4) 0 var(--e3)}
.sintoma ul{list-style:none;margin:0 0 var(--e4);padding:0}
.sintoma li{font-size:14.5px;color:var(--sec);line-height:1.7;padding-left:var(--e4);
  position:relative}
.sintoma li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--dim)}
.sintoma-fecho{font-size:14.5px;color:var(--text);line-height:1.7;margin:0;
  padding-top:var(--e3);border-top:1px solid var(--linha)}

/* ── Método 360 ──────────────────────────────────────────────────────────── */
.m360{position:relative;margin-top:var(--e6)}
.m360-nucleo{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:168px;height:168px;margin:0 auto var(--e6);border-radius:50%;position:relative;
  background:radial-gradient(circle,rgba(59,130,246,.16),transparent 70%);
  border:1px solid var(--linha-forte)}
.m360-nucleo-t{font-family:Fraunces,Georgia,serif;font-size:17px;font-weight:800;
  text-align:center;line-height:1.25;max-width:8ch}
.m360-anel{position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;border-radius:50%;
  border:1px solid rgba(56,189,248,.22)}
.anima .m360-nucleo.on .m360-anel{animation:m360-pulsa 3.4s ease-out infinite}
@keyframes m360-pulsa{0%{transform:scale(.96);opacity:.8}70%{transform:scale(1.14);opacity:0}100%{opacity:0}}
.m360-lista{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:var(--e4)}
.m360-pilar{position:relative;background:var(--surf);border:1px solid var(--linha);
  border-radius:var(--r-lg);padding:var(--e5);
  transition:border-color .24s ease-out,box-shadow .24s ease-out}
/* O pilar em leitura acende: é o que liga o texto ao lugar dele na estrutura. */
.m360-pilar.acesa{border-color:rgba(56,189,248,.5);
  box-shadow:var(--sombra-2),0 0 0 1px rgba(56,189,248,.14)}
.m360-cab{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e4)}
.m360-n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:700;
  letter-spacing:2px;color:var(--cyan);display:block}
.m360-cab h3{font-family:Fraunces,Georgia,serif;font-size:23px;font-weight:800;margin:2px 0 0}
.m360-resumo{font-size:15.5px;color:var(--text);font-weight:600;line-height:1.6;margin:0 0 var(--e2)}
.m360-texto{font-size:14.5px;color:var(--sec);line-height:1.75;margin:0 0 var(--e4)}

/* ── Do caos ao controle ─────────────────────────────────────────────────── */
.caos{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--e4);align-items:center;
  margin-top:var(--e6)}
.caos-lado{background:var(--surf);border:1px solid var(--linha);border-radius:var(--r-lg);
  padding:var(--e5);height:100%}
.caos-antes{border-color:rgba(251,95,109,.26)}
.caos-depois{border-color:rgba(52,211,153,.3)}
.caos-lado h3{margin:0 0 var(--e4)}
.caos-tag{display:inline-block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;background:rgba(251,95,109,.12);
  border:1px solid rgba(251,95,109,.32);color:#FB5F6D}
.caos-tag-ok{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.34);color:var(--green)}
.caos-lado ul{list-style:none;margin:0;padding:0}
.caos-lado li{font-size:14.5px;line-height:1.55;padding:9px 0 9px var(--e5);position:relative;
  border-bottom:1px solid var(--linha)}
.caos-lado li:last-child{border-bottom:none}
.caos-antes li{color:var(--sec)}
.caos-antes li::before{content:"\00d7";position:absolute;left:6px;top:8px;color:#FB5F6D;font-weight:800}
.caos-depois li{color:var(--text)}
.caos-depois li::before{content:"\2713";position:absolute;left:4px;top:9px;color:var(--green);font-weight:800}
.caos-seta{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:var(--surf-alta);border:1px solid var(--linha);color:var(--cyan)}

/* ── Frase de pausa entre seções ─────────────────────────────────────────── */
.pausa{padding:clamp(38px,6vw,68px) 0}
.pausa p{font-family:Fraunces,Georgia,serif;font-size:clamp(21px,3.4vw,33px);
  font-weight:800;line-height:1.35;letter-spacing:-.015em;margin:0;max-width:22ch;
  padding-left:var(--e5);border-left:3px solid var(--cyan)}

/* ── Dimensões avaliadas ─────────────────────────────────────────────────── */
.dimensoes{display:flex;flex-wrap:wrap;gap:var(--e2);list-style:none;padding:0;
  margin:var(--e5) 0 0}
.dimensoes li{font-size:13.5px;font-weight:600;color:var(--sec);background:var(--surf-alta);
  border:1px solid var(--linha);border-radius:var(--r-sm);padding:11px 17px;
  transition:border-color .18s ease-out,color .18s ease-out}
@media(hover:hover){.dimensoes li:hover{border-color:var(--linha-forte);color:var(--text)}}

/* ── Linha do tempo do processo ──────────────────────────────────────────── */
.linha-tempo{list-style:none;margin:var(--e6) 0 0;padding:0;position:relative}
.linha-tempo::before{content:"";position:absolute;left:23px;top:12px;bottom:12px;width:1px;
  background:linear-gradient(180deg,transparent,var(--linha-forte) 12%,var(--linha-forte) 88%,transparent)}
.linha-tempo li{display:flex;gap:var(--e4);padding-bottom:var(--e5);position:relative}
.linha-tempo li:last-child{padding-bottom:0}
.lt-n{flex-shrink:0;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;
  font-weight:700;color:var(--cyan);background:var(--bg);border:1px solid var(--linha-forte);
  position:relative;z-index:1}
.linha-tempo h3{font-size:17.5px;font-weight:800;margin:10px 0 5px}
.linha-tempo p{font-size:14.5px;color:var(--sec);line-height:1.7;margin:0;max-width:56ch}

/* ── CTA fixo no celular ─────────────────────────────────────────────────
   Aparece só depois que a pessoa rolou o suficiente para saber do que se
   trata. Barra fixa desde o primeiro segundo é banner, não ajuda. */
.cta-fixo{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:var(--e2);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(6,9,18,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--linha);
  transform:translateY(105%);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.cta-fixo.on{transform:none}
.cta-fixo .btn{flex:1;padding:14px 12px;font-size:14px;min-height:48px}
@media(max-width:760px){
  .cta-fixo{display:flex}
  /* Espaço no fim da página para a barra não cobrir o rodapé. */
  body.corp{padding-bottom:76px}
}

/* ── Responsivo ──────────────────────────────────────────────────────────── */
@media(max-width:860px){
  .sintomas,.m360-lista{grid-template-columns:1fr}
  .caos{grid-template-columns:1fr;gap:var(--e3)}
  .caos-seta{transform:rotate(90deg);margin:0 auto}
}
@media(max-width:560px){
  .hero360-h1{font-size:clamp(27px,7.6vw,36px);max-width:100%}
  .hero360-trust{gap:6px}
  .hero360-trust li{font-size:10px;padding:7px 12px;letter-spacing:1.6px}
  .m360-nucleo{width:132px;height:132px}
  .m360-nucleo-t{font-size:15px}
  .sintoma,.m360-pilar,.caos-lado{padding:var(--e4)}
  .pausa p{padding-left:var(--e4);font-size:clamp(19px,5.6vw,25px);max-width:100%}
  .linha-tempo::before{left:19px}
  .lt-n{width:38px;height:38px;font-size:12px}
}

/* Movimento reduzido: nada pulsa, nada acende sozinho. */
@media(prefers-reduced-motion:reduce){
  .m360-anel{animation:none !important}
  .cta-fixo{transition:none}
}

/* Âncoras: o cabeçalho fixo cobriria o título da seção sem esta folga. */
.ancora{display:block;position:relative;top:-84px;visibility:hidden}

/* Fecho da seção de sintomas: costura os quatro cards numa conclusão só. */
.fecho-sintomas{margin-top:var(--e6);padding:var(--e5) 0 0;border-top:1px solid var(--linha)}
.fecho-t{font-size:16px;color:var(--sec);margin:0 0 6px}
.fecho-s{font-family:Fraunces,Georgia,serif;font-size:clamp(20px,3.2vw,29px);font-weight:800;
  line-height:1.3;margin:0;color:var(--text)}

/* Subtítulo dentro de seção, acima de uma lista. */
.sub-titulo{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--dim);margin:var(--e5) 0 var(--e3)}

/* Texto de leitura nunca abaixo de 13px. Rótulo em caixa alta com espaçamento
   pode ser menor porque se lê como etiqueta, não como frase. */
.form-nsi .form-nota,.nsi-rodape .mini{font-size:13px}
.retrato-papel{font-size:12.5px}