/* ══════════════════════════════════════════════════════════════════════════
   ZENITH DIAS — Independent Digital Studio
   Sistema visual. Toda cor é token; nada de hex solto fora do :root e das
   paletas dos projetos (que são dados reais, declarados no HTML).
   Exceção deliberada: o #fff dos instrumentos em mix-blend-mode: difference,
   que precisa ser branco puro para inverter sozinho sobre qualquer fundo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Marca */
  --zenith-black: #090A0C;
  --lunar-white:  #F1F0EB;
  --graphite:     #565960;
  --zenith-blue:  #636DFF;
  --zenith-blue-ink: #4B52CC;   /* azul acessível sobre off-white (5.4:1) */

  /* Tipografia */
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala fluida.
     O display leva um termo de ALTURA junto com o de largura: o hero precisa
     caber em 100svh e a headline precisa ocupar ~60% dele. Só com vw, uma
     viewport estreita e alta deixa a headline pequena demais no hero, e uma
     larga e baixa a faz estourar a altura. O min() resolve os dois casos.
     Teto de 9.2rem medido contra a linha mais longa ("TAMBÉM DEVERIA."). */
  --t-display: clamp(2.3rem, min(10.4vw, 15.5vh), 9.85rem);
  --t-h2:      clamp(2rem, 6.1vw, 6rem);
  --t-h3:      clamp(1.6rem, 3.1vw, 2.75rem);
  --t-quote:   clamp(1.8rem, 4.6vw, 4.25rem);
  --t-lead:    clamp(1.05rem, 1.45vw, 1.375rem);
  --t-body:    clamp(1rem, 1.05vw, 1.125rem);
  --t-mono:    clamp(0.625rem, 0.72vw, 0.75rem);

  /* Espaço */
  --gutter:    clamp(1.25rem, 4vw, 4.5rem);
  --secao-y:   clamp(6rem, 13vh, 12rem);
  --max:       94rem;

  /* Movimento */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io:  cubic-bezier(.65, 0, .35, 1);
  --dur:   .95s;
}

/* ── 02 SUPERFÍCIES ────────────────────────────────────────────────────────
   A página inverte quando faz uma afirmação sobre o visitante.
   Duas superfícies, os mesmos nomes de token. */
.s-dark {
  --bg: var(--zenith-black);
  --fg: var(--lunar-white);
  --fg-dim:   rgba(241, 240, 235, .62);   /* 6.9:1 */
  --fg-faint: rgba(241, 240, 235, .55);   /* 5.6:1 */
  --rule:      rgba(241, 240, 235, .15);
  --rule-soft: rgba(241, 240, 235, .07);
  --accent: var(--zenith-blue);
  --lift: rgba(241, 240, 235, .04);
}
.s-light {
  --bg: var(--lunar-white);
  --fg: var(--zenith-black);
  --fg-dim:   rgba(9, 10, 12, .66);       /* 6.2:1 */
  --fg-faint: rgba(9, 10, 12, .6);
  --rule:      rgba(9, 10, 12, .17);
  --rule-soft: rgba(9, 10, 12, .08);
  --accent: var(--zenith-blue-ink);
  --lift: rgba(9, 10, 12, .035);
}

/* ── 03 RESET / BASE ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-synthesis-weight: none;
}

/* Trava o scroll enquanto o loader ou o menu estão abertos. */
html.is-travado, html.is-travado body { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, figure, blockquote, fieldset { margin: 0; padding: 0; border: 0; }
button { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; text-decoration: none; }

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

::selection { background: var(--zenith-blue); color: var(--lunar-white); }

[id] { scroll-margin-top: clamp(4.5rem, 9vh, 7rem); }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.salto {
  position: fixed; top: .625rem; left: .625rem; z-index: 300;
  padding: .625rem 1rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em;
  background: var(--lunar-white); color: var(--zenith-black);
  transform: translateY(-160%);
  transition: transform .3s var(--e-out);
}
.salto:focus-visible { transform: none; }

/* ── 04 PRIMITIVAS TIPOGRÁFICAS ───────────────────────────────────────── */
.display, .h2, .h3 {
  font-weight: 500;
  text-transform: uppercase;
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  line-height: .93;
  letter-spacing: -.042em;
}

.h2 {
  font-size: var(--t-h2);
  line-height: .95;
  letter-spacing: -.035em;
}

.h3 {
  font-size: var(--t-h3);
  line-height: 1.04;
  letter-spacing: -.028em;
  text-transform: none;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -.014em;
  color: var(--fg-dim);
  max-width: 34ch;
}

.mono {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* THE ZENITH POINT — o ponto proprietário. */
.pt {
  color: var(--accent);
  font-style: normal;
  letter-spacing: 0;
}

.num-secao { display: block; margin-bottom: clamp(1.25rem, 2.5vw, 2.25rem); }
.num-secao::before {
  content: '';
  display: inline-block;
  width: clamp(1.5rem, 3vw, 3rem); height: 1px;
  margin-right: .75rem; vertical-align: middle;
  background: currentColor; opacity: .6;
}

strong { font-weight: 500; color: var(--fg); }

/* ── 05 LAYOUT ────────────────────────────────────────────────────────── */
.rail {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao {
  position: relative;
  padding-block: var(--secao-y);
  background: var(--bg);
  color: var(--fg);
}

.secao::before {                  /* fio de divisão entre seções */
  content: '';
  position: absolute; inset-inline: var(--gutter); top: 0;
  height: 1px; background: var(--rule-soft);
}

.secao__topo { margin-bottom: clamp(2.5rem, 6vw, 5.5rem); }

/* ── 06 SISTEMA DE REVEAL ─────────────────────────────────────────────────
   JS só adiciona .is-in. Toda a animação é CSS, em opacity/transform. */
.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(1.15rem);
  transition:
    opacity var(--dur) var(--e-out) var(--d, 0s),
    transform var(--dur) var(--e-out) var(--d, 0s);
}
.has-js [data-reveal].is-in { opacity: 1; transform: none; }

/* Linhas em máscara de overflow */
.linha {
  display: block;
  overflow: hidden;
  padding-bottom: .09em;
  margin-bottom: -.09em;
}
.has-js [data-linhas] .linha > span {
  display: block;
  transform: translateY(108%);
  transition: transform 1.05s var(--e-out) var(--d, 0s);
}
.has-js [data-linhas].is-in .linha > span { transform: none; }
.has-js [data-linhas] .linha:nth-child(2) > span { --d: .09s; }
.has-js [data-linhas] .linha:nth-child(3) > span { --d: .18s; }
.has-js [data-linhas] .linha:nth-child(4) > span { --d: .27s; }
.has-js [data-linhas] .linha:nth-child(5) > span { --d: .36s; }

/* Palavra por palavra (manifesto) */
.pv { display: inline-block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.pv > span { display: inline-block; }
.has-js [data-palavras] .pv > span {
  transform: translateY(104%);
  opacity: 0;
  transition:
    transform .95s var(--e-out) var(--d, 0s),
    opacity .7s linear var(--d, 0s);
}
.has-js [data-palavras].is-in .pv > span { transform: none; opacity: 1; }

/* ── 07 LOADER ────────────────────────────────────────────────────────── */
html:not(.has-js) .loader,
html.sem-loader .loader { display: none; }

.loader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-content: center; gap: clamp(2rem, 6vh, 4rem);
  background: var(--zenith-black);
  transition: opacity .7s var(--e-io), visibility .7s;
}
.loader.is-fora { opacity: 0; visibility: hidden; }

.loader__marca {
  font-size: clamp(1.75rem, 5.5vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -.035em;
  text-align: center;
  color: var(--lunar-white);
  animation: loaderEntra .8s var(--e-out) both;
}
.loader__ponto { color: var(--zenith-blue); margin-left: .12em; }

@keyframes loaderEntra {
  from { opacity: 0; transform: translateY(.6rem); }
  to   { opacity: 1; transform: none; }
}

.loader__medidor {
  display: flex; align-items: center; gap: 1rem;
  justify-content: center;
}
.loader__num {
  font-family: var(--mono); font-size: .75rem;
  letter-spacing: .12em;
  color: rgba(241, 240, 235, .55);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
}
.loader__pt { color: var(--zenith-blue); }
.loader__trilho {
  position: relative; display: block;
  width: clamp(7rem, 24vw, 14rem); height: 1px;
  background: rgba(241, 240, 235, .18);
}
/* Preenche por scaleX, não por width: largura anima layout, transform não.
   O JS escreve --v de 0 a 1. */
.loader__fio {
  position: absolute; inset: 0 auto 0 0;
  width: 100%; background: var(--lunar-white);
  transform: scaleX(var(--v, 0));
  transform-origin: left center;
  transition: transform .32s var(--e-io);
}

/* ── 08 CURSOR ────────────────────────────────────────────────────────── */
.cursor { display: none; }

@media (pointer: fine) and (min-width: 64rem) {
  html.cursor-on body,
  html.cursor-on a,
  html.cursor-on button,
  html.cursor-on label { cursor: none; }
  html.cursor-on input,
  html.cursor-on textarea { cursor: none; }

  html.cursor-on .cursor {
    display: block;
    position: fixed; top: 0; left: 0; z-index: 190;
    pointer-events: none;
    mix-blend-mode: difference;
    transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0);
    will-change: transform;
  }
  /* Base fixa de 8px, centrada na ponta do cursor. Os estados mudam só a
     escala: width/height/margin animavam layout a cada hover, num elemento
     que já é repintado a cada frame seguindo o mouse. A escala não-uniforme
     do estado de texto transforma o círculo num traço vertical. */
  .cursor__anel {
    position: absolute; top: 0; left: 0;
    width: 8px; height: 8px; margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #fff;
    transform: scale(var(--sx, 1), var(--sy, 1));
    transition: transform .38s var(--e-out), background .38s var(--e-out);
    will-change: transform;
  }
  .cursor__rotulo {
    position: absolute; top: 0; left: 0;
    transform: translate(-50%, -50%);
    font-family: var(--mono); font-size: .625rem;
    letter-spacing: .12em; text-transform: uppercase;
    white-space: nowrap; color: #fff;
    opacity: 0; transition: opacity .28s var(--e-out);
  }
  /* estados — escala sobre a base de 8px: 26px, 74px, e 2×22px no texto */
  .cursor.em-link  .cursor__anel { --sx: 3.25; --sy: 3.25; background: rgba(255,255,255,.9); }
  .cursor.em-chapa .cursor__anel { --sx: 9.25; --sy: 9.25; background: rgba(255,255,255,.92); }
  .cursor.em-texto .cursor__anel { --sx: .25;  --sy: 2.75; }
  .cursor.em-chapa .cursor__rotulo,
  .cursor.em-link  .cursor__rotulo { opacity: 1; }
  .cursor.em-chapa .cursor__rotulo { color: var(--zenith-black); mix-blend-mode: normal; }
}

/* ── 09 MEDIDOR DE SCROLL ─────────────────────────────────────────────────
   Sobe de 00 (embaixo) até 100• (em cima): descer a página é subir ao zênite.
   mix-blend-mode: difference resolve as duas superfícies sozinho. */
.medidor {
  position: fixed; z-index: 90;
  right: clamp(.6rem, 1.6vw, 1.5rem); top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column; align-items: center; gap: .7rem;
  mix-blend-mode: difference;
  font-family: var(--mono); font-size: .625rem;
  letter-spacing: .1em; color: #fff;
  font-variant-numeric: tabular-nums;
  transition: opacity .45s var(--e-out);
}
@media (min-width: 60rem) { .medidor { display: flex; } }
html.menu-aberto .medidor { opacity: 0; }

.medidor__cap { opacity: .6; }
.medidor__cap i { font-style: normal; }
.medidor__trilho {
  position: relative; display: block;
  width: 1px; height: clamp(9rem, 26vh, 15rem);
  background: rgba(255, 255, 255, .22);
}
.medidor__fio {
  position: absolute; left: 0; bottom: 0; width: 1px;
  height: calc(var(--sp, 0) * 100%);
  background: #fff;
}
.medidor__tick {
  position: absolute; left: -2px; bottom: calc(var(--at) * 100%);
  width: 5px; height: 1px; background: rgba(255, 255, 255, .35);
}
.medidor__marca {
  position: absolute; left: 0; bottom: calc(var(--sp, 0) * 100%);
  transform: translate(calc(-100% - 9px), 50%);
}
.medidor__marca b { font-weight: 400; }

/* ── 10 HEADER ────────────────────────────────────────────────────────── */
.cabeca {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background .5s var(--e-out), border-color .5s var(--e-out);
  border-bottom: 1px solid transparent;
}
.cabeca.is-fixo {
  background: rgba(9, 10, 12, .72);
  border-bottom-color: rgba(241, 240, 235, .1);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.cabeca__in {
  max-width: var(--max); margin-inline: auto;
  padding: clamp(1rem, 2.2vh, 1.5rem) var(--gutter);
  display: flex; align-items: center; gap: clamp(1rem, 4vw, 3rem);
}

.marca {
  display: inline-flex; align-items: baseline; gap: .42em;
  font-size: clamp(.8125rem, 1.1vw, .9375rem);
  letter-spacing: .02em; line-height: 1;
  color: var(--lunar-white);
  margin-right: auto;
}
.marca__z { font-weight: 500; letter-spacing: -.01em; }
.marca__d { font-weight: 300; opacity: .62; }
.marca__p { color: var(--zenith-blue); margin-left: -.2em; }
.marca:hover .marca__d { opacity: 1; }
.marca__d, .marca__p { transition: opacity .4s var(--e-out), transform .4s var(--e-out); }
.marca:hover .marca__p { transform: translateY(-.22em); }

.nav { display: none; gap: clamp(1.25rem, 2.6vw, 2.25rem); }
@media (min-width: 60rem) { .nav { display: flex; } }
.nav a {
  position: relative;
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .13em; color: rgba(241, 240, 235, .62);
  padding-block: .25rem;
  transition: color .35s var(--e-out);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--zenith-blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--e-out);
}
.nav a:hover { color: var(--lunar-white); }
.nav a:hover::after { transform: scaleX(1); }
.nav a.is-atual { color: var(--lunar-white); }
.nav a.is-atual::after { transform: scaleX(1); background: rgba(241, 240, 235, .3); }

.cta-topo {
  display: none; align-items: center; gap: .55em;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .13em;
  color: var(--lunar-white);
  padding: .6rem 1rem;
  border: 1px solid rgba(241, 240, 235, .22);
  transition: border-color .4s var(--e-out), background .4s var(--e-out);
}
@media (min-width: 60rem) { .cta-topo { display: inline-flex; } }
.cta-topo i { font-style: normal; transition: transform .4s var(--e-out); }
.cta-topo:hover { border-color: var(--zenith-blue); background: rgba(99, 109, 255, .1); }
.cta-topo:hover i { transform: translate(.15em, -.15em); }

.menu-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-left: auto; padding: .4rem 0;
  color: var(--lunar-white); cursor: pointer;
}
@media (min-width: 60rem) { .menu-btn { display: none; } }
.menu-btn__t { font-family: var(--mono); font-size: .6875rem; letter-spacing: .13em; }
.menu-btn__i { display: block; width: 18px; }
.menu-btn__i i {
  display: block; height: 1px; background: currentColor;
  transition: transform .4s var(--e-out), opacity .3s;
}
.menu-btn__i i:first-child { margin-bottom: 5px; }
.menu-btn[aria-expanded="true"] .menu-btn__i i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__i i:last-child { transform: translateY(-3px) rotate(-45deg); }

/* Menu mobile */
.menu {
  position: fixed; inset: 0; z-index: 95;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(5rem, 14vh, 8rem) var(--gutter) var(--gutter);
  background: var(--zenith-black);
  color: var(--lunar-white);
}
.menu[hidden] { display: none; }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: clamp(.75rem, 2.4vh, 1.4rem) 0;
  border-top: 1px solid rgba(241, 240, 235, .12);
  font-size: clamp(1.75rem, 9vw, 3rem);
  font-weight: 500; letter-spacing: -.035em;
  opacity: 0; transform: translateY(1rem);
  animation: menuItem .6s var(--e-out) forwards;
  animation-delay: calc(var(--i, 0) * .06s + .05s);
}
.menu__nav a em {
  font-family: var(--mono); font-size: .6875rem;
  font-style: normal; letter-spacing: .12em;
  color: var(--zenith-blue);
}
@keyframes menuItem { to { opacity: 1; transform: none; } }
.menu__pe { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-end; }
.menu__pe .mono { color: rgba(241, 240, 235, .55); }

/* ── 11 BOTÕES ────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .7em;
  padding: 1rem 1.6rem;
  font-size: .9375rem; letter-spacing: -.01em; line-height: 1;
  transition: transform .45s var(--e-out), background .4s var(--e-out),
              color .4s var(--e-out), border-color .4s var(--e-out);
  will-change: transform;
}
.btn i { font-style: normal; transition: transform .45s var(--e-out); }

.btn--forte { background: var(--fg); color: var(--bg); }
.btn--forte:hover { background: var(--accent); color: var(--lunar-white); }
.btn--forte:hover i { transform: translateY(.18em); }

.btn--fio { border: 1px solid var(--rule); color: var(--fg); }
.btn--fio:hover { border-color: var(--accent); background: var(--lift); }
.btn--fio:hover i { transform: translate(.16em, -.16em); }

/* ── 12 HERO ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  /* Paddings medidos para o hero fechar em 100svh com a headline em ~60%
     da altura. O topo precisa liberar o header fixo (~81px). */
  padding: clamp(6.25rem, 13vh, 8.5rem) 0 clamp(3.25rem, 6.8vh, 5rem);
  overflow: hidden;
}

/* grid de eixos verticais, muito discreto */
.hero__grade {
  position: absolute; inset: 0;
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gutter);
  display: none; justify-content: space-between;
  pointer-events: none;
}
@media (min-width: 48rem) { .hero__grade { display: flex; } }
.hero__grade i {
  width: 1px; height: 100%;
  background: linear-gradient(to bottom,
    transparent, var(--rule-soft) 12%, var(--rule-soft) 88%, transparent);
}

.hero__in {
  position: relative;
  max-width: var(--max); margin-inline: auto; width: 100%;
  padding-inline: var(--gutter);
}

.hero__eyebrow { margin-bottom: clamp(1.25rem, 3vh, 1.75rem); }

.hero__h1 { margin-bottom: clamp(1.75rem, 3.8vh, 2.25rem); }
.hero__h1 .linha--dim > span { color: var(--fg-dim); }

.hero__base {
  display: flex; flex-direction: column; gap: clamp(1.5rem, 4vh, 2.5rem);
  align-items: flex-start;
}
@media (min-width: 60rem) {
  .hero__base {
    flex-direction: row; align-items: flex-end;
    justify-content: space-between; gap: 3rem;
  }
}
.hero__lead { max-width: 36ch; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__meta {
  position: absolute; bottom: clamp(1.25rem, 4vh, 2.5rem);
  display: none; flex-direction: column; gap: .15rem;
  line-height: 1.7;
}
@media (min-width: 60rem) { .hero__meta { display: flex; } }
.hero__meta--esq { left: var(--gutter); }
.hero__meta--dir { right: var(--gutter); text-align: right; align-items: flex-end; }
.hero__slogan {
  margin-top: .4rem;
  font-family: var(--sans); font-size: .9375rem;
  text-transform: none; letter-spacing: -.015em;
  color: var(--fg);
}

.scroll-ind {
  position: absolute; left: 50%; bottom: clamp(1.25rem, 4vh, 2.5rem);
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.scroll-ind__fio {
  position: relative; display: block; width: 1px; height: 3.25rem;
  background: var(--rule);
  overflow: hidden;
}
.scroll-ind__fio i {
  position: absolute; inset: 0 0 auto; height: 40%;
  background: var(--accent);
  animation: desce 2.4s var(--e-io) infinite;
}
@keyframes desce {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}

/* Parallax inicial: --hs (0 a 1) é o avanço do scroll dentro do hero.
   O deslocamento usa a propriedade `translate`, não `transform`: assim ele
   compõe com o transform do reveal em vez de disputar especificidade com ele.
   A opacidade só entra em elementos sem [data-reveal], pela mesma razão. */
.hero__in    { opacity: calc(1 - var(--hs, 0) * .55); }
.hero__grade { opacity: calc(1 - var(--hs, 0) * .8); }
.hero__meta  { translate: 0 calc(var(--hs, 0) * -1.4rem); }
.scroll-ind  { translate: -50% calc(var(--hs, 0) * -1.1rem); }

/* ── 13 MANIFESTO ─────────────────────────────────────────────────────── */
.manifesto__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 60rem) {
  .manifesto__grid { grid-template-columns: 1.15fr .85fr; align-items: start; }
}
.manifesto__h2 { max-width: 14ch; }
.manifesto__txt {
  display: flex; flex-direction: column; gap: 1.25rem;
  color: var(--fg-dim); max-width: 46ch;
}
@media (min-width: 60rem) { .manifesto__txt { padding-top: .6rem; } }
.manifesto__tag { margin-top: .75rem; }

/* ── 14 CITAÇÃO ───────────────────────────────────────────────────────── */
.citacao { padding-block: clamp(7rem, 20vh, 16rem); }
.citacao__txt {
  font-size: var(--t-quote);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.035em;
  max-width: 22ch;
}

/* ── 15 PROJETOS ──────────────────────────────────────────────────────── */
.trabalho { padding-bottom: clamp(4rem, 9vh, 7rem); }

.projetos { display: flex; flex-direction: column; }

.projeto {
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(2.5rem, 7vh, 5.5rem);
}
.projeto:first-child { border-top: 0; }

.projeto__link {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gutter);
  align-items: center;
}
@media (min-width: 60rem) {
  .projeto__link { grid-template-columns: minmax(0, 1.55fr) minmax(0, .75fr); }
  .projeto--inverso .projeto__link { grid-template-columns: minmax(0, .75fr) minmax(0, 1.55fr); }
  .projeto--inverso .chapa { order: 2; }
  .projeto--inverso .projeto__ficha { order: 1; }
}

/* — a chapa: moldura do projeto — */
.chapa { position: relative; }
.chapa__quadro {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--p-bg, #101013);
  border: 1px solid var(--rule);
  transition: transform .7s var(--e-out), border-color .5s var(--e-out);
  will-change: transform;
}
.chapa__quadro > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 3;                 /* a captura real cobre a planta */
}
.projeto__link:hover .chapa__quadro { transform: scale(1.018); border-color: var(--rule); }

/* Anotações da chapa. A tinta é a do projeto, com alfa — nunca abaixo de
   11px/10px: são informação real (a paleta entregue), não textura. */
.chapa__nota {
  position: absolute; left: 1rem; top: .875rem; z-index: 2;
  font-size: .6875rem; letter-spacing: .14em;
  color: color-mix(in srgb, var(--p-ink) 62%, transparent);
}
.chapa__nota span { opacity: .55; }

.chapa__cores {
  position: absolute; right: 1rem; bottom: .875rem; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: .32rem;
  font-size: .625rem; letter-spacing: .1em;
  color: color-mix(in srgb, var(--p-ink) 60%, transparent);
}
.chapa__cores li { display: flex; align-items: center; gap: .45rem; }
.chapa__cores i {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--p-ink) 25%, transparent);
}
.chapa__cores i.var {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--p-ink) 40%, transparent) 0 50%, transparent 50%);
}

/* — a planta: abstração do layout entregue — */
.planta {
  position: absolute; inset: 0;
  transform: translate3d(calc(var(--mx, 0) * 7px), calc(var(--my, 0) * 7px), 0);
  transition: transform .55s var(--e-out);
}
.planta__b {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--p-ink) 20%, transparent);
  transition: transform .6s var(--e-out), opacity .6s var(--e-out);
}
.planta__eixo {
  position: absolute; left: 4.5%; top: 9%; bottom: 9%;
  width: 1px;
  background: repeating-linear-gradient(to bottom,
    color-mix(in srgb, var(--p-ink) 32%, transparent) 0 2px,
    transparent 2px 9px);
}

/* variante base — pilha com hero alto (Pernil&Co.) */
.planta__b--hero  { left: 10%; top: 9%;  width: 80%; height: 27%;
                    border-left: 2px solid var(--p-accent); }
.planta__b--t1    { left: 10%; top: 43%; width: 42%; height: 3.4%;
                    background: color-mix(in srgb, var(--p-ink) 68%, transparent); border: 0; }
.planta__b--t2    { left: 10%; top: 49%; width: 30%; height: 3.4%;
                    background: color-mix(in srgb, var(--p-ink) 34%, transparent); border: 0; }
.planta__b--cta   { left: 10%; top: 57.5%; width: 13%; height: 5.2%;
                    background: var(--p-accent); border: 0; }
.planta__b--c1    { left: 56%; top: 43%; width: 16%; height: 20%; }
.planta__b--c2    { left: 74%; top: 43%; width: 16%; height: 20%; }
.planta__b--faixa { left: 10%; top: 71%; width: 80%; height: 18%;
                    border-top: 1px solid var(--p-accent); }

.planta__b--c1, .planta__b--c2 {
  transform: translate3d(calc(var(--mx, 0) * -4px), calc(var(--my, 0) * -4px), 0);
}
.planta__b--cta { transform: translate3d(calc(var(--mx, 0) * 5px), calc(var(--my, 0) * 5px), 0); }

/* variante editorial — hero centrado, três blocos (Setti) */
.planta--editorial .planta__b--hero  { left: 18%; top: 11%; width: 64%; height: 33%;
                                       border: 1px solid color-mix(in srgb, var(--p-ink) 22%, transparent);
                                       border-bottom: 2px solid var(--p-accent); }
.planta--editorial .planta__b--t1    { left: 32%; top: 50%; width: 36%; height: 3%; }
.planta--editorial .planta__b--t2    { left: 40%; top: 55.5%; width: 20%; height: 3%; }
.planta--editorial .planta__b--cta   { left: 45%; top: 62%; width: 10%; height: 4.4%; }
.planta--editorial .planta__b--c1    { left: 18%; top: 71%; width: 19.5%; height: 18%; }
.planta--editorial .planta__b--c2    { left: 40.5%; top: 71%; width: 19.5%; height: 18%; }
.planta--editorial .planta__b--faixa { left: 63%; top: 71%; width: 19%; height: 18%;
                                       border: 1px solid color-mix(in srgb, var(--p-ink) 20%, transparent);
                                       border-top: 2px solid var(--p-accent); }

/* variante institucional — assimétrica, coluna lateral (advocacia) */
.planta--institucional .planta__b--hero  { left: 10%; top: 10%; width: 46%; height: 44%;
                                           border-left: 2px solid var(--p-accent); }
.planta--institucional .planta__b--t1    { left: 60%; top: 14%; width: 30%; height: 2.8%; }
.planta--institucional .planta__b--t2    { left: 60%; top: 19.5%; width: 22%; height: 2.8%; }
.planta--institucional .planta__b--cta   { left: 60%; top: 26%; width: 11%; height: 4.2%; }
.planta--institucional .planta__b--c1    { left: 60%; top: 36%; width: 30%; height: 18%; }
.planta--institucional .planta__b--c2    { left: 10%; top: 60%; width: 38%; height: 29%; }
.planta--institucional .planta__b--faixa { left: 52%; top: 60%; width: 38%; height: 29%;
                                           border-top: 1px solid var(--p-accent); }

/* variante sistema — malha de módulos (plataforma de mandato) */
.planta--sistema .planta__b--hero  { left: 10%; top: 9%; width: 80%; height: 6%;
                                     background: color-mix(in srgb, var(--p-ink) 10%, transparent);
                                     border-bottom: 1px solid var(--p-accent); }
.planta--sistema .planta__b--t1    { left: 10%; top: 21%; width: 38%; height: 24%; border: 1px solid color-mix(in srgb, var(--p-ink) 22%, transparent); background: none; }
.planta--sistema .planta__b--t2    { left: 52%; top: 21%; width: 18%; height: 24%; border: 1px solid color-mix(in srgb, var(--p-ink) 22%, transparent); background: none; }
.planta--sistema .planta__b--cta   { left: 74%; top: 21%; width: 16%; height: 24%; }
.planta--sistema .planta__b--c1    { left: 10%; top: 51%; width: 25%; height: 38%; }
.planta--sistema .planta__b--c2    { left: 38.5%; top: 51%; width: 25%; height: 38%; }
.planta--sistema .planta__b--faixa { left: 67%; top: 51%; width: 23%; height: 38%;
                                     border-top: 1px solid var(--p-accent); }

/* — ficha do projeto — */
.projeto__ficha { display: flex; flex-direction: column; gap: .6rem; }
.projeto__id { color: var(--fg-faint); }
.projeto__nome { margin-block: .35rem .1rem; }
.projeto__nome .amp { color: var(--accent); font-weight: 400; }
.projeto__seg { color: var(--fg-faint); letter-spacing: .09em; }
.projeto__servs {
  display: flex; flex-direction: column; gap: .1rem;
  margin-top: .75rem; padding-top: .85rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .08em; text-transform: none;
  color: var(--fg-dim);
}
.projeto__ano {
  display: flex; align-items: center; gap: .75rem;
  margin-top: .6rem; color: var(--fg-faint);
}
.tag {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .28rem .55rem;
  border: 1px solid var(--rule);
  font-size: .6875rem; letter-spacing: .12em;   /* status é conteúdo: 11px */
}
.tag--live { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--fg); }
.tag--live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

.trabalho__pe {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: .75rem;
  justify-content: space-between;
}
.trabalho__pe a { color: var(--fg); border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.trabalho__pe a:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* ── 16 O PROBLEMA ────────────────────────────────────────────────────── */
.problema { padding-block: clamp(7rem, 18vh, 14rem); }
.problema__h2 { max-width: 16ch; }
.problema__en {
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  color: var(--fg-faint);
}
.problema__txt {
  margin-top: clamp(3rem, 8vh, 6rem);
  margin-left: auto;
  max-width: 48ch;
  display: flex; flex-direction: column; gap: 1.25rem;
  color: var(--fg-dim);
}
@media (min-width: 60rem) { .problema__txt { width: 52%; } }
.problema__pergunta { font-size: var(--t-lead); line-height: 1.4; letter-spacing: -.015em; }
.problema__pergunta strong { color: var(--fg); }

/* ── 17 FILOSOFIA ─────────────────────────────────────────────────────── */
.filosofia__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 60rem) {
  .filosofia__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.filosofia__txt {
  display: flex; flex-direction: column; gap: 1.25rem;
  color: var(--fg-dim); max-width: 42ch;
}
@media (min-width: 60rem) { .filosofia__txt { padding-top: .5rem; } }

.destaque {
  margin-top: clamp(4rem, 10vh, 8rem);
  padding-top: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid var(--rule);
}
.destaque p {
  font-size: clamp(1.45rem, 3.4vw, 3rem);
  font-weight: 400; line-height: 1.12; letter-spacing: -.03em;
  color: var(--fg-dim);
  max-width: 28ch;
}
.destaque__b { color: var(--fg); }

/* ── 18 CAPABILITIES ──────────────────────────────────────────────────── */
.servicos { border-top: 1px solid var(--rule); }
.servico { border-bottom: 1px solid var(--rule); }

.servico__cab {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(1rem, 4vw, 3rem);
  width: 100%; text-align: left;
  padding-block: clamp(1.1rem, 3.2vh, 2rem);
  cursor: pointer;
  transition: color .4s var(--e-out);
}
.servico__num { color: var(--fg-faint); transition: color .4s var(--e-out); }
.servico__nome {
  font-size: clamp(1.25rem, 3.4vw, 2.5rem);
  font-weight: 500; line-height: 1;
  letter-spacing: -.032em;
  color: var(--fg-dim);
  transition: color .45s var(--e-out), transform .55s var(--e-out);
}
.servico__sinal { position: relative; width: 14px; height: 14px; }
.servico__sinal i {
  position: absolute; top: 50%; left: 0;
  width: 100%; height: 1px; background: var(--fg-dim);
  transition: transform .5s var(--e-out), background .4s var(--e-out);
}
.servico__sinal i:last-child { transform: rotate(90deg); }

.servico.is-aberto .servico__nome { color: var(--fg); }
.servico.is-aberto .servico__num { color: var(--accent); }
.servico.is-aberto .servico__sinal i { background: var(--accent); }
.servico.is-aberto .servico__sinal i:last-child { transform: rotate(0deg); }
@media (hover: hover) and (min-width: 60rem) {
  .servico__cab:hover .servico__nome { color: var(--fg); transform: translateX(.4rem); }
}

.servico__corpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--e-io);
}
.servico.is-aberto .servico__corpo { grid-template-rows: 1fr; }
.servico__corpo-in {
  overflow: hidden;
  opacity: 0; transition: opacity .4s var(--e-out);
}
.servico.is-aberto .servico__corpo-in { opacity: 1; }
.servico__corpo-in > * {
  max-width: 52ch;
  padding-left: clamp(0rem, 4vw, 3.4rem);
}
.servico__corpo-in p:first-child {
  color: var(--fg-dim);
  padding-bottom: .85rem;
}
.servico__itens {
  padding-bottom: clamp(1.25rem, 3vh, 2rem);
  color: var(--fg-faint); letter-spacing: .09em;
}

/* ── 19 PROCESSO ──────────────────────────────────────────────────────── */
.etapas {
  display: grid; gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 48rem) {
  .etapas { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 75rem) {
  .etapas { grid-template-columns: repeat(4, 1fr); }
}
.etapa {
  padding: clamp(1.5rem, 3.5vh, 2.5rem) clamp(1rem, 2vw, 2rem) clamp(2.5rem, 6vh, 4rem) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
@media (min-width: 48rem) {
  .etapa { border-bottom: 0; }
  .etapa::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 1.5rem;
    width: 1px; background: var(--rule);
  }
  .etapa { padding-left: clamp(1rem, 2vw, 1.75rem); }
  .etapa:first-child::before { display: none; }
  .etapa:first-child { padding-left: 0; }
}
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .etapa:nth-child(3)::before { display: none; }
  .etapa:nth-child(3) { padding-left: 0; }
}
.etapa__num { color: var(--accent); margin-bottom: .75rem; }
.etapa__txt { color: var(--fg-dim); max-width: 30ch; }

.processo__frase {
  margin-top: clamp(3rem, 8vh, 6rem);
  padding-top: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid var(--rule);
  font-size: clamp(1.35rem, 3.2vw, 2.75rem);
  font-weight: 400; line-height: 1.14; letter-spacing: -.03em;
  max-width: 30ch;
}
.processo__frase .linha:first-child > span { color: var(--fg-dim); }

/* ── 20 CONVERGÊNCIA — THE ZENITH POINT ───────────────────────────────── */
.convergencia {
  position: relative;
  background: var(--bg); color: var(--fg);
  --p: 0;
}
.convergencia::before {
  content: ''; position: absolute; inset-inline: var(--gutter); top: 0;
  height: 1px; background: var(--rule-soft);
}
.convergencia__pista { height: 280vh; }
.convergencia__palco {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.convergencia__in { width: 100%; }

.niveis {
  --h: clamp(11rem, 40vh, 21rem);
  position: relative;
  height: var(--h);
  margin-block: clamp(2rem, 5vh, 3.5rem);
}

/* Os dois níveis têm altura zero e o fio ancorado na própria origem: um em
   y=0, o outro em y=--h. Assim cada um viaja exatamente --h/2 e eles se
   encontram no centro, no pixel. Os rótulos ficam FORA do vão — se ficassem
   dentro, colidiriam no momento em que o vão fecha. */
.nivel { position: absolute; inset-inline: 0; height: 0; }
.nivel--alto  { top: 0;    transform: translateY(calc(var(--p) * (var(--h) / 2))); }
.nivel--baixo { top: 100%; transform: translateY(calc(var(--p) * (var(--h) / -2))); }

.nivel__fio {
  position: absolute; inset-inline: 0; top: 0;
  height: 1px; background: var(--fg); opacity: .85;
}
.nivel__rot { position: absolute; left: 0; color: var(--fg-dim); }
.nivel--alto  .nivel__rot { bottom: .7rem; }
.nivel--baixo .nivel__rot { top: .7rem; }

/* cota de dimensão, como anotação de projeto */
.cota {
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  height: calc((1 - var(--p)) * var(--h));
  width: 1px;
  opacity: calc(1 - var(--p) * 1.15);
  pointer-events: none;
}
.cota__fio {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--rule);
}
.cota__seta {
  position: absolute; left: -3px;
  width: 7px; height: 7px;
  border-left: 1px solid var(--rule); border-top: 1px solid var(--rule);
}
.cota__seta--cima  { top: 0; transform: rotate(45deg); }
.cota__seta--baixo { bottom: 0; transform: rotate(225deg); }
.cota__delta {
  position: absolute; left: 1rem; top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

/* o ponto */
.ponto-zenith {
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%) scale(calc(.55 + var(--p) * .45));
  opacity: calc((var(--p) - .8) * 6);
  display: flex; align-items: center; gap: 1rem;
}
.ponto-zenith__nucleo {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--zenith-blue);
}
.ponto-zenith__halo {
  position: absolute; left: 4.5px; top: 50%;
  width: 7rem; height: 7rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(99, 109, 255, .28) 0%, rgba(99, 109, 255, 0) 68%);
  pointer-events: none;
}
.ponto-zenith__rot { color: var(--fg); letter-spacing: .14em; }
.ponto-zenith__rot i { color: var(--zenith-blue); font-style: normal; }

.convergencia__txt {
  max-width: 44ch;
  color: var(--fg-dim);
  font-size: var(--t-lead); line-height: 1.45; letter-spacing: -.014em;
}

/* ── 21 CLIENTE IDEAL ─────────────────────────────────────────────────── */
/* A headline ocupa a largura inteira do rail: numa coluna de grid ela
   re-quebrava dentro da máscara e desmontava as linhas escritas à mão.
   A assimetria passa a vir do bloco de texto, empurrado para a direita. */
.ideal__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 60rem) {
  .ideal__txt { margin-left: auto; width: min(44ch, 52%); }
}
.ideal__txt { display: flex; flex-direction: column; gap: 1.1rem; color: var(--fg-dim); max-width: 44ch; }
.ideal__pt { color: var(--fg-faint); letter-spacing: .09em; }

/* ── 22 SOBRE ─────────────────────────────────────────────────────────── */
.sobre__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 60rem) {
  .sobre__grid { grid-template-columns: 1.25fr .75fr; align-items: start; }
}
.sobre__txt { display: flex; flex-direction: column; gap: 1.25rem; color: var(--fg-dim); max-width: 52ch; }
.sobre__ficha { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.sobre__ficha > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding-block: .8rem;
  border-bottom: 1px solid var(--rule-soft);
}
.sobre__ficha dt { color: var(--fg-faint); }
.sobre__ficha dd { color: var(--fg); text-align: right; }

/* ── 23 PÔSTER ────────────────────────────────────────────────────────── */
.poster {
  position: relative;
  min-height: 100svh;
  background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
}
.poster__txt {
  max-width: var(--max); margin-inline: auto; width: 100%;
  /* teto medido contra "DA SUA MARCA.", a linha mais longa do pôster */
  font-size: clamp(2.5rem, min(10.5vw, 19vh), 12.25rem);
  line-height: .9;
}
.poster__pt {
  position: absolute; right: var(--gutter); bottom: clamp(2rem, 8vh, 5rem);
  font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1;
  color: var(--zenith-blue-ink);
}

/* ── 24 CONTATO ───────────────────────────────────────────────────────── */
.contato__h2 { max-width: 16ch; }
.contato__lead { margin-top: clamp(1.5rem, 4vh, 2.5rem); max-width: 42ch; }

.contato__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  margin-top: clamp(3.5rem, 9vh, 7rem);
  padding-top: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid var(--rule);
}
@media (min-width: 60rem) {
  .contato__grid { grid-template-columns: .8fr 1.2fr; }
}

.canais__rot { margin-bottom: 1.25rem; }
.canais__lista { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 2.5rem; }
.canais__lista li { border-bottom: 1px solid var(--rule-soft); padding-bottom: .9rem; }
.canais__lista a, .canais__lista span {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: 1.0625rem; letter-spacing: -.015em;
}
.canais__lista a i { font-style: normal; color: var(--accent); transition: transform .4s var(--e-out); }
.canais__lista a:hover i { transform: translate(.18em, -.18em); }
.canais__lista .pendente { color: var(--fg-faint); font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; }
.canais__loc { line-height: 1.8; }

/* formulário */
.form__rot { margin-bottom: 2rem; }
.form { display: flex; flex-direction: column; gap: 1.75rem; }

.campo { position: relative; display: flex; flex-direction: column; gap: .35rem; }
.campo label {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--fg-faint);
  transition: color .35s var(--e-out);
}
.campo input, .campo textarea {
  width: 100%;
  padding: .6rem 0;
  font-family: var(--sans); font-size: 1.0625rem;
  letter-spacing: -.012em; line-height: 1.45;
  color: var(--fg);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color .4s var(--e-out);
  resize: vertical;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--fg-faint); }
.campo input:focus, .campo textarea:focus { outline: 0; border-bottom-color: var(--accent); }
.campo:focus-within label { color: var(--fg); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 0; }
.campo.tem-erro input, .campo.tem-erro textarea { border-bottom-color: var(--accent); }
.campo__erro {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  min-height: 0; opacity: 0;
  transition: opacity .3s;
}
.campo.tem-erro .campo__erro { opacity: 1; }

.fieldset { display: flex; flex-direction: column; gap: .9rem; }
.fieldset legend {
  padding: 0;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--fg-faint);
}
.fichas { display: flex; flex-wrap: wrap; gap: .5rem; }
.ficha { position: relative; display: inline-flex; cursor: pointer; }
.ficha input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.ficha span {
  display: inline-flex; align-items: center;
  padding: .55rem .85rem;
  font-family: var(--mono); font-size: .625rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-dim);
  border: 1px solid var(--rule);
  transition: color .3s var(--e-out), border-color .3s var(--e-out), background .3s var(--e-out);
}
.ficha:hover span { color: var(--fg); border-color: var(--fg-dim); }
.ficha input:checked + span {
  color: var(--bg); background: var(--fg); border-color: var(--fg);
}
.ficha input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.form__enviar { align-self: flex-start; margin-top: .5rem; font-family: var(--mono); font-size: .6875rem; letter-spacing: .13em; }
.form__status { min-height: 1.4em; color: var(--fg-dim); letter-spacing: .08em; }
.form__status.is-erro { color: var(--accent); }

/* ── 25 FOOTER ────────────────────────────────────────────────────────── */
.pe {
  position: relative;
  padding: clamp(4rem, 10vh, 8rem) 0 clamp(1.5rem, 4vh, 2.5rem);
  background: var(--bg); color: var(--fg);
  border-top: 1px solid var(--rule);
}
.pe__marca { margin-bottom: clamp(3rem, 8vh, 6rem); }
.pe__word {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em;
  font-size: clamp(2.5rem, 11vw, 9rem);
  font-weight: 500; line-height: .9; letter-spacing: -.045em;
}
.pe__word span { font-weight: 300; color: var(--fg-dim); }
.pe__slogan {
  margin-top: 1rem;
  font-size: var(--t-lead); letter-spacing: -.015em;
  color: var(--fg-dim);
}

.pe__cols {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(2rem, 5vh, 3.5rem);
  border-top: 1px solid var(--rule-soft);
}
@media (min-width: 40rem) { .pe__cols { grid-template-columns: repeat(3, 1fr); } }
.pe__rot { margin-bottom: 1.1rem; }
.pe__col ul { display: flex; flex-direction: column; gap: .5rem; color: var(--fg-dim); }
.pe__col a { position: relative; }
.pe__col a::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--e-out);
}
.pe__col a:hover { color: var(--fg); }
.pe__col a:hover::after { transform: scaleX(1); }
.pe__col .pendente { color: var(--fg-faint); font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; }

.pe__base {
  display: flex; flex-wrap: wrap; gap: .75rem;
  justify-content: space-between;
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid var(--rule-soft);
}
.pe__zp i { color: var(--accent); font-style: normal; }

/* ── 26 MOVIMENTO REDUZIDO ────────────────────────────────────────────────
   Quem desliga animação recebe o site inteiro em estado final. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .has-js [data-reveal],
  .has-js [data-linhas] .linha > span,
  .has-js [data-palavras] .pv > span {
    opacity: 1 !important;
    transform: none !important;
  }

  .loader { display: none !important; }
  .cursor { display: none !important; }
  .scroll-ind__fio i { animation: none; transform: none; height: 45%; }
  .planta, .planta__b { transform: none !important; }

  /* a convergência entrega o estado final, sem depender de scroll */
  .convergencia { --p: 1 !important; }
  .convergencia__pista { height: auto; }
  .convergencia__palco { position: static; height: auto; padding-block: var(--secao-y); }
  .ponto-zenith { opacity: 1; }
  .cota { display: none; }
}

/* ── 27 AJUSTES DE TELA PEQUENA ───────────────────────────────────────────
   Mobile não é o desktop comprimido: muda hierarquia, não só tamanho. */
@media (max-width: 47.99rem) {
  .citacao__txt { max-width: 18ch; }
  .hero { min-height: 92svh; }
  .hero__h1 { margin-bottom: 2rem; }
  .hero__acoes { width: 100%; }
  .hero__acoes .btn { flex: 1 1 auto; justify-content: center; }
  .scroll-ind { display: none; }

  .chapa__quadro { aspect-ratio: 4 / 3; }
  .chapa__cores { font-size: .5625rem; gap: .25rem; }
  .chapa__nota { font-size: .625rem; }
  .projeto__servs { flex-direction: row; flex-wrap: wrap; gap: .1rem .9rem; }

  .servico__cab { grid-template-columns: auto 1fr auto; gap: .9rem; }
  .servico__corpo-in > * { padding-left: 0; }

  .problema__txt { margin-left: 0; }
  .sobre__ficha > div { font-size: .625rem; }
  .pe__base { flex-direction: column; gap: .4rem; }
}

/* Abaixo de 360px são os PISOS da escala que passam a estourar, não os
   termos fluidos. Só aqui eles cedem, para as linhas escritas à mão
   continuarem inteiras em vez de re-quebrarem dentro da máscara. */
@media (max-width: 22.5rem) {
  :root { --t-display: 1.85rem; --t-quote: 1.55rem; --t-h2: 1.8rem; }
  .poster__txt { font-size: 2.05rem; }
}