@font-face{font-family:"Russo One";src:url("/fonts/russo-one.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url("/fonts/outfit-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url("/fonts/outfit-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url("/fonts/outfit-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
:root{
  --ink:#14021e;--violet:#6b1ad6;--gold:#ffd24a;--gold2:#ffe9a0;--cyan:#5eead4;--magenta:#ff2d9a;--emerald:#2ee6a0;--chrome:#d4d0dc;--paper:#fff6e8;--muted:#c9b8d8;
}
*{box-sizing:border-box}
html{background:var(--ink);color:var(--paper);font-family:Outfit,system-ui,sans-serif;line-height:1.55;scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#3a0a5c 0%,var(--ink) 55%);min-height:100%}
img{max-width:100%;height:auto}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold2)}
.vn-skip{position:absolute;left:-999px;top:auto}
.vn-skip:focus{left:8px;top:8px;z-index:80;background:var(--gold);color:#14021e;padding:.4rem .7rem;border-radius:8px}
/* header */
.vn-top{display:flex;align-items:center;gap:14px;height:56px;padding:0 16px;background:linear-gradient(90deg,#1a0528,#2a083f 40%,#1a0528);border-bottom:2px solid var(--gold);position:relative;z-index:20}
.vn-marca{display:flex;align-items:center;gap:8px;color:var(--paper);flex:0 0 auto}
.vn-marca img{width:56px;height:56px;object-fit:contain;display:block;border-radius:10px;background:#1a0528}
.vn-selo{font-family:"Russo One",sans-serif;font-size:18px;color:#14021e;background:var(--gold);padding:3px 10px;border-radius:8px;letter-spacing:.02em;line-height:1.2}
.vn-etiq{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin-top:2px}
.vn-pills{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.vn-pills a{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 12px;border-radius:999px;background:#2a0a40;color:var(--paper);border:1px solid #6b1ad6;font-weight:700;font-size:14px}
.vn-pills a[aria-current="page"],.vn-pills a:hover{background:var(--gold);color:#14021e;border-color:var(--gold)}
.vn-cta{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;font-family:"Russo One",sans-serif;font-size:16px;line-height:1;padding:12px 20px;border-radius:12px;background:linear-gradient(180deg,#ff7ad3,#ff2d9a 55%,#c01870);color:#fff;border:2px solid #ffe9a0;box-shadow:0 0 16px rgba(255,45,154,.45);text-decoration:none;white-space:nowrap}
.vn-cta:hover{color:#fff;filter:brightness(1.08)}
.vn-cta-trilho{height:36px;padding:0 14px;font-size:14px;border-radius:10px}
.vn-ticker{height:28px;overflow:hidden;background:#0c0114;border-bottom:1px solid #4a1570;color:var(--gold);font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;white-space:nowrap}
.vn-ticker b{color:var(--cyan);font-weight:700;margin:0 .8rem}
/* FOLD */
.vn-fold{position:relative;width:100%;max-width:1280px;height:716px;margin:0 auto;overflow:hidden;background:#14021e}
body.vn-lobby .vn-top,body.vn-lobby .vn-ticker,body.vn-lobby .vn-fold{max-width:1280px;margin-left:auto;margin-right:auto}
body.vn-lobby{background:#14021e}
.vn-booth{position:absolute;left:0;top:-84px;width:1280px;height:800px;object-fit:fill;pointer-events:none;z-index:0}
/* lintel overlays sit on the painted beam: y 80 in the 800 bg, which is y -4 relative to fold after -84 offset... 
   fold starts after header 56 + ticker 28 = 84. bg is shifted up 84px so lintel (y80 in bg) is at y -4 of fold — almost at the top of the fold.
   Wait: I want lintel visible in the fold, just under the ticker. Painted lintel is at y=80 in the 800 image. If I place the 800 image at top:-84px inside the fold, lintel is at 80-84=-4 (clipped). That's wrong.
   
   Header 56 + ticker 28 = 84 covers the painted header (~88px). The fold should show from the lintel downward.
   The 800px background should be placed at top:0 of the *page*, not of the fold, OR the fold includes header.
   
   Better: the fold container includes header+ticker+stage and is exactly 800px.
*/
.vn-stage{position:relative;width:100%;max-width:1280px;margin:0 auto;height:800px;overflow:hidden;background:#14021e}
.vn-stage .vn-top{position:absolute;left:0;right:0;top:0;z-index:8}
.vn-stage .vn-ticker{position:absolute;left:0;right:0;top:56px;z-index:8}
.vn-stage .vn-booth{position:absolute;left:0;top:0;width:1280px;height:800px;top:0;object-fit:fill;z-index:1}
.vn-logo-plate{position:absolute;left:36px;top:78px;z-index:8;width:176px;text-align:center}
.vn-logo-plate img{width:160px;height:160px;object-fit:contain;display:block;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 40% 30%,#ffe9a0,#e0b120 60%,#8a6a00);padding:8px;box-shadow:0 0 0 4px #ffd24a,0 10px 24px rgba(0,0,0,.45)}
.vn-logo-plate span{display:inline-block;margin-top:6px;background:#3a1a00;color:var(--gold2);font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:6px;border:1px solid var(--gold)}
.vn-h1{position:absolute;left:214px;top:88px;z-index:6;margin:0;font-family:"Russo One",sans-serif;font-size:86px;line-height:1;letter-spacing:-.05em;color:#ffd24a;-webkit-text-stroke:3px #10010a;paint-order:stroke fill;text-shadow:0 3px 0 #10010a,0 0 18px rgba(232,64,255,.35);text-transform:uppercase;white-space:nowrap;transform:scaleX(.62);transform-origin:left center}
.vn-h1-cta{position:absolute;right:22px;top:92px;z-index:7;min-width:168px;height:52px;font-size:18px;padding:0 14px}
.vn-tile{position:absolute;z-index:5;border-radius:18px;overflow:hidden;box-shadow:0 14px 28px rgba(0,0,0,.55),0 0 0 3px #ffd24a,0 0 18px rgba(94,234,212,.25);background:#1a0528}
.vn-tile img{width:100%;height:100%;object-fit:cover;display:block}
.vn-t1{width:168px;height:168px;left:86px;top:520px;transform:rotate(-16deg)}
.vn-t2{width:152px;height:152px;left:220px;top:300px;transform:rotate(-9deg)}
.vn-t3{width:196px;height:196px;left:430px;top:500px;transform:rotate(7deg);z-index:6}
.vn-t4{width:138px;height:138px;left:400px;top:290px;transform:rotate(11deg)}
.vn-t5{width:148px;height:148px;left:680px;top:260px;transform:rotate(8deg)}
.vn-t6{width:152px;height:152px;left:840px;top:305px;transform:rotate(15deg)}
.vn-t7{width:138px;height:138px;left:700px;top:470px;transform:rotate(5deg)}
.vn-t8{width:150px;height:150px;left:830px;top:625px;transform:rotate(12deg)}
.vn-rack{position:absolute;right:14px;top:200px;z-index:6;width:132px;display:flex;flex-direction:column;gap:8px}
.vn-promo{display:block;height:118px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 2px #ffd24a,0 8px 16px rgba(0,0,0,.4)}
.vn-promo img{width:100%;height:100%;object-fit:cover;display:block}
/* below fold */
.vn-baixo{max-width:1080px;margin:0 auto;padding:28px 20px 60px}
.vn-kicker{color:var(--cyan);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:12px;margin:0 0 6px}
h2{font-family:"Russo One",sans-serif;color:var(--gold);font-size:28px;line-height:1.2;margin:0 0 12px}
h3{font-family:"Russo One",sans-serif;color:var(--gold2);font-size:20px;margin:1.4rem 0 .5rem}
.vn-lead{font-size:1.12rem;color:#f3e9ff}
.vn-nota{color:var(--gold);font-weight:800}
.vn-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}
.vn-card{background:linear-gradient(180deg,#2a0a40,#160424);border:1px solid #6b1ad6;border-radius:16px;padding:16px;box-shadow:0 0 0 1px rgba(255,210,74,.15)}
.vn-card img.vn-cover{width:100%;border-radius:10px;aspect-ratio:16/9;object-fit:cover}
.vn-platlogo{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:10px;padding:4px;display:block}
.vn-badge-txt{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:64px;border-radius:10px;background:#2a0a40;border:1px solid var(--gold);color:var(--gold);font-weight:800;font-size:12px;text-align:center;padding:4px}
.vn-card h3{margin-top:.6rem}
.vn-rec{margin-top:10px;font-size:13px;color:var(--muted)}
.vn-rec a{display:inline-flex;margin-top:6px}
.vn-fig{margin:1.2rem 0 1.6rem}
.vn-fig img{width:100%;border-radius:14px;border:2px solid var(--gold);display:block}
.vn-fig figcaption{font-size:13px;color:var(--muted);margin-top:6px}
article.vn-sec{max-width:860px;margin:0 auto;padding:24px 18px 48px}
.vn-crumb{font-size:13px;color:var(--muted);margin:0 0 12px}
.vn-crumb a{color:var(--cyan)}
.vn-rodape{background:#0c0114;border-top:2px solid var(--gold);padding:28px 18px 18px;margin-top:20px;color:var(--muted)}
.vn-rodape-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px}
.vn-rodape h2{font-size:18px}
.vn-rodape a{color:var(--gold2);display:inline-block;margin:.15rem 0}
.vn-plus{max-width:1080px;margin:18px auto 0;font-size:13px}
.vn-aviso18{display:inline-block;background:var(--magenta);color:#fff;font-weight:800;padding:1px 7px;border-radius:6px;margin-right:6px}
.vn-lista{list-style:none;padding:0}
.vn-lista li{padding:.45rem 0 .45rem 1.2rem;position:relative}
.vn-lista li:before{content:"";position:absolute;left:0;top:.7rem;width:8px;height:8px;border-radius:50%;background:var(--gold)}
/* hub */
.vn-hub-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 18px}
.vn-hub-toolbar input,.vn-hub-toolbar select{background:#1a0528;color:var(--paper);border:1px solid #6b1ad6;border-radius:8px;padding:8px 10px;font:inherit}
.vn-grupos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.vn-grupos button{background:#2a0a40;color:var(--paper);border:1px solid var(--violet);border-radius:999px;padding:6px 12px;font-weight:700;cursor:pointer}
.vn-grupos button[aria-pressed="true"]{background:var(--gold);color:#14021e}
.vn-hub-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.vn-hub-item{display:flex;gap:10px;align-items:center;background:#1a0528;border:1px solid #4a1570;border-radius:12px;padding:10px}
.vn-hub-item img,.vn-hub-item .vn-badge-txt{width:48px;height:48px;flex:0 0 48px}
.vn-hidden{display:none !important}
.vn-more{margin:18px auto;display:block}
/* review page hero */
.vn-rev-hero{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:center;background:linear-gradient(90deg,#2a0a40,#160424);border:2px solid var(--gold);border-radius:18px;padding:16px;margin:0 0 18px}
.vn-rev-hero img.vn-platlogo{width:128px;height:128px}
/* mobile */
@media (max-width:900px){
  .vn-pills{display:none}
  .vn-stage{height:auto;min-height:0}
  .vn-stage .vn-top,.vn-stage .vn-ticker{position:relative;top:auto}
  .vn-booth{display:none}
  .vn-logo-plate,.vn-h1,.vn-h1-cta,.vn-rack,.vn-tile{position:relative;left:auto;top:auto;right:auto;transform:none;width:auto}
  .vn-glass{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;width:100%}
  .vn-h1{font-size:42px;line-height:1.05;letter-spacing:0;-webkit-text-stroke:3px #10010a;padding:8px 12px;display:block;transform:none;white-space:normal;width:auto;position:relative;left:auto;top:auto}
  .vn-h1-cta{display:inline-flex;margin:8px 12px 16px}
  .vn-logo-plate{margin:12px auto;display:block}
  .vn-glass{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
  .vn-tile{width:100% !important;height:auto !important;aspect-ratio:1;border-radius:14px}
  .vn-rack{width:auto;flex-direction:row;padding:0 12px 16px}
  .vn-promo{flex:1;height:110px}
  .vn-grid3,.vn-rodape-in,.vn-rev-hero{grid-template-columns:1fr}
  .vn-cta-trilho{display:none}
}
@media (min-width:1280px){
  .vn-stage{width:1280px}
}