/* =============================================================
   FASE 2 — COMPONENTES
   Reconstruídos a partir dos tokens. Zero valor hardcoded, zero
   trecho copiado do CSS original: as regras abaixo foram escritas
   a partir das MEDIÇÕES, não do arquivo do NexStudio.
   ============================================================= */

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

html { scroll-behavior: smooth; }
html, body { min-height: 100%; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

html[data-carregando="true"] { overflow: hidden; }

img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: hidden;
}

.pagina { background: var(--color-bg); min-height: 100%; }

/* ---------- RÓTULO DE SEÇÃO (repetido em about, work, contato) ---------- */
.rotulo {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---------- NAV ---------- */
.nav {
  position: fixed; inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nav-y) var(--pad-x);
  color: var(--color-invert);
  mix-blend-mode: difference;
}
.nav__logo {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  transition: transform .32s var(--ease-soft);
}
.nav__logo:hover { transform: scale(1.06); }
.nav__logo svg { width: 100%; height: 100%; }
.nav__links { display: flex; gap: var(--space-7); }
.nav__links a {
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  opacity: .7;
  transition: opacity .25s;
}
.nav__links a:hover, .nav__links a:focus-visible { opacity: 1; }

@media (max-width: 640px) {
  .nav__logo { width: 36px; height: 36px; }
  .nav__links { gap: var(--space-4); }
}
@media (max-width: 420px) { .nav__links { gap: 12px; } }

/* ---------- LOADER ---------- */
.loader {
  position: fixed; inset: 0;
  z-index: 1100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--nav-y) var(--pad-x) var(--space-5);
  background: var(--color-text);
  color: var(--color-bg);
  clip-path: inset(0);
  transition: clip-path .85s var(--ease-loader);
  overflow: hidden;
}
.loader[data-fase="saindo"] { clip-path: inset(0 0 100%); pointer-events: none; }
.loader__topo, .loader__base {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.loader__topo { border-bottom: 1px solid var(--color-border-paper); padding-bottom: var(--space-3); }
.loader__base { align-items: baseline; padding-top: 16px; }
.loader__marca {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: var(--display-loader);
  font-weight: var(--weight-wordmark);
  line-height: var(--leading-wordmark);
  letter-spacing: var(--tracking-wordmark);
  transform: translateX(-.03em);
}
.loader__marca span:last-child { align-self: flex-end; }
.loader__conta {
  font-size: var(--display-counter);
  font-weight: 800;
  line-height: var(--leading-counter);
  letter-spacing: var(--tracking-counter);
  font-variant-numeric: tabular-nums;
}
.loader__barra {
  position: absolute; inset: auto 0 0 0;
  height: 3px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .16s linear;
}
@media (max-width: 640px) {
  .loader { padding: 20px 22px var(--space-4); }
  .loader__topo span:last-child { display: none; }
}

/* ---------- CURSOR ---------- */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 0; height: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: difference;
  transition: opacity .18s;
  display: none;
}
.cursor[data-visivel="true"] { opacity: 1; }
/* o dardo fica deslocado para que o ponto a 92% da largura caia
   exatamente sobre o ponteiro: é esse ponto que a rotação usa como
   eixo, e é por isso que a cauda varre por trás do movimento */
.cursor__corpo {
  position: absolute; top: 0; left: 0;
  width: 30px; height: 25px;
  transform: translate(-92%, -50%);
  transform-origin: 92% 50%;
  /* BRANCO de propósito. Com mix-blend-mode: difference o resultado é
     |fundo − fonte|. Fonte branca sobre papel (243,241,236) dá (12,14,19),
     quase preto; sobre o fundo escuro do work dá quase branco. É assim
     que o ponteiro se inverte sozinho e nunca some. Com fonte escura o
     cálculo dava cinza claro, que era o problema. */
  color: #fff;
}
.cursor__corpo svg { width: 100%; height: 100%; }
.cursor[data-interativo="true"] .cursor__corpo { opacity: .92; }
.cursor[data-pressionado="true"] .cursor__corpo { opacity: .76; }
@media (hover: hover) and (pointer: fine) {
  html[data-cursor="true"], html[data-cursor="true"] body,
  html[data-cursor="true"] body * { cursor: none; }
  html[data-cursor="true"] .cursor { display: block; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
}
.hero__cena { position: absolute; inset: 0; }
.hero__cena canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* o bloco de tipo: largura = 1.128 x altura da viewport (medido).
   Em telas estreitas ele fica maior que a viewport e é cortado,
   exatamente como o original. */
.hero__tipo {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: calc(var(--hero-scene) * 1svh);
  z-index: 1;
  pointer-events: none;
}
/* width:max-content é obrigatório: sem ele o scrollWidth devolve a
   largura do contêiner e o ajuste por linha não funciona */
/* width:max-content é obrigatório: sem ele o scrollWidth devolve a
   largura do contêiner e o ajuste por linha não funciona.
   line-height .885 + margin .04em = .925 de avanço entre linhas,
   valor derivado das bandas medidas (247px e 285px de distância
   entre topos em 1440). margin-left compensa o lateral da fonte:
   o bloco é ajustado pela caixa de avanço e o original alinha pela
   mancha de tinta, o que dava +9px de deslocamento. */
.hero__linha {
  display: block;
  width: max-content;
  margin-left: -.033em;
  font-weight: var(--weight-wordmark);
  line-height: .885;
  letter-spacing: -.055em;
  white-space: nowrap;
  transform-origin: 0 50%;
}
.hero__linha + .hero__linha { margin-top: .04em; }

/* fita do Awwwards: pertence ao original e entra no diff.
   Na Fase 5 ela sai junto com a marca. */
.fita {
  position: fixed; top: 50%; right: 0;
  z-index: 999;
  width: 53.08px; height: 171.358px;
  display: grid;
  place-items: center;
  background: #5abdb2;
  color: #fff;
  transform: translateY(-50%);
  transition: transform .35s var(--ease);
}
.fita:hover { transform: translateY(-50%) translateX(-5px); }
.fita span {
  writing-mode: vertical-rl;
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
}
.fita b { font-size: 15px; margin-bottom: 8px; writing-mode: horizontal-tb; }
@media (max-width: 640px) { .fita { width: 44px; height: 142.06px; } }

.meta {
  position: absolute; inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nav-y) var(--pad-x);
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: .6;
}
@media (max-width: 420px) { .meta span:last-child { display: none; } }

/* ---------- ABOUT ---------- */
.about {
  --progresso: 0;
  position: relative;
  min-height: var(--about-height);
  background: var(--color-bg);
}
.about__alvo { position: absolute; top: calc(100% - 100svh); left: 0; width: 1px; height: 1px; }
.about__sticky {
  position: sticky; top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100svh;
  padding: var(--space-10) var(--pad-x) var(--nav-y);
  overflow: hidden;
}
.about__sticky::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 72% 46%, rgba(255,255,255,.72), transparent 40%);
  opacity: calc(.2 + var(--progresso) * .42);
}
.about__header {
  position: relative; z-index: 4;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-ink-soft);
}
.about__header::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  height: 1px;
  width: calc(var(--progresso) * 100%);
  background: var(--color-text);
}
.about__indice { color: var(--color-brand); }
.about__frase {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  padding: 3vh 5vw 2vh;
  perspective: 1000px;
}
.about__copy {
  width: min(100%, 1220px);
  max-width: 16.5ch;
  margin: 0 auto;
  font-size: var(--display-about);
  font-weight: var(--weight-display);
  line-height: var(--leading-about);
  letter-spacing: var(--tracking-about);
}
.about__oracao { display: block; }
.about__oracao + .about__oracao { margin-top: .2em; }
.about__palavra {
  display: inline-block;
  color: var(--color-text-muted);
  will-change: color;
}
.about__palavra:not(:last-child) { margin-right: .2em; }
.about__footer {
  position: relative; z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  min-height: 46px;
}
.about__fio {
  height: 1px;
  background: var(--color-border-ink-soft);
  transform: scaleX(var(--progresso));
  transform-origin: left;
}
.about__seta {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--color-border-ink);
  border-radius: var(--radius-circle);
  opacity: calc(.28 + var(--progresso) * .72);
  transform: scale(calc(.82 + var(--progresso) * .18));
  transition: color var(--duration-fast), background-color var(--duration-fast),
              border-color var(--duration-fast), transform var(--duration-fast);
}
.about__seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: deriva 1.8s ease-in-out infinite; }
.about__seta:hover, .about__seta:focus-visible {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
  opacity: 1;
  transform: scale(1.08);
}
@keyframes deriva { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
@media (max-width: 640px) {
  .about__sticky { height: 100dvh; min-height: 100svh; padding: var(--space-10) var(--pad-x) 20px; }
  .about__header { grid-template-columns: 36px 1fr; letter-spacing: .07em; }
  .about__frase { padding: 3vh 0 2vh; }
  .about__copy { width: 100%; max-width: 100%; margin: 0; text-wrap: pretty; letter-spacing: -.058em; }
  .about__oracao + .about__oracao { margin-top: .28em; }
  .about__seta { width: 40px; height: 40px; }
  .about__footer { gap: var(--space-3); }
}

/* ---------- WORK ---------- */
.work {
  position: relative;
  padding: var(--space-11) var(--pad-x) var(--space-12);
  background: var(--color-surface-dark);
  color: var(--color-bg);
  overflow: hidden;
}
.work__header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding-bottom: var(--space-9);
}
.work__header::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-border-paper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease);
}
.work__eyebrow, .work__conta {
  padding-top: var(--space-3);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-mid) .12s, transform .85s var(--ease) .12s;
}
.work__conta { grid-area: 1 / 2; }
.work__header h2 {
  grid-column: 1 / -1;
  padding-top: clamp(72px, 11vh, 124px);
  font-size: var(--display-work);
  font-weight: var(--weight-work);
  line-height: var(--leading-work);
  letter-spacing: var(--tracking-work);
  text-transform: uppercase;
  text-wrap: balance;
}
.linha-mascara { display: block; overflow: hidden; margin-bottom: -.07em; padding-bottom: .07em; }
.linha-mascara > span {
  display: block;
  transform: translateY(112%) rotate(1.5deg);
  transform-origin: 0 100%;
  transition: transform var(--duration-slow) var(--ease) .18s;
}
.linha-mascara:nth-child(2) > span { transition-delay: .28s; }
.work__header[data-entrou="true"]::before { transform: scaleX(1); }
.work__header[data-entrou="true"] .work__eyebrow,
.work__header[data-entrou="true"] .work__conta { opacity: .58; transform: translateY(0); }
.work__header[data-entrou="true"] .linha-mascara > span { transform: translateY(0) rotate(0); }
.work__lista { display: grid; gap: var(--gap-projects); }

/* ---------- PROJETO ---------- */
.projeto { position: relative; --acento: var(--project-1); --deslize-img: 0px; --deslize-num: 0px; --brilho: 50%; }
.projeto--2 { --acento: var(--project-2); }
.projeto--3 { --acento: var(--project-3); }

.projeto__topo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0 20px;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline);
  text-transform: uppercase;
}
.projeto__topo::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-border-paper);
  transform: scaleX(0); transform-origin: left;
  transition: transform .95s var(--ease);
}
.projeto__topo > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s .12s, transform .75s var(--ease) .12s;
}
.projeto__topo > a { transition-delay: .19s; }

.projeto__cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  align-items: end;
  gap: 7vw;
  padding-bottom: var(--space-8);
}
.projeto__cabeca h3 {
  max-width: 11ch;
  font-size: var(--display-project);
  font-weight: var(--weight-display);
  line-height: var(--leading-project);
  letter-spacing: var(--tracking-project);
  overflow: hidden;
}
.projeto__cabeca h3 > span {
  display: block;
  transform: translateY(110%) rotate(1.5deg);
  transform-origin: 0 100%;
  transition: transform 1.05s var(--ease) .12s;
}
.projeto__cabeca p {
  max-width: 36ch;
  padding-bottom: .35em;
  font-size: var(--text-project-lead);
  font-weight: var(--weight-soft);
  line-height: var(--leading-body);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s .24s, transform .9s var(--ease) .24s;
}

.projeto__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--acento);
  color: var(--color-text);
  border-radius: var(--radius-media);
  clip-path: inset(0 0 100% round var(--radius-media));
  transform: translateY(36px);
  transition: clip-path var(--duration-reveal) var(--ease) .18s,
              transform 1.1s var(--ease) .18s;
  overflow: hidden;
}
.projeto__media::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at var(--brilho) 12%, rgba(255,255,255,.56), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.28), transparent 48%);
}
.projeto__media::after {
  content: "";
  position: absolute; inset: 0; z-index: 4;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: inherit;
  pointer-events: none;
}
.projeto__numero {
  position: absolute; right: -.02em; bottom: -.15em; z-index: 1;
  font-size: var(--display-number);
  font-weight: var(--weight-number);
  line-height: var(--leading-number);
  letter-spacing: var(--tracking-number);
  color: var(--color-border-ink-soft);
  opacity: 0;
  transform: translate3d(0, calc(var(--deslize-num) + 50px), 0) scale(.92);
  transition: opacity .9s .42s, transform 1.5s var(--ease) .3s;
}
.projeto__desktop {
  position: absolute; top: 7%; left: 6%; z-index: 2;
  display: block;
  width: 88%;
  background: #fff;
  border: 1px solid rgba(17,17,17,.14);
  border-radius: var(--radius-desktop);
  box-shadow: var(--shadow-desktop);
  opacity: 0;
  transform: translate3d(0, calc(var(--deslize-img) + 62px), 0) scale(.965);
  transition: opacity .75s .4s, transform 1.35s var(--ease) .3s, box-shadow .5s;
  overflow: hidden;
}
.projeto__barra {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: clamp(26px, 2.4vw, 38px);
  padding: 0 clamp(9px, 1vw, 15px);
  background: var(--color-chrome);
  color: rgba(17,17,17,.52);
  font-size: clamp(5px, .58vw, 9px);
  font-weight: var(--weight-semibold);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.projeto__barra > span:last-child { grid-column: 2; }
.projeto__pontos { grid-area: 1 / 1; display: flex; gap: clamp(3px, .35vw, 6px); }
.projeto__pontos i {
  display: block;
  width: clamp(4px, .42vw, 7px);
  height: clamp(4px, .42vw, 7px);
  border-radius: var(--radius-circle);
  background: rgba(17,17,17,.18);
}
.projeto__tela { position: relative; display: block; width: 100%; background: #fff; overflow: hidden; }
.projeto__tela img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  transition: transform .9s var(--ease);
}
.projeto__cta {
  position: absolute; bottom: var(--space-5); left: var(--space-5); z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(18px) scale(.9);
  transition: opacity .55s .65s, transform .75s var(--ease) .65s, background .32s, color .32s;
}
.projeto__cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .26s; }
.projeto__media:hover .projeto__cta { background: var(--color-bg); color: var(--color-text); }
.projeto__media:hover .projeto__cta svg { transform: translateX(4px); }
.projeto__media:hover .projeto__tela img { transform: scale(1.03); }
.projeto[data-entrou="true"] .projeto__media:hover .projeto__desktop {
  transform: translate3d(0, calc(var(--deslize-img) - 8px), 0) scale(1.008);
  box-shadow: var(--shadow-desktop-hover);
}
.projeto__footer {
  position: relative;
  display: grid;
  grid-template-columns: 16vw minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
}
.projeto__footer::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-border-paper);
  transform: scaleX(0); transform-origin: left;
  transition: transform .95s var(--ease) .5s;
}
.projeto__footer > * { opacity: 0; transform: translateY(18px); transition: opacity .6s .43s, transform .8s var(--ease) .43s; }
.projeto__footer > p { transition-delay: .5s; max-width: 66ch; }
.projeto__footer > a { transition-delay: .57s; border-bottom: 1px solid; padding-bottom: 2px; }
.projeto__footer > span { opacity: .42; }

.projeto[data-entrou="true"] .projeto__topo::before,
.projeto[data-entrou="true"] .projeto__footer::after { transform: scaleX(1); }
.projeto[data-entrou="true"] .projeto__topo > *,
.projeto[data-entrou="true"] .projeto__footer > * { opacity: 1; transform: translateY(0); }
.projeto[data-entrou="true"] .projeto__footer > span { opacity: .42; }
.projeto[data-entrou="true"] .projeto__cabeca h3 > span { transform: translateY(0) rotate(0); }
.projeto[data-entrou="true"] .projeto__cabeca p { opacity: .68; transform: translateY(0); }
.projeto[data-entrou="true"] .projeto__media { clip-path: inset(0 round var(--radius-media)); transform: translateY(0); }
.projeto[data-entrou="true"] .projeto__numero { opacity: 1; transform: translate3d(0, var(--deslize-num), 0) scale(1); }
.projeto[data-entrou="true"] .projeto__desktop { opacity: 1; transform: translate3d(0, var(--deslize-img), 0) scale(1); }
.projeto[data-entrou="true"] .projeto__cta { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 640px) {
  .work__header { padding-bottom: 84px; }
  .work__header h2 { padding-top: 72px; }
  .projeto__topo { padding-bottom: 16px; }
  .projeto__topo a { max-width: 72%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .projeto__cabeca { display: block; padding-bottom: 26px; }
  .projeto__cabeca h3 { max-width: 11ch; text-wrap: balance; }
  .projeto__cabeca p { max-width: 31ch; margin-top: var(--space-5); font-size: 1rem; }
  .projeto__media { border-radius: 0; background: #fff; clip-path: inset(0 0 100%); aspect-ratio: 16 / 10; }
  .projeto[data-entrou="true"] .projeto__media { clip-path: inset(0); }
  .projeto__media::before { display: none; }
  .projeto__media::after { border: 0; }
  .projeto__numero, .projeto__cta { display: none; }
  .projeto__desktop { inset: 0; width: auto; border: 0; border-radius: 0; box-shadow: none; transform: none; transition: opacity .7s .26s; }
  .projeto[data-entrou="true"] .projeto__desktop { transform: none; }
  .projeto__barra { display: none; }
  .projeto__tela { height: 100%; }
  .projeto__tela img { object-position: top center; transform: none; }
  .projeto__footer { grid-template-columns: 1fr auto; gap: var(--space-4); }
  .projeto__footer > span { display: none; }
}

/* ---------- CONTATO ---------- */
.contato {
  --rolagem: 0;
  position: relative;
  min-height: var(--contact-height);
  background: var(--color-surface-mint);
  color: var(--color-text-contact);
}
.contato__sticky {
  position: sticky; top: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100svh;
  padding: var(--space-11) var(--pad-x) 30px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.24), transparent 28%),
    var(--color-surface-mint);
  overflow: hidden;
}
.contato__sticky::before {
  content: "03";
  position: absolute; right: -.07em; bottom: -.13em;
  font-size: min(48vw, 46rem);
  font-weight: var(--weight-number);
  line-height: .72;
  letter-spacing: -.13em;
  color: rgba(7,17,17,.055);
  pointer-events: none;
  opacity: 0;
  transform-origin: 100% 100%;
  transform: translateY(12%) rotate(-4deg) scale(.86);
  transition: opacity 1s .3s, transform 1.6s var(--ease) .24s;
}
.contato__cortina {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(117,208,203,.12), transparent 28%), var(--color-text-contact);
  opacity: clamp(0, calc(1 - var(--rolagem) * 2.7), 1);
}
.contato__intro {
  position: absolute; inset: 0; z-index: 4;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--space-11) var(--pad-x) 30px;
  color: var(--color-paper);
  pointer-events: none;
  opacity: clamp(0, calc(1 - var(--rolagem) * 2.7), 1);
}
.contato__intro-k, .contato__intro-rolar {
  padding-top: 13px;
  border-top: 1px solid rgba(241,240,236,.42);
  font-size: var(--text-micro);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}
.contato__intro-titulo {
  align-self: center;
  font-size: var(--display-contact-intro);
  font-weight: var(--weight-contact);
  line-height: var(--leading-intro);
  letter-spacing: var(--tracking-intro);
  text-transform: uppercase;
}
.contato__intro-titulo span { display: block; width: max-content; }
.contato__intro-titulo span:first-child {
  transform: translate3d(calc(var(--rolagem) * -12vw), calc(var(--rolagem) * -25vh), 0) rotate(calc(var(--rolagem) * -2deg));
}
.contato__intro-titulo span:last-child {
  margin-left: auto;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-paper);
  transform: translate3d(calc(var(--rolagem) * 14vw), calc(var(--rolagem) * -34vh), 0) rotate(calc(var(--rolagem) * 2deg));
}
.contato__intro-rolar { justify-self: end; width: min(260px, 24vw); text-align: right; transform: translateY(calc(var(--rolagem) * -26px)); }

.contato__header {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 64px 1fr;
  padding-top: var(--space-3);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.contato__header::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-border-contact);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease);
}
.contato__header > span { opacity: 0; transform: translateY(18px); transition: opacity var(--duration-mid), transform .85s var(--ease); }
.contato__header > span:first-child { color: rgba(7,17,17,.48); transition-delay: .13s; }
.contato__header > span:nth-child(2) { transition-delay: .19s; }

.contato__corpo {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(180px, .26fr) minmax(0, 1fr);
  align-content: center;
  padding: clamp(72px, 9vh, 120px) 0;
}
.contato__corpo > p {
  grid-column: 1;
  padding-top: .75em;
  font-size: var(--text-meta);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-mid) .28s, transform .85s var(--ease) .28s;
}
.contato__corpo h2 {
  grid-column: 2;
  font-size: var(--display-contact);
  font-weight: var(--weight-contact);
  line-height: var(--leading-contact);
  letter-spacing: var(--tracking-contact);
  text-wrap: balance;
}
.contato__linha { display: block; overflow: hidden; margin-bottom: -.07em; padding-bottom: .07em; }
.contato__linha > span { display: block; transform: translateY(112%); transition: transform 1.1s var(--ease) .33s; }
.contato__linha:nth-child(2) > span { transition-delay: .44s; }
.contato__linha:nth-child(3) > span { transition-delay: .54s; }
.contato__linha--vazada > span { color: transparent; -webkit-text-stroke: 1.5px var(--color-text-contact); }

.contato__email {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  margin-top: clamp(56px, 8vh, 96px);
  padding: var(--space-3) 16px var(--space-3) 30px;
  border: 1.5px solid rgba(7,17,17,.5);
  border-radius: var(--radius-pill);
  isolation: isolate;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s .56s, transform 1s var(--ease) .56s, color .4s;
  overflow: hidden;
}
.contato__email::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  background: var(--color-text-contact);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .65s var(--ease);
}
.contato__email-copy { display: grid; gap: var(--space-2); }
.contato__email-copy > span:first-child {
  font-size: var(--text-micro);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  opacity: .62;
}
.contato__email-copy > span:last-child {
  font-size: var(--display-email);
  font-weight: var(--weight-email);
  line-height: var(--leading-email);
  letter-spacing: var(--tracking-email);
  overflow-wrap: anywhere;
}
.contato__email-icone {
  display: grid;
  place-items: center;
  width: clamp(64px, 7vw, 104px);
  aspect-ratio: 1;
  border: 1px solid;
  border-radius: var(--radius-circle);
  transition: background .35s, color .35s, transform .5s var(--ease);
}
.contato__email-icone svg { width: clamp(32px, 4vw, 62px); height: clamp(32px, 4vw, 62px); fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; transition: transform .32s var(--ease-soft); }
.contato__email:hover, .contato__email:focus-visible { color: var(--color-surface-mint); }
.contato__email:hover::before, .contato__email:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.contato__email:hover .contato__email-icone { background: var(--color-surface-mint); color: var(--color-text-contact); transform: rotate(8deg); }
.contato__email:hover svg { transform: translate(6px, -6px); }

.contato__footer {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-contact);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-mid) .72s, transform .85s var(--ease) .72s;
}
.contato__footer span:nth-child(2) { justify-self: center; }
.contato__footer a { justify-self: end; }

.contato[data-visivel="true"] .contato__sticky::before { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
.contato[data-visivel="true"] .contato__header::before { transform: scaleX(1); }
.contato[data-visivel="true"] .contato__header > span,
.contato[data-visivel="true"] .contato__corpo > p,
.contato[data-visivel="true"] .contato__email,
.contato[data-visivel="true"] .contato__footer { opacity: 1; transform: translateY(0); }
.contato[data-visivel="true"] .contato__linha > span { transform: translateY(0); }

@media (max-width: 640px) {
  .contato__sticky, .contato__intro { height: 100dvh; min-height: 100svh; padding: 84px var(--pad-x) 22px; }
  .contato__sticky::before { font-size: 86vw; right: -.05em; bottom: -.04em; }
  .contato__intro-k, .contato__intro-rolar { padding-top: 10px; }
  .contato__intro-titulo { width: 100%; line-height: .78; }
  .contato__intro-titulo span:last-child { width: 100%; margin-top: .08em; font-size: .7em; text-align: right; -webkit-text-stroke-width: 1px; }
  .contato__intro-rolar { width: min(175px, 52vw); }
  .contato__header { grid-template-columns: 36px 1fr; letter-spacing: .07em; }
  .contato__corpo { display: block; align-self: center; width: 100%; padding: clamp(34px, 7vh, 62px) 0 clamp(28px, 6vh, 54px); }
  .contato__corpo > p { margin-bottom: var(--space-6); padding-top: 0; }
  .contato__corpo h2 { max-width: none; }
  .contato__email { gap: var(--space-3); margin-top: clamp(30px, 5vh, 46px); padding: 10px 10px 10px var(--space-4); border-radius: var(--space-5); white-space: normal; }
  .contato__email-copy { gap: 6px; }
  .contato__email-copy > span:last-child { white-space: nowrap; }
  .contato__email-icone { width: 52px; }
  .contato__email-icone svg { width: 26px; height: 26px; }
  .contato__footer { grid-template-columns: 1fr auto; gap: var(--space-4); }
  .contato__footer span:nth-child(2) { display: none; }
}
@media (max-width: 640px) and (max-height: 720px) {
  .contato__sticky, .contato__intro { padding-top: 68px; padding-bottom: 16px; }
  .contato__corpo { padding-top: var(--space-5); padding-bottom: 20px; }
  .contato__corpo > p { margin-bottom: var(--space-4); }
  .contato__email { margin-top: var(--space-5); }
  .contato__email-icone { width: 46px; }
}

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .cursor { display: none !important; }
  .about, .contato { min-height: 100svh; }
  .about__sticky, .contato__sticky { position: relative; }
  .contato__cortina, .contato__intro { display: none; }
  .about__seta svg { animation: none; }
}

/* etiqueta das variações do nó (só aparece ao trocar com 1-6) */
.aviso-no{position:fixed;left:50%;bottom:26px;translate:-50% 0;z-index:1200;pointer-events:none;
  padding:8px 16px;background:var(--color-text);color:var(--color-bg);
  font-size:var(--text-label);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);
  text-transform:uppercase;opacity:0;transition:opacity .25s var(--ease)}
.aviso-no[data-on="true"]{opacity:1}