/* Paleta A · Noite de estúdio (tirada das artes BC)
   Seções escuras: azul-noite com luz azul e vermelha e granulado.
   Seções claras: branco com toque de azul; o creme aparece só em filetes finos (--detail). */
:root {
  --dark: #070b1a; --dark2: #0a1129;
  --glow-sky: rgba(169,196,224,.42); --glow-blue: rgba(42,79,147,.7); --glow-red: rgba(158,37,48,.5);
  --rail-d: rgba(169,196,224,.07); --rail-l: rgba(28,50,96,.07); --spot: rgba(238,243,251,.16);
  --on-dark: #f6f1e4; --soft: #a9c4e0; --btn: #eef3fb; --btn-ink: #0b1530; --btn-hover: #cfe0f3;
  --muted-d: #a9b1c6; --muted-d2: #7f8aa6; --line-d: rgba(169,196,224,.18); --border-d: #3a4767; --hover-d: #18244a;
  --accent: #f0502a;
  --paper: #f5f7fb; --ink: #0b1530; --muted-l: #57607a; --muted-l2: #8b93a8; --line-l: #e0e5ee;
  --card1: #ffffff; --card2: #f2f5fa; --card-line: #e1e6ef; --tag-bg: #edf1f7; --tag-ink: #34446b; --icon-ink: #1c3260;
  --about-bg: #eaf0f8; --about-ink: #1c3260;
  --detail: #a9c4e0;
  --proj1: #0f1834; --proj2: #121a33; --proj-line: #2c3a5f; --proj-ink: #94a3c4;
  --m1: #0d1630; --m2: #9fb8d6; --m3: #1c3260; --m4: #e6e9ef; --m5: #2b3d66; --m-edge: #24365f; --m-deep: #04060f; --m-hi: #f3f6ffaa;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' 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>");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body { margin: 0; background: var(--dark); color: var(--on-dark); font-family: Onest, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }
.container { width: min(1240px, 88%); margin: auto; }
.light { background: var(--paper); color: var(--ink); }

/* Navegação fixa: transparente na abertura, vidro escuro ao rolar */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; isolation: isolate; }
/* O vidro fica numa camada própria: assim o menu do celular, fixo no rodapé, não é puxado para dentro do topo */
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .45s; background: rgba(7,11,26,.72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 var(--line-d); }
.topbar.scrolled::before { opacity: 1; }
.nav { height: 104px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; transition: height .45s; }
.topbar.scrolled .nav { height: 76px; }
.nav > .button { justify-self: end; white-space: nowrap; font-size: 13px; }
@media (max-width: 1000px) { .nav > .button { padding: 14px 18px; gap: 16px; } }
/* Menu em pílula de vidro */
.pill { display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 32px rgba(0,0,0,.25); }
.pill a { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-d); padding: 10px 16px; border-radius: 999px; transition: color .25s, background .25s; }
.pill a:hover, .pill a.active { color: var(--on-dark); background: rgba(255,255,255,.09); }
.pill a.active { box-shadow: inset 0 -1px 0 var(--detail); }
.logo { display: flex; align-items: center; gap: 12px; }
.logo svg { width: 42px; height: 42px; }
.logotype { font-size: 18px; line-height: 1.04; letter-spacing: -.8px; font-weight: 550; }
.logotype span { display: block; }
.button { display: inline-flex; gap: 35px; align-items: center; justify-content: space-between; padding: 17px 24px; border: 1px solid var(--border-d); border-radius: 60px; font-size: 14px; font-weight: 500; transition: background .2s, transform .2s; }
.button:hover { background: var(--hover-d); transform: translateY(-2px); }
.button.primary { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.button.primary:hover { background: var(--btn-hover); }
.button .arr { font-size: 20px; line-height: 1; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 1.8px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; height: 6px; width: 11px; background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* Textura granulada das seções escuras (como nas artes BC) */
.grain::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); mix-blend-mode: overlay; opacity: .5; pointer-events: none; }

/* Abertura */
.hero { position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(40% 55% at 6% 10%, var(--glow-sky), transparent 70%),
    radial-gradient(45% 60% at 20% 35%, var(--glow-blue), transparent 72%),
    radial-gradient(30% 40% at 104% 92%, var(--glow-red), transparent 70%),
    var(--dark); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='26.56'><path d='M0 0L46 26.56M0 26.56L46 0' stroke='%23a9c4e0' stroke-opacity='.12' stroke-width='1'/></svg>"); -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 85%); mask-image: linear-gradient(90deg, transparent 25%, #000 85%); }
.hero > .container { position: relative; z-index: 1; padding-top: 104px; }
.herogrid { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; min-height: 660px; padding: 45px 0 70px; gap: 20px; }
.herotext { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(52px, 5.25vw, 78px); font-weight: 400; line-height: 1.08; letter-spacing: -4.2px; margin: 27px 0 25px; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .line > span { display: inline-block; animation: rise 1.1s cubic-bezier(.2,.75,.15,1) both; }
.hero h1 .line.soft > span { color: var(--soft); animation-delay: .14s; }
.herotext .eyebrow, .hero p, .heroactions { animation: fadeup 1s cubic-bezier(.2,.75,.15,1) both; }
.hero p { animation-delay: .3s; }
.heroactions { animation-delay: .42s; }
.hero p { color: var(--muted-d); font-size: 17px; line-height: 1.75; max-width: 430px; margin-bottom: 34px; }
.heroactions { display: flex; gap: 22px; align-items: center; }
.textlink { font-size: 14px; border-bottom: 1px solid var(--border-d); padding: 7px 0; }
.art { position: relative; width: 100%; height: 520px; perspective: 1100px; display: grid; place-items: center; }
.art::after { content: ""; position: absolute; width: 340px; height: 40px; bottom: 5px; border-radius: 50%; background: #0008; filter: blur(18px); }
.orbital { position: absolute; inset: 8%; border: 1px solid var(--line-d); border-radius: 50%; transform: rotate(-20deg); }
.orbital.two { inset: 0 20%; transform: rotate(30deg); }
.sculpture { position: relative; transform: rotate(-18deg); width: 330px; height: 365px; }
.plate { position: absolute; width: 275px; height: 275px; border-radius: 53px; transform: rotate(-29deg) skew(8deg, 8deg) scaleY(.75);
  box-shadow: inset 2px 2px 2px var(--m-hi), inset -5px -7px 5px var(--m-deep), 7px 14px 0 var(--m-edge), 10px 19px 2px var(--m-deep), 16px 32px 30px #0008;
  background: linear-gradient(125deg, var(--m1) 0%, var(--m2) 14%, var(--m3) 25%, var(--m5) 40%, var(--m4) 49%, var(--m5) 54%, var(--m1) 75%, var(--m2) 100%); }
.plate.p1 { top: 130px; left: 20px; }
.plate.p2 { top: 70px; left: 28px; background: linear-gradient(135deg, var(--m4), var(--m2) 8%, var(--m3) 16%, var(--m1) 55%, var(--m5) 77%, var(--m2)); }
.plate.p3 { top: 8px; left: 36px; background: linear-gradient(135deg, var(--m2), var(--m5) 12%, var(--m1) 25%, var(--m3) 53%, var(--m1) 68%, var(--m2)); display: grid; place-items: center; }
.plate.p3::after { content: ""; height: 115px; width: 115px; border-radius: 26px; background: linear-gradient(135deg, var(--m1), var(--m2) 48%, var(--m1) 52%, var(--m3)); box-shadow: inset 2px 2px 1px var(--m-hi), inset -3px -3px 3px var(--m-deep); }
.herofoot { position: relative; border-top: 1px solid var(--line-d); display: flex; justify-content: space-between; align-items: center; padding: 26px 0; font-size: 13px; color: var(--muted-d); }
.herofoot span:first-child { display: flex; gap: 10px; align-items: center; }
.herofoot i { width: 5px; height: 5px; background: var(--soft); border-radius: 100%; }
.herofoot span:last-child { color: var(--soft); }

/* Seções */
section { padding: 105px 0; }
.sectionintro { display: flex; justify-content: space-between; align-items: start; gap: 60px; margin: 27px 0 55px; }
.sectionintro h2, h2 { font-size: clamp(35px, 4vw, 55px); font-weight: 400; letter-spacing: -2.2px; line-height: 1.15; }
.sectionintro p { max-width: 360px; font-size: 16px; line-height: 1.75; color: var(--muted-l); padding-top: 7px; }

/* Serviços */
.servicegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service { position: relative; overflow: hidden; padding: 30px 25px 26px; border: 1px solid var(--card-line); border-radius: 18px; background: linear-gradient(140deg, var(--card1), var(--card2)); min-height: 370px; display: flex; flex-direction: column; }
.service::before { content: ""; position: absolute; top: 0; left: 25px; right: 25px; height: 1px; background: linear-gradient(90deg, transparent, var(--detail), transparent); }
.servicehead { display: flex; justify-content: space-between; align-items: center; color: var(--muted-l); font-size: 12px; letter-spacing: .06em; }
.serviceicon { width: 58px; height: 58px; border: 1px solid var(--detail); border-radius: 14px; display: grid; place-items: center; color: var(--icon-ink); }
.serviceicon svg { width: 42px; height: 42px; }
.service h3 { font-size: 25px; letter-spacing: -1px; font-weight: 450; margin: 36px 0 13px; }
.service p { font-size: 15px; line-height: 1.75; color: var(--muted-l); }
.servicetags { margin-top: auto; padding-top: 25px; display: flex; flex-wrap: wrap; gap: 6px; }
.servicetags span { font-size: 12px; border-radius: 30px; padding: 7px 11px; background: var(--tag-bg); color: var(--tag-ink); }
.contractnote { font-size: 14px; color: var(--muted-l); display: flex; justify-content: space-between; margin-top: 25px; }

/* Portfólio */
.portfolio { background: var(--dark2); overflow: hidden; }
.portfolio .sectionintro p { color: var(--muted-d); }

/* Processo */
.processgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.step { position: relative; border-top: 1px solid var(--line-l); padding-top: 23px; }
.step::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 1px; background: var(--detail); }
.stepicon { display: block; width: 46px; height: 46px; color: var(--icon-ink); margin-bottom: 18px; }
.stepnum { color: var(--muted-l); font-size: 12px; letter-spacing: .06em; }
.step h3 { font-size: 23px; font-weight: 450; letter-spacing: -.5px; margin: 25px 0 13px; }
.step p { font-size: 15px; color: var(--muted-l); line-height: 1.75; }

/* Estúdio (seção escura, com a frase manifesto) */
.studio { background: var(--dark2); position: relative; isolation: isolate; overflow: hidden; }
.about { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 85px; padding-top: 85px; margin-top: 85px; border-top: 1px solid var(--line-d); }
.aboutvisual { height: 340px; position: relative; border-radius: 18px; overflow: hidden; display: grid; place-items: center; color: var(--soft);
  background: radial-gradient(60% 70% at 50% 0%, rgba(169,196,224,.22), transparent 70%), linear-gradient(160deg, #1c3260, #0b1530 70%); }
.aboutvisual svg { width: 170px; transform: rotate(-12deg); }
.aboutvisual::before { content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%; border: 1px solid var(--detail); opacity: .6; transform: translate(80px, -80px); }
.about h2 { font-size: 40px; letter-spacing: -1.5px; margin: 20px 0; }
.about p { font-size: 16px; color: var(--muted-d); line-height: 1.75; }

/* Perguntas frequentes */
.faq { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; }
.faq h2 { font-size: 38px; margin-top: 18px; }
.faq details { border-bottom: 1px solid var(--line-l); padding: 22px 0; }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 15px; cursor: pointer; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--muted-l); font-weight: 300; }
.faq details[open] summary::after { content: "−"; }
.faq details p { font-size: 15px; line-height: 1.75; color: var(--muted-l); margin-top: 15px; max-width: 54ch; }

/* Contato e rodapé */
.contact { text-align: center; position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(50% 80% at 0% 100%, var(--glow-blue), transparent 70%),
    radial-gradient(45% 70% at 100% 110%, var(--glow-red), transparent 70%),
    var(--dark); }
.contact .eyebrow { justify-content: center; }
.contact h2 { font-size: clamp(42px, 5.8vw, 77px); letter-spacing: -3px; margin: 25px auto; max-width: 850px; }
.contact h2 span { color: var(--soft); }
.contact p { font-size: 17px; color: var(--muted-d); line-height: 1.75; margin-bottom: 32px; }
.contact .button { min-width: 250px; }
.contact small { display: block; color: var(--muted-d); font-size: 13px; margin-top: 18px; }
footer { background: var(--dark); }
.footerinner { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line-d); padding: 30px 0; gap: 25px; }
.footerinner p, .footerinner > a { font-size: 13px; color: var(--muted-d2); }
.footerinner .logotype { font-size: 15px; }
.footerinner .logo svg { width: 30px; height: 30px; }
.skip { position: absolute; top: -100px; left: 20px; background: var(--btn); color: var(--btn-ink); padding: 15px; z-index: 10; }
.skip:focus { top: 15px; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.mobilelinks { display: none; }

/* ================= Motion ================= */
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes float { from { translate: 0 -12px; rotate: -2deg; } to { translate: 0 12px; rotate: 2deg; } }
@keyframes sheen { 0%, 100% { background-position: 110% 0; } 50% { background-position: -10% 0; } }
@keyframes spin { to { rotate: 360deg; } }

/* Objetos flutuantes: .obj recebe o parallax (mouse e rolagem), .floaty a flutuação, .disc o volume */
.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scene .obj { position: absolute; }
.obj { transform: translate3d(calc(var(--mx, 0px) * var(--d, 1)), calc((var(--my, 0px) + var(--sy, 0px)) * var(--d, 1)), 0); transition: transform .9s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.floaty { animation: float var(--dur, 10s) ease-in-out var(--delay, 0s) infinite alternate; }
.hero .scene .floaty { animation-name: float; }
.o1 { right: -40px; top: 70%; }
.c1 { left: 5%; top: 16%; }

/* Lâmina metálica: um plano do símbolo em metal azul (só cores da paleta) */
.lamina { width: var(--w); aspect-ratio: 1; border-radius: 22%; transform: rotate(calc(-29deg + var(--tilt, 0deg))) skew(8deg, 8deg) scaleY(.75);
  background: linear-gradient(125deg, var(--m1) 0%, var(--m2) 14%, var(--m3) 25%, var(--m5) 40%, var(--m4) 49%, var(--m5) 54%, var(--m1) 75%, var(--m2) 100%);
  box-shadow: inset 2px 2px 2px var(--m-hi), inset -4px -6px 5px var(--m-deep), 5px 10px 0 var(--m-edge), 8px 14px 2px var(--m-deep), 18px 32px 34px #0009; position: relative; overflow: hidden; }

/* Revelação ao rolar (só quando o JavaScript está ativo) */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.2,.75,.15,1), transform 1s cubic-bezier(.2,.75,.15,1); transition-delay: calc(var(--i, 0) * 110ms); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* Serviços e processo */
.js .service.in { transition: opacity 1s cubic-bezier(.2,.75,.15,1), transform .5s cubic-bezier(.2,.75,.15,1), box-shadow .5s; transition-delay: 0s; }
.service:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(11,21,48,.08); }
.service::before { transition: left .6s, right .6s; }
.service:hover::before { left: 0; right: 0; }
.serviceicon { transition: transform .5s cubic-bezier(.2,.75,.15,1), background .5s; }
.service:hover .serviceicon { transform: rotate(-8deg); background: #fff; }
.js .step::before { width: 0; transition: width 1.2s .3s cubic-bezier(.2,.75,.15,1); }
.js .step.in::before { width: 48px; }
.aboutvisual .floaty { display: grid; place-items: center; }

/* ================= Portfólio ================= */
/* Destaque: pilha de camadas que se revezam + antes e depois */
.case { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: start; margin-bottom: 76px; }
.stackwrap { display: grid; gap: 18px; min-width: 0; }
.stack { position: relative; height: clamp(300px, 34vw, 470px); }
.layer { position: absolute; inset: 0 40px 40px 0; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--proj-line); background: var(--proj1); box-shadow: 0 30px 60px rgba(0,0,0,.35); transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.2,.75,.15,1), opacity .9s, filter .9s; }
.layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.layer figcaption { position: absolute; left: 14px; bottom: 14px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; color: var(--on-dark); background: rgba(7,11,26,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); }
.layer[data-pos="0"] { z-index: 5; transform: none; }
.layer[data-pos="1"] { z-index: 4; transform: translate(20px, 20px) scale(.96); filter: brightness(.6); }
.layer[data-pos="2"] { z-index: 3; transform: translate(40px, 40px) scale(.92); filter: brightness(.38); }
.layer[data-pos="3"], .layer[data-pos="4"] { z-index: 2; transform: translate(40px, 40px) scale(.92); opacity: 0; }
.layer.out { z-index: 6; transform: translate(80px, -60px) rotate(5deg); opacity: 0; }
.stackbar { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.round { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--border-d); background: transparent; color: var(--on-dark); font: inherit; font-size: 15px; cursor: pointer; display: grid; place-items: center; transition: background .3s; }
.round:hover { background: var(--hover-d); }
.round:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.count { flex: 1; font-size: 12px; color: var(--muted-d); text-align: center; }
.count b { color: var(--on-dark); font-weight: 500; }

.casecopy { border: 1px solid var(--proj-line); border-radius: 16px; padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; background: linear-gradient(160deg, rgba(169,196,224,.06), transparent 60%); min-width: 0; }
.casecopy .kind, .vside .kind { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--soft); }
.casecopy h3 { font-size: clamp(30px, 2.8vw, 40px); font-weight: 400; letter-spacing: -1.4px; line-height: 1.05; }
.casecopy p { font-size: 15px; line-height: 1.75; color: var(--muted-d); }
.casecopy ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-d); }
.casecopy li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-d); font-size: 14px; color: var(--on-dark); }
.casecopy li span:last-child { color: var(--muted-d2); text-align: right; }
.casecopy .textlink, .vnav .textlink { background: none; border: 0; border-bottom: 1px solid var(--border-d); color: var(--on-dark); font: inherit; font-size: 12px; padding: 7px 0; cursor: pointer; align-self: flex-start; }
.casecopy .textlink:hover, .vnav .textlink:hover { border-color: var(--soft); }

/* Antes e depois: a alça é uma lâmina laranja */
.compare { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 760 / 400; background: #fff; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.compare .before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.compare .handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--accent); transform: translateX(-1px); pointer-events: none; }
.compare .handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 18px; transform: translate(-50%, -50%); background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.compare .tag { position: absolute; top: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: rgba(11,21,48,.78); color: #f6f1e4; pointer-events: none; }
.compare .tag.l { left: 10px; }
.compare .tag.r { right: 10px; }

/* Filtros */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.chip { font: inherit; font-size: 12px; color: var(--muted-d); background: rgba(255,255,255,.04); border: 1px solid var(--line-d); border-radius: 999px; padding: 9px 15px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; transition: background .3s, color .3s, border-color .3s; }
.chip i { font-style: normal; font-size: 10px; color: var(--muted-d2); }
.chip:hover { color: var(--on-dark); border-color: var(--border-d); }
.chip.on { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.chip.on i { color: var(--btn-ink); opacity: .55; }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Cards: a capa desliza como a camada de cima do símbolo e revela a prancha por baixo */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 26px; }
.work { min-width: 0; }
.work.hide { display: none; }
.work.fadein { animation: fadeup .6s cubic-bezier(.2,.75,.15,1) both; }
.workbtn { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; position: relative; border-radius: 16px; text-align: left; }
.workbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.layers { position: relative; display: block; aspect-ratio: 808 / 632; }
.layers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; border: 1px solid var(--proj-line); display: block; transition: transform .8s cubic-bezier(.2,.75,.15,1), filter .8s; }
.layers .under { transform: translate(12px, 12px) scale(.97); filter: brightness(.4); }
.layers .cover { box-shadow: 0 20px 40px rgba(0,0,0,.3); }
.workbtn:hover .cover, .workbtn:focus-visible .cover { transform: translate(-14px, -16px) rotate(-2deg); }
.workbtn:hover .under, .workbtn:focus-visible .under { transform: translate(12px, 10px) scale(1); filter: brightness(.95); }
.open { position: absolute; right: 14px; bottom: 14px; z-index: 2; font-size: 11px; padding: 8px 13px; border-radius: 999px; color: var(--on-dark); background: rgba(7,11,26,.68); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.open b { color: var(--accent); font-weight: 500; }
.workbtn:hover .open, .workbtn:focus-visible .open { opacity: 1; transform: none; }
@media (hover: none) { .open { opacity: 1; transform: none; } }
.workmeta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 2px 0; font-size: 16px; color: var(--on-dark); }
.workmeta span:last-child { font-size: 12px; color: var(--muted-d); text-align: right; }
.workline { font-size: 14px; color: var(--muted-d); line-height: 1.6; padding: 6px 2px 0; max-width: 42ch; }
.portfolio .more { display: flex; justify-content: center; margin-top: 60px; }

/* Visualizador do case */
html.lock { overflow: hidden; }
.viewer { width: min(1180px, 94vw); height: min(860px, 90vh); max-width: none; max-height: none; padding: 0; border: 1px solid var(--line-d); border-radius: 20px; background: var(--dark2); color: var(--on-dark); display: none; grid-template-columns: 340px minmax(0, 1fr); overflow: hidden; }
.viewer[open] { display: grid; animation: vin .5s cubic-bezier(.2,.75,.15,1); }
@keyframes vin { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.viewer::backdrop { background: rgba(4,6,15,.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vside { position: relative; padding: 34px 28px; display: flex; flex-direction: column; gap: 16px; border-right: 1px solid var(--line-d); overflow: auto; min-height: 0; }
.vside h3 { font-size: 32px; font-weight: 400; letter-spacing: -1.2px; line-height: 1.08; padding-right: 40px; }
.vside p { font-size: 15px; line-height: 1.75; color: var(--muted-d); }
.vside ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-d); }
.vside li { display: flex; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-d); font-size: 12px; }
.vside li::before { content: ""; width: 10px; height: 6px; flex: none; background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.vnav { margin-top: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vnav .textlink { margin-left: auto; }
.vclose { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-d); background: transparent; color: var(--on-dark); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.vclose:hover { background: var(--hover-d); }
.vboard { overflow-y: auto; overscroll-behavior: contain; background: #fff; min-height: 0; }
.vboard img { display: block; width: 100%; height: auto; }
.vboard:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (min-width: 1600px) { .herogrid { min-height: 730px; } }
@media (max-width: 1000px) {
  .hero h1 { font-size: 57px; letter-spacing: -2.8px; }
  .sculpture { transform: rotate(-18deg) scale(.8); }
  .art { height: 450px; }
  .pill a { padding: 10px 11px; letter-spacing: .05em; }
  .case { grid-template-columns: minmax(0, 1fr); }
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .vside { border-right: 0; border-bottom: 1px solid var(--line-d); max-height: 40vh; overflow: auto; }
  .service { padding: 25px 20px; }
  .about { gap: 40px; }
  .sectionintro { gap: 30px; }
  .heroactions { gap: 15px; }
  .heroactions .button { gap: 15px; }
  .heroactions .textlink { font-size: 11px; }
}
@media (max-width: 700px) {
  .container { width: 88%; }
  .nav { height: 80px; display: flex; justify-content: space-between; }
  .topbar.scrolled .nav { height: 66px; }
  /* No celular o menu vira uma pílula fixa no rodapé da tela */
  .pill { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; background: rgba(7,11,26,.78); }
  .pill::-webkit-scrollbar { display: none; }
  .pill a { font-size: 11px; padding: 10px 12px; white-space: nowrap; letter-spacing: .04em; }
  footer { padding-bottom: 70px; }
  .hero > .container { padding-top: 80px; }
  .nav > .button { font-size: 12px; padding: 12px 15px; gap: 12px; }
  .logo { gap: 8px; }
  .logo svg { width: 32px; height: 32px; }
  .logotype { font-size: 15px; }
  .herogrid { grid-template-columns: 1fr; padding: 55px 0 30px; gap: 0; min-height: 0; }
  .hero h1 { font-size: clamp(43px, 9.5vw, 64px); letter-spacing: -2.4px; max-width: 580px; margin: 22px 0; }
  .hero p { font-size: 16px; max-width: 360px; }
  .eyebrow { font-size: 11px; letter-spacing: 1.5px; }
  .heroactions { flex-wrap: wrap; }
  .heroactions .button { padding: 15px 20px; font-size: 14px; gap: 20px; }
  .art { height: 350px; margin-top: 15px; }
  .sculpture { transform: rotate(-18deg) scale(.74); }
  .orbital { inset: 0 10%; }
  .art::after { bottom: 10px; width: 230px; }
  .herofoot { font-size: 12px; gap: 15px; padding: 22px 0; }
  .herofoot span:nth-child(2) { display: none; }
  section { padding: 70px 0; }
  .sectionintro { display: block; margin: 20px 0 32px; }
  .sectionintro h2, h2 { font-size: 36px; letter-spacing: -1.6px; }
  .sectionintro p { margin-top: 20px; font-size: 16px; max-width: 360px; }
  .servicegrid { grid-template-columns: 1fr; gap: 15px; }
  .service { min-height: 310px; padding: 25px; }
  .service::before { left: 25px; right: 25px; }
  .service h3 { margin-top: 25px; }
  .service p { max-width: 360px; }
  .contractnote { font-size: 13px; gap: 15px; line-height: 1.6; flex-direction: column; }
  .casecopy { padding: 24px 20px; }
  .stack { height: 260px; }
  .layer img { object-fit: contain; background: var(--proj1); }
  .works { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .filters { gap: 6px; }
  .vside { padding: 22px 18px; }
  .vside p, .vside ul { display: none; }
  .processgrid { grid-template-columns: 1fr; gap: 30px; }
  .step h3 { margin: 18px 0 10px; }
  .step p { max-width: 420px; }
  .about { grid-template-columns: 1fr; gap: 30px; padding-top: 55px; margin-top: 55px; }
  .aboutvisual { height: 270px; }
  .about h2 { font-size: 33px; }
  .faq { grid-template-columns: 1fr; gap: 25px; }
  .faq h2 { font-size: 33px; }
  .faq summary { font-size: 16px; }
  .contact h2 { font-size: 43px; letter-spacing: -2px; }
  .contact p { font-size: 16px; }
  .footerinner { flex-wrap: wrap; }
  .footerinner p { order: 3; width: 100%; font-size: 12px; }
  .scene .lamina { width: calc(var(--w) * .6); }
  .o1 { right: -50px; top: 74%; }
  .mobilelinks { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .step::before { width: 48px; }
  .obj { transform: none; }
  .js .processgrid.live .step.in { opacity: 1; }
}

/* ================= Rodada de 07/11: luz de palco, colunas, numeração, parede, manifesto ================= */

/* Títulos numerados: "01 ── O QUE CRIAMOS" (o traço é o laranja-sinal) */
.eyebrow.num::before { display: none; }
.eyebrow.num b { font-weight: 500; font-size: 11px; letter-spacing: .08em; padding: 3px 7px; border-radius: 5px; border: 1px solid currentColor; color: var(--soft); display: inline-flex; align-items: center; position: relative; margin-right: 44px; }
.eyebrow.num b::after { content: ""; position: absolute; left: calc(100% + 10px); top: 50%; width: 26px; height: 1px; background: var(--accent); }
.light .eyebrow.num b { color: var(--icon-ink); }

/* Colunas finas atravessando as seções, como as varas de luz de um teatro */
.rails { position: relative; isolation: isolate; --rail: var(--rail-d); }
.light.rails { --rail: var(--rail-l); }
.rails::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: min(1240px, 88%); transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--rail) 0 1px, transparent 1px 25%); border-right: 1px solid var(--rail);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }

/* Bordas finas com luz: o canto de cima recebe o refletor */
.casecopy { position: relative; }
.service::after, .casecopy::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(169,196,224,.95), rgba(169,196,224,0) 38%, rgba(169,196,224,0) 70%, rgba(169,196,224,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* Abertura: um refletor sobre a escultura, feixes finos e o chão do palco aceso */
.stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cone { position: absolute; top: -8%; left: 74%; width: 640px; height: 112%; transform: translateX(-50%); background: linear-gradient(180deg, var(--spot), rgba(238,243,251,.05) 55%, transparent 80%); clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); filter: blur(16px); }
.beams i { position: absolute; top: 0; left: var(--x); width: 1px; height: var(--h); opacity: .5; background: linear-gradient(180deg, rgba(169,196,224,0), rgba(169,196,224,.6) 35%, rgba(169,196,224,0)); box-shadow: 0 0 14px 1px rgba(169,196,224,.3); animation: beam var(--t) ease-in-out var(--o, 0s) infinite alternate; }
@keyframes beam { from { opacity: .12; } to { opacity: .75; } }
.horizon { position: absolute; left: 60%; bottom: 0; width: 150vw; height: 56vw; transform: translate(-50%, 74%); border-radius: 50%; background: linear-gradient(180deg, #0b1530, var(--dark) 22%);
  box-shadow: 0 -1px 0 rgba(238,243,251,.5), 0 -16px 50px rgba(169,196,224,.22), 0 -60px 140px rgba(42,79,147,.5); }
.horizon::before { content: ""; position: absolute; left: 50%; top: -3px; width: 40%; height: 6px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(238,243,251,.9), transparent); filter: blur(1.5px); }
.contact > .container { position: relative; z-index: 1; }
.contact .cone { left: 50%; width: 760px; height: 125%; top: -12%; opacity: .75; }

/* Parede de trabalhos: duas fileiras que andam devagar em sentidos opostos */
.wall { display: grid; gap: 16px; margin: 0 0 85px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.wallrow { overflow: hidden; }
.walltrack { display: flex; gap: 16px; padding-right: 16px; width: max-content; animation: wall 70s linear infinite; }
.wallrow.rev .walltrack { animation-direction: reverse; animation-duration: 85s; }
.wall:hover .walltrack { animation-play-state: paused; }
@keyframes wall { to { transform: translateX(-50%); } }
.wall figure { margin: 0; flex: none; position: relative; width: 300px; aspect-ratio: 808 / 632; border-radius: 14px; overflow: hidden; border: 1px solid var(--proj-line); background: var(--proj1); }
.wall img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.82) saturate(.9); transition: filter .5s; }
.wall figure:hover img { filter: none; }
.wall span { position: absolute; left: 10px; bottom: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; color: var(--on-dark); background: rgba(7,11,26,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); }

/* Estúdio: a frase manifesto sob uma luz de cima */
.studio { background: radial-gradient(48% 42% at 50% 0%, rgba(169,196,224,.16), transparent 72%), var(--dark2); }
.manifesto { text-align: center; padding-top: 10px; }
.manifesto p { font-size: clamp(46px, 7.2vw, 108px); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; color: var(--on-dark); }
.manifesto span { display: block; color: var(--soft); }
.manifesto::after { content: ""; display: block; width: 64px; height: 1px; margin: 38px auto 0; background: var(--detail); }

/* Processo: a etapa da vez acende, as outras ficam na penumbra */
.processgrid { padding-top: 30px; }
.step { isolation: isolate; }
.step::after { content: ""; position: absolute; z-index: -1; left: -12%; right: -12%; top: -160px; height: 360px; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: linear-gradient(180deg, rgba(169,196,224,.5), rgba(169,196,224,0) 80%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); filter: blur(10px); }
.js .processgrid.live .step.in { opacity: .5; transition: opacity .7s cubic-bezier(.2,.75,.15,1), transform 1s cubic-bezier(.2,.75,.15,1); }
.js .processgrid.live .step.in.lit { opacity: 1; }
.step.lit::after { opacity: 1; }
.js .processgrid.live .step.lit::before { width: 100%; }
.stepicon { transition: transform .7s cubic-bezier(.2,.75,.15,1); }
.step.lit .stepicon { transform: translateY(-4px); }

@media (max-width: 700px) {
  .wall { margin-bottom: 55px; gap: 10px; }
  .walltrack { gap: 10px; padding-right: 10px; }
  .wall figure { width: 200px; }
  .manifesto p { font-size: 46px; }
  .cone { left: 50%; width: 460px; }
  .horizon { left: 50%; width: 260vw; height: 120vw; transform: translate(-50%, 82%); }
  .beams i:nth-child(-n+2) { display: none; }
  .eyebrow.num b { margin-right: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .wallrow { overflow-x: auto; }
  .beams i { opacity: .45; }
  .js .processgrid.live .step.in { opacity: 1; }
  .step.lit::after { opacity: 0; }
}