/* ==========================================================================
   AXIS — landing
   Fonte de verdade visual: Figma 1BRxrOaVYnn0iu0YeBB4fK, node 1026:153.
   Medidas em px vêm direto do design (frame de 1920px, conteúdo de 1240px).
   ========================================================================== */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  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: "Inter";
  src: url("fonts/inter-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  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;
}

:root {
  --navy: #003658;
  --navy-hover: #004a78;
  --surface: #f7f7f7;
  --paper: #fff;
  --radius: 20px;
  --gutter: clamp(16px, 4vw, 40px);
  --content: 1240px;

  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Expo-out: chegada longa e macia, sem rebote. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

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

section[id] { scroll-margin-top: 110px; }

/* ---------- Tipografia ---------- */

.display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.1rem + 3.3vw, 3.6953rem); /* 59.124px */
  line-height: 1.0938; /* 64.667 / 59.124 */
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 29.562px;
  letter-spacing: 4.18px;
}

.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
}

/* Encolhe antes do texto quando falta largura (eyebrows longos no mobile). */
.rule {
  flex: 0 1 185px;
  width: 185px;
  min-width: 24px;
  height: 1px;
  transform-origin: left center;
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 20px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-hover); box-shadow: 0 12px 32px -14px rgb(0 54 88 / 0.7); }

.btn--white { background: #fff; color: var(--navy); }
.btn--white:hover { background: #eaf1f6; }
.btn--white:focus-visible { outline-color: #fff; }

.btn--lg {
  gap: 8.777px;
  padding: 14.044px 17.555px;
  border-radius: 17.555px;
  font-size: 17.555px;
}

.btn__arrow,
.btn__icon { flex: none; }

/* ---------- Navegação ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.nav.is-scrolled {
  background: rgb(255 255 255 / 0.82);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 1px 0 rgb(0 54 88 / 0.08);
}

.nav__inner {
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 16px 0 36px;
}

.nav__logo { flex: none; border-radius: 4px; }
.nav__logo img { width: 290px; }

.nav__links {
  display: flex;
  gap: 26px;
  padding: 10px;
}

.nav__links a {
  position: relative;
  padding: 10px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-out);
}

.nav__links a:hover::after,
.nav__links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ---------- Hero ---------- */

.hero {
  --hero-gap: 12px;
  --hero-pad: clamp(32px, 4.2vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 725fr) minmax(0, 503fr);
  align-items: center;
  gap: var(--hero-gap);
  padding-top: 4px;
}

/* Palco: foto + pessoa. Fica acima do painel para a pessoa invadi-lo, e
   corta só embaixo, onde ela "apoia" na base do hero. */
.hero__stage {
  position: relative;
  z-index: 1;
  clip-path: inset(-200% -200% 0 -200%);
}

.hero__media {
  position: relative;
  height: 684px;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Foto em 576,5×682 no canto esquerdo; à direita fica só o degradê sobre
   o fundo da página. A altura comanda, então a proporção nunca distorce. */
.hero__photo {
  position: absolute;
  inset: 0;
  display: flex;
  transform-origin: 40% 60%;
}
.hero__photo picture { flex: none; height: 99.71%; }
.hero__photo img { width: auto; height: 100%; max-width: none; }

/* Degradê radial navy do canto superior direito, 1:1 com o Figma. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 725 684' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-42.5 33.499 -35.507 -45.18 688 66.597)'><stop stop-color='rgba(0,54,88,1)' offset='0.2128'/><stop stop-color='rgba(0,54,88,0.5)' offset='0.57404'/><stop stop-color='rgba(0,54,88,0)' offset='1'/></radialGradient></defs></svg>");
  background-size: 100% 100%;
}

/* 561×587 no Figma (85,82% da altura do hero). A borda direita da caixa fica
   em painel + padding − 7px; com ≈11px de transparência antes da borda, o
   cotovelo para ~18px antes da coluna de texto, em qualquer largura.
   pointer-events: none mantém o painel clicável por baixo. */
.hero__person {
  position: absolute;
  bottom: 0;
  right: calc(-1 * (var(--hero-gap) + var(--hero-pad) - 7px));
  height: 85.82%;
  pointer-events: none;
}
.hero__person img { width: auto; height: 100%; max-width: none; }

.hero__panel {
  container-type: inline-size;
  height: 683px;
  padding: var(--hero-pad);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 23px;
}

.hero__panel .display {
  max-width: 388px;
  /* Escala com a largura do painel, não da viewport: o título nunca estoura. */
  font-size: clamp(2.25rem, 15.5cqi, 3.6953rem);
  letter-spacing: -0.02em; /* −1.1825px em 59.124px */
  text-wrap: wrap;
}

.hero__lead {
  max-width: 366.752px;
  font-family: var(--font-ui);
  font-size: 20.324px;
  line-height: 29.562px;
  letter-spacing: -0.02em; /* −0.4065px em 20.324px */
}

/* ---------- Frentes (cards grandes) ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 88px;
}

.pillar {
  position: relative;
  isolation: isolate;
  height: 457px;
  padding: 45px 37px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  background: #0b2232;
}

.pillar:focus-visible { border-radius: var(--radius); }

.pillar__bg { position: absolute; inset: 0; z-index: -1; }
.pillar__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }

/* Sombra radial do Figma (canto inferior esquerdo, 70%), reproduzida 1:1. */
.pillar__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 610 457' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.699999988079071'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(35.823 -23.45 31.301 51.979 64.741 402.5)'><stop stop-color='rgba(0,0,0,1)' offset='0'/><stop stop-color='rgba(0,0,0,0)' offset='1'/></radialGradient></defs></svg>");
  background-size: 100% 100%;
}

.pillar__title {
  max-width: 179px;
  font-weight: 600;
  font-size: 32px;
  line-height: 34px;
}

.pillar__text { max-width: 231px; font-size: 16px; }

.pillar__arrow { transition: transform 0.6s var(--ease-out); }

/* ---------- Cabeçalho de seção ---------- */

.section-head {
  display: flex;
  align-items: center;
  gap: 33px;
}

.section-head__title {
  flex: 0 1 718px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.section-head__text {
  flex: 0 1 295px;
  font-size: 16px;
}

.section-head--light { color: #fff; }

/* ---------- Engenharia e Espaços ---------- */

/* Base (sem JS ou com movimento reduzido): carrossel nativo com snap.
   Com movimento, main.js adiciona .is-pinned: a seção fixa na tela e a
   rolagem vertical desliza a trilha para o lado. */
.spaces {
  /* Recuo da trilha = margem do container + 14px do Figma, igual dos dois
     lados: o último card termina alinhado como o primeiro começa.
     O 100% resolve contra a largura do viewport da trilha onde é usado. */
  --track-pad: calc(max(var(--gutter), (100% - var(--content)) / 2) + 14px);
  --card-w: 396px;
  --card-gap: 12px;
  margin-top: 77px;
  /* Os cards sangram até a borda da janela. `clip` (não `hidden`) não cria
     contêiner de rolagem, então o sticky do palco continua funcionando. */
  overflow-x: clip;
}

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

.spaces__viewport {
  container-type: inline-size;
  margin-top: 44px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--track-pad);
  scrollbar-width: none;
}
.spaces__viewport::-webkit-scrollbar { display: none; }

.services {
  list-style: none;
  margin: 0;
  padding: 0 var(--track-pad);
  display: flex;
  gap: var(--card-gap);
  width: max-content;
}

.service {
  flex: none;
  width: var(--card-w);
  height: var(--card-h, 542px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

/* Recorte exato do Figma: imagem 431×308 deslocada (-18, -27) dentro de
   396×281. Em telas baixas o card encolhe e quem cede altura é a foto. */
.service__media {
  position: relative;
  flex: 0 1 281px;
  min-height: 120px;
  overflow: hidden;
}

.service__media picture {
  position: absolute;
  left: -4.545%;
  top: -9.609%;
  width: 108.838%;
  height: 109.609%;
}

.service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }

/* Como no Figma: título no mesmo ponto em todos os cards (343 = 281 + 62) e
   seta presa no pé (480), qualquer que seja o número de linhas do texto.
   Base igual (542 − 281) em todos: quando o card encolhe, toda foto cede a
   mesma altura e os títulos continuam alinhados entre si. */
.service__body {
  flex: 1 0 261px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 62px 18px 32px 30px;
}

.service__arrow { margin-top: auto; }

.service__title {
  max-width: 179px;
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
}
.service__title--w199 { max-width: 199px; }
.service__title--w253 { max-width: 253px; }
.service__title--w326 { max-width: 326px; }

.service__text { font-size: 14px; line-height: 17px; }
.service__text--w199 { max-width: 199px; }
.service__text--w275 { max-width: 275px; }
.service__text--w293 { max-width: 293px; }
.service__text--w306 { max-width: 306px; }
.service__text--w316 { max-width: 316px; }

/* Indicador: dica + trilho cujo cursor tem a largura da fração visível
   (curto = tem muito escondido) + contagem dos cards à vista. Só com JS,
   que é quem o atualiza. */
.spaces__progress {
  display: none;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
  font-size: 13px;
  font-weight: 500;
}
.js .spaces__progress { display: flex; }

.spaces__hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  /* Esmaece perto do fim, quando não há mais o que revelar. */
  opacity: clamp(0.35, calc((1 - var(--hs-p, 0)) * 6), 1);
}
.spaces__hint-swipe { display: none; }
.spaces:not(.is-pinned) .spaces__hint-scroll { display: none; }
.spaces:not(.is-pinned) .spaces__hint-swipe { display: inline; }

.spaces__hint-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
}

.spaces__rail {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: rgb(0 54 88 / 0.12);
}

.spaces__thumb {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--hs-frac, 0.5) * 100%);
  border-radius: inherit;
  background: var(--navy);
  transform: translateX(calc(var(--hs-p, 0) * var(--hs-k, 1) * 100%));
}

.spaces__count {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ----- Modo fixado ----- */

.spaces.is-pinned .spaces__pin {
  position: sticky;
  top: var(--hs-top, 98px);
}

/* A trilha passa a ser movida por transform; nada de rolagem nativa. */
.spaces.is-pinned .spaces__viewport {
  overflow: visible;
  scroll-snap-type: none;
}

.spaces.is-pinned .services { will-change: transform; }

/* ---------- Tecnologia e Sistemas ---------- */

.tech {
  position: relative;
  isolation: isolate;
  margin-top: 55px;
  min-height: 517px;
  padding: 39px 144px 45px 42px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.tech__bg { position: absolute; inset: 0; z-index: -1; opacity: 0.5; }
.tech__bg img { width: 100%; height: 100%; object-fit: cover; }

.capabilities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 61px;
}

.capability {
  flex: none;
  width: 199px;
  height: 243px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
}

/* Cada ícone usa o recorte do Figma (largura/altura/offset em % do frame). */
.capability__icon {
  position: relative;
  flex: none;
  width: var(--w);
  height: var(--h);
  overflow: hidden;
}

.capability__icon img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--iw);
  height: var(--ih);
  max-width: none;
}

.capability__icon--sistemas   { --w: 117px; --h: 137px; --iw: 154.01%; --ih: 115.04%; --x: -26.49%; --y: -10.62%; }
.capability__icon--automacoes { --w: 116px; --h: 121px; --iw: 201.48%; --ih: 128.98%; --x: -51.63%; --y: -16.48%; }
.capability__icon--ia         { --w: 121px; --h: 117px; --iw: 109.14%; --ih: 107.82%; --x: -4.57%;  --y: -3.62%;  }

.capability__title {
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
}
.capability__title--wide { width: 275px; }

.capability__text { font-size: 14px; }

.capability__divider {
  position: relative;
  flex: none;
  width: 0;
  height: 128px;
  transform-origin: center top;
}

.capability__divider img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 128px;
  height: 1px;
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ---------- CTA ---------- */

/* Palco do CTA: corta só embaixo, para a pessoa ultrapassar o topo do bloco
   e "apoiar" na base dele. */
.cta-stage {
  position: relative;
  margin-top: 64px;
  margin-bottom: 34px;
  clip-path: inset(-200% -200% 0 -200%);
}

.cta {
  position: relative;
  isolation: isolate;
  min-height: 337px;
  padding: 36px 42px 61px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  display: flex;
}

.cta__bg { position: absolute; inset: -10% 0; z-index: -1; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--navy), rgb(0 54 88 / 0));
}

/* 322,5×387 no Figma, em x=428 (= 42 de padding + 386 da coluna de texto):
   começa onde o texto termina e passa 50px acima do topo do bloco. O min()
   evita que estoure o bloco se ele ficar mais estreito que 428 + 322,5. */
.cta__person {
  position: absolute;
  bottom: 0;
  left: min(428px, 100% - 322.5px);
  z-index: 1;
  width: 322.5px;
  pointer-events: none;
}
.cta__person img { width: 100%; height: auto; }

.cta__content {
  max-width: 386px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 23px;
}

.cta__title {
  font-weight: 700;
  font-size: 48px;
  line-height: 53px;
}

.cta__text { font-size: 16px; }

/* ---------- Rodapé ---------- */

/* 1173px a partir de x=374 no Figma: 34px para dentro do container de 1240. */
.footer {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0 34px calc(16px + env(safe-area-inset-bottom, 0px));
}

.footer__rule {
  width: 100%;
  height: 1px;
  transform-origin: left center;
}

/* Linha principal: logo · divisor (centro em x=234) · colunas. As colunas
   terminam 52px antes do fim das réguas, como no design. */
.footer__main {
  display: flex;
  align-items: center;
  min-height: 164px;
  padding: 0 52px 0 10px;
}

.footer__logo { flex: none; border-radius: 4px; }
.footer__logo img { width: 142px; height: 42px; }

.footer__divider {
  position: relative;
  flex: none;
  width: 0;
  height: 132px;
  margin-left: 82px; /* centro em x=234: 234 − (10 + 142) */
}

.footer__divider img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 132px;
  height: 1px;
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
}

.footer__cols {
  display: flex;
  align-items: flex-start;
  gap: 113px;
  margin-left: auto;
}

.footer__col {
  width: 146px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__heading {
  font-size: 18px;
  font-weight: 700;
  line-height: 34px;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.footer__list--social { padding: 0; gap: 5px; }

.footer__list a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.3s var(--ease-out);
}
.footer__list a[href]:hover { text-decoration-color: currentColor; }

.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-block: 5px;
}

.footer__icon { flex: none; width: 17.069px; height: 17.069px; }
.footer__icon--ig { height: 16.759px; }

.footer__copy {
  padding: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.76px;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1180px) {
  .nav__inner { padding-inline: 0; }
  .nav__logo img { width: 240px; }
  .nav__links { gap: 8px; }
  .tech { padding-inline: 42px; }
  .capabilities { gap: clamp(24px, 4vw, 61px); }
}

@media (max-width: 1000px) {
  .nav__logo img { width: 196px; }
  .nav__links { gap: 0; padding-inline: 0; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }

  /* A engenheira do CTA não cabe ao lado do texto: ela desce para o canto
     inferior direito e o bloco reserva embaixo a altura dela + 20px de folga.
     Assim a altura acompanha o texto e ela nunca cobre o botão. */
  .cta { min-height: 0; padding-bottom: 320px; }
  .cta-stage { clip-path: inset(-200% 0 0 0 round var(--radius)); }
  .cta__person { left: auto; right: 4%; width: auto; height: 300px; }
  .cta__person img { width: auto; height: 100%; }
}

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  /* Empilhado: mesma proporção do desktop, então a composição só escala.
     A pessoa volta para dentro da foto e o corte ganha os cantos arredondados. */
  .hero__media { height: auto; aspect-ratio: 725 / 684; }
  .hero__stage { clip-path: inset(-200% 0 0 0 round var(--radius)); }
  .hero__person { right: 0; }
  .hero__panel { height: auto; padding: 40px 32px 44px; }

  .spaces { margin-top: 72px; }

  .section-head { flex-direction: column; align-items: stretch; gap: 16px; }
  .section-head__title,
  .section-head__text { flex: none; max-width: 600px; }

  /* --cols cards inteiros + uma faixa de --peek do próximo na borda.
     Gap = gutter: com o card alinhado ao gutter no snap, o anterior sai por
     inteiro, sem lasca à esquerda. cqi = largura do viewport da trilha. */
  .spaces {
    --cols: 2;
    --peek: 32px;
    --track-pad: var(--gutter);
    --card-gap: var(--gutter);
    --card-w: min(396px, (100cqi - var(--cols) * var(--gutter) - var(--gutter) - var(--peek)) / var(--cols));
  }
  .spaces__viewport { margin-top: 32px; }
  .spaces__progress { gap: 16px; margin-top: 20px; }
  .service { scroll-snap-stop: always; }

  .tech { padding: 36px 28px 44px; gap: 40px; }

  .footer { padding-inline: 0; }
  .footer__main { padding: 0; }
  .footer__cols { gap: 64px; }
  .capabilities { flex-direction: column; align-items: flex-start; gap: 32px; }
  .capability { width: auto; max-width: 320px; height: auto; }
  .capability__title--wide { width: auto; }
  .capability__divider { width: 128px; height: 1px; transform-origin: left center; }
  .capability__divider img { position: static; transform: none; }
}

@media (max-width: 720px) {
  .nav__inner { height: 72px; padding-top: 0; }
  .nav__logo img { width: 180px; }

  /* "possibilidades." precisa caber em ~300px de largura útil. */
  .display { font-size: clamp(1.875rem, 8.2vw, 2.25rem); hyphens: auto; }
  .hero__panel .display { font-size: clamp(2.25rem, 15.5cqi, 3.6953rem); hyphens: manual; }
  .nav__cta { padding: 10px 16px; font-size: 15px; }

  .spaces { --cols: 1; }
  .hero__panel { padding: 32px 24px 36px; }
  .hero__lead { font-size: 18px; line-height: 27px; }

  .pillars { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
  .pillar { height: 400px; padding: 32px 28px; }

  .tech { margin-top: 48px; padding-inline: 24px; }

  .footer { gap: 24px; }
  .footer__main { flex-direction: column; align-items: flex-start; gap: 28px; min-height: 0; padding-block: 8px; }
  .footer__divider { display: none; }
  .footer__cols { width: 100%; margin-left: 0; gap: 32px; }
  .footer__col { flex: 1; width: auto; }
  .footer__copy { letter-spacing: 1.6px; }

  .cta-stage { margin-top: 48px; margin-bottom: 32px; }
  .cta { padding-top: 36px; padding-inline: 28px; }
  .cta__bg::after { background: linear-gradient(to bottom, var(--navy) 10%, rgb(0 54 88 / 0.75) 55%, rgb(0 54 88 / 0.15)); }
  .cta__title { font-size: 38px; line-height: 42px; }
}

/* ==========================================================================
   Movimento
   Só existe com JS ativo (.js) e sem preferência por movimento reduzido.
   Entradas usam as propriedades individuais (translate/scale/rotate) e
   opacity/clip-path; hovers usam `transform`. Assim as duas camadas compõem
   em vez de se sobrescreverem.
   ========================================================================== */

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes fade-rise {
  from { opacity: 0; translate: 0 18px; filter: blur(6px); }
  to   { opacity: 1; translate: 0 0;    filter: none; }
}

@keyframes word-up {
  from { translate: 0 125%; rotate: 4deg; }
  to   { translate: 0 0;    rotate: 0deg; }
}

@keyframes card-rise {
  from { opacity: 0; translate: 0 64px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes card-slide {
  from { opacity: 0; translate: 140px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes nudge {
  0%, 55%, 100% { translate: 0 0; }
  25%           { translate: 6px 0; }
}

@keyframes unmask {
  from { clip-path: inset(var(--clip, 10% 6% 10% 6%) round var(--radius)); }
  to   { clip-path: inset(0 round var(--radius)); }
}

@keyframes wipe {
  from { clip-path: inset(0 100% 0 0 round var(--radius)); }
  to   { clip-path: inset(0 0 0 0 round var(--radius)); }
}

@keyframes settle { from { scale: 1.22; } to { scale: 1; } }

/* Texto "escrito" da esquerda para a direita, sem alterar layout. */
@keyframes type-in {
  from { opacity: 0.2; clip-path: inset(0 100% 0 0); translate: -8px 0; }
  to   { opacity: 1;   clip-path: inset(0 0 0 0);    translate: 0 0; }
}

@keyframes draw-x { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes draw-y { from { scale: 1 0; } to { scale: 1 1; } }

@keyframes icon-in {
  from { opacity: 0; scale: 0.8; filter: blur(6px); }
  to   { opacity: 1; scale: 1;   filter: none; }
}

@keyframes drift { from { translate: 0 -5%; } to { translate: 0 5%; } }

@keyframes person-in {
  from { opacity: 0; translate: 0 18%; filter: blur(10px); }
  to   { opacity: 1; translate: 0 0;   filter: none; }
}

/* Palavras partidas pelo JS: máscara + linha interna que sobe. */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Folga para descendentes (ç, p, g) não serem cortados pela máscara. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.w-i {
  display: inline-block;
  transform-origin: 0 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .btn__arrow,
  .btn__icon { transition: transform 0.45s var(--ease-out); }
  .btn:hover .btn__arrow { transform: translateX(4px); }
  /* Ícone (não seta): em vez de andar, inclina e cresce, como um chamado. */
  .btn:hover .btn__icon { transform: rotate(-12deg) scale(1.12); }

  /* Redes no rodapé: mesmo gesto do ícone do botão, com um leve quique no
     fim (curva com overshoot) — em 17px, o movimento precisa de vida. */
  .footer__icon { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .footer__social:is(:hover, :focus-visible) .footer__icon { transform: rotate(-12deg) scale(1.22); }

  .pillar:is(:hover, :focus-visible) .pillar__bg img,
  .service:hover .service__media img { transform: scale(1.045); }
  /* O círculo gira 45°: a seta ↗ ("ver mais") vira → ("vamos lá"). */
  .pillar:is(:hover, :focus-visible) .pillar__arrow { transform: rotate(45deg) scale(1.12); }

  /* ----- Estados iniciais ----- */

  .js [data-split]:not(.is-split) { visibility: hidden; }
  .js .w-i { translate: 0 125%; }

  .js [data-intro],
  .js [data-intro-media],
  .js [data-intro-person],
  .js [data-intro-panel],
  .js [data-intro-eyebrow],
  .js [data-reveal="rise"],
  .js [data-reveal="unfold"],
  .js [data-reveal="slide"] .service,
  .js .section-head .eyebrow > *,
  .js .section-head__text,
  .js .pillar__text,
  .js .pillar__arrow,
  .js .service__body > :not(.service__title),
  .js .service__title,
  .js .capability,
  .js .capability__divider,
  .js .cta__text,
  .js .cta__content .btn,
  .js [data-reveal="person"],
  .js .footer > * { opacity: 0; }

  /* ----- Abertura (hero + nav), disparada por .is-loaded ----- */

  .is-loaded [data-intro] {
    animation: fade-rise 1s var(--ease-out) var(--d, 0ms) both;
  }

  .is-loaded [data-intro-media] {
    animation:
      unmask 1.6s var(--ease-out) 100ms both,
      fade 0.6s linear 100ms both;
  }

  /* As duas cópias da foto assentam juntas, para a emenda nunca abrir. */
  .is-loaded [data-intro-media] .hero__photo {
    animation: settle 2.4s var(--ease-out) 100ms both;
  }

  /* A pessoa entra depois da foto: sobe da base (cortada pelo palco) e foca. */
  .is-loaded [data-intro-person] {
    animation: person-in 1.7s var(--ease-out) 420ms both;
  }

  .is-loaded [data-intro-panel] {
    animation:
      wipe 1.3s var(--ease-out) 260ms both,
      fade 0.4s linear 260ms both;
  }

  .is-loaded [data-intro-eyebrow] {
    animation: type-in 1.4s var(--ease-out) 520ms both;
  }

  .is-loaded [data-intro-split] .w-i {
    animation: word-up 1.15s var(--ease-out) calc(600ms + var(--i) * 70ms) both;
  }

  /* ----- Revelações no scroll, disparadas por .is-in ----- */

  /* Cards: sobem, e a foto assenta por dentro. */
  [data-reveal="rise"].is-in {
    animation: card-rise 1.2s var(--ease-out) var(--d, 0ms) both;
  }
  [data-reveal="rise"].is-in .pillar__bg img {
    animation: settle 1.9s var(--ease-out) var(--d, 0ms) both;
  }
  .pillar.is-in .w-i {
    animation: word-up 1s var(--ease-out) calc(var(--d, 0ms) + 380ms + var(--i) * 70ms) both;
  }
  .pillar.is-in .pillar__text {
    animation: fade-rise 1s var(--ease-out) calc(var(--d, 0ms) + 600ms) both;
  }
  .pillar.is-in .pillar__arrow {
    animation: icon-in 0.9s var(--ease-out) calc(var(--d, 0ms) + 760ms) both;
  }
  /* Serviços: os cards entram deslizando da direita, em cascata. O próprio
     movimento de entrada já anuncia o eixo em que a seção vai andar. */
  .service:nth-child(2) { --si: 1; }
  .service:nth-child(3) { --si: 2; }
  .service:nth-child(4) { --si: 3; }
  .service:nth-child(5) { --si: 4; }
  .service:nth-child(6) { --si: 5; }
  .service { --sd: calc(var(--si, 0) * 90ms); }

  [data-reveal="slide"].is-in .service {
    animation: card-slide 1.3s var(--ease-out) var(--sd) both;
  }
  /* No carrossel nativo, deslocar o card faz o snap persegui-lo e a trilha
     termina fora do início; ali a entrada é só opacidade. */
  .spaces:not(.is-pinned) [data-reveal="slide"].is-in .service {
    animation-name: fade;
  }
  [data-reveal="slide"].is-in .service__media img {
    animation: settle 1.9s var(--ease-out) var(--sd) both;
  }
  [data-reveal="slide"].is-in .service__title {
    animation: fade-rise 1s var(--ease-out) calc(var(--sd) + 320ms) both;
  }
  [data-reveal="slide"].is-in .service__text {
    animation: fade-rise 1s var(--ease-out) calc(var(--sd) + 420ms) both;
  }
  [data-reveal="slide"].is-in .service__arrow {
    animation: icon-in 0.9s var(--ease-out) calc(var(--sd) + 540ms) both;
  }

  .spaces__hint-arrow { animation: nudge 1.8s var(--ease-out) infinite; }

  /* Engenheira do CTA: sobe da base (cortada pelo palco) depois que o bloco abre. */
  [data-reveal="person"].is-in {
    animation: person-in 1.6s var(--ease-out) 380ms both;
  }

  /* Rodapé: as réguas se desenham da esquerda, o conteúdo sobe entre elas. */
  .footer.is-in .footer__rule {
    animation:
      fade 0.3s linear both,
      draw-x 1.4s var(--ease-out) both;
  }
  .footer.is-in .footer__rule ~ .footer__rule { animation-delay: 260ms; }
  .footer.is-in .footer__main {
    animation: fade-rise 1.1s var(--ease-out) 140ms both;
  }
  .footer.is-in .footer__copy {
    animation: fade-rise 1s var(--ease-out) 420ms both;
  }

  /* Blocos escuros: abrem como uma janela. */
  [data-reveal="unfold"].is-in {
    animation:
      unmask 1.5s var(--ease-out) both,
      fade 0.5s linear both;
  }
  [data-reveal="unfold"].is-in :is(.tech__bg, .cta__bg) img {
    animation: settle 2.4s var(--ease-out) both;
  }

  /* Cabeçalhos: eyebrow, régua desenhando, título palavra a palavra, apoio. */
  .tech { --base: 280ms; }

  .section-head.is-in .eyebrow > span {
    animation: type-in 1.2s var(--ease-out) var(--base, 0ms) both;
  }
  .section-head.is-in .rule {
    animation:
      fade 0.3s linear calc(var(--base, 0ms) + 120ms) both,
      draw-x 1.4s var(--ease-out) calc(var(--base, 0ms) + 120ms) both;
  }
  .section-head.is-in .w-i {
    animation: word-up 1.1s var(--ease-out) calc(var(--base, 0ms) + 140ms + var(--i) * 70ms) both;
  }
  .section-head.is-in .section-head__text {
    animation: fade-rise 1.1s var(--ease-out) calc(var(--base, 0ms) + 420ms) both;
  }

  .capabilities.is-in .capability {
    animation: fade-rise 1.1s var(--ease-out) calc(var(--base, 0ms) + 200ms + var(--d, 0ms)) both;
  }
  .capabilities.is-in .capability__icon {
    animation: icon-in 1.3s var(--ease-out) calc(var(--base, 0ms) + 160ms + var(--d, 0ms)) both;
  }
  .capabilities.is-in .capability__divider {
    animation:
      fade 0.3s linear calc(var(--base, 0ms) + 200ms + var(--d, 0ms)) both,
      draw-y 1.2s var(--ease-out) calc(var(--base, 0ms) + 200ms + var(--d, 0ms)) both;
  }

  .cta__content { --base: 240ms; }
  .cta__content.is-in .w-i {
    animation: word-up 1.1s var(--ease-out) calc(var(--base) + var(--i) * 70ms) both;
  }
  .cta__content.is-in .cta__text {
    animation: fade-rise 1.1s var(--ease-out) calc(var(--base) + 380ms) both;
  }
  .cta__content.is-in .btn {
    animation: fade-rise 1.1s var(--ease-out) calc(var(--base) + 520ms) both;
  }

  @media (max-width: 960px) {
    .capabilities.is-in .capability__divider {
      animation:
        fade 0.3s linear calc(var(--base, 0ms) + 200ms + var(--d, 0ms)) both,
        draw-x 1.2s var(--ease-out) calc(var(--base, 0ms) + 200ms + var(--d, 0ms)) both;
    }
  }

  /* ----- Parallax ligado ao scroll (progressivo; roda fora da main thread) ----- */

  @supports (animation-timeline: view()) {
    .cta__bg {
      animation: drift linear both;
      animation-timeline: view();
    }
  }
}