/* =============================================================
   Visign — design system + componentes do site
   Mobile-first. Breakpoints: 600 / 900 / 1280 / 1600.
   Anima apenas transform e opacity.
   ============================================================= */

/* ---------- Fonte (self-host, variável) ---------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter Light (300): só no texto ao lado da logo */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/inter-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* cores */
  --bg: #0f0f11;
  --bg-2: #0f0f11;
  --bg-3: #141414;
  --glow: rgba(15, 15, 17, .2);
  --text: #f5f5f5;
  --text-2: rgba(222, 222, 222, .78);
  --text-3: rgba(187, 187, 187, .62);
  --label: rgba(206, 206, 206, .72);
  --icon: rgba(191, 191, 191, .72);
  --line: rgba(167, 167, 167, .14);
  --brand: #e0592a; /* só no triângulo da logo */

  /* vidro */
  --glass: linear-gradient(180deg, rgba(147, 147, 147, .26), rgba(75, 75, 75, .13));
  --glass-border: rgba(177, 177, 177, .28);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .24);
  --glass-blur: blur(18px) saturate(140%);
  --pill: linear-gradient(180deg, rgba(15, 15, 17, .32), rgba(15, 15, 17, .6));
  --pill-border: rgba(150, 150, 150, .16);
  --plate: linear-gradient(180deg, rgba(15, 15, 17, .42), rgba(15, 15, 17, .58));
  --window: var(--plate); /* janelas (Menu, Serviços, A Visign): mesma cor/opacidade do box do título dos cards */
  --plate-border: rgba(177, 177, 177, .2);
  --plate-hi: inset 0 1px 0 rgba(255, 255, 255, .12);
  --window-blur: blur(34px) saturate(140%);

  /* forma */
  --r-card: 10px;
  --r-window: 10px;
  --r-plate: 18px;

  /* movimento */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-window: 450ms;
  --t-fast: 220ms;

  /* layout */
  --gutter: clamp(26px, 3.9vw, 56px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --top-h: calc(var(--safe-t) + clamp(84px, 6.6vw, 96px)); /* altura reservada do topo */
  --dock-space: calc(var(--safe-b) + 96px);                 /* espaço da dock (mobile) */
  --wa-size: 40px;                                          /* WhatsApp flutuante (50px no desktop) */

  /* tipografia */
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ls-label: .24em;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: rgba(159, 159, 159, .45) transparent;
}
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(120% 60% at 85% -10%, var(--glow), transparent 60%),
    radial-gradient(90% 50% at 0% 110%, rgba(15, 15, 17, .55), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
body.has-window { overflow: hidden; }
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(159, 159, 159, .45); border-radius: 3px; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid rgba(205, 205, 205, .9);
  outline-offset: 3px;
  border-radius: 999px;
}

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--bg-3); color: var(--text);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ícones (sprite) */
.i {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Tipografia utilitária ---------- */
.label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--label);
}

/* ---------- Componentes de vidro ---------- */
.btn-round,
.btn-plus,
.btn-glass,
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  box-shadow: var(--glass-hi), 0 10px 30px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--text);
  transition: filter var(--t-fast) ease, transform var(--t-fast) var(--ease), opacity var(--t-fast) ease;
}
.btn-round { width: 42px; height: 42px; }
.btn-round--sm { width: 36px; height: 36px; }
.btn-round .i { width: 18px; height: 18px; }

.btn-plus { width: 40px; height: 40px; }
.btn-plus .i { width: 20px; height: 20px; stroke-width: 1.5; transition: transform 420ms var(--ease); }
.btn-plus--sm { width: 32px; height: 32px; }
.btn-plus--sm .i { width: 16px; height: 16px; }

.btn-glass {
  gap: 10px;
  min-height: 40px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.btn-glass .i { width: 18px; height: 18px; color: var(--icon); }

.chip {
  height: 32px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--pill);
  border-color: var(--pill-border);
  box-shadow: none;
}
.chip.is-active {
  color: var(--text);
  background: var(--glass);
  border-color: var(--glass-border);
  box-shadow: var(--glass-hi);
}

.btn-round:active, .btn-plus:active, .btn-glass:active, .chip:active { transform: scale(.96); }

@media (hover: hover) {
  .btn-round:hover, .btn-plus:hover, .btn-glass:hover, .chip:hover { filter: brightness(1.22); }
  .btn-plus:hover .i, .card__link:hover .btn-plus .i { transform: rotate(90deg); }
  .btn-plus--go:hover .i { transform: translateX(2px); }
}

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--icon);
  transition: color var(--t-fast) ease, transform var(--t-fast) var(--ease);
}
@media (hover: hover) { .icon-link:hover { color: var(--text); } }

/* ---------- Topo ---------- */
.topbar {
  position: absolute;
  z-index: 30;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--safe-t) + 20px) var(--gutter) 0;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar__logo {
  --logo-w: clamp(88px, 8.8vw, 127px);
  --logo-h: calc(var(--logo-w) * 24.77 / 125.23);
  display: flex;
  align-items: center;
  gap: calc(var(--logo-h) * .62);
  color: #fff;
}
.topbar__logo .logo { width: var(--logo-w); height: auto; }
/* texto em 3 linhas ao lado da logo, ocupando a mesma altura das letras dela */
.topbar__slogan {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(var(--logo-h) * .96);
  font-family: "Inter", var(--font);
  font-size: calc(var(--logo-h) * .335);
  font-weight: 300;
  line-height: .8;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar__slogan > span { display: block; text-box: trim-both cap alphabetic; }
/* entrada da logo e do texto: só na primeira página da sessão (classe is-intro-done vem do <head>) */
html:not(.is-intro-done) .topbar__logo .logo { animation: logo-in 900ms var(--ease) 120ms backwards; }
html:not(.is-intro-done) .topbar__slogan > span { animation: slogan-in 700ms var(--ease) backwards; animation-delay: calc(560ms + var(--k, 0) * 120ms); }
@keyframes logo-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes slogan-in { from { opacity: 0; transform: translateX(-12px); } }
.topbar__actions {
  display: flex;
  align-items: center;
  gap: clamp(20px, 1.8vw, 26px);
}
.topbar .icon-link { color: #fff; }
.topbar .icon-link .i { width: clamp(24px, 2.2vw, 31px); height: clamp(24px, 2.2vw, 31px); stroke-width: 1.5; }
@media (hover: hover) { .topbar .icon-link:hover { opacity: .75; } }
/* desktop: logotipo do Instagram (um pouco menor que o ícone) e mais afastado do Menu */
.ig-word { --h: clamp(18px, 1.35vw, 22px); flex: none; height: var(--h); width: calc(var(--h) * 1907.18 / 424.15); fill: currentColor; }
@media (min-width: 900px) { .topbar__ig { margin-right: clamp(16px, 1.6vw, 26px); } }
.menu-link {
  position: relative;
  font-size: clamp(12px, .95vw, 14px);
  font-weight: 600;
  letter-spacing: .26em;
  margin-right: -.26em; /* compensa o espaçamento final */
  text-transform: uppercase;
  color: var(--text);
  transition: opacity var(--t-fast) ease;
}
@media (hover: hover) { .menu-link:hover { opacity: .75; } }

/* ---------- Dock (somente < 900px) ---------- */
.dock {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: calc(var(--safe-b) + 22px);
  width: calc(100% - 2 * var(--gutter)); /* alinhada às laterais do conteúdo */
  height: 54px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 50px;
  background: var(--plate);
  border: 1px solid var(--plate-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  translate: -50% 0; /* separado do scale: o encolhimento fica no centro exato */
}
/* rolando a página para baixo, a dock encolhe um pouco ao centro (como no Instagram); volta ao rolar para cima */
.dock { scale: 1; transition: scale 380ms var(--ease); }
.dock.is-compact { scale: .86; }

.dock__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 52px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--icon);
  border: 1px solid transparent;
  transition: color var(--t-fast) ease, background-color var(--t-fast) ease, transform 380ms var(--spring);
}
.dock__item .i { width: 21px; height: 21px; stroke-width: 1.5; }
.dock__item.is-active {
  color: var(--text);
  background: var(--plate);
  border-color: var(--plate-border);
  box-shadow: var(--plate-hi);
}
.dock__item:active { transform: scale(.92); }

/* ---------- Balões de entrada (mobile, 1x por sessão): Projetos → Serviços → A Visign → "Veja mais" do Menu ---------- */
.tip {
  position: absolute;
  z-index: 1;
  left: 50%;
  translate: -50% 0;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: #fff;
  background: #0f0f11;
  border: 1px solid #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
}
/* setinha: quadrado girado com duas bordas, cobre a borda do balão onde encosta */
.tip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: inherit;
  border: solid #fff;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}
.tip--up::after { top: auto; bottom: 100%; margin: 0 0 -4px -4px; border-width: 1px 0 0 1px; }
.dock__tip { bottom: calc(100% + 16px); transform-origin: 50% 100%; }
.menu-tip { top: calc(100% + 14px); transform-origin: 50% 0; }
/* "Veja mais" fica 1 minuto e some; no mobile entra depois dos balões da dock, no desktop logo após a logo */
html:not(.is-intro-done) .menu-tip { animation: tip-down 60s var(--ease) 1.8s; }
@media (max-width: 899.98px) {
  html:not(.is-intro-done) .dock__tip { animation: tip-up 2s var(--ease) calc(1.8s + var(--n, 0) * 2.1s); }
  html:not(.is-intro-done) .menu-tip { animation-delay: 8.1s; }
}
@keyframes tip-up { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 14%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes tip-down { 0% { opacity: 0; transform: translateY(-10px) scale(.9); } 1%, 99% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px); } }

/* ---------- WhatsApp flutuante (canto inferior direito, acima da dock no mobile) ---------- */
.wa-float {
  position: fixed;
  z-index: 34; /* abaixo das janelas e da dock */
  right: var(--gutter);
  bottom: var(--dock-space);
  width: var(--wa-size);
  height: var(--wa-size);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  transition: transform 380ms var(--spring);
  view-transition-name: wa;
}
.wa-float img { width: 100%; height: 100%; }
.wa-float:active { transform: scale(.94); }
@media (hover: hover) { .wa-float:hover { transform: scale(1.06); } }
/* entrada só na primeira página da sessão */
html:not(.is-intro-done) .wa-float { animation: wa-in 800ms var(--spring) 1100ms backwards; }
@keyframes wa-in { from { opacity: 0; transform: translateY(18px) scale(.4); } }

/* ---------- Stage (slide Home + galeria Projeto) ---------- */
.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 520px;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.stage__slides { position: absolute; inset: 0; }
/* Só o atual, o anterior (saindo) e o próximo (pré-carregando) ficam no DOM visível:
   imagens lazy em display:none não são baixadas. */
.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: none;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.slide.is-active, .slide.is-prev, .slide.is-next { display: block; }
.slide.is-active { opacity: 1; z-index: 1; }
.slide .pic, .slide img { width: 100%; height: 100%; }
.slide img {
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  transform: scale(1.06);
  transition: transform 7s linear;
  will-change: transform;
}
.slide.is-active img { transform: scale(1); }
/* parallax sutil (desktop): JS ajusta --px/--py */
.stage--home .slide.is-active .pic { transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform 600ms var(--ease); }
.stage__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 26%),
    linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .55) 22%, rgba(0, 0, 0, 0) 48%);
}

/* Mídia por tela: projeto/item só com conteúdo mobile não aparece no desktop e vice-versa.
   .media--m/.media--d são as camadas (imagem ou vídeo) de cada tela dentro de um mesmo slide/card. */
.is-nolink { display: none !important; } /* seta de projeto com um item só (sem página de detalhes) */
@media (max-width: 899px) { [data-only="desktop"], .media--d { display: none !important; } }
@media (min-width: 900px) { [data-only="mobile"], .media--m { display: none !important; } }

/* Vídeo do YouTube como fundo do slide: preenche a tela como object-fit: cover.
   Sem cliques no iframe (toque/arraste continuam trocando o slide); a miniatura fica por baixo até o vídeo tocar. */
.yt { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #000; }
.yt__poster { position: absolute; inset: 0; object-fit: cover; }
/* miniatura 4:3 de vídeo 16:9 vem com faixas pretas em cima e embaixo: amplia até só o vídeo cobrir a tela */
.yt--wide .yt__poster {
  --w: max(100cqw, calc(100cqh * 16 / 9));
  inset: auto;
  top: calc(50% - var(--w) * 3 / 8);
  left: calc(50% - var(--w) / 2);
  width: var(--w);
  height: calc(var(--w) * 3 / 4);
}
.yt iframe {
  position: absolute;
  top: 50%; left: 50%;
  border: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
/* --ov: sobra do player além da tela em cima e embaixo, onde o YouTube desenha título, canal,
   "Mais vídeos" e logo (aparecem ao começar e ao pausar) — assim nada da interface dele fica visível */
.yt { --ov: 72px; }
@media (min-width: 900px) { .yt { --ov: 110px; } }
.yt--wide iframe { --h: calc(max(100cqh, 100cqw * 9 / 16) + var(--ov) * 2); height: var(--h); width: calc(var(--h) * 16 / 9); }
.yt--short iframe { --h: calc(max(100cqh, 100cqw * 16 / 9) + var(--ov) * 2); height: var(--h); width: calc(var(--h) * 9 / 16); }
.yt.is-playing iframe { opacity: 1; }
/* Home: o vídeo entra direto, sem a capa do YouTube; a capa só aparece se ele demorar a tocar (stage.js) */
.stage--home .yt__poster { opacity: 0; transition: opacity 600ms var(--ease); }
.stage--home .yt.show-poster .yt__poster { opacity: 1; }

/* barra de progresso estilo stories */
.stage__bar {
  position: absolute;
  z-index: 5;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--safe-t) + 53px); /* seta/linha 15px abaixo da logo (mesma altura em todas as páginas) */
  display: flex;
  align-items: center;
  gap: 16px;
}
.progress {
  flex: 1;
  display: flex;
  gap: clamp(5px, .55vw, 8px);
}
.progress__seg {
  position: relative;
  flex: 1;
  height: 16px;           /* área de toque */
  display: flex;
  align-items: center;
}
.progress__seg::before,
.progress__seg i {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
}
.progress__seg::before { background: rgba(255, 255, 255, .3); }
.progress__seg i {
  background: #fff;
  transform-origin: left center;
  transform: scaleX(0);
}
.progress__seg.is-done i { transform: scaleX(1); }

.stage__bar--gallery .btn-round { width: 30px; height: 30px; color: var(--text); } /* mesmo tamanho da seta da Home */
.stage__bar--gallery .btn-round .i { width: 15px; height: 15px; }

/* zonas laterais (clique) — setas aparecem no hover em telas com mouse */
.stage__zone {
  position: absolute;
  z-index: 3;
  top: 22%;
  bottom: 28%;
  width: 30%;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  cursor: pointer;
}
.stage__zone--prev { left: 0; justify-content: flex-start; }
.stage__zone--next { right: 0; justify-content: flex-end; }
.stage__zone .btn-round { opacity: 0; transform: scale(.9); transition: opacity 300ms ease, transform 300ms var(--ease), filter var(--t-fast) ease; }
@media (hover: hover) and (min-width: 900px) {
  .stage__zone:hover .btn-round, .stage__zone:focus-visible .btn-round { opacity: 1; transform: none; }
}
.stage__zone:focus-visible { outline: none; }

/* mobile: mãozinha clicando + "Clique para avançar" na lateral direita; some no primeiro toque na tela */
.stage__hint { display: none; }
@media (max-width: 899.98px) {
  .stage__hint {
    position: absolute;
    top: 50%;
    right: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    font-size: 13px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
    pointer-events: none;
    transition: opacity 500ms ease;
  }
  .stage__hint .i { width: 32px; height: 32px; margin-right: 2px; stroke-width: 1.5; overflow: visible; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .4)); }
  .hint-hand__hand, .hint-hand__rays { transform-box: fill-box; transform-origin: 50% 100%; }
  .hint-hand__hand { animation: hint-tap 1.8s var(--ease) infinite; }
  .hint-hand__rays { opacity: 0; animation: hint-rays 1.8s ease-out infinite; }
  .stage.is-hint-done .stage__hint { opacity: 0; }
  .stage.is-hint-done .stage__hint g { animation: none; }
}
@keyframes hint-tap { 0%, 16%, 58%, 100% { transform: none; } 32% { transform: translateY(1.6px) scale(.9); } }
@keyframes hint-rays { 0%, 30% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: none; } 72%, 100% { opacity: 0; transform: scale(1.2); } }

/* rodapé: legenda à esquerda; à direita fica livre para o WhatsApp flutuante */
.stage__foot {
  position: absolute;
  z-index: 5;
  left: var(--gutter);
  right: calc(var(--gutter) + var(--wa-size) + 16px);
  bottom: var(--dock-space);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  pointer-events: none;
}
.stage__foot > * { pointer-events: auto; }
/* slide de projeto com "ocultar textos": sem legenda e seta */
.stage__foot { transition: opacity 420ms var(--ease), visibility 0s linear 0s; }
.stage.is-bare .stage__foot { opacity: 0; visibility: hidden; transition: opacity 420ms var(--ease), visibility 0s linear 420ms; }
.stage__captions { position: relative; flex: 1; min-width: 0; display: grid; }
.caption {
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
/* categoria + X (mobile) / título + mãozinha clicando (mobile) ou seta (desktop) / resumo */
.caption__head { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.caption__row { display: flex; align-items: center; gap: 10px; }
.caption__body { margin-top: 12px; }
.caption__go { flex: none; }
.caption__tap { flex: none; display: flex; color: #fff; }
.caption__tap .i { width: 26px; height: 26px; stroke-width: 1.5; overflow: visible; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .4)); }
.caption__title {
  font-size: 23px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.caption__text {
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-2);
}
.caption.is-leaving { opacity: 0; transform: translateY(-8px); }
.caption.is-entering { opacity: 0; transform: translateY(10px); }

/* mobile: X recolhe os textos (fica só o título); tocar no título abre de novo */
.caption__close {
  width: 32px;
  height: 32px;
  margin: -10px 0; /* área de toque maior sem afastar o título */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.caption__close .i { width: 16px; height: 16px; stroke-width: 1.6; }
.caption.is-collapsed .caption__head,
.caption.is-collapsed .caption__text { display: none; }
/* ícone (i) ao lado do título com os textos recolhidos: avisa que tocar nele abre de novo */
.caption__info { display: none; width: .76em; height: .76em; margin-left: .1em; vertical-align: -.06em; stroke-width: 1.8; color: var(--text); }
.caption.is-collapsed .caption__info { display: inline-block; }
.caption.is-collapsed .caption__title { cursor: pointer; }

.thumbs { display: none; }

/* ---------- Projetos ---------- */
/* linha abaixo do topo, na mesma altura da linha do tempo do slide */
.page-rule {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--safe-t) + 70px);
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .15);
  pointer-events: none;
}
.projects {
  min-height: 100dvh;
  padding: calc(var(--safe-t) + 81px) 20px calc(var(--dock-space) + 20px);
}
.projects__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 6px;
}
.projects__back { position: absolute; left: 6px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; } /* mesmo tamanho da seta ao lado da linha do tempo */
.projects__back .i { width: 15px; height: 15px; }
.projects__title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .42em;
  margin-right: -.42em;
  text-transform: uppercase;
}
.filters {
  display: flex;
  gap: 8px;
  margin: 20px 6px 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.card {
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.card.is-hidden { display: none; }
.card.is-out { opacity: 0; transform: scale(.97); }
.card__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid rgba(177, 177, 177, .14);
  background: var(--bg-2);
  aspect-ratio: 6 / 5;
  isolation: isolate;
}
.card__pic, .card__pic img { width: 100%; height: 100%; }
.card__pic img {
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  transition: transform 1.2s var(--ease);
}
@media (hover: hover) { .card__link:hover .card__pic img { transform: scale(1.045); } }


/* ---------- 404 ---------- */
.notfound {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: var(--top-h) var(--gutter) var(--dock-space);
}
.notfound__title { font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: -.02em; }
.notfound__text { color: var(--text-2); max-width: 40ch; margin-bottom: 10px; }

/* ---------- Janelas (Menu, Serviços, A Visign) ---------- */
.window {
  position: fixed;
  inset: 0;
  z-index: 35; /* abaixo da dock no mobile */
}
.window__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 17, .55);
  opacity: 0;
  transition: opacity var(--t-window) var(--ease);
}
/* mobile: cartão flutuante que termina acima da dock — o texto não rola por trás dela */
.window__panel {
  position: absolute;
  left: 12px; right: 12px;
  bottom: calc(var(--safe-b) + 86px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-window);
  border: 1px solid rgba(169, 169, 169, .16);
  background: var(--window);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 -20px 60px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: var(--window-blur);
  backdrop-filter: var(--window-blur);
  transform: translate3d(0, calc(100% + var(--safe-b) + 100px), 0);
  transition: transform var(--t-window) var(--ease);
  will-change: transform;
}
.window--read .window__panel { top: calc(var(--safe-t) + 12px); } /* Serviços e A Visign: ocupam a tela toda, até em cima */
.window--menu .window__panel { top: calc(var(--safe-t) + 12px); left: auto; width: min(280px, calc(100% - 24px)); }
.window:not(.is-open) { pointer-events: none; } /* fechando: nunca bloqueia cliques */
.window.is-open .window__backdrop { opacity: 1; }
.window.is-open .window__panel { transform: translate3d(0, var(--drag, 0px), 0); }
.window.is-dragging .window__panel { transition: none; }

.window__grip {
  position: absolute;
  top: 8px; left: 50%;
  width: 38px; height: 4px;
  margin-left: -19px;
  border-radius: 4px;
  background: rgba(203, 203, 203, .28);
}
.window__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 24px 0;
}
.window__close { flex: none; width: 34px; height: 34px; }
.window__close .i { width: 15px; height: 15px; }
.window--read .window__close { position: absolute; top: 26px; right: 24px; z-index: 2; }
.window__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 30px 24px 28px;
  -webkit-overflow-scrolling: touch;
}
.window--read .window__scroll { padding-top: 30px; }

/* textos secundários das janelas um pouco mais em destaque (sem chegar ao branco) */
.window { --text-3: rgba(214, 214, 214, .84); }

/* botões e X das janelas: mesmo fundo do box do título dos cards */
.window :is(.btn-round, .btn-glass, .btn-plus, .chip) {
  background: var(--plate);
  border-color: var(--plate-border);
  box-shadow: var(--plate-hi);
}

/* botões do Menu: translúcidos, sem tom azul */
.window--menu .menu-block .btn-glass {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* conteúdo de leitura */
.read-title {
  margin-top: 14px;
  padding-right: 52px;
  font-size: clamp(26px, 3.55vw, 51px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.read-intro {
  margin-top: 18px;
  max-width: 58ch;
  font-size: clamp(14.5px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--text-3);
}

.services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 22px;
  margin-top: 34px;
}
.service__head { display: flex; align-items: center; gap: 12px; }
.service__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--plate-border);
  background: var(--plate);
  color: var(--icon);
}
.service__icon .i { width: 17px; height: 17px; }
.service__title { font-size: clamp(15.5px, 1.55vw, 22px); font-weight: 500; letter-spacing: -.01em; }
.service__text {
  margin-top: 14px;
  font-size: clamp(13px, 1.06vw, 15.3px);
  line-height: 1.65;
  color: var(--text-3);
}

.highlight { margin-top: 34px; }
.highlight__title {
  position: relative;
  padding-left: 24px;
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #e4e4e4;
}
.highlight__mark {
  position: absolute;
  left: 0; top: .3em;
  width: 13px; height: 13px;
  fill: rgba(168, 168, 168, .85);
  stroke: none;
}
.highlight__text {
  margin-top: 18px;
  padding-left: 24px;
  font-size: clamp(13.5px, 1.1vw, 15.5px);
  line-height: 1.75;
  color: var(--text-3);
}

/* janela Solicitar orçamento: passos com marcador laranja, subtítulos e observações */
.quote { margin-top: 30px; max-width: 62ch; }
.quote__step { margin-top: 44px; }
.quote__step:first-child { margin-top: 0; }
.quote__num {
  display: block;
  width: max-content;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 2px solid rgba(224, 89, 42, .9);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #e0592a;
}
.quote__name,
.quote__sub {
  display: block;
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: #e4e4e4;
}
.quote__sub {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: clamp(14.5px, 1.4vw, 18px);
}
.quote__text,
.quote__list,
.quote__note,
.quote__alert {
  margin-top: 12px;
  font-size: clamp(13.5px, 1.1vw, 15.5px);
  line-height: 1.7;
  color: var(--text-3);
}
.quote__name + .quote__text, .quote__step + .quote__text { margin-top: 10px; }
.quote__list { padding-left: 1.2em; list-style: disc; }
.quote__list li + li { margin-top: 4px; }
.quote__list li::marker { color: #e0592a; }
.quote__text + .quote__list { margin-top: 4px; }
.quote__text:has(+ .quote__list) { margin-top: 18px; font-weight: 600; color: #e4e4e4; } /* "PIX", "CARTÃO DE CRÉDITO" */
.quote__note { font-size: clamp(12.5px, 1vw, 14px); color: var(--text-3); opacity: .8; }
.quote__alert {
  margin-top: 40px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #e0592a;
}

/* conteúdo do Menu */
.menu-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.menu-nav a {
  font-size: 14px;
  color: var(--text-2);
  transition: color var(--t-fast) ease, transform var(--t-fast) var(--ease);
}
.menu-nav a.is-current { color: var(--text); }
@media (hover: hover) { .menu-nav a:hover { color: var(--text); transform: translateX(3px); } }

.menu-block {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.menu-block:last-child { border-bottom: 0; }
.menu-block__title { font-size: clamp(17px, 1.55vw, 22px); font-weight: 500; letter-spacing: -.01em; }
.menu-block__text {
  margin-top: 10px;
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.6;
  color: var(--text-3);
}
.menu-block .btn-glass { margin-top: 18px; }
.menu-block > .btn-glass:first-child { margin-top: 0; } /* bloco só com o botão (sem título) */
.menu-line {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 12px;
  font-size: clamp(14px, 1.08vw, 15.5px);
  line-height: 1.55;
  color: var(--text-2);
}
.menu-line .i { width: 18px; height: 18px; margin-top: 2px; color: var(--icon); }
a.menu-line { transition: color var(--t-fast) ease; }
@media (hover: hover) { a.menu-line:hover { color: var(--text); } }
.menu-contacts { margin-top: 6px; }
.menu-block--cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
}
.menu-block--cta .btn-glass { margin-top: 0; }
.menu-cta__text { font-size: 15px; font-weight: 500; }
/* blocos do Menu (Instagram em diante): tudo em 14px */
.window--menu .menu-block :is(.menu-block__title, .menu-block__text, .menu-line, .menu-cta__text) { font-size: 14px; }
.window--menu .menu-block .btn-glass { font-size: 13px; min-height: 36px; padding: 0 16px; gap: 8px; }
/* blocos do Menu sem linha divisória nem espaço acima do título; só o primeiro se afasta da navegação */
.window--menu .menu-block { padding-top: 0; border-bottom: 0; }
.window--menu .menu-nav { border-bottom: 0; }
.window--menu .menu-nav + .menu-block { padding-top: 28px; }
/* blocos só com o botão ficam mais próximos entre si; o próximo bloco com título volta a se afastar */
.window--menu .menu-block:has(> .btn-glass:first-child) { padding-bottom: 12px; }
.window--menu .menu-block:has(> .btn-glass:first-child) + .menu-block:not(:has(> .btn-glass:first-child)) { padding-top: 18px; }
.window--menu .window__close { width: 30px; height: 30px; }
.window--menu .window__close .i { width: 14px; height: 14px; }
.window--menu .menu-block .btn-glass { width: 100%; border-radius: 10px; }
.window--menu .menu-block--cta { flex-direction: column; align-items: stretch; gap: 18px; } /* botão abaixo do texto */
.menu-foot { padding: 4px 0 8px; }
.menu-foot__link {
  font-size: 13px;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast) ease;
}
@media (hover: hover) { .menu-foot__link:hover { color: var(--text); } }

/* ---------- Aviso de cookies ---------- */
.cookies {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(var(--dock-space) + 8px);
  width: min(560px, calc(100% - 2 * 16px));
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  border-radius: var(--r-plate);
  background: var(--window);
  border: 1px solid var(--pill-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: var(--window-blur);
  backdrop-filter: var(--window-blur);
  transform: translateX(-50%);
  animation: cookies-in 420ms var(--ease) both;
}
.cookies[hidden] { display: none; }
.cookies__text { flex: 1 1 260px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.cookies__actions { display: flex; gap: 10px; margin-left: auto; }
.cookies .chip { height: 40px; }
@keyframes cookies-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) { .cookies { animation: none; } }
/* Desktop: canto inferior direito, acima dos controles do slide (não cobre a legenda) */
@media (min-width: 900px) {
  .cookies { left: auto; right: var(--gutter); bottom: 132px; width: 420px; transform: none; animation-name: cookies-in-d; }
  .cookies .chip { height: 46px; padding: 0 20px; font-size: 15px; }
  @keyframes cookies-in-d { from { opacity: 0; transform: translateY(12px); } }
}

/* ---------- Revelação suave ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Transições entre páginas ---------- */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 380ms; animation-timing-function: var(--ease); }
::view-transition-old(app) { animation: vt-out 260ms var(--ease) both; }
::view-transition-new(app) { animation: vt-in 420ms var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.01); } }
#app { view-transition-name: app; }
.topbar { view-transition-name: topbar; }
.dock { view-transition-name: dock; }
#app.is-swapping { opacity: 0; transition: opacity 220ms ease; }
#app { transition: opacity 320ms var(--ease); }

/* =============================================================
   ≥ 600px — tablet retrato
   ============================================================= */
@media (min-width: 600px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .projects { padding-left: var(--gutter); padding-right: var(--gutter); }
  .projects__head, .filters { padding: 0; margin-left: 0; margin-right: 0; }
  .projects__back { left: 0; }
  .window--read .window__panel { top: calc(var(--safe-t) + 12px); }
  .window__head { padding: 40px 36px 0; }
  .window__scroll { padding-left: 36px; padding-right: 36px; }
  .window--read .window__close { right: 36px; }
}

/* =============================================================
   ≥ 900px — tablet paisagem / desktop: sem dock, janelas flutuantes
   ============================================================= */
@media (min-width: 900px) {
  :root { --dock-space: 56px; --wa-size: 50px; }
  .dock { display: none; }
  .topbar { padding-top: calc(var(--safe-t) + 22px); }
  .stage__bar { top: calc(var(--safe-t) + 65px); }
  .stage__bar--gallery .btn-round { width: 36px; height: 36px; }
  .stage__bar--gallery .btn-round .i { width: 17px; height: 17px; }
  .window--menu .menu-block .btn-glass { border-radius: 999px; }

  .slide img { object-position: var(--fxd, 50%) var(--fyd, 50%); }
  .stage--home .slide .pic { position: absolute; inset: -14px; width: auto; height: auto; max-width: none; }
  .card__pic img { object-position: var(--fxd, 50%) var(--fyd, 50%); }

  .label { font-size: 11px; }
  .btn-round { width: 46px; height: 46px; }
  .btn-round--sm { width: 42px; height: 42px; }
  .btn-plus { width: 52px; height: 52px; }
  .btn-plus .i { width: 22px; height: 22px; }
  .btn-plus--sm { width: 36px; height: 36px; }
  .btn-glass { min-height: 46px; padding: 0 24px; font-size: 15px; }
  .chip { height: 38px; padding: 0 20px; font-size: 15px; }
  .caption__head { margin-bottom: 14px; }
  .caption__row { gap: 28px; }
  .caption__title { max-width: 20ch; font-size: clamp(32px, 4.45vw, 64px); }
  .caption__close { display: none; }
  .caption__body { display: block; margin-top: 16px; }
  .caption.is-collapsed .caption__head, .caption.is-collapsed .caption__text { display: revert; }
  .caption.is-collapsed .caption__info { display: none; }
  .caption__text { max-width: 40ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5; }
  .stage--gallery .stage__foot { align-items: flex-end; }
  .stage--gallery .stage__captions { padding-right: 24px; }

  /* resumo do projeto: escondido; sobe da base quando o mouse entra na tela, empurrando categoria e título */
  @media (hover: hover) {
    .caption { display: grid; grid-template-rows: auto auto 0fr; transition: opacity 600ms var(--ease), transform 600ms var(--ease), grid-template-rows 560ms var(--ease); }
    .caption__head { grid-row: 1; } .caption__row { grid-row: 2; }
    .caption__body { grid-row: 3; min-height: 0; overflow: hidden; margin-top: 0; opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--ease), transform 560ms var(--ease); }
    .caption__body::before { content: ""; display: block; height: 16px; } /* espaço dentro do recorte, some junto */
    body:hover .caption, .stage:has(:focus-visible) .caption { grid-template-rows: auto auto 1fr; }
    body:hover .caption__body, .stage:has(:focus-visible) .caption__body { opacity: 1; transform: none; transition-delay: 80ms; }
  }

  /* miniaturas na galeria */
  .thumbs {
    display: flex;
    gap: 10px;
    flex: none;
  }
  .thumb {
    width: 128px;
    height: 92px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(177, 177, 177, .22);
    opacity: .55;
    transition: opacity var(--t-fast) ease, transform var(--t-fast) var(--ease), border-color var(--t-fast) ease;
  }
  .thumb img { width: 100%; height: 100%; object-fit: cover; }
  .thumb.is-active { opacity: 1; border-color: rgba(229, 229, 229, .7); }
  .thumb:hover { opacity: .9; transform: translateY(-2px); }

  .projects { padding: calc(var(--safe-t) + 97px) var(--gutter) 80px; }
  .page-rule { top: calc(var(--safe-t) + 82px); }
  .projects__back { width: 42px; height: 42px; }
  .projects__back .i { width: 18px; height: 18px; }
  .projects__head { min-height: 46px; }
  .projects__title { font-size: 14px; }
  .filters { margin: 22px 0 30px; gap: 10px; }
  .grid { gap: 25px; }

  /* janelas flutuantes à direita, abaixo do topo */
  .window { z-index: 50; }
  .window__panel {
    left: auto;
    right: 24px;
    top: calc(var(--safe-t) + 100px);
    bottom: 24px;
    border-radius: var(--r-window);
    border-bottom: 1px solid rgba(169, 169, 169, .16);
    opacity: 0;
    transform: translate3d(24px, 0, 0) scale(.985);
    transform-origin: right center;
    transition: transform var(--t-window) var(--ease), opacity var(--t-window) var(--ease);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 80px rgba(0, 0, 0, .5);
  }
  .window--menu .window__panel { top: calc(var(--safe-t) + 100px); width: 280px; }
  .window--menu .window__head { padding: 40px 28px 0; }
  .window--menu .window__scroll { padding: 28px 28px 36px; }
  .window--menu .btn-glass { max-width: 100%; }
  .window--read .window__panel { top: calc(var(--safe-t) + 24px); width: min(800px, 60vw); }
  .window.is-open .window__panel { opacity: 1; transform: none; }
  .window__grip { display: none; }
  .window__backdrop { background: rgba(15, 15, 17, .38); }
  .window__head { padding: 52px 56px 0; }
  .window__close { width: 40px; height: 40px; }
  .window__close .i { width: 16px; height: 16px; }
  .window--menu .window__close { width: 34px; height: 34px; }
  .window--menu .window__close .i { width: 15px; height: 15px; }
  .window--read .window__close { top: 36px; right: 50px; }
  .window__scroll { padding: 36px 56px 56px; }
  .window--read .window__scroll { padding-top: 54px; }
  .read-title { margin-top: 20px; padding-right: 0; font-size: 40px; }
  .services { gap: 52px 54px; margin-top: 60px; }
  .service__icon { width: 48px; height: 48px; }
  .service__icon .i { width: 20px; height: 20px; }
  .service__head { gap: 16px; }
  .service__text { margin-top: 22px; }
  .highlight { margin-top: 56px; }
  .highlight__title { padding-left: 33px; }
  .highlight__mark { width: 17px; height: 17px; }
  .highlight__text { padding-left: 33px; margin-top: 22px; }
  .menu-nav { gap: 12px; padding-bottom: 28px; }
  .menu-block { padding: 34px 0; }
  .menu-cta__text { font-size: 16px; }
}

/* =============================================================
   ≥ 1280px — desktop
   ============================================================= */
@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .card__link { aspect-ratio: 5 / 4; }
}

/* =============================================================
   ≥ 1600px — telas grandes
   ============================================================= */
@media (min-width: 1600px) {
  .projects { max-width: 1840px; margin: 0 auto; }
  .window--read .window__panel { width: min(880px, 52vw); }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .slide img, .slide.is-active img { transform: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Janela do Menu: 220px, espaços iguais acima e abaixo da navegação, botões à esquerda ---------- */
.window--menu .window__panel { width: min(220px, calc(100% - 24px)); }
.window--menu .window__scroll { padding-top: 16px; }
.window--menu .menu-nav { padding-bottom: 0; border-bottom: 0; }
.window--menu .menu-nav + .menu-block { padding-top: 26px; }
.window--menu .menu-block .btn-glass { justify-content: flex-start; }
.window--menu .menu-block .btn-glass.menu-map { justify-content: center; }
.window--menu .menu-block .menu-line { font-size: 13px; }
@media (min-width: 900px) {
  .window--menu .window__panel { width: 220px; }
  .window--menu .window__scroll { padding-top: 16px; }
  .window--menu .menu-nav { padding-bottom: 0; }
}

/* ---------- Menu no mobile: mais compacto para caber na tela sem rolar ---------- */
@media (max-width: 899.98px) {
  /* sem o texto "MENU" (continua para leitores de tela) */
  .window--menu .window__head .label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .window--menu .window__head { padding: 0; }
  /* X mais acima, no canto; a navegação começa na mesma faixa */
  .window--menu .window__close { position: absolute; top: 18px; right: 16px; z-index: 2; }
  .window--menu .window__scroll { padding-top: 26px; }
  /* menos espaço acima de "Onde estamos" e "Entre em contato" */
  .window--menu .menu-block:has(> .btn-glass:first-child) + .menu-block:not(:has(> .btn-glass:first-child)) { padding-top: 8px; }
  .window--menu .menu-block:not(:has(> .btn-glass:first-child)) { padding-bottom: 18px; }
}

/* ---------- Linha laranja: reta e, no fim, desce em 45° até a borda direita ---------- */
.vline {
  --d: 40px;                       /* tamanho da diagonal */
  --c: rgba(224, 89, 42, .8);      /* laranja da marca */
  position: relative;
  display: block;
  height: 1px;
  pointer-events: none;
}
.vline::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: var(--d);
  height: 1px;
  background: var(--c);
}
.vline::after {
  content: "";
  position: absolute;
  top: 0; left: calc(100% - var(--d));
  width: calc(var(--d) * 1.41421);
  height: 1px;
  background: var(--c);
  transform-origin: 0 0;
  transform: rotate(45deg);
}

/* janelas Serviços e A Visign: abaixo do rótulo, de borda a borda do painel */
.window--read .vline { margin: 14px -24px 0; }
.window--read .vline + .read-title { margin-top: 26px; }
/* mobile: X mais acima e linha um pouco mais abaixo, para o X não ficar sobre a linha */
@media (max-width: 899.98px) {
  .window--read .window__close { top: 16px; }
  .window--read .vline { margin-top: 22px; }
}
@media (min-width: 600px) { .window--read .vline { margin-left: -36px; margin-right: -36px; } }
@media (min-width: 900px) {
  .window--read .vline { --d: 80px; margin: 16px -56px 0; }
  .window--read .vline + .read-title { margin-top: 45px; padding-right: 30px; }
}

/* ---------- Cards de projetos: texto direto sobre a foto, com a linha acima ---------- */
.filters .chip { border-radius: 10px; }
.card__link::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15, 15, 17, 0), rgba(15, 15, 17, .72));
  pointer-events: none;
}
.card__info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 0 22px 18px;
}
.card__info .vline { margin: 0 -22px 18px; }
.card__cat { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* mesma fonte de antes (.label) */
.card__title {
  margin-top: 3px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 900px) {
  .card__info { padding: 0 34px 26px; }
  .card__info .vline { --d: 80px; margin: 0 -34px 30px; }
  .card__cat { font-size: 9.5px; }
  .card__title { font-size: 20px; }
}