/* ============================================================
   Cabeçalho XR Studio — o mesmo em todas as páginas principais.
   Fonte única: as páginas que ainda trazem estas regras inline
   (index, martech, projetos) devem migrar para cá.
   Markup esperado: <header class="en-header"> + .en-mobile-nav,
   comportamento em assets/js/xr-header.js.
   ============================================================ */

.en-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 9990;
	/* Sem esta linha o menu herdava a fonte de cada pagina — Rubik na home,
	   Inter em live-mkt e projetos-especiais, Arimo em projetos, Arial em
	   sites-imersivos — e o mesmo 13px rendia larguras diferentes. A fonte
	   vem do <link> do Google Fonts que acompanha esta folha em cada pagina. */
	font-family: 'Rubik', Arial, Helvetica, sans-serif;
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 48px;
	background: rgba(8,8,8,0.92);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.en-header img { height: 38px; }
.en-header-right { display: flex; align-items: center; gap: 16px; }
.en-nav { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.en-nav a { color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 600; text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; transition: color 200ms; }
.en-nav a:hover { color: #FF248E; }
.en-cta-wa {
	display: inline-flex; align-items: center; gap: 8px;
	background: linear-gradient(135deg,#FF248E,#d4006e);
	color: #fff !important; font-size: 13px; font-weight: 700;
	padding: 12px 24px; border-radius: 50px; letter-spacing: 0.06em;
	text-transform: uppercase; text-decoration: none;
	transition: 300ms all ease; box-shadow: 0 4px 20px rgba(255,36,142,0.35);
}
.en-cta-wa:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,36,142,0.5); }
.en-lang-btn {
	display: inline-flex; align-items: center; gap: 5px;
	border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.55) !important;
	font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 50px;
	text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase;
	transition: 300ms all ease;
}
.en-lang-btn:hover { border-color: #FF248E; color: #FF248E !important; }
.en-lang-active { color: #FF248E; }

/* Mobile menu (hamburger + drawer) */
.en-hamburger {
	display: none;
	flex-direction: column; justify-content: center; align-items: center; gap: 5px;
	width: 40px; height: 40px; background: transparent; border: none; padding: 0;
	cursor: pointer; flex-shrink: 0;
}
.en-hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: 300ms all ease; }
.en-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.en-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.en-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.en-mobile-nav-backdrop {
	position: fixed; inset: 0; background: rgba(0,0,0,0.55);
	z-index: 9988; opacity: 0; pointer-events: none; transition: opacity 300ms ease;
}
.en-mobile-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

.en-mobile-nav {
	font-family: 'Rubik', Arial, Helvetica, sans-serif;
	position: fixed; top: 0; right: 0; height: 100%; width: min(82vw, 320px);
	background: rgba(8,8,8,0.98); backdrop-filter: blur(14px);
	border-left: 1px solid rgba(255,255,255,0.08);
	z-index: 9989; padding: 100px 32px 32px;
	transform: translateX(100%); transition: transform 350ms ease;
	display: flex; flex-direction: column; gap: 28px; overflow-y: auto;
}
.en-mobile-nav.is-open { transform: translateX(0); }
.en-mobile-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.en-mobile-nav ul a {
	display: block; padding: 16px 0; color: #fff; font-size: 17px; font-weight: 600;
	text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.08);
	text-transform: uppercase; letter-spacing: 0.04em;
}
.en-mobile-nav ul a:hover, .en-mobile-nav ul a:active { color: #FF248E; }
.en-mobile-nav-cta {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: linear-gradient(135deg,#FF248E,#d4006e); color: #fff !important;
	font-size: 14px; font-weight: 700; padding: 15px 24px; border-radius: 50px;
	text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase;
}
body.en-nav-open { overflow: hidden; }

/* Tablet + mobile: o nav completo (5 itens + CTA + idioma) não cabe — vira hambúrguer */
@media (max-width: 1024px) {
	.en-nav { display: none; }
	.en-hamburger { display: flex; }
	.en-header { padding: 16px 28px; }
}
@media (max-width: 768px) {
	.en-header { padding: 14px 20px; }
	.en-cta-wa span { display: none; }
}

/* Item da página atual — o único acréscimo ao bloco da home. */
.en-nav a.is-current { color: #FF248E; }
.en-mobile-nav ul a.is-current { color: #FF248E; }

/* O cabeçalho é fixo: páginas cujo topo encostava num header estático
   ganham este respiro via .xr-header-offset no primeiro bloco. */
.xr-header-offset { padding-top: 76px; }
@media (max-width: 1024px) { .xr-header-offset { padding-top: 70px; } }
@media (max-width: 768px)  { .xr-header-offset { padding-top: 64px; } }

/* Seis itens não cabem entre 1024 e 1200px: nesta faixa o nav vira
   hambúrguer. A regra vivia em xr-special-brand.css, que nem toda
   página carrega — como o cabeçalho é o mesmo em todas, ela vem junto. */
@media (max-width: 1200px) {
	.xr-has-sites-nav .en-nav { display: none; }
	.xr-has-sites-nav .en-hamburger { display: flex; }
}

/* O ícone do WhatsApp no drawer é SVG inline: sem esta regra ele cai no
   tamanho intrínseco (300x150) nas páginas que não definem .xr-svg-icon. */
.en-mobile-nav-cta svg { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; }

/* No mobile quem aparece e o menu compartilhado do xr-responsive.js, montado
   no <body>. Ele ja era uniforme entre as paginas, mas em Arial: o atalho
   `font:` de .xr-mobile-dialog[open] (xr-responsive.css) fixa a familia junto
   com o tamanho. Repetimos aquela especificidade para alinhar o menu mobile
   ao cabecalho, sem mexer em xr-responsive.css — que as paginas de case usam
   sem carregar a Rubik. */
.xr-mobile-dialog[open], .xr-mobile-toggle { font-family: 'Rubik', Arial, Helvetica, sans-serif; }

@font-face{font-family:Rubik;src:url('../fonts/web/rubik-latin-var.woff2') format('woff2');font-weight:300 900;font-display:swap}
:root{color-scheme:dark;--vr-bg:#080809;--vr-panel:#151216;--vr-ink:#f5f2f4;--vr-muted:#b0aab3;--vr-pink:#ff248e;--vr-line:#ffffff24}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--vr-bg);color:var(--vr-ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit}
img,video{display:block;max-width:100%}
figure,p,h1,h2,h3,dl,dd{margin:0}
button,a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #ff94c7;outline-offset:5px}
.en-header img{width:auto}
.en-nav a.is-current{color:var(--vr-pink)}
.en-mobile-nav[aria-hidden=true]{visibility:hidden}
.vr-wrap{width:min(1240px,88%);margin-inline:auto}
.vr-skip{position:fixed;top:12px;left:12px;z-index:10000;padding:14px 18px;background:#fff;color:#080809;transform:translateY(-170%)}
.vr-skip:focus{transform:none}
.vr-breadcrumb{display:flex;gap:10px;flex-wrap:wrap;padding:114px 0 32px;font-size:11px;color:var(--vr-muted);line-height:1.7}
.vr-breadcrumb a:hover{color:var(--vr-pink)}
.vr-breadcrumb span[aria-current]{color:var(--vr-ink)}
.vr-hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:7%;padding-bottom:72px}
.vr-eyebrow{font:11px/1.7 monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--vr-pink);margin-bottom:22px}
.vr-hero h1{font-size:clamp(42px,4.6vw,70px);line-height:1.01;letter-spacing:-.055em;max-width:660px;font-weight:700}
.vr-hero h1 span{display:block;color:var(--vr-pink)}
.vr-lead{font-size:17px;line-height:1.75;color:var(--vr-muted);margin-top:30px;max-width:530px}
.vr-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.vr-btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:52px;padding:14px 20px;border:1px solid var(--vr-line);border-radius:5px;font-size:13px;line-height:1.4;font-weight:700;transition:background .2s,border-color .2s}
.vr-btn svg{width:18px;height:18px;flex:none}
.vr-btn-primary{background:var(--vr-pink);border-color:var(--vr-pink);color:#240710}
.vr-btn-primary:hover{background:#ff76b8;border-color:#ff76b8}
.vr-btn-secondary:hover{border-color:#ff76b8;background:#ffffff09}
.vr-partnership{margin-top:38px;border-top:1px solid var(--vr-line);padding-top:20px;font-size:13px;line-height:1.7}
.vr-partnership small{display:block;color:var(--vr-muted);font:10px/1.6 monospace;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.vr-partnership span{color:var(--vr-pink);padding-inline:10px}
.vr-hero-photo{position:relative}
.vr-hero-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 34%;border-radius:8px}
.vr-hero-photo figcaption{display:flex;gap:16px;align-items:center;margin-top:14px;color:var(--vr-muted);font-size:11px;line-height:1.5}
.vr-hero-photo figcaption::before{content:'';display:block;width:25px;height:1px;background:var(--vr-pink);flex:none}
.vr-facts{display:grid;grid-template-columns:1fr 1fr 1.25fr;border-block:1px solid var(--vr-line);padding:27px 0;gap:32px}
.vr-facts dt{font:10px/1.5 monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--vr-muted);margin-bottom:9px}
.vr-facts dd{font-size:15px;line-height:1.5}
.vr-section{padding:88px 0}
.vr-section h2{font-size:clamp(30px,3.5vw,48px);line-height:1.1;letter-spacing:-.04em;font-weight:700}
.vr-section h2 span{color:var(--vr-pink)}
.vr-section-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:end;margin-bottom:34px}
.vr-section-heading>p{font-size:15px;line-height:1.8;color:var(--vr-muted)}
.vr-video{position:relative;background:#161419;border:1px solid var(--vr-line);border-radius:8px;overflow:hidden;aspect-ratio:1280/718}
.vr-video video{width:100%;height:100%;background:#161419;object-fit:contain}
.vr-video-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;border:0;background:linear-gradient(#0001,#0004);color:white;cursor:pointer;font-size:14px;font-weight:700;text-shadow:0 2px 10px #000}
.vr-video-play[hidden]{display:none}
.vr-video-play>span{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--vr-pink);color:#240710;box-shadow:0 0 0 9px #08080930}
.vr-video-play svg{width:26px;height:26px;margin-left:4px}
.vr-video-play:focus-visible{outline-offset:-8px}
.vr-video-caption{display:flex;justify-content:space-between;gap:24px;margin-top:14px;font:11px/1.7 monospace;color:var(--vr-muted)}
.vr-video-error{padding:16px;color:#ffd0e5;font-size:14px;line-height:1.6}
.vr-video-error a{text-decoration:underline}
.vr-transcript{margin-top:24px;max-width:820px;color:var(--vr-muted);font-size:13px;line-height:1.8}
.vr-transcript summary{cursor:pointer;color:var(--vr-ink);padding:8px 0}
.vr-transcript p{margin-top:12px}
.vr-practice{background:var(--vr-panel);border-block:1px solid var(--vr-line)}
.vr-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:40px}
.vr-card{padding-top:22px;border-top:2px solid #ff248e8c}
.vr-card h3{font-size:21px;line-height:1.25;letter-spacing:-.025em;margin-bottom:14px}
.vr-card p{color:var(--vr-muted);font-size:14px;line-height:1.8}
.vr-context{display:grid;grid-template-columns:.9fr 1.2fr;gap:10%;align-items:start}
.vr-context p{font-size:16px;line-height:1.8;color:var(--vr-muted)}
.vr-context p+p{margin-top:18px}
.vr-note{margin-top:28px;padding-left:18px;border-left:2px solid var(--vr-pink);font-size:13px!important}
.vr-faq{border-top:1px solid var(--vr-line)}
.vr-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:9%}
.vr-faq-list details{border-bottom:1px solid var(--vr-line)}
.vr-faq-list summary{padding:22px 34px 22px 0;cursor:pointer;position:relative;font-size:16px;line-height:1.5;font-weight:600;list-style:none}
.vr-faq-list summary::-webkit-details-marker{display:none}
.vr-faq-list summary::after{content:'+';position:absolute;right:4px;top:20px;color:var(--vr-pink);font-size:23px;font-weight:400}
.vr-faq-list details[open] summary::after{content:'−'}
.vr-faq-list p{padding:0 20px 24px 0;font-size:14px;line-height:1.8;color:var(--vr-muted)}
.vr-contact{padding:58px;border:1px solid #ff248e4d;border-radius:8px;background:#1b0d16;display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:center;margin-bottom:72px}
.vr-contact h2{font-size:clamp(30px,3vw,42px);letter-spacing:-.04em;line-height:1.12}
.vr-contact p{font-size:14px;line-height:1.8;color:var(--vr-muted);margin-bottom:24px}
.vr-footer{padding:30px 0 40px;border-top:1px solid var(--vr-line);font-size:12px;color:var(--vr-muted)}
.vr-footer .vr-wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}
.vr-footer a:hover{color:var(--vr-pink)}
@media(max-width:1024px){.vr-hero{gap:5%}.vr-hero h1{font-size:46px}.vr-lead{font-size:15px}.vr-btn{font-size:12px;padding:13px 16px}.vr-hero-photo img{aspect-ratio:3/4}.vr-contact{padding:40px}}
@media(max-width:760px){html{scroll-padding-top:86px}.vr-wrap{width:88%}.vr-breadcrumb{padding-top:96px;padding-bottom:25px;font-size:10px}.vr-hero{grid-template-columns:1fr;gap:34px;padding-bottom:45px}.vr-hero h1{font-size:clamp(38px,10vw,58px)}.vr-eyebrow{font-size:10px;margin-bottom:17px}.vr-lead{margin-top:22px}.vr-actions{margin-top:26px;gap:10px}.vr-partnership{margin-top:26px}.vr-hero-photo img{aspect-ratio:4/5}.vr-facts{grid-template-columns:1fr 1fr;gap:23px;padding:24px 0}.vr-facts>div:last-child{grid-column:1/-1}.vr-facts dd{font-size:13px}.vr-section{padding:55px 0}.vr-section-heading,.vr-context,.vr-faq-grid{grid-template-columns:1fr;gap:24px}.vr-section-heading>p{font-size:14px}.vr-cards{grid-template-columns:1fr;gap:28px;margin-top:30px}.vr-video-play>span{width:56px;height:56px}.vr-video-play{font-size:12px;gap:12px}.vr-video-caption{display:block;font-size:10px}.vr-video-caption span{display:block;margin-top:6px}.vr-contact{grid-template-columns:1fr;padding:28px;gap:24px;margin-bottom:50px}.vr-contact p{margin-bottom:18px}.vr-context p{font-size:14px}.vr-faq-list summary{font-size:14px}.vr-footer .vr-wrap{gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}