/* Voe Longe: estilo compartilhado por TODAS as páginas.
   1) Menu de vidro (o mesmo da home, HTML gerado por navVidro() no build)
   2) Páginas internas (body.claro): topo escuro com a foto + conteúdo num "papel" claro.
   A home acrescenta static/vitrine/home.css por cima. */

/* ---------- 1) menu ---------- */
.vt-glass-nav{background:rgba(10,42,53,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.22)}
.vt-head{padding-top:8px;position:relative;z-index:30;font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif}
.vt-head a{color:inherit}
.vt-nav{border-radius:999px;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
@media(min-width:640px){.vt-nav{padding:12px 28px}}
.vt-logo{display:flex;align-items:center;flex-shrink:0}
.vt-logo img{height:38px;width:auto;display:block;transition:transform .3s}
@media(min-width:640px){.vt-logo img{height:44px}}
.vt-logo:hover img{transform:translateX(3px)}
.vt-links{display:none;align-items:center;gap:22px;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#e2e8f0}
@media(min-width:1280px){.vt-links{display:flex}}
@media(min-width:1536px){.vt-links{gap:32px;font-size:12px}}
.vt-links a{white-space:nowrap;text-decoration:none;transition:color .2s}
.vt-links a:hover,.vt-links a:focus-visible,.vt-links a[aria-current="page"]{color:#22d3ee}
.vt-drop{position:relative}
.vt-drop>button{all:unset;cursor:pointer;display:flex;align-items:center;gap:4px;transition:color .2s}
.vt-drop>button:hover,.vt-drop>button:focus-visible{color:#22d3ee}
.vt-drop>button svg{width:12px;height:12px;opacity:.7}
.vt-drop-menu{position:absolute;top:calc(100% + 18px);left:-18px;min-width:220px;border-radius:18px;padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s;background:rgba(6,32,42,.92)}
.vt-drop:hover .vt-drop-menu,.vt-drop:focus-within .vt-drop-menu,.vt-drop.aberto .vt-drop-menu{opacity:1;visibility:visible;transform:none}
.vt-drop-menu a{padding:10px 12px;border-radius:10px;font-size:12px}
.vt-drop-menu a:hover{background:rgba(34,211,238,.12)}
.vt-cta-wrap{display:flex;align-items:center;gap:12px}
.vt-btn-grad{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(to right,#2563eb,#06b6d4);color:#fff !important;text-decoration:none;font-weight:800;text-transform:uppercase;border-radius:999px;box-shadow:0 10px 15px -3px rgba(6,182,212,.25);transition:background .3s,box-shadow .3s}
.vt-btn-grad:hover{background:linear-gradient(to right,#3b82f6,#22d3ee)}
.vt-nav-cta{font-size:11px;padding:10px 20px;white-space:nowrap}
@media(min-width:640px){.vt-nav-cta{font-size:12px;padding:10px 28px}}
@media(max-width:420px){.vt-nav-cta{display:none}}
.vt-burger{all:unset;cursor:pointer;width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08)}
.vt-burger:focus-visible{outline:2px solid #22d3ee;outline-offset:2px}
.vt-burger svg{width:20px;height:20px}
@media(min-width:1280px){.vt-burger{display:none}}
.vt-menu-cel{position:absolute;left:0;right:0;top:calc(100% + 10px);border-radius:28px;padding:10px;display:flex;flex-direction:column;background:rgba(6,32,42,.95)}
.vt-menu-cel[hidden]{display:none}
.vt-menu-cel a{padding:13px 16px;border-radius:14px;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#e2e8f0}
.vt-menu-cel a:hover{background:rgba(34,211,238,.12);color:#22d3ee}
.vt-menu-cel .sub{font-size:12px;padding:10px 16px 10px 32px;color:#94a3b8}

/* ---------- 2) páginas internas ---------- */
body.claro{background:#F3F1EC;color:#0F172A;-webkit-font-smoothing:antialiased}
.claro ::selection{background:#06b6d4;color:#fff}

/* topo escuro com a foto da capa */
.vl-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#041a24;padding:0 0 clamp(6.5rem,11vw,9rem)}
.vl-hero-fundo{position:absolute;inset:0;z-index:-1}
.vl-hero-fundo img{width:100%;height:100%;object-fit:cover;object-position:center 55%;filter:saturate(1.1);transform:scale(1.06);animation:vl-zoom 16s cubic-bezier(.2,.7,.2,1) both}
.vl-hero-fundo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,26,36,.62) 0%,rgba(4,26,36,.72) 45%,rgba(4,26,36,.94) 100%)}
.vl-hero-nav{position:relative;z-index:30;max-width:1720px;margin:0 auto;padding:20px 16px 0}
@media(min-width:640px){.vl-hero-nav{padding:20px 24px 0}}
@media(min-width:1024px){.vl-hero-nav{padding:20px 48px 0}}
.vl-hero-txt{position:relative;max-width:58rem;margin:0 auto;padding:clamp(3rem,7vw,5.5rem) 1.25rem 0;text-align:center}
.vl-hero-txt>*{animation:vl-sobe .9s cubic-bezier(.2,.8,.2,1) both}
.vl-hero-txt>:nth-child(2){animation-delay:.08s}
.vl-hero-txt>:nth-child(3){animation-delay:.16s}
.vl-hero-txt>:nth-child(4){animation-delay:.24s}
.vl-hero-txt>:nth-child(5){animation-delay:.32s}
.vl-hero .migalha{padding:0;margin:0 0 1.2rem;font-size:.76rem;letter-spacing:.04em;color:rgba(255,255,255,.6)}
.vl-hero .migalha a{color:rgba(255,255,255,.78);text-decoration:none}
.vl-hero .migalha a:hover{color:#67e8f9}
.vl-hero .eyebrow{background:rgba(34,211,238,.12);color:#67e8f9;border:1px solid rgba(103,232,249,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);letter-spacing:.14em}
.vl-hero h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;color:#fff;font-size:clamp(2.5rem,5.8vw,4.8rem);line-height:1.03;letter-spacing:-.015em;margin:1.1rem auto 1rem;max-width:20ch;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.vl-hero .linha-meta{color:rgba(255,255,255,.7);font-size:.84rem;margin:0}
.vl-hero .linha-meta strong{color:#fff;font-weight:700}
.vl-hero .vl-intro{color:rgba(255,255,255,.82);max-width:40rem;margin:0 auto;font-size:1.08rem;line-height:1.65}
.vl-hero .busca{max-width:36rem;margin:1.8rem auto 0;gap:.6rem}
.vl-hero .busca input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px;padding:.9rem 1.35rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.vl-hero .busca input::placeholder{color:rgba(255,255,255,.6)}
.vl-hero .busca input:focus{outline:2px solid #22d3ee;outline-offset:2px}
.vl-hero .busca button{border-radius:999px;padding:.9rem 1.5rem;background:linear-gradient(to right,#2563eb,#06b6d4);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
@keyframes vl-sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vl-zoom{from{transform:scale(1.18)}to{transform:scale(1.06)}}

/* o "papel" claro que sobe sobre o topo */
.vl-papel{position:relative;z-index:2;max-width:60rem;margin:calc(-1 * clamp(4.5rem,8vw,6rem)) auto 0;background:#fff;border-radius:28px;padding:clamp(1.6rem,5vw,4rem) clamp(1.25rem,5.5vw,4.5rem) clamp(2.2rem,5vw,4rem);box-shadow:0 40px 90px -40px rgba(4,26,36,.45),0 0 0 1px rgba(15,23,42,.04)}
.vl-papel.vl-largo{max-width:80rem}
@media(max-width:640px){.vl-papel{margin-left:.6rem;margin-right:.6rem;border-radius:22px}}
.vl-papel .prose{max-width:44rem}

/* texto */
.vl-papel p,.vl-papel .prose ul,.vl-papel .prose ol{color:#334155;font-size:1.06rem;line-height:1.8}
.vl-papel h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;color:#0B2530;font-size:clamp(1.85rem,3.4vw,2.5rem);line-height:1.12;letter-spacing:-.01em;margin:3rem 0 1rem}
.vl-papel h2::before{content:"";display:block;width:44px;height:3px;border-radius:3px;margin-bottom:1rem;background:linear-gradient(to right,#2563eb,#22d3ee)}
.vl-papel h3{color:#0B2530}
.vl-papel a{color:#0e7490;text-decoration-color:rgba(14,116,144,.35);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.vl-papel a:hover{color:#0891b2;text-decoration-color:currentColor}
.vl-papel figure img{border-radius:18px;box-shadow:0 20px 50px -25px rgba(4,26,36,.45)}
.vl-papel figure.capa{margin-top:0}
.vl-papel blockquote{border-left:3px solid #22d3ee;font-family:'Instrument Serif',Georgia,serif;font-size:1.35rem;color:#0B2530}
.vl-papel details{background:#FAF9F6;border:1px solid #ECE8DF;border-radius:16px}
.vl-papel summary{color:#0B2530}
.vl-papel .fontes{color:#94a3b8;font-size:.78rem}
.vl-papel .busca-info{color:#64748b}

/* blocos de parceiro */
.vl-papel .oferta{background:#FAF9F6;border:1px solid #ECE8DF;border-radius:22px;padding:1.4rem 1.6rem;gap:1.2rem}
.vl-papel .oferta strong{font-size:1.12rem;color:#0B2530}
.vl-papel .oferta p{font-size:.95rem;color:#475569;line-height:1.6}
.vl-papel .oferta a{background:#041a24;color:#fff;text-decoration:none;border-radius:999px;padding:.85rem 1.4rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;transition:background .25s,transform .25s}
.vl-papel .oferta a:hover{background:#0b3a4b;transform:translateY(-1px);color:#fff}
.vl-papel .oferta-roteiro{background:linear-gradient(135deg,#0a3442,#041a24);border:1px solid rgba(34,211,238,.3);box-shadow:0 30px 60px -30px rgba(4,26,36,.6)}
.vl-papel .oferta-roteiro strong{color:#fff;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.6rem}
.vl-papel .oferta-roteiro p{color:#cbd5e1}
.vl-papel .oferta-roteiro a{background:linear-gradient(to right,#2563eb,#06b6d4)}
.vl-papel .oferta-roteiro a:hover{background:linear-gradient(to right,#3b82f6,#22d3ee)}

/* cartões, chips e listas */
.vl-papel .relacionados{margin-top:3.5rem;padding-top:.5rem;border-top:1px solid #ECE8DF}
.vl-papel .grade{gap:1.4rem}
.vl-papel .cartao{overflow:hidden;text-decoration:none;border:1px solid #ECE8DF;border-radius:22px;background:#fff;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.vl-papel .cartao:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.55);box-shadow:0 26px 50px -28px rgba(4,26,36,.5)}
.vl-papel .cartao img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.vl-papel .cartao:hover img{transform:scale(1.05)}
.vl-papel .cartao .cat{color:#0891b2;letter-spacing:.12em}
.vl-papel .cartao h3{font-size:1.02rem;margin:.35rem 0 .45rem;line-height:1.35}
.vl-papel .cartao p{font-size:.86rem;line-height:1.55;color:#64748b;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.vl-papel .chips{margin:0 0 2.2rem}
.vl-papel .chips a{border:1px solid #D9D4C7;color:#0B2530;background:#fff;padding:.5rem 1.05rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;transition:all .25s}
.vl-papel .chips a:hover{border-color:#0B2530}
.vl-papel .chips a.ativo{background:#041a24;border-color:#041a24;color:#fff}

/* entrada suave ao rolar (site.js põe .vl-r; sem JS tudo aparece normal) */
.vl-revela .vl-r{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.vl-revela .vl-r.vl-visivel{opacity:1;transform:none}

/* rodapé igual ao da home */
body.claro footer{background:#041a24;margin-top:5rem;border-top:1px solid rgba(255,255,255,.06)}

@media(prefers-reduced-motion:reduce){.vl-hero-txt>*,.vl-hero-fundo img{animation:none}.vl-revela .vl-r{opacity:1;transform:none;transition:none}}