/* Tokens, reset, nav, botões, rodapé. Não editar nas páginas (dono: orquestrador). */
:root {
  --blue: #0A5CFF;
  --blue-dark: #2D8CFF;
  --ink: #1A1A1A;
  --bg: #F5F7FA;
  --night: #07090F;
  --night-2: #0D1220;
  --gray: #8A93A3;
  --line: rgba(255, 255, 255, .12);
  --f-title: "Space Grotesk", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1280px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--night); color: #fff; font: 400 clamp(16px, 1.05vw, 18px)/1.6 var(--f-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, canvas, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--f-title); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { font: 500 .78rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--blue-dark); }

/* Botões */
.btn { display: inline-flex; align-items: center; gap: .6em; padding: .95em 1.5em; border-radius: 999px; font: 600 .95rem/1 var(--f-body); border: 1px solid transparent; cursor: pointer; transition: transform .4s var(--ease), background .3s, color .3s, border-color .3s; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px); }
.btn-ghost { border-color: var(--line); color: #fff; }
.btn-ghost:hover { border-color: #fff; transform: translateY(-2px); }
.btn .arr { transition: transform .4s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* Navegação (injetada por core.js) */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); transition: background .4s, backdrop-filter .4s, transform .5s var(--ease); }
.nav.is-solid { background: rgba(7, 9, 15, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 1.35rem/1 var(--f-title); letter-spacing: -.03em; color: #fff; }
.brand img { width: 30px; height: 30px; }
.brand i { font-style: normal; color: var(--blue-dark); }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); font-size: .95rem; }
.nav-links a:not(.btn) { opacity: .75; transition: opacity .3s; position: relative; }
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--blue-dark); }
.nav-toggle { display: none; background: none; border: 0; color: #fff; width: 44px; height: 44px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; margin: 6px auto; transition: transform .4s var(--ease), opacity .3s; }
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links { position: fixed; inset: 0; background: var(--night); flex-direction: column; justify-content: center; gap: 28px; font: 600 2rem var(--f-title); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
  .nav.is-open .nav-links { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .4s; }
  .nav.is-open .nav-toggle { position: relative; z-index: 2; }
  .nav.is-open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav.is-open .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
}

/* Rodapé (injetado por core.js) */
.foot { background: #04060B; border-top: 1px solid var(--line); padding: 64px 0 36px; }
.foot-grid { display: grid; gap: 40px; grid-template-columns: 1.4fr 1fr 1fr; }
.foot h3 { margin: 0 0 14px; font: 500 .78rem var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--gray); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a:hover { color: var(--blue-dark); }
.foot small { display: block; margin-top: 48px; color: var(--gray); }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr; } }

/* Revelação ao rolar (estado inicial; GSAP anima) */
[data-reveal] { opacity: 0; transform: translateY(32px); }
.no-motion [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* Fundo contínuo: o site inteiro é escuro; nenhuma seção troca de cor (sem faixas brancas) */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 85% 10%, rgba(10, 92, 255, .16), transparent 70%),
    radial-gradient(50vw 50vh at 5% 95%, rgba(45, 140, 255, .10), transparent 70%),
    linear-gradient(var(--night), var(--night)); }
body::after { content: ""; position: fixed; 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; mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }
main, section { background: transparent; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/* Barra lateral (injetada por core.js): seções empilhadas à direita + régua com marcador de progresso */
.rail { position: fixed; right: 0; top: 0; bottom: 0; width: 210px; z-index: 40; pointer-events: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding-right: 74px; }
.rail-names { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; justify-items: end; text-align: right; }
.rail-names li { font: 500 .7rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); transition: color .4s, font-size .5s var(--ease), letter-spacing .5s var(--ease); white-space: nowrap; }
.rail-names li.is-active { font: 600 clamp(1.3rem, 2.1vw, 1.9rem)/1.1 var(--f-title); letter-spacing: -.01em; color: #fff; }
.rail-names li.is-active.is-scrambling { color: var(--blue-dark); }
.rail-ruler { position: absolute; right: 22px; top: 12vh; bottom: 12vh; width: 44px; }
.rail-ruler .ticks { position: absolute; right: 0; top: 0; bottom: 0; width: 14px; background:
  repeating-linear-gradient(to bottom, rgba(255,255,255,.28) 0 1px, transparent 1px 14px); }
.rail-ruler .major { position: absolute; right: 0; width: 24px; height: 1px; background: rgba(255,255,255,.55); }
.rail-ruler .major span { position: absolute; right: 30px; top: -.55em; font: 500 .62rem/1 ui-monospace, Menlo, Consolas, monospace; color: rgba(255,255,255,.62); }
.rail-ruler .major.is-near span { opacity: 0; visibility: hidden; } /* some na hora (sem transição) quando o rótulo N% passa */
.rail-ruler .mark { position: absolute; right: -22px; width: 70px; height: 1px; background: var(--blue-dark); box-shadow: 0 0 12px var(--blue-dark); will-change: top; }
.rail-ruler .mark b { position: absolute; right: 36px; top: 5px; z-index: 2; padding: 2px 4px; border-radius: 3px; background: #07090F; font: 600 .66rem/1 ui-monospace, Menlo, Consolas, monospace; color: var(--blue-dark); }
@media (max-width: 1100px) { .rail { width: 120px; padding-right: 54px; } .rail-names li:not(.is-active) { display: none; } .rail-names li.is-active { font-size: 1rem; } .rail-ruler { right: 14px; } }
@media (max-width: 760px) { .rail-names { display: none; } .rail-ruler { right: 6px; width: 30px; } .rail-ruler .major span, .rail-ruler .mark b { display: none; } .rail-ruler .mark { width: 36px; right: -6px; } }
@media (prefers-reduced-motion: reduce) { .rail-names li { transition: none; } }

/* Sem barra de rolagem nativa (como no ArtCraft): a régua lateral faz esse papel */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Rodapé: alvos de toque ≥ 44 px no mobile (QA 2026-10-24) */
.foot ul { gap: 0; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; }

/* Barra lateral abaixo de 1100 px: só um fio de progresso de 2 px na borda direita (sem ticks nem nomes; QA 2026-10-24) */
@media (max-width: 1099px) {
  .rail { width: 0; padding: 0; }
  .rail-names, .rail-ruler .ticks, .rail-ruler .major, .rail-ruler .mark { display: none; }
  .rail-ruler { position: fixed; right: 0; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.08); }
  .rail-ruler::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--p, 0) * 100%); background: var(--blue-dark); box-shadow: 0 0 8px var(--blue-dark); }
}
.foot .brand { min-height: 44px; }

/* Régua interativa (≥1100 px): retângulo da janela visível arrastável + clique para pular (estilo ArtCraft) */
@media (min-width: 1100px) {
  .rail-ruler { pointer-events: auto; cursor: pointer; width: 64px; touch-action: none; }
  .rail-ruler::before { content: ""; position: absolute; inset: -14px -24px -14px -96px; }
  .rail-ruler .thumb { position: absolute; left: -6px; right: -22px; background: rgba(255,255,255,.075); border-top: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); border-radius: 2px; min-height: 18px; transition: background .25s, box-shadow .25s; cursor: grab; }
  .rail-ruler:hover .thumb, .rail-ruler:focus-visible .thumb { background: rgba(45,140,255,.16); box-shadow: 0 0 22px rgba(45,140,255,.28); }
  .rail-ruler:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 4px; }
  html.is-scrubbing, html.is-scrubbing * { cursor: grabbing !important; user-select: none !important; }
  html.is-scrubbing .rail-ruler .thumb { background: rgba(45,140,255,.24); box-shadow: 0 0 28px rgba(45,140,255,.4); }
  .rail-ruler .mark { z-index: 2; }
  .rail-ruler .major, .rail-ruler .ticks { z-index: 1; }
}
@media (max-width: 1099px) { .rail-ruler .thumb { display: none; } }

/* ===== Fundo profissional em camadas (2026-10-24): substitui o "preto liso" ===== */
body::before { z-index: -3; background: linear-gradient(180deg, #04060C 0%, #070B17 40%, #081024 72%, #050812 100%); }
body::after { opacity: .30; background-size: 72px 72px; z-index: -1; }
.bgfx { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; contain: strict; }
.bgfx i { position: absolute; display: block; }
.bg-aurora { border-radius: 50%; will-change: transform; animation: aurora 42s ease-in-out infinite alternate; }
.bg-aurora.a1 { width: 78vw; height: 78vh; left: -18vw; top: -22vh; background: radial-gradient(closest-side, rgba(10,92,255,.40), rgba(10,92,255,.12) 55%, transparent 76%); translate: calc(var(--p, 0) * 12vw) calc(var(--p, 0) * 16vh); }
.bg-aurora.a2 { width: 64vw; height: 64vh; right: -16vw; bottom: -18vh; background: radial-gradient(closest-side, rgba(45,140,255,.28), rgba(45,140,255,.08) 58%, transparent 78%); animation-duration: 56s; animation-direction: alternate-reverse; translate: calc(var(--p, 0) * -14vw) calc(var(--p, 0) * -10vh); }
.bg-aurora.a3 { width: 90vw; height: 52vh; left: 5vw; top: 28vh; background: radial-gradient(closest-side, rgba(52,70,190,.30), rgba(52,70,190,.08) 60%, transparent 80%); animation-duration: 70s; translate: calc(var(--p, 0) * 8vw) calc(var(--p, 0) * -6vh); }
.bg-beams { inset: -20% -10% 20% -10%; background: conic-gradient(from 195deg at 72% -8%, transparent 0 7deg, rgba(45,140,255,.13) 12deg, transparent 20deg, rgba(10,92,255,.10) 28deg, transparent 38deg, rgba(120,180,255,.07) 46deg, transparent 56deg); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%); mask-image: linear-gradient(180deg, #000 0%, transparent 82%); transform-origin: 72% 0; animation: beams 34s ease-in-out infinite alternate; opacity: .9; }
.bg-floor { left: -60%; right: -60%; bottom: -8vh; height: 46vh; transform-origin: 50% 100%; transform: perspective(420px) rotateX(64deg); background-image: linear-gradient(rgba(45,140,255,.34) 1px, transparent 1px), linear-gradient(90deg, rgba(45,140,255,.34) 1px, transparent 1px); background-size: 74px 74px; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 88%); mask-image: linear-gradient(to top, #000 0%, transparent 88%); opacity: .5; }
.bg-grain { inset: 0; opacity: .075; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.bg-vig { inset: 0; background: radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(2,4,10,.62) 100%); }
@keyframes aurora { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(5vw, 4vh, 0) scale(1.12); } }
@keyframes beams { from { transform: rotate(-2.2deg); } to { transform: rotate(2.4deg); } }
@media (max-width: 760px) { .bg-floor { opacity: .35; } .bg-beams { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .bg-aurora, .bg-beams { animation: none; } }
.no-motion .bg-aurora, .no-motion .bg-beams { animation: none; }

/* nomes deslizantes: o nome da seção atual fica na altura do marcador; clique nos nomes volta a funcionar */
@media (min-width: 1100px) {
  .rail-names { position: relative; z-index: 3; gap: 16px; will-change: transform; }
  .rail-names li { font: 500 .72rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .16em; padding: 2px 0; transform-origin: right center; transition: color .4s, transform .5s var(--ease); cursor: pointer; }
  .rail-names li:hover { color: rgba(255,255,255,.85); }
  .rail-names li.is-active { font-family: var(--f-title); font-weight: 600; font-size: .72rem; line-height: 1.2; letter-spacing: -.005em; transform: scale(2.4); color: #fff; }
  .rail-ruler::before { inset: -14px -24px -14px -6px; }
  .rail-ruler .thumb { pointer-events: none; left: -144px; background: linear-gradient(90deg, rgba(45,140,255,0), rgba(255,255,255,.06) 45%, rgba(255,255,255,.11)); border: 0; box-shadow: inset 0 1px rgba(255,255,255,.30), inset 0 -1px rgba(255,255,255,.30); }
  .rail-ruler:hover .thumb, .rail-ruler:focus-visible .thumb { background: linear-gradient(90deg, rgba(45,140,255,0), rgba(45,140,255,.12) 45%, rgba(45,140,255,.22)); }
}

/* barrinha desliza entre nomes (a lista de nomes fica parada) */
@media (min-width: 1100px) {
  .rail-names { will-change: auto; }
  .rail-ruler .thumb { height: 56px; margin-top: -28px; transition: top .5s var(--ease), background .25s, box-shadow .25s; }
  .rail-ruler .mark { transition: top .5s var(--ease); }
  html.is-scrubbing .rail-ruler .thumb, html.is-scrubbing .rail-ruler .mark { transition: none; }
}

/* régua com nomes espalhados (2026-10-24, pedido do Arthur): cada nome na altura da sua seção; a barrinha segue a rolagem sem voltar sozinha */
@media (min-width: 1100px) {
  .rail-names, .rail-ruler { top: max(12vh, 140px); } /* o 1º nome (em destaque) não entra embaixo da barra do topo */
  .rail-names { position: absolute; bottom: 12vh; right: 74px; width: 280px; display: block; }
  .rail-names li { position: absolute; right: 0; transform: translateY(-50%); }
  .rail-names li.is-active { transform: translateY(-50%) scale(2.4); }
  .rail-ruler .thumb, .rail-ruler .mark { transition: background .25s, box-shadow .25s; }
}

/* topo enxuto (2026-10-24, pedido do Arthur): com a barra lateral mostrando as seções (>=1100 px), o topo fica só com a marca e o botão de contato */
@media (min-width: 1100px) { .nav-links a:not(.btn) { display: none; } }

/* subtítulos da seção SERVIÇOS na régua (2026-10-24, pedido do Arthur): menores que os títulos, só aparecem enquanto estamos em Serviços */
@media (min-width: 1100px) {
  .rail-names li.sub { font: 500 .64rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: none; color: rgba(255,255,255,.64); opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity .35s, color .3s; cursor: pointer; }
  .rail-names.has-subs li.sub { opacity: 1; pointer-events: auto; }
  .rail-names li.sub:hover { color: rgba(255,255,255,.9); }
  .rail-names li.sub.is-on { color: var(--blue-dark); }
}
@media (max-width: 1099px) { .rail-names li.sub { display: none; } }

.svc-text .lede strong { color: #fff; font-weight: 600; }

/* nomes legiveis sobre qualquer foto que passe por tras (hero) */
@media (min-width: 1100px) { .rail-names li { text-shadow: 0 0 3px rgba(5,8,18,.95), 0 1px 12px rgba(5,8,18,.9); } }

/* controle de volume padrao do video de apresentacao */
.ab-vol { display: flex; align-items: center; gap: 6px; }
.ab-vol svg .x { display: none; } .ab-vol .is-muted .x { display: block; } .ab-vol .is-muted .w1, .ab-vol .is-muted .w2, .ab-vol .is-low .w2 { display: none; }
#ab-vol { -webkit-appearance: none; appearance: none; width: 84px; height: 22px; background: transparent; cursor: pointer; accent-color: var(--blue-dark); }
#ab-vol::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #fff var(--v, 100%), rgba(255,255,255,.28) var(--v, 100%)); }
#ab-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 3px rgba(45,140,255,.35); }
#ab-vol::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); }
#ab-vol::-moz-range-progress { height: 4px; border-radius: 4px; background: #fff; }
#ab-vol::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
#ab-vol:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 3px; border-radius: 6px; }
@media (max-width: 520px) { #ab-vol { width: 56px; } }

/* controles do video (2026-10-24, pedido do Arthur: dificeis de clicar): barra alta, botoes grandes, progresso grosso com bolinha */
.apres-frame .apres-bar { gap: 8px; padding: 34px 18px 14px; background: linear-gradient(to top, rgba(5,8,18,.95) 0%, rgba(5,8,18,.8) 55%, rgba(5,8,18,0) 100%); touch-action: manipulation; }
.apres-frame .apres-bar button { min-width: 48px; min-height: 48px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; transition: background .2s, transform .15s; }
.apres-frame .apres-bar button:hover { background: rgba(255,255,255,.24); }
.apres-frame .apres-bar button:active { transform: scale(.94); }
.apres-frame .apres-bar #ab-play span { font-size: 1rem; line-height: 1; }
.apres-frame .apres-bar #ab-full span { font-size: 1.25rem; line-height: 1; }
.apres-frame .ab-prog { height: 44px; margin: 0 6px; cursor: pointer; touch-action: none; }
.apres-frame .ab-prog::before { top: 19px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.28); transition: height .15s, top .15s; }
.apres-frame .ab-prog i { top: 19px; height: 6px; border-radius: 6px; background: var(--blue-dark); transition: height .15s, top .15s; }
.apres-frame .ab-prog i::after { content: ""; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; transform: translateY(-50%) scale(.85); box-shadow: 0 0 0 4px rgba(45,140,255,.35); transition: transform .15s; }
.apres-frame .ab-prog:hover::before, .apres-frame .ab-prog:hover i { top: 17px; height: 10px; }
.apres-frame .ab-prog:hover i::after { transform: translateY(-50%) scale(1.15); }
.apres-frame .ab-time { font-size: .85rem; min-width: 5.6em; text-align: center; color: #fff; }
.apres-frame .ab-vol { margin: 0 4px; }
.apres-frame #ab-vol { width: 96px; height: 44px; }
@media (max-width: 560px) { .apres-frame .apres-bar { gap: 2px; padding: 28px 8px 8px; } .apres-frame .apres-bar button { min-width: 44px; min-height: 44px; } .apres-frame #ab-vol { width: 56px; } .apres-frame .ab-time { display: none; } }

/* o aviso "O video tem audio..." ficava POR CIMA da barra do video (pin) e bloqueava os cliques; no desktop com pin ele some (o botao ja diz "Assistir com som") */
html.apres-pin .apres-aviso { display: none; }
.apres-aviso { pointer-events: none; }

/* celular: rostos nunca cortados (2026-10-24, pedido do Arthur). Processo: quadro 1:1 em vez de 4:3 e foco no alto da foto; galeria da Sobre: foco por foto */
@media (max-width: 1099px) {
  .step-img { aspect-ratio: 1 / 1; object-position: 50% 8%; }
  .card img[src*="abdeel-celular-ombro"] { object-position: 78% 22%; }
}

/* links do menu com alvo de toque >= 44 px (QA r6) */
@media (max-width: 1099px) { .nav-links a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; } }