/* Página do convite (#644/#652) — pública (/convite/) e prévia admin (/app/adm/design/vsl/). Tokens de 4brand_basic.css. */
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper-2);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6;margin:0}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter,16px)}
.disp{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.95}
.disp .gold{color:var(--brand-gold)}

/* topo */
.top{background:var(--night-800);color:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:60px}
.top img{height:26px;width:auto}
@media(min-width:1024px){.top{position:sticky;top:var(--pv-h,0px);z-index:55;box-shadow:0 1px 0 rgba(255,255,255,.06)}}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 24px;border-radius:var(--radius-pill);border:2px solid transparent;font:700 15px/1 var(--font-body);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background .18s}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--brand-gold);color:var(--night-900);box-shadow:var(--glow-gold)}
.btn-gold:hover{background:var(--gold-400)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:#fff}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}
.btn .wa-ic{flex:none}

/* hero */
.hero{background:var(--night-bg);background-color:var(--night-800);color:#fff;padding:28px 0 40px}
@media(min-width:1024px){.hero{padding:40px 0 56px}}
.eyebrow{font:800 11.5px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400);margin:0 0 10px}
.hero h1{font-size:clamp(34px,8.6vw,58px);margin:0 0 10px}
.hero .lead{color:rgba(255,255,255,.82);font-size:16px;max-width:640px;margin:0 0 22px}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ctas .note{flex-basis:100%;font-size:12.5px;color:rgba(255,255,255,.7);margin:0}
@media(max-width:480px){.ctas .btn{flex:1 1 100%}}

/* seções */
.sec{padding:48px 0}
.sec h2{font-size:clamp(28px,6vw,40px);margin:0 0 6px;color:var(--ink)}
.sec .sub{color:var(--ink-2);margin:0 0 20px;max-width:640px}

/* exemplos de sites — celular: deslizar (o próximo aparece na borda); desktop: 3 lado a lado */
.ex{display:flex;gap:14px;list-style:none;margin:0 calc(-1 * var(--gutter,16px));padding:0 var(--gutter,16px) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter,16px);scrollbar-width:none}
.ex::-webkit-scrollbar{display:none}
.ex li{flex:0 0 78%;min-width:0;scroll-snap-align:start}
@media(min-width:768px){.ex{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0;overflow:visible}.ex li{min-width:0}}
.ex figure{margin:0}
.ex-shot{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 10px 28px rgba(27,35,51,.10)}
.ex-shot picture{display:block;aspect-ratio:390/600;overflow:hidden}
@media(min-width:768px){.ex-shot picture{aspect-ratio:1440/860}}
.ex-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ex-seal{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;background:#1B2333;color:#fff;font:600 12px/1 var(--font-body)}
.ex figcaption{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.ex figcaption strong{font:700 15px/1.25 'Poppins',sans-serif;color:var(--ink)}
.ex figcaption span{font-size:13px;color:var(--ink-3)}

/* fechamento */
.end{background:var(--night-bg);background-color:var(--night-800);color:#fff;text-align:center}
.end h2{color:#fff}
.end .sub{color:rgba(255,255,255,.8);margin-left:auto;margin-right:auto}
.end .ctas{justify-content:center}

/* barra fixa do celular: aparece quando os CTAs do topo saem da tela */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(7,14,29,.96);backdrop-filter:blur(8px);padding:10px var(--gutter,16px) calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;transform:translateY(110%);transition:transform .25s var(--ease-out)}
.sticky.show{transform:none}
.sticky .btn{flex:1;min-height:48px}
.sticky .sq{flex:none;width:48px;padding:0}
@media(min-width:1024px){.sticky{display:none}}
body{padding-bottom:84px}
@media(min-width:1024px){body{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}