/* ══════════════════════════════════════════════════════════════════════════
   PROFUNDIDADE
   ══════════════════════════════════════════════════════════════════════════
   O que faz uma página parecer premium não é brilho: é camada. Luz vindo de
   um lugar só, borda que capta essa luz no topo, sombra que cresce quando o
   elemento sobe. É o mesmo princípio de um objeto real sobre uma mesa.

   Nada aqui usa neon, wireframe ou grade de circuito: a marca vende
   sobriedade, e efeito gratuito trabalha contra isso. */

:root{
  /* Luz sempre do alto e um pouco à esquerda, como numa sala real. */
  --luz-borda:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 38%,transparent 70%);
  --vidro:rgba(255,255,255,.035);
  --vidro-alto:rgba(255,255,255,.07);
}

/* ── Superfície de vidro ────────────────────────────────────────────────
   Uma borda clara no topo e escura embaixo é o que o olho lê como "isto tem
   espessura". Sem ela o card fica chapado por mais sombra que se coloque. */
.sintoma,.m360-pilar,.caos-lado,.card-nsi,.confronto-lado{
  position:relative;isolation:isolate;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 42%),
    var(--surf,rgba(255,255,255,.028));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),      /* fio de luz no topo */
    inset 0 -1px 0 rgba(0,0,0,.28),           /* sombra na base */
    0 2px 6px rgba(0,0,0,.16);
}

/* O brilho da borda só existe quando a luz bate: some no repouso. */
.sintoma::before,.m360-pilar::before,.card-nsi::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--luz-borda);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .28s ease-out;pointer-events:none;z-index:1}
@media(hover:hover){
  .sintoma:hover::before,.m360-pilar:hover::before,.card-nsi:hover::before{opacity:1}
  /* Ao subir, a sombra cresce e desfoca: é assim que sombra real se comporta. */
  .sintoma:hover,.card-nsi:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 40px rgba(0,0,0,.42)}
}
.m360-pilar.acesa::before{opacity:1}

/* ── Herói com camadas ──────────────────────────────────────────────────
   Três planos em profundidades diferentes. A arte fica atrás do texto, nunca
   competindo com ele. */
.hero360-arte{position:absolute;top:50%;right:-6%;width:min(520px,42vw);
  aspect-ratio:1/1;transform:translateY(-50%);pointer-events:none;z-index:1;
  opacity:0;transition:opacity 1.2s ease-out}
.hero360-arte img{width:100%;height:100%;object-fit:contain;display:block;
  filter:saturate(.86) contrast(1.04)}
.anima .hero360-arte.on{opacity:.78}
/* Sem JavaScript a arte aparece assim mesmo. */
html:not(.anima) .hero360-arte{opacity:.78}
.hero360-in{position:relative;z-index:3}
/* O texto do herói ganha uma sombra sutil para nunca disputar com a arte. */
.hero360-h1,.hero360-sub{text-shadow:0 2px 24px rgba(3,6,14,.6)}

@media(max-width:1100px){.hero360-arte{width:min(420px,54vw);right:-12%}}
/* No celular a arte sai: ali o texto precisa da tela inteira. */
@media(max-width:820px){.hero360-arte{display:none}}

/* ── Textura de fundo ───────────────────────────────────────────────────
   Um grão quase imperceptível tira o aspecto de cor chapada. É SVG inline,
   então não custa nenhum arquivo extra. */
body.corp::before{
  content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.5'/%3E%3C/svg%3E")}
body.corp > *{position:relative;z-index:1}

/* ── Brilho que acompanha o ponteiro ────────────────────────────────────
   Só no computador, e só nas seções com fundo: dá a sensação de superfície
   iluminada por uma fonte que se move. No toque não existe ponteiro. */
@media(hover:hover) and (min-width:900px){
  .sec-alt{position:relative;overflow:hidden}
  .sec-alt::after{content:"";position:absolute;width:520px;height:520px;
    border-radius:50%;pointer-events:none;z-index:0;
    left:var(--px,50%);top:var(--py,50%);transform:translate(-50%,-50%);
    background:radial-gradient(closest-side,rgba(59,130,246,.09),transparent);
    opacity:0;transition:opacity .4s ease-out}
  .sec-alt.luz::after{opacity:1}
  .sec-alt > .wrap{position:relative;z-index:1}
}

/* ── Núcleo do Método em perspectiva ────────────────────────────────────── */
.m360-nucleo{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 24px 60px rgba(0,0,0,.5),
    0 0 60px rgba(59,130,246,.1)}

/* ── Botões com relevo ──────────────────────────────────────────────────── */
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 22px rgba(0,0,0,.3)}
.btn-primary:active{box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}

/* Movimento reduzido: profundidade permanece, movimento não. */
@media(prefers-reduced-motion:reduce){
  .hero360-arte{opacity:.78 !important;transition:none}
  .sec-alt::after{display:none}
  .sintoma::before,.m360-pilar::before,.card-nsi::before{transition:none}
}
/* Na impressão, nada de textura nem sombra: gasta tinta e não ajuda. */
@media print{
  body.corp::before,.hero360-arte,.sec-alt::after{display:none !important}
  .sintoma,.m360-pilar,.caos-lado,.card-nsi{box-shadow:none !important}
}

/* O render veio num quadrado com fundo escuro, mas não preto puro: só misturar
   por luz deixava a moldura retangular à mostra. A máscara radial desvanece as
   bordas até o nada, então o objeto parece flutuar na página em vez de estar
   colado dentro de uma caixa. */
.hero360-arte img{
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 42%,rgba(0,0,0,.55) 62%,transparent 76%);
          mask-image:radial-gradient(circle at 50% 50%,#000 42%,rgba(0,0,0,.55) 62%,transparent 76%)}
/* Sem suporte a máscara, é melhor não mostrar do que mostrar a caixa. */
@supports not ((-webkit-mask-image:radial-gradient(#000,transparent)) or (mask-image:radial-gradient(#000,transparent))){
  .hero360-arte{display:none}
}