/* =========================================================================
   NBRTECH — NOVO VISUAL · HOME (index.php)
   "Claro por fora. Sala de cinema por dentro."

   Prefixo hn- (Home NBRTECH). Carregado só pela Home, depois do nb-shell.css.

   Como este arquivo foi pensado
   1) O estado normal de cada elemento é o estado FINAL: tudo visível e a cena 1
      do diagnóstico aberta. O movimento entra por cima, dentro de
      "prefers-reduced-motion: no-preference". Se o navegador não rodar
      animações, ou se a pessoa pediu menos movimento, a página fica completa.
   2) O diagnóstico funciona sem JavaScript: botões de rádio escondidos
      (#hn-p1 a #hn-p5) escolhem a cena. Sem escolha, no computador as cenas
      passam sozinhas (30 s por volta). No celular fica a cena 1 aberta e a
      cena escolhida abre logo abaixo da dor que a pessoa tocou.
   3) Nenhuma regra solta mexe em elementos de fora de .hn.
   ========================================================================= */

.hn{--hn-t0:1.1s;overflow-x:clip}
html.hn-skip .hn{--hn-t0:0s}
.hn [id]{scroll-margin-top:var(--header-h)}

/* =========================================================================
   ABERTURA — a cortina (só na primeira visita à Home em cada sessão)
   ========================================================================= */
.hn-curtain{display:none}
@media (prefers-reduced-motion:no-preference){
  .hn-curtain{display:block;position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;visibility:hidden;animation:hn-cv 1.25s linear both}
  .hn-curtain i{position:absolute;left:0;right:0;height:50.6%;display:block;background:var(--nb-night)}
  .hn-curtain i:nth-child(1){top:0;animation:hn-cup .95s cubic-bezier(.75,0,.2,1) .22s both}
  .hn-curtain i:nth-child(2){bottom:0;animation:hn-cdn .95s cubic-bezier(.75,0,.2,1) .22s both}
  html.hn-skip .hn-curtain{display:none}
}
@keyframes hn-cv{0%,99%{visibility:visible}100%{visibility:hidden}}
@keyframes hn-cup{to{transform:translateY(-101%)}}
@keyframes hn-cdn{to{transform:translateY(101%)}}

/* =========================================================================
   ATO I · DIAGNÓSTICO
   ========================================================================= */
.hn-hero{position:relative;isolation:isolate;overflow:hidden;background:#fff;padding:68px 0 104px}
.hn-fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hn-fx i{position:absolute;display:block}
.hn-fx-grid{inset:0;background-image:linear-gradient(rgba(37,99,235,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.08) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 85% at 74% 28%,#000,transparent 78%);mask-image:radial-gradient(ellipse 70% 85% at 74% 28%,#000,transparent 78%)}
.hn-fx-b1,.hn-fx-b2{top:-30%;height:170%;width:34%;background:linear-gradient(90deg,transparent,rgba(37,99,235,.09),transparent);transform:rotate(18deg)}
.hn-fx-b1{left:-10%}
.hn-fx-b2{left:35%;width:22%;background:linear-gradient(90deg,transparent,rgba(96,165,250,.11),transparent)}

.hn-hg{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center}
.hn-h1{margin-top:0;font:800 clamp(2.3rem,4.5vw,3.7rem)/1.04 var(--nb-f-disp);letter-spacing:-.035em;color:var(--nb-ink)}
.hn-h1 u{text-decoration:none;color:var(--nb-blue2);background:linear-gradient(var(--nb-blue),var(--nb-blue)) no-repeat 0 94%/100% 4px;padding-bottom:3px}
.hn-lead{margin-top:18px;max-width:44ch}
.hn-ha{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hn-mt{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;line-height:1.4;color:var(--nb-mute)}

/* ---- lista de dores ---- */
.hn-pl{display:flex;flex-direction:column;gap:8px;margin-top:28px;max-width:600px}
.hn-pn{display:grid;grid-template-columns:28px minmax(0,1fr) auto 18px;align-items:center;gap:12px;min-height:56px;margin:0;padding:8px 18px 8px 16px;background:#fff;border:1px solid var(--nb-line);border-radius:14px;cursor:pointer;color:var(--nb-ink);font-size:16px;font-weight:400;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s,translate .2s}
.hn-pn-nu{font-size:12px;font-weight:600;color:var(--nb-mute)}
.hn-pn b{font-weight:600;font-size:16px;line-height:1.3;transition:color .2s}
.hn-pn em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--nb-mute);text-transform:uppercase}
.hn-pn svg{color:var(--nb-blue);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
/* estado de partida (sem escolha): a dor 01 aparece marcada */
.hn-pn1{border-color:var(--nb-blue);background:#EFF6FF;box-shadow:0 12px 24px -16px rgba(37,99,235,.5);transform:translateX(4px)}
.hn-pn1 svg{opacity:1;transform:none}
@media (hover:hover){
  .hn-pn:hover{outline:2px solid #BFDBFE;outline-offset:-1px;translate:4px 0}
  .hn-pn:hover b{color:var(--nb-blue2)}
}

/* ---- palco ---- */
.hn-stg{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:620px;border-radius:28px;background:var(--nb-night);border:1px solid rgba(255,255,255,.14);box-shadow:0 60px 90px -44px rgba(7,12,24,.7);overflow:hidden}
.hn-stg::before{content:"";position:absolute;inset:0;background:radial-gradient(460px 280px at 92% -8%,rgba(59,130,246,.42),transparent 70%),radial-gradient(380px 280px at -6% 108%,rgba(37,99,235,.30),transparent 70%);pointer-events:none}
.hn-stg::after{content:"";display:none;position:absolute;left:0;right:0;top:0;height:36%;transform:translateY(-111%);background:linear-gradient(180deg,transparent,rgba(96,165,250,.10),transparent);pointer-events:none;z-index:3}
.hn-bar{position:relative;z-index:2;display:flex;align-items:center;gap:14px;height:46px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(7,12,24,.6);font-size:11px;letter-spacing:.1em;font-weight:600;color:#D6E0F0}
.hn-dots{display:flex;gap:6px}
.hn-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.24);display:block}
.hn-dim{margin-left:auto;color:var(--nb-nmute)}
.hn-labs{position:relative;flex:1;height:16px;min-width:0;overflow:hidden}
.hn-lb{position:absolute;left:0;top:0;white-space:nowrap;opacity:0}
.hn-l1{opacity:1}
.hn-stk{position:relative;flex:1;min-height:574px}
.hn-sc{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden}
.hn-s1{opacity:1;visibility:visible}
.hn-film{position:relative;flex:1;overflow:hidden;padding:30px 34px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.hn-cap{position:relative;z-index:2;padding:22px 34px 30px;border-top:1px solid rgba(255,255,255,.1);background:rgba(7,12,24,.6)}
.hn-cap-sb{font-size:11px;font-weight:600;letter-spacing:.14em;color:#93C5FD;margin-bottom:10px}
.hn-cap-t{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font:700 24px/1.1 var(--nb-f-disp);letter-spacing:-.02em;color:#fff}
.hn-cap-sub{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--nb-nmute)}
.hn-cap-pill{font-size:11px;font-weight:700;letter-spacing:.04em;color:#0B1016;background:#FFB020;border-radius:999px;padding:5px 10px}
.hn-cap p{margin-top:10px;color:#C5D0E2;font-size:15px;line-height:1.55;max-width:56ch}
.hn-cap a{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:700;font-size:15px;color:#fff;border-bottom:2px solid var(--nb-blue3);padding-bottom:3px;transition:color .2s}
.hn-cap a:hover{color:#BFDBFE}

/* ---- cena 1 · ZAPNBR ---- */
.hn-s1 .hn-film{background:#EEF2F9}
.hn-zb{max-width:340px;border:2px solid #0A1226;border-radius:16px;padding:12px 16px;font-size:15px;line-height:1.35;font-weight:500;color:#0A1226;background:#fff;box-shadow:4px 4px 0 #0A1226}
.hn-zb i{display:block;font:700 10px/1 var(--nb-f-body);font-style:normal;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:5px}
.hn-zb--o{align-self:flex-end;background:#1565E0;color:#fff}
.hn-zq{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hn-zq b{font:700 11px/1 var(--nb-f-mono);letter-spacing:.12em;color:#0A1226;margin-right:4px}
.hn-zq span{border:2px solid #0A1226;border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px;color:#0A1226;background:#fff}
.hn-zq .hn-hot{background:#E0004F;color:#fff}
.hn-zh{display:flex;align-items:center;gap:10px;align-self:flex-start;background:#FFD43B;border:2px solid #0A1226;border-radius:999px;padding:8px 16px;font-weight:700;font-size:13px;color:#0A1226;box-shadow:3px 3px 0 #0A1226}

/* ---- cena 2 · LGPDNBR ---- */
.hn-s2 .hn-film{background:#120B2E;color:#fff;gap:10px}
.hn-lh{display:flex;justify-content:space-between;gap:12px;font:600 11px/1 var(--nb-f-mono);letter-spacing:.14em;color:#C6F432;margin-bottom:6px}
.hn-lr{display:flex;align-items:center;gap:12px;border:1px solid rgba(198,244,50,.28);border-radius:10px;padding:12px 14px;font:500 13.5px/1.3 var(--nb-f-mono);color:#EDE9FF;background:rgba(91,46,255,.16)}
.hn-lr i{width:22px;height:22px;border-radius:6px;background:#C6F432;color:#120B2E;display:grid;place-items:center;flex:none}
.hn-lst{position:absolute;right:26px;bottom:20px;rotate:-7deg;border:2px solid #E5254B;color:#FF8CA0;padding:9px 15px;border-radius:8px;font:700 12px/1.3 var(--nb-f-mono);letter-spacing:.08em;text-align:center;background:rgba(18,11,46,.92)}

/* ---- cena 3 · Certificados Digitais ---- */
.hn-s3 .hn-film{background:#0B1016;color:#fff;gap:16px}
.hn-s3 .hn-film::after{content:"";position:absolute;right:-110px;top:-110px;width:360px;height:360px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 6px,rgba(255,176,32,.15) 6px 7px);pointer-events:none}
.hn-cc{position:relative;width:min(390px,100%);border:1px solid rgba(255,176,32,.55);border-radius:16px;padding:16px 18px;background:#121A26}
.hn-cc-t{display:flex;justify-content:space-between;gap:12px;font:800 11px/1 var(--nb-f-disp);letter-spacing:.12em;color:#FFB020;text-transform:uppercase}
.hn-cc-mid{display:flex;align-items:center;gap:14px;margin:16px 0 14px}
.hn-cc-seal{width:48px;height:48px;border-radius:50%;border:2px solid #FFB020;display:grid;place-items:center;color:#FFB020;flex:none}
.hn-cc small{display:block;font:600 10px/1 var(--nb-f-mono);letter-spacing:.14em;color:#9AA7BA;margin-bottom:6px}
.hn-cc b{font:700 16px/1.2 var(--nb-f-disp);letter-spacing:.02em;text-transform:uppercase}
.hn-cb{height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.hn-cb i{display:block;height:100%;width:100%;background:#FFB020;transform-origin:0 50%;transform:scaleX(.34)}
.hn-csy{display:flex;align-items:center;gap:12px}
.hn-csy-btn{font:700 13px/1 var(--nb-f-body);background:#fff;color:#0B1016;border-radius:10px;padding:12px 16px}
.hn-csy-ok{font:700 11px/1 var(--nb-f-mono);letter-spacing:.1em;color:#22C58B;border:1px solid #22C58B;border-radius:99px;padding:7px 12px}
.hn-cp{align-self:flex-start;font:800 12px/1 var(--nb-f-disp);letter-spacing:.04em;color:#FFB020;border:1px dashed #FFB020;padding:9px 13px;border-radius:8px}

/* ---- cena 4 · Sites Institucionais ---- */
.hn-s4 .hn-film{background:#F2F0EA;align-items:center}
.hn-bw{width:min(450px,100%);background:#FAF9F5;border:1px solid #DDD8CB;border-radius:14px;overflow:hidden;box-shadow:0 24px 34px -24px rgba(14,26,22,.5)}
.hn-bw-tb{height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid #E7E2D5}
.hn-bw-tb i{width:8px;height:8px;border-radius:50%;background:#CFC8B6;display:block}
.hn-bw-tb u{margin-left:10px;height:9px;width:130px;border-radius:5px;background:#E7E2D5;display:block;text-decoration:none}
.hn-bw-hr{background:#0F6B52;padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.hn-bw-hr b{height:13px;border-radius:7px;background:rgba(250,249,245,.94);display:block;width:84%}
.hn-bw-hr b:nth-child(2){width:58%;opacity:.7}
.hn-bw-hr s{display:block;width:104px;height:28px;border-radius:8px;background:#C79A45;margin-top:6px;text-decoration:none}
.hn-bw-cd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px}
.hn-bw-cd i{height:70px;border-radius:10px;background:#fff;border:1px solid #E7E2D5;position:relative;display:block}
.hn-bw-cd i::after{content:"";position:absolute;left:12px;right:30px;top:16px;height:8px;border-radius:4px;background:#0F6B52;opacity:.85;box-shadow:0 16px 0 -1px #DDD8CB,0 30px 0 -1px #DDD8CB}

/* ---- cena 5 · Terceiro Setor ---- */
.hn-s5 .hn-film{background:#0B1220;color:#fff}
.hn-s5 .hn-film::before{content:"";position:absolute;right:-70px;top:-70px;width:300px;height:300px;border-radius:50%;background:radial-gradient(closest-side,rgba(59,130,246,.38),transparent)}
.hn-op{position:relative;background:#0F1B33;border:1px solid rgba(147,197,253,.22);border-radius:16px;padding:14px 16px;width:min(450px,100%)}
.hn-op-h{display:flex;align-items:center;gap:10px;font:700 14px/1 var(--nb-f-disp);color:#fff;padding:2px 2px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.hn-op-h svg{color:#F59E0B}
.hn-op li{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px;font-weight:500;color:#E6EDF8}
.hn-op li:last-child{border-bottom:0}
.hn-op li svg{color:#93C5FD}
.hn-op li em{margin-left:auto;font:600 10px/1 var(--nb-f-mono);letter-spacing:.1em;text-transform:uppercase;color:#0B1220;background:#F59E0B;border-radius:99px;padding:5px 10px;font-style:normal}

/* ---- escolha manual: vale com ou sem movimento ---- */
/* dor 01 escolhida */
#hn-p1:checked ~ .hn-hg .hn-sc:not(.hn-s1){display:none}
#hn-p1:checked ~ .hn-hg .hn-s1{opacity:1;visibility:visible;transform:none;animation:none}
#hn-p1:checked ~ .hn-hg .hn-lb:not(.hn-l1){opacity:0;animation:none}
#hn-p1:checked ~ .hn-hg .hn-l1{opacity:1;animation:none}
#hn-p1:checked ~ .hn-hg .hn-pn:not(.hn-pn1){border-color:#E2E8F0;background:#fff;box-shadow:none;transform:none;animation:none}
#hn-p1:checked ~ .hn-hg .hn-pn:not(.hn-pn1) svg{opacity:0;transform:translateX(-6px);animation:none}
#hn-p1:checked ~ .hn-hg .hn-pn1{border-color:#2563EB;background:#EFF6FF;box-shadow:0 12px 24px -16px rgba(37,99,235,.5);transform:translateX(4px);animation:none}
#hn-p1:checked ~ .hn-hg .hn-pn1 svg{opacity:1;transform:none;animation:none}
#hn-p1:focus-visible ~ .hn-hg .hn-pn1{outline:3px solid #93C5FD;outline-offset:2px}
/* dor 02 escolhida */
#hn-p2:checked ~ .hn-hg .hn-sc:not(.hn-s2){display:none}
#hn-p2:checked ~ .hn-hg .hn-s2{opacity:1;visibility:visible;transform:none;animation:none}
#hn-p2:checked ~ .hn-hg .hn-lb:not(.hn-l2){opacity:0;animation:none}
#hn-p2:checked ~ .hn-hg .hn-l2{opacity:1;animation:none}
#hn-p2:checked ~ .hn-hg .hn-pn:not(.hn-pn2){border-color:#E2E8F0;background:#fff;box-shadow:none;transform:none;animation:none}
#hn-p2:checked ~ .hn-hg .hn-pn:not(.hn-pn2) svg{opacity:0;transform:translateX(-6px);animation:none}
#hn-p2:checked ~ .hn-hg .hn-pn2{border-color:#2563EB;background:#EFF6FF;box-shadow:0 12px 24px -16px rgba(37,99,235,.5);transform:translateX(4px);animation:none}
#hn-p2:checked ~ .hn-hg .hn-pn2 svg{opacity:1;transform:none;animation:none}
#hn-p2:focus-visible ~ .hn-hg .hn-pn2{outline:3px solid #93C5FD;outline-offset:2px}
/* dor 03 escolhida */
#hn-p3:checked ~ .hn-hg .hn-sc:not(.hn-s3){display:none}
#hn-p3:checked ~ .hn-hg .hn-s3{opacity:1;visibility:visible;transform:none;animation:none}
#hn-p3:checked ~ .hn-hg .hn-lb:not(.hn-l3){opacity:0;animation:none}
#hn-p3:checked ~ .hn-hg .hn-l3{opacity:1;animation:none}
#hn-p3:checked ~ .hn-hg .hn-pn:not(.hn-pn3){border-color:#E2E8F0;background:#fff;box-shadow:none;transform:none;animation:none}
#hn-p3:checked ~ .hn-hg .hn-pn:not(.hn-pn3) svg{opacity:0;transform:translateX(-6px);animation:none}
#hn-p3:checked ~ .hn-hg .hn-pn3{border-color:#2563EB;background:#EFF6FF;box-shadow:0 12px 24px -16px rgba(37,99,235,.5);transform:translateX(4px);animation:none}
#hn-p3:checked ~ .hn-hg .hn-pn3 svg{opacity:1;transform:none;animation:none}
#hn-p3:focus-visible ~ .hn-hg .hn-pn3{outline:3px solid #93C5FD;outline-offset:2px}
/* dor 04 escolhida */
#hn-p4:checked ~ .hn-hg .hn-sc:not(.hn-s4){display:none}
#hn-p4:checked ~ .hn-hg .hn-s4{opacity:1;visibility:visible;transform:none;animation:none}
#hn-p4:checked ~ .hn-hg .hn-lb:not(.hn-l4){opacity:0;animation:none}
#hn-p4:checked ~ .hn-hg .hn-l4{opacity:1;animation:none}
#hn-p4:checked ~ .hn-hg .hn-pn:not(.hn-pn4){border-color:#E2E8F0;background:#fff;box-shadow:none;transform:none;animation:none}
#hn-p4:checked ~ .hn-hg .hn-pn:not(.hn-pn4) svg{opacity:0;transform:translateX(-6px);animation:none}
#hn-p4:checked ~ .hn-hg .hn-pn4{border-color:#2563EB;background:#EFF6FF;box-shadow:0 12px 24px -16px rgba(37,99,235,.5);transform:translateX(4px);animation:none}
#hn-p4:checked ~ .hn-hg .hn-pn4 svg{opacity:1;transform:none;animation:none}
#hn-p4:focus-visible ~ .hn-hg .hn-pn4{outline:3px solid #93C5FD;outline-offset:2px}
/* dor 05 escolhida */
#hn-p5:checked ~ .hn-hg .hn-sc:not(.hn-s5){display:none}
#hn-p5:checked ~ .hn-hg .hn-s5{opacity:1;visibility:visible;transform:none;animation:none}
#hn-p5:checked ~ .hn-hg .hn-lb:not(.hn-l5){opacity:0;animation:none}
#hn-p5:checked ~ .hn-hg .hn-l5{opacity:1;animation:none}
#hn-p5:checked ~ .hn-hg .hn-pn:not(.hn-pn5){border-color:#E2E8F0;background:#fff;box-shadow:none;transform:none;animation:none}
#hn-p5:checked ~ .hn-hg .hn-pn:not(.hn-pn5) svg{opacity:0;transform:translateX(-6px);animation:none}
#hn-p5:checked ~ .hn-hg .hn-pn5{border-color:#2563EB;background:#EFF6FF;box-shadow:0 12px 24px -16px rgba(37,99,235,.5);transform:translateX(4px);animation:none}
#hn-p5:checked ~ .hn-hg .hn-pn5 svg{opacity:1;transform:none;animation:none}
#hn-p5:focus-visible ~ .hn-hg .hn-pn5{outline:3px solid #93C5FD;outline-offset:2px}

/* ---- ATO I no computador (duas colunas) ---- */
@media (min-width:1000px){
  .hn-hg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
}

/* ---- ATO I no celular e no tablet (uma coluna) ----
   As dores, o palco e os botões viram itens de uma mesma coluna (display:contents)
   para o palco poder abrir logo abaixo da dor escolhida (propriedade order). */
@media (max-width:999px){
  .hn-hero{padding:44px 0 72px}
  .hn-fx-b1,.hn-fx-b2{display:none}
  .hn-hg{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hn-hl,.hn-pl{display:contents}
  .hn-h1{order:2}
  .hn-lead{order:3}
  .hn-pn{margin-top:8px;padding:8px 14px}
  .hn-pn1{order:11;margin-top:26px}
  .hn-pn2{order:13}
  .hn-pn3{order:15}
  .hn-pn4{order:17}
  .hn-pn5{order:19}
  .hn-pn1{transform:none}
  .hn-pn svg{opacity:.55;transform:none}
  .hn-pn1 svg{opacity:1;transform:rotate(90deg)}
  .hn-stg{order:12;margin-top:8px;min-height:0;border-radius:22px}
  .hn-stk{display:grid;flex:none;min-height:0}
  .hn-sc{position:relative;inset:auto;grid-area:1/1}
  .hn-film{flex:none;min-height:300px;padding:24px 20px}
  .hn-cap{padding:20px 20px 26px}
  .hn-ha{order:30;margin-top:28px}
  .hn-mt{order:31}
  #hn-p1:checked ~ .hn-hg .hn-pn:not(.hn-pn1){transform:none}
#hn-p1:checked ~ .hn-hg .hn-pn1{transform:none}
#hn-p1:checked ~ .hn-hg .hn-pn:not(.hn-pn1) svg{opacity:.55;transform:none}
#hn-p1:checked ~ .hn-hg .hn-pn1 svg{opacity:1;transform:rotate(90deg)}
#hn-p1:checked ~ .hn-hg .hn-stg{order:12}
#hn-p2:checked ~ .hn-hg .hn-pn:not(.hn-pn2){transform:none}
#hn-p2:checked ~ .hn-hg .hn-pn2{transform:none}
#hn-p2:checked ~ .hn-hg .hn-pn:not(.hn-pn2) svg{opacity:.55;transform:none}
#hn-p2:checked ~ .hn-hg .hn-pn2 svg{opacity:1;transform:rotate(90deg)}
#hn-p2:checked ~ .hn-hg .hn-stg{order:14}
#hn-p3:checked ~ .hn-hg .hn-pn:not(.hn-pn3){transform:none}
#hn-p3:checked ~ .hn-hg .hn-pn3{transform:none}
#hn-p3:checked ~ .hn-hg .hn-pn:not(.hn-pn3) svg{opacity:.55;transform:none}
#hn-p3:checked ~ .hn-hg .hn-pn3 svg{opacity:1;transform:rotate(90deg)}
#hn-p3:checked ~ .hn-hg .hn-stg{order:16}
#hn-p4:checked ~ .hn-hg .hn-pn:not(.hn-pn4){transform:none}
#hn-p4:checked ~ .hn-hg .hn-pn4{transform:none}
#hn-p4:checked ~ .hn-hg .hn-pn:not(.hn-pn4) svg{opacity:.55;transform:none}
#hn-p4:checked ~ .hn-hg .hn-pn4 svg{opacity:1;transform:rotate(90deg)}
#hn-p4:checked ~ .hn-hg .hn-stg{order:18}
#hn-p5:checked ~ .hn-hg .hn-pn:not(.hn-pn5){transform:none}
#hn-p5:checked ~ .hn-hg .hn-pn5{transform:none}
#hn-p5:checked ~ .hn-hg .hn-pn:not(.hn-pn5) svg{opacity:.55;transform:none}
#hn-p5:checked ~ .hn-hg .hn-pn5 svg{opacity:1;transform:rotate(90deg)}
#hn-p5:checked ~ .hn-hg .hn-stg{order:20}
}

/* ---- movimento da abertura ---- */
@media (prefers-reduced-motion:no-preference){
  .hn-rs{animation:hn-rise .85s cubic-bezier(.2,.7,.2,1) both}
  .hn-r2{animation-delay:.72s}
  .hn-r3{animation-delay:.84s}
  .hn-r4{animation-delay:.96s}
  .hn-r5{animation-delay:1.08s}
  .hn-r6{animation-delay:1.16s}
  .hn-h1 u{animation:hn-ul 1s ease 1.45s both}
  .hn-stg{animation:hn-stin .95s cubic-bezier(.2,.7,.2,1) .82s both}
  .hn-stg::after{display:block;animation:hn-scan 7s ease-in-out var(--hn-t0) infinite}
  .hn-fx-b1,.hn-fx-b2{will-change:transform;animation:hn-beam 16s ease-in-out infinite alternate}
  .hn-fx-b2{animation-duration:21s;animation-delay:-6s;animation-direction:alternate-reverse}
  html.hn-skip .hn-rs,html.hn-skip .hn-h1 u,html.hn-skip .hn-stg{animation:none}


  /* escolha manual: a cena escolhida entra suave e os ciclos recomeçam do zero */
  #hn-p1:checked ~ .hn-hg .hn-s1{animation:hn-scin .5s ease both}
#hn-p1:checked ~ .hn-hg .hn-s1 .hn-k1{animation:hn-k1o 3.6s ease both}
#hn-p1:checked ~ .hn-hg .hn-s1 .hn-k2{animation:hn-k2o 3.6s ease both}
#hn-p1:checked ~ .hn-hg .hn-s1 .hn-k3{animation:hn-k3o 3.6s ease both}
#hn-p1:checked ~ .hn-hg .hn-s1 .hn-k4{animation:hn-k4o 3.6s ease both}
#hn-p1:checked ~ .hn-hg .hn-s1 .hn-k5{animation:hn-k5o 3.6s ease both}
#hn-p2:checked ~ .hn-hg .hn-s2{animation:hn-scin .5s ease both}
#hn-p2:checked ~ .hn-hg .hn-s2 .hn-k1{animation:hn-k1o 3.6s ease both}
#hn-p2:checked ~ .hn-hg .hn-s2 .hn-k2{animation:hn-k2o 3.6s ease both}
#hn-p2:checked ~ .hn-hg .hn-s2 .hn-k3{animation:hn-k3o 3.6s ease both}
#hn-p2:checked ~ .hn-hg .hn-s2 .hn-k4{animation:hn-k4o 3.6s ease both}
#hn-p2:checked ~ .hn-hg .hn-s2 .hn-k5{animation:hn-k5o 3.6s ease both}
#hn-p3:checked ~ .hn-hg .hn-s3{animation:hn-scin .5s ease both}
#hn-p3:checked ~ .hn-hg .hn-s3 .hn-k1{animation:hn-k1o 3.6s ease both}
#hn-p3:checked ~ .hn-hg .hn-s3 .hn-k2{animation:hn-k2o 3.6s ease both}
#hn-p3:checked ~ .hn-hg .hn-s3 .hn-k3{animation:hn-k3o 3.6s ease both}
#hn-p3:checked ~ .hn-hg .hn-s3 .hn-k4{animation:hn-k4o 3.6s ease both}
#hn-p3:checked ~ .hn-hg .hn-s3 .hn-k5{animation:hn-k5o 3.6s ease both}
#hn-p3:checked ~ .hn-hg .hn-s3 .hn-cb i{animation:hn-shro 3.6s ease both}
#hn-p4:checked ~ .hn-hg .hn-s4{animation:hn-scin .5s ease both}
#hn-p4:checked ~ .hn-hg .hn-s4 .hn-k1{animation:hn-k1o 3.6s ease both}
#hn-p4:checked ~ .hn-hg .hn-s4 .hn-k2{animation:hn-k2o 3.6s ease both}
#hn-p4:checked ~ .hn-hg .hn-s4 .hn-k3{animation:hn-k3o 3.6s ease both}
#hn-p4:checked ~ .hn-hg .hn-s4 .hn-k4{animation:hn-k4o 3.6s ease both}
#hn-p4:checked ~ .hn-hg .hn-s4 .hn-k5{animation:hn-k5o 3.6s ease both}
#hn-p5:checked ~ .hn-hg .hn-s5{animation:hn-scin .5s ease both}
#hn-p5:checked ~ .hn-hg .hn-s5 .hn-k1{animation:hn-k1o 3.6s ease both}
#hn-p5:checked ~ .hn-hg .hn-s5 .hn-k2{animation:hn-k2o 3.6s ease both}
#hn-p5:checked ~ .hn-hg .hn-s5 .hn-k3{animation:hn-k3o 3.6s ease both}
#hn-p5:checked ~ .hn-hg .hn-s5 .hn-k4{animation:hn-k4o 3.6s ease both}
#hn-p5:checked ~ .hn-hg .hn-s5 .hn-k5{animation:hn-k5o 3.6s ease both}
}
@keyframes hn-rise{from{opacity:0;transform:translateY(22px)}}
@keyframes hn-ul{from{background-size:0% 4px}}
@keyframes hn-stin{from{opacity:0;transform:translateY(26px)}}
@keyframes hn-scan{0%{transform:translateY(-111%)}60%,100%{transform:translateY(306%)}}
@keyframes hn-beam{from{transform:translateX(-12vw) rotate(18deg)}to{transform:translateX(34vw) rotate(18deg)}}
@keyframes hn-scin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hn-shr{0%,16%{transform:scaleX(1)}60%,90%{transform:scaleX(.34)}97%,100%{transform:scaleX(1)}}
@keyframes hn-shro{0%,16%{transform:scaleX(1)}60%,100%{transform:scaleX(.34)}}
@keyframes hn-k1{0%,3%{opacity:0;transform:translateY(12px) scale(.98)}10%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes hn-k1o{0%,3%{opacity:0;transform:translateY(12px) scale(.98)}10%,100%{opacity:1;transform:none}}
@keyframes hn-k2{0%,16%{opacity:0;transform:translateY(12px) scale(.98)}23%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes hn-k2o{0%,16%{opacity:0;transform:translateY(12px) scale(.98)}23%,100%{opacity:1;transform:none}}
@keyframes hn-k3{0%,30%{opacity:0;transform:translateY(12px) scale(.98)}37%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes hn-k3o{0%,30%{opacity:0;transform:translateY(12px) scale(.98)}37%,100%{opacity:1;transform:none}}
@keyframes hn-k4{0%,44%{opacity:0;transform:translateY(12px) scale(.98)}51%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes hn-k4o{0%,44%{opacity:0;transform:translateY(12px) scale(.98)}51%,100%{opacity:1;transform:none}}
@keyframes hn-k5{0%,58%{opacity:0;transform:translateY(12px) scale(.98)}65%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes hn-k5o{0%,58%{opacity:0;transform:translateY(12px) scale(.98)}65%,100%{opacity:1;transform:none}}

/* ---- no celular, as dores também entram em sequência (o container delas some com display:contents) ---- */
@media (prefers-reduced-motion:no-preference) and (max-width:999px){
  .hn-pn{animation:hn-rise .85s cubic-bezier(.2,.7,.2,1) .96s both}
  html.hn-skip .hn-pn{animation:none}
  /* a cena aberta monta UMA vez e fica completa na tela (nada some nem recomeça) */
  .hn-k1{animation:hn-k1o 3.6s ease var(--hn-t0) both}
  .hn-k2{animation:hn-k2o 3.6s ease var(--hn-t0) both}
  .hn-k3{animation:hn-k3o 3.6s ease var(--hn-t0) both}
  .hn-k4{animation:hn-k4o 3.6s ease var(--hn-t0) both}
  .hn-k5{animation:hn-k5o 3.6s ease var(--hn-t0) both}
  .hn-cb i{animation:hn-shro 3.6s ease var(--hn-t0) both}
}

/* ---- no computador, o diagnóstico passa sozinho: 5 cenas × 6 s = 30 s ---- */
@media (prefers-reduced-motion:no-preference) and (min-width:1000px){
  .hn-pn{animation:hn-pnc 30s linear var(--hn-t0) infinite}
  .hn-pn svg{animation:hn-pnv 30s linear var(--hn-t0) infinite}
  .hn-sc{animation:hn-scc 30s linear var(--hn-t0) infinite both}
  .hn-lb{animation:hn-lbc 30s linear var(--hn-t0) infinite both}
  /* ciclo interno de cada cena (6 s), alinhado à janela da cena */
  .hn-k1{animation:hn-k1 6s ease var(--hn-t0) infinite both}
  .hn-k2{animation:hn-k2 6s ease var(--hn-t0) infinite both}
  .hn-k3{animation:hn-k3 6s ease var(--hn-t0) infinite both}
  .hn-k4{animation:hn-k4 6s ease var(--hn-t0) infinite both}
  .hn-k5{animation:hn-k5 6s ease var(--hn-t0) infinite both}
  .hn-cb i{animation:hn-shr 6s ease var(--hn-t0) infinite both}
  .hn-pn2,.hn-pn2 svg,.hn-s2,.hn-l2{animation-delay:calc(var(--hn-t0) + 6s)}
  .hn-pn3,.hn-pn3 svg,.hn-s3,.hn-l3{animation-delay:calc(var(--hn-t0) + 12s)}
  .hn-pn4,.hn-pn4 svg,.hn-s4,.hn-l4{animation-delay:calc(var(--hn-t0) + 18s)}
  .hn-pn5,.hn-pn5 svg,.hn-s5,.hn-l5{animation-delay:calc(var(--hn-t0) + 24s)}
  /* ao passar o mouse na lista ou no palco, o ciclo espera */
  .hn-hero:not(:has(input[name=pain]:checked)) .hn-hg:has(.hn-pl:hover,.hn-stg:hover,.hn-pl:focus-within,.hn-stg:focus-within) :is(.hn-pn,.hn-pn svg,.hn-sc,.hn-sc *,.hn-lb){animation-play-state:paused}
}
@keyframes hn-pnc{0%,18%{border-color:#2563EB;background:#EFF6FF;box-shadow:0 12px 24px -16px rgba(37,99,235,.5);transform:translateX(4px)}20%,100%{border-color:#E2E8F0;background:#fff;box-shadow:none;transform:none}}
@keyframes hn-pnv{0%,18%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateX(-6px)}}
@keyframes hn-lbc{0%{opacity:0}2.2%,18%{opacity:1}20%,100%{opacity:0}}
@keyframes hn-scc{0%{opacity:0;visibility:visible;transform:translateY(14px)}2.2%,18%{opacity:1;visibility:visible;transform:none}20%{opacity:0;visibility:visible;transform:translateY(-8px)}20.1%,100%{opacity:0;visibility:hidden}}

/* =========================================================================
   LOGOS DE CLIENTES (só existe na página quando há logos reais)
   O carrossel em si (.clients-marquee) vem do style.css.
   ========================================================================= */
.hn-clients{padding:38px 0 42px;background:var(--nb-mist);border-top:1px solid var(--nb-line);border-bottom:1px solid var(--nb-line)}
.hn-clients-h{text-align:center;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--nb-mute);margin-bottom:24px}

/* =========================================================================
   ATO II · EM CARTAZ
   ========================================================================= */
.hn-ct{position:relative;background:var(--nb-night);color:#fff;padding:116px 0 128px;overflow:hidden;isolation:isolate}
.hn-fxl{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hn-fxl i{position:absolute;display:block}
.hn-fxl-1{left:-10%;top:-20%;width:60%;height:80%;background:radial-gradient(closest-side,rgba(37,99,235,.36),transparent)}
.hn-fxl-2{right:-10%;bottom:-25%;width:55%;height:80%;background:radial-gradient(closest-side,rgba(96,165,250,.20),transparent)}
.hn-grain{position:absolute;inset:0;display:block;background:url("/assets/img/nb-grain.png");background-size:176px 176px;opacity:.075;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .hn-fxl-1{will-change:transform;animation:hn-drift 14s ease-in-out infinite alternate}
  .hn-fxl-2{will-change:transform;animation:hn-drift 18s ease-in-out -5s infinite alternate-reverse}
}
@keyframes hn-drift{to{transform:translate(8%,10%) scale(1.15)}}
.hn-hd{max-width:780px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hn-ct .nb-h2{color:#fff}
.hn-ct .nb-lead{color:#B9C6DB;max-width:56ch}

.hn-pg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:60px}
.hn-pg>.hn-po:last-child{grid-column:1/-1}
.hn-po{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:392px;border-radius:18px;padding:20px 20px 22px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.hn-po::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);transform:translateX(-120%);transition:transform .9s;pointer-events:none}
@media (hover:hover){
  .hn-po:hover{transform:translateY(-12px) rotate(-.8deg)}
  .hn-po:nth-child(even):hover{transform:translateY(-12px) rotate(.8deg)}
  .hn-po:hover::after{transform:translateX(120%)}
}
.hn-po-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;letter-spacing:.12em}
.hn-po-art{position:relative;height:88px;margin:18px 0}
.hn-po h3{font:800 20px/1.2 var(--nb-f-disp);letter-spacing:-.02em}
.hn-po-go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;height:40px;padding:0 16px;border-radius:999px;font:700 13px/1 var(--nb-f-body)}

.hn-po--zap{background:#EEF2F9;color:#0A1226;border:2px solid #0A1226;box-shadow:7px 7px 0 #1565E0}
.hn-po--zap h3 span{color:#1565E0}
.hn-po--zap .hn-po-go{background:#0A1226;color:#fff}
.hn-a-zap i{position:absolute;display:block;height:36px;border:2px solid #0A1226;border-radius:12px;box-shadow:3px 3px 0 #0A1226}
.hn-a-zap .hn-x1{left:0;top:4px;width:64%;background:#fff}
.hn-a-zap .hn-x2{right:0;bottom:2px;width:58%;background:#1565E0}

.hn-po--lgpd{background:#120B2E;color:#fff;border:1px solid rgba(198,244,50,.4)}
.hn-po--lgpd .hn-po-top{color:#C6F432}
.hn-po--lgpd h3{font:600 18px/1.3 var(--nb-f-mono);letter-spacing:-.02em}
.hn-po--lgpd h3 span{color:#C6F432}
.hn-po--lgpd .hn-po-go{background:#C6F432;color:#120B2E}
.hn-a-lgpd i{display:block;height:12px;border-radius:3px;margin-bottom:11px}
.hn-a-lgpd .hn-y1{width:82%;background:#C6F432}
.hn-a-lgpd .hn-y2{width:100%;background:#5B2EFF}
.hn-a-lgpd .hn-y3{width:54%;background:rgba(255,255,255,.28)}

.hn-po--cert{background:#0B1016;color:#fff;border:1px solid rgba(255,176,32,.45)}
.hn-po--cert .hn-po-top{color:#FFB020}
.hn-po--cert h3{text-transform:uppercase;font-size:17px;letter-spacing:.01em}
.hn-po--cert h3 span{color:#FFB020}
.hn-po--cert .hn-po-go{background:#FFB020;color:#0B1016}
.hn-a-cert{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:8px 10px}
.hn-ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#FFB020;background:repeating-radial-gradient(circle,transparent 0 5px,rgba(255,176,32,.28) 5px 6px);border:1px solid rgba(255,176,32,.5);flex:none}
.hn-tg{font-size:10.5px;font-weight:700;letter-spacing:.02em;line-height:1.2;color:#FFB020;border:1px dashed #FFB020;border-radius:8px;padding:8px 8px;white-space:nowrap}

.hn-po--site{background:#F2F0EA;color:#0E1A16;border:1px solid #DDD8CB}
.hn-po--site .hn-po-top{color:#0F6B52}
.hn-po--site h3 span{color:#0F6B52}
.hn-po--site .hn-po-go{background:#0F6B52;color:#fff}
.hn-a-site{background:#FAF9F5;border:1px solid #CFC8B6;border-radius:10px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:44px 1fr;gap:6px;padding:0 0 6px}
.hn-a-site b{grid-column:1/-1;background:#0F6B52;display:block}
.hn-a-site i{display:block;margin:0 0 0 6px;background:#fff;border:1px solid #E7E2D5;border-radius:6px}
.hn-a-site i:last-child{margin:0 6px 0 0;background:#C79A45;border-color:#C79A45}

.hn-po--ong{background:#0B1220;color:#fff;border:1px solid rgba(147,197,253,.22)}
.hn-po--ong .hn-po-top{color:#F59E0B}
.hn-po--ong h3 span{color:#F59E0B}
.hn-po--ong .hn-po-go{background:#F59E0B;color:#0B1220}
.hn-a-ong{display:flex;align-items:flex-end;gap:10px}
.hn-a-ong i{flex:1;border-radius:6px 6px 0 0;background:#3B82F6;display:block}
.hn-a-ong i:nth-child(1){height:38%}
.hn-a-ong i:nth-child(2){height:62%}
.hn-a-ong i:nth-child(3){height:50%}
.hn-a-ong i:nth-child(4){height:86%}
.hn-a-ong i:nth-child(even){background:#F59E0B}

.hn-pg-hint{display:none;align-items:center;justify-content:center;gap:8px;margin-top:2px;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--nb-nmute)}

@media (min-width:600px) and (max-width:899px){
  .hn-pg>.hn-po:last-child .hn-po-art{max-width:320px}
}
@media (min-width:900px) and (max-width:1239px){
  .hn-pg{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hn-po{grid-column:span 2}
  .hn-pg>.hn-po:nth-child(n+4){grid-column:span 3}
}
@media (min-width:1240px){
  .hn-pg{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hn-pg>.hn-po:last-child{grid-column:auto}
}
/* celular: os cartazes viram uma fileira que desliza; o próximo aparece na beirada */
@media (max-width:599px){
  .hn-pg{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:44px -24px 0;padding:8px 24px 30px;scroll-padding-inline:24px;scrollbar-width:none}
  .hn-pg::-webkit-scrollbar{display:none}
  .hn-po{flex:0 0 min(78vw,320px);scroll-snap-align:start;min-height:360px;animation:none}
  .hn-pg-hint{display:flex}
}

/* =========================================================================
   ATO III · PROCESSO
   ========================================================================= */
.hn-prc{padding:116px 0;background:var(--nb-mist)}
.hn-prc-h{max-width:18ch}
.hn-strip{position:relative;overflow:hidden;margin-top:52px;border-radius:20px;background:#05080F;padding:44px 22px;box-shadow:0 44px 70px -46px rgba(7,12,24,.7)}
.hn-strip::before,.hn-strip::after{content:"";position:absolute;left:-56px;right:0;height:10px;background:repeating-linear-gradient(90deg,#1B2438 0 14px,transparent 14px 28px);background-position:8px 0}
.hn-strip::before{top:15px}
.hn-strip::after{bottom:15px}
@media (prefers-reduced-motion:no-preference){
  .hn-strip::before,.hn-strip::after{animation:hn-holes 14s linear infinite}
}
@keyframes hn-holes{to{transform:translateX(56px)}}
.hn-fr{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.hn-fm{background:#fff;border-radius:12px;padding:24px;min-height:236px;display:flex;flex-direction:column;gap:10px;transition:transform .3s}
@media (hover:hover){.hn-fm:hover{transform:translateY(-6px)}}
.hn-fm-ic{width:50px;height:50px;border-radius:14px;background:#EFF6FF;color:var(--nb-blue);display:grid;place-items:center;margin:0 0 6px}
.hn-fm h3{font:700 20px/1.2 var(--nb-f-disp);letter-spacing:-.02em;color:var(--nb-ink)}
.hn-fm p{font-size:15px;line-height:1.6;color:var(--nb-ink2)}
@media (min-width:600px){.hn-fr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.hn-fr{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* =========================================================================
   POR QUE A NBRTECH
   ========================================================================= */
.hn-wy{padding:116px 0;background:#fff}
.hn-wy-h{max-width:20ch}
.hn-bn{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:52px}
.hn-bc{border-radius:24px;padding:32px;border:1px solid var(--nb-line);background:#fff;display:flex;flex-direction:column;gap:12px;transition:transform .3s,box-shadow .3s}
@media (hover:hover){.hn-bc:hover{transform:translateY(-4px);box-shadow:0 30px 50px -34px rgba(15,23,42,.35)}}
.hn-bc-ib{width:50px;height:50px;border-radius:14px;background:#EFF6FF;color:var(--nb-blue);display:grid;place-items:center}
.hn-bc h3{font:700 21px/1.2 var(--nb-f-disp);letter-spacing:-.02em;color:var(--nb-ink)}
.hn-bc p{font-size:15.5px;line-height:1.6;color:var(--nb-ink2)}
.hn-bc--big{position:relative;overflow:hidden;background:var(--nb-night);color:#fff;border-color:transparent;justify-content:flex-end;min-height:340px}
.hn-bc-bg{position:absolute;inset:0;background:radial-gradient(420px 300px at 90% 0%,rgba(59,130,246,.45),transparent 70%),radial-gradient(360px 280px at 0% 100%,rgba(37,99,235,.3),transparent 70%)}
.hn-bc-bg::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 9px,rgba(147,197,253,.12) 9px 10px)}
.hn-bc--big>*:not(.hn-bc-bg){position:relative}
.hn-bc-tg{font-size:11px;font-weight:600;letter-spacing:.14em;color:#93C5FD}
.hn-bc--big h3{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.1;max-width:14ch;color:#fff}
.hn-bc--big p{color:#C5D0E2;max-width:44ch}
.hn-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.hn-chip-z{font:800 14px/1 var(--nb-f-disp);color:#0A1226;background:#EEF2F9;border:2px solid #0A1226;box-shadow:3px 3px 0 #1565E0;border-radius:10px;padding:10px 14px}
.hn-chip-l{font-weight:600;font-size:13.5px;line-height:1;color:#C6F432;background:#120B2E;border:1px solid rgba(198,244,50,.5);border-radius:10px;padding:11px 14px}
@media (min-width:600px){
  .hn-bn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hn-bc--big,.hn-bc--w6{grid-column:1/-1}
}
@media (min-width:961px){
  .hn-bn{grid-template-columns:repeat(12,minmax(0,1fr))}
  .hn-bc{grid-column:span 6}
  .hn-bc--w3{grid-column:span 3}
  .hn-bc--big{grid-row:span 2;min-height:420px}
}

/* =========================================================================
   QUEM ESTÁ POR TRÁS (só aparece quando configurado em includes/nb-site.php)
   ========================================================================= */
.hn-wh{padding:116px 0;background:var(--nb-mist)}
.hn-whg{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center}
.hn-ph{aspect-ratio:4/4.4;max-width:460px;width:100%;border-radius:28px;overflow:hidden;margin:0;background:#E2E8F0;box-shadow:0 40px 60px -40px rgba(15,23,42,.45)}
.hn-ph img{width:100%;height:100%;object-fit:cover}
.hn-wh-nm{margin-top:14px;font-weight:700;font-size:18px;color:var(--nb-ink)}
.hn-wh-nm span{font-weight:500;color:var(--nb-mute)}
.hn-wh-tx{margin-top:18px;max-width:52ch}
.hn-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px;margin-top:30px}
.hn-cs{border:1px solid var(--nb-line);border-radius:18px;padding:20px;background:#fff;display:flex;flex-direction:column;gap:8px}
.hn-cs span{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--nb-blue2)}
.hn-cs p{font-size:14.5px;line-height:1.55;color:var(--nb-ink2)}
@media (min-width:900px){
  .hn-whg{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:64px}
  .hn-whg--solo{grid-template-columns:minmax(0,760px)}
}

/* =========================================================================
   ATO IV · CONVERSA
   ========================================================================= */
.hn-fn{position:relative;isolation:isolate;overflow:hidden;background:var(--nb-night);color:#fff;padding:132px 0}
.hn-fn-spot{position:absolute;left:50%;top:50%;width:1100px;height:1100px;margin:-550px 0 0 -550px;z-index:-1;background:conic-gradient(from 0deg,transparent 0 48%,rgba(59,130,246,.46) 72%,transparent 96%);-webkit-mask-image:radial-gradient(closest-side,transparent 6%,#000 34%,transparent 100%);mask-image:radial-gradient(closest-side,transparent 6%,#000 34%,transparent 100%)}
.hn-fn>.hn-grain{z-index:-1}
@media (prefers-reduced-motion:no-preference){
  .hn-fn-spot{will-change:transform;animation:hn-spin 18s linear infinite}
}
@keyframes hn-spin{to{transform:rotate(360deg)}}
.hn-fn-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.hn-fn .nb-h2{color:#fff;max-width:20ch}
.hn-fn .nb-lead{color:#C5D0E2;max-width:54ch}
.hn-fn .hn-ha{justify-content:center;margin-top:10px}
.hn-fn-ln{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;font-size:13px;letter-spacing:.06em;color:var(--nb-nmute)}
.hn-fn-ln a{padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.hn-fn-ln a:hover{color:#fff;border-color:rgba(255,255,255,.4)}

/* =========================================================================
   REVELAR AO ROLAR (reforço: onde o navegador sabe fazer sem JavaScript)
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .hn-po,.hn-fm,.hn-bc{animation:hn-vrise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @media (max-width:599px){.hn-po{animation:none}}
  }
}
@keyframes hn-vrise{from{opacity:0;translate:0 36px}}

/* =========================================================================
   TELAS PEQUENAS
   ========================================================================= */
@media (max-width:960px){
  .hn-ct,.hn-prc,.hn-wy,.hn-wh{padding:84px 0}
  .hn-fn{padding:96px 0}
}
@media (max-width:560px){
  .hn-ct,.hn-prc,.hn-wy,.hn-wh{padding:68px 0}
  .hn-fn{padding:80px 0}
  .hn-pn{grid-template-columns:24px minmax(0,1fr) 16px;padding:10px 12px}
  .hn-pn em{display:none}
  .hn-dots{display:none}
  .hn-bar{font-size:10px;letter-spacing:.06em;gap:10px}
  .hn-film{padding:22px 16px}
  .hn-cap{padding:18px 16px 24px}
  .hn-cap-t{font-size:22px}
  .hn-ha .nb-bt{width:100%}
  .hn-strip{padding:40px 12px}
  .hn-fm{min-height:0}
  .hn-bc{padding:26px}
  .hn-chip-z,.hn-chip-l{font-size:13px}
}

/* =========================================================================
   MENOS MOVIMENTO / IMPRESSÃO
   ========================================================================= */
@media print{
  .hn-curtain{display:none!important}
  .hn *{animation:none!important}
}