@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --ground: #0e0e10;
  --plate: #151517;
  --line: rgba(236, 233, 226, 0.12);
  --line-strong: rgba(236, 233, 226, 0.26);
  --ink: #ece9e2;
  --ink-2: #b8b4ab;
  --ink-3: #8d897f;
  --orange: #ff8a1e;
  --orange-hover: #ff9b3f;
  --orange-ink: #1a0f04;
  --orange-ink-2: rgba(26, 15, 4, 0.74);
  --pixio: #14d8c4;
  --vita: #c8a050;
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gutter: clamp(20px, 4vw, 64px);
  --rail: 0px;
  --wdth: 100;
  color-scheme: dark;
}

@media (min-width: 1024px) {
  :root { --rail: 72px; }
}
@media (max-width: 1199px) {
  :root { --wdth: 94; }
}
@media (max-width: 639px) {
  :root { --wdth: 88; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: #3a3a41 var(--ground);
  caret-color: var(--orange);
  accent-color: var(--orange);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  padding-left: var(--rail);
  font-size: 1.0625rem;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

::selection { background: var(--orange); color: var(--orange-ink); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.06em; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { font-weight: 700; text-wrap: balance; margin: 0; }

p { margin: 0; }

.wrap {
  width: min(1360px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 60;
  padding: 10px 14px;
  background: var(--orange);
  color: var(--orange-ink);
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
}
.skip:focus { top: 12px; }

.meta {
  color: var(--ink-3);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Diretório do prédio: a régua à esquerda */

.rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rail);
  display: none;
  z-index: 40;
  border-right: 1px solid var(--line);
  background: var(--ground);
}
@media (min-width: 1024px) {
  .rail { display: flex; align-items: center; justify-content: center; }
}
.rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.rail a {
  position: relative;
  display: grid;
  grid-template-columns: 2px auto;
  align-items: center;
  gap: 12px;
  height: 44px;
  color: var(--ink-3);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.rail a::before {
  content: "";
  width: 2px;
  height: 10px;
  background: var(--line-strong);
  transition: height 0.5s var(--ease), background 0.3s;
}
.rail a .label {
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  translate: -6px -50%;
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--plate);
  color: var(--ink);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, translate 0.25s var(--ease);
}
.rail a:hover .label, .rail a:focus-visible .label { opacity: 1; translate: 0 -50%; }
.rail a:hover, .rail a[aria-current="true"] { color: var(--ink); }
.rail a[aria-current="true"] { grid-template-columns: 2px auto auto; height: auto; min-height: 44px; }
.rail a[aria-current="true"]::before { height: 44px; background: var(--orange); }
.rail a[aria-current="true"] .label {
  position: static;
  opacity: 1;
  translate: none;
  padding: 0;
  border: 0;
  background: none;
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: auto;
}

/* Topo */

.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}
.mark {
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--ink);
}
.mark b { color: var(--orange); font-weight: 800; }
.top nav { display: flex; gap: clamp(14px, 2.2vw, 30px); }
.top nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9375rem;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.top nav a:hover { color: var(--ink); border-color: var(--ink); }
.top nav .live { color: var(--orange); }
.top nav .live:hover { border-color: var(--orange); }
@media (max-width: 639px) {
  .top nav .opt { display: none; }
}
.top .now { display: none; }
@media (max-width: 1023px) {
  .top .now {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 32px;
    margin: 0;
    border-top: 1px solid var(--line);
    color: var(--ink-2);
  }
  .top .now::before { content: ""; width: 18px; height: 2px; background: var(--orange); }
}

/* Ações */

.actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease-out, background 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn-paint { background: var(--orange); color: var(--orange-ink); }
.btn-paint:hover { background: var(--orange-hover); }
.btn-line { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Entrada */

.hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  min-height: calc(100svh - 64px);
  padding-block: clamp(48px, 8vh, 96px);
}
.hero h1 {
  font-size: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-variation-settings: "wdth" var(--wdth);
  margin-bottom: 0.45em;
}
.hero h1 .w {
  display: inline-block;
  opacity: 0;
  translate: 0 0.35em;
  filter: blur(8px);
  animation: rise 0.9s var(--ease) forwards;
  animation-delay: calc(var(--n) * 60ms + 120ms);
}
.hero h1 .w:nth-child(1) { --n: 0; }
.hero h1 .w:nth-child(2) { --n: 1; }
.hero h1 .w:nth-child(3) { --n: 2; }
.hero h1 .w:nth-child(4) { --n: 3; }
.hero h1 .w:nth-child(5) { --n: 4; }
.hero h1 .w:nth-child(6) { --n: 5; }
.hero h1 .w:nth-child(7) { --n: 6; }
.hero h1 .w:nth-child(8) { --n: 7; }
.hero h1 .w:nth-child(9) { --n: 8; }
.hero .lead {
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 32em;
  margin-bottom: 2rem;
}
.hero .lead b { color: var(--ink); font-weight: 600; }

.stage {
  position: relative;
  height: min(74vh, 740px);
  perspective: 1400px;
}
.window {
  position: absolute;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease);
  animation: settle 1.3s var(--ease) both;
}
.window.pixio { --w: min(300px, 38vw); --glow: rgba(20, 216, 196, 0.55); right: 4%; bottom: 0; z-index: 2; animation-delay: 0.35s; }
.window.vita { --w: min(252px, 32vw); --glow: rgba(200, 160, 80, 0.58); left: 0; top: 0; z-index: 1; animation-delay: 0.55s; }
.window::after {
  content: "";
  position: absolute;
  inset: 8% -34% -22%;
  z-index: -1;
  background: radial-gradient(60% 50% at 50% 64%, var(--glow), transparent 72%);
  filter: blur(46px);
}

/* Janela: o iPhone desenhado */

.phone {
  position: relative;
  width: var(--w);
  aspect-ratio: 1320 / 2868;
  margin: 0;
  border-radius: calc(var(--w) * 0.165);
  padding: calc(var(--w) * 0.03);
  background: #09090b;
  box-shadow:
    0 48px 90px -32px rgba(0, 0, 0, 0.9),
    0 12px 28px -14px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.09);
}
.phone .screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.138);
  background: #000;
}
.phone img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.04;
  transition: opacity 0.55s var(--ease), scale 1.1s var(--ease);
}
.phone img.on { opacity: 1; scale: 1; }
.phone::after {
  content: "";
  position: absolute;
  top: calc(var(--w) * 0.066);
  left: 50%;
  translate: -50% 0;
  width: calc(var(--w) * 0.27);
  height: calc(var(--w) * 0.08);
  border-radius: 999px;
  background: #000;
  z-index: 2;
}

/* Andares */

.floor {
  position: relative;
  padding-top: clamp(88px, 11vw, 160px);
  padding-bottom: clamp(88px, 11vw, 160px);
  border-top: 1px solid var(--line);
  background-image: repeating-linear-gradient(90deg, rgba(236, 233, 226, 0.035) 0 1px, transparent 1px 96px);
}
.plate-floor { background-color: var(--plate); }
.floor-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px 28px;
  align-items: center;
  margin-bottom: clamp(40px, 6vw, 88px);
}
.floor-head .icon {
  width: 72px;
  height: 72px;
  border-radius: 22%;
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.floor-head h2 {
  font-size: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-variation-settings: "wdth" var(--wdth);
}
.floor-head .claim {
  grid-column: 1 / -1;
  font-size: clamp(1.25rem, 1rem + 1.3vw, 1.875rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  max-width: 28em;
}
@media (max-width: 639px) {
  .floor-head { grid-template-columns: auto 1fr; }
  .floor-head .meta { grid-column: 1 / -1; }
  .floor-head .icon { width: 56px; height: 56px; }
}

.tour {
  --tour-gap: clamp(32px, 6vw, 96px);
  --leader: calc((100cqw - var(--tour-gap)) * 5 / 24 + var(--tour-gap) - min(150px, 11vw));
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--tour-gap);
  align-items: start;
  container-type: inline-size;
}
.stick {
  position: sticky;
  top: 96px;
  display: flex;
  justify-content: center;
  padding-block: 24px;
}
.stick .phone { --w: min(300px, 22vw); }
.stick .phone::before {
  content: "";
  position: absolute;
  inset: 14% -40% -18%;
  z-index: -1;
  background: radial-gradient(58% 48% at 50% 60%, var(--glow), transparent 72%);
  filter: blur(50px);
  opacity: 0.9;
}
.pixio-floor { --glow: rgba(20, 216, 196, 0.42); }
.vita-floor { --glow: rgba(200, 160, 80, 0.46); }
.chapters {
  display: grid;
  gap: clamp(72px, 14vh, 160px);
  padding-block: clamp(24px, 8vh, 96px);
}
.chapter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  transition: opacity 0.4s;
}
.chapter h3 {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
}
.chapter p {
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 36em;
  margin-bottom: 1.25rem;
}
.callouts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.callouts li {
  position: relative;
  display: block;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.callouts li::before {
  content: "";
  position: absolute;
  right: calc(100% - 12px);
  top: 0.72em;
  width: calc(var(--leader) + 12px);
  height: 1px;
  background: var(--line-strong);
  transition: background 0.5s;
}
.callouts li::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--leader) - 3px);
  top: 0.72em;
  width: 7px;
  height: 7px;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background 0.5s, box-shadow 0.5s;
}
.callouts b { color: var(--ink); font-weight: 600; }
.chapter.on .callouts li::before { background: var(--orange); }
.chapter.on .callouts li::after { background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 138, 30, 0.18); }
.mini { display: none; }
.tour .actions { padding-top: 8px; }
.also { color: var(--ink-3); font-size: 0.9375rem; max-width: 36em; }
.also b { color: var(--ink-2); font-weight: 600; }

@media (max-width: 899px) {
  .tour { grid-template-columns: 1fr; gap: 0; container-type: normal; }
  .stick { display: none; }
  .chapters { gap: clamp(56px, 10vh, 96px); padding-block: 0; }
  .chapter { --chapter-gap: 24px; grid-template-columns: 1fr 112px; gap: var(--chapter-gap); align-items: center; }
  .chapter .mini { display: block; --w: 112px; }
  .callouts li { padding-left: 0; padding-right: 16px; }
  .callouts li::before { right: auto; left: calc(100% - 8px); width: calc(var(--chapter-gap) + 8px); }
  .callouts li::after { left: auto; right: calc(-1 * var(--chapter-gap) - 3px); }
  .tour .actions, .tour .also { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
  .chapter { --chapter-gap: 16px; grid-template-columns: 1fr 96px; }
  .chapter .mini { --w: 96px; }
}

/* Mimova e Empresa */

.mimova-floor .floor-head { margin-bottom: clamp(24px, 3vw, 40px); }

.empresa h2 {
  font-size: clamp(2rem, 1rem + 3.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 14em;
  margin-bottom: clamp(32px, 5vw, 64px);
  font-variation-settings: "wdth" var(--wdth);
}
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
.principles > p { color: var(--ink-2); line-height: 1.55; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.principles strong { display: block; color: var(--ink); font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: 0.5em; }
@media (max-width: 899px) {
  .principles { grid-template-columns: 1fr; gap: 28px; }
}

/* Portaria: o andar laranja */

.portaria {
  background: var(--orange);
  color: var(--orange-ink);
  padding-top: clamp(88px, 11vw, 160px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.portaria h2 {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0.6em;
  color: var(--orange-ink-2);
}
.portaria .mail {
  display: inline-block;
  font-size: clamp(1.9rem, 0.6rem + 6.6vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
  font-variation-settings: "wdth" var(--wdth);
  transition: letter-spacing 0.5s var(--ease);
}
.portaria .mail:hover { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.08em; }
.portaria .notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 48px;
  margin-top: clamp(32px, 5vw, 64px);
  color: var(--orange-ink-2);
  max-width: 60em;
}
.portaria .notes b { color: var(--orange-ink); font-weight: 600; }
.portaria ::selection { background: var(--orange-ink); color: var(--orange); }
.portaria :focus-visible { outline-color: var(--orange-ink); }

footer {
  background: var(--orange);
  color: var(--orange-ink);
  font-size: 0.875rem;
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 24px 0 32px;
  border-top: 1px solid rgba(26, 15, 4, 0.2);
}
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer ::selection { background: var(--orange-ink); color: var(--orange); }
footer :focus-visible { outline-color: var(--orange-ink); }

/* Documentos */

.doc {
  width: min(720px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 10vw, 128px);
}
.doc h1 { font-size: clamp(2.25rem, 1rem + 3.4vw, 3.75rem); letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.4em; }
.doc h2 { font-size: 1.375rem; letter-spacing: -0.015em; margin: 2.5rem 0 0.6rem; }
.doc p, .doc li { color: var(--ink-2); line-height: 1.6; }
.doc p + p, .doc ul { margin-top: 0.9rem; }
.doc li + li { margin-top: 0.4rem; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc .meta { display: block; margin-bottom: 2rem; }
.doc .actions { margin-top: 2.5rem; }

/* Revelação ao rolar */

.reveal {
  opacity: 0;
  translate: 0 18px;
  filter: blur(8px);
  transition: opacity 0.8s var(--ease), translate 0.8s var(--ease), filter 0.8s var(--ease);
}
.reveal.in { opacity: 1; translate: 0 0; filter: blur(0); }
.no-js .reveal { opacity: 1; translate: none; filter: none; }
.no-js .hero h1 .w { animation: none; opacity: 1; translate: none; filter: none; }
.no-js .window { animation: none; }
.no-js .rail a:first-child { color: var(--ink); }

@keyframes rise {
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}
@keyframes settle {
  from { opacity: 0; translate: 0 48px; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: clamp(40px, 7vh, 64px); }
  .stage { height: min(60vh, 520px); margin-top: 24px; }
  .window.pixio { --w: min(240px, 44vw); right: 6%; }
  .window.vita { --w: min(200px, 36vw); left: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { translate: none; filter: none; transition: opacity 0.5s; }
  .hero h1 .w { translate: none; filter: none; animation: fade 0.5s forwards; animation-delay: 0s; }
  .window { animation: fade 0.5s both; transition: none; transform: none; }
  .phone img { transition: none; }
  .callouts li::before, .callouts li::after, .rail a::before { transition: none; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}