/* ============================================================================
   RIOS RACE — Home
   ----------------------------------------------------------------------------
   Mistura da identidade Rios Race (preto + vermelho, Orbitron + Inter) com os
   componentes do estudo Vértice (NOVA FX cinema-scroll): nav em pílula, painel
   de vidro com grade, chips com ponto, títulos em dois tons com palavras que
   sobem, contadores, folha clara com letreiro gigante, celulares em CSS 3D,
   statement letra por letra, galeria com HUD e fechamento em cor cheia.

   Os efeitos ligados ao scroll ficam em js/home.js; o túnel 3D dos projetos em
   js/garagem-3d.js. Sem JS, tudo aparece no estado final.
   ========================================================================== */

:root {
  --bg: #050505; --ink: #fafafa; --ink-2: #a1a1aa; --ink-3: #71717a;
  --accent: #dc2626; --accent-2: #f87171; --accent-deep: #991b1b;
  --paper: #f4f4f5; --paper-ink: #0a0a0a; --paper-ink-2: rgba(10, 10, 10, .62);
  --line: rgba(255, 255, 255, .08);
  --font-display: "Orbitron", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pad: clamp(16px, 3vw, 40px);
  --wrap: 1200px;
  --stage-h: 100vh;
}
@supports (height: 100svh) { :root { --stage-h: 100svh; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 96px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* scanline vermelha que atravessa a tela (identidade do site) */
.scanline { position: fixed; top: 0; z-index: 5; width: 100%; height: 120px; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(220, 38, 38, .04), transparent); animation: scanline 8s linear infinite; }
@keyframes scanline { 0% { transform: translateY(-100vh); } 100% { transform: translateY(100vh); } }

/* reveal por IntersectionObserver (script inline) */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
.reveal.visible { opacity: 1; transform: none; }

.rr-wrap { width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; }
.rr-section { position: relative; padding: clamp(72px, 10vw, 140px) 0; }

/* ---------- primitivos ---------- */
.dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.rr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #e4e4e7; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.rr-chip--paper { color: var(--paper-ink); background: rgba(10, 10, 10, .06); border-color: rgba(10, 10, 10, .12); }
.rr-chip--red { color: #fff; background: rgba(10, 10, 10, .18); border-color: rgba(255, 255, 255, .28); }
.rr-chip--red .dot { background: #fff; box-shadow: 0 0 10px #fff; }
.rr-idx { display: block; margin-bottom: 12px; font-family: var(--font-display); font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; color: var(--accent); }

.rr-title { font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.04; }
.rr-title .t1, .rr-title .t2 { display: block; }
.rr-title .t2 { color: var(--accent); }
.rr-title--xl { font-size: clamp(27px, 5.2vw, 86px); }
.rr-title--lg { margin: 18px 0 0; font-size: clamp(26px, 3.6vw, 56px); }
.rr-title--md { font-size: clamp(22px, 2.3vw, 34px); }
.rr-title--sm { font-size: clamp(18px, 1.6vw, 22px); }
.rr-title--sm .t1, .rr-title--sm .t2 { display: inline; }
/* palavras que sobem por máscara (js/home.js quebra o texto em .rw > .rw-i) */
.rr-title .rw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .1em .12em 0; margin: 0 -.1em -.12em 0; }
.rr-title .rw-i { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease); }
.rr-title.on .rw-i { transform: none; }

.rr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.rr-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 15px 22px; border-radius: 999px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: transform .35s var(--ease), background .3s, color .3s, border-color .3s; }
.rr-btn svg { width: 16px; height: 16px; flex: none; }
.rr-btn:hover { transform: translateY(-2px); }
.rr-btn--light { background: var(--ink); color: var(--bg); }
.rr-btn--light:hover { background: var(--accent); color: #fff; }
.rr-btn--ghost { color: var(--ink); border: 1px solid rgba(255, 255, 255, .24); }
.rr-btn--ghost:hover { border-color: var(--accent); background: rgba(220, 38, 38, .12); }
.rr-btn--red { background: var(--accent); color: #fff; box-shadow: 0 10px 30px rgba(220, 38, 38, .3); }
.rr-btn--red:hover { background: #b91c1c; }
.rr-btn--dark { background: var(--paper-ink); color: #fff; }
.rr-btn--dark:hover { background: var(--accent); }
.rr-btn--ghost-light { color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.rr-btn--ghost-light:hover { background: rgba(10, 10, 10, .15); border-color: #fff; }

/* painel de vidro com grade (Vértice) + brilho vermelho */
.rr-panel { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; padding: clamp(24px, 4vw, 56px); border: 1px solid var(--line); background: radial-gradient(110% 90% at 88% 62%, rgba(220, 38, 38, .18), transparent 58%), linear-gradient(160deg, rgba(24, 24, 27, .92), rgba(10, 10, 10, .72)); }
.rr-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%); mask-image: linear-gradient(to bottom, #000, transparent 80%); }

/* contadores (motion-enhance.js anima [data-countup]) */
.rr-meta { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.rr-meta li { display: flex; flex-direction: column; gap: 4px; }
.rr-meta b { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: clamp(26px, 2.8vw, 42px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rr-meta span { font-size: 12px; color: var(--ink-2); }

/* letreiro gigante que anda com o scroll */
.rr-marquee { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; overflow: hidden; white-space: nowrap; pointer-events: none; }
.rr-track { display: inline-flex; align-items: center; gap: .3em; font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(90px, 16vw, 260px); letter-spacing: -.03em; line-height: 1; will-change: transform; }
.rr-track .spark { font-size: .26em; font-style: normal; color: var(--accent); }
.rr-marquee--outline .rr-track { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .12); }
.rr-marquee--outline .spark { -webkit-text-stroke: 0; color: rgba(220, 38, 38, .5); }

/* HUD da galeria (contador + título) */
.rr-hud { display: flex; align-items: center; gap: 18px; font-size: 13px; color: rgba(250, 250, 250, .7); }
.rr-hud b { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 22px; color: var(--ink); }
.rr-hud-title { padding-left: 18px; border-left: 2px solid var(--accent); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }

/* ============================ NAV (pílula) ============================ */
.rr-nav { position: fixed; z-index: 50; top: 14px; left: var(--pad); right: var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rr-brand { display: flex; align-items: center; padding: 6px 12px 6px 6px; border-radius: 999px; transition: background .4s var(--ease); }
.rr-brand img { height: 38px; width: auto; }
.rr-pill { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(5, 5, 5, .55); border: 1px solid rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .4s var(--ease); }
.rr-pill a { padding: 9px 12px; border-radius: 999px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d4d4d8; transition: color .25s, background .25s; }
.rr-pill a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.rr-pill a.is-hot { color: var(--accent-2); }
.rr-pill a[aria-current="page"] { color: #fff; background: rgba(220, 38, 38, .2); }
.rr-nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(220, 38, 38, .3); transition: transform .35s var(--ease), background .3s; }
.rr-nav-cta:hover { background: #b91c1c; transform: translateY(-2px); }
.rr-nav-cta svg { width: 16px; height: 16px; }
/* lado direito da barra: lupa da busca, WhatsApp e menu */
.rr-nav-acoes { display: flex; align-items: center; gap: 8px; }
.rr-nav-busca { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 999px; color: #fff; background: rgba(5, 5, 5, .55); border: 1px solid rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; transition: background .25s, border-color .25s; }
.rr-nav-busca:hover { border-color: var(--accent); background: rgba(220, 38, 38, .2); }
.rr-nav-busca svg { width: 18px; height: 18px; }
.rr-burger { display: none; flex-direction: column; gap: 6px; padding: 14px 12px; border-radius: 999px; background: rgba(5, 5, 5, .55); border: 1px solid rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; }
.rr-burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }
.rr-burger span:last-child { width: 14px; background: var(--accent); }
#navbar.scrolled .rr-pill, #navbar.scrolled .rr-burger { background: rgba(5, 5, 5, .86); }
#navbar.scrolled .rr-brand { background: rgba(5, 5, 5, .86); }
/* 9 links: abaixo de 1240px a pílula não cabe entre o logo e o WhatsApp, vira hambúrguer */
@media (max-width: 1240px) { .rr-pill { display: none; } .rr-burger { display: flex; } }
@media (max-width: 560px) { .rr-nav-cta { display: none; } .rr-brand img { height: 32px; } }

#mobile-menu { transform: translateX(100%); transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
#mobile-menu.open { transform: translateX(0); }

/* ============================ 1 · HERO ============================ */
.rr-hero { position: relative; isolation: isolate; height: var(--stage-h); min-height: 560px; overflow: hidden; }
.rr-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #000; will-change: transform; }
.rr-hero-media iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); border: 0; pointer-events: none; opacity: .85; }
.rr-hero-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 55% at 30% 100%, rgba(220, 38, 38, .38), transparent 70%), linear-gradient(to bottom, rgba(5, 5, 5, .72) 0%, rgba(5, 5, 5, .28) 32%, rgba(5, 5, 5, .5) 62%, #050505 100%); }
.rr-hero-eyebrow { position: absolute; top: 104px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: rgba(250, 250, 250, .66); }
.rr-hero-copy { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 44px); max-width: 1000px; will-change: transform, opacity; }
.rr-hero-copy .rr-title { margin-top: 20px; text-shadow: 0 0 40px rgba(0, 0, 0, .45); }
.rr-hero-sub { max-width: 520px; margin-top: 18px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; color: rgba(250, 250, 250, .74); }
.rr-scroll-hint { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: rgba(250, 250, 250, .5); }
.rr-scroll-hint i { width: 1px; height: 40px; background: linear-gradient(var(--accent), transparent); transform-origin: top; animation: rr-hint 2.2s var(--ease) infinite; }
@keyframes rr-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ============================ 2 · SERVIÇOS (painel) ============================ */
.rr-panel-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: end; }
.rr-panel-sub { justify-self: end; max-width: 420px; line-height: 1.6; color: rgba(250, 250, 250, .66); }
.rr-services { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 40px; }
.rr-service { position: relative; padding: 22px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); transition: transform .45s var(--ease), border-color .3s, background .3s; }
.rr-service:hover { transform: translateY(-3px); border-color: rgba(220, 38, 38, .45); background: rgba(220, 38, 38, .06); }
.rr-service svg { width: 22px; height: 22px; color: var(--accent); }
.rr-service-n { position: absolute; top: 20px; right: 22px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); }
.rr-service h3 { margin-top: 14px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rr-service p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
[data-enter] { will-change: transform, opacity; }

/* ============================ 3 · DRIFT (folha clara + letreiro) ============================ */
.rr-drift { position: relative; height: 220vh; }
.rr-sheet { position: sticky; top: 0; height: var(--stage-h); overflow: hidden; background: var(--paper); color: var(--paper-ink); border-radius: 36px 36px 0 0; }
/* título em cima, letreiro no meio, Silvia na frente, textos no pé (canto direito livre pro botão flutuante) */
.rr-drift .rr-marquee { top: 56%; }
.rr-drift .rr-track { color: var(--paper-ink); }
.rr-drift-car { position: absolute; left: 55%; top: 57%; width: min(34vw, 470px); height: auto; translate: -50% -50%; filter: drop-shadow(0 50px 50px rgba(0, 0, 0, .28)); will-change: transform; }
.rr-drift-top { position: absolute; left: var(--pad); top: 112px; max-width: 560px; }
.rr-drift-top .rr-title--lg { font-size: clamp(24px, 2.7vw, 42px); }
.rr-drift-copy { position: absolute; left: var(--pad); bottom: calc(var(--pad) + 8px); max-width: 400px; }
.rr-drift-copy p { font-size: 14px; line-height: 1.6; color: var(--paper-ink-2); }
.rr-drift-copy .rr-actions { margin-top: 18px; }
.rr-drift-side { position: absolute; right: var(--pad); bottom: calc(var(--pad) + 84px); max-width: 320px; padding: 16px 18px; border-radius: 16px; font-size: 13px; line-height: 1.6; color: var(--paper-ink-2); background: rgba(244, 244, 245, .88); border: 1px solid rgba(10, 10, 10, .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .35); }
.rr-drift-side b { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }

/* ============================ 4 · QUEM SOMOS (statement + cards) ============================ */
.rr-statement { position: relative; height: 210vh; }
.rr-statement-stage { position: sticky; top: 0; height: var(--stage-h); overflow: hidden; background: radial-gradient(55% 45% at 50% 55%, rgba(220, 38, 38, .2), transparent 70%); }
.rr-statement-stage::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.4px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(50% 50% at 50% 55%, #000, transparent 75%); mask-image: radial-gradient(50% 50% at 50% 55%, #000, transparent 75%); }
.rr-st-a, .rr-st-b { position: absolute; font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(64px, 17vw, 290px); line-height: .9; letter-spacing: -.03em; white-space: nowrap; will-change: transform; }
.rr-st-a { top: calc(11vh + 48px); left: calc(var(--pad) - .04em); }
.rr-st-b { right: var(--pad); bottom: 12vh; color: var(--accent); text-shadow: 0 0 60px rgba(220, 38, 38, .35); }
.rr-st-a .ch, .rr-st-b .ch { display: inline-block; will-change: transform, opacity; }
.rr-st-note { position: absolute; left: var(--pad); top: 58%; max-width: 340px; font-size: 15px; line-height: 1.6; color: rgba(250, 250, 250, .8); text-shadow: 0 2px 16px rgba(0, 0, 0, .9); }
/* foto da oficina no palco: preto e branco, brilho vermelho, entra junto com as letras (js/home.js) */
.rr-st-photo { position: absolute; inset: 0 0 0 34%; margin: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%); mask-image: linear-gradient(90deg, transparent, #000 38%); }
.rr-st-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.15) brightness(.62); transform-origin: 60% 40%; will-change: transform, opacity; }
.rr-st-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 55% at 62% 42%, rgba(220, 38, 38, .32), transparent 70%), linear-gradient(90deg, rgba(5, 5, 5, .5) 0%, rgba(5, 5, 5, .1) 60%, rgba(5, 5, 5, .35) 100%), linear-gradient(to bottom, #050505 0%, transparent 24%, transparent 70%, #050505 100%); }
.rr-st-hud { position: absolute; top: calc(11vh + 52px); right: var(--pad); }

.rr-about { position: relative; }
.rr-about-body { padding-bottom: clamp(72px, 10vw, 140px); }
.rr-about-intro { display: grid; grid-template-columns: 200px 1fr; gap: 32px; margin-bottom: 40px; }
.rr-lead { max-width: 820px; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.5; color: rgba(250, 250, 250, .86); }
.rr-founders { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rr-card { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(24, 24, 27, .92), rgba(10, 10, 10, .72)); }
.rr-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.rr-founder .rr-title { margin: 18px 0 12px; }
.rr-founder p { font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* ============================ 5 · REELS (celulares 3D) ============================ */
.rr-reels { position: relative; height: 260vh; }
/* touch-action: arrasto de lado no palco é do carrossel (js/home.js); de pé, a página rola */
.rr-reels-stage { position: sticky; top: 0; height: var(--stage-h); overflow: hidden; perspective: 1600px; touch-action: pan-y; background: radial-gradient(60% 60% at 64% 55%, rgba(220, 38, 38, .22), transparent 70%); }
.rr-reels-copy { position: absolute; z-index: 2; left: var(--pad); top: 50%; translate: 0 -50%; max-width: 360px; }
.rr-reels-copy p { margin-top: 16px; line-height: 1.6; color: rgba(250, 250, 250, .7); }
/* o container é um plano em z=0 do contexto 3D: sem pointer-events ele não engole o toque
   dos celulares empurrados pra trás (translateZ negativo) */
.rr-phones { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.rr-phone { pointer-events: auto; touch-action: pan-y; transition: box-shadow .4s; }
/* iPhone: segurar o dedo num celular não abre prévia de link, não seleciona nem arrasta a imagem */
.rr-phone, .rr-phone * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.rr-phone.is-front { box-shadow: 0 40px 90px -30px rgba(220, 38, 38, .7), 0 0 0 1px rgba(220, 38, 38, .55), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.rr-phone:not(.is-front) .rr-screen { cursor: pointer; }
.rr-reels-nav { position: absolute; z-index: 3; left: 64%; bottom: 4%; translate: -50% 0; }
.rr-phone { --w: clamp(150px, 14.5vw, 232px); position: absolute; left: 64%; top: 52%; width: var(--w); aspect-ratio: 9 / 19; margin-left: calc(var(--w) / -2); margin-top: calc(var(--w) * 19 / 9 / -2); padding: calc(var(--w) * .035); border-radius: calc(var(--w) * .16); background: linear-gradient(145deg, #2a2a2e, #0c0c0e 40%, #1c1c20); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .08); transform-style: preserve-3d; will-change: transform; backface-visibility: hidden; }
.rr-phone--center { box-shadow: 0 40px 90px -30px rgba(220, 38, 38, .55), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.rr-screen { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--w) * .04); width: 100%; height: 100%; overflow: hidden; padding: calc(var(--w) * .07); border-radius: calc(var(--w) * .13); background: #0a0a0a; color: #fff; font-size: calc(var(--w) * .052); }
.rr-sb { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; font-size: .82em; font-weight: 600; }
.rr-sb i { width: 34%; height: .9em; margin-right: 22%; border-radius: 999px; background: #000; }
.rr-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rr-screen--reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent 22%, transparent 62%, rgba(0, 0, 0, .72)); }
.rr-reel-foot { position: relative; z-index: 2; display: flex; align-items: center; gap: .55em; font-weight: 600; font-size: .92em; }
.rr-reel-foot i { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff; font-family: var(--font-display); font-style: normal; font-weight: 900; font-size: .72em; }
.rr-sound { margin-left: auto; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .25); cursor: pointer; transition: background .2s, transform .2s; }
/* a tela inteira do reel é o botão de som (alvo grande no toque); o ícone só indica o estado */
.rr-screen--reel { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rr-screen--reel:focus-visible, .rr-screen--profile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rr-screen--reel:hover .rr-sound { background: var(--accent); transform: scale(1.06); }
.rr-sound svg { width: 1.2em; height: 1.2em; }
.rr-sound .on, .rr-sound.is-on .off { display: none; }
.rr-sound.is-on .on { display: block; }
.rr-sound.is-on { background: var(--accent); border-color: var(--accent); }
/* celular do meio: perfil do Instagram */
.rr-screen--profile { justify-content: flex-start; background: #0c0c0e; }
.rr-profile { display: flex; flex-direction: column; align-items: center; gap: .45em; margin-top: .6em; text-align: center; }
.rr-avatar { display: grid; place-items: center; width: 4.6em; height: 4.6em; border-radius: 50%; background: #000; box-shadow: 0 0 0 .18em var(--accent), 0 0 0 .34em #0c0c0e, 0 0 0 .44em rgba(255, 255, 255, .15); }
.rr-avatar img { width: 80%; height: auto; }
.rr-handle { margin-top: .5em; font-weight: 700; font-size: 1.15em; }
.rr-bio { font-size: .82em; line-height: 1.4; color: rgba(255, 255, 255, .66); }
.rr-follow { margin-top: .35em; padding: .55em 2.4em; border-radius: .7em; background: var(--accent); font-weight: 700; font-size: .9em; }
.rr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: .8em calc(var(--w) * -.07) 0; }
.rr-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ============================ 6 · LOJA & ESCOLA (dois painéis) ============================ */
.rr-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rr-duo-card { display: flex; flex-direction: column; gap: 18px; transition: transform .45s var(--ease), border-color .3s; }
.rr-duo-card:hover { transform: translateY(-6px); border-color: rgba(220, 38, 38, .42); }
.rr-duo-card > p:not(.rr-chip) { line-height: 1.6; color: var(--ink-2); font-size: 14px; }
.rr-duo-card .rr-btn { align-self: flex-start; margin-top: auto; }
.rr-duo-card > .rr-chip { align-self: flex-start; }
.rr-list { list-style: none; display: grid; gap: 8px; }
.rr-list li { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); font-size: 14px; font-weight: 600; }
.rr-list img { width: 46px; height: 46px; flex: none; border-radius: 10px; object-fit: cover; }
.rr-list li b { margin-left: auto; color: var(--accent); }
.rr-tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rr-trackcard { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 14px; }
.rr-trackcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.rr-duo-card:hover .rr-trackcard img { transform: scale(1.05); }
.rr-trackcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent 55%); }
.rr-trackcard span { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; font-family: var(--font-display); font-size: 9px; font-weight: 700; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; }
.rr-trackcard small { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .7); }
.rr-levels { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: lv; }
.rr-levels li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.rr-levels li::before { counter-increment: lv; content: counter(lv); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 10px; }

/* ============================ 7 · BODY KITS ============================ */
.rr-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.rr-head p:not(.rr-chip) { max-width: 420px; line-height: 1.6; color: var(--ink-2); }
.rr-kits-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; perspective: 1400px; }
.rr-kit { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 24px; border: 1px solid var(--line); will-change: transform; }
.rr-kit img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.rr-kit:hover img { transform: scale(1.05); }
.rr-kit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent 45%); pointer-events: none; }
.rr-kit figcaption { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; }
.rr-kit figcaption .rr-idx { margin-bottom: 6px; }
.rr-kit figcaption b { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: clamp(16px, 1.6vw, 22px); text-transform: uppercase; }

/* ============================ 8 · PARCEIROS ============================ */
.rr-partners { position: relative; overflow: hidden; padding: clamp(80px, 11vw, 150px) 0; }
.rr-partners-head { position: relative; z-index: 1; margin-bottom: 44px; text-align: center; }
.rr-partners-head .rr-title { margin-top: 16px; }
.marquee { position: relative; z-index: 1; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 4rem; width: max-content; animation: marquee-scroll 30s linear infinite; }
@media (min-width: 768px) { .marquee-track { gap: 6rem; } }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.partner-logo { flex: none; width: auto; height: 44px; pointer-events: none; user-select: none; }
.partner-logo--big { height: 60px; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)); }
.partner-logo--invert { filter: brightness(0) invert(1); opacity: .9; }

/* ============================ 9 · PROJETOS (túnel 3D + HUD) ============================ */
.rr-garage { position: relative; height: 430vh; }
.rr-garage-stage { position: sticky; top: 0; height: var(--stage-h); overflow: hidden; background: radial-gradient(55% 50% at 50% 50%, rgba(185, 28, 28, .34), transparent 72%), var(--bg); }
.rr-garage-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rr-garage-head { position: absolute; top: 50%; left: 50%; translate: -50% -50%; white-space: nowrap; pointer-events: none; font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 7vw, 116px); letter-spacing: -.02em; text-shadow: 0 0 40px rgba(0, 0, 0, .5); will-change: transform, opacity; }
.rr-garage-intro { position: absolute; left: var(--pad); top: 112px; max-width: 340px; }
.rr-garage-intro p:not(.rr-chip) { margin-top: 12px; font-size: 14px; line-height: 1.6; color: rgba(250, 250, 250, .78); text-shadow: 0 2px 14px rgba(0, 0, 0, .9); }
.rr-garage-cta { position: absolute; top: 112px; right: var(--pad); }
.rr-garage .rr-hud { position: absolute; left: var(--pad); bottom: calc(var(--pad) + 6px); }
.rr-garage-fallback { display: none; }
/* sem WebGL (ou CDN fora): vira grade simples */
.rr-garage.no-gl { height: auto; }
.rr-garage.no-gl .rr-garage-stage { position: relative; height: auto; padding: 120px 0 80px; }
.rr-garage.no-gl .rr-garage-gl, .rr-garage.no-gl .rr-garage-head, .rr-garage.no-gl .rr-hud { display: none; }
.rr-garage.no-gl .rr-garage-intro, .rr-garage.no-gl .rr-garage-cta { position: static; }
.rr-garage.no-gl .rr-garage-fallback { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
.rr-garage-fallback img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }

/* ============================ 10 · EVENTOS ============================ */
.rr-events-bg { position: absolute; inset: 0; z-index: -2; background: url("../img/landSessaoEventos.png") center / cover; opacity: .22; }
.rr-events-track { display: flex; gap: 16px; margin-top: 32px; padding-bottom: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rr-events-track::-webkit-scrollbar { display: none; }
.rr-event { flex: 0 0 calc((100% - 32px) / 3); overflow: hidden; scroll-snap-align: start; border-radius: 18px; background: rgba(10, 10, 10, .6); border: 1px solid var(--line); }
.rr-event img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform .6s var(--ease); }
.rr-event:hover img { transform: scale(1.04); }
.rr-event span { display: block; padding: 14px 16px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rr-event { cursor: zoom-in; }
.rr-zoom { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; cursor: zoom-out; }
.rr-zoom.open { opacity: 1; visibility: visible; }
.rr-zoom figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; transform: scale(.96); transition: transform .4s var(--ease); }
.rr-zoom.open figure { transform: none; }
.rr-zoom img { max-width: 100%; max-height: calc(100dvh - 110px); border-radius: 16px; cursor: default; }
.rr-zoom figcaption { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.rr-zoom-x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(10, 10, 10, .7); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.rr-events-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; }
.rr-arrows { display: flex; gap: 8px; }
.rr-round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: rgba(24, 24, 27, .8); border: 1px solid rgba(255, 255, 255, .12); cursor: pointer; transition: background .25s, border-color .25s, box-shadow .25s; }
.rr-round:hover { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 20px rgba(220, 38, 38, .4); }
.rr-round svg { width: 18px; height: 18px; }

/* ============================ 11 · UTILIDADES ============================ */
.rr-utils { position: relative; overflow: hidden; padding: clamp(80px, 11vw, 150px) 0; }
.rr-utils::before { content: ""; position: absolute; inset: 0; opacity: .45; background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.4px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(45% 60% at 22% 50%, #000, transparent 75%); mask-image: radial-gradient(45% 60% at 22% 50%, #000, transparent 75%); }
.rr-utils::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 60% at 22% 50%, rgba(220, 38, 38, .2), transparent 70%); }
.rr-utils-grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; }
.rr-utils-side p { max-width: 440px; line-height: 1.6; color: rgba(250, 250, 250, .7); }
.rr-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.rr-tags li { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* ============================ 12 · SEJA UM CREDENCIADO (crachá 3D) ============================ */
.rr-cred { overflow: hidden; }
.rr-cred::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38% 55% at 74% 50%, rgba(220, 38, 38, .24), transparent 70%); }
.rr-cred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.rr-cred-bottom > p:not(.rr-chip) { max-width: 470px; margin-top: 18px; line-height: 1.6; color: rgba(250, 250, 250, .74); }
.rr-list--icons { margin-top: 24px; max-width: 470px; }
.rr-list--icons li { padding: 12px 16px; }
.rr-list--icons svg { flex: none; width: 20px; height: 20px; color: var(--accent); }
/* crachá: arrastar na horizontal gira; na vertical a página continua rolando */
.rr-badge { position: relative; height: min(78vh, 660px); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.rr-badge.is-dragging { cursor: grabbing; }
.rr-badge canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rr-badge-hint { position: absolute; left: 0; top: 50%; translate: 0 -50%; writing-mode: vertical-rl; rotate: 180deg; display: flex; align-items: center; gap: 10px; white-space: nowrap; pointer-events: none; font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: rgba(250, 250, 250, .45); }
.rr-badge-hint::before, .rr-badge-hint::after { content: ""; width: 1px; height: 22px; background: currentColor; }
.rr-badge-fallback { display: none; }
.rr-badge.no-gl { cursor: default; }
.rr-badge.no-gl canvas, .rr-badge.no-gl .rr-badge-hint { display: none; }
.rr-badge.no-gl .rr-badge-fallback { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; align-content: center; gap: 18px; width: min(280px, 62%); aspect-ratio: 3 / 4.6; border-radius: 22px; color: #25292d; background: linear-gradient(135deg, #eef0f2, #9aa0a6 45%, #dfe2e5 62%, #8d9399); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(255, 255, 255, .55); }
.rr-badge-fallback img { width: 62%; height: auto; }
.rr-badge-fallback b { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 18px; letter-spacing: .02em; }

/* ============================ PÁGINA: SEJA UM CREDENCIADO ============================ */
.rr-page-hero { position: relative; display: grid; align-items: center; min-height: var(--stage-h); padding: 112px 0 56px; overflow: hidden; }
.rr-page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 60% at 74% 52%, rgba(220, 38, 38, .26), transparent 70%), radial-gradient(60% 40% at 20% 100%, rgba(220, 38, 38, .14), transparent 70%); }
.rr-page-hero .rr-title { margin-top: 20px; }
.rr-page-sub { max-width: 500px; margin-top: 18px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: rgba(250, 250, 250, .76); }
.rr-back { display: flex; width: fit-content; align-items: center; gap: 8px; margin-bottom: 22px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); transition: color .25s; }
.rr-back:hover { color: #fff; }
.rr-back svg { width: 16px; height: 16px; }
.rr-benefits { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
.rr-benefit { padding: 26px; border-radius: 18px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); transition: transform .45s var(--ease), border-color .3s, background .3s; }
.rr-benefit:hover { transform: translateY(-3px); border-color: rgba(220, 38, 38, .45); background: rgba(220, 38, 38, .06); }
.rr-benefit svg { width: 26px; height: 26px; color: var(--accent); }
.rr-benefit h3 { margin-top: 18px; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rr-benefit p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.rr-benefit--cta { display: flex; flex-direction: column; align-items: flex-start; background: linear-gradient(150deg, rgba(220, 38, 38, .32), rgba(153, 27, 27, .18)); border-color: rgba(220, 38, 38, .45); }
.rr-benefit--cta p { color: rgba(250, 250, 250, .82); }
.rr-benefit--cta .rr-btn { margin-top: 18px; }
/* passo a passo: coluna do título fica presa, linha vermelha enche com o scroll */
.rr-how { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.rr-how-head { position: sticky; top: 120px; }
.rr-how-head > p:not(.rr-chip) { max-width: 420px; margin-top: 16px; line-height: 1.6; color: rgba(250, 250, 250, .72); }
.rr-steps { position: relative; list-style: none; display: grid; gap: 16px; padding-left: 66px; }
.rr-steps::before, .rr-steps::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; }
.rr-steps::before { background: rgba(255, 255, 255, .1); }
.rr-steps::after { background: var(--accent); box-shadow: 0 0 12px var(--accent); transform-origin: top; transform: scaleY(var(--fill, 0)); }
.rr-step { position: relative; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(24, 24, 27, .92), rgba(10, 10, 10, .72)); }
.rr-step::before { content: attr(data-n); position: absolute; left: -66px; top: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #0f0f10; border: 2px solid var(--accent); box-shadow: 0 0 16px rgba(220, 38, 38, .35); font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 13px; color: #fff; }
.rr-step h3 { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rr-step p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
/* statement com palavras mais longas ("VOCÊ SÓ / PILOTA.") */
.rr-statement--sm .rr-st-a, .rr-statement--sm .rr-st-b { font-size: clamp(48px, 12.5vw, 210px); }

/* ============================ 13 · CONTATO (fechamento vermelho) ============================ */
.rr-final { position: relative; overflow: hidden; padding: clamp(96px, 12vw, 160px) 0 clamp(72px, 9vw, 120px); border-radius: 36px 36px 0 0; color: #fff; background: radial-gradient(90% 85% at 28% 38%, #ef4444 0%, #dc2626 36%, #991b1b 76%, #450a0a 100%); }
.rr-final::before { content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%); }
.rr-final-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.rr-final h2 { margin: 18px 0 8px; font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 5.2vw, 86px); line-height: 1; letter-spacing: -.02em; }
.rr-final h2 em { color: var(--paper-ink); }
.rr-final-copy > p:not(.rr-chip) { max-width: 440px; margin-top: 14px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.rr-final-card { display: grid; gap: 12px; padding: 18px; border-radius: 24px; background: #0f0f10; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.rr-kv { display: grid; gap: 8px; }
.rr-kv div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 14px; border-radius: 12px; background: #1a1a1c; font-size: 13px; }
.rr-kv dt { color: var(--ink-2); }
.rr-kv dd { font-weight: 600; text-align: right; }
.rr-kv a { display: inline-block; padding: 12px 0; margin: -12px 0; } /* área de toque da linha inteira */
.rr-kv a:hover { color: var(--accent-2); }
.rr-map { height: 220px; overflow: hidden; border-radius: 14px; }
.rr-map iframe { width: 100%; height: 100%; border: 0; filter: invert(.9) hue-rotate(180deg) brightness(.8) contrast(1.2); }

/* ============================ RODAPÉ ============================ */
.rr-footer { position: relative; padding: 48px 0 24px; background: var(--bg); border-top: 1px solid var(--line); font-size: 13px; color: rgba(250, 250, 250, .55); }
.rr-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.rr-footer-top img { height: 38px; width: auto; margin-bottom: 14px; }
.rr-footer-top p { max-width: 340px; line-height: 1.6; font-size: 12px; }
.rr-footer h4 { margin-bottom: 14px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-2); }
.rr-footer nav { display: grid; gap: 8px; }
.rr-footer nav a:hover, .rr-footer-bottom a:hover { color: var(--accent-2); }
.rr-socials { display: flex; gap: 10px; }
.rr-socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #111113; border: 1px solid rgba(255, 255, 255, .1); transition: background .25s, border-color .25s; }
.rr-socials a:hover { background: var(--accent); border-color: var(--accent); }
.rr-socials svg { width: 18px; height: 18px; }
.rr-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }

/* ============================ RESPONSIVO ============================ */
@media (max-width: 960px) {
  .rr-panel-head, .rr-founders, .rr-duo, .rr-final-grid, .rr-utils-grid, .rr-footer-top { grid-template-columns: 1fr; }
  .rr-panel-sub { justify-self: start; }
  .rr-services { grid-template-columns: repeat(2, 1fr); }
  .rr-about-intro { grid-template-columns: 1fr; gap: 8px; margin-bottom: 28px; }
  .rr-event { flex-basis: calc((100% - 16px) / 2); }
  .rr-cred-grid, .rr-how { grid-template-columns: 1fr; }
  /* celular/tablet: título, crachá, depois texto e botões */
  .rr-cred-copy { display: contents; }
  .rr-cred-top { order: 1; }
  .rr-badge { order: 2; height: 460px; }
  .rr-cred-bottom { order: 3; }
  .rr-cred-grid { gap: 8px; }
  .rr-how-head { position: static; }
  .rr-benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  /* o botão flutuante "Agende seu serviço" ocupa a faixa de baixo: nada importante fica ali */
  :root { --fab-safe: 78px; }
  .rr-hero-eyebrow { top: 88px; font-size: 9px; letter-spacing: .22em; }
  .rr-hero-copy { bottom: calc(var(--pad) + var(--fab-safe)); }
  .rr-title--xl { font-size: 7.4vw; }
  .rr-scroll-hint { display: none; }
  /* rolagem curta no celular: serviços viram linhas compactas (ícone | título + descrição) */
  .rr-section { padding: 60px 0; }
  .rr-services { grid-template-columns: 1fr; gap: 8px; margin-top: 28px; }
  .rr-service { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding: 13px 14px; }
  .rr-service svg { grid-row: span 2; width: 20px; height: 20px; margin-top: 1px; }
  .rr-service-n { display: none; }
  .rr-service h3 { margin-top: 0; font-size: 12px; }
  .rr-service p { margin-top: 3px; font-size: 12.5px; line-height: 1.45; }
  .rr-meta { margin-top: 28px; padding-top: 22px; gap: 18px 32px; }

  .rr-lead { font-size: 16px; }
  .rr-about-body { padding-bottom: 60px; }
  .rr-trackcard { aspect-ratio: 1; }
  .rr-list img { width: 40px; height: 40px; }

  .rr-drift { height: auto; }
  .rr-sheet { position: relative; display: flex; flex-direction: column; height: auto; padding: 72px var(--pad) 72px; border-radius: 24px 24px 0 0; }
  .rr-drift-top { order: -1; }
  .rr-drift .rr-marquee { position: relative; top: auto; translate: none; margin: 28px calc(-1 * var(--pad)) 0; }
  .rr-drift .rr-track { font-size: 25vw; }
  .rr-drift-car { position: relative; left: auto; top: auto; translate: none; display: block; width: 86%; margin: -12vw auto 0; }
  .rr-drift-top, .rr-drift-copy, .rr-drift-side { position: relative; left: auto; right: auto; top: auto; bottom: auto; max-width: none; }
  .rr-drift-copy, .rr-drift-side { margin-top: 24px; }

  .rr-statement { height: 135vh; }
  .rr-st-a, .rr-st-b { font-size: 20vw; }
  .rr-st-note { top: auto; bottom: 30vh; max-width: 78vw; }
  .rr-st-photo { inset: 0; -webkit-mask-image: none; mask-image: none; }
  .rr-st-photo img { object-position: 62% 28%; }
  .rr-st-photo::after { background: radial-gradient(70% 45% at 60% 45%, rgba(220, 38, 38, .3), transparent 70%), linear-gradient(to bottom, #050505 0%, rgba(5, 5, 5, .25) 26%, rgba(5, 5, 5, .35) 60%, #050505 100%); }
  .rr-st-hud { display: none; }

  .rr-reels { height: 165vh; }
  .rr-reels-copy { top: 96px; translate: none; right: var(--pad); max-width: none; }
  .rr-reels-copy > p:not(.rr-chip), .rr-reels-copy .rr-actions { display: none; }
  .rr-phone { --w: 38vw; left: 50%; top: 58%; }

  .rr-kits-row { display: flex; gap: 14px; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .rr-kits-row::-webkit-scrollbar { display: none; }
  .rr-kit { flex: 0 0 76%; scroll-snap-align: center; }

  .rr-garage { height: 250vh; }
  .rr-garage-intro { top: 92px; right: var(--pad); max-width: none; }
  .rr-garage-intro p:not(.rr-chip) { display: none; }
  .rr-garage-cta { top: auto; right: auto; left: var(--pad); bottom: calc(var(--pad) + var(--fab-safe) + 36px); padding: 12px 16px; }
  .rr-garage .rr-hud { bottom: calc(var(--pad) + var(--fab-safe)); }
  .rr-garage-head { font-size: 11vw; white-space: normal; width: 88vw; text-align: center; line-height: 1; }
  .rr-garage.no-gl .rr-garage-fallback { grid-template-columns: repeat(2, 1fr); }

  .rr-event { flex-basis: 82%; }
  .rr-badge { height: 400px; margin: 4px 0 -6px; }
  .rr-page-hero { padding: 96px 0 40px; }
  .rr-benefits { grid-template-columns: 1fr; gap: 8px; }
  .rr-benefit { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding: 16px; }
  .rr-benefit svg { grid-row: span 2; width: 22px; height: 22px; }
  .rr-benefit h3 { margin-top: 0; font-size: 12px; }
  .rr-benefit p { margin-top: 4px; font-size: 13px; }
  .rr-benefit--cta { display: flex; }
  .rr-benefit--cta h3 { margin-top: 12px; }
  .rr-steps { padding-left: 56px; gap: 12px; }
  .rr-steps::before, .rr-steps::after { left: 17px; }
  .rr-step { padding: 16px 18px; }
  .rr-step::before { left: -56px; width: 36px; height: 36px; font-size: 11px; }
  .rr-statement--sm .rr-st-a, .rr-statement--sm .rr-st-b { font-size: 15vw; }
  .rr-arrows { display: none; }
  .rr-final { border-radius: 24px 24px 0 0; padding: 72px 0 calc(48px + var(--fab-safe)); }
  .rr-map { height: 180px; }
  .rr-partners, .rr-utils { padding: 64px 0; }
  .rr-footer nav { grid-template-columns: 1fr 1fr; }
  .rr-footer-top { gap: 24px; }
  .rr-btn { font-size: 10px; padding: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .scanline, .rr-scroll-hint i { animation: none; }
  .rr-title .rw-i { transform: none; transition: none; }
  .rr-steps::after { transform: none; }
}

/* fonte do menu mobile (classes antigas do site) */
.nfs-font { font-family: var(--font-display); }