/* Vitrine (vitrine_functions.php) — links visuais pros outros sites do
   dono. Nomes neutros de propósito (nx-*): nada de "ad"/"banner"/"sponsor",
   que bloqueadores escondem. Usado nos artigos (style.css do site) e nas
   páginas de vídeo (tube_style.css) — por isso cores próprias aqui. */
.nx-shelf { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: flex-start; margin: 20px 0; }
.nx-shelf.nx-at-side { flex-direction: column; align-items: center; margin: 0 0 18px; }
.nx-tile { display: block; max-width: 100%; text-decoration: none; color: inherit; border-radius: 10px; overflow: hidden; flex: none; }
.nx-tile.nx-wide { flex: 1 1 100%; }
.nx-media { display: block; width: 100%; background: #111118; }
.nx-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nx-wide .nx-media img { height: auto; }
.nx-tile:hover .nx-media img { filter: brightness(1.08); }
.nx-card { background: #16161d; border: 1px solid rgba(255,255,255,.1); }
.nx-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.nx-cap { color: #9a9aad; font-size: 12px; }
.nx-cap-under { display: block; padding: 4px 2px 0; text-align: left; }
.nx-go { flex: none; background: #e62950; color: #fff; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 8px; }
.nx-card:hover .nx-go { filter: brightness(1.1); }
.nx-native { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: inherit; width: 100%; max-width: 560px; }
.nx-shelf .nx-native { background: #16161d; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 8px; }
.nx-thumb { flex: none; width: 140px; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #111118; }
.nx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nx-text strong { font-size: 14px; line-height: 1.3; color: #f2f2f6; }
.nx-text span { font-size: 12px; color: #a8a8b8; line-height: 1.35; }
.nx-text em { font-style: normal; font-size: 11px; color: #7a7a8a; }
.nx-native:hover strong { text-decoration: underline; }
.nx-inline { display: block; }

/* Artigo com coluna lateral (só quando há itens na posição "lateral"). */
.nx-with-side { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.nx-with-side > .entity-detail { margin: 0; max-width: none; min-width: 0; }
.nx-side-col { position: sticky; top: 16px; padding-top: 16px; }
.nx-more { margin-top: 28px; }
.nx-more h2 { font-size: 18px; margin: 0 0 12px; }
.nx-more-list { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 900px) {
  .nx-with-side { grid-template-columns: 1fr; }
  .nx-side-col { position: static; padding: 0 20px 24px; }
}
@media (max-width: 520px) {
  .nx-thumb { width: 110px; }
}
.nx-li { list-style: none; margin: 8px 0; }

/* Item no meio do feed em mosaico: ocupa a largura da coluna, como um card. */
.nx-feed-slot { break-inside: avoid; margin: 0 0 14px; }
.nx-feed-slot .nx-tile { width: 100% !important; }
.nx-feed-slot .nx-native { flex-direction: column; max-width: none; background: #17171f; border: 1px solid #2c2c38; border-radius: 10px; padding: 0 0 10px; overflow: hidden; }
.nx-feed-slot .nx-thumb { width: 100%; border-radius: 0; }
.nx-feed-slot .nx-text { padding: 0 10px; }
.nx-feed-slot .nx-foot { flex-wrap: wrap; }
/* Item da Vitrine com vídeo em loop: mesmo enquadramento da imagem. */
.nx-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.nx-wide .nx-media video { height: auto; }
.nx-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Estilo "Banner" (vitrineHeroHtml / admin vitrine.js heroHtml) ----------
   Textos de verdade por cima da imagem/vídeo. O tamanho de tudo vem da unidade
   --u (do tamanho do próprio banner, container query), por isso o mesmo desenho
   serve em 728×90, 300×250 ou 160×600. Fontes em /fonts/ (OFL, ver
   fonts/licenses/) — o navegador só baixa a que estiver em uso. */
@font-face { font-family: 'NxAnton'; src: url(fonts/anton-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'NxBebas'; src: url(fonts/bebasneue-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'NxOswald'; src: url(fonts/oswald-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'NxPoppins'; font-weight: 400; src: url(fonts/poppins-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'NxPoppins'; font-weight: 700; src: url(fonts/poppins-700.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'NxMontserrat'; src: url(fonts/montserrat-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'NxAbril'; src: url(fonts/abrilfatface-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'NxPlayfair'; src: url(fonts/playfairdisplay-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'NxCinzel'; src: url(fonts/cinzel-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'NxLobster'; src: url(fonts/lobster-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'NxPacifico'; src: url(fonts/pacifico-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'NxDancing'; src: url(fonts/dancingscript-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'NxGreatVibes'; src: url(fonts/greatvibes-400.woff2) format('woff2'); font-display: swap; }

.nx-hero-box { position: relative; overflow: hidden; container-type: size; }
.nx-hero-box > img, .nx-hero-box > video, .nx-wide .nx-hero-box > img, .nx-wide .nx-hero-box > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nx-ip-top > img, .nx-ip-top > video { object-position: center top; }
.nx-ip-bottom > img, .nx-ip-bottom > video { object-position: center bottom; }
.nx-ip-left > img, .nx-ip-left > video { object-position: left center; }
.nx-ip-right > img, .nx-ip-right > video { object-position: right center; }
.nx-hero-shade { position: absolute; inset: 0; pointer-events: none; }
.nx-hero-shade.nx-al-left { background: linear-gradient(90deg, rgba(var(--sh), var(--sa)) 0%, rgba(var(--sh), calc(var(--sa) * .55)) 45%, rgba(var(--sh), 0) 85%); }
.nx-hero-shade.nx-al-right { background: linear-gradient(270deg, rgba(var(--sh), var(--sa)) 0%, rgba(var(--sh), calc(var(--sa) * .55)) 45%, rgba(var(--sh), 0) 85%); }
.nx-hero-shade.nx-al-center { background: rgba(var(--sh), calc(var(--sa) * .7)); }
.nx-hero-txt {
  --u: 2px; --u: min(1cqw, 2.4cqh);
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  transform: translate(calc(var(--x) * -1%), calc(var(--y) * -1%));
  display: flex; gap: calc(var(--u) * 3); max-width: 92%; max-height: 94%;
  line-height: 1.1; color: #fff; text-align: left;
}
.nx-hero-txt.nx-row { flex-direction: row; align-items: center; }
.nx-hero-txt.nx-stack { flex-direction: column; align-items: flex-start; }
.nx-hero-copy, .nx-hero-acts { display: flex; flex-direction: column; align-items: inherit; gap: calc(var(--u) * 1.4); min-width: 0; }
.nx-row .nx-hero-copy { align-items: flex-start; }
.nx-row .nx-hero-acts { flex-direction: row; align-items: center; flex: none; }
.nx-stack .nx-hero-acts { flex-direction: row; flex-wrap: wrap; align-items: center; }
.nx-hero-txt.nx-al-center { text-align: center; }
.nx-hero-txt.nx-al-center.nx-stack, .nx-al-center .nx-hero-copy { align-items: center; }
.nx-al-center.nx-stack .nx-hero-acts { justify-content: center; }
.nx-hero-txt.nx-al-right { text-align: right; }
.nx-hero-txt.nx-al-right.nx-stack, .nx-al-right .nx-hero-copy { align-items: flex-end; }
.nx-al-right.nx-stack .nx-hero-acts { justify-content: flex-end; }
.nx-al-right.nx-row { flex-direction: row-reverse; }
.nx-hero-title, .nx-hero-sub, .nx-hero-tag, .nx-hero-btn { display: block; font-size: calc(var(--k) * 2px); font-size: max(7px, calc(var(--k) * var(--u))); overflow-wrap: anywhere; }
.nx-hero-title { line-height: .98; }
.nx-hero-sub { line-height: 1.25; }
.nx-hero-tag, .nx-hero-btn { background: var(--bg); padding: .32em .75em; border-radius: .3em; line-height: 1.15; white-space: nowrap; }
.nx-hero-btn { border-radius: .45em; padding: .45em 1.05em; }
.nx-up { text-transform: uppercase; letter-spacing: .02em; }
.nx-fx-shadow.nx-hero-title, .nx-fx-shadow.nx-hero-sub { text-shadow: 0 .05em .2em rgba(0,0,0,.7); }
.nx-fx-outline.nx-hero-title, .nx-fx-outline.nx-hero-sub { -webkit-text-stroke: .07em rgba(0,0,0,.9); paint-order: stroke fill; }
.nx-fx-glow.nx-hero-title, .nx-fx-glow.nx-hero-sub { text-shadow: 0 0 .08em currentColor, 0 0 .35em currentColor, 0 0 .8em currentColor; }
.nx-fx-shadow.nx-hero-tag, .nx-fx-shadow.nx-hero-btn { box-shadow: 0 .15em .5em rgba(0,0,0,.55); }
.nx-fx-outline.nx-hero-tag, .nx-fx-outline.nx-hero-btn { box-shadow: inset 0 0 0 .1em currentColor; }
.nx-fx-glow.nx-hero-tag, .nx-fx-glow.nx-hero-btn { box-shadow: 0 0 .4em var(--bg), 0 0 1.1em var(--bg); }
.nx-hero:hover .nx-hero-btn { filter: brightness(1.12); }
.nx-hero:hover .nx-hero-box > img { filter: brightness(1.06); }