/* Banner da Black do UN nos linktrees (08/10/2026). Os pedidos, na ordem: "preciso por um banner da black em cada
   linktree"; "deve estar chamando mais atenção que o resto mas deve se encontrar nas identidades visuais"; "traz o céu
   estrelado da página da black pra todos"; "deixa a versão da logo que é só o mundinho com contorno"; e o título por
   extenso, "Black do UN: vai ter Vitalícia, GFE e mais!".
   Por isso três camadas. O CÉU é o da Black nos cinco: o degradê navy indo pro violeta e as mesmas duas peças de
   estrelas do hero-black.css, com o mundinho-adesivo da logo (criativos-black/assets/mundinho.png). A ESTRUTURA é uma
   só: mundinho, data, título, contador e botão. E a PELE (borda, letra, grifo e botão) é a de cada linktree, com os
   tokens da própria página (--menta, --acc, --ouro, --d…): é ela que faz o banner pertencer à página, e o céu escuro é
   o que faz ele mandar nela.
   Ele todo é o link, para a /black do lps (o A/B a/b acontece lá). O contador está no banner-links.js.
   Família de fonte própria, como no hero-black.css: um Museo 900 solto mudaria a letra de quem não o declara (314).
   Tirar depois da Black = apagar o <a class="bl"> e as linhas deste arquivo e do banner-links.js em cada linktree. */
@font-face{font-family:"Museo BL";src:url("/produtos/_comum/fontes/Museo500-Regular.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Museo BL";src:url("/produtos/_comum/fontes/Museo900-Regular.woff2") format("woff2");font-weight:900;font-display:swap}

/* ══ estrutura ═════════════════════════════════════════════════════════════ */
.bl{position:relative;display:block;margin:0 0 16px;padding:18px 18px 16px;text-decoration:none;text-align:left;
  font:500 14px/1.4 "Museo BL",ui-rounded,system-ui,sans-serif;letter-spacing:normal;-webkit-font-smoothing:antialiased;
  color:#F5F4F0;background:linear-gradient(170deg,#02141F 0%,#06203F 36%,#0A2A55 60%,#2B1B6E 86%,#3A1A7A 100%);
  transition:transform .18s,box-shadow .18s}
.bl *,.bl *::before,.bl *::after{box-sizing:border-box}
.bl > *{position:relative;z-index:1}
/* as estrelas da Black B, as mesmas duas peças do hero-black.css. Lá elas somem atrás do texto; aqui o texto ocupa o
   cartão quase todo, então elas ficam inteiras à direita e só esmaecem à esquerda, onde começa a leitura. */
.bl > .bl-ceu{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22560%22 height=%22500%22%3E%3Ccircle cx=%22253.3%22 cy=%22279.9%22 r=%221%22 fill=%22%23fff%22 opacity=%220.62%22/%3E%3Ccircle cx=%22478.8%22 cy=%2295.0%22 r=%221%22 fill=%22%23fff%22 opacity=%220.73%22/%3E%3Ccircle cx=%22444.1%22 cy=%2247.1%22 r=%220.6%22 fill=%22%23fff%22 opacity=%220.67%22/%3E%3Ccircle cx=%22498.6%22 cy=%22317.2%22 r=%221%22 fill=%22%23fff%22 opacity=%220.93%22/%3E%3Ccircle cx=%22366.2%22 cy=%22307.8%22 r=%220.6%22 fill=%22%2318F0FF%22 opacity=%220.85%22/%3E%3Ccircle cx=%2235.4%22 cy=%2217.8%22 r=%221.2%22 fill=%22%23fff%22 opacity=%220.37%22/%3E%3Ccircle cx=%22259.8%22 cy=%22220.3%22 r=%221.2%22 fill=%22%23fff%22 opacity=%220.49%22/%3E%3Ccircle cx=%22164.7%22 cy=%222.3%22 r=%221.5%22 fill=%22%2318F0FF%22 opacity=%220.52%22/%3E%3Ccircle cx=%22558.7%22 cy=%22497.8%22 r=%221.5%22 fill=%22%23fff%22 opacity=%220.50%22/%3E%3Ccircle cx=%22424.5%22 cy=%22256.4%22 r=%221.2%22 fill=%22%2318F0FF%22 opacity=%220.81%22/%3E%3Ccircle cx=%22224.2%22 cy=%22423.3%22 r=%220.6%22 fill=%22%23fff%22 opacity=%220.86%22/%3E%3Ccircle cx=%220.3%22 cy=%22104.9%22 r=%221%22 fill=%22%23fff%22 opacity=%220.58%22/%3E%3Ccircle cx=%22397.0%22 cy=%22209.9%22 r=%220.7%22 fill=%22%23fff%22 opacity=%220.82%22/%3E%3Ccircle cx=%22151.1%22 cy=%2243.6%22 r=%221%22 fill=%22%23fff%22 opacity=%220.80%22/%3E%3Ccircle cx=%2266.1%22 cy=%22123.2%22 r=%220.6%22 fill=%22%2318F0FF%22 opacity=%220.63%22/%3E%3Cpath d=%22M273.0 330.9Q273.0 335.9 278.0 335.9Q273.0 335.9 273.0 340.9Q273.0 335.9 268.0 335.9Q273.0 335.9 273.0 330.9Z%22 fill=%22%23fff%22/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22380%22 height=%22340%22%3E%3Ccircle cx=%22208.3%22 cy=%22117.6%22 r=%220.8%22 fill=%22%23fff%22 opacity=%220.40%22/%3E%3Ccircle cx=%22352.4%22 cy=%22133.6%22 r=%220.6%22 fill=%22%2318F0FF%22 opacity=%220.41%22/%3E%3Ccircle cx=%22169.0%22 cy=%2276.4%22 r=%221%22 fill=%22%23fff%22 opacity=%220.55%22/%3E%3Ccircle cx=%22231.0%22 cy=%22142.7%22 r=%221%22 fill=%22%23fff%22 opacity=%220.94%22/%3E%3Ccircle cx=%2283.4%22 cy=%22266.6%22 r=%221.5%22 fill=%22%23fff%22 opacity=%220.69%22/%3E%3Ccircle cx=%2274.6%22 cy=%22229.1%22 r=%221.2%22 fill=%22%23fff%22 opacity=%220.80%22/%3E%3Ccircle cx=%22311.1%22 cy=%22325.9%22 r=%220.7%22 fill=%22%23fff%22 opacity=%220.80%22/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,#000 62%);mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,#000 62%)}
.bl:hover{transform:translateY(-2px)}

/* o mundinho é adesivo (contorno branco e navy): pequeno e um pouco torto, dentro do cartão no canto de cima à
   direita. Grande e na linha da data ele disputava com o título; vazando a borda, sobrava. */
.bl > .bl-logo{position:absolute;z-index:2;top:13px;right:14px;display:block;width:auto;max-width:none;height:34px;
  transform:rotate(7deg);pointer-events:none}
.bl-topo{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.bl-data{flex:0 0 auto;padding:5px 10px;border:1px solid;border-radius:999px;
  font-size:11px;font-weight:900;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

.bl-titulo{display:block;margin:0;font-weight:900;font-size:clamp(20px,5.6vw,25px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.bl-titulo em{font-style:normal}
.bl-lead{display:block;margin:8px 0 0;font-size:13.5px;max-width:44ch}

.bl-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.bl-falta{min-width:0;font-size:11.5px}
.bl-falta b{display:block;white-space:nowrap;font-weight:900;font-size:15px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.bl-btn{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;
  font-weight:900;font-size:13px;line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:transform .14s,box-shadow .14s,filter .16s,background-color .16s}
.bl-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:380px){
  .bl{padding:16px 14px 14px}
  .bl > .bl-logo{top:12px;right:11px;height:30px}
  .bl-falta b{font-size:13.5px}
  .bl-btn{padding:0 12px;font-size:12px;letter-spacing:.03em}
  .bl-btn svg{display:none}
}

/* ══ pele creme: /links e /links/admins ═══════════════════════════════════
   O sistema é fio preto, creme, grifo de menta e confete pastel. Ali todo banner é claro e colorido; o único campo
   ESCURO da página é este céu, e é isso que o faz mandar. O grifo de menta vai atrás de
   "Vitalícia" igual ao "mais inteligente" da manchete, o confete (hexágono e arco, nunca bolinha) prende dois cantos,
   e o botão é o adesivo do pe__mail com a sombra dura virada para o claro, que no preto é o que aparece. */
.bl--creme{margin:8px 0 20px;border-radius:16px;color:#fff}
.bl--creme::before,.bl--creme::after{content:"";position:absolute;z-index:2;pointer-events:none;background:no-repeat center/contain}
.bl--creme::before{top:-9px;left:-7px;width:22px;height:26px;transform:rotate(-12deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 1l10 6v14l-10 6-10-6V7l10-6Z' fill='%23ffee80' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E")}
.bl--creme::after{right:-8px;bottom:-10px;width:30px;height:30px;transform:rotate(180deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M3 25C3 12 12 3 25 3' stroke='%23ff80a8' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.bl--creme .bl-data{border-color:rgba(255,255,255,.4);color:#fff}
.bl--creme .bl-titulo em{position:relative;z-index:0;display:inline-block;margin:0 .14em 0 .08em;color:#000}
.bl--creme .bl-titulo em::before{content:"";position:absolute;z-index:-1;left:-5px;right:-5px;top:-.02em;bottom:-.08em;
  background:var(--menta,#86f8da);border-radius:2px}
.bl--creme .bl-lead{color:rgba(255,255,255,.74)}
.bl--creme .bl-falta{color:rgba(255,255,255,.6)}
.bl--creme .bl-falta b{color:#fff}
.bl--creme .bl-btn{border-radius:9999px;background:var(--menta,#86f8da);color:#000;box-shadow:3px 3px 0 #fff}
.bl--creme:hover{transform:none}
.bl--creme:hover .bl-btn{transform:translate(2px,2px);box-shadow:1px 1px 0 #fff}
.bl--creme:focus-visible{outline:3px solid var(--expressao,#6a00ff);outline-offset:3px}

/* ══ pele militares ════════════════════════════════════════════════════════
   O herói do Combo usa borda oliva TRANSLÚCIDA e os banners, fio a 34%. Aqui a borda é o oliva cheio em volta do
   céu: é o mesmo vocabulário um degrau acima. A pílula é a .heroi__r, a palavra leva a
   pincelada da "farda" (.marca, --marca-img) e o botão é o degradê da .cta, com a sombra no próprio acento. */
.bl--militares{margin:0 0 22px;border:1.5px solid var(--acc);border-radius:14px;color:var(--tinta);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  /* o céu da Black no tom da página: o navy vira o verde-noite da base e o violeta do pé vira oliva */
  background:linear-gradient(170deg,#0A100D 0%,#121A15 36%,#1A251B 60%,#2A3720 86%,#36441F 100%)}
/* as estrelas ciano da Black, viradas para o oliva; as brancas continuam brancas */
.bl--militares > .bl-ceu{filter:hue-rotate(-118deg) saturate(.75)}
.bl--militares .bl-data{color:var(--acc-soft);background:rgba(var(--acc-rgb),.12);border-color:rgba(var(--acc-rgb),.5)}
.bl--militares .bl-titulo em{background-image:var(--marca-img);background-repeat:no-repeat;background-size:100% 1.06em;
  background-position:0 .18em;padding:0 .14em}
.bl--militares .bl-lead,.bl--militares .bl-falta{color:var(--suave)}
.bl--militares .bl-falta b{color:var(--tinta)}
/* o Combo logo abaixo tem o botão cheio de ponta a ponta (.cta); com o botão menor a Black perdia para ele */
.bl--militares .bl-pe{flex-direction:column;align-items:stretch;gap:10px}
.bl--militares .bl-falta{text-align:center}
.bl--militares .bl-falta b{display:inline;margin-left:4px}
.bl--militares .bl-btn{justify-content:center;margin:0;height:52px;font-size:14px;letter-spacing:.05em;border-radius:8px;background:linear-gradient(90deg,var(--acc2) 0%,var(--acc) 100%);color:#0d1512;
  box-shadow:0 14px 34px rgba(var(--acc-rgb),.22)}
.bl--militares:hover .bl-btn{box-shadow:0 20px 46px rgba(var(--acc-rgb),.3);filter:saturate(1.08)}
.bl--militares:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ══ pele superiores ═══════════════════════════════════════════════════════
   Preto e ouro: os banners têm fio de ouro a 30% e "campo cheio fica só no botão". O banner fica com o fio de ouro
   CHEIO em volta do céu, "Vitalícia" em ouro como o "faculdade" da manchete (.realce) e o botão do pe__mail. */
.bl--superiores{border:1.5px solid var(--ouro);border-radius:12px;color:var(--tinta);
  /* o céu da Black no tom da página: o navy vira o preto dela e o violeta do pé vira um bronze escuro do ouro */
  background:linear-gradient(170deg,#050505 0%,#0C0B09 38%,#16130C 62%,#261F0F 86%,#30270F 100%)}
/* as estrelas ciano da Black, viradas para o ouro; as brancas continuam brancas */
.bl--superiores > .bl-ceu{filter:hue-rotate(-140deg) saturate(.8)}
.bl--superiores .bl-data{color:var(--ouro-claro);background:rgba(var(--ouro-rgb),.1);border-color:var(--linha)}
.bl--superiores .bl-titulo em{color:var(--ouro)}
.bl--superiores .bl-lead,.bl--superiores .bl-falta{color:var(--suave)}
.bl--superiores .bl-falta b{color:var(--tinta)}
.bl--superiores .bl-btn{border-radius:8px;background:linear-gradient(135deg,var(--ouro) 0%,var(--ouro-claro) 100%);color:var(--preto);
  box-shadow:0 12px 30px rgba(var(--ouro-rgb),.22)}
.bl--superiores:hover .bl-btn{box-shadow:0 18px 40px rgba(var(--ouro-rgb),.3)}
.bl--superiores:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

/* ══ pele 314 ══════════════════════════════════════════════════════════════
   A assinatura da editora é a moldura dupla (fio forte na borda, fio fino a 4px por dentro), o canto reto, Cinzel e
   Lora, o filete com losango e o botão VAZADO de fio duplo. Aqui a moldura sobe para o ouro cheio em volta do céu
   (que é navy, o mesmo campo da editora, só que estrelado), o texto centraliza
   como nos cartões, o filete separa título e texto, e o botão é o único CHEIO da página. */
.bl--314{margin:0 0 clamp(12px,2.2vw,16px);padding:24px clamp(18px,4vw,34px) 22px;border-radius:0;text-align:center;
  color:var(--text);font-family:var(--p)}
.bl--314::after{content:"";position:absolute;inset:0;border:1px solid var(--ouro);pointer-events:none}
.bl--314::before{content:"";position:absolute;inset:4px;border:1px solid var(--line);pointer-events:none}
.bl--314 .bl-topo{justify-content:center;margin-bottom:14px}
.bl--314 .bl-data{border-radius:0;border-color:var(--line);color:var(--ouro-claro);font-family:var(--d);font-weight:600;letter-spacing:.14em}
.bl--314 .bl-titulo{font-family:var(--d);font-weight:600;font-size:clamp(1.2rem,4.4vw,1.8rem);line-height:1.2;letter-spacing:0;max-width:24ch;margin-inline:auto}
.bl--314 .bl-titulo em{font-style:italic;color:var(--ouro-claro)}
.bl--314 .bl-titulo::after{content:"";display:block;width:min(82%,280px);height:8px;margin:14px auto 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='8' preserveAspectRatio='none'%3E%3Cpath d='M0 4H128M152 4H280' stroke='%23B8873B' stroke-opacity='.55'/%3E%3Cpath d='M140 0l4 4-4 4-4-4Z' fill='%23B8873B'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.bl--314 .bl-lead{margin:12px auto 0;max-width:40ch;font-size:.94rem;line-height:1.55;color:var(--text-2)}
.bl--314 .bl-pe{flex-direction:column;justify-content:center;gap:12px;margin-top:18px}
.bl--314 .bl-falta{color:var(--text-3);font-size:.82rem;text-align:center}
.bl--314 .bl-falta b{font-family:var(--d);font-weight:600;font-size:1.05rem;letter-spacing:.04em;color:var(--text)}
.bl--314 .bl-btn{position:relative;margin:0;height:46px;padding:0 24px;border-radius:0;background:var(--ouro);color:var(--bg);
  font-family:var(--d);font-weight:700;font-size:.9rem;letter-spacing:.12em}
.bl--314 .bl-btn::before{content:"";position:absolute;inset:3px;border:1px solid rgba(10,29,61,.38);pointer-events:none}
.bl--314:hover{transform:none}
.bl--314:hover .bl-btn{background:var(--ouro-claro)}
.bl--314:focus-visible{outline:2px solid var(--ouro);outline-offset:-2px}

@media (prefers-reduced-motion:reduce){.bl,.bl-btn{transition:none}}