/* ==========================================================================
   Insightory.Lab — One-page site
   Mesa de luz branca, tinta preta. O vidro líquido fica reservado à camada
   de controlo e às lentes; tudo o que está em foco é preto sobre branco.
   Uma única fonte de luz: em cima, à esquerda.
   ========================================================================== */

:root{
  color-scheme: light;

  /* Cor */
  --paper: #FFFFFF;
  --table: #FFFFFF;
  --ink: #0A0A0A;
  --ink-2: #2B2B2B;
  --muted: #666666;
  --faint: #8C8C8C;
  --line: rgba(10,10,10,.10);
  --line-2: rgba(10,10,10,.18);
  --night: #0A0A0A;
  --on-night: #F4F4F6;
  --on-night-muted: #A6A6A6;
  --line-night: rgba(255,255,255,.14);

  /* Tipografia: uma só família; o peso e o tamanho separam os papéis */
  --font-display: "General Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "General Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display-weight: 600;
  --fs-hero: clamp(2.125rem, min(5.3vw, 9.4svh), 4.75rem);
  --fs-h2: clamp(2rem, 3.4vw + .5rem, 3.5rem);
  --fs-h3: clamp(1.5rem, 1.4vw + 1rem, 2rem);
  --fs-lede: clamp(1rem, .35vw + .92rem, 1.125rem);

  /* Grelha */
  --wrap: 81rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --col-gap: clamp(1rem, 2vw, 1.5rem);
  --radius-stage: clamp(1.25rem, 2.4vw, 2rem);
  --radius-card: clamp(1.125rem, 1.8vw, 1.5rem);

  /* Movimento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-glass: cubic-bezier(.22, 1, .36, 1);

  /* Vidro */
  --glass-fill: rgba(255,255,255,.58);
  --glass-edge: inset 0 0 0 1px rgba(255,255,255,.7), inset 1.5px 1.5px .5px -.5px #fff, inset -1px -1px .5px -.5px rgba(255,255,255,.6), inset 0 -10px 14px -12px rgba(10,10,10,.14);
  --glass-shadow: 0 0 0 1px rgba(10,10,10,.05), 1px 2px 3px rgba(10,10,10,.06), 3px 10px 20px -8px rgba(10,10,10,.14), 6px 28px 48px -24px rgba(10,10,10,.22);
  --loupe-shadow: 0 0 0 1px rgba(10,10,10,.12), 2px 6px 10px -4px rgba(10,10,10,.16), 6px 16px 28px -12px rgba(10,10,10,.28), inset 0 0 0 1px rgba(255,255,255,.85), inset 2px 3px 5px -3px #fff, inset -3px -5px 9px -5px rgba(10,10,10,.2);
  --chip-shadow: 0 0 0 1px rgba(10,10,10,.05), 0 1px 2px rgba(10,10,10,.08), 0 4px 6px rgba(10,10,10,.04), 2px 24px 40px -16px rgba(10,10,10,.08);
  --btn-shadow: 0 1px 1px rgba(10,10,10,.12), 0 1.5px 3px rgba(10,10,10,.2), 1px 4px 8px rgba(10,10,10,.2), 2px 12px 24px -6px rgba(10,10,10,.3);
}

/* ---------- Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  scrollbar-color: rgba(10,10,10,.5) transparent;
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  caret-color: var(--ink);
  accent-color: var(--ink);
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure{ margin: 0; }
ul, ol{ padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
img, svg{ display: block; max-width: 100%; }
button, input, textarea{ font: inherit; letter-spacing: inherit; color: inherit; }
button{ background: none; border: 0; padding: 0; cursor: pointer; }
table{ border-collapse: collapse; }
::selection{ background: var(--ink); color: var(--paper); }
:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
[hidden]{ display: none !important; }

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sprite{ position: absolute; overflow: hidden; }
.ico{
  width: 1rem; height: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.skip-link{
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 200;
  padding: .75rem 1.125rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform .3s var(--ease-out);
}
.skip-link:focus{ transform: none; }

/* ---------- Layout e tipografia ---------- */
.wrap{
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section{ padding-block: var(--section); }
.h2{
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.lede{
  max-width: 42ch;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.note{
  margin-top: 1.25rem;
  font-size: .8125rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Ilustrações (tinta em foco / fragmentos fora de foco) ---------- */
.t{ fill: var(--ink); }
.serif{ font-family: var(--font-display); font-weight: var(--display-weight); }
.t.m{ fill: var(--muted); }
.t.inv{ fill: #fff; }
.t.dm{ fill: #9D9D9D; }
.t.zl{ font-size: 10.5px; font-weight: 600; }
.num{ font-variant-numeric: tabular-nums; }
.a-card{ fill: #fff; stroke: rgba(10,10,10,.88); stroke-width: 1.25; }
.a-ink{ fill: var(--ink); }
.a-line{ fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.a-hair{ fill: none; stroke: rgba(10,10,10,.14); stroke-width: 1; }
.a-soft{ fill: #ECECEE; }
.a-soft2{ fill: #D4D4D4; }
.a-tile{ fill: #F4F4F6; }
.a-chip{ fill: #fff; stroke: rgba(10,10,10,.28); stroke-width: 1; }
.a-node{ fill: #fff; stroke: var(--ink); stroke-width: 1.25; }
.a-tick{ fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bt{ fill: #8A8A8A; }
.b-card{ fill: #FAFAFC; stroke: #9C9C9C; stroke-width: 1.2; }
.b-line{ fill: none; stroke: #9C9C9C; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.b-fill{ fill: #E0E0E0; }
.b-fill2{ fill: #CECECE; }
.b-dark{ fill: #ABABAB; }
.b-note{ fill: #DEDEDE; }
.b-arrow{ marker-end: url(#mess-arrow); }
.lift{ filter: drop-shadow(2px 18px 22px rgba(10,10,10,.16)) drop-shadow(0 2px 4px rgba(10,10,10,.08)); }

/* ---------- Botões: contas de vidro preto com curso físico ---------- */
.btn{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .625rem 1.25rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: var(--btn-shadow), inset 0 1px 0 rgba(255,255,255,.26), inset 0 -12px 14px -12px rgba(255,255,255,.16);
  transition: transform .3s var(--ease-glass), box-shadow .3s var(--ease-glass), background-color .45s var(--ease-glass), color .45s var(--ease-glass);
}
.btn::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(7rem 3.5rem at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.3), transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--ease-glass);
}
.btn .ico{ transition: transform .3s var(--ease-glass); }
@media (hover: hover){
  .btn:hover{ transform: translateY(-1px); }
  .btn:hover::before{ opacity: 1; }
  .btn:hover .ico{ transform: translate(2px, -2px); }
}
.btn:active{
  transform: scale(.97);
  box-shadow: 0 1px 1px rgba(10,10,10,.2), inset 0 2px 6px rgba(0,0,0,.55);
  transition-duration: .08s;
}
.btn--sm{ padding: .5rem 1.125rem; }
.btn--block{ width: 100%; }
.btn--light{
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 1px 6px 14px -4px rgba(0,0,0,.5), inset 0 -10px 12px -10px rgba(10,10,10,.12);
}
.btn--light::before{ background: radial-gradient(7rem 3.5rem at var(--mx, 30%) var(--my, 0%), rgba(10,10,10,.09), transparent 70%); }
.btn--light:active{ box-shadow: inset 0 2px 6px rgba(10,10,10,.28); }

.tags{ display: flex; flex-wrap: wrap; gap: .5rem; }
/* Etiquetas de conteúdo: só contorno. A elevação fica para o que se carrega */
.tags li{
  padding: .375rem .75rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--ink-2);
}

/* ---------- Nav: cápsula de vidro flutuante ---------- */
.nav{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: clamp(.75rem, 1.5vw, 1.25rem) clamp(.75rem, 2.4vw, 2rem) 0;
  pointer-events: none;
}
.nav__bar{
  position: relative;
  isolation: isolate;
  pointer-events: auto;
  /* três colunas: o logótipo e o botão ocupam o mesmo espaço e os links ficam no centro exato */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  /* a cápsula acompanha a largura do conteúdo: as margens alinham com o texto da página */
  max-width: var(--wrap);
  height: 3.75rem;
  margin-inline: auto;
  padding: 0 .5rem;
  border-radius: 999px;
  color: var(--ink);
  transition: color .45s var(--ease-glass);
}
.nav__glass{
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: var(--glass-shadow), var(--glass-edge);
  transition: background-color .45s var(--ease-glass), box-shadow .45s var(--ease-glass);
}
/* Chromium: o vidro curva de facto o que passa por baixo das margens */
.rf-backdrop .nav__glass{ backdrop-filter: url(#rf-nav) blur(9px) saturate(1.6); }

/* margem própria no logótipo: o preenchimento da barra é simétrico e os links ficam no centro exato */
.nav__logo{ display: flex; align-items: center; justify-self: start; min-height: 2.75rem; margin-left: .875rem; }
.nav__logo img{ width: auto; height: .8125rem; transition: filter .45s var(--ease-glass); }

.nav__links{ position: relative; display: flex; align-items: center; }
.nav__links a{
  position: relative;
  z-index: 1;
  padding: .625rem .875rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  opacity: .66;
  transition: opacity .25s;
}
.nav__links a:hover, .nav__links a[aria-current="true"]{ opacity: 1; }
.nav__thumb{
  position: absolute;
  left: 0; top: 50%;
  width: var(--w, 0px);
  height: 2.25rem;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 0 1px rgba(10,10,10,.04), 1px 2px 4px rgba(10,10,10,.08), 2px 8px 16px -8px rgba(10,10,10,.2), inset 0 1px 0 #fff;
  opacity: 0;
  transform: translate3d(var(--x, 0px), -50%, 0) scale(var(--sx, 1), var(--sy, 1));
  transition: opacity .3s, background-color .45s, box-shadow .45s;
  pointer-events: none;
}
.nav__links.has-thumb .nav__thumb{ opacity: 1; }

.nav__actions{ display: flex; align-items: center; justify-self: end; gap: .5rem; }
.nav__toggle{
  display: none;
  position: relative;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  box-shadow: var(--chip-shadow), inset 0 1px 0 #fff;
  transition: transform .3s var(--ease-glass), background-color .45s;
}
.nav__toggle:active{ transform: scale(.94); }
.nav__toggle span{
  position: absolute;
  left: 50%; top: 50%;
  width: 1.125rem; height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .35s var(--ease-glass);
}
.nav__toggle span:nth-child(1){ transform: translate(-50%, calc(-50% - 3.5px)); }
.nav__toggle span:nth-child(2){ transform: translate(-50%, calc(-50% + 3.5px)); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translate(-50%, -50%) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ transform: translate(-50%, -50%) rotate(-45deg); }

.nav__sheet{
  pointer-events: auto;
  /* a cápsula acompanha a largura do conteúdo: as margens alinham com o texto da página */
  max-width: var(--wrap);
  margin: .5rem auto 0;
  padding: .25rem 1.25rem .875rem;
  border-radius: 1.5rem;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--glass-shadow), var(--glass-edge);
  color: var(--ink);
  transform-origin: 50% 0;
  animation: sheet-in .45s var(--ease-out);
}
@keyframes sheet-in{
  from{ opacity: 0; transform: translateY(-.5rem) scale(.98); }
}
.nav__sheet nav a{
  display: block;
  padding: .6875rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.nav__sheet-mail{
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: .375rem;
  font-size: .875rem;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

/* Tom adaptativo: sobre superfícies pretas o vidro escurece e a tinta inverte */
.nav--dark .nav__bar{ color: #fff; }
.nav--dark .nav__glass{
  background: rgba(34,34,34,.5);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 3px 10px 20px -8px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.14), inset 1.5px 1.5px .5px -.5px rgba(255,255,255,.5), inset -1px -1px .5px -.5px rgba(255,255,255,.22);
}
.nav--dark .nav__logo img{ filter: invert(1); }
.nav--dark .nav__thumb{
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.3);
}
.nav--dark .btn{
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 1px 6px 14px -4px rgba(0,0,0,.5);
}
.nav--dark .nav__toggle{
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.nav--dark :focus-visible{ outline-color: #fff; }

/* ---------- Hero: a mesa de luz ---------- */
.hero{ padding: .5rem; }
.hero__stage{
  --field-h: clamp(14.5rem, 37svh, 21.5rem);
  --d: clamp(13rem, 22vw, 20rem);
  /* A lente pode sair um pouco da faixa. Este é o espaço extra, em cima e em baixo,
     que a mantém sempre afastada do título e da legenda. */
  --lens-over: calc(var(--d) * .05 + max(0px, (var(--d) - var(--field-h)) / 2));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100svh - 1rem);
  padding: clamp(6.25rem, 11svh, 8.25rem) var(--gutter) clamp(1.25rem, 3.2svh, 2rem);
  border-radius: var(--radius-stage);
  background: var(--table);
  box-shadow: inset 0 0 0 1px rgba(10,10,10,.07);
  overflow: clip;
}
.hero__title{
  /* margens automáticas em cima do título e em baixo da legenda: o conjunto
     (título, lente, legenda) centra-se no espaço livre entre o header e o rodapé */
  margin-top: auto;
  max-width: min(15em, 100%);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-hero);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-align: center;
  text-wrap: balance;
}

/* Faixa: fragmentos fora de foco; a lente mostra a mesma área já organizada */
.field{
  /* A faixa nunca fica mais estreita do que isto: cada área tem de caber na lente */
  --strip-w: max(100cqw, 66rem);
  position: relative;
  container-type: inline-size;
  flex: none;
  /* a faixa sangra até às margens da mesa; o texto fica dentro da goteira */
  width: min(100% + 2 * var(--gutter), 84rem);
  height: var(--field-h);
  margin: calc(clamp(.75rem, 2.6svh, 1.75rem) + var(--lens-over)) calc(var(--gutter) * -1) 0;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.field__strip{
  position: absolute;
  top: 0; left: 0;
  width: var(--strip-w);
  height: 100%;
  will-change: transform;
}
.field__layer{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.zone{ width: 100%; height: 100%; overflow: visible; }
/* O estado organizado é mais compacto do que o desarrumado: cabe inteiro na lente */
.field__layer--after .zone{ scale: .84; }
.field__layer--before{ filter: blur(1.4px); opacity: .92; }

.lens{
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  cursor: grab;
  touch-action: pan-y;
  /* Sem JavaScript, a lente pousa sobre o painel */
  transform: translate3d(calc(var(--strip-w) * var(--lx, .625) - var(--d) / 2), calc(var(--field-h) / 2 - var(--d) / 2), 0);
  will-change: transform;
}
@container (max-width: 74rem){
  .lens{ --lx: .125; }
}
.lens:active{ cursor: grabbing; }
.lens:focus-visible{ outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 50%; }
.lens__shadow, .lens__body, .lens__glass{
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.lens__shadow{
  box-shadow: 0 0 0 1px rgba(10,10,10,.16), 3px 8px 14px -4px rgba(10,10,10,.18), 12px 28px 48px -16px rgba(10,10,10,.34), 26px 54px 90px -38px rgba(10,10,10,.34);
}
/* Cáustica: a luz que a lente concentra dentro da própria sombra */
.lens__caustic{
  position: absolute;
  left: 52%; top: 58%;
  width: 62%; height: 62%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0));
  filter: blur(5px);
  pointer-events: none;
}
.lens__body{ overflow: hidden; background: #fff; }
/* A refração aplica-se a uma camada interior; o corpo recorta-a depois em círculo */
.lens__optics{ position: absolute; inset: 0; }
.rf-element .lens__optics{ filter: url(#rf-lens); }
.rf-element .lens--foot .lens__optics{ filter: url(#rf-lens-foot); }
.lens__view{
  position: absolute;
  left: 0; top: 0;
  width: var(--strip-w);
  height: var(--field-h);
  transform-origin: 0 0;
  transform: translate3d(calc(var(--d) / 2 - var(--strip-w) * var(--lx, .625)), calc(var(--d) / 2 - var(--field-h) / 2), 0);
  will-change: transform;
}
.lens__glass{
  pointer-events: none;
  /* brilho em cima à esquerda, reflexo interno em baixo à direita, espessura na margem */
  background:
    radial-gradient(58% 44% at 27% 15%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%),
    radial-gradient(46% 36% at 80% 90%, rgba(255,255,255,.55), rgba(255,255,255,0) 64%),
    radial-gradient(closest-side, rgba(10,10,10,0) 85%, rgba(10,10,10,.05) 93%, rgba(10,10,10,.17) 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 99%);
  mask: radial-gradient(closest-side, transparent 70%, #000 99%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.95), inset 0 0 0 2.5px rgba(10,10,10,.08), inset -9px -13px 24px -10px rgba(10,10,10,.26), inset 7px 9px 18px -8px rgba(255,255,255,.95);
}

.field__hint{
  margin-block: calc(var(--lens-over) + 1.25rem) auto;
  font-size: .8125rem;
  color: var(--muted);
  text-align: center;
}
.field__zone{
  display: block;
  margin-bottom: .125rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
}
.hint-touch{ display: none; }
@media (hover: none){
  .hint-hover{ display: none; }
  .hint-touch{ display: inline; }
}

/* Rodapé do hero: relógio à esquerda, email à direita */
.hero__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--wrap);
  padding-top: clamp(1rem, 2.6svh, 1.75rem);
  /* o email nunca fica por baixo do botão de chat, em nenhuma largura */
  padding-right: max(0px, calc(6rem - .5rem - var(--gutter)));
}
.hero__clock{
  font-size: .8125rem;
  line-height: 2.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hero__clock time{ margin-left: .375rem; font-weight: 500; color: var(--ink); }
.hero__mail{
  position: relative;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  margin-right: -.875rem;
  padding: .5rem .875rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 500;
  transition: background-color .25s;
}
.hero__mail:hover{ background: rgba(10,10,10,.05); }
.hero__mail:active{ background: rgba(10,10,10,.09); }
.hero__mail .ico{ color: var(--muted); }
.hero__mail-done{
  position: absolute;
  right: .5rem;
  bottom: calc(100% + .375rem);
  padding: .375rem .75rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .75rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.25rem);
  transition: opacity .25s, transform .25s var(--ease-out);
  pointer-events: none;
}
.hero__mail-done:empty{ display: none; }
.hero__mail.is-copied .hero__mail-done{ opacity: 1; transform: none; }

/* ---------- Antes / depois: a secretária ---------- */
.shift__head{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.shift__head .h2{ grid-column: 1 / span 7; }
.shift__head .lede{ grid-column: 9 / -1; }

.desk{
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9.4;
  max-width: 70rem;
  margin-inline: auto;
  border-radius: var(--radius-stage);
  background: var(--night);
  box-shadow: 3px 30px 60px -30px rgba(10,10,10,.45);
  overflow: hidden;
}
.desk__scene{
  position: absolute;
  inset: 0;
  transition: opacity .7s var(--ease-out), filter .7s var(--ease-out), transform .7s var(--ease-out), visibility 0s;
}
.desk[data-state="after"] .desk__scene--before,
.desk[data-state="before"] .desk__scene--after{
  opacity: 0;
  filter: blur(14px);
  transform: scale(.965);
  visibility: hidden;
  transition-delay: 0s, 0s, 0s, .7s;
  pointer-events: none;
}

/* Controlo segmentado em vidro escuro */
.seg{
  position: absolute;
  left: 50%;
  top: clamp(.75rem, 2.2cqw, 1.5rem);
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: .25rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.18), 2px 8px 20px -8px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  transform: translateX(-50%);
}
.seg__thumb{
  position: absolute;
  top: .25rem; bottom: .25rem; left: .25rem;
  width: calc(50% - .25rem);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 2px 6px 12px -4px rgba(0,0,0,.5), inset 0 -8px 10px -8px rgba(10,10,10,.14);
  transition: transform .55s var(--ease-glass), scale .2s var(--ease-glass);
}
.desk[data-state="after"] .seg__thumb{ transform: translateX(100%); }
.seg:active .seg__thumb{ scale: .95; }
.seg__opt{
  position: relative;
  z-index: 1;
  min-width: 5.5rem;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255,255,255,.74);
  transition: color .3s;
}
.seg__opt[aria-pressed="true"]{ color: var(--ink); }
.seg__opt:focus-visible{ outline-color: #fff; }

.win{
  position: absolute;
  border-radius: 1.1cqw;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), .4cqw 2.4cqw 4cqw -1.2cqw rgba(0,0,0,.7);
  color: var(--ink);
  font-size: clamp(7px, 1.12cqw, 13px);
  line-height: 1.35;
  letter-spacing: 0;
  overflow: hidden;
}
.win__bar{
  display: flex;
  align-items: center;
  gap: .45em;
  padding: .7em .9em;
  border-bottom: 1px solid var(--line);
  background: #F4F4F6;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.win__bar i{ flex: none; width: .6em; height: .6em; border-radius: 50%; background: #D0D0D0; }
.win__bar span{ margin-left: .5em; overflow: hidden; text-overflow: ellipsis; }
.sheet{ width: 100%; font-variant-numeric: tabular-nums; }
.sheet th, .sheet td{
  padding: .5em .7em;
  border: 1px solid rgba(10,10,10,.12);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}
.sheet th{ background: #F4F4F6; font-weight: 600; }
.sheet .err{ background: #E2E2E2; font-weight: 600; }
.sheet .hl{ background: #EDEDEF; }
.win--s1{ left: 6%; top: 19%; width: 46%; transform: rotate(-4deg); }
.win--s2{ left: 46%; top: 44%; width: 45%; transform: rotate(3.5deg); }
.win--mail{ left: 51%; top: 17%; width: 38%; transform: rotate(-2deg); }
.win--mail p{ padding: .6em .9em 0; color: var(--ink-2); }
.win--mail p:last-child{ padding-bottom: .9em; color: var(--muted); }
.memo{
  position: absolute;
  left: 10%; top: 68%;
  width: 19%;
  padding: 1em 1.1em 1.6em;
  background: #E8E8E8;
  box-shadow: .3cqw 1.4cqw 2.4cqw -.8cqw rgba(0,0,0,.6);
  color: var(--ink);
  font-size: clamp(7px, 1.12cqw, 13px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  transform: rotate(-7deg);
}

.win--panel{
  left: 11%; top: 17%;
  width: 78%; height: 75%;
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr);
}
.panel__side{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9em;
  padding: 1.1em 0;
  border-right: 1px solid var(--line);
  background: #F4F4F6;
}
.panel__side b, .panel__side i{ width: 2.2em; height: 2.2em; border-radius: .6em; }
.panel__side b{ margin-bottom: .6em; background: var(--ink); }
.panel__side i{ background: rgba(10,10,10,.06); }
.panel__side i.is-on{ background: rgba(10,10,10,.17); }
.panel__main{
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  min-width: 0; min-height: 0;
  padding: 1.3em 1.6em 1.4em;
}
.panel__top{ display: flex; align-items: center; justify-content: space-between; }
.panel__top strong{ font-size: 1.25em; font-weight: 600; letter-spacing: -.02em; }
.panel__top span{ padding: .25em .8em; border-radius: 999px; background: #F0F0F2; color: var(--ink-2); }
.panel__stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.panel__stats div{ display: grid; gap: .1em; padding: .8em 1em; border-radius: .8em; background: #F4F4F6; }
.panel__stats b{ font-size: 2em; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.panel__stats span{ color: var(--muted); }
.panel__cols{
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1.2em;
  min-height: 0;
}
.panel__table{ width: 100%; align-self: start; }
.panel__table th{
  padding: .5em 0;
  border-bottom: 1px solid var(--line-2);
  font-weight: 500;
  color: var(--muted);
  text-align: left;
}
.panel__table td{ padding: .62em 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.panel__table th:last-child, .panel__table td:last-child{ text-align: right; }
/* Estado: um ponto cheio (concluído) ou vazio (em curso), sem etiquetas em cápsula */
.panel__table em{ display: inline-flex; align-items: center; gap: .5em; font-style: normal; }
.panel__table em::before{
  content: "";
  width: .55em; height: .55em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(10,10,10,.55);
}
.panel__table em.is-done::before{ background: var(--ink); box-shadow: none; }
.panel__chart{
  display: flex;
  flex-direction: column;
  gap: .6em;
  min-height: 0;
  padding: .9em 1em;
  border-radius: .8em;
  background: #F4F4F6;
}
.panel__chart > span{ color: var(--muted); }
.bars{
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: .7em;
  min-height: 3em;
}
/* Um único dia em foco; os restantes ficam em cinzento */
.bars i{ height: calc(var(--v) * 100%); border-radius: .3em .3em 0 0; background: #CFCFCF; }
.bars i:nth-child(6){ background: var(--ink); }
.bars__axis{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .7em;
  color: var(--muted);
  text-align: center;
}
.bars__axis b{ font-weight: 400; }

/* ---------- Portefólio: pranchas ---------- */
.work__head{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.work__head .h2{ grid-column: 1 / span 6; }
.work__aside{ grid-column: 8 / -1; display: grid; gap: 1.5rem; justify-items: start; }

.plates{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(3.5rem, 8vw, 7rem);
  align-items: start;
}
.plate{ transform: translate3d(0, var(--dy, 0px), 0); }
.plate--a{ grid-area: 1 / 8 / 2 / 13; }
.plate--b{ grid-area: 1 / 1 / 2 / 7; margin-top: clamp(5rem, 13vw, 12rem); }
.plate--c{ grid-area: 2 / 2 / 3 / 6; }
.plate--d{ grid-area: 2 / 7 / 3 / 13; margin-top: clamp(3rem, 8vw, 7rem); }
.plate__frame{
  position: relative;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(10,10,10,.07), 2px 6px 10px rgba(10,10,10,.05), 4px 30px 50px -20px rgba(10,10,10,.22);
  overflow: hidden;
}
.plate__art{ width: 100%; height: auto; transition: transform .9s var(--ease-out); }
@media (hover: hover){
  .plate:hover .plate__art{ transform: scale(1.025); }
}
/* A marca "ilustrativo" vive na legenda, nunca por cima da arte */
.plate__note{ margin-top: 1rem; font-size: .8125rem; color: var(--muted); }
.plate__title{
  margin-top: .25rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h3);
  line-height: 1.12;
  letter-spacing: -.03em;
}
.plate__desc{ max-width: 40ch; margin-top: .625rem; color: var(--muted); text-wrap: pretty; }
.plate .tags{ margin-top: 1.125rem; }

/* ---------- Clientes: faixa de logótipos em ciclo contínuo ---------- */
.clients{
  padding-block: clamp(3rem, 6vw, 5rem);
  border-block: 1px solid var(--line);
}
.clients__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.clients__title{
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.clients__pause{
  min-height: 2.75rem;
  padding-inline: .25rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .3s var(--ease-glass);
}
@media (hover: hover){ .clients__pause:hover{ color: var(--ink); } }

.clients__marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* sem JavaScript, ou com movimento reduzido, a lista fica parada e quebra em linhas */
.clients__track{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 1.5rem;
}
.clients__item{
  flex: none;
  display: flex;
  align-items: center;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}
.clients__item img{
  width: auto;
  height: 2.75rem;
  max-width: var(--logo-max, 11rem);
  object-fit: contain;
  opacity: .55;
  transition: opacity .35s var(--ease-glass);
}
@media (hover: hover){ .clients__item:hover img{ opacity: 1; } }

@media (prefers-reduced-motion: no-preference){
  .js .clients__track{
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    row-gap: 0;
    animation: clients-run var(--clients-dur, 40s) linear infinite;
  }
  .js .clients.is-paused .clients__track{ animation-play-state: paused; }
  @media (hover: hover){
    .js .clients__marquee:hover .clients__track{ animation-play-state: paused; }
  }
}
@keyframes clients-run{
  to{ transform: translate3d(calc(var(--clients-shift, 50%) * -1), 0, 0); }
}
@media (prefers-reduced-motion: reduce){
  .clients__track > [aria-hidden="true"]{ display: none; }
  .clients__pause{ display: none; }
  .clients__marquee{ -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Serviços ---------- */
.services{ padding-block: var(--section); }
.services__intro{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 1.5rem;
  align-items: end;
}
.services__intro .h2{ grid-column: 1 / span 7; }
.services__intro .lede{ grid-column: 9 / -1; }
.services__track{ margin-top: clamp(2.5rem, 5vw, 4rem); }
.services__sticky{
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.dial, .services__art{ display: none; }

/* Lista (telemóvel, tablet e sem JavaScript) */
.service{
  display: grid;
  grid-template-columns: clamp(2.75rem, 8vw, 6rem) minmax(0, 1fr);
  gap: 1rem;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line-2);
}
.service:last-child{ border-bottom: 1px solid var(--line-2); }
.service__n{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.service__title{
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.75rem, 3vw + .75rem, 3.25rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.service__desc{
  max-width: 40ch;
  margin-top: .875rem;
  font-size: var(--fs-lede);
  color: var(--muted);
  text-wrap: pretty;
}
.service .tags{ margin-top: 1.25rem; }

/* Mostrador fixo (ecrãs largos): o número em foco passa sob a lupa */
.services.is-pinned{ padding-bottom: 0; }
.services.is-pinned .services__track{ height: calc(var(--n) * 72vh + 28vh); }
.services.is-pinned .services__sticky{
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(13rem, 22vw) minmax(0, 1fr) minmax(0, clamp(19rem, 33vw, 31rem));
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  height: 100vh;
  max-width: none;
  padding: 0 var(--gutter) 0 0;
  overflow: clip;
}
.services.is-pinned .dial{
  --dd: min(150vh, 110rem);
  --step: 19deg;
  display: block;
  position: relative;
  height: 100%;
}
.dial__ring{
  position: absolute;
  left: calc(100% - 4.5rem - var(--dd));
  top: calc(50% - var(--dd) / 2);
  width: var(--dd); height: var(--dd);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transform: rotate(calc(var(--p, 0) * var(--step) * -1));
  will-change: transform;
}
.dial__n{
  position: absolute;
  left: 50%; top: 50%;
  margin-top: -.75em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  transform-origin: 0 50%;
  transform: rotate(calc(var(--i) * var(--step))) translateX(calc(var(--dd) / 2 + 1.125rem));
  transition: color .4s;
}
.dial__n.is-active{ color: var(--ink); }
.dial__loupe{
  position: absolute;
  left: calc(100% - 2.2rem);
  top: 50%;
  width: 4.75rem; height: 4.75rem;
  margin: -2.375rem 0 0 -2.375rem;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  box-shadow: var(--loupe-shadow);
}
.rf-backdrop .dial__loupe{ backdrop-filter: url(#rf-loupe); }

.services.is-pinned .services__list{ display: grid; align-items: center; }
.services.is-pinned .service{
  grid-area: 1 / 1;
  display: block;
  padding: 0;
  border: 0;
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 1.75rem, 0);
  transition: opacity .55s var(--ease-out), filter .55s var(--ease-out), transform .55s var(--ease-out);
  pointer-events: none;
}
.services.is-pinned .service.is-past{ transform: translate3d(0, -1.75rem, 0); }
.services.is-pinned .service.is-active{ opacity: 1; filter: none; transform: none; pointer-events: auto; }
.services.is-pinned .service__n{ display: none; }
.services.is-pinned .service__title{ font-size: clamp(2.5rem, 4.2vw, 4rem); }
.services.is-pinned .services__art{ display: grid; }
.services__art svg{
  grid-area: 1 / 1;
  width: 100%; height: auto;
  opacity: 0;
  filter: blur(10px);
  transform: scale(.96);
  transition: opacity .55s var(--ease-out), filter .55s var(--ease-out), transform .7s var(--ease-out);
}
.services__art svg.is-active{ opacity: 1; filter: none; transform: none; }

/* ---------- Processo ---------- */
.steps{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 3vw, 3rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 4.5rem;
}
.steps::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 1.375rem;
  height: 1px;
  background: var(--line-2);
}
.step{ position: relative; }
.step__n{
  position: absolute;
  top: -4.5rem; left: 0;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: .875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background-color .4s, color .4s, box-shadow .4s;
}
.step__title{
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  /* em quatro colunas o título ajusta-se à coluna; "Desenvolvimento" tem de caber */
  font-size: clamp(1.25rem, 2.05vw, 1.875rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  transition: color .4s;
}
.step p{ max-width: 32ch; margin-top: .75rem; color: var(--muted); text-wrap: pretty; }
/* Um passo em foco de cada vez */
.steps.is-live .step:not(.is-focus) .step__title{ color: var(--muted); }
.step.is-focus .step__n, .step.is-done .step__n{ background: var(--ink); color: #fff; box-shadow: none; }
.steps__bead{ display: none; }
.steps.is-live .steps__bead{
  display: block;
  position: absolute;
  left: 0; top: 0;
  width: 3.75rem; height: 3.75rem;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  box-shadow: var(--loupe-shadow);
  pointer-events: none;
  will-change: transform;
}
.rf-backdrop .steps.is-live .steps__bead{ backdrop-filter: url(#rf-bead); }

/* ---------- Preços ---------- */
.models__grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 2.5rem;
  align-items: start;
}
.models__intro{ grid-column: 1 / span 4; display: grid; gap: 1.5rem; position: sticky; top: 7rem; }
.model{
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--chip-shadow);
}
.model--night{
  background: var(--night);
  color: var(--on-night);
  box-shadow: 3px 30px 50px -26px rgba(10,10,10,.5);
}
.model__name{
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.625rem;
  line-height: 1.15;
  letter-spacing: -.03em;
}
.model__desc{ min-height: 4.5em; margin-top: .625rem; font-size: .9375rem; color: var(--muted); text-wrap: pretty; }
.model--night .model__desc{ color: var(--on-night-muted); }
.checks{
  display: grid;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
}
.checks li{ display: flex; align-items: flex-start; gap: .625rem; }
.checks .ico{ margin-top: .25rem; }
.model__price{
  margin-top: auto;
  padding-top: 2rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -.03em;
}
.model--night .checks{ border-color: var(--line-night); }
.model .btn{ margin-top: 1.25rem; }
.model--night :focus-visible{ outline-color: #fff; }

/* ---------- FAQ ---------- */
.faq__grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 2.5rem;
  align-items: start;
}
.faq__grid .h2{ grid-column: 1 / span 5; position: sticky; top: 7rem; }
.faq__list{ grid-column: 7 / -1; border-top: 1px solid var(--line-2); }
.qa{ border-bottom: 1px solid var(--line); }
.qa summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.125rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.015em;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker{ display: none; }
.qa__btn{
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--chip-shadow), inset 0 -6px 8px -6px rgba(10,10,10,.08);
  transition: transform .45s var(--ease-glass), background-color .3s, color .3s;
}
.qa summary:active .qa__btn{ transform: scale(.92); }
.qa[open] .qa__btn{ transform: rotate(180deg); background: var(--ink); color: #fff; }
.qa p{ max-width: 60ch; padding: 0 4rem 1.5rem 0; color: var(--muted); text-wrap: pretty; }
@supports (interpolate-size: allow-keywords){
  .qa{ interpolate-size: allow-keywords; }
  .qa::details-content{
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size .5s var(--ease-out), opacity .4s var(--ease-out), content-visibility .5s allow-discrete;
  }
  .qa[open]::details-content{ block-size: auto; opacity: 1; }
}

/* ---------- Contacto ---------- */
.contact{ padding-bottom: clamp(3rem, 6vw, 5rem); }
.contact__panel{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  row-gap: 2.5rem;
  padding: clamp(1.75rem, 5vw, 4.5rem);
  border-radius: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--night);
  color: var(--on-night);
  caret-color: #fff;
}
.contact__panel ::selection{ background: #fff; color: var(--ink); }
.contact__panel :focus-visible{ outline-color: #fff; }
.contact__title{
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(2.25rem, 4vw + .5rem, 4rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.contact__sub{ max-width: 36ch; margin-top: 1.25rem; font-size: var(--fs-lede); color: var(--on-night-muted); text-wrap: pretty; }
.contact__mail{
  display: inline-block;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.4vw + 1rem, 2rem);
  letter-spacing: -.03em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: rgba(255,255,255,.35);
  transition: text-decoration-color .3s;
}
.contact__mail:hover{ text-decoration-color: #fff; }
.contact__meta{ display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-top: 1.75rem; font-size: .9375rem; }
.contact__meta dt{ font-size: .8125rem; color: var(--on-night-muted); }
.contact__meta dd{ margin-top: .125rem; font-variant-numeric: tabular-nums; }

.form{ display: grid; gap: 1.125rem; align-content: start; }
.form__row{ display: grid; gap: .5rem; }
/* armadilha para robôs: fora do ecrã, nunca visível nem focável por pessoas */
.form__trap{ position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__row label{ font-size: .875rem; font-weight: 500; }
.form__row input, .form__row textarea{
  width: 100%;
  padding: .875rem 1rem;
  border: 0;
  border-radius: 1rem;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.1);
  color: #fff;
  transition: box-shadow .25s, background-color .25s;
}
.form__row textarea{ min-height: 7.5rem; resize: vertical; }
.form__row ::placeholder{ color: rgba(255,255,255,.54); opacity: 1; }
.form__row input:hover, .form__row textarea:hover{ background: rgba(255,255,255,.1); }
.form__row input:focus-visible, .form__row textarea:focus-visible{
  outline: 0;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1.5px #fff;
}
.form__row [aria-invalid="true"]{ box-shadow: inset 0 0 0 1.5px #fff; }
.form__error{ display: flex; align-items: center; gap: .5rem; font-size: .8125rem; }
.form__foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: .5rem; }
.form__status{ max-width: 32ch; font-size: .8125rem; color: var(--on-night-muted); }
.contact__social{
  grid-column: 1 / -1;
  display: flex;
  gap: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-night);
  font-size: .875rem;
}
.contact__social a{
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--on-night-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .25em;
  transition: color .25s, text-decoration-color .25s;
}
.contact__social a:hover{ color: #fff; text-decoration-color: currentColor; }

/* ---------- Footer ---------- */
/* a margem inferior deixa livre o canto onde está o botão de chat;
   overflow-x: clip impede que o brilho da lente alargue a página em janelas estreitas */
.footer{ padding: clamp(3rem, 8vw, 7rem) 0 5.5rem; overflow-x: clip; }
.footer__mark{ --d: clamp(9rem, 15vw, 13rem); position: relative; }
/* O nome fica em cinzento médio (3,3:1 sobre branco); a lente mostra-o a preto.
   Sem rato não há lente, por isso nesses ecrãs o nome já fica a preto. */
.footer__word{ width: 100%; height: auto; filter: invert(.56); }
@media (hover: none), (pointer: coarse){
  .footer__word{ filter: none; }
}
.lens--foot{ display: none; cursor: default; }
.footer__mark.is-live .lens--foot{ display: block; }
.lens--foot .lens__view img{ width: 100%; height: 100%; max-width: none; }
.footer__row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line-2);
  font-size: .875rem;
  color: var(--muted);
}
.footer__links{ display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.footer__links a{
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .25em;
  transition: color .25s, text-decoration-color .25s;
}
.footer__links a:hover{ color: var(--ink); text-decoration-color: currentColor; }
.footer__tag{ margin-top: .25rem; font-size: .8125rem; color: var(--muted); }

/* ---------- Chat: botão de vidro no canto e painel ----------
   O botão refrata o que passa por baixo (Chromium) e escurece sobre os painéis pretos.
   O painel traz um contacto por email até haver um agente ligado a #chatMount. */
.chat{
  --chat-size: 3.5rem;
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  justify-items: end;
  gap: .75rem;
  pointer-events: none;
}
.chat > *{ pointer-events: auto; }
@media (min-width: 48rem){
  .chat{ right: max(1.5rem, env(safe-area-inset-right)); bottom: max(1.5rem, env(safe-area-inset-bottom)); }
}
.chat__launcher{
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: var(--chat-size);
  height: var(--chat-size);
  border-radius: 50%;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--ease-glass), color .45s var(--ease-glass);
}
.chat__glass{
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  /* vidro fosco o bastante para o ícone se ler sobre conteúdo escuro */
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.7);
  backdrop-filter: blur(14px) saturate(1.7);
  box-shadow: var(--glass-shadow), var(--glass-edge);
  transition: background-color .45s var(--ease-glass), box-shadow .45s var(--ease-glass);
}
.rf-backdrop .chat__glass{ backdrop-filter: url(#rf-chat) blur(3px) saturate(1.5); }
/* brilho que acompanha o ponteiro, como nos botões */
.chat__launcher::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(2.25rem 2.25rem at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.8), transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--ease-glass);
}
@media (hover: hover){
  .chat__launcher:hover{ transform: translateY(-2px); }
  .chat__launcher:hover::before{ opacity: 1; }
}
.chat__launcher:active{ transform: scale(.94); transition-duration: .08s; }
.chat__launcher:focus-visible{ border-radius: 50%; outline-offset: 4px; }
.chat__icon{
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  transition: opacity .3s var(--ease-glass), transform .45s var(--ease-glass);
}
.chat__icon--close{ opacity: 0; transform: rotate(-60deg) scale(.6); }
.chat__launcher[aria-expanded="true"] .chat__icon--open{ opacity: 0; transform: rotate(60deg) scale(.6); }
.chat__launcher[aria-expanded="true"] .chat__icon--close{ opacity: 1; transform: none; }

.chat--dark .chat__launcher{ color: #fff; }
.chat--dark .chat__glass{
  background: rgba(34,34,34,.5);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 3px 12px 24px -8px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.14), inset 1.5px 1.5px .5px -.5px rgba(255,255,255,.5), inset -1px -1px .5px -.5px rgba(255,255,255,.22);
}
.chat--dark .chat__launcher::before{ background: radial-gradient(2.25rem 2.25rem at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.22), transparent 70%); }
.chat--dark .chat__launcher:focus-visible{ outline-color: #fff; }

.chat__panel{
  position: relative;
  isolation: isolate;
  width: min(22rem, calc(100vw - 2rem));
  max-height: min(32rem, 70svh);
  overflow: auto;
  padding: 1.25rem;
  border-radius: 1.5rem;
  color: var(--ink);
  transform-origin: 100% 100%;
  animation: chat-pop .4s var(--ease-out);
}
.chat__panel:focus-visible{ outline-offset: 2px; border-radius: 1.5rem; }
.chat__panel-glass{
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--glass-shadow), var(--glass-edge);
}
@keyframes chat-pop{
  from{ opacity: 0; transform: translateY(.5rem) scale(.96); }
}
.chat__title{
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.375rem;
  line-height: 1.15;
  letter-spacing: -.03em;
}
.chat__mount:empty{ display: none; }
.chat__mount{ margin-top: .75rem; }
.chat__fallback p{ margin-top: .5rem; font-size: .9375rem; color: var(--muted); text-wrap: pretty; }
.chat__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1rem; }
.chat__link{
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
/* com um agente ligado (InsightoryChat.ready()), o contacto por email deixa de aparecer */
.chat__panel[data-agent="ready"] .chat__fallback{ display: none; }

/* ---------- Chat: conversa com o assistente ---------- */
.chat__panel[data-agent="ready"]{
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100vw - 2rem));
  height: min(36rem, 74svh);
  overflow: hidden;
}
.chat__panel[data-agent="ready"] .chat__mount{ flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cb{ flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .75rem; }
.cb__log{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: .25rem;
}
.cb__msg{
  max-width: 88%;
  padding: .625rem .875rem;
  border-radius: 1.125rem;
  font-size: .9375rem;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.cb__msg--assistant{ align-self: flex-start; background: rgba(10,10,10,.05); border-bottom-left-radius: .375rem; }
.cb__msg--user{ align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: .375rem; }
.cb__typing{ display: flex; align-items: center; gap: .25rem; min-height: 2.5rem; }
.cb__typing i{
  width: .375rem; height: .375rem;
  border-radius: 50%;
  background: var(--faint);
  animation: cb-dot 1.2s ease-in-out infinite;
}
.cb__typing i:nth-of-type(2){ animation-delay: .15s; }
.cb__typing i:nth-of-type(3){ animation-delay: .3s; }
@keyframes cb-dot{ 0%, 60%, 100%{ opacity: .3; } 30%{ opacity: 1; } }
.cb__ideas{ display: flex; flex-wrap: wrap; gap: .375rem; }
.cb__idea{
  min-height: 2.5rem;
  padding: .5rem .875rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background-color .3s var(--ease-glass);
}
@media (hover: hover){ .cb__idea:hover{ background: rgba(10,10,10,.05); } }
.cb__cta{ display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.cb__form{ display: flex; align-items: center; gap: .5rem; }
.cb__input{
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 2px rgba(10,10,10,.06);
  font-size: 1rem;
}
.cb__input::placeholder{ color: var(--faint); }
.cb__send{
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--btn-shadow);
  transition: transform .3s var(--ease-glass), opacity .3s;
}
.cb__send:active{ transform: scale(.94); }
.cb__send:disabled, .cb__input:disabled{ opacity: .5; cursor: default; }
.cb__note{ font-size: .75rem; line-height: 1.4; color: var(--muted); text-wrap: pretty; }

/* ---------- Movimento: uma só entrada orquestrada, o título do hero ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .hero__title{ animation: focus-in 1.2s var(--ease-out) both; }
}
@keyframes focus-in{
  from{ opacity: 0; filter: blur(16px); transform: translate3d(0, .5rem, 0); }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (min-width: 48rem){
  .hero__title span{ display: block; }
}

@media (max-width: 64rem){
  .shift__head .h2, .shift__head .lede,
  .work__head .h2, .work__aside,
  .services__intro .h2, .services__intro .lede,
  .faq__grid .h2, .faq__list{ grid-column: 1 / -1; }
  .faq__grid .h2{ position: static; }
  .models__intro{ grid-column: 1 / -1; position: static; }
  .model{ grid-column: span 6; }

  /* Processo: lista vertical até haver largura para quatro colunas */
  .steps{ grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; padding-top: 0; padding-left: 4.25rem; }
  .steps::before{ left: 1.375rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .step__n{ top: -.25rem; left: -4.25rem; }
  .step__title{ font-size: var(--fs-h3); }
  .step p{ max-width: 44ch; }
}

@media (max-width: 56rem){
  .nav__links{ display: none; }
  .nav__toggle{ display: block; }
  /* sem links no meio, a barra volta a duas pontas */
  .nav__bar{ display: flex; justify-content: space-between; height: 3.5rem; padding: 0 .375rem; }
  .nav__logo{ margin-left: .75rem; }
  .nav__logo img{ height: .6875rem; }

  .hero__mail{ margin-right: -.875rem; }

  .field{ --strip-w: max(100cqw, 60rem); }
  .desk{ aspect-ratio: 4 / 4.8; }
  .win, .memo{ font-size: clamp(8px, 2.35cqw, 13px); }
  .win{ border-radius: 2.4cqw; }
  .win--s1{ left: 4%; top: 19%; width: 84%; }
  .win--s2{ left: 12%; top: 50%; width: 84%; }
  .win--mail{ left: 22%; top: 37%; width: 72%; }
  .memo{ left: 6%; top: 76%; width: 40%; }
  /* o painel começa sempre abaixo do controlo Antes/Depois, em qualquer largura */
  .win--panel{ left: 5%; top: 5.25rem; bottom: 4%; width: 90%; height: auto; grid-template-columns: minmax(0, 1fr); }
  .panel__side{ display: none; }
  .panel__main{ gap: .9em; padding: 1.1em 1.2em 1.2em; }
  .panel__cols{ grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: .9em; }
  .panel__table td{ padding-block: .5em; }

  .plates{ grid-template-columns: minmax(0, 1fr); }
  .plate--a, .plate--b, .plate--c, .plate--d{ grid-area: auto; margin-top: 0; }

  .model{ grid-column: 1 / -1; }
  .model__desc{ min-height: 0; }
  .model__price{ margin-top: 0; }

  .qa p{ padding-right: 0; }
  .contact__panel{ grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 30rem){
  .btn--sm{ padding-inline: .875rem; }
  /* em telemóveis pequenos só cabe o email ao lado do botão de chat */
  .hero__clock{ display: none; }
  .footer__links{ gap: 0 1.25rem; }
}