:root{ --fundo:#061311; --caixa:#0c2a23; --verde:#008000; --neon:#3ef07f; --neon-rgb:62,240,127; --pill:999px; --larg:1180px }
*{box-sizing:border-box}
html,body{margin:0;max-width:100%;overflow-x:hidden}
body{background:#f6f6f6;color:#003038;font-family:"Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}

.bn{position:relative;overflow:hidden;background:var(--fundo);color:#fff}
.bn::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 46% at 86% 14%,rgba(var(--neon-rgb),.10),transparent 70%),
    radial-gradient(90% 80% at 50% 120%,rgba(0,70,52,.30),transparent 72%),
    linear-gradient(180deg,#071612,#030b09)}
/* papel milimetrado, bem apagado */
.bn::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.15;
  background-image:linear-gradient(rgba(var(--neon-rgb),.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(var(--neon-rgb),.5) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000 25%,transparent 78%);
          mask-image:radial-gradient(80% 70% at 50% 50%,#000 25%,transparent 78%)}
/* a onda do cardiograma, com o pulso correndo nela */
.bn__ecg{position:absolute;left:0;right:0;height:min(40vh,290px);transform:translateY(-50%);
  z-index:0;pointer-events:none;opacity:.85;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.bn__ecg svg{width:100%;height:100%;display:block;overflow:visible}
.bn__ecg path{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ecg-base{stroke:rgba(var(--neon-rgb),.22);stroke-width:1.5}
.ecg-pulso{stroke:#b6ffd6;stroke-width:2.6;
  filter:drop-shadow(0 0 5px rgba(var(--neon-rgb),1)) drop-shadow(0 0 16px rgba(var(--neon-rgb),.75));
  stroke-dasharray:260 3000;stroke-dashoffset:260;animation:batida 4.6s linear infinite}
@keyframes batida{to{stroke-dashoffset:-3000}}
@keyframes batida-volta{from{stroke-dashoffset:-3000}to{stroke-dashoffset:260}}
/* duas ondas, as duas correndo da esquerda para a direita */
.bn__ecg--alta{top:var(--ecg-alta,24%)}
.bn__ecg--alta .ecg-pulso{animation:batida 5.2s linear infinite}
.bn__ecg--baixa{top:var(--ecg-baixa,88%);opacity:.55}
.bn__ecg--baixa .ecg-pulso{animation:batida-volta 7.1s linear infinite;animation-delay:-2.4s}
.bn__ecg--baixa .ecg-base{stroke:rgba(var(--neon-rgb),.16)}

/* ===== MOBILE PRIMEIRO: imagem em cima, texto embaixo ===== */
.bn__wrap{position:relative;z-index:1;width:100%;max-width:var(--larg);margin:0 auto;padding:20px 16px 26px;
  display:flex;flex-direction:column}

.bn__palco{order:-1;position:relative;width:100%;max-width:min(58vw,250px);margin:0 0 16px;align-self:flex-start}
.bn__fig{position:relative;width:100%;aspect-ratio:1/1}
.bn__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  visibility:hidden;opacity:0}
.bn__fig img.vendo{visibility:visible;opacity:1}

/* o neon corre em volta da pessoa: a sombra colorida da propria silhueta,
   deslocada em circulo. Nada por tras dela, entao nao vaza pelo cabelo. */
/* o contorno e uma imagem separada: so a casca de fora da silhueta.
   Assim o neon nunca aparece por dentro do cabelo. */
.bn__rim{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:rgba(var(--neon-rgb),.18)}
.bn[data-fase="1"] .r1,.bn[data-fase="2"] .r2,.bn[data-fase="3"] .r3,.bn[data-fase="4"] .r4{opacity:1}
/* um estouro de luz marca a troca, no lugar do cross-fade */
.bn__fig[data-flash="1"] .bn__rim{animation:estouro .42s ease-out}
@keyframes estouro{
  0%  {background:rgba(var(--neon-rgb),1);filter:drop-shadow(0 0 16px rgba(var(--neon-rgb),1))}
  100%{background:rgba(var(--neon-rgb),.18);filter:none}
}
.bn__rim i{position:absolute;inset:-60%;display:block;
  background:conic-gradient(from 0deg,transparent 0deg,var(--neon) 32deg,#d9fff0 52deg,var(--neon) 72deg,transparent 108deg,transparent 360deg);
  animation:gira var(--dur,2600ms) linear infinite;
  filter:drop-shadow(0 0 6px rgba(var(--neon-rgb),.9))}
@keyframes gira{to{transform:rotate(360deg)}}
.bn__fig img{z-index:1}

/* a caixa cobre o corte seco embaixo da pessoa */
.bn__caixa{position:relative;z-index:3;margin:-34px 0 0;padding:0}
.bn__cta{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  text-decoration:none;color:#fff;border-radius:16px;padding:14px 14px 14px 18px;
  background:linear-gradient(145deg,#108a52,#0a5f39);
  box-shadow:inset 0 0 0 1px rgba(var(--neon-rgb),.4),0 14px 38px rgba(0,0,0,.5),0 0 0 6px rgba(6,19,17,.9);
  transition:transform .18s ease,box-shadow .25s ease}
.bn__cta:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(var(--neon-rgb),.8),0 18px 46px rgba(var(--neon-rgb),.22),0 0 0 6px rgba(6,19,17,.9)}
.bn__cta__txt{display:block;min-width:0}
.bn__cta__txt strong{display:block;font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.bn__cta__txt em{display:block;margin:5px 0 0;font-style:normal;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.88)}
.bn__cta__txt em b{font-weight:800;color:#fff}
.bn__cta__txt u{display:block;margin:7px 0 0;text-decoration:none;
  font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--neon)}
.bn__cta__seta{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#fff;color:#0a5f39;
  display:flex;align-items:center;justify-content:center;font-size:18px;font-style:normal;font-weight:700}
.bn__quem{margin:10px 0 12px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  text-align:left;padding-left:10px;border-left:2px solid var(--neon)}
.bn__quem b{font-size:15px;font-weight:800;line-height:1.15}
.bn__quem span{display:block;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;text-transform:uppercase;color:var(--neon)}

.bn__eta{display:flex;align-items:baseline;gap:8px;
  font:700 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.bn__eta u{text-decoration:none;color:var(--neon);font-size:11px}
.bn__fTit{margin:8px 0 0;font-size:17px;line-height:1.25;font-weight:800;letter-spacing:-.015em}
.bn__fSub{display:block;margin:5px 0 0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.64)}
.bn__fTit,.bn__fSub{transition:opacity .2s ease,transform .2s ease}

@keyframes enche{from{transform:scaleX(0)}to{transform:scaleX(1)}}


.bn__chapeu{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--neon);border:1px solid rgba(var(--neon-rgb),.32);border-radius:var(--pill);
  padding:6px 11px;background:rgba(var(--neon-rgb),.07)}
.bn__chapeu i{width:5px;height:5px;border-radius:50%;background:var(--neon);box-shadow:0 0 9px rgba(var(--neon-rgb),.9);animation:pulsa 1.9s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}

.bn__h1{margin:12px 0 0;font-weight:800;letter-spacing:-.034em;font-size:clamp(27px,7.6vw,35px);line-height:1.02}
.bn__h2{font-size:clamp(27px,7.6vw,35px)}
.bn__h1 b{color:var(--neon);font-weight:800}
.bn__h2{margin:14px 0 0;line-height:1.02;font-weight:800;letter-spacing:-.034em;color:#fff}
.bn__h2 b{color:var(--neon);font-weight:800}
.bn__h2 mark{background:var(--verde);color:#fff;font-weight:800;
  padding:.04em .28em .12em;border-radius:.16em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.bn__sub{margin:11px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.62)}

.bn__ctas{display:flex;flex-direction:column;gap:9px;margin:18px 0 0}
.bn__btn{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border-radius:var(--pill);
  padding:15px 22px;font-weight:700;font-size:15.5px;transition:transform .18s ease,box-shadow .25s ease}
.bn__btn--1{background:var(--neon);color:#04231a;box-shadow:0 8px 28px rgba(var(--neon-rgb),.26)}
.bn__btn--1:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(var(--neon-rgb),.42)}
.bn__btn--2{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.bn__btn--2:hover{box-shadow:inset 0 0 0 1px rgba(var(--neon-rgb),.6);color:var(--neon)}

.bn__nota{margin:16px 0 0;text-align:center;font:500 9.5px/1.45 system-ui,sans-serif;color:rgba(255,255,255,.26)}

/* ===== DESKTOP ===== */
@media (min-width:860px){
  .bn__wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;
    padding:clamp(36px,4.4vw,56px) 16px clamp(26px,3vw,38px);min-height:clamp(440px,54vh,580px)}
  .bn__wrap{position:relative;grid-template-rows:auto auto;align-items:end}
  .bn__palco{order:0;position:relative;max-width:412px;margin:0;grid-column:1;grid-row:1 / span 2;align-self:center}
  .bn__texto{grid-column:2;grid-row:1;align-self:end}
  .bn__base{grid-column:2;grid-row:2}
  .bn__quem{position:absolute;left:344px;top:22%;margin:0;width:max-content;max-width:235px;
    padding-left:11px}
  .bn__texto{min-width:0}
  .bn__caixa{margin:-32px 0 0}
  .bn__eta{font-size:10px} .bn__eta u{font-size:12px}
  .bn__fTit{font-size:20px;margin:9px 0 0}
  .bn__fSub{font-size:13.5px}
  .bn__quem b{font-size:19px;line-height:1.15}
  .bn__quem span{font-size:10.5px}
  .bn__btn--bloco{width:100%}
  /* o selo sai de cima do cardiograma e vai para o lado, sobre a coluna da foto */
  .bn__chapeu{position:absolute;left:0;top:2px;z-index:4;font-size:11px;padding:7px 13px;
    background:rgba(6,19,17,.86);backdrop-filter:blur(3px);
    border-color:rgba(var(--neon-rgb),.45)}
  .bn__h1{font-size:clamp(42px,4.6vw,58px);margin:16px 0 0;line-height:1.02;
    transform:translate(38px,72px)}
  .bn__h2{font-size:clamp(20px,2.2vw,29px);margin:18px 0 0;max-width:38ch;line-height:1.14;
    transform:translate(38px,72px)}
  .bn__sub{font-size:15.5px;max-width:42ch;margin:12px 0 0}
  .bn__ctas{flex-direction:row;flex-wrap:wrap;margin:26px 0 0}
  .bn__btn{padding:14px 25px}
  .bn__nota{text-align:left;margin:18px 0 0;max-width:52ch}
}
@media (max-width:859px){
  /* celular: frase grande colada no menu, aluno centralizado e grande,
     nome e aprovacao no alto, do lado direito. Sem vazio em cima. */
  .bn{min-height:0;display:block;padding-top:0;--ecg-alta:40%;--ecg-baixa:72%}
  .bn__ecg{height:min(26vh,180px)}
  .bn__ecg--alta{display:block;opacity:.72}
  .bn__ecg--baixa{opacity:.5}
  .bn__wrap{display:grid;grid-template-columns:1fr;justify-content:center;
    align-items:center;padding:2px 12px 14px}
  .bn__texto{display:contents}
  .bn__chapeu{display:none}
  .bn__palco{grid-column:1 / -1;grid-row:4;justify-self:center;position:relative;
    width:min(84vw,330px);max-width:none;margin:0}
  /* no celular nao sobra largura ao lado da foto grande: o nome fica
     logo acima dela, nunca por cima do rosto */
  .bn__quem{grid-column:1 / -1;grid-row:3;justify-self:center;align-self:center;
    width:max-content;max-width:92vw;margin:0 0 12px;padding-left:11px;
    transform:none;position:relative;z-index:5}
  .bn__quem b{font-size:15px;line-height:1.2}
  .bn__quem span{font-size:9.5px;line-height:1.55;letter-spacing:.05em}
  .bn__h1{grid-column:1 / -1;grid-row:1;font-size:clamp(32px,10.2vw,44px);margin:0;
    letter-spacing:-.036em;line-height:1.02;text-align:center}
  .bn__h2{grid-column:1 / -1;grid-row:2;font-size:clamp(23px,7.1vw,31px);margin:14px 0 14px;
    line-height:1.2;letter-spacing:-.024em;text-align:center}
  .bn__caixa{margin:-22px 0 0}
  .bn__cta{padding:15px 14px 15px 18px;border-radius:16px;gap:10px;
    box-shadow:inset 0 0 0 1px rgba(var(--neon-rgb),.45),0 12px 30px rgba(0,0,0,.5),0 0 0 5px rgba(6,19,17,.9)}
  .bn__cta__txt strong{font-size:19px;font-weight:800;line-height:1.12}
  .bn__cta__txt em{font-size:15px;font-weight:800;margin:6px 0 0;color:#fff}
  .bn__cta__txt u{font-size:12.5px;font-weight:800;margin:8px 0 0;letter-spacing:.08em}
  .bn__cta__seta{width:42px;height:42px;font-size:19px;font-weight:800}
}
@media (prefers-reduced-motion:reduce){
  .bn__chapeu i,.bn__rim i,.ecg-pulso{animation:none}
  .bn__rim{background:rgba(var(--neon-rgb),.85)}
  .bn__rim i{display:none}
  }